@salt-ds/core 1.57.0 → 1.58.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 +29 -0
- package/css/salt-core.css +85 -74
- package/dist-cjs/checkbox/Checkbox.js +2 -2
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +10 -3
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +9 -1
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogContext.js +19 -4
- package/dist-cjs/dialog/DialogContext.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js +13 -4
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.css.js +1 -1
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/index.js +2 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.css.js +1 -1
- package/dist-cjs/input/Input.js +2 -2
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/kbd/Kbd.css.js +6 -0
- package/dist-cjs/kbd/Kbd.css.js.map +1 -0
- package/dist-cjs/kbd/Kbd.js +38 -0
- package/dist-cjs/kbd/Kbd.js.map +1 -0
- package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +2 -2
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/number-input/NumberInput.css.js +1 -1
- package/dist-cjs/number-input/NumberInput.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.css.js +1 -1
- package/dist-cjs/pill-input/PillInput.js +2 -2
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/switch/Switch.js +2 -8
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/table/TableContainer.js +10 -4
- package/dist-cjs/table/TableContainer.js.map +1 -1
- package/dist-cjs/utils/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +2 -2
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +10 -3
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +9 -1
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogContext.js +20 -5
- package/dist-es/dialog/DialogContext.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js +14 -5
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/dropdown/Dropdown.css.js +1 -1
- 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/input/Input.css.js +1 -1
- package/dist-es/input/Input.js +2 -2
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/kbd/Kbd.css.js +4 -0
- package/dist-es/kbd/Kbd.css.js.map +1 -0
- package/dist-es/kbd/Kbd.js +36 -0
- package/dist-es/kbd/Kbd.js.map +1 -0
- package/dist-es/menu/MenuBase.js +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.js +2 -2
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/number-input/NumberInput.css.js +1 -1
- package/dist-es/number-input/NumberInput.js.map +1 -1
- package/dist-es/overlay/Overlay.js +1 -1
- package/dist-es/pill-input/PillInput.css.js +1 -1
- package/dist-es/pill-input/PillInput.js +2 -2
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/switch/Switch.js +2 -8
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/table/TableContainer.js +7 -1
- package/dist-es/table/TableContainer.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +1 -1
- package/dist-es/utils/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist-types/dialog/Dialog.d.ts +2 -0
- package/dist-types/dialog/DialogContext.d.ts +8 -7
- package/dist-types/dropdown/Dropdown.d.ts +1 -1
- package/dist-types/index.d.ts +1 -0
- package/dist-types/input/Input.d.ts +1 -1
- package/dist-types/kbd/Kbd.d.ts +8 -0
- package/dist-types/kbd/index.d.ts +1 -0
- package/dist-types/multiline-input/MultilineInput.d.ts +1 -1
- package/dist-types/number-input/NumberInput.d.ts +1 -1
- package/dist-types/pill-input/PillInput.d.ts +1 -1
- package/package.json +1 -1
|
@@ -152,8 +152,8 @@ const MultilineInput = React.forwardRef(
|
|
|
152
152
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("wrapper"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
153
153
|
"textarea",
|
|
154
154
|
{
|
|
155
|
-
"aria-describedby": clsx.clsx(formFieldDescribedBy, textAreaDescribedBy),
|
|
156
|
-
"aria-labelledby": clsx.clsx(formFieldLabelledBy, textAreaLabelledBy),
|
|
155
|
+
"aria-describedby": clsx.clsx(formFieldDescribedBy, textAreaDescribedBy) || void 0,
|
|
156
|
+
"aria-labelledby": clsx.clsx(formFieldLabelledBy, textAreaLabelledBy) || void 0,
|
|
157
157
|
className: clsx.clsx(withBaseName("textarea"), textAreaProps == null ? void 0 : textAreaProps.className),
|
|
158
158
|
disabled: isDisabled,
|
|
159
159
|
id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.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 ReactNode,\n type Ref,\n type TextareaHTMLAttributes,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n type FormFieldValidationStatus,\n useFormFieldProps,\n} from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n useControlled,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"textarea\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The default minimum number of rows. Defaults to 3\n */\n rows?: number;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n */\n textAreaProps?: Partial<TextareaHTMLAttributes<HTMLTextAreaElement>> &\n DataAttributes;\n /**\n * Optional ref for the textarea component\n */\n textAreaRef?: Ref<HTMLTextAreaElement>;\n /**\n * Validation status.\n */\n validationStatus?: FormFieldValidationStatus;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n function MultilineInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n bordered = false,\n className: classNameProp,\n disabled,\n endAdornment,\n id,\n placeholder,\n readOnly,\n role,\n rows = 3,\n startAdornment,\n style,\n textAreaProps = {},\n textAreaRef,\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...other\n },\n ref,\n ) {\n const [inputElement, setInputElement] =\n useState<HTMLTextAreaElement | null>(null);\n const handleInputElement = useCallback(\n (element: HTMLTextAreaElement | null) => {\n setInputElement(element);\n },\n [],\n );\n const handleRef = useForkRef(handleInputElement, textAreaRef);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-multiline-input\",\n css: multilineInputCss,\n window: targetWindow,\n });\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const [focused, setFocused] = useState(false);\n\n const {\n \"aria-describedby\": textAreaDescribedBy,\n \"aria-labelledby\": textAreaLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: textAreaRequired,\n ...restTextAreaProps\n } = textAreaProps;\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 isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : textAreaRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValueProp,\n name: \"MultilineInput\",\n state: \"value\",\n });\n\n const previousHeight = useRef<string | undefined>(undefined);\n\n const changeHeight = useCallback(() => {\n const input = inputElement;\n\n if (!input) return;\n\n const hasBeenManuallyResized =\n previousHeight.current !== undefined &&\n input.style.height !== previousHeight.current;\n if (!hasBeenManuallyResized) {\n const previousOverflow = input.style.overflow;\n input.style.overflow = \"hidden\";\n input.style.height = \"auto\";\n input.scrollHeight; // Needed to work around Firefox bug. https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n const newHeight = `${\n input.scrollHeight + (input.offsetHeight - input.clientHeight)\n }px`;\n input.style.height = newHeight;\n previousHeight.current = newHeight;\n input.style.overflow = previousOverflow;\n }\n }, [inputElement]);\n\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n changeHeight();\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: We want to run this effect when value changes in a controlled component.\n useIsomorphicLayoutEffect(() => {\n changeHeight();\n }, [value, changeHeight]);\n\n const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const multilineInputStyles = {\n \"--saltMultilineInput-rows\": rows,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"withAdornmentRow\")]: endAdornment,\n [withBaseName(\"bordered\")]: bordered,\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n classNameProp,\n )}\n ref={ref}\n style={multilineInputStyles}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <div className={withBaseName(\"wrapper\")}>\n <textarea\n aria-describedby={clsx(formFieldDescribedBy, textAreaDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, textAreaLabelledBy)}\n className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleRef}\n required={isRequired}\n role={role}\n rows={rows}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restTextAreaProps}\n />\n </div>\n <div className={withBaseName(\"suffixAdornments\")}>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n </div>\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MultilineInput","useState","useCallback","useForkRef","useWindow","useComponentCssInjection","multilineInputCss","useFormFieldProps","useControlled","useRef","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.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 ReactNode,\n type Ref,\n type TextareaHTMLAttributes,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n type FormFieldValidationStatus,\n useFormFieldProps,\n} from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n useControlled,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"textarea\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The default minimum number of rows. Defaults to 3\n */\n rows?: number;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n */\n textAreaProps?: Partial<TextareaHTMLAttributes<HTMLTextAreaElement>> &\n DataAttributes;\n /**\n * Optional ref for the textarea component\n */\n textAreaRef?: Ref<HTMLTextAreaElement>;\n /**\n * Validation status.\n */\n validationStatus?: FormFieldValidationStatus;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n function MultilineInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n bordered = false,\n className: classNameProp,\n disabled,\n endAdornment,\n id,\n placeholder,\n readOnly,\n role,\n rows = 3,\n startAdornment,\n style,\n textAreaProps = {},\n textAreaRef,\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...other\n },\n ref,\n ) {\n const [inputElement, setInputElement] =\n useState<HTMLTextAreaElement | null>(null);\n const handleInputElement = useCallback(\n (element: HTMLTextAreaElement | null) => {\n setInputElement(element);\n },\n [],\n );\n const handleRef = useForkRef(handleInputElement, textAreaRef);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-multiline-input\",\n css: multilineInputCss,\n window: targetWindow,\n });\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const [focused, setFocused] = useState(false);\n\n const {\n \"aria-describedby\": textAreaDescribedBy,\n \"aria-labelledby\": textAreaLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: textAreaRequired,\n ...restTextAreaProps\n } = textAreaProps;\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 isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : textAreaRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValueProp,\n name: \"MultilineInput\",\n state: \"value\",\n });\n\n const previousHeight = useRef<string | undefined>(undefined);\n\n const changeHeight = useCallback(() => {\n const input = inputElement;\n\n if (!input) return;\n\n const hasBeenManuallyResized =\n previousHeight.current !== undefined &&\n input.style.height !== previousHeight.current;\n if (!hasBeenManuallyResized) {\n const previousOverflow = input.style.overflow;\n input.style.overflow = \"hidden\";\n input.style.height = \"auto\";\n input.scrollHeight; // Needed to work around Firefox bug. https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n const newHeight = `${\n input.scrollHeight + (input.offsetHeight - input.clientHeight)\n }px`;\n input.style.height = newHeight;\n previousHeight.current = newHeight;\n input.style.overflow = previousOverflow;\n }\n }, [inputElement]);\n\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n changeHeight();\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: We want to run this effect when value changes in a controlled component.\n useIsomorphicLayoutEffect(() => {\n changeHeight();\n }, [value, changeHeight]);\n\n const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const multilineInputStyles = {\n \"--saltMultilineInput-rows\": rows,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"withAdornmentRow\")]: endAdornment,\n [withBaseName(\"bordered\")]: bordered,\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n classNameProp,\n )}\n ref={ref}\n style={multilineInputStyles}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <div className={withBaseName(\"wrapper\")}>\n <textarea\n aria-describedby={\n clsx(formFieldDescribedBy, textAreaDescribedBy) || undefined\n }\n aria-labelledby={\n clsx(formFieldLabelledBy, textAreaLabelledBy) || undefined\n }\n className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleRef}\n required={isRequired}\n role={role}\n rows={rows}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restTextAreaProps}\n />\n </div>\n <div className={withBaseName(\"suffixAdornments\")}>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n </div>\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MultilineInput","useState","useCallback","useForkRef","useWindow","useComponentCssInjection","multilineInputCss","useFormFieldProps","useControlled","useRef","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
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";
|
|
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 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-disabled: var(--salt-editable-primary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n --numberInput-background: var(--salt-editable-secondary-background);\n --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltNumberInput-tertiary {\n --numberInput-background: var(--salt-editable-tertiary-background);\n --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-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-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-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-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
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=NumberInput.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sources":["../src/number-input/NumberInput.tsx"],"sourcesContent":["import {\n useClassNameInjection,\n useComponentCssInjection,\n} 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 {\n type FormFieldValidationStatus,\n useFormFieldProps,\n} from \"../form-field-context\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\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?: FormFieldValidationStatus;\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(props, ref) {\n const { className, props: finalProps } = useClassNameInjection(\n \"saltNumberInput\",\n props,\n );\n const {\n \"aria-valuetext\": ariaValueTextProp,\n bordered,\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 } = finalProps;\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":["makePrefixer","forwardRef","NumberInput","useClassNameInjection","useWindow","useComponentCssInjection","numberInputCss","useFormFieldProps","useId","useRef","useForkRef","useState","useIcon","useControlled","useLongPressPointerAction","useEffect","disableIncrement","disableDecrement","jsxs","clsx","jsx","capitalize","StatusAdornment","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sources":["../src/number-input/NumberInput.tsx"],"sourcesContent":["import {\n useClassNameInjection,\n useComponentCssInjection,\n} 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 {\n type FormFieldValidationStatus,\n useFormFieldProps,\n} from \"../form-field-context\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\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?: FormFieldValidationStatus;\n /**\n * Styling variant.\n * @default \"primary\"\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\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(props, ref) {\n const { className, props: finalProps } = useClassNameInjection(\n \"saltNumberInput\",\n props,\n );\n const {\n \"aria-valuetext\": ariaValueTextProp,\n bordered,\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 } = finalProps;\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":["makePrefixer","forwardRef","NumberInput","useClassNameInjection","useWindow","useComponentCssInjection","numberInputCss","useFormFieldProps","useId","useRef","useForkRef","useState","useIcon","useControlled","useLongPressPointerAction","useEffect","disableIncrement","disableDecrement","jsxs","clsx","jsx","capitalize","StatusAdornment","Button"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n align-items: center;\n background: var(--saltPillInput-background, var(--pillInput-background));\n border-radius: var(--salt-palette-corner-weak, 0);\n color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n min-width: var(--saltPillInput-minWidth, 4em);\n padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.saltPillInput-truncate {\n height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));\n cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n --pillInput-borderWidth: var(--salt-size-fixed-100);\n border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-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(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n --pillInput-background: var(--salt-editable-primary-background);\n --pillInput-background-active: var(--salt-editable-primary-background-active);\n --pillInput-background-hover: var(--salt-editable-primary-background-hover);\n --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --pillInput-background-readonly: var(--salt-editable-primary-background-readonly);\n --pillInput-borderColor: var(--salt-editable-borderColor);\n --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n --pillInput-background: var(--salt-editable-secondary-background);\n --pillInput-background-active: var(--salt-editable-secondary-background-active);\n --pillInput-background-hover: var(--salt-editable-secondary-background-active);\n --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --pillInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n --pillInput-borderColor: var(--salt-editable-borderColor);\n --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n --pillInput-background: var(--salt-status-error-background);\n --pillInput-background-active: var(--salt-status-error-background);\n --pillInput-background-hover: var(--salt-status-error-background);\n --pillInput-background-readonly: var(--salt-status-error-background);\n --pillInput-borderColor: var(--salt-status-error-borderColor);\n --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);\n --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n --pillInput-background: var(--salt-status-warning-background);\n --pillInput-background-active: var(--salt-status-warning-background);\n --pillInput-background-hover: var(--salt-status-warning-background);\n --pillInput-background-readonly: var(--salt-status-warning-background);\n --pillInput-borderColor: var(--salt-status-warning-borderColor);\n --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);\n --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n --pillInput-background: var(--salt-status-success-background);\n --pillInput-background-active: var(--salt-status-success-background);\n --pillInput-background-hover: var(--salt-status-success-background);\n --pillInput-background-readonly: var(--salt-status-success-background);\n --pillInput-borderColor: var(--salt-status-success-borderColor);\n --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n background: var(--saltPillInput-background-active, var(--pillInput-background-active));\n cursor: var(--salt-cursor-text);\n outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n background: var(--pillInput-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n background: var(--pillInput-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-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.saltPillInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-50);\n padding-top: var(--salt-spacing-50);\n column-gap: var(--salt-spacing-100);\n align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n align-self: flex-start;\n display: inline-flex;\n align-items: center;\n height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-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.saltPillInput-inputWrapper {\n display: flex;\n gap: var(--salt-spacing-50);\n align-items: center;\n flex: 1;\n padding: var(--salt-spacing-50) 0;\n flex-wrap: wrap;\n max-height: inherit;\n height: inherit;\n overflow-y: auto;\n box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n display: contents;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-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 height: 100%;\n letter-spacing: var(--saltPillInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--pillInput-textAlign, left);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltPillInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
|
|
3
|
+
var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n align-items: center;\n background: var(--saltPillInput-background, var(--pillInput-background));\n border-radius: var(--salt-palette-corner-weak, 0);\n color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n min-width: var(--saltPillInput-minWidth, 4em);\n padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.saltPillInput-truncate {\n height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n --pillInput-borderWidth: var(--salt-size-fixed-100);\n border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-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(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n --pillInput-background: var(--salt-editable-primary-background);\n --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --pillInput-background-readonly: var(--salt-editable-background-readonly);\n --pillInput-borderColor: var(--salt-editable-borderColor);\n --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n --pillInput-background: var(--salt-editable-secondary-background);\n --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --pillInput-background-readonly: var(--salt-editable-background-readonly);\n --pillInput-borderColor: var(--salt-editable-borderColor);\n --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltPillInput-tertiary {\n --pillInput-background: var(--salt-editable-tertiary-background);\n --pillInput-background-readonly: var(--salt-editable-background-readonly);\n --pillInput-borderColor: var(--salt-editable-borderColor);\n --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n --pillInput-background: var(--salt-status-error-background);\n --pillInput-background-readonly: var(--salt-status-error-background);\n --pillInput-borderColor: var(--salt-status-error-borderColor);\n --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n --pillInput-background: var(--salt-status-warning-background);\n --pillInput-background-readonly: var(--salt-status-warning-background);\n --pillInput-borderColor: var(--salt-status-warning-borderColor);\n --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n --pillInput-background: var(--salt-status-success-background);\n --pillInput-background-readonly: var(--salt-status-success-background);\n --pillInput-borderColor: var(--salt-status-success-borderColor);\n --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n cursor: var(--salt-cursor-text);\n outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n background: var(--pillInput-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n background: var(--pillInput-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-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.saltPillInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-50);\n padding-top: var(--salt-spacing-50);\n column-gap: var(--salt-spacing-100);\n align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n align-self: flex-start;\n display: inline-flex;\n align-items: center;\n height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-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.saltPillInput-inputWrapper {\n display: flex;\n gap: var(--salt-spacing-50);\n align-items: center;\n flex: 1;\n padding: var(--salt-spacing-50) 0;\n flex-wrap: wrap;\n max-height: inherit;\n height: inherit;\n overflow-y: auto;\n box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n display: contents;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-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 height: 100%;\n letter-spacing: var(--saltPillInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--pillInput-textAlign, left);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltPillInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=PillInput.css.js.map
|
|
@@ -243,8 +243,8 @@ const PillInput = React.forwardRef(function PillInput2({
|
|
|
243
243
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
244
244
|
"input",
|
|
245
245
|
{
|
|
246
|
-
"aria-describedby": clsx.clsx(formFieldDescribedBy, inputDescribedBy),
|
|
247
|
-
"aria-labelledby": clsx.clsx(formFieldLabelledBy, inputLabelledBy),
|
|
246
|
+
"aria-describedby": clsx.clsx(formFieldDescribedBy, inputDescribedBy) || void 0,
|
|
247
|
+
"aria-labelledby": clsx.clsx(formFieldLabelledBy, inputLabelledBy) || void 0,
|
|
248
248
|
autoComplete: "off",
|
|
249
249
|
className: clsx.clsx(withBaseName("input"), inputProps == null ? void 0 : inputProps.className),
|
|
250
250
|
disabled: isDisabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.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 type ForwardedRef,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useRef,\n useState,\n} from \"react\";\nimport {\n type FormFieldValidationStatus,\n useFormFieldProps,\n} from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport pillInputCss from \"./PillInput.css\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The tokens to display in the input.\n */\n pills?: string[];\n onPillRemove?: (event: SyntheticEvent, index: number) => void;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Alignment of text within container. Defaults to \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: FormFieldValidationStatus;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n hidePillClose?: boolean;\n truncate?: boolean;\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n hidePillClose,\n id: idProp,\n inputProps = {},\n inputRef: inputRefProp,\n placeholder,\n pills = [],\n onPillRemove,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n truncate,\n bordered = false,\n ...other\n }: PillInputProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n const { OverflowIcon, CloseIcon } = useIcon();\n useComponentCssInjection({\n testId: \"salt-pill-input\",\n css: pillInputCss,\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 restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onBlur,\n onFocus,\n onChange,\n required: inputPropsRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const { visiblePills, pillListRef } = useTruncatePills({\n pills,\n enable: truncate && pills.length > 0,\n });\n\n const id = useId(idProp);\n const pillListId = `${id}-optionsList`;\n\n const pillElementsRef = useRef<HTMLElement[]>([]);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const target = event.currentTarget;\n if (target.selectionStart === 0 && target.selectionEnd === 0) {\n const lastPillIndex = pills.length - 1;\n const lastPill = pills[lastPillIndex];\n if (event.key === \"Backspace\" && lastPill) {\n event.preventDefault();\n onPillRemove?.(event, lastPillIndex);\n } else if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to last pill\n pillElementsRef.current[lastPillIndex]?.focus();\n }\n }\n\n inputOnKeyDown?.(event);\n };\n\n const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to previous pill\n pillElementsRef.current[index - 1]?.focus();\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n // Move focus to next pill or input\n if (index === pills.length - 1) {\n inputRef?.current?.focus();\n } else {\n pillElementsRef.current[index + 1]?.focus();\n }\n } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n event.preventDefault();\n onPillRemove?.(event, index);\n\n if (pills.length === 1) {\n inputRef.current?.focus();\n } else if (index === pills.length - 1) {\n pillElementsRef.current[pills.length - 2]?.focus();\n } else {\n pillElementsRef.current[index]?.focus();\n }\n }\n };\n\n const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (!hidePillClose) {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n onPillRemove?.(event, index);\n }\n inputRef.current?.focus();\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"truncate\")]: truncate,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n classNameProp,\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n <div\n role=\"list\"\n className={withBaseName(\"pillList\")}\n aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n aria-label=\"Selected Options\"\n id={pillListId}\n >\n {visiblePills?.map((pill, index) => (\n <div role=\"listitem\" key={pill}>\n <Pill\n data-index={index}\n disabled={disabled}\n aria-label={hidePillClose ? pill : `Remove ${pill}`}\n ref={(element) => {\n if (element) {\n pillElementsRef.current[index] = element;\n } else {\n pillElementsRef.current = pillElementsRef.current.filter(\n (pillEl) => pillEl !== element,\n );\n }\n }}\n onFocus={() => setFocusedPillIndex(index)}\n onKeyDown={handlePillKeyDown}\n onClick={handlePillClick}\n tabIndex={\n focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n }\n >\n {pill}\n {!hidePillClose && <CloseIcon aria-hidden />}\n </Pill>\n </div>\n ))}\n {visiblePills.length < pills.length && (\n <div role=\"listitem\">\n <div\n data-overflowindicator\n className={withBaseName(\"overflowIndicator\")}\n >\n <OverflowIcon aria-hidden />\n </div>\n </div>\n )}\n </div>\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n autoComplete=\"off\"\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleInputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n required={isRequired}\n />\n </div>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","PillInput","useWindow","useIcon","useComponentCssInjection","pillInputCss","useFormFieldProps","useState","useControlled","useTruncatePills","useId","useRef","useForkRef","value","jsxs","clsx","jsx","Pill","StatusAdornment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.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 type ForwardedRef,\n forwardRef,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type Ref,\n type SyntheticEvent,\n useRef,\n useState,\n} from \"react\";\nimport {\n type FormFieldValidationStatus,\n useFormFieldProps,\n} from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport pillInputCss from \"./PillInput.css\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The tokens to display in the input.\n */\n pills?: string[];\n onPillRemove?: (event: SyntheticEvent, index: number) => void;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Alignment of text within container. Defaults to \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: FormFieldValidationStatus;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n hidePillClose?: boolean;\n truncate?: boolean;\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n}\n\nexport const PillInput = forwardRef(function PillInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n hidePillClose,\n id: idProp,\n inputProps = {},\n inputRef: inputRefProp,\n placeholder,\n pills = [],\n onPillRemove,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n truncate,\n bordered = false,\n ...other\n }: PillInputProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n const { OverflowIcon, CloseIcon } = useIcon();\n useComponentCssInjection({\n testId: \"salt-pill-input\",\n css: pillInputCss,\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 restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onBlur,\n onFocus,\n onChange,\n required: inputPropsRequired,\n onKeyDown: inputOnKeyDown,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const { visiblePills, pillListRef } = useTruncatePills({\n pills,\n enable: truncate && pills.length > 0,\n });\n\n const id = useId(idProp);\n const pillListId = `${id}-optionsList`;\n\n const pillElementsRef = useRef<HTMLElement[]>([]);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const target = event.currentTarget;\n if (target.selectionStart === 0 && target.selectionEnd === 0) {\n const lastPillIndex = pills.length - 1;\n const lastPill = pills[lastPillIndex];\n if (event.key === \"Backspace\" && lastPill) {\n event.preventDefault();\n onPillRemove?.(event, lastPillIndex);\n } else if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to last pill\n pillElementsRef.current[lastPillIndex]?.focus();\n }\n }\n\n inputOnKeyDown?.(event);\n };\n\n const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n if (event.key === \"ArrowLeft\") {\n event.preventDefault();\n // Move focus to previous pill\n pillElementsRef.current[index - 1]?.focus();\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault();\n // Move focus to next pill or input\n if (index === pills.length - 1) {\n inputRef?.current?.focus();\n } else {\n pillElementsRef.current[index + 1]?.focus();\n }\n } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n event.preventDefault();\n onPillRemove?.(event, index);\n\n if (pills.length === 1) {\n inputRef.current?.focus();\n } else if (index === pills.length - 1) {\n pillElementsRef.current[pills.length - 2]?.focus();\n } else {\n pillElementsRef.current[index]?.focus();\n }\n }\n };\n\n const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (!hidePillClose) {\n const target = event.currentTarget;\n const index = Number(target.dataset.index);\n onPillRemove?.(event, index);\n }\n inputRef.current?.focus();\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(\"truncate\")]: truncate,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n classNameProp,\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n <div\n role=\"list\"\n className={withBaseName(\"pillList\")}\n aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n aria-label=\"Selected Options\"\n id={pillListId}\n >\n {visiblePills?.map((pill, index) => (\n <div role=\"listitem\" key={pill}>\n <Pill\n data-index={index}\n disabled={disabled}\n aria-label={hidePillClose ? pill : `Remove ${pill}`}\n ref={(element) => {\n if (element) {\n pillElementsRef.current[index] = element;\n } else {\n pillElementsRef.current = pillElementsRef.current.filter(\n (pillEl) => pillEl !== element,\n );\n }\n }}\n onFocus={() => setFocusedPillIndex(index)}\n onKeyDown={handlePillKeyDown}\n onClick={handlePillClick}\n tabIndex={\n focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n }\n >\n {pill}\n {!hidePillClose && <CloseIcon aria-hidden />}\n </Pill>\n </div>\n ))}\n {visiblePills.length < pills.length && (\n <div role=\"listitem\">\n <div\n data-overflowindicator\n className={withBaseName(\"overflowIndicator\")}\n >\n <OverflowIcon aria-hidden />\n </div>\n </div>\n )}\n </div>\n <input\n aria-describedby={\n clsx(formFieldDescribedBy, inputDescribedBy) || undefined\n }\n aria-labelledby={\n clsx(formFieldLabelledBy, inputLabelledBy) || undefined\n }\n autoComplete=\"off\"\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleInputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n required={isRequired}\n />\n </div>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","PillInput","useWindow","useIcon","useComponentCssInjection","pillInputCss","useFormFieldProps","useState","useControlled","useTruncatePills","useId","useRef","useForkRef","value","jsxs","clsx","jsx","Pill","StatusAdornment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAyD1C,MAAM,SAAA,GAAYC,gBAAA,CAAW,SAASC,UAAAA,CAC3C;AAAA,EACE,uBAAA,EAAyB,oBAAA;AAAA,EACzB,eAAA,EAAiB,YAAA;AAAA,EACjB,WAAA,EAAa,QAAA;AAAA,EACb,SAAA,EAAW,aAAA;AAAA,EACX,QAAA;AAAA,EACA,mBAAA,GAAsB,QAAA;AAAA,EACtB,YAAA;AAAA,EACA,aAAA;AAAA,EACA,EAAA,EAAI,MAAA;AAAA,EACJ,aAAa,EAAC;AAAA,EACd,QAAA,EAAU,YAAA;AAAA,EACV,WAAA;AAAA,EACA,QAAQ,EAAC;AAAA,EACT,YAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,IAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,MAAA;AAAA,EACZ,KAAA,EAAO,SAAA;AAAA,EACP,YAAA,EAAc,gBAAA,GAAmB,SAAA,KAAc,MAAA,GAAY,EAAA,GAAK,MAAA;AAAA,EAChE,gBAAA,EAAkB,oBAAA;AAAA,EAClB,OAAA,GAAU,SAAA;AAAA,EACV,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAA,MAAM,EAAE,YAAA,EAAc,SAAA,EAAU,GAAIC,4BAAA,EAAQ;AAC5C,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,iBAAA;AAAA,IACR,GAAA,EAAKC,WAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM;AAAA,IACJ,SAAA,EAAW;AAAA,MACT,kBAAA,EAAoB,oBAAA;AAAA,MACpB,iBAAA,EAAmB;AAAA,QACjB,EAAC;AAAA,IACL,QAAA,EAAU,iBAAA;AAAA,IACV,QAAA,EAAU,iBAAA;AAAA,IACV,SAAA,EAAW,iBAAA;AAAA,IACX,gBAAA,EAAkB;AAAA,MAChBC,mCAAA,EAAkB;AAEtB,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,uBAAA,EAAyB,oBAAA;AAAA,IACzB,eAAA,EAAiB,YAAA;AAAA,IACjB,WAAA,EAAa;AAAA,GACf;AAEA,EAAA,MAAM,aAAa,QAAA,IAAY,iBAAA;AAC/B,EAAA,MAAM,aAAa,YAAA,IAAgB,iBAAA;AACnC,EAAA,MAAM,mBAAmB,yBAAA,IAA6B,oBAAA;AAEtD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIA,eAAS,EAAE,CAAA;AAE3D,EAAA,MAAM,eAAA,GAAkB,UAAA,IAAc,CAAC,gBAAA,IAAoB,CAAC,SAAA;AAC5D,EAAA,MAAM,YAAA,GAAe,kBAAkB,mBAAA,GAAsB,gBAAA;AAE7D,EAAA,MAAM;AAAA,IACJ,kBAAA,EAAoB,gBAAA;AAAA,IACpB,iBAAA,EAAmB,eAAA;AAAA,IACnB,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA,EAAU,kBAAA;AAAA,IACV,SAAA,EAAW,cAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,UAAA;AAEJ,EAAA,MAAM,UAAA,GAAa,oBACf,CAAC,UAAA,EAAY,UAAU,CAAA,CAAE,QAAA,CAAS,iBAAiB,CAAA,GACnD,kBAAA;AAEJ,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,2BAAA,CAAc;AAAA,IACtC,UAAA,EAAY,SAAA;AAAA,IACZ,OAAA,EAAS,YAAA;AAAA,IACT,IAAA,EAAM,OAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,WAAA,EAAY,GAAIC,iCAAA,CAAiB;AAAA,IACrD,KAAA;AAAA,IACA,MAAA,EAAQ,QAAA,IAAY,KAAA,CAAM,MAAA,GAAS;AAAA,GACpC,CAAA;AAED,EAAA,MAAM,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,EAAA,MAAM,UAAA,GAAa,GAAG,EAAE,CAAA,YAAA,CAAA;AAExB,EAAA,MAAM,eAAA,GAAkBC,YAAA,CAAsB,EAAE,CAAA;AAChD,EAAA,MAAM,QAAA,GAAWA,aAAyB,IAAI,CAAA;AAE9C,EAAA,MAAM,cAAA,GAAiBC,qBAAA,CAAW,QAAA,EAAU,YAAY,CAAA;AAExD,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAyC;AAC7D,IAAA,MAAMC,MAAAA,GAAQ,MAAM,MAAA,CAAO,KAAA;AAC3B,IAAA,QAAA,CAASA,MAAK,CAAA;AACd,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA2C;AAlMpE,IAAA,IAAA,EAAA;AAmMI,IAAA,MAAM,SAAS,KAAA,CAAM,aAAA;AACrB,IAAA,IAAI,MAAA,CAAO,cAAA,KAAmB,CAAA,IAAK,MAAA,CAAO,iBAAiB,CAAA,EAAG;AAC5D,MAAA,MAAM,aAAA,GAAgB,MAAM,MAAA,GAAS,CAAA;AACrC,MAAA,MAAM,QAAA,GAAW,MAAM,aAAa,CAAA;AACpC,MAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,WAAA,IAAe,QAAA,EAAU;AACzC,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,KAAA,EAAO,aAAA,CAAA;AAAA,MACxB,CAAA,MAAA,IAAW,KAAA,CAAM,GAAA,KAAQ,WAAA,EAAa;AACpC,QAAA,KAAA,CAAM,cAAA,EAAe;AAErB,QAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAA,CAAQ,aAAa,CAAA,KAArC,IAAA,GAAA,MAAA,GAAA,EAAA,CAAwC,KAAA,EAAA;AAAA,MAC1C;AAAA,IACF;AAEA,IAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAiB,KAAA,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAA4C;AApNzE,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAqNI,IAAA,MAAM,SAAS,KAAA,CAAM,aAAA;AACrB,IAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA;AACzC,IAAA,IAAI,KAAA,CAAM,QAAQ,WAAA,EAAa;AAC7B,MAAA,KAAA,CAAM,cAAA,EAAe;AAErB,MAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAA,CAAQ,KAAA,GAAQ,CAAC,CAAA,KAAjC,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoC,KAAA,EAAA;AAAA,IACtC,CAAA,MAAA,IAAW,KAAA,CAAM,GAAA,KAAQ,YAAA,EAAc;AACrC,MAAA,KAAA,CAAM,cAAA,EAAe;AAErB,MAAA,IAAI,KAAA,KAAU,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG;AAC9B,QAAA,CAAA,EAAA,GAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,YAAV,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmB,KAAA,EAAA;AAAA,MACrB,CAAA,MAAO;AACL,QAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAA,CAAQ,KAAA,GAAQ,CAAC,CAAA,KAAjC,IAAA,GAAA,MAAA,GAAA,EAAA,CAAoC,KAAA,EAAA;AAAA,MACtC;AAAA,IACF,WAAW,KAAA,CAAM,GAAA,KAAQ,QAAA,IAAY,KAAA,CAAM,QAAQ,WAAA,EAAa;AAC9D,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,KAAA,EAAO,KAAA,CAAA;AAEtB,MAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,QAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,KAAA,EAAA;AAAA,MACpB,CAAA,MAAA,IAAW,KAAA,KAAU,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG;AACrC,QAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAA,CAAQ,KAAA,CAAM,MAAA,GAAS,CAAC,MAAxC,IAAA,GAAA,MAAA,GAAA,EAAA,CAA2C,KAAA,EAAA;AAAA,MAC7C,CAAA,MAAO;AACL,QAAA,CAAA,EAAA,GAAA,eAAA,CAAgB,OAAA,CAAQ,KAAK,CAAA,KAA7B,IAAA,GAAA,MAAA,GAAA,EAAA,CAAgC,KAAA,EAAA;AAAA,MAClC;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAyC;AAjPpE,IAAA,IAAA,EAAA;AAkPI,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA,MAAM,SAAS,KAAA,CAAM,aAAA;AACrB,MAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA;AACzC,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,KAAA,EAAO,KAAA,CAAA;AAAA,IACxB;AACA,IAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,KAAA,EAAA;AAAA,EACpB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAwC;AAC1D,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA;AACT,IAAA,UAAA,CAAW,KAAK,CAAA;AAAA,EAClB,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwC;AAC3D,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,mBAAA,EAAqB,SAAA;AAAA,IACrB,GAAG;AAAA,GACL;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,CAAC,UAAA,IAAc,OAAA;AAAA,UAC1C,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAA,EAAO,UAAA;AAAA,MACN,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,cAAA,mCACE,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,yBAAyB,GACnD,QAAA,EAAA,cAAA,EACH,CAAA;AAAA,wCAED,KAAA,EAAA,EAAI,SAAA,EAAW,aAAa,cAAc,CAAA,EAAG,KAAK,WAAA,EACjD,QAAA,EAAA;AAAA,0BAAAD,eAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,MAAA;AAAA,cACL,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cAClC,iBAAA,EAAiBC,SAAA,CAAK,mBAAA,EAAqB,UAAU,CAAA;AAAA,cACrD,YAAA,EAAW,kBAAA;AAAA,cACX,EAAA,EAAI,UAAA;AAAA,cAEH,QAAA,EAAA;AAAA,gBAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,IAAI,CAAC,IAAA,EAAM,0BACxBC,cAAA,CAAC,KAAA,EAAA,EAAI,MAAK,UAAA,EACR,QAAA,kBAAAF,eAAA;AAAA,kBAACG,SAAA;AAAA,kBAAA;AAAA,oBACC,YAAA,EAAY,KAAA;AAAA,oBACZ,QAAA;AAAA,oBACA,YAAA,EAAY,aAAA,GAAgB,IAAA,GAAO,CAAA,OAAA,EAAU,IAAI,CAAA,CAAA;AAAA,oBACjD,GAAA,EAAK,CAAC,OAAA,KAAY;AAChB,sBAAA,IAAI,OAAA,EAAS;AACX,wBAAA,eAAA,CAAgB,OAAA,CAAQ,KAAK,CAAA,GAAI,OAAA;AAAA,sBACnC,CAAA,MAAO;AACL,wBAAA,eAAA,CAAgB,OAAA,GAAU,gBAAgB,OAAA,CAAQ,MAAA;AAAA,0BAChD,CAAC,WAAW,MAAA,KAAW;AAAA,yBACzB;AAAA,sBACF;AAAA,oBACF,CAAA;AAAA,oBACA,OAAA,EAAS,MAAM,mBAAA,CAAoB,KAAK,CAAA;AAAA,oBACxC,SAAA,EAAW,iBAAA;AAAA,oBACX,OAAA,EAAS,eAAA;AAAA,oBACT,QAAA,EACE,gBAAA,KAAqB,EAAA,IAAM,gBAAA,KAAqB,QAAQ,CAAA,GAAI,EAAA;AAAA,oBAG7D,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,sBACA,CAAC,aAAA,oBAAiBD,cAAA,CAAC,SAAA,EAAA,EAAU,eAAW,IAAA,EAAC;AAAA;AAAA;AAAA,qBAtBpB,IAwB1B,CAAA,CAAA;AAAA,gBAED,aAAa,MAAA,GAAS,KAAA,CAAM,0BAC3BA,cAAA,CAAC,KAAA,EAAA,EAAI,MAAK,UAAA,EACR,QAAA,kBAAAA,cAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,wBAAA,EAAsB,IAAA;AAAA,oBACtB,SAAA,EAAW,aAAa,mBAAmB,CAAA;AAAA,oBAE3C,QAAA,kBAAAA,cAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,iBAC5B,EACF;AAAA;AAAA;AAAA,WAEJ;AAAA,0BACAA,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,kBAAA,EACED,SAAA,CAAK,oBAAA,EAAsB,gBAAgB,CAAA,IAAK,MAAA;AAAA,cAElD,iBAAA,EACEA,SAAA,CAAK,mBAAA,EAAqB,eAAe,CAAA,IAAK,MAAA;AAAA,cAEhD,YAAA,EAAa,KAAA;AAAA,cACb,WAAWA,SAAA,CAAK,YAAA,CAAa,OAAO,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,cAC5D,QAAA,EAAU,UAAA;AAAA,cACV,EAAA;AAAA,cACA,QAAA,EAAU,UAAA;AAAA,cACV,GAAA,EAAK,cAAA;AAAA,cACL,IAAA;AAAA,cACA,QAAA,EAAU,aAAa,EAAA,GAAK,CAAA;AAAA,cAC5B,MAAA,EAAQ,UAAA;AAAA,cACR,QAAA,EAAU,YAAA;AAAA,cACV,OAAA,EAAS,CAAC,UAAA,GAAa,WAAA,GAAc,MAAA;AAAA,cACrC,SAAA,EAAW,aAAA;AAAA,cACX,WAAA;AAAA,cACA,KAAA;AAAA,cACC,GAAG,aAAA;AAAA,cACH,GAAG,cAAA;AAAA,cACJ,QAAA,EAAU;AAAA;AAAA;AACZ,SAAA,EACF,CAAA;AAAA,QACC,CAAC,UAAA,IAAc,gBAAA,oBACdC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,0BAA0B,CAAA,EACrD,QAAA,kBAAAA,cAAA,CAACE,+BAAA,EAAA,EAAgB,MAAA,EAAQ,kBAAkB,CAAA,EAC7C,CAAA;AAAA,QAED,gCACCF,cAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,uBAAuB,GACjD,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,wBAEFA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,qBAAqB,CAAA,EAAG;AAAA;AAAA;AAAA,GACvD;AAEJ,CAAC;;;;"}
|
|
@@ -88,14 +88,8 @@ const Switch = React.forwardRef(
|
|
|
88
88
|
"input",
|
|
89
89
|
{
|
|
90
90
|
"aria-readonly": readOnly || void 0,
|
|
91
|
-
"aria-describedby": clsx.clsx(
|
|
92
|
-
|
|
93
|
-
inputDescribedBy
|
|
94
|
-
),
|
|
95
|
-
"aria-labelledby": clsx.clsx(
|
|
96
|
-
formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"],
|
|
97
|
-
inputLabelledBy
|
|
98
|
-
),
|
|
91
|
+
"aria-describedby": clsx.clsx(formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"], inputDescribedBy) || void 0,
|
|
92
|
+
"aria-labelledby": clsx.clsx(formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"], inputLabelledBy) || void 0,
|
|
99
93
|
name,
|
|
100
94
|
value,
|
|
101
95
|
checked,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.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 {\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the switch will be checked.\n */\n checked?: boolean;\n /**\n * Whether the switch component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the switch will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n /**\n * The label to be shown next to the switch.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when switch loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when switch gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the switch.\n */\n value?: string;\n /**\n * If `true`, the switch will be read-only.\n */\n readOnly?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n function Switch(props, ref) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n readOnly: readOnlyProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const readOnly = formFieldReadOnly || readOnlyProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented || readOnly) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-readonly={readOnly || undefined}\n aria-describedby={
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.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 {\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the switch will be checked.\n */\n checked?: boolean;\n /**\n * Whether the switch component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the switch will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n /**\n * The label to be shown next to the switch.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when switch loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when switch gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the switch.\n */\n value?: string;\n /**\n * If `true`, the switch will be read-only.\n */\n readOnly?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n function Switch(props, ref) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n readOnly: readOnlyProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const readOnly = formFieldReadOnly || readOnlyProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented || readOnly) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-readonly={readOnly || undefined}\n aria-describedby={\n clsx(formFieldA11yProps?.[\"aria-describedby\"], inputDescribedBy) ||\n undefined\n }\n aria-labelledby={\n clsx(formFieldA11yProps?.[\"aria-labelledby\"], inputLabelledBy) ||\n undefined\n }\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n // biome-ignore lint/a11y/useAriaPropsForRole: aria-checked is not needed when input and checked is used.\n role=\"switch\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && !readOnly && (\n <CheckmarkSolidIcon\n aria-hidden\n className={withBaseName(\"icon\")}\n />\n )}\n {checked && readOnly && (\n <CheckmarkIcon aria-hidden className={withBaseName(\"icon\")} />\n )}\n </span>\n </span>\n {label && <span className={withBaseName(\"label\")}>{label}</span>}\n </label>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Switch","useWindow","useComponentCssInjection","switchCss","useControlled","useFormFieldProps","value","jsxs","clsx","jsx","CheckmarkSolidIcon","CheckmarkIcon"],"mappings":"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"}
|