@tedi-design-system/react 18.0.0-rc.15 → 18.0.0-rc.17

package/src/tedi/components/content/accordion/accordion-item-header/accordion-item-header.es.js

@@ -0,0 +1,127 @@
+import { jsxs as a, Fragment as K, jsx as t } from "react/jsx-runtime";
+import d from "../../../../../../external/classnames/index.es.js";
+import { Icon as M } from "../../../base/icon/icon.es.js";
+import { Text as w } from "../../../base/typography/text/text.es.js";
+import { CollapseButton as Q } from "../../../buttons/collapse-button/collapse-button.es.js";
+import e from "../accordion.module.scss.es.js";
+import { useAccordionItemContext as R } from "../accordion-item/accordion-item-context.es.js";
+import { useLabels as V } from "../../../../providers/label-provider/use-labels.es.js";
+const X = (C) => {
+  const {
+    headerClickable: r = !0,
+    titleLayout: I = "hug",
+    openText: s,
+    closeText: l,
+    showExpandLabel: o = !0,
+    showDefaultExpandAction: m = !0,
+    expandActionPosition: h = "end",
+    expandActionArrowType: N = "default",
+    expandActionSize: T,
+    expandActionInverted: y = !1,
+    expandActionUnderline: E = !1,
+    headerClass: L,
+    title: c,
+    beforeTitle: H,
+    afterTitle: z,
+    startAction: D,
+    endAction: S,
+    startDescription: p,
+    endDescription: j,
+    headingLevel: x
+  } = C, { headerId: _, contentId: u, expanded: n, toggle: f, showIconCard: k, disabled: i } = R("Accordion.Item.Header"), { getLabel: g } = V(), B = s ?? g("open"), O = l ?? g("close"), F = n ? O : B, P = m && h === "start", U = m && h === "end", W = T ?? (o ? "default" : "small"), $ = d(
+    e["tedi-accordion-item-header"],
+    {
+      [e["tedi-accordion-item-header--hoverable"]]: r && !i,
+      [e["tedi-accordion-item-header--expanded"]]: n,
+      [e["tedi-accordion-item-header--with-icon-card"]]: k,
+      [e["tedi-accordion-item-header--disabled"]]: i
+    },
+    L
+  ), q = () => /* @__PURE__ */ t(
+    M,
+    {
+      name: "expand_more",
+      color: "inherit",
+      size: 16,
+      className: d(e["tedi-accordion-item-header__icon"], {
+        [e["tedi-accordion-item-header__icon--expanded"]]: n,
+        [e["tedi-accordion-item-header__icon--no-label"]]: !o
+      })
+    }
+  ), A = () => r ? /* @__PURE__ */ a(
+    "span",
+    {
+      className: d(e["tedi-accordion-item-header__expand-indicator"], {
+        [e["tedi-accordion-item-header__expand-indicator--with-label"]]: o
+      }),
+      children: [
+        /* @__PURE__ */ t(w, { element: "span", modifiers: "normal", children: o ? F : null }),
+        q()
+      ]
+    }
+  ) : /* @__PURE__ */ t(
+    Q,
+    {
+      open: n,
+      onOpenChange: () => f(),
+      openText: s,
+      closeText: l,
+      hideText: !o,
+      arrowType: N,
+      size: W,
+      inverted: y,
+      underline: E,
+      disabled: i,
+      "aria-controls": u,
+      "aria-disabled": i || void 0,
+      tabIndex: i ? -1 : void 0
+    }
+  ), b = /* @__PURE__ */ a(K, { children: [
+    /* @__PURE__ */ a("span", { className: e["tedi-accordion-item-header__start"], children: [
+      D,
+      H,
+      /* @__PURE__ */ a(
+        "span",
+        {
+          className: d(e["tedi-accordion-item-header__title"], {
+            [e["tedi-accordion-item-header__title--grow"]]: I === "fill",
+            [e["tedi-accordion-item-header__title--with-description"]]: p
+          }),
+          children: [
+            /* @__PURE__ */ a("span", { className: e["tedi-accordion-item-header__title-main"], children: [
+              P && A(),
+              c != null && /* @__PURE__ */ t(w, { element: "span", color: "secondary", modifiers: "normal", children: c })
+            ] }),
+            p
+          ]
+        }
+      ),
+      z
+    ] }),
+    j,
+    U && A(),
+    S
+  ] }), v = r ? /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      id: _,
+      className: e["tedi-accordion-item-header__trigger"],
+      onClick: f,
+      disabled: i,
+      "aria-expanded": n,
+      "aria-controls": u,
+      children: b
+    }
+  ) : /* @__PURE__ */ t("div", { id: _, className: e["tedi-accordion-item-header__trigger"], children: b }), G = (() => {
+    if (!x) return v;
+    const J = `h${x}`;
+    return /* @__PURE__ */ t(J, { className: e["tedi-accordion-item-header__heading-wrapper"], children: v });
+  })();
+  return /* @__PURE__ */ t("div", { "data-name": "accordion-item-header", className: $, children: G });
+};
+X.displayName = "AccordionItemHeader";
+export {
+  X as AccordionItemHeader,
+  X as default
+};

