downshift 8.2.2 → 8.2.3

package/dist/src/hooks/utils.d.ts

@@ -56,22 +56,22 @@ export namespace defaultProps {
  * returning the new state.
  *
  * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-export function useControlledReducer(reducer: Function, initialState: Object, props: Object): any[];
+export function useControlledReducer(reducer: Function, props: Object, createInitialState: Function): any[];
 /**
  * Computes the controlled state using a the previous state, props,
  * two reducers, one from downshift and an optional one from the user.
  * Also calls the onChange handlers for state values that have changed.
  *
  * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-export function useEnhancedReducer(reducer: Function, initialState: Object, props: Object): any[];
+export function useEnhancedReducer(reducer: Function, props: Object, createInitialState: Function): any[];
 export function useLatestRef(val: any): React.MutableRefObject<any>;
 export function capitalizeString(string: any): string;
 export function isAcceptedCharacterKey(key: any): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "8.2.2",
+  "version": "8.2.3",
   "description": "🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.",
   "main": "dist/downshift.cjs.js",
   "react-native": "dist/downshift.native.cjs.js",

package/preact/dist/downshift.cjs.js

@@ -1656,11 +1656,11 @@ function useLatestRef(val) {
  * Also calls the onChange handlers for state values that have changed.
  *
  * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useEnhancedReducer(reducer, initialState, props) {
+function useEnhancedReducer(reducer, props, createInitialState) {
   var prevStateRef = React.useRef();
   var actionRef = React.useRef();
   var enhancedReducer = React.useCallback(function (state, action) {
@@ -1672,7 +1672,7 @@ function useEnhancedReducer(reducer, initialState, props) {
     }));
     return newState;
   }, [reducer]);
-  var _useReducer = React.useReducer(enhancedReducer, initialState),
+  var _useReducer = React.useReducer(enhancedReducer, props, createInitialState),
     state = _useReducer[0],
     dispatch = _useReducer[1];
   var propsRef = useLatestRef(props);
@@ -1696,12 +1696,12 @@ function useEnhancedReducer(reducer, initialState, props) {
  * returning the new state.
  *
  * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer$1(reducer, initialState, props) {
-  var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
+function useControlledReducer$1(reducer, props, createInitialState) {
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
   return [getState(state, props), dispatch];
@@ -2305,8 +2305,7 @@ function useSelect(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
-  var initialState = getInitialState$2(props);
-  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, initialState, props),
+  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -2789,13 +2788,13 @@ var propTypes$1 = _extends__default["default"]({}, commonDropdownPropTypes, {
  * compute the rest of the state.
  *
  * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer(reducer, initialState, props) {
+function useControlledReducer(reducer, props, createInitialState) {
   var previousSelectedItemRef = React.useRef();
-  var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
 
@@ -2969,8 +2968,7 @@ function useCombobox(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     itemToString = props.itemToString;
   // Initial state depending on controlled props.
-  var initialState = getInitialState$1(props);
-  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, initialState, props),
+  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -3644,7 +3642,7 @@ function useMultipleSelection(userProps) {
     keyNavigationPrevious = props.keyNavigationPrevious;
 
   // Reducer init.
-  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props),
+  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var activeIndex = state.activeIndex,

package/preact/dist/downshift.esm.js

@@ -1643,11 +1643,11 @@ function useLatestRef(val) {
  * Also calls the onChange handlers for state values that have changed.
  *
  * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useEnhancedReducer(reducer, initialState, props) {
+function useEnhancedReducer(reducer, props, createInitialState) {
   var prevStateRef = useRef();
   var actionRef = useRef();
   var enhancedReducer = useCallback(function (state, action) {
@@ -1659,7 +1659,7 @@ function useEnhancedReducer(reducer, initialState, props) {
     }));
     return newState;
   }, [reducer]);
-  var _useReducer = useReducer(enhancedReducer, initialState),
+  var _useReducer = useReducer(enhancedReducer, props, createInitialState),
     state = _useReducer[0],
     dispatch = _useReducer[1];
   var propsRef = useLatestRef(props);
@@ -1683,12 +1683,12 @@ function useEnhancedReducer(reducer, initialState, props) {
  * returning the new state.
  *
  * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer$1(reducer, initialState, props) {
-  var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
+function useControlledReducer$1(reducer, props, createInitialState) {
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
   return [getState(state, props), dispatch];
@@ -2292,8 +2292,7 @@ function useSelect(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     getA11yStatusMessage = props.getA11yStatusMessage;
   // Initial state depending on controlled props.
-  var initialState = getInitialState$2(props);
-  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, initialState, props),
+  var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -2776,13 +2775,13 @@ var propTypes$1 = _extends({}, commonDropdownPropTypes, {
  * compute the rest of the state.
  *
  * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer(reducer, initialState, props) {
+function useControlledReducer(reducer, props, createInitialState) {
   var previousSelectedItemRef = useRef();
-  var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
+  var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
     state = _useEnhancedReducer[0],
     dispatch = _useEnhancedReducer[1];
 
@@ -2956,8 +2955,7 @@ function useCombobox(userProps) {
     getA11ySelectionMessage = props.getA11ySelectionMessage,
     itemToString = props.itemToString;
   // Initial state depending on controlled props.
-  var initialState = getInitialState$1(props);
-  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, initialState, props),
+  var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var isOpen = state.isOpen,
@@ -3631,7 +3629,7 @@ function useMultipleSelection(userProps) {
     keyNavigationPrevious = props.keyNavigationPrevious;
 
   // Reducer init.
-  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props),
+  var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState),
     state = _useControlledReducer[0],
     dispatch = _useControlledReducer[1];
   var activeIndex = state.activeIndex,

package/preact/dist/downshift.umd.js

@@ -295,7 +295,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,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};
+  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};
 
   var idCounter = 0;
 
@@ -321,7 +321,7 @@
     if (!node) {
       return;
     }
-    var actions = l(node, {
+    var actions = r(node, {
       boundary: menuNode,
       block: 'nearest',
       scrollMode: 'if-needed'
@@ -1925,11 +1925,11 @@
    * Also calls the onChange handlers for state values that have changed.
    *
    * @param {Function} reducer Reducer function from downshift.
-   * @param {Object} initialState Initial state of the hook.
-   * @param {Object} props The hook props.
+   * @param {Object} props The hook props, also passed to createInitialState.
+   * @param {Function} createInitialState Function that returns the initial state.
    * @returns {Array} An array with the state and an action dispatcher.
    */
-  function useEnhancedReducer(reducer, initialState, props) {
+  function useEnhancedReducer(reducer, props, createInitialState) {
     var prevStateRef = React.useRef();
     var actionRef = React.useRef();
     var enhancedReducer = React.useCallback(function (state, action) {
@@ -1941,7 +1941,7 @@
       }));
       return newState;
     }, [reducer]);
