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

package/src/tedi/components/filter/filter/filter.es.js

@@ -0,0 +1,236 @@
+import { jsxs as p, Fragment as g, jsx as t } from "react/jsx-runtime";
+import ue from "../../../../../external/classnames/index.es.js";
+import Je, { forwardRef as Ke, useContext as Qe, useRef as Ue, useState as O, useMemo as S, useEffect as Ve, useCallback as C } from "react";
+import { Icon as fe } from "../../base/icon/icon.es.js";
+import { Button as J } from "../../buttons/button/button.es.js";
+import { Checkbox as me } from "../../form/checkbox/checkbox.es.js";
+import { Search as Xe } from "../../form/search/search.es.js";
+import { Dropdown as c } from "../../overlays/dropdown/dropdown.es.js";
+import { StatusBadge as Ye } from "../../tags/status-badge/status-badge.es.js";
+import i from "./filter.module.scss.es.js";
+import { FilterGroupContext as et } from "./filter-group-context.es.js";
+import { useBreakpointProps as tt } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as lt } from "../../../providers/label-provider/use-labels.es.js";
+const he = (_) => _ === "large" ? 24 : 18, rt = (_) => {
+  const v = Je.useId();
+  return _ ?? `tedi-filter-${v.replace(/[^a-zA-Z0-9-]/g, "")}`;
+}, it = Ke((_, v) => {
+  const { getCurrentBreakpointProps: pe } = tt(_.defaultServerBreakpoint), {
+    text: w,
+    value: k,
+    disabled: ve = !1,
+    className: be,
+    id: K,
+    selected: y,
+    defaultSelected: Q = !1,
+    onSelectedChange: I,
+    selectedValue: L,
+    defaultSelectedValue: ge,
+    onSelectedValueChange: d,
+    multiselect: U = !1,
+    selectedValues: u,
+    defaultSelectedValues: Se,
+    onSelectedValuesChange: s,
+    options: N = [],
+    searchable: _e = !1,
+    showSelectAll: we = !1,
+    selectAllLabel: Le,
+    showClear: V = !1,
+    clearLabel: Ne,
+    preserveLabel: X = !1,
+    children: Y,
+    onClear: P,
+    prepend: A,
+    hidePrependWhenSelected: xe = !0,
+    append: R,
+    placement: Ce = "bottom-start",
+    variant: ke = "primary",
+    size: M = "default",
+    searchLabel: ee
+  } = pe(_), { getLabel: te } = lt(), ye = Le ?? te("filter.select-all"), le = Ne ?? te("filter.clear-selection"), n = Qe(et), B = rt(K), Ie = Ue(null), G = N.length > 0, $ = !!Y, b = G || $, f = G && !U, m = G && U, F = !!(n != null && n.isManaged) && k !== void 0 && !b, D = F && !(n != null && n.multiselect), re = ve || ((n == null ? void 0 : n.disabled) ?? !1), [Be, $e] = O(Q), [Fe, ie] = O(ge ?? ""), [Oe, j] = O(Se ?? []);
+  $ && (Q || I) && y === void 0 && console.warn(
+    "[Filter] `defaultSelected` and `onSelectedChange` are not honoured in custom-content mode (when `children` is provided). Drive the selected state yourself via the controlled `selected` prop, e.g. `selected={Boolean(value)}`."
+  );
+  const T = y !== void 0 ? y : Be, h = L !== void 0 ? L : Fe, r = u !== void 0 ? u : Oe, x = S(() => F ? n.isSelected(k) : m ? r.length > 0 : f ? h !== "" : T, [F, k, n, m, r, f, h, T]), z = S(() => {
+    var e;
+    return !f || !h ? null : ((e = N.find((l) => l.value === h)) == null ? void 0 : e.label) ?? null;
+  }, [f, h, N]), Pe = S(() => f ? z && X ? `${w}: ${z}` : z ?? w : w, [f, z, X, w]), [E, ne] = O(!1), [W, se] = O("");
+  Ve(() => {
+    E || se("");
+  }, [E]);
+  const Z = S(() => {
+    const e = W.trim().toLowerCase();
+    return e ? N.filter((l) => l.label.toLowerCase().includes(e)) : N;
+  }, [W, N]), a = S(() => Z.filter((e) => !e.disabled), [Z]), q = S(() => a.length === 0 ? !1 : a.every((e) => r.includes(e.value)), [a, r]), Te = S(() => {
+    if (a.length === 0) return !1;
+    const e = a.filter((l) => r.includes(l.value)).length;
+    return e > 0 && e < a.length;
+  }, [a, r]), ze = C(
+    (e) => {
+      Ie.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
+    },
+    [v]
+  ), Ae = C(() => {
+    if (F) {
+      n.selectFilter(k);
+      return;
+    }
+    const e = !T;
+    y === void 0 && $e(e), I == null || I(e);
+  }, [F, n, k, T, y, I]), Re = C(
+    (e) => {
+      const l = h === e ? "" : e;
+      L === void 0 && ie(l), d == null || d(l);
+    },
+    [h, L, d]
+  ), Me = C(
+    (e) => {
+      const l = r.includes(e) ? r.filter((o) => o !== e) : [...r, e];
+      u === void 0 && j(l), s == null || s(l);
+    },
+    [r, u, s]
+  ), Ge = C(() => {
+    let e;
+    if (q) {
+      const l = new Set(a.map((o) => o.value));
+      e = r.filter((o) => !l.has(o));
+    } else {
+      const l = new Set(r);
+      a.forEach((o) => l.add(o.value)), e = [...l];
+    }
+    u === void 0 && j(e), s == null || s(e);
+  }, [q, a, r, u, s]), ae = C(() => {
+    $ ? P == null || P() : m ? (u === void 0 && j([]), s == null || s([])) : f && (L === void 0 && ie(""), d == null || d("")), ne(!1);
+  }, [
+    $,
+    P,
+    m,
+    u,
+    s,
+    f,
+    L,
+    d
+  ]), De = x && xe, je = D ? "radio" : void 0, Ee = D ? x : void 0, We = !b && !D ? x : void 0, Ze = /* @__PURE__ */ p(g, { children: [
+    !b && x && /* @__PURE__ */ t(fe, { className: i["tedi-filter__icon"], name: "check", size: he(M), color: "inherit" }),
+    A != null && /* @__PURE__ */ t(
+      "span",
+      {
+        className: ue(i["tedi-filter__prepend"], {
+          [i["tedi-filter__prepend--hidden"]]: De
+        }),
+        children: A
+      }
+    ),
+    /* @__PURE__ */ t("span", { className: i["tedi-filter__text"], children: Pe }),
+    R != null && /* @__PURE__ */ t("span", { className: i["tedi-filter__append"], children: R }),
+    m && x && r.length > 0 && /* @__PURE__ */ t(Ye, { className: i["tedi-filter__count"], color: re ? "neutral" : "brand", children: String(r.length) }),
+    b && /* @__PURE__ */ t(
+      fe,
+      {
+        className: i["tedi-filter__icon"],
+        name: "arrow_drop_down",
+        filled: !0,
+        size: he(M),
+        color: "inherit"
+      }
+    )
+  ] }), oe = ue(
+    i["tedi-filter"],
+    i[`tedi-filter--${ke}`],
+    M === "large" && i["tedi-filter--large"],
+    x && i["tedi-filter--selected"],
+    be
+  ), ce = /* @__PURE__ */ t(
+    J,
+    {
+      ref: ze,
+      id: K,
+      type: "button",
+      disabled: re,
+      className: i["tedi-filter__button"],
+      onClick: b ? void 0 : Ae,
+      role: b ? void 0 : je,
+      "aria-checked": Ee,
+      "aria-pressed": We,
+      noStyle: !0,
+      children: Ze
+    }
+  );
+  if (!b)
+    return /* @__PURE__ */ t("div", { className: oe, children: ce });
+  const H = m && we ? 0 : null, qe = H !== null ? 1 : 0, He = () => Z.map((e, l) => {
+    const o = m ? r.includes(e.value) : h === e.value, de = l + qe;
+    return m ? /* @__PURE__ */ t(c.Item, { index: de, asChild: !0, disabled: e.disabled, closeOnSelect: !1, children: /* @__PURE__ */ t(
+      me,
+      {
+        id: `${B}-option-${l}`,
+        label: e.label,
+        value: e.value,
+        checked: o,
+        disabled: e.disabled,
+        onChange: () => Me(e.value),
+        name: `${B}-options`
+      }
+    ) }, e.value) : /* @__PURE__ */ t(
+      c.Item,
+      {
+        index: de,
+        disabled: e.disabled,
+        active: o,
+        onClick: () => Re(e.value),
+        children: e.label
+      },
+      e.value
+    );
+  });
+  return /* @__PURE__ */ t("div", { className: oe, children: /* @__PURE__ */ p(c, { open: E, onOpenChange: ne, placement: Ce, width: "auto", children: [
+    /* @__PURE__ */ t(c.Trigger, { children: ce }),
+    /* @__PURE__ */ t(c.Content, { children: $ ? /* @__PURE__ */ p(g, { children: [
+      /* @__PURE__ */ t("div", { className: i["tedi-filter-dropdown__custom-content"], children: Y }),
+      V && /* @__PURE__ */ p(g, { children: [
+        /* @__PURE__ */ t(c.Separator, {}),
+        /* @__PURE__ */ t("div", { className: i["tedi-filter-dropdown__clear"], children: /* @__PURE__ */ t(J, { visualType: "neutral", size: "small", type: "button", iconLeft: "refresh", onClick: ae, children: le }) })
+      ] })
+    ] }) : /* @__PURE__ */ p(g, { children: [
+      _e && /* @__PURE__ */ p(g, { children: [
+        /* @__PURE__ */ t("div", { className: i["tedi-filter-dropdown__search"], children: /* @__PURE__ */ t(
+          Xe,
+          {
+            id: `${B}-search`,
+            label: ee ?? w,
+            hideLabel: !0,
+            ariaLabel: ee ?? w,
+            value: W,
+            onChange: se
+          }
+        ) }),
+        /* @__PURE__ */ t(c.Separator, {})
+      ] }),
+      H !== null && /* @__PURE__ */ p(g, { children: [
+        /* @__PURE__ */ t(c.Item, { index: H, asChild: !0, closeOnSelect: !1, children: /* @__PURE__ */ t(
+          me,
+          {
+            id: `${B}-select-all`,
+            label: ye,
+            value: "select-all",
+            checked: q,
+            indeterminate: Te,
+            onChange: Ge,
+            name: `${B}-select-all`
+          }
+        ) }),
+        /* @__PURE__ */ t(c.Separator, {})
+      ] }),
+      He(),
+      V && /* @__PURE__ */ p(g, { children: [
+        /* @__PURE__ */ t(c.Separator, {}),
+        /* @__PURE__ */ t("div", { className: i["tedi-filter-dropdown__clear"], children: /* @__PURE__ */ t(J, { visualType: "neutral", size: "small", type: "button", iconLeft: "refresh", onClick: ae, children: le }) })
+      ] })
+    ] }) })
+  ] }) });
+});
+it.displayName = "Filter";
+export {
+  it as Filter,
+  it as default
+};

