@salt-ds/lab 1.0.0-alpha.29 → 1.0.0-alpha.30
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/css/salt-lab.css +35 -8
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.css.js +1 -1
- package/dist-cjs/stepped-tracker/SteppedTracker.css.js +1 -1
- package/dist-cjs/stepped-tracker/SteppedTracker.js +8 -2
- package/dist-cjs/stepped-tracker/SteppedTracker.js.map +1 -1
- package/dist-cjs/stepped-tracker/SteppedTrackerContext.js.map +1 -1
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.css.js +1 -1
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.js.map +1 -1
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js +1 -1
- package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js +1 -1
- package/dist-es/stepped-tracker/SteppedTracker.css.js +1 -1
- package/dist-es/stepped-tracker/SteppedTracker.js +8 -2
- package/dist-es/stepped-tracker/SteppedTracker.js.map +1 -1
- package/dist-es/stepped-tracker/SteppedTrackerContext.js.map +1 -1
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js +1 -1
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.js.map +1 -1
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js +1 -1
- package/dist-types/stepped-tracker/SteppedTracker.d.ts +4 -0
- package/dist-types/stepped-tracker/SteppedTrackerContext.d.ts +5 -5
- package/dist-types/stepped-tracker/TrackerConnector/TrackerConnector.d.ts +2 -2
- package/package.json +2 -2
package/css/salt-lab.css
CHANGED
|
@@ -2785,10 +2785,15 @@
|
|
|
2785
2785
|
text-indent: 0;
|
|
2786
2786
|
list-style-type: none;
|
|
2787
2787
|
display: flex;
|
|
2788
|
-
flex-direction: row;
|
|
2789
2788
|
width: 100%;
|
|
2790
2789
|
position: relative;
|
|
2791
2790
|
}
|
|
2791
|
+
.saltSteppedTracker.saltSteppedTracker-horizontal {
|
|
2792
|
+
flex-direction: row;
|
|
2793
|
+
}
|
|
2794
|
+
.saltSteppedTracker.saltSteppedTracker-vertical {
|
|
2795
|
+
flex-direction: column;
|
|
2796
|
+
}
|
|
2792
2797
|
|
|
2793
2798
|
/* src/stepper-input/StepperInput.css */
|
|
2794
2799
|
.salt-density-medium {
|
|
@@ -4288,8 +4293,13 @@
|
|
|
4288
4293
|
/* src/stepped-tracker/StepLabel/StepLabel.css */
|
|
4289
4294
|
.saltStepLabel {
|
|
4290
4295
|
width: 100%;
|
|
4296
|
+
}
|
|
4297
|
+
.saltSteppedTracker.saltSteppedTracker-horizontal .saltStepLabel {
|
|
4291
4298
|
text-align: center;
|
|
4292
4299
|
}
|
|
4300
|
+
.saltSteppedTracker.saltSteppedTracker-vertical .saltStepLabel {
|
|
4301
|
+
text-align: left;
|
|
4302
|
+
}
|
|
4293
4303
|
|
|
4294
4304
|
/* src/stepped-tracker/TrackerConnector/TrackerConnector.css */
|
|
4295
4305
|
.saltTrackerConnector {
|
|
@@ -4298,19 +4308,30 @@
|
|
|
4298
4308
|
--trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-palette-neutral-secondary-border));
|
|
4299
4309
|
--trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-size-border-strong));
|
|
4300
4310
|
--trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));
|
|
4311
|
+
--trackerConnector-style-border: var(--trackerConnector-style-default);
|
|
4301
4312
|
}
|
|
4302
4313
|
.saltTrackerConnector {
|
|
4303
|
-
|
|
4314
|
+
position: absolute;
|
|
4315
|
+
}
|
|
4316
|
+
.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerConnector {
|
|
4304
4317
|
border-top-width: var(--trackerConnector-thickness);
|
|
4305
|
-
border-top-style: var(--trackerConnector-style-
|
|
4318
|
+
border-top-style: var(--trackerConnector-style-border);
|
|
4306
4319
|
border-top-color: var(--trackerConnector-color);
|
|
4307
|
-
position: absolute;
|
|
4308
4320
|
width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));
|
|
4309
4321
|
left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));
|
|
4310
4322
|
top: calc(var(--saltIcon-size) / 2 - (var(--trackerConnector-thickness) / 2));
|
|
4323
|
+
height: 0;
|
|
4324
|
+
}
|
|
4325
|
+
.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerConnector {
|
|
4326
|
+
top: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));
|
|
4327
|
+
left: calc((var(--saltIcon-size) / 2) - (var(--trackerConnector-thickness) / 2));
|
|
4328
|
+
height: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));
|
|
4329
|
+
border-left-width: var(--trackerConnector-thickness);
|
|
4330
|
+
border-left-style: var(--trackerConnector-style-border);
|
|
4331
|
+
border-left-color: var(--trackerConnector-color);
|
|
4311
4332
|
}
|
|
4312
4333
|
.saltTrackerConnector.saltTrackerConnector-active {
|
|
4313
|
-
|
|
4334
|
+
--trackerConnector-style-border: var(--trackerConnector-style-active);
|
|
4314
4335
|
}
|
|
4315
4336
|
|
|
4316
4337
|
/* src/stepped-tracker/TrackerStep/TrackerStep.css */
|
|
@@ -4323,21 +4344,27 @@
|
|
|
4323
4344
|
}
|
|
4324
4345
|
.saltTrackerStep {
|
|
4325
4346
|
margin: 0;
|
|
4326
|
-
padding: 0;
|
|
4327
4347
|
text-indent: 0;
|
|
4328
4348
|
list-style-type: none;
|
|
4329
4349
|
flex: 1;
|
|
4330
4350
|
position: relative;
|
|
4331
4351
|
display: flex;
|
|
4332
4352
|
align-items: center;
|
|
4333
|
-
flex-direction: column;
|
|
4334
4353
|
width: var(--saltTrackerStep-width, 100%);
|
|
4335
4354
|
gap: var(--salt-spacing-50);
|
|
4336
4355
|
color: var(--salt-content-primary-foreground);
|
|
4337
4356
|
font-size: var(--salt-text-label-fontSize);
|
|
4338
4357
|
line-height: var(--salt-text-label-lineHeight);
|
|
4358
|
+
}
|
|
4359
|
+
.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerStep {
|
|
4360
|
+
flex-direction: column;
|
|
4339
4361
|
padding: 0 var(--salt-spacing-25);
|
|
4340
4362
|
}
|
|
4363
|
+
.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep {
|
|
4364
|
+
flex-direction: row;
|
|
4365
|
+
min-height: calc(var(--salt-size-base) * 2);
|
|
4366
|
+
width: 100%;
|
|
4367
|
+
}
|
|
4341
4368
|
.saltTrackerStep:focus-visible {
|
|
4342
4369
|
outline-style: var(--salt-focused-outlineStyle);
|
|
4343
4370
|
outline-width: var(--salt-focused-outlineWidth);
|
|
@@ -4453,4 +4480,4 @@
|
|
|
4453
4480
|
margin: calc(var(--salt-size-unit) / 2) 0;
|
|
4454
4481
|
}
|
|
4455
4482
|
|
|
4456
|
-
/* src/
|
|
4483
|
+
/* src/f810c73d-a24a-4a6f-a7cf-379b59798ff0.css */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltStepLabel {\n width: 100%;\n text-align: center;\n}\n";
|
|
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
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=StepLabel.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltSteppedTracker {\n margin: 0;\n padding: 0;\n text-indent: 0;\n list-style-type: none;\n display: flex;\n flex-direction: row;\n
|
|
3
|
+
var css_248z = ".saltSteppedTracker {\n margin: 0;\n padding: 0;\n text-indent: 0;\n list-style-type: none;\n display: flex;\n width: 100%;\n position: relative;\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal {\n flex-direction: row;\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical {\n flex-direction: column;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=SteppedTracker.css.js.map
|
|
@@ -30,7 +30,13 @@ const useCheckInvalidChildren = (children) => {
|
|
|
30
30
|
}, [children]);
|
|
31
31
|
};
|
|
32
32
|
const SteppedTracker = React.forwardRef(
|
|
33
|
-
function SteppedTracker2({
|
|
33
|
+
function SteppedTracker2({
|
|
34
|
+
children,
|
|
35
|
+
className,
|
|
36
|
+
activeStep,
|
|
37
|
+
orientation = "horizontal",
|
|
38
|
+
...restProps
|
|
39
|
+
}, ref) {
|
|
34
40
|
const targetWindow = window.useWindow();
|
|
35
41
|
styles.useComponentCssInjection({
|
|
36
42
|
testId: "salt-stepped-tracker",
|
|
@@ -43,7 +49,7 @@ const SteppedTracker = React.forwardRef(
|
|
|
43
49
|
totalSteps,
|
|
44
50
|
activeStep,
|
|
45
51
|
children: /* @__PURE__ */ jsxRuntime.jsx("ul", {
|
|
46
|
-
className: clsx.clsx(withBaseName(), className),
|
|
52
|
+
className: clsx.clsx(withBaseName(), className, withBaseName(orientation)),
|
|
47
53
|
ref,
|
|
48
54
|
...restProps,
|
|
49
55
|
children: React.Children.map(children, (child, i) => /* @__PURE__ */ jsxRuntime.jsx(SteppedTrackerContext.TrackerStepProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SteppedTracker.js","sources":["../src/stepped-tracker/SteppedTracker.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactElement,\n ReactNode,\n Children,\n isValidElement,\n useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport {\n SteppedTrackerProvider,\n TrackerStepProvider,\n} from \"./SteppedTrackerContext\";\n\nimport steppedTrackerCss from \"./SteppedTracker.css\";\n\nconst withBaseName = makePrefixer(\"saltSteppedTracker\");\n\nexport interface SteppedTrackerProps extends ComponentPropsWithoutRef<\"ul\"> {\n /**\n * The index of the current activeStep\n */\n activeStep: number;\n /**\n * Should be one or more TrackerStep components\n */\n children: ReactNode;\n}\n\nconst useCheckInvalidChildren = (children: ReactNode) => {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n let hasInvalidChild = false;\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) {\n hasInvalidChild = true;\n }\n });\n\n if (hasInvalidChild) {\n console.error(\n \"Invalid child: children of SteppedTracker must be a TrackerStep component\"\n );\n }\n }\n }, [children]);\n};\n\nexport const SteppedTracker = forwardRef<HTMLUListElement, SteppedTrackerProps>(\n function SteppedTracker(\n {
|
|
1
|
+
{"version":3,"file":"SteppedTracker.js","sources":["../src/stepped-tracker/SteppedTracker.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactElement,\n ReactNode,\n Children,\n isValidElement,\n useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport {\n SteppedTrackerProvider,\n TrackerStepProvider,\n} from \"./SteppedTrackerContext\";\n\nimport steppedTrackerCss from \"./SteppedTracker.css\";\n\nconst withBaseName = makePrefixer(\"saltSteppedTracker\");\n\nexport interface SteppedTrackerProps extends ComponentPropsWithoutRef<\"ul\"> {\n /**\n * The index of the current activeStep\n */\n activeStep: number;\n /**\n * Should be one or more TrackerStep components\n */\n children: ReactNode;\n /**\n * The orientation of the SteppedTracker. Defaults to `horizontal`\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst useCheckInvalidChildren = (children: ReactNode) => {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n let hasInvalidChild = false;\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) {\n hasInvalidChild = true;\n }\n });\n\n if (hasInvalidChild) {\n console.error(\n \"Invalid child: children of SteppedTracker must be a TrackerStep component\"\n );\n }\n }\n }, [children]);\n};\n\nexport const SteppedTracker = forwardRef<HTMLUListElement, SteppedTrackerProps>(\n function SteppedTracker(\n {\n children,\n className,\n activeStep,\n orientation = \"horizontal\",\n ...restProps\n },\n ref\n ): ReactElement<SteppedTrackerProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-stepped-tracker\",\n css: steppedTrackerCss,\n window: targetWindow,\n });\n useCheckInvalidChildren(children);\n\n const totalSteps = Children.count(children);\n\n return (\n <SteppedTrackerProvider totalSteps={totalSteps} activeStep={activeStep}>\n <ul\n className={clsx(withBaseName(), className, withBaseName(orientation))}\n ref={ref}\n {...restProps}\n >\n {Children.map(children, (child, i) => (\n <TrackerStepProvider stepNumber={i}>{child}</TrackerStepProvider>\n ))}\n </ul>\n </SteppedTrackerProvider>\n );\n }\n);\n"],"names":["makePrefixer","useEffect","Children","isValidElement","forwardRef","SteppedTracker","useWindow","useComponentCssInjection","steppedTrackerCss","jsx","SteppedTrackerProvider","clsx","TrackerStepProvider"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA,CAAA;AAiBtD,MAAM,uBAAA,GAA0B,CAAC,QAAwB,KAAA;AACvD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAA,IAAI,eAAkB,GAAA,KAAA,CAAA;AACtB,MAASC,cAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,KAAU,KAAA;AACpC,QAAI,IAAA,CAACC,oBAAe,CAAA,KAAK,CAAG,EAAA;AAC1B,UAAkB,eAAA,GAAA,IAAA,CAAA;AAAA,SACpB;AAAA,OACD,CAAA,CAAA;AAED,MAAA,IAAI,eAAiB,EAAA;AACnB,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN,2EAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AACf,CAAA,CAAA;AAEO,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAc,GAAA,YAAA;AAAA,IACX,GAAA,SAAA;AAAA,KAEL,GACmC,EAAA;AACnC,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,uBAAA,CAAwB,QAAQ,CAAA,CAAA;AAEhC,IAAM,MAAA,UAAA,GAAaN,cAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAE1C,IAAA,uBACGO,cAAA,CAAAC,4CAAA,EAAA;AAAA,MAAuB,UAAA;AAAA,MAAwB,UAAA;AAAA,MAC9C,QAAC,kBAAAD,cAAA,CAAA,IAAA,EAAA;AAAA,QACC,WAAWE,SAAK,CAAA,YAAA,IAAgB,SAAW,EAAA,YAAA,CAAa,WAAW,CAAC,CAAA;AAAA,QACpE,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,yBAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAA,EAAO,sBAC7BF,cAAA,CAAAG,yCAAA,EAAA;AAAA,UAAoB,UAAY,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAC5C,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SteppedTrackerContext.js","sources":["../src/stepped-tracker/SteppedTrackerContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useMemo } from \"react\";\n\nexport
|
|
1
|
+
{"version":3,"file":"SteppedTrackerContext.js","sources":["../src/stepped-tracker/SteppedTrackerContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, 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","jsx","useContext"],"mappings":";;;;;;;AAQA,MAAM,4BAA+B,GAAA;AAAA,EACnC,UAAY,EAAA,CAAA;AAAA,EACZ,UAAY,EAAA,CAAA;AAAA,EACZ,sBAAwB,EAAA,KAAA;AAC1B,CAAA,CAAA;AAEA,MAAM,qBAAwB,GAAAA,mBAAA;AAAA,EAC5B,4BAAA;AACF,CAAA,CAAA;AASO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,0BAAwD,GAAAC,aAAA;AAAA,IAC5D,OAAO;AAAA,MACL,UAAA;AAAA,MACA,UAAA;AAAA,MACA,sBAAwB,EAAA,IAAA;AAAA,KAC1B,CAAA;AAAA,IACA,CAAC,YAAY,UAAU,CAAA;AAAA,GACzB,CAAA;AAEA,EACE,uBAAAC,cAAA,CAAC,sBAAsB,QAAtB,EAAA;AAAA,IAA+B,KAAO,EAAA,0BAAA;AAAA,IACpC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,wBAAA,GAA2B,MAAMC,gBAAA,CAAW,qBAAqB,EAAA;AAI9E,MAAM,kBAAA,GAAqBH,oBAA4C,CAAC,CAAA,CAAA;AAE3D,MAAA,qBAAA,GAAwB,MAAMG,gBAAA,CAAW,kBAAkB,EAAA;AAOjE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,UAAA;AACF,CAAgC,KAAA;AAC9B,EACE,uBAAAD,cAAA,CAAC,mBAAmB,QAAnB,EAAA;AAAA,IAA4B,KAAO,EAAA,UAAA;AAAA,IACjC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
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-palette-neutral-secondary-border));\n --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-size-border-strong));\n --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));\n}\n\n.saltTrackerConnector {\n
|
|
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-palette-neutral-secondary-border));\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
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=TrackerConnector.css.js.map
|
|
@@ -1 +1 @@
|
|
|
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\
|
|
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,CAAA;AAWjD,MAAM,gBAAmB,GAAA,CAAC,EAAE,KAAA,EAAmC,KAAA;AACpE,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBAAQC,cAAA,CAAA,MAAA,EAAA;AAAA,IAAK,WAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA,YAAA,CAAa,KAAK,CAAC,CAAA;AAAA,GAAG,CAAA,CAAA;AACrE;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltTrackerStep {\n --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\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
|
|
3
|
+
var css_248z = ".saltTrackerStep {\n --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\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-active {\n --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=TrackerStep.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltStepLabel {\n width: 100%;\n text-align: center;\n}\n";
|
|
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
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=StepLabel.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltSteppedTracker {\n margin: 0;\n padding: 0;\n text-indent: 0;\n list-style-type: none;\n display: flex;\n flex-direction: row;\n
|
|
1
|
+
var css_248z = ".saltSteppedTracker {\n margin: 0;\n padding: 0;\n text-indent: 0;\n list-style-type: none;\n display: flex;\n width: 100%;\n position: relative;\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal {\n flex-direction: row;\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical {\n flex-direction: column;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=SteppedTracker.css.js.map
|
|
@@ -26,7 +26,13 @@ const useCheckInvalidChildren = (children) => {
|
|
|
26
26
|
}, [children]);
|
|
27
27
|
};
|
|
28
28
|
const SteppedTracker = forwardRef(
|
|
29
|
-
function SteppedTracker2({
|
|
29
|
+
function SteppedTracker2({
|
|
30
|
+
children,
|
|
31
|
+
className,
|
|
32
|
+
activeStep,
|
|
33
|
+
orientation = "horizontal",
|
|
34
|
+
...restProps
|
|
35
|
+
}, ref) {
|
|
30
36
|
const targetWindow = useWindow();
|
|
31
37
|
useComponentCssInjection({
|
|
32
38
|
testId: "salt-stepped-tracker",
|
|
@@ -39,7 +45,7 @@ const SteppedTracker = forwardRef(
|
|
|
39
45
|
totalSteps,
|
|
40
46
|
activeStep,
|
|
41
47
|
children: /* @__PURE__ */ jsx("ul", {
|
|
42
|
-
className: clsx(withBaseName(), className),
|
|
48
|
+
className: clsx(withBaseName(), className, withBaseName(orientation)),
|
|
43
49
|
ref,
|
|
44
50
|
...restProps,
|
|
45
51
|
children: Children.map(children, (child, i) => /* @__PURE__ */ jsx(TrackerStepProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SteppedTracker.js","sources":["../src/stepped-tracker/SteppedTracker.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactElement,\n ReactNode,\n Children,\n isValidElement,\n useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport {\n SteppedTrackerProvider,\n TrackerStepProvider,\n} from \"./SteppedTrackerContext\";\n\nimport steppedTrackerCss from \"./SteppedTracker.css\";\n\nconst withBaseName = makePrefixer(\"saltSteppedTracker\");\n\nexport interface SteppedTrackerProps extends ComponentPropsWithoutRef<\"ul\"> {\n /**\n * The index of the current activeStep\n */\n activeStep: number;\n /**\n * Should be one or more TrackerStep components\n */\n children: ReactNode;\n}\n\nconst useCheckInvalidChildren = (children: ReactNode) => {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n let hasInvalidChild = false;\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) {\n hasInvalidChild = true;\n }\n });\n\n if (hasInvalidChild) {\n console.error(\n \"Invalid child: children of SteppedTracker must be a TrackerStep component\"\n );\n }\n }\n }, [children]);\n};\n\nexport const SteppedTracker = forwardRef<HTMLUListElement, SteppedTrackerProps>(\n function SteppedTracker(\n {
|
|
1
|
+
{"version":3,"file":"SteppedTracker.js","sources":["../src/stepped-tracker/SteppedTracker.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactElement,\n ReactNode,\n Children,\n isValidElement,\n useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport {\n SteppedTrackerProvider,\n TrackerStepProvider,\n} from \"./SteppedTrackerContext\";\n\nimport steppedTrackerCss from \"./SteppedTracker.css\";\n\nconst withBaseName = makePrefixer(\"saltSteppedTracker\");\n\nexport interface SteppedTrackerProps extends ComponentPropsWithoutRef<\"ul\"> {\n /**\n * The index of the current activeStep\n */\n activeStep: number;\n /**\n * Should be one or more TrackerStep components\n */\n children: ReactNode;\n /**\n * The orientation of the SteppedTracker. Defaults to `horizontal`\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst useCheckInvalidChildren = (children: ReactNode) => {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n let hasInvalidChild = false;\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) {\n hasInvalidChild = true;\n }\n });\n\n if (hasInvalidChild) {\n console.error(\n \"Invalid child: children of SteppedTracker must be a TrackerStep component\"\n );\n }\n }\n }, [children]);\n};\n\nexport const SteppedTracker = forwardRef<HTMLUListElement, SteppedTrackerProps>(\n function SteppedTracker(\n {\n children,\n className,\n activeStep,\n orientation = \"horizontal\",\n ...restProps\n },\n ref\n ): ReactElement<SteppedTrackerProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-stepped-tracker\",\n css: steppedTrackerCss,\n window: targetWindow,\n });\n useCheckInvalidChildren(children);\n\n const totalSteps = Children.count(children);\n\n return (\n <SteppedTrackerProvider totalSteps={totalSteps} activeStep={activeStep}>\n <ul\n className={clsx(withBaseName(), className, withBaseName(orientation))}\n ref={ref}\n {...restProps}\n >\n {Children.map(children, (child, i) => (\n <TrackerStepProvider stepNumber={i}>{child}</TrackerStepProvider>\n ))}\n </ul>\n </SteppedTrackerProvider>\n );\n }\n);\n"],"names":["SteppedTracker","steppedTrackerCss"],"mappings":";;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAiBtD,MAAM,uBAAA,GAA0B,CAAC,QAAwB,KAAA;AACvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAA,IAAI,eAAkB,GAAA,KAAA,CAAA;AACtB,MAAS,QAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,KAAU,KAAA;AACpC,QAAI,IAAA,CAAC,cAAe,CAAA,KAAK,CAAG,EAAA;AAC1B,UAAkB,eAAA,GAAA,IAAA,CAAA;AAAA,SACpB;AAAA,OACD,CAAA,CAAA;AAED,MAAA,IAAI,eAAiB,EAAA;AACnB,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN,2EAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AACf,CAAA,CAAA;AAEO,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAc,GAAA,YAAA;AAAA,IACX,GAAA,SAAA;AAAA,KAEL,GACmC,EAAA;AACnC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,uBAAA,CAAwB,QAAQ,CAAA,CAAA;AAEhC,IAAM,MAAA,UAAA,GAAa,QAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAE1C,IAAA,uBACG,GAAA,CAAA,sBAAA,EAAA;AAAA,MAAuB,UAAA;AAAA,MAAwB,UAAA;AAAA,MAC9C,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,WAAW,IAAK,CAAA,YAAA,IAAgB,SAAW,EAAA,YAAA,CAAa,WAAW,CAAC,CAAA;AAAA,QACpE,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,mBAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAA,EAAO,sBAC7B,GAAA,CAAA,mBAAA,EAAA;AAAA,UAAoB,UAAY,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAC5C,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SteppedTrackerContext.js","sources":["../src/stepped-tracker/SteppedTrackerContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useMemo } from \"react\";\n\nexport
|
|
1
|
+
{"version":3,"file":"SteppedTrackerContext.js","sources":["../src/stepped-tracker/SteppedTrackerContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, 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,KAAA;AAC1B,CAAA,CAAA;AAEA,MAAM,qBAAwB,GAAA,aAAA;AAAA,EAC5B,4BAAA;AACF,CAAA,CAAA;AASO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,0BAAwD,GAAA,OAAA;AAAA,IAC5D,OAAO;AAAA,MACL,UAAA;AAAA,MACA,UAAA;AAAA,MACA,sBAAwB,EAAA,IAAA;AAAA,KAC1B,CAAA;AAAA,IACA,CAAC,YAAY,UAAU,CAAA;AAAA,GACzB,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,sBAAsB,QAAtB,EAAA;AAAA,IAA+B,KAAO,EAAA,0BAAA;AAAA,IACpC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,wBAAA,GAA2B,MAAM,UAAA,CAAW,qBAAqB,EAAA;AAI9E,MAAM,kBAAA,GAAqB,cAA4C,CAAC,CAAA,CAAA;AAE3D,MAAA,qBAAA,GAAwB,MAAM,UAAA,CAAW,kBAAkB,EAAA;AAOjE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,UAAA;AACF,CAAgC,KAAA;AAC9B,EACE,uBAAA,GAAA,CAAC,mBAAmB,QAAnB,EAAA;AAAA,IAA4B,KAAO,EAAA,UAAA;AAAA,IACjC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
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-palette-neutral-secondary-border));\n --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-size-border-strong));\n --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));\n}\n\n.saltTrackerConnector {\n
|
|
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-palette-neutral-secondary-border));\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
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=TrackerConnector.css.js.map
|
|
@@ -1 +1 @@
|
|
|
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\
|
|
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,CAAA;AAWjD,MAAM,gBAAmB,GAAA,CAAC,EAAE,KAAA,EAAmC,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBAAQ,GAAA,CAAA,MAAA,EAAA;AAAA,IAAK,WAAW,IAAK,CAAA,YAAA,EAAgB,EAAA,YAAA,CAAa,KAAK,CAAC,CAAA;AAAA,GAAG,CAAA,CAAA;AACrE;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltTrackerStep {\n --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\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
|
|
1
|
+
var css_248z = ".saltTrackerStep {\n --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\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-active {\n --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=TrackerStep.css.js.map
|
|
@@ -8,5 +8,9 @@ export interface SteppedTrackerProps extends ComponentPropsWithoutRef<"ul"> {
|
|
|
8
8
|
* Should be one or more TrackerStep components
|
|
9
9
|
*/
|
|
10
10
|
children: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* The orientation of the SteppedTracker. Defaults to `horizontal`
|
|
13
|
+
*/
|
|
14
|
+
orientation?: "horizontal" | "vertical";
|
|
11
15
|
}
|
|
12
16
|
export declare const SteppedTracker: import("react").ForwardRefExoticComponent<SteppedTrackerProps & import("react").RefAttributes<HTMLUListElement>>;
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
-
export
|
|
2
|
+
export interface SteppedTrackerContextType {
|
|
3
3
|
activeStep: number;
|
|
4
4
|
totalSteps: number;
|
|
5
5
|
isWithinSteppedTracker: boolean;
|
|
6
|
-
}
|
|
6
|
+
}
|
|
7
7
|
declare type SteppedTrackerProviderProps = Omit<SteppedTrackerContextType, "isWithinSteppedTracker"> & {
|
|
8
8
|
children: ReactNode;
|
|
9
9
|
};
|
|
10
10
|
export declare const SteppedTrackerProvider: ({ activeStep, totalSteps, children, }: SteppedTrackerProviderProps) => JSX.Element;
|
|
11
11
|
export declare const useSteppedTrackerContext: () => SteppedTrackerContextType;
|
|
12
12
|
export declare const useTrackerStepContext: () => number;
|
|
13
|
-
|
|
13
|
+
interface TrackerStepProviderProps {
|
|
14
14
|
stepNumber: number;
|
|
15
15
|
children: ReactNode;
|
|
16
|
-
}
|
|
17
|
-
export declare const TrackerStepProvider: ({ children, stepNumber, }:
|
|
16
|
+
}
|
|
17
|
+
export declare const TrackerStepProvider: ({ children, stepNumber, }: TrackerStepProviderProps) => JSX.Element;
|
|
18
18
|
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
declare type ConnectorState = "default" | "active";
|
|
2
|
-
|
|
2
|
+
interface TrackerConnectorProps {
|
|
3
3
|
/**
|
|
4
4
|
* The state of the connector, which acts as an indicator of whether the active step is ahead/behind
|
|
5
5
|
*/
|
|
6
6
|
state: ConnectorState;
|
|
7
|
-
}
|
|
7
|
+
}
|
|
8
8
|
export declare const TrackerConnector: ({ state }: TrackerConnectorProps) => JSX.Element;
|
|
9
9
|
export {};
|
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.30",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react-window": "^1.8.6",
|
|
27
27
|
"rifm": "^0.12.0",
|
|
28
28
|
"tinycolor2": "^1.4.2",
|
|
29
|
-
"@salt-ds/core": "^1.16.
|
|
29
|
+
"@salt-ds/core": "^1.16.1",
|
|
30
30
|
"@salt-ds/window": "^0.1.1",
|
|
31
31
|
"@salt-ds/styles": "^0.2.1",
|
|
32
32
|
"@salt-ds/icons": "^1.9.1"
|