@webiny/ui 5.39.0-beta.0 → 5.39.0-beta.2

package/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_dataTable","_reactTable","_Checkbox","_Skeleton","_styled","defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","_objectSpread3","default","id","defaults","column","cell","className","_column$enableResizin","enableResizing","_column$enableSorting","enableSorting","header","meta","_column$size","size","accessorKey","info","row","original","getValue","isSelectable","select","_ref","table","createElement","Checkbox","indeterminate","getIsSomeRowsSelected","value","getIsAllRowsSelected","onChange","e","toggleAllPageRowsSelected","getCanSelect","Fragment","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","concat","_toConsumableArray2","Skeleton","defineData","data","Array","fill","ColumnDirection","_ref2","direction","ColumnDirectionWrapper","ColumnDirectionIcon","typedMemo","memo","TableCell","_ref3","DataTableCell","assign","columnDef","style","width","getSize","flexRender","getContext","MemoTableCell","TableRow","_ref4","selected","DataTableRow","getVisibleCells","MemoTableRow","DataTable","_ref5","stickyColumns","stickyRows","bordered","sorting","onSortingChange","isRowSelectable","_ref5$canSelectAllRow","_ref5$selectedRows","selectedRows","initialSorting","rowSelection","reduce","acc","item","recordIndex","findIndex","rec","_defineProperty2","onRowSelectionChange","updater","newSelection","toggledRows","filter","x","length","parseInt","selection","tableSorting","isArray","useReactTable","enableColumnResizing","columnResizeMode","getCoreRowModel","getSortedRowModel","state","enableRowSelection","manualSorting","Table","DataTableContent","DataTableHead","getHeaderGroups","headerGroup","headers","_ref6","isPlaceholder","colSpan","getResizeHandler","TableHeadCell","ColumnHeaderWrapper","onClick","getToggleSortingHandler","sortable","getCanSort","getIsSorted","undefined","getCanResize","Resizer","onMouseDown","onTouchStart","isResizing","getIsResizing","DataTableBody","getRowModel","rows","exports"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { memo, ReactElement, useMemo } from \"react\";\n\nimport {\n    DataTableContent,\n    DataTableHead,\n    DataTableRow,\n    DataTableBody,\n    DataTableCell,\n    DataTableCellProps\n} from \"@rmwc/data-table\";\n\nimport {\n    flexRender,\n    getCoreRowModel,\n    useReactTable,\n    ColumnDef,\n    getSortedRowModel,\n    OnChangeFn,\n    SortingState,\n    RowSelectionState,\n    Row,\n    Cell\n} from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport {\n    ColumnDirectionIcon,\n    ColumnDirectionWrapper,\n    ColumnHeaderWrapper,\n    Resizer,\n    Table,\n    TableHeadCell\n} from \"./styled\";\n\ninterface Column<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     * Additional props to add to both header and row cells. Refer to RMWC documentation.\n     */\n    meta?: DataTableCellProps;\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\nexport type Columns<T> = {\n    [P in keyof T]?: Column<T>;\n};\n\nexport type DefaultData = {\n    id: string;\n    /*\n     * Define if a specific row can be selected.\n     */\n    selectable?: boolean;\n};\n\nexport type Sorting = SortingState;\n\nexport type OnSortingChange = OnChangeFn<Sorting>;\n\ninterface Props<T> {\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: Columns<T>;\n    /**\n     * Data to display into DataTable body.\n     */\n    data: T[];\n    /**\n     * Callback that is called to determine if the row is selectable.\n     */\n    isRowSelectable?: (row: Row<T>) => boolean;\n    /**\n     * Render the skeleton state at the initial data loading.\n     */\n    loadingInitial?: boolean;\n    /**\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: T[]) => void;\n    /**\n     * Callback that receives the toggled row.\n     */\n    onToggleRow?: (row: T) => void;\n    /**\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnSortingChange;\n    /**\n     * Selected rows.\n     */\n    selectedRows?: T[];\n    /**\n     * Sorting state.\n     */\n    sorting?: Sorting;\n    /**\n     * Initial sorting state.\n     */\n    initialSorting?: Sorting;\n    /**\n     * The number of columns to affix to the side of the table when scrolling.\n     */\n    stickyColumns?: number;\n    /**\n     * The number of rows to affix to the top of the table when scrolling.\n     */\n    stickyRows?: number;\n}\n\nexport interface ColumnDirectionProps {\n    direction?: \"asc\" | \"desc\";\n}\n\ninterface DefineColumnsOptions<T> {\n    canSelectAllRows: boolean;\n    onSelectRow?: Props<T>[\"onSelectRow\"];\n    onToggleRow: Props<T>[\"onToggleRow\"];\n    loadingInitial: Props<T>[\"loadingInitial\"];\n}\n\nconst defineColumns = <T,>(\n    columns: Props<T>[\"columns\"],\n    options: DefineColumnsOptions<T>\n): ColumnDef<T>[] => {\n    const { canSelectAllRows, onSelectRow, onToggleRow, loadingInitial } = 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                enableResizing = true,\n                enableSorting = false,\n                header,\n                id,\n                meta,\n                size = 200\n            } = column;\n\n            return {\n                accessorKey: id,\n                header: () => header,\n                cell: info => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(info.row.original);\n                    } else {\n                        return info.getValue();\n                    }\n                },\n                enableSorting,\n                meta: {\n                    ...meta,\n                    className\n                },\n                enableResizing,\n                size\n            };\n        });\n\n        const isSelectable = onToggleRow || onSelectRow;\n\n        const select: ColumnDef<T>[] = isSelectable\n            ? [\n                  {\n                      id: \"datatable-select-column\",\n                      header: ({ table }) => {\n                          if (!canSelectAllRows) {\n                              return null;\n                          }\n\n                          return (\n                              !loadingInitial && (\n                                  <Checkbox\n                                      indeterminate={table.getIsSomeRowsSelected()}\n                                      value={table.getIsAllRowsSelected()}\n                                      onChange={e => table.toggleAllPageRowsSelected(e)}\n                                  />\n                              )\n                          );\n                      },\n                      cell: info => {\n                          if (!info.row.getCanSelect()) {\n                              return <></>;\n                          }\n                          return (\n                              <Checkbox\n                                  indeterminate={info.row.getIsSomeSelected()}\n                                  value={info.row.getIsSelected()}\n                                  onChange={info.row.getToggleSelectedHandler()}\n                              />\n                          );\n                      },\n                      meta: {\n                          hasFormControl: true\n                      },\n                      enableSorting: false,\n                      enableResizing: false,\n                      size: 56\n                  }\n              ]\n            : [];\n\n        return [...select, ...defaults].map(column => {\n            if (loadingInitial) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, onToggleRow, loadingInitial]);\n};\n\nconst defineData = <T,>(\n    data: Props<T>[\"data\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): T[] => {\n    return useMemo(() => {\n        if (loadingInitial) {\n            return Array(10).fill({});\n        }\n        return data;\n    }, [data, loadingInitial]);\n};\n\nconst ColumnDirection = ({ direction }: ColumnDirectionProps): ReactElement | null => {\n    if (direction) {\n        return (\n            <ColumnDirectionWrapper>\n                <ColumnDirectionIcon direction={direction} />\n            </ColumnDirectionWrapper>\n        );\n    }\n\n    return null;\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T> {\n    cell: Cell<T, unknown>;\n}\n\nconst TableCell = <T,>({ cell }: TableCellProps<T>) => (\n    <DataTableCell {...cell.column.columnDef.meta} style={{ width: cell.column.getSize() }}>\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </DataTableCell>\n);\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T> {\n    row: Row<T>;\n    selected: boolean;\n}\n\nconst TableRow = <T,>({ row, selected }: TableRowProps<T>) => {\n    return (\n        <DataTableRow selected={selected}>\n            {row.getVisibleCells().map(cell => (\n                <MemoTableCell<T> key={cell.id} cell={cell} />\n            ))}\n        </DataTableRow>\n    );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\nexport const DataTable = <T extends Object & DefaultData>({\n    data,\n    columns,\n    onSelectRow,\n    onToggleRow,\n    loadingInitial,\n    stickyColumns,\n    stickyRows,\n    bordered,\n    sorting,\n    onSortingChange,\n    isRowSelectable,\n    canSelectAllRows = true,\n    selectedRows = [],\n    initialSorting\n}: Props<T>) => {\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 table = useReactTable({\n        data: defineData(data, loadingInitial),\n        columns: defineColumns(columns, {\n            canSelectAllRows,\n            onSelectRow,\n            onToggleRow,\n            loadingInitial\n        }),\n        enableColumnResizing: true,\n        columnResizeMode: \"onChange\",\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        state: {\n            rowSelection,\n            sorting: tableSorting\n        },\n        enableRowSelection: isRowSelectable,\n        onRowSelectionChange,\n        enableSorting: !!onSortingChange,\n        manualSorting: true,\n        onSortingChange\n    });\n\n    return (\n        <Table stickyColumns={stickyColumns} stickyRows={stickyRows} bordered={bordered}>\n            <DataTableContent>\n                <DataTableHead>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <DataTableRow key={headerGroup.id}>\n                            {headerGroup.headers.map(\n                                ({\n                                    id,\n                                    isPlaceholder,\n                                    column,\n                                    getContext,\n                                    colSpan,\n                                    getSize,\n                                    getResizeHandler\n                                }) => (\n                                    <TableHeadCell\n                                        key={id}\n                                        {...column.columnDef.meta}\n                                        colSpan={colSpan}\n                                        style={{ width: getSize() }}\n                                    >\n                                        {isPlaceholder ? null : (\n                                            <ColumnHeaderWrapper\n                                                onClick={column.getToggleSortingHandler()}\n                                                sortable={column.getCanSort()}\n                                            >\n                                                {flexRender(column.columnDef.header, getContext())}\n                                                <ColumnDirection\n                                                    direction={column.getIsSorted() || undefined}\n                                                />\n                                            </ColumnHeaderWrapper>\n                                        )}\n                                        {column.getCanResize() && (\n                                            <Resizer\n                                                onMouseDown={getResizeHandler()}\n                                                onTouchStart={getResizeHandler()}\n                                                isResizing={column.getIsResizing()}\n                                            />\n                                        )}\n                                    </TableHeadCell>\n                                )\n                            )}\n                        </DataTableRow>\n                    ))}\n                </DataTableHead>\n                <DataTableBody>\n                    {table.getRowModel().rows.map(row => (\n                        <MemoTableRow<T>\n                            key={row.original.id || row.id}\n                            row={row}\n                            selected={row.getIsSelected()}\n                        />\n                    ))}\n                </DataTableBody>\n            </DataTableContent>\n        </Table>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_dataTable","_reactTable","_Checkbox","_Skeleton","_ColumnsVisibility","_styled","defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","_objectSpread3","default","id","defaults","column","cell","className","_column$enableHiding","enableHiding","_column$enableResizin","enableResizing","_column$enableSorting","enableSorting","header","meta","_column$size","size","accessorKey","info","row","original","getValue","isSelectable","select","_ref","table","createElement","Checkbox","indeterminate","getIsSomeRowsSelected","value","getIsAllRowsSelected","onChange","e","toggleAllPageRowsSelected","getCanSelect","Fragment","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","concat","_toConsumableArray2","Skeleton","defineData","data","Array","fill","ColumnDirection","_ref2","direction","ColumnDirectionWrapper","ColumnDirectionIcon","typedMemo","memo","TableCell","_ref3","getColumnWidth","width","DataTableCell","assign","columnDef","style","maxWidth","flexRender","getContext","MemoTableCell","TableRow","_ref4","selected","cells","DataTableRow","MemoTableRow","DataTable","_ref5","stickyColumns","stickyRows","bordered","sorting","columnVisibility","onColumnVisibilityChange","onSortingChange","isRowSelectable","_ref5$canSelectAllRow","_ref5$selectedRows","selectedRows","initialSorting","tableRef","useRef","_useState","useState","_useState2","_slicedToArray2","tableWidth","setTableWidth","useEffect","updateElementWidth","current","clientWidth","window","addEventListener","removeEventListener","rowSelection","reduce","acc","item","recordIndex","findIndex","rec","_defineProperty2","onRowSelectionChange","updater","newSelection","toggledRows","filter","x","length","parseInt","selection","tableSorting","isArray","useReactTable","enableColumnResizing","columnResizeMode","getCoreRowModel","getSortedRowModel","state","enableRowSelection","manualSorting","useCallback","getCanResize","getSize","tableSize","getTotalSize","columnSize","Math","ceil","ref","Table","DataTableContent","DataTableHead","getHeaderGroups","headerGroup","headers","index","isLastCell","TableHeadCell","colSpan","isPlaceholder","ColumnHeaderWrapper","onClick","getToggleSortingHandler","sortable","getCanSort","getIsSorted","undefined","ColumnsVisibility","getAllColumns","Resizer","onMouseDown","getResizeHandler","onTouchStart","isResizing","getIsResizing","DataTableBody","getRowModel","rows","getVisibleCells","exports"],"sources":["DataTable.tsx"],"sourcesContent":["import React, {\n    ReactElement,\n    memo,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState\n} from \"react\";\n\nimport {\n    DataTableBody,\n    DataTableCellProps,\n    DataTableContent,\n    DataTableHead,\n    DataTableRow\n} from \"@rmwc/data-table\";\n\nimport {\n    Cell,\n    Column as DefaultColumn,\n    ColumnDef,\n    OnChangeFn,\n    Row,\n    RowSelectionState,\n    SortingState,\n    VisibilityState,\n    flexRender,\n    getCoreRowModel,\n    getSortedRowModel,\n    useReactTable\n} from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\nimport { ColumnDirectionProps } from \"~/DataTable/ColumnDirection\";\nimport { ColumnsVisibility } from \"~/DataTable/ColumnsVisibility\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport {\n    ColumnDirectionIcon,\n    ColumnDirectionWrapper,\n    ColumnHeaderWrapper,\n    DataTableCell,\n    Resizer,\n    Table,\n    TableHeadCell\n} from \"./styled\";\n\nexport interface Column<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     * Additional props to add to both header and row cells. Refer to RMWC documentation.\n     */\n    meta?: DataTableCellProps;\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\nexport type Columns<T> = {\n    [P in keyof T]?: Column<T>;\n};\n\nexport type DefaultData = {\n    id: string;\n    /*\n     * Define if a specific row can be selected.\n     */\n    $selectable?: boolean;\n};\n\nexport type TableRow<T> = Row<DefaultData & T>;\n\nexport type Sorting = SortingState;\n\nexport type OnSortingChange = OnChangeFn<Sorting>;\n\nexport type ColumnVisibility = VisibilityState;\n\nexport type OnColumnVisibilityChange = OnChangeFn<ColumnVisibility>;\n\ninterface Props<T> {\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: Columns<T>;\n    /**\n     * The column visibility state.\n     */\n    columnVisibility?: ColumnVisibility;\n    /**\n     * Callback that receives current column visibility state.\n     */\n    onColumnVisibilityChange?: OnColumnVisibilityChange;\n    /**\n     * Data to display into DataTable body.\n     */\n    data: T[];\n    /**\n     * Callback that is called to determine if the row is selectable.\n     */\n    isRowSelectable?: (row: Row<T>) => boolean;\n    /**\n     * Render the skeleton state at the initial data loading.\n     */\n    loadingInitial?: boolean;\n    /**\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: T[]) => void;\n    /**\n     * Callback that receives the toggled row.\n     */\n    onToggleRow?: (row: T) => void;\n    /**\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnSortingChange;\n    /**\n     * Selected rows.\n     */\n    selectedRows?: T[];\n    /**\n     * Sorting state.\n     */\n    sorting?: Sorting;\n    /**\n     * Initial sorting state.\n     */\n    initialSorting?: Sorting;\n    /**\n     * The number of columns to affix to the side of the table when scrolling.\n     */\n    stickyColumns?: number;\n    /**\n     * The number of rows to affix to the top of the table when scrolling.\n     */\n    stickyRows?: number;\n}\n\ninterface DefineColumnsOptions<T> {\n    canSelectAllRows: boolean;\n    onSelectRow?: Props<T>[\"onSelectRow\"];\n    onToggleRow: Props<T>[\"onToggleRow\"];\n    loadingInitial: Props<T>[\"loadingInitial\"];\n}\n\nconst defineColumns = <T,>(\n    columns: Props<T>[\"columns\"],\n    options: DefineColumnsOptions<T>\n): ColumnDef<T>[] => {\n    const { canSelectAllRows, onSelectRow, onToggleRow, loadingInitial } = 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                meta,\n                size = 100\n            } = column;\n\n            return {\n                id,\n                accessorKey: id,\n                header: () => header,\n                cell: info => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(info.row.original);\n                    } else {\n                        return info.getValue() || null;\n                    }\n                },\n                enableSorting,\n                meta: {\n                    ...meta,\n                    className\n                },\n                enableResizing,\n                size,\n                enableHiding\n            };\n        });\n\n        const isSelectable = onToggleRow || onSelectRow;\n\n        const select: ColumnDef<T>[] = isSelectable\n            ? [\n                  {\n                      id: \"datatable-select-column\",\n                      header: ({ table }) => {\n                          if (!canSelectAllRows) {\n                              return null;\n                          }\n\n                          return (\n                              !loadingInitial && (\n                                  <Checkbox\n                                      indeterminate={table.getIsSomeRowsSelected()}\n                                      value={table.getIsAllRowsSelected()}\n                                      onChange={e => table.toggleAllPageRowsSelected(e)}\n                                  />\n                              )\n                          );\n                      },\n                      cell: info => {\n                          if (!info.row.getCanSelect()) {\n                              return <></>;\n                          }\n                          return (\n                              <Checkbox\n                                  indeterminate={info.row.getIsSomeSelected()}\n                                  value={info.row.getIsSelected()}\n                                  onChange={info.row.getToggleSelectedHandler()}\n                              />\n                          );\n                      },\n                      meta: {\n                          hasFormControl: true\n                      },\n                      enableSorting: false,\n                      enableResizing: false,\n                      enableHiding: false,\n                      size: 56\n                  }\n              ]\n            : [];\n\n        return [...select, ...defaults].map(column => {\n            if (loadingInitial) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, onToggleRow, loadingInitial]);\n};\n\nconst defineData = <T,>(\n    data: Props<T>[\"data\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): T[] => {\n    if (loadingInitial) {\n        return Array(10).fill({});\n    }\n    return data;\n};\n\nconst ColumnDirection = ({ direction }: ColumnDirectionProps): ReactElement | null => {\n    if (direction) {\n        return (\n            <ColumnDirectionWrapper>\n                <ColumnDirectionIcon direction={direction} />\n            </ColumnDirectionWrapper>\n        );\n    }\n\n    return null;\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T> {\n    cell: Cell<T, unknown>;\n    getColumnWidth: (column: DefaultColumn<T>) => number;\n    selected: boolean;\n}\n\nconst TableCell = <T,>({ cell, getColumnWidth }: TableCellProps<T>) => {\n    const width = getColumnWidth(cell.column);\n\n    return (\n        <DataTableCell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </DataTableCell>\n    );\n};\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T> {\n    selected: boolean;\n    cells: Cell<T, unknown>[];\n    getColumnWidth: (column: DefaultColumn<T>) => number;\n}\n\nconst TableRow = <T,>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {\n    return (\n        <DataTableRow selected={selected}>\n            {cells.map(cell => (\n                <MemoTableCell<T>\n                    key={cell.id}\n                    cell={cell}\n                    getColumnWidth={getColumnWidth}\n                    selected={selected}\n                />\n            ))}\n        </DataTableRow>\n    );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\nexport const DataTable = <T extends Record<string, any> & DefaultData>({\n    data,\n    columns,\n    onSelectRow,\n    onToggleRow,\n    loadingInitial,\n    stickyColumns,\n    stickyRows,\n    bordered,\n    sorting,\n    columnVisibility,\n    onColumnVisibilityChange,\n    onSortingChange,\n    isRowSelectable,\n    canSelectAllRows = true,\n    selectedRows = [],\n    initialSorting\n}: Props<T>) => {\n    const tableRef = useRef<HTMLDivElement>(null);\n    const [tableWidth, setTableWidth] = useState(1);\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 table = useReactTable({\n        data: defineData(data, loadingInitial),\n        columns: defineColumns(columns, {\n            canSelectAllRows,\n            onSelectRow,\n            onToggleRow,\n            loadingInitial\n        }),\n        enableColumnResizing: true,\n        columnResizeMode: \"onChange\",\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        state: {\n            rowSelection,\n            sorting: tableSorting,\n            columnVisibility\n        },\n        enableRowSelection: isRowSelectable,\n        onRowSelectionChange,\n        enableSorting: !!onSortingChange,\n        manualSorting: true,\n        onSortingChange,\n        enableHiding: !!onColumnVisibilityChange,\n        onColumnVisibilityChange\n    });\n\n    const getColumnWidth = useCallback(\n        (column: DefaultColumn<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    return (\n        <div ref={tableRef}>\n            <Table stickyColumns={stickyColumns} stickyRows={stickyRows} bordered={bordered}>\n                <DataTableContent>\n                    <DataTableHead>\n                        {table.getHeaderGroups().map(headerGroup => (\n                            <DataTableRow 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                                        <TableHeadCell\n                                            key={header.id}\n                                            {...header.column.columnDef.meta}\n                                            colSpan={header.colSpan}\n                                            style={{ width, maxWidth: width }}\n                                        >\n                                            {header.isPlaceholder ? null : (\n                                                <ColumnHeaderWrapper\n                                                    onClick={header.column.getToggleSortingHandler()}\n                                                    sortable={header.column.getCanSort()}\n                                                    isLastCell={isLastCell}\n                                                >\n                                                    {flexRender(\n                                                        header.column.columnDef.header,\n                                                        header.getContext()\n                                                    )}\n                                                    <ColumnDirection\n                                                        direction={\n                                                            header.column.getIsSorted() || undefined\n                                                        }\n                                                    />\n                                                    {isLastCell && (\n                                                        <ColumnsVisibility\n                                                            columns={table.getAllColumns()}\n                                                        />\n                                                    )}\n                                                </ColumnHeaderWrapper>\n                                            )}\n                                            {header.column.getCanResize() && (\n                                                <Resizer\n                                                    onMouseDown={header.getResizeHandler()}\n                                                    onTouchStart={header.getResizeHandler()}\n                                                    isResizing={header.column.getIsResizing()}\n                                                />\n                                            )}\n                                        </TableHeadCell>\n                                    );\n                                })}\n                            </DataTableRow>\n                        ))}\n                    </DataTableHead>\n                    <DataTableBody>\n                        {table.getRowModel().rows.map(row => (\n                            <MemoTableRow<T>\n                                key={row.original.id || row.id}\n                                cells={row.getVisibleCells()}\n                                selected={row.getIsSelected()}\n                                getColumnWidth={getColumnWidth}\n                            />\n                        ))}\n                    </DataTableBody>\n                </DataTableContent>\n            </Table>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/DataTable/styled.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="web" />
-import { DataTableProps, DataTableHeadCellProps } from "@rmwc/data-table";
-import { ColumnDirectionProps } from "./DataTable";
 import { CSSProperties } from "react";
+import { DataTableProps, DataTableHeadCellProps, DataTableCellProps } from "@rmwc/data-table";
+import { ColumnDirectionProps } from "./ColumnDirection";
 interface TableProps extends DataTableProps {
     bordered?: boolean;
 }
@@ -22,8 +21,15 @@ interface TableHeadCell extends DataTableHeadCellProps {
 export declare const TableHeadCell: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
 } & TableHeadCell, {}, {}>;
+interface DataTableCell extends DataTableCellProps {
+    style?: CSSProperties;
+}
+export declare const DataTableCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+} & DataTableCell, {}, {}>;
 interface ColumnHeaderWrapperProps {
     sortable: boolean;
+    isLastCell: boolean;
 }
 export declare const ColumnHeaderWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -40,4 +46,11 @@ export declare const ColumnDirectionIcon: import("@emotion/styled").StyledCompon
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & ColumnDirectionProps, {}, {}>;
+export declare const ColumnsVisibilityMenuHeader: import("@emotion/styled").StyledComponent<import("../Typography/Typography").TypographyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ColumnsVisibilityMenuItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/DataTable/styled.js

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableHeadCell = exports.Table = exports.Resizer = exports.ColumnHeaderWrapper = exports.ColumnDirectionWrapper = exports.ColumnDirectionIcon = void 0;
+exports.TableHeadCell = exports.Table = exports.Resizer = exports.DataTableCell = exports.ColumnsVisibilityMenuItem = exports.ColumnsVisibilityMenuHeader = exports.ColumnHeaderWrapper = exports.ColumnDirectionWrapper = exports.ColumnDirectionIcon = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _arrow_downward = require("@material-design-icons/svg/outlined/arrow_downward.svg");
 var _dataTable = require("@rmwc/data-table");
