@tedi-design-system/react 18.0.0-rc.1 → 18.0.0-rc.2

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.
Files changed (8) hide show
  1. package/bundle-stats.html +1 -1
  2. package/index.css +1 -1
  3. package/package.json +1 -1
  4. package/src/tedi/components/buttons/collapse/collapse.cjs.js +1 -1
  5. package/src/tedi/components/buttons/collapse/collapse.d.ts +8 -0
  6. package/src/tedi/components/buttons/collapse/collapse.es.js +48 -46
  7. package/src/tedi/components/buttons/collapse/collapse.module.scss.cjs.js +1 -1
  8. package/src/tedi/components/buttons/collapse/collapse.module.scss.es.js +2 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tedi-design-system/react",
3
- "version": "18.0.0-rc.1",
3
+ "version": "18.0.0-rc.2",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "exports": {
package/src/tedi/components/buttons/collapse/collapse.cjs.js CHANGED
@@ -1 +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"),_=require("react"),K=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),A=require("../../../providers/printing-provider/printing-provider.cjs.js"),F=require("../../base/icon/icon.cjs.js"),G=require("../../base/typography/text/text.cjs.js"),H=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.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"),o=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:i="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=A.usePrint(),a=_.useMemo(()=>m||(d!==void 0?d:b),[m,d,b]),L=B===!0&&!c,D=s.default(e.default["tedi-collapse"],i==="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(o.Col,{"aria-hidden":"true",children:c}),t.jsx(o.Col,{width:"auto",children:t.jsxs(v.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(H.Print,{visibility:"hide",children:t.jsx(o.Col,{width:"auto",className:s.default({"visually-hidden":I}),children:t.jsx(G.Text,{element:"span",className:s.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:S}),children:a?g:j})})}),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(F.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?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;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),F=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),G=require("../../../providers/printing-provider/printing-provider.cjs.js"),H=require("../../base/icon/icon.cjs.js"),J=require("../../base/typography/text/text.cjs.js"),Q=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),U=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),V=require("../../../providers/label-provider/use-labels.cjs.js"),C=require("../../layout/grid/row.cjs.js"),o=require("../../layout/grid/col.cjs.js"),I=x=>{const{getCurrentBreakpointProps:N}=U.useBreakpointProps(x.defaultServerBreakpoint),{getLabel:h}=V.useLabels(),{id:r,children:w,className:P,openText:j=h("open"),closeText:g=h("close"),hideCollapseText:k=!1,title:d,titleRowProps:O,defaultOpen:$,open:c,onToggle:u,arrowType:s="default",size:i="default",underline:S=!0,toggleLabel:y,iconOnly:B=!1,inverted:M=!1,...R}=N(x),p=`${r}__trigger`,f=`${r}__content`,T=`${r}__animate`,[b,L]=_.useState(()=>$),m=G.usePrint(),a=_.useMemo(()=>m||(c!==void 0?c:b),[m,c,b]),D=B===!0&&!d,z=M&&s!=="secondary",E=n.default(e.default["tedi-collapse"],i==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],D&&e.default["tedi-collapse--icon-only"],z&&e.default["tedi-collapse--inverted"],e.default[`tedi-collapse--arrow-${s}`],P),v=()=>{const l=!a;L(l),u==null||u(l)},K=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),v())},A=y||(a?g:j),q=_.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",...R,className:E,children:[t.jsx("button",{id:p,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":A,"aria-expanded":a,"aria-controls":f,onKeyDown:K,onClick:v,children:t.jsxs(C.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...O,element:"span",children:[d&&t.jsx(o.Col,{"aria-hidden":"true",children:d}),t.jsx(o.Col,{width:"auto",children:t.jsxs(C.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(Q.Print,{visibility:"hide",children:t.jsx(o.Col,{width:"auto",className:n.default({"visually-hidden":k}),children:t.jsx(J.Text,{element:"span",className:n.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:S}),children:a?g:j})})}),t.jsx(o.Col,{width:"auto",children:t.jsx("div",{className:n.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${s}`],i==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(H.Icon,{className:n.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${s}`],i==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:i==="small"||s==="secondary"?18:24})})})]})})]})}),m?q:t.jsx(F.default,{id:T,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:q})]})};exports.Collapse=I;exports.default=I;
package/src/tedi/components/buttons/collapse/collapse.d.ts CHANGED
@@ -40,6 +40,14 @@ type CollapseBreakpointProps = {
40
40
  * @default false
41
41
  */
42
42
  iconOnly?: boolean;
43
+ /**
44
+ * Inverted color palette — flips the link / icon colors to their
45
+ * inverted-surface equivalents (white text + icon), for use on top of dark
46
+ * backgrounds. Pairs with both the with-text and icon-only variants; the
47
+ * secondary-arrow style has no inverted form in the design.
48
+ * @default false
49
+ */
50
+ inverted?: boolean;
43
51
  };
