periplo-ui 3.29.0 → 3.29.1
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.
|
@@ -175,15 +175,7 @@ function DataTable({
|
|
|
175
175
|
),
|
|
176
176
|
/* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col rounded-md border bg-white", children: [
|
|
177
177
|
/* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxs(Table, { className: "w-full overscroll-contain", tableClassName: cn("table-fixed ", tableClassName), children: [
|
|
178
|
-
/* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-neutral-50", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
|
|
179
|
-
TableHead,
|
|
180
|
-
{
|
|
181
|
-
className: "whitespace-normal",
|
|
182
|
-
style: { width: header.column.columnDef.size },
|
|
183
|
-
children: /* @__PURE__ */ jsx(Typography, { weight: "medium", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) })
|
|
184
|
-
},
|
|
185
|
-
header.id
|
|
186
|
-
)) }, headerGroup.id)) }),
|
|
178
|
+
/* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-10 bg-neutral-50", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { style: { width: header.column.columnDef.size }, children: /* @__PURE__ */ jsx(Typography, { weight: "medium", className: "whitespace-nowrap", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }) }, header.id)) }, headerGroup.id)) }),
|
|
187
179
|
/* @__PURE__ */ jsx(
|
|
188
180
|
DataTableBody,
|
|
189
181
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["'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 emptyState = {\n title: 'No data available',\n description: 'Try adjusting your filters or search criteria',\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 isSelectionDisabled={selection?.isSelectionDisabled ?? false}\n selectionDisabledTooltip={selection?.labels?.selectionDisabledTooltip}\n />\n ),\n [\n isBackendPagination,\n selectedIds,\n data,\n handleSelectAll,\n isLoading,\n selection?.isSelectionDisabled,\n selection?.labels?.selectionDisabledTooltip,\n ],\n )\n\n const SelectColumnCell = React.useCallback(\n ({ row }: { row: Row<TData> }) => (\n <DataTableRowSelector\n row={row}\n selectedIds={selectedIds}\n getRowId={getRowId}\n handleRowSelect={handleRowSelect}\n isRowSelectionDisabled={selection?.isRowSelectionDisabled}\n rowSelectionDisabledTooltip={selection?.labels?.rowSelectionDisabledTooltip}\n />\n ),\n [\n selectedIds,\n getRowId,\n handleRowSelect,\n selection?.isRowSelectionDisabled,\n selection?.labels?.rowSelectionDisabledTooltip,\n ],\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 isSelectionDisabled: selection.isSelectionDisabled,\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
|
|
1
|
+
{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["'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 emptyState = {\n title: 'No data available',\n description: 'Try adjusting your filters or search criteria',\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 isSelectionDisabled={selection?.isSelectionDisabled ?? false}\n selectionDisabledTooltip={selection?.labels?.selectionDisabledTooltip}\n />\n ),\n [\n isBackendPagination,\n selectedIds,\n data,\n handleSelectAll,\n isLoading,\n selection?.isSelectionDisabled,\n selection?.labels?.selectionDisabledTooltip,\n ],\n )\n\n const SelectColumnCell = React.useCallback(\n ({ row }: { row: Row<TData> }) => (\n <DataTableRowSelector\n row={row}\n selectedIds={selectedIds}\n getRowId={getRowId}\n handleRowSelect={handleRowSelect}\n isRowSelectionDisabled={selection?.isRowSelectionDisabled}\n rowSelectionDisabledTooltip={selection?.labels?.rowSelectionDisabledTooltip}\n />\n ),\n [\n selectedIds,\n getRowId,\n handleRowSelect,\n selection?.isRowSelectionDisabled,\n selection?.labels?.rowSelectionDisabledTooltip,\n ],\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 isSelectionDisabled: selection.isSelectionDisabled,\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 key={header.id} style={{ width: header.column.columnDef.size }}>\n <Typography weight=\"medium\" className=\"whitespace-nowrap\">\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 emptyState={emptyState}\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":";;;;;;;;;;;;;;AA+BO;AAAyC;AACrC;AACT;AACmD;AACpB;AACnB;AACZ;AACA;AACA;AAC4B;AACE;AAC9B;AACS;AACiB;AACf;AACI;AACf;AACa;AACJ;AACM;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;AACuD;AACV;AAAA;AAC/C;AAEF;AACE;AACA;AACA;AACA;AACA;AACW;AACQ;AACrB;AAGF;AAA+B;AAE3B;AAAC;AAAA;AACC;AACA;AACA;AACA;AACmC;AACa;AAAA;AAClD;AAEF;AACE;AACA;AACA;AACW;AACQ;AACrB;AAGF;AACE;AACA;AACE;AAAqB;AACf;AACE;AACA;AACE;AAEV;AAAgC;AAElC;AAAO;AAGT;AACE;AACE;AAAO;AACyB;AACF;AACC;AACO;AACL;AACb;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;AAcA;AACA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACqD;AACrD;AAAA;AACF;AAGN;AAGI;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACc;AACQ;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}
|