@acusti/dropdown 0.22.0 → 0.24.0

package/dist/Dropdown.js.flow

@@ -1,62 +1,62 @@
 /**
  * Flowtype definitions for Dropdown
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.0
+ * Flowgen v1.20.1
  * @flow
  */
 
-import * as React from "react";
+import * as React from 'react';
 export type Item = {|
-  element: HTMLElement | null,
-  value: string,
+    element: HTMLElement | null,
+    value: string,
 |};
 export type Props = {|
-  /**
-   * Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true
-   */
-  allowEmpty?: boolean,
+    /**
+     * Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true
+     */
+    allowEmpty?: boolean,
 
-  /**
-   * Can take a single React element (e.g. ReactChild) or exactly two renderable children
-   */
-  children: React.Element<any> | [React.Node, React.Node],
-  className?: string,
-  disabled?: boolean,
+    /**
+     * Can take a single React element (e.g. ReactChild) or exactly two renderable children
+     */
+    children: React.Element<any> | [React.Node, React.Node],
+    className?: string,
+    disabled?: boolean,
 
-  /**
-   * Group identifier string links dropdowns together into a menu (like macOS top menubar)
-   */
-  group?: string,
-  hasItems?: boolean,
-  isOpenOnMount?: boolean,
-  isSearchable?: boolean,
-  keepOpenOnSubmit?: boolean,
-  label?: string,
+    /**
+     * Group identifier string links dropdowns together into a menu (like macOS top menubar)
+     */
+    group?: string,
+    hasItems?: boolean,
+    isOpenOnMount?: boolean,
+    isSearchable?: boolean,
+    keepOpenOnSubmit?: boolean,
+    label?: string,
 
-  /**
-   * Only usable in conjunction with {isSearchable: true}; used as search input’s name
-   */
-  name?: string,
-  onClick?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
-  onMouseDown?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
-  onMouseUp?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
-  onSubmitItem?: (payload: Item) => void,
+    /**
+     * Only usable in conjunction with {isSearchable: true}; used as search input’s name
+     */
+    name?: string,
+    onClick?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
+    onMouseDown?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
+    onMouseUp?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
+    onSubmitItem?: (payload: Item) => void,
 
-  /**
-   * Only usable in conjunction with {isSearchable: true}; used as search input’s placeholder
-   */
-  placeholder?: string,
+    /**
+     * Only usable in conjunction with {isSearchable: true}; used as search input’s placeholder
+     */
+    placeholder?: string,
 
-  /**
-   * Only usable in conjunction with {isSearchable: true}; used as search input’s tabIndex
-   */
-  tabIndex?: number,
+    /**
+     * Only usable in conjunction with {isSearchable: true}; used as search input’s tabIndex
+     */
+    tabIndex?: number,
 
-  /**
-   * Used as search input’s value if props.isSearchable === true
-   * Used to determine if value has changed to avoid triggering onSubmitItem if not
-   */
-  value?: string,
+    /**
+     * Used as search input’s value if props.isSearchable === true
+     * Used to determine if value has changed to avoid triggering onSubmitItem if not
+     */
+    value?: string,
 |};
 declare var Dropdown: React.StatelessFunctionalComponent<Props>;
 declare export default typeof Dropdown;

package/dist/helpers.d.ts

@@ -1,33 +1,48 @@
-export declare const ITEM_SELECTOR = "[data-ukt-item], [data-ukt-value]";
+export declare const ITEM_SELECTOR = '[data-ukt-item], [data-ukt-value]';
 export declare const KEY_EVENT_ELEMENTS: Set<string>;