package/src/tedi/components/content/accordion/accordion.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),C=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),M=require("./accordion.module.scss.cjs.js"),R=require("./accordion-context.cjs.js"),b=require("./accordion-item/accordion-item.cjs.js"),j=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),f=c=>{const{getCurrentBreakpointProps:p}=j.useBreakpointProps(c.defaultServerBreakpoint),{children:x,className:v,allowMultiple:t=!1,defaultExpanded:i=!1,itemGap:a,...q}=p(c),g=a!==void 0?{"--tedi-accordion-item-gap":`${a}rem`}:void 0,r=e.useRef(new Map),s=e.useRef(t);s.current=t;const d=e.useCallback((o,n)=>(r.current.set(o,n),()=>{r.current.delete(o)}),[]),u=e.useCallback(o=>{s.current||r.current.forEach((n,A)=>{A!==o&&n(!1)})},[]),k=e.useMemo(()=>({allowMultiple:t,defaultExpanded:i,notifyExpanded:u,register:d}),[t,i,u,d]);return l.jsx(R.AccordionContext.Provider,{value:k,children:l.jsx("div",{"data-name":"accordion","data-testid":"tedi-accordion",...q,className:C.default(M.default["tedi-accordion"],v),style:g,children:x})})};f.displayName="Accordion";const m=Object.assign(f,{Item:b.AccordionItem});exports.Accordion=m;exports.default=m;

package/src/tedi/components/content/accordion/accordion.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+type AccordionBreakpointProps = {
+    /**
+     * Additional class.
+     */
+    className?: string;
+    /**
+     * Whether the accordion allows multiple items to be expanded at the same time.
+     * If false, opening one item will collapse the others automatically.
+     * @default false
+     */
+    allowMultiple?: boolean;
+    /**
+     * Group-level default for items' initial expanded state. Sets the initial
+     * `defaultExpanded` for every child `Accordion.Item` that doesn't specify
+     * its own. Per-item `defaultExpanded` (including an explicit `false`)
+     * takes precedence.
+     *
+     * Typically combined with `allowMultiple` to start with all items open.
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Vertical gap between sibling `Accordion.Item` components in rem
+     * Accepts any number, not limited to a fixed scale.
+     *
+     * Forwarded as the `--tedi-accordion-item-gap` CSS variable, so consumers
+     * can also override it from any ancestor class — or set a px value there
+     * directly when an exact-pixel override is needed.
+     *
+     * When omitted, falls back to the design-token default
+     * (`var(--layout-grid-gutters-08)` = 0.5rem).
+     */
+    itemGap?: number;
+};
+export interface AccordionProps extends BreakpointSupport<AccordionBreakpointProps> {
+    /**
+     * Accordion content. Should be one or more `AccordionItem` components.
+     */
+    children?: React.ReactNode;
+}
+export declare const Accordion: {
+    (props: AccordionProps): JSX.Element;
+    displayName: string;
+} & {
+    Item: {
+        (props: import('./accordion-item/accordion-item').AccordionItemProps): JSX.Element;
+        displayName: string;
+    } & {
+        Header: {
+            (props: import('.').AccordionItemHeaderProps): JSX.Element;
+            displayName: string;
+        };
+        Content: {
+            (props: import('.').AccordionItemContentProps): JSX.Element;
+            displayName: string;
+        };
+    };
+};
+export default Accordion;

