@tedi-design-system/react 18.0.0-rc.4 → 18.0.0-rc.5

package/src/tedi/components/content/table/table.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-table":"tedi-table-f4707778","tedi-table__toolbar":"tedi-table__toolbar-7ccf8a04","tedi-table__scroll":"tedi-table__scroll-a9c9ce5f","tedi-table__table":"tedi-table__table-0c156cdb","tedi-table__caption":"tedi-table__caption-378edbc2","tedi-table__head":"tedi-table__head-549b3a97","tedi-table__header-cell":"tedi-table__header-cell-31f2955e","tedi-table__row":"tedi-table__row-bcd5867d","tedi-table__cell":"tedi-table__cell-95d3876c","tedi-table__cell--align-left":"tedi-table__cell--align-left-2fbf07e9","tedi-table__cell--align-center":"tedi-table__cell--align-center-7aae1b56","tedi-table__cell--align-right":"tedi-table__cell--align-right-ec62c9b8","tedi-table__cell--valign-top":"tedi-table__cell--valign-top-af74bcaa","tedi-table__cell--valign-middle":"tedi-table__cell--valign-middle-86b5d5c3","tedi-table__cell--valign-bottom":"tedi-table__cell--valign-bottom-17cd68db","tedi-table__cell--placeholder":"tedi-table__cell--placeholder-c015ed76","tedi-table--small":"tedi-table--small-63dad8b3","tedi-table__foot":"tedi-table__foot-81a5fd8a","tedi-table__cell--footer":"tedi-table__cell--footer-6db3119e","tedi-table__row--selected":"tedi-table__row--selected-4e592b36","tedi-table__row--dragging":"tedi-table__row--dragging-a5ef9418","tedi-table__row--drag-over":"tedi-table__row--drag-over-6d93e8b7","tedi-table__row--drag-preview":"tedi-table__row--drag-preview-47e2dd99","tedi-table__header-cell--dragging":"tedi-table__header-cell--dragging-06a46b18","tedi-table__header-cell--drag-over":"tedi-table__header-cell--drag-over-f252af8e","tedi-table__cell--drag-over":"tedi-table__cell--drag-over-cbc1dbfb","tedi-table__header-cell--drag-preview":"tedi-table__header-cell--drag-preview-9bb286ec","tedi-table__row--picked-up":"tedi-table__row--picked-up-d3b1dea5","tedi-table__header-cell--picked-up":"tedi-table__header-cell--picked-up-15995295","tedi-table__drag-handle--picked-up":"tedi-table__drag-handle--picked-up-f844be33","tedi-table__sr-only":"tedi-table__sr-only-63bcee78","tedi-table__header-cell-inner":"tedi-table__header-cell-inner-56364d8d","tedi-table__cell--drag-handle":"tedi-table__cell--drag-handle-d53d19c1","tedi-table__drag-handle":"tedi-table__drag-handle-9672fabe","tedi-table__row--clickable":"tedi-table__row--clickable-05139b72","tedi-table__row--sub-component":"tedi-table__row--sub-component-effed53b","tedi-table__row--sub-row":"tedi-table__row--sub-row-3d164bb0","tedi-table__cell--sub-component":"tedi-table__cell--sub-component-39f49de2","tedi-table__row--filter":"tedi-table__row--filter-549a00f2","tedi-table--striped":"tedi-table--striped-213db29e","tedi-table__body":"tedi-table__body-622a274c","tedi-table--row-hover":"tedi-table--row-hover-399b73a2","tedi-table__row--active":"tedi-table__row--active-3d6fa5fc","tedi-table--vertical-borders":"tedi-table--vertical-borders-7daec7da","tedi-table--borderless":"tedi-table--borderless-32051e6f","tedi-table--has-pagination":"tedi-table--has-pagination-1eb2a663","tedi-table__pagination":"tedi-table__pagination-2bb8beb7","tedi-table--sticky-first-column":"tedi-table--sticky-first-column-0b93c772","tedi-table--sticky-header":"tedi-table--sticky-header-d8ee7437"};exports.default=e;

