periplo-ui 3.21.0 → 3.21.2

package/dist/components/Button/Button.d.ts

@@ -44,11 +44,6 @@ export type ButtonProps = {
      * Not displayed when iconOnly is true.
      */
     children?: React.ReactNode;
-    /**
-     * When true, renders the button as a child component using Radix Slot.
-     * Useful for custom wrappers or links.
-     */
-    asChild?: boolean;
     /**
      * Custom props to pass to the icons (StartIcon, EndIcon, SpinnerGap).
      * Allows overriding size, weight, color, etc.
@@ -110,11 +105,6 @@ declare const Button: React.ForwardRefExoticComponent<{
      * Not displayed when iconOnly is true.
      */
     children?: React.ReactNode;
-    /**
-     * When true, renders the button as a child component using Radix Slot.
-     * Useful for custom wrappers or links.
-     */
-    asChild?: boolean;
     /**
      * Custom props to pass to the icons (StartIcon, EndIcon, SpinnerGap).
      * Allows overriding size, weight, color, etc.

package/dist/components/Button/Button.js

@@ -4,7 +4,6 @@ import { cva } from 'class-variance-authority';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { typographyVariants } from '../Typography/Typography.js';
-import { Slot } from '@radix-ui/react-slot';
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -46,7 +45,7 @@ const buttonVariants = cva(
   }
 );
 const Button = React.forwardRef(
-  ({ className, variant = "primary", size = "md", StartIcon, EndIcon, loading, iconOnly, iconProps = {}, asChild = false, ...props }, ref) => {
+  ({ className, variant = "primary", size = "md", StartIcon, EndIcon, loading, iconOnly, iconProps = {}, ...props }, ref) => {
     const defaultIconProps = () => {
       switch (size) {
         case "sm":
@@ -68,9 +67,8 @@ const Button = React.forwardRef(
           return "h-10 w-10";
       }
     };
-    const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsxs(
-      Comp,
+      "button",
       {
         className: cn(
           buttonVariants({ variant, size, className }),
@@ -79,7 +77,7 @@ const Button = React.forwardRef(
           className
         ),
         ref,
-        disabled: loading && !asChild,
+        disabled: loading,
         ...props,
         children: [
           loading && /* @__PURE__ */ jsx(SpinnerGap, { ...defaultIconProps(), className: "animate-spin", "aria-label": "Loading" }),

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Icon, IconWeight, IconProps as PhosphorIconProps } from '@phosphor-icons/react'\nimport { SpinnerGap } from '@phosphor-icons/react/dist/ssr'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { typographyVariants } from '../Typography'\nimport { Slot } from '@radix-ui/react-slot'\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      /**\n       * Defines the visual style of the button\n       */\n      variant: {\n        primary:\n          'bg-primary-500 text-primary-foreground hover:bg-primary-700 active:bg-primary-900 disabled:bg-background-200 dark:disabled:bg-background-200 dark:disabled:text-neutral',\n        secondary:\n          'bg-neutral-950 text-neutral-foreground hover:bg-neutral-800 active:bg-neutral-700 disabled:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-500 dark:disable:bg-neutral-900 disabled:text-neutral-600 dark:disabled:text-neutral-300',\n        ghost:\n          'border border-neutral-500 text-primary-foreground hover:bg-neutral-100/50 active:bg-neutral-200/50 dark:border-neutral dark:text-neutral-50 dark:active:bg-neutral-600/50 disabled:border-neutral-500 dark:hover:bg-neutral/50 disabled:text-neutral-500 dark:disabled:border-neutral-300 dark:disabled:text-neutral-300',\n        'inverse-ghost':\n          'border border-neutral-50 text-neutral-50 hover:bg-neutral/50 hover:border-neutral-50 active:bg-neutral-600/50 dark:border-neutral-500 dark:text-primary-foreground dark:hover:bg-neutral-100/50 dark:active:bg-neutral-200/50 disabled:border-neutral-300 disabled:text-neutral-300 dark:disabled:border-neutral-500 dark:disabled:text-neutral-500',\n        text: 'hover:bg-neutral-50 active:bg-neutral-100 text-primary-foreground disabled:text-neutral-500 dark:disable:text-neutral-300 dark:text-neutral-50 dark:hover:bg-neutral dark:active:bg-neutral-600',\n        error:\n          'bg-error text-white hover:bg-error-800 active:bg-error-900 disabled:bg-error-200 disabled:text-neutral-600',\n        success:\n          'bg-success text-white hover:bg-success-800 active:bg-success-900 disabled:bg-success-200 disabled:text-neutral-600',\n        input:\n          'border border-neutral-200 bg-white text-neutral-950 hover:bg-neutral-50 active:bg-neutral-100 focus-visible:border-neutral-950 disabled:bg-neutral-50 dark:border-neutral-500 dark:bg-neutral-950 dark:text-neutral-50 dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:focus-visible:border-neutral-500 focus-visible:ring-0',\n      },\n      /**\n       * Controls the size and padding of the button\n       */\n      size: {\n        sm: 'h-8 px-3 text-sm',\n        md: 'h-10 px-4 text-sm',\n        lg: 'h-12 px-6 text-base',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'input',\n        size: ['sm', 'md', 'lg'],\n        className: typographyVariants({ variant: 'body-lg' }),\n      },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n)\n\nexport type ButtonProps = {\n  /**\n   * The visual style of the button.\n   * @default primary\n   */\n  variant?: 'primary' | 'secondary' | 'ghost' | 'inverse-ghost' | 'text' | 'error' | 'success'\n\n  /**\n   * The size of the button, affecting height, padding, and font size.\n   * @default md\n   */\n  size?: 'sm' | 'md' | 'lg'\n\n  /**\n   * Icon component to display at the start of the button content.\n   * Use Phosphor icons for consistent styling.\n   * @example <Button StartIcon={House}>Home</Button>\n   */\n  StartIcon?: Icon\n\n  /**\n   * Icon component to display at the end of the button content.\n   * Use Phosphor icons for consistent styling.\n   * @example <Button EndIcon={ArrowRight}>Next</Button>\n   */\n  EndIcon?: Icon\n\n  /**\n   * When true, displays a loading spinner and disables the button.\n   * The spinner replaces the StartIcon if present.\n   * @default false\n   */\n  loading?: boolean\n\n  /**\n   * When true, creates a circular button with only the StartIcon visible.\n   * @default false\n   */\n  iconOnly?: boolean\n\n  /**\n   * The content to display inside the button.\n   * Not displayed when iconOnly is true.\n   */\n  children?: React.ReactNode\n\n  /**\n   * When true, renders the button as a child component using Radix Slot.\n   * Useful for custom wrappers or links.\n   */\n  asChild?: boolean\n\n  /**\n   * Custom props to pass to the icons (StartIcon, EndIcon, SpinnerGap).\n   * Allows overriding size, weight, color, etc.\n   */\n  iconProps?: Partial<PhosphorIconProps>\n} & React.ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof buttonVariants>\n\n/**\n * A versatile button component that supports multiple variants, sizes, and icon placements.\n *\n * @example\n * // Basic usage\n * <Button>Click me</Button>\n *\n * // With icon\n * <Button StartIcon={House}>Home</Button>\n *\n * // Icon only button\n * <Button StartIcon={Plus} iconOnly aria-label=\"Add item\" />\n *\n * // Loading state\n * <Button loading>Processing...</Button>\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    { className, variant = 'primary', size = 'md', StartIcon, EndIcon, loading, iconOnly, iconProps = {}, asChild = false, ...props },\n    ref,\n  ) => {\n    const defaultIconProps = (): { size: number; weight: IconWeight } => {\n      switch (size) {\n        case 'sm':\n          return { size: 16, weight: 'regular' }\n        case 'lg':\n          return { size: 20, weight: 'regular' }\n        default:\n          return { size: 18, weight: 'regular' }\n      }\n    }\n\n    const mergedIconProps = { ...defaultIconProps(), ...iconProps }\n\n    const getIconOnlyClasses = () => {\n      switch (size) {\n        case 'sm':\n          return 'h-8 w-8'\n        case 'lg':\n          return 'h-12 w-12'\n        default:\n          return 'h-10 w-10'\n      }\n    }\n\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <Comp\n        className={cn(\n          buttonVariants({ variant, size, className }),\n          iconOnly && 'rounded-full p-0',\n          iconOnly && getIconOnlyClasses(),\n          className,\n        )}\n        ref={ref}\n        disabled={loading && !asChild}\n        {...props}\n      >\n        {loading && <SpinnerGap {...defaultIconProps()} className=\"animate-spin\" aria-label=\"Loading\" />}\n        {StartIcon && !loading && <StartIcon {...mergedIconProps} />}\n        {iconOnly ? <span className=\"sr-only\">{props.children}</span> : props.children}\n        {EndIcon && !iconOnly && <EndIcon {...mergedIconProps} />}\n      </Comp>\n    )\n  },\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Icon, IconWeight, IconProps as PhosphorIconProps } from '@phosphor-icons/react'\nimport { SpinnerGap } from '@phosphor-icons/react/dist/ssr'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { typographyVariants } from '../Typography'\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      /**\n       * Defines the visual style of the button\n       */\n      variant: {\n        primary:\n          'bg-primary-500 text-primary-foreground hover:bg-primary-700 active:bg-primary-900 disabled:bg-background-200 dark:disabled:bg-background-200 dark:disabled:text-neutral',\n        secondary:\n          'bg-neutral-950 text-neutral-foreground hover:bg-neutral-800 active:bg-neutral-700 disabled:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-500 dark:disable:bg-neutral-900 disabled:text-neutral-600 dark:disabled:text-neutral-300',\n        ghost:\n          'border border-neutral-500 text-primary-foreground hover:bg-neutral-100/50 active:bg-neutral-200/50 dark:border-neutral dark:text-neutral-50 dark:active:bg-neutral-600/50 disabled:border-neutral-500 dark:hover:bg-neutral/50 disabled:text-neutral-500 dark:disabled:border-neutral-300 dark:disabled:text-neutral-300',\n        'inverse-ghost':\n          'border border-neutral-50 text-neutral-50 hover:bg-neutral/50 hover:border-neutral-50 active:bg-neutral-600/50 dark:border-neutral-500 dark:text-primary-foreground dark:hover:bg-neutral-100/50 dark:active:bg-neutral-200/50 disabled:border-neutral-300 disabled:text-neutral-300 dark:disabled:border-neutral-500 dark:disabled:text-neutral-500',\n        text: 'hover:bg-neutral-50 active:bg-neutral-100 text-primary-foreground disabled:text-neutral-500 dark:disable:text-neutral-300 dark:text-neutral-50 dark:hover:bg-neutral dark:active:bg-neutral-600',\n        error:\n          'bg-error text-white hover:bg-error-800 active:bg-error-900 disabled:bg-error-200 disabled:text-neutral-600',\n        success:\n          'bg-success text-white hover:bg-success-800 active:bg-success-900 disabled:bg-success-200 disabled:text-neutral-600',\n        input:\n          'border border-neutral-200 bg-white text-neutral-950 hover:bg-neutral-50 active:bg-neutral-100 focus-visible:border-neutral-950 disabled:bg-neutral-50 dark:border-neutral-500 dark:bg-neutral-950 dark:text-neutral-50 dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:focus-visible:border-neutral-500 focus-visible:ring-0',\n      },\n      /**\n       * Controls the size and padding of the button\n       */\n      size: {\n        sm: 'h-8 px-3 text-sm',\n        md: 'h-10 px-4 text-sm',\n        lg: 'h-12 px-6 text-base',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'input',\n        size: ['sm', 'md', 'lg'],\n        className: typographyVariants({ variant: 'body-lg' }),\n      },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n)\n\nexport type ButtonProps = {\n  /**\n   * The visual style of the button.\n   * @default primary\n   */\n  variant?: 'primary' | 'secondary' | 'ghost' | 'inverse-ghost' | 'text' | 'error' | 'success'\n\n  /**\n   * The size of the button, affecting height, padding, and font size.\n   * @default md\n   */\n  size?: 'sm' | 'md' | 'lg'\n\n  /**\n   * Icon component to display at the start of the button content.\n   * Use Phosphor icons for consistent styling.\n   * @example <Button StartIcon={House}>Home</Button>\n   */\n  StartIcon?: Icon\n\n  /**\n   * Icon component to display at the end of the button content.\n   * Use Phosphor icons for consistent styling.\n   * @example <Button EndIcon={ArrowRight}>Next</Button>\n   */\n  EndIcon?: Icon\n\n  /**\n   * When true, displays a loading spinner and disables the button.\n   * The spinner replaces the StartIcon if present.\n   * @default false\n   */\n  loading?: boolean\n\n  /**\n   * When true, creates a circular button with only the StartIcon visible.\n   * @default false\n   */\n  iconOnly?: boolean\n\n  /**\n   * The content to display inside the button.\n   * Not displayed when iconOnly is true.\n   */\n  children?: React.ReactNode\n\n  /**\n   * Custom props to pass to the icons (StartIcon, EndIcon, SpinnerGap).\n   * Allows overriding size, weight, color, etc.\n   */\n  iconProps?: Partial<PhosphorIconProps>\n} & React.ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof buttonVariants>\n\n/**\n * A versatile button component that supports multiple variants, sizes, and icon placements.\n *\n * @example\n * // Basic usage\n * <Button>Click me</Button>\n *\n * // With icon\n * <Button StartIcon={House}>Home</Button>\n *\n * // Icon only button\n * <Button StartIcon={Plus} iconOnly aria-label=\"Add item\" />\n *\n * // Loading state\n * <Button loading>Processing...</Button>\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    { className, variant = 'primary', size = 'md', StartIcon, EndIcon, loading, iconOnly, iconProps = {}, ...props },\n    ref,\n  ) => {\n    const defaultIconProps = (): { size: number; weight: IconWeight } => {\n      switch (size) {\n        case 'sm':\n          return { size: 16, weight: 'regular' }\n        case 'lg':\n          return { size: 20, weight: 'regular' }\n        default:\n          return { size: 18, weight: 'regular' }\n      }\n    }\n\n    const mergedIconProps = { ...defaultIconProps(), ...iconProps }\n\n    const getIconOnlyClasses = () => {\n      switch (size) {\n        case 'sm':\n          return 'h-8 w-8'\n        case 'lg':\n          return 'h-12 w-12'\n        default:\n          return 'h-10 w-10'\n      }\n    }\n\n    return (\n      <button\n        className={cn(\n          buttonVariants({ variant, size, className }),\n          iconOnly && 'rounded-full p-0',\n          iconOnly && getIconOnlyClasses(),\n          className,\n        )}\n        ref={ref}\n        disabled={loading}\n        {...props}\n      >\n        {loading && <SpinnerGap {...defaultIconProps()} className=\"animate-spin\" aria-label=\"Loading\" />}\n        {StartIcon && !loading && <StartIcon {...mergedIconProps} />}\n        {iconOnly ? <span className=\"sr-only\">{props.children}</span> : props.children}\n        {EndIcon && !iconOnly && <EndIcon {...mergedIconProps} />}\n      </button>\n    )\n  },\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"names":[],"mappings":"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"}

package/dist/components/Carousel/Carousel.d.ts

@@ -30,7 +30,6 @@ declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<{
     loading?: boolean;
     iconOnly?: boolean;
     children?: React.ReactNode;
-    asChild?: boolean;
     iconProps?: Partial<import('@phosphor-icons/react').IconProps>;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & import('class-variance-authority').VariantProps<(props?: ({
     variant?: "primary" | "secondary" | "success" | "error" | "text" | "input" | "ghost" | "inverse-ghost" | null | undefined;
@@ -44,7 +43,6 @@ declare const CarouselNext: React.ForwardRefExoticComponent<Omit<{
     loading?: boolean;
     iconOnly?: boolean;
     children?: React.ReactNode;
-    asChild?: boolean;
     iconProps?: Partial<import('@phosphor-icons/react').IconProps>;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & import('class-variance-authority').VariantProps<(props?: ({
     variant?: "primary" | "secondary" | "success" | "error" | "text" | "input" | "ghost" | "inverse-ghost" | null | undefined;

package/dist/components/DataTable/DataTable.d.ts

@@ -1,94 +1,6 @@
-import { ColumnDef } from '@tanstack/react-table';
-import * as React from 'react';
-type BasePaginationProps = {
-    /** Number of rows per page */
-    readonly pageSize: number;
-    /** Whether the pagination is in a loading state */
-    readonly isLoading?: boolean;
-    /** Text customization for pagination */
-    readonly labels?: {
-        /** Text shown before the page size number (default: "Showing") */
-        showing?: string;
-        /** Text shown before the total number (default: "of") */
-        of?: string;
-        /** Text shown after the total number (default: "results") */
-        results?: string;
-        /** Aria label for previous page button (default: "Previous page") */
-        previousPage?: string;
-        /** Aria label for next page button (default: "Next page") */
-        nextPage?: string;
-        /** Aria label for page number (default: "Page {number}") */
-        pageLabel?: string;
-    };
-};
-type BackendPaginationProps = BasePaginationProps & {
-    /** Current page */
-    readonly currentPage: number;
-    /** Total number of items */
-    readonly total: number;
-    /** Callback when page changes */
-    readonly onPageChange: (page: number) => void;
-};
-/**
- * Type helper to check if a type has an 'id' property
- */
-type HasId<T> = T extends {
-    id: string | number;
-} ? true : false;
-/**
- * Props for the DataTable component
- * @template TData The type of data being displayed in the table
- */
-export type DataTableProps<TData> = {
-    /** Array of column definitions that describe the table structure */
-    readonly columns: Array<ColumnDef<TData>>;
-    /** Array of data items to be displayed in the table */
-    readonly data: Array<TData>;
-    /** Whether to show the column visibility toggle menu */
-    readonly showColumnVisibilityControls?: boolean;
-    /** Whether the table is in a loading state */
-    readonly isLoading?: boolean;
-    /** Pagination configuration. If not provided, pagination is disabled */
-    readonly pagination?: BasePaginationProps | BackendPaginationProps;
-    /** Primary filters that appear directly above the table */
-    readonly primaryFilters?: React.ReactNode;
-    /** Secondary filters that appear in the filters dropdown */
-    readonly secondaryFilters?: React.ReactNode;
-    /** Number of active primary filters */
-    readonly activePrimaryFiltersCount?: number;
-    /** Number of active secondary filters */
-    readonly activeSecondaryFiltersCount?: number;
-    /** Text customization for filters */
-    readonly labels?: {
-        /** Text for the column visibility button (default: "Hide columns") */
-        columnVisibilityButton?: string;
-        /** Text for the filters button when only secondary filters are present (default: "Filters") */
-        filters?: string;
-        /** Text for the more filters button when both primary and secondary filters are present (default: "More filters") */
-        moreFilters?: string;
-    };
-    /** Callback when all rows are selected */
-    readonly onSelectAll?: (selected: boolean) => void;
-    /** Callback when a row is selected */
-    readonly onSelect?: (selected: boolean, row: TData) => void;
-    /** Optional className for the table container */
-    readonly className?: string;
-    /** Optional className for the table */
-    readonly tableClassName?: string;
-} & (HasId<TData> extends true ? {
-    /** Function to get unique identifier from a row. Not needed when data has 'id' property */
-    readonly getRowId?: never;
-} : {
-    /** Function to get unique identifier from a row. Required when data doesn't have 'id' property */
-    readonly getRowId: RowIdentifierFn<TData>;
-});
-/**
- * Function to get a unique identifier from a row
- */
-type RowIdentifierFn<T> = (row: T) => string;
+import { DataTableProps } from './types';
 /**
  * A feature-rich data table component built on top of TanStack Table.
  * Provides sorting, filtering, pagination, and column visibility controls.
  */
