@tedi-design-system/react 15.0.0-rc.5 → 15.0.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "15.0.0-rc.5",
+  "version": "15.0.0-rc.6",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -22,7 +22,7 @@
     "build": "rm -rf dist && vite build --config vite.config.ts && replace-in-file //fonts//g \"./fonts/\" dist/index.css --isRegex",
     "build:sb": "storybook build -c .storybook -o dist/storybook-static",
     "lint": "npx stylelint \"src/**/*.scss\" --fix && eslint \"src/**/*.{ts,tsx}\" --no-ignore --fix",
-    "lint:ci": "npx stylelint \"src/**/*.scss\" && eslint --quiet",
+    "lint:ci": "npx stylelint \"src/**/*.scss\" --quiet && npx eslint . --quiet",
     "test": "jest --config ./jest.config.ts --passWithNoTests",
     "test:coverage": "jest --config ./jest.config.ts --coverage",
     "release": "npx semantic-release",
@@ -43,7 +43,7 @@
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-table": "^8.13.2",
-    "@tedi-design-system/core": "3.0.0",
+    "@tedi-design-system/core": "3.0.1",
     "classnames": "^2.5.1",
     "draft-js": "^0.11.7",
     "draftjs-md-converter": "^1.5.2",

package/src/tedi/components/buttons/collapse/collapse.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),z=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),E=require("../../base/icon/icon.cjs.js"),K=require("../../base/typography/text/text.cjs.js"),A=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),F=require("../../../helpers/hooks/use-print.cjs.js"),G=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),H=require("../../../providers/label-provider/use-labels.cjs.js"),N=require("../../layout/grid/row.cjs.js"),o=require("../../layout/grid/col.cjs.js"),P=_=>{const{getCurrentBreakpointProps:k}=G.useBreakpointProps(_.defaultServerBreakpoint),{getLabel:x}=H.useLabels(),{id:r,children:h,className:I,openText:w=x("open"),closeText:j=x("close"),hideCollapseText:g=!1,title:b,titleRowProps:$,defaultOpen:O,open:c,onToggle:d,arrowType:n="default",size:i="default",underline:S=!0,toggleLabel:q,...B}=k(_),u=`${r}__trigger`,p=`${r}__content`,M=`${r}__animate`,[y,R]=f.useState(()=>O),m=F.usePrint(),a=f.useMemo(()=>m||(c!==void 0?c:y),[m,c,y]),T=s.default(e.default["tedi-collapse"],i==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],g&&e.default["tedi-collapse--icon-only"],e.default[`tedi-collapse--arrow-${n}`],I),C=()=>{const l=!a;R(l),d==null||d(l)},L=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),C())},D=q||(a?j:w),v=f.useMemo(()=>t.jsx("div",{id:p,role:"region","aria-labelledby":u,className:e.default["tedi-collapse__content"],children:h}),[h,p,u]);return t.jsxs("div",{"data-name":"collapse",...B,className:T,children:[t.jsx("button",{id:u,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":D,"aria-expanded":a,"aria-controls":p,onKeyDown:L,onClick:C,children:t.jsxs(N.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...$,element:"span",children:[b&&t.jsx(o.Col,{"aria-hidden":"true",children:b}),t.jsx(o.Col,{width:"auto",children:t.jsxs(N.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(A.Print,{visibility:"hide",children:t.jsx(o.Col,{width:"auto",className:s.default({"visually-hidden":g}),children:t.jsx(K.Text,{element:"span",className:s.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:S}),children:a?j:w})})}),t.jsx(o.Col,{width:"auto",children:t.jsx("div",{className:s.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${n}`],i==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(E.Icon,{className:s.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${n}`],i==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:i==="small"||n==="secondary"?18:24})})})]})})]})}),m?v:t.jsx(z.default,{id:M,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:v})]})};exports.Collapse=P;exports.default=P;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),K=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),A=require("../../base/icon/icon.cjs.js"),F=require("../../base/typography/text/text.cjs.js"),G=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),H=require("../../../helpers/hooks/use-print.cjs.js"),J=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Q=require("../../../providers/label-provider/use-labels.cjs.js"),v=require("../../layout/grid/row.cjs.js"),i=require("../../layout/grid/col.cjs.js"),N=x=>{const{getCurrentBreakpointProps:P}=J.useBreakpointProps(x.defaultServerBreakpoint),{getLabel:h}=Q.useLabels(),{id:r,children:w,className:k,openText:j=h("open"),closeText:g=h("close"),hideCollapseText:I=!1,title:c,titleRowProps:O,defaultOpen:$,open:d,onToggle:u,arrowType:n="default",size:o="default",underline:S=!0,toggleLabel:y,iconOnly:B=!1,...M}=P(x),p=`${r}__trigger`,f=`${r}__content`,R=`${r}__animate`,[b,T]=_.useState(()=>$),m=H.usePrint(),a=_.useMemo(()=>m||(d!==void 0?d:b),[m,d,b]),L=B===!0&&!c,D=s.default(e.default["tedi-collapse"],o==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],L&&e.default["tedi-collapse--icon-only"],e.default[`tedi-collapse--arrow-${n}`],k),q=()=>{const l=!a;T(l),u==null||u(l)},z=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),q())},E=y||(a?g:j),C=_.useMemo(()=>t.jsx("div",{id:f,role:"region","aria-labelledby":p,className:e.default["tedi-collapse__content"],children:w}),[w,f,p]);return t.jsxs("div",{"data-name":"collapse",...M,className:D,children:[t.jsx("button",{id:p,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":E,"aria-expanded":a,"aria-controls":f,onKeyDown:z,onClick:q,children:t.jsxs(v.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...O,element:"span",children:[c&&t.jsx(i.Col,{"aria-hidden":"true",children:c}),t.jsx(i.Col,{width:"auto",children:t.jsxs(v.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(G.Print,{visibility:"hide",children:t.jsx(i.Col,{width:"auto",className:s.default({"visually-hidden":I}),children:t.jsx(F.Text,{element:"span",className:s.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:S}),children:a?g:j})})}),t.jsx(i.Col,{width:"auto",children:t.jsx("div",{className:s.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${n}`],o==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(A.Icon,{className:s.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${n}`],o==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:o==="small"||n==="secondary"?18:24})})})]})})]})}),m?C:t.jsx(K.default,{id:R,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:C})]})};exports.Collapse=N;exports.default=N;