+var _Typography = require("../Typography");
 var Table = /*#__PURE__*/(0, _styled.default)(_dataTable.DataTable, {
   label: "Table",
   target: "er5nqo40"
@@ -27,26 +28,43 @@ exports.Resizer = Resizer;
 var TableHeadCell = /*#__PURE__*/(0, _styled.default)(_dataTable.DataTableHeadCell, {
   label: "TableHeadCell",
   target: "er5nqo42"
-})("position:relative;&:hover ", Resizer, "{opacity:1;}");
+})("position:relative;width:auto;&:hover ", Resizer, "{opacity:1;}");
 exports.TableHeadCell = TableHeadCell;
+var DataTableCell = /*#__PURE__*/(0, _styled.default)(_dataTable.DataTableCell, {
+  label: "DataTableCell",
+  target: "er5nqo43"
+})("white-space:nowrap;overflow:hidden;text-overflow:ellipsis;");
+exports.DataTableCell = DataTableCell;
 var ColumnHeaderWrapper = /*#__PURE__*/(0, _styled.default)("div", {
   label: "ColumnHeaderWrapper",
-  target: "er5nqo43"
+  target: "er5nqo44"
 })("cursor:", function (props) {
   return props.sortable ? "pointer" : "cursor";
-}, ";display:flex;align-items:center;justify-content:start;");
+}, ";display:flex;align-items:center;justify-content:", function (props) {
+  return props.isLastCell ? "flex-end" : "start";
+}, ";");
 exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
 var ColumnDirectionWrapper = /*#__PURE__*/(0, _styled.default)("span", {
   label: "ColumnDirectionWrapper",
-  target: "er5nqo44"
+  target: "er5nqo45"
 })("display:inline-flex;align-items:center;justify-content:center;height:16px;width:16px;margin:0 0 0 4px;");
 exports.ColumnDirectionWrapper = ColumnDirectionWrapper;
 var ColumnDirectionIcon = /*#__PURE__*/(0, _styled.default)(_arrow_downward.ReactComponent, {
   label: "ColumnDirectionIcon",
-  target: "er5nqo45"
+  target: "er5nqo46"
 })("transform:", function (props) {
   return props.direction === "asc" ? "rotate(180deg)" : "rotate(0deg)";
 }, ";");
 exports.ColumnDirectionIcon = ColumnDirectionIcon;