package/src/tedi/components/content/table/table.module.scss.es.js

@@ -0,0 +1,54 @@
+const e = {
+  "tedi-table": "tedi-table-f4707778",
+  "tedi-table__toolbar": "tedi-table__toolbar-7ccf8a04",
+  "tedi-table__scroll": "tedi-table__scroll-a9c9ce5f",
+  "tedi-table__table": "tedi-table__table-0c156cdb",
+  "tedi-table__caption": "tedi-table__caption-378edbc2",
+  "tedi-table__head": "tedi-table__head-549b3a97",
+  "tedi-table__header-cell": "tedi-table__header-cell-31f2955e",
+  "tedi-table__row": "tedi-table__row-bcd5867d",
+  "tedi-table__cell": "tedi-table__cell-95d3876c",
+  "tedi-table__cell--align-left": "tedi-table__cell--align-left-2fbf07e9",
+  "tedi-table__cell--align-center": "tedi-table__cell--align-center-7aae1b56",
+  "tedi-table__cell--align-right": "tedi-table__cell--align-right-ec62c9b8",
+  "tedi-table__cell--valign-top": "tedi-table__cell--valign-top-af74bcaa",
+  "tedi-table__cell--valign-middle": "tedi-table__cell--valign-middle-86b5d5c3",
+  "tedi-table__cell--valign-bottom": "tedi-table__cell--valign-bottom-17cd68db",
+  "tedi-table__cell--placeholder": "tedi-table__cell--placeholder-c015ed76",
+  "tedi-table--small": "tedi-table--small-63dad8b3",
+  "tedi-table__foot": "tedi-table__foot-81a5fd8a",
+  "tedi-table__cell--footer": "tedi-table__cell--footer-6db3119e",
+  "tedi-table__row--selected": "tedi-table__row--selected-4e592b36",
+  "tedi-table__row--dragging": "tedi-table__row--dragging-a5ef9418",
+  "tedi-table__row--drag-over": "tedi-table__row--drag-over-6d93e8b7",
+  "tedi-table__row--drag-preview": "tedi-table__row--drag-preview-47e2dd99",
+  "tedi-table__header-cell--dragging": "tedi-table__header-cell--dragging-06a46b18",
+  "tedi-table__header-cell--drag-over": "tedi-table__header-cell--drag-over-f252af8e",
+  "tedi-table__cell--drag-over": "tedi-table__cell--drag-over-cbc1dbfb",
+  "tedi-table__header-cell--drag-preview": "tedi-table__header-cell--drag-preview-9bb286ec",
+  "tedi-table__row--picked-up": "tedi-table__row--picked-up-d3b1dea5",
+  "tedi-table__header-cell--picked-up": "tedi-table__header-cell--picked-up-15995295",
+  "tedi-table__drag-handle--picked-up": "tedi-table__drag-handle--picked-up-f844be33",
+  "tedi-table__sr-only": "tedi-table__sr-only-63bcee78",
+  "tedi-table__header-cell-inner": "tedi-table__header-cell-inner-56364d8d",
+  "tedi-table__cell--drag-handle": "tedi-table__cell--drag-handle-d53d19c1",
+  "tedi-table__drag-handle": "tedi-table__drag-handle-9672fabe",
+  "tedi-table__row--clickable": "tedi-table__row--clickable-05139b72",
+  "tedi-table__row--sub-component": "tedi-table__row--sub-component-effed53b",
+  "tedi-table__row--sub-row": "tedi-table__row--sub-row-3d164bb0",
+  "tedi-table__cell--sub-component": "tedi-table__cell--sub-component-39f49de2",
+  "tedi-table__row--filter": "tedi-table__row--filter-549a00f2",
+  "tedi-table--striped": "tedi-table--striped-213db29e",
+  "tedi-table__body": "tedi-table__body-622a274c",
+  "tedi-table--row-hover": "tedi-table--row-hover-399b73a2",
+  "tedi-table__row--active": "tedi-table__row--active-3d6fa5fc",
+  "tedi-table--vertical-borders": "tedi-table--vertical-borders-7daec7da",
+  "tedi-table--borderless": "tedi-table--borderless-32051e6f",
+  "tedi-table--has-pagination": "tedi-table--has-pagination-1eb2a663",
+  "tedi-table__pagination": "tedi-table__pagination-2bb8beb7",
+  "tedi-table--sticky-first-column": "tedi-table--sticky-first-column-0b93c772",
+  "tedi-table--sticky-header": "tedi-table--sticky-header-d8ee7437"
+};
+export {
+  e as default
+};

