@tedi-design-system/react 16.1.0-rc.4 → 16.1.0-rc.6

package/package.json

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

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

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

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

@@ -49,7 +49,7 @@ const ye = {
     var e;
     if (r)
       return Array.isArray(r) ? ((e = r[0]) == null ? void 0 : e.id) ?? `${d}-helper` : r.id ?? `${d}-helper`;
-  }, [r, d]), C = t.useMemo(() => k ?? E, [k, E]), A = P && C;
+  }, [r, d]), I = t.useMemo(() => k ?? E, [k, E]), A = P && I;
   t.useImperativeHandle(G, () => ({
     get input() {
       return m.current;
@@ -58,7 +58,7 @@ const ye = {
       return L.current;
     }
   }));
-  const I = t.useMemo(() => Array.isArray(r) ? u || r.some((e) => e.type === "error") : u || (r == null ? void 0 : r.type) === "error", [u, r]), te = t.useMemo(() => !r || Array.isArray(r) && r.length === 0 ? !1 : Array.isArray(r) ? !u && r.every((e) => e.type === "valid") : !u && r.type === "valid", [u, r]), ae = s === "large" ? "default" : s, K = t.useCallback(
+  const C = t.useMemo(() => Array.isArray(r) ? u || r.some((e) => e.type === "error") : u || (r == null ? void 0 : r.type) === "error", [u, r]), te = t.useMemo(() => !r || Array.isArray(r) && r.length === 0 ? !1 : Array.isArray(r) ? !u && r.every((e) => e.type === "valid") : !u && r.type === "valid", [u, r]), ae = s === "large" ? "default" : s, K = t.useCallback(
     (e) => {
       const l = {
         size: s === "large" ? 24 : s === "small" ? 16 : 18,
@@ -104,15 +104,29 @@ const ye = {
       }),
       disabled: i,
       required: g,
-      "aria-invalid": I || void 0,
+      "aria-invalid": C || void 0,
       placeholder: M,
       readOnly: R,
       onChange: W,
-      value: C,
+      value: I,
       onBlur: z,
       onFocus: T
     };
-    return q(f, m) ? /* @__PURE__ */ n("textarea", { ...e, ref: m }) : D(f, m) ? /* @__PURE__ */ n("input", { ...e, ref: m }) : null;
+    return q(f, m) ? /* @__PURE__ */ n(
+      "textarea",
+      {
+        ...e,
+        ref: m,
+        tabIndex: i ? -1 : 0
+      }
+    ) : D(f, m) ? /* @__PURE__ */ n(
+      "input",
+      {
+        ...e,
+        ref: m,
+        tabIndex: i ? -1 : 0
+      }
+    ) : null;
   }, [
     S,
     d,
@@ -124,11 +138,11 @@ const ye = {
     B,
     F,
     g,
-    I,
+    C,
     M,
     R,
     W,
-    C,
+    I,
     z,
     T,
     q,
@@ -153,7 +167,7 @@ const ye = {
     a["tedi-textfield"],
     { [a[`tedi-textfield--${s}`]]: s },
     { [a["tedi-textfield--with-icon"]]: c },
-    { [a["tedi-textfield--invalid"]]: I },
+    { [a["tedi-textfield--invalid"]]: C },
     { [a["tedi-textfield--valid"]]: te },
     { [a["tedi-textfield--clearable"]]: A },
     Q
@@ -167,7 +181,6 @@ const ye = {
         onKeyDown: Y,
         onKeyUp: X,
         onClick: ee,
-        tabIndex: i ? -1 : 0,
         ref: L,
         children: [
           ie,

package/src/tedi/components/tags/status-badge/status-badge.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),B=require("../../../../../external/classnames/index.cjs.js"),_=require("../../base/icon/icon.cjs.js"),e=require("./status-badge.module.scss.cjs.js"),x=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),j=r=>{const{getCurrentBreakpointProps:o}=x.useBreakpointProps(r.defaultServerBreakpoint),{color:u="neutral",variant:l="filled",size:c="default",children:a,className:g,title:n,status:s,icon:i,id:b,role:t,...f}=o(r),v=n?"abbr":"div",m=B.default(e.default["tedi-status-badge"],e.default[`tedi-status-badge--variant-${l}`],e.default[`tedi-status-badge--color-${u}`],s&&e.default["tedi-status-badge--status"],s&&e.default[`tedi-status-badge--status-${s}`],c==="large"&&e.default["tedi-status-badge--large"],i&&!a&&e.default["tedi-status-badge__icon-only"],g),p=t==="alert"?"assertive":t==="status"?"polite":void 0;return d.jsxs(v,{className:m,id:b,title:n,role:t,"aria-live":t?p:void 0,...f,children:[i&&d.jsx(_.Icon,{name:i,color:"inherit",size:16,className:e.default[`tedi-status-badge__icon-${u}`]}),a&&d.jsx("span",{className:e.default["tedi-status-badge__inner-text"],children:a})]})};exports.StatusBadge=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),x=require("react"),S=require("../../base/icon/icon.cjs.js"),e=require("./status-badge.module.scss.cjs.js"),j=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),n=x.forwardRef((r,l)=>{const{getCurrentBreakpointProps:c}=j.useBreakpointProps(r.defaultServerBreakpoint),{color:u="neutral",variant:g="filled",size:f="default",children:a,className:b,title:o,status:s,icon:i,id:m,role:t,...v}=c(r),p=o?"abbr":"div",B=q.default(e.default["tedi-status-badge"],e.default[`tedi-status-badge--variant-${g}`],e.default[`tedi-status-badge--color-${u}`],s&&e.default["tedi-status-badge--status"],s&&e.default[`tedi-status-badge--status-${s}`],f==="large"&&e.default["tedi-status-badge--large"],i&&!a&&e.default["tedi-status-badge__icon-only"],b),_=t==="alert"?"assertive":t==="status"?"polite":void 0;return d.jsxs(p,{ref:l,className:B,id:m,title:o,role:t,"aria-live":t?_:void 0,...v,children:[i&&d.jsx(S.Icon,{name:i,color:"inherit",size:16,className:e.default[`tedi-status-badge__icon-${u}`]}),a&&d.jsx("span",{className:e.default["tedi-status-badge__inner-text"],children:a})]})});n.displayName="StatusBadge";exports.StatusBadge=n;

package/src/tedi/components/tags/status-badge/status-badge.d.ts

@@ -52,5 +52,5 @@ export interface StatusBadgeProps extends BreakpointSupport<StatusBadgePropsBrea
      */
     role?: React.AriaRole;
 }
-export declare const StatusBadge: (props: StatusBadgeProps) => JSX.Element;
+export declare const StatusBadge: import('react').ForwardRefExoticComponent<StatusBadgeProps & import('react').RefAttributes<HTMLDivElement>>;
 export {};

package/src/tedi/components/tags/status-badge/status-badge.es.js

@@ -1,47 +1,50 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
-import _ from "../../../../../external/classnames/index.es.js";
-import { Icon as B } from "../../base/icon/icon.es.js";
+import { jsxs as B, jsx as l } from "react/jsx-runtime";
+import N from "../../../../../external/classnames/index.es.js";
+import { forwardRef as _ } from "react";
+import { Icon as x } from "../../base/icon/icon.es.js";
 import t from "./status-badge.module.scss.es.js";
-import { useBreakpointProps as N } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const z = (r) => {
-  const { getCurrentBreakpointProps: l } = N(r.defaultServerBreakpoint), {
+import { useBreakpointProps as $ } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const h = _((r, n) => {
+  const { getCurrentBreakpointProps: u } = $(r.defaultServerBreakpoint), {
     color: o = "neutral",
     variant: c = "filled",
-    size: u = "default",
+    size: m = "default",
     children: a,
-    className: m,
+    className: g,
     title: d,
     status: s,
     icon: i,
-    id: g,
+    id: p,
     role: e,
     ...b
-  } = l(r), p = d ? "abbr" : "div", v = _(
+  } = u(r), f = d ? "abbr" : "div", v = N(
     t["tedi-status-badge"],
     t[`tedi-status-badge--variant-${c}`],
     t[`tedi-status-badge--color-${o}`],
     s && t["tedi-status-badge--status"],
     s && t[`tedi-status-badge--status-${s}`],
-    u === "large" && t["tedi-status-badge--large"],
+    m === "large" && t["tedi-status-badge--large"],
     i && !a && t["tedi-status-badge__icon-only"],
-    m
+    g
   );
-  return /* @__PURE__ */ f(
-    p,
+  return /* @__PURE__ */ B(
+    f,
     {
+      ref: n,
       className: v,
-      id: g,
+      id: p,
       title: d,
       role: e,
       "aria-live": e ? e === "alert" ? "assertive" : e === "status" ? "polite" : void 0 : void 0,
       ...b,
       children: [
-        i && /* @__PURE__ */ n(B, { name: i, color: "inherit", size: 16, className: t[`tedi-status-badge__icon-${o}`] }),
-        a && /* @__PURE__ */ n("span", { className: t["tedi-status-badge__inner-text"], children: a })
+        i && /* @__PURE__ */ l(x, { name: i, color: "inherit", size: 16, className: t[`tedi-status-badge__icon-${o}`] }),
+        a && /* @__PURE__ */ l("span", { className: t["tedi-status-badge__inner-text"], children: a })
       ]
     }
   );
-};
+});
+h.displayName = "StatusBadge";
 export {
-  z as StatusBadge
+  h as StatusBadge
 };