@salt-ds/lab 1.0.0-alpha.0

package/dist-cjs/packages/lab/src/combo-box-deprecated/internal/useMultiSelectComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMultiSelectComboBox.js","sources":["../src/combo-box-deprecated/internal/useMultiSelectComboBox.ts"],"sourcesContent":["import {\n  useControlled,\n  useForkRef,\n  useId,\n  useIsFocusVisible,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  KeyboardEvent,\n  KeyboardEventHandler,\n  MouseEvent,\n  RefObject,\n  SyntheticEvent,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useList } from \"../../list-deprecated\";\nimport { ExpandButtonProps, useTokenizedInput } from \"../../tokenized-input\";\nimport { defaultItemToString } from \"../../tokenized-input/internal/defaultItemToString\";\nimport { usePrevious } from \"@salt-ds/core\";\nimport { getDefaultFilter, getDefaultFilterRegex } from \"../filterHelpers\";\nimport { MultiSelectComboBoxProps } from \"./MultiSelectComboBox\";\nimport { isToggleList, usePopperStatus } from \"./usePopperStatus\";\n\nconst REQUIRE_PREV_HIGHLIGHT = [\"ArrowUp\", \"ArrowDown\", \"PageUp\", \"PageDown\"];\n\nexport type UseMultiSelectComboBoxProps<Item> = Omit<\n  MultiSelectComboBoxProps<Item>,\n  \"inputRef\" | \"listContext\" | \"inputHelpers\" | \"inputProps\" | \"listProps\"\n> & { expandButtonRef: RefObject<HTMLElement> };\n\nexport const useMultiSelectComboBox = <Item>(\n  props: Omit<UseMultiSelectComboBoxProps<Item>, \"rootRef\" | \"classes\">\n) => {\n  // Deconstruct valid props for List, everything else will be passed to `useTokenizedInput` using `restProps`\n  const {\n    allowFreeText,\n    displayedItemCount,\n    virtualized,\n    disabled,\n    expandButtonRef,\n    onBlur,\n    onFocus,\n    onChange,\n    onSelect,\n    onInputChange,\n    onInputFocus,\n    onInputBlur,\n    onInputSelect,\n    id: idProp,\n    source: sourceProp,\n    selectedItem: selectedItemProp,\n    inputValue: inputValueProp,\n    initialOpen,\n    initialSelectedItem: initialSelectedItems,\n    \"aria-labelledby\": ariaLabelledBy,\n    getFilterRegex = getDefaultFilterRegex,\n    itemToString = defaultItemToString,\n    stringToItem: stringToItemProp = (_: any, value: string) => value.trim(),\n    InputProps = {\n      onBlur,\n      onFocus,\n      onInputBlur,\n      onInputFocus,\n      onInputChange,\n      onInputSelect,\n    },\n    ListProps = {},\n    ...restProps\n  } = props;\n\n  const id = useId(idProp);\n  const inputId = `${id}-input`;\n  const listId = `${id}-list`;\n\n  const [inputValue, setInputValue] = useControlled({\n    controlled: inputValueProp,\n    default: \"\",\n    name: \"MultiSelectComboBox\",\n    state: \"inputValue\",\n  });\n\n  const { isOpen: isListOpen, notifyPopper } = usePopperStatus({\n    initialOpen,\n    isMultiSelect: true,\n  });\n\n  const [selectionChanged, setSelectionChanged] = useState(false);\n  const inputBlurTimeout = useRef<number>(null);\n\n  const [allowAnnouncement, setAllowAnnouncement] = useState(false);\n\n  const labels = useMemo(\n    () => sourceProp.map(itemToString),\n    [sourceProp, itemToString]\n  );\n\n  const source = useMemo(() => {\n    if (inputValue && inputValue.trim().length) {\n      const itemFilter = getDefaultFilter(inputValue, getFilterRegex);\n      return sourceProp.filter((item: Item) => itemFilter(itemToString(item)));\n    }\n    return sourceProp;\n  }, [inputValue, sourceProp, getFilterRegex, itemToString]);\n\n  const itemTextHighlightPattern = useMemo(\n    () =>\n      inputValue && inputValue.trim().length\n        ? getFilterRegex(inputValue)\n        : undefined,\n    [inputValue, getFilterRegex]\n  );\n\n  const {\n    focusedRef,\n    listProps,\n    state: listState,\n    helpers: listHelpers,\n  } = useList<Item, \"multiple\">({\n    ...ListProps,\n    source,\n    disabled,\n    virtualized,\n    itemToString,\n    displayedItemCount,\n    onChange,\n    onSelect,\n    id: listId,\n    disableFocus: true,\n    disableMouseDown: true,\n    selectionVariant: \"multiple\",\n    initialSelectedItem: initialSelectedItems,\n    selectedItem: selectedItemProp,\n    \"aria-labelledby\": ariaLabelledBy,\n  });\n\n  const { \"aria-activedescendant\": ariaActiveDescendant, ...restListProps } =\n    listProps;\n  const { selectedItem } = listState;\n  const [quickSelection, setQuickSelection] = useState(false);\n  const {\n    isFocusVisibleRef,\n    onFocus: handleFocusVisible,\n    onBlur: handleBlurVisible,\n    ref: focusVisibleRef,\n  } = useIsFocusVisible();\n  const selectedItems = selectedItem as Item[];\n  const {\n    setSelectedItem: setSelectedItems,\n    setHighlightedIndex: setHighlightedListIndex,\n  } = listHelpers;\n\n  const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n    handleFocusVisible(event);\n    if (isFocusVisibleRef.current) {\n      listHelpers.setFocusVisible(true);\n    }\n\n    if (InputProps.onInputFocus) {\n      InputProps.onInputFocus(event);\n    }\n\n    notifyPopper(event);\n  };\n\n  const handleInputBlur = (\n    event: FocusEvent<HTMLDivElement | HTMLInputElement>\n  ) => {\n    handleBlurVisible();\n    setAllowAnnouncement(false);\n    setInputValue(\"\");\n\n    if (restListProps.onBlur) {\n      restListProps.onBlur(event);\n    }\n\n    if (InputProps.onInputBlur) {\n      InputProps.onInputBlur(event as FocusEvent<HTMLInputElement>);\n    }\n\n    notifyPopper(event);\n  };\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setInputValue(event.target.value);\n\n    setQuickSelection(event.target.value.length > 0 && !allowFreeText);\n\n    if (InputProps.onInputChange) {\n      InputProps.onInputChange(event);\n    }\n  };\n\n  const handleItemsChange = (newItems: Item[] | undefined) => {\n    const uniqueItems = Array.from(new Set(newItems));\n    setSelectedItems(uniqueItems);\n    onChange && onChange(null as unknown as ChangeEvent, uniqueItems);\n  };\n\n  const handleInputSelect = (event: SyntheticEvent<HTMLInputElement>) => {\n    event.persist();\n    setSelectionChanged(true);\n\n    if (InputProps.onInputSelect) {\n      InputProps.onInputSelect(event);\n    }\n  };\n\n  const handleClear = () => {\n    setSelectedItems([]);\n  };\n\n  const stringToItem = (selected: Item[], value: string): Item | null => {\n    const trimmed = value.trim();\n    const item = stringToItemProp(selected, trimmed);\n    const isSelected = selected.map(itemToString).indexOf(trimmed) !== -1;\n\n    // Either allow free text item OR the item has to be in the source list\n    return !isSelected && (allowFreeText || labels.indexOf(trimmed) !== -1)\n      ? (item as Item)\n      : null;\n  };\n\n  // Reuse selectItem from list state for a controlled version of tokenized input\n  const {\n    inputRef,\n    inputProps,\n    state: inputState,\n    helpers: inputHelpers,\n  } = useTokenizedInput({\n    ...restProps,\n    ...InputProps,\n    disabled,\n    itemToString,\n    stringToItem,\n    selectedItems,\n    initialSelectedItems,\n    onInputFocus: handleInputFocus,\n    onInputBlur: handleInputBlur,\n    onInputChange: handleInputChange,\n    onInputSelect: handleInputSelect,\n    onChange: handleItemsChange,\n    onClear: handleClear,\n    onKeyDown: InputProps.onKeyDown as KeyboardEventHandler<\n      HTMLInputElement | HTMLButtonElement\n    >,\n  });\n\n  const handleFocusVisibleRef = useForkRef(focusVisibleRef, focusedRef);\n  const handleInputRef = useForkRef(inputRef, handleFocusVisibleRef);\n\n  const { setHighlightedIndex: setHighlightedPillIndex } = inputHelpers;\n\n  // Reset highlight when list closes\n  useEffect(() => {\n    if (!isListOpen) {\n      setHighlightedListIndex(undefined);\n      setQuickSelection(false);\n    }\n  }, [isListOpen, setHighlightedListIndex, setQuickSelection]);\n\n  const previousSelectedItems = usePrevious(selectedItems);\n\n  // Reset list highlight when selectItems change\n  useIsomorphicLayoutEffect(() => {\n    if (\n      selectedItems.some(\n        (item) => !(previousSelectedItems || []).includes(item)\n      )\n    ) {\n      setInputValue(\"\");\n    }\n\n    if (!selectedItems.length) {\n      setHighlightedListIndex(undefined);\n    }\n  }, [\n    selectedItems,\n    previousSelectedItems,\n    setInputValue,\n    setHighlightedListIndex,\n  ]);\n\n  // Remove highlight from list if a pill is highlighted\n  useEffect(() => {\n    if (\n      inputState.highlightedIndex != null &&\n      inputState.highlightedIndex >= 0\n    ) {\n      setHighlightedListIndex(undefined);\n      setQuickSelection(false);\n    }\n  }, [inputState.highlightedIndex, setHighlightedListIndex, setQuickSelection]);\n\n  const highlightedIndex = listState && listState.highlightedIndex;\n\n  // Remove highlight from pills if a list item is highlighted\n  useEffect(() => {\n    if (highlightedIndex != null && highlightedIndex >= 0) {\n      setHighlightedPillIndex(undefined);\n    }\n  }, [highlightedIndex, setHighlightedPillIndex]);\n\n  // Keep highlighted index in sync with the filtered source\n  useEffect(() => {\n    setHighlightedListIndex(undefined);\n  }, [source, setHighlightedListIndex]);\n\n  const handleFirstItemSelection = (event: KeyboardEvent | ChangeEvent) => {\n    if (\n      !allowFreeText &&\n      (event as KeyboardEvent).key === \"Enter\" &&\n      quickSelection\n    ) {\n      const newItem = source[0];\n      const newSelectedItems =\n        selectedItems.indexOf(newItem) === -1\n          ? selectedItems.concat(source.slice(0, 1))\n          : selectedItems.filter((item) => item !== newItem);\n      setSelectedItems(newSelectedItems);\n      onSelect && onSelect(event, newItem);\n      onChange && onChange(event as ChangeEvent, newSelectedItems);\n    }\n  };\n\n  const handleListOpenKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (\"Escape\" === event.key && inputProps.expanded) {\n      setTimeout(() => {\n        if (expandButtonRef.current) {\n          expandButtonRef.current.focus();\n        }\n      }, 250);\n    }\n\n    handleFirstItemSelection(event);\n\n    if (\n      \"Home\" !== event.key &&\n      \"End\" !== event.key &&\n      !(\" \" === event.key && !event.ctrlKey)\n    ) {\n      if (restListProps.onKeyDown) {\n        restListProps.onKeyDown(event);\n      }\n      setSelectionChanged(false);\n    }\n  };\n\n  const handleInputKeyDown = (\n    event: KeyboardEvent<HTMLInputElement | HTMLButtonElement | HTMLDivElement>\n  ) => {\n    if (\"Escape\" === event.key) {\n      setInputValue(\"\");\n      setHighlightedListIndex(undefined);\n    }\n\n    // Space key clashes with the remove action of TokenizedInput\n    // For combo box, pressing a space key should just add a space\n    if (\" \" === event.key && !event.ctrlKey) {\n      setHighlightedPillIndex(undefined);\n    } else {\n      if (inputProps.onKeyDown) {\n        inputProps.onKeyDown(\n          event as KeyboardEvent<HTMLInputElement | HTMLButtonElement>\n        );\n      }\n    }\n\n    if (\n      !isToggleList(event) &&\n      listState.highlightedIndex == null &&\n      REQUIRE_PREV_HIGHLIGHT.indexOf(event.key) !== -1\n    ) {\n      event.preventDefault();\n      // Initialize list highlight if there's no previous value\n      setHighlightedListIndex(\n        Math.min(quickSelection ? 1 : 0, source.length - 1)\n      );\n      setQuickSelection(false);\n      setSelectionChanged(false);\n    } else if (isListOpen) {\n      handleListOpenKeyDown(event as KeyboardEvent<HTMLDivElement>);\n    }\n\n    // Don't announce for deleting values\n    setAllowAnnouncement(\"Backspace\" !== event.key);\n    notifyPopper(event);\n  };\n\n  const handleListClick = (event: MouseEvent<HTMLDivElement>) => {\n    clearTimeout(\n      inputBlurTimeout.current == null ? undefined : inputBlurTimeout.current\n    );\n    const inputEl = inputRef && (inputRef as RefObject<HTMLElement>).current;\n    if (inputEl) {\n      inputEl.focus();\n    }\n\n    if (restListProps.onClick) {\n      restListProps.onClick(event);\n    }\n  };\n\n  const mergedInputProps = {\n    ...inputProps.InputProps,\n    inputProps: {\n      ...(inputProps.InputProps || {}).inputProps,\n      role: \"textbox\",\n      \"aria-roledescription\": \"MultiSelect Combobox\",\n    },\n  };\n\n  if (ariaActiveDescendant && !selectionChanged) {\n    // either null or undefined will prevent tokenized-input from\n    // setting active-descendant based on pill selection.\n    mergedInputProps.inputProps[\"aria-activedescendant\"] = ariaActiveDescendant;\n  }\n\n  const expandButtonProps = {\n    accessibleText: undefined,\n    role: \"button\",\n    \"aria-roledescription\": \"Expand combobox button\",\n    \"aria-labelledby\": [ariaLabelledBy, `${inputId}-input`]\n      .filter(Boolean)\n      .join(\" \"),\n  } as ExpandButtonProps;\n\n  return {\n    inputHelpers,\n    inputRef: handleInputRef,\n    listContext: {\n      state: listState,\n      helpers: listHelpers,\n    },\n    inputProps: {\n      ...inputProps,\n      selectedItems,\n      allowAnnouncement,\n      id: inputId,\n      value: inputValue,\n      ExpandButtonProps: expandButtonProps,\n      InputProps: mergedInputProps,\n      onKeyDown: handleInputKeyDown,\n    },\n    listProps: {\n      ...restListProps,\n      source,\n      itemToString,\n      itemTextHighlightPattern,\n      onClick: handleListClick,\n      isListOpen: isListOpen && Boolean(source.length),\n    },\n  };\n};\n"],"names":["getDefaultFilterRegex","defaultItemToString","useId","useControlled","usePopperStatus","useState","useRef","useMemo","getDefaultFilter","useList","useIsFocusVisible","useTokenizedInput","useForkRef","useEffect","usePrevious","useIsomorphicLayoutEffect","isToggleList"],"mappings":"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"}

