downshift 9.2.0 → 9.3.1

package/dist/hooks/useCombobox/index.d.ts

@@ -15,7 +15,7 @@ declare function useCombobox(userProps?: {}): {
         onMouseDown: Function;
         'aria-disabled': boolean;
         'aria-selected': boolean;
-        id: any;
+        id: string;
         role: string;
     };
     getLabelProps: (labelProps: any) => any;
@@ -26,7 +26,7 @@ declare function useCombobox(userProps?: {}): {
     }, { suppressRefError }?: {
         suppressRefError?: boolean | undefined;
     }) => {
-        id: any;
+        id: string;
         role: string;
         'aria-labelledby': string | undefined;
         onMouseLeave: Function;
@@ -45,13 +45,13 @@ declare function useCombobox(userProps?: {}): {
     }) => {
         onChange: Function;
         onChangeText: Function;
-        'aria-activedescendant': any;
+        'aria-activedescendant': string;
         'aria-autocomplete': string;
-        'aria-controls': any;
+        'aria-controls': string;
         'aria-expanded': any;
-        'aria-labelledby': any;
+        'aria-labelledby': string | undefined;
         autoComplete: string;
-        id: any;
+        id: string;
         role: string;
         value: any;
     };
@@ -61,21 +61,21 @@ declare function useCombobox(userProps?: {}): {
         refKey?: string | undefined;
         ref: any;
     }) => {
-        'aria-controls': any;
+        'aria-controls': string;
         'aria-expanded': any;
-        id: any;
+        id: string;
         tabIndex: number;
     } | {
         onPress: Function;
-        'aria-controls': any;
+        'aria-controls': string;
         'aria-expanded': any;
-        id: any;
+        id: string;
         tabIndex: number;
     } | {
         onClick: Function;
-        'aria-controls': any;
+        'aria-controls': string;
         'aria-expanded': any;
-        id: any;
+        id: string;
         tabIndex: number;
     };
     toggleMenu: () => void;

package/dist/hooks/useSelect/index.d.ts