package/src/tedi/components/filter/filter/filter.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-filter":"tedi-filter-e3f2f618","tedi-filter__button":"tedi-filter__button-b7abc5ed","tedi-filter__text":"tedi-filter__text-2c4eaab6","tedi-filter__icon":"tedi-filter__icon-1b8e93f2","tedi-filter__prepend":"tedi-filter__prepend-68dc0007","tedi-filter__append":"tedi-filter__append-bdb27679","tedi-filter__prepend--hidden":"tedi-filter__prepend--hidden-5039af1e","tedi-filter__count":"tedi-filter__count-d72acead","tedi-filter--primary":"tedi-filter--primary-837108e8","tedi-filter--selected":"tedi-filter--selected-7273f310","tedi-filter--secondary":"tedi-filter--secondary-8aaf488e","tedi-filter--large":"tedi-filter--large-f7f46174","tedi-filter-group":"tedi-filter-group-9d16304d","tedi-filter-dropdown__custom-content":"tedi-filter-dropdown__custom-content-6e851b26","tedi-filter-dropdown__search":"tedi-filter-dropdown__search-dbb4e1a3","tedi-filter-dropdown__clear":"tedi-filter-dropdown__clear-fa4e6a11"};exports.default=e;

package/src/tedi/components/filter/filter/filter.module.scss.es.js