package/dist-cjs/packages/lab/src/combo-box-deprecated/internal/usePopperStatus.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const isToggleList = (event) => event.altKey && ["ArrowUp", "ArrowDown"].indexOf(event.key) !== -1;
+const usePopperStatus = (props) => {
+  const { initialOpen, isMultiSelect = false, onClose } = props;
+  const [isOpen, setOpen] = React.useState(initialOpen === true);
+  const handleCloseList = (event) => {
+    setOpen(false);
+    if (onClose) {
+      onClose(event);
+    }
+  };
+  const handleInputKeyDown = (event) => {
+    if (isToggleList(event)) {
+      setOpen((open) => !open);
+    } else if (!isOpen && ["Alt", "Tab", "Escape", "Control", "Shift", "Meta"].indexOf(
+      event.key
+    ) === -1) {
+      setOpen(true);
+    } else if (isOpen && event.key === "Escape") {
+      handleCloseList(event);
+    } else if (isOpen && !isMultiSelect && event.key === "Enter") {
+      handleCloseList(event);
+    }
+  };
+  const notifyPopper = (event) => {
+    switch (event.type) {
+      case "focus":
+        setOpen(true);
+        break;
+      case "blur":
+        handleCloseList(event);
+        break;
+      case "keydown":
+        handleInputKeyDown(event);
+        break;
+      case "click":
+        handleCloseList(event);
+        break;
+      case "keyup":
+        break;
+      default:
+        throw Error(`usePopper: unexpected event type ${event.type}`);
+    }
+  };
+  return {
+    isOpen,
+    notifyPopper
+  };
+};
+
+exports.isToggleList = isToggleList;
+exports.usePopperStatus = usePopperStatus;
+//# sourceMappingURL=usePopperStatus.js.map

