@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

package/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useCallback","useEffect","useMemo","useRef","useState","flexRender","getCoreRowModel","getSortedRowModel","useReactTable","CheckboxPrimitive","Skeleton","Table","ColumnSorter","ColumnsVisibility","cn","makeDecoratable","defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loading","columnsList","Object","keys","map","key","id","defaults","column","cell","className","enableHiding","enableResizing","enableSorting","header","size","accessorKey","props","row","original","getValue","String","meta","columnsDefs","firstColumn","isSelectable","createElement","indeterminate","table","getIsSomeRowsSelected","checked","getIsAllRowsSelected","onChange","toggleAllPageRowsSelected","disabled","onClick","e","stopPropagation","getIsSelected","value","toggleSelected","getCanSelect","slice","type","typedMemo","TableCell","getColumnWidth","width","Cell","assign","columnDef","style","maxWidth","getContext","MemoTableCell","TableRow","selected","cells","Row","MemoTableRow","emptyArray","Array","fill","DecoratableDataTable","bordered","columnVisibility","initialColumns","data","initialData","initialSorting","isRowSelectable","onColumnVisibilityChange","onSortingChange","selectedRows","sorting","stickyHeader","tableRef","tableWidth","setTableWidth","updateElementWidth","current","clientWidth","window","addEventListener","removeEventListener","rowSelection","reduce","acc","item","recordIndex","findIndex","rec","onRowSelectionChange","updater","newSelection","toggledRows","filter","x","length","parseInt","selection","tableSorting","isArray","columnResizeMode","enableColumnResizing","enableRowSelection","enableSortingRemoval","manualSorting","state","getCanResize","getSize","tableSize","getTotalSize","columnSize","Math","ceil","tableRows","getRowModel","rows","ref","sticky","Header","getHeaderGroups","headerGroup","headers","index","isLastCell","Head","colSpan","isPlaceholder","getToggleSortingHandler","sortable","getCanSort","Direction","direction","getIsSorted","getAllColumns","Resizer","onMouseDown","getResizeHandler","onTouchStart","isResizing","getIsResizing","Body","getVisibleCells","DataTable"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n    Cell,\n    Column,\n    ColumnDef,\n    ColumnSort,\n    OnChangeFn,\n    Row,\n    RowSelectionState,\n    SortingState,\n    VisibilityState\n} from \"@tanstack/react-table\";\nimport {\n    flexRender,\n    getCoreRowModel,\n    getSortedRowModel,\n    useReactTable\n} from \"@tanstack/react-table\";\nimport { CheckboxPrimitive } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\nimport { Table } from \"~/Table\";\nimport { ColumnSorter, ColumnsVisibility } from \"./components\";\nimport { cn, makeDecoratable } from \"~/utils\";\n\ninterface DataTableColumn<T> {\n    /*\n     * Column header component.\n     */\n    header?: string | number | JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | JSX.Element | null;\n    /*\n     * Column size.\n     */\n    size?: number;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n    /*\n     * Enable column resizing.\n     */\n    enableResizing?: boolean;\n    /*\n     * Enable column visibility toggling.\n     */\n    enableHiding?: boolean;\n}\n\ntype DataTableColumns<T> = {\n    [P in keyof T]?: DataTableColumn<T>;\n};\n\ntype DataTableDefaultData = {\n    id: string;\n    /*\n     * Define if a specific row can be selected.\n     */\n    $selectable?: boolean;\n};\n\ntype DataTableRow<T> = Row<DataTableDefaultData & T>;\n\ntype DataTableSorting = SortingState;\n\ntype DataTableColumnSort = ColumnSort;\n\ntype OnDataTableSortingChange = OnChangeFn<DataTableSorting>;\n\ntype DataTableColumnVisibility = VisibilityState;\n\ntype OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;\n\ninterface DataTableProps<TEntry> {\n    /**\n     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /**\n     * Controls whether \"select all\" action is allowed.\n     */\n    canSelectAllRows?: boolean;\n    /**\n     * Columns definition.\n     */\n    columns: DataTableColumns<TEntry>;\n    /**\n     * The column visibility state.\n     */\n    columnVisibility?: DataTableColumnVisibility;\n    /**\n     * Callback that receives current column visibility state.\n     */\n    onColumnVisibilityChange?: OnDataTableColumnVisibilityChange;\n    /**\n     * Data to display into DataTable body.\n     */\n    data: TEntry[];\n    /**\n     * Callback that is called to determine if the row is selectable.\n     */\n    isRowSelectable?: (row: Row<TEntry>) => boolean;\n    /**\n     * Render the skeleton state while data are loading.\n     */\n    loading?: boolean;\n    /**\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: TEntry[]) => void;\n    /**\n     * Callback that receives the toggled row.\n     */\n    onToggleRow?: (row: TEntry) => void;\n    /**\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnDataTableSortingChange;\n    /**\n     * Selected rows.\n     */\n    selectedRows?: TEntry[];\n    /**\n     * Sorting state.\n     */\n    sorting?: DataTableSorting;\n    /**\n     * Initial sorting state.\n     */\n    initialSorting?: DataTableSorting;\n    /**\n     * Enable sticky header.\n     */\n    stickyHeader?: boolean;\n}\n\ninterface DefineColumnsOptions<TEntry> {\n    canSelectAllRows: boolean;\n    onSelectRow?: DataTableProps<TEntry>[\"onSelectRow\"];\n    onToggleRow: DataTableProps<TEntry>[\"onToggleRow\"];\n    loading: DataTableProps<TEntry>[\"loading\"];\n}\n\nconst defineColumns = <T,>(\n    columns: DataTableProps<T>[\"columns\"],\n    options: DefineColumnsOptions<T>\n): ColumnDef<T>[] => {\n    const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;\n\n    return useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const {\n                cell,\n                className,\n                enableHiding = true,\n                enableResizing = true,\n                enableSorting = false,\n                header,\n                id,\n                size = 100\n            } = column;\n\n            return {\n                id,\n                accessorKey: id,\n                header: () => header,\n                cell: props => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(props.row.original);\n                    } else {\n                        // Automatically convert any cell value to a string for rendering,\n                        // ensuring the table displays values correctly. This aligns with React's\n                        // rendering, which expects JSX, strings or null.\n                        // https://github.com/TanStack/table/issues/1042\n                        return props.getValue() ? String(props.getValue()) : null;\n                    }\n                },\n                enableSorting,\n                meta: {\n                    className\n                },\n                enableResizing,\n                size,\n                enableHiding\n            };\n        });\n\n        let columnsDefs = defaults;\n        const firstColumn = defaults[0];\n        const isSelectable = onToggleRow || onSelectRow;\n\n        if (isSelectable && firstColumn) {\n            columnsDefs = [\n                {\n                    ...firstColumn,\n                    accessorKey: firstColumn.id as string,\n                    header: props => {\n                        return (\n                            <div className={\"wby-flex wby-items-center wby-gap-xl\"}>\n                                <CheckboxPrimitive\n                                    indeterminate={props.table.getIsSomeRowsSelected()}\n                                    checked={props.table.getIsAllRowsSelected()}\n                                    onChange={props.table.toggleAllPageRowsSelected}\n                                    aria-label=\"Select all\"\n                                    disabled={!canSelectAllRows}\n                                    onClick={e => e.stopPropagation()}\n                                />\n                                {firstColumn.header\n                                    ? React.createElement(firstColumn.header, props)\n                                    : null}\n                            </div>\n                        );\n                    },\n                    cell: props => {\n                        return (\n                            <div className={\"wby-flex wby-items-center wby-gap-xl\"}>\n                                <CheckboxPrimitive\n                                    checked={props.row.getIsSelected()}\n                                    onChange={value => props.row.toggleSelected(!!value)}\n                                    disabled={!props.row.getCanSelect()}\n                                    aria-label=\"Select row\"\n                                    className={cn(!props.row.getCanSelect() ? \"wby-invisible\" : \"\")}\n                                />\n                                {firstColumn.cell\n                                    ? React.createElement(firstColumn.cell, props)\n                                    : null}\n                            </div>\n                        );\n                    }\n                },\n                ...defaults.slice(1)\n            ];\n        }\n\n        return columnsDefs.map(column => {\n            if (loading) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton type={\"text\"} size={\"md\"} />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, onToggleRow, loading]);\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T> {\n    cell: Cell<T, unknown>;\n    getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableCell = <T,>({ cell, getColumnWidth }: TableCellProps<T>) => {\n    const width = getColumnWidth(cell.column);\n\n    return (\n        <Table.Cell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </Table.Cell>\n    );\n};\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T> {\n    selected: boolean;\n    cells: Cell<T, unknown>[];\n    getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableRow = <T,>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {\n    return (\n        <Table.Row selected={selected}>\n            {cells.map(cell => (\n                <MemoTableCell<T> key={cell.id} cell={cell} getColumnWidth={getColumnWidth} />\n            ))}\n        </Table.Row>\n    );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\n/**\n * Empty array must be defined outside the React component so it does not force rerendering of the DataTable\n */\nconst emptyArray = Array(10).fill({});\n\nconst DecoratableDataTable = <T extends Record<string, any> & DataTableDefaultData>({\n    bordered,\n    canSelectAllRows = true,\n    columnVisibility,\n    columns: initialColumns,\n    data: initialData,\n    initialSorting,\n    isRowSelectable,\n    loading,\n    onColumnVisibilityChange,\n    onSelectRow,\n    onSortingChange,\n    onToggleRow,\n    selectedRows = [],\n    sorting,\n    stickyHeader\n}: DataTableProps<T>) => {\n    const tableRef = useRef<HTMLDivElement>(null);\n    const [tableWidth, setTableWidth] = useState(1);\n\n    const data = loading ? emptyArray : initialData;\n\n    useEffect(() => {\n        const updateElementWidth = () => {\n            if (tableRef.current) {\n                const width = tableRef.current.clientWidth;\n                setTableWidth(width);\n            }\n        };\n\n        updateElementWidth();\n\n        window.addEventListener(\"resize\", updateElementWidth);\n\n        return () => {\n            window.removeEventListener(\"resize\", updateElementWidth);\n        };\n    }, [tableRef.current]);\n\n    const rowSelection = useMemo(() => {\n        return selectedRows.reduce<RowSelectionState>((acc, item) => {\n            const recordIndex = data.findIndex(rec => rec.id === item.id);\n            return { ...acc, [recordIndex]: true };\n        }, {});\n    }, [selectedRows, data]);\n\n    const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {\n        const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n\n        /**\n         * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us\n         * the new selection state (an object with row indexes that are currently selected).\n         *\n         * To figure out what row was toggled, we need to calculate the difference between the old selection\n         * and the new selection. What we're doing here is:\n         * - find all items that were present in the previous selection, but are no longer present in the new selection\n         * - find all items that are present in the new selection, but were not present in the previous selection\n         */\n        const toggledRows = [\n            ...Object.keys(rowSelection).filter(x => !(x in newSelection)),\n            ...Object.keys(newSelection).filter(x => !(x in rowSelection))\n        ];\n\n        // If the difference is only 1 item, and `onToggleRow` is available, execute that.\n        if (toggledRows.length === 1 && typeof onToggleRow === \"function\") {\n            onToggleRow(data[parseInt(toggledRows[0])]);\n            return;\n        } else if (typeof onSelectRow === \"function\") {\n            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n            onSelectRow(selection);\n        }\n    };\n\n    const tableSorting = useMemo(() => {\n        if (!Array.isArray(sorting) || !sorting.length) {\n            return initialSorting;\n        }\n        return sorting;\n    }, [sorting]);\n\n    const columns = defineColumns(initialColumns, {\n        canSelectAllRows,\n        onSelectRow,\n        onToggleRow,\n        loading\n    });\n\n    const table = useReactTable<T>({\n        columnResizeMode: \"onChange\",\n        columns,\n        data,\n        enableColumnResizing: true,\n        enableHiding: !!onColumnVisibilityChange,\n        enableRowSelection: isRowSelectable,\n        enableSorting: !!onSortingChange,\n        enableSortingRemoval: false,\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        manualSorting: true,\n        onColumnVisibilityChange,\n        onRowSelectionChange,\n        onSortingChange,\n        state: {\n            columnVisibility,\n            rowSelection,\n            sorting: tableSorting\n        }\n    });\n\n    const getColumnWidth = useCallback(\n        (column: Column<T>): number => {\n            if (!column.getCanResize()) {\n                return column.getSize();\n            }\n\n            const tableSize = table.getTotalSize();\n            const columnSize = column.getSize();\n\n            return Math.ceil((columnSize * tableWidth) / tableSize);\n        },\n        [table, tableWidth]\n    );\n\n    /**\n     * Had to memoize the rows to avoid browser freeze.\n     */\n    const tableRows = useMemo(() => {\n        return table.getRowModel().rows;\n    }, [table, data, columns]);\n\n    return (\n        <div ref={tableRef}>\n            <Table bordered={bordered} sticky={stickyHeader}>\n                <Table.Header sticky={stickyHeader}>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <Table.Row key={headerGroup.id}>\n                            {headerGroup.headers.map((header, index) => {\n                                const isLastCell = index === headerGroup.headers.length - 1;\n                                const width = getColumnWidth(header.column);\n\n                                return (\n                                    <Table.Head\n                                        key={header.id}\n                                        {...header.column.columnDef.meta}\n                                        colSpan={header.colSpan}\n                                        style={{ width, maxWidth: width }}\n                                    >\n                                        {header.isPlaceholder ? null : (\n                                            <ColumnSorter\n                                                onClick={header.column.getToggleSortingHandler()}\n                                                sortable={header.column.getCanSort()}\n                                            >\n                                                <div className=\"wby-w-full wby-overflow-hidden wby-whitespace-nowrap wby-truncate\">\n                                                    {flexRender(\n                                                        header.column.columnDef.header,\n                                                        header.getContext()\n                                                    )}\n                                                </div>\n                                                <Table.Direction\n                                                    direction={header.column.getIsSorted() || null}\n                                                />\n                                                {isLastCell && (\n                                                    <div className={\"wby-mr-xs wby-h-md\"}>\n                                                        <ColumnsVisibility\n                                                            columns={table.getAllColumns()}\n                                                        />\n                                                    </div>\n                                                )}\n                                            </ColumnSorter>\n                                        )}\n                                        {header.column.getCanResize() && (\n                                            <Table.Resizer\n                                                onMouseDown={header.getResizeHandler()}\n                                                onTouchStart={header.getResizeHandler()}\n                                                isResizing={header.column.getIsResizing()}\n                                            />\n                                        )}\n                                    </Table.Head>\n                                );\n                            })}\n                        </Table.Row>\n                    ))}\n                </Table.Header>\n                <Table.Body>\n                    {tableRows.map(row => {\n                        const id = row.original.id || row.id;\n                        return (\n                            <MemoTableRow<T>\n                                key={id}\n                                cells={row.getVisibleCells()}\n                                selected={row.getIsSelected()}\n                                getColumnWidth={getColumnWidth}\n                            />\n                        );\n                    })}\n                </Table.Body>\n            </Table>\n        </div>\n    );\n};\n\nconst DataTable = makeDecoratable(\"DataTable\", DecoratableDataTable);\n\nexport {\n    DataTable,\n    type DataTableProps,\n    type DataTableColumn,\n    type DataTableColumns,\n    type DataTableDefaultData,\n    type DataTableRow,\n    type DataTableSorting,\n    type DataTableColumnSort,\n    type OnDataTableSortingChange,\n    type DataTableColumnVisibility,\n    type OnDataTableColumnVisibilityChange\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","memo","useCallback","useEffect","useMemo","useRef","useState","flexRender","getCoreRowModel","getSortedRowModel","useReactTable","CheckboxPrimitive","Skeleton","Table","ColumnSorter","ColumnsVisibility","cn","makeDecoratable","defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loading","columnsList","Object","keys","map","key","id","defaults","column","accessorKey","cell","className","enableHiding","enableResizing","enableSorting","header","size","props","row","original","getValue","String","meta","columnsDefs","firstColumn","isSelectable","createElement","indeterminate","table","getIsSomeRowsSelected","checked","getIsAllRowsSelected","onChange","toggleAllPageRowsSelected","disabled","onClick","e","stopPropagation","getIsSelected","value","toggleSelected","getCanSelect","slice","type","typedMemo","TableCell","getColumnWidth","width","Cell","assign","columnDef","style","maxWidth","getContext","MemoTableCell","TableRow","selected","cells","Row","MemoTableRow","emptyArray","Array","fill","DecoratableDataTable","bordered","columnVisibility","initialColumns","data","initialData","initialSorting","isRowSelectable","onColumnVisibilityChange","onSortingChange","selectedRows","sorting","stickyHeader","tableRef","tableWidth","setTableWidth","updateElementWidth","current","clientWidth","window","addEventListener","removeEventListener","rowSelection","reduce","acc","item","recordIndex","findIndex","rec","onRowSelectionChange","updater","newSelection","toggledRows","filter","x","length","parseInt","selection","tableSorting","isArray","columnResizeMode","enableColumnResizing","enableRowSelection","enableSortingRemoval","manualSorting","state","getCanResize","getSize","tableSize","getTotalSize","columnSize","Math","ceil","tableRows","getRowModel","rows","ref","sticky","Header","getHeaderGroups","headerGroup","headers","index","isLastCell","Head","colSpan","isPlaceholder","getToggleSortingHandler","sortable","getCanSort","Direction","direction","getIsSorted","getAllColumns","Resizer","onMouseDown","getResizeHandler","onTouchStart","isResizing","getIsResizing","Body","getVisibleCells","DataTable"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n    Cell,\n    Column,\n    ColumnDef,\n    ColumnSort,\n    OnChangeFn,\n    Row,\n    RowSelectionState,\n    SortingState,\n    VisibilityState\n} from \"@tanstack/react-table\";\nimport {\n    flexRender,\n    getCoreRowModel,\n    getSortedRowModel,\n    useReactTable\n} from \"@tanstack/react-table\";\nimport { CheckboxPrimitive } from \"~/Checkbox/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\nimport { Table } from \"~/Table/index.js\";\nimport { ColumnSorter, ColumnsVisibility } from \"./components/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ninterface DataTableColumn<T> {\n    /*\n     * Column header component.\n     */\n    header?: string | number | JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | JSX.Element | null;\n    /*\n     * Column size.\n     */\n    size?: number;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n    /*\n     * Enable column resizing.\n     */\n    enableResizing?: boolean;\n    /*\n     * Enable column visibility toggling.\n     */\n    enableHiding?: boolean;\n    /*\n     * Accessor key for the column data path.\n     */\n    accessorKey?: string;\n}\n\ntype DataTableColumns<T> = {\n    [P in keyof T]?: DataTableColumn<T>;\n};\n\ntype DataTableDefaultData = {\n    id: string;\n    /*\n     * Define if a specific row can be selected.\n     */\n    $selectable?: boolean;\n};\n\ntype DataTableRow<T> = Row<DataTableDefaultData & T>;\n\ntype DataTableSorting = SortingState;\n\ntype DataTableColumnSort = ColumnSort;\n\ntype OnDataTableSortingChange = OnChangeFn<DataTableSorting>;\n\ntype DataTableColumnVisibility = VisibilityState;\n\ntype OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;\n\ninterface DataTableProps<TEntry> {\n    /**\n     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /**\n     * Controls whether \"select all\" action is allowed.\n     */\n    canSelectAllRows?: boolean;\n    /**\n     * Columns definition.\n     */\n    columns: DataTableColumns<TEntry>;\n    /**\n     * The column visibility state.\n     */\n    columnVisibility?: DataTableColumnVisibility;\n    /**\n     * Callback that receives current column visibility state.\n     */\n    onColumnVisibilityChange?: OnDataTableColumnVisibilityChange;\n    /**\n     * Data to display into DataTable body.\n     */\n    data: TEntry[];\n    /**\n     * Callback that is called to determine if the row is selectable.\n     */\n    isRowSelectable?: (row: Row<TEntry>) => boolean;\n    /**\n     * Render the skeleton state while data are loading.\n     */\n    loading?: boolean;\n    /**\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: TEntry[]) => void;\n    /**\n     * Callback that receives the toggled row.\n     */\n    onToggleRow?: (row: TEntry) => void;\n    /**\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnDataTableSortingChange;\n    /**\n     * Selected rows.\n     */\n    selectedRows?: TEntry[];\n    /**\n     * Sorting state.\n     */\n    sorting?: DataTableSorting;\n    /**\n     * Initial sorting state.\n     */\n    initialSorting?: DataTableSorting;\n    /**\n     * Enable sticky header.\n     */\n    stickyHeader?: boolean;\n}\n\ninterface DefineColumnsOptions<TEntry> {\n    canSelectAllRows: boolean;\n    onSelectRow?: DataTableProps<TEntry>[\"onSelectRow\"];\n    onToggleRow: DataTableProps<TEntry>[\"onToggleRow\"];\n    loading: DataTableProps<TEntry>[\"loading\"];\n}\n\nconst defineColumns = <T,>(\n    columns: DataTableProps<T>[\"columns\"],\n    options: DefineColumnsOptions<T>\n): ColumnDef<T>[] => {\n    const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;\n\n    return useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const {\n                accessorKey,\n                cell,\n                className,\n                enableHiding = true,\n                enableResizing = true,\n                enableSorting = false,\n                header,\n                id,\n                size = 100\n            } = column;\n\n            return {\n                id,\n                accessorKey: accessorKey || id,\n                header: () => header,\n                cell: props => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(props.row.original);\n                    } else {\n                        // Automatically convert any cell value to a string for rendering,\n                        // ensuring the table displays values correctly. This aligns with React's\n                        // rendering, which expects JSX, strings or null.\n                        // https://github.com/TanStack/table/issues/1042\n                        return props.getValue() ? String(props.getValue()) : null;\n                    }\n                },\n                enableSorting,\n                meta: {\n                    className\n                },\n                enableResizing,\n                size,\n                enableHiding\n            };\n        });\n\n        let columnsDefs = defaults;\n        const firstColumn = defaults[0];\n        const isSelectable = onToggleRow || onSelectRow;\n\n        if (isSelectable && firstColumn) {\n            columnsDefs = [\n                {\n                    ...firstColumn,\n                    accessorKey: firstColumn.id as string,\n                    header: props => {\n                        if (!props) {\n                            return null;\n                        }\n\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    indeterminate={props.table.getIsSomeRowsSelected()}\n                                    checked={props.table.getIsAllRowsSelected()}\n                                    onChange={props.table.toggleAllPageRowsSelected}\n                                    aria-label=\"Select all\"\n                                    disabled={!canSelectAllRows}\n                                    onClick={e => e.stopPropagation()}\n                                />\n                                {firstColumn.header\n                                    ? React.createElement(firstColumn.header, props)\n                                    : null}\n                            </div>\n                        );\n                    },\n                    cell: props => {\n                        if (!props) {\n                            return null;\n                        }\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    checked={props.row.getIsSelected()}\n                                    onChange={value => props.row.toggleSelected(!!value)}\n                                    disabled={!props.row.getCanSelect()}\n                                    aria-label=\"Select row\"\n                                    className={cn(!props.row.getCanSelect() ? \"invisible\" : \"\")}\n                                />\n                                {firstColumn.cell\n                                    ? React.createElement(firstColumn.cell, props)\n                                    : null}\n                            </div>\n                        );\n                    }\n                },\n                ...defaults.slice(1)\n            ];\n        }\n\n        return columnsDefs.map(column => {\n            if (loading) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton type={\"text\"} size={\"md\"} />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, onToggleRow, loading]);\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T> {\n    cell: Cell<T, unknown>;\n    getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableCell = <T,>({ cell, getColumnWidth }: TableCellProps<T>) => {\n    const width = getColumnWidth(cell.column);\n\n    return (\n        <Table.Cell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </Table.Cell>\n    );\n};\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T> {\n    selected: boolean;\n    cells: Cell<T, unknown>[];\n    getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableRow = <T,>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {\n    return (\n        <Table.Row selected={selected}>\n            {cells.map(cell => (\n                <MemoTableCell<T> key={cell.id} cell={cell} getColumnWidth={getColumnWidth} />\n            ))}\n        </Table.Row>\n    );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\n/**\n * Empty array must be defined outside the React component so it does not force rerendering of the DataTable\n */\nconst emptyArray = Array(10).fill({});\n\nconst DecoratableDataTable = <T extends Record<string, any> & DataTableDefaultData>({\n    bordered,\n    canSelectAllRows = true,\n    columnVisibility,\n    columns: initialColumns,\n    data: initialData,\n    initialSorting,\n    isRowSelectable,\n    loading,\n    onColumnVisibilityChange,\n    onSelectRow,\n    onSortingChange,\n    onToggleRow,\n    selectedRows = [],\n    sorting,\n    stickyHeader\n}: DataTableProps<T>) => {\n    const tableRef = useRef<HTMLDivElement>(null);\n    const [tableWidth, setTableWidth] = useState(1);\n\n    const data = loading ? emptyArray : initialData;\n\n    useEffect(() => {\n        const updateElementWidth = () => {\n            if (tableRef.current) {\n                const width = tableRef.current.clientWidth;\n                setTableWidth(width);\n            }\n        };\n\n        updateElementWidth();\n\n        window.addEventListener(\"resize\", updateElementWidth);\n\n        return () => {\n            window.removeEventListener(\"resize\", updateElementWidth);\n        };\n    }, [tableRef.current]);\n\n    const rowSelection = useMemo(() => {\n        return selectedRows.reduce<RowSelectionState>((acc, item) => {\n            const recordIndex = data.findIndex(rec => rec.id === item.id);\n            return { ...acc, [recordIndex]: true };\n        }, {});\n    }, [selectedRows, data]);\n\n    const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {\n        const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n\n        /**\n         * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us\n         * the new selection state (an object with row indexes that are currently selected).\n         *\n         * To figure out what row was toggled, we need to calculate the difference between the old selection\n         * and the new selection. What we're doing here is:\n         * - find all items that were present in the previous selection, but are no longer present in the new selection\n         * - find all items that are present in the new selection, but were not present in the previous selection\n         */\n        const toggledRows = [\n            ...Object.keys(rowSelection).filter(x => !(x in newSelection)),\n            ...Object.keys(newSelection).filter(x => !(x in rowSelection))\n        ];\n\n        // If the difference is only 1 item, and `onToggleRow` is available, execute that.\n        if (toggledRows.length === 1 && typeof onToggleRow === \"function\") {\n            onToggleRow(data[parseInt(toggledRows[0])]);\n            return;\n        } else if (typeof onSelectRow === \"function\") {\n            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n            onSelectRow(selection);\n        }\n    };\n\n    const tableSorting = useMemo(() => {\n        if (!Array.isArray(sorting) || !sorting.length) {\n            return initialSorting;\n        }\n        return sorting;\n    }, [sorting]);\n\n    const columns = defineColumns(initialColumns, {\n        canSelectAllRows,\n        onSelectRow,\n        onToggleRow,\n        loading\n    });\n\n    const table = useReactTable<T>({\n        columnResizeMode: \"onChange\",\n        columns,\n        data,\n        enableColumnResizing: true,\n        enableHiding: !!onColumnVisibilityChange,\n        enableRowSelection: isRowSelectable,\n        enableSorting: !!onSortingChange,\n        enableSortingRemoval: false,\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        manualSorting: true,\n        onColumnVisibilityChange,\n        onRowSelectionChange,\n        onSortingChange,\n        state: {\n            columnVisibility,\n            rowSelection,\n            sorting: tableSorting\n        }\n    });\n\n    const getColumnWidth = useCallback(\n        (column: Column<T>): number => {\n            if (!column.getCanResize()) {\n                return column.getSize();\n            }\n\n            const tableSize = table.getTotalSize();\n            const columnSize = column.getSize();\n\n            return Math.ceil((columnSize * tableWidth) / tableSize);\n        },\n        [table, tableWidth]\n    );\n\n    /**\n     * Had to memoize the rows to avoid browser freeze.\n     */\n    const tableRows = useMemo(() => {\n        return table.getRowModel().rows;\n    }, [table, data, columns]);\n\n    return (\n        <div ref={tableRef}>\n            <Table bordered={bordered} sticky={stickyHeader}>\n                <Table.Header sticky={stickyHeader}>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <Table.Row key={headerGroup.id}>\n                            {headerGroup.headers.map((header, index) => {\n                                const isLastCell = index === headerGroup.headers.length - 1;\n                                const width = getColumnWidth(header.column);\n\n                                return (\n                                    <Table.Head\n                                        key={header.id}\n                                        {...header.column.columnDef.meta}\n                                        colSpan={header.colSpan}\n                                        style={{ width, maxWidth: width }}\n                                    >\n                                        {header.isPlaceholder ? null : (\n                                            <ColumnSorter\n                                                onClick={header.column.getToggleSortingHandler()}\n                                                sortable={header.column.getCanSort()}\n                                            >\n                                                <div className=\"w-full overflow-hidden whitespace-nowrap truncate\">\n                                                    {flexRender(\n                                                        header.column.columnDef.header,\n                                                        header.getContext()\n                                                    )}\n                                                </div>\n                                                <Table.Direction\n                                                    direction={header.column.getIsSorted() || null}\n                                                />\n                                                {isLastCell && (\n                                                    <div className={\"mr-xs h-md\"}>\n                                                        <ColumnsVisibility\n                                                            columns={table.getAllColumns()}\n                                                        />\n                                                    </div>\n                                                )}\n                                            </ColumnSorter>\n                                        )}\n                                        {header.column.getCanResize() && (\n                                            <Table.Resizer\n                                                onMouseDown={header.getResizeHandler()}\n                                                onTouchStart={header.getResizeHandler()}\n                                                isResizing={header.column.getIsResizing()}\n                                            />\n                                        )}\n                                    </Table.Head>\n                                );\n                            })}\n                        </Table.Row>\n                    ))}\n                </Table.Header>\n                <Table.Body>\n                    {tableRows.map(row => {\n                        const id = row.original.id || row.id;\n                        return (\n                            <MemoTableRow<T>\n                                key={id}\n                                cells={row.getVisibleCells()}\n                                selected={row.getIsSelected()}\n                                getColumnWidth={getColumnWidth}\n                            />\n                        );\n                    })}\n                </Table.Body>\n            </Table>\n        </div>\n    );\n};\n\nconst DataTable = makeDecoratable(\"DataTable\", DecoratableDataTable);\n\nexport {\n    DataTable,\n    type DataTableProps,\n    type DataTableColumn,\n    type DataTableColumns,\n    type DataTableDefaultData,\n    type DataTableRow,\n    type DataTableSorting,\n    type DataTableColumnSort,\n    type OnDataTableSortingChange,\n    type DataTableColumnVisibility,\n    type OnDataTableColumnVisibilityChange\n};\n"],"mappings":"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","ignoreList":[]}

