@salt-ds/core 1.52.1 → 1.53.0
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.
- package/CHANGELOG.md +25 -0
- package/css/salt-core.css +228 -16
- package/dist-cjs/combo-box/ComboBox.js +55 -40
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.css.js +1 -1
- package/dist-cjs/dropdown/Dropdown.js +3 -2
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/index.js +3 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list-box/ListBox.js +2 -2
- package/dist-cjs/list-box/ListBox.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +40 -45
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/number-input/NumberInput.css.js +6 -0
- package/dist-cjs/number-input/NumberInput.css.js.map +1 -0
- package/dist-cjs/number-input/NumberInput.js +423 -0
- package/dist-cjs/number-input/NumberInput.js.map +1 -0
- package/dist-cjs/number-input/internal/useActivateWhileMouseDown.js +50 -0
- package/dist-cjs/number-input/internal/useActivateWhileMouseDown.js.map +1 -0
- package/dist-cjs/number-input/internal/useInterval.js +25 -0
- package/dist-cjs/number-input/internal/useInterval.js.map +1 -0
- package/dist-cjs/option/Option.js +1 -1
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.css.js +1 -1
- package/dist-es/combo-box/ComboBox.js +56 -41
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/dialog/DialogContent.css.js +1 -1
- package/dist-es/dropdown/Dropdown.js +3 -2
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/index.js +1 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/list-box/ListBox.js +2 -2
- package/dist-es/list-box/ListBox.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +41 -46
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/number-input/NumberInput.css.js +4 -0
- package/dist-es/number-input/NumberInput.css.js.map +1 -0
- package/dist-es/number-input/NumberInput.js +420 -0
- package/dist-es/number-input/NumberInput.js.map +1 -0
- package/dist-es/number-input/internal/useActivateWhileMouseDown.js +48 -0
- package/dist-es/number-input/internal/useActivateWhileMouseDown.js.map +1 -0
- package/dist-es/number-input/internal/useInterval.js +23 -0
- package/dist-es/number-input/internal/useInterval.js.map +1 -0
- package/dist-es/option/Option.js +1 -1
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/pill-input/PillInput.css.js +1 -1
- package/dist-types/combo-box/useComboBox.d.ts +1 -0
- package/dist-types/index.d.ts +1 -0
- package/dist-types/list-control/ListControlState.d.ts +1 -0
- package/dist-types/number-input/NumberInput.d.ts +150 -0
- package/dist-types/number-input/index.d.ts +1 -0
- package/dist-types/number-input/internal/useActivateWhileMouseDown.d.ts +5 -0
- package/dist-types/number-input/internal/useInterval.d.ts +3 -0
- package/package.json +1 -1
- package/dist-cjs/combo-box/ComboBox.css.js +0 -6
- package/dist-cjs/combo-box/ComboBox.css.js.map +0 -1
- package/dist-es/combo-box/ComboBox.css.js +0 -4
- package/dist-es/combo-box/ComboBox.css.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n flip,\n offset,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useEffect,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n defaultValueToString,\n type ListControlProps,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n type UseFloatingUIProps,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport type DropdownProps<Item = string> = {\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 content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n */\n value?: string;\n /**\n * Validation status, one of \"error\" | \"warning\" | \"success\".\n */\n validationStatus?: Exclude<ValidationStatus, \"info\">;\n /** Styling variant with a full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * Props to pass to Dropdown's overlay.\n */\n OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n DataAttributes;\n} & Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\"> &\n ListControlProps<Item>;\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n return open ? (\n <CollapseIcon className={withBaseName(\"toggle\")} aria-hidden />\n ) : (\n <ExpandIcon className={withBaseName(\"toggle\")} aria-hidden />\n );\n}\n\nexport const Dropdown = forwardRef(function Dropdown<Item>(\n props: DropdownProps<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 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 valueToString = defaultValueToString,\n bordered = false,\n OverlayProps,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown\",\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 : requiredProp;\n const listControl = useListControl<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const selectedValue = selectedState\n .map((item) => valueToString(item))\n .join(\", \");\n const isEmptyReadOnly = readOnly && selectedValue === \"\";\n const valueText = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : (value ?? selectedValue);\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.count(children) > 0,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n middleware: [\n offset(1),\n size({\n apply({ rects, elements, availableHeight }) {\n elements.floating.style.setProperty(\n \"--overlay-minWidth\",\n `${rects.reference.width}px`,\n );\n elements.floating.style.setProperty(\n \"--overlay-maxHeight\",\n `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 onKeyDown?.(event);\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 const activeOption = activeState ?? getFirstOption()?.data;\n\n if (activeOption === undefined) {\n return;\n }\n\n let newActive:\n | { data: OptionValue<Item>; element: HTMLElement }\n | undefined;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\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.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\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 if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n onBlur?.(event);\n }\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleFocusButton = () => {\n buttonRef.current?.focus();\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n useEffect(() => {\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive: ReturnType<typeof getFirstOption>;\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 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 = getFirstOption();\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getLastOption();\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 = getFirstOption();\n }\n\n setActive(newActive?.data);\n }, [openState, children]);\n\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\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 [withBaseName(\"bordered\")]: bordered,\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-controls={openState ? listId : undefined}\n {...getReferenceProps({\n onKeyDown: handleKeyDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n ...rest,\n })}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"placeholder\")]: !valueText,\n })}\n >\n {!valueText ? placeholder : valueText}\n </span>\n {!disabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {!readOnly && <ExpandIcon open={openState} />}\n <div className={withBaseName(\"activationIndicator\")} />\n </button>\n <OptionList\n aria-multiselectable={multiselect}\n open={\n (openState || focusedState) &&\n !readOnly &&\n Children.count(children) > 0\n }\n {...getFloatingProps({\n onMouseOver: handleListMouseOver,\n onFocus: handleFocusButton,\n onClick: handleFocusButton,\n ...OverlayProps,\n })}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n ref={handleListRef}\n id={listId}\n collapsed={!openState}\n >\n {children}\n </OptionList>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","ExpandIcon","useIcon","jsx","forwardRef","Dropdown","defaultValueToString","useWindow","useComponentCssInjection","dropdownCss","useFormFieldProps","useListControl","useFloatingUI","Children","offset","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useRef","useForkRef","_a","useEffect","useId","jsxs","ListControlContext","clsx","StatusAdornment","OptionList"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n flip,\n offset,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useEffect,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n defaultValueToString,\n type ListControlProps,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n type UseFloatingUIProps,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport type DropdownProps<Item = string> = {\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 content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n */\n value?: string;\n /**\n * Validation status, one of \"error\" | \"warning\" | \"success\".\n */\n validationStatus?: Exclude<ValidationStatus, \"info\">;\n /** Styling variant with a full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * Props to pass to Dropdown's overlay.\n */\n OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n DataAttributes;\n} & Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\"> &\n ListControlProps<Item>;\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n return open ? (\n <CollapseIcon className={withBaseName(\"toggle\")} aria-hidden />\n ) : (\n <ExpandIcon className={withBaseName(\"toggle\")} aria-hidden />\n );\n}\n\nexport const Dropdown = forwardRef(function Dropdown<Item>(\n props: DropdownProps<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 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 valueToString = defaultValueToString,\n bordered = false,\n OverlayProps,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown\",\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 : requiredProp;\n const listControl = useListControl<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n setListRef,\n } = listControl;\n\n const selectedValue = selectedState\n .map((item) => valueToString(item))\n .join(\", \");\n const isEmptyReadOnly = readOnly && selectedValue === \"\";\n const valueText = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : (value ?? selectedValue);\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.count(children) > 0,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n middleware: [\n offset(1),\n size({\n apply({ rects, elements, availableHeight }) {\n elements.floating.style.setProperty(\n \"--overlay-minWidth\",\n `${rects.reference.width}px`,\n );\n elements.floating.style.setProperty(\n \"--overlay-maxHeight\",\n `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 onKeyDown?.(event);\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 const activeOption = activeState ?? getFirstOption()?.data;\n\n if (activeOption === undefined) {\n return;\n }\n\n let newActive:\n | { data: OptionValue<Item>; element: HTMLElement }\n | undefined;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\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.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\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 if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n onBlur?.(event);\n }\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleFocusButton = () => {\n buttonRef.current?.focus();\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n useEffect(() => {\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive: ReturnType<typeof getFirstOption>;\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 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 = getFirstOption();\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getLastOption();\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 = getFirstOption();\n }\n\n setActive(newActive?.data);\n }, [openState, children]);\n\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(setListRef, floating);\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 [withBaseName(\"bordered\")]: bordered,\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-controls={openState ? listId : undefined}\n {...getReferenceProps({\n onKeyDown: handleKeyDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n ...rest,\n })}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"placeholder\")]: !valueText,\n })}\n >\n {!valueText ? placeholder : valueText}\n </span>\n {!disabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {!readOnly && <ExpandIcon open={openState} />}\n <div className={withBaseName(\"activationIndicator\")} />\n </button>\n <OptionList\n aria-multiselectable={multiselect}\n open={\n (openState || focusedState) &&\n !readOnly &&\n Children.count(children) > 0\n }\n {...getFloatingProps({\n onMouseOver: handleListMouseOver,\n onFocus: handleFocusButton,\n onClick: handleFocusButton,\n ...OverlayProps,\n })}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n ref={handleListRef}\n id={listId}\n collapsed={!openState}\n >\n {children}\n </OptionList>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","ExpandIcon","useIcon","jsx","forwardRef","Dropdown","defaultValueToString","useWindow","useComponentCssInjection","dropdownCss","useFormFieldProps","useListControl","useFloatingUI","Children","offset","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
|
@@ -66,6 +66,7 @@ var MenuPanel = require('./menu/MenuPanel.js');
|
|
|
66
66
|
var MenuTrigger = require('./menu/MenuTrigger.js');
|
|
67
67
|
var MultilineInput = require('./multiline-input/MultilineInput.js');
|
|
68
68
|
var NavigationItem = require('./navigation-item/NavigationItem.js');
|
|
69
|
+
var NumberInput = require('./number-input/NumberInput.js');
|
|
69
70
|
var Option = require('./option/Option.js');
|
|
70
71
|
var OptionGroup = require('./option/OptionGroup.js');
|
|
71
72
|
var Overlay = require('./overlay/Overlay.js');
|
|
@@ -237,6 +238,8 @@ exports.MenuPanel = MenuPanel.MenuPanel;
|
|
|
237
238
|
exports.MenuTrigger = MenuTrigger.MenuTrigger;
|
|
238
239
|
exports.MultilineInput = MultilineInput.MultilineInput;
|
|
239
240
|
exports.NavigationItem = NavigationItem.NavigationItem;
|
|
241
|
+
exports.NumberInput = NumberInput.NumberInput;
|
|
242
|
+
exports.isOutOfRange = NumberInput.isOutOfRange;
|
|
240
243
|
exports.Option = Option.Option;
|
|
241
244
|
exports.OptionGroup = OptionGroup.OptionGroup;
|
|
242
245
|
exports.Overlay = Overlay.Overlay;
|
package/dist-cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -63,7 +63,7 @@ const ListBox = React.forwardRef(function ListBox2(props, ref) {
|
|
|
63
63
|
select,
|
|
64
64
|
setFocusVisibleState,
|
|
65
65
|
setFocusedState,
|
|
66
|
-
|
|
66
|
+
setListRef
|
|
67
67
|
} = listControl;
|
|
68
68
|
const typeaheadString = React.useRef("");
|
|
69
69
|
const typeaheadTimeout = React.useRef();
|
|
@@ -172,7 +172,7 @@ const ListBox = React.forwardRef(function ListBox2(props, ref) {
|
|
|
172
172
|
setFocusVisibleState(false);
|
|
173
173
|
setActive(void 0);
|
|
174
174
|
};
|
|
175
|
-
const handleRef = useForkRef.useForkRef(
|
|
175
|
+
const handleRef = useForkRef.useForkRef(setListRef, ref);
|
|
176
176
|
return /* @__PURE__ */ jsxRuntime.jsx(ListControlContext.ListControlContext.Provider, { value: listControl, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
177
177
|
"div",
|
|
178
178
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n defaultValueToString,\n type ListControlProps,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n /**\n * If `true`, the list box will be disabled.\n */\n disabled?: boolean;\n /**\n * If `false`, the list box will have not a border.\n */\n bordered?: boolean;\n /**\n * The options to display in the list box.\n */\n children?: ReactNode;\n /**\n * If `true`, the list box will be multiselect.\n */\n multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n props: ListBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n bordered,\n className,\n children,\n defaultSelected,\n disabled,\n selected,\n onSelectionChange,\n multiselect,\n valueToString = defaultValueToString,\n onKeyDown,\n onFocus,\n onBlur,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-box\",\n css: listBoxCss,\n window: targetWindow,\n });\n\n const listControl = useListControl<Item>({\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n disabled,\n });\n\n const {\n activeState,\n setActive,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\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 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<HTMLDivElement>) => {\n onKeyDown?.(event);\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 const activeOption = activeState ?? getFirstOption()?.data;\n\n if (activeOption === undefined) {\n return;\n }\n\n let newActive:\n | { data: OptionValue<Item>; element: HTMLElement }\n | undefined;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\n break;\n case \"Enter\":\n case \" \":\n if (\n Boolean(activeState?.disabled) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\n };\n\n const wasMouseDown = useRef(false);\n\n const handleMouseDown = () => {\n wasMouseDown.current = true;\n };\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n if (wasMouseDown.current) {\n wasMouseDown.current = false;\n return;\n }\n\n setFocusVisibleState(true);\n wasMouseDown.current = false;\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive: ReturnType<typeof getOptionAtIndex>;\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 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 just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive?.data);\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n setFocusedState(false);\n setActive(undefined);\n onBlur?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n setActive(undefined);\n };\n\n const handleRef = useForkRef(listRef, ref);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"bordered\")]: bordered },\n className,\n )}\n role=\"listbox\"\n aria-activedescendant={activeState?.id}\n aria-disabled={disabled || undefined}\n aria-multiselectable={multiselect}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onMouseOver={handleListMouseOver}\n onMouseDown={handleMouseDown}\n ref={handleRef}\n {...rest}\n >\n {children}\n </div>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","forwardRef","ListBox","defaultValueToString","useWindow","useComponentCssInjection","listBoxCss","useListControl","useRef","useForkRef","jsx","ListControlContext","clsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n defaultValueToString,\n type ListControlProps,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n /**\n * If `true`, the list box will be disabled.\n */\n disabled?: boolean;\n /**\n * If `false`, the list box will have not a border.\n */\n bordered?: boolean;\n /**\n * The options to display in the list box.\n */\n children?: ReactNode;\n /**\n * If `true`, the list box will be multiselect.\n */\n multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n props: ListBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n bordered,\n className,\n children,\n defaultSelected,\n disabled,\n selected,\n onSelectionChange,\n multiselect,\n valueToString = defaultValueToString,\n onKeyDown,\n onFocus,\n onBlur,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-box\",\n css: listBoxCss,\n window: targetWindow,\n });\n\n const listControl = useListControl<Item>({\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n disabled,\n });\n\n const {\n activeState,\n setActive,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n setFocusedState,\n setListRef,\n } = listControl;\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\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 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<HTMLDivElement>) => {\n onKeyDown?.(event);\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 const activeOption = activeState ?? getFirstOption()?.data;\n\n if (activeOption === undefined) {\n return;\n }\n\n let newActive:\n | { data: OptionValue<Item>; element: HTMLElement }\n | undefined;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\n break;\n case \"Enter\":\n case \" \":\n if (\n Boolean(activeState?.disabled) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\n };\n\n const wasMouseDown = useRef(false);\n\n const handleMouseDown = () => {\n wasMouseDown.current = true;\n };\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n if (wasMouseDown.current) {\n wasMouseDown.current = false;\n return;\n }\n\n setFocusVisibleState(true);\n wasMouseDown.current = false;\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive: ReturnType<typeof getOptionAtIndex>;\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 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 just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive?.data);\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n setFocusedState(false);\n setActive(undefined);\n onBlur?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n setActive(undefined);\n };\n\n const handleRef = useForkRef(setListRef, ref);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"bordered\")]: bordered },\n className,\n )}\n role=\"listbox\"\n aria-activedescendant={activeState?.id}\n aria-disabled={disabled || undefined}\n aria-multiselectable={multiselect}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onMouseOver={handleListMouseOver}\n onMouseDown={handleMouseDown}\n ref={handleRef}\n {...rest}\n >\n {children}\n </div>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","forwardRef","ListBox","defaultValueToString","useWindow","useComponentCssInjection","listBoxCss","useListControl","useRef","useForkRef","jsx","ListControlContext","clsx"],"mappings":"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"}
|
|
@@ -5,45 +5,11 @@ require('clsx');
|
|
|
5
5
|
require('react/jsx-runtime');
|
|
6
6
|
var useControlled = require('../utils/useControlled.js');
|
|
7
7
|
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
8
|
+
var useForkRef = require('../utils/useForkRef.js');
|
|
8
9
|
require('../utils/useId.js');
|
|
9
10
|
require('../salt-provider/SaltProvider.js');
|
|
10
11
|
require('../viewport/ViewportProvider.js');
|
|
11
12
|
|
|
12
|
-
function findElementPosition(elements, element) {
|
|
13
|
-
if (elements.length === 0) {
|
|
14
|
-
return [0, false];
|
|
15
|
-
}
|
|
16
|
-
if (element.compareDocumentPosition(elements[elements.length - 1].element) & Node.DOCUMENT_POSITION_PRECEDING) {
|
|
17
|
-
return [-1, false];
|
|
18
|
-
}
|
|
19
|
-
if (element.compareDocumentPosition(elements[0].element) & Node.DOCUMENT_POSITION_FOLLOWING) {
|
|
20
|
-
return [0, false];
|
|
21
|
-
}
|
|
22
|
-
let left = 0;
|
|
23
|
-
let right = elements.length;
|
|
24
|
-
let leftLast = 0;
|
|
25
|
-
let rightLast = right;
|
|
26
|
-
let exists = false;
|
|
27
|
-
while (left < right) {
|
|
28
|
-
const inPos = Math.floor((right + left) / 2);
|
|
29
|
-
const compared = element.compareDocumentPosition(elements[inPos].element);
|
|
30
|
-
if (compared & Node.DOCUMENT_POSITION_PRECEDING) {
|
|
31
|
-
left = inPos;
|
|
32
|
-
} else if (compared & Node.DOCUMENT_POSITION_FOLLOWING) {
|
|
33
|
-
right = inPos;
|
|
34
|
-
} else {
|
|
35
|
-
right = inPos;
|
|
36
|
-
left = inPos;
|
|
37
|
-
exists = true;
|
|
38
|
-
}
|
|
39
|
-
if (leftLast === left && rightLast === right) {
|
|
40
|
-
break;
|
|
41
|
-
}
|
|
42
|
-
leftLast = left;
|
|
43
|
-
rightLast = right;
|
|
44
|
-
}
|
|
45
|
-
return [right, exists];
|
|
46
|
-
}
|
|
47
13
|
function defaultValueToString(item) {
|
|
48
14
|
return String(item);
|
|
49
15
|
}
|
|
@@ -60,6 +26,9 @@ function useListControl(props) {
|
|
|
60
26
|
readOnly,
|
|
61
27
|
valueToString = defaultValueToString
|
|
62
28
|
} = props;
|
|
29
|
+
const listRef = React.useRef(null);
|
|
30
|
+
const [listElement, setListElement] = React.useState(null);
|
|
31
|
+
const setListRef = useForkRef.useForkRef(listRef, setListElement);
|
|
63
32
|
const [focusedState, setFocusedState] = React.useState(false);
|
|
64
33
|
const [focusVisibleState, setFocusVisibleState] = React.useState(false);
|
|
65
34
|
React.useEffect(() => {
|
|
@@ -129,14 +98,7 @@ function useListControl(props) {
|
|
|
129
98
|
const register = React.useCallback(
|
|
130
99
|
(optionValue, element) => {
|
|
131
100
|
const { id } = optionValue;
|
|
132
|
-
|
|
133
|
-
if (!exists) {
|
|
134
|
-
if (index === -1) {
|
|
135
|
-
optionsRef.current.push({ data: optionValue, element });
|
|
136
|
-
} else {
|
|
137
|
-
optionsRef.current.splice(index, 0, { data: optionValue, element });
|
|
138
|
-
}
|
|
139
|
-
}
|
|
101
|
+
optionsRef.current.push({ data: optionValue, element });
|
|
140
102
|
return () => {
|
|
141
103
|
optionsRef.current = optionsRef.current.filter(
|
|
142
104
|
(item) => item.data.id !== id
|
|
@@ -145,11 +107,44 @@ function useListControl(props) {
|
|
|
145
107
|
},
|
|
146
108
|
[]
|
|
147
109
|
);
|
|
110
|
+
React.useEffect(() => {
|
|
111
|
+
const sortOptions = () => {
|
|
112
|
+
optionsRef.current = optionsRef.current.filter((a) => a.element.isConnected).sort(({ element: a }, { element: b }) => {
|
|
113
|
+
if (a === b) return 0;
|
|
114
|
+
const pos = a.compareDocumentPosition(b);
|
|
115
|
+
if (pos & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
|
|
116
|
+
if (pos & Node.DOCUMENT_POSITION_PRECEDING) return 1;
|
|
117
|
+
return 0;
|
|
118
|
+
});
|
|
119
|
+
};
|
|
120
|
+
const mutationObserver = new MutationObserver((mutations) => {
|
|
121
|
+
const optionsChanged = mutations.some(
|
|
122
|
+
(mutation) => Array.from(mutation.addedNodes).some(
|
|
123
|
+
(node) => {
|
|
124
|
+
var _a;
|
|
125
|
+
return node instanceof HTMLElement && ((_a = node.matches) == null ? void 0 : _a.call(node, '[role="option"]'));
|
|
126
|
+
}
|
|
127
|
+
)
|
|
128
|
+
);
|
|
129
|
+
if (optionsChanged) {
|
|
130
|
+
sortOptions();
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
if (!listElement) return;
|
|
134
|
+
mutationObserver.observe(listElement, {
|
|
135
|
+
childList: true,
|
|
136
|
+
subtree: true
|
|
137
|
+
});
|
|
138
|
+
sortOptions();
|
|
139
|
+
return () => mutationObserver.disconnect();
|
|
140
|
+
}, [listElement]);
|
|
148
141
|
const getOptionAtIndex = (index) => {
|
|
149
142
|
return optionsRef.current[index];
|
|
150
143
|
};
|
|
151
144
|
const getIndexOfOption = (option) => {
|
|
152
|
-
return optionsRef.current.findIndex(
|
|
145
|
+
return optionsRef.current.findIndex(
|
|
146
|
+
(item) => item.data.value === option.value
|
|
147
|
+
);
|
|
153
148
|
};
|
|
154
149
|
const getOptionsMatching = (predicate) => {
|
|
155
150
|
return optionsRef.current.filter((item) => predicate(item.data));
|
|
@@ -195,7 +190,6 @@ function useListControl(props) {
|
|
|
195
190
|
const index = getIndexOfOption(option);
|
|
196
191
|
return getOptionAtIndex(index + 1);
|
|
197
192
|
};
|
|
198
|
-
const listRef = React.useRef(null);
|
|
199
193
|
const getOptionPageAbove = (start) => {
|
|
200
194
|
var _a;
|
|
201
195
|
const list = listRef.current;
|
|
@@ -265,6 +259,7 @@ function useListControl(props) {
|
|
|
265
259
|
setFocusVisibleState,
|
|
266
260
|
focusedState,
|
|
267
261
|
setFocusedState,
|
|
262
|
+
setListRef,
|
|
268
263
|
listRef,
|
|
269
264
|
options: optionsRef.current.map((option) => option.element),
|
|
270
265
|
register,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useControlled } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport type ListControlProps<Item> = {\n /**\n * If true, the control will be disabled.\n */\n disabled?: boolean;\n /**\n * If true, the control will be read-only.\n */\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 * If true, multiple options can be selected.\n */\n multiselect?: boolean;\n /**\n * Callback used to convert an option's `value` to a string. This is needed when the value is different to the display value or the value is not a string.\n */\n valueToString?: (item: Item) => string;\n};\n\nfunction findElementPosition(\n elements: { element: HTMLElement }[],\n element: HTMLElement,\n) {\n if (elements.length === 0) {\n return [0, false] as const;\n }\n\n if (\n element.compareDocumentPosition(elements[elements.length - 1].element) &\n Node.DOCUMENT_POSITION_PRECEDING\n ) {\n return [-1, false] as const;\n }\n\n if (\n element.compareDocumentPosition(elements[0].element) &\n Node.DOCUMENT_POSITION_FOLLOWING\n ) {\n return [0, false] as const;\n }\n\n let left = 0;\n let right = elements.length;\n let leftLast = 0;\n let rightLast = right;\n\n let exists = false;\n\n while (left < right) {\n const inPos = Math.floor((right + left) / 2);\n const compared = element.compareDocumentPosition(elements[inPos].element);\n if (compared & Node.DOCUMENT_POSITION_PRECEDING) {\n left = inPos;\n } else if (compared & Node.DOCUMENT_POSITION_FOLLOWING) {\n right = inPos;\n } else {\n right = inPos;\n left = inPos;\n exists = true;\n }\n // nothing has changed, must have found limits. insert between.\n if (leftLast === left && rightLast === right) {\n break;\n }\n leftLast = left;\n rightLast = right;\n }\n\n return [right, exists] as const;\n}\n\nexport function defaultValueToString<Item>(item: Item): string {\n return String(item);\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 disabled,\n readOnly,\n valueToString = defaultValueToString,\n } = props;\n\n const [focusedState, setFocusedState] = useState(false);\n const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n useEffect(() => {\n // remove focus when controlling disabled\n if (disabled && focusedState) {\n setFocusedState(false);\n setFocusVisibleState(false);\n }\n }, [disabled, focusedState]);\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 onSelectionChange?.(event, newSelected);\n\n if (!multiselect) {\n setOpen(false);\n }\n };\n\n const clear = (event: SyntheticEvent) => {\n setSelectedState([]);\n if (selectedState.length !== 0) {\n onSelectionChange?.(event, []);\n }\n };\n\n const optionsRef = useRef<\n { data: OptionValue<Item>; element: HTMLElement }[]\n >([]);\n\n const register = useCallback(\n (optionValue: OptionValue<Item>, element: HTMLElement) => {\n const { id } = optionValue;\n const [index, exists] = findElementPosition(optionsRef.current, element);\n\n if (!exists) {\n if (index === -1) {\n optionsRef.current.push({ data: optionValue, element });\n } else {\n optionsRef.current.splice(index, 0, { data: optionValue, element });\n }\n }\n\n return () => {\n optionsRef.current = optionsRef.current.filter(\n (item) => item.data.id !== id,\n );\n };\n },\n [],\n );\n\n const getOptionAtIndex = (\n index: number,\n ): { data: OptionValue<Item>; element: HTMLElement } | undefined => {\n return optionsRef.current[index];\n };\n\n const getIndexOfOption = (option: OptionValue<Item>) => {\n return optionsRef.current.findIndex((item) => item.data.id === option.id);\n };\n\n const getOptionsMatching = (\n predicate: (option: OptionValue<Item>) => boolean,\n ) => {\n return optionsRef.current.filter((item) => predicate(item.data));\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.data);\n\n let matches = searchList.filter(\n (option) =>\n collator.compare(\n valueToString(option.value).substring(0, search.length),\n search,\n ) === 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(\n valueToString(option.value)[0].toLowerCase(),\n letters[0],\n ) === 0,\n );\n }\n }\n\n return matches.find((option) => getIndexOfOption(option) >= startIndex);\n };\n\n const getFirstOption = () => {\n return getOptionAtIndex(0);\n };\n\n const getLastOption = () => {\n return getOptionAtIndex(optionsRef.current.length - 1);\n };\n\n const getOptionBefore = (option: OptionValue<Item>) => {\n const index = getIndexOfOption(option);\n return getOptionAtIndex(index - 1);\n };\n\n const getOptionAfter = (option: OptionValue<Item>) => {\n const index = getIndexOfOption(option);\n return getOptionAtIndex(index + 1);\n };\n\n const listRef = useRef<HTMLDivElement>(null);\n\n const getOptionPageAbove = (start: OptionValue<Item>) => {\n const list = listRef.current;\n let option = optionsRef.current.find((option) => option.data === start);\n\n if (!list || !option) {\n return undefined;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect: DOMRect | undefined =\n option.element.getBoundingClientRect();\n\n const listY = containerRect.y - list.scrollTop;\n const pageY = Math.max(\n 0,\n optionRect.y - listY + optionRect.height - containerRect.height,\n );\n\n while (option && optionRect && optionRect.y - listY > pageY) {\n option = getOptionBefore(option.data);\n optionRect = option?.element?.getBoundingClientRect();\n }\n\n return option ?? getFirstOption();\n };\n\n const getOptionPageBelow = (start: OptionValue<Item>) => {\n const list = listRef.current;\n let option = optionsRef.current.find((option) => option.data === start);\n\n if (!list || !option) {\n return undefined;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect: DOMRect | undefined =\n option.element.getBoundingClientRect();\n\n const listY = containerRect.y - list.scrollTop;\n const pageY = Math.min(\n list.scrollHeight,\n optionRect.y - listY - optionRect.height + containerRect.height,\n );\n\n while (option && optionRect && optionRect.y - listY < pageY) {\n option = getOptionAfter(option.data);\n optionRect = option?.element.getBoundingClientRect();\n }\n\n return option ?? getLastOption();\n };\n\n useEffect(() => {\n if (listRef.current) {\n const activeElement = optionsRef.current.find(\n (option) => option.data === activeState,\n )?.element;\n\n if (!activeElement) {\n return;\n }\n\n activeElement.scrollIntoView({\n block: \"nearest\",\n inline: \"nearest\",\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 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 getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n getFirstOption,\n getLastOption,\n valueToString,\n disabled,\n };\n}\n"],"names":["useState","useEffect","useControlled","useRef","useCallback","option"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useControlled, useForkRef } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport type ListControlProps<Item> = {\n /**\n * If true, the control will be disabled.\n */\n disabled?: boolean;\n /**\n * If true, the control will be read-only.\n */\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 * If true, multiple options can be selected.\n */\n multiselect?: boolean;\n /**\n * Callback used to convert an option's `value` to a string. This is needed when the value is different to the display value or the value is not a string.\n */\n valueToString?: (item: Item) => string;\n};\n\nexport function defaultValueToString<Item>(item: Item): string {\n return String(item);\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 disabled,\n readOnly,\n valueToString = defaultValueToString,\n } = props;\n\n const listRef = useRef<HTMLDivElement>(null);\n const [listElement, setListElement] = useState<HTMLDivElement | null>(null);\n const setListRef = useForkRef<HTMLDivElement>(listRef, setListElement);\n\n const [focusedState, setFocusedState] = useState(false);\n const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n useEffect(() => {\n // remove focus when controlling disabled\n if (disabled && focusedState) {\n setFocusedState(false);\n setFocusVisibleState(false);\n }\n }, [disabled, focusedState]);\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 onSelectionChange?.(event, newSelected);\n\n if (!multiselect) {\n setOpen(false);\n }\n };\n\n const clear = (event: SyntheticEvent) => {\n setSelectedState([]);\n if (selectedState.length !== 0) {\n onSelectionChange?.(event, []);\n }\n };\n\n const optionsRef = useRef<\n { data: OptionValue<Item>; element: HTMLElement }[]\n >([]);\n\n const register = useCallback(\n (optionValue: OptionValue<Item>, element: HTMLElement) => {\n const { id } = optionValue;\n\n optionsRef.current.push({ data: optionValue, element });\n\n return () => {\n optionsRef.current = optionsRef.current.filter(\n (item) => item.data.id !== id,\n );\n };\n },\n [],\n );\n\n useEffect(() => {\n const sortOptions = () => {\n optionsRef.current = optionsRef.current\n .filter((a) => a.element.isConnected)\n .sort(({ element: a }, { element: b }) => {\n if (a === b) return 0;\n const pos = a.compareDocumentPosition(b);\n if (pos & Node.DOCUMENT_POSITION_FOLLOWING) return -1;\n if (pos & Node.DOCUMENT_POSITION_PRECEDING) return 1;\n // Disconnected / impl-specific — keep input order (stable) or add your own rule\n return 0;\n });\n };\n\n const mutationObserver = new MutationObserver((mutations) => {\n const optionsChanged = mutations.some((mutation) =>\n Array.from(mutation.addedNodes).some(\n (node) =>\n node instanceof HTMLElement && node.matches?.('[role=\"option\"]'),\n ),\n );\n\n if (optionsChanged) {\n sortOptions();\n }\n });\n\n if (!listElement) return;\n mutationObserver.observe(listElement, {\n childList: true,\n subtree: true,\n });\n\n sortOptions();\n\n return () => mutationObserver.disconnect();\n }, [listElement]);\n\n const getOptionAtIndex = (\n index: number,\n ): { data: OptionValue<Item>; element: HTMLElement } | undefined => {\n return optionsRef.current[index];\n };\n\n const getIndexOfOption = (option: OptionValue<Item>) => {\n return optionsRef.current.findIndex(\n (item) => item.data.value === option.value,\n );\n };\n\n const getOptionsMatching = (\n predicate: (option: OptionValue<Item>) => boolean,\n ) => {\n return optionsRef.current.filter((item) => predicate(item.data));\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.data);\n\n let matches = searchList.filter(\n (option) =>\n collator.compare(\n valueToString(option.value).substring(0, search.length),\n search,\n ) === 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(\n valueToString(option.value)[0].toLowerCase(),\n letters[0],\n ) === 0,\n );\n }\n }\n\n return matches.find((option) => getIndexOfOption(option) >= startIndex);\n };\n\n const getFirstOption = () => {\n return getOptionAtIndex(0);\n };\n\n const getLastOption = () => {\n return getOptionAtIndex(optionsRef.current.length - 1);\n };\n\n const getOptionBefore = (option: OptionValue<Item>) => {\n const index = getIndexOfOption(option);\n return getOptionAtIndex(index - 1);\n };\n\n const getOptionAfter = (option: OptionValue<Item>) => {\n const index = getIndexOfOption(option);\n return getOptionAtIndex(index + 1);\n };\n\n const getOptionPageAbove = (start: OptionValue<Item>) => {\n const list = listRef.current;\n let option = optionsRef.current.find((option) => option.data === start);\n\n if (!list || !option) {\n return undefined;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect: DOMRect | undefined =\n option.element.getBoundingClientRect();\n\n const listY = containerRect.y - list.scrollTop;\n const pageY = Math.max(\n 0,\n optionRect.y - listY + optionRect.height - containerRect.height,\n );\n\n while (option && optionRect && optionRect.y - listY > pageY) {\n option = getOptionBefore(option.data);\n optionRect = option?.element?.getBoundingClientRect();\n }\n\n return option ?? getFirstOption();\n };\n\n const getOptionPageBelow = (start: OptionValue<Item>) => {\n const list = listRef.current;\n let option = optionsRef.current.find((option) => option.data === start);\n\n if (!list || !option) {\n return undefined;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect: DOMRect | undefined =\n option.element.getBoundingClientRect();\n\n const listY = containerRect.y - list.scrollTop;\n const pageY = Math.min(\n list.scrollHeight,\n optionRect.y - listY - optionRect.height + containerRect.height,\n );\n\n while (option && optionRect && optionRect.y - listY < pageY) {\n option = getOptionAfter(option.data);\n optionRect = option?.element.getBoundingClientRect();\n }\n\n return option ?? getLastOption();\n };\n\n useEffect(() => {\n if (listRef.current) {\n const activeElement = optionsRef.current.find(\n (option) => option.data === activeState,\n )?.element;\n\n if (!activeElement) {\n return;\n }\n\n activeElement.scrollIntoView({\n block: \"nearest\",\n inline: \"nearest\",\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 focusVisibleState,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n setListRef,\n listRef,\n options: optionsRef.current.map((option) => option.element),\n register,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n getFirstOption,\n getLastOption,\n valueToString,\n disabled,\n };\n}\n"],"names":["useRef","useState","useForkRef","useEffect","useControlled","useCallback","option"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n --numberInput-borderColor: var(--salt-editable-borderColor);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-outlineColor: var(--salt-focused-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n --numberInput-outline: none;\n\n align-items: center;\n background: var(--numberInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n min-height: var(--salt-size-base);\n min-width: 4em;\n overflow: hidden;\n outline: var(--numberInput-outline);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-50);\n padding-top: var(--salt-spacing-50);\n padding-bottom: var(--salt-spacing-50);\n position: relative;\n width: 100%;\n}\n\n.saltNumberInput:hover {\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--numberInput-background-hover);\n cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n --numberInput-background: var(--salt-editable-primary-background);\n --numberInput-background-active: var(--salt-editable-primary-background-active);\n --numberInput-background-hover: var(--salt-editable-primary-background-hover);\n --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n --numberInput-background: var(--salt-editable-secondary-background);\n --numberInput-background-active: var(--salt-editable-secondary-background-active);\n --numberInput-background-hover: var(--salt-editable-secondary-background-active);\n --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n --numberInput-background: var(--salt-status-error-background);\n --numberInput-background-active: var(--salt-status-error-background);\n --numberInput-background-hover: var(--salt-status-error-background);\n --numberInput-borderColor: var(--salt-status-error-borderColor);\n --numberInput-outlineColor: var(--salt-status-error-borderColor);\n --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n --numberInput-background: var(--salt-status-warning-background);\n --numberInput-background-active: var(--salt-status-warning-background);\n --numberInput-background-hover: var(--salt-status-warning-background);\n --numberInput-borderColor: var(--salt-status-warning-borderColor);\n --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n --numberInput-background: var(--salt-status-success-background);\n --numberInput-background-active: var(--salt-status-success-background);\n --numberInput-background-hover: var(--salt-status-success-background);\n --numberInput-borderColor: var(--salt-status-success-borderColor);\n --numberInput-outlineColor: var(--salt-status-success-borderColor);\n --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n margin: 0;\n min-width: 0;\n padding: 0;\n text-align: var(--numberInput-textAlign);\n width: 100%;\n}\n\n.saltNumberInput-input:focus {\n outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n --numberInput-borderColor: var(--numberInput-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n --numberInput-borderWidth: 0;\n\n border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n display: flex;\n flex-direction: column;\n gap: var(--numberInput-buttonGap);\n justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n display: none;\n}\n\n.saltNumberInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n /* Activation indicator width minus the border from the number input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltNumberInput-increment {\n --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n\n.saltNumberInput-decrement {\n --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-increment,\n.saltNumberInput-decrement {\n --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=NumberInput.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NumberInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|