@reach/utils - npm Package Compare versions

Comparing version 0.7.1 to 0.7.2

dist/index.d.ts

@@ -0,1 +1,2 @@
+import { useLayoutEffect } from "react";
 import { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, PropsFromAs, PropsWithAs } from "./types";
@@ -18,2 +19,4 @@ import React from "react";
 export declare function assignRef<T = any>(ref: AssignableRef<T>, value: any): void;
+export declare function canUseDOM(): boolean;
+export declare function cloneValidElement<P>(element: React.ReactElement<P> | React.ReactNode, props?: Partial<P> & React.Attributes, ...children: React.ReactNode[]): React.ReactElement<P> | React.ReactNode;
 /**
@@ -42,2 +45,22 @@ * Get the scrollbar offset distance.
 /**
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser. We occasionally need useLayoutEffect to ensure
+ * we don't get a render flash for certain operations, but we may also need
+ * affected components to render on the server. One example is when setting a
+ * component's descendants to retrieve their index values. The index value may be
+ * needed to determine whether a descendant is active, but with useEffect in the
+ * browser there will be an initial frame where the active descendant is not set.
+ *
+ * Important to note that using this hook as an escape hatch will break the
+ * eslint dependency warnings, so use sparingly only when needed and pay close
+ * attention to the dependency array!
+ *
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ *
+ * @param effect
+ * @param deps
+ */
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+/**
  * Returns the previous value of a reference after a component update.
@@ -47,3 +70,3 @@ *
  */
-export declare function usePrevious(value: any): any;
+export declare function usePrevious<T = any>(value: T): T | null;
 /**
@@ -64,3 +87,3 @@ * Call an effect after a component update, skipping the initial mount.
  */
-export declare function wrapEvent<E extends React.SyntheticEvent = React.SyntheticEvent>(theirHandler: ((event: E) => any) | undefined, ourHandler: (event: E) => any): (event: E) => any;
+export declare function wrapEvent<E extends React.SyntheticEvent | Event>(theirHandler: ((event: E) => any) | undefined, ourHandler: (event: E) => any): (event: E) => any;
 /**
@@ -75,1 +98,37 @@ * This is a hack to stop TS errors from dynamic components with an `as` prop
 export { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, PropsFromAs, PropsWithAs };
+declare type DescendantElement<T = HTMLElement> = T extends HTMLElement ? T : HTMLElement;
+declare type Descendant<T> = {
+    element: DescendantElement<T>;
+    key?: string | number | null;
+    disabled?: boolean;
+};
+/**
+ * This hook registers our descendant by passing it into an array. We can then
+ * search that array by to find its index when registering it in the component.
+ * We use this for focus management, keyboard navigation, and typeahead
+ * functionality for some components.
+ *
+ * The hook accepts the element node and (optionally) a key. The key is useful
+ * if multiple descendants have identical text values and we need to
+ * differentiate siblings for some reason.
+ *
+ * Our main goals with this are:
+ *   1) maximum composability,
+ *   2) minimal API friction
+ *   3) SSR compatibility*
+ *   4) concurrent safe
+ *   5) index always up-to-date with the tree despite changes
+ *   6) works with memoization of any component in the tree (hopefully)
+ *
+ * * As for SSR, the good news is that we don't actually need the index on the
+ * server for most use-cases, as we are only using it to determine the order of
+ * composed descendants for keyboard navigation. However, in the few cases where
+ * this is not the case, we can require an explicit index from the app.
+ */
+export declare function useDescendant<T>({ element, key, disabled }: Descendant<T>, indexProp?: number): number;
+export declare function useDescendants<T>(): [Descendant<T>[], React.Dispatch<React.SetStateAction<Descendant<T>[]>>];
+export declare function DescendantProvider<T>({ children, descendants, setDescendants }: {
+    children: React.ReactNode;
+    descendants: Descendant<T>[];
+    setDescendants: React.Dispatch<React.SetStateAction<Descendant<T>[]>>;
+}): JSX.Element;

dist/utils.cjs.development.js

@@ -7,2 +7,3 @@ 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
@@ -55,2 +56,18 @@ var React__default = _interopDefault(React);
 }
