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

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

@@ -1,132 +1,279 @@
-import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import g from "../../../../../external/classnames/index.es.js";
-import { forwardRef as D, useMemo as b, useState as E, useCallback as y, useId as F } from "react";
-import { Icon as G } from "../../base/icon/icon.es.js";
-import { Text as S } from "../../base/typography/text/text.es.js";
-import { Button as z } from "../../buttons/button/button.es.js";
-import { Select as H } from "../../form/select/select.es.js";
+import { jsxs as c, jsx as i, Fragment as re } from "react/jsx-runtime";
+import x from "../../../../../external/classnames/index.es.js";
+import { forwardRef as Be, useMemo as f, useState as I, useEffect as E, useCallback as le, useId as Te, useRef as A } from "react";
+import { Icon as V } from "../../base/icon/icon.es.js";
+import { Text as se } from "../../base/typography/text/text.es.js";
+import { Button as H } from "../../buttons/button/button.es.js";
+import { Select as Ie } from "../../form/select/select.es.js";
 import a from "./pagination.module.scss.es.js";
-import { usePagination as J } from "./use-pagination.es.js";
-import { useLabels as K } from "../../../providers/label-provider/use-labels.es.js";
-const Q = D((A, L) => {
+import { PaginationMobileModal as oe } from "./pagination-mobile-modal/pagination-mobile-modal.es.js";
+import { usePagination as Ee } from "./use-pagination.es.js";
+import { useBreakpointProps as Ve } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as He } from "../../../providers/label-provider/use-labels.es.js";
+import je, { isBreakpointBelow as Ke } from "../../../helpers/hooks/use-breakpoint.es.js";
+const de = ["xs", "sm", "md", "lg", "xl", "xxl"], j = (p, N) => p === void 0 || p === !1 ? !1 : p === !0 ? !0 : N ? de.indexOf(N) < de.indexOf(p) : !1, De = Be((p, N) => {
+  var ae;
   const {
-    pageCount: o,
-    page: u,
-    defaultPage: C = 1,
-    onPageChange: p,
-    totalItems: f,
-    pageSize: m,
-    pageSizeOptions: s,
-    onPageSizeChange: c,
-    boundaryCount: P = 1,
-    siblingCount: w = 1,
-    labels: h,
-    className: k
-  } = A, { getLabel: t } = K(), n = b(
+    pageCount: r,
+    page: _,
+    defaultPage: pe = 1,
+    onPageChange: z,
+    totalItems: K,
+    pageSize: g,
+    pageSizeOptions: h,
+    onPageSizeChange: u,
+    labels: D,
+    hideResults: ce = !1,
+    hidePageSize: ge = !1,
+    hidePager: ue = !1,
+    className: be
+  } = p, { getCurrentBreakpointProps: me } = Ve(p.defaultServerBreakpoint), {
+    boundaryCount: fe = 1,
+    siblingCount: _e = 1,
+    background: F = "white",
+    borders: he = "top",
+    showPrevNextButtons: U = !1,
+    showEdgeNavLabels: M = !1,
+    previousIcon: ve = "arrow_back",
+    nextIcon: Se = "arrow_forward",
+    arrowVariant: Ne = "default"
+  } = me(p), { getLabel: s } = He(), y = je(), v = Ke(y, "md"), t = f(
     () => ({
-      ariaLabel: t("pagination.title"),
-      previous: t("pagination.prev-page"),
-      next: t("pagination.next-page"),
-      pageAriaLabel: (e) => t("pagination.page", e, !1),
-      currentPageAriaLabel: (e) => t("pagination.page", e, !0),
-      results: (e) => t("pagination.results", e),
-      pageSize: t("pagination.page-size"),
-      ...h
+      ariaLabel: s("pagination.title"),
+      previous: s("pagination.prev-page"),
+      next: s("pagination.next-page"),
+      pageAriaLabel: (e) => s("pagination.page", e, !1),
+      currentPageAriaLabel: (e) => s("pagination.page", e, !0),
+      results: (e) => s("pagination.results", e),
+      pageSize: s("pagination.page-size"),
+      pageStatus: (e, n) => s("pagination.page-status", e, n),
+      ...D
     }),
-    [t, h]
-  ), [x, I] = E(C), _ = u ?? x, O = J({ page: _, pageCount: o, boundaryCount: P, siblingCount: w }), N = y(
+    [s, D]
+  ), [L, R] = I(pe), ze = _ ?? L, o = r > 0 ? Math.max(1, Math.min(r, ze)) : 1;
+  E(() => {
+    _ === void 0 && (r > 0 && L > r ? R(r) : L < 1 && R(1));
+  }, [_, r, L]);
+  const P = Ee({ page: o, pageCount: r, boundaryCount: fe, siblingCount: _e }), O = le(
     (e) => {
-      e === _ || e < 1 || e > o || (u === void 0 && I(e), p == null || p(e));
+      e !== null && (e === o || e < 1 || e > r || (_ === void 0 && R(e), z == null || z(e)));
     },
-    [_, p, u, o]
-  ), j = F(), d = b(
-    () => Array.isArray(s) ? s.map((e) => ({
-      value: String(e),
-      label: String(e)
-    })) : [],
-    [s]
-  ), R = b(() => m === void 0 ? d[0] ?? null : d.find((e) => e.value === String(m)) ?? null, [m, d]), $ = y(
+    [o, z, _, r]
+  ), ye = Te(), S = f(
+    () => Array.isArray(h) ? h.map(
+      (e) => typeof e == "number" ? { value: e, label: String(e) } : e
+    ) : [],
+    [h]
+  ), w = f(
+    () => S.map((e) => ({ value: String(e.value), label: e.label })),
+    [S]
+  ), $ = f(() => g === void 0 ? w[0] ?? null : w.find((e) => e.value === String(g)) ?? null, [g, w]), Le = le(
     (e) => {
-      const l = Array.isArray(e) ? e[0] : e;
-      l && "value" in l && (c == null || c(Number(l.value)));
+      const n = Array.isArray(e) ? e[0] : e;
+      n && "value" in n && (u == null || u(Number(n.value)));
     },
-    [c]
-  ), B = g(a["tedi-pagination"], k), M = f !== void 0, T = Array.isArray(s) && s.length > 0;
-  return /* @__PURE__ */ v("div", { ref: L, className: B, "data-name": "tedi-pagination", children: [
-    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-start"], children: M && /* @__PURE__ */ i(S, { className: a["tedi-pagination__results"], color: "secondary", modifiers: "small", children: n.results(f) }) }),
-    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-center"], children: o > 1 && /* @__PURE__ */ i("nav", { "aria-label": n.ariaLabel, className: a["tedi-pagination__nav"], children: /* @__PURE__ */ i("ul", { className: a["tedi-pagination__list"], children: O.map((e, l) => {
-      if (e.type === "ellipsis")
-        return /* @__PURE__ */ i(
-          "li",
-          {
-            className: g(a["tedi-pagination__item"], a["tedi-pagination__item--ellipsis"]),
-            "aria-hidden": "true",
-            children: "…"
-          },
-          `ellipsis-${l}`
-        );
-      if (e.type === "previous" || e.type === "next") {
-        if (e.disabled) return null;
-        const U = e.type === "previous" ? n.previous : n.next, q = e.type === "previous" ? "arrow_back" : "arrow_forward";
+    [u]
+  ), Pe = $ ? Number($.value) : g ?? 0, q = ((ae = S.find((e) => e.value === g)) == null ? void 0 : ae.label) ?? (g !== void 0 ? String(g) : ""), Oe = f(
+    () => Array.from({ length: r }, (e, n) => {
+      const l = n + 1;
+      return {
+        value: l,
+        label: String(l),
+        ariaLabel: l === o ? t.currentPageAriaLabel(l) : t.pageAriaLabel(l)
+      };
+    }),
+    [r, o, t]
+  ), we = f(
+    () => S.map((e) => ({
+      value: e.value,
+      label: e.label,
+      ariaLabel: `${t.pageSize} ${e.label}`
+    })),
+    [S, t]
+  ), ke = j(ce, y), Ce = j(ge, y), xe = j(ue, y), G = !ke && K !== void 0, B = !Ce && Array.isArray(h) && h.length > 0, T = !xe && r > 1, Ae = x(
+    a["tedi-pagination"],
+    a[`tedi-pagination--bg-${F}`],
+    F !== "transparent" && a[`tedi-pagination--borders-${he}`],
+    {
+      [a["tedi-pagination--no-pager"]]: !T,
+      [a["tedi-pagination--no-results"]]: !G,
+      [a["tedi-pagination--no-page-size"]]: !B
+    },
+    be
+  ), [b, J] = I(!1), Q = A(null), W = A(b);
+  E(() => {
+    var e;
+    W.current && !b && ((e = Q.current) == null || e.focus()), W.current = b;
+  }, [b]);
+  const [m, X] = I(!1), Y = A(null), Z = A(m);
+  E(() => {
+    var e;
+    Z.current && !m && ((e = Y.current) == null || e.focus()), Z.current = m;
+  }, [m]);
+  const Me = r > 1 ? t.pageStatus(o, r) : "", Re = `${`${o} / ${r}`}, ${t.ariaLabel}`, k = P[0], C = P[P.length - 1], $e = P.slice(1, -1), ee = (e, n, l, d) => {
+    const ie = a[`tedi-pagination__button--nav-${e}`];
+    if (Ne === "primary")
+      return /* @__PURE__ */ i(
+        H,
+        {
+          type: "button",
+          visualType: "primary",
+          size: "small",
+          iconLeft: e === "previous" ? l : void 0,
+          iconRight: e === "next" ? l : void 0,
+          className: ie,
+          disabled: n == null ? void 0 : n.disabled,
+          onClick: () => O((n == null ? void 0 : n.page) ?? null),
+          children: d
+        }
+      );
+    const ne = /* @__PURE__ */ i(V, { name: l, size: 18, color: "inherit" }), te = /* @__PURE__ */ i("span", { className: a["tedi-pagination__nav-label"], children: d });
+    return /* @__PURE__ */ i(
+      H,
+      {
+        className: x(a["tedi-pagination__button"], a["tedi-pagination__button--nav"], ie, {
+          [a["tedi-pagination__button--nav-link"]]: M
+        }),
+        "aria-label": d,
+        disabled: n == null ? void 0 : n.disabled,
+        onClick: () => O((n == null ? void 0 : n.page) ?? null),
+        visualType: "neutral",
+        size: "small",
+        icon: M ? void 0 : l,
+        children: M && (e === "previous" ? /* @__PURE__ */ c(re, { children: [
+          ne,
+          te
+        ] }) : /* @__PURE__ */ c(re, { children: [
+          te,
+          ne
+        ] }))
+      }
+    );
+  };
+  return /* @__PURE__ */ c("div", { ref: N, className: Ae, "data-name": "tedi-pagination", children: [
+    /* @__PURE__ */ i("span", { className: a["tedi-pagination__status"], role: "status", "aria-live": "polite", "aria-atomic": "true", children: Me }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-start"], children: G && /* @__PURE__ */ i(se, { className: a["tedi-pagination__results"], color: "secondary", modifiers: "small", children: t.results(K) }) }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-center"], children: T && /* @__PURE__ */ c("nav", { "aria-label": t.ariaLabel, className: a["tedi-pagination__nav"], children: [
+      !U && (k != null && k.disabled) ? null : ee("previous", k, ve, t.previous),
+      !v && /* @__PURE__ */ i("ul", { className: a["tedi-pagination__list"], children: $e.map((e, n) => {
+        const l = `slot-${n}`;
+        if (e.type === "ellipsis")
+          return /* @__PURE__ */ i(
+            "li",
+            {
+              className: x(a["tedi-pagination__item"], a["tedi-pagination__item--ellipsis"]),
+              "aria-hidden": "true",
+              children: "…"
+            },
+            l
+          );
+        const d = e.page;
         return /* @__PURE__ */ i("li", { className: a["tedi-pagination__item"], children: /* @__PURE__ */ i(
-          z,
+          H,
           {
             type: "button",
-            className: g(a["tedi-pagination__button"], a["tedi-pagination__button--nav"]),
-            "aria-label": U,
-            onClick: () => e.page !== null && N(e.page),
+            className: x(a["tedi-pagination__button"], {
+              [a["tedi-pagination__button--selected"]]: e.selected
+            }),
+            "aria-label": e.selected ? t.currentPageAriaLabel(d) : t.pageAriaLabel(d),
+            "aria-current": e.selected ? "page" : void 0,
+            onClick: () => O(d),
             noStyle: !0,
-            children: /* @__PURE__ */ i(G, { name: q, size: 18, color: "brand" })
+            children: /* @__PURE__ */ i("span", { className: a["tedi-pagination__button-label"], children: d }, d)
           }
-        ) }, e.type);
-      }
-      const r = e.page;
-      return /* @__PURE__ */ i("li", { className: a["tedi-pagination__item"], children: /* @__PURE__ */ i(
-        z,
+        ) }, l);
+      }) }),
+      v && /* @__PURE__ */ c(
+        "button",
         {
+          ref: Q,
           type: "button",
-          className: g(a["tedi-pagination__button"], {
-            [a["tedi-pagination__button--selected"]]: e.selected
-          }),
-          "aria-label": e.selected ? n.currentPageAriaLabel(r) : n.pageAriaLabel(r),
-          "aria-current": e.selected ? "page" : void 0,
-          onClick: () => N(r),
-          noStyle: !0,
-          children: r
+          className: a["tedi-pagination__mobile-trigger"],
+          "aria-haspopup": "dialog",
+          "aria-expanded": b,
+          "aria-label": Re,
+          onClick: () => J(!0),
+          children: [
+            /* @__PURE__ */ c("span", { className: a["tedi-pagination__mobile-trigger-label"], "aria-hidden": "true", children: [
+              /* @__PURE__ */ i("strong", { children: o }),
+              /* @__PURE__ */ i("span", { children: "/" }),
+              /* @__PURE__ */ i("span", { children: r })
+            ] }),
+            /* @__PURE__ */ i(V, { name: "arrow_drop_down", size: 24, color: "inherit" })
+          ]
         }
-      ) }, r);
-    }) }) }) }),
-    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-end"], children: T && /* @__PURE__ */ v("div", { className: a["tedi-pagination__page-size"], children: [
+      ),
+      !U && (C != null && C.disabled) ? null : ee("next", C, Se, t.next)
+    ] }) }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-end"], children: B && /* @__PURE__ */ c("div", { className: a["tedi-pagination__page-size"], children: [
       /* @__PURE__ */ i(
-        S,
+        se,
         {
           className: a["tedi-pagination__page-size-label"],
           color: "secondary",
           modifiers: "small",
           element: "span",
-          children: n.pageSize
+          children: t.pageSize
         }
       ),