package/src/tedi/components/content/accordion/accordion.es.js

@@ -0,0 +1,52 @@
+import { jsx as m } from "react/jsx-runtime";
+import C from "../../../../../external/classnames/index.es.js";
+import e from "react";
+import R from "./accordion.module.scss.es.js";
+import { AccordionContext as g } from "./accordion-context.es.js";
+import { AccordionItem as M } from "./accordion-item/accordion-item.es.js";
+import { useBreakpointProps as N } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const u = (a) => {
+  const { getCurrentBreakpointProps: f } = N(a.defaultServerBreakpoint), {
+    children: p,
+    className: v,
+    allowMultiple: t = !1,
+    defaultExpanded: c = !1,
+    itemGap: i,
+    ...x
+  } = f(a), k = i !== void 0 ? { "--tedi-accordion-item-gap": `${i}rem` } : void 0, r = e.useRef(/* @__PURE__ */ new Map()), s = e.useRef(t);
+  s.current = t;
+  const l = e.useCallback((o, n) => (r.current.set(o, n), () => {
+    r.current.delete(o);
+  }), []), d = e.useCallback((o) => {
+    s.current || r.current.forEach((n, A) => {
+      A !== o && n(!1);
+    });
+  }, []), y = e.useMemo(
+    () => ({
+      allowMultiple: t,
+      defaultExpanded: c,
+      notifyExpanded: d,
+      register: l
+    }),
+    [t, c, d, l]
+  );
+  return /* @__PURE__ */ m(g.Provider, { value: y, children: /* @__PURE__ */ m(
+    "div",
+    {
+      "data-name": "accordion",
+      "data-testid": "tedi-accordion",
+      ...x,
+      className: C(R["tedi-accordion"], v),
+      style: k,
+      children: p
+    }
+  ) });
+};
+u.displayName = "Accordion";
+const I = Object.assign(u, {
+  Item: M
+});
+export {
+  I as Accordion,
+  I as default
+};

package/src/tedi/components/content/accordion/accordion.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-accordion":"tedi-accordion-3008127b","tedi-accordion__item":"tedi-accordion__item-c42537a8","tedi-accordion__item--selected":"tedi-accordion__item--selected-39cde887","tedi-accordion-item-header":"tedi-accordion-item-header-4a087734","tedi-accordion__item--expanded":"tedi-accordion__item--expanded-ce6f4283","tedi-accordion-item-content":"tedi-accordion-item-content-64aa3ef4","tedi-accordion__icon-card":"tedi-accordion__icon-card-9281697b","tedi-accordion-item-header--with-icon-card":"tedi-accordion-item-header--with-icon-card-7faff869","tedi-accordion-item-content--with-icon-card":"tedi-accordion-item-content--with-icon-card-1d759b0e","tedi-accordion-item-header--expanded":"tedi-accordion-item-header--expanded-449f0882","tedi-accordion__item--disabled":"tedi-accordion__item--disabled-49d29cad","tedi-accordion-item-header--hoverable":"tedi-accordion-item-header--hoverable-5a372e7b","tedi-accordion-item-header__trigger":"tedi-accordion-item-header__trigger-6164d1c8","tedi-accordion-item-header--disabled":"tedi-accordion-item-header--disabled-5532ac3a","tedi-accordion-item-header__heading-wrapper":"tedi-accordion-item-header__heading-wrapper-d419d1f0","tedi-accordion-item-header__start":"tedi-accordion-item-header__start-5c55e3cc","tedi-accordion-item-header__title":"tedi-accordion-item-header__title-678c469e","tedi-accordion-item-header__title-main":"tedi-accordion-item-header__title-main-2222462a","tedi-accordion-item-header__title--with-description":"tedi-accordion-item-header__title--with-description-3f5a3f28","tedi-accordion-item-header__title--grow":"tedi-accordion-item-header__title--grow-30e8c5c7","tedi-accordion-item-header__expand-indicator":"tedi-accordion-item-header__expand-indicator-b9c89257","tedi-accordion-item-header__icon":"tedi-accordion-item-header__icon-4ca47f34","tedi-accordion-item-header__expand-indicator--with-label":"tedi-accordion-item-header__expand-indicator--with-label-c274165b","tedi-accordion-item-header__icon--expanded":"tedi-accordion-item-header__icon--expanded-6e63d6cf","tedi-accordion-item-header__icon--no-label":"tedi-accordion-item-header__icon--no-label-95a984be","tedi-accordion-item-content__inner":"tedi-accordion-item-content__inner-cbfa362f","tedi-accordion__item--with-icon-card":"tedi-accordion__item--with-icon-card-9af46a70"};exports.default=e;

