@reach/utils - npm Package Compare versions

Comparing version 0.10.4 to 0.10.5

dist/index.d.ts

 import React from "react";
 import warning from "warning";
-import { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, PropsFromAs, PropsWithAs, SingleOrArray, ThenArg } from "./types";
+import { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, ElementByTag, ElementTagNameMap, ForwardRefExoticComponentWithAs, ForwardRefWithAsRenderFunction, FunctionComponentWithAs, MemoExoticComponentWithAs, PropsFromAs, PropsWithAs, SingleOrArray, ThenArg } from "./types";
 /**
@@ -82,16 +82,6 @@ * React currently throws a warning when using useLayoutEffect on the server.
  * the time time being.
- *
- * TODO: Eventually we should probably just try to get the type defs above
- * working across the board, but ain't nobody got time for that mess!
- *
- * @param comp
  */
-export declare function forwardRefWithAs<Props, ComponentType extends As = "div">(comp: (props: PropsFromAs<ComponentType, Props>, ref: React.RefObject<any>) => React.ReactElement | null): ComponentWithAs<ComponentType, Props>;
+export declare function forwardRefWithAs<Props, ComponentType extends As = "div">(render: ForwardRefWithAsRenderFunction<ComponentType, Props>): ForwardRefExoticComponentWithAs<ComponentType, Props>;
+export declare function memoWithAs<Props, ComponentType extends As = "div">(Component: FunctionComponentWithAs<ComponentType, Props>, propsAreEqual?: (prevProps: Readonly<React.PropsWithChildren<Props>>, nextProps: Readonly<React.PropsWithChildren<Props>>) => boolean): MemoExoticComponentWithAs<ComponentType, Props>;
 /**
- * Same deal as above
- *
- * @param comp
- */
-export declare function memoWithAs<Props, ComponentType extends As = "div">(comp: ComponentWithAs<ComponentType, Props>): ComponentWithAs<ComponentType, Props>;
-/**
  * Get the size of the working document minus the scrollbar offset.
@@ -274,2 +264,2 @@ *
 export declare function wrapEvent<EventType extends React.SyntheticEvent | Event>(theirHandler: ((event: EventType) => any) | undefined, ourHandler: (event: EventType) => any): (event: EventType) => any;
-export { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, PropsFromAs, PropsWithAs, SingleOrArray, ThenArg, };
+export { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, ElementByTag, ElementTagNameMap, ForwardRefExoticComponentWithAs, FunctionComponentWithAs, MemoExoticComponentWithAs, PropsFromAs, PropsWithAs, SingleOrArray, ThenArg, };

dist/types.d.ts

 import * as React from "react";
-declare type ReactElement = React.ReactElement;
 /**
@@ -64,5 +63,11 @@ * React.Ref uses the readonly type `React.RefObject` instead of
 export declare type ComponentWithForwardedRef<ElementType extends React.ElementType, ComponentProps> = React.ForwardRefExoticComponent<ComponentProps & React.HTMLProps<React.ElementType<ElementType>> & React.ComponentPropsWithRef<ElementType>>;
-export interface ComponentWithAs<ComponentType extends As, ComponentProps> {
-    <TT extends As>(props: PropsWithAs<TT, ComponentProps>): ReactElement | null;
-    (props: PropsWithAs<ComponentType, ComponentProps>): ReactElement | null;
+export interface FunctionComponentWithAs<ComponentType extends As, ComponentProps> {
+    /**
+     * Inherited from React.FunctionComponent with modifications to support `as`
+     */
+    <TT extends As>(props: PropsWithAs<TT, ComponentProps>, context?: any): React.ReactElement<any, any> | null;
+    (props: PropsWithAs<ComponentType, ComponentProps>, context?: any): React.ReactElement<any, any> | null;
+    /**
+     * Inherited from React.FunctionComponent
+     */
     displayName?: string;
@@ -73,2 +78,48 @@ propTypes?: React.WeakValidationMap<PropsWithAs<ComponentType, ComponentProps>>;
 }
