@tedi-design-system/react 17.1.0-rc.2 → 17.1.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "17.1.0-rc.2",
+  "version": "17.1.0-rc.4",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/community/components/table/components/pagination/pagination.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),S=require("../../../../../../external/classnames/index.cjs.js"),h=require("react"),j=require("../../../../../tedi/components/base/typography/text/text.cjs.js"),_=require("../../../form/select/select.cjs.js"),m=require("../../table-context.cjs.js"),l=require("./pagination.module.scss.cjs.js"),y=require("./PaginationNextButton.cjs.js"),z=require("./PaginationPageButton.cjs.js"),C=require("./use-pagination.cjs.js"),L=require("../../../../../tedi/providers/label-provider/use-labels.cjs.js"),N=s=>{const{getLabel:i}=L.useLabels(),{table:r,id:u}=h.useContext(m.TableContext),c=i("pagination.results",s.totalRows),{setPageSize:g,getState:d,getPageCount:p}=r,{pageIndex:b,pageSize:n}=d().pagination,o=[{value:"5",label:"5"},{value:"10",label:"10"},{value:"20",label:"20"},{value:"50",label:"50"},{value:"100",label:"100"}],f=Math.ceil(s.totalRows/n),{paginationItems:v}=C.default({page:b+1,count:f}),x=o.find(e=>e.value===String(n))??{value:String(n),label:String(n)},q=e=>{const t=parseInt((e==null?void 0:e.value)||"10");g(t)},P=(e,t)=>e.type==="previous"||e.type==="next"?a.jsx(y.default,{type:e.type},t):e.type==="ellipsis"?a.jsx("li",{className:S.default(l.default.pagination__page),children:"..."},t):a.jsx(z.default,{item:e},t);return a.jsxs("div",{className:l.default.pagination__wrapper,children:[a.jsxs(j.Text,{color:"secondary",modifiers:"small",children:[s.totalRows," ",c]}),p()>1&&a.jsx("nav",{role:"navigation","aria-label":i("pagination.title"),className:l.default.pagination,children:a.jsx("ul",{className:l.default.pagination__pages,children:v.map((e,t)=>P(e,t))})}),a.jsx(_.Select,{id:`page-size-${u}`,label:i("pagination.page-size"),hideLabel:!0,isSearchable:!1,isClearable:!1,onChange:e=>q(e),value:x,size:"small",options:o})]})};exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),S=require("../../../../../../external/classnames/index.cjs.js"),h=require("react"),j=require("../../../../../tedi/components/base/typography/text/text.cjs.js"),_=require("../../../form/select/select.cjs.js"),m=require("../../table-context.cjs.js"),l=require("./pagination.module.scss.cjs.js"),y=require("./PaginationNextButton.cjs.js"),z=require("./PaginationPageButton.cjs.js"),C=require("./use-pagination.cjs.js"),L=require("../../../../../tedi/providers/label-provider/use-labels.cjs.js"),N=i=>{const{getLabel:s}=L.useLabels(),{table:r,id:u}=h.useContext(m.TableContext),c=s("pagination.results",i.totalRows),{setPageSize:g,getState:d,getPageCount:p}=r,{pageIndex:b,pageSize:n}=d().pagination,o=[{value:"5",label:"5"},{value:"10",label:"10"},{value:"20",label:"20"},{value:"50",label:"50"},{value:"100",label:"100"}],f=Math.ceil(i.totalRows/n),{paginationItems:v}=C.default({page:b+1,count:f}),x=o.find(e=>e.value===String(n))??{value:String(n),label:String(n)},q=e=>{const t=parseInt((e==null?void 0:e.value)||"10");g(t)},P=(e,t)=>e.type==="previous"||e.type==="next"?a.jsx(y.default,{type:e.type},t):e.type==="ellipsis"?a.jsx("li",{className:S.default(l.default.pagination__page),children:"..."},t):a.jsx(z.default,{item:e},t);return a.jsxs("div",{className:l.default.pagination__wrapper,children:[a.jsx(j.Text,{color:"secondary",modifiers:"small",children:c}),p()>1&&a.jsx("nav",{role:"navigation","aria-label":s("pagination.title"),className:l.default.pagination,children:a.jsx("ul",{className:l.default.pagination__pages,children:v.map((e,t)=>P(e,t))})}),a.jsx(_.Select,{id:`page-size-${u}`,label:s("pagination.page-size"),hideLabel:!0,isSearchable:!1,isClearable:!1,onChange:e=>q(e),value:x,size:"small",options:o})]})};exports.default=N;