package/src/tedi/components/content/accordion/accordion.module.scss.es.js

@@ -0,0 +1,32 @@
+const e = {
+  "tedi-accordion": "tedi-accordion-3008127b",
+  "tedi-accordion__item": "tedi-accordion__item-c42537a8",
+  "tedi-accordion__item--selected": "tedi-accordion__item--selected-39cde887",
+  "tedi-accordion-item-header": "tedi-accordion-item-header-4a087734",
+  "tedi-accordion__item--expanded": "tedi-accordion__item--expanded-ce6f4283",
+  "tedi-accordion-item-content": "tedi-accordion-item-content-64aa3ef4",
+  "tedi-accordion__icon-card": "tedi-accordion__icon-card-9281697b",
+  "tedi-accordion-item-header--with-icon-card": "tedi-accordion-item-header--with-icon-card-7faff869",
+  "tedi-accordion-item-content--with-icon-card": "tedi-accordion-item-content--with-icon-card-1d759b0e",
+  "tedi-accordion-item-header--expanded": "tedi-accordion-item-header--expanded-449f0882",
+  "tedi-accordion__item--disabled": "tedi-accordion__item--disabled-49d29cad",
+  "tedi-accordion-item-header--hoverable": "tedi-accordion-item-header--hoverable-5a372e7b",
+  "tedi-accordion-item-header__trigger": "tedi-accordion-item-header__trigger-6164d1c8",
+  "tedi-accordion-item-header--disabled": "tedi-accordion-item-header--disabled-5532ac3a",
+  "tedi-accordion-item-header__heading-wrapper": "tedi-accordion-item-header__heading-wrapper-d419d1f0",
+  "tedi-accordion-item-header__start": "tedi-accordion-item-header__start-5c55e3cc",
+  "tedi-accordion-item-header__title": "tedi-accordion-item-header__title-678c469e",
+  "tedi-accordion-item-header__title-main": "tedi-accordion-item-header__title-main-2222462a",
+  "tedi-accordion-item-header__title--with-description": "tedi-accordion-item-header__title--with-description-3f5a3f28",
+  "tedi-accordion-item-header__title--grow": "tedi-accordion-item-header__title--grow-30e8c5c7",
+  "tedi-accordion-item-header__expand-indicator": "tedi-accordion-item-header__expand-indicator-b9c89257",
+  "tedi-accordion-item-header__icon": "tedi-accordion-item-header__icon-4ca47f34",
+  "tedi-accordion-item-header__expand-indicator--with-label": "tedi-accordion-item-header__expand-indicator--with-label-c274165b",
+  "tedi-accordion-item-header__icon--expanded": "tedi-accordion-item-header__icon--expanded-6e63d6cf",
+  "tedi-accordion-item-header__icon--no-label": "tedi-accordion-item-header__icon--no-label-95a984be",
+  "tedi-accordion-item-content__inner": "tedi-accordion-item-content__inner-cbfa362f",
+  "tedi-accordion__item--with-icon-card": "tedi-accordion__item--with-icon-card-9af46a70"
+};
+export {
+  e as default
+};

