@vuu-ui/vuu-ui-controls 0.0.26

package/esm/list/List.js

@@ -0,0 +1,315 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useCallback, createElement, isValidElement, cloneElement } from 'react';
+import { useId } from '@vuu-ui/vuu-utils';
+import { useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import '../common-hooks/collectionProvider.js';
+import { itemToString } from '../common-hooks/itemToString.js';
+import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
+import '../common-hooks/use-resize-observer.js';
+import './common-hooks/keyUtils.js';
+import { useImperativeScrollingAPI } from './common-hooks/useImperativeScrollingAPI.js';
+import { LIST_FOCUS_VISIBLE } from './common-hooks/useKeyboardNavigation.js';
+import { isSelected } from './common-hooks/utils/isSelected.js';
+import { ListItemProxy, ListItem } from './ListItem.js';
+import { useList } from './useList.js';
+import { useListHeight } from './useListHeight.js';
+import { useScrollPosition } from './useScrollPosition.js';
+import { MeasuredContainer } from '../measured-container/MeasuredContainer.js';
+import '../measured-container/useResizeObserver.js';
+import listCss from './List.css.js';
+
+const classBase = "vuuList";
+const List = forwardRef(function List2({
+  ListItem: ListItem$1 = ListItem,
+  ListPlaceholder,
+  allowDragDrop,
+  children,
+  className,
+  collapsibleHeaders = false,
+  defaultHighlightedIndex,
+  defaultSelected,
+  disabled: listDisabled = false,
+  disableFocus = false,
+  disableTypeToSelect,
+  displayedItemCount = 10,
+  emptyMessage,
+  focusVisible: focusVisibleProp,
+  getItemHeight: getItemHeightProp,
+  getItemId,
+  height,
+  highlightedIndex: highlightedIndexProp,
+  id: idProp,
+  itemGapSize = 0,
+  itemHeight: itemHeightProp,
+  itemTextHighlightPattern,
+  itemToString: itemToString$1 = itemToString,
+  listHandlers: listHandlersProp,
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+  onClick: onClickProp,
+  onDragStart,
+  onDrop,
+  onMoveListItem,
+  onSelect,
+  onSelectionChange,
+  onHighlight,
+  restoreLastFocus,
+  selected: selectedProp,
+  selectionStrategy,
+  checkable = selectionStrategy === "multiple",
+  scrollingApiRef,
+  // TODO do we still need these ?
+  selectionKeys,
+  showEmptyMessage = false,
+  source,
+  style: styleProp,
+  stickyHeaders,
+  tabIndex = 0,
+  tabToSelect,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-list",
+    css: listCss,
+    window: targetWindow
+  });
+  const id = useId(idProp);
+  const contentContainerRef = useRef(null);
+  const [size, setSize] = useState();
+  const handleResize = useCallback((size2) => {
+    setSize(size2);
+  }, []);
+  const collectionHook = useCollectionItems({
+    id,
+    label: "List",
+    source,
+    children,
+    options: {
+      collapsibleHeaders,
+      // Add Group ChildTypes to options
+      getItemId,
+      itemToString: itemToString$1
+    }
+  });
+  const {
+    listClientHeight,
+    computedListHeight,
+    listItemHeight,
+    rowHeightProxyRef
+  } = useListHeight({
+    displayedItemCount,
+    getItemHeight: getItemHeightProp,
+    height,
+    itemCount: collectionHook.data.length,
+    itemGapSize,
+    itemHeight: itemHeightProp,
+    size
+  });
+  const { onVerticalScroll, viewportRange } = useScrollPosition({
+    containerSize: (
+      // TODO whats the right way to handle string values - ie percentages
+      listClientHeight ?? computedListHeight ?? size?.height ?? 0
+    ),
+    itemCount: collectionHook.data.length,
+    itemGapSize,
+    itemSize: listItemHeight
+  });
+  const {
+    containerRef,
+    setContainerRef,
+    draggable,
+    draggedItemIndex,
+    dropIndicator,
+    focusVisible,
+    highlightedIndex,
+    listControlProps,
+    listHandlers,
+    listItemHeaderHandlers,
+    scrollIntoView,
+    selected
+  } = useList({
+    allowDragDrop,
+    collapsibleHeaders,
+    collectionHook,
+    contentRef: contentContainerRef,
+    defaultHighlightedIndex,
+    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),
+    disabled: listDisabled,
+    disableTypeToSelect,
+    highlightedIndex: highlightedIndexProp,
+    id,
+    label: "List",
+    listHandlers: listHandlersProp,
+    // should this be in context ?
+    onClick: onClickProp,
+    onDragStart,
+    onDrop,
+    onMoveListItem,
+    onSelect,
+    onSelectionChange,
+    onHighlight,
+    restoreLastFocus,
+    selected: collectionHook.itemToCollectionItemId(selectedProp),
+    selectionStrategy,
+    selectionKeys,
+    stickyHeaders,
+    tabToSelect,
+    viewportRange
+  });
+  useImperativeScrollingAPI({
+    collectionHook,
+    forwardedRef: scrollingApiRef,
+    // this should surely be scrollContainerRef
+    scrollableRef: containerRef,
+    scrollIntoView
+  });
+  const appliedFocusVisible = focusVisibleProp ?? focusVisible;
+  const createHeader = function createHeader2(idx, headerId, title, expanded) {
+    const header = /* @__PURE__ */ createElement(
+      ListItem$1,
+      {
+        ...listItemHeaderHandlers,
+        className: cx(`${classBase}Header`, {
+          focusVisible: collapsibleHeaders && appliedFocusVisible === idx.value
+        }),
+        "aria-expanded": expanded,
+        "data-index": collapsibleHeaders ? idx.value : void 0,
+        "data-highlighted": idx.value === highlightedIndex || void 0,
+        "data-sticky": stickyHeaders,
+        "data-selectable": false,
+        id: headerId,
+        itemHeight: getItemHeight(idx.value),
+        key: `header-${idx.value}`,
+        label: title
+      }
+    );
+    idx.value += 1;
+    return header;
+  };
+  const getItemHeight = getItemHeightProp === void 0 ? () => itemHeightProp : getItemHeightProp;
+  function renderCollectionItem(list, item, idx) {
+    const { disabled, value, id: itemId, label } = item;
+    const isChildItem = isValidElement(value);
+    const listItemProps = {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore until we refactor this whole section
+      className: cx(value?.props?.className, {
+        vuuHighlighted: idx.value === highlightedIndex,
+        vuuFocusVisible: appliedFocusVisible === idx.value,
+        [`vuuDraggable-dragAway`]: draggedItemIndex === idx.value
+      }),
+      disabled: disabled || listDisabled,
+      id: itemId,
+      item: isChildItem ? void 0 : item?.value ?? void 0,
+      itemHeight: getItemHeight(idx.value),
+      itemTextHighlightPattern,
+      key: itemId,
+      "data-index": idx.value,
+      label,
+      role: "option",
+      selected: isSelected(selected, item),
+      showCheckbox: checkable
+    };
+    list.push(
+      isChildItem ? cloneElement(value, listItemProps) : /* @__PURE__ */ jsx(ListItem$1, { ...listItemProps })
+    );
+    idx.value += 1;
+  }
+  const addGroup = function addGroup2(list, items, idx) {
+    const { count = 0, id: id2, expanded, label = "" } = items[idx.value];
+    const header = createHeader(idx, id2, label, expanded);
+    const childItems = expanded !== false ? [header].concat(
+      renderCollectionItems(items, idx, idx.value + count) || []
+    ) : header;
+    list.push(
+      /* @__PURE__ */ jsx("div", { role: "group", children: childItems }, id2)
+    );
+  };
+  const renderCollectionItems = (items, idx = { value: 0 }, end = items.length) => {
+    const listItems = [];
+    while (idx.value < end) {
+      const item = items[idx.value];
+      if (item.header) {
+        listItems.push(
+          createHeader(idx, item.id, item.label, item.expanded === false)
+        );
+      } else if (item.childNodes) {
+        addGroup(listItems, items, idx);
+      } else {
+        renderCollectionItem(listItems, item, idx);
+      }
+    }
+    return listItems;
+  };
+  const isEmpty = collectionHook.data.length === 0;
+  const renderContent = () => {
+    if (!isEmpty) {
+      const itemsToRender = collectionHook.data;
+      return renderCollectionItems(itemsToRender);
+    }
+  };
+  const contentHeight = "auto";
+  const sizeStyles = {
+    "--list-borderWidth": "var(--vuuList-borderWidth, var(--salt-size-border, 0))",
+    "--list-item-gap": itemGapSize ? `${itemGapSize}px` : void 0,
+    "--computed-list-height": computedListHeight === void 0 ? void 0 : `${computedListHeight}px`,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight
+  };
+  return /* @__PURE__ */ jsxs(
+    MeasuredContainer,
+    {
+      "aria-multiselectable": selectionStrategy === "multiple" || selectionStrategy === "extended" || selectionStrategy === "extended-multi-range" || void 0,
+      ...htmlAttributes,
+      ...listHandlers,
+      ...listControlProps,
+      className: cx(classBase, className, {
+        [`${classBase}-collapsible`]: collapsibleHeaders,
+        [`${classBase}-contentSized`]: computedListHeight !== void 0,
+        [`${classBase}-empty`]: isEmpty,
+        vuuFocusVisible: highlightedIndex === LIST_FOCUS_VISIBLE
+      }),
+      height: computedListHeight ?? height,
+      id: `${id}`,
+      onResize: handleResize,
+      ref: useForkRef(setContainerRef, forwardedRef),
+      role: "listbox",
+      style: { ...styleProp, ...sizeStyles },
+      tabIndex: listDisabled || disableFocus ? void 0 : tabIndex,
+      children: [
+        /* @__PURE__ */ jsx(
+          ListItemProxy,
+          {
+            ref: rowHeightProxyRef,
+            height: itemHeightProp
+          },
+          "canary"
+        ),
+        collectionHook.data.length === 0 && ListPlaceholder !== void 0 ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ListPlaceholder, {}) }) : /* @__PURE__ */ jsx("div", { className: `${classBase}-viewport`, onScroll: onVerticalScroll, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${classBase}-scrollingContentContainer`,
+            ref: contentContainerRef,
+            style: { height: contentHeight },
+            children: [
+              renderContent(),
+              dropIndicator,
+              draggable
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+});
+
+export { List };
+//# sourceMappingURL=List.js.map

package/esm/list/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../../src/list/List.tsx"],"sourcesContent":["import { useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  CollectionIndexer,\n  CollectionItem,\n  itemToString as defaultItemToString,\n  SelectionStrategy,\n} from \"../common-hooks\";\nimport {\n  isSelected,\n  LIST_FOCUS_VISIBLE,\n  useCollectionItems,\n  useImperativeScrollingAPI,\n} from \"./common-hooks\";\n\nimport { ListItem as DefaultListItem, ListItemProxy } from \"./ListItem\";\nimport { ListItemProps, ListProps } from \"./listTypes\";\nimport { useList } from \"./useList\";\nimport { useListHeight } from \"./useListHeight\";\nimport { useScrollPosition } from \"./useScrollPosition\";\nimport { MeasuredContainer, MeasuredSize } from \"../measured-container\";\n\nimport listCss from \"./List.css\";\n\nconst defaultEmptyMessage = \"No data to display\";\n\nconst classBase = \"vuuList\";\n\nexport const List = forwardRef(function List<\n  Item = string,\n  S extends SelectionStrategy = \"default\"\n>(\n  {\n    ListItem = DefaultListItem,\n    ListPlaceholder,\n    allowDragDrop,\n    children,\n    className,\n    collapsibleHeaders = false,\n    defaultHighlightedIndex,\n    defaultSelected,\n    disabled: listDisabled = false,\n    disableFocus = false,\n    disableTypeToSelect,\n    displayedItemCount = 10,\n    emptyMessage,\n    focusVisible: focusVisibleProp,\n    getItemHeight: getItemHeightProp,\n    getItemId,\n    height,\n    highlightedIndex: highlightedIndexProp,\n    id: idProp,\n    itemGapSize = 0,\n    itemHeight: itemHeightProp,\n    itemTextHighlightPattern,\n    itemToString = defaultItemToString,\n    listHandlers: listHandlersProp,\n    maxHeight,\n    maxWidth,\n    minHeight,\n    minWidth,\n    onClick: onClickProp,\n    onDragStart,\n    onDrop,\n    onMoveListItem,\n    onSelect,\n    onSelectionChange,\n    onHighlight,\n    restoreLastFocus,\n    selected: selectedProp,\n    selectionStrategy,\n    checkable = selectionStrategy === \"multiple\",\n    scrollingApiRef,\n    // TODO do we still need these ?\n    selectionKeys,\n    showEmptyMessage = false,\n    source,\n    style: styleProp,\n    stickyHeaders,\n    tabIndex = 0,\n    tabToSelect,\n    ...htmlAttributes\n  }: ListProps<Item, S>,\n  forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-list\",\n    css: listCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const contentContainerRef = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<MeasuredSize | undefined>();\n  const handleResize = useCallback((size: MeasuredSize) => {\n    setSize(size);\n  }, []);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    label: \"List\",\n    source,\n    children,\n    options: {\n      collapsibleHeaders,\n      // Add Group ChildTypes to options\n      getItemId,\n      itemToString,\n    },\n  });\n\n  const {\n    listClientHeight,\n    computedListHeight,\n    listItemHeight,\n    rowHeightProxyRef,\n  } = useListHeight({\n    displayedItemCount,\n    getItemHeight: getItemHeightProp,\n    height,\n    itemCount: collectionHook.data.length,\n    itemGapSize,\n    itemHeight: itemHeightProp,\n    size,\n  });\n\n  const { onVerticalScroll, viewportRange } = useScrollPosition({\n    containerSize:\n      // TODO whats the right way to handle string values - ie percentages\n      listClientHeight ?? computedListHeight ?? size?.height ?? 0,\n    itemCount: collectionHook.data.length,\n    itemGapSize: itemGapSize,\n    itemSize: listItemHeight,\n  });\n\n  const {\n    containerRef,\n    setContainerRef,\n    draggable,\n    draggedItemIndex,\n    dropIndicator,\n    focusVisible,\n    highlightedIndex,\n    listControlProps,\n    listHandlers,\n    listItemHeaderHandlers,\n    scrollIntoView,\n    selected,\n  } = useList<Item, S>({\n    allowDragDrop,\n    collapsibleHeaders,\n    collectionHook,\n    contentRef: contentContainerRef,\n    defaultHighlightedIndex,\n    defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),\n    disabled: listDisabled,\n    disableTypeToSelect,\n    highlightedIndex: highlightedIndexProp,\n    id,\n    label: \"List\",\n    listHandlers: listHandlersProp, // should this be in context ?\n    onClick: onClickProp,\n    onDragStart,\n    onDrop,\n    onMoveListItem,\n    onSelect,\n    onSelectionChange,\n    onHighlight,\n    restoreLastFocus,\n    selected: collectionHook.itemToCollectionItemId(selectedProp as any),\n    selectionStrategy,\n    selectionKeys,\n    stickyHeaders,\n    tabToSelect,\n    viewportRange,\n  });\n\n  useImperativeScrollingAPI({\n    collectionHook,\n    forwardedRef: scrollingApiRef,\n    // this should surely be scrollContainerRef\n    scrollableRef: containerRef,\n    scrollIntoView,\n  });\n\n  // focusVisible passes as a prop takes precedence\n  const appliedFocusVisible = focusVisibleProp ?? focusVisible;\n\n  const createHeader: (\n    idx: { value: number },\n    headerId: string,\n    title: string,\n    expanded?: boolean\n  ) => ReactElement = function createHeader(idx, headerId, title, expanded) {\n    const header = (\n      <ListItem\n        {...listItemHeaderHandlers}\n        className={cx(`${classBase}Header`, {\n          focusVisible: collapsibleHeaders && appliedFocusVisible === idx.value,\n        })}\n        aria-expanded={expanded}\n        data-index={collapsibleHeaders ? idx.value : undefined}\n        data-highlighted={idx.value === highlightedIndex || undefined}\n        data-sticky={stickyHeaders}\n        data-selectable={false}\n        id={headerId}\n        itemHeight={getItemHeight(idx.value)}\n        key={`header-${idx.value}`}\n        label={title}\n        // role=\"presentation\"\n      />\n    );\n    idx.value += 1;\n    return header;\n  };\n\n  const getItemHeight =\n    getItemHeightProp === undefined ? () => itemHeightProp : getItemHeightProp;\n\n  function renderCollectionItem(\n    list: ReactElement[],\n    item: CollectionItem<Item>,\n    idx: { value: number }\n  ) {\n    // Note, a number of these props are specific to ListItem. What if user\n    // implements a custom ListItem but neglects to handle all these props.\n    // Is that on them ?\n    const { disabled, value, id: itemId, label } = item;\n    const isChildItem = isValidElement(value);\n    const listItemProps: ListItemProps<Item> & {\n      key: string;\n      \"data-index\": number;\n    } = {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore until we refactor this whole section\n      className: cx(value?.props?.className, {\n        vuuHighlighted: idx.value === highlightedIndex,\n        vuuFocusVisible: appliedFocusVisible === idx.value,\n        [`vuuDraggable-dragAway`]: draggedItemIndex === idx.value,\n      }),\n      disabled: disabled || listDisabled,\n      id: itemId,\n      item: isChildItem ? undefined : item?.value ?? undefined,\n      itemHeight: getItemHeight(idx.value),\n      itemTextHighlightPattern,\n      key: itemId,\n      \"data-index\": idx.value,\n      label,\n      role: \"option\",\n      selected: isSelected<Item>(selected, item),\n      showCheckbox: checkable,\n    };\n    list.push(\n      isChildItem ? (\n        cloneElement(value, listItemProps)\n      ) : (\n        <ListItem {...listItemProps} />\n      )\n    );\n\n    idx.value += 1;\n  }\n\n  const addGroup: (\n    list: ReactElement[],\n    items: CollectionItem<Item>[],\n    idx: { value: number }\n  ) => void = function addGroup(\n    list: ReactElement[],\n    items: CollectionItem<Item>[],\n    idx: { value: number }\n  ) {\n    const { count = 0, id, expanded, label = \"\" } = items[idx.value];\n    const header = createHeader(idx, id, label, expanded);\n    const childItems: ReactElement | ReactElement[] =\n      expanded !== false\n        ? [header].concat(\n            renderCollectionItems(items, idx, idx.value + count) || []\n          )\n        : header;\n\n    list.push(\n      <div key={id} role=\"group\">\n        {childItems}\n      </div>\n    );\n  };\n\n  const renderCollectionItems = (\n    items: CollectionItem<Item>[],\n    idx: CollectionIndexer = { value: 0 },\n    end = items.length\n  ): ReactElement[] | undefined => {\n    const listItems: ReactElement[] = [];\n    while (idx.value < end) {\n      const item = items[idx.value];\n      if (item.header) {\n        listItems.push(\n          createHeader(idx, item.id, item.label!, item.expanded === false)\n        );\n      } else if (item.childNodes) {\n        addGroup(listItems, items, idx);\n      } else {\n        renderCollectionItem(listItems, item, idx);\n      }\n    }\n    return listItems;\n  };\n\n  function renderEmpty() {\n    if (emptyMessage || showEmptyMessage) {\n      return (\n        <span className={`${classBase}-empty-message`}>\n          {emptyMessage ?? defaultEmptyMessage}\n        </span>\n      );\n    } else {\n      return null;\n    }\n  }\n\n  const isEmpty = collectionHook.data.length === 0;\n\n  const renderContent = () => {\n    if (!isEmpty) {\n      // const itemsToRender =\n      //   typeof draggedItemIndex === \"number\" && draggedItemIndex >= 0\n      //     ? collectionHook.data.filter((d) => d.index !== draggedItemIndex)\n      //     : collectionHook.data;\n      const itemsToRender = collectionHook.data;\n\n      return renderCollectionItems(itemsToRender);\n    } else {\n      renderEmpty();\n    }\n  };\n  const contentHeight = \"auto\";\n  const sizeStyles = {\n    \"--list-borderWidth\":\n      \"var(--vuuList-borderWidth, var(--salt-size-border, 0))\",\n    \"--list-item-gap\": itemGapSize ? `${itemGapSize}px` : undefined,\n    \"--computed-list-height\":\n      computedListHeight === undefined ? undefined : `${computedListHeight}px`,\n    minWidth,\n    minHeight,\n    maxWidth,\n    maxHeight,\n  };\n  return (\n    <MeasuredContainer\n      aria-multiselectable={\n        selectionStrategy === \"multiple\" ||\n        selectionStrategy === \"extended\" ||\n        selectionStrategy === \"extended-multi-range\" ||\n        undefined\n      }\n      {...htmlAttributes}\n      {...listHandlers}\n      {...listControlProps}\n      className={cx(classBase, className, {\n        [`${classBase}-collapsible`]: collapsibleHeaders,\n        [`${classBase}-contentSized`]: computedListHeight !== undefined,\n        [`${classBase}-empty`]: isEmpty,\n        vuuFocusVisible: highlightedIndex === LIST_FOCUS_VISIBLE,\n      })}\n      height={computedListHeight ?? height}\n      id={`${id}`}\n      onResize={handleResize}\n      ref={useForkRef<HTMLDivElement>(setContainerRef, forwardedRef)}\n      role=\"listbox\"\n      style={{ ...styleProp, ...sizeStyles }}\n      tabIndex={listDisabled || disableFocus ? undefined : tabIndex}\n    >\n      <ListItemProxy\n        ref={rowHeightProxyRef}\n        height={itemHeightProp}\n        key=\"canary\"\n      />\n      {collectionHook.data.length === 0 && ListPlaceholder !== undefined ? (\n        <>\n          <ListPlaceholder />\n        </>\n      ) : (\n        <div className={`${classBase}-viewport`} onScroll={onVerticalScroll}>\n          <div\n            className={`${classBase}-scrollingContentContainer`}\n            ref={contentContainerRef}\n            style={{ height: contentHeight }}\n          >\n            {renderContent()}\n            {dropIndicator}\n            {draggable}\n          </div>\n        </div>\n      )}\n    </MeasuredContainer>\n  );\n}) as <Item = string, S extends SelectionStrategy = \"default\">(\n  props: ListProps<Item, S> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<ListProps<Item>>;\n"],"names":["List","ListItem","DefaultListItem","itemToString","defaultItemToString","size","createHeader","addGroup","id"],"mappings":"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"}

package/esm/list/ListItem.css.js

@@ -0,0 +1,4 @@
+var listItemCss = ".vuuListItem {\n  /* Color */\n  --list-item-text-color: var(--salt-content-primary-foreground);\n  --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));\n  /* --list-item-selected-focus-outlineColor: var(--salt-color-white);  TODO: Check token with design */\n  --list-item-text-color-active: var(--salt-selectable-foreground-selected);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n  --list-item-alignItems: center;\n}\n\n.vuuListItem.vuuHighlighted {\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n  --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.vuuListItemHeader {\n  font-weight: var(--salt-text-fontWeight-strong); /*  TODO: Check token with design */\n}\n\n.vuuListItemHeader[data-sticky] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.vuuListItem {\n  color: var(--list-item-text-color);\n  cursor: var(--vuuList-item-cursor, pointer);\n  background: var(--vuuList-item-background, var(--list-item-background));\n  font-size: var(--salt-text-fontSize);\n  text-align: var(--salt-text-textAlign);\n  line-height: var(--salt-text-lineHeight);\n  height: var(--vuuList-item-height, var(--list-item-height, auto));\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  padding: 0 var(--vuuListItem-padding, var(--salt-size-unit));\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.vuuListItem:last-child {\n  margin-bottom: 0px;\n}\n\n.vuuListItem-checkbox {\n  --list-item-background-active: var(--salt-selectable-background);\n  --list-item-text-color-active: var(--salt-content-primary-foreground);\n  --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox) {\n  --list-item-background: var(--list-item-background-active);\n  color: var(--list-item-text-color-active);\n}\n\n.vuuListItem.vuuDisabled {\n  --list-item-text-color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.vuuListItem.vuuFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.vuuListItem.vuuFocusVisible:after {\n  content: none;\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox).vuuFocusVisible {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.vuuListItem-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  padding: var(--list-item-text-padding, 0px);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.vuuListItem-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n.vuuDraggable-list-item {\n  --vuuList-item-height: 24px;\n  background-color: white;\n}\n\n.vuuListItem.vuuDraggable-dragAway {\n  display: none;\n}";
+
+export { listItemCss as default };
+//# sourceMappingURL=ListItem.css.js.map

package/esm/list/ListItem.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/list/ListItem.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { Highlighter } from './Highlighter.js';
+import { CheckboxIcon } from './CheckboxIcon.js';
+import listItemCss from './ListItem.css.js';
+
+const classBase = "vuuListItem";
+const ListItemProxy = forwardRef(function ListItemProxy2({
+  height,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-list-item",
+    css: listItemCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      "aria-hidden": true,
+      className: cx(classBase, `${classBase}-proxy`),
+      ref: forwardedRef,
+      style: { height }
+    }
+  );
+});
+const ListItem = forwardRef(
+  function ListItem2({
+    children,
+    className: classNameProp,
+    disabled,
+    tabIndex,
+    item,
+    itemHeight,
+    itemTextHighlightPattern,
+    label,
+    selectable: _notUsed,
+    selected,
+    showCheckbox,
+    style: styleProp,
+    ...props
+  }, forwardedRef) {
+    const className = cx(classBase, classNameProp, {
+      vuuDisabled: disabled,
+      [`${classBase}-checkbox`]: showCheckbox
+    });
+    const style = itemHeight !== void 0 ? {
+      ...styleProp,
+      height: itemHeight
+    } : styleProp;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className,
+        ...props,
+        "aria-disabled": disabled || void 0,
+        "aria-selected": selected || void 0,
+        ref: forwardedRef,
+        style,
+        children: [
+          showCheckbox && /* @__PURE__ */ jsx(CheckboxIcon, { "aria-hidden": true, checked: selected }),
+          children && typeof children !== "string" ? children : itemTextHighlightPattern == null ? /* @__PURE__ */ jsx("span", { className: `${classBase}-textWrapper`, children: label || children }) : /* @__PURE__ */ jsx(
+            Highlighter,
+            {
+              matchPattern: itemTextHighlightPattern,
+              text: label || children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { ListItem, ListItemProxy };
+//# sourceMappingURL=ListItem.js.map

package/esm/list/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sources":["../../src/list/ListItem.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ListItemProps, ListItemType } from \"./listTypes\";\nimport { Highlighter } from \"./Highlighter\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\n\nimport listItemCss from \"./ListItem.css\";\n\nconst classBase = \"vuuListItem\";\n\n// A dummy ListItem rendered once and not visible. We measure this to\n// determine height of ListItem and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const ListItemProxy = forwardRef(function ListItemProxy(\n  {\n    height,\n    ...htmlAttributes\n  }: HTMLAttributes<HTMLDivElement> & {\n    height?: number;\n  },\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-list-item\",\n    css: listItemCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      aria-hidden\n      className={cx(classBase, `${classBase}-proxy`)}\n      ref={forwardedRef}\n      style={{ height }}\n    />\n  );\n});\n\n// Note: the memo is effective if List label is passed as simple string\n// If children are used, it is the responsibility of caller to memoise\n// these if performance on highlight is perceived to be an issue.\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  function ListItem(\n    {\n      children,\n      className: classNameProp,\n      disabled,\n      tabIndex,\n      item,\n      itemHeight,\n      itemTextHighlightPattern,\n      label,\n      selectable: _notUsed,\n      selected,\n      showCheckbox,\n      style: styleProp,\n      ...props\n    },\n    forwardedRef\n  ) {\n    const className = cx(classBase, classNameProp, {\n      vuuDisabled: disabled,\n      [`${classBase}-checkbox`]: showCheckbox,\n    });\n    const style =\n      itemHeight !== undefined\n        ? {\n            ...styleProp,\n            height: itemHeight,\n          }\n        : styleProp;\n\n    return (\n      <div\n        className={className}\n        {...props}\n        aria-disabled={disabled || undefined}\n        aria-selected={selected || undefined}\n        ref={forwardedRef}\n        style={style}\n      >\n        {showCheckbox && <CheckboxIcon aria-hidden checked={selected} />}\n        {children && typeof children !== \"string\" ? (\n          children\n        ) : itemTextHighlightPattern == null ? (\n          <span className={`${classBase}-textWrapper`}>\n            {label || children}\n          </span>\n        ) : (\n          <Highlighter\n            matchPattern={itemTextHighlightPattern}\n            text={label || (children as string)}\n          />\n        )}\n      </div>\n    );\n  }\n) as ListItemType;\n"],"names":["ListItemProxy","ListItem"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,aAAA,CAAA;AAML,MAAA,aAAA,GAAgB,UAAW,CAAA,SAASA,cAC/C,CAAA;AAAA,EACE,MAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAA,EAGA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,aAAW,EAAA,IAAA;AAAA,MACX,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAQ,MAAA,CAAA,CAAA;AAAA,MAC7C,GAAK,EAAA,YAAA;AAAA,MACL,KAAA,EAAO,EAAE,MAAO,EAAA;AAAA,KAAA;AAAA,GAClB,CAAA;AAEJ,CAAC,EAAA;AAKM,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASC,SACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,wBAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAY,EAAA,QAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG,KAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,MAC7C,WAAa,EAAA,QAAA;AAAA,MACb,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,YAAA;AAAA,KAC5B,CAAA,CAAA;AACD,IAAM,MAAA,KAAA,GACJ,eAAe,KACX,CAAA,GAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,MAAQ,EAAA,UAAA;AAAA,KAEV,GAAA,SAAA,CAAA;AAEN,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,QAC3B,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,QAC3B,GAAK,EAAA,YAAA;AAAA,QACL,KAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,oBAAiB,GAAA,CAAA,YAAA,EAAA,EAAa,aAAW,EAAA,IAAA,EAAC,SAAS,QAAU,EAAA,CAAA;AAAA,UAC7D,QAAY,IAAA,OAAO,QAAa,KAAA,QAAA,GAC/B,WACE,wBAA4B,IAAA,IAAA,mBAC7B,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,CAC1B,YAAA,CAAA,EAAA,QAAA,EAAA,KAAA,IAAS,UACZ,CAEA,mBAAA,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAc,EAAA,wBAAA;AAAA,cACd,MAAM,KAAU,IAAA,QAAA;AAAA,aAAA;AAAA,WAClB;AAAA,SAAA;AAAA,OAAA;AAAA,KAEJ,CAAA;AAAA,GAEJ;AACF;;;;"}

package/esm/list/ListItemGroup.js

@@ -0,0 +1,4 @@
+const ListItemGroup = (_) => null;
+
+export { ListItemGroup };
+//# sourceMappingURL=ListItemGroup.js.map

package/esm/list/ListItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemGroup.js","sources":["../../src/list/ListItemGroup.ts"],"sourcesContent":["import { HTMLAttributes } from \"react\";\n\n// Purely used as markers, props will be extracted\nexport interface ListItemGroupProps extends HTMLAttributes<HTMLDivElement> {\n  //   children?: ListItemType | ListItemType[];\n  children?: JSX.Element | JSX.Element[];\n  label?: string;\n}\nexport const ListItemGroup = (_: ListItemGroupProps) => null;\n"],"names":[],"mappings":"AAQa,MAAA,aAAA,GAAgB,CAAC,CAA0B,KAAA;;;;"}

package/esm/list/ListItemHeader.js

@@ -0,0 +1,4 @@
+const ListItemHeader = (_) => null;
+
+export { ListItemHeader };
+//# sourceMappingURL=ListItemHeader.js.map

package/esm/list/ListItemHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemHeader.js","sources":["../../src/list/ListItemHeader.ts"],"sourcesContent":["import { HTMLAttributes } from \"react\";\n\n// Purely used as markers, props will be extracted\nexport interface ListItemHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  label?: string;\n}\nexport const ListItemHeader = (_: ListItemHeaderProps) => null;\n"],"names":[],"mappings":"AAMa,MAAA,cAAA,GAAiB,CAAC,CAA2B,KAAA;;;;"}

package/esm/list/RadioIcon.css.js

@@ -0,0 +1,4 @@
+var radioIconCss = ".vuuRadioIcon {\n    --vuu-icon-size: 12px;\n    --vuu-icon-left: -1px;\n    --vuu-icon-top: -1px;\n    --vuu-icon-svg: var(--vuu-svg-radio);\n    border-style: solid;\n    border-color: var(--vuuRadioIcon-borderColor, var(--salt-selectable-borderColor));\n    border-radius: 50%;\n    border-width: 1px;\n    display: inline-block;\n    height: var(--vuuRadioIcon-size, 12px);\n    position: relative;\n    width: var(--vuuRadioIcon-size, 12px);\n}\n\n.vuuRadioIcon-checked {\n    background-image: var(--vuu-svg-radio);\n    border: none;\n    background-repeat: no-repeat;\n}\n\n.vuuRadioIcon-checked:after {\n    content: \"\";\n    left: var(--vuu-icon-left, auto);\n    height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n    -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask-repeat: no-repeat;\n    position: absolute;\n    top: var(--vuu-icon-top, auto);\n    width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n";
+
+export { radioIconCss as default };
+//# sourceMappingURL=RadioIcon.css.js.map

package/esm/list/RadioIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/list/RadioIcon.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import radioIconCss from './RadioIcon.css.js';
+
+const classBase = "vuuRadioIcon";
+const RadioIcon = ({ checked = false, ...htmlAttributes }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-radio-icon",
+    css: radioIconCss,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, { [`${classBase}-checked`]: checked })
+    }
+  );
+};
+
+export { RadioIcon };
+//# sourceMappingURL=RadioIcon.js.map

package/esm/list/RadioIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioIcon.js","sources":["../../src/list/RadioIcon.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport radioIconCss from \"./RadioIcon.css\";\n\nconst classBase = \"vuuRadioIcon\";\n\nexport const RadioIcon = ({ checked = false, ...htmlAttributes }) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-radio-icon\",\n    css: radioIconCss,\n    window: targetWindow,\n  });\n\n  return (\n    <span\n      {...htmlAttributes}\n      className={cx(classBase, { [`${classBase}-checked`]: checked })}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,SAAY,GAAA,cAAA,CAAA;AAEX,MAAM,YAAY,CAAC,EAAE,UAAU,KAAO,EAAA,GAAG,gBAAqB,KAAA;AACnE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,EAAE,CAAC,GAAG,SAAS,CAAA,QAAA,CAAU,GAAG,OAAA,EAAS,CAAA;AAAA,KAAA;AAAA,GAChE,CAAA;AAEJ;;;;"}

package/esm/list/common-hooks/keyUtils.js

@@ -0,0 +1,64 @@
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (const set of sets) {
+    for (const element of set) {
+      result.add(element);
+    }
+  }
+  return result;
+}
+const ArrowUp = "ArrowUp";
+const ArrowDown = "ArrowDown";
+const ArrowLeft = "ArrowLeft";
+const ArrowRight = "ArrowRight";
+const Enter = "Enter";
+const Escape = "Escape";
+const Home = "Home";
+const End = "End";
+const PageUp = "PageUp";
+const PageDown = "PageDown";
+const Space = " ";
+const actionKeys = /* @__PURE__ */ new Set(["Enter", "Delete", " "]);
+const focusKeys = /* @__PURE__ */ new Set(["Tab"]);
+const arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+const navigationKeys = /* @__PURE__ */ new Set([
+  Home,
+  End,
+  PageUp,
+  PageDown,
+  ArrowDown,
+  ArrowUp
+]);
+const functionKeys = /* @__PURE__ */ new Set([
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12"
+]);
+const specialKeys = union(
+  actionKeys,
+  navigationKeys,
+  arrowLeftRightKeys,
+  functionKeys,
+  focusKeys
+);
+const isCharacterKey = (evt) => {
+  if (specialKeys.has(evt.key)) {
+    return false;
+  }
+  return evt.key.length === 1 && !evt.ctrlKey && !evt.metaKey && !evt.altKey;
+};
+const isNavigationKey = ({ key }) => {
+  return navigationKeys.has(key);
+};
+
+export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Escape, Home, PageDown, PageUp, Space, isCharacterKey, isNavigationKey };
+//# sourceMappingURL=keyUtils.js.map

package/esm/list/common-hooks/keyUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyUtils.js","sources":["../../../src/list/common-hooks/keyUtils.ts"],"sourcesContent":["import React from \"react\";\n\nfunction union<T>(set1: Set<T>, ...sets: Set<T>[]) {\n  const result = new Set(set1);\n  for (const set of sets) {\n    for (const element of set) {\n      result.add(element);\n    }\n  }\n  return result;\n}\n\nexport const ArrowUp = \"ArrowUp\";\nexport const ArrowDown = \"ArrowDown\";\nexport const ArrowLeft = \"ArrowLeft\";\nexport const ArrowRight = \"ArrowRight\";\nexport const Enter = \"Enter\";\nexport const Escape = \"Escape\";\nexport const Home = \"Home\";\nexport const End = \"End\";\nexport const PageUp = \"PageUp\";\nexport const PageDown = \"PageDown\";\nexport const Space = \" \";\n\nconst actionKeys = new Set([\"Enter\", \"Delete\", \" \"]);\nconst focusKeys = new Set([\"Tab\"]);\nconst arrowLeftRightKeys = new Set([\"ArrowRight\", \"ArrowLeft\"]);\nconst navigationKeys = new Set([\n  Home,\n  End,\n  PageUp,\n  PageDown,\n  ArrowDown,\n  ArrowUp,\n]);\nconst functionKeys = new Set([\n  \"F1\",\n  \"F2\",\n  \"F3\",\n  \"F4\",\n  \"F5\",\n  \"F6\",\n  \"F7\",\n  \"F8\",\n  \"F9\",\n  \"F10\",\n  \"F11\",\n  \"F12\",\n]);\nconst specialKeys = union(\n  actionKeys,\n  navigationKeys,\n  arrowLeftRightKeys,\n  functionKeys,\n  focusKeys\n);\nexport const isCharacterKey = (evt: React.KeyboardEvent): boolean => {\n  if (specialKeys.has(evt.key)) {\n    return false;\n  }\n  return evt.key.length === 1 && !evt.ctrlKey && !evt.metaKey && !evt.altKey;\n};\n\nexport const isNavigationKey = ({ key }: React.KeyboardEvent): boolean => {\n  return navigationKeys.has(key);\n};\n"],"names":[],"mappings":"AAEA,SAAS,KAAA,CAAS,SAAiB,IAAgB,EAAA;AACjD,EAAM,MAAA,MAAA,GAAS,IAAI,GAAA,CAAI,IAAI,CAAA,CAAA;AAC3B,EAAA,KAAA,MAAW,OAAO,IAAM,EAAA;AACtB,IAAA,KAAA,MAAW,WAAW,GAAK,EAAA;AACzB,MAAA,MAAA,CAAO,IAAI,OAAO,CAAA,CAAA;AAAA,KACpB;AAAA,GACF;AACA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA;AAEO,MAAM,OAAU,GAAA,UAAA;AAChB,MAAM,SAAY,GAAA,YAAA;AAClB,MAAM,SAAY,GAAA,YAAA;AAClB,MAAM,UAAa,GAAA,aAAA;AACnB,MAAM,KAAQ,GAAA,QAAA;AACd,MAAM,MAAS,GAAA,SAAA;AACf,MAAM,IAAO,GAAA,OAAA;AACb,MAAM,GAAM,GAAA,MAAA;AACZ,MAAM,MAAS,GAAA,SAAA;AACf,MAAM,QAAW,GAAA,WAAA;AACjB,MAAM,KAAQ,GAAA,IAAA;AAErB,MAAM,6BAAiB,IAAA,GAAA,CAAI,CAAC,OAAS,EAAA,QAAA,EAAU,GAAG,CAAC,CAAA,CAAA;AACnD,MAAM,SAAY,mBAAA,IAAI,GAAI,CAAA,CAAC,KAAK,CAAC,CAAA,CAAA;AACjC,MAAM,qCAAyB,IAAA,GAAA,CAAI,CAAC,YAAA,EAAc,WAAW,CAAC,CAAA,CAAA;AAC9D,MAAM,cAAA,uBAAqB,GAAI,CAAA;AAAA,EAC7B,IAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AACF,CAAC,CAAA,CAAA;AACD,MAAM,YAAA,uBAAmB,GAAI,CAAA;AAAA,EAC3B,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AACF,CAAC,CAAA,CAAA;AACD,MAAM,WAAc,GAAA,KAAA;AAAA,EAClB,UAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AACF,CAAA,CAAA;AACa,MAAA,cAAA,GAAiB,CAAC,GAAsC,KAAA;AACnE,EAAA,IAAI,WAAY,CAAA,GAAA,CAAI,GAAI,CAAA,GAAG,CAAG,EAAA;AAC5B,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AACA,EAAO,OAAA,GAAA,CAAI,GAAI,CAAA,MAAA,KAAW,CAAK,IAAA,CAAC,GAAI,CAAA,OAAA,IAAW,CAAC,GAAA,CAAI,OAAW,IAAA,CAAC,GAAI,CAAA,MAAA,CAAA;AACtE,EAAA;AAEO,MAAM,eAAkB,GAAA,CAAC,EAAE,GAAA,EAAwC,KAAA;AACxE,EAAO,OAAA,cAAA,CAAe,IAAI,GAAG,CAAA,CAAA;AAC/B;;;;"}

package/esm/list/common-hooks/list-dom-utils.js

@@ -0,0 +1,19 @@
+const listItemElement = (listEl, listItemIdx) => listEl.querySelector(`:scope > [data-idx="${listItemIdx}"]`);
+function listItemIndex(listItemEl) {
+  if (listItemEl) {
+    let idx = listItemEl.dataset.index;
+    if (idx) {
+      return parseInt(idx, 10);
+    } else if (idx = listItemEl.ariaPosInSet) {
+      return parseInt(idx, 10) - 1;
+    }
+  }
+  return -1;
+}
+const listItemId = (el) => el?.id;
+const closestListItem = (el) => el.closest("[data-index],[aria-posinset]");
+const closestListItemId = (el) => listItemId(closestListItem(el));
+const closestListItemIndex = (el) => listItemIndex(closestListItem(el));
+
+export { closestListItemId, closestListItemIndex, listItemElement, listItemId, listItemIndex };
+//# sourceMappingURL=list-dom-utils.js.map

package/esm/list/common-hooks/list-dom-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-dom-utils.js","sources":["../../../src/list/common-hooks/list-dom-utils.ts"],"sourcesContent":["export const listItemElement = (listEl: HTMLElement, listItemIdx: number) =>\n  listEl.querySelector(`:scope > [data-idx=\"${listItemIdx}\"]`);\n\nexport function listItemIndex(listItemEl?: HTMLElement) {\n  if (listItemEl) {\n    let idx: string | null | undefined = listItemEl.dataset.index;\n    if (idx) {\n      return parseInt(idx, 10);\n      // eslint-disable-next-line no-cond-assign\n    } else if ((idx = listItemEl.ariaPosInSet)) {\n      return parseInt(idx, 10) - 1;\n    }\n  }\n  return -1;\n}\n\nexport const listItemId = (el: HTMLElement | null) => el?.id;\n\nconst closestListItem = (el: HTMLElement) =>\n  el.closest(\"[data-index],[aria-posinset]\") as HTMLElement;\n\nexport const closestListItemId = (el: HTMLElement) =>\n  listItemId(closestListItem(el));\n\nexport const closestListItemIndex = (el: HTMLElement) =>\n  listItemIndex(closestListItem(el));\n"],"names":[],"mappings":"AAAa,MAAA,eAAA,GAAkB,CAAC,MAAqB,EAAA,WAAA,KACnD,OAAO,aAAc,CAAA,CAAA,oBAAA,EAAuB,WAAW,CAAI,EAAA,CAAA,EAAA;AAEtD,SAAS,cAAc,UAA0B,EAAA;AACtD,EAAA,IAAI,UAAY,EAAA;AACd,IAAI,IAAA,GAAA,GAAiC,WAAW,OAAQ,CAAA,KAAA,CAAA;AACxD,IAAA,IAAI,GAAK,EAAA;AACP,MAAO,OAAA,QAAA,CAAS,KAAK,EAAE,CAAA,CAAA;AAAA,KAEzB,MAAA,IAAY,GAAM,GAAA,UAAA,CAAW,YAAe,EAAA;AAC1C,MAAO,OAAA,QAAA,CAAS,GAAK,EAAA,EAAE,CAAI,GAAA,CAAA,CAAA;AAAA,KAC7B;AAAA,GACF;AACA,EAAO,OAAA,CAAA,CAAA,CAAA;AACT,CAAA;AAEa,MAAA,UAAA,GAAa,CAAC,EAAA,KAA2B,EAAI,EAAA,GAAA;AAE1D,MAAM,eAAkB,GAAA,CAAC,EACvB,KAAA,EAAA,CAAG,QAAQ,8BAA8B,CAAA,CAAA;AAEpC,MAAM,oBAAoB,CAAC,EAAA,KAChC,UAAW,CAAA,eAAA,CAAgB,EAAE,CAAC,EAAA;AAEzB,MAAM,uBAAuB,CAAC,EAAA,KACnC,aAAc,CAAA,eAAA,CAAgB,EAAE,CAAC;;;;"}