@acusti/dropdown 0.44.0 → 0.44.1

package/dist/Dropdown.js.flow

@@ -5,74 +5,74 @@
  * @flow
  */
 
-import * as React from "react";
-declare type ChildrenTuple = [React.Node, React.Node];
+import * as React from 'react';
 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: ChildrenTuple | 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,
-  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 type ChildrenTuple = [React.Node, React.Node];
 declare export default function Dropdown(x: Props): React.Node;

package/dist/Dropdown.test.js

@@ -8,18 +8,26 @@ afterEach(cleanup);
 describe('@acusti/dropdown', () => {
     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);
@@ -27,22 +35,30 @@ describe('@acusti/dropdown', () => {
     });
     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);
@@ -54,22 +70,30 @@ describe('@acusti/dropdown', () => {
         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);
@@ -88,8 +112,17 @@ describe('@acusti/dropdown', () => {
         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);
@@ -99,4 +132,4 @@ describe('@acusti/dropdown', () => {
         expect(screen.queryByTestId('dropdown-body')).toBe(null);
     });
 });
-//# sourceMappingURL=Dropdown.test.js.map
+//# sourceMappingURL=Dropdown.test.js.map

package/dist/helpers.d.ts

@@ -1,32 +1,47 @@
-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,
+) => HTMLCollection | NodeListOf<Element> | 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;
+          indexAddend?: null;
+          isExactMatch?: null;
+          text?: null;
+      }
+    | {
+          dropdownElement: HTMLElement;
+          element?: null;
+          index: number;
+          indexAddend?: null;
+          isExactMatch?: null;
+          text?: null;
+      }
+    | {
+          dropdownElement: HTMLElement;
+          element?: null;
+          index?: null;
+          indexAddend: number;
+          isExactMatch?: null;
+          text?: null;
+      }
+    | {
+          dropdownElement: HTMLElement;
+          element?: null;
+          index?: null;
+          indexAddend?: null;
+          isExactMatch?: boolean;
+          text: string;
+      }) => void;

package/dist/helpers.js

@@ -2,20 +2,16 @@ 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 == null)
-            break;
+        if (items[0].children == null) break;
         items = items[0].children;
     }
     // If unable to find an element with more than one child, treat direct child as items
@@ -25,8 +21,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) => {
@@ -36,40 +31,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);
@@ -78,19 +78,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((itemText) => itemText === 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];
@@ -100,11 +100,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;
             }
         }
@@ -118,8 +118,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;
@@ -127,4 +126,4 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
         }
     }
 };
-//# 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
-) => NodeListOf<Element> | HTMLCollection | null;
+    dropdownElement: HTMLElement | null,
+) => HTMLCollection | NodeListOf<Element> | 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,
+              indexAddend?: null,
+              isExactMatch?: null,
+              text?: null,
+          |}
+        | {|
+              dropdownElement: HTMLElement,
+              element?: null,
+              index: number,
+              indexAddend?: null,
+              isExactMatch?: null,
+              text?: null,
+          |}
+        | {|
+              dropdownElement: HTMLElement,
+              element?: null,
+              index?: null,
+              indexAddend: number,
+              isExactMatch?: null,
+              text?: null,
+          |}
+        | {|
+              dropdownElement: HTMLElement,
+              element?: null,
+              index?: null,
+              indexAddend?: null,
+              isExactMatch?: boolean,
+              text: string,
+          |},
 ) => void;

package/dist/styles.d.ts

@@ -1,13 +1,14 @@
-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';