downshift 6.1.3 → 6.1.5

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

@@ -0,0 +1 @@
+export default function downshiftCommonReducer(state: any, action: any, stateChangeTypes: any): any;

package/dist/src/hooks/useSelect/__tests__/utils.test.d.ts

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

package/dist/src/hooks/useSelect/reducer.d.ts

@@ -0,0 +1 @@
+export default function downshiftSelectReducer(state: any, action: any): any;

package/dist/src/hooks/useSelect/stateChangeTypes.d.ts

@@ -0,0 +1,23 @@
+export const MenuKeyDownArrowDown: any;
+export const MenuKeyDownArrowUp: any;
+export const MenuKeyDownEscape: any;
+export const MenuKeyDownHome: any;
+export const MenuKeyDownEnd: any;
+export const MenuKeyDownEnter: any;
+export const MenuKeyDownSpaceButton: any;
+export const MenuKeyDownCharacter: any;
+export const MenuBlur: any;
+export const MenuMouseLeave: any;
+export const ItemMouseMove: any;
+export const ItemClick: any;
+export const ToggleButtonClick: any;
+export const ToggleButtonKeyDownArrowDown: any;
+export const ToggleButtonKeyDownArrowUp: any;
+export const ToggleButtonKeyDownCharacter: any;
+export const FunctionToggleMenu: any;
+export const FunctionOpenMenu: any;
+export const FunctionCloseMenu: any;
+export const FunctionSetHighlightedIndex: any;
+export const FunctionSelectItem: any;
+export const FunctionSetInputValue: any;
+export const FunctionReset: any;

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

@@ -0,0 +1,7 @@
+export interface GetItemIndexByCharacterKeyOptions<Item> {
+    keysSoFar: string;
+    highlightedIndex: number;
+    items: Item[];
+    itemToString(item: Item | null): string;
+    getItemNodeFromIndex(index: number): HTMLElement | undefined;
+}

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

@@ -0,0 +1,23 @@
+import { A11yStatusMessageOptions } from '../../types';
+import { GetItemIndexByCharacterKeyOptions } from './types';
+export declare function getItemIndexByCharacterKey<Item>({ keysSoFar, highlightedIndex, items, itemToString, getItemNodeFromIndex, }: GetItemIndexByCharacterKeyOptions<Item>): number;
+/**
+ * Default implementation for status message. Only added when menu is open.
+ * Will specift 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
+ */
+declare function getA11yStatusMessage<Item>({ isOpen, resultCount, previousResultCount, }: A11yStatusMessageOptions<Item>): string;
+export declare const defaultProps: {
+    getA11yStatusMessage: typeof getA11yStatusMessage;
+    itemToString: (item: any) => string;
+    stateReducer: (s: Object, a: Object) => Object;
+    getA11ySelectionMessage: (selectionParameters: Object) => string;
+    scrollIntoView: typeof import("../../utils").scrollIntoView;
+    circularNavigation: boolean;
+    environment: {};
+};
+export declare let validatePropTypes: (options: unknown, caller: Function) => void;
+export {};

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

