@acusti/dropdown 0.46.0 → 0.47.0

package/src/helpers.ts

@@ -1,179 +0,0 @@
-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: HTMLElement | null) => {
-    if (!dropdownElement) return null;
-
-    const bodyElement = dropdownElement.querySelector(BODY_SELECTOR);
-    if (!bodyElement) return null;
-
-    let items: HTMLCollection | NodeListOf<Element> =
-        bodyElement.querySelectorAll(ITEM_SELECTOR);
-
-    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;
-        items = items[0].children;
-    }
-    // If unable to find an element with more than one child, treat direct child as items
-    if (items.length === 1) {
-        items = bodyElement.children;
-    }
-    return items;
-};
-
-export const getActiveItemElement = (dropdownElement: HTMLElement | null) => {
-    if (!dropdownElement) return null;
-    return dropdownElement.querySelector('[data-ukt-active]') as HTMLElement | null;
-};
-
-const clearItemElementsState = (itemElements: Array<HTMLElement>) => {
-    itemElements.forEach((itemElement) => {
-        if (itemElement.hasAttribute('data-ukt-active')) {
-            delete itemElement.dataset.uktActive;
-        }
-    });
-};
-
-export 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;
-      }) => {
-    const items = getItemElements(dropdownElement);
-    if (!items) return;
-
-    const itemElements = Array.from(items) as Array<HTMLElement>;
-    if (!itemElements.length) return;
-
-    const lastIndex = itemElements.length - 1;
-    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') {
-        // If there’s no currentActiveIndex and we are handling -1, start at lastIndex
-        if (currentActiveIndex === -1 && indexAddend === -1) {
-            nextActiveIndex = lastIndex;
-        } else {
-            nextActiveIndex += indexAddend;
-        }
-        // Keep it within the bounds of the items list
-        if (nextActiveIndex < 0) {
-            nextActiveIndex = 0;
-        } else if (nextActiveIndex > lastIndex) {
-            nextActiveIndex = lastIndex;
-        }
-    } else if (typeof text === 'string') {
-        // If text is empty, clear existing active items and early return
-        if (!text) {
-            clearItemElementsState(itemElements);
-            return;
-        }
-
-        const itemTexts = itemElements.map((itemElement) => itemElement.innerText);
-        if (isExactMatch) {
-            const textToCompare = text.toLowerCase();
-            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 {
-            const bestMatch = getBestMatch({ items: itemTexts, text });
-            nextActiveIndex = itemTexts.findIndex((itemText) => itemText === bestMatch);
-        }
-    }
-
-    if (nextActiveIndex === -1 || nextActiveIndex === currentActiveIndex) return;
-
-    // Clear any existing active dropdown body item state
-    clearItemElementsState(itemElements);
-
-    const nextActiveItem = items[nextActiveIndex];
-    if (nextActiveItem != null) {
-        nextActiveItem.setAttribute('data-ukt-active', '');
-        // Find closest scrollable parent and ensure that next active item is visible
-        let { parentElement } = nextActiveItem;
-        let scrollableParent = null;
-        while (!scrollableParent && parentElement && parentElement !== dropdownElement) {
-            const isScrollable =
-                parentElement.scrollHeight > parentElement.clientHeight + 15;
-            if (isScrollable) {
-                scrollableParent = parentElement;
-            } else {
-                parentElement = parentElement.parentElement;
-            }
-        }
-
-        if (scrollableParent) {
-            const parentRect = scrollableParent.getBoundingClientRect();
-            const itemRect = nextActiveItem.getBoundingClientRect();
-            const isAboveTop = itemRect.top < parentRect.top;
-            const isBelowBottom = itemRect.bottom > parentRect.bottom;
-            if (isAboveTop || isBelowBottom) {
-                let { scrollTop } = scrollableParent;
-                // Item isn’t fully visible; adjust scrollTop to put item within closest edge
-                if (isAboveTop) {
-                    scrollTop -= parentRect.top - itemRect.top;
-                } else {
-                    scrollTop += itemRect.bottom - parentRect.bottom;
-                }
-                scrollableParent.scrollTop = scrollTop;
-            }
-        }
-    }
-};