package/dist-cjs/packages/lab/src/combo-box-deprecated/internal/usePopperStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopperStatus.js","sources":["../src/combo-box-deprecated/internal/usePopperStatus.ts"],"sourcesContent":["import { useState, SyntheticEvent, KeyboardEvent } from \"react\";\n\n// Alt+Arrow Up/Down toggles list open/close\nexport const isToggleList = (event: KeyboardEvent) =>\n  event.altKey && [\"ArrowUp\", \"ArrowDown\"].indexOf(event.key) !== -1;\n\nexport const usePopperStatus = (props: {\n  initialOpen?: boolean;\n  isMultiSelect?: boolean;\n  onClose?: (event: SyntheticEvent) => void;\n}) => {\n  const { initialOpen, isMultiSelect = false, onClose } = props;\n  const [isOpen, setOpen] = useState(initialOpen === true);\n\n  const handleCloseList = (event: SyntheticEvent) => {\n    setOpen(false);\n\n    if (onClose) {\n      onClose(event);\n    }\n  };\n\n  const handleInputKeyDown = (event: KeyboardEvent) => {\n    if (isToggleList(event)) {\n      setOpen((open) => !open);\n    } else if (\n      !isOpen &&\n      [\"Alt\", \"Tab\", \"Escape\", \"Control\", \"Shift\", \"Meta\"].indexOf(\n        event.key\n      ) === -1\n    ) {\n      setOpen(true);\n    } else if (isOpen && event.key === \"Escape\") {\n      handleCloseList(event);\n    } else if (isOpen && !isMultiSelect && event.key === \"Enter\") {\n      handleCloseList(event);\n    }\n  };\n\n  const notifyPopper = (event: SyntheticEvent) => {\n    switch (event.type) {\n      case \"focus\":\n        setOpen(true);\n        break;\n      case \"blur\":\n        handleCloseList(event);\n        break;\n      case \"keydown\":\n        handleInputKeyDown(event as KeyboardEvent);\n        break;\n      case \"click\":\n        handleCloseList(event);\n        break;\n      case \"keyup\":\n        // ignore. Tokenized input invokes keyDown listener in response to keyup events\n        break;\n      default:\n        throw Error(`usePopper: unexpected event type ${event.type}`);\n    }\n  };\n\n  return {\n    isOpen,\n    notifyPopper,\n  };\n};\n"],"names":["useState"],"mappings":";;;;;;AAGO,MAAM,YAAe,GAAA,CAAC,KAC3B,KAAA,KAAA,CAAM,MAAU,IAAA,CAAC,SAAW,EAAA,WAAW,CAAE,CAAA,OAAA,CAAQ,KAAM,CAAA,GAAG,CAAM,KAAA,CAAA,EAAA;AAErD,MAAA,eAAA,GAAkB,CAAC,KAI1B,KAAA;AACJ,EAAA,MAAM,EAAE,WAAA,EAAa,aAAgB,GAAA,KAAA,EAAO,SAAY,GAAA,KAAA,CAAA;AACxD,EAAA,MAAM,CAAC,MAAQ,EAAA,OAAO,CAAI,GAAAA,cAAA,CAAS,gBAAgB,IAAI,CAAA,CAAA;AAEvD,EAAM,MAAA,eAAA,GAAkB,CAAC,KAA0B,KAAA;AACjD,IAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAEb,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,KACf;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqB,CAAC,KAAyB,KAAA;AACnD,IAAI,IAAA,YAAA,CAAa,KAAK,CAAG,EAAA;AACvB,MAAQ,OAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAAA,KACzB,MAAA,IACE,CAAC,MAAA,IACD,CAAC,KAAA,EAAO,OAAO,QAAU,EAAA,SAAA,EAAW,OAAS,EAAA,MAAM,CAAE,CAAA,OAAA;AAAA,MACnD,KAAM,CAAA,GAAA;AAAA,UACF,CACN,CAAA,EAAA;AACA,MAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AAAA,KACH,MAAA,IAAA,MAAA,IAAU,KAAM,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC3C,MAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAAA,eACZ,MAAU,IAAA,CAAC,aAAiB,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AAC5D,MAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAAA,KACvB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAA0B,KAAA;AAC9C,IAAA,QAAQ,KAAM,CAAA,IAAA;AAAA,MACP,KAAA,OAAA;AACH,QAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AACZ,QAAA,MAAA;AAAA,MACG,KAAA,MAAA;AACH,QAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AACrB,QAAA,MAAA;AAAA,MACG,KAAA,SAAA;AACH,QAAA,kBAAA,CAAmB,KAAsB,CAAA,CAAA;AACzC,QAAA,MAAA;AAAA,MACG,KAAA,OAAA;AACH,QAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AACrB,QAAA,MAAA;AAAA,MACG,KAAA,OAAA;AAEH,QAAA,MAAA;AAAA,MAAA;AAEA,QAAM,MAAA,KAAA,CAAM,CAAoC,iCAAA,EAAA,KAAA,CAAM,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAElE,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA;AACF;;;;;"}

