@webiny/ui 5.29.0 → 5.30.0

package/Select/Select.js

@@ -24,6 +24,7 @@ var _emotion = require("emotion");
 var _classnames = _interopRequireDefault(require("classnames"));
 
 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,
@@ -123,7 +124,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", props.className, (0, _defineProperty2.default)({}, noLabel, !props.label)),
+    className: (0, _classnames.default)("webiny-ui-select mdc-ripple-surface mdc-ripple-upgraded", webinySelect, props.className, (0, _defineProperty2.default)({}, noLabel, !props.label)),
     onChange: function onChange(e) {
       props.onChange && props.onChange(e.target.value);
     }

package/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"names":["noLabel","css","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 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(\"webiny-ui-select\", props.className, {\n                    [noLabel]: !props.label\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":["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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"}

package/Tabs/Tab.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,18 +9,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tab = void 0;
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _tabs = require("@rmwc/tabs");
+var _shortid = _interopRequireDefault(require("shortid"));
 
-var _excluded = ["children"];
+var _Tabs = require("./Tabs");
 
-var Tab = function Tab(props) {
-  var children = props.children,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_tabs.Tab, rest, children);
-};
+var Tab = /*#__PURE__*/_react.default.memo(function (props) {
+  var tabsContext = (0, _react.useContext)(_Tabs.TabsContext);
+  var idRef = (0, _react.useRef)(_shortid.default.generate());
+  (0, _react.useEffect)(function () {
+    tabsContext.addTab((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      id: idRef.current
+    }));
+  }, [props]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      return tabsContext.removeTab(idRef.current);
+    };
+  }, []);
+  return null;
+});
 
-exports.Tab = Tab;
+exports.Tab = Tab;
+Tab.displayName = "Tab";

