@webiny/ui 0.0.0-mt-3 → 0.0.0-unstable.5e7233243f

package/Tabs/Tabs.d.ts

@@ -1,12 +1,6 @@
-import React, { ReactNode } from "react";
-export declare type TabsRenderProps = {
-    switchTab(tabIndex: number): void;
-};
-export declare type TabsProps = {
-    /**
-     * A collection of tabs that needs to be rendered.
-     */
-    children: ((props: TabsRenderProps) => ReactNode) | ReactNode;
+import React, { PropsWithChildren } from "react";
+import { TabProps } from "./Tab";
+export declare type TabsProps = PropsWithChildren<{
     /**
      * Append a class name.
      */
@@ -23,19 +17,47 @@ export declare type TabsProps = {
      * Function to change active tab.
      */
     updateValue?: (index: number) => void;
-};
-declare type State = {
-    activeTabIndex: number;
-};
+    /**
+     * Tab ID for the testing.
+     */
+    "data-testid"?: string;
+}>;
+interface TabItem extends TabProps {
+    id: string;
+}
+interface TabsContext {
+    addTab(props: TabItem): void;
+    removeTab(id: string): void;
+}
+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, State> {
-    state: {
-        activeTabIndex: number;
-    };
-    switchTab(activeTabIndex: any): void;
-    renderChildren(children: any, activeIndex: any): 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,145 +1,151 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from "react";
-import classNames from "classnames";
-import { TabBar } from "@rmwc/tabs";
-import { Tab } from "./Tab";
+"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.TabsContext = exports.Tabs = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _tabs = require("@rmwc/tabs");
+
 var disabledStyles = {
   opacity: 0.5,
   pointerEvents: "none"
 };
+var TabsContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.TabsContext = TabsContext;
+
 /**
  * Use Tabs component to display a list of choices, once the handler is triggered.
  */
-
-export var Tabs = /*#__PURE__*/function (_React$Component) {
-  _inherits(Tabs, _React$Component);
-
-  var _super = _createSuper(Tabs);
-
-  function Tabs() {
-    var _this;
-
-    _classCallCheck(this, Tabs);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+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;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      activeTabIndex: 0
-    });
+    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.
+   */
 
-    return _this;
-  }
+  (0, _react.useEffect)(function () {
+    var _tabs$activeIndex;
 
-  _createClass(Tabs, [{
-    key: "switchTab",
-    value: function switchTab(activeTabIndex) {
-      if (typeof this.props.updateValue === "function") {
-        this.props.updateValue(activeTabIndex);
+    if ((_tabs$activeIndex = tabs[activeIndex]) !== null && _tabs$activeIndex !== void 0 && _tabs$activeIndex.disabled) {
+      activateTabIndex(0);
+    }
+  });
+  /* 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 {
-        this.setState({
-          activeTabIndex: activeTabIndex
-        });
+        setActiveIndex(evt.detail.index);
       }
-    }
-  }, {
-    key: "renderChildren",
-    value: function renderChildren(children, activeIndex) {
-      var _this2 = this;
-
-      var tabs = React.Children.toArray(children).filter(function (c) {
-        return c !== null;
-      }).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"]
-        };
-      });
-      var tabBar = /*#__PURE__*/React.createElement(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
-            });
-          }
 
-          _this2.props.onActivate && _this2.props.onActivate(evt.detail.index);
-        }
-      }, tabs.map(function (item, index) {
-        var style = item.style || {};
+      props.onActivate && props.onActivate(evt.detail.index);
+    }
+  }, tabs.map(function (item) {
+    var style = item.style || {};
 
-        if (item.disabled) {
-          Object.assign(style, disabledStyles);
-        }
+    if (item.disabled) {
+      Object.assign(style, disabledStyles);
+    }
 
-        return /*#__PURE__*/React.createElement(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.createElement("div", {
-            key: i
-          }, current.children));
-        } else {
-          content.push( /*#__PURE__*/React.createElement("div", {
-            key: i,
-            style: {
-              display: "none"
-            }
-          }, current.children));
+    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", {
+        key: index,
+        style: {
+          display: "none"
         }
-      }
-
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames("webiny-ui-tabs", this.props.className)
-      }, tabBar, /*#__PURE__*/React.createElement("div", {
-        className: "webiny-ui-tabs__content mdc-tab-content"
-      }, content));
+      }, 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") {
-        // @ts-ignore
-        children = this.props.children({
-          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.Component);
+    };
+  }, [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

@@ -0,0 +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","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/Tabs/Tabs.stories.js

@@ -1,41 +1,53 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
-import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
-import readme from "./../Tabs/README.md";
-import { ReactComponent as DeleteIcon } from "@svgr/webpack!./svg/baseline-delete-24px.svg";
-import { ReactComponent as DoneIcon } from "@svgr/webpack!./svg/baseline-done-24px.svg";
-import { withKnobs } from "@storybook/addon-knobs";
-import { Tabs, Tab } from "./index";
-var story = storiesOf("Components/Tabs", module);
-story.addDecorator(withKnobs);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./../Tabs/README.md"));
+
+var _baselineDelete24px = require("./svg/baseline-delete-24px.svg");
+
+var _baselineDone24px = require("./svg/baseline-done-24px.svg");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _index = require("./index");
+
+var story = (0, _react2.storiesOf)("Components/Tabs", module);
+story.addDecorator(_addonKnobs.withKnobs);
 story.add("usage", function () {
   var Div = function Div(props) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       style: {
         padding: 50
       }
     }, props.children);
   };
 
