@tedi-design-system/react 17.1.0-rc.7 → 17.1.0-rc.8

package/src/tedi/components/form/time-picker/components/time-wheel/time-wheel.es.js

@@ -0,0 +1,184 @@
+import { jsxs as Q, jsx as y } from "react/jsx-runtime";
+import F from "../../../../../../../external/classnames/index.es.js";
+import M, { useRef as l, useLayoutEffect as X, useEffect as j } from "react";
+import { clearScrollTimeout as d, snapToNearestItem as A, needsScrollCorrection as C, scrollToIndex as D, getScrollTopForIndex as P } from "../../../time-field/time-field-helpers.es.js";
+import p from "../../time-picker.module.scss.es.js";
+const Y = ({
+  hours: t,
+  minutes: n,
+  selectedHour: u,
+  selectedMinute: i,
+  onChange: k,
+  className: H,
+  bordered: U = !0
+}) => {
+  const g = M.useId(), a = l(null), s = l(null), m = l(!1), f = l(!1), v = l(), S = l(), w = l(-1), _ = l(-1), [W, E] = M.useState(null), [V, $] = M.useState(null), N = (r, e) => Math.max(0, Math.min(e - 1, r)), R = (r, e, c) => {
+    const h = r.current;
+    if (!h || e < 0) return;
+    const I = P(e);
+    c ? m.current = !0 : f.current = !0, h.scrollTo({ top: I, behavior: "instant" }), requestAnimationFrame(() => {
+      c ? m.current = !1 : f.current = !1;
+    });
+  };
+  X(() => {
+    const r = t.indexOf(u), e = n.indexOf(i);
+    r !== w.current && (w.current = r, R(a, r, !0)), e !== _.current && (_.current = e, R(s, e, !1)), E(r), $(e);
+  }, [t, n, u, i]);
+  const O = l(() => {
+  });
+  O.current = () => {
+    const r = a.current;
+    if (!r || m.current) return;
+    d(v.current);
+    const e = N(A(r.scrollTop, t.length), t.length);
+    E(e);
+    const c = P(e);
+    C(r.scrollTop, c, 8) && (m.current = !0, D(r, e, "instant"), requestAnimationFrame(() => {
+      m.current = !1;
+    })), e !== w.current && (w.current = e, k(t[e], i));
+  };
+  const L = l(() => {
+  });
+  L.current = () => {
+    const r = s.current;
+    if (!r || f.current) return;
+    d(S.current);
+    const e = N(A(r.scrollTop, n.length), n.length);
+    $(e);
+    const c = P(e);
+    C(r.scrollTop, c, 8) && (f.current = !0, D(r, e, "instant"), requestAnimationFrame(() => {
+      f.current = !1;
+    })), e !== _.current && (_.current = e, k(u, n[e]));
+  }, j(() => {
+    const r = a.current, e = s.current;
+    if (!r || !e) return;
+    const c = () => O.current(), h = () => L.current();
+    return r.addEventListener("scrollend", c), e.addEventListener("scrollend", h), () => {
+      r.removeEventListener("scrollend", c), e.removeEventListener("scrollend", h);
+    };
+  }, []);
+  const z = () => {
+    if (!a.current || m.current) return;
+    const r = N(A(a.current.scrollTop, t.length), t.length);
+    E(r), d(v.current), v.current = setTimeout(() => O.current(), 150);
+  }, B = () => {
+    if (!s.current || f.current) return;
+    const r = N(A(s.current.scrollTop, n.length), n.length);
+    $(r), d(S.current), S.current = setTimeout(() => L.current(), 150);
+  }, G = (r) => {
+    const e = t[r];
+    !e || !a.current || (d(v.current), w.current = r, E(r), k(e, i), m.current = !0, D(a.current, r, "smooth"), setTimeout(() => {
+      m.current = !1;
+    }, 300));
+  }, J = (r) => {
+    const e = n[r];
+    !e || !s.current || (d(S.current), _.current = r, $(r), k(u, e), f.current = !0, D(s.current, r, "smooth"), setTimeout(() => {
+      f.current = !1;
+    }, 300));
+  }, K = (r, e, c, h) => (I) => {
+    const o = e.indexOf(c);
+    if (o === -1) return;
+    let x = -1, b = !1;
+    switch (I.key) {
+      case "ArrowDown":
+        x = (o + 1) % e.length, b = o === e.length - 1;
+        break;
+      case "ArrowUp":
+        x = (o - 1 + e.length) % e.length, b = o === 0;
+        break;
+      case "Home":
+        x = 0;
+        break;
+      case "End":
+        x = e.length - 1;
+        break;
+      case "PageDown":
+        x = (o + 5) % e.length, b = o + 5 >= e.length;
+        break;
+      case "PageUp":
+        x = (o - 5 + e.length) % e.length, b = o - 5 < 0;
+        break;
+      case "Enter":
+      case " ":
+        I.preventDefault(), h(e[o]);
+        return;
+      default:
+        return;
+    }
+    I.preventDefault();
+    const q = r === "hour" ? a.current : s.current, T = q == null ? void 0 : q.querySelector(`#${CSS.escape(`${g}-${r}-${x}`)}`);
+    T == null || T.focus(), T == null || T.scrollIntoView({ block: "center", behavior: b ? "auto" : "smooth" });
+  };
+  return j(() => () => {
+    d(v.current), d(S.current);
+  }, []), /* @__PURE__ */ Q(
+    "div",
+    {
+      className: F(
+        p["tedi-time-picker__wheel"],
+        { [p["tedi-time-picker__wheel--borderless"]]: !U },
+        H
+      ),
+      children: [
+        /* @__PURE__ */ y(
+          "div",
+          {
+            ref: a,
+            role: "listbox",
+            "aria-label": "Hours",
+            tabIndex: 0,
+            "aria-activedescendant": `${g}-hour-${t.indexOf(u)}`,
+            className: p["tedi-time-picker__wheel-column"],
+            onScroll: z,
+            onKeyDown: K("hour", t, u, (r) => k(r, i)),
+            children: t.map((r, e) => /* @__PURE__ */ y(
+              "div",
+              {
+                className: F(p["tedi-time-picker__wheel-item"], {
+                  [p["tedi-time-picker__wheel-item--selected"]]: e === (W ?? t.indexOf(u))
+                }),
+                onClick: () => G(e),
+                id: `${g}-hour-${e}`,
+                role: "option",
+                "aria-selected": r === u,
+                children: r
+              },
+              r
+            ))
+          }
+        ),
+        /* @__PURE__ */ y(
+          "div",
+          {
+            ref: s,
+            role: "listbox",
+            className: p["tedi-time-picker__wheel-column"],
+            onScroll: B,
+            "aria-label": "Minutes",
+            tabIndex: 0,
+            "aria-activedescendant": `${g}-minute-${n.indexOf(i)}`,
+            onKeyDown: K("minute", n, i, (r) => k(u, r)),
+            children: n.map((r, e) => /* @__PURE__ */ y(
+              "div",
+              {
+                className: F(p["tedi-time-picker__wheel-item"], {
+                  [p["tedi-time-picker__wheel-item--selected"]]: e === (V ?? n.indexOf(i))
+                }),
+                onClick: () => J(e),
+                id: `${g}-minute-${e}`,
+                role: "option",
+                "aria-selected": r === i,
+                children: r
+              },
+              r
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+Y.displayName = "TimeWheel";
+export {
+  Y as TimeWheel
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react/jsx-runtime"),n=require("react"),t=require("../time-field/time-field-helpers.cjs.js"),H=require("./components/time-grid/time-grid.cjs.js"),x=require("./components/time-wheel/time-wheel.cjs.js"),T=({value:s,defaultValue:f="",onChange:r,stepMinutes:o=1,availableTimes:i,gridVariant:h="button",className:u,bordered:c=!0})=>{const[j,P]=n.useState(f),l=s!==void 0,m=l?s:j,d=e=>{l||P(e),r==null||r(e)},a=n.useMemo(t.generateHours,[]),q=n.useMemo(()=>t.generateMinutes(o),[o]),{hour:y,minute:S}=t.parseTime(m||"12:00"),g=a.includes(y)?y:"12",k=t.findClosestMinute(S,q);return Array.isArray(i)&&i.length>0?M.jsx(H.TimeGrid,{times:i,value:m,variant:h,onSelect:d,className:u,bordered:c}):M.jsx(x.TimeWheel,{hours:a,minutes:q,selectedHour:g,selectedMinute:k,onChange:(e,p)=>d(`${e}:${p}`),className:u,bordered:c})};T.displayName="TimePicker";exports.TimePicker=T;

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

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+export interface TimePickerProps {
+    /**
+     * Currently selected time in "HH:mm" format (24-hour).
+     *
+     * @example "14:30"
+     * @default ""
+     */
+    value?: string;
+    /**
+     * Initial time value for uncontrolled mode. Should be in "HH:mm" format.
+     * @example "09:00"
+     * @default ""
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the user selects a new time.
+     * Returns the selected time in "HH:mm" format.
+     *
+     * @param time - Selected time as "HH:mm" string
+     */
+    onChange?: (time: string) => void;
+    /**
+     * Minute step interval for the minute wheel.
+     * Determines which minute values are shown (e.g. 00, 05, 10, ..., 55).
+     *
+     * @default 1
+     */
+    stepMinutes?: number;
+    /**
+     * When provided, the component switches from wheel mode to grid mode.
+     * Displays a list/grid of predefined time slots instead of scrollable wheels.
+     *
+     * Each string must be in "HH:mm" format.
+     *
+     * @example ["09:00", "09:30", "10:00", "14:00", "15:30"]
+     */
+    availableTimes?: string[];
+    /**
+     * Variant of the grid rendered when `availableTimes` is provided:
+     * - 'buttons' – buttons grid
+     * - 'radio' – radio buttons grid
+     * @default button
+     */
+    gridVariant?: 'button' | 'radio';
+    /**
+     * Additional CSS class name to apply to the root element.
+     * Useful for custom styling and layout overrides.
+     */
+    className?: string;
+    /**
+     * Whether to render the surrounding card (border, background, radius).
+     * Set to `false` when embedding inside a parent that already provides
+     * its own surface — e.g. alongside a calendar inside `DateTimeField`.
+     * The inner gradient masks and column separators are preserved either way.
+     * @default true
+     */
+    bordered?: boolean;
+}
+export declare const TimePicker: React.FC<TimePickerProps>;

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

@@ -0,0 +1,45 @@
+import { jsx as p } from "react/jsx-runtime";
+import S, { useMemo as a } from "react";
+import { generateHours as _, generateMinutes as $, parseTime as g, findClosestMinute as j } from "../time-field/time-field-helpers.es.js";
+import { TimeGrid as x } from "./components/time-grid/time-grid.es.js";
+import { TimeWheel as G } from "./components/time-wheel/time-wheel.es.js";
+const I = ({
+  value: o,
+  defaultValue: h = "",
+  onChange: e,
+  stepMinutes: n = 1,
+  availableTimes: r,
+  gridVariant: y = "button",
+  className: i,
+  bordered: s = !0
+}) => {
+  const [M, T] = S.useState(h), c = o !== void 0, m = c ? o : M, u = (t) => {
+    c || T(t), e == null || e(t);
+  }, f = a(_, []), l = a(() => $(n), [n]), { hour: d, minute: k } = g(m || "12:00"), A = f.includes(d) ? d : "12", H = j(k, l);
+  return Array.isArray(r) && r.length > 0 ? /* @__PURE__ */ p(
+    x,
+    {
+      times: r,
+      value: m,
+      variant: y,
+      onSelect: u,
+      className: i,
+      bordered: s
+    }
+  ) : /* @__PURE__ */ p(
+    G,
+    {
+      hours: f,
+      minutes: l,
+      selectedHour: A,
+      selectedMinute: H,
+      onChange: (t, P) => u(`${t}:${P}`),
+      className: i,
+      bordered: s
+    }
+  );
+};
+I.displayName = "TimePicker";
+export {
+  I as TimePicker
+};

package/src/tedi/components/form/time-picker/time-picker.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-time-picker__wheel":"tedi-time-picker__wheel-3c73e157","tedi-time-picker__wheel--borderless":"tedi-time-picker__wheel--borderless-42e8669c","tedi-time-picker__wheel-column":"tedi-time-picker__wheel-column-02048315","tedi-time-picker__wheel-item":"tedi-time-picker__wheel-item-78600fe1","tedi-time-picker__wheel-item--selected":"tedi-time-picker__wheel-item--selected-cc3c7194","tedi-time-picker__grid":"tedi-time-picker__grid-5cf42402","tedi-time-picker__grid--borderless":"tedi-time-picker__grid--borderless-805d6413","tedi-time-picker__grid-item":"tedi-time-picker__grid-item-53c9d41d","tedi-time-picker__grid-item--selected":"tedi-time-picker__grid-item--selected-32fb5e5d"};exports.default=e;

package/src/tedi/components/form/time-picker/time-picker.module.scss.es.js

@@ -0,0 +1,14 @@
+const e = {
+  "tedi-time-picker__wheel": "tedi-time-picker__wheel-3c73e157",
+  "tedi-time-picker__wheel--borderless": "tedi-time-picker__wheel--borderless-42e8669c",
+  "tedi-time-picker__wheel-column": "tedi-time-picker__wheel-column-02048315",
+  "tedi-time-picker__wheel-item": "tedi-time-picker__wheel-item-78600fe1",
+  "tedi-time-picker__wheel-item--selected": "tedi-time-picker__wheel-item--selected-cc3c7194",
+  "tedi-time-picker__grid": "tedi-time-picker__grid-5cf42402",
+  "tedi-time-picker__grid--borderless": "tedi-time-picker__grid--borderless-805d6413",
+  "tedi-time-picker__grid-item": "tedi-time-picker__grid-item-53c9d41d",
+  "tedi-time-picker__grid-item--selected": "tedi-time-picker__grid-item--selected-32fb5e5d"
+};
+export {
+  e as default
+};

package/src/tedi/components/overlays/dropdown/dropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),H=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),S=require("./dropdown.module.scss.cjs.js"),$=require("./dropdown-content/dropdown-content.cjs.js"),A=require("./dropdown-context.cjs.js"),z=require("./dropdown-helpers.cjs.js"),G=require("./dropdown-item/dropdown-item.cjs.js"),J=require("./dropdown-separator/dropdown-separator.cjs.js"),K=require("./dropdown-trigger/dropdown-trigger.cjs.js"),Q=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),f=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),V=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),X=require("../../../providers/label-provider/use-labels.cjs.js"),Y=4,s=g=>{var x;const{getCurrentBreakpointProps:F}=V.useBreakpointProps(g.defaultServerBreakpoint),{children:I,modal:w=!1,divided:O=!1,width:P="auto",variant:l="default",open:u,defaultOpen:R=!1,onOpenChange:i,placement:p="bottom-start",className:b}=F(g),{getLabel:j}=X.useLabels(),k=e.useFloatingNodeId(),m=t.useRef([]),[a,v]=t.useState(null),[q,y]=t.useState(null),[B,N]=t.useState(R),d=u??B,h=t.useCallback(r=>{u===void 0&&N(r),i==null||i(r)},[u,i]),T=e.useFloating({nodeId:k,open:d,placement:p,onOpenChange:h,middleware:[f.offset(Y),f.flip(),f.shift()],whileElementsMounted:Q.autoUpdate}),{context:o,refs:n,x:U,y:_,strategy:L}=T,D=e.useInteractions([e.useClick(o),e.useRole(o,{role:"menu"}),e.useDismiss(o),e.useListNavigation(o,{listRef:m,activeIndex:a,onNavigate:v,loop:!0})]),M={open:d,setOpen:h,refs:n,listItemsRef:m,activeIndex:a,setActiveIndex:v,placement:p,content:q,setContent:y,divided:O,variant:l,...D},W=(x=n.reference.current)==null?void 0:x.getBoundingClientRect().width,E=t.useMemo(()=>{const r=n.reference.current;if(!r)return;const C=r.offsetParent;if(C)return C.getBoundingClientRect().width},[n.reference.current]);return c.jsxs(A.DropdownContext.Provider,{value:M,children:[I,c.jsx(e.FloatingPortal,{children:d&&c.jsx(e.FloatingFocusManager,{context:o,modal:w,visuallyHiddenDismiss:w?j("close"):!1,children:c.jsx("div",{...D.getFloatingProps({ref:n.setFloating,className:H.default(S.default["tedi-dropdown"],{[S.default[`tedi-dropdown--${l}`]]:l==="tree"},b),style:{position:L,left:U??0,top:_??0,width:z.resolveDropdownWidth(P,W,E)},role:"menu","aria-orientation":"vertical","aria-activedescendant":a!==null?`dropdown-item-${a}`:void 0}),"data-placement":p,"data-state":d?"open":"closed",children:q})})})]})};s.Trigger=K.DropdownTrigger;s.Content=$.DropdownContent;s.Item=G.DropdownItem;s.Separator=J.DropdownSeparator;exports.Dropdown=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),e=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),H=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),O=require("./dropdown.module.scss.cjs.js"),$=require("./dropdown-content/dropdown-content.cjs.js"),z=require("./dropdown-context.cjs.js"),G=require("./dropdown-helpers.cjs.js"),J=require("./dropdown-item/dropdown-item.cjs.js"),K=require("./dropdown-separator/dropdown-separator.cjs.js"),Q=require("./dropdown-trigger/dropdown-trigger.cjs.js"),V=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),m=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),X=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Y=require("../../../providers/label-provider/use-labels.cjs.js"),Z=4,d=w=>{var I;const{getCurrentBreakpointProps:S}=X.useBreakpointProps(w.defaultServerBreakpoint),{children:F,modal:v=!1,divided:P=!1,width:R="auto",variant:u="default",open:p,defaultOpen:b=!1,onOpenChange:a,defaultActiveIndex:o,placement:f="bottom-start",className:j}=S(w),{getLabel:k}=Y.useLabels(),y=e.useFloatingNodeId(),q=t.useRef([]),[l,g]=t.useState(o??null),[h,B]=t.useState(null),[N,T]=t.useState(b),n=p??N;t.useEffect(()=>{n||g(o??null)},[n,o]);const x=t.useCallback(i=>{p===void 0&&T(i),a==null||a(i)},[p,a]),U=e.useFloating({nodeId:y,open:n,placement:f,onOpenChange:x,middleware:[m.offset(Z),m.flip(),m.shift()],whileElementsMounted:V.autoUpdate}),{context:r,refs:s,x:_,y:L,strategy:M}=U,D=e.useInteractions([e.useClick(r),e.useRole(r,{role:"menu"}),e.useDismiss(r),e.useListNavigation(r,{listRef:q,activeIndex:l,onNavigate:g,loop:!0,selectedIndex:o??null,focusItemOnOpen:o!==null?!0:"auto"})]),W={open:n,setOpen:x,refs:s,listItemsRef:q,activeIndex:l,setActiveIndex:g,placement:f,content:h,setContent:B,divided:P,variant:u,...D},E=(I=s.reference.current)==null?void 0:I.getBoundingClientRect().width,A=t.useMemo(()=>{const i=s.reference.current;if(!i)return;const C=i.offsetParent;if(C)return C.getBoundingClientRect().width},[s.reference.current]);return c.jsxs(z.DropdownContext.Provider,{value:W,children:[F,c.jsx(e.FloatingPortal,{children:n&&c.jsx(e.FloatingFocusManager,{context:r,modal:v,visuallyHiddenDismiss:v?k("close"):!1,children:c.jsx("div",{...D.getFloatingProps({ref:s.setFloating,className:H.default(O.default["tedi-dropdown"],{[O.default[`tedi-dropdown--${u}`]]:u==="tree"},j),style:{position:M,left:_??0,top:L??0,width:G.resolveDropdownWidth(R,E,A)},role:"menu","aria-orientation":"vertical","aria-activedescendant":l!==null?`dropdown-item-${l}`:void 0}),"data-placement":f,"data-state":n?"open":"closed",children:h})})})]})};d.Trigger=Q.DropdownTrigger;d.Content=$.DropdownContent;d.Item=J.DropdownItem;d.Separator=K.DropdownSeparator;exports.Dropdown=d;

