@tedi-design-system/react 17.1.0-rc.6 → 17.1.0-rc.8

package/package.json

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

package/src/tedi/components/content/text-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './text-group';
+export * from './text-group-list/text-group-list';

package/src/tedi/components/content/text-group/text-group-list/text-group-list.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../../../../../external/classnames/index.cjs.js"),v=require("../../label/label.cjs.js"),t=require("../text-group.module.scss.cjs.js"),y=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=e=>typeof e=="string"?r.jsx(v.Label,{children:e}):e,a=e=>typeof e=="number"?`${e}%`:e,o=e=>{const{getCurrentBreakpointProps:i}=y.useBreakpointProps(e.defaultServerBreakpoint),{items:d,labelWidth:u="auto",className:n,type:c="vertical",labelAlign:p="left"}=i(e),x=s.default(t.default["tedi-text-group"],t.default["tedi-text-group--list"],t.default[`tedi-text-group--${c}`],n),f=a(u);return r.jsx("dl",{className:x,style:{"--label-width":f},children:d.map((l,g)=>{const b=l.labelAlign??p,h=l.labelWidth!==void 0?{"--label-width":a(l.labelWidth)}:void 0;return r.jsxs("div",{className:t.default["tedi-text-group__row"],style:h,children:[r.jsx("dt",{className:s.default(t.default["tedi-text-group__label"],t.default[`tedi-text-group--align-${b}`]),children:m(l.label)}),r.jsx("dd",{className:s.default(t.default["tedi-text-group__value"]),children:l.value})]},g)})})};o.displayName="TextGroup.List";exports.TextGroupList=o;

package/src/tedi/components/content/text-group/text-group-list/text-group-list.d.ts

