downshift 9.3.2 → 9.4.0-alpha.0

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

@@ -0,0 +1,26 @@
+type StateReducerProp<S extends object, A extends {
+    type: string;
+}> = (state: S, actionAndChanges: (A & {
+    props: any;
+}) & {
+    changes: Partial<S>;
+}) => Partial<S>;
+export type Props<S extends object, A extends {
+    type: string;
+}> = Partial<S> & {
+    stateReducer: StateReducerProp<S, A>;
+    onStateChange?: (changes: {
+        type: A['type'];
+    } & Partial<S>) => void;
+};
+export type Action<S extends object, A extends {
+    type: string;
+}, P extends Props<S, A>> = A & {
+    props: P;
+};
+export type Reducer<S extends object, A extends {
+    type: string;
+}> = (state: S, action: A & {
+    props: any;
+}) => Partial<S>;
+export {};

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

@@ -0,0 +1,16 @@
+type DropdownState<Item> = {
+    isOpen: boolean;
+    inputValue: string;
+    highlightedIndex: number;
+    selectedItem: Item | null;
+};
+/**
+ * Check if a state is equal for dropdowns, by comparing isOpen, inputValue, highlightedIndex and selected item.
+ * Used by useSelect and useCombobox.
+ *
+ * @param prevState The previous dropdown state.
+ * @param newState The new dropdown state.
+ * @returns Wheather the states are deeply equal.
+ */
+export declare function isDropdownStateEqual<Item>(prevState: DropdownState<Item>, newState: DropdownState<Item>): boolean;
+export {};

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

@@ -0,0 +1,27 @@
+type CommonState<Item> = {
+    highlightedIndex: number;
+    isOpen: boolean;
+    selectedItem: Item | null;
+    inputValue: string;
+};
+type CommonProps<Item> = {
+    items: Item[];
+    isItemDisabled: (item: Item, index: number) => boolean;
+    itemToKey: (item: Item | null) => unknown;
+    initialHighlightedIndex?: number;
+    defaultHighlightedIndex?: number;
+    defaultIsOpen?: boolean;
+    defaultSelectedItem?: Item | null;
+    defaultInputValue?: string;
+};
+type CommonAction<Item> = {
+    type: string;
+    index?: number;
+    disabled?: boolean;
+    highlightedIndex?: number;
+    inputValue?: string;
+    selectedItem?: Item | null;
+};
+type CommonStateChangeTypes = Record<string, string>;
+export default function downshiftCommonReducer<Item>(state: CommonState<Item>, props: CommonProps<Item>, action: CommonAction<Item>, stateChangeTypes: CommonStateChangeTypes): CommonState<Item>;
+export {};

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

@@ -0,0 +1,6 @@
+type UseControlPropsValidatorOptions = {
+    state: Record<string, any>;
+    props: Record<string, any>;
+};
+export declare let useControlPropsValidator: (options: UseControlPropsValidatorOptions) => void;
+export {};

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

@@ -0,0 +1,13 @@
+import { type Props, type Reducer } from './index.types';
+/**
+ * Wraps the useEnhancedReducer and applies the controlled prop values before
+ * returning the new state.
+ * @param reducer Reducer function from downshift.
+ * @param props The hook props, also passed to createInitialState.
+ * @param createInitialState Function that returns the initial state.
+ * @param isStateEqual Function that checks if a previous state is equal to the next.
+ * @returns An array with the state and an action dispatcher.
+ */
+export declare function useControlledReducer<S extends object, A extends {
+    type: string;
+}, P extends Props<S, A>>(reducer: Reducer<S, A>, props: P, createInitialState: (props: P) => S, isStateEqual: (prev: S, next: S) => boolean): [S, (action: A) => void];

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

