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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/css/salt-lab.css +27 -18
  2. package/dist-cjs/app-header/AppHeader.css.js +1 -1
  3. package/dist-cjs/combo-box-next/ComboBoxNext.js +54 -57
  4. package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
  5. package/dist-cjs/combo-box-next/useComboBoxNext.js +21 -9
  6. package/dist-cjs/combo-box-next/useComboBoxNext.js.map +1 -1
  7. package/dist-cjs/dialog/Dialog.js +28 -11
  8. package/dist-cjs/dialog/Dialog.js.map +1 -1
  9. package/dist-cjs/dialog/DialogContent.css.js +1 -1
  10. package/dist-cjs/dialog/DialogContext.js +2 -1
  11. package/dist-cjs/dialog/DialogContext.js.map +1 -1
  12. package/dist-cjs/dialog/DialogTitle.css.js +1 -1
  13. package/dist-cjs/dialog/DialogTitle.js +18 -4
  14. package/dist-cjs/dialog/DialogTitle.js.map +1 -1
  15. package/dist-cjs/drawer/Drawer.css.js +1 -1
  16. package/dist-cjs/drawer/Drawer.js +61 -36
  17. package/dist-cjs/drawer/Drawer.js.map +1 -1
  18. package/dist-cjs/drawer/DrawerCloseButton.css.js +6 -0
  19. package/dist-cjs/drawer/DrawerCloseButton.css.js.map +1 -0
  20. package/dist-cjs/drawer/DrawerCloseButton.js +44 -0
  21. package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -0
  22. package/dist-cjs/dropdown-next/DropdownNext.js +49 -58
  23. package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
  24. package/dist-cjs/index.js +3 -3
  25. package/dist-cjs/list-control/ListControlContext.js.map +1 -1
  26. package/dist-cjs/list-control/ListControlState.js +21 -20
  27. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  28. package/dist-cjs/option/Option.js +0 -4
  29. package/dist-cjs/option/Option.js.map +1 -1
  30. package/dist-cjs/option/OptionList.css.js +1 -1
  31. package/dist-cjs/tabs-next/TabNext.css.js +1 -1
  32. package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
  33. package/dist-es/app-header/AppHeader.css.js +1 -1
  34. package/dist-es/combo-box-next/ComboBoxNext.js +55 -58
  35. package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
  36. package/dist-es/combo-box-next/useComboBoxNext.js +21 -9
  37. package/dist-es/combo-box-next/useComboBoxNext.js.map +1 -1
  38. package/dist-es/dialog/Dialog.js +30 -14
  39. package/dist-es/dialog/Dialog.js.map +1 -1
  40. package/dist-es/dialog/DialogContent.css.js +1 -1
  41. package/dist-es/dialog/DialogContext.js +2 -1
  42. package/dist-es/dialog/DialogContext.js.map +1 -1
  43. package/dist-es/dialog/DialogTitle.css.js +1 -1
  44. package/dist-es/dialog/DialogTitle.js +19 -5
  45. package/dist-es/dialog/DialogTitle.js.map +1 -1
  46. package/dist-es/drawer/Drawer.css.js +1 -1
  47. package/dist-es/drawer/Drawer.js +65 -39
  48. package/dist-es/drawer/Drawer.js.map +1 -1
  49. package/dist-es/drawer/DrawerCloseButton.css.js +4 -0
  50. package/dist-es/drawer/DrawerCloseButton.css.js.map +1 -0
  51. package/dist-es/drawer/DrawerCloseButton.js +36 -0
  52. package/dist-es/drawer/DrawerCloseButton.js.map +1 -0
  53. package/dist-es/dropdown-next/DropdownNext.js +50 -59
  54. package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
  55. package/dist-es/index.js +3 -3
  56. package/dist-es/list-control/ListControlContext.js.map +1 -1
  57. package/dist-es/list-control/ListControlState.js +21 -20
  58. package/dist-es/list-control/ListControlState.js.map +1 -1
  59. package/dist-es/option/Option.js +0 -4
  60. package/dist-es/option/Option.js.map +1 -1
  61. package/dist-es/option/OptionList.css.js +1 -1
  62. package/dist-es/tabs-next/TabNext.css.js +1 -1
  63. package/dist-es/tabs-next/TabstripNext.css.js +1 -1
  64. package/dist-types/combo-box-next/ComboBoxNext.d.ts +8 -0
  65. package/dist-types/combo-box-next/useComboBoxNext.d.ts +2 -5
  66. package/dist-types/dialog/Dialog.d.ts +16 -1
  67. package/dist-types/dialog/DialogContext.d.ts +2 -0
  68. package/dist-types/dialog/DialogTitle.d.ts +14 -6
  69. package/dist-types/drawer/Drawer.d.ts +13 -7
  70. package/dist-types/drawer/DrawerCloseButton.d.ts +2 -0
  71. package/dist-types/drawer/index.d.ts +1 -1
  72. package/dist-types/dropdown-next/DropdownNext.d.ts +8 -0
  73. package/dist-types/list-control/ListControlContext.d.ts +2 -1
  74. package/dist-types/list-control/ListControlState.d.ts +6 -6
  75. package/package.json +2 -2
  76. package/dist-cjs/drawer/useDrawer.js +0 -31
  77. package/dist-cjs/drawer/useDrawer.js.map +0 -1
  78. package/dist-es/drawer/useDrawer.js +0 -27
  79. package/dist-es/drawer/useDrawer.js.map +0 -1
  80. package/dist-types/drawer/useDrawer.d.ts +0 -25
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n MouseEvent,\n KeyboardEvent,\n useEffect,\n FocusEvent,\n useRef,\n ForwardedRef,\n Ref,\n} from \"react\";\nimport {\n ListControlProps,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n makePrefixer,\n StatusAdornment,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useFormFieldProps,\n useId,\n ValidationStatus,\n} from \"@salt-ds/core\";\nimport { flip, size } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dropdownCss from \"./DropdownNext.css\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { OptionList } from \"../option/OptionList\";\n\nexport interface DropdownNextProps<Item = string>\n extends Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\">,\n ListControlProps<Item> {\n /**\n * If `true`, the dropdown will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the dropdown will be read-only.\n */\n readOnly?: boolean;\n /**\n * The options to display in the dropdown.\n */\n children?: ReactNode;\n /**\n * The marker to use in an empty read only dropdown.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * If `true`, the dropdown will be multiselect.\n */\n multiselect?: boolean;\n /**\n * The text shown when the dropdown has no value.\n */\n placeholder?: string;\n /**\n * If `true`, the dropdown will be required.\n */\n required?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Validation status, one of \"error\" | \"warning\" | \"success\".\n */\n validationStatus?: Exclude<ValidationStatus, \"info\">;\n}\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n return open ? <ChevronUpIcon aria-hidden /> : <ChevronDownIcon aria-hidden />;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport const DropdownNext = forwardRef(function DropdownNext<Item>(\n props: DropdownNextProps<Item>,\n ref: ForwardedRef<HTMLButtonElement>\n) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\n className,\n disabled: disabledProp,\n emptyReadOnlyMarker = \"—\",\n readOnly: readOnlyProp,\n multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n defaultValue: defaultValueProp,\n value,\n onOpenChange,\n open,\n placeholder,\n startAdornment,\n required: requiredProp,\n variant = \"primary\",\n validationStatus: validationStatusProp,\n onClick,\n onKeyDown,\n onFocus,\n onBlur,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-DropdownNext\",\n css: dropdownCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const validationStatus = validationStatusProp ?? formFieldValidationStatus;\n const required = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : undefined ?? requiredProp;\n\n const isEmptyReadOnly = readOnly && !defaultValueProp && !value;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const listControl = useListControl<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n defaultValue,\n value,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n options,\n selectedState,\n select,\n valueState,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { x, y, strategy, elements, floating, reference } = useFloatingUI({\n open,\n placement: \"bottom-start\",\n middleware: [\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (!readOnly) {\n setFocusVisibleState(false);\n setOpen(event, !openState);\n }\n onClick?.(event);\n };\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (typeaheadTimeout.current) {\n clearTimeout(typeaheadTimeout.current);\n }\n typeaheadString.current += event.key;\n typeaheadTimeout.current = window.setTimeout(() => {\n typeaheadString.current = \"\";\n }, 500);\n\n if (!openState) {\n setOpen(event, true);\n }\n\n let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n if (!newOption) {\n newOption = getOptionFromSearch(typeaheadString.current);\n }\n\n if (newOption) {\n setActive(newOption);\n setFocusVisibleState(true);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n const count = options.length - 1;\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(event, true);\n return;\n }\n }\n\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n event.preventDefault();\n event.stopPropagation();\n handleTypeahead(event);\n }\n\n let newActive;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n break;\n case \"ArrowUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n break;\n case \"Home\":\n newActive = getOptionAtIndex(0);\n break;\n case \"End\":\n newActive = getOptionAtIndex(count);\n break;\n case \"PageUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n break;\n case \"PageDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n break;\n case \"Enter\":\n case \" \":\n if (\n (openState && Boolean(activeState?.disabled)) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n if (!multiselect) {\n setOpen(event, false);\n }\n\n break;\n case \"Escape\":\n setOpen(event, false);\n break;\n case \"Tab\":\n if (!multiselect && activeState) {\n select(event, activeState);\n }\n break;\n }\n\n if (newActive && newActive?.id != activeState?.id) {\n event.preventDefault();\n setActive(newActive);\n setFocusVisibleState(true);\n }\n\n onKeyDown?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(true);\n\n onFocus?.(event);\n };\n\n const ignoreBlur = useRef(false);\n\n const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n if (!ignoreBlur.current) {\n setOpen(event, false);\n }\n ignoreBlur.current = false;\n\n setFocusedState(false);\n onBlur?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleListMouseDown = () => {\n ignoreBlur.current = true;\n };\n\n const handleListFocus = () => {\n buttonRef.current?.focus();\n };\n const handleListClick = () => {\n buttonRef.current?.focus();\n };\n\n useEffect(() => {\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n if (openState && activeIndex < 0) {\n if (openKey.current.key === \"ArrowDown\") {\n setActive(getOptionAtIndex(0));\n } else if (openKey.current.key === \"ArrowUp\") {\n setActive(getOptionAtIndex(options.length - 1));\n } else {\n if (selectedState.length > 0) {\n const selected = getOptionsMatching(\n (option) => option.value === selectedState[0]\n ).pop();\n if (selected) {\n setActive(selected);\n }\n } else {\n setActive(getOptionAtIndex(0));\n }\n }\n } else if (!openState) {\n setActive(undefined);\n }\n }, [openState, children]);\n\n const listId = useId();\n\n return (\n <ListControlContext.Provider value={listControl}>\n <button\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className\n )}\n ref={handleButtonRef}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n role=\"combobox\"\n type=\"button\"\n disabled={disabled}\n aria-readonly={readOnly ? \"true\" : undefined}\n aria-required={required ? \"true\" : undefined}\n aria-expanded={openState}\n aria-activedescendant={activeState?.id}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-describedby={\n clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n }\n aria-multiselectable={multiselect}\n aria-controls={openState ? listId : undefined}\n {...rest}\n >\n {startAdornment}\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"placeholder\")]: !valueState,\n })}\n >\n {valueState ?? placeholder}\n </span>\n {validationStatus && <StatusAdornment status={validationStatus} />}\n {!readOnly && <ExpandIcon open={openState} />}\n </button>\n <FloatingComponent\n open={(openState || focusedState) && !readOnly && children != undefined}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n ref={floating}\n >\n <OptionList\n id={listId}\n collapsed={!openState}\n onMouseOver={handleListMouseOver}\n onMouseDown={handleListMouseDown}\n onFocus={handleListFocus}\n onClick={handleListClick}\n ref={listRef}\n >\n {children}\n </OptionList>\n </FloatingComponent>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: DropdownNextProps<Item> & { ref?: Ref<HTMLButtonElement> }\n) => JSX.Element;\n"],"names":["jsx","ChevronUpIcon","ChevronDownIcon","makePrefixer","forwardRef","DropdownNext","useWindow","useComponentCssInjection","dropdownCss","useFormFieldProps","useListControl","useFloatingComponent","useFloatingUI","size","elements","flip","useRef","useForkRef","_a","useEffect","selected","useId","jsxs","ListControlContext","clsx","StatusAdornment","OptionList"],"mappings":"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"}
1
+ {"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n KeyboardEvent,\n useEffect,\n FocusEvent,\n useRef,\n ForwardedRef,\n Ref,\n} from \"react\";\nimport {\n ListControlProps,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n makePrefixer,\n StatusAdornment,\n useFloatingComponent,\n useFloatingUI,\n UseFloatingUIProps,\n useForkRef,\n useFormFieldProps,\n useId,\n ValidationStatus,\n} from \"@salt-ds/core\";\nimport {\n flip,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dropdownCss from \"./DropdownNext.css\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { OptionList } from \"../option/OptionList\";\n\nexport interface DropdownNextProps<Item = string>\n extends Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\">,\n ListControlProps<Item> {\n /**\n * If `true`, the dropdown will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the dropdown will be read-only.\n */\n readOnly?: boolean;\n /**\n * The options to display in the dropdown.\n */\n children?: ReactNode;\n /**\n * The marker to use in an empty read only dropdown.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * If `true`, the dropdown will be multiselect.\n */\n multiselect?: boolean;\n /**\n * The text shown when the dropdown has no value.\n */\n placeholder?: string;\n /**\n * If `true`, the dropdown will be required.\n */\n required?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * The default content of the dropdown shown in the button.\n */\n defaultValue?: string | readonly string[] | number | undefined;\n /**\n * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n */\n value?: string | readonly string[] | number | undefined;\n /**\n * Validation status, one of \"error\" | \"warning\" | \"success\".\n */\n validationStatus?: Exclude<ValidationStatus, \"info\">;\n}\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n return open ? <ChevronUpIcon aria-hidden /> : <ChevronDownIcon aria-hidden />;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport const DropdownNext = forwardRef(function DropdownNext<Item>(\n props: DropdownNextProps<Item>,\n ref: ForwardedRef<HTMLButtonElement>\n) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\n className,\n disabled: disabledProp,\n emptyReadOnlyMarker = \"—\",\n readOnly: readOnlyProp,\n multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n defaultValue: defaultValueProp,\n value,\n onOpenChange,\n open,\n placeholder,\n startAdornment,\n required: requiredProp,\n variant = \"primary\",\n validationStatus: validationStatusProp,\n onKeyDown,\n onFocus,\n onBlur,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-DropdownNext\",\n css: dropdownCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const validationStatus = validationStatusProp ?? formFieldValidationStatus;\n const required = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : undefined ?? requiredProp;\n\n const isEmptyReadOnly = readOnly && !defaultValueProp && !value;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const listControl = useListControl<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n defaultValue,\n value,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n options,\n selectedState,\n select,\n valueState,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n };\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && children != undefined,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n middleware: [\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context),\n ]);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (typeaheadTimeout.current) {\n clearTimeout(typeaheadTimeout.current);\n }\n typeaheadString.current += event.key;\n typeaheadTimeout.current = window.setTimeout(() => {\n typeaheadString.current = \"\";\n }, 500);\n\n if (!openState) {\n setOpen(true, \"input\");\n }\n\n let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n if (!newOption) {\n newOption = getOptionFromSearch(typeaheadString.current);\n }\n\n if (newOption) {\n setActive(newOption);\n setFocusVisibleState(true);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n const count = options.length - 1;\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\n\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n event.preventDefault();\n event.stopPropagation();\n handleTypeahead(event);\n }\n\n let newActive;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n break;\n case \"ArrowUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n break;\n case \"Home\":\n newActive = getOptionAtIndex(0);\n break;\n case \"End\":\n newActive = getOptionAtIndex(count);\n break;\n case \"PageUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n break;\n case \"PageDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n break;\n case \"Enter\":\n case \" \":\n if (\n (openState && Boolean(activeState?.disabled)) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n case \"Tab\":\n if (!multiselect && activeState) {\n select(event, activeState);\n }\n break;\n }\n\n if (newActive && newActive?.id != activeState?.id) {\n event.preventDefault();\n setActive(newActive);\n setFocusVisibleState(true);\n }\n\n onKeyDown?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(false);\n onBlur?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleFocusButton = () => {\n buttonRef.current?.focus();\n };\n\n useEffect(() => {\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > 0) {\n return;\n }\n\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0]\n ).pop();\n }\n\n // If we still don't have an active item, we should check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getOptionAtIndex(0);\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getOptionAtIndex(options.length - 1);\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive);\n }, [openState, children]);\n\n const listId = useId();\n\n return (\n <ListControlContext.Provider value={listControl}>\n <button\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className\n )}\n ref={handleButtonRef}\n role=\"combobox\"\n type=\"button\"\n disabled={disabled}\n aria-readonly={readOnly ? \"true\" : undefined}\n aria-required={required ? \"true\" : undefined}\n aria-expanded={openState}\n aria-activedescendant={activeState?.id}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-describedby={\n clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n }\n aria-multiselectable={multiselect}\n aria-controls={openState ? listId : undefined}\n {...getReferenceProps({\n onKeyDown: handleKeyDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n ...rest,\n })}\n >\n {startAdornment}\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"placeholder\")]: !valueState,\n })}\n >\n {!valueState ? placeholder : valueState}\n </span>\n {validationStatus && <StatusAdornment status={validationStatus} />}\n {!readOnly && <ExpandIcon open={openState} />}\n </button>\n <FloatingComponent\n open={(openState || focusedState) && !readOnly && children != undefined}\n {...getFloatingProps()}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n ref={floating}\n >\n <OptionList\n id={listId}\n collapsed={!openState}\n onMouseOver={handleListMouseOver}\n onFocus={handleFocusButton}\n onClick={handleFocusButton}\n ref={listRef}\n >\n {children}\n </OptionList>\n </FloatingComponent>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: DropdownNextProps<Item> & { ref?: Ref<HTMLButtonElement> }\n) => JSX.Element;\n"],"names":["jsx","ChevronUpIcon","ChevronDownIcon","makePrefixer","forwardRef","DropdownNext","useWindow","useComponentCssInjection","dropdownCss","useFormFieldProps","useListControl","useFloatingComponent","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useRef","useForkRef","_a","useEffect","useId","jsxs","ListControlContext","clsx","StatusAdornment","OptionList"],"mappings":"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"}
package/dist-cjs/index.js CHANGED
@@ -68,7 +68,7 @@ var DialogContent = require('./dialog/DialogContent.js');
68
68
  var DialogContext = require('./dialog/DialogContext.js');