@@ -0,0 +1,82 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../../helpers';
+type TextAlign = 'left' | 'right';
+type TextGroupListBreakpointProps = {
+    /**
+     * Type of text group layout.
+     */
+    type?: 'horizontal';
+    /**
+     * Alignment for the label text.
+     * @default 'left'
+     */
+    labelAlign?: TextAlign;
+    /**
+     * Width for the label column (e.g., `'200px'`, `'30%'`, or a `number`
+     * interpreted as a percent).
+     * @default 'auto'
+     */
+    labelWidth?: string | number;
+} | {
+    /**
+     * Type of text group layout.
+     */
+    type: 'vertical';
+    /**
+     * Alignment for the label text. Vertical layout only supports left
+     * alignment — pass `'right'` only with `type: 'horizontal'`.
+     * @default 'left'
+     */
+    labelAlign?: 'left';
+    /**
+     * Width for the label column (e.g., `'200px'`, `'30%'`, or a `number`
+     * interpreted as a percent).
+     * @default 'auto'
+     */
+    labelWidth?: string | number;
+};
+export interface TextGroupListItem {
+    /**
+     * Label rendered as the `<dt>` for this row. Strings are auto-wrapped in
+     * `<Label>`; any other ReactNode is rendered as-is.
+     */
+    label: React.ReactNode;
+    /**
+     * Value rendered as the `<dd>` for this row.
+     */
+    value: React.ReactNode | React.ReactNode[];
+    /**
+     * Per-row override of the list-level `labelAlign`. Falls back to the list's
+     * value when omitted.
+     */
+    labelAlign?: TextAlign;
+    /**
+     * Per-row override of the list-level `labelWidth`. Falls back to the list's
+     * value when omitted.
+     */
+    labelWidth?: string | number;
+}
+export type TextGroupListProps = BreakpointSupport<TextGroupListBreakpointProps> & {
+    /**
+     * Label / value pairs rendered together inside a **single** `<dl>` element,
+     * preserving the definition-list semantics that stacking N individual
+     * `<TextGroup>`s would break.
+     */
+    items: TextGroupListItem[];
+    /**
+     * Additional class name(s) to apply to the root `<dl>` element.
+     */
+    className?: string;
+};
+/**
+ * Multi-row variant of `TextGroup`. Visually identical to stacking N
+ * `<TextGroup>` rows, but wraps every label / value pair in **one** semantic
+ * `<dl>` — so screen readers announce them as one definition list, not N
+ * fragments. Reuse the same `type` / `labelWidth` / `labelAlign` knobs as the
+ * single-pair component; per-row overrides are available via `items[i]`.
+ */
+export declare const TextGroupList: {
+    (props: TextGroupListProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/src/tedi/components/content/text-group/text-group-list/text-group-list.es.js

@@ -0,0 +1,30 @@
+import { jsx as l, jsxs as h } from "react/jsx-runtime";
+import o from "../../../../../../external/classnames/index.es.js";
+import { Label as f } from "../../label/label.es.js";
+import e from "../text-group.module.scss.es.js";
+import { useBreakpointProps as v } from "../../../../helpers/hooks/use-breakpoint-props.es.js";
+const y = (t) => typeof t == "string" ? /* @__PURE__ */ l(f, { children: t }) : t, s = (t) => typeof t == "number" ? `${t}%` : t, L = (t) => {
+  const { getCurrentBreakpointProps: i } = v(t.defaultServerBreakpoint), {
+    items: a,
+    labelWidth: n = "auto",
+    className: d,
+    type: p = "vertical",
+    labelAlign: c = "left"
+  } = i(t), u = o(
+    e["tedi-text-group"],
+    e["tedi-text-group--list"],
+    e[`tedi-text-group--${p}`],
+    d
+  ), m = s(n);
+  return /* @__PURE__ */ l("dl", { className: u, style: { "--label-width": m }, children: a.map((r, g) => {
+    const x = r.labelAlign ?? c, b = r.labelWidth !== void 0 ? { "--label-width": s(r.labelWidth) } : void 0;
+    return /* @__PURE__ */ h("div", { className: e["tedi-text-group__row"], style: b, children: [
+      /* @__PURE__ */ l("dt", { className: o(e["tedi-text-group__label"], e[`tedi-text-group--align-${x}`]), children: y(r.label) }),
+      /* @__PURE__ */ l("dd", { className: o(e["tedi-text-group__value"]), children: r.value })
+    ] }, g);
+  }) });
+};
+L.displayName = "TextGroup.List";
+export {
+  L as TextGroupList
+};

package/src/tedi/components/content/text-group/text-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("../../../../../external/classnames/index.cjs.js"),x=require("../label/label.cjs.js"),e=require("./text-group.module.scss.cjs.js"),f=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),b=u=>{const{getCurrentBreakpointProps:o}=f.useBreakpointProps(u.defaultServerBreakpoint),{label:l,value:s,labelWidth:r="auto",className:i,type:d="vertical",labelAlign:n="left"}=o(u),c=a.default(e.default["tedi-text-group"],e.default[`tedi-text-group--${d}`],i),p=typeof r=="number"?`${r}%`:r;return t.jsxs("dl",{className:c,style:{"--label-width":p},children:[t.jsx("dt",{className:a.default(e.default["tedi-text-group__label"],e.default[`tedi-text-group--align-${n}`]),children:typeof l=="string"?t.jsx(x.Label,{children:l}):l}),t.jsx("dd",{className:a.default(e.default["tedi-text-group__value"]),children:s})]})};exports.TextGroup=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),f=require("../label/label.cjs.js"),t=require("./text-group.module.scss.cjs.js"),g=require("./text-group-list/text-group-list.cjs.js"),b=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=e=>typeof e=="string"?r.jsx(f.Label,{children:e}):e,y=e=>typeof e=="number"?`${e}%`:e,o=e=>{const{getCurrentBreakpointProps:l}=b.useBreakpointProps(e.defaultServerBreakpoint),{label:u,value:a,labelWidth:n="auto",className:i,type:d="vertical",labelAlign:c="left"}=l(e),p=s.default(t.default["tedi-text-group"],t.default[`tedi-text-group--${d}`],i),x=y(n);return r.jsxs("dl",{className:p,style:{"--label-width":x},children:[r.jsx("dt",{className:s.default(t.default["tedi-text-group__label"],t.default[`tedi-text-group--align-${c}`]),children:m(u)}),r.jsx("dd",{className:s.default(t.default["tedi-text-group__value"]),children:a})]})};o.displayName="TextGroup";const G=Object.assign(o,{List:g.TextGroupList});exports.TextGroup=G;

package/src/tedi/components/content/text-group/text-group.d.ts

@@ -46,5 +46,13 @@ export type TextGroupProps = BreakpointSupport<TextGroupBreakpointProps> & {
      */
     className?: string;
 };
-export declare const TextGroup: (props: TextGroupProps) => JSX.Element;
+export declare const TextGroup: {
+    (props: TextGroupProps): JSX.Element;
+    displayName: string;
+} & {
+    List: {
+        (props: import('./text-group-list/text-group-list').TextGroupListProps): JSX.Element;
+        displayName: string;
+    };
+};
 export {};

package/src/tedi/components/content/text-group/text-group.es.js

@@ -1,22 +1,27 @@
-import { jsxs as u, jsx as l } from "react/jsx-runtime";
-import o from "../../../../../external/classnames/index.es.js";
-import { Label as x } from "../label/label.es.js";
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import r from "../../../../../external/classnames/index.es.js";
+import { Label as f } from "../label/label.es.js";
 import e from "./text-group.module.scss.es.js";
