@tedi-design-system/react 19.1.2-rc.4 → 19.2.0-rc.1

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textfield":"tedi-textfield-376bbeed","tedi-textfield__inner":"tedi-textfield__inner-98791cdd","tedi-textfield__input":"tedi-textfield__input-ade0f9a6","tedi-textfield--invalid":"tedi-textfield--invalid-290ce18d","tedi-textfield--valid":"tedi-textfield--valid-273af8c0","tedi-textfield--clearable":"tedi-textfield--clearable-f47f0508","tedi-textfield--with-icon":"tedi-textfield--with-icon-db2c6f01","tedi-textfield--small":"tedi-textfield--small-4ffcc517","tedi-textfield--large":"tedi-textfield--large-0e4d788c","tedi-textfield__right-area":"tedi-textfield__right-area-6ac81c6b","tedi-textfield__icon-wrapper":"tedi-textfield__icon-wrapper-4935814e","tedi-textfield--inline":"tedi-textfield--inline-7ed55c4e","tedi-textfield__icon":"tedi-textfield__icon-05d4adc8","tedi-textfield__feedback-wrapper":"tedi-textfield__feedback-wrapper-9d47f9c6","tedi-textfield__separator":"tedi-textfield__separator-63d1ba14"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textfield":"tedi-textfield-376bbeed","tedi-textfield__inner":"tedi-textfield__inner-98791cdd","tedi-textfield__input":"tedi-textfield__input-ade0f9a6","tedi-textfield--invalid":"tedi-textfield--invalid-290ce18d","tedi-textfield--valid":"tedi-textfield--valid-273af8c0","tedi-textfield--clearable":"tedi-textfield--clearable-f47f0508","tedi-textfield--with-icon":"tedi-textfield--with-icon-db2c6f01","tedi-textfield--small":"tedi-textfield--small-4ffcc517","tedi-textfield--large":"tedi-textfield--large-0e4d788c","tedi-textfield__right-area":"tedi-textfield__right-area-6ac81c6b","tedi-textfield--clear-on-interaction":"tedi-textfield--clear-on-interaction-155ed896","tedi-textfield__clear-button":"tedi-textfield__clear-button-edbbffef","tedi-textfield__icon-wrapper":"tedi-textfield__icon-wrapper-4935814e","tedi-textfield--inline":"tedi-textfield--inline-7ed55c4e","tedi-textfield__icon":"tedi-textfield__icon-05d4adc8","tedi-textfield__feedback-wrapper":"tedi-textfield__feedback-wrapper-9d47f9c6","tedi-textfield__separator":"tedi-textfield__separator-63d1ba14"};exports.default=e;

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

@@ -9,6 +9,8 @@ const e = {
   "tedi-textfield--small": "tedi-textfield--small-4ffcc517",
   "tedi-textfield--large": "tedi-textfield--large-0e4d788c",
   "tedi-textfield__right-area": "tedi-textfield__right-area-6ac81c6b",
+  "tedi-textfield--clear-on-interaction": "tedi-textfield--clear-on-interaction-155ed896",
+  "tedi-textfield__clear-button": "tedi-textfield__clear-button-edbbffef",
   "tedi-textfield__icon-wrapper": "tedi-textfield__icon-wrapper-4935814e",
   "tedi-textfield--inline": "tedi-textfield--inline-7ed55c4e",
   "tedi-textfield__icon": "tedi-textfield__icon-05d4adc8",