@salt-ds/core 1.57.1 → 1.58.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/css/salt-core.css +85 -74
  3. package/dist-cjs/checkbox/Checkbox.js +2 -2
  4. package/dist-cjs/checkbox/Checkbox.js.map +1 -1
  5. package/dist-cjs/dialog/Dialog.js +10 -3
  6. package/dist-cjs/dialog/Dialog.js.map +1 -1
  7. package/dist-cjs/dialog/DialogContent.js +9 -1
  8. package/dist-cjs/dialog/DialogContent.js.map +1 -1
  9. package/dist-cjs/dialog/DialogContext.js +19 -4
  10. package/dist-cjs/dialog/DialogContext.js.map +1 -1
  11. package/dist-cjs/dialog/DialogHeader.js +13 -4
  12. package/dist-cjs/dialog/DialogHeader.js.map +1 -1
  13. package/dist-cjs/dropdown/Dropdown.css.js +1 -1
  14. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  15. package/dist-cjs/index.js +2 -0
  16. package/dist-cjs/index.js.map +1 -1
  17. package/dist-cjs/input/Input.css.js +1 -1
  18. package/dist-cjs/input/Input.js +2 -2
  19. package/dist-cjs/input/Input.js.map +1 -1
  20. package/dist-cjs/kbd/Kbd.css.js +6 -0
  21. package/dist-cjs/kbd/Kbd.css.js.map +1 -0
  22. package/dist-cjs/kbd/Kbd.js +38 -0
  23. package/dist-cjs/kbd/Kbd.js.map +1 -0
  24. package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
  25. package/dist-cjs/multiline-input/MultilineInput.js +2 -2
  26. package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
  27. package/dist-cjs/number-input/NumberInput.css.js +1 -1
  28. package/dist-cjs/number-input/NumberInput.js.map +1 -1
  29. package/dist-cjs/pill-input/PillInput.css.js +1 -1
  30. package/dist-cjs/pill-input/PillInput.js +2 -2
  31. package/dist-cjs/pill-input/PillInput.js.map +1 -1
  32. package/dist-cjs/switch/Switch.js +2 -8
  33. package/dist-cjs/switch/Switch.js.map +1 -1
  34. package/dist-es/checkbox/Checkbox.js +2 -2
  35. package/dist-es/checkbox/Checkbox.js.map +1 -1
  36. package/dist-es/dialog/Dialog.js +10 -3
  37. package/dist-es/dialog/Dialog.js.map +1 -1
  38. package/dist-es/dialog/DialogContent.js +9 -1
  39. package/dist-es/dialog/DialogContent.js.map +1 -1
  40. package/dist-es/dialog/DialogContext.js +20 -5
  41. package/dist-es/dialog/DialogContext.js.map +1 -1
  42. package/dist-es/dialog/DialogHeader.js +14 -5
  43. package/dist-es/dialog/DialogHeader.js.map +1 -1
  44. package/dist-es/dropdown/Dropdown.css.js +1 -1
  45. package/dist-es/dropdown/Dropdown.js.map +1 -1
  46. package/dist-es/index.js +1 -0
  47. package/dist-es/index.js.map +1 -1
  48. package/dist-es/input/Input.css.js +1 -1
  49. package/dist-es/input/Input.js +2 -2
  50. package/dist-es/input/Input.js.map +1 -1
  51. package/dist-es/kbd/Kbd.css.js +4 -0
  52. package/dist-es/kbd/Kbd.css.js.map +1 -0
  53. package/dist-es/kbd/Kbd.js +36 -0
  54. package/dist-es/kbd/Kbd.js.map +1 -0
  55. package/dist-es/menu/MenuBase.js +1 -1
  56. package/dist-es/multiline-input/MultilineInput.css.js +1 -1
  57. package/dist-es/multiline-input/MultilineInput.js +2 -2
  58. package/dist-es/multiline-input/MultilineInput.js.map +1 -1
  59. package/dist-es/number-input/NumberInput.css.js +1 -1
  60. package/dist-es/number-input/NumberInput.js.map +1 -1
  61. package/dist-es/overlay/Overlay.js +1 -1
  62. package/dist-es/pill-input/PillInput.css.js +1 -1
  63. package/dist-es/pill-input/PillInput.js +2 -2
  64. package/dist-es/pill-input/PillInput.js.map +1 -1
  65. package/dist-es/switch/Switch.js +2 -8
  66. package/dist-es/switch/Switch.js.map +1 -1
  67. package/dist-es/tooltip/useTooltip.js +1 -1
  68. package/dist-types/dialog/Dialog.d.ts +2 -0
  69. package/dist-types/dialog/DialogContext.d.ts +8 -7
  70. package/dist-types/dropdown/Dropdown.d.ts +1 -1
  71. package/dist-types/index.d.ts +1 -0
  72. package/dist-types/input/Input.d.ts +1 -1
  73. package/dist-types/kbd/Kbd.d.ts +8 -0
  74. package/dist-types/kbd/index.d.ts +1 -0
  75. package/dist-types/multiline-input/MultilineInput.d.ts +1 -1
  76. package/dist-types/number-input/NumberInput.d.ts +1 -1
  77. package/dist-types/pill-input/PillInput.d.ts +1 -1
  78. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @salt-ds/core