package/src/styles.ts

@@ -1,90 +0,0 @@
-import { SYSTEM_UI_FONT } from '@acusti/styling';
-
-export const ROOT_CLASS_NAME = 'uktdropdown';
-export const ROOT_SELECTOR = `.${ROOT_CLASS_NAME}`;
-
-export const BODY_CLASS_NAME = `${ROOT_CLASS_NAME}-body`;
-export const LABEL_CLASS_NAME = `${ROOT_CLASS_NAME}-label`;
-export const LABEL_TEXT_CLASS_NAME = `${ROOT_CLASS_NAME}-label-text`;
-export const TRIGGER_CLASS_NAME = `${ROOT_CLASS_NAME}-trigger`;
-
-export const BODY_SELECTOR = `.${BODY_CLASS_NAME}`;
-export const LABEL_SELECTOR = `.${LABEL_CLASS_NAME}`;
-export const LABEL_TEXT_SELECTOR = `.${LABEL_TEXT_CLASS_NAME}`;
-export const TRIGGER_SELECTOR = `.${TRIGGER_CLASS_NAME}`;
-
-export const BODY_MAX_HEIGHT_VAR = '--uktdd-body-max-height';
-export const BODY_MAX_WIDTH_VAR = '--uktdd-body-max-width';
-
-export const STYLES = `
-:root {
-  --uktdd-font-family: ${SYSTEM_UI_FONT};
-  --uktdd-body-bg-color: #fff;
-  --uktdd-body-bg-color-hover: rgb(105,162,249);
-  --uktdd-body-color-hover: #fff;
-  --uktdd-body-buffer: 10px;
-  ${BODY_MAX_HEIGHT_VAR}: calc(100vh - var(--uktdd-body-buffer));
-  ${BODY_MAX_WIDTH_VAR}: calc(100vw - var(--uktdd-body-buffer));
-  --uktdd-body-pad-bottom: 9px;
-  --uktdd-body-pad-left: 12px;
-  --uktdd-body-pad-right: 12px;
-  --uktdd-body-pad-top: 9px;
-  --uktdd-label-pad-right: 10px;
-}
-${ROOT_SELECTOR},
-${TRIGGER_SELECTOR} {
-  font-family: var(--uktdd-font-family);
-}
-${ROOT_SELECTOR} {
-  position: relative;
-  display: inline-block;
-}
-${ROOT_SELECTOR}.disabled {
-  pointer-events: none;
-}
-${ROOT_SELECTOR} > * {
-  cursor: default;
-}
-${LABEL_SELECTOR} {
-  display: flex;
-}
-${LABEL_TEXT_SELECTOR} {
-  padding-right: var(--uktdd-label-pad-right);
-}
-${BODY_SELECTOR} {
-  box-sizing: border-box;
-  position: absolute;
-  top: 100%;
-  max-height: var(${BODY_MAX_HEIGHT_VAR});
-  min-height: 50px;
-  max-width: var(${BODY_MAX_WIDTH_VAR});
-  min-width: 100%;
-  overflow: auto;
-  z-index: 2;
-  padding: var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);
-  background-color: var(--uktdd-body-bg-color);
-  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
-}
-${BODY_SELECTOR}.calculating-position {
-  visibility: hidden;
-}
-${BODY_SELECTOR}.out-of-bounds-bottom:not(.out-of-bounds-top) {
-  top: auto;
-  bottom: 100%;
-}
-${BODY_SELECTOR}.out-of-bounds-right:not(.out-of-bounds-left) {
-  left: auto;
-  right: 0px;
-}
-${LABEL_SELECTOR} + ${BODY_SELECTOR} {
-  left: auto;
-  right: 0;
-}
-${BODY_SELECTOR}.has-items {
-  user-select: none;
-}
-${BODY_SELECTOR} [data-ukt-active] {
-  background-color: var(--uktdd-body-bg-color-hover);
-  color: var(--uktdd-body-color-hover);
-}
-`;