+export interface ComponentWithAs<ComponentType extends As, ComponentProps> extends FunctionComponentWithAs<ComponentType, ComponentProps> {
+}
+interface ExoticComponentWithAs<ComponentType extends As, ComponentProps> {
+    /**
+     * **NOTE**: Exotic components are not callable.
+     * Inherited from React.ExoticComponent with modifications to support `as`
+     */
+    <TT extends As>(props: PropsWithAs<TT, ComponentProps>): React.ReactElement | null;
+    (props: PropsWithAs<ComponentType, ComponentProps>): React.ReactElement | null;
+    /**
+     * Inherited from React.ExoticComponent
+     */
+    readonly $$typeof: symbol;
+}
+interface NamedExoticComponentWithAs<ComponentType extends As, ComponentProps> extends ExoticComponentWithAs<ComponentType, ComponentProps> {
+    /**
+     * Inherited from React.NamedExoticComponent
+     */
+    displayName?: string;
+}
+export interface ForwardRefExoticComponentWithAs<ComponentType extends As, ComponentProps> extends NamedExoticComponentWithAs<ComponentType, ComponentProps> {
+    /**
+     * Inherited from React.ForwardRefExoticComponent
+     * Will show `ForwardRef(${Component.displayName || Component.name})` in devtools by default,
+     * but can be given its own specific name
+     */
+    defaultProps?: Partial<PropsWithAs<ComponentType, ComponentProps>>;
+    propTypes?: React.WeakValidationMap<PropsWithAs<ComponentType, ComponentProps>>;
+}
+export interface MemoExoticComponentWithAs<ComponentType extends As, ComponentProps> extends NamedExoticComponentWithAs<ComponentType, ComponentProps> {
+    readonly type: ComponentType extends React.ComponentType ? ComponentType : FunctionComponentWithAs<ComponentType, ComponentProps>;
+}
+export interface ForwardRefWithAsRenderFunction<ComponentType extends As, ComponentProps = {}> {
+    (props: React.PropsWithChildren<PropsFromAs<ComponentType, ComponentProps>>, ref: ((instance: (ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any) | null) => void) | React.MutableRefObject<(ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any) | null> | null): React.ReactElement | null;
+    displayName?: string;
+    /**
+     * defaultProps are not supported on render functions
+     */
+    defaultProps?: never;
+    /**
+     * propTypes are not supported on render functions
+     */
+    propTypes?: never;
+}
+export declare type ElementTagNameMap = HTMLElementTagNameMap & Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>;
+export declare type ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName];
 export {};

dist/utils.cjs.development.js

@@ -114,3 +114,3 @@ 'use strict';
 function canUseDOM() {
-  return typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
 }
@@ -145,20 +145,9 @@ /**
  * the time time being.
- *
- * TODO: Eventually we should probably just try to get the type defs above
- * working across the board, but ain't nobody got time for that mess!
- *
- * @param comp
  */
 