package/src/tedi/components/content/table/use-table-persistence.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),E=["columnVisibility","columnOrder"];function b(e){if(!e)return null;if(e.storage)return e.storage;if(typeof window>"u")return null;try{return window.localStorage}catch{return null}}function D(e,t){const n=b(e);if(!n||!e)return t;try{const o=n.getItem(e.key);if(!o)return t;const c=JSON.parse(o),u=e.include??E,i={};for(const s of u)c[s]!==void 0&&(i[s]=c[s]);return{...t,...i}}catch{return t}}function J(e){const{persist:t,controlled:n,defaultState:o,onStateChange:c}=e,[u,i]=r.useState(()=>D(t,o??{})),s=r.useMemo(()=>({...u,...n}),[u,n]),S=r.useRef(n);S.current=n;const l=r.useRef(c);l.current=c;const m=r.useRef(t);m.current=t;const N=r.useCallback(a=>{i(d=>{var P;const w=S.current,h={...d,...w},R=typeof a=="function"?a(h):a,k={...d,...R},g={...d,...w,...R},f=m.current,I=b(f);if(I&&f)try{const v=f.include??E,T={};for(const y of v)g[y]!==void 0&&(T[y]=g[y]);I.setItem(f.key,JSON.stringify(T))}catch{}return(P=l.current)==null||P.call(l,g),k})},[]);return[s,N]}exports.useTablePersistence=J;

package/src/tedi/components/content/table/use-table-persistence.d.ts

@@ -0,0 +1,13 @@
+import { TablePersistOptions, TableState } from './table';
+/**
+ * Owns the Table's internal state and (optionally) syncs it to a Storage backend.
+ * The hook always returns a fully-merged TableState so callers never have to
+ * reason about `undefined` slices.
+ */
+export type TableStatePatch = Partial<TableState> | ((prev: TableState) => Partial<TableState>);
+export declare function useTablePersistence(options: {
+    persist?: TablePersistOptions;
+    controlled?: Partial<TableState>;
+    defaultState?: Partial<TableState>;
+    onStateChange?: (state: TableState) => void;
+}): [TableState, (next: TableStatePatch) => void];

package/src/tedi/components/content/table/use-table-persistence.es.js

