@webiny/ui 0.0.0-unstable.c2780f51fe → 0.0.0-unstable.c7dec08bb0

package/AutoComplete/AutoComplete.d.ts

@@ -9,6 +9,7 @@ export interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, "onChange
     onChange?: (value: any, selection?: any) => void;
     loading?: boolean;
     noResultFound?: React.ReactNode;
+    size?: "small" | "medium" | "large";
 }
 interface State {
     inputValue: string;

package/AutoComplete/AutoComplete.js

@@ -215,7 +215,7 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
         }
       };
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(_styles.autoCompleteStyle, className)
+        className: (0, _classnames.default)(_styles.autoCompleteStyle, this.props.size ? "webiny-ui-autocomplete--size-".concat(this.props.size) : null, className)
       }, /*#__PURE__*/_react.default.createElement(_downshift.default, Object.assign({}, downshiftProps, {
         ref: this.downshift
       }), function (_ref3) {
@@ -226,6 +226,8 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
           // This prop is above `otherInputProps` since it can be overridden by the user.
           trailingIcon: _this4.props.loading && /*#__PURE__*/_react.default.createElement(Spinner, null)
         }, otherInputProps), {}, {
+          // @ts-ignore
+          size: _this4.props.size,
           // @ts-ignore
           validation: validation,
           rawOnChange: true,
@@ -242,11 +244,11 @@ var AutoComplete = /*#__PURE__*/function (_React$Component) {
           onKeyDown: function onKeyDown(ev) {
             var keyCode = (0, _keycode.default)(ev);
             if (keyCode === "backspace") {
-              if (_onChange) {
-                _onChange(null);
-              }
               setTimeout(function () {
-                return openMenu();
+                if (_onChange) {
+                  _onChange(null);
+                  openMenu();
+                }
               }, 50);
             }
           },

package/AutoComplete/AutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["menuStyles","css","top","bottom","listStyles","listStyle","paddingLeft","margin","Placement","Spinner","OptionsList","placement","getMenuProps","children","classNames","AutoComplete","inputValue","React","createRef","previousProps","props","value","options","previousValue","item","find","option","getOptionValue","downshift","current","selectItem","isOpen","highlightedIndex","selectedItem","getItemProps","state","length","renderItem","filtered","filter","aliases","findInAliases","getOptionText","toLowerCase","includes","noResultFound","map","index","itemValue","itemClassNames","suggestionList","selected","className","call","onChange","onInput","validation","isValid","message","otherInputProps","downshiftProps","autoCompleteStyle","itemToString","defaultSelectedItem","selection","setState","getInputProps","openMenu","rest","trailingIcon","loading","rawOnChange","ev","onBlur","onFocus","onKeyDown","keyCode","keycode","setTimeout","onKeyUp","target","currentTarget","disabled","readOnly","renderOptions","Component","valueProp","textProp"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport { Input } from \"~/Input\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport keycode from \"keycode\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { isEqual } from \"lodash\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { css } from \"emotion\";\n\nconst menuStyles = css({\n    top: \"unset !important\",\n    bottom: 75\n});\n\nconst listStyles = css({\n    \"&.autocomplete__options-list\": {\n        listStyle: \"none\",\n        paddingLeft: 0,\n        \"& li\": {\n            margin: 0\n        }\n    }\n});\n\nexport enum Placement {\n    top = \"top\",\n    bottom = \"bottom\"\n}\n\nexport interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, \"onChange\"> {\n    /* Placement position of dropdown menu, can be either `top` or `bottom`. */\n    placement?: Placement;\n\n    /* A callback that is executed each time a value is changed. */\n    onChange?: (value: any, selection?: any) => void;\n\n    /* If true, will show a loading spinner on the right side of the input. */\n    loading?: boolean;\n\n    /* A component that renders supporting UI in case of no result found. */\n    noResultFound?: React.ReactNode;\n}\n\ninterface State {\n    inputValue: string;\n}\n\nconst Spinner: React.FC = () => {\n    return (\n        <MaterialSpinner\n            size={24}\n            spinnerColor={\"var(--mdc-theme-primary)\"}\n            spinnerWidth={2}\n            visible\n        />\n    );\n};\n\ninterface RenderOptionsParams\n    extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n    options: AutoCompleteProps[\"options\"];\n    placement?: Placement;\n}\n\ninterface OptionsListProps {\n    placement?: Placement;\n    getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ placement, getMenuProps, children }) => {\n    return (\n        <Elevation\n            z={1}\n            className={classNames({\n                [menuStyles]: placement === Placement.top\n            })}\n        >\n            <ul\n                className={classNames(\"autocomplete__options-list\", listStyles)}\n                {...getMenuProps()}\n            >\n                {children}\n            </ul>\n        </Elevation>\n    );\n};\n\nclass AutoComplete extends React.Component<AutoCompleteProps, State> {\n    static defaultProps: Partial<AutoCompleteProps> = {\n        valueProp: \"id\",\n        textProp: \"name\",\n        options: [],\n        placement: Placement.bottom,\n        /**\n         * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.\n         */\n        renderItem(item: any) {\n            return (\n                <Typography use={\"body2\"}>\n                    {getOptionText(item, (this as unknown as AutoComplete).props)}\n                </Typography>\n            );\n        }\n    };\n\n    public override state: State = {\n        inputValue: \"\"\n    };\n\n    /**\n     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n     */\n    downshift: any = React.createRef();\n\n    public override componentDidUpdate(previousProps: AutoCompleteProps) {\n        const { value, options } = this.props;\n        const { value: previousValue } = previousProps;\n\n        if (!isEqual(value, previousValue)) {\n            let item = null;\n\n            if (value) {\n                if (typeof value === \"object\") {\n                    item = value;\n                } else {\n                    item =\n                        options.find(option => {\n                            return value === getOptionValue(option, this.props);\n                        }) || null;\n                }\n            }\n\n            const { current: downshift } = this.downshift;\n            downshift && downshift.selectItem(item);\n        }\n    }\n\n    /**\n     * Renders options - based on user's input. It will try to match input text with available options.\n     */\n    private renderOptions({\n        options,\n        isOpen,\n        highlightedIndex,\n        selectedItem,\n        getMenuProps,\n        getItemProps,\n        placement\n    }: RenderOptionsParams) {\n        if (!isOpen) {\n            return null;\n        }\n        /**\n         * Suggest user to start typing when there are no options available to choose from.\n         */\n        if (!this.state.inputValue && !options.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>Start typing to find entry</Typography>\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        const { renderItem } = this.props;\n\n        const filtered = options.filter(item => {\n            // 2) At the end, we want to show only options that are matched by typed text.\n            if (!this.state.inputValue) {\n                return true;\n            }\n\n            if (item.aliases) {\n                return findInAliases(item, this.state.inputValue);\n            }\n\n            return getOptionText(item, this.props)\n                .toLowerCase()\n                .includes(this.state.inputValue.toLowerCase());\n        });\n\n        if (!filtered.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>No results.</Typography>\n                        {this.props.noResultFound}\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        return (\n            <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                {filtered.map((item, index) => {\n                    const itemValue = getOptionValue(item, this.props);\n\n                    // Base classes.\n                    const itemClassNames = {\n                        [suggestionList]: true,\n                        highlighted: highlightedIndex === index,\n                        selected: false\n                    };\n\n                    // Add \"selected\" class if the item is selected.\n                    if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {\n                        itemClassNames.selected = true;\n                    }\n\n                    // Render the item.\n                    return (\n                        <li\n                            key={itemValue}\n                            {...getItemProps({\n                                index,\n                                item,\n                                className: classNames(itemClassNames)\n                            })}\n                        >\n                            {renderItem.call(this, item, index)}\n                        </li>\n                    );\n                })}\n            </OptionsList>\n        );\n    }\n\n    public override render() {\n        const {\n            className,\n            options,\n            onChange,\n            value,\n            // valueProp,\n            // textProp,\n            onInput,\n            validation = {\n                isValid: null,\n                message: null\n            },\n            placement,\n            ...otherInputProps\n        } = this.props;\n\n        // Downshift related props.\n        const downshiftProps = {\n            className: autoCompleteStyle,\n            itemToString: (item: any) => getOptionText(item, this.props),\n            defaultSelectedItem: value,\n            onChange: (selection: string) => {\n                if (!selection || !onChange) {\n                    return;\n                }\n                onChange(getOptionValue(selection, this.props), selection);\n                this.setState(state => ({\n                    ...state,\n                    inputValue: \"\"\n                }));\n            }\n        };\n\n        return (\n            <div className={classNames(autoCompleteStyle, className)}>\n                <Downshift {...downshiftProps} ref={this.downshift}>\n                    {({ getInputProps, openMenu, ...rest }) => (\n                        <div>\n                            <Input\n                                {...getInputProps({\n                                    // This prop is above `otherInputProps` since it can be overridden by the user.\n                                    trailingIcon: this.props.loading && <Spinner />,\n                                    ...otherInputProps,\n                                    // @ts-ignore\n                                    validation,\n                                    rawOnChange: true,\n                                    onChange: ev => ev,\n                                    onBlur: ev => ev,\n                                    onFocus: ev => {\n                                        openMenu();\n                                        otherInputProps.onFocus && otherInputProps.onFocus(ev);\n                                    },\n                                    onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n                                        const keyCode: string = keycode(ev as unknown as Event);\n\n                                        if (keyCode === \"backspace\") {\n                                            if (onChange) {\n                                                onChange(null);\n                                            }\n                                            setTimeout(() => openMenu(), 50);\n                                        }\n                                    },\n                                    onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n                                        const keyCode: string = keycode(ev as unknown as Event);\n\n                                        const target = ev.currentTarget;\n                                        const inputValue = target.value || \"\";\n\n                                        // If user pressed 'esc', 'enter' or similar...\n                                        if (\n                                            keyCode &&\n                                            keyCode.length > 1 &&\n                                            keyCode !== \"backspace\"\n                                        ) {\n                                            return;\n                                        }\n\n                                        // If values are the same, exit, do not update current search term.\n                                        if (inputValue === this.state.inputValue) {\n                                            return;\n                                        }\n\n                                        this.setState(\n                                            state => ({\n                                                ...state,\n                                                inputValue\n                                            }),\n                                            () => {\n                                                onInput && onInput(inputValue);\n                                            }\n                                        );\n                                    }\n                                })}\n                            />\n                            {!otherInputProps.disabled &&\n                                !otherInputProps.readOnly &&\n                                this.renderOptions({\n                                    ...rest,\n                                    options,\n                                    placement\n                                })}\n                        </div>\n                    )}\n                </Downshift>\n            </div>\n        );\n    }\n}\n\nexport { AutoComplete };\n"],"mappings":"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"}
+{"version":3,"names":["menuStyles","css","top","bottom","listStyles","listStyle","paddingLeft","margin","Placement","Spinner","OptionsList","placement","getMenuProps","children","classNames","AutoComplete","inputValue","React","createRef","previousProps","props","value","options","previousValue","item","find","option","getOptionValue","downshift","current","selectItem","isOpen","highlightedIndex","selectedItem","getItemProps","state","length","renderItem","filtered","filter","aliases","findInAliases","getOptionText","toLowerCase","includes","noResultFound","map","index","itemValue","itemClassNames","suggestionList","selected","className","call","onChange","onInput","validation","isValid","message","otherInputProps","downshiftProps","autoCompleteStyle","itemToString","defaultSelectedItem","selection","setState","size","getInputProps","openMenu","rest","trailingIcon","loading","rawOnChange","ev","onBlur","onFocus","onKeyDown","keyCode","keycode","setTimeout","onKeyUp","target","currentTarget","disabled","readOnly","renderOptions","Component","valueProp","textProp"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React from \"react\";\nimport Downshift, { ControllerStateAndHelpers, PropGetters } from \"downshift\";\nimport { Input } from \"~/Input\";\nimport classNames from \"classnames\";\nimport { Elevation } from \"~/Elevation\";\nimport { Typography } from \"~/Typography\";\nimport keycode from \"keycode\";\nimport { autoCompleteStyle, suggestionList } from \"./styles\";\nimport { AutoCompleteBaseProps } from \"./types\";\nimport { getOptionValue, getOptionText, findInAliases } from \"./utils\";\nimport { isEqual } from \"lodash\";\nimport MaterialSpinner from \"react-spinner-material\";\nimport { css } from \"emotion\";\n\nconst menuStyles = css({\n    top: \"unset !important\",\n    bottom: 75\n});\n\nconst listStyles = css({\n    \"&.autocomplete__options-list\": {\n        listStyle: \"none\",\n        paddingLeft: 0,\n        \"& li\": {\n            margin: 0\n        }\n    }\n});\n\nexport enum Placement {\n    top = \"top\",\n    bottom = \"bottom\"\n}\n\nexport interface AutoCompleteProps extends Omit<AutoCompleteBaseProps, \"onChange\"> {\n    /* Placement position of dropdown menu, can be either `top` or `bottom`. */\n    placement?: Placement;\n\n    /* A callback that is executed each time a value is changed. */\n    onChange?: (value: any, selection?: any) => void;\n\n    /* If true, will show a loading spinner on the right side of the input. */\n    loading?: boolean;\n\n    /* A component that renders supporting UI in case of no result found. */\n    noResultFound?: React.ReactNode;\n\n    // Size - small, medium or large\n    size?: \"small\" | \"medium\" | \"large\";\n}\n\ninterface State {\n    inputValue: string;\n}\n\nconst Spinner: React.FC = () => {\n    return (\n        <MaterialSpinner\n            size={24}\n            spinnerColor={\"var(--mdc-theme-primary)\"}\n            spinnerWidth={2}\n            visible\n        />\n    );\n};\n\ninterface RenderOptionsParams\n    extends Omit<ControllerStateAndHelpers<any>, \"getInputProps\" | \"openMenu\"> {\n    options: AutoCompleteProps[\"options\"];\n    placement?: Placement;\n}\n\ninterface OptionsListProps {\n    placement?: Placement;\n    getMenuProps: PropGetters<Record<string, any>>[\"getMenuProps\"];\n}\n\nconst OptionsList: React.FC<OptionsListProps> = ({ placement, getMenuProps, children }) => {\n    return (\n        <Elevation\n            z={1}\n            className={classNames({\n                [menuStyles]: placement === Placement.top\n            })}\n        >\n            <ul\n                className={classNames(\"autocomplete__options-list\", listStyles)}\n                {...getMenuProps()}\n            >\n                {children}\n            </ul>\n        </Elevation>\n    );\n};\n\nclass AutoComplete extends React.Component<AutoCompleteProps, State> {\n    static defaultProps: Partial<AutoCompleteProps> = {\n        valueProp: \"id\",\n        textProp: \"name\",\n        options: [],\n        placement: Placement.bottom,\n        /**\n         * We cast this as AutoComplete because renderItem() is executed via .call() where AutoComplete instance is assigned as this.\n         */\n        renderItem(item: any) {\n            return (\n                <Typography use={\"body2\"}>\n                    {getOptionText(item, (this as unknown as AutoComplete).props)}\n                </Typography>\n            );\n        }\n    };\n\n    public override state: State = {\n        inputValue: \"\"\n    };\n\n    /**\n     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.\n     */\n    downshift: any = React.createRef();\n\n    public override componentDidUpdate(previousProps: AutoCompleteProps) {\n        const { value, options } = this.props;\n        const { value: previousValue } = previousProps;\n\n        if (!isEqual(value, previousValue)) {\n            let item = null;\n\n            if (value) {\n                if (typeof value === \"object\") {\n                    item = value;\n                } else {\n                    item =\n                        options.find(option => {\n                            return value === getOptionValue(option, this.props);\n                        }) || null;\n                }\n            }\n\n            const { current: downshift } = this.downshift;\n            downshift && downshift.selectItem(item);\n        }\n    }\n\n    /**\n     * Renders options - based on user's input. It will try to match input text with available options.\n     */\n    private renderOptions({\n        options,\n        isOpen,\n        highlightedIndex,\n        selectedItem,\n        getMenuProps,\n        getItemProps,\n        placement\n    }: RenderOptionsParams) {\n        if (!isOpen) {\n            return null;\n        }\n        /**\n         * Suggest user to start typing when there are no options available to choose from.\n         */\n        if (!this.state.inputValue && !options.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>Start typing to find entry</Typography>\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        const { renderItem } = this.props;\n\n        const filtered = options.filter(item => {\n            // 2) At the end, we want to show only options that are matched by typed text.\n            if (!this.state.inputValue) {\n                return true;\n            }\n\n            if (item.aliases) {\n                return findInAliases(item, this.state.inputValue);\n            }\n\n            return getOptionText(item, this.props)\n                .toLowerCase()\n                .includes(this.state.inputValue.toLowerCase());\n        });\n\n        if (!filtered.length) {\n            return (\n                <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                    <li>\n                        <Typography use={\"body2\"}>No results.</Typography>\n                        {this.props.noResultFound}\n                    </li>\n                </OptionsList>\n            );\n        }\n\n        return (\n            <OptionsList placement={placement} getMenuProps={getMenuProps}>\n                {filtered.map((item, index) => {\n                    const itemValue = getOptionValue(item, this.props);\n\n                    // Base classes.\n                    const itemClassNames = {\n                        [suggestionList]: true,\n                        highlighted: highlightedIndex === index,\n                        selected: false\n                    };\n\n                    // Add \"selected\" class if the item is selected.\n                    if (selectedItem && getOptionValue(selectedItem, this.props) === itemValue) {\n                        itemClassNames.selected = true;\n                    }\n\n                    // Render the item.\n                    return (\n                        <li\n                            key={itemValue}\n                            {...getItemProps({\n                                index,\n                                item,\n                                className: classNames(itemClassNames)\n                            })}\n                        >\n                            {renderItem.call(this, item, index)}\n                        </li>\n                    );\n                })}\n            </OptionsList>\n        );\n    }\n\n    public override render() {\n        const {\n            className,\n            options,\n            onChange,\n            value,\n            // valueProp,\n            // textProp,\n            onInput,\n            validation = {\n                isValid: null,\n                message: null\n            },\n            placement,\n            ...otherInputProps\n        } = this.props;\n\n        // Downshift related props.\n        const downshiftProps = {\n            className: autoCompleteStyle,\n            itemToString: (item: any) => getOptionText(item, this.props),\n            defaultSelectedItem: value,\n            onChange: (selection: string) => {\n                if (!selection || !onChange) {\n                    return;\n                }\n                onChange(getOptionValue(selection, this.props), selection);\n                this.setState(state => ({\n                    ...state,\n                    inputValue: \"\"\n                }));\n            }\n        };\n\n        return (\n            <div\n                className={classNames(\n                    autoCompleteStyle,\n                    this.props.size ? `webiny-ui-autocomplete--size-${this.props.size}` : null,\n                    className\n                )}\n            >\n                <Downshift {...downshiftProps} ref={this.downshift}>\n                    {({ getInputProps, openMenu, ...rest }) => (\n                        <div>\n                            <Input\n                                {...getInputProps({\n                                    // This prop is above `otherInputProps` since it can be overridden by the user.\n                                    trailingIcon: this.props.loading && <Spinner />,\n                                    ...otherInputProps,\n                                    // @ts-ignore\n                                    size: this.props.size,\n                                    // @ts-ignore\n                                    validation,\n                                    rawOnChange: true,\n                                    onChange: ev => ev,\n                                    onBlur: ev => ev,\n                                    onFocus: ev => {\n                                        openMenu();\n                                        otherInputProps.onFocus && otherInputProps.onFocus(ev);\n                                    },\n                                    onKeyDown: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n                                        const keyCode: string = keycode(ev as unknown as Event);\n\n                                        if (keyCode === \"backspace\") {\n                                            setTimeout(() => {\n                                                if (onChange) {\n                                                    onChange(null);\n                                                    openMenu();\n                                                }\n                                            }, 50);\n                                        }\n                                    },\n                                    onKeyUp: (ev: React.KeyboardEvent<HTMLInputElement>) => {\n                                        const keyCode: string = keycode(ev as unknown as Event);\n\n                                        const target = ev.currentTarget;\n                                        const inputValue = target.value || \"\";\n\n                                        // If user pressed 'esc', 'enter' or similar...\n                                        if (\n                                            keyCode &&\n                                            keyCode.length > 1 &&\n                                            keyCode !== \"backspace\"\n                                        ) {\n                                            return;\n                                        }\n\n                                        // If values are the same, exit, do not update current search term.\n                                        if (inputValue === this.state.inputValue) {\n                                            return;\n                                        }\n\n                                        this.setState(\n                                            state => ({\n                                                ...state,\n                                                inputValue\n                                            }),\n                                            () => {\n                                                onInput && onInput(inputValue);\n                                            }\n                                        );\n                                    }\n                                })}\n                            />\n                            {!otherInputProps.disabled &&\n                                !otherInputProps.readOnly &&\n                                this.renderOptions({\n                                    ...rest,\n                                    options,\n                                    placement\n                                })}\n                        </div>\n                    )}\n                </Downshift>\n            </div>\n        );\n    }\n}\n\nexport { AutoComplete };\n"],"mappings":"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"}

package/AutoComplete/styles.js

@@ -23,10 +23,31 @@ var autoCompleteStyle = /*#__PURE__*/(0, _emotion.css)({
     padding: 0,
     li: {
       padding: 10,
+      cursor: "pointer",
       span: {
         color: "var(--mdc-theme-on-surface)"
       }
     }
+  },
+  "&.webiny-ui-autocomplete--size-medium": {
+    ".mdc-elevation--z1": {
+      top: 40
+    },
+    ul: {
+      li: {
+        padding: 8
+      }
+    }
+  },
+  "&.webiny-ui-autocomplete--size-small": {
+    ".mdc-elevation--z1": {
+      top: 30
+    },
+    ul: {
+      li: {
+        padding: 5
+      }
+    }
   }
 }, "label:autoCompleteStyle;");
 exports.autoCompleteStyle = autoCompleteStyle;

