periplo-ui 3.22.0 → 3.22.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Checkbox/Checkbox.d.ts +21 -4
- package/dist/components/Checkbox/Checkbox.js +3 -13
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/DataTable/DataTable.js +0 -1
- package/dist/components/DataTable/DataTable.js.map +1 -1
- package/dist/components/DataTable/components/DataTableBody.d.ts +1 -2
- package/dist/components/DataTable/components/DataTableBody.js +20 -21
- package/dist/components/DataTable/components/DataTableBody.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
3
|
-
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
type CheckboxProps = {
|
|
4
4
|
/** Additional CSS classes to be applied to the checkbox */
|
|
5
5
|
className?: string;
|
|
6
6
|
/** The controlled checked state of the checkbox */
|
|
@@ -17,7 +17,7 @@ interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPr
|
|
|
17
17
|
value?: string;
|
|
18
18
|
/** Handler called when the checked state changes */
|
|
19
19
|
onCheckedChange?: (checked: boolean) => void;
|
|
20
|
-
}
|
|
20
|
+
} & React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
|
|
21
21
|
/**
|
|
22
22
|
* A controlled checkbox component built on top of Radix UI Checkbox.
|
|
23
23
|
*
|
|
@@ -39,6 +39,23 @@ interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPr
|
|
|
39
39
|
* </div>
|
|
40
40
|
* ```
|
|
41
41
|
*/
|
|
42
|
-
declare const Checkbox: React.ForwardRefExoticComponent<
|
|
42
|
+
declare const Checkbox: React.ForwardRefExoticComponent<{
|
|
43
|
+
/** Additional CSS classes to be applied to the checkbox */
|
|
44
|
+
className?: string;
|
|
45
|
+
/** The controlled checked state of the checkbox */
|
|
46
|
+
checked?: boolean;
|
|
47
|
+
/** The default checked state when initially rendered */
|
|
48
|
+
defaultChecked?: boolean;
|
|
49
|
+
/** Whether the checkbox is disabled */
|
|
50
|
+
disabled?: boolean;
|
|
51
|
+
/** Whether the checkbox is required in a form */
|
|
52
|
+
required?: boolean;
|
|
53
|
+
/** The name of the checkbox when used in a form */
|
|
54
|
+
name?: string;
|
|
55
|
+
/** The value of the checkbox when used in a form */
|
|
56
|
+
value?: string;
|
|
57
|
+
/** Handler called when the checked state changes */
|
|
58
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
59
|
+
} & Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
43
60
|
export type { CheckboxProps };
|
|
44
61
|
export { Checkbox };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
4
2
|
import { Check } from '@phosphor-icons/react';
|
|
3
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
4
|
+
import * as React from 'react';
|
|
5
5
|
import { cn } from '../../lib/utils.js';
|
|
6
6
|
|
|
7
7
|
const Checkbox = React.forwardRef(
|
|
@@ -18,17 +18,7 @@ const Checkbox = React.forwardRef(
|
|
|
18
18
|
className
|
|
19
19
|
),
|
|
20
20
|
...props,
|
|
21
|
-
children: /* @__PURE__ */ jsx(
|
|
22
|
-
CheckboxPrimitive.Indicator,
|
|
23
|
-
{
|
|
24
|
-
className: cn(
|
|
25
|
-
"absolute inset-0 flex items-center justify-center",
|
|
26
|
-
"data-[state=checked]:animate-in data-[state=unchecked]:animate-out",
|
|
27
|
-
"data-[state=checked]:fade-in-0 data-[state=unchecked]:fade-out-0"
|
|
28
|
-
),
|
|
29
|
-
children: /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-white" })
|
|
30
|
-
}
|
|
31
|
-
)
|
|
21
|
+
children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("absolute inset-0 flex items-center justify-center"), children: /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-white" }) })
|
|
32
22
|
}
|
|
33
23
|
)
|
|
34
24
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\ntype CheckboxProps = {\n /** Additional CSS classes to be applied to the checkbox */\n className?: string\n /** The controlled checked state of the checkbox */\n checked?: boolean\n /** The default checked state when initially rendered */\n defaultChecked?: boolean\n /** Whether the checkbox is disabled */\n disabled?: boolean\n /** Whether the checkbox is required in a form */\n required?: boolean\n /** The name of the checkbox when used in a form */\n name?: string\n /** The value of the checkbox when used in a form */\n value?: string\n /** Handler called when the checked state changes */\n onCheckedChange?: (checked: boolean) => void\n} & React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n\n/**\n * A controlled checkbox component built on top of Radix UI Checkbox.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Checkbox />\n *\n * // With controlled state\n * <Checkbox checked={checked} onCheckedChange={setChecked} />\n *\n * // With form integration\n * <Checkbox name=\"terms\" required />\n *\n * // With label\n * <div className=\"flex items-center gap-2\">\n * <Checkbox id=\"terms\" />\n * <label htmlFor=\"terms\">Accept terms</label>\n * </div>\n * ```\n */\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n ({ className, ...props }, ref) => (\n <CheckboxPrimitive.Root\n ref={ref}\n className={cn(\n 'peer relative h-5 w-5 shrink-0 rounded-[5px] border border-neutral-300 transition-colors',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-500 focus-visible:ring-offset-2',\n 'disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:opacity-50',\n 'data-[state=checked]:border-neutral-500 data-[state=checked]:bg-neutral-500',\n 'hover:border-neutral-500 disabled:hover:border-neutral-300 data-[state=checked]:hover:border-neutral-500',\n className,\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator className={cn('absolute inset-0 flex items-center justify-center')}>\n <Check className=\"h-3.5 w-3.5 text-white\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n ),\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport type { CheckboxProps }\nexport { Checkbox }\n"],"names":[],"mappings":";;;;;;AA8CA,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA;AAAA,IAAC,iBAAkB,CAAA,IAAA;AAAA,IAAlB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,QACT,0FAAA;AAAA,QACA,4GAAA;AAAA,QACA,yEAAA;AAAA,QACA,6EAAA;AAAA,QACA,0GAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,iBAAA,CAAkB,SAAlB,EAAA,EAA4B,SAAW,EAAA,EAAA,CAAG,mDAAmD,CAAA,EAC5F,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAM,SAAU,EAAA,wBAAA,EAAyB,CAC5C,EAAA;AAAA;AAAA;AAGN;AAEA,QAAA,CAAS,WAAc,GAAA,UAAA;;;;"}
|
|
@@ -1 +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 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
|
|
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 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 pageSize={pageSize}\n getRowId={getRowId}\n rowSelection={rowSelection}\n isSelectionStarted={selection?.isSelectionStarted ?? false}\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;AACA;AACA;AACA;AACqD;AAAA;AACvD;AAGN;AAGI;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACc;AACQ;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}
|
|
@@ -3,11 +3,10 @@ import { RowIdentifierFn } from '../types';
|
|
|
3
3
|
type DataTableBodyProps<TData> = {
|
|
4
4
|
readonly table: Table<TData>;
|
|
5
5
|
readonly isLoading?: boolean;
|
|
6
|
-
readonly isSelectable?: boolean;
|
|
7
6
|
readonly pageSize: number;
|
|
8
7
|
readonly getRowId: RowIdentifierFn<TData>;
|
|
9
8
|
readonly rowSelection: Record<string, boolean>;
|
|
10
9
|
readonly isSelectionStarted: boolean;
|
|
11
10
|
};
|
|
12
|
-
export declare function DataTableBody<TData>({ table, isLoading,
|
|
11
|
+
export declare function DataTableBody<TData>({ table, isLoading, pageSize, getRowId, rowSelection, isSelectionStarted, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
13
12
|
export {};
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { flexRender } from '@tanstack/react-table';
|
|
3
|
-
import * as React from 'react';
|
|
4
3
|
import { Skeleton } from '../../Skeleton/Skeleton.js';
|
|
5
|
-
import { TableRow, TableCell
|
|
4
|
+
import { TableBody, TableRow, TableCell } from '../../Table/Table.js';
|
|
6
5
|
import { Typography } from '../../Typography/Typography.js';
|
|
7
6
|
import { cn } from '../../../lib/utils.js';
|
|
8
7
|
|
|
@@ -12,40 +11,40 @@ function TableRowComponent({
|
|
|
12
11
|
}) {
|
|
13
12
|
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)) });
|
|
14
13
|
}
|
|
15
|
-
const MemoizedTableRow = React.memo(
|
|
16
|
-
TableRowComponent,
|
|
17
|
-
(prevProps, nextProps) => prevProps.row === nextProps.row && prevProps.isSelected === nextProps.isSelected && prevProps.isSelectionStarted === nextProps.isSelectionStarted
|
|
18
|
-
);
|
|
19
14
|
function DataTableBody({
|
|
20
15
|
table,
|
|
21
16
|
isLoading,
|
|
22
|
-
isSelectable,
|
|
23
17
|
pageSize,
|
|
24
18
|
getRowId,
|
|
25
19
|
rowSelection,
|
|
26
20
|
isSelectionStarted
|
|
27
21
|
}) {
|
|
28
22
|
if (isLoading) {
|
|
29
|
-
return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, index) => /* @__PURE__ */
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
23
|
+
return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, index) => /* @__PURE__ */ jsx(TableRow, { children: table.getAllColumns().filter((column) => column.getIsVisible()).map((column) => {
|
|
24
|
+
let skeletonClass = "h-[20px] w-full";
|
|
25
|
+
if (column.id === "actions") skeletonClass = "h-8 w-8 shrink-0";
|
|
26
|
+
else if (column.id === "select") skeletonClass = "h-5 w-5 shrink-0";
|
|
27
|
+
let justifyClass = "justify-center";
|
|
28
|
+
if (column.id === "actions") justifyClass = "justify-end";
|
|
29
|
+
else if (column.id === "select") justifyClass = "justify-start";
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
TableCell,
|
|
32
|
+
{
|
|
33
|
+
style: { width: column.columnDef.size },
|
|
34
|
+
children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center", justifyClass), children: /* @__PURE__ */ jsx(Skeleton, { className: cn(skeletonClass) }) })
|
|
35
|
+
},
|
|
36
|
+
`skeleton-cell-${String(index)}-${column.id}`
|
|
37
|
+
);
|
|
38
|
+
}) }, `skeleton-row-${String(index)}`)) });
|
|
33
39
|
}
|
|
34
40
|
const rows = table.getRowModel().rows;
|
|
35
41
|
if (!rows.length) {
|
|
36
|
-
return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
|
|
37
|
-
TableCell,
|
|
38
|
-
{
|
|
39
|
-
colSpan: isSelectable ? table.getAllColumns().length + 1 : table.getAllColumns().length,
|
|
40
|
-
className: "h-[200px] text-center",
|
|
41
|
-
children: /* @__PURE__ */ jsx(Typography, { color: "neutral", children: "No data available" })
|
|
42
|
-
}
|
|
43
|
-
) }) });
|
|
42
|
+
return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: table.getAllColumns().length, className: "h-[200px] text-center", children: /* @__PURE__ */ jsx(Typography, { color: "neutral", children: "No data available" }) }) }) });
|
|
44
43
|
}
|
|
45
44
|
return /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
|
|
46
45
|
const rowId = getRowId(row.original);
|
|
47
46
|
const isSelected = rowSelection[rowId] ?? false;
|
|
48
|
-
return /* @__PURE__ */ jsx(
|
|
47
|
+
return /* @__PURE__ */ jsx(TableRowComponent, { row, isSelected, isSelectionStarted }, rowId);
|
|
49
48
|
}) });
|
|
50
49
|
}
|
|
51
50
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\
|
|
1
|
+
{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\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 pageSize: number\n readonly getRowId: RowIdentifierFn<TData>\n readonly rowSelection: Record<string, boolean>\n readonly isSelectionStarted: boolean\n}\n\ntype TableRowProps<TData> = {\n readonly row: Row<TData>\n readonly isSelectable: boolean\n readonly isSelected: boolean\n readonly isSelectionStarted: boolean\n readonly getRowId: (row: TData) => string\n readonly handleRowSelect: (checked: boolean, row: TData) => void\n}\n\nfunction TableRowComponent<TData>({\n row,\n isSelected,\n}: Readonly<Omit<TableRowProps<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\nexport function DataTableBody<TData>({\n table,\n isLoading,\n pageSize,\n getRowId,\n rowSelection,\n isSelectionStarted,\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 {table\n .getAllColumns()\n .filter((column) => column.getIsVisible())\n .map((column) => {\n let skeletonClass = 'h-[20px] w-full'\n if (column.id === 'actions') skeletonClass = 'h-8 w-8 shrink-0'\n else if (column.id === 'select') skeletonClass = 'h-5 w-5 shrink-0'\n\n let justifyClass = 'justify-center'\n if (column.id === 'actions') justifyClass = 'justify-end'\n else if (column.id === 'select') justifyClass = 'justify-start'\n\n return (\n <TableCell\n key={`skeleton-cell-${String(index)}-${column.id}`}\n style={{ width: column.columnDef.size }}\n >\n <div className={cn('flex items-center', justifyClass)}>\n <Skeleton className={cn(skeletonClass)} />\n </div>\n </TableCell>\n )\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 colSpan={table.getAllColumns().length} className=\"h-[200px] text-center\">\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 (\n <TableRowComponent key={rowId} row={row} isSelected={isSelected} isSelectionStarted={isSelectionStarted} />\n )\n })}\n </TableBody>\n )\n}\n"],"names":[],"mappings":";;;;;;;AA2BA,SAAS,iBAAyB,CAAA;AAAA,EAChC,GAAA;AAAA,EACA;AACF,CAA0F,EAAA;AACxF,EAAA,2BACG,QAAS,EAAA,EAAA,eAAA,EAAe,UACtB,EAAA,QAAA,EAAA,GAAA,CAAI,iBAAkB,CAAA,GAAA,CAAI,CAAC,IAAA,yBACzB,SAAwB,EAAA,EAAA,KAAA,EAAO,EAAE,KAAO,EAAA,IAAA,CAAK,OAAO,SAAU,CAAA,IAAA,EAC7D,EAAA,QAAA,kBAAA,GAAA,CAAC,cACE,QAAK,EAAA,IAAA,CAAA,MAAA,CAAO,UAAU,IAAQ,IAAA,UAAA,CAAW,KAAK,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA,IAAA,CAAK,YAAY,CAAA,EACzF,KAHc,IAAK,CAAA,EAIrB,CACD,CACH,EAAA,CAAA;AAEJ;AAEO,SAAS,aAAqB,CAAA;AAAA,EACnC,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAA8B,EAAA;AAC5B,EAAA,IAAI,SAAW,EAAA;AACb,IACE,uBAAA,GAAA,CAAC,SACE,EAAA,EAAA,QAAA,EAAA,KAAA,CAAM,IAAK,CAAA,EAAE,MAAQ,EAAA,QAAA,EAAU,CAAA,CAAE,GAAI,CAAA,CAAC,OAAS,EAAA,KAAA,qBAC7C,GAAA,CAAA,QAAA,EAAA,EACE,QACE,EAAA,KAAA,CAAA,aAAA,EACA,CAAA,MAAA,CAAO,CAAC,MAAA,KAAW,MAAO,CAAA,YAAA,EAAc,CAAA,CACxC,GAAI,CAAA,CAAC,MAAW,KAAA;AACf,MAAA,IAAI,aAAgB,GAAA,iBAAA;AACpB,MAAI,IAAA,MAAA,CAAO,EAAO,KAAA,SAAA,EAA2B,aAAA,GAAA,kBAAA;AAAA,WACpC,IAAA,MAAA,CAAO,EAAO,KAAA,QAAA,EAA0B,aAAA,GAAA,kBAAA;AAEjD,MAAA,IAAI,YAAe,GAAA,gBAAA;AACnB,MAAI,IAAA,MAAA,CAAO,EAAO,KAAA,SAAA,EAA0B,YAAA,GAAA,aAAA;AAAA,WACnC,IAAA,MAAA,CAAO,EAAO,KAAA,QAAA,EAAyB,YAAA,GAAA,eAAA;AAEhD,MACE,uBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UAEC,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,UAAU,IAAK,EAAA;AAAA,UAEtC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,EAAA,CAAG,mBAAqB,EAAA,YAAY,CAClD,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,aAAa,GAAG,CAC1C,EAAA;AAAA,SAAA;AAAA,QALK,iBAAiB,MAAO,CAAA,KAAK,CAAC,CAAA,CAAA,EAAI,OAAO,EAAE,CAAA;AAAA,OAMlD;AAAA,KAEH,KAvBU,CAAgB,aAAA,EAAA,MAAA,CAAO,KAAK,CAAC,CAAA,CAwB5C,CACD,CACH,EAAA,CAAA;AAAA;AAIJ,EAAM,MAAA,IAAA,GAAO,KAAM,CAAA,WAAA,EAAc,CAAA,IAAA;AAEjC,EAAI,IAAA,CAAC,KAAK,MAAQ,EAAA;AAChB,IACE,uBAAA,GAAA,CAAC,aACC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EACC,8BAAC,SAAU,EAAA,EAAA,OAAA,EAAS,MAAM,aAAc,EAAA,CAAE,QAAQ,SAAU,EAAA,uBAAA,EAC1D,8BAAC,UAAW,EAAA,EAAA,KAAA,EAAM,WAAU,QAAiB,EAAA,mBAAA,EAAA,CAAA,EAC/C,GACF,CACF,EAAA,CAAA;AAAA;AAIJ,EAAA,uBACG,GAAA,CAAA,SAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACjB,IAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,GAAA,CAAI,QAAQ,CAAA;AACnC,IAAM,MAAA,UAAA,GAAa,YAAa,CAAA,KAAK,CAAK,IAAA,KAAA;AAC1C,IAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EAA8B,GAAU,EAAA,UAAA,EAAwB,sBAAzC,KAAiF,CAAA;AAAA,GAE5G,CACH,EAAA,CAAA;AAEJ;;;;"}
|