@tedi-design-system/react 14.4.0-rc.9 → 15.0.0-rc.10

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),r=require("../../../../../../../external/classnames/index.cjs.js"),p=require("../../../../buttons/button/button.cjs.js"),f=require("../../../../buttons/floating-button/floating-button.cjs.js"),o=require("./sidenav-toggle.module.scss.cjs.js"),b=require("../../../../../providers/label-provider/use-labels.cjs.js"),t=({menuOpen:l,toggleMenu:s,referenceRef:i,getReferenceProps:n=()=>({}),variant:e="mobile"})=>{const{getLabel:a}=b.useLabels(),c=a("header.toggle",l),u=r.default(o.default["tedi-sidenav-toggle"],{[o.default["tedi-sidenav-toggle--open"]]:l,[o.default[`tedi-sidenav-toggle--${e}`]]:!0}),d=e==="collapse"?f.FloatingButton:p.Button;return g.jsx(d,{...n(),ref:i,icon:{name:e==="collapse"?l?"right_panel_open":"left_panel_open":l?"close":"menu",className:o.default["tedi-sidenav-toggle__icon"],size:e==="collapse"?18:24},visualType:e==="collapse"?"secondary":"primary",className:u,onClick:s,position:e==="collapse"?"absolute":"static",size:e==="collapse"?"small":"",children:c})};exports.SidenavToggle=t;exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),p=require("../../../../../../../external/classnames/index.cjs.js"),b=require("../../../../buttons/button/button.cjs.js"),_=require("../../../../buttons/floating-button/floating-button.cjs.js"),o=require("./sidenav-toggle.module.scss.cjs.js"),y=require("../../../../../providers/label-provider/use-labels.cjs.js"),i=({menuOpen:l,toggleMenu:s,referenceRef:n,getReferenceProps:a=()=>({}),variant:e="mobile"})=>{const{getLabel:c}=y.useLabels(),d=c("header.toggle",l),u=p.default(o.default["tedi-sidenav-toggle"],{[o.default["tedi-sidenav-toggle--open"]]:l,[o.default[`tedi-sidenav-toggle--${e}`]]:!0}),r=e==="collapse"?_.FloatingButton:b.Button,g=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),s(!l))};return f.jsx(r,{...a(),ref:n,icon:{name:e==="collapse"?l?"right_panel_open":"left_panel_open":l?"close":"menu",className:o.default["tedi-sidenav-toggle__icon"],size:e==="collapse"?18:24},visualType:e==="collapse"?"secondary":"primary",className:u,onClick:()=>s(!l),onKeyDown:g,position:e==="collapse"?"absolute":"static",size:e==="collapse"?"small":"",children:d})};exports.SidenavToggle=i;exports.default=i;

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { UnknownType } from '../../../../../../tedi/types/commonTypes';
+import { UnknownType } from '../../../../../types/commonTypes';
 export type SidenavToggleVariant = 'mobile' | 'collapse';
 export type SidenavToggleProps = {
     /**

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.es.js

@@ -1,36 +1,39 @@
-import { jsx as p } from "react/jsx-runtime";
-import g from "../../../../../../../external/classnames/index.es.js";
-import { Button as n } from "../../../../buttons/button/button.es.js";
-import { FloatingButton as r } from "../../../../buttons/floating-button/floating-button.es.js";
+import { jsx as g } from "react/jsx-runtime";
+import d from "../../../../../../../external/classnames/index.es.js";
+import { Button as f } from "../../../../buttons/button/button.es.js";
+import { FloatingButton as y } from "../../../../buttons/floating-button/floating-button.es.js";
 import l from "./sidenav-toggle.module.scss.es.js";
-import { useLabels as d } from "../../../../../providers/label-provider/use-labels.es.js";
+import { useLabels as _ } from "../../../../../providers/label-provider/use-labels.es.js";
 const E = ({
   menuOpen: o,
-  toggleMenu: s,
-  referenceRef: t,
-  getReferenceProps: i = () => ({}),
+  toggleMenu: t,
+  referenceRef: i,
+  getReferenceProps: a = () => ({}),
   variant: e = "mobile"
 }) => {
-  const { getLabel: a } = d(), c = a("header.toggle", o), m = g(l["tedi-sidenav-toggle"], {
+  const { getLabel: c } = _(), r = c("header.toggle", o), n = d(l["tedi-sidenav-toggle"], {
     [l["tedi-sidenav-toggle--open"]]: o,
     [l[`tedi-sidenav-toggle--${e}`]]: !0
-  });
-  return /* @__PURE__ */ p(
-    e === "collapse" ? r : n,
+  }), p = e === "collapse" ? y : f, m = (s) => {
+    (s.key === "Enter" || s.key === " ") && (s.preventDefault(), t(!o));
+  };
+  return /* @__PURE__ */ g(
+    p,
     {
-      ...i(),
-      ref: t,
+      ...a(),
+      ref: i,
       icon: {
         name: e === "collapse" ? o ? "right_panel_open" : "left_panel_open" : o ? "close" : "menu",
         className: l["tedi-sidenav-toggle__icon"],
         size: e === "collapse" ? 18 : 24
       },
       visualType: e === "collapse" ? "secondary" : "primary",
-      className: m,
-      onClick: s,
+      className: n,
+      onClick: () => t(!o),
+      onKeyDown: m,
       position: e === "collapse" ? "absolute" : "static",
       size: e === "collapse" ? "small" : "",
-      children: c
+      children: r
     }
   );
 };

