@salt-ds/lab 1.0.0-alpha.14 → 1.0.0-alpha.15

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 (162) hide show
  1. package/dist-cjs/badge/Badge.css.js +1 -1
  2. package/dist-cjs/badge/Badge.js +7 -23
  3. package/dist-cjs/badge/Badge.js.map +1 -1
  4. package/dist-cjs/content-status/ContentStatus.js +0 -2
  5. package/dist-cjs/content-status/ContentStatus.js.map +1 -1
  6. package/dist-cjs/content-status/internal/StatusIndicator.js +0 -2
  7. package/dist-cjs/content-status/internal/StatusIndicator.js.map +1 -1
  8. package/dist-cjs/drawer/Drawer.css.js +1 -1
  9. package/dist-cjs/drawer/Drawer.js +39 -45
  10. package/dist-cjs/drawer/Drawer.js.map +1 -1
  11. package/dist-cjs/drawer/useDrawer.js +31 -0
  12. package/dist-cjs/drawer/useDrawer.js.map +1 -0
  13. package/dist-cjs/form-field-legacy/FormFieldLegacy.css.js +1 -1
  14. package/dist-cjs/index.js +4 -7
  15. package/dist-cjs/index.js.map +1 -1
  16. package/dist-cjs/list-next/ListItemNext.css.js +1 -1
  17. package/dist-cjs/list-next/ListItemNext.js +17 -6
  18. package/dist-cjs/list-next/ListItemNext.js.map +1 -1
  19. package/dist-cjs/list-next/ListNext.js +21 -10
  20. package/dist-cjs/list-next/ListNext.js.map +1 -1
  21. package/dist-cjs/list-next/ListNextContext.js.map +1 -1
  22. package/dist-cjs/list-next/useList.js +96 -37
  23. package/dist-cjs/list-next/useList.js.map +1 -1
  24. package/dist-cjs/nav-item/ExpansionButton.js +1 -1
  25. package/dist-cjs/nav-item/ExpansionButton.js.map +1 -1
  26. package/dist-cjs/nav-item/NavItem.css.js +1 -1
  27. package/dist-cjs/nav-item/NavItem.js +11 -1
  28. package/dist-cjs/nav-item/NavItem.js.map +1 -1
  29. package/dist-cjs/progress/CircularProgress/CircularProgress.css.js +1 -1
  30. package/dist-cjs/progress/CircularProgress/CircularProgress.js +44 -51
  31. package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
  32. package/dist-cjs/progress/LinearProgress/LinearProgress.css.js +1 -1
  33. package/dist-cjs/progress/LinearProgress/LinearProgress.js +9 -49
  34. package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
  35. package/dist-cjs/stepped-tracker/StepLabel/StepLabel.css.js +1 -1
  36. package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js +5 -13
  37. package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js.map +1 -1
  38. package/dist-cjs/stepped-tracker/SteppedTracker.css.js +1 -1
  39. package/dist-cjs/stepped-tracker/SteppedTracker.js +0 -5
  40. package/dist-cjs/stepped-tracker/SteppedTracker.js.map +1 -1
  41. package/dist-cjs/stepped-tracker/SteppedTrackerContext.js +1 -7
  42. package/dist-cjs/stepped-tracker/SteppedTrackerContext.js.map +1 -1
  43. package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.css.js +1 -1
  44. package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js +1 -1
  45. package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js +2 -14
  46. package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
  47. package/dist-cjs/switch/Switch.css.js +1 -1
  48. package/dist-cjs/switch/Switch.js +67 -72
  49. package/dist-cjs/switch/Switch.js.map +1 -1
  50. package/dist-cjs/toast-group/ToastGroup.css.js +6 -0
  51. package/dist-cjs/toast-group/ToastGroup.css.js.map +1 -0
  52. package/dist-cjs/toast-group/ToastGroup.js +32 -0
  53. package/dist-cjs/toast-group/ToastGroup.js.map +1 -0
  54. package/dist-es/badge/Badge.css.js +1 -1
  55. package/dist-es/badge/Badge.js +9 -25
  56. package/dist-es/badge/Badge.js.map +1 -1
  57. package/dist-es/content-status/ContentStatus.js +0 -2
  58. package/dist-es/content-status/ContentStatus.js.map +1 -1
  59. package/dist-es/content-status/internal/StatusIndicator.js +0 -2
  60. package/dist-es/content-status/internal/StatusIndicator.js.map +1 -1
  61. package/dist-es/drawer/Drawer.css.js +1 -1
  62. package/dist-es/drawer/Drawer.js +40 -46
  63. package/dist-es/drawer/Drawer.js.map +1 -1
  64. package/dist-es/drawer/useDrawer.js +27 -0
  65. package/dist-es/drawer/useDrawer.js.map +1 -0
  66. package/dist-es/form-field-legacy/FormFieldLegacy.css.js +1 -1
  67. package/dist-es/index.js +2 -3
  68. package/dist-es/index.js.map +1 -1
  69. package/dist-es/list-next/ListItemNext.css.js +1 -1
  70. package/dist-es/list-next/ListItemNext.js +17 -6
  71. package/dist-es/list-next/ListItemNext.js.map +1 -1
  72. package/dist-es/list-next/ListNext.js +21 -10
  73. package/dist-es/list-next/ListNext.js.map +1 -1
  74. package/dist-es/list-next/ListNextContext.js.map +1 -1
  75. package/dist-es/list-next/useList.js +98 -39
  76. package/dist-es/list-next/useList.js.map +1 -1
  77. package/dist-es/nav-item/ExpansionButton.js +2 -2
  78. package/dist-es/nav-item/ExpansionButton.js.map +1 -1
  79. package/dist-es/nav-item/NavItem.css.js +1 -1
  80. package/dist-es/nav-item/NavItem.js +11 -1
  81. package/dist-es/nav-item/NavItem.js.map +1 -1
  82. package/dist-es/progress/CircularProgress/CircularProgress.css.js +1 -1
  83. package/dist-es/progress/CircularProgress/CircularProgress.js +45 -52
  84. package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
  85. package/dist-es/progress/LinearProgress/LinearProgress.css.js +1 -1
  86. package/dist-es/progress/LinearProgress/LinearProgress.js +9 -49
  87. package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
  88. package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js +1 -1
  89. package/dist-es/stepped-tracker/StepLabel/StepLabel.js +7 -15
  90. package/dist-es/stepped-tracker/StepLabel/StepLabel.js.map +1 -1
  91. package/dist-es/stepped-tracker/SteppedTracker.css.js +1 -1
  92. package/dist-es/stepped-tracker/SteppedTracker.js +1 -6
  93. package/dist-es/stepped-tracker/SteppedTracker.js.map +1 -1
  94. package/dist-es/stepped-tracker/SteppedTrackerContext.js +1 -7
  95. package/dist-es/stepped-tracker/SteppedTrackerContext.js.map +1 -1
  96. package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js +1 -1
  97. package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js +1 -1
  98. package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js +3 -15
  99. package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
  100. package/dist-es/switch/Switch.css.js +1 -1
  101. package/dist-es/switch/Switch.js +70 -75
  102. package/dist-es/switch/Switch.js.map +1 -1
  103. package/dist-es/toast-group/ToastGroup.css.js +4 -0
  104. package/dist-es/toast-group/ToastGroup.css.js.map +1 -0
  105. package/dist-es/toast-group/ToastGroup.js +28 -0
  106. package/dist-es/toast-group/ToastGroup.js.map +1 -0
  107. package/dist-types/badge/Badge.d.ts +5 -16
  108. package/dist-types/content-status/internal/StatusIndicator.d.ts +2 -2
  109. package/dist-types/dialog/internal/DialogContext.d.ts +1 -1
  110. package/dist-types/drawer/Drawer.d.ts +3 -12
  111. package/dist-types/drawer/index.d.ts +1 -0
  112. package/dist-types/drawer/useDrawer.d.ts +27 -0
  113. package/dist-types/index.d.ts +1 -2
  114. package/dist-types/list-next/ListItemNext.d.ts +6 -1
  115. package/dist-types/list-next/ListNext.d.ts +7 -2
  116. package/dist-types/list-next/ListNextContext.d.ts +4 -2
  117. package/dist-types/list-next/useList.d.ts +15 -7
  118. package/dist-types/nav-item/NavItem.d.ts +29 -1
  119. package/dist-types/progress/CircularProgress/CircularProgress.d.ts +1 -21
  120. package/dist-types/progress/LinearProgress/LinearProgress.d.ts +1 -26
  121. package/dist-types/stepped-tracker/StepLabel/StepLabel.d.ts +3 -5
  122. package/dist-types/stepped-tracker/SteppedTrackerContext.d.ts +1 -4
  123. package/dist-types/stepped-tracker/TrackerStep/index.d.ts +0 -1
  124. package/dist-types/switch/Switch.d.ts +43 -6
  125. package/dist-types/toast-group/ToastGroup.d.ts +5 -0
  126. package/dist-types/toast-group/index.d.ts +1 -0
  127. package/package.json +3 -3
  128. package/dist-cjs/control-label/ControlLabel.css.js +0 -6
  129. package/dist-cjs/control-label/ControlLabel.css.js.map +0 -1
  130. package/dist-cjs/control-label/ControlLabel.js +0 -48
  131. package/dist-cjs/control-label/ControlLabel.js.map +0 -1
  132. package/dist-cjs/multiline-input/MultilineInput.css.js +0 -6
  133. package/dist-cjs/multiline-input/MultilineInput.css.js.map +0 -1
  134. package/dist-cjs/multiline-input/MultilineInput.js +0 -162
  135. package/dist-cjs/multiline-input/MultilineInput.js.map +0 -1
  136. package/dist-cjs/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js +0 -21
  137. package/dist-cjs/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js.map +0 -1
  138. package/dist-cjs/stepped-tracker/useDetectTruncatedText.js +0 -71
  139. package/dist-cjs/stepped-tracker/useDetectTruncatedText.js.map +0 -1
  140. package/dist-cjs/switch/assets/CheckedIcon.js +0 -34
  141. package/dist-cjs/switch/assets/CheckedIcon.js.map +0 -1
  142. package/dist-es/control-label/ControlLabel.css.js +0 -4
  143. package/dist-es/control-label/ControlLabel.css.js.map +0 -1
  144. package/dist-es/control-label/ControlLabel.js +0 -43
  145. package/dist-es/control-label/ControlLabel.js.map +0 -1
  146. package/dist-es/multiline-input/MultilineInput.css.js +0 -4
  147. package/dist-es/multiline-input/MultilineInput.css.js.map +0 -1
  148. package/dist-es/multiline-input/MultilineInput.js +0 -158
  149. package/dist-es/multiline-input/MultilineInput.js.map +0 -1
  150. package/dist-es/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js +0 -16
  151. package/dist-es/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js.map +0 -1
  152. package/dist-es/stepped-tracker/useDetectTruncatedText.js +0 -69
  153. package/dist-es/stepped-tracker/useDetectTruncatedText.js.map +0 -1
  154. package/dist-es/switch/assets/CheckedIcon.js +0 -30
  155. package/dist-es/switch/assets/CheckedIcon.js.map +0 -1
  156. package/dist-types/control-label/ControlLabel.d.ts +0 -8
  157. package/dist-types/control-label/index.d.ts +0 -1
  158. package/dist-types/multiline-input/MultilineInput.d.ts +0 -40
  159. package/dist-types/multiline-input/index.d.ts +0 -1
  160. package/dist-types/stepped-tracker/TrackerStep/TrackerStepTooltipContext.d.ts +0 -7
  161. package/dist-types/stepped-tracker/useDetectTruncatedText.d.ts +0 -11
  162. package/dist-types/switch/assets/CheckedIcon.d.ts +0 -4