@@ -10,12 +10,12 @@ declare function useSelect(userProps?: {}): {
     }, { suppressRefError }?: {
         suppressRefError?: boolean | undefined;
     }) => {
-        'aria-activedescendant': any;
-        'aria-controls': any;
+        'aria-activedescendant': string;
+        'aria-controls': string;
         'aria-expanded': any;
         'aria-haspopup': string;
         'aria-labelledby': string | undefined;
-        id: any;
+        id: string;
         role: string;
         tabIndex: number;
         onBlur: Function;
@@ -23,8 +23,8 @@ declare function useSelect(userProps?: {}): {
     getLabelProps: ({ onClick, ...labelProps }?: {
         onClick: any;
     }) => {
-        id: any;
-        htmlFor: any;
+        id: string;
+        htmlFor: string;
         onClick: Function;
     };
     getMenuProps: ({ onMouseLeave, refKey, ref, ...rest }?: {
@@ -34,7 +34,7 @@ declare function useSelect(userProps?: {}): {
     }, { suppressRefError }?: {
         suppressRefError?: boolean | undefined;
     }) => {
-        id: any;
+        id: string;
         role: string;
         'aria-labelledby': string | undefined;
         onMouseLeave: Function;
@@ -52,7 +52,7 @@ declare function useSelect(userProps?: {}): {
     }) => {
         'aria-disabled': boolean;
         'aria-selected': boolean;
-        id: any;
+        id: string;
         role: string;
     };
     toggleMenu: () => void;

package/dist/hooks/useTagGroup/__tests__/utils/renderTagGroup.d.ts

@@ -9,7 +9,7 @@ export declare function renderTagGroup(props?: Partial<UseTagGroupProps<string>>
     user: import("@testing-library/user-event").UserEvent;
     container: HTMLElement;
     baseElement: HTMLElement;
-    debug: (baseElement?: Document | import("react-dom/client").Container | (Document | import("react-dom/client").Container)[] | undefined, maxLength?: number | undefined, options?: import("pretty-format").PrettyFormatOptions | undefined) => void;
+    debug: (baseElement?: any, maxLength?: number | undefined, options?: import("pretty-format").PrettyFormatOptions | undefined) => void;
     rerender: (ui: React.ReactNode) => void;
     unmount: () => void;
     asFragment: () => DocumentFragment;

package/dist/hooks/useTagGroup/utils/index.d.ts

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-export { type UseElementIdsProps, type UseElementIdsReturnValue, useElementIds, } from './useElementIds';
+export { useElementIds } from './useElementIds';
 export { getInitialState } from './getInitialState';
 export { isStateEqual } from './isStateEqual';
 export { useAccessibleDescription, A11Y_DESCRIPTION_ELEMENT_ID, } from './useAccessibleDescription';

package/dist/hooks/useTagGroup/utils/useElementIds.d.ts

@@ -1,4 +1,11 @@
-import { UseTagGroupProps } from '../index.types';
-export type UseElementIdsProps = Pick<UseTagGroupProps<unknown>, 'id' | 'getTagId' | 'tagGroupId'>;
-export type UseElementIdsReturnValue = Required<Pick<UseTagGroupProps<unknown>, 'getTagId' | 'tagGroupId'>>;
+type UseElementIdsProps = {
+    id?: string;
+    tagGroupId?: string;
+    getTagId?: (index: number) => string;
+};
+type UseElementIdsReturnValue = {
+    tagGroupId: string;
+    getTagId: (index: number) => string;
+};
 export declare const useElementIds: (props: UseElementIdsProps) => UseElementIdsReturnValue;
+export {};

package/dist/hooks/utils.d.ts

@@ -23,33 +23,6 @@ export function useMouseAndTouchTracker(environment: Window, handleBlur: () => v
 };
 export function getHighlightedIndexOnOpen(props: any, state: any, offset: any): any;
 export function isAcceptedCharacterKey(key: any): boolean;
-export const useElementIds: (({ id, labelId, menuId, getItemId, toggleButtonId, inputId, }: {
-    id: any;
-    labelId: any;
-    menuId: any;
-    getItemId: any;
-    toggleButtonId: any;
-    inputId: any;
-}) => {
-    labelId: any;
-    menuId: any;
-    getItemId: any;
-    toggleButtonId: any;
-    inputId: any;
-}) | (({ id, labelId, menuId, getItemId, toggleButtonId, inputId, }: {
-    id?: string | undefined;
-    labelId: any;
-    menuId: any;
-    getItemId: any;
-    toggleButtonId: any;
-    inputId: any;
-}) => {
-    labelId: any;
-    menuId: any;
-    getItemId: any;
-    toggleButtonId: any;
-    inputId: any;
-});
 /**
  * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
  * In that case, selects the item and resets to defaults for open state and highlighted idex.

package/dist/hooks/utils.dropdown/__tests__/useElementIds.legacy.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/utils.dropdown/__tests__/useElementIds.r18.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/utils.dropdown/useElementIds.d.ts

@@ -0,0 +1,18 @@
+type UseElementIdsProps = {
+    id?: string;
+    labelId?: string;
+    menuId?: string;
+    getItemId?: (index: number) => string;
+    toggleButtonId?: string;
+    inputId?: string;
+};
+type UseElementIdsReturnValue = {
+    labelId: string;
+    menuId: string;
+    getItemId: (index: number) => string;
+    toggleButtonId: string;
+    inputId: string;
+};
+export declare const useElementIds: typeof useElementIdsR18;
+declare function useElementIdsR18({ id, labelId, menuId, getItemId, toggleButtonId, inputId, }: UseElementIdsProps): UseElementIdsReturnValue;
+export {};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "downshift",
-  "version": "9.2.0",
+  "version": "9.3.1",
   "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",
-  "module": "dist/downshift.esm.js",
+  "main": "dist/downshift.cjs.cjs",
+  "react-native": "dist/downshift.native.cjs.cjs",
+  "module": "dist/downshift.esm.mjs",
   "typings": "typings/index.d.ts",
   "types": "typings/index.d.ts",
   "sideEffects": false,
@@ -50,13 +50,13 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/downshift.esm.js",
-      "require": "./dist/downshift.cjs.js",
+      "import": "./dist/downshift.esm.mjs",
+      "require": "./dist/downshift.cjs.cjs",
       "types": "./typings/index.d.ts",
-      "default": "./dist/downshift.esm.js"
+      "default": "./dist/downshift.esm.mjs"
     },
     "./react-native": {
-      "require": "./dist/downshift.native.cjs.js",
+      "require": "./dist/downshift.native.cjs.cjs",
       "types": "./typings/index.d.ts"
     }
   },
@@ -81,58 +81,60 @@
     "react": ">=16.12.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "compute-scroll-into-view": "^3.1.0",
+    "@babel/runtime": "^7.28.6",
+    "compute-scroll-into-view": "^3.1.1",
     "prop-types": "^15.8.1",
-    "react-is": "18.2.0",
-    "tslib": "^2.6.2"
+    "react-is": "^18.2.0",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@babel/helpers": "^7.24.5",
+    "@babel/helpers": "^7.28.6",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@cypress/webpack-preprocessor": "^6.0.1",
+    "@cypress/webpack-preprocessor": "^7.0.2",
     "@docusaurus/core": "3.3.2",
     "@docusaurus/module-type-aliases": "3.3.2",
     "@docusaurus/preset-classic": "3.3.2",
     "@mdx-js/react": "^3.0.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@testing-library/cypress": "^10.0.1",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/preact": "^2.0.1",
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.3.2",
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.9.0",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@testing-library/cypress": "^10.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/preact": "^3.2.4",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/prop-types": "^15.7.15",
+    "@types/react": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-no-side-effect-class-properties": "0.0.7",
     "babel-preset-react-native": "^4.0.1",
     "buble": "^0.20.0",
-    "cpy-cli": "^5.0.0",
-    "cross-env": "^7.0.3",
-    "cypress": "13.9.0",
-    "eslint": "^8.56.0",
-    "eslint-plugin-cypress": "^3.2.0",
-    "eslint-plugin-react": "7.34.1",
-    "flow-bin": "^0.236.0",
+    "cpy-cli": "^6.0.0",
+    "cross-env": "^10.1.0",
+    "cypress": "15.9.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-cypress": "^3.6.0",
+    "eslint-plugin-react": "7.37.5",
+    "flow-bin": "^0.299.0",
     "flow-coverage-report": "^0.8.0",
     "get-pkg-repo": "5.0.0",
-    "kcd-scripts": "^15.0.1",
-    "node-polyfill-webpack-plugin": "^3.0.0",
+    "kcd-scripts": "^17.0.0",
+    "node-polyfill-webpack-plugin": "^4.1.0",
     "npm-run-all": "^4.1.5",
-    "preact": "^10.22.0",
-    "prism-react-renderer": "^2.3.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "^0.74.1",
-    "react-test-renderer": "18.2.0",
-    "serve": "^14.2.3",
-    "start-server-and-test": "^2.0.3",
-    "typescript": "^5.4.5"
+    "preact": "^10.28.2",
+    "prism-react-renderer": "^2.4.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-is": "^18.3.1",
+    "react-native": "^0.76.0",
+    "react-test-renderer": "^18.3.1",
+    "serve": "^14.2.5",
+    "start-server-and-test": "^2.1.3",
+    "typescript": "^5.9.3"
   },
   "eslintConfig": {
     "parserOptions": {

package/preact/dist/{downshift.cjs.js → downshift.cjs.cjs}

@@ -1878,54 +1878,6 @@ var defaultStateValues$1 = {
 
 // istanbul ignore next
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-
-// istanbul ignore next
-var useElementIds$1 = 'useId' in React__namespace // Avoid conditional useId call
-? function useElementIds(_ref) {
-  var id = _ref.id,
-    labelId = _ref.labelId,
-    menuId = _ref.menuId,
-    getItemId = _ref.getItemId,
-    toggleButtonId = _ref.toggleButtonId,
-    inputId = _ref.inputId;
-  // Avoid conditional useId call
-  var reactId = "downshift-" + React__namespace.useId();
-  if (!id) {
-    id = reactId;
-  }
-  var elementIds = React__namespace.useMemo(function () {
-    return {
-      labelId: labelId || id + "-label",
-      menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
-      toggleButtonId: toggleButtonId || id + "-toggle-button",
-      inputId: inputId || id + "-input"
-    };
-  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
-  return elementIds;
-} : function useElementIds(_ref2) {
-  var _ref2$id = _ref2.id,
-    id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
-    labelId = _ref2.labelId,
-    menuId = _ref2.menuId,
-    getItemId = _ref2.getItemId,
-    toggleButtonId = _ref2.toggleButtonId,
-    inputId = _ref2.inputId;
-  var elementIds = React__namespace.useMemo(function () {
-    return {
-      labelId: labelId || id + "-label",
-      menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
-      toggleButtonId: toggleButtonId || id + "-toggle-button",
-      inputId: inputId || id + "-input"
-    };
-  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
-  return elementIds;
-};
 function isAcceptedCharacterKey(key) {
   return /^\S{1}$/.test(key);
 }
@@ -2088,13 +2040,13 @@ if (process.env.NODE_ENV !== 'production') {
     return setGetterPropCallInfo;
   };
 }
-function useScrollIntoView(_ref3) {
-  var highlightedIndex = _ref3.highlightedIndex,
-    isOpen = _ref3.isOpen,
-    itemRefs = _ref3.itemRefs,
-    getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
-    menuElement = _ref3.menuElement,
-    scrollIntoViewProp = _ref3.scrollIntoView;
+function useScrollIntoView(_ref) {
+  var highlightedIndex = _ref.highlightedIndex,
+    isOpen = _ref.isOpen,
+    itemRefs = _ref.itemRefs,
+    getItemNodeFromIndex = _ref.getItemNodeFromIndex,
+    menuElement = _ref.menuElement,
+    scrollIntoViewProp = _ref.scrollIntoView;
   // used not to scroll on highlight by mouse.
   var shouldScrollRef = React__namespace.useRef(true);
   // Scroll on highlighted item if change comes from keyboard.
@@ -2116,9 +2068,9 @@ function useScrollIntoView(_ref3) {
 var useControlPropsValidator = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
-  useControlPropsValidator = function useControlPropsValidator(_ref4) {
-    var props = _ref4.props,
-      state = _ref4.state;
+  useControlPropsValidator = function useControlPropsValidator(_ref2) {
+    var props = _ref2.props,
+      state = _ref2.state;
     // used for checking when props are moving from controlled to uncontrolled.
     var prevPropsRef = React__namespace.useRef(props);
     var isInitialMount = useIsInitialMount();
@@ -2441,6 +2393,56 @@ function downshiftSelectReducer(state, props, action) {
 }
 /* eslint-enable complexity */
 
+// eslint-disable-next-line @typescript-eslint/dot-notation
+var reactUseId$1 = React__namespace['useId'];
+var useElementIds$1 = typeof reactUseId$1 === 'function' ? useElementIdsR18$1 : useElementIdsLegacy$1;
+function useElementIdsR18$1(_ref) {
+  var id = _ref.id,
+    labelId = _ref.labelId,
+    menuId = _ref.menuId,
+    getItemId = _ref.getItemId,
+    toggleButtonId = _ref.toggleButtonId,
+    inputId = _ref.inputId;
+  var reactId = "downshift-" + reactUseId$1();
+  if (!id) {
+    id = reactId;
+  }
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      labelId: labelId != null ? labelId : id + "-label",
+      menuId: menuId != null ? menuId : id + "-menu",
+      getItemId: getItemId != null ? getItemId : function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId != null ? toggleButtonId : id + "-toggle-button",
+      inputId: inputId != null ? inputId : id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
+}
+function useElementIdsLegacy$1(_ref2) {
+  var id = _ref2.id,
+    labelId = _ref2.labelId,
+    menuId = _ref2.menuId,
+    getItemId = _ref2.getItemId,
+    toggleButtonId = _ref2.toggleButtonId,
+    inputId = _ref2.inputId;
+  var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
+  var baseId = baseIdRef.current;
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      labelId: labelId != null ? labelId : baseId + "-label",
+      menuId: menuId != null ? menuId : baseId + "-menu",
+      getItemId: getItemId != null ? getItemId : function (index) {
+        return baseId + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId != null ? toggleButtonId : baseId + "-toggle-button",
+      inputId: inputId != null ? inputId : baseId + "-input"
+    };
+  }, [getItemId, inputId, labelId, menuId, toggleButtonId, baseId]);
+  return elementIds;
+}
+
 var _excluded$3 = ["onClick"],
   _excluded2$3 = ["onMouseLeave", "refKey", "ref"],
   _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
@@ -4012,38 +4014,44 @@ function useTagGroupReducer(state, _props, action) {
   return _extends({}, state, changes);
 }
 
+// eslint-disable-next-line @typescript-eslint/dot-notation
+var reactUseId = React__namespace['useId'];
+
 // istanbul ignore next
-var useElementIds = 'useId' in React__namespace // Avoid conditional useId call
-? useElementIdsR18 : useElementIdsLegacy;
+var useElementIds = typeof reactUseId === 'function' ? useElementIdsR18 : useElementIdsLegacy;
 function useElementIdsR18(_ref) {
   var id = _ref.id,
     tagGroupId = _ref.tagGroupId,
     getTagId = _ref.getTagId;
-  // Avoid conditional useId call
-  var reactId = "downshift-" + React__namespace.useId();
+  var reactId = "downshift-" + reactUseId();
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = React__namespace.useRef({
-    tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
-    getTagId: getTagId != null ? getTagId : function (index) {
-      return id + "-tag-" + index;
-    }
-  });
-  return elementIdsRef.current;
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
+      getTagId: getTagId != null ? getTagId : function (index) {
+        return id + "-tag-" + index;
+      }
+    };
+  }, [getTagId, id, tagGroupId]);
+  return elementIds;
 }
 function useElementIdsLegacy(_ref2) {
-  var _ref2$id = _ref2.id,
-    id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
+  var id = _ref2.id,
     getTagId = _ref2.getTagId,
     tagGroupId = _ref2.tagGroupId;
-  var elementIdsRef = React__namespace.useRef({
-    tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
-    getTagId: getTagId != null ? getTagId : function (index) {
-      return id + "-tag-" + index;
-    }
-  });
-  return elementIdsRef.current;
+  var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
+  var baseId = baseIdRef.current;
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      tagGroupId: tagGroupId != null ? tagGroupId : baseId + "-tag-group",
+      getTagId: getTagId != null ? getTagId : function (index) {
+        return baseId + "-tag-" + index;
+      }
+    };
+  }, [getTagId, baseId, tagGroupId]);
+  return elementIds;
 }
 
 function getInitialState(props) {