@@ -0,0 +1,15 @@
+import { type Props, type Reducer } from './index.types';
+/**
+ * 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 reducer Reducer function from downshift.
+ * @param props The hook props, also passed to createInitialState.
+ * @param createInitialState Function that returns the initial state.
+ * @param isStateEqual Function that checks if a previous state is equal to the next.
+ * @returns An array with the state and an action dispatcher.
+ */
+export declare function useEnhancedReducer<S extends object, A extends {
+    type: string;
+}, P extends Props<S, A>>(reducer: Reducer<S, A>, props: P, createInitialState: (props: P) => S, isStateEqual: (prev: S, next: S) => boolean): [S, (action: A) => void];

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare let useGetterPropsCalledChecker: (...propKeys: string[]) => (propKey: string, suppressRefError: boolean, refKey: string, elementRef: React.RefObject<HTMLElement> | undefined) => void;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Environment } from '../../downshift.types';
+/**
+ * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
+ *
+ * @param environment The environment to add the event listeners to, for instance window.
+ * @param handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
+ * @param downshiftRefs The refs for the elements that should not trigger a blur action from mouseDown or touchEnd.
+ * @returns The mouse and touch events information.
+ */
+export declare function useMouseAndTouchTracker(environment: Environment | undefined, handleBlur: () => void, downshiftRefs: React.RefObject<HTMLElement>[]): {
+    isMouseDown: boolean;
+    isTouchMove: boolean;
+    isTouchEnd: boolean;
+};

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

@@ -0,0 +1,11 @@
+/**
+ * Utility hook that scrolls an item from a menu into view.
+ * @param scrollIntoView The function that does the scroll.
+ * @param highlightedIndex The index of the item that should be scrolled.
+ * @param isOpen If the menu is open or not.
+ * @param menuElement The menu element.
+ * @param itemElements The object containing item elements.
+ * @param getItemId The function to get the item id from index.
+ * @returns Function that when called prevents the scroll.
+ */
+export declare function useScrollIntoView(scrollIntoView: (node: HTMLElement, menuNode: HTMLElement) => void, highlightedIndex: number, isOpen: boolean, menuElement: HTMLElement | null, itemElements: Record<string, HTMLElement>, getItemId: (index: number) => string): () => void;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { default } from './downshift';
-export { resetIdCounter } from './utils-ts';
+export { resetIdCounter } from './utils';
 export { useSelect, useCombobox, useTagGroup } from './hooks';
 /**
  * @deprecated Not maintained anymore. Use the new useTagGroup instead.

package/dist/utils/__tests__/callAllEventHandlers.test.d.ts

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

package/dist/utils/__tests__/debounce.test.d.ts

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

package/dist/utils/__tests__/generateId.r18.test.d.ts

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

package/dist/utils/__tests__/generateId.test.d.ts

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

package/dist/utils/__tests__/getHighlightedIndex.test.d.ts

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

package/dist/utils/__tests__/getNonDisabledIndex.test.d.ts

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

package/dist/utils/__tests__/getState.test.d.ts

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

package/dist/utils/__tests__/handleRefs.test.d.ts

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

package/dist/utils/__tests__/normalizeArrowKey.test.d.ts

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

package/dist/utils/__tests__/scrollIntoView.test.d.ts

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

package/dist/utils/__tests__/setA11yStatus.test.d.ts

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

package/dist/utils/__tests__/targetWithinDownshift.test.d.ts

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

package/dist/utils/__tests__/useLatestRef.test.d.ts

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

package/dist/utils/__tests__/validateControlledUnchanged.test.d.ts

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

package/dist/utils/__tests__/validatePropTypes.test.d.ts

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

package/dist/utils/getHighlightedIndex.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns the next non-disabled highlightedIndex value.
+ *
+ * @param start The current highlightedIndex.
+ * @param offset The offset from the current highlightedIndex to start searching.
+ * @param items The items array.
+ * @param isItemDisabled Function that tells if an item is disabled or not.
+ * @param circular If the search reaches the end, if it can search again starting from the other end.
+ * @returns The next highlightedIndex.
+ */
+export declare function getHighlightedIndex<Item>(start: number, offset: number, items: Item[], isItemDisabled: (item: Item, index: number) => boolean, circular?: boolean): number;

package/dist/utils/getNonDisabledIndex.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns the next non-disabled highlightedIndex value.
+ *
+ * @param start The current highlightedIndex.
+ * @param backwards If true, it will search backwards from the start.
+ * @param items The items array.
+ * @param isItemDisabled Function that tells if an item is disabled or not.
+ * @param circular If the search reaches the end, if it can search again starting from the other end.
+ * @returns The next non-disabled index.
+ */
+export declare function getNonDisabledIndex<Item>(start: number, backwards: boolean, items: Item[], isItemDisabled: (item: Item, index: number) => boolean, circular?: boolean): number;