package/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["Tab","props","children","rest"],"sources":["Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Tab as RmwcTab, TabProps as RmwcTabProps } from \"@rmwc/tabs\";\n\nexport type TabProps = RmwcTabProps & {\n    tag?: string;\n    /**\n     * Is tab disabled?\n     */\n    disabled?: boolean;\n    /**\n     * Style object\n     */\n    style?: React.CSSProperties;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n};\n\nexport const Tab: React.FC<TabProps> = props => {\n    const { children, ...rest } = props;\n    return <RmwcTab {...rest}>{children}</RmwcTab>;\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAkBO,IAAMA,GAAuB,GAAG,SAA1BA,GAA0B,CAAAC,KAAK,EAAI;EAC5C,IAAQC,QAAR,GAA8BD,KAA9B,CAAQC,QAAR;EAAA,IAAqBC,IAArB,0CAA8BF,KAA9B;EACA,oBAAO,6BAAC,SAAD,EAAaE,IAAb,EAAoBD,QAApB,CAAP;AACH,CAHM"}
+{"version":3,"names":["Tab","React","memo","props","tabsContext","useContext","TabsContext","idRef","useRef","shortid","generate","useEffect","addTab","id","current","removeTab","displayName"],"sources":["Tab.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef } from \"react\";\nimport { TabProps as RmwcTabProps } from \"@rmwc/tabs\";\nimport shortid from \"shortid\";\nimport { TabsContext } from \"./Tabs\";\n\nexport type TabProps = RmwcTabProps & {\n    tag?: string;\n    /**\n     * Is tab disabled?\n     */\n    disabled?: boolean;\n    /**\n     * Style object\n     */\n    style?: React.CSSProperties;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n};\n\nexport const Tab: React.FC<TabProps> = React.memo(props => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(shortid.generate());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n});\n\nTab.displayName = \"Tab\";\n"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AAkBO,IAAMA,GAAuB,gBAAGC,cAAA,CAAMC,IAAN,CAAW,UAAAC,KAAK,EAAI;EACvD,IAAMC,WAAW,GAAG,IAAAC,iBAAA,EAAWC,iBAAX,CAApB;EACA,IAAMC,KAAK,GAAG,IAAAC,aAAA,EAAOC,gBAAA,CAAQC,QAAR,EAAP,CAAd;EAEA,IAAAC,gBAAA,EAAU,YAAM;IACZP,WAAW,CAAEQ,MAAb,6DAAyBT,KAAzB;MAAgCU,EAAE,EAAEN,KAAK,CAACO;IAA1C;EACH,CAFD,EAEG,CAACX,KAAD,CAFH;EAIA,IAAAQ,gBAAA,EAAU,YAAM;IACZ,OAAO,YAAM;MACT,OAAOP,WAAW,CAAEW,SAAb,CAAuBR,KAAK,CAACO,OAA7B,CAAP;IACH,CAFD;EAGH,CAJD,EAIG,EAJH;EAMA,OAAO,IAAP;AACH,CAfsC,CAAhC;;;AAiBPd,GAAG,CAACgB,WAAJ,GAAkB,KAAlB"}

package/Tabs/Tabs.d.ts

@@ -1,16 +1,6 @@
-import React, { ReactNode } from "react";
-export interface TabsRenderProps {
-    switchTab(tabIndex: number): void;
-}
-export interface TabsPropsChildrenCallable {
-    (props: TabsRenderProps): ReactNode;
-}
-declare type TabsPropsChildren = TabsPropsChildrenCallable | ReactNode;
-export interface TabsProps {
-    /**
-     * A collection of tabs that needs to be rendered.
-     */
-    children: TabsPropsChildren;
+import React, { PropsWithChildren } from "react";
+import { TabProps } from "./Tab";
+export declare type TabsProps = PropsWithChildren<{
     /**
      * Append a class name.
      */
@@ -31,17 +21,43 @@ export interface TabsProps {
      * Tab ID for the testing.
      */
     "data-testid"?: string;
+}>;
+interface TabItem extends TabProps {
+    id: string;
+}
+interface TabsContext {
+    addTab(props: TabItem): void;
+    removeTab(id: string): void;
 }
-interface TabsState {
-    activeTabIndex: number;
+export declare const TabsContext: React.Context<TabsContext | undefined>;
+export interface TabsImperativeApi {
+    switchTab(index: number): void;
 }
 /**
  * Use Tabs component to display a list of choices, once the handler is triggered.
  */
-export declare class Tabs extends React.Component<TabsProps, TabsState> {
-    state: TabsState;
-    switchTab(activeTabIndex: number): void;
-    renderChildren(children: React.ReactNode, activeIndex: number): JSX.Element;
-    render(): JSX.Element;
-}
+export declare const Tabs: React.ForwardRefExoticComponent<{
+    /**
+     * Append a class name.
+     */
+    className?: string | undefined;
+    /**
+     * Callback to execute when a tab is changed.
+     */
+    onActivate?: ((index: number) => void) | undefined;
+    /**
+     * Active tab index value.
+     */
+    value?: number | undefined;
+    /**
+     * Function to change active tab.
+     */
+    updateValue?: ((index: number) => void) | undefined;
+    /**
+     * Tab ID for the testing.
+     */
+    "data-testid"?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<TabsImperativeApi | undefined>>;
 export {};

package/Tabs/Tabs.js

@@ -1,178 +1,151 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tabs = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+exports.TabsContext = exports.Tabs = void 0;
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _tabs = require("@rmwc/tabs");
 
-var _Tab = require("./Tab");
-
 var disabledStyles = {
   opacity: 0.5,
   pointerEvents: "none"
 };
+var TabsContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.TabsContext = TabsContext;
 
-var getTabsChildren = function getTabsChildren(children) {
-  var filteredTabs = _react.default.Children.toArray(children).filter(function (c) {
-    return c !== null;
-  }
-  /**
-   * TODO @ts-refactor
-   * Need to cast because TS is complaining due to differences between types that can be in ReactNode
-   */
-  );
-
-  return filteredTabs.map(function (child) {
-    return {
-      label: child.props.label,
-      children: child.props.children,
-      icon: child.props.icon,
-      disabled: child.props.disabled,
-      style: child.props.style,
-      "data-testid": child.props["data-testid"]
-    };
-  });
-};
 /**
  * Use Tabs component to display a list of choices, once the handler is triggered.
  */
+var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activeTabIndex = _useState2[0],
+      setActiveIndex = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      tabs = _useState4[0],
+      setTabs = _useState4[1];
+
+  var activeIndex = props.value !== undefined ? props.value : activeTabIndex;
+  var activateTabIndex = (0, _react.useCallback)(function (index) {
+    if (typeof props.updateValue === "function") {
+      props.updateValue(index);
+      return;
+    }
 
+    setActiveIndex(index);
+  }, []);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      switchTab: function switchTab(tabIndex) {
+        activateTabIndex(tabIndex);
+      }
+    };
+  });
+  /**
+   * This effect will make sure that disabled tabs automatically switch to the first tab.
+   */
 
-var Tabs = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Tabs, _React$Component);
-
-  var _super = (0, _createSuper2.default)(Tabs);
-
-  function Tabs() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Tabs);
+  (0, _react.useEffect)(function () {
+    var _tabs$activeIndex;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if ((_tabs$activeIndex = tabs[activeIndex]) !== null && _tabs$activeIndex !== void 0 && _tabs$activeIndex.disabled) {
+      activateTabIndex(0);
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      activeTabIndex: 0
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(Tabs, [{
-    key: "switchTab",
-    value: function switchTab(activeTabIndex) {
-      if (typeof this.props.updateValue === "function") {
-        this.props.updateValue(activeTabIndex);
-        return;
+  });
+  /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */
+
+  var tabBar = /*#__PURE__*/_react.default.createElement(_tabs.TabBar, {
+    key: tabs.map(function (tab) {
+      return tab.id;
+    }).join(";"),
+    className: "webiny-ui-tabs__tab-bar",
+    activeTabIndex: activeIndex,
+    onActivate: function onActivate(evt) {
+      if (typeof props.updateValue === "function") {
+        props.updateValue(evt.detail.index);
+      } else {
+        setActiveIndex(evt.detail.index);
       }
 
-      this.setState({
-        activeTabIndex: activeTabIndex
-      });
+      props.onActivate && props.onActivate(evt.detail.index);
     }
-  }, {
-    key: "renderChildren",
-    value: function renderChildren(children, activeIndex) {
-      var _this2 = this;
-
-      var tabs = getTabsChildren(children);
-
-      var tabBar = /*#__PURE__*/_react.default.createElement(_tabs.TabBar, {
-        className: "webiny-ui-tabs__tab-bar",
-        activeTabIndex: activeIndex,
-        onActivate: function onActivate(evt) {
-          if (typeof _this2.props.updateValue === "function") {
-            _this2.props.updateValue(evt.detail.index);
-          } else {
-            _this2.setState({
-              activeTabIndex: evt.detail.index
-            });
-          }
+  }, tabs.map(function (item) {
+    var style = item.style || {};
 
-          _this2.props.onActivate && _this2.props.onActivate(evt.detail.index);
-        }
-      }, tabs.map(function (item, index) {
-        var style = item.style || {};
-
-        if (item.disabled) {
-          Object.assign(style, disabledStyles);
-        }
-
-        return /*#__PURE__*/_react.default.createElement(_Tab.Tab, Object.assign({
-          tag: "div",
-          style: style,
-          key: item.label + "-" + index,
-          "data-testid": item["data-testid"]
-        }, item.icon ? {
-          icon: item.icon
-        } : {}, item.label ? {
-          label: item.label
-        } : {}));
-      }));
-
-      var content = [];
-
-      for (var i = 0; i < tabs.length; i++) {
-        var current = tabs[i];
-
-        if (activeIndex === i) {
-          content.push( /*#__PURE__*/_react.default.createElement("div", {
-            key: i
-          }, current.children));
-        } else {
-          content.push( /*#__PURE__*/_react.default.createElement("div", {
-            key: i,
-            style: {
-              display: "none"
-            }
-          }, current.children));
-        }
-      }
+    if (item.disabled) {
+      Object.assign(style, disabledStyles);
+    }
 
+    return /*#__PURE__*/_react.default.createElement(_tabs.Tab, Object.assign({
+      tag: "div",
+      style: style,
+      key: item.id,
+      "data-testid": item["data-testid"]
+    }, item.icon ? {
+      icon: item.icon
+    } : {}), item.label);
+  }));
+
+  var content = tabs.map(function (tab, index) {
+    if (activeIndex === index) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index
+      }, tab.children);
+    } else {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)("webiny-ui-tabs", this.props.className)
-      }, tabBar, /*#__PURE__*/_react.default.createElement("div", {
-        className: "webiny-ui-tabs__content mdc-tab-content"
-      }, content));
+        key: index,
+        style: {
+          display: "none"
+        }
+      }, tab.children);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var activeIndex = this.props.value !== undefined ? this.props.value : this.state.activeTabIndex;
-      var children = this.props.children;
-
-      if (typeof this.props.children === "function") {
-        var childrenCallable = this.props.children;
-        children = childrenCallable({
-          switchTab: this.switchTab.bind(this)
+  });
+  var context = (0, _react.useMemo)(function () {
+    return {
+      addTab: function addTab(props) {
+        setTabs(function (tabs) {
+          var existingIndex = tabs.findIndex(function (tab) {
+            return tab.id === props.id;
+          });
+
+          if (existingIndex > -1) {
+            return [].concat((0, _toConsumableArray2.default)(tabs.slice(0, existingIndex)), [props], (0, _toConsumableArray2.default)(tabs.slice(existingIndex + 1)));
+          }
+
+          return [].concat((0, _toConsumableArray2.default)(tabs), [props]);
+        });
+      },
+      removeTab: function removeTab(id) {
+        setTabs(function (tabs) {
+          return tabs.filter(function (tab) {
+            return tab.id === id;
+          });
         });
       }
-
-      return this.renderChildren(children, activeIndex);
-    }
-  }]);
-  return Tabs;
-}(_react.default.Component);
-
-exports.Tabs = Tabs;
+    };
+  }, [setTabs]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("webiny-ui-tabs", props.className)
+  }, tabBar, /*#__PURE__*/_react.default.createElement("div", {
+    className: "webiny-ui-tabs__content mdc-tab-content"
+  }, content), /*#__PURE__*/_react.default.createElement(TabsContext.Provider, {
+    value: context
+  }, props.children));
+});
+exports.Tabs = Tabs;
+Tabs.displayName = "Tabs";