69
69
  var DialogCloseButton = require('./dialog/DialogCloseButton.js');
70
70
  var Drawer = require('./drawer/Drawer.js');
71
- var useDrawer = require('./drawer/useDrawer.js');
71
+ var DrawerCloseButton = require('./drawer/DrawerCloseButton.js');
72
72
  var DropdownBase = require('./dropdown/DropdownBase.js');
73
73
  var DropdownButton = require('./dropdown/DropdownButton.js');
74
74
  var Dropdown = require('./dropdown/Dropdown.js');
@@ -212,6 +212,7 @@ exports.MailLinkComponent = MailLinkComponent.MailLinkComponent;
212
212
  exports.ContentStatus = ContentStatus.ContentStatus;
213
213
  exports.DeckItem = DeckItem.DeckItem;
214
214
  exports.DeckLayout = DeckLayout.DeckLayout;
215
+ exports.ConditionalScrimWrapper = Dialog.ConditionalScrimWrapper;
215
216
  exports.Dialog = Dialog.Dialog;
216
217
  exports.DialogTitle = DialogTitle.DialogTitle;
217
218
  exports.DialogActions = DialogActions.DialogActions;
@@ -219,9 +220,8 @@ exports.DialogContent = DialogContent.DialogContent;
219
220
  exports.DialogContext = DialogContext.DialogContext;
