@tedi-design-system/react 18.0.0-rc.21 → 18.0.0-rc.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.0.0-rc.21",
+  "version": "18.0.0-rc.22",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),g=require("../../../../../../external/classnames/index.cjs.js"),t=require("react"),D=require("../../../base/icon/icon.cjs.js"),k=require("../../../misc/print/print.cjs.js"),o=require("../../../overlays/dropdown/dropdown.cjs.js"),i=require("../tabs.module.scss.cjs.js"),z=require("../tabs-context.cjs.js"),P=require("../../../../providers/label-provider/use-labels.cjs.js"),A=require("../../../../helpers/hooks/use-scroll-fade.cjs.js"),v=R=>{const{children:a,className:S,"aria-label":j,"aria-labelledby":y,printVisibility:L="show",overflowMode:r="dropdown"}=R,{getLabel:q}=P.useLabels(),{currentTab:W,setCurrentTab:T}=z.useTabsContext(),h=t.useRef(null),c=t.useRef(null),[d,u]=t.useState(!1),f=t.useRef(!1),b=t.useRef(0);f.current=d;const{scrollRef:w,canScrollStart:C,canScrollEnd:M,handleScroll:N}=A.useScrollFade({direction:"horizontal"}),O=t.useCallback(e=>{c.current=e,r==="scroll"&&w(e)},[r,w]),p=t.useMemo(()=>t.Children.toArray(a).filter(t.isValidElement),[a]),m=t.useMemo(()=>{const e=[];return p.forEach(l=>{const n=l.props;e.push({id:n.id,label:n.children,disabled:n.disabled})}),e},[p]),_=r==="dropdown"&&d&&m.length>1,E=m.filter(e=>e.id!==W),I=e=>{e&&T(e)};return t.useLayoutEffect(()=>{if(r!=="dropdown")return;const e=c.current;!e||f.current||(b.current=e.scrollWidth,e.scrollWidth>e.clientWidth&&e.clientWidth>0&&u(!0))},[r,d,p]),t.useEffect(()=>{if(r!=="dropdown")return;const e=h.current,l=c.current;if(!e||!l)return;const n=()=>{f.current?b.current<=e.clientWidth&&u(!1):l.scrollWidth>l.clientWidth&&l.clientWidth>0&&(b.current=l.scrollWidth,u(!0))},x=new ResizeObserver(n);return x.observe(e),()=>x.disconnect()},[r]),s.jsx(k.Print,{visibility:L,children:s.jsxs("div",{ref:h,className:g.default(i.default["tedi-tabs__list-wrapper"],{[i.default["tedi-tabs__list-wrapper--scroll-fade-left"]]:r==="scroll"&&C,[i.default["tedi-tabs__list-wrapper--scroll-fade-right"]]:r==="scroll"&&M}),children:[s.jsx("div",{ref:O,"data-name":"tabs-list",role:"tablist","aria-label":j,"aria-labelledby":y,className:g.default(i.default["tedi-tabs__list"],{[i.default["tedi-tabs__list--overflow"]]:_},{[i.default["tedi-tabs__list--scroll"]]:r==="scroll"},S),onScroll:r==="scroll"?N:void 0,children:a}),_&&s.jsx("div",{className:i.default["tedi-tabs__more-wrapper"],children:s.jsxs(o.Dropdown,{placement:"bottom-end",children:[s.jsx(o.Dropdown.Trigger,{children:s.jsxs("button",{"data-name":"tabs-more-btn",type:"button",className:i.default["tedi-tabs__more-btn"],children:[q("tabs.more"),s.jsx(D.Icon,{name:"expand_more",size:18})]})}),s.jsx(o.Dropdown.Content,{children:E.map((e,l)=>s.jsx(o.Dropdown.Item,{index:l,disabled:e.disabled,onClick:()=>I(e.id),children:e.label},e.id))})]})})]})})};v.displayName="TabsList";exports.TabsList=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),m=require("../../../../../../external/classnames/index.cjs.js"),r=require("react"),W=require("../../../base/icon/icon.cjs.js"),z=require("../../../misc/print/print.cjs.js"),i=require("../../../overlays/dropdown/dropdown.cjs.js"),o=require("../tabs.module.scss.cjs.js"),P=require("../tabs-context.cjs.js"),A=require("../../../../providers/label-provider/use-labels.cjs.js"),F=require("../../../../helpers/hooks/use-scroll-fade.cjs.js"),_=v=>{const{children:c,className:x,"aria-label":L,"aria-labelledby":g,printVisibility:S="show",overflowMode:s="dropdown",dropdownLabel:j}=v,{getLabel:y}=A.useLabels(),{currentTab:q,setCurrentTab:C}=P.useTabsContext(),d=r.useRef(null),b=r.useRef(null),[R,T]=r.useState(!1),{scrollRef:f,canScrollStart:M,canScrollEnd:N,handleScroll:E}=F.useScrollFade({direction:"horizontal"}),I=r.useCallback(e=>{b.current=e,s==="scroll"&&f(e)},[s,f]),u=r.useMemo(()=>r.Children.toArray(c).filter(r.isValidElement),[c]),p=r.useMemo(()=>{const e=[];return u.forEach(t=>{const a=t.props;e.push({id:a.id,label:a.children,disabled:a.disabled})}),e},[u]),w=s==="dropdown"&&R&&p.length>1,O=p.filter(e=>e.id!==q),k=e=>{e&&C(e)},n=r.useCallback(()=>{const e=d.current,t=b.current;if(!e||!t||t.clientWidth===0)return;const a=o.default["tedi-tabs__list--overflow"],h=t.classList.contains(a);h&&t.classList.remove(a);const D=t.scrollWidth;h&&t.classList.add(a),T(D>e.clientWidth)},[]);return r.useLayoutEffect(()=>{s==="dropdown"&&n()},[s,n,u]),r.useEffect(()=>{if(s!=="dropdown")return;const e=d.current;if(!e)return;const t=new ResizeObserver(n);return t.observe(e),()=>t.disconnect()},[s,n]),l.jsx(z.Print,{visibility:S,children:l.jsxs("div",{ref:d,className:m.default(o.default["tedi-tabs__list-wrapper"],{[o.default["tedi-tabs__list-wrapper--scroll-fade-left"]]:s==="scroll"&&M,[o.default["tedi-tabs__list-wrapper--scroll-fade-right"]]:s==="scroll"&&N}),children:[l.jsx("div",{ref:I,"data-name":"tabs-list",role:"tablist","aria-label":L,"aria-labelledby":g,className:m.default(o.default["tedi-tabs__list"],{[o.default["tedi-tabs__list--overflow"]]:w},{[o.default["tedi-tabs__list--scroll"]]:s==="scroll"},x),onScroll:s==="scroll"?E:void 0,children:c}),w&&l.jsx("div",{className:o.default["tedi-tabs__more-wrapper"],children:l.jsxs(i.Dropdown,{placement:"bottom-end",children:[l.jsx(i.Dropdown.Trigger,{children:l.jsxs("button",{"data-name":"tabs-more-btn",type:"button",className:o.default["tedi-tabs__more-btn"],children:[j??y("tabs.more"),l.jsx(W.Icon,{name:"expand_more",size:18})]})}),l.jsx(i.Dropdown.Content,{children:O.map((e,t)=>l.jsx(i.Dropdown.Item,{index:t,disabled:e.disabled,onClick:()=>k(e.id),children:e.label},e.id))})]})})]})})};_.displayName="TabsList";exports.TabsList=_;