2
2
 
3
+ ## 1.58.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 23b5f53: Added tertiary variant support to `ComboBox`, `Dropdown`, `Input`, `MultilineInput` and `NumberInput`.
8
+ - 133a519: Added `Kbd`.
9
+
10
+ Kbd is a decorative element used to represent specific keyboard keys.
11
+
12
+ ```tsx
13
+ <>
14
+ <Kbd>cmd</Kbd>
15
+ <Kbd variant="secondary">shift</Kbd>
16
+ <Kbd variant="tertiary">ctrl</Kbd>
17
+ </>
18
+ ```
19
+
20
+ ### Patch Changes
21
+
22
+ - aae0846: Fixed some controls having empty `aria-labelledby` or `aria-describedby` attributes when used outside a FormField.
23
+ - 503c186: - Fixed dialog accessible name to exclude interactive elements and added keyboard navigation for scrollable dialog content.
24
+ - Deprecated `idProp` prop in Dialog component.
25
+
3
26
  ## 1.57.1
4
27
 
5
28
  ### Patch Changes
package/css/salt-core.css CHANGED
@@ -935,8 +935,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
935
935
  overflow: hidden;
936
936
  }
937
937
 
938
- /* src/combo-box/ComboBox.css */
939
-
940
938
  /* src/dialog/Dialog.css */
941
939
  .saltDialog {
942
940
  position: fixed;
@@ -1259,7 +1257,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
1259
1257
  overflow: hidden;
1260
1258
  }
1261
1259
  .saltDropdown:hover {
1262
- background: var(--dropdown-background-hover);
1263
1260
  cursor: var(--salt-cursor-hover);
1264
1261
  }
1265
1262
  .saltDropdown-bordered.saltDropdown {
@@ -1320,10 +1317,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
1320
1317
  .saltDropdown-primary {
1321
1318
  --dropdown-color: var(--salt-content-primary-foreground);
1322
1319
  --dropdown-background: var(--salt-editable-primary-background);
1323
- --dropdown-background-active: var(--salt-editable-primary-background-active);
1324
- --dropdown-background-hover: var(--salt-editable-primary-background-hover);
1325
1320
  --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);
1326
- --dropdown-background-readonly: var(--salt-editable-primary-background-readonly);
1321
+ --dropdown-background-readonly: var(--salt-editable-background-readonly);
1327
1322
  --dropdown-borderColor: var(--salt-editable-borderColor);
1328
1323
  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);
1329
1324
  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -1332,10 +1327,18 @@ a:focus .saltCard-interactable.saltCard-disabled {
1332
1327
  .saltDropdown-secondary {
1333
1328
  --dropdown-color: var(--salt-content-primary-foreground);
1334
1329
  --dropdown-background: var(--salt-editable-secondary-background);
1335
- --dropdown-background-active: var(--salt-editable-secondary-background-active);
1336
- --dropdown-background-hover: var(--salt-editable-secondary-background-active);
1337
1330
  --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);
1338
- --dropdown-background-readonly: var(--salt-editable-secondary-background-readonly);
1331
+ --dropdown-background-readonly: var(--salt-editable-background-readonly);
1332
+ --dropdown-borderColor: var(--salt-editable-borderColor);
1333
+ --dropdown-borderColor-active: var(--salt-editable-borderColor-active);
1334
+ --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);
1335
+ --dropdown-outlineColor: var(--salt-focused-outlineColor);
1336
+ }
1337
+ .saltDropdown-tertiary {
1338
+ --dropdown-color: var(--salt-content-primary-foreground);
1339
+ --dropdown-background: var(--salt-editable-tertiary-background);
1340
+ --dropdown-background-disabled: var(--salt-editable-tertiary-background-disabled);
1341
+ --dropdown-background-readonly: var(--salt-editable-background-readonly);
1339
1342
  --dropdown-borderColor: var(--salt-editable-borderColor);
1340
1343
  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);
1341
1344
  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -1344,8 +1347,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