package/dist/utils/getState.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This will perform a shallow merge of the given state object
+ * with the state coming from props
+ * (for the controlled component scenario)
+ * This is used in state updater functions so they're referencing
+ * the right state regardless of where it comes from.
+ *
+ * @param state The state of the component/hook.
+ * @param props The props that may contain controlled values.
+ * @returns The merged controlled state.
+ */
+export declare function getState<S extends object>(state: S, props?: Partial<S>): S;

package/dist/utils/handleRefs.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function handleRefs<T extends HTMLElement>(...refs: (React.Ref<T> | undefined)[]): (node: T) => void;

package/dist/{utils-ts → utils}/index.d.ts

@@ -7,5 +7,9 @@ export { setStatus, cleanupStatusDiv } from './setA11yStatus';
 export { noop } from './noop';
 export { validatePropTypes } from './validatePropTypes';
 export { getState } from './getState';
-export type { Action, Props, State } from './getState';
 export { scrollIntoView } from './scrollIntoView';
+export { normalizeArrowKey } from './normalizeArrowKey';
+export { getHighlightedIndex } from './getHighlightedIndex';
+export { getNonDisabledIndex } from './getNonDisabledIndex';
+export { validateControlledUnchanged } from './validateControlledUnchanged';
+export { targetWithinDownshift } from './targetWithinDownshift';

package/dist/utils/normalizeArrowKey.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
+ * @param event a keyboardEvent object
+ * @return keyboard key
+ */
+export declare function normalizeArrowKey(event: KeyboardEvent): string;

package/dist/utils/targetWithinDownshift.d.ts

@@ -0,0 +1,12 @@
+import { Environment } from '../downshift.types';
+/**
+ * Checks if event target is within the downshift elements.
+ *
+ * @param target Target to check.
+ * @param downshiftElements The elements that form downshift (list, toggle button etc).
+ * @param environment The window context where downshift renders.
+ * @param checkActiveElement Whether to also check activeElement.
+ *
+ * @returns Whether or not the target is within downshift elements.
+ */
+export declare function targetWithinDownshift(target: EventTarget | undefined | null, downshiftElements: (HTMLElement | undefined | null)[], environment: Environment | undefined, checkActiveElement?: boolean): boolean;

package/dist/utils/validateControlledUnchanged.d.ts

@@ -0,0 +1 @@
+export declare let validateControlledUnchanged: (state: Record<string, any>, prevProps: Record<string, any>, nextProps: Record<string, any>) => void;

package/dist/utils/validatePropTypes.d.ts

@@ -0,0 +1,2 @@
+import PropTypes from 'prop-types';
+export declare let validatePropTypes: (options: unknown, caller: Function, propTypes: Record<string, PropTypes.Validator<unknown>>) => void;

package/dist/utils.legacy.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Accepts a parameter and returns it if it's a function
+ * or a noop function if it's not. This allows us to
+ * accept a callback, but not worry about it if it's not
+ * passed.
+ * @param {Function} cb the callback
+ * @return {Function} a function
+ */
+export function cbToCb(cb: Function): Function;
+/**
+ * Default implementation for status message. Only added when menu is open.
+ * Will specify if there are results in the list, and if so, how many,
+ * and what keys are relevant.
+ *
+ * @param {Object} param the downshift state and other relevant properties
+ * @return {String} the a11y status message
+ */
+export function getA11yStatusMessage({ isOpen, resultCount, previousResultCount }: Object): string;
+/**
+ * Takes an argument and if it's an array, returns the first item in the array
+ * otherwise returns the argument
+ * @param {*} arg the maybe-array
+ * @param {*} defaultValue the value if arg is falsey not defined
+ * @return {*} the arg or it's first item
+ */
+export function unwrapArray(arg: any, defaultValue: any): any;
+/**
+ * @param {Object} element (P)react element
+ * @return {Boolean} whether it's a DOM element
+ */
+export function isDOMElement(element: Object): boolean;
+/**
+ * @param {Object} element (P)react element
+ * @return {Object} the props
+ */
+export function getElementProps(element: Object): Object;
+/**
+ * Throws a helpful error message for required properties. Useful
+ * to be used as a default in destructuring or object params.
+ * @param {String} fnName the function name
+ * @param {String} propName the prop name
+ */
+export function requiredProp(fnName: string, propName: string): void;
+/**
+ * @param {Object} state the state object
+ * @return {Object} state that is relevant to downshift
+ */
+export function pickState(state?: Object): Object;
+/**
+ * Simple check if the value passed is object literal
+ * @param {*} obj any things
+ * @return {Boolean} whether it's object literal
+ */
+export function isPlainObject(obj: any): boolean;

