@salt-ds/lab 1.0.0-alpha.31 → 1.0.0-alpha.32

package/dist-es/list-control/ListControlState.js

@@ -11,7 +11,9 @@ function useListControl(props) {
     selected: selectedProp,
     onSelectionChange,
     defaultValue,
-    value
+    value,
+    disabled,
+    readOnly
   } = props;
   const [focusedState, setFocusedState] = useState(false);
   const [focusVisibleState, setFocusVisibleState] = useState(false);
@@ -37,20 +39,15 @@ function useListControl(props) {
     name: "ListControl",
     state: "open"
   });
-  const openKey = useRef({
-    key: "",
-    altKey: false
-  });
-  const setOpen = (event, newOpen) => {
-    setOpenState(newOpen);
-    if (event.nativeEvent instanceof KeyboardEvent) {
-      openKey.current = {
-        key: event.nativeEvent.key,
-        altKey: event.nativeEvent.altKey
-      };
+  const openKey = useRef(void 0);
+  const setOpen = (newOpen, reason, key) => {
+    if (disabled || readOnly) {
+      return;
     }
+    setOpenState(newOpen);
+    openKey.current = key;
     if (newOpen !== openState) {
-      onOpenChange == null ? void 0 : onOpenChange(event, newOpen);
+      onOpenChange == null ? void 0 : onOpenChange(newOpen, reason);
     }
   };
   const [selectedState, setSelectedState] = useControlled({
@@ -60,16 +57,15 @@ function useListControl(props) {
     state: "selected"
   });
   const select = (event, option) => {
-    const { disabled, value: value2 } = option;
-    if (disabled) {
+    if (option.disabled || readOnly || disabled) {
       return;
     }
-    let newSelected = [value2];
+    let newSelected = [option.value];
     if (multiselect) {
-      if (selectedState.includes(value2)) {
-        newSelected = selectedState.filter((item) => item !== value2);
+      if (selectedState.includes(option.value)) {
+        newSelected = selectedState.filter((item) => item !== option.value);
       } else {
-        newSelected = selectedState.concat([value2]);
+        newSelected = selectedState.concat([option.value]);
       }
     }
     setSelectedState(newSelected);
@@ -77,11 +73,16 @@ function useListControl(props) {
       getOptionsMatching((option2) => newSelected.includes(option2.value)).map((option2) => option2.text).join(", ")
     );
     onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
+    if (!multiselect) {
+      setOpen(false);
+    }
   };
   const clear = (event) => {
     setSelectedState([]);
     setValueState("");
-    onSelectionChange == null ? void 0 : onSelectionChange(event, []);
+    if (selectedState.length !== 0) {
+      onSelectionChange == null ? void 0 : onSelectionChange(event, []);
+    }
   };
   const optionsRef = useRef([]);
   const register = useCallback(

package/dist-es/list-control/ListControlState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { OptionValue } from \"./ListControlContext\";\n\nexport interface ListControlProps<Item> {\n  /**\n   * If true, the list will be open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * If true, the list will be open. Useful for controlling the component.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the open state changes.\n   */\n  onOpenChange?: (event: SyntheticEvent, newOpen: boolean) => void;\n  /**\n   * The default selected options. If this is provided `defaultValue` should be provided as well.\n   */\n  defaultSelected?: Item[];\n  /**\n   * The selected options. The component will be controlled if this prop is provided.\n   */\n  selected?: Item[];\n  /**\n   * Callback fired when the selected options change.\n   */\n  onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;\n  /**\n   * The default value.\n   */\n  defaultValue?: string | readonly string[] | number | undefined;\n  /**\n   * The value. The component will be controlled if this prop is provided.\n   */\n  value?: string | readonly string[] | number | undefined;\n  /**\n   * If true, multiple options can be selected.\n   */\n  multiselect?: boolean;\n}\n\nexport function useListControl<Item>(props: ListControlProps<Item>) {\n  const {\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected: selectedProp,\n    onSelectionChange,\n    defaultValue,\n    value,\n  } = props;\n\n  const [focusedState, setFocusedState] = useState(false);\n  const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n  const [valueState, setValueState] = useControlled({\n    controlled: value,\n    default: defaultValue,\n    name: \"ListControl\",\n    state: \"value\",\n  });\n\n  const [activeState, setActiveState] = useState<OptionValue<Item> | undefined>(\n    undefined\n  );\n\n  const setActive = (option?: OptionValue<Item>) => {\n    if (option) {\n      setActiveState(option);\n    } else {\n      setActiveState(undefined);\n    }\n  };\n\n  const [openState, setOpenState] = useControlled({\n    controlled: openProp,\n    default: Boolean(defaultOpen),\n    name: \"ListControl\",\n    state: \"open\",\n  });\n\n  const openKey = useRef<{ key: string; altKey: boolean }>({\n    key: \"\",\n    altKey: false,\n  });\n  const setOpen = (event: SyntheticEvent, newOpen: boolean) => {\n    setOpenState(newOpen);\n\n    if (event.nativeEvent instanceof KeyboardEvent) {\n      openKey.current = {\n        key: event.nativeEvent.key,\n        altKey: event.nativeEvent.altKey,\n      };\n    }\n\n    if (newOpen !== openState) {\n      onOpenChange?.(event, newOpen);\n    }\n  };\n\n  const [selectedState, setSelectedState] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"ListControl\",\n    state: \"selected\",\n  });\n\n  const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\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    setValueState(\n      getOptionsMatching((option) => newSelected.includes(option.value))\n        .map((option) => option.text)\n        .join(\", \")\n    );\n    onSelectionChange?.(event, newSelected);\n  };\n\n  const clear = (event: SyntheticEvent) => {\n    setSelectedState([]);\n    setValueState(\"\");\n    onSelectionChange?.(event, []);\n  };\n\n  const optionsRef = useRef<\n    { value: OptionValue<Item>; element: HTMLElement }[]\n  >([]);\n\n  const register = useCallback(\n    (optionValue: OptionValue<Item>, element: HTMLElement) => {\n      const { id } = optionValue;\n      const option = optionsRef.current.find((item) => item.value.id === id);\n      const index = optionsRef.current.findIndex((option) => {\n        return (\n          option.element.compareDocumentPosition(element) &\n          Node.DOCUMENT_POSITION_PRECEDING\n        );\n      });\n\n      if (!option) {\n        if (index === -1) {\n          optionsRef.current.push({ value: optionValue, element });\n        } else {\n          optionsRef.current.splice(index, 0, { value: optionValue, element });\n        }\n      }\n\n      return () => {\n        optionsRef.current = optionsRef.current.filter(\n          (item) => item.value.id !== id\n        );\n      };\n    },\n    []\n  );\n\n  const getOptionAtIndex = (index: number) => {\n    return optionsRef.current[index]?.value;\n  };\n\n  const getIndexOfOption = (option: OptionValue<Item>) => {\n    return optionsRef.current.findIndex((item) => item.value.id === option.id);\n  };\n\n  const getOptionsMatching = (\n    predicate: (option: OptionValue<Item>) => boolean\n  ) => {\n    return optionsRef.current\n      .filter((item) => predicate(item.value))\n      .map((item) => item.value);\n  };\n\n  const getOptionFromSearch = (\n    search: string,\n    startFrom?: OptionValue<Item>\n  ) => {\n    const collator = new Intl.Collator(\"en\", {\n      usage: \"search\",\n      sensitivity: \"base\",\n    });\n\n    const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;\n    const searchList = optionsRef.current.map((item) => item.value);\n\n    let matches = searchList.filter(\n      (option) =>\n        collator.compare(option.text.substring(0, search.length), search) === 0\n    );\n\n    if (matches.length === 0) {\n      const letters = search.split(\"\");\n      const allSameLetter =\n        letters.length > 0 &&\n        letters.every((letter) => collator.compare(letter, letters[0]) === 0);\n      if (allSameLetter) {\n        matches = searchList.filter(\n          (option) =>\n            collator.compare(option.text[0].toLowerCase(), letters[0]) === 0\n        );\n      }\n    }\n\n    return matches.find((option) => getIndexOfOption(option) >= startIndex);\n  };\n\n  const listRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (listRef.current) {\n      const activeElement = optionsRef.current.find(\n        (option) => option.value === activeState\n      )?.element;\n\n      if (!activeElement) {\n        return;\n      }\n\n      const { scrollTop } = listRef.current;\n      const { offsetTop, offsetHeight } = activeElement;\n\n      const isVisible =\n        offsetTop >= scrollTop &&\n        offsetTop + offsetHeight <= scrollTop + listRef.current.offsetHeight;\n\n      if (!isVisible) {\n        activeElement.scrollIntoView({\n          block: \"end\",\n          inline: \"nearest\",\n        });\n      }\n    }\n  }, [activeState]);\n\n  return {\n    multiselect: Boolean(multiselect),\n    openState,\n    setOpen,\n    openKey,\n    activeState,\n    setActive,\n    selectedState,\n    setSelectedState,\n    select,\n    clear,\n    valueState,\n    setValueState,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    options: optionsRef.current.map((option) => option.element),\n    register,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n  };\n}\n"],"names":["value","option"],"mappings":"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"}
+{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { OptionValue } from \"./ListControlContext\";\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlProps<Item> {\n  disabled?: boolean;\n  readOnly?: boolean;\n  /**\n   * If true, the list will be open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * If true, the list will be open. Useful for controlling the component.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the open state changes.\n   */\n  onOpenChange?: (newOpen: boolean, reason?: OpenChangeReason) => void;\n  /**\n   * The default selected options. If this is provided `defaultValue` should be provided as well.\n   */\n  defaultSelected?: Item[];\n  /**\n   * The selected options. The component will be controlled if this prop is provided.\n   */\n  selected?: Item[];\n  /**\n   * Callback fired when the selected options change.\n   */\n  onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;\n  /**\n   * The default value.\n   */\n  defaultValue?: string | readonly string[] | number | undefined;\n  /**\n   * The value. The component will be controlled if this prop is provided.\n   */\n  value?: string | readonly string[] | number | undefined;\n  /**\n   * If true, multiple options can be selected.\n   */\n  multiselect?: boolean;\n}\n\nexport function useListControl<Item>(props: ListControlProps<Item>) {\n  const {\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected: selectedProp,\n    onSelectionChange,\n    defaultValue,\n    value,\n    disabled,\n    readOnly,\n  } = props;\n\n  const [focusedState, setFocusedState] = useState(false);\n  const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n  const [valueState, setValueState] = useControlled({\n    controlled: value,\n    default: defaultValue,\n    name: \"ListControl\",\n    state: \"value\",\n  });\n\n  const [activeState, setActiveState] = useState<OptionValue<Item> | undefined>(\n    undefined\n  );\n\n  const setActive = (option?: OptionValue<Item>) => {\n    if (option) {\n      setActiveState(option);\n    } else {\n      setActiveState(undefined);\n    }\n  };\n\n  const [openState, setOpenState] = useControlled({\n    controlled: openProp,\n    default: Boolean(defaultOpen),\n    name: \"ListControl\",\n    state: \"open\",\n  });\n\n  const openKey = useRef<string | undefined>(undefined);\n\n  const setOpen = (\n    newOpen: boolean,\n    reason?: OpenChangeReason,\n    key?: string\n  ) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    setOpenState(newOpen);\n    openKey.current = key;\n\n    if (newOpen !== openState) {\n      onOpenChange?.(newOpen, reason);\n    }\n  };\n\n  const [selectedState, setSelectedState] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? [],\n    name: \"ListControl\",\n    state: \"selected\",\n  });\n\n  const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n    if (option.disabled || readOnly || disabled) {\n      return;\n    }\n\n    let newSelected = [option.value];\n\n    if (multiselect) {\n      if (selectedState.includes(option.value)) {\n        newSelected = selectedState.filter((item) => item !== option.value);\n      } else {\n        newSelected = selectedState.concat([option.value]);\n      }\n    }\n\n    setSelectedState(newSelected);\n    setValueState(\n      getOptionsMatching((option) => newSelected.includes(option.value))\n        .map((option) => option.text)\n        .join(\", \")\n    );\n    onSelectionChange?.(event, newSelected);\n\n    if (!multiselect) {\n      setOpen(false);\n    }\n  };\n\n  const clear = (event: SyntheticEvent) => {\n    setSelectedState([]);\n    setValueState(\"\");\n    if (selectedState.length !== 0) {\n      onSelectionChange?.(event, []);\n    }\n  };\n\n  const optionsRef = useRef<\n    { value: OptionValue<Item>; element: HTMLElement }[]\n  >([]);\n\n  const register = useCallback(\n    (optionValue: OptionValue<Item>, element: HTMLElement) => {\n      const { id } = optionValue;\n      const option = optionsRef.current.find((item) => item.value.id === id);\n      const index = optionsRef.current.findIndex((option) => {\n        return (\n          option.element.compareDocumentPosition(element) &\n          Node.DOCUMENT_POSITION_PRECEDING\n        );\n      });\n\n      if (!option) {\n        if (index === -1) {\n          optionsRef.current.push({ value: optionValue, element });\n        } else {\n          optionsRef.current.splice(index, 0, { value: optionValue, element });\n        }\n      }\n\n      return () => {\n        optionsRef.current = optionsRef.current.filter(\n          (item) => item.value.id !== id\n        );\n      };\n    },\n    []\n  );\n\n  const getOptionAtIndex = (index: number) => {\n    return optionsRef.current[index]?.value;\n  };\n\n  const getIndexOfOption = (option: OptionValue<Item>) => {\n    return optionsRef.current.findIndex((item) => item.value.id === option.id);\n  };\n\n  const getOptionsMatching = (\n    predicate: (option: OptionValue<Item>) => boolean\n  ) => {\n    return optionsRef.current\n      .filter((item) => predicate(item.value))\n      .map((item) => item.value);\n  };\n\n  const getOptionFromSearch = (\n    search: string,\n    startFrom?: OptionValue<Item>\n  ) => {\n    const collator = new Intl.Collator(\"en\", {\n      usage: \"search\",\n      sensitivity: \"base\",\n    });\n\n    const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;\n    const searchList = optionsRef.current.map((item) => item.value);\n\n    let matches = searchList.filter(\n      (option) =>\n        collator.compare(option.text.substring(0, search.length), search) === 0\n    );\n\n    if (matches.length === 0) {\n      const letters = search.split(\"\");\n      const allSameLetter =\n        letters.length > 0 &&\n        letters.every((letter) => collator.compare(letter, letters[0]) === 0);\n      if (allSameLetter) {\n        matches = searchList.filter(\n          (option) =>\n            collator.compare(option.text[0].toLowerCase(), letters[0]) === 0\n        );\n      }\n    }\n\n    return matches.find((option) => getIndexOfOption(option) >= startIndex);\n  };\n\n  const listRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (listRef.current) {\n      const activeElement = optionsRef.current.find(\n        (option) => option.value === activeState\n      )?.element;\n\n      if (!activeElement) {\n        return;\n      }\n\n      const { scrollTop } = listRef.current;\n      const { offsetTop, offsetHeight } = activeElement;\n\n      const isVisible =\n        offsetTop >= scrollTop &&\n        offsetTop + offsetHeight <= scrollTop + listRef.current.offsetHeight;\n\n      if (!isVisible) {\n        activeElement.scrollIntoView({\n          block: \"end\",\n          inline: \"nearest\",\n        });\n      }\n    }\n  }, [activeState]);\n\n  return {\n    multiselect: Boolean(multiselect),\n    openState,\n    setOpen,\n    openKey,\n    activeState,\n    setActive,\n    selectedState,\n    setSelectedState,\n    select,\n    clear,\n    valueState,\n    setValueState,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    options: optionsRef.current.map((option) => option.element),\n    register,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n  };\n}\n"],"names":["option"],"mappings":"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"}

package/dist-es/option/Option.js

@@ -44,7 +44,6 @@ const Option = forwardRef(function Option2(props, ref) {
     setActive,
     activeState,
     multiselect,
-    setOpen,
     select,
     register,
     selectedState,
@@ -67,9 +66,6 @@ const Option = forwardRef(function Option2(props, ref) {
     }
     setActive(optionValue);
     select(event, optionValue);
-    if (!multiselect) {
-      setOpen(event, false);
-    }
     onClick == null ? void 0 : onClick(event);
   };
   useEffect(() => {

package/dist-es/option/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  MouseEvent,\n  useRef,\n  useEffect,\n  useMemo,\n  Children,\n} from \"react\";\nimport { Checkbox, makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  OptionValue,\n  useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the option.\n   */\n  value: unknown;\n  /**\n   * The text value of the option. If not provided, the text value will be inferred from the children.\n   */\n  textValue?: string;\n  /**\n   * The content of the option.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nfunction getOptionText(textValue: string | undefined, children: ReactNode) {\n  if (textValue) {\n    return textValue;\n  }\n\n  let textString = \"\";\n  Children.forEach(children, (child) => {\n    if (typeof child === \"string\") {\n      textString += child;\n    }\n  });\n\n  return textString;\n}\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(function Option(\n  props,\n  ref\n) {\n  const {\n    className,\n    children,\n    disabled,\n    onClick,\n    id: idProp,\n    value,\n    textValue,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-option\",\n    css: optionCss,\n    window: targetWindow,\n  });\n\n  const optionRef = useRef(null);\n  const id = useId(idProp);\n  const optionText = getOptionText(textValue, children);\n\n  const {\n    setActive,\n    activeState,\n    multiselect,\n    setOpen,\n    select,\n    register,\n    selectedState,\n    focusVisibleState,\n  } = useListControlContext();\n\n  const selected = selectedState.includes(value);\n  const active = activeState?.id === id;\n\n  const optionValue: OptionValue<unknown> = useMemo(\n    () => ({\n      id: String(id),\n      disabled: Boolean(disabled),\n      value,\n      text: optionText,\n    }),\n    [id, disabled, value, optionText]\n  );\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disabled || id == undefined) {\n      return;\n    }\n\n    // set active descendent\n    setActive(optionValue);\n\n    // handle selection\n    select(event, optionValue);\n\n    // handle close if multi-select\n    if (!multiselect) {\n      setOpen(event, false);\n    }\n\n    onClick?.(event);\n  };\n\n  useEffect(() => {\n    if (id && optionRef.current) {\n      return register(optionValue, optionRef.current);\n    }\n  }, [optionValue, id, register]);\n\n  const handleRef = useForkRef(optionRef, ref);\n\n  return (\n    <div\n      aria-disabled={disabled ? \"true\" : undefined}\n      aria-selected={selected}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"active\")]: active,\n          [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n        },\n        className\n      )}\n      ref={handleRef}\n      role=\"option\"\n      id={id}\n      onClick={handleClick}\n      {...rest}\n    >\n      {multiselect && (\n        <Checkbox checked={selected} aria-hidden=\"true\" tabIndex={-1} />\n      )}\n      {children}\n    </div>\n  );\n});\n"],"names":["Option","optionCss"],"mappings":"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"}
+{"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  MouseEvent,\n  useRef,\n  useEffect,\n  useMemo,\n  Children,\n} from \"react\";\nimport { Checkbox, makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  OptionValue,\n  useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the option.\n   */\n  value: unknown;\n  /**\n   * The text value of the option. If not provided, the text value will be inferred from the children.\n   */\n  textValue?: string;\n  /**\n   * The content of the option.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nfunction getOptionText(textValue: string | undefined, children: ReactNode) {\n  if (textValue) {\n    return textValue;\n  }\n\n  let textString = \"\";\n  Children.forEach(children, (child) => {\n    if (typeof child === \"string\") {\n      textString += child;\n    }\n  });\n\n  return textString;\n}\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(function Option(\n  props,\n  ref\n) {\n  const {\n    className,\n    children,\n    disabled,\n    onClick,\n    id: idProp,\n    value,\n    textValue,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-option\",\n    css: optionCss,\n    window: targetWindow,\n  });\n\n  const optionRef = useRef(null);\n  const id = useId(idProp);\n  const optionText = getOptionText(textValue, children);\n\n  const {\n    setActive,\n    activeState,\n    multiselect,\n    select,\n    register,\n    selectedState,\n    focusVisibleState,\n  } = useListControlContext();\n\n  const selected = selectedState.includes(value);\n  const active = activeState?.id === id;\n\n  const optionValue: OptionValue<unknown> = useMemo(\n    () => ({\n      id: String(id),\n      disabled: Boolean(disabled),\n      value,\n      text: optionText,\n    }),\n    [id, disabled, value, optionText]\n  );\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disabled || id == undefined) {\n      return;\n    }\n\n    // set active descendent\n    setActive(optionValue);\n\n    // handle selection\n    select(event, optionValue);\n\n    onClick?.(event);\n  };\n\n  useEffect(() => {\n    if (id && optionRef.current) {\n      return register(optionValue, optionRef.current);\n    }\n  }, [optionValue, id, register]);\n\n  const handleRef = useForkRef(optionRef, ref);\n\n  return (\n    <div\n      aria-disabled={disabled ? \"true\" : undefined}\n      aria-selected={selected}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"active\")]: active,\n          [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n        },\n        className\n      )}\n      ref={handleRef}\n      role=\"option\"\n      id={id}\n      onClick={handleClick}\n      {...rest}\n    >\n      {multiselect && (\n        <Checkbox checked={selected} aria-hidden=\"true\" tabIndex={-1} />\n      )}\n      {children}\n    </div>\n  );\n});\n"],"names":["Option","optionCss"],"mappings":"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"}

package/dist-es/option/OptionList.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltOptionList {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-popout);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltOptionList-collapsed {\n  display: none;\n}\n";
+var css_248z = ".saltOptionList {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltOptionList-collapsed {\n  display: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=OptionList.css.js.map

package/dist-es/tabs-next/TabNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-navigable-primary-background);\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext-primary {\n  --tabNext-background-active: var(--salt-container-primary-background);\n}\n\n.saltTabNext-secondary {\n  --tabNext-background-active: var(--salt-container-secondary-background);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabNext-main::after {\n  top: 0;\n}\n\n.saltTabNext-inline::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:disabled:hover::after,\n.saltTabNext:disabled:focus-visible::after {\n  background: none;\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabNext-main[aria-selected=\"true\"] {\n  background: var(--tabNext-background-active);\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-navigable-primary-background);\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-radius: 0;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext-primary {\n  --tabNext-background-active: var(--salt-container-primary-background);\n}\n\n.saltTabNext-secondary {\n  --tabNext-background-active: var(--salt-container-secondary-background);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabNext-main::after {\n  top: 0;\n}\n\n.saltTabNext-inline::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext:disabled:hover::after,\n.saltTabNext:disabled:focus-visible::after {\n  background: none;\n}\n\n.saltTabNext:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabNext-main[aria-selected=\"true\"] {\n  background: var(--tabNext-background-active);\n  border-left: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabNext[aria-selected=\"true\"]::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext:disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TabNext.css.js.map

package/dist-es/tabs-next/TabstripNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TabstripNext.css.js.map

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

@@ -6,6 +6,14 @@ export interface ComboBoxNextProps<Item = string> extends InputProps, Omit<ListC
      * The options to display in the combo box.
      */
     children?: ReactNode;
+    /**
+     * The default value of the input.
+     */
+    defaultValue?: string | readonly string[] | number | undefined;
+    /**
+     * The value of the input. The component will be controlled if this prop is provided.
+     */
+    value?: string | readonly string[] | number | undefined;
 }
 export declare const ComboBoxNext: <Item = string>(props: ComboBoxNextProps<Item> & {
     ref?: Ref<HTMLDivElement> | undefined;

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

@@ -5,11 +5,8 @@ export declare function useComboBoxNext<Item>(props: ListControlProps<Item>): {
     select: (event: SyntheticEvent, option: OptionValue<Item>) => void;
     multiselect: boolean;
     openState: boolean;
-    setOpen: (event: SyntheticEvent<Element, Event>, newOpen: boolean) => void;
-    openKey: import("react").MutableRefObject<{
-        key: string;
-        altKey: boolean;
-    }>;
+    setOpen: (newOpen: boolean, reason?: import("../list-control/ListControlState").OpenChangeReason | undefined, key?: string | undefined) => void;
+    openKey: import("react").MutableRefObject<string | undefined>;
     activeState: OptionValue<Item> | undefined;
     setActive: (option?: OptionValue<Item> | undefined) => void;
     selectedState: Item[];

package/dist-types/dialog/Dialog.d.ts

@@ -1,6 +1,11 @@
-import { HTMLAttributes, ComponentProps } from "react";
+import { HTMLAttributes, ComponentProps, ReactNode } from "react";
 import { FloatingFocusManager } from "@floating-ui/react";
 import { ValidationStatus } from "@salt-ds/core";
+interface ConditionalScrimWrapperProps {
+    children?: ReactNode;
+    condition: boolean;
+}
+export declare const ConditionalScrimWrapper: ({ condition, children, }: ConditionalScrimWrapperProps) => JSX.Element;
 export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Display or hide the component.
@@ -27,5 +32,15 @@ export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
      * Prevent the dialog closing on click away
      * */
     disableDismiss?: boolean;
+    /**
+     * Prevent Scrim from rendering
+     * */
+    disableScrim?: boolean;
+    /**
+     * Optional id prop
+     * Used for accessibility purposes to announce the title and subtitle when using a screen reader
+     * */
+    idProp?: string;
 }
 export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/dialog/DialogContext.d.ts

@@ -1,6 +1,8 @@
 export declare const DialogContext: import("react").Context<{
     status?: "error" | "warning" | "success" | "info" | undefined;
+    id: string | undefined;
 }>;
 export declare const useDialogContext: () => {
     status?: "error" | "warning" | "success" | "info" | undefined;
+    id: string | undefined;
 };

package/dist-types/dialog/DialogTitle.d.ts

@@ -1,14 +1,22 @@
-import { ComponentPropsWithoutRef } from "react";
+import { ReactNode, ComponentPropsWithoutRef } from "react";
 import { ValidationStatus } from "@salt-ds/core";
-interface DialogTitleProps extends ComponentPropsWithoutRef<"h2"> {
+interface DialogTitleProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
     /**
      * The status of the Dialog
-     * */
+     */
     status?: ValidationStatus | undefined;
     /**
-     * Displays the accent bar in the Dialog Title
-     * */
+     * Displays the accent bar in the Dialog Title */
     disableAccent?: boolean;
+    /**
+     * Displays the Dialog Title in a H2 component
+     */
+    title: ReactNode;
+    /**
+     * Displays the Dialog Subtitle in a Label component
+     **/
+    subtitle?: ReactNode;
+    className?: string;
 }
-export declare const DialogTitle: ({ children, className, disableAccent, status: statusProp, ...rest }: DialogTitleProps) => JSX.Element;
+export declare const DialogTitle: ({ className, title, subtitle, disableAccent, status: statusProp, ...rest }: DialogTitleProps) => JSX.Element;
 export {};

package/dist-types/drawer/Drawer.d.ts

@@ -1,11 +1,9 @@
-import { HTMLAttributes } from "react";
-export declare const DRAWER_POSITIONS: readonly ["left", "top", "right", "bottom"];
-export declare type DrawerPositions = (typeof DRAWER_POSITIONS)[number];
-export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
+import { ComponentPropsWithoutRef } from "react";
+export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
     /**
-     * Defines the drawer position within the screen.
+     * Defines the drawer position within the screen. Defaults to `left`.
      */
-    position?: DrawerPositions;
+    position?: "left" | "top" | "right" | "bottom";
     /**
      * Display or hide the component.
      */
@@ -13,10 +11,18 @@ export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Callback function triggered when open state changes.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: (newOpen: boolean) => void;
     /**
      * Change background color palette
      */
     variant?: "primary" | "secondary";
+    /**
+     * Prevent the dialog closing on click away
+     * */
+    disableDismiss?: boolean;
+    /**
+     * Prevent Scrim from rendering
+     * */
+    disableScrim?: boolean;
 }
 export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/drawer/DrawerCloseButton.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from "@salt-ds/core";
+export declare const DrawerCloseButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,2 +1,2 @@
 export * from "./Drawer";
-export * from "./useDrawer";
+export * from "./DrawerCloseButton";

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

@@ -39,6 +39,14 @@ export interface DropdownNextProps<Item = string> extends Omit<ComponentPropsWit
      * Styling variant. Defaults to "primary".
      */
     variant?: "primary" | "secondary";
+    /**
+     * The default content of the dropdown shown in the button.
+     */
+    defaultValue?: string | readonly string[] | number | undefined;
+    /**
+     * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.
+     */
+    value?: string | readonly string[] | number | undefined;
     /**
      * Validation status, one of "error" | "warning" | "success".
      */

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

@@ -5,9 +5,10 @@ export interface OptionValue<Item> {
     value: Item;
     text: string;
 }
+export declare type OpenChangeReason = "input" | "manual";
 export interface ListControlContextValue<Item> {
     openState: boolean;
-    setOpen: (event: SyntheticEvent, newOpen: boolean) => void;
+    setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;
     register: (optionValue: OptionValue<Item>, element: HTMLElement) => () => void;
     selectedState: unknown[];
     select: (event: SyntheticEvent, option: OptionValue<Item>) => void;

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

@@ -1,6 +1,9 @@
 import { SyntheticEvent } from "react";
 import { OptionValue } from "./ListControlContext";
+export declare type OpenChangeReason = "input" | "manual";
 export interface ListControlProps<Item> {
+    disabled?: boolean;
+    readOnly?: boolean;
     /**
      * If true, the list will be open by default.
      */
@@ -12,7 +15,7 @@ export interface ListControlProps<Item> {
     /**
      * Callback fired when the open state changes.
      */
-    onOpenChange?: (event: SyntheticEvent, newOpen: boolean) => void;
+    onOpenChange?: (newOpen: boolean, reason?: OpenChangeReason) => void;
     /**
      * The default selected options. If this is provided `defaultValue` should be provided as well.
      */
@@ -41,11 +44,8 @@ export interface ListControlProps<Item> {
 export declare function useListControl<Item>(props: ListControlProps<Item>): {
     multiselect: boolean;
     openState: boolean;
-    setOpen: (event: SyntheticEvent, newOpen: boolean) => void;
-    openKey: import("react").MutableRefObject<{
-        key: string;
-        altKey: boolean;
-    }>;
+    setOpen: (newOpen: boolean, reason?: OpenChangeReason | undefined, key?: string | undefined) => void;
+    openKey: import("react").MutableRefObject<string | undefined>;
     activeState: OptionValue<Item> | undefined;
     setActive: (option?: OptionValue<Item> | undefined) => void;
     selectedState: Item[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.31",
+  "version": "1.0.0-alpha.32",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.17.0",
+    "@salt-ds/core": "^1.18.0",
     "@salt-ds/window": "^0.1.1",
     "@salt-ds/styles": "^0.2.1",
     "@salt-ds/icons": "^1.9.1"

package/dist-cjs/drawer/useDrawer.js

@@ -1,31 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('@floating-ui/react');
-var core = require('@salt-ds/core');
-
-function useDrawer(props) {
-  const { open, onOpenChange } = props;
-  const { context, floating } = core.useFloatingUI({
-    open,
-    onOpenChange
-  });
-  const click = react.useClick(context);
-  const role = react.useRole(context);
-  const dismiss = react.useDismiss(context);
-  const { getFloatingProps, getReferenceProps } = react.useInteractions([
-    role,
-    dismiss,
-    click
-  ]);
-  return {
-    getFloatingProps,
-    getReferenceProps,
-    floating,
-    context
-  };
-}
-
-exports.useDrawer = useDrawer;
-//# sourceMappingURL=useDrawer.js.map

package/dist-cjs/drawer/useDrawer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDrawer.js","sources":["../src/drawer/useDrawer.ts"],"sourcesContent":["import {\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { useFloatingUI, UseFloatingUIProps } from \"@salt-ds/core\";\n\nexport type UseDrawerProps = Partial<\n  Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\">\n>;\n\nexport function useDrawer(props: UseDrawerProps) {\n  const { open, onOpenChange } = props;\n\n  const { context, floating } = useFloatingUI({\n    open,\n    onOpenChange,\n  });\n\n  const click = useClick(context);\n  const role = useRole(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps, getReferenceProps } = useInteractions([\n    role,\n    dismiss,\n    click,\n  ]);\n\n  return {\n    getFloatingProps,\n    getReferenceProps,\n    floating,\n    context,\n  };\n}\n"],"names":["useFloatingUI","useClick","useRole","useDismiss","useInteractions"],"mappings":";;;;;;;AAYO,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA,EAAE,IAAM,EAAA,YAAA,EAAiB,GAAA,KAAA,CAAA;AAE/B,EAAA,MAAM,EAAE,OAAA,EAAS,QAAS,EAAA,GAAIA,kBAAc,CAAA;AAAA,IAC1C,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GAAQC,eAAS,OAAO,CAAA,CAAA;AAC9B,EAAM,MAAA,IAAA,GAAOC,cAAQ,OAAO,CAAA,CAAA;AAC5B,EAAM,MAAA,OAAA,GAAUC,iBAAW,OAAO,CAAA,CAAA;AAElC,EAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAkB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9D,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-es/drawer/useDrawer.js

@@ -1,27 +0,0 @@
-import { useClick, useRole, useDismiss, useInteractions } from '@floating-ui/react';
-import { useFloatingUI } from '@salt-ds/core';
-
-function useDrawer(props) {
-  const { open, onOpenChange } = props;
-  const { context, floating } = useFloatingUI({
-    open,
-    onOpenChange
-  });
-  const click = useClick(context);
-  const role = useRole(context);
-  const dismiss = useDismiss(context);
-  const { getFloatingProps, getReferenceProps } = useInteractions([
-    role,
-    dismiss,
-    click
-  ]);
-  return {
-    getFloatingProps,
-    getReferenceProps,
-    floating,
-    context
-  };
-}
-
-export { useDrawer };
-//# sourceMappingURL=useDrawer.js.map

package/dist-es/drawer/useDrawer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDrawer.js","sources":["../src/drawer/useDrawer.ts"],"sourcesContent":["import {\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { useFloatingUI, UseFloatingUIProps } from \"@salt-ds/core\";\n\nexport type UseDrawerProps = Partial<\n  Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\">\n>;\n\nexport function useDrawer(props: UseDrawerProps) {\n  const { open, onOpenChange } = props;\n\n  const { context, floating } = useFloatingUI({\n    open,\n    onOpenChange,\n  });\n\n  const click = useClick(context);\n  const role = useRole(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps, getReferenceProps } = useInteractions([\n    role,\n    dismiss,\n    click,\n  ]);\n\n  return {\n    getFloatingProps,\n    getReferenceProps,\n    floating,\n    context,\n  };\n}\n"],"names":[],"mappings":";;;AAYO,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA,EAAE,IAAM,EAAA,YAAA,EAAiB,GAAA,KAAA,CAAA;AAE/B,EAAA,MAAM,EAAE,OAAA,EAAS,QAAS,EAAA,GAAI,aAAc,CAAA;AAAA,IAC1C,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GAAQ,SAAS,OAAO,CAAA,CAAA;AAC9B,EAAM,MAAA,IAAA,GAAO,QAAQ,OAAO,CAAA,CAAA;AAC5B,EAAM,MAAA,OAAA,GAAU,WAAW,OAAO,CAAA,CAAA;AAElC,EAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAkB,EAAA,GAAI,eAAgB,CAAA;AAAA,IAC9D,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-types/drawer/useDrawer.d.ts

@@ -1,25 +0,0 @@
-import { UseFloatingUIProps } from "@salt-ds/core";
-export declare type UseDrawerProps = Partial<Pick<UseFloatingUIProps, "onOpenChange" | "open">>;
-export declare function useDrawer(props: UseDrawerProps): {
-    getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
-    getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
-    floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
-    context: {
-        x: number;
-        y: number;
-        placement: import("@floating-ui/utils").Placement;
-        strategy: import("@floating-ui/utils").Strategy;
-        middlewareData: import("@floating-ui/core").MiddlewareData;
-        isPositioned: boolean;
-        update: () => void;
-        floatingStyles: import("react").CSSProperties;
-        open: boolean;
-        onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
-        events: import("@floating-ui/react").FloatingEvents;
-        dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
-        nodeId: string | undefined;
-        floatingId: string;
-        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    };
-};