npm - @plexui/ui - Versions diffs - 0.19.1 → 0.20.1 - Mend

@plexui/ui 0.19.1 → 0.20.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.

Files changed (402) hide show

package/dist/es/components/DataTable/DataTable.js CHANGED Viewed

@@ -2,39 +2,72 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
 import clsx from "clsx";
-import { useState } from "react";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../Table";
-import { DataTablePagination } from "./DataTablePagination";
-import s from "./DataTable.module.css";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Checkbox } from "../Checkbox/index.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../Table/index.js";
+import { DataTablePagination } from "./DataTablePagination.js";
+import s from "@plexui/styles/components/DataTable/DataTable.module.css";
+// Id of the checkbox column `enableRowSelection` puts before the columns
+const SELECT_COLUMN_ID = "select";
+const selectColumn = {
+    id: SELECT_COLUMN_ID,
+    header: ({ table }) => (_jsx(Checkbox, { "aria-label": "Select all rows", checked: table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? "indeterminate" : false, onCheckedChange: (checked) => table.toggleAllRowsSelected(checked) })),
+    cell: ({ row }) => (_jsx(Checkbox, { "aria-label": "Select row", checked: row.getIsSelected(), onCheckedChange: (checked) => row.toggleSelected(checked) })),
+    enableHiding: false,
+};
 const resolveUpdater = (updater, value) => {
     return typeof updater === "function" ? updater(value) : updater;
 };
+// One piece of table state: controlled when `controlled` is defined, otherwise
+// held here, with `onChange` as a notification either way. Successive
+// updaters build on each other instead of on the value captured at render.
+const useTableState = (controlled, initial, onChange) => {
+    const [internal, setInternal] = useState(initial);
+    const value = controlled ?? internal;
+    // Uncontrolled: only this handler writes the state, so the last value it set
+    // is current even before React renders it (also across awaits)
+    const latestInternal = useRef(internal);
+    // Controlled: the parent may reject or rewrite a change, so accumulate only
+    // within one batch and start every new batch from the current prop
+    const batch = useRef(null);
+    const handleChange = (updater) => {
+        let next;
+        if (controlled === undefined) {
+            next = resolveUpdater(updater, latestInternal.current);
+            latestInternal.current = next;
+            setInternal(next);
+        }
+        else {
+            const pending = batch.current;
+            const previous = pending && pending.base === controlled ? pending.next : controlled;
+            next = resolveUpdater(updater, previous);
+            if (!pending) {
+                queueMicrotask(() => {
+                    batch.current = null;
+                });
+            }
+            batch.current = { base: controlled, next };
+        }
+        onChange?.(next);
+    };
+    return [value, handleChange];
+};
 export const DataTable = ({ columns, data, variant = "default", globalFilter, onGlobalFilterChange, onRowClick, pageSize = 10, initialSorting, columnVisibility, onColumnVisibilityChange, enableRowSelection = false, rowSelection, onRowSelectionChange, getRowId, emptyMessage = "No results.", className, showPagination = true, }) => {
     const [sorting, setSorting] = useState(initialSorting ?? []);
     const shouldPaginate = Number.isFinite(pageSize) && pageSize > 0;
-    const handleGlobalFilterChange = onGlobalFilterChange
-        ? (updater) => {
-            onGlobalFilterChange(resolveUpdater(updater, globalFilter ?? ""));
-        }
-        : undefined;
-    const handleColumnVisibilityChange = onColumnVisibilityChange
-        ? (updater) => {
-            onColumnVisibilityChange(resolveUpdater(updater, columnVisibility ?? {}));
-        }
-        : undefined;
-    const handleRowSelectionChange = onRowSelectionChange
-        ? (updater) => {
-            onRowSelectionChange(resolveUpdater(updater, rowSelection ?? {}));
-        }
-        : undefined;
+    const [effectiveGlobalFilter, handleGlobalFilterChange] = useTableState(globalFilter, "", onGlobalFilterChange);
+    const [effectiveColumnVisibility, handleColumnVisibilityChange] = useTableState(columnVisibility, {}, onColumnVisibilityChange);
+    const [effectiveRowSelection, handleRowSelectionChange] = useTableState(rowSelection, {}, onRowSelectionChange);
+    const tableColumns = useMemo(() => (enableRowSelection ? [selectColumn, ...columns] : columns), [columns, enableRowSelection]);
+    const isSelectColumn = (id) => enableRowSelection && id === SELECT_COLUMN_ID;
     const table = useReactTable({
         data,
-        columns,
+        columns: tableColumns,
         state: {
             sorting,
-            globalFilter,
-            columnVisibility,
-            rowSelection,
+            globalFilter: effectiveGlobalFilter,
+            columnVisibility: effectiveColumnVisibility,
+            rowSelection: effectiveRowSelection,
         },
         ...(shouldPaginate ? { initialState: { pagination: { pageIndex: 0, pageSize } } } : {}),
         onSortingChange: setSorting,
@@ -46,20 +79,68 @@ export const DataTable = ({ columns, data, variant = "default", globalFilter, on
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
+        // TanStack keeps its pagination model once created and merges options
+        // across renders, so a disabled pageSize (0 or Infinity) switches
+        // pagination off explicitly, and back on, on every render
+        manualPagination: !shouldPaginate,
         ...(shouldPaginate ? { getPaginationRowModel: getPaginationRowModel() } : {}),
     });
+    // pageSize only seeds initialState, so apply later prop changes to the table
+    const appliedPageSize = useRef(pageSize);
+    useEffect(() => {
+        const previous = appliedPageSize.current;
+        if (previous === pageSize) {
+            return;
+        }
+        appliedPageSize.current = pageSize;
+        if (!shouldPaginate) {
+            return;
+        }
+        if (Number.isFinite(previous) && previous > 0) {
+            table.setPageSize(pageSize);
+        }
+        else {
+            // Page index is not auto-reset while pagination is off (filters may have
+            // changed since), so start over from the first page
+            table.setPagination({ pageIndex: 0, pageSize });
+        }
+    }, [table, pageSize, shouldPaginate]);
     const rows = table.getRowModel().rows;
     const totalRows = table.getFilteredRowModel().rows.length;
-    const hasPagination = shouldPaginate && totalRows > pageSize;
+    // Hidden only when every row fits on one page, both at the configured page
+    // size and at the one picked in the rows-per-page select
+    const hasPagination = shouldPaginate && totalRows > Math.min(pageSize, table.getState().pagination.pageSize);
     const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1);
     return (_jsxs("div", { className: clsx(s.DataTable, className), "data-variant": variant, "data-clickable": onRowClick ? "" : undefined, children: [_jsx("div", { className: s.TableContainer, children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
                                     const align = header.column.columnDef.meta?.align;
-                                    return (_jsx(TableHead, { style: align ? { textAlign: align } : undefined, children: header.isPlaceholder
+                                    // aria-sort goes on one header at a time: the primary sort
+                                    // column's real header, not its group placeholders
+                                    const sorted = !header.isPlaceholder && header.column.getSortIndex() === 0
+                                        ? header.column.getIsSorted()
+                                        : false;
+                                    return (_jsx(TableHead, { colSpan: header.colSpan > 1 ? header.colSpan : undefined, className: isSelectColumn(header.column.id) ? s.SelectColumn : undefined, style: align ? { textAlign: align } : undefined, "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined, children: header.isPlaceholder
                                             ? null
                                             : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
-                                }) }, headerGroup.id))) }), _jsx(TableBody, { children: rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: visibleColumnCount, className: s.EmptyCell, children: emptyMessage }) })) : (rows.map((row) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: row.getVisibleCells().map((cell) => {
+                                }) }, headerGroup.id))) }), _jsx(TableBody, { children: rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: visibleColumnCount, className: s.EmptyCell, children: emptyMessage }) })) : (rows.map((row) => (_jsx(TableRow, {
+                                // Clickable rows are reached with Tab and activated with
+                                // Enter or Space, like a button
+                                tabIndex: onRowClick ? 0 : undefined, onClick: onRowClick ? () => onRowClick(row.original) : undefined, onKeyDown: onRowClick
+                                    ? (event) => {
+                                        // Keys on a control inside the row are the control's
+                                        if (event.target !== event.currentTarget)
+                                            return;
+                                        if (event.key !== "Enter" && event.key !== " ")
+                                            return;
+                                        event.preventDefault();
+                                        onRowClick(row.original);
+                                    }
+                                    : undefined, children: row.getVisibleCells().map((cell) => {
                                     const align = cell.column.columnDef.meta?.align;
-                                    return (_jsx(TableCell, { style: align ? { textAlign: align } : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                    return (_jsx(TableCell, { style: align ? { textAlign: align } : undefined,
+                                        // A click on a selection checkbox is not a row click
+                                        onClick: onRowClick && isSelectColumn(cell.column.id)
+                                            ? (event) => event.stopPropagation()
+                                            : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                 }) }, row.id)))) })] }) }), showPagination && hasPagination && _jsx(DataTablePagination, { table: table })] }));
 };
 //# sourceMappingURL=DataTable.js.map