+var ColumnsVisibilityMenuHeader = /*#__PURE__*/(0, _styled.default)(_Typography.Typography, {
+  label: "ColumnsVisibilityMenuHeader",
+  target: "er5nqo47"
+})("padding:4px 16px;font-weight:600;");
+exports.ColumnsVisibilityMenuHeader = ColumnsVisibilityMenuHeader;
+var ColumnsVisibilityMenuItem = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "ColumnsVisibilityMenuItem",
+  target: "er5nqo48"
+})("padding:0 16px;");
+exports.ColumnsVisibilityMenuItem = ColumnsVisibilityMenuItem;
 
 //# sourceMappingURL=styled.js.map

package/DataTable/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["_styled","_interopRequireDefault","require","_arrow_downward","_dataTable","Table","styled","RmwcDataTable","label","target","props","bordered","exports","Resizer","isResizing","TableHeadCell","RmwcDataTableHeadCell","ColumnHeaderWrapper","sortable","ColumnDirectionWrapper","ColumnDirectionIcon","ArrowDown","direction"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { ReactComponent as ArrowDown } from \"@material-design-icons/svg/outlined/arrow_downward.svg\";\nimport {\n    DataTable as RmwcDataTable,\n    DataTableHeadCell as RmwcDataTableHeadCell,\n    DataTableProps,\n    DataTableHeadCellProps\n} from \"@rmwc/data-table\";\nimport { ColumnDirectionProps } from \"~/DataTable/DataTable\";\nimport { CSSProperties } from \"react\";\n\ninterface TableProps extends DataTableProps {\n    bordered?: boolean;\n}\n\nexport const Table = styled(RmwcDataTable)<TableProps>`\n    overflow-y: hidden;\n    overflow-x: scroll;\n    max-width: 100%;\n    display: block !important;\n    border-width: ${props => (props.bordered ? \"1px\" : \"0px\")};\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n`;\n\ninterface ResizerProps {\n    isResizing: boolean;\n}\n\nexport const Resizer = styled(\"div\")<ResizerProps>`\n    position: absolute;\n    right: 0;\n    top: 0;\n    height: 100%;\n    width: 4px;\n    background: ${props =>\n        props.isResizing\n            ? \"var(--mdc-theme-text-hint-on-light)\"\n            : \"var(--mdc-theme-on-background)\"};\n    cursor: col-resize;\n    user-select: none;\n    touch-action: none;\n    opacity: ${props => (props.isResizing ? 1 : 0)};\n`;\n\ninterface TableHeadCell extends DataTableHeadCellProps {\n    colSpan: number;\n    style?: CSSProperties;\n}\n\nexport const TableHeadCell = styled(RmwcDataTableHeadCell)<TableHeadCell>`\n    position: relative;\n\n    &:hover ${Resizer} {\n        opacity: 1;\n    }\n`;\n\ninterface ColumnHeaderWrapperProps {\n    sortable: boolean;\n}\n\nexport const ColumnHeaderWrapper = styled(\"div\")<ColumnHeaderWrapperProps>`\n    cursor: ${props => (props.sortable ? \"pointer\" : \"cursor\")};\n    display: flex;\n    align-items: center;\n    justify-content: start;\n`;\n\nexport const ColumnDirectionWrapper = styled(\"span\")`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 16px;\n    width: 16px;\n    margin: 0 0 0 4px;\n`;\n\nexport const ColumnDirectionIcon = styled(ArrowDown)<ColumnDirectionProps>`\n    transform: ${props => (props.direction === \"asc\" ? \"rotate(180deg)\" : \"rotate(0deg)\")};\n`;\n"],"mappings":";;;;;;;AAAA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAaO,IAAMG,KAAK,oBAAGC,eAAM,EAACC,oBAAa;EAAAC,KAAA;EAAAC,MAAA;AAAA,gGAKrB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,QAAQ,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,mCAM5D;AAACC,OAAA,CAAAP,KAAA,GAAAA,KAAA;AAMK,IAAMQ,OAAO,oBAAGP,eAAM,EAAC,KAAK;EAAAE,KAAA;EAAAC,MAAA;AAAA,wEAMjB,UAAAC,KAAK;EAAA,OACfA,KAAK,CAACI,UAAU,GACV,qCAAqC,GACrC,gCAAgC;AAAA,qEAI/B,UAAAJ,KAAK;EAAA,OAAKA,KAAK,CAACI,UAAU,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC,MACjD;AAACF,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAOK,IAAME,aAAa,oBAAGT,eAAM,EAACU,4BAAqB;EAAAR,KAAA;EAAAC,MAAA;AAAA,iCAG3CI,OAAO,iBAGpB;AAACD,OAAA,CAAAG,aAAA,GAAAA,aAAA;AAMK,IAAME,mBAAmB,oBAAGX,eAAM,EAAC,KAAK;EAAAE,KAAA;EAAAC,MAAA;AAAA,cACjC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACQ,QAAQ,GAAG,SAAS,GAAG,QAAQ;AAAA,CAAC,4DAI7D;AAACN,OAAA,CAAAK,mBAAA,GAAAA,mBAAA;AAEK,IAAME,sBAAsB,oBAAGb,eAAM,EAAC,MAAM;EAAAE,KAAA;EAAAC,MAAA;AAAA,4GAOlD;AAACG,OAAA,CAAAO,sBAAA,GAAAA,sBAAA;AAEK,IAAMC,mBAAmB,oBAAGd,eAAM,EAACe,8BAAS;EAAAb,KAAA;EAAAC,MAAA;AAAA,iBAClC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACY,SAAS,KAAK,KAAK,GAAG,gBAAgB,GAAG,cAAc;AAAA,CAAC,MACxF;AAACV,OAAA,CAAAQ,mBAAA,GAAAA,mBAAA"}
+{"version":3,"names":["_styled","_interopRequireDefault","require","_arrow_downward","_dataTable","_Typography","Table","styled","RmwcDataTable","label","target","props","bordered","exports","Resizer","isResizing","TableHeadCell","RmwcDataTableHeadCell","DataTableCell","RmwcDataTableCell","ColumnHeaderWrapper","sortable","isLastCell","ColumnDirectionWrapper","ColumnDirectionIcon","ArrowDown","direction","ColumnsVisibilityMenuHeader","Typography","ColumnsVisibilityMenuItem"],"sources":["styled.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { ReactComponent as ArrowDown } from \"@material-design-icons/svg/outlined/arrow_downward.svg\";\nimport {\n    DataTable as RmwcDataTable,\n    DataTableCell as RmwcDataTableCell,\n    DataTableHeadCell as RmwcDataTableHeadCell,\n    DataTableProps,\n    DataTableHeadCellProps,\n    DataTableCellProps\n} from \"@rmwc/data-table\";\nimport { ColumnDirectionProps } from \"~/DataTable/ColumnDirection\";\nimport { Typography } from \"~/Typography\";\n\ninterface TableProps extends DataTableProps {\n    bordered?: boolean;\n}\n\nexport const Table = styled(RmwcDataTable)<TableProps>`\n    overflow-y: hidden;\n    overflow-x: scroll;\n    max-width: 100%;\n    display: block !important;\n    border-width: ${props => (props.bordered ? \"1px\" : \"0px\")};\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n`;\n\ninterface ResizerProps {\n    isResizing: boolean;\n}\n\nexport const Resizer = styled(\"div\")<ResizerProps>`\n    position: absolute;\n    right: 0;\n    top: 0;\n    height: 100%;\n    width: 4px;\n    background: ${props =>\n        props.isResizing\n            ? \"var(--mdc-theme-text-hint-on-light)\"\n            : \"var(--mdc-theme-on-background)\"};\n    cursor: col-resize;\n    user-select: none;\n    touch-action: none;\n    opacity: ${props => (props.isResizing ? 1 : 0)};\n`;\n\ninterface TableHeadCell extends DataTableHeadCellProps {\n    colSpan: number;\n    style?: CSSProperties;\n}\n\nexport const TableHeadCell = styled(RmwcDataTableHeadCell)<TableHeadCell>`\n    position: relative;\n    width: auto;\n\n    &:hover ${Resizer} {\n        opacity: 1;\n    }\n`;\n\ninterface DataTableCell extends DataTableCellProps {\n    style?: CSSProperties;\n}\n\nexport const DataTableCell = styled(RmwcDataTableCell)<DataTableCell>`\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n\ninterface ColumnHeaderWrapperProps {\n    sortable: boolean;\n    isLastCell: boolean;\n}\n\nexport const ColumnHeaderWrapper = styled(\"div\")<ColumnHeaderWrapperProps>`\n    cursor: ${props => (props.sortable ? \"pointer\" : \"cursor\")};\n    display: flex;\n    align-items: center;\n    justify-content: ${props => (props.isLastCell ? \"flex-end\" : \"start\")};\n`;\n\nexport const ColumnDirectionWrapper = styled(\"span\")`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 16px;\n    width: 16px;\n    margin: 0 0 0 4px;\n`;\n\nexport const ColumnDirectionIcon = styled(ArrowDown)<ColumnDirectionProps>`\n    transform: ${props => (props.direction === \"asc\" ? \"rotate(180deg)\" : \"rotate(0deg)\")};\n`;\n\nexport const ColumnsVisibilityMenuHeader = styled(Typography)`\n    padding: 4px 16px;\n    font-weight: 600;\n`;\n\nexport const ColumnsVisibilityMenuItem = styled(\"div\")`\n    padding: 0 16px;\n`;\n"],"mappings":";;;;;;;AACA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AASA,IAAAG,WAAA,GAAAH,OAAA;AAMO,IAAMI,KAAK,oBAAGC,eAAM,EAACC,oBAAa;EAAAC,KAAA;EAAAC,MAAA;AAAA,gGAKrB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,QAAQ,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,mCAM5D;AAACC,OAAA,CAAAP,KAAA,GAAAA,KAAA;AAMK,IAAMQ,OAAO,oBAAGP,eAAM,EAAC,KAAK;EAAAE,KAAA;EAAAC,MAAA;AAAA,wEAMjB,UAAAC,KAAK;EAAA,OACfA,KAAK,CAACI,UAAU,GACV,qCAAqC,GACrC,gCAAgC;AAAA,qEAI/B,UAAAJ,KAAK;EAAA,OAAKA,KAAK,CAACI,UAAU,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC,MACjD;AAACF,OAAA,CAAAC,OAAA,GAAAA,OAAA;AAOK,IAAME,aAAa,oBAAGT,eAAM,EAACU,4BAAqB;EAAAR,KAAA;EAAAC,MAAA;AAAA,4CAI3CI,OAAO,iBAGpB;AAACD,OAAA,CAAAG,aAAA,GAAAA,aAAA;AAMK,IAAME,aAAa,oBAAGX,eAAM,EAACY,wBAAiB;EAAAV,KAAA;EAAAC,MAAA;AAAA,gEAIpD;AAACG,OAAA,CAAAK,aAAA,GAAAA,aAAA;AAOK,IAAME,mBAAmB,oBAAGb,eAAM,EAAC,KAAK;EAAAE,KAAA;EAAAC,MAAA;AAAA,cACjC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACU,QAAQ,GAAG,SAAS,GAAG,QAAQ;AAAA,CAAC,uDAGvC,UAAAV,KAAK;EAAA,OAAKA,KAAK,CAACW,UAAU,GAAG,UAAU,GAAG,OAAO;AAAA,CAAC,MACxE;AAACT,OAAA,CAAAO,mBAAA,GAAAA,mBAAA;AAEK,IAAMG,sBAAsB,oBAAGhB,eAAM,EAAC,MAAM;EAAAE,KAAA;EAAAC,MAAA;AAAA,4GAOlD;AAACG,OAAA,CAAAU,sBAAA,GAAAA,sBAAA;AAEK,IAAMC,mBAAmB,oBAAGjB,eAAM,EAACkB,8BAAS;EAAAhB,KAAA;EAAAC,MAAA;AAAA,iBAClC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACe,SAAS,KAAK,KAAK,GAAG,gBAAgB,GAAG,cAAc;AAAA,CAAC,MACxF;AAACb,OAAA,CAAAW,mBAAA,GAAAA,mBAAA;AAEK,IAAMG,2BAA2B,oBAAGpB,eAAM,EAACqB,sBAAU;EAAAnB,KAAA;EAAAC,MAAA;AAAA,uCAG3D;AAACG,OAAA,CAAAc,2BAAA,GAAAA,2BAAA;AAEK,IAAME,yBAAyB,oBAAGtB,eAAM,EAAC,KAAK;EAAAE,KAAA;EAAAC,MAAA;AAAA,qBAEpD;AAACG,OAAA,CAAAgB,yBAAA,GAAAA,yBAAA"}