@@ -0,0 +1,53 @@
+import { useState as J, useMemo as _, useRef as y, useCallback as p } from "react";
+const R = ["columnVisibility", "columnOrder"];
+function T(t) {
+  if (!t) return null;
+  if (t.storage) return t.storage;
+  if (typeof window > "u") return null;
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function v(t, e) {
+  const n = T(t);
+  if (!n || !t) return e;
+  try {
+    const o = n.getItem(t.key);
+    if (!o) return e;
+    const r = JSON.parse(o), s = t.include ?? R, u = {};
+    for (const c of s)
+      r[c] !== void 0 && (u[c] = r[c]);
+    return { ...e, ...u };
+  } catch {
+    return e;
+  }
+}
+function C(t) {
+  const { persist: e, controlled: n, defaultState: o, onStateChange: r } = t, [s, u] = J(() => v(e, o ?? {})), c = _(() => ({ ...s, ...n }), [s, n]), S = y(n);
+  S.current = n;
+  const i = y(r);
+  i.current = r;
+  const m = y(e);
+  m.current = e;
+  const h = p((f) => {
+    u((d) => {
+      var N;
+      const w = S.current, k = { ...d, ...w }, I = typeof f == "function" ? f(k) : f, x = { ...d, ...I }, a = { ...d, ...w, ...I }, l = m.current, E = T(l);
+      if (E && l)
+        try {
+          const D = l.include ?? R, P = {};
+          for (const g of D)
+            a[g] !== void 0 && (P[g] = a[g]);
+          E.setItem(l.key, JSON.stringify(P));
+        } catch {
+        }
+      return (N = i.current) == null || N.call(i, a), x;
+    });
+  }, []);
+  return [c, h];
+}
+export {
+  C as useTablePersistence
+};

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 t=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),W=require("../../base/icon/icon.cjs.js"),A=require("../../base/typography/text/text.cjs.js"),C=require("../../buttons/button/button.cjs.js"),L=require("../../form/select/select.cjs.js"),a=require("./pagination.module.scss.cjs.js"),X=require("./use-pagination.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint.cjs.js"),Y=require("../../../providers/label-provider/use-labels.cjs.js"),N=n.forwardRef((q,k)=>{const{pageCount:s,page:h,defaultPage:w=1,onPageChange:p,totalItems:j,pageSize:v,pageSizeOptions:c,onPageSizeChange:g,boundaryCount:M=1,siblingCount:I=1,labels:x,className:B}=q,{getLabel:o}=Y.useLabels(),l=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),...x}),[o,x]),[O,$]=n.useState(w),r=h??O,b=X.usePagination({page:r,pageCount:s,boundaryCount:M,siblingCount:I}),m=n.useCallback(e=>{e===r||e<1||e>s||(h===void 0&&$(e),p==null||p(e))},[r,p,h,s]),y=n.useId(),f=n.useMemo(()=>Array.isArray(c)?c.map(e=>({value:String(e),label:String(e)})):[],[c]),R=n.useMemo(()=>v===void 0?f[0]??null:f.find(e=>e.value===String(v))??null,[v,f]),J=n.useCallback(e=>{const i=Array.isArray(e)?e[0]:e;i&&"value"in i&&(g==null||g(Number(i.value)))},[g]),T=_.default(a.default["tedi-pagination"],B),K=P.useBreakpoint(),S=P.isBreakpointBelow(K,"md"),U=j!==void 0,D=!S&&Array.isArray(c)&&c.length>0,E=b[0],F=b[b.length-1],G=b.slice(1,-1),z=e=>{const i=e.type==="previous"?l.previous:l.next,u=e.type==="previous"?"arrow_back":"arrow_forward";return t.jsx(C.Button,{type:"button",className:_.default(a.default["tedi-pagination__button"],a.default["tedi-pagination__button--nav"],a.default[`tedi-pagination__button--nav-${e.type}`]),"aria-label":i,disabled:e.disabled,onClick:()=>e.page!==null&&m(e.page),noStyle:!0,children:t.jsx(W.Icon,{name:u,size:18,color:"brand"})})},H=n.useMemo(()=>Array.from({length:s},(e,i)=>{const u=i+1;return{value:String(u),label:String(u)}}),[s]),Q=n.useMemo(()=>({value:String(r),label:`${r} / ${s}`}),[r,s]),V=n.useCallback(e=>{const i=Array.isArray(e)?e[0]:e;i&&"value"in i&&m(Number(i.value))},[m]);return t.jsxs("div",{ref:k,className:T,"data-name":"tedi-pagination",children:[t.jsx("span",{className:"visually-hidden",role:"status","aria-live":"polite","aria-atomic":"true",children:s>1?l.pageStatus(r,s):""}),t.jsx("div",{className:a.default["tedi-pagination__slot-start"],role:"status","aria-live":"polite","aria-atomic":"true",children:U&&t.jsx(A.Text,{className:a.default["tedi-pagination__results"],color:"secondary",modifiers:"small",children:l.results(j)})}),t.jsx("div",{className:a.default["tedi-pagination__slot-center"],children:s>1&&t.jsxs("nav",{"aria-label":l.ariaLabel,className:a.default["tedi-pagination__nav"],children:[z(E),!S&&t.jsx("ul",{className:a.default["tedi-pagination__list"],children:G.map((e,i)=>{const u=`slot-${i}`;if(e.type==="ellipsis")return t.jsx("li",{className:_.default(a.default["tedi-pagination__item"],a.default["tedi-pagination__item--ellipsis"]),"aria-hidden":"true",children:"…"},u);const d=e.page;return t.jsx("li",{className:a.default["tedi-pagination__item"],children:t.jsx(C.Button,{type:"button",className:_.default(a.default["tedi-pagination__button"],{[a.default["tedi-pagination__button--selected"]]:e.selected}),"aria-label":e.selected?l.currentPageAriaLabel(d):l.pageAriaLabel(d),"aria-current":e.selected?"page":void 0,onClick:()=>m(d),noStyle:!0,children:t.jsx("span",{className:a.default["tedi-pagination__button-label"],children:d},d)})},u)})}),S&&t.jsx("div",{className:a.default["tedi-pagination__page-jump"],children:t.jsx(L.Select,{id:`tedi-pagination-jump-${y}`,className:a.default["tedi-pagination__page-jump-select"],label:l.ariaLabel,hideLabel:!0,size:"small",options:H,value:Q,onChange:V,isSearchable:!1,isClearable:!1})}),z(F)]})}),t.jsx("div",{className:a.default["tedi-pagination__slot-end"],children:D&&t.jsxs("div",{className:a.default["tedi-pagination__page-size"],children:[t.jsx(A.Text,{className:a.default["tedi-pagination__page-size-label"],color:"secondary",modifiers:"small",element:"span",children:l.pageSize}),t.jsx(L.Select,{id:`tedi-pagination-page-size-${y}`,className:a.default["tedi-pagination__select"],label:l.pageSize,hideLabel:!0,size:"small",options:f,value:R,onChange:J,isSearchable:!1,isClearable:!1})]})})]})});N.displayName="Pagination";exports.Pagination=N;exports.default=N;

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