-      /* @__PURE__ */ i(
-        H,
+      v ? /* @__PURE__ */ c(
+        "button",
         {
-          id: `tedi-pagination-page-size-${j}`,
+          ref: Y,
+          type: "button",
+          className: a["tedi-pagination__mobile-trigger"],
+          "aria-haspopup": "dialog",
+          "aria-expanded": m,
+          "aria-label": `${t.pageSize} ${q}`,
+          onClick: () => X(!0),
+          children: [
+            /* @__PURE__ */ i("span", { className: a["tedi-pagination__mobile-trigger-label"], "aria-hidden": "true", children: q }),
+            /* @__PURE__ */ i(V, { name: "arrow_drop_down", size: 24, color: "inherit" })
+          ]
+        }
+      ) : /* @__PURE__ */ i(
+        Ie,
+        {
+          id: `tedi-pagination-page-size-${ye}`,
           className: a["tedi-pagination__select"],
-          label: n.pageSize,
+          label: t.pageSize,
           hideLabel: !0,
           size: "small",
-          options: d,
-          value: R,
-          onChange: $,
+          options: w,
+          value: $,
+          onChange: Le,
           isSearchable: !1,
           isClearable: !1
         }
       )
-    ] }) })
+    ] }) }),
+    v && T && /* @__PURE__ */ i(
+      oe,
+      {
+        open: b,
+        onOpenChange: J,
+        options: Oe,
+        selectedValue: o,
+        onSelect: O,
+        ariaLabel: t.ariaLabel,
+        ariaCurrent: "page"
+      }
+    ),
+    v && B && /* @__PURE__ */ i(
+      oe,
+      {
+        open: m,
+        onOpenChange: X,
+        options: we,
+        selectedValue: Pe,
+        onSelect: (e) => u == null ? void 0 : u(e),
+        ariaLabel: t.pageSize,
+        title: t.pageSize
+      }
+    )
   ] });
 });
