@salt-ds/core 1.53.0 → 1.54.1
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 +42 -0
- package/css/salt-core.css +47 -45
- package/dist-cjs/avatar/Avatar.css.js +1 -1
- package/dist-cjs/badge/Badge.css.js +1 -1
- package/dist-cjs/collapsible/CollapsibleTrigger.js +3 -2
- package/dist-cjs/collapsible/CollapsibleTrigger.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +2 -1
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/index.js +2 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +108 -87
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/menu/MenuBase.js +5 -2
- package/dist-cjs/menu/MenuBase.js.map +1 -1
- package/dist-cjs/menu/MenuContext.js +3 -1
- package/dist-cjs/menu/MenuContext.js.map +1 -1
- package/dist-cjs/menu/MenuItem.js +5 -0
- package/dist-cjs/menu/MenuItem.js.map +1 -1
- package/dist-cjs/menu/MenuTrigger.js +3 -2
- package/dist-cjs/menu/MenuTrigger.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +2 -1
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/number-input/NumberInput.js +7 -7
- package/dist-cjs/number-input/NumberInput.js.map +1 -1
- package/dist-cjs/number-input/internal/useLongPressPointerAction.js +63 -0
- package/dist-cjs/number-input/internal/useLongPressPointerAction.js.map +1 -0
- package/dist-cjs/overlay/OverlayTrigger.js +2 -2
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
- package/dist-cjs/pill/Pill.js +72 -9
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill/PillCheckIcon.css.js +6 -0
- package/dist-cjs/pill/PillCheckIcon.css.js.map +1 -0
- package/dist-cjs/pill/PillCheckIcon.js +48 -0
- package/dist-cjs/pill/PillCheckIcon.js.map +1 -0
- package/dist-cjs/pill/PillGroup.css.js +6 -0
- package/dist-cjs/pill/PillGroup.css.js.map +1 -0
- package/dist-cjs/pill/PillGroup.js +83 -0
- package/dist-cjs/pill/PillGroup.js.map +1 -0
- package/dist-cjs/pill/PillGroupContext.js +27 -0
- package/dist-cjs/pill/PillGroupContext.js.map +1 -0
- package/dist-cjs/pill-input/PillInput.js +1 -0
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/salt-provider/ProviderContext.js +11 -0
- package/dist-cjs/salt-provider/ProviderContext.js.map +1 -0
- package/dist-cjs/salt-provider/SaltProvider.js +24 -132
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/salt-provider/ThemeApplicator.js +115 -0
- package/dist-cjs/salt-provider/ThemeApplicator.js.map +1 -0
- package/dist-cjs/slider/internal/useRangeSliderThumb.js +14 -5
- package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/useSliderThumb.js +14 -5
- package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -1
- package/dist-cjs/tag/Tag.css.js +1 -1
- package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
- package/dist-es/avatar/Avatar.css.js +1 -1
- package/dist-es/badge/Badge.css.js +1 -1
- package/dist-es/collapsible/CollapsibleTrigger.js +3 -2
- package/dist-es/collapsible/CollapsibleTrigger.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +3 -2
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/index.js +1 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +108 -87
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/menu/MenuBase.js +5 -2
- package/dist-es/menu/MenuBase.js.map +1 -1
- package/dist-es/menu/MenuContext.js +3 -1
- package/dist-es/menu/MenuContext.js.map +1 -1
- package/dist-es/menu/MenuItem.js +6 -1
- package/dist-es/menu/MenuItem.js.map +1 -1
- package/dist-es/menu/MenuTrigger.js +3 -2
- package/dist-es/menu/MenuTrigger.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js +3 -2
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/number-input/NumberInput.js +7 -7
- package/dist-es/number-input/NumberInput.js.map +1 -1
- package/dist-es/number-input/internal/useLongPressPointerAction.js +61 -0
- package/dist-es/number-input/internal/useLongPressPointerAction.js.map +1 -0
- package/dist-es/overlay/OverlayTrigger.js +2 -2
- package/dist-es/overlay/OverlayTrigger.js.map +1 -1
- package/dist-es/pill/Pill.js +74 -11
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill/PillCheckIcon.css.js +4 -0
- package/dist-es/pill/PillCheckIcon.css.js.map +1 -0
- package/dist-es/pill/PillCheckIcon.js +46 -0
- package/dist-es/pill/PillCheckIcon.js.map +1 -0
- package/dist-es/pill/PillGroup.css.js +4 -0
- package/dist-es/pill/PillGroup.css.js.map +1 -0
- package/dist-es/pill/PillGroup.js +81 -0
- package/dist-es/pill/PillGroup.js.map +1 -0
- package/dist-es/pill/PillGroupContext.js +24 -0
- package/dist-es/pill/PillGroupContext.js.map +1 -0
- package/dist-es/pill-input/PillInput.js +1 -0
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/salt-provider/ProviderContext.js +9 -0
- package/dist-es/salt-provider/ProviderContext.js.map +1 -0
- package/dist-es/salt-provider/SaltProvider.js +25 -133
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/salt-provider/ThemeApplicator.js +113 -0
- package/dist-es/salt-provider/ThemeApplicator.js.map +1 -0
- package/dist-es/slider/internal/useRangeSliderThumb.js +14 -5
- package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -1
- package/dist-es/slider/internal/useSliderThumb.js +14 -5
- package/dist-es/slider/internal/useSliderThumb.js.map +1 -1
- package/dist-es/tag/Tag.css.js +1 -1
- package/dist-es/toggle-button/ToggleButton.css.js +1 -1
- package/dist-types/menu/MenuContext.d.ts +2 -0
- package/dist-types/number-input/internal/useLongPressPointerAction.d.ts +2 -0
- package/dist-types/pill/Pill.d.ts +1 -0
- package/dist-types/pill/PillCheckIcon.d.ts +7 -0
- package/dist-types/pill/PillGroup.d.ts +34 -0
- package/dist-types/pill/PillGroupContext.d.ts +9 -0
- package/dist-types/pill/index.d.ts +1 -0
- package/dist-types/salt-provider/ProviderContext.d.ts +5 -0
- package/dist-types/salt-provider/SaltProvider.d.ts +5 -56
- package/dist-types/salt-provider/ThemeApplicator.d.ts +56 -0
- package/package.json +2 -2
- package/dist-cjs/number-input/internal/useActivateWhileMouseDown.js +0 -50
- package/dist-cjs/number-input/internal/useActivateWhileMouseDown.js.map +0 -1
- package/dist-es/number-input/internal/useActivateWhileMouseDown.js +0 -48
- package/dist-es/number-input/internal/useActivateWhileMouseDown.js.map +0 -1
- package/dist-types/number-input/internal/useActivateWhileMouseDown.d.ts +0 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sources":["../src/number-input/NumberInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n capitalize,\n makePrefixer,\n useControlled,\n useForkRef,\n useId,\n} from \"../utils\";\nimport { useActivateWhileMouseDown } from \"./internal/useActivateWhileMouseDown\";\nimport numberInputCss from \"./NumberInput.css\";\n\nconst withBaseName = makePrefixer(\"saltNumberInput\");\n\nexport interface NumberInputProps\n extends Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"onChange\" | \"defaultValue\" | \"value\"\n > {\n /**\n * Styling variant with full border.\n * @default false\n */\n bordered?: boolean;\n /**\n * A boolean that, when true, ensures the input value is clamped within the specified min and max range upon losing focus.\n * @default false\n */\n clamp?: boolean;\n /**\n * Number of decimal places allowed (only used by default parser/formatter).\n * Defaults to the decimal scale of either the initial value provided or the step, whichever is greater.\n * For high precision of larger numbers, consider a custom parser/formatter from a third-party library.\n */\n decimalScale?: number;\n /**\n * Custom decrement function to override the default increment behavior, use when higher precision or large numbers are required\n * value: current value\n * step: step value\n * stepMultiplier: step multiplier value, when using shift key navigation\n */\n decrement?: (value: string, step: number, stepMultiplier: number) => string;\n /**\n * The default value. Use when the component is uncontrolled.\n */\n defaultValue?: number | string;\n /**\n * Disable the `NumberInput`.\n * @default false\n */\n disabled?: boolean;\n /**\n * The marker to use in an empty read only Input.\n * @default \"—\"\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component.\n */\n endAdornment?: ReactNode;\n /**\n * Callback to format the NumberInput value.\n * For high precision or large numbers, consider creating a custom parser/format using a third-party library.\n */\n format?: (value: string) => string;\n /**\n * Hide the number buttons.\n * @default false\n */\n hideButtons?: boolean;\n /**\n * Custom increment function to override the default increment behavior, use when higher precision or large numbers are required\n * value: current value\n * step: step value\n * stepMultiplier: step multiplier value, when using shift key navigation\n */\n increment?: (value: string, step: number, stepMultiplier: number) => string;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Optional ref for the input component.\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * Callback that matches on values as you type and determines whether the value can be entered.\n */\n pattern?: (inputValue: string) => boolean;\n /**\n * The maximum value that can be selected.\n * @default Number.MAX_SAFE_INTEGER\n */\n max?: number;\n /**\n * The minimum value that can be selected.\n * @default Number.MIN_SAFE_INTEGER\n */\n min?: number;\n /**\n * Callback function that is triggered when the value changes via user input or increment/decrement.\n * Use `onNumberChange` if you want stable number, after blur or through increment/decrement\n *\n * @param event - The event that triggers the value change, can be null if called by long-press of increment/decrement\n * @param value - value as string\n */\n onChange?: (event: SyntheticEvent | null, value: string) => void;\n /**\n * Callback function that is triggered when the value changes via increment/decrement or on blur.\n *\n * @param event - The event that triggers the change, can be null if called by long-press of increment/decrement\n * @param value - The committed, parsed number value or null if an empty value\n */\n onNumberChange?: (event: SyntheticEvent | null, value: number | null) => void;\n /**\n * Callback to parse the NumberInput value, used with the `format` callback.\n * For high precision or large numbers, consider creating a custom parser/format using a third-party library. * Return null for empty input.\n */\n parse?: (value: string) => number | null;\n /**\n * A string displayed in a dimmed color when the `NumberInput` value is empty.\n */\n placeholder?: string;\n /**\n * A boolean property that controls the read-only state of the `NumberInput`.\n * - When set to `true`, the `NumberInput` becomes read-only, preventing user edits.\n * - When set to `false` or omitted, the `NumberInput` is editable by the user.\n */\n readOnly?: boolean;\n /**\n * Start adornment component.\n */\n startAdornment?: ReactNode;\n /**\n * The amount to increment or decrement the value by when using the `NumberInput` buttons or Up Arrow and Down Arrow keys.\n * @default 1\n */\n step?: number;\n /**\n * Defines the factor by which the step value is multiplied to determine the maximum increment or decrement when the Shift key\n * is held while pressing the Up Arrow or Down Arrow keys for faster adjustments of the value.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Specifies the alignment of the text within the `NumberInput`.\n *\n * @default \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: Extract<ValidationStatus, \"error\" | \"warning\" | \"success\">;\n /**\n * Styling variant.\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Value of the `NumberInput`, to be used when in a controlled state.\n */\n value?: number | string;\n}\n\nexport const isOutOfRange = (\n value: number | string,\n min: number,\n max: number,\n) => {\n if (typeof value === \"string\" && !value.length) {\n return true;\n }\n const floatValue =\n typeof value === \"string\" ? Number.parseFloat(value) : value;\n return Number.isNaN(floatValue) || floatValue > max || floatValue < min;\n};\n\nfunction getNumberPrecision(num: number | string) {\n const numStr = String(num);\n\n if (numStr.includes(\"e\") || numStr.includes(\"E\")) {\n const [base, exponent] = numStr.split(/[eE]/);\n const decimalPart = base.split(\".\")[1] || \"\";\n const precision = decimalPart.length - Number.parseInt(exponent, 10);\n return Math.max(0, precision);\n }\n\n if (numStr.includes(\".\")) {\n return numStr.split(\".\")[1].length;\n }\n\n return 0;\n}\n\nconst defaultPattern: NumberInputProps[\"pattern\"] = (inputValue) =>\n /^[+-]?(\\d+(\\.\\d*)?|\\.\\d*)?$/.test(inputValue);\n\nconst defaultDecrement = (\n value: string,\n step: number,\n stepMultiplier: number,\n parse: (v: string) => number | null,\n) => {\n const parsedValue = parse(value) ?? 0;\n const decrementStep = step * stepMultiplier;\n return String(parsedValue - decrementStep);\n};\n\nconst defaultIncrement = (\n value: string,\n step: number,\n stepMultiplier: number,\n parse: (v: string) => number | null,\n) => {\n const parsedValue = parse(value) ?? 0;\n const incrementStep = step * stepMultiplier;\n return String(parsedValue + incrementStep);\n};\n\nconst defaultFormat = (value: string, decimalScale: number): string => {\n const sanitized = value.trim();\n if (!sanitized.length) {\n return \"\";\n }\n const floatValue = Number.parseFloat(sanitized);\n const updatedValue = Number.isNaN(floatValue)\n ? sanitized\n : floatValue.toFixed(decimalScale);\n return String(updatedValue);\n};\n\nconst defaultParse = (value: string, decimalScale: number): number | null => {\n const sanitizedValue = value.trim();\n if (!sanitizedValue.length) {\n return null;\n }\n if (\n sanitizedValue === \".\" ||\n sanitizedValue === \"+\" ||\n sanitizedValue === \"-\"\n ) {\n return 0;\n }\n const floatString = Number.parseFloat(value).toFixed(decimalScale);\n return Number.parseFloat(floatString);\n};\n\nexport const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(\n function NumberInput(\n {\n \"aria-valuetext\": ariaValueTextProp,\n bordered,\n className,\n clamp,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue,\n decimalScale = Math.max(\n getNumberPrecision(valueProp ?? defaultValue ?? 0),\n getNumberPrecision(step),\n ),\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n format = (v: string) => defaultFormat(v, decimalScale),\n hideButtons,\n id,\n pattern = defaultPattern,\n inputProps = {},\n inputRef: inputRefProp,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onBlur,\n onChange,\n onMouseUp,\n onNumberChange,\n parse = (v: string) => defaultParse(v, decimalScale),\n placeholder,\n readOnly,\n startAdornment,\n decrement = (v, s, m) => defaultDecrement(v, s, m, parse),\n increment = (v, s, m) => defaultIncrement(v, s, m, parse),\n textAlign = \"left\",\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-number-input\",\n css: numberInputCss,\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 isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnly || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n const validationStatusId = useId(id);\n const inputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef(inputRefProp, inputRef);\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onBlur: inputOnBlur,\n onFocus: inputOnFocus,\n required: inputRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputRequired;\n\n const [isFocused, setIsFocused] = useState(false);\n const [isEditing, setIsEditing] = useState(false);\n const { DecreaseIcon, IncreaseIcon } = useIcon();\n\n const [value, setValue] = useControlled({\n controlled: valueProp !== undefined ? String(valueProp) : undefined,\n default: String(defaultValue ?? \"\"),\n name: \"NumberInput\",\n state: \"value\",\n });\n\n // Committed values are complete numbers, created through blur or increment/decrement, not partial entries such as \"0.\" created by input/onChange.\n const lastCommitValue = useRef<string>(value);\n const commit = (\n event: SyntheticEvent | null,\n newNumber: number | null,\n newInputValue: string,\n ) => {\n let safeNumber = newNumber;\n if (safeNumber !== null && !Number.isNaN(safeNumber)) {\n safeNumber = Math.max(\n Number.MIN_SAFE_INTEGER,\n Math.min(Number.MAX_SAFE_INTEGER, safeNumber),\n );\n if (clamp) {\n safeNumber = Math.max(min, Math.min(max, safeNumber));\n }\n } else {\n // If not a valid number, treat as null\n safeNumber = null;\n }\n const commitValue =\n safeNumber !== null ? format(String(safeNumber)) : newInputValue;\n if (commitValue !== value) {\n setValue(commitValue);\n onChange?.(event, commitValue);\n }\n if (lastCommitValue.current !== commitValue) {\n onNumberChange?.(event, safeNumber);\n lastCommitValue.current = commitValue;\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n setIsEditing(false);\n inputOnBlur?.(event);\n const parsedValue = parse(value);\n commit(event, parsedValue, value);\n };\n\n const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n setIsEditing(false);\n inputOnFocus?.(event);\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const inputValue = event.currentTarget.value;\n\n if (!inputValue.length) {\n setValue(\"\");\n onChange?.(event, \"\");\n return;\n }\n const validValue = pattern ? pattern(inputValue) : true;\n\n if (validValue) {\n setIsEditing(true);\n onChange?.(event, event.target.value);\n setValue(inputValue);\n } else {\n event.preventDefault();\n }\n };\n\n let floatValue = parse(value) ?? 0;\n floatValue = Math.max(\n Number.MIN_SAFE_INTEGER,\n Math.min(Number.MAX_SAFE_INTEGER, floatValue),\n );\n if (clamp) {\n floatValue = Math.max(min, Math.min(max, floatValue));\n }\n\n const decrementValue = (event?: SyntheticEvent, block?: boolean) => {\n const validValue = parse(value) ?? 0;\n if (Number.isNaN(validValue)) {\n return;\n }\n const newValue = decrement(\n String(validValue),\n step,\n block ? stepMultiplier : 1,\n );\n const parsedValue = parse(newValue);\n commit(event ?? null, parsedValue, newValue);\n };\n\n const { activate: activateDecrement } = useActivateWhileMouseDown(\n decrementValue,\n floatValue <= min,\n );\n\n const incrementValue = (event?: SyntheticEvent, block?: boolean) => {\n const validValue = parse(value) ?? 0;\n if (Number.isNaN(validValue)) {\n return;\n }\n const newValue = increment(\n String(validValue),\n step,\n block ? stepMultiplier : 1,\n );\n const parsedValue = parse(newValue);\n commit(event ?? null, parsedValue, newValue);\n };\n\n const { activate: activateIncrement } = useActivateWhileMouseDown(\n incrementValue,\n floatValue >= max,\n );\n\n useEffect(() => {\n if (isFocused) {\n inputRef.current?.focus();\n }\n }, [isFocused]);\n\n const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n switch (event.key) {\n case \"ArrowUp\": {\n event.preventDefault();\n const block = event.shiftKey;\n incrementValue(event, block);\n break;\n }\n case \"ArrowDown\": {\n event.preventDefault();\n const block = event.shiftKey;\n decrementValue(event, block);\n break;\n }\n case \"Home\": {\n event.preventDefault();\n const newValue = String(min);\n commit(event, min, newValue);\n break;\n }\n case \"End\": {\n event.preventDefault();\n const newValue = String(max);\n commit(event, max, newValue);\n break;\n }\n case \"PageUp\": {\n event.preventDefault();\n incrementValue(event, true);\n break;\n }\n case \"PageDown\": {\n event.preventDefault();\n decrementValue(event, true);\n break;\n }\n }\n inputOnKeyDown?.(event);\n };\n\n const handleIncrementMouseDown = (\n event: SyntheticEvent,\n disableIncrement: boolean,\n ) => {\n event.preventDefault();\n if (!disableIncrement) {\n setIsEditing(false);\n activateIncrement(event);\n } else if (inputRef.current) {\n inputRef.current.select();\n }\n };\n\n const handleDecrementMouseDown = (\n event: SyntheticEvent,\n disableDecrement: boolean,\n ) => {\n event.preventDefault();\n if (!disableDecrement) {\n setIsEditing(false);\n activateDecrement(event);\n } else if (inputRef.current) {\n inputRef.current.select();\n }\n };\n\n const handleContainerMouseUp: MouseEventHandler<HTMLDivElement> = (\n event,\n ) => {\n setIsFocused(true);\n onMouseUp?.(event);\n };\n\n let renderedValue: string;\n if (isEditing) {\n renderedValue = value;\n } else if (!value?.length) {\n renderedValue = \"\";\n } else {\n renderedValue = format(\n Number.isNaN(floatValue) ? value : String(floatValue),\n );\n }\n\n const disableDecrement = disabled || floatValue - step < min;\n const disableIncrement = disabled || floatValue + step > max;\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: isFocused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"hiddenButtons\")]: hideButtons,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n onBlur={handleBlur}\n onMouseUp={handleContainerMouseUp}\n {...restProps}\n ref={ref}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role is determined by variable, aria-valuemax is only used when the role is appropriate. */}\n <input\n aria-describedby={\n clsx(formFieldDescribedBy, inputDescribedBy) || undefined\n }\n aria-labelledby={\n clsx(formFieldLabelledBy, inputLabelledBy) || undefined\n }\n aria-invalid={\n !isReadOnly && renderedValue.length\n ? isOutOfRange(floatValue, min, max) ||\n validationStatus === \"error\"\n : undefined\n }\n className={clsx(\n withBaseName(\"input\"),\n withBaseName(`inputTextAlign${capitalize(textAlign)}`),\n inputClassName,\n )}\n disabled={isDisabled}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n onKeyDown={isReadOnly ? undefined : handleInputKeyDown}\n placeholder={placeholder}\n readOnly={isReadOnly}\n aria-readonly={isReadOnly ? \"true\" : undefined}\n ref={handleInputRef}\n required={isRequired}\n aria-valuemax={!isReadOnly && renderedValue.length ? max : undefined}\n aria-valuemin={!isReadOnly && renderedValue.length ? min : undefined}\n aria-valuenow={!isReadOnly ? floatValue : undefined}\n aria-valuetext={\n !isReadOnly\n ? renderedValue.length\n ? (ariaValueTextProp ?? renderedValue)\n : \"Empty\"\n : undefined\n }\n // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n role={isReadOnly ? \"textbox\" : \"spinbutton\"}\n tabIndex={isDisabled ? -1 : 0}\n value={\n isReadOnly && renderedValue.length === 0\n ? emptyReadOnlyMarker\n : renderedValue\n }\n {...restInputProps}\n />\n <div className={withBaseName(\"activationIndicator\")} />\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} id={validationStatusId} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n {!isReadOnly && (\n <div className={clsx(withBaseName(\"buttonContainer\"))}>\n <Button\n aria-hidden={true}\n appearance=\"transparent\"\n tabIndex={-1}\n disabled={disableIncrement}\n className={withBaseName(\"increment\")}\n onMouseDown={(event) =>\n handleIncrementMouseDown(event, disableIncrement)\n }\n >\n <IncreaseIcon aria-hidden />\n </Button>\n <Button\n aria-hidden={true}\n appearance=\"transparent\"\n tabIndex={-1}\n disabled={disableDecrement}\n className={withBaseName(\"decrement\")}\n onMouseDown={(event) =>\n handleDecrementMouseDown(event, disableDecrement)\n }\n >\n <DecreaseIcon aria-hidden />\n </Button>\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["NumberInput","numberInputCss","disableIncrement","disableDecrement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sources":["../src/number-input/NumberInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type PointerEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n capitalize,\n makePrefixer,\n useControlled,\n useForkRef,\n useId,\n} from \"../utils\";\nimport { useLongPressPointerAction } from \"./internal/useLongPressPointerAction\";\nimport numberInputCss from \"./NumberInput.css\";\n\nconst withBaseName = makePrefixer(\"saltNumberInput\");\n\nexport interface NumberInputProps\n extends Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"onChange\" | \"defaultValue\" | \"value\"\n > {\n /**\n * Styling variant with full border.\n * @default false\n */\n bordered?: boolean;\n /**\n * A boolean that, when true, ensures the input value is clamped within the specified min and max range upon losing focus.\n * @default false\n */\n clamp?: boolean;\n /**\n * Number of decimal places allowed (only used by default parser/formatter).\n * Defaults to the decimal scale of either the initial value provided or the step, whichever is greater.\n * For high precision of larger numbers, consider a custom parser/formatter from a third-party library.\n */\n decimalScale?: number;\n /**\n * Custom decrement function to override the default increment behavior, use when higher precision or large numbers are required\n * value: current value\n * step: step value\n * stepMultiplier: step multiplier value, when using shift key navigation\n */\n decrement?: (value: string, step: number, stepMultiplier: number) => string;\n /**\n * The default value. Use when the component is uncontrolled.\n */\n defaultValue?: number | string;\n /**\n * Disable the `NumberInput`.\n * @default false\n */\n disabled?: boolean;\n /**\n * The marker to use in an empty read only Input.\n * @default \"—\"\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component.\n */\n endAdornment?: ReactNode;\n /**\n * Callback to format the NumberInput value.\n * For high precision or large numbers, consider creating a custom parser/format using a third-party library.\n */\n format?: (value: string) => string;\n /**\n * Hide the number buttons.\n * @default false\n */\n hideButtons?: boolean;\n /**\n * Custom increment function to override the default increment behavior, use when higher precision or large numbers are required\n * value: current value\n * step: step value\n * stepMultiplier: step multiplier value, when using shift key navigation\n */\n increment?: (value: string, step: number, stepMultiplier: number) => string;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Optional ref for the input component.\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * Callback that matches on values as you type and determines whether the value can be entered.\n */\n pattern?: (inputValue: string) => boolean;\n /**\n * The maximum value that can be selected.\n * @default Number.MAX_SAFE_INTEGER\n */\n max?: number;\n /**\n * The minimum value that can be selected.\n * @default Number.MIN_SAFE_INTEGER\n */\n min?: number;\n /**\n * Callback function that is triggered when the value changes via user input or increment/decrement.\n * Use `onNumberChange` if you want stable number, after blur or through increment/decrement\n *\n * @param event - The event that triggers the value change, can be null if called by long-press of increment/decrement\n * @param value - value as string\n */\n onChange?: (event: SyntheticEvent | null, value: string) => void;\n /**\n * Callback function that is triggered when the value changes via increment/decrement or on blur.\n *\n * @param event - The event that triggers the change, can be null if called by long-press of increment/decrement\n * @param value - The committed, parsed number value or null if an empty value\n */\n onNumberChange?: (event: SyntheticEvent | null, value: number | null) => void;\n /**\n * Callback to parse the NumberInput value, used with the `format` callback.\n * For high precision or large numbers, consider creating a custom parser/format using a third-party library. * Return null for empty input.\n */\n parse?: (value: string) => number | null;\n /**\n * A string displayed in a dimmed color when the `NumberInput` value is empty.\n */\n placeholder?: string;\n /**\n * A boolean property that controls the read-only state of the `NumberInput`.\n * - When set to `true`, the `NumberInput` becomes read-only, preventing user edits.\n * - When set to `false` or omitted, the `NumberInput` is editable by the user.\n */\n readOnly?: boolean;\n /**\n * Start adornment component.\n */\n startAdornment?: ReactNode;\n /**\n * The amount to increment or decrement the value by when using the `NumberInput` buttons or Up Arrow and Down Arrow keys.\n * @default 1\n */\n step?: number;\n /**\n * Defines the factor by which the step value is multiplied to determine the maximum increment or decrement when the Shift key\n * is held while pressing the Up Arrow or Down Arrow keys for faster adjustments of the value.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Specifies the alignment of the text within the `NumberInput`.\n *\n * @default \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: Extract<ValidationStatus, \"error\" | \"warning\" | \"success\">;\n /**\n * Styling variant.\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Value of the `NumberInput`, to be used when in a controlled state.\n */\n value?: number | string;\n}\n\nexport const isOutOfRange = (\n value: number | string,\n min: number,\n max: number,\n) => {\n if (typeof value === \"string\" && !value.length) {\n return true;\n }\n const floatValue =\n typeof value === \"string\" ? Number.parseFloat(value) : value;\n return Number.isNaN(floatValue) || floatValue > max || floatValue < min;\n};\n\nfunction getNumberPrecision(num: number | string) {\n const numStr = String(num);\n\n if (numStr.includes(\"e\") || numStr.includes(\"E\")) {\n const [base, exponent] = numStr.split(/[eE]/);\n const decimalPart = base.split(\".\")[1] || \"\";\n const precision = decimalPart.length - Number.parseInt(exponent, 10);\n return Math.max(0, precision);\n }\n\n if (numStr.includes(\".\")) {\n return numStr.split(\".\")[1].length;\n }\n\n return 0;\n}\n\nconst defaultPattern: NumberInputProps[\"pattern\"] = (inputValue) =>\n /^[+-]?(\\d+(\\.\\d*)?|\\.\\d*)?$/.test(inputValue);\n\nconst defaultDecrement = (\n value: string,\n step: number,\n stepMultiplier: number,\n parse: (v: string) => number | null,\n) => {\n const parsedValue = parse(value) ?? 0;\n const decrementStep = step * stepMultiplier;\n return String(parsedValue - decrementStep);\n};\n\nconst defaultIncrement = (\n value: string,\n step: number,\n stepMultiplier: number,\n parse: (v: string) => number | null,\n) => {\n const parsedValue = parse(value) ?? 0;\n const incrementStep = step * stepMultiplier;\n return String(parsedValue + incrementStep);\n};\n\nconst defaultFormat = (value: string, decimalScale: number): string => {\n const sanitized = value.trim();\n if (!sanitized.length) {\n return \"\";\n }\n const floatValue = Number.parseFloat(sanitized);\n const updatedValue = Number.isNaN(floatValue)\n ? sanitized\n : floatValue.toFixed(decimalScale);\n return String(updatedValue);\n};\n\nconst defaultParse = (value: string, decimalScale: number): number | null => {\n const sanitizedValue = value.trim();\n if (!sanitizedValue.length) {\n return null;\n }\n if (\n sanitizedValue === \".\" ||\n sanitizedValue === \"+\" ||\n sanitizedValue === \"-\"\n ) {\n return 0;\n }\n const floatString = Number.parseFloat(value).toFixed(decimalScale);\n return Number.parseFloat(floatString);\n};\n\nexport const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(\n function NumberInput(\n {\n \"aria-valuetext\": ariaValueTextProp,\n bordered,\n className,\n clamp,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue,\n decimalScale = Math.max(\n getNumberPrecision(valueProp ?? defaultValue ?? 0),\n getNumberPrecision(step),\n ),\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n format = (v: string) => defaultFormat(v, decimalScale),\n hideButtons,\n id,\n pattern = defaultPattern,\n inputProps = {},\n inputRef: inputRefProp,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onBlur,\n onChange,\n onMouseUp,\n onNumberChange,\n parse = (v: string) => defaultParse(v, decimalScale),\n placeholder,\n readOnly,\n startAdornment,\n decrement = (v, s, m) => defaultDecrement(v, s, m, parse),\n increment = (v, s, m) => defaultIncrement(v, s, m, parse),\n textAlign = \"left\",\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-number-input\",\n css: numberInputCss,\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 isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnly || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n const validationStatusId = useId(id);\n const inputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef(inputRefProp, inputRef);\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onBlur: inputOnBlur,\n onFocus: inputOnFocus,\n required: inputRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputRequired;\n\n const [isFocused, setIsFocused] = useState(false);\n const [isEditing, setIsEditing] = useState(false);\n const { DecreaseIcon, IncreaseIcon } = useIcon();\n\n const [value, setValue] = useControlled({\n controlled: valueProp !== undefined ? String(valueProp) : undefined,\n default: String(defaultValue ?? \"\"),\n name: \"NumberInput\",\n state: \"value\",\n });\n\n // Committed values are complete numbers, created through blur or increment/decrement, not partial entries such as \"0.\" created by input/onChange.\n const lastCommitValue = useRef<string>(value);\n const commit = (\n event: SyntheticEvent | null,\n newNumber: number | null,\n newInputValue: string,\n ) => {\n let safeNumber = newNumber;\n if (safeNumber !== null && !Number.isNaN(safeNumber)) {\n safeNumber = Math.max(\n Number.MIN_SAFE_INTEGER,\n Math.min(Number.MAX_SAFE_INTEGER, safeNumber),\n );\n if (clamp) {\n safeNumber = Math.max(min, Math.min(max, safeNumber));\n }\n } else {\n // If not a valid number, treat as null\n safeNumber = null;\n }\n const commitValue =\n safeNumber !== null ? format(String(safeNumber)) : newInputValue;\n if (commitValue !== value) {\n setValue(commitValue);\n onChange?.(event, commitValue);\n }\n if (lastCommitValue.current !== commitValue) {\n onNumberChange?.(event, safeNumber);\n lastCommitValue.current = commitValue;\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n setIsFocused(false);\n onBlur?.(event);\n };\n\n const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n setIsEditing(false);\n inputOnBlur?.(event);\n const parsedValue = parse(value);\n commit(event, parsedValue, value);\n };\n\n const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n setIsEditing(false);\n inputOnFocus?.(event);\n };\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const inputValue = event.currentTarget.value;\n\n if (!inputValue.length) {\n setValue(\"\");\n onChange?.(event, \"\");\n return;\n }\n const validValue = pattern ? pattern(inputValue) : true;\n\n if (validValue) {\n setIsEditing(true);\n onChange?.(event, event.target.value);\n setValue(inputValue);\n } else {\n event.preventDefault();\n }\n };\n\n let floatValue = parse(value) ?? 0;\n floatValue = Math.max(\n Number.MIN_SAFE_INTEGER,\n Math.min(Number.MAX_SAFE_INTEGER, floatValue),\n );\n if (clamp) {\n floatValue = Math.max(min, Math.min(max, floatValue));\n }\n\n const decrementValue = (event?: SyntheticEvent, block?: boolean) => {\n const validValue = parse(value) ?? 0;\n if (Number.isNaN(validValue)) {\n return;\n }\n const newValue = decrement(\n String(validValue),\n step,\n block ? stepMultiplier : 1,\n );\n const parsedValue = parse(newValue);\n commit(event ?? null, parsedValue, newValue);\n };\n\n const activateDecrement = useLongPressPointerAction(\n decrementValue,\n floatValue <= min,\n );\n\n const incrementValue = (event?: SyntheticEvent, block?: boolean) => {\n const validValue = parse(value) ?? 0;\n if (Number.isNaN(validValue)) {\n return;\n }\n const newValue = increment(\n String(validValue),\n step,\n block ? stepMultiplier : 1,\n );\n const parsedValue = parse(newValue);\n commit(event ?? null, parsedValue, newValue);\n };\n\n const activateIncrement = useLongPressPointerAction(\n incrementValue,\n floatValue >= max,\n );\n\n useEffect(() => {\n if (isFocused) {\n inputRef.current?.focus();\n }\n }, [isFocused]);\n\n const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n switch (event.key) {\n case \"ArrowUp\": {\n event.preventDefault();\n const block = event.shiftKey;\n incrementValue(event, block);\n break;\n }\n case \"ArrowDown\": {\n event.preventDefault();\n const block = event.shiftKey;\n decrementValue(event, block);\n break;\n }\n case \"Home\": {\n event.preventDefault();\n const newValue = String(min);\n commit(event, min, newValue);\n break;\n }\n case \"End\": {\n event.preventDefault();\n const newValue = String(max);\n commit(event, max, newValue);\n break;\n }\n case \"PageUp\": {\n event.preventDefault();\n incrementValue(event, true);\n break;\n }\n case \"PageDown\": {\n event.preventDefault();\n decrementValue(event, true);\n break;\n }\n }\n inputOnKeyDown?.(event);\n };\n\n const handleIncrementPointerDown = (\n event: PointerEvent,\n disableIncrement: boolean,\n ) => {\n event.preventDefault();\n if (!disableIncrement) {\n setIsEditing(false);\n activateIncrement(event);\n } else if (inputRef.current) {\n inputRef.current.select();\n }\n };\n\n const handleDecrementPointerDown = (\n event: PointerEvent,\n disableDecrement: boolean,\n ) => {\n event.preventDefault();\n if (!disableDecrement) {\n setIsEditing(false);\n activateDecrement(event);\n } else if (inputRef.current) {\n inputRef.current.select();\n }\n };\n\n const handleContainerMouseUp: MouseEventHandler<HTMLDivElement> = (\n event,\n ) => {\n setIsFocused(true);\n onMouseUp?.(event);\n };\n\n let renderedValue: string;\n if (isEditing) {\n renderedValue = value;\n } else if (!value?.length) {\n renderedValue = \"\";\n } else {\n renderedValue = format(\n Number.isNaN(floatValue) ? value : String(floatValue),\n );\n }\n\n const disableDecrement = disabled || floatValue - step < min;\n const disableIncrement = disabled || floatValue + step > max;\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: isFocused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"hiddenButtons\")]: hideButtons,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n onBlur={handleBlur}\n onMouseUp={handleContainerMouseUp}\n {...restProps}\n ref={ref}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role is determined by variable, aria-valuemax is only used when the role is appropriate. */}\n <input\n aria-describedby={\n clsx(formFieldDescribedBy, inputDescribedBy) || undefined\n }\n aria-labelledby={\n clsx(formFieldLabelledBy, inputLabelledBy) || undefined\n }\n aria-invalid={\n !isReadOnly && renderedValue.length\n ? isOutOfRange(floatValue, min, max) ||\n validationStatus === \"error\"\n : undefined\n }\n className={clsx(\n withBaseName(\"input\"),\n withBaseName(`inputTextAlign${capitalize(textAlign)}`),\n inputClassName,\n )}\n disabled={isDisabled}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n onKeyDown={isReadOnly ? undefined : handleInputKeyDown}\n placeholder={placeholder}\n readOnly={isReadOnly}\n aria-readonly={isReadOnly ? \"true\" : undefined}\n ref={handleInputRef}\n required={isRequired}\n aria-valuemax={!isReadOnly && renderedValue.length ? max : undefined}\n aria-valuemin={!isReadOnly && renderedValue.length ? min : undefined}\n aria-valuenow={!isReadOnly ? floatValue : undefined}\n aria-valuetext={\n !isReadOnly\n ? renderedValue.length\n ? (ariaValueTextProp ?? renderedValue)\n : \"Empty\"\n : undefined\n }\n // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n role={isReadOnly ? \"textbox\" : \"spinbutton\"}\n tabIndex={isDisabled ? -1 : 0}\n value={\n isReadOnly && renderedValue.length === 0\n ? emptyReadOnlyMarker\n : renderedValue\n }\n {...restInputProps}\n />\n <div className={withBaseName(\"activationIndicator\")} />\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} id={validationStatusId} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n {!isReadOnly && (\n <div className={clsx(withBaseName(\"buttonContainer\"))}>\n <Button\n aria-hidden={true}\n appearance=\"transparent\"\n tabIndex={-1}\n disabled={disableIncrement}\n className={withBaseName(\"increment\")}\n onPointerDown={(event) =>\n handleIncrementPointerDown(event, disableIncrement)\n }\n >\n <IncreaseIcon aria-hidden />\n </Button>\n <Button\n aria-hidden={true}\n appearance=\"transparent\"\n tabIndex={-1}\n disabled={disableDecrement}\n className={withBaseName(\"decrement\")}\n onPointerDown={(event) =>\n handleDecrementPointerDown(event, disableDecrement)\n }\n >\n <DecreaseIcon aria-hidden />\n </Button>\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["NumberInput","numberInputCss","disableIncrement","disableDecrement"],"mappings":"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"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { useWindow } from '@salt-ds/window';
|
|
2
|
+
import { useState, useCallback, useEffect } from 'react';
|
|
3
|
+
import { useInterval } from './useInterval.js';
|
|
4
|
+
|
|
5
|
+
const INITIAL_DELAY = 500;
|
|
6
|
+
const INTERVAL_DELAY = 100;
|
|
7
|
+
function useLongPressPointerAction(actionFn, isAtLimit) {
|
|
8
|
+
const [active, setActive] = useState(false);
|
|
9
|
+
const [delay, setDelay] = useState(INITIAL_DELAY);
|
|
10
|
+
const cancel = useCallback(() => {
|
|
11
|
+
setActive(false);
|
|
12
|
+
setDelay(INITIAL_DELAY);
|
|
13
|
+
}, []);
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
if (isAtLimit) {
|
|
16
|
+
cancel();
|
|
17
|
+
}
|
|
18
|
+
}, [isAtLimit, cancel]);
|
|
19
|
+
const targetWindow = useWindow();
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (targetWindow) {
|
|
22
|
+
targetWindow.addEventListener("pointerup", cancel);
|
|
23
|
+
targetWindow.addEventListener("pointercancel", cancel);
|
|
24
|
+
targetWindow.addEventListener("blur", cancel);
|
|
25
|
+
targetWindow.addEventListener("contextmenu", cancel);
|
|
26
|
+
}
|
|
27
|
+
return () => {
|
|
28
|
+
if (targetWindow) {
|
|
29
|
+
targetWindow.removeEventListener("pointerup", cancel);
|
|
30
|
+
targetWindow.removeEventListener("pointercancel", cancel);
|
|
31
|
+
targetWindow.removeEventListener("blur", cancel);
|
|
32
|
+
targetWindow.removeEventListener("contextmenu", cancel);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
}, [cancel, targetWindow]);
|
|
36
|
+
const activate = useCallback(
|
|
37
|
+
(event) => {
|
|
38
|
+
if (event.pointerType === "mouse" && event.button === 0 || event.pointerType === "touch" || event.pointerType === "pen") {
|
|
39
|
+
actionFn(event);
|
|
40
|
+
setActive(true);
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
[actionFn]
|
|
44
|
+
);
|
|
45
|
+
useInterval(
|
|
46
|
+
() => {
|
|
47
|
+
if (!active) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
actionFn();
|
|
51
|
+
if (delay === INITIAL_DELAY) {
|
|
52
|
+
setDelay(INTERVAL_DELAY);
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
active ? delay : null
|
|
56
|
+
);
|
|
57
|
+
return activate;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export { useLongPressPointerAction };
|
|
61
|
+
//# sourceMappingURL=useLongPressPointerAction.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLongPressPointerAction.js","sources":["../src/number-input/internal/useLongPressPointerAction.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type PointerEvent, useCallback, useEffect, useState } from \"react\";\nimport { useInterval } from \"./useInterval\";\n\nconst INITIAL_DELAY = 500;\nconst INTERVAL_DELAY = 100;\n\nexport function useLongPressPointerAction(\n actionFn: (event?: PointerEvent) => void,\n isAtLimit: boolean,\n) {\n const [active, setActive] = useState(false);\n const [delay, setDelay] = useState(INITIAL_DELAY);\n\n const cancel = useCallback(() => {\n setActive(false);\n setDelay(INITIAL_DELAY);\n }, []);\n\n useEffect(() => {\n if (isAtLimit) {\n cancel();\n }\n }, [isAtLimit, cancel]);\n\n const targetWindow = useWindow();\n useEffect(() => {\n if (targetWindow) {\n targetWindow.addEventListener(\"pointerup\", cancel);\n targetWindow.addEventListener(\"pointercancel\", cancel);\n targetWindow.addEventListener(\"blur\", cancel);\n targetWindow.addEventListener(\"contextmenu\", cancel); // Don't rely on this alone to cancel\n }\n return () => {\n if (targetWindow) {\n targetWindow.removeEventListener(\"pointerup\", cancel);\n targetWindow.removeEventListener(\"pointercancel\", cancel);\n targetWindow.removeEventListener(\"blur\", cancel);\n targetWindow.removeEventListener(\"contextmenu\", cancel);\n }\n };\n }, [cancel, targetWindow]);\n\n const activate = useCallback(\n (event: PointerEvent) => {\n // Only left mouse button, or any touch/pen\n if (\n (event.pointerType === \"mouse\" && event.button === 0) ||\n event.pointerType === \"touch\" ||\n event.pointerType === \"pen\"\n ) {\n actionFn(event);\n setActive(true);\n }\n },\n [actionFn],\n );\n\n useInterval(\n () => {\n if (!active) {\n return;\n }\n actionFn();\n if (delay === INITIAL_DELAY) {\n setDelay(INTERVAL_DELAY);\n }\n },\n active ? delay : null,\n );\n\n return activate;\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,aAAA,GAAgB,GAAA;AACtB,MAAM,cAAA,GAAiB,GAAA;AAEhB,SAAS,yBAAA,CACd,UACA,SAAA,EACA;AACA,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAC1C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,aAAa,CAAA;AAEhD,EAAA,MAAM,MAAA,GAAS,YAAY,MAAM;AAC/B,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAA,QAAA,CAAS,aAAa,CAAA;AAAA,EACxB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,MAAA,EAAO;AAAA,IACT;AAAA,EACF,CAAA,EAAG,CAAC,SAAA,EAAW,MAAM,CAAC,CAAA;AAEtB,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,YAAA,CAAa,gBAAA,CAAiB,aAAa,MAAM,CAAA;AACjD,MAAA,YAAA,CAAa,gBAAA,CAAiB,iBAAiB,MAAM,CAAA;AACrD,MAAA,YAAA,CAAa,gBAAA,CAAiB,QAAQ,MAAM,CAAA;AAC5C,MAAA,YAAA,CAAa,gBAAA,CAAiB,eAAe,MAAM,CAAA;AAAA,IACrD;AACA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,YAAA,EAAc;AAChB,QAAA,YAAA,CAAa,mBAAA,CAAoB,aAAa,MAAM,CAAA;AACpD,QAAA,YAAA,CAAa,mBAAA,CAAoB,iBAAiB,MAAM,CAAA;AACxD,QAAA,YAAA,CAAa,mBAAA,CAAoB,QAAQ,MAAM,CAAA;AAC/C,QAAA,YAAA,CAAa,mBAAA,CAAoB,eAAe,MAAM,CAAA;AAAA,MACxD;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,YAAY,CAAC,CAAA;AAEzB,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CAAC,KAAA,KAAwB;AAEvB,MAAA,IACG,KAAA,CAAM,WAAA,KAAgB,OAAA,IAAW,KAAA,CAAM,MAAA,KAAW,CAAA,IACnD,KAAA,CAAM,WAAA,KAAgB,OAAA,IACtB,KAAA,CAAM,WAAA,KAAgB,KAAA,EACtB;AACA,QAAA,QAAA,CAAS,KAAK,CAAA;AACd,QAAA,SAAA,CAAU,IAAI,CAAA;AAAA,MAChB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,WAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,CAAC,MAAA,EAAQ;AACX,QAAA;AAAA,MACF;AACA,MAAA,QAAA,EAAS;AACT,MAAA,IAAI,UAAU,aAAA,EAAe;AAC3B,QAAA,QAAA,CAAS,cAAc,CAAA;AAAA,MACzB;AAAA,IACF,CAAA;AAAA,IACA,SAAS,KAAA,GAAQ;AAAA,GACnB;AAEA,EAAA,OAAO,QAAA;AACT;;;;"}
|
|
@@ -11,7 +11,7 @@ import { useOverlayContext } from './OverlayContext.js';
|
|
|
11
11
|
|
|
12
12
|
const OverlayTrigger = forwardRef(
|
|
13
13
|
function OverlayTrigger2(props, ref) {
|
|
14
|
-
const { children } = props;
|
|
14
|
+
const { children, ...rest } = props;
|
|
15
15
|
const { reference, getReferenceProps } = useOverlayContext();
|
|
16
16
|
const handleFloatingRef = useForkRef(
|
|
17
17
|
getRefFromChildren(children),
|
|
@@ -22,7 +22,7 @@ const OverlayTrigger = forwardRef(
|
|
|
22
22
|
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
23
23
|
}
|
|
24
24
|
return /* @__PURE__ */ jsx(Fragment, { children: cloneElement(children, {
|
|
25
|
-
...mergeProps(getReferenceProps(), children.props),
|
|
25
|
+
...mergeProps(getReferenceProps(rest), children.props),
|
|
26
26
|
ref: handleRef
|
|
27
27
|
}) });
|
|
28
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayTrigger.js","sources":["../src/overlay/OverlayTrigger.tsx"],"sourcesContent":["import {\n cloneElement,\n forwardRef,\n isValidElement,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayTriggerProps {\n children?: ReactNode;\n}\n\nexport const OverlayTrigger = forwardRef<HTMLElement, OverlayTriggerProps>(\n function OverlayTrigger(props, ref) {\n const { children } = props;\n\n const { reference, getReferenceProps } = useOverlayContext();\n\n const handleFloatingRef = useForkRef(\n getRefFromChildren(children),\n reference,\n );\n const handleRef = useForkRef(handleFloatingRef, ref);\n\n if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n return <>{children}</>;\n }\n\n return (\n <>\n {cloneElement(children, {\n ...mergeProps(getReferenceProps(), children.props),\n ref: handleRef,\n })}\n </>\n );\n },\n);\n"],"names":["OverlayTrigger"],"mappings":";;;;;;;;;;;AAcO,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"OverlayTrigger.js","sources":["../src/overlay/OverlayTrigger.tsx"],"sourcesContent":["import {\n cloneElement,\n forwardRef,\n isValidElement,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayTriggerProps {\n children?: ReactNode;\n}\n\nexport const OverlayTrigger = forwardRef<HTMLElement, OverlayTriggerProps>(\n function OverlayTrigger(props, ref) {\n const { children, ...rest } = props;\n\n const { reference, getReferenceProps } = useOverlayContext();\n\n const handleFloatingRef = useForkRef(\n getRefFromChildren(children),\n reference,\n );\n const handleRef = useForkRef(handleFloatingRef, ref);\n\n if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n return <>{children}</>;\n }\n\n return (\n <>\n {cloneElement(children, {\n ...mergeProps(getReferenceProps(rest), children.props),\n ref: handleRef,\n })}\n </>\n );\n },\n);\n"],"names":["OverlayTrigger"],"mappings":";;;;;;;;;;;AAcO,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,GAAG,IAAA,EAAK,GAAI,KAAA;AAE9B,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAI,iBAAA,EAAkB;AAE3D,IAAA,MAAM,iBAAA,GAAoB,UAAA;AAAA,MACxB,mBAAmB,QAAQ,CAAA;AAAA,MAC3B;AAAA,KACF;AACA,IAAA,MAAM,SAAA,GAAY,UAAA,CAAW,iBAAA,EAAmB,GAAG,CAAA;AAEnD,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAuC,QAAQ,CAAA,EAAG;AAClE,MAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,IACrB;AAEA,IAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACG,uBAAa,QAAA,EAAU;AAAA,MACtB,GAAG,UAAA,CAAW,iBAAA,CAAkB,IAAI,CAAA,EAAG,SAAS,KAAK,CAAA;AAAA,MACrD,GAAA,EAAK;AAAA,KACN,CAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
|
package/dist-es/pill/Pill.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
3
3
|
import { useWindow } from '@salt-ds/window';
|
|
4
4
|
import { clsx } from 'clsx';
|
|
5
|
-
import { forwardRef } from 'react';
|
|
5
|
+
import { forwardRef, useState, useEffect } from 'react';
|
|
6
6
|
import '../button/Button.js';
|
|
7
7
|
import { useButton } from '../button/useButton.js';
|
|
8
8
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
@@ -11,33 +11,90 @@ import '../utils/useId.js';
|
|
|
11
11
|
import '../salt-provider/SaltProvider.js';
|
|
12
12
|
import '../viewport/ViewportProvider.js';
|
|
13
13
|
import css_248z from './Pill.css.js';
|
|
14
|
+
import { PillCheckIcon } from './PillCheckIcon.js';
|
|
15
|
+
import { usePillGroup } from './PillGroupContext.js';
|
|
14
16
|
|
|
15
17
|
const withBaseName = makePrefixer("saltPill");
|
|
16
18
|
const Pill = forwardRef(function Pill2({
|
|
17
19
|
children,
|
|
18
20
|
className,
|
|
19
|
-
disabled,
|
|
21
|
+
disabled: disabledProp,
|
|
20
22
|
onKeyUp,
|
|
21
23
|
onKeyDown,
|
|
22
24
|
onClick,
|
|
23
25
|
onBlur,
|
|
26
|
+
onPointerDown,
|
|
27
|
+
value,
|
|
24
28
|
...rest
|
|
25
29
|
}, ref) {
|
|
30
|
+
const [pressActive, setPressActive] = useState(false);
|
|
31
|
+
const [spaceActive, setSpaceActive] = useState(false);
|
|
32
|
+
const pillGroupContext = usePillGroup();
|
|
26
33
|
const targetWindow = useWindow();
|
|
27
34
|
useComponentCssInjection({
|
|
28
35
|
testId: "salt-pill",
|
|
29
36
|
css: css_248z,
|
|
30
37
|
window: targetWindow
|
|
31
38
|
});
|
|
39
|
+
const insideSelectableGroup = pillGroupContext.selectionVariant === "multiple";
|
|
40
|
+
const handleClick = (event) => {
|
|
41
|
+
if (insideSelectableGroup && value) {
|
|
42
|
+
pillGroupContext.select(event, value);
|
|
43
|
+
}
|
|
44
|
+
onClick == null ? void 0 : onClick(event);
|
|
45
|
+
};
|
|
46
|
+
const handlePointerDown = (event) => {
|
|
47
|
+
onPointerDown == null ? void 0 : onPointerDown(event);
|
|
48
|
+
if (disabledProp) return;
|
|
49
|
+
setPressActive(true);
|
|
50
|
+
};
|
|
51
|
+
const handleKeyDown = (event) => {
|
|
52
|
+
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
53
|
+
if (event.key === "Enter" && insideSelectableGroup) {
|
|
54
|
+
event.preventDefault();
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
if (event.key === " " && insideSelectableGroup) {
|
|
58
|
+
setSpaceActive(true);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
const handleKeyUp = (event) => {
|
|
62
|
+
onKeyUp == null ? void 0 : onKeyUp(event);
|
|
63
|
+
if (insideSelectableGroup && event.key === " ") {
|
|
64
|
+
setSpaceActive(false);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
useEffect(() => {
|
|
68
|
+
if (!targetWindow) return;
|
|
69
|
+
const clear = () => setPressActive(false);
|
|
70
|
+
targetWindow.addEventListener("pointerup", clear);
|
|
71
|
+
targetWindow.addEventListener("pointercancel", clear);
|
|
72
|
+
return () => {
|
|
73
|
+
targetWindow.removeEventListener("pointerup", clear);
|
|
74
|
+
targetWindow.removeEventListener("pointercancel", clear);
|
|
75
|
+
};
|
|
76
|
+
}, [targetWindow]);
|
|
32
77
|
const { buttonProps, active } = useButton({
|
|
33
|
-
disabled,
|
|
34
|
-
onKeyUp,
|
|
35
|
-
onKeyDown,
|
|
36
|
-
onClick,
|
|
78
|
+
disabled: disabledProp,
|
|
79
|
+
onKeyUp: handleKeyUp,
|
|
80
|
+
onKeyDown: handleKeyDown,
|
|
81
|
+
onClick: handleClick,
|
|
37
82
|
onBlur
|
|
38
83
|
});
|
|
39
|
-
const {
|
|
40
|
-
|
|
84
|
+
const {
|
|
85
|
+
tabIndex: _tabIndex,
|
|
86
|
+
disabled: buttonDisabled,
|
|
87
|
+
...restButtonProps
|
|
88
|
+
} = buttonProps;
|
|
89
|
+
const selected = !!value && insideSelectableGroup && pillGroupContext.selected.includes(value);
|
|
90
|
+
const disabled = pillGroupContext.disabled || buttonDisabled;
|
|
91
|
+
const combinedActive = insideSelectableGroup ? pressActive || spaceActive : pressActive || active;
|
|
92
|
+
const groupProps = insideSelectableGroup ? {
|
|
93
|
+
"aria-checked": selected,
|
|
94
|
+
role: "checkbox",
|
|
95
|
+
value
|
|
96
|
+
} : {};
|
|
97
|
+
return /* @__PURE__ */ jsxs(
|
|
41
98
|
"button",
|
|
42
99
|
{
|
|
43
100
|
"data-testid": "pill",
|
|
@@ -45,13 +102,19 @@ const Pill = forwardRef(function Pill2({
|
|
|
45
102
|
className: clsx(
|
|
46
103
|
withBaseName(),
|
|
47
104
|
withBaseName("clickable"),
|
|
48
|
-
{ [withBaseName("active")]:
|
|
105
|
+
{ [withBaseName("active")]: combinedActive },
|
|
49
106
|
className
|
|
50
107
|
),
|
|
51
108
|
type: "button",
|
|
109
|
+
onPointerDown: handlePointerDown,
|
|
110
|
+
disabled,
|
|
52
111
|
...restButtonProps,
|
|
112
|
+
...groupProps,
|
|
53
113
|
...rest,
|
|
54
|
-
children
|
|
114
|
+
children: [
|
|
115
|
+
insideSelectableGroup && /* @__PURE__ */ jsx(PillCheckIcon, { checked: selected, active: combinedActive }),
|
|
116
|
+
children
|
|
117
|
+
]
|
|
55
118
|
}
|
|
56
119
|
);
|
|
57
120
|
});
|
package/dist-es/pill/Pill.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.js","sources":["../src/pill/Pill.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"Pill.js","sources":["../src/pill/Pill.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type PointerEvent,\n useEffect,\n useState,\n} from \"react\";\nimport { useButton } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport pillCss from \"./Pill.css\";\nimport { PillCheckIcon } from \"./PillCheckIcon\";\nimport { usePillGroup } from \"./PillGroupContext\";\n\nconst withBaseName = makePrefixer(\"saltPill\");\n\nexport interface PillProps extends ComponentPropsWithoutRef<\"button\"> {\n value?: string;\n}\n\nexport const Pill = forwardRef<HTMLButtonElement, PillProps>(function Pill(\n {\n children,\n className,\n disabled: disabledProp,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n onPointerDown,\n value,\n ...rest\n },\n ref,\n) {\n const [pressActive, setPressActive] = useState(false);\n const [spaceActive, setSpaceActive] = useState(false);\n\n const pillGroupContext = usePillGroup();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pill\",\n css: pillCss,\n window: targetWindow,\n });\n\n const insideSelectableGroup =\n pillGroupContext.selectionVariant === \"multiple\";\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (insideSelectableGroup && value) {\n pillGroupContext.select(event, value);\n }\n onClick?.(event);\n };\n\n const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {\n onPointerDown?.(event);\n if (disabledProp) return;\n setPressActive(true);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n if (event.key === \"Enter\" && insideSelectableGroup) {\n // Prevent selection on enter key for selectable pill.\n event.preventDefault();\n return;\n }\n if (event.key === \" \" && insideSelectableGroup) {\n setSpaceActive(true);\n }\n };\n\n const handleKeyUp = (event: KeyboardEvent<HTMLButtonElement>) => {\n onKeyUp?.(event);\n if (insideSelectableGroup && event.key === \" \") {\n setSpaceActive(false);\n }\n };\n\n useEffect(() => {\n if (!targetWindow) return;\n\n const clear = () => setPressActive(false);\n targetWindow.addEventListener(\"pointerup\", clear);\n targetWindow.addEventListener(\"pointercancel\", clear);\n return () => {\n targetWindow.removeEventListener(\"pointerup\", clear);\n targetWindow.removeEventListener(\"pointercancel\", clear);\n };\n }, [targetWindow]);\n\n const { buttonProps, active } = useButton<HTMLButtonElement>({\n disabled: disabledProp,\n onKeyUp: handleKeyUp,\n onKeyDown: handleKeyDown,\n onClick: handleClick,\n onBlur,\n });\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n const {\n tabIndex: _tabIndex,\n disabled: buttonDisabled,\n ...restButtonProps\n } = buttonProps;\n\n const selected =\n !!value &&\n insideSelectableGroup &&\n pillGroupContext.selected.includes(value);\n const disabled = pillGroupContext.disabled || buttonDisabled;\n\n // Prevents selectable pill being active on Enter key press\n const combinedActive = insideSelectableGroup\n ? pressActive || spaceActive\n : pressActive || active;\n\n const groupProps: ComponentPropsWithoutRef<\"button\"> = insideSelectableGroup\n ? {\n \"aria-checked\": selected,\n role: \"checkbox\",\n value,\n }\n : {};\n\n return (\n <button\n data-testid=\"pill\"\n ref={ref}\n className={clsx(\n withBaseName(),\n withBaseName(\"clickable\"),\n { [withBaseName(\"active\")]: combinedActive },\n className,\n )}\n type=\"button\"\n onPointerDown={handlePointerDown}\n disabled={disabled}\n {...restButtonProps}\n {...groupProps}\n {...rest}\n >\n {insideSelectableGroup && (\n <PillCheckIcon checked={selected} active={combinedActive} />\n )}\n {children}\n </button>\n );\n});\n"],"names":["Pill","pillCss"],"mappings":"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"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltPillCheckIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid);\n border-radius: var(--salt-palette-corner-weaker, 0);\n position: relative;\n --saltIcon-size: 100%;\n display: flex;\n pointer-events: none;\n /* Using overflow:hidden here causes a thin white line */\n clip-path: border-box;\n box-sizing: border-box;\n}\n\n.saltPillCheckIcon > svg {\n pointer-events: none;\n position: absolute;\n /* Ensure a gap doesn't appear when device scaling is used */\n transform: scale(1.01);\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=PillCheckIcon.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PillCheckIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { CheckmarkIcon, CheckmarkSolidIcon } from '@salt-ds/icons';
|
|
3
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
+
import { useWindow } from '@salt-ds/window';
|
|
5
|
+
import { clsx } from 'clsx';
|
|
6
|
+
import 'react';
|
|
7
|
+
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
8
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
9
|
+
import '../utils/useId.js';
|
|
10
|
+
import '../salt-provider/SaltProvider.js';
|
|
11
|
+
import '../viewport/ViewportProvider.js';
|
|
12
|
+
import css_248z from './PillCheckIcon.css.js';
|
|
13
|
+
|
|
14
|
+
const withBaseName = makePrefixer("saltPillCheckIcon");
|
|
15
|
+
const PillCheckIcon = ({
|
|
16
|
+
className,
|
|
17
|
+
checked = false,
|
|
18
|
+
disabled = false,
|
|
19
|
+
active = false
|
|
20
|
+
}) => {
|
|
21
|
+
const targetWindow = useWindow();
|
|
22
|
+
useComponentCssInjection({
|
|
23
|
+
testId: "salt-pill-check-icon",
|
|
24
|
+
css: css_248z,
|
|
25
|
+
window: targetWindow
|
|
26
|
+
});
|
|
27
|
+
return /* @__PURE__ */ jsx(
|
|
28
|
+
"div",
|
|
29
|
+
{
|
|
30
|
+
"aria-hidden": "true",
|
|
31
|
+
className: clsx(
|
|
32
|
+
withBaseName(),
|
|
33
|
+
{
|
|
34
|
+
[withBaseName("checked")]: checked,
|
|
35
|
+
[withBaseName("disabled")]: disabled,
|
|
36
|
+
[withBaseName("active")]: active
|
|
37
|
+
},
|
|
38
|
+
className
|
|
39
|
+
),
|
|
40
|
+
children: checked && (active ? /* @__PURE__ */ jsx(CheckmarkIcon, { className: withBaseName("icon") }) : /* @__PURE__ */ jsx(CheckmarkSolidIcon, { className: withBaseName("solidIcon") }))
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export { PillCheckIcon };
|
|
46
|
+
//# sourceMappingURL=PillCheckIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PillCheckIcon.js","sources":["../src/pill/PillCheckIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport pillCheckIcon from \"./PillCheckIcon.css\";\n\nexport interface PillCheckIconProps {\n checked?: boolean;\n className?: string;\n disabled?: boolean;\n active?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltPillCheckIcon\");\n\nexport const PillCheckIcon = ({\n className,\n checked = false,\n disabled = false,\n active = false,\n}: PillCheckIconProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pill-check-icon\",\n css: pillCheckIcon,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden=\"true\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n },\n className,\n )}\n >\n {checked &&\n (active ? (\n <CheckmarkIcon className={withBaseName(\"icon\")} />\n ) : (\n <CheckmarkSolidIcon className={withBaseName(\"solidIcon\")} />\n ))}\n </div>\n );\n};\n"],"names":["pillCheckIcon"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS;AACX,CAAA,KAAuC;AACrC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,sBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,OAAA,KACE,MAAA,mBACC,GAAA,CAAC,aAAA,EAAA,EAAc,WAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA,mBAEhD,GAAA,CAAC,kBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EAAG,CAAA;AAAA;AAAA,GAEhE;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PillGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
3
|
+
import { useWindow } from '@salt-ds/window';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import { forwardRef, useCallback, useMemo } from 'react';
|
|
6
|
+
import '../form-field-context/FormFieldContext.js';
|
|
7
|
+
import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
|
|
8
|
+
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
9
|
+
import { useControlled } from '../utils/useControlled.js';
|
|
10
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
11
|
+
import '../utils/useId.js';
|
|
12
|
+
import '../salt-provider/SaltProvider.js';
|
|
13
|
+
import '../viewport/ViewportProvider.js';
|
|
14
|
+
import css_248z from './PillGroup.css.js';
|
|
15
|
+
import { PillGroupContext } from './PillGroupContext.js';
|
|
16
|
+
|
|
17
|
+
const withBaseName = makePrefixer("saltPillGroup");
|
|
18
|
+
const PillGroup = forwardRef(
|
|
19
|
+
function PillGroup2(props, ref) {
|
|
20
|
+
const {
|
|
21
|
+
"aria-labelledby": ariaLabelledBy,
|
|
22
|
+
"aria-describedby": ariaDescribedBy,
|
|
23
|
+
disabled: disabledProp,
|
|
24
|
+
children,
|
|
25
|
+
selected: selectedProp,
|
|
26
|
+
defaultSelected,
|
|
27
|
+
onSelectionChange,
|
|
28
|
+
className,
|
|
29
|
+
selectionVariant = "none",
|
|
30
|
+
...rest
|
|
31
|
+
} = props;
|
|
32
|
+
const targetWindow = useWindow();
|
|
33
|
+
useComponentCssInjection({
|
|
34
|
+
testId: "salt-pill-group",
|
|
35
|
+
css: css_248z,
|
|
36
|
+
window: targetWindow
|
|
37
|
+
});
|
|
38
|
+
const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } = useFormFieldProps();
|
|
39
|
+
const disabled = formFieldDisabled || disabledProp;
|
|
40
|
+
const [selected, setSelected] = useControlled({
|
|
41
|
+
controlled: selectedProp,
|
|
42
|
+
default: defaultSelected || [],
|
|
43
|
+
name: "PillGroup",
|
|
44
|
+
state: "selected"
|
|
45
|
+
});
|
|
46
|
+
const select = useCallback(
|
|
47
|
+
(event, newValue) => {
|
|
48
|
+
if (disabled) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
const newSelected = selected.includes(newValue) ? selected.filter((item) => item !== newValue) : selected.concat(newValue);
|
|
52
|
+
setSelected(newSelected);
|
|
53
|
+
onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
|
|
54
|
+
},
|
|
55
|
+
[disabled, selected, onSelectionChange]
|
|
56
|
+
);
|
|
57
|
+
const context = useMemo(
|
|
58
|
+
() => ({
|
|
59
|
+
disabled,
|
|
60
|
+
select,
|
|
61
|
+
selected,
|
|
62
|
+
selectionVariant
|
|
63
|
+
}),
|
|
64
|
+
[disabled, select, selected, selectionVariant]
|
|
65
|
+
);
|
|
66
|
+
return /* @__PURE__ */ jsx(PillGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
|
|
67
|
+
"fieldset",
|
|
68
|
+
{
|
|
69
|
+
"aria-labelledby": clsx(formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"], ariaLabelledBy) || void 0,
|
|
70
|
+
"aria-describedby": clsx(formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"], ariaDescribedBy) || void 0,
|
|
71
|
+
className: clsx(withBaseName(), className),
|
|
72
|
+
ref,
|
|
73
|
+
...rest,
|
|
74
|
+
children
|
|
75
|
+
}
|
|
76
|
+
) });
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
|
|
80
|
+
export { PillGroup };
|
|
81
|
+
//# sourceMappingURL=PillGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PillGroup.js","sources":["../src/pill/PillGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type SyntheticEvent,\n useCallback,\n useMemo,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport pillGroupCss from \"./PillGroup.css\";\nimport { PillGroupContext } from \"./PillGroupContext\";\n\ninterface CommonPillGroupProps extends ComponentPropsWithoutRef<\"fieldset\"> {\n /**\n * If `true`, the Pill group will be disabled.\n */\n disabled?: boolean;\n\n /**\n * Selection variant of the Pill group. If \"none\", the Pills will not be selectable. If \"multiple\", pills inside behave like checkboxes.\n */\n selectionVariant?: \"none\" | \"multiple\";\n}\n\ninterface SelectablePillGroupProps extends CommonPillGroupProps {\n selectionVariant: \"multiple\";\n /**\n * The currently selected values.\n */\n selected?: string[];\n /**\n * The default selected values for un-controlled component.\n */\n defaultSelected?: string[];\n /**\n * Callback fired when the selection changes.\n * @param event\n * @param newSelected The new selected values.\n */\n onSelectionChange?: (event: SyntheticEvent, newSelected: string[]) => void;\n}\n\ninterface NonSelectablePillGroupProps extends CommonPillGroupProps {\n selectionVariant?: \"none\";\n}\n\nexport type PillGroupProps =\n | SelectablePillGroupProps\n | NonSelectablePillGroupProps;\n\nconst withBaseName = makePrefixer(\"saltPillGroup\");\n\nexport const PillGroup = forwardRef<HTMLFieldSetElement, PillGroupProps>(\n function PillGroup(props, ref) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n disabled: disabledProp,\n children,\n selected: selectedProp,\n defaultSelected,\n onSelectionChange,\n className,\n selectionVariant = \"none\",\n ...rest\n } = props as SelectablePillGroupProps;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pill-group\",\n css: pillGroupCss,\n window: targetWindow,\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n\n const [selected, setSelected] = useControlled({\n controlled: selectedProp,\n default: defaultSelected || [],\n name: \"PillGroup\",\n state: \"selected\",\n });\n\n const select = useCallback(\n (event: SyntheticEvent, newValue: string) => {\n if (disabled) {\n return;\n }\n\n const newSelected = selected.includes(newValue)\n ? selected.filter((item) => item !== newValue)\n : selected.concat(newValue);\n\n setSelected(newSelected);\n onSelectionChange?.(event, newSelected);\n },\n [disabled, selected, onSelectionChange],\n );\n\n const context = useMemo(\n () =>\n ({\n disabled,\n select,\n selected,\n selectionVariant,\n }) as const,\n [disabled, select, selected, selectionVariant],\n );\n\n return (\n <PillGroupContext.Provider value={context}>\n <fieldset\n aria-labelledby={\n clsx(formFieldA11yProps?.[\"aria-labelledby\"], ariaLabelledBy) ||\n undefined\n }\n aria-describedby={\n clsx(formFieldA11yProps?.[\"aria-describedby\"], ariaDescribedBy) ||\n undefined\n }\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...rest}\n >\n {children}\n </fieldset>\n </PillGroupContext.Provider>\n );\n },\n);\n"],"names":["PillGroup","pillGroupCss"],"mappings":";;;;;;;;;;;;;;;;AAqDA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,SAASA,UAAAA,CAAU,KAAA,EAAO,GAAA,EAAK;AAC7B,IAAA,MAAM;AAAA,MACJ,iBAAA,EAAmB,cAAA;AAAA,MACnB,kBAAA,EAAoB,eAAA;AAAA,MACpB,QAAA,EAAU,YAAA;AAAA,MACV,QAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,eAAA;AAAA,MACA,iBAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA,GAAmB,MAAA;AAAA,MACnB,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAW,kBAAA,EAAoB,QAAA,EAAU,iBAAA,KAC/C,iBAAA,EAAkB;AAEpB,IAAA,MAAM,WAAW,iBAAA,IAAqB,YAAA;AAEtC,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,aAAA,CAAc;AAAA,MAC5C,UAAA,EAAY,YAAA;AAAA,MACZ,OAAA,EAAS,mBAAmB,EAAC;AAAA,MAC7B,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,MAAA,GAAS,WAAA;AAAA,MACb,CAAC,OAAuB,QAAA,KAAqB;AAC3C,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA;AAAA,QACF;AAEA,QAAA,MAAM,WAAA,GAAc,QAAA,CAAS,QAAA,CAAS,QAAQ,IAC1C,QAAA,CAAS,MAAA,CAAO,CAAC,IAAA,KAAS,IAAA,KAAS,QAAQ,CAAA,GAC3C,QAAA,CAAS,OAAO,QAAQ,CAAA;AAE5B,QAAA,WAAA,CAAY,WAAW,CAAA;AACvB,QAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,KAAA,EAAO,WAAA,CAAA;AAAA,MAC7B,CAAA;AAAA,MACA,CAAC,QAAA,EAAU,QAAA,EAAU,iBAAiB;AAAA,KACxC;AAEA,IAAA,MAAM,OAAA,GAAU,OAAA;AAAA,MACd,OACG;AAAA,QACC,QAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACF,CAAC,QAAA,EAAU,MAAA,EAAQ,QAAA,EAAU,gBAAgB;AAAA,KAC/C;AAEA,IAAA,uBACE,GAAA,CAAC,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,OAAO,OAAA,EAChC,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EACE,IAAA,CAAK,kBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA,CAAqB,iBAAA,CAAA,EAAoB,cAAc,CAAA,IAC5D,MAAA;AAAA,QAEF,kBAAA,EACE,IAAA,CAAK,kBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA,CAAqB,kBAAA,CAAA,EAAqB,eAAe,CAAA,IAC9D,MAAA;AAAA,QAEF,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { useContext } from 'react';
|
|
2
|
+
import { createContext } from '../utils/createContext.js';
|
|
3
|
+
import 'clsx';
|
|
4
|
+
import 'react/jsx-runtime';
|
|
5
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
6
|
+
import '../utils/useId.js';
|
|
7
|
+
import '../salt-provider/SaltProvider.js';
|
|
8
|
+
import '../viewport/ViewportProvider.js';
|
|
9
|
+
|
|
10
|
+
const PillGroupContext = createContext(
|
|
11
|
+
"PillGroupContext",
|
|
12
|
+
{
|
|
13
|
+
selected: [],
|
|
14
|
+
select: () => {
|
|
15
|
+
},
|
|
16
|
+
selectionVariant: "none"
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
function usePillGroup() {
|
|
20
|
+
return useContext(PillGroupContext);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export { PillGroupContext, usePillGroup };
|
|
24
|
+
//# sourceMappingURL=PillGroupContext.js.map
|