@salt-ds/core 1.15.0 → 1.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/css/salt-core.css +43 -11
  2. package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
  3. package/dist-cjs/card/Card.css.js +1 -1
  4. package/dist-cjs/checkbox/Checkbox.js +9 -1
  5. package/dist-cjs/checkbox/Checkbox.js.map +1 -1
  6. package/dist-cjs/file-drop-zone/FileDropZone.css.js +6 -0
  7. package/dist-cjs/file-drop-zone/FileDropZone.css.js.map +1 -0
  8. package/dist-cjs/file-drop-zone/FileDropZone.js +99 -0
  9. package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -0
  10. package/dist-cjs/file-drop-zone/FileDropZoneIcon.js +25 -0
  11. package/dist-cjs/file-drop-zone/FileDropZoneIcon.js.map +1 -0
  12. package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +58 -0
  13. package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -0
  14. package/dist-cjs/file-drop-zone/internal/utils.js +30 -0
  15. package/dist-cjs/file-drop-zone/internal/utils.js.map +1 -0
  16. package/dist-cjs/index.js +6 -0
  17. package/dist-cjs/index.js.map +1 -1
  18. package/dist-cjs/link/Link.js +1 -1
  19. package/dist-cjs/link/Link.js.map +1 -1
  20. package/dist-cjs/panel/Panel.css.js +1 -1
  21. package/dist-cjs/radio-button/RadioButton.js.map +1 -1
  22. package/dist-cjs/radio-button/RadioButtonGroup.js +2 -0
  23. package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
  24. package/dist-cjs/switch/Switch.js +1 -0
  25. package/dist-cjs/switch/Switch.js.map +1 -1
  26. package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
  27. package/dist-cjs/toggle-button/ToggleButton.js +3 -2
  28. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
  29. package/dist-cjs/tooltip/Tooltip.js +2 -1
  30. package/dist-cjs/tooltip/Tooltip.js.map +1 -1
  31. package/dist-cjs/tooltip/useTooltip.js +3 -12
  32. package/dist-cjs/tooltip/useTooltip.js.map +1 -1
  33. package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +17 -2
  34. package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  35. package/dist-es/accordion/AccordionHeader.css.js +1 -1
  36. package/dist-es/card/Card.css.js +1 -1
  37. package/dist-es/checkbox/Checkbox.js +10 -2
  38. package/dist-es/checkbox/Checkbox.js.map +1 -1
  39. package/dist-es/file-drop-zone/FileDropZone.css.js +4 -0
  40. package/dist-es/file-drop-zone/FileDropZone.css.js.map +1 -0
  41. package/dist-es/file-drop-zone/FileDropZone.js +95 -0
  42. package/dist-es/file-drop-zone/FileDropZone.js.map +1 -0
  43. package/dist-es/file-drop-zone/FileDropZoneIcon.js +21 -0
  44. package/dist-es/file-drop-zone/FileDropZoneIcon.js.map +1 -0
  45. package/dist-es/file-drop-zone/FileDropZoneTrigger.js +54 -0
  46. package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -0
  47. package/dist-es/file-drop-zone/internal/utils.js +25 -0
  48. package/dist-es/file-drop-zone/internal/utils.js.map +1 -0
  49. package/dist-es/index.js +3 -0
  50. package/dist-es/index.js.map +1 -1
  51. package/dist-es/link/Link.js +1 -1
  52. package/dist-es/link/Link.js.map +1 -1
  53. package/dist-es/panel/Panel.css.js +1 -1
  54. package/dist-es/radio-button/RadioButton.js.map +1 -1
  55. package/dist-es/radio-button/RadioButtonGroup.js +2 -0
  56. package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
  57. package/dist-es/switch/Switch.js +1 -0
  58. package/dist-es/switch/Switch.js.map +1 -1
  59. package/dist-es/toggle-button/ToggleButton.css.js +1 -1
  60. package/dist-es/toggle-button/ToggleButton.js +3 -2
  61. package/dist-es/toggle-button/ToggleButton.js.map +1 -1
  62. package/dist-es/tooltip/Tooltip.js +2 -1
  63. package/dist-es/tooltip/Tooltip.js.map +1 -1
  64. package/dist-es/tooltip/useTooltip.js +3 -12
  65. package/dist-es/tooltip/useTooltip.js.map +1 -1
  66. package/dist-es/utils/useFloatingUI/useFloatingUI.js +18 -3
  67. package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  68. package/dist-types/checkbox/Checkbox.d.ts +1 -3
  69. package/dist-types/file-drop-zone/FileDropZone.d.ts +17 -0
  70. package/dist-types/file-drop-zone/FileDropZoneIcon.d.ts +9 -0
  71. package/dist-types/file-drop-zone/FileDropZoneTrigger.d.ts +22 -0
  72. package/dist-types/file-drop-zone/index.d.ts +3 -0
  73. package/dist-types/file-drop-zone/internal/utils.d.ts +3 -0
  74. package/dist-types/index.d.ts +1 -0
  75. package/dist-types/radio-button/RadioButton.d.ts +1 -0
  76. package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +6 -2
  77. package/package.json +1 -1
package/css/salt-core.css CHANGED
@@ -42,6 +42,7 @@
42
42
  .saltAccordionHeader:disabled {
43
43
  background: var(--salt-actionable-secondary-background);
44
44
  color: var(--salt-content-primary-foreground-disabled);
45
+ cursor: var(--salt-actionable-cursor-disabled);
45
46
  }
46
47
  .saltAccordionHeader-icon {
47
48
  transition: transform var(--salt-duration-perceptible) ease-in-out;
@@ -350,10 +351,6 @@
350
351
  border-width: var(--salt-size-border);
351
352
  border-style: var(--salt-container-borderStyle);
352
353
  padding: var(--saltCard-padding, var(--salt-spacing-300));
353
- font-family: var(--salt-text-fontFamily);
354
- font-size: var(--salt-text-fontSize);
355
- font-weight: var(--salt-text-fontWeight);
356
- line-height: var(--salt-text-lineHeight);
357
354
  }
