@reach/descendants - npm Package Compare versions

Comparing version 0.10.3 to 0.10.4

dist/descendants.cjs.development.js

@@ -87,9 +87,27 @@ 'use strict';
       unregisterDescendant = _useContext.unregisterDescendant,
-      descendants = _useContext.descendants; // Prevent any flashing
+      descendants = _useContext.descendants; // This will initially return -1 because we haven't registered the descendant
+  // on the first render. After we register, this will then return the correct
+  // index on the following render and we will re-register descendants
+  // so that everything is up-to-date before the user interacts with a
+  // collection.
 
 
+  var index = indexProp !== null && indexProp !== void 0 ? indexProp : descendants.findIndex(function (item) {
+    return item.element === descendant.element;
+  });
+  var previousDescendants = utils.usePrevious(descendants); // We also need to re-register descendants any time ANY of the other
+  // descendants have changed. My brain was melting when I wrote this and it
+  // feels a little off, but checking in render and using the result in the
+  // effect's dependency array works well enough.
+
+  var someDescendantsHaveChanged = descendants.some(function (descendant, index) {
+    var _previousDescendants$;
+
+    return descendant.element !== (previousDescendants === null || previousDescendants === void 0 ? void 0 : (_previousDescendants$ = previousDescendants[index]) === null || _previousDescendants$ === void 0 ? void 0 : _previousDescendants$.element);
+  }); // Prevent any flashing
+
   utils.useIsomorphicLayoutEffect(function () {
     if (!descendant.element) forceUpdate({});
-    registerDescendant(_extends(_extends({}, descendant), {}, {
-      index: indexProp
+    registerDescendant(_extends({}, descendant, {
+      index: index
     }));
@@ -99,6 +117,4 @@ return function () {
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [].concat(Object.values(descendant)));
-  return indexProp !== null && indexProp !== void 0 ? indexProp : descendants.findIndex(function (item) {
-    return item.element === descendant.element;
-  });
+  }, [registerDescendant, unregisterDescendant, index, someDescendantsHaveChanged].concat(Object.values(descendant)));
+  return index;
 }
@@ -129,3 +145,3 @@ function useDescendantsInit() {
       if (explicitIndex != null) {
-        newItems = [].concat(items, [_extends(_extends({}, rest), {}, {
+        newItems = [].concat(items, [_extends({}, rest, {
           element: element,
@@ -136,3 +152,3 @@ index: explicitIndex
         // If there are no items, register at index 0 and bail.
-        newItems = [].concat(items, [_extends(_extends({}, rest), {}, {
+        newItems = [].concat(items, [_extends({}, rest, {
           element: element,
@@ -171,3 +187,3 @@ index: 0
 
-        var newItem = _extends(_extends({}, rest), {}, {
+        var newItem = _extends({}, rest, {
           element: element,
@@ -186,3 +202,3 @@ index: index
       return newItems.map(function (item, index) {
-        return _extends(_extends({}, item), {}, {
+        return _extends({}, item, {
           index: index
@@ -189,0 +205,0 @@ });

dist/descendants.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,r=require("@reach/utils");function o(){return(o=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}exports.DescendantProvider=function(e){var r=e.context,a=e.children,i=e.items,c=e.set,u=n.useCallback((function(e){var n=e.element,t=e.index,r=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n.indexOf(t=a[r])>=0||(o[t]=e[t]);return o}(e,["element","index"]);n&&c((function(e){var a;if(null!=t)a=[].concat(e,[o(o({},r),{},{element:n,index:t})]);else if(0===e.length)a=[].concat(e,[o(o({},r),{},{element:n,index:0})]);else if(e.find((function(e){return e.element===n})))a=e;else{var i=e.findIndex((function(e){return!(!e.element||!n)&&Boolean(e.element.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_PRECEDING)})),c=o(o({},r),{},{element:n,index:i});a=-1===i?[].concat(e,[c]):[].concat(e.slice(0,i),[c],e.slice(i))}return a.map((function(e,n){return o(o({},e),{},{index:n})}))}))}),[]),s=n.useCallback((function(e){e&&c((function(n){return n.filter((function(n){return e!==n.element}))}))}),[]);return t.createElement(r.Provider,{value:n.useMemo((function(){return{descendants:i,registerDescendant:u,unregisterDescendant:s}}),[i,u,s])},a)},exports.createDescendantContext=function(e,n){return void 0===n&&(n={}),r.createNamedContext(e,o({descendants:[],registerDescendant:r.noop,unregisterDescendant:r.noop},n))},exports.useDescendant=function(e,t,a){var i=n.useState()[1],c=n.useContext(t),u=c.registerDescendant,s=c.unregisterDescendant,l=c.descendants;return r.useIsomorphicLayoutEffect((function(){return e.element||i({}),u(o(o({},e),{},{index:a})),function(){return s(e.element)}}),[].concat(Object.values(e))),null!=a?a:l.findIndex((function(n){return n.element===e.element}))},exports.useDescendantKeyDown=function(e,t){var r=n.useContext(e).descendants,o=t.callback,a=t.currentIndex,i=t.filter,c=t.key,u=void 0===c?"index":c,s=t.orientation,l=void 0===s?"vertical":s,f=t.rotate,d=void 0===f||f,v=t.rtl,p=void 0!==v&&v,D=null!=a?a:-1;return function(e){if(["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","PageUp","PageDown","Home","End"].includes(e.key)){var n=i?r.filter(i):r;if(i&&(D=n.findIndex((function(e){return e.index===a}))),n.length)switch(e.key){case"ArrowDown":if("vertical"===l||"both"===l){e.preventDefault();var t=g();o("option"===u?t:t[u])}break;case"ArrowUp":if("vertical"===l||"both"===l){e.preventDefault();var c=b();o("option"===u?c:c[u])}break;case"ArrowLeft":if("horizontal"===l||"both"===l){e.preventDefault();var s=(p?g:b)();o("option"===u?s:s[u])}break;case"ArrowRight":if("horizontal"===l||"both"===l){e.preventDefault();var f=(p?b:g)();o("option"===u?f:f[u])}break;case"PageUp":e.preventDefault();var v=(e.ctrlKey?b:w)();o("option"===u?v:v[u]);break;case"Home":e.preventDefault();var x=w();o("option"===u?x:x[u]);break;case"PageDown":e.preventDefault();var h=(e.ctrlKey?g:k)();o("option"===u?h:h[u]);break;case"End":e.preventDefault();var m=k();o("option"===u?m:m[u])}}function g(){return D===n.length-1?d?w():n[D]:n[(D+1)%n.length]}function b(){return 0===D?d?k():n[D]:n[(D-1+n.length)%n.length]}function w(){return n[0]}function k(){return n[n.length-1]}}},exports.useDescendants=function(e){return n.useContext(e).descendants},exports.useDescendantsInit=function(){return n.useState([])};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,r=require("@reach/utils");function o(){return(o=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}exports.DescendantProvider=function(e){var r=e.context,i=e.children,a=e.items,u=e.set,c=n.useCallback((function(e){var n=e.element,t=e.index,r=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n.indexOf(t=i[r])>=0||(o[t]=e[t]);return o}(e,["element","index"]);n&&u((function(e){var i;if(null!=t)i=[].concat(e,[o({},r,{element:n,index:t})]);else if(0===e.length)i=[].concat(e,[o({},r,{element:n,index:0})]);else if(e.find((function(e){return e.element===n})))i=e;else{var a=e.findIndex((function(e){return!(!e.element||!n)&&Boolean(e.element.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_PRECEDING)})),u=o({},r,{element:n,index:a});i=-1===a?[].concat(e,[u]):[].concat(e.slice(0,a),[u],e.slice(a))}return i.map((function(e,n){return o({},e,{index:n})}))}))}),[]),s=n.useCallback((function(e){e&&u((function(n){return n.filter((function(n){return e!==n.element}))}))}),[]);return t.createElement(r.Provider,{value:n.useMemo((function(){return{descendants:a,registerDescendant:c,unregisterDescendant:s}}),[a,c,s])},i)},exports.createDescendantContext=function(e,n){return void 0===n&&(n={}),r.createNamedContext(e,o({descendants:[],registerDescendant:r.noop,unregisterDescendant:r.noop},n))},exports.useDescendant=function(e,t,i){var a=n.useState()[1],u=n.useContext(t),c=u.registerDescendant,s=u.unregisterDescendant,l=u.descendants,f=null!=i?i:l.findIndex((function(n){return n.element===e.element})),d=r.usePrevious(l),v=l.some((function(e,n){var t;return e.element!==(null==d||null===(t=d[n])||void 0===t?void 0:t.element)}));return r.useIsomorphicLayoutEffect((function(){return e.element||a({}),c(o({},e,{index:f})),function(){return s(e.element)}}),[c,s,f,v].concat(Object.values(e))),f},exports.useDescendantKeyDown=function(e,t){var r=n.useContext(e).descendants,o=t.callback,i=t.currentIndex,a=t.filter,u=t.key,c=void 0===u?"index":u,s=t.orientation,l=void 0===s?"vertical":s,f=t.rotate,d=void 0===f||f,v=t.rtl,p=void 0!==v&&v,D=null!=i?i:-1;return function(e){if(["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","PageUp","PageDown","Home","End"].includes(e.key)){var n=a?r.filter(a):r;if(a&&(D=n.findIndex((function(e){return e.index===i}))),n.length)switch(e.key){case"ArrowDown":if("vertical"===l||"both"===l){e.preventDefault();var t=g();o("option"===c?t:t[c])}break;case"ArrowUp":if("vertical"===l||"both"===l){e.preventDefault();var u=b();o("option"===c?u:u[c])}break;case"ArrowLeft":if("horizontal"===l||"both"===l){e.preventDefault();var s=(p?g:b)();o("option"===c?s:s[c])}break;case"ArrowRight":if("horizontal"===l||"both"===l){e.preventDefault();var f=(p?b:g)();o("option"===c?f:f[c])}break;case"PageUp":e.preventDefault();var v=(e.ctrlKey?b:w)();o("option"===c?v:v[c]);break;case"Home":e.preventDefault();var x=w();o("option"===c?x:x[c]);break;case"PageDown":e.preventDefault();var m=(e.ctrlKey?g:k)();o("option"===c?m:m[c]);break;case"End":e.preventDefault();var h=k();o("option"===c?h:h[c])}}function g(){return D===n.length-1?d?w():n[D]:n[(D+1)%n.length]}function b(){return 0===D?d?k():n[D]:n[(D-1+n.length)%n.length]}function w(){return n[0]}function k(){return n[n.length-1]}}},exports.useDescendants=function(e){return n.useContext(e).descendants},exports.useDescendantsInit=function(){return n.useState([])};
 //# sourceMappingURL=descendants.cjs.production.min.js.map

dist/descendants.esm.js

 import React, { useState, useContext, useCallback, useMemo } from 'react';
-import { createNamedContext, useIsomorphicLayoutEffect, noop } from '@reach/utils';
+import { createNamedContext, usePrevious, useIsomorphicLayoutEffect, noop } from '@reach/utils';
 
@@ -80,9 +80,27 @@ function _extends() {
       unregisterDescendant = _useContext.unregisterDescendant,
-      descendants = _useContext.descendants; // Prevent any flashing
+      descendants = _useContext.descendants; // This will initially return -1 because we haven't registered the descendant
+  // on the first render. After we register, this will then return the correct
+  // index on the following render and we will re-register descendants
+  // so that everything is up-to-date before the user interacts with a
+  // collection.
 
 
+  var index = indexProp !== null && indexProp !== void 0 ? indexProp : descendants.findIndex(function (item) {
+    return item.element === descendant.element;
+  });
+  var previousDescendants = usePrevious(descendants); // We also need to re-register descendants any time ANY of the other
+  // descendants have changed. My brain was melting when I wrote this and it
+  // feels a little off, but checking in render and using the result in the
+  // effect's dependency array works well enough.
+
+  var someDescendantsHaveChanged = descendants.some(function (descendant, index) {
+    var _previousDescendants$;
+
+    return descendant.element !== (previousDescendants === null || previousDescendants === void 0 ? void 0 : (_previousDescendants$ = previousDescendants[index]) === null || _previousDescendants$ === void 0 ? void 0 : _previousDescendants$.element);
+  }); // Prevent any flashing
+
   useIsomorphicLayoutEffect(function () {
     if (!descendant.element) forceUpdate({});
-    registerDescendant(_extends(_extends({}, descendant), {}, {
-      index: indexProp
+    registerDescendant(_extends({}, descendant, {
+      index: index
     }));
@@ -92,6 +110,4 @@ return function () {
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [].concat(Object.values(descendant)));
-  return indexProp !== null && indexProp !== void 0 ? indexProp : descendants.findIndex(function (item) {
-    return item.element === descendant.element;
-  });
+  }, [registerDescendant, unregisterDescendant, index, someDescendantsHaveChanged].concat(Object.values(descendant)));
+  return index;
 }
@@ -122,3 +138,3 @@ function useDescendantsInit() {
       if (explicitIndex != null) {
-        newItems = [].concat(items, [_extends(_extends({}, rest), {}, {
+        newItems = [].concat(items, [_extends({}, rest, {
           element: element,
@@ -129,3 +145,3 @@ index: explicitIndex
         // If there are no items, register at index 0 and bail.
-        newItems = [].concat(items, [_extends(_extends({}, rest), {}, {
+        newItems = [].concat(items, [_extends({}, rest, {
           element: element,
@@ -164,3 +180,3 @@ index: 0
 
-        var newItem = _extends(_extends({}, rest), {}, {
+        var newItem = _extends({}, rest, {
           element: element,
@@ -179,3 +195,3 @@ index: index
       return newItems.map(function (item, index) {
-        return _extends(_extends({}, item), {}, {
+        return _extends({}, item, {
           index: index
@@ -182,0 +198,0 @@ });

dist/index.d.ts

@@ -56,3 +56,3 @@ import React from "react";
     callback(nextOption: DescendantType | DescendantType[K]): void;
-}): (event: React.KeyboardEvent<Element>) => void;
+}): (event: React.KeyboardEvent) => void;
 declare type SomeElement<T> = T extends Element ? T : HTMLElement;
@@ -59,0 +59,0 @@ export declare type Descendant<ElementType = HTMLElement> = {

package.json

 {
   "name": "@reach/descendants",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "description": "A descendant index solution for better accessibility support in compound components",
@@ -16,4 +16,4 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/utils": "^0.10.3",
-    "tslib": "^1.11.2"
+    "@reach/utils": "0.10.4",
+    "tslib": "^2.0.0"
   },
@@ -31,3 +31,3 @@ "peerDependencies": {
   ],
-  "gitHead": "fd32b2b31a3e50265b0c274654a5e4105847d18e"
+  "gitHead": "a0c7b3672835b2a9f84732663bb0e78992541211"
 }

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

108152

increased by6.37%

Lines of code

715

increased by3.92%

Dependency changes

• + Added@reach/utils@0.10.4(transitive)

• - Removed@reach/utils@0.10.5(transitive)

• - Removedtslib@1.14.1(transitive)

• Updated@reach/utils@0.10.4

• Updatedtslib@^2.0.0