@tedi-design-system/react 19.0.1-rc.2 → 19.1.0-rc.10
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/DESIGN.md +308 -0
- package/README.md +28 -0
- package/_virtual/index.es13.js +2 -2
- package/_virtual/index.es14.js +2 -2
- package/bundle-stats.html +1 -1
- package/component.manifest.json +1191 -0
- package/external/hoist-non-react-statics/external/react-is/cjs/react-is.development.cjs.js +1 -1
- package/external/hoist-non-react-statics/external/react-is/cjs/react-is.development.es.js +1 -1
- package/external/hoist-non-react-statics/external/react-is/cjs/react-is.production.min.cjs.js +1 -1
- package/external/hoist-non-react-statics/external/react-is/cjs/react-is.production.min.es.js +1 -1
- package/external/hoist-non-react-statics/external/react-is/index.cjs.js +1 -1
- package/external/hoist-non-react-statics/external/react-is/index.es.js +1 -1
- package/external/prop-types/external/react-is/cjs/react-is.development.cjs.js +1 -1
- package/external/prop-types/external/react-is/cjs/react-is.development.es.js +1 -1
- package/external/prop-types/external/react-is/cjs/react-is.production.min.cjs.js +1 -1
- package/external/prop-types/external/react-is/cjs/react-is.production.min.es.js +1 -1
- package/external/prop-types/external/react-is/index.cjs.js +1 -1
- package/external/prop-types/external/react-is/index.es.js +1 -1
- package/external/react-is/index.cjs.js +1 -1
- package/external/react-is/index.es.js +1 -1
- package/external/toposort/index.cjs.js +1 -1
- package/external/toposort/index.es.js +1 -1
- package/index.css +1 -1
- package/package.json +2 -2
- package/src/community/components/layout/sidenav/sidenav.cjs.js +1 -1
- package/src/community/components/layout/sidenav/sidenav.es.js +38 -40
- package/src/community/components/map-components/base-map-selection/base-map-option.cjs.js +1 -1
- package/src/community/components/map-components/base-map-selection/base-map-option.d.ts +8 -5
- package/src/community/components/map-components/base-map-selection/base-map-option.es.js +63 -65
- package/src/community/components/map-components/base-map-selection/base-map-selection.cjs.js +1 -1
- package/src/community/components/map-components/base-map-selection/base-map-selection.d.ts +1 -4
- package/src/community/components/map-components/base-map-selection/base-map-selection.es.js +55 -55
- package/src/community/components/map-components/map-button/map-button.cjs.js +1 -1
- package/src/community/components/map-components/map-button/map-button.d.ts +2 -3
- package/src/community/components/map-components/map-button/map-button.es.js +37 -36
- package/src/community/components/map-components/map-dropdown/map-dropdown.cjs.js +1 -1
- package/src/community/components/map-components/map-dropdown/map-dropdown.es.js +51 -49
- package/src/community/components/vertical-stepper/step-item/step-item.d.ts +6 -0
- package/src/community/components/vertical-stepper/sub-item/sub-item.d.ts +6 -0
- package/src/community/components/vertical-stepper/vertical-stepper.d.ts +6 -0
- package/src/tedi/components/content/card/card.module.scss.cjs.js +1 -1
- package/src/tedi/components/content/card/card.module.scss.es.js +3 -2
- package/src/tedi/components/content/collapse/collapse.cjs.js +1 -1
- package/src/tedi/components/content/collapse/collapse.d.ts +9 -0
- package/src/tedi/components/content/collapse/collapse.es.js +44 -35
- package/src/tedi/components/filter/filter/filter.cjs.js +1 -1
- package/src/tedi/components/filter/filter/filter.d.ts +5 -0
- package/src/tedi/components/filter/filter/filter.es.js +154 -144
- package/src/tedi/components/filter/filter/filter.module.scss.cjs.js +1 -1
- package/src/tedi/components/filter/filter/filter.module.scss.es.js +2 -1
- package/src/tedi/components/form/date-field/date-field-helpers.cjs.js +1 -1
- package/src/tedi/components/form/date-field/date-field-helpers.d.ts +12 -19
- package/src/tedi/components/form/date-field/date-field-helpers.es.js +27 -21
- package/src/tedi/components/form/date-field/date-field.cjs.js +1 -1
- package/src/tedi/components/form/date-field/date-field.d.ts +1 -1
- package/src/tedi/components/form/date-field/date-field.es.js +169 -164
- package/src/tedi/components/form/textfield/textfield.cjs.js +1 -1
- package/src/tedi/components/form/textfield/textfield.es.js +21 -21
- package/src/tedi/components/form/time-field/time-field.cjs.js +1 -1
- package/src/tedi/components/form/time-field/time-field.es.js +126 -124
- package/src/tedi/components/layout/sidenav/components/sidenav-item/sidenav-item.cjs.js +1 -1
- package/src/tedi/components/layout/sidenav/components/sidenav-item/sidenav-item.es.js +82 -85
- package/src/tedi/components/layout/sidenav/sidenav.cjs.js +1 -1
- package/src/tedi/components/layout/sidenav/sidenav.es.js +16 -16
- package/src/tedi/components/layout/top-nav/components/top-nav-item/top-nav-item.cjs.js +1 -1
- package/src/tedi/components/layout/top-nav/components/top-nav-item/top-nav-item.es.js +6 -7
- package/src/tedi/components/layout/top-nav/components/top-nav-separator/top-nav-separator.cjs.js +1 -1
- package/src/tedi/components/layout/top-nav/components/top-nav-separator/top-nav-separator.es.js +2 -2
- package/src/tedi/components/layout/top-nav/top-nav.cjs.js +1 -1
- package/src/tedi/components/layout/top-nav/top-nav.es.js +9 -8
- package/src/tedi/components/misc/affix/affix.cjs.js +1 -1
- package/src/tedi/components/misc/affix/affix.es.js +20 -8
- package/src/tedi/components/navigation/card-stepper/card-stepper-step.cjs.js +1 -0
- package/src/tedi/components/navigation/card-stepper/card-stepper-step.d.ts +86 -0
- package/src/tedi/components/navigation/card-stepper/card-stepper-step.es.js +5 -0
- package/src/tedi/components/navigation/card-stepper/card-stepper.cjs.js +1 -0
- package/src/tedi/components/navigation/card-stepper/card-stepper.d.ts +130 -0
- package/src/tedi/components/navigation/card-stepper/card-stepper.es.js +200 -0
- package/src/tedi/components/navigation/card-stepper/card-stepper.module.scss.cjs.js +1 -0
- package/src/tedi/components/navigation/card-stepper/card-stepper.module.scss.es.js +26 -0
- package/src/tedi/components/navigation/card-stepper/index.d.ts +2 -0
- package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-collapsible/table-of-contents-collapsible.cjs.js +1 -1
- package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-collapsible/table-of-contents-collapsible.d.ts +9 -1
- package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-collapsible/table-of-contents-collapsible.es.js +82 -65
- package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-item/table-of-contents-item.d.ts +6 -0
- package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-row/table-of-contents-row.cjs.js +1 -1
- package/src/tedi/components/navigation/table-of-contents/components/table-of-contents-row/table-of-contents-row.es.js +23 -28
- package/src/tedi/components/navigation/table-of-contents/table-of-contents.cjs.js +1 -1
- package/src/tedi/components/navigation/table-of-contents/table-of-contents.d.ts +32 -21
- package/src/tedi/components/navigation/table-of-contents/table-of-contents.es.js +58 -55
- package/src/tedi/components/navigation/table-of-contents/table-of-contents.module.scss.cjs.js +1 -1
- package/src/tedi/components/navigation/table-of-contents/table-of-contents.module.scss.es.js +4 -1
- package/src/tedi/components/navigation/vertical-stepper/index.d.ts +3 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-context.cjs.js +1 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-context.d.ts +10 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-context.es.js +8 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-item.cjs.js +1 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-item.d.ts +74 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-item.es.js +109 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-sub-item.cjs.js +1 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-sub-item.d.ts +47 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper-sub-item.es.js +65 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper.cjs.js +1 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper.d.ts +28 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper.es.js +32 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper.module.scss.cjs.js +1 -0
- package/src/tedi/components/navigation/vertical-stepper/vertical-stepper.module.scss.es.js +34 -0
- package/src/tedi/components/overlays/dropdown/dropdown.cjs.js +1 -1
- package/src/tedi/components/overlays/dropdown/dropdown.d.ts +8 -0
- package/src/tedi/components/overlays/dropdown/dropdown.es.js +82 -74
- package/src/tedi/components/overlays/dropdown/dropdown.module.scss.cjs.js +1 -1
- package/src/tedi/components/overlays/dropdown/dropdown.module.scss.es.js +1 -0
- package/src/tedi/components/overlays/overlay/overlay-trigger.cjs.js +1 -1
- package/src/tedi/components/overlays/overlay/overlay-trigger.es.js +22 -21
- package/src/tedi/components/overlays/sheet/sheet.cjs.js +1 -0
- package/src/tedi/components/overlays/sheet/sheet.d.ts +65 -0
- package/src/tedi/components/overlays/sheet/sheet.es.js +41 -0
- package/src/tedi/components/overlays/sheet/sheet.module.scss.cjs.js +1 -0
- package/src/tedi/components/overlays/sheet/sheet.module.scss.es.js +8 -0
- package/src/tedi/helpers/hooks/use-safe-id.cjs.js +1 -0
- package/src/tedi/helpers/hooks/use-safe-id.d.ts +16 -0
- package/src/tedi/helpers/hooks/use-safe-id.es.js +5 -0
- package/src/tedi/helpers/index.d.ts +1 -0
- package/src/tedi/index.d.ts +2 -0
- package/src/tedi/providers/label-provider/labels-map.cjs.js +1 -1
- package/src/tedi/providers/label-provider/labels-map.d.ts +56 -0
- package/src/tedi/providers/label-provider/labels-map.es.js +127 -71
- package/tedi.cjs.js +1 -1
- package/tedi.es.js +284 -272
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type VerticalStepperItemState = 'default' | 'completed' | 'error' | 'disabled';
|
|
3
|
+
export interface VerticalStepperItemProps {
|
|
4
|
+
/**
|
|
5
|
+
* Step title.
|
|
6
|
+
*/
|
|
7
|
+
title: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Optional secondary line rendered under the title.
|
|
10
|
+
*/
|
|
11
|
+
description?: React.ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Visual / semantic state of the step.
|
|
14
|
+
* - `completed` — green indicator + check icon
|
|
15
|
+
* - `error` — red indicator + error icon
|
|
16
|
+
* - `disabled` — muted, non-interactive
|
|
17
|
+
* @default default
|
|
18
|
+
*/
|
|
19
|
+
state?: VerticalStepperItemState;
|
|
20
|
+
/**
|
|
21
|
+
* Marks the step as the active one — blue indicator, bold blue title and
|
|
22
|
+
* `aria-current="step"`. Independent from `state`.
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
current?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Navigates when set; renders the title as an anchor. Works for steps with
|
|
28
|
+
* sub-steps too — the title navigates and a separate toggle expands the list.
|
|
29
|
+
*/
|
|
30
|
+
href?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Click handler. Without `href` the title renders as a `<button>`. Works for
|
|
33
|
+
* steps with sub-steps too (alongside the expand toggle).
|
|
34
|
+
*/
|
|
35
|
+
onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
|
|
36
|
+
/**
|
|
37
|
+
* Element used for the interactive title. Defaults to `'a'` when `href` is set,
|
|
38
|
+
* otherwise `'button'`. Ignored for `disabled` steps.
|
|
39
|
+
*/
|
|
40
|
+
as?: 'a' | 'button';
|
|
41
|
+
/**
|
|
42
|
+
* Content rendered at the end of the item, below the title / description — a
|
|
43
|
+
* `StatusBadge`, `Link`, `Button`, `Text`, etc. (Figma: "related assets".)
|
|
44
|
+
*/
|
|
45
|
+
endSlot?: React.ReactNode;
|
|
46
|
+
/**
|
|
47
|
+
* `VerticalStepper.SubItem` elements. When present the step becomes an
|
|
48
|
+
* expandable section: the title toggles the (collapsible) sub-step list.
|
|
49
|
+
*/
|
|
50
|
+
children?: React.ReactNode;
|
|
51
|
+
/**
|
|
52
|
+
* Controlled open state of the sub-step list. Use with `onToggle`.
|
|
53
|
+
*/
|
|
54
|
+
open?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Initial open state of the sub-step list (uncontrolled).
|
|
57
|
+
*/
|
|
58
|
+
defaultOpen?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Fired when the sub-step list is toggled.
|
|
61
|
+
*/
|
|
62
|
+
onToggle?: (open: boolean) => void;
|
|
63
|
+
/**
|
|
64
|
+
* Additional class name applied to the `<li>`.
|
|
65
|
+
*/
|
|
66
|
+
className?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Step number, injected automatically by `VerticalStepper`. Do not set manually.
|
|
69
|
+
* @internal
|
|
70
|
+
*/
|
|
71
|
+
index?: number;
|
|
72
|
+
}
|
|
73
|
+
export declare const VerticalStepperItem: React.ForwardRefExoticComponent<VerticalStepperItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
74
|
+
export default VerticalStepperItem;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { jsx as t, jsxs as r, Fragment as k } from "react/jsx-runtime";
|
|
2
|
+
import q from "../../../../../external/classnames/index.es.js";
|
|
3
|
+
import A, { forwardRef as G, useId as H, useState as J } from "react";
|
|
4
|
+
import { Icon as l } from "../../base/icon/icon.es.js";
|
|
5
|
+
import { Text as w } from "../../base/typography/text/text.es.js";
|
|
6
|
+
import { CollapseButton as K } from "../../buttons/collapse-button/collapse-button.es.js";
|
|
7
|
+
import e from "./vertical-stepper.module.scss.es.js";
|
|
8
|
+
import { useVerticalStepperContext as P } from "./vertical-stepper-context.es.js";
|
|
9
|
+
import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
|
|
10
|
+
const U = G((L, T) => {
|
|
11
|
+
const { getLabel: s } = Q(), { compact: a } = P(), {
|
|
12
|
+
title: c,
|
|
13
|
+
description: _,
|
|
14
|
+
state: i = "default",
|
|
15
|
+
current: h = !1,
|
|
16
|
+
href: n,
|
|
17
|
+
onClick: v,
|
|
18
|
+
as: V,
|
|
19
|
+
endSlot: u,
|
|
20
|
+
children: b,
|
|
21
|
+
open: f,
|
|
22
|
+
defaultOpen: $,
|
|
23
|
+
onToggle: o,
|
|
24
|
+
className: j,
|
|
25
|
+
index: B
|
|
26
|
+
} = L, p = `tedi-vertical-stepper-sublist-${H()}`, N = A.Children.count(b) > 0, g = i === "disabled", x = !g && (n !== void 0 || v !== void 0), d = V ?? (n ? "a" : "button"), [E, R] = J($ ?? !1), m = f ?? E, D = () => {
|
|
27
|
+
const O = !m;
|
|
28
|
+
f === void 0 && R(O), o == null || o(O);
|
|
29
|
+
}, F = q(
|
|
30
|
+
e["tedi-vertical-stepper__item"],
|
|
31
|
+
e[`tedi-vertical-stepper__item--${i}`],
|
|
32
|
+
{
|
|
33
|
+
[e["tedi-vertical-stepper__item--current"]]: h,
|
|
34
|
+
[e["tedi-vertical-stepper__item--has-children"]]: N
|
|
35
|
+
},
|
|
36
|
+
j
|
|
37
|
+
), M = /* @__PURE__ */ t("span", { className: e["tedi-vertical-stepper__indicator"], children: a ? i === "completed" ? /* @__PURE__ */ t(l, { name: "check", size: 16, color: "white", label: s("stepper.completed") }) : i === "error" ? /* @__PURE__ */ t(l, { name: "priority_high", size: 16, color: "white", label: s("stepper.error") }) : null : /* @__PURE__ */ t("span", { className: e["tedi-vertical-stepper__number"], children: B }) }), y = /* @__PURE__ */ r(w, { element: "span", className: e["tedi-vertical-stepper__label"], children: [
|
|
38
|
+
/* @__PURE__ */ t("span", { className: e["tedi-vertical-stepper__label-text"], children: c }),
|
|
39
|
+
!a && i === "completed" && /* @__PURE__ */ t(
|
|
40
|
+
l,
|
|
41
|
+
{
|
|
42
|
+
name: "check",
|
|
43
|
+
color: "success",
|
|
44
|
+
size: 16,
|
|
45
|
+
display: "inline",
|
|
46
|
+
label: s("stepper.completed"),
|
|
47
|
+
className: e["tedi-vertical-stepper__label-icon"]
|
|
48
|
+
}
|
|
49
|
+
),
|
|
50
|
+
!a && i === "error" && /* @__PURE__ */ t(
|
|
51
|
+
l,
|
|
52
|
+
{
|
|
53
|
+
name: "error",
|
|
54
|
+
color: "danger",
|
|
55
|
+
size: 16,
|
|
56
|
+
display: "inline",
|
|
57
|
+
label: s("stepper.error"),
|
|
58
|
+
className: e["tedi-vertical-stepper__label-icon"]
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
g && /* @__PURE__ */ r("span", { className: "visually-hidden", children: [
|
|
62
|
+
" (",
|
|
63
|
+
s("stepper.disabled"),
|
|
64
|
+
")"
|
|
65
|
+
] })
|
|
66
|
+
] }), I = _ && /* @__PURE__ */ t(w, { element: "span", modifiers: "small", color: "tertiary", className: e["tedi-vertical-stepper__description"], children: _ }), C = u && /* @__PURE__ */ t("div", { className: e["tedi-vertical-stepper__end-slot"], children: u }), S = h ? "step" : void 0, z = x ? /* @__PURE__ */ t(
|
|
67
|
+
d,
|
|
68
|
+
{
|
|
69
|
+
href: d === "a" ? n : void 0,
|
|
70
|
+
type: d === "button" ? "button" : void 0,
|
|
71
|
+
onClick: v,
|
|
72
|
+
"aria-current": S,
|
|
73
|
+
className: e["tedi-vertical-stepper__link"],
|
|
74
|
+
children: y
|
|
75
|
+
}
|
|
76
|
+
) : y;
|
|
77
|
+
return /* @__PURE__ */ r("li", { ref: T, "aria-current": x ? void 0 : S, className: F, children: [
|
|
78
|
+
M,
|
|
79
|
+
/* @__PURE__ */ t("div", { className: e["tedi-vertical-stepper__content"], children: N ? /* @__PURE__ */ r(k, { children: [
|
|
80
|
+
/* @__PURE__ */ r("div", { className: e["tedi-vertical-stepper__toggle"], children: [
|
|
81
|
+
z,
|
|
82
|
+
/* @__PURE__ */ t(
|
|
83
|
+
K,
|
|
84
|
+
{
|
|
85
|
+
id: `${p}-toggle`,
|
|
86
|
+
hideText: !0,
|
|
87
|
+
size: "small",
|
|
88
|
+
open: m,
|
|
89
|
+
onOpenChange: D,
|
|
90
|
+
"aria-controls": p,
|
|
91
|
+
"aria-label": typeof c == "string" ? c : void 0,
|
|
92
|
+
className: e["tedi-vertical-stepper__toggle-button"]
|
|
93
|
+
}
|
|
94
|
+
)
|
|
95
|
+
] }),
|
|
96
|
+
I,
|
|
97
|
+
C,
|
|
98
|
+
/* @__PURE__ */ t("ul", { id: p, hidden: !m, className: e["tedi-vertical-stepper__sub-list"], children: b })
|
|
99
|
+
] }) : /* @__PURE__ */ r(k, { children: [
|
|
100
|
+
z,
|
|
101
|
+
I,
|
|
102
|
+
C
|
|
103
|
+
] }) })
|
|
104
|
+
] });
|
|
105
|
+
});
|
|
106
|
+
U.displayName = "VerticalStepperItem";
|
|
107
|
+
export {
|
|
108
|
+
U as VerticalStepperItem
|
|
109
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),N=require("react"),u=require("../../base/icon/icon.cjs.js"),S=require("../../base/typography/text/text.cjs.js"),e=require("./vertical-stepper.module.scss.cjs.js"),q=require("../../../providers/label-provider/use-labels.cjs.js"),m=N.forwardRef((b,_)=>{const{getLabel:a}=q.useLabels(),{title:v,state:s="default",current:l=!1,href:r,onClick:c,as:f,endSlot:n,className:x}=b,d=!(s==="disabled"||s==="informative")&&(r!==void 0||c!==void 0),i=f??(r?"a":"button"),h=j.default(e.default["tedi-vertical-stepper__sub-item"],e.default[`tedi-vertical-stepper__sub-item--${s}`],{[e.default["tedi-vertical-stepper__sub-item--current"]]:l},x),o=t.jsxs(S.Text,{element:"span",className:e.default["tedi-vertical-stepper__label"],children:[t.jsx("span",{className:e.default["tedi-vertical-stepper__label-text"],children:v}),s==="completed"&&t.jsx(u.Icon,{name:"check",color:"success",size:16,display:"inline",label:a("stepper.completed"),className:e.default["tedi-vertical-stepper__label-icon"]}),s==="error"&&t.jsx(u.Icon,{name:"error",color:"danger",size:16,display:"inline",label:a("stepper.error"),className:e.default["tedi-vertical-stepper__label-icon"]}),s==="disabled"&&t.jsxs("span",{className:"visually-hidden",children:[" (",a("stepper.disabled"),")"]})]}),p=l?"step":void 0;return t.jsxs("li",{ref:_,"aria-current":d?void 0:p,className:h,children:[t.jsx("span",{className:e.default["tedi-vertical-stepper__sub-indicator"],"aria-hidden":"true",children:t.jsx("span",{className:e.default["tedi-vertical-stepper__sub-dot"]})}),t.jsxs("span",{className:e.default["tedi-vertical-stepper__content"],children:[d?t.jsx(i,{href:i==="a"?r:void 0,type:i==="button"?"button":void 0,onClick:c,"aria-current":p,className:e.default["tedi-vertical-stepper__link"],children:o}):o,n&&t.jsx("div",{className:e.default["tedi-vertical-stepper__end-slot"],children:n})]})]})});m.displayName="VerticalStepperSubItem";exports.VerticalStepperSubItem=m;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type VerticalStepperSubItemState = 'default' | 'completed' | 'error' | 'disabled' | 'informative';
|
|
3
|
+
export interface VerticalStepperSubItemProps {
|
|
4
|
+
/**
|
|
5
|
+
* Sub-step label.
|
|
6
|
+
*/
|
|
7
|
+
title: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Visual / semantic state of the sub-step.
|
|
10
|
+
* - `completed` — green dot, trailing check icon
|
|
11
|
+
* - `error` — red dot, trailing error icon
|
|
12
|
+
* - `disabled` — muted, non-interactive
|
|
13
|
+
* - `informative` — read-only row (no link), e.g. "filled in by an official"
|
|
14
|
+
* @default default
|
|
15
|
+
*/
|
|
16
|
+
state?: VerticalStepperSubItemState;
|
|
17
|
+
/**
|
|
18
|
+
* Marks the sub-step as the active one — blue ring dot, bold blue label and
|
|
19
|
+
* `aria-current="step"`. Independent from `state`.
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
current?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Navigates when set; renders the label as an anchor. Mutually usable with `onClick`.
|
|
25
|
+
*/
|
|
26
|
+
href?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Click handler. Without `href` the label renders as a `<button>`.
|
|
29
|
+
*/
|
|
30
|
+
onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Element used for the interactive label. Defaults to `'a'` when `href` is set,
|
|
33
|
+
* otherwise `'button'`. Ignored for `disabled` / `informative` rows (rendered as text).
|
|
34
|
+
*/
|
|
35
|
+
as?: 'a' | 'button';
|
|
36
|
+
/**
|
|
37
|
+
* Content rendered at the end of the sub-item, below the label — a `StatusBadge`,
|
|
38
|
+
* `Link`, `Button`, `Text`, etc. (Figma: "related assets".)
|
|
39
|
+
*/
|
|
40
|
+
endSlot?: React.ReactNode;
|
|
41
|
+
/**
|
|
42
|
+
* Additional class name applied to the `<li>`.
|
|
43
|
+
*/
|
|
44
|
+
className?: string;
|
|
45
|
+
}
|
|
46
|
+
export declare const VerticalStepperSubItem: React.ForwardRefExoticComponent<VerticalStepperSubItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
47
|
+
export default VerticalStepperSubItem;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { jsxs as s, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import S from "../../../../../external/classnames/index.es.js";
|
|
3
|
+
import { forwardRef as y } from "react";
|
|
4
|
+
import { Icon as _ } from "../../base/icon/icon.es.js";
|
|
5
|
+
import { Text as x } from "../../base/typography/text/text.es.js";
|
|
6
|
+
import e from "./vertical-stepper.module.scss.es.js";
|
|
7
|
+
import { useLabels as I } from "../../../providers/label-provider/use-labels.es.js";
|
|
8
|
+
const k = y((b, u) => {
|
|
9
|
+
const { getLabel: a } = I(), { title: v, state: r = "default", current: c = !1, href: i, onClick: n, as: f, endSlot: p, className: N } = b, o = !(r === "disabled" || r === "informative") && (i !== void 0 || n !== void 0), l = f ?? (i ? "a" : "button"), h = S(
|
|
10
|
+
e["tedi-vertical-stepper__sub-item"],
|
|
11
|
+
e[`tedi-vertical-stepper__sub-item--${r}`],
|
|
12
|
+
{ [e["tedi-vertical-stepper__sub-item--current"]]: c },
|
|
13
|
+
N
|
|
14
|
+
), d = /* @__PURE__ */ s(x, { element: "span", className: e["tedi-vertical-stepper__label"], children: [
|
|
15
|
+
/* @__PURE__ */ t("span", { className: e["tedi-vertical-stepper__label-text"], children: v }),
|
|
16
|
+
r === "completed" && /* @__PURE__ */ t(
|
|
17
|
+
_,
|
|
18
|
+
{
|
|
19
|
+
name: "check",
|
|
20
|
+
color: "success",
|
|
21
|
+
size: 16,
|
|
22
|
+
display: "inline",
|
|
23
|
+
label: a("stepper.completed"),
|
|
24
|
+
className: e["tedi-vertical-stepper__label-icon"]
|
|
25
|
+
}
|
|
26
|
+
),
|
|
27
|
+
r === "error" && /* @__PURE__ */ t(
|
|
28
|
+
_,
|
|
29
|
+
{
|
|
30
|
+
name: "error",
|
|
31
|
+
color: "danger",
|
|
32
|
+
size: 16,
|
|
33
|
+
display: "inline",
|
|
34
|
+
label: a("stepper.error"),
|
|
35
|
+
className: e["tedi-vertical-stepper__label-icon"]
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
r === "disabled" && /* @__PURE__ */ s("span", { className: "visually-hidden", children: [
|
|
39
|
+
" (",
|
|
40
|
+
a("stepper.disabled"),
|
|
41
|
+
")"
|
|
42
|
+
] })
|
|
43
|
+
] }), m = c ? "step" : void 0;
|
|
44
|
+
return /* @__PURE__ */ s("li", { ref: u, "aria-current": o ? void 0 : m, className: h, children: [
|
|
45
|
+
/* @__PURE__ */ t("span", { className: e["tedi-vertical-stepper__sub-indicator"], "aria-hidden": "true", children: /* @__PURE__ */ t("span", { className: e["tedi-vertical-stepper__sub-dot"] }) }),
|
|
46
|
+
/* @__PURE__ */ s("span", { className: e["tedi-vertical-stepper__content"], children: [
|
|
47
|
+
o ? /* @__PURE__ */ t(
|
|
48
|
+
l,
|
|
49
|
+
{
|
|
50
|
+
href: l === "a" ? i : void 0,
|
|
51
|
+
type: l === "button" ? "button" : void 0,
|
|
52
|
+
onClick: n,
|
|
53
|
+
"aria-current": m,
|
|
54
|
+
className: e["tedi-vertical-stepper__link"],
|
|
55
|
+
children: d
|
|
56
|
+
}
|
|
57
|
+
) : d,
|
|
58
|
+
p && /* @__PURE__ */ t("div", { className: e["tedi-vertical-stepper__end-slot"], children: p })
|
|
59
|
+
] })
|
|
60
|
+
] });
|
|
61
|
+
});
|
|
62
|
+
k.displayName = "VerticalStepperSubItem";
|
|
63
|
+
export {
|
|
64
|
+
k as VerticalStepperSubItem
|
|
65
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),S=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),l=require("./vertical-stepper.module.scss.cjs.js"),b=require("./vertical-stepper-context.cjs.js"),c=require("./vertical-stepper-item.cjs.js"),v=require("./vertical-stepper-sub-item.cjs.js"),n=t.forwardRef((p,s)=>{const{children:o,compact:a=!1,"aria-label":u,className:m}=p;let i=0;const d=t.Children.map(o,e=>t.isValidElement(e)&&e.type===c.VerticalStepperItem?(i+=1,t.cloneElement(e,{index:i})):e);return r.jsx(b.VerticalStepperContext.Provider,{value:{compact:a},children:r.jsx("nav",{"aria-label":u,children:r.jsx("ol",{ref:s,className:S.default(l.default["tedi-vertical-stepper"],{[l.default["tedi-vertical-stepper--compact"]]:a},m),children:d})})})});n.displayName="VerticalStepper";const V=Object.assign(n,{Item:c.VerticalStepperItem,SubItem:v.VerticalStepperSubItem});exports.VerticalStepper=V;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { VerticalStepperItemProps } from './vertical-stepper-item';
|
|
3
|
+
export interface VerticalStepperProps {
|
|
4
|
+
/**
|
|
5
|
+
* `VerticalStepper.Item` elements (and optional `Separator`s between them).
|
|
6
|
+
* Items are auto-numbered in source order.
|
|
7
|
+
*/
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* Compact density — smaller indicators and tighter rows. Completed / error
|
|
11
|
+
* steps show their state icon inside the indicator instead of the number.
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
compact?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Accessible name for the `<nav>` landmark.
|
|
17
|
+
*/
|
|
18
|
+
'aria-label'?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Additional class name applied to the `<ol>`.
|
|
21
|
+
*/
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
export declare const VerticalStepper: React.ForwardRefExoticComponent<VerticalStepperProps & React.RefAttributes<HTMLOListElement>> & {
|
|
25
|
+
Item: React.ForwardRefExoticComponent<VerticalStepperItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
26
|
+
SubItem: React.ForwardRefExoticComponent<import('./vertical-stepper-sub-item').VerticalStepperSubItemProps & React.RefAttributes<HTMLLIElement>>;
|
|
27
|
+
};
|
|
28
|
+
export default VerticalStepper;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import u from "../../../../../external/classnames/index.es.js";
|
|
3
|
+
import t, { forwardRef as b } from "react";
|
|
4
|
+
import l from "./vertical-stepper.module.scss.es.js";
|
|
5
|
+
import { VerticalStepperContext as S } from "./vertical-stepper-context.es.js";
|
|
6
|
+
import { VerticalStepperItem as p } from "./vertical-stepper-item.es.js";
|
|
7
|
+
import { VerticalStepperSubItem as V } from "./vertical-stepper-sub-item.es.js";
|
|
8
|
+
const m = b((o, c) => {
|
|
9
|
+
const { children: n, compact: a = !1, "aria-label": s, className: d } = o;
|
|
10
|
+
let i = 0;
|
|
11
|
+
const f = t.Children.map(n, (e) => t.isValidElement(e) && e.type === p ? (i += 1, t.cloneElement(e, { index: i })) : e);
|
|
12
|
+
return /* @__PURE__ */ r(S.Provider, { value: { compact: a }, children: /* @__PURE__ */ r("nav", { "aria-label": s, children: /* @__PURE__ */ r(
|
|
13
|
+
"ol",
|
|
14
|
+
{
|
|
15
|
+
ref: c,
|
|
16
|
+
className: u(
|
|
17
|
+
l["tedi-vertical-stepper"],
|
|
18
|
+
{ [l["tedi-vertical-stepper--compact"]]: a },
|
|
19
|
+
d
|
|
20
|
+
),
|
|
21
|
+
children: f
|
|
22
|
+
}
|
|
23
|
+
) }) });
|
|
24
|
+
});
|
|
25
|
+
m.displayName = "VerticalStepper";
|
|
26
|
+
const j = Object.assign(m, {
|
|
27
|
+
Item: p,
|
|
28
|
+
SubItem: V
|
|
29
|
+
});
|
|
30
|
+
export {
|
|
31
|
+
j as VerticalStepper
|
|
32
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-vertical-stepper":"tedi-vertical-stepper-cc48e08e","tedi-vertical-stepper__item":"tedi-vertical-stepper__item-5359847f","tedi-vertical-stepper__item--has-children":"tedi-vertical-stepper__item--has-children-83e7ee73","tedi-vertical-stepper__indicator":"tedi-vertical-stepper__indicator-041dc249","tedi-vertical-stepper__number":"tedi-vertical-stepper__number-a8243903","tedi-vertical-stepper__content":"tedi-vertical-stepper__content-0be415df","tedi-vertical-stepper__link":"tedi-vertical-stepper__link-fe115434","tedi-vertical-stepper__label-text":"tedi-vertical-stepper__label-text-173ed5d2","tedi-vertical-stepper__item--default":"tedi-vertical-stepper__item--default-a0855686","tedi-vertical-stepper__item--completed":"tedi-vertical-stepper__item--completed-6afeb234","tedi-vertical-stepper__item--error":"tedi-vertical-stepper__item--error-ffa453e0","tedi-vertical-stepper__toggle":"tedi-vertical-stepper__toggle-5f7111e6","tedi-vertical-stepper__toggle-button":"tedi-vertical-stepper__toggle-button-f9acf14c","tedi-vertical-stepper__label":"tedi-vertical-stepper__label-b58a742d","tedi-vertical-stepper__label-icon":"tedi-vertical-stepper__label-icon-4dc08a47","tedi-vertical-stepper__description":"tedi-vertical-stepper__description-13aceaa3","tedi-vertical-stepper__end-slot":"tedi-vertical-stepper__end-slot-9333f737","tedi-vertical-stepper__item--disabled":"tedi-vertical-stepper__item--disabled-bd12c124","tedi-vertical-stepper__item--current":"tedi-vertical-stepper__item--current-959ca498","tedi-vertical-stepper__sub-list":"tedi-vertical-stepper__sub-list-4d058866","tedi-vertical-stepper__sub-item":"tedi-vertical-stepper__sub-item-a036a2cd","tedi-vertical-stepper__sub-indicator":"tedi-vertical-stepper__sub-indicator-49af9ca3","tedi-vertical-stepper__sub-dot":"tedi-vertical-stepper__sub-dot-2bf34163","tedi-vertical-stepper__sub-item--completed":"tedi-vertical-stepper__sub-item--completed-91a65a8a","tedi-vertical-stepper__sub-item--error":"tedi-vertical-stepper__sub-item--error-488deabe","tedi-vertical-stepper__sub-item--informative":"tedi-vertical-stepper__sub-item--informative-6efb4c22","tedi-vertical-stepper__sub-item--disabled":"tedi-vertical-stepper__sub-item--disabled-fa41df61","tedi-vertical-stepper__sub-item--current":"tedi-vertical-stepper__sub-item--current-4b39be16","tedi-vertical-stepper--compact":"tedi-vertical-stepper--compact-9310cb8d"};exports.default=e;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
const e = {
|
|
2
|
+
"tedi-vertical-stepper": "tedi-vertical-stepper-cc48e08e",
|
|
3
|
+
"tedi-vertical-stepper__item": "tedi-vertical-stepper__item-5359847f",
|
|
4
|
+
"tedi-vertical-stepper__item--has-children": "tedi-vertical-stepper__item--has-children-83e7ee73",
|
|
5
|
+
"tedi-vertical-stepper__indicator": "tedi-vertical-stepper__indicator-041dc249",
|
|
6
|
+
"tedi-vertical-stepper__number": "tedi-vertical-stepper__number-a8243903",
|
|
7
|
+
"tedi-vertical-stepper__content": "tedi-vertical-stepper__content-0be415df",
|
|
8
|
+
"tedi-vertical-stepper__link": "tedi-vertical-stepper__link-fe115434",
|
|
9
|
+
"tedi-vertical-stepper__label-text": "tedi-vertical-stepper__label-text-173ed5d2",
|
|
10
|
+
"tedi-vertical-stepper__item--default": "tedi-vertical-stepper__item--default-a0855686",
|
|
11
|
+
"tedi-vertical-stepper__item--completed": "tedi-vertical-stepper__item--completed-6afeb234",
|
|
12
|
+
"tedi-vertical-stepper__item--error": "tedi-vertical-stepper__item--error-ffa453e0",
|
|
13
|
+
"tedi-vertical-stepper__toggle": "tedi-vertical-stepper__toggle-5f7111e6",
|
|
14
|
+
"tedi-vertical-stepper__toggle-button": "tedi-vertical-stepper__toggle-button-f9acf14c",
|
|
15
|
+
"tedi-vertical-stepper__label": "tedi-vertical-stepper__label-b58a742d",
|
|
16
|
+
"tedi-vertical-stepper__label-icon": "tedi-vertical-stepper__label-icon-4dc08a47",
|
|
17
|
+
"tedi-vertical-stepper__description": "tedi-vertical-stepper__description-13aceaa3",
|
|
18
|
+
"tedi-vertical-stepper__end-slot": "tedi-vertical-stepper__end-slot-9333f737",
|
|
19
|
+
"tedi-vertical-stepper__item--disabled": "tedi-vertical-stepper__item--disabled-bd12c124",
|
|
20
|
+
"tedi-vertical-stepper__item--current": "tedi-vertical-stepper__item--current-959ca498",
|
|
21
|
+
"tedi-vertical-stepper__sub-list": "tedi-vertical-stepper__sub-list-4d058866",
|
|
22
|
+
"tedi-vertical-stepper__sub-item": "tedi-vertical-stepper__sub-item-a036a2cd",
|
|
23
|
+
"tedi-vertical-stepper__sub-indicator": "tedi-vertical-stepper__sub-indicator-49af9ca3",
|
|
24
|
+
"tedi-vertical-stepper__sub-dot": "tedi-vertical-stepper__sub-dot-2bf34163",
|
|
25
|
+
"tedi-vertical-stepper__sub-item--completed": "tedi-vertical-stepper__sub-item--completed-91a65a8a",
|
|
26
|
+
"tedi-vertical-stepper__sub-item--error": "tedi-vertical-stepper__sub-item--error-488deabe",
|
|
27
|
+
"tedi-vertical-stepper__sub-item--informative": "tedi-vertical-stepper__sub-item--informative-6efb4c22",
|
|
28
|
+
"tedi-vertical-stepper__sub-item--disabled": "tedi-vertical-stepper__sub-item--disabled-fa41df61",
|
|
29
|
+
"tedi-vertical-stepper__sub-item--current": "tedi-vertical-stepper__sub-item--current-4b39be16",
|
|
30
|
+
"tedi-vertical-stepper--compact": "tedi-vertical-stepper--compact-9310cb8d"
|
|
31
|
+
};
|
|
32
|
+
export {
|
|
33
|
+
e as default
|
|
34
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),A=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),v=require("./dropdown.module.scss.cjs.js"),z=require("./dropdown-content/dropdown-content.cjs.js"),G=require("./dropdown-context.cjs.js"),J=require("./dropdown-helpers.cjs.js"),K=require("./dropdown-item/dropdown-item.cjs.js"),Q=require("./dropdown-separator/dropdown-separator.cjs.js"),V=require("./dropdown-trigger/dropdown-trigger.cjs.js"),X=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Y=require("../../../providers/label-provider/use-labels.cjs.js"),Z=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),h=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),ee=4,a=x=>{var O;const{getCurrentBreakpointProps:F}=X.useBreakpointProps(x.defaultServerBreakpoint),{children:P,modal:q=!1,divided:R=!1,width:b="auto",variant:p="default",open:f,defaultOpen:y=!1,onOpenChange:l,defaultActiveIndex:n,placement:g="bottom-start",maxHeight:c,className:j}=F(x),{getLabel:N}=Y.useLabels(),_=e.useFloatingNodeId(),D=t.useRef([]),[u,m]=t.useState(n??null),[w,k]=t.useState(null),[B,T]=t.useState(y),o=f??B;t.useEffect(()=>{o||m(n??null)},[o,n]);const I=t.useCallback(i=>{f===void 0&&T(i),l==null||l(i)},[f,l]),U=e.useFloating({nodeId:_,open:o,placement:g,onOpenChange:I,middleware:[h.offset(ee),h.flip(),h.shift()],whileElementsMounted:Z.autoUpdate}),{context:r,refs:s,x:H,y:L,strategy:M}=U,C=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:D,activeIndex:u,onNavigate:m,loop:!0,selectedIndex:n??null,focusItemOnOpen:n!==null?!0:"auto"})]),W={open:o,setOpen:I,refs:s,listItemsRef:D,activeIndex:u,setActiveIndex:m,placement:g,content:w,setContent:k,divided:R,variant:p,...C},E=(O=s.reference.current)==null?void 0:O.getBoundingClientRect().width,$=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const S=i.offsetParent;if(S)return S.getBoundingClientRect().width},[s.reference.current]);return d.jsxs(G.DropdownContext.Provider,{value:W,children:[P,d.jsx(e.FloatingPortal,{children:o&&d.jsx(e.FloatingFocusManager,{context:r,modal:q,visuallyHiddenDismiss:q?N("close"):!1,children:d.jsx("div",{...C.getFloatingProps({ref:s.setFloating,className:A.default(v.default["tedi-dropdown"],{[v.default[`tedi-dropdown--${p}`]]:p==="tree"},j),style:{position:M,left:H??0,top:L??0,width:J.resolveDropdownWidth(b,E,$)},role:"menu","aria-orientation":"vertical","aria-activedescendant":u!==null?`dropdown-item-${u}`:void 0}),"data-placement":g,"data-state":o?"open":"closed",children:c!==void 0?d.jsx("div",{className:v.default["tedi-dropdown__scroll"],style:{maxHeight:typeof c=="number"?`${c}px`:c},children:w}):w})})})]})};a.Trigger=V.DropdownTrigger;a.Content=z.DropdownContent;a.Item=K.DropdownItem;a.Separator=Q.DropdownSeparator;exports.Dropdown=a;
|
|
@@ -34,6 +34,14 @@ type DropdownBreakpointProps = {
|
|
|
34
34
|
* @default 'default'
|
|
35
35
|
*/
|
|
36
36
|
variant?: 'default' | 'tree';
|
|
37
|
+
/**
|
|
38
|
+
* Restricts the height of the dropdown's scrollable body. When the content is taller,
|
|
39
|
+
* the body scrolls vertically while any sticky regions (e.g. a Filter search / clear) stay pinned.
|
|
40
|
+
* - `number` – fixed max height in pixels
|
|
41
|
+
* - `string` – any valid CSS length (e.g. `'20rem'`, `'50vh'`)
|
|
42
|
+
* @default undefined (no restriction)
|
|
43
|
+
*/
|
|
44
|
+
maxHeight?: number | string;
|
|
37
45
|
};
|
|
38
46
|
export interface DropdownProps extends BreakpointSupport<DropdownBreakpointProps> {
|
|
39
47
|
/**
|