@webiny/ui 0.0.0-unstable.bca7b3e350 → 0.0.0-unstable.c59b9cc5b9

package/Accordion/AccordionItem.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="web" />
 import React from "react";
 import { AccordionItemAction, AccordionItemActions } from "./AccordionItemActions";
-declare const Divider: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>, keyof React.HTMLAttributes<HTMLSpanElement>>, object>;
+declare const Divider: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export interface AccordionItemProps {
     /**
      * Can user toggle the accordion item by clicking it? Defaults to `true`.

package/Checkbox/Checkbox.d.ts

@@ -7,6 +7,7 @@ interface Props extends FormComponentProps {
     onClick?: (value: boolean) => void;
     indeterminate?: boolean;
     description?: string;
+    "data-testid"?: string;
 }
 /**
  * Single Checkbox component can be used to store simple boolean values.

package/Checkbox/Checkbox.js

@@ -59,7 +59,8 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         }
         // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.
         ,
-        label: label
+        label: label,
+        "data-testid": this.props["data-testid"]
       }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
       }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));

package/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["Checkbox","e","props","onChange","target","checked","value","label","disabled","indeterminate","description","validation","onClick","validationIsValid","isValid","validationMessage","message","Boolean","React","Component"],"sources":["Checkbox.tsx"],"sourcesContent":["import React from \"react\";\nimport { Checkbox as RmwcCheckbox } from \"@rmwc/checkbox\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\n\ninterface Props extends FormComponentProps {\n    // Component label.\n    label?: React.ReactNode;\n\n    // Is checkbox disabled?\n    disabled?: boolean;\n\n    // onClick callback.\n    onClick?: (value: boolean) => void;\n\n    // Use when checkbox is not checked nor unchecked.\n    indeterminate?: boolean;\n\n    // Description beneath the checkbox.\n    description?: string;\n}\n\n/**\n * Single Checkbox component can be used to store simple boolean values.\n *\n * Grouping multiple Checkbox components with CheckboxGroup will allow to store an array of selected values.\n * In that case, each Checkbox component must receive value and onChange callback via props.\n */\nclass Checkbox extends React.Component<Props> {\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        this.props.onChange && this.props.onChange((e.target as any).checked);\n    };\n\n    public override render() {\n        const { value, label, disabled, indeterminate, description, validation, onClick } =\n            this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <RmwcCheckbox\n                    indeterminate={indeterminate}\n                    disabled={disabled}\n                    checked={Boolean(value)}\n                    onChange={this.onChange}\n                    onClick={() => typeof onClick === \"function\" && onClick(Boolean(value))}\n                    // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.\n                    label={label}\n                />\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AAoBA;AACA;AACA;AACA;AACA;AACA;AALA,IAMMA,QAAQ;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uFACC,UAACC,CAAyC,EAAK;MACtD,MAAKC,KAAK,CAACC,QAAQ,IAAI,MAAKD,KAAK,CAACC,QAAQ,CAAEF,CAAC,CAACG,MAAM,CAASC,OAAO,CAAC;IACzE,CAAC;IAAA;EAAA;EAAA;IAAA;IAAA,OAED,kBAAyB;MACrB,kBACI,IAAI,CAACH,KAAK;QADNI,KAAK,eAALA,KAAK;QAAEC,KAAK,eAALA,KAAK;QAAEC,QAAQ,eAARA,QAAQ;QAAEC,aAAa,eAAbA,aAAa;QAAEC,WAAW,eAAXA,WAAW;QAAEC,UAAU,eAAVA,UAAU;QAAEC,QAAO,eAAPA,OAAO;MAG/E,WAAmED,UAAU,IAAI,CAAC,CAAC;QAAlEE,iBAAiB,QAA1BC,OAAO;QAA8BC,iBAAiB,QAA1BC,OAAO;MAE3C,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,kBAAY;QACT,aAAa,EAAEP,aAAc;QAC7B,QAAQ,EAAED,QAAS;QACnB,OAAO,EAAES,OAAO,CAACX,KAAK,CAAE;QACxB,QAAQ,EAAE,IAAI,CAACH,QAAS;QACxB,OAAO,EAAE;UAAA,OAAM,OAAOS,QAAO,KAAK,UAAU,IAAIA,QAAO,CAACK,OAAO,CAACX,KAAK,CAAC,CAAC;QAAA;QACvE;QAAA;QACA,KAAK,EAAEC;MAAM,EACf,EACDM,iBAAiB,KAAK,KAAK,iBACxB,6BAAC,sCAAkB;QAAC,KAAK;MAAA,GAAEE,iBAAiB,CAC/C,EAEAF,iBAAiB,KAAK,KAAK,IAAIH,WAAW,iBACvC,6BAAC,sCAAkB,QAAEA,WAAW,CACnC,CACY;IAEzB;EAAC;EAAA;AAAA,EA/BkBQ,cAAK,CAACC,SAAS;AAAA,eAkCvBnB,QAAQ;AAAA"}
+{"version":3,"names":["Checkbox","e","props","onChange","target","checked","value","label","disabled","indeterminate","description","validation","onClick","validationIsValid","isValid","validationMessage","message","Boolean","React","Component"],"sources":["Checkbox.tsx"],"sourcesContent":["import React from \"react\";\nimport { Checkbox as RmwcCheckbox } from \"@rmwc/checkbox\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\n\ninterface Props extends FormComponentProps {\n    // Component label.\n    label?: React.ReactNode;\n\n    // Is checkbox disabled?\n    disabled?: boolean;\n\n    // onClick callback.\n    onClick?: (value: boolean) => void;\n\n    // Use when checkbox is not checked nor unchecked.\n    indeterminate?: boolean;\n\n    // Description beneath the checkbox.\n    description?: string;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\n/**\n * Single Checkbox component can be used to store simple boolean values.\n *\n * Grouping multiple Checkbox components with CheckboxGroup will allow to store an array of selected values.\n * In that case, each Checkbox component must receive value and onChange callback via props.\n */\nclass Checkbox extends React.Component<Props> {\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        this.props.onChange && this.props.onChange((e.target as any).checked);\n    };\n\n    public override render() {\n        const { value, label, disabled, indeterminate, description, validation, onClick } =\n            this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <RmwcCheckbox\n                    indeterminate={indeterminate}\n                    disabled={disabled}\n                    checked={Boolean(value)}\n                    onChange={this.onChange}\n                    onClick={() => typeof onClick === \"function\" && onClick(Boolean(value))}\n                    // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.\n                    label={label}\n                    data-testid={this.props[\"data-testid\"]}\n                />\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AAuBA;AACA;AACA;AACA;AACA;AACA;AALA,IAMMA,QAAQ;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uFACC,UAACC,CAAyC,EAAK;MACtD,MAAKC,KAAK,CAACC,QAAQ,IAAI,MAAKD,KAAK,CAACC,QAAQ,CAAEF,CAAC,CAACG,MAAM,CAASC,OAAO,CAAC;IACzE,CAAC;IAAA;EAAA;EAAA;IAAA;IAAA,OAED,kBAAyB;MACrB,kBACI,IAAI,CAACH,KAAK;QADNI,KAAK,eAALA,KAAK;QAAEC,KAAK,eAALA,KAAK;QAAEC,QAAQ,eAARA,QAAQ;QAAEC,aAAa,eAAbA,aAAa;QAAEC,WAAW,eAAXA,WAAW;QAAEC,UAAU,eAAVA,UAAU;QAAEC,QAAO,eAAPA,OAAO;MAG/E,WAAmED,UAAU,IAAI,CAAC,CAAC;QAAlEE,iBAAiB,QAA1BC,OAAO;QAA8BC,iBAAiB,QAA1BC,OAAO;MAE3C,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,kBAAY;QACT,aAAa,EAAEP,aAAc;QAC7B,QAAQ,EAAED,QAAS;QACnB,OAAO,EAAES,OAAO,CAACX,KAAK,CAAE;QACxB,QAAQ,EAAE,IAAI,CAACH,QAAS;QACxB,OAAO,EAAE;UAAA,OAAM,OAAOS,QAAO,KAAK,UAAU,IAAIA,QAAO,CAACK,OAAO,CAACX,KAAK,CAAC,CAAC;QAAA;QACvE;QAAA;QACA,KAAK,EAAEC,KAAM;QACb,eAAa,IAAI,CAACL,KAAK,CAAC,aAAa;MAAE,EACzC,EACDW,iBAAiB,KAAK,KAAK,iBACxB,6BAAC,sCAAkB;QAAC,KAAK;MAAA,GAAEE,iBAAiB,CAC/C,EAEAF,iBAAiB,KAAK,KAAK,IAAIH,WAAW,iBACvC,6BAAC,sCAAkB,QAAEA,WAAW,CACnC,CACY;IAEzB;EAAC;EAAA;AAAA,EAhCkBQ,cAAK,CAACC,SAAS;AAAA,eAmCvBnB,QAAQ;AAAA"}

package/ConfirmationDialog/ConfirmationDialog.js

@@ -16,6 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _Dialog = require("./../Dialog");
 var _Progress = require("../Progress");
+var _Button = require("../Button");
 /**
  * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.
  */
@@ -124,7 +125,7 @@ var ConfirmationDialog = /*#__PURE__*/function (_React$Component) {
         "data-testid": this.props["data-testid"]
       }, this.state.loading ? this.props.loading : null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, this.props.title), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, this.props.message), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogCancel, {
         onClick: this.onCancel
-      }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Dialog.DialogButton, {
+      }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
         "data-testid": "confirmationdialog-confirm-action",
         onClick: this.onAccept,
         disabled: this.props.disableConfirm

package/ConfirmationDialog/ConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["ConfirmationDialog","onAccept","onCancel","show","loading","callbacks","setState","__isMounted","props","style","state","hideConfirmation","title","message","disableConfirm","children","showConfirmation","React","Component"],"sources":["ConfirmationDialog.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    Dialog,\n    DialogButton,\n    DialogCancel,\n    DialogActions,\n    DialogTitle,\n    DialogContent\n} from \"./../Dialog\";\n\nimport { CircularProgress } from \"../Progress\";\n\ninterface ChildrenRenderProp {\n    showConfirmation: (onAccept?: () => void, onCancel?: () => void) => any;\n}\n\ninterface ConfirmationCallbacks {\n    onAccept?: () => void;\n    onCancel?: () => void;\n}\n\ninterface Props {\n    // Title of confirmation dialog\n    title?: React.ReactNode;\n\n    // Message of confirmation dialog\n    message?: React.ReactNode;\n\n    // This element will be rendered during loading\n    loading?: React.ReactNode;\n\n    // For testing purposes\n    \"data-testid\"?: string;\n\n    // An element that will trigger the confirmation dialog.\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n\n    // Is `Confirm` button disabled\n    disableConfirm?: boolean;\n\n    // Dialog component's custom in-line styles.\n    style?: React.CSSProperties;\n}\n\ninterface ConfirmationDialogState {\n    show: boolean;\n    loading: boolean;\n}\n\n/**\n * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.\n */\nclass ConfirmationDialog extends React.Component<Props, ConfirmationDialogState> {\n    static defaultProps = {\n        title: \"Confirmation\",\n        message: \"Are you sure you want to continue?\",\n        loading: <CircularProgress />\n    };\n\n    __isMounted = false;\n\n    callbacks: ConfirmationCallbacks = {\n        onAccept: () => {\n            return void 0;\n        },\n        onCancel: () => {\n            return void 0;\n        }\n    };\n\n    public override state = {\n        show: false,\n        loading: false\n    };\n\n    public override componentDidMount() {\n        this.__isMounted = true;\n    }\n\n    public override componentWillUnmount() {\n        this.__isMounted = false;\n    }\n\n    private readonly showConfirmation = (onAccept?: () => void, onCancel?: () => void) => {\n        this.callbacks = {\n            onAccept,\n            onCancel\n        };\n        this.setState({ show: true });\n    };\n\n    private readonly hideConfirmation = () => {\n        this.setState({ show: false });\n    };\n\n    private readonly onAccept = async () => {\n        const { onAccept } = this.callbacks;\n        if (typeof onAccept === \"function\") {\n            this.setState({ loading: true });\n            await onAccept();\n            if (this.__isMounted) {\n                this.setState({ loading: false, show: false });\n            }\n        }\n    };\n\n    private readonly onCancel = async () => {\n        const { onCancel } = this.callbacks;\n        if (typeof onCancel === \"function\") {\n            await onCancel();\n        }\n    };\n\n    public override render() {\n        return (\n            <React.Fragment>\n                <Dialog\n                    style={this.props.style}\n                    open={this.state.show}\n                    onClose={this.hideConfirmation}\n                    data-testid={this.props[\"data-testid\"]}\n                >\n                    {this.state.loading ? this.props.loading : null}\n                    <DialogTitle>{this.props.title}</DialogTitle>\n                    <DialogContent>{this.props.message}</DialogContent>\n                    <DialogActions>\n                        <DialogCancel onClick={this.onCancel}>Cancel</DialogCancel>\n                        <DialogButton\n                            data-testid=\"confirmationdialog-confirm-action\"\n                            onClick={this.onAccept}\n                            disabled={this.props.disableConfirm}\n                        >\n                            Confirm\n                        </DialogButton>\n                    </DialogActions>\n                </Dialog>\n                {this.props.children({\n                    showConfirmation: this.showConfirmation\n                })}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { ConfirmationDialog };\n"],"mappings":"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"}
+{"version":3,"names":["ConfirmationDialog","onAccept","onCancel","show","loading","callbacks","setState","__isMounted","props","style","state","hideConfirmation","title","message","disableConfirm","children","showConfirmation","React","Component"],"sources":["ConfirmationDialog.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Dialog, DialogCancel, DialogActions, DialogTitle, DialogContent } from \"./../Dialog\";\n\nimport { CircularProgress } from \"../Progress\";\nimport { ButtonPrimary } from \"~/Button\";\n\ninterface ChildrenRenderProp {\n    showConfirmation: (onAccept?: () => void, onCancel?: () => void) => any;\n}\n\ninterface ConfirmationCallbacks {\n    onAccept?: () => void;\n    onCancel?: () => void;\n}\n\ninterface Props {\n    // Title of confirmation dialog\n    title?: React.ReactNode;\n\n    // Message of confirmation dialog\n    message?: React.ReactNode;\n\n    // This element will be rendered during loading\n    loading?: React.ReactNode;\n\n    // For testing purposes\n    \"data-testid\"?: string;\n\n    // An element that will trigger the confirmation dialog.\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n\n    // Is `Confirm` button disabled\n    disableConfirm?: boolean;\n\n    // Dialog component's custom in-line styles.\n    style?: React.CSSProperties;\n}\n\ninterface ConfirmationDialogState {\n    show: boolean;\n    loading: boolean;\n}\n\n/**\n * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.\n */\nclass ConfirmationDialog extends React.Component<Props, ConfirmationDialogState> {\n    static defaultProps = {\n        title: \"Confirmation\",\n        message: \"Are you sure you want to continue?\",\n        loading: <CircularProgress />\n    };\n\n    __isMounted = false;\n\n    callbacks: ConfirmationCallbacks = {\n        onAccept: () => {\n            return void 0;\n        },\n        onCancel: () => {\n            return void 0;\n        }\n    };\n\n    public override state = {\n        show: false,\n        loading: false\n    };\n\n    public override componentDidMount() {\n        this.__isMounted = true;\n    }\n\n    public override componentWillUnmount() {\n        this.__isMounted = false;\n    }\n\n    private readonly showConfirmation = (onAccept?: () => void, onCancel?: () => void) => {\n        this.callbacks = {\n            onAccept,\n            onCancel\n        };\n        this.setState({ show: true });\n    };\n\n    private readonly hideConfirmation = () => {\n        this.setState({ show: false });\n    };\n\n    private readonly onAccept = async () => {\n        const { onAccept } = this.callbacks;\n        if (typeof onAccept === \"function\") {\n            this.setState({ loading: true });\n            await onAccept();\n            if (this.__isMounted) {\n                this.setState({ loading: false, show: false });\n            }\n        }\n    };\n\n    private readonly onCancel = async () => {\n        const { onCancel } = this.callbacks;\n        if (typeof onCancel === \"function\") {\n            await onCancel();\n        }\n    };\n\n    public override render() {\n        return (\n            <React.Fragment>\n                <Dialog\n                    style={this.props.style}\n                    open={this.state.show}\n                    onClose={this.hideConfirmation}\n                    data-testid={this.props[\"data-testid\"]}\n                >\n                    {this.state.loading ? this.props.loading : null}\n                    <DialogTitle>{this.props.title}</DialogTitle>\n                    <DialogContent>{this.props.message}</DialogContent>\n                    <DialogActions>\n                        <DialogCancel onClick={this.onCancel}>Cancel</DialogCancel>\n                        <ButtonPrimary\n                            data-testid=\"confirmationdialog-confirm-action\"\n                            onClick={this.onAccept}\n                            disabled={this.props.disableConfirm}\n                        >\n                            Confirm\n                        </ButtonPrimary>\n                    </DialogActions>\n                </Dialog>\n                {this.props.children({\n                    showConfirmation: this.showConfirmation\n                })}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { ConfirmationDialog };\n"],"mappings":"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"}