1344
1347
  .saltDropdown-error {
1345
1348
  --dropdown-color: var(--salt-content-primary-foreground);
1346
1349
  --dropdown-background: var(--salt-status-error-background);
1347
- --dropdown-background-active: var(--salt-status-error-background);
1348
- --dropdown-background-hover: var(--salt-status-error-background);
1349
1350
  --dropdown-background-readonly: var(--salt-status-error-background);
1350
1351
  --dropdown-borderColor: var(--salt-status-error-borderColor);
1351
1352
  --dropdown-borderColor-active: var(--salt-status-error-borderColor);
@@ -1355,8 +1356,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
1355
1356
  .saltDropdown-warning {
1356
1357
  --dropdown-color: var(--salt-content-primary-foreground);
1357
1358
  --dropdown-background: var(--salt-status-warning-background);
1358
- --dropdown-background-active: var(--salt-status-warning-background);
1359
- --dropdown-background-hover: var(--salt-status-warning-background);
1360
1359
  --dropdown-background-readonly: var(--salt-status-warning-background);
1361
1360
  --dropdown-borderColor: var(--salt-status-warning-borderColor);
1362
1361
  --dropdown-borderColor-active: var(--salt-status-warning-borderColor);
@@ -1366,8 +1365,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
1366
1365
  .saltDropdown-success {
1367
1366
  --dropdown-color: var(--salt-content-primary-foreground);
1368
1367
  --dropdown-background: var(--salt-status-success-background);
1369
- --dropdown-background-active: var(--salt-status-success-background);
1370
- --dropdown-background-hover: var(--salt-status-success-background);
1371
1368
  --dropdown-background-readonly: var(--salt-status-success-background);
1372
1369
  --dropdown-borderColor: var(--salt-status-success-borderColor);
1373
1370
  --dropdown-borderColor-active: var(--salt-status-success-borderColor);
@@ -1376,7 +1373,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
1376
1373
  }
1377
1374
  .saltDropdown:focus,
1378
1375
  .saltDropdown:focus:hover {
1379
- background: var(--dropdown-background-active);
1380
1376
  cursor: var(--salt-cursor-hover);
1381
1377
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);
1382
1378
  }
@@ -1689,7 +1685,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
1689
1685
  overflow: hidden;
1690
1686
  }
1691
1687
  .saltInput:hover {
1692
- background: var(--saltInput-background-hover, var(--input-background-hover));
1693
1688
  cursor: var(--salt-cursor-text);
1694
1689
  }
1695
1690
  .saltInput-bordered.saltInput {
@@ -1749,10 +1744,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
1749
1744
  }
1750
1745
  .saltInput-primary {
1751
1746
  --input-background: var(--salt-editable-primary-background);
1752
- --input-background-active: var(--salt-editable-primary-background-active);
1753
- --input-background-hover: var(--salt-editable-primary-background-hover);
1754
1747
  --input-background-disabled: var(--salt-editable-primary-background-disabled);
1755
- --input-background-readonly: var(--salt-editable-primary-background-readonly);
1748
+ --input-background-readonly: var(--salt-editable-background-readonly);
1756
1749
  --input-borderColor: var(--salt-editable-borderColor);
1757
1750
  --input-borderColor-active: var(--salt-editable-borderColor-active);
1758
1751
  --input-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -1760,10 +1753,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
1760
1753
  }
1761
1754
  .saltInput-secondary {
1762
1755
  --input-background: var(--salt-editable-secondary-background);
1763
- --input-background-active: var(--salt-editable-secondary-background-active);
1764
- --input-background-hover: var(--salt-editable-secondary-background-active);
1765
1756
  --input-background-disabled: var(--salt-editable-secondary-background-disabled);
1766
- --input-background-readonly: var(--salt-editable-secondary-background-readonly);
1757
+ --input-background-readonly: var(--salt-editable-background-readonly);
1758
+ --input-borderColor: var(--salt-editable-borderColor);
1759
+ --input-borderColor-active: var(--salt-editable-borderColor-active);
1760
+ --input-borderColor-hover: var(--salt-editable-borderColor-hover);
1761
+ --input-outlineColor: var(--salt-focused-outlineColor);
1762
+ }
1763
+ .saltInput-tertiary {
1764
+ --input-background: var(--salt-editable-tertiary-background);
1765
+ --input-background-disabled: var(--salt-editable-tertiary-background-disabled);
1766
+ --input-background-readonly: var(--salt-editable-background-readonly);
1767
1767
  --input-borderColor: var(--salt-editable-borderColor);
1768
1768
  --input-borderColor-active: var(--salt-editable-borderColor-active);
1769
1769
  --input-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -1771,8 +1771,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
1771
1771
  }
1772
1772
  .saltInput-error {
1773
1773
  --input-background: var(--salt-status-error-background);
1774
- --input-background-active: var(--salt-status-error-background);
1775
- --input-background-hover: var(--salt-status-error-background);
1776
1774
  --input-background-readonly: var(--salt-status-error-background);
1777
1775
  --input-borderColor: var(--salt-status-error-borderColor);
1778
1776
  --input-borderColor-active: var(--salt-status-error-borderColor);
@@ -1781,8 +1779,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
1781
1779
  }
1782
1780
  .saltInput-warning {
1783
1781
  --input-background: var(--salt-status-warning-background);
1784
- --input-background-active: var(--salt-status-warning-background);
1785
- --input-background-hover: var(--salt-status-warning-background);
1786
1782
  --input-background-readonly: var(--salt-status-warning-background);
1787
1783
  --input-borderColor: var(--salt-status-warning-borderColor);
1788
1784
  --input-borderColor-active: var(--salt-status-warning-borderColor);
@@ -1791,8 +1787,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
1791
1787
  }
1792
1788
  .saltInput-success {
1793
1789
  --input-background: var(--salt-status-success-background);
1794
- --input-background-active: var(--salt-status-success-background);
1795
- --input-background-hover: var(--salt-status-success-background);
1796
1790
  --input-background-readonly: var(--salt-status-success-background);
1797
1791
  --input-borderColor: var(--salt-status-success-borderColor);
1798
1792
  --input-borderColor-active: var(--salt-status-success-borderColor);
@@ -1801,7 +1795,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
1801
1795
  }
