@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.13771d80a8

package/DataTable/DataTable.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataTable = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _dataTable = require("@rmwc/data-table");
+var _reactTable = require("@tanstack/react-table");
+var _Checkbox = require("../Checkbox");
+var _Skeleton = require("../Skeleton");
+require("@rmwc/data-table/data-table.css");
+var _styled = require("./styled");
+var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial) {
+  return (0, _react.useMemo)(function () {
+    var columnsList = Object.keys(columns).map(function (key) {
+      return (0, _objectSpread2.default)({
+        id: key
+      }, columns[key]);
+    });
+    var defaults = columnsList.map(function (column) {
+      var id = column.id,
+        _header = column.header,
+        meta = column.meta,
+        _cell = column.cell,
+        _column$enableSorting = column.enableSorting,
+        enableSorting = _column$enableSorting === void 0 ? false : _column$enableSorting;
+      return {
+        accessorKey: id,
+        header: function header() {
+          return _header;
+        },
+        cell: function cell(info) {
+          if (_cell && typeof _cell === "function") {
+            return _cell(info.row.original);
+          } else {
+            return info.getValue();
+          }
+        },
+        enableSorting: enableSorting,
+        meta: meta
+      };
+    });
+    var select = !!onSelectRow ? [{
+      id: "datatable-select-column",
+      header: function header(_ref) {
+        var table = _ref.table;
+        return !loadingInitial && /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+          indeterminate: table.getIsSomeRowsSelected(),
+          value: table.getIsAllRowsSelected(),
+          onChange: function onChange(e) {
+            return table.toggleAllPageRowsSelected(e);
+          }
+        });
+      },
+      cell: function cell(info) {
+        if (!info.row.getCanSelect()) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
+        return /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+          indeterminate: info.row.getIsSomeSelected(),
+          value: info.row.getIsSelected(),
+          onChange: info.row.getToggleSelectedHandler()
+        });
+      },
+      meta: {
+        hasFormControl: true,
+        className: "datatable-select-column"
+      },
+      enableSorting: false
+    }] : [];
+    return [].concat(select, (0, _toConsumableArray2.default)(defaults)).map(function (column) {
+      if (loadingInitial) {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, column), {}, {
+          cell: function cell() {
+            return /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, null);
+          }
+        });
+      }
+      return column;
+    });
+  }, [columns, onSelectRow, loadingInitial]);
+};
+var defineData = function defineData(data, loadingInitial) {
+  return (0, _react.useMemo)(function () {
+    if (loadingInitial) {
+      return Array(10).fill({});
+    }
+    return data;
+  }, [data, loadingInitial]);
+};
+var ColumnDirection = function ColumnDirection(_ref2) {
+  var direction = _ref2.direction;
+  if (direction) {
+    return /*#__PURE__*/_react.default.createElement(_styled.ColumnDirectionWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.ColumnDirectionIcon, {
+      direction: direction
+    }));
+  }
+  return null;
+};
+var DataTable = function DataTable(_ref3) {
+  var data = _ref3.data,
+    columns = _ref3.columns,
+    onSelectRow = _ref3.onSelectRow,
+    loadingInitial = _ref3.loadingInitial,
+    stickyColumns = _ref3.stickyColumns,
+    stickyRows = _ref3.stickyRows,
+    bordered = _ref3.bordered,
+    sorting = _ref3.sorting,
+    onSortingChange = _ref3.onSortingChange;
+  var _React$useState = _react.default.useState({}),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    rowSelection = _React$useState2[0],
+    setRowSelection = _React$useState2[1];
+  var table = (0, _reactTable.useReactTable)({
+    data: defineData(data, loadingInitial),
+    columns: defineColumns(columns, onSelectRow, loadingInitial),
+    getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+    getSortedRowModel: (0, _reactTable.getSortedRowModel)(),
+    state: {
+      rowSelection: rowSelection,
+      sorting: sorting
+    },
+    enableRowSelection: function enableRowSelection(row) {
+      return row.original.selectable || false;
+    },
+    onRowSelectionChange: setRowSelection,
+    enableSorting: !!onSortingChange,
+    manualSorting: true,
+    onSortingChange: onSortingChange
+  });
+  (0, _react.useEffect)(function () {
+    if (onSelectRow && typeof onSelectRow === "function") {
+      var dataSelected = table.getSelectedRowModel().flatRows.map(function (row) {
+        return row.original;
+      });
+      onSelectRow(dataSelected);
+    }
+  }, [rowSelection]);
+  return /*#__PURE__*/_react.default.createElement(_styled.Table, {
+    stickyColumns: stickyColumns,
+    stickyRows: stickyRows,
+    bordered: bordered
+  }, /*#__PURE__*/_react.default.createElement(_dataTable.DataTableContent, null, /*#__PURE__*/_react.default.createElement(_dataTable.DataTableHead, null, table.getHeaderGroups().map(function (headerGroup) {
+    return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableRow, {
+      key: headerGroup.id
+    }, headerGroup.headers.map(function (_ref4) {
+      var id = _ref4.id,
+        isPlaceholder = _ref4.isPlaceholder,
+        column = _ref4.column,
+        getContext = _ref4.getContext;
+      return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableHeadCell, Object.assign({
+        key: id
+      }, column.columnDef.meta), isPlaceholder ? null : /*#__PURE__*/_react.default.createElement(_styled.ColumnHeaderWrapper, {
+        onClick: column.getToggleSortingHandler(),
+        sortable: column.getCanSort()
+      }, (0, _reactTable.flexRender)(column.columnDef.header, getContext()), /*#__PURE__*/_react.default.createElement(ColumnDirection, {
+        direction: column.getIsSorted() || undefined
+      })));
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_dataTable.DataTableBody, null, table.getRowModel().rows.map(function (row) {
+    return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableRow, {
+      key: row.id,
+      selected: rowSelection.hasOwnProperty(row.index)
+    }, row.getVisibleCells().map(function (cell) {
+      return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableCell, Object.assign({
+        key: cell.id
+      }, cell.column.columnDef.meta), (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
+    }));
+  }))));
+};
+exports.DataTable = DataTable;

package/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["defineColumns","columns","onSelectRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","id","defaults","column","header","meta","cell","enableSorting","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getCanSelect","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","className","defineData","data","Array","fill","ColumnDirection","direction","DataTable","stickyColumns","stickyRows","bordered","sorting","onSortingChange","React","useState","rowSelection","setRowSelection","useReactTable","getCoreRowModel","getSortedRowModel","state","enableRowSelection","selectable","onRowSelectionChange","manualSorting","useEffect","dataSelected","getSelectedRowModel","flatRows","getHeaderGroups","headerGroup","headers","isPlaceholder","getContext","columnDef","getToggleSortingHandler","getCanSort","flexRender","getIsSorted","undefined","getRowModel","rows","hasOwnProperty","index","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { ReactElement, useEffect, useMemo } from \"react\";\n\nimport {\n    DataTableContent,\n    DataTableHead,\n    DataTableRow,\n    DataTableHeadCell,\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} from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport { ColumnDirectionIcon, ColumnDirectionWrapper, ColumnHeaderWrapper, Table } 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;\n    /*\n     * Additional props to add to both header and row cells. Refer to RMWC documentation.\n     */\n    meta?: DataTableCellProps;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n}\n\nexport type Columns<T> = {\n    [P in keyof T]?: Column<T>;\n};\n\nexport type DefaultData = {\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     * Columns definition.\n     */\n    columns: Columns<T>;\n    /*\n     * Data to display into DataTable body.\n     */\n    data: T[];\n    /*\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: T[] | []) => void;\n    /*\n     * Render the skeleton state at the initial data loading.\n     */\n    loadingInitial?: boolean;\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     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /*\n     * Sorting state.\n     */\n    sorting?: Sorting;\n    /*\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnSortingChange;\n}\n\nexport interface ColumnDirectionProps {\n    direction?: \"asc\" | \"desc\";\n}\n\nconst defineColumns = <T,>(\n    columns: Props<T>[\"columns\"],\n    onSelectRow: Props<T>[\"onSelectRow\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): ColumnDef<T>[] =>\n    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 { id, header, meta, cell, enableSorting = false } = 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            };\n        });\n\n        const select: ColumnDef<T>[] = !!onSelectRow\n            ? [\n                  {\n                      id: \"datatable-select-column\",\n                      header: ({ table }) =>\n                          !loadingInitial && (\n                              <Checkbox\n                                  indeterminate={table.getIsSomeRowsSelected()}\n                                  value={table.getIsAllRowsSelected()}\n                                  onChange={e => table.toggleAllPageRowsSelected(e)}\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                          className: \"datatable-select-column\"\n                      },\n                      enableSorting: false\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, loadingInitial]);\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\nexport const DataTable = <T extends Object & DefaultData>({\n    data,\n    columns,\n    onSelectRow,\n    loadingInitial,\n    stickyColumns,\n    stickyRows,\n    bordered,\n    sorting,\n    onSortingChange\n}: Props<T>) => {\n    const [rowSelection, setRowSelection] = React.useState({});\n\n    const table = useReactTable({\n        data: defineData(data, loadingInitial),\n        columns: defineColumns(columns, onSelectRow, loadingInitial),\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        state: {\n            rowSelection,\n            sorting\n        },\n        enableRowSelection: row => row.original.selectable || false,\n        onRowSelectionChange: setRowSelection,\n        enableSorting: !!onSortingChange,\n        manualSorting: true,\n        onSortingChange\n    });\n\n    useEffect(() => {\n        if (onSelectRow && typeof onSelectRow === \"function\") {\n            const dataSelected = table.getSelectedRowModel().flatRows.map(row => row.original);\n            onSelectRow(dataSelected);\n        }\n    }, [rowSelection]);\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                                ({ id, isPlaceholder, column, getContext }) => (\n                                    <DataTableHeadCell key={id} {...column.columnDef.meta}>\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                                    </DataTableHeadCell>\n                                )\n                            )}\n                        </DataTableRow>\n                    ))}\n                </DataTableHead>\n                <DataTableBody>\n                    {table.getRowModel().rows.map(row => (\n                        <DataTableRow\n                            key={row.id}\n                            selected={rowSelection.hasOwnProperty(row.index)}\n                        >\n                            {row.getVisibleCells().map(cell => (\n                                <DataTableCell key={cell.id} {...cell.column.columnDef.meta}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </DataTableCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableBody>\n            </DataTableContent>\n        </Table>\n    );\n};\n"],"mappings":"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"}

package/DataTable/DataTable.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/DataTable/DataTable.stories.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _Story = require("@webiny/storybook-utils/Story");
+var _README = _interopRequireDefault(require("./../DataTable/README.md"));
+var _DataTable = require("./DataTable");
+var story = (0, _react2.storiesOf)("Components/DataTable", module);
+story.add("usage", function () {
+  var data = [{
+    name: "Page 1",
+    createdBy: "John Doe",
+    lastModified: "3 days ago",
+    status: "Draft"
+  }, {
+    name: "Page 2",
+    createdBy: "John Doe",
+    lastModified: "1 day ago",
+    status: "Published"
+  }, {
+    name: "Page 3",
+    createdBy: "John Doe",
+    lastModified: "1 hour ago",
+    status: "Published"
+  }];
+  var columns = {
+    name: {
+      header: "Title"
+    },
+    createdBy: {
+      header: "Author",
+      cell: function cell(row) {
+        return /*#__PURE__*/_react.default.createElement("em", null, row.createdBy.toUpperCase());
+      }
+    },
+    lastModified: {
+      header: "Last Modified"
+    },
+    status: {
+      header: "Status",
+      meta: {
+        alignEnd: true
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "A simple DataTable."
+  }, /*#__PURE__*/_react.default.createElement(_DataTable.DataTable, {
+    data: data,
+    columns: columns
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "DataTable with selectable rows"
+  }, /*#__PURE__*/_react.default.createElement(_DataTable.DataTable, {
+    data: data,
+    columns: columns,
+    onSelectRow: function onSelectRow(row) {
+      return console.log("Do whatever you like with the selected row data", row);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
+    title: "DataTable at initial loading state"
+  }, /*#__PURE__*/_react.default.createElement(_DataTable.DataTable, {
+    data: data,
+    columns: columns,
+    loadingInitial: true
+  })));
+}, {
+  info: {
+    propTables: [_DataTable.DataTable]
+  }
+});

package/DataTable/DataTable.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","data","name","createdBy","lastModified","status","columns","header","cell","row","toUpperCase","meta","alignEnd","readme","console","log","info","propTables","DataTable"],"sources":["DataTable.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../DataTable/README.md\";\nimport { Columns, DataTable } from \"./DataTable\";\n\nconst story = storiesOf(\"Components/DataTable\", module);\n\ninterface Entry {\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\nstory.add(\n    \"usage\",\n    () => {\n        const data: Entry[] = [\n            {\n                name: \"Page 1\",\n                createdBy: \"John Doe\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                name: \"Page 2\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 day ago\",\n                status: \"Published\"\n            },\n            {\n                name: \"Page 3\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            }\n        ];\n\n        const columns: Columns<Entry> = {\n            name: {\n                header: \"Title\"\n            },\n            createdBy: {\n                header: \"Author\",\n                cell: row => <em>{row.createdBy.toUpperCase()}</em>\n            },\n            lastModified: {\n                header: \"Last Modified\"\n            },\n            status: {\n                header: \"Status\",\n                meta: {\n                    alignEnd: true\n                }\n            }\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple DataTable.\"}>\n                    <DataTable data={data} columns={columns} />\n                </StorySandbox>\n                <StorySandbox title={\"DataTable with selectable rows\"}>\n                    <DataTable\n                        data={data}\n                        columns={columns}\n                        onSelectRow={row =>\n                            console.log(\"Do whatever you like with the selected row data\", row)\n                        }\n                    />\n                </StorySandbox>\n                <StorySandbox title={\"DataTable at initial loading state\"}>\n                    <DataTable data={data} columns={columns} loadingInitial={true} />\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [DataTable]\n        }\n    }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,sBAAsB,EAAEC,MAAM,CAAC;AASvDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,IAAa,GAAG,CAClB;IACIC,IAAI,EAAE,QAAQ;IACdC,SAAS,EAAE,UAAU;IACrBC,YAAY,EAAE,YAAY;IAC1BC,MAAM,EAAE;EACZ,CAAC,EACD;IACIH,IAAI,EAAE,QAAQ;IACdC,SAAS,EAAE,UAAU;IACrBC,YAAY,EAAE,WAAW;IACzBC,MAAM,EAAE;EACZ,CAAC,EACD;IACIH,IAAI,EAAE,QAAQ;IACdC,SAAS,EAAE,UAAU;IACrBC,YAAY,EAAE,YAAY;IAC1BC,MAAM,EAAE;EACZ,CAAC,CACJ;EAED,IAAMC,OAAuB,GAAG;IAC5BJ,IAAI,EAAE;MACFK,MAAM,EAAE;IACZ,CAAC;IACDJ,SAAS,EAAE;MACPI,MAAM,EAAE,QAAQ;MAChBC,IAAI,EAAE,cAAAC,GAAG;QAAA,oBAAI,yCAAKA,GAAG,CAACN,SAAS,CAACO,WAAW,EAAE,CAAM;MAAA;IACvD,CAAC;IACDN,YAAY,EAAE;MACVG,MAAM,EAAE;IACZ,CAAC;IACDF,MAAM,EAAE;MACJE,MAAM,EAAE,QAAQ;MAChBI,IAAI,EAAE;QACFC,QAAQ,EAAE;MACd;IACJ;EACJ,CAAC;EAED,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAsB,gBACvC,6BAAC,oBAAS;IAAC,IAAI,EAAEZ,IAAK;IAAC,OAAO,EAAEK;EAAQ,EAAG,CAChC,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAiC,gBAClD,6BAAC,oBAAS;IACN,IAAI,EAAEL,IAAK;IACX,OAAO,EAAEK,OAAQ;IACjB,WAAW,EAAE,qBAAAG,GAAG;MAAA,OACZK,OAAO,CAACC,GAAG,CAAC,iDAAiD,EAAEN,GAAG,CAAC;IAAA;EACtE,EACH,CACS,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAqC,gBACtD,6BAAC,oBAAS;IAAC,IAAI,EAAER,IAAK;IAAC,OAAO,EAAEK,OAAQ;IAAC,cAAc,EAAE;EAAK,EAAG,CACtD,CACX;AAEhB,CAAC,EACD;EACIU,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,oBAAS;EAC1B;AACJ,CAAC,CACJ"}

package/DataTable/README.md

@@ -0,0 +1,72 @@
+# DataTable
+
+### Design
+
+https://material.io/components/data-tables
+
+### Description
+
+Use `DataTable` components to display sets of data across rows and columns.
+
+### Usage
+
+```tsx
+import { DataTable, Columns } from "@webiny/ui/DataTable";
+
+// Declare the data structure.
+interface Entry {
+    name: string;
+    createdBy: string;
+    lastModified: string;
+    status: string;
+}
+
+// Define the data you want to display.
+const data: Entry[] = [
+    {
+        name: "Page 1",
+        createdBy: "John Doe",
+        lastModified: "3 days ago",
+        status: "Draft"
+    },
+    {
+        name: "Page 2",
+        createdBy: "John Doe",
+        lastModified: "1 day ago",
+        status: "Published"
+    },
+    {
+        name: "Page 3",
+        createdBy: "John Doe",
+        lastModified: "1 hour ago",
+        status: "Published"
+    }
+];
+
+// Define the columns structure for your table.
+const columns: Columns<Entry> = {
+    name: {
+        header: "Title"
+    },
+    createdBy: {
+        header: "Author",
+        cell: row => <em>{row.createdBy.toUpperCase()}</em>
+    },
+    lastModified: {
+        header: "Last Modified"
+    },
+    status: {
+        header: "Status",
+        meta: {
+            alignEnd: true
+        }
+    }
+};
+
+...
+
+// Use the <DataTable /> component within your code.
+return(
+    <DataTable data={data} columns={columns} />
+)
+```

package/DataTable/index.d.ts

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

package/DataTable/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _DataTable = require("./DataTable");
+Object.keys(_DataTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DataTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DataTable[key];
+    }
+  });
+});