package/dist/es/components/DataTable/DataTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EACL,UAAU,EACV,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GAQd,MAAM,uBAAuB,CAAA;AAQ9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,CAAC,MAAM,wBAAwB,CAAA;AAmDtC,MAAM,cAAc,GAAG,CAAK,OAAmB,EAAE,KAAQ,EAAK,EAAE;IAC9D,OAAO,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAE,OAAyB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;AACpF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAS,EAChC,OAAO,EACP,IAAI,EACJ,OAAO,GAAG,SAAS,EACnB,YAAY,EACZ,oBAAoB,EACpB,UAAU,EACV,QAAQ,GAAG,EAAE,EACb,cAAc,EACd,gBAAgB,EAChB,wBAAwB,EACxB,kBAAkB,GAAG,KAAK,EAC1B,YAAY,EACZ,oBAAoB,EACpB,QAAQ,EACR,YAAY,GAAG,aAAa,EAC5B,SAAS,EACT,cAAc,GAAG,IAAI,GACC,EAAE,EAAE;IAC1B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAe,cAAc,IAAI,EAAE,CAAC,CAAA;IAE1E,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAA;IAEhE,MAAM,wBAAwB,GAAmC,oBAAoB;QACnF,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YACV,oBAAoB,CAAC,cAAc,CAAC,OAAO,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC,CAAA;QACnE,CAAC;QACH,CAAC,CAAC,SAAS,CAAA;IAEb,MAAM,4BAA4B,GAChC,wBAAwB;QACtB,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YACV,wBAAwB,CAAC,cAAc,CAAC,OAAO,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,CAAA;QAC3E,CAAC;QACH,CAAC,CAAC,SAAS,CAAA;IAEf,MAAM,wBAAwB,GAA8C,oBAAoB;QAC9F,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YACV,oBAAoB,CAAC,cAAc,CAAC,OAAO,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC,CAAA;QACnE,CAAC;QACH,CAAC,CAAC,SAAS,CAAA;IAEb,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,IAAI;QACJ,OAAO;QACP,KAAK,EAAE;YACL,OAAO;YACP,YAAY;YACZ,gBAAgB;YAChB,YAAY;SACb;QACD,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACvF,eAAe,EAAE,UAAU;QAC3B,oBAAoB,EAAE,wBAAwB;QAC9C,wBAAwB,EAAE,4BAA4B;QACtD,oBAAoB,EAAE,wBAAwB;QAC9C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS;QACvE,kBAAkB;QAClB,eAAe,EAAE,eAAe,EAAE;QAClC,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,mBAAmB,EAAE,mBAAmB,EAAE;QAC1C,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC9E,CAAC,CAAA;IAEF,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAA;IACrC,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,aAAa,GAAG,cAAc,IAAI,SAAS,GAAG,QAAQ,CAAA;IAC5D,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IAE5E,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,kBACzB,OAAO,oBACL,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,aAE3C,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,MAAC,KAAK,eACJ,KAAC,WAAW,cACT,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC5C,KAAC,QAAQ,cACN,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oCAClC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAA;oCACjD,OAAO,CACL,KAAC,SAAS,IAAiB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,YACvE,MAAM,CAAC,aAAa;4CACnB,CAAC,CAAC,IAAI;4CACN,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,IAHrD,MAAM,CAAC,EAAE,CAIb,CACb,CAAA;gCACH,CAAC,CAAC,IAVW,WAAW,CAAC,EAAE,CAWlB,CACZ,CAAC,GACU,EACd,KAAC,SAAS,cACP,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,KAAC,QAAQ,cACP,KAAC,SAAS,IAAC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,YAC3D,YAAY,GACH,GACH,CACZ,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAChB,KAAC,QAAQ,IAEP,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,YAE/D,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oCAClC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAA;oCAC/C,OAAO,CACL,KAAC,SAAS,IAAe,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,YACrE,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,IAD5C,IAAI,CAAC,EAAE,CAEX,CACb,CAAA;gCACH,CAAC,CAAC,IAVG,GAAG,CAAC,EAAE,CAWF,CACZ,CAAC,CACH,GACS,IACN,GACJ,EACL,cAAc,IAAI,aAAa,IAAI,KAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,GAAI,IACrE,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport {\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type OnChangeFn,\n type RowData,\n type RowSelectionState,\n type SortingState,\n type Updater,\n type VisibilityState,\n} from \"@tanstack/react-table\"\n\ndeclare module \"@tanstack/react-table\" {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n interface ColumnMeta<TData extends RowData, TValue> {\n align?: \"left\" \| \"center\" \| \"right\"\n }\n}\nimport clsx from \"clsx\"\nimport { useState, type ReactNode } from \"react\"\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../Table\"\nimport { DataTablePagination } from \"./DataTablePagination\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTableProps<TData> = {\n /** Column definitions following TanStack Table v8 ColumnDef API /\n columns: ColumnDef<TData, unknown>[]\n /* Data array to display /\n data: TData[]\n /* Visual variant\n * - `\"default\"` — borderless table with transparent header\n * - `\"bordered\"` — rounded border around the table with a tinted header background\n * @default \"default\"\n /\n variant?: \"default\" \| \"bordered\"\n /* External search/filter string (controlled) /\n globalFilter?: string\n /* Callback when global filter changes /\n onGlobalFilterChange?: (value: string) => void\n /* Click handler for rows /\n onRowClick?: (row: TData) => void\n /* Number of rows per page. Set to 0 or Infinity to disable pagination.\n * @default 10\n /\n pageSize?: number\n /* Initial sorting state /\n initialSorting?: SortingState\n /* Controlled column visibility /\n columnVisibility?: VisibilityState\n /* Callback when column visibility changes /\n onColumnVisibilityChange?: (visibility: VisibilityState) => void\n /* Enable row selection checkboxes\n * @default false\n /\n enableRowSelection?: boolean\n /* Controlled row selection state /\n rowSelection?: RowSelectionState\n /* Callback when row selection changes /\n onRowSelectionChange?: (selection: RowSelectionState) => void\n /* Custom row ID accessor /\n getRowId?: (row: TData) => string\n /* Message shown when there are no rows\n * @default \"No results.\"\n /\n emptyMessage?: ReactNode\n /* Class applied to the outermost wrapper /\n className?: string\n /* Whether to show pagination controls. Auto-hidden when all rows fit.\n * @default true\n */\n showPagination?: boolean\n}\n\nconst resolveUpdater = <T,>(updater: Updater<T>, value: T): T => {\n return typeof updater === \"function\" ? (updater as (old: T) => T)(value) : updater\n}\n\nexport const DataTable = <TData,>({\n columns,\n data,\n variant = \"default\",\n globalFilter,\n onGlobalFilterChange,\n onRowClick,\n pageSize = 10,\n initialSorting,\n columnVisibility,\n onColumnVisibilityChange,\n enableRowSelection = false,\n rowSelection,\n onRowSelectionChange,\n getRowId,\n emptyMessage = \"No results.\",\n className,\n showPagination = true,\n}: DataTableProps<TData>) => {\n const [sorting, setSorting] = useState<SortingState>(initialSorting ?? [])\n\n const shouldPaginate = Number.isFinite(pageSize) && pageSize > 0\n\n const handleGlobalFilterChange: OnChangeFn<string> \| undefined = onGlobalFilterChange\n ? (updater) => {\n onGlobalFilterChange(resolveUpdater(updater, globalFilter ?? \"\"))\n }\n : undefined\n\n const handleColumnVisibilityChange: OnChangeFn<VisibilityState> \| undefined =\n onColumnVisibilityChange\n ? (updater) => {\n onColumnVisibilityChange(resolveUpdater(updater, columnVisibility ?? {}))\n }\n : undefined\n\n const handleRowSelectionChange: OnChangeFn<RowSelectionState> \| undefined = onRowSelectionChange\n ? (updater) => {\n onRowSelectionChange(resolveUpdater(updater, rowSelection ?? {}))\n }\n : undefined\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n globalFilter,\n columnVisibility,\n rowSelection,\n },\n ...(shouldPaginate ? { initialState: { pagination: { pageIndex: 0, pageSize } } } : {}),\n onSortingChange: setSorting,\n onGlobalFilterChange: handleGlobalFilterChange,\n onColumnVisibilityChange: handleColumnVisibilityChange,\n onRowSelectionChange: handleRowSelectionChange,\n getRowId: getRowId ? (originalRow) => getRowId(originalRow) : undefined,\n enableRowSelection,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n ...(shouldPaginate ? { getPaginationRowModel: getPaginationRowModel() } : {}),\n })\n\n const rows = table.getRowModel().rows\n const totalRows = table.getFilteredRowModel().rows.length\n const hasPagination = shouldPaginate && totalRows > pageSize\n const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1)\n\n return (\n <div\n className={clsx(s.DataTable, className)}\n data-variant={variant}\n data-clickable={onRowClick ? \"\" : undefined}\n >\n <div className={s.TableContainer}>\n <Table>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n const align = header.column.columnDef.meta?.align\n return (\n <TableHead key={header.id} style={align ? { textAlign: align } : undefined}>\n {header.isPlaceholder\n ? null\n : flexRender(header.column.columnDef.header, header.getContext())}\n </TableHead>\n )\n })}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {rows.length === 0 ? (\n <TableRow>\n <TableCell colSpan={visibleColumnCount} className={s.EmptyCell}>\n {emptyMessage}\n </TableCell>\n </TableRow>\n ) : (\n rows.map((row) => (\n <TableRow\n key={row.id}\n onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n >\n {row.getVisibleCells().map((cell) => {\n const align = cell.column.columnDef.meta?.align\n return (\n <TableCell key={cell.id} style={align ? { textAlign: align } : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n </TableRow>\n ))\n )}\n </TableBody>\n </Table>\n </div>\n {showPagination && hasPagination && <DataTablePagination table={table} />}\n </div>\n )\n}\n"]}
1	+ {"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport {\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type OnChangeFn,\n type RowData,\n type RowSelectionState,\n type SortingState,\n type Updater,\n type VisibilityState,\n} from \"@tanstack/react-table\"\n\n// Augments table-core, which @tanstack/react-table re-exports: @plexui/vue\n// augments the same module, so both declarations merge when a project\n// type-checks the two packages together\ndeclare module \"@tanstack/table-core\" {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n interface ColumnMeta<TData extends RowData, TValue> {\n align?: \"left\" \| \"center\" \| \"right\"\n }\n}\nimport clsx from \"clsx\"\nimport { useEffect, useMemo, useRef, useState, type ReactNode } from \"react\"\nimport { Checkbox } from \"../Checkbox\"\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../Table\"\nimport { DataTablePagination } from \"./DataTablePagination\"\nimport s from \"@plexui/styles/components/DataTable/DataTable.module.css\"\n\nexport type DataTableProps<TData> = {\n /** Column definitions following TanStack Table v8 ColumnDef API /\n columns: ColumnDef<TData, unknown>[]\n /* Data array to display /\n data: TData[]\n /* Visual variant\n * - `\"default\"` — borderless table with transparent header\n * - `\"bordered\"` — rounded border around the table with a tinted header background\n * @default \"default\"\n /\n variant?: \"default\" \| \"bordered\"\n /* External search/filter string (controlled) /\n globalFilter?: string\n /* Callback when global filter changes /\n onGlobalFilterChange?: (value: string) => void\n /* Click handler for rows /\n onRowClick?: (row: TData) => void\n /* Number of rows per page. Set to 0 or Infinity to disable pagination.\n * @default 10\n /\n pageSize?: number\n /* Initial sorting state /\n initialSorting?: SortingState\n /* Controlled column visibility /\n columnVisibility?: VisibilityState\n /* Callback when column visibility changes /\n onColumnVisibilityChange?: (visibility: VisibilityState) => void\n /* Enable row selection: adds a first column with a checkbox per row and a\n * header checkbox that selects every row\n * @default false\n /\n enableRowSelection?: boolean\n /* Controlled row selection state /\n rowSelection?: RowSelectionState\n /* Callback when row selection changes /\n onRowSelectionChange?: (selection: RowSelectionState) => void\n /* Custom row ID accessor /\n getRowId?: (row: TData) => string\n /* Message shown when there are no rows\n * @default \"No results.\"\n /\n emptyMessage?: ReactNode\n /* Class applied to the outermost wrapper /\n className?: string\n /* Whether to show pagination controls. Auto-hidden when all rows fit.\n * @default true\n */\n showPagination?: boolean\n}\n\n// Id of the checkbox column `enableRowSelection` puts before the columns\nconst SELECT_COLUMN_ID = \"select\"\n\nconst selectColumn: ColumnDef<unknown, unknown> = {\n id: SELECT_COLUMN_ID,\n header: ({ table }) => (\n <Checkbox\n aria-label=\"Select all rows\"\n checked={\n table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? \"indeterminate\" : false\n }\n onCheckedChange={(checked) => table.toggleAllRowsSelected(checked)}\n />\n ),\n cell: ({ row }) => (\n <Checkbox\n aria-label=\"Select row\"\n checked={row.getIsSelected()}\n onCheckedChange={(checked) => row.toggleSelected(checked)}\n />\n ),\n enableHiding: false,\n}\n\nconst resolveUpdater = <T,>(updater: Updater<T>, value: T): T => {\n return typeof updater === \"function\" ? (updater as (old: T) => T)(value) : updater\n}\n\n// One piece of table state: controlled when `controlled` is defined, otherwise\n// held here, with `onChange` as a notification either way. Successive\n// updaters build on each other instead of on the value captured at render.\nconst useTableState = <T,>(\n controlled: T \| undefined,\n initial: T,\n onChange: ((next: T) => void) \| undefined,\n): [T, OnChangeFn<T>] => {\n const [internal, setInternal] = useState<T>(initial)\n const value = controlled ?? internal\n // Uncontrolled: only this handler writes the state, so the last value it set\n // is current even before React renders it (also across awaits)\n const latestInternal = useRef(internal)\n // Controlled: the parent may reject or rewrite a change, so accumulate only\n // within one batch and start every new batch from the current prop\n const batch = useRef<{ base: T; next: T } \| null>(null)\n\n const handleChange: OnChangeFn<T> = (updater) => {\n let next: T\n if (controlled === undefined) {\n next = resolveUpdater(updater, latestInternal.current)\n latestInternal.current = next\n setInternal(next)\n } else {\n const pending = batch.current\n const previous = pending && pending.base === controlled ? pending.next : controlled\n next = resolveUpdater(updater, previous)\n if (!pending) {\n queueMicrotask(() => {\n batch.current = null\n })\n }\n batch.current = { base: controlled, next }\n }\n onChange?.(next)\n }\n\n return [value, handleChange]\n}\n\nexport const DataTable = <TData,>({\n columns,\n data,\n variant = \"default\",\n globalFilter,\n onGlobalFilterChange,\n onRowClick,\n pageSize = 10,\n initialSorting,\n columnVisibility,\n onColumnVisibilityChange,\n enableRowSelection = false,\n rowSelection,\n onRowSelectionChange,\n getRowId,\n emptyMessage = \"No results.\",\n className,\n showPagination = true,\n}: DataTableProps<TData>) => {\n const [sorting, setSorting] = useState<SortingState>(initialSorting ?? [])\n\n const shouldPaginate = Number.isFinite(pageSize) && pageSize > 0\n\n const [effectiveGlobalFilter, handleGlobalFilterChange] = useTableState(\n globalFilter,\n \"\",\n onGlobalFilterChange,\n )\n const [effectiveColumnVisibility, handleColumnVisibilityChange] =\n useTableState<VisibilityState>(columnVisibility, {}, onColumnVisibilityChange)\n const [effectiveRowSelection, handleRowSelectionChange] = useTableState<RowSelectionState>(\n rowSelection,\n {},\n onRowSelectionChange,\n )\n\n const tableColumns = useMemo(\n () => (enableRowSelection ? [selectColumn as ColumnDef<TData, unknown>, ...columns] : columns),\n [columns, enableRowSelection],\n )\n const isSelectColumn = (id: string) => enableRowSelection && id === SELECT_COLUMN_ID\n\n const table = useReactTable({\n data,\n columns: tableColumns,\n state: {\n sorting,\n globalFilter: effectiveGlobalFilter,\n columnVisibility: effectiveColumnVisibility,\n rowSelection: effectiveRowSelection,\n },\n ...(shouldPaginate ? { initialState: { pagination: { pageIndex: 0, pageSize } } } : {}),\n onSortingChange: setSorting,\n onGlobalFilterChange: handleGlobalFilterChange,\n onColumnVisibilityChange: handleColumnVisibilityChange,\n onRowSelectionChange: handleRowSelectionChange,\n getRowId: getRowId ? (originalRow) => getRowId(originalRow) : undefined,\n enableRowSelection,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n // TanStack keeps its pagination model once created and merges options\n // across renders, so a disabled pageSize (0 or Infinity) switches\n // pagination off explicitly, and back on, on every render\n manualPagination: !shouldPaginate,\n ...(shouldPaginate ? { getPaginationRowModel: getPaginationRowModel() } : {}),\n })\n\n // pageSize only seeds initialState, so apply later prop changes to the table\n const appliedPageSize = useRef(pageSize)\n useEffect(() => {\n const previous = appliedPageSize.current\n if (previous === pageSize) {\n return\n }\n appliedPageSize.current = pageSize\n if (!shouldPaginate) {\n return\n }\n if (Number.isFinite(previous) && previous > 0) {\n table.setPageSize(pageSize)\n } else {\n // Page index is not auto-reset while pagination is off (filters may have\n // changed since), so start over from the first page\n table.setPagination({ pageIndex: 0, pageSize })\n }\n }, [table, pageSize, shouldPaginate])\n\n const rows = table.getRowModel().rows\n const totalRows = table.getFilteredRowModel().rows.length\n // Hidden only when every row fits on one page, both at the configured page\n // size and at the one picked in the rows-per-page select\n const hasPagination =\n shouldPaginate && totalRows > Math.min(pageSize, table.getState().pagination.pageSize)\n const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1)\n\n return (\n <div\n className={clsx(s.DataTable, className)}\n data-variant={variant}\n data-clickable={onRowClick ? \"\" : undefined}\n >\n <div className={s.TableContainer}>\n <Table>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n const align = header.column.columnDef.meta?.align\n // aria-sort goes on one header at a time: the primary sort\n // column's real header, not its group placeholders\n const sorted =\n !header.isPlaceholder && header.column.getSortIndex() === 0\n ? header.column.getIsSorted()\n : false\n return (\n <TableHead\n key={header.id}\n colSpan={header.colSpan > 1 ? header.colSpan : undefined}\n className={isSelectColumn(header.column.id) ? s.SelectColumn : undefined}\n style={align ? { textAlign: align } : undefined}\n aria-sort={\n sorted === \"asc\" ? \"ascending\" : sorted === \"desc\" ? \"descending\" : undefined\n }\n >\n {header.isPlaceholder\n ? null\n : flexRender(header.column.columnDef.header, header.getContext())}\n </TableHead>\n )\n })}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {rows.length === 0 ? (\n <TableRow>\n <TableCell colSpan={visibleColumnCount} className={s.EmptyCell}>\n {emptyMessage}\n </TableCell>\n </TableRow>\n ) : (\n rows.map((row) => (\n <TableRow\n key={row.id}\n // Clickable rows are reached with Tab and activated with\n // Enter or Space, like a button\n tabIndex={onRowClick ? 0 : undefined}\n onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n onKeyDown={\n onRowClick\n ? (event) => {\n // Keys on a control inside the row are the control's\n if (event.target !== event.currentTarget) return\n if (event.key !== \"Enter\" && event.key !== \" \") return\n event.preventDefault()\n onRowClick(row.original)\n }\n : undefined\n }\n >\n {row.getVisibleCells().map((cell) => {\n const align = cell.column.columnDef.meta?.align\n return (\n <TableCell\n key={cell.id}\n style={align ? { textAlign: align } : undefined}\n // A click on a selection checkbox is not a row click\n onClick={\n onRowClick && isSelectColumn(cell.column.id)\n ? (event) => event.stopPropagation()\n : undefined\n }\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n </TableRow>\n ))\n )}\n </TableBody>\n </Table>\n </div>\n {showPagination && hasPagination && <DataTablePagination table={table} />}\n </div>\n )\n}\n"]}