-export declare const getItemElements: (dropdownElement: HTMLElement | null) => NodeListOf<Element> | HTMLCollection | null;
-export declare const getActiveItemElement: (dropdownElement: HTMLElement | null) => HTMLElement | null;
-export declare const setActiveItem: ({ dropdownElement, element, index, indexAddend, isExactMatch, text, }: {
-    dropdownElement: HTMLElement;
-    element: HTMLElement;
-    index?: null | undefined;
-    indexAddend?: null | undefined;
-    isExactMatch?: null | undefined;
-    text?: null | undefined;
-} | {
-    dropdownElement: HTMLElement;
-    element?: null | undefined;
-    index: number;
-    indexAddend?: null | undefined;
-    isExactMatch?: null | undefined;
-    text?: null | undefined;
-} | {
-    dropdownElement: HTMLElement;
-    element?: null | undefined;
-    index?: null | undefined;
-    indexAddend: number;
-    isExactMatch?: null | undefined;
-    text?: null | undefined;
-} | {
-    dropdownElement: HTMLElement;
-    element?: null | undefined;
-    index?: null | undefined;
-    indexAddend?: null | undefined;
-    isExactMatch?: boolean | undefined;
-    text: string;
-}) => void;
+export declare const getItemElements: (
+    dropdownElement: HTMLElement | null,
+) => NodeListOf<Element> | HTMLCollection | null;
+export declare const getActiveItemElement: (
+    dropdownElement: HTMLElement | null,
+) => HTMLElement | null;
+export declare const setActiveItem: ({
+    dropdownElement,
+    element,
+    index,
+    indexAddend,
+    isExactMatch,
+    text,
+}:
+    | {
+          dropdownElement: HTMLElement;
+          element: HTMLElement;
+          index?: null | undefined;
+          indexAddend?: null | undefined;
+          isExactMatch?: null | undefined;
+          text?: null | undefined;
+      }
+    | {
+          dropdownElement: HTMLElement;
+          element?: null | undefined;
+          index: number;
+          indexAddend?: null | undefined;
+          isExactMatch?: null | undefined;
+          text?: null | undefined;
+      }
+    | {
+          dropdownElement: HTMLElement;
+          element?: null | undefined;
+          index?: null | undefined;
+          indexAddend: number;
+          isExactMatch?: null | undefined;
+          text?: null | undefined;
+      }
+    | {
+          dropdownElement: HTMLElement;
+          element?: null | undefined;
+          index?: null | undefined;
+          indexAddend?: null | undefined;
+          isExactMatch?: boolean | undefined;
+          text: string;
+      }) => void;

package/dist/helpers.js

@@ -3,20 +3,16 @@ import { BODY_SELECTOR } from './styles.js';
 export const ITEM_SELECTOR = `[data-ukt-item], [data-ukt-value]`;
 export const KEY_EVENT_ELEMENTS = new Set(['INPUT', 'TEXTAREA']);
 export const getItemElements = (dropdownElement) => {
-    if (!dropdownElement)
-        return null;
+    if (!dropdownElement) return null;
     const bodyElement = dropdownElement.querySelector(BODY_SELECTOR);
-    if (!bodyElement)
-        return null;
+    if (!bodyElement) return null;
     let items = bodyElement.querySelectorAll(ITEM_SELECTOR);
-    if (items.length)
-        return items;
+    if (items.length) return items;
     // If no items found via [data-ukt-item] or [data-ukt-value] selector,
     // use first instance of multiple children found
     items = bodyElement.children;
     while (items.length === 1) {
-        if (!items[0].children)
-            break;
+        if (!items[0].children) break;
         items = items[0].children;
     }
     // If unable to find an element with more than one child, treat direct child as items
@@ -26,8 +22,7 @@ export const getItemElements = (dropdownElement) => {
     return items;
 };
 export const getActiveItemElement = (dropdownElement) => {
-    if (!dropdownElement)
-        return null;
+    if (!dropdownElement) return null;
     return dropdownElement.querySelector('[data-ukt-active]');
 };
 const clearItemElementsState = (itemElements) => {
@@ -37,40 +32,45 @@ const clearItemElementsState = (itemElements) => {
         }
     });
 };
