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

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;

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

@@ -1,29 +1,37 @@
 import { jsx as i } from "react/jsx-runtime";
 import { Overlay as s } from "../overlay/overlay.es.js";
 import { TooltipContent as a } from "./tooltip-content.es.js";
-import { TooltipTrigger as m } from "./tooltip-trigger.es.js";
-const p = 7, c = 14, o = (r) => {
+import { TooltipTrigger as l } from "./tooltip-trigger.es.js";
+const c = 7, f = 14, o = (r) => {
   const { openWith: t = "hover", focusManager: e, ...n } = r;
   return /* @__PURE__ */ i(
     s,
     {
       arrowDimensions: {
-        width: c,
-        height: p
+        width: f,
+        height: c
       },
       openWith: t,
       role: "tooltip",
       focusManager: {
         modal: !1,
         order: ["reference", "content"],
-        returnFocus: !0,
+        // Tooltips are non-interactive (just descriptive text), so the focus
+        // manager must not move focus on open or close. `initialFocus: -1`
+        // skips the programmatic `.focus()` on the trigger when the tooltip
+        // mounts — that programmatic focus is what the browser's
+        // `:focus-visible` heuristic was upgrading to a "keyboard-style" ring,
+        // leaving the trigger painted with the focus border after a plain
+        // hover or mouse click.
+        initialFocus: -1,
+        returnFocus: !1,
         ...e
       },
       ...n
     }
   );
 };
-o.Trigger = m;
+o.Trigger = l;
 o.Content = a;
 export {
   o as Tooltip,

package/src/tedi/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/content/label/label';
 export * from './components/content/section/section';
 export * from './components/content/heading-with-icon/heading-with-icon';
 export * from './components/content/truncate/truncate';
+export * from './components/content/table';
 export * from './components/content/text-group';
 export * from './components/content/calendar/calendar';
 export * from './components/loaders/spinner/spinner';
@@ -46,6 +47,7 @@ export * from './components/form/time-picker/time-picker';
 export * from './components/form/checkbox/checkbox';
 export * from './components/form/slider/slider';
 export * from './components/form/date-field/date-field';
+export * from './components/filter/filter';
 export * from './components/form/input-group';
 export * from './components/form/field/field';
 export * from './components/overlays/tooltip';