package/AutoComplete/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["autoCompleteStyle","css","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","span","color","suggestionList","fontWeight","transition"],"sources":["styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\nexport const autoCompleteStyle = css({\n    position: \"relative\",\n    \".mdc-elevation--z1\": {\n        position: \"absolute\",\n        width: \"calc(100% - 2px)\",\n        left: 1,\n        top: 56,\n        zIndex: 10,\n        maxHeight: 200,\n        overflowY: \"scroll\",\n        backgroundColor: \"var(--mdc-theme-surface)\"\n    },\n    ul: {\n        listStyle: \"none\",\n        width: \"100%\",\n        padding: 0,\n        li: {\n            padding: 10,\n            span: {\n                color: \"var(--mdc-theme-on-surface)\"\n            }\n        }\n    }\n});\n\nexport const suggestionList = css({\n    fontWeight: \"normal\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    transition: \"background-color 0.2s\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    \"&.selected\": {\n        fontWeight: \"bold\"\n    },\n    \"&.highlighted\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    }\n});\n"],"mappings":";;;;;;AAAA;AAEO,IAAMA,iBAAiB,gBAAG,IAAAC,YAAG,EAAC;EACjCC,QAAQ,EAAE,UAAU;EACpB,oBAAoB,EAAE;IAClBA,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,kBAAkB;IACzBC,IAAI,EAAE,CAAC;IACPC,GAAG,EAAE,EAAE;IACPC,MAAM,EAAE,EAAE;IACVC,SAAS,EAAE,GAAG;IACdC,SAAS,EAAE,QAAQ;IACnBC,eAAe,EAAE;EACrB,CAAC;EACDC,EAAE,EAAE;IACAC,SAAS,EAAE,MAAM;IACjBR,KAAK,EAAE,MAAM;IACbS,OAAO,EAAE,CAAC;IACVC,EAAE,EAAE;MACAD,OAAO,EAAE,EAAE;MACXE,IAAI,EAAE;QACFC,KAAK,EAAE;MACX;IACJ;EACJ;AACJ,CAAC,6BAAC;AAAC;AAEI,IAAMC,cAAc,gBAAG,IAAAf,YAAG,EAAC;EAC9BgB,UAAU,EAAE,QAAQ;EACpBR,eAAe,EAAE,0BAA0B;EAC3CS,UAAU,EAAE,uBAAuB;EACnCH,KAAK,EAAE,6CAA6C;EACpD,YAAY,EAAE;IACVE,UAAU,EAAE;EAChB,CAAC;EACD,eAAe,EAAE;IACbR,eAAe,EAAE;EACrB;AACJ,CAAC,0BAAC;AAAC"}
+{"version":3,"names":["autoCompleteStyle","css","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","cursor","span","color","suggestionList","fontWeight","transition"],"sources":["styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\nexport const autoCompleteStyle = css({\n    position: \"relative\",\n    \".mdc-elevation--z1\": {\n        position: \"absolute\",\n        width: \"calc(100% - 2px)\",\n        left: 1,\n        top: 56,\n        zIndex: 10,\n        maxHeight: 200,\n        overflowY: \"scroll\",\n        backgroundColor: \"var(--mdc-theme-surface)\"\n    },\n    ul: {\n        listStyle: \"none\",\n        width: \"100%\",\n        padding: 0,\n        li: {\n            padding: 10,\n            cursor: \"pointer\",\n            span: {\n                color: \"var(--mdc-theme-on-surface)\"\n            }\n        }\n    },\n    \"&.webiny-ui-autocomplete--size-medium\": {\n        \".mdc-elevation--z1\": {\n            top: 40\n        },\n        ul: {\n            li: {\n                padding: 8\n            }\n        }\n    },\n    \"&.webiny-ui-autocomplete--size-small\": {\n        \".mdc-elevation--z1\": {\n            top: 30\n        },\n        ul: {\n            li: {\n                padding: 5\n            }\n        }\n    }\n});\n\nexport const suggestionList = css({\n    fontWeight: \"normal\",\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    transition: \"background-color 0.2s\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    \"&.selected\": {\n        fontWeight: \"bold\"\n    },\n    \"&.highlighted\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    }\n});\n"],"mappings":";;;;;;AAAA;AAEO,IAAMA,iBAAiB,gBAAG,IAAAC,YAAG,EAAC;EACjCC,QAAQ,EAAE,UAAU;EACpB,oBAAoB,EAAE;IAClBA,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,kBAAkB;IACzBC,IAAI,EAAE,CAAC;IACPC,GAAG,EAAE,EAAE;IACPC,MAAM,EAAE,EAAE;IACVC,SAAS,EAAE,GAAG;IACdC,SAAS,EAAE,QAAQ;IACnBC,eAAe,EAAE;EACrB,CAAC;EACDC,EAAE,EAAE;IACAC,SAAS,EAAE,MAAM;IACjBR,KAAK,EAAE,MAAM;IACbS,OAAO,EAAE,CAAC;IACVC,EAAE,EAAE;MACAD,OAAO,EAAE,EAAE;MACXE,MAAM,EAAE,SAAS;MACjBC,IAAI,EAAE;QACFC,KAAK,EAAE;MACX;IACJ;EACJ,CAAC;EACD,uCAAuC,EAAE;IACrC,oBAAoB,EAAE;MAClBX,GAAG,EAAE;IACT,CAAC;IACDK,EAAE,EAAE;MACAG,EAAE,EAAE;QACAD,OAAO,EAAE;MACb;IACJ;EACJ,CAAC;EACD,sCAAsC,EAAE;IACpC,oBAAoB,EAAE;MAClBP,GAAG,EAAE;IACT,CAAC;IACDK,EAAE,EAAE;MACAG,EAAE,EAAE;QACAD,OAAO,EAAE;MACb;IACJ;EACJ;AACJ,CAAC,6BAAC;AAAC;AAEI,IAAMK,cAAc,gBAAG,IAAAhB,YAAG,EAAC;EAC9BiB,UAAU,EAAE,QAAQ;EACpBT,eAAe,EAAE,0BAA0B;EAC3CU,UAAU,EAAE,uBAAuB;EACnCH,KAAK,EAAE,6CAA6C;EACpD,YAAY,EAAE;IACVE,UAAU,EAAE;EAChB,CAAC;EACD,eAAe,EAAE;IACbT,eAAe,EAAE;EACrB;AACJ,CAAC,0BAAC;AAAC"}

