@acusti/dropdown 0.38.7 → 0.40.0

package/dist/Dropdown.js.flow

@@ -5,74 +5,74 @@
  * @flow
  */
 
-import * as React from 'react';
+import * as React from "react";
 declare type ChildrenTuple = [React.Node, React.Node];
 export type Item = {|
-    element: HTMLElement | null,
-    event: Event | SyntheticEvent<HTMLElement>,
-    label: string,
-    value: string,
+  element: HTMLElement | null,
+  event: Event | SyntheticEvent<HTMLElement>,
+  label: string,
+  value: string,
 |};
 export type Props = {|
-    /**
-     * Boolean indicating if the user can submit a value not already in the
-     * dropdown.
-     */
-    allowCreate?: boolean,
+  /**
+   * Boolean indicating if the user can submit a value not already in the
+   * dropdown.
+   */
+  allowCreate?: boolean,
 
-    /**
-     * 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 or exactly two renderable children.
-     */
-    children: React.Node | ChildrenTuple,
-    className?: string,
-    disabled?: boolean,
+  /**
+   * Can take a single React element or exactly two renderable children.
+   */
+  children: React.Node | ChildrenTuple,
+  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,
-    onClose?: () => mixed,
-    onMouseDown?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
-    onMouseUp?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
-    onOpen?: () => 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,
+  onClose?: () => mixed,
+  onMouseDown?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
+  onMouseUp?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
+  onOpen?: () => mixed,
+  onSubmitItem?: (payload: Item) => void,
 
-    /**
-     * Only usable in conjunction with {isSearchable: true}.
-     * Used as search input’s placeholder.
-     */
-    placeholder?: string,
-    style?: {| [string]: string | number |},
+  /**
+   * Only usable in conjunction with {isSearchable: true}.
+   * Used as search input’s placeholder.
+   */
+  placeholder?: string,
+  style?: {| [string]: string | number |},
 
-    /**
-     * 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 export default function Dropdown(x: Props): React.Node;

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/helpers.js.flow

@@ -5,45 +5,45 @@
  * @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 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,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