1802
1796
  .saltInput-focused,
1803
1797
  .saltInput-focused:hover {
1804
- background: var(--saltInput-background-active, var(--input-background-active));
1805
1798
  cursor: var(--salt-cursor-text);
1806
1799
  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
1807
1800
  }
@@ -2005,6 +1998,36 @@ a:focus .saltCard-interactable.saltCard-disabled {
2005
1998
  gap: var(--salt-spacing-200);
2006
1999
  }
2007
2000
 
2001
+ /* src/kbd/Kbd.css */
2002
+ .saltKbd-primary {
2003
+ --kbd-background: var(--salt-container-primary-background);
2004
+ }
2005
+ .saltKbd-secondary {
2006
+ --kbd-background: var(--salt-container-secondary-background);
2007
+ }
2008
+ .saltKbd-tertiary {
2009
+ --kbd-background: var(--salt-container-tertiary-background);
2010
+ }
2011
+ .saltKbd {
2012
+ display: inline-flex;
2013
+ box-sizing: border-box;
2014
+ width: fit-content;
2015
+ border-radius: var(--salt-palette-corner-weaker);
2016
+ border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
2017
+ background: var(--kbd-background);
2018
+ box-shadow: 0 var(--salt-size-fixed-100) 0 0 var(--salt-container-primary-borderColor);
2019
+ height: calc(var(--salt-size-base) - var(--salt-spacing-100));
2020
+ align-items: center;
2021
+ padding: 0 var(--salt-spacing-50);
2022
+ text-transform: capitalize;
2023
+ color: var(--salt-content-primary-foreground);
2024
+ font-family: var(--salt-text-code-fontFamily);
2025
+ font-size: var(--salt-text-fontSize);
2026
+ font-style: normal;
2027
+ font-weight: var(--salt-text-fontWeight);
2028
+ line-height: var(--salt-text-lineHeight);
2029
+ }
2030
+
2008
2031
  /* src/link/Link.css */
2009
2032
  .saltLink {
2010
2033
  --link-color: "inherit";
@@ -2313,7 +2336,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
2313
2336
  display: flex;
2314
2337
  }
2315
2338
  .saltMultilineInput:hover {
2316
- background: var(--multilineInput-background-hover);
2317
2339
  cursor: var(--salt-cursor-text);
2318
2340
  }
2319
2341
  .saltMultilineInput-bordered.saltMultilineInput {
@@ -2373,10 +2395,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
2373
2395
  }
2374
2396
  .saltMultilineInput-primary {
2375
2397
  --multilineInput-background: var(--salt-editable-primary-background);
2376
- --multilineInput-background-active: var(--salt-editable-primary-background-active);
2377
- --multilineInput-background-hover: var(--salt-editable-primary-background-hover);
2378
2398
  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);
2379
- --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);
2399
+ --multilineInput-background-readonly: var(--salt-editable-background-readonly);
2380
2400
  --multilineInput-borderColor: var(--salt-editable-borderColor);
2381
2401
  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);
2382
2402
  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -2384,10 +2404,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
2384
2404
  }
2385
2405
  .saltMultilineInput-secondary {
2386
2406
  --multilineInput-background: var(--salt-editable-secondary-background);
2387
- --multilineInput-background-active: var(--salt-editable-secondary-background-active);
2388
- --multilineInput-background-hover: var(--salt-editable-secondary-background-active);
2389
2407
  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);
2390
- --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);
2408
+ --multilineInput-background-readonly: var(--salt-editable-background-readonly);
2409
+ --multilineInput-borderColor: var(--salt-editable-borderColor);
2410
+ --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);
2411
+ --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);
2412
+ --multilineInput-outlineColor: var(--salt-focused-outlineColor);
2413
+ }
2414
+ .saltMultilineInput-tertiary {
2415
+ --multilineInput-background: var(--salt-editable-tertiary-background);
2416
+ --multilineInput-background-disabled: var(--salt-editable-tertiary-background-disabled);
2417
+ --multilineInput-background-readonly: var(--salt-editable-background-readonly);
2391
2418
  --multilineInput-borderColor: var(--salt-editable-borderColor);
2392
2419
  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);
2393
2420
  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -2395,8 +2422,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
2395
2422
  }
2396
2423
  .saltMultilineInput-error {
2397
2424
  --multilineInput-background: var(--salt-status-error-background);
2398
- --multilineInput-background-active: var(--salt-status-error-background);
2399
- --multilineInput-background-hover: var(--salt-status-error-background);
2400
2425
  --multilineInput-background-readonly: var(--salt-status-error-background);
2401
2426
  --multilineInput-borderColor: var(--salt-status-error-borderColor);
2402
2427
  --multilineInput-borderColor-active: var(--salt-status-error-borderColor);
@@ -2405,8 +2430,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
2405
2430
  }
