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

package/src/tedi/components/navigation/tabs/tabs.es.js

@@ -1,24 +1,25 @@
 import { jsx as s } from "react/jsx-runtime";
-import u from "../../../../../external/classnames/index.es.js";
-import m from "react";
+import T from "../../../../../external/classnames/index.es.js";
+import l from "react";
 import d from "./tabs.module.scss.es.js";
 import { TabsContent as p } from "./tabs-content/tabs-content.es.js";
 import { TabsContext as v } from "./tabs-context.es.js";
 import { TabsList as C } from "./tabs-list/tabs-list.es.js";
 import { TabsTrigger as N } from "./tabs-trigger/tabs-trigger.es.js";
-const r = (l) => {
-  const { children: n, value: e, defaultValue: i, onChange: t, className: c } = l, [b, T] = m.useState(i || ""), a = e ?? b, f = m.useCallback(
+const r = (m) => {
+  const { children: n, value: a, defaultValue: i, onChange: t, className: c } = m, [b, f] = l.useState(i || ""), e = a ?? b, u = l.useCallback(
     (o) => {
-      o !== a && (e === void 0 && T(o), t == null || t(o));
+      o !== e && (a === void 0 && f(o), t == null || t(o));
     },
-    [e, a, t]
+    [a, e, t]
   );
-  return /* @__PURE__ */ s(v.Provider, { value: { currentTab: a, setCurrentTab: f }, children: /* @__PURE__ */ s("div", { "data-name": "tabs", className: u(d["tedi-tabs"], c), children: n }) });
+  return /* @__PURE__ */ s(v.Provider, { value: { currentTab: e, setCurrentTab: u }, children: /* @__PURE__ */ s("div", { "data-name": "tabs", className: T(d["tedi-tabs"], c), children: n }) });
 };
 r.displayName = "Tabs";
 r.List = C;
 r.Trigger = N;
 r.Content = p;
 export {
-  r as Tabs
+  r as Tabs,
+  r as default
 };

package/src/tedi/components/notifications/alert/alert.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),M=require("../../base/icon/icon.cjs.js"),N=require("../../base/typography/heading/heading.cjs.js"),P=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("./alert.module.scss.cjs.js"),k=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),z=require("../../../helpers/hooks/use-is-mounted.cjs.js"),y=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),$=require("../../layout/grid/row.cjs.js"),f=require("../../layout/grid/col.cjs.js"),p=l=>{const{getCurrentBreakpointProps:g}=k.useBreakpointProps(l.defaultServerBreakpoint),{children:s,role:i="alert",title:r,className:m,type:n="info",icon:o,onClose:c,isGlobal:h=!1,noSideBorders:j=!1,titleElement:q="h3",size:x="default",...v}=g(l),_=w.default(t.default["tedi-alert"],t.default[`tedi-alert--${n}`],t.default[`tedi-alert--size-${x}`],{[t.default["tedi-alert--global"]]:h,[t.default["tedi-alert--no-side-borders"]]:j},m),b=z.useIsMounted(),B=a=>{const u={size:18},S=typeof a=="string"?{...u,name:a}:{...u,...a};return e.jsx(M.Icon,{...S,className:t.default["tedi-alert__icon"]})},I=i==="alert"?"assertive":i==="status"?"polite":"off",d=C.useId();return b?e.jsx("div",{role:i,"data-name":"alert","aria-label":`${n} alert`,"aria-live":I,"aria-labelledby":r?d:void 0,...v,className:_,children:e.jsxs(y.VerticalSpacing,{size:.25,children:[e.jsxs($.Row,{gutterX:2,alignItems:r?"center":"start",children:[e.jsxs(f.Col,{grow:1,className:t.default["tedi-alert__content"],children:[o&&B(o),e.jsx("div",{className:"tedi-alert__content-wrapper",children:r?e.jsx(N.Heading,{element:q,id:d,modifiers:["h5"],children:r}):s})]}),c&&e.jsx(f.Col,{width:"auto",children:e.jsx(P.ClosingButton,{onClick:c,iconSize:18})})]}),r&&s&&e.jsx("div",{className:"tedi-alert__content-wrapper",children:s})]})}):null};exports.Alert=p;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),M=require("../../base/icon/icon.cjs.js"),N=require("../../base/typography/heading/heading.cjs.js"),P=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("./alert.module.scss.cjs.js"),k=require("../../../helpers/hooks/use-is-mounted.cjs.js"),z=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),y=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),$=require("../../layout/grid/row.cjs.js"),f=require("../../layout/grid/col.cjs.js"),p=l=>{const{getCurrentBreakpointProps:g}=z.useBreakpointProps(l.defaultServerBreakpoint),{children:s,role:i="alert",title:r,className:m,type:n="info",icon:o,onClose:c,isGlobal:h=!1,noSideBorders:j=!1,titleElement:q="h3",size:x="default",...v}=g(l),_=w.default(t.default["tedi-alert"],t.default[`tedi-alert--${n}`],t.default[`tedi-alert--size-${x}`],{[t.default["tedi-alert--global"]]:h,[t.default["tedi-alert--no-side-borders"]]:j},m),b=k.useIsMounted(),B=a=>{const u={size:18},S=typeof a=="string"?{...u,name:a}:{...u,...a};return e.jsx(M.Icon,{...S,className:t.default["tedi-alert__icon"]})},I=i==="alert"?"assertive":i==="status"?"polite":"off",d=C.useId();return b?e.jsx("div",{role:i,"data-name":"alert","aria-label":`${n} alert`,"aria-live":I,"aria-labelledby":r?d:void 0,...v,className:_,children:e.jsxs(y.VerticalSpacing,{size:.25,children:[e.jsxs($.Row,{gutterX:2,alignItems:r?"center":"start",children:[e.jsxs(f.Col,{grow:1,className:t.default["tedi-alert__content"],children:[o&&B(o),e.jsx("div",{className:"tedi-alert__content-wrapper",children:r?e.jsx(N.Heading,{element:q,id:d,modifiers:["h5"],children:r}):s})]}),c&&e.jsx(f.Col,{width:"auto",children:e.jsx(P.ClosingButton,{onClick:c,iconSize:18})})]}),r&&s&&e.jsx("div",{className:"tedi-alert__content-wrapper",children:s})]})}):null};exports.Alert=p;exports.default=p;