package/dist-cjs/packages/lab/src/common-hooks/calcPreferredHeight.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const calcPreferredHeight = (props = {}) => {
+  const {
+    borderless,
+    displayedItemCount = 0,
+    itemCount = 0,
+    itemHeight = 0,
+    getItemHeight,
+    gapSize = 1
+  } = props;
+  let preferredHeight = borderless ? 0 : 2;
+  const preferredItemCount = itemCount === 0 ? displayedItemCount : Math.min(displayedItemCount, itemCount);
+  if (typeof getItemHeight === "function") {
+    preferredHeight += Array.from({ length: preferredItemCount }).reduce(
+      (total, _, index) => total + Number(getItemHeight(index)) + gapSize,
+      0
+    ) - gapSize;
+  } else {
+    preferredHeight += preferredItemCount * Number(itemHeight) + (preferredItemCount - 1) * gapSize;
+  }
+  return isNaN(preferredHeight) ? void 0 : preferredHeight;
+};
+
+exports.calcPreferredHeight = calcPreferredHeight;
+//# sourceMappingURL=calcPreferredHeight.js.map

package/dist-cjs/packages/lab/src/common-hooks/calcPreferredHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calcPreferredHeight.js","sources":["../src/common-hooks/calcPreferredHeight.js"],"sourcesContent":["// TODO refactor this into hook. See useListHeight hook. This code was originally used by List and Tree. List has been refactored,\n// Tree hasn't yet. When Tree is finalised, probably want to share the useListHeight hook, and rename it to make it more generic.\nexport const calcPreferredHeight = (props = {}) => {\n  const {\n    borderless,\n    displayedItemCount = 0,\n    itemCount = 0,\n    itemHeight = 0,\n    getItemHeight,\n    gapSize = 1,\n  } = props;\n\n  let preferredHeight = borderless ? 0 : 2;\n\n  // if there is no item we render with the preferred count\n  const preferredItemCount =\n    itemCount === 0\n      ? displayedItemCount\n      : Math.min(displayedItemCount, itemCount);\n\n  if (typeof getItemHeight === \"function\") {\n    preferredHeight +=\n      Array.from({ length: preferredItemCount }).reduce(\n        (total, _, index) => total + Number(getItemHeight(index)) + gapSize,\n        0\n      ) -\n      // We don't want gap after the last item\n      gapSize;\n  } else {\n    preferredHeight +=\n      preferredItemCount * Number(itemHeight) +\n      (preferredItemCount - 1) * gapSize;\n  }\n\n  // list height will be undefined if the item height can not be\n  // converted to a number, for example rem or a percentage string\n  return isNaN(preferredHeight) ? undefined : preferredHeight;\n};\n"],"names":[],"mappings":";;;;AAEO,MAAM,mBAAsB,GAAA,CAAC,KAAQ,GAAA,EAAO,KAAA;AACjD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,kBAAqB,GAAA,CAAA;AAAA,IACrB,SAAY,GAAA,CAAA;AAAA,IACZ,UAAa,GAAA,CAAA;AAAA,IACb,aAAA;AAAA,IACA,OAAU,GAAA,CAAA;AAAA,GACR,GAAA,KAAA,CAAA;AAEJ,EAAI,IAAA,eAAA,GAAkB,aAAa,CAAI,GAAA,CAAA,CAAA;AAGvC,EAAA,MAAM,qBACJ,SAAc,KAAA,CAAA,GACV,qBACA,IAAK,CAAA,GAAA,CAAI,oBAAoB,SAAS,CAAA,CAAA;AAE5C,EAAI,IAAA,OAAO,kBAAkB,UAAY,EAAA;AACvC,IAAA,eAAA,IACE,MAAM,IAAK,CAAA,EAAE,MAAQ,EAAA,kBAAA,EAAoB,CAAE,CAAA,MAAA;AAAA,MACzC,CAAC,OAAO,CAAG,EAAA,KAAA,KAAU,QAAQ,MAAO,CAAA,aAAA,CAAc,KAAK,CAAC,CAAI,GAAA,OAAA;AAAA,MAC5D,CAAA;AAAA,KAGF,GAAA,OAAA,CAAA;AAAA,GACG,MAAA;AACL,IAAA,eAAA,IACE,kBAAqB,GAAA,MAAA,CAAO,UAAU,CAAA,GAAA,CACrC,qBAAqB,CAAK,IAAA,OAAA,CAAA;AAAA,GAC/B;AAIA,EAAO,OAAA,KAAA,CAAM,eAAe,CAAA,GAAI,KAAY,CAAA,GAAA,eAAA,CAAA;AAC9C;;;;"}