package/src/community/components/table/components/pagination/pagination.es.js

@@ -1,4 +1,4 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { jsxs as S, jsx as t } from "react/jsx-runtime";
 import _ from "../../../../../../external/classnames/index.es.js";
 import x from "react";
 import { Text as y } from "../../../../../tedi/components/base/typography/text/text.es.js";
@@ -6,43 +6,39 @@ import { Select as z } from "../../../form/select/select.es.js";
 import { TableContext as N } from "../../table-context.es.js";
 import n from "./pagination.module.scss.es.js";
 import C from "./PaginationNextButton.es.js";
-import w from "./PaginationPageButton.es.js";
-import L from "./use-pagination.es.js";
-import { useLabels as R } from "../../../../../tedi/providers/label-provider/use-labels.es.js";
-const D = (i) => {
-  const { getLabel: o } = R(), { table: g, id: p } = x.useContext(N), c = o("pagination.results", i.totalRows), { setPageSize: u, getState: m, getPageCount: f } = g, { pageIndex: b, pageSize: l } = m().pagination, s = [
+import L from "./PaginationPageButton.es.js";
+import w from "./use-pagination.es.js";
+import { useLabels as B } from "../../../../../tedi/providers/label-provider/use-labels.es.js";
+const D = (o) => {
+  const { getLabel: i } = B(), { table: r, id: g } = x.useContext(N), p = i("pagination.results", o.totalRows), { setPageSize: c, getState: u, getPageCount: m } = r, { pageIndex: f, pageSize: l } = u().pagination, s = [
     { value: "5", label: "5" },
     { value: "10", label: "10" },
     { value: "20", label: "20" },
     { value: "50", label: "50" },
     { value: "100", label: "100" }
-  ], d = Math.ceil(i.totalRows / l), { paginationItems: v } = L({
-    page: b + 1,
-    count: d
-  }), h = s.find((a) => a.value === String(l)) ?? {
+  ], b = Math.ceil(o.totalRows / l), { paginationItems: d } = w({
+    page: f + 1,
+    count: b
+  }), v = s.find((a) => a.value === String(l)) ?? {
     value: String(l),
     label: String(l)
-  }, P = (a) => {
+  }, h = (a) => {
     const e = parseInt((a == null ? void 0 : a.value) || "10");
-    u(e);
-  }, S = (a, e) => a.type === "previous" || a.type === "next" ? /* @__PURE__ */ t(C, { type: a.type }, e) : a.type === "ellipsis" ? /* @__PURE__ */ t("li", { className: _(n.pagination__page), children: "..." }, e) : /* @__PURE__ */ t(w, { item: a }, e);
-  return /* @__PURE__ */ r("div", { className: n.pagination__wrapper, children: [
-    /* @__PURE__ */ r(y, { color: "secondary", modifiers: "small", children: [
-      i.totalRows,
-      " ",
-      c
-    ] }),
-    f() > 1 && /* @__PURE__ */ t("nav", { role: "navigation", "aria-label": o("pagination.title"), className: n.pagination, children: /* @__PURE__ */ t("ul", { className: n.pagination__pages, children: v.map((a, e) => S(a, e)) }) }),
+    c(e);
+  }, P = (a, e) => a.type === "previous" || a.type === "next" ? /* @__PURE__ */ t(C, { type: a.type }, e) : a.type === "ellipsis" ? /* @__PURE__ */ t("li", { className: _(n.pagination__page), children: "..." }, e) : /* @__PURE__ */ t(L, { item: a }, e);
+  return /* @__PURE__ */ S("div", { className: n.pagination__wrapper, children: [
+    /* @__PURE__ */ t(y, { color: "secondary", modifiers: "small", children: p }),
+    m() > 1 && /* @__PURE__ */ t("nav", { role: "navigation", "aria-label": i("pagination.title"), className: n.pagination, children: /* @__PURE__ */ t("ul", { className: n.pagination__pages, children: d.map((a, e) => P(a, e)) }) }),
     /* @__PURE__ */ t(
       z,
       {
-        id: `page-size-${p}`,
-        label: o("pagination.page-size"),
+        id: `page-size-${g}`,
+        label: i("pagination.page-size"),
         hideLabel: !0,
         isSearchable: !1,
         isClearable: !1,
-        onChange: (a) => P(a),
-        value: h,
+        onChange: (a) => h(a),
+        value: v,
         size: "small",
         options: s
       }

package/src/tedi/components/misc/empty-state/empty-state.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),n=require("../../base/icon/icon.cjs.js"),y=require("../../base/typography/heading/heading.cjs.js"),f=require("../../base/typography/text/text.cjs.js"),t=require("./empty-state.module.scss.cjs.js"),l=({type:c="separate",size:o="default",icon:s="spa",heading:a,children:d,actions:r,className:m})=>{const u=p.default(t.default["tedi-empty-state"],t.default[`tedi-empty-state--${c}`],t.default[`tedi-empty-state--${o}`],m),i=s===null?null:typeof s=="string"?e.jsx(n.Icon,{name:s,size:36,color:"brand"}):e.jsx(n.Icon,{size:36,color:"brand",...s});return e.jsxs("div",{"data-name":"tedi-empty-state",className:u,children:[e.jsxs("div",{className:t.default["tedi-empty-state__text"],children:[i&&e.jsx("div",{className:t.default["tedi-empty-state__icon"],children:i}),(a||d)&&e.jsxs("div",{className:t.default["tedi-empty-state__content"],children:[a&&e.jsx(y.Heading,{className:t.default["tedi-empty-state__heading"],element:"h3",modifiers:"h3",color:"brand",children:a}),d&&e.jsx(f.Text,{className:t.default["tedi-empty-state__description"],color:"secondary",modifiers:"center",children:d})]})]}),r&&e.jsx("div",{className:t.default["tedi-empty-state__actions"],children:r})]})};l.displayName="EmptyState";exports.EmptyState=l;

package/src/tedi/components/misc/empty-state/empty-state.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { IconWithoutBackgroundProps } from '../../base/icon/icon';
+export type EmptyStateType = 'separate' | 'attached' | 'inside';
+export type EmptyStateSize = 'default' | 'small';
+export interface EmptyStateProps {
+    /**
+     * Container variant — matches the Figma "Types" section.
+     * - `'separate'` (default) — full border + radius, stands on its own.
+     * - `'attached'` — top border omitted so the block sits flush beneath a
+     *   preceding card or table (same width + same bottom-radius).
+     * - `'inside'` — no border, no radius; intended to be placed inside another
+     *   container such as a `<Card>` or `<Table>`.
+     * @default separate
+     */
+    type?: EmptyStateType;
+    /**
+     * Padding scale. `default` = 24px, `small` = 16px.
+     * @default default
+     */
+    size?: EmptyStateSize;
+    /**
+     * Icon rendered above the text block. Pass a Material icon name, a full
+     * `IconWithoutBackgroundProps` object to configure the underlying `Icon`,
+     * or `null` to hide the icon.
+     * @default spa
+     */
+    icon?: string | IconWithoutBackgroundProps | null;
+    /**
+     * Optional heading rendered above the description — appears as an H3 in
+     * brand-primary text color.
+     */
+    heading?: React.ReactNode;
+    /**
+     * Main body text describing why there is nothing to show.
+     */
+    children?: React.ReactNode;
+    /**
+     * Call-to-action slot. Typically a `<Button>` (or two) or a `<Link>`.
+     * Rendered below the text block.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Additional class name on the root element.
+     */
+    className?: string;
+}
+export declare const EmptyState: {
+    ({ type, size, icon, heading, children, actions, className, }: EmptyStateProps): JSX.Element;
+    displayName: string;
+};
+export default EmptyState;

package/src/tedi/components/misc/empty-state/empty-state.es.js

@@ -0,0 +1,36 @@
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import y from "../../../../../external/classnames/index.es.js";
+import { Icon as d } from "../../base/icon/icon.es.js";
+import { Heading as f } from "../../base/typography/heading/heading.es.js";
+import { Text as _ } from "../../base/typography/text/text.es.js";
+import e from "./empty-state.module.scss.es.js";
+const N = ({
+  type: n = "separate",
+  size: l = "default",
+  icon: s = "spa",
+  heading: a,
+  children: r,
+  actions: i,
+  className: p
+}) => {
+  const c = y(
+    e["tedi-empty-state"],
+    e[`tedi-empty-state--${n}`],
+    e[`tedi-empty-state--${l}`],
+    p
+  ), o = s === null ? null : typeof s == "string" ? /* @__PURE__ */ t(d, { name: s, size: 36, color: "brand" }) : /* @__PURE__ */ t(d, { size: 36, color: "brand", ...s });
+  return /* @__PURE__ */ m("div", { "data-name": "tedi-empty-state", className: c, children: [
+    /* @__PURE__ */ m("div", { className: e["tedi-empty-state__text"], children: [
+      o && /* @__PURE__ */ t("div", { className: e["tedi-empty-state__icon"], children: o }),
+      (a || r) && /* @__PURE__ */ m("div", { className: e["tedi-empty-state__content"], children: [
+        a && /* @__PURE__ */ t(f, { className: e["tedi-empty-state__heading"], element: "h3", modifiers: "h3", color: "brand", children: a }),
+        r && /* @__PURE__ */ t(_, { className: e["tedi-empty-state__description"], color: "secondary", modifiers: "center", children: r })
+      ] })
+    ] }),
+    i && /* @__PURE__ */ t("div", { className: e["tedi-empty-state__actions"], children: i })
+  ] });
+};
+N.displayName = "EmptyState";
+export {
+  N as EmptyState
+};

package/src/tedi/components/misc/empty-state/empty-state.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-empty-state":"tedi-empty-state-fa18a0c7","tedi-empty-state--small":"tedi-empty-state--small-cd55192d","tedi-empty-state--attached":"tedi-empty-state--attached-34f9494f","tedi-empty-state--inside":"tedi-empty-state--inside-59a35f4a","tedi-empty-state__text":"tedi-empty-state__text-3356405a","tedi-empty-state__icon":"tedi-empty-state__icon-b7c0b65c","tedi-empty-state__content":"tedi-empty-state__content-8f9e9b61","tedi-empty-state__heading":"tedi-empty-state__heading-a8adf6aa","tedi-empty-state__description":"tedi-empty-state__description-4c540947","tedi-empty-state__actions":"tedi-empty-state__actions-bff9b270"};exports.default=t;

package/src/tedi/components/misc/empty-state/empty-state.module.scss.es.js

@@ -0,0 +1,15 @@
+const t = {
+  "tedi-empty-state": "tedi-empty-state-fa18a0c7",
+  "tedi-empty-state--small": "tedi-empty-state--small-cd55192d",
+  "tedi-empty-state--attached": "tedi-empty-state--attached-34f9494f",
+  "tedi-empty-state--inside": "tedi-empty-state--inside-59a35f4a",
+  "tedi-empty-state__text": "tedi-empty-state__text-3356405a",
+  "tedi-empty-state__icon": "tedi-empty-state__icon-b7c0b65c",
+  "tedi-empty-state__content": "tedi-empty-state__content-8f9e9b61",
+  "tedi-empty-state__heading": "tedi-empty-state__heading-a8adf6aa",
+  "tedi-empty-state__description": "tedi-empty-state__description-4c540947",
+  "tedi-empty-state__actions": "tedi-empty-state__actions-bff9b270"
+};
+export {
+  t as default
+};

package/src/tedi/components/misc/empty-state/index.d.ts

@@ -0,0 +1 @@
+export * from './empty-state';

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

@@ -0,0 +1,2 @@
+export * from './pagination';
+export * from './use-pagination';

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,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"),x=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"),N=s.forwardRef((S,j)=>{const{pageCount:u,page:f,defaultPage:z=1,onPageChange:d,totalItems:m,pageSize:b,pageSizeOptions:l,onPageSizeChange:c,boundaryCount:L=1,siblingCount:q=1,labels:h,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"),...h}),[i,h]),[C,P]=s.useState(z),_=f??C,w=E.usePagination({page:_,pageCount:u,boundaryCount:L,siblingCount:q}),v=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]),I=s.useMemo(()=>b===void 0?p[0]??null:p.find(e=>e.value===String(b))??null,[b,p]),M=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=m!==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(m)})}),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(x.Button,{type:"button",className:g.default(a.default["tedi-pagination__button"],a.default["tedi-pagination__button--nav"]),"aria-label":B,onClick:()=>e.page!==null&&v(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(x.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:()=>v(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:I,onChange:M,isSearchable:!1,isClearable:!1})]})})]})});N.displayName="Pagination";exports.Pagination=N;

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

@@ -0,0 +1,102 @@
+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;
+}
+export declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Pagination;

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

@@ -0,0 +1,131 @@
+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 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) => {
+  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(
+    () => ({
+      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
+    }),
+    [t, h]
+  ), [x, I] = E(C), _ = u ?? x, O = J({ page: _, pageCount: o, boundaryCount: P, siblingCount: w }), N = y(
+    (e) => {
+      e === _ || e < 1 || e > o || (u === void 0 && I(e), p == null || p(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(
+    (e) => {
+      const l = Array.isArray(e) ? e[0] : e;
+      l && "value" in l && (c == null || c(Number(l.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";
+        return /* @__PURE__ */ i("li", { className: a["tedi-pagination__item"], children: /* @__PURE__ */ i(
+          z,
+          {
+            type: "button",
+            className: g(a["tedi-pagination__button"], a["tedi-pagination__button--nav"]),
+            "aria-label": U,
+            onClick: () => e.page !== null && N(e.page),
+            noStyle: !0,
+            children: /* @__PURE__ */ i(G, { name: q, size: 18, color: "brand" })
+          }
+        ) }, e.type);
+      }
+      const r = e.page;
+      return /* @__PURE__ */ i("li", { className: a["tedi-pagination__item"], children: /* @__PURE__ */ i(
+        z,
+        {
+          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
+        }
+      ) }, r);
+    }) }) }) }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-end"], children: T && /* @__PURE__ */ v("div", { className: a["tedi-pagination__page-size"], children: [
+      /* @__PURE__ */ i(
+        S,
+        {
+          className: a["tedi-pagination__page-size-label"],
+          color: "secondary",
+          modifiers: "small",
+          element: "span",
+          children: n.pageSize
+        }
+      ),
+      /* @__PURE__ */ i(
+        H,
+        {
+          id: `tedi-pagination-page-size-${j}`,
+          className: a["tedi-pagination__select"],
+          label: n.pageSize,
+          hideLabel: !0,
+          size: "small",
+          options: d,
+          value: R,
+          onChange: $,
+          isSearchable: !1,
+          isClearable: !1
+        }
+      )
+    ] }) })
+  ] });
+});
+Q.displayName = "Pagination";
+export {
+  Q as Pagination
+};

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