220
221
  exports.useDialogContext = DialogContext.useDialogContext;
221
222
  exports.DialogCloseButton = DialogCloseButton.DialogCloseButton;
222
- exports.DRAWER_POSITIONS = Drawer.DRAWER_POSITIONS;
223
223
  exports.Drawer = Drawer.Drawer;
224
- exports.useDrawer = useDrawer.useDrawer;
224
+ exports.DrawerCloseButton = DrawerCloseButton.DrawerCloseButton;
225
225
  exports.DropdownBase = DropdownBase.DropdownBase;
226
226
  exports.DropdownButton = DropdownButton.DropdownButton;
227
227
  exports.Dropdown = Dropdown.Dropdown;
@@ -1 +1 @@
1
- {"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\nexport interface OptionValue<Item> {\n id: string;\n disabled: boolean;\n value: Item;\n text: string;\n}\n\nexport interface ListControlContextValue<Item> {\n openState: boolean;\n setOpen: (event: SyntheticEvent, newOpen: boolean) => void;\n register: (\n optionValue: OptionValue<Item>,\n element: HTMLElement\n ) => () => void;\n selectedState: unknown[];\n select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n activeState?: OptionValue<Item>;\n setActive: (option: OptionValue<Item>) => void;\n multiselect: boolean;\n focusVisibleState: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Need to use any here as a winder type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n \"ListControlContext\",\n {\n openState: false,\n setOpen() {\n return undefined;\n },\n register() {\n return () => undefined;\n },\n selectedState: [],\n select() {\n return undefined;\n },\n activeState: undefined,\n setActive() {\n return undefined;\n },\n multiselect: false,\n focusVisibleState: false,\n }\n);\n\nexport function useListControlContext<Item>() {\n return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AA0BO,MAAM,kBAAqB,GAAAA,kBAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAW,EAAA,KAAA;AAAA,IACX,OAAU,GAAA;AACR,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,QAAW,GAAA;AACT,MAAA,OAAO,MAAM,KAAA,CAAA,CAAA;AAAA,KACf;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAS,GAAA;AACP,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,KAAA,CAAA;AAAA,IACb,SAAY,GAAA;AACV,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,KAAA;AAAA,IACb,iBAAmB,EAAA,KAAA;AAAA,GACrB;AACF,EAAA;AAEO,SAAS,qBAA8B,GAAA;AAC5C,EAAA,OAAOC,iBAAW,kBAAkB,CAAA,CAAA;AACtC;;;;;"}
1
+ {"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\nexport interface OptionValue<Item> {\n id: string;\n disabled: boolean;\n value: Item;\n text: string;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n openState: boolean;\n setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n register: (\n optionValue: OptionValue<Item>,\n element: HTMLElement\n ) => () => void;\n selectedState: unknown[];\n select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n activeState?: OptionValue<Item>;\n setActive: (option: OptionValue<Item>) => void;\n multiselect: boolean;\n focusVisibleState: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Need to use any here as a winder type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n \"ListControlContext\",\n {\n openState: false,\n setOpen() {\n return undefined;\n },\n register() {\n return () => undefined;\n },\n selectedState: [],\n select() {\n return undefined;\n },\n activeState: undefined,\n setActive() {\n return undefined;\n },\n multiselect: false,\n focusVisibleState: false,\n }\n);\n\nexport function useListControlContext<Item>() {\n return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;AA4BO,MAAM,kBAAqB,GAAAA,kBAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAW,EAAA,KAAA;AAAA,IACX,OAAU,GAAA;AACR,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,QAAW,GAAA;AACT,MAAA,OAAO,MAAM,KAAA,CAAA,CAAA;AAAA,KACf;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAS,GAAA;AACP,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,KAAA,CAAA;AAAA,IACb,SAAY,GAAA;AACV,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,KAAA;AAAA,IACb,iBAAmB,EAAA,KAAA;AAAA,GACrB;AACF,EAAA;AAEO,SAAS,qBAA8B,GAAA;AAC5C,EAAA,OAAOC,iBAAW,kBAAkB,CAAA,CAAA;AACtC;;;;;"}
@@ -15,7 +15,9 @@ function useListControl(props) {
15
15
  selected: selectedProp,
16
16
  onSelectionChange,
17
17
  defaultValue,
18
- value
18
+ value,
19
+ disabled,
20
+ readOnly
19
21
  } = props;