package/DataTable/index.js.map

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

package/DataTable/styled.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+import { DataTableProps } from "@rmwc/data-table";
+import { ColumnDirectionProps } from "./DataTable";
+interface TableProps extends DataTableProps {
+    bordered?: boolean;
+}
+export declare const Table: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+} & TableProps, {}, {}>;
+interface ColumnHeaderWrapperProps {
+    sortable: boolean;
+}
+export declare const ColumnHeaderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ColumnHeaderWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ColumnDirectionWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ColumnDirectionIcon: import("@emotion/styled").StyledComponent<import("react").SVGProps<SVGSVGElement> & {
+    alt?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & ColumnDirectionProps, {}, {}>;
+export {};

package/DataTable/styled.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = 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 Table = /*#__PURE__*/(0, _styled.default)(_dataTable.DataTable, {
+  label: "Table",
+  target: "er5nqo40"
+})("width:100%;border-width:", function (props) {
+  return props.bordered ? "1px" : "0px";
+}, ";th,td{vertical-align:middle;}.datatable-select-column{width:56px;}");
+exports.Table = Table;
+var ColumnHeaderWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "ColumnHeaderWrapper",
+  target: "er5nqo41"
+})("cursor:", function (props) {
+  return props.sortable ? "pointer" : "cursort";
+}, ";display:flex;align-items:center;justify-content:start;");
+exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
+var ColumnDirectionWrapper = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "ColumnDirectionWrapper",
+  target: "er5nqo42"
+})("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: "er5nqo43"
+})("transform:", function (props) {
+  return props.direction === "asc" ? "rotate(180deg)" : "rotate(0deg)";
+}, ";");
+exports.ColumnDirectionIcon = ColumnDirectionIcon;