+function canUseDOM() {
+  return typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+}
+function cloneValidElement(element, props) {
+  var children = [];
+
+  for (var _i = 2; _i < arguments.length; _i++) {
+    children[_i - 2] = arguments[_i];
+  }
+
+  if (!React.isValidElement(element)) {
+    return element;
+  }
+
+  return React.cloneElement.apply(void 0, tslib.__spreadArrays([element, props], children));
+}
 /**
@@ -119,2 +136,25 @@ * Get the scrollbar offset distance.
 /**
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser. We occasionally need useLayoutEffect to ensure
+ * we don't get a render flash for certain operations, but we may also need
+ * affected components to render on the server. One example is when setting a
+ * component's descendants to retrieve their index values. The index value may be
+ * needed to determine whether a descendant is active, but with useEffect in the
+ * browser there will be an initial frame where the active descendant is not set.
+ *
+ * Important to note that using this hook as an escape hatch will break the
+ * eslint dependency warnings, so use sparingly only when needed and pay close
+ * attention to the dependency array!
+ *
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ *
+ * @param effect
+ * @param deps
+ */
+
+var useIsomorphicLayoutEffect =
+/*#__PURE__*/
+canUseDOM() ? React.useLayoutEffect : React.useEffect;
+/**
  * Returns the previous value of a reference after a component update.
@@ -126,3 +166,3 @@ *
 function usePrevious(value) {
-  var ref = React.useRef();
+  var ref = React.useRef(null);
   React.useEffect(function () {
@@ -180,4 +220,185 @@ ref.current = value;
 }
+var DescendantContext =
+/*#__PURE__*/
+React.createContext({});
 
