@payfit/unity-components 1.1.0 → 1.2.0

package/dist/esm/components/collapsible/parts/CollapsibleTitle.js

@@ -3,7 +3,7 @@ import { forwardRef as d, useContext as m } from "react";
 import { uyTv as p } from "@payfit/unity-themes";
 import { DisclosureStateContext as f, Heading as x, Button as b } from "react-aria-components";
 import { Icon as v } from "../../icon/Icon.js";
-import { Text as r } from "../../text/Text.js";
+import { Text as o } from "../../text/Text.js";
 const g = p({
   slots: {
     base: "uy:w-full",
@@ -27,11 +27,11 @@ const g = p({
     isExpanded: !1
   }
 }), w = d(
-  ({ children: a, suffix: o, ...n }, i) => {
-    const e = m(f), { base: l, button: s, title: u, icon: c } = g({
-      isExpanded: e == null ? void 0 : e.isExpanded
+  ({ children: a, suffix: e, ...r }, n) => {
+    const i = m(f), { base: l, button: s, title: u, icon: c } = g({
+      isExpanded: i?.isExpanded
     });
-    return /* @__PURE__ */ t(x, { "data-dd-privacy": "allow", ...n, ref: i, className: l(), children: /* @__PURE__ */ y(b, { className: s(), slot: "trigger", children: [
+    return /* @__PURE__ */ t(x, { "data-dd-privacy": "allow", ...r, ref: n, className: l(), children: /* @__PURE__ */ y(b, { className: s(), slot: "trigger", children: [
       /* @__PURE__ */ t(
         v,
         {
@@ -40,8 +40,8 @@ const g = p({
           role: "presentation"
         }
       ),
-      /* @__PURE__ */ t(r, { variant: "bodyStrong", className: u(), children: a }),
-      o ? /* @__PURE__ */ t(r, { variant: "body", children: o }) : null
+      /* @__PURE__ */ t(o, { variant: "bodyStrong", className: u(), children: a }),
+      e ? /* @__PURE__ */ t(o, { variant: "body", children: e }) : null
     ] }) });
   }
 );

package/dist/esm/components/data-table/DataTable.d.ts

@@ -15,27 +15,90 @@ export interface DataTablePaginationLabels {
     itemLabel?: string;
 }
 export interface DataTablePaginationOptions {
-    /** Available options in the "rows per page" dropdown */
+    /**
+     * Available options in the "rows per page" dropdown, see {@link TablePaginationProps['pageSizeOptions']}
+     * @default [
+     *   { value: '10', label: '10' },
+     *   { value: '50', label: '50' },
+     *   { value: '100', label: '100' },
+     *   { value: '200', label: '200' },
+     * ]
+     */
     pageSizeOptions?: TablePaginationProps['pageSizeOptions'];
-    /** Custom labels for pagination */
+    /**
+     * Custom labels for pagination, see {@link DataTablePaginationLabels}
+     * @default {
+     *   itemLabel: 'unity:component:table:pagination:item',
+     * }
+     */
     labels?: DataTablePaginationLabels;
 }
 export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>, Omit<TableProps, 'children'> {
     /** The table instance from @tanstack/react-table */
     table: TableType<TData>;
-    /** Optional loading state */
+    /**
+     * Optional loading state
+     * @default false
+     */
     isLoading?: boolean;
-    /** Optional error state */
+    /**
+     * Optional error state
+     * @default null
+     */
     error?: Error | null;
-    /** Custom empty state when there's no data */
+    /**
+     * Custom empty state when there's no data. Use it to override the default empty state.
+     * @default <TableEmptyStateNoData />
+     */
     emptyState?: React.ReactNode;
-    /** Custom loading state */
+    /**
+     * Custom loading state to show when `isLoading` is true. Use it to override the default loading state.
+     * @default <TableEmptyStateLoading />
+     */
     loadingState?: React.ReactNode;
-    /** Custom error state */
+    /**
+     * Custom error state to show when `error` prop is not null. Use it to override the default error state.
+     * @default <TableEmptyStateError />
+     */
     errorState?: React.ReactNode;
-    /** Pagination customization */
+    /**
+     * Pagination customization options, including page size options and labels
+     * @default {
+     *   pageSizeOptions: [
+     *     { value: '10', label: '10' },
+     *     { value: '50', label: '50' },
+     *     { value: '100', label: '100' },
+     *     { value: '200', label: '200' },
+     *   ],
+     *   labels: {
+     *     itemLabel: 'unity:component:table:pagination:item',
+     *   },
+     * }
+     */
     pagination?: DataTablePaginationOptions;
-    /** Render function for table rows */
+    /**
+     * Callback fired when the current tablepage changes
+     * @param page - The new page number
+     * @param previous - The previous page number
+     * @param direction - The direction of navigation (1 for forward, -1 for backward)
+     */
+    onPageChange?: TablePaginationProps['onPageChange'];
+    /**
+     * A callback function that is triggered when a page is hovered over in the pagination component.
+     *
+     * This function is intended for handling hover events on individual pagination controls or elements.
+     * It is derived from the `onPageHover` property in the `Pagination` component.
+     */
+    onPageHover?: TablePaginationProps['onPageHover'];
+    /**
+     * Callback fired when the number of rows per page changes
+     * @param pageSize - The new number of rows per page
+     */
+    onPageSizeChange?: TablePaginationProps['onPageSizeChange'];
+    /**
+     * Render function for table rows
+     * @param row - The row data of a given row in the table
+     */
     children: (row: Row<TData>) => React.ReactNode;
 }
 /**
@@ -54,6 +117,9 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
  * @param props.loadingState - Custom loading state to show when `isLoading` is true
  * @param props.errorState - Custom error state to show when `error` is not null
  * @param props.pagination - Optional pagination customization, see {@link DataTablePaginationOptions}
+ * @param props.onPageChange - Optional callback for pagination change
+ * @param props.onPageHover - Optional callback for pagination hover
+ * @param props.onPageSizeChange - Optional callback for pagination size change
  * @param props.children - Render function that takes care of rendering the table rows
  * @see {@link DataTableProps} for all available props
  * @example
@@ -115,7 +181,7 @@ export interface DataTableProps<TData> extends Omit<TableRootProps, 'children'>,
  * - DataTableBulkActions provides the F6 keyboard shortcut for accessibility
  * - [API](https://unity-components.payfit.io/?path=/docs/data-datatable--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/data-datatable--docs)
  */
-declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, children, ...rest }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTable<TData extends object>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, onPageChange: onPaginationChange, onPageHover: onPaginationPageHover, onPageSizeChange: onPaginationSizeChange, children, ...rest }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }

package/dist/esm/components/data-table/DataTable.js

@@ -1,87 +1,87 @@
-import { jsxs as c, jsx as e, Fragment as H } from "react/jsx-runtime";
-import { useRef as v, useEffect as I } from "react";
-import { flexRender as x } from "@tanstack/react-table";
-import { useId as N } from "react-aria";
-import { CircularIconButton as M } from "../icon-button/CircularIconButton.js";
+import { jsxs as m, jsx as e, Fragment as E } from "react/jsx-runtime";
+import { useRef as R, useEffect as z } from "react";
+import { flexRender as f } from "@tanstack/react-table";
+import { useId as I } from "react-aria";
+import { CircularIconButton as N } from "../icon-button/CircularIconButton.js";
 import { TableBody as F } from "../table/parts/TableBody.js";
-import { TableColumnHeader as O } from "../table/parts/TableColumnHeader.js";
-import { TableEmptyStateLoading as j, TableEmptyStateError as B, TableEmptyStateNoData as $ } from "../table/parts/TableEmptyState.js";
-import { TableHeader as G } from "../table/parts/TableHeader.js";
-import { TablePagination as L } from "../table/parts/TablePagination.js";
-import { TableRoot as Q, Table as W } from "../table/Table.js";
-import { ColumnSortHeader as k } from "./parts/ColumnSortHeader.js";
-const S = ({
+import { TableColumnHeader as M } from "../table/parts/TableColumnHeader.js";
+import { TableEmptyStateLoading as O, TableEmptyStateError as j, TableEmptyStateNoData as B } from "../table/parts/TableEmptyState.js";
+import { TableHeader as $ } from "../table/parts/TableHeader.js";
+import { TablePagination as G } from "../table/parts/TablePagination.js";
+import { TableRoot as L, Table as Q } from "../table/Table.js";
+import { ColumnSortHeader as W } from "./parts/ColumnSortHeader.js";
+const b = ({
   children: o,
-  columnNameId: m,
-  helperText: l
-}) => l !== void 0 ? /* @__PURE__ */ c("div", { className: "uy:flex uy:gap-50 uy:items-center", children: [
+  columnNameId: a,
+  helperText: r
+}) => r !== void 0 ? /* @__PURE__ */ m("div", { className: "uy:flex uy:gap-50 uy:items-center", children: [
   o,
   /* @__PURE__ */ e(
-    M,
+    N,
     {
-      "aria-labelledby": m,
+      "aria-labelledby": a,
       className: "uy:text-content-neutral-low uy:hover:bg-surface-neutral-hover uy:hover:text-content-neutral-low",
       icon: "QuestionOutlined",
-      title: l,
+      title: r,
       color: "content.neutral.low"
     }
   )
-] }) : /* @__PURE__ */ e(H, { children: o });
-function q({
+] }) : /* @__PURE__ */ e(E, { children: o });
+function k({
   table: o,
-  isLoading: m,
-  error: l,
-  emptyState: i,
-  loadingState: w,
-  errorState: C,
-  pagination: n,
-  minRows: y,
+  isLoading: a,
+  error: r,
+  emptyState: u,
+  loadingState: C,
+  errorState: T,
+  pagination: c,
+  minRows: h,
   maxRows: P,
-  children: D,
-  ...u
+  onPageChange: S,
+  onPageHover: x,
+  onPageSizeChange: w,
+  children: y,
+  ...i
 }) {
-  var g;
-  const s = v(null), E = N(), { pageIndex: d, pageSize: p } = o.getState().pagination;
-  I(() => {
-    var r;
-    (r = s.current) == null || r.scrollToTop();
-  }, [d, p]);
-  const R = {
-    label: u.label,
-    description: u.description,
-    isHorizontalScrollEnabled: u.isHorizontalScrollEnabled
-  }, f = () => {
-    if (m)
-      return w ?? /* @__PURE__ */ e(j, {});
-    if (l)
-      return C ?? /* @__PURE__ */ e(B, {});
-  }, z = () => m || l ? f() : o.getRowModel().rows.length === 0 ? i ?? /* @__PURE__ */ e($, {}) : i;
-  return /* @__PURE__ */ c(Q, { minRows: y, maxRows: P, children: [
-    /* @__PURE__ */ c(W, { ref: s, ...R, children: [
-      /* @__PURE__ */ e(G, { children: o.getHeaderGroups().map(
-        (r) => r.headers.map((t) => {
-          var b, T, h;
-          const a = `${E}-column-name-${t.column.columnDef.id}`;
+  const p = R(null), D = I(), { pageIndex: s, pageSize: g } = o.getState().pagination;
+  z(() => {
+    p.current?.scrollToTop();
+  }, [s, g]);
+  const H = {
+    label: i.label,
+    description: i.description,
+    isHorizontalScrollEnabled: i.isHorizontalScrollEnabled
+  }, d = () => {
+    if (a)
+      return C ?? /* @__PURE__ */ e(O, {});
+    if (r)
+      return T ?? /* @__PURE__ */ e(j, {});
+  }, v = () => a || r ? d() : o.getRowModel().rows.length === 0 ? u ?? /* @__PURE__ */ e(B, {}) : u;
+  return /* @__PURE__ */ m(L, { minRows: h, maxRows: P, children: [
+    /* @__PURE__ */ m(Q, { ref: p, ...H, children: [
+      /* @__PURE__ */ e($, { children: o.getHeaderGroups().map(
+        (n) => n.headers.map((t) => {
+          const l = `${D}-column-name-${t.column.columnDef.id}`;
           return /* @__PURE__ */ e(
-            O,
+            M,
             {
-              isFocusable: (b = t.column.columnDef.meta) == null ? void 0 : b.isFocusable,
-              children: o.getRowModel().rows.length > 0 && t.column.getCanSort() ? /* @__PURE__ */ e(k, { header: t, children: /* @__PURE__ */ e(
-                S,
+              isFocusable: t.column.columnDef.meta?.isFocusable,
+              children: o.getRowModel().rows.length > 0 && t.column.getCanSort() ? /* @__PURE__ */ e(W, { header: t, children: /* @__PURE__ */ e(
+                b,
                 {
-                  columnNameId: a,
-                  helperText: (T = t.column.columnDef.meta) == null ? void 0 : T.helperText,
-                  children: /* @__PURE__ */ e("span", { id: a, children: x(
+                  columnNameId: l,
+                  helperText: t.column.columnDef.meta?.helperText,
+                  children: /* @__PURE__ */ e("span", { id: l, children: f(
                     t.column.columnDef.header,
                     t.getContext()
                   ) })
                 }
               ) }) : /* @__PURE__ */ e(
-                S,
+                b,
                 {
-                  columnNameId: a,
-                  helperText: (h = t.column.columnDef.meta) == null ? void 0 : h.helperText,
-                  children: /* @__PURE__ */ e("span", { id: a, children: x(
+                  columnNameId: l,
+                  helperText: t.column.columnDef.meta?.helperText,
+                  children: /* @__PURE__ */ e("span", { id: l, children: f(
                     t.column.columnDef.header,
                     t.getContext()
                   ) })
@@ -95,32 +95,35 @@ function q({
       /* @__PURE__ */ e(
         F,
         {
-          renderEmptyState: z,
-          renderDataState: f,
-          children: !m && !l && o.getRowModel().rows.map(D)
+          renderEmptyState: v,
+          renderDataState: d,
+          children: !a && !r && o.getRowModel().rows.map(y)
         }
       )
     ] }),
-    o.getPageCount() > 1 && /* @__PURE__ */ e(
-      L,
+    o.getPageCount() > 0 && /* @__PURE__ */ e(
+      G,
       {
         pageCount: o.getPageCount(),
-        rowCount: o.getPaginationRowModel().rows.length,
-        currentPage: d + 1,
-        rowsPerPage: p,
-        pageSizeOptions: n == null ? void 0 : n.pageSizeOptions,
-        onPageChange: (r) => {
-          o.setPageIndex(r - 1);
+        rowCount: o.getRowCount(),
+        currentPage: s + 1,
+        rowsPerPage: g,
+        pageSizeOptions: c?.pageSizeOptions,
+        onPageChange: (n, t, l) => {
+          o.setPageIndex(n - 1), S?.(n - 1, t, l);
         },
-        onPageSizeChange: (r) => {
-          o.setPageSize(r);
+        onPageHover: (n) => {
+          x?.(n);
         },
-        itemLabel: (g = n == null ? void 0 : n.labels) == null ? void 0 : g.itemLabel
+        onPageSizeChange: (n) => {
+          o.setPageSize(n), w?.(n);
+        },
+        itemLabel: c?.labels?.itemLabel
       }
     )
   ] });
 }
-q.displayName = "DataTable";
+k.displayName = "DataTable";
 export {
-  q as DataTable
+  k as DataTable
 };

package/dist/esm/components/data-table/parts/ColumnSortHeader.js

@@ -1,31 +1,31 @@
-import { jsx as r, jsxs as m, Fragment as s } from "react/jsx-runtime";
-import { Actionable as c } from "../../actionable/Actionable.js";
-import { Icon as i } from "../../icon/Icon.js";
+import { jsx as r, jsxs as l, Fragment as c } from "react/jsx-runtime";
+import { Actionable as i } from "../../actionable/Actionable.js";
+import { Icon as m } from "../../icon/Icon.js";
 function u({
-  children: t,
+  children: n,
   header: o,
-  ...n
+  ...t
 }) {
   return /* @__PURE__ */ r(
-    c,
+    i,
     {
-      ...n,
+      ...t,
       className: "uy:flex uy:items-center uy:gap-50",
       onPress: () => {
         o.column.getCanSort() && o.column.toggleSorting();
       },
       children: ({ isHovered: e }) => {
-        const l = o.column.getCanSort() && (o.column.getIsSorted() || e);
-        return /* @__PURE__ */ m(s, { children: [
-          t,
-          l && /* @__PURE__ */ r(
-            i,
+        const s = o.column.getCanSort() && (o.column.getIsSorted() || e);
+        return /* @__PURE__ */ l(c, { children: [
+          n,
+          s ? /* @__PURE__ */ r(
+            m,
             {
               src: o.column.getIsSorted() === "asc" ? "ArrowUpOutlined" : "ArrowDownOutlined",
               role: "presentation",
               size: 20
             }
-          )
+          ) : /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "uy:size-250 uy:block" })
         ] });
       }
     }

package/dist/esm/components/data-table/parts/DataTableBulkActions.js

@@ -1,19 +1,19 @@
 import { jsx as c } from "react/jsx-runtime";
 import { useRef as i, useState as A, useCallback as R } from "react";
 import { useHotkeys as u } from "react-hotkeys-hook";
-import { ActionBar as p } from "../../action-bar/ActionBar.js";
-import { ActionBarAction as w } from "../../action-bar/parts/ActionBarAction.js";
+import { ActionBar as S } from "../../action-bar/ActionBar.js";
+import { ActionBarAction as p } from "../../action-bar/parts/ActionBarAction.js";
 import { ActionBarRoot as B } from "../../action-bar/parts/ActionBarRoot.js";
-function k({
+function b({
   table: e,
-  actions: n
+  actions: s
 }) {
-  const s = i(null), r = i(null), [a, t] = A(!1), f = e.getState().rowSelection;
-  Object.keys(f).sort().join(","), u(
+  const n = i(null), r = i(null), [a, t] = A(!1);
+  u(
     "f6",
     () => {
-      if ((e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected()) && n && s.current) {
-        const l = s.current.querySelectorAll(
+      if ((e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected()) && s && n.current) {
+        const l = n.current.querySelectorAll(
           'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
         );
         r.current = document.activeElement, l.length > 0 && (l[0].focus(), t(!0));
@@ -31,21 +31,21 @@ function k({
       enableOnFormTags: !0
     }
   );
-  const m = e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected(), d = e.getSelectedRowModel().rows.length, g = e.getPageCount() > 1, S = R(() => {
+  const f = e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected(), m = e.getSelectedRowModel().rows.length, d = e.getPageCount() > 0, g = R(() => {
     e.resetRowSelection();
   }, [e]);
-  return n ? /* @__PURE__ */ c(
+  return s ? /* @__PURE__ */ c(
     B,
     {
-      isVisible: m,
-      offsetBottom: g ? "$600" : 0,
+      isVisible: f,
+      offsetBottom: d ? "$600" : 0,
       children: /* @__PURE__ */ c(
-        p,
+        S,
         {
-          ref: s,
-          actions: n,
-          selectionCount: d,
-          onClearSelection: S,
+          ref: n,
+          actions: s,
+          selectionCount: m,
+          onClearSelection: g,
           onFocus: () => {
             t(!0);
           },
@@ -53,13 +53,13 @@ function k({
             t(!1);
           },
           "aria-keyshortcuts": "f6",
-          children: (o) => /* @__PURE__ */ c(w, { ...o, children: o.label }, o.id)
+          children: (o) => /* @__PURE__ */ c(p, { ...o, children: o.label }, o.id)
         }
       )
     }
   ) : null;
 }
-k.displayName = "DataTableBulkActions";
+b.displayName = "DataTableBulkActions";
 export {
-  k as DataTableBulkActions
+  b as DataTableBulkActions
 };