downshift 8.2.3 → 8.2.4-alpha.0

package/dist/downshift.umd.js

@@ -1379,7 +1379,7 @@
 
   var reactIsExports = reactIs.exports;
 
-  const t=t=>"object"==typeof t&&null!=t&&1===t.nodeType,e=(t,e)=>(!e||"hidden"!==t)&&("visible"!==t&&"clip"!==t),n=(t,n)=>{if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){const o=getComputedStyle(t,null);return e(o.overflowY,n)||e(o.overflowX,n)||(t=>{const e=(t=>{if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}})(t);return !!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)})(t)}return !1},o=(t,e,n,o,l,r,i,s)=>r<t&&i>e||r>t&&i<e?0:r<=t&&s<=n||i>=e&&s>=n?r-t-o:i>e&&s<n||r<t&&s>n?i-e+l:0,l=t=>{const e=t.parentElement;return null==e?t.getRootNode().host||null:e},r=(e,r)=>{var i,s,d,h;if("undefined"==typeof document)return [];const{scrollMode:c,block:f,inline:u,boundary:a,skipOverflowHiddenElements:g}=r,p="function"==typeof a?a:t=>t!==a;if(!t(e))throw new TypeError("Invalid target");const m=document.scrollingElement||document.documentElement,w=[];let W=e;for(;t(W)&&p(W);){if(W=l(W),W===m){w.push(W);break}null!=W&&W===document.body&&n(W)&&!n(document.documentElement)||null!=W&&n(W,g)&&w.push(W);}const b=null!=(s=null==(i=window.visualViewport)?void 0:i.width)?s:innerWidth,H=null!=(h=null==(d=window.visualViewport)?void 0:d.height)?h:innerHeight,{scrollX:y,scrollY:M}=window,{height:v,width:E,top:x,right:C,bottom:I,left:R}=e.getBoundingClientRect(),{top:T,right:B,bottom:F,left:V}=(t=>{const e=window.getComputedStyle(t);return {top:parseFloat(e.scrollMarginTop)||0,right:parseFloat(e.scrollMarginRight)||0,bottom:parseFloat(e.scrollMarginBottom)||0,left:parseFloat(e.scrollMarginLeft)||0}})(e);let k="start"===f||"nearest"===f?x-T:"end"===f?I+F:x+v/2-T+F,D="center"===u?R+E/2-V+B:"end"===u?C+B:R-V;const L=[];for(let t=0;t<w.length;t++){const e=w[t],{height:n,width:l,top:r,right:i,bottom:s,left:d}=e.getBoundingClientRect();if("if-needed"===c&&x>=0&&R>=0&&I<=H&&C<=b&&x>=r&&I<=s&&R>=d&&C<=i)return L;const h=getComputedStyle(e),a=parseInt(h.borderLeftWidth,10),g=parseInt(h.borderTopWidth,10),p=parseInt(h.borderRightWidth,10),W=parseInt(h.borderBottomWidth,10);let T=0,B=0;const F="offsetWidth"in e?e.offsetWidth-e.clientWidth-a-p:0,V="offsetHeight"in e?e.offsetHeight-e.clientHeight-g-W:0,S="offsetWidth"in e?0===e.offsetWidth?0:l/e.offsetWidth:0,X="offsetHeight"in e?0===e.offsetHeight?0:n/e.offsetHeight:0;if(m===e)T="start"===f?k:"end"===f?k-H:"nearest"===f?o(M,M+H,H,g,W,M+k,M+k+v,v):k-H/2,B="start"===u?D:"center"===u?D-b/2:"end"===u?D-b:o(y,y+b,b,a,p,y+D,y+D+E,E),T=Math.max(0,T+M),B=Math.max(0,B+y);else {T="start"===f?k-r-g:"end"===f?k-s+W+V:"nearest"===f?o(r,s,n,g,W+V,k,k+v,v):k-(r+n/2)+V/2,B="start"===u?D-d-a:"center"===u?D-(d+l/2)+F/2:"end"===u?D-i+p+F:o(d,i,l,a,p+F,D,D+E,E);const{scrollLeft:t,scrollTop:h}=e;T=0===X?0:Math.max(0,Math.min(h+T/X,e.scrollHeight-n/X+V)),B=0===S?0:Math.max(0,Math.min(t+B/S,e.scrollWidth-l/S+F)),k+=h-T,D+=t-B;}L.push({el:e,top:T,left:B});}return L};
+  const t=t=>"object"==typeof t&&null!=t&&1===t.nodeType,e=(t,e)=>(!e||"hidden"!==t)&&("visible"!==t&&"clip"!==t),n=(t,n)=>{if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){const o=getComputedStyle(t,null);return e(o.overflowY,n)||e(o.overflowX,n)||(t=>{const e=(t=>{if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}})(t);return !!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)})(t)}return !1},o=(t,e,n,o,i,l,r,d)=>l<t&&r>e||l>t&&r<e?0:l<=t&&d<=n||r>=e&&d>=n?l-t-o:r>e&&d<n||l<t&&d>n?r-e+i:0,i=t=>{const e=t.parentElement;return null==e?t.getRootNode().host||null:e},l=(e,l)=>{var r,d,s,h;if("undefined"==typeof document)return [];const{scrollMode:c,block:f,inline:u,boundary:a,skipOverflowHiddenElements:g}=l,m="function"==typeof a?a:t=>t!==a;if(!t(e))throw new TypeError("Invalid target");const p=document.scrollingElement||document.documentElement,w=[];let W=e;for(;t(W)&&m(W);){if(W=i(W),W===p){w.push(W);break}null!=W&&W===document.body&&n(W)&&!n(document.documentElement)||null!=W&&n(W,g)&&w.push(W);}const H=null!=(d=null==(r=window.visualViewport)?void 0:r.width)?d:innerWidth,b=null!=(h=null==(s=window.visualViewport)?void 0:s.height)?h:innerHeight,{scrollX:v,scrollY:y}=window,{height:E,width:M,top:x,right:I,bottom:C,left:R}=e.getBoundingClientRect();let T="start"===f||"nearest"===f?x:"end"===f?C:x+E/2,V="center"===u?R+M/2:"end"===u?I:R;const k=[];for(let t=0;t<w.length;t++){const e=w[t],{height:n,width:i,top:l,right:r,bottom:d,left:s}=e.getBoundingClientRect();if("if-needed"===c&&x>=0&&R>=0&&C<=b&&I<=H&&x>=l&&C<=d&&R>=s&&I<=r)return k;const h=getComputedStyle(e),a=parseInt(h.borderLeftWidth,10),g=parseInt(h.borderTopWidth,10),m=parseInt(h.borderRightWidth,10),W=parseInt(h.borderBottomWidth,10);let B=0,D=0;const L="offsetWidth"in e?e.offsetWidth-e.clientWidth-a-m:0,S="offsetHeight"in e?e.offsetHeight-e.clientHeight-g-W:0,X="offsetWidth"in e?0===e.offsetWidth?0:i/e.offsetWidth:0,Y="offsetHeight"in e?0===e.offsetHeight?0:n/e.offsetHeight:0;if(p===e)B="start"===f?T:"end"===f?T-b:"nearest"===f?o(y,y+b,b,g,W,y+T,y+T+E,E):T-b/2,D="start"===u?V:"center"===u?V-H/2:"end"===u?V-H:o(v,v+H,H,a,m,v+V,v+V+M,M),B=Math.max(0,B+y),D=Math.max(0,D+v);else {B="start"===f?T-l-g:"end"===f?T-d+W+S:"nearest"===f?o(l,d,n,g,W+S,T,T+E,E):T-(l+n/2)+S/2,D="start"===u?V-s-a:"center"===u?V-(s+i/2)+L/2:"end"===u?V-r+m+L:o(s,r,i,a,m+L,V,V+M,M);const{scrollLeft:t,scrollTop:h}=e;B=Math.max(0,Math.min(h+B/Y,e.scrollHeight-n/Y+S)),D=Math.max(0,Math.min(t+D/X,e.scrollWidth-i/X+L)),T+=h-B,V+=t-D;}k.push({el:e,top:B,left:D});}return k};
 
   var idCounter = 0;
 