package/dist-cjs/packages/lab/src/common-hooks/collectionProvider.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const CollectionContext = React.createContext(void 0);
+function CollectionProvider({
+  children,
+  collectionHook,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CollectionContext.Provider, {
+    value: collectionHook,
+    children: Object.keys(props).length > 0 ? React.cloneElement(children, props) : children
+  });
+}
+function useCollection() {
+  const collection = React.useContext(CollectionContext);
+  if (collection) {
+    return collection;
+  }
+}
+
+exports.CollectionContext = CollectionContext;
+exports.CollectionProvider = CollectionProvider;
+exports.useCollection = useCollection;
+//# sourceMappingURL=collectionProvider.js.map

package/dist-cjs/packages/lab/src/common-hooks/collectionProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collectionProvider.js","sources":["../src/common-hooks/collectionProvider.tsx"],"sourcesContent":["import { cloneElement, createContext, ReactElement, useContext } from \"react\";\nimport { CollectionHookResult } from \"./collectionTypes\";\n\nexport interface collectionContext<T> {\n  collection: CollectionHookResult<T>;\n}\n\nexport const CollectionContext = createContext<\n  CollectionHookResult<any> | undefined\n>(undefined);\n\ninterface ContextProviderProps<Item> {\n  children: ReactElement;\n  collectionHook: CollectionHookResult<Item>;\n}\n\nexport function CollectionProvider<Item>({\n  children,\n  collectionHook,\n  ...props\n}: ContextProviderProps<Item>) {\n  return (\n    <CollectionContext.Provider value={collectionHook}>\n      {Object.keys(props).length > 0 ? cloneElement(children, props) : children}\n    </CollectionContext.Provider>\n  );\n}\n\nexport function useCollection<Item>(): CollectionHookResult<Item> | undefined {\n  const collection = useContext(CollectionContext);\n  if (collection) {\n    return collection as CollectionHookResult<Item>;\n  }\n}\n"],"names":["createContext","jsx","cloneElement","useContext"],"mappings":";;;;;;;AAOa,MAAA,iBAAA,GAAoBA,oBAE/B,KAAS,CAAA,EAAA;AAOJ,SAAS,kBAAyB,CAAA;AAAA,EACvC,QAAA;AAAA,EACA,cAAA;AAAA,EACG,GAAA,KAAA;AACL,CAA+B,EAAA;AAC7B,EACE,uBAAAC,cAAA,CAAC,kBAAkB,QAAlB,EAAA;AAAA,IAA2B,KAAO,EAAA,cAAA;AAAA,IAChC,QAAA,EAAA,MAAA,CAAO,KAAK,KAAK,CAAA,CAAE,SAAS,CAAI,GAAAC,kBAAA,CAAa,QAAU,EAAA,KAAK,CAAI,GAAA,QAAA;AAAA,GACnE,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,aAA8D,GAAA;AAC5E,EAAM,MAAA,UAAA,GAAaC,iBAAW,iBAAiB,CAAA,CAAA;AAC/C,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,OAAA,UAAA,CAAA;AAAA,GACT;AACF;;;;;;"}

package/dist-cjs/packages/lab/src/common-hooks/itemToString.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isPlainObject = (obj) => Object.prototype.toString.call(obj) === "[object Object]";
+function itemToString(item) {
+  if (typeof item === "string") {
+    return item;
+  } else if (!isPlainObject(item)) {
+    return String(item);
+  }
+  if (Object.prototype.hasOwnProperty.call(item, "label")) {
+    return String(item.label);
+  }
+  console.warn(
+    [
+      "itemToString: you've likely forgotten to set the label prop on the item object.",
+      "You can also provide your own `itemToString` implementation."
+    ].join("\n")
+  );
+  return "";
+}
+
+exports.itemToString = itemToString;
+//# sourceMappingURL=itemToString.js.map

package/dist-cjs/packages/lab/src/common-hooks/itemToString.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"itemToString.js","sources":["../src/common-hooks/itemToString.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ItemToStringFunction = (item: any) => string;\n\nconst isPlainObject = (obj: unknown) =>\n  Object.prototype.toString.call(obj) === \"[object Object]\";\n\nexport function itemToString(item: unknown): string {\n  if (typeof item === \"string\") {\n    return item;\n  } else if (!isPlainObject(item)) {\n    return String(item);\n  }\n\n  if (Object.prototype.hasOwnProperty.call(item, \"label\")) {\n    return String((item as { label?: string }).label);\n  }\n\n  console.warn(\n    [\n      \"itemToString: you've likely forgotten to set the label prop on the item object.\",\n      \"You can also provide your own `itemToString` implementation.\",\n    ].join(\"\\n\")\n  );\n\n  return \"\";\n}\n"],"names":[],"mappings":";;;;AAGA,MAAM,aAAA,GAAgB,CAAC,GACrB,KAAA,MAAA,CAAO,UAAU,QAAS,CAAA,IAAA,CAAK,GAAG,CAAM,KAAA,iBAAA,CAAA;AAEnC,SAAS,aAAa,IAAuB,EAAA;AAClD,EAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC5B,IAAO,OAAA,IAAA,CAAA;AAAA,GACE,MAAA,IAAA,CAAC,aAAc,CAAA,IAAI,CAAG,EAAA;AAC/B,IAAA,OAAO,OAAO,IAAI,CAAA,CAAA;AAAA,GACpB;AAEA,EAAA,IAAI,OAAO,SAAU,CAAA,cAAA,CAAe,IAAK,CAAA,IAAA,EAAM,OAAO,CAAG,EAAA;AACvD,IAAO,OAAA,MAAA,CAAQ,KAA4B,KAAK,CAAA,CAAA;AAAA,GAClD;AAEA,EAAQ,OAAA,CAAA,IAAA;AAAA,IACN;AAAA,MACE,iFAAA;AAAA,MACA,8DAAA;AAAA,KACF,CAAE,KAAK,IAAI,CAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA,EAAA,CAAA;AACT;;;;"}

