@salt-ds/lab 1.0.0-alpha.26 → 1.0.0-alpha.27

package/dist-es/tree/Tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  calcPreferredHeight,\n  closestListItemIndex,\n  CollectionIndexer,\n  CollectionItem,\n  GROUP_SELECTION_NONE,\n  isSelected,\n  SelectHandler,\n  SelectionChangeHandler,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n  useAutoSizer,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { TreeProps } from \"./treeTypes\";\n\nimport { useTree } from \"./useTree\";\nimport { TreeNode } from \"./TreeNode\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport treeCss from \"./Tree.css\";\n\nconst withBaseName = makePrefixer(\"saltTree\");\n\nconst getSelectedItemsFromSource = (\n  source: any[],\n  selectionStrategy: SelectionStrategy,\n  result: any[] = []\n) => {\n  const isSingleSelection =\n    selectionStrategy === \"default\" || selectionStrategy === \"deselectable\";\n  for (let item of source) {\n    if (item.selected === true) {\n      result.push(item);\n      if (isSingleSelection) {\n        break;\n      }\n    }\n    if (item.childNodes) {\n      getSelectedItemsFromSource(item.childNodes, selectionStrategy, result);\n      if (isSingleSelection && result.length === 1) {\n        break;\n      }\n    }\n  }\n\n  return isSingleSelection ? result[0] : result.length > 0 ? result : undefined;\n};\n\nexport const Tree = forwardRef(function Tree<\n  Item,\n  Selection extends SelectionStrategy = \"deselectable\"\n>(\n  {\n    className,\n    defaultSelected,\n    disabled,\n    groupSelection = GROUP_SELECTION_NONE,\n    height,\n    id: idProp,\n    onHighlight,\n    onToggle,\n    onSelect,\n    onSelectionChange,\n    revealSelected,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    style: styleProp,\n    width,\n    ...htmlAttributes\n  }: TreeProps<Item, Selection>,\n  forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree\",\n    css: treeCss,\n    window: targetWindow,\n  });\n\n  const id = useIdMemo(idProp);\n  const rootRef = useRef(null);\n  const contentRef = useRef(null);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    options: {\n      noChildrenLabel: \"No children available\",\n      revealSelected: revealSelected\n        ? selectedProp ?? defaultSelected ?? false\n        : undefined,\n    },\n  });\n\n  //------------- from original List\n  const preferredHeight =\n    height ??\n    calcPreferredHeight({\n      displayedItemCount: 10,\n      itemCount: collectionHook.data.length,\n      itemHeight: 36,\n      // getItemHeight,\n      // itemGapSize,\n    });\n\n  const autoSize = useAutoSizer<HTMLDivElement>({\n    containerRef: rootRef,\n    responsive: width === undefined || height === undefined,\n    height: preferredHeight,\n    width,\n  });\n  //---------------\n\n  const handleSelect = useCallback<SelectHandler<CollectionItem<Item>>>(\n    (evt, selectedItem) => {\n      if (onSelect) {\n        if (isValidElement(selectedItem.value)) {\n          onSelect(evt, selectedItem.label as any);\n        } else if (selectedItem.value !== null) {\n          onSelect(evt, selectedItem.value);\n        }\n      }\n    },\n    [onSelect]\n  );\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<CollectionItem<Item>, Selection>\n  >(\n    (evt, selected) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (onSelectionChange) {\n        onSelectionChange(\n          evt,\n          Array.isArray(selected)\n            ? (selected.map((s) => s.value) as returnType)\n            : selected && (selected.value as returnType)\n        );\n      }\n    },\n    [onSelectionChange]\n  );\n\n  // const getSelected = (\n  //   sel: Item | null | Item[]\n  // ):\n  //   | undefined\n  //   | (Selection extends SingleSelectionStrategy\n  //       ? CollectionItem<Item> | null\n  //       : CollectionItem<Item>[]) => {\n  //   if (sel !== undefined) {\n  //     return collectionHook.itemToCollectionItem<Selection, typeof sel>(sel);\n  //   } else if (Array.isArray(source)) {\n  //     const selected = getSelectedItemsFromSource(\n  //       source,\n  //       selectionStrategy ?? \"default\"\n  //     );\n  //     return Array.isArray(selected)\n  //       ? collectionHook.itemToCollectionItem(selected)\n  //       : selected\n  //       ? collectionHook.toCollectionItem(selected)\n  //       : undefined;\n  //   }\n  // };\n\n  const {\n    focusVisible,\n    highlightedIdx,\n    highlightItemAtIndex,\n    listHandlers,\n    listProps,\n    listItemHandlers,\n    selected,\n  } = useTree<Item, Selection>({\n    collectionHook,\n    containerRef: rootRef,\n    contentRef,\n    // Note this isn't enough for a Tree, because of nested structure\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    disabled,\n    groupSelection,\n    onHighlight,\n    onSelect: handleSelect,\n    onSelectionChange: handleSelectionChange,\n    onToggle,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  // TODO move into useTree (see useList)\n  const defaultItemHandlers = {\n    onMouseEnter: (evt: MouseEvent) => {\n      // if (!isScrolling.current) {\n      const idx = closestListItemIndex(evt.target as HTMLElement);\n      highlightItemAtIndex(idx!);\n      // onMouseEnterListItem && onMouseEnterListItem(evt, idx);\n      // }\n    },\n  };\n\n  const propsCommonToAllListItems = {\n    ...defaultItemHandlers,\n    ...listItemHandlers,\n    isLeaf: true,\n    role: \"treeitem\",\n  };\n  // const allowGroupSelect = groupSelectionEnabled(groupSelection);\n  const allowGroupSelect = false;\n\n  /**\n   * Add a ListItem from source item\n   */\n  function addLeafNode(\n    list: ReactElement[],\n    item: CollectionItem<Item>,\n    idx: CollectionIndexer\n  ) {\n    const itemProps = {\n      \"aria-disabled\": disabled || item.disabled,\n      \"aria-level\": item.level,\n      \"data-idx\": idx.value,\n      description: item.description,\n      id: item.id,\n      key: item.id,\n      highlighted: idx.value === highlightedIdx || undefined,\n      selected: isSelected<Item>(selected, item),\n      className: clsx({\n        focusVisible: focusVisible === idx.value,\n      }),\n    };\n\n    list.push(\n      <TreeNode\n        {...propsCommonToAllListItems}\n        {...itemProps}\n        label={item.label}\n      >\n        {/* {item.icon ? <span className={`${classBase}Node-icon`} /> : null} */}\n      </TreeNode>\n    );\n    idx.value += 1;\n  }\n\n  function addGroupNode(\n    list: ReactElement[],\n    items: CollectionItem<Item>[],\n    idx: CollectionIndexer,\n    id: string,\n    title: string\n  ) {\n    const { value: i } = idx;\n    const item = items[i];\n    idx.value += 1;\n    list.push(\n      <TreeNode\n        {...defaultItemHandlers}\n        {...listItemHandlers}\n        aria-disabled={disabled || item.disabled}\n        aria-expanded={item.expanded}\n        aria-level={item.level}\n        className={clsx({\n          focusVisible: focusVisible === i,\n          [withBaseName(\"toggle\")]: !allowGroupSelect,\n        })}\n        // data-icon={child.icon}\n        data-idx={i}\n        data-selectable\n        description={item.description}\n        highlighted={i === highlightedIdx}\n        id={id}\n        key={`header-${i}`}\n        label={title}\n        selected={isSelected<Item>(selected, item)}\n      >\n        {item.expanded ? (\n          <ul className={withBaseName(\"child-nodes\")} role=\"group\">\n            {renderItems(items, idx, item.level! + 1)}\n          </ul>\n        ) : null}\n      </TreeNode>\n    );\n  }\n\n  const renderItems = (\n    items: CollectionItem<Item>[],\n    idx: CollectionIndexer = { value: 0 },\n    level = 1\n  ): ReactElement[] => {\n    const listItems: ReactElement[] = [];\n    while (idx.value < items.length) {\n      const item = items[idx.value];\n      if (item.level! < level) {\n        break;\n      }\n      if (item.childNodes) {\n        addGroupNode(listItems, items, idx, item.id!, item.label!);\n      } else {\n        addLeafNode(listItems, item, idx);\n      }\n    }\n\n    return listItems;\n  };\n\n  function renderEmpty() {\n    // if (emptyMessage || showEmptyMessage) {\n    //   return (\n    //     <span className={withBaseName(\"empty-message\")}>\n    //       {emptyMessage ?? defaultEmptyMessage}\n    //     </span>\n    //   );\n    // } else {\n    return null;\n    // }\n  }\n\n  const renderContent = () => {\n    if (collectionHook.data.length) {\n      return renderItems(collectionHook.data);\n    } else {\n      renderEmpty();\n    }\n  };\n\n  return (\n    <div\n      {...htmlAttributes}\n      {...listHandlers}\n      {...listProps}\n      className={clsx(withBaseName(), className)}\n      id={`Tree-${id}`}\n      ref={useForkRef(rootRef, forwardedRef)}\n      style={{ ...styleProp, ...autoSize }}\n      tabIndex={0}\n    >\n      <ul\n        className={withBaseName(\"scrollingContentContainer\")}\n        ref={contentRef}\n        role=\"tree\"\n        // style={{ height: contentHeight }}\n      >\n        {renderContent()}\n      </ul>\n    </div>\n  );\n});\n"],"names":["Tree","treeCss","selected","id"],"mappings":"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"}
+{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  calcPreferredHeight,\n  closestListItemIndex,\n  CollectionIndexer,\n  CollectionItem,\n  GROUP_SELECTION_NONE,\n  isSelected,\n  SelectHandler,\n  SelectionChangeHandler,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n  useAutoSizer,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { TreeProps } from \"./treeTypes\";\n\nimport { useTree } from \"./useTree\";\nimport { TreeNode } from \"./TreeNode\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport treeCss from \"./Tree.css\";\n\nconst withBaseName = makePrefixer(\"saltTree\");\n\nconst getSelectedItemsFromSource = (\n  source: any[],\n  selectionStrategy: SelectionStrategy,\n  result: any[] = []\n) => {\n  const isSingleSelection =\n    selectionStrategy === \"default\" || selectionStrategy === \"deselectable\";\n  for (let item of source) {\n    if (item.selected === true) {\n      result.push(item);\n      if (isSingleSelection) {\n        break;\n      }\n    }\n    if (item.childNodes) {\n      getSelectedItemsFromSource(item.childNodes, selectionStrategy, result);\n      if (isSingleSelection && result.length === 1) {\n        break;\n      }\n    }\n  }\n\n  return isSingleSelection ? result[0] : result.length > 0 ? result : undefined;\n};\n\nexport const Tree = forwardRef(function Tree<\n  Item,\n  Selection extends SelectionStrategy = \"deselectable\"\n>(\n  {\n    className,\n    defaultSelected,\n    disabled,\n    groupSelection = GROUP_SELECTION_NONE,\n    height,\n    id: idProp,\n    onHighlight,\n    onToggle,\n    onSelect,\n    onSelectionChange,\n    revealSelected,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    style: styleProp,\n    width,\n    ...htmlAttributes\n  }: TreeProps<Item, Selection>,\n  forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree\",\n    css: treeCss,\n    window: targetWindow,\n  });\n\n  const id = useIdMemo(idProp);\n  const rootRef = useRef(null);\n  const contentRef = useRef(null);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    options: {\n      noChildrenLabel: \"No children available\",\n      revealSelected: revealSelected\n        ? Boolean(selectedProp) || Boolean(defaultSelected) || false\n        : undefined,\n    },\n  });\n\n  //------------- from original List\n  const preferredHeight =\n    height ??\n    calcPreferredHeight({\n      displayedItemCount: 10,\n      itemCount: collectionHook.data.length,\n      itemHeight: 36,\n      // getItemHeight,\n      // itemGapSize,\n    });\n\n  const autoSize = useAutoSizer<HTMLDivElement>({\n    containerRef: rootRef,\n    responsive: width === undefined || height === undefined,\n    height: preferredHeight,\n    width,\n  });\n  //---------------\n\n  const handleSelect = useCallback<SelectHandler<CollectionItem<Item>>>(\n    (evt, selectedItem) => {\n      if (onSelect) {\n        if (isValidElement(selectedItem.value)) {\n          onSelect(evt, selectedItem.label as any);\n        } else if (selectedItem.value !== null) {\n          onSelect(evt, selectedItem.value);\n        }\n      }\n    },\n    [onSelect]\n  );\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<CollectionItem<Item>, Selection>\n  >(\n    (evt, selected) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (onSelectionChange) {\n        onSelectionChange(\n          evt,\n          Array.isArray(selected)\n            ? (selected.map((s) => s.value) as returnType)\n            : selected && (selected.value as returnType)\n        );\n      }\n    },\n    [onSelectionChange]\n  );\n\n  // const getSelected = (\n  //   sel: Item | null | Item[]\n  // ):\n  //   | undefined\n  //   | (Selection extends SingleSelectionStrategy\n  //       ? CollectionItem<Item> | null\n  //       : CollectionItem<Item>[]) => {\n  //   if (sel !== undefined) {\n  //     return collectionHook.itemToCollectionItem<Selection, typeof sel>(sel);\n  //   } else if (Array.isArray(source)) {\n  //     const selected = getSelectedItemsFromSource(\n  //       source,\n  //       selectionStrategy ?? \"default\"\n  //     );\n  //     return Array.isArray(selected)\n  //       ? collectionHook.itemToCollectionItem(selected)\n  //       : selected\n  //       ? collectionHook.toCollectionItem(selected)\n  //       : undefined;\n  //   }\n  // };\n\n  const {\n    focusVisible,\n    highlightedIdx,\n    highlightItemAtIndex,\n    listHandlers,\n    listProps,\n    listItemHandlers,\n    selected,\n  } = useTree<Item, Selection>({\n    collectionHook,\n    containerRef: rootRef,\n    contentRef,\n    // Note this isn't enough for a Tree, because of nested structure\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    disabled,\n    groupSelection,\n    onHighlight,\n    onSelect: handleSelect,\n    onSelectionChange: handleSelectionChange,\n    onToggle,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  // TODO move into useTree (see useList)\n  const defaultItemHandlers = {\n    onMouseEnter: (evt: MouseEvent) => {\n      // if (!isScrolling.current) {\n      const idx = closestListItemIndex(evt.target as HTMLElement);\n      highlightItemAtIndex(idx!);\n      // onMouseEnterListItem && onMouseEnterListItem(evt, idx);\n      // }\n    },\n  };\n\n  const propsCommonToAllListItems = {\n    ...defaultItemHandlers,\n    ...listItemHandlers,\n    isLeaf: true,\n    role: \"treeitem\",\n  };\n  // const allowGroupSelect = groupSelectionEnabled(groupSelection);\n  const allowGroupSelect = false;\n\n  /**\n   * Add a ListItem from source item\n   */\n  function addLeafNode(\n    list: ReactElement[],\n    item: CollectionItem<Item>,\n    idx: CollectionIndexer\n  ) {\n    const itemProps = {\n      \"aria-disabled\": disabled || item.disabled,\n      \"aria-level\": item.level,\n      \"data-idx\": idx.value,\n      description: item.description,\n      id: item.id,\n      key: item.id,\n      highlighted: idx.value === highlightedIdx || undefined,\n      selected: isSelected<Item>(selected, item),\n      className: clsx({\n        focusVisible: focusVisible === idx.value,\n      }),\n    };\n\n    list.push(\n      <TreeNode\n        {...propsCommonToAllListItems}\n        {...itemProps}\n        label={item.label}\n      >\n        {/* {item.icon ? <span className={`${classBase}Node-icon`} /> : null} */}\n      </TreeNode>\n    );\n    idx.value += 1;\n  }\n\n  function addGroupNode(\n    list: ReactElement[],\n    items: CollectionItem<Item>[],\n    idx: CollectionIndexer,\n    id: string,\n    title: string\n  ) {\n    const { value: i } = idx;\n    const item = items[i];\n    idx.value += 1;\n    list.push(\n      <TreeNode\n        {...defaultItemHandlers}\n        {...listItemHandlers}\n        aria-disabled={disabled || item.disabled}\n        aria-expanded={item.expanded}\n        aria-level={item.level}\n        className={clsx({\n          focusVisible: focusVisible === i,\n          [withBaseName(\"toggle\")]: !allowGroupSelect,\n        })}\n        // data-icon={child.icon}\n        data-idx={i}\n        data-selectable\n        description={item.description}\n        highlighted={i === highlightedIdx}\n        id={id}\n        key={`header-${i}`}\n        label={title}\n        selected={isSelected<Item>(selected, item)}\n      >\n        {item.expanded ? (\n          <ul className={withBaseName(\"child-nodes\")} role=\"group\">\n            {renderItems(items, idx, item.level! + 1)}\n          </ul>\n        ) : null}\n      </TreeNode>\n    );\n  }\n\n  const renderItems = (\n    items: CollectionItem<Item>[],\n    idx: CollectionIndexer = { value: 0 },\n    level = 1\n  ): ReactElement[] => {\n    const listItems: ReactElement[] = [];\n    while (idx.value < items.length) {\n      const item = items[idx.value];\n      if (item.level! < level) {\n        break;\n      }\n      if (item.childNodes) {\n        addGroupNode(listItems, items, idx, item.id!, item.label!);\n      } else {\n        addLeafNode(listItems, item, idx);\n      }\n    }\n\n    return listItems;\n  };\n\n  function renderEmpty() {\n    // if (emptyMessage || showEmptyMessage) {\n    //   return (\n    //     <span className={withBaseName(\"empty-message\")}>\n    //       {emptyMessage ?? defaultEmptyMessage}\n    //     </span>\n    //   );\n    // } else {\n    return null;\n    // }\n  }\n\n  const renderContent = () => {\n    if (collectionHook.data.length) {\n      return renderItems(collectionHook.data);\n    } else {\n      renderEmpty();\n    }\n  };\n\n  return (\n    <div\n      {...htmlAttributes}\n      {...listHandlers}\n      {...listProps}\n      className={clsx(withBaseName(), className)}\n      id={`Tree-${id}`}\n      ref={useForkRef(rootRef, forwardedRef)}\n      style={{ ...styleProp, ...autoSize }}\n      tabIndex={0}\n    >\n      <ul\n        className={withBaseName(\"scrollingContentContainer\")}\n        ref={contentRef}\n        role=\"tree\"\n        // style={{ height: contentHeight }}\n      >\n        {renderContent()}\n      </ul>\n    </div>\n  );\n});\n"],"names":["Tree","treeCss","selected","id"],"mappings":"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"}