-export declare function DataTable<TData extends object>({ columns: userColumns, data, getRowId, showColumnVisibilityControls, isLoading, pagination, primaryFilters, secondaryFilters, activePrimaryFiltersCount, activeSecondaryFiltersCount, labels, onSelectAll, onSelect, className, tableClassName, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function DataTable<TData extends object>({ columns: userColumns, data, getRowId, showColumnVisibilityControls, isLoading, pagination, primaryFilters, secondaryFilters, activePrimaryFiltersCount, activeSecondaryFiltersCount, selection, labels, className, tableClassName, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -1,14 +1,15 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useReactTable, getCoreRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getPaginationRowModel, useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import * as React from 'react';
-import { Checkbox } from '../Checkbox/Checkbox.js';
 import { Table, TableHeader, TableRow, TableHead } from '../Table/Table.js';
 import { Typography } from '../Typography/Typography.js';
 import { DataTableBody } from './components/DataTableBody.js';
+import { DataTablePagination } from './components/DataTablePagination.js';
+import { DataTableRowSelector } from './components/DataTableRowSelector.js';
+import { DataTableSelectHeader } from './components/DataTableSelectHeader.js';
 import { DataTableToolbar } from './components/DataTableToolbar.js';
-import { DataTablePagination } from './DataTablePagination.js';
-import { useTableSelection } from './hooks/useTableSelection.js';
+import { useSelection } from './hooks/useSelection.js';
 import { cn } from '../../lib/utils.js';
 
 function DataTable({
@@ -22,51 +23,110 @@ function DataTable({
   secondaryFilters,
   activePrimaryFiltersCount = 0,
   activeSecondaryFiltersCount = 0,
+  selection,
   labels = {
     columnVisibilityButton: "Hide columns",
     filters: "Filters",
     moreFilters: "More filters"
   },
-  onSelectAll,
-  onSelect,
   className,
   tableClassName
 }) {
   const [columnVisibility, setColumnVisibility] = React.useState({});
   const [pageIndex, setPageIndex] = React.useState(0);
-  const isBackendPagination = pagination && "onPageChange" in pagination;
+  const isBackendPagination = pagination !== undefined && "onPageChange" in pagination;
   const total = isBackendPagination ? pagination.total : data.length;
-  const pageSize = pagination?.pageSize ?? data.length;
+  const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length);
   const totalPages = Math.ceil(total / pageSize);
-  const { isSelectable, isAllRowsSelected, rowSelection, handleSelectAll, handleRowSelect } = useTableSelection({
+  const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({
     data,
     getRowId,
-    onSelectAll,
-    onSelect
+    selection
   });
+  const rowSelection = React.useMemo(
+    () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),
+    [selectedIds]
+  );
+  const SelectColumnHeader = React.useCallback(
+    () => /* @__PURE__ */ jsx(
+      DataTableSelectHeader,
+      {
+        isBackendPagination,
+        selectedIds,
+        data,
+        handleSelectAll,
+        isLoading
+      }
+    ),
+    [isBackendPagination, selectedIds, data, handleSelectAll, isLoading]
+  );
+  const SelectColumnCell = React.useCallback(
+    ({ row }) => /* @__PURE__ */ jsx(DataTableRowSelector, { row, selectedIds, getRowId, handleRowSelect }),
+    [selectedIds, getRowId, handleRowSelect]
+  );
+  const tableColumns = React.useMemo(() => {
+    const baseColumns = [...userColumns];
+    if (selection !== undefined) {
+      const selectColumn = {
+        id: "select",
+        size: 50,
+        cell: SelectColumnCell,
+        header: SelectColumnHeader
+      };
+      baseColumns.unshift(selectColumn);
+    }
+    return baseColumns;
+  }, [userColumns, selection, SelectColumnCell, SelectColumnHeader]);
+  const toolbarSelectionProps = React.useMemo(() => {
+    if (isBackendPagination && selection) {
+      return {
+        isSelectionStarted: selection.isSelectionStarted,
+        onSelectionStart: selection.onSelectionStart,
+        onSelectionCancel: selection.onSelectionCancel,
+        selectionSummary: selection.labels?.selectionSummary,
+        labels: selection.labels
+      };
+    }
+    return undefined;
+  }, [isBackendPagination, selection]);
+  const currentPage = isBackendPagination ? pagination.currentPage : pageIndex + 1;
+  const handlePageChange = isBackendPagination ? pagination.onPageChange : (page) => setPageIndex(page - 1);
+  const tablePaginationState = React.useMemo(() => {
+    if (!pagination) {
+      return undefined;
+    }
+    return {
+      pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,
+      pageSize
+    };
+  }, [pagination, isBackendPagination, pageIndex, pageSize]);
+  const tableGetPaginationRowModel = React.useMemo(() => {
+    return pagination && !isBackendPagination ? getPaginationRowModel() : undefined;
+  }, [pagination, isBackendPagination]);
+  const tableOnPaginationChange = React.useCallback(
+    (updater) => {
+      if (typeof updater === "function") {
+        const newState = updater({ pageIndex, pageSize });
+        setPageIndex(newState.pageIndex);
+      }
+    },
+    [pageIndex, pageSize, setPageIndex]
+  );
   const table = useReactTable({
     data,
-    columns: userColumns,
+    columns: tableColumns,
     getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: pagination && !isBackendPagination ? getPaginationRowModel() : undefined,
+    getPaginationRowModel: tableGetPaginationRowModel,
     onColumnVisibilityChange: setColumnVisibility,
-    enableRowSelection: isSelectable,
+    enableRowSelection: !!selection,
     getRowId,
     state: {
       columnVisibility,
       rowSelection,
-      pagination: pagination ? {
-        pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,
-        pageSize
-      } : undefined
+      pagination: tablePaginationState
     },
     manualPagination: isBackendPagination,
-    onPaginationChange: isBackendPagination ? undefined : (updater) => {
-      if (typeof updater === "function") {
-        const newState = updater({ pageIndex, pageSize });
-        setPageIndex(newState.pageIndex);
-      }
-    }
+    onPaginationChange: isBackendPagination ? undefined : tableOnPaginationChange
   });
   return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden", className), children: [
     /* @__PURE__ */ jsx(
@@ -78,41 +138,30 @@ function DataTable({
         secondaryFilters,
         activePrimaryFiltersCount,
         activeSecondaryFiltersCount,
-        labels
+        labels,
+        selection: toolbarSelectionProps
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col rounded-md border bg-white", children: [
-      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxs(Table, { className: "w-full", tableClassName: cn("table-fixed", tableClassName), children: [
-        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-neutral-50", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs(TableRow, { children: [
-          isSelectable && /* @__PURE__ */ jsx(TableHead, { className: "w-[50px]", children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked: isAllRowsSelected,
-              onCheckedChange: handleSelectAll,
-              disabled: isLoading || !data.length,
-              "aria-label": "Select all rows"
-            }
-          ) }),
-          headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
-            TableHead,
-            {
-              className: "whitespace-normal",
-              style: { width: header.column.columnDef.size },
-              children: /* @__PURE__ */ jsx(Typography, { weight: "medium", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) })
-            },
-            header.id
-          ))
-        ] }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxs(Table, { className: "w-full overscroll-contain", tableClassName: cn("table-fixed ", tableClassName), children: [
+        /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-neutral-50", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            className: "whitespace-normal",
+            style: { width: header.column.columnDef.size },
+            children: /* @__PURE__ */ jsx(Typography, { weight: "medium", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) })
+          },
+          header.id
+        )) }, headerGroup.id)) }),
         /* @__PURE__ */ jsx(
           DataTableBody,
           {
             table,
             isLoading,
-            isSelectable,
+            isSelectable: selection !== undefined,
             pageSize,
             getRowId,
-            rowSelection,
-            handleRowSelect
+            rowSelection
           }
         )
       ] }) }) }),
