@webiny/ui 5.37.8 → 5.38.0-beta.1

package/Button/Button.styles.js

@@ -10,4 +10,6 @@ var _emotion = require("emotion");
  * @type {string}
  */
 var webinyButtonStyles = /*#__PURE__*/(0, _emotion.css)("&.webiny-ui-button--secondary:not(:disabled){border-color:var(--mdc-theme-primary);}}label:webinyButtonStyles;");
-exports.webinyButtonStyles = webinyButtonStyles;
+exports.webinyButtonStyles = webinyButtonStyles;
+
+//# sourceMappingURL=Button.styles.js.map

package/Button/CopyButton/CopyButton.js

@@ -29,4 +29,6 @@ var CopyButton = function CopyButton(props) {
     icon: /*#__PURE__*/_react.default.createElement(_file_copy24px.ReactComponent, null)
   }));
 };
-exports.CopyButton = CopyButton;
+exports.CopyButton = CopyButton;
+
+//# sourceMappingURL=CopyButton.js.map

package/Button/CopyButton/CopyButton.stories.js

@@ -18,4 +18,6 @@ story.add("copy button", function () {
   info: {
     propTablesExclude: [_index.Menu, _index.MenuItem, _Story.Story, _Story.StoryReadme, _Story.StorySandbox]
   }
-});
+});
+
+//# sourceMappingURL=CopyButton.stories.js.map

package/Button/IconButton/IconButton.js

@@ -29,4 +29,6 @@ var IconButton = function IconButton(props) {
     ripple: ripple
   });
 };
-exports.IconButton = IconButton;
+exports.IconButton = IconButton;
+
+//# sourceMappingURL=IconButton.js.map

package/Button/IconButton/IconButton.stories.js

@@ -38,4 +38,6 @@ story.add("icon button", function () {
   info: {
     propTablesExclude: [_index.Menu, _index.MenuItem, _Story.Story, _Story.StoryReadme, _Story.StorySandbox]
   }
-});
+});
+
+//# sourceMappingURL=IconButton.stories.js.map

package/Button/index.js

@@ -35,4 +35,6 @@ Object.keys(_CopyButton).forEach(function (key) {
       return _CopyButton[key];
     }
   });
-});
+});
+
+//# sourceMappingURL=index.js.map

package/Carousel/Carousel.js

@@ -42,4 +42,6 @@ var Carousel = /*#__PURE__*/function (_React$Component) {
 });
 (0, _defineProperty2.default)(Carousel, "nukaProps", ["children", "afterSlide", "autoplay", "autoplayInterval", "beforeSlide", "dragging", "easing", "heightMode", "pauseOnHover", "slideIndex", "speed", "swiping", "transitionMode"]);
 var _default = Carousel;
-exports.default = _default;
+exports.default = _default;
+
+//# sourceMappingURL=Carousel.js.map

package/Carousel/Carouser.stories.js

@@ -29,4 +29,6 @@ story.add("usage - single", function () {
   info: {
     propTables: [_Carousel.default]
   }
-});
+});
+
+//# sourceMappingURL=Carouser.stories.js.map

package/Carousel/index.js

@@ -10,4 +10,6 @@ Object.defineProperty(exports, "Carousel", {
     return _Carousel.default;
   }
 });
-var _Carousel = _interopRequireDefault(require("./Carousel"));
+var _Carousel = _interopRequireDefault(require("./Carousel"));
+
+//# sourceMappingURL=index.js.map

package/Checkbox/Checkbox.js

@@ -69,4 +69,6 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
   return Checkbox;
 }(_react.default.Component);
 var _default = Checkbox;
-exports.default = _default;
+exports.default = _default;
+
+//# sourceMappingURL=Checkbox.js.map

package/Checkbox/Checkbox.stories.js

@@ -28,4 +28,6 @@ story.add("usage - single", function () {
   info: {
     propTables: [_Checkbox.default]
   }
-});
+});
+
+//# sourceMappingURL=Checkbox.stories.js.map

package/Checkbox/Checkbox.styles.js

@@ -17,4 +17,6 @@ var webinyCheckboxTitle = /*#__PURE__*/(0, _emotion.css)({}, {
     marginBottom: "5px"
   }
 }, "label:webinyCheckboxTitle;");