package/flow-typed/npm/downshift_v2.x.x.js.flow

@@ -115,80 +115,89 @@ declare module downshift {
   ) => StateChangeOptions<Item>
 
   declare export type GetRootPropsReturn = {
-    role: 'combobox';
-    'aria-expanded': boolean;
-    'aria-haspopup': 'listbox';
-    'aria-owns': string | null;
-    'aria-labelledby': string;
+    role: 'combobox',
+    'aria-expanded': boolean,
+    'aria-haspopup': 'listbox',
+    'aria-owns': string | null,
+    'aria-labelledby': string,
   }
   declare export interface GetRootPropsOptions {
     refKey: string;
   }
 
-  declare type GetToggleButtonCallbacks = {
-    onMouseMove: (e: SyntheticEvent<Element>) => void;
-    onMouseDown: (e: SyntheticEvent<Element>) => void;
-    onBlur: (e: SyntheticEvent<Element>) => void;
-  } | {
-    onPress: (e: SyntheticEvent<Element>) => void; // should be react native type
-  } | {}
+  declare type GetToggleButtonCallbacks =
+    | {
+        onMouseMove: (e: SyntheticEvent<Element>) => void,
+        onMouseDown: (e: SyntheticEvent<Element>) => void,
+        onBlur: (e: SyntheticEvent<Element>) => void,
+      }
+    | {
+        onPress: (e: SyntheticEvent<Element>) => void, // should be react native type
+      }
+    | {}
   declare export type GetToggleButtonReturn = {
-    type: 'button';
-    role: 'button';
-    'aria-label': 'close menu' | 'open menu';
-    'aria-haspopup': true;
-    'data-toggle': true;
+    type: 'button',
+    role: 'button',
+    'aria-label': 'close menu' | 'open menu',
+    'aria-haspopup': true,
+    'data-toggle': true,
   } & GetInputPropsCallbacks
-  declare export interface getToggleButtonPropsOptions
-    extends React.HTMLProps<HTMLButtonElement> {}
+  declare export interface getToggleButtonPropsOptions extends React.HTMLProps<HTMLButtonElement> {}
 
   declare export interface GetLabelPropsReturn {
     htmlFor: string;
     id: string;
   }
-  declare export interface GetLabelPropsOptions
-    extends React.HTMLProps<HTMLLabelElement> {}
+  declare export interface GetLabelPropsOptions extends React.HTMLProps<HTMLLabelElement> {}
 
   declare export type getMenuPropsReturn = {
-    role: 'listbox';
-    'aria-labelledby': string | null;
-    id: string;
+    role: 'listbox',
+    'aria-labelledby': string | null,
+    id: string,
   }
 
