@salt-ds/lab 1.0.0-alpha.56 → 1.0.0-alpha.58
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/CHANGELOG.md +238 -0
- package/css/salt-lab.css +216 -143
- package/dist-cjs/date-picker/DatePicker.js +3 -2
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js +5 -2
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +2 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/index.js +4 -6
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/skip-link/SkipLink.css.js +1 -1
- package/dist-cjs/skip-link/SkipLink.js +25 -8
- package/dist-cjs/skip-link/SkipLink.js.map +1 -1
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js +54 -37
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-cjs/stepped-tracker/Step.Connector.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.Connector.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Connector.js +21 -0
- package/dist-cjs/stepped-tracker/Step.Connector.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Description.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.Description.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Description.js +35 -0
- package/dist-cjs/stepped-tracker/Step.Description.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.ExpandTrigger.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.ExpandTrigger.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.ExpandTrigger.js +38 -0
- package/dist-cjs/stepped-tracker/Step.ExpandTrigger.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Icon.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.Icon.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Icon.js +57 -0
- package/dist-cjs/stepped-tracker/Step.Icon.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Label.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.Label.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.Label.js +37 -0
- package/dist-cjs/stepped-tracker/Step.Label.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.SROnly.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.SROnly.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.SROnly.js +21 -0
- package/dist-cjs/stepped-tracker/Step.SROnly.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.css.js +6 -0
- package/dist-cjs/stepped-tracker/Step.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/Step.js +161 -0
- package/dist-cjs/stepped-tracker/Step.js.map +1 -0
- package/dist-cjs/stepped-tracker/SteppedTracker.Provider.js +19 -0
- package/dist-cjs/stepped-tracker/SteppedTracker.Provider.js.map +1 -0
- package/dist-cjs/stepped-tracker/SteppedTracker.css.js +1 -1
- package/dist-cjs/stepped-tracker/SteppedTracker.js +10 -33
- package/dist-cjs/stepped-tracker/SteppedTracker.js.map +1 -1
- package/dist-cjs/stepped-tracker/stepReducer.js +109 -0
- package/dist-cjs/stepped-tracker/stepReducer.js.map +1 -0
- package/dist-cjs/stepped-tracker/useStepReducer.js +16 -0
- package/dist-cjs/stepped-tracker/useStepReducer.js.map +1 -0
- package/dist-cjs/stepped-tracker/utils.js +86 -0
- package/dist-cjs/stepped-tracker/utils.js.map +1 -0
- package/dist-es/date-picker/DatePicker.js +3 -2
- package/dist-es/date-picker/DatePicker.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlayProvider.js +5 -2
- package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +2 -1
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/index.js +2 -3
- package/dist-es/index.js.map +1 -1
- package/dist-es/skip-link/SkipLink.css.js +1 -1
- package/dist-es/skip-link/SkipLink.js +27 -10
- package/dist-es/skip-link/SkipLink.js.map +1 -1
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js +55 -38
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-es/stepped-tracker/Step.Connector.css.js +4 -0
- package/dist-es/stepped-tracker/Step.Connector.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Connector.js +19 -0
- package/dist-es/stepped-tracker/Step.Connector.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Description.css.js +4 -0
- package/dist-es/stepped-tracker/Step.Description.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Description.js +33 -0
- package/dist-es/stepped-tracker/Step.Description.js.map +1 -0
- package/dist-es/stepped-tracker/Step.ExpandTrigger.css.js +4 -0
- package/dist-es/stepped-tracker/Step.ExpandTrigger.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.ExpandTrigger.js +36 -0
- package/dist-es/stepped-tracker/Step.ExpandTrigger.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Icon.css.js +4 -0
- package/dist-es/stepped-tracker/Step.Icon.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Icon.js +55 -0
- package/dist-es/stepped-tracker/Step.Icon.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Label.css.js +4 -0
- package/dist-es/stepped-tracker/Step.Label.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.Label.js +35 -0
- package/dist-es/stepped-tracker/Step.Label.js.map +1 -0
- package/dist-es/stepped-tracker/Step.SROnly.css.js +4 -0
- package/dist-es/stepped-tracker/Step.SROnly.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.SROnly.js +19 -0
- package/dist-es/stepped-tracker/Step.SROnly.js.map +1 -0
- package/dist-es/stepped-tracker/Step.css.js +4 -0
- package/dist-es/stepped-tracker/Step.css.js.map +1 -0
- package/dist-es/stepped-tracker/Step.js +159 -0
- package/dist-es/stepped-tracker/Step.js.map +1 -0
- package/dist-es/stepped-tracker/SteppedTracker.Provider.js +15 -0
- package/dist-es/stepped-tracker/SteppedTracker.Provider.js.map +1 -0
- package/dist-es/stepped-tracker/SteppedTracker.css.js +1 -1
- package/dist-es/stepped-tracker/SteppedTracker.js +11 -34
- package/dist-es/stepped-tracker/SteppedTracker.js.map +1 -1
- package/dist-es/stepped-tracker/stepReducer.js +107 -0
- package/dist-es/stepped-tracker/stepReducer.js.map +1 -0
- package/dist-es/stepped-tracker/useStepReducer.js +14 -0
- package/dist-es/stepped-tracker/useStepReducer.js.map +1 -0
- package/dist-es/stepped-tracker/utils.js +80 -0
- package/dist-es/stepped-tracker/utils.js.map +1 -0
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +4 -0
- package/dist-types/skip-link/SkipLink.d.ts +6 -11
- package/dist-types/skip-link/index.d.ts +0 -1
- package/dist-types/skip-link/internal/useManageFocusOnTarget.d.ts +13 -8
- package/dist-types/stepped-tracker/Step.Connector.d.ts +1 -0
- package/dist-types/stepped-tracker/Step.Description.d.ts +4 -0
- package/dist-types/stepped-tracker/Step.ExpandTrigger.d.ts +5 -0
- package/dist-types/stepped-tracker/Step.Icon.d.ts +8 -0
- package/dist-types/stepped-tracker/Step.Label.d.ts +4 -0
- package/dist-types/stepped-tracker/Step.SROnly.d.ts +5 -0
- package/dist-types/stepped-tracker/Step.d.ts +2 -0
- package/dist-types/stepped-tracker/Step.types.d.ts +21 -0
- package/dist-types/stepped-tracker/SteppedTracker.Provider.d.ts +9 -0
- package/dist-types/stepped-tracker/SteppedTracker.d.ts +2 -16
- package/dist-types/stepped-tracker/SteppedTracker.types.d.ts +6 -0
- package/dist-types/stepped-tracker/index.d.ts +5 -2
- package/dist-types/stepped-tracker/stepReducer.d.ts +2 -0
- package/dist-types/stepped-tracker/stepReducer.types.d.ts +25 -0
- package/dist-types/stepped-tracker/useStepReducer.d.ts +3 -0
- package/dist-types/stepped-tracker/utils.d.ts +7 -0
- package/package.json +14 -12
- package/dist-cjs/skip-link/SkipLinks.css.js +0 -6
- package/dist-cjs/skip-link/SkipLinks.css.js.map +0 -1
- package/dist-cjs/skip-link/SkipLinks.js +0 -24
- package/dist-cjs/skip-link/SkipLinks.js.map +0 -1
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.css.js +0 -6
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.css.js.map +0 -1
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js +0 -25
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js.map +0 -1
- package/dist-cjs/stepped-tracker/SteppedTrackerContext.js +0 -43
- package/dist-cjs/stepped-tracker/SteppedTrackerContext.js.map +0 -1
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.css.js +0 -6
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.css.js.map +0 -1
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.js +0 -22
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.js.map +0 -1
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js +0 -6
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js.map +0 -1
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js +0 -96
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js.map +0 -1
- package/dist-es/skip-link/SkipLinks.css.js +0 -4
- package/dist-es/skip-link/SkipLinks.css.js.map +0 -1
- package/dist-es/skip-link/SkipLinks.js +0 -22
- package/dist-es/skip-link/SkipLinks.js.map +0 -1
- package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js +0 -4
- package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js.map +0 -1
- package/dist-es/stepped-tracker/StepLabel/StepLabel.js +0 -23
- package/dist-es/stepped-tracker/StepLabel/StepLabel.js.map +0 -1
- package/dist-es/stepped-tracker/SteppedTrackerContext.js +0 -38
- package/dist-es/stepped-tracker/SteppedTrackerContext.js.map +0 -1
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js +0 -4
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js.map +0 -1
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.js +0 -20
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.js.map +0 -1
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js +0 -4
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js.map +0 -1
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js +0 -94
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js.map +0 -1
- package/dist-types/skip-link/SkipLinks.d.ts +0 -2
- package/dist-types/stepped-tracker/StepLabel/StepLabel.d.ts +0 -9
- package/dist-types/stepped-tracker/StepLabel/index.d.ts +0 -1
- package/dist-types/stepped-tracker/SteppedTrackerContext.d.ts +0 -18
- package/dist-types/stepped-tracker/TrackerConnector/TrackerConnector.d.ts +0 -9
- package/dist-types/stepped-tracker/TrackerConnector/index.d.ts +0 -1
- package/dist-types/stepped-tracker/TrackerStep/TrackerStep.d.ts +0 -18
- package/dist-types/stepped-tracker/TrackerStep/index.d.ts +0 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.Description.js","sources":["../src/stepped-tracker/Step.Description.tsx"],"sourcesContent":["import { Text, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\n\nimport stepDescriptionCSS from \"./Step.Description.css\";\n\nexport interface StepDescriptionProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltStepDescription\");\n\nexport function StepDescription({\n id,\n className,\n styleAs = \"label\",\n ...props\n}: StepDescriptionProps) {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-description\",\n css: stepDescriptionCSS,\n window: targetWindow,\n });\n\n return (\n <Text\n id={id}\n styleAs=\"label\"\n className={clsx(withBaseName(), className)}\n {...props}\n />\n );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepDescriptionCSS","jsx","Text"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAEhD,SAAS,eAAgB,CAAA;AAAA,EAC9B,EAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,GAAG;AACL,CAAyB,EAAA;AACvB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MACR,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltStepExpandTrigger {\n grid-area: expand;\n}\n\n.saltButton.saltStepExpandTrigger:focus-visible {\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=Step.ExpandTrigger.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.ExpandTrigger.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var Step_ExpandTrigger = require('./Step.ExpandTrigger.css.js');
|
|
9
|
+
|
|
10
|
+
const withBaseName = core.makePrefixer("saltStepExpandTrigger");
|
|
11
|
+
function StepExpandTrigger({
|
|
12
|
+
id,
|
|
13
|
+
expanded,
|
|
14
|
+
className,
|
|
15
|
+
...props
|
|
16
|
+
}) {
|
|
17
|
+
const { CollapseIcon, ExpandIcon } = core.useIcon();
|
|
18
|
+
const targetWindow = window.useWindow();
|
|
19
|
+
styles.useComponentCssInjection({
|
|
20
|
+
testId: "salt-step-expand-trigger",
|
|
21
|
+
css: Step_ExpandTrigger,
|
|
22
|
+
window: targetWindow
|
|
23
|
+
});
|
|
24
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
|
+
core.Button,
|
|
26
|
+
{
|
|
27
|
+
id,
|
|
28
|
+
appearance: "transparent",
|
|
29
|
+
sentiment: "neutral",
|
|
30
|
+
className: clsx(withBaseName(), className),
|
|
31
|
+
...props,
|
|
32
|
+
children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { "aria-hidden": true })
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
exports.StepExpandTrigger = StepExpandTrigger;
|
|
38
|
+
//# sourceMappingURL=Step.ExpandTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.ExpandTrigger.js","sources":["../src/stepped-tracker/Step.ExpandTrigger.tsx"],"sourcesContent":["import { Button, type ButtonProps } from \"@salt-ds/core\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\n\nimport stepExpandTriggerCSS from \"./Step.ExpandTrigger.css\";\n\nexport interface StepExpandTriggerProps extends ButtonProps {\n expanded: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltStepExpandTrigger\");\n\nexport function StepExpandTrigger({\n id,\n expanded,\n className,\n ...props\n}: StepExpandTriggerProps) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-expand-trigger\",\n css: stepExpandTriggerCSS,\n window: targetWindow,\n });\n\n return (\n <Button\n id={id}\n appearance=\"transparent\"\n sentiment=\"neutral\"\n className={clsx(withBaseName(), className)}\n {...props}\n >\n {expanded ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n </Button>\n );\n}\n"],"names":["makePrefixer","useIcon","useWindow","useComponentCssInjection","stepExpandTriggerCSS","jsx","Button"],"mappings":";;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA;AAElD,SAAS,iBAAkB,CAAA;AAAA,EAChC,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAA2B,EAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAIC,YAAQ,EAAA;AAC7C,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,UAAW,EAAA,aAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA,kCAAY,YAAa,EAAA,EAAA,aAAA,EAAW,MAAC,CAAK,mBAAAD,cAAA,CAAC,UAAW,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GACrE;AAEJ;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltStepIcon {\n grid-area: icon;\n\n display: flex;\n justify-content: center;\n align-items: center;\n justify-self: center;\n}\n\n.saltSteppedTracker-vertical .saltStepIcon {\n height: var(--salt-size-base);\n}\n\n.saltStep-stage-pending > .saltStepIcon {\n --saltIcon-color: var(--salt-status-static-foreground);\n}\n\n.saltStep-stage-locked > .saltStepIcon {\n --saltIcon-color: var(--salt-status-static-foreground);\n}\n\n.saltStep-stage-inprogress > .saltStepIcon {\n --saltIcon-color: var(--salt-status-info-foreground-decorative);\n}\n\n.saltStep-stage-active > .saltStepIcon {\n --saltIcon-color: var(--salt-status-info-foreground-decorative);\n}\n\n.saltStep-stage-completed > .saltStepIcon {\n --saltIcon-color: var(--salt-status-success-foreground-decorative);\n}\n\n.saltStep-status-warning > .saltStepIcon {\n --saltIcon-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltStep-status-error > .saltStepIcon {\n --saltIcon-color: var(--salt-status-error-foreground-decorative);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=Step.Icon.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.Icon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var Step_Icon = require('./Step.Icon.css.js');
|
|
10
|
+
|
|
11
|
+
const withBaseName = core.makePrefixer("saltStepIcon");
|
|
12
|
+
function StepIcon({
|
|
13
|
+
status,
|
|
14
|
+
stage,
|
|
15
|
+
size,
|
|
16
|
+
sizeMultiplier = size || 1.5,
|
|
17
|
+
className,
|
|
18
|
+
...props
|
|
19
|
+
}) {
|
|
20
|
+
const targetWindow = window.useWindow();
|
|
21
|
+
const IconComponent = useStepIcon({ stage, status });
|
|
22
|
+
styles.useComponentCssInjection({
|
|
23
|
+
testId: "salt-step-icon",
|
|
24
|
+
css: Step_Icon,
|
|
25
|
+
window: targetWindow
|
|
26
|
+
});
|
|
27
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
28
|
+
IconComponent,
|
|
29
|
+
{
|
|
30
|
+
size: sizeMultiplier,
|
|
31
|
+
className: clsx(withBaseName(), className),
|
|
32
|
+
...props
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
function useStepIcon({
|
|
37
|
+
stage,
|
|
38
|
+
status
|
|
39
|
+
}) {
|
|
40
|
+
const icons = core.useIcon();
|
|
41
|
+
const stepIconMap = react.useMemo(
|
|
42
|
+
() => ({
|
|
43
|
+
error: icons.ErrorIcon,
|
|
44
|
+
warning: icons.WarningIcon,
|
|
45
|
+
active: icons.ActiveIcon,
|
|
46
|
+
completed: icons.CompletedIcon,
|
|
47
|
+
pending: icons.PendingIcon,
|
|
48
|
+
inprogress: icons.InProgressIcon,
|
|
49
|
+
locked: icons.LockedIcon
|
|
50
|
+
}),
|
|
51
|
+
[icons]
|
|
52
|
+
);
|
|
53
|
+
return stepIconMap[status || stage];
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
exports.StepIcon = StepIcon;
|
|
57
|
+
//# sourceMappingURL=Step.Icon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.Icon.js","sources":["../src/stepped-tracker/Step.Icon.tsx"],"sourcesContent":["import { makePrefixer, useIcon } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { useMemo } from \"react\";\n\nimport stepIconCSS from \"./Step.Icon.css\";\n\nimport type { StepStage, StepStatus } from \"./Step.types\";\n\nexport interface StepIconProps extends IconProps {\n stage: StepStage;\n status?: StepStatus;\n sizeMultiplier?: IconProps[\"size\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStepIcon\");\n\nexport function StepIcon({\n status,\n stage,\n size,\n sizeMultiplier = size || 1.5,\n className,\n ...props\n}: StepIconProps) {\n const targetWindow = useWindow();\n const IconComponent = useStepIcon({ stage, status });\n\n useComponentCssInjection({\n testId: \"salt-step-icon\",\n css: stepIconCSS,\n window: targetWindow,\n });\n\n return (\n <IconComponent\n size={sizeMultiplier}\n className={clsx(withBaseName(), className)}\n {...props}\n />\n );\n}\n\nfunction useStepIcon({\n stage,\n status,\n}: Pick<StepIconProps, \"stage\" | \"status\">) {\n const icons = useIcon();\n\n const stepIconMap = useMemo(\n () => ({\n error: icons.ErrorIcon,\n warning: icons.WarningIcon,\n active: icons.ActiveIcon,\n completed: icons.CompletedIcon,\n pending: icons.PendingIcon,\n inprogress: icons.InProgressIcon,\n locked: icons.LockedIcon,\n }),\n [icons],\n );\n\n return stepIconMap[status || stage];\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepIconCSS","jsx","useIcon","useMemo"],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AAEzC,SAAS,QAAS,CAAA;AAAA,EACvB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,iBAAiB,IAAQ,IAAA,GAAA;AAAA,EACzB,SAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAA,MAAM,aAAgB,GAAA,WAAA,CAAY,EAAE,KAAA,EAAO,QAAQ,CAAA;AAEnD,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,SAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAM,EAAA,cAAA;AAAA,MACN,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAY,CAAA;AAAA,EACnB,KAAA;AAAA,EACA;AACF,CAA4C,EAAA;AAC1C,EAAA,MAAM,QAAQC,YAAQ,EAAA;AAEtB,EAAA,MAAM,WAAc,GAAAC,aAAA;AAAA,IAClB,OAAO;AAAA,MACL,OAAO,KAAM,CAAA,SAAA;AAAA,MACb,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,QAAQ,KAAM,CAAA,UAAA;AAAA,MACd,WAAW,KAAM,CAAA,aAAA;AAAA,MACjB,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,YAAY,KAAM,CAAA,cAAA;AAAA,MAClB,QAAQ,KAAM,CAAA;AAAA,KAChB,CAAA;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAO,OAAA,WAAA,CAAY,UAAU,KAAK,CAAA;AACpC;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltStepLabel {\n grid-area: label;\n}\n\n.saltSteppedTracker-horizontal .saltStepLabel {\n margin-top: var(--salt-spacing-50);\n}\n\n.saltSteppedTracker-vertical .saltStepLabel {\n padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));\n}\n\n.saltStep-depth-0 > .saltText.saltStepLabel {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=Step.Label.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.Label.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var Step_Label = require('./Step.Label.css.js');
|
|
9
|
+
|
|
10
|
+
const withBaseName = core.makePrefixer("saltStepLabel");
|
|
11
|
+
function StepLabel({
|
|
12
|
+
id,
|
|
13
|
+
className,
|
|
14
|
+
styleAs = "label",
|
|
15
|
+
children,
|
|
16
|
+
...props
|
|
17
|
+
}) {
|
|
18
|
+
const targetWindow = window.useWindow();
|
|
19
|
+
styles.useComponentCssInjection({
|
|
20
|
+
testId: "salt-step-label",
|
|
21
|
+
css: Step_Label,
|
|
22
|
+
window: targetWindow
|
|
23
|
+
});
|
|
24
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
|
+
core.Text,
|
|
26
|
+
{
|
|
27
|
+
id,
|
|
28
|
+
styleAs: "label",
|
|
29
|
+
className: clsx(withBaseName(), className),
|
|
30
|
+
...props,
|
|
31
|
+
children
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
exports.StepLabel = StepLabel;
|
|
37
|
+
//# sourceMappingURL=Step.Label.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.Label.js","sources":["../src/stepped-tracker/Step.Label.tsx"],"sourcesContent":["import { Text, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\n\nimport stepLabelCSS from \"./Step.Label.css\";\n\nexport interface StepLabelProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport function StepLabel({\n id,\n className,\n styleAs = \"label\",\n children,\n ...props\n}: StepLabelProps) {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-label\",\n css: stepLabelCSS,\n window: targetWindow,\n });\n\n return (\n <Text\n id={id}\n styleAs=\"label\"\n className={clsx(withBaseName(), className)}\n {...props}\n >\n {children}\n </Text>\n );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepLabelCSS","jsx","Text"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAE1C,SAAS,SAAU,CAAA;AAAA,EACxB,EAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAmB,EAAA;AACjB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MACR,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.SROnly.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var Step_SROnly = require('./Step.SROnly.css.js');
|
|
8
|
+
|
|
9
|
+
const withBaseName = core.makePrefixer("saltStepSROnly");
|
|
10
|
+
function StepSROnly({ children, ...props }) {
|
|
11
|
+
const targetWindow = window.useWindow();
|
|
12
|
+
styles.useComponentCssInjection({
|
|
13
|
+
testId: "salt-step-sr-only",
|
|
14
|
+
css: Step_SROnly,
|
|
15
|
+
window: targetWindow
|
|
16
|
+
});
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName(), ...props, children });
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
exports.StepSROnly = StepSROnly;
|
|
21
|
+
//# sourceMappingURL=Step.SROnly.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.SROnly.js","sources":["../src/stepped-tracker/Step.SROnly.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport stepSROnlyCSS from \"./Step.SROnly.css\";\n\nconst withBaseName = makePrefixer(\"saltStepSROnly\");\n\nexport interface StepSROnlyProps extends ComponentPropsWithoutRef<\"div\"> {\n children?: ReactNode;\n}\n\nexport function StepSROnly({ children, ...props }: StepSROnlyProps) {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-sr-only\",\n css: stepSROnlyCSS,\n window: targetWindow,\n });\n\n return (\n <div className={withBaseName()} {...props}>\n {children}\n </div>\n );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepSROnlyCSS"],"mappings":";;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAM3C,SAAS,UAAW,CAAA,EAAE,QAAU,EAAA,GAAG,OAA0B,EAAA;AAClE,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,sCACG,KAAI,EAAA,EAAA,SAAA,EAAW,cAAiB,EAAA,GAAG,OACjC,QACH,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltStep {\n /* Copy of size calculations of <Icon /> */\n --step-icon-base-size: var(--salt-size-icon, 12px);\n --step-icon-size-multiplier: var(--saltIcon-size-multiplier, 1.5);\n --step-icon-size: calc(var(--step-icon-base-size) * var(--step-icon-size-multiplier));\n --step-depth: var(--saltStep-depth, 0);\n}\n\n.saltSteppedTracker-horizontal .saltStep {\n position: relative;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: repeat(3, min-content);\n grid-template-areas:\n \"icon\"\n \"label\"\n \"description\";\n justify-items: center;\n align-items: center;\n text-align: center;\n flex: 1;\n padding: 0 var(--salt-spacing-25);\n}\n\n.saltSteppedTracker-vertical .saltStep {\n display: grid;\n grid-template-columns: var(--step-icon-size) 1fr min-content;\n grid-template-areas:\n \"icon label expand\"\n \"connector description .\"\n \"stepped-tracker stepped-tracker stepped-tracker\";\n justify-items: start;\n align-items: start;\n gap: 0 var(--salt-spacing-100);\n width: 100%;\n transition-duration: inherit;\n transition-timing-function: inherit;\n transition-property: grid-template-rows;\n}\n\n.saltSteppedTracker-vertical .saltStep-terminal {\n grid-template-areas:\n \"icon label label\"\n \"connector description description\"\n \"stepped-tracker stepped-tracker stepped-tracker\";\n}\n\n.saltSteppedTracker-vertical > .saltStep.saltStep-expanded {\n grid-template-rows:\n var(--salt-size-base)\n min-content\n 1fr;\n}\n\n.saltSteppedTracker-vertical > .saltStep.saltStep-collapsed {\n grid-template-rows:\n var(--salt-size-base)\n min-content\n 0fr;\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=Step.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var core = require('@salt-ds/core');
|
|
5
|
+
var styles = require('@salt-ds/styles');
|
|
6
|
+
var window = require('@salt-ds/window');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var react = require('react');
|
|
9
|
+
var Step_Connector = require('./Step.Connector.js');
|
|
10
|
+
var Step_Description = require('./Step.Description.js');
|
|
11
|
+
var Step_ExpandTrigger = require('./Step.ExpandTrigger.js');
|
|
12
|
+
var Step_Icon = require('./Step.Icon.js');
|
|
13
|
+
var Step_Label = require('./Step.Label.js');
|
|
14
|
+
var Step_SROnly = require('./Step.SROnly.js');
|
|
15
|
+
var Step$1 = require('./Step.css.js');
|
|
16
|
+
var SteppedTracker = require('./SteppedTracker.js');
|
|
17
|
+
var SteppedTracker_Provider = require('./SteppedTracker.Provider.js');
|
|
18
|
+
|
|
19
|
+
const withBaseName = core.makePrefixer("saltStep");
|
|
20
|
+
function Step({
|
|
21
|
+
id: idProp,
|
|
22
|
+
label,
|
|
23
|
+
description,
|
|
24
|
+
status,
|
|
25
|
+
stage = "pending",
|
|
26
|
+
expanded: expandedProp,
|
|
27
|
+
defaultExpanded,
|
|
28
|
+
onToggle,
|
|
29
|
+
className,
|
|
30
|
+
style,
|
|
31
|
+
substeps,
|
|
32
|
+
children,
|
|
33
|
+
...props
|
|
34
|
+
}) {
|
|
35
|
+
const id = core.useId(idProp);
|
|
36
|
+
const targetWindow = window.useWindow();
|
|
37
|
+
const depth = react.useContext(SteppedTracker_Provider.DepthContext);
|
|
38
|
+
const [expanded, setExpanded] = core.useControlled({
|
|
39
|
+
name: "Step",
|
|
40
|
+
state: "expanded",
|
|
41
|
+
controlled: expandedProp,
|
|
42
|
+
default: Boolean(defaultExpanded)
|
|
43
|
+
});
|
|
44
|
+
styles.useComponentCssInjection({
|
|
45
|
+
testId: "salt-step",
|
|
46
|
+
css: Step$1,
|
|
47
|
+
window: targetWindow
|
|
48
|
+
});
|
|
49
|
+
react.useEffect(() => {
|
|
50
|
+
if (process.env.NODE_ENV !== "production") {
|
|
51
|
+
if (depth === -1) {
|
|
52
|
+
console.warn(
|
|
53
|
+
"<Step /> should be used within a <SteppedTracker /> component!"
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
if (depth > 2) {
|
|
57
|
+
console.warn("<Step /> should not be nested more than 2 levels deep!");
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}, [depth]);
|
|
61
|
+
const ariaCurrent = stage === "active" ? "step" : void 0;
|
|
62
|
+
const iconSizeMultiplier = depth === 0 ? 1.5 : 1;
|
|
63
|
+
const hasNestedSteps = !!children || !!substeps;
|
|
64
|
+
const state = status || stage;
|
|
65
|
+
const labelId = `${id}-label`;
|
|
66
|
+
const descriptionId = `${id}-description`;
|
|
67
|
+
const expandTriggerId = `${id}-expand-trigger`;
|
|
68
|
+
const nestedSteppedTrackerId = `${id}-nested-stepped-tracker`;
|
|
69
|
+
const srOnly = {
|
|
70
|
+
stateId: `${id}-sr-only-state`,
|
|
71
|
+
stateText: state !== "active" ? state : void 0,
|
|
72
|
+
substepsId: `${id}-sr-only-substeps`,
|
|
73
|
+
substepsText: "substeps",
|
|
74
|
+
toggleSubstepsId: `${id}-sr-only-toggle-substeps`,
|
|
75
|
+
toggleSubstepsText: "toggle substeps"
|
|
76
|
+
};
|
|
77
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
78
|
+
"li",
|
|
79
|
+
{
|
|
80
|
+
id,
|
|
81
|
+
"data-stage": stage,
|
|
82
|
+
"data-status": status,
|
|
83
|
+
"data-depth": depth,
|
|
84
|
+
"aria-current": ariaCurrent,
|
|
85
|
+
className: clsx(
|
|
86
|
+
withBaseName(),
|
|
87
|
+
withBaseName(`stage-${stage}`),
|
|
88
|
+
withBaseName(`depth-${depth}`),
|
|
89
|
+
status && withBaseName(`status-${status}`),
|
|
90
|
+
!hasNestedSteps && withBaseName("terminal"),
|
|
91
|
+
hasNestedSteps && expanded && withBaseName("expanded"),
|
|
92
|
+
hasNestedSteps && !expanded && withBaseName("collapsed"),
|
|
93
|
+
className
|
|
94
|
+
),
|
|
95
|
+
style: {
|
|
96
|
+
"--saltStep-depth": depth,
|
|
97
|
+
...style
|
|
98
|
+
},
|
|
99
|
+
...props,
|
|
100
|
+
children: [
|
|
101
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Step_SROnly.StepSROnly, { children: [
|
|
102
|
+
label,
|
|
103
|
+
" ",
|
|
104
|
+
description,
|
|
105
|
+
" ",
|
|
106
|
+
srOnly.stateText
|
|
107
|
+
] }),
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx(Step_SROnly.StepSROnly, { id: srOnly.toggleSubstepsId, "aria-hidden": true, children: srOnly.toggleSubstepsText }),
|
|
109
|
+
/* @__PURE__ */ jsxRuntime.jsx(Step_SROnly.StepSROnly, { id: srOnly.substepsId, "aria-hidden": true, children: srOnly.substepsText }),
|
|
110
|
+
/* @__PURE__ */ jsxRuntime.jsx(Step_SROnly.StepSROnly, { id: srOnly.stateId, "aria-hidden": true, children: srOnly.stateText }),
|
|
111
|
+
/* @__PURE__ */ jsxRuntime.jsx(Step_Connector.StepConnector, {}),
|
|
112
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
+
Step_Icon.StepIcon,
|
|
114
|
+
{
|
|
115
|
+
stage,
|
|
116
|
+
status,
|
|
117
|
+
sizeMultiplier: iconSizeMultiplier,
|
|
118
|
+
"aria-hidden": true
|
|
119
|
+
}
|
|
120
|
+
),
|
|
121
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(Step_Label.StepLabel, { id: labelId, "aria-hidden": true, children: label }),
|
|
122
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(Step_Description.StepDescription, { id: descriptionId, "aria-hidden": true, children: description }),
|
|
123
|
+
hasNestedSteps && /* @__PURE__ */ jsxRuntime.jsx(
|
|
124
|
+
Step_ExpandTrigger.StepExpandTrigger,
|
|
125
|
+
{
|
|
126
|
+
id: expandTriggerId,
|
|
127
|
+
"aria-expanded": expanded,
|
|
128
|
+
"aria-controls": nestedSteppedTrackerId,
|
|
129
|
+
"aria-labelledby": [
|
|
130
|
+
labelId,
|
|
131
|
+
descriptionId,
|
|
132
|
+
srOnly.stateId,
|
|
133
|
+
srOnly.toggleSubstepsId
|
|
134
|
+
].join(" "),
|
|
135
|
+
expanded,
|
|
136
|
+
onClick: (event) => {
|
|
137
|
+
onToggle == null ? void 0 : onToggle(event);
|
|
138
|
+
setExpanded(!expanded);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
),
|
|
142
|
+
hasNestedSteps && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
143
|
+
SteppedTracker.SteppedTracker,
|
|
144
|
+
{
|
|
145
|
+
id: nestedSteppedTrackerId,
|
|
146
|
+
"aria-labelledby": [labelId, srOnly.substepsId].join(" "),
|
|
147
|
+
"aria-hidden": !expanded,
|
|
148
|
+
hidden: !expanded,
|
|
149
|
+
children: [
|
|
150
|
+
children,
|
|
151
|
+
substeps == null ? void 0 : substeps.map((step) => /* @__PURE__ */ jsxRuntime.jsx(Step, { ...step }, step.id))
|
|
152
|
+
]
|
|
153
|
+
}
|
|
154
|
+
)
|
|
155
|
+
]
|
|
156
|
+
}
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
exports.Step = Step;
|
|
161
|
+
//# sourceMappingURL=Step.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.js","sources":["../src/stepped-tracker/Step.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { type CSSProperties, useContext, useEffect } from \"react\";\n\nimport { StepConnector } from \"./Step.Connector\";\nimport { StepDescription } from \"./Step.Description\";\nimport { StepExpandTrigger } from \"./Step.ExpandTrigger\";\nimport { StepIcon } from \"./Step.Icon\";\nimport { StepLabel } from \"./Step.Label\";\nimport { StepSROnly } from \"./Step.SROnly\";\nimport stepCSS from \"./Step.css\";\nimport { SteppedTracker } from \"./SteppedTracker\";\nimport { DepthContext } from \"./SteppedTracker.Provider\";\n\nimport type { StepProps } from \"./Step.types\";\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport function Step({\n id: idProp,\n label,\n description,\n status,\n stage = \"pending\",\n expanded: expandedProp,\n defaultExpanded,\n onToggle,\n className,\n style,\n substeps,\n children,\n ...props\n}: StepProps) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n const depth = useContext(DepthContext);\n\n const [expanded, setExpanded] = useControlled({\n name: \"Step\",\n state: \"expanded\",\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n });\n\n useComponentCssInjection({\n testId: \"salt-step\",\n css: stepCSS,\n window: targetWindow,\n });\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (depth === -1) {\n console.warn(\n \"<Step /> should be used within a <SteppedTracker /> component!\",\n );\n }\n\n if (depth > 2) {\n console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n }\n }\n }, [depth]);\n\n const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n const hasNestedSteps = !!children || !!substeps;\n const state = status || stage;\n\n const labelId = `${id}-label`;\n const descriptionId = `${id}-description`;\n const expandTriggerId = `${id}-expand-trigger`;\n const nestedSteppedTrackerId = `${id}-nested-stepped-tracker`;\n\n const srOnly = {\n stateId: `${id}-sr-only-state`,\n stateText: state !== \"active\" ? state : undefined,\n substepsId: `${id}-sr-only-substeps`,\n substepsText: \"substeps\",\n toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n toggleSubstepsText: \"toggle substeps\",\n };\n\n return (\n <li\n id={id}\n data-stage={stage}\n data-status={status}\n data-depth={depth}\n aria-current={ariaCurrent}\n className={clsx(\n withBaseName(),\n withBaseName(`stage-${stage}`),\n withBaseName(`depth-${depth}`),\n status && withBaseName(`status-${status}`),\n !hasNestedSteps && withBaseName(\"terminal\"),\n hasNestedSteps && expanded && withBaseName(\"expanded\"),\n hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n className,\n )}\n style={\n {\n \"--saltStep-depth\": depth,\n ...style,\n } as CSSProperties\n }\n {...props}\n >\n <StepSROnly>\n {label} {description} {srOnly.stateText}\n </StepSROnly>\n <StepSROnly id={srOnly.toggleSubstepsId} aria-hidden>\n {srOnly.toggleSubstepsText}\n </StepSROnly>\n <StepSROnly id={srOnly.substepsId} aria-hidden>\n {srOnly.substepsText}\n </StepSROnly>\n <StepSROnly id={srOnly.stateId} aria-hidden>\n {srOnly.stateText}\n </StepSROnly>\n <StepConnector />\n <StepIcon\n stage={stage}\n status={status}\n sizeMultiplier={iconSizeMultiplier}\n aria-hidden\n />\n {label && (\n <StepLabel id={labelId} aria-hidden>\n {label}\n </StepLabel>\n )}\n {description && (\n <StepDescription id={descriptionId} aria-hidden>\n {description}\n </StepDescription>\n )}\n {hasNestedSteps && (\n <StepExpandTrigger\n id={expandTriggerId}\n aria-expanded={expanded}\n aria-controls={nestedSteppedTrackerId}\n aria-labelledby={[\n labelId,\n descriptionId,\n srOnly.stateId,\n srOnly.toggleSubstepsId,\n ].join(\" \")}\n expanded={expanded}\n onClick={(event) => {\n onToggle?.(event);\n setExpanded(!expanded);\n }}\n />\n )}\n {hasNestedSteps && (\n <SteppedTracker\n id={nestedSteppedTrackerId}\n aria-labelledby={[labelId, srOnly.substepsId].join(\" \")}\n aria-hidden={!expanded}\n hidden={!expanded}\n >\n {children}\n {substeps?.map((step) => (\n <Step key={step.id} {...step} />\n ))}\n </SteppedTracker>\n )}\n </li>\n );\n}\n"],"names":["makePrefixer","useId","useWindow","useContext","DepthContext","useControlled","useComponentCssInjection","stepCSS","useEffect","jsxs","StepSROnly","jsx","StepConnector","StepIcon","StepLabel","StepDescription","StepExpandTrigger","SteppedTracker"],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
|
|
6
|
+
const DepthContext = react.createContext(-1);
|
|
7
|
+
const OrientationContext = react.createContext("horizontal");
|
|
8
|
+
function SteppedTrackerProvider({
|
|
9
|
+
orientation: orientationProp,
|
|
10
|
+
children
|
|
11
|
+
}) {
|
|
12
|
+
const depth = react.useContext(DepthContext);
|
|
13
|
+
return /* @__PURE__ */ jsxRuntime.jsx(OrientationContext.Provider, { value: orientationProp, children: /* @__PURE__ */ jsxRuntime.jsx(DepthContext.Provider, { value: depth + 1, children }) });
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
exports.DepthContext = DepthContext;
|
|
17
|
+
exports.OrientationContext = OrientationContext;
|
|
18
|
+
exports.SteppedTrackerProvider = SteppedTrackerProvider;
|
|
19
|
+
//# sourceMappingURL=SteppedTracker.Provider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SteppedTracker.Provider.js","sources":["../src/stepped-tracker/SteppedTracker.Provider.tsx"],"sourcesContent":["import { type ReactNode, createContext, useContext } from \"react\";\n\nimport type { StepDepth } from \"./Step.types\";\nimport type { SteppedTrackerOrientation } from \"./SteppedTracker.types\";\n\nexport const DepthContext = createContext<StepDepth>(-1);\nexport const OrientationContext =\n createContext<SteppedTrackerOrientation>(\"horizontal\");\n\nexport interface SteppedTrackerProviderProps {\n orientation: SteppedTrackerOrientation;\n children: ReactNode;\n}\n\nexport function SteppedTrackerProvider({\n orientation: orientationProp,\n children,\n}: SteppedTrackerProviderProps) {\n const depth = useContext(DepthContext);\n\n return (\n <OrientationContext.Provider value={orientationProp}>\n <DepthContext.Provider value={depth + 1}>\n {children}\n </DepthContext.Provider>\n </OrientationContext.Provider>\n );\n}\n"],"names":["createContext","useContext","jsx"],"mappings":";;;;;AAKa,MAAA,YAAA,GAAeA,oBAAyB,CAAE,CAAA;AAC1C,MAAA,kBAAA,GACXA,oBAAyC,YAAY;AAOhD,SAAS,sBAAuB,CAAA;AAAA,EACrC,WAAa,EAAA,eAAA;AAAA,EACb;AACF,CAAgC,EAAA;AAC9B,EAAM,MAAA,KAAA,GAAQC,iBAAW,YAAY,CAAA;AAErC,EAAA,uBACGC,cAAA,CAAA,kBAAA,CAAmB,QAAnB,EAAA,EAA4B,OAAO,eAClC,EAAA,QAAA,kBAAAA,cAAA,CAAC,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,KAAQ,GAAA,CAAA,EACnC,UACH,CACF,EAAA,CAAA;AAEJ;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltSteppedTracker {\n
|
|
3
|
+
var css_248z = ".saltSteppedTracker {\n grid-area: stepped-tracker;\n width: 100%;\n height: 100%;\n\n margin: 0;\n padding: 0;\n list-style-type: none;\n transition-duration: var(--salt-duration-perceptible);\n transition-timing-function: ease-in-out;\n transition-property: opacity, visibility;\n}\n\n@media (prefers-reduced-motion) {\n .saltSteppedTracker {\n transition-duration: var(--salt-duration-instant);\n }\n}\n\n.saltSteppedTracker-horizontal {\n display: flex;\n flex-direction: row;\n}\n\n.saltSteppedTracker-vertical {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.saltSteppedTracker-vertical > .saltStep.saltStep-expanded > .saltSteppedTracker {\n opacity: 1;\n visibility: visible;\n}\n\n.saltSteppedTracker-vertical > .saltStep.saltStep-collapsed > .saltSteppedTracker {\n opacity: 0;\n visibility: hidden;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=SteppedTracker.css.js.map
|
|
@@ -6,50 +6,27 @@ var styles = require('@salt-ds/styles');
|
|
|
6
6
|
var window = require('@salt-ds/window');
|
|
7
7
|
var clsx = require('clsx');
|
|
8
8
|
var react = require('react');
|
|
9
|
-
var
|
|
9
|
+
var SteppedTracker_Provider = require('./SteppedTracker.Provider.js');
|
|
10
10
|
var SteppedTracker$1 = require('./SteppedTracker.css.js');
|
|
11
11
|
|
|
12
12
|
const withBaseName = core.makePrefixer("saltSteppedTracker");
|
|
13
|
-
const useCheckInvalidChildren = (children) => {
|
|
14
|
-
react.useEffect(() => {
|
|
15
|
-
if (process.env.NODE_ENV !== "production") {
|
|
16
|
-
let hasInvalidChild = false;
|
|
17
|
-
react.Children.forEach(children, (child) => {
|
|
18
|
-
if (!react.isValidElement(child)) {
|
|
19
|
-
hasInvalidChild = true;
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
if (hasInvalidChild) {
|
|
23
|
-
console.error(
|
|
24
|
-
"Invalid child: children of SteppedTracker must be a TrackerStep component"
|
|
25
|
-
);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}, [children]);
|
|
29
|
-
};
|
|
30
13
|
const SteppedTracker = react.forwardRef(
|
|
31
|
-
function SteppedTracker2({
|
|
32
|
-
children,
|
|
33
|
-
className,
|
|
34
|
-
activeStep,
|
|
35
|
-
orientation = "horizontal",
|
|
36
|
-
...restProps
|
|
37
|
-
}, ref) {
|
|
14
|
+
function SteppedTracker2({ orientation: orientationProp, children, className, ...props }, ref) {
|
|
38
15
|
const targetWindow = window.useWindow();
|
|
16
|
+
const orientationContext = react.useContext(SteppedTracker_Provider.OrientationContext);
|
|
17
|
+
const orientation = orientationProp || orientationContext;
|
|
39
18
|
styles.useComponentCssInjection({
|
|
40
|
-
testId: "salt-
|
|
19
|
+
testId: "salt-SteppedTracker",
|
|
41
20
|
css: SteppedTracker$1,
|
|
42
21
|
window: targetWindow
|
|
43
22
|
});
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
return /* @__PURE__ */ jsxRuntime.jsx(SteppedTrackerContext.SteppedTrackerProvider, { totalSteps, activeStep, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
-
"ul",
|
|
23
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SteppedTracker_Provider.SteppedTrackerProvider, { orientation, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
24
|
+
"ol",
|
|
48
25
|
{
|
|
49
|
-
className: clsx.clsx(withBaseName(),
|
|
26
|
+
className: clsx.clsx(withBaseName(), withBaseName(orientation), className),
|
|
50
27
|
ref,
|
|
51
|
-
...
|
|
52
|
-
children
|
|
28
|
+
...props,
|
|
29
|
+
children
|
|
53
30
|
}
|
|
54
31
|
) });
|
|
55
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SteppedTracker.js","sources":["../src/stepped-tracker/SteppedTracker.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {
|
|
1
|
+
{"version":3,"file":"SteppedTracker.js","sources":["../src/stepped-tracker/SteppedTracker.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, useContext } from \"react\";\n\nimport {\n OrientationContext,\n SteppedTrackerProvider,\n} from \"./SteppedTracker.Provider\";\nimport SteppedTrackerCSS from \"./SteppedTracker.css\";\nimport type { SteppedTrackerProps } from \"./SteppedTracker.types\";\n\nconst withBaseName = makePrefixer(\"saltSteppedTracker\");\n\nexport const SteppedTracker = forwardRef<HTMLOListElement, SteppedTrackerProps>(\n function SteppedTracker(\n { orientation: orientationProp, children, className, ...props },\n ref,\n ) {\n const targetWindow = useWindow();\n const orientationContext = useContext(OrientationContext);\n const orientation = orientationProp || orientationContext;\n\n useComponentCssInjection({\n testId: \"salt-SteppedTracker\",\n css: SteppedTrackerCSS,\n window: targetWindow,\n });\n\n return (\n <SteppedTrackerProvider orientation={orientation}>\n <ol\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n ref={ref}\n {...props}\n >\n {children}\n </ol>\n </SteppedTrackerProvider>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","SteppedTracker","useWindow","useContext","OrientationContext","useComponentCssInjection","SteppedTrackerCSS","jsx","SteppedTrackerProvider","clsx"],"mappings":";;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eACP,CAAA,EAAE,WAAa,EAAA,eAAA,EAAiB,UAAU,SAAW,EAAA,GAAG,KAAM,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAM,MAAA,kBAAA,GAAqBC,iBAAWC,0CAAkB,CAAA;AACxD,IAAA,MAAM,cAAc,eAAmB,IAAA,kBAAA;AAEvC,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA,CAACC,kDAAuB,WACtB,EAAA,QAAA,kBAAAD,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAWE,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,WAAW,GAAG,SAAS,CAAA;AAAA,QACpE,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA;AAGN;;;;"}
|