package/dist-types/combo-box-next/ComboBoxNext.d.ts

@@ -1,83 +1,10 @@
-import { ComponentPropsWithoutRef, ReactElement, Ref, SyntheticEvent } from "react";
-import { ListNextProps } from "../list-next";
-import { ComboBoxItemProps } from "./utils";
-import { UseComboBoxPortalProps } from "./useComboboxPortal";
-export interface ComboBoxNextProps<T> extends Omit<ComponentPropsWithoutRef<"input">, "onChange" | "onSelect"> {
+import { ReactNode } from "react";
+import { InputProps } from "@salt-ds/core";
+import { ListControlProps } from "../list-control/ListControlState";
+export interface ComboBoxNextProps extends InputProps, Omit<ListControlProps, "value" | "defaultValue"> {
     /**
-     * Additional props for the list component.
+     * The options to display in the combo box.
      */
-    ListProps?: ListNextProps;
-    /**
-     * Additional props for the portal.
-     */
-    PortalProps?: UseComboBoxPortalProps;
-    /**
-     * Controlled prop. Controls the Input value in the Combo Box Input.
-     */
-    inputValue?: string;
-    /**
-     * Controlled prop. Controls the Highlighted item in the Combo Box list.
-     */
-    highlightedItem?: string;
-    /**
-     * Controlled prop. Controls the Selected value in the Combo Box list.
-     */
-    selected?: string;
-    /**
-     * Initial input value for when the list is uncontrolled.
-     */
-    defaultInputValue?: string;
-    /**
-     * Initial selected value for when the list is uncontrolled.
-     */
-    defaultSelected?: string;
-    /**
-     * If `true`, the component will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Styling variant. Defaults to "primary".
-     */
-    variant?: "primary" | "secondary";
-    /**
-    /**
-     * The source of combobox items.
-     */
-    source: T[];
-    /**
-     * Optional ref for the list component
-     */
-    listRef?: Ref<HTMLUListElement>;
-    /**
-     * The component used for item instead of the default.
-     */
-    ListItem?: (props: ComboBoxItemProps<T>) => ReactElement<ComboBoxItemProps<T>>;
-    /**
-     * Function to be used as filter.
-     */
-    itemFilter?: (source: T[], filterValue?: string) => T[];
-    /**
-     * Callback for mouse over event
-     */
-    onMouseOver?: (event: SyntheticEvent) => void;
-    /**
-     * Callback for list selection event
-     */
-    onSelect?: (event: SyntheticEvent, data: {
-        value: string;
-    }) => void;
-    /**
-    /**
-     * Callback for list change event
-     */
-    onListChange?: (event: SyntheticEvent, data: {
-        value: string | undefined;
-    }) => void;
-    /**
-     * Callback for input change event
-     */
-    onChange?: (event: SyntheticEvent, data: {
-        value: string;
-    }) => void;
+    children?: ReactNode;
 }
-export declare const ComboBoxNext: import("react").ForwardRefExoticComponent<ComboBoxNextProps<unknown> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const ComboBoxNext: import("react").ForwardRefExoticComponent<ComboBoxNextProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/combo-box-next/useComboBoxNext.d.ts

@@ -0,0 +1,31 @@
+import { ListControlProps } from "../list-control/ListControlState";
+import { SyntheticEvent } from "react";
+import { OptionValue } from "../list-control/ListControlContext";
+export declare function useComboBoxNext(props: ListControlProps): {
+    select: (event: SyntheticEvent, option: OptionValue) => void;
+    multiselect: boolean;
+    openState: boolean;
+    setOpen: (event: SyntheticEvent<Element, Event>, newOpen: boolean) => void;
+    openKey: import("react").MutableRefObject<{
+        key: string;
+        altKey: boolean;
+    }>;
+    activeState: OptionValue | undefined;
+    setActive: (option?: OptionValue | undefined) => void;
+    selectedState: string[];
+    setSelectedState: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    clear: (event: SyntheticEvent<Element, Event>) => void;
+    valueState: string | number | readonly string[] | undefined;
+    setValueState: import("react").Dispatch<import("react").SetStateAction<string | number | readonly string[] | undefined>>;
+    focusVisibleState: boolean;
+    setFocusVisibleState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    focusedState: boolean;
+    setFocusedState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    listRef: import("react").RefObject<HTMLDivElement>;
+    options: HTMLElement[];
+    register: (optionValue: OptionValue, element: HTMLElement) => () => void;
+    getOptionAtIndex: (index: number) => OptionValue;
+    getIndexOfOption: (option: OptionValue) => number;
+    getOptionsMatching: (predicate: (option: OptionValue) => boolean) => OptionValue[];
+    getOptionFromSearch: (search: string, startFrom?: OptionValue | undefined) => OptionValue | undefined;
+};

package/dist-types/dropdown-next/DropdownNext.d.ts

@@ -1,49 +1,47 @@
-import { ListNextProps } from "../list-next";
-import { Ref, SyntheticEvent, ComponentPropsWithoutRef } from "react";
-import { Placement } from "@floating-ui/react";
-export interface DropdownNextProps extends Omit<ComponentPropsWithoutRef<"button">, "onSelect"> {
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { ListControlProps } from "../list-control/ListControlState";
+import { ValidationStatus } from "@salt-ds/core";
+export interface DropdownNextProps extends Omit<ComponentPropsWithoutRef<"button">, "value" | "defaultValue">, ListControlProps {
     /**
-     * If `true`, dropdown will be disabled.
+     * If `true`, the dropdown will be disabled.
      */
     disabled?: boolean;
     /**
-     * Initially selected value for the dropdown, for use only in uncontrolled component.
+     * If `true`, the dropdown will be read-only.
      */
-    defaultSelected?: string;
+    readOnly?: boolean;
     /**
-     * List of options when using a dropdown.
+     * The options to display in the dropdown.
      */
-    source: string[];
+    children?: ReactNode;
     /**
-     * If `true`, dropdown is read only.
+     * The marker to use in an empty read only dropdown.
+     * Use `''` to disable this feature. Defaults to '—'.
      */
-    readOnly?: boolean;
+    emptyReadOnlyMarker?: string;
     /**
-     * Background styling variant. Defaults to `primary` .
+     * If `true`, the dropdown will be multiselect.
      */
-    variant?: "primary" | "secondary";
+    multiselect?: boolean;
     /**
-     * Placement of dropdown list. Defaults to `bottom` .
+     * The text shown when the dropdown has no value.
      */
-    placement?: Placement;
+    placeholder?: string;
     /**
-     * Optional ref for the list component.
+     * If `true`, the dropdown will be required.
      */
-    listRef?: Ref<HTMLUListElement>;
+    required?: boolean;
     /**
-     * Additional props for dropdown list.
+     * Start adornment component
      */
-    ListProps?: ListNextProps;
-    open?: boolean;
+    startAdornment?: ReactNode;
     /**
-     * Callback for list selection event
+     * Styling variant. Defaults to "primary".
      */
-    onSelect?: (event: SyntheticEvent, data: {
-        value: string;
-    }) => void;
+    variant?: "primary" | "secondary";
     /**
-    /* Selected prop for use in controlled component. */
-    selected?: string;
-    highlightedItem?: string;
+     * Validation status, one of "error" | "warning" | "success".
+     */
+    validationStatus?: Exclude<ValidationStatus, "info">;
 }
 export declare const DropdownNext: import("react").ForwardRefExoticComponent<DropdownNextProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/index.d.ts

@@ -33,12 +33,11 @@ export * from "./logo";
 export * from "./menu-button";
 export * from "./metric";
 export * from "./navigation-item";
+export * from "./option";
 export * from "./overlay";
 export * from "./pagination";
 export * from "./parent-child-item";
 export * from "./parent-child-layout";
-export * from "./pill";
-export * from "./pill-next";
 export * from "./portal";
 export * from "./progress";
 export * from "./query-input";
@@ -53,6 +52,7 @@ export * from "./tabs";
 export * from "./tabs-next";
 export * from "./toast-group";
 export * from "./tokenized-input";
+export * from "./tokenized-input-next";
 export * from "./toolbar";
 export * from "./tree";
 export * from "./utils";

package/dist-types/list-control/ListControlContext.d.ts

@@ -0,0 +1,20 @@
+import { SyntheticEvent } from "react";
+export interface OptionValue {
+    id: string;
+    disabled: boolean;
+    value: string;
+    text: string;
+}
+export interface ListControlContextValue {
+    openState: boolean;
+    setOpen: (event: SyntheticEvent, newOpen: boolean) => void;
+    register: (optionValue: OptionValue, element: HTMLElement) => () => void;
+    selectedState: string[];
+    select: (event: SyntheticEvent, option: OptionValue) => void;
+    activeState?: OptionValue;
+    setActive: (option: OptionValue) => void;
+    multiselect: boolean;
+    focusVisibleState: boolean;
+}
+export declare const ListControlContext: import("react").Context<ListControlContextValue>;
+export declare function useListControlContext(): ListControlContextValue;

package/dist-types/list-control/ListControlState.d.ts

@@ -0,0 +1,68 @@
+import { SyntheticEvent } from "react";
+import { OptionValue } from "./ListControlContext";
+export interface ListControlProps {
+    /**
+     * If true, the list will be open by default.
+     */
+    defaultOpen?: boolean;
+    /**
+     * If true, the list will be open. Useful for controlling the component.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the open state changes.
+     */
+    onOpenChange?: (event: SyntheticEvent, newOpen: boolean) => void;
+    /**
+     * The default selected options. If this is provided `defaultValue` should be provided as well.
+     */
+    defaultSelected?: string[];
+    /**
+     * The selected options. The component will be controlled if this prop is provided.
+     */
+    selected?: string[];
+    /**
+     * Callback fired when the selected options change.
+     */
+    onSelectionChange?: (event: SyntheticEvent, newSelected: string[]) => void;
+    /**
+     * The default value.
+     */
+    defaultValue?: string | readonly string[] | number | undefined;
+    /**
+     * The value. The component will be controlled if this prop is provided.
+     */
+    value?: string | readonly string[] | number | undefined;
+    /**
+     * If true, multiple options can be selected.
+     */
+    multiselect?: boolean;
+}
+export declare function useListControl(props: ListControlProps): {
+    multiselect: boolean;
+    openState: boolean;
+    setOpen: (event: SyntheticEvent, newOpen: boolean) => void;
+    openKey: import("react").MutableRefObject<{
+        key: string;
+        altKey: boolean;
+    }>;
+    activeState: OptionValue | undefined;
+    setActive: (option?: OptionValue | undefined) => void;
+    selectedState: string[];
+    setSelectedState: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    select: (event: SyntheticEvent, option: OptionValue) => void;
+    clear: (event: SyntheticEvent) => void;
+    valueState: string | number | readonly string[] | undefined;
+    setValueState: import("react").Dispatch<import("react").SetStateAction<string | number | readonly string[] | undefined>>;
+    focusVisibleState: boolean;
+    setFocusVisibleState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    focusedState: boolean;
+    setFocusedState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    listRef: import("react").RefObject<HTMLDivElement>;
+    options: HTMLElement[];
+    register: (optionValue: OptionValue, element: HTMLElement) => () => void;
+    getOptionAtIndex: (index: number) => OptionValue;
+    getIndexOfOption: (option: OptionValue) => number;
+    getOptionsMatching: (predicate: (option: OptionValue) => boolean) => OptionValue[];
+    getOptionFromSearch: (search: string, startFrom?: OptionValue | undefined) => OptionValue | undefined;
+};

package/dist-types/navigation-item/ConditionalWrapper.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { NavigationItemProps } from "./NavigationItem";
-interface ConditionalWrapperProps extends Pick<NavigationItemProps, "parent" | "expanded" | "onExpand" | "active" | "href"> {
+interface ConditionalWrapperProps extends Pick<NavigationItemProps, "parent" | "expanded" | "onExpand" | "active" | "href" | "onClick"> {
     children: ReactNode;
     className: string;
 }

package/dist-types/navigation-item/ExpansionIcon.d.ts

@@ -1,2 +1,2 @@
 import { NavigationItemProps } from "./NavigationItem";
-export declare function ExpansionIcon({ expanded, orientation, className, }: Pick<NavigationItemProps, "expanded" | "orientation" | "className">): JSX.Element;
+export declare function ExpansionIcon({ expanded, orientation, }: Pick<NavigationItemProps, "expanded" | "orientation" | "className">): JSX.Element;

package/dist-types/option/Option.d.ts

@@ -0,0 +1,20 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface OptionProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * If `true`, the option will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The value of the option.
+     */
+    value: string;
+    /**
+     * The text value of the option. If not provided, the text value will be inferred from the children.
+     */
+    textValue?: string;
+    /**
+     * The content of the option.
+     */
+    children?: ReactNode;
+}
+export declare const Option: import("react").ForwardRefExoticComponent<OptionProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/option/OptionGroup.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface OptionGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The label of the option group.
+     */
+    label?: string;
+    /**
+     * Options to be rendered inside the option group.
+     */
+    children?: ReactNode;
+}
+export declare const OptionGroup: import("react").ForwardRefExoticComponent<OptionGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/option/OptionList.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface OptionListProps extends ComponentPropsWithoutRef<"div"> {
+    collapsed?: boolean;
+}
+export declare const OptionList: import("react").ForwardRefExoticComponent<OptionListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/option/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Option";
+export * from "./OptionGroup";

package/dist-types/scrim/Scrim.d.ts

@@ -1,68 +1,13 @@
-import { HTMLAttributes, RefObject, SyntheticEvent } from "react";
-import { FocusManagerProps } from "../focus-manager";
-export interface ScrimProps extends HTMLAttributes<HTMLDivElement> {
+import { ComponentPropsWithoutRef } from "react";
+export interface ScrimProps extends ComponentPropsWithoutRef<"div"> {
     /**
-     * Ref of the element that automatically receives focus when the Scrim is opened.
+     * If `true` the scrim is bound to the document viewport.
+     * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).
      */
-    autoFocusRef?: FocusManagerProps["autoFocusRef"];
+    fixed?: boolean;
     /**
-     * Prop to enable escape key to close scrim.
-     * The default value of this props is false
-     */
-    closeWithEscape?: boolean;
-    /**
-     * If `true`, the trap focus will not automatically shift focus to itself when it opens, and
-     * replace it to the last focused element when it closes.
-     */
-    disableAutoFocus?: boolean;
-    /**
-     * If `true`, the trap focus will not prevent focus from leaving the trap focus while open.
-     */
-    disableFocusTrap?: boolean;
-    /**
-     * If `true`, the trap focus will not restore focus to previously focused element once
-     * trap focus is hidden.
-     */
-    disableReturnFocus?: boolean;
-    /**
-     * By default, an error will be thrown if the focus trap contains no elements in its tab order.
-     * With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found.
-     * For example, you may want a popover's `<div>` to receive focus if the popover's content includes no tabbable elements.
-     */
-    fallbackFocusRef?: FocusManagerProps["fallbackFocusRef"];
-    /**
-     * The handler for backdrop click on Scrim.
-     */
-    onBackDropClick?: (e: SyntheticEvent) => void;
-    /**
-     * The handler for onClose of Scrim.
-     */
-    onClose?: () => void;
-    /**
-     * To maintain open and close of the scrim.
+     * If `true` the scrim is shown.
      */
     open?: boolean;
-    /**
-     * Set to true to enable the container use case. If true the Scrim will be bound to a container ref you pass via the `parentRef` prop.
-     * Default value is false, and the default behavior is for Scrim to be bound to the document viewport.
-     */
-    enableContainerMode?: boolean;
-    /**
-     * Prop necessary to enable container use case. Pass the parent element ref that you want Scrim to be bound to.
-     * Default value is undefined, and the default behavior is for Scrim to be bound to the document viewport.
-     */
-    containerRef?: RefObject<HTMLElement>;
-    /**
-     * Options object to pass to the `focus()` method that is called on the previously focused element when Scrim is closed.
-     */
-    returnFocusOptions?: FocusManagerProps["returnFocusOptions"];
-    /**
-     * comma separated string of query selectors which may need to be overridden for edge cases.
-     */
-    tabEnabledSelectors?: string;
-    /**
-     * Prop to pass z-index for Scrim.
-     */
-    zIndex?: number;
 }
 export declare const Scrim: import("react").ForwardRefExoticComponent<ScrimProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/scrim/index.d.ts

@@ -1,2 +1 @@
 export * from "./Scrim";
-export * from "./ScrimContext";

package/dist-types/tokenized-input/internal/InputPill.d.ts

@@ -1,16 +1,18 @@
 import { MutableRefObject } from "react";
-import { PillProps } from "../../pill";
-export declare type InputPillProps = Omit<PillProps<"basic" | "closable">, "variant" | "onDelete" | "clickable"> & {
+import { PillProps } from "@salt-ds/core";
+export declare type InputPillProps = PillProps & {
     /**
      * An ref object holds pills index map to width.
      */
-    pillsRef: MutableRefObject<{
-        [index: number]: number | undefined;
-    }>;
+    pillsRef: MutableRefObject<Record<number, number | undefined>>;
     /**
      * Index of the pill within Input.
      */
     index: number;
+    /**
+     * Pill label.
+     */
+    label?: string;
     /**
      * Whether the pill is the last visible one within Input.
      */

package/dist-types/tokenized-input-next/TokenizedInputNext.d.ts

@@ -0,0 +1,51 @@
+import { ButtonProps, NecessityType, ValidationStatus } from "@salt-ds/core";
+import { ChangeEventHandler, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, ReactEventHandler, Ref, SyntheticEvent, TextareaHTMLAttributes } from "react";
+import { TokenizedInputNextState } from "./useTokenizedInputNext";
+declare type ChangeHandler<Item> = (event: SyntheticEvent, selectedItems: Item[] | undefined) => void;
+declare type ExpandButtonProps = Pick<ButtonProps, "role" | "aria-roledescription" | "aria-describedby"> & {
+    "aria-label"?: string;
+};
+export interface TokenizedInputNextProps<Item> extends Partial<TokenizedInputNextState<Item>>, Omit<HTMLAttributes<HTMLDivElement>, "onFocus" | "onBlur" | "onChange" | "onKeyUp" | "onKeyDown"> {
+    ExpandButtonProps?: ExpandButtonProps;
+    disabled?: boolean;
+    focused?: boolean;
+    expandButtonRef?: Ref<HTMLButtonElement>;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement | HTMLButtonElement>;
+    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement | HTMLButtonElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement | HTMLButtonElement>;
+    onRemoveItem?: (event: SyntheticEvent, index: number) => void;
+    onInputBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    onInputFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    onInputChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    onClick?: ReactEventHandler;
+    onClear?: ReactEventHandler;
+    delimiters?: string[];
+    disableAddOnBlur?: boolean;
+    defaultSelected?: Item[];
+    onChange?: ChangeHandler<Item>;
+    onCollapse?: ReactEventHandler;
+    onExpand?: ReactEventHandler;
+    /**
+     * Validation status.
+     */
+    validationStatus?: Omit<ValidationStatus, "info">;
+    /**
+     * If `true`, the component is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.
+     */
+    textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
+    /**
+     * Optional ref for the textarea component
+     */
+    textAreaRef?: Ref<HTMLTextAreaElement>;
+    necessity?: NecessityType;
+    /**
+     * Styling variant. Defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
+}
+export declare const TokenizedInputNext: import("react").ForwardRefExoticComponent<TokenizedInputNextProps<unknown> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/tokenized-input-next/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TokenizedInputNext";
+export * from "./useTokenizedInputNext";

package/dist-types/tokenized-input-next/internal/InputPill.d.ts

@@ -0,0 +1,29 @@
+import { MutableRefObject, SyntheticEvent } from "react";
+import { PillProps } from "@salt-ds/core";
+export declare type InputPillProps = PillProps & {
+    /**
+     * A ref object holds pills index map to width.
+     */
+    pillsRef: MutableRefObject<Record<number, number | undefined>>;
+    /**
+     * Index of the pill within Input.
+     */
+    index: number;
+    /**
+     * Whether the pill is the last visible one within Input.
+     */
+    lastVisible?: boolean;
+    /**
+     * Pill label.
+     */
+    label?: string;
+    /**
+     * Whether the pill is highlighted.
+     */
+    highlighted?: boolean;
+    /**
+     * Callback when pill is deleted.
+     */
+    onClose?: (event: SyntheticEvent, index: number) => void;
+};
+export declare const InputPill: import("react").NamedExoticComponent<InputPillProps>;