package/dist/es/components/DataTable/DataTableColumnHeader.js CHANGED Viewed

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import {} from "@tanstack/react-table";
 import clsx from "clsx";
-import { ArrowDownSm, ArrowUpSm, Sort } from "../Icon";
-import s from "./DataTable.module.css";
+import { ArrowDownSm, ArrowUpSm, Sort } from "../Icon/index.js";
+import s from "@plexui/styles/components/DataTable/DataTable.module.css";
 export const DataTableColumnHeader = ({ column, title, className, }) => {
     if (!column.getCanSort()) {
         return _jsx("span", { className: className, children: title });

package/dist/es/components/DataTable/DataTableColumnHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTableColumnHeader.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTableColumnHeader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAe,MAAM,uBAAuB,CAAA;AACnD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AACtD,OAAO,CAAC,MAAM,~~wBAAwB~~,CAAA;~~AAQtC~~,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAgB,EACnD,MAAM,EACN,KAAK,EACL,SAAS,GACiC,EAAE,EAAE;IAC9C,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;QACzB,OAAO,eAAM,SAAS,EAAE,SAAS,YAAG,KAAK,GAAQ,CAAA;IACnD,CAAC;IAED,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAA;IAEnC,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,kBAAkB,EAAE,SAAS,CAAC,iBACnC,MAAM,IAAI,SAAS,EAChC,OAAO,EAAE,MAAM,CAAC,uBAAuB,EAAE,aAExC,KAAK,EACN,eAAM,SAAS,EAAE,CAAC,CAAC,QAAQ,YACxB,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAC,IAAI,KAAG,GAC7E,IACA,CACV,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Column } from \"@tanstack/react-table\"\nimport clsx from \"clsx\"\nimport { ArrowDownSm, ArrowUpSm, Sort } from \"../Icon\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTableColumnHeaderProps<TData, TValue> = {\n column: Column<TData, TValue>\n title: string\n className?: string\n}\n\nexport const DataTableColumnHeader = <TData, TValue>({\n column,\n title,\n className,\n}: DataTableColumnHeaderProps<TData, TValue>) => {\n if (!column.getCanSort()) {\n return <span className={className}>{title}</span>\n }\n\n const sorted = column.getIsSorted()\n\n return (\n <button\n type=\"button\"\n className={clsx(s.ColumnHeaderButton, className)}\n data-sorted={sorted \|\| undefined}\n onClick={column.getToggleSortingHandler()}\n >\n {title}\n <span className={s.SortIcon}>\n {sorted === \"asc\" ? <ArrowUpSm /> : sorted === \"desc\" ? <ArrowDownSm /> : <Sort />}\n </span>\n </button>\n )\n}\n"]}
1	+ {"version":3,"file":"DataTableColumnHeader.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTableColumnHeader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAe,MAAM,uBAAuB,CAAA;AACnD,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AACtD,OAAO,CAAC,MAAM,0DAA0D,CAAA;AAQxE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAgB,EACnD,MAAM,EACN,KAAK,EACL,SAAS,GACiC,EAAE,EAAE;IAC9C,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;QACzB,OAAO,eAAM,SAAS,EAAE,SAAS,YAAG,KAAK,GAAQ,CAAA;IACnD,CAAC;IAED,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAA;IAEnC,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,kBAAkB,EAAE,SAAS,CAAC,iBACnC,MAAM,IAAI,SAAS,EAChC,OAAO,EAAE,MAAM,CAAC,uBAAuB,EAAE,aAExC,KAAK,EACN,eAAM,SAAS,EAAE,CAAC,CAAC,QAAQ,YACxB,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAC,IAAI,KAAG,GAC7E,IACA,CACV,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Column } from \"@tanstack/react-table\"\nimport clsx from \"clsx\"\nimport { ArrowDownSm, ArrowUpSm, Sort } from \"../Icon\"\nimport s from \"@plexui/styles/components/DataTable/DataTable.module.css\"\n\nexport type DataTableColumnHeaderProps<TData, TValue> = {\n column: Column<TData, TValue>\n title: string\n className?: string\n}\n\nexport const DataTableColumnHeader = <TData, TValue>({\n column,\n title,\n className,\n}: DataTableColumnHeaderProps<TData, TValue>) => {\n if (!column.getCanSort()) {\n return <span className={className}>{title}</span>\n }\n\n const sorted = column.getIsSorted()\n\n return (\n <button\n type=\"button\"\n className={clsx(s.ColumnHeaderButton, className)}\n data-sorted={sorted \|\| undefined}\n onClick={column.getToggleSortingHandler()}\n >\n {title}\n <span className={s.SortIcon}>\n {sorted === \"asc\" ? <ArrowUpSm /> : sorted === \"desc\" ? <ArrowDownSm /> : <Sort />}\n </span>\n </button>\n )\n}\n"]}