358
355
  .saltCard-primary {
359
356
  background: var(--saltCard-background, var(--salt-container-primary-background));
@@ -628,6 +625,43 @@ a:link .saltInteractableCard * {
628
625
  color: var(--salt-content-primary-foreground);
629
626
  }
630
627
 
628
+ /* src/file-drop-zone/FileDropZone.css */
629
+ .saltFileDropZone {
630
+ color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));
631
+ display: inline-flex;
632
+ background: var(--saltFileDropZone-background, var(--salt-container-primary-background));
633
+ text-align: center;
634
+ align-items: center;
635
+ justify-content: center;
636
+ border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));
637
+ flex-direction: column;
638
+ padding: var(--salt-spacing-200);
639
+ gap: var(--salt-spacing-200);
640
+ width: 100%;
641
+ font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));
642
+ font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));
643
+ line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));
644
+ }
645
+ .saltFileDropZone-active {
646
+ background: var(--salt-target-background-hover);
647
+ border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);
648
+ }
649
+ .saltFileDropZone-error {
650
+ border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);
651
+ }
652
+ .saltFileDropZone-success {
653
+ border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);
654
+ }
655
+ .saltFileDropZone .input-hidden {
656
+ display: none;
657
+ }
658
+ .saltFileDropZone-disabled {
659
+ background: var(--salt-container-primary-background-disabled);
660
+ border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);
661
+ cursor: var(--salt-target-cursor-disabled);
662
+ color: var(--salt-content-primary-foreground-disabled);
663
+ }
664
+
631
665
  /* src/flex-item/FlexItem.css */
632
666
  .saltFlexItem {
633
667
  --saltFlexItem-alignment: auto;
@@ -1471,10 +1505,6 @@ a:link .saltInteractableCard * {
1471
1505
  overflow: auto;
1472
1506
  padding: var(--saltPanel-padding, var(--salt-size-container-spacing));
1473
1507
  width: var(--saltPanel-width, 100%);
1474
- font-family: var(--salt-text-fontFamily);
1475
- font-size: var(--salt-text-fontSize);
1476
- font-weight: var(--salt-text-fontWeight);
1477
- line-height: var(--salt-text-lineHeight);
1478
1508
  }
1479
1509
 
1480
1510
  /* src/pill/Pill.css */
@@ -2147,12 +2177,14 @@ label.saltText small,
2147
2177
  color: var(--salt-actionable-secondary-foreground-hover);
2148
2178
  cursor: var(--salt-actionable-cursor-hover);
2149
2179
  }
