@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.085ff6572f

package/DataTable/DataTable.js

@@ -0,0 +1,198 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread3 = _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, options) {
+  var canSelectAllRows = options.canSelectAllRows,
+    onSelectRow = options.onSelectRow,
+    loadingInitial = options.loadingInitial;
+  return (0, _react.useMemo)(function () {
+    var columnsList = Object.keys(columns).map(function (key) {
+      return (0, _objectSpread3.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,
+        className = column.className;
+      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: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, meta), {}, {
+          className: className
+        })
+      };
+    });
+    var select = !!onSelectRow ? [{
+      id: "datatable-select-column",
+      header: function header(_ref) {
+        var table = _ref.table;
+        if (!canSelectAllRows) {
+          return null;
+        }
+        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, _objectSpread3.default)((0, _objectSpread3.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,
+    isRowSelectable = _ref3.isRowSelectable,
+    _ref3$canSelectAllRow = _ref3.canSelectAllRows,
+    canSelectAllRows = _ref3$canSelectAllRow === void 0 ? true : _ref3$canSelectAllRow,
+    _ref3$selectedRows = _ref3.selectedRows,
+    selectedRows = _ref3$selectedRows === void 0 ? [] : _ref3$selectedRows;
+  var rowSelection = (0, _react.useMemo)(function () {
+    return selectedRows.reduce(function (acc, item) {
+      var recordIndex = data.findIndex(function (rec) {
+        return rec.id === item.id;
+      });
+      return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, acc), {}, (0, _defineProperty2.default)({}, recordIndex, true));
+    }, {});
+  }, [selectedRows, data]);
+  var onRowSelectionChange = function onRowSelectionChange(updater) {
+    if (typeof onSelectRow === "function") {
+      var newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+      var selection = Object.keys(newSelection).map(function (key) {
+        return data[parseInt(key)];
+      });
+      onSelectRow(selection);
+    }
+  };
+  var table = (0, _reactTable.useReactTable)({
+    data: defineData(data, loadingInitial),
+    columns: defineColumns(columns, {
+      canSelectAllRows: canSelectAllRows,
+      onSelectRow: onSelectRow,
+      loadingInitial: loadingInitial
+    }),
+    getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+    getSortedRowModel: (0, _reactTable.getSortedRowModel)(),
+    state: {
+      rowSelection: rowSelection,
+      sorting: sorting
+    },
+    enableRowSelection: isRowSelectable,
+    onRowSelectionChange: onRowSelectionChange,
+    enableSorting: !!onSortingChange,
+    manualSorting: true,
+    onSortingChange: onSortingChange
+  });
+  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: row.getIsSelected()
+    }, 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","options","canSelectAllRows","onSelectRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","id","defaults","column","header","meta","cell","enableSorting","className","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getCanSelect","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","defineData","data","Array","fill","ColumnDirection","direction","DataTable","stickyColumns","stickyRows","bordered","sorting","onSortingChange","isRowSelectable","selectedRows","rowSelection","reduce","acc","item","recordIndex","findIndex","rec","onRowSelectionChange","updater","newSelection","selection","parseInt","useReactTable","getCoreRowModel","getSortedRowModel","state","enableRowSelection","manualSorting","getHeaderGroups","headerGroup","headers","isPlaceholder","getContext","columnDef","getToggleSortingHandler","getCanSort","flexRender","getIsSorted","undefined","getRowModel","rows","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { ReactElement, 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    RowSelectionState,\n    Row\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    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 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     * 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    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, 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 { id, header, meta, cell, enableSorting = false, className } = 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            };\n        });\n\n        const select: ColumnDef<T>[] = !!onSelectRow\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                          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};\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    isRowSelectable,\n    canSelectAllRows = true,\n    selectedRows = []\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        if (typeof onSelectRow === \"function\") {\n            const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n            onSelectRow(selection);\n        }\n    };\n\n    const table = useReactTable({\n        data: defineData(data, loadingInitial),\n        columns: defineColumns(columns, { canSelectAllRows, onSelectRow, loadingInitial }),\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        state: {\n            rowSelection,\n            sorting\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                                ({ 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 key={row.id} selected={row.getIsSelected()}>\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":";;;;;;;;;;;AAAA;AAEA;AAUA;AAYA;AACA;AAEA;AACA;AAsGA,IAAMA,aAAa,GAAG,SAAhBA,aAAa,CACfC,OAA4B,EAC5BC,OAAgC,EACf;EACjB,IAAQC,gBAAgB,GAAkCD,OAAO,CAAzDC,gBAAgB;IAAEC,WAAW,GAAqBF,OAAO,CAAvCE,WAAW;IAAEC,cAAc,GAAKH,OAAO,CAA1BG,cAAc;EAErD,OAAO,IAAAC,cAAO,EAAC,YAAM;IACjB,IAAMC,WAAW,GAAGC,MAAM,CAACC,IAAI,CAACR,OAAO,CAAC,CAACS,GAAG,CAAC,UAAAC,GAAG;MAAA;QAC5CC,EAAE,EAAED;MAAG,GACJV,OAAO,CAACU,GAAG,CAAyB;IAAA,CACzC,CAAC;IAEH,IAAME,QAAwB,GAAGN,WAAW,CAACG,GAAG,CAAC,UAAAI,MAAM,EAAI;MACvD,IAAQF,EAAE,GAA2DE,MAAM,CAAnEF,EAAE;QAAEG,OAAM,GAAmDD,MAAM,CAA/DC,MAAM;QAAEC,IAAI,GAA6CF,MAAM,CAAvDE,IAAI;QAAEC,KAAI,GAAuCH,MAAM,CAAjDG,IAAI;QAAA,wBAAuCH,MAAM,CAA3CI,aAAa;QAAbA,aAAa,sCAAG,KAAK;QAAEC,SAAS,GAAKL,MAAM,CAApBK,SAAS;MAEhE,OAAO;QACHC,WAAW,EAAER,EAAE;QACfG,MAAM,EAAE;UAAA,OAAMA,OAAM;QAAA;QACpBE,IAAI,EAAE,cAAAI,IAAI,EAAI;UACV,IAAIJ,KAAI,IAAI,OAAOA,KAAI,KAAK,UAAU,EAAE;YACpC,OAAOA,KAAI,CAACI,IAAI,CAACC,GAAG,CAACC,QAAQ,CAAC;UAClC,CAAC,MAAM;YACH,OAAOF,IAAI,CAACG,QAAQ,EAAE;UAC1B;QACJ,CAAC;QACDN,aAAa,EAAbA,aAAa;QACbF,IAAI,8DACGA,IAAI;UACPG,SAAS,EAATA;QAAS;MAEjB,CAAC;IACL,CAAC,CAAC;IAEF,IAAMM,MAAsB,GAAG,CAAC,CAACrB,WAAW,GACtC,CACI;MACIQ,EAAE,EAAE,yBAAyB;MAC7BG,MAAM,EAAE,sBAAe;QAAA,IAAZW,KAAK,QAALA,KAAK;QACZ,IAAI,CAACvB,gBAAgB,EAAE;UACnB,OAAO,IAAI;QACf;QAEA,OACI,CAACE,cAAc,iBACX,6BAAC,kBAAQ;UACL,aAAa,EAAEqB,KAAK,CAACC,qBAAqB,EAAG;UAC7C,KAAK,EAAED,KAAK,CAACE,oBAAoB,EAAG;UACpC,QAAQ,EAAE,kBAAAC,CAAC;YAAA,OAAIH,KAAK,CAACI,yBAAyB,CAACD,CAAC,CAAC;UAAA;QAAC,EAEzD;MAET,CAAC;MACDZ,IAAI,EAAE,cAAAI,IAAI,EAAI;QACV,IAAI,CAACA,IAAI,CAACC,GAAG,CAACS,YAAY,EAAE,EAAE;UAC1B,oBAAO,2DAAK;QAChB;QACA,oBACI,6BAAC,kBAAQ;UACL,aAAa,EAAEV,IAAI,CAACC,GAAG,CAACU,iBAAiB,EAAG;UAC5C,KAAK,EAAEX,IAAI,CAACC,GAAG,CAACW,aAAa,EAAG;UAChC,QAAQ,EAAEZ,IAAI,CAACC,GAAG,CAACY,wBAAwB;QAAG,EAChD;MAEV,CAAC;MACDlB,IAAI,EAAE;QACFmB,cAAc,EAAE,IAAI;QACpBhB,SAAS,EAAE;MACf,CAAC;MACDD,aAAa,EAAE;IACnB,CAAC,CACJ,GACD,EAAE;IAER,OAAO,UAAIO,MAAM,mCAAKZ,QAAQ,GAAEH,GAAG,CAAC,UAAAI,MAAM,EAAI;MAC1C,IAAIT,cAAc,EAAE;QAChB,mEACOS,MAAM;UACTG,IAAI,EAAE;YAAA,oBAAM,6BAAC,kBAAQ,OAAG;UAAA;QAAA;MAEhC;MAEA,OAAOH,MAAM;IACjB,CAAC,CAAC;EACN,CAAC,EAAE,CAACb,OAAO,EAAEG,WAAW,EAAEC,cAAc,CAAC,CAAC;AAC9C,CAAC;AAED,IAAM+B,UAAU,GAAG,SAAbA,UAAU,CACZC,IAAsB,EACtBhC,cAA0C,EACpC;EACN,OAAO,IAAAC,cAAO,EAAC,YAAM;IACjB,IAAID,cAAc,EAAE;MAChB,OAAOiC,KAAK,CAAC,EAAE,CAAC,CAACC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC7B;IACA,OAAOF,IAAI;EACf,CAAC,EAAE,CAACA,IAAI,EAAEhC,cAAc,CAAC,CAAC;AAC9B,CAAC;AAED,IAAMmC,eAAe,GAAG,SAAlBA,eAAe,QAAiE;EAAA,IAA3DC,SAAS,SAATA,SAAS;EAChC,IAAIA,SAAS,EAAE;IACX,oBACI,6BAAC,8BAAsB,qBACnB,6BAAC,2BAAmB;MAAC,SAAS,EAAEA;IAAU,EAAG,CACxB;EAEjC;EAEA,OAAO,IAAI;AACf,CAAC;AAEM,IAAMC,SAAS,GAAG,SAAZA,SAAS,QAaN;EAAA,IAZZL,IAAI,SAAJA,IAAI;IACJpC,OAAO,SAAPA,OAAO;IACPG,WAAW,SAAXA,WAAW;IACXC,cAAc,SAAdA,cAAc;IACdsC,aAAa,SAAbA,aAAa;IACbC,UAAU,SAAVA,UAAU;IACVC,QAAQ,SAARA,QAAQ;IACRC,OAAO,SAAPA,OAAO;IACPC,eAAe,SAAfA,eAAe;IACfC,eAAe,SAAfA,eAAe;IAAA,8BACf7C,gBAAgB;IAAhBA,gBAAgB,sCAAG,IAAI;IAAA,2BACvB8C,YAAY;IAAZA,YAAY,mCAAG,EAAE;EAEjB,IAAMC,YAAY,GAAG,IAAA5C,cAAO,EAAC,YAAM;IAC/B,OAAO2C,YAAY,CAACE,MAAM,CAAoB,UAACC,GAAG,EAAEC,IAAI,EAAK;MACzD,IAAMC,WAAW,GAAGjB,IAAI,CAACkB,SAAS,CAAC,UAAAC,GAAG;QAAA,OAAIA,GAAG,CAAC5C,EAAE,KAAKyC,IAAI,CAACzC,EAAE;MAAA,EAAC;MAC7D,mEAAYwC,GAAG,yCAAGE,WAAW,EAAG,IAAI;IACxC,CAAC,EAAE,CAAC,CAAC,CAAC;EACV,CAAC,EAAE,CAACL,YAAY,EAAEZ,IAAI,CAAC,CAAC;EAExB,IAAMoB,oBAAmD,GAAG,SAAtDA,oBAAmD,CAAGC,OAAO,EAAI;IACnE,IAAI,OAAOtD,WAAW,KAAK,UAAU,EAAE;MACnC,IAAMuD,YAAY,GAAG,OAAOD,OAAO,KAAK,UAAU,GAAGA,OAAO,CAACR,YAAY,CAAC,GAAGQ,OAAO;MACpF,IAAME,SAAS,GAAGpD,MAAM,CAACC,IAAI,CAACkD,YAAY,CAAC,CAACjD,GAAG,CAAC,UAAAC,GAAG;QAAA,OAAI0B,IAAI,CAACwB,QAAQ,CAAClD,GAAG,CAAC,CAAC;MAAA,EAAC;MAC3EP,WAAW,CAACwD,SAAS,CAAC;IAC1B;EACJ,CAAC;EAED,IAAMlC,KAAK,GAAG,IAAAoC,yBAAa,EAAC;IACxBzB,IAAI,EAAED,UAAU,CAACC,IAAI,EAAEhC,cAAc,CAAC;IACtCJ,OAAO,EAAED,aAAa,CAACC,OAAO,EAAE;MAAEE,gBAAgB,EAAhBA,gBAAgB;MAAEC,WAAW,EAAXA,WAAW;MAAEC,cAAc,EAAdA;IAAe,CAAC,CAAC;IAClF0D,eAAe,EAAE,IAAAA,2BAAe,GAAE;IAClCC,iBAAiB,EAAE,IAAAA,6BAAiB,GAAE;IACtCC,KAAK,EAAE;MACHf,YAAY,EAAZA,YAAY;MACZJ,OAAO,EAAPA;IACJ,CAAC;IACDoB,kBAAkB,EAAElB,eAAe;IACnCS,oBAAoB,EAApBA,oBAAoB;IACpBvC,aAAa,EAAE,CAAC,CAAC6B,eAAe;IAChCoB,aAAa,EAAE,IAAI;IACnBpB,eAAe,EAAfA;EACJ,CAAC,CAAC;EAEF,oBACI,6BAAC,aAAK;IAAC,aAAa,EAAEJ,aAAc;IAAC,UAAU,EAAEC,UAAW;IAAC,QAAQ,EAAEC;EAAS,gBAC5E,6BAAC,2BAAgB,qBACb,6BAAC,wBAAa,QACTnB,KAAK,CAAC0C,eAAe,EAAE,CAAC1D,GAAG,CAAC,UAAA2D,WAAW;IAAA,oBACpC,6BAAC,uBAAY;MAAC,GAAG,EAAEA,WAAW,CAACzD;IAAG,GAC7ByD,WAAW,CAACC,OAAO,CAAC5D,GAAG,CACpB;MAAA,IAAGE,EAAE,SAAFA,EAAE;QAAE2D,aAAa,SAAbA,aAAa;QAAEzD,MAAM,SAANA,MAAM;QAAE0D,UAAU,SAAVA,UAAU;MAAA,oBACpC,6BAAC,4BAAiB;QAAC,GAAG,EAAE5D;MAAG,GAAKE,MAAM,CAAC2D,SAAS,CAACzD,IAAI,GAChDuD,aAAa,GAAG,IAAI,gBACjB,6BAAC,2BAAmB;QAChB,OAAO,EAAEzD,MAAM,CAAC4D,uBAAuB,EAAG;QAC1C,QAAQ,EAAE5D,MAAM,CAAC6D,UAAU;MAAG,GAE7B,IAAAC,sBAAU,EAAC9D,MAAM,CAAC2D,SAAS,CAAC1D,MAAM,EAAEyD,UAAU,EAAE,CAAC,eAClD,6BAAC,eAAe;QACZ,SAAS,EAAE1D,MAAM,CAAC+D,WAAW,EAAE,IAAIC;MAAU,EAC/C,CAET,CACe;IAAA,CACvB,CACJ,CACU;EAAA,CAClB,CAAC,CACU,eAChB,6BAAC,wBAAa,QACTpD,KAAK,CAACqD,WAAW,EAAE,CAACC,IAAI,CAACtE,GAAG,CAAC,UAAAY,GAAG;IAAA,oBAC7B,6BAAC,uBAAY;MAAC,GAAG,EAAEA,GAAG,CAACV,EAAG;MAAC,QAAQ,EAAEU,GAAG,CAACW,aAAa;IAAG,GACpDX,GAAG,CAAC2D,eAAe,EAAE,CAACvE,GAAG,CAAC,UAAAO,IAAI;MAAA,oBAC3B,6BAAC,wBAAa;QAAC,GAAG,EAAEA,IAAI,CAACL;MAAG,GAAKK,IAAI,CAACH,MAAM,CAAC2D,SAAS,CAACzD,IAAI,GACtD,IAAA4D,sBAAU,EAAC3D,IAAI,CAACH,MAAM,CAAC2D,SAAS,CAACxD,IAAI,EAAEA,IAAI,CAACuD,UAAU,EAAE,CAAC,CAC9C;IAAA,CACnB,CAAC,CACS;EAAA,CAClB,CAAC,CACU,CACD,CACf;AAEhB,CAAC;AAAC"}