2406
2431
  .saltMultilineInput-warning {
2407
2432
  --multilineInput-background: var(--salt-status-warning-background);
2408
- --multilineInput-background-active: var(--salt-status-warning-background);
2409
- --multilineInput-background-hover: var(--salt-status-warning-background);
2410
2433
  --multilineInput-background-readonly: var(--salt-status-warning-background);
2411
2434
  --multilineInput-borderColor: var(--salt-status-warning-borderColor);
2412
2435
  --multilineInput-borderColor-active: var(--salt-status-warning-borderColor);
@@ -2415,8 +2438,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
2415
2438
  }
2416
2439
  .saltMultilineInput-success {
2417
2440
  --multilineInput-background: var(--salt-status-success-background);
2418
- --multilineInput-background-active: var(--salt-status-success-background);
2419
- --multilineInput-background-hover: var(--salt-status-success-background);
2420
2441
  --multilineInput-background-readonly: var(--salt-status-success-background);
2421
2442
  --multilineInput-borderColor: var(--salt-status-success-borderColor);
2422
2443
  --multilineInput-borderColor-active: var(--salt-status-success-borderColor);
@@ -2425,7 +2446,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
2425
2446
  }
2426
2447
  .saltMultilineInput-focused,
2427
2448
  .saltMultilineInput-focused:hover {
2428
- background: var(--multilineInput-background-active);
2429
2449
  cursor: var(--salt-cursor-text);
2430
2450
  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);
2431
2451
  }
@@ -2439,6 +2459,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
2439
2459
  cursor: var(--salt-cursor-disabled);
2440
2460
  color: var(--salt-content-primary-foreground-disabled);
2441
2461
  }
2462
+ .saltMultilineInput-disabled .saltMultilineInput-textarea {
2463
+ cursor: var(--salt-cursor-disabled);
2464
+ }
2442
2465
  .saltMultilineInput.saltMultilineInput-withAdornmentRow {
2443
2466
  grid-template-areas: "start-adornment textarea" "end-adornment end-adornment";
2444
2467
  grid-template-columns: min-content 1fr;
@@ -2651,7 +2674,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
2651
2674
  .saltNumberInput:hover {
2652
2675
  --numberInput-borderStyle: var(--salt-borderStyle-solid);
2653
2676
  --numberInput-borderColor: var(--salt-editable-borderColor-hover);
2654
- background: var(--numberInput-background-hover);
2655
2677
  cursor: var(--salt-cursor-text);
2656
2678
  }
2657
2679
  .saltNumberInput:active {
@@ -2662,23 +2684,22 @@ a:focus .saltCard-interactable.saltCard-disabled {
2662
2684
  }
2663
2685
  .saltNumberInput-primary {
2664
2686
  --numberInput-background: var(--salt-editable-primary-background);
2665
- --numberInput-background-active: var(--salt-editable-primary-background-active);
2666
- --numberInput-background-hover: var(--salt-editable-primary-background-hover);
2667
2687
  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);
2668
- --numberInput-background-readonly: var(--salt-editable-primary-background-readonly);
2688
+ --numberInput-background-readonly: var(--salt-editable-background-readonly);
2669
2689
  }
2670
2690
  .saltNumberInput-secondary {
2671
2691
  --numberInput-background: var(--salt-editable-secondary-background);
2672
- --numberInput-background-active: var(--salt-editable-secondary-background-active);
2673
- --numberInput-background-hover: var(--salt-editable-secondary-background-active);
2674
2692
  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);
2675
- --numberInput-background-readonly: var(--salt-editable-secondary-background-readonly);
2693
+ --numberInput-background-readonly: var(--salt-editable-background-readonly);
2694
+ }
2695
+ .saltNumberInput-tertiary {
2696
+ --numberInput-background: var(--salt-editable-tertiary-background);
2697
+ --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled);
2698
+ --numberInput-background-readonly: var(--salt-editable-background-readonly);
2676
2699
  }
2677
2700
  .saltNumberInput-error,