-  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {
     title: "Tabs example"
-  }, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       overflow: "hidden"
     }
-  }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+  }, /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tab, {
     label: "Tab 1",
-    icon: /*#__PURE__*/React.createElement(DeleteIcon, null)
-  }, /*#__PURE__*/React.createElement(Div, null, "Tab 1 content.")), /*#__PURE__*/React.createElement(Tab, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDelete24px.ReactComponent, null)
+  }, /*#__PURE__*/_react.default.createElement(Div, null, "Tab 1 content.")), /*#__PURE__*/_react.default.createElement(_index.Tab, {
     label: "Tab 2",
-    icon: /*#__PURE__*/React.createElement(DoneIcon, null)
-  }, /*#__PURE__*/React.createElement(Div, null, "Tab 2 content.")), /*#__PURE__*/React.createElement(Tab, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
+  }, /*#__PURE__*/_react.default.createElement(Div, null, "Tab 2 content.")), /*#__PURE__*/_react.default.createElement(_index.Tab, {
     label: "Tab 3"
-  }, /*#__PURE__*/React.createElement(Div, null, "Tab 3 content - header without icon.")), /*#__PURE__*/React.createElement(Tab, {
-    icon: /*#__PURE__*/React.createElement(DoneIcon, null)
-  }, /*#__PURE__*/React.createElement(Div, null, "Tab 4 content - header without label."))))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                            <Tabs>\n                                <Tab label=\"Tab 1\" icon={<DeleteIcon />}>\n                                    <Div>Tab 1 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 2\" icon={<DoneIcon />}>\n                                    <Div>Tab 2 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 3\">\n                                    <Div>Tab 3 content - header without icon.</Div>\n                                </Tab>\n                                <Tab icon={<DoneIcon />}>\n                                    <Div>Tab 4 content - header without label.</Div>\n                                </Tab>\n                            </Tabs>\n                        ")));
+  }, /*#__PURE__*/_react.default.createElement(Div, null, "Tab 3 content - header without icon.")), /*#__PURE__*/_react.default.createElement(_index.Tab, {
+    icon: /*#__PURE__*/_react.default.createElement(_baselineDone24px.ReactComponent, null)
+  }, /*#__PURE__*/_react.default.createElement(Div, null, "Tab 4 content - header without label."))))), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                            <Tabs>\n                                <Tab label=\"Tab 1\" icon={<DeleteIcon />}>\n                                    <Div>Tab 1 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 2\" icon={<DoneIcon />}>\n                                    <Div>Tab 2 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 3\">\n                                    <Div>Tab 3 content - header without icon.</Div>\n                                </Tab>\n                                <Tab icon={<DoneIcon />}>\n                                    <Div>Tab 4 content - header without label.</Div>\n                                </Tab>\n                            </Tabs>\n                        ")));
 }, {
   info: {
-    propTables: [Tabs, Tab]
+    propTables: [_index.Tabs, _index.Tab]
   }
 });