@@ -1,43 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { forwardRef } from 'react';
3
- import { clsx } from 'clsx';
4
- import { useWindow } from '@salt-ds/window';
5
- import { useComponentCssInjection } from '@salt-ds/styles';
6
- import css_248z from './ControlLabel.css.js';
7
-
8
- const baseName = "saltControlLabel";
9
- const ControlLabel = forwardRef(
10
- ({ children, className, disabled, label, labelPlacement = "left", ...other }, ref) => {
11
- const targetWindow = useWindow();
12
- useComponentCssInjection({
13
- testId: "salt-control-label",
14
- css: css_248z,
15
- window: targetWindow
16
- });
17
- return /* @__PURE__ */ jsxs("label", {
18
- className: clsx(
19
- baseName,
20
- {
21
- [`${baseName}-disabled`]: disabled
22
- },
23
- className
24
- ),
25
- ref,
26
- ...other,
27
- children: [
28
- labelPlacement === "left" && /* @__PURE__ */ jsx("span", {
29
- className: `${baseName}-label`,
30
- children: label
31
- }),
32
- children,
33
- labelPlacement === "right" && /* @__PURE__ */ jsx("span", {
34
- className: `${baseName}-labelRight`,
35
- children: label
36
- })
37
- ]
38
- });
39
- }
40
- );
41
-
42
- export { ControlLabel, baseName };
43
- //# sourceMappingURL=ControlLabel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ControlLabel.js","sources":["../src/control-label/ControlLabel.tsx"],"sourcesContent":["// TODO Label positioning\nimport React, { forwardRef, LabelHTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport controlLabelCss from \"./ControlLabel.css\";\n\nexport interface ControlLabelProps\n extends LabelHTMLAttributes<HTMLLabelElement> {\n disabled?: boolean;\n label?: ReactNode;\n labelPlacement?: \"left\" | \"right\";\n}\n\nexport const baseName = \"saltControlLabel\";\n\nexport const ControlLabel = forwardRef<HTMLLabelElement, ControlLabelProps>(\n (\n { children, className, disabled, label, labelPlacement = \"left\", ...other },\n ref\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-control-label\",\n css: controlLabelCss,\n window: targetWindow,\n });\n\n return (\n <label\n className={clsx(\n baseName,\n {\n [`${baseName}-disabled`]: disabled,\n },\n className\n )}\n ref={ref}\n {...other}\n >\n {labelPlacement === \"left\" && (\n <span className={`${baseName}-label`}>{label}</span>\n )}\n {children}\n {labelPlacement === \"right\" && (\n <span className={`${baseName}-labelRight`}>{label}</span>\n )}\n </label>\n );\n }\n);\n"],"names":["controlLabelCss"],"mappings":";;;;;;;AAgBO,MAAM,QAAW,GAAA,mBAAA;AAEjB,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,CACE,EAAE,QAAA,EAAU,SAAW,EAAA,QAAA,EAAU,OAAO,cAAiB,GAAA,MAAA,EAAA,GAAW,KAAM,EAAA,EAC1E,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,IAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,QAAA;AAAA,QACA;AAAA,UACE,CAAC,GAAG,QAAsB,CAAA,SAAA,CAAA,GAAA,QAAA;AAAA,SAC5B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,cAAA,KAAmB,0BACjB,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,WAAW,CAAG,EAAA,QAAA,CAAA,MAAA,CAAA;AAAA,UAAmB,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,QAE9C,QAAA;AAAA,QACA,cAAA,KAAmB,2BACjB,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,WAAW,CAAG,EAAA,QAAA,CAAA,WAAA,CAAA;AAAA,UAAwB,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,OAAA;AAAA,KAEtD,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n --multilineInput-borderColor: var(--salt-editable-borderColor);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n --multilineInput-paddingInline: var(--salt-spacing-100);\n --multilineInput-border: none;\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--multilineInput-background);\n border: var(--multilineInput-border);\n color: var(--salt-text-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n height: auto;\n line-height: var(--salt-text-lineHeight);\n min-height: var(--salt-size-base);\n min-width: 4em;\n padding-inline: var(--multilineInput-paddingInline);\n position: relative;\n width: 100%;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--multilineInput-background-hover);\n cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--multilineInput-background-active);\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n --multilineInput-background: var(--salt-editable-primary-background);\n --multilineInput-background-active: var(--salt-editable-primary-background-active);\n --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n --multilineInput-background: var(--salt-editable-secondary-background);\n --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n --multilineInput-background: var(--salt-status-error-background);\n --multilineInput-background-active: var(--salt-status-error-background);\n --multilineInput-background-hover: var(--salt-status-error-background);\n --multilineInput-borderColor: var(--salt-status-error-borderColor);\n --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n --multilineInput-background: var(--salt-status-warning-background);\n --multilineInput-background-active: var(--salt-status-warning-background);\n --multilineInput-background-hover: var(--salt-status-warning-background);\n --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n --multilineInput-background: var(--salt-status-success-background);\n --multilineInput-background-active: var(--salt-status-success-background);\n --multilineInput-background-hover: var(--salt-status-success-background);\n --multilineInput-borderColor: var(--salt-status-success-borderColor);\n --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n display: flex;\n flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: inline-flex;\n height: calc(var(--saltMultilineInput-rows, 3) * var(--salt-text-lineHeight));\n flex-grow: 1;\n font: inherit;\n letter-spacing: 0;\n margin: var(--salt-spacing-75) 0;\n min-width: 0;\n overflow: hidden;\n resize: none;\n padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the class */\n.saltMultilineInput-textarea:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n background: var(--salt-text-background-selected);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n --multilineInput-borderColor: var(--multilineInput-outlineColor);\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n --multilineInput-paddingInline: 0;\n\n background: var(--multilineInput-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n background: var(--multilineInput-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n --multilineInput-paddingInline: var(--salt-spacing-100);\n --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n min-height: var(--salt-size-base);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n align-self: self-start;\n padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n display: inline-flex;\n flex-basis: 100%;\n justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n padding-left: var(--multilineInput-paddingInline);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n align-self: self-end;\n display: inline-flex;\n min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput .saltButton {\n --saltButton-padding: 0;\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-50));\n --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-50));\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=MultilineInput.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MultilineInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,158 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { clsx } from 'clsx';
3
- import { forwardRef, useState } from 'react';
4
- import { makePrefixer, useFormFieldProps, useControlled, StatusAdornment } from '@salt-ds/core';
5
- import { useComponentCssInjection } from '@salt-ds/styles';
6
- import { useWindow } from '@salt-ds/window';
7
- import css_248z from './MultilineInput.css.js';
8
-
9
- const withBaseName = makePrefixer("saltMultilineInput");
10
- const MultilineInput = forwardRef(
11
- function MultilineInput2({
12
- "aria-activedescendant": ariaActiveDescendant,
13
- "aria-expanded": ariaExpanded,
14
- "aria-owns": ariaOwns,
15
- bordered = false,
16
- className: classNameProp,
17
- disabled,
18
- endAdornment,
19
- id,
20
- placeholder,
21
- readOnly,
22
- role,
23
- rows = 3,
24
- startAdornment,
25
- style,
26
- textAreaProps = {},
27
- textAreaRef,
28
- value: valueProp,
29
- defaultValue: defaultValueProp = valueProp === void 0 ? "" : void 0,
30
- validationStatus: validationStatusProp,
31
- variant = "primary",
32
- ...other
33
- }, ref) {
34
- const targetWindow = useWindow();
35
- useComponentCssInjection({
36
- testId: "salt-multiline-input",
37
- css: css_248z,
38
- window: targetWindow
39
- });
40
- const restA11yProps = {
41
- "aria-activedescendant": ariaActiveDescendant,
42
- "aria-expanded": ariaExpanded,
43
- "aria-owns": ariaOwns
44
- };
45
- const [focused, setFocused] = useState(false);
46
- const {
47
- "aria-describedby": textAreaDescribedBy,
48
- "aria-labelledby": textAreaLabelledBy,
49
- onBlur,
50
- onChange,
51
- onFocus,
52
- required: textAreaRequired,
53
- ...restTextAreaProps
54
- } = textAreaProps;
55
- const {
56
- a11yProps: {
57
- "aria-describedby": formFieldDescribedBy,
58
- "aria-labelledby": formFieldLabelledBy
59
- } = {},
60
- disabled: formFieldDisabled,
61
- readOnly: formFieldReadOnly,
62
- necessity: formFieldRequired,
63
- validationStatus: formFieldValidationStatus
64
- } = useFormFieldProps();
65
- const isDisabled = disabled || formFieldDisabled;
66
- const isReadOnly = readOnly || formFieldReadOnly;
67
- const validationStatus = formFieldValidationStatus != null ? formFieldValidationStatus : validationStatusProp;
68
- const isRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : textAreaRequired;
69
- const [value, setValue] = useControlled({
70
- controlled: valueProp,
71
- default: defaultValueProp,
72
- name: "MultilineInput",
73
- state: "value"
74
- });
75
- const handleChange = (event) => {
76
- const value2 = event.target.value;
77
- setValue(value2);
78
- onChange == null ? void 0 : onChange(event);
79
- };
80
- const handleBlur = (event) => {
81
- onBlur == null ? void 0 : onBlur(event);
82
- setFocused(false);
83
- };
84
- const handleFocus = (event) => {
85
- onFocus == null ? void 0 : onFocus(event);
86
- setFocused(true);
87
- };
88
- const multilineInputStyles = {
89
- "--saltMultilineInput-rows": rows,
90
- ...style
91
- };
92
- return /* @__PURE__ */ jsxs("div", {
93
- className: clsx(
94
- withBaseName(),
95
- withBaseName(variant),
96
- {
97
- [withBaseName("withAdornmentRow")]: endAdornment,
98
- [withBaseName("bordered")]: bordered,
99
- [withBaseName("focused")]: !isDisabled && !isReadOnly && focused,
100
- [withBaseName("disabled")]: isDisabled,
101
- [withBaseName("readOnly")]: isReadOnly,
102
- [withBaseName(validationStatus || "")]: validationStatus
103
- },
104
- classNameProp
105
- ),
106
- ref,
107
- style: multilineInputStyles,
108
- ...other,
109
- children: [
110
- startAdornment && /* @__PURE__ */ jsx("div", {
111
- className: withBaseName("startAdornmentContainer"),
112
- children: startAdornment
113
- }),
114
- /* @__PURE__ */ jsx("textarea", {
115
- "aria-describedby": clsx(formFieldDescribedBy, textAreaDescribedBy),
116
- "aria-labelledby": clsx(formFieldLabelledBy, textAreaLabelledBy),
117
- className: clsx(withBaseName("textarea"), textAreaProps == null ? void 0 : textAreaProps.className),
118
- disabled: isDisabled,
119
- id,
120
- readOnly: isReadOnly,
121
- ref: textAreaRef,
122
- required: isRequired,
123
- role,
124
- rows,
125
- tabIndex: isReadOnly || isDisabled ? -1 : 0,
126
- onBlur: handleBlur,
127
- onChange: handleChange,
128
- onFocus: !isDisabled && !isReadOnly ? handleFocus : void 0,
129
- placeholder,
130
- value,
131
- ...restA11yProps,
132
- ...restTextAreaProps
133
- }),
134
- /* @__PURE__ */ jsxs("div", {
135
- className: withBaseName("suffixAdornments"),
136
- children: [
137
- !isDisabled && !isReadOnly && validationStatus && /* @__PURE__ */ jsx("div", {
138
- className: withBaseName("statusAdornmentContainer"),
139
- children: /* @__PURE__ */ jsx(StatusAdornment, {
140
- status: validationStatus
141
- })
142
- }),
143
- endAdornment && /* @__PURE__ */ jsx("div", {
144
- className: withBaseName("endAdornmentContainer"),
145
- children: endAdornment
146
- })
147
- ]
148
- }),
149
- /* @__PURE__ */ jsx("div", {
150
- className: withBaseName("activationIndicator")
151
- })
152
- ]
153
- });
154
- }
155
- );
156
-
157
- export { MultilineInput };
158
- //# sourceMappingURL=MultilineInput.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n ComponentPropsWithoutRef,\n FocusEvent,\n forwardRef,\n ReactNode,\n Ref,\n TextareaHTMLAttributes,\n useState,\n} from \"react\";\nimport {\n makePrefixer,\n StatusAdornment,\n useControlled,\n useFormFieldProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * Number of rows. Defaults to 3\n */\n rows?: number;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n */\n textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;\n /**\n * Optional ref for the textarea component\n */\n textAreaRef?: Ref<HTMLTextAreaElement>;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n function MultilineInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n bordered = false,\n className: classNameProp,\n disabled,\n endAdornment,\n id,\n placeholder,\n readOnly,\n role,\n rows = 3,\n startAdornment,\n style,\n textAreaProps = {},\n textAreaRef,\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...other\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-multiline-input\",\n css: multilineInputCss,\n window: targetWindow,\n });\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const [focused, setFocused] = useState(false);\n\n const {\n \"aria-describedby\": textAreaDescribedBy,\n \"aria-labelledby\": textAreaLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: textAreaRequired,\n ...restTextAreaProps\n } = textAreaProps;\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnly || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : undefined ?? textAreaRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValueProp,\n name: \"MultilineInput\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const multilineInputStyles = {\n \"--saltMultilineInput-rows\": rows,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"withAdornmentRow\")]: endAdornment,\n [withBaseName(\"bordered\")]: bordered,\n [withBaseName(\"focused\")]: !isDisabled && !isReadOnly && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n },\n classNameProp\n )}\n ref={ref}\n style={multilineInputStyles}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <textarea\n aria-describedby={clsx(formFieldDescribedBy, textAreaDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, textAreaLabelledBy)}\n className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={textAreaRef}\n required={isRequired}\n role={role}\n rows={rows}\n tabIndex={isReadOnly || isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled && !isReadOnly ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restTextAreaProps}\n />\n <div className={withBaseName(\"suffixAdornments\")}>\n {!isDisabled && !isReadOnly && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n </div>\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n }\n);\n"],"names":["MultilineInput","multilineInputCss","value"],"mappings":";;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AA8C/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eACP,CAAA;AAAA,IACE,uBAAyB,EAAA,oBAAA;AAAA,IACzB,eAAiB,EAAA,YAAA;AAAA,IACjB,WAAa,EAAA,QAAA;AAAA,IACb,QAAW,GAAA,KAAA;AAAA,IACX,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,YAAA;AAAA,IACA,EAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAO,GAAA,CAAA;AAAA,IACP,cAAA;AAAA,IACA,KAAA;AAAA,IACA,gBAAgB,EAAC;AAAA,IACjB,WAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,YAAc,EAAA,gBAAA,GAAmB,SAAc,KAAA,KAAA,CAAA,GAAY,EAAK,GAAA,KAAA,CAAA;AAAA,IAChE,gBAAkB,EAAA,oBAAA;AAAA,IAClB,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,aAAgB,GAAA;AAAA,MACpB,uBAAyB,EAAA,oBAAA;AAAA,MACzB,eAAiB,EAAA,YAAA;AAAA,MACjB,WAAa,EAAA,QAAA;AAAA,KACf,CAAA;AAEA,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE5C,IAAM,MAAA;AAAA,MACJ,kBAAoB,EAAA,mBAAA;AAAA,MACpB,iBAAmB,EAAA,kBAAA;AAAA,MACnB,MAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAU,EAAA,gBAAA;AAAA,MACP,GAAA,iBAAA;AAAA,KACD,GAAA,aAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,SAAW,EAAA;AAAA,QACT,kBAAoB,EAAA,oBAAA;AAAA,QACpB,iBAAmB,EAAA,mBAAA;AAAA,UACjB,EAAC;AAAA,MACL,QAAU,EAAA,iBAAA;AAAA,MACV,QAAU,EAAA,iBAAA;AAAA,MACV,SAAW,EAAA,iBAAA;AAAA,MACX,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,aAAa,QAAY,IAAA,iBAAA,CAAA;AAC/B,IAAA,MAAM,aAAa,QAAY,IAAA,iBAAA,CAAA;AAC/B,IAAA,MAAM,mBAAmB,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,oBAAA,CAAA;AACtD,IAAM,MAAA,UAAA,GAAa,oBACf,CAAC,UAAA,EAAY,UAAU,CAAE,CAAA,QAAA,CAAS,iBAAiB,CACtC,GAAA,gBAAA,CAAA;AAEjB,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,aAAc,CAAA;AAAA,MACtC,UAAY,EAAA,SAAA;AAAA,MACZ,OAAS,EAAA,gBAAA;AAAA,MACT,IAAM,EAAA,gBAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CAAC,KAA4C,KAAA;AAChE,MAAMC,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,KAAA,CAAA;AAC3B,MAAA,QAAA,CAASA,MAAK,CAAA,CAAA;AACd,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAM,MAAA,UAAA,GAAa,CAAC,KAA2C,KAAA;AAC7D,MAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AACT,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAA2C,KAAA;AAC9D,MAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AACV,MAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,MAAM,oBAAuB,GAAA;AAAA,MAC3B,2BAA6B,EAAA,IAAA;AAAA,MAC7B,GAAG,KAAA;AAAA,KACL,CAAA;AAEA,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,kBAAkB,CAAI,GAAA,YAAA;AAAA,UACpC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,SAAS,IAAI,CAAC,UAAA,IAAc,CAAC,UAAc,IAAA,OAAA;AAAA,UACzD,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,SAC1C;AAAA,QACA,aAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAO,EAAA,oBAAA;AAAA,MACN,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,cAAA,oBACE,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,yBAAyB,CAAA;AAAA,UACnD,QAAA,EAAA,cAAA;AAAA,SACH,CAAA;AAAA,wBAED,GAAA,CAAA,UAAA,EAAA;AAAA,UACC,kBAAA,EAAkB,IAAK,CAAA,oBAAA,EAAsB,mBAAmB,CAAA;AAAA,UAChE,iBAAA,EAAiB,IAAK,CAAA,mBAAA,EAAqB,kBAAkB,CAAA;AAAA,UAC7D,WAAW,IAAK,CAAA,YAAA,CAAa,UAAU,CAAA,EAAG,+CAAe,SAAS,CAAA;AAAA,UAClE,QAAU,EAAA,UAAA;AAAA,UACV,EAAA;AAAA,UACA,QAAU,EAAA,UAAA;AAAA,UACV,GAAK,EAAA,WAAA;AAAA,UACL,QAAU,EAAA,UAAA;AAAA,UACV,IAAA;AAAA,UACA,IAAA;AAAA,UACA,QAAA,EAAU,UAAc,IAAA,UAAA,GAAa,CAAK,CAAA,GAAA,CAAA;AAAA,UAC1C,MAAQ,EAAA,UAAA;AAAA,UACR,QAAU,EAAA,YAAA;AAAA,UACV,OAAS,EAAA,CAAC,UAAc,IAAA,CAAC,aAAa,WAAc,GAAA,KAAA,CAAA;AAAA,UACpD,WAAA;AAAA,UACA,KAAA;AAAA,UACC,GAAG,aAAA;AAAA,UACH,GAAG,iBAAA;AAAA,SACN,CAAA;AAAA,wBACC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,kBAAkB,CAAA;AAAA,UAC5C,QAAA,EAAA;AAAA,YAAA,CAAC,UAAc,IAAA,CAAC,UAAc,IAAA,gBAAA,oBAC5B,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,0BAA0B,CAAA;AAAA,cACrD,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA;AAAA,gBAAgB,MAAQ,EAAA,gBAAA;AAAA,eAAkB,CAAA;AAAA,aAC7C,CAAA;AAAA,YAED,gCACE,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,uBAAuB,CAAA;AAAA,cACjD,QAAA,EAAA,YAAA;AAAA,aACH,CAAA;AAAA,WAAA;AAAA,SAEJ,CAAA;AAAA,wBACC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,qBAAqB,CAAA;AAAA,SAAG,CAAA;AAAA,OAAA;AAAA,KACvD,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,16 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { createContext, useContext } from 'react';
3
-
4
- const TrackerStepTooltipContext = createContext(false);
5
- const TrackStepTooltipProvider = ({
6
- children
7
- }) => {
8
- return /* @__PURE__ */ jsx(TrackerStepTooltipContext.Provider, {
9
- value: true,
10
- children
11
- });
12
- };
13
- const useTrackerStepTooltipContext = () => useContext(TrackerStepTooltipContext);
14
-
15
- export { TrackStepTooltipProvider, useTrackerStepTooltipContext };
16
- //# sourceMappingURL=TrackerStepTooltipContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TrackerStepTooltipContext.js","sources":["../src/stepped-tracker/TrackerStep/TrackerStepTooltipContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext } from \"react\";\n\nconst TrackerStepTooltipContext = createContext<boolean>(false);\n\ntype TrackStepTooltipProps = {\n children: ReactNode;\n};\n\nexport const TrackStepTooltipProvider = ({\n children,\n}: TrackStepTooltipProps) => {\n return (\n <TrackerStepTooltipContext.Provider value={true}>\n {children}\n </TrackerStepTooltipContext.Provider>\n );\n};\n\nexport const useTrackerStepTooltipContext = () =>\n useContext(TrackerStepTooltipContext);\n"],"names":[],"mappings":";;;AAEA,MAAM,yBAAA,GAA4B,cAAuB,KAAK,CAAA,CAAA;AAMvD,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AACF,CAA6B,KAAA;AAC3B,EACE,uBAAA,GAAA,CAAC,0BAA0B,QAA1B,EAAA;AAAA,IAAmC,KAAO,EAAA,IAAA;AAAA,IACxC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,4BAAA,GAA+B,MAC1C,UAAA,CAAW,yBAAyB;;;;"}
@@ -1,69 +0,0 @@
1
- import { useState, useRef, useEffect, useCallback } from 'react';
2
-
3
- const useDetectTruncatedText = (callback) => {
4
- const [observedMap] = useState(() => /* @__PURE__ */ new Map());
5
- const callbackRef = useRef(callback);
6
- useEffect(() => {
7
- callbackRef.current = callback;
8
- }, [callback]);
9
- const isTruncatedRef = useRef(false);
10
- const checkEntries = useCallback(() => {
11
- let anyEntriesTruncated = false;
12
- observedMap.forEach((entry) => {
13
- if (entry.offsetWidth < entry.scrollWidth) {
14
- anyEntriesTruncated = true;
15
- }
16
- });
17
- if (anyEntriesTruncated !== isTruncatedRef.current) {
18
- isTruncatedRef.current = anyEntriesTruncated;
19
- callbackRef.current(anyEntriesTruncated);
20
- }
21
- }, [observedMap]);
22
- const getRo = useCallback(() => {
23
- return new ResizeObserver(checkEntries);
24
- }, [checkEntries]);
25
- const [ro, setRo] = useState(() => getRo());
26
- useEffect(() => {
27
- return () => {
28
- ro.disconnect();
29
- };
30
- }, [ro]);
31
- useEffect(() => {
32
- setRo(getRo());
33
- }, [getRo]);
34
- const observeAndUnobserveRef = useCallback(
35
- (id, el) => {
36
- if (!el) {
37
- const existingRef = observedMap.get(id);
38
- if (existingRef) {
39
- ro.unobserve(existingRef);
40
- observedMap.delete(id);
41
- }
42
- } else {
43
- const existingRef = observedMap.get(id);
44
- if (el === existingRef) {
45
- return;
46
- }
47
- if (existingRef) {
48
- ro.unobserve(existingRef);
49
- }
50
- observedMap.set(id, el);
51
- ro.observe(el);
52
- checkEntries();
53
- }
54
- },
55
- [observedMap, ro, checkEntries]
56
- );
57
- const getOverflowRef = useCallback(
58
- (id) => {
59
- return (el) => {
60
- observeAndUnobserveRef(id, el);
61
- };
62
- },
63
- [observeAndUnobserveRef]
64
- );
65
- return getOverflowRef;
66
- };
67
-
68
- export { useDetectTruncatedText as default };
69
- //# sourceMappingURL=useDetectTruncatedText.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useDetectTruncatedText.js","sources":["../src/stepped-tracker/useDetectTruncatedText.ts"],"sourcesContent":["import { useState, useRef, useEffect, useCallback, RefCallback } from \"react\";\n\ntype OnTruncatedCallback = (isTruncated: boolean) => void;\nexport type GetOverflowRef = (id: string) => RefCallback<HTMLElement>;\n\n/**\n * Hook to detect truncation of any child TrackerStep components, using a ResizeObserver to update on element resizes.\n * The desired behaviour is whenever any of the individual steps is truncated, all steps become foccusable with Tooltips.\n * @param {OnTruncatedCallback} callback - The callback which will called when the isTruncated state changes\n * @returns {GetOverflowRef} getOverflowRef - A factory function which when passed a child index will return an appropriate ref callback for observing am element\n */\nconst useDetectTruncatedText = (\n callback: OnTruncatedCallback\n): GetOverflowRef => {\n // Used for tracking creation/destruction of child elements\n const [observedMap] = useState(() => new Map<string, HTMLElement>());\n\n // Store callback as a ref to prevent re-creating ResizeObserver, update using an effect\n const callbackRef = useRef<(isOverflowing: boolean) => void>(callback);\n useEffect(() => {\n callbackRef.current = callback;\n }, [callback]);\n const isTruncatedRef = useRef(false);\n\n const checkEntries = useCallback(() => {\n let anyEntriesTruncated = false;\n\n observedMap.forEach((entry) => {\n if (entry.offsetWidth < entry.scrollWidth) {\n anyEntriesTruncated = true;\n }\n });\n\n if (anyEntriesTruncated !== isTruncatedRef.current) {\n isTruncatedRef.current = anyEntriesTruncated;\n callbackRef.current(anyEntriesTruncated);\n }\n }, [observedMap]);\n\n // Creation of the ResizeObserver, should only happen once\n const getRo = useCallback(() => {\n return new ResizeObserver(checkEntries);\n }, [checkEntries]);\n\n // Management of the ResizeObserver lifecycle. It should only be created once for each StepTracker compoenent\n const [ro, setRo] = useState(() => getRo());\n useEffect(() => {\n return () => {\n ro.disconnect();\n };\n }, [ro]);\n useEffect(() => {\n setRo(getRo());\n }, [getRo]);\n\n // Function for managing the observing/unobserving of elements based on their ref callbacks\n const observeAndUnobserveRef = useCallback(\n (id: string, el: HTMLElement | null) => {\n if (!el) {\n const existingRef = observedMap.get(id);\n if (existingRef) {\n ro.unobserve(existingRef);\n observedMap.delete(id);\n }\n } else {\n const existingRef = observedMap.get(id);\n if (el === existingRef) {\n return;\n }\n\n if (existingRef) {\n ro.unobserve(existingRef);\n }\n\n observedMap.set(id, el);\n ro.observe(el);\n checkEntries();\n }\n },\n [observedMap, ro, checkEntries]\n );\n\n // Factory function which creates a suitable html ref callback which includes the index\n const getOverflowRef = useCallback<GetOverflowRef>(\n (id: string) => {\n return (el: HTMLElement | null) => {\n observeAndUnobserveRef(id, el);\n };\n },\n [observeAndUnobserveRef]\n );\n\n return getOverflowRef;\n};\n\nexport default useDetectTruncatedText;\n"],"names":[],"mappings":"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"}
@@ -1,30 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
-
3
- function CheckedIcon({ className }) {
4
- return /* @__PURE__ */ jsx("svg", {
5
- "aria-hidden": "true",
6
- className,
7
- focusable: "false",
8
- shapeRendering: "crispEdges",
9
- viewBox: "0 0 14 14",
10
- children: /* @__PURE__ */ jsxs("g", {
11
- fillRule: "evenodd",
12
- children: [
13
- /* @__PURE__ */ jsx("rect", {
14
- height: "14",
15
- width: "14",
16
- x: "0",
17
- y: "0"
18
- }),
19
- /* @__PURE__ */ jsx("polygon", {
20
- className: `${className}Tick`,
21
- fillRule: "nonzero",
22
- points: "12 4.22226066 10.6259221 3 5.58277771 8.37894955 3.3179086 6.13993399 2 7.40754746 5.63993779 11"
23
- })
24
- ]
25
- })
26
- });
27
- }
28
-
29
- export { CheckedIcon };
30
- //# sourceMappingURL=CheckedIcon.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CheckedIcon.js","sources":["../src/switch/assets/CheckedIcon.tsx"],"sourcesContent":["export function CheckedIcon({ className }: { className: string }) {\n return (\n <svg\n aria-hidden=\"true\"\n className={className}\n focusable=\"false\"\n shapeRendering=\"crispEdges\"\n viewBox=\"0 0 14 14\"\n >\n <g fillRule=\"evenodd\">\n <rect height=\"14\" width=\"14\" x=\"0\" y=\"0\" />\n <polygon\n className={`${className}Tick`}\n fillRule=\"nonzero\"\n points=\"12 4.22226066 10.6259221 3 5.58277771 8.37894955 3.3179086 6.13993399 2 7.40754746 5.63993779 11\"\n />\n </g>\n </svg>\n );\n}\n"],"names":[],"mappings":";;AAAgB,SAAA,WAAA,CAAY,EAAE,SAAA,EAAoC,EAAA;AAChE,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAA;AAAA,IACA,SAAU,EAAA,OAAA;AAAA,IACV,cAAe,EAAA,YAAA;AAAA,IACf,OAAQ,EAAA,WAAA;AAAA,IAER,QAAC,kBAAA,IAAA,CAAA,GAAA,EAAA;AAAA,MAAE,QAAS,EAAA,SAAA;AAAA,MACV,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,MAAO,EAAA,IAAA;AAAA,UAAK,KAAM,EAAA,IAAA;AAAA,UAAK,CAAE,EAAA,GAAA;AAAA,UAAI,CAAE,EAAA,GAAA;AAAA,SAAI,CAAA;AAAA,wBACxC,GAAA,CAAA,SAAA,EAAA;AAAA,UACC,WAAW,CAAG,EAAA,SAAA,CAAA,IAAA,CAAA;AAAA,UACd,QAAS,EAAA,SAAA;AAAA,UACT,MAAO,EAAA,kGAAA;AAAA,SACT,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
@@ -1,8 +0,0 @@
1
- import React, { LabelHTMLAttributes, ReactNode } from "react";
2
- export interface ControlLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
3
- disabled?: boolean;
4
- label?: ReactNode;
5
- labelPlacement?: "left" | "right";
6
- }
7
- export declare const baseName = "saltControlLabel";
8
- export declare const ControlLabel: React.ForwardRefExoticComponent<ControlLabelProps & React.RefAttributes<HTMLLabelElement>>;
@@ -1 +0,0 @@
1
- export * from "./ControlLabel";
@@ -1,40 +0,0 @@
1
- import { ComponentPropsWithoutRef, ReactNode, Ref, TextareaHTMLAttributes } from "react";
2
- export interface MultilineInputProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "value" | "defaultValue" | "placeholder"> {
3
- /**
4
- * Styling variant with full border. Defaults to false
5
- */
6
- bordered?: boolean;
7
- /**
8
- * End adornment component
9
- */
10
- endAdornment?: ReactNode;
11
- /**
12
- * If `true`, the component is read only.
13
- */
14
- readOnly?: boolean;
15
- /**
16
- * Number of rows. Defaults to 3
17
- */
18
- rows?: number;
19
- /**
20
- * Start adornment component
21
- */
22
- startAdornment?: ReactNode;
23
- /**
24
- * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.
25
- */
26
- textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
27
- /**
28
- * Optional ref for the textarea component
29
- */
30
- textAreaRef?: Ref<HTMLTextAreaElement>;
31
- /**
32
- * Validation status.
33
- */
34
- validationStatus?: "error" | "warning" | "success";
35
- /**
36
- * Styling variant. Defaults to "primary".
37
- */
38
- variant?: "primary" | "secondary";
39
- }
40
- export declare const MultilineInput: import("react").ForwardRefExoticComponent<MultilineInputProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -1 +0,0 @@
1
- export * from "./MultilineInput";
@@ -1,7 +0,0 @@
1
- import { ReactNode } from "react";
2
- declare type TrackStepTooltipProps = {
3
- children: ReactNode;
4
- };
5
- export declare const TrackStepTooltipProvider: ({ children, }: TrackStepTooltipProps) => JSX.Element;
6
- export declare const useTrackerStepTooltipContext: () => boolean;
7
- export {};
@@ -1,11 +0,0 @@
1
- import { RefCallback } from "react";
2
- declare type OnTruncatedCallback = (isTruncated: boolean) => void;
3
- export declare type GetOverflowRef = (id: string) => RefCallback<HTMLElement>;
4
- /**
5
- * Hook to detect truncation of any child TrackerStep components, using a ResizeObserver to update on element resizes.
6
- * The desired behaviour is whenever any of the individual steps is truncated, all steps become foccusable with Tooltips.
7
- * @param {OnTruncatedCallback} callback - The callback which will called when the isTruncated state changes
8
- * @returns {GetOverflowRef} getOverflowRef - A factory function which when passed a child index will return an appropriate ref callback for observing am element
9
- */
10
- declare const useDetectTruncatedText: (callback: OnTruncatedCallback) => GetOverflowRef;
11
- export default useDetectTruncatedText;
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- export declare function CheckedIcon({ className }: {
3
- className: string;
4
- }): JSX.Element;