package/DateTime/Date.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface DateComponentProps {
+    date: string;
+    options?: Intl.DateTimeFormatOptions;
+    locale?: string;
+}
+export declare const DateComponent: ({ date, options, locale }: DateComponentProps) => JSX.Element;

package/DateTime/Date.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateComponent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var DateComponent = function DateComponent(_ref) {
+  var date = _ref.date,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    } : _ref$options,
+    locale = _ref.locale;
+  var formatDate = (0, _react.useMemo)(function () {
+    // Convert the input string to a Date object
+    var dateObject = new Date(date);
+
+    // Check if the input date is valid
+    if (isNaN(dateObject.getDate())) {
+      console.log("Invalid date");
+      return "";
+    }
+
+    /**
+     *  Determine the final locale:
+     *  - use the prop `locale` if provided.
+     *  - try to guess the navigator language, use it only if it's a subset of `en`locale, since the admin is not localized.
+     *  - use `en-US`as default.
+     */
+    var localeCode = locale || (navigator.language && navigator.language.startsWith("en") ? navigator.language : "en-US");
+    return new Intl.DateTimeFormat(localeCode, options).format(dateObject);
+  }, [date, locale, options]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formatDate);
+};
+exports.DateComponent = DateComponent;
+
+//# sourceMappingURL=Date.js.map

