@acusti/dropdown 0.38.4 → 0.38.6

package/dist/Dropdown.test.js

@@ -8,26 +8,18 @@ afterEach(cleanup);
 describe('Dropdown.js', () => {
     it('renders its contents as a dropdown menu with an empty button to trigger it when it’s rendered with a single child', async () => {
         const user = userEvent.setup();
-        render(
-            React.createElement(
-                Dropdown,
-                null,
-                React.createElement(
-                    'ul',
-                    { 'data-testid': 'dropdown-list' },
-                    React.createElement('li', null, '0px'),
-                    React.createElement('li', null, '4px'),
-                    React.createElement('li', null, '9px'),
-                    React.createElement('li', null, '18px'),
-                    React.createElement('li', null, '36px'),
-                    React.createElement('li', null, '54px'),
-                    React.createElement('li', null, '72px'),
-                    React.createElement('li', null, '144px'),
-                    React.createElement('li', null, '167px'),
-                    React.createElement('li', null, '198px'),
-                ),
-            ),
-        );
+        render(React.createElement(Dropdown, null,
+            React.createElement("ul", { "data-testid": "dropdown-list" },
+                React.createElement("li", null, "0px"),
+                React.createElement("li", null, "4px"),
+                React.createElement("li", null, "9px"),
+                React.createElement("li", null, "18px"),
+                React.createElement("li", null, "36px"),
+                React.createElement("li", null, "54px"),
+                React.createElement("li", null, "72px"),
+                React.createElement("li", null, "144px"),
+                React.createElement("li", null, "167px"),
+                React.createElement("li", null, "198px"))));
         const trigger = screen.getByRole('button');
         expect(trigger.innerHTML).toBe('');
         await user.click(trigger);
@@ -35,30 +27,22 @@ describe('Dropdown.js', () => {
     });
     it('renders the first child as a trigger and the second child as a dropdown when given two children', async () => {
         const user = userEvent.setup();
-        render(
-            React.createElement(
-                Dropdown,
-                null,
-                'File',
-                React.createElement(
-                    'ul',
-                    { 'data-testid': 'file-menu' },
-                    React.createElement('li', null, 'New Window'),
-                    React.createElement('li', null, 'New Private Window'),
-                    React.createElement('li', null, 'New Tab'),
-                    React.createElement('li', null, 'New Empty Tab Group'),
-                    React.createElement('li', null, 'Open File\u2026'),
-                    React.createElement('li', null, 'Open Location\u2026'),
-                    React.createElement('li', { className: 'separator' }),
-                    React.createElement('li', null, 'Close Window'),
-                    React.createElement('li', null, 'Close All Window'),
-                    React.createElement('li', null, 'Close Tab'),
-                    React.createElement('li', null, 'Save As\u2026'),
-                    React.createElement('li', { className: 'separator' }),
-                    React.createElement('li', null, 'Print\u2026'),
-                ),
-            ),
-        );
+        render(React.createElement(Dropdown, null,
+            "File",
+            React.createElement("ul", { "data-testid": "file-menu" },
+                React.createElement("li", null, "New Window"),
+                React.createElement("li", null, "New Private Window"),
+                React.createElement("li", null, "New Tab"),
+                React.createElement("li", null, "New Empty Tab Group"),
+                React.createElement("li", null, "Open File\u2026"),
+                React.createElement("li", null, "Open Location\u2026"),
+                React.createElement("li", { className: "separator" }),
+                React.createElement("li", null, "Close Window"),
+                React.createElement("li", null, "Close All Window"),
+                React.createElement("li", null, "Close Tab"),
+                React.createElement("li", null, "Save As\u2026"),
+                React.createElement("li", { className: "separator" }),
+                React.createElement("li", null, "Print\u2026"))));
         const trigger = screen.getByRole('button');
         expect(trigger.innerHTML).toBe('File');
         await user.click(trigger);
@@ -70,30 +54,22 @@ describe('Dropdown.js', () => {
         let openedCount = 0;
         const handleOpen = () => openedCount++;
         const user = userEvent.setup();
-        render(
-            React.createElement(
-                Dropdown,
-                { onClose: handleClose, onOpen: handleOpen },
-                'File',
-                React.createElement(
-                    'ul',
-                    { 'data-testid': 'file-menu' },
-                    React.createElement('li', null, 'New Window'),
-                    React.createElement('li', null, 'New Private Window'),
-                    React.createElement('li', null, 'New Tab'),
-                    React.createElement('li', null, 'New Empty Tab Group'),
-                    React.createElement('li', null, 'Open File\u2026'),
-                    React.createElement('li', null, 'Open Location\u2026'),
-                    React.createElement('li', { className: 'separator' }),
-                    React.createElement('li', null, 'Close Window'),
-                    React.createElement('li', null, 'Close All Window'),
-                    React.createElement('li', null, 'Close Tab'),
-                    React.createElement('li', null, 'Save As\u2026'),
-                    React.createElement('li', { className: 'separator' }),
-                    React.createElement('li', null, 'Print\u2026'),
-                ),
-            ),
-        );
+        render(React.createElement(Dropdown, { onClose: handleClose, onOpen: handleOpen },
+            "File",
+            React.createElement("ul", { "data-testid": "file-menu" },
+                React.createElement("li", null, "New Window"),
+                React.createElement("li", null, "New Private Window"),
+                React.createElement("li", null, "New Tab"),
+                React.createElement("li", null, "New Empty Tab Group"),
+                React.createElement("li", null, "Open File\u2026"),
+                React.createElement("li", null, "Open Location\u2026"),
+                React.createElement("li", { className: "separator" }),
+                React.createElement("li", null, "Close Window"),
+                React.createElement("li", null, "Close All Window"),
+                React.createElement("li", null, "Close Tab"),
+                React.createElement("li", null, "Save As\u2026"),
+                React.createElement("li", { className: "separator" }),
+                React.createElement("li", null, "Print\u2026"))));
         const trigger = screen.getByRole('button');
         expect(closedCount).toBe(0);
         expect(openedCount).toBe(0);
@@ -112,17 +88,8 @@ describe('Dropdown.js', () => {
         let openedCount = 0;
         const handleOpen = () => openedCount++;
         const user = userEvent.setup();
-        render(
-            React.createElement(
-                Dropdown,
-                { isOpenOnMount: true, onClose: handleClose, onOpen: handleOpen },
-                React.createElement(
-                    'p',
-                    { 'data-testid': 'dropdown-body' },
-                    'this is the dropdown contents',
-                ),
-            ),
-        );
+        render(React.createElement(Dropdown, { isOpenOnMount: true, onClose: handleClose, onOpen: handleOpen },
+            React.createElement("p", { "data-testid": "dropdown-body" }, "this is the dropdown contents")));
         const trigger = screen.getByRole('button');
         expect(screen.getByTestId('dropdown-body')).toBeTruthy();
         expect(openedCount).toBe(1);
@@ -132,4 +99,4 @@ describe('Dropdown.js', () => {
         expect(screen.queryByTestId('dropdown-body')).toBe(null);
     });
 });
-//# sourceMappingURL=Dropdown.test.js.map
+//# sourceMappingURL=Dropdown.test.js.map

package/dist/helpers.d.ts

@@ -1,47 +1,32 @@
-export declare const ITEM_SELECTOR = '[data-ukt-item], [data-ukt-value]';
-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 ITEM_SELECTOR = "[data-ukt-item], [data-ukt-value]";
+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

@@ -2,16 +2,20 @@ import { getBestMatch } from '@acusti/matchmaking';
 import { BODY_SELECTOR } from './styles.js';
 export const ITEM_SELECTOR = `[data-ukt-item], [data-ukt-value]`;
 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
@@ -21,7 +25,8 @@ export const getItemElements = (dropdownElement) => {
     return items;
 };
 export const getActiveItemElement = (dropdownElement) => {
-    if (!dropdownElement) return null;
+    if (!dropdownElement)
+        return null;
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     return dropdownElement.querySelector('[data-ukt-active]');
 };
@@ -32,45 +37,40 @@ 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 = ({
         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 = ({
         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,7 +119,8 @@ export const setActiveItem = ({
                 // 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;
@@ -127,4 +128,4 @@ export const setActiveItem = ({
         }
     }
 };
-//# sourceMappingURL=helpers.js.map
+//# sourceMappingURL=helpers.js.map

package/dist/styles.d.ts

@@ -1,14 +1,13 @@
-export declare const ROOT_CLASS_NAME = 'uktdropdown';
-export declare const ROOT_SELECTOR = '.uktdropdown';
-export declare const BODY_CLASS_NAME = 'uktdropdown-body';
-export declare const LABEL_CLASS_NAME = 'uktdropdown-label';
-export declare const LABEL_TEXT_CLASS_NAME = 'uktdropdown-label-text';
-export declare const TRIGGER_CLASS_NAME = 'uktdropdown-trigger';
-export declare const BODY_SELECTOR = '.uktdropdown-body';
-export declare const LABEL_SELECTOR = '.uktdropdown-label';
-export declare const LABEL_TEXT_SELECTOR = '.uktdropdown-label-text';
-export declare const TRIGGER_SELECTOR = '.uktdropdown-trigger';
-export declare const BODY_MAX_HEIGHT_VAR = '--uktdd-body-max-height';
-export declare const BODY_MAX_WIDTH_VAR = '--uktdd-body-max-width';
-export declare const STYLES =
-    '\n:root {\n  --uktdd-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;\n  --uktdd-body-bg-color: #fff;\n  --uktdd-body-bg-color-hover: rgb(105,162,249);\n  --uktdd-body-color-hover: #fff;\n  --uktdd-body-buffer: 10px;\n  --uktdd-body-max-height: calc(100vh - var(--uktdd-body-buffer));\n  --uktdd-body-max-width: calc(100vw - var(--uktdd-body-buffer));\n  --uktdd-body-pad-bottom: 9px;\n  --uktdd-body-pad-left: 12px;\n  --uktdd-body-pad-right: 12px;\n  --uktdd-body-pad-top: 9px;\n  --uktdd-label-pad-right: 10px;\n}\n.uktdropdown,\n.uktdropdown-trigger {\n  font-family: var(--uktdd-font-family);\n}\n.uktdropdown {\n  position: relative;\n  display: inline-block;\n}\n.uktdropdown.disabled {\n  pointer-events: none;\n}\n.uktdropdown > * {\n  cursor: default;\n}\n.uktdropdown-label {\n  display: flex;\n}\n.uktdropdown-label-text {\n  padding-right: var(--uktdd-label-pad-right);\n}\n.uktdropdown-body {\n  box-sizing: border-box;\n  position: absolute;\n  top: 100%;\n  max-height: var(--uktdd-body-max-height);\n  min-height: 50px;\n  max-width: var(--uktdd-body-max-width);\n  min-width: 100%;\n  overflow: auto;\n  z-index: 2;\n  padding: var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);\n  background-color: var(--uktdd-body-bg-color);\n  box-shadow: 0 8px 18px rgba(0,0,0,0.25);\n}\n.uktdropdown-body.calculating-position {\n  visibility: hidden;\n}\n.uktdropdown-body.out-of-bounds-bottom:not(.out-of-bounds-top) {\n  top: auto;\n  bottom: 100%;\n}\n.uktdropdown-body.out-of-bounds-right:not(.out-of-bounds-left) {\n  left: auto;\n  right: 0px;\n}\n.uktdropdown-label + .uktdropdown-body {\n  left: auto;\n  right: 0;\n}\n.uktdropdown-body.has-items {\n  user-select: none;\n}\n.uktdropdown-body [data-ukt-active] {\n  background-color: var(--uktdd-body-bg-color-hover);\n  color: var(--uktdd-body-color-hover);\n}\n';
+export declare const ROOT_CLASS_NAME = "uktdropdown";
+export declare const ROOT_SELECTOR = ".uktdropdown";
+export declare const BODY_CLASS_NAME = "uktdropdown-body";
+export declare const LABEL_CLASS_NAME = "uktdropdown-label";
+export declare const LABEL_TEXT_CLASS_NAME = "uktdropdown-label-text";
+export declare const TRIGGER_CLASS_NAME = "uktdropdown-trigger";
+export declare const BODY_SELECTOR = ".uktdropdown-body";
+export declare const LABEL_SELECTOR = ".uktdropdown-label";
+export declare const LABEL_TEXT_SELECTOR = ".uktdropdown-label-text";
+export declare const TRIGGER_SELECTOR = ".uktdropdown-trigger";
+export declare const BODY_MAX_HEIGHT_VAR = "--uktdd-body-max-height";
+export declare const BODY_MAX_WIDTH_VAR = "--uktdd-body-max-width";
+export declare const STYLES = "\n:root {\n  --uktdd-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n  --uktdd-body-bg-color: #fff;\n  --uktdd-body-bg-color-hover: rgb(105,162,249);\n  --uktdd-body-color-hover: #fff;\n  --uktdd-body-buffer: 10px;\n  --uktdd-body-max-height: calc(100vh - var(--uktdd-body-buffer));\n  --uktdd-body-max-width: calc(100vw - var(--uktdd-body-buffer));\n  --uktdd-body-pad-bottom: 9px;\n  --uktdd-body-pad-left: 12px;\n  --uktdd-body-pad-right: 12px;\n  --uktdd-body-pad-top: 9px;\n  --uktdd-label-pad-right: 10px;\n}\n.uktdropdown,\n.uktdropdown-trigger {\n  font-family: var(--uktdd-font-family);\n}\n.uktdropdown {\n  position: relative;\n  display: inline-block;\n}\n.uktdropdown.disabled {\n  pointer-events: none;\n}\n.uktdropdown > * {\n  cursor: default;\n}\n.uktdropdown-label {\n  display: flex;\n}\n.uktdropdown-label-text {\n  padding-right: var(--uktdd-label-pad-right);\n}\n.uktdropdown-body {\n  box-sizing: border-box;\n  position: absolute;\n  top: 100%;\n  max-height: var(--uktdd-body-max-height);\n  min-height: 50px;\n  max-width: var(--uktdd-body-max-width);\n  min-width: 100%;\n  overflow: auto;\n  z-index: 2;\n  padding: var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);\n  background-color: var(--uktdd-body-bg-color);\n  box-shadow: 0 8px 18px rgba(0,0,0,0.25);\n}\n.uktdropdown-body.calculating-position {\n  visibility: hidden;\n}\n.uktdropdown-body.out-of-bounds-bottom:not(.out-of-bounds-top) {\n  top: auto;\n  bottom: 100%;\n}\n.uktdropdown-body.out-of-bounds-right:not(.out-of-bounds-left) {\n  left: auto;\n  right: 0px;\n}\n.uktdropdown-label + .uktdropdown-body {\n  left: auto;\n  right: 0;\n}\n.uktdropdown-body.has-items {\n  user-select: none;\n}\n.uktdropdown-body [data-ukt-active] {\n  background-color: var(--uktdd-body-bg-color-hover);\n  color: var(--uktdd-body-color-hover);\n}\n";

package/dist/styles.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/dropdown",
-    "version": "0.38.4",
+    "version": "0.38.6",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/Dropdown.js",
@@ -53,7 +53,7 @@
         "vitest": "^1.1.0"
     },
     "dependencies": {
-        "@acusti/input-text": "^1.5.3",
+        "@acusti/input-text": "^1.6.1",
         "@acusti/matchmaking": "^0.6.1",
         "@acusti/styling": "^0.7.2",
         "@acusti/use-is-out-of-bounds": "^0.9.0",