@@ -0,0 +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;

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

@@ -0,0 +1,20 @@
+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"
+};
+export {
+  i as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=(r,e)=>e<r?[]:Array.from({length:e-r+1},(c,n)=>r+n);function m({page:r,pageCount:e,boundaryCount:c=1,siblingCount:n=1}){if(e<=0)return[];const l=Math.max(0,c),t=Math.max(0,n),s=Math.max(1,Math.min(e,r)),f=l*2+t*2+3;let d;if(e<=f)d=i(1,e);else{const a=l+t*2+2,o=l+t+2,h=e-l-t-1;s<=o?d=[...i(1,a),"ellipsis",...i(e-l+1,e)]:s>=h?d=[...i(1,l),"ellipsis",...i(e-a+1,e)]:d=[...i(1,l),"ellipsis",...i(s-t,s+t),"ellipsis",...i(e-l+1,e)]}return[{type:"previous",page:s>1?s-1:null,selected:!1,disabled:s<=1},...d.map(a=>a==="ellipsis"?{type:"ellipsis",page:null,selected:!1,disabled:!0}:{type:"page",page:a,selected:a===s,disabled:!1}),{type:"next",page:s<e?s+1:null,selected:!1,disabled:s>=e}]}exports.usePagination=m;

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

@@ -0,0 +1,28 @@
+import { PaginationItem } from './pagination';
+export interface UsePaginationArgs {
+    /** 1-based current page. */
+    page: number;
+    /** Total page count. */
+    pageCount: number;
+    /** Pages always shown at the very start and very end. */
+    boundaryCount?: number;
+    /** Pages shown on either side of the current page. */
+    siblingCount?: number;
+}
+/**
+ * Computes the ordered list of pagination items (previous, page-buttons,
+ * ellipsis, next).
+ *
+ * The algorithm targets a stable slot count: for any `pageCount` larger than
+ * the window size, the returned list always has the same number of page
+ * entries (`boundaryCount * 2 + siblingCount * 2 + 3`). As the current page
+ * moves toward a boundary, the corresponding ellipsis is swapped for an extra
+ * adjacent page number rather than collapsing the list — the visual row does
+ * not expand or contract as the user navigates.
+ *
+ * Edge cases:
+ * - `pageCount <= 0` → returns `[]`.
+ * - `page` is clamped to `[1, pageCount]` before computation.
+ * - `pageCount <= window size` → every page is rendered, no ellipsis.
+ */
+export declare function usePagination({ page, pageCount, boundaryCount, siblingCount, }: UsePaginationArgs): PaginationItem[];

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

@@ -0,0 +1,48 @@
+const i = (d, e) => e < d ? [] : Array.from({ length: e - d + 1 }, (n, c) => d + c);
+function o({
+  page: d,
+  pageCount: e,
+  boundaryCount: n = 1,
+  siblingCount: c = 1
+}) {
+  if (e <= 0) return [];
+  const l = Math.max(0, n), t = Math.max(0, c), s = Math.max(1, Math.min(e, d)), f = l * 2 + t * 2 + 3;
+  let r;
+  if (e <= f)
+    r = i(1, e);
+  else {
+    const a = l + t * 2 + 2, h = l + t + 2, m = e - l - t - 1;
+    s <= h ? r = [...i(1, a), "ellipsis", ...i(e - l + 1, e)] : s >= m ? r = [...i(1, l), "ellipsis", ...i(e - a + 1, e)] : r = [
+      ...i(1, l),
+      "ellipsis",
+      ...i(s - t, s + t),
+      "ellipsis",
+      ...i(e - l + 1, e)
+    ];
+  }
+  return [
+    {
+      type: "previous",
+      page: s > 1 ? s - 1 : null,
+      selected: !1,
+      disabled: s <= 1
+    },
+    ...r.map(
+      (a) => a === "ellipsis" ? { type: "ellipsis", page: null, selected: !1, disabled: !0 } : {
+        type: "page",
+        page: a,
+        selected: a === s,
+        disabled: !1
+      }
+    ),
+    {
+      type: "next",
+      page: s < e ? s + 1 : null,
+      selected: !1,
+      disabled: s >= e
+    }
+  ];
+}
+export {
+  o as usePagination
+};

package/src/tedi/index.d.ts

@@ -21,10 +21,12 @@ export * from './components/buttons/collapse/collapse';
 export * from './components/layout/vertical-spacing';
 export * from './components/layout/grid';
 export * from './components/notifications/alert/alert';
+export * from './components/misc/empty-state';
 export * from './components/notifications/toast/toast';
 export * from './components/cards/card';
 export * from './components/navigation/hash-trigger/hash-trigger';
 export * from './components/navigation/link/link';
+export * from './components/navigation/pagination';
 export * from './components/navigation/tabs';
 export * from './components/form/textfield/textfield';
 export * from './components/form/textarea/textarea';