package/DateTime/Date.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","DateComponent","_ref","date","_ref$options","options","day","month","year","locale","formatDate","useMemo","dateObject","Date","isNaN","getDate","console","log","localeCode","navigator","language","startsWith","Intl","DateTimeFormat","format","default","createElement","Fragment","exports"],"sources":["Date.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\n\nexport interface DateComponentProps {\n    date: string;\n    options?: Intl.DateTimeFormatOptions;\n    locale?: string;\n}\n\nexport const DateComponent = ({\n    date,\n    options = {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\"\n    },\n    locale\n}: DateComponentProps) => {\n    const formatDate = useMemo(() => {\n        // Convert the input string to a Date object\n        const dateObject = new Date(date);\n\n        // Check if the input date is valid\n        if (isNaN(dateObject.getDate())) {\n            console.log(\"Invalid date\");\n            return \"\";\n        }\n\n        /**\n         *  Determine the final locale:\n         *  - use the prop `locale` if provided.\n         *  - try to guess the navigator language, use it only if it's a subset of `en`locale, since the admin is not localized.\n         *  - use `en-US`as default.\n         */\n        const localeCode =\n            locale ||\n            (navigator.language && navigator.language.startsWith(\"en\")\n                ? navigator.language\n                : \"en-US\");\n\n        return new Intl.DateTimeFormat(localeCode, options).format(dateObject);\n    }, [date, locale, options]);\n\n    return <>{formatDate}</>;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAQO,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA,EAQA;EAAA,IAPtBC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAAC,YAAA,GAAAF,IAAA,CACJG,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG;MACNE,GAAG,EAAE,SAAS;MACdC,KAAK,EAAE,MAAM;MACbC,IAAI,EAAE;IACV,CAAC,GAAAJ,YAAA;IACDK,MAAM,GAAAP,IAAA,CAANO,MAAM;EAEN,IAAMC,UAAU,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC7B;IACA,IAAMC,UAAU,GAAG,IAAIC,IAAI,CAACV,IAAI,CAAC;;IAEjC;IACA,IAAIW,KAAK,CAACF,UAAU,CAACG,OAAO,CAAC,CAAC,CAAC,EAAE;MAC7BC,OAAO,CAACC,GAAG,CAAC,cAAc,CAAC;MAC3B,OAAO,EAAE;IACb;;IAEA;AACR;AACA;AACA;AACA;AACA;IACQ,IAAMC,UAAU,GACZT,MAAM,KACLU,SAAS,CAACC,QAAQ,IAAID,SAAS,CAACC,QAAQ,CAACC,UAAU,CAAC,IAAI,CAAC,GACpDF,SAAS,CAACC,QAAQ,GAClB,OAAO,CAAC;IAElB,OAAO,IAAIE,IAAI,CAACC,cAAc,CAACL,UAAU,EAAEb,OAAO,CAAC,CAACmB,MAAM,CAACZ,UAAU,CAAC;EAC1E,CAAC,EAAE,CAACT,IAAI,EAAEM,MAAM,EAAEJ,OAAO,CAAC,CAAC;EAE3B,oBAAOP,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAAA5B,MAAA,CAAA2B,OAAA,CAAAE,QAAA,QAAGjB,UAAa,CAAC;AAC5B,CAAC;AAACkB,OAAA,CAAA3B,aAAA,GAAAA,aAAA"}

package/DateTime/index.d.ts

@@ -0,0 +1 @@
+export { DateComponent as Date } from "./Date";

package/DateTime/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Date", {
+  enumerable: true,
+  get: function get() {
+    return _Date.DateComponent;
+  }
+});
+var _Date = require("./Date");
+
+//# sourceMappingURL=index.js.map