-exports.webinyCheckboxTitle = webinyCheckboxTitle;
+exports.webinyCheckboxTitle = webinyCheckboxTitle;
+
+//# sourceMappingURL=Checkbox.styles.js.map

package/Checkbox/CheckboxGroup.js

@@ -59,4 +59,6 @@ var CheckboxGroup = /*#__PURE__*/function (_React$Component) {
   return CheckboxGroup;
 }(_react.default.Component);
 var _default = CheckboxGroup;
-exports.default = _default;
+exports.default = _default;
+
+//# sourceMappingURL=CheckboxGroup.js.map

package/Checkbox/CheckboxGroup.stories.js

@@ -55,4 +55,6 @@ story.add("usage - group", function () {
   info: {
     propTables: [_.CheckboxGroup]
   }
-});
+});
+
+//# sourceMappingURL=CheckboxGroup.stories.js.map

package/Checkbox/index.js

@@ -17,4 +17,6 @@ Object.defineProperty(exports, "CheckboxGroup", {
   }
 });
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup"));
+var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup"));
+
+//# sourceMappingURL=index.js.map

package/Chips/Chip.js

@@ -14,4 +14,6 @@ var Chip = function Chip(props) {
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_chip.Chip, rest, children);
 };
-exports.Chip = Chip;
+exports.Chip = Chip;
+
+//# sourceMappingURL=Chip.js.map

package/Chips/Chips.js

@@ -21,4 +21,6 @@ var Chips = function Chips(props) {
     className: (0, _classnames.default)(className, _styles.chipIconWrapper, (0, _defineProperty2.default)({}, _styles.disabledChips, disabled))
   }), children));
 };
-exports.Chips = Chips;
+exports.Chips = Chips;
+
+//# sourceMappingURL=Chips.js.map

package/Chips/Chips.stories.js

@@ -29,4 +29,6 @@ story.add("usage", function () {
   info: {
     propTables: [_index.Chip, _index.Chips]
   }
-});
+});
+
+//# sourceMappingURL=Chips.stories.js.map

package/Chips/index.js

@@ -24,4 +24,6 @@ Object.keys(_Chip).forEach(function (key) {
       return _Chip[key];
     }
   });
-});
+});
+
+//# sourceMappingURL=index.js.map

package/Chips/styles.js

@@ -24,4 +24,6 @@ var disabledChips = /*#__PURE__*/(0, _emotion.css)({
   opacity: 0.75,
   pointerEvents: "none"
 }, "label:disabledChips;");
-exports.disabledChips = disabledChips;
+exports.disabledChips = disabledChips;
+
+//# sourceMappingURL=styles.js.map

package/CodeEditor/CodeEditor.d.ts

@@ -1,12 +1,15 @@
 import React from "react";
 import { FormComponentProps } from "../types";
 import "brace/mode/html";
+import "brace/mode/json";
+import "brace/ext/searchbox";
 import "brace/theme/github";
 import "brace/theme/twilight";
 import "brace/theme/chrome";
 interface Props extends FormComponentProps {
     mode: string;
     theme: string;
+    readOnly?: boolean;
     description?: React.ReactNode;
 }
 /**

package/CodeEditor/CodeEditor.js

@@ -16,11 +16,14 @@ var _react = _interopRequireDefault(require("react"));
 var _emotion = require("emotion");
 var _reactAce = _interopRequireDefault(require("react-ace"));
 require("brace/mode/html");
+require("brace/mode/json");
+require("brace/ext/searchbox");
 require("brace/theme/github");
 require("brace/theme/twilight");
 require("brace/theme/chrome");
 var _FormElementMessage = require("../FormElementMessage");
 var _excluded = ["value", "description", "validation", "theme"]; // Modes
+// Extensions
 // Themes
 /**
  * Controls the helper text below the checkbox.
@@ -68,7 +71,10 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
         onChange: this.onChange
       }, rest, {
         width: "100%",
-        className: "mdc-text-field"
+        className: "mdc-text-field",
+        editorProps: {
+          $blockScrolling: Infinity // Suppresses scrolling warning in console.
+        }
       })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true,
         className: webinyCheckboxHelperText
@@ -79,4 +85,6 @@ var CodeEditor = /*#__PURE__*/function (_React$Component) {
   }]);
   return CodeEditor;
 }(_react.default.Component);