@@ -0,0 +1,21 @@
+const e = {
+  "tedi-filter": "tedi-filter-e3f2f618",
+  "tedi-filter__button": "tedi-filter__button-b7abc5ed",
+  "tedi-filter__text": "tedi-filter__text-2c4eaab6",
+  "tedi-filter__icon": "tedi-filter__icon-1b8e93f2",
+  "tedi-filter__prepend": "tedi-filter__prepend-68dc0007",
+  "tedi-filter__append": "tedi-filter__append-bdb27679",
+  "tedi-filter__prepend--hidden": "tedi-filter__prepend--hidden-5039af1e",
+  "tedi-filter__count": "tedi-filter__count-d72acead",
+  "tedi-filter--primary": "tedi-filter--primary-837108e8",
+  "tedi-filter--selected": "tedi-filter--selected-7273f310",
+  "tedi-filter--secondary": "tedi-filter--secondary-8aaf488e",
+  "tedi-filter--large": "tedi-filter--large-f7f46174",
+  "tedi-filter-group": "tedi-filter-group-9d16304d",
+  "tedi-filter-dropdown__custom-content": "tedi-filter-dropdown__custom-content-6e851b26",
+  "tedi-filter-dropdown__search": "tedi-filter-dropdown__search-dbb4e1a3",
+  "tedi-filter-dropdown__clear": "tedi-filter-dropdown__clear-fa4e6a11"
+};
+export {
+  e as default
+};

package/src/tedi/components/filter/filter/index.d.ts

@@ -0,0 +1,3 @@
+export * from './filter';
+export * from './filter-group';
+export * from './filter-group-context';