package/src/tedi/components/buttons/collapse/collapse.d.ts

@@ -34,6 +34,12 @@ type CollapseBreakpointProps = {
      */
     size?: 'default' | 'small';
     underline?: boolean;
+    /**
+     * Render collapse as icon-only toggle.
+     * Icon-only styles are applied ONLY when no title is provided.
+     * @default false
+     */
+    iconOnly?: boolean;
 };
 export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps> {
     /**

package/src/tedi/components/buttons/collapse/collapse.es.js

@@ -1,77 +1,78 @@
-import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
 import o from "../../../../../external/classnames/index.es.js";
-import h from "react";
-import E from "../../../../../external/react-animate-height/dist/esm/index.es.js";
-import { Icon as K } from "../../base/icon/icon.es.js";
-import { Text as A } from "../../base/typography/text/text.es.js";
-import { Print as H } from "../../misc/print/print.es.js";
+import f from "react";
+import A from "../../../../../external/react-animate-height/dist/esm/index.es.js";
+import { Icon as H } from "../../base/icon/icon.es.js";
+import { Text as q } from "../../base/typography/text/text.es.js";
+import { Print as F } from "../../misc/print/print.es.js";
 import e from "./collapse.module.scss.es.js";
-import { usePrint as q } from "../../../helpers/hooks/use-print.es.js";
-import { useBreakpointProps as F } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as G } from "../../../providers/label-provider/use-labels.es.js";
-import { Row as P } from "../../layout/grid/row.es.js";
+import { usePrint as G } from "../../../helpers/hooks/use-print.es.js";
+import { useBreakpointProps as J } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
+import { Row as k } from "../../layout/grid/row.es.js";
 import { Col as s } from "../../layout/grid/col.es.js";
-const ie = (f) => {
-  const { getCurrentBreakpointProps: $ } = F(f.defaultServerBreakpoint), { getLabel: w } = G(), {
+const se = (w) => {
+  const { getCurrentBreakpointProps: O } = J(w.defaultServerBreakpoint), { getLabel: y } = Q(), {
     id: r,
     children: g,
-    className: O,
-    openText: y = w("open"),
-    closeText: b = w("close"),
-    hideCollapseText: x = !1,
-    title: N,
+    className: P,
+    openText: b = y("open"),
+    closeText: x = y("close"),
+    hideCollapseText: $ = !1,
+    title: c,
     titleRowProps: B,
     defaultOpen: S,
-    open: c,
-    onToggle: d,
-    arrowType: i = "default",
-    size: n = "default",
+    open: d,
+    onToggle: p,
+    arrowType: n = "default",
+    size: i = "default",
     underline: T = !0,
-    toggleLabel: C,
-    ...j
-  } = $(f), p = `${r}__trigger`, m = `${r}__content`, D = `${r}__animate`, [v, L] = h.useState(() => S), u = q(), l = h.useMemo(
-    () => u || (c !== void 0 ? c : v),
-    [u, c, v]
-  ), M = o(
+    toggleLabel: N,
+    iconOnly: j = !1,
+    ...D
+  } = O(w), m = `${r}__trigger`, u = `${r}__content`, L = `${r}__animate`, [C, M] = f.useState(() => S), _ = G(), a = f.useMemo(
+    () => _ || (d !== void 0 ? d : C),
+    [_, d, C]
+  ), R = j === !0 && !c, z = o(
     e["tedi-collapse"],
-    n === "small" && e["tedi-collapse--small"],
-    l && e["tedi-collapse--is-open"],
-    x && e["tedi-collapse--icon-only"],
-    e[`tedi-collapse--arrow-${i}`],
-    O
-  ), k = () => {
-    const a = !l;
-    L(a), d == null || d(a);
-  }, R = (a) => {
-    (a.key === "Enter" || a.key === " ") && !a.repeat && (a.preventDefault(), k());
-  }, z = C || (l ? b : y), I = h.useMemo(
-    () => /* @__PURE__ */ t("div", { id: m, role: "region", "aria-labelledby": p, className: e["tedi-collapse__content"], children: g }),
-    [g, m, p]
+    i === "small" && e["tedi-collapse--small"],
+    a && e["tedi-collapse--is-open"],
+    R && e["tedi-collapse--icon-only"],
+    e[`tedi-collapse--arrow-${n}`],
+    P
+  ), v = () => {
+    const l = !a;
+    M(l), p == null || p(l);
+  }, E = (l) => {
+    (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), v());
+  }, K = N || (a ? x : b), I = f.useMemo(
+    () => /* @__PURE__ */ t("div", { id: u, role: "region", "aria-labelledby": m, className: e["tedi-collapse__content"], children: g }),
+    [g, u, m]
   );