-export const setActiveItem = ({ dropdownElement, element, index, indexAddend, isExactMatch, text, }) => {
+export const setActiveItem = ({
+    dropdownElement,
+    element,
+    index,
+    indexAddend,
+    isExactMatch,
+    text,
+}) => {
     const items = getItemElements(dropdownElement);
-    if (!items)
-        return;
+    if (!items) return;
     const itemElements = Array.from(items);
-    if (!itemElements.length)
-        return;
+    if (!itemElements.length) return;
     const lastIndex = itemElements.length - 1;
-    const currentActiveIndex = itemElements.findIndex((itemElement) => itemElement.hasAttribute('data-ukt-active'));
+    const currentActiveIndex = itemElements.findIndex((itemElement) =>
+        itemElement.hasAttribute('data-ukt-active'),
+    );
     let nextActiveIndex = currentActiveIndex;
     if (typeof index === 'number') {
         // Negative index means count back from the end
         nextActiveIndex = index < 0 ? itemElements.length + index : index;
     }
     if (element) {
-        nextActiveIndex = itemElements.findIndex((itemElement) => itemElement === element);
-    }
-    else if (typeof indexAddend === 'number') {
+        nextActiveIndex = itemElements.findIndex(
+            (itemElement) => itemElement === element,
+        );
+    } else if (typeof indexAddend === 'number') {
         // If there’s no currentActiveIndex and we are handling -1, start at lastIndex
         if (currentActiveIndex === -1 && indexAddend === -1) {
             nextActiveIndex = lastIndex;
-        }
-        else {
+        } else {
             nextActiveIndex += indexAddend;
         }
         // Keep it within the bounds of the items list
         if (nextActiveIndex < 0) {
             nextActiveIndex = 0;
-        }
-        else if (nextActiveIndex > lastIndex) {
+        } else if (nextActiveIndex > lastIndex) {
             nextActiveIndex = lastIndex;
         }
-    }
-    else if (typeof text === 'string') {
+    } else if (typeof text === 'string') {
         // If text is empty, clear existing active items and early return
         if (!text) {
             clearItemElementsState(itemElements);
@@ -79,19 +79,19 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
         const itemTexts = itemElements.map((itemElement) => itemElement.innerText);
         if (isExactMatch) {
             const textToCompare = text.toLowerCase();
-            nextActiveIndex = itemTexts.findIndex((itemText) => itemText.toLowerCase().startsWith(textToCompare));
+            nextActiveIndex = itemTexts.findIndex((itemText) =>
+                itemText.toLowerCase().startsWith(textToCompare),
+            );
             // If isExactMatch is required and no exact match was found, clear active items
             if (nextActiveIndex === -1) {
                 clearItemElementsState(itemElements);
             }
-        }
-        else {
+        } else {
             const bestMatch = getBestMatch({ items: itemTexts, text });
             nextActiveIndex = itemTexts.findIndex((text) => text === bestMatch);
         }
     }
-    if (nextActiveIndex === -1 || nextActiveIndex === currentActiveIndex)
-        return;
+    if (nextActiveIndex === -1 || nextActiveIndex === currentActiveIndex) return;
     // Clear any existing active dropdown body item state
     clearItemElementsState(itemElements);
     const nextActiveItem = items[nextActiveIndex];
@@ -101,11 +101,11 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
         let { parentElement } = nextActiveItem;
         let scrollableParent = null;
         while (!scrollableParent && parentElement && parentElement !== dropdownElement) {
-            const isScrollable = parentElement.scrollHeight > parentElement.clientHeight + 15;
+            const isScrollable =
+                parentElement.scrollHeight > parentElement.clientHeight + 15;
             if (isScrollable) {
                 scrollableParent = parentElement;
-            }
-            else {
+            } else {
                 parentElement = parentElement.parentElement;
             }
         }
@@ -119,8 +119,7 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
                 // Item isn’t fully visible; adjust scrollTop to put item within closest edge
                 if (isAboveTop) {
                     scrollTop -= parentRect.top - itemRect.top;
-                }
-                else {
+                } else {
                     scrollTop += itemRect.bottom - parentRect.bottom;
                 }
                 scrollableParent.scrollTop = scrollTop;
@@ -128,4 +127,4 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
         }
     }
 };
-//# sourceMappingURL=helpers.js.map
+//# sourceMappingURL=helpers.js.map

package/dist/helpers.js.flow

@@ -1,50 +1,50 @@
 /**
  * Flowtype definitions for helpers
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.0
+ * Flowgen v1.20.1
  * @flow
  */
 