2150
- .saltToggleButton[aria-checked=true]:focus-visible {
2180
+ .saltToggleButton[aria-checked=true]:focus-visible,
2181
+ .saltToggleButton[aria-pressed=true]:focus-visible {
2151
2182
  background: var(--salt-actionable-secondary-background-active);
2152
2183
  color: var(--salt-actionable-secondary-foreground-active);
2153
2184
  cursor: var(--salt-actionable-cursor-active);
2154
2185
  }
2155
- .saltToggleButton[aria-checked=true] {
2186
+ .saltToggleButton[aria-checked=true],
2187
+ .saltToggleButton[aria-pressed=true] {
2156
2188
  background: var(--salt-actionable-secondary-background-active);
2157
2189
  color: var(--salt-actionable-secondary-foreground-active);
2158
2190
  cursor: var(--salt-actionable-cursor-active);
@@ -2232,4 +2264,4 @@ label.saltText small,
2232
2264
  --tooltip-status-borderColor: var(--salt-status-success-borderColor);
2233
2265
  }
2234
2266
 
2235
- /* src/7414b2df-de5a-4c04-b7c1-3ce5790cf37e.css */
2267
+ /* src/feb16112-741d-4b27-a03d-54d627a89274.css */
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltAccordionHeader {\n display: flex;\n gap: var(--salt-spacing-100);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: center;\n border: 0;\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n background: var(--salt-actionable-secondary-background);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight-strong);\n text-align: left;\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltAccordionHeader:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n background: var(--salt-actionable-secondary-background);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltAccordionHeader-icon {\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n transform: rotate(90deg);\n}\n\n.saltAccordionHeader-error {\n background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n margin-left: auto;\n}\n";
3
+ var css_248z = ".saltAccordionHeader {\n display: flex;\n gap: var(--salt-spacing-100);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: center;\n border: 0;\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n background: var(--salt-actionable-secondary-background);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight-strong);\n text-align: left;\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltAccordionHeader:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n background: var(--salt-actionable-secondary-background);\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltAccordionHeader-icon {\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n transform: rotate(90deg);\n}\n\n.saltAccordionHeader-error {\n background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n margin-left: auto;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=AccordionHeader.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to the root element */\n.saltCard {\n box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n border-width: var(--salt-size-border);\n border-style: var(--salt-container-borderStyle);\n padding: var(--saltCard-padding, var(--salt-spacing-300));\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltCard-primary {\n background: var(--saltCard-background, var(--salt-container-primary-background));\n border-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n background: var(--saltCard-background, var(--salt-container-secondary-background));\n border-color: var(--salt-container-secondary-borderColor);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n * Use Interactable Card component instead\n * for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n display: block;\n transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n outline: var(--salt-focused-outline);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n border-color: var(--salt-container-primary-borderColor-disabled);\n color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n pointer-events: none;\n}\n";
3
+ var css_248z = "/* Styles applied to the root element */\n.saltCard {\n box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n border-width: var(--salt-size-border);\n border-style: var(--salt-container-borderStyle);\n padding: var(--saltCard-padding, var(--salt-spacing-300));\n}\n\n.saltCard-primary {\n background: var(--saltCard-background, var(--salt-container-primary-background));\n border-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n background: var(--saltCard-background, var(--salt-container-secondary-background));\n border-color: var(--salt-container-secondary-borderColor);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n * Use Interactable Card component instead\n * for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n display: block;\n transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n outline: var(--salt-focused-outline);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n border-color: var(--salt-container-primary-borderColor-disabled);\n color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n pointer-events: none;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Card.css.js.map
@@ -11,6 +11,7 @@ var makePrefixer = require('../utils/makePrefixer.js');
11
11
  var useControlled = require('../utils/useControlled.js');
12
12
  require('../utils/useFloatingUI/useFloatingUI.js');
13
13
  require('../utils/useId.js');
14
+ var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
14
15
  require('../salt-provider/SaltProvider.js');
15
16
  require('../viewport/ViewportProvider.js');
16
17
  var CheckboxIcon = require('./CheckboxIcon.js');
@@ -70,6 +71,7 @@ const Checkbox = React.forwardRef(
70
71
  const disabled = (checkboxGroup == null ? void 0 : checkboxGroup.disabled) || formFieldDisabled || disabledProp;
71
72
  const readOnly = (checkboxGroup == null ? void 0 : checkboxGroup.readOnly) || formFieldReadOnly || readOnlyProp;
72
73
  const validationStatus = !disabled ? (_b = (_a = checkboxGroup == null ? void 0 : checkboxGroup.validationStatus) != null ? _a : formFieldValidationStatus) != null ? _b : validationStatusProp : void 0;
74
+ const inputRef = React.useRef(null);
73
75
  const handleChange = (event) => {
74
76
  var _a2;
75
77
  if (event.nativeEvent.defaultPrevented || readOnly) {
@@ -81,6 +83,11 @@ const Checkbox = React.forwardRef(
81
83
  inputOnChange == null ? void 0 : inputOnChange(event);
82
84
  (_a2 = checkboxGroup == null ? void 0 : checkboxGroup.onChange) == null ? void 0 : _a2.call(checkboxGroup, event);
83
85
  };
86
+ useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
87
+ if (inputRef.current != null) {
88
+ inputRef.current.indeterminate = indeterminate != null ? indeterminate : false;
89
+ }
90
+ }, [indeterminate]);
84
91
  return /* @__PURE__ */ jsxRuntime.jsxs("label", {
85
92
  className: clsx.clsx(
86
93
  withBaseName(),
@@ -96,7 +103,7 @@ const Checkbox = React.forwardRef(
96
103
  ...rest,
97
104
  children: [
98
105
  /* @__PURE__ */ jsxRuntime.jsx("input", {
99
- "aria-checked": indeterminate ? "mixed" : void 0,
106
+ "aria-readonly": readOnly || void 0,
100
107
  "aria-describedby": clsx.clsx(
101
108
  checkboxGroup === void 0 ? formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"] : void 0,
102
109
  inputDescribedBy
@@ -117,6 +124,7 @@ const Checkbox = React.forwardRef(
117
124
  onChange: handleChange,
118
125
  onFocus,
119
126
  type: "checkbox",
127
+ ref: inputRef,
120
128
  ...restInputProps
121
129
  }),
122
130
  /* @__PURE__ */ jsxRuntime.jsx(CheckboxIcon.CheckboxIcon, {
@@ -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 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":";;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA,CAAA;AAmEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SACP,CAAA;AAAA,IACE,OAAS,EAAA,WAAA;AAAA,IACT,SAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,KAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAa,EAAC;AAAA,IACd,KAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,gBAAkB,EAAA,oBAAA;AAAA,IAClB,QAAU,EAAA,YAAA;AAAA,IACP,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AA1GJ,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA2GI,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,gBAAgBC,iCAAiB,EAAA,CAAA;AAEvC,IAAM,MAAA;AAAA,MACJ,kBAAoB,EAAA,gBAAA;AAAA,MACpB,iBAAmB,EAAA,eAAA;AAAA,MACnB,SAAW,EAAA,cAAA;AAAA,MACX,QAAU,EAAA,aAAA;AAAA,MACP,GAAA,cAAA;AAAA,KACD,GAAA,UAAA,CAAA;AAEJ,IAAM,MAAA,oBAAA,GAAA,CACJ,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,aAAA,KAAiB,IAAQ,IAAA,KAAA,IAAS,OAC7C,aAAc,CAAA,aAAA,CAAc,QAAS,CAAA,KAAK,CAC1C,GAAA,WAAA,CAAA;AAEN,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC1C,UAAY,EAAA,oBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,cAAc,CAAA;AAAA,MAC/B,IAAM,EAAA,UAAA;AAAA,MACN,KAAO,EAAA,SAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,SAAW,EAAA,kBAAA;AAAA,MACX,QAAU,EAAA,iBAAA;AAAA,MACV,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChBC,mCAAkB,EAAA,CAAA;AAEtB,IAAM,MAAA,QAAA,GAAA,CACJ,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,QAAA,KAAY,iBAAqB,IAAA,YAAA,CAAA;AAClD,IAAM,MAAA,QAAA,GAAA,CACJ,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,QAAA,KAAY,iBAAqB,IAAA,YAAA,CAAA;AAClD,IAAM,MAAA,gBAAA,GAAmB,CAAC,QACtB,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAe,qBAAf,IACA,GAAA,EAAA,GAAA,yBAAA,KADA,YAEA,oBACA,GAAA,KAAA,CAAA,CAAA;AAEJ,IAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AAxJ1E,MAAAC,IAAAA,GAAAA,CAAAA;AA0JM,MAAI,IAAA,KAAA,CAAM,WAAY,CAAA,gBAAA,IAAoB,QAAU,EAAA;AAClD,QAAA,OAAA;AAAA,OACF;AAEA,MAAMC,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,OAAA,CAAA;AAC3B,MAAA,UAAA,CAAWA,MAAK,CAAA,CAAA;AAChB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AACX,MAAgB,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,KAAA,CAAA,CAAA;AAChB,MAAA,CAAAD,GAAA,GAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAe,QAAf,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,IAAA,IAA0B,CAAA,aAAA,EAAA,KAAA,CAAA,CAAA;AAAA,KAC5B,CAAA;AAEA,IAAA,uBACGE,eAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAoB,IAAA,IAAA,GAAA,gBAAA,GAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,SAC1C;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,OAAA,EAAA;AAAA,UAEC,cAAA,EAAc,gBAAgB,OAAU,GAAA,KAAA,CAAA;AAAA,UACxC,kBAAkB,EAAAD,SAAA;AAAA,YAChB,aAAA,KAAkB,KACd,CAAA,GAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAqB,kBACrB,CAAA,GAAA,KAAA,CAAA;AAAA,YACJ,gBAAA;AAAA,WACF;AAAA,UACA,iBAAiB,EAAAA,SAAA;AAAA,YACf,aAAA,KAAkB,KACd,CAAA,GAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAqB,iBACrB,CAAA,GAAA,KAAA,CAAA;AAAA,YACJ,eAAA;AAAA,WACF;AAAA,UACA,IAAA;AAAA,UACA,KAAA;AAAA,UACA,OAAA;AAAA,UACA,SAAW,EAAAA,SAAA,CAAK,YAAa,CAAA,OAAO,GAAG,cAAc,CAAA;AAAA,UACrD,oBAAoB,EAAA,aAAA;AAAA,UACpB,cAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAU,EAAA,YAAA;AAAA,UACV,OAAA;AAAA,UACA,IAAK,EAAA,UAAA;AAAA,UACJ,GAAG,cAAA;AAAA,SACN,CAAA;AAAA,wBACCC,cAAA,CAAAC,yBAAA,EAAA;AAAA,UACC,OAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,UACA,gBAAA;AAAA,UACA,KAAA;AAAA,SACF,CAAA;AAAA,QACC,KAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
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 useRef,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n makePrefixer,\n useControlled,\n useIsomorphicLayoutEffect,\n} 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. 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 inputRef = useRef<HTMLInputElement>(null);\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 useIsomorphicLayoutEffect(() => {\n if (inputRef.current != null) {\n inputRef.current.indeterminate = indeterminate ?? false;\n }\n }, [indeterminate]);\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-readonly={readOnly || 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 ref={inputRef}\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","useRef","_a","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = ".saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n text-align: center;\n align-items: center;\n justify-content: center;\n border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n flex-direction: column;\n padding: var(--salt-spacing-200);\n gap: var(--salt-spacing-200);\n width: 100%;\n font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n}\n\n.saltFileDropZone-active {\n background: var(--salt-target-background-hover);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n background: var(--salt-container-primary-background-disabled);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n cursor: var(--salt-target-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=FileDropZone.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FileDropZone.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,99 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var clsx = require('clsx');
7
+ var React = require('react');
8
+ var utils = require('./internal/utils.js');
9
+ var window = require('@salt-ds/window');
10
+ var styles = require('@salt-ds/styles');
11
+ var FileDropZone$1 = require('./FileDropZone.css.js');
12
+ var makePrefixer = require('../utils/makePrefixer.js');
13
+ require('../utils/useFloatingUI/useFloatingUI.js');
14
+ var useForkRef = require('../utils/useForkRef.js');
15
+ require('../utils/useId.js');
16
+ require('../salt-provider/SaltProvider.js');
17
+ require('../viewport/ViewportProvider.js');
18
+
19
+ const withBaseName = makePrefixer.makePrefixer("saltFileDropZone");
20
+ const FileDropZone = React.forwardRef(
21
+ function FileDropZone2({
22
+ status,
23
+ className,
24
+ children,
25
+ disabled,
26
+ onDragOver,
27
+ onDragLeave,
28
+ onDrop,
29
+ ...restProps
30
+ }, ref) {
31
+ const targetWindow = window.useWindow();
32
+ styles.useComponentCssInjection({
33
+ testId: "salt-file-drop-zone",
34
+ css: FileDropZone$1,
35
+ window: targetWindow
36
+ });
37
+ const [isActive, setActive] = React.useState(false);
38
+ const regionRef = React.useRef(null);
39
+ const handleRef = useForkRef.useForkRef(ref, regionRef);
40
+ const handleDragOver = (event) => {
41
+ event.preventDefault();
42
+ event.stopPropagation();
43
+ if (disabled) {
44
+ if (event.dataTransfer) {
45
+ event.dataTransfer.dropEffect = "none";
46
+ }
47
+ return;
48
+ }
49
+ if (event.dataTransfer) {
50
+ event.dataTransfer.dropEffect = "copy";
51
+ }
52
+ if (!isActive && utils.containsFiles(event)) {
53
+ setActive(true);
54
+ }
55
+ onDragOver == null ? void 0 : onDragOver(event);
56
+ };
57
+ const handleDragLeave = (event) => {
58
+ if (disabled) {
59
+ return;
60
+ }
61
+ const region = regionRef == null ? void 0 : regionRef.current;
62
+ const eventTarget = event.relatedTarget;
63
+ if (eventTarget !== region && !(region == null ? void 0 : region.contains(eventTarget))) {
64
+ setActive(false);
65
+ }
66
+ onDragLeave == null ? void 0 : onDragLeave(event);
67
+ };
68
+ const handleDrop = (event) => {
69
+ if (disabled) {
70
+ return;
71
+ }
72
+ event.preventDefault();
73
+ const files = utils.extractFiles(event);
74
+ setActive(false);
75
+ onDrop == null ? void 0 : onDrop(event, files);
76
+ };
77
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
78
+ className: clsx.clsx(
79
+ withBaseName(),
80
+ {
81
+ [withBaseName(status)]: status,
82
+ [withBaseName("active")]: isActive,
83
+ [withBaseName("disabled")]: disabled
84
+ },
85
+ className
86
+ ),
87
+ "aria-disabled": disabled,
88
+ onDragLeave: handleDragLeave,
89
+ onDragOver: handleDragOver,
90
+ onDrop: handleDrop,
91
+ ref: handleRef,
92
+ ...restProps,
93
+ children
94
+ });
95
+ }
96
+ );
97
+
98
+ exports.FileDropZone = FileDropZone;
99
+ //# sourceMappingURL=FileDropZone.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n DragEventHandler,\n forwardRef,\n DragEvent,\n useRef,\n useState,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport fileDropZoneCss from \"./FileDropZone.css\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nexport interface FileDropZoneProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n /**\n * If `true`, the file drop zone will be disabled.\n */\n disabled?: boolean;\n /**\n * Status indicator to be displayed.\n */\n status?: Omit<ValidationStatus, \"info\" | \"warning\">;\n /**\n * Callback for on drop event\n */\n onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n status,\n className,\n children,\n disabled,\n onDragOver,\n onDragLeave,\n onDrop,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-file-drop-zone\",\n css: fileDropZoneCss,\n window: targetWindow,\n });\n const [isActive, setActive] = useState(false);\n\n const regionRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, regionRef);\n\n const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n // Need to cancel the default events to allow drop\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n\n event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"none\";\n }\n return;\n }\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"copy\";\n }\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n onDragOver?.(event);\n };\n\n const handleDragLeave: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n const region = regionRef?.current;\n const eventTarget = event.relatedTarget;\n if (eventTarget !== region && !region?.contains(eventTarget as Node)) {\n setActive(false);\n }\n onDragLeave?.(event);\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n event.preventDefault();\n const files = extractFiles(event);\n setActive(false);\n onDrop?.(event, files);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status as string)]: status,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n aria-disabled={disabled}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={handleRef}\n {...restProps}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","FileDropZone","useWindow","useComponentCssInjection","fileDropZoneCss","useState","useRef","useForkRef","containsFiles","extractFiles","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aACP,CAAA;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAE5C,IAAM,MAAA,SAAA,GAAYC,aAAuB,IAAI,CAAA,CAAA;AAC7C,IAAM,MAAA,SAAA,GAAYC,qBAAW,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AAE3C,IAAM,MAAA,cAAA,GAAmD,CAAC,KAAU,KAAA;AAIlE,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,IAAI,MAAM,YAAc,EAAA;AACtB,UAAA,KAAA,CAAM,aAAa,UAAa,GAAA,MAAA,CAAA;AAAA,SAClC;AACA,QAAA,OAAA;AAAA,OACF;AACA,MAAA,IAAI,MAAM,YAAc,EAAA;AACtB,QAAA,KAAA,CAAM,aAAa,UAAa,GAAA,MAAA,CAAA;AAAA,OAClC;AACA,MAAA,IAAI,CAAC,QAAA,IAAYC,mBAAc,CAAA,KAAK,CAAG,EAAA;AACrC,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,OAChB;AACA,MAAa,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACf,CAAA;AAEA,IAAM,MAAA,eAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,OAAA;AAAA,OACF;AACA,MAAA,MAAM,SAAS,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,OAAA,CAAA;AAC1B,MAAA,MAAM,cAAc,KAAM,CAAA,aAAA,CAAA;AAC1B,MAAA,IAAI,WAAgB,KAAA,MAAA,IAAU,EAAC,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAQ,SAAS,WAAsB,CAAA,CAAA,EAAA;AACpE,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,OACjB;AACA,MAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KAChB,CAAA;AAEA,IAAM,MAAA,UAAA,GAA+C,CAAC,KAAU,KAAA;AAC9D,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,OAAA;AAAA,OACF;AACA,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAM,MAAA,KAAA,GAAQC,mBAAa,KAAK,CAAA,CAAA;AAChC,MAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,MAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAS,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,MAAgB,CAAI,GAAA,MAAA;AAAA,UAClC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,eAAe,EAAA,QAAA;AAAA,MACf,WAAa,EAAA,eAAA;AAAA,MACb,UAAY,EAAA,cAAA;AAAA,MACZ,MAAQ,EAAA,UAAA;AAAA,MACR,GAAK,EAAA,SAAA;AAAA,MACJ,GAAG,SAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -0,0 +1,25 @@
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 icons = require('@salt-ds/icons');
8
+ var StatusIndicator = require('../status-indicator/StatusIndicator.js');
9
+
10
+ const FileDropZoneIcon = React.forwardRef(function FileDropZoneIcon2({ status, size = 2, ...rest }, ref) {
11
+ const iconProps = {
12
+ ref,
13
+ size,
14
+ ...rest
15
+ };
16
+ return status ? /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
17
+ status,
18
+ ...iconProps
19
+ }) : /* @__PURE__ */ jsxRuntime.jsx(icons.UploadIcon, {
20
+ ...iconProps
21
+ });
22
+ });
23
+
24
+ exports.FileDropZoneIcon = FileDropZoneIcon;
25
+ //# sourceMappingURL=FileDropZoneIcon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FileDropZoneIcon.js","sources":["../src/file-drop-zone/FileDropZoneIcon.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconProps, UploadIcon } from \"@salt-ds/icons\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\n\nexport interface FileDropZoneIconProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status?: ValidationStatus;\n}\n\nexport const FileDropZoneIcon = forwardRef<\n SVGSVGElement,\n FileDropZoneIconProps\n>(function FileDropZoneIcon({ status, size = 2, ...rest }, ref) {\n const iconProps = {\n ref,\n size,\n ...rest,\n };\n return status ? (\n <StatusIndicator status={status} {...iconProps} />\n ) : (\n <UploadIcon {...iconProps} />\n );\n});\n"],"names":["forwardRef","FileDropZoneIcon","jsx","StatusIndicator","UploadIcon"],"mappings":";;;;;;;;;AAWa,MAAA,gBAAA,GAAmBA,gBAG9B,CAAA,SAASC,iBAAiB,CAAA,EAAE,QAAQ,IAAO,GAAA,CAAA,EAAA,GAAM,IAAK,EAAA,EAAG,GAAK,EAAA;AAC9D,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,GAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACA,EAAA,OAAO,yBACJC,cAAA,CAAAC,+BAAA,EAAA;AAAA,IAAgB,MAAA;AAAA,IAAiB,GAAG,SAAA;AAAA,GAAW,oBAE/CD,cAAA,CAAAE,gBAAA,EAAA;AAAA,IAAY,GAAG,SAAA;AAAA,GAAW,CAAA,CAAA;AAE/B,CAAC;;;;"}
@@ -0,0 +1,58 @@
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
+ require('../utils/useFloatingUI/useFloatingUI.js');
8
+ var useForkRef = require('../utils/useForkRef.js');
9
+ require('../utils/useId.js');
10
+ require('../salt-provider/SaltProvider.js');
11
+ require('../viewport/ViewportProvider.js');
12
+ require('clsx');
13
+ var Button = require('../button/Button.js');
14
+
15
+ const FileDropZoneTrigger = React.forwardRef(function FileDropZoneTrigger2({ accept, children, disabled, multiple = false, onChange, ...rest }, ref) {
16
+ const buttonRef = React.useRef(null);
17
+ const fileInputRef = React.useRef(null);
18
+ const triggerRef = useForkRef.useForkRef(ref, buttonRef);
19
+ const handleFocus = (event) => {
20
+ var _a;
21
+ event.stopPropagation();
22
+ (_a = buttonRef.current) == null ? void 0 : _a.focus();
23
+ };
24
+ const handleClick = (event) => {
25
+ var _a;
26
+ event.stopPropagation();
27
+ (_a = fileInputRef.current) == null ? void 0 : _a.click();
28
+ };
29
+ const handleChange = (event) => {
30
+ var _a;
31
+ const files = Array.from((_a = event.target.files) != null ? _a : []);
32
+ onChange == null ? void 0 : onChange(event, files);
33
+ };
34
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
35
+ children: [
36
+ /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
37
+ onClick: handleClick,
38
+ disabled,
39
+ ref: triggerRef,
40
+ ...rest,
41
+ children: children != null ? children : "Browse files"
42
+ }),
43
+ /* @__PURE__ */ jsxRuntime.jsx("input", {
44
+ accept,
45
+ className: "input-hidden",
46
+ disabled,
47
+ multiple,
48
+ onChange: handleChange,
49
+ onFocus: handleFocus,
50
+ ref: fileInputRef,
51
+ type: "file"
52
+ })
53
+ ]
54
+ });
55
+ });
56
+
57
+ exports.FileDropZoneTrigger = FileDropZoneTrigger;
58
+ //# sourceMappingURL=FileDropZoneTrigger.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import {\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport { useForkRef } from \"../utils\";\nimport { Button } from \"../button\";\n\nexport interface FileDropZoneTriggerProps\n extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n /**\n * `accept` attribute for HTML <input>.\n *\n * A comma separated list of file types the user can pick from the file input dialog box.\n */\n accept?: string;\n /**\n * Disable all trigger elements.\n */\n disabled?: boolean;\n /**\n * Allows multiple files to be uploaded.\n */\n multiple?: boolean;\n /**\n * Callback for input change event\n */\n onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n HTMLButtonElement,\n FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n { accept, children, disabled, multiple = false, onChange, ...rest },\n ref\n) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const triggerRef = useForkRef(ref, buttonRef);\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current?.focus();\n };\n\n const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current?.click();\n };\n\n const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n const files = Array.from((event.target as HTMLInputElement).files ?? []);\n onChange?.(event, files);\n };\n return (\n <>\n <Button\n onClick={handleClick}\n disabled={disabled}\n ref={triggerRef}\n {...rest}\n >\n {children ?? \"Browse files\"}\n </Button>\n <input\n accept={accept}\n className=\"input-hidden\"\n disabled={disabled}\n multiple={multiple}\n onChange={handleChange}\n onFocus={handleFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </>\n );\n});\n"],"names":["forwardRef","FileDropZoneTrigger","useRef","useForkRef","jsxs","Fragment","jsx","Button"],"mappings":";;;;;;;;;;;;;;AAgCO,MAAM,mBAAsB,GAAAA,gBAAA,CAGjC,SAASC,oBAAAA,CACT,EAAE,MAAA,EAAQ,QAAU,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,EAAO,QAAa,EAAA,GAAA,IAAA,IAC7D,GACA,EAAA;AACA,EAAM,MAAA,SAAA,GAAYC,aAA0B,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,YAAA,GAAeA,aAAyB,IAAI,CAAA,CAAA;AAClD,EAAM,MAAA,UAAA,GAAaC,qBAAW,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AAI5C,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AA7C/D,IAAA,IAAA,EAAA,CAAA;AA8CI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAA6C,KAAA;AAlDpE,IAAA,IAAA,EAAA,CAAA;AAmDI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,YAAA,CAAa,YAAb,IAAsB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAA4C,KAAA;AAvDpE,IAAA,IAAA,EAAA,CAAA;AAwDI,IAAM,MAAA,KAAA,GAAQ,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,KAAA,CAAM,OAA4B,KAAlC,KAAA,IAAA,GAAA,EAAA,GAA2C,EAAE,CAAA,CAAA;AACvE,IAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,GACpB,CAAA;AACA,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,aAAA,EAAA;AAAA,QACC,OAAS,EAAA,WAAA;AAAA,QACT,QAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAY,EAAA,QAAA,IAAA,IAAA,GAAA,QAAA,GAAA,cAAA;AAAA,OACf,CAAA;AAAA,sBACCD,cAAA,CAAA,OAAA,EAAA;AAAA,QACC,MAAA;AAAA,QACA,SAAU,EAAA,cAAA;AAAA,QACV,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,GAAK,EAAA,YAAA;AAAA,QACL,IAAK,EAAA,MAAA;AAAA,OACP,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -0,0 +1,30 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const containsFiles = (e) => {
6
+ if (!e.dataTransfer) {
7
+ const target = e.target;
8
+ return target == null ? void 0 : target.files;
9
+ }
10
+ return Array.prototype.some.call(
11
+ e.dataTransfer.types,
12
+ (type) => type === "Files"
13
+ );
14
+ };
15
+ const extractFiles = (e) => {
16
+ var _a;
17
+ if (containsFiles(e)) {
18
+ if (e.dataTransfer) {
19
+ return Array.from(e.dataTransfer.files);
20
+ }
21
+ if (e.target) {
22
+ return Array.from((_a = e.target.files) != null ? _a : []);
23
+ }
24
+ }
25
+ return [];
26
+ };
27
+
28
+ exports.containsFiles = containsFiles;
29
+ exports.extractFiles = extractFiles;
30
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import { DragEvent } from \"react\";\n\nexport const containsFiles = (e: DragEvent) => {\n if (!e.dataTransfer) {\n const target = e.target as HTMLInputElement;\n return target?.files;\n }\n\n return Array.prototype.some.call(\n e.dataTransfer.types,\n (type) => type === \"Files\"\n );\n};\n\nexport const extractFiles = (e: DragEvent): File[] => {\n if (containsFiles(e)) {\n if (e.dataTransfer) {\n return Array.from(e.dataTransfer.files);\n }\n\n if (e.target) {\n return Array.from((e.target as HTMLInputElement).files ?? []);\n }\n }\n\n return [];\n};\n"],"names":[],"mappings":";;;;AAEa,MAAA,aAAA,GAAgB,CAAC,CAAiB,KAAA;AAC7C,EAAI,IAAA,CAAC,EAAE,YAAc,EAAA;AACnB,IAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,IAAA,OAAO,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACjB;AAEA,EAAO,OAAA,KAAA,CAAM,UAAU,IAAK,CAAA,IAAA;AAAA,IAC1B,EAAE,YAAa,CAAA,KAAA;AAAA,IACf,CAAC,SAAS,IAAS,KAAA,OAAA;AAAA,GACrB,CAAA;AACF,EAAA;AAEa,MAAA,YAAA,GAAe,CAAC,CAAyB,KAAA;AAdtD,EAAA,IAAA,EAAA,CAAA;AAeE,EAAI,IAAA,aAAA,CAAc,CAAC,CAAG,EAAA;AACpB,IAAA,IAAI,EAAE,YAAc,EAAA;AAClB,MAAA,OAAO,KAAM,CAAA,IAAA,CAAK,CAAE,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,KACxC;AAEA,IAAA,IAAI,EAAE,MAAQ,EAAA;AACZ,MAAA,OAAO,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,CAAA,CAAE,OAA4B,KAA9B,KAAA,IAAA,GAAA,EAAA,GAAuC,EAAE,CAAA,CAAA;AAAA,KAC9D;AAAA,GACF;AAEA,EAAA,OAAO,EAAC,CAAA;AACV;;;;;"}
package/dist-cjs/index.js CHANGED
@@ -26,6 +26,9 @@ var InteractableCard = require('./card/InteractableCard.js');
26
26
  var Checkbox = require('./checkbox/Checkbox.js');
27
27
  var CheckboxGroup = require('./checkbox/CheckboxGroup.js');
28
28
  var CheckboxIcon = require('./checkbox/CheckboxIcon.js');
29
+ var FileDropZone = require('./file-drop-zone/FileDropZone.js');
30
+ var FileDropZoneIcon = require('./file-drop-zone/FileDropZoneIcon.js');
31
+ var FileDropZoneTrigger = require('./file-drop-zone/FileDropZoneTrigger.js');
29
32
  var FlexItem = require('./flex-item/FlexItem.js');
30
33
  var FlexLayout = require('./flex-layout/FlexLayout.js');
31
34
  var FlowLayout = require('./flow-layout/FlowLayout.js');
@@ -124,6 +127,9 @@ exports.InteractableCard = InteractableCard.InteractableCard;
124
127
  exports.Checkbox = Checkbox.Checkbox;
125
128
  exports.CheckboxGroup = CheckboxGroup.CheckboxGroup;
126
129
  exports.CheckboxIcon = CheckboxIcon.CheckboxIcon;
130
+ exports.FileDropZone = FileDropZone.FileDropZone;
131
+ exports.FileDropZoneIcon = FileDropZoneIcon.FileDropZoneIcon;
132
+ exports.FileDropZoneTrigger = FileDropZoneTrigger.FileDropZoneTrigger;
127
133
  exports.FLEX_ITEM_ALIGNMENTS = FlexItem.FLEX_ITEM_ALIGNMENTS;
128
134
  exports.FlexItem = FlexItem.FlexItem;
129
135
  exports.FLEX_ALIGNMENT_BASE = FlexLayout.FLEX_ALIGNMENT_BASE;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -55,7 +55,7 @@ const Link = React.forwardRef(function Link2({
55
55
  }),
56
56
  /* @__PURE__ */ jsxRuntime.jsx("span", {
57
57
  className: withBaseName("externalLinkADA"),
58
- children: "External Link"
58
+ children: "External"
59
59
  })
60
60
  ]
61
61
  })
