@tedi-design-system/react 18.1.0-rc.9 → 18.1.1-rc.1

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

@@ -1,37 +1,38 @@
-import { jsx as d } from "react/jsx-runtime";
-import { useMergeRefs as g } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import v from "../../../../../external/classnames/index.es.js";
-import { useContext as x, isValidElement as y, cloneElement as b } from "react";
-import { Icon as _ } from "../../base/icon/icon.es.js";
-import { OverlayContext as u } from "./overlay.es.js";
+import { jsx as x } from "react/jsx-runtime";
+import { useMergeRefs as y } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import b from "../../../../../external/classnames/index.es.js";
+import { useContext as _, isValidElement as s, cloneElement as u } from "react";
+import { getElementRef as I } from "../../../helpers/get-element-ref.es.js";
+import { Icon as R } from "../../base/icon/icon.es.js";
+import { OverlayContext as h } from "./overlay.es.js";
 import r from "./overlay.module.scss.es.js";
-import { useLabels as I } from "../../../providers/label-provider/use-labels.es.js";
-const R = (s) => {
-  const { children: e, className: n } = s, { getLabel: l } = I(), { getReferenceProps: t, reference: c, openWith: m, open: a, role: p, contentId: f } = x(u), o = g([c, e.ref]), i = p === "tooltip" ? {
-    "aria-describedby": a ? f : void 0
+import { useLabels as E } from "../../../providers/label-provider/use-labels.es.js";
+const T = (n) => {
+  const { children: e, className: l } = n, { getLabel: m } = E(), { getReferenceProps: t, reference: c, openWith: a, open: p, role: f, ariaHidden: d, contentId: g } = _(h), v = s(e) ? I(e) : void 0, o = y([c, v]), i = f === "tooltip" && !d ? {
+    "aria-describedby": p ? g : void 0
   } : {};
-  return y(e) ? b(
+  return s(e) ? u(
     e,
     t({
-      ref: o,
       tabIndex: 0,
       ...i,
-      label: e.type === _ ? l("tooltip.icon-trigger") : void 0,
-      ...e.props
+      label: e.type === R ? m("tooltip.icon-trigger") : void 0,
+      ...e.props,
+      ref: o
     })
-  ) : /* @__PURE__ */ d(
+  ) : /* @__PURE__ */ x(
     "div",
     {
       ...t({
         ref: o,
         tabIndex: 0,
-        className: v(
+        className: b(
           r["tedi-overlay__trigger"],
           r["tedi-overlay__trigger--text"],
           {
-            [r["tedi-overlay__trigger--click"]]: m === "click"
+            [r["tedi-overlay__trigger--click"]]: a === "click"
           },
-          n
+          l
         ),
         ...i
       }),
@@ -40,5 +41,5 @@ const R = (s) => {
   );
 };
 export {
-  R as OverlayTrigger
+  T as OverlayTrigger
 };

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

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

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

@@ -46,6 +46,15 @@ export interface OverlayProps {
      * @default tooltip
      */
     role?: UseRoleProps['role'];
+    /**
+     * Renders the overlay purely visually: no `useRole` aria wiring on the trigger
+     * (so no `aria-describedby`) and the content is `aria-hidden`. Use when the
+     * trigger already conveys the same text through its accessible name — e.g. an
+     * icon-only button whose visible tooltip merely mirrors its label — so screen
+     * readers don't announce it twice.
+     * @default false
+     */
+    ariaHidden?: boolean;
     /**
      * Content overlay arrow dimensions.
      */
@@ -108,6 +117,7 @@ export interface OverlayContextType {
     context: FloatingContext<ReferenceType>;
     scrollLock?: boolean;
     role?: UseRoleProps['role'];
+    ariaHidden?: boolean;
     contentId: string;
 }
 export declare const OverlayContext: import('react').Context<OverlayContextType>;

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

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

package/src/tedi/components/overlays/tooltip/index.d.ts

@@ -1,3 +1,4 @@
 export * from './tooltip';
 export * from './tooltip-content';
 export * from './tooltip-trigger';
+export * from './info-tooltip';

package/src/tedi/components/overlays/tooltip/info-tooltip.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../buttons/info-button/info-button.cjs.js"),o=require("./tooltip.cjs.js"),m=require("../../../providers/label-provider/use-labels.cjs.js"),T=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),n=t=>{const{getLabel:r}=m.useLabels(),{getCurrentBreakpointProps:i}=T.useBreakpointProps(t.defaultServerBreakpoint),{children:s,placement:l,openWith:a,maxWidth:u,color:c="default",isSmall:p=!1,ariaLabel:f}=i(t);return e.jsxs(o.Tooltip,{placement:l,openWith:a,children:[e.jsx(o.Tooltip.Trigger,{children:e.jsx(d.InfoButton,{color:c,isSmall:p,"aria-label":f??r("infoButton.moreInformation")})}),e.jsx(o.Tooltip.Content,{maxWidth:u,children:s})]})};n.displayName="InfoTooltip";exports.InfoTooltip=n;

package/src/tedi/components/overlays/tooltip/info-tooltip.d.ts

@@ -0,0 +1,52 @@
+import { Placement } from '@floating-ui/react';
+import { ReactNode } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { OverlayOpenWith } from '../overlay/overlay';
+import { TooltipContentProps } from './tooltip-content';
+interface InfoTooltipBreakpointProps {
+    /**
+     * Tooltip content shown when the info button is hovered or focused.
+     */
+    children: ReactNode;
+    /**
+     * Placement of the tooltip relative to the info button.
+     * @default top
+     */
+    placement?: Placement;
+    /**
+     * How the tooltip is opened.
+     * @default hover
+     */
+    openWith?: OverlayOpenWith;
+    /**
+     * Max width of the tooltip content.
+     * @default medium
+     */
+    maxWidth?: TooltipContentProps['maxWidth'];
+    /**
+     * Info button colour. Use `inverted` on dark or coloured backgrounds.
+     * @default default
+     */
+    color?: 'default' | 'inverted';
+    /**
+     * Renders the smaller (16px) info button.
+     * @default false
+     */
+    isSmall?: boolean;
+    /**
+     * Accessible name for the info button.
+     * @default the translated "more information" label
+     */
+    ariaLabel?: string;
+}
+export type InfoTooltipProps = BreakpointSupport<InfoTooltipBreakpointProps>;
+/**
+ * An info button that reveals a tooltip on hover/focus — the standard
+ * "ⓘ + tooltip" pattern. Bundles `InfoButton` + `Tooltip` so consumers don't
+ * have to wire the trigger and content by hand (e.g. next to a form label).
+ */
+export declare const InfoTooltip: {
+    (props: InfoTooltipProps): JSX.Element;
+    displayName: string;
+};
+export default InfoTooltip;

package/src/tedi/components/overlays/tooltip/info-tooltip.es.js

@@ -0,0 +1,24 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { InfoButton as u } from "../../buttons/info-button/info-button.es.js";
+import { Tooltip as t } from "./tooltip.es.js";
+import { useLabels as d } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpointProps as h } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const B = (r) => {
+  const { getLabel: e } = d(), { getCurrentBreakpointProps: n } = h(r.defaultServerBreakpoint), {
+    children: i,
+    placement: a,
+    openWith: l,
+    maxWidth: m,
+    color: p = "default",
+    isSmall: s = !1,
+    ariaLabel: f
+  } = n(r);
+  return /* @__PURE__ */ c(t, { placement: a, openWith: l, children: [
+    /* @__PURE__ */ o(t.Trigger, { children: /* @__PURE__ */ o(u, { color: p, isSmall: s, "aria-label": f ?? e("infoButton.moreInformation") }) }),
+    /* @__PURE__ */ o(t.Content, { maxWidth: m, children: i })
+  ] });
+};
+B.displayName = "InfoTooltip";
+export {
+  B as InfoTooltip
+};

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

package/src/tedi/components/tags/tag/tag.d.ts

@@ -47,6 +47,15 @@ export interface TagProps extends BreakpointSupport<TagBreakpointProps> {
      * @default false
      */
     isLoading?: boolean;
+    /**
+     * Overrides the Tag's implicit live-region role. Tags default to `role="status"`
+     * so they are announced by assistive tech. When a Tag is rendered as static
+     * content inside a list — and additions/removals are announced elsewhere — pass
+     * e.g. `role="presentation"` so it is not read as a live status, which otherwise
+     * makes some screen readers (e.g. JAWS) announce the content twice on focus.
+     * @default 'status'
+     */
+    role?: React.AriaRole;
 }
 export declare const Tag: (props: TagProps) => JSX.Element;
 export {};

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

@@ -1,13 +1,13 @@
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
-import f from "../../../../../external/classnames/index.es.js";
-import { Icon as _ } from "../../base/icon/icon.es.js";
-import { ClosingButton as N } from "../../buttons/closing-button/closing-button.es.js";
-import { Spinner as u } from "../../loaders/spinner/spinner.es.js";
-import { Ellipsis as v } from "../../misc/ellipsis/ellipsis.es.js";
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import { Icon as N } from "../../base/icon/icon.es.js";
+import { ClosingButton as u } from "../../buttons/closing-button/closing-button.es.js";
+import { Spinner as v } from "../../loaders/spinner/spinner.es.js";
+import { Ellipsis as B } from "../../misc/ellipsis/ellipsis.es.js";
 import e from "./tag.module.scss.es.js";
-import { useBreakpointProps as B } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const y = (a) => {
-  const { getCurrentBreakpointProps: n } = B(a.defaultServerBreakpoint), {
+import { useBreakpointProps as h } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const z = (a) => {
+  const { getCurrentBreakpointProps: n } = h(a.defaultServerBreakpoint), {
     children: l,
     className: c,
     onClose: o,
@@ -15,21 +15,22 @@ const y = (a) => {
     isLoading: t = !1,
     color: r = "primary",
     ellipsis: s = !1,
-    ...d
-  } = n(a), p = f(
+    role: d = "status",
+    ...p
+  } = n(a), g = _(
     e["tedi-tag"],
     r && e[`tedi-tag--color-${r}`],
     o && !t && e["tedi-tag__close"],
     s !== !1 && e["tedi-tag--ellipsis"],
     c
   );
-  return /* @__PURE__ */ g("div", { className: p, role: "status", "aria-live": t ? "polite" : void 0, ...d, children: [
-    r === "danger" && /* @__PURE__ */ i("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ i(_, { name: "info", color: "danger", size: 16, className: e["tedi-tag__icon--error"] }) }),
-    /* @__PURE__ */ i("div", { className: e["tedi-tag__content"], children: s !== !1 ? /* @__PURE__ */ i(v, { position: s === "start" ? "start" : "end", lineClamp: 1, children: l }) : l }),
-    t && !o && /* @__PURE__ */ i("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ i(u, { className: e["tedi-tag__loader"] }) }),
-    !t && o && /* @__PURE__ */ i(N, { iconSize: 18, ...m, onClick: o })
+  return /* @__PURE__ */ f("div", { className: g, role: d, "aria-live": t ? "polite" : void 0, ...p, children: [
+    r === "danger" && /* @__PURE__ */ i("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ i(N, { name: "info", color: "danger", size: 16, className: e["tedi-tag__icon--error"] }) }),
+    /* @__PURE__ */ i("div", { className: e["tedi-tag__content"], children: s !== !1 ? /* @__PURE__ */ i(B, { position: s === "start" ? "start" : "end", lineClamp: 1, children: l }) : l }),
+    t && !o && /* @__PURE__ */ i("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ i(v, { className: e["tedi-tag__loader"] }) }),
+    !t && o && /* @__PURE__ */ i(u, { iconSize: 18, ...m, onClick: o })
   ] });
 };
 export {
-  y as Tag
+  z as Tag
 };

package/src/tedi/helpers/get-element-ref.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),n=t=>{const e=t;return Number.parseInt(r.version,10)>=19?e.props.ref:e.ref};exports.getElementRef=n;

package/src/tedi/helpers/get-element-ref.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement, Ref } from 'react';
+/**
+ * Reads a React element's ref in a version-safe way.
+ *
+ * React 19 moved `ref` onto `props` (an enumerable prop) and warns whenever the
+ * legacy `element.ref` getter is accessed. React 18 keeps the ref on the element
+ * itself. So read from `props.ref` on React 19+ and only fall back to
+ * `element.ref` on React 18 — avoiding both the deprecation warning and the
+ * lost ref.
+ */
+export declare const getElementRef: <T = unknown>(element: ReactElement) => Ref<T> | undefined;

package/src/tedi/helpers/get-element-ref.es.js

@@ -0,0 +1,8 @@
+import { version as t } from "react";
+const n = (r) => {
+  const e = r;
+  return Number.parseInt(t, 10) >= 19 ? e.props.ref : e.ref;
+};
+export {
+  n as getElementRef
+};

package/src/tedi/helpers/hooks/use-file-upload.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),A=require("../../providers/label-provider/use-labels.cjs.js"),$=({accept:g,maxSize:r},o)=>{if(!g&&!r)return;const a=[g&&`${o("file-upload.accept")} ${g.replaceAll(",",", ")}`,r&&`${o("file-upload.max-size")} ${r}MB`].filter(Boolean).join(". ");return a.length?{text:a}:void 0},H=()=>`${Date.now()}-${Math.random().toString(36).slice(2)}`,I=g=>{const{getLabel:r}=A.useLabels(),{accept:o,maxSize:a,multiple:w=!1,validateIndividually:E=!1,defaultFiles:S=[],onChange:u,onDelete:f,files:x,announcementTimeout:T=5e3}=g,F=x!==void 0,[b,j]=m.useState(S),p=F?x:b,[L,h]=m.useState($({accept:o,maxSize:a},r)),[R,M]=m.useState(""),y=m.useRef(!0);m.useEffect(()=>()=>{y.current=!1},[]);const d=m.useRef(null),U=s=>{var n;if(!o)return!0;const l=o.split(",").map(e=>e.trim().toLowerCase()),t=s.name.includes(".")?`.${(n=s.name.split(".").pop())==null?void 0:n.toLowerCase()}`:"",i=s.type.toLowerCase();return l.includes(t)||l.includes(i)},V=s=>{const l=s.reduce((t,{type:i,file:n})=>(t[i].push(n.name),t),{extension:[],size:[]});return Object.entries(l).filter(([t,i])=>i.length).map(([t,i])=>{const n=i.map(e=>`'${e}'`).join(", ");return r(`file-upload.${t}-rejected`,n)}).join(". ")};return{innerFiles:p,uploadErrorHelper:L,onFileChange:s=>{if(s.target.files){const l=Array.from(s.target.files),t=[],i=l.map(e=>{const c=U(e),v=!a||e.size<=a*1024**2;c||t.push({type:"extension",file:e}),v||t.push({type:"size",file:e});const z=new File([e],e.name,{type:e.type,lastModified:e.lastModified});return Object.assign(z,{id:H(),isLoading:!1,isValid:c&&v})});let n=[];if(!w&&i.length>0)i[0].isValid&&(n=[i[0]]);else if(E)n=[...p,...i];else{const e=i.filter(c=>c.isValid);e.length>0&&(n=[...p,...e])}if(n.length>0&&(F||j(n),u==null||u(n),t.length===0)){const e=n.length-p.length,c=r("file-upload.success-added",e.toString())||`${e} file(s) added successfully`;y.current&&M(c)}if(t.length){const e=t.map(v=>v.file.name).join(", "),c=r("file-upload.failed-some",e)||`Upload failed for: ${e}`;y.current&&M(c),h({type:"error",text:V(t)})}else h($({accept:o,maxSize:a},r));setTimeout(()=>{y.current&&M("")},T),d.current&&(d.current.value="")}},onFileRemove:s=>{const l=p.filter(t=>t!==s);F||j(l),f==null||f(s),u==null||u(l),l.length===0&&h($({accept:o,maxSize:a},r)),d.current&&(d.current.value="")},handleClear:()=>{const s=[...p];return s.forEach(l=>f==null?void 0:f(l)),F||j([]),u==null||u([]),h($({accept:o,maxSize:a},r)),d.current&&(d.current.value=""),s},fileInputRef:d,announcement:R}};exports.useFileUpload=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),z=require("../../providers/label-provider/use-labels.cjs.js"),j=({accept:F,maxSize:s},o)=>{if(!F&&!s)return;const u=[F&&`${o("file-upload.accept")} ${F.replaceAll(",",", ")}`,s&&`${o("file-upload.max-size")} ${s}MB`].filter(Boolean).join(". ");return u.length?{text:u}:void 0},I=()=>`${Date.now()}-${Math.random().toString(36).slice(2)}`,O=100,_=F=>{const{getLabel:s}=z.useLabels(),{accept:o,maxSize:u,multiple:w=!1,validateIndividually:b=!1,defaultFiles:L=[],onChange:c,onDelete:f,files:R,announcementTimeout:S=5e3}=F,h=R!==void 0,[A,x]=a.useState(L),p=h?R:A,[C,y]=a.useState(j({accept:o,maxSize:u},s)),[H,M]=a.useState(""),v=a.useRef(!0),g=a.useRef(),T=a.useRef();a.useEffect(()=>()=>{v.current=!1,g.current&&clearTimeout(g.current),T.current&&clearTimeout(T.current)},[]);const E=a.useCallback(t=>{!t||!v.current||(M(""),g.current&&clearTimeout(g.current),T.current&&clearTimeout(T.current),g.current=setTimeout(()=>{v.current&&(M(t),T.current=setTimeout(()=>{v.current&&M("")},S))},O))},[S]),d=a.useRef(null),N=t=>{var n;if(!o)return!0;const l=o.split(",").map(e=>e.trim().toLowerCase()),r=t.name.includes(".")?`.${(n=t.name.split(".").pop())==null?void 0:n.toLowerCase()}`:"",i=t.type.toLowerCase();return l.includes(r)||l.includes(i)},U=t=>{const l=t.reduce((r,{type:i,file:n})=>(r[i].push(n.name),r),{extension:[],size:[]});return Object.entries(l).filter(([r,i])=>i.length).map(([r,i])=>{const n=i.map(e=>`'${e}'`).join(", ");return s(`file-upload.${r}-rejected`,n)}).join(". ")};return{innerFiles:p,uploadErrorHelper:C,onFileChange:t=>{if(t.target.files){const l=Array.from(t.target.files),r=[],i=l.map(e=>{const m=N(e),$=!u||e.size<=u*1024**2;m||r.push({type:"extension",file:e}),$||r.push({type:"size",file:e});const V=new File([e],e.name,{type:e.type,lastModified:e.lastModified});return Object.assign(V,{id:I(),isLoading:!1,isValid:m&&$})});let n=[];if(!w&&i.length>0)i[0].isValid&&(n=[i[0]]);else if(b)n=[...p,...i];else{const e=i.filter(m=>m.isValid);e.length>0&&(n=[...p,...e])}if(n.length>0&&(h||x(n),c==null||c(n)),r.length){const e=U(r);y({type:"error",text:e}),E(e)}else if(y(j({accept:o,maxSize:u},s)),n.length>0){const e=n.filter(m=>!p.includes(m)).length;E(s("file-upload.success-added",e.toString()))}t.target.value="",d.current&&(d.current.value="")}},onFileRemove:t=>{const l=p.filter(r=>r!==t);h||x(l),f==null||f(t),c==null||c(l),l.length===0&&y(j({accept:o,maxSize:u},s)),E(s("file-upload.removed",t.name??"")),d.current&&(d.current.value="")},handleClear:()=>{const t=[...p];return t.forEach(l=>f==null?void 0:f(l)),h||x([]),c==null||c([]),y(j({accept:o,maxSize:u},s)),E(s("file-upload.cleared")),d.current&&(d.current.value=""),t},fileInputRef:d,announcement:H}};exports.useFileUpload=_;