44
52
  export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps> {
45
53
  /**
package/src/tedi/components/buttons/collapse/collapse.es.js CHANGED
@@ -1,55 +1,57 @@
1
- import { jsx as t, jsxs as h } from "react/jsx-runtime";
2
- import o from "../../../../../external/classnames/index.es.js";
3
- import f from "react";
4
- import A from "../../../../../external/react-animate-height/dist/esm/index.es.js";
5
- import { usePrint as H } from "../../../providers/printing-provider/printing-provider.es.js";
6
- import { Icon as q } from "../../base/icon/icon.es.js";
7
- import { Text as F } from "../../base/typography/text/text.es.js";
8
- import { Print as G } from "../../misc/print/print.es.js";
1
+ import { jsx as t, jsxs as f } from "react/jsx-runtime";
2
+ import n from "../../../../../external/classnames/index.es.js";
3
+ import h from "react";
4
+ import q from "../../../../../external/react-animate-height/dist/esm/index.es.js";
5
+ import { usePrint as F } from "../../../providers/printing-provider/printing-provider.es.js";
6
+ import { Icon as G } from "../../base/icon/icon.es.js";
7
+ import { Text as J } from "../../base/typography/text/text.es.js";
8
+ import { Print as Q } from "../../misc/print/print.es.js";
9
9
  import e from "./collapse.module.scss.es.js";
10
- import { useBreakpointProps as J } from "../../../helpers/hooks/use-breakpoint-props.es.js";
11
- import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
10
+ import { useBreakpointProps as U } from "../../../helpers/hooks/use-breakpoint-props.es.js";
11
+ import { useLabels as V } from "../../../providers/label-provider/use-labels.es.js";
12
12
  import { Row as k } from "../../layout/grid/row.es.js";
13
13
  import { Col as s } from "../../layout/grid/col.es.js";
14
- const se = (w) => {
15
- const { getCurrentBreakpointProps: O } = J(w.defaultServerBreakpoint), { getLabel: y } = Q(), {
14
+ const ce = (w) => {
15
+ const { getCurrentBreakpointProps: O } = U(w.defaultServerBreakpoint), { getLabel: y } = V(), {
16
16
  id: r,
17
17
  children: g,
18
18
  className: P,
19
19
  openText: b = y("open"),
20
- closeText: x = y("close"),
20
+ closeText: v = y("close"),
21
21
  hideCollapseText: $ = !1,
22
22
  title: c,
23
23
  titleRowProps: B,
24
24
  defaultOpen: S,
25
25
  open: d,
26
26
  onToggle: p,
27
- arrowType: n = "default",
27
+ arrowType: o = "default",
28
28
  size: i = "default",
29
29
  underline: T = !0,
30
- toggleLabel: N,
30
+ toggleLabel: x,
31
31
  iconOnly: j = !1,
32
- ...D
33
- } = O(w), m = `${r}__trigger`, u = `${r}__content`, L = `${r}__animate`, [C, M] = f.useState(() => S), _ = H(), a = f.useMemo(
34
- () => _ || (d !== void 0 ? d : C),
35
- [_, d, C]
36
- ), R = j === !0 && !c, z = o(
32
+ inverted: D = !1,
33
+ ...L
34
+ } = O(w), m = `${r}__trigger`, u = `${r}__content`, M = `${r}__animate`, [N, R] = h.useState(() => S), _ = F(), a = h.useMemo(
35
+ () => _ || (d !== void 0 ? d : N),
36
+ [_, d, N]
37
+ ), z = j === !0 && !c, E = D && o !== "secondary", K = n(
37
38
  e["tedi-collapse"],
38
39
  i === "small" && e["tedi-collapse--small"],
39
40
  a && e["tedi-collapse--is-open"],
40
- R && e["tedi-collapse--icon-only"],
41
- e[`tedi-collapse--arrow-${n}`],
41
+ z && e["tedi-collapse--icon-only"],
42
+ E && e["tedi-collapse--inverted"],
43
+ e[`tedi-collapse--arrow-${o}`],
42
44
  P
43
- ), v = () => {
45
+ ), C = () => {
44
46
  const l = !a;
45
- M(l), p == null || p(l);
46
- }, E = (l) => {
47
- (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), v());
48
- }, K = N || (a ? x : b), I = f.useMemo(
47
+ R(l), p == null || p(l);
48
+ }, A = (l) => {
49
+ (l.key === "Enter" || l.key === " ") && !l.repeat && (l.preventDefault(), C());
50
+ }, H = x || (a ? v : b), I = h.useMemo(
49
51
  () => /* @__PURE__ */ t("div", { id: u, role: "region", "aria-labelledby": m, className: e["tedi-collapse__content"], children: g }),
50
52
  [g, u, m]
51
53
  );