-  return /* @__PURE__ */ _("div", { "data-name": "collapse", ...j, className: M, children: [
+  return /* @__PURE__ */ h("div", { "data-name": "collapse", ...D, className: z, children: [
     /* @__PURE__ */ t(
       "button",
       {
-        id: p,
+        id: m,
         type: "button",
         "data-name": "collapse-trigger",
         className: e["tedi-collapse__title"],
-        "aria-label": z,
-        "aria-expanded": l,
-        "aria-controls": m,
-        onKeyDown: R,
-        onClick: k,
-        children: /* @__PURE__ */ _(P, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
-          N && /* @__PURE__ */ t(s, { "aria-hidden": "true", children: N }),
-          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ _(P, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
-            /* @__PURE__ */ t(H, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: o({ "visually-hidden": x }), children: /* @__PURE__ */ t(
-              A,
+        "aria-label": K,
+        "aria-expanded": a,
+        "aria-controls": u,
+        onKeyDown: E,
+        onClick: v,
+        children: /* @__PURE__ */ h(k, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
+          c && /* @__PURE__ */ t(s, { "aria-hidden": "true", children: c }),
+          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ h(k, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
+            /* @__PURE__ */ t(F, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: o({ "visually-hidden": $ }), children: /* @__PURE__ */ t(
+              q,
               {
                 element: "span",
                 className: o(e["tedi-collapse__text"], {
                   [e["tedi-collapse__text--underline"]]: T
                 }),
-                children: l ? b : y
+                children: a ? x : b
               }
             ) }) }),
             /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ t(
@@ -79,19 +80,19 @@ const ie = (f) => {
               {
                 className: o(
                   e["tedi-collapse__icon-wrapper"],
-                  e[`tedi-collapse__icon-wrapper--${i}`],
-                  n === "small" && e["tedi-collapse__icon-wrapper--small"]
+                  e[`tedi-collapse__icon-wrapper--${n}`],
+                  i === "small" && e["tedi-collapse__icon-wrapper--small"]
                 ),
                 children: /* @__PURE__ */ t(
-                  K,
+                  H,
                   {
                     className: o(
                       e["tedi-collapse__icon"],
-                      e[`tedi-collapse__icon--${i}`],
-                      n === "small" && e["tedi-collapse__icon--small"]
+                      e[`tedi-collapse__icon--${n}`],
+                      i === "small" && e["tedi-collapse__icon--small"]
                     ),
                     name: "expand_more",
-                    size: n === "small" || i === "secondary" ? 18 : 24
+                    size: i === "small" || n === "secondary" ? 18 : 24
                   }
                 )
               }
@@ -100,10 +101,10 @@ const ie = (f) => {
         ] })
       }
     ),
-    u ? I : /* @__PURE__ */ t(E, { id: D, duration: 300, height: l ? "auto" : 0, "data-testid": "collapse-inner", children: I })
+    _ ? I : /* @__PURE__ */ t(A, { id: L, duration: 300, height: a ? "auto" : 0, "data-testid": "collapse-inner", children: I })
   ] });
 };
 export {
-  ie as Collapse,
-  ie as default
+  se as Collapse,
+  se as default
 };

package/src/tedi/providers/storybook-provider/storybook-provider.d.ts

@@ -1,10 +0,0 @@
-import { default as React } from 'react';
-interface TextRowProps {
-    desktopText: React.ReactNode;
-    mobileText: React.ReactNode;
-    isLink?: boolean;
-    noUnderline?: boolean;
-    className?: string;
-}
-export declare const TextRow: React.FC<TextRowProps>;
-export {};