downshift 9.4.0-alpha.1 → 9.4.0-alpha.2

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

@@ -1,4 +1,4 @@
-import { Environment, GetPropsCommonOptions, Overwrite } from '../../downshift.types';
+import { AnyRef, Environment, GetPropsCommonOptions, Overwrite } from '../../downshift.types';
 export interface UseComboboxState<Item> {
     highlightedIndex: number;
     selectedItem: Item | null;
@@ -175,12 +175,12 @@ export interface UseComboboxInputValueChange<Item> extends UseComboboxStateChang
 }
 export interface UseComboboxGetMenuPropsOptions extends React.HTMLProps<HTMLElement> {
     refKey?: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
 }
 export interface UseComboboxGetMenuPropsReturnValue {
     'aria-label': string | undefined;
     'aria-labelledby': string | undefined;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     role: 'listbox';
     id: string;
     onMouseLeave: React.MouseEventHandler;
@@ -189,7 +189,7 @@ export type UseComboboxGetMenuProps = <Options>(options?: UseComboboxGetMenuProp
 export interface UseComboboxGetToggleButtonPropsOptions extends React.HTMLProps<HTMLElement> {
     disabled?: boolean;
     refKey?: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     onPress?: (event: React.BaseSyntheticEvent) => void;
 }
 export interface UseComboboxGetToggleButtonPropsReturnValue {
@@ -198,7 +198,7 @@ export interface UseComboboxGetToggleButtonPropsReturnValue {
     id: string;
     onPress?: (event: React.BaseSyntheticEvent) => void;
     onClick?: React.MouseEventHandler;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     tabIndex: -1;
 }
 export type UseComboboxGetToggleButtonProps = <Options>(options?: UseComboboxGetToggleButtonPropsOptions & Options) => Overwrite<UseComboboxGetToggleButtonPropsReturnValue, Options>;
@@ -213,7 +213,7 @@ export interface UseComboboxGetItemPropsOptions<Item> extends React.HTMLProps<HT
     index?: number;
     item?: Item;
     refKey?: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     onPress?: (event: React.BaseSyntheticEvent) => void;
 }
 export interface UseComboboxGetItemPropsReturnValue {
@@ -224,7 +224,7 @@ export interface UseComboboxGetItemPropsReturnValue {
     onMouseDown?: React.MouseEventHandler;
     onMouseMove?: React.MouseEventHandler;
     onPress?: React.MouseEventHandler;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     role: 'option';
 }
 export type UseComboboxGetItemProps<Item> = <Options>(options?: UseComboboxGetItemPropsOptions<Item> & Options) => Omit<Overwrite<UseComboboxGetItemPropsReturnValue, Options>, 'index' | 'item'>;
@@ -234,7 +234,7 @@ export interface UseComboboxGetInputPropsOptions extends React.HTMLProps<HTMLInp
     onChangeText?: (event: React.BaseSyntheticEvent) => void;
 }
 export interface UseComboboxGetInputPropsReturnValue {
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     'aria-activedescendant': string;
     'aria-autocomplete': 'list';
     'aria-controls': string;

package/dist/hooks/useMultipleSelection/index.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Environment, GetPropsCommonOptions, Overwrite } from '../../downshift.types';
+import { AnyRef, Environment, GetPropsCommonOptions, Overwrite } from '../../downshift.types';
 export interface UseMultipleSelectionState<Item> {
     selectedItems: Item[];
     activeIndex: number;
@@ -64,12 +64,12 @@ export interface A11yRemovalMessage<Item> {
 }
 export interface UseMultipleSelectionGetSelectedItemPropsOptions<Item> extends React.HTMLProps<HTMLElement> {
     refKey?: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     index?: number;
     selectedItem: Item;
 }
 export interface UseMultipleSelectionGetSelectedItemReturnValue {
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     tabIndex: 0 | -1;
     onClick: React.MouseEventHandler;
     onKeyDown: React.KeyboardEventHandler;
@@ -77,10 +77,10 @@ export interface UseMultipleSelectionGetSelectedItemReturnValue {
 export interface UseMultipleSelectionGetDropdownPropsOptions extends React.HTMLProps<HTMLElement> {
     preventKeyAction?: boolean;
     refKey?: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
 }
 export interface UseMultipleSelectionGetDropdownReturnValue {
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     onClick?: React.MouseEventHandler;
     onKeyDown?: React.KeyboardEventHandler;
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Environment, GetPropsCommonOptions, Overwrite } from '../../downshift.types';
+import { AnyRef, Environment, GetPropsCommonOptions, Overwrite } from '../../downshift.types';
 export interface UseSelectState<Item> {
     highlightedIndex: number;
     selectedItem: Item | null;
@@ -162,19 +162,19 @@ export interface UseSelectIsOpenChange<Item> extends UseSelectStateChange<Item>
 }
 export interface UseSelectGetMenuPropsOptions extends React.HTMLProps<HTMLElement> {
     refKey?: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
 }
 export interface UseSelectGetMenuPropsReturnValue {
     'aria-labelledby': string | undefined;
     id: string;
     onMouseLeave: React.MouseEventHandler;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     role: 'listbox';
 }
 export type UseSelectGetMenuProps = <Options>(options?: UseSelectGetMenuPropsOptions & Options, otherOptions?: GetPropsCommonOptions) => Overwrite<UseSelectGetMenuPropsReturnValue, Options>;
 export interface UseSelectGetToggleButtonPropsOptions extends React.HTMLProps<HTMLElement> {
     refKey?: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     onPress?: (event: React.BaseSyntheticEvent) => void;
 }
 export interface UseSelectGetToggleButtonPropsReturnValue {
@@ -188,7 +188,7 @@ export interface UseSelectGetToggleButtonPropsReturnValue {
     onClick?: React.MouseEventHandler;
     onKeyDown?: React.KeyboardEventHandler;
     onPress?: (event: React.BaseSyntheticEvent) => void;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     role: 'combobox';
     tabIndex: 0;
 }
@@ -205,7 +205,7 @@ export interface UseSelectGetItemPropsOptions<Item> extends React.HTMLProps<HTML
     item?: Item;
     index?: number;
     refKey?: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     onPress?: (event: React.BaseSyntheticEvent) => void;
 }
 export interface UseSelectGetItemPropsReturnValue {
@@ -216,7 +216,7 @@ export interface UseSelectGetItemPropsReturnValue {
     onMouseDown?: React.MouseEventHandler;
     onMouseMove?: React.MouseEventHandler;
     onPress?: React.MouseEventHandler;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     role: 'option';
 }
 export type UseSelectGetItemProps<Item> = <Options>(options: UseSelectGetItemPropsOptions<Item> & Options) => Omit<Overwrite<UseSelectGetItemPropsReturnValue, Options>, 'index' | 'item'>;

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

@@ -1,4 +1,4 @@
-import { Environment } from '../../downshift.types';
+import { AnyRef, Environment } from '../../downshift.types';
 export interface UseTagGroupState<Item> {
     activeIndex: number;
     items: Item[];
@@ -52,12 +52,12 @@ export interface UseTagGroupReturnValue<Item> {
 export interface GetTagPropsOptions extends React.HTMLProps<HTMLElement> {
     index: number;
     refKey?: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
 }
 export interface GetTagPropsReturnValue {
     'aria-describedby': string;
     id: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     role: 'option';
     onPress?: (event: React.BaseSyntheticEvent) => void;
     onClick?: React.MouseEventHandler;
@@ -75,11 +75,11 @@ export interface GetTagRemovePropsReturnValue {
 }
 export interface GetTagGroupPropsOptions extends React.HTMLProps<HTMLElement> {
     refKey?: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
 }
 export interface GetTagGroupPropsReturnValue {
     id: string;
-    ref?: React.Ref<any>;
+    ref?: AnyRef;
     role: 'listbox';
     'aria-live': 'polite';
     'aria-atomic': 'false';

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

@@ -10,7 +10,7 @@ type DropdownState<Item> = {
  *
  * @param prevState The previous dropdown state.
  * @param newState The new dropdown state.
- * @returns Wheather the states are deeply equal.
+ * @returns Whether the states are deeply equal.
  */
 export declare function isDropdownStateEqual<Item>(prevState: DropdownState<Item>, newState: DropdownState<Item>): boolean;
 export {};

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
+export type AnyRef = React.Ref<any>;
+export interface Environment {
+    addEventListener: typeof window.addEventListener;
+    removeEventListener: typeof window.removeEventListener;
+    document: Document;
+    Node: typeof window.Node;
+}
+export interface GetPropsCommonOptions {
+    suppressRefError?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "9.4.0-alpha.1",
+  "version": "9.4.0-alpha.2",
   "description": "🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.",
   "main": "dist/downshift.cjs.cjs",
   "react-native": "dist/downshift.native.cjs.cjs",
@@ -24,18 +24,18 @@
     "test:flow:coverage": "flow-coverage-report",
     "test:build": "jest --config other/misc-tests/jest.config.js",
     "// FIXME: test:build": "jest --projects other/misc-tests other/react-native",
-    "test:cypress:dev": "npm-run-all --parallel --race docs:dev cy:open",
-    "pretest:cypress": "npm run docs:build --silent",
-    "test:cypress": "start-server-and-test docs:serve http://localhost:6006 cy:run",
-    "cy:run": "cypress run",
-    "cy:open": "cypress open",
+    "test:e2e:dev": "playwright test --ui",
+    "pretest:e2e": "npm run docs:build --silent",
+    "test:e2e": "playwright test",
+    "pw:run": "playwright test",
+    "pw:open": "playwright test --ui",
     "build-and-test": "npm run build -s && npm run test:build -s",
     "docs:build": "docusaurus build",
     "docs:dev": "docusaurus start",
     "docs:serve": "docusaurus serve --port 6006",
     "docs:clear": "docusaurus clear",
     "setup": "npm install && npm run validate",
-    "validate": "kcd-scripts validate lint,build-and-test,test:cover,test:ts,test:ssr,test:cypress"
+    "validate": "kcd-scripts validate lint,build-and-test,test:cover,test:ts,test:ssr,test:e2e"
   },
   "husky": {
     "hooks": {
@@ -89,15 +89,14 @@
   },
   "devDependencies": {
     "@babel/helpers": "^7.28.6",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@docusaurus/core": "3.3.2",
-    "@docusaurus/module-type-aliases": "3.3.2",
-    "@docusaurus/preset-classic": "3.3.2",
+    "@docusaurus/babel": "3.10.1",
+    "@docusaurus/core": "3.10.1",
+    "@docusaurus/module-type-aliases": "3.10.1",
+    "@docusaurus/preset-classic": "3.10.1",
     "@mdx-js/react": "^3.0.1",
+    "@playwright/test": "^1.60.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",
@@ -114,9 +113,7 @@
     "buble": "^0.20.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",
@@ -141,7 +138,8 @@
       "project": [
         "./tsconfig.json",
         "./docusaurus/tsconfig.json",
-        "./test/tsconfig.json"
+        "./test/tsconfig.json",
+        "./e2e/tsconfig.json"
       ],
       "sourceType": "module"
     },
@@ -181,11 +179,16 @@
     "overrides": [
       {
         "files": [
-          "cypress/**/*.js"
+          "e2e/**/*.ts"
         ],
         "rules": {
           "testing-library/prefer-screen-queries": "off",
-          "testing-library/await-async-query": "off"
+          "import/no-extraneous-dependencies": [
+            "error",
+            {
+              "devDependencies": true
+            }
+          ]
         }
       }
     ]
@@ -196,7 +199,10 @@
     "dist",
     ".docusaurus",
     "build",
-    "test"
+    "test",
+    "typings",
+    "playwright-report",
+    "test-results"
   ],
   "repository": {
     "type": "git",

package/preact/dist/downshift.cjs.cjs

@@ -2139,6 +2139,7 @@ function useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuElement
     } else {
       shouldScrollRef.current = true;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally only re-runs when highlightedIndex changes; other params are refs/stable values that don't trigger scrolling
   }, [highlightedIndex]);
   return React__namespace.useCallback(function preventScroll() {
     shouldScrollRef.current = false;
@@ -2151,7 +2152,7 @@ function useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuElement
  *
  * @param prevState The previous dropdown state.
  * @param newState The new dropdown state.
- * @returns Wheather the states are deeply equal.
+ * @returns Whether the states are deeply equal.
  */
 function isDropdownStateEqual(prevState, newState) {
   return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
@@ -2215,7 +2216,6 @@ function downshiftCommonReducer(state, props, action, stateChangeTypes) {
   }
   return _extends({}, state, changes);
 }
-/* eslint-enable complexity */
 
 var propTypes$3 = _extends({}, dropdownPropTypes, {
   items: PropTypes.array.isRequired,

package/preact/dist/downshift.esm.mjs

@@ -2117,6 +2117,7 @@ function useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuElement
     } else {
       shouldScrollRef.current = true;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally only re-runs when highlightedIndex changes; other params are refs/stable values that don't trigger scrolling
   }, [highlightedIndex]);
   return React.useCallback(function preventScroll() {
     shouldScrollRef.current = false;
@@ -2129,7 +2130,7 @@ function useScrollIntoView(scrollIntoView, highlightedIndex, isOpen, menuElement
  *
  * @param prevState The previous dropdown state.
  * @param newState The new dropdown state.
- * @returns Wheather the states are deeply equal.
+ * @returns Whether the states are deeply equal.
  */
 function isDropdownStateEqual(prevState, newState) {
   return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
@@ -2193,7 +2194,6 @@ function downshiftCommonReducer(state, props, action, stateChangeTypes) {
   }
   return _extends({}, state, changes);
 }
-/* eslint-enable complexity */
 
 var propTypes$3 = _extends({}, dropdownPropTypes, {
   items: PropTypes.array.isRequired,

package/preact/dist/downshift.umd.js

@@ -2400,6 +2400,7 @@
       } else {
         shouldScrollRef.current = true;
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally only re-runs when highlightedIndex changes; other params are refs/stable values that don't trigger scrolling
     }, [highlightedIndex]);
     return React__namespace.useCallback(function preventScroll() {
       shouldScrollRef.current = false;
@@ -2412,7 +2413,7 @@
    *
    * @param prevState The previous dropdown state.
    * @param newState The new dropdown state.
-   * @returns Wheather the states are deeply equal.
+   * @returns Whether the states are deeply equal.
    */
   function isDropdownStateEqual(prevState, newState) {
     return prevState.isOpen === newState.isOpen && prevState.inputValue === newState.inputValue && prevState.highlightedIndex === newState.highlightedIndex && prevState.selectedItem === newState.selectedItem;
@@ -2476,7 +2477,6 @@
     }
     return _extends({}, state, changes);
   }
-  /* eslint-enable complexity */
 
   var propTypes$3 = _extends({}, dropdownPropTypes, {
     items: PropTypes.array.isRequired,