package/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["disabledStyles","opacity","pointerEvents","getTabsChildren","children","filteredTabs","React","Children","toArray","filter","c","map","child","label","props","icon","disabled","style","Tabs","activeTabIndex","updateValue","setState","activeIndex","tabs","tabBar","evt","detail","index","onActivate","item","Object","assign","content","i","length","current","push","display","classNames","className","value","undefined","state","childrenCallable","switchTab","bind","renderChildren","Component"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport classNames from \"classnames\";\nimport { TabBar } from \"@rmwc/tabs\";\nimport { Tab, TabProps } from \"./Tab\";\n\nexport interface TabsRenderProps {\n    switchTab(tabIndex: number): void;\n}\n\nexport interface TabsPropsChildrenCallable {\n    (props: TabsRenderProps): ReactNode;\n}\ntype TabsPropsChildren = TabsPropsChildrenCallable | ReactNode;\nexport interface TabsProps {\n    /**\n     * A collection of tabs that needs to be rendered.\n     */\n    children: TabsPropsChildren;\n\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\ninterface TabsState {\n    activeTabIndex: number;\n}\n\nconst disabledStyles: Record<string, string | number> = {\n    opacity: 0.5,\n    pointerEvents: \"none\"\n};\n\nconst getTabsChildren = (children: React.ReactNode): TabProps[] => {\n    const filteredTabs = React.Children.toArray(children).filter(\n        c => c !== null\n        /**\n         * TODO @ts-refactor\n         * Need to cast because TS is complaining due to differences between types that can be in ReactNode\n         */\n    ) as React.ReactElement<TabProps>[];\n\n    return filteredTabs.map(child => {\n        return {\n            label: child.props.label,\n            children: child.props.children,\n            icon: child.props.icon,\n            disabled: child.props.disabled,\n            style: child.props.style,\n            \"data-testid\": child.props[\"data-testid\"]\n        };\n    });\n};\n\n/**\n * Use Tabs component to display a list of choices, once the handler is triggered.\n */\nexport class Tabs extends React.Component<TabsProps, TabsState> {\n    public override state: TabsState = {\n        activeTabIndex: 0\n    };\n\n    public switchTab(activeTabIndex: number): void {\n        if (typeof this.props.updateValue === \"function\") {\n            this.props.updateValue(activeTabIndex);\n            return;\n        }\n        this.setState({ activeTabIndex });\n    }\n\n    public renderChildren(children: React.ReactNode, activeIndex: number) {\n        const tabs = getTabsChildren(children);\n\n        const tabBar = (\n            <TabBar\n                className=\"webiny-ui-tabs__tab-bar\"\n                activeTabIndex={activeIndex}\n                onActivate={evt => {\n                    if (typeof this.props.updateValue === \"function\") {\n                        this.props.updateValue(evt.detail.index);\n                    } else {\n                        this.setState({ activeTabIndex: evt.detail.index });\n                    }\n                    this.props.onActivate && this.props.onActivate(evt.detail.index);\n                }}\n            >\n                {tabs.map((item: TabProps, index) => {\n                    const style = item.style || {};\n                    if (item.disabled) {\n                        Object.assign(style, disabledStyles);\n                    }\n\n                    return (\n                        <Tab\n                            tag={\"div\"}\n                            style={style}\n                            key={item.label + \"-\" + index}\n                            data-testid={item[\"data-testid\"]}\n                            {...(item.icon ? { icon: item.icon } : {})}\n                            {...(item.label ? { label: item.label } : {})}\n                        />\n                    );\n                })}\n            </TabBar>\n        );\n\n        const content = [];\n        for (let i = 0; i < tabs.length; i++) {\n            const current = tabs[i];\n            if (activeIndex === i) {\n                content.push(<div key={i}>{current.children}</div>);\n            } else {\n                content.push(\n                    <div key={i} style={{ display: \"none\" }}>\n                        {current.children}\n                    </div>\n                );\n            }\n        }\n\n        return (\n            <div className={classNames(\"webiny-ui-tabs\", this.props.className)}>\n                {tabBar}\n                <div className={\"webiny-ui-tabs__content mdc-tab-content\"}>{content}</div>\n            </div>\n        );\n    }\n\n    public override render() {\n        const activeIndex =\n            this.props.value !== undefined ? this.props.value : this.state.activeTabIndex;\n\n        let children = this.props.children;\n        if (typeof this.props.children === \"function\") {\n            const childrenCallable = this.props.children as TabsPropsChildrenCallable;\n            children = childrenCallable({ switchTab: this.switchTab.bind(this) });\n        }\n\n        return this.renderChildren(children, activeIndex);\n    }\n}\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","switchTab","tabIndex","useEffect","disabled","tabBar","map","tab","id","join","evt","detail","onActivate","item","style","Object","assign","icon","label","content","children","display","context","useMemo","addTab","existingIndex","findIndex","slice","removeTab","filter","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}\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        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                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.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/Tooltip/Tooltip.d.ts

@@ -19,7 +19,7 @@ declare class Tooltip extends React.Component<TooltipProps, State> {
     state: {
         tooltipIsOpen: boolean;
     };
-    onVisibleChange: (visible?: boolean | undefined) => void;
+    onVisibleChange: (visible?: boolean) => void;
     render(): JSX.Element;
 }
 export { Tooltip };

package/TopAppBar/TopAppBarActionItem.d.ts

@@ -1,4 +1,4 @@
 import { TopAppBarActionItemProps as RmwcTopAppBarActionItemProps } from "@rmwc/top-app-bar";
-export declare type TopAppBarActionItemProps = RmwcTopAppBarActionItemProps;
+export declare type TopAppBarActionItemProps = Omit<RmwcTopAppBarActionItemProps, "onChange">;
 declare const TopAppBarActionItem: (props: TopAppBarActionItemProps) => JSX.Element;
 export { TopAppBarActionItem };

package/TopAppBar/TopAppBarActionItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["TopAppBarActionItem","props"],"sources":["TopAppBarActionItem.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    TopAppBarActionItem as RmwcTopAppBarActionItem,\n    TopAppBarActionItemProps as RmwcTopAppBarActionItemProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarActionItemProps = RmwcTopAppBarActionItemProps;\n\nconst TopAppBarActionItem = (props: TopAppBarActionItemProps) => {\n    return <RmwcTopAppBarActionItem {...props} />;\n};\n\nexport { TopAppBarActionItem };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAOA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD,EAAqC;EAC7D,oBAAO,6BAAC,8BAAD,EAA6BA,KAA7B,CAAP;AACH,CAFD"}
+{"version":3,"names":["TopAppBarActionItem","props"],"sources":["TopAppBarActionItem.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    TopAppBarActionItem as RmwcTopAppBarActionItem,\n    TopAppBarActionItemProps as RmwcTopAppBarActionItemProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarActionItemProps = Omit<RmwcTopAppBarActionItemProps, \"onChange\">;\n\nconst TopAppBarActionItem = (props: TopAppBarActionItemProps) => {\n    return <RmwcTopAppBarActionItem {...props} />;\n};\n\nexport { TopAppBarActionItem };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAOA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD,EAAqC;EAC7D,oBAAO,6BAAC,8BAAD,EAA6BA,KAA7B,CAAP;AACH,CAFD"}

package/TopAppBar/TopAppBarNavigationIcon.d.ts

@@ -1,4 +1,4 @@
 import { TopAppBarNavigationIconProps as RmwcTopAppBarNavigationIconProps } from "@rmwc/top-app-bar";
-export declare type TopAppBarNavigationIconProps = RmwcTopAppBarNavigationIconProps;
+export declare type TopAppBarNavigationIconProps = Omit<RmwcTopAppBarNavigationIconProps, "onChange">;
 declare const TopAppBarNavigationIcon: (props: TopAppBarNavigationIconProps) => JSX.Element;
 export { TopAppBarNavigationIcon };

package/TopAppBar/TopAppBarNavigationIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["TopAppBarNavigationIcon","props"],"sources":["TopAppBarNavigationIcon.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    TopAppBarNavigationIcon as RmwcTopAppBarNavigationIcon,\n    TopAppBarNavigationIconProps as RmwcTopAppBarNavigationIconProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarNavigationIconProps = RmwcTopAppBarNavigationIconProps;\n\nconst TopAppBarNavigationIcon = (props: TopAppBarNavigationIconProps) => {\n    return <RmwcTopAppBarNavigationIcon {...props} />;\n};\n\nexport { TopAppBarNavigationIcon };\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAOA,IAAMA,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,KAAD,EAAyC;EACrE,oBAAO,6BAAC,kCAAD,EAAiCA,KAAjC,CAAP;AACH,CAFD"}
+{"version":3,"names":["TopAppBarNavigationIcon","props"],"sources":["TopAppBarNavigationIcon.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    TopAppBarNavigationIcon as RmwcTopAppBarNavigationIcon,\n    TopAppBarNavigationIconProps as RmwcTopAppBarNavigationIconProps\n} from \"@rmwc/top-app-bar\";\n\nexport type TopAppBarNavigationIconProps = Omit<RmwcTopAppBarNavigationIconProps, \"onChange\">;\n\nconst TopAppBarNavigationIcon = (props: TopAppBarNavigationIconProps) => {\n    return <RmwcTopAppBarNavigationIcon {...props} />;\n};\n\nexport { TopAppBarNavigationIcon };\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAOA,IAAMA,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACC,KAAD,EAAyC;EACrE,oBAAO,6BAAC,kCAAD,EAAiCA,KAAjC,CAAP;AACH,CAFD"}