@tedi-design-system/react 14.1.0 → 14.2.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "14.1.0",
+  "version": "14.2.0-rc.2",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/community/components/vertical-stepper/step-item/step-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),g=require("react"),i=require("../../../../tedi/components/base/icon/icon.cjs.js"),q=require("../../../../tedi/components/buttons/collapse/collapse.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),n=require("../../../../tedi/components/layout/grid/row.cjs.js"),o=require("../../../../tedi/components/layout/grid/col.cjs.js"),v=({children:t,className:x,isSelected:d,hasIcon:r,title:p,href:j,onClick:u,state:l="default",info:a})=>{const[m,f]=g.useState(!1),h=N.default(s.default["stepper-item"],{[s.default[l]]:l,[s.default.selected]:d,[s.default["has-info"]]:a&&!t,[s.default["info-with-children"]]:a&&t,[s.default["stepper-collapse-open"]]:m},x);return e.jsxs("li",{role:"treeitem","aria-selected":d,className:h,children:[e.jsx("span",{className:s.default["stepper-counter"]}),e.jsx("div",{className:s.default["stepper-content"],children:t?e.jsx(q.Collapse,{onToggle:c=>f(c),open:m,hideCollapseText:!0,id:"vertical-stepper-collapse",className:s.default["stepper-item-collapse"],title:e.jsxs(e.Fragment,{children:[e.jsx(n.Row,{alignItems:"start",children:e.jsxs(o.Col,{className:s.default["stepper-link"],children:[p,r&&l==="error"&&e.jsx(i.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["radio__tooltip-icon"]}),r&&l==="completed"&&e.jsx(i.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["radio__tooltip-icon"]})]})}),e.jsx(n.Row,{children:e.jsx(o.Col,{children:a})})]}),children:t&&e.jsx("ul",{className:s.default["sub-item-list"],children:t})}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:s.default["stepper-link-container"],children:[e.jsx("a",{href:j,onClick:c=>{c.preventDefault(),u&&u()},className:s.default["stepper-link"],children:p}),e.jsxs("span",{className:s.default["stepper-link-icon"],children:[r&&l==="error"&&e.jsx(i.Icon,{name:"error",color:"danger",size:16,display:"inline"}),r&&l==="completed"&&e.jsx(i.Icon,{name:"check",color:"success",size:16,display:"inline"})]})]}),e.jsx(n.Row,{children:e.jsx(o.Col,{children:a})})]})}),e.jsx("div",{className:s.default["stepper-line"]})]})};exports.StepItem=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),f=require("../../../../tedi/components/base/typography/text/text.cjs.js"),n=require("../../../../tedi/components/base/icon/icon.cjs.js"),I=require("../../../../tedi/components/buttons/collapse/collapse.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),c=require("../../../../tedi/components/layout/grid/row.cjs.js"),o=require("../../../../tedi/components/layout/grid/col.cjs.js"),R=({children:t,className:h,isSelected:d,hasIcon:r,title:p,href:N,onClick:u,state:l="default",info:a,isOpen:m,onToggle:x})=>{const[g,q]=C.useState(!1),j=m??g,v=i=>{x&&x(i),m===void 0&&q(i)},k=y.default(s.default["stepper-item"],{[s.default[l]]:l,[s.default.selected]:d,[s.default["has-info"]]:a&&!t,[s.default["info-with-children"]]:a&&t,[s.default["stepper-collapse-open"]]:j},h);return e.jsxs("li",{role:"treeitem","aria-selected":d,className:k,children:[e.jsx("span",{className:s.default["stepper-counter"]}),e.jsx("div",{className:s.default["stepper-content"],children:t?e.jsx(I.Collapse,{onToggle:v,open:j,hideCollapseText:!0,id:"vertical-stepper-collapse",className:s.default["stepper-item-collapse"],title:e.jsxs(e.Fragment,{children:[e.jsx(c.Row,{alignItems:"start",children:e.jsx(o.Col,{children:e.jsxs(f.Text,{className:s.default["stepper-link"],children:[p,r&&l==="error"&&e.jsx(n.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["radio__tooltip-icon"]}),r&&l==="completed"&&e.jsx(n.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["radio__tooltip-icon"]})]})})}),e.jsx(c.Row,{children:e.jsx(o.Col,{children:a})})]}),children:t&&e.jsx("ul",{className:s.default["sub-item-list"],children:t})}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.default["stepper-link-container"],children:e.jsx("a",{href:N,onClick:i=>{i.preventDefault(),u&&u()},className:s.default["stepper-link"],children:e.jsxs(f.Text,{children:[p,e.jsxs("span",{className:s.default["stepper-link-icon"],children:[r&&l==="error"&&e.jsx(n.Icon,{name:"error",color:"danger",size:16,display:"inline"}),r&&l==="completed"&&e.jsx(n.Icon,{name:"check",color:"success",size:16,display:"inline"})]})]})})}),e.jsx(c.Row,{children:e.jsx(o.Col,{children:a})})]})}),e.jsx("div",{className:s.default["stepper-line"]})]})};exports.StepItem=R;