package/dist-cjs/packages/lab/src/common-hooks/keyUtils.js

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (let set of sets) {
+    for (let element of set) {
+      result.add(element);
+    }
+  }
+  return result;
+}
+const ArrowUp = "ArrowUp";
+const ArrowDown = "ArrowDown";
+const ArrowLeft = "ArrowLeft";
+const ArrowRight = "ArrowRight";
+const Enter = "Enter";
+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);
+};
+
+exports.ArrowDown = ArrowDown;
+exports.ArrowLeft = ArrowLeft;
+exports.ArrowRight = ArrowRight;
+exports.ArrowUp = ArrowUp;
+exports.End = End;
+exports.Enter = Enter;
+exports.Home = Home;
+exports.PageDown = PageDown;
+exports.PageUp = PageUp;
+exports.Space = Space;
+exports.isCharacterKey = isCharacterKey;
+exports.isNavigationKey = isNavigationKey;
+//# sourceMappingURL=keyUtils.js.map

package/dist-cjs/packages/lab/src/common-hooks/keyUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyUtils.js","sources":["../src/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 (let set of sets) {\n    for (let 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 = \" \";\nexport const Tab = \"Tab\";\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,IAAS,OAAO,IAAM,EAAA;AACpB,IAAA,KAAA,IAAS,WAAW,GAAK,EAAA;AACvB,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;AAEd,MAAM,IAAO,GAAA,OAAA;AACb,MAAM,GAAM,GAAA,MAAA;AACZ,MAAM,MAAS,GAAA,SAAA;AACf,MAAM,QAAW,GAAA,WAAA;AACjB,MAAM,KAAQ,GAAA,IAAA;AAGrB,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/dist-cjs/packages/lab/src/common-hooks/list-dom-utils.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function listItemIndex(listItemEl) {
+  if (listItemEl) {
+    let idx = listItemEl.dataset.idx;
+    if (idx) {
+      return parseInt(idx, 10);
+    } else if (idx = listItemEl.ariaPosInSet) {
+      return parseInt(idx, 10) - 1;
+    }
+  }
+  return -1;
+}
+const closestListItem = (el) => el.closest("[data-idx],[aria-posinset]");
+const closestListItemIndex = (el) => listItemIndex(closestListItem(el));
+
+exports.closestListItem = closestListItem;
+exports.closestListItemIndex = closestListItemIndex;
+exports.listItemIndex = listItemIndex;
+//# sourceMappingURL=list-dom-utils.js.map

package/dist-cjs/packages/lab/src/common-hooks/list-dom-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-dom-utils.js","sources":["../src/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.idx;\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\nexport const closestListItem = (el: HTMLElement) =>\n  el.closest(\"[data-idx],[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":";;;;AAGO,SAAS,cAAc,UAA0B,EAAA;AACtD,EAAA,IAAI,UAAY,EAAA;AACd,IAAI,IAAA,GAAA,GAAiC,WAAW,OAAQ,CAAA,GAAA,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;AAIO,MAAM,eAAkB,GAAA,CAAC,EAC9B,KAAA,EAAA,CAAG,QAAQ,4BAA4B,EAAA;AAKlC,MAAM,uBAAuB,CAAC,EAAA,KACnC,aAAc,CAAA,eAAA,CAAgB,EAAE,CAAC;;;;;;"}

package/dist-cjs/packages/lab/src/common-hooks/selectionTypes.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const hasSelection = (selected) => {
+  return Array.isArray(selected) ? selected.length > 0 : selected !== null && selected !== void 0;
+};
+const getFirstSelectedItem = (selected) => {
+  return Array.isArray(selected) ? selected[0] : selected;
+};
+
+exports.getFirstSelectedItem = getFirstSelectedItem;
+exports.hasSelection = hasSelection;
+//# sourceMappingURL=selectionTypes.js.map

package/dist-cjs/packages/lab/src/common-hooks/selectionTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionTypes.js","sources":["../src/common-hooks/selectionTypes.ts"],"sourcesContent":["import { SyntheticEvent } from \"react\";\nimport { CollectionItem } from \"./collectionTypes\";\n\nexport const SINGLE = \"default\";\nexport const MULTIPLE = \"multiple\";\nexport const EXTENDED = \"extended\";\nexport const DESELECTABLE = \"deselectable\";\n\n// export type SelectionDisallowed = \"none\";\nexport type SingleSelectionStrategy = \"default\" | \"deselectable\";\nexport type MultiSelectionStrategy =\n  | \"multiple\"\n  | \"extended\"\n  | \"extended-multi-range\";\nexport type SelectionStrategy =\n  // | SelectionDisallowed\n  SingleSelectionStrategy | MultiSelectionStrategy;\n\nexport type selectedType<\n  Item,\n  Selection extends SelectionStrategy\n> = Selection extends MultiSelectionStrategy ? Item[] : Item | null;\n\nexport type SelectHandler<Item = string> = (\n  event: SyntheticEvent,\n  selectedItem: Item\n) => void;\n\nexport type SelectionChangeHandler<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n> = (\n  event: SyntheticEvent,\n  selected: Selection extends SingleSelectionStrategy ? Item | null : Item[]\n) => void;\n\nexport const hasSelection = <Item = unknown>(\n  selected: Item | Item[] | null\n): boolean => {\n  return Array.isArray(selected)\n    ? selected.length > 0\n    : selected !== null && selected !== undefined;\n};\n\nexport const getFirstSelectedItem = <Item = unknown>(\n  selected: Item | Item[] | null\n): Item | null => {\n  return Array.isArray(selected) ? selected[0] : selected;\n};\n\nexport interface SelectionProps<\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n> {\n  defaultSelected?: Selection extends SingleSelectionStrategy\n    ? Item | null\n    : Item[];\n  onSelect?: SelectHandler<Item>;\n  onSelectionChange?: SelectionChangeHandler<Item, Selection>;\n  selected?: Selection extends SingleSelectionStrategy ? Item | null : Item[];\n  selectionStrategy?: Selection;\n}\n\nexport interface ListHandlers {\n  onClick?: (event: React.MouseEvent) => void;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n  onKeyboardNavigation?: (\n    event: React.KeyboardEvent,\n    currentIndex: number\n  ) => void;\n  onMouseMove?: (event: React.MouseEvent) => void;\n}\nexport interface SelectionHookProps<\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n> extends SelectionProps<CollectionItem<Item>, Selection> {\n  disableSelection?: boolean;\n  highlightedIdx: number;\n  indexPositions: CollectionItem<Item>[];\n  label?: string;\n  selectionKeys?: string[];\n  tabToSelect?: boolean;\n}\n\nexport interface SelectionHookResult<\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n> {\n  listHandlers: ListHandlers;\n  selected: Selection extends SingleSelectionStrategy\n    ? CollectionItem<Item> | null\n    : CollectionItem<Item>[];\n  setSelected: (\n    selected: Selection extends SingleSelectionStrategy\n      ? CollectionItem<Item> | null\n      : CollectionItem<Item>[]\n  ) => void;\n}\n"],"names":[],"mappings":";;;;AAoCa,MAAA,YAAA,GAAe,CAC1B,QACY,KAAA;AACZ,EAAO,OAAA,KAAA,CAAM,QAAQ,QAAQ,CAAA,GACzB,SAAS,MAAS,GAAA,CAAA,GAClB,QAAa,KAAA,IAAA,IAAQ,QAAa,KAAA,KAAA,CAAA,CAAA;AACxC,EAAA;AAEa,MAAA,oBAAA,GAAuB,CAClC,QACgB,KAAA;AAChB,EAAA,OAAO,KAAM,CAAA,OAAA,CAAQ,QAAQ,CAAA,GAAI,SAAS,CAAK,CAAA,GAAA,QAAA,CAAA;AACjD;;;;;"}