package/DataTable/DataTable.stories.d.ts

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

package/DataTable/DataTable.stories.js

@@ -0,0 +1,74 @@
+"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 = [{
+    id: "1",
+    name: "Page 1",
+    createdBy: "John Doe",
+    lastModified: "3 days ago",
+    status: "Draft"
+  }, {
+    id: "2",
+    name: "Page 2",
+    createdBy: "John Doe",
+    lastModified: "1 day ago",
+    status: "Published"
+  }, {
+    id: "3",
+    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","id","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    id: string;\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                id: \"1\",\n                name: \"Page 1\",\n                createdBy: \"John Doe\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                id: \"2\",\n                name: \"Page 2\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 day ago\",\n                status: \"Published\"\n            },\n            {\n                id: \"3\",\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;AAUvDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,IAAa,GAAG,CAClB;IACIC,EAAE,EAAE,GAAG;IACPC,IAAI,EAAE,QAAQ;IACdC,SAAS,EAAE,UAAU;IACrBC,YAAY,EAAE,YAAY;IAC1BC,MAAM,EAAE;EACZ,CAAC,EACD;IACIJ,EAAE,EAAE,GAAG;IACPC,IAAI,EAAE,QAAQ;IACdC,SAAS,EAAE,UAAU;IACrBC,YAAY,EAAE,WAAW;IACzBC,MAAM,EAAE;EACZ,CAAC,EACD;IACIJ,EAAE,EAAE,GAAG;IACPC,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,EAAEb,IAAK;IAAC,OAAO,EAAEM;EAAQ,EAAG,CAChC,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAiC,gBAClD,6BAAC,oBAAS;IACN,IAAI,EAAEN,IAAK;IACX,OAAO,EAAEM,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,EAAET,IAAK;IAAC,OAAO,EAAEM,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 !important;max-width:56px !important;}");
+exports.Table = Table;
+var ColumnHeaderWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "ColumnHeaderWrapper",
+  target: "er5nqo41"
+})("cursor:", function (props) {
+  return props.sortable ? "pointer" : "cursor";
+}, ";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 !important;\n        max-width: 56px !important;\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;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,6GAW5D;AAAC;AAMK,IAAMC,mBAAmB,oBAAGJ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,cACjC,UAAAE,KAAK;EAAA,OAAKA,KAAK,CAACG,QAAQ,GAAG,SAAS,GAAG,QAAQ;AAAA,CAAC,4DAI7D;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;