package/src/tedi/components/form/search/search.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),j=require("react"),v=require("../../buttons/button/button.cjs.js"),L=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),N=require("../../../providers/label-provider/use-labels.cjs.js"),u=j.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,className:h,...t},_)=>{const{getLabel:l}=N.useLabels(),m=y=>{y.key==="Enter"&&(a==null||a(t.value))},x=()=>{a==null||a(t.value)},b={...t,ref:_,inputClassName:i.default(s.default["tedi-search__input"],e&&s.default["tedi-search__input--has-button"],h),placeholder:c,isClearable:d,onKeyDown:m,onChange:o,...e?{}:{icon:n}},p=c||l("search"),q=f??p;return r.jsxs("div",{className:i.default(s.default["tedi-search__wrapper"]),role:"search","aria-label":q,children:[r.jsx(L.TextField,{...b}),e&&r.jsx(v.Button,{...e,onClick:x,className:i.default(s.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:l("search"),children:e.children??l("search")})]})});u.displayName="Search";exports.Search=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),v=require("react"),L=require("../../buttons/button/button.cjs.js"),N=require("../textfield/textfield.cjs.js"),s=require("./search.module.scss.cjs.js"),w=require("../../../providers/label-provider/use-labels.cjs.js"),u=v.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,className:h,input:x,...t},_)=>{const{getLabel:r}=w.useLabels(),b=j=>{j.key==="Enter"&&(a==null||a(t.value))},m=()=>{a==null||a(t.value)},p={...t,ref:_,inputClassName:i.default(s.default["tedi-search__input"],e&&s.default["tedi-search__input--has-button"],h),placeholder:c,isClearable:d,onKeyDown:b,onChange:o,input:{...x,role:"searchbox"},...e?{}:{icon:n}},q=c||r("search"),y=f??q;return l.jsxs("div",{className:i.default(s.default["tedi-search__wrapper"]),role:"search","aria-label":y,children:[l.jsx(N.TextField,{...p}),e&&l.jsx(L.Button,{...e,onClick:m,className:i.default(s.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:r("search"),children:e.children??r("search")})]})});u.displayName="Search";exports.Search=u;

package/src/tedi/components/form/search/search.es.js

@@ -1,40 +1,42 @@
-import { jsxs as v, jsx as c } from "react/jsx-runtime";
+import { jsxs as w, jsx as c } from "react/jsx-runtime";
 import l from "../../../../../external/classnames/index.es.js";
-import { forwardRef as w } from "react";
-import { Button as L } from "../../buttons/button/button.es.js";
+import { forwardRef as L } from "react";
+import { Button as b } from "../../buttons/button/button.es.js";
 import { TextField as k } from "../textfield/textfield.es.js";
 import a from "./search.module.scss.es.js";
 import { useLabels as C } from "../../../providers/label-provider/use-labels.es.js";
-const b = w(
+const j = L(
   ({
     placeholder: t,
-    isClearable: m = !0,
-    searchIcon: o = "search",
+    isClearable: o = !0,
+    searchIcon: m = "search",
     onSearch: s,
     onChange: d,
     button: e,
     ariaLabel: p,
     className: n,
+    input: f,
     ...r
-  }, f) => {
-    const { getLabel: i } = C(), h = (y) => {
-      y.key === "Enter" && (s == null || s(r.value));
+  }, h) => {
+    const { getLabel: i } = C(), u = (v) => {
+      v.key === "Enter" && (s == null || s(r.value));
     }, _ = () => {
       s == null || s(r.value);
-    }, u = {
+    }, x = {
       ...r,
-      ref: f,
+      ref: h,
       inputClassName: l(a["tedi-search__input"], e && a["tedi-search__input--has-button"], n),
       placeholder: t,
-      isClearable: m,
-      onKeyDown: h,
+      isClearable: o,
+      onKeyDown: u,
       onChange: d,
-      ...e ? {} : { icon: o }
-    }, N = t || i("search"), x = p ?? N;
-    return /* @__PURE__ */ v("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": x, children: [
-      /* @__PURE__ */ c(k, { ...u }),
+      input: { ...f, role: "searchbox" },
+      ...e ? {} : { icon: m }
+    }, N = t || i("search"), y = p ?? N;
+    return /* @__PURE__ */ w("div", { className: l(a["tedi-search__wrapper"]), role: "search", "aria-label": y, children: [
+      /* @__PURE__ */ c(k, { ...x }),
       e && /* @__PURE__ */ c(
-        L,
+        b,
         {
           ...e,
           onClick: _,
@@ -46,7 +48,7 @@ const b = w(
     ] });
   }
 );
-b.displayName = "Search";
+j.displayName = "Search";
 export {
-  b as Search
+  j as Search
 };

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 {
     /**