@@ -0,0 +1,112 @@
+export let useControlPropsValidator: typeof noop;
+export function useScrollIntoView({ highlightedIndex, isOpen, itemRefs, getItemNodeFromIndex, menuElement, scrollIntoView: scrollIntoViewProp, }: {
+    highlightedIndex: any;
+    isOpen: any;
+    itemRefs: any;
+    getItemNodeFromIndex: any;
+    menuElement: any;
+    scrollIntoView: any;
+}): import("react").MutableRefObject<boolean>;
+export function useA11yMessageSetter(getA11yMessage: any, dependencyArray: any, { isInitialMount, highlightedIndex, items, environment, ...rest }: {
+    [x: string]: any;
+    isInitialMount: any;
+    highlightedIndex: any;
+    items: any;
+    environment: any;
+}): void;
+export function useGetterPropsCalledChecker(): typeof noop;
+/**
+ * Reuse the movement tracking of mouse and touch events.
+ *
+ * @param {boolean} isOpen Whether the dropdown is open or not.
+ * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
+ * @param {Object} environment Environment where component/hook exists.
+ * @param {Function} handleBlur Handler on blur from mouse or touch.
+ * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
+ */
+export function useMouseAndTouchTracker(isOpen: boolean, downshiftElementRefs: Array<Object>, environment: Object, handleBlur: Function): Object;
+export function getHighlightedIndexOnOpen(props: any, state: any, offset: any, getItemNodeFromIndex: any): any;
+export function getInitialState(props: any): {
+    highlightedIndex: any;
+    isOpen: any;
+    selectedItem: any;
+    inputValue: any;
+};
+export function getInitialValue(props: any, propKey: any, defaultStateValues?: {
+    highlightedIndex: number;
+    isOpen: boolean;
+    selectedItem: null;
+    inputValue: string;
+}): any;
+export function getDefaultValue(props: any, propKey: any, defaultStateValues?: {
+    highlightedIndex: number;
+    isOpen: boolean;
+    selectedItem: null;
+    inputValue: string;
+}): any;
+export namespace defaultProps {
+    export { itemToString };
+    export { stateReducer };
+    export { getA11ySelectionMessage };
+    export { scrollIntoView };
+    export const circularNavigation: boolean;
+    export const environment: {};
+}
+/**
+ * Wraps the useEnhancedReducer and applies the controlled prop values before
+ * 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.
+ * @returns {Array} An array with the state and an action dispatcher.
+ */
+export function useControlledReducer(reducer: Function, initialState: Object, props: Object): 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.
+ * @returns {Array} An array with the state and an action dispatcher.
+ */
+export function useEnhancedReducer(reducer: Function, initialState: Object, props: Object): any[];
+export function useLatestRef(val: any): import("react").MutableRefObject<any>;
+export function capitalizeString(string: any): string;
+export function isAcceptedCharacterKey(key: any): boolean;
+export function getItemIndex(index: any, item: any, items: any): any;
+export function useElementIds({ 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;
+};
+import { noop } from "../utils";
+declare function itemToString(item: any): string;
+/**
+ * Default state reducer that returns the changes.
+ *
+ * @param {Object} s state.
+ * @param {Object} a action with changes.
+ * @returns {Object} changes.
+ */
+declare function stateReducer(s: Object, a: Object): Object;
+/**
+ * Returns a message to be added to aria-live region when item is selected.
+ *
+ * @param {Object} selectionParameters Parameters required to build the message.
+ * @returns {string} The a11y message.
+ */
+declare function getA11ySelectionMessage(selectionParameters: Object): string;
+import { scrollIntoView } from "../utils";
+export {};

package/dist/src/is.macro.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: any;
+export = _exports;

package/dist/src/productionEnum.macro.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: any;
+export = _exports;

package/dist/src/set-a11y-status.d.ts

@@ -0,0 +1,6 @@
+export default setStatus;
+/**
+ * @param {String} status the status message
+ * @param {Object} documentProp document passed by the user.
+ */
+declare function setStatus(status: string, documentProp: Object): void;

package/dist/src/types.d.ts

@@ -0,0 +1,10 @@
+export interface A11yStatusMessageOptions<Item> {
+    highlightedIndex: number | null;
+    inputValue: string;
+    isOpen: boolean;
+    itemToString: (item: Item | null) => string;
+    previousResultCount: number;
+    resultCount: number;
+    highlightedItem: Item;
+    selectedItem: Item | null;
+}

package/dist/src/utils.d.ts

@@ -0,0 +1,156 @@
+/**
+ * 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;
+/**
+ * This is intended to be used to compose event handlers.
+ * They are executed in order until one of them sets
+ * `event.preventDownshiftDefault = true`.
+ * @param {...Function} fns the event handler functions
+ * @return {Function} the event handler to add to an element
+ */
+export function callAllEventHandlers(...fns: Function[]): Function;
+export function handleRefs(...refs: any[]): (node: any) => void;
+/**
+ * Simple debounce implementation. Will call the given
+ * function once after the time given has passed since
+ * it was last called.
+ * @param {Function} fn the function to call after the time
+ * @param {Number} time the time to wait
+ * @return {Function} the debounced function
+ */
+export function debounce(fn: Function, time: number): Function;
+/**
+ * Scroll node into view if necessary
+ * @param {HTMLElement} node the element that should scroll into view
+ * @param {HTMLElement} menuNode the menu element of the component
+ */
+export function scrollIntoView(node: HTMLElement, menuNode: HTMLElement): void;
+/**
+ * This generates a unique ID for an instance of Downshift
+ * @return {String} the unique ID
+ */
+export function generateId(): string;
+/**
+ * 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;
+export function noop(): void;
+/**
+ * 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;
+/**
+ * This is only used in tests
+ * @param {Number} num the number to set the idCounter to
+ */
+export function setIdCounter(num: number): void;
+/**
+ * Resets idCounter to 0. Used for SSR.
+ */
+export function resetIdCounter(): 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;
+/**
+ * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
+ * @param {Object} event a keyboardEvent object
+ * @return {String} keyboard key
+ */
+export function normalizeArrowKey(event: Object): string;
+/**
+ * Returns the new index in the list, in a circular way. If next value is out of bonds from the total,
+ * it will wrap to either 0 or itemCount - 1.
+ *
+ * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
+ * @param {number} baseIndex The initial position to move from.
+ * @param {number} itemCount The total number of items.
+ * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
+ * @param {boolean} circular Specify if navigation is circular. Default is true.
+ * @returns {number} The new index after the move.
+ */
+export function getNextWrappingIndex(moveAmount: number, baseIndex: number, itemCount: number, getItemNodeFromIndex: Function, circular?: boolean): number;
+/**
+ * Returns the next index in the list of an item that is not disabled.
+ *
+ * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards.
+ * @param {number} baseIndex The initial position to move from.
+ * @param {number} itemCount The total number of items.
+ * @param {Function} getItemNodeFromIndex Used to check if item is disabled.
+ * @param {boolean} circular Specify if navigation is circular. Default is true.
+ * @returns {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1.
+ */
+export function getNextNonDisabledIndex(moveAmount: number, baseIndex: number, itemCount: number, getItemNodeFromIndex: Function, circular: boolean): number;
+/**
+ * Checks if event target is within the downshift elements.
+ *
+ * @param {EventTarget} target Target to check.
+ * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
+ * @param {Window} environment The window context where downshift renders.
+ * @param {boolean} checkActiveElement Whether to also check activeElement.
+ *
+ * @returns {boolean} Whether or not the target is within downshift elements.
+ */
+export function targetWithinDownshift(target: EventTarget, downshiftElements: HTMLElement[], environment: Window, checkActiveElement?: boolean): boolean;
+/**
+ * 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 {Object} state The state of the component/hook.
+ * @param {Object} props The props that may contain controlled values.
+ * @returns {Object} The merged controlled state.
+ */
+export function getState(state: Object, props: Object): Object;
+/**
+ * This determines whether a prop is a "controlled prop" meaning it is
+ * state which is controlled by the outside of this component rather
+ * than within this component.
+ *
+ * @param {Object} props The props that may contain controlled values.
+ * @param {String} key the key to check
+ * @return {Boolean} whether it is a controlled controlled prop
+ */
+export function isControlledProp(props: Object, key: string): boolean;
+export function validateControlledUnchanged(): void;

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "6.1.3",
+  "version": "6.1.5",
   "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",
@@ -66,73 +66,74 @@
     "react": ">=16.12.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
+    "@babel/runtime": "^7.14.8",
     "compute-scroll-into-view": "^1.0.17",
     "prop-types": "^15.7.2",
     "react-is": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/helpers": "^7.13.10",
-    "@rollup/plugin-commonjs": "^18.0.0",
-    "@testing-library/cypress": "^7.0.6",
-    "@testing-library/dom": "^7.30.3",
-    "@testing-library/jest-dom": "^5.11.10",
+    "@babel/helpers": "^7.14.8",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-typescript": "^8.2.5",
+    "@testing-library/cypress": "^8.0.0",
+    "@testing-library/dom": "^8.1.0",
+    "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/preact": "^2.0.1",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^5.1.1",
-    "@testing-library/user-event": "^13.1.4",
-    "@types/jest": "^26.0.22",
-    "@types/react": "^17.0.3",
-    "babel-plugin-macros": "^3.0.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^26.0.24",
+    "@types/react": "^17.0.15",
+    "@typescript-eslint/eslint-plugin": "^4.28.5",
+    "@typescript-eslint/parser": "^4.28.5",
+    "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": "^3.1.1",
     "cross-env": "^7.0.3",
-    "cypress": "^7.1.0",
+    "cypress": "^8.1.0",
     "docz": "^2.3.1",
     "docz-theme-default": "^1.2.0",
-    "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-react": "7.23.1",
-    "flow-bin": "^0.148.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-cypress": "^2.11.3",
+    "eslint-plugin-react": "7.24.0",
+    "flow-bin": "^0.156.0",
     "flow-coverage-report": "^0.8.0",
-    "kcd-scripts": "^9.0.0",
+    "get-pkg-repo": "4.1.1",
+    "kcd-scripts": "^11.2.0",
     "npm-run-all": "^4.1.5",
-    "preact": "^10.5.13",
-    "react": "^16.13.1",
+    "preact": "^10.5.14",
+    "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "^0.64.0",
+    "react-native": "^0.64.2",
     "react-test-renderer": "^17.0.2",
-    "rollup-plugin-babel": "^4.4.0",
-    "serve": "^11.3.2",
-    "start-server-and-test": "^1.12.1",
-    "typescript": "^4.2.4"
+    "serve": "^12.0.0",
+    "start-server-and-test": "^1.13.1",
+    "typescript": "^4.3.5"
   },
   "eslintConfig": {
+    "settings": {
+      "import/resolver": {
+        "node": {
+          "extensions": [
+            ".js",
+            ".jsx",
+            ".ts",
+            ".tsx"
+          ]
+        }
+      }
+    },
     "extends": "./node_modules/kcd-scripts/eslint.js",
     "rules": {
-      "eqeqeq": "off",
-      "import/no-useless-path-segments": "off",
-      "import/no-unassigned-import": "off",
-      "max-lines": "off",
-      "max-lines-per-function": "off",
-      "no-eq-null": "off",
       "react/jsx-indent": "off",
       "react/prop-types": "off",
+      "max-lines-per-function": "off",
       "jsx-a11y/label-has-for": "off",
       "jsx-a11y/label-has-associated-control": "off",
       "jsx-a11y/autocomplete-valid": "off",
-      "complexity": [
-        "error",
-        12
-      ],
-      "no-unsafe-optional-chaining": "off",
-      "no-loss-of-precision": "off",
-      "no-unreachable-loop": "off",
-      "no-useless-backreference": "off",
-      "default-case-last": "off",
-      "no-nonoctal-decimal-escape": "off",
-      "id-denylist": "off",
       "testing-library/prefer-user-event": "off",
       "testing-library/no-node-access": "off",
       "testing-library/no-container": "off",