package/src/tedi/components/navigation/tabs/tabs-list/tabs-list.d.ts

@@ -29,6 +29,10 @@ export interface TabsListProps {
      * @default 'dropdown'
      */
     overflowMode?: 'dropdown' | 'scroll';
+    /**
+     * Label for the overflow dropdown trigger. Defaults to the `tabs.more` label.
+     */
+    dropdownLabel?: string;
 }
 export declare const TabsList: {
     (props: TabsListProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,92 +1,94 @@
-import { jsx as s, jsxs as h } from "react/jsx-runtime";
-import R from "../../../../../../external/classnames/index.es.js";
-import i, { useRef as n, useState as A, useCallback as P, useLayoutEffect as V, useEffect as B } from "react";
-import { Icon as D } from "../../../base/icon/icon.es.js";
-import { Print as F } from "../../../misc/print/print.es.js";
-import { Dropdown as a } from "../../../overlays/dropdown/dropdown.es.js";
-import l from "../tabs.module.scss.es.js";
-import { useTabsContext as q } from "../tabs-context.es.js";
-import { useLabels as G } from "../../../../providers/label-provider/use-labels.es.js";
-import { useScrollFade as H } from "../../../../helpers/hooks/use-scroll-fade.es.js";
-const J = (S) => {
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import _ from "../../../../../../external/classnames/index.es.js";
+import i, { useRef as v, useState as V, useCallback as L, useLayoutEffect as B, useEffect as D } from "react";
+import { Icon as F } from "../../../base/icon/icon.es.js";
+import { Print as q } from "../../../misc/print/print.es.js";
+import { Dropdown as n } from "../../../overlays/dropdown/dropdown.es.js";
+import s from "../tabs.module.scss.es.js";
+import { useTabsContext as G } from "../tabs-context.es.js";
+import { useLabels as H } from "../../../../providers/label-provider/use-labels.es.js";
+import { useScrollFade as J } from "../../../../helpers/hooks/use-scroll-fade.es.js";
+const K = (g) => {
   const {
     children: c,
-    className: W,
-    "aria-label": L,
-    "aria-labelledby": N,
-    printVisibility: C = "show",
-    overflowMode: r = "dropdown"
-  } = S, { getLabel: T } = G(), { currentTab: x, setCurrentTab: E } = q(), w = n(null), d = n(null), [f, b] = A(!1), m = n(!1), u = n(0);
-  m.current = f;
-  const {
-    scrollRef: _,
-    canScrollStart: I,
-    canScrollEnd: M,
-    handleScroll: O
-  } = H({ direction: "horizontal" }), k = P(
+    className: y,
+    "aria-label": S,
+    "aria-labelledby": C,
+    printVisibility: R = "show",
+    overflowMode: t = "dropdown",
+    dropdownLabel: N
+  } = g, { getLabel: T } = H(), { currentTab: x, setCurrentTab: E } = G(), d = v(null), m = v(null), [I, M] = V(!1), {
+    scrollRef: p,
+    canScrollStart: O,
+    canScrollEnd: W,
+    handleScroll: k
+  } = J({ direction: "horizontal" }), z = L(
     (e) => {
-      d.current = e, r === "scroll" && _(e);
+      m.current = e, t === "scroll" && p(e);
     },
-    [r, _]
-  ), p = i.useMemo(() => i.Children.toArray(c).filter(i.isValidElement), [c]), v = i.useMemo(() => {
+    [t, p]
+  ), b = i.useMemo(() => i.Children.toArray(c).filter(i.isValidElement), [c]), u = i.useMemo(() => {
     const e = [];
-    return p.forEach((t) => {
-      const o = t.props;
-      e.push({ id: o.id, label: o.children, disabled: o.disabled });
+    return b.forEach((r) => {
+      const l = r.props;
+      e.push({ id: l.id, label: l.children, disabled: l.disabled });
     }), e;
-  }, [p]), g = r === "dropdown" && f && v.length > 1, z = v.filter((e) => e.id !== x), j = (e) => {
+  }, [b]), h = t === "dropdown" && I && u.length > 1, j = u.filter((e) => e.id !== x), A = (e) => {
     e && E(e);
-  };
-  return V(() => {
-    if (r !== "dropdown") return;
+  }, a = L(() => {
+    const e = d.current, r = m.current;
+    if (!e || !r || r.clientWidth === 0) return;
+    const l = s["tedi-tabs__list--overflow"], w = r.classList.contains(l);
+    w && r.classList.remove(l);
+    const P = r.scrollWidth;
+    w && r.classList.add(l), M(P > e.clientWidth);
+  }, []);
+  return B(() => {
+    t === "dropdown" && a();
+  }, [t, a, b]), D(() => {
+    if (t !== "dropdown") return;
     const e = d.current;
-    !e || m.current || (u.current = e.scrollWidth, e.scrollWidth > e.clientWidth && e.clientWidth > 0 && b(!0));
-  }, [r, f, p]), B(() => {
-    if (r !== "dropdown") return;
-    const e = w.current, t = d.current;
-    if (!e || !t) return;
-    const o = () => {
-      m.current ? u.current <= e.clientWidth && b(!1) : t.scrollWidth > t.clientWidth && t.clientWidth > 0 && (u.current = t.scrollWidth, b(!0));
-    }, y = new ResizeObserver(o);
-    return y.observe(e), () => y.disconnect();
-  }, [r]), /* @__PURE__ */ s(F, { visibility: C, children: /* @__PURE__ */ h(
+    if (!e) return;
+    const r = new ResizeObserver(a);
+    return r.observe(e), () => r.disconnect();
+  }, [t, a]), /* @__PURE__ */ o(q, { visibility: R, children: /* @__PURE__ */ f(
     "div",
     {
-      ref: w,
-      className: R(l["tedi-tabs__list-wrapper"], {
-        [l["tedi-tabs__list-wrapper--scroll-fade-left"]]: r === "scroll" && I,
-        [l["tedi-tabs__list-wrapper--scroll-fade-right"]]: r === "scroll" && M
+      ref: d,
+      className: _(s["tedi-tabs__list-wrapper"], {
+        [s["tedi-tabs__list-wrapper--scroll-fade-left"]]: t === "scroll" && O,
+        [s["tedi-tabs__list-wrapper--scroll-fade-right"]]: t === "scroll" && W
       }),
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "div",
           {
-            ref: k,
+            ref: z,
             "data-name": "tabs-list",
             role: "tablist",
-            "aria-label": L,
-            "aria-labelledby": N,
-            className: R(
-              l["tedi-tabs__list"],
-              { [l["tedi-tabs__list--overflow"]]: g },
-              { [l["tedi-tabs__list--scroll"]]: r === "scroll" },
-              W
+            "aria-label": S,
+            "aria-labelledby": C,
+            className: _(
+              s["tedi-tabs__list"],
+              { [s["tedi-tabs__list--overflow"]]: h },
+              { [s["tedi-tabs__list--scroll"]]: t === "scroll" },
+              y
             ),
-            onScroll: r === "scroll" ? O : void 0,
+            onScroll: t === "scroll" ? k : void 0,
             children: c
           }
         ),
-        g && /* @__PURE__ */ s("div", { className: l["tedi-tabs__more-wrapper"], children: /* @__PURE__ */ h(a, { placement: "bottom-end", children: [
-          /* @__PURE__ */ s(a.Trigger, { children: /* @__PURE__ */ h("button", { "data-name": "tabs-more-btn", type: "button", className: l["tedi-tabs__more-btn"], children: [
-            T("tabs.more"),
-            /* @__PURE__ */ s(D, { name: "expand_more", size: 18 })
+        h && /* @__PURE__ */ o("div", { className: s["tedi-tabs__more-wrapper"], children: /* @__PURE__ */ f(n, { placement: "bottom-end", children: [
+          /* @__PURE__ */ o(n.Trigger, { children: /* @__PURE__ */ f("button", { "data-name": "tabs-more-btn", type: "button", className: s["tedi-tabs__more-btn"], children: [
+            N ?? T("tabs.more"),
+            /* @__PURE__ */ o(F, { name: "expand_more", size: 18 })
           ] }) }),
-          /* @__PURE__ */ s(a.Content, { children: z.map((e, t) => /* @__PURE__ */ s(
-            a.Item,
+          /* @__PURE__ */ o(n.Content, { children: j.map((e, r) => /* @__PURE__ */ o(
+            n.Item,
             {
-              index: t,
+              index: r,
               disabled: e.disabled,
-              onClick: () => j(e.id),
+              onClick: () => A(e.id),
               children: e.label
             },
             e.id
@@ -96,7 +98,7 @@ const J = (S) => {
     }
   ) });
 };
-J.displayName = "TabsList";
+K.displayName = "TabsList";
 export {
-  J as TabsList
+  K as TabsList
 };