package/src/tedi/components/overlays/dropdown/dropdown.d.ts

@@ -61,6 +61,15 @@ export interface DropdownProps extends BreakpointSupport<DropdownBreakpointProps
      * Change handler (fires for both modes)
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Index of the item that should be focused when the dropdown opens.
+     *
+     * Pass the index of the "current selection" so the user can arrow-key or
+     * Enter/Space to reconfirm without first pressing an arrow. Omit (or pass
+     * `undefined`) to keep the default behaviour — no item is pre-focused and
+     * the user has to press an arrow key to start navigating.
+     */
+    defaultActiveIndex?: number;
     className?: string;
 }
 export declare const Dropdown: {

package/src/tedi/components/overlays/dropdown/dropdown.es.js

@@ -1,114 +1,124 @@
-import { jsxs as U, jsx as m } from "react/jsx-runtime";
-import { useFloatingNodeId as $, useFloating as A, useInteractions as H, useClick as q, useRole as z, useDismiss as G, useListNavigation as J, FloatingPortal as K, FloatingFocusManager as Q } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import V from "../../../../../external/classnames/index.es.js";
+import { jsxs as U, jsx as f } from "react/jsx-runtime";
+import { useFloatingNodeId as $, useFloating as H, useInteractions as q, useClick as z, useRole as G, useDismiss as J, useListNavigation as K, FloatingPortal as Q, FloatingFocusManager as V } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import X from "../../../../../external/classnames/index.es.js";
 import e from "react";
-import F from "./dropdown.module.scss.es.js";
-import { DropdownContent as X } from "./dropdown-content/dropdown-content.es.js";
-import { DropdownContext as Y } from "./dropdown-context.es.js";
-import { resolveDropdownWidth as Z } from "./dropdown-helpers.es.js";
-import { DropdownItem as ee } from "./dropdown-item/dropdown-item.es.js";
-import { DropdownSeparator as te } from "./dropdown-separator/dropdown-separator.es.js";
-import { DropdownTrigger as oe } from "./dropdown-trigger/dropdown-trigger.es.js";
-import { autoUpdate as ne } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as re, flip as ie, shift as se } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-import { useBreakpointProps as ae } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as le } from "../../../providers/label-provider/use-labels.es.js";
-const de = 4, a = (p) => {
-  var D;
-  const { getCurrentBreakpointProps: I } = ae(p.defaultServerBreakpoint), {
-    children: O,
-    modal: f = !1,
+import x from "./dropdown.module.scss.es.js";
+import { DropdownContent as Y } from "./dropdown-content/dropdown-content.es.js";
+import { DropdownContext as Z } from "./dropdown-context.es.js";
+import { resolveDropdownWidth as ee } from "./dropdown-helpers.es.js";
+import { DropdownItem as te } from "./dropdown-item/dropdown-item.es.js";
+import { DropdownSeparator as oe } from "./dropdown-separator/dropdown-separator.es.js";
+import { DropdownTrigger as ne } from "./dropdown-trigger/dropdown-trigger.es.js";
+import { autoUpdate as re } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as ie, flip as se, shift as ae } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useBreakpointProps as le } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as de } from "../../../providers/label-provider/use-labels.es.js";
+const ce = 4, l = (p) => {
+  var I;
+  const { getCurrentBreakpointProps: C } = le(p.defaultServerBreakpoint), {
+    children: F,
+    modal: g = !1,
     divided: R = !1,
-    width: x = "auto",
-    variant: l = "default",
-    open: d,
-    defaultOpen: N = !1,
-    onOpenChange: r,
-    placement: c = "bottom-start",
-    className: P
-  } = I(p), { getLabel: S } = le(), k = $(), u = e.useRef([]), [i, g] = e.useState(null), [v, y] = e.useState(null), [B, b] = e.useState(N), s = d ?? B, w = e.useCallback(
-    (n) => {
-      d === void 0 && b(n), r == null || r(n);
+    width: N = "auto",
+    variant: d = "default",
+    open: c,
+    defaultOpen: P = !1,
+    onOpenChange: s,
+    defaultActiveIndex: o,
+    placement: u = "bottom-start",
+    className: S
+  } = C(p), { getLabel: k } = de(), y = $(), v = e.useRef([]), [a, m] = e.useState(o ?? null), [w, B] = e.useState(null), [b, W] = e.useState(P), t = c ?? b;
+  e.useEffect(() => {
+    t || m(o ?? null);
+  }, [t, o]);
+  const h = e.useCallback(
+    (i) => {
+      c === void 0 && W(i), s == null || s(i);
     },
-    [d, r]
-  ), W = A({
-    nodeId: k,
-    open: s,
-    placement: c,
-    onOpenChange: w,
-    middleware: [re(de), ie(), se()],
-    whileElementsMounted: ne
-  }), { context: t, refs: o, x: L, y: M, strategy: T } = W, h = H([
-    q(t),
-    z(t, { role: "menu" }),
-    G(t),
-    J(t, {
-      listRef: u,
-      activeIndex: i,
-      onNavigate: g,
-      loop: !0
+    [c, s]
+  ), E = H({
+    nodeId: y,
+    open: t,
+    placement: u,
+    onOpenChange: h,
+    middleware: [ie(ce), se(), ae()],
+    whileElementsMounted: re
+  }), { context: n, refs: r, x: L, y: M, strategy: T } = E, D = q([
+    z(n),
+    G(n, { role: "menu" }),
+    J(n),
+    K(n, {
+      listRef: v,
+      activeIndex: a,
+      onNavigate: m,
+      loop: !0,
+      // When the caller passes `defaultActiveIndex`, treat that item as the
+      // current selection and force focus to land on it when the dropdown
+      // opens — regardless of whether it was opened via click or keyboard.
+      selectedIndex: o ?? null,
+      focusItemOnOpen: o !== null ? !0 : "auto"
     })
   ]), _ = {
-    open: s,
-    setOpen: w,
-    refs: o,
-    listItemsRef: u,
-    activeIndex: i,
-    setActiveIndex: g,
-    placement: c,
-    content: v,
-    setContent: y,
+    open: t,
+    setOpen: h,
+    refs: r,
+    listItemsRef: v,
+    activeIndex: a,
+    setActiveIndex: m,
+    placement: u,
+    content: w,
+    setContent: B,
     divided: R,
-    variant: l,
-    ...h
-  }, j = (D = o.reference.current) == null ? void 0 : D.getBoundingClientRect().width, E = e.useMemo(() => {
-    const n = o.reference.current;
-    if (!n) return;
-    const C = n.offsetParent;
-    if (C)
-      return C.getBoundingClientRect().width;
-  }, [o.reference.current]);
-  return /* @__PURE__ */ U(Y.Provider, { value: _, children: [
-    O,
-    /* @__PURE__ */ m(K, { children: s && /* @__PURE__ */ m(
-      Q,
+    variant: d,
+    ...D
+  }, j = (I = r.reference.current) == null ? void 0 : I.getBoundingClientRect().width, A = e.useMemo(() => {
+    const i = r.reference.current;
+    if (!i) return;
+    const O = i.offsetParent;
+    if (O)
+      return O.getBoundingClientRect().width;
+  }, [r.reference.current]);
+  return /* @__PURE__ */ U(Z.Provider, { value: _, children: [
+    F,
+    /* @__PURE__ */ f(Q, { children: t && /* @__PURE__ */ f(
+      V,
       {
-        context: t,
-        modal: f,
-        visuallyHiddenDismiss: f ? S("close") : !1,
-        children: /* @__PURE__ */ m(
+        context: n,
+        modal: g,
+        visuallyHiddenDismiss: g ? k("close") : !1,
+        children: /* @__PURE__ */ f(
           "div",
           {
-            ...h.getFloatingProps({
-              ref: o.setFloating,
-              className: V(
-                F["tedi-dropdown"],
-                { [F[`tedi-dropdown--${l}`]]: l === "tree" },
-                P
+            ...D.getFloatingProps({
+              ref: r.setFloating,
+              className: X(
+                x["tedi-dropdown"],
+                { [x[`tedi-dropdown--${d}`]]: d === "tree" },
+                S
               ),
               style: {
                 position: T,
                 left: L ?? 0,
                 top: M ?? 0,
-                width: Z(x, j, E)
+                width: ee(N, j, A)
               },
               role: "menu",
               "aria-orientation": "vertical",
-              "aria-activedescendant": i !== null ? `dropdown-item-${i}` : void 0
+              "aria-activedescendant": a !== null ? `dropdown-item-${a}` : void 0
             }),
-            "data-placement": c,
-            "data-state": s ? "open" : "closed",
-            children: v
+            "data-placement": u,
+            "data-state": t ? "open" : "closed",
+            children: w
           }
         )
       }
     ) })
   ] });
 };
-a.Trigger = oe;
-a.Content = X;
-a.Item = ee;
-a.Separator = te;
+l.Trigger = ne;
+l.Content = Y;
+l.Item = te;
+l.Separator = oe;
 export {
-  a as Dropdown
+  l as Dropdown
 };

package/src/tedi/index.d.ts

@@ -40,6 +40,8 @@ export * from './components/form/choice-group';
 export * from './components/form/file-upload/file-upload';
 export * from './components/form/file-dropzone/file-dropzone';
 export * from './components/form/select/select';
+export * from './components/form/time-field/time-field';
+export * from './components/form/time-picker/time-picker';
 export * from './components/form/checkbox/checkbox';
 export * from './components/form/slider/slider';
 export * from './components/form/date-field/date-field';