-  declare type GetInputPropsCallbacks = ({
-    onKeyDown: (e: SyntheticEvent<Element>) => void;
-    onBlur: (e: SyntheticEvent<Element>) => void;
-  } & ({
-    onInput: (e: SyntheticEvent<Element>) => void;
-  } | {
-    onChangeText: (e: SyntheticEvent<Element>) => void;
-  } | {
-    onChange: (e: SyntheticEvent<Element>) => void;
-  })) | {}
+  declare type GetInputPropsCallbacks =
+    | ({
+        onKeyDown: (e: SyntheticEvent<Element>) => void,
+        onBlur: (e: SyntheticEvent<Element>) => void,
+      } & (
+        | {
+            onInput: (e: SyntheticEvent<Element>) => void,
+          }
+        | {
+            onChangeText: (e: SyntheticEvent<Element>) => void,
+          }
+        | {
+            onChange: (e: SyntheticEvent<Element>) => void,
+          }
+      ))
+    | {}
   declare export type GetInputPropsReturn = {
-    'aria-autocomplete': 'list';
-    'aria-activedescendant': string | null;
-    'aria-controls': string | null;
-    'aria-labelledby': string;
-    autoComplete: 'off';
-    value: string;
-    id: string;
-  } & GetInputPropsCallbacks;
-  declare export interface GetInputPropsOptions
-    extends React.HTMLProps<HTMLInputElement> {}
+    'aria-autocomplete': 'list',
+    'aria-activedescendant': string | null,
+    'aria-controls': string | null,
+    'aria-labelledby': string,
+    autoComplete: 'off',
+    value: string,
+    id: string,
+  } & GetInputPropsCallbacks
+  declare export interface GetInputPropsOptions extends React.HTMLProps<HTMLInputElement> {}
 
   declare type GetItemPropsCallbacks = {
-    onMouseMove: (e: SyntheticEvent<Element>) => void;
-    onMouseDown: (e: SyntheticEvent<Element>) => void;
-  } & ({
-    onPress: (e: SyntheticEvent<Element>) => void;
-  } | {
-    onClick: (e: SyntheticEvent<Element>) => void;
-  })
+    onMouseMove: (e: SyntheticEvent<Element>) => void,
+    onMouseDown: (e: SyntheticEvent<Element>) => void,
+  } & (
+    | {
+        onPress: (e: SyntheticEvent<Element>) => void,
+      }
+    | {
+        onClick: (e: SyntheticEvent<Element>) => void,
+      }
+  )
   declare export type GetItemPropsReturn = {
-    id: string;
-    role: 'option';
-    'aria-selected': boolean;
+    id: string,
+    role: 'option',
+    'aria-selected': boolean,
   } & GetItemPropsCallbacks
   declare export type GetItemPropsOptions<Item> = {
     index?: number,
@@ -196,20 +205,36 @@ declare module downshift {
   }
 
   declare export interface PropGetters<Item> {
-    getRootProps: <T:{}>(options: GetRootPropsOptions & T) => GetRootPropsReturn & T;
-    getButtonProps: <T:{}>(options?: getToggleButtonPropsOptions & T) => GetToggleButtonReturn & T;
-    getToggleButtonProps: <T:{}>(options?: getToggleButtonPropsOptions & T) => GetToggleButtonReturn & T;
-    getLabelProps: <T:{}>(options?: GetLabelPropsOptions & T) => GetLabelPropsReturn & T;
-    getMenuProps: <T:{}>(options?: T) => getMenuPropsReturn & T;
-    getInputProps: <T:{}>(options?: GetInputPropsOptions & T) => GetInputPropsReturn & T;
-    getItemProps: <T:{}>(options: GetItemPropsOptions<Item> & T) => GetItemPropsReturn & T;
+    getRootProps: <T: {}>(
+      options: GetRootPropsOptions & T,
+    ) => GetRootPropsReturn & T;
+    getButtonProps: <T: {}>(
+      options?: getToggleButtonPropsOptions & T,
+    ) => GetToggleButtonReturn & T;
+    getToggleButtonProps: <T: {}>(
+      options?: getToggleButtonPropsOptions & T,
+    ) => GetToggleButtonReturn & T;
+    getLabelProps: <T: {}>(
+      options?: GetLabelPropsOptions & T,
+    ) => GetLabelPropsReturn & T;
+    getMenuProps: <T: {}>(options?: T) => getMenuPropsReturn & T;
+    getInputProps: <T: {}>(
+      options?: GetInputPropsOptions & T,
+    ) => GetInputPropsReturn & T;
+    getItemProps: <T: {}>(
+      options: GetItemPropsOptions<Item> & T,
+    ) => GetItemPropsReturn & T;
   }
   declare export interface Actions<Item> {
     reset: (otherStateToSet?: {}, cb?: Callback) => void;
     openMenu: (cb?: Callback) => void;
     closeMenu: (cb?: Callback) => void;
     toggleMenu: (otherStateToSet?: {}, cb?: Callback) => void;
-    selectItem: (item: Item | null, otherStateToSet?: {}, cb?: Callback) => void;
+    selectItem: (
+      item: Item | null,
+      otherStateToSet?: {},
+      cb?: Callback,
+    ) => void;
     selectItemAtIndex: (
       index: number,
       otherStateToSet?: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "9.3.2",
+  "version": "9.4.0-alpha.0",
   "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",
@@ -39,7 +39,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "kcd-scripts pre-commit"
+      "pre-commit": "unset ELECTRON_RUN_AS_NODE && kcd-scripts pre-commit"
     }
   },
   "files": [
@@ -91,7 +91,6 @@
     "@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": "^7.0.2",
     "@docusaurus/core": "3.3.2",
     "@docusaurus/module-type-aliases": "3.3.2",
     "@docusaurus/preset-classic": "3.3.2",
@@ -197,7 +196,6 @@
     "dist",
     ".docusaurus",
     "build",
-    "typings",
     "test"
   ],
   "repository": {