@@ -41,6 +41,13 @@ export interface PaginationLabels {
      * @default 'Show per page'
      */
     pageSize: string;
+    /**
+     * Builds the message announced to screen readers (via a visually-hidden
+     * `aria-live="polite"` region) whenever the current page changes. Lets SR
+     * users know that the page transition happened without sighted feedback.
+     * @default (page, pageCount) => `Page ${page} of ${pageCount}`
+     */
+    pageStatus: (page: number, pageCount: number) => string;
 }
 export interface PaginationProps {
     /**

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

@@ -1,123 +1,164 @@
-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 y, jsx as i } from "react/jsx-runtime";
+import h from "../../../../../external/classnames/index.es.js";
+import { forwardRef as W, useMemo as d, useState as X, useCallback as S, useId as Y } from "react";
+import { Icon as Z } from "../../base/icon/icon.es.js";
+import { Text as P } from "../../base/typography/text/text.es.js";
+import { Button as w } from "../../buttons/button/button.es.js";
+import { Select as k } 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 { usePagination as ee } from "./use-pagination.es.js";
+import { useBreakpoint as ae, isBreakpointBelow as ie } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { useLabels as te } from "../../../providers/label-provider/use-labels.es.js";
+const ne = W((I, $) => {
   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: n,
+    page: f,
+    defaultPage: j = 1,
+    onPageChange: g,
+    totalItems: z,
+    pageSize: v,
+    pageSizeOptions: p,
+    onPageSizeChange: u,
+    boundaryCount: O = 1,
+    siblingCount: x = 1,
+    labels: A,
+    className: B
+  } = I, { getLabel: l } = te(), s = d(
     () => ({
-      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: l("pagination.title"),
+      previous: l("pagination.prev-page"),
+      next: l("pagination.next-page"),
+      pageAriaLabel: (e) => l("pagination.page", e, !1),
+      currentPageAriaLabel: (e) => l("pagination.page", e, !0),
+      results: (e) => l("pagination.results", e),
+      pageSize: l("pagination.page-size"),
+      pageStatus: (e, t) => l("pagination.page-status", e, t),
+      ...A
     }),
-    [t, h]
-  ), [x, I] = E(C), _ = u ?? x, O = J({ page: _, pageCount: o, boundaryCount: P, siblingCount: w }), N = y(
+    [l, A]
+  ), [J, M] = X(j), o = f ?? J, m = ee({ page: o, pageCount: n, boundaryCount: O, siblingCount: x }), b = S(
     (e) => {
-      e === _ || e < 1 || e > o || (u === void 0 && I(e), p == null || p(e));
+      e === o || e < 1 || e > n || (f === void 0 && M(e), g == null || g(e));
     },
-    [_, p, u, o]
-  ), j = F(), d = b(
-    () => Array.isArray(s) ? s.map((e) => ({
+    [o, g, f, n]
+  ), C = Y(), _ = d(
+    () => Array.isArray(p) ? p.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(
+    [p]
+  ), R = d(() => v === void 0 ? _[0] ?? null : _.find((e) => e.value === String(v)) ?? null, [v, _]), K = S(
     (e) => {
-      const l = Array.isArray(e) ? e[0] : e;
-      l && "value" in l && (c == null || c(Number(l.value)));
+      const t = Array.isArray(e) ? e[0] : e;
+      t && "value" in t && (u == null || u(Number(t.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]
+  ), T = h(a["tedi-pagination"], B), U = ae(), N = ie(U, "md"), q = z !== void 0, D = !N && Array.isArray(p) && p.length > 0, E = m[0], F = m[m.length - 1], G = m.slice(1, -1), L = (e) => {
+    const t = e.type === "previous" ? s.previous : s.next, r = e.type === "previous" ? "arrow_back" : "arrow_forward";
+    return /* @__PURE__ */ i(
+      w,
+      {
+        type: "button",
+        className: h(
+          a["tedi-pagination__button"],
+          a["tedi-pagination__button--nav"],
+          a[`tedi-pagination__button--nav-${e.type}`]
+        ),
+        "aria-label": t,
+        disabled: e.disabled,
+        onClick: () => e.page !== null && b(e.page),
+        noStyle: !0,
+        children: /* @__PURE__ */ i(Z, { name: r, size: 18, color: "brand" })
+      }
+    );
+  }, H = d(
+    () => Array.from({ length: n }, (e, t) => {
+      const r = t + 1;
+      return { value: String(r), label: String(r) };
+    }),
+    [n]
+  ), Q = d(
+    () => ({ value: String(o), label: `${o} / ${n}` }),
+    [o, n]
+  ), V = S(
+    (e) => {
+      const t = Array.isArray(e) ? e[0] : e;
+      t && "value" in t && b(Number(t.value));
+    },
+    [b]
+  );
+  return /* @__PURE__ */ y("div", { ref: $, className: T, "data-name": "tedi-pagination", children: [
+    /* @__PURE__ */ i("span", { className: "visually-hidden", role: "status", "aria-live": "polite", "aria-atomic": "true", children: n > 1 ? s.pageStatus(o, n) : "" }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-start"], role: "status", "aria-live": "polite", "aria-atomic": "true", children: q && /* @__PURE__ */ i(P, { className: a["tedi-pagination__results"], color: "secondary", modifiers: "small", children: s.results(z) }) }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-center"], children: n > 1 && /* @__PURE__ */ y("nav", { "aria-label": s.ariaLabel, className: a["tedi-pagination__nav"], children: [
+      L(E),
+      !N && /* @__PURE__ */ i("ul", { className: a["tedi-pagination__list"], children: G.map((e, t) => {
+        const r = `slot-${t}`;
+        if (e.type === "ellipsis")
+          return /* @__PURE__ */ i(
+            "li",
+            {
+              className: h(a["tedi-pagination__item"], a["tedi-pagination__item--ellipsis"]),
+              "aria-hidden": "true",
+              children: "…"
+            },
+            r
+          );
+        const c = e.page;
         return /* @__PURE__ */ i("li", { className: a["tedi-pagination__item"], children: /* @__PURE__ */ i(
-          z,
+          w,
           {
             type: "button",
-            className: g(a["tedi-pagination__button"], a["tedi-pagination__button--nav"]),
-            "aria-label": U,
-            onClick: () => e.page !== null && N(e.page),
+            className: h(a["tedi-pagination__button"], {
+              [a["tedi-pagination__button--selected"]]: e.selected
+            }),
+            "aria-label": e.selected ? s.currentPageAriaLabel(c) : s.pageAriaLabel(c),
+            "aria-current": e.selected ? "page" : void 0,
+            onClick: () => b(c),
             noStyle: !0,
-            children: /* @__PURE__ */ i(G, { name: q, size: 18, color: "brand" })
+            children: /* @__PURE__ */ i("span", { className: a["tedi-pagination__button-label"], children: c }, c)
           }
-        ) }, e.type);
-      }
-      const r = e.page;
-      return /* @__PURE__ */ i("li", { className: a["tedi-pagination__item"], children: /* @__PURE__ */ i(
-        z,
+        ) }, r);
+      }) }),
+      N && /* @__PURE__ */ i("div", { className: a["tedi-pagination__page-jump"], children: /* @__PURE__ */ i(
+        k,
         {
-          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
+          id: `tedi-pagination-jump-${C}`,
+          className: a["tedi-pagination__page-jump-select"],
+          label: s.ariaLabel,
+          hideLabel: !0,
+          size: "small",
+          options: H,
+          value: Q,
+          onChange: V,
+          isSearchable: !1,
+          isClearable: !1
         }
-      ) }, r);
-    }) }) }) }),
-    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-end"], children: T && /* @__PURE__ */ v("div", { className: a["tedi-pagination__page-size"], children: [
+      ) }),
+      L(F)
+    ] }) }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-end"], children: D && /* @__PURE__ */ y("div", { className: a["tedi-pagination__page-size"], children: [
       /* @__PURE__ */ i(
-        S,
+        P,
         {
           className: a["tedi-pagination__page-size-label"],
           color: "secondary",
           modifiers: "small",
           element: "span",
-          children: n.pageSize
+          children: s.pageSize
         }
       ),
       /* @__PURE__ */ i(
-        H,
+        k,
         {
-          id: `tedi-pagination-page-size-${j}`,
+          id: `tedi-pagination-page-size-${C}`,
           className: a["tedi-pagination__select"],
-          label: n.pageSize,
+          label: s.pageSize,
           hideLabel: !0,
           size: "small",
-          options: d,
+          options: _,
           value: R,
-          onChange: $,
+          onChange: K,
           isSearchable: !1,
           isClearable: !1
         }
@@ -125,8 +166,8 @@ const Q = D((A, L) => {
     ] }) })
   ] });
 });