package/DataTable/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Table","styled","RmwcDataTable","props","bordered","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 { DataTable as RmwcDataTable, DataTableProps } from \"@rmwc/data-table\";\nimport { ColumnDirectionProps } from \"~/DataTable/DataTable\";\n\ninterface TableProps extends DataTableProps {\n    bordered?: boolean;\n}\n\nexport const Table = styled(RmwcDataTable)<TableProps>`\n    width: 100%;\n    border-width: ${props => (props.bordered ? \"1px\" : \"0px\")};\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n\n    .datatable-select-column {\n        width: 56px;\n    }\n`;\n\ninterface ColumnHeaderWrapperProps {\n    sortable: boolean;\n}\n\nexport const ColumnHeaderWrapper = styled(\"div\")<ColumnHeaderWrapperProps>`\n    cursor: ${props => (props.sortable ? \"pointer\" : \"cursort\")};\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;AAEA;AACA;AAOO,IAAMA,KAAK,oBAAGC,eAAM,EAACC,oBAAa;EAAA;EAAA;AAAA,+BAErB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,QAAQ,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,wEAU5D;AAAC;AAMK,IAAMC,mBAAmB,oBAAGJ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,cACjC,UAAAE,KAAK;EAAA,OAAKA,KAAK,CAACG,QAAQ,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,4DAI9D;AAAC;AAEK,IAAMC,sBAAsB,oBAAGN,eAAM,EAAC,MAAM;EAAA;EAAA;AAAA,4GAOlD;AAAC;AAEK,IAAMO,mBAAmB,oBAAGP,eAAM,EAACQ,8BAAS;EAAA;EAAA;AAAA,iBAClC,UAAAN,KAAK;EAAA,OAAKA,KAAK,CAACO,SAAS,KAAK,KAAK,GAAG,gBAAgB,GAAG,cAAc;AAAA,CAAC,MACxF;AAAC"}

