@tedi-design-system/react 19.0.0-rc.12 → 19.0.0-rc.13

package/src/tedi/components/form/time-field/time-field.es.js

@@ -1,19 +1,19 @@
-import { jsxs as q, jsx as i, Fragment as fe } from "react/jsx-runtime";
-import { useFloating as me, useClick as ue, useDismiss as pe, useRole as ge, useInteractions as he, FloatingPortal as ke, FloatingFocusManager as ve } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { jsxs as q, jsx as i, Fragment as me } from "react/jsx-runtime";
+import { useFloating as ue, useClick as pe, useDismiss as ge, useRole as he, useInteractions as ke, FloatingPortal as ve, FloatingFocusManager as be } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
 import y from "../../../../../external/classnames/index.es.js";
-import be, { useState as N, useEffect as z } from "react";
+import Ce, { useState as N, useEffect as z } from "react";
 import { TextField as A } from "../textfield/textfield.es.js";
-import { TimePicker as Ce } from "../time-picker/time-picker.es.js";
+import { TimePicker as xe } from "../time-picker/time-picker.es.js";
 import d from "./time-field.module.scss.es.js";
-import { normalizeTime as xe, TIMEPICKER_OFFSET as _e } from "./time-field-helpers.es.js";
-import { TimePickerModal as Fe } from "./time-picker-modal/time-picker-modal.es.js";
-import { useBreakpointProps as Pe } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import Te, { isBreakpointBelow as we } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { normalizeTime as _e, TIMEPICKER_OFFSET as Fe } from "./time-field-helpers.es.js";
+import { TimePickerModal as Pe } from "./time-picker-modal/time-picker-modal.es.js";
+import { useBreakpointProps as Te } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import we, { isBreakpointBelow as Ie } from "../../../helpers/hooks/use-breakpoint.es.js";
 import { Dropdown as b } from "../../overlays/dropdown/dropdown.es.js";