-exports.CodeEditor = CodeEditor;
+exports.CodeEditor = CodeEditor;
+
+//# sourceMappingURL=CodeEditor.js.map

package/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_reactAce","_FormElementMessage","_excluded","webinyCheckboxHelperText","css","paddingTop","CodeEditor","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","value","props","onChange","_createClass2","key","render","_this$props","description","validation","_this$props$theme","theme","rest","_objectWithoutProperties2","_ref","validationIsValid","isValid","validationMessage","message","createElement","Fragment","Object","assign","String","width","className","FormElementMessage","error","React","Component","exports"],"sources":["CodeEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\n\nimport AceEditor from \"react-ace\";\n// Modes\nimport \"brace/mode/html\";\n// Themes\nimport \"brace/theme/github\";\nimport \"brace/theme/twilight\";\nimport \"brace/theme/chrome\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst webinyCheckboxHelperText = css(\n    {},\n    {\n        \"&.mdc-text-field-helper-text\": {\n            paddingTop: 5\n        }\n    }\n);\n\ninterface Props extends FormComponentProps {\n    mode: string;\n\n    theme: string;\n\n    // Description beneath the input.\n    description?: React.ReactNode;\n}\n\n/**\n * CodeEditor component can be used to store simple boolean values.\n */\nclass CodeEditor extends React.Component<Props> {\n    onChange = (value: string) => {\n        this.props.onChange && this.props.onChange(value);\n    };\n\n    public override render() {\n        const { value, description, validation, theme = \"github\", ...rest } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <AceEditor\n                    value={value ? String(value) : \"\"}\n                    theme={theme}\n                    onChange={this.onChange}\n                    {...rest}\n                    width=\"100%\"\n                    className={\"mdc-text-field\"}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error className={webinyCheckboxHelperText}>\n                        {validationMessage}\n                    </FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage className={webinyCheckboxHelperText}>\n                        {description}\n                    </FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { CodeEditor };\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_reactAce","_FormElementMessage","_excluded","webinyCheckboxHelperText","css","paddingTop","CodeEditor","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","value","props","onChange","_createClass2","key","render","_this$props","description","validation","_this$props$theme","theme","rest","_objectWithoutProperties2","_ref","validationIsValid","isValid","validationMessage","message","createElement","Fragment","Object","assign","String","width","className","editorProps","$blockScrolling","Infinity","FormElementMessage","error","React","Component","exports"],"sources":["CodeEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\n\nimport AceEditor from \"react-ace\";\n// Modes\nimport \"brace/mode/html\";\nimport \"brace/mode/json\";\n// Extensions\nimport \"brace/ext/searchbox\";\n// Themes\nimport \"brace/theme/github\";\nimport \"brace/theme/twilight\";\nimport \"brace/theme/chrome\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst webinyCheckboxHelperText = css(\n    {},\n    {\n        \"&.mdc-text-field-helper-text\": {\n            paddingTop: 5\n        }\n    }\n);\n\ninterface Props extends FormComponentProps {\n    mode: string;\n\n    theme: string;\n\n    readOnly?: boolean;\n\n    // Description beneath the input.\n    description?: React.ReactNode;\n}\n\n/**\n * CodeEditor component can be used to store simple boolean values.\n */\nclass CodeEditor extends React.Component<Props> {\n    onChange = (value: string) => {\n        this.props.onChange && this.props.onChange(value);\n    };\n\n    public override render() {\n        const { value, description, validation, theme = \"github\", ...rest } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <AceEditor\n                    value={value ? String(value) : \"\"}\n                    theme={theme}\n                    onChange={this.onChange}\n                    {...rest}\n                    width=\"100%\"\n                    className={\"mdc-text-field\"}\n                    editorProps={{\n                        $blockScrolling: Infinity // Suppresses scrolling warning in console.\n                    }}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error className={webinyCheckboxHelperText}>\n                        {validationMessage}\n                    </FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage className={webinyCheckboxHelperText}>\n                        {description}\n                    </FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { CodeEditor };\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAEA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEAA,OAAA;AACAA,OAAA;AAEAA,OAAA;AAEAA,OAAA;AACAA,OAAA;AACAA,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAA0D,IAAAI,SAAA,oDAT1D;AAGA;AAEA;AAMA;AACA;AACA;AACA;AACA,IAAMC,wBAAwB,gBAAG,IAAAC,YAAG,EAChC,CAAC,CAAC,EACF;EACI,8BAA8B,EAAE;IAC5BC,UAAU,EAAE;EAChB;AACJ,CAAC,mCACL,CAAC;AAaD;AACA;AACA;AAFA,IAGMC,UAAU,0BAAAC,gBAAA;EAAA,IAAAC,UAAA,CAAAC,OAAA,EAAAH,UAAA,EAAAC,gBAAA;EAAA,IAAAG,MAAA,OAAAC,aAAA,CAAAF,OAAA,EAAAH,UAAA;EAAA,SAAAA,WAAA;IAAA,IAAAM,KAAA;IAAA,IAAAC,gBAAA,CAAAJ,OAAA,QAAAH,UAAA;IAAA,SAAAQ,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAL,IAAA;IAAA,IAAAM,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,eACD,UAACa,KAAa,EAAK;MAC1Bb,KAAA,CAAKc,KAAK,CAACC,QAAQ,IAAIf,KAAA,CAAKc,KAAK,CAACC,QAAQ,CAACF,KAAK,CAAC;IACrD,CAAC;IAAA,OAAAb,KAAA;EAAA;EAAA,IAAAgB,aAAA,CAAAnB,OAAA,EAAAH,UAAA;IAAAuB,GAAA;IAAAJ,KAAA,EAED,SAAAK,OAAA,EAAyB;MACrB,IAAAC,WAAA,GAAsE,IAAI,CAACL,KAAK;QAAxED,KAAK,GAAAM,WAAA,CAALN,KAAK;QAAEO,WAAW,GAAAD,WAAA,CAAXC,WAAW;QAAEC,UAAU,GAAAF,WAAA,CAAVE,UAAU;QAAAC,iBAAA,GAAAH,WAAA,CAAEI,KAAK;QAALA,KAAK,GAAAD,iBAAA,cAAG,QAAQ,GAAAA,iBAAA;QAAKE,IAAI,OAAAC,yBAAA,CAAA5B,OAAA,EAAAsB,WAAA,EAAA7B,SAAA;MAEjE,IAAAoC,IAAA,GAAmEL,UAAU,IAAI,CAAC,CAAC;QAAlEM,iBAAiB,GAAAD,IAAA,CAA1BE,OAAO;QAA8BC,iBAAiB,GAAAH,IAAA,CAA1BI,OAAO;MAE3C,oBACI9C,MAAA,CAAAa,OAAA,CAAAkC,aAAA,CAAC/C,MAAA,CAAAa,OAAK,CAACmC,QAAQ,qBACXhD,MAAA,CAAAa,OAAA,CAAAkC,aAAA,CAAC3C,SAAA,CAAAS,OAAS,EAAAoC,MAAA,CAAAC,MAAA;QACNrB,KAAK,EAAEA,KAAK,GAAGsB,MAAM,CAACtB,KAAK,CAAC,GAAG,EAAG;QAClCU,KAAK,EAAEA,KAAM;QACbR,QAAQ,EAAE,IAAI,CAACA;MAAS,GACpBS,IAAI;QACRY,KAAK,EAAC,MAAM;QACZC,SAAS,EAAE,gBAAiB;QAC5BC,WAAW,EAAE;UACTC,eAAe,EAAEC,QAAQ,CAAC;QAC9B;MAAE,EACL,CAAC,EAEDb,iBAAiB,KAAK,KAAK,iBACxB3C,MAAA,CAAAa,OAAA,CAAAkC,aAAA,CAAC1C,mBAAA,CAAAoD,kBAAkB;QAACC,KAAK;QAACL,SAAS,EAAE9C;MAAyB,GACzDsC,iBACe,CACvB,EAEAF,iBAAiB,KAAK,KAAK,IAAIP,WAAW,iBACvCpC,MAAA,CAAAa,OAAA,CAAAkC,aAAA,CAAC1C,mBAAA,CAAAoD,kBAAkB;QAACJ,SAAS,EAAE9C;MAAyB,GACnD6B,WACe,CAEZ,CAAC;IAEzB;EAAC;EAAA,OAAA1B,UAAA;AAAA,EArCoBiD,cAAK,CAACC,SAAS;AAAAC,OAAA,CAAAnD,UAAA,GAAAA,UAAA"}