-Q.displayName = "Pagination";
+ne.displayName = "Pagination";
 export {
-  Q as Pagination,
-  Q as default
+  ne as Pagination,
+  ne as default
 };

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__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__page-jump":"tedi-pagination__page-jump-db0a15d9","tedi-pagination__page-jump-select":"tedi-pagination__page-jump-select-29430dd4","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-previous":"tedi-pagination__button--nav-previous-1e74ca69","tedi-pagination__button--nav-next":"tedi-pagination__button--nav-next-80e53bed","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

@@ -6,14 +6,20 @@ const i = {
   "tedi-pagination__results": "tedi-pagination__results-29d9108c",
   "tedi-pagination__nav": "tedi-pagination__nav-5f414114",
   "tedi-pagination__list": "tedi-pagination__list-03467ce1",
+  "tedi-pagination__page-jump": "tedi-pagination__page-jump-db0a15d9",
+  "tedi-pagination__page-jump-select": "tedi-pagination__page-jump-select-29430dd4",
   "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-previous": "tedi-pagination__button--nav-previous-1e74ca69",
+  "tedi-pagination__button--nav-next": "tedi-pagination__button--nav-next-80e53bed",
   "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/pagination/pagination.types.d.ts

@@ -0,0 +1,100 @@
+export type PaginationItemType = 'page' | 'previous' | 'next' | 'ellipsis';
+export interface PaginationItem {
+    type: PaginationItemType;
+    page: number | null;
+    selected: boolean;
+    disabled: boolean;
+}
+export interface PaginationLabels {
+    /**
+     * Accessible label for the nav wrapper.
+     * @default 'Pagination'
+     */
+    ariaLabel: string;
+    /**
+     * Previous button label (icon-only, used as aria-label).
+     * @default 'Previous page'
+     */
+    previous: string;
+    /**
+     * Next button label (icon-only, used as aria-label).
+     * @default 'Next page'
+     */
+    next: string;
+    /**
+     * Function that builds the aria-label for a numeric page button.
+     * @default (page) => `Go to page ${page}`
+     */
+    pageAriaLabel: (page: number) => string;
+    /**
+     * Function that builds the aria-label for the currently active page.
+     * @default (page) => `Current page, page ${page}`
+     */
+    currentPageAriaLabel: (page: number) => string;
+    /**
+     * Rendered to the left of the pagination nav when `totalItems` is set.
+     * @default (count) => `${count} results`
+     */
+    results: (count: number) => string;
+    /**
+     * Prefix label for the page-size select.
+     * @default 'Show per page'
+     */
+    pageSize: string;
+}
+export interface PaginationProps {
+    /**
+     * Total number of pages.
+     */
+    pageCount: number;
+    /**
+     * Controlled current page (1-based). Pair with `onPageChange`.
+     */
+    page?: number;
+    /**
+     * Initial page for uncontrolled mode (1-based).
+     * @default 1
+     */
+    defaultPage?: number;
+    /**
+     * Fires whenever the user navigates to a different page.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Total number of items across all pages. Renders a "{count} results" label
+     * to the left of the nav when set.
+     */
+    totalItems?: number;
+    /**
+     * Current page size. Shown in the page-size select when
+     * `pageSizeOptions` is provided.
+     */
+    pageSize?: number;
+    /**
+     * Options for the page-size select. Omit to hide the select.
+     */
+    pageSizeOptions?: number[];
+    /**
+     * 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
+     */
+    boundaryCount?: number;
+    /**
+     * Number of sibling pages shown on either side of the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Override any of the default text labels / aria labels.
+     */
+    labels?: Partial<PaginationLabels>;
+    /**
+     * Additional class name on the root element.
+     */
+    className?: string;
+}

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),s=require("../overlay/overlay.cjs.js"),l=require("./tooltip-content.cjs.js"),u=require("./tooltip-trigger.cjs.js"),c=7,a=14,e=o=>{const{openWith:t="hover",focusManager:r,...n}=o;return i.jsx(s.Overlay,{arrowDimensions:{width:a,height:c},openWith:t,role:"tooltip",focusManager:{modal:!1,order:["reference","content"],returnFocus:!0,...r},...n})};e.Trigger=u.TooltipTrigger;e.Content=l.TooltipContent;exports.Tooltip=e;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),s=require("../overlay/overlay.cjs.js"),l=require("./tooltip-content.cjs.js"),u=require("./tooltip-trigger.cjs.js"),c=7,a=14,e=o=>{const{openWith:t="hover",focusManager:r,...n}=o;return i.jsx(s.Overlay,{arrowDimensions:{width:a,height:c},openWith:t,role:"tooltip",focusManager:{modal:!1,order:["reference","content"],initialFocus:-1,returnFocus:!1,...r},...n})};e.Trigger=u.TooltipTrigger;e.Content=l.TooltipContent;exports.Tooltip=e;exports.default=e;