-import { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const v = (a) => {
-  const { getCurrentBreakpointProps: s } = f(a.defaultServerBreakpoint), {
-    label: t,
+import { TextGroupList as g } from "./text-group-list/text-group-list.es.js";
+import { useBreakpointProps as b } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const y = (t) => typeof t == "string" ? /* @__PURE__ */ o(f, { children: t }) : t, h = (t) => typeof t == "number" ? `${t}%` : t, s = (t) => {
+  const { getCurrentBreakpointProps: l } = b(t.defaultServerBreakpoint), {
+    label: a,
     value: i,
-    labelWidth: r = "auto",
+    labelWidth: n = "auto",
     className: p,
-    type: n = "vertical",
-    labelAlign: d = "left"
-  } = s(a), m = o(e["tedi-text-group"], e[`tedi-text-group--${n}`], p), c = typeof r == "number" ? `${r}%` : r;
-  return /* @__PURE__ */ u("dl", { className: m, style: { "--label-width": c }, children: [
-    /* @__PURE__ */ l("dt", { className: o(e["tedi-text-group__label"], e[`tedi-text-group--align-${d}`]), children: typeof t == "string" ? /* @__PURE__ */ l(x, { children: t }) : t }),
-    /* @__PURE__ */ l("dd", { className: o(e["tedi-text-group__value"]), children: i })
+    type: c = "vertical",
+    labelAlign: m = "left"
+  } = l(t), d = r(e["tedi-text-group"], e[`tedi-text-group--${c}`], p), u = h(n);
+  return /* @__PURE__ */ x("dl", { className: d, style: { "--label-width": u }, children: [
+    /* @__PURE__ */ o("dt", { className: r(e["tedi-text-group__label"], e[`tedi-text-group--align-${m}`]), children: y(a) }),
+    /* @__PURE__ */ o("dd", { className: r(e["tedi-text-group__value"]), children: i })
   ] });
 };
+s.displayName = "TextGroup";
+const _ = Object.assign(s, {
+  List: g
+});
 export {
-  v as TextGroup
+  _ as TextGroup
 };

package/src/tedi/components/content/text-group/text-group.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-text-group":"tedi-text-group-be3b15d8","tedi-text-group--horizontal":"tedi-text-group--horizontal-9d91c910","tedi-text-group__label":"tedi-text-group__label-a8904597","tedi-text-group__value":"tedi-text-group__value-4bbf1a22","tedi-text-group--align-left":"tedi-text-group--align-left-cc82fd31","tedi-text-group--align-right":"tedi-text-group--align-right-0eebe973"};exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-text-group":"tedi-text-group-be3b15d8","tedi-text-group--horizontal":"tedi-text-group--horizontal-9d91c910","tedi-text-group__label":"tedi-text-group__label-a8904597","tedi-text-group__value":"tedi-text-group__value-4bbf1a22","tedi-text-group--align-left":"tedi-text-group--align-left-cc82fd31","tedi-text-group--align-right":"tedi-text-group--align-right-0eebe973","tedi-text-group--list":"tedi-text-group--list-bd143f34","tedi-text-group__row":"tedi-text-group__row-fc6928bf"};exports.default=t;

package/src/tedi/components/content/text-group/text-group.module.scss.es.js

@@ -4,7 +4,9 @@ const t = {
   "tedi-text-group__label": "tedi-text-group__label-a8904597",
   "tedi-text-group__value": "tedi-text-group__value-4bbf1a22",
   "tedi-text-group--align-left": "tedi-text-group--align-left-cc82fd31",
-  "tedi-text-group--align-right": "tedi-text-group--align-right-0eebe973"
+  "tedi-text-group--align-right": "tedi-text-group--align-right-0eebe973",
+  "tedi-text-group--list": "tedi-text-group--list-bd143f34",
+  "tedi-text-group__row": "tedi-text-group__row-fc6928bf"
 };
 export {
   t as default

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("../../../../../../../external/classnames/index.cjs.js"),R=require("react"),S=require("../../../checkbox/checkbox.cjs.js"),A=require("../../../feedback-text/feedback-text.cjs.js"),H=require("../../../radio/radio.cjs.js"),L=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),O=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),V=require("../../../../layout/grid/col.cjs.js"),v=n=>{const{getCurrentBreakpointProps:_}=O.useBreakpointProps(n.defaultServerBreakpoint),{id:c,label:k,value:a,className:q,direction:m,disabled:d,colProps:N=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:I,helper:r,tooltip:B,type:u="radio",variant:s="default",color:$="primary",layout:G,showIndicator:C,justifyContent:x="start"}=_(n),{currentValue:l,name:b,onChange:f,inputType:P}=R.useContext(L.ChoiceGroupContext),i=Array.isArray(l)?l.includes(a):a===l,M=l===void 0?n.defaultChecked:i,y=(o,g)=>{f==null||f(o,g),p==null||p(o,g)},T=h.default(e.default[`tedi-choice-group-item--${G==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),w=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${s}`],e.default[`tedi-choice-group-item--${s}-${$}`],C&&e.default["tedi-choice-group-item--indicator"],u&&e.default[`tedi-choice-group-item--${u}`],{[e.default["tedi-choice-group-item--disabled"]]:d},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${x}`]:x}),E=u==="radio"?H.Radio:S.Checkbox,F=o=>{var j;d||s!=="card"||o.target.closest("input, label")||(j=document.getElementById(c))==null||j.click()};return t.jsx(V.Col,{...N,className:T,children:t.jsx("div",{className:w,tabIndex:d?-1:0,onClick:F,role:u,"aria-checked":i,children:s==="default"||C?t.jsx(E,{id:c,label:k,value:a,name:b,className:h.default(e.default["tedi-choice-group-item__indicator"],q),disabled:d,checked:i,defaultChecked:M,onChange:y,hideLabel:I,helper:r?{...r,className:h.default(e.default["tedi-choice-group-item__feedback-text"],r.className)}:void 0,tooltip:B,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:c,value:a,name:b,type:P,disabled:d,checked:i,defaultChecked:l===void 0?n.defaultChecked:void 0,onChange:o=>{y(a,o.target.checked)},className:"visually-hidden",role:u==="radio"?"radio":void 0,"aria-checked":i,tabIndex:-1}),t.jsxs("label",{htmlFor:c,className:e.default["tedi-choice-group-item__label"],children:[k,r&&t.jsx(A.FeedbackText,{...r,id:c,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=v;exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("../../../../../../../external/classnames/index.cjs.js"),S=require("react"),A=require("../../../checkbox/checkbox.cjs.js"),H=require("../../../feedback-text/feedback-text.cjs.js"),L=require("../../../radio/radio.cjs.js"),O=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),V=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),z=require("../../../../layout/grid/col.cjs.js"),_=n=>{const{getCurrentBreakpointProps:q}=V.useBreakpointProps(n.defaultServerBreakpoint),{id:a,label:C,value:d,className:N,direction:m,disabled:r,colProps:I=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:B,helper:u,tooltip:$,type:o="radio",variant:s="default",color:G="primary",layout:P,showIndicator:x,justifyContent:b="start"}=q(n),{currentValue:l,name:v,onChange:f,inputType:M}=S.useContext(O.ChoiceGroupContext),i=Array.isArray(l)?l.includes(d):d===l,R=l===void 0?n.defaultChecked:i,y=(c,k)=>{f==null||f(c,k),p==null||p(c,k)},T=h.default(e.default[`tedi-choice-group-item--${P==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),w=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${s}`],e.default[`tedi-choice-group-item--${s}-${G}`],x&&e.default["tedi-choice-group-item--indicator"],o&&e.default[`tedi-choice-group-item--${o}`],{[e.default["tedi-choice-group-item--disabled"]]:r},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${b}`]:b}),E=o==="radio"?L.Radio:A.Checkbox,F=c=>{var j;r||s!=="card"||c.target.closest("input, label")||(j=document.getElementById(a))==null||j.click()},g=o==="radio";return t.jsx(z.Col,{...I,className:T,children:t.jsx("div",{className:w,tabIndex:g||r?-1:0,onClick:F,role:g?void 0:o,"aria-checked":g?void 0:i,children:s==="default"||x?t.jsx(E,{id:a,label:C,value:d,name:v,className:h.default(e.default["tedi-choice-group-item__indicator"],N),disabled:r,checked:i,defaultChecked:R,onChange:y,hideLabel:B,helper:u?{...u,className:h.default(e.default["tedi-choice-group-item__feedback-text"],u.className)}:void 0,tooltip:$,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:a,value:d,name:v,type:M,disabled:r,checked:i,defaultChecked:l===void 0?n.defaultChecked:void 0,onChange:c=>{y(d,c.target.checked)},className:"visually-hidden",role:o==="radio"?"radio":void 0,"aria-checked":i,tabIndex:-1}),t.jsxs("label",{htmlFor:a,className:e.default["tedi-choice-group-item__label"],children:[C,u&&t.jsx(H.FeedbackText,{...u,id:a,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=_;exports.default=_;

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.es.js

@@ -1,105 +1,105 @@
-import { jsx as l, jsxs as _, Fragment as M } from "react/jsx-runtime";
+import { jsx as s, jsxs as _, Fragment as H } from "react/jsx-runtime";
 import u from "../../../../../../../external/classnames/index.es.js";
-import R from "react";
-import { Checkbox as T } from "../../../checkbox/checkbox.es.js";
-import { FeedbackText as H } from "../../../feedback-text/feedback-text.es.js";
-import { Radio as L } from "../../../radio/radio.es.js";
-import { ChoiceGroupContext as S } from "../../choice-group-context.es.js";
+import L from "react";
+import { Checkbox as S } from "../../../checkbox/checkbox.es.js";
+import { FeedbackText as V } from "../../../feedback-text/feedback-text.es.js";
+import { Radio as q } from "../../../radio/radio.es.js";
+import { ChoiceGroupContext as z } from "../../choice-group-context.es.js";
 import e from "./choice-group-item.module.scss.es.js";
-import { useBreakpointProps as V } from "../../../../../helpers/hooks/use-breakpoint-props.es.js";
-import { Col as q } from "../../../../layout/grid/col.es.js";
-const te = (s) => {
-  const { getCurrentBreakpointProps: v } = V(s.defaultServerBreakpoint), {
-    id: i,
-    label: k,
-    value: c,
-    className: I,
+import { useBreakpointProps as D } from "../../../../../helpers/hooks/use-breakpoint-props.es.js";
+import { Col as J } from "../../../../layout/grid/col.es.js";
+const oe = (l) => {
+  const { getCurrentBreakpointProps: $ } = D(l.defaultServerBreakpoint), {
+    id: c,
+    label: C,
+    value: r,
+    className: B,
     direction: h,
-    disabled: r,
-    colProps: $ = h === "column" ? { width: 12 } : { width: "auto" },
+    disabled: a,
+    colProps: I = h === "column" ? { width: 12 } : { width: "auto" },
     onChange: p,
-    hideLabel: B,
-    helper: a,
-    tooltip: j,
-    type: d = "radio",
+    hideLabel: j,
+    helper: d,
+    tooltip: w,
+    type: o = "radio",
     variant: m = "default",
-    color: w = "primary",
-    layout: E,
-    showIndicator: C,
-    justifyContent: b = "start"
-  } = v(s), { currentValue: n, name: y, onChange: f, inputType: F } = R.useContext(S), t = Array.isArray(n) ? n.includes(c) : c === n, G = n === void 0 ? s.defaultChecked : t, x = (o, g) => {
-    f == null || f(o, g), p == null || p(o, g);
-  }, P = u(
-    e[`tedi-choice-group-item--${E === "separated" ? "separated" : "segmented"}`],
+    color: E = "primary",
+    layout: F,
+    showIndicator: b,
+    justifyContent: y = "start"
+  } = $(l), { currentValue: n, name: v, onChange: f, inputType: G } = L.useContext(z), t = Array.isArray(n) ? n.includes(r) : r === n, P = n === void 0 ? l.defaultChecked : t, x = (i, k) => {
+    f == null || f(i, k), p == null || p(i, k);
+  }, R = u(
+    e[`tedi-choice-group-item--${F === "separated" ? "separated" : "segmented"}`],
     h && e[`tedi-choice-group-item--${h}`]
   ), A = u(
     e["tedi-choice-group-item"],
     e[`tedi-choice-group-item--${m}`],
-    e[`tedi-choice-group-item--${m}-${w}`],
-    C && e["tedi-choice-group-item--indicator"],
-    d && e[`tedi-choice-group-item--${d}`],
-    { [e["tedi-choice-group-item--disabled"]]: r },
+    e[`tedi-choice-group-item--${m}-${E}`],
+    b && e["tedi-choice-group-item--indicator"],
+    o && e[`tedi-choice-group-item--${o}`],
+    { [e["tedi-choice-group-item--disabled"]]: a },
     { [e["tedi-choice-group-item--checked"]]: t },
-    { [`justify-content-${b}`]: b }
-  );
-  return /* @__PURE__ */ l(q, { ...$, className: P, children: /* @__PURE__ */ l(
+    { [`justify-content-${y}`]: y }
+  ), M = o === "radio" ? q : S, T = (i) => {
+    var N;
+    a || m !== "card" || i.target.closest("input, label") || (N = document.getElementById(c)) == null || N.click();
+  }, g = o === "radio";
+  return /* @__PURE__ */ s(J, { ...I, className: R, children: /* @__PURE__ */ s(
     "div",
     {
       className: A,
-      tabIndex: r ? -1 : 0,
-      onClick: (o) => {
-        var N;
-        r || m !== "card" || o.target.closest("input, label") || (N = document.getElementById(i)) == null || N.click();
-      },
-      role: d,
-      "aria-checked": t,
-      children: m === "default" || C ? /* @__PURE__ */ l(
-        d === "radio" ? L : T,
+      tabIndex: g || a ? -1 : 0,
+      onClick: T,
+      role: g ? void 0 : o,
+      "aria-checked": g ? void 0 : t,
+      children: m === "default" || b ? /* @__PURE__ */ s(
+        M,
         {
-          id: i,
-          label: k,
-          value: c,
-          name: y,
-          className: u(e["tedi-choice-group-item__indicator"], I),
-          disabled: r,
+          id: c,
+          label: C,
+          value: r,
+          name: v,
+          className: u(e["tedi-choice-group-item__indicator"], B),
+          disabled: a,
           checked: t,
-          defaultChecked: G,
+          defaultChecked: P,
           onChange: x,
-          hideLabel: B,
-          helper: a ? { ...a, className: u(e["tedi-choice-group-item__feedback-text"], a.className) } : void 0,
-          tooltip: j,
+          hideLabel: j,
+          helper: d ? { ...d, className: u(e["tedi-choice-group-item__feedback-text"], d.className) } : void 0,
+          tooltip: w,
           "data-testid": "choice-group-item-indicator",
           "aria-checked": t
         }
-      ) : /* @__PURE__ */ _(M, { children: [
-        /* @__PURE__ */ l(
+      ) : /* @__PURE__ */ _(H, { children: [
+        /* @__PURE__ */ s(
           "input",
           {
-            id: i,
-            value: c,
-            name: y,
-            type: F,
-            disabled: r,
+            id: c,
+            value: r,
+            name: v,
+            type: G,
+            disabled: a,
             checked: t,
-            defaultChecked: n === void 0 ? s.defaultChecked : void 0,
-            onChange: (o) => {
-              x(c, o.target.checked);
+            defaultChecked: n === void 0 ? l.defaultChecked : void 0,
+            onChange: (i) => {
+              x(r, i.target.checked);
             },
             className: "visually-hidden",
-            role: d === "radio" ? "radio" : void 0,
+            role: o === "radio" ? "radio" : void 0,
             "aria-checked": t,
             tabIndex: -1
           }
         ),
-        /* @__PURE__ */ _("label", { htmlFor: i, className: e["tedi-choice-group-item__label"], children: [
-          k,
-          a && /* @__PURE__ */ l(H, { ...a, id: i, className: e["tedi-choice-group-item__feedback-text"] })
+        /* @__PURE__ */ _("label", { htmlFor: c, className: e["tedi-choice-group-item__label"], children: [
+          C,
+          d && /* @__PURE__ */ s(V, { ...d, id: c, className: e["tedi-choice-group-item__feedback-text"] })
         ] })
       ] })
     }
   ) });
 };
 export {
-  te as ChoiceGroupItem,
-  te as default
+  oe as ChoiceGroupItem,
+  oe as default
 };

package/src/tedi/components/form/textfield/textfield.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),H=require("../../base/icon/icon.cjs.js"),be=require("../../buttons/closing-button/closing-button.cjs.js"),ve=require("../../misc/separator/separator.cjs.js"),K=require("../feedback-text/feedback-text.cjs.js"),pe=require("../field/field.cjs.js"),_e=require("../form-label/form-label.cjs.js"),k=require("../input-group/input-group.cjs.js"),r=require("./textfield.module.scss.cjs.js"),he=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),ge=require("../../../providers/label-provider/use-labels.cjs.js"),je={large:24,default:18},I=i.forwardRef((_,O)=>{var V;const{getCurrentBreakpointProps:D}=he.useBreakpointProps(_.defaultServerBreakpoint),{id:Ae,label:h,className:U,inputClassName:J,disabled:c,required:q,hideLabel:C,invalid:u,readOnly:B,icon:s,onIconClick:g,iconButtonProps:y,size:d="default",placeholder:Q,isArrowsHidden:W=!0,isClearable:F,onClear:b,onChange:o,onChangeEvent:X,onKeyUp:Y,onKeyDown:Z,onKeyPress:G,defaultValue:S,value:j,onFocus:A,onBlur:N,onClick:ee,helper:e,input:n,name:te,isTextArea:re,startSlot:ae,endSlot:le,...ie}=D(_)||{},{getLabel:T}=ge.useLabels(),w=i.useRef(null),L=i.useRef(null),[se,R]=i.useState(j??S??""),M=j??se,f=!!(F&&M&&!B),x=(V=k.useOptionalInputGroup)==null?void 0:V.call(k),ne=i.useId(),de=x==null?void 0:x.hasExternalLabel,m=_.id??(x==null?void 0:x.inputId)??ne;i.useImperativeHandle(O,()=>({get input(){return L.current},get inner(){return w.current}}));const z=i.useMemo(()=>Array.isArray(e)?u||e.some(t=>t.type==="error"):u||(e==null?void 0:e.type)==="error",[u,e]),oe=i.useMemo(()=>!e||Array.isArray(e)&&e.length===0?!1:Array.isArray(e)?!u&&e.every(t=>t.type==="valid"):!u&&e.type==="valid",[u,e]),ce=d==="large"?"default":d,v=j!==void 0,ue=i.useCallback(t=>{v||R(t),o==null||o(t)},[v,o]),P=i.useCallback(()=>{v||R(""),o==null||o(""),b==null||b()},[v,o,b]),$=i.useCallback(()=>{if(!s)return null;const t={size:d==="large"?24:d==="small"?16:18,className:r.default["tedi-textfield__icon"]},l=typeof s=="string"?{...t,name:s}:{...t,...s,className:p.default(t.className,s.className)};return g?a.jsx("button",{type:"button",...y,className:p.default(r.default["tedi-textfield__icon-wrapper"],y==null?void 0:y.className),onClick:c?void 0:g,disabled:c,children:a.jsx(H.Icon,{...l})}):a.jsx("div",{className:r.default["tedi-textfield__icon-wrapper"],"aria-hidden":"true",children:a.jsx(H.Icon,{...l})})},[s,d,g,y,c]),E=i.useMemo(()=>f?a.jsx(be.ClosingButton,{iconSize:je[d==="large"?"large":"default"],onClick:c?void 0:P,disabled:c,title:T("clear"),className:r.default["tedi-textfield__clear-button"]}):null,[f,d,c,P,T]),fe=i.useMemo(()=>!f&&!s?null:a.jsxs("div",{className:r.default["tedi-textfield__right-area"],children:[E,f&&s&&a.jsx(ve.Separator,{color:"primary",axis:"vertical",className:r.default["tedi-textfield__separator"]}),s&&$()]}),[f,s,E,$]),xe=a.jsx(pe.Field,{...n,id:m,name:te,value:M,defaultValue:S,onChange:ue,onChangeEvent:X,disabled:c,readOnly:B,required:q,invalid:z,placeholder:Q,className:p.default(r.default["tedi-textfield__input"],J,{[r.default["tedi-textfield__input--hidden-arrows"]]:W}),onFocus:t=>{var l;(l=n==null?void 0:n.onFocus)==null||l.call(n,t),A==null||A(t)},onBlur:t=>{var l;(l=n==null?void 0:n.onBlur)==null||l.call(n,t),N==null||N(t)},isTextArea:re,"aria-describedby":!e||Array.isArray(e)&&e.length===0?void 0:Array.isArray(e)?e.map((t,l)=>`${m}-helper-${l}`).join(" "):`${m}-helper`,"aria-label":C&&typeof h=="string"?h:void 0,ref:L}),me=p.default(r.default["tedi-textfield"],{[r.default[`tedi-textfield--${d}`]]:d},{[r.default["tedi-textfield--with-icon"]]:s},{[r.default["tedi-textfield--invalid"]]:z},{[r.default["tedi-textfield--valid"]]:oe},{[r.default["tedi-textfield--clearable"]]:f},U),ye=()=>!e||Array.isArray(e)&&e.length===0?null:a.jsx("div",{className:r.default["tedi-textfield__feedback-wrapper"],children:Array.isArray(e)?e.map((t,l)=>a.jsx(K.FeedbackText,{...t,id:`${m}-helper-${l}`},l)):a.jsx(K.FeedbackText,{...e,id:`${m}-helper`})});return a.jsxs("div",{"data-name":"textfield",...ie,className:me,children:[!de&&a.jsx(_e.FormLabel,{id:m,label:h,required:q,hideLabel:C,size:ce}),a.jsxs("div",{className:r.default["tedi-textfield__inner"],onKeyDown:Z,onKeyUp:Y,onKeyPress:G,onClick:ee,ref:w,children:[ae,xe,le,(F||s)&&fe]}),ye()]})});I.displayName="TextField";exports.TextField=I;exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),O=require("../../base/icon/icon.cjs.js"),pe=require("../../buttons/closing-button/closing-button.cjs.js"),_e=require("../../misc/separator/separator.cjs.js"),D=require("../feedback-text/feedback-text.cjs.js"),he=require("../field/field.cjs.js"),ge=require("../form-label/form-label.cjs.js"),k=require("../input-group/input-group.cjs.js"),r=require("./textfield.module.scss.cjs.js"),Ie=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),je=require("../../../providers/label-provider/use-labels.cjs.js"),Ae={large:24,default:18},q=l.forwardRef((h,U)=>{var H;const{getCurrentBreakpointProps:J}=Ie.useBreakpointProps(h.defaultServerBreakpoint),{id:Ne,label:g,className:Q,inputClassName:W,disabled:c,required:C,hideLabel:S,invalid:u,readOnly:B,icon:i,onIconClick:b,iconButtonProps:y,size:d="default",placeholder:X,isArrowsHidden:Y=!0,isClearable:F,onClear:v,onChange:o,onChangeEvent:Z,onKeyUp:G,onKeyDown:ee,onKeyPress:te,defaultValue:T,value:I,onFocus:j,onBlur:A,onClick:re,helper:e,input:s,name:ae,isTextArea:le,startSlot:ie,endSlot:se,...ne}=J(h)||{},{getLabel:w}=je.useLabels(),z=l.useRef(null),L=l.useRef(null),[de,R]=l.useState(I??T??""),M=I??de,f=!!(F&&M&&!B),x=(H=k.useOptionalInputGroup)==null?void 0:H.call(k),oe=l.useId(),ce=x==null?void 0:x.hasExternalLabel,m=h.id??(x==null?void 0:x.inputId)??oe;l.useImperativeHandle(U,()=>({get input(){return L.current},get inner(){return z.current}}));const P=l.useMemo(()=>Array.isArray(e)?u||e.some(t=>t.type==="error"):u||(e==null?void 0:e.type)==="error",[u,e]),ue=l.useMemo(()=>!e||Array.isArray(e)&&e.length===0?!1:Array.isArray(e)?!u&&e.every(t=>t.type==="valid"):!u&&e.type==="valid",[u,e]),fe=d==="large"?"default":d,p=I!==void 0,xe=l.useCallback(t=>{p||R(t),o==null||o(t)},[p,o]),$=l.useCallback(()=>{p||R(""),o==null||o(""),v==null||v()},[p,o,v]),E=l.useCallback(()=>{if(!i)return null;const N={size:d==="large"?24:d==="small"?!!b?18:16:18,className:r.default["tedi-textfield__icon"]},K=typeof i=="string"?{...N,name:i}:{...N,...i,className:_.default(N.className,i.className)};return b?a.jsx("button",{type:"button",...y,className:_.default(r.default["tedi-textfield__icon-wrapper"],y==null?void 0:y.className),onClick:c?void 0:b,disabled:c,children:a.jsx(O.Icon,{...K})}):a.jsx("div",{className:r.default["tedi-textfield__icon-wrapper"],"aria-hidden":"true",children:a.jsx(O.Icon,{...K})})},[i,d,b,y,c]),V=l.useMemo(()=>f?a.jsx(pe.ClosingButton,{iconSize:Ae[d==="large"?"large":"default"],onClick:c?void 0:$,disabled:c,title:w("clear"),className:r.default["tedi-textfield__clear-button"]}):null,[f,d,c,$,w]),me=l.useMemo(()=>!f&&!i?null:a.jsxs("div",{className:r.default["tedi-textfield__right-area"],children:[V,f&&i&&a.jsx(_e.Separator,{color:"primary",axis:"vertical",className:r.default["tedi-textfield__separator"]}),i&&E()]}),[f,i,V,E]),ye=a.jsx(he.Field,{...s,id:m,name:ae,value:M,defaultValue:T,onChange:xe,onChangeEvent:Z,disabled:c,readOnly:B,required:C,invalid:P,placeholder:X,className:_.default(r.default["tedi-textfield__input"],W,{[r.default["tedi-textfield__input--hidden-arrows"]]:Y}),onFocus:t=>{var n;(n=s==null?void 0:s.onFocus)==null||n.call(s,t),j==null||j(t)},onBlur:t=>{var n;(n=s==null?void 0:s.onBlur)==null||n.call(s,t),A==null||A(t)},isTextArea:le,"aria-describedby":!e||Array.isArray(e)&&e.length===0?void 0:Array.isArray(e)?e.map((t,n)=>`${m}-helper-${n}`).join(" "):`${m}-helper`,"aria-label":S&&typeof g=="string"?g:void 0,ref:L}),be=_.default(r.default["tedi-textfield"],{[r.default[`tedi-textfield--${d}`]]:d},{[r.default["tedi-textfield--with-icon"]]:i},{[r.default["tedi-textfield--invalid"]]:P},{[r.default["tedi-textfield--valid"]]:ue},{[r.default["tedi-textfield--clearable"]]:f},Q),ve=()=>!e||Array.isArray(e)&&e.length===0?null:a.jsx("div",{className:r.default["tedi-textfield__feedback-wrapper"],children:Array.isArray(e)?e.map((t,n)=>a.jsx(D.FeedbackText,{...t,id:`${m}-helper-${n}`},n)):a.jsx(D.FeedbackText,{...e,id:`${m}-helper`})});return a.jsxs("div",{"data-name":"textfield",...ne,className:be,children:[!ce&&a.jsx(ge.FormLabel,{id:m,label:g,required:C,hideLabel:S,size:fe}),a.jsxs("div",{className:r.default["tedi-textfield__inner"],onKeyDown:ee,onKeyUp:G,onKeyPress:te,onClick:re,ref:z,children:[ie,ye,se,(F||i)&&me]}),ve()]})});q.displayName="TextField";exports.TextField=q;exports.default=q;