package/src/community/components/vertical-stepper/step-item/step-item.d.ts

@@ -21,5 +21,9 @@ export interface StepItemProps {
      * Additional info components like StatusBadge, Button, Link or Text.
      */
     info?: React.ReactNode;
+    /** Controls the collapse externally if provided */
+    isOpen?: boolean;
+    /** Called when collapse is toggled */
+    onToggle?: (isOpen: boolean) => void;
 }
-export declare const StepItem: ({ children, className, isSelected, hasIcon, title, href, onClick, state, info, }: StepItemProps) => JSX.Element;
+export declare const StepItem: ({ children, className, isSelected, hasIcon, title, href, onClick, state, info, isOpen, onToggle, }: StepItemProps) => JSX.Element;

package/src/community/components/vertical-stepper/step-item/step-item.es.js

@@ -1,94 +1,99 @@
-import { jsxs as s, jsx as l, Fragment as f } from "react/jsx-runtime";
-import v from "../../../../../external/classnames/index.es.js";
-import y from "react";
+import { jsxs as s, jsx as e, Fragment as g } from "react/jsx-runtime";
+import T from "../../../../../external/classnames/index.es.js";
+import j from "react";
+import { Text as k } from "../../../../tedi/components/base/typography/text/text.es.js";
 import { Icon as c } from "../../../../tedi/components/base/icon/icon.es.js";