52
- return /* @__PURE__ */ h("div", { "data-name": "collapse", ...D, className: z, children: [
54
+ return /* @__PURE__ */ f("div", { "data-name": "collapse", ...L, className: K, children: [
53
55
  /* @__PURE__ */ t(
54
56
  "button",
55
57
  {
@@ -57,42 +59,42 @@ const se = (w) => {
57
59
  type: "button",
58
60
  "data-name": "collapse-trigger",
59
61
  className: e["tedi-collapse__title"],
60
- "aria-label": K,
62
+ "aria-label": H,
61
63
  "aria-expanded": a,
62
64
  "aria-controls": u,
63
- onKeyDown: E,
64
- onClick: v,
65
- children: /* @__PURE__ */ h(k, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
65
+ onKeyDown: A,
66
+ onClick: C,
67
+ children: /* @__PURE__ */ f(k, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
66
68
  c && /* @__PURE__ */ t(s, { "aria-hidden": "true", children: c }),
67
- /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ h(k, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
68
- /* @__PURE__ */ t(G, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: o({ "visually-hidden": $ }), children: /* @__PURE__ */ t(
69
- F,
69
+ /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ f(k, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
70
+ /* @__PURE__ */ t(Q, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: n({ "visually-hidden": $ }), children: /* @__PURE__ */ t(
71
+ J,
70
72
  {
71
73
  element: "span",
72
- className: o(e["tedi-collapse__text"], {
74
+ className: n(e["tedi-collapse__text"], {
73
75
  [e["tedi-collapse__text--underline"]]: T
74
76
  }),
75
- children: a ? x : b
77
+ children: a ? v : b
76
78
  }
77
79
  ) }) }),
78
80
  /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ t(
79
81
  "div",
80
82
  {
81
- className: o(
83
+ className: n(
82
84
  e["tedi-collapse__icon-wrapper"],
83
- e[`tedi-collapse__icon-wrapper--${n}`],
85
+ e[`tedi-collapse__icon-wrapper--${o}`],
84
86
  i === "small" && e["tedi-collapse__icon-wrapper--small"]
85
87
  ),
86
88
  children: /* @__PURE__ */ t(
87
- q,
89
+ G,
88
90
  {
89
- className: o(
91
+ className: n(
90
92
  e["tedi-collapse__icon"],
91
- e[`tedi-collapse__icon--${n}`],
93
+ e[`tedi-collapse__icon--${o}`],
92
94
  i === "small" && e["tedi-collapse__icon--small"]
93
95
  ),
94
96
  name: "expand_more",
95
- size: i === "small" || n === "secondary" ? 18 : 24
97
+ size: i === "small" || o === "secondary" ? 18 : 24
96
98
  }
97
99
  )
98
100
  }
@@ -101,10 +103,10 @@ const se = (w) => {
101
103
  ] })
102
104
  }
103
105
  ),
104
- _ ? I : /* @__PURE__ */ t(A, { id: L, duration: 300, height: a ? "auto" : 0, "data-testid": "collapse-inner", children: I })
106
+ _ ? I : /* @__PURE__ */ t(q, { id: M, duration: 300, height: a ? "auto" : 0, "data-testid": "collapse-inner", children: I })
105
107
  ] });
106
108
  };
107
109
  export {
108
- se as Collapse,
109
- se as default
110
+ ce as Collapse,
111
+ ce as default
110
112
  };
package/src/tedi/components/buttons/collapse/collapse.module.scss.cjs.js CHANGED
@@ -1 +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":"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;
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":"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","tedi-collapse--inverted":"tedi-collapse--inverted-bd2d0e21"};exports.default=e;
package/src/tedi/components/buttons/collapse/collapse.module.scss.es.js CHANGED
@@ -11,7 +11,8 @@ const e = {
11
11
  "tedi-collapse__icon-wrapper--small": "tedi-collapse__icon-wrapper--small-65e6d09a",
12
12
  "tedi-collapse--icon-only": "tedi-collapse--icon-only-335962f8",
13
13
  "tedi-collapse__content": "tedi-collapse__content-350b91f8",
14
- "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3"
14
+ "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3",
15
+ "tedi-collapse--inverted": "tedi-collapse--inverted-bd2d0e21"
15
16
  };
16
17
  export {
17
18
  e as default