2678
2701
  .saltNumberInput-error:hover {
2679
2702
  --numberInput-background: var(--salt-status-error-background);
2680
- --numberInput-background-active: var(--salt-status-error-background);
2681
- --numberInput-background-hover: var(--salt-status-error-background);
2682
2703
  --numberInput-borderColor: var(--salt-status-error-borderColor);
2683
2704
  --numberInput-outlineColor: var(--salt-status-error-borderColor);
2684
2705
  --numberInput-background-readonly: var(--salt-status-error-background);
@@ -2686,8 +2707,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
2686
2707
  .saltNumberInput-warning,
2687
2708
  .saltNumberInput-warning:hover {
2688
2709
  --numberInput-background: var(--salt-status-warning-background);
2689
- --numberInput-background-active: var(--salt-status-warning-background);
2690
- --numberInput-background-hover: var(--salt-status-warning-background);
2691
2710
  --numberInput-borderColor: var(--salt-status-warning-borderColor);
2692
2711
  --numberInput-outlineColor: var(--salt-status-warning-borderColor);
2693
2712
  --numberInput-background-readonly: var(--salt-status-warning-background);
@@ -2695,8 +2714,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
2695
2714
  .saltNumberInput-success,
2696
2715
  .saltNumberInput-success:hover {
2697
2716
  --numberInput-background: var(--salt-status-success-background);
2698
- --numberInput-background-active: var(--salt-status-success-background);
2699
- --numberInput-background-hover: var(--salt-status-success-background);
2700
2717
  --numberInput-borderColor: var(--salt-status-success-borderColor);
2701
2718
  --numberInput-outlineColor: var(--salt-status-success-borderColor);
2702
2719
  --numberInput-background-readonly: var(--salt-status-success-background);
@@ -3292,7 +3309,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
3292
3309
  flex-wrap: nowrap;
3293
3310
  }
3294
3311
  .saltPillInput:hover {
3295
- background: var(--saltPillInput-background-hover, var(--pillInput-background-hover));
3296
3312
  cursor: var(--salt-cursor-text);
3297
3313
  }
3298
3314
  .saltPillInput-bordered.saltPillInput {
@@ -3353,10 +3369,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
3353
3369
  }
3354
3370
  .saltPillInput-primary {
3355
3371
  --pillInput-background: var(--salt-editable-primary-background);
3356
- --pillInput-background-active: var(--salt-editable-primary-background-active);
3357
- --pillInput-background-hover: var(--salt-editable-primary-background-hover);
3358
3372
  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);
3359
- --pillInput-background-readonly: var(--salt-editable-primary-background-readonly);
3373
+ --pillInput-background-readonly: var(--salt-editable-background-readonly);
3360
3374
  --pillInput-borderColor: var(--salt-editable-borderColor);
3361
3375
  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);
3362
3376
  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -3364,10 +3378,16 @@ a:focus .saltCard-interactable.saltCard-disabled {
3364
3378
  }
3365
3379
  .saltPillInput-secondary {
3366
3380
  --pillInput-background: var(--salt-editable-secondary-background);
3367
- --pillInput-background-active: var(--salt-editable-secondary-background-active);
3368
- --pillInput-background-hover: var(--salt-editable-secondary-background-active);
3369
3381
  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);
3370
- --pillInput-background-readonly: var(--salt-editable-secondary-background-readonly);
3382
+ --pillInput-background-readonly: var(--salt-editable-background-readonly);
3383
+ --pillInput-borderColor: var(--salt-editable-borderColor);
3384
+ --pillInput-borderColor-active: var(--salt-editable-borderColor-active);
3385
+ --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);
3386
+ --pillInput-outlineColor: var(--salt-focused-outlineColor);
3387
+ }
3388
+ .saltPillInput-tertiary {
3389
+ --pillInput-background: var(--salt-editable-tertiary-background);
3390
+ --pillInput-background-readonly: var(--salt-editable-background-readonly);
3371
3391
  --pillInput-borderColor: var(--salt-editable-borderColor);
3372
3392
  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);
3373
3393
  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);
@@ -3375,30 +3395,22 @@ a:focus .saltCard-interactable.saltCard-disabled {
3375
3395
  }
3376
3396
  .saltPillInput-error {
3377
3397
  --pillInput-background: var(--salt-status-error-background);
3378
- --pillInput-background-active: var(--salt-status-error-background);
3379
- --pillInput-background-hover: var(--salt-status-error-background);
3380
3398
  --pillInput-background-readonly: var(--salt-status-error-background);
3381
3399
  --pillInput-borderColor: var(--salt-status-error-borderColor);
3382
3400
  --pillInput-borderColor-active: var(--salt-status-error-borderColor);
3383
3401
  --pillInput-borderColor-hover: var(--salt-status-error-borderColor);
3384
- --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);
3385
3402
  --pillInput-outlineColor: var(--salt-status-error-borderColor);
3386
3403
  }
3387
3404
  .saltPillInput-warning {
3388
3405
  --pillInput-background: var(--salt-status-warning-background);
3389
- --pillInput-background-active: var(--salt-status-warning-background);
3390
- --pillInput-background-hover: var(--salt-status-warning-background);
3391
3406
  --pillInput-background-readonly: var(--salt-status-warning-background);
3392
3407
  --pillInput-borderColor: var(--salt-status-warning-borderColor);
3393
3408
  --pillInput-borderColor-active: var(--salt-status-warning-borderColor);
3394
3409
  --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);
3395
- --pillInput-borderColor-disabled: var(--salt-editable-borderColor-disabled);
3396
3410
  --pillInput-outlineColor: var(--salt-status-warning-borderColor);
3397
3411
  }
3398
3412
  .saltPillInput-success {
3399
3413
  --pillInput-background: var(--salt-status-success-background);
3400
- --pillInput-background-active: var(--salt-status-success-background);
3401
- --pillInput-background-hover: var(--salt-status-success-background);
3402
3414
  --pillInput-background-readonly: var(--salt-status-success-background);
3403
3415
  --pillInput-borderColor: var(--salt-status-success-borderColor);
3404
3416
  --pillInput-borderColor-active: var(--salt-status-success-borderColor);
@@ -3407,7 +3419,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
3407
3419
  }
3408
3420
  .saltPillInput-focused,