package/DataTable/DataTable.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { DataTableCellProps } from "@rmwc/data-table";
-import { OnChangeFn, SortingState } from "@tanstack/react-table";
+import { OnChangeFn, SortingState, Row } from "@tanstack/react-table";
 import "@rmwc/data-table/data-table.css";
 interface Column<T> {
     header: string | number | JSX.Element;
@@ -13,23 +13,63 @@ export declare type Columns<T> = {
     [P in keyof T]?: Column<T>;
 };
 export declare type DefaultData = {
+    id: string;
     selectable?: boolean;
 };
 export declare type Sorting = SortingState;
 export declare type OnSortingChange = OnChangeFn<Sorting>;
 interface Props<T> {
+    /**
+     * Show or hide borders.
+     */
+    bordered?: boolean;
+    /**
+     * Controls whether "select all" action is allowed.
+     */
+    canSelectAllRows?: boolean;
+    /**
+     * Columns definition.
+     */
     columns: Columns<T>;
+    /**
+     * Data to display into DataTable body.
+     */
     data: T[];
-    onSelectRow?: (rows: T[] | []) => void;
+    /**
+     * Callback that is called to determine if the row is selectable.
+     */
+    isRowSelectable?: (row: Row<T>) => boolean;
+    /**
+     * Render the skeleton state at the initial data loading.
+     */
     loadingInitial?: boolean;
+    /**
+     * Callback that receives the selected rows.
+     */
+    onSelectRow?: (rows: T[]) => void;
+    /**
+     * Callback that receives current sorting state.
+     */
+    onSortingChange?: OnSortingChange;
+    /**
+     * Selected rows.
+     */
+    selectedRows?: T[];
+    /**
+     * Sorting state.
+     */
+    sorting?: Sorting;
+    /**
+     * The number of columns to affix to the side of the table when scrolling.
+     */
     stickyColumns?: number;
+    /**
+     * The number of rows to affix to the top of the table when scrolling.
+     */
     stickyRows?: number;
-    bordered?: boolean;
-    sorting?: Sorting;
-    onSortingChange?: OnSortingChange;
 }
 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 declare const DataTable: <T extends Object & DefaultData>({ data, columns, onSelectRow, loadingInitial, stickyColumns, stickyRows, bordered, sorting, onSortingChange, isRowSelectable, canSelectAllRows, selectedRows }: Props<T>) => JSX.Element;
 export {};

package/DataTable/DataTable.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataTable = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
 var _dataTable = require("@rmwc/data-table");
 var _reactTable = require("@tanstack/react-table");
@@ -16,10 +16,13 @@ var _Checkbox = require("../Checkbox");
 var _Skeleton = require("../Skeleton");
 require("@rmwc/data-table/data-table.css");
 var _styled = require("./styled");
-var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial) {
+var defineColumns = function defineColumns(columns, options) {
+  var canSelectAllRows = options.canSelectAllRows,
+    onSelectRow = options.onSelectRow,
+    loadingInitial = options.loadingInitial;
   return (0, _react.useMemo)(function () {
     var columnsList = Object.keys(columns).map(function (key) {
-      return (0, _objectSpread2.default)({
+      return (0, _objectSpread3.default)({
         id: key
       }, columns[key]);
     });
@@ -29,7 +32,8 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
         meta = column.meta,
         _cell = column.cell,
         _column$enableSorting = column.enableSorting,
-        enableSorting = _column$enableSorting === void 0 ? false : _column$enableSorting;
+        enableSorting = _column$enableSorting === void 0 ? false : _column$enableSorting,
+        className = column.className;
       return {
         accessorKey: id,
         header: function header() {
@@ -43,13 +47,18 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
           }
         },
         enableSorting: enableSorting,
-        meta: meta
+        meta: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, meta), {}, {
+          className: className
+        })
       };
     });
     var select = !!onSelectRow ? [{
       id: "datatable-select-column",
       header: function header(_ref) {
         var table = _ref.table;
+        if (!canSelectAllRows) {
+          return null;
+        }
         return !loadingInitial && /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
           indeterminate: table.getIsSomeRowsSelected(),
           value: table.getIsAllRowsSelected(),
@@ -76,7 +85,7 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
     }] : [];
     return [].concat(select, (0, _toConsumableArray2.default)(defaults)).map(function (column) {
       if (loadingInitial) {
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, column), {}, {
+        return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, column), {}, {
           cell: function cell() {
             return /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, null);
           }
@@ -112,36 +121,48 @@ var DataTable = function DataTable(_ref3) {
     stickyRows = _ref3.stickyRows,
     bordered = _ref3.bordered,
     sorting = _ref3.sorting,
-    onSortingChange = _ref3.onSortingChange;
-  var _React$useState = _react.default.useState({}),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    rowSelection = _React$useState2[0],
-    setRowSelection = _React$useState2[1];
+    onSortingChange = _ref3.onSortingChange,
+    isRowSelectable = _ref3.isRowSelectable,
+    _ref3$canSelectAllRow = _ref3.canSelectAllRows,
+    canSelectAllRows = _ref3$canSelectAllRow === void 0 ? true : _ref3$canSelectAllRow,
+    _ref3$selectedRows = _ref3.selectedRows,
+    selectedRows = _ref3$selectedRows === void 0 ? [] : _ref3$selectedRows;
+  var rowSelection = (0, _react.useMemo)(function () {
+    return selectedRows.reduce(function (acc, item) {
+      var recordIndex = data.findIndex(function (rec) {
+        return rec.id === item.id;
+      });
+      return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, acc), {}, (0, _defineProperty2.default)({}, recordIndex, true));
+    }, {});
+  }, [selectedRows, data]);
+  var onRowSelectionChange = function onRowSelectionChange(updater) {
+    if (typeof onSelectRow === "function") {
+      var newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+      var selection = Object.keys(newSelection).map(function (key) {
+        return data[parseInt(key)];
+      });
+      onSelectRow(selection);
+    }
+  };
   var table = (0, _reactTable.useReactTable)({
     data: defineData(data, loadingInitial),
-    columns: defineColumns(columns, onSelectRow, loadingInitial),
+    columns: defineColumns(columns, {
+      canSelectAllRows: canSelectAllRows,
+      onSelectRow: onSelectRow,
+      loadingInitial: loadingInitial
+    }),
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
     getSortedRowModel: (0, _reactTable.getSortedRowModel)(),
     state: {
       rowSelection: rowSelection,
       sorting: sorting
     },
-    enableRowSelection: function enableRowSelection(row) {
-      return row.original.selectable || false;
-    },
-    onRowSelectionChange: setRowSelection,
+    enableRowSelection: isRowSelectable,
+    onRowSelectionChange: onRowSelectionChange,
     enableSorting: !!onSortingChange,
     manualSorting: true,
     onSortingChange: onSortingChange
   });
-  (0, _react.useEffect)(function () {
-    if (onSelectRow && typeof onSelectRow === "function") {
-      var dataSelected = table.getSelectedRowModel().flatRows.map(function (row) {
-        return row.original;
-      });
-      onSelectRow(dataSelected);
-    }
-  }, [rowSelection]);
   return /*#__PURE__*/_react.default.createElement(_styled.Table, {
     stickyColumns: stickyColumns,
     stickyRows: stickyRows,
@@ -166,7 +187,7 @@ var DataTable = function DataTable(_ref3) {
   })), /*#__PURE__*/_react.default.createElement(_dataTable.DataTableBody, null, table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableRow, {
       key: row.id,
-      selected: rowSelection.hasOwnProperty(row.index)
+      selected: row.getIsSelected()
     }, row.getVisibleCells().map(function (cell) {
       return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableCell, Object.assign({
         key: cell.id

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","enableSorting","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getCanSelect","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","className","defineData","data","Array","fill","ColumnDirection","direction","DataTable","stickyColumns","stickyRows","bordered","sorting","onSortingChange","React","useState","rowSelection","setRowSelection","useReactTable","getCoreRowModel","getSortedRowModel","state","enableRowSelection","selectable","onRowSelectionChange","manualSorting","useEffect","dataSelected","getSelectedRowModel","flatRows","getHeaderGroups","headerGroup","headers","isPlaceholder","getContext","columnDef","getToggleSortingHandler","getCanSort","flexRender","getIsSorted","undefined","getRowModel","rows","hasOwnProperty","index","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { ReactElement, useEffect, useMemo } from \"react\";\n\nimport {\n    DataTableContent,\n    DataTableHead,\n    DataTableRow,\n    DataTableHeadCell,\n    DataTableBody,\n    DataTableCell,\n    DataTableCellProps\n} from \"@rmwc/data-table\";\n\nimport {\n    flexRender,\n    getCoreRowModel,\n    useReactTable,\n    ColumnDef,\n    getSortedRowModel,\n    OnChangeFn,\n    SortingState\n} from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport { ColumnDirectionIcon, ColumnDirectionWrapper, ColumnHeaderWrapper, Table } from \"./styled\";\n\ninterface Column<T> {\n    /*\n     * Column header component.\n     */\n    header: string | number | JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | JSX.Element;\n    /*\n     * Additional props to add to both header and row cells. Refer to RMWC documentation.\n     */\n    meta?: DataTableCellProps;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n}\n\nexport type Columns<T> = {\n    [P in keyof T]?: Column<T>;\n};\n\nexport type DefaultData = {\n    /*\n     * Define if a specific row can be selected.\n     */\n    selectable?: boolean;\n};\n\nexport type Sorting = SortingState;\n\nexport type OnSortingChange = OnChangeFn<Sorting>;\n\ninterface Props<T> {\n    /*\n     * Columns definition.\n     */\n    columns: Columns<T>;\n    /*\n     * Data to display into DataTable body.\n     */\n    data: T[];\n    /*\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: T[] | []) => void;\n    /*\n     * Render the skeleton state at the initial data loading.\n     */\n    loadingInitial?: boolean;\n    /*\n     * The number of columns to affix to the side of the table when scrolling.\n     */\n    stickyColumns?: number;\n    /*\n     * The number of rows to affix to the top of the table when scrolling.\n     */\n    stickyRows?: number;\n    /*\n     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /*\n     * Sorting state.\n     */\n    sorting?: Sorting;\n    /*\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnSortingChange;\n}\n\nexport interface ColumnDirectionProps {\n    direction?: \"asc\" | \"desc\";\n}\n\nconst defineColumns = <T,>(\n    columns: Props<T>[\"columns\"],\n    onSelectRow: Props<T>[\"onSelectRow\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): ColumnDef<T>[] =>\n    useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const { id, header, meta, cell, enableSorting = false } = column;\n\n            return {\n                accessorKey: id,\n                header: () => header,\n                cell: info => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(info.row.original);\n                    } else {\n                        return info.getValue();\n                    }\n                },\n                enableSorting,\n                meta\n            };\n        });\n\n        const select: ColumnDef<T>[] = !!onSelectRow\n            ? [\n                  {\n                      id: \"datatable-select-column\",\n                      header: ({ table }) =>\n                          !loadingInitial && (\n                              <Checkbox\n                                  indeterminate={table.getIsSomeRowsSelected()}\n                                  value={table.getIsAllRowsSelected()}\n                                  onChange={e => table.toggleAllPageRowsSelected(e)}\n                              />\n                          ),\n                      cell: info => {\n                          if (!info.row.getCanSelect()) {\n                              return <></>;\n                          }\n                          return (\n                              <Checkbox\n                                  indeterminate={info.row.getIsSomeSelected()}\n                                  value={info.row.getIsSelected()}\n                                  onChange={info.row.getToggleSelectedHandler()}\n                              />\n                          );\n                      },\n                      meta: {\n                          hasFormControl: true,\n                          className: \"datatable-select-column\"\n                      },\n                      enableSorting: false\n                  }\n              ]\n            : [];\n\n        return [...select, ...defaults].map(column => {\n            if (loadingInitial) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, loadingInitial]);\n\nconst defineData = <T,>(\n    data: Props<T>[\"data\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): T[] => {\n    return useMemo(() => {\n        if (loadingInitial) {\n            return Array(10).fill({});\n        }\n        return data;\n    }, [data, loadingInitial]);\n};\n\nconst ColumnDirection = ({ direction }: ColumnDirectionProps): ReactElement | null => {\n    if (direction) {\n        return (\n            <ColumnDirectionWrapper>\n                <ColumnDirectionIcon direction={direction} />\n            </ColumnDirectionWrapper>\n        );\n    }\n\n    return null;\n};\n\nexport const DataTable = <T extends Object & DefaultData>({\n    data,\n    columns,\n    onSelectRow,\n    loadingInitial,\n    stickyColumns,\n    stickyRows,\n    bordered,\n    sorting,\n    onSortingChange\n}: Props<T>) => {\n    const [rowSelection, setRowSelection] = React.useState({});\n\n    const table = useReactTable({\n        data: defineData(data, loadingInitial),\n        columns: defineColumns(columns, onSelectRow, loadingInitial),\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        state: {\n            rowSelection,\n            sorting\n        },\n        enableRowSelection: row => row.original.selectable || false,\n        onRowSelectionChange: setRowSelection,\n        enableSorting: !!onSortingChange,\n        manualSorting: true,\n        onSortingChange\n    });\n\n    useEffect(() => {\n        if (onSelectRow && typeof onSelectRow === \"function\") {\n            const dataSelected = table.getSelectedRowModel().flatRows.map(row => row.original);\n            onSelectRow(dataSelected);\n        }\n    }, [rowSelection]);\n\n    return (\n        <Table stickyColumns={stickyColumns} stickyRows={stickyRows} bordered={bordered}>\n            <DataTableContent>\n                <DataTableHead>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <DataTableRow key={headerGroup.id}>\n                            {headerGroup.headers.map(\n                                ({ id, isPlaceholder, column, getContext }) => (\n                                    <DataTableHeadCell key={id} {...column.columnDef.meta}>\n                                        {isPlaceholder ? null : (\n                                            <ColumnHeaderWrapper\n                                                onClick={column.getToggleSortingHandler()}\n                                                sortable={column.getCanSort()}\n                                            >\n                                                {flexRender(column.columnDef.header, getContext())}\n                                                <ColumnDirection\n                                                    direction={column.getIsSorted() || undefined}\n                                                />\n                                            </ColumnHeaderWrapper>\n                                        )}\n                                    </DataTableHeadCell>\n                                )\n                            )}\n                        </DataTableRow>\n                    ))}\n                </DataTableHead>\n                <DataTableBody>\n                    {table.getRowModel().rows.map(row => (\n                        <DataTableRow\n                            key={row.id}\n                            selected={rowSelection.hasOwnProperty(row.index)}\n                        >\n                            {row.getVisibleCells().map(cell => (\n                                <DataTableCell key={cell.id} {...cell.column.columnDef.meta}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </DataTableCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableBody>\n            </DataTableContent>\n        </Table>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["defineColumns","columns","options","canSelectAllRows","onSelectRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","id","defaults","column","header","meta","cell","enableSorting","className","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getCanSelect","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","defineData","data","Array","fill","ColumnDirection","direction","DataTable","stickyColumns","stickyRows","bordered","sorting","onSortingChange","isRowSelectable","selectedRows","rowSelection","reduce","acc","item","recordIndex","findIndex","rec","onRowSelectionChange","updater","newSelection","selection","parseInt","useReactTable","getCoreRowModel","getSortedRowModel","state","enableRowSelection","manualSorting","getHeaderGroups","headerGroup","headers","isPlaceholder","getContext","columnDef","getToggleSortingHandler","getCanSort","flexRender","getIsSorted","undefined","getRowModel","rows","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { ReactElement, useMemo } from \"react\";\n\nimport {\n    DataTableContent,\n    DataTableHead,\n    DataTableRow,\n    DataTableHeadCell,\n    DataTableBody,\n    DataTableCell,\n    DataTableCellProps\n} from \"@rmwc/data-table\";\n\nimport {\n    flexRender,\n    getCoreRowModel,\n    useReactTable,\n    ColumnDef,\n    getSortedRowModel,\n    OnChangeFn,\n    SortingState,\n    RowSelectionState,\n    Row\n} from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport { ColumnDirectionIcon, ColumnDirectionWrapper, ColumnHeaderWrapper, Table } from \"./styled\";\n\ninterface Column<T> {\n    /*\n     * Column header component.\n     */\n    header: string | number | JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | JSX.Element;\n    /*\n     * Additional props to add to both header and row cells. Refer to RMWC documentation.\n     */\n    meta?: DataTableCellProps;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n}\n\nexport type Columns<T> = {\n    [P in keyof T]?: Column<T>;\n};\n\nexport type DefaultData = {\n    id: string;\n    /*\n     * Define if a specific row can be selected.\n     */\n    selectable?: boolean;\n};\n\nexport type Sorting = SortingState;\n\nexport type OnSortingChange = OnChangeFn<Sorting>;\n\ninterface Props<T> {\n    /**\n     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /**\n     * Controls whether \"select all\" action is allowed.\n     */\n    canSelectAllRows?: boolean;\n    /**\n     * Columns definition.\n     */\n    columns: Columns<T>;\n    /**\n     * Data to display into DataTable body.\n     */\n    data: T[];\n    /**\n     * Callback that is called to determine if the row is selectable.\n     */\n    isRowSelectable?: (row: Row<T>) => boolean;\n    /**\n     * Render the skeleton state at the initial data loading.\n     */\n    loadingInitial?: boolean;\n    /**\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: T[]) => void;\n    /**\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnSortingChange;\n    /**\n     * Selected rows.\n     */\n    selectedRows?: T[];\n    /**\n     * Sorting state.\n     */\n    sorting?: Sorting;\n    /**\n     * The number of columns to affix to the side of the table when scrolling.\n     */\n    stickyColumns?: number;\n    /**\n     * The number of rows to affix to the top of the table when scrolling.\n     */\n    stickyRows?: number;\n}\n\nexport interface ColumnDirectionProps {\n    direction?: \"asc\" | \"desc\";\n}\n\ninterface DefineColumnsOptions<T> {\n    canSelectAllRows: boolean;\n    onSelectRow: Props<T>[\"onSelectRow\"];\n    loadingInitial: Props<T>[\"loadingInitial\"];\n}\n\nconst defineColumns = <T,>(\n    columns: Props<T>[\"columns\"],\n    options: DefineColumnsOptions<T>\n): ColumnDef<T>[] => {\n    const { canSelectAllRows, onSelectRow, loadingInitial } = options;\n\n    return useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const { id, header, meta, cell, enableSorting = false, className } = column;\n\n            return {\n                accessorKey: id,\n                header: () => header,\n                cell: info => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(info.row.original);\n                    } else {\n                        return info.getValue();\n                    }\n                },\n                enableSorting,\n                meta: {\n                    ...meta,\n                    className\n                }\n            };\n        });\n\n        const select: ColumnDef<T>[] = !!onSelectRow\n            ? [\n                  {\n                      id: \"datatable-select-column\",\n                      header: ({ table }) => {\n                          if (!canSelectAllRows) {\n                              return null;\n                          }\n\n                          return (\n                              !loadingInitial && (\n                                  <Checkbox\n                                      indeterminate={table.getIsSomeRowsSelected()}\n                                      value={table.getIsAllRowsSelected()}\n                                      onChange={e => table.toggleAllPageRowsSelected(e)}\n                                  />\n                              )\n                          );\n                      },\n                      cell: info => {\n                          if (!info.row.getCanSelect()) {\n                              return <></>;\n                          }\n                          return (\n                              <Checkbox\n                                  indeterminate={info.row.getIsSomeSelected()}\n                                  value={info.row.getIsSelected()}\n                                  onChange={info.row.getToggleSelectedHandler()}\n                              />\n                          );\n                      },\n                      meta: {\n                          hasFormControl: true,\n                          className: \"datatable-select-column\"\n                      },\n                      enableSorting: false\n                  }\n              ]\n            : [];\n\n        return [...select, ...defaults].map(column => {\n            if (loadingInitial) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, loadingInitial]);\n};\n\nconst defineData = <T,>(\n    data: Props<T>[\"data\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): T[] => {\n    return useMemo(() => {\n        if (loadingInitial) {\n            return Array(10).fill({});\n        }\n        return data;\n    }, [data, loadingInitial]);\n};\n\nconst ColumnDirection = ({ direction }: ColumnDirectionProps): ReactElement | null => {\n    if (direction) {\n        return (\n            <ColumnDirectionWrapper>\n                <ColumnDirectionIcon direction={direction} />\n            </ColumnDirectionWrapper>\n        );\n    }\n\n    return null;\n};\n\nexport const DataTable = <T extends Object & DefaultData>({\n    data,\n    columns,\n    onSelectRow,\n    loadingInitial,\n    stickyColumns,\n    stickyRows,\n    bordered,\n    sorting,\n    onSortingChange,\n    isRowSelectable,\n    canSelectAllRows = true,\n    selectedRows = []\n}: Props<T>) => {\n    const rowSelection = useMemo(() => {\n        return selectedRows.reduce<RowSelectionState>((acc, item) => {\n            const recordIndex = data.findIndex(rec => rec.id === item.id);\n            return { ...acc, [recordIndex]: true };\n        }, {});\n    }, [selectedRows, data]);\n\n    const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {\n        if (typeof onSelectRow === \"function\") {\n            const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n            onSelectRow(selection);\n        }\n    };\n\n    const table = useReactTable({\n        data: defineData(data, loadingInitial),\n        columns: defineColumns(columns, { canSelectAllRows, onSelectRow, loadingInitial }),\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        state: {\n            rowSelection,\n            sorting\n        },\n        enableRowSelection: isRowSelectable,\n        onRowSelectionChange,\n        enableSorting: !!onSortingChange,\n        manualSorting: true,\n        onSortingChange\n    });\n\n    return (\n        <Table stickyColumns={stickyColumns} stickyRows={stickyRows} bordered={bordered}>\n            <DataTableContent>\n                <DataTableHead>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <DataTableRow key={headerGroup.id}>\n                            {headerGroup.headers.map(\n                                ({ id, isPlaceholder, column, getContext }) => (\n                                    <DataTableHeadCell key={id} {...column.columnDef.meta}>\n                                        {isPlaceholder ? null : (\n                                            <ColumnHeaderWrapper\n                                                onClick={column.getToggleSortingHandler()}\n                                                sortable={column.getCanSort()}\n                                            >\n                                                {flexRender(column.columnDef.header, getContext())}\n                                                <ColumnDirection\n                                                    direction={column.getIsSorted() || undefined}\n                                                />\n                                            </ColumnHeaderWrapper>\n                                        )}\n                                    </DataTableHeadCell>\n                                )\n                            )}\n                        </DataTableRow>\n                    ))}\n                </DataTableHead>\n                <DataTableBody>\n                    {table.getRowModel().rows.map(row => (\n                        <DataTableRow key={row.id} selected={row.getIsSelected()}>\n                            {row.getVisibleCells().map(cell => (\n                                <DataTableCell key={cell.id} {...cell.column.columnDef.meta}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </DataTableCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableBody>\n            </DataTableContent>\n        </Table>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AAEA;AAUA;AAYA;AACA;AAEA;AACA;AAsGA,IAAMA,aAAa,GAAG,SAAhBA,aAAa,CACfC,OAA4B,EAC5BC,OAAgC,EACf;EACjB,IAAQC,gBAAgB,GAAkCD,OAAO,CAAzDC,gBAAgB;IAAEC,WAAW,GAAqBF,OAAO,CAAvCE,WAAW;IAAEC,cAAc,GAAKH,OAAO,CAA1BG,cAAc;EAErD,OAAO,IAAAC,cAAO,EAAC,YAAM;IACjB,IAAMC,WAAW,GAAGC,MAAM,CAACC,IAAI,CAACR,OAAO,CAAC,CAACS,GAAG,CAAC,UAAAC,GAAG;MAAA;QAC5CC,EAAE,EAAED;MAAG,GACJV,OAAO,CAACU,GAAG,CAAyB;IAAA,CACzC,CAAC;IAEH,IAAME,QAAwB,GAAGN,WAAW,CAACG,GAAG,CAAC,UAAAI,MAAM,EAAI;MACvD,IAAQF,EAAE,GAA2DE,MAAM,CAAnEF,EAAE;QAAEG,OAAM,GAAmDD,MAAM,CAA/DC,MAAM;QAAEC,IAAI,GAA6CF,MAAM,CAAvDE,IAAI;QAAEC,KAAI,GAAuCH,MAAM,CAAjDG,IAAI;QAAA,wBAAuCH,MAAM,CAA3CI,aAAa;QAAbA,aAAa,sCAAG,KAAK;QAAEC,SAAS,GAAKL,MAAM,CAApBK,SAAS;MAEhE,OAAO;QACHC,WAAW,EAAER,EAAE;QACfG,MAAM,EAAE;UAAA,OAAMA,OAAM;QAAA;QACpBE,IAAI,EAAE,cAAAI,IAAI,EAAI;UACV,IAAIJ,KAAI,IAAI,OAAOA,KAAI,KAAK,UAAU,EAAE;YACpC,OAAOA,KAAI,CAACI,IAAI,CAACC,GAAG,CAACC,QAAQ,CAAC;UAClC,CAAC,MAAM;YACH,OAAOF,IAAI,CAACG,QAAQ,EAAE;UAC1B;QACJ,CAAC;QACDN,aAAa,EAAbA,aAAa;QACbF,IAAI,8DACGA,IAAI;UACPG,SAAS,EAATA;QAAS;MAEjB,CAAC;IACL,CAAC,CAAC;IAEF,IAAMM,MAAsB,GAAG,CAAC,CAACrB,WAAW,GACtC,CACI;MACIQ,EAAE,EAAE,yBAAyB;MAC7BG,MAAM,EAAE,sBAAe;QAAA,IAAZW,KAAK,QAALA,KAAK;QACZ,IAAI,CAACvB,gBAAgB,EAAE;UACnB,OAAO,IAAI;QACf;QAEA,OACI,CAACE,cAAc,iBACX,6BAAC,kBAAQ;UACL,aAAa,EAAEqB,KAAK,CAACC,qBAAqB,EAAG;UAC7C,KAAK,EAAED,KAAK,CAACE,oBAAoB,EAAG;UACpC,QAAQ,EAAE,kBAAAC,CAAC;YAAA,OAAIH,KAAK,CAACI,yBAAyB,CAACD,CAAC,CAAC;UAAA;QAAC,EAEzD;MAET,CAAC;MACDZ,IAAI,EAAE,cAAAI,IAAI,EAAI;QACV,IAAI,CAACA,IAAI,CAACC,GAAG,CAACS,YAAY,EAAE,EAAE;UAC1B,oBAAO,2DAAK;QAChB;QACA,oBACI,6BAAC,kBAAQ;UACL,aAAa,EAAEV,IAAI,CAACC,GAAG,CAACU,iBAAiB,EAAG;UAC5C,KAAK,EAAEX,IAAI,CAACC,GAAG,CAACW,aAAa,EAAG;UAChC,QAAQ,EAAEZ,IAAI,CAACC,GAAG,CAACY,wBAAwB;QAAG,EAChD;MAEV,CAAC;MACDlB,IAAI,EAAE;QACFmB,cAAc,EAAE,IAAI;QACpBhB,SAAS,EAAE;MACf,CAAC;MACDD,aAAa,EAAE;IACnB,CAAC,CACJ,GACD,EAAE;IAER,OAAO,UAAIO,MAAM,mCAAKZ,QAAQ,GAAEH,GAAG,CAAC,UAAAI,MAAM,EAAI;MAC1C,IAAIT,cAAc,EAAE;QAChB,mEACOS,MAAM;UACTG,IAAI,EAAE;YAAA,oBAAM,6BAAC,kBAAQ,OAAG;UAAA;QAAA;MAEhC;MAEA,OAAOH,MAAM;IACjB,CAAC,CAAC;EACN,CAAC,EAAE,CAACb,OAAO,EAAEG,WAAW,EAAEC,cAAc,CAAC,CAAC;AAC9C,CAAC;AAED,IAAM+B,UAAU,GAAG,SAAbA,UAAU,CACZC,IAAsB,EACtBhC,cAA0C,EACpC;EACN,OAAO,IAAAC,cAAO,EAAC,YAAM;IACjB,IAAID,cAAc,EAAE;MAChB,OAAOiC,KAAK,CAAC,EAAE,CAAC,CAACC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC7B;IACA,OAAOF,IAAI;EACf,CAAC,EAAE,CAACA,IAAI,EAAEhC,cAAc,CAAC,CAAC;AAC9B,CAAC;AAED,IAAMmC,eAAe,GAAG,SAAlBA,eAAe,QAAiE;EAAA,IAA3DC,SAAS,SAATA,SAAS;EAChC,IAAIA,SAAS,EAAE;IACX,oBACI,6BAAC,8BAAsB,qBACnB,6BAAC,2BAAmB;MAAC,SAAS,EAAEA;IAAU,EAAG,CACxB;EAEjC;EAEA,OAAO,IAAI;AACf,CAAC;AAEM,IAAMC,SAAS,GAAG,SAAZA,SAAS,QAaN;EAAA,IAZZL,IAAI,SAAJA,IAAI;IACJpC,OAAO,SAAPA,OAAO;IACPG,WAAW,SAAXA,WAAW;IACXC,cAAc,SAAdA,cAAc;IACdsC,aAAa,SAAbA,aAAa;IACbC,UAAU,SAAVA,UAAU;IACVC,QAAQ,SAARA,QAAQ;IACRC,OAAO,SAAPA,OAAO;IACPC,eAAe,SAAfA,eAAe;IACfC,eAAe,SAAfA,eAAe;IAAA,8BACf7C,gBAAgB;IAAhBA,gBAAgB,sCAAG,IAAI;IAAA,2BACvB8C,YAAY;IAAZA,YAAY,mCAAG,EAAE;EAEjB,IAAMC,YAAY,GAAG,IAAA5C,cAAO,EAAC,YAAM;IAC/B,OAAO2C,YAAY,CAACE,MAAM,CAAoB,UAACC,GAAG,EAAEC,IAAI,EAAK;MACzD,IAAMC,WAAW,GAAGjB,IAAI,CAACkB,SAAS,CAAC,UAAAC,GAAG;QAAA,OAAIA,GAAG,CAAC5C,EAAE,KAAKyC,IAAI,CAACzC,EAAE;MAAA,EAAC;MAC7D,mEAAYwC,GAAG,yCAAGE,WAAW,EAAG,IAAI;IACxC,CAAC,EAAE,CAAC,CAAC,CAAC;EACV,CAAC,EAAE,CAACL,YAAY,EAAEZ,IAAI,CAAC,CAAC;EAExB,IAAMoB,oBAAmD,GAAG,SAAtDA,oBAAmD,CAAGC,OAAO,EAAI;IACnE,IAAI,OAAOtD,WAAW,KAAK,UAAU,EAAE;MACnC,IAAMuD,YAAY,GAAG,OAAOD,OAAO,KAAK,UAAU,GAAGA,OAAO,CAACR,YAAY,CAAC,GAAGQ,OAAO;MACpF,IAAME,SAAS,GAAGpD,MAAM,CAACC,IAAI,CAACkD,YAAY,CAAC,CAACjD,GAAG,CAAC,UAAAC,GAAG;QAAA,OAAI0B,IAAI,CAACwB,QAAQ,CAAClD,GAAG,CAAC,CAAC;MAAA,EAAC;MAC3EP,WAAW,CAACwD,SAAS,CAAC;IAC1B;EACJ,CAAC;EAED,IAAMlC,KAAK,GAAG,IAAAoC,yBAAa,EAAC;IACxBzB,IAAI,EAAED,UAAU,CAACC,IAAI,EAAEhC,cAAc,CAAC;IACtCJ,OAAO,EAAED,aAAa,CAACC,OAAO,EAAE;MAAEE,gBAAgB,EAAhBA,gBAAgB;MAAEC,WAAW,EAAXA,WAAW;MAAEC,cAAc,EAAdA;IAAe,CAAC,CAAC;IAClF0D,eAAe,EAAE,IAAAA,2BAAe,GAAE;IAClCC,iBAAiB,EAAE,IAAAA,6BAAiB,GAAE;IACtCC,KAAK,EAAE;MACHf,YAAY,EAAZA,YAAY;MACZJ,OAAO,EAAPA;IACJ,CAAC;IACDoB,kBAAkB,EAAElB,eAAe;IACnCS,oBAAoB,EAApBA,oBAAoB;IACpBvC,aAAa,EAAE,CAAC,CAAC6B,eAAe;IAChCoB,aAAa,EAAE,IAAI;IACnBpB,eAAe,EAAfA;EACJ,CAAC,CAAC;EAEF,oBACI,6BAAC,aAAK;IAAC,aAAa,EAAEJ,aAAc;IAAC,UAAU,EAAEC,UAAW;IAAC,QAAQ,EAAEC;EAAS,gBAC5E,6BAAC,2BAAgB,qBACb,6BAAC,wBAAa,QACTnB,KAAK,CAAC0C,eAAe,EAAE,CAAC1D,GAAG,CAAC,UAAA2D,WAAW;IAAA,oBACpC,6BAAC,uBAAY;MAAC,GAAG,EAAEA,WAAW,CAACzD;IAAG,GAC7ByD,WAAW,CAACC,OAAO,CAAC5D,GAAG,CACpB;MAAA,IAAGE,EAAE,SAAFA,EAAE;QAAE2D,aAAa,SAAbA,aAAa;QAAEzD,MAAM,SAANA,MAAM;QAAE0D,UAAU,SAAVA,UAAU;MAAA,oBACpC,6BAAC,4BAAiB;QAAC,GAAG,EAAE5D;MAAG,GAAKE,MAAM,CAAC2D,SAAS,CAACzD,IAAI,GAChDuD,aAAa,GAAG,IAAI,gBACjB,6BAAC,2BAAmB;QAChB,OAAO,EAAEzD,MAAM,CAAC4D,uBAAuB,EAAG;QAC1C,QAAQ,EAAE5D,MAAM,CAAC6D,UAAU;MAAG,GAE7B,IAAAC,sBAAU,EAAC9D,MAAM,CAAC2D,SAAS,CAAC1D,MAAM,EAAEyD,UAAU,EAAE,CAAC,eAClD,6BAAC,eAAe;QACZ,SAAS,EAAE1D,MAAM,CAAC+D,WAAW,EAAE,IAAIC;MAAU,EAC/C,CAET,CACe;IAAA,CACvB,CACJ,CACU;EAAA,CAClB,CAAC,CACU,eAChB,6BAAC,wBAAa,QACTpD,KAAK,CAACqD,WAAW,EAAE,CAACC,IAAI,CAACtE,GAAG,CAAC,UAAAY,GAAG;IAAA,oBAC7B,6BAAC,uBAAY;MAAC,GAAG,EAAEA,GAAG,CAACV,EAAG;MAAC,QAAQ,EAAEU,GAAG,CAACW,aAAa;IAAG,GACpDX,GAAG,CAAC2D,eAAe,EAAE,CAACvE,GAAG,CAAC,UAAAO,IAAI;MAAA,oBAC3B,6BAAC,wBAAa;QAAC,GAAG,EAAEA,IAAI,CAACL;MAAG,GAAKK,IAAI,CAACH,MAAM,CAAC2D,SAAS,CAACzD,IAAI,GACtD,IAAA4D,sBAAU,EAAC3D,IAAI,CAACH,MAAM,CAAC2D,SAAS,CAACxD,IAAI,EAAEA,IAAI,CAACuD,UAAU,EAAE,CAAC,CAC9C;IAAA,CACnB,CAAC,CACS;EAAA,CAClB,CAAC,CACU,CACD,CACf;AAEhB,CAAC;AAAC"}

package/DataTable/DataTable.stories.js

@@ -9,16 +9,19 @@ var _DataTable = require("./DataTable");
 var story = (0, _react2.storiesOf)("Components/DataTable", module);
 story.add("usage", function () {
   var data = [{
+    id: "1",
     name: "Page 1",
     createdBy: "John Doe",
     lastModified: "3 days ago",
     status: "Draft"
   }, {
+    id: "2",
     name: "Page 2",
     createdBy: "John Doe",
     lastModified: "1 day ago",
     status: "Published"
   }, {
+    id: "3",
     name: "Page 3",
     createdBy: "John Doe",
     lastModified: "1 hour ago",

package/DataTable/DataTable.stories.js.map

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

package/DataTable/styled.js

@@ -13,13 +13,13 @@ var Table = /*#__PURE__*/(0, _styled.default)(_dataTable.DataTable, {
   target: "er5nqo40"
 })("width:100%;border-width:", function (props) {
   return props.bordered ? "1px" : "0px";
-}, ";th,td{vertical-align:middle;}.datatable-select-column{width:56px;}");
+}, ";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" : "cursort";
+  return props.sortable ? "pointer" : "cursor";
 }, ";display:flex;align-items:center;justify-content:start;");
 exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
 var ColumnDirectionWrapper = /*#__PURE__*/(0, _styled.default)("span", {

package/DataTable/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["Table","styled","RmwcDataTable","props","bordered","ColumnHeaderWrapper","sortable","ColumnDirectionWrapper","ColumnDirectionIcon","ArrowDown","direction"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { ReactComponent as ArrowDown } from \"@material-design-icons/svg/outlined/arrow_downward.svg\";\nimport { DataTable as RmwcDataTable, DataTableProps } from \"@rmwc/data-table\";\nimport { ColumnDirectionProps } from \"~/DataTable/DataTable\";\n\ninterface TableProps extends DataTableProps {\n    bordered?: boolean;\n}\n\nexport const Table = styled(RmwcDataTable)<TableProps>`\n    width: 100%;\n    border-width: ${props => (props.bordered ? \"1px\" : \"0px\")};\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n\n    .datatable-select-column {\n        width: 56px;\n    }\n`;\n\ninterface ColumnHeaderWrapperProps {\n    sortable: boolean;\n}\n\nexport const ColumnHeaderWrapper = styled(\"div\")<ColumnHeaderWrapperProps>`\n    cursor: ${props => (props.sortable ? \"pointer\" : \"cursort\")};\n    display: flex;\n    align-items: center;\n    justify-content: start;\n`;\n\nexport const ColumnDirectionWrapper = styled(\"span\")`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 16px;\n    width: 16px;\n    margin: 0 0 0 4px;\n`;\n\nexport const ColumnDirectionIcon = styled(ArrowDown)<ColumnDirectionProps>`\n    transform: ${props => (props.direction === \"asc\" ? \"rotate(180deg)\" : \"rotate(0deg)\")};\n`;\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAOO,IAAMA,KAAK,oBAAGC,eAAM,EAACC,oBAAa;EAAA;EAAA;AAAA,+BAErB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,QAAQ,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,wEAU5D;AAAC;AAMK,IAAMC,mBAAmB,oBAAGJ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,cACjC,UAAAE,KAAK;EAAA,OAAKA,KAAK,CAACG,QAAQ,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,4DAI9D;AAAC;AAEK,IAAMC,sBAAsB,oBAAGN,eAAM,EAAC,MAAM;EAAA;EAAA;AAAA,4GAOlD;AAAC;AAEK,IAAMO,mBAAmB,oBAAGP,eAAM,EAACQ,8BAAS;EAAA;EAAA;AAAA,iBAClC,UAAAN,KAAK;EAAA,OAAKA,KAAK,CAACO,SAAS,KAAK,KAAK,GAAG,gBAAgB,GAAG,cAAc;AAAA,CAAC,MACxF;AAAC"}
+{"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/Input/Input.d.ts

@@ -16,5 +16,6 @@ export declare type InputProps<TValue = any> = FormComponentProps<TValue> & Text
     onEnter?: () => any;
     className?: string;
     "data-testid"?: string;
+    size?: "small" | "medium" | "large";
 };
 export declare const Input: React.FC<InputProps>;

package/Input/Input.js

@@ -13,15 +13,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _textfield = require("@rmwc/textfield");
 var _FormElementMessage = require("../FormElementMessage");
 var _pick = _interopRequireDefault(require("lodash/pick"));
-var _emotion = require("emotion");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "rows", "validation", "icon", "trailingIcon", "onEnter"];
-/**
- * fix label position when autofilled
- * @type {string}
- */
-var webinyInputStyles = /*#__PURE__*/(0, _emotion.css)(".mdc-text-field__input:-webkit-autofill + .mdc-floating-label{transform:translateY(-106%) scale(0.75);}label:webinyInputStyles;");
-
+var _styled = require("./styled");
+var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "rows", "validation", "icon", "trailingIcon", "onEnter", "size"];
 /**
  * Use Input component to store short string values, like first name, last name, e-mail etc.
  * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
@@ -78,6 +72,7 @@ var Input = function Input(props) {
     icon = props.icon,
     trailingIcon = props.trailingIcon,
     onEnter = props.onEnter,
+    size = props.size,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var inputValue = value;
   if (value === null || typeof value === "undefined") {
@@ -93,7 +88,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,
@@ -106,7 +101,7 @@ var Input = function Input(props) {
     placeholder: !label && placeholder || undefined,
     trailingIcon: trailingIcon,
     rows: rows,
-    className: (0, _classnames.default)("webiny-ui-input", webinyInputStyles),
+    className: (0, _classnames.default)("webiny-ui-input", _styled.webinyInputStyles, props.size ? "webiny-ui-input--size-".concat(size) : null),
     "data-testid": props["data-testid"]
   })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
     error: true

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":"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"}
+{"version":3,"names":["rmwcProps","Input","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","size","rest","inputValue","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","pick","Boolean","undefined","classNames","webinyInputStyles","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 classNames from \"classnames\";\nimport { webinyInputStyles } from \"./styled\";\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        // Size - small, medium or large\n        size?: \"small\" | \"medium\" | \"large\";\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        size,\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(\n                    \"webiny-ui-input\",\n                    webinyInputStyles,\n                    props.size ? `webiny-ui-input--size-${size}` : null\n                )}\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/Input/styled.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @type {string}
+ */
+export declare const webinyInputStyles: string;

package/Input/styled.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webinyInputStyles = void 0;
+var _emotion = require("emotion");
+/**
+ * @type {string}
+ */
+var webinyInputStyles = /*#__PURE__*/(0, _emotion.css)(".mdc-text-field__input:-webkit-autofill + .mdc-floating-label{transform:translateY(-106%) scale(0.75);}&.webiny-ui-input--size-medium{&.mdc-text-field{height:40px;font-size:0.85em;}}&.webiny-ui-input--size-small{&.mdc-text-field{height:30px;font-size:0.75em;}}label:webinyInputStyles;");
+exports.webinyInputStyles = webinyInputStyles;

package/Input/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["webinyInputStyles","css"],"sources":["styled.tsx"],"sourcesContent":["import { css } from \"emotion\";\n\n/**\n * @type {string}\n */\nexport const webinyInputStyles = css`\n    //  fix label position when autofilled\n    .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n        transform: translateY(-106%) scale(0.75);\n    }\n\n    // medium input styles\n    &.webiny-ui-input--size-medium {\n        &.mdc-text-field {\n            height: 40px;\n            font-size: 0.85em;\n        }\n    }\n\n    // small input styles\n    &.webiny-ui-input--size-small {\n        &.mdc-text-field {\n            height: 30px;\n            font-size: 0.75em;\n        }\n    }\n`;\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AACO,IAAMA,iBAAiB,oBAAGC,YAAG,iSAqBnC;AAAC"}

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>(({ 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: \"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\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;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,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,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;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/RichTextEditor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["classes","wrapper","css","backgroundColor","padding","label","marginBottom","disable","opacity","pointerEvents","RichTextEditor","props","elementId","useRef","shortid","generate","editorRef","useEffect","value","context","onReady","nativeProps","initialData","blocks","current","EditorJS","holder","logLevel","data","onChange","save","editor","tools","Object","keys","reduce","name","tool","config","destroy","description","disabled","validation","className","classNames","isValid","message"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\nimport shortid from \"shortid\";\nimport EditorJS from \"@editorjs/editorjs\";\nimport {\n    LogLevels,\n    OutputBlockData,\n    OutputData,\n    SanitizerConfig,\n    ToolSettings\n} from \"@editorjs/editorjs\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormComponentProps } from \"@webiny/form\";\n\nconst classes = {\n    wrapper: css({\n        backgroundColor: \"var(--mdc-theme-background)\",\n        padding: \"20px 16px 6px\"\n    }),\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\ninterface EditorJSType {\n    destroy?: () => void;\n    save: () => Promise<any>;\n}\n\nexport interface OnReadyParams {\n    editor: any;\n    initialData: OutputData;\n}\n\nexport type RichTextEditorValue = OutputBlockData[];\n\nexport interface RichTextEditorProps {\n    autofocus?: boolean;\n    context?: { [key: string]: any };\n    logLevel?: string;\n    minHeight?: number;\n    onChange?: (data: RichTextEditorValue) => void;\n    onReady?: (params: OnReadyParams) => void;\n    placeholder?: string;\n    readOnly?: boolean;\n    sanitizer?: SanitizerConfig;\n    tools?: {\n        [toolName: string]: ToolSettings;\n    };\n    value?: RichTextEditorValue;\n    label?: string;\n    description?: string;\n    disabled?: boolean;\n    validation?: FormComponentProps[\"validation\"];\n    className?: string;\n}\n\nexport const RichTextEditor: React.FC<RichTextEditorProps> = props => {\n    const elementId = useRef(\"rte-\" + shortid.generate());\n    const editorRef = useRef<EditorJSType>();\n\n    useEffect(() => {\n        const { value, context, onReady, ...nativeProps } = props;\n        const initialData = value ? { blocks: value } : { blocks: [] };\n\n        editorRef.current = new EditorJS({\n            ...nativeProps,\n            holder: elementId.current,\n            logLevel: \"ERROR\" as LogLevels.ERROR,\n            data: initialData,\n            onChange: async () => {\n                if (!editorRef.current) {\n                    return;\n                }\n                const { blocks: data } = await editorRef.current.save();\n                if (!props.onChange) {\n                    return;\n                }\n                props.onChange(data);\n            },\n            onReady() {\n                if (typeof onReady !== \"function\") {\n                    return;\n                }\n                onReady({ editor: editorRef.current, initialData });\n            },\n            tools: Object.keys(props.tools || {}).reduce((tools, name) => {\n                const tool = props.tools ? props.tools[name] : null;\n                if (!tool) {\n                    return tools;\n                }\n                tools[name] = tool;\n                if (!tool.config) {\n                    tool.config = { context };\n                } else if (typeof tool.config === \"function\") {\n                    tool.config = tool.config();\n                } else {\n                    tool.config = { ...tool.config, context };\n                }\n                return tools;\n            }, {} as Record<string, ToolSettings>)\n        });\n\n        return () => {\n            if (!editorRef.current || typeof editorRef.current.destroy !== \"function\") {\n                return;\n            }\n\n            editorRef.current.destroy();\n        };\n    }, []);\n\n    const { label, description, disabled, validation, className } = props;\n\n    return (\n        <Fragment>\n            <div\n                className={classNames(classes.wrapper, className, { [classes.disable]: disabled })}\n            >\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n                <div id={elementId.current} />\n            </div>\n            {validation && validation.isValid === false && (\n                <FormElementMessage error>{validation.message}</FormElementMessage>\n            )}\n            {validation && validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </Fragment>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["classes","wrapper","css","backgroundColor","padding","label","marginBottom","disable","opacity","pointerEvents","RichTextEditor","props","elementId","useRef","shortid","generate","editorRef","useEffect","value","context","onReady","nativeProps","initialData","blocks","current","EditorJS","holder","logLevel","data","onChange","save","editor","tools","Object","keys","reduce","name","tool","config","destroy","description","disabled","validation","className","classNames","isValid","message"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\nimport shortid from \"shortid\";\nimport EditorJS from \"@editorjs/editorjs\";\nimport {\n    LogLevels,\n    OutputBlockData,\n    OutputData,\n    SanitizerConfig,\n    ToolSettings\n} from \"@editorjs/editorjs\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormComponentProps } from \"@webiny/form\";\n\nconst classes = {\n    wrapper: css({\n        backgroundColor: \"var(--mdc-theme-background)\",\n        padding: \"20px 16px 6px\"\n    }),\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\ninterface EditorJSType {\n    destroy?: () => void;\n    save: () => Promise<any>;\n}\n\nexport interface OnReadyParams {\n    editor: any;\n    initialData: OutputData;\n}\n\nexport type RichTextEditorValue = OutputBlockData[];\n\nexport interface RichTextEditorProps {\n    autofocus?: boolean;\n    context?: { [key: string]: any };\n    logLevel?: string;\n    minHeight?: number;\n    onChange?: (data: RichTextEditorValue) => void;\n    onReady?: (params: OnReadyParams) => void;\n    placeholder?: string;\n    readOnly?: boolean;\n    sanitizer?: SanitizerConfig;\n    tools?: {\n        [toolName: string]: ToolSettings;\n    };\n    value?: RichTextEditorValue;\n    label?: string;\n    description?: string;\n    disabled?: boolean;\n    validation?: FormComponentProps[\"validation\"];\n    className?: string;\n}\n\nexport const RichTextEditor: React.FC<RichTextEditorProps> = props => {\n    const elementId = useRef(\"rte-\" + shortid.generate());\n    const editorRef = useRef<EditorJSType>();\n\n    useEffect(() => {\n        const { value, context, onReady, ...nativeProps } = props;\n\n        const initialData = value ? { blocks: value } : { blocks: [] };\n\n        editorRef.current = new EditorJS({\n            ...nativeProps,\n            holder: elementId.current,\n            logLevel: \"ERROR\" as LogLevels.ERROR,\n            data: initialData,\n            onChange: async () => {\n                if (!editorRef.current) {\n                    return;\n                }\n                const { blocks: data } = await editorRef.current.save();\n                if (!props.onChange) {\n                    return;\n                }\n                props.onChange(data);\n            },\n            onReady() {\n                if (typeof onReady !== \"function\") {\n                    return;\n                }\n                onReady({ editor: editorRef.current, initialData });\n            },\n            tools: Object.keys(props.tools || {}).reduce((tools, name) => {\n                const tool = props.tools ? props.tools[name] : null;\n                if (!tool) {\n                    return tools;\n                }\n                tools[name] = tool;\n                if (!tool.config) {\n                    tool.config = { context };\n                } else if (typeof tool.config === \"function\") {\n                    tool.config = tool.config();\n                } else {\n                    tool.config = { ...tool.config, context };\n                }\n                return tools;\n            }, {} as Record<string, ToolSettings>)\n        });\n\n        return () => {\n            if (!editorRef.current || typeof editorRef.current.destroy !== \"function\") {\n                return;\n            }\n\n            editorRef.current.destroy();\n        };\n    }, []);\n\n    const { label, description, disabled, validation, className } = props;\n\n    return (\n        <Fragment>\n            <div\n                className={classNames(classes.wrapper, className, { [classes.disable]: disabled })}\n            >\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n                <div id={elementId.current} />\n            </div>\n            {validation && validation.isValid === false && (\n                <FormElementMessage error>{validation.message}</FormElementMessage>\n            )}\n            {validation && validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </Fragment>\n    );\n};\n"],"mappings":"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"}

package/Select/Select.d.ts

@@ -10,6 +10,7 @@ export declare type SelectProps = FormComponentProps & RmwcSelectProps & {
     children?: Array<React.ReactElement<"option"> | React.ReactElement<"optgroup">>;
     rootProps?: Object;
     className?: string;
+    size?: "small" | "medium" | "large";
 };
 /**
  * We check for null and undefined in the value because React is complaining about those values.

package/Select/Select.js

@@ -11,24 +11,9 @@ var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime
 var _react = _interopRequireDefault(require("react"));
 var _select = require("@rmwc/select");
 var _FormElementMessage = require("../FormElementMessage");
-var _emotion = require("emotion");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _styled = require("./styled");
 var _excluded = ["value", "description", "validation"];
-var webinySelect = /*#__PURE__*/(0, _emotion.css)("display:grid;background-color:transparent;border-color:transparent;color:var(--webiny-theme-color-primary);.rmwc-select__native-control{opacity:0;position:absolute;top:0;bottom:0;left:0;right:0;}label:webinySelect;");
-var noLabel = /*#__PURE__*/(0, _emotion.css)({
-  "&.mdc-select": {
-    height: 35,
-    ".mdc-select__native-control": {
-      paddingTop: 0
-    },
-    "&.mdc-select--box": {
-      ".mdc-select__native-control": {
-        height: 35,
-        paddingTop: 5
-      }
-    }
-  }
-}, "label:noLabel;");
 /**
  * TODO verify that this is correct method get all options.
  */
@@ -102,7 +87,7 @@ var Select = function Select(props) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_select.Select, Object.assign({}, getRmwcProps(other), {
     options: options,
     value: value,
-    className: (0, _classnames.default)("webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded", webinySelect, props.className, (0, _defineProperty2.default)({}, noLabel, !props.label)),
+    className: (0, _classnames.default)("webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded", _styled.webinySelect, props.size ? "webiny-ui-select--size-".concat(props.size) : null, props.className, (0, _defineProperty2.default)({}, _styled.noLabel, !props.label)),
     onChange: function onChange(e) {
       props.onChange && props.onChange(e.target.value);
     }

package/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"names":["webinySelect","css","noLabel","height","paddingTop","getOptions","initialOptions","Array","isArray","options","option","push","label","value","Object","keys","map","key","skipProps","getRmwcProps","props","newProps","filter","name","includes","forEach","Select","initialValue","description","validation","other","undefined","validationIsValid","isValid","validationMessage","message","classNames","className","e","onChange","target"],"sources":["Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    FormattedOption,\n    Select as RmwcSelect,\n    SelectProps as RmwcSelectProps\n} from \"@rmwc/select\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type SelectProps = FormComponentProps &\n    RmwcSelectProps & {\n        // Component label.\n        label?: string;\n\n        // Is checkbox disabled?\n        disabled?: boolean;\n\n        // Description beneath the select.\n        description?: string;\n\n        // Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n        placeholder?: string;\n\n        // Makes the Select have a visual box.\n        box?: string;\n\n        // One or more <option> or <optgroup> elements.\n        children?: Array<React.ReactElement<\"option\"> | React.ReactElement<\"optgroup\">>;\n\n        // IconProps for the root element. By default, additional props spread to the native select element.\n        rootProps?: Object;\n\n        // A className for the root element.\n        className?: string;\n    };\n\nconst webinySelect = css`\n    display: grid;\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--webiny-theme-color-primary);\n\n    .rmwc-select__native-control {\n        opacity: 0;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n    }\n`;\n\nconst noLabel = css({\n    \"&.mdc-select\": {\n        height: 35,\n        \".mdc-select__native-control\": {\n            paddingTop: 0\n        },\n        \"&.mdc-select--box\": {\n            \".mdc-select__native-control\": {\n                height: 35,\n                paddingTop: 5\n            }\n        }\n    }\n});\n/**\n * TODO verify that this is correct method get all options.\n */\nconst getOptions = (initialOptions: SelectProps[\"options\"]): FormattedOption[] => {\n    if (!initialOptions) {\n        return [];\n    } else if (Array.isArray(initialOptions)) {\n        const options: FormattedOption[] = [];\n        for (const option of initialOptions) {\n            if (typeof option === \"string\") {\n                options.push({\n                    label: option,\n                    value: option\n                });\n                continue;\n            }\n            options.push({\n                label: option.label,\n                value: option.value,\n                options: option.options\n            });\n        }\n        return options;\n    }\n    return Object.keys(initialOptions).map(key => {\n        return {\n            label: initialOptions[key],\n            value: key\n        };\n    });\n};\n\n/**\n * Select component lets users choose a value from given set of options.\n */\nconst skipProps = [\"validate\", \"form\"];\n\nconst getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps => {\n    const newProps: FormComponentProps & RmwcSelectProps = {};\n    Object.keys(props)\n        .filter(name => !skipProps.includes(name))\n        // @ts-ignore\n        .forEach((name: any) => (newProps[name] = props[name]));\n\n    return newProps;\n};\n/**\n * We check for null and undefined in the value because React is complaining about those values.\n * Error says to use the empty string in null/undefined case.\n */\nexport const Select: React.FC<SelectProps> = props => {\n    const { value: initialValue, description, validation, ...other } = props;\n\n    const value = initialValue === null || initialValue === undefined ? \"\" : initialValue;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const options = getOptions(other.options);\n\n    return (\n        <React.Fragment>\n            <RmwcSelect\n                {...getRmwcProps(other)}\n                options={options}\n                value={value}\n                className={classNames(\n                    \"webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded\",\n                    webinySelect,\n                    props.className,\n                    {\n                        [noLabel]: !props.label\n                    }\n                )}\n                onChange={e => {\n                    props.onChange && props.onChange((e.target as any).value);\n                }}\n            />\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\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"names":["getOptions","initialOptions","Array","isArray","options","option","push","label","value","Object","keys","map","key","skipProps","getRmwcProps","props","newProps","filter","name","includes","forEach","Select","initialValue","description","validation","other","undefined","validationIsValid","isValid","validationMessage","message","classNames","webinySelect","size","className","noLabel","e","onChange","target"],"sources":["Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    FormattedOption,\n    Select as RmwcSelect,\n    SelectProps as RmwcSelectProps\n} from \"@rmwc/select\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { FormComponentProps } from \"~/types\";\nimport classNames from \"classnames\";\nimport { webinySelect, noLabel } from \"./styled\";\n\nexport type SelectProps = FormComponentProps &\n    RmwcSelectProps & {\n        // Component label.\n        label?: string;\n\n        // Is checkbox disabled?\n        disabled?: boolean;\n\n        // Description beneath the select.\n        description?: string;\n\n        // Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n        placeholder?: string;\n\n        // Makes the Select have a visual box.\n        box?: string;\n\n        // One or more <option> or <optgroup> elements.\n        children?: Array<React.ReactElement<\"option\"> | React.ReactElement<\"optgroup\">>;\n\n        // IconProps for the root element. By default, additional props spread to the native select element.\n        rootProps?: Object;\n\n        // A className for the root element.\n        className?: string;\n\n        // Size - small, medium or large\n        size?: \"small\" | \"medium\" | \"large\";\n    };\n\n/**\n * TODO verify that this is correct method get all options.\n */\nconst getOptions = (initialOptions: SelectProps[\"options\"]): FormattedOption[] => {\n    if (!initialOptions) {\n        return [];\n    } else if (Array.isArray(initialOptions)) {\n        const options: FormattedOption[] = [];\n        for (const option of initialOptions) {\n            if (typeof option === \"string\") {\n                options.push({\n                    label: option,\n                    value: option\n                });\n                continue;\n            }\n            options.push({\n                label: option.label,\n                value: option.value,\n                options: option.options\n            });\n        }\n        return options;\n    }\n    return Object.keys(initialOptions).map(key => {\n        return {\n            label: initialOptions[key],\n            value: key\n        };\n    });\n};\n\n/**\n * Select component lets users choose a value from given set of options.\n */\nconst skipProps = [\"validate\", \"form\"];\n\nconst getRmwcProps = (props: SelectProps): FormComponentProps & RmwcSelectProps => {\n    const newProps: FormComponentProps & RmwcSelectProps = {};\n    Object.keys(props)\n        .filter(name => !skipProps.includes(name))\n        // @ts-ignore\n        .forEach((name: any) => (newProps[name] = props[name]));\n\n    return newProps;\n};\n/**\n * We check for null and undefined in the value because React is complaining about those values.\n * Error says to use the empty string in null/undefined case.\n */\nexport const Select: React.FC<SelectProps> = props => {\n    const { value: initialValue, description, validation, ...other } = props;\n\n    const value = initialValue === null || initialValue === undefined ? \"\" : initialValue;\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const options = getOptions(other.options);\n\n    return (\n        <React.Fragment>\n            <RmwcSelect\n                {...getRmwcProps(other)}\n                options={options}\n                value={value}\n                className={classNames(\n                    \"webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded\",\n                    webinySelect,\n                    props.size ? `webiny-ui-select--size-${props.size}` : null,\n                    props.className,\n                    {\n                        [noLabel]: !props.label\n                    }\n                )}\n                onChange={e => {\n                    props.onChange && props.onChange((e.target as any).value);\n                }}\n            />\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\nexport default Select;\n"],"mappings":"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"}

package/Select/styled.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @type {string}
+ */
+export declare const webinySelect: string;
+/**
+ * @type {string}
+ */
+export declare const noLabel: string;

package/Select/styled.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webinySelect = exports.noLabel = void 0;
+var _emotion = require("emotion");
+/**
+ * @type {string}
+ */
+var webinySelect = /*#__PURE__*/(0, _emotion.css)("display:grid;background-color:transparent;border-color:transparent;color:var(--webiny-theme-color-primary);.rmwc-select__native-control{opacity:0;position:absolute;top:0;bottom:0;left:0;right:0;}&.webiny-ui-select--size-medium{&.mdc-select,.mdc-select__anchor{height:40px;.mdc-select__native-control{paddingtop:0;}.mdc-select__dropdown-icon{bottom:8px;}.mdc-select__selected-text{padding-top:6px !important;padding-left:10px;font-size:0.95rem;height:40px;}&.mdc-select--box{.mdc-select__native-control{height:40px;paddingtop:5px;}}}}&.webiny-ui-select--size-small{&.mdc-select,.mdc-select__anchor{height:30px;.mdc-select__native-control{paddingtop:0;}.mdc-select__dropdown-icon{bottom:3px;}.mdc-select__selected-text{padding-top:1px !important;padding-left:10px;font-size:0.9rem;height:30px;}&.mdc-select--box{.mdc-select__native-control{height:30px;paddingtop:5px;}}}}label:webinySelect;");
+
+/**
+ * @type {string}
+ */
+exports.webinySelect = webinySelect;
+var noLabel = /*#__PURE__*/(0, _emotion.css)("&.mdc-select{height:35px;.mdc-select__native-control{paddingTop:0;}&.mdc-select--box{.mdc-select__native-control{height:35px;paddingTop:5px;}}label:noLabel;");
+exports.noLabel = noLabel;

package/Select/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["webinySelect","css","noLabel"],"sources":["styled.tsx"],"sourcesContent":["import { css } from \"emotion\";\n\n/**\n * @type {string}\n */\nexport const webinySelect = css`\n    display: grid;\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--webiny-theme-color-primary);\n\n    .rmwc-select__native-control {\n        opacity: 0;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n    }\n\n    &.webiny-ui-select--size-medium {\n        &.mdc-select,\n        .mdc-select__anchor {\n            height: 40px;\n            .mdc-select__native-control {\n                paddingtop: 0;\n            }\n            .mdc-select__dropdown-icon {\n                bottom: 8px;\n            }\n            .mdc-select__selected-text {\n                padding-top: 6px !important;\n                padding-left: 10px;\n                font-size: 0.95rem;\n                height: 40px;\n            }\n\n            &.mdc-select--box {\n                .mdc-select__native-control {\n                    height: 40px;\n                    paddingtop: 5px;\n                }\n            }\n        }\n    }\n\n    &.webiny-ui-select--size-small {\n        &.mdc-select,\n        .mdc-select__anchor {\n            height: 30px;\n            .mdc-select__native-control {\n                paddingtop: 0;\n            }\n            .mdc-select__dropdown-icon {\n                bottom: 3px;\n            }\n            .mdc-select__selected-text {\n                padding-top: 1px !important;\n                padding-left: 10px;\n                font-size: 0.9rem;\n                height: 30px;\n            }\n            &.mdc-select--box {\n                .mdc-select__native-control {\n                    height: 30px;\n                    paddingtop: 5px;\n                }\n            }\n        }\n    }\n`;\n\n/**\n * @type {string}\n */\nexport const noLabel = css`\n    &.mdc-select {\n        height: 35px;\n        .mdc-select__native-control {\n            paddingTop: 0;\n        }\n    &.mdc-select--box {\n        .mdc-select__native-control {\n            height: 35px;\n            paddingTop: 5px;\n        }\n    }\n`;\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AACO,IAAMA,YAAY,oBAAGC,YAAG,63BAiE9B;;AAED;AACA;AACA;AAFA;AAGO,IAAMC,OAAO,oBAAGD,YAAG,iKAYzB;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.c2780f51fe",
+	"version": "0.0.0-unstable.c7dec08bb0",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -16,7 +16,7 @@
 	"dependencies": {
 		"@babel/runtime": "7.20.13",
 		"@editorjs/editorjs": "2.26.5",
-		"@emotion/react": "11.10.6",
+		"@emotion/react": "11.10.8",
 		"@emotion/styled": "11.10.6",
 		"@material-design-icons/svg": "0.14.2",
 		"@rmwc/button": "7.0.3",
@@ -67,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.c2780f51fe",
-		"@webiny/form": "^0.0.0-unstable.c2780f51fe",
-		"@webiny/project-utils": "^0.0.0-unstable.c2780f51fe",
-		"@webiny/storybook-utils": "^0.0.0-unstable.c2780f51fe",
-		"@webiny/validation": "^0.0.0-unstable.c2780f51fe",
-		"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.c7dec08bb0",
+		"@webiny/form": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/project-utils": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/storybook-utils": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/validation": "0.0.0-unstable.c7dec08bb0",
+		"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",
@@ -133,5 +133,5 @@
 			]
 		}
 	},
-	"gitHead": "c2780f51fe628e1ef0f6b55c2bce9b74d3470d79"
+	"gitHead": "c7dec08bb095467cca6a61381bd399d66b7bb147"
 }