package/src/tedi/components/notifications/alert/alert.es.js

@@ -5,13 +5,13 @@ import { Icon as P } from "../../base/icon/icon.es.js";
 import { Heading as S } from "../../base/typography/heading/heading.es.js";
 import { ClosingButton as x } from "../../buttons/closing-button/closing-button.es.js";
 import t from "./alert.module.scss.es.js";
-import { useBreakpointProps as M } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useIsMounted as $ } from "../../../helpers/hooks/use-is-mounted.es.js";
+import { useIsMounted as M } from "../../../helpers/hooks/use-is-mounted.es.js";
+import { useBreakpointProps as $ } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 import { VerticalSpacing as j } from "../../layout/vertical-spacing/vertical-spacing.es.js";
 import { Row as E } from "../../layout/grid/row.es.js";
 import { Col as f } from "../../layout/grid/col.es.js";
 const O = (s) => {
-  const { getCurrentBreakpointProps: u } = M(s.defaultServerBreakpoint), {
+  const { getCurrentBreakpointProps: u } = $(s.defaultServerBreakpoint), {
     children: o,
     role: i = "alert",
     title: r,
@@ -33,7 +33,7 @@ const O = (s) => {
       [t["tedi-alert--no-side-borders"]]: _
     },
     h
-  ), B = $(), w = (a) => {
+  ), B = M(), w = (a) => {
     const p = { size: 18 }, C = typeof a == "string" ? { ...p, name: a } : { ...p, ...a };
     return /* @__PURE__ */ e(P, { ...C, className: t["tedi-alert__icon"] });
   }, z = i === "alert" ? "assertive" : i === "status" ? "polite" : "off", m = y.useId();

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("../../../helpers/hooks/use-breakpoint-props.cjs.js"),V=require("../../../providers/label-provider/use-labels.cjs.js"),X=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"),Y=4,s=g=>{var x;const{getCurrentBreakpointProps:F}=Q.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}=V.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:X.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 { useBreakpointProps as ne } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as re } from "../../../providers/label-provider/use-labels.es.js";
-import { autoUpdate as ie } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as se, flip as ae, shift as le } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-const de = 4, a = (p) => {
-  var D;
-  const { getCurrentBreakpointProps: I } = ne(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 } = re(), 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: [se(de), ae(), le()],
-    whileElementsMounted: ie
-  }), { 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/components/overlays/overlay/overlay.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const V=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),z=require("./overlay-content.cjs.js"),B=require("./overlay-trigger.cjs.js"),J=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),K=require("../../../helpers/hooks/use-is-mounted.cjs.js"),N=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),a=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Q=3,j=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),i=S=>{const E=J.useIsTouchDevice(),{children:L,placement:W="top",openWith:s=E?"click":"hover",defaultOpen:A=!1,open:c,onToggle:r,role:u="tooltip",arrowDimensions:e,offset:G=Q+((e==null?void 0:e.height)??0),focusManager:d,dismissible:v,scrollLock:y}=S,{order:O=["reference","content"],initialFocus:M,modal:f,...x}=d??{},C=M!==void 0?M:f?0:void 0,[m,F]=n.useState(A),g=n.useRef(null),R=K.useIsMounted(),p=n.useMemo(()=>r&&typeof c<"u"?c:m,[r,c,m]),h=n.useCallback(U=>{typeof c>"u"&&F(U),r==null||r(U)},[c,F,r]),{x:q,y:I,refs:l,strategy:P,context:o,middlewareData:b,placement:w}=t.useFloating({placement:W,open:p,onOpenChange:h,middleware:[a.offset(G),a.flip(),a.shift({padding:8}),a.arrow({element:g,padding:4})],whileElementsMounted:N.autoUpdate}),{getReferenceProps:k,getFloatingProps:T}=t.useInteractions([t.useHover(o,{enabled:s==="hover",handleClose:t.safePolygon()}),t.useClick(o,{toggle:v}),t.useFocus(o,{enabled:s==="hover"}),t.useRole(o,{role:u}),t.useDismiss(o,{enabled:v,outsidePressEvent:s==="click"?"mousedown":"pointerdown"})]),_=n.useId(),H=n.useMemo(()=>({open:p,onOpenChange:h,isMounted:R,openWith:s,focusManager:d?{order:O,modal:f,initialFocus:C,...x}:void 0,reference:l.setReference,floating:l.setFloating,arrowRef:g,x:q,y:I,strategy:P,getReferenceProps:k,getFloatingProps:T,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...b.arrow},context:o,placement:w,scrollLock:y,role:u,contentId:_}),[p,h,R,s,d,l.setReference,l.setFloating,g,q,I,P,k,T,e==null?void 0:e.width,e==null?void 0:e.height,b.arrow,o,w,y,u,_,f,O,C,x]);return V.jsx(j.Provider,{value:H,children:L})};i.Trigger=B.OverlayTrigger;i.Content=z.OverlayContent;exports.Overlay=i;exports.OverlayContext=j;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const K=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),N=require("./overlay-content.cjs.js"),Q=require("./overlay-trigger.cjs.js"),j=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),i=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),X=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),Y=require("../../../helpers/hooks/use-is-mounted.cjs.js"),Z=3,S=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),u=E=>{const L=X.useIsTouchDevice(),{children:W,placement:A="top",openWith:s=L?"click":"hover",defaultOpen:G=!1,open:c,onToggle:r,role:d="tooltip",arrowDimensions:e,offset:H=Z+((e==null?void 0:e.height)??0),focusManager:f,dismissible:y,scrollLock:O,trackReferencePosition:V=!1}=E,{order:M=["reference","content"],initialFocus:m,modal:g,...x}=f??{},C=m!==void 0?m:g?0:void 0,[F,R]=n.useState(G),p=n.useRef(null),P=Y.useIsMounted(),h=n.useMemo(()=>r&&typeof c<"u"?c:F,[r,c,F]),v=n.useCallback(l=>{typeof c>"u"&&R(l),r==null||r(l)},[c,R,r]),{x:q,y:I,refs:a,strategy:b,context:o,middlewareData:k,placement:w}=t.useFloating({placement:A,open:h,onOpenChange:v,middleware:[i.offset(H),i.flip(),i.shift({padding:8}),i.arrow({element:p,padding:4})],whileElementsMounted:V?(l,B,J)=>j.autoUpdate(l,B,J,{animationFrame:!0}):j.autoUpdate}),{getReferenceProps:T,getFloatingProps:U}=t.useInteractions([t.useHover(o,{enabled:s==="hover",handleClose:t.safePolygon()}),t.useClick(o,{toggle:y}),t.useFocus(o,{enabled:s==="hover"}),t.useRole(o,{role:d}),t.useDismiss(o,{enabled:y,outsidePressEvent:s==="click"?"mousedown":"pointerdown"})]),_=n.useId(),z=n.useMemo(()=>({open:h,onOpenChange:v,isMounted:P,openWith:s,focusManager:f?{order:M,modal:g,initialFocus:C,...x}:void 0,reference:a.setReference,floating:a.setFloating,arrowRef:p,x:q,y:I,strategy:b,getReferenceProps:T,getFloatingProps:U,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...k.arrow},context:o,placement:w,scrollLock:O,role:d,contentId:_}),[h,v,P,s,f,a.setReference,a.setFloating,p,q,I,b,T,U,e==null?void 0:e.width,e==null?void 0:e.height,k.arrow,o,w,O,d,_,g,M,C,x]);return K.jsx(S.Provider,{value:z,children:W})};u.Trigger=Q.OverlayTrigger;u.Content=N.OverlayContent;exports.Overlay=u;exports.OverlayContext=S;exports.default=u;

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