3409
3421
  .saltPillInput-focused:hover {
3410
- background: var(--saltPillInput-background-active, var(--pillInput-background-active));
3411
3422
  cursor: var(--salt-cursor-text);
3412
3423
  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
3413
3424
  }
@@ -5763,4 +5774,4 @@ label.saltText small,
5763
5774
  color: var(--salt-status-error-foreground-informative);
5764
5775
  }
5765
5776
 
5766
- /* src/6d38a830-6a81-4708-9979-8b93b2a7c58c.css */
5777
+ /* src/244337bf-6a40-49c5-ab4b-8e10a53e69fd.css */
package/dist-cjs/checkbox/Checkbox.js CHANGED
@@ -111,11 +111,11 @@ const Checkbox = React.forwardRef(
111
111
  "aria-describedby": clsx.clsx(
112
112
  checkboxGroup === void 0 ? formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"] : void 0,
113
113
  inputDescribedBy
114
- ),
114
+ ) || void 0,
115
115
  "aria-labelledby": clsx.clsx(
116
116
  checkboxGroup === void 0 ? formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"] : void 0,
117
117
  inputLabelledBy
118
- ),
118
+ ) || void 0,
119
119
  name,
120
120
  value,
121
121
  checked,
package/dist-cjs/checkbox/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type FocusEventHandler,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n useControlled,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport checkboxCss from \"./Checkbox.css\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\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>> & DataAttributes;\n /**\n * Used to access the hidden `<input>` element.\n */\n inputRef?: Ref<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 inputRef: inputRefProp,\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 ??\n (checkboxGroup?.checkedValues && value\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 const handleInputRef = useForkRef(inputRefProp, inputRef);\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={handleInputRef}\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","useForkRef","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type FocusEventHandler,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n useControlled,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport checkboxCss from \"./Checkbox.css\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\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>> & DataAttributes;\n /**\n * Used to access the hidden `<input>` element.\n */\n inputRef?: Ref<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 inputRef: inputRefProp,\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 ??\n (checkboxGroup?.checkedValues && value\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 const handleInputRef = useForkRef(inputRefProp, inputRef);\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={\n clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy,\n ) || undefined\n }\n aria-labelledby={\n clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy,\n ) || undefined\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={handleInputRef}\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","useForkRef","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
package/dist-cjs/dialog/Dialog.js CHANGED
@@ -39,6 +39,8 @@ const Dialog = React.forwardRef(
39
39
  disableScrim,
40
40
  idProp,
41
41
  initialFocus,
42
+ id,
43
+ "aria-labelledby": ariaLabelledBy,
42
44
  ...rest
43
45
  } = props;
44
46
  const targetWindow = window.useWindow();
@@ -47,9 +49,10 @@ const Dialog = React.forwardRef(
47
49
  css: Dialog$1,
48
50
  window: targetWindow
49
51
  });
50
- const id = useId.useId(idProp);
52
+ const dialogId = useId.useId(id);
51
53
  const currentBreakpoint = useResponsiveProp.useCurrentBreakpoint();
52
54
  const [showComponent, setShowComponent] = React.useState(false);
55
+ const [headerId, setHeaderId] = React.useState(idProp);
53
56
  const { context, floating, elements } = useFloatingUI.useFloatingUI({
54
57
  open: showComponent,
55
58
  onOpenChange
@@ -71,14 +74,18 @@ const Dialog = React.forwardRef(
71
74
  return () => clearTimeout(animate);
72
75
  }
73
76
  }, [open, showComponent]);