+function useDescendantContext() {
+  return React.useContext(DescendantContext);
+} ////////////////////////////////////////////////////////////////////////////////
+// TODO: Move to @reach/descendants once fully tested and implemented
+
+/**
+ * This hook registers our descendant by passing it into an array. We can then
+ * search that array by to find its index when registering it in the component.
+ * We use this for focus management, keyboard navigation, and typeahead
+ * functionality for some components.
+ *
+ * The hook accepts the element node and (optionally) a key. The key is useful
+ * if multiple descendants have identical text values and we need to
+ * differentiate siblings for some reason.
+ *
+ * Our main goals with this are:
+ *   1) maximum composability,
+ *   2) minimal API friction
+ *   3) SSR compatibility*
+ *   4) concurrent safe
+ *   5) index always up-to-date with the tree despite changes
+ *   6) works with memoization of any component in the tree (hopefully)
+ *
+ * * As for SSR, the good news is that we don't actually need the index on the
+ * server for most use-cases, as we are only using it to determine the order of
+ * composed descendants for keyboard navigation. However, in the few cases where
+ * this is not the case, we can require an explicit index from the app.
+ */
+
+
+function useDescendant(_a, indexProp) {
+  var element = _a.element,
+      key = _a.key,
+      disabled = _a.disabled;
+
+  var _b = React.useState(),
+      forceUpdate = _b[1];
+
+  var _c = useDescendantContext(),
+      registerDescendant = _c.registerDescendant,
+      unregisterDescendant = _c.unregisterDescendant,
+      descendants = _c.descendants; // Prevent any flashing
+
+
+  useIsomorphicLayoutEffect(function () {
+    if (!element) forceUpdate({});
+    registerDescendant({
+      element: element,
+      key: key,
+      disabled: disabled
+    });
+    return function () {
+      return unregisterDescendant(element);
+    };
+  }, [element, key, disabled]);
+  return indexProp !== null && indexProp !== void 0 ? indexProp : descendants.findIndex(function (_a) {
+    var _el = _a.element;
+    return _el === element;
+  });
+}
+function useDescendants() {
+  return React.useState([]);
+}
+function DescendantProvider(_a) {
+  var children = _a.children,
+      descendants = _a.descendants,
+      setDescendants = _a.setDescendants;
+  var registerDescendant = React__default.useCallback(function (_a) {
+    var disabled = _a.disabled,
+        element = _a.element,
+        providedKey = _a.key;
+
+    if (!element) {
+      return;
+    }
+
+    setDescendants(function (items) {
+      if (items.find(function (_a) {
+        var _el = _a.element;
+        return _el === element;
+      }) == null) {
+        var key = providedKey !== null && providedKey !== void 0 ? providedKey : element.textContent;
+        /*
+         * When registering a descendant, we need to make sure we insert in
+         * into the array in the same order that it appears in the DOM. So as
+         * new descendants are added or maybe some are removed, we always know
+         * that the array is up-to-date and correct.
+         *
+         * So here we look at our registered descendants and see if the new
+         * element we are adding appears earlier than an existing descendant's
+         * DOM node via `node.compareDocumentPosition`. If it does, we insert
+         * the new element at this index. Because `registerDescendant` will be
+         * called in an effect every time the descendants state value changes,
+         * we should be sure that this index is accurate when descendent
+         * elements come or go from our component.
+         */
+
+        var index = items.findIndex(function (_a) {
+          var existingElement = _a.element;
+
+          if (!existingElement || !element) {
+            return false;
+          }
+          /*
+           * Does this element's DOM node appear before another item in the
+           * array in our DOM tree? If so, return true to grab the index at
+           * this point in the array so we know where to insert the new
+           * element.
+           */
+
+
+          return Boolean(existingElement.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING);
+        });
+        var newItem = {
+          disabled: disabled,
+          element: element,
+          key: key
+        }; // If an index is not found we will push the element to the end.
+
+        if (index === -1) {
+          return tslib.__spreadArrays(items, [newItem]);
+        }
+
+        return tslib.__spreadArrays(items.slice(0, index), [newItem], items.slice(index));
+      }
+
+      return items;
+    });
+  },
+  /*
+   * setDescendants is a state setter initialized by the useDescendants hook.
+   * We can safely ignore the lint warning here because it will not change
+   * between renders.
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var unregisterDescendant = React.useCallback(function (element) {
+    if (!element) {
+      return;
+    }
+
+    setDescendants(function (items) {
+      return items.filter(function (_a) {
+        var _el = _a.element;
+        return element !== _el;
+      });
+    });
+  },
+  /*
+   * setDescendants is a state setter initialized by the useDescendants hook.
+   * We can safely ignore the lint warning here because it will not change
+   * between renders.
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var focusNodes = descendants.filter(function (_a) {
+    var disabled = _a.disabled;
+    return !disabled;
+  }).map(function (_a) {
+    var element = _a.element;
+    return element;
+  });
+  var value = React.useMemo(function () {
+    return {
+      descendants: descendants,
+      focusNodes: focusNodes,
+      registerDescendant: registerDescendant,
+      unregisterDescendant: unregisterDescendant
+    };
+  }, [descendants, focusNodes, registerDescendant, unregisterDescendant]);
+  return React__default.createElement(DescendantContext.Provider, {
+    value: value
+  }, children);
+}
+
+exports.DescendantProvider = DescendantProvider;
 exports.assignRef = assignRef;
+exports.canUseDOM = canUseDOM;
+exports.cloneValidElement = cloneValidElement;
 exports.forwardRefWithAs = forwardRefWithAs;
@@ -187,3 +408,6 @@ exports.getScrollbarOffset = getScrollbarOffset;
 exports.noop = noop;
+exports.useDescendant = useDescendant;
+exports.useDescendants = useDescendants;
 exports.useForkedRef = useForkedRef;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.usePrevious = usePrevious;
@@ -190,0 +414,0 @@ exports.useUpdateEffect = useUpdateEffect;

dist/utils.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function r(e,t){if(null!=e)if("function"==typeof e)e(t);else try{e.current=t}catch(n){throw new Error('Cannot assign value "'+t+'" to ref "'+e+'"')}}exports.assignRef=r,exports.checkStyles=function(e){},exports.forwardRefWithAs=function(e){return n.forwardRef(e)},exports.getScrollbarOffset=function(){try{if(window.innerWidth>document.documentElement.clientWidth)return window.innerWidth-document.documentElement.clientWidth}catch(e){}return 0},exports.makeId=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.join("--")},exports.noop=function(){},exports.useForkedRef=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return t.useMemo((function(){return e.every((function(e){return null==e}))?null:function(t){e.forEach((function(e){r(e,t)}))}}),e)},exports.usePrevious=function(e){var n=t.useRef();return t.useEffect((function(){n.current=e}),[e]),n.current},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";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("tslib"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function u(e,n){if(null!=e)if("function"==typeof e)e(n);else try{e.current=n}catch(t){throw new Error('Cannot assign value "'+n+'" to ref "'+e+'"')}}function o(){return"undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement}var i=o()?t.useLayoutEffect:t.useEffect,c=t.createContext({});exports.DescendantProvider=function(e){var u=e.children,o=e.descendants,i=e.setDescendants,s=r.useCallback((function(e){var t=e.disabled,r=e.element,u=e.key;r&&i((function(e){if(null==e.find((function(e){return e.element===r}))){var o=null!=u?u:r.textContent,i=e.findIndex((function(e){var n=e.element;return!(!n||!r)&&Boolean(n.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_PRECEDING)})),c={disabled:t,element:r,key:o};return-1===i?n.__spreadArrays(e,[c]):n.__spreadArrays(e.slice(0,i),[c],e.slice(i))}return e}))}),[]),f=t.useCallback((function(e){e&&i((function(n){return n.filter((function(n){return e!==n.element}))}))}),[]),a=o.filter((function(e){return!e.disabled})).map((function(e){return e.element})),d=t.useMemo((function(){return{descendants:o,focusNodes:a,registerDescendant:s,unregisterDescendant:f}}),[o,a,s,f]);return r.createElement(c.Provider,{value:d},u)},exports.assignRef=u,exports.canUseDOM=o,exports.checkStyles=function(e){},exports.cloneValidElement=function(e,r){for(var u=[],o=2;o<arguments.length;o++)u[o-2]=arguments[o];return t.isValidElement(e)?t.cloneElement.apply(void 0,n.__spreadArrays([e,r],u)):e},exports.forwardRefWithAs=function(e){return r.forwardRef(e)},exports.getScrollbarOffset=function(){try{if(window.innerWidth>document.documentElement.clientWidth)return window.innerWidth-document.documentElement.clientWidth}catch(e){}return 0},exports.makeId=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return e.join("--")},exports.noop=function(){},exports.useDescendant=function(e,n){var r=e.element,u=e.key,o=e.disabled,s=t.useState()[1],f=t.useContext(c),a=f.registerDescendant,d=f.unregisterDescendant,l=f.descendants;return i((function(){return r||s({}),a({element:r,key:u,disabled:o}),function(){return d(r)}}),[r,u,o]),null!=n?n:l.findIndex((function(e){return e.element===r}))},exports.useDescendants=function(){return t.useState([])},exports.useForkedRef=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return t.useMemo((function(){return e.every((function(e){return null==e}))?null:function(n){e.forEach((function(e){u(e,n)}))}}),e)},exports.useIsomorphicLayoutEffect=i,exports.usePrevious=function(e){var n=t.useRef(null);return t.useEffect((function(){n.current=e}),[e]),n.current},exports.useUpdateEffect=function(e,n){var r=t.useRef(!1);t.useEffect((function(){r.current?e():r.current=!0}),n)},exports.wrapEvent=function(e,n){return function(t){if(e&&e(t),!t.defaultPrevented)return n(t)}};
 //# sourceMappingURL=utils.cjs.production.min.js.map

dist/utils.esm.js

@@ -1,2 +0,3 @@
-import React, { useMemo, useRef, useEffect } from 'react';
+import { __spreadArrays } from 'tslib';
+import React, { isValidElement, cloneElement, useMemo, useLayoutEffect, useEffect, useRef, useState, useContext, useCallback, createContext } from 'react';
 
@@ -47,2 +48,18 @@ /* eslint-disable no-unused-vars */
 }
+function canUseDOM() {
+  return typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+}
+function cloneValidElement(element, props) {
+  var children = [];
+
+  for (var _i = 2; _i < arguments.length; _i++) {
+    children[_i - 2] = arguments[_i];
+  }
+
+  if (!isValidElement(element)) {
+    return element;
+  }
+
+  return cloneElement.apply(void 0, __spreadArrays([element, props], children));
+}
 /**
@@ -111,2 +128,25 @@ * Get the scrollbar offset distance.
 /**
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser. We occasionally need useLayoutEffect to ensure
+ * we don't get a render flash for certain operations, but we may also need
+ * affected components to render on the server. One example is when setting a
+ * component's descendants to retrieve their index values. The index value may be
+ * needed to determine whether a descendant is active, but with useEffect in the
+ * browser there will be an initial frame where the active descendant is not set.
+ *
+ * Important to note that using this hook as an escape hatch will break the
+ * eslint dependency warnings, so use sparingly only when needed and pay close
+ * attention to the dependency array!
+ *
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ *
+ * @param effect
+ * @param deps
+ */
+
+var useIsomorphicLayoutEffect =
+/*#__PURE__*/
+canUseDOM() ? useLayoutEffect : useEffect;
+/**
  * Returns the previous value of a reference after a component update.
@@ -118,3 +158,3 @@ *
 function usePrevious(value) {
-  var ref = useRef();
+  var ref = useRef(null);
   useEffect(function () {
@@ -172,4 +212,182 @@ ref.current = value;
 }
+var DescendantContext =
+/*#__PURE__*/
+createContext({});
 
-export { assignRef, checkStyles, forwardRefWithAs, getScrollbarOffset, makeId, noop, useForkedRef, usePrevious, useUpdateEffect, wrapEvent };
+function useDescendantContext() {
+  return useContext(DescendantContext);
+} ////////////////////////////////////////////////////////////////////////////////
+// TODO: Move to @reach/descendants once fully tested and implemented
+
+/**
+ * This hook registers our descendant by passing it into an array. We can then
+ * search that array by to find its index when registering it in the component.
+ * We use this for focus management, keyboard navigation, and typeahead
+ * functionality for some components.
+ *
+ * The hook accepts the element node and (optionally) a key. The key is useful
+ * if multiple descendants have identical text values and we need to
+ * differentiate siblings for some reason.
+ *
+ * Our main goals with this are:
+ *   1) maximum composability,
+ *   2) minimal API friction
+ *   3) SSR compatibility*
+ *   4) concurrent safe
+ *   5) index always up-to-date with the tree despite changes
+ *   6) works with memoization of any component in the tree (hopefully)
+ *
+ * * As for SSR, the good news is that we don't actually need the index on the
+ * server for most use-cases, as we are only using it to determine the order of
+ * composed descendants for keyboard navigation. However, in the few cases where
+ * this is not the case, we can require an explicit index from the app.
+ */
+
+
+function useDescendant(_a, indexProp) {
+  var element = _a.element,
+      key = _a.key,
+      disabled = _a.disabled;
+
+  var _b = useState(),
+      forceUpdate = _b[1];
+
+  var _c = useDescendantContext(),
+      registerDescendant = _c.registerDescendant,
+      unregisterDescendant = _c.unregisterDescendant,
+      descendants = _c.descendants; // Prevent any flashing
+
+
+  useIsomorphicLayoutEffect(function () {
+    if (!element) forceUpdate({});
+    registerDescendant({
+      element: element,
+      key: key,
+      disabled: disabled
+    });
+    return function () {
+      return unregisterDescendant(element);
+    };
+  }, [element, key, disabled]);
+  return indexProp !== null && indexProp !== void 0 ? indexProp : descendants.findIndex(function (_a) {
+    var _el = _a.element;
+    return _el === element;
+  });
+}
+function useDescendants() {
+  return useState([]);
+}
+function DescendantProvider(_a) {
+  var children = _a.children,
+      descendants = _a.descendants,
+      setDescendants = _a.setDescendants;
+  var registerDescendant = React.useCallback(function (_a) {
+    var disabled = _a.disabled,
+        element = _a.element,
+        providedKey = _a.key;
+
+    if (!element) {
+      return;
+    }
+
+    setDescendants(function (items) {
+      if (items.find(function (_a) {
+        var _el = _a.element;
+        return _el === element;
+      }) == null) {
+        var key = providedKey !== null && providedKey !== void 0 ? providedKey : element.textContent;
+        /*
+         * When registering a descendant, we need to make sure we insert in
+         * into the array in the same order that it appears in the DOM. So as
+         * new descendants are added or maybe some are removed, we always know
+         * that the array is up-to-date and correct.
+         *
+         * So here we look at our registered descendants and see if the new
+         * element we are adding appears earlier than an existing descendant's
+         * DOM node via `node.compareDocumentPosition`. If it does, we insert
+         * the new element at this index. Because `registerDescendant` will be
+         * called in an effect every time the descendants state value changes,
+         * we should be sure that this index is accurate when descendent
+         * elements come or go from our component.
+         */
+
+        var index = items.findIndex(function (_a) {
+          var existingElement = _a.element;
+
+          if (!existingElement || !element) {
+            return false;
+          }
+          /*
+           * Does this element's DOM node appear before another item in the
+           * array in our DOM tree? If so, return true to grab the index at
+           * this point in the array so we know where to insert the new
+           * element.
+           */
+
+
+          return Boolean(existingElement.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING);
+        });
+        var newItem = {
+          disabled: disabled,
+          element: element,
+          key: key
+        }; // If an index is not found we will push the element to the end.
+
+        if (index === -1) {
+          return __spreadArrays(items, [newItem]);
+        }
+
+        return __spreadArrays(items.slice(0, index), [newItem], items.slice(index));
+      }
+
+      return items;
+    });
+  },
+  /*
+   * setDescendants is a state setter initialized by the useDescendants hook.
+   * We can safely ignore the lint warning here because it will not change
+   * between renders.
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var unregisterDescendant = useCallback(function (element) {
+    if (!element) {
+      return;
+    }
+
+    setDescendants(function (items) {
+      return items.filter(function (_a) {
+        var _el = _a.element;
+        return element !== _el;
+      });
+    });
+  },
+  /*
+   * setDescendants is a state setter initialized by the useDescendants hook.
+   * We can safely ignore the lint warning here because it will not change
+   * between renders.
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var focusNodes = descendants.filter(function (_a) {
+    var disabled = _a.disabled;
+    return !disabled;
+  }).map(function (_a) {
+    var element = _a.element;
+    return element;
+  });
+  var value = useMemo(function () {
+    return {
+      descendants: descendants,
+      focusNodes: focusNodes,
+      registerDescendant: registerDescendant,
+      unregisterDescendant: unregisterDescendant
+    };
+  }, [descendants, focusNodes, registerDescendant, unregisterDescendant]);
+  return React.createElement(DescendantContext.Provider, {
+    value: value
+  }, children);
+}
+
+export { DescendantProvider, assignRef, canUseDOM, checkStyles, cloneValidElement, forwardRefWithAs, getScrollbarOffset, makeId, noop, useDescendant, useDescendants, useForkedRef, useIsomorphicLayoutEffect, usePrevious, useUpdateEffect, wrapEvent };
 //# sourceMappingURL=utils.esm.js.map

package.json

 {
   "name": "@reach/utils",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Internal, shared utilities for Reach UI.",
+  "author": "React Training <[e-mail]>",
+  "license": "MIT",
   "repository": {
@@ -10,4 +12,12 @@ "type": "git",
   },
+  "scripts": {
+    "build": "yarn clean && cross-env NODE_ENV=production tsdx build --format=cjs,esm --tsconfig tsconfig.build.json",
+    "clean": "rm -rf ./dist",
+    "compile": "cross-env NODE_ENV=production tsdx build --format=cjs,esm --tsconfig tsconfig.build.json"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
   "main": "dist/index.js",
-  "umd:main": "dist/utils.umd.production.js",
   "module": "dist/utils.esm.js",
@@ -18,11 +28,3 @@ "typings": "dist/index.d.ts",
   ],
-  "scripts": {
-    "build": "cross-env NODE_ENV=production tsdx build --format=cjs,esm,umd"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
-  },
-  "author": "React Training <[e-mail]>",
-  "license": "MIT"
+  "gitHead": "96cf6c191cca0f2cbcb7ff578f15e289efeda1e2"
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92709

increased by59.25%

Lines of code

877

increased by50.17%

Number of low quality alerts

3

decreased by-25%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

11

decreased by-21.43%

No dependency changes