package/DataTable/DataTable.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import { DataTableCellProps } from "@rmwc/data-table";
+import { OnChangeFn, SortingState } 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;
     meta?: DataTableCellProps;
     className?: string;
+    enableSorting?: boolean;
 }
 export declare type Columns<T> = {
     [P in keyof T]?: Column<T>;
@@ -13,6 +15,8 @@ export declare type Columns<T> = {
 export declare type DefaultData = {
     selectable?: boolean;
 };
+export declare type Sorting = SortingState;
+export declare type OnSortingChange = OnChangeFn<Sorting>;
 interface Props<T> {
     columns: Columns<T>;
     data: T[];
@@ -20,6 +24,12 @@ interface Props<T> {
     loadingInitial?: boolean;
     stickyColumns?: number;
     stickyRows?: number;
+    bordered?: boolean;
+    sorting?: Sorting;
+    onSortingChange?: OnSortingChange;
 }
-export declare const DataTable: <T extends Object & DefaultData>({ data, columns, onSelectRow, loadingInitial, stickyColumns, stickyRows }: Props<T>) => JSX.Element;
+export interface ColumnDirectionProps {
+    direction?: "asc" | "desc";
+}
+export declare const DataTable: <T extends Object & DefaultData>({ data, columns, onSelectRow, loadingInitial, stickyColumns, stickyRows, bordered, sorting, onSortingChange }: Props<T>) => JSX.Element;
 export {};

package/DataTable/DataTable.js

@@ -27,7 +27,10 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
       var id = column.id,
         _header = column.header,
         meta = column.meta,
-        _cell = column.cell;
+        _cell = column.cell,
+        _column$enableSorting = column.enableSorting,
+        enableSorting = _column$enableSorting === void 0 ? false : _column$enableSorting,
+        className = column.className;
       return {
         accessorKey: id,
         header: function header() {
@@ -40,7 +43,10 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
             return info.getValue();
           }
         },
-        meta: meta
+        enableSorting: enableSorting,
+        meta: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, meta), {}, {
+          className: className
+        })
       };
     });
     var select = !!onSelectRow ? [{
@@ -68,7 +74,8 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
       meta: {
         hasFormControl: true,
         className: "datatable-select-column"
-      }
+      },
+      enableSorting: false
     }] : [];
     return [].concat(select, (0, _toConsumableArray2.default)(defaults)).map(function (column) {
       if (loadingInitial) {
@@ -90,13 +97,25 @@ var defineData = function defineData(data, loadingInitial) {
     return data;
   }, [data, loadingInitial]);
 };
-var DataTable = function DataTable(_ref2) {
-  var data = _ref2.data,
-    columns = _ref2.columns,
-    onSelectRow = _ref2.onSelectRow,
-    loadingInitial = _ref2.loadingInitial,
-    stickyColumns = _ref2.stickyColumns,
-    stickyRows = _ref2.stickyRows;
+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],
@@ -105,13 +124,18 @@ var DataTable = function DataTable(_ref2) {
     data: defineData(data, loadingInitial),
     columns: defineColumns(columns, onSelectRow, loadingInitial),
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+    getSortedRowModel: (0, _reactTable.getSortedRowModel)(),
     state: {
-      rowSelection: rowSelection
+      rowSelection: rowSelection,
+      sorting: sorting
     },
     enableRowSelection: function enableRowSelection(row) {
       return row.original.selectable || false;
     },
-    onRowSelectionChange: setRowSelection
+    onRowSelectionChange: setRowSelection,
+    enableSorting: !!onSortingChange,
+    manualSorting: true,
+    onSortingChange: onSortingChange
   });
   (0, _react.useEffect)(function () {
     if (onSelectRow && typeof onSelectRow === "function") {
@@ -123,14 +147,24 @@ var DataTable = function DataTable(_ref2) {
   }, [rowSelection]);
   return /*#__PURE__*/_react.default.createElement(_styled.Table, {
     stickyColumns: stickyColumns,
-    stickyRows: stickyRows
+    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 (header) {
+    }, 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: header.id
-      }, header.column.columnDef.meta), header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()));
+        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, {

package/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"names":["defineColumns","columns","onSelectRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","id","defaults","column","header","meta","cell","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getCanSelect","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","className","defineData","data","Array","fill","DataTable","stickyColumns","stickyRows","React","useState","rowSelection","setRowSelection","useReactTable","getCoreRowModel","state","enableRowSelection","selectable","onRowSelectionChange","useEffect","dataSelected","getSelectedRowModel","flatRows","getHeaderGroups","headerGroup","headers","columnDef","isPlaceholder","flexRender","getContext","getRowModel","rows","hasOwnProperty","index","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n    DataTableContent,\n    DataTableHead,\n    DataTableRow,\n    DataTableHeadCell,\n    DataTableBody,\n    DataTableCell,\n    DataTableCellProps\n} from \"@rmwc/data-table\";\n\nimport { flexRender, getCoreRowModel, useReactTable, ColumnDef } from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport { 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\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\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\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 } = 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                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                  }\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\nexport const DataTable = <T extends Object & DefaultData>({\n    data,\n    columns,\n    onSelectRow,\n    loadingInitial,\n    stickyColumns,\n    stickyRows\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        state: {\n            rowSelection\n        },\n        enableRowSelection: row => row.original.selectable || false,\n        onRowSelectionChange: setRowSelection\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}>\n            <DataTableContent>\n                <DataTableHead>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <DataTableRow key={headerGroup.id}>\n                            {headerGroup.headers.map(header => (\n                                <DataTableHeadCell\n                                    key={header.id}\n                                    {...header.column.columnDef.meta}\n                                >\n                                    {header.isPlaceholder\n                                        ? null\n                                        : flexRender(\n                                              header.column.columnDef.header,\n                                              header.getContext()\n                                          )}\n                                </DataTableHeadCell>\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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"}
+{"version":3,"names":["defineColumns","columns","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","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, 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                          !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/styled.d.ts

@@ -1,2 +1,30 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
 import { DataTableProps } from "@rmwc/data-table";
-export declare const Table: import("@emotion/styled-base").StyledComponent<{}, DataTableProps, object>;
+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

@@ -4,11 +4,33 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Table = void 0;
+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%;th,td{vertical-align:middle;}.datatable-select-column{width:56px;}");
-exports.Table = Table;
+})("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

@@ -1 +1 @@
-{"version":3,"names":["Table","styled","RmwcDataTable"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { DataTable as RmwcDataTable, DataTableProps } from \"@rmwc/data-table\";\n\nexport const Table = styled(RmwcDataTable)<DataTableProps>`\n    width: 100%;\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n\n    .datatable-select-column {\n        width: 56px;\n    }\n`;\n"],"mappings":";;;;;;;AAAA;AAEA;AAEO,IAAMA,KAAK,oBAAGC,eAAM,EAACC,oBAAa;EAAA;EAAA;AAAA,mFAWxC;AAAC"}
+{"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.js

@@ -79,6 +79,9 @@ var DelayedOnChange = function DelayedOnChange(_ref) {
 
   // 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);

package/DelayedOnChange/DelayedOnChange.js.map

@@ -1 +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        ev.persist();\n        applyValue((ev.target as HTMLInputElement).value, () => realOnBlur(ev));\n    };\n\n    // Need to listen for TAB key to apply new value immediately, without delay. Otherwise validation will be triggered with old value.\n    const onKeyDown: OnKeyDownCallable = ev => {\n        ev.persist();\n        if (ev.key === \"Tab\") {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else if (ev.key === \"Enter\" && props[\"data-on-enter\"]) {\n            applyValue((ev.target as HTMLInputElement).value, () => realOnKeyDown(ev));\n        } else {\n            realOnKeyDown(ev);\n        }\n    };\n\n    return React.cloneElement(child, { ...props, onBlur, onKeyDown });\n};\n\nexport default DelayedOnChange;\n"],"mappings":"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"}
+{"version":3,"names":["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/ImageUpload/ImageEditorDialog.js

@@ -17,6 +17,7 @@ var _ImageEditor = require("../ImageEditor");
 var _Tooltip = require("../Tooltip");
 var _emotion = require("emotion");
 var _Dialog = require("../Dialog");
+var _Button = require("../Button");
 var _excluded = ["src", "options", "onAccept", "open", "dialogZIndex"];
 var imageEditorDialog = /*#__PURE__*/(0, _emotion.css)({
   width: "100vw",
@@ -73,9 +74,10 @@ var ImageEditorDialog = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, render()), /*#__PURE__*/_react.default.createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_Dialog.DialogCancel, null, "Cancel"), activeTool ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
           content: "Please close currently active tool.",
           placement: "top"
-        }, /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
+        }, /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
           disabled: true
-        }, "Save")) : /*#__PURE__*/_react.default.createElement(_Dialog.DialogAccept, {
+        }, "Save")) : /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+          "data-testid": "dialog-accept",
           onClick: function onClick() {
             var url = _this2.imageEditor.current ? _this2.imageEditor.current.getCanvasDataUrl() : "";
             /**

package/ImageUpload/ImageEditorDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","React","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditor } from \"~/ImageEditor\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { css } from \"emotion\";\nimport {\n    Dialog,\n    DialogAccept,\n    DialogCancel,\n    DialogActions,\n    DialogContent,\n    DialogOnClose\n} from \"../Dialog\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: DialogOnClose;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\ninterface ImageEditorDialogState {\n    imageProcessing: boolean;\n}\n\nconst imageEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"100vh\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nclass ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {\n    public imageEditor = React.createRef<ImageEditor>();\n\n    public override render() {\n        const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = this.props;\n\n        return (\n            <Dialog\n                className={imageEditorDialog}\n                style={{ zIndex: dialogZIndex }}\n                open={open}\n                {...dialogProps}\n            >\n                {open && (\n                    <ImageEditor ref={this.imageEditor} src={src} options={options}>\n                        {({ render, activeTool }) => (\n                            <>\n                                <DialogContent>{render()}</DialogContent>\n                                <DialogActions>\n                                    <DialogCancel>Cancel</DialogCancel>\n                                    {activeTool ? (\n                                        <Tooltip\n                                            content={\"Please close currently active tool.\"}\n                                            placement={\"top\"}\n                                        >\n                                            <DialogAccept disabled>Save</DialogAccept>\n                                        </Tooltip>\n                                    ) : (\n                                        <DialogAccept\n                                            onClick={() => {\n                                                const url = this.imageEditor.current\n                                                    ? this.imageEditor.current.getCanvasDataUrl()\n                                                    : \"\";\n                                                /**\n                                                 * We are certain that ref exists.\n                                                 */\n                                                onAccept(url);\n                                            }}\n                                        >\n                                            Save\n                                        </DialogAccept>\n                                    )}\n                                </DialogActions>\n                            </>\n                        )}\n                    </ImageEditor>\n                )}\n            </Dialog>\n        );\n    }\n}\nexport default ImageEditorDialog;\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAOmB;AAsBnB,IAAMA,iBAAiB,gBAAG,IAAAC,YAAG,EAAC;EAC1BC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACf,sBAAsB,EAAE;IACpBC,QAAQ,EAAE,iBAAiB;IAC3BC,SAAS,EAAE,iBAAiB;IAC5B,4BAA4B,EAAE;MAC1BD,QAAQ,EAAE,iBAAiB;MAC3BC,SAAS,EAAE,iBAAiB;MAC5BH,KAAK,EAAE,OAAO;MACdC,MAAM,EAAE,OAAO;MACfG,UAAU,EAAE;IAChB;EACJ;AACJ,CAAC,6BAAC;AAAC,IAEGC,iBAAiB;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uGACEC,cAAK,CAACC,SAAS,EAAe;IAAA;EAAA;EAAA;IAAA;IAAA,OAEnD,kBAAyB;MAAA;MACrB,kBAAuE,IAAI,CAACC,KAAK;QAAzEC,GAAG,eAAHA,GAAG;QAAEC,OAAO,eAAPA,OAAO;QAAEC,QAAQ,eAARA,QAAQ;QAAEC,IAAI,eAAJA,IAAI;QAAEC,YAAY,eAAZA,YAAY;QAAKC,WAAW;MAElE,oBACI,6BAAC,cAAM;QACH,SAAS,EAAEhB,iBAAkB;QAC7B,KAAK,EAAE;UAAEiB,MAAM,EAAEF;QAAa,CAAE;QAChC,IAAI,EAAED;MAAK,GACPE,WAAW,GAEdF,IAAI,iBACD,6BAAC,wBAAW;QAAC,GAAG,EAAE,IAAI,CAACI,WAAY;QAAC,GAAG,EAAEP,GAAI;QAAC,OAAO,EAAEC;MAAQ,GAC1D;QAAA,IAAGO,MAAM,QAANA,MAAM;UAAEC,UAAU,QAAVA,UAAU;QAAA,oBAClB,yEACI,6BAAC,qBAAa,QAAED,MAAM,EAAE,CAAiB,eACzC,6BAAC,qBAAa,qBACV,6BAAC,oBAAY,QAAC,QAAM,CAAe,EAClCC,UAAU,gBACP,6BAAC,gBAAO;UACJ,OAAO,EAAE,qCAAsC;UAC/C,SAAS,EAAE;QAAM,gBAEjB,6BAAC,oBAAY;UAAC,QAAQ;QAAA,GAAC,MAAI,CAAe,CACpC,gBAEV,6BAAC,oBAAY;UACT,OAAO,EAAE,mBAAM;YACX,IAAMC,GAAG,GAAG,MAAI,CAACH,WAAW,CAACI,OAAO,GAC9B,MAAI,CAACJ,WAAW,CAACI,OAAO,CAACC,gBAAgB,EAAE,GAC3C,EAAE;YACR;AAChD;AACA;YACgDV,QAAQ,CAACQ,GAAG,CAAC;UACjB;QAAE,GACL,MAED,CACH,CACW,CACjB;MAAA,CACN,CAER,CACI;IAEjB;EAAC;EAAA;AAAA,EAjD2Bb,cAAK,CAACgB,SAAS;AAAA,eAmDhCjB,iBAAiB;AAAA"}
+{"version":3,"names":["imageEditorDialog","css","width","height","maxWidth","maxHeight","paddingTop","ImageEditorDialog","React","createRef","props","src","options","onAccept","open","dialogZIndex","dialogProps","zIndex","imageEditor","render","activeTool","url","current","getCanvasDataUrl","Component"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditor } from \"~/ImageEditor\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { css } from \"emotion\";\nimport { Dialog, DialogCancel, DialogActions, DialogContent, DialogOnClose } from \"../Dialog\";\nimport { ButtonPrimary } from \"~/Button\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: DialogOnClose;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n}\n\ninterface ImageEditorDialogState {\n    imageProcessing: boolean;\n}\n\nconst imageEditorDialog = css({\n    width: \"100vw\",\n    height: \"100vh\",\n    \".mdc-dialog__surface\": {\n        maxWidth: \"100% !important\",\n        maxHeight: \"100% !important\",\n        \".webiny-ui-dialog__content\": {\n            maxWidth: \"100% !important\",\n            maxHeight: \"100% !important\",\n            width: \"100vw\",\n            height: \"100vh\",\n            paddingTop: \"0 !important\"\n        }\n    }\n});\n\nclass ImageEditorDialog extends React.Component<ImageEditorDialogProps, ImageEditorDialogState> {\n    public imageEditor = React.createRef<ImageEditor>();\n\n    public override render() {\n        const { src, options, onAccept, open, dialogZIndex, ...dialogProps } = this.props;\n\n        return (\n            <Dialog\n                className={imageEditorDialog}\n                style={{ zIndex: dialogZIndex }}\n                open={open}\n                {...dialogProps}\n            >\n                {open && (\n                    <ImageEditor ref={this.imageEditor} src={src} options={options}>\n                        {({ render, activeTool }) => (\n                            <>\n                                <DialogContent>{render()}</DialogContent>\n                                <DialogActions>\n                                    <DialogCancel>Cancel</DialogCancel>\n                                    {activeTool ? (\n                                        <Tooltip\n                                            content={\"Please close currently active tool.\"}\n                                            placement={\"top\"}\n                                        >\n                                            <ButtonPrimary disabled>Save</ButtonPrimary>\n                                        </Tooltip>\n                                    ) : (\n                                        <ButtonPrimary\n                                            data-testid=\"dialog-accept\"\n                                            onClick={() => {\n                                                const url = this.imageEditor.current\n                                                    ? this.imageEditor.current.getCanvasDataUrl()\n                                                    : \"\";\n                                                /**\n                                                 * We are certain that ref exists.\n                                                 */\n                                                onAccept(url);\n                                            }}\n                                        >\n                                            Save\n                                        </ButtonPrimary>\n                                    )}\n                                </DialogActions>\n                            </>\n                        )}\n                    </ImageEditor>\n                )}\n            </Dialog>\n        );\n    }\n}\nexport default ImageEditorDialog;\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAyC;AAsBzC,IAAMA,iBAAiB,gBAAG,IAAAC,YAAG,EAAC;EAC1BC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACf,sBAAsB,EAAE;IACpBC,QAAQ,EAAE,iBAAiB;IAC3BC,SAAS,EAAE,iBAAiB;IAC5B,4BAA4B,EAAE;MAC1BD,QAAQ,EAAE,iBAAiB;MAC3BC,SAAS,EAAE,iBAAiB;MAC5BH,KAAK,EAAE,OAAO;MACdC,MAAM,EAAE,OAAO;MACfG,UAAU,EAAE;IAChB;EACJ;AACJ,CAAC,6BAAC;AAAC,IAEGC,iBAAiB;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;MAAA;IAAA;IAAA;IAAA,uGACEC,cAAK,CAACC,SAAS,EAAe;IAAA;EAAA;EAAA;IAAA;IAAA,OAEnD,kBAAyB;MAAA;MACrB,kBAAuE,IAAI,CAACC,KAAK;QAAzEC,GAAG,eAAHA,GAAG;QAAEC,OAAO,eAAPA,OAAO;QAAEC,QAAQ,eAARA,QAAQ;QAAEC,IAAI,eAAJA,IAAI;QAAEC,YAAY,eAAZA,YAAY;QAAKC,WAAW;MAElE,oBACI,6BAAC,cAAM;QACH,SAAS,EAAEhB,iBAAkB;QAC7B,KAAK,EAAE;UAAEiB,MAAM,EAAEF;QAAa,CAAE;QAChC,IAAI,EAAED;MAAK,GACPE,WAAW,GAEdF,IAAI,iBACD,6BAAC,wBAAW;QAAC,GAAG,EAAE,IAAI,CAACI,WAAY;QAAC,GAAG,EAAEP,GAAI;QAAC,OAAO,EAAEC;MAAQ,GAC1D;QAAA,IAAGO,MAAM,QAANA,MAAM;UAAEC,UAAU,QAAVA,UAAU;QAAA,oBAClB,yEACI,6BAAC,qBAAa,QAAED,MAAM,EAAE,CAAiB,eACzC,6BAAC,qBAAa,qBACV,6BAAC,oBAAY,QAAC,QAAM,CAAe,EAClCC,UAAU,gBACP,6BAAC,gBAAO;UACJ,OAAO,EAAE,qCAAsC;UAC/C,SAAS,EAAE;QAAM,gBAEjB,6BAAC,qBAAa;UAAC,QAAQ;QAAA,GAAC,MAAI,CAAgB,CACtC,gBAEV,6BAAC,qBAAa;UACV,eAAY,eAAe;UAC3B,OAAO,EAAE,mBAAM;YACX,IAAMC,GAAG,GAAG,MAAI,CAACH,WAAW,CAACI,OAAO,GAC9B,MAAI,CAACJ,WAAW,CAACI,OAAO,CAACC,gBAAgB,EAAE,GAC3C,EAAE;YACR;AAChD;AACA;YACgDV,QAAQ,CAACQ,GAAG,CAAC;UACjB;QAAE,GACL,MAED,CACH,CACW,CACjB;MAAA,CACN,CAER,CACI;IAEjB;EAAC;EAAA;AAAA,EAlD2Bb,cAAK,CAACgB,SAAS;AAAA,eAoDhCjB,iBAAiB;AAAA"}