package/CodeEditor/CodeEditor.stories.js

@@ -32,4 +32,6 @@ story.add("usage", function () {
   info: {
     propTables: [_CodeEditor.CodeEditor]
   }
-});
+});
+
+//# sourceMappingURL=CodeEditor.stories.js.map

package/CodeEditor/index.js

@@ -13,4 +13,6 @@ Object.keys(_CodeEditor).forEach(function (key) {
       return _CodeEditor[key];
     }
   });
-});
+});
+
+//# sourceMappingURL=index.js.map

package/ColorPicker/ColorPicker.js

@@ -125,4 +125,6 @@ var ColorPicker = /*#__PURE__*/function (_React$Component) {
   }]);
   return ColorPicker;
 }(_react.default.Component);
-exports.ColorPicker = ColorPicker;
+exports.ColorPicker = ColorPicker;
+
+//# sourceMappingURL=ColorPicker.js.map

package/ColorPicker/ColorPicker.stories.js

@@ -30,4 +30,6 @@ story.add("usage", function () {
   info: {
     propTables: [_ColorPicker.ColorPicker]
   }
-});
+});
+
+//# sourceMappingURL=ColorPicker.stories.js.map

package/ColorPicker/index.js

@@ -13,4 +13,6 @@ Object.keys(_ColorPicker).forEach(function (key) {
       return _ColorPicker[key];
     }
   });
