@salt-ds/core 1.13.4 → 1.14.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/css/salt-core.css +47 -1
- package/dist-cjs/checkbox/Checkbox.js +8 -8
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +6 -3
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +11 -5
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/checkbox/internal/useCheckboxGroup.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/index.js +2 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/pill/Pill.css.js +6 -0
- package/dist-cjs/pill/Pill.css.js.map +1 -0
- package/dist-cjs/pill/Pill.js +64 -0
- package/dist-cjs/pill/Pill.js.map +1 -0
- package/dist-cjs/radio-button/RadioButton.js +11 -11
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +6 -3
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +1 -4
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/switch/Switch.js +1 -1
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +8 -8
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +6 -3
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +11 -5
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/checkbox/internal/useCheckboxGroup.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/index.js +1 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/pill/Pill.css.js +4 -0
- package/dist-es/pill/Pill.css.js.map +1 -0
- package/dist-es/pill/Pill.js +56 -0
- package/dist-es/pill/Pill.js.map +1 -0
- package/dist-es/radio-button/RadioButton.js +11 -11
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +6 -3
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +1 -4
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/switch/Switch.js +1 -1
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/tooltip/Tooltip.js +1 -1
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-types/checkbox/internal/CheckboxGroupContext.d.ts +1 -3
- package/dist-types/checkbox/internal/useCheckboxGroup.d.ts +1 -2
- package/dist-types/form-field-context/FormFieldContext.d.ts +1 -2
- package/dist-types/index.d.ts +1 -0
- package/dist-types/pill/Pill.d.ts +4 -0
- package/dist-types/pill/index.d.ts +1 -0
- package/dist-types/radio-button/internal/RadioGroupContext.d.ts +1 -3
- package/dist-types/radio-button/internal/useRadioGroup.d.ts +1 -1
- package/dist-types/toggle-button/ToggleButton.d.ts +3 -3
- package/package.json +1 -1
package/css/salt-core.css
CHANGED
|
@@ -1278,6 +1278,52 @@ a:link .saltInteractableCard * {
|
|
|
1278
1278
|
line-height: var(--salt-text-lineHeight);
|
|
1279
1279
|
}
|
|
1280
1280
|
|
|
1281
|
+
/* src/pill/Pill.css */
|
|
1282
|
+
.saltPill {
|
|
1283
|
+
appearance: none;
|
|
1284
|
+
display: inline-flex;
|
|
1285
|
+
align-items: center;
|
|
1286
|
+
background: var(--saltPill-background, var(--salt-actionable-primary-background));
|
|
1287
|
+
border-radius: 0;
|
|
1288
|
+
border: 0;
|
|
1289
|
+
height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
1290
|
+
min-height: var(--salt-text-minHeight);
|
|
1291
|
+
outline: 0;
|
|
1292
|
+
position: relative;
|
|
1293
|
+
gap: var(--salt-spacing-50);
|
|
1294
|
+
padding-left: var(--salt-spacing-50);
|
|
1295
|
+
padding-right: var(--salt-spacing-50);
|
|
1296
|
+
color: var(--saltPill-color, var(--salt-actionable-primary-foreground));
|
|
1297
|
+
font-family: var(--salt-text-fontFamily);
|
|
1298
|
+
font-size: var(--salt-text-fontSize);
|
|
1299
|
+
font-weight: var(--salt-text-fontWeight);
|
|
1300
|
+
line-height: var(--salt-text-lineHeight);
|
|
1301
|
+
overflow: hidden;
|
|
1302
|
+
white-space: nowrap;
|
|
1303
|
+
}
|
|
1304
|
+
.saltPill-clickable {
|
|
1305
|
+
cursor: var(--salt-selectable-cursor-hover);
|
|
1306
|
+
}
|
|
1307
|
+
.saltPill-clickable:hover,
|
|
1308
|
+
.saltPill-clickable:focus-visible {
|
|
1309
|
+
color: var(--salt-actionable-primary-foreground-hover);
|
|
1310
|
+
background: var(--salt-actionable-primary-background-hover);
|
|
1311
|
+
}
|
|
1312
|
+
.saltPill-clickable.saltPill-active,
|
|
1313
|
+
.saltPill-clickable:active {
|
|
1314
|
+
background: var(--salt-actionable-primary-background-active);
|
|
1315
|
+
color: var(--salt-actionable-primary-foreground-active);
|
|
1316
|
+
}
|
|
1317
|
+
.saltPill:focus-visible {
|
|
1318
|
+
outline: var(--salt-focused-outline);
|
|
1319
|
+
}
|
|
1320
|
+
.saltPill:disabled,
|
|
1321
|
+
.saltPill:disabled:hover {
|
|
1322
|
+
color: var(--salt-actionable-primary-foreground-disabled);
|
|
1323
|
+
background: var(--salt-actionable-primary-background-disabled);
|
|
1324
|
+
cursor: var(--salt-selectable-cursor-disabled);
|
|
1325
|
+
}
|
|
1326
|
+
|
|
1281
1327
|
/* src/radio-button/RadioButton.css */
|
|
1282
1328
|
.saltRadioButton {
|
|
1283
1329
|
display: flex;
|
|
@@ -1964,4 +2010,4 @@ label.saltText small,
|
|
|
1964
2010
|
--tooltip-status-borderColor: var(--salt-status-success-borderColor);
|
|
1965
2011
|
}
|
|
1966
2012
|
|
|
1967
|
-
/* src/
|
|
2013
|
+
/* src/db34249f-f078-49b5-82e2-7cf5b355cc79.css */
|
|
@@ -39,7 +39,7 @@ const Checkbox = React.forwardRef(
|
|
|
39
39
|
readOnly: readOnlyProp,
|
|
40
40
|
...rest
|
|
41
41
|
}, ref) {
|
|
42
|
-
var _a, _b
|
|
42
|
+
var _a, _b;
|
|
43
43
|
const targetWindow = window.useWindow();
|
|
44
44
|
styles.useComponentCssInjection({
|
|
45
45
|
testId: "salt-checkbox",
|
|
@@ -54,7 +54,7 @@ const Checkbox = React.forwardRef(
|
|
|
54
54
|
onChange: inputOnChange,
|
|
55
55
|
...restInputProps
|
|
56
56
|
} = inputProps;
|
|
57
|
-
const checkboxGroupChecked =
|
|
57
|
+
const checkboxGroupChecked = (checkboxGroup == null ? void 0 : checkboxGroup.checkedValues) != null && value != null ? checkboxGroup.checkedValues.includes(value) : checkedProp;
|
|
58
58
|
const [checked, setChecked] = useControlled.useControlled({
|
|
59
59
|
controlled: checkboxGroupChecked,
|
|
60
60
|
default: Boolean(defaultChecked),
|
|
@@ -67,9 +67,9 @@ const Checkbox = React.forwardRef(
|
|
|
67
67
|
readOnly: formFieldReadOnly,
|
|
68
68
|
validationStatus: formFieldValidationStatus
|
|
69
69
|
} = useFormFieldProps.useFormFieldProps();
|
|
70
|
-
const disabled = (
|
|
71
|
-
const readOnly = (
|
|
72
|
-
const validationStatus = !disabled ? (
|
|
70
|
+
const disabled = (checkboxGroup == null ? void 0 : checkboxGroup.disabled) || formFieldDisabled || disabledProp;
|
|
71
|
+
const readOnly = (checkboxGroup == null ? void 0 : checkboxGroup.readOnly) || formFieldReadOnly || readOnlyProp;
|
|
72
|
+
const validationStatus = !disabled ? (_b = (_a = checkboxGroup == null ? void 0 : checkboxGroup.validationStatus) != null ? _a : formFieldValidationStatus) != null ? _b : validationStatusProp : void 0;
|
|
73
73
|
const handleChange = (event) => {
|
|
74
74
|
var _a2;
|
|
75
75
|
if (event.nativeEvent.defaultPrevented || readOnly) {
|
|
@@ -79,7 +79,7 @@ const Checkbox = React.forwardRef(
|
|
|
79
79
|
setChecked(value2);
|
|
80
80
|
onChange == null ? void 0 : onChange(event);
|
|
81
81
|
inputOnChange == null ? void 0 : inputOnChange(event);
|
|
82
|
-
(_a2 = checkboxGroup.onChange) == null ? void 0 : _a2.call(checkboxGroup, event);
|
|
82
|
+
(_a2 = checkboxGroup == null ? void 0 : checkboxGroup.onChange) == null ? void 0 : _a2.call(checkboxGroup, event);
|
|
83
83
|
};
|
|
84
84
|
return /* @__PURE__ */ jsxRuntime.jsxs("label", {
|
|
85
85
|
className: clsx.clsx(
|
|
@@ -98,11 +98,11 @@ const Checkbox = React.forwardRef(
|
|
|
98
98
|
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
99
99
|
"aria-checked": indeterminate ? "mixed" : void 0,
|
|
100
100
|
"aria-describedby": clsx.clsx(
|
|
101
|
-
|
|
101
|
+
checkboxGroup === void 0 ? formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"] : void 0,
|
|
102
102
|
inputDescribedBy
|
|
103
103
|
),
|
|
104
104
|
"aria-labelledby": clsx.clsx(
|
|
105
|
-
|
|
105
|
+
checkboxGroup === void 0 ? formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"] : void 0,
|
|
106
106
|
inputLabelledBy
|
|
107
107
|
),
|
|
108
108
|
name,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nimport checkboxCss from \"./Checkbox.css\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n extends Omit<\n InputHTMLAttributes<HTMLLabelElement>,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * If `true`, the checkbox will be in the error state.\n */\n error?: boolean;\n /**\n * If true, the checkbox appears indeterminate. This does not set the native\n * input element to indeterminate due to the inconsistent behaviour across browsers\n * However, a data-indeterminate attribute is set on the input.\n */\n indeterminate?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * Checkbox has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n function Checkbox(\n {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n error,\n indeterminate,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n validationStatus: validationStatusProp,\n readOnly: readOnlyProp,\n ...rest\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox\",\n css: checkboxCss,\n window: targetWindow,\n });\n const checkboxGroup = useCheckboxGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const checkboxGroupChecked =\n checkedProp == null && value != null\n ? checkboxGroup.checkedValues?.includes(value)\n : checkedProp;\n\n const [checked, setChecked] = useControlled({\n controlled: checkboxGroupChecked,\n default: Boolean(defaultChecked),\n name: \"Checkbox\",\n state: \"checked\",\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled =\n checkboxGroup.disabled ?? formFieldDisabled ?? disabledProp;\n const readOnly =\n checkboxGroup.readOnly ?? formFieldReadOnly ?? readOnlyProp;\n const validationStatus = !disabled\n ? checkboxGroup.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\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 checkboxGroup.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n // aria-checked only needed when indeterminate since native indeterminate behaviour is not used\n aria-checked={indeterminate ? \"mixed\" : undefined}\n aria-describedby={clsx(\n checkboxGroup.a11yProps?.[\"aria-describedby\"] ??\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy\n )}\n aria-labelledby={clsx(\n checkboxGroup.a11yProps?.[\"aria-labelledby\"] ??\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n data-indeterminate={indeterminate}\n defaultChecked={defaultChecked}\n disabled={disabled}\n readOnly={readOnly}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n {...restInputProps}\n />\n <CheckboxIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n indeterminate={indeterminate}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","useControlled","useFormFieldProps","_a","value","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nimport checkboxCss from \"./Checkbox.css\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n extends Omit<\n InputHTMLAttributes<HTMLLabelElement>,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * If `true`, the checkbox will be in the error state.\n */\n error?: boolean;\n /**\n * If true, the checkbox appears indeterminate. This does not set the native\n * input element to indeterminate due to the inconsistent behaviour across browsers\n * However, a data-indeterminate attribute is set on the input.\n */\n indeterminate?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * Checkbox has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n function Checkbox(\n {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n error,\n indeterminate,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n validationStatus: validationStatusProp,\n readOnly: readOnlyProp,\n ...rest\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox\",\n css: checkboxCss,\n window: targetWindow,\n });\n const checkboxGroup = useCheckboxGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const checkboxGroupChecked =\n checkboxGroup?.checkedValues != null && value != null\n ? checkboxGroup.checkedValues.includes(value)\n : checkedProp;\n\n const [checked, setChecked] = useControlled({\n controlled: checkboxGroupChecked,\n default: Boolean(defaultChecked),\n name: \"Checkbox\",\n state: \"checked\",\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled =\n checkboxGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly =\n checkboxGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? checkboxGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\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 checkboxGroup?.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n // aria-checked only needed when indeterminate since native indeterminate behaviour is not used\n aria-checked={indeterminate ? \"mixed\" : undefined}\n aria-describedby={clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy\n )}\n aria-labelledby={clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n data-indeterminate={indeterminate}\n defaultChecked={defaultChecked}\n disabled={disabled}\n readOnly={readOnly}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n {...restInputProps}\n />\n <CheckboxIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n indeterminate={indeterminate}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","useControlled","useFormFieldProps","_a","value","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
|
|
@@ -20,6 +20,8 @@ var CheckboxGroup$1 = require('./CheckboxGroup.css.js');
|
|
|
20
20
|
|
|
21
21
|
const withBaseName = makePrefixer.makePrefixer("saltCheckboxGroup");
|
|
22
22
|
const CheckboxGroup = React.forwardRef(function CheckboxGroup2({
|
|
23
|
+
"aria-labelledby": ariaLabelledBy,
|
|
24
|
+
"aria-describedby": ariaDescribedBy,
|
|
23
25
|
checkedValues: checkedValuesProp,
|
|
24
26
|
defaultCheckedValues = [],
|
|
25
27
|
children,
|
|
@@ -45,8 +47,8 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup2({
|
|
|
45
47
|
readOnly: formFieldReadOnly,
|
|
46
48
|
validationStatus: formFieldValidationStatus
|
|
47
49
|
} = useFormFieldProps.useFormFieldProps();
|
|
48
|
-
const disabled = formFieldDisabled
|
|
49
|
-
const readOnly = formFieldReadOnly
|
|
50
|
+
const disabled = formFieldDisabled || disabledProp;
|
|
51
|
+
const readOnly = formFieldReadOnly || readOnlyProp;
|
|
50
52
|
const validationStatus = formFieldValidationStatus != null ? formFieldValidationStatus : validationStatusProp;
|
|
51
53
|
const [checkedValues, setCheckedValues] = useControlled.useControlled({
|
|
52
54
|
controlled: checkedValuesProp,
|
|
@@ -63,6 +65,8 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup2({
|
|
|
63
65
|
onChange == null ? void 0 : onChange(event);
|
|
64
66
|
};
|
|
65
67
|
return /* @__PURE__ */ jsxRuntime.jsx("fieldset", {
|
|
68
|
+
"aria-labelledby": clsx.clsx(a11yProps == null ? void 0 : a11yProps["aria-labelledby"], ariaLabelledBy) || void 0,
|
|
69
|
+
"aria-describedby": clsx.clsx(a11yProps == null ? void 0 : a11yProps["aria-describedby"], ariaDescribedBy) || void 0,
|
|
66
70
|
className: clsx.clsx(
|
|
67
71
|
withBaseName(),
|
|
68
72
|
withBaseName(direction),
|
|
@@ -75,7 +79,6 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup2({
|
|
|
75
79
|
...other,
|
|
76
80
|
children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.CheckboxGroupContext.Provider, {
|
|
77
81
|
value: {
|
|
78
|
-
a11yProps,
|
|
79
82
|
disabled,
|
|
80
83
|
name,
|
|
81
84
|
onChange: handleChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n forwardRef,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\nimport checkboxGroupCss from \"./CheckboxGroup.css\";\n\nexport interface CheckboxGroupProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n /**\n * The current checked options.\n */\n checkedValues?: string[];\n /**\n * The default selected options for un-controlled component.\n */\n defaultCheckedValues?: string[];\n /**\n * Display group of elements in a compact row.\n */\n direction?: \"horizontal\" | \"vertical\";\n /**\n * Disable the Checkbox group\n */\n disabled?: boolean;\n /**\n * The name used to reference the value of the control.\n */\n name?: string;\n /**\n * Callback fired when a checkbox is clicked.\n * `event.target.value` returns the value of the checkbox that was clicked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.\n */\n wrap?: boolean;\n /**\n * Validation status.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxGroup\");\n\nexport const CheckboxGroup = forwardRef<\n HTMLFieldSetElement,\n CheckboxGroupProps\n>(function CheckboxGroup(\n {\n checkedValues: checkedValuesProp,\n defaultCheckedValues = [],\n children,\n className,\n disabled: disabledProp,\n direction = \"vertical\",\n name,\n onChange,\n readOnly: readOnlyProp,\n wrap,\n validationStatus: validationStatusProp,\n ...other\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox-group\",\n css: checkboxGroupCss,\n window: targetWindow,\n });\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n forwardRef,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\nimport checkboxGroupCss from \"./CheckboxGroup.css\";\n\nexport interface CheckboxGroupProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n /**\n * The current checked options.\n */\n checkedValues?: string[];\n /**\n * The default selected options for un-controlled component.\n */\n defaultCheckedValues?: string[];\n /**\n * Display group of elements in a compact row.\n */\n direction?: \"horizontal\" | \"vertical\";\n /**\n * Disable the Checkbox group\n */\n disabled?: boolean;\n /**\n * The name used to reference the value of the control.\n */\n name?: string;\n /**\n * Callback fired when a checkbox is clicked.\n * `event.target.value` returns the value of the checkbox that was clicked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.\n */\n wrap?: boolean;\n /**\n * Validation status.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxGroup\");\n\nexport const CheckboxGroup = forwardRef<\n HTMLFieldSetElement,\n CheckboxGroupProps\n>(function CheckboxGroup(\n {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n checkedValues: checkedValuesProp,\n defaultCheckedValues = [],\n children,\n className,\n disabled: disabledProp,\n direction = \"vertical\",\n name,\n onChange,\n readOnly: readOnlyProp,\n wrap,\n validationStatus: validationStatusProp,\n ...other\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox-group\",\n css: checkboxGroupCss,\n window: targetWindow,\n });\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const readOnly = formFieldReadOnly || readOnlyProp;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [checkedValues, setCheckedValues] = useControlled({\n controlled: checkedValuesProp,\n default: defaultCheckedValues,\n name: \"CheckboxGroup\",\n state: \"checkedValues\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const name = event.target.value;\n setCheckedValues((oldValues: string[] = []) => {\n const isSelected = oldValues.includes(name);\n\n return isSelected\n ? oldValues.filter((value) => value !== name)\n : oldValues.concat(name);\n });\n\n onChange?.(event);\n };\n\n return (\n <fieldset\n aria-labelledby={\n clsx(a11yProps?.[\"aria-labelledby\"], ariaLabelledBy) || undefined\n }\n aria-describedby={\n clsx(a11yProps?.[\"aria-describedby\"], ariaDescribedBy) || undefined\n }\n className={clsx(\n withBaseName(),\n withBaseName(direction),\n {\n [withBaseName(\"noWrap\")]: !wrap,\n },\n className\n )}\n ref={ref}\n {...other}\n >\n <CheckboxGroupContext.Provider\n value={{\n disabled,\n name,\n onChange: handleChange,\n checkedValues,\n readOnly,\n validationStatus,\n }}\n >\n {children}\n </CheckboxGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["makePrefixer","forwardRef","CheckboxGroup","useWindow","useComponentCssInjection","checkboxGroupCss","useFormFieldProps","useControlled","name","jsx","clsx","CheckboxGroupContext"],"mappings":"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"}
|
|
@@ -2,12 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var createContext = require('../../utils/createContext.js');
|
|
6
|
+
require('react');
|
|
7
|
+
require('../../utils/useFloatingUI/useFloatingUI.js');
|
|
8
|
+
require('../../utils/useId.js');
|
|
9
|
+
require('../../salt-provider/SaltProvider.js');
|
|
10
|
+
require('../../viewport/ViewportProvider.js');
|
|
11
|
+
require('clsx');
|
|
6
12
|
|
|
7
|
-
const CheckboxGroupContext =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
13
|
+
const CheckboxGroupContext = createContext.createContext(
|
|
14
|
+
"CheckboxGroupContext",
|
|
15
|
+
void 0
|
|
16
|
+
);
|
|
11
17
|
|
|
12
18
|
exports.CheckboxGroupContext = CheckboxGroupContext;
|
|
13
19
|
//# sourceMappingURL=CheckboxGroupContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroupContext.js","sources":["../src/checkbox/internal/CheckboxGroupContext.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"CheckboxGroupContext.js","sources":["../src/checkbox/internal/CheckboxGroupContext.ts"],"sourcesContent":["import { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { CheckboxGroupProps } from \"../CheckboxGroup\";\nimport { createContext } from \"../../utils\";\n\nexport interface CheckboxGroupState {\n disabled?: boolean;\n name?: CheckboxGroupProps[\"name\"];\n onChange?: CheckboxGroupProps[\"onChange\"];\n checkedValues?: CheckboxGroupProps[\"checkedValues\"];\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupState | undefined>(\n \"CheckboxGroupContext\",\n undefined\n);\n\nexport { CheckboxGroupContext };\n"],"names":["createContext"],"mappings":";;;;;;;;;;;;AAaA,MAAM,oBAAuB,GAAAA,2BAAA;AAAA,EAC3B,sBAAA;AAAA,EACA,KAAA,CAAA;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCheckboxGroup.js","sources":["../src/checkbox/internal/useCheckboxGroup.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"useCheckboxGroup.js","sources":["../src/checkbox/internal/useCheckboxGroup.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { CheckboxGroupContext } from \"./CheckboxGroupContext\";\n\nexport function useCheckboxGroup() {\n return useContext(CheckboxGroupContext);\n}\n"],"names":["useContext","CheckboxGroupContext"],"mappings":";;;;;;;AAGO,SAAS,gBAAmB,GAAA;AACjC,EAAA,OAAOA,iBAAWC,yCAAoB,CAAA,CAAA;AACxC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n /**\n * id for FormFieldHelperText\n */\n helperTextId?: string;\n /**\n * id for FormFieldLabel\n */\n labelId?: string;\n}\n\
|
|
1
|
+
{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n /**\n * id for FormFieldHelperText\n */\n helperTextId?: string;\n /**\n * id for FormFieldLabel\n */\n labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n a11yProps: a11yValueAriaProps;\n disabled: boolean;\n necessity: NecessityType | undefined;\n readOnly: boolean;\n validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContext = createContext(\n \"FormFieldContext\",\n {} as FormFieldContextValue\n);\n"],"names":["createContext"],"mappings":";;;;;;;;;;;;AA4BO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}
|
package/dist-cjs/index.js
CHANGED
|
@@ -40,6 +40,7 @@ var Input = require('./input/Input.js');
|
|
|
40
40
|
var Link = require('./link/Link.js');
|
|
41
41
|
var MultilineInput = require('./multiline-input/MultilineInput.js');
|
|
42
42
|
var Panel = require('./panel/Panel.js');
|
|
43
|
+
var Pill = require('./pill/Pill.js');
|
|
43
44
|
var RadioButton = require('./radio-button/RadioButton.js');
|
|
44
45
|
var RadioButtonGroup = require('./radio-button/RadioButtonGroup.js');
|
|
45
46
|
var RadioButtonIcon = require('./radio-button/RadioButtonIcon.js');
|
|
@@ -134,6 +135,7 @@ exports.Input = Input.Input;
|
|
|
134
135
|
exports.Link = Link.Link;
|
|
135
136
|
exports.MultilineInput = MultilineInput.MultilineInput;
|
|
136
137
|
exports.Panel = Panel.Panel;
|
|
138
|
+
exports.Pill = Pill.Pill;
|
|
137
139
|
exports.RadioButton = RadioButton.RadioButton;
|
|
138
140
|
exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
|
|
139
141
|
exports.RadioButtonIcon = RadioButtonIcon.RadioButtonIcon;
|
package/dist-cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n Ref,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { StatusAdornment } from \"../status-adornment\";\n\nimport inputCss from \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\nexport interface InputProps\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?: InputHTMLAttributes<HTMLInputElement>;\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 * 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?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n id,\n inputProps = {},\n inputRef,\n placeholder,\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 ...other\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input\",\n css: inputCss,\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\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 onChange,\n onFocus,\n required: inputPropsRequired,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : undefined ?? inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\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(validationStatus || \"\")]: validationStatus,\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 <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={inputRef}\n role={role}\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 {...restInputProps}\n required={isRequired}\n />\n {!isDisabled && !isReadOnly && validationStatus && (\n <StatusAdornment status={validationStatus} />\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","Input","useWindow","useComponentCssInjection","inputCss","useFormFieldProps","useState","useControlled","value","jsxs","clsx","jsx","StatusAdornment"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA,CAAA;AA+ChC,MAAA,KAAA,GAAQC,gBAAuC,CAAA,SAASC,MACnE,CAAA;AAAA,EACE,uBAAyB,EAAA,oBAAA;AAAA,EACzB,eAAiB,EAAA,YAAA;AAAA,EACjB,WAAa,EAAA,QAAA;AAAA,EACb,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,mBAAsB,GAAA,QAAA;AAAA,EACtB,YAAA;AAAA,EACA,EAAA;AAAA,EACA,aAAa,EAAC;AAAA,EACd,QAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAY,GAAA,MAAA;AAAA,EACZ,KAAO,EAAA,SAAA;AAAA,EACP,YAAc,EAAA,gBAAA,GAAmB,SAAc,KAAA,KAAA,CAAA,GAAY,EAAK,GAAA,KAAA,CAAA;AAAA,EAChE,gBAAkB,EAAA,oBAAA;AAAA,EAClB,OAAU,GAAA,SAAA;AAAA,EACP,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAW,EAAA;AAAA,MACT,kBAAoB,EAAA,oBAAA;AAAA,MACpB,iBAAmB,EAAA,mBAAA;AAAA,QACjB,EAAC;AAAA,IACL,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,IACV,SAAW,EAAA,iBAAA;AAAA,IACX,gBAAkB,EAAA,yBAAA;AAAA,MAChBC,mCAAkB,EAAA,CAAA;AAEtB,EAAA,MAAM,aAAgB,GAAA;AAAA,IACpB,uBAAyB,EAAA,oBAAA;AAAA,IACzB,eAAiB,EAAA,YAAA;AAAA,IACjB,WAAa,EAAA,QAAA;AAAA,GACf,CAAA;AAEA,EAAA,MAAM,aAAa,QAAY,IAAA,iBAAA,CAAA;AAC/B,EAAA,MAAM,aAAa,YAAgB,IAAA,iBAAA,CAAA;AACnC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,oBAAA,CAAA;AAEtD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAE5C,EAAA,MAAM,eAAkB,GAAA,UAAA,IAAc,CAAC,gBAAA,IAAoB,CAAC,SAAA,CAAA;AAC5D,EAAM,MAAA,YAAA,GAAe,kBAAkB,mBAAsB,GAAA,gBAAA,CAAA;AAE7D,EAAM,MAAA;AAAA,IACJ,kBAAoB,EAAA,gBAAA;AAAA,IACpB,iBAAmB,EAAA,eAAA;AAAA,IACnB,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAU,EAAA,kBAAA;AAAA,IACP,GAAA,cAAA;AAAA,GACD,GAAA,UAAA,CAAA;AAEJ,EAAM,MAAA,UAAA,GAAa,oBACf,CAAC,UAAA,EAAY,UAAU,CAAE,CAAA,QAAA,CAAS,iBAAiB,CACtC,GAAA,kBAAA,CAAA;AAEjB,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,2BAAc,CAAA;AAAA,IACtC,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,IAAM,EAAA,OAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAMC,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,KAAA,CAAA;AAC3B,IAAA,QAAA,CAASA,MAAK,CAAA,CAAA;AACd,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAwC,KAAA;AAC1D,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AACT,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,GAClB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AAC3D,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AACV,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,mBAAqB,EAAA,SAAA;AAAA,IACrB,GAAG,KAAA;AAAA,GACL,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,OAAO,CAAA;AAAA,MACpB;AAAA,QACE,CAAC,YAAA,CAAa,SAAS,CAAA,GAAI,CAAC,UAAc,IAAA,OAAA;AAAA,QAC1C,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,OAC1C;AAAA,MACA,aAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACA,KAAO,EAAA,UAAA;AAAA,IACN,GAAG,KAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,cAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,yBAAyB,CAAA;AAAA,QACnD,QAAA,EAAA,cAAA;AAAA,OACH,CAAA;AAAA,sBAEDA,cAAA,CAAA,OAAA,EAAA;AAAA,QACC,kBAAA,EAAkBD,SAAK,CAAA,oBAAA,EAAsB,gBAAgB,CAAA;AAAA,QAC7D,iBAAA,EAAiBA,SAAK,CAAA,mBAAA,EAAqB,eAAe,CAAA;AAAA,QAC1D,WAAWA,SAAK,CAAA,YAAA,CAAa,OAAO,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,QAC5D,QAAU,EAAA,UAAA;AAAA,QACV,EAAA;AAAA,QACA,QAAU,EAAA,UAAA;AAAA,QACV,GAAK,EAAA,QAAA;AAAA,QACL,IAAA;AAAA,QACA,QAAA,EAAU,aAAa,CAAK,CAAA,GAAA,CAAA;AAAA,QAC5B,MAAQ,EAAA,UAAA;AAAA,QACR,QAAU,EAAA,YAAA;AAAA,QACV,OAAA,EAAS,CAAC,UAAA,GAAa,WAAc,GAAA,KAAA,CAAA;AAAA,QACrC,WAAA;AAAA,QACA,KAAA;AAAA,QACC,GAAG,aAAA;AAAA,QACH,GAAG,cAAA;AAAA,QACJ,QAAU,EAAA,UAAA;AAAA,OACZ,CAAA;AAAA,MACC,CAAC,UAAA,IAAc,CAAC,UAAA,IAAc,oCAC5BC,cAAA,CAAAC,+BAAA,EAAA;AAAA,QAAgB,MAAQ,EAAA,gBAAA;AAAA,OAAkB,CAAA;AAAA,MAE5C,gCACED,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,uBAAuB,CAAA;AAAA,QACjD,QAAA,EAAA,YAAA;AAAA,OACH,CAAA;AAAA,sBAEDA,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,qBAAqB,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GACvD,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n Ref,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { StatusAdornment } from \"../status-adornment\";\n\nimport inputCss from \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\nexport interface InputProps\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?: InputHTMLAttributes<HTMLInputElement>;\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 * 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?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n id,\n inputProps = {},\n inputRef,\n placeholder,\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 ...other\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input\",\n css: inputCss,\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\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 onChange,\n onFocus,\n required: inputPropsRequired,\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 handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\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(validationStatus || \"\")]: validationStatus,\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 <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={inputRef}\n role={role}\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 {...restInputProps}\n required={isRequired}\n />\n {!isDisabled && !isReadOnly && validationStatus && (\n <StatusAdornment status={validationStatus} />\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","Input","useWindow","useComponentCssInjection","inputCss","useFormFieldProps","useState","useControlled","value","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n ReactNode,\n Ref,\n TextareaHTMLAttributes,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport { makePrefixer, useControlled } 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 * 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?: TextareaHTMLAttributes<HTMLTextAreaElement>;\n /**\n * Optional ref for the textarea component\n */\n textAreaRef?: Ref<HTMLTextAreaElement>;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\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 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 : undefined ?? textAreaRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValueProp,\n name: \"MultilineInput\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\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 <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={textAreaRef}\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 className={withBaseName(\"suffixAdornments\")}>\n {!isDisabled && !isReadOnly && 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","useWindow","useComponentCssInjection","multilineInputCss","useState","useFormFieldProps","useControlled","value","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n ReactNode,\n Ref,\n TextareaHTMLAttributes,\n useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport { makePrefixer, useControlled } 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 * 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?: TextareaHTMLAttributes<HTMLTextAreaElement>;\n /**\n * Optional ref for the textarea component\n */\n textAreaRef?: Ref<HTMLTextAreaElement>;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\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 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 handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\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 <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={textAreaRef}\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 className={withBaseName(\"suffixAdornments\")}>\n {!isDisabled && !isReadOnly && 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","useWindow","useComponentCssInjection","multilineInputCss","useState","useFormFieldProps","useControlled","value","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = "/* Styles applied to the root element */\n.saltPill {\n appearance: none;\n display: inline-flex;\n align-items: center;\n background: var(--saltPill-background, var(--salt-actionable-primary-background));\n border-radius: 0;\n border: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n min-height: var(--salt-text-minHeight);\n outline: 0;\n position: relative;\n gap: var(--salt-spacing-50);\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n color: var(--saltPill-color, var(--salt-actionable-primary-foreground));\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable */\n.saltPill-clickable {\n cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n color: var(--salt-actionable-primary-foreground-hover);\n background: var(--salt-actionable-primary-background-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n background: var(--salt-actionable-primary-background-active);\n color: var(--salt-actionable-primary-foreground-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n color: var(--salt-actionable-primary-foreground-disabled);\n background: var(--salt-actionable-primary-background-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=Pill.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pill.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var window = require('@salt-ds/window');
|
|
9
|
+
var styles = require('@salt-ds/styles');
|
|
10
|
+
var Pill$1 = require('./Pill.css.js');
|
|
11
|
+
var makePrefixer = require('../utils/makePrefixer.js');
|
|
12
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
13
|
+
require('../utils/useId.js');
|
|
14
|
+
require('../salt-provider/SaltProvider.js');
|
|
15
|
+
require('../viewport/ViewportProvider.js');
|
|
16
|
+
require('../button/Button.js');
|
|
17
|
+
var useButton = require('../button/useButton.js');
|
|
18
|
+
|
|
19
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
+
|
|
21
|
+
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
|
|
22
|
+
|
|
23
|
+
const withBaseName = makePrefixer.makePrefixer("saltPill");
|
|
24
|
+
const Pill = React.forwardRef(function Pill2({
|
|
25
|
+
children,
|
|
26
|
+
className,
|
|
27
|
+
disabled,
|
|
28
|
+
onKeyUp,
|
|
29
|
+
onKeyDown,
|
|
30
|
+
onClick,
|
|
31
|
+
onBlur,
|
|
32
|
+
...rest
|
|
33
|
+
}, ref) {
|
|
34
|
+
const targetWindow = window.useWindow();
|
|
35
|
+
styles.useComponentCssInjection({
|
|
36
|
+
testId: "salt-pill",
|
|
37
|
+
css: Pill$1,
|
|
38
|
+
window: targetWindow
|
|
39
|
+
});
|
|
40
|
+
const { buttonProps, active } = useButton.useButton({
|
|
41
|
+
disabled,
|
|
42
|
+
onKeyUp,
|
|
43
|
+
onKeyDown,
|
|
44
|
+
onClick,
|
|
45
|
+
onBlur
|
|
46
|
+
});
|
|
47
|
+
const { tabIndex, ...restButtonProps } = buttonProps;
|
|
48
|
+
return /* @__PURE__ */ jsxRuntime.jsx("button", {
|
|
49
|
+
"data-testid": "pill",
|
|
50
|
+
ref,
|
|
51
|
+
className: clsx__default["default"](
|
|
52
|
+
withBaseName(),
|
|
53
|
+
withBaseName("clickable"),
|
|
54
|
+
{ [withBaseName("active")]: active },
|
|
55
|
+
className
|
|
56
|
+
),
|
|
57
|
+
...restButtonProps,
|
|
58
|
+
...rest,
|
|
59
|
+
children
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
exports.Pill = Pill;
|
|
64
|
+
//# sourceMappingURL=Pill.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pill.js","sources":["../src/pill/Pill.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport pillCss from \"./Pill.css\";\nimport { makePrefixer } from \"../utils\";\nimport { useButton } from \"../button\";\n\nconst withBaseName = makePrefixer(\"saltPill\");\n\n/* eslint-disable @typescript-eslint/no-empty-interface */\nexport interface PillProps extends ComponentPropsWithoutRef<\"button\"> {}\n\nexport const Pill = forwardRef<HTMLButtonElement, PillProps>(function Pill(\n {\n children,\n className,\n disabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n ...rest\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pill\",\n css: pillCss,\n window: targetWindow,\n });\n const { buttonProps, active } = useButton<HTMLButtonElement>({\n disabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n });\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { tabIndex, ...restButtonProps } = buttonProps;\n return (\n <button\n data-testid=\"pill\"\n ref={ref}\n className={clsx(\n withBaseName(),\n withBaseName(\"clickable\"),\n { [withBaseName(\"active\")]: active },\n className\n )}\n {...restButtonProps}\n {...rest}\n >\n {children}\n </button>\n );\n});\n"],"names":["makePrefixer","forwardRef","Pill","useWindow","useComponentCssInjection","pillCss","useButton","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AAK/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAIC,mBAA6B,CAAA;AAAA,IAC3D,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,GACD,CAAA,CAAA;AAID,EAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AACzC,EAAA,uBACGC,cAAA,CAAA,QAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,GAAA;AAAA,IACA,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,WAAW,CAAA;AAAA,MACxB,EAAE,CAAC,YAAa,CAAA,QAAQ,IAAI,MAAO,EAAA;AAAA,MACnC,SAAA;AAAA,KACF;AAAA,IACC,GAAG,eAAA;AAAA,IACH,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -22,7 +22,7 @@ var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
|
|
|
22
22
|
const withBaseName = makePrefixer.makePrefixer("saltRadioButton");
|
|
23
23
|
const RadioButton = React.forwardRef(
|
|
24
24
|
function RadioButton2(props, ref) {
|
|
25
|
-
var _a, _b
|
|
25
|
+
var _a, _b;
|
|
26
26
|
const {
|
|
27
27
|
checked: checkedProp,
|
|
28
28
|
className,
|
|
@@ -59,11 +59,11 @@ const RadioButton = React.forwardRef(
|
|
|
59
59
|
onChange: inputOnChange,
|
|
60
60
|
...restInputProps
|
|
61
61
|
} = inputProps;
|
|
62
|
-
const disabled = (
|
|
63
|
-
const readOnly = (
|
|
64
|
-
const validationStatus = !disabled ? (
|
|
65
|
-
const radioGroupChecked = radioGroup.value != null && value != null ? radioGroup.value === value : checkedProp;
|
|
66
|
-
const name = nameProp != null ? nameProp : radioGroup.name;
|
|
62
|
+
const disabled = (radioGroup == null ? void 0 : radioGroup.disabled) || formFieldDisabled || disabledProp;
|
|
63
|
+
const readOnly = (radioGroup == null ? void 0 : radioGroup.readOnly) || formFieldReadOnly || readOnlyProp;
|
|
64
|
+
const validationStatus = !disabled ? (_b = (_a = radioGroup == null ? void 0 : radioGroup.validationStatus) != null ? _a : formFieldValidationStatus) != null ? _b : validationStatusProp : void 0;
|
|
65
|
+
const radioGroupChecked = (radioGroup == null ? void 0 : radioGroup.value) != null && value != null ? radioGroup.value === value : checkedProp;
|
|
66
|
+
const name = nameProp != null ? nameProp : radioGroup == null ? void 0 : radioGroup.name;
|
|
67
67
|
const [checked, setCheckedState] = useControlled.useControlled({
|
|
68
68
|
controlled: radioGroupChecked,
|
|
69
69
|
default: Boolean(checkedProp),
|
|
@@ -78,7 +78,7 @@ const RadioButton = React.forwardRef(
|
|
|
78
78
|
setCheckedState(newChecked);
|
|
79
79
|
onChange == null ? void 0 : onChange(event);
|
|
80
80
|
inputOnChange == null ? void 0 : inputOnChange(event);
|
|
81
|
-
(_a2 = radioGroup.onChange) == null ? void 0 : _a2.call(radioGroup, event);
|
|
81
|
+
(_a2 = radioGroup == null ? void 0 : radioGroup.onChange) == null ? void 0 : _a2.call(radioGroup, event);
|
|
82
82
|
};
|
|
83
83
|
return /* @__PURE__ */ jsxRuntime.jsxs("label", {
|
|
84
84
|
className: clsx.clsx(
|
|
@@ -96,13 +96,13 @@ const RadioButton = React.forwardRef(
|
|
|
96
96
|
children: [
|
|
97
97
|
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
98
98
|
"aria-describedby": clsx.clsx(
|
|
99
|
-
|
|
99
|
+
radioGroup == void 0 ? formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"] : void 0,
|
|
100
100
|
inputDescribedBy
|
|
101
|
-
),
|
|
101
|
+
) || void 0,
|
|
102
102
|
"aria-labelledby": clsx.clsx(
|
|
103
|
-
|
|
103
|
+
radioGroup == void 0 ? formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"] : void 0,
|
|
104
104
|
inputLabelledBy
|
|
105
|
-
),
|
|
105
|
+
) || void 0,
|
|
106
106
|
className: clsx.clsx(withBaseName("input"), inputClassName),
|
|
107
107
|
checked,
|
|
108
108
|
disabled,
|