@tedi-design-system/react 16.0.0-rc.3 → 16.0.0-rc.5

package/package.json

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

package/src/tedi/components/buttons/info-button/info-button.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),a=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),s=require("../button/button.cjs.js"),f=require("./info-button.module.scss.cjs.js"),t=r.forwardRef(({isSmall:e,children:n,...o},u)=>i.jsx(s.Button,{className:a.default(f.default["tedi-info-button"]),"data-name":"info-button",...o,type:"button",icon:{name:"info",size:e?16:18},visualType:"neutral",ref:u,children:n}));t.displayName="InfoButton";exports.InfoButton=t;exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),d=require("react"),s=require("../button/button.cjs.js"),f=require("./info-button.module.scss.cjs.js"),e=d.forwardRef(({isSmall:n,children:o,color:t="default",...u},i)=>a.jsx(s.Button,{className:r.default(f.default["tedi-info-button"]),"data-variant":t==="inverted"?"inverted":void 0,"data-name":"info-button",...u,icon:{name:"info",size:n?16:18},visualType:"neutral",color:t,ref:i,children:o}));e.displayName="InfoButton";exports.InfoButton=e;exports.default=e;

package/src/tedi/components/buttons/info-button/info-button.d.ts

@@ -1,15 +1,16 @@
 import { default as React } from 'react';
 import { ButtonProps } from '../button/button';
-export interface InfoButtonProps extends Omit<ButtonProps, 'size' | 'children'> {
+export interface InfoButtonProps extends Omit<ButtonProps, 'size' | 'children' | 'color'> {
     /**
-     * If true, applies a small size to the InfoButton.
+     * If true, applies a small size to the InfoButton
      * @default false
      */
     isSmall?: boolean;
     /**
-     * Children elements to be rendered inside the InfoButton.
+     * Children elements to be rendered inside the InfoButton
      */
     children?: React.ReactNode;
+    color?: 'default' | 'inverted';
 }
 export declare const InfoButton: React.ForwardRefExoticComponent<Omit<InfoButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default InfoButton;

package/src/tedi/components/buttons/info-button/info-button.es.js

@@ -1,25 +1,26 @@
-import { jsx as n } from "react/jsx-runtime";
-import m from "../../../../../external/classnames/index.es.js";
+import { jsx as i } from "react/jsx-runtime";
+import r from "../../../../../external/classnames/index.es.js";
 import f from "react";
-import { Button as r } from "../button/button.es.js";
-import i from "./info-button.module.scss.es.js";
-const s = f.forwardRef(
-  ({ isSmall: t, children: o, ...a }, e) => /* @__PURE__ */ n(
-    r,
+import { Button as m } from "../button/button.es.js";
+import s from "./info-button.module.scss.es.js";
+const d = f.forwardRef(
+  ({ isSmall: o, children: a, color: t = "default", ...e }, n) => /* @__PURE__ */ i(
+    m,
     {
-      className: m(i["tedi-info-button"]),
+      className: r(s["tedi-info-button"]),
+      "data-variant": t === "inverted" ? "inverted" : void 0,
       "data-name": "info-button",
-      ...a,
-      type: "button",
-      icon: { name: "info", size: t ? 16 : 18 },
+      ...e,
+      icon: { name: "info", size: o ? 16 : 18 },
       visualType: "neutral",
-      ref: e,
-      children: o
+      color: t,
+      ref: n,
+      children: a
     }
   )
 );
-s.displayName = "InfoButton";
+d.displayName = "InfoButton";
 export {
-  s as InfoButton,
-  s as default
+  d as InfoButton,
+  d 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"),E=require("react"),F=require("../../../checkbox/checkbox.cjs.js"),L=require("../../../feedback-text/feedback-text.cjs.js"),R=require("../../../radio/radio.cjs.js"),S=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),H=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),O=require("../../../../layout/grid/col.cjs.js"),j=r=>{const{getCurrentBreakpointProps:q}=H.useBreakpointProps(r.defaultServerBreakpoint),{id:u,label:k,value:o,className:v,direction:m,disabled:l,colProps:y=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:N,helper:a,tooltip:B,type:s="radio",variant:n="default",color:$="primary",layout:G,showIndicator:C,justifyContent:x="start"}=q(r),{currentValue:d,name:b,onChange:f,inputType:I}=E.useContext(S.ChoiceGroupContext),i=Array.isArray(d)?d.includes(o):o===d,P=d===void 0?r.defaultChecked:i,g=(c,_)=>{f==null||f(c,_),p==null||p(c,_)},M=h.default(e.default[`tedi-choice-group-item--${G==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),T=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${n}`],e.default[`tedi-choice-group-item--${n}-${$}`],C&&e.default["tedi-choice-group-item--indicator"],s&&e.default[`tedi-choice-group-item--${s}`],{[e.default["tedi-choice-group-item--disabled"]]:l},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${x}`]:x}),w=s==="radio"?R.Radio:F.Checkbox,A=c=>{c.target.tagName!=="LABEL"&&!l&&n==="card"&&g(o,!i)};return t.jsx(O.Col,{...y,className:M,children:t.jsx("div",{className:T,onClick:A,children:n==="default"||C?t.jsx(w,{id:u,label:k,value:o,name:b,className:h.default(e.default["tedi-choice-group-item__indicator"],v),disabled:l,checked:i,defaultChecked:P,onChange:g,hideLabel:N,helper:a?{...a,className:h.default(e.default["tedi-choice-group-item__feedback-text"],a.className)}:void 0,tooltip:B,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:u,value:o,name:b,type:I,disabled:l,checked:i,defaultChecked:d===void 0?r.defaultChecked:void 0,onChange:c=>g(o,c.target.checked),className:e.default["tedi-choice-group-item__input"],role:s==="radio"?"radio":void 0,"aria-checked":i}),t.jsxs("label",{htmlFor:u,className:e.default["tedi-choice-group-item__label"],children:[k,a&&t.jsx(L.FeedbackText,{...a,id:u,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=j;exports.default=j;
+"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"),y=l=>{const{getCurrentBreakpointProps:q}=O.useBreakpointProps(l.defaultServerBreakpoint),{id:c,label:k,value:a,className:v,direction:m,disabled:n,colProps:N=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:B,helper:r,tooltip:$,type:d="radio",variant:s="default",color:G="primary",layout:I,showIndicator:C,justifyContent:x="start"}=q(l),{currentValue:u,name:b,onChange:f,inputType:P}=R.useContext(L.ChoiceGroupContext),i=Array.isArray(u)?u.includes(a):a===u,M=u===void 0?l.defaultChecked:i,_=(o,g)=>{f==null||f(o,g),p==null||p(o,g)},T=h.default(e.default[`tedi-choice-group-item--${I==="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}`],C&&e.default["tedi-choice-group-item--indicator"],d&&e.default[`tedi-choice-group-item--${d}`],{[e.default["tedi-choice-group-item--disabled"]]:n},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${x}`]:x}),E=d==="radio"?H.Radio:S.Checkbox,F=o=>{var j;n||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,onClick:F,role:d,"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"],v),disabled:n,checked:i,defaultChecked:M,onChange:_,hideLabel:B,helper:r?{...r,className:h.default(e.default["tedi-choice-group-item__feedback-text"],r.className)}:void 0,tooltip:$,"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:n,checked:i,defaultChecked:u===void 0?l.defaultChecked:void 0,onChange:o=>{_(a,o.target.checked)},className:e.default["tedi-choice-group-item__input"],role:d==="radio"?"radio":void 0,"aria-checked":i}),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=y;exports.default=y;

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

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