package/dist/es/components/DataTable/DataTablePagination.js CHANGED Viewed

@@ -1,14 +1,18 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import {} from "@tanstack/react-table";
-import { Button } from "../Button";
-import { ChevronLeftMd, ChevronRightMd } from "../Icon";
-import s from "./DataTable.module.css";
+import { Button } from "../Button/index.js";
+import { ChevronLeftMd, ChevronRightMd } from "../Icon/index.js";
+import s from "@plexui/styles/components/DataTable/DataTable.module.css";
+const PAGE_SIZES = [10, 20, 50, 100];
 export const DataTablePagination = ({ table }) => {
     const totalRows = table.getFilteredRowModel().rows.length;
     const { pageIndex, pageSize } = table.getState().pagination;
     const from = pageIndex * pageSize + 1;
     const to = Math.min((pageIndex + 1) * pageSize, totalRows);
-    return (_jsxs("div", { className: s.Pagination, children: [_jsxs("div", { className: s.PaginationLeft, children: [_jsx("span", { className: s.PaginationLabel, children: "Rows per page" }), _jsx("select", { className: s.PaginationSelect, value: pageSize, onChange: (e) => table.setPageSize(Number(e.target.value)), children: [10, 20, 50, 100].map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: s.PaginationRight, children: [_jsx("span", { className: s.PaginationInfo, children: totalRows === 0 ? "0 results" : `${from}–${to} of ${totalRows}` }), _jsxs("div", { className: s.PaginationButtons, children: [_jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: _jsx(ChevronLeftMd, {}) }), _jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), children: _jsx(ChevronRightMd, {}) })] })] })] }));
+    // The table's initial and current page sizes are options too, so the select
+    // always shows the real page size and can go back to the initial one
+    const pageSizes = [...new Set([...PAGE_SIZES, table.initialState.pagination.pageSize, pageSize])].sort((a, b) => a - b);
+    return (_jsxs("div", { className: s.Pagination, children: [_jsxs("div", { className: s.PaginationLeft, children: [_jsx("span", { className: s.PaginationLabel, children: "Rows per page" }), _jsx("select", { "aria-label": "Rows per page", className: s.PaginationSelect, value: pageSize, onChange: (e) => table.setPageSize(Number(e.target.value)), children: pageSizes.map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: s.PaginationRight, children: [_jsx("span", { className: s.PaginationInfo, children: totalRows === 0 ? "0 results" : `${from}–${to} of ${totalRows}` }), _jsxs("div", { className: s.PaginationButtons, children: [_jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), "aria-label": "Previous page", children: _jsx(ChevronLeftMd, {}) }), _jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), "aria-label": "Next page", children: _jsx(ChevronRightMd, {}) })] })] })] }));
 };
 //# sourceMappingURL=DataTablePagination.js.map