20
22
  const [focusedState, setFocusedState] = React.useState(false);
21
23
  const [focusVisibleState, setFocusVisibleState] = React.useState(false);
@@ -41,20 +43,15 @@ function useListControl(props) {
41
43
  name: "ListControl",
42
44
  state: "open"
43
45
  });
44
- const openKey = React.useRef({
45
- key: "",
46
- altKey: false
47
- });
48
- const setOpen = (event, newOpen) => {
49
- setOpenState(newOpen);
50
- if (event.nativeEvent instanceof KeyboardEvent) {
51
- openKey.current = {
52
- key: event.nativeEvent.key,
53
- altKey: event.nativeEvent.altKey
54
- };
46
+ const openKey = React.useRef(void 0);
47
+ const setOpen = (newOpen, reason, key) => {
48
+ if (disabled || readOnly) {
49
+ return;
55
50
  }
51
+ setOpenState(newOpen);
52
+ openKey.current = key;
56
53
  if (newOpen !== openState) {
57
- onOpenChange == null ? void 0 : onOpenChange(event, newOpen);
54
+ onOpenChange == null ? void 0 : onOpenChange(newOpen, reason);
58
55
  }
59
56
  };
60
57
  const [selectedState, setSelectedState] = core.useControlled({
@@ -64,16 +61,15 @@ function useListControl(props) {
64
61
  state: "selected"
65
62
  });
66
63
  const select = (event, option) => {
67
- const { disabled, value: value2 } = option;
68
- if (disabled) {
64
+ if (option.disabled || readOnly || disabled) {
69
65
  return;
70
66
  }
71
- let newSelected = [value2];
67
+ let newSelected = [option.value];
72
68
  if (multiselect) {
73
- if (selectedState.includes(value2)) {
74
- newSelected = selectedState.filter((item) => item !== value2);
69
+ if (selectedState.includes(option.value)) {
70
+ newSelected = selectedState.filter((item) => item !== option.value);
75
71
  } else {
76
- newSelected = selectedState.concat([value2]);
72
+ newSelected = selectedState.concat([option.value]);
77
73
  }
78
74
  }
79
75
  setSelectedState(newSelected);
@@ -81,11 +77,16 @@ function useListControl(props) {
81
77
  getOptionsMatching((option2) => newSelected.includes(option2.value)).map((option2) => option2.text).join(", ")
82
78
  );
83
79
  onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
80
+ if (!multiselect) {
81
+ setOpen(false);
82
+ }
84
83
  };
85
84
  const clear = (event) => {
86
85
  setSelectedState([]);
87
86
  setValueState("");
88
- onSelectionChange == null ? void 0 : onSelectionChange(event, []);
87
+ if (selectedState.length !== 0) {
88
+ onSelectionChange == null ? void 0 : onSelectionChange(event, []);
89
+ }
89
90
  };
90
91
  const optionsRef = React.useRef([]);
91
92
  const register = React.useCallback(
@@ -1 +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":["useState","useControlled","useRef","value","option","useCallback","useEffect"],"mappings":"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"}
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 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":["useState","useControlled","useRef","option","useCallback","useEffect"],"mappings":"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"}
@@ -48,7 +48,6 @@ const Option = React.forwardRef(function Option2(props, ref) {
48
48
  setActive,
49
49
  activeState,
50
50
  multiselect,
51
- setOpen,
52
51
  select,
53
52
  register,
54
53
  selectedState,
@@ -71,9 +70,6 @@ const Option = React.forwardRef(function Option2(props, ref) {
71
70
  }
72
71
  setActive(optionValue);
73
72
  select(event, optionValue);
74
- if (!multiselect) {
75
- setOpen(event, false);
76
- }
77
73
  onClick == null ? void 0 : onClick(event);
78
74
  };
79
75
  React.useEffect(() => {
@@ -1 +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":["makePrefixer","Children","forwardRef","Option","useWindow","useComponentCssInjection","optionCss","useRef","useId","useListControlContext","useMemo","useEffect","useForkRef","jsxs","clsx","jsx","Checkbox"],"mappings":"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"}
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 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":["makePrefixer","Children","forwardRef","Option","useWindow","useComponentCssInjection","optionCss","useRef","useId","useListControlContext","useMemo","useEffect","useForkRef","jsxs","clsx","jsx","Checkbox"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- 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";
3
+ 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";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=OptionList.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- 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";
3
+ 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";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=TabNext.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- 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";
3
+ 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";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=TabstripNext.css.js.map
@@ -1,4 +1,4 @@
1
- var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n --appHeader-background: var(--salt-container-primary-background);\n --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));\n --appHeader-padding: var(--salt-size-container-spacing);\n --appHeader-paddingLeft: 8px;\n --appHeader-paddingRight: var(--appHeader-padding);\n\n --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n --saltTabs-tabstrip-height: var(--appHeader-height);\n /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n --saltTabs-activationIndicator-height: 0px;\n --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n align-items: flex-start;\n background: var(--appHeader-background);\n border-bottom: var(--salt-container-borderStyle) var(--salt-size-border) var(--salt-container-primary-borderColor);\n box-shadow: var(--appHeader-shadow);\n box-sizing: content-box;\n display: flex;\n flex: 0 0 auto;\n height: var(--appHeader-height);\n overflow: hidden;\n padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n width: 100%;\n /* overflow: hidden; */\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n /* justify-content: space-between; */\n flex: 1;\n min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n width: 0;\n height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n margin-right: 12px;\n padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n top: 0;\n right: 0;\n width: var(--salt-size-border);\n bottom: 0;\n content: \"\";\n position: absolute;\n background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n align-self: flex-end;\n flex: 0 0 auto;\n margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n justify-content: flex-end;\n margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n flex-basis: 0;\n flex-grow: 0;\n flex-shrink: 0;\n}\n";
1
+ var css_248z = ".salt-density-medium,\n.salt-density-low,\n.salt-density-touch {\n --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));\n}\n\n.salt-density-high {\n --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));\n}\n\n.saltAppHeader {\n --appHeader-background: var(--salt-container-primary-background);\n --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);\n --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));\n --appHeader-padding: var(--salt-size-container-spacing);\n --appHeader-paddingLeft: 8px;\n --appHeader-paddingRight: var(--appHeader-padding);\n\n --saltToolbar-width: auto;\n}\n\n.saltAppHeader .saltTabstrip {\n --saltTabs-tabstrip-height: var(--appHeader-height);\n /* App header has its own bottom border, so remove tabs line but keeping activation indicator */\n --saltTabs-activationIndicator-height: 0px;\n --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0;\n}\n\n.saltAppHeader {\n align-items: flex-start;\n background: var(--appHeader-background);\n border-bottom: var(--salt-separable-borderStyle) var(--salt-size-border) var(--salt-separable-primary-borderColor);\n box-shadow: var(--appHeader-shadow);\n box-sizing: content-box;\n display: flex;\n flex: 0 0 auto;\n height: var(--appHeader-height);\n overflow: hidden;\n padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft);\n width: 100%;\n}\n\n.saltAppHeader > .Responsive-inner {\n width: 100%;\n /* overflow: hidden; */\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n /* justify-content: space-between; */\n flex: 1;\n min-height: var(--appHeader-height);\n}\n\n.saltAppHeader > .Responsive-inner > .responsive-pillar {\n width: 0;\n height: var(--appHeader-height);\n}\n\n.saltAppHeader-navMenu {\n margin-right: 12px;\n padding-right: 8px;\n}\n\n.saltAppHeader-navMenu::after {\n top: 0;\n right: 0;\n width: var(--salt-size-border);\n bottom: 0;\n content: \"\";\n position: absolute;\n background: var(--appHeader-separable-bar);\n}\n\n.saltAppHeader .saltLogo:not(.saltLogo-compact) {\n margin-left: 16px;\n}\n\n.saltAppHeader > .Responsive-inner > .Tabstrip {\n align-self: flex-end;\n flex: 0 0 auto;\n margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-end] {\n margin-right: auto;\n}\n\n.saltAppHeader > .Responsive-inner > * {\n flex-shrink: 0;\n}\n\n.saltAppHeader > .Responsive-inner > .Toolbar {\n justify-content: flex-end;\n margin-left: 48px;\n}\n\n.saltAppHeader > .Responsive-inner > [data-pad-start=\"true\"] {\n margin-left: auto;\n}\n\n.saltAppHeader > .Responsive-inner[data-collapsing=\"true\"] {\n flex-wrap: nowrap;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsing=\"true\"] {\n flex-shrink: 1;\n}\n\n.saltAppHeader > .Responsive-inner > *[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n flex-basis: 0;\n flex-grow: 0;\n flex-shrink: 0;\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=AppHeader.css.js.map