package/dist-cjs/packages/lab/src/common-hooks/useAutoSizer.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function useAutoSizer(props) {
+  const { containerRef: ref, responsive, width, height } = props;
+  const [size, setSize] = React.useState({ width, height });
+  const handleResize = React.useCallback(function handleResize2(contentRect) {
+    if (contentRect.width > 0 && contentRect.height > 0) {
+      setSize({
+        width: contentRect.width,
+        height: contentRect.height
+      });
+    }
+  }, []);
+  React.useLayoutEffect(() => {
+    setSize({ width, height });
+  }, [width, height]);
+  React.useLayoutEffect(() => {
+    if (responsive) {
+      let observer;
+      if (ref.current) {
+        handleResize(ref.current.getBoundingClientRect());
+        observer = new ResizeObserver(
+          ([{ contentRect }]) => {
+          }
+        );
+        observer.observe(ref.current);
+      }
+      return () => {
+        if (observer) {
+          observer.disconnect();
+        }
+      };
+    }
+  }, [handleResize, responsive]);
+  return size;
+}
+
+exports.useAutoSizer = useAutoSizer;
+//# sourceMappingURL=useAutoSizer.js.map

package/dist-cjs/packages/lab/src/common-hooks/useAutoSizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoSizer.js","sources":["../src/common-hooks/useAutoSizer.ts"],"sourcesContent":["import {\n  RefObject,\n  useRef,\n  useState,\n  useCallback,\n  useLayoutEffect,\n  Ref,\n} from \"react\";\n\nexport interface ListAutosizerProps {\n  containerRef: RefObject<Element>;\n  responsive: boolean;\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface size {\n  height?: number | string;\n  width?: number | string;\n}\n\nexport function useAutoSizer<Element extends HTMLElement>(\n  props: ListAutosizerProps\n): size {\n  const { containerRef: ref, responsive, width, height } = props;\n  const [size, setSize] = useState({ width, height });\n\n  const handleResize = useCallback(function handleResize(contentRect: DOMRect) {\n    if (contentRect.width > 0 && contentRect.height > 0) {\n      setSize({\n        width: contentRect.width,\n        height: contentRect.height,\n      });\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    setSize({ width, height });\n  }, [width, height]);\n\n  useLayoutEffect(() => {\n    if (responsive) {\n      let observer: ResizeObserver;\n      if (ref.current) {\n        handleResize(ref.current.getBoundingClientRect());\n        observer = new ResizeObserver(\n          ([{ contentRect }]: ResizeObserverEntry[]) => {\n            // TODO (currently firing because of scrollbar)\n            // handleResize(contentRect);\n          }\n        );\n        observer.observe(ref.current);\n      }\n      return () => {\n        if (observer) {\n          observer.disconnect();\n        }\n      };\n    }\n  }, [handleResize, responsive]);\n\n  return size;\n}\n"],"names":["useState","useCallback","handleResize","useLayoutEffect"],"mappings":";;;;;;AAqBO,SAAS,aACd,KACM,EAAA;AACN,EAAA,MAAM,EAAE,YAAc,EAAA,GAAA,EAAK,UAAY,EAAA,KAAA,EAAO,QAAW,GAAA,KAAA,CAAA;AACzD,EAAM,MAAA,CAAC,MAAM,OAAO,CAAA,GAAIA,eAAS,EAAE,KAAA,EAAO,QAAQ,CAAA,CAAA;AAElD,EAAA,MAAM,YAAe,GAAAC,iBAAA,CAAY,SAASC,aAAAA,CAAa,WAAsB,EAAA;AAC3E,IAAA,IAAI,WAAY,CAAA,KAAA,GAAQ,CAAK,IAAA,WAAA,CAAY,SAAS,CAAG,EAAA;AACnD,MAAQ,OAAA,CAAA;AAAA,QACN,OAAO,WAAY,CAAA,KAAA;AAAA,QACnB,QAAQ,WAAY,CAAA,MAAA;AAAA,OACrB,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAAC,qBAAA,CAAgB,MAAM;AACpB,IAAQ,OAAA,CAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,CAAA,CAAA;AAAA,GACxB,EAAA,CAAC,KAAO,EAAA,MAAM,CAAC,CAAA,CAAA;AAElB,EAAAA,qBAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,UAAY,EAAA;AACd,MAAI,IAAA,QAAA,CAAA;AACJ,MAAA,IAAI,IAAI,OAAS,EAAA;AACf,QAAa,YAAA,CAAA,GAAA,CAAI,OAAQ,CAAA,qBAAA,EAAuB,CAAA,CAAA;AAChD,QAAA,QAAA,GAAW,IAAI,cAAA;AAAA,UACb,CAAC,CAAC,EAAE,WAAA,EAAa,CAA6B,KAAA;AAAA,WAG9C;AAAA,SACF,CAAA;AACA,QAAS,QAAA,CAAA,OAAA,CAAQ,IAAI,OAAO,CAAA,CAAA;AAAA,OAC9B;AACA,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,SACtB;AAAA,OACF,CAAA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,YAAc,EAAA,UAAU,CAAC,CAAA,CAAA;AAE7B,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist-cjs/packages/lab/src/common-hooks/useCollapsibleGroups.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var keyUtils = require('./keyUtils.js');
+
+const NO_HANDLERS = {};
+const canToggleItem = (item) => Array.isArray(item.childNodes);
+const toggleIconClicked = (el) => {
+  const closestToggle = el.closest(
+    "[data-toggle],[aria-expanded]"
+  );
+  return closestToggle.dataset.toggle === "true";
+};
+const useCollapsibleGroups = ({
+  collapsibleHeaders,
+  collectionHook,
+  highlightedIdx,
+  onToggle
+}) => {
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === keyUtils.ArrowRight || e.key === keyUtils.Enter) {
+        const item = collectionHook.data[highlightedIdx];
+        if (item) {
+          if (item.expanded === false && item.value) {
+            e.preventDefault();
+            collectionHook.expandGroupItem(item);
+            onToggle == null ? void 0 : onToggle(item.value);
+          }
+        }
+      }
+      if (e.key === keyUtils.ArrowLeft || e.key === keyUtils.Enter) {
+        const item = collectionHook.data[highlightedIdx];
+        if (item) {
+          if (item.expanded && item.value) {
+            e.preventDefault();
+            collectionHook.collapseGroupItem(item);
+            onToggle == null ? void 0 : onToggle(item.value);
+          }
+        }
+      }
+    },
+    [
+      collectionHook.collapseGroupItem,
+      collectionHook.data,
+      collectionHook.expandGroupItem,
+      highlightedIdx
+    ]
+  );
+  const handleClick = React.useCallback(
+    (evt) => {
+      console.log(`useCollapsibleGroups idx=${highlightedIdx}`);
+      const item = collectionHook.data[highlightedIdx];
+      console.log(evt.target, evt.currentTarget);
+      if (item && canToggleItem(item) && (toggleIconClicked(evt.target))) {
+        evt.stopPropagation();
+        evt.preventDefault();
+        if (item.expanded === false && item.value) {
+          collectionHook.expandGroupItem(item);
+          onToggle == null ? void 0 : onToggle(item.value);
+        } else if (item.expanded === true && item.value) {
+          collectionHook.collapseGroupItem(item);
+          onToggle == null ? void 0 : onToggle(item.value);
+        }
+      }
+    },
+    [
+      collectionHook.collapseGroupItem,
+      collectionHook.data,
+      collectionHook.expandGroupItem,
+      highlightedIdx
+    ]
+  );
+  const listHandlers = {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  };
+  return collapsibleHeaders ? listHandlers : NO_HANDLERS;
+};
+
+exports.useCollapsibleGroups = useCollapsibleGroups;
+//# sourceMappingURL=useCollapsibleGroups.js.map