74
- const contextValue = React.useMemo(() => ({ status, id }), [status, id]);
77
+ const contextValue = React.useMemo(
78
+ () => ({ status, id: headerId, setId: setHeaderId, dialogId }),
79
+ [status, headerId, dialogId]
80
+ );
75
81
  return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.DialogContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ConditionalScrimWrapper, { condition: showComponent && !disableScrim, children: /* @__PURE__ */ jsxRuntime.jsx(
76
82
  FloatingComponent,
77
83
  {
84
+ id: dialogId,
78
85
  open: showComponent,
79
86
  role: "dialog",
80
87
  "aria-modal": "true",
81
- "aria-labelledby": id,
88
+ "aria-labelledby": clsx.clsx(ariaLabelledBy, headerId) || void 0,
82
89
  ref: floatingRef,
83
90
  width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
84
91
  height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
package/dist-cjs/dialog/Dialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n type FloatingFocusManager,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentProps,\n forwardRef,\n type HTMLAttributes,\n type ReactNode,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n useCurrentBreakpoint,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n children?: ReactNode;\n condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * The status of the Dialog\n * */\n status?: ValidationStatus;\n /**\n * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n * Default value is 0 (first tabbable element).\n * */\n initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n /**\n * Size of the Dialog\n * */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n /**\n * Optional id prop\n * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n * */\n idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n function Dialog(props, ref) {\n const {\n children,\n className,\n open = false,\n onOpenChange,\n status,\n disableDismiss,\n size = \"medium\",\n disableScrim,\n idProp,\n initialFocus,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog\",\n css: dialogCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n\n const currentBreakpoint = useCurrentBreakpoint();\n\n const [showComponent, setShowComponent] = useState(false);\n\n const { context, floating, elements } = useFloatingUI({\n open: showComponent,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent]);\n\n const contextValue = useMemo(() => ({ status, id }), [status, id]);\n\n return (\n <DialogContext.Provider value={contextValue}>\n <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={id}\n ref={floatingRef}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n lockScroll\n focusManagerProps={{\n context: context,\n initialFocus,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(size, currentBreakpoint),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(status as string)]: status,\n },\n className,\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n </DialogContext.Provider>\n );\n },\n);\n"],"names":["jsx","Scrim","jsxs","Fragment","makePrefixer","forwardRef","Dialog","useWindow","useComponentCssInjection","dialogCss","useId","useCurrentBreakpoint","useState","useFloatingUI","useInteractions","useClick","useDismiss","useFloatingComponent","useForkRef","useEffect","useMemo","DialogContext","clsx"],"mappings":"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"}
1
+ {"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n type FloatingFocusManager,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentProps,\n forwardRef,\n type HTMLAttributes,\n type ReactNode,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n useCurrentBreakpoint,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n children?: ReactNode;\n condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * The status of the Dialog\n * */\n status?: ValidationStatus;\n /**\n * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n * Default value is 0 (first tabbable element).\n * */\n initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n /**\n * Size of the Dialog\n * */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n /**\n * @deprecated IDs are now auto-generated internally for proper ARIA labeling.\n *\n * Optional id prop\n * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n * */\n idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n function Dialog(props, ref) {\n const {\n children,\n className,\n open = false,\n onOpenChange,\n status,\n disableDismiss,\n size = \"medium\",\n disableScrim,\n idProp,\n initialFocus,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog\",\n css: dialogCss,\n window: targetWindow,\n });\n\n const dialogId = useId(id);\n const currentBreakpoint = useCurrentBreakpoint();\n\n const [showComponent, setShowComponent] = useState(false);\n const [headerId, setHeaderId] = useState(idProp);\n\n const { context, floating, elements } = useFloatingUI({\n open: showComponent,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent]);\n\n const contextValue = useMemo(\n () => ({ status, id: headerId, setId: setHeaderId, dialogId }),\n [status, headerId, dialogId],\n );\n\n return (\n <DialogContext.Provider value={contextValue}>\n <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n <FloatingComponent\n id={dialogId}\n open={showComponent}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={clsx(ariaLabelledBy, headerId) || undefined}\n ref={floatingRef}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n lockScroll\n focusManagerProps={{\n context: context,\n initialFocus,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(size, currentBreakpoint),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(status as string)]: status,\n },\n className,\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n </DialogContext.Provider>\n );\n },\n);\n"],"names":["jsx","Scrim","jsxs","Fragment","makePrefixer","forwardRef","Dialog","useWindow","useComponentCssInjection","dialogCss","useId","useCurrentBreakpoint","useState","useFloatingUI","useInteractions","useClick","useDismiss","useFloatingComponent","useForkRef","useEffect","useMemo","DialogContext","clsx"],"mappings":"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"}
package/dist-cjs/dialog/DialogContent.js CHANGED
@@ -13,6 +13,7 @@ var useResizeObserver = require('../utils/useResizeObserver.js');
13
13
  require('../salt-provider/SaltProvider.js');
14
14
  require('../viewport/ViewportProvider.js');
15
15
  var DialogContent$1 = require('./DialogContent.css.js');
16
+ var DialogContext = require('./DialogContext.js');
16
17
 
17
18
  const withBaseName = makePrefixer.makePrefixer("saltDialogContent");
18
19
  const DialogContent = React.forwardRef(
@@ -41,13 +42,19 @@ const DialogContent = React.forwardRef(
41
42
  const checkOverflow = React.useCallback(() => {
42
43
  if (!divRef.current) return;
43
44
  setIsOverflowing(
44
- divRef.current.scrollHeight > divRef.current.offsetHeight
45
+ divRef.current.scrollWidth > divRef.current.offsetWidth || divRef.current.scrollHeight > divRef.current.offsetHeight
45
46
  );
46
47
  }, []);
47
48
  useResizeObserver.useResizeObserver({ ref: divRef, onResize: checkOverflow });
48
49
  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
49
50
  checkOverflow();
50
51
  }, [checkOverflow]);
52
+ const { dialogId, id: headerId } = DialogContext.useDialogContext();
53
+ const overflowProps = isOverflowing ? {
54
+ role: "region",
55
+ tabIndex: 0,
56
+ "aria-labelledby": headerId ?? dialogId
57
+ } : {};
51
58
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ...rest, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
52
59
  "div",
53
60
  {
@@ -58,6 +65,7 @@ const DialogContent = React.forwardRef(
58
65
  [withBaseName("scrollTop")]: isOverflowing && canScrollUp,
59
66
  [withBaseName("scrollBottom")]: isOverflowing && canScrollDown
60
67
  }),
68
+ ...overflowProps,
61
69
  children
62
70
  }
63
71
  ) });