-    var _useReducer = React.useReducer(enhancedReducer, initialState),
+    var _useReducer = React.useReducer(enhancedReducer, props, createInitialState),
       state = _useReducer[0],
       dispatch = _useReducer[1];
     var propsRef = useLatestRef(props);
@@ -1965,12 +1965,12 @@
    * returning the new state.
    *
    * @param {Function} reducer Reducer function from downshift.
-   * @param {Object} initialState Initial state of the hook.
-   * @param {Object} props The hook props.
+   * @param {Object} props The hook props, also passed to createInitialState.
+   * @param {Function} createInitialState Function that returns the initial state.
    * @returns {Array} An array with the state and an action dispatcher.
    */
-  function useControlledReducer$1(reducer, initialState, props) {
-    var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
+  function useControlledReducer$1(reducer, props, createInitialState) {
+    var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
       state = _useEnhancedReducer[0],
       dispatch = _useEnhancedReducer[1];
     return [getState(state, props), dispatch];
@@ -2605,8 +2605,7 @@
       getA11ySelectionMessage = props.getA11ySelectionMessage,
       getA11yStatusMessage = props.getA11yStatusMessage;
     // Initial state depending on controlled props.
-    var initialState = getInitialState$2(props);
-    var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, initialState, props),
+    var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, props, getInitialState$2),
       state = _useControlledReducer[0],
       dispatch = _useControlledReducer[1];
     var isOpen = state.isOpen,
@@ -3089,13 +3088,13 @@
    * compute the rest of the state.
    *
    * @param {Function} reducer Reducer function from downshift.
-   * @param {Object} initialState Initial state of the hook.
-   * @param {Object} props The hook props.
+   * @param {Object} props The hook props, also passed to createInitialState.
+   * @param {Function} createInitialState Function that returns the initial state.
    * @returns {Array} An array with the state and an action dispatcher.
    */
-  function useControlledReducer(reducer, initialState, props) {
+  function useControlledReducer(reducer, props, createInitialState) {
     var previousSelectedItemRef = React.useRef();
-    var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
+    var _useEnhancedReducer = useEnhancedReducer(reducer, props, createInitialState),
       state = _useEnhancedReducer[0],
       dispatch = _useEnhancedReducer[1];
 
@@ -3269,8 +3268,7 @@
       getA11ySelectionMessage = props.getA11ySelectionMessage,
       itemToString = props.itemToString;
     // Initial state depending on controlled props.
-    var initialState = getInitialState$1(props);
-    var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, initialState, props),
+    var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, props, getInitialState$1),
       state = _useControlledReducer[0],
       dispatch = _useControlledReducer[1];
     var isOpen = state.isOpen,
@@ -3944,7 +3942,7 @@
       keyNavigationPrevious = props.keyNavigationPrevious;
 
     // Reducer init.
-    var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props),
+    var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, props, getInitialState),
       state = _useControlledReducer[0],
       dispatch = _useControlledReducer[1];
     var activeIndex = state.activeIndex,