-});
+});
+
+//# sourceMappingURL=index.js.map

package/ConfirmationDialog/ConfirmationDialog.js

@@ -141,4 +141,6 @@ exports.ConfirmationDialog = ConfirmationDialog;
   title: "Confirmation",
   message: "Are you sure you want to continue?",
   loading: /*#__PURE__*/_react.default.createElement(_Progress.CircularProgress, null)
-});
+});
+
+//# sourceMappingURL=ConfirmationDialog.js.map

package/ConfirmationDialog/ConfirmationDialog.stories.js

@@ -30,4 +30,6 @@ story.add("usage", function () {
   info: {
     propTables: [_ConfirmationDialog.ConfirmationDialog]
   }
-});
+});
+
+//# sourceMappingURL=ConfirmationDialog.stories.js.map

package/ConfirmationDialog/index.js

@@ -24,4 +24,6 @@ Object.keys(_withConfirmation).forEach(function (key) {
       return _withConfirmation[key];
     }
   });
-});
+});
+
+//# sourceMappingURL=index.js.map

package/ConfirmationDialog/withConfirmation.js

@@ -20,4 +20,6 @@ var withConfirmation = function withConfirmation(dialogProps) {
     };
   };
 };
-exports.withConfirmation = withConfirmation;
+exports.withConfirmation = withConfirmation;
+
+//# sourceMappingURL=withConfirmation.js.map

package/DataTable/DataTable.d.ts

