@salt-ds/lab 1.0.0-alpha.57 → 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 +232 -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 +1 -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 +1 -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
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/lab",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.58",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -9,12 +9,21 @@
|
|
|
9
9
|
},
|
|
10
10
|
"bugs": "https://github.com/jpmorganchase/salt-ds/issues",
|
|
11
11
|
"main": "dist-cjs/index.js",
|
|
12
|
-
"
|
|
12
|
+
"files": [
|
|
13
|
+
"css",
|
|
14
|
+
"dist-cjs",
|
|
15
|
+
"dist-es",
|
|
16
|
+
"dist-types",
|
|
17
|
+
"CHANGELOG.md"
|
|
18
|
+
],
|
|
19
|
+
"sideEffects": [
|
|
20
|
+
"*.css"
|
|
21
|
+
],
|
|
13
22
|
"dependencies": {
|
|
14
|
-
"@floating-ui/react": "^0.26.
|
|
15
|
-
"@salt-ds/core": "^1.
|
|
23
|
+
"@floating-ui/react": "^0.26.28",
|
|
24
|
+
"@salt-ds/core": "^1.38.0",
|
|
16
25
|
"@salt-ds/date-adapters": "0.1.0-alpha.1",
|
|
17
|
-
"@salt-ds/icons": "^1.13.
|
|
26
|
+
"@salt-ds/icons": "^1.13.1",
|
|
18
27
|
"@salt-ds/styles": "0.2.1",
|
|
19
28
|
"@salt-ds/window": "0.1.1",
|
|
20
29
|
"@types/react-window": "^1.8.2",
|
|
@@ -57,13 +66,6 @@
|
|
|
57
66
|
"build": "yarn node ../../scripts/build.mjs",
|
|
58
67
|
"bundle:css": "yarn node ./scripts/build.mjs"
|
|
59
68
|
},
|
|
60
|
-
"files": [
|
|
61
|
-
"css",
|
|
62
|
-
"dist-cjs",
|
|
63
|
-
"dist-es",
|
|
64
|
-
"dist-types",
|
|
65
|
-
"CHANGELOG.md"
|
|
66
|
-
],
|
|
67
69
|
"module": "dist-es/index.js",
|
|
68
70
|
"typings": "dist-types/index.d.ts"
|
|
69
71
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SkipLinks.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var clsx = require('clsx');
|
|
6
|
-
var react = require('react');
|
|
7
|
-
var styles = require('@salt-ds/styles');
|
|
8
|
-
var window = require('@salt-ds/window');
|
|
9
|
-
var SkipLinks$1 = require('./SkipLinks.css.js');
|
|
10
|
-
|
|
11
|
-
const withBaseName = core.makePrefixer("saltSkipLinks");
|
|
12
|
-
const SkipLinks = react.forwardRef(function SkipLinks2(props, ref) {
|
|
13
|
-
const { className, children, ...restProps } = props;
|
|
14
|
-
const targetWindow = window.useWindow();
|
|
15
|
-
styles.useComponentCssInjection({
|
|
16
|
-
testId: "salt-skip-links",
|
|
17
|
-
css: SkipLinks$1,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
return /* @__PURE__ */ jsxRuntime.jsx("ul", { ...restProps, className: clsx.clsx(withBaseName(), className), ref, children });
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
exports.SkipLinks = SkipLinks;
|
|
24
|
-
//# sourceMappingURL=SkipLinks.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SkipLinks.js","sources":["../src/skip-link/SkipLinks.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport skipLinksCss from \"./SkipLinks.css\";\n\nconst withBaseName = makePrefixer(\"saltSkipLinks\");\n\nexport const SkipLinks = forwardRef<\n HTMLUListElement,\n HTMLAttributes<HTMLUListElement>\n>(function SkipLinks(props, ref) {\n const { className, children, ...restProps } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-skip-links\",\n css: skipLinksCss,\n window: targetWindow,\n });\n\n return (\n <ul {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n {children}\n </ul>\n );\n});\n"],"names":["makePrefixer","forwardRef","SkipLinks","useWindow","useComponentCssInjection","skipLinksCss","jsx","clsx"],"mappings":";;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA,CAGvB,SAASC,UAAAA,CAAU,OAAO,GAAK,EAAA;AAC/B,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,GAAG,WAAc,GAAA,KAAA;AAC9C,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA,CAAC,IAAI,EAAA,EAAA,GAAG,SAAW,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAG,EAAA,GAAA,EAC5D,QACH,EAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltStepLabel {\n width: 100%;\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltStepLabel {\n text-align: center;\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltStepLabel {\n text-align: left;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=StepLabel.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,25 +0,0 @@
|
|
|
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 StepLabel$1 = require('./StepLabel.css.js');
|
|
10
|
-
|
|
11
|
-
const withBaseName = core.makePrefixer("saltStepLabel");
|
|
12
|
-
const StepLabel = react.forwardRef(
|
|
13
|
-
function StepLabel2({ children, className, ...rest }, ref) {
|
|
14
|
-
const targetWindow = window.useWindow();
|
|
15
|
-
styles.useComponentCssInjection({
|
|
16
|
-
testId: "salt-step-label",
|
|
17
|
-
css: StepLabel$1,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
return /* @__PURE__ */ jsxRuntime.jsx(core.Label, { className: clsx.clsx(withBaseName(), className), ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children }) });
|
|
21
|
-
}
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
exports.StepLabel = StepLabel;
|
|
25
|
-
//# sourceMappingURL=StepLabel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import { Label, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport interface StepLabelProps extends TextProps<\"label\"> {\n /**\n * The content of Step Label\n */\n children?: ReactNode;\n}\n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n function StepLabel({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-step-label\",\n css: stepLabelCss,\n window: targetWindow,\n });\n\n return (\n <Label className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n <strong>{children}</strong>\n </Label>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","StepLabel","useWindow","useComponentCssInjection","stepLabelCss","jsx","Label","clsx"],"mappings":";;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAS1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,WAAU,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,uBACGC,cAAA,CAAAC,UAAA,EAAA,EAAM,SAAW,EAAAC,SAAA,CAAK,cAAgB,EAAA,SAAS,CAAG,EAAA,GAAA,EAAW,GAAG,IAAA,EAC/D,QAAC,kBAAAF,cAAA,CAAA,QAAA,EAAA,EAAQ,UAAS,CACpB,EAAA,CAAA;AAAA;AAGN;;;;"}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
|
|
6
|
-
const defaultSteppedTrackerContext = {
|
|
7
|
-
activeStep: 0,
|
|
8
|
-
totalSteps: 1,
|
|
9
|
-
isWithinSteppedTracker: false
|
|
10
|
-
};
|
|
11
|
-
const SteppedTrackerContext = react.createContext(
|
|
12
|
-
defaultSteppedTrackerContext
|
|
13
|
-
);
|
|
14
|
-
const SteppedTrackerProvider = ({
|
|
15
|
-
activeStep,
|
|
16
|
-
totalSteps,
|
|
17
|
-
children
|
|
18
|
-
}) => {
|
|
19
|
-
const steppedTrackerContextValue = react.useMemo(
|
|
20
|
-
() => ({
|
|
21
|
-
activeStep,
|
|
22
|
-
totalSteps,
|
|
23
|
-
isWithinSteppedTracker: true
|
|
24
|
-
}),
|
|
25
|
-
[activeStep, totalSteps]
|
|
26
|
-
);
|
|
27
|
-
return /* @__PURE__ */ jsxRuntime.jsx(SteppedTrackerContext.Provider, { value: steppedTrackerContextValue, children });
|
|
28
|
-
};
|
|
29
|
-
const useSteppedTrackerContext = () => react.useContext(SteppedTrackerContext);
|
|
30
|
-
const TrackerStepContext = react.createContext(0);
|
|
31
|
-
const useTrackerStepContext = () => react.useContext(TrackerStepContext);
|
|
32
|
-
const TrackerStepProvider = ({
|
|
33
|
-
children,
|
|
34
|
-
stepNumber
|
|
35
|
-
}) => {
|
|
36
|
-
return /* @__PURE__ */ jsxRuntime.jsx(TrackerStepContext.Provider, { value: stepNumber, children });
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
exports.SteppedTrackerProvider = SteppedTrackerProvider;
|
|
40
|
-
exports.TrackerStepProvider = TrackerStepProvider;
|
|
41
|
-
exports.useSteppedTrackerContext = useSteppedTrackerContext;
|
|
42
|
-
exports.useTrackerStepContext = useTrackerStepContext;
|
|
43
|
-
//# sourceMappingURL=SteppedTrackerContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SteppedTrackerContext.js","sources":["../src/stepped-tracker/SteppedTrackerContext.tsx"],"sourcesContent":["import { type ReactNode, createContext, useContext, useMemo } from \"react\";\n\nexport interface SteppedTrackerContextType {\n activeStep: number;\n totalSteps: number;\n isWithinSteppedTracker: boolean;\n}\n\nconst defaultSteppedTrackerContext = {\n activeStep: 0,\n totalSteps: 1,\n isWithinSteppedTracker: false,\n};\n\nconst SteppedTrackerContext = createContext(\n defaultSteppedTrackerContext as unknown as SteppedTrackerContextType,\n);\n\ntype SteppedTrackerProviderProps = Omit<\n SteppedTrackerContextType,\n \"isWithinSteppedTracker\"\n> & {\n children: ReactNode;\n};\n\nexport const SteppedTrackerProvider = ({\n activeStep,\n totalSteps,\n children,\n}: SteppedTrackerProviderProps) => {\n const steppedTrackerContextValue: SteppedTrackerContextType = useMemo(\n () => ({\n activeStep,\n totalSteps,\n isWithinSteppedTracker: true,\n }),\n [activeStep, totalSteps],\n );\n\n return (\n <SteppedTrackerContext.Provider value={steppedTrackerContextValue}>\n {children}\n </SteppedTrackerContext.Provider>\n );\n};\n\nexport const useSteppedTrackerContext = () => useContext(SteppedTrackerContext);\n\ntype TrackerStepNumberContextType = number;\n\nconst TrackerStepContext = createContext<TrackerStepNumberContextType>(0);\n\nexport const useTrackerStepContext = () => useContext(TrackerStepContext);\n\ninterface TrackerStepProviderProps {\n stepNumber: number;\n children: ReactNode;\n}\n\nexport const TrackerStepProvider = ({\n children,\n stepNumber,\n}: TrackerStepProviderProps) => {\n return (\n <TrackerStepContext.Provider value={stepNumber}>\n {children}\n </TrackerStepContext.Provider>\n );\n};\n"],"names":["createContext","useMemo","useContext"],"mappings":";;;;;AAQA,MAAM,4BAA+B,GAAA;AAAA,EACnC,UAAY,EAAA,CAAA;AAAA,EACZ,UAAY,EAAA,CAAA;AAAA,EACZ,sBAAwB,EAAA;AAC1B,CAAA;AAEA,MAAM,qBAAwB,GAAAA,mBAAA;AAAA,EAC5B;AACF,CAAA;AASO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,0BAAwD,GAAAC,aAAA;AAAA,IAC5D,OAAO;AAAA,MACL,UAAA;AAAA,MACA,UAAA;AAAA,MACA,sBAAwB,EAAA;AAAA,KAC1B,CAAA;AAAA,IACA,CAAC,YAAY,UAAU;AAAA,GACzB;AAEA,EAAA,sCACG,qBAAsB,CAAA,QAAA,EAAtB,EAA+B,KAAA,EAAO,4BACpC,QACH,EAAA,CAAA;AAEJ;AAEa,MAAA,wBAAA,GAA2B,MAAMC,gBAAA,CAAW,qBAAqB;AAI9E,MAAM,kBAAA,GAAqBF,oBAA4C,CAAC,CAAA;AAE3D,MAAA,qBAAA,GAAwB,MAAME,gBAAA,CAAW,kBAAkB;AAOjE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAA,sCACG,kBAAmB,CAAA,QAAA,EAAnB,EAA4B,KAAA,EAAO,YACjC,QACH,EAAA,CAAA;AAEJ;;;;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltTrackerConnector {\n --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete));\n --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active));\n --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-track-borderColor));\n --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-size-border-strong));\n --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));\n --trackerConnector-style-border: var(--trackerConnector-style-default);\n}\n\n.saltTrackerConnector {\n position: absolute;\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerConnector {\n border-top-width: var(--trackerConnector-thickness);\n border-top-style: var(--trackerConnector-style-border);\n border-top-color: var(--trackerConnector-color);\n width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n top: calc(var(--saltIcon-size) / 2 - (var(--trackerConnector-thickness) / 2));\n height: 0;\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerConnector {\n top: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n left: calc((var(--saltIcon-size) / 2) - (var(--trackerConnector-thickness) / 2));\n height: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n border-left-width: var(--trackerConnector-thickness);\n border-left-style: var(--trackerConnector-style-border);\n border-left-color: var(--trackerConnector-color);\n}\n\n.saltTrackerConnector.saltTrackerConnector-active {\n --trackerConnector-style-border: var(--trackerConnector-style-active);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=TrackerConnector.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TrackerConnector.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var clsx = require('clsx');
|
|
6
|
-
var styles = require('@salt-ds/styles');
|
|
7
|
-
var window = require('@salt-ds/window');
|
|
8
|
-
var TrackerConnector$1 = require('./TrackerConnector.css.js');
|
|
9
|
-
|
|
10
|
-
const withBaseName = core.makePrefixer("saltTrackerConnector");
|
|
11
|
-
const TrackerConnector = ({ state }) => {
|
|
12
|
-
const targetWindow = window.useWindow();
|
|
13
|
-
styles.useComponentCssInjection({
|
|
14
|
-
testId: "salt-tracker-connector",
|
|
15
|
-
css: TrackerConnector$1,
|
|
16
|
-
window: targetWindow
|
|
17
|
-
});
|
|
18
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(withBaseName(), withBaseName(state)) });
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
exports.TrackerConnector = TrackerConnector;
|
|
22
|
-
//# sourceMappingURL=TrackerConnector.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TrackerConnector.js","sources":["../src/stepped-tracker/TrackerConnector/TrackerConnector.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport trackerConnectorCss from \"./TrackerConnector.css\";\n\nconst withBaseName = makePrefixer(\"saltTrackerConnector\");\n\ntype ConnectorState = \"default\" | \"active\";\n\ninterface TrackerConnectorProps {\n /**\n * The state of the connector, which acts as an indicator of whether the active step is ahead/behind\n */\n state: ConnectorState;\n}\n\nexport const TrackerConnector = ({ state }: TrackerConnectorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tracker-connector\",\n css: trackerConnectorCss,\n window: targetWindow,\n });\n\n return <span className={clsx(withBaseName(), withBaseName(state))} />;\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","trackerConnectorCss","jsx","clsx"],"mappings":";;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA;AAWjD,MAAM,gBAAmB,GAAA,CAAC,EAAE,KAAA,EAAmC,KAAA;AACpE,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAO,uBAAAC,cAAA,CAAC,UAAK,SAAW,EAAAC,SAAA,CAAK,cAAgB,EAAA,YAAA,CAAa,KAAK,CAAC,CAAG,EAAA,CAAA;AACrE;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var css_248z = ".saltTrackerStep {\n --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground-decorative));\n --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground-decorative));\n --trackerStep-icon-color-warning: var(--saltTrackerStep-icon-color-warning, var(--salt-status-warning-foreground-decorative));\n --trackerStep-icon-color-error: var(--saltTrackerStep-icon-color-error, var(--salt-status-error-foreground-decorative));\n\n --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n --saltIcon-color: var(--trackerStep-icon-color);\n /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-size-icon), 12px));\n}\n\n.saltTrackerStep {\n margin: 0;\n text-indent: 0;\n list-style-type: none;\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n width: var(--saltTrackerStep-width, 100%);\n gap: var(--salt-spacing-50);\n color: var(--salt-content-primary-foreground);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerStep {\n flex-direction: column;\n padding: 0 var(--salt-spacing-25);\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep {\n flex-direction: row;\n min-height: calc(var(--salt-size-base) * 2);\n width: 100%;\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-status-warning {\n --trackerStep-icon-color: var(--trackerStep-icon-color-warning);\n}\n\n.saltTrackerStep.saltTrackerStep-status-error {\n --trackerStep-icon-color: var(--trackerStep-icon-color-error);\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-stage-completed {\n --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = css_248z;
|
|
6
|
-
//# sourceMappingURL=TrackerStep.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TrackerStep.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,96 +0,0 @@
|
|
|
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 TrackerConnector = require('../TrackerConnector/TrackerConnector.js');
|
|
10
|
-
var SteppedTrackerContext = require('../SteppedTrackerContext.js');
|
|
11
|
-
var TrackerStep$1 = require('./TrackerStep.css.js');
|
|
12
|
-
|
|
13
|
-
const withBaseName = core.makePrefixer("saltTrackerStep");
|
|
14
|
-
const useCheckWithinSteppedTracker = (isWithinSteppedTracker) => {
|
|
15
|
-
react.useEffect(() => {
|
|
16
|
-
if (process.env.NODE_ENV !== "production") {
|
|
17
|
-
if (!isWithinSteppedTracker) {
|
|
18
|
-
console.error(
|
|
19
|
-
"The TrackerStep component must be placed within a SteppedTracker component"
|
|
20
|
-
);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
}, [isWithinSteppedTracker]);
|
|
24
|
-
};
|
|
25
|
-
const parseIconName = ({
|
|
26
|
-
stage,
|
|
27
|
-
status,
|
|
28
|
-
active
|
|
29
|
-
}) => {
|
|
30
|
-
if (stage === "completed") return "completed";
|
|
31
|
-
if (active) return "active";
|
|
32
|
-
if (status) return status;
|
|
33
|
-
return stage;
|
|
34
|
-
};
|
|
35
|
-
const TrackerStep = react.forwardRef(
|
|
36
|
-
function TrackerStep2(props, ref) {
|
|
37
|
-
const {
|
|
38
|
-
stage = "pending",
|
|
39
|
-
status,
|
|
40
|
-
style,
|
|
41
|
-
className,
|
|
42
|
-
children,
|
|
43
|
-
...restProps
|
|
44
|
-
} = props;
|
|
45
|
-
const targetWindow = window.useWindow();
|
|
46
|
-
styles.useComponentCssInjection({
|
|
47
|
-
testId: "salt-tracker-step",
|
|
48
|
-
css: TrackerStep$1,
|
|
49
|
-
window: targetWindow
|
|
50
|
-
});
|
|
51
|
-
const { ErrorIcon, WarningIcon, CompletedIcon, ActiveIcon, PendingIcon } = core.useIcon();
|
|
52
|
-
const { activeStep, totalSteps, isWithinSteppedTracker } = SteppedTrackerContext.useSteppedTrackerContext();
|
|
53
|
-
const stepNumber = SteppedTrackerContext.useTrackerStepContext();
|
|
54
|
-
useCheckWithinSteppedTracker(isWithinSteppedTracker);
|
|
55
|
-
const isActive = activeStep === stepNumber;
|
|
56
|
-
const iconName = parseIconName({ stage, status, active: isActive });
|
|
57
|
-
const iconMap = {
|
|
58
|
-
pending: PendingIcon,
|
|
59
|
-
active: ActiveIcon,
|
|
60
|
-
completed: CompletedIcon,
|
|
61
|
-
warning: WarningIcon,
|
|
62
|
-
error: ErrorIcon
|
|
63
|
-
};
|
|
64
|
-
const Icon = iconMap[iconName];
|
|
65
|
-
const connectorState = activeStep > stepNumber ? "active" : "default";
|
|
66
|
-
const hasConnector = stepNumber < totalSteps - 1;
|
|
67
|
-
const innerStyle = {
|
|
68
|
-
...style,
|
|
69
|
-
"--saltTrackerStep-width": `${100 / totalSteps}%`
|
|
70
|
-
};
|
|
71
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
72
|
-
"li",
|
|
73
|
-
{
|
|
74
|
-
className: clsx.clsx(
|
|
75
|
-
withBaseName(),
|
|
76
|
-
withBaseName(`stage-${stage}`),
|
|
77
|
-
withBaseName(`status-${status}`),
|
|
78
|
-
{ [withBaseName("active")]: isActive },
|
|
79
|
-
className
|
|
80
|
-
),
|
|
81
|
-
style: innerStyle,
|
|
82
|
-
"aria-current": isActive ? "step" : void 0,
|
|
83
|
-
ref,
|
|
84
|
-
...restProps,
|
|
85
|
-
children: [
|
|
86
|
-
/* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
|
|
87
|
-
hasConnector && /* @__PURE__ */ jsxRuntime.jsx(TrackerConnector.TrackerConnector, { state: connectorState }),
|
|
88
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("body"), children })
|
|
89
|
-
]
|
|
90
|
-
}
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
);
|
|
94
|
-
|
|
95
|
-
exports.TrackerStep = TrackerStep;
|
|
96
|
-
//# sourceMappingURL=TrackerStep.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TrackerStep.js","sources":["../src/stepped-tracker/TrackerStep/TrackerStep.tsx"],"sourcesContent":["import { type ValidationStatus, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport { TrackerConnector } from \"../TrackerConnector\";\n\nimport {\n useSteppedTrackerContext,\n useTrackerStepContext,\n} from \"../SteppedTrackerContext\";\n\nimport trackerStepCss from \"./TrackerStep.css\";\n\nconst withBaseName = makePrefixer(\"saltTrackerStep\");\n\ntype StageOptions = \"pending\" | \"completed\";\ntype StatusOptions = Extract<ValidationStatus, \"warning\" | \"error\">;\n\nexport interface TrackerStepProps extends ComponentPropsWithoutRef<\"li\"> {\n /**\n * The stage of the step: \"pending\" or \"completed\" (note, \"active\" is derived from \"activeStep\" in parent SteppedTracker component)\n */\n stage?: StageOptions;\n /**\n * The status of the step: warning or error\n *\n * If the stage is completed or active, the status prop will be ignored\n */\n status?: StatusOptions;\n}\n\nconst useCheckWithinSteppedTracker = (isWithinSteppedTracker: boolean) => {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!isWithinSteppedTracker) {\n console.error(\n \"The TrackerStep component must be placed within a SteppedTracker component\",\n );\n }\n }\n }, [isWithinSteppedTracker]);\n};\n\nconst parseIconName = ({\n stage,\n status,\n active,\n}: {\n stage: StageOptions;\n status?: StatusOptions;\n active: boolean;\n}) => {\n if (stage === \"completed\") return \"completed\";\n if (active) return \"active\";\n if (status) return status;\n return stage;\n};\n\nexport const TrackerStep = forwardRef<HTMLLIElement, TrackerStepProps>(\n function TrackerStep(props, ref) {\n const {\n stage = \"pending\",\n status,\n style,\n className,\n children,\n ...restProps\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tracker-step\",\n css: trackerStepCss,\n window: targetWindow,\n });\n const { ErrorIcon, WarningIcon, CompletedIcon, ActiveIcon, PendingIcon } =\n useIcon();\n const { activeStep, totalSteps, isWithinSteppedTracker } =\n useSteppedTrackerContext();\n const stepNumber = useTrackerStepContext();\n\n useCheckWithinSteppedTracker(isWithinSteppedTracker);\n\n const isActive = activeStep === stepNumber;\n const iconName = parseIconName({ stage, status, active: isActive });\n const iconMap = {\n pending: PendingIcon,\n active: ActiveIcon,\n completed: CompletedIcon,\n warning: WarningIcon,\n error: ErrorIcon,\n };\n\n const Icon = iconMap[iconName];\n const connectorState = activeStep > stepNumber ? \"active\" : \"default\";\n const hasConnector = stepNumber < totalSteps - 1;\n\n const innerStyle = {\n ...style,\n \"--saltTrackerStep-width\": `${100 / totalSteps}%`,\n };\n\n return (\n <li\n className={clsx(\n withBaseName(),\n withBaseName(`stage-${stage}`),\n withBaseName(`status-${status}`),\n { [withBaseName(\"active\")]: isActive },\n className,\n )}\n style={innerStyle}\n aria-current={isActive ? \"step\" : undefined}\n ref={ref}\n {...restProps}\n >\n <Icon />\n {hasConnector && <TrackerConnector state={connectorState} />}\n <div className={withBaseName(\"body\")}>{children}</div>\n </li>\n );\n },\n);\n"],"names":["makePrefixer","useEffect","forwardRef","TrackerStep","useWindow","useComponentCssInjection","trackerStepCss","useIcon","useSteppedTrackerContext","useTrackerStepContext","jsxs","clsx","jsx","TrackerConnector"],"mappings":";;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAkBnD,MAAM,4BAAA,GAA+B,CAAC,sBAAoC,KAAA;AACxE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAA,IAAI,CAAC,sBAAwB,EAAA;AAC3B,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF;AACF,GACF,EAAG,CAAC,sBAAsB,CAAC,CAAA;AAC7B,CAAA;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAIM,KAAA;AACJ,EAAI,IAAA,KAAA,KAAU,aAAoB,OAAA,WAAA;AAClC,EAAA,IAAI,QAAe,OAAA,QAAA;AACnB,EAAA,IAAI,QAAe,OAAA,MAAA;AACnB,EAAO,OAAA,KAAA;AACT,CAAA;AAEO,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,KAAQ,GAAA,SAAA;AAAA,MACR,MAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,SAAW,EAAA,WAAA,EAAa,eAAe,UAAY,EAAA,WAAA,KACzDC,YAAQ,EAAA;AACV,IAAA,MAAM,EAAE,UAAA,EAAY,UAAY,EAAA,sBAAA,KAC9BC,8CAAyB,EAAA;AAC3B,IAAA,MAAM,aAAaC,2CAAsB,EAAA;AAEzC,IAAA,4BAAA,CAA6B,sBAAsB,CAAA;AAEnD,IAAA,MAAM,WAAW,UAAe,KAAA,UAAA;AAChC,IAAA,MAAM,WAAW,aAAc,CAAA,EAAE,OAAO,MAAQ,EAAA,MAAA,EAAQ,UAAU,CAAA;AAClE,IAAA,MAAM,OAAU,GAAA;AAAA,MACd,OAAS,EAAA,WAAA;AAAA,MACT,MAAQ,EAAA,UAAA;AAAA,MACR,SAAW,EAAA,aAAA;AAAA,MACX,OAAS,EAAA,WAAA;AAAA,MACT,KAAO,EAAA;AAAA,KACT;AAEA,IAAM,MAAA,IAAA,GAAO,QAAQ,QAAQ,CAAA;AAC7B,IAAM,MAAA,cAAA,GAAiB,UAAa,GAAA,UAAA,GAAa,QAAW,GAAA,SAAA;AAC5D,IAAM,MAAA,YAAA,GAAe,aAAa,UAAa,GAAA,CAAA;AAE/C,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAG,KAAA;AAAA,MACH,yBAAA,EAA2B,CAAG,EAAA,GAAA,GAAM,UAAU,CAAA,CAAA;AAAA,KAChD;AAEA,IACE,uBAAAC,eAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,YAAA,CAAa,CAAS,MAAA,EAAA,KAAK,CAAE,CAAA,CAAA;AAAA,UAC7B,YAAA,CAAa,CAAU,OAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AAAA,UAC/B,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,QAAS,EAAA;AAAA,UACrC;AAAA,SACF;AAAA,QACA,KAAO,EAAA,UAAA;AAAA,QACP,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,QAClC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,IAAK,EAAA,EAAA,CAAA;AAAA,UACL,YAAgB,oBAAAA,cAAA,CAACC,iCAAiB,EAAA,EAAA,KAAA,EAAO,cAAgB,EAAA,CAAA;AAAA,yCACzD,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,GAAI,QAAS,EAAA;AAAA;AAAA;AAAA,KAClD;AAAA;AAGN;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SkipLinks.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { forwardRef } from 'react';
|
|
5
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
|
-
import { useWindow } from '@salt-ds/window';
|
|
7
|
-
import css_248z from './SkipLinks.css.js';
|
|
8
|
-
|
|
9
|
-
const withBaseName = makePrefixer("saltSkipLinks");
|
|
10
|
-
const SkipLinks = forwardRef(function SkipLinks2(props, ref) {
|
|
11
|
-
const { className, children, ...restProps } = props;
|
|
12
|
-
const targetWindow = useWindow();
|
|
13
|
-
useComponentCssInjection({
|
|
14
|
-
testId: "salt-skip-links",
|
|
15
|
-
css: css_248z,
|
|
16
|
-
window: targetWindow
|
|
17
|
-
});
|
|
18
|
-
return /* @__PURE__ */ jsx("ul", { ...restProps, className: clsx(withBaseName(), className), ref, children });
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
export { SkipLinks };
|
|
22
|
-
//# sourceMappingURL=SkipLinks.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SkipLinks.js","sources":["../src/skip-link/SkipLinks.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport skipLinksCss from \"./SkipLinks.css\";\n\nconst withBaseName = makePrefixer(\"saltSkipLinks\");\n\nexport const SkipLinks = forwardRef<\n HTMLUListElement,\n HTMLAttributes<HTMLUListElement>\n>(function SkipLinks(props, ref) {\n const { className, children, ...restProps } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-skip-links\",\n css: skipLinksCss,\n window: targetWindow,\n });\n\n return (\n <ul {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n {children}\n </ul>\n );\n});\n"],"names":["SkipLinks","skipLinksCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA,CAGvB,SAASA,UAAAA,CAAU,OAAO,GAAK,EAAA;AAC/B,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,GAAG,WAAc,GAAA,KAAA;AAC9C,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAG,SAAW,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAG,EAAA,GAAA,EAC5D,QACH,EAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltStepLabel {\n width: 100%;\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltStepLabel {\n text-align: center;\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltStepLabel {\n text-align: left;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=StepLabel.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, Label } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { clsx } from 'clsx';
|
|
6
|
-
import { forwardRef } from 'react';
|
|
7
|
-
import css_248z from './StepLabel.css.js';
|
|
8
|
-
|
|
9
|
-
const withBaseName = makePrefixer("saltStepLabel");
|
|
10
|
-
const StepLabel = forwardRef(
|
|
11
|
-
function StepLabel2({ children, className, ...rest }, ref) {
|
|
12
|
-
const targetWindow = useWindow();
|
|
13
|
-
useComponentCssInjection({
|
|
14
|
-
testId: "salt-step-label",
|
|
15
|
-
css: css_248z,
|
|
16
|
-
window: targetWindow
|
|
17
|
-
});
|
|
18
|
-
return /* @__PURE__ */ jsx(Label, { className: clsx(withBaseName(), className), ref, ...rest, children: /* @__PURE__ */ jsx("strong", { children }) });
|
|
19
|
-
}
|
|
20
|
-
);
|
|
21
|
-
|
|
22
|
-
export { StepLabel };
|
|
23
|
-
//# sourceMappingURL=StepLabel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import { Label, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ReactNode, forwardRef } from \"react\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport interface StepLabelProps extends TextProps<\"label\"> {\n /**\n * The content of Step Label\n */\n children?: ReactNode;\n}\n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n function StepLabel({ children, className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-step-label\",\n css: stepLabelCss,\n window: targetWindow,\n });\n\n return (\n <Label className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n <strong>{children}</strong>\n </Label>\n );\n },\n);\n"],"names":["StepLabel","stepLabelCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAS1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,WAAU,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAM,SAAW,EAAA,IAAA,CAAK,cAAgB,EAAA,SAAS,CAAG,EAAA,GAAA,EAAW,GAAG,IAAA,EAC/D,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAQ,UAAS,CACpB,EAAA,CAAA;AAAA;AAGN;;;;"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, useMemo, useContext } from 'react';
|
|
3
|
-
|
|
4
|
-
const defaultSteppedTrackerContext = {
|
|
5
|
-
activeStep: 0,
|
|
6
|
-
totalSteps: 1,
|
|
7
|
-
isWithinSteppedTracker: false
|
|
8
|
-
};
|
|
9
|
-
const SteppedTrackerContext = createContext(
|
|
10
|
-
defaultSteppedTrackerContext
|
|
11
|
-
);
|
|
12
|
-
const SteppedTrackerProvider = ({
|
|
13
|
-
activeStep,
|
|
14
|
-
totalSteps,
|
|
15
|
-
children
|
|
16
|
-
}) => {
|
|
17
|
-
const steppedTrackerContextValue = useMemo(
|
|
18
|
-
() => ({
|
|
19
|
-
activeStep,
|
|
20
|
-
totalSteps,
|
|
21
|
-
isWithinSteppedTracker: true
|
|
22
|
-
}),
|
|
23
|
-
[activeStep, totalSteps]
|
|
24
|
-
);
|
|
25
|
-
return /* @__PURE__ */ jsx(SteppedTrackerContext.Provider, { value: steppedTrackerContextValue, children });
|
|
26
|
-
};
|
|
27
|
-
const useSteppedTrackerContext = () => useContext(SteppedTrackerContext);
|
|
28
|
-
const TrackerStepContext = createContext(0);
|
|
29
|
-
const useTrackerStepContext = () => useContext(TrackerStepContext);
|
|
30
|
-
const TrackerStepProvider = ({
|
|
31
|
-
children,
|
|
32
|
-
stepNumber
|
|
33
|
-
}) => {
|
|
34
|
-
return /* @__PURE__ */ jsx(TrackerStepContext.Provider, { value: stepNumber, children });
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export { SteppedTrackerProvider, TrackerStepProvider, useSteppedTrackerContext, useTrackerStepContext };
|
|
38
|
-
//# sourceMappingURL=SteppedTrackerContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SteppedTrackerContext.js","sources":["../src/stepped-tracker/SteppedTrackerContext.tsx"],"sourcesContent":["import { type ReactNode, createContext, useContext, useMemo } from \"react\";\n\nexport interface SteppedTrackerContextType {\n activeStep: number;\n totalSteps: number;\n isWithinSteppedTracker: boolean;\n}\n\nconst defaultSteppedTrackerContext = {\n activeStep: 0,\n totalSteps: 1,\n isWithinSteppedTracker: false,\n};\n\nconst SteppedTrackerContext = createContext(\n defaultSteppedTrackerContext as unknown as SteppedTrackerContextType,\n);\n\ntype SteppedTrackerProviderProps = Omit<\n SteppedTrackerContextType,\n \"isWithinSteppedTracker\"\n> & {\n children: ReactNode;\n};\n\nexport const SteppedTrackerProvider = ({\n activeStep,\n totalSteps,\n children,\n}: SteppedTrackerProviderProps) => {\n const steppedTrackerContextValue: SteppedTrackerContextType = useMemo(\n () => ({\n activeStep,\n totalSteps,\n isWithinSteppedTracker: true,\n }),\n [activeStep, totalSteps],\n );\n\n return (\n <SteppedTrackerContext.Provider value={steppedTrackerContextValue}>\n {children}\n </SteppedTrackerContext.Provider>\n );\n};\n\nexport const useSteppedTrackerContext = () => useContext(SteppedTrackerContext);\n\ntype TrackerStepNumberContextType = number;\n\nconst TrackerStepContext = createContext<TrackerStepNumberContextType>(0);\n\nexport const useTrackerStepContext = () => useContext(TrackerStepContext);\n\ninterface TrackerStepProviderProps {\n stepNumber: number;\n children: ReactNode;\n}\n\nexport const TrackerStepProvider = ({\n children,\n stepNumber,\n}: TrackerStepProviderProps) => {\n return (\n <TrackerStepContext.Provider value={stepNumber}>\n {children}\n </TrackerStepContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;AAQA,MAAM,4BAA+B,GAAA;AAAA,EACnC,UAAY,EAAA,CAAA;AAAA,EACZ,UAAY,EAAA,CAAA;AAAA,EACZ,sBAAwB,EAAA;AAC1B,CAAA;AAEA,MAAM,qBAAwB,GAAA,aAAA;AAAA,EAC5B;AACF,CAAA;AASO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,0BAAwD,GAAA,OAAA;AAAA,IAC5D,OAAO;AAAA,MACL,UAAA;AAAA,MACA,UAAA;AAAA,MACA,sBAAwB,EAAA;AAAA,KAC1B,CAAA;AAAA,IACA,CAAC,YAAY,UAAU;AAAA,GACzB;AAEA,EAAA,2BACG,qBAAsB,CAAA,QAAA,EAAtB,EAA+B,KAAA,EAAO,4BACpC,QACH,EAAA,CAAA;AAEJ;AAEa,MAAA,wBAAA,GAA2B,MAAM,UAAA,CAAW,qBAAqB;AAI9E,MAAM,kBAAA,GAAqB,cAA4C,CAAC,CAAA;AAE3D,MAAA,qBAAA,GAAwB,MAAM,UAAA,CAAW,kBAAkB;AAOjE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAA,2BACG,kBAAmB,CAAA,QAAA,EAAnB,EAA4B,KAAA,EAAO,YACjC,QACH,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltTrackerConnector {\n --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete));\n --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active));\n --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-track-borderColor));\n --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-size-border-strong));\n --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));\n --trackerConnector-style-border: var(--trackerConnector-style-default);\n}\n\n.saltTrackerConnector {\n position: absolute;\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerConnector {\n border-top-width: var(--trackerConnector-thickness);\n border-top-style: var(--trackerConnector-style-border);\n border-top-color: var(--trackerConnector-color);\n width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n top: calc(var(--saltIcon-size) / 2 - (var(--trackerConnector-thickness) / 2));\n height: 0;\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerConnector {\n top: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n left: calc((var(--saltIcon-size) / 2) - (var(--trackerConnector-thickness) / 2));\n height: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n border-left-width: var(--trackerConnector-thickness);\n border-left-style: var(--trackerConnector-style-border);\n border-left-color: var(--trackerConnector-color);\n}\n\n.saltTrackerConnector.saltTrackerConnector-active {\n --trackerConnector-style-border: var(--trackerConnector-style-active);\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=TrackerConnector.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TrackerConnector.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
|
-
import { useWindow } from '@salt-ds/window';
|
|
6
|
-
import css_248z from './TrackerConnector.css.js';
|
|
7
|
-
|
|
8
|
-
const withBaseName = makePrefixer("saltTrackerConnector");
|
|
9
|
-
const TrackerConnector = ({ state }) => {
|
|
10
|
-
const targetWindow = useWindow();
|
|
11
|
-
useComponentCssInjection({
|
|
12
|
-
testId: "salt-tracker-connector",
|
|
13
|
-
css: css_248z,
|
|
14
|
-
window: targetWindow
|
|
15
|
-
});
|
|
16
|
-
return /* @__PURE__ */ jsx("span", { className: clsx(withBaseName(), withBaseName(state)) });
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export { TrackerConnector };
|
|
20
|
-
//# sourceMappingURL=TrackerConnector.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TrackerConnector.js","sources":["../src/stepped-tracker/TrackerConnector/TrackerConnector.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport trackerConnectorCss from \"./TrackerConnector.css\";\n\nconst withBaseName = makePrefixer(\"saltTrackerConnector\");\n\ntype ConnectorState = \"default\" | \"active\";\n\ninterface TrackerConnectorProps {\n /**\n * The state of the connector, which acts as an indicator of whether the active step is ahead/behind\n */\n state: ConnectorState;\n}\n\nexport const TrackerConnector = ({ state }: TrackerConnectorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tracker-connector\",\n css: trackerConnectorCss,\n window: targetWindow,\n });\n\n return <span className={clsx(withBaseName(), withBaseName(state))} />;\n};\n"],"names":["trackerConnectorCss"],"mappings":";;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAWjD,MAAM,gBAAmB,GAAA,CAAC,EAAE,KAAA,EAAmC,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAO,uBAAA,GAAA,CAAC,UAAK,SAAW,EAAA,IAAA,CAAK,cAAgB,EAAA,YAAA,CAAa,KAAK,CAAC,CAAG,EAAA,CAAA;AACrE;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltTrackerStep {\n --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground-decorative));\n --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground-decorative));\n --trackerStep-icon-color-warning: var(--saltTrackerStep-icon-color-warning, var(--salt-status-warning-foreground-decorative));\n --trackerStep-icon-color-error: var(--saltTrackerStep-icon-color-error, var(--salt-status-error-foreground-decorative));\n\n --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n --saltIcon-color: var(--trackerStep-icon-color);\n /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-size-icon), 12px));\n}\n\n.saltTrackerStep {\n margin: 0;\n text-indent: 0;\n list-style-type: none;\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n width: var(--saltTrackerStep-width, 100%);\n gap: var(--salt-spacing-50);\n color: var(--salt-content-primary-foreground);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerStep {\n flex-direction: column;\n padding: 0 var(--salt-spacing-25);\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep {\n flex-direction: row;\n min-height: calc(var(--salt-size-base) * 2);\n width: 100%;\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-status-warning {\n --trackerStep-icon-color: var(--trackerStep-icon-color-warning);\n}\n\n.saltTrackerStep.saltTrackerStep-status-error {\n --trackerStep-icon-color: var(--trackerStep-icon-color-error);\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-stage-completed {\n --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=TrackerStep.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TrackerStep.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useIcon } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { clsx } from 'clsx';
|
|
6
|
-
import { forwardRef, useEffect } from 'react';
|
|
7
|
-
import { TrackerConnector } from '../TrackerConnector/TrackerConnector.js';
|
|
8
|
-
import { useSteppedTrackerContext, useTrackerStepContext } from '../SteppedTrackerContext.js';
|
|
9
|
-
import css_248z from './TrackerStep.css.js';
|
|
10
|
-
|
|
11
|
-
const withBaseName = makePrefixer("saltTrackerStep");
|
|
12
|
-
const useCheckWithinSteppedTracker = (isWithinSteppedTracker) => {
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
if (process.env.NODE_ENV !== "production") {
|
|
15
|
-
if (!isWithinSteppedTracker) {
|
|
16
|
-
console.error(
|
|
17
|
-
"The TrackerStep component must be placed within a SteppedTracker component"
|
|
18
|
-
);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}, [isWithinSteppedTracker]);
|
|
22
|
-
};
|
|
23
|
-
const parseIconName = ({
|
|
24
|
-
stage,
|
|
25
|
-
status,
|
|
26
|
-
active
|
|
27
|
-
}) => {
|
|
28
|
-
if (stage === "completed") return "completed";
|
|
29
|
-
if (active) return "active";
|
|
30
|
-
if (status) return status;
|
|
31
|
-
return stage;
|
|
32
|
-
};
|
|
33
|
-
const TrackerStep = forwardRef(
|
|
34
|
-
function TrackerStep2(props, ref) {
|
|
35
|
-
const {
|
|
36
|
-
stage = "pending",
|
|
37
|
-
status,
|
|
38
|
-
style,
|
|
39
|
-
className,
|
|
40
|
-
children,
|
|
41
|
-
...restProps
|
|
42
|
-
} = props;
|
|
43
|
-
const targetWindow = useWindow();
|
|
44
|
-
useComponentCssInjection({
|
|
45
|
-
testId: "salt-tracker-step",
|
|
46
|
-
css: css_248z,
|
|
47
|
-
window: targetWindow
|
|
48
|
-
});
|
|
49
|
-
const { ErrorIcon, WarningIcon, CompletedIcon, ActiveIcon, PendingIcon } = useIcon();
|
|
50
|
-
const { activeStep, totalSteps, isWithinSteppedTracker } = useSteppedTrackerContext();
|
|
51
|
-
const stepNumber = useTrackerStepContext();
|
|
52
|
-
useCheckWithinSteppedTracker(isWithinSteppedTracker);
|
|
53
|
-
const isActive = activeStep === stepNumber;
|
|
54
|
-
const iconName = parseIconName({ stage, status, active: isActive });
|
|
55
|
-
const iconMap = {
|
|
56
|
-
pending: PendingIcon,
|
|
57
|
-
active: ActiveIcon,
|
|
58
|
-
completed: CompletedIcon,
|
|
59
|
-
warning: WarningIcon,
|
|
60
|
-
error: ErrorIcon
|
|
61
|
-
};
|
|
62
|
-
const Icon = iconMap[iconName];
|
|
63
|
-
const connectorState = activeStep > stepNumber ? "active" : "default";
|
|
64
|
-
const hasConnector = stepNumber < totalSteps - 1;
|
|
65
|
-
const innerStyle = {
|
|
66
|
-
...style,
|
|
67
|
-
"--saltTrackerStep-width": `${100 / totalSteps}%`
|
|
68
|
-
};
|
|
69
|
-
return /* @__PURE__ */ jsxs(
|
|
70
|
-
"li",
|
|
71
|
-
{
|
|
72
|
-
className: clsx(
|
|
73
|
-
withBaseName(),
|
|
74
|
-
withBaseName(`stage-${stage}`),
|
|
75
|
-
withBaseName(`status-${status}`),
|
|
76
|
-
{ [withBaseName("active")]: isActive },
|
|
77
|
-
className
|
|
78
|
-
),
|
|
79
|
-
style: innerStyle,
|
|
80
|
-
"aria-current": isActive ? "step" : void 0,
|
|
81
|
-
ref,
|
|
82
|
-
...restProps,
|
|
83
|
-
children: [
|
|
84
|
-
/* @__PURE__ */ jsx(Icon, {}),
|
|
85
|
-
hasConnector && /* @__PURE__ */ jsx(TrackerConnector, { state: connectorState }),
|
|
86
|
-
/* @__PURE__ */ jsx("div", { className: withBaseName("body"), children })
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
);
|
|
90
|
-
}
|
|
91
|
-
);
|
|
92
|
-
|
|
93
|
-
export { TrackerStep };
|
|
94
|
-
//# sourceMappingURL=TrackerStep.js.map
|