@@ -1405,7 +1405,7 @@
     if (!node) {
       return;
     }
-    var actions = r(node, {
+    var actions = l(node, {
       boundary: menuNode,
       block: 'nearest',
       scrollMode: 'if-needed'
@@ -3050,9 +3050,10 @@
    * @param {Function} reducer Reducer function from downshift.
    * @param {Object} props The hook props, also passed to createInitialState.
    * @param {Function} createInitialState Function that returns the initial state.
+   * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
    * @returns {Array} An array with the state and an action dispatcher.
    */
-  function useEnhancedReducer(reducer, props, createInitialState) {
+  function useEnhancedReducer(reducer, props, createInitialState, isStateEqual) {
     var prevStateRef = React.useRef();
     var actionRef = React.useRef();
     var enhancedReducer = React.useCallback(function (state, action) {
@@ -3075,11 +3076,19 @@
     }, [propsRef]);
     var action = actionRef.current;
     React.useEffect(function () {
-      if (action && prevStateRef.current && prevStateRef.current !== state) {
+      console.log('effect');
+      var shouldCallOnChangeProps = action && prevStateRef.current && !isStateEqual(prevStateRef.current, state);
+      console.log('passed', prevStateRef.current, state);
+      if (shouldCallOnChangeProps) {
         callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
       }
       prevStateRef.current = state;
-    }, [state, props, action]);
+    }, [state, action, isStateEqual]);
+    React.useEffect(function () {
+      if (props) {
+        prevStateRef.current = getState(prevStateRef.current, props);
+      }
+    }, [props]);
     return [state, dispatchWithProps];
   }
 
@@ -3090,10 +3099,11 @@
    * @param {Function} reducer Reducer function from downshift.
    * @param {Object} props The hook props, also passed to createInitialState.
    * @param {Function} createInitialState Function that returns the initial state.
+   * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
    * @returns {Array} An array with the state and an action dispatcher.
    */
-  function useControlledReducer$1(reducer, props, createInitialState) {
-    var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+  function useControlledReducer$1(reducer, props, createInitialState, isStateEqual) {
+    var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
       state = _useEnhancedReducer[0],
       dispatch = _useEnhancedReducer[1];
     return [getState(state, props), dispatch];
@@ -3375,6 +3385,18 @@
     }));
   }
 
+  /**
+   * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
+   * Used by useSelect and useCombobox.
+   *
+   * @param {Object} prevState
+   * @param {Object} newState
+   * @returns {boolean} Wheather the states are deeply equal.
+   */
+  function isDropdownsStateEqual(prevState, newState) {
+    return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
+  }
+
   // Shared between all exports.
   var commonPropTypes = {
     environment: PropTypes.shape({
@@ -3728,14 +3750,13 @@
       getA11ySelectionMessage = props.getA11ySelectionMessage,
       getA11yStatusMessage = props.getA11yStatusMessage;
     // Initial state depending on controlled props.
-    var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2),
+    var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2, isDropdownsStateEqual),
       state = _useControlledReducer[0],
       dispatch = _useControlledReducer[1];
     var isOpen = state.isOpen,
       highlightedIndex = state.highlightedIndex,
       selectedItem = state.selectedItem,
       inputValue = state.inputValue;
-
     // Element efs.
     var toggleButtonRef = React.useRef(null);
     var menuRef = React.useRef(null);
@@ -4213,11 +4234,12 @@
    * @param {Function} reducer Reducer function from downshift.
    * @param {Object} props The hook props, also passed to createInitialState.
    * @param {Function} createInitialState Function that returns the initial state.
+   * @param {Function} isStateEqual Function that checks if a previous state is equal to the next.
    * @returns {Array} An array with the state and an action dispatcher.
    */
-  function useControlledReducer(reducer, props, createInitialState) {
+  function useControlledReducer(reducer, props, createInitialState, isStateEqual) {
     var previousSelectedItemRef = React.useRef();
-    var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
+    var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState, isStateEqual),
       state = _useEnhancedReducer[0],
       dispatch = _useEnhancedReducer[1];
 
@@ -4391,7 +4413,7 @@
       getA11ySelectionMessage = props.getA11ySelectionMessage,
       itemToString = props.itemToString;
     // Initial state depending on controlled props.
-    var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1),
+    var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1, isDropdownsStateEqual),
       state = _useControlledReducer[0],
       dispatch = _useControlledReducer[1];
     var isOpen = state.isOpen,
@@ -4876,6 +4898,18 @@
       itemToStringLocal = selectionParameters.itemToString;
     return itemToStringLocal(removedSelectedItem) + " has been removed.";
   }
+
+  /**
+   * Check if a state is equal for taglist, by comparing active index and selected items.
+   * Used by useSelect and useCombobox.
+   *
+   * @param {Object} prevState
+   * @param {Object} newState
+   * @returns {boolean} Wheather the states are deeply equal.
+   */
+  function isStateEqual(prevState, newState) {
+    return prevState.selectedItems === newState.selectedItems && prevState.activeIndex === newState.activeIndex;
+  }
   var propTypes = _extends({}, commonPropTypes, {
     selectedItems: PropTypes.array,
     initialSelectedItems: PropTypes.array,
@@ -5065,7 +5099,7 @@
       keyNavigationPrevious = props.keyNavigationPrevious;
 
     // Reducer init.
-    var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState),
+    var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState, isStateEqual),
       state = _useControlledReducer[0],
       dispatch = _useControlledReducer[1];
     var activeIndex = state.activeIndex,