package/DateTime/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Date","require"],"sources":["index.ts"],"sourcesContent":["export { DateComponent as Date } from \"./Date\";\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA"}

package/DelayedOnChange/DelayedOnChange.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="web" />
 import React from "react";
 interface ApplyValueCb {
     (value: string, cb: (value: string) => void): void;
@@ -36,5 +35,5 @@ export interface DelayedOnChangeProps {
     onKeyDown?: OnKeyDownCallable;
     children: React.ReactNode | ChildrenCallable;
 }
-export declare const DelayedOnChange: React.FC<DelayedOnChangeProps>;
+export declare const DelayedOnChange: ({ children, ...other }: DelayedOnChangeProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default DelayedOnChange;

package/DelayedOnChange/DelayedOnChange.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_excluded","emptyFunction","undefined","DelayedOnChange","_ref","children","other","_objectWithoutProperties2","default","onChange","_other$delay","delay","initialValue","value","_useState","useState","_useState2","_slicedToArray2","setValue","useEffect","localTimeout","React","useRef","applyValue","callback","arguments","length","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","_objectSpread2","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key","exports","_default"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nconst emptyFunction = (): undefined => {\n    return undefined;\n};\n\ninterface ApplyValueCb {\n    (value: string, cb: (value: string) => void): void;\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 */\ninterface OnChangeCallable {\n    (value: string, cb?: ApplyValueCb): void;\n}\ninterface OnBlurCallable {\n    (ev: React.SyntheticEvent): void;\n}\ninterface OnKeyDownCallable {\n    (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\ninterface ChildrenCallableParams {\n    value: string;\n    onChange: OnChangeCallable;\n}\ninterface ChildrenCallable {\n    (params: ChildrenCallableParams): React.ReactElement;\n}\nexport interface DelayedOnChangeProps {\n    value?: string;\n    delay?: number;\n    onChange?: OnChangeCallable;\n    onBlur?: OnBlurCallable;\n    onKeyDown?: OnKeyDownCallable;\n    children: React.ReactNode | ChildrenCallable;\n}\nexport const DelayedOnChange: React.FC<DelayedOnChangeProps> = ({ children, ...other }) => {\n    const { onChange, delay = 400, value: initialValue } = other;\n    const [value, setValue] = useState<string | undefined>(initialValue);\n    // Sync state and props\n    useEffect(() => {\n        if (initialValue !== value) {\n            setValue(initialValue);\n        }\n    }, [initialValue]);\n\n    const localTimeout = React.useRef<number | null>(null);\n\n    const applyValue = (value: string, callback: ApplyValueCb = emptyFunction) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        if (!onChange) {\n            return;\n        }\n        onChange(value, callback);\n    };\n\n    const onChangeLocal = React.useCallback((value: string) => {\n        setValue(value);\n    }, []);\n\n    // this is fired upon change value state\n    const onValueStateChanged = (nextValue: string) => {\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        onValueStateChanged(value || \"\");\n    }, [value]);\n\n    const newProps = {\n        ...other,\n        value: value || \"\",\n        onChange: onChangeLocal\n    };\n\n    const renderProp = typeof children === \"function\" ? (children as ChildrenCallable) : 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, () => 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, () => realOnKeyDown(ev));\n        } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else {\n            realOnKeyDown(ev);\n        }\n    };\n\n    return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n\nexport default DelayedOnChange;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_excluded","emptyFunction","undefined","DelayedOnChange","_ref","children","other","_objectWithoutProperties2","default","onChange","_other$delay","delay","initialValue","value","_useState","useState","_useState2","_slicedToArray2","setValue","useEffect","localTimeout","React","useRef","applyValue","callback","arguments","length","current","clearTimeout","onChangeLocal","useCallback","onValueStateChanged","nextValue","setTimeout","newProps","_objectSpread2","renderProp","child","cloneElement","props","realOnKeyDown","onKeyDown","realOnBlur","onBlur","ev","persist","target","key","exports","_default"],"sources":["DelayedOnChange.ts"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nconst emptyFunction = (): undefined => {\n    return undefined;\n};\n\ninterface ApplyValueCb {\n    (value: string, cb: (value: string) => void): void;\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 */\ninterface OnChangeCallable {\n    (value: string, cb?: ApplyValueCb): void;\n}\ninterface OnBlurCallable {\n    (ev: React.SyntheticEvent): void;\n}\ninterface OnKeyDownCallable {\n    (ev: React.KeyboardEvent<HTMLInputElement>): void;\n}\ninterface ChildrenCallableParams {\n    value: string;\n    onChange: OnChangeCallable;\n}\ninterface ChildrenCallable {\n    (params: ChildrenCallableParams): React.ReactElement;\n}\nexport interface DelayedOnChangeProps {\n    value?: string;\n    delay?: number;\n    onChange?: OnChangeCallable;\n    onBlur?: OnBlurCallable;\n    onKeyDown?: OnKeyDownCallable;\n    children: React.ReactNode | ChildrenCallable;\n}\nexport const DelayedOnChange = ({ children, ...other }: DelayedOnChangeProps) => {\n    const { onChange, delay = 400, value: initialValue } = other;\n    const [value, setValue] = useState<string | undefined>(initialValue);\n    // Sync state and props\n    useEffect(() => {\n        if (initialValue !== value) {\n            setValue(initialValue);\n        }\n    }, [initialValue]);\n\n    const localTimeout = React.useRef<number | null>(null);\n\n    const applyValue = (value: string, callback: ApplyValueCb = emptyFunction) => {\n        localTimeout.current && clearTimeout(localTimeout.current);\n        localTimeout.current = null;\n        if (!onChange) {\n            return;\n        }\n        onChange(value, callback);\n    };\n\n    const onChangeLocal = React.useCallback((value: string) => {\n        setValue(value);\n    }, []);\n\n    // this is fired upon change value state\n    const onValueStateChanged = (nextValue: string) => {\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        onValueStateChanged(value || \"\");\n    }, [value]);\n\n    const newProps = {\n        ...other,\n        value: value || \"\",\n        onChange: onChangeLocal\n    };\n\n    const renderProp = typeof children === \"function\" ? (children as ChildrenCallable) : 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, () => 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, () => realOnKeyDown(ev));\n        } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else {\n            realOnKeyDown(ev);\n        }\n    };\n\n    return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n\nexport default DelayedOnChange;\n"],"mappings":"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"}

package/DelayedOnChange/withDelayedOnChange.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { DelayedOnChangeProps } from "./DelayedOnChange";
-export default function withDelayedOnChange(): (Component: React.FC<DelayedOnChangeProps>) => (props: DelayedOnChangeProps) => JSX.Element;
+export default function withDelayedOnChange(): (Component: React.ComponentType<DelayedOnChangeProps>) => (props: DelayedOnChangeProps) => JSX.Element;

package/DelayedOnChange/withDelayedOnChange.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_DelayedOnChange","_excluded","withDelayedOnChange","decorator","Component","WithDelayedOnChange","props","value","onChange","rest","_objectWithoutProperties2","default","createElement","_ref","Object","assign"],"sources":["withDelayedOnChange.tsx"],"sourcesContent":["import React from \"react\";\nimport Delayed, { DelayedOnChangeProps } from \"./DelayedOnChange\";\n\nexport default function withDelayedOnChange() {\n    return function decorator(Component: React.FC<DelayedOnChangeProps>) {\n        return function WithDelayedOnChange(props: DelayedOnChangeProps) {\n            const { value, onChange, ...rest } = props;\n            return (\n                <Delayed value={value} onChange={onChange}>\n                    {({ value, onChange }) => (\n                        <Component {...rest} value={value} onChange={onChange} />\n                    )}\n                </Delayed>\n            );\n        };\n    };\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAkE,IAAAE,SAAA;AAEnD,SAASC,mBAAmBA,CAAA,EAAG;EAC1C,OAAO,SAASC,SAASA,CAACC,SAAyC,EAAE;IACjE,OAAO,SAASC,mBAAmBA,CAACC,KAA2B,EAAE;MAC7D,IAAQC,KAAK,GAAwBD,KAAK,CAAlCC,KAAK;QAAEC,QAAQ,GAAcF,KAAK,CAA3BE,QAAQ;QAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAKL,KAAK,EAAAL,SAAA;MAC1C,oBACIJ,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACZ,gBAAA,CAAAW,OAAO;QAACJ,KAAK,EAAEA,KAAM;QAACC,QAAQ,EAAEA;MAAS,GACrC,UAAAK,IAAA;QAAA,IAAGN,KAAK,GAAAM,IAAA,CAALN,KAAK;UAAEC,QAAQ,GAAAK,IAAA,CAARL,QAAQ;QAAA,oBACfX,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACR,SAAS,EAAAU,MAAA,CAAAC,MAAA,KAAKN,IAAI;UAAEF,KAAK,EAAEA,KAAM;UAACC,QAAQ,EAAEA;QAAS,EAAE,CAAC;MAAA,CAExD,CAAC;IAElB,CAAC;EACL,CAAC;AACL"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_DelayedOnChange","_excluded","withDelayedOnChange","decorator","Component","WithDelayedOnChange","props","value","onChange","rest","_objectWithoutProperties2","default","createElement","_ref","Object","assign"],"sources":["withDelayedOnChange.tsx"],"sourcesContent":["import React from \"react\";\nimport Delayed, { DelayedOnChangeProps } from \"./DelayedOnChange\";\n\nexport default function withDelayedOnChange() {\n    return function decorator(Component: React.ComponentType<DelayedOnChangeProps>) {\n        return function WithDelayedOnChange(props: DelayedOnChangeProps) {\n            const { value, onChange, ...rest } = props;\n            return (\n                <Delayed value={value} onChange={onChange}>\n                    {({ value, onChange }) => (\n                        <Component {...rest} value={value} onChange={onChange} />\n                    )}\n                </Delayed>\n            );\n        };\n    };\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAkE,IAAAE,SAAA;AAEnD,SAASC,mBAAmBA,CAAA,EAAG;EAC1C,OAAO,SAASC,SAASA,CAACC,SAAoD,EAAE;IAC5E,OAAO,SAASC,mBAAmBA,CAACC,KAA2B,EAAE;MAC7D,IAAQC,KAAK,GAAwBD,KAAK,CAAlCC,KAAK;QAAEC,QAAQ,GAAcF,KAAK,CAA3BE,QAAQ;QAAKC,IAAI,OAAAC,yBAAA,CAAAC,OAAA,EAAKL,KAAK,EAAAL,SAAA;MAC1C,oBACIJ,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACZ,gBAAA,CAAAW,OAAO;QAACJ,KAAK,EAAEA,KAAM;QAACC,QAAQ,EAAEA;MAAS,GACrC,UAAAK,IAAA;QAAA,IAAGN,KAAK,GAAAM,IAAA,CAALN,KAAK;UAAEC,QAAQ,GAAAK,IAAA,CAARL,QAAQ;QAAA,oBACfX,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACR,SAAS,EAAAU,MAAA,CAAAC,MAAA,KAAKN,IAAI;UAAEF,KAAK,EAAEA,KAAM;UAACC,QAAQ,EAAEA;QAAS,EAAE,CAAC;MAAA,CAExD,CAAC;IAElB,CAAC;EACL,CAAC;AACL"}

package/Dialog/Dialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="web" />
 import React from "react";
 import { DialogProps as RmwcDialogProps, DialogOnCloseEventT, DialogContentProps as RmwcDialogContentProps, DialogTitleProps as RmwcDialogTitleProps, DialogActionsProps as RmwcDialogActionsProps, DialogButtonProps as RmwcDialogButtonProps } from "@rmwc/dialog";
 export declare type DialogOnClose = (event: DialogOnCloseEventT) => void;
@@ -23,7 +22,7 @@ export interface DialogTitleProps extends RmwcDialogTitleProps {
 /**
  * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.
  */
-export declare const DialogTitle: React.FC<DialogTitleProps>;
+export declare const DialogTitle: (props: DialogTitleProps) => JSX.Element;
 export declare type DialogContentProps = RmwcDialogContentProps & {
     /**
      * Dialog content.
@@ -34,7 +33,7 @@ export declare type DialogContentProps = RmwcDialogContentProps & {
 /**
  * A simple component for showing dialog's body.
  */
-export declare const DialogContent: React.FC<DialogContentProps>;
+export declare const DialogContent: (props: DialogContentProps) => JSX.Element;
 export interface DialogActionsProps extends RmwcDialogActionsProps {
     /**
      * Action buttons.
@@ -45,7 +44,7 @@ export interface DialogActionsProps extends RmwcDialogActionsProps {
 /**
  * Can be used to show accept and cancel buttons.
  */
-export declare const DialogActions: React.FC<DialogActionsProps>;
+export declare const DialogActions: (props: DialogActionsProps) => JSX.Element;
 interface DialogButtonProps extends RmwcDialogButtonProps {
     /**
      * Callback to execute then button is clicked.
@@ -56,7 +55,7 @@ interface DialogButtonProps extends RmwcDialogButtonProps {
 /**
  * Use this to show a simple button.
  */
-export declare const DialogButton: React.FC<DialogButtonProps>;
+export declare const DialogButton: (props: DialogButtonProps) => JSX.Element;
 interface DialogCancelProps extends RmwcDialogButtonProps {
     /**
      * Callback to execute then button is clicked.
@@ -66,7 +65,7 @@ interface DialogCancelProps extends RmwcDialogButtonProps {
 /**
  * Use this to close the dialog without taking any additional action.
  */
-export declare const DialogCancel: React.FC<DialogCancelProps>;
+export declare const DialogCancel: (props: DialogCancelProps) => JSX.Element;
 interface DialogAcceptProps extends RmwcDialogButtonProps {
     /**
      * Callback to execute then button is clicked.
@@ -76,5 +75,5 @@ interface DialogAcceptProps extends RmwcDialogButtonProps {
 /**
  * Use this to close the dialog without taking any additional action.
  */
-export declare const DialogAccept: React.FC<DialogAcceptProps>;
+export declare const DialogAccept: (props: DialogAcceptProps) => JSX.Element;
 export {};

package/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactDom","_dialog","_emotion","_Helpers","_excluded","Dialog","_React$Component","_inherits2","default","_super","_createSuper2","props","_this","_classCallCheck2","call","container","document","getElementById","createElement","setAttribute","body","appendChild","_createClass2","key","value","render","_this$props","children","_objectWithoutProperties2","ReactDOM","createPortal","getClasses","React","Component","exports","DialogTitle","DialogContent","addMargin","css","DialogActions","DialogButton","DialogCancel","Object","assign","action","DialogAccept"],"sources":["Dialog.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n    Dialog as RmwcDialog,\n    DialogProps as RmwcDialogProps,\n    DialogOnCloseEventT,\n    DialogContent as RmwcDialogContent,\n    DialogContentProps as RmwcDialogContentProps,\n    DialogTitle as RmwcDialogTitle,\n    DialogTitleProps as RmwcDialogTitleProps,\n    DialogActions as RmwcDialogActions,\n    DialogActionsProps as RmwcDialogActionsProps,\n    DialogButton as RmwcDialogButton,\n    DialogButtonProps as RmwcDialogButtonProps\n} from \"@rmwc/dialog\";\nimport { css } from \"emotion\";\nimport { getClasses } from \"~/Helpers\";\n\nexport type DialogOnClose = (event: DialogOnCloseEventT) => void;\n\nexport interface DialogProps extends RmwcDialogProps {\n    className?: string;\n\n    // Component's custom in-line styles.\n    style?: React.CSSProperties;\n\n    // If true, dialog will be permanently fixed inside of a view (works for temporary and persistent modes).\n    open?: boolean;\n\n    onClose?: (evt: DialogOnCloseEventT) => void;\n\n    preventOutsideDismiss?: boolean;\n}\n\nexport class Dialog extends React.Component<DialogProps> {\n    container: HTMLElement;\n\n    constructor(props: DialogProps) {\n        super(props);\n        /**\n         * We can safely cast\n         */\n        this.container = document.getElementById(\"dialog-container\") as HTMLElement;\n\n        if (!this.container) {\n            this.container = document.createElement(\"div\");\n            this.container.setAttribute(\"id\", \"dialog-container\");\n            const container = this.container;\n            document.body && document.body.appendChild(container);\n        }\n    }\n\n    public override render() {\n        const { children, ...props } = this.props;\n        const container = this.container;\n\n        // Let's pass \"permanent\" / \"persistent\" / \"temporary\" flags as \"mode\" prop instead.\n        return ReactDOM.createPortal(\n            <RmwcDialog {...getClasses(props, \"webiny-ui-dialog\")}>{children}</RmwcDialog>,\n            container\n        );\n    }\n}\n\nexport interface DialogTitleProps extends RmwcDialogTitleProps {\n    /**\n     * Title text.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n}\n\n/**\n * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.\n */\nexport const DialogTitle: React.FC<DialogTitleProps> = props => (\n    <RmwcDialogTitle {...getClasses(props, \"webiny-ui-dialog__title\")} />\n);\n\nexport type DialogContentProps = RmwcDialogContentProps & {\n    /**\n     * Dialog content.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    className?: string;\n};\n\n/**\n * A simple component for showing dialog's body.\n */\nexport const DialogContent: React.FC<DialogContentProps> = props => (\n    <RmwcDialogContent {...getClasses(props, \"webiny-ui-dialog__content\")} />\n);\n\nexport interface DialogActionsProps extends RmwcDialogActionsProps {\n    /**\n     * Action buttons.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    // Dialog component's custom in-line styles.\n    style?: React.CSSProperties;\n}\n\nconst addMargin = css`\n    button:last-of-type {\n        margin-left: 8px;\n    }\n`;\n\n/**\n * Can be used to show accept and cancel buttons.\n */\nexport const DialogActions: React.FC<DialogActionsProps> = props => (\n    <RmwcDialogActions {...getClasses(props, [addMargin, \"webiny-ui-dialog__actions\"])} />\n);\n\ninterface DialogButtonProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n\n    className?: string;\n}\n\n/**\n * Use this to show a simple button.\n */\nexport const DialogButton: React.FC<DialogButtonProps> = props => (\n    <RmwcDialogButton {...getClasses(props, \"webiny-ui-dialog__button\")} />\n);\n\ninterface DialogCancelProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogCancel: React.FC<DialogCancelProps> = props => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--cancel\")}\n            action=\"close\"\n            data-testid=\"dialog-cancel\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n\ninterface DialogAcceptProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogAccept: React.FC<DialogAcceptProps> = props => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--accept\")}\n            action=\"accept\"\n            data-testid=\"dialog-accept\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactDom","_dialog","_emotion","_Helpers","_excluded","Dialog","_React$Component","_inherits2","default","_super","_createSuper2","props","_this","_classCallCheck2","call","container","document","getElementById","createElement","setAttribute","body","appendChild","_createClass2","key","value","render","_this$props","children","_objectWithoutProperties2","ReactDOM","createPortal","getClasses","React","Component","exports","DialogTitle","DialogContent","addMargin","css","DialogActions","DialogButton","DialogCancel","Object","assign","action","DialogAccept"],"sources":["Dialog.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n    Dialog as RmwcDialog,\n    DialogProps as RmwcDialogProps,\n    DialogOnCloseEventT,\n    DialogContent as RmwcDialogContent,\n    DialogContentProps as RmwcDialogContentProps,\n    DialogTitle as RmwcDialogTitle,\n    DialogTitleProps as RmwcDialogTitleProps,\n    DialogActions as RmwcDialogActions,\n    DialogActionsProps as RmwcDialogActionsProps,\n    DialogButton as RmwcDialogButton,\n    DialogButtonProps as RmwcDialogButtonProps\n} from \"@rmwc/dialog\";\nimport { css } from \"emotion\";\nimport { getClasses } from \"~/Helpers\";\n\nexport type DialogOnClose = (event: DialogOnCloseEventT) => void;\n\nexport interface DialogProps extends RmwcDialogProps {\n    className?: string;\n\n    // Component's custom in-line styles.\n    style?: React.CSSProperties;\n\n    // If true, dialog will be permanently fixed inside of a view (works for temporary and persistent modes).\n    open?: boolean;\n\n    onClose?: (evt: DialogOnCloseEventT) => void;\n\n    preventOutsideDismiss?: boolean;\n}\n\nexport class Dialog extends React.Component<DialogProps> {\n    container: HTMLElement;\n\n    constructor(props: DialogProps) {\n        super(props);\n        /**\n         * We can safely cast\n         */\n        this.container = document.getElementById(\"dialog-container\") as HTMLElement;\n\n        if (!this.container) {\n            this.container = document.createElement(\"div\");\n            this.container.setAttribute(\"id\", \"dialog-container\");\n            const container = this.container;\n            document.body && document.body.appendChild(container);\n        }\n    }\n\n    public override render() {\n        const { children, ...props } = this.props;\n        const container = this.container;\n\n        // Let's pass \"permanent\" / \"persistent\" / \"temporary\" flags as \"mode\" prop instead.\n        return ReactDOM.createPortal(\n            <RmwcDialog {...getClasses(props, \"webiny-ui-dialog\")}>{children}</RmwcDialog>,\n            container\n        );\n    }\n}\n\nexport interface DialogTitleProps extends RmwcDialogTitleProps {\n    /**\n     * Title text.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n}\n\n/**\n * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.\n */\nexport const DialogTitle = (props: DialogTitleProps) => (\n    <RmwcDialogTitle {...getClasses(props, \"webiny-ui-dialog__title\")} />\n);\n\nexport type DialogContentProps = RmwcDialogContentProps & {\n    /**\n     * Dialog content.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    className?: string;\n};\n\n/**\n * A simple component for showing dialog's body.\n */\nexport const DialogContent = (props: DialogContentProps) => (\n    <RmwcDialogContent {...getClasses(props, \"webiny-ui-dialog__content\")} />\n);\n\nexport interface DialogActionsProps extends RmwcDialogActionsProps {\n    /**\n     * Action buttons.\n     */\n    children: React.ReactNode[] | React.ReactNode;\n\n    // Dialog component's custom in-line styles.\n    style?: React.CSSProperties;\n}\n\nconst addMargin = css`\n    button:last-of-type {\n        margin-left: 8px;\n    }\n`;\n\n/**\n * Can be used to show accept and cancel buttons.\n */\nexport const DialogActions = (props: DialogActionsProps) => (\n    <RmwcDialogActions {...getClasses(props, [addMargin, \"webiny-ui-dialog__actions\"])} />\n);\n\ninterface DialogButtonProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n\n    className?: string;\n}\n\n/**\n * Use this to show a simple button.\n */\nexport const DialogButton = (props: DialogButtonProps) => (\n    <RmwcDialogButton {...getClasses(props, \"webiny-ui-dialog__button\")} />\n);\n\ninterface DialogCancelProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogCancel = (props: DialogCancelProps) => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--cancel\")}\n            action=\"close\"\n            data-testid=\"dialog-cancel\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n\ninterface DialogAcceptProps extends RmwcDialogButtonProps {\n    /**\n     * Callback to execute then button is clicked.\n     */\n    onClick?: (e: React.MouseEvent) => void;\n}\n\n/**\n * Use this to close the dialog without taking any additional action.\n */\nexport const DialogAccept = (props: DialogAcceptProps) => {\n    return (\n        <DialogButton\n            {...getClasses(props, \"webiny-ui-dialog__button webiny-ui-dialog__button--accept\")}\n            action=\"accept\"\n            data-testid=\"dialog-accept\"\n        >\n            {props.children}\n        </DialogButton>\n    );\n};\n"],"mappings":"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"}

package/Drawer/Drawer.d.ts

@@ -1,10 +1,7 @@
 import React from "react";
+import { CSSObject } from "@emotion/react";
 import { DrawerProps as RmwcDrawerProps, DrawerHeaderProps as RmwcDrawerHeaderProps, DrawerContentProps as RmwcDrawerContentProps } from "@rmwc/drawer";
 declare type DrawerHeaderProps = RmwcDrawerHeaderProps & {
-    /**
-     * Drawer direction.
-     */
-    dir?: string;
     /**
      * Drawer content.
      */
@@ -19,10 +16,6 @@ declare type DrawerHeaderProps = RmwcDrawerHeaderProps & {
  */
 declare const DrawerHeader: (props: DrawerHeaderProps) => JSX.Element;
 export declare type DrawerContentProps = RmwcDrawerContentProps & {
-    /**
-     * Drawer direction.
-     */
-    dir?: string;
     /**
      * Drawer content.
      */
@@ -37,10 +30,6 @@ export declare type DrawerContentProps = RmwcDrawerContentProps & {
  */
 declare const DrawerContent: (props: DrawerContentProps) => JSX.Element;
 declare type DrawerProps = RmwcDrawerProps & {
-    /**
-     * Drawer direction.
-     */
-    dir?: string;
     /**
      * Drawer content.
      */
@@ -49,9 +38,12 @@ declare type DrawerProps = RmwcDrawerProps & {
      * CSS class name
      */
     className?: string;
+    style?: CSSObject;
 };
 /**
  * Use Drawer component to display navigation for the whole app or just a small section of it.
  */
-declare const Drawer: (props: DrawerProps) => JSX.Element;
-export { Drawer, DrawerHeader, DrawerContent };
+declare const Drawer: ({ style, children, ...props }: DrawerProps) => JSX.Element;
+declare const DrawerRight: (props: DrawerProps) => JSX.Element;
+declare const DrawerLeft: (props: DrawerProps) => JSX.Element;
+export { Drawer, DrawerHeader, DrawerContent, DrawerRight, DrawerLeft };