@@ -1 +1 @@
1
- {"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { IconProps, TearOutIcon } from \"@salt-ds/icons\";\nimport { makePrefixer } from \"../utils\";\nimport { Text, TextProps } from \"../text\";\n\nimport linkCss from \"./Link.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps extends Omit<TextProps<\"a\">, \"as\" | \"disabled\"> {\n IconComponent?: ComponentType<IconProps> | null;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n {\n IconComponent = TearOutIcon,\n href,\n className,\n children,\n variant = \"primary\",\n target = \"_self\",\n ...rest\n },\n ref\n): ReactElement<LinkProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link\",\n css: linkCss,\n window: targetWindow,\n });\n\n return (\n <Text\n as=\"a\"\n className={clsx(withBaseName(), className)}\n href={href}\n ref={ref}\n target={target}\n variant={variant}\n {...rest}\n >\n {children}\n {target === \"_blank\" && (\n <>\n {IconComponent && (\n <IconComponent className={withBaseName(\"icon\")} aria-hidden />\n )}\n <span className={withBaseName(\"externalLinkADA\")}>External Link</span>\n </>\n )}\n </Text>\n );\n});\n"],"names":["makePrefixer","forwardRef","Link","TearOutIcon","useWindow","useComponentCssInjection","linkCss","jsxs","Text","clsx","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AAY/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,aAAgB,GAAAC,iBAAA;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,IAAA;AACL,CAAA,EACA,GACyB,EAAA;AACzB,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;AAED,EAAA,uBACGC,eAAA,CAAAC,SAAA,EAAA;AAAA,IACC,EAAG,EAAA,GAAA;AAAA,IACH,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAA;AAAA,IACA,GAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,WAAW,QACV,oBAAAF,eAAA,CAAAG,mBAAA,EAAA;AAAA,QACG,QAAA,EAAA;AAAA,UAAA,aAAA,oBACEC,cAAA,CAAA,aAAA,EAAA;AAAA,YAAc,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAAG,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,0BAE7DA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YAAG,QAAA,EAAA,eAAA;AAAA,WAAa,CAAA;AAAA,SAAA;AAAA,OACjE,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { IconProps, TearOutIcon } from \"@salt-ds/icons\";\nimport { makePrefixer } from \"../utils\";\nimport { Text, TextProps } from \"../text\";\n\nimport linkCss from \"./Link.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps extends Omit<TextProps<\"a\">, \"as\" | \"disabled\"> {\n IconComponent?: ComponentType<IconProps> | null;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n {\n IconComponent = TearOutIcon,\n href,\n className,\n children,\n variant = \"primary\",\n target = \"_self\",\n ...rest\n },\n ref\n): ReactElement<LinkProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link\",\n css: linkCss,\n window: targetWindow,\n });\n\n return (\n <Text\n as=\"a\"\n className={clsx(withBaseName(), className)}\n href={href}\n ref={ref}\n target={target}\n variant={variant}\n {...rest}\n >\n {children}\n {target === \"_blank\" && (\n <>\n {IconComponent && (\n <IconComponent className={withBaseName(\"icon\")} aria-hidden />\n )}\n <span className={withBaseName(\"externalLinkADA\")}>External</span>\n </>\n )}\n </Text>\n );\n});\n"],"names":["makePrefixer","forwardRef","Link","TearOutIcon","useWindow","useComponentCssInjection","linkCss","jsxs","Text","clsx","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AAY/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,aAAgB,GAAAC,iBAAA;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,IAAA;AACL,CAAA,EACA,GACyB,EAAA;AACzB,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;AAED,EAAA,uBACGC,eAAA,CAAAC,SAAA,EAAA;AAAA,IACC,EAAG,EAAA,GAAA;AAAA,IACH,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAA;AAAA,IACA,GAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,WAAW,QACV,oBAAAF,eAAA,CAAAG,mBAAA,EAAA;AAAA,QACG,QAAA,EAAA;AAAA,UAAA,aAAA,oBACEC,cAAA,CAAA,aAAA,EAAA;AAAA,YAAc,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAAG,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,0BAE7DA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YAAG,QAAA,EAAA,UAAA;AAAA,WAAQ,CAAA;AAAA,SAAA;AAAA,OAC5D,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n background: var(--saltPanel-background, var(--panel-background));\n color: var(--saltPanel-color, initial);\n height: var(--saltPanel-height, 100%);\n overflow: auto;\n padding: var(--saltPanel-padding, var(--salt-size-container-spacing));\n width: var(--saltPanel-width, 100%);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n";
3
+ var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n background: var(--saltPanel-background, var(--panel-background));\n color: var(--saltPanel-color, initial);\n height: var(--saltPanel-height, 100%);\n overflow: auto;\n padding: var(--saltPanel-padding, var(--salt-size-container-spacing));\n width: var(--saltPanel-width, 100%);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Panel.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * Set the default selected radio button in the group\n */\n checked?: boolean;\n /**\n * Set the disabled state\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * Set the error state\n */\n error?: boolean;\n /**\n * Props to be passed to the radio input\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the radio icon\n */\n label?: ReactNode;\n /**\n * Name of the radio group\n */\n name?: string;\n /**\n * Callback for blur event\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback for focus event\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Set the read only state.\n */\n readOnly?: boolean;\n /**\n * Value of radio button\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * RadioButton 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 RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled: disabledProp,\n error,\n inputProps = {},\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n readOnly: readOnlyProp,\n value,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const disabled = radioGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly = radioGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? radioGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\n\n const radioGroupChecked =\n radioGroup?.value != null && value != null\n ? radioGroup.value === value\n : checkedProp;\n const name = nameProp ?? radioGroup?.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (readOnly) return;\n\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n inputOnChange?.(event);\n radioGroup?.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-describedby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy\n ) || undefined\n }\n aria-labelledby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy\n ) || undefined\n }\n className={clsx(withBaseName(\"input\"), inputClassName)}\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n {...restInputProps}\n />\n <RadioButtonIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","RadioButton","useWindow","useComponentCssInjection","radioButtonCss","useFormFieldProps","useRadioGroup","useControlled","_a","jsxs","clsx","jsx","RadioButtonIcon"],"mappings":"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"}
1
+ {"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * Set the default selected radio button in the group\n */\n checked?: boolean;\n /**\n * Set the disabled state\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * Set the error state\n */\n error?: boolean;\n /**\n * Props to be passed to the radio input\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the radio icon\n */\n label?: ReactNode;\n /**\n * Name of the radio group\n */\n name?: string;\n /**\n * Callback for blur event\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback for focus event\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Set the read only state.\n * **Note**: Setting a standalone radio button as read-only is not accessible. The whole radio buttton group should be set as read-only instead.\n */\n readOnly?: boolean;\n /**\n * Value of radio button\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * RadioButton 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 RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled: disabledProp,\n error,\n inputProps = {},\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n readOnly: readOnlyProp,\n value,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const disabled = radioGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly = radioGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? radioGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\n\n const radioGroupChecked =\n radioGroup?.value != null && value != null\n ? radioGroup.value === value\n : checkedProp;\n const name = nameProp ?? radioGroup?.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (readOnly) return;\n\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n inputOnChange?.(event);\n radioGroup?.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-describedby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy\n ) || undefined\n }\n aria-labelledby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy\n ) || undefined\n }\n className={clsx(withBaseName(\"input\"), inputClassName)}\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n {...restInputProps}\n />\n <RadioButtonIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","RadioButton","useWindow","useComponentCssInjection","radioButtonCss","useFormFieldProps","useRadioGroup","useControlled","_a","jsxs","clsx","jsx","RadioButtonIcon"],"mappings":"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"}
@@ -63,6 +63,8 @@ const RadioButtonGroup = React.forwardRef(function RadioButtonGroup2(props, ref)
63
63
  };
64
64
  const name = useId.useId(nameProp);
65
65
  return /* @__PURE__ */ jsxRuntime.jsx("fieldset", {
66
+ role: "radiogroup",
67
+ "aria-readonly": readOnly,
66
68
  "aria-labelledby": clsx.clsx(a11yProps == null ? void 0 : a11yProps["aria-labelledby"], ariaLabelledBy) || void 0,
67
69
  "aria-describedby": clsx.clsx(a11yProps == null ? void 0 : a11yProps["aria-describedby"], ariaDescribedBy) || void 0,
68
70
  className: clsx.clsx(