@salt-ds/lab 1.0.0-alpha.14 → 1.0.0-alpha.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-cjs/badge/Badge.css.js +1 -1
- package/dist-cjs/badge/Badge.js +7 -23
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/combo-box-next/ComboBoxNext.css.js +6 -0
- package/dist-cjs/combo-box-next/ComboBoxNext.css.js.map +1 -0
- package/dist-cjs/combo-box-next/ComboBoxNext.js +177 -0
- package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -0
- package/dist-cjs/combo-box-next/useComboBox.js +137 -0
- package/dist-cjs/combo-box-next/useComboBox.js.map +1 -0
- package/dist-cjs/combo-box-next/useComboboxPortal.js +69 -0
- package/dist-cjs/combo-box-next/useComboboxPortal.js.map +1 -0
- package/dist-cjs/combo-box-next/utils.js +40 -0
- package/dist-cjs/combo-box-next/utils.js.map +1 -0
- package/dist-cjs/content-status/ContentStatus.js +0 -2
- package/dist-cjs/content-status/ContentStatus.js.map +1 -1
- package/dist-cjs/content-status/internal/StatusIndicator.js +0 -2
- package/dist-cjs/content-status/internal/StatusIndicator.js.map +1 -1
- package/dist-cjs/dialog/Dialog.css.js +1 -1
- package/dist-cjs/dialog/Dialog.js +53 -56
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.css.js +1 -1
- package/dist-cjs/dialog/DialogActions.js +15 -17
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.css.js +6 -0
- package/dist-cjs/dialog/DialogCloseButton.css.js.map +1 -0
- package/dist-cjs/dialog/DialogCloseButton.js +39 -0
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -0
- package/dist-cjs/dialog/DialogContent.css.js +1 -1
- package/dist-cjs/dialog/DialogContent.js +20 -29
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/{internal/DialogContext.js → DialogContext.js} +4 -0
- package/dist-cjs/dialog/DialogContext.js.map +1 -0
- package/dist-cjs/dialog/DialogTitle.css.js +1 -1
- package/dist-cjs/dialog/DialogTitle.js +40 -41
- package/dist-cjs/dialog/DialogTitle.js.map +1 -1
- package/dist-cjs/dialog/useDialog.js +31 -0
- package/dist-cjs/dialog/useDialog.js.map +1 -0
- package/dist-cjs/drawer/Drawer.css.js +1 -1
- package/dist-cjs/drawer/Drawer.js +39 -45
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/useDrawer.js +31 -0
- package/dist-cjs/drawer/useDrawer.js.map +1 -0
- package/dist-cjs/dropdown-next/DropdownNext.css.js +6 -0
- package/dist-cjs/dropdown-next/DropdownNext.css.js.map +1 -0
- package/dist-cjs/dropdown-next/DropdownNext.js +181 -0
- package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -0
- package/dist-cjs/dropdown-next/useDropdownNext.js +169 -0
- package/dist-cjs/dropdown-next/useDropdownNext.js.map +1 -0
- package/dist-cjs/form-field-legacy/FormFieldLegacy.css.js +1 -1
- package/dist-cjs/index.js +19 -13
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/list/Highlighter.js +1 -1
- package/dist-cjs/list/Highlighter.js.map +1 -1
- package/dist-cjs/list-next/ListItemNext.css.js +1 -1
- package/dist-cjs/list-next/ListItemNext.js +17 -6
- package/dist-cjs/list-next/ListItemNext.js.map +1 -1
- package/dist-cjs/list-next/ListNext.js +21 -10
- package/dist-cjs/list-next/ListNext.js.map +1 -1
- package/dist-cjs/list-next/ListNextContext.js.map +1 -1
- package/dist-cjs/list-next/useList.js +96 -37
- package/dist-cjs/list-next/useList.js.map +1 -1
- package/dist-cjs/logo/Logo.css.js +1 -1
- package/dist-cjs/logo/LogoImage.css.js +6 -0
- package/dist-cjs/logo/LogoImage.css.js.map +1 -0
- package/dist-cjs/logo/LogoImage.js +9 -0
- package/dist-cjs/logo/LogoImage.js.map +1 -1
- package/dist-cjs/logo/LogoSeparator.css.js +1 -1
- package/dist-cjs/{nav-item/ExpansionButton.js → navigation-item/ExpansionIcon.js} +8 -13
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -0
- package/dist-cjs/navigation-item/NavigationItem.css.js +6 -0
- package/dist-cjs/navigation-item/NavigationItem.css.js.map +1 -0
- package/dist-cjs/navigation-item/NavigationItem.js +96 -0
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -0
- package/dist-cjs/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +44 -51
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +9 -49
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.css.js +1 -1
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js +5 -13
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js.map +1 -1
- package/dist-cjs/stepped-tracker/SteppedTracker.css.js +1 -1
- package/dist-cjs/stepped-tracker/SteppedTracker.js +0 -5
- package/dist-cjs/stepped-tracker/SteppedTracker.js.map +1 -1
- package/dist-cjs/stepped-tracker/SteppedTrackerContext.js +1 -7
- package/dist-cjs/stepped-tracker/SteppedTrackerContext.js.map +1 -1
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.css.js +1 -1
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js +1 -1
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js +2 -14
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
- package/dist-cjs/switch/Switch.css.js +1 -1
- package/dist-cjs/switch/Switch.js +67 -72
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/toast-group/ToastGroup.css.js +6 -0
- package/dist-cjs/toast-group/ToastGroup.css.js.map +1 -0
- package/dist-cjs/toast-group/ToastGroup.js +32 -0
- package/dist-cjs/toast-group/ToastGroup.js.map +1 -0
- package/dist-es/badge/Badge.css.js +1 -1
- package/dist-es/badge/Badge.js +9 -25
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/combo-box-next/ComboBoxNext.css.js +4 -0
- package/dist-es/combo-box-next/ComboBoxNext.css.js.map +1 -0
- package/dist-es/combo-box-next/ComboBoxNext.js +173 -0
- package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -0
- package/dist-es/combo-box-next/useComboBox.js +133 -0
- package/dist-es/combo-box-next/useComboBox.js.map +1 -0
- package/dist-es/combo-box-next/useComboboxPortal.js +65 -0
- package/dist-es/combo-box-next/useComboboxPortal.js.map +1 -0
- package/dist-es/combo-box-next/utils.js +35 -0
- package/dist-es/combo-box-next/utils.js.map +1 -0
- package/dist-es/content-status/ContentStatus.js +0 -2
- package/dist-es/content-status/ContentStatus.js.map +1 -1
- package/dist-es/content-status/internal/StatusIndicator.js +0 -2
- package/dist-es/content-status/internal/StatusIndicator.js.map +1 -1
- package/dist-es/dialog/Dialog.css.js +1 -1
- package/dist-es/dialog/Dialog.js +53 -56
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.css.js +1 -1
- package/dist-es/dialog/DialogActions.js +15 -17
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.css.js +4 -0
- package/dist-es/dialog/DialogCloseButton.css.js.map +1 -0
- package/dist-es/dialog/DialogCloseButton.js +31 -0
- package/dist-es/dialog/DialogCloseButton.js.map +1 -0
- package/dist-es/dialog/DialogContent.css.js +1 -1
- package/dist-es/dialog/DialogContent.js +20 -29
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogContext.js +9 -0
- package/dist-es/dialog/DialogContext.js.map +1 -0
- package/dist-es/dialog/DialogTitle.css.js +1 -1
- package/dist-es/dialog/DialogTitle.js +37 -42
- package/dist-es/dialog/DialogTitle.js.map +1 -1
- package/dist-es/dialog/useDialog.js +27 -0
- package/dist-es/dialog/useDialog.js.map +1 -0
- package/dist-es/drawer/Drawer.css.js +1 -1
- package/dist-es/drawer/Drawer.js +40 -46
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/useDrawer.js +27 -0
- package/dist-es/drawer/useDrawer.js.map +1 -0
- package/dist-es/dropdown-next/DropdownNext.css.js +4 -0
- package/dist-es/dropdown-next/DropdownNext.css.js.map +1 -0
- package/dist-es/dropdown-next/DropdownNext.js +177 -0
- package/dist-es/dropdown-next/DropdownNext.js.map +1 -0
- package/dist-es/dropdown-next/useDropdownNext.js +165 -0
- package/dist-es/dropdown-next/useDropdownNext.js.map +1 -0
- package/dist-es/form-field-legacy/FormFieldLegacy.css.js +1 -1
- package/dist-es/index.js +9 -6
- package/dist-es/index.js.map +1 -1
- package/dist-es/list/Highlighter.js +1 -1
- package/dist-es/list/Highlighter.js.map +1 -1
- package/dist-es/list-next/ListItemNext.css.js +1 -1
- package/dist-es/list-next/ListItemNext.js +17 -6
- package/dist-es/list-next/ListItemNext.js.map +1 -1
- package/dist-es/list-next/ListNext.js +21 -10
- package/dist-es/list-next/ListNext.js.map +1 -1
- package/dist-es/list-next/ListNextContext.js.map +1 -1
- package/dist-es/list-next/useList.js +98 -39
- package/dist-es/list-next/useList.js.map +1 -1
- package/dist-es/logo/Logo.css.js +1 -1
- package/dist-es/logo/LogoImage.css.js +4 -0
- package/dist-es/logo/LogoImage.css.js.map +1 -0
- package/dist-es/logo/LogoImage.js +9 -0
- package/dist-es/logo/LogoImage.js.map +1 -1
- package/dist-es/logo/LogoSeparator.css.js +1 -1
- package/dist-es/navigation-item/ExpansionIcon.js +27 -0
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -0
- package/dist-es/navigation-item/NavigationItem.css.js +4 -0
- package/dist-es/navigation-item/NavigationItem.css.js.map +1 -0
- package/dist-es/navigation-item/NavigationItem.js +92 -0
- package/dist-es/navigation-item/NavigationItem.js.map +1 -0
- package/dist-es/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +45 -52
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +9 -49
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js +1 -1
- package/dist-es/stepped-tracker/StepLabel/StepLabel.js +7 -15
- package/dist-es/stepped-tracker/StepLabel/StepLabel.js.map +1 -1
- package/dist-es/stepped-tracker/SteppedTracker.css.js +1 -1
- package/dist-es/stepped-tracker/SteppedTracker.js +1 -6
- package/dist-es/stepped-tracker/SteppedTracker.js.map +1 -1
- package/dist-es/stepped-tracker/SteppedTrackerContext.js +1 -7
- package/dist-es/stepped-tracker/SteppedTrackerContext.js.map +1 -1
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js +1 -1
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js +1 -1
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js +3 -15
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -1
- package/dist-es/switch/Switch.css.js +1 -1
- package/dist-es/switch/Switch.js +70 -75
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/toast-group/ToastGroup.css.js +4 -0
- package/dist-es/toast-group/ToastGroup.css.js.map +1 -0
- package/dist-es/toast-group/ToastGroup.js +28 -0
- package/dist-es/toast-group/ToastGroup.js.map +1 -0
- package/dist-types/badge/Badge.d.ts +5 -16
- package/dist-types/combo-box-next/ComboBoxNext.d.ts +70 -0
- package/dist-types/combo-box-next/index.d.ts +1 -0
- package/dist-types/combo-box-next/useComboBox.d.ts +34 -0
- package/dist-types/combo-box-next/useComboboxPortal.d.ts +15 -0
- package/dist-types/combo-box-next/utils.d.ts +8 -0
- package/dist-types/content-status/internal/StatusIndicator.d.ts +2 -2
- package/dist-types/dialog/Dialog.d.ts +17 -12
- package/dist-types/dialog/DialogActions.d.ts +1 -3
- package/dist-types/dialog/DialogCloseButton.d.ts +3 -0
- package/dist-types/dialog/DialogContent.d.ts +1 -3
- package/dist-types/dialog/DialogContext.d.ts +9 -0
- package/dist-types/dialog/DialogTitle.d.ts +7 -8
- package/dist-types/dialog/index.d.ts +4 -2
- package/dist-types/dialog/useDialog.d.ts +27 -0
- package/dist-types/drawer/Drawer.d.ts +3 -12
- package/dist-types/drawer/index.d.ts +1 -0
- package/dist-types/drawer/useDrawer.d.ts +27 -0
- package/dist-types/dropdown-next/DropdownNext.d.ts +42 -0
- package/dist-types/dropdown-next/index.d.ts +1 -0
- package/dist-types/dropdown-next/useDropdownNext.d.ts +31 -0
- package/dist-types/index.d.ts +4 -3
- package/dist-types/list-next/ListItemNext.d.ts +6 -1
- package/dist-types/list-next/ListNext.d.ts +7 -2
- package/dist-types/list-next/ListNextContext.d.ts +4 -2
- package/dist-types/list-next/useList.d.ts +16 -9
- package/dist-types/navigation-item/ExpansionIcon.d.ts +3 -0
- package/dist-types/navigation-item/NavigationItem.d.ts +36 -0
- package/dist-types/navigation-item/index.d.ts +1 -0
- package/dist-types/progress/CircularProgress/CircularProgress.d.ts +1 -21
- package/dist-types/progress/LinearProgress/LinearProgress.d.ts +1 -26
- package/dist-types/stepped-tracker/StepLabel/StepLabel.d.ts +3 -5
- package/dist-types/stepped-tracker/SteppedTrackerContext.d.ts +1 -4
- package/dist-types/stepped-tracker/TrackerStep/index.d.ts +0 -1
- package/dist-types/switch/Switch.d.ts +43 -6
- package/dist-types/toast-group/ToastGroup.d.ts +5 -0
- package/dist-types/toast-group/index.d.ts +1 -0
- package/package.json +5 -5
- package/dist-cjs/control-label/ControlLabel.css.js +0 -6
- package/dist-cjs/control-label/ControlLabel.css.js.map +0 -1
- package/dist-cjs/control-label/ControlLabel.js +0 -48
- package/dist-cjs/control-label/ControlLabel.js.map +0 -1
- package/dist-cjs/dialog/internal/DialogContext.js.map +0 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +0 -6
- package/dist-cjs/multiline-input/MultilineInput.css.js.map +0 -1
- package/dist-cjs/multiline-input/MultilineInput.js +0 -162
- package/dist-cjs/multiline-input/MultilineInput.js.map +0 -1
- package/dist-cjs/nav-item/ExpansionButton.js.map +0 -1
- package/dist-cjs/nav-item/NavItem.css.js +0 -6
- package/dist-cjs/nav-item/NavItem.css.js.map +0 -1
- package/dist-cjs/nav-item/NavItem.js +0 -78
- package/dist-cjs/nav-item/NavItem.js.map +0 -1
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js +0 -21
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js.map +0 -1
- package/dist-cjs/stepped-tracker/useDetectTruncatedText.js +0 -71
- package/dist-cjs/stepped-tracker/useDetectTruncatedText.js.map +0 -1
- package/dist-cjs/switch/assets/CheckedIcon.js +0 -34
- package/dist-cjs/switch/assets/CheckedIcon.js.map +0 -1
- package/dist-es/control-label/ControlLabel.css.js +0 -4
- package/dist-es/control-label/ControlLabel.css.js.map +0 -1
- package/dist-es/control-label/ControlLabel.js +0 -43
- package/dist-es/control-label/ControlLabel.js.map +0 -1
- package/dist-es/dialog/internal/DialogContext.js +0 -6
- package/dist-es/dialog/internal/DialogContext.js.map +0 -1
- package/dist-es/multiline-input/MultilineInput.css.js +0 -4
- package/dist-es/multiline-input/MultilineInput.css.js.map +0 -1
- package/dist-es/multiline-input/MultilineInput.js +0 -158
- package/dist-es/multiline-input/MultilineInput.js.map +0 -1
- package/dist-es/nav-item/ExpansionButton.js +0 -32
- package/dist-es/nav-item/ExpansionButton.js.map +0 -1
- package/dist-es/nav-item/NavItem.css.js +0 -4
- package/dist-es/nav-item/NavItem.css.js.map +0 -1
- package/dist-es/nav-item/NavItem.js +0 -74
- package/dist-es/nav-item/NavItem.js.map +0 -1
- package/dist-es/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js +0 -16
- package/dist-es/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js.map +0 -1
- package/dist-es/stepped-tracker/useDetectTruncatedText.js +0 -69
- package/dist-es/stepped-tracker/useDetectTruncatedText.js.map +0 -1
- package/dist-es/switch/assets/CheckedIcon.js +0 -30
- package/dist-es/switch/assets/CheckedIcon.js.map +0 -1
- package/dist-types/control-label/ControlLabel.d.ts +0 -8
- package/dist-types/control-label/index.d.ts +0 -1
- package/dist-types/dialog/internal/DialogContext.d.ts +0 -6
- package/dist-types/multiline-input/MultilineInput.d.ts +0 -40
- package/dist-types/multiline-input/index.d.ts +0 -1
- package/dist-types/nav-item/ExpansionButton.d.ts +0 -3
- package/dist-types/nav-item/NavItem.d.ts +0 -17
- package/dist-types/nav-item/index.d.ts +0 -1
- package/dist-types/stepped-tracker/TrackerStep/TrackerStepTooltipContext.d.ts +0 -7
- package/dist-types/stepped-tracker/useDetectTruncatedText.d.ts +0 -11
- package/dist-types/switch/assets/CheckedIcon.d.ts +0 -4
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var window = require('@salt-ds/window');
|
|
9
|
-
var styles = require('@salt-ds/styles');
|
|
10
|
-
var ControlLabel$1 = require('./ControlLabel.css.js');
|
|
11
|
-
|
|
12
|
-
const baseName = "saltControlLabel";
|
|
13
|
-
const ControlLabel = React.forwardRef(
|
|
14
|
-
({ children, className, disabled, label, labelPlacement = "left", ...other }, ref) => {
|
|
15
|
-
const targetWindow = window.useWindow();
|
|
16
|
-
styles.useComponentCssInjection({
|
|
17
|
-
testId: "salt-control-label",
|
|
18
|
-
css: ControlLabel$1,
|
|
19
|
-
window: targetWindow
|
|
20
|
-
});
|
|
21
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("label", {
|
|
22
|
-
className: clsx.clsx(
|
|
23
|
-
baseName,
|
|
24
|
-
{
|
|
25
|
-
[`${baseName}-disabled`]: disabled
|
|
26
|
-
},
|
|
27
|
-
className
|
|
28
|
-
),
|
|
29
|
-
ref,
|
|
30
|
-
...other,
|
|
31
|
-
children: [
|
|
32
|
-
labelPlacement === "left" && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
33
|
-
className: `${baseName}-label`,
|
|
34
|
-
children: label
|
|
35
|
-
}),
|
|
36
|
-
children,
|
|
37
|
-
labelPlacement === "right" && /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
38
|
-
className: `${baseName}-labelRight`,
|
|
39
|
-
children: label
|
|
40
|
-
})
|
|
41
|
-
]
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
);
|
|
45
|
-
|
|
46
|
-
exports.ControlLabel = ControlLabel;
|
|
47
|
-
exports.baseName = baseName;
|
|
48
|
-
//# 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":["forwardRef","useWindow","useComponentCssInjection","controlLabelCss","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;AAgBO,MAAM,QAAW,GAAA,mBAAA;AAEjB,MAAM,YAAe,GAAAA,gBAAA;AAAA,EAC1B,CACE,EAAE,QAAA,EAAU,SAAW,EAAA,QAAA,EAAU,OAAO,cAAiB,GAAA,MAAA,EAAA,GAAW,KAAM,EAAA,EAC1E,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,eAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;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,0BACjBC,cAAA,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,2BACjBA,cAAA,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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContext.js","sources":["../src/dialog/internal/DialogContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ValidationStatus } from \"@salt-ds/core\";\n\nexport const DialogContext = createContext<{\n status?: ValidationStatus;\n dialogId?: string;\n setContentElement?: (node: HTMLDivElement) => void;\n}>({});\n"],"names":["createContext"],"mappings":";;;;;;AAGa,MAAA,aAAA,GAAgBA,mBAI1B,CAAA,EAAE;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
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";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=MultilineInput.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MultilineInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var clsx = require('clsx');
|
|
7
|
-
var React = require('react');
|
|
8
|
-
var core = require('@salt-ds/core');
|
|
9
|
-
var styles = require('@salt-ds/styles');
|
|
10
|
-
var window = require('@salt-ds/window');
|
|
11
|
-
var MultilineInput$1 = require('./MultilineInput.css.js');
|
|
12
|
-
|
|
13
|
-
const withBaseName = core.makePrefixer("saltMultilineInput");
|
|
14
|
-
const MultilineInput = React.forwardRef(
|
|
15
|
-
function MultilineInput2({
|
|
16
|
-
"aria-activedescendant": ariaActiveDescendant,
|
|
17
|
-
"aria-expanded": ariaExpanded,
|
|
18
|
-
"aria-owns": ariaOwns,
|
|
19
|
-
bordered = false,
|
|
20
|
-
className: classNameProp,
|
|
21
|
-
disabled,
|
|
22
|
-
endAdornment,
|
|
23
|
-
id,
|
|
24
|
-
placeholder,
|
|
25
|
-
readOnly,
|
|
26
|
-
role,
|
|
27
|
-
rows = 3,
|
|
28
|
-
startAdornment,
|
|
29
|
-
style,
|
|
30
|
-
textAreaProps = {},
|
|
31
|
-
textAreaRef,
|
|
32
|
-
value: valueProp,
|
|
33
|
-
defaultValue: defaultValueProp = valueProp === void 0 ? "" : void 0,
|
|
34
|
-
validationStatus: validationStatusProp,
|
|
35
|
-
variant = "primary",
|
|
36
|
-
...other
|
|
37
|
-
}, ref) {
|
|
38
|
-
const targetWindow = window.useWindow();
|
|
39
|
-
styles.useComponentCssInjection({
|
|
40
|
-
testId: "salt-multiline-input",
|
|
41
|
-
css: MultilineInput$1,
|
|
42
|
-
window: targetWindow
|
|
43
|
-
});
|
|
44
|
-
const restA11yProps = {
|
|
45
|
-
"aria-activedescendant": ariaActiveDescendant,
|
|
46
|
-
"aria-expanded": ariaExpanded,
|
|
47
|
-
"aria-owns": ariaOwns
|
|
48
|
-
};
|
|
49
|
-
const [focused, setFocused] = React.useState(false);
|
|
50
|
-
const {
|
|
51
|
-
"aria-describedby": textAreaDescribedBy,
|
|
52
|
-
"aria-labelledby": textAreaLabelledBy,
|
|
53
|
-
onBlur,
|
|
54
|
-
onChange,
|
|
55
|
-
onFocus,
|
|
56
|
-
required: textAreaRequired,
|
|
57
|
-
...restTextAreaProps
|
|
58
|
-
} = textAreaProps;
|
|
59
|
-
const {
|
|
60
|
-
a11yProps: {
|
|
61
|
-
"aria-describedby": formFieldDescribedBy,
|
|
62
|
-
"aria-labelledby": formFieldLabelledBy
|
|
63
|
-
} = {},
|
|
64
|
-
disabled: formFieldDisabled,
|
|
65
|
-
readOnly: formFieldReadOnly,
|
|
66
|
-
necessity: formFieldRequired,
|
|
67
|
-
validationStatus: formFieldValidationStatus
|
|
68
|
-
} = core.useFormFieldProps();
|
|
69
|
-
const isDisabled = disabled || formFieldDisabled;
|
|
70
|
-
const isReadOnly = readOnly || formFieldReadOnly;
|
|
71
|
-
const validationStatus = formFieldValidationStatus != null ? formFieldValidationStatus : validationStatusProp;
|
|
72
|
-
const isRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : textAreaRequired;
|
|
73
|
-
const [value, setValue] = core.useControlled({
|
|
74
|
-
controlled: valueProp,
|
|
75
|
-
default: defaultValueProp,
|
|
76
|
-
name: "MultilineInput",
|
|
77
|
-
state: "value"
|
|
78
|
-
});
|
|
79
|
-
const handleChange = (event) => {
|
|
80
|
-
const value2 = event.target.value;
|
|
81
|
-
setValue(value2);
|
|
82
|
-
onChange == null ? void 0 : onChange(event);
|
|
83
|
-
};
|
|
84
|
-
const handleBlur = (event) => {
|
|
85
|
-
onBlur == null ? void 0 : onBlur(event);
|
|
86
|
-
setFocused(false);
|
|
87
|
-
};
|
|
88
|
-
const handleFocus = (event) => {
|
|
89
|
-
onFocus == null ? void 0 : onFocus(event);
|
|
90
|
-
setFocused(true);
|
|
91
|
-
};
|
|
92
|
-
const multilineInputStyles = {
|
|
93
|
-
"--saltMultilineInput-rows": rows,
|
|
94
|
-
...style
|
|
95
|
-
};
|
|
96
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
97
|
-
className: clsx.clsx(
|
|
98
|
-
withBaseName(),
|
|
99
|
-
withBaseName(variant),
|
|
100
|
-
{
|
|
101
|
-
[withBaseName("withAdornmentRow")]: endAdornment,
|
|
102
|
-
[withBaseName("bordered")]: bordered,
|
|
103
|
-
[withBaseName("focused")]: !isDisabled && !isReadOnly && focused,
|
|
104
|
-
[withBaseName("disabled")]: isDisabled,
|
|
105
|
-
[withBaseName("readOnly")]: isReadOnly,
|
|
106
|
-
[withBaseName(validationStatus || "")]: validationStatus
|
|
107
|
-
},
|
|
108
|
-
classNameProp
|
|
109
|
-
),
|
|
110
|
-
ref,
|
|
111
|
-
style: multilineInputStyles,
|
|
112
|
-
...other,
|
|
113
|
-
children: [
|
|
114
|
-
startAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
115
|
-
className: withBaseName("startAdornmentContainer"),
|
|
116
|
-
children: startAdornment
|
|
117
|
-
}),
|
|
118
|
-
/* @__PURE__ */ jsxRuntime.jsx("textarea", {
|
|
119
|
-
"aria-describedby": clsx.clsx(formFieldDescribedBy, textAreaDescribedBy),
|
|
120
|
-
"aria-labelledby": clsx.clsx(formFieldLabelledBy, textAreaLabelledBy),
|
|
121
|
-
className: clsx.clsx(withBaseName("textarea"), textAreaProps == null ? void 0 : textAreaProps.className),
|
|
122
|
-
disabled: isDisabled,
|
|
123
|
-
id,
|
|
124
|
-
readOnly: isReadOnly,
|
|
125
|
-
ref: textAreaRef,
|
|
126
|
-
required: isRequired,
|
|
127
|
-
role,
|
|
128
|
-
rows,
|
|
129
|
-
tabIndex: isReadOnly || isDisabled ? -1 : 0,
|
|
130
|
-
onBlur: handleBlur,
|
|
131
|
-
onChange: handleChange,
|
|
132
|
-
onFocus: !isDisabled && !isReadOnly ? handleFocus : void 0,
|
|
133
|
-
placeholder,
|
|
134
|
-
value,
|
|
135
|
-
...restA11yProps,
|
|
136
|
-
...restTextAreaProps
|
|
137
|
-
}),
|
|
138
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
139
|
-
className: withBaseName("suffixAdornments"),
|
|
140
|
-
children: [
|
|
141
|
-
!isDisabled && !isReadOnly && validationStatus && /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
142
|
-
className: withBaseName("statusAdornmentContainer"),
|
|
143
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(core.StatusAdornment, {
|
|
144
|
-
status: validationStatus
|
|
145
|
-
})
|
|
146
|
-
}),
|
|
147
|
-
endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
148
|
-
className: withBaseName("endAdornmentContainer"),
|
|
149
|
-
children: endAdornment
|
|
150
|
-
})
|
|
151
|
-
]
|
|
152
|
-
}),
|
|
153
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
154
|
-
className: withBaseName("activationIndicator")
|
|
155
|
-
})
|
|
156
|
-
]
|
|
157
|
-
});
|
|
158
|
-
}
|
|
159
|
-
);
|
|
160
|
-
|
|
161
|
-
exports.MultilineInput = MultilineInput;
|
|
162
|
-
//# 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":["makePrefixer","forwardRef","MultilineInput","useWindow","useComponentCssInjection","multilineInputCss","useState","useFormFieldProps","useControlled","value","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ExpansionButton.js","sources":["../src/nav-item/ExpansionButton.tsx"],"sourcesContent":["import {\n ChevronDownIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from \"@salt-ds/icons\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport { Button } from \"@salt-ds/core\";\nimport { NavItemProps } from \"./NavItem\";\n\nconst iconExpansionMap = {\n vertical: {\n expanded: ChevronDownIcon,\n collapsed: ChevronRightIcon,\n },\n horizontal: {\n expanded: ChevronDownIcon,\n collapsed: ChevronUpIcon,\n },\n};\n\nexport function ExpansionButton({\n expanded = false,\n orientation = \"horizontal\",\n ...rest\n}: Pick<NavItemProps, \"expanded\" | \"orientation\"> &\n ComponentPropsWithoutRef<\"button\">) {\n const Icon =\n iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n return (\n <Button aria-label=\"expand\" variant=\"secondary\" {...rest}>\n <Icon aria-hidden=\"true\" />\n </Button>\n );\n}\n"],"names":["ChevronDownIcon","ChevronRightIcon","ChevronUpIcon","jsx","Button"],"mappings":";;;;;;;;AASA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAAA,qBAAA;AAAA,IACV,SAAW,EAAAC,sBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAAD,qBAAA;AAAA,IACV,SAAW,EAAAE,mBAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,eAAgB,CAAA;AAAA,EAC9B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CACsC,EAAA;AACpC,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,IAAO,YAAW,EAAA,QAAA;AAAA,IAAS,OAAQ,EAAA,WAAA;AAAA,IAAa,GAAG,IAAA;AAAA,IAClD,QAAC,kBAAAD,cAAA,CAAA,IAAA,EAAA;AAAA,MAAK,aAAY,EAAA,MAAA;AAAA,KAAO,CAAA;AAAA,GAC3B,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltNavItem {\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n background: var(--salt-navigable-primary-background);\n gap: var(--salt-spacing-75);\n}\n\n.saltNavItem-horizontal {\n min-height: calc(var(--salt-size-stackable) + var(--salt-size-accent) + var(--salt-spacing-100));\n padding: var(--salt-spacing-100);\n}\n\n.saltNavItem-vertical {\n min-height: var(--salt-size-stackable);\n}\n\n.saltNavItem-label,\n.saltNavItem-label:hover {\n color: var(--salt-text-primary-foreground);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n padding-left: calc(var(--saltNavItem-level, 0) * var(--salt-spacing-150));\n text-decoration: none;\n}\n\n.saltNavItem-vertical .saltNavItem-expandButton {\n justify-self: end;\n margin: calc((var(--salt-size-stackable) - var(--salt-size-base)) / 2);\n}\n\n.saltNavItem-horizontal {\n padding-top: calc(var(--salt-spacing-100) + var(--salt-size-accent));\n}\n\n.saltNavItem-vertical {\n padding-left: calc(var(--salt-spacing-200) + var(--salt-size-accent));\n}\n\n.saltNavItem:hover,\n.saltNavItem:focus {\n background: var(--salt-navigable-primary-background-hover);\n}\n\n.saltNavItem:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n.saltNavItem-active {\n background: var(--salt-navigable-primary-background-active);\n}\n\n.saltNavItem::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n}\n\n.saltNavItem-horizontal::after {\n width: 100%;\n height: var(--salt-size-accent);\n}\n\n.saltNavItem-vertical::after {\n width: var(--salt-size-accent);\n height: 100%;\n}\n\n.saltNavItem-horizontal:hover::after,\n.saltNavItem-horizontal:focus::after {\n background: var(--salt-navigable-indicator-hover);\n}\n\n.saltNavItem.saltNavItem-active::after,\n.saltNavItem.saltNavItem-active:hover::after,\n.saltNavItem.saltNavItem-active:focus::after {\n background: var(--saltNavItem-indicator-color, var(--salt-navigable-indicator-active));\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=NavItem.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
8
|
-
var clsx = require('clsx');
|
|
9
|
-
var ExpansionButton = require('./ExpansionButton.js');
|
|
10
|
-
var NavItem$1 = require('./NavItem.css.js');
|
|
11
|
-
var window = require('@salt-ds/window');
|
|
12
|
-
var styles = require('@salt-ds/styles');
|
|
13
|
-
|
|
14
|
-
const withBaseName = core.makePrefixer("saltNavItem");
|
|
15
|
-
const NavItem = React.forwardRef(
|
|
16
|
-
function NavItem2(props, ref) {
|
|
17
|
-
const {
|
|
18
|
-
active,
|
|
19
|
-
children,
|
|
20
|
-
className,
|
|
21
|
-
expanded = false,
|
|
22
|
-
orientation = "horizontal",
|
|
23
|
-
parent,
|
|
24
|
-
level = 0,
|
|
25
|
-
onExpand,
|
|
26
|
-
href,
|
|
27
|
-
style: styleProp,
|
|
28
|
-
...rest
|
|
29
|
-
} = props;
|
|
30
|
-
const targetWindow = window.useWindow();
|
|
31
|
-
styles.useComponentCssInjection({
|
|
32
|
-
testId: "salt-nav-item",
|
|
33
|
-
css: NavItem$1,
|
|
34
|
-
window: targetWindow
|
|
35
|
-
});
|
|
36
|
-
const style = {
|
|
37
|
-
...styleProp,
|
|
38
|
-
"--saltNavItem-level": `${level}`
|
|
39
|
-
};
|
|
40
|
-
const handleExpand = (event) => {
|
|
41
|
-
event.stopPropagation();
|
|
42
|
-
onExpand == null ? void 0 : onExpand(event);
|
|
43
|
-
};
|
|
44
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
45
|
-
className: clsx.clsx(
|
|
46
|
-
withBaseName(),
|
|
47
|
-
{
|
|
48
|
-
[withBaseName("active")]: active
|
|
49
|
-
},
|
|
50
|
-
withBaseName(orientation),
|
|
51
|
-
className
|
|
52
|
-
),
|
|
53
|
-
ref,
|
|
54
|
-
style,
|
|
55
|
-
...rest,
|
|
56
|
-
children: [
|
|
57
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.Link, {
|
|
58
|
-
className: withBaseName("label"),
|
|
59
|
-
"aria-current": active ? "page" : void 0,
|
|
60
|
-
href,
|
|
61
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
62
|
-
children
|
|
63
|
-
})
|
|
64
|
-
}),
|
|
65
|
-
parent && /* @__PURE__ */ jsxRuntime.jsx(ExpansionButton.ExpansionButton, {
|
|
66
|
-
"aria-expanded": expanded,
|
|
67
|
-
className: withBaseName("expandButton"),
|
|
68
|
-
expanded,
|
|
69
|
-
onClick: handleExpand,
|
|
70
|
-
orientation
|
|
71
|
-
})
|
|
72
|
-
]
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
exports.NavItem = NavItem;
|
|
78
|
-
//# sourceMappingURL=NavItem.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n MouseEventHandler,\n MouseEvent,\n} from \"react\";\nimport { makePrefixer, Link } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionButton } from \"./ExpansionButton\";\n\nimport navItemCss from \"./NavItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the nav item is active.\n */\n active?: boolean;\n expanded?: boolean;\n level?: number;\n /**\n * The orientation of the nav item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n parent?: boolean;\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavItem\");\n\nexport const NavItem = forwardRef<HTMLDivElement, NavItemProps>(\n function NavItem(props, ref) {\n const {\n active,\n children,\n className,\n expanded = false,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n href,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-nav-item\",\n css: navItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavItem-level\": `${level}`,\n };\n\n const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onExpand?.(event);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n },\n withBaseName(orientation),\n className\n )}\n ref={ref}\n style={style}\n {...rest}\n >\n <Link\n className={withBaseName(\"label\")}\n aria-current={active ? \"page\" : undefined}\n href={href}\n >\n <span>{children}</span>\n </Link>\n {parent && (\n <ExpansionButton\n aria-expanded={expanded}\n className={withBaseName(\"expandButton\")}\n expanded={expanded}\n onClick={handleExpand}\n orientation={orientation}\n />\n )}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","NavItem","useWindow","useComponentCssInjection","navItemCss","jsxs","clsx","jsx","Link","ExpansionButton"],"mappings":";;;;;;;;;;;;;AA8BA,MAAM,YAAA,GAAeA,kBAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,uBAAuB,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KAC5B,CAAA;AAEA,IAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,aAAa,WAAW,CAAA;AAAA,QACxB,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,SAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,UAChC,IAAA;AAAA,UAEA,QAAC,kBAAAD,cAAA,CAAA,MAAA,EAAA;AAAA,YAAM,QAAA;AAAA,WAAS,CAAA;AAAA,SAClB,CAAA;AAAA,QACC,0BACEA,cAAA,CAAAE,+BAAA,EAAA;AAAA,UACC,eAAe,EAAA,QAAA;AAAA,UACf,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACtC,QAAA;AAAA,UACA,OAAS,EAAA,YAAA;AAAA,UACT,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
|
|
8
|
-
const TrackerStepTooltipContext = React.createContext(false);
|
|
9
|
-
const TrackStepTooltipProvider = ({
|
|
10
|
-
children
|
|
11
|
-
}) => {
|
|
12
|
-
return /* @__PURE__ */ jsxRuntime.jsx(TrackerStepTooltipContext.Provider, {
|
|
13
|
-
value: true,
|
|
14
|
-
children
|
|
15
|
-
});
|
|
16
|
-
};
|
|
17
|
-
const useTrackerStepTooltipContext = () => React.useContext(TrackerStepTooltipContext);
|
|
18
|
-
|
|
19
|
-
exports.TrackStepTooltipProvider = TrackStepTooltipProvider;
|
|
20
|
-
exports.useTrackerStepTooltipContext = useTrackerStepTooltipContext;
|
|
21
|
-
//# 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":["createContext","jsx","useContext"],"mappings":";;;;;;;AAEA,MAAM,yBAAA,GAA4BA,oBAAuB,KAAK,CAAA,CAAA;AAMvD,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AACF,CAA6B,KAAA;AAC3B,EACE,uBAAAC,cAAA,CAAC,0BAA0B,QAA1B,EAAA;AAAA,IAAmC,KAAO,EAAA,IAAA;AAAA,IACxC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,4BAAA,GAA+B,MAC1CC,gBAAA,CAAW,yBAAyB;;;;;"}
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
|
|
5
|
-
const useDetectTruncatedText = (callback) => {
|
|
6
|
-
const [observedMap] = React.useState(() => /* @__PURE__ */ new Map());
|
|
7
|
-
const callbackRef = React.useRef(callback);
|
|
8
|
-
React.useEffect(() => {
|
|
9
|
-
callbackRef.current = callback;
|
|
10
|
-
}, [callback]);
|
|
11
|
-
const isTruncatedRef = React.useRef(false);
|
|
12
|
-
const checkEntries = React.useCallback(() => {
|
|
13
|
-
let anyEntriesTruncated = false;
|
|
14
|
-
observedMap.forEach((entry) => {
|
|
15
|
-
if (entry.offsetWidth < entry.scrollWidth) {
|
|
16
|
-
anyEntriesTruncated = true;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
if (anyEntriesTruncated !== isTruncatedRef.current) {
|
|
20
|
-
isTruncatedRef.current = anyEntriesTruncated;
|
|
21
|
-
callbackRef.current(anyEntriesTruncated);
|
|
22
|
-
}
|
|
23
|
-
}, [observedMap]);
|
|
24
|
-
const getRo = React.useCallback(() => {
|
|
25
|
-
return new ResizeObserver(checkEntries);
|
|
26
|
-
}, [checkEntries]);
|
|
27
|
-
const [ro, setRo] = React.useState(() => getRo());
|
|
28
|
-
React.useEffect(() => {
|
|
29
|
-
return () => {
|
|
30
|
-
ro.disconnect();
|
|
31
|
-
};
|
|
32
|
-
}, [ro]);
|
|
33
|
-
React.useEffect(() => {
|
|
34
|
-
setRo(getRo());
|
|
35
|
-
}, [getRo]);
|
|
36
|
-
const observeAndUnobserveRef = React.useCallback(
|
|
37
|
-
(id, el) => {
|
|
38
|
-
if (!el) {
|
|
39
|
-
const existingRef = observedMap.get(id);
|
|
40
|
-
if (existingRef) {
|
|
41
|
-
ro.unobserve(existingRef);
|
|
42
|
-
observedMap.delete(id);
|
|
43
|
-
}
|
|
44
|
-
} else {
|
|
45
|
-
const existingRef = observedMap.get(id);
|
|
46
|
-
if (el === existingRef) {
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
if (existingRef) {
|
|
50
|
-
ro.unobserve(existingRef);
|
|
51
|
-
}
|
|
52
|
-
observedMap.set(id, el);
|
|
53
|
-
ro.observe(el);
|
|
54
|
-
checkEntries();
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
[observedMap, ro, checkEntries]
|
|
58
|
-
);
|
|
59
|
-
const getOverflowRef = React.useCallback(
|
|
60
|
-
(id) => {
|
|
61
|
-
return (el) => {
|
|
62
|
-
observeAndUnobserveRef(id, el);
|
|
63
|
-
};
|
|
64
|
-
},
|
|
65
|
-
[observeAndUnobserveRef]
|
|
66
|
-
);
|
|
67
|
-
return getOverflowRef;
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
module.exports = useDetectTruncatedText;
|
|
71
|
-
//# 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":["useState","useRef","useEffect","useCallback"],"mappings":"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"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
|
|
7
|
-
function CheckedIcon({ className }) {
|
|
8
|
-
return /* @__PURE__ */ jsxRuntime.jsx("svg", {
|
|
9
|
-
"aria-hidden": "true",
|
|
10
|
-
className,
|
|
11
|
-
focusable: "false",
|
|
12
|
-
shapeRendering: "crispEdges",
|
|
13
|
-
viewBox: "0 0 14 14",
|
|
14
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
|
|
15
|
-
fillRule: "evenodd",
|
|
16
|
-
children: [
|
|
17
|
-
/* @__PURE__ */ jsxRuntime.jsx("rect", {
|
|
18
|
-
height: "14",
|
|
19
|
-
width: "14",
|
|
20
|
-
x: "0",
|
|
21
|
-
y: "0"
|
|
22
|
-
}),
|
|
23
|
-
/* @__PURE__ */ jsxRuntime.jsx("polygon", {
|
|
24
|
-
className: `${className}Tick`,
|
|
25
|
-
fillRule: "nonzero",
|
|
26
|
-
points: "12 4.22226066 10.6259221 3 5.58277771 8.37894955 3.3179086 6.13993399 2 7.40754746 5.63993779 11"
|
|
27
|
-
})
|
|
28
|
-
]
|
|
29
|
-
})
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
exports.CheckedIcon = CheckedIcon;
|
|
34
|
-
//# 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":["jsx","jsxs"],"mappings":";;;;;;AAAgB,SAAA,WAAA,CAAY,EAAE,SAAA,EAAoC,EAAA;AAChE,EAAA,uBACGA,cAAA,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,kBAAAC,eAAA,CAAA,GAAA,EAAA;AAAA,MAAE,QAAS,EAAA,SAAA;AAAA,MACV,QAAA,EAAA;AAAA,wBAACD,cAAA,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,wBACxCA,cAAA,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,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".salt-density-high {\n --controlLabel-right-marginLeft: 3px;\n --controlLabel-right-marginRight: 0px;\n}\n.salt-density-medium {\n --controlLabel-right-marginLeft: 6px;\n --controlLabel-right-marginRight: 0px;\n}\n.salt-density-low {\n --controlLabel-right-marginLeft: 9px;\n --controlLabel-right-marginRight: 0px;\n}\n.salt-density-touch {\n --controlLabel-right-marginLeft: 12px;\n --controlLabel-right-marginRight: 0px;\n}\n\n/* Styles applied to root component */\n.saltControlLabel {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n}\n\n/* Styles applied to label */\n.saltControlLabel-label,\n.saltControlLabel-labelRight {\n --controlLabel-marginLeft: 0;\n --controlLabel-marginRight: calc(var(--salt-size-unit) / 1.5);\n\n color: var(--saltControlLabel-color, var(--salt-text-primary-foreground));\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n margin-left: var(--saltControlLabel-marginLeft, var(--controlLabel-marginLeft));\n margin-right: var(--saltControlLabel-marginRight, var(--controlLabel-marginRight));\n display: block;\n}\n\n/* Overrides on `labelPlacement=\"right\"` */\n.saltControlLabel-labelRight {\n --controlLabel-marginLeft: var(--saltControlLabel-right-marginLeft, var(--controlLabel-right-marginLeft));\n --controlLabel-marginRight: var(--saltControlLabel-right-marginRight, var(--controlLabel-right-marginRight));\n}\n\n/* Styles applied if `disabled={true}` or nested in FormField where `disabled={true}` */\n.saltControlLabel-disabled,\n.saltFormFieldLegacy-disabled .saltControlLabel {\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to label if `disabled={true}` */\n.saltControlLabel-disabled .saltControlLabel-label {\n cursor: var(--salt-selectable-cursor-disabled);\n color: var(--saltControlLabel-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=ControlLabel.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ControlLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -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 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContext.js","sources":["../src/dialog/internal/DialogContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ValidationStatus } from \"@salt-ds/core\";\n\nexport const DialogContext = createContext<{\n status?: ValidationStatus;\n dialogId?: string;\n setContentElement?: (node: HTMLDivElement) => void;\n}>({});\n"],"names":[],"mappings":";;AAGa,MAAA,aAAA,GAAgB,aAI1B,CAAA,EAAE;;;;"}
|