@tedi-design-system/react 14.4.0-rc.2 → 14.4.0-rc.3

package/package.json

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

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

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

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

@@ -3,31 +3,36 @@ import { BreakpointSupport } from '../../../helpers';
 import { RowProps } from '../../layout/grid';
 type CollapseBreakpointProps = {
     /**
-     * Whether the collapse should be initially open (uncontrolled mode).
-     * This is ignored when `open` and `onToggle` are provided.
+     * Whether the collapse should be initially open (uncontrolled mode)
+     * This is ignored when `open` and `onToggle` are provided
      * @default false
      */
     defaultOpen?: boolean;
     /**
-     * Controls the open/closed state of the collapse (controlled mode).
-     * Should be used together with `onToggle`.
+     * Controls the open/closed state of the collapse (controlled mode)
+     * Should be used together with `onToggle`
      */
     open?: boolean;
     /**
-     * Whether to visually hide the open/close text on the toggle button.
-     * Useful for icon-only toggles.
+     * Whether to visually hide the open/close text on the toggle button
+     * Useful for icon-only toggles
      * @default false
      */
     hideCollapseText?: boolean;
     /**
-     * Additional props to pass to the `Row` component used in the title area.
+     * Additional props to pass to the `Row` component used in the title area
      */
     titleRowProps?: RowProps;
     /**
-     * Custom class name for the root element.
+     * Custom class name for the root element
      */
     className?: string;
     arrowType?: 'default' | 'secondary';
+    /**
+     * Collapse text & icon size
+     * @default default
+     */
+    size?: 'default' | 'small';
     underline?: boolean;
 };
 export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps> {

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text--underline":"tedi-collapse__text--underline-73ca86bd","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3","tedi-collapse__content":"tedi-collapse__content-350b91f8"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text":"tedi-collapse__text-d150fea1","tedi-collapse__text--underline":"tedi-collapse__text--underline-73ca86bd","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse__icon-wrapper--secondary":"tedi-collapse__icon-wrapper--secondary-3321348a","tedi-collapse__icon--secondary":"tedi-collapse__icon--secondary-f0f3125f","tedi-collapse__icon--default":"tedi-collapse__icon--default-9c7e19e4","tedi-collapse__icon-wrapper--default":"tedi-collapse__icon-wrapper--default-450808b2","tedi-collapse__icon-wrapper--small":"tedi-collapse__icon-wrapper--small-65e6d09a","tedi-collapse--icon-only":"tedi-collapse--icon-only-335962f8","tedi-collapse__content":"tedi-collapse__content-350b91f8","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3"};exports.default=e;

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

@@ -1,10 +1,17 @@
 const e = {
   "tedi-collapse__title": "tedi-collapse__title-3e140e5c",
+  "tedi-collapse__text": "tedi-collapse__text-d150fea1",
   "tedi-collapse__text--underline": "tedi-collapse__text--underline-73ca86bd",
   "tedi-collapse__icon-wrapper": "tedi-collapse__icon-wrapper-d2b036ea",
   "tedi-collapse__icon": "tedi-collapse__icon-5156e480",
-  "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3",
-  "tedi-collapse__content": "tedi-collapse__content-350b91f8"
+  "tedi-collapse__icon-wrapper--secondary": "tedi-collapse__icon-wrapper--secondary-3321348a",
+  "tedi-collapse__icon--secondary": "tedi-collapse__icon--secondary-f0f3125f",
+  "tedi-collapse__icon--default": "tedi-collapse__icon--default-9c7e19e4",
+  "tedi-collapse__icon-wrapper--default": "tedi-collapse__icon-wrapper--default-450808b2",
+  "tedi-collapse__icon-wrapper--small": "tedi-collapse__icon-wrapper--small-65e6d09a",
+  "tedi-collapse--icon-only": "tedi-collapse--icon-only-335962f8",
+  "tedi-collapse__content": "tedi-collapse__content-350b91f8",
+  "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3"
 };
 export {
   e as default