-function forwardRefWithAs(comp) {
-  return React__default.forwardRef(comp);
+function forwardRefWithAs(render) {
+  return React__default.forwardRef(render);
 }
-/**
- * Same deal as above
- *
- * @param comp
- */
-
-function memoWithAs(comp) {
-  return React__default.memo(comp);
+function memoWithAs(Component, propsAreEqual) {
+  return React__default.memo(Component, propsAreEqual);
 }
@@ -545,3 +534,3 @@ /**
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, refs);
+  }, [].concat(refs));
 }
@@ -548,0 +537,0 @@ /**

dist/utils.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=e(require("warning")),o=f()?n.useLayoutEffect:n.useEffect,u=p,i="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();function c(e,t){if(null!=e)if(d(e))e(t);else try{e.current=t}catch(n){throw new Error('Cannot assign value "'+t+'" to ref "'+e+'"')}}function f(){return"undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement}function s(e){return e&&e.ownerDocument?e.ownerDocument:f()?document:null}function l(e){var t=e?s(e):null;return t?t.defaultView||window:null}function a(e){return"boolean"==typeof e}function d(e){return!(!e||"[object Function]"!={}.toString.call(e))}function p(){}var w=p,v=p,m=p;exports.warning=r,exports.assignRef=c,exports.boolOrBoolString=function(e){return"true"===e||!!a(e)&&e},exports.canUseDOM=f,exports.checkStyles=u,exports.cloneValidElement=function(e,n){for(var r=arguments.length,o=new Array(r>2?r-2:0),u=2;u<r;u++)o[u-2]=arguments[u];return t.isValidElement(e)?t.cloneElement.apply(void 0,[e,n].concat(o)):e},exports.createNamedContext=function(e,n){var r=t.createContext(n);return r.displayName=e,r},exports.forwardRefWithAs=function(e){return n.forwardRef(e)},exports.getDocumentDimensions=function(e){if(!f())return{width:0,height:0};var t=e?s(e):document,n=e?l(e):window;return{width:t.documentElement.clientWidth||n.innerWidth,height:t.documentElement.clientHeight||n.innerHeight}},exports.getElementComputedStyle=function(e,t){var n=null,r=s(e);return e.currentStyle?n=e.currentStyle[t]:r&&r.defaultView&&d(r.defaultView.getComputedStyle)&&(n=r.defaultView.getComputedStyle(e,null).getPropertyValue(t)),n},exports.getOwnerDocument=s,exports.getOwnerWindow=l,exports.getScrollPosition=function(e){if(!f())return{scrollX:0,scrollY:0};var t=e?l(e):window;return{scrollX:t.scrollX,scrollY:t.scrollY}},exports.getScrollbarOffset=function(){try{if(window.innerWidth>document.documentElement.clientWidth)return window.innerWidth-document.documentElement.clientWidth}catch(e){}return 0},exports.isBoolean=a,exports.isFunction=d,exports.isNumber=function(e){return"number"==typeof e},exports.isRightClick=function(e){return 3===e.which||2===e.button},exports.isString=function(e){return"string"==typeof e},exports.makeId=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter((function(e){return null!=e})).join("--")},exports.memoWithAs=function(e){return n.memo(e)},exports.noop=p,exports.ponyfillGlobal=i,exports.stateToAttributeString=function(e){return String(e).replace(/([\s_]+)/g,"-").toLowerCase()},exports.useCallbackProp=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e})),t.useCallback((function(){return n.current&&n.current.apply(n,arguments)}),[])},exports.useCheckStyles=v,exports.useConstant=function(e){var t=n.useRef();return t.current||(t.current={v:e()}),t.current.v},exports.useControlledState=function(e,n){var r=t.useRef(null!=e),o=t.useState(n),u=o[0],i=o[1],c=t.useCallback((function(e){r.current||i(e)}),[]);return[r.current?e:u,c]},exports.useControlledSwitchWarning=w,exports.useEventCallback=function(e){var n=t.useRef(e);return o((function(){n.current=e})),t.useCallback((function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];return n.current.apply(n,[e].concat(r))}),[])},exports.useEventListener=function(e,n,r){void 0===r&&(r=window);var o=t.useRef(n);t.useEffect((function(){o.current=n}),[n]),t.useEffect((function(){if(r&&r.addEventListener)return r.addEventListener(e,t),function(){r.removeEventListener(e,t)};function t(e){o.current(e)}}),[e,r])},exports.useFocusChange=function(e,n,r){void 0===e&&(e=console.log),void 0===n&&(n="focus"),void 0===r&&(r=document);var o=t.useRef(r.activeElement);t.useEffect((function(){function t(t){o.current!==r.activeElement&&(e(r.activeElement,o.current,t),o.current=r.activeElement)}return o.current=r.activeElement,r.addEventListener(n,t,!0),function(){r.removeEventListener(n,t)}}),[n,e,r])},exports.useForkedRef=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.useMemo((function(){return n.every((function(e){return null==e}))?null:function(e){n.forEach((function(t){c(t,e)}))}}),n)},exports.useIsomorphicLayoutEffect=o,exports.usePrevious=function(e){var n=t.useRef(null);return t.useEffect((function(){n.current=e}),[e]),n.current},exports.useStateLogger=m,exports.useUpdateEffect=function(e,n){var r=t.useRef(!1);t.useEffect((function(){r.current?e():r.current=!0}),n)},exports.wrapEvent=function(e,t){return function(n){if(e&&e(n),!n.defaultPrevented)return t(n)}};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),r=e(require("warning")),o=f()?n.useLayoutEffect:n.useEffect,u=p,i="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();function c(e,t){if(null!=e)if(d(e))e(t);else try{e.current=t}catch(n){throw new Error('Cannot assign value "'+t+'" to ref "'+e+'"')}}function f(){return!("undefined"==typeof window||!window.document||!window.document.createElement)}function s(e){return e&&e.ownerDocument?e.ownerDocument:f()?document:null}function l(e){var t=e?s(e):null;return t?t.defaultView||window:null}function a(e){return"boolean"==typeof e}function d(e){return!(!e||"[object Function]"!={}.toString.call(e))}function p(){}var w=p,m=p,v=p;exports.warning=r,exports.assignRef=c,exports.boolOrBoolString=function(e){return"true"===e||!!a(e)&&e},exports.canUseDOM=f,exports.checkStyles=u,exports.cloneValidElement=function(e,n){for(var r=arguments.length,o=new Array(r>2?r-2:0),u=2;u<r;u++)o[u-2]=arguments[u];return t.isValidElement(e)?t.cloneElement.apply(void 0,[e,n].concat(o)):e},exports.createNamedContext=function(e,n){var r=t.createContext(n);return r.displayName=e,r},exports.forwardRefWithAs=function(e){return n.forwardRef(e)},exports.getDocumentDimensions=function(e){if(!f())return{width:0,height:0};var t=e?s(e):document,n=e?l(e):window;return{width:t.documentElement.clientWidth||n.innerWidth,height:t.documentElement.clientHeight||n.innerHeight}},exports.getElementComputedStyle=function(e,t){var n=null,r=s(e);return e.currentStyle?n=e.currentStyle[t]:r&&r.defaultView&&d(r.defaultView.getComputedStyle)&&(n=r.defaultView.getComputedStyle(e,null).getPropertyValue(t)),n},exports.getOwnerDocument=s,exports.getOwnerWindow=l,exports.getScrollPosition=function(e){if(!f())return{scrollX:0,scrollY:0};var t=e?l(e):window;return{scrollX:t.scrollX,scrollY:t.scrollY}},exports.getScrollbarOffset=function(){try{if(window.innerWidth>document.documentElement.clientWidth)return window.innerWidth-document.documentElement.clientWidth}catch(e){}return 0},exports.isBoolean=a,exports.isFunction=d,exports.isNumber=function(e){return"number"==typeof e},exports.isRightClick=function(e){return 3===e.which||2===e.button},exports.isString=function(e){return"string"==typeof e},exports.makeId=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter((function(e){return null!=e})).join("--")},exports.memoWithAs=function(e,t){return n.memo(e,t)},exports.noop=p,exports.ponyfillGlobal=i,exports.stateToAttributeString=function(e){return String(e).replace(/([\s_]+)/g,"-").toLowerCase()},exports.useCallbackProp=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e})),t.useCallback((function(){return n.current&&n.current.apply(n,arguments)}),[])},exports.useCheckStyles=m,exports.useConstant=function(e){var t=n.useRef();return t.current||(t.current={v:e()}),t.current.v},exports.useControlledState=function(e,n){var r=t.useRef(null!=e),o=t.useState(n),u=o[0],i=o[1],c=t.useCallback((function(e){r.current||i(e)}),[]);return[r.current?e:u,c]},exports.useControlledSwitchWarning=w,exports.useEventCallback=function(e){var n=t.useRef(e);return o((function(){n.current=e})),t.useCallback((function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];return n.current.apply(n,[e].concat(r))}),[])},exports.useEventListener=function(e,n,r){void 0===r&&(r=window);var o=t.useRef(n);t.useEffect((function(){o.current=n}),[n]),t.useEffect((function(){if(r&&r.addEventListener)return r.addEventListener(e,t),function(){r.removeEventListener(e,t)};function t(e){o.current(e)}}),[e,r])},exports.useFocusChange=function(e,n,r){void 0===e&&(e=console.log),void 0===n&&(n="focus"),void 0===r&&(r=document);var o=t.useRef(r.activeElement);t.useEffect((function(){function t(t){o.current!==r.activeElement&&(e(r.activeElement,o.current,t),o.current=r.activeElement)}return o.current=r.activeElement,r.addEventListener(n,t,!0),function(){r.removeEventListener(n,t)}}),[n,e,r])},exports.useForkedRef=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.useMemo((function(){return n.every((function(e){return null==e}))?null:function(e){n.forEach((function(t){c(t,e)}))}}),[].concat(n))},exports.useIsomorphicLayoutEffect=o,exports.usePrevious=function(e){var n=t.useRef(null);return t.useEffect((function(){n.current=e}),[e]),n.current},exports.useStateLogger=v,exports.useUpdateEffect=function(e,n){var r=t.useRef(!1);t.useEffect((function(){r.current?e():r.current=!0}),n)},exports.wrapEvent=function(e,t){return function(n){if(e&&e(n),!n.defaultPrevented)return t(n)}};
 //# sourceMappingURL=utils.cjs.production.min.js.map

dist/utils.esm.js

@@ -107,3 +107,3 @@ import React, { isValidElement, cloneElement, createContext, useRef, useState, useCallback, useEffect, useMemo } from 'react';
 function canUseDOM() {
-  return typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
 }
@@ -138,20 +138,9 @@ /**
  * the time time being.
- *
- * TODO: Eventually we should probably just try to get the type defs above
- * working across the board, but ain't nobody got time for that mess!
- *
- * @param comp
  */
 
-function forwardRefWithAs(comp) {
-  return React.forwardRef(comp);
+function forwardRefWithAs(render) {
+  return React.forwardRef(render);
 }
-/**
- * Same deal as above
- *
- * @param comp
- */
-
-function memoWithAs(comp) {
-  return React.memo(comp);
+function memoWithAs(Component, propsAreEqual) {
+  return React.memo(Component, propsAreEqual);
 }
@@ -538,3 +527,3 @@ /**
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, refs);
+  }, [].concat(refs));
 }
@@ -541,0 +530,0 @@ /**

package.json

 {
   "name": "@reach/utils",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "Internal, shared utilities for Reach UI.",
@@ -31,3 +31,3 @@ "author": "React Training <[e-mail]>",
   },
-  "gitHead": "a0c7b3672835b2a9f84732663bb0e78992541211"
+  "gitHead": "86a046f54d53b6420e392b3fa56dd991d9d4e458"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

148742

increased by2.2%

Lines of code

1535

increased by1.59%

No dependency changes