-Q.displayName = "Pagination";
+De.displayName = "Pagination";
 export {
-  Q as Pagination,
-  Q as default
+  De as Pagination
 };

package/src/tedi/components/navigation/pagination/pagination.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-pagination":"tedi-pagination-96c6fc62","tedi-pagination__slot-start":"tedi-pagination__slot-start-846e7900","tedi-pagination__slot-center":"tedi-pagination__slot-center-e489623b","tedi-pagination__slot-end":"tedi-pagination__slot-end-3f4f5848","tedi-pagination__results":"tedi-pagination__results-29d9108c","tedi-pagination__nav":"tedi-pagination__nav-5f414114","tedi-pagination__list":"tedi-pagination__list-03467ce1","tedi-pagination__item":"tedi-pagination__item-46985c58","tedi-pagination__item--ellipsis":"tedi-pagination__item--ellipsis-85f798f5","tedi-pagination__button":"tedi-pagination__button-d06c27d4","tedi-pagination__button--selected":"tedi-pagination__button--selected-cb151c7f","tedi-pagination__button--nav":"tedi-pagination__button--nav-2f74eea2","tedi-pagination__page-size":"tedi-pagination__page-size-d1fa6f9d","tedi-pagination__page-size-label":"tedi-pagination__page-size-label-3dc2d141","tedi-pagination__select":"tedi-pagination__select-435e167e"};exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-pagination":"tedi-pagination-96c6fc62","tedi-pagination--no-pager":"tedi-pagination--no-pager-d61e7fcb","tedi-pagination--bg-white":"tedi-pagination--bg-white-44075d0a","tedi-pagination--borders-top":"tedi-pagination--borders-top-5855a53b","tedi-pagination--borders-bottom":"tedi-pagination--borders-bottom-ea0efc4e","tedi-pagination--borders-both":"tedi-pagination--borders-both-720d1b66","tedi-pagination--bg-transparent":"tedi-pagination--bg-transparent-f7d24de5","tedi-pagination--no-results":"tedi-pagination--no-results-c803e6d7","tedi-pagination__slot-start":"tedi-pagination__slot-start-846e7900","tedi-pagination__slot-center":"tedi-pagination__slot-center-e489623b","tedi-pagination--no-page-size":"tedi-pagination--no-page-size-899b0ae0","tedi-pagination__slot-end":"tedi-pagination__slot-end-3f4f5848","tedi-pagination__status":"tedi-pagination__status-c9307f8c","tedi-pagination__results":"tedi-pagination__results-29d9108c","tedi-pagination__nav":"tedi-pagination__nav-5f414114","tedi-pagination__list":"tedi-pagination__list-03467ce1","tedi-pagination__item":"tedi-pagination__item-46985c58","tedi-pagination__item--ellipsis":"tedi-pagination__item--ellipsis-85f798f5","tedi-pagination__button":"tedi-pagination__button-d06c27d4","tedi-pagination__button--selected":"tedi-pagination__button--selected-cb151c7f","tedi-pagination__button--nav":"tedi-pagination__button--nav-2f74eea2","tedi-pagination__button--nav-link":"tedi-pagination__button--nav-link-878004e1","tedi-pagination__nav-label":"tedi-pagination__nav-label-6ab0736b","tedi-pagination__button--nav-previous":"tedi-pagination__button--nav-previous-1e74ca69","tedi-pagination__button--nav-next":"tedi-pagination__button--nav-next-80e53bed","tedi-pagination__mobile-trigger":"tedi-pagination__mobile-trigger-bb1271ab","tedi-pagination__mobile-trigger-label":"tedi-pagination__mobile-trigger-label-0b2aaebb","tedi-pagination__page-size":"tedi-pagination__page-size-d1fa6f9d","tedi-pagination__page-size-label":"tedi-pagination__page-size-label-3dc2d141","tedi-pagination__select":"tedi-pagination__select-435e167e","tedi-pagination__button-label":"tedi-pagination__button-label-e70ad8bf","tedi-pagination-label-in":"tedi-pagination-label-in-d1e2074e"};exports.default=i;