-import { autoUpdate as Ie } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as ye, flip as Ne, shift as Be } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-const Oe = (C) => {
-  const { getCurrentBreakpointProps: K } = Pe(C.defaultServerBreakpoint), {
+import { autoUpdate as ye } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as Ne, flip as Be, shift as Oe } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+const Me = (C) => {
+  const { getCurrentBreakpointProps: K } = Te(C.defaultServerBreakpoint), {
     id: G,
     label: H,
     value: c,
@@ -33,32 +33,33 @@ const Oe = (C) => {
     useNativePicker: X = !1,
     timePickerTrigger: M = "button",
     showPicker: o = !0,
-    availableTimesVariant: F = "grid-buttons"
-  } = K(C), R = c !== void 0, [Y, V] = N(c ?? J ?? ""), f = R ? c : Y, [P, T] = N(!1), [Z, E] = N(!1), m = M === "input", l = X, $ = Te(), u = !l && o && !h && !s && (_ === !0 || typeof _ == "string" && we($, _)), ee = me({
+    availableTimesVariant: F = "grid-buttons",
+    clearable: Y = !0
+  } = K(C), R = c !== void 0, [Z, V] = N(c ?? J ?? ""), f = R ? c : Z, [P, T] = N(!1), [$, E] = N(!1), m = M === "input", l = X, ee = we(), u = !l && o && !h && !s && (_ === !0 || typeof _ == "string" && Ie(ee, _)), te = ue({
     open: P,
     onOpenChange: T,
     placement: m ? "bottom-start" : "bottom-end",
-    middleware: [ye(_e), Ne(), Be()],
-    whileElementsMounted: Ie
-  }), { refs: w, context: k, x: te, y: ie, strategy: oe } = ee, ne = ue(k), re = pe(k), le = ge(k, { role: "listbox" }), U = o && m && !h && !s && !l && !u, D = he([...U ? [ne] : [], re, le]), p = (e) => {
+    middleware: [Ne(Fe), Be(), Oe()],
+    whileElementsMounted: ye
+  }), { refs: w, context: k, x: ie, y: oe, strategy: ne } = te, re = pe(k), le = ge(k), se = he(k, { role: "listbox" }), U = o && m && !h && !s && !l && !u, D = ke([...U ? [re] : [], le, se]), p = (e) => {
     const n = e.trim();
     R || V(n), x == null || x(n);
-  }, se = (e) => {
+  }, ae = (e) => {
     var v;
     const n = e.target.value ?? "";
     (v = t == null ? void 0 : t.onBlur) == null || v.call(t, e);
-    const r = xe(n);
+    const r = _e(n);
     r !== null && r !== n && p(r);
   };
   z(() => {
     c !== void 0 && V(c);
   }, [c]);
-  const g = be.useRef(null);
+  const g = Ce.useRef(null);
   z(() => {
     var e;
     (e = g.current) != null && e.inner && w.setReference(g.current.inner);
   }, [w]);
-  const ae = () => {
+  const de = () => {
     var n;
     const e = (n = g.current) == null ? void 0 : n.input;
     if (e) {
@@ -68,8 +69,8 @@ const Oe = (C) => {
       }
       e.focus();
     }
-  }, de = () => T((e) => !e), S = () => E(!0), ce = () => {
-    !o || s || (l ? ae() : u ? S() : M === "button" && de());
+  }, ce = () => T((e) => !e), S = () => E(!0), fe = () => {
+    !o || s || (l ? de() : u ? S() : M === "button" && ce());
   }, j = u && m && !h ? () => {
     S();
   } : void 0, I = {
@@ -81,11 +82,11 @@ const Oe = (C) => {
     readOnly: h || !l && m,
     disabled: s || (t == null ? void 0 : t.disabled),
     icon: o ? "schedule" : { name: "schedule", color: "inherit" },
-    isClearable: !0,
+    isClearable: Y,
     required: L,
-    onIconClick: o ? ce : void 0,
+    onIconClick: o ? fe : void 0,
     onChange: p,
-    onBlur: se,
+    onBlur: ae,
     className: y(
       d["tedi-time-field__textfield"],
       { [d["tedi-time-field__icon--disabled"]]: !o || s },
@@ -125,7 +126,7 @@ const Oe = (C) => {
       /* @__PURE__ */ i(b.Content, { children: a.map((r, v) => /* @__PURE__ */ i(b.Item, { index: v, active: r === f, onClick: () => p(r), children: r }, r)) })
     ] });
   }
-  return /* @__PURE__ */ q(fe, { children: [
+  return /* @__PURE__ */ q(me, { children: [
     /* @__PURE__ */ i(
       "div",
       {
@@ -137,9 +138,9 @@ const Oe = (C) => {
       }
     ),
     u && /* @__PURE__ */ i(
-      Fe,
+      Pe,
       {
-        open: Z,
+        open: $,
         onOpenChange: E,
         value: f,
         onConfirm: p,
@@ -149,19 +150,19 @@ const Oe = (C) => {
         modalProps: W
       }
     ),
-    !l && o && !s && !u && /* @__PURE__ */ i(ke, { children: P && /* @__PURE__ */ i(ve, { context: k, modal: !1, initialFocus: -1, children: /* @__PURE__ */ i(
+    !l && o && !s && !u && /* @__PURE__ */ i(ve, { children: P && /* @__PURE__ */ i(be, { context: k, modal: !1, initialFocus: -1, children: /* @__PURE__ */ i(
       "div",
       {
         ref: w.setFloating,
         ...D.getFloatingProps({
           style: {
-            position: oe,
-            top: ie ?? 0,
-            left: te ?? 0
+            position: ne,
+            top: oe ?? 0,
+            left: ie ?? 0
           }
         }),
         children: /* @__PURE__ */ i(
-          Ce,
+          xe,
           {
             value: f,
             stepMinutes: B,
@@ -177,7 +178,7 @@ const Oe = (C) => {
     ) }) })
   ] });
 };
-Oe.displayName = "TimeField";
+Me.displayName = "TimeField";
 export {
-  Oe as TimeField
+  Me as TimeField
 };