@salt-ds/lab 1.0.0-alpha.57 → 1.0.0-alpha.59
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 +301 -0
- package/css/salt-lab.css +192 -163
- package/dist-cjs/calendar/useCalendarSelection.js.map +1 -1
- 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 +3 -3
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +2 -2
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.css.js +1 -1
- package/dist-cjs/dialog/DialogHeader.js +2 -2
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/index.js +4 -8
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/overlay/OverlayHeader.css.js +1 -1
- package/dist-cjs/overlay/OverlayHeader.js +2 -2
- package/dist-cjs/overlay/OverlayHeader.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/calendar/useCalendarSelection.js.map +1 -1
- 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 +4 -4
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +3 -3
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/dialog/DialogHeader.css.js +1 -1
- package/dist-es/dialog/DialogHeader.js +3 -3
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/index.js +2 -4
- package/dist-es/index.js.map +1 -1
- package/dist-es/overlay/OverlayHeader.css.js +1 -1
- package/dist-es/overlay/OverlayHeader.js +3 -3
- package/dist-es/overlay/OverlayHeader.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/DatePicker.d.ts +1 -1
- package/dist-types/date-picker/DatePickerActions.d.ts +2 -2
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +4 -0
- package/dist-types/date-picker/DatePickerRangeInput.d.ts +1 -1
- package/dist-types/date-picker/DatePickerRangePanel.d.ts +1 -1
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +1 -1
- package/dist-types/index.d.ts +0 -1
- package/dist-types/localization-provider/LocalizationProvider.d.ts +2 -2
- 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 +15 -13
- package/dist-cjs/skip-link/SkipLink.css.js +0 -6
- package/dist-cjs/skip-link/SkipLink.css.js.map +0 -1
- package/dist-cjs/skip-link/SkipLink.js +0 -36
- package/dist-cjs/skip-link/SkipLink.js.map +0 -1
- 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/skip-link/internal/useManageFocusOnTarget.js +0 -59
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.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/SkipLink.css.js +0 -4
- package/dist-es/skip-link/SkipLink.css.js.map +0 -1
- package/dist-es/skip-link/SkipLink.js +0 -34
- package/dist-es/skip-link/SkipLink.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/skip-link/internal/useManageFocusOnTarget.js +0 -57
- package/dist-es/skip-link/internal/useManageFocusOnTarget.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/SkipLink.d.ts +0 -15
- package/dist-types/skip-link/SkipLinks.d.ts +0 -2
- package/dist-types/skip-link/index.d.ts +0 -2
- package/dist-types/skip-link/internal/useManageFocusOnTarget.d.ts +0 -10
- 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
|
@@ -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,59 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
|
|
5
|
-
const FOCUS_TIMEOUT = 50;
|
|
6
|
-
const useManageFocusOnTarget = ({
|
|
7
|
-
targetRef,
|
|
8
|
-
targetClass
|
|
9
|
-
}) => {
|
|
10
|
-
const [target, setTarget] = react.useState();
|
|
11
|
-
const hasTabIndex = react.useRef();
|
|
12
|
-
const shouldRemoveTabIndex = react.useRef();
|
|
13
|
-
react.useEffect(() => {
|
|
14
|
-
if (targetRef == null ? void 0 : targetRef.current) {
|
|
15
|
-
setTarget(targetRef.current);
|
|
16
|
-
}
|
|
17
|
-
}, [targetRef]);
|
|
18
|
-
return react.useMemo(() => {
|
|
19
|
-
if (!target) {
|
|
20
|
-
return {};
|
|
21
|
-
}
|
|
22
|
-
const addTabIndex = () => {
|
|
23
|
-
const tabIndex = target.getAttribute("tabIndex");
|
|
24
|
-
hasTabIndex.current = tabIndex || tabIndex === "0";
|
|
25
|
-
if (!hasTabIndex.current) {
|
|
26
|
-
shouldRemoveTabIndex.current = true;
|
|
27
|
-
target.setAttribute("tabIndex", "-1");
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
const removeTabIndex = () => {
|
|
31
|
-
if (!hasTabIndex.current && shouldRemoveTabIndex.current) {
|
|
32
|
-
target.removeAttribute("tabIndex");
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
const handleFocusOnTarget = () => {
|
|
36
|
-
shouldRemoveTabIndex.current = false;
|
|
37
|
-
target.classList.add(targetClass);
|
|
38
|
-
};
|
|
39
|
-
const handleBlurFromTarget = () => {
|
|
40
|
-
shouldRemoveTabIndex.current = true;
|
|
41
|
-
removeTabIndex();
|
|
42
|
-
target.classList.remove(targetClass);
|
|
43
|
-
};
|
|
44
|
-
return {
|
|
45
|
-
onBlur: () => setTimeout(removeTabIndex, FOCUS_TIMEOUT),
|
|
46
|
-
onClick: () => {
|
|
47
|
-
addTabIndex();
|
|
48
|
-
setTimeout(() => {
|
|
49
|
-
target.focus();
|
|
50
|
-
}, FOCUS_TIMEOUT);
|
|
51
|
-
target.addEventListener("focus", handleFocusOnTarget, { once: true });
|
|
52
|
-
target.addEventListener("blur", handleBlurFromTarget, { once: true });
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
}, [target, targetClass]);
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
exports.useManageFocusOnTarget = useManageFocusOnTarget;
|
|
59
|
-
//# sourceMappingURL=useManageFocusOnTarget.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import { type RefObject, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\nexport const useManageFocusOnTarget = ({\n targetRef,\n targetClass,\n}: {\n targetRef: RefObject<HTMLElement> | undefined;\n targetClass: string;\n}):\n | { onBlur: () => NodeJS.Timeout; onClick: () => void }\n | Record<string, undefined> => {\n const [target, setTarget] = useState<HTMLElement>();\n\n const hasTabIndex = useRef<boolean | string>();\n const shouldRemoveTabIndex = useRef<boolean>();\n\n useEffect(() => {\n if (targetRef?.current) {\n setTarget(targetRef.current);\n }\n }, [targetRef]);\n\n return useMemo(() => {\n if (!target) {\n return {};\n }\n\n const addTabIndex = () => {\n const tabIndex = target.getAttribute(\"tabIndex\");\n hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n if (!hasTabIndex.current) {\n shouldRemoveTabIndex.current = true;\n target.setAttribute(\"tabIndex\", \"-1\");\n }\n };\n\n const removeTabIndex = () => {\n if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n target.removeAttribute(\"tabIndex\");\n }\n };\n\n const handleFocusOnTarget = () => {\n shouldRemoveTabIndex.current = false;\n target.classList.add(targetClass);\n };\n\n const handleBlurFromTarget = () => {\n shouldRemoveTabIndex.current = true;\n removeTabIndex();\n target.classList.remove(targetClass);\n };\n\n return {\n onBlur: () => setTimeout(removeTabIndex, FOCUS_TIMEOUT),\n onClick: () => {\n addTabIndex();\n setTimeout(() => {\n target.focus();\n }, FOCUS_TIMEOUT);\n\n target.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n target.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n },\n };\n }, [target, targetClass]);\n};\n"],"names":["useState","useRef","useEffect","useMemo"],"mappings":";;;;AAEA,MAAM,aAAgB,GAAA,EAAA;AAEf,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAA;AAAA,EACA;AACF,CAKiC,KAAA;AAC/B,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,cAAsB,EAAA;AAElD,EAAA,MAAM,cAAcC,YAAyB,EAAA;AAC7C,EAAA,MAAM,uBAAuBA,YAAgB,EAAA;AAE7C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,uCAAW,OAAS,EAAA;AACtB,MAAA,SAAA,CAAU,UAAU,OAAO,CAAA;AAAA;AAC7B,GACF,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,OAAOC,cAAQ,MAAM;AACnB,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,OAAO,EAAC;AAAA;AAGV,IAAA,MAAM,cAAc,MAAM;AACxB,MAAM,MAAA,QAAA,GAAW,MAAO,CAAA,YAAA,CAAa,UAAU,CAAA;AAC/C,MAAY,WAAA,CAAA,OAAA,GAAU,YAAY,QAAa,KAAA,GAAA;AAE/C,MAAI,IAAA,CAAC,YAAY,OAAS,EAAA;AACxB,QAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA;AAC/B,QAAO,MAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AAAA;AACtC,KACF;AAEA,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,IAAI,CAAC,WAAA,CAAY,OAAW,IAAA,oBAAA,CAAqB,OAAS,EAAA;AACxD,QAAA,MAAA,CAAO,gBAAgB,UAAU,CAAA;AAAA;AACnC,KACF;AAEA,IAAA,MAAM,sBAAsB,MAAM;AAChC,MAAA,oBAAA,CAAqB,OAAU,GAAA,KAAA;AAC/B,MAAO,MAAA,CAAA,SAAA,CAAU,IAAI,WAAW,CAAA;AAAA,KAClC;AAEA,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA;AAC/B,MAAe,cAAA,EAAA;AACf,MAAO,MAAA,CAAA,SAAA,CAAU,OAAO,WAAW,CAAA;AAAA,KACrC;AAEA,IAAO,OAAA;AAAA,MACL,MAAQ,EAAA,MAAM,UAAW,CAAA,cAAA,EAAgB,aAAa,CAAA;AAAA,MACtD,SAAS,MAAM;AACb,QAAY,WAAA,EAAA;AACZ,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,MAAA,CAAO,KAAM,EAAA;AAAA,WACZ,aAAa,CAAA;AAEhB,QAAA,MAAA,CAAO,iBAAiB,OAAS,EAAA,mBAAA,EAAqB,EAAE,IAAA,EAAM,MAAM,CAAA;AACpE,QAAA,MAAA,CAAO,iBAAiB,MAAQ,EAAA,oBAAA,EAAsB,EAAE,IAAA,EAAM,MAAM,CAAA;AAAA;AACtE,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,WAAW,CAAC,CAAA;AAC1B;;;;"}
|
|
@@ -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,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "/* CSS Variables for the Skip Link */\n.saltSkipLink {\n --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit));\n --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit));\n --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background));\n --skipLink-color: var(--saltSkipLink-color, var(--salt-content-primary-foreground));\n}\n\n/* Overrides */\n.saltSkipLink {\n --saltLink-color-focus: var(--skipLink-color);\n}\n\n.saltSkipLink-target {\n --skipLink-target-focus: var(--salt-focused-outline);\n}\n\n/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n display: block;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n opacity: 1;\n width: auto;\n height: auto;\n white-space: nowrap;\n margin: var(--skipLink-margin);\n padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding);\n background: var(--skipLink-background);\n color: var(--skipLink-color);\n box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltSkipLink {\n font-size: var(--salt-text-fontSize);\n font-family: var(--saltSkipLink-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltSkipLink-lineHeight, var(--salt-text-lineHeight));\n}\n\n/*Styles applied to the skip link focus target*/\n.saltSkipLink-target {\n outline: var(--skipLink-target-focus);\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=SkipLink.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SkipLink.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, Link } 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 { useManageFocusOnTarget } from './internal/useManageFocusOnTarget.js';
|
|
8
|
-
import css_248z from './SkipLink.css.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltSkipLink");
|
|
11
|
-
const SkipLink = forwardRef(
|
|
12
|
-
function SkipLink2({ className, targetRef, ...rest }, ref) {
|
|
13
|
-
const targetWindow = useWindow();
|
|
14
|
-
useComponentCssInjection({
|
|
15
|
-
testId: "salt-skip-link",
|
|
16
|
-
css: css_248z,
|
|
17
|
-
window: targetWindow
|
|
18
|
-
});
|
|
19
|
-
const targetClass = clsx(withBaseName("target"), className);
|
|
20
|
-
const eventHandlers = useManageFocusOnTarget({ targetRef, targetClass });
|
|
21
|
-
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
|
|
22
|
-
Link,
|
|
23
|
-
{
|
|
24
|
-
...eventHandlers,
|
|
25
|
-
...rest,
|
|
26
|
-
className: clsx(withBaseName(), className),
|
|
27
|
-
ref
|
|
28
|
-
}
|
|
29
|
-
) });
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
|
|
33
|
-
export { SkipLink };
|
|
34
|
-
//# sourceMappingURL=SkipLink.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { Link, type LinkProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type RefObject, forwardRef } from \"react\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\n\nimport skipLinkCss from \"./SkipLink.css\";\n\ninterface SkipLinkProps extends LinkProps {\n /**\n * This is a ref that has access to the target element.\n *\n * This will be used to apply focus to that element\n *\n * Refs are referentially stable so if this changes it won't be picked up\n * will need to find a better way of passing in the target element to apply the attributes\n */\n targetRef?: RefObject<HTMLElement>;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n function SkipLink({ className, targetRef, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-skip-link\",\n css: skipLinkCss,\n window: targetWindow,\n });\n\n const targetClass = clsx(withBaseName(\"target\"), className);\n\n const eventHandlers = useManageFocusOnTarget({ targetRef, targetClass });\n\n return (\n <li>\n <Link\n {...eventHandlers}\n {...rest}\n className={clsx(withBaseName(), className)}\n ref={ref}\n />\n </li>\n );\n },\n);\n"],"names":["SkipLink","skipLinkCss"],"mappings":";;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,UAAS,EAAE,SAAA,EAAW,WAAW,GAAG,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,WAAc,GAAA,IAAA,CAAK,YAAa,CAAA,QAAQ,GAAG,SAAS,CAAA;AAE1D,IAAA,MAAM,aAAgB,GAAA,sBAAA,CAAuB,EAAE,SAAA,EAAW,aAAa,CAAA;AAEvE,IAAA,2BACG,IACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACE,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC;AAAA;AAAA,KAEJ,EAAA,CAAA;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,57 +0,0 @@
|
|
|
1
|
-
import { useState, useRef, useEffect, useMemo } from 'react';
|
|
2
|
-
|
|
3
|
-
const FOCUS_TIMEOUT = 50;
|
|
4
|
-
const useManageFocusOnTarget = ({
|
|
5
|
-
targetRef,
|
|
6
|
-
targetClass
|
|
7
|
-
}) => {
|
|
8
|
-
const [target, setTarget] = useState();
|
|
9
|
-
const hasTabIndex = useRef();
|
|
10
|
-
const shouldRemoveTabIndex = useRef();
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
if (targetRef == null ? void 0 : targetRef.current) {
|
|
13
|
-
setTarget(targetRef.current);
|
|
14
|
-
}
|
|
15
|
-
}, [targetRef]);
|
|
16
|
-
return useMemo(() => {
|
|
17
|
-
if (!target) {
|
|
18
|
-
return {};
|
|
19
|
-
}
|
|
20
|
-
const addTabIndex = () => {
|
|
21
|
-
const tabIndex = target.getAttribute("tabIndex");
|
|
22
|
-
hasTabIndex.current = tabIndex || tabIndex === "0";
|
|
23
|
-
if (!hasTabIndex.current) {
|
|
24
|
-
shouldRemoveTabIndex.current = true;
|
|
25
|
-
target.setAttribute("tabIndex", "-1");
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
const removeTabIndex = () => {
|
|
29
|
-
if (!hasTabIndex.current && shouldRemoveTabIndex.current) {
|
|
30
|
-
target.removeAttribute("tabIndex");
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
const handleFocusOnTarget = () => {
|
|
34
|
-
shouldRemoveTabIndex.current = false;
|
|
35
|
-
target.classList.add(targetClass);
|
|
36
|
-
};
|
|
37
|
-
const handleBlurFromTarget = () => {
|
|
38
|
-
shouldRemoveTabIndex.current = true;
|
|
39
|
-
removeTabIndex();
|
|
40
|
-
target.classList.remove(targetClass);
|
|
41
|
-
};
|
|
42
|
-
return {
|
|
43
|
-
onBlur: () => setTimeout(removeTabIndex, FOCUS_TIMEOUT),
|
|
44
|
-
onClick: () => {
|
|
45
|
-
addTabIndex();
|
|
46
|
-
setTimeout(() => {
|
|
47
|
-
target.focus();
|
|
48
|
-
}, FOCUS_TIMEOUT);
|
|
49
|
-
target.addEventListener("focus", handleFocusOnTarget, { once: true });
|
|
50
|
-
target.addEventListener("blur", handleBlurFromTarget, { once: true });
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
}, [target, targetClass]);
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
export { useManageFocusOnTarget };
|
|
57
|
-
//# sourceMappingURL=useManageFocusOnTarget.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import { type RefObject, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\nexport const useManageFocusOnTarget = ({\n targetRef,\n targetClass,\n}: {\n targetRef: RefObject<HTMLElement> | undefined;\n targetClass: string;\n}):\n | { onBlur: () => NodeJS.Timeout; onClick: () => void }\n | Record<string, undefined> => {\n const [target, setTarget] = useState<HTMLElement>();\n\n const hasTabIndex = useRef<boolean | string>();\n const shouldRemoveTabIndex = useRef<boolean>();\n\n useEffect(() => {\n if (targetRef?.current) {\n setTarget(targetRef.current);\n }\n }, [targetRef]);\n\n return useMemo(() => {\n if (!target) {\n return {};\n }\n\n const addTabIndex = () => {\n const tabIndex = target.getAttribute(\"tabIndex\");\n hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n if (!hasTabIndex.current) {\n shouldRemoveTabIndex.current = true;\n target.setAttribute(\"tabIndex\", \"-1\");\n }\n };\n\n const removeTabIndex = () => {\n if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n target.removeAttribute(\"tabIndex\");\n }\n };\n\n const handleFocusOnTarget = () => {\n shouldRemoveTabIndex.current = false;\n target.classList.add(targetClass);\n };\n\n const handleBlurFromTarget = () => {\n shouldRemoveTabIndex.current = true;\n removeTabIndex();\n target.classList.remove(targetClass);\n };\n\n return {\n onBlur: () => setTimeout(removeTabIndex, FOCUS_TIMEOUT),\n onClick: () => {\n addTabIndex();\n setTimeout(() => {\n target.focus();\n }, FOCUS_TIMEOUT);\n\n target.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n target.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n },\n };\n }, [target, targetClass]);\n};\n"],"names":[],"mappings":";;AAEA,MAAM,aAAgB,GAAA,EAAA;AAEf,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAA;AAAA,EACA;AACF,CAKiC,KAAA;AAC/B,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,QAAsB,EAAA;AAElD,EAAA,MAAM,cAAc,MAAyB,EAAA;AAC7C,EAAA,MAAM,uBAAuB,MAAgB,EAAA;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,uCAAW,OAAS,EAAA;AACtB,MAAA,SAAA,CAAU,UAAU,OAAO,CAAA;AAAA;AAC7B,GACF,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,OAAO,EAAC;AAAA;AAGV,IAAA,MAAM,cAAc,MAAM;AACxB,MAAM,MAAA,QAAA,GAAW,MAAO,CAAA,YAAA,CAAa,UAAU,CAAA;AAC/C,MAAY,WAAA,CAAA,OAAA,GAAU,YAAY,QAAa,KAAA,GAAA;AAE/C,MAAI,IAAA,CAAC,YAAY,OAAS,EAAA;AACxB,QAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA;AAC/B,QAAO,MAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AAAA;AACtC,KACF;AAEA,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,IAAI,CAAC,WAAA,CAAY,OAAW,IAAA,oBAAA,CAAqB,OAAS,EAAA;AACxD,QAAA,MAAA,CAAO,gBAAgB,UAAU,CAAA;AAAA;AACnC,KACF;AAEA,IAAA,MAAM,sBAAsB,MAAM;AAChC,MAAA,oBAAA,CAAqB,OAAU,GAAA,KAAA;AAC/B,MAAO,MAAA,CAAA,SAAA,CAAU,IAAI,WAAW,CAAA;AAAA,KAClC;AAEA,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA;AAC/B,MAAe,cAAA,EAAA;AACf,MAAO,MAAA,CAAA,SAAA,CAAU,OAAO,WAAW,CAAA;AAAA,KACrC;AAEA,IAAO,OAAA;AAAA,MACL,MAAQ,EAAA,MAAM,UAAW,CAAA,cAAA,EAAgB,aAAa,CAAA;AAAA,MACtD,SAAS,MAAM;AACb,QAAY,WAAA,EAAA;AACZ,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,MAAA,CAAO,KAAM,EAAA;AAAA,WACZ,aAAa,CAAA;AAEhB,QAAA,MAAA,CAAO,iBAAiB,OAAS,EAAA,mBAAA,EAAqB,EAAE,IAAA,EAAM,MAAM,CAAA;AACpE,QAAA,MAAA,CAAO,iBAAiB,MAAQ,EAAA,oBAAA,EAAsB,EAAE,IAAA,EAAM,MAAM,CAAA;AAAA;AACtE,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,WAAW,CAAC,CAAA;AAC1B;;;;"}
|
|
@@ -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
|