@tedi-design-system/react 19.1.0-rc.1 → 19.1.0-rc.10

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

@@ -15,7 +15,7 @@ const Se = {
   large: 24,
   default: 18
 }, Be = _e((I, J) => {
-  var O;
+  var M;
   const { getCurrentBreakpointProps: Q } = ke(I.defaultServerBreakpoint), {
     id: we,
     label: g,
@@ -43,15 +43,15 @@ const Se = {
     value: N,
     onFocus: A,
     onBlur: k,
-    onClick: ie,
+    onClick: ae,
     helper: e,
     input: a,
-    name: ae,
+    name: ie,
     isTextArea: le,
     startSlot: ne,
     endSlot: se,
     ...oe
-  } = Q(I) || {}, { getLabel: L } = Ce(), T = y.useRef(null), E = y.useRef(null), [de, P] = y.useState(N ?? $ ?? ""), V = N ?? de, f = !!(R && V && !F), m = (O = Ae) == null ? void 0 : O(), ce = y.useId(), fe = m == null ? void 0 : m.hasExternalLabel, u = I.id ?? (m == null ? void 0 : m.inputId) ?? ce;
+  } = 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;
   y.useImperativeHandle(J, () => ({
     get input() {
       return E.current;
@@ -60,14 +60,14 @@ const Se = {
       return T.current;
     }
   }));
-  const j = 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(
+  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 || P(r), o == null || o(r);
+      h || O(r), o == null || o(r);
     },
     [h, o]
-  ), H = B(() => {
-    h || P(""), o == null || o(""), x == null || x();
-  }, [h, o, x]), K = B(() => {
+  ), j = B(() => {
+    h || O(""), o == null || o(""), x == null || x();
+  }, [h, o, x]), H = B(() => {
     if (!i) return null;
     const C = {
       size: s === "large" ? 24 : s === "small" ? !!v ? 18 : 16 : 18,
@@ -84,33 +84,33 @@ const Se = {
         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]), M = b(() => f ? /* @__PURE__ */ n(
+  }, [i, s, v, p, d]), K = b(() => f ? /* @__PURE__ */ n(
     be,
     {
       iconSize: Se[s === "large" ? "large" : "default"],
-      onClick: d ? void 0 : H,
+      onClick: d ? void 0 : j,
       disabled: d,
       title: L("clear"),
       className: t["tedi-textfield__clear-button"]
     }
-  ) : null, [f, s, d, H, L]), ye = b(() => !f && !i ? null : /* @__PURE__ */ S("div", { className: t["tedi-textfield__right-area"], children: [
-    M,
+  ) : null, [f, s, d, j, L]), ye = b(() => !f && !i ? null : /* @__PURE__ */ S("div", { className: t["tedi-textfield__right-area"], children: [
+    K,
     f && i && /* @__PURE__ */ n(Ie, { color: "primary", axis: "vertical", className: t["tedi-textfield__separator"] }),
-    i && K()
-  ] }), [f, i, M, K]), ve = /* @__PURE__ */ n(
+    i && H()
+  ] }), [f, i, K, H]), ve = /* @__PURE__ */ n(
     ge,
     {
       ...a,
       id: u,
-      name: ae,
-      value: V,
+      name: ie,
+      value: P,
       defaultValue: $,
       onChange: pe,
       onChangeEvent: G,
       disabled: d,
-      readOnly: F,
+      readOnly: F || (a == null ? void 0 : a.readOnly),
       required: w,
-      invalid: j,
+      invalid: V,
       placeholder: Y,
       className: _(t["tedi-textfield__input"], X, {
         [t["tedi-textfield__input--hidden-arrows"]]: Z
@@ -132,7 +132,7 @@ const Se = {
     t["tedi-textfield"],
     { [t[`tedi-textfield--${s}`]]: s },
     { [t["tedi-textfield--with-icon"]]: i },
-    { [t["tedi-textfield--invalid"]]: j },
+    { [t["tedi-textfield--invalid"]]: V },
     { [t["tedi-textfield--valid"]]: me },
     { [t["tedi-textfield--clearable"]]: f },
     W
@@ -146,7 +146,7 @@ const Se = {
         onKeyDown: re,
         onKeyUp: ee,
         onKeyPress: te,
-        onClick: ie,
+        onClick: ae,
         ref: T,
         children: [
           ne,

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),y=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),A=require("../textfield/textfield.cjs.js"),ge=require("../time-picker/time-picker.cjs.js"),d=require("./time-field.module.scss.cjs.js"),H=require("./time-field-helpers.cjs.js"),ke=require("./time-picker-modal/time-picker-modal.cjs.js"),xe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),K=require("../../../helpers/hooks/use-breakpoint.cjs.js"),F=require("../../overlays/dropdown/dropdown.cjs.js"),he=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),B=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),G=_=>{const{getCurrentBreakpointProps:J}=xe.useBreakpointProps(_.defaultServerBreakpoint),{id:L,label:Q,value:u,defaultValue:W,onChange:C,readOnly:h=!1,disabled:l=!1,required:X,placeholder:Y,inputProps:t,stepMinutes:M=1,className:O,availableTimes:a,modal:P=!1,modalProps:Z}=_,{useNativePicker:$=!1,timePickerTrigger:N="button",showPicker:n=!0,availableTimesVariant:w="grid-buttons",clearable:ee=!0}=J(_),D=u!==void 0,[te,R]=f.useState(u??W??""),m=D?u:te,[T,j]=f.useState(!1),[ie,U]=f.useState(!1),p=N==="input",s=$,ne=K.default(),g=!s&&n&&!h&&!l&&(P===!0||typeof P=="string"&&K.isBreakpointBelow(ne,P)),oe=c.useFloating({open:T,onOpenChange:j,placement:p?"bottom-start":"bottom-end",middleware:[B.offset(H.TIMEPICKER_OFFSET),B.flip(),B.shift()],whileElementsMounted:he.autoUpdate}),{refs:q,context:b,x:re,y:se,strategy:le}=oe,ae=c.useClick(b),de=c.useDismiss(b),ce=c.useRole(b,{role:"listbox"}),S=n&&p&&!h&&!l&&!s&&!g,V=c.useInteractions([...S?[ae]:[],de,ce]),k=e=>{const o=e.trim();D||R(o),C==null||C(o)},ue=e=>{var v;const o=e.target.value??"";(v=t==null?void 0:t.onBlur)==null||v.call(t,e);const r=H.normalizeTime(o);r!==null&&r!==o&&k(r)};f.useEffect(()=>{u!==void 0&&R(u)},[u]);const x=f.useRef(null);f.useEffect(()=>{var e;(e=x.current)!=null&&e.inner&&q.setReference(x.current.inner)},[q]);const fe=()=>{var o;const e=(o=x.current)==null?void 0:o.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},me=()=>j(e=>!e),E=()=>U(!0),pe=()=>{!n||l||(s?fe():g?E():N==="button"&&me())},z=g&&p&&!h?()=>{E()}:void 0,I={...t,id:L,label:Q,value:m,placeholder:Y,readOnly:h||!s&&p,disabled:l||(t==null?void 0:t.disabled),icon:n?"schedule":{name:"schedule",color:"inherit"},isClearable:ee,required:X,onIconClick:n?pe:void 0,onChange:k,onBlur:ue,className:y.default(d.default["tedi-time-field__textfield"],{[d.default["tedi-time-field__icon--disabled"]]:!n||l},{[d.default["tedi-time-field__textfield--disabled"]]:l||(t==null?void 0:t.disabled)},{[d.default["tedi-time-field--native"]]:s}),input:{...t==null?void 0:t.input,...s&&{type:"time"},...z&&{onClick:z}}};if(!s&&n&&!l&&w==="dropdown"&&!!(a!=null&&a.length)){const e=a.indexOf(m),o=e>=0?e:0;return i.jsxs(F.Dropdown,{width:"trigger",defaultActiveIndex:o,children:[i.jsx(F.Dropdown.Trigger,{children:i.jsx("div",{className:y.default(d.default["tedi-time-field__container"],O,{[d.default["tedi-time-field__container--native"]]:s}),children:i.jsx(A.TextField,{ref:x,...I,input:{...I.input,...!p&&{onClick:r=>r.stopPropagation()}}})})}),i.jsx(F.Dropdown.Content,{children:a.map((r,v)=>i.jsx(F.Dropdown.Item,{index:v,active:r===m,onClick:()=>k(r),children:r},r))})]})}return i.jsxs(i.Fragment,{children:[i.jsx("div",{className:y.default(d.default["tedi-time-field__container"],O),...S?V.getReferenceProps():{},"aria-haspopup":n?"listbox":void 0,tabIndex:-1,children:i.jsx(A.TextField,{ref:x,"aria-expanded":n?T:void 0,...I})}),g&&i.jsx(ke.TimePickerModal,{open:ie,onOpenChange:U,value:m,onConfirm:k,stepMinutes:M,availableTimes:a,gridVariant:w==="grid-radio"?"radio":"button",modalProps:Z}),!s&&n&&!l&&!g&&i.jsx(c.FloatingPortal,{children:T&&i.jsx(c.FloatingFocusManager,{context:b,modal:!1,initialFocus:-1,children:i.jsx("div",{ref:q.setFloating,...V.getFloatingProps({style:{position:le,top:se??0,left:re??0}}),children:i.jsx(ge.TimePicker,{value:m,stepMinutes:M,availableTimes:a,onChange:e=>{k(e),a&&j(!1)},gridVariant:w==="grid-radio"?"radio":"button",className:d.default["tedi-time-field__picker-wrapper"]})})})})]})};G.displayName="TimeField";exports.TimeField=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),M=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),J=require("../textfield/textfield.cjs.js"),Pe=require("../time-picker/time-picker.cjs.js"),c=require("./time-field.module.scss.cjs.js"),Q=require("./time-field-helpers.cjs.js"),Ce=require("./time-picker-modal/time-picker-modal.cjs.js"),_e=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Te=require("../../../providers/label-provider/use-labels.cjs.js"),W=require("../../../helpers/hooks/use-breakpoint.cjs.js"),P=require("../../overlays/dropdown/dropdown.cjs.js"),je=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),N=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),X=C=>{const{getCurrentBreakpointProps:Y}=_e.useBreakpointProps(C.defaultServerBreakpoint),{getLabel:Z}=Te.useLabels(),{id:$,label:ee,value:f,defaultValue:te,onChange:_,readOnly:h=!1,disabled:a=!1,required:ie,placeholder:ne,inputProps:t,stepMinutes:R=1,className:D,availableTimes:l,modal:T=!1,modalProps:oe}=C,{useNativePicker:re=!1,timePickerTrigger:j="button",showPicker:o=!0,availableTimesVariant:q="grid-buttons",clearable:se=!0}=Y(C),E=f!==void 0,[ae,S]=m.useState(f??te??""),g=E?f:ae,[w,I]=m.useState(!1),[U,V]=m.useState(!1),p=j==="input",n=re,le=W.default(),d=!n&&o&&!h&&!a&&(T===!0||typeof T=="string"&&W.isBreakpointBelow(le,T)),de=u.useFloating({open:w,onOpenChange:I,placement:p?"bottom-start":"bottom-end",middleware:[N.offset(Q.TIMEPICKER_OFFSET),N.flip(),N.shift()],whileElementsMounted:je.autoUpdate}),{refs:B,context:v,x:ce,y:ue,strategy:fe}=de,pe=u.useClick(v),me=u.useDismiss(v),ge=u.useRole(v,{role:"listbox"}),L=o&&p&&!h&&!a&&!n&&!d,z=u.useInteractions([...L?[pe]:[],me,ge]),x=e=>{const r=e.trim();E||S(r),_==null||_(r)},xe=e=>{var F;const r=e.target.value??"";(F=t==null?void 0:t.onBlur)==null||F.call(t,e);const s=Q.normalizeTime(r);s!==null&&s!==r&&x(s)};m.useEffect(()=>{f!==void 0&&S(f)},[f]);const k=m.useRef(null);m.useEffect(()=>{var e;(e=k.current)!=null&&e.inner&&B.setReference(k.current.inner)},[B]);const ke=()=>{var r;const e=(r=k.current)==null?void 0:r.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},be=()=>I(e=>!e),A=()=>V(!0),he=()=>{!o||a||(n?ke():d?A():j==="button"&&be())},H=d&&p&&!h?()=>{A()}:void 0,y=!n&&o&&!a&&q==="dropdown"&&!!(l!=null&&l.length),K=d?"dialog":"listbox",G=d?U:w,ve=o&&!n&&!y&&(j==="button"||d),Fe=o&&p&&!n&&!y,O={...t,id:$,label:ee,value:g,placeholder:ne,readOnly:h||!n&&p,disabled:a||(t==null?void 0:t.disabled),icon:o?"schedule":{name:"schedule",color:"inherit"},isClearable:se,required:ie,onIconClick:o?he:void 0,iconButtonProps:{"aria-label":Z("time-field.open-picker"),...ve&&{"aria-haspopup":K,"aria-expanded":G},...t==null?void 0:t.iconButtonProps},onChange:x,onBlur:xe,className:M.default(c.default["tedi-time-field__textfield"],{[c.default["tedi-time-field__icon--disabled"]]:!o||a},{[c.default["tedi-time-field__textfield--disabled"]]:a||(t==null?void 0:t.disabled)},{[c.default["tedi-time-field--native"]]:n}),input:{...t==null?void 0:t.input,...n&&{type:"time"},...H&&{onClick:H},...Fe&&{role:"combobox","aria-haspopup":K,"aria-expanded":G}}};if(y){const e=l.indexOf(g),r=e>=0?e:0;return i.jsxs(P.Dropdown,{width:"trigger",defaultActiveIndex:r,children:[i.jsx(P.Dropdown.Trigger,{children:i.jsx("div",{role:"combobox",className:M.default(c.default["tedi-time-field__container"],D,{[c.default["tedi-time-field__container--native"]]:n}),children:i.jsx(J.TextField,{ref:k,...O,input:{...O.input,...!p&&{onClick:s=>s.stopPropagation()}}})})}),i.jsx(P.Dropdown.Content,{children:l.map((s,F)=>i.jsx(P.Dropdown.Item,{index:F,active:s===g,onClick:()=>x(s),children:s},s))})]})}const b={...L?z.getReferenceProps():{}};return delete b.role,delete b["aria-haspopup"],delete b["aria-expanded"],delete b["aria-controls"],i.jsxs(i.Fragment,{children:[i.jsx("div",{className:M.default(c.default["tedi-time-field__container"],D),...b,tabIndex:-1,children:i.jsx(J.TextField,{ref:k,...O})}),d&&i.jsx(Ce.TimePickerModal,{open:U,onOpenChange:V,value:g,onConfirm:x,stepMinutes:R,availableTimes:l,gridVariant:q==="grid-radio"?"radio":"button",modalProps:oe}),!n&&o&&!a&&!d&&i.jsx(u.FloatingPortal,{children:w&&i.jsx(u.FloatingFocusManager,{context:v,modal:!1,initialFocus:-1,children:i.jsx("div",{ref:B.setFloating,...z.getFloatingProps({style:{position:fe,top:ue??0,left:ce??0}}),children:i.jsx(Pe.TimePicker,{value:g,stepMinutes:R,availableTimes:l,onChange:e=>{x(e),l&&I(!1)},gridVariant:q==="grid-radio"?"radio":"button",className:c.default["tedi-time-field__picker-wrapper"]})})})})]})};X.displayName="TimeField";exports.TimeField=X;

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

@@ -1,67 +1,68 @@
-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 Ce, { useState as N, useEffect as z } from "react";
-import { TextField as A } from "../textfield/textfield.es.js";
-import { TimePicker as xe } from "../time-picker/time-picker.es.js";
+import { jsxs as G, jsx as i, Fragment as xe } from "react/jsx-runtime";
+import { useFloating as ve, useClick as Ce, useDismiss as _e, useRole as Fe, useInteractions as Pe, FloatingPortal as Ie, FloatingFocusManager as Te } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import O from "../../../../../external/classnames/index.es.js";
+import we, { useState as M, useEffect as H } from "react";
+import { TextField as J } from "../textfield/textfield.es.js";
+import { TimePicker as Be } from "../time-picker/time-picker.es.js";
 import d from "./time-field.module.scss.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 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,
-    defaultValue: J,
-    onChange: x,
-    readOnly: h = !1,
-    disabled: s = !1,
-    required: L,
-    placeholder: Q,
+import { normalizeTime as ye, TIMEPICKER_OFFSET as Ne } from "./time-field-helpers.es.js";
+import { TimePickerModal as Oe } from "./time-picker-modal/time-picker-modal.es.js";
+import { useBreakpointProps as Me } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as Re } from "../../../providers/label-provider/use-labels.es.js";
+import Ve, { isBreakpointBelow as Ee } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { Dropdown as v } from "../../overlays/dropdown/dropdown.es.js";
+import { autoUpdate as Ue } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as De, flip as Se, shift as je } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+const Le = (C) => {
+  const { getCurrentBreakpointProps: Q } = Me(C.defaultServerBreakpoint), { getLabel: W } = Re(), {
+    id: X,
+    label: Y,
+    value: m,
+    defaultValue: Z,
+    onChange: _,
+    readOnly: k = !1,
+    disabled: l = !1,
+    required: $,
+    placeholder: ee,
     inputProps: t,
-    stepMinutes: B = 1,
-    className: O,
-    availableTimes: a,
-    modal: _ = !1,
-    modalProps: W
+    stepMinutes: R = 1,
+    className: V,
+    availableTimes: s,
+    modal: F = !1,
+    modalProps: te
   } = C, {
-    useNativePicker: X = !1,
-    timePickerTrigger: M = "button",
-    showPicker: o = !0,
-    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: [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);
-  }, ae = (e) => {
-    var v;
-    const n = e.target.value ?? "";
-    (v = t == null ? void 0 : t.onBlur) == null || v.call(t, e);
-    const r = _e(n);
-    r !== null && r !== n && p(r);
+    useNativePicker: ie = !1,
+    timePickerTrigger: P = "button",
+    showPicker: n = !0,
+    availableTimesVariant: I = "grid-buttons",
+    clearable: oe = !0
+  } = Q(C), E = m !== void 0, [ne, U] = M(m ?? Z ?? ""), f = E ? m : ne, [T, w] = M(!1), [D, S] = M(!1), u = P === "input", o = ie, re = Ve(), c = !o && n && !k && !l && (F === !0 || typeof F == "string" && Ee(re, F)), ae = ve({
+    open: T,
+    onOpenChange: w,
+    placement: u ? "bottom-start" : "bottom-end",
+    middleware: [De(Ne), Se(), je()],
+    whileElementsMounted: Ue
+  }), { refs: B, context: b, x: le, y: se, strategy: ce } = ae, de = Ce(b), me = _e(b), ue = Fe(b, { role: "listbox" }), j = n && u && !k && !l && !o && !c, L = Pe([...j ? [de] : [], me, ue]), p = (e) => {
+    const r = e.trim();
+    E || U(r), _ == null || _(r);
+  }, fe = (e) => {
+    var x;
+    const r = e.target.value ?? "";
+    (x = t == null ? void 0 : t.onBlur) == null || x.call(t, e);
+    const a = ye(r);
+    a !== null && a !== r && p(a);
   };
-  z(() => {
-    c !== void 0 && V(c);
-  }, [c]);
-  const g = Ce.useRef(null);
-  z(() => {
+  H(() => {
+    m !== void 0 && U(m);
+  }, [m]);
+  const g = we.useRef(null);
+  H(() => {
     var e;
-    (e = g.current) != null && e.inner && w.setReference(g.current.inner);
-  }, [w]);
-  const de = () => {
-    var n;
-    const e = (n = g.current) == null ? void 0 : n.input;
+    (e = g.current) != null && e.inner && B.setReference(g.current.inner);
+  }, [B]);
+  const pe = () => {
+    var r;
+    const e = (r = g.current) == null ? void 0 : r.input;
     if (e) {
       if (typeof e.showPicker == "function") {
         e.showPicker();
@@ -69,108 +70,109 @@ const Me = (C) => {
       }
       e.focus();
     }
-  }, 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 = {
+  }, ge = () => w((e) => !e), q = () => S(!0), he = () => {
+    !n || l || (o ? pe() : c ? q() : P === "button" && ge());
+  }, z = c && u && !k ? () => {
+    q();
+  } : void 0, y = !o && n && !l && I === "dropdown" && !!(s != null && s.length), A = c ? "dialog" : "listbox", K = c ? D : T, ke = n && !o && !y && (P === "button" || c), be = n && u && !o && !y, N = {
     ...t,
-    id: G,
-    label: H,
+    id: X,
+    label: Y,
     value: f,
-    placeholder: Q,
-    readOnly: h || !l && m,
-    disabled: s || (t == null ? void 0 : t.disabled),
-    icon: o ? "schedule" : { name: "schedule", color: "inherit" },
-    isClearable: Y,
-    required: L,
-    onIconClick: o ? fe : void 0,
+    placeholder: ee,
+    readOnly: k || !o && u,
+    disabled: l || (t == null ? void 0 : t.disabled),
+    icon: n ? "schedule" : { name: "schedule", color: "inherit" },
+    isClearable: oe,
+    required: $,
+    onIconClick: n ? he : void 0,
+    iconButtonProps: {
+      "aria-label": W("time-field.open-picker"),
+      ...ke && { "aria-haspopup": A, "aria-expanded": K },
+      ...t == null ? void 0 : t.iconButtonProps
+    },
     onChange: p,
-    onBlur: ae,
-    className: y(
+    onBlur: fe,
+    className: O(
       d["tedi-time-field__textfield"],
-      { [d["tedi-time-field__icon--disabled"]]: !o || s },
-      { [d["tedi-time-field__textfield--disabled"]]: s || (t == null ? void 0 : t.disabled) },
-      { [d["tedi-time-field--native"]]: l }
+      { [d["tedi-time-field__icon--disabled"]]: !n || l },
+      { [d["tedi-time-field__textfield--disabled"]]: l || (t == null ? void 0 : t.disabled) },
+      { [d["tedi-time-field--native"]]: o }
     ),
     input: {
       ...t == null ? void 0 : t.input,
-      ...l && { type: "time" },
-      ...j && { onClick: j }
+      ...o && { type: "time" },
+      ...z && { onClick: z },
+      ...be && { role: "combobox", "aria-haspopup": A, "aria-expanded": K }
     }
   };
-  if (!l && o && !s && F === "dropdown" && !!(a != null && a.length)) {
-    const e = a.indexOf(f), n = e >= 0 ? e : 0;
-    return /* @__PURE__ */ q(b, { width: "trigger", defaultActiveIndex: n, children: [
-      /* @__PURE__ */ i(b.Trigger, { children: /* @__PURE__ */ i(
+  if (y) {
+    const e = s.indexOf(f), r = e >= 0 ? e : 0;
+    return /* @__PURE__ */ G(v, { width: "trigger", defaultActiveIndex: r, children: [
+      /* @__PURE__ */ i(v.Trigger, { children: /* @__PURE__ */ i(
         "div",
         {
-          className: y(d["tedi-time-field__container"], O, {
-            [d["tedi-time-field__container--native"]]: l
+          role: "combobox",
+          className: O(d["tedi-time-field__container"], V, {
+            [d["tedi-time-field__container--native"]]: o
           }),
           children: /* @__PURE__ */ i(
-            A,
+            J,
             {
               ref: g,
-              ...I,
+              ...N,
               input: {
-                ...I.input,
-                ...!m && {
-                  onClick: (r) => r.stopPropagation()
+                ...N.input,
+                ...!u && {
+                  onClick: (a) => a.stopPropagation()
                 }
               }
             }
           )
         }
       ) }),
-      /* @__PURE__ */ i(b.Content, { children: a.map((r, v) => /* @__PURE__ */ i(b.Item, { index: v, active: r === f, onClick: () => p(r), children: r }, r)) })
+      /* @__PURE__ */ i(v.Content, { children: s.map((a, x) => /* @__PURE__ */ i(v.Item, { index: x, active: a === f, onClick: () => p(a), children: a }, a)) })
     ] });
   }
-  return /* @__PURE__ */ q(me, { children: [
-    /* @__PURE__ */ i(
-      "div",
-      {
-        className: y(d["tedi-time-field__container"], O),
-        ...U ? D.getReferenceProps() : {},
-        "aria-haspopup": o ? "listbox" : void 0,
-        tabIndex: -1,
-        children: /* @__PURE__ */ i(A, { ref: g, "aria-expanded": o ? P : void 0, ...I })
-      }
-    ),
-    u && /* @__PURE__ */ i(
-      Pe,
+  const h = {
+    ...j ? L.getReferenceProps() : {}
+  };
+  return delete h.role, delete h["aria-haspopup"], delete h["aria-expanded"], delete h["aria-controls"], /* @__PURE__ */ G(xe, { children: [
+    /* @__PURE__ */ i("div", { className: O(d["tedi-time-field__container"], V), ...h, tabIndex: -1, children: /* @__PURE__ */ i(J, { ref: g, ...N }) }),
+    c && /* @__PURE__ */ i(
+      Oe,
       {
-        open: $,
-        onOpenChange: E,
+        open: D,
+        onOpenChange: S,
         value: f,
         onConfirm: p,
-        stepMinutes: B,
-        availableTimes: a,
-        gridVariant: F === "grid-radio" ? "radio" : "button",
-        modalProps: W
+        stepMinutes: R,
+        availableTimes: s,
+        gridVariant: I === "grid-radio" ? "radio" : "button",
+        modalProps: te
       }
     ),
-    !l && o && !s && !u && /* @__PURE__ */ i(ve, { children: P && /* @__PURE__ */ i(be, { context: k, modal: !1, initialFocus: -1, children: /* @__PURE__ */ i(
+    !o && n && !l && !c && /* @__PURE__ */ i(Ie, { children: T && /* @__PURE__ */ i(Te, { context: b, modal: !1, initialFocus: -1, children: /* @__PURE__ */ i(
       "div",
       {
-        ref: w.setFloating,
-        ...D.getFloatingProps({
+        ref: B.setFloating,
+        ...L.getFloatingProps({
           style: {
-            position: ne,
-            top: oe ?? 0,
-            left: ie ?? 0
+            position: ce,
+            top: se ?? 0,
+            left: le ?? 0
           }
         }),
         children: /* @__PURE__ */ i(
-          xe,
+          Be,
           {
             value: f,
-            stepMinutes: B,
-            availableTimes: a,
+            stepMinutes: R,
+            availableTimes: s,
             onChange: (e) => {
-              p(e), a && T(!1);
+              p(e), s && w(!1);
             },
-            gridVariant: F === "grid-radio" ? "radio" : "button",
+            gridVariant: I === "grid-radio" ? "radio" : "button",
             className: d["tedi-time-field__picker-wrapper"]
           }
         )
@@ -178,7 +180,7 @@ const Me = (C) => {
     ) }) })
   ] });
 };
-Me.displayName = "TimeField";
+Le.displayName = "TimeField";
 export {
-  Me as TimeField
+  Le as TimeField
 };

package/src/tedi/components/layout/sidenav/components/sidenav-item/sidenav-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),n=require("../../../../../../../external/classnames/index.cjs.js"),P=require("../../../../base/icon/icon.cjs.js"),y=require("../../../../content/collapse/collapse.cjs.js"),k=require("../../../../navigation/link/link.cjs.js"),s=require("../../sidenav.module.scss.cjs.js"),J=require("../sidenav-dropdown/sidenav-dropdown.cjs.js"),K=require("../../../../../providers/label-provider/use-labels.cjs.js"),h=require("../../../../overlays/tooltip/tooltip.cjs.js"),D=M=>{const{icon:t,children:i,isActive:g,onClick:x,subItems:C,subItemGroups:O,as:j,onItemClick:v,className:E,level:d=1,isCollapsed:c=!1,isDefaultOpen:R=!1,sideNavItemSize:B="default",...u}=M,{getLabel:T}=K.useLabels(),[o,$]=f.useState(R??!1),[S,z]=f.useState(!1),N=f.useId(),m=O??(C?[{subItems:C}]:null),l=!!m,F=d>1&&l,H=n.default(s.default["tedi-sidenav__item"],s.default[`tedi-sidenav__item--${B}`],{[s.default[`tedi-sidenav__item--level-${d}`]]:d>1,[s.default["tedi-sidenav__item--current"]]:g,[s.default["tedi-sidenav__item--has-children"]]:l,[s.default["tedi-sidenav__item--with-tree"]]:F},E),_=a=>{const r={color:"white",className:n.default(s.default["tedi-sidenav__icon"])},p=typeof a=="string"?{...r,name:a}:{...r,...a,className:n.default(r.className,a==null?void 0:a.className)};return e.jsx(P.Icon,{...p})},A=a=>{x==null||x(a),l||v==null||v()},w=a=>{$(a)},G=l&&(u.href||u.to),b={...u,as:j,onClick:A,className:n.default(s.default["tedi-sidenav__link"],G&&s.default["tedi-sidenav__link--has-children-link"]),noStyle:!0,role:"menuitem","aria-current":g?"page":void 0,"aria-label":c&&typeof i=="string"?i:void 0,...l?{"aria-haspopup":"true","aria-expanded":o,"aria-controls":N}:{}},I=()=>!c&&(m==null?void 0:m.map((a,L)=>{var r;return e.jsxs("div",{children:[(a==null?void 0:a.subHeading)&&e.jsx("div",{className:s.default["tedi-sidenav__subheading"],children:a.subHeading}),e.jsx("ul",{className:s.default["tedi-sidenav__list"],role:"menu",children:(r=a.subItems)==null?void 0:r.map((p,W)=>f.createElement(D,{as:j,...p,key:W,level:d+1,onItemClick:v,isCollapsed:c,className:n.default(s.default["tedi-sidenav__sub-item"],p.className)}))})]},L)})),q=e.jsx("li",{"data-name":"sidenav-item",className:H,children:l&&c?e.jsx(J.SideNavDropdown,{trigger:e.jsx(h.Tooltip.Trigger,{children:e.jsxs("span",{className:n.default(s.default["tedi-sidenav__link"],S&&s.default["tedi-sidenav__link--active"]),children:[t&&_(t),e.jsx(P.Icon,{name:S?"chevron_right":"expand_more",color:"white",className:s.default["tedi-sidenav__toggle-icon"],size:18}),e.jsx("span",{className:s.default["tedi-sidenav__title"],children:i})]})}),as:j,groups:m,onOpenChange:z}):l&&d===1?u.href||u.to?e.jsxs(e.Fragment,{children:[e.jsxs(k.Link,{...b,children:[t&&_(t),e.jsx("span",{className:s.default["tedi-sidenav__title"],children:i})]}),e.jsx("div",{className:s.default["tedi-sidenav__link-collapse-wrapper"],children:e.jsx(y.Collapse,{id:N,hideCollapseText:!0,inverted:!0,open:o,onToggle:w,toggleLabel:T("sidenav.toggleSubmenuChildren",{isCollapsedInternal:o,children:i}),className:s.default["tedi-sidenav__collapse"],titleRowProps:{element:"span"},children:I()})})]}):e.jsx(y.Collapse,{id:N,hideCollapseText:!0,inverted:!0,fullRowToggle:!0,open:o,onToggle:w,className:s.default["tedi-sidenav__collapse"],titleRowProps:{element:"span"},toggleLabel:T("sidenav.toggleSubmenuChildren",{isCollapsedInternal:o,children:i}),title:e.jsxs("span",{className:n.default(s.default["tedi-sidenav__link"],o&&s.default["tedi-sidenav__link--active"]),"aria-current":g?"page":void 0,children:[t&&_(t),e.jsx("span",{className:s.default["tedi-sidenav__title"],children:i})]}),children:I()}):l?e.jsxs(e.Fragment,{children:[e.jsxs(k.Link,{...b,children:[t&&_(t),e.jsx("span",{className:s.default["tedi-sidenav__title"],children:i}),e.jsx("i",{className:s.default["tedi-sidenav__bullet"]})]}),I()]}):e.jsx(h.Tooltip.Trigger,{children:e.jsxs(k.Link,{...b,children:[t&&_(t),e.jsx("span",{className:s.default["tedi-sidenav__title"],children:i})]})})});return d===1&&c?e.jsxs(h.Tooltip,{placement:"right",focusManager:void 0,children:[e.jsx(h.Tooltip.Content,{maxWidth:"medium",children:i}),q]}):q};exports.SideNavItem=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),n=require("../../../../../../../external/classnames/index.cjs.js"),P=require("../../../../base/icon/icon.cjs.js"),R=require("../../../../content/collapse/collapse.cjs.js"),I=require("../../../../navigation/link/link.cjs.js"),s=require("../../sidenav.module.scss.cjs.js"),J=require("../sidenav-dropdown/sidenav-dropdown.cjs.js"),K=require("../../../../../providers/label-provider/use-labels.cjs.js"),Q=require("../../../../../helpers/hooks/use-safe-id.cjs.js"),p=require("../../../../overlays/tooltip/tooltip.cjs.js"),y=D=>{const{icon:a,children:i,isActive:h,onClick:g,subItems:k,subItemGroups:M,as:x,onItemClick:v,className:O,level:d=1,isCollapsed:r=!1,isDefaultOpen:E=!1,sideNavItemSize:A="default",...c}=D,{getLabel:C}=K.useLabels(),[u,B]=b.useState(E??!1),[S,$]=b.useState(!1),T=Q.useSafeId("sidenav-collapse"),m=M??(k?[{subItems:k}]:null),l=!!m,z=d>1&&l,F=n.default(s.default["tedi-sidenav__item"],s.default[`tedi-sidenav__item--${A}`],{[s.default[`tedi-sidenav__item--level-${d}`]]:d>1,[s.default["tedi-sidenav__item--current"]]:h,[s.default["tedi-sidenav__item--has-children"]]:l,[s.default["tedi-sidenav__item--with-tree"]]:z},O),_=t=>{const o={color:"white",className:n.default(s.default["tedi-sidenav__icon"])},f=typeof t=="string"?{...o,name:t}:{...o,...t,className:n.default(o.className,t==null?void 0:t.className)};return e.jsx(P.Icon,{...f})},H=t=>{g==null||g(t),l||v==null||v()},q=t=>{B(t)},G=l&&(c.href||c.to),j={...c,as:x,onClick:H,className:n.default(s.default["tedi-sidenav__link"],G&&s.default["tedi-sidenav__link--has-children-link"]),noStyle:!0,"aria-current":h?"page":void 0,"aria-label":r&&typeof i=="string"?i:void 0},N=()=>!r&&(m==null?void 0:m.map((t,L)=>{var o;return e.jsxs("div",{children:[(t==null?void 0:t.subHeading)&&e.jsx("div",{className:s.default["tedi-sidenav__subheading"],children:t.subHeading}),e.jsx("ul",{className:s.default["tedi-sidenav__list"],children:(o=t.subItems)==null?void 0:o.map((f,W)=>b.createElement(y,{as:x,...f,key:W,level:d+1,onItemClick:v,isCollapsed:r,className:n.default(s.default["tedi-sidenav__sub-item"],f.className)}))})]},L)})),w=e.jsx("li",{"data-name":"sidenav-item",className:F,children:l&&r?e.jsx(J.SideNavDropdown,{trigger:e.jsx(p.Tooltip.Trigger,{children:e.jsxs("span",{className:n.default(s.default["tedi-sidenav__link"],S&&s.default["tedi-sidenav__link--active"]),children:[a&&_(a),e.jsx(P.Icon,{name:S?"chevron_right":"expand_more",color:"white",className:s.default["tedi-sidenav__toggle-icon"],size:18}),e.jsx("span",{className:s.default["tedi-sidenav__title"],children:i})]})}),as:x,groups:m,onOpenChange:$}):l&&d===1?c.href||c.to?e.jsxs(e.Fragment,{children:[e.jsxs(I.Link,{...j,children:[a&&_(a),e.jsx("span",{className:s.default["tedi-sidenav__title"],children:i})]}),e.jsx("div",{className:s.default["tedi-sidenav__link-collapse-wrapper"],children:e.jsx(R.Collapse,{id:T,hideCollapseText:!0,inverted:!0,contentAsRegion:!1,open:u,onToggle:q,toggleLabel:C("sidenav.toggleSubmenuChildren",{isCollapsedInternal:u,children:i}),className:s.default["tedi-sidenav__collapse"],titleRowProps:{element:"span"},children:N()})})]}):e.jsx(R.Collapse,{id:T,hideCollapseText:!0,inverted:!0,fullRowToggle:!0,contentAsRegion:!1,open:u,onToggle:q,className:s.default["tedi-sidenav__collapse"],titleRowProps:{element:"span"},toggleLabel:C("sidenav.toggleSubmenuChildren",{isCollapsedInternal:u,children:i}),title:e.jsxs("span",{className:n.default(s.default["tedi-sidenav__link"],u&&s.default["tedi-sidenav__link--active"]),"aria-current":h?"page":void 0,children:[a&&_(a),e.jsx("span",{className:s.default["tedi-sidenav__title"],children:i})]}),children:N()}):l?e.jsxs(e.Fragment,{children:[e.jsxs(I.Link,{...j,children:[a&&_(a),e.jsx("span",{className:s.default["tedi-sidenav__title"],children:i}),e.jsx("i",{className:s.default["tedi-sidenav__bullet"]})]}),N()]}):e.jsx(p.Tooltip.Trigger,{children:e.jsxs(I.Link,{...j,children:[a&&_(a),e.jsx("span",{className:s.default["tedi-sidenav__title"],children:i})]})})});return d===1&&r?e.jsxs(p.Tooltip,{placement:"right",focusManager:void 0,children:[e.jsx(p.Tooltip.Content,{maxWidth:"medium",children:i}),w]}):w};exports.SideNavItem=y;