package/src/tedi/components/navigation/pagination/pagination.module.scss.es.js

@@ -1,8 +1,17 @@
 const i = {
   "tedi-pagination": "tedi-pagination-96c6fc62",
+  "tedi-pagination--no-pager": "tedi-pagination--no-pager-d61e7fcb",
+  "tedi-pagination--bg-white": "tedi-pagination--bg-white-44075d0a",
+  "tedi-pagination--borders-top": "tedi-pagination--borders-top-5855a53b",
+  "tedi-pagination--borders-bottom": "tedi-pagination--borders-bottom-ea0efc4e",
+  "tedi-pagination--borders-both": "tedi-pagination--borders-both-720d1b66",
+  "tedi-pagination--bg-transparent": "tedi-pagination--bg-transparent-f7d24de5",
+  "tedi-pagination--no-results": "tedi-pagination--no-results-c803e6d7",
   "tedi-pagination__slot-start": "tedi-pagination__slot-start-846e7900",
   "tedi-pagination__slot-center": "tedi-pagination__slot-center-e489623b",
+  "tedi-pagination--no-page-size": "tedi-pagination--no-page-size-899b0ae0",
   "tedi-pagination__slot-end": "tedi-pagination__slot-end-3f4f5848",
+  "tedi-pagination__status": "tedi-pagination__status-c9307f8c",
   "tedi-pagination__results": "tedi-pagination__results-29d9108c",
   "tedi-pagination__nav": "tedi-pagination__nav-5f414114",
   "tedi-pagination__list": "tedi-pagination__list-03467ce1",
@@ -11,9 +20,17 @@ const i = {
   "tedi-pagination__button": "tedi-pagination__button-d06c27d4",
   "tedi-pagination__button--selected": "tedi-pagination__button--selected-cb151c7f",
   "tedi-pagination__button--nav": "tedi-pagination__button--nav-2f74eea2",
+  "tedi-pagination__button--nav-link": "tedi-pagination__button--nav-link-878004e1",
+  "tedi-pagination__nav-label": "tedi-pagination__nav-label-6ab0736b",
+  "tedi-pagination__button--nav-previous": "tedi-pagination__button--nav-previous-1e74ca69",
+  "tedi-pagination__button--nav-next": "tedi-pagination__button--nav-next-80e53bed",
+  "tedi-pagination__mobile-trigger": "tedi-pagination__mobile-trigger-bb1271ab",
+  "tedi-pagination__mobile-trigger-label": "tedi-pagination__mobile-trigger-label-0b2aaebb",
   "tedi-pagination__page-size": "tedi-pagination__page-size-d1fa6f9d",
   "tedi-pagination__page-size-label": "tedi-pagination__page-size-label-3dc2d141",
-  "tedi-pagination__select": "tedi-pagination__select-435e167e"
+  "tedi-pagination__select": "tedi-pagination__select-435e167e",
+  "tedi-pagination__button-label": "tedi-pagination__button-label-e70ad8bf",
+  "tedi-pagination-label-in": "tedi-pagination-label-in-d1e2074e"
 };
 export {
   i as default

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),l=require("../../../../../../external/classnames/index.cjs.js"),i=require("../tabs.module.scss.cjs.js"),u=require("../tabs-context.cjs.js"),t=n=>{const{id:e,children:a,className:s}=n,{currentTab:o}=u.useTabsContext();return e&&o!==e?null:r.jsx("div",{"data-name":"tabs-content",id:e?`${e}-panel`:void 0,role:"tabpanel","aria-labelledby":e??void 0,className:l.default(i.default["tedi-tabs__content"],s),children:a})};t.displayName="TabsContent";exports.TabsContent=t;exports.default=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../../../../external/classnames/index.cjs.js"),l=require("../tabs.module.scss.cjs.js"),d=require("../tabs-context.cjs.js"),t=n=>{const{id:e,children:a,className:s}=n,{currentTab:o}=d.useTabsContext();return e&&o!==e?null:r.jsx("div",{"data-name":"tabs-content",id:e?`${e}-panel`:void 0,role:"tabpanel","aria-labelledby":e??void 0,className:i.default(l.default["tedi-tabs__content"],s),children:a})};t.displayName="TabsContent";exports.TabsContent=t;

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

@@ -1,23 +1,22 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import r from "../../../../../../external/classnames/index.es.js";
-import l from "../tabs.module.scss.es.js";
-import { useTabsContext as i } from "../tabs-context.es.js";
+import i from "../tabs.module.scss.es.js";
+import { useTabsContext as l } from "../tabs-context.es.js";
 const m = (a) => {
-  const { id: t, children: e, className: s } = a, { currentTab: n } = i();
-  return t && n !== t ? null : /* @__PURE__ */ o(
+  const { id: t, children: e, className: n } = a, { currentTab: o } = l();
+  return t && o !== t ? null : /* @__PURE__ */ s(
     "div",
     {
       "data-name": "tabs-content",
       id: t ? `${t}-panel` : void 0,
       role: "tabpanel",
       "aria-labelledby": t ?? void 0,
-      className: r(l["tedi-tabs__content"], s),
+      className: r(i["tedi-tabs__content"], n),
       children: e
     }
   );
 };
 m.displayName = "TabsContent";
 export {
-  m as TabsContent,
-  m as default
+  m as TabsContent
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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"),h=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(),w=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:m,canScrollStart:C,canScrollEnd:M,handleScroll:N}=A.useScrollFade({direction:"horizontal"}),O=t.useCallback(e=>{c.current=e,r==="scroll"&&m(e)},[r,m]),p=t.useMemo(()=>t.Children.toArray(a).filter(t.isValidElement),[a]),_=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]),v=r==="dropdown"&&d&&_.length>1,E=_.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=w.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:w,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"]]:v},{[i.default["tedi-tabs__list--scroll"]]:r==="scroll"},S),onScroll:r==="scroll"?N:void 0,children:a}),v&&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))})]})})]})})};h.displayName="TabsList";exports.TabsList=h;exports.default=h;
+"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;

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

