@tedi-design-system/react 18.0.0-rc.1 → 18.0.0-rc.11

package/src/tedi/components/layout/top-nav/top-nav.es.js

@@ -0,0 +1,171 @@
+import { jsx as u, jsxs as ae } from "react/jsx-runtime";
+import ue from "../../../../../external/classnames/index.es.js";
+import R, { useState as P, useEffect as g, useMemo as c, useCallback as ce, useRef as le, useId as me, Children as l, isValidElement as w, Fragment as D } from "react";
+import { MobileNav as de } from "../mobile-nav/mobile-nav.es.js";
+import { TopNavGroup as F } from "./components/top-nav-group/top-nav-group.es.js";
+import { TopNavItem as M } from "./components/top-nav-item/top-nav-item.es.js";
+import { TopNavSeparator as H } from "./components/top-nav-separator/top-nav-separator.es.js";
+import { TopNavSubItem as K } from "./components/top-nav-subitem/top-nav-subitem.es.js";
+import f from "./top-nav.module.scss.es.js";
+import { TopNavContext as fe } from "./top-nav-context.es.js";
+import { useBreakpoint as ve, isBreakpointBelow as be, BREAKPOINT_WIDTHS as V } from "../../../helpers/hooks/use-breakpoint.es.js";
+const he = (n) => {
+  if (!(n === void 0 || n === "none" || n === 0))
+    return typeof n == "string" && n !== "xs" && n in V ? V[n] : n;
+}, q = (n) => {
+  const r = [];
+  return l.forEach(n, (t) => {
+    if (w(t)) {
+      if (t.type === D) {
+        r.push(...q(t.props.children));
+        return;
+      }
+      (t.type === M || t.type === H) && r.push(t);
+    }
+  }), r;
+}, j = (n) => n.type === M, Ie = (n) => ({
+  children: n.props.children,
+  href: n.props.href,
+  isActive: n.props.isActive,
+  onClick: n.props.onClick
+}), $ = (n) => {
+  if (!n) return;
+  const r = [];
+  return l.forEach(n, (t) => {
+    if (!w(t)) return;
+    if (t.type === D) {
+      const s = $(t.props.children);
+      s && r.push(...s);
+      return;
+    }
+    if (t.type !== F) return;
+    const b = t.props, p = [];
+    l.forEach(b.children, (s) => {
+      w(s) && s.type === K && p.push(Ie(s));
+    }), p.length > 0 && r.push({ subHeading: b.title, subItems: p });
+  }), r.length > 0 ? r : void 0;
+}, v = (n) => {
+  const {
+    children: r,
+    ariaLabel: t,
+    mobileBreakpoint: b = "md",
+    isMobileOpen: p,
+    onMenuToggle: s,
+    showMobileOverlay: z = !0,
+    className: T,
+    id: J,
+    submenuFit: Q = "full",
+    maxWidth: U = "xxl"
+  } = n, X = ve(), C = be(X, b), h = p !== void 0, [Y, B] = P(!1), Z = h ? p : Y;
+  g(() => {
+    !h && !C && B(!1);
+  }, [C, h]);
+  const ee = (e) => {
+    h || B(e), s == null || s(e);
+  }, E = c(() => q(r), [r]), a = c(() => E.filter(j), [E]), O = (e) => !e.props.href && l.count(e.props.submenu) > 0, _ = c(() => {
+    const e = a.findIndex((o) => O(o) && o.props.isActive);
+    return e === -1 ? null : e;
+  }, [a]), [I, m] = P(_);
+  g(() => {
+    m(_);
+  }, [_]);
+  const A = ce(() => m(null), []), ne = c(() => ({ closeSubmenu: A }), [A]), x = le(null), y = me();
+  g(() => {
+    if (I === null) return;
+    const e = (i) => {
+      x.current && !x.current.contains(i.target) && m(null);
+    }, o = (i) => {
+      var S;
+      if (i.key !== "Escape") return;
+      const d = (S = x.current) == null ? void 0 : S.querySelector(
+        `[aria-controls="${CSS.escape(y)}"][aria-expanded="true"]`
+      );
+      d == null || d.focus(), m(null);
+    };
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", o), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", o);
+    };
+  }, [I, y]);
+  const W = (e, o) => O(e) ? I === o : !!e.props.isActive, L = c(
+    () => a.find((e, o) => W(e, o) && l.count(e.props.submenu) > 0),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [a, I]
+  ), te = c(
+    () => a.map((e) => ({
+      children: e.props.children,
+      disabled: e.props.disabled,
+      href: e.props.href,
+      icon: e.props.icon,
+      isActive: e.props.isActive,
+      onClick: e.props.onClick,
+      subItemGroups: $(e.props.submenu)
+    })),
+    [a]
+  );
+  if (C)
+    return /* @__PURE__ */ u(
+      de,
+      {
+        navItems: te,
+        ariaLabel: t,
+        isOpen: Z,
+        onClose: () => ee(!1),
+        showOverlay: z,
+        className: T
+      }
+    );
+  const G = Q === "content", N = he(U);
+  let oe = 0;
+  return /* @__PURE__ */ u(fe.Provider, { value: ne, children: /* @__PURE__ */ ae(
+    "nav",
+    {
+      ref: x,
+      id: J,
+      className: ue(f["tedi-top-nav"], T),
+      "aria-label": t,
+      "data-name": "top-nav",
+      children: [
+        /* @__PURE__ */ u("div", { className: f["tedi-top-nav__bar"], children: /* @__PURE__ */ u(
+          "ul",
+          {
+            className: f["tedi-top-nav__list"],
+            style: N !== void 0 ? { maxWidth: N } : void 0,
+            children: E.map((e, o) => {
+              if (j(e)) {
+                const i = oe++, d = l.count(e.props.submenu) > 0, S = O(e), re = W(e, i), k = e.props.onClick, se = S ? (ie) => {
+                  k == null || k(ie), m((pe) => pe === i ? null : i);
+                } : k;
+                return R.cloneElement(e, {
+                  key: o,
+                  hasSubmenu: d,
+                  renderSubmenuInline: G,
+                  isSubmenuOpen: re,
+                  panelId: y,
+                  onClick: se
+                });
+              }
+              return R.cloneElement(e, { key: o });
+            })
+          }
+        ) }),
+        !G && L && /* @__PURE__ */ u("div", { id: y, className: f["tedi-top-nav__submenu"], "data-name": "top-nav-submenu", children: /* @__PURE__ */ u(
+          "div",
+          {
+            className: f["tedi-top-nav__submenu-inner"],
+            style: N !== void 0 ? { maxWidth: N } : void 0,
+            children: L.props.submenu
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+v.displayName = "TopNav";
+v.Item = M;
+v.Group = F;
+v.SubItem = K;
+v.Separator = H;
+export {
+  v as TopNav,
+  v as default
+};

package/src/tedi/components/layout/top-nav/top-nav.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-top-nav":"tedi-top-nav-7985280d","tedi-top-nav__bar":"tedi-top-nav__bar-d7be6587","tedi-top-nav__list":"tedi-top-nav__list-1cdecbe8","tedi-top-nav__item":"tedi-top-nav__item-aa7109b8","tedi-top-nav__item--has-inline-submenu":"tedi-top-nav__item--has-inline-submenu-4d48fa95","tedi-top-nav__link":"tedi-top-nav__link-724c1ebc","tedi-top-nav__link--active":"tedi-top-nav__link--active-34580ede","tedi-top-nav__icon":"tedi-top-nav__icon-1ab6c34d","tedi-top-nav__chevron":"tedi-top-nav__chevron-e05880f8","tedi-top-nav__chevron--open":"tedi-top-nav__chevron--open-ef97d87b","tedi-top-nav__separator":"tedi-top-nav__separator-d1e8646d","tedi-top-nav__separator-line":"tedi-top-nav__separator-line-4777819a","tedi-top-nav__submenu":"tedi-top-nav__submenu-9b591c05","tedi-top-nav__submenu-inner":"tedi-top-nav__submenu-inner-7a7895b2","tedi-top-nav__submenu--inline":"tedi-top-nav__submenu--inline-b4debcfa","tedi-top-nav__submenu-inner--inline":"tedi-top-nav__submenu-inner--inline-c5cd3a64","tedi-top-nav__group":"tedi-top-nav__group-691df203","tedi-top-nav__group-title":"tedi-top-nav__group-title-70faf48a","tedi-top-nav__group-icon":"tedi-top-nav__group-icon-792cee8c","tedi-top-nav__group-list":"tedi-top-nav__group-list-88ee40bb","tedi-top-nav__subitem":"tedi-top-nav__subitem-d8c89fc6","tedi-top-nav__subitem-link":"tedi-top-nav__subitem-link-382e3910","tedi-top-nav__subitem-link--active":"tedi-top-nav__subitem-link--active-d0f16d73"};exports.default=t;

package/src/tedi/components/layout/top-nav/top-nav.module.scss.es.js

@@ -0,0 +1,28 @@
+const t = {
+  "tedi-top-nav": "tedi-top-nav-7985280d",
+  "tedi-top-nav__bar": "tedi-top-nav__bar-d7be6587",
+  "tedi-top-nav__list": "tedi-top-nav__list-1cdecbe8",
+  "tedi-top-nav__item": "tedi-top-nav__item-aa7109b8",
+  "tedi-top-nav__item--has-inline-submenu": "tedi-top-nav__item--has-inline-submenu-4d48fa95",
+  "tedi-top-nav__link": "tedi-top-nav__link-724c1ebc",
+  "tedi-top-nav__link--active": "tedi-top-nav__link--active-34580ede",
+  "tedi-top-nav__icon": "tedi-top-nav__icon-1ab6c34d",
+  "tedi-top-nav__chevron": "tedi-top-nav__chevron-e05880f8",
+  "tedi-top-nav__chevron--open": "tedi-top-nav__chevron--open-ef97d87b",
+  "tedi-top-nav__separator": "tedi-top-nav__separator-d1e8646d",
+  "tedi-top-nav__separator-line": "tedi-top-nav__separator-line-4777819a",
+  "tedi-top-nav__submenu": "tedi-top-nav__submenu-9b591c05",
+  "tedi-top-nav__submenu-inner": "tedi-top-nav__submenu-inner-7a7895b2",
+  "tedi-top-nav__submenu--inline": "tedi-top-nav__submenu--inline-b4debcfa",
+  "tedi-top-nav__submenu-inner--inline": "tedi-top-nav__submenu-inner--inline-c5cd3a64",
+  "tedi-top-nav__group": "tedi-top-nav__group-691df203",
+  "tedi-top-nav__group-title": "tedi-top-nav__group-title-70faf48a",
+  "tedi-top-nav__group-icon": "tedi-top-nav__group-icon-792cee8c",
+  "tedi-top-nav__group-list": "tedi-top-nav__group-list-88ee40bb",
+  "tedi-top-nav__subitem": "tedi-top-nav__subitem-d8c89fc6",
+  "tedi-top-nav__subitem-link": "tedi-top-nav__subitem-link-382e3910",
+  "tedi-top-nav__subitem-link--active": "tedi-top-nav__subitem-link--active-d0f16d73"
+};
+export {
+  t as default
+};

package/src/tedi/components/navigation/pagination/index.d.ts

@@ -1,2 +1,3 @@
 export * from './pagination';
+export * from './pagination-mobile-modal/pagination-mobile-modal';
 export * from './use-pagination';

package/src/tedi/components/navigation/pagination/pagination-mobile-modal/pagination-mobile-modal.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),c=require("../../../../../../external/classnames/index.cjs.js"),u=require("react"),o=require("../../../overlays/modal/modal.cjs.js"),l=require("./pagination-mobile-modal.module.scss.cjs.js"),d=m=>{const{open:n,onOpenChange:s,options:b,selectedValue:f,onSelect:_,ariaLabel:g,title:r,ariaCurrent:p="true"}=m,t=u.useRef(null);u.useEffect(()=>{if(!n)return;const e=requestAnimationFrame(()=>{var i;typeof((i=t.current)==null?void 0:i.scrollIntoView)=="function"&&t.current.scrollIntoView({block:"start"})});return()=>cancelAnimationFrame(e)},[n]);const M=e=>{_(e),s(!1)};return a.jsx(o.Modal,{open:n,onToggle:s,children:a.jsxs(o.Modal.Content,{size:"small",position:"bottom",initialFocus:t,"aria-label":r?void 0:g,className:l.default["tedi-pagination-mobile-modal__content"],children:[a.jsx(o.Modal.Header,{title:r,closeButtonProps:{className:l.default["tedi-pagination-mobile-modal__close"]}}),a.jsx(o.Modal.Body,{children:a.jsx("ul",{className:l.default["tedi-pagination-mobile-modal__list"],children:b.map(e=>{const i=e.value===f;return a.jsx("li",{children:a.jsxs("button",{ref:i?t:void 0,type:"button",className:c.default(l.default["tedi-pagination-mobile-modal__item"],{[l.default["tedi-pagination-mobile-modal__item--selected"]]:i}),"aria-current":i?p:void 0,"aria-label":e.ariaLabel,onClick:()=>M(e.value),children:[a.jsx("span",{className:c.default(l.default["tedi-pagination-mobile-modal__radio"],{[l.default["tedi-pagination-mobile-modal__radio--selected"]]:i}),"aria-hidden":"true"}),a.jsx("span",{className:l.default["tedi-pagination-mobile-modal__label"],children:e.label})]})},e.value)})})})]})})};d.displayName="PaginationMobileModal";exports.PaginationMobileModal=d;exports.default=d;

package/src/tedi/components/navigation/pagination/pagination-mobile-modal/pagination-mobile-modal.d.ts

@@ -0,0 +1,36 @@
+export interface PaginationMobileModalOption {
+    /** Value emitted when this option is selected. */
+    value: number;
+    /** Visible label inside the row. */
+    label: string;
+    /** Full accessible name for the row's button. */
+    ariaLabel: string;
+}
+export interface PaginationMobileModalProps {
+    /** Whether the modal is open. */
+    open: boolean;
+    /** Callback when the modal opens or closes (e.g. dismiss via backdrop or Escape). */
+    onOpenChange: (open: boolean) => void;
+    /** Options listed in the picker. */
+    options: PaginationMobileModalOption[];
+    /** Currently selected value — drives the active row styling. */
+    selectedValue: number;
+    /** Fires with the chosen value. The modal closes automatically. */
+    onSelect: (value: number) => void;
+    /** Accessible name for the modal dialog (used when `title` is omitted). */
+    ariaLabel: string;
+    /** Optional heading rendered in the modal header. */
+    title?: string;
+    /** `aria-current` value set on the selected row. @default 'true' */
+    ariaCurrent?: 'page' | 'step' | 'true';
+}
+/**
+ * Mobile option-picker modal — one row per option with a radio-style indicator
+ * on the active one. Used by `Pagination` below `md` for both the page picker
+ * and the page-size picker.
+ */
+export declare const PaginationMobileModal: {
+    (props: PaginationMobileModalProps): JSX.Element;
+    displayName: string;
+};
+export default PaginationMobileModal;

package/src/tedi/components/navigation/pagination/pagination-mobile-modal/pagination-mobile-modal.es.js

@@ -0,0 +1,65 @@
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import m from "../../../../../../external/classnames/index.es.js";
+import { useRef as h, useEffect as N } from "react";
+import { Modal as o } from "../../../overlays/modal/modal.es.js";
+import a from "./pagination-mobile-modal.module.scss.es.js";
+const v = (c) => {
+  const { open: n, onOpenChange: r, options: u, selectedValue: p, onSelect: b, ariaLabel: f, title: s, ariaCurrent: _ = "true" } = c, t = h(null);
+  N(() => {
+    if (!n) return;
+    const e = requestAnimationFrame(() => {
+      var i;
+      typeof ((i = t.current) == null ? void 0 : i.scrollIntoView) == "function" && t.current.scrollIntoView({ block: "start" });
+    });
+    return () => cancelAnimationFrame(e);
+  }, [n]);
+  const g = (e) => {
+    b(e), r(!1);
+  };
+  return /* @__PURE__ */ l(o, { open: n, onToggle: r, children: /* @__PURE__ */ d(
+    o.Content,
+    {
+      size: "small",
+      position: "bottom",
+      initialFocus: t,
+      "aria-label": s ? void 0 : f,
+      className: a["tedi-pagination-mobile-modal__content"],
+      children: [
+        /* @__PURE__ */ l(o.Header, { title: s, closeButtonProps: { className: a["tedi-pagination-mobile-modal__close"] } }),
+        /* @__PURE__ */ l(o.Body, { children: /* @__PURE__ */ l("ul", { className: a["tedi-pagination-mobile-modal__list"], children: u.map((e) => {
+          const i = e.value === p;
+          return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ d(
+            "button",
+            {
+              ref: i ? t : void 0,
+              type: "button",
+              className: m(a["tedi-pagination-mobile-modal__item"], {
+                [a["tedi-pagination-mobile-modal__item--selected"]]: i
+              }),
+              "aria-current": i ? _ : void 0,
+              "aria-label": e.ariaLabel,
+              onClick: () => g(e.value),
+              children: [
+                /* @__PURE__ */ l(
+                  "span",
+                  {
+                    className: m(a["tedi-pagination-mobile-modal__radio"], {
+                      [a["tedi-pagination-mobile-modal__radio--selected"]]: i
+                    }),
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ l("span", { className: a["tedi-pagination-mobile-modal__label"], children: e.label })
+              ]
+            }
+          ) }, e.value);
+        }) }) })
+      ]
+    }
+  ) });
+};
+v.displayName = "PaginationMobileModal";
+export {
+  v as PaginationMobileModal,
+  v as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-pagination-mobile-modal__content":"tedi-pagination-mobile-modal__content-aeaa35e4","tedi-pagination-mobile-modal__close":"tedi-pagination-mobile-modal__close-f2be0c6d","tedi-pagination-mobile-modal__list":"tedi-pagination-mobile-modal__list-6731fe96","tedi-pagination-mobile-modal__item":"tedi-pagination-mobile-modal__item-e21bf884","tedi-pagination-mobile-modal__item--selected":"tedi-pagination-mobile-modal__item--selected-9c438a43","tedi-pagination-mobile-modal__radio":"tedi-pagination-mobile-modal__radio-09dfef50","tedi-pagination-mobile-modal__radio--selected":"tedi-pagination-mobile-modal__radio--selected-0dd20206","tedi-pagination-mobile-modal__label":"tedi-pagination-mobile-modal__label-d13b1631"};exports.default=i;

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

@@ -0,0 +1,13 @@
+const i = {
+  "tedi-pagination-mobile-modal__content": "tedi-pagination-mobile-modal__content-aeaa35e4",
+  "tedi-pagination-mobile-modal__close": "tedi-pagination-mobile-modal__close-f2be0c6d",
+  "tedi-pagination-mobile-modal__list": "tedi-pagination-mobile-modal__list-6731fe96",
+  "tedi-pagination-mobile-modal__item": "tedi-pagination-mobile-modal__item-e21bf884",
+  "tedi-pagination-mobile-modal__item--selected": "tedi-pagination-mobile-modal__item--selected-9c438a43",
+  "tedi-pagination-mobile-modal__radio": "tedi-pagination-mobile-modal__radio-09dfef50",
+  "tedi-pagination-mobile-modal__radio--selected": "tedi-pagination-mobile-modal__radio--selected-0dd20206",
+  "tedi-pagination-mobile-modal__label": "tedi-pagination-mobile-modal__label-d13b1631"
+};
+export {
+  i as default
+};

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

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

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

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+import { Breakpoint, BreakpointSupport } from '../../../helpers';
 export type PaginationItemType = 'page' | 'previous' | 'next' | 'ellipsis';
 export interface PaginationItem {
     type: PaginationItemType;
@@ -5,6 +7,13 @@ export interface PaginationItem {
     selected: boolean;
     disabled: boolean;
 }
+export type PaginationBackground = 'white' | 'transparent';
+export type PaginationBorders = 'top' | 'bottom' | 'both' | 'none';
+export type PaginationVisibility = boolean | Exclude<Breakpoint, 'xs'>;
+export interface PaginationPageSizeOption {
+    value: number;
+    label: string;
+}
 export interface PaginationLabels {
     /**
      * Accessible label for the nav wrapper.
@@ -33,16 +42,99 @@ export interface PaginationLabels {
     currentPageAriaLabel: (page: number) => string;
     /**
      * Rendered to the left of the pagination nav when `totalItems` is set.
+     * Returns any React node, so consumers can mix copy with formatting markup
+     * (e.g. a bold count or a status badge) — not just a plain string.
      * @default (count) => `${count} results`
      */
-    results: (count: number) => string;
+    results: (count: number) => ReactNode;
     /**
      * Prefix label for the page-size select.
      * @default 'Show per page'
      */
     pageSize: string;
+    /**
+     * Announcement for the polite aria-live region when the page changes.
+     * Lets screen reader users know they moved without stealing focus.
+     * @default (page, total) => `Page ${page} of ${total}`
+     */
+    pageStatus: (page: number, pageCount: number) => string;
 }
-export interface PaginationProps {
+type PaginationBreakpointProps = {
+    /**
+     * Number of pages always shown at the start and end of the range before
+     * ellipsis kicks in.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * Number of sibling pages shown on either side of the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Background variant. `transparent` removes the surface fill — use it when
+     * pagination sits on a non-white container. Border behaviour is controlled
+     * separately via `borders`.
+     * @default white
+     */
+    background?: PaginationBackground;
+    /**
+     * Where the separator border is drawn around the pagination strip:
+     * - `'top'` (default) — separator above only (typical "table then pager"
+     *   layout).
+     * - `'both'` — separator above and below (split layout where the pager is
+     *   sandwiched between content rows, e.g. a fixed header table + a footer
+     *   beneath the pager).
+     * - `'none'` — borderless, for embedded contexts where the outer container
+     *   already provides framing.
+     *
+     * Ignored when `background='transparent'` — that variant is always borderless.
+     * @default top
+     */
+    borders?: PaginationBorders;
+    /**
+     * Keep the Previous / Next buttons visible even when they would be disabled
+     * (Previous on the first page, Next on the last). Default `false` drops the
+     * disabled edge button entirely — compact layout. Set `true` to keep both
+     * buttons rendered (disabled) at the edges so the pager width stays stable.
+     * @default false
+     */
+    showPrevNextButtons?: boolean;
+    /**
+     * Show the textual `previous` / `next` labels alongside the arrow icons on
+     * the edge nav buttons. The labels are sourced from `labels.previous` /
+     * `labels.next` (or the corresponding i18n keys). Default keeps the
+     * icon-only Figma variant.
+     *
+     * When set, the arrows render as small text links (label + icon, link
+     * colour, underline on hover) rather than circular icon buttons —
+     * `arrowVariant` is ignored in this mode.
+     * @default false
+     */
+    showEdgeNavLabels?: boolean;
+    /**
+     * Material icon name for the Previous arrow. Override to swap the default
+     * chevron (e.g. `'first_page'`, `'chevron_left'`).
+     * @default 'arrow_back'
+     */
+    previousIcon?: string;
+    /**
+     * Material icon name for the Next arrow.
+     * @default 'arrow_forward'
+     */
+    nextIcon?: string;
+    /**
+     * Visual treatment of the prev/next arrow buttons:
+     * - `'default'` — brand-coloured icon on a transparent circle (light tint on
+     *   hover); pair with `showEdgeNavLabels` for the small-link style.
+     * - `'primary'` — a primary small `Button` with the label text and a leading
+     *   (previous) / trailing (next) arrow icon, for prominent navigation. The
+     *   text label is always shown, so `showEdgeNavLabels` has no effect here.
+     * @default default
+     */
+    arrowVariant?: 'default' | 'primary';
+};
+export interface PaginationProps extends BreakpointSupport<PaginationBreakpointProps> {
     /**
      * Total number of pages.
      */
@@ -71,28 +163,38 @@ export interface PaginationProps {
      */
     pageSize?: number;
     /**
-     * Options for the page-size select. Omit to hide the select.
+     * Options for the page-size select. Omit to hide the select. Accepts plain numbers, or
+     * `{ value, label }` objects when the visible text should differ from the value — e.g. a
+     * "Show all" entry `{ value: totalItems, label: 'Show all' }`. Selecting an option emits its
+     * `value` via `onPageSizeChange`; the pager collapses once the consumer recomputes `pageCount` to 1.
      */
-    pageSizeOptions?: number[];
+    pageSizeOptions?: (number | PaginationPageSizeOption)[];
     /**
      * Fires when the user picks a different page size.
      */
     onPageSizeChange?: (pageSize: number) => void;
     /**
-     * Number of pages always shown at the start and end of the range before
-     * ellipsis kicks in.
-     * @default 1
+     * Override any of the default text labels / aria labels.
      */
-    boundaryCount?: number;
+    labels?: Partial<PaginationLabels>;
     /**
-     * Number of sibling pages shown on either side of the current page.
-     * @default 1
+     * Hide the "X results" label even when `totalItems` is set. Pass a
+     * breakpoint name (e.g. `"md"`) to hide only below that breakpoint.
+     * @default false
      */
-    siblingCount?: number;
+    hideResults?: PaginationVisibility;
     /**
-     * Override any of the default text labels / aria labels.
+     * Hide the page-size dropdown even when `pageSizeOptions` is non-empty.
+     * Pass a breakpoint name to hide only below that breakpoint.
+     * @default false
      */
-    labels?: Partial<PaginationLabels>;
+    hidePageSize?: PaginationVisibility;
+    /**
+     * Hide the pager (prev/next + page list). Pass a breakpoint name to hide
+     * only below that breakpoint.
+     * @default false
+     */
+    hidePager?: PaginationVisibility;
     /**
      * Additional class name on the root element.
      */