package/src/tedi/components/content/accordion/index.d.ts

@@ -0,0 +1,6 @@
+export * from './accordion';
+export * from './accordion-context';
+export * from './accordion-item/accordion-item';
+export * from './accordion-item/accordion-item-context';
+export * from './accordion-item-header/accordion-item-header';
+export * from './accordion-item-content/accordion-item-content';

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=40,u=6,d=()=>Array.from({length:24},(e,t)=>t.toString().padStart(2,"0")),m=e=>{const t=Math.max(1,e??1),r=[];for(let n=0;n<60;n+=t)r.push(n.toString().padStart(2,"0"));return r},T=(e,t)=>{if(!t.length)return"00";const r=Number(e);return isNaN(r)?t[0]:t.reduce((n,s)=>{const o=Math.abs(Number(s)-r),i=Math.abs(Number(n)-r);return o<i||o===i&&Number(s)>Number(n)?s:n},t[0])},p=e=>{if(!e.includes(":"))return{hour:"00",minute:"00"};const[t,r]=e.split(":");return{hour:t.padStart(2,"0"),minute:r.padStart(2,"0")}},f=(e,t)=>{const r=Math.round(e/c);return Math.max(0,Math.min(r,t-1))},l=e=>e*c,S=(e,t,r=1)=>Math.abs(e-t)>r,g=(e,t,r="auto")=>{e.scrollTo({top:l(t),behavior:r})},h=e=>{e&&clearTimeout(e)},a=e=>e?/^([01][0-9]|2[0-3]):[0-5][0-9]$/.test(e.trim()):!1,I=e=>{const t=e.trim();if(!t)return"";if(a(t))return t;const r=t.replace(/[^0-9]/g,"");if(r.length===3){const n=r.slice(0,1).padStart(2,"0"),s=r.slice(1),o=`${n}:${s}`;return a(o)?o:null}if(r.length===4){const n=r.slice(0,2),s=r.slice(2),o=`${n}:${s}`;return a(o)?o:null}if(t.includes(":")){const[n,s]=t.split(":"),o=parseInt(n,10),i=parseInt(s,10);if(!isNaN(o)&&!isNaN(i)&&o>=0&&o<=23&&i>=0&&i<=59)return`${o.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`}return null};exports.ITEM_HEIGHT=c;exports.TIMEPICKER_OFFSET=u;exports.clearScrollTimeout=h;exports.findClosestMinute=T;exports.generateHours=d;exports.generateMinutes=m;exports.getScrollTopForIndex=l;exports.isValidTime=a;exports.needsScrollCorrection=S;exports.normalizeTime=I;exports.parseTime=p;exports.scrollToIndex=g;exports.snapToNearestItem=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=40,u=2,d=()=>Array.from({length:24},(e,t)=>t.toString().padStart(2,"0")),m=e=>{const t=Math.max(1,e??1),r=[];for(let n=0;n<60;n+=t)r.push(n.toString().padStart(2,"0"));return r},T=(e,t)=>{if(!t.length)return"00";const r=Number(e);return isNaN(r)?t[0]:t.reduce((n,s)=>{const o=Math.abs(Number(s)-r),i=Math.abs(Number(n)-r);return o<i||o===i&&Number(s)>Number(n)?s:n},t[0])},p=e=>{if(!e.includes(":"))return{hour:"00",minute:"00"};const[t,r]=e.split(":");return{hour:t.padStart(2,"0"),minute:r.padStart(2,"0")}},f=(e,t)=>{const r=Math.round(e/c);return Math.max(0,Math.min(r,t-1))},l=e=>e*c,S=(e,t,r=1)=>Math.abs(e-t)>r,g=(e,t,r="auto")=>{e.scrollTo({top:l(t),behavior:r})},h=e=>{e&&clearTimeout(e)},a=e=>e?/^([01][0-9]|2[0-3]):[0-5][0-9]$/.test(e.trim()):!1,I=e=>{const t=e.trim();if(!t)return"";if(a(t))return t;const r=t.replace(/[^0-9]/g,"");if(r.length===3){const n=r.slice(0,1).padStart(2,"0"),s=r.slice(1),o=`${n}:${s}`;return a(o)?o:null}if(r.length===4){const n=r.slice(0,2),s=r.slice(2),o=`${n}:${s}`;return a(o)?o:null}if(t.includes(":")){const[n,s]=t.split(":"),o=parseInt(n,10),i=parseInt(s,10);if(!isNaN(o)&&!isNaN(i)&&o>=0&&o<=23&&i>=0&&i<=59)return`${o.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`}return null};exports.ITEM_HEIGHT=c;exports.TIMEPICKER_OFFSET=u;exports.clearScrollTimeout=h;exports.findClosestMinute=T;exports.generateHours=d;exports.generateMinutes=m;exports.getScrollTopForIndex=l;exports.isValidTime=a;exports.needsScrollCorrection=S;exports.normalizeTime=I;exports.parseTime=p;exports.scrollToIndex=g;exports.snapToNearestItem=f;