package/ImageUpload/styled.d.ts

@@ -1,21 +1,31 @@
 /// <reference types="react" />
-/// <reference types="web" />
 /// <reference types="react" />
-export declare const AddImageIconWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const AddImageWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const AddImageWrapperRound: import("@emotion/styled-base").StyledComponent<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: object | undefined;
-} & {
+/// <reference types="web" />
+export declare const AddImageIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AddImageWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AddImageWrapperRound: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode;
-}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: object | undefined;
 } & {
-    children?: import("react").ReactNode;
-}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("react").HTMLAttributes<HTMLDivElement> | "theme">, object>;
-export declare const RemoveImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const EditImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const ImagePreviewWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const RemoveImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EditImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ImagePreviewWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/Input/Input.js

@@ -93,7 +93,7 @@ var Input = function Input(props) {
     if (typeof rest.onKeyDown === "function") {
       return rest.onKeyDown(e);
     }
-  }, [rest.onKeyDown]);
+  }, [rest.onKeyDown, onEnter]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.TextField, Object.assign({}, (0, _pick.default)(rest, rmwcProps), {
     onKeyDown: inputOnKeyDown,
     autoFocus: autoFocus,

package/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"names":["webinyInputStyles","css","rmwcProps","Input","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","rest","inputValue","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","pick","Boolean","undefined","classNames","defaultProps"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n    TextFieldProps & {\n        // Should this input be filled with browser values\n        autoComplete?: string;\n\n        // If true, will pass native `event` to the `onChange` callback\n        rawOnChange?: boolean;\n\n        // Auto-focus input\n        autoFocus?: boolean;\n\n        // Input placeholder\n        placeholder?: string;\n\n        // Description beneath the input.\n        description?: string | ReactElement;\n\n        // Converts input into a text area with given number of rows.\n        rows?: number;\n\n        maxLength?: number;\n\n        // A callback that is executed when input focus is lost.\n        onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        // A callback that gets triggered when the user presses the \"Enter\" key.\n        onEnter?: () => any;\n\n        // CSS class name\n        className?: string;\n\n        // For testing purposes.\n        \"data-testid\"?: string;\n    };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n    .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n        transform: translateY(-106%) scale(0.75);\n    }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n    \"label\",\n    \"type\",\n    \"step\",\n    \"disabled\",\n    \"readOnly\",\n    \"placeholder\",\n    \"outlined\",\n    \"onKeyDown\",\n    \"onKeyPress\",\n    \"onKeyUp\",\n    \"onFocus\",\n    \"rootProps\",\n    \"fullwidth\",\n    \"inputRef\",\n    \"className\",\n    \"maxLength\",\n    \"characterCount\"\n];\n\nexport const Input: React.FC<InputProps> = props => {\n    const onChange = useCallback(\n        (e: React.SyntheticEvent<HTMLInputElement>) => {\n            const { onChange, rawOnChange } = props;\n            if (!onChange) {\n                return;\n            }\n\n            // @ts-ignore\n            onChange(rawOnChange ? e : e.target.value);\n        },\n        [props.onChange, props.rawOnChange]\n    );\n\n    const onBlur = useCallback(\n        async (e: React.SyntheticEvent<HTMLInputElement>) => {\n            const { validate, onBlur } = props;\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            onBlur && onBlur(e);\n        },\n        [props.validate, props.onBlur]\n    );\n\n    const {\n        autoFocus,\n        value,\n        label,\n        description,\n        placeholder,\n        rows,\n        validation,\n        icon,\n        trailingIcon,\n        onEnter,\n        ...rest\n    } = props;\n\n    let inputValue = value;\n    if (value === null || typeof value === \"undefined\") {\n        inputValue = \"\";\n    }\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const inputOnKeyDown = useCallback(\n        e => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter();\n            }\n\n            if (typeof rest.onKeyDown === \"function\") {\n                return rest.onKeyDown(e);\n            }\n        },\n        [rest.onKeyDown]\n    );\n\n    return (\n        <React.Fragment>\n            <TextField\n                {...pick(rest, rmwcProps)}\n                onKeyDown={inputOnKeyDown}\n                autoFocus={autoFocus}\n                textarea={Boolean(rows)}\n                value={inputValue}\n                onChange={onChange}\n                onBlur={onBlur}\n                label={label}\n                icon={icon}\n                placeholder={(!label && placeholder) || undefined}\n                trailingIcon={trailingIcon}\n                rows={rows}\n                className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n                data-testid={props[\"data-testid\"]}\n            />\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nInput.defaultProps = { rawOnChange: false };\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AAGA;AACA;AAAoC;AAuCpC;AACA;AACA;AACA;AACA,IAAMA,iBAAiB,oBAAGC,YAAG,oIAI5B;;AAED;AACA;AACA;AACA;;AAEA;AACA,IAAMC,SAAS,GAAG,CACd,OAAO,EACP,MAAM,EACN,MAAM,EACN,UAAU,EACV,UAAU,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,CACnB;AAEM,IAAMC,KAA2B,GAAG,SAA9BA,KAA2B,CAAGC,KAAK,EAAI;EAChD,IAAMC,QAAQ,GAAG,IAAAC,kBAAW,EACxB,UAACC,CAAyC,EAAK;IAC3C,IAAQF,QAAQ,GAAkBD,KAAK,CAA/BC,QAAQ;MAAEG,WAAW,GAAKJ,KAAK,CAArBI,WAAW;IAC7B,IAAI,CAACH,QAAQ,EAAE;MACX;IACJ;;IAEA;IACAA,QAAQ,CAACG,WAAW,GAAGD,CAAC,GAAGA,CAAC,CAACE,MAAM,CAACC,KAAK,CAAC;EAC9C,CAAC,EACD,CAACN,KAAK,CAACC,QAAQ,EAAED,KAAK,CAACI,WAAW,CAAC,CACtC;EAED,IAAMG,MAAM,GAAG,IAAAL,kBAAW;IAAA,kGACtB,iBAAOC,CAAyC;MAAA;MAAA;QAAA;UAAA;YACpCK,QAAQ,GAAaR,KAAK,CAA1BQ,QAAQ,EAAED,MAAM,GAAKP,KAAK,CAAhBO,MAAM;YAAA,KACpBC,QAAQ;cAAA;cAAA;YAAA;YACR;YACA;YACAL,CAAC,CAACM,OAAO,EAAE;YAAC;YAAA,OACND,QAAQ,EAAE;UAAA;YAEpBD,MAAM,IAAIA,MAAM,CAACJ,CAAC,CAAC;UAAC;UAAA;YAAA;QAAA;MAAA;IAAA,CACvB;IAAA;MAAA;IAAA;EAAA,KACD,CAACH,KAAK,CAACQ,QAAQ,EAAER,KAAK,CAACO,MAAM,CAAC,CACjC;EAED,IACIG,SAAS,GAWTV,KAAK,CAXLU,SAAS;IACTJ,KAAK,GAULN,KAAK,CAVLM,KAAK;IACLK,KAAK,GASLX,KAAK,CATLW,KAAK;IACLC,WAAW,GAQXZ,KAAK,CARLY,WAAW;IACXC,WAAW,GAOXb,KAAK,CAPLa,WAAW;IACXC,IAAI,GAMJd,KAAK,CANLc,IAAI;IACJC,UAAU,GAKVf,KAAK,CALLe,UAAU;IACVC,IAAI,GAIJhB,KAAK,CAJLgB,IAAI;IACJC,YAAY,GAGZjB,KAAK,CAHLiB,YAAY;IACZC,OAAO,GAEPlB,KAAK,CAFLkB,OAAO;IACJC,IAAI,0CACPnB,KAAK;EAET,IAAIoB,UAAU,GAAGd,KAAK;EACtB,IAAIA,KAAK,KAAK,IAAI,IAAI,OAAOA,KAAK,KAAK,WAAW,EAAE;IAChDc,UAAU,GAAG,EAAE;EACnB;EAEA,YAAmEL,UAAU,IAAI,CAAC,CAAC;IAAlEM,iBAAiB,SAA1BC,OAAO;IAA8BC,iBAAiB,SAA1BC,OAAO;EAE3C,IAAMC,cAAc,GAAG,IAAAvB,kBAAW,EAC9B,UAAAC,CAAC,EAAI;IACD,IAAI,OAAOe,OAAO,KAAK,UAAU,IAAIf,CAAC,CAACuB,GAAG,KAAK,OAAO,EAAE;MACpDR,OAAO,EAAE;IACb;IAEA,IAAI,OAAOC,IAAI,CAACQ,SAAS,KAAK,UAAU,EAAE;MACtC,OAAOR,IAAI,CAACQ,SAAS,CAACxB,CAAC,CAAC;IAC5B;EACJ,CAAC,EACD,CAACgB,IAAI,CAACQ,SAAS,CAAC,CACnB;EAED,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,oBAAS,oBACF,IAAAC,aAAI,EAACT,IAAI,EAAErB,SAAS,CAAC;IACzB,SAAS,EAAE2B,cAAe;IAC1B,SAAS,EAAEf,SAAU;IACrB,QAAQ,EAAEmB,OAAO,CAACf,IAAI,CAAE;IACxB,KAAK,EAAEM,UAAW;IAClB,QAAQ,EAAEnB,QAAS;IACnB,MAAM,EAAEM,MAAO;IACf,KAAK,EAAEI,KAAM;IACb,IAAI,EAAEK,IAAK;IACX,WAAW,EAAG,CAACL,KAAK,IAAIE,WAAW,IAAKiB,SAAU;IAClD,YAAY,EAAEb,YAAa;IAC3B,IAAI,EAAEH,IAAK;IACX,SAAS,EAAE,IAAAiB,mBAAU,EAAC,iBAAiB,EAAEnC,iBAAiB,CAAE;IAC5D,eAAaI,KAAK,CAAC,aAAa;EAAE,GACpC,EAEDqB,iBAAiB,KAAK,KAAK,iBACxB,6BAAC,sCAAkB;IAAC,KAAK;EAAA,GAAEE,iBAAiB,CAC/C,EACAF,iBAAiB,KAAK,KAAK,IAAIT,WAAW,iBACvC,6BAAC,sCAAkB,QAAEA,WAAW,CACnC,CACY;AAEzB,CAAC;AAAC;AAEFb,KAAK,CAACiC,YAAY,GAAG;EAAE5B,WAAW,EAAE;AAAM,CAAC"}
+{"version":3,"names":["webinyInputStyles","css","rmwcProps","Input","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","rest","inputValue","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","pick","Boolean","undefined","classNames","defaultProps"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n    TextFieldProps & {\n        // Should this input be filled with browser values\n        autoComplete?: string;\n\n        // If true, will pass native `event` to the `onChange` callback\n        rawOnChange?: boolean;\n\n        // Auto-focus input\n        autoFocus?: boolean;\n\n        // Input placeholder\n        placeholder?: string;\n\n        // Description beneath the input.\n        description?: string | ReactElement;\n\n        // Converts input into a text area with given number of rows.\n        rows?: number;\n\n        maxLength?: number;\n\n        // A callback that is executed when input focus is lost.\n        onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        // A callback that gets triggered when the user presses the \"Enter\" key.\n        onEnter?: () => any;\n\n        // CSS class name\n        className?: string;\n\n        // For testing purposes.\n        \"data-testid\"?: string;\n    };\n\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n    .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n        transform: translateY(-106%) scale(0.75);\n    }\n`;\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n    \"label\",\n    \"type\",\n    \"step\",\n    \"disabled\",\n    \"readOnly\",\n    \"placeholder\",\n    \"outlined\",\n    \"onKeyDown\",\n    \"onKeyPress\",\n    \"onKeyUp\",\n    \"onFocus\",\n    \"rootProps\",\n    \"fullwidth\",\n    \"inputRef\",\n    \"className\",\n    \"maxLength\",\n    \"characterCount\"\n];\n\nexport const Input: React.FC<InputProps> = props => {\n    const onChange = useCallback(\n        (e: React.SyntheticEvent<HTMLInputElement>) => {\n            const { onChange, rawOnChange } = props;\n            if (!onChange) {\n                return;\n            }\n\n            // @ts-ignore\n            onChange(rawOnChange ? e : e.target.value);\n        },\n        [props.onChange, props.rawOnChange]\n    );\n\n    const onBlur = useCallback(\n        async (e: React.SyntheticEvent<HTMLInputElement>) => {\n            const { validate, onBlur } = props;\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            onBlur && onBlur(e);\n        },\n        [props.validate, props.onBlur]\n    );\n\n    const {\n        autoFocus,\n        value,\n        label,\n        description,\n        placeholder,\n        rows,\n        validation,\n        icon,\n        trailingIcon,\n        onEnter,\n        ...rest\n    } = props;\n\n    let inputValue = value;\n    if (value === null || typeof value === \"undefined\") {\n        inputValue = \"\";\n    }\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const inputOnKeyDown = useCallback(\n        e => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter();\n            }\n\n            if (typeof rest.onKeyDown === \"function\") {\n                return rest.onKeyDown(e);\n            }\n        },\n        [rest.onKeyDown, onEnter]\n    );\n\n    return (\n        <React.Fragment>\n            <TextField\n                {...pick(rest, rmwcProps)}\n                onKeyDown={inputOnKeyDown}\n                autoFocus={autoFocus}\n                textarea={Boolean(rows)}\n                value={inputValue}\n                onChange={onChange}\n                onBlur={onBlur}\n                label={label}\n                icon={icon}\n                placeholder={(!label && placeholder) || undefined}\n                trailingIcon={trailingIcon}\n                rows={rows}\n                className={classNames(\"webiny-ui-input\", webinyInputStyles)}\n                data-testid={props[\"data-testid\"]}\n            />\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nInput.defaultProps = { rawOnChange: false };\n"],"mappings":"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"}

package/List/DataList/DataListModalOverlay/DataListModalOverlay.d.ts

@@ -3,15 +3,17 @@ import React from "react";
 export declare type SimpleOverlayProps = {
     showOverlay: boolean;
 };
-export declare const SimpleOverlay: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & SimpleOverlayProps, keyof React.HTMLAttributes<HTMLDivElement> | "showOverlay"> & {
-    theme: object;
-}, object>;
+export declare const SimpleOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & SimpleOverlayProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface DataListModalWrapperProps {
     showOverlay: boolean;
 }
-export declare const DataListModalWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & DataListModalWrapperProps, keyof React.HTMLAttributes<HTMLDivElement> | "showOverlay"> & {
-    theme: object;
-}, object>;
+export declare const DataListModalWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & DataListModalWrapperProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface DataListModalOverlayProps {
     onDismiss?: (event?: React.SyntheticEvent) => void;
 }

package/List/DataList/DataListModalOverlay/DataListModalOverlay.js

@@ -41,7 +41,7 @@ var DataListModalWrapper = /*#__PURE__*/(0, _styled.default)("div", {
     height: "auto",
     maxWidth: "426px",
     maxHeight: "520px",
-    overflow: "auto",
+    overflow: "visible",
     backgroundColor: "var(--mdc-theme-surface)",
     boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.12)",
     borderRadius: "0px 0px 4px 4px",
@@ -89,7 +89,8 @@ var DataListModalOverlay = function DataListModalOverlay(_ref3) {
     },
     showOverlay: isOpen
   }), /*#__PURE__*/_react.default.createElement(DataListModalWrapper, {
-    showOverlay: isOpen
+    showOverlay: isOpen,
+    "data-id": "data-list-modal-wrapper"
   }, children));
 };
 exports.DataListModalOverlay = DataListModalOverlay;

package/List/DataList/DataListModalOverlay/DataListModalOverlay.js.map

@@ -1 +1 @@
-{"version":3,"names":["SimpleOverlay","styled","showOverlay","width","height","position","top","left","backgroundColor","transition","pointerEvents","zIndex","opacity","DataListModalWrapper","maxWidth","maxHeight","overflow","boxShadow","borderRadius","transform","paddingBottom","padding","display","justifyContent","color","border","DataListModalOverlay","onDismiss","children","useContext","DataListModalOverlayContext","isOpen","setIsOpen","e","stopPropagation"],"sources":["DataListModalOverlay.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport type SimpleOverlayProps = { showOverlay: boolean };\nexport const SimpleOverlay = styled<\"div\", SimpleOverlayProps>(\"div\")(({ showOverlay }) => ({\n    width: \"100%\",\n    height: \"100%\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    backgroundColor: showOverlay ? \"rgba(0, 0, 0, 0.32)\" : \"transparent\",\n    transition: \"150ms all ease-in-out\",\n    pointerEvents: showOverlay ? \"auto\" : \"none\",\n    zIndex: showOverlay ? 5 : -1,\n    opacity: showOverlay ? 1 : 0\n}));\n\nexport interface DataListModalWrapperProps {\n    showOverlay: boolean;\n}\nexport const DataListModalWrapper = styled<\"div\", DataListModalWrapperProps>(\"div\")(\n    ({ showOverlay }) => ({\n        position: \"absolute\",\n        top: \"0px\",\n        left: \"50%\",\n        width: \"90%\",\n        height: \"auto\",\n        maxWidth: \"426px\",\n        maxHeight: \"520px\",\n        overflow: \"auto\",\n        backgroundColor: \"var(--mdc-theme-surface)\",\n        boxShadow: \"0px 1px 5px rgba(0, 0, 0, 0.12)\",\n        borderRadius: \"0px 0px 4px 4px\",\n        transition: \"150ms opacity ease-in-out\",\n        pointerEvents: showOverlay ? \"auto\" : \"none\",\n        zIndex: showOverlay ? 5 : -1,\n        opacity: showOverlay ? 1 : 0,\n        transform: showOverlay ? \"translateX(-50%)\" : \"translateX(-1000px)\",\n\n        \"& .input-wrapper\": {\n            paddingBottom: \"16px\"\n        },\n\n        \"& .datalist-modal__footer\": {\n            padding: \"24px\",\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            \"& .mdc-button\": {\n                borderRadius: 4,\n                padding: \"0px 32px\"\n            },\n            \"& .datalist-modal__footer__action--secondary\": {\n                color: \"var(--mdc-theme-text-primary-on-background)\",\n                border: \"1px solid var(--mdc-theme-on-background)\"\n            },\n            \"& .datalist-modal__footer__action--primary\": {\n                backgroundColor: \"var(--mdc-theme-secondary)\"\n            }\n        }\n    })\n);\n\nexport interface DataListModalOverlayProps {\n    /*\n     * This function is called after closing the modal overlay.\n     */\n    onDismiss?: (event?: React.SyntheticEvent) => void;\n}\n\nexport const DataListModalOverlay: React.FC<DataListModalOverlayProps> = ({\n    onDismiss,\n    children\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n    return (\n        <React.Fragment>\n            <SimpleOverlay\n                onClick={e => {\n                    e.stopPropagation();\n                    // Close the modal.\n                    setIsOpen(false);\n\n                    if (typeof onDismiss === \"function\") {\n                        onDismiss();\n                    }\n                }}\n                showOverlay={isOpen}\n            />\n            <DataListModalWrapper showOverlay={isOpen}>{children}</DataListModalWrapper>\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAGO,IAAMA,aAAa,oBAAGC,eAAM,EAA4B,KAAK;EAAA;EAAA;AAAA,GAAE;EAAA,IAAGC,WAAW,QAAXA,WAAW;EAAA,OAAQ;IACxFC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,eAAe,EAAEN,WAAW,GAAG,qBAAqB,GAAG,aAAa;IACpEO,UAAU,EAAE,uBAAuB;IACnCC,aAAa,EAAER,WAAW,GAAG,MAAM,GAAG,MAAM;IAC5CS,MAAM,EAAET,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5BU,OAAO,EAAEV,WAAW,GAAG,CAAC,GAAG;EAC/B,CAAC;AAAA,CAAC,CAAC;AAAC;AAKG,IAAMW,oBAAoB,oBAAGZ,eAAM,EAAmC,KAAK;EAAA;EAAA;AAAA,GAC9E;EAAA,IAAGC,WAAW,SAAXA,WAAW;EAAA,OAAQ;IAClBG,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,KAAK;IACVC,IAAI,EAAE,KAAK;IACXJ,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,MAAM;IACdU,QAAQ,EAAE,OAAO;IACjBC,SAAS,EAAE,OAAO;IAClBC,QAAQ,EAAE,MAAM;IAChBR,eAAe,EAAE,0BAA0B;IAC3CS,SAAS,EAAE,iCAAiC;IAC5CC,YAAY,EAAE,iBAAiB;IAC/BT,UAAU,EAAE,2BAA2B;IACvCC,aAAa,EAAER,WAAW,GAAG,MAAM,GAAG,MAAM;IAC5CS,MAAM,EAAET,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5BU,OAAO,EAAEV,WAAW,GAAG,CAAC,GAAG,CAAC;IAC5BiB,SAAS,EAAEjB,WAAW,GAAG,kBAAkB,GAAG,qBAAqB;IAEnE,kBAAkB,EAAE;MAChBkB,aAAa,EAAE;IACnB,CAAC;IAED,2BAA2B,EAAE;MACzBC,OAAO,EAAE,MAAM;MACfC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,eAAe;MAC/B,eAAe,EAAE;QACbL,YAAY,EAAE,CAAC;QACfG,OAAO,EAAE;MACb,CAAC;MACD,8CAA8C,EAAE;QAC5CG,KAAK,EAAE,6CAA6C;QACpDC,MAAM,EAAE;MACZ,CAAC;MACD,4CAA4C,EAAE;QAC1CjB,eAAe,EAAE;MACrB;IACJ;EACJ,CAAC;AAAA,CAAC,CACL;AAAC;AASK,IAAMkB,oBAAyD,GAAG,SAA5DA,oBAAyD,QAGhE;EAAA,IAFFC,SAAS,SAATA,SAAS;IACTC,QAAQ,SAARA,QAAQ;EAER,kBAA8B,IAAAC,iBAAU,EAACC,wDAA2B,CAAC;IAA7DC,MAAM,eAANA,MAAM;IAAEC,SAAS,eAATA,SAAS;EACzB,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,aAAa;IACV,OAAO,EAAE,iBAAAC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,EAAE;MACnB;MACAF,SAAS,CAAC,KAAK,CAAC;MAEhB,IAAI,OAAOL,SAAS,KAAK,UAAU,EAAE;QACjCA,SAAS,EAAE;MACf;IACJ,CAAE;IACF,WAAW,EAAEI;EAAO,EACtB,eACF,6BAAC,oBAAoB;IAAC,WAAW,EAAEA;EAAO,GAAEH,QAAQ,CAAwB,CAC/D;AAEzB,CAAC;AAAC"}
+{"version":3,"names":["SimpleOverlay","styled","showOverlay","width","height","position","top","left","backgroundColor","transition","pointerEvents","zIndex","opacity","DataListModalWrapper","maxWidth","maxHeight","overflow","boxShadow","borderRadius","transform","paddingBottom","padding","display","justifyContent","color","border","DataListModalOverlay","onDismiss","children","useContext","DataListModalOverlayContext","isOpen","setIsOpen","e","stopPropagation"],"sources":["DataListModalOverlay.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { DataListModalOverlayContext } from \"./DataListModalOverlayContext\";\n\nexport type SimpleOverlayProps = { showOverlay: boolean };\nexport const SimpleOverlay = styled.div<SimpleOverlayProps>(({ showOverlay }) => ({\n    width: \"100%\",\n    height: \"100%\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    backgroundColor: showOverlay ? \"rgba(0, 0, 0, 0.32)\" : \"transparent\",\n    transition: \"150ms all ease-in-out\",\n    pointerEvents: showOverlay ? \"auto\" : \"none\",\n    zIndex: showOverlay ? 5 : -1,\n    opacity: showOverlay ? 1 : 0\n}));\n\nexport interface DataListModalWrapperProps {\n    showOverlay: boolean;\n}\n\nexport const DataListModalWrapper = styled.div<DataListModalWrapperProps>(({ showOverlay }) => ({\n    position: \"absolute\",\n    top: \"0px\",\n    left: \"50%\",\n    width: \"90%\",\n    height: \"auto\",\n    maxWidth: \"426px\",\n    maxHeight: \"520px\",\n    overflow: \"visible\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    boxShadow: \"0px 1px 5px rgba(0, 0, 0, 0.12)\",\n    borderRadius: \"0px 0px 4px 4px\",\n    transition: \"150ms opacity ease-in-out\",\n    pointerEvents: showOverlay ? \"auto\" : \"none\",\n    zIndex: showOverlay ? 5 : -1,\n    opacity: showOverlay ? 1 : 0,\n    transform: showOverlay ? \"translateX(-50%)\" : \"translateX(-1000px)\",\n\n    \"& .input-wrapper\": {\n        paddingBottom: \"16px\"\n    },\n\n    \"& .datalist-modal__footer\": {\n        padding: \"24px\",\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        \"& .mdc-button\": {\n            borderRadius: 4,\n            padding: \"0px 32px\"\n        },\n        \"& .datalist-modal__footer__action--secondary\": {\n            color: \"var(--mdc-theme-text-primary-on-background)\",\n            border: \"1px solid var(--mdc-theme-on-background)\"\n        },\n        \"& .datalist-modal__footer__action--primary\": {\n            backgroundColor: \"var(--mdc-theme-secondary)\"\n        }\n    }\n}));\n\nexport interface DataListModalOverlayProps {\n    /*\n     * This function is called after closing the modal overlay.\n     */\n    onDismiss?: (event?: React.SyntheticEvent) => void;\n}\n\nexport const DataListModalOverlay: React.FC<DataListModalOverlayProps> = ({\n    onDismiss,\n    children\n}) => {\n    const { isOpen, setIsOpen } = useContext(DataListModalOverlayContext);\n    return (\n        <React.Fragment>\n            <SimpleOverlay\n                onClick={e => {\n                    e.stopPropagation();\n                    // Close the modal.\n                    setIsOpen(false);\n\n                    if (typeof onDismiss === \"function\") {\n                        onDismiss();\n                    }\n                }}\n                showOverlay={isOpen}\n            />\n            <DataListModalWrapper showOverlay={isOpen} data-id={\"data-list-modal-wrapper\"}>\n                {children}\n            </DataListModalWrapper>\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAGO,IAAMA,aAAa,oBAAGC,eAAM;EAAA;EAAA;AAAA,GAAyB;EAAA,IAAGC,WAAW,QAAXA,WAAW;EAAA,OAAQ;IAC9EC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,eAAe,EAAEN,WAAW,GAAG,qBAAqB,GAAG,aAAa;IACpEO,UAAU,EAAE,uBAAuB;IACnCC,aAAa,EAAER,WAAW,GAAG,MAAM,GAAG,MAAM;IAC5CS,MAAM,EAAET,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5BU,OAAO,EAAEV,WAAW,GAAG,CAAC,GAAG;EAC/B,CAAC;AAAA,CAAC,CAAC;AAAC;AAMG,IAAMW,oBAAoB,oBAAGZ,eAAM;EAAA;EAAA;AAAA,GAAgC;EAAA,IAAGC,WAAW,SAAXA,WAAW;EAAA,OAAQ;IAC5FG,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,KAAK;IACVC,IAAI,EAAE,KAAK;IACXJ,KAAK,EAAE,KAAK;IACZC,MAAM,EAAE,MAAM;IACdU,QAAQ,EAAE,OAAO;IACjBC,SAAS,EAAE,OAAO;IAClBC,QAAQ,EAAE,SAAS;IACnBR,eAAe,EAAE,0BAA0B;IAC3CS,SAAS,EAAE,iCAAiC;IAC5CC,YAAY,EAAE,iBAAiB;IAC/BT,UAAU,EAAE,2BAA2B;IACvCC,aAAa,EAAER,WAAW,GAAG,MAAM,GAAG,MAAM;IAC5CS,MAAM,EAAET,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5BU,OAAO,EAAEV,WAAW,GAAG,CAAC,GAAG,CAAC;IAC5BiB,SAAS,EAAEjB,WAAW,GAAG,kBAAkB,GAAG,qBAAqB;IAEnE,kBAAkB,EAAE;MAChBkB,aAAa,EAAE;IACnB,CAAC;IAED,2BAA2B,EAAE;MACzBC,OAAO,EAAE,MAAM;MACfC,OAAO,EAAE,MAAM;MACfC,cAAc,EAAE,eAAe;MAC/B,eAAe,EAAE;QACbL,YAAY,EAAE,CAAC;QACfG,OAAO,EAAE;MACb,CAAC;MACD,8CAA8C,EAAE;QAC5CG,KAAK,EAAE,6CAA6C;QACpDC,MAAM,EAAE;MACZ,CAAC;MACD,4CAA4C,EAAE;QAC1CjB,eAAe,EAAE;MACrB;IACJ;EACJ,CAAC;AAAA,CAAC,CAAC;AAAC;AASG,IAAMkB,oBAAyD,GAAG,SAA5DA,oBAAyD,QAGhE;EAAA,IAFFC,SAAS,SAATA,SAAS;IACTC,QAAQ,SAARA,QAAQ;EAER,kBAA8B,IAAAC,iBAAU,EAACC,wDAA2B,CAAC;IAA7DC,MAAM,eAANA,MAAM;IAAEC,SAAS,eAATA,SAAS;EACzB,oBACI,6BAAC,cAAK,CAAC,QAAQ,qBACX,6BAAC,aAAa;IACV,OAAO,EAAE,iBAAAC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,EAAE;MACnB;MACAF,SAAS,CAAC,KAAK,CAAC;MAEhB,IAAI,OAAOL,SAAS,KAAK,UAAU,EAAE;QACjCA,SAAS,EAAE;MACf;IACJ,CAAE;IACF,WAAW,EAAEI;EAAO,EACtB,eACF,6BAAC,oBAAoB;IAAC,WAAW,EAAEA,MAAO;IAAC,WAAS;EAA0B,GACzEH,QAAQ,CACU,CACV;AAEzB,CAAC;AAAC"}

package/Menu/Menu.js

@@ -70,7 +70,8 @@ var Menu = /*#__PURE__*/function (_React$Component) {
       var children = _this.props.children;
       return /*#__PURE__*/_react.default.createElement(_menu.MenuSurface, {
         open: _this.state.menuIsOpen,
-        onClose: _this.closeMenu
+        onClose: _this.closeMenu,
+        renderToPortal: _this.props.renderToPortal
       }, typeof children === "function" ? children({
         closeMenu: _this.closeMenu
       }) : children);

package/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","zIndex","children","Array","isArray","renderMenuWithPortal","renderCustomContent","renderMenuContent","handle","React","cloneElement","onClick","openMenu","Component","MenuDivider","MenuItem","disabled","rest","classNames"],"sources":["Menu.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Menu as BaseMenu,\n    MenuProps as RmwcMenuProps,\n    MenuItem as BaseMenuItem,\n    MenuItemProps as BaseMenuItemProps,\n    MenuSurface,\n    MenuSurfaceAnchor\n} from \"@rmwc/menu\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst style = {\n    disabledMenuItem: css({\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    })\n};\n\ntype MenuProps = RmwcMenuProps & {\n    // One or more MenuItem components.\n    children: React.ReactNode;\n\n    // A handler which triggers the menu, eg. button or link.\n    handle?: React.ReactElement;\n\n    // Position the menu to one of anchor corners.\n    // 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart'\n    anchor?:\n        | \"bottomEnd\"\n        | \"bottomLeft\"\n        | \"bottomRight\"\n        | \"bottomStart\"\n        | \"topEnd\"\n        | \"topLeft\"\n        | \"topRight\"\n        | \"topStart\";\n\n    // Class that will be added to the Menu element.\n    className?: string;\n\n    onOpen?: () => void;\n    onClose?: () => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n};\n\ninterface MenuState {\n    menuIsOpen: boolean;\n}\n\n/**\n * Use Menu component to display a list of choices, once the handler is triggered.\n */\nclass Menu extends React.Component<MenuProps, MenuState> {\n    static defaultProps: Partial<MenuProps> = {\n        anchor: \"topStart\"\n    };\n\n    public override state: MenuState = {\n        menuIsOpen: false\n    };\n\n    private readonly openMenu = () => {\n        this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen());\n    };\n\n    private readonly closeMenu = () => {\n        this.setState({ menuIsOpen: false }, () => this.props.onClose && this.props.onClose());\n    };\n\n    private readonly renderMenuWithPortal = () => {\n        return (\n            <BaseMenu\n                anchorCorner={this.props.anchor}\n                open={this.state.menuIsOpen}\n                className={this.props.className}\n                onClose={this.closeMenu}\n                onSelect={this.props.onSelect}\n                renderToPortal={true}\n                style={{ zIndex: 99 }} // Fixes Menu in Drawers\n            >\n                {this.props.children}\n            </BaseMenu>\n        );\n    };\n\n    private readonly renderCustomContent = () => {\n        const { children } = this.props;\n        return (\n            <MenuSurface open={this.state.menuIsOpen} onClose={this.closeMenu}>\n                {typeof children === \"function\"\n                    ? children({ closeMenu: this.closeMenu })\n                    : children}\n            </MenuSurface>\n        );\n    };\n\n    private readonly renderMenuContent = () => {\n        return Array.isArray(this.props.children)\n            ? this.renderMenuWithPortal()\n            : this.renderCustomContent();\n    };\n\n    public override render(): React.ReactNode {\n        return (\n            <MenuSurfaceAnchor data-testid={this.props[\"data-testid\"]}>\n                {this.renderMenuContent()}\n                {this.props.handle &&\n                    React.cloneElement(this.props.handle, { onClick: this.openMenu })}\n            </MenuSurfaceAnchor>\n        );\n    }\n}\n\nconst MenuDivider: React.FC = () => {\n    return <li className=\"mdc-list-divider\" role=\"separator\" />;\n};\n\ninterface MenuItemProps extends BaseMenuItemProps {\n    children: React.ReactNode;\n    className?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    \"data-testid\"?: string;\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({ disabled, className, ...rest }) => {\n    return (\n        <BaseMenuItem\n            {...rest}\n            className={classNames(className, { [style.disabledMenuItem]: disabled })}\n        />\n    );\n};\n\nexport { Menu, MenuItem, MenuDivider };\n"],"mappings":"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"}
+{"version":3,"names":["style","disabledMenuItem","css","opacity","pointerEvents","Menu","menuIsOpen","setState","props","onOpen","onClose","anchor","state","className","closeMenu","onSelect","zIndex","children","renderToPortal","Array","isArray","renderMenuWithPortal","renderCustomContent","renderMenuContent","handle","React","cloneElement","onClick","openMenu","Component","MenuDivider","MenuItem","disabled","rest","classNames"],"sources":["Menu.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Menu as BaseMenu,\n    MenuProps as RmwcMenuProps,\n    MenuItem as BaseMenuItem,\n    MenuItemProps as BaseMenuItemProps,\n    MenuSurface,\n    MenuSurfaceAnchor\n} from \"@rmwc/menu\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nconst style = {\n    disabledMenuItem: css({\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    })\n};\n\ntype MenuProps = RmwcMenuProps & {\n    // One or more MenuItem components.\n    children: React.ReactNode;\n\n    // A handler which triggers the menu, eg. button or link.\n    handle?: React.ReactElement;\n\n    // Position the menu to one of anchor corners.\n    // 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart'\n    anchor?:\n        | \"bottomEnd\"\n        | \"bottomLeft\"\n        | \"bottomRight\"\n        | \"bottomStart\"\n        | \"topEnd\"\n        | \"topLeft\"\n        | \"topRight\"\n        | \"topStart\";\n\n    // Class that will be added to the Menu element.\n    className?: string;\n\n    onOpen?: () => void;\n    onClose?: () => void;\n\n    // For testing purposes.\n    \"data-testid\"?: string;\n};\n\ninterface MenuState {\n    menuIsOpen: boolean;\n}\n\n/**\n * Use Menu component to display a list of choices, once the handler is triggered.\n */\nclass Menu extends React.Component<MenuProps, MenuState> {\n    static defaultProps: Partial<MenuProps> = {\n        anchor: \"topStart\"\n    };\n\n    public override state: MenuState = {\n        menuIsOpen: false\n    };\n\n    private readonly openMenu = () => {\n        this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen());\n    };\n\n    private readonly closeMenu = () => {\n        this.setState({ menuIsOpen: false }, () => this.props.onClose && this.props.onClose());\n    };\n\n    private readonly renderMenuWithPortal = () => {\n        return (\n            <BaseMenu\n                anchorCorner={this.props.anchor}\n                open={this.state.menuIsOpen}\n                className={this.props.className}\n                onClose={this.closeMenu}\n                onSelect={this.props.onSelect}\n                renderToPortal={true}\n                style={{ zIndex: 99 }} // Fixes Menu in Drawers\n            >\n                {this.props.children}\n            </BaseMenu>\n        );\n    };\n\n    private readonly renderCustomContent = () => {\n        const { children } = this.props;\n        return (\n            <MenuSurface\n                open={this.state.menuIsOpen}\n                onClose={this.closeMenu}\n                renderToPortal={this.props.renderToPortal}\n            >\n                {typeof children === \"function\"\n                    ? children({ closeMenu: this.closeMenu })\n                    : children}\n            </MenuSurface>\n        );\n    };\n\n    private readonly renderMenuContent = () => {\n        return Array.isArray(this.props.children)\n            ? this.renderMenuWithPortal()\n            : this.renderCustomContent();\n    };\n\n    public override render(): React.ReactNode {\n        return (\n            <MenuSurfaceAnchor data-testid={this.props[\"data-testid\"]}>\n                {this.renderMenuContent()}\n                {this.props.handle &&\n                    React.cloneElement(this.props.handle, { onClick: this.openMenu })}\n            </MenuSurfaceAnchor>\n        );\n    }\n}\n\nconst MenuDivider: React.FC = () => {\n    return <li className=\"mdc-list-divider\" role=\"separator\" />;\n};\n\ninterface MenuItemProps extends BaseMenuItemProps {\n    children: React.ReactNode;\n    className?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    \"data-testid\"?: string;\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({ disabled, className, ...rest }) => {\n    return (\n        <BaseMenuItem\n            {...rest}\n            className={classNames(className, { [style.disabledMenuItem]: disabled })}\n        />\n    );\n};\n\nexport { Menu, MenuItem, MenuDivider };\n"],"mappings":"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"}

package/Skeleton/Skeleton.d.ts

@@ -1,4 +1,8 @@
 import { ReactElement } from "react";
-import { SkeletonProps } from "react-loading-skeleton";
+import { SkeletonProps as BaseSkeletonProps } from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
-export declare const Skeleton: (props: SkeletonProps) => ReactElement;
+interface SkeletonProps extends BaseSkeletonProps {
+    theme?: "dark" | "light";
+}
+export declare const Skeleton: ({ theme, ...props }: SkeletonProps) => ReactElement;
+export {};

package/Skeleton/Skeleton.js

@@ -1,18 +1,22 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Skeleton = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _reactLoadingSkeleton = _interopRequireWildcard(require("react-loading-skeleton"));
 require("react-loading-skeleton/dist/skeleton.css");
-var Skeleton = function Skeleton(props) {
+var _excluded = ["theme"];
+var Skeleton = function Skeleton(_ref) {
+  var theme = _ref.theme,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.SkeletonTheme, {
-    baseColor: "var(--mdc-theme-background)",
-    highlightColor: "var(--mdc-theme-surface)"
+    baseColor: theme === "dark" ? "var(--mdc-theme-on-background)" : "var(--mdc-theme-background)",
+    highlightColor: theme === "dark" ? "var(--mdc-theme-background)" : "var(--mdc-theme-surface)"
   }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, props));
 };
 exports.Skeleton = Skeleton;

package/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"names":["Skeleton","props"],"sources":["Skeleton.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport ReactLoadingSkeleton, { SkeletonProps, SkeletonTheme } from \"react-loading-skeleton\";\n\nimport \"react-loading-skeleton/dist/skeleton.css\";\n\nexport const Skeleton = (props: SkeletonProps): ReactElement => {\n    return (\n        <SkeletonTheme\n            baseColor={\"var(--mdc-theme-background)\"}\n            highlightColor={\"var(--mdc-theme-surface)\"}\n        >\n            <ReactLoadingSkeleton {...props} />\n        </SkeletonTheme>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AACA;AAEA;AAEO,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAAoB,EAAmB;EAC5D,oBACI,6BAAC,mCAAa;IACV,SAAS,EAAE,6BAA8B;IACzC,cAAc,EAAE;EAA2B,gBAE3C,6BAAC,6BAAoB,EAAKA,KAAK,CAAI,CACvB;AAExB,CAAC;AAAC"}
+{"version":3,"names":["Skeleton","theme","props"],"sources":["Skeleton.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport ReactLoadingSkeleton, {\n    SkeletonProps as BaseSkeletonProps,\n    SkeletonTheme\n} from \"react-loading-skeleton\";\n\nimport \"react-loading-skeleton/dist/skeleton.css\";\n\ninterface SkeletonProps extends BaseSkeletonProps {\n    theme?: \"dark\" | \"light\";\n}\n\nexport const Skeleton = ({ theme, ...props }: SkeletonProps): ReactElement => {\n    return (\n        <SkeletonTheme\n            baseColor={\n                theme === \"dark\" ? \"var(--mdc-theme-on-background)\" : \"var(--mdc-theme-background)\"\n            }\n            highlightColor={\n                theme === \"dark\" ? \"var(--mdc-theme-background)\" : \"var(--mdc-theme-surface)\"\n            }\n        >\n            <ReactLoadingSkeleton {...props} />\n        </SkeletonTheme>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AACA;AAKA;AAAkD;AAM3C,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAAyD;EAAA,IAAnDC,KAAK,QAALA,KAAK;IAAKC,KAAK;EACtC,oBACI,6BAAC,mCAAa;IACV,SAAS,EACLD,KAAK,KAAK,MAAM,GAAG,gCAAgC,GAAG,6BACzD;IACD,cAAc,EACVA,KAAK,KAAK,MAAM,GAAG,6BAA6B,GAAG;EACtD,gBAED,6BAAC,6BAAoB,EAAKC,KAAK,CAAI,CACvB;AAExB,CAAC;AAAC"}

package/Tabs/Tabs.js

@@ -75,7 +75,13 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, tabs.map(function (item) {
     if (!item.visible) {
-      return null;
+      return /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
+        tag: "div",
+        style: {
+          display: "none"
+        },
+        key: item.id
+      });
     }
     var style = item.style || {};
     if (item.disabled) {

package/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["disabledStyles","opacity","pointerEvents","TabsContext","createContext","undefined","Tabs","forwardRef","props","ref","useState","activeTabIndex","setActiveIndex","tabs","setTabs","activeIndex","value","activateTabIndex","useCallback","index","updateValue","useImperativeHandle","getActiveIndex","switchTab","tabIndex","useEffect","disabled","tabBar","map","tab","id","join","evt","detail","onActivate","item","visible","style","Object","assign","icon","label","content","filter","Boolean","children","display","context","useMemo","addTab","existingIndex","findIndex","slice","removeTab","classNames","className","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import React, {\n    createContext,\n    forwardRef,\n    PropsWithChildren,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useState\n} from \"react\";\nimport classNames from \"classnames\";\nimport { TabBar, Tab as RmwcTab } from \"@rmwc/tabs\";\nimport { TabProps } from \"./Tab\";\n\nexport type TabsProps = PropsWithChildren<{\n    /**\n     * Append a class name.\n     */\n    className?: string;\n\n    /**\n     * Callback to execute when a tab is changed.\n     */\n    onActivate?: (index: number) => void;\n\n    /**\n     * Active tab index value.\n     */\n    value?: number;\n\n    /**\n     * Function to change active tab.\n     */\n    updateValue?: (index: number) => void;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n}>;\n\nconst disabledStyles: Record<string, string | number> = {\n    opacity: 0.5,\n    pointerEvents: \"none\"\n};\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\ninterface TabsContext {\n    addTab(props: TabItem): void;\n    removeTab(id: string): void;\n}\n\nexport const TabsContext = createContext<TabsContext | undefined>(undefined);\n\nexport interface TabsImperativeApi {\n    switchTab(index: number): void;\n    getActiveIndex(): number;\n}\n/**\n * Use Tabs component to display a list of choices, once the handler is triggered.\n */\nexport const Tabs = forwardRef<TabsImperativeApi | undefined, TabsProps>((props, ref) => {\n    const [activeTabIndex, setActiveIndex] = useState(0);\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const activeIndex = props.value !== undefined ? props.value : activeTabIndex;\n\n    const activateTabIndex = useCallback((index: number) => {\n        if (typeof props.updateValue === \"function\") {\n            props.updateValue(index);\n            return;\n        }\n\n        setActiveIndex(index);\n    }, []);\n\n    useImperativeHandle(ref, () => ({\n        getActiveIndex() {\n            return activeIndex;\n        },\n        switchTab(tabIndex: number) {\n            activateTabIndex(tabIndex);\n        }\n    }));\n\n    /**\n     * This effect will make sure that disabled tabs automatically switch to the first tab.\n     */\n    useEffect(() => {\n        if (tabs[activeIndex]?.disabled) {\n            activateTabIndex(0);\n        }\n    });\n\n    /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */\n    const tabBar = (\n        <TabBar\n            key={tabs.map(tab => tab.id).join(\";\")}\n            className=\"webiny-ui-tabs__tab-bar\"\n            activeTabIndex={activeIndex}\n            onActivate={evt => {\n                if (typeof props.updateValue === \"function\") {\n                    props.updateValue(evt.detail.index);\n                } else {\n                    setActiveIndex(evt.detail.index);\n                }\n                props.onActivate && props.onActivate(evt.detail.index);\n            }}\n        >\n            {tabs.map(item => {\n                if (!item.visible) {\n                    return null;\n                }\n\n                const style = item.style || {};\n                if (item.disabled) {\n                    Object.assign(style, disabledStyles);\n                }\n\n                return (\n                    <RmwcTab\n                        tag={\"div\"}\n                        style={style}\n                        key={item.id}\n                        data-testid={item[\"data-testid\"]}\n                        {...(item.icon ? { icon: item.icon } : {})}\n                    >\n                        {item.label}\n                    </RmwcTab>\n                );\n            })}\n        </TabBar>\n    );\n\n    const content = tabs.filter(Boolean).map((tab, index) => {\n        if (activeIndex === index) {\n            return <div key={index}>{tab.children}</div>;\n        } else {\n            return (\n                <div key={index} style={{ display: \"none\" }}>\n                    {tab.children}\n                </div>\n            );\n        }\n    });\n\n    const context: TabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.id === props.id);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id === id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <div className={classNames(\"webiny-ui-tabs\", props.className)}>\n            {tabBar}\n            <div className={\"webiny-ui-tabs__content mdc-tab-content\"}>{content}</div>\n            <TabsContext.Provider value={context}>{props.children}</TabsContext.Provider>\n        </div>\n    );\n});\n\nTabs.displayName = \"Tabs\";\n"],"mappings":"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"}
+{"version":3,"names":["disabledStyles","opacity","pointerEvents","TabsContext","createContext","undefined","Tabs","forwardRef","props","ref","useState","activeTabIndex","setActiveIndex","tabs","setTabs","activeIndex","value","activateTabIndex","useCallback","index","updateValue","useImperativeHandle","getActiveIndex","switchTab","tabIndex","useEffect","disabled","tabBar","map","tab","id","join","evt","detail","onActivate","item","visible","display","style","Object","assign","icon","label","content","filter","Boolean","children","context","useMemo","addTab","existingIndex","findIndex","slice","removeTab","classNames","className","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import React, {\n    createContext,\n    forwardRef,\n    PropsWithChildren,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useState\n} from \"react\";\nimport classNames from \"classnames\";\nimport { TabBar, Tab as RmwcTab } from \"@rmwc/tabs\";\nimport { TabProps } from \"./Tab\";\n\nexport type TabsProps = PropsWithChildren<{\n    /**\n     * Append a class name.\n     */\n    className?: string;\n\n    /**\n     * Callback to execute when a tab is changed.\n     */\n    onActivate?: (index: number) => void;\n\n    /**\n     * Active tab index value.\n     */\n    value?: number;\n\n    /**\n     * Function to change active tab.\n     */\n    updateValue?: (index: number) => void;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n}>;\n\nconst disabledStyles: Record<string, string | number> = {\n    opacity: 0.5,\n    pointerEvents: \"none\"\n};\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\ninterface TabsContext {\n    addTab(props: TabItem): void;\n    removeTab(id: string): void;\n}\n\nexport const TabsContext = createContext<TabsContext | undefined>(undefined);\n\nexport interface TabsImperativeApi {\n    switchTab(index: number): void;\n    getActiveIndex(): number;\n}\n/**\n * Use Tabs component to display a list of choices, once the handler is triggered.\n */\nexport const Tabs = forwardRef<TabsImperativeApi | undefined, TabsProps>((props, ref) => {\n    const [activeTabIndex, setActiveIndex] = useState(0);\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const activeIndex = props.value !== undefined ? props.value : activeTabIndex;\n\n    const activateTabIndex = useCallback((index: number) => {\n        if (typeof props.updateValue === \"function\") {\n            props.updateValue(index);\n            return;\n        }\n\n        setActiveIndex(index);\n    }, []);\n\n    useImperativeHandle(ref, () => ({\n        getActiveIndex() {\n            return activeIndex;\n        },\n        switchTab(tabIndex: number) {\n            activateTabIndex(tabIndex);\n        }\n    }));\n\n    /**\n     * This effect will make sure that disabled tabs automatically switch to the first tab.\n     */\n    useEffect(() => {\n        if (tabs[activeIndex]?.disabled) {\n            activateTabIndex(0);\n        }\n    });\n\n    /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */\n    const tabBar = (\n        <TabBar\n            key={tabs.map(tab => tab.id).join(\";\")}\n            className=\"webiny-ui-tabs__tab-bar\"\n            activeTabIndex={activeIndex}\n            onActivate={evt => {\n                if (typeof props.updateValue === \"function\") {\n                    props.updateValue(evt.detail.index);\n                } else {\n                    setActiveIndex(evt.detail.index);\n                }\n                props.onActivate && props.onActivate(evt.detail.index);\n            }}\n        >\n            {tabs.map(item => {\n                if (!item.visible) {\n                    return <RmwcTab tag={\"div\"} style={{ display: \"none\" }} key={item.id} />;\n                }\n\n                const style = item.style || {};\n                if (item.disabled) {\n                    Object.assign(style, disabledStyles);\n                }\n\n                return (\n                    <RmwcTab\n                        tag={\"div\"}\n                        style={style}\n                        key={item.id}\n                        data-testid={item[\"data-testid\"]}\n                        {...(item.icon ? { icon: item.icon } : {})}\n                    >\n                        {item.label}\n                    </RmwcTab>\n                );\n            })}\n        </TabBar>\n    );\n\n    const content = tabs.filter(Boolean).map((tab, index) => {\n        if (activeIndex === index) {\n            return <div key={index}>{tab.children}</div>;\n        } else {\n            return (\n                <div key={index} style={{ display: \"none\" }}>\n                    {tab.children}\n                </div>\n            );\n        }\n    });\n\n    const context: TabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.id === props.id);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id === id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <div className={classNames(\"webiny-ui-tabs\", props.className)}>\n            {tabBar}\n            <div className={\"webiny-ui-tabs__content mdc-tab-content\"}>{content}</div>\n            <TabsContext.Provider value={context}>{props.children}</TabsContext.Provider>\n        </div>\n    );\n});\n\nTabs.displayName = \"Tabs\";\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/ui",
-	"version": "0.0.0-unstable.bca7b3e350",
+	"version": "0.0.0-unstable.c59b9cc5b9",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -16,8 +16,9 @@
 	"dependencies": {
 		"@babel/runtime": "7.20.13",
 		"@editorjs/editorjs": "2.26.5",
-		"@emotion/core": "10.3.1",
-		"@emotion/styled": "10.3.0",
+		"@emotion/react": "11.10.8",
+		"@emotion/styled": "11.10.6",
+		"@material-design-icons/svg": "0.14.2",
 		"@rmwc/button": "7.0.3",
 		"@rmwc/checkbox": "7.0.3",
 		"@rmwc/chip": "7.0.3",
@@ -66,41 +67,41 @@
 		"shortid": "2.2.16"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.19.3",
-		"@babel/core": "^7.19.3",
-		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/preset-env": "^7.19.4",
-		"@babel/preset-typescript": "^7.18.6",
-		"@storybook/addon-info": "^5.2.8",
-		"@storybook/addon-knobs": "^5.0.5",
-		"@storybook/addon-links": "^5.0.5",
-		"@storybook/react": "^5.2.8",
-		"@testing-library/react": "^12.1.2",
-		"@types/nprogress": "^0.2.0",
-		"@types/rc-tooltip": "^3.7.2",
-		"@types/react-custom-scrollbars": "^4.0.10",
-		"@types/react-transition-group": "^4.4.4",
-		"@types/shortid": "^0.0.29",
-		"@webiny/cli": "^0.0.0-unstable.bca7b3e350",
-		"@webiny/form": "^0.0.0-unstable.bca7b3e350",
-		"@webiny/project-utils": "^0.0.0-unstable.bca7b3e350",
-		"@webiny/storybook-utils": "^0.0.0-unstable.bca7b3e350",
-		"@webiny/validation": "^0.0.0-unstable.bca7b3e350",
-		"babel-loader": "^8.0.0-beta.6",
-		"babel-plugin-emotion": "^9.2.8",
-		"execa": "^5.0.0",
-		"jest-dom": "^3.0.0",
-		"ncp": "^2.0.0",
-		"raw-loader": "^0.5.1",
-		"react-docgen": "^5.0.0",
-		"react-docgen-typescript-loader": "^3.6.0",
-		"regenerator-runtime": "^0.13.2",
-		"rimraf": "^3.0.2",
-		"sass": "^1.38.0",
-		"sass-loader": "^12.1.0",
-		"ttypescript": "^1.5.13",
+		"@babel/cli": "7.20.7",
+		"@babel/core": "7.20.12",
+		"@babel/plugin-proposal-class-properties": "7.18.6",
+		"@babel/preset-env": "7.20.2",
+		"@babel/preset-typescript": "7.18.6",
+		"@storybook/addon-info": "5.3.21",
+		"@storybook/addon-knobs": "5.3.21",
+		"@storybook/addon-links": "5.3.21",
+		"@storybook/react": "5.3.21",
+		"@testing-library/react": "12.1.5",
+		"@types/nprogress": "0.2.0",
+		"@types/rc-tooltip": "3.7.7",
+		"@types/react-custom-scrollbars": "4.0.10",
+		"@types/react-transition-group": "4.4.5",
+		"@types/shortid": "0.0.29",
+		"@webiny/cli": "0.0.0-unstable.c59b9cc5b9",
+		"@webiny/form": "0.0.0-unstable.c59b9cc5b9",
+		"@webiny/project-utils": "0.0.0-unstable.c59b9cc5b9",
+		"@webiny/storybook-utils": "0.0.0-unstable.c59b9cc5b9",
+		"@webiny/validation": "0.0.0-unstable.c59b9cc5b9",
+		"babel-loader": "8.3.0",
+		"babel-plugin-emotion": "9.2.11",
+		"execa": "5.1.1",
+		"jest-dom": "3.5.0",
+		"ncp": "2.0.0",
+		"raw-loader": "0.5.1",
+		"react-docgen": "5.4.3",
+		"react-docgen-typescript-loader": "3.7.2",
+		"regenerator-runtime": "0.13.11",
+		"rimraf": "3.0.2",
+		"sass": "1.58.0",
+		"sass-loader": "12.6.0",
+		"ttypescript": "1.5.15",
 		"typescript": "4.7.4",
-		"webpack": "^4.46.0"
+		"webpack": "4.46.0"
 	},
 	"peerDependencies": {
 		"minimatch": "^5.1.0",
@@ -128,9 +129,9 @@
 			"dependencies": [
 				"@svgr/webpack",
 				"material-components-web",
-				"@emotion/core"
+				"@emotion/react"
 			]
 		}
 	},
-	"gitHead": "bca7b3e35084d7012061bda0d3f08202fe611581"
+	"gitHead": "c59b9cc5b96b7fd91388de93c7fff2d977d25220"
 }