package/dist/es/components/DataTable/DataTablePagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTablePagination.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAc,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACvD,OAAO,CAAC,MAAM,~~wBAAwB~~,CAAA;~~AAMtC~~,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAS,EAAE,KAAK,EAAmC,EAAE,EAAE;IACxF,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAA;IAC3D,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAA;IACrC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAA;~~IAE1D~~,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,eAAK,SAAS,EAAE,CAAC,CAAC,cAAc,aAC9B,eAAM,SAAS,EAAE,CAAC,CAAC,eAAe,8BAAsB,EACxD,~~iBACE~~,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAEzD,~~CAAC~~,~~EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,~~CAAC,~~CAAC,~~GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,~~CAC/B~~,iBAAmB,KAAK,EAAE,IAAI,YAC3B,IAAI,IADM,IAAI,CAER,CACV,CAAC,GACK,IACL,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,aAC/B,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,EAAE,OAAO,SAAS,EAAE,GAC3D,EACP,eAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,aACjC,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,~~YAEnC~~,KAAC,aAAa,KAAG,GACV,EACT,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,~~YAE/B~~,KAAC,cAAc,KAAG,GACX,IACL,IACF,IACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { Button } from \"../Button\"\nimport { ChevronLeftMd, ChevronRightMd } from \"../Icon\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTablePaginationProps<TData> = {\n table: Table<TData>\n}\n\nexport const DataTablePagination = <TData,>({ table }: DataTablePaginationProps<TData>) => {\n const totalRows = table.getFilteredRowModel().rows.length\n const { pageIndex, pageSize } = table.getState().pagination\n const from = pageIndex * pageSize + 1\n const to = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n return (\n <div className={s.Pagination}>\n <div className={s.PaginationLeft}>\n <span className={s.PaginationLabel}>Rows per page</span>\n <select\n className={s.PaginationSelect}\n value={pageSize}\n onChange={(e) => table.setPageSize(Number(e.target.value))}\n >\n {~~[10, 20, 50, 100]~~.map((size) => (\n <option key={size} value={size}>\n {size}\n </option>\n ))}\n </select>\n </div>\n <div className={s.PaginationRight}>\n <span className={s.PaginationInfo}>\n {totalRows === 0 ? \"0 results\" : `${from}–${to} of ${totalRows}`}\n </span>\n <div className={s.PaginationButtons}>\n <Button\n color=\"secondary\"\n variant=\"outline\"\n size=\"sm\"\n pill={false}\n uniform\n disabled={!table.getCanPreviousPage()}\n onClick={() => table.previousPage()}\n >\n <ChevronLeftMd />\n </Button>\n <Button\n color=\"secondary\"\n variant=\"outline\"\n size=\"sm\"\n pill={false}\n uniform\n disabled={!table.getCanNextPage()}\n onClick={() => table.nextPage()}\n >\n <ChevronRightMd />\n </Button>\n </div>\n </div>\n </div>\n )\n}\n"]}
1	+ {"version":3,"file":"DataTablePagination.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAc,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACvD,OAAO,CAAC,MAAM,0DAA0D,CAAA;AAMxE,MAAM,UAAU,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAA;AAEpC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAS,EAAE,KAAK,EAAmC,EAAE,EAAE;IACxF,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAA;IAC3D,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAA;IACrC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAA;IAC1D,4EAA4E;IAC5E,qEAAqE;IACrE,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,UAAU,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CACpG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAChB,CAAA;IAED,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,eAAK,SAAS,EAAE,CAAC,CAAC,cAAc,aAC9B,eAAM,SAAS,EAAE,CAAC,CAAC,eAAe,8BAAsB,EACxD,+BACa,eAAe,EAC1B,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAEzD,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACvB,iBAAmB,KAAK,EAAE,IAAI,YAC3B,IAAI,IADM,IAAI,CAER,CACV,CAAC,GACK,IACL,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,aAC/B,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,EAAE,OAAO,SAAS,EAAE,GAC3D,EACP,eAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,aACjC,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,gBACxB,eAAe,YAE1B,KAAC,aAAa,KAAG,GACV,EACT,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,gBACpB,WAAW,YAEtB,KAAC,cAAc,KAAG,GACX,IACL,IACF,IACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { Button } from \"../Button\"\nimport { ChevronLeftMd, ChevronRightMd } from \"../Icon\"\nimport s from \"@plexui/styles/components/DataTable/DataTable.module.css\"\n\nexport type DataTablePaginationProps<TData> = {\n table: Table<TData>\n}\n\nconst PAGE_SIZES = [10, 20, 50, 100]\n\nexport const DataTablePagination = <TData,>({ table }: DataTablePaginationProps<TData>) => {\n const totalRows = table.getFilteredRowModel().rows.length\n const { pageIndex, pageSize } = table.getState().pagination\n const from = pageIndex * pageSize + 1\n const to = Math.min((pageIndex + 1) * pageSize, totalRows)\n // The table's initial and current page sizes are options too, so the select\n // always shows the real page size and can go back to the initial one\n const pageSizes = [...new Set([...PAGE_SIZES, table.initialState.pagination.pageSize, pageSize])].sort(\n (a, b) => a - b,\n )\n\n return (\n <div className={s.Pagination}>\n <div className={s.PaginationLeft}>\n <span className={s.PaginationLabel}>Rows per page</span>\n <select\n aria-label=\"Rows per page\"\n className={s.PaginationSelect}\n value={pageSize}\n onChange={(e) => table.setPageSize(Number(e.target.value))}\n >\n {pageSizes.map((size) => (\n <option key={size} value={size}>\n {size}\n </option>\n ))}\n </select>\n </div>\n <div className={s.PaginationRight}>\n <span className={s.PaginationInfo}>\n {totalRows === 0 ? \"0 results\" : `${from}–${to} of ${totalRows}`}\n </span>\n <div className={s.PaginationButtons}>\n <Button\n color=\"secondary\"\n variant=\"outline\"\n size=\"sm\"\n pill={false}\n uniform\n disabled={!table.getCanPreviousPage()}\n onClick={() => table.previousPage()}\n aria-label=\"Previous page\"\n >\n <ChevronLeftMd />\n </Button>\n <Button\n color=\"secondary\"\n variant=\"outline\"\n size=\"sm\"\n pill={false}\n uniform\n disabled={!table.getCanNextPage()}\n onClick={() => table.nextPage()}\n aria-label=\"Next page\"\n >\n <ChevronRightMd />\n </Button>\n </div>\n </div>\n </div>\n )\n}\n"]}