package/DelayedOnChange/DelayedOnChange.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="web" />
+import React from "react";
+interface ApplyValueCb {
+    (value: string, cb: (value: string) => void): void;
+}
+/**
+ * This component is used to wrap Input and Textarea components to optimize form re-render.
+ * These 2 are the only components that trigger form model change on each character input.
+ * This means, whenever you type a letter an entire form re-renders.
+ * On complex forms you will feel and see a significant delay if this component is not used.
+ *
+ * The logic behind this component is to serve as a middleware between Form and Input/Textarea, and only notify form of a change when
+ * a user stops typing for given period of time (400ms by default).
+ */
+interface OnChangeCallable {
+    (value: string, cb?: ApplyValueCb): void;
+}
+interface OnBlurCallable {
+    (ev: React.SyntheticEvent): void;
+}
+interface OnKeyDownCallable {
+    (ev: React.KeyboardEvent<HTMLInputElement>): void;
+}
+interface ChildrenCallableParams {
+    value: string;
+    onChange: OnChangeCallable;
+}
+interface ChildrenCallable {
+    (params: ChildrenCallableParams): React.ReactElement;
+}
+export interface DelayedOnChangeProps {
+    value?: string;
+    delay?: number;
+    onChange?: OnChangeCallable;
+    onBlur?: OnBlurCallable;
+    onKeyDown?: OnKeyDownCallable;
+    children: React.ReactNode | ChildrenCallable;
+}
+export declare const DelayedOnChange: React.FC<DelayedOnChangeProps>;
+export default DelayedOnChange;