package/dist-cjs/packages/lab/src/common-hooks/useCollapsibleGroups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollapsibleGroups.js","sources":["../src/common-hooks/useCollapsibleGroups.ts"],"sourcesContent":["import { MouseEvent, useCallback } from \"react\";\nimport { ArrowLeft, ArrowRight, Enter } from \"./keyUtils\";\nimport { ListHandlers } from \"./selectionTypes\";\nimport { CollectionHookResult, CollectionItem } from \"./collectionTypes\";\n\nconst NO_HANDLERS = {};\nconst canToggleItem = (item: CollectionItem<unknown>) =>\n  Array.isArray(item.childNodes);\n// TODO how do we determine this and where does this function belong = in the collectionHook ?\nconst canSelectItem = (item: CollectionItem<unknown>) => true;\n\nconst toggleIconClicked = (el: HTMLElement) => {\n  const closestToggle = el.closest(\n    \"[data-toggle],[aria-expanded]\"\n  ) as HTMLElement;\n  return closestToggle.dataset.toggle === \"true\";\n};\n\ninterface CollapsibleHookProps<Item> {\n  collapsibleHeaders?: boolean;\n  collectionHook: CollectionHookResult<Item>;\n  highlightedIdx: number;\n  onToggle?: (node: Item) => void;\n}\n\ninterface CollapsibleHookResult<Item> {\n  onClick?: ListHandlers[\"onClick\"];\n  onKeyDown?: ListHandlers[\"onKeyDown\"];\n}\n\nexport const useCollapsibleGroups = <Item>({\n  collapsibleHeaders,\n  collectionHook,\n  highlightedIdx,\n  onToggle,\n}: CollapsibleHookProps<Item>): CollapsibleHookResult<Item> => {\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === ArrowRight || e.key === Enter) {\n        const item = collectionHook.data[highlightedIdx];\n        if (item) {\n          if (item.expanded === false && item.value) {\n            e.preventDefault();\n            collectionHook.expandGroupItem(item);\n            onToggle?.(item.value);\n          }\n        }\n      }\n\n      if (e.key === ArrowLeft || e.key === Enter) {\n        const item = collectionHook.data[highlightedIdx];\n        if (item) {\n          if (item.expanded && item.value) {\n            e.preventDefault();\n            collectionHook.collapseGroupItem(item);\n            onToggle?.(item.value);\n          }\n        }\n      }\n    },\n    [\n      collectionHook.collapseGroupItem,\n      collectionHook.data,\n      collectionHook.expandGroupItem,\n      highlightedIdx,\n    ]\n  );\n\n  const handleClick = useCallback(\n    (evt: MouseEvent<HTMLElement>) => {\n      console.log(`useCollapsibleGroups idx=${highlightedIdx}`);\n      const item = collectionHook.data[highlightedIdx];\n      console.log(evt.target, evt.currentTarget);\n      if (\n        item &&\n        canToggleItem(item) &&\n        (!canSelectItem(item) || toggleIconClicked(evt.target as HTMLElement))\n      ) {\n        evt.stopPropagation();\n        evt.preventDefault();\n        if (item.expanded === false && item.value) {\n          collectionHook.expandGroupItem(item);\n          onToggle?.(item.value);\n        } else if (item.expanded === true && item.value) {\n          collectionHook.collapseGroupItem(item);\n          onToggle?.(item.value);\n        }\n      }\n    },\n    [\n      collectionHook.collapseGroupItem,\n      collectionHook.data,\n      collectionHook.expandGroupItem,\n      highlightedIdx,\n    ]\n  );\n\n  /**\n   * These are List handlers, so we will not have reference to the actual node\n   * element. We must rely on highlightedIdx to tell us which node is interactive.\n   */\n  const listHandlers = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n  };\n\n  return collapsibleHeaders ? listHandlers : NO_HANDLERS;\n};\n"],"names":["useCallback","ArrowRight","Enter","ArrowLeft"],"mappings":"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"}