package/src/tedi/components/form/time-field/time-field-helpers.d.ts

@@ -1,5 +1,5 @@
 export declare const ITEM_HEIGHT = 40;
-export declare const TIMEPICKER_OFFSET = 6;
+export declare const TIMEPICKER_OFFSET = 2;
 /**
  * Generates an array of hours (00–23)
  */

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

@@ -1,4 +1,4 @@
-const u = 40, l = 6, d = () => Array.from({ length: 24 }, (n, t) => t.toString().padStart(2, "0")), m = (n) => {
+const u = 40, l = 2, d = () => Array.from({ length: 24 }, (n, t) => t.toString().padStart(2, "0")), m = (n) => {
   const t = Math.max(1, n ?? 1), r = [];
   for (let e = 0; e < 60; e += t)
     r.push(e.toString().padStart(2, "0"));

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

package/src/tedi/components/form/time-field/time-field.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
-import { BreakpointSupport } from '../../../helpers';
+import { Breakpoint, BreakpointSupport } from '../../../helpers';
+import { ModalContentProps } from '../../overlays/modal/modal-content/modal-content';
 import { TextFieldProps } from '../textfield/textfield';
+export type TimeFieldModal = boolean | Exclude<Breakpoint, 'xs'>;
 type TimeFieldBreakpointProps = {
     /**
      * If `true`, the field swaps the custom time-picker popover for the
@@ -91,6 +93,26 @@ export interface TimeFieldProps extends BreakpointSupport<TimeFieldBreakpointPro
      * Array of available times to show in the picker or dropdown.
      */
     availableTimes?: string[];
+    /**
+     * Open the picker inside a modal instead of a floating popover. Useful on
+     * narrow viewports where a popover overlaps the input itself.
+     *
+     * - `true` always opens in a modal
+     * - `false` (default) always uses the popover
+     * - A breakpoint name (e.g. `'md'`) opens in a modal *below* that breakpoint
+     *   and falls back to the popover from that breakpoint up
+     *
+     * Ignored when `useNativePicker` resolves to `true`.
+     * @default false
+     */
+    modal?: TimeFieldModal;
+    /**
+     * Extra props forwarded to the picker modal's `Modal.Content` — e.g. `size`, `width`, `maxWidth`,
+     * `position`, `fullscreen`, and per-breakpoint overrides. Lets the consumer tune the modal beyond
+     * its `size="small"` / `width="xs"` (capped to 312px) defaults. `className` is merged with the component's own (so
+     * the internal padding reset is preserved). Only applies when the picker opens as a modal.
+     */
+    modalProps?: Omit<ModalContentProps, 'children'>;
 }
 export declare const TimeField: React.FC<TimeFieldProps>;
 export {};