package/dist/es/components/DataTable/columnHelpers.js CHANGED Viewed

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Badge } from "../Badge";
-import { CopyTooltip } from "../Tooltip";
-import { Tooltip } from "../Tooltip";
+import { Badge } from "../Badge/index.js";
+import { CopyTooltip } from "../Tooltip/index.js";
+import { Tooltip } from "../Tooltip/index.js";
 export function idCell(accessor) {
     function IdCell({ row }) {
         const value = accessor(row.original);

package/dist/es/components/DataTable/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export { DataTable } from "./DataTable";
-export { DataTablePagination } from "./DataTablePagination";
-export { DataTableColumnHeader } from "./DataTableColumnHeader";
-export { idCell, dateTimeCell, statusCell, tooltipHeader } from "./columnHelpers";
+export { DataTable } from "./DataTable.js";
+export { DataTablePagination } from "./DataTablePagination.js";
+export { DataTableColumnHeader } from "./DataTableColumnHeader.js";
+export { idCell, dateTimeCell, statusCell, tooltipHeader } from "./columnHelpers.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/DateInput/DateInput.js CHANGED Viewed

@@ -5,9 +5,9 @@ import { useMaskito } from "@maskito/react";
 import { DateTime } from "luxon";
 import { useEffect, useMemo, useState } from "react";
 import { mergeRefs } from "react-merge-refs";
-import { Input } from "../Input";
+import { Input } from "../Input/index.js";
 export const DateInput = (props) => {
-    const { value, onChange, mode = "dd/mm/yyyy", separator = ".", timeMode, dateTimeSeparator = ", ", timeStep = 0, min, max, clearable = false, placeholder, ref, ...inputProps } = props;
+    const { value, onChange, mode = "dd/mm/yyyy", separator = ".", timeMode, dateTimeSeparator = ", ", timeStep = 0, min, max, clearable = false, placeholder, onBlur, ref, ...inputProps } = props;
     const hasTime = !!timeMode;
     const dateParams = useMemo(() => ({
         mode,
@@ -33,15 +33,17 @@ export const DateInput = (props) => {
         : maskitoDateOptionsGenerator(dateParams), [hasTime, dateParams, dateTimeParams]);
     const maskRef = useMaskito({ options: maskOptions });
     const [inputValue, setInputValue] = useState("");
+    const format = (date) => {
+        if (!date)
+            return "";
+        return hasTime
+            ? maskitoStringifyDateTime(date.toJSDate(), dateTimeParams)
+            : maskitoStringifyDate(date.toJSDate(), dateParams);
+    };
+    const parse = (str) => hasTime ? maskitoParseDateTime(str, dateTimeParams) : maskitoParseDate(str, dateParams);
     const valueMsKey = value?.toMillis() ?? null;
     useEffect(() => {
-        if (!value) {
-            setInputValue("");
-            return;
-        }
-        setInputValue(hasTime
-            ? maskitoStringifyDateTime(value.toJSDate(), dateTimeParams)
-            : maskitoStringifyDate(value.toJSDate(), dateParams));
+        setInputValue(format(value));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [valueMsKey, hasTime, dateParams, dateTimeParams]);
     const handleInput = (evt) => {
@@ -51,13 +53,19 @@ export const DateInput = (props) => {
             onChange(null);
             return;
         }
-        const parsed = hasTime
-            ? maskitoParseDateTime(str, dateTimeParams)
-            : maskitoParseDate(str, dateParams);
+        const parsed = parse(str);
         if (parsed) {
             onChange(DateTime.fromJSDate(parsed));
         }
     };
+    // Text that is not a complete date never reaches onChange, so leaving the
+    // field shows the value again instead of a date the value does not hold
+    const handleBlur = (evt) => {
+        onBlur?.(evt);
+        if (inputValue && !parse(inputValue)) {
+            setInputValue(format(value));
+        }
+    };
     const handleClear = () => {
         setInputValue("");
         onChange(null);
@@ -68,6 +76,6 @@ export const DateInput = (props) => {
             return datePart;
         return `${datePart}${dateTimeSeparator}${timeMode}`;
     }, [mode, separator, hasTime, timeMode, dateTimeSeparator]);
-    return (_jsx(Input, { ...inputProps, ref: mergeRefs([maskRef, ref]), value: inputValue, onInput: handleInput, placeholder: placeholder ?? defaultPlaceholder, onClear: clearable ? handleClear : undefined }));
+    return (_jsx(Input, { ...inputProps, ref: mergeRefs([maskRef, ref]), value: inputValue, onInput: handleInput, onBlur: handleBlur, placeholder: placeholder ?? defaultPlaceholder, onClear: clearable ? handleClear : undefined }));
 };
 //# sourceMappingURL=DateInput.js.map

package/dist/es/components/DateInput/DateInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EACL,2BAA2B,EAC3B,+BAA+B,EAC/B,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,EACpB,wBAAwB,GAKzB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAmB,MAAM,UAAU,CAAA;AAmBjD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,YAAY,EACnB,SAAS,GAAG,GAAG,EACf,QAAQ,EACR,iBAAiB,GAAG,IAAI,EACxB,QAAQ,GAAG,CAAC,EACZ,GAAG,EACH,GAAG,EACH,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,GAAG,EACH,GAAG,UAAU,EACd,GAAG,KAAK,CAAA;IAET,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAA;IAE1B,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,CAAC;QACL,IAAI;QACJ,SAAS;QACT,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9C,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;KAC/C,CAAC;IACF,uDAAuD;IACvD,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CACpD,CAAA;IAED,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,IAAI;QACd,aAAa,EAAE,SAAS;QACxB,QAAQ,EAAE,QAAQ,IAAI,OAAO;QAC7B,iBAAiB;QACjB,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QACxC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9C,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;KAC/C,CAAC;IACF,uDAAuD;IACvD,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAC3F,CAAA;IAED,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,OAAO;QACL,CAAC,CAAC,+BAA+B,CAAC,cAAc,CAAC;QACjD,CAAC,CAAC,2BAA2B,CAAC,UAAU,CAAC,EAC7C,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CACtC,CAAA;IAED,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,CAAA;IAEpD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEhD,MAAM,~~UAAU~~,GAAG,~~KAAK~~,EAAE,~~QAAQ,~~EAAE,IAAI,IAAI,CAAA;~~IAC5C~~,~~SAAS~~,CAAC,~~GAAG~~,~~EAAE;QACb~~,IAAI,CAAC,~~KAAK~~,EAAE,CAAC;~~YACX~~,~~aAAa~~,CAAC,EAAE,CAAC,CAAA;~~YACjB~~,~~OAAM~~;~~QACR~~,CAAC~~;QACD~~,~~aAAa~~,~~CACX~~,OAAO~~;YACL~~,CAAC,CAAC,~~wBAAwB,~~CAAC,~~KAAK~~,CAAC,~~QAAQ~~,EAAE,~~EAAE,~~cAAc,CAAC~~;YAC5D~~,CAAC,CAAC,~~oBAAoB~~,CAAC,~~KAAK~~,CAAC,QAAQ,EAAE,EAAE,~~UAAU~~,CAAC,~~CACvD~~,CAAA;~~QACD~~,uDAAuD;IACzD,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,CAAA;IAErD,MAAM,WAAW,GAAG,CAAC,GAAsC,EAAE,EAAE;QAC7D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAA;QACnC,aAAa,CAAC,GAAG,CAAC,CAAA;QAElB,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,QAAQ,CAAC,IAAI,CAAC,CAAA;YACd,OAAM;QACR,CAAC;QAED,MAAM,MAAM,GAAG,~~OAAO;YACpB~~,CAAC,CAAC,~~oBAAoB~~,~~CAAC~~,~~GAAG~~,EAAE,~~cAAc,~~CAAC;~~YAC3C~~,CAAC,CAAC,~~gBAAgB~~,CAAC,~~GAAG~~,~~EAAE~~,~~UAAU~~,CAAC,CAAA;~~QAErC~~,~~IAAI~~,MAAM,EAAE,CAAC;~~YACX~~,~~QAAQ~~,CAAC,~~QAAQ~~,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAA;~~QACvC~~,CAAC;IACH,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,aAAa,CAAC,EAAE,CAAC,CAAA;QACjB,QAAQ,CAAC,IAAI,CAAC,CAAA;IAChB,CAAC,CAAA;IAED,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,WAAW,EAAE,CAAA;QAC7D,IAAI,CAAC,OAAO;YAAE,OAAO,QAAQ,CAAA;QAC7B,OAAO,GAAG,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,EAAE,CAAA;IACrD,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAE3D,OAAO,CACL,KAAC,KAAK,OACA,UAAU,EACd,GAAG,EAAE,SAAS,CAAC,CAAC,OAAiD,EAAE,GAAG,CAAC,CAAC,EACxE,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,WAAW,IAAI,kBAAkB,EAC9C,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,GAC5C,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport {\n maskitoDateOptionsGenerator,\n maskitoDateTimeOptionsGenerator,\n maskitoParseDate,\n maskitoParseDateTime,\n maskitoStringifyDate,\n maskitoStringifyDateTime,\n type MaskitoDateMode,\n type MaskitoDateParams,\n type MaskitoDateTimeParams,\n type MaskitoTimeMode,\n} from \"@maskito/kit\"\nimport { useMaskito } from \"@maskito/react\"\nimport { DateTime } from \"luxon\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { Input, type InputProps } from \"../Input\"\n\nexport type DateInputProps = {\n value: DateTime \| null\n onChange: (value: DateTime \| null) => void\n mode?: MaskitoDateMode\n separator?: string\n timeMode?: MaskitoTimeMode\n dateTimeSeparator?: string\n timeStep?: number\n min?: DateTime\n max?: DateTime\n clearable?: boolean\n ref?: React.Ref<HTMLInputElement \| null>\n} & Omit<\n InputProps,\n \"value\" \| \"defaultValue\" \| \"onChange\" \| \"onInput\" \| \"onClear\" \| \"ref\" \| \"type\" \| \"min\" \| \"max\"\n>\n\nexport const DateInput = (props: DateInputProps) => {\n const {\n value,\n onChange,\n mode = \"dd/mm/yyyy\",\n separator = \".\",\n timeMode,\n dateTimeSeparator = \", \",\n timeStep = 0,\n min,\n max,\n clearable = false,\n placeholder,\n ref,\n ...inputProps\n } = props\n\n const hasTime = !!timeMode\n\n const dateParams = useMemo<MaskitoDateParams>(\n () => ({\n mode,\n separator,\n ...(min ? { min: min.toJSDate() } : undefined),\n ...(max ? { max: max.toJSDate() } : undefined),\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [mode, separator, min?.toMillis(), max?.toMillis()],\n )\n\n const dateTimeParams = useMemo<MaskitoDateTimeParams>(\n () => ({\n dateMode: mode,\n dateSeparator: separator,\n timeMode: timeMode ?? \"HH:MM\",\n dateTimeSeparator,\n ...(timeStep ? { timeStep } : undefined),\n ...(min ? { min: min.toJSDate() } : undefined),\n ...(max ? { max: max.toJSDate() } : undefined),\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [mode, separator, timeMode, dateTimeSeparator, timeStep, min?.toMillis(), max?.toMillis()],\n )\n\n const maskOptions = useMemo(\n () =>\n hasTime\n ? maskitoDateTimeOptionsGenerator(dateTimeParams)\n : maskitoDateOptionsGenerator(dateParams),\n [hasTime, dateParams, dateTimeParams],\n )\n\n const maskRef = useMaskito({ options: maskOptions })\n\n const [inputValue, setInputValue] = useState(\"\")\n\n const ~~valueMsKey~~ = ~~value?.toMillis~~() ?? null~~\n useEffect((~~) => {\n if (!~~value~~) {\~~n setInputValue(\~~"\")\n return\n ~~}\n setInputValue(\n~~ ~~hasTime\n~~ ? maskitoStringifyDateTime(~~value~~.toJSDate(), dateTimeParams)\n : maskitoStringifyDate(~~value~~.toJSDate(), dateParams),\n )\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [valueMsKey, hasTime, dateParams, dateTimeParams])\n\n const handleInput = (evt: React.FormEvent<HTMLInputElement>) => {\n const str = evt.currentTarget.value\n setInputValue(str)\n\n if (!str) {\n onChange(null)\n return\n }\n\n const parsed = ~~hasTime~~\n ? ~~maskitoParseDateTime~~(~~str,~~ ~~dateTimeParams~~)\n : ~~maskitoParseDate(str~~, ~~dateParams~~)\n\n if (~~parsed~~) {\n ~~onChange~~(~~DateTime.fromJSDate~~(~~parsed~~))\n }\n }\n\n const handleClear = () => {\n setInputValue(\"\")\n onChange(null)\n }\n\n const defaultPlaceholder = useMemo(() => {\n const datePart = mode.replace(/\\//g, separator).toUpperCase()\n if (!hasTime) return datePart\n return `${datePart}${dateTimeSeparator}${timeMode}`\n }, [mode, separator, hasTime, timeMode, dateTimeSeparator])\n\n return (\n <Input\n {...inputProps}\n ref={mergeRefs([maskRef as unknown as React.Ref<HTMLInputElement>, ref])}\n value={inputValue}\n onInput={handleInput}\n placeholder={placeholder ?? defaultPlaceholder}\n onClear={clearable ? handleClear : undefined}\n />\n )\n}\n"]}
1	+ {"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport {\n maskitoDateOptionsGenerator,\n maskitoDateTimeOptionsGenerator,\n maskitoParseDate,\n maskitoParseDateTime,\n maskitoStringifyDate,\n maskitoStringifyDateTime,\n type MaskitoDateMode,\n type MaskitoDateParams,\n type MaskitoDateTimeParams,\n type MaskitoTimeMode,\n} from \"@maskito/kit\"\nimport { useMaskito } from \"@maskito/react\"\nimport { DateTime } from \"luxon\"\nimport { useEffect, useMemo, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\nimport { Input, type InputProps } from \"../Input\"\n\nexport type DateInputProps = {\n value: DateTime \| null\n onChange: (value: DateTime \| null) => void\n mode?: MaskitoDateMode\n separator?: string\n timeMode?: MaskitoTimeMode\n dateTimeSeparator?: string\n timeStep?: number\n min?: DateTime\n max?: DateTime\n clearable?: boolean\n ref?: React.Ref<HTMLInputElement \| null>\n} & Omit<\n InputProps,\n \"value\" \| \"defaultValue\" \| \"onChange\" \| \"onInput\" \| \"onClear\" \| \"ref\" \| \"type\" \| \"min\" \| \"max\"\n>\n\nexport const DateInput = (props: DateInputProps) => {\n const {\n value,\n onChange,\n mode = \"dd/mm/yyyy\",\n separator = \".\",\n timeMode,\n dateTimeSeparator = \", \",\n timeStep = 0,\n min,\n max,\n clearable = false,\n placeholder,\n onBlur,\n ref,\n ...inputProps\n } = props\n\n const hasTime = !!timeMode\n\n const dateParams = useMemo<MaskitoDateParams>(\n () => ({\n mode,\n separator,\n ...(min ? { min: min.toJSDate() } : undefined),\n ...(max ? { max: max.toJSDate() } : undefined),\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [mode, separator, min?.toMillis(), max?.toMillis()],\n )\n\n const dateTimeParams = useMemo<MaskitoDateTimeParams>(\n () => ({\n dateMode: mode,\n dateSeparator: separator,\n timeMode: timeMode ?? \"HH:MM\",\n dateTimeSeparator,\n ...(timeStep ? { timeStep } : undefined),\n ...(min ? { min: min.toJSDate() } : undefined),\n ...(max ? { max: max.toJSDate() } : undefined),\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [mode, separator, timeMode, dateTimeSeparator, timeStep, min?.toMillis(), max?.toMillis()],\n )\n\n const maskOptions = useMemo(\n () =>\n hasTime\n ? maskitoDateTimeOptionsGenerator(dateTimeParams)\n : maskitoDateOptionsGenerator(dateParams),\n [hasTime, dateParams, dateTimeParams],\n )\n\n const maskRef = useMaskito({ options: maskOptions })\n\n const [inputValue, setInputValue] = useState(\"\")\n\n const format = (date: DateTime \| null) => {\n if (!date) return \"\"\n return hasTime\n ? maskitoStringifyDateTime(date.toJSDate(), dateTimeParams)\n : maskitoStringifyDate(date.toJSDate(), dateParams)\n }\n\n const parse = (str: string) =>\n hasTime ? maskitoParseDateTime(str, dateTimeParams) : maskitoParseDate(str, dateParams)\n\n const valueMsKey = value?.toMillis() ?? null\n useEffect(() => {\n setInputValue(format(value))\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [valueMsKey, hasTime, dateParams, dateTimeParams])\n\n const handleInput = (evt: React.FormEvent<HTMLInputElement>) => {\n const str = evt.currentTarget.value\n setInputValue(str)\n\n if (!str) {\n onChange(null)\n return\n }\n\n const parsed = parse(str)\n\n if (parsed) {\n onChange(DateTime.fromJSDate(parsed))\n }\n }\n\n // Text that is not a complete date never reaches onChange, so leaving the\n // field shows the value again instead of a date the value does not hold\n const handleBlur = (evt: React.FocusEvent<HTMLInputElement>) => {\n onBlur?.(evt)\n if (inputValue && !parse(inputValue)) {\n setInputValue(format(value))\n }\n }\n\n const handleClear = () => {\n setInputValue(\"\")\n onChange(null)\n }\n\n const defaultPlaceholder = useMemo(() => {\n const datePart = mode.replace(/\\//g, separator).toUpperCase()\n if (!hasTime) return datePart\n return `${datePart}${dateTimeSeparator}${timeMode}`\n }, [mode, separator, hasTime, timeMode, dateTimeSeparator])\n\n return (\n <Input\n {...inputProps}\n ref={mergeRefs([maskRef as unknown as React.Ref<HTMLInputElement>, ref])}\n value={inputValue}\n onInput={handleInput}\n onBlur={handleBlur}\n placeholder={placeholder ?? defaultPlaceholder}\n onClear={clearable ? handleClear : undefined}\n />\n )\n}\n"]}

package/dist/es/components/DateInput/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export { DateInput } from "./DateInput";
+export { DateInput } from "./DateInput.js";
 //# sourceMappingURL=index.js.map