-declare export var ITEM_SELECTOR: "[data-ukt-item], [data-ukt-value]";
+declare export var ITEM_SELECTOR: '[data-ukt-item], [data-ukt-value]';
 declare export var KEY_EVENT_ELEMENTS: Set<string>;
 declare export var getItemElements: (
-  dropdownElement: HTMLElement | null
+    dropdownElement: HTMLElement | null,
 ) => NodeListOf<Element> | HTMLCollection | null;
 declare export var getActiveItemElement: (
-  dropdownElement: HTMLElement | null
+    dropdownElement: HTMLElement | null,
 ) => HTMLElement | null;
 declare export var setActiveItem: (
-  x:
-    | {|
-        dropdownElement: HTMLElement,
-        element: HTMLElement,
-        index?: null | void,
-        indexAddend?: null | void,
-        isExactMatch?: null | void,
-        text?: null | void,
-      |}
-    | {|
-        dropdownElement: HTMLElement,
-        element?: null | void,
-        index: number,
-        indexAddend?: null | void,
-        isExactMatch?: null | void,
-        text?: null | void,
-      |}
-    | {|
-        dropdownElement: HTMLElement,
-        element?: null | void,
-        index?: null | void,
-        indexAddend: number,
-        isExactMatch?: null | void,
-        text?: null | void,
-      |}
-    | {|
-        dropdownElement: HTMLElement,
-        element?: null | void,
-        index?: null | void,
-        indexAddend?: null | void,
-        isExactMatch?: boolean | void,
-        text: string,
-      |}
+    x:
+        | {|
+              dropdownElement: HTMLElement,
+              element: HTMLElement,
+              index?: null | void,
+              indexAddend?: null | void,
+              isExactMatch?: null | void,
+              text?: null | void,
+          |}
+        | {|
+              dropdownElement: HTMLElement,
+              element?: null | void,
+              index: number,
+              indexAddend?: null | void,
+              isExactMatch?: null | void,
+              text?: null | void,
+          |}
+        | {|
+              dropdownElement: HTMLElement,
+              element?: null | void,
+              index?: null | void,
+              indexAddend: number,
+              isExactMatch?: null | void,
+              text?: null | void,
+          |}
+        | {|
+              dropdownElement: HTMLElement,
+              element?: null | void,
+              index?: null | void,
+              indexAddend?: null | void,
+              isExactMatch?: boolean | void,
+              text: string,
+          |},
 ) => void;

package/dist/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const ROOT_CLASS_NAME = "uktdropdown";
+export declare const ROOT_CLASS_NAME = 'uktdropdown';
 export declare const ROOT_SELECTOR: string;
 export declare const BODY_CLASS_NAME: string;
 export declare const LABEL_CLASS_NAME: string;

package/dist/styles.js

@@ -77,4 +77,4 @@ ${BODY_SELECTOR} [data-ukt-active] {
   color: var(--uktdd-body-color-hover);
 }
 `;
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.flow

@@ -1,11 +1,11 @@
 /**
  * Flowtype definitions for styles
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.0
+ * Flowgen v1.20.1
  * @flow
  */
 
-declare export var ROOT_CLASS_NAME: "uktdropdown";
+declare export var ROOT_CLASS_NAME: 'uktdropdown';
 declare export var ROOT_SELECTOR: string;
 declare export var BODY_CLASS_NAME: string;
 declare export var LABEL_CLASS_NAME: string;

package/package.json

@@ -1,6 +1,23 @@
 {
     "name": "@acusti/dropdown",
-    "version": "0.22.0",
+    "version": "0.24.0",
+    "description": "React component that renders a dropdown with a trigger and supports searching, keyboard access, and more",
+    "keywords": [
+        "react",
+        "react-component",
+        "dropdown",
+        "menu",
+        "combobox",
+        "search",
+        "typeahead",
+        "a11y",
+        "accessibility",
+        "key-navigation",
+        "ssr",
+        "typescript",
+        "ts",
+        "flow"
+    ],
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/Dropdown.js",
@@ -12,7 +29,8 @@
     ],
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/acusti/uikit.git"
+        "url": "https://github.com/acusti/uikit.git",
+        "directory": "packages/dropdown"
     },
     "author": "andrew patton <andrew@acusti.ca> (https://www.acusti.ca)",
     "license": "Unlicense",
@@ -21,15 +39,15 @@
     },
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/dropdown#readme",
     "devDependencies": {
-        "@types/react": "^18.0.15",
-        "typescript": "^4.8.4"
+        "@types/react": "^18.0.25",
+        "typescript": "^4.9.3"
     },
     "dependencies": {
-        "@acusti/input-text": "^0.12.0",
-        "@acusti/matchmaking": "^0.3.0",
-        "@acusti/styling": "^0.5.3",
-        "@acusti/use-is-out-of-bounds": "^0.5.0",
-        "clsx": "^1.1.1"
+        "@acusti/input-text": "^1.0.1",
+        "@acusti/matchmaking": "^0.4.0",
+        "@acusti/styling": "^0.6.0",
+        "@acusti/use-is-out-of-bounds": "^0.6.0",
+        "clsx": "^1.2.1"
     },
     "peerDependencies": {
         "react": "^16.8 || ^17 || ^18",