@@ -63,6 +63,18 @@ export interface OverlayProps {
      * @default GAP + arrow height
      */
     offset?: OffsetOptions;
+    /**
+     * Re-measure the floating element every animation frame while mounted.
+     *
+     * Enable this when the trigger/reference element's position can change without a
+     * DOM-observable event (e.g. position driven by an inherited CSS custom property on an
+     * ancestor). The default `autoUpdate` only reacts to scroll, resize, and element-size
+     * changes, so position-only movement goes unnoticed and the overlay lags behind.
+     *
+     * Opt-in because animation-frame tracking is more expensive than the default.
+     * @default false
+     */
+    trackReferencePosition?: boolean;
 }
 export interface OverlayContextType {
     open: boolean;

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

@@ -1,13 +1,13 @@
-import { jsx as U } from "react/jsx-runtime";
-import { useFloating as V, useInteractions as q, useHover as z, safePolygon as B, useClick as J, useFocus as K, useRole as N, useDismiss as Q } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import { useState as X, useRef as Y, useMemo as T, useCallback as Z, useId as _, createContext as $ } from "react";
-import { OverlayContent as D } from "./overlay-content.es.js";
-import { OverlayTrigger as ee } from "./overlay-trigger.es.js";
-import { useIsTouchDevice as te } from "../../../helpers/hooks/use-is-touch-device.es.js";
-import { useIsMounted as oe } from "../../../helpers/hooks/use-is-mounted.es.js";
-import { autoUpdate as ne } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as re, flip as se, shift as ce, arrow as le } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-const ae = 3, ie = $({
+import { jsx as B } from "react/jsx-runtime";
+import { useFloating as J, useInteractions as K, useHover as N, useClick as Q, useFocus as X, useRole as Y, useDismiss as Z, safePolygon as _ } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { createContext as $, useState as D, useRef as ee, useMemo as T, useCallback as te, useId as oe } from "react";
+import { OverlayContent as ne } from "./overlay-content.es.js";
+import { OverlayTrigger as re } from "./overlay-trigger.es.js";
+import { autoUpdate as E } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as se, flip as ae, shift as ce, arrow as le } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useIsTouchDevice as ie } from "../../../helpers/hooks/use-is-touch-device.es.js";
+import { useIsMounted as fe } from "../../../helpers/hooks/use-is-mounted.es.js";
+const ue = 3, de = $({
   open: !1,
   onOpenChange: () => {
   },
@@ -35,120 +35,121 @@ const ae = 3, ie = $({
   context: {},
   scrollLock: void 0,
   contentId: ""
-}), E = (L) => {
-  const W = te(), {
-    children: j,
-    placement: A = "top",
-    openWith: n = W ? "click" : "hover",
-    defaultOpen: G = !1,
+}), L = (W) => {
+  const j = ie(), {
+    children: A,
+    placement: G = "top",
+    openWith: n = j ? "click" : "hover",
+    defaultOpen: H = !1,
     open: r,
     onToggle: o,
     role: c = "tooltip",
     arrowDimensions: e,
-    offset: H = ae + ((e == null ? void 0 : e.height) ?? 0),
+    offset: S = ue + ((e == null ? void 0 : e.height) ?? 0),
     focusManager: l,
-    dismissible: d,
-    scrollLock: p
-  } = L, { order: g = ["reference", "content"], initialFocus: h, modal: a, ...m } = l ?? {}, v = h !== void 0 ? h : a ? 0 : void 0, [y, O] = X(G), i = Y(null), x = oe(), f = T(() => o && typeof r < "u" ? r : y, [o, r, y]), u = Z(
-    (k) => {
-      typeof r > "u" && O(k), o == null || o(k);
+    dismissible: p,
+    scrollLock: g,
+    trackReferencePosition: U = !1
+  } = W, { order: h = ["reference", "content"], initialFocus: m, modal: i, ...v } = l ?? {}, y = m !== void 0 ? m : i ? 0 : void 0, [O, x] = D(H), f = ee(null), F = fe(), u = T(() => o && typeof r < "u" ? r : O, [o, r, O]), d = te(
+    (a) => {
+      typeof r > "u" && x(a), o == null || o(a);
     },
-    [r, O, o]
-  ), { x: F, y: C, refs: s, strategy: M, context: t, middlewareData: P, placement: R } = V({
-    placement: A,
-    open: f,
-    onOpenChange: u,
+    [r, x, o]
+  ), { x: C, y: M, refs: s, strategy: P, context: t, middlewareData: R, placement: k } = J({
+    placement: G,
+    open: u,
+    onOpenChange: d,
     middleware: [
-      re(H),
-      se(),
+      se(S),
+      ae(),
       ce({ padding: 8 }),
       le({
-        element: i,
+        element: f,
         padding: 4
       })
     ],
-    whileElementsMounted: ne
-  }), { getReferenceProps: w, getFloatingProps: I } = q([
-    z(t, {
+    whileElementsMounted: U ? (a, q, z) => E(a, q, z, { animationFrame: !0 }) : E
+  }), { getReferenceProps: w, getFloatingProps: I } = K([
+    N(t, {
       enabled: n === "hover",
-      handleClose: B()
+      handleClose: _()
     }),
-    J(t, {
-      toggle: d
+    Q(t, {
+      toggle: p
     }),
-    K(t, {
+    X(t, {
       enabled: n === "hover"
     }),
-    N(t, { role: c }),
-    Q(t, {
-      enabled: d,
+    Y(t, { role: c }),
+    Z(t, {
+      enabled: p,
       outsidePressEvent: n === "click" ? "mousedown" : "pointerdown"
     })
-  ]), b = _(), S = T(
+  ]), b = oe(), V = T(
     () => ({
-      open: f,
-      onOpenChange: u,
-      isMounted: x,
+      open: u,
+      onOpenChange: d,
+      isMounted: F,
       openWith: n,
       focusManager: l ? {
-        order: g,
-        modal: a,
-        initialFocus: v,
-        ...m
+        order: h,
+        modal: i,
+        initialFocus: y,
+        ...v
       } : void 0,
       reference: s.setReference,
       floating: s.setFloating,
-      arrowRef: i,
-      x: F,
-      y: C,
-      strategy: M,
+      arrowRef: f,
+      x: C,
+      y: M,
+      strategy: P,
       getReferenceProps: w,
       getFloatingProps: I,
       arrow: {
         width: e == null ? void 0 : e.width,
         height: e == null ? void 0 : e.height,
-        ...P.arrow
+        ...R.arrow
       },
       context: t,
-      placement: R,
-      scrollLock: p,
+      placement: k,
+      scrollLock: g,
       role: c,
       contentId: b
     }),
     [
-      f,
       u,
-      x,
+      d,
+      F,
       n,
       l,
       s.setReference,
       s.setFloating,
-      i,
-      F,
+      f,
       C,
       M,
+      P,
       w,
       I,
       e == null ? void 0 : e.width,
       e == null ? void 0 : e.height,
-      P.arrow,
+      R.arrow,
       t,
-      R,
-      p,
+      k,
+      g,
       c,
       b,
-      a,
-      g,
-      v,
-      m
+      i,
+      h,
+      y,
+      v
     ]
   );
-  return /* @__PURE__ */ U(ie.Provider, { value: S, children: j });
+  return /* @__PURE__ */ B(de.Provider, { value: V, children: A });
 };
-E.Trigger = ee;
-E.Content = D;
+L.Trigger = re;
+L.Content = ne;
 export {
-  E as Overlay,
-  ie as OverlayContext,
-  E as default
+  L as Overlay,
+  de as OverlayContext,
+  L as default
 };

package/src/tedi/components/tags/status-indicator/status-indicator.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),t=require("./status-indicator.module.scss.cjs.js"),a=e=>{const{type:s="success",size:i="sm",hasBorder:d=!1,position:r="default",className:u}=e;return o.jsx("span",{"data-name":"status-indicator",className:n.default(t.default["tedi-status-indicator"],t.default[`tedi-status-indicator--${s}`],t.default[`tedi-status-indicator--${i}`],{[t.default["tedi-status-indicator--bordered"]]:d},{[t.default["tedi-status-indicator--top-right"]]:r==="top-right"},u),role:"img","aria-hidden":"true"})};a.displayName="StatusIndicator";exports.StatusIndicator=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),t=require("./status-indicator.module.scss.cjs.js"),e=a=>{const{type:s="success",size:i="sm",hasBorder:d=!1,position:r="default",className:u}=a;return o.jsx("span",{"data-name":"status-indicator",className:n.default(t.default["tedi-status-indicator"],t.default[`tedi-status-indicator--${s}`],t.default[`tedi-status-indicator--${i}`],{[t.default["tedi-status-indicator--bordered"]]:d},{[t.default["tedi-status-indicator--top-right"]]:r==="top-right"},u),role:"img","aria-hidden":"true"})};e.displayName="StatusIndicator";exports.StatusIndicator=e;exports.default=e;

package/src/tedi/components/tags/status-indicator/status-indicator.es.js

@@ -22,5 +22,6 @@ const n = (s) => {
 };
 n.displayName = "StatusIndicator";
 export {
-  n as StatusIndicator
+  n as StatusIndicator,
+  n as default
 };

package/src/tedi/components/tags/tag/tag.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),g=require("../../base/icon/icon.cjs.js"),p=require("../../buttons/closing-button/closing-button.cjs.js"),f=require("../../loaders/spinner/spinner.cjs.js"),e=require("./tag.module.scss.cjs.js"),_=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=s=>{const{getCurrentBreakpointProps:o}=_.useBreakpointProps(s.defaultServerBreakpoint),{children:n,className:l,onClose:a,isLoading:r=!1,color:i="primary",...c}=o(s),d=u.default(e.default["tedi-tag"],i&&e.default[`tedi-tag--color-${i}`],a&&!r&&e.default["tedi-tag__close"],l);return t.jsxs("div",{className:d,role:"status","aria-live":r?"polite":void 0,...c,children:[i==="danger"&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(g.Icon,{name:"info",color:"danger",size:16,className:e.default["tedi-tag__icon--error"]})}),t.jsx("div",{className:e.default["tedi-tag__content"],children:n}),r&&!a&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(f.Spinner,{className:e.default["tedi-tag__loader"]})}),!r&&a&&t.jsx(p.ClosingButton,{iconSize:18,onClick:a})]})};exports.Tag=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),p=require("../../base/icon/icon.cjs.js"),f=require("../../buttons/closing-button/closing-button.cjs.js"),_=require("../../loaders/spinner/spinner.cjs.js"),e=require("./tag.module.scss.cjs.js"),m=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),j=s=>{const{getCurrentBreakpointProps:i}=m.useBreakpointProps(s.defaultServerBreakpoint),{children:n,className:l,onClose:r,closeButtonProps:c,isLoading:a=!1,color:o="primary",...d}=i(s),u=g.default(e.default["tedi-tag"],o&&e.default[`tedi-tag--color-${o}`],r&&!a&&e.default["tedi-tag__close"],l);return t.jsxs("div",{className:u,role:"status","aria-live":a?"polite":void 0,...d,children:[o==="danger"&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(p.Icon,{name:"info",color:"danger",size:16,className:e.default["tedi-tag__icon--error"]})}),t.jsx("div",{className:e.default["tedi-tag__content"],children:n}),a&&!r&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(_.Spinner,{className:e.default["tedi-tag__loader"]})}),!a&&r&&t.jsx(f.ClosingButton,{iconSize:18,...c,onClick:r})]})};exports.Tag=j;