-import { Collapse as x } from "../../../../tedi/components/buttons/collapse/collapse.es.js";
-import e from "../vertical-stepper.module.scss.es.js";
-import { Row as p } from "../../../../tedi/components/layout/grid/row.es.js";
-import { Col as n } from "../../../../tedi/components/layout/grid/col.es.js";
-const F = ({
+import { Collapse as I } from "../../../../tedi/components/buttons/collapse/collapse.es.js";
+import r from "../vertical-stepper.module.scss.es.js";
+import { Row as n } from "../../../../tedi/components/layout/grid/row.es.js";
+import { Col as p } from "../../../../tedi/components/layout/grid/col.es.js";
+const E = ({
   children: i,
-  className: u,
+  className: v,
   isSelected: m,
   hasIcon: o,
   title: d,
-  href: g,
-  onClick: N,
-  state: r = "default",
-  info: a
+  href: _,
+  onClick: h,
+  state: l = "default",
+  info: a,
+  isOpen: f,
+  onToggle: N
 }) => {
-  const [h, k] = y.useState(!1), _ = v(
-    e["stepper-item"],
+  const [x, y] = j.useState(!1), u = f ?? x, z = (t) => {
+    N && N(t), f === void 0 && y(t);
+  }, C = T(
+    r["stepper-item"],
     {
-      [e[r]]: r,
-      [e.selected]: m,
-      [e["has-info"]]: a && !i,
-      [e["info-with-children"]]: a && i,
-      [e["stepper-collapse-open"]]: h
+      [r[l]]: l,
+      [r.selected]: m,
+      [r["has-info"]]: a && !i,
+      [r["info-with-children"]]: a && i,
+      [r["stepper-collapse-open"]]: u
     },
-    u
+    v
   );
-  return /* @__PURE__ */ s("li", { role: "treeitem", "aria-selected": m, className: _, children: [
-    /* @__PURE__ */ l("span", { className: e["stepper-counter"] }),
-    /* @__PURE__ */ l("div", { className: e["stepper-content"], children: i ? /* @__PURE__ */ l(
-      x,
+  return /* @__PURE__ */ s("li", { role: "treeitem", "aria-selected": m, className: C, children: [
+    /* @__PURE__ */ e("span", { className: r["stepper-counter"] }),
+    /* @__PURE__ */ e("div", { className: r["stepper-content"], children: i ? /* @__PURE__ */ e(
+      I,
       {
-        onToggle: (t) => k(t),
-        open: h,
+        onToggle: z,
+        open: u,
         hideCollapseText: !0,
         id: "vertical-stepper-collapse",
-        className: e["stepper-item-collapse"],
-        title: /* @__PURE__ */ s(f, { children: [
-          /* @__PURE__ */ l(p, { alignItems: "start", children: /* @__PURE__ */ s(n, { className: e["stepper-link"], children: [
+        className: r["stepper-item-collapse"],
+        title: /* @__PURE__ */ s(g, { children: [
+          /* @__PURE__ */ e(n, { alignItems: "start", children: /* @__PURE__ */ e(p, { children: /* @__PURE__ */ s(k, { className: r["stepper-link"], children: [
             d,
-            o && r === "error" && /* @__PURE__ */ l(
+            o && l === "error" && /* @__PURE__ */ e(
               c,
               {
                 name: "error",
                 color: "danger",
                 size: 16,
                 display: "inline",
-                className: e["radio__tooltip-icon"]
+                className: r["radio__tooltip-icon"]
               }
             ),
-            o && r === "completed" && /* @__PURE__ */ l(
+            o && l === "completed" && /* @__PURE__ */ e(
               c,
               {
                 name: "check",
                 color: "success",
                 size: 16,
                 display: "inline",
-                className: e["radio__tooltip-icon"]
+                className: r["radio__tooltip-icon"]
               }
             )
-          ] }) }),
-          /* @__PURE__ */ l(p, { children: /* @__PURE__ */ l(n, { children: a }) })
+          ] }) }) }),
+          /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(p, { children: a }) })
         ] }),
-        children: i && /* @__PURE__ */ l("ul", { className: e["sub-item-list"], children: i })
+        children: i && /* @__PURE__ */ e("ul", { className: r["sub-item-list"], children: i })
       }
-    ) : /* @__PURE__ */ s(f, { children: [
-      /* @__PURE__ */ s("div", { className: e["stepper-link-container"], children: [
-        /* @__PURE__ */ l(
-          "a",
-          {
-            href: g,
-            onClick: (t) => {
-              t.preventDefault(), N && N();
-            },
-            className: e["stepper-link"],
-            children: d
-          }
-        ),
-        /* @__PURE__ */ s("span", { className: e["stepper-link-icon"], children: [
-          o && r === "error" && /* @__PURE__ */ l(c, { name: "error", color: "danger", size: 16, display: "inline" }),
-          o && r === "completed" && /* @__PURE__ */ l(c, { name: "check", color: "success", size: 16, display: "inline" })
-        ] })
-      ] }),
-      /* @__PURE__ */ l(p, { children: /* @__PURE__ */ l(n, { children: a }) })
+    ) : /* @__PURE__ */ s(g, { children: [
+      /* @__PURE__ */ e("div", { className: r["stepper-link-container"], children: /* @__PURE__ */ e(
+        "a",
+        {
+          href: _,
+          onClick: (t) => {
+            t.preventDefault(), h && h();
+          },
+          className: r["stepper-link"],
+          children: /* @__PURE__ */ s(k, { children: [
+            d,
+            /* @__PURE__ */ s("span", { className: r["stepper-link-icon"], children: [
+              o && l === "error" && /* @__PURE__ */ e(c, { name: "error", color: "danger", size: 16, display: "inline" }),
+              o && l === "completed" && /* @__PURE__ */ e(c, { name: "check", color: "success", size: 16, display: "inline" })
+            ] })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(p, { children: a }) })
     ] }) }),
-    /* @__PURE__ */ l("div", { className: e["stepper-line"] })
+    /* @__PURE__ */ e("div", { className: r["stepper-line"] })
   ] });
 };
 export {
-  F as StepItem
+  E as StepItem
 };

package/src/community/components/vertical-stepper/sub-item/sub-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),i=require("../../../../tedi/components/base/icon/icon.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),j=({children:r,className:n,state:t="default",isSelected:l,hasIcon:a,title:c,href:o,as:d="a",onClick:u})=>{const m=d,f=x.default(s.default["sub-item"],{[s.default[t]]:t,[s.default.selected]:l},n);return e.jsxs(e.Fragment,{children:[e.jsxs("li",{role:"treeitem",className:f,"aria-selected":l,children:[e.jsx("span",{className:s.default["sub-item-dot-container"],children:e.jsx("span",{className:s.default["sub-item-dot"]})}),e.jsxs("span",{className:s.default["sub-item-text"],children:[e.jsx(m,{href:o,onClick:u,className:s.default["sub-item-link"],children:c}),a&&t==="error"&&e.jsx(i.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["radio__tooltip-icon"]}),a&&t==="completed"&&e.jsx(i.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["radio__tooltip-icon"]})]})]}),e.jsx("div",{children:r})]})};exports.SubItem=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),f=require("../../../../tedi/components/base/typography/text/text.cjs.js"),r=require("../../../../tedi/components/base/icon/icon.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),p=({children:a,className:n,state:t="default",isSelected:l,hasIcon:i,title:c,href:o,as:d="a",onClick:u})=>{const m=d,x=j.default(s.default["sub-item"],{[s.default[t]]:t,[s.default.selected]:l},n);return e.jsxs(e.Fragment,{children:[e.jsxs("li",{role:"treeitem",className:x,"aria-selected":l,children:[e.jsx("span",{className:s.default["sub-item-dot-container"],children:e.jsx("span",{className:s.default["sub-item-dot"]})}),e.jsx("span",{className:s.default["sub-item-text"],children:e.jsx(m,{href:o,onClick:u,children:e.jsxs(f.Text,{children:[c,i&&t==="error"&&e.jsx(r.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["radio__tooltip-icon"]}),i&&t==="completed"&&e.jsx(r.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["radio__tooltip-icon"]})]})})})]}),e.jsx("div",{children:a})]})};exports.SubItem=p;

package/src/community/components/vertical-stepper/sub-item/sub-item.es.js

@@ -1,14 +1,15 @@
-import { jsxs as r, Fragment as b, jsx as s } from "react/jsx-runtime";
+import { jsxs as i, Fragment as b, jsx as s } from "react/jsx-runtime";
 import f from "../../../../../external/classnames/index.es.js";
+import { Text as h } from "../../../../tedi/components/base/typography/text/text.es.js";
 import { Icon as l } from "../../../../tedi/components/base/icon/icon.es.js";
 import e from "../vertical-stepper.module.scss.es.js";
-const g = ({
-  children: m,
-  className: c,
-  state: i = "default",
+const z = ({
+  children: a,
+  className: t,
+  state: r = "default",
   isSelected: o,
-  hasIcon: a,
-  title: t,
+  hasIcon: m,
+  title: c,
   href: n,
   as: d = "a",
   onClick: p
@@ -16,23 +17,41 @@ const g = ({
   const u = d, N = f(
     e["sub-item"],
     {
-      [e[i]]: i,
+      [e[r]]: r,
       [e.selected]: o
     },
-    c
+    t
   );
-  return /* @__PURE__ */ r(b, { children: [
-    /* @__PURE__ */ r("li", { role: "treeitem", className: N, "aria-selected": o, children: [
+  return /* @__PURE__ */ i(b, { children: [
+    /* @__PURE__ */ i("li", { role: "treeitem", className: N, "aria-selected": o, children: [
       /* @__PURE__ */ s("span", { className: e["sub-item-dot-container"], children: /* @__PURE__ */ s("span", { className: e["sub-item-dot"] }) }),
-      /* @__PURE__ */ r("span", { className: e["sub-item-text"], children: [
-        /* @__PURE__ */ s(u, { href: n, onClick: p, className: e["sub-item-link"], children: t }),
-        a && i === "error" && /* @__PURE__ */ s(l, { name: "error", color: "danger", size: 16, display: "inline", className: e["radio__tooltip-icon"] }),
-        a && i === "completed" && /* @__PURE__ */ s(l, { name: "check", color: "success", size: 16, display: "inline", className: e["radio__tooltip-icon"] })
-      ] })
+      /* @__PURE__ */ s("span", { className: e["sub-item-text"], children: /* @__PURE__ */ s(u, { href: n, onClick: p, children: /* @__PURE__ */ i(h, { children: [
+        c,
+        m && r === "error" && /* @__PURE__ */ s(
+          l,
+          {
+            name: "error",
+            color: "danger",
+            size: 16,
+            display: "inline",
+            className: e["radio__tooltip-icon"]
+          }
+        ),
+        m && r === "completed" && /* @__PURE__ */ s(
+          l,
+          {
+            name: "check",
+            color: "success",
+            size: 16,
+            display: "inline",
+            className: e["radio__tooltip-icon"]
+          }
+        )
+      ] }) }) })
     ] }),
-    /* @__PURE__ */ s("div", { children: m })
+    /* @__PURE__ */ s("div", { children: a })
   ] });
 };
 export {
-  g as SubItem
+  z as SubItem
 };