package/Tabs/Tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","Div","props","padding","children","readme","overflow","info","propTables","Tabs","Tab"],"sources":["Tabs.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../Tabs/README.md\";\n\nimport { ReactComponent as DeleteIcon } from \"./svg/baseline-delete-24px.svg\";\nimport { ReactComponent as DoneIcon } from \"./svg/baseline-done-24px.svg\";\nimport { withKnobs } from \"@storybook/addon-knobs\";\nimport { Tabs, Tab } from \"./index\";\n\nconst story = storiesOf(\"Components/Tabs\", module);\n\nstory.addDecorator(withKnobs);\nstory.add(\n    \"usage\",\n    () => {\n        const Div: React.FC = props => {\n            return <div style={{ padding: 50 }}>{props.children}</div>;\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Tabs example\"}>\n                    <StorySandboxExample>\n                        <div style={{ overflow: \"hidden\" }}>\n                            <Tabs>\n                                <Tab label=\"Tab 1\" icon={<DeleteIcon />}>\n                                    <Div>Tab 1 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 2\" icon={<DoneIcon />}>\n                                    <Div>Tab 2 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 3\">\n                                    <Div>Tab 3 content - header without icon.</Div>\n                                </Tab>\n                                <Tab icon={<DoneIcon />}>\n                                    <Div>Tab 4 content - header without label.</Div>\n                                </Tab>\n                            </Tabs>\n                        </div>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                            <Tabs>\n                                <Tab label=\"Tab 1\" icon={<DeleteIcon />}>\n                                    <Div>Tab 1 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 2\" icon={<DoneIcon />}>\n                                    <Div>Tab 2 content.</Div>\n                                </Tab>\n                                <Tab label=\"Tab 3\">\n                                    <Div>Tab 3 content - header without icon.</Div>\n                                </Tab>\n                                <Tab icon={<DoneIcon />}>\n                                    <Div>Tab 4 content - header without label.</Div>\n                                </Tab>\n                            </Tabs>\n                        `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Tabs, Tab] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AAEA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AAEAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AACAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,GAAa,GAAG,SAAhBA,GAAgB,CAAAC,KAAK,EAAI;IAC3B,oBAAO;MAAK,KAAK,EAAE;QAAEC,OAAO,EAAE;MAAX;IAAZ,GAA8BD,KAAK,CAACE,QAApC,CAAP;EACH,CAFD;;EAIA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI;IAAK,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAZ;EAAZ,gBACI,6BAAC,WAAD,qBACI,6BAAC,UAAD;IAAK,KAAK,EAAC,OAAX;IAAmB,IAAI,eAAE,6BAAC,kCAAD;EAAzB,gBACI,6BAAC,GAAD,yBADJ,CADJ,eAII,6BAAC,UAAD;IAAK,KAAK,EAAC,OAAX;IAAmB,IAAI,eAAE,6BAAC,gCAAD;EAAzB,gBACI,6BAAC,GAAD,yBADJ,CAJJ,eAOI,6BAAC,UAAD;IAAK,KAAK,EAAC;EAAX,gBACI,6BAAC,GAAD,+CADJ,CAPJ,eAUI,6BAAC,UAAD;IAAK,IAAI,eAAE,6BAAC,gCAAD;EAAX,gBACI,6BAAC,GAAD,gDADJ,CAVJ,CADJ,CADJ,CADJ,eAmBI,6BAAC,uBAAD,i0BAnBJ,CAFJ,CADJ;AA2CH,CAlDL,EAmDI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,WAAD,EAAOC,UAAP;EAAd;AAAR,CAnDJ"}

package/Tabs/index.js

@@ -1,2 +1,31 @@
-export * from "./Tabs";
-export * from "./Tab";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Tabs = require("./Tabs");
+
+Object.keys(_Tabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Tabs[key];
+    }
+  });
+});
+
+var _Tab = require("./Tab");
+
+Object.keys(_Tab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Tab[key];
+    }
+  });
+});

package/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Tabs\";\nexport * from \"./Tab\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/Tags/Tags.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
+import React from "react";
 import { FormComponentProps } from "../types";
-declare type Props = FormComponentProps & {
+declare type TagsProps = FormComponentProps & {
     /**
      * Component label.
      */
@@ -41,18 +41,13 @@ declare type Props = FormComponentProps & {
      */
     autoFocus?: boolean;
 };
-declare type State = {
+interface TagsState {
     inputValue: string;
-};
-export declare class Tags extends React.Component<Props, State> {
+}
+export declare class Tags extends React.Component<TagsProps, TagsState> {
     state: {
         inputValue: string;
     };
-    static defaultProps: {
-        validation: {
-            isValid: any;
-        };
-    };
     render(): JSX.Element;
 }
 export default Tags;