package/DelayedOnChange/DelayedOnChange.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DelayedOnChange = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _excluded = ["children"];
+var emptyFunction = function emptyFunction() {
+  return undefined;
+};
+var DelayedOnChange = function DelayedOnChange(_ref) {
+  var children = _ref.children,
+    other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var onChange = other.onChange,
+    _other$delay = other.delay,
+    delay = _other$delay === void 0 ? 400 : _other$delay,
+    initialValue = other.value;
+  var _useState = (0, _react.useState)(initialValue),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  // Sync state and props
+  (0, _react.useEffect)(function () {
+    if (initialValue !== value) {
+      setValue(initialValue);
+    }
+  }, [initialValue]);
+  var localTimeout = _react.default.useRef(null);
+  var applyValue = function applyValue(value) {
+    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : emptyFunction;
+    localTimeout.current && clearTimeout(localTimeout.current);
+    localTimeout.current = null;
+    if (!onChange) {
+      return;
+    }
+    onChange(value, callback);
+  };
+  var onChangeLocal = _react.default.useCallback(function (value) {
+    setValue(value);
+  }, []);
+
+  // this is fired upon change value state
+  var onValueStateChanged = function onValueStateChanged(nextValue) {
+    localTimeout.current && clearTimeout(localTimeout.current);
+    localTimeout.current = null;
+    localTimeout.current = setTimeout(function () {
+      return applyValue(nextValue);
+    }, delay);
+  };
+
+  // need to clear the timeout when unmounting the component
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (!localTimeout.current) {
+        return;
+      }
+      clearTimeout(localTimeout.current);
+      localTimeout.current = null;
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    onValueStateChanged(value || "");
+  }, [value]);
+  var newProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, other), {}, {
+    value: value || "",
+    onChange: onChangeLocal
+  });
+  var renderProp = typeof children === "function" ? children : null;
+  var child = renderProp ? renderProp(newProps) : /*#__PURE__*/_react.default.cloneElement(children, newProps);
+  var props = (0, _objectSpread2.default)({}, child.props);
+  var realOnKeyDown = props.onKeyDown || emptyFunction;
+  var realOnBlur = props.onBlur || emptyFunction;
+
+  // Need to apply value if input lost focus
+  var onBlur = function onBlur(ev) {
+    if (!ev["persist"]) {
+      return;
+    }
+    ev.persist();
+    applyValue(ev.target.value, function () {
+      return realOnBlur(ev);
+    });
+  };
+
+  // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.
+  var onKeyDown = function onKeyDown(ev) {
+    ev.persist();
+    if (ev.key === "Tab") {
+      applyValue(ev.target.value, function () {
+        return realOnKeyDown(ev);
+      });
+    } else if (ev.key === "Enter" && props["data-on-enter"]) {
+      applyValue(ev.target.value, function () {
+        return realOnKeyDown(ev);
+      });
+    } else {
+      realOnKeyDown(ev);
+    }
+  };
+  return /*#__PURE__*/_react.default.cloneElement(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    onBlur: onBlur,
+    onKeyDown: onKeyDown
+  }));
+};
+exports.DelayedOnChange = DelayedOnChange;
+var _default = DelayedOnChange;
+exports.default = _default;

package/DelayedOnChange/DelayedOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["emptyFunction","undefined","DelayedOnChange","children","other","onChange","delay","initialValue","value","useState","setValue","useEffect","localTimeout","React","useRef","applyValue","callback","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, 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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"}

package/DelayedOnChange/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DelayedOnChange } from "./DelayedOnChange";
+export { default as withDelayedOnChange } from "./withDelayedOnChange";