@@ -122,9 +171,9 @@ function DataTable({
           table,
           total,
           pageSize,
-          currentPage: isBackendPagination ? pagination.currentPage : table.getState().pagination.pageIndex + 1 || 1,
+          currentPage,
           totalPages,
-          onPageChange: isBackendPagination ? pagination.onPageChange : undefined,
+          onPageChange: handlePageChange,
           isLoading: pagination.isLoading,
           labels: pagination.labels
         }

package/dist/components/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-dynamic-delete */\n'use client'\n\nimport {\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../Checkbox'\nimport { Table as TableComponent, TableHeader, TableHead, TableRow } from '../Table'\nimport { Typography } from '../Typography'\n\nimport { DataTableBody } from './components/DataTableBody'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { DataTablePagination } from './DataTablePagination'\nimport { useTableSelection } from './hooks/useTableSelection'\n\nimport { cn } from '@/lib/utils'\n\ntype BasePaginationProps = {\n  /** Number of rows per page */\n  readonly pageSize: number\n  /** Whether the pagination is in a loading state */\n  readonly isLoading?: boolean\n  /** Text customization for pagination */\n  readonly labels?: {\n    /** Text shown before the page size number (default: \"Showing\") */\n    showing?: string\n    /** Text shown before the total number (default: \"of\") */\n    of?: string\n    /** Text shown after the total number (default: \"results\") */\n    results?: string\n    /** Aria label for previous page button (default: \"Previous page\") */\n    previousPage?: string\n    /** Aria label for next page button (default: \"Next page\") */\n    nextPage?: string\n    /** Aria label for page number (default: \"Page {number}\") */\n    pageLabel?: string\n  }\n}\n\ntype BackendPaginationProps = BasePaginationProps & {\n  /** Current page */\n  readonly currentPage: number\n  /** Total number of items */\n  readonly total: number\n  /** Callback when page changes */\n  readonly onPageChange: (page: number) => void\n}\n\n/**\n * Type helper to check if a type has an 'id' property\n */\ntype HasId<T> = T extends { id: string | number } ? true : false\n\n/**\n * Props for the DataTable component\n * @template TData The type of data being displayed in the table\n */\nexport type DataTableProps<TData> = {\n  /** Array of column definitions that describe the table structure */\n  readonly columns: Array<ColumnDef<TData>>\n  /** Array of data items to be displayed in the table */\n  readonly data: Array<TData>\n  /** Whether to show the column visibility toggle menu */\n  readonly showColumnVisibilityControls?: boolean\n  /** Whether the table is in a loading state */\n  readonly isLoading?: boolean\n  /** Pagination configuration. If not provided, pagination is disabled */\n  readonly pagination?: BasePaginationProps | BackendPaginationProps\n  /** Primary filters that appear directly above the table */\n  readonly primaryFilters?: React.ReactNode\n  /** Secondary filters that appear in the filters dropdown */\n  readonly secondaryFilters?: React.ReactNode\n  /** Number of active primary filters */\n  readonly activePrimaryFiltersCount?: number\n  /** Number of active secondary filters */\n  readonly activeSecondaryFiltersCount?: number\n  /** Text customization for filters */\n  readonly labels?: {\n    /** Text for the column visibility button (default: \"Hide columns\") */\n    columnVisibilityButton?: string\n    /** Text for the filters button when only secondary filters are present (default: \"Filters\") */\n    filters?: string\n    /** Text for the more filters button when both primary and secondary filters are present (default: \"More filters\") */\n    moreFilters?: string\n  }\n  /** Callback when all rows are selected */\n  readonly onSelectAll?: (selected: boolean) => void\n  /** Callback when a row is selected */\n  readonly onSelect?: (selected: boolean, row: TData) => void\n  /** Optional className for the table container */\n  readonly className?: string\n  /** Optional className for the table */\n  readonly tableClassName?: string\n} & (HasId<TData> extends true\n  ? {\n      /** Function to get unique identifier from a row. Not needed when data has 'id' property */\n      readonly getRowId?: never\n    }\n  : {\n      /** Function to get unique identifier from a row. Required when data doesn't have 'id' property */\n      readonly getRowId: RowIdentifierFn<TData>\n    })\n\n/**\n * Function to get a unique identifier from a row\n */\ntype RowIdentifierFn<T> = (row: T) => string\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n */\nexport function DataTable<TData extends object>({\n  columns: userColumns,\n  data,\n  getRowId = (row: TData) => (row as { id: string }).id,\n  showColumnVisibilityControls = true,\n  isLoading = false,\n  pagination,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  labels = {\n    columnVisibilityButton: 'Hide columns',\n    filters: 'Filters',\n    moreFilters: 'More filters',\n  },\n  onSelectAll,\n  onSelect,\n  className,\n  tableClassName,\n}: DataTableProps<TData>) {\n  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n  const [pageIndex, setPageIndex] = React.useState(0)\n\n  const isBackendPagination = pagination && 'onPageChange' in pagination\n  const total = isBackendPagination ? pagination.total : data.length\n  const pageSize = pagination?.pageSize ?? data.length\n  const totalPages = Math.ceil(total / pageSize)\n\n  const { isSelectable, isAllRowsSelected, rowSelection, handleSelectAll, handleRowSelect } = useTableSelection({\n    data,\n    getRowId,\n    onSelectAll,\n    onSelect,\n  })\n\n  const table = useReactTable({\n    data,\n    columns: userColumns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: pagination && !isBackendPagination ? getPaginationRowModel() : undefined,\n    onColumnVisibilityChange: setColumnVisibility,\n    enableRowSelection: isSelectable,\n    getRowId: getRowId,\n    state: {\n      columnVisibility,\n      rowSelection,\n      pagination: pagination\n        ? {\n            pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n            pageSize,\n          }\n        : undefined,\n    },\n    manualPagination: isBackendPagination,\n    onPaginationChange: isBackendPagination\n      ? undefined\n      : (updater) => {\n          if (typeof updater === 'function') {\n            const newState = updater({ pageIndex, pageSize })\n            setPageIndex(newState.pageIndex)\n          }\n        },\n  })\n\n  return (\n    <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n      <DataTableToolbar\n        table={table}\n        showColumnVisibilityControls={showColumnVisibilityControls}\n        primaryFilters={primaryFilters}\n        secondaryFilters={secondaryFilters}\n        activePrimaryFiltersCount={activePrimaryFiltersCount}\n        activeSecondaryFiltersCount={activeSecondaryFiltersCount}\n        labels={labels}\n      />\n\n      <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n        <div className=\"min-h-0 flex-1 overflow-auto\">\n          <div className=\"h-full overflow-auto\">\n            <TableComponent className=\"w-full\" tableClassName={cn('table-fixed', tableClassName)}>\n              <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {isSelectable && (\n                      <TableHead className=\"w-[50px]\">\n                        <Checkbox\n                          checked={isAllRowsSelected}\n                          onCheckedChange={handleSelectAll}\n                          disabled={isLoading || !data.length}\n                          aria-label=\"Select all rows\"\n                        />\n                      </TableHead>\n                    )}\n                    {headerGroup.headers.map((header) => (\n                      <TableHead\n                        key={header.id}\n                        className=\"whitespace-normal\"\n                        style={{ width: header.column.columnDef.size }}\n                      >\n                        <Typography weight=\"medium\">\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(header.column.columnDef.header, header.getContext())}\n                        </Typography>\n                      </TableHead>\n                    ))}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <DataTableBody\n                table={table}\n                isLoading={isLoading}\n                isSelectable={isSelectable}\n                pageSize={pageSize}\n                getRowId={getRowId}\n                rowSelection={rowSelection}\n                handleRowSelect={handleRowSelect}\n              />\n            </TableComponent>\n          </div>\n        </div>\n        {!!pagination && (\n          <div className=\"border-t px-4 py-2\">\n            <DataTablePagination\n              table={table}\n              total={total}\n              pageSize={pageSize}\n              currentPage={\n                isBackendPagination ? pagination.currentPage : table.getState().pagination.pageIndex + 1 || 1\n              }\n              totalPages={totalPages}\n              onPageChange={isBackendPagination ? pagination.onPageChange : undefined}\n              isLoading={pagination.isLoading}\n              labels={pagination.labels}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwHO;AAAyC;AACrC;AACT;AACmD;AACpB;AACnB;AACZ;AACA;AACA;AAC4B;AACE;AACrB;AACiB;AACf;AACI;AACf;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACA;AACA;AACA;AAEA;AAA8G;AAC5G;AACA;AACA;AACA;AAGF;AAA4B;AAC1B;AACS;AACwB;AACqD;AAC5D;AACN;AACpB;AACO;AACL;AACA;AAEI;AACgE;AAC9D;AAEF;AACN;AACkB;AAIZ;AACE;AACA;AAA+B;AACjC;AACF;AAGN;AAEI;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACF;AAGE;AAGM;AAGO;AAEG;AAAC;AAAA;AACU;AACQ;AACY;AAClB;AAAA;AAEf;AAGA;AAAC;AAAA;AAEW;AACmC;AAM7C;AAAA;AARY;AAUf;AAGP;AACA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACF;AAGN;AAGI;AAAC;AAAA;AACC;AACA;AACA;AAE8F;AAE9F;AAC8D;AACxC;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-dynamic-delete */\n'use client'\n\nimport {\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n  VisibilityState,\n  Row,\n  PaginationState,\n  Updater,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table as TableComponent, TableHeader, TableHead, TableRow } from '../Table'\nimport { Typography } from '../Typography'\n\nimport { DataTableBody } from './components/DataTableBody'\nimport { DataTablePagination } from './components/DataTablePagination'\nimport { DataTableRowSelector } from './components/DataTableRowSelector'\nimport { DataTableSelectHeader } from './components/DataTableSelectHeader'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { useSelection } from './hooks/useSelection'\nimport { DataTableProps } from './types'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n */\nexport function DataTable<TData extends object>({\n  columns: userColumns,\n  data,\n  getRowId = (row: TData) => (row as { id: string }).id,\n  showColumnVisibilityControls = true,\n  isLoading = false,\n  pagination,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels = {\n    columnVisibilityButton: 'Hide columns',\n    filters: 'Filters',\n    moreFilters: 'More filters',\n  },\n  className,\n  tableClassName,\n}: DataTableProps<TData>) {\n  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n  const [pageIndex, setPageIndex] = React.useState(0)\n\n  const isBackendPagination = pagination !== undefined && 'onPageChange' in pagination\n\n  const total = isBackendPagination ? pagination.total : data.length\n  const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length)\n  const totalPages = Math.ceil(total / pageSize)\n\n  const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({\n    data,\n    getRowId,\n    selection,\n  })\n\n  const rowSelection = React.useMemo(\n    () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),\n    [selectedIds],\n  )\n\n  const SelectColumnHeader = React.useCallback(\n    () => (\n      <DataTableSelectHeader\n        isBackendPagination={isBackendPagination}\n        selectedIds={selectedIds}\n        data={data}\n        handleSelectAll={handleSelectAll}\n        isLoading={isLoading}\n      />\n    ),\n    [isBackendPagination, selectedIds, data, handleSelectAll, isLoading],\n  )\n\n  const SelectColumnCell = React.useCallback(\n    ({ row }: { row: Row<TData> }) => (\n      <DataTableRowSelector row={row} selectedIds={selectedIds} getRowId={getRowId} handleRowSelect={handleRowSelect} />\n    ),\n    [selectedIds, getRowId, handleRowSelect],\n  )\n\n  const tableColumns = React.useMemo(() => {\n    const baseColumns = [...userColumns]\n    if (selection !== undefined) {\n      const selectColumn = {\n        id: 'select',\n        size: 50,\n        cell: SelectColumnCell,\n        header: SelectColumnHeader,\n      }\n      baseColumns.unshift(selectColumn)\n    }\n    return baseColumns\n  }, [userColumns, selection, SelectColumnCell, SelectColumnHeader])\n\n  const toolbarSelectionProps = React.useMemo(() => {\n    if (isBackendPagination && selection) {\n      return {\n        isSelectionStarted: selection.isSelectionStarted,\n        onSelectionStart: selection.onSelectionStart,\n        onSelectionCancel: selection.onSelectionCancel,\n        selectionSummary: selection.labels?.selectionSummary,\n        labels: selection.labels,\n      }\n    }\n    return undefined\n  }, [isBackendPagination, selection])\n\n  const currentPage = isBackendPagination ? pagination.currentPage : pageIndex + 1\n  const handlePageChange = isBackendPagination ? pagination.onPageChange : (page: number) => setPageIndex(page - 1)\n\n  const tablePaginationState = React.useMemo(() => {\n    if (!pagination) {\n      return undefined\n    }\n    return {\n      pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n      pageSize,\n    }\n  }, [pagination, isBackendPagination, pageIndex, pageSize])\n\n  const tableGetPaginationRowModel = React.useMemo(() => {\n    return pagination && !isBackendPagination ? getPaginationRowModel() : undefined\n  }, [pagination, isBackendPagination])\n\n  const tableOnPaginationChange = React.useCallback(\n    (updater: Updater<PaginationState>) => {\n      if (typeof updater === 'function') {\n        const newState = updater({ pageIndex, pageSize })\n        setPageIndex(newState.pageIndex)\n      }\n    },\n    [pageIndex, pageSize, setPageIndex],\n  )\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: tableGetPaginationRowModel,\n    onColumnVisibilityChange: setColumnVisibility,\n    enableRowSelection: !!selection,\n    getRowId: getRowId,\n    state: {\n      columnVisibility,\n      rowSelection,\n      pagination: tablePaginationState,\n    },\n    manualPagination: isBackendPagination,\n    onPaginationChange: isBackendPagination ? undefined : tableOnPaginationChange,\n  })\n\n  return (\n    <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n      <DataTableToolbar\n        table={table}\n        showColumnVisibilityControls={showColumnVisibilityControls}\n        primaryFilters={primaryFilters}\n        secondaryFilters={secondaryFilters}\n        activePrimaryFiltersCount={activePrimaryFiltersCount}\n        activeSecondaryFiltersCount={activeSecondaryFiltersCount}\n        labels={labels}\n        selection={toolbarSelectionProps}\n      />\n\n      <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n        <div className=\"min-h-0 flex-1 overflow-auto\">\n          <div className=\"h-full overflow-auto\">\n            <TableComponent className=\"w-full overscroll-contain\" tableClassName={cn('table-fixed ', tableClassName)}>\n              <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => (\n                      <TableHead\n                        key={header.id}\n                        className=\"whitespace-normal\"\n                        style={{ width: header.column.columnDef.size }}\n                      >\n                        <Typography weight=\"medium\">\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(header.column.columnDef.header, header.getContext())}\n                        </Typography>\n                      </TableHead>\n                    ))}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <DataTableBody\n                table={table}\n                isLoading={isLoading}\n                isSelectable={selection !== undefined}\n                pageSize={pageSize}\n                getRowId={getRowId}\n                rowSelection={rowSelection}\n              />\n            </TableComponent>\n          </div>\n        </div>\n        {!!pagination && (\n          <div className=\"border-t px-4 py-2\">\n            <DataTablePagination\n              table={table}\n              total={total}\n              pageSize={pageSize}\n              currentPage={currentPage}\n              totalPages={totalPages}\n              onPageChange={handlePageChange}\n              isLoading={pagination.isLoading}\n              labels={pagination.labels}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiCO;AAAyC;AACrC;AACT;AACmD;AACpB;AACnB;AACZ;AACA;AACA;AAC4B;AACE;AAC9B;AACS;AACiB;AACf;AACI;AACf;AACA;AAEF;AACE;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAAuE;AACrE;AACA;AACA;AAGF;AAA2B;AAC+C;AAC5D;AAGd;AAAiC;AAE7B;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AAAA;AACF;AAEiE;AAGrE;AAA+B;AAEqF;AAE3E;AAGzC;AACE;AACA;AACE;AAAqB;AACf;AACE;AACA;AACE;AAEV;AAAgC;AAElC;AAAO;AAGT;AACE;AACE;AAAO;AACyB;AACF;AACC;AACO;AAClB;AACpB;AAEF;AAAO;AAGT;AACA;AAEA;AACE;AACE;AAAO;AAET;AAAO;AACyD;AAC9D;AACF;AAGF;AACE;AAAsE;AAGxE;AAAsC;AAElC;AACE;AACA;AAA+B;AACjC;AACF;AACkC;AAGpC;AAA4B;AAC1B;AACS;AACwB;AACV;AACG;AACJ;AACtB;AACO;AACL;AACA;AACY;AACd;AACkB;AACoC;AAGxD;AAEI;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AAAA;AACb;AAGE;AAGM;AAIQ;AAAC;AAAA;AAEW;AACmC;AAM7C;AAAA;AARY;AAatB;AACA;AAAC;AAAA;AACC;AACA;AAC4B;AAC5B;AACA;AACA;AAAA;AACF;AAGN;AAGI;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACc;AACQ;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}

package/dist/components/DataTable/components/DataTableBody.d.ts

@@ -1,12 +1,12 @@
 import { Table } from '@tanstack/react-table';
+import { RowIdentifierFn } from '../types';
 type DataTableBodyProps<TData> = {
     readonly table: Table<TData>;
-    readonly isLoading: boolean;
-    readonly isSelectable: boolean;
+    readonly isLoading?: boolean;
+    readonly isSelectable?: boolean;
     readonly pageSize: number;
-    readonly getRowId: (row: TData) => string;
+    readonly getRowId: RowIdentifierFn<TData>;
     readonly rowSelection: Record<string, boolean>;
-    readonly handleRowSelect: (checked: boolean, rowData: TData) => void;
 };
-export declare function DataTableBody<TData>({ table, isLoading, isSelectable, pageSize, getRowId, rowSelection, handleRowSelect, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableBody<TData>({ table, isLoading, isSelectable, pageSize, getRowId, rowSelection, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DataTable/components/DataTableBody.js

@@ -1,34 +1,36 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { flexRender } from '@tanstack/react-table';
-import { Checkbox } from '../../Checkbox/Checkbox.js';
+import * as React from 'react';
 import { Skeleton } from '../../Skeleton/Skeleton.js';
-import { TableBody, TableRow, TableCell } from '../../Table/Table.js';
+import { TableRow, TableCell, TableBody } from '../../Table/Table.js';
 import { Typography } from '../../Typography/Typography.js';
 import { cn } from '../../../lib/utils.js';
 
+const MemoizedTableRow = React.memo(
+  function MemoizedTableRow2({
+    row,
+    isSelected
+  }) {
+    return /* @__PURE__ */ jsx(TableRow, { "data-selected": isSelected, children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { style: { width: cell.column.columnDef.size }, children: /* @__PURE__ */ jsx(Typography, { children: cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id)) });
+  },
+  (prevProps, nextProps) => prevProps.row === nextProps.row && prevProps.isSelected === nextProps.isSelected
+);
 function DataTableBody({
   table,
   isLoading,
   isSelectable,
   pageSize,
   getRowId,
-  rowSelection,
-  handleRowSelect
+  rowSelection
 }) {
   if (isLoading) {
-    return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, rowIndex) => /* @__PURE__ */ jsxs(TableRow, { children: [
-      isSelectable && /* @__PURE__ */ jsx(TableCell, { className: "w-[50px]", children: /* @__PURE__ */ jsx(Checkbox, { checked: false, disabled: true }) }),
-      table.getAllColumns().filter((column) => column.getIsVisible()).map((column) => /* @__PURE__ */ jsx(
-        TableCell,
-        {
-          style: { width: column.columnDef.size },
-          children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", column.id === "actions" && "justify-end"), children: /* @__PURE__ */ jsx(Skeleton, { className: cn(column.id === "actions" ? "h-8 w-8" : "h-[20px] w-full") }) })
-        },
-        `skeleton-cell-${rowIndex.toString()}-${column.id}`
-      ))
-    ] }, `skeleton-row-${rowIndex.toString()}`)) });
+    return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, index) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      isSelectable && /* @__PURE__ */ jsx(TableCell, { className: "w-[50px]", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-5" }) }),
+      table.getAllColumns().filter((column) => column.getIsVisible()).map((column) => /* @__PURE__ */ jsx(TableCell, { style: { width: column.columnDef.size }, children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", column.id === "actions" && "justify-end"), children: /* @__PURE__ */ jsx(Skeleton, { className: cn(column.id === "actions" ? "h-8 w-8" : "h-[20px] w-full") }) }) }, `skeleton-cell-${String(index)}-${column.id}`))
+    ] }, `skeleton-row-${String(index)}`)) });
   }
-  if (table.getRowModel().rows.length === 0) {
+  const rows = table.getRowModel().rows;
+  if (!rows.length) {
     return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
       TableCell,
       {
@@ -38,23 +40,10 @@ function DataTableBody({
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row) => {
+  return /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
     const rowId = getRowId(row.original);
     const isSelected = rowSelection[rowId] ?? false;
-    return /* @__PURE__ */ jsxs(TableRow, { "data-selected": isSelected, children: [
-      isSelectable && /* @__PURE__ */ jsx(TableCell, { className: "w-[50px]", children: /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          checked: isSelected,
-          onCheckedChange: (checked) => {
-            const isChecked = checked;
-            handleRowSelect(isChecked, row.original);
-          },
-          "aria-label": `Select row ${rowId}`
-        }
-      ) }),
-      row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { style: { width: cell.column.columnDef.size }, children: /* @__PURE__ */ jsx(Typography, { children: cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id))
-    ] }, rowId);
+    return /* @__PURE__ */ jsx(MemoizedTableRow, { row, isSelected }, rowId);
   }) });
 }
 

package/dist/components/DataTable/components/DataTableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender } from '@tanstack/react-table'\n\nimport { Checkbox } from '../../Checkbox'\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableBodyProps<TData> = {\n  readonly table: Table<TData>\n  readonly isLoading: boolean\n  readonly isSelectable: boolean\n  readonly pageSize: number\n  readonly getRowId: (row: TData) => string\n  readonly rowSelection: Record<string, boolean>\n  readonly handleRowSelect: (checked: boolean, rowData: TData) => void\n}\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  isSelectable,\n  pageSize,\n  getRowId,\n  rowSelection,\n  handleRowSelect,\n}: DataTableBodyProps<TData>) {\n  if (isLoading) {\n    return (\n      <TableBody>\n        {Array.from({ length: pageSize }).map((_unused, rowIndex) => (\n          <TableRow key={`skeleton-row-${rowIndex.toString()}`}>\n            {isSelectable && (\n              <TableCell className=\"w-[50px]\">\n                <Checkbox checked={false} disabled />\n              </TableCell>\n            )}\n            {table\n              .getAllColumns()\n              .filter((column) => column.getIsVisible())\n              .map((column) => (\n                <TableCell\n                  key={`skeleton-cell-${rowIndex.toString()}-${column.id}`}\n                  style={{ width: column.columnDef.size }}\n                >\n                  <div className={cn('flex items-center justify-center', column.id === 'actions' && 'justify-end')}>\n                    <Skeleton className={cn(column.id === 'actions' ? 'h-8 w-8' : 'h-[20px] w-full')} />\n                  </div>\n                </TableCell>\n              ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    )\n  }\n\n  if (table.getRowModel().rows.length === 0) {\n    return (\n      <TableBody>\n        <TableRow>\n          <TableCell\n            colSpan={isSelectable ? table.getAllColumns().length + 1 : table.getAllColumns().length}\n            className=\"h-[200px] text-center\"\n          >\n            <Typography color=\"neutral\">No data available</Typography>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  return (\n    <TableBody>\n      {table.getRowModel().rows.map((row) => {\n        const rowId = getRowId(row.original)\n        const isSelected = rowSelection[rowId] ?? false\n\n        return (\n          <TableRow key={rowId} data-selected={isSelected}>\n            {isSelectable && (\n              <TableCell className=\"w-[50px]\">\n                <Checkbox\n                  checked={isSelected}\n                  onCheckedChange={(checked) => {\n                    const isChecked = checked\n                    handleRowSelect(isChecked, row.original)\n                  }}\n                  aria-label={`Select row ${rowId}`}\n                />\n              </TableCell>\n            )}\n            {row.getVisibleCells().map((cell) => (\n              <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n                <Typography>\n                  {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </Typography>\n              </TableCell>\n            ))}\n          </TableRow>\n        )\n      })}\n    </TableBody>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { RowIdentifierFn } from '../types'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableBodyProps<TData> = {\n  readonly table: Table<TData>\n  readonly isLoading?: boolean\n  readonly isSelectable?: boolean\n  readonly pageSize: number\n  readonly getRowId: RowIdentifierFn<TData>\n  readonly rowSelection: Record<string, boolean>\n}\n\ntype MemoizedTableRowProps<TData> = {\n  row: Row<TData>\n  isSelectable: boolean\n  isSelected: boolean\n  getRowId: (row: TData) => string\n  handleRowSelect: (checked: boolean, row: TData) => void\n}\n\nconst MemoizedTableRow = React.memo(\n  function MemoizedTableRow<TData>({\n    row,\n    isSelected,\n  }: Omit<MemoizedTableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>) {\n    return (\n      <TableRow data-selected={isSelected}>\n        {row.getVisibleCells().map((cell) => (\n          <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n            <Typography>\n              {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n            </Typography>\n          </TableCell>\n        ))}\n      </TableRow>\n    )\n  },\n  (prevProps, nextProps) => prevProps.row === nextProps.row && prevProps.isSelected === nextProps.isSelected,\n) as <TData>(\n  props: Omit<MemoizedTableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>,\n) => React.ReactElement\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  isSelectable,\n  pageSize,\n  getRowId,\n  rowSelection,\n}: DataTableBodyProps<TData>) {\n  if (isLoading) {\n    return (\n      <TableBody>\n        {Array.from({ length: pageSize }).map((_unused, index) => (\n          <TableRow key={`skeleton-row-${String(index)}`}>\n            {isSelectable && (\n              <TableCell className=\"w-[50px]\">\n                <Skeleton className=\"h-5 w-5\" />\n              </TableCell>\n            )}\n            {table\n              .getAllColumns()\n              .filter((column) => column.getIsVisible())\n              .map((column) => (\n                <TableCell key={`skeleton-cell-${String(index)}-${column.id}`} style={{ width: column.columnDef.size }}>\n                  <div className={cn('flex items-center justify-center', column.id === 'actions' && 'justify-end')}>\n                    <Skeleton className={cn(column.id === 'actions' ? 'h-8 w-8' : 'h-[20px] w-full')} />\n                  </div>\n                </TableCell>\n              ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    )\n  }\n\n  const rows = table.getRowModel().rows\n\n  if (!rows.length) {\n    return (\n      <TableBody>\n        <TableRow>\n          <TableCell\n            colSpan={isSelectable ? table.getAllColumns().length + 1 : table.getAllColumns().length}\n            className=\"h-[200px] text-center\"\n          >\n            <Typography color=\"neutral\">No data available</Typography>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  return (\n    <TableBody>\n      {rows.map((row) => {\n        const rowId = getRowId(row.original)\n        const isSelected = rowSelection[rowId] ?? false\n        return <MemoizedTableRow key={rowId} row={row} isSelected={isSelected} />\n      })}\n    </TableBody>\n  )\n}\n"],"names":["MemoizedTableRow"],"mappings":"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"}