@@ -4,10 +4,12 @@ import { OnChangeFn, SortingState, Row } from "@tanstack/react-table";
 import "@rmwc/data-table/data-table.css";
 interface Column<T> {
     header: string | number | JSX.Element;
-    cell?: (row: T) => string | number | JSX.Element;
+    cell?: (row: T) => string | number | JSX.Element | null;
     meta?: DataTableCellProps;
+    size?: number;
     className?: string;
     enableSorting?: boolean;
+    enableResizing?: boolean;
 }
 export declare type Columns<T> = {
     [P in keyof T]?: Column<T>;
@@ -47,6 +49,10 @@ interface Props<T> {
      * Callback that receives the selected rows.
      */
     onSelectRow?: (rows: T[]) => void;
+    /**
+     * Callback that receives the toggled row.
+     */
+    onToggleRow?: (row: T) => void;
     /**
      * Callback that receives current sorting state.
      */
@@ -59,6 +65,10 @@ interface Props<T> {
      * Sorting state.
      */
     sorting?: Sorting;
+    /**
+     * Initial sorting state.
+     */
+    initialSorting?: Sorting;
     /**
      * The number of columns to affix to the side of the table when scrolling.
      */
@@ -71,5 +81,5 @@ interface Props<T> {
 export interface ColumnDirectionProps {
     direction?: "asc" | "desc";
 }
-export declare const DataTable: <T extends Object & DefaultData>({ data, columns, onSelectRow, loadingInitial, stickyColumns, stickyRows, bordered, sorting, onSortingChange, isRowSelectable, canSelectAllRows, selectedRows }: Props<T>) => JSX.Element;
+export declare const DataTable: <T extends Object & DefaultData>({ data, columns, onSelectRow, onToggleRow, loadingInitial, stickyColumns, stickyRows, bordered, sorting, onSortingChange, isRowSelectable, canSelectAllRows, selectedRows, initialSorting }: Props<T>) => JSX.Element;
 export {};

package/DataTable/DataTable.js

@@ -19,6 +19,7 @@ var _styled = require("./styled");
 var defineColumns = function defineColumns(columns, options) {
   var canSelectAllRows = options.canSelectAllRows,
     onSelectRow = options.onSelectRow,
+    onToggleRow = options.onToggleRow,
     loadingInitial = options.loadingInitial;
   return (0, _react.useMemo)(function () {
     var columnsList = Object.keys(columns).map(function (key) {
@@ -27,13 +28,17 @@ var defineColumns = function defineColumns(columns, options) {
       }, columns[key]);
     });
     var defaults = columnsList.map(function (column) {
-      var id = column.id,
-        _header = column.header,
-        meta = column.meta,
-        _cell = column.cell,
+      var _cell = column.cell,
+        className = column.className,
+        _column$enableResizin = column.enableResizing,
+        enableResizing = _column$enableResizin === void 0 ? true : _column$enableResizin,
         _column$enableSorting = column.enableSorting,
         enableSorting = _column$enableSorting === void 0 ? false : _column$enableSorting,
-        className = column.className;
+        _header = column.header,
+        id = column.id,
+        meta = column.meta,
+        _column$size = column.size,
+        size = _column$size === void 0 ? 200 : _column$size;
       return {
         accessorKey: id,
         header: function header() {
@@ -49,10 +54,13 @@ var defineColumns = function defineColumns(columns, options) {
         enableSorting: enableSorting,
         meta: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, meta), {}, {
           className: className
-        })
+        }),
+        enableResizing: enableResizing,
+        size: size
       };
     });
-    var select = !!onSelectRow ? [{
+    var isSelectable = onToggleRow || onSelectRow;
+    var select = isSelectable ? [{
       id: "datatable-select-column",
       header: function header(_ref) {
         var table = _ref.table;
@@ -78,10 +86,11 @@ var defineColumns = function defineColumns(columns, options) {
         });
       },
       meta: {
-        hasFormControl: true,
-        className: "datatable-select-column"
+        hasFormControl: true
       },
-      enableSorting: false
+      enableSorting: false,
+      enableResizing: false,
+      size: 56
     }] : [];
     return [].concat(select, (0, _toConsumableArray2.default)(defaults)).map(function (column) {
       if (loadingInitial) {
@@ -93,7 +102,7 @@ var defineColumns = function defineColumns(columns, options) {
       }
       return column;
     });
-  }, [columns, onSelectRow, loadingInitial]);
+  }, [columns, onSelectRow, onToggleRow, loadingInitial]);
 };
 var defineData = function defineData(data, loadingInitial) {
   return (0, _react.useMemo)(function () {
@@ -115,7 +124,11 @@ var ColumnDirection = function ColumnDirection(_ref2) {
 var typedMemo = _react.memo;
 var TableCell = function TableCell(_ref3) {
   var cell = _ref3.cell;
-  return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableCell, cell.column.columnDef.meta, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
+  return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableCell, Object.assign({}, cell.column.columnDef.meta, {
+    style: {
+      width: cell.column.getSize()
+    }
+  }), (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
 };
 var MemoTableCell = typedMemo(TableCell);
 var TableRow = function TableRow(_ref4) {
@@ -135,6 +148,7 @@ var DataTable = function DataTable(_ref5) {
   var data = _ref5.data,
     columns = _ref5.columns,
     onSelectRow = _ref5.onSelectRow,
+    onToggleRow = _ref5.onToggleRow,
     loadingInitial = _ref5.loadingInitial,
     stickyColumns = _ref5.stickyColumns,
     stickyRows = _ref5.stickyRows,
@@ -145,7 +159,8 @@ var DataTable = function DataTable(_ref5) {
     _ref5$canSelectAllRow = _ref5.canSelectAllRows,
     canSelectAllRows = _ref5$canSelectAllRow === void 0 ? true : _ref5$canSelectAllRow,
     _ref5$selectedRows = _ref5.selectedRows,
-    selectedRows = _ref5$selectedRows === void 0 ? [] : _ref5$selectedRows;
+    selectedRows = _ref5$selectedRows === void 0 ? [] : _ref5$selectedRows,
+    initialSorting = _ref5.initialSorting;
   var rowSelection = (0, _react.useMemo)(function () {
     return selectedRows.reduce(function (acc, item) {
       var recordIndex = data.findIndex(function (rec) {
@@ -155,26 +170,55 @@ var DataTable = function DataTable(_ref5) {
     }, {});
   }, [selectedRows, data]);
   var onRowSelectionChange = function onRowSelectionChange(updater) {
-    if (typeof onSelectRow === "function") {
-      var newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+    var newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+
+    /**
+     * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us
+     * the new selection state (an object with row indexes that are currently selected).
+     *
+     * To figure out what row was toggled, we need to calculate the difference between the old selection
+     * and the new selection. What we're doing here is:
+     * - find all items that were present in the previous selection, but are no longer present in the new selection
+     * - find all items that are present in the new selection, but were not present in the previous selection
+     */
+    var toggledRows = [].concat((0, _toConsumableArray2.default)(Object.keys(rowSelection).filter(function (x) {
+      return !(x in newSelection);
+    })), (0, _toConsumableArray2.default)(Object.keys(newSelection).filter(function (x) {
+      return !(x in rowSelection);
+    })));
+
+    // If the difference is only 1 item, and `onToggleRow` is available, execute that.
+    if (toggledRows.length === 1 && typeof onToggleRow === "function") {
+      onToggleRow(data[parseInt(toggledRows[0])]);
+      return;
+    } else if (typeof onSelectRow === "function") {
       var selection = Object.keys(newSelection).map(function (key) {
         return data[parseInt(key)];
       });
       onSelectRow(selection);
     }
   };
+  var tableSorting = (0, _react.useMemo)(function () {
+    if (!Array.isArray(sorting) || !sorting.length) {
+      return initialSorting;
+    }
+    return sorting;
+  }, [sorting]);
   var table = (0, _reactTable.useReactTable)({
     data: defineData(data, loadingInitial),
     columns: defineColumns(columns, {
       canSelectAllRows: canSelectAllRows,
       onSelectRow: onSelectRow,
+      onToggleRow: onToggleRow,
       loadingInitial: loadingInitial
     }),
+    enableColumnResizing: true,
+    columnResizeMode: "onChange",
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
     getSortedRowModel: (0, _reactTable.getSortedRowModel)(),
     state: {
       rowSelection: rowSelection,
-      sorting: sorting
+      sorting: tableSorting
     },
     enableRowSelection: isRowSelectable,
     onRowSelectionChange: onRowSelectionChange,
@@ -193,15 +237,27 @@ var DataTable = function DataTable(_ref5) {
       var id = _ref6.id,
         isPlaceholder = _ref6.isPlaceholder,
         column = _ref6.column,
-        getContext = _ref6.getContext;
-      return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableHeadCell, Object.assign({
+        getContext = _ref6.getContext,
+        colSpan = _ref6.colSpan,
+        getSize = _ref6.getSize,
+        getResizeHandler = _ref6.getResizeHandler;
+      return /*#__PURE__*/_react.default.createElement(_styled.TableHeadCell, Object.assign({
         key: id
-      }, column.columnDef.meta), isPlaceholder ? null : /*#__PURE__*/_react.default.createElement(_styled.ColumnHeaderWrapper, {
+      }, column.columnDef.meta, {
+        colSpan: colSpan,
+        style: {
+          width: getSize()
+        }
+      }), 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
-      })));
+      })), column.getCanResize() && /*#__PURE__*/_react.default.createElement(_styled.Resizer, {
+        onMouseDown: getResizeHandler(),
+        onTouchStart: getResizeHandler(),
+        isResizing: column.getIsResizing()
+      }));
     }));
   })), /*#__PURE__*/_react.default.createElement(_dataTable.DataTableBody, null, table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/_react.default.createElement(MemoTableRow, {
@@ -211,4 +267,6 @@ var DataTable = function DataTable(_ref5) {
     });
   }))));
 };
-exports.DataTable = DataTable;
+exports.DataTable = DataTable;
+
+//# sourceMappingURL=DataTable.js.map