@neo4j-ndl/react 3.3.15 → 3.3.17
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/lib/cjs/button/Button.js +3 -1
- package/lib/cjs/button/Button.js.map +1 -1
- package/lib/cjs/wizard/Wizard.js +16 -8
- package/lib/cjs/wizard/Wizard.js.map +1 -1
- package/lib/esm/button/Button.js +3 -1
- package/lib/esm/button/Button.js.map +1 -1
- package/lib/esm/wizard/Wizard.js +16 -8
- package/lib/esm/wizard/Wizard.js.map +1 -1
- package/lib/types/wizard/Wizard.d.ts +14 -1
- package/package.json +2 -2
package/lib/cjs/button/Button.js
CHANGED
|
@@ -82,7 +82,9 @@ exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
|
|
|
82
82
|
[`
|
|
83
83
|
n-text-palette-neutral-text-weak
|
|
84
84
|
n-bg-palette-${color}-weak
|
|
85
|
-
${isInteractable && `hover:n-bg-palette
|
|
85
|
+
${isInteractable && color === 'primary' && `hover:n-bg-palette-primary-hover-weak`}
|
|
86
|
+
${isInteractable && color === 'danger' && `hover:n-bg-palette-danger-hover-weak`}
|
|
87
|
+
${isInteractable && color === 'neutral' && `hover:n-bg-palette-neutral-hover`}
|
|
86
88
|
n-border-palette-neutral-border-strong
|
|
87
89
|
active:n-bg-palette-neutral-pressed
|
|
88
90
|
`]: fill === 'outlined' && color === 'neutral',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,kDAA0B;AAE1B,8DAAuD;AACvD,4CAAgE;AAChE,wDAAoD;AAkEvC,QAAA,MAAM,GAGf,eAAK,CAAC,UAAU,CAAC,SAAS,MAAM,CAClC,EAe6C,EAC7C,GAAsB;QAhBtB,EACE,QAAQ,EACR,EAAE,EACF,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,SAAS,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,KAAK,EACL,cAAc,OAE6B,EADxC,SAAS,cAdd,+IAeC,CADa;IAId,MAAM,SAAS,GAAsB,EAAE,IAAI,QAAQ,CAAC;IAEpD,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,MAAM,OAAO,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE;QACpC,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,cAAc,EAAE,IAAI,KAAK,UAAU;QACnC,UAAU,EAAE,IAAI,KAAK,MAAM;QAC3B,cAAc,EAAE,UAAU;QAC1B,aAAa,EAAE,SAAS;QACxB,kBAAkB,EAAE,UAAU;QAC9B,6CAA6C;QAC7C;;;;WAIG;QACH,CAAC;QAEG,KAAK,KAAK,SAAS;YACjB,CAAC,CAAC,gBAAgB,KAAK,eAAe;YACtC,CAAC,CAAC,gBAAgB,KAAK,YAC3B;QAEE,cAAc;YACd,sBAAsB,KAAK;+BACJ,KAAK,iBAC9B;OACC,CAAC,EAAE,IAAI,KAAK,QAAQ;QACvB,CAAC;uBACkB,KAAK;QAEpB,cAAc;YACd,sBAAsB,KAAK;8BACL,KAAK,eAC7B;yBACmB,KAAK;OACvB,CAAC,EAAE,IAAI,KAAK,UAAU,IAAI,KAAK,KAAK,SAAS;QAChD;;;WAGG;QACH,CAAC;;qBAEgB,KAAK;QAClB,cAAc,IAAI,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"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"}
|
package/lib/cjs/wizard/Wizard.js
CHANGED
|
@@ -48,7 +48,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
48
48
|
const react_1 = __importStar(require("react"));
|
|
49
49
|
const defaultImports_1 = require("../_common/defaultImports");
|
|
50
50
|
const typography_1 = require("../typography");
|
|
51
|
-
exports.Wizard = react_1.default.forwardRef(function Wizard({ as, className, style, size = 'large', steps, activeStepIndex, orientation, htmlAttributes, }, ref) {
|
|
51
|
+
exports.Wizard = react_1.default.forwardRef(function Wizard({ as, className, style, size = 'large', steps, activeStepIndex, orientation, htmlAttributes, alignment = orientation === 'vertical' ? 'top' : 'middle', }, ref) {
|
|
52
52
|
(0, react_1.useEffect)(() => {
|
|
53
53
|
if (activeStepIndex > steps.length - 1 || activeStepIndex < 0) {
|
|
54
54
|
console.warn(`[🪡 Needle]: The activeStepIndex in Wizard is out of bounds. The activeStepIndex is ${activeStepIndex} and the number of steps is ${steps.length}.`);
|
|
@@ -56,9 +56,9 @@ exports.Wizard = react_1.default.forwardRef(function Wizard({ as, className, sty
|
|
|
56
56
|
}, [activeStepIndex, steps.length]);
|
|
57
57
|
switch (size) {
|
|
58
58
|
case 'small':
|
|
59
|
-
return ((0, jsx_runtime_1.jsx)(exports.WizardSmall, { as: as, orientation: orientation, style: style, className: className, steps: steps, activeStepIndex: activeStepIndex, ref: ref, htmlAttributes: htmlAttributes }));
|
|
59
|
+
return ((0, jsx_runtime_1.jsx)(exports.WizardSmall, { as: as, orientation: orientation, style: style, className: className, steps: steps, activeStepIndex: activeStepIndex, ref: ref, htmlAttributes: htmlAttributes, alignment: alignment }));
|
|
60
60
|
case 'large':
|
|
61
|
-
return ((0, jsx_runtime_1.jsx)(WizardLarge, { as: as, orientation: orientation, style: style, className: className, steps: steps, activeStepIndex: activeStepIndex, ref: ref, htmlAttributes: htmlAttributes }));
|
|
61
|
+
return ((0, jsx_runtime_1.jsx)(WizardLarge, { as: as, orientation: orientation, style: style, className: className, steps: steps, activeStepIndex: activeStepIndex, ref: ref, htmlAttributes: htmlAttributes, alignment: alignment }));
|
|
62
62
|
}
|
|
63
63
|
});
|
|
64
64
|
const getStatus = (activeStepIndex, stepIndex) => stepIndex === activeStepIndex
|
|
@@ -66,11 +66,12 @@ const getStatus = (activeStepIndex, stepIndex) => stepIndex === activeStepIndex
|
|
|
66
66
|
: activeStepIndex < stepIndex
|
|
67
67
|
? 'incomplete'
|
|
68
68
|
: 'complete';
|
|
69
|
-
const WizardLarge = react_1.default.forwardRef(function WizardLarge({ orientation = 'horizontal', activeStepIndex, steps, as, style, className, htmlAttributes, }, ref) {
|
|
69
|
+
const WizardLarge = react_1.default.forwardRef(function WizardLarge({ orientation = 'horizontal', activeStepIndex, steps, as, style, className, htmlAttributes, alignment, }, ref) {
|
|
70
70
|
const Component = as || 'div';
|
|
71
71
|
const wizardClasses = (0, defaultImports_1.classNames)('ndl-wizard', 'ndl-wizard-large', {
|
|
72
72
|
'ndl-horizontal': orientation === 'horizontal',
|
|
73
73
|
'ndl-vertical': orientation === 'vertical',
|
|
74
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
74
75
|
}, className);
|
|
75
76
|
const componentStyle = {
|
|
76
77
|
gridTemplateColumns: orientation === 'horizontal'
|
|
@@ -88,6 +89,7 @@ const WizardLarge = react_1.default.forwardRef(function WizardLarge({ orientatio
|
|
|
88
89
|
'ndl-wizard-step-complete': status === 'complete',
|
|
89
90
|
'ndl-wizard-step-active': status === 'active',
|
|
90
91
|
'ndl-wizard-step-error': step.status === 'error',
|
|
92
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
91
93
|
});
|
|
92
94
|
};
|
|
93
95
|
return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: wizardClasses, style: Object.assign(Object.assign({}, style), componentStyle), ref: ref }, htmlAttributes, { children: [steps.map((step, index) => {
|
|
@@ -95,6 +97,7 @@ const WizardLarge = react_1.default.forwardRef(function WizardLarge({ orientatio
|
|
|
95
97
|
const wizardStepClasses = (0, defaultImports_1.classNames)('ndl-wizard-step-text', {
|
|
96
98
|
'ndl-vertical': orientation === 'vertical',
|
|
97
99
|
'ndl-horizontal': orientation === 'horizontal',
|
|
100
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
98
101
|
'ndl-wizard-step-incomplete': getStatus(activeStepIndex, index) === 'incomplete',
|
|
99
102
|
});
|
|
100
103
|
return ((0, jsx_runtime_1.jsx)("div", { className: wizardStepClasses, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-large", children: step.content }) }, index));
|
|
@@ -107,31 +110,36 @@ const WizardLarge = react_1.default.forwardRef(function WizardLarge({ orientatio
|
|
|
107
110
|
gridRow: orientation === 'vertical' ? index + 1 : '',
|
|
108
111
|
}, children: (0, jsx_runtime_1.jsx)(Circle, { status: step.status === 'error'
|
|
109
112
|
? 'error'
|
|
110
|
-
: getStatus(activeStepIndex, index), number: index + 1, text: step.content }) }, index));
|
|
113
|
+
: getStatus(activeStepIndex, index), number: index + 1, text: step.content, alignment: alignment }) }, index));
|
|
111
114
|
})] })));
|
|
112
115
|
});
|
|
113
|
-
exports.WizardSmall = react_1.default.forwardRef(function WizardSmall({ orientation = 'horizontal', activeStepIndex, steps, as, className, htmlAttributes, }, ref) {
|
|
116
|
+
exports.WizardSmall = react_1.default.forwardRef(function WizardSmall({ orientation = 'horizontal', activeStepIndex, steps, as, className, htmlAttributes, alignment = 'middle', }, ref) {
|
|
114
117
|
const Component = as || 'div';
|
|
115
118
|
const wizardClasses = (0, defaultImports_1.classNames)('ndl-wizard', 'ndl-wizard-small', {
|
|
116
119
|
'ndl-horizontal': orientation === 'horizontal',
|
|
117
120
|
'ndl-vertical': orientation === 'vertical',
|
|
121
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
118
122
|
}, className);
|
|
119
123
|
const stepClasses = (index) => (0, defaultImports_1.classNames)('ndl-wizard-step', {
|
|
120
124
|
'ndl-horizontal': orientation === 'horizontal',
|
|
121
125
|
'ndl-vertical': orientation === 'vertical',
|
|
122
126
|
'ndl-wizard-step-active': getStatus(activeStepIndex, index) === 'active',
|
|
123
127
|
'ndl-wizard-step-complete': getStatus(activeStepIndex, index) === 'complete',
|
|
128
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
124
129
|
});
|
|
125
130
|
return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: wizardClasses, ref: ref }, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-wizard-steps-line" }), steps.map((step, index) => {
|
|
126
131
|
return ((0, jsx_runtime_1.jsx)("div", { className: stepClasses(index), children: (0, jsx_runtime_1.jsx)("div", { className: "ndl-wizard-circle" }) }, index));
|
|
127
132
|
}), (0, jsx_runtime_1.jsx)("div", { className: "ndl-wizard-steps-line" })] })));
|
|
128
133
|
});
|
|
129
|
-
const Circle = ({ status, number, }) => {
|
|
134
|
+
const Circle = ({ status, number, alignment = 'middle', }) => {
|
|
130
135
|
const innerCircleClasses = (0, defaultImports_1.classNames)({
|
|
131
136
|
'n-fill-palette-primary-bg-strong': status === 'complete' || status === 'active',
|
|
132
137
|
'n-fill-palette-neutral-bg-stronger': status === 'incomplete',
|
|
133
138
|
'n-fill-palette-danger-bg-strong': status === 'error',
|
|
134
139
|
});
|
|
135
|
-
|
|
140
|
+
const outerCircleClasses = (0, defaultImports_1.classNames)('ndl-wizard-circle', {
|
|
141
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
142
|
+
});
|
|
143
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: outerCircleClasses, children: (0, jsx_runtime_1.jsxs)("svg", { children: [status === 'active' && ((0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("circle", { className: "n-stroke-palette-primary-bg-strong", style: { fill: 'transparent', strokeWidth: 2 }, cx: "16", cy: "16", r: "14" }) })), (0, jsx_runtime_1.jsx)("circle", { className: innerCircleClasses, cx: "16", cy: "16", r: "12" }), (0, jsx_runtime_1.jsx)("text", { x: "50%", y: "50%", fontSize: 14, className: "n-fill-palette-neutral-bg-weak", textAnchor: "middle", dominantBaseline: "middle", dy: "0.1em", children: status === 'error' ? '!' : number })] }) }));
|
|
136
144
|
};
|
|
137
145
|
//# sourceMappingURL=Wizard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,+CAAyC;AAEzC,8DAAuD;AACvD,8CAA2C;
|
|
1
|
+
{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":"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"}
|
package/lib/esm/button/Button.js
CHANGED
|
@@ -76,7 +76,9 @@ export const Button = React.forwardRef(function Button(_a, ref) {
|
|
|
76
76
|
[`
|
|
77
77
|
n-text-palette-neutral-text-weak
|
|
78
78
|
n-bg-palette-${color}-weak
|
|
79
|
-
${isInteractable && `hover:n-bg-palette
|
|
79
|
+
${isInteractable && color === 'primary' && `hover:n-bg-palette-primary-hover-weak`}
|
|
80
|
+
${isInteractable && color === 'danger' && `hover:n-bg-palette-danger-hover-weak`}
|
|
81
|
+
${isInteractable && color === 'neutral' && `hover:n-bg-palette-neutral-hover`}
|
|
80
82
|
n-border-palette-neutral-border-strong
|
|
81
83
|
active:n-bg-palette-neutral-pressed
|
|
82
84
|
`]: fill === 'outlined' && color === 'neutral',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAkEpD,MAAM,CAAC,MAAM,MAAM,GAGf,KAAK,CAAC,UAAU,CAAC,SAAS,MAAM,CAClC,EAe6C,EAC7C,GAAsB;QAhBtB,EACE,QAAQ,EACR,EAAE,EACF,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,SAAS,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,KAAK,EACL,cAAc,OAE6B,EADxC,SAAS,cAdd,+IAeC,CADa;IAId,MAAM,SAAS,GAAsB,EAAE,IAAI,QAAQ,CAAC;IAEpD,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE;QACpC,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,cAAc,EAAE,IAAI,KAAK,UAAU;QACnC,UAAU,EAAE,IAAI,KAAK,MAAM;QAC3B,cAAc,EAAE,UAAU;QAC1B,aAAa,EAAE,SAAS;QACxB,kBAAkB,EAAE,UAAU;QAC9B,6CAA6C;QAC7C;;;;WAIG;QACH,CAAC;QAEG,KAAK,KAAK,SAAS;YACjB,CAAC,CAAC,gBAAgB,KAAK,eAAe;YACtC,CAAC,CAAC,gBAAgB,KAAK,YAC3B;QAEE,cAAc;YACd,sBAAsB,KAAK;+BACJ,KAAK,iBAC9B;OACC,CAAC,EAAE,IAAI,KAAK,QAAQ;QACvB,CAAC;uBACkB,KAAK;QAEpB,cAAc;YACd,sBAAsB,KAAK;8BACL,KAAK,eAC7B;yBACmB,KAAK;OACvB,CAAC,EAAE,IAAI,KAAK,UAAU,IAAI,KAAK,KAAK,SAAS;QAChD;;;WAGG;QACH,CAAC;;qBAEgB,KAAK;QAClB,cAAc,IAAI,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAkEpD,MAAM,CAAC,MAAM,MAAM,GAGf,KAAK,CAAC,UAAU,CAAC,SAAS,MAAM,CAClC,EAe6C,EAC7C,GAAsB;QAhBtB,EACE,QAAQ,EACR,EAAE,EACF,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,SAAS,EACjB,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,KAAK,EACL,cAAc,OAE6B,EADxC,SAAS,cAdd,+IAeC,CADa;IAId,MAAM,SAAS,GAAsB,EAAE,IAAI,QAAQ,CAAC;IAEpD,MAAM,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,SAAS,CAAC;IAEjD,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE;QACpC,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,cAAc,EAAE,IAAI,KAAK,UAAU;QACnC,UAAU,EAAE,IAAI,KAAK,MAAM;QAC3B,cAAc,EAAE,UAAU;QAC1B,aAAa,EAAE,SAAS;QACxB,kBAAkB,EAAE,UAAU;QAC9B,6CAA6C;QAC7C;;;;WAIG;QACH,CAAC;QAEG,KAAK,KAAK,SAAS;YACjB,CAAC,CAAC,gBAAgB,KAAK,eAAe;YACtC,CAAC,CAAC,gBAAgB,KAAK,YAC3B;QAEE,cAAc;YACd,sBAAsB,KAAK;+BACJ,KAAK,iBAC9B;OACC,CAAC,EAAE,IAAI,KAAK,QAAQ;QACvB,CAAC;uBACkB,KAAK;QAEpB,cAAc;YACd,sBAAsB,KAAK;8BACL,KAAK,eAC7B;yBACmB,KAAK;OACvB,CAAC,EAAE,IAAI,KAAK,UAAU,IAAI,KAAK,KAAK,SAAS;QAChD;;;WAGG;QACH,CAAC;;qBAEgB,KAAK;QAClB,cAAc,IAAI,KAAK,KAAK,SAAS,IAAI,uCAAuC;QAChF,cAAc,IAAI,KAAK,KAAK,QAAQ,IAAI,sCAAsC;QAC9E,cAAc,IAAI,KAAK,KAAK,SAAS,IAAI,kCAAkC;;;OAG5E,CAAC,EAAE,IAAI,KAAK,UAAU,IAAI,KAAK,KAAK,SAAS;QAChD,CAAC;uBACkB,KAAK;QAEpB,cAAc;YACd,sBAAsB,KAAK;+BACJ,KAAK;OAE9B;OACC,CAAC,EAAE,IAAI,KAAK,MAAM,IAAI,KAAK,KAAK,SAAS;QAC5C,CAAC;;QAEG,cAAc,IAAI,uCAAuC;OAC1D,CAAC,EAAE,IAAI,KAAK,MAAM,IAAI,KAAK,IAAI,SAAS;KAC5C,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,YAAY,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAE/D,MAAM,WAAW,GAAG,CAAC,CAAkD,EAAE,EAAE;QACzE,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,8EAA8E;YAC9E,yEAAyE;YACzE,iFAAiF;YACjF,4CAA4C;YAC5C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,SAAS;IACR,sDAAsD;wBAClD,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC5C,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,UAAU,mBACL,CAAC,cAAc,EAC9B,SAAS,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAClD,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,eAEjB,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,cAAc,IAAC,SAAS,EAAC,wBAAwB,EAAC,IAAI,EAAC,OAAO,GAAG,CACnE,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,KACC,CACb,CAAC;AACJ,CAAC,CAAgE,CAAC"}
|
package/lib/esm/wizard/Wizard.js
CHANGED
|
@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
22
22
|
import React, { useEffect } from 'react';
|
|
23
23
|
import { classNames } from '../_common/defaultImports';
|
|
24
24
|
import { Typography } from '../typography';
|
|
25
|
-
export const Wizard = React.forwardRef(function Wizard({ as, className, style, size = 'large', steps, activeStepIndex, orientation, htmlAttributes, }, ref) {
|
|
25
|
+
export const Wizard = React.forwardRef(function Wizard({ as, className, style, size = 'large', steps, activeStepIndex, orientation, htmlAttributes, alignment = orientation === 'vertical' ? 'top' : 'middle', }, ref) {
|
|
26
26
|
useEffect(() => {
|
|
27
27
|
if (activeStepIndex > steps.length - 1 || activeStepIndex < 0) {
|
|
28
28
|
console.warn(`[🪡 Needle]: The activeStepIndex in Wizard is out of bounds. The activeStepIndex is ${activeStepIndex} and the number of steps is ${steps.length}.`);
|
|
@@ -30,9 +30,9 @@ export const Wizard = React.forwardRef(function Wizard({ as, className, style, s
|
|
|
30
30
|
}, [activeStepIndex, steps.length]);
|
|
31
31
|
switch (size) {
|
|
32
32
|
case 'small':
|
|
33
|
-
return (_jsx(WizardSmall, { as: as, orientation: orientation, style: style, className: className, steps: steps, activeStepIndex: activeStepIndex, ref: ref, htmlAttributes: htmlAttributes }));
|
|
33
|
+
return (_jsx(WizardSmall, { as: as, orientation: orientation, style: style, className: className, steps: steps, activeStepIndex: activeStepIndex, ref: ref, htmlAttributes: htmlAttributes, alignment: alignment }));
|
|
34
34
|
case 'large':
|
|
35
|
-
return (_jsx(WizardLarge, { as: as, orientation: orientation, style: style, className: className, steps: steps, activeStepIndex: activeStepIndex, ref: ref, htmlAttributes: htmlAttributes }));
|
|
35
|
+
return (_jsx(WizardLarge, { as: as, orientation: orientation, style: style, className: className, steps: steps, activeStepIndex: activeStepIndex, ref: ref, htmlAttributes: htmlAttributes, alignment: alignment }));
|
|
36
36
|
}
|
|
37
37
|
});
|
|
38
38
|
const getStatus = (activeStepIndex, stepIndex) => stepIndex === activeStepIndex
|
|
@@ -40,11 +40,12 @@ const getStatus = (activeStepIndex, stepIndex) => stepIndex === activeStepIndex
|
|
|
40
40
|
: activeStepIndex < stepIndex
|
|
41
41
|
? 'incomplete'
|
|
42
42
|
: 'complete';
|
|
43
|
-
const WizardLarge = React.forwardRef(function WizardLarge({ orientation = 'horizontal', activeStepIndex, steps, as, style, className, htmlAttributes, }, ref) {
|
|
43
|
+
const WizardLarge = React.forwardRef(function WizardLarge({ orientation = 'horizontal', activeStepIndex, steps, as, style, className, htmlAttributes, alignment, }, ref) {
|
|
44
44
|
const Component = as || 'div';
|
|
45
45
|
const wizardClasses = classNames('ndl-wizard', 'ndl-wizard-large', {
|
|
46
46
|
'ndl-horizontal': orientation === 'horizontal',
|
|
47
47
|
'ndl-vertical': orientation === 'vertical',
|
|
48
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
48
49
|
}, className);
|
|
49
50
|
const componentStyle = {
|
|
50
51
|
gridTemplateColumns: orientation === 'horizontal'
|
|
@@ -62,6 +63,7 @@ const WizardLarge = React.forwardRef(function WizardLarge({ orientation = 'horiz
|
|
|
62
63
|
'ndl-wizard-step-complete': status === 'complete',
|
|
63
64
|
'ndl-wizard-step-active': status === 'active',
|
|
64
65
|
'ndl-wizard-step-error': step.status === 'error',
|
|
66
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
65
67
|
});
|
|
66
68
|
};
|
|
67
69
|
return (_jsxs(Component, Object.assign({ className: wizardClasses, style: Object.assign(Object.assign({}, style), componentStyle), ref: ref }, htmlAttributes, { children: [steps.map((step, index) => {
|
|
@@ -69,6 +71,7 @@ const WizardLarge = React.forwardRef(function WizardLarge({ orientation = 'horiz
|
|
|
69
71
|
const wizardStepClasses = classNames('ndl-wizard-step-text', {
|
|
70
72
|
'ndl-vertical': orientation === 'vertical',
|
|
71
73
|
'ndl-horizontal': orientation === 'horizontal',
|
|
74
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
72
75
|
'ndl-wizard-step-incomplete': getStatus(activeStepIndex, index) === 'incomplete',
|
|
73
76
|
});
|
|
74
77
|
return (_jsx("div", { className: wizardStepClasses, children: _jsx(Typography, { variant: "body-large", children: step.content }) }, index));
|
|
@@ -81,31 +84,36 @@ const WizardLarge = React.forwardRef(function WizardLarge({ orientation = 'horiz
|
|
|
81
84
|
gridRow: orientation === 'vertical' ? index + 1 : '',
|
|
82
85
|
}, children: _jsx(Circle, { status: step.status === 'error'
|
|
83
86
|
? 'error'
|
|
84
|
-
: getStatus(activeStepIndex, index), number: index + 1, text: step.content }) }, index));
|
|
87
|
+
: getStatus(activeStepIndex, index), number: index + 1, text: step.content, alignment: alignment }) }, index));
|
|
85
88
|
})] })));
|
|
86
89
|
});
|
|
87
|
-
export const WizardSmall = React.forwardRef(function WizardSmall({ orientation = 'horizontal', activeStepIndex, steps, as, className, htmlAttributes, }, ref) {
|
|
90
|
+
export const WizardSmall = React.forwardRef(function WizardSmall({ orientation = 'horizontal', activeStepIndex, steps, as, className, htmlAttributes, alignment = 'middle', }, ref) {
|
|
88
91
|
const Component = as || 'div';
|
|
89
92
|
const wizardClasses = classNames('ndl-wizard', 'ndl-wizard-small', {
|
|
90
93
|
'ndl-horizontal': orientation === 'horizontal',
|
|
91
94
|
'ndl-vertical': orientation === 'vertical',
|
|
95
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
92
96
|
}, className);
|
|
93
97
|
const stepClasses = (index) => classNames('ndl-wizard-step', {
|
|
94
98
|
'ndl-horizontal': orientation === 'horizontal',
|
|
95
99
|
'ndl-vertical': orientation === 'vertical',
|
|
96
100
|
'ndl-wizard-step-active': getStatus(activeStepIndex, index) === 'active',
|
|
97
101
|
'ndl-wizard-step-complete': getStatus(activeStepIndex, index) === 'complete',
|
|
102
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
98
103
|
});
|
|
99
104
|
return (_jsxs(Component, Object.assign({ className: wizardClasses, ref: ref }, htmlAttributes, { children: [_jsx("div", { className: "ndl-wizard-steps-line" }), steps.map((step, index) => {
|
|
100
105
|
return (_jsx("div", { className: stepClasses(index), children: _jsx("div", { className: "ndl-wizard-circle" }) }, index));
|
|
101
106
|
}), _jsx("div", { className: "ndl-wizard-steps-line" })] })));
|
|
102
107
|
});
|
|
103
|
-
const Circle = ({ status, number, }) => {
|
|
108
|
+
const Circle = ({ status, number, alignment = 'middle', }) => {
|
|
104
109
|
const innerCircleClasses = classNames({
|
|
105
110
|
'n-fill-palette-primary-bg-strong': status === 'complete' || status === 'active',
|
|
106
111
|
'n-fill-palette-neutral-bg-stronger': status === 'incomplete',
|
|
107
112
|
'n-fill-palette-danger-bg-strong': status === 'error',
|
|
108
113
|
});
|
|
109
|
-
|
|
114
|
+
const outerCircleClasses = classNames('ndl-wizard-circle', {
|
|
115
|
+
[`ndl-wizard-align-${alignment}`]: alignment,
|
|
116
|
+
});
|
|
117
|
+
return (_jsx("div", { className: outerCircleClasses, children: _jsxs("svg", { children: [status === 'active' && (_jsx("g", { children: _jsx("circle", { className: "n-stroke-palette-primary-bg-strong", style: { fill: 'transparent', strokeWidth: 2 }, cx: "16", cy: "16", r: "14" }) })), _jsx("circle", { className: innerCircleClasses, cx: "16", cy: "16", r: "12" }), _jsx("text", { x: "50%", y: "50%", fontSize: 14, className: "n-fill-palette-neutral-bg-weak", textAnchor: "middle", dominantBaseline: "middle", dy: "0.1em", children: status === 'error' ? '!' : number })] }) }));
|
|
110
118
|
};
|
|
111
119
|
//# sourceMappingURL=Wizard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -24,7 +24,7 @@ interface Step {
|
|
|
24
24
|
content: string | React.JSX.Element;
|
|
25
25
|
status?: 'default' | 'error';
|
|
26
26
|
}
|
|
27
|
-
|
|
27
|
+
interface BaseWizardProps {
|
|
28
28
|
orientation?: 'horizontal' | 'vertical';
|
|
29
29
|
size?: 'small' | 'large';
|
|
30
30
|
style?: React.CSSProperties;
|
|
@@ -32,6 +32,19 @@ export interface WizardProps {
|
|
|
32
32
|
activeStepIndex: number;
|
|
33
33
|
steps: Step[];
|
|
34
34
|
}
|
|
35
|
+
export type HorizontalWizardProps = BaseWizardProps & {
|
|
36
|
+
orientation: 'horizontal';
|
|
37
|
+
alignment?: 'middle';
|
|
38
|
+
};
|
|
39
|
+
export type VerticalWizardProps = BaseWizardProps & {
|
|
40
|
+
orientation: 'vertical';
|
|
41
|
+
alignment?: 'top' | 'middle';
|
|
42
|
+
};
|
|
43
|
+
export type NonOrientationWizardProps = BaseWizardProps & {
|
|
44
|
+
orientation: undefined;
|
|
45
|
+
alignment?: never;
|
|
46
|
+
};
|
|
47
|
+
export type WizardProps = HorizontalWizardProps | VerticalWizardProps | NonOrientationWizardProps;
|
|
35
48
|
export declare const Wizard: PolymorphicForwardRefExoticComponent<'div', WizardProps>;
|
|
36
49
|
export declare const WizardSmall: PolymorphicForwardRefExoticComponent<'div', Omit<WizardProps, 'size'>>;
|
|
37
50
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-ndl/react",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.17",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React implementation of Neo4j Design System",
|
|
6
6
|
"keywords": [
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"@tanstack/react-table": "8.20.5",
|
|
66
66
|
"react": ">=16.8.0",
|
|
67
67
|
"react-dom": ">=16.8.0",
|
|
68
|
-
"@neo4j-ndl/base": "^3.3.
|
|
68
|
+
"@neo4j-ndl/base": "^3.3.9"
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
71
|
"@dnd-kit/core": "6.1.0",
|