package/DataTable/DataTable.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as DataTableStories from './DataTable.stories';
 
@@ -633,7 +633,7 @@ const WithCustomCellRendererDataTableExample = () => {
                     ...columns.name,
                     cell: (entry) => {
                         return (
-                            <div className={"wby-flex wby-items-center wby-gap-sm-extra"}>
+                            <div className={"flex items-center gap-sm-extra"}>
                                 <Avatar
                                     image={
                                         <Avatar.Image
@@ -646,14 +646,14 @@ const WithCustomCellRendererDataTableExample = () => {
                                 />
                                 <div>
                                     <Text
-                                        className={"wby-text-neutral-primary wby-font-semibold"}
+                                        className={"text-neutral-primary font-semibold"}
                                         as={"div"}
                                     >
                                         {entry.name}
                                     </Text>
                                     <Text
                                         size={"sm"}
-                                        className={"wby-text-neutral-strong"}
+                                        className={"text-neutral-strong"}
                                         as={"div"}
                                     >Last updated: {entry.lastModified}</Text>
                                 </div>
@@ -816,11 +816,11 @@ const WithCustomColumnClassNameDataTableExample = () => {
                 ...columns,
                 lastModified: {
                     ...columns.lastModified,
-                    className: "wby-bg-primary-subtle"
+                    className: "bg-primary-subtle"
                 },
                 status: {
                     ...columns.status,
-                    className: "wby-text-right"
+                    className: "text-right"
                 }
             }}
             data={data}
@@ -913,4 +913,4 @@ const WithSortingDataTableExample = () => {
 };
 
 export default WithSortingDataTableExample;
-` } } />
+` } } />

package/DataTable/DataTable.stories.d.ts

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import type { DataTableDefaultData } from "./DataTable";
-import { DataTable } from "./DataTable";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { DataTableDefaultData } from "./DataTable.js";
+import { DataTable } from "./DataTable.js";
 declare const meta: Meta<typeof DataTable>;
 export default meta;
 type Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;

package/DataTable/DataTable.stories.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { DataTable } from "./DataTable";
-import { Avatar } from "../Avatar";
-import { Text } from "../Text";
+import { DataTable } from "./DataTable.js";
+import { Avatar } from "../Avatar/index.js";
+import { Text } from "../Text/index.js";
 const meta = {
   title: "Components/DataTable",
   component: DataTable,
@@ -125,7 +125,7 @@ export const WithCustomCellRenderer = {
         ...columns.name,
         cell: entry => {
           return /*#__PURE__*/React.createElement("div", {
-            className: "wby-flex wby-items-center wby-gap-sm-extra"
+            className: "flex items-center gap-sm-extra"
           }, /*#__PURE__*/React.createElement(Avatar, {
             image: /*#__PURE__*/React.createElement(Avatar.Image, {
               src: "https://github.com/webiny-bot.png",
@@ -134,11 +134,11 @@ export const WithCustomCellRenderer = {
             fallback: /*#__PURE__*/React.createElement(Avatar.Fallback, null, entry.name.charAt(0)),
             size: "xl"
           }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
-            className: "wby-text-neutral-primary wby-font-semibold",
+            className: "text-neutral-primary font-semibold",
             as: "div"
           }, entry.name), /*#__PURE__*/React.createElement(Text, {
             size: "sm",
-            className: "wby-text-neutral-strong",
+            className: "text-neutral-strong",
             as: "div"
           }, `Last updated: ${entry.lastModified}`)));
         }
@@ -165,11 +165,11 @@ export const WithCustomColumnClassName = {
       ...columns,
       lastModified: {
         ...columns.lastModified,
-        className: "wby-bg-primary-subtle"
+        className: "bg-primary-subtle"
       },
       status: {
         ...columns.status,
-        className: "wby-text-right"
+        className: "text-right"
       }
     }
   }

package/DataTable/DataTable.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","DataTable","Avatar","Text","meta","title","component","parameters","layout","columns","name","header","createdBy","lastModified","status","data","id","Default","args","Bordered","bordered","WithStickyHeader","stickyHeader","WithSelectableRows","render","selectedRows","setSelectedRows","createElement","Object","assign","onSelectRow","rows","WithLoading","loading","setLoading","tableData","setTableData","timer","setTimeout","clearTimeout","WithLongColumnContent","map","entry","WithCustomCellRenderer","cell","className","image","Image","src","alt","fallback","Fallback","charAt","size","as","WithCustomColumnSize","WithCustomColumnClassName","WithSorting","enableSorting","sorting","desc","argsSorting","setSorting","onSortingChange","Documentation","docs","description","story","argTypes","control","defaultValue"],"sources":["DataTable.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport type { DataTableColumns, DataTableDefaultData, DataTableSorting } from \"./DataTable\";\nimport { DataTable } from \"./DataTable\";\nimport { Avatar } from \"~/Avatar\";\nimport { Text } from \"~/Text\";\n\nconst meta: Meta<typeof DataTable> = {\n    title: \"Components/DataTable\",\n    component: DataTable,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;\n\n// Declare the data structure.\ninterface Entry {\n    id: string;\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\n// Define the columns structure for the table.\nconst columns: DataTableColumns<Entry> = {\n    name: {\n        header: \"Title\"\n    },\n    createdBy: {\n        header: \"Author\"\n    },\n    lastModified: {\n        header: \"Last Modified\"\n    },\n    status: {\n        header: \"Status\"\n    }\n};\n\n// Define the data to display.\nconst data = [\n    {\n        id: \"entry-1\",\n        name: \"Getting Started Guide\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 hour ago\",\n        status: \"Published\"\n    },\n    {\n        id: \"entry-2\",\n        name: \"User Documentation\",\n        createdBy: \"Jane Smith\",\n        lastModified: \"3 days ago\",\n        status: \"Draft\"\n    },\n    {\n        id: \"entry-3\",\n        name: \"API Reference\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 week ago\",\n        status: \"Published\"\n    }\n];\n\nexport const Default: Story<Entry> = {\n    args: {\n        data,\n        columns\n    }\n};\n\nexport const Bordered: Story<Entry> = {\n    args: {\n        ...Default.args,\n        bordered: true\n    }\n};\n\nexport const WithStickyHeader: Story<Entry> = {\n    args: {\n        ...Default.args,\n        stickyHeader: true\n    }\n};\n\nexport const WithSelectableRows: Story<Entry> = {\n    args: Default.args,\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n            />\n        );\n    }\n};\n\nexport const WithLoading: Story<Entry> = {\n    args: {\n        columns\n    },\n    render: ({ columns }) => {\n        const [loading, setLoading] = useState(true);\n        const [tableData, setTableData] = useState<Entry[]>([]);\n\n        useEffect(() => {\n            const timer = setTimeout(() => {\n                setTableData(data); // your predefined data\n                setLoading(false);\n            }, 5000);\n\n            return () => clearTimeout(timer);\n        }, []);\n\n        return <DataTable columns={columns} data={tableData} loading={loading} />;\n    }\n};\n\nexport const WithLongColumnContent: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                header: \"Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n            }\n        },\n        data: data.map(entry => ({\n            ...entry,\n            name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`\n        }))\n    }\n};\n\nexport const WithCustomCellRenderer: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                cell: (entry: Entry) => {\n                    return (\n                        <div className={\"wby-flex wby-items-center wby-gap-sm-extra\"}>\n                            <Avatar\n                                image={\n                                    <Avatar.Image\n                                        src=\"https://github.com/webiny-bot.png\"\n                                        alt=\"@webiny\"\n                                    />\n                                }\n                                fallback={<Avatar.Fallback>{entry.name.charAt(0)}</Avatar.Fallback>}\n                                size={\"xl\"}\n                            />\n                            <div>\n                                <Text\n                                    className={\"wby-text-neutral-primary wby-font-semibold\"}\n                                    as={\"div\"}\n                                >\n                                    {entry.name}\n                                </Text>\n                                <Text\n                                    size={\"sm\"}\n                                    className={\"wby-text-neutral-strong\"}\n                                    as={\"div\"}\n                                >{`Last updated: ${entry.lastModified}`}</Text>\n                            </div>\n                        </div>\n                    );\n                }\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnSize: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                size: 200\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnClassName: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            lastModified: {\n                ...columns.lastModified,\n                className: \"wby-bg-primary-subtle\"\n            },\n            status: {\n                ...columns.status,\n                className: \"wby-text-right\"\n            }\n        }\n    }\n};\n\nexport const WithSorting: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                enableSorting: true\n            },\n            lastModified: {\n                ...columns.lastModified,\n                enableSorting: true\n            }\n        },\n        sorting: [\n            {\n                id: \"lastModified\",\n                desc: true\n            }\n        ]\n    },\n    render: ({ sorting: argsSorting = [], ...args }) => {\n        const [sorting, setSorting] = useState<DataTableSorting>(argsSorting);\n        return <DataTable {...args} sorting={sorting} onSortingChange={setSorting} />;\n    }\n};\n\n// Add a Documentation story\nexport const Documentation: Story<Entry> = {\n    args: {\n        bordered: true,\n        stickyHeader: true,\n        columns: {\n            name: {\n                header: \"Title\",\n                enableSorting: true\n            },\n            createdBy: {\n                header: \"Author\"\n            },\n            lastModified: {\n                header: \"Last Modified\",\n                enableSorting: true\n            },\n            status: {\n                header: \"Status\"\n            }\n        },\n        data: [\n            {\n                id: \"entry-1\",\n                name: \"Getting Started Guide\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            },\n            {\n                id: \"entry-2\",\n                name: \"User Documentation\",\n                createdBy: \"Jane Smith\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                id: \"entry-3\",\n                name: \"API Reference\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 week ago\",\n                status: \"Published\"\n            }\n        ]\n    },\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n        const [sorting, setSorting] = useState<DataTableSorting>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n                sorting={sorting}\n                onSortingChange={setSorting}\n            />\n        );\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a DataTable with selectable rows, sorting, and a sticky header.\"\n            }\n        }\n    },\n    argTypes: {\n        bordered: {\n            description: \"Show or hide borders.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        stickyHeader: {\n            description: \"Enable sticky header.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        columns: {\n            description: \"Columns definition. Please refer to the code example for details.\",\n            control: false\n        },\n        data: {\n            description:\n                \"Data to display into DataTable body. Please refer to the code example for details.\",\n            control: false\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","useEffect","DataTable","Avatar","Text","meta","title","component","parameters","layout","columns","name","header","createdBy","lastModified","status","data","id","Default","args","Bordered","bordered","WithStickyHeader","stickyHeader","WithSelectableRows","render","selectedRows","setSelectedRows","createElement","Object","assign","onSelectRow","rows","WithLoading","loading","setLoading","tableData","setTableData","timer","setTimeout","clearTimeout","WithLongColumnContent","map","entry","WithCustomCellRenderer","cell","className","image","Image","src","alt","fallback","Fallback","charAt","size","as","WithCustomColumnSize","WithCustomColumnClassName","WithSorting","enableSorting","sorting","desc","argsSorting","setSorting","onSortingChange","Documentation","docs","description","story","argTypes","control","defaultValue"],"sources":["DataTable.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport type { DataTableColumns, DataTableDefaultData, DataTableSorting } from \"./DataTable.js\";\nimport { DataTable } from \"./DataTable.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof DataTable> = {\n    title: \"Components/DataTable\",\n    component: DataTable,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story<T extends Record<string, any> & DataTableDefaultData> = StoryObj<typeof DataTable<T>>;\n\n// Declare the data structure.\ninterface Entry {\n    id: string;\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\n// Define the columns structure for the table.\nconst columns: DataTableColumns<Entry> = {\n    name: {\n        header: \"Title\"\n    },\n    createdBy: {\n        header: \"Author\"\n    },\n    lastModified: {\n        header: \"Last Modified\"\n    },\n    status: {\n        header: \"Status\"\n    }\n};\n\n// Define the data to display.\nconst data = [\n    {\n        id: \"entry-1\",\n        name: \"Getting Started Guide\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 hour ago\",\n        status: \"Published\"\n    },\n    {\n        id: \"entry-2\",\n        name: \"User Documentation\",\n        createdBy: \"Jane Smith\",\n        lastModified: \"3 days ago\",\n        status: \"Draft\"\n    },\n    {\n        id: \"entry-3\",\n        name: \"API Reference\",\n        createdBy: \"John Doe\",\n        lastModified: \"1 week ago\",\n        status: \"Published\"\n    }\n];\n\nexport const Default: Story<Entry> = {\n    args: {\n        data,\n        columns\n    }\n};\n\nexport const Bordered: Story<Entry> = {\n    args: {\n        ...Default.args,\n        bordered: true\n    }\n};\n\nexport const WithStickyHeader: Story<Entry> = {\n    args: {\n        ...Default.args,\n        stickyHeader: true\n    }\n};\n\nexport const WithSelectableRows: Story<Entry> = {\n    args: Default.args,\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n            />\n        );\n    }\n};\n\nexport const WithLoading: Story<Entry> = {\n    args: {\n        columns\n    },\n    render: ({ columns }) => {\n        const [loading, setLoading] = useState(true);\n        const [tableData, setTableData] = useState<Entry[]>([]);\n\n        useEffect(() => {\n            const timer = setTimeout(() => {\n                setTableData(data); // your predefined data\n                setLoading(false);\n            }, 5000);\n\n            return () => clearTimeout(timer);\n        }, []);\n\n        return <DataTable columns={columns} data={tableData} loading={loading} />;\n    }\n};\n\nexport const WithLongColumnContent: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                header: \"Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n            }\n        },\n        data: data.map(entry => ({\n            ...entry,\n            name: `${entry.name} - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`\n        }))\n    }\n};\n\nexport const WithCustomCellRenderer: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                cell: (entry: Entry) => {\n                    return (\n                        <div className={\"flex items-center gap-sm-extra\"}>\n                            <Avatar\n                                image={\n                                    <Avatar.Image\n                                        src=\"https://github.com/webiny-bot.png\"\n                                        alt=\"@webiny\"\n                                    />\n                                }\n                                fallback={<Avatar.Fallback>{entry.name.charAt(0)}</Avatar.Fallback>}\n                                size={\"xl\"}\n                            />\n                            <div>\n                                <Text className={\"text-neutral-primary font-semibold\"} as={\"div\"}>\n                                    {entry.name}\n                                </Text>\n                                <Text\n                                    size={\"sm\"}\n                                    className={\"text-neutral-strong\"}\n                                    as={\"div\"}\n                                >{`Last updated: ${entry.lastModified}`}</Text>\n                            </div>\n                        </div>\n                    );\n                }\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnSize: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                size: 200\n            }\n        }\n    }\n};\n\nexport const WithCustomColumnClassName: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            lastModified: {\n                ...columns.lastModified,\n                className: \"bg-primary-subtle\"\n            },\n            status: {\n                ...columns.status,\n                className: \"text-right\"\n            }\n        }\n    }\n};\n\nexport const WithSorting: Story<Entry> = {\n    args: {\n        ...Default.args,\n        columns: {\n            ...columns,\n            name: {\n                ...columns.name,\n                enableSorting: true\n            },\n            lastModified: {\n                ...columns.lastModified,\n                enableSorting: true\n            }\n        },\n        sorting: [\n            {\n                id: \"lastModified\",\n                desc: true\n            }\n        ]\n    },\n    render: ({ sorting: argsSorting = [], ...args }) => {\n        const [sorting, setSorting] = useState<DataTableSorting>(argsSorting);\n        return <DataTable {...args} sorting={sorting} onSortingChange={setSorting} />;\n    }\n};\n\n// Add a Documentation story\nexport const Documentation: Story<Entry> = {\n    args: {\n        bordered: true,\n        stickyHeader: true,\n        columns: {\n            name: {\n                header: \"Title\",\n                enableSorting: true\n            },\n            createdBy: {\n                header: \"Author\"\n            },\n            lastModified: {\n                header: \"Last Modified\",\n                enableSorting: true\n            },\n            status: {\n                header: \"Status\"\n            }\n        },\n        data: [\n            {\n                id: \"entry-1\",\n                name: \"Getting Started Guide\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            },\n            {\n                id: \"entry-2\",\n                name: \"User Documentation\",\n                createdBy: \"Jane Smith\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                id: \"entry-3\",\n                name: \"API Reference\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 week ago\",\n                status: \"Published\"\n            }\n        ]\n    },\n    render: args => {\n        const [selectedRows, setSelectedRows] = useState<Entry[]>([]);\n        const [sorting, setSorting] = useState<DataTableSorting>([]);\n\n        return (\n            <DataTable\n                {...args}\n                selectedRows={selectedRows}\n                onSelectRow={rows => setSelectedRows(rows)}\n                sorting={sorting}\n                onSortingChange={setSorting}\n            />\n        );\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: \"This example shows a DataTable with selectable rows, sorting, and a sticky header.\"\n            }\n        }\n    },\n    argTypes: {\n        bordered: {\n            description: \"Show or hide borders.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        stickyHeader: {\n            description: \"Enable sticky header.\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        columns: {\n            description: \"Columns definition. Please refer to the code example for details.\",\n            control: false\n        },\n        data: {\n            description:\n                \"Data to display into DataTable body. Please refer to the code example for details.\",\n            control: false\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/DataTable/components/ColumnSorter.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const columnSorterVariants: (props?: ({
     sortable?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/DataTable/components/ColumnSorter.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { cn, cva } from "../../utils";
-const columnSorterVariants = cva("wby-flex wby-items-center wby-gap-xxs wby-cursor-auto", {
+import { cn, cva } from "../../utils.js";
+const columnSorterVariants = cva("flex items-center gap-xxs cursor-auto", {
   variants: {
     sortable: {
-      true: "wby-cursor-pointer"
+      true: "cursor-pointer"
     }
   }
 });

package/DataTable/components/ColumnSorter.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","columnSorterVariants","variants","sortable","true","ColumnSorter","className","children","props","createElement","Object","assign"],"sources":["ColumnSorter.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst columnSorterVariants = cva(\"wby-flex wby-items-center wby-gap-xxs wby-cursor-auto\", {\n    variants: {\n        sortable: {\n            true: \"wby-cursor-pointer\"\n        }\n    }\n});\n\ninterface ColumnSorterProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof columnSorterVariants> {}\n\nconst ColumnSorter = ({ className, children, sortable, ...props }: ColumnSorterProps) => {\n    return (\n        <div {...props} className={cn(columnSorterVariants({ sortable }), className)}>\n            {children}\n        </div>\n    );\n};\n\nexport { ColumnSorter };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,uDAAuD,EAAE;EACtFE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAMF,MAAMC,YAAY,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEJ,QAAQ;EAAE,GAAGK;AAAyB,CAAC,KAAK;EACrF,oBACIV,KAAA,CAAAW,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAEF,SAAS,EAAEP,EAAE,CAACE,oBAAoB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEG,SAAS;EAAE,IACxEC,QACA,CAAC;AAEd,CAAC;AAED,SAASF,YAAY","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","columnSorterVariants","variants","sortable","true","ColumnSorter","className","children","props","createElement","Object","assign"],"sources":["ColumnSorter.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst columnSorterVariants = cva(\"flex items-center gap-xxs cursor-auto\", {\n    variants: {\n        sortable: {\n            true: \"cursor-pointer\"\n        }\n    }\n});\n\ninterface ColumnSorterProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof columnSorterVariants> {}\n\nconst ColumnSorter = ({ className, children, sortable, ...props }: ColumnSorterProps) => {\n    return (\n        <div {...props} className={cn(columnSorterVariants({ sortable }), className)}>\n            {children}\n        </div>\n    );\n};\n\nexport { ColumnSorter };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,uCAAuC,EAAE;EACtEE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAMF,MAAMC,YAAY,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEJ,QAAQ;EAAE,GAAGK;AAAyB,CAAC,KAAK;EACrF,oBACIV,KAAA,CAAAW,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAEF,SAAS,EAAEP,EAAE,CAACE,oBAAoB,CAAC;MAAEE;IAAS,CAAC,CAAC,EAAEG,SAAS;EAAE,IACxEC,QACA,CAAC;AAEd,CAAC;AAED,SAASF,YAAY","ignoreList":[]}

package/DataTable/components/ColumnsVisibility.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from "react";
 import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
-import { IconButton } from "../../Button";
-import { Checkbox } from "../../Checkbox";
-import { DropdownMenu } from "../../DropdownMenu";
+import { IconButton } from "../../Button/index.js";
+import { Checkbox } from "../../Checkbox/index.js";
+import { DropdownMenu } from "../../DropdownMenu/index.js";
 export const ColumnsVisibility = props => {
   /**
    * `@tanstack/react-table` does not have a simple method to return the header component.

package/DataTable/components/ColumnsVisibility.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","ReactComponent","SettingsIcon","IconButton","Checkbox","DropdownMenu","ColumnsVisibility","props","getHeaderName","column","header","columnDef","id","options","columns","filter","getCanHide","map","onChange","toggleVisibility","getValue","getIsVisible","length","createElement","trigger","icon","variant","size","Label","text","option","Item","key","label","checked"],"sources":["ColumnsVisibility.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button\";\nimport { Checkbox } from \"~/Checkbox\";\nimport { DropdownMenu } from \"~/DropdownMenu\";\n\ninterface ColumnsVisibilityProps<T> {\n    columns: Column<T>[];\n}\n\ninterface Option {\n    id: string;\n    header: string;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T,>(props: ColumnsVisibilityProps<T>) => {\n    /**\n     * `@tanstack/react-table` does not have a simple method to return the header component.\n     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation\n     * since we don't have access to the header context.\n     */\n    const getHeaderName = useCallback((column: Column<T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            // @ts-expect-error\n            return header();\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    onChange: column.toggleVisibility,\n                    getValue: column.getIsVisible\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            trigger={<IconButton icon={<SettingsIcon />} variant={\"ghost\"} size={\"xs\"} />}\n        >\n            <DropdownMenu.Label text={\"Display columns\"} />\n            {options.map(option => {\n                return (\n                    <DropdownMenu.Item\n                        key={option.id}\n                        text={\n                            <Checkbox\n                                label={option.header}\n                                onChange={option.onChange}\n                                checked={option.getValue()}\n                            />\n                        }\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,cAAc,IAAIC,YAAY,QAAQ,4BAA4B;AAE3E,SAASC,UAAU;AACnB,SAASC,QAAQ;AACjB,SAASC,YAAY;AAarB,OAAO,MAAMC,iBAAiB,GAAQC,KAAgC,IAAK;EACvE;AACJ;AACA;AACA;AACA;EACI,MAAMC,aAAa,GAAGT,WAAW,CAAEU,MAAiB,IAAK;IACrD,MAAM;MAAEC;IAAO,CAAC,GAAGD,MAAM,CAACE,SAAS;IAEnC,IAAI,OAAOD,MAAM,KAAK,QAAQ,EAAE;MAC5B,OAAOA,MAAM;IACjB;IAEA,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;MAC9B;MACA,OAAOA,MAAM,CAAC,CAAC;IACnB;IAEA,OAAOD,MAAM,CAACG,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAiB,GAAGb,OAAO,CAAC,MAAM;IACpC,OAAOO,KAAK,CAACO,OAAO,CACfC,MAAM,CAACN,MAAM,IAAIA,MAAM,CAACO,UAAU,CAAC,CAAC,CAAC,CACrCC,GAAG,CAACR,MAAM,IAAI;MACX,OAAO;QACHG,EAAE,EAAEH,MAAM,CAACG,EAAE;QACbF,MAAM,EAAEF,aAAa,CAACC,MAAM,CAAC;QAC7BS,QAAQ,EAAET,MAAM,CAACU,gBAAgB;QACjCC,QAAQ,EAAEX,MAAM,CAACY;MACrB,CAAC;IACL,CAAC,CAAC;EACV,CAAC,EAAE,CAACd,KAAK,CAACO,OAAO,CAAC,CAAC;EAEnB,IAAID,OAAO,CAACS,MAAM,KAAK,CAAC,EAAE;IACtB,OAAO,IAAI;EACf;EAEA,oBACIxB,KAAA,CAAAyB,aAAA,CAAClB,YAAY;IACTmB,OAAO,eAAE1B,KAAA,CAAAyB,aAAA,CAACpB,UAAU;MAACsB,IAAI,eAAE3B,KAAA,CAAAyB,aAAA,CAACrB,YAAY,MAAE,CAAE;MAACwB,OAAO,EAAE,OAAQ;MAACC,IAAI,EAAE;IAAK,CAAE;EAAE,gBAE9E7B,KAAA,CAAAyB,aAAA,CAAClB,YAAY,CAACuB,KAAK;IAACC,IAAI,EAAE;EAAkB,CAAE,CAAC,EAC9ChB,OAAO,CAACI,GAAG,CAACa,MAAM,IAAI;IACnB,oBACIhC,KAAA,CAAAyB,aAAA,CAAClB,YAAY,CAAC0B,IAAI;MACdC,GAAG,EAAEF,MAAM,CAAClB,EAAG;MACfiB,IAAI,eACA/B,KAAA,CAAAyB,aAAA,CAACnB,QAAQ;QACL6B,KAAK,EAAEH,MAAM,CAACpB,MAAO;QACrBQ,QAAQ,EAAEY,MAAM,CAACZ,QAAS;QAC1BgB,OAAO,EAAEJ,MAAM,CAACV,QAAQ,CAAC;MAAE,CAC9B;IACJ,CACJ,CAAC;EAEV,CAAC,CACS,CAAC;AAEvB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","ReactComponent","SettingsIcon","IconButton","Checkbox","DropdownMenu","ColumnsVisibility","props","getHeaderName","column","header","columnDef","id","options","columns","filter","getCanHide","map","onChange","toggleVisibility","getValue","getIsVisible","length","createElement","trigger","icon","variant","size","Label","text","option","Item","key","label","checked"],"sources":["ColumnsVisibility.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\n\ninterface ColumnsVisibilityProps<T> {\n    columns: Column<T>[];\n}\n\ninterface Option {\n    id: string;\n    header: string;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T,>(props: ColumnsVisibilityProps<T>) => {\n    /**\n     * `@tanstack/react-table` does not have a simple method to return the header component.\n     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation\n     * since we don't have access to the header context.\n     */\n    const getHeaderName = useCallback((column: Column<T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            // @ts-expect-error\n            return header();\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    onChange: column.toggleVisibility,\n                    getValue: column.getIsVisible\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            trigger={<IconButton icon={<SettingsIcon />} variant={\"ghost\"} size={\"xs\"} />}\n        >\n            <DropdownMenu.Label text={\"Display columns\"} />\n            {options.map(option => {\n                return (\n                    <DropdownMenu.Item\n                        key={option.id}\n                        text={\n                            <Checkbox\n                                label={option.header}\n                                onChange={option.onChange}\n                                checked={option.getValue()}\n                            />\n                        }\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,cAAc,IAAIC,YAAY,QAAQ,4BAA4B;AAE3E,SAASC,UAAU;AACnB,SAASC,QAAQ;AACjB,SAASC,YAAY;AAarB,OAAO,MAAMC,iBAAiB,GAAQC,KAAgC,IAAK;EACvE;AACJ;AACA;AACA;AACA;EACI,MAAMC,aAAa,GAAGT,WAAW,CAAEU,MAAiB,IAAK;IACrD,MAAM;MAAEC;IAAO,CAAC,GAAGD,MAAM,CAACE,SAAS;IAEnC,IAAI,OAAOD,MAAM,KAAK,QAAQ,EAAE;MAC5B,OAAOA,MAAM;IACjB;IAEA,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;MAC9B;MACA,OAAOA,MAAM,CAAC,CAAC;IACnB;IAEA,OAAOD,MAAM,CAACG,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAiB,GAAGb,OAAO,CAAC,MAAM;IACpC,OAAOO,KAAK,CAACO,OAAO,CACfC,MAAM,CAACN,MAAM,IAAIA,MAAM,CAACO,UAAU,CAAC,CAAC,CAAC,CACrCC,GAAG,CAACR,MAAM,IAAI;MACX,OAAO;QACHG,EAAE,EAAEH,MAAM,CAACG,EAAE;QACbF,MAAM,EAAEF,aAAa,CAACC,MAAM,CAAC;QAC7BS,QAAQ,EAAET,MAAM,CAACU,gBAAgB;QACjCC,QAAQ,EAAEX,MAAM,CAACY;MACrB,CAAC;IACL,CAAC,CAAC;EACV,CAAC,EAAE,CAACd,KAAK,CAACO,OAAO,CAAC,CAAC;EAEnB,IAAID,OAAO,CAACS,MAAM,KAAK,CAAC,EAAE;IACtB,OAAO,IAAI;EACf;EAEA,oBACIxB,KAAA,CAAAyB,aAAA,CAAClB,YAAY;IACTmB,OAAO,eAAE1B,KAAA,CAAAyB,aAAA,CAACpB,UAAU;MAACsB,IAAI,eAAE3B,KAAA,CAAAyB,aAAA,CAACrB,YAAY,MAAE,CAAE;MAACwB,OAAO,EAAE,OAAQ;MAACC,IAAI,EAAE;IAAK,CAAE;EAAE,gBAE9E7B,KAAA,CAAAyB,aAAA,CAAClB,YAAY,CAACuB,KAAK;IAACC,IAAI,EAAE;EAAkB,CAAE,CAAC,EAC9ChB,OAAO,CAACI,GAAG,CAACa,MAAM,IAAI;IACnB,oBACIhC,KAAA,CAAAyB,aAAA,CAAClB,YAAY,CAAC0B,IAAI;MACdC,GAAG,EAAEF,MAAM,CAAClB,EAAG;MACfiB,IAAI,eACA/B,KAAA,CAAAyB,aAAA,CAACnB,QAAQ;QACL6B,KAAK,EAAEH,MAAM,CAACpB,MAAO;QACrBQ,QAAQ,EAAEY,MAAM,CAACZ,QAAS;QAC1BgB,OAAO,EAAEJ,MAAM,CAACV,QAAQ,CAAC;MAAE,CAC9B;IACJ,CACJ,CAAC;EAEV,CAAC,CACS,CAAC;AAEvB,CAAC","ignoreList":[]}

package/DataTable/components/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./ColumnSorter";
-export * from "./ColumnsVisibility";
+export * from "./ColumnSorter.js";
+export * from "./ColumnsVisibility.js";

package/DataTable/components/index.js

@@ -1,4 +1,4 @@
-export * from "./ColumnSorter";
-export * from "./ColumnsVisibility";
+export * from "./ColumnSorter.js";
+export * from "./ColumnsVisibility.js";
 
 //# sourceMappingURL=index.js.map

package/DataTable/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ColumnSorter\";\nexport * from \"./ColumnsVisibility\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ColumnSorter.js\";\nexport * from \"./ColumnsVisibility.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/DataTable/index.d.ts

@@ -1 +1 @@
-export * from "./DataTable";
+export * from "./DataTable.js";

package/DataTable/index.js

@@ -1,3 +1,3 @@
-export * from "./DataTable";
+export * from "./DataTable.js";
 
 //# sourceMappingURL=index.js.map

package/DataTable/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DataTable\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DataTable.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/DelayedOnChange/DelayedOnChange.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import isEqual from "lodash/isEqual";
+import isEqual from "lodash/isEqual.js";
 const emptyFunction = () => {
   return undefined;
 };

package/DelayedOnChange/DelayedOnChange.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","isEqual","emptyFunction","undefined","DelayedOnChange","children","other","firstMount","onChange","delay","value","initialValue","setValue","localTimeout","applyValue","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport isEqual from \"lodash/isEqual\";\n\nconst emptyFunction = (): undefined => {\n    return undefined;\n};\n\nexport interface ApplyValueCb<TValue> {\n    (value: TValue): void;\n}\n\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\n\nexport interface OnChangeCallable<TValue = any> {\n    (value: TValue, cb?: ApplyValueCb<TValue>): void;\n}\n\ninterface OnBlurCallable {\n    (ev: React.SyntheticEvent): void;\n}\n\ninterface OnKeyDownCallable {\n    (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\n\ninterface ChildrenCallableParams<TValue> {\n    value: TValue;\n    onChange: OnChangeCallable<TValue>;\n}\n\ninterface ChildrenCallable<TValue> {\n    (params: ChildrenCallableParams<TValue>): React.ReactElement;\n}\n\nexport interface DelayedOnChangeProps<TValue> {\n    value?: TValue;\n    delay?: number;\n    onChange?: OnChangeCallable<TValue>;\n    onBlur?: OnBlurCallable;\n    onKeyDown?: OnKeyDownCallable;\n    children: React.ReactNode | ChildrenCallable<TValue | undefined>;\n}\n\nexport const DelayedOnChange = <TValue = any>({\n    children,\n    ...other\n}: DelayedOnChangeProps<TValue>) => {\n    const firstMount = useRef(true);\n    const { onChange, delay = 400, value: initialValue } = other;\n    const [value, setValue] = useState<TValue | undefined>(initialValue);\n    // Sync state and props\n    useEffect(() => {\n        // Do not update local state, if the incoming value is the same as the local state.\n        // This is primarily an optimization for non-scalar values (objects).\n        if (isEqual(initialValue, value)) {\n            return;\n        }\n\n        setValue(initialValue);\n    }, [initialValue]);\n\n    const localTimeout = React.useRef<number | null>(null);\n\n    const applyValue = (value: TValue | undefined) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        if (!onChange) {\n            return;\n        }\n        onChange(value as NonNullable<TValue>);\n    };\n\n    const onChangeLocal = React.useCallback((value: TValue | undefined) => {\n        setValue(value);\n    }, []);\n\n    // this is fired upon change value state\n    const onValueStateChanged = (nextValue: TValue | undefined) => {\n        // We don't want to execute callbacks, if the value hasn't changed.\n        if (isEqual(nextValue, initialValue)) {\n            return;\n        }\n\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        localTimeout.current = setTimeout(() => applyValue(nextValue), delay) as unknown as number;\n    };\n\n    // need to clear the timeout when unmounting the component\n    useEffect(() => {\n        return () => {\n            if (!localTimeout.current) {\n                return;\n            }\n            clearTimeout(localTimeout.current);\n            localTimeout.current = null;\n        };\n    }, []);\n\n    useEffect(() => {\n        if (firstMount.current) {\n            firstMount.current = false;\n            return;\n        }\n\n        onValueStateChanged(value);\n    }, [value]);\n\n    const newProps = {\n        ...other,\n        value: value,\n        onChange: onChangeLocal\n    };\n\n    const renderProp =\n        typeof children === \"function\" ? (children as ChildrenCallable<TValue | undefined>) : null;\n    const child = renderProp\n        ? renderProp(newProps)\n        : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n    const props = { ...child.props };\n    const realOnKeyDown = props.onKeyDown || emptyFunction;\n    const realOnBlur = props.onBlur || emptyFunction;\n\n    // Need to apply value if input lost focus\n    const onBlur: OnBlurCallable = ev => {\n        if (!ev[\"persist\"]) {\n            return;\n        }\n        ev.persist();\n        applyValue((ev.target as HTMLInputElement).value as any as TValue);\n        realOnBlur(ev);\n    };\n\n    // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n    const onKeyDown: OnKeyDownCallable = ev => {\n        ev.persist();\n        if (ev.key === \"Tab\") {\n            applyValue((ev.target as HTMLInputElement).value as any as TValue);\n            realOnKeyDown(ev);\n        } else if (ev.key === \"Enter\") {\n            applyValue((ev.target as HTMLInputElement).value as any as TValue);\n            realOnKeyDown(ev);\n        } else {\n            realOnKeyDown(ev);\n        }\n    };\n\n    return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,OAAOC,OAAO,MAAM,gBAAgB;AAEpC,MAAMC,aAAa,GAAGA,CAAA,KAAiB;EACnC,OAAOC,SAAS;AACpB,CAAC;;AAMD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgCA,OAAO,MAAMC,eAAe,GAAGA,CAAe;EAC1CC,QAAQ;EACR,GAAGC;AACuB,CAAC,KAAK;EAChC,MAAMC,UAAU,GAAGR,MAAM,CAAC,IAAI,CAAC;EAC/B,MAAM;IAAES,QAAQ;IAAEC,KAAK,GAAG,GAAG;IAAEC,KAAK,EAAEC;EAAa,CAAC,GAAGL,KAAK;EAC5D,MAAM,CAACI,KAAK,EAAEE,QAAQ,CAAC,GAAGZ,QAAQ,CAAqBW,YAAY,CAAC;EACpE;EACAb,SAAS,CAAC,MAAM;IACZ;IACA;IACA,IAAIG,OAAO,CAACU,YAAY,EAAED,KAAK,CAAC,EAAE;MAC9B;IACJ;IAEAE,QAAQ,CAACD,YAAY,CAAC;EAC1B,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAME,YAAY,GAAGhB,KAAK,CAACE,MAAM,CAAgB,IAAI,CAAC;EAEtD,MAAMe,UAAU,GAAIJ,KAAyB,IAAK;IAC9CG,YAAY,CAACE,OAAO,IAAIC,YAAY,CAACH,YAAY,CAACE,OAAO,CAAC;IAC1DF,YAAY,CAACE,OAAO,GAAG,IAAI;IAC3B,IAAI,CAACP,QAAQ,EAAE;MACX;IACJ;IACAA,QAAQ,CAACE,KAA4B,CAAC;EAC1C,CAAC;EAED,MAAMO,aAAa,GAAGpB,KAAK,CAACqB,WAAW,CAAER,KAAyB,IAAK;IACnEE,QAAQ,CAACF,KAAK,CAAC;EACnB,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAMS,mBAAmB,GAAIC,SAA6B,IAAK;IAC3D;IACA,IAAInB,OAAO,CAACmB,SAAS,EAAET,YAAY,CAAC,EAAE;MAClC;IACJ;IAEAE,YAAY,CAACE,OAAO,IAAIC,YAAY,CAACH,YAAY,CAACE,OAAO,CAAC;IAC1DF,YAAY,CAACE,OAAO,GAAG,IAAI;IAC3BF,YAAY,CAACE,OAAO,GAAGM,UAAU,CAAC,MAAMP,UAAU,CAACM,SAAS,CAAC,EAAEX,KAAK,CAAsB;EAC9F,CAAC;;EAED;EACAX,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACT,IAAI,CAACe,YAAY,CAACE,OAAO,EAAE;QACvB;MACJ;MACAC,YAAY,CAACH,YAAY,CAACE,OAAO,CAAC;MAClCF,YAAY,CAACE,OAAO,GAAG,IAAI;IAC/B,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAENjB,SAAS,CAAC,MAAM;IACZ,IAAIS,UAAU,CAACQ,OAAO,EAAE;MACpBR,UAAU,CAACQ,OAAO,GAAG,KAAK;MAC1B;IACJ;IAEAI,mBAAmB,CAACT,KAAK,CAAC;EAC9B,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAMY,QAAQ,GAAG;IACb,GAAGhB,KAAK;IACRI,KAAK,EAAEA,KAAK;IACZF,QAAQ,EAAES;EACd,CAAC;EAED,MAAMM,UAAU,GACZ,OAAOlB,QAAQ,KAAK,UAAU,GAAIA,QAAQ,GAA4C,IAAI;EAC9F,MAAMmB,KAAK,GAAGD,UAAU,GAClBA,UAAU,CAACD,QAAQ,CAAC,gBACpBzB,KAAK,CAAC4B,YAAY,CAACpB,QAAQ,EAAmCiB,QAAQ,CAAC;EAE7E,MAAMI,KAAK,GAAG;IAAE,GAAGF,KAAK,CAACE;EAAM,CAAC;EAChC,MAAMC,aAAa,GAAGD,KAAK,CAACE,SAAS,IAAI1B,aAAa;EACtD,MAAM2B,UAAU,GAAGH,KAAK,CAACI,MAAM,IAAI5B,aAAa;;EAEhD;EACA,MAAM4B,MAAsB,GAAGC,EAAE,IAAI;IACjC,IAAI,CAACA,EAAE,CAAC,SAAS,CAAC,EAAE;MAChB;IACJ;IACAA,EAAE,CAACC,OAAO,CAAC,CAAC;IACZlB,UAAU,CAAEiB,EAAE,CAACE,MAAM,CAAsBvB,KAAsB,CAAC;IAClEmB,UAAU,CAACE,EAAE,CAAC;EAClB,CAAC;;EAED;EACA,MAAMH,SAA4B,GAAGG,EAAE,IAAI;IACvCA,EAAE,CAACC,OAAO,CAAC,CAAC;IACZ,IAAID,EAAE,CAACG,GAAG,KAAK,KAAK,EAAE;MAClBpB,UAAU,CAAEiB,EAAE,CAACE,MAAM,CAAsBvB,KAAsB,CAAC;MAClEiB,aAAa,CAACI,EAAE,CAAC;IACrB,CAAC,MAAM,IAAIA,EAAE,CAACG,GAAG,KAAK,OAAO,EAAE;MAC3BpB,UAAU,CAAEiB,EAAE,CAACE,MAAM,CAAsBvB,KAAsB,CAAC;MAClEiB,aAAa,CAACI,EAAE,CAAC;IACrB,CAAC,MAAM;MACHJ,aAAa,CAACI,EAAE,CAAC;IACrB;EACJ,CAAC;EAED,oBAAOlC,KAAK,CAAC4B,YAAY,CAACD,KAAK,EAAE;IAAE,GAAGE,KAAK;IAAEI,MAAM;IAAEF;EAAU,CAAC,CAAC;AACrE,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useRef","useState","isEqual","emptyFunction","undefined","DelayedOnChange","children","other","firstMount","onChange","delay","value","initialValue","setValue","localTimeout","applyValue","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport isEqual from \"lodash/isEqual.js\";\n\nconst emptyFunction = (): undefined => {\n    return undefined;\n};\n\nexport interface ApplyValueCb<TValue> {\n    (value: TValue): void;\n}\n\n/**\n * This component is used to wrap Input and Textarea components to optimize form re-render.\n * These 2 are the only components that trigger form model change on each character input.\n * This means, whenever you type a letter an entire form re-renders.\n * On complex forms you will feel and see a significant delay if this component is not used.\n *\n * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when\n * a user stops typing for given period of time (400ms by default).\n */\n\nexport interface OnChangeCallable<TValue = any> {\n    (value: TValue, cb?: ApplyValueCb<TValue>): void;\n}\n\ninterface OnBlurCallable {\n    (ev: React.SyntheticEvent): void;\n}\n\ninterface OnKeyDownCallable {\n    (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\n\ninterface ChildrenCallableParams<TValue> {\n    value: TValue;\n    onChange: OnChangeCallable<TValue>;\n}\n\ninterface ChildrenCallable<TValue> {\n    (params: ChildrenCallableParams<TValue>): React.ReactElement;\n}\n\nexport interface DelayedOnChangeProps<TValue> {\n    value?: TValue;\n    delay?: number;\n    onChange?: OnChangeCallable<TValue>;\n    onBlur?: OnBlurCallable;\n    onKeyDown?: OnKeyDownCallable;\n    children: React.ReactNode | ChildrenCallable<TValue | undefined>;\n}\n\nexport const DelayedOnChange = <TValue = any>({\n    children,\n    ...other\n}: DelayedOnChangeProps<TValue>) => {\n    const firstMount = useRef(true);\n    const { onChange, delay = 400, value: initialValue } = other;\n    const [value, setValue] = useState<TValue | undefined>(initialValue);\n    // Sync state and props\n    useEffect(() => {\n        // Do not update local state, if the incoming value is the same as the local state.\n        // This is primarily an optimization for non-scalar values (objects).\n        if (isEqual(initialValue, value)) {\n            return;\n        }\n\n        setValue(initialValue);\n    }, [initialValue]);\n\n    const localTimeout = React.useRef<number | null>(null);\n\n    const applyValue = (value: TValue | undefined) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        if (!onChange) {\n            return;\n        }\n        onChange(value as NonNullable<TValue>);\n    };\n\n    const onChangeLocal = React.useCallback((value: TValue | undefined) => {\n        setValue(value);\n    }, []);\n\n    // this is fired upon change value state\n    const onValueStateChanged = (nextValue: TValue | undefined) => {\n        // We don't want to execute callbacks, if the value hasn't changed.\n        if (isEqual(nextValue, initialValue)) {\n            return;\n        }\n\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        localTimeout.current = setTimeout(() => applyValue(nextValue), delay) as unknown as number;\n    };\n\n    // need to clear the timeout when unmounting the component\n    useEffect(() => {\n        return () => {\n            if (!localTimeout.current) {\n                return;\n            }\n            clearTimeout(localTimeout.current);\n            localTimeout.current = null;\n        };\n    }, []);\n\n    useEffect(() => {\n        if (firstMount.current) {\n            firstMount.current = false;\n            return;\n        }\n\n        onValueStateChanged(value);\n    }, [value]);\n\n    const newProps = {\n        ...other,\n        value: value,\n        onChange: onChangeLocal\n    };\n\n    const renderProp =\n        typeof children === \"function\" ? (children as ChildrenCallable<TValue | undefined>) : null;\n    const child = renderProp\n        ? renderProp(newProps)\n        : React.cloneElement(children as unknown as React.ReactElement, newProps);\n\n    const props = { ...child.props };\n    const realOnKeyDown = props.onKeyDown || emptyFunction;\n    const realOnBlur = props.onBlur || emptyFunction;\n\n    // Need to apply value if input lost focus\n    const onBlur: OnBlurCallable = ev => {\n        if (!ev[\"persist\"]) {\n            return;\n        }\n        ev.persist();\n        applyValue((ev.target as HTMLInputElement).value as any as TValue);\n        realOnBlur(ev);\n    };\n\n    // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n    const onKeyDown: OnKeyDownCallable = ev => {\n        ev.persist();\n        if (ev.key === \"Tab\") {\n            applyValue((ev.target as HTMLInputElement).value as any as TValue);\n            realOnKeyDown(ev);\n        } else if (ev.key === \"Enter\") {\n            applyValue((ev.target as HTMLInputElement).value as any as TValue);\n            realOnKeyDown(ev);\n        } else {\n            realOnKeyDown(ev);\n        }\n    };\n\n    return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n"],"mappings":"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","ignoreList":[]}

package/DelayedOnChange/index.d.ts

@@ -1 +1 @@
-export * from "./DelayedOnChange";
+export * from "./DelayedOnChange.js";

package/DelayedOnChange/index.js

@@ -1,3 +1,3 @@
-export * from "./DelayedOnChange";
+export * from "./DelayedOnChange.js";
 
 //# sourceMappingURL=index.js.map

package/DelayedOnChange/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DelayedOnChange\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DelayedOnChange.js\";\n"],"mappings":"AAAA","ignoreList":[]}