@@ -1,9 +1,9 @@
 import { jsx as s, jsxs as h } from "react/jsx-runtime";
 import R from "../../../../../../external/classnames/index.es.js";
-import i, { useRef as a, useState as A, useCallback as P, useLayoutEffect as V, useEffect as B } from "react";
+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 n } from "../../../overlays/dropdown/dropdown.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";
@@ -16,7 +16,7 @@ const J = (S) => {
     "aria-labelledby": N,
     printVisibility: C = "show",
     overflowMode: r = "dropdown"
-  } = S, { getLabel: T } = G(), { currentTab: x, setCurrentTab: E } = q(), w = a(null), d = a(null), [f, b] = A(!1), m = a(!1), u = a(0);
+  } = 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: _,
@@ -76,13 +76,13 @@ const J = (S) => {
             children: c
           }
         ),
-        g && /* @__PURE__ */ s("div", { className: l["tedi-tabs__more-wrapper"], children: /* @__PURE__ */ h(n, { placement: "bottom-end", children: [
-          /* @__PURE__ */ s(n.Trigger, { children: /* @__PURE__ */ h("button", { "data-name": "tabs-more-btn", type: "button", className: l["tedi-tabs__more-btn"], children: [
+        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 })
           ] }) }),
-          /* @__PURE__ */ s(n.Content, { children: z.map((e, t) => /* @__PURE__ */ s(
-            n.Item,
+          /* @__PURE__ */ s(a.Content, { children: z.map((e, t) => /* @__PURE__ */ s(
+            a.Item,
             {
               index: t,
               disabled: e.disabled,
@@ -98,6 +98,5 @@ const J = (S) => {
 };
 J.displayName = "TabsList";
 export {
-  J as TabsList,
-  J as default
+  J as TabsList
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),_=require("../../../../../../external/classnames/index.cjs.js"),m=require("../../../base/icon/icon.cjs.js"),a=require("../tabs.module.scss.cjs.js"),x=require("../tabs-context.cjs.js"),q=require("../tabs-helpers.cjs.js"),r=c=>{const{id:e,children:d,icon:i,disabled:t=!1,className:u}=c,{currentTab:b,setCurrentTab:n}=x.useTabsContext(),s=b===e,g=()=>{t||n(e)},T=f=>{const o=q.navigateTablist(f);o&&n(o.id)};return l.jsxs("button",{"data-name":"tabs-trigger",id:e,role:"tab",type:"button","aria-selected":s,"aria-controls":`${e}-panel`,tabIndex:s?0:-1,disabled:t,className:_.default(a.default["tedi-tabs__trigger"],{[a.default["tedi-tabs__trigger--selected"]]:s},{[a.default["tedi-tabs__trigger--disabled"]]:t},u),onClick:g,onKeyDown:T,children:[i&&l.jsx(m.Icon,{name:i,size:18,color:"inherit"}),d]})};r.displayName="TabsTrigger";exports.TabsTrigger=r;exports.default=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),m=require("../../../../../../external/classnames/index.cjs.js"),x=require("../../../base/icon/icon.cjs.js"),r=require("../tabs.module.scss.cjs.js"),_=require("../tabs-context.cjs.js"),q=require("../tabs-helpers.cjs.js"),c=l=>{const{id:e,children:d,icon:a,disabled:t=!1,className:b}=l,{currentTab:u,setCurrentTab:i}=_.useTabsContext(),s=u===e,g=()=>{t||i(e)},T=f=>{const n=q.navigateTablist(f);n&&i(n.id)};return o.jsxs("button",{"data-name":"tabs-trigger",id:e,role:"tab",type:"button","aria-selected":s,"aria-controls":`${e}-panel`,tabIndex:s?0:-1,disabled:t,className:m.default(r.default["tedi-tabs__trigger"],{[r.default["tedi-tabs__trigger--selected"]]:s},{[r.default["tedi-tabs__trigger--disabled"]]:t},b),onClick:g,onKeyDown:T,children:[a&&o.jsx(x.Icon,{name:a,size:18,color:"inherit"}),d]})};c.displayName="TabsTrigger";exports.TabsTrigger=c;

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

@@ -1,17 +1,17 @@
-import { jsxs as f, jsx as p } from "react/jsx-runtime";
+import { jsxs as p, jsx as f } from "react/jsx-runtime";
 import T from "../../../../../../external/classnames/index.es.js";
 import { Icon as u } from "../../../base/icon/icon.es.js";
-import a from "../tabs.module.scss.es.js";
+import s from "../tabs.module.scss.es.js";
 import { useTabsContext as _ } from "../tabs-context.es.js";
 import { navigateTablist as h } from "../tabs-helpers.es.js";
 const x = (n) => {
-  const { id: e, children: l, icon: s, disabled: t = !1, className: c } = n, { currentTab: d, setCurrentTab: i } = _(), r = d === e, m = () => {
+  const { id: e, children: c, icon: a, disabled: t = !1, className: l } = n, { currentTab: d, setCurrentTab: i } = _(), r = d === e, m = () => {
     t || i(e);
   }, b = (g) => {
     const o = h(g);
     o && i(o.id);
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(
     "button",
     {
       "data-name": "tabs-trigger",
@@ -23,22 +23,21 @@ const x = (n) => {
       tabIndex: r ? 0 : -1,
       disabled: t,
       className: T(
-        a["tedi-tabs__trigger"],
-        { [a["tedi-tabs__trigger--selected"]]: r },
-        { [a["tedi-tabs__trigger--disabled"]]: t },
-        c
+        s["tedi-tabs__trigger"],
+        { [s["tedi-tabs__trigger--selected"]]: r },
+        { [s["tedi-tabs__trigger--disabled"]]: t },
+        l
       ),
       onClick: m,
       onKeyDown: b,
       children: [
-        s && /* @__PURE__ */ p(u, { name: s, size: 18, color: "inherit" }),
-        l
+        a && /* @__PURE__ */ f(u, { name: a, size: 18, color: "inherit" }),
+        c
       ]
     }
   );
 };
 x.displayName = "TabsTrigger";
 export {
-  x as TabsTrigger,
-  x as default
+  x as TabsTrigger
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),f=require("./tabs.module.scss.cjs.js"),g=require("./tabs-content/tabs-content.cjs.js"),m=require("./tabs-context.cjs.js"),v=require("./tabs-list/tabs-list.cjs.js"),x=require("./tabs-trigger/tabs-trigger.cjs.js"),e=u=>{const{children:i,value:s,defaultValue:l,onChange:t,className:c}=u,[b,d]=o.useState(l||""),r=s??b,T=o.useCallback(a=>{a!==r&&(s===void 0&&d(a),t==null||t(a))},[s,r,t]);return n.jsx(m.TabsContext.Provider,{value:{currentTab:r,setCurrentTab:T},children:n.jsx("div",{"data-name":"tabs",className:q.default(f.default["tedi-tabs"],c),children:i})})};e.displayName="Tabs";e.List=v.TabsList;e.Trigger=x.TabsTrigger;e.Content=g.TabsContent;exports.Tabs=e;exports.default=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),g=require("./tabs.module.scss.cjs.js"),m=require("./tabs-content/tabs-content.cjs.js"),f=require("./tabs-context.cjs.js"),v=require("./tabs-list/tabs-list.cjs.js"),x=require("./tabs-trigger/tabs-trigger.cjs.js"),e=i=>{const{children:u,value:s,defaultValue:c,onChange:t,className:l}=i,[b,d]=o.useState(c||""),r=s??b,T=o.useCallback(a=>{a!==r&&(s===void 0&&d(a),t==null||t(a))},[s,r,t]);return n.jsx(f.TabsContext.Provider,{value:{currentTab:r,setCurrentTab:T},children:n.jsx("div",{"data-name":"tabs",className:q.default(g.default["tedi-tabs"],l),children:u})})};e.displayName="Tabs";e.List=v.TabsList;e.Trigger=x.TabsTrigger;e.Content=m.TabsContent;exports.Tabs=e;

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

@@ -25,15 +25,15 @@ export declare const Tabs: {
     (props: TabsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     List: {
-        (props: import('./tabs-list/tabs-list').TabsListProps): import("react/jsx-runtime").JSX.Element;
+        (props: import('.').TabsListProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Trigger: {
-        (props: import('./tabs-trigger/tabs-trigger').TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+        (props: import('.').TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Content: {
-        (props: import('./tabs-content/tabs-content').TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
+        (props: import('.').TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;
     };
 };