package/src/tedi/components/layout/sidenav/sidenav.d.ts

@@ -84,15 +84,7 @@ export declare const SideNav: (<C extends React.ElementType = "a">(props: SideNa
     Item: <C extends React.ElementType = "a">(props: SideNavItemProps<C> & {
         onItemClick?: () => void;
         level?: number;
-        isCollapsed
-        /**
-         * Show dividers between navigation items
-         * @default true
-         */
-        ? /**
-         * Show dividers between navigation items
-         * @default true
-         */: boolean;
+        isCollapsed?: boolean;
     }) => import("react/jsx-runtime").JSX.Element;
     Dropdown: <C extends React.ElementType = "a">({ trigger, groups, onOpenChange, }: {
         trigger: React.ReactNode;

package/src/tedi/components/misc/scroll-visibility/scroll-visibility.cjs.js

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),V=require("../../../helpers/hooks/use-scroll.cjs.js"),f=require("./scroll-visibility.module.scss.cjs.js"),y=v=>{const{children:t,enabled:s=!0,className:g,visibility:u="hide",toggleVisibility:b=!1,scrollDistance:r=100,scrollDirection:o="down",scrollContainer:w,animationDirection:p="center"}=v,{scrollTop:e,scrollHeight:c,clientHeight:n}=V.useScroll(w),[q,d]=l.useState(()=>{if(!s)return!1;const i=o==="down"?e:c-n-e;return u==="hide"?i>r:i<=r}),S=l.useRef(o==="down"?e:c-n-e);l.useEffect(()=>{if(!s)return;const i=u==="show",a=o==="down"?e:c-n-e;b&&a<S.current?d(i):a>r?d(!i):d(i),S.current=a},[u,b,r,e,s,o,c,n]);const m=h.default(f.default["tedi-scroll-visibility"],f.default[`tedi-scroll-visibility--${p}`],{[f.default["tedi-scroll-visibility--hidden"]]:s&&q},g);return l.isValidElement(t)?l.cloneElement(t,{className:h.default(t.props.className,m)}):D.jsx("div",{className:m,children:t})};exports.ScrollVisibility=y;exports.default=y;
+"use client";
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),V=require("../../../helpers/hooks/use-scroll.cjs.js"),b=require("./scroll-visibility.module.scss.cjs.js"),g=w=>{const{children:l,enabled:o=!0,className:H,visibility:n="hide",toggleVisibility:h=!1,scrollDistance:c=100,scrollDirection:u="down",scrollContainer:p,animationDirection:q="center"}=w,[d,D]=t.useState(!1),{scrollTop:i=0,scrollHeight:a=0,clientHeight:f=0}=V.useScroll(p)??{},[E,m]=t.useState(!1),S=t.useRef(0);t.useEffect(()=>{if(D(!0),!o)return;const e=u==="down"?i:a-f-i,s=n==="hide"?e>c:e<=c;m(s),S.current=e},[]),t.useEffect(()=>{if(!d||!o)return;const e=n==="show",s=u==="down"?i:a-f-i;let r;h&&s<S.current?r=e:s>c?r=!e:r=e,m(r),S.current=s},[d,o,n,h,c,i,u,a,f]);const y=v.default(b.default["tedi-scroll-visibility"],b.default[`tedi-scroll-visibility--${q}`],{[b.default["tedi-scroll-visibility--hidden"]]:d&&o&&E},H);return t.isValidElement(l)?t.cloneElement(l,{className:v.default(l.props.className,y)}):M.jsx("div",{className:y,children:l})};exports.ScrollVisibility=g;exports.default=g;

package/src/tedi/components/misc/scroll-visibility/scroll-visibility.es.js

@@ -1,40 +1,52 @@
-import { jsx as D } from "react/jsx-runtime";
-import h from "../../../../../external/classnames/index.es.js";
-import { useState as N, useRef as g, useEffect as E, cloneElement as H, isValidElement as V } from "react";
-import { useScroll as x } from "../../../helpers/hooks/use-scroll.es.js";
-import m from "./scroll-visibility.module.scss.es.js";
-const M = (b) => {
+"use client";
+import { jsx as M } from "react/jsx-runtime";
+import y from "../../../../../external/classnames/index.es.js";
+import { useState as S, useRef as V, useEffect as w, cloneElement as x, isValidElement as I } from "react";
+import { useScroll as T } from "../../../helpers/hooks/use-scroll.es.js";
+import f from "./scroll-visibility.module.scss.es.js";
+const k = (H) => {
   const {
-    children: s,
-    enabled: t = !0,
-    className: y,
+    children: t,
+    enabled: l = !0,
+    className: v,
     visibility: n = "hide",
-    toggleVisibility: f = !1,
-    scrollDistance: l = 100,
-    scrollDirection: o = "down",
-    scrollContainer: S,
-    animationDirection: w = "center"
-  } = b, { scrollTop: e, scrollHeight: r, clientHeight: c } = x(S), [v, a] = N(() => {
-    if (!t) return !1;
-    const i = o === "down" ? e : r - c - e;
-    return n === "hide" ? i > l : i <= l;
-  }), u = g(o === "down" ? e : r - c - e);
-  E(() => {
-    if (!t) return;
-    const i = n === "show", d = o === "down" ? e : r - c - e;
-    f && d < u.current ? a(i) : d > l ? a(!i) : a(i), u.current = d;
-  }, [n, f, l, e, t, o, r, c]);
-  const p = h(
-    m["tedi-scroll-visibility"],
-    m[`tedi-scroll-visibility--${w}`],
+    toggleVisibility: h = !1,
+    scrollDistance: o = 100,
+    scrollDirection: c = "down",
+    scrollContainer: D,
+    animationDirection: N = "center"
+  } = H, [d, g] = S(!1), { scrollTop: s = 0, scrollHeight: a = 0, clientHeight: u = 0 } = T(D) ?? {}, [E, p] = S(!1), m = V(0);
+  w(() => {
+    if (g(!0), !l) return;
+    const e = c === "down" ? s : a - u - s, i = n === "hide" ? e > o : e <= o;
+    p(i), m.current = e;
+  }, []), w(() => {
+    if (!d || !l) return;
+    const e = n === "show", i = c === "down" ? s : a - u - s;
+    let r;
+    h && i < m.current ? r = e : i > o ? r = !e : r = e, p(r), m.current = i;
+  }, [
+    d,
+    l,
+    n,
+    h,
+    o,
+    s,
+    c,
+    a,
+    u
+  ]);
+  const b = y(
+    f["tedi-scroll-visibility"],
+    f[`tedi-scroll-visibility--${N}`],
     {
-      [m["tedi-scroll-visibility--hidden"]]: t && v
+      [f["tedi-scroll-visibility--hidden"]]: d && l && E
     },
-    y
+    v
   );
-  return V(s) ? H(s, { className: h(s.props.className, p) }) : /* @__PURE__ */ D("div", { className: p, children: s });
+  return I(t) ? x(t, { className: y(t.props.className, b) }) : /* @__PURE__ */ M("div", { className: b, children: t });
 };
 export {
-  M as ScrollVisibility,
-  M as default
+  k as ScrollVisibility,
+  k as default
 };

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

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

package/src/tedi/helpers/hooks/use-file-upload.d.ts

@@ -19,6 +19,11 @@ export interface UseFileUploadProps {
     onChange?: (files: FileUploadFile[]) => void;
     onDelete?: (file: FileUploadFile) => void;
     files?: FileUploadFile[];
+    /**
+     * How long (ms) the announcement message should be visible.
+     * @default 5000
+     */
+    announcementTimeout?: number;
 }
 export declare const useFileUpload: (props: UseFileUploadProps) => {
     innerFiles: FileUploadFile[];
@@ -27,4 +32,5 @@ export declare const useFileUpload: (props: UseFileUploadProps) => {
     onFileRemove: (file: FileUploadFile) => void;
     handleClear: () => FileUploadFile[];
     fileInputRef: React.RefObject<HTMLInputElement>;
+    announcement: string;
 };