@salt-ds/lab 1.0.0-alpha.3 → 1.0.0-alpha.30

package/dist-es/combo-box-next/ComboBoxNext.js

@@ -0,0 +1,316 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'react';
+import { makePrefixer, useFormFieldProps, useFloatingComponent, useFloatingUI, useForkRef, useId, Input, Button } from '@salt-ds/core';
+import { ListControlContext } from '../list-control/ListControlContext.js';
+import { clsx } from 'clsx';
+import { size, flip } from '@floating-ui/react';
+import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
+import { useComboBoxNext } from './useComboBoxNext.js';
+import { OptionList } from '../option/OptionList.js';
+
+const withBaseName = makePrefixer("saltComboBoxNext");
+const ComboBoxNext = forwardRef(
+  function ComboBox(props, ref) {
+    var _a, _b;
+    const {
+      children,
+      className,
+      disabled: disabledProp,
+      endAdornment,
+      readOnly: readOnlyProp,
+      multiselect,
+      onSelectionChange,
+      selected,
+      defaultSelected,
+      defaultOpen,
+      onOpenChange,
+      onChange,
+      open,
+      inputProps: inputPropsProp,
+      variant = "primary",
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      value,
+      defaultValue,
+      ...rest
+    } = props;
+    const {
+      a11yProps: { "aria-labelledby": formFieldLabelledBy } = {},
+      disabled: formFieldDisabled,
+      readOnly: formFieldReadOnly
+    } = useFormFieldProps();
+    const disabled = Boolean(disabledProp) || formFieldDisabled;
+    const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
+    const listControl = useComboBoxNext({
+      open,
+      defaultOpen,
+      onOpenChange,
+      multiselect,
+      defaultSelected,
+      selected,
+      onSelectionChange,
+      value,
+      defaultValue
+    });
+    const {
+      activeState,
+      setActive,
+      openState,
+      setOpen,
+      openKey,
+      getOptionAtIndex,
+      getIndexOfOption,
+      getOptionsMatching,
+      options,
+      selectedState,
+      select,
+      clear,
+      setFocusVisibleState,
+      focusedState,
+      setFocusedState,
+      listRef,
+      valueState,
+      setValueState
+    } = listControl;
+    const { Component: FloatingComponent } = useFloatingComponent();
+    const { x, y, strategy, elements, floating, reference } = useFloatingUI({
+      open,
+      placement: "bottom-start",
+      middleware: [
+        size({
+          apply({ rects, elements: elements2, availableHeight }) {
+            Object.assign(elements2.floating.style, {
+              minWidth: `${rects.reference.width}px`,
+              maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`
+            });
+          }
+        }),
+        flip({ fallbackStrategy: "initialPlacement" })
+      ]
+    });
+    const handleRef = useForkRef(reference, ref);
+    const inputRef = useRef(null);
+    const handleButtonClick = (event) => {
+      if (!readOnly) {
+        event.stopPropagation();
+        setFocusVisibleState(false);
+        setOpen(event, !openState);
+      }
+    };
+    const handleButtonFocus = () => {
+      var _a2;
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    };
+    const handleKeyDown = (event) => {
+      const currentIndex = activeState ? getIndexOfOption(activeState) : -1;
+      const count = options.length - 1;
+      if (readOnly) {
+        return;
+      }
+      if (!openState) {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          setOpen(event, true);
+          return;
+        }
+      }
+      let newActive;
+      switch (event.key) {
+        case "ArrowDown":
+          newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));
+          break;
+        case "ArrowUp":
+          newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));
+          break;
+        case "Home":
+          newActive = getOptionAtIndex(0);
+          break;
+        case "End":
+          newActive = getOptionAtIndex(count);
+          break;
+        case "PageUp":
+          newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));
+          break;
+        case "PageDown":
+          newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));
+          break;
+        case "Enter":
+          if (openState && (activeState == null ? void 0 : activeState.disabled)) {
+            event.preventDefault();
+            return;
+          }
+          if (!openState || !activeState) {
+            return;
+          }
+          select(event, activeState);
+          if (!multiselect) {
+            event.preventDefault();
+            setOpen(event, false);
+          }
+          break;
+        case "Escape":
+          setOpen(event, false);
+          break;
+        case "Tab":
+          if (!multiselect && activeState) {
+            select(event, activeState);
+          }
+          break;
+      }
+      if (newActive && (newActive == null ? void 0 : newActive.id) != (activeState == null ? void 0 : activeState.id)) {
+        event.preventDefault();
+        setActive(newActive);
+        setFocusVisibleState(true);
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleFocus = (event) => {
+      setFocusedState(true);
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    const ignoreBlur = useRef(false);
+    const handleBlur = (event) => {
+      if (!ignoreBlur.current) {
+        setOpen(event, false);
+      }
+      ignoreBlur.current = false;
+      setFocusedState(false);
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    const handleClick = (event) => {
+      if (!readOnly) {
+        setOpen(event, true);
+      }
+      onClick == null ? void 0 : onClick(event);
+    };
+    const handleChange = (event) => {
+      if (!openState) {
+        setOpen(event, true);
+      }
+      if (event.target.value === "" && !multiselect) {
+        clear(event);
+      }
+      setValueState(event.target.value);
+      queueMicrotask(() => {
+        const newOption = getOptionAtIndex(0);
+        if (newOption) {
+          setActive(newOption);
+        }
+      });
+      onChange == null ? void 0 : onChange(event);
+    };
+    const handleListMouseOver = () => {
+      setFocusVisibleState(false);
+    };
+    const handleListMouseDown = () => {
+      ignoreBlur.current = true;
+    };
+    const handleListFocus = () => {
+      var _a2;
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    };
+    const handleListClick = () => {
+      var _a2;
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+    };
+    useEffect(() => {
+      const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
+      if (openState && activeIndex < 0) {
+        if (openKey.current.key === "ArrowDown") {
+          setActive(getOptionAtIndex(0));
+        } else if (openKey.current.key === "ArrowUp") {
+          setActive(getOptionAtIndex(options.length - 1));
+        } else {
+          if (selectedState.length > 0) {
+            const selected2 = getOptionsMatching(
+              (option) => option.value === selectedState[0]
+            ).pop();
+            if (selected2) {
+              setActive(selected2);
+            }
+          } else {
+            setActive(getOptionAtIndex(0));
+          }
+        }
+      } else if (!openState) {
+        setActive(void 0);
+      }
+    }, [openState, children]);
+    const buttonId = useId();
+    const listId = useId();
+    return /* @__PURE__ */ jsxs(ListControlContext.Provider, {
+      value: listControl,
+      children: [
+        /* @__PURE__ */ jsx(Input, {
+          className: clsx(withBaseName(), className),
+          endAdornment: /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              endAdornment,
+              !readOnly ? /* @__PURE__ */ jsx(Button, {
+                "aria-labelledby": clsx(buttonId, formFieldLabelledBy),
+                "aria-label": "Show options",
+                "aria-expanded": openState,
+                "aria-controls": openState ? listId : void 0,
+                "aria-haspopup": "listbox",
+                disabled,
+                variant: "secondary",
+                onClick: handleButtonClick,
+                onFocus: handleButtonFocus,
+                tabIndex: -1,
+                children: openState ? /* @__PURE__ */ jsx(ChevronUpIcon, {
+                  "aria-hidden": true
+                }) : /* @__PURE__ */ jsx(ChevronDownIcon, {
+                  "aria-hidden": true
+                })
+              }) : void 0
+            ]
+          }),
+          onClick: handleClick,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          onKeyDown: handleKeyDown,
+          onChange: handleChange,
+          role: "combobox",
+          disabled,
+          readOnly,
+          inputProps: {
+            role: "combobox",
+            "aria-expanded": openState,
+            "aria-multiselectable": multiselect,
+            "aria-controls": openState ? listId : void 0,
+            ...inputPropsProp
+          },
+          "aria-activedescendant": activeState == null ? void 0 : activeState.id,
+          variant,
+          inputRef,
+          value: valueState,
+          ...rest,
+          ref: handleRef
+        }),
+        /* @__PURE__ */ jsx(FloatingComponent, {
+          open: (openState || focusedState) && !readOnly,
+          left: x != null ? x : 0,
+          top: y != null ? y : 0,
+          position: strategy,
+          width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+          height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+          ref: floating,
+          children: /* @__PURE__ */ jsx(OptionList, {
+            collapsed: !openState,
+            ref: listRef,
+            id: listId,
+            onMouseOver: handleListMouseOver,
+            onMouseDown: handleListMouseDown,
+            onFocus: handleListFocus,
+            onClick: handleListClick,
+            children
+          })
+        })
+      ]
+    });
+  }
+);
+
+export { ComboBoxNext };
+//# sourceMappingURL=ComboBoxNext.js.map

package/dist-es/combo-box-next/ComboBoxNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  FocusEvent,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  useEffect,\n  useRef,\n} from \"react\";\nimport {\n  Button,\n  Input,\n  InputProps,\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useFormFieldProps,\n  useId,\n} from \"@salt-ds/core\";\nimport { ListControlProps } from \"../list-control/ListControlState\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { clsx } from \"clsx\";\nimport { flip, size } from \"@floating-ui/react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComboBoxNext } from \"./useComboBoxNext\";\nimport { OptionList } from \"../option/OptionList\";\n\nexport interface ComboBoxNextProps\n  extends InputProps,\n    Omit<ListControlProps, \"value\" | \"defaultValue\"> {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport const ComboBoxNext = forwardRef<HTMLDivElement, ComboBoxNextProps>(\n  function ComboBox(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      endAdornment,\n      readOnly: readOnlyProp,\n      multiselect,\n      onSelectionChange,\n      selected,\n      defaultSelected,\n      defaultOpen,\n      onOpenChange,\n      onChange,\n      open,\n      inputProps: inputPropsProp,\n      variant = \"primary\",\n      onClick,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      value,\n      defaultValue,\n      ...rest\n    } = props;\n\n    const {\n      a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n    } = useFormFieldProps();\n\n    const disabled = Boolean(disabledProp) || formFieldDisabled;\n    const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n\n    const listControl = useComboBoxNext({\n      open,\n      defaultOpen,\n      onOpenChange,\n      multiselect,\n      defaultSelected,\n      selected,\n      onSelectionChange,\n      value,\n      defaultValue,\n    });\n\n    const {\n      activeState,\n      setActive,\n      openState,\n      setOpen,\n      openKey,\n      getOptionAtIndex,\n      getIndexOfOption,\n      getOptionsMatching,\n      options,\n      selectedState,\n      select,\n      clear,\n      setFocusVisibleState,\n      focusedState,\n      setFocusedState,\n      listRef,\n      valueState,\n      setValueState,\n    } = listControl;\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { x, y, strategy, elements, floating, reference } = useFloatingUI({\n      open,\n      placement: \"bottom-start\",\n      middleware: [\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n            });\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n    const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (!readOnly) {\n        event.stopPropagation();\n        setFocusVisibleState(false);\n        setOpen(event, !openState);\n      }\n    };\n\n    const handleButtonFocus = () => {\n      inputRef.current?.focus();\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n      const count = options.length - 1;\n\n      if (readOnly) {\n        return;\n      }\n\n      if (!openState) {\n        if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n          setOpen(event, true);\n          return;\n        }\n      }\n\n      let newActive;\n      switch (event.key) {\n        case \"ArrowDown\":\n          newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n          break;\n        case \"ArrowUp\":\n          newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n          break;\n        case \"Home\":\n          newActive = getOptionAtIndex(0);\n          break;\n        case \"End\":\n          newActive = getOptionAtIndex(count);\n          break;\n        case \"PageUp\":\n          newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n          break;\n        case \"PageDown\":\n          newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n          break;\n        case \"Enter\":\n          if (openState && activeState?.disabled) {\n            event.preventDefault();\n            return;\n          }\n\n          if (!openState || !activeState) {\n            return;\n          }\n\n          select(event, activeState);\n\n          if (!multiselect) {\n            event.preventDefault();\n            setOpen(event, false);\n          }\n\n          break;\n        case \"Escape\":\n          setOpen(event, false);\n          break;\n        case \"Tab\":\n          if (!multiselect && activeState) {\n            select(event, activeState);\n          }\n          break;\n      }\n\n      if (newActive && newActive?.id != activeState?.id) {\n        event.preventDefault();\n        setActive(newActive);\n        setFocusVisibleState(true);\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n      setFocusedState(true);\n\n      onFocus?.(event);\n    };\n\n    const ignoreBlur = useRef(false);\n\n    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n      if (!ignoreBlur.current) {\n        setOpen(event, false);\n      }\n      ignoreBlur.current = false;\n\n      setFocusedState(false);\n      onBlur?.(event);\n    };\n\n    const handleClick = (event: MouseEvent<HTMLInputElement>) => {\n      if (!readOnly) {\n        setOpen(event, true);\n      }\n\n      onClick?.(event);\n    };\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (!openState) {\n        setOpen(event, true);\n      }\n\n      if (event.target.value === \"\" && !multiselect) {\n        clear(event);\n      }\n\n      setValueState(event.target.value);\n\n      // Wait for the filter to happen\n      queueMicrotask(() => {\n        const newOption = getOptionAtIndex(0);\n        if (newOption) {\n          setActive(newOption);\n        }\n      });\n      onChange?.(event);\n    };\n\n    const handleListMouseOver = () => {\n      setFocusVisibleState(false);\n    };\n\n    const handleListMouseDown = () => {\n      ignoreBlur.current = true;\n    };\n\n    const handleListFocus = () => {\n      inputRef.current?.focus();\n    };\n\n    const handleListClick = () => {\n      inputRef.current?.focus();\n    };\n\n    useEffect(() => {\n      // We check the active index because the active item may have been removed\n      const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n      if (openState && activeIndex < 0) {\n        if (openKey.current.key === \"ArrowDown\") {\n          setActive(getOptionAtIndex(0));\n        } else if (openKey.current.key === \"ArrowUp\") {\n          setActive(getOptionAtIndex(options.length - 1));\n        } else {\n          if (selectedState.length > 0) {\n            const selected = getOptionsMatching(\n              (option) => option.value === selectedState[0]\n            ).pop();\n            if (selected) {\n              setActive(selected);\n            }\n          } else {\n            setActive(getOptionAtIndex(0));\n          }\n        }\n      } else if (!openState) {\n        setActive(undefined);\n      }\n    }, [openState, children]);\n\n    const buttonId = useId();\n    const listId = useId();\n\n    return (\n      <ListControlContext.Provider value={listControl}>\n        <Input\n          className={clsx(withBaseName(), className)}\n          endAdornment={\n            <>\n              {endAdornment}\n              {!readOnly ? (\n                <Button\n                  aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n                  aria-label=\"Show options\"\n                  aria-expanded={openState}\n                  aria-controls={openState ? listId : undefined}\n                  aria-haspopup=\"listbox\"\n                  disabled={disabled}\n                  variant=\"secondary\"\n                  onClick={handleButtonClick}\n                  onFocus={handleButtonFocus}\n                  tabIndex={-1}\n                >\n                  {openState ? (\n                    <ChevronUpIcon aria-hidden />\n                  ) : (\n                    <ChevronDownIcon aria-hidden />\n                  )}\n                </Button>\n              ) : undefined}\n            </>\n          }\n          onClick={handleClick}\n          onBlur={handleBlur}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          onChange={handleChange}\n          role=\"combobox\"\n          disabled={disabled}\n          readOnly={readOnly}\n          inputProps={{\n            role: \"combobox\",\n            \"aria-expanded\": openState,\n            \"aria-multiselectable\": multiselect,\n            \"aria-controls\": openState ? listId : undefined,\n            ...inputPropsProp,\n          }}\n          aria-activedescendant={activeState?.id}\n          variant={variant}\n          inputRef={inputRef}\n          value={valueState}\n          {...rest}\n          ref={handleRef}\n        />\n        <FloatingComponent\n          open={(openState || focusedState) && !readOnly}\n          left={x ?? 0}\n          top={y ?? 0}\n          position={strategy}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n          ref={floating}\n        >\n          <OptionList\n            collapsed={!openState}\n            ref={listRef}\n            id={listId}\n            onMouseOver={handleListMouseOver}\n            onMouseDown={handleListMouseDown}\n            onFocus={handleListFocus}\n            onClick={handleListClick}\n          >\n            {children}\n          </OptionList>\n        </FloatingComponent>\n      </ListControlContext.Provider>\n    );\n  }\n);\n"],"names":["elements","_a","selected"],"mappings":"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"}

package/dist-es/combo-box-next/useComboBoxNext.js

@@ -0,0 +1,51 @@
+import { useListControl } from '../list-control/ListControlState.js';
+
+function useComboBoxNext(props) {
+  const {
+    open,
+    defaultOpen,
+    onOpenChange,
+    multiselect,
+    defaultSelected,
+    selected,
+    onSelectionChange,
+    defaultValue,
+    value
+  } = props;
+  const listControl = useListControl({
+    open,
+    defaultOpen,
+    onOpenChange,
+    multiselect,
+    defaultSelected,
+    selected,
+    onSelectionChange,
+    defaultValue,
+    value
+  });
+  const { selectedState, getOptionsMatching, setValueState, setSelectedState } = listControl;
+  const select = (event, option) => {
+    const { disabled, value: value2 } = option;
+    if (disabled) {
+      return;
+    }
+    let newSelected = [value2];
+    if (multiselect) {
+      if (selectedState.includes(value2)) {
+        newSelected = selectedState.filter((item) => item !== value2);
+      } else {
+        newSelected = selectedState.concat([value2]);
+      }
+    }
+    setSelectedState(newSelected);
+    const newValue = getOptionsMatching(
+      (option2) => newSelected.includes(option2.value)
+    ).map((option2) => option2.text);
+    setValueState(multiselect ? "" : newValue[0]);
+    onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
+  };
+  return { ...listControl, select };
+}
+
+export { useComboBoxNext };
+//# sourceMappingURL=useComboBoxNext.js.map

package/dist-es/combo-box-next/useComboBoxNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboBoxNext.js","sources":["../src/combo-box-next/useComboBoxNext.tsx"],"sourcesContent":["import {\n  useListControl,\n  ListControlProps,\n} from \"../list-control/ListControlState\";\n\nimport { SyntheticEvent } from \"react\";\nimport { OptionValue } from \"../list-control/ListControlContext\";\n\nexport function useComboBoxNext(props: ListControlProps) {\n  const {\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    defaultValue,\n    value,\n  } = props;\n\n  const listControl = useListControl({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    defaultValue,\n    value,\n  });\n\n  const { selectedState, getOptionsMatching, setValueState, setSelectedState } =\n    listControl;\n\n  const select = (event: SyntheticEvent, option: OptionValue) => {\n    const { disabled, value } = option;\n\n    if (disabled) {\n      return;\n    }\n\n    let newSelected = [value];\n\n    if (multiselect) {\n      if (selectedState.includes(value)) {\n        newSelected = selectedState.filter((item) => item !== value);\n      } else {\n        newSelected = selectedState.concat([value]);\n      }\n    }\n\n    setSelectedState(newSelected);\n    const newValue = getOptionsMatching((option) =>\n      newSelected.includes(option.value)\n    ).map((option) => option.text);\n    setValueState(multiselect ? \"\" : newValue[0]);\n    onSelectionChange?.(event, newSelected);\n  };\n\n  return { ...listControl, select };\n}\n"],"names":["value","option"],"mappings":";;AAQO,SAAS,gBAAgB,KAAyB,EAAA;AACvD,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,cAAc,cAAe,CAAA;AAAA,IACjC,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,aAAA,EAAe,kBACxD,GAAA,WAAA,CAAA;AAEF,EAAM,MAAA,MAAA,GAAS,CAAC,KAAA,EAAuB,MAAwB,KAAA;AAC7D,IAAA,MAAM,EAAE,QAAA,EAAU,KAAAA,EAAAA,MAAAA,EAAU,GAAA,MAAA,CAAA;AAE5B,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAI,IAAA,WAAA,GAAc,CAACA,MAAK,CAAA,CAAA;AAExB,IAAA,IAAI,WAAa,EAAA;AACf,MAAI,IAAA,aAAA,CAAc,QAASA,CAAAA,MAAK,CAAG,EAAA;AACjC,QAAA,WAAA,GAAc,aAAc,CAAA,MAAA,CAAO,CAAC,IAAA,KAAS,SAASA,MAAK,CAAA,CAAA;AAAA,OACtD,MAAA;AACL,QAAA,WAAA,GAAc,aAAc,CAAA,MAAA,CAAO,CAACA,MAAK,CAAC,CAAA,CAAA;AAAA,OAC5C;AAAA,KACF;AAEA,IAAA,gBAAA,CAAiB,WAAW,CAAA,CAAA;AAC5B,IAAA,MAAM,QAAW,GAAA,kBAAA;AAAA,MAAmB,CAACC,OAAAA,KACnC,WAAY,CAAA,QAAA,CAASA,QAAO,KAAK,CAAA;AAAA,KACjC,CAAA,GAAA,CAAI,CAACA,OAAAA,KAAWA,QAAO,IAAI,CAAA,CAAA;AAC7B,IAAc,aAAA,CAAA,WAAA,GAAc,EAAK,GAAA,QAAA,CAAS,CAAE,CAAA,CAAA,CAAA;AAC5C,IAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,KAAO,EAAA,WAAA,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAO,OAAA,EAAE,GAAG,WAAA,EAAa,MAAO,EAAA,CAAA;AAClC;;;;"}

package/dist-es/common-hooks/useCollectionItems.js

@@ -0,0 +1,273 @@
+import { useState, useRef, useMemo, useCallback, isValidElement } from 'react';
+import { countChildItems, isDisabled, isFocusable, isHeader, isGroupNode, sourceItems, childItems, isParentPath, replaceCollectionItem } from './utils/collection-item-utils.js';
+import { getDefaultFilter, getDefaultFilterRegex } from './utils/filter-utils.js';
+import { itemToString } from './itemToString.js';
+import { useCollection } from './collectionProvider.js';
+
+const defaultCollectionOptions = {};
+const useCollectionItems = ({
+  children,
+  id: idRoot,
+  label = "",
+  options = defaultCollectionOptions,
+  source
+}) => {
+  var _a;
+  const { getItemId } = options;
+  const [, forceUpdate] = useState(null);
+  const inheritedCollectionHook = useCollection();
+  const dataRef = useRef([]);
+  const flattenedDataRef = useRef([]);
+  const EMPTY_COLLECTION = useMemo(() => [], []);
+  const filterPattern = useRef((_a = options.filterPattern) != null ? _a : "");
+  const {
+    getFilterRegex = getDefaultFilterRegex,
+    noChildrenLabel,
+    itemToString: itemToString$1 = itemToString
+  } = options;
+  const isExpanded = useCallback(
+    (path) => {
+      return options.defaultExpanded || false;
+    },
+    [options.defaultExpanded]
+  );
+  const addMetadataToItems = useCallback(
+    (items, indexer, level = 1, path = "", results = [], flattenedCollection2 = [], flattenedSource2 = []) => {
+      items.forEach((item, i, all) => {
+        var _a2, _b;
+        const isCollapsibleHeader = item.header && options.collapsibleHeaders;
+        const isNonCollapsibleGroupNode = item.childNodes && options.collapsibleHeaders === false;
+        const isLeaf = !item.childNodes || item.childNodes.length === 0;
+        const nonCollapsible = isNonCollapsibleGroupNode || isLeaf && !isCollapsibleHeader;
+        const childPath = path ? `${path}.${i}` : `item-${i}`;
+        const id = (_a2 = item.id) != null ? _a2 : getItemId ? getItemId(i) : `${idRoot}-${childPath}`;
+        const expanded = nonCollapsible ? void 0 : (_b = item.expanded) != null ? _b : isExpanded(id);
+        const normalisedItem = {
+          ...item,
+          childNodes: void 0,
+          count: !isNonCollapsibleGroupNode && expanded === void 0 ? 0 : countChildItems(item, all, i),
+          description: item.description,
+          disabled: isDisabled(item.value),
+          focusable: isFocusable(item.value) ? void 0 : false,
+          id,
+          index: indexer.value,
+          expanded,
+          level
+        };
+        results.push(normalisedItem);
+        flattenedCollection2.push(normalisedItem);
+        flattenedSource2.push(items[i].value);
+        indexer.value += 1;
+        if (item.childNodes) {
+          const [children2] = addMetadataToItems(
+            item.childNodes,
+            indexer,
+            level + 1,
+            childPath,
+            [],
+            flattenedCollection2,
+            flattenedSource2
+          );
+          normalisedItem.childNodes = children2;
+        }
+      });
+      return [results, flattenedSource2, flattenedCollection2];
+    },
+    [options.collapsibleHeaders, getItemId, idRoot, isExpanded]
+  );
+  const getFilter = useCallback(() => {
+    if (filterPattern.current) {
+      return getDefaultFilter(filterPattern.current, getFilterRegex);
+    } else {
+      return null;
+    }
+  }, [getFilterRegex]);
+  const collectVisibleItems = useCallback(
+    (items, filter = getFilter(), results = [], idx = { value: 0 }) => {
+      let skipToNextHeader = false;
+      for (const item of items) {
+        if (!(skipToNextHeader && !isHeader(item))) {
+          if (item.value !== null && (filter === null || filter(itemToString$1(item.value)))) {
+            results[idx.value] = item;
+            idx.value += 1;
+          }
+          skipToNextHeader = false;
+          if (isHeader(item) && item.expanded === false) {
+            skipToNextHeader = true;
+          } else if (isGroupNode(item)) {
+            if (item.expanded !== false && item.childNodes) {
+              collectVisibleItems(item.childNodes, filter, results, idx);
+            }
+          }
+        }
+      }
+      return results;
+    },
+    [getFilter, itemToString$1]
+  );
+  const partialCollectionItems = useMemo(() => {
+    return inheritedCollectionHook ? EMPTY_COLLECTION : sourceItems(source, { itemToString: itemToString$1, noChildrenLabel }) || childItems(children) || [];
+  }, [
+    inheritedCollectionHook,
+    EMPTY_COLLECTION,
+    source,
+    itemToString$1,
+    noChildrenLabel,
+    children
+  ]);
+  const [collectionItems, flattenedSource, flattenedCollection] = useMemo(
+    () => inheritedCollectionHook ? [EMPTY_COLLECTION, EMPTY_COLLECTION, EMPTY_COLLECTION] : addMetadataToItems(partialCollectionItems, { value: 0 }),
+    [
+      EMPTY_COLLECTION,
+      addMetadataToItems,
+      inheritedCollectionHook,
+      partialCollectionItems
+    ]
+  );
+  flattenedDataRef.current = flattenedCollection;
+  useMemo(
+    () => inheritedCollectionHook ? EMPTY_COLLECTION : dataRef.current = collectVisibleItems(collectionItems),
+    [
+      EMPTY_COLLECTION,
+      collectVisibleItems,
+      collectionItems,
+      inheritedCollectionHook
+    ]
+  );
+  const collectionItemsRef = useRef(collectionItems);
+  const setFilterPattern = useCallback(
+    (pattern = "") => {
+      if (typeof pattern === "string") {
+        filterPattern.current = pattern;
+        dataRef.current = collectVisibleItems(collectionItems);
+        forceUpdate({});
+      }
+    },
+    [collectionItems, collectVisibleItems]
+  );
+  const itemById = useCallback(
+    (id, target = collectionItems) => {
+      const sourceWithId = target.find(
+        (i) => {
+          var _a2;
+          return i.id === id || ((_a2 = i == null ? void 0 : i.childNodes) == null ? void 0 : _a2.length) && isParentPath(i.id, id);
+        }
+      );
+      if ((sourceWithId == null ? void 0 : sourceWithId.id) === id) {
+        return flattenedSource == null ? void 0 : flattenedSource[sourceWithId.index];
+      } else if (sourceWithId) {
+        return itemById(id, sourceWithId.childNodes);
+      }
+      throw Error(`useCollectionData itemById, id ${id} not found `);
+    },
+    [flattenedSource, collectionItems]
+  );
+  const toCollectionItem = useCallback(
+    (item) => {
+      const collectionItem = flattenedDataRef.current.find(
+        (i) => isValidElement(i.value) ? i.label === item : i.value === item
+      );
+      if (collectionItem) {
+        return collectionItem;
+      }
+      throw Error(`useCollectionData toCollectionItem, item not found `);
+    },
+    []
+  );
+  const itemToCollectionItem = useCallback(
+    (sel) => {
+      if (sel === null) {
+        return null;
+      } else if (Array.isArray(sel)) {
+        const result = [];
+        for (const item of sel) {
+          const collectionItem = toCollectionItem(item);
+          result.push(collectionItem);
+        }
+        return result;
+      } else if (sel !== void 0) {
+        return toCollectionItem(sel);
+      }
+      return void 0;
+    },
+    [toCollectionItem]
+  );
+  const stringToCollectionItem = useCallback(
+    (value) => {
+      const toCollectionItem2 = (item) => {
+        const collectionItem = flattenedDataRef.current.find(
+          (i) => isValidElement(i.value) ? i.label === item : i.value !== null && itemToString$1(i.value) === item
+        );
+        if (collectionItem) {
+          return collectionItem;
+        }
+      };
+      if (value === null) {
+        return null;
+      } else if (Array.isArray(value)) {
+        const result = [];
+        for (const item of value) {
+          const collectionItem = toCollectionItem2(item);
+          if (collectionItem) {
+            result.push(collectionItem);
+          }
+        }
+        return result;
+      } else if (value !== void 0) {
+        return toCollectionItem2(value);
+      }
+      return void 0;
+    },
+    [itemToString$1]
+  );
+  const itemToId = useCallback((item) => {
+    for (const collectionItem of collectionItemsRef.current) {
+      if (item === collectionItem.value) {
+        return collectionItem.id;
+      }
+    }
+    throw Error("useCollectionData itemToId, item not found");
+  }, []);
+  const collapseGroupItem = useCallback(
+    (item) => {
+      collectionItemsRef.current = replaceCollectionItem(
+        collectionItemsRef.current,
+        item.id,
+        {
+          expanded: false
+        }
+      );
+      dataRef.current = collectVisibleItems(collectionItemsRef.current);
+      forceUpdate({});
+    },
+    [collectVisibleItems]
+  );
+  const expandGroupItem = useCallback(
+    (item) => {
+      collectionItemsRef.current = replaceCollectionItem(
+        collectionItemsRef.current,
+        item.id,
+        {
+          expanded: true
+        }
+      );
+      dataRef.current = collectVisibleItems(collectionItemsRef.current);
+      forceUpdate({});
+    },
+    [collectVisibleItems]
+  );
+  return inheritedCollectionHook || {
+    collapseGroupItem,
+    data: dataRef.current,
+    expandGroupItem,
+    setFilterPattern,
+    itemById,
+    itemToId,
+    toCollectionItem,
+    itemToCollectionItem,
+    stringToCollectionItem
+  };
+};
+
+export { useCollectionItems };
+//# sourceMappingURL=useCollectionItems.js.map