periplo-ui 4.6.2 → 4.6.3

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableGroupRow.js","sources":["../../../../src/components/DataTable/components/DataTableGroupRow.tsx"],"sourcesContent":["import { CaretRight } from '@phosphor-icons/react/dist/ssr/CaretRight'\nimport { ReactNode } from 'react'\n\nimport { TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableGroupRowProps = {\n  readonly colSpan: number\n  readonly selector?: ReactNode\n  readonly content: ReactNode\n  readonly isOpen: boolean\n  readonly onToggle: () => void\n}\n\nexport function DataTableGroupRow({ colSpan, selector, content, isOpen, onToggle }: DataTableGroupRowProps) {\n  return (\n    <TableRow onClick={onToggle} aria-expanded={isOpen} className=\"cursor-pointer bg-white hover:bg-neutral-50\">\n      <TableCell colSpan={colSpan} className=\"p-0\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-3 px-4 py-4\">\n            {selector}\n            <Typography weight=\"medium\">{content}</Typography>\n          </div>\n          <div className=\"sticky right-0 flex items-center bg-inherit px-4 py-4\">\n            <CaretRight\n              size={16}\n              weight=\"bold\"\n              className={cn('shrink-0 transition-transform', isOpen && 'rotate-90')}\n            />\n          </div>\n        </div>\n      </TableCell>\n    </TableRow>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAgBO,SAAS,kBAAkB,EAAE,OAAA,EAAS,UAAU,OAAA,EAAS,MAAA,EAAQ,UAAS,EAA2B;AAC1G,EAAA,2BACG,QAAA,EAAA,EAAS,OAAA,EAAS,QAAA,EAAU,eAAA,EAAe,QAAQ,SAAA,EAAU,6CAAA,EAC5D,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAkB,SAAA,EAAU,KAAA,EACrC,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACZ,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACD,GAAA,CAAC,UAAA,EAAA,EAAW,MAAA,EAAO,QAAA,EAAU,QAAA,EAAA,OAAA,EAAQ;AAAA,KAAA,EACvC,CAAA;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uDAAA,EACb,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAM,EAAA;AAAA,QACN,MAAA,EAAO,MAAA;AAAA,QACP,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,MAAA,IAAU,WAAW;AAAA;AAAA,KACtE,EACF;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DataTableGroupRow.js","sources":["../../../../src/components/DataTable/components/DataTableGroupRow.tsx"],"sourcesContent":["import { CaretRight } from '@phosphor-icons/react/dist/ssr/CaretRight'\nimport { ReactNode } from 'react'\n\nimport { TableCell, TableRow } from '../../Table'\n\nimport { ACTIONS_COLUMN_ID, getDataTableCellClassName } from './dataTableCellStyles'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableGroupRowProps = {\n  readonly colSpan: number\n  readonly selector?: ReactNode\n  readonly content: ReactNode\n  readonly isOpen: boolean\n  readonly onToggle: () => void\n}\n\nexport function DataTableGroupRow({ colSpan, selector, content, isOpen, onToggle }: DataTableGroupRowProps) {\n  return (\n    <TableRow onClick={onToggle} aria-expanded={isOpen} className=\"cursor-pointer bg-white hover:bg-neutral-50\">\n      <TableCell colSpan={colSpan} className=\"p-0\">\n        <div className=\"flex items-stretch justify-between\">\n          <div className={cn(getDataTableCellClassName({ columnId: 'default', kind: 'group-label' }), 'gap-3')}>\n            {selector}\n            {content}\n          </div>\n          <div\n            className={cn(\n              getDataTableCellClassName({ columnId: ACTIONS_COLUMN_ID }),\n              'sticky right-0 shrink-0 bg-inherit',\n            )}\n          >\n            <CaretRight\n              size={16}\n              weight=\"bold\"\n              className={cn('shrink-0 transition-transform', isOpen && 'rotate-90')}\n            />\n          </div>\n        </div>\n      </TableCell>\n    </TableRow>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAiBO,SAAS,kBAAkB,EAAE,OAAA,EAAS,UAAU,OAAA,EAAS,MAAA,EAAQ,UAAS,EAA2B;AAC1G,EAAA,2BACG,QAAA,EAAA,EAAS,OAAA,EAAS,QAAA,EAAU,eAAA,EAAe,QAAQ,SAAA,EAAU,6CAAA,EAC5D,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAkB,SAAA,EAAU,KAAA,EACrC,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oCAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,yBAAA,CAA0B,EAAE,QAAA,EAAU,SAAA,EAAW,IAAA,EAAM,aAAA,EAAe,CAAA,EAAG,OAAO,CAAA,EAChG,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA;AAAA,KAAA,EACH,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,yBAAA,CAA0B,EAAE,QAAA,EAAU,iBAAA,EAAmB,CAAA;AAAA,UACzD;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,EAAA;AAAA,YACN,MAAA,EAAO,MAAA;AAAA,YACP,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,MAAA,IAAU,WAAW;AAAA;AAAA;AACtE;AAAA;AACF,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,36 +1,15 @@
 import { Table } from '@tanstack/react-table';
+import { BasePaginationProps } from '../types';
 type DataTablePaginationProps<TData> = {
-    /** The table instance from tanstack/react-table */
     readonly table: Table<TData>;
-    /** Total number of items across all pages (required for backend pagination) */
     readonly total: number;
-    /** Current page size */
     readonly pageSize: number;
-    /** Current page number (1-based) */
     readonly currentPage: number;
-    /** Total number of pages */
     readonly totalPages: number;
-    /** Called when page changes. If provided, enables backend pagination mode */
     readonly onPageChange?: (page: number) => void;
-    /** Additional className for the pagination component */
     readonly className?: string;
-    /** Indicates if the pagination is in a loading state */
     readonly isLoading?: boolean;
-    /** Text customization for localization */
-    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;
-        /** Text for previous page button (default: "Previous page") */
-        previousPage?: string;
-        /** Text for next page button (default: "Next page") */
-        nextPage?: string;
-        /** Aria label for page number (default: "Page {number}") */
-        page?: string;
-    };
+    readonly labels: BasePaginationProps['labels'];
 };
 export declare function DataTablePagination<TData>({ table, total, pageSize, currentPage, totalPages, onPageChange, className, isLoading, labels, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DataTable/components/DataTablePagination.js

@@ -19,9 +19,10 @@ function DataTablePagination({
     results = "results",
     previousPage = "",
     nextPage = "",
-    page = "Page {number}"
-  } = labels;
+    pageLabel = "Page {number}"
+  } = labels ?? {};
   const isBackendPagination = !!onPageChange;
+  const pageItemCount = total === 0 ? 0 : Math.min(pageSize, total - (currentPage - 1) * pageSize);
   const handlePageChange = (newPage) => {
     if (isBackendPagination) {
       onPageChange(newPage);
@@ -44,7 +45,7 @@ function DataTablePagination({
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-2 md:flex-row md:justify-between", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-sm text-neutral-600", children: [
       /* @__PURE__ */ jsx("span", { children: showing }),
-      /* @__PURE__ */ jsx("span", { className: "mx-1 font-medium text-neutral-900", children: Math.min(pageSize, total) }),
+      /* @__PURE__ */ jsx("span", { className: "mx-1 font-medium text-neutral-900", children: pageItemCount }),
       /* @__PURE__ */ jsx("span", { children: of }),
       /* @__PURE__ */ jsx("span", { className: "mx-1 font-medium text-neutral-900", children: total }),
       /* @__PURE__ */ jsx("span", { children: results })
@@ -60,7 +61,7 @@ function DataTablePagination({
         labels: {
           previous: previousPage,
           next: nextPage,
-          page
+          page: pageLabel
         }
       }
     )

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

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.js","sources":["../../../../src/components/DataTable/components/DataTablePagination.tsx"],"sourcesContent":["import { Table } from '@tanstack/react-table'\n\nimport { Pagination } from '../../Pagination'\nimport { Skeleton } from '../../Skeleton'\n\ntype DataTablePaginationProps<TData> = {\n  /** The table instance from tanstack/react-table */\n  readonly table: Table<TData>\n  /** Total number of items across all pages (required for backend pagination) */\n  readonly total: number\n  /** Current page size */\n  readonly pageSize: number\n  /** Current page number (1-based) */\n  readonly currentPage: number\n  /** Total number of pages */\n  readonly totalPages: number\n  /** Called when page changes. If provided, enables backend pagination mode */\n  readonly onPageChange?: (page: number) => void\n  /** Additional className for the pagination component */\n  readonly className?: string\n  /** Indicates if the pagination is in a loading state */\n  readonly isLoading?: boolean\n  /** Text customization for localization */\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    /** Text for previous page button (default: \"Previous page\") */\n    previousPage?: string\n    /** Text for next page button (default: \"Next page\") */\n    nextPage?: string\n    /** Aria label for page number (default: \"Page {number}\") */\n    page?: string\n  }\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  total,\n  pageSize,\n  currentPage,\n  totalPages,\n  onPageChange,\n  className,\n  isLoading,\n  labels = {},\n}: DataTablePaginationProps<TData>) {\n  const {\n    showing = 'Showing',\n    of = 'of',\n    results = 'results',\n    previousPage = '',\n    nextPage = '',\n    page = 'Page {number}',\n  } = labels\n\n  const isBackendPagination = !!onPageChange\n\n  const handlePageChange = (newPage: number) => {\n    if (isBackendPagination) {\n      onPageChange(newPage)\n    } else {\n      table.setPageIndex(newPage - 1)\n    }\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-between\">\n        <Skeleton className=\"h-[20px] w-[175px]\" />\n        <div className=\"flex items-center gap-2\">\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex w-full flex-col items-center gap-2 md:flex-row md:justify-between\">\n      <div className=\"text-sm text-neutral-600\">\n        <span>{showing}</span>\n        <span className=\"mx-1 font-medium text-neutral-900\">{Math.min(pageSize, total)}</span>\n        <span>{of}</span>\n        <span className=\"mx-1 font-medium text-neutral-900\">{total}</span>\n        <span>{results}</span>\n      </div>\n\n      <Pagination\n        currentPage={currentPage}\n        totalPages={totalPages}\n        onPageChange={handlePageChange}\n        className={className}\n        mode=\"button\"\n        labels={{\n          previous: previousPage,\n          next: nextPage,\n          page,\n        }}\n      />\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAuCO,SAAS,mBAAA,CAA2B;AAAA,EACzC,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAS;AACX,CAAA,EAAoC;AAClC,EAAA,MAAM;AAAA,IACJ,OAAA,GAAU,SAAA;AAAA,IACV,EAAA,GAAK,IAAA;AAAA,IACL,OAAA,GAAU,SAAA;AAAA,IACV,YAAA,GAAe,EAAA;AAAA,IACf,QAAA,GAAW,EAAA;AAAA,IACX,IAAA,GAAO;AAAA,GACT,GAAI,MAAA;AAEJ,EAAA,MAAM,mBAAA,GAAsB,CAAC,CAAC,YAAA;AAE9B,EAAA,MAAM,gBAAA,GAAmB,CAAC,OAAA,KAAoB;AAC5C,IAAA,IAAI,mBAAA,EAAqB;AACvB,MAAA,YAAA,CAAa,OAAO,CAAA;AAAA,IACtB,CAAA,MAAO;AACL,MAAA,KAAA,CAAM,YAAA,CAAa,UAAU,CAAC,CAAA;AAAA,IAChC;AAAA,EACF,CAAA;AAEA,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,oBAAA,EAAqB,CAAA;AAAA,sBACzC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,mBAAA,EAAoB,CAAA;AAAA,wBACxC,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB,CAAA;AAAA,wBACxC,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB,CAAA;AAAA,wBACxC,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB,CAAA;AAAA,wBACxC,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,mBAAA,EAAoB;AAAA,OAAA,EAC1C;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wEAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,0BAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAM,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,sBACf,GAAA,CAAC,UAAK,SAAA,EAAU,mCAAA,EAAqC,eAAK,GAAA,CAAI,QAAA,EAAU,KAAK,CAAA,EAAE,CAAA;AAAA,sBAC/E,GAAA,CAAC,UAAM,QAAA,EAAA,EAAA,EAAG,CAAA;AAAA,sBACV,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EAAqC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBAC3D,GAAA,CAAC,UAAM,QAAA,EAAA,OAAA,EAAQ;AAAA,KAAA,EACjB,CAAA;AAAA,oBAEA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,UAAA;AAAA,QACA,YAAA,EAAc,gBAAA;AAAA,QACd,SAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,MAAA,EAAQ;AAAA,UACN,QAAA,EAAU,YAAA;AAAA,UACV,IAAA,EAAM,QAAA;AAAA,UACN;AAAA;AACF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DataTablePagination.js","sources":["../../../../src/components/DataTable/components/DataTablePagination.tsx"],"sourcesContent":["import { Table } from '@tanstack/react-table'\n\nimport { Pagination } from '../../Pagination'\nimport { Skeleton } from '../../Skeleton'\nimport { BasePaginationProps } from '../types'\n\ntype DataTablePaginationProps<TData> = {\n  readonly table: Table<TData>\n  readonly total: number\n  readonly pageSize: number\n  readonly currentPage: number\n  readonly totalPages: number\n  readonly onPageChange?: (page: number) => void\n  readonly className?: string\n  readonly isLoading?: boolean\n  readonly labels: BasePaginationProps['labels']\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  total,\n  pageSize,\n  currentPage,\n  totalPages,\n  onPageChange,\n  className,\n  isLoading,\n  labels = {},\n}: DataTablePaginationProps<TData>) {\n  const {\n    showing = 'Showing',\n    of = 'of',\n    results = 'results',\n    previousPage = '',\n    nextPage = '',\n    pageLabel = 'Page {number}',\n  } = labels ?? {}\n\n  const isBackendPagination = !!onPageChange\n\n  const pageItemCount = total === 0 ? 0 : Math.min(pageSize, total - (currentPage - 1) * pageSize)\n\n  const handlePageChange = (newPage: number) => {\n    if (isBackendPagination) {\n      onPageChange(newPage)\n    } else {\n      table.setPageIndex(newPage - 1)\n    }\n  }\n\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-between\">\n        <Skeleton className=\"h-[20px] w-[175px]\" />\n        <div className=\"flex items-center gap-2\">\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n          <Skeleton className=\"h-[32px] w-[32px]\" />\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex w-full flex-col items-center gap-2 md:flex-row md:justify-between\">\n      <div className=\"text-sm text-neutral-600\">\n        <span>{showing}</span>\n        <span className=\"mx-1 font-medium text-neutral-900\">{pageItemCount}</span>\n        <span>{of}</span>\n        <span className=\"mx-1 font-medium text-neutral-900\">{total}</span>\n        <span>{results}</span>\n      </div>\n\n      <Pagination\n        currentPage={currentPage}\n        totalPages={totalPages}\n        onPageChange={handlePageChange}\n        className={className}\n        mode=\"button\"\n        labels={{\n          previous: previousPage,\n          next: nextPage,\n          page: pageLabel,\n        }}\n      />\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DataTable/components/DataTableToolbar.js

@@ -111,15 +111,15 @@ function DataTableToolbar({
               DropdownMenuCheckboxItem,
               {
                 className: "capitalize",
-                checked: table.getAllColumns().every((column) => column.getIsVisible()),
+                checked: table.getAllColumns().filter((column) => column.getCanHide()).every((column) => column.getIsVisible()),
                 onSelect: (event) => event.preventDefault(),
-                onCheckedChange: (value) => table.getAllColumns().forEach((column) => column.toggleVisibility(!!value)),
+                onCheckedChange: (value) => table.getAllColumns().filter((column) => column.getCanHide()).forEach((column) => column.toggleVisibility(!!value)),
                 children: columnVisibilityLabels.selectAll
               },
               "all-columns"
             ),
             /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "bg-neutral-100" }),
-            table.getAllColumns().filter((column) => column.getCanHide() && column.id !== "select").map((column) => {
+            table.getAllColumns().filter((column) => column.getCanHide()).map((column) => {
               return /* @__PURE__ */ jsx(
                 DropdownMenuCheckboxItem,
                 {

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { FunnelSimple } from '@phosphor-icons/react/dist/ssr/FunnelSimple'\nimport { SelectionAll } from '@phosphor-icons/react/dist/ssr/SelectionAll'\nimport { TextColumns } from '@phosphor-icons/react/dist/ssr/TextColumns'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Badge } from '../../Badge'\nimport { Button } from '../../Button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { ColumnVisibilityConfig } from '@/components/DataTable/types'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n  readonly table: Table<TData>\n  readonly columnVisibility?: ColumnVisibilityConfig\n  readonly primaryFilters?: React.ReactNode\n  readonly secondaryFilters?: React.ReactNode\n  readonly activePrimaryFiltersCount?: number\n  readonly activeSecondaryFiltersCount?: number\n  readonly labels?: {\n    filters?: string\n    moreFilters?: string\n  }\n  readonly selection?: {\n    isSelectionStarted?: boolean\n    onSelectionStart?: () => void\n    onSelectionCancel?: () => void\n    selectionSummary?: string | null\n    isSelectionDisabled?: boolean\n    labels?: {\n      startSelection?: string\n      cancelSelection?: string\n      selectionSummary?: string\n      selectionDisabledTooltip?: string\n    }\n  }\n}\n\nconst defaultLabels = {\n  filters: 'Filters',\n  moreFilters: 'More filters',\n}\n\nconst defaultColumnVisibilityLabels = {\n  button: 'Hide columns',\n  selectAll: 'Select all',\n}\n\nconst defaultSelectionLabels = {\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  columnVisibility,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n  const isMobile = useIsMobile()\n\n  const labels = {\n    ...defaultLabels,\n    ...labelsProp,\n  }\n\n  const columnVisibilityLabels = {\n    ...defaultColumnVisibilityLabels,\n    ...columnVisibility?.labels,\n  }\n\n  const selectionLabels = {\n    ...defaultSelectionLabels,\n    ...selection?.labels,\n  }\n\n  const showColumnVisibilityControls = columnVisibility?.showControls ?? true\n\n  const hasPrimaryFilters = !!primaryFilters\n  const hasSecondaryFilters = !!secondaryFilters\n\n  const showFiltersButton = isMobile ? hasPrimaryFilters || hasSecondaryFilters : hasSecondaryFilters\n\n  const totalActiveFiltersCount = activePrimaryFiltersCount + activeSecondaryFiltersCount\n  const activeFiltersCount = isMobile ? totalActiveFiltersCount : activeSecondaryFiltersCount\n  const showBadge = activeFiltersCount > 0\n\n  const filtersButtonLabel = !hasPrimaryFilters || isMobile ? labels.filters : labels.moreFilters\n\n  if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n    return null\n  }\n\n  return (\n    <div className=\"flex shrink-0 flex-col gap-2 p-1\">\n      {!isMobile && primaryFilters && <div className=\"flex flex-wrap items-center gap-2\">{primaryFilters}</div>}\n\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          {selection && (\n            <div className=\"flex items-center gap-2\">\n              {selection.isSelectionStarted ? (\n                <>\n                  <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n                    {selectionLabels.cancelSelection}\n                  </Button>\n                  {selection.selectionSummary && !isMobile && (\n                    <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n                      {selection.selectionSummary}\n                    </Typography>\n                  )}\n                </>\n              ) : (\n                <TooltipProvider>\n                  <TooltipRoot delayDuration={200}>\n                    <TooltipTrigger asChild>\n                      <div>\n                        <Button\n                          variant=\"text\"\n                          size=\"sm\"\n                          StartIcon={SelectionAll}\n                          onClick={selection.onSelectionStart}\n                          disabled={selection.isSelectionDisabled}\n                        >\n                          {selectionLabels.startSelection}\n                        </Button>\n                      </div>\n                    </TooltipTrigger>\n                    {selection.labels?.selectionDisabledTooltip && selection.isSelectionDisabled && (\n                      <TooltipContent>{selection.labels.selectionDisabledTooltip}</TooltipContent>\n                    )}\n                  </TooltipRoot>\n                </TooltipProvider>\n              )}\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {showFiltersButton && (\n            <PopoverRoot>\n              <PopoverTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n                  {showBadge && (\n                    <Badge\n                      count={activeFiltersCount}\n                      color=\"primary\"\n                      ping={false}\n                      className=\"absolute -top-1 -right-1\"\n                    />\n                  )}\n                  {filtersButtonLabel}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"center\"\n                className={cn('w-fit p-4', isMobile && 'max-h-[80vh] w-[95vw] overflow-y-auto')}\n              >\n                <div className=\"flex flex-col gap-4\">\n                  {isMobile && primaryFilters}\n                  {secondaryFilters}\n                </div>\n              </PopoverContent>\n            </PopoverRoot>\n          )}\n          {showColumnVisibilityControls && (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n                  {columnVisibilityLabels.button}\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuCheckboxItem\n                  key={'all-columns'}\n                  className=\"capitalize\"\n                  checked={table.getAllColumns().every((column) => column.getIsVisible())}\n                  onSelect={(event) => event.preventDefault()}\n                  onCheckedChange={(value) =>\n                    table.getAllColumns().forEach((column) => column.toggleVisibility(!!value))\n                  }\n                >\n                  {columnVisibilityLabels.selectAll}\n                </DropdownMenuCheckboxItem>\n                <DropdownMenuSeparator className=\"bg-neutral-100\" />\n                {table\n                  .getAllColumns()\n                  .filter((column) => column.getCanHide() && column.id !== 'select')\n                  .map((column) => {\n                    return (\n                      <DropdownMenuCheckboxItem\n                        key={column.id}\n                        className=\"capitalize\"\n                        checked={column.getIsVisible()}\n                        onSelect={(event) => event.preventDefault()}\n                        onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                      >\n                        {column.columnDef.header?.toString()}\n                      </DropdownMenuCheckboxItem>\n                    )\n                  })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { FunnelSimple } from '@phosphor-icons/react/dist/ssr/FunnelSimple'\nimport { SelectionAll } from '@phosphor-icons/react/dist/ssr/SelectionAll'\nimport { TextColumns } from '@phosphor-icons/react/dist/ssr/TextColumns'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Badge } from '../../Badge'\nimport { Button } from '../../Button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { ColumnVisibilityConfig } from '@/components/DataTable/types'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n  readonly table: Table<TData>\n  readonly columnVisibility?: ColumnVisibilityConfig\n  readonly primaryFilters?: React.ReactNode\n  readonly secondaryFilters?: React.ReactNode\n  readonly activePrimaryFiltersCount?: number\n  readonly activeSecondaryFiltersCount?: number\n  readonly labels?: {\n    filters?: string\n    moreFilters?: string\n  }\n  readonly selection?: {\n    isSelectionStarted?: boolean\n    onSelectionStart?: () => void\n    onSelectionCancel?: () => void\n    selectionSummary?: string | null\n    isSelectionDisabled?: boolean\n    labels?: {\n      startSelection?: string\n      cancelSelection?: string\n      selectionSummary?: string\n      selectionDisabledTooltip?: string\n    }\n  }\n}\n\nconst defaultLabels = {\n  filters: 'Filters',\n  moreFilters: 'More filters',\n}\n\nconst defaultColumnVisibilityLabels = {\n  button: 'Hide columns',\n  selectAll: 'Select all',\n}\n\nconst defaultSelectionLabels = {\n  startSelection: 'Start selection',\n  cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  columnVisibility,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n  const isMobile = useIsMobile()\n\n  const labels = {\n    ...defaultLabels,\n    ...labelsProp,\n  }\n\n  const columnVisibilityLabels = {\n    ...defaultColumnVisibilityLabels,\n    ...columnVisibility?.labels,\n  }\n\n  const selectionLabels = {\n    ...defaultSelectionLabels,\n    ...selection?.labels,\n  }\n\n  const showColumnVisibilityControls = columnVisibility?.showControls ?? true\n\n  const hasPrimaryFilters = !!primaryFilters\n  const hasSecondaryFilters = !!secondaryFilters\n\n  const showFiltersButton = isMobile ? hasPrimaryFilters || hasSecondaryFilters : hasSecondaryFilters\n\n  const totalActiveFiltersCount = activePrimaryFiltersCount + activeSecondaryFiltersCount\n  const activeFiltersCount = isMobile ? totalActiveFiltersCount : activeSecondaryFiltersCount\n  const showBadge = activeFiltersCount > 0\n\n  const filtersButtonLabel = !hasPrimaryFilters || isMobile ? labels.filters : labels.moreFilters\n\n  if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n    return null\n  }\n\n  return (\n    <div className=\"flex shrink-0 flex-col gap-2 p-1\">\n      {!isMobile && primaryFilters && <div className=\"flex flex-wrap items-center gap-2\">{primaryFilters}</div>}\n\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          {selection && (\n            <div className=\"flex items-center gap-2\">\n              {selection.isSelectionStarted ? (\n                <>\n                  <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n                    {selectionLabels.cancelSelection}\n                  </Button>\n                  {selection.selectionSummary && !isMobile && (\n                    <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n                      {selection.selectionSummary}\n                    </Typography>\n                  )}\n                </>\n              ) : (\n                <TooltipProvider>\n                  <TooltipRoot delayDuration={200}>\n                    <TooltipTrigger asChild>\n                      <div>\n                        <Button\n                          variant=\"text\"\n                          size=\"sm\"\n                          StartIcon={SelectionAll}\n                          onClick={selection.onSelectionStart}\n                          disabled={selection.isSelectionDisabled}\n                        >\n                          {selectionLabels.startSelection}\n                        </Button>\n                      </div>\n                    </TooltipTrigger>\n                    {selection.labels?.selectionDisabledTooltip && selection.isSelectionDisabled && (\n                      <TooltipContent>{selection.labels.selectionDisabledTooltip}</TooltipContent>\n                    )}\n                  </TooltipRoot>\n                </TooltipProvider>\n              )}\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {showFiltersButton && (\n            <PopoverRoot>\n              <PopoverTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n                  {showBadge && (\n                    <Badge\n                      count={activeFiltersCount}\n                      color=\"primary\"\n                      ping={false}\n                      className=\"absolute -top-1 -right-1\"\n                    />\n                  )}\n                  {filtersButtonLabel}\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"center\"\n                className={cn('w-fit p-4', isMobile && 'max-h-[80vh] w-[95vw] overflow-y-auto')}\n              >\n                <div className=\"flex flex-col gap-4\">\n                  {isMobile && primaryFilters}\n                  {secondaryFilters}\n                </div>\n              </PopoverContent>\n            </PopoverRoot>\n          )}\n          {showColumnVisibilityControls && (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n                  {columnVisibilityLabels.button}\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuCheckboxItem\n                  key={'all-columns'}\n                  className=\"capitalize\"\n                  checked={table\n                    .getAllColumns()\n                    .filter((column) => column.getCanHide())\n                    .every((column) => column.getIsVisible())}\n                  onSelect={(event) => event.preventDefault()}\n                  onCheckedChange={(value) =>\n                    table\n                      .getAllColumns()\n                      .filter((column) => column.getCanHide())\n                      .forEach((column) => column.toggleVisibility(!!value))\n                  }\n                >\n                  {columnVisibilityLabels.selectAll}\n                </DropdownMenuCheckboxItem>\n                <DropdownMenuSeparator className=\"bg-neutral-100\" />\n                {table\n                  .getAllColumns()\n                  .filter((column) => column.getCanHide())\n                  .map((column) => {\n                    return (\n                      <DropdownMenuCheckboxItem\n                        key={column.id}\n                        className=\"capitalize\"\n                        checked={column.getIsVisible()}\n                        onSelect={(event) => event.preventDefault()}\n                        onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                      >\n                        {column.columnDef.header?.toString()}\n                      </DropdownMenuCheckboxItem>\n                    )\n                  })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+export declare const SELECT_COLUMN_ID = "select";
+export declare const ACTIONS_COLUMN_ID = "actions";
+export type CellKind = 'body' | 'header' | 'group-label';
+export declare function getDataTableCellClassName({ columnId, kind, }: {
+    columnId: string;
+    kind?: CellKind;
+}): string;
+export declare function getSkeletonClassName(columnId: string): "h-5 w-5 shrink-0" | "h-8 w-8 shrink-0" | "h-5 w-full";

package/dist/components/DataTable/components/dataTableCellStyles.js

@@ -0,0 +1,27 @@
+import { typographyVariants } from '../../Typography/Typography.js';
+import { cn } from '../../../lib/utils.js';
+
+const SELECT_COLUMN_ID = "select";
+const ACTIONS_COLUMN_ID = "actions";
+function getDataTableCellClassName({
+  columnId,
+  kind = "body"
+}) {
+  const layout = "flex items-center px-4 py-4 whitespace-nowrap";
+  if (columnId === SELECT_COLUMN_ID) {
+    return layout;
+  }
+  if (columnId === ACTIONS_COLUMN_ID) {
+    return cn(layout, "justify-end");
+  }
+  const weight = kind === "body" ? "regular" : "medium";
+  return cn(layout, typographyVariants({ variant: "body-md", weight }));
+}
+function getSkeletonClassName(columnId) {
+  if (columnId === SELECT_COLUMN_ID) return "h-5 w-5 shrink-0";
+  if (columnId === ACTIONS_COLUMN_ID) return "h-8 w-8 shrink-0";
+  return "h-5 w-full";
+}
+
+export { ACTIONS_COLUMN_ID, SELECT_COLUMN_ID, getDataTableCellClassName, getSkeletonClassName };
+//# sourceMappingURL=dataTableCellStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataTableCellStyles.js","sources":["../../../../src/components/DataTable/components/dataTableCellStyles.ts"],"sourcesContent":["import { typographyVariants } from '../../Typography'\n\nimport { cn } from '@/lib/utils'\n\nexport const SELECT_COLUMN_ID = 'select'\nexport const ACTIONS_COLUMN_ID = 'actions'\n\nexport type CellKind = 'body' | 'header' | 'group-label'\n\nexport function getDataTableCellClassName({\n  columnId,\n  kind = 'body',\n}: {\n  columnId: string\n  kind?: CellKind\n}) {\n  const layout = 'flex items-center px-4 py-4 whitespace-nowrap'\n\n  if (columnId === SELECT_COLUMN_ID) {\n    return layout\n  }\n\n  if (columnId === ACTIONS_COLUMN_ID) {\n    return cn(layout, 'justify-end')\n  }\n\n  const weight = kind === 'body' ? 'regular' : 'medium'\n\n  return cn(layout, typographyVariants({ variant: 'body-md', weight }))\n}\n\nexport function getSkeletonClassName(columnId: string) {\n  if (columnId === SELECT_COLUMN_ID) return 'h-5 w-5 shrink-0'\n  if (columnId === ACTIONS_COLUMN_ID) return 'h-8 w-8 shrink-0'\n  return 'h-5 w-full'\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,gBAAA,GAAmB;AACzB,MAAM,iBAAA,GAAoB;AAI1B,SAAS,yBAAA,CAA0B;AAAA,EACxC,QAAA;AAAA,EACA,IAAA,GAAO;AACT,CAAA,EAGG;AACD,EAAA,MAAM,MAAA,GAAS,+CAAA;AAEf,EAAA,IAAI,aAAa,gBAAA,EAAkB;AACjC,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,aAAa,iBAAA,EAAmB;AAClC,IAAA,OAAO,EAAA,CAAG,QAAQ,aAAa,CAAA;AAAA,EACjC;AAEA,EAAA,MAAM,MAAA,GAAS,IAAA,KAAS,MAAA,GAAS,SAAA,GAAY,QAAA;AAE7C,EAAA,OAAO,EAAA,CAAG,QAAQ,kBAAA,CAAmB,EAAE,SAAS,SAAA,EAAW,MAAA,EAAQ,CAAC,CAAA;AACtE;AAEO,SAAS,qBAAqB,QAAA,EAAkB;AACrD,EAAA,IAAI,QAAA,KAAa,kBAAkB,OAAO,kBAAA;AAC1C,EAAA,IAAI,QAAA,KAAa,mBAAmB,OAAO,kBAAA;AAC3C,EAAA,OAAO,YAAA;AACT;;;;"}

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

@@ -0,0 +1,27 @@
+import { Row } from '@tanstack/react-table';
+import { SelectionConfig } from '../types';
+type UseSelectColumnParams<TData> = {
+    selection?: SelectionConfig<TData>;
+    selectedIds: Set<string>;
+    selectionData: Array<TData>;
+    getRowId: (row: TData) => string;
+    handleRowSelect: (id: string, selected: boolean) => void;
+    handleSelectAll: (selected: boolean) => void;
+    isBackendPagination: boolean;
+    isLoading: boolean;
+};
+export declare function useSelectColumn<TData extends object>({ selection, selectedIds, selectionData, getRowId, handleRowSelect, handleSelectAll, isBackendPagination, isLoading, }: UseSelectColumnParams<TData>): {
+    column: {
+        id: string;
+        size: number;
+        enableHiding: boolean;
+        cell: ({ row }: {
+            row: Row<TData>;
+        }) => import("react/jsx-runtime").JSX.Element;
+        header: () => import("react/jsx-runtime").JSX.Element;
+    };
+    GroupSelectCell: ({ row }: {
+        row: Row<TData>;
+    }) => import("react/jsx-runtime").JSX.Element;
+} | null;
+export {};

package/dist/components/DataTable/hooks/useSelectColumn.js

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { DataTableCheckbox } from '../components/DataTableCheckbox.js';
+import { SELECT_COLUMN_ID } from '../components/dataTableCellStyles.js';
+
+function useSelectColumn({
+  selection,
+  selectedIds,
+  selectionData,
+  getRowId,
+  handleRowSelect,
+  handleSelectAll,
+  isBackendPagination,
+  isLoading
+}) {
+  const rowCheckboxProps = useMemo(
+    () => ({
+      selectedIds,
+      getRowId,
+      handleRowSelect,
+      isRowSelectionDisabled: selection?.isRowSelectionDisabled,
+      rowSelectionDisabledTooltip: selection?.labels?.rowSelectionDisabledTooltip
+    }),
+    [
+      selectedIds,
+      getRowId,
+      handleRowSelect,
+      selection?.isRowSelectionDisabled,
+      selection?.labels?.rowSelectionDisabledTooltip
+    ]
+  );
+  const SelectColumnHeader = useCallback(
+    () => /* @__PURE__ */ jsx(
+      DataTableCheckbox,
+      {
+        variant: "header",
+        isBackendPagination,
+        selectedIds,
+        data: selectionData,
+        handleSelectAll,
+        isLoading,
+        isSelectionDisabled: selection?.isSelectionDisabled ?? false,
+        selectionDisabledTooltip: selection?.labels?.selectionDisabledTooltip
+      }
+    ),
+    [
+      isBackendPagination,
+      selectedIds,
+      selectionData,
+      handleSelectAll,
+      isLoading,
+      selection?.isSelectionDisabled,
+      selection?.labels?.selectionDisabledTooltip
+    ]
+  );
+  const SelectColumnCell = useCallback(
+    ({ row }) => /* @__PURE__ */ jsx(DataTableCheckbox, { variant: "row", row, ...rowCheckboxProps }),
+    [rowCheckboxProps]
+  );
+  const GroupSelectCell = useCallback(
+    ({ row }) => /* @__PURE__ */ jsx(DataTableCheckbox, { variant: "group", row, selectedIds, getRowId, handleRowSelect }),
+    [selectedIds, getRowId, handleRowSelect]
+  );
+  return selection === void 0 ? null : {
+    column: {
+      id: SELECT_COLUMN_ID,
+      size: 50,
+      enableHiding: false,
+      cell: SelectColumnCell,
+      header: SelectColumnHeader
+    },
+    GroupSelectCell
+  };
+}
+
+export { useSelectColumn };
+//# sourceMappingURL=useSelectColumn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectColumn.js","sources":["../../../../src/components/DataTable/hooks/useSelectColumn.tsx"],"sourcesContent":["import { Row } from '@tanstack/react-table'\nimport { useCallback, useMemo } from 'react'\n\nimport { DataTableCheckbox } from '../components/DataTableCheckbox'\nimport { SELECT_COLUMN_ID } from '../components/dataTableCellStyles'\nimport { SelectionConfig } from '../types'\n\ntype UseSelectColumnParams<TData> = {\n  selection?: SelectionConfig<TData>\n  selectedIds: Set<string>\n  selectionData: Array<TData>\n  getRowId: (row: TData) => string\n  handleRowSelect: (id: string, selected: boolean) => void\n  handleSelectAll: (selected: boolean) => void\n  isBackendPagination: boolean\n  isLoading: boolean\n}\n\nexport function useSelectColumn<TData extends object>({\n  selection,\n  selectedIds,\n  selectionData,\n  getRowId,\n  handleRowSelect,\n  handleSelectAll,\n  isBackendPagination,\n  isLoading,\n}: UseSelectColumnParams<TData>) {\n  const rowCheckboxProps = useMemo(\n    () => ({\n      selectedIds,\n      getRowId,\n      handleRowSelect,\n      isRowSelectionDisabled: selection?.isRowSelectionDisabled,\n      rowSelectionDisabledTooltip: selection?.labels?.rowSelectionDisabledTooltip,\n    }),\n    [\n      selectedIds,\n      getRowId,\n      handleRowSelect,\n      selection?.isRowSelectionDisabled,\n      selection?.labels?.rowSelectionDisabledTooltip,\n    ],\n  )\n\n  const SelectColumnHeader = useCallback(\n    () => (\n      <DataTableCheckbox\n        variant=\"header\"\n        isBackendPagination={isBackendPagination}\n        selectedIds={selectedIds}\n        data={selectionData}\n        handleSelectAll={handleSelectAll}\n        isLoading={isLoading}\n        isSelectionDisabled={selection?.isSelectionDisabled ?? false}\n        selectionDisabledTooltip={selection?.labels?.selectionDisabledTooltip}\n      />\n    ),\n    [\n      isBackendPagination,\n      selectedIds,\n      selectionData,\n      handleSelectAll,\n      isLoading,\n      selection?.isSelectionDisabled,\n      selection?.labels?.selectionDisabledTooltip,\n    ],\n  )\n\n  const SelectColumnCell = useCallback(\n    ({ row }: { row: Row<TData> }) => <DataTableCheckbox variant=\"row\" row={row} {...rowCheckboxProps} />,\n    [rowCheckboxProps],\n  )\n\n  const GroupSelectCell = useCallback(\n    ({ row }: { row: Row<TData> }) => (\n      <DataTableCheckbox variant=\"group\" row={row} selectedIds={selectedIds} getRowId={getRowId} handleRowSelect={handleRowSelect} />\n    ),\n    [selectedIds, getRowId, handleRowSelect],\n  )\n\n  return selection === undefined\n    ? null\n    : {\n        column: {\n          id: SELECT_COLUMN_ID,\n          size: 50,\n          enableHiding: false,\n          cell: SelectColumnCell,\n          header: SelectColumnHeader,\n        },\n        GroupSelectCell,\n      }\n}\n"],"names":[],"mappings":";;;;;AAkBO,SAAS,eAAA,CAAsC;AAAA,EACpD,SAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAA,EAAiC;AAC/B,EAAA,MAAM,gBAAA,GAAmB,OAAA;AAAA,IACvB,OAAO;AAAA,MACL,WAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,wBAAwB,SAAA,EAAW,sBAAA;AAAA,MACnC,2BAAA,EAA6B,WAAW,MAAA,EAAQ;AAAA,KAClD,CAAA;AAAA,IACA;AAAA,MACE,WAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,SAAA,EAAW,sBAAA;AAAA,MACX,WAAW,MAAA,EAAQ;AAAA;AACrB,GACF;AAEA,EAAA,MAAM,kBAAA,GAAqB,WAAA;AAAA,IACzB,sBACE,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,QAAA;AAAA,QACR,mBAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA,EAAM,aAAA;AAAA,QACN,eAAA;AAAA,QACA,SAAA;AAAA,QACA,mBAAA,EAAqB,WAAW,mBAAA,IAAuB,KAAA;AAAA,QACvD,wBAAA,EAA0B,WAAW,MAAA,EAAQ;AAAA;AAAA,KAC/C;AAAA,IAEF;AAAA,MACE,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,eAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,EAAW,mBAAA;AAAA,MACX,WAAW,MAAA,EAAQ;AAAA;AACrB,GACF;AAEA,EAAA,MAAM,gBAAA,GAAmB,WAAA;AAAA,IACvB,CAAC,EAAE,GAAA,EAAI,qBAA2B,GAAA,CAAC,qBAAkB,OAAA,EAAQ,KAAA,EAAM,GAAA,EAAW,GAAG,gBAAA,EAAkB,CAAA;AAAA,IACnG,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,EAAE,GAAA,EAAI,qBACL,GAAA,CAAC,iBAAA,EAAA,EAAkB,OAAA,EAAQ,OAAA,EAAQ,GAAA,EAAU,WAAA,EAA0B,QAAA,EAAoB,eAAA,EAAkC,CAAA;AAAA,IAE/H,CAAC,WAAA,EAAa,QAAA,EAAU,eAAe;AAAA,GACzC;AAEA,EAAA,OAAO,SAAA,KAAc,SACjB,IAAA,GACA;AAAA,IACE,MAAA,EAAQ;AAAA,MACN,EAAA,EAAI,gBAAA;AAAA,MACJ,IAAA,EAAM,EAAA;AAAA,MACN,YAAA,EAAc,KAAA;AAAA,MACd,IAAA,EAAM,gBAAA;AAAA,MACN,MAAA,EAAQ;AAAA,KACV;AAAA,IACA;AAAA,GACF;AACN;;;;"}

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

@@ -2,15 +2,12 @@ import { SelectionConfig } from '../types';
 type UseSelectionProps<TData> = {
     data: Array<TData>;
     getRowId: (row: TData) => string;
-    isRowSelectionDisabled?: boolean | ((row: TData) => boolean);
     selection?: SelectionConfig<TData>;
 };
 type UseSelectionReturn = {
     selectedIds: Set<string>;
-    isRowSelected: (id: string) => boolean;
     handleRowSelect: (id: string, selected: boolean) => void;
     handleSelectAll: (selected: boolean) => void;
-    showHeaderCheckbox: boolean;
 };
 export declare function useSelection<TData>({ data, getRowId, selection }: UseSelectionProps<TData>): UseSelectionReturn;
 export {};

package/dist/components/DataTable/hooks/useSelection.js

@@ -25,14 +25,10 @@ function useSelection({ data, getRowId, selection }) {
     },
     [selection]
   );
-  const isRowSelected = useCallback((id) => selectedIds.has(id), [selectedIds]);
-  const showHeaderCheckbox = !!selection;
   return {
     selectedIds,
-    isRowSelected,
     handleRowSelect,
-    handleSelectAll,
-    showHeaderCheckbox
+    handleSelectAll
   };
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"useSelection.js","sources":["../../../../src/components/DataTable/hooks/useSelection.ts"],"sourcesContent":["import { useMemo, useCallback } from 'react'\n\nimport { SelectionConfig } from '../types'\n\ntype UseSelectionProps<TData> = {\n  data: Array<TData>\n  getRowId: (row: TData) => string\n  isRowSelectionDisabled?: boolean | ((row: TData) => boolean)\n  selection?: SelectionConfig<TData>\n}\n\ntype UseSelectionReturn = {\n  selectedIds: Set<string>\n  isRowSelected: (id: string) => boolean\n  handleRowSelect: (id: string, selected: boolean) => void\n  handleSelectAll: (selected: boolean) => void\n  showHeaderCheckbox: boolean\n}\n\nexport function useSelection<TData>({ data, getRowId, selection }: UseSelectionProps<TData>): UseSelectionReturn {\n  const selectedIds = useMemo(() => {\n    if (!selection) return new Set<string>()\n    return new Set(data.filter(selection.isSelected).map(getRowId))\n  }, [data, getRowId, selection])\n\n  const handleRowSelect = useCallback(\n    (id: string, selected: boolean) => {\n      if (!selection) return\n      const row = data.find((row) => getRowId(row) === id)\n\n      if (row) {\n        const isDisabled =\n          typeof selection.isRowSelectionDisabled === 'function'\n            ? selection.isRowSelectionDisabled(row)\n            : selection.isRowSelectionDisabled\n        if (!isDisabled) {\n          selection.onSelect?.(row, selected)\n        }\n      }\n    },\n    [data, getRowId, selection],\n  )\n\n  const handleSelectAll = useCallback(\n    (selected: boolean) => {\n      if (!selection?.onSelectAll) return\n      selection.onSelectAll(selected)\n    },\n    [selection],\n  )\n\n  const isRowSelected = useCallback((id: string) => selectedIds.has(id), [selectedIds])\n\n  const showHeaderCheckbox = !!selection\n\n  return {\n    selectedIds,\n    isRowSelected,\n    handleRowSelect,\n    handleSelectAll,\n    showHeaderCheckbox,\n  }\n}\n"],"names":["row"],"mappings":";;AAmBO,SAAS,YAAA,CAAoB,EAAE,IAAA,EAAM,QAAA,EAAU,WAAU,EAAiD;AAC/G,EAAA,MAAM,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,IAAI,CAAC,SAAA,EAAW,uBAAO,IAAI,GAAA,EAAY;AACvC,IAAA,OAAO,IAAI,IAAI,IAAA,CAAK,MAAA,CAAO,UAAU,UAAU,CAAA,CAAE,GAAA,CAAI,QAAQ,CAAC,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,IAAA,EAAM,QAAA,EAAU,SAAS,CAAC,CAAA;AAE9B,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,IAAY,QAAA,KAAsB;AACjC,MAAA,IAAI,CAAC,SAAA,EAAW;AAChB,MAAA,MAAM,GAAA,GAAM,KAAK,IAAA,CAAK,CAACA,SAAQ,QAAA,CAASA,IAAG,MAAM,EAAE,CAAA;AAEnD,MAAA,IAAI,GAAA,EAAK;AACP,QAAA,MAAM,UAAA,GACJ,OAAO,SAAA,CAAU,sBAAA,KAA2B,aACxC,SAAA,CAAU,sBAAA,CAAuB,GAAG,CAAA,GACpC,SAAA,CAAU,sBAAA;AAChB,QAAA,IAAI,CAAC,UAAA,EAAY;AACf,UAAA,SAAA,CAAU,QAAA,GAAW,KAAK,QAAQ,CAAA;AAAA,QACpC;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,IAAA,EAAM,QAAA,EAAU,SAAS;AAAA,GAC5B;AAEA,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,QAAA,KAAsB;AACrB,MAAA,IAAI,CAAC,WAAW,WAAA,EAAa;AAC7B,MAAA,SAAA,CAAU,YAAY,QAAQ,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,SAAS;AAAA,GACZ;AAEA,EAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,CAAC,EAAA,KAAe,WAAA,CAAY,IAAI,EAAE,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEpF,EAAA,MAAM,kBAAA,GAAqB,CAAC,CAAC,SAAA;AAE7B,EAAA,OAAO;AAAA,IACL,WAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useSelection.js","sources":["../../../../src/components/DataTable/hooks/useSelection.ts"],"sourcesContent":["import { useMemo, useCallback } from 'react'\n\nimport { SelectionConfig } from '../types'\n\ntype UseSelectionProps<TData> = {\n  data: Array<TData>\n  getRowId: (row: TData) => string\n  selection?: SelectionConfig<TData>\n}\n\ntype UseSelectionReturn = {\n  selectedIds: Set<string>\n  handleRowSelect: (id: string, selected: boolean) => void\n  handleSelectAll: (selected: boolean) => void\n}\n\nexport function useSelection<TData>({ data, getRowId, selection }: UseSelectionProps<TData>): UseSelectionReturn {\n  const selectedIds = useMemo(() => {\n    if (!selection) return new Set<string>()\n    return new Set(data.filter(selection.isSelected).map(getRowId))\n  }, [data, getRowId, selection])\n\n  const handleRowSelect = useCallback(\n    (id: string, selected: boolean) => {\n      if (!selection) return\n      const row = data.find((row) => getRowId(row) === id)\n\n      if (row) {\n        const isDisabled =\n          typeof selection.isRowSelectionDisabled === 'function'\n            ? selection.isRowSelectionDisabled(row)\n            : selection.isRowSelectionDisabled\n        if (!isDisabled) {\n          selection.onSelect?.(row, selected)\n        }\n      }\n    },\n    [data, getRowId, selection],\n  )\n\n  const handleSelectAll = useCallback(\n    (selected: boolean) => {\n      if (!selection?.onSelectAll) return\n      selection.onSelectAll(selected)\n    },\n    [selection],\n  )\n\n  return {\n    selectedIds,\n    handleRowSelect,\n    handleSelectAll,\n  }\n}\n"],"names":["row"],"mappings":";;AAgBO,SAAS,YAAA,CAAoB,EAAE,IAAA,EAAM,QAAA,EAAU,WAAU,EAAiD;AAC/G,EAAA,MAAM,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,IAAI,CAAC,SAAA,EAAW,uBAAO,IAAI,GAAA,EAAY;AACvC,IAAA,OAAO,IAAI,IAAI,IAAA,CAAK,MAAA,CAAO,UAAU,UAAU,CAAA,CAAE,GAAA,CAAI,QAAQ,CAAC,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,IAAA,EAAM,QAAA,EAAU,SAAS,CAAC,CAAA;AAE9B,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,IAAY,QAAA,KAAsB;AACjC,MAAA,IAAI,CAAC,SAAA,EAAW;AAChB,MAAA,MAAM,GAAA,GAAM,KAAK,IAAA,CAAK,CAACA,SAAQ,QAAA,CAASA,IAAG,MAAM,EAAE,CAAA;AAEnD,MAAA,IAAI,GAAA,EAAK;AACP,QAAA,MAAM,UAAA,GACJ,OAAO,SAAA,CAAU,sBAAA,KAA2B,aACxC,SAAA,CAAU,sBAAA,CAAuB,GAAG,CAAA,GACpC,SAAA,CAAU,sBAAA;AAChB,QAAA,IAAI,CAAC,UAAA,EAAY;AACf,UAAA,SAAA,CAAU,QAAA,GAAW,KAAK,QAAQ,CAAA;AAAA,QACpC;AAAA,MACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,IAAA,EAAM,QAAA,EAAU,SAAS;AAAA,GAC5B;AAEA,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,QAAA,KAAsB;AACrB,MAAA,IAAI,CAAC,WAAW,WAAA,EAAa;AAC7B,MAAA,SAAA,CAAU,YAAY,QAAQ,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,SAAS;AAAA,GACZ;AAEA,EAAA,OAAO;AAAA,IACL,WAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

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

@@ -107,6 +107,18 @@ export type BackendPaginationProps = {
     /** Callback when page changes */
     readonly onPageChange: (page: number) => void;
 } & BasePaginationProps;
+export type EmptyStateConfig = {
+    /** Title for the empty state */
+    title: string;
+    /** Description for the empty state */
+    description: string;
+    /** Route for the empty state image */
+    imageRoute?: string;
+    /** Alt text for the empty state image */
+    imageAlt?: string;
+    /** Class name for the empty state image */
+    imageClassName?: string;
+};
 export type GroupingConfig<TData> = {
     /** Returns the children for a row. Return `undefined`/empty for leaf rows (no group). */
     readonly getSubRows: (row: TData) => Array<TData> | undefined;
@@ -141,18 +153,7 @@ type DataTableBaseProps<TData> = {
     /** Whether to hide the checkbox selection column */
     readonly hideCheckboxSelection?: boolean;
     /** Empty state configuration */
-    readonly emptyState?: {
-        /** Title for the empty state */
-        title: string;
-        /** Description for the empty state */
-        description: string;
-        /** Route for the empty state image */
-        imageRoute?: string;
-        /** Alt text for the empty state image */
-        imageAlt?: string;
-        /** Class name for the empty state image */
-        imageClassName?: string;
-    };
+    readonly emptyState?: EmptyStateConfig;
     /** Text customization for filters */
     readonly labels?: {
         /** Text for the filters button when only secondary filters are present (default: "Filters") */

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "4.6.2",
+  "version": "4.6.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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

@@ -1,9 +0,0 @@
-import { Row } from '@tanstack/react-table';
-type DataTableGroupRowSelectorProps<TData extends object> = {
-    readonly row: Row<TData>;
-    readonly selectedIds: Set<string>;
-    readonly getRowId: (original: TData) => string;
-    readonly handleRowSelect: (rowId: string, checked: boolean) => void;
-};
-export declare function DataTableGroupRowSelector<TData extends object>({ row, selectedIds, getRowId, handleRowSelect, }: DataTableGroupRowSelectorProps<TData>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/DataTable/components/DataTableGroupRowSelector.js

@@ -1,32 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Checkbox } from '../../Checkbox/Checkbox.js';
-
-function DataTableGroupRowSelector({
-  row,
-  selectedIds,
-  getRowId,
-  handleRowSelect
-}) {
-  const leafRows = row.getLeafRows();
-  const leafIds = leafRows.map((leaf) => getRowId(leaf.original));
-  const selectedCount = leafIds.filter((id) => selectedIds.has(id)).length;
-  const allSelected = leafIds.length > 0 && selectedCount === leafIds.length;
-  const someSelected = selectedCount > 0 && !allSelected;
-  const handleToggle = (checked) => {
-    leafIds.forEach((id) => handleRowSelect(id, checked));
-  };
-  return /* @__PURE__ */ jsx(
-    Checkbox,
-    {
-      checked: someSelected ? "indeterminate" : allSelected,
-      onCheckedChange: (checked) => handleToggle(!!checked),
-      onClick: (event) => event.stopPropagation(),
-      className: "cursor-default",
-      disabled: leafIds.length === 0,
-      "aria-label": "Select group"
-    }
-  );
-}
-
-export { DataTableGroupRowSelector };
-//# sourceMappingURL=DataTableGroupRowSelector.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DataTableGroupRowSelector.js","sources":["../../../../src/components/DataTable/components/DataTableGroupRowSelector.tsx"],"sourcesContent":["import { Row } from '@tanstack/react-table'\n\nimport { Checkbox } from '@/components/Checkbox'\n\ntype DataTableGroupRowSelectorProps<TData extends object> = {\n  readonly row: Row<TData>\n  readonly selectedIds: Set<string>\n  readonly getRowId: (original: TData) => string\n  readonly handleRowSelect: (rowId: string, checked: boolean) => void\n}\n\nexport function DataTableGroupRowSelector<TData extends object>({\n  row,\n  selectedIds,\n  getRowId,\n  handleRowSelect,\n}: DataTableGroupRowSelectorProps<TData>) {\n  const leafRows = row.getLeafRows()\n  const leafIds = leafRows.map((leaf) => getRowId(leaf.original))\n  const selectedCount = leafIds.filter((id) => selectedIds.has(id)).length\n\n  const allSelected = leafIds.length > 0 && selectedCount === leafIds.length\n  const someSelected = selectedCount > 0 && !allSelected\n\n  const handleToggle = (checked: boolean) => {\n    leafIds.forEach((id) => handleRowSelect(id, checked))\n  }\n\n  return (\n    <Checkbox\n      checked={someSelected ? 'indeterminate' : allSelected}\n      onCheckedChange={(checked) => handleToggle(!!checked)}\n      onClick={(event) => event.stopPropagation()}\n      className=\"cursor-default\"\n      disabled={leafIds.length === 0}\n      aria-label=\"Select group\"\n    />\n  )\n}\n"],"names":[],"mappings":";;;AAWO,SAAS,yBAAA,CAAgD;AAAA,EAC9D,GAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAA0C;AACxC,EAAA,MAAM,QAAA,GAAW,IAAI,WAAA,EAAY;AACjC,EAAA,MAAM,OAAA,GAAU,SAAS,GAAA,CAAI,CAAC,SAAS,QAAA,CAAS,IAAA,CAAK,QAAQ,CAAC,CAAA;AAC9D,EAAA,MAAM,aAAA,GAAgB,QAAQ,MAAA,CAAO,CAAC,OAAO,WAAA,CAAY,GAAA,CAAI,EAAE,CAAC,CAAA,CAAE,MAAA;AAElE,EAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,MAAA,GAAS,CAAA,IAAK,kBAAkB,OAAA,CAAQ,MAAA;AACpE,EAAA,MAAM,YAAA,GAAe,aAAA,GAAgB,CAAA,IAAK,CAAC,WAAA;AAE3C,EAAA,MAAM,YAAA,GAAe,CAAC,OAAA,KAAqB;AACzC,IAAA,OAAA,CAAQ,QAAQ,CAAC,EAAA,KAAO,eAAA,CAAgB,EAAA,EAAI,OAAO,CAAC,CAAA;AAAA,EACtD,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,eAAe,eAAA,GAAkB,WAAA;AAAA,MAC1C,iBAAiB,CAAC,OAAA,KAAY,YAAA,CAAa,CAAC,CAAC,OAAO,CAAA;AAAA,MACpD,OAAA,EAAS,CAAC,KAAA,KAAU,KAAA,CAAM,eAAA,EAAgB;AAAA,MAC1C,SAAA,EAAU,gBAAA;AAAA,MACV,QAAA,EAAU,QAAQ,MAAA,KAAW,CAAA;AAAA,MAC7B,YAAA,EAAW;AAAA;AAAA,GACb;AAEJ;;;;"}

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

@@ -1,11 +0,0 @@
-import { Row } from '@tanstack/react-table';
-type DataTableRowSelectorProps<TData extends object> = {
-    readonly row: Row<TData>;
-    readonly selectedIds: Set<string>;
-    readonly getRowId: (original: TData) => string;
-    readonly handleRowSelect: (rowId: string, checked: boolean) => void;
-    readonly isRowSelectionDisabled?: boolean | ((row: TData) => boolean);
-    readonly rowSelectionDisabledTooltip?: string | ((row: TData) => string | undefined);
-};
-export declare function DataTableRowSelector<TData extends object>({ row, selectedIds, getRowId, handleRowSelect, isRowSelectionDisabled, rowSelectionDisabledTooltip, }: DataTableRowSelectorProps<TData>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/DataTable/components/DataTableRowSelector.js

@@ -1,34 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Checkbox } from '../../Checkbox/Checkbox.js';
-import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } from '../../Tooltip/Tooltip.js';
-
-function DataTableRowSelector({
-  row,
-  selectedIds,
-  getRowId,
-  handleRowSelect,
-  isRowSelectionDisabled,
-  rowSelectionDisabledTooltip
-}) {
-  const isDisabled = typeof isRowSelectionDisabled === "function" ? isRowSelectionDisabled(row.original) : isRowSelectionDisabled ?? false;
-  const tooltipText = typeof rowSelectionDisabledTooltip === "function" ? rowSelectionDisabledTooltip(row.original) : rowSelectionDisabledTooltip;
-  const checkbox = /* @__PURE__ */ jsx(
-    Checkbox,
-    {
-      checked: selectedIds.has(getRowId(row.original)),
-      onCheckedChange: (checked) => handleRowSelect(getRowId(row.original), !!checked),
-      "aria-label": "Select row",
-      disabled: isDisabled
-    }
-  );
-  if (isDisabled && tooltipText) {
-    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(TooltipRoot, { delayDuration: 200, children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { children: checkbox }) }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: tooltipText })
-    ] }) });
-  }
-  return checkbox;
-}
-
-export { DataTableRowSelector };
-//# sourceMappingURL=DataTableRowSelector.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DataTableRowSelector.js","sources":["../../../../src/components/DataTable/components/DataTableRowSelector.tsx"],"sourcesContent":["import { Row } from '@tanstack/react-table'\n\nimport { Checkbox } from '@/components/Checkbox'\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\n\ntype DataTableRowSelectorProps<TData extends object> = {\n  readonly row: Row<TData>\n  readonly selectedIds: Set<string>\n  readonly getRowId: (original: TData) => string\n  readonly handleRowSelect: (rowId: string, checked: boolean) => void\n  readonly isRowSelectionDisabled?: boolean | ((row: TData) => boolean)\n  readonly rowSelectionDisabledTooltip?: string | ((row: TData) => string | undefined)\n}\n\nexport function DataTableRowSelector<TData extends object>({\n  row,\n  selectedIds,\n  getRowId,\n  handleRowSelect,\n  isRowSelectionDisabled,\n  rowSelectionDisabledTooltip,\n}: DataTableRowSelectorProps<TData>) {\n  const isDisabled =\n    typeof isRowSelectionDisabled === 'function'\n      ? isRowSelectionDisabled(row.original)\n      : (isRowSelectionDisabled ?? false)\n\n  const tooltipText =\n    typeof rowSelectionDisabledTooltip === 'function'\n      ? rowSelectionDisabledTooltip(row.original)\n      : rowSelectionDisabledTooltip\n\n  const checkbox = (\n    <Checkbox\n      checked={selectedIds.has(getRowId(row.original))}\n      onCheckedChange={(checked) => handleRowSelect(getRowId(row.original), !!checked)}\n      aria-label=\"Select row\"\n      disabled={isDisabled}\n    />\n  )\n\n  if (isDisabled && tooltipText) {\n    return (\n      <TooltipProvider>\n        <TooltipRoot delayDuration={200}>\n          <TooltipTrigger asChild>\n            <div>{checkbox}</div>\n          </TooltipTrigger>\n          <TooltipContent>{tooltipText}</TooltipContent>\n        </TooltipRoot>\n      </TooltipProvider>\n    )\n  }\n\n  return checkbox\n}\n"],"names":[],"mappings":";;;;AAcO,SAAS,oBAAA,CAA2C;AAAA,EACzD,GAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA;AACF,CAAA,EAAqC;AACnC,EAAA,MAAM,UAAA,GACJ,OAAO,sBAAA,KAA2B,UAAA,GAC9B,uBAAuB,GAAA,CAAI,QAAQ,IAClC,sBAAA,IAA0B,KAAA;AAEjC,EAAA,MAAM,cACJ,OAAO,2BAAA,KAAgC,aACnC,2BAAA,CAA4B,GAAA,CAAI,QAAQ,CAAA,GACxC,2BAAA;AAEN,EAAA,MAAM,QAAA,mBACJ,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAS,WAAA,CAAY,GAAA,CAAI,QAAA,CAAS,GAAA,CAAI,QAAQ,CAAC,CAAA;AAAA,MAC/C,eAAA,EAAiB,CAAC,OAAA,KAAY,eAAA,CAAgB,QAAA,CAAS,IAAI,QAAQ,CAAA,EAAG,CAAC,CAAC,OAAO,CAAA;AAAA,MAC/E,YAAA,EAAW,YAAA;AAAA,MACX,QAAA,EAAU;AAAA;AAAA,GACZ;AAGF,EAAA,IAAI,cAAc,WAAA,EAAa;AAC7B,IAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,WAAA,EAAA,EAAY,eAAe,GAAA,EAC1B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAe,OAAA,EAAO,IAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAK,oBAAS,CAAA,EACjB,CAAA;AAAA,sBACA,GAAA,CAAC,kBAAgB,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EAC/B,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,QAAA;AACT;;;;"}

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

@@ -1,11 +0,0 @@
-type SelectAllHeaderProps<TData extends object> = {
-    readonly isBackendPagination: boolean;
-    readonly selectedIds: Set<string>;
-    readonly data: Array<TData>;
-    readonly handleSelectAll: (checked: boolean) => void;
-    readonly isLoading: boolean;
-    readonly isSelectionDisabled: boolean;
-    readonly selectionDisabledTooltip: string | undefined;
-};
-export declare function DataTableSelectHeader<TData extends object>({ isBackendPagination, selectedIds, data, handleSelectAll, isLoading, isSelectionDisabled, selectionDisabledTooltip, }: SelectAllHeaderProps<TData>): import("react/jsx-runtime").JSX.Element | null;
-export {};