@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/Tabs/Tabs.js

@@ -0,0 +1,158 @@
+"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.
+ */
+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 {
+      getActiveIndex: function getActiveIndex() {
+        return activeIndex;
+      },
+      switchTab: function switchTab(tabIndex) {
+        activateTabIndex(tabIndex);
+      }
+    };
+  });
+  /**
+   * This effect will make sure that disabled tabs automatically switch to the first tab.
+   */
+
+  (0, _react.useEffect)(function () {
+    var _tabs$activeIndex;
+
+    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 {
+        setActiveIndex(evt.detail.index);
+      }
+
+      props.onActivate && props.onActivate(evt.detail.index);
+    }
+  }, tabs.map(function (item) {
+    if (!item.visible) {
+      return null;
+    }
+
+    var style = item.style || {};
+
+    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.filter(Boolean).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"
+        }
+      }, tab.children);
+    }
+  });
+  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;
+          });
+        });
+      }
+    };
+  }, [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","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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"}

package/Tabs/Tabs.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Tabs/Tabs.stories.js

@@ -0,0 +1,53 @@
+"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.default.createElement("div", {
+      style: {
+        padding: 50
+      }
+    }, props.children);
+  };
+
+  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.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.Tabs, null, /*#__PURE__*/_react.default.createElement(_index.Tab, {
+    label: "Tab 1",
+    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.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.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: [_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.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tabs";
+export * from "./Tab";

package/Tabs/index.js

@@ -0,0 +1,31 @@
+"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/Tabs/svg/baseline-autorenew-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/Tabs/svg/baseline-cloud_done-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM10 17l-3.5-3.5 1.41-1.41L10 14.17 15.18 9l1.41 1.41L10 17z"/>
+</svg>

package/Tabs/svg/baseline-delete-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/Tabs/svg/baseline-done-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0z"/>
+    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+</svg>

package/Tags/README.md

@@ -0,0 +1,15 @@
+# Tags
+
+### Design
+
+N/A
+
+### Description
+
+`Tags` component lets users to input one or more tags.
+
+### Import
+
+```js
+import { Tags } from "@webiny/ui/Tags";
+```

package/Tags/Tags.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import { FormComponentProps } from "../types";
+interface TagsProps extends FormComponentProps {
+    /**
+     * Component label.
+     */
+    label?: string;
+    /**
+     * Are input and chosen tags disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.
+     */
+    placeholder?: string;
+    /**
+     * Description beneath the input.
+     */
+    description?: string;
+    /**
+     * A className for the root element.
+     */
+    className?: string;
+    /**
+     * A list of tags.
+     */
+    value?: string[];
+    /**
+     * Callback that gets executed on change of input value.
+     */
+    onInput?: Function;
+    /**
+     * Callback that gets executed when the input is focused.
+     */
+    onFocus?: Function;
+    /**
+     * Automatically focus on the tags input.
+     */
+    autoFocus?: boolean;
+    /**
+     * Protected tags cannot be removed by the user.
+     */
+    protectedTags?: string[];
+}
+export declare const Tags: React.FC<TagsProps>;
+export default Tags;

package/Tags/Tags.js

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tags = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _emotion = require("emotion");
+
+var _keycode = _interopRequireDefault(require("keycode"));
+
+var _minimatch = _interopRequireDefault(require("minimatch"));
+
+var _Input = require("../Input");
+
+var _Chips = require("../Chips");
+
+var _baselineClose24px = require("./icons/baseline-close-24px.svg");
+
+var _FormElementMessage = require("../FormElementMessage");
+
+var _excluded = ["validation", "value", "disabled", "onChange", "description", "protectedTags"];
+var tagsStyle = /*#__PURE__*/(0, _emotion.css)({
+  position: "relative",
+  ".mdc-elevation--z1": {
+    position: "absolute",
+    width: "calc(100% - 2px)",
+    left: 1,
+    top: 56,
+    zIndex: 10,
+    maxHeight: 200,
+    overflowY: "scroll",
+    backgroundColor: "var(--mdc-theme-surface)"
+  },
+  ul: {
+    listStyle: "none",
+    width: "100%",
+    padding: 0,
+    li: {
+      padding: 10
+    }
+  }
+}, "label:tagsStyle;");
+
+var Tags = function Tags(props) {
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var validation = props.validation,
+      value = props.value,
+      disabled = props.disabled,
+      onChange = props.onChange,
+      description = props.description,
+      _props$protectedTags = props.protectedTags,
+      protectedTags = _props$protectedTags === void 0 ? [] : _props$protectedTags,
+      otherInputProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var isProtected = (0, _react.useCallback)(function (tag) {
+    return protectedTags.some(function (pattern) {
+      return (0, _minimatch.default)(tag, pattern);
+    });
+  }, [protectedTags]);
+  var inputProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherInputProps), {}, {
+    value: inputValue,
+    onChange: function onChange(inputValue) {
+      setInputValue(inputValue);
+    },
+    onKeyDown: function onKeyDown(ev) {
+      if (!onChange) {
+        return;
+      }
+
+      var newValue = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
+      /**
+       * We must cast as keycode only works with Event | string type.
+       */
+
+      switch ((0, _keycode.default)(ev)) {
+        case "enter":
+          if (inputValue) {
+            newValue.push(inputValue);
+            onChange(newValue);
+            setInputValue("");
+          }
+
+          break;
+
+        case "backspace":
+          if (newValue.length && !inputValue) {
+            newValue.splice(-1, 1);
+            onChange(newValue);
+            break;
+          }
+
+      }
+    }
+  });
+
+  var _ref = validation || {},
+      validationIsValid = _ref.isValid,
+      validationMessage = _ref.message;
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: tagsStyle
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Input.Input, inputProps), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+    error: true
+  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description), Array.isArray(value) && value.length ? /*#__PURE__*/_react.default.createElement(_Chips.Chips, {
+    disabled: disabled
+  }, value.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_Chips.Chip, {
+      label: item,
+      trailingIcon: isProtected(item) ? null : /*#__PURE__*/_react.default.createElement(_baselineClose24px.ReactComponent, null),
+      key: "".concat(item, "-").concat(index),
+      onRemove: function onRemove() {
+        // On removal, let's update the value and call "onChange" callback.
+        if (onChange) {
+          var newValue = (0, _toConsumableArray2.default)(value);
+          newValue.splice(index, 1);
+          onChange(newValue);
+        }
+      }
+    });
+  })) : null));
+};
+
+exports.Tags = Tags;
+var _default = Tags;
+exports.default = _default;

package/Tags/Tags.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tagsStyle","css","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","Tags","props","useState","inputValue","setInputValue","validation","value","disabled","onChange","description","protectedTags","otherInputProps","isProtected","useCallback","tag","some","pattern","minimatch","inputProps","onKeyDown","ev","newValue","Array","isArray","keycode","push","length","splice","validationIsValid","isValid","validationMessage","message","map","item","index"],"sources":["Tags.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useState } from \"react\";\nimport { css } from \"emotion\";\nimport keycode from \"keycode\";\nimport minimatch from \"minimatch\";\nimport { Input, InputProps } from \"~/Input\";\nimport { Chips, Chip } from \"~/Chips\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ninterface TagsProps extends FormComponentProps {\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Are input and chosen tags disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n     */\n    placeholder?: string;\n\n    /**\n     * Description beneath the input.\n     */\n    description?: string;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * A list of tags.\n     */\n    value?: string[];\n\n    /**\n     * Callback that gets executed on change of input value.\n     */\n    onInput?: Function;\n\n    /**\n     * Callback that gets executed when the input is focused.\n     */\n    onFocus?: Function;\n\n    /**\n     * Automatically focus on the tags input.\n     */\n    autoFocus?: boolean;\n\n    /**\n     * Protected tags cannot be removed by the user.\n     */\n    protectedTags?: string[];\n}\n\nconst tagsStyle = 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        }\n    }\n});\n\nexport const Tags: React.FC<TagsProps> = props => {\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const {\n        validation,\n        value,\n        disabled,\n        onChange,\n        description,\n        protectedTags = [],\n        ...otherInputProps\n    } = props;\n\n    const isProtected = useCallback(\n        (tag: string) => protectedTags.some(pattern => minimatch(tag, pattern)),\n        [protectedTags]\n    );\n\n    const inputProps: InputProps<string> = {\n        ...otherInputProps,\n        value: inputValue,\n        onChange: inputValue => {\n            setInputValue(inputValue);\n        },\n        onKeyDown: (ev: SyntheticEvent) => {\n            if (!onChange) {\n                return;\n            }\n\n            const newValue = Array.isArray(value) ? [...value] : [];\n\n            /**\n             * We must cast as keycode only works with Event | string type.\n             */\n            switch (keycode(ev as unknown as Event)) {\n                case \"enter\":\n                    if (inputValue) {\n                        newValue.push(inputValue);\n                        onChange(newValue);\n                        setInputValue(\"\");\n                    }\n                    break;\n                case \"backspace\":\n                    if (newValue.length && !inputValue) {\n                        newValue.splice(-1, 1);\n                        onChange(newValue);\n                        break;\n                    }\n            }\n        }\n    };\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    return (\n        <div className={tagsStyle}>\n            <div>\n                <Input {...inputProps} />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(value) && value.length ? (\n                    <Chips disabled={disabled}>\n                        {value.map((item, index) => {\n                            return (\n                                <Chip\n                                    label={item}\n                                    trailingIcon={isProtected(item) ? null : <BaselineCloseIcon />}\n                                    key={`${item}-${index}`}\n                                    onRemove={() => {\n                                        // On removal, let's update the value and call \"onChange\" callback.\n                                        if (onChange) {\n                                            const newValue = [...value];\n                                            newValue.splice(index, 1);\n                                            onChange(newValue);\n                                        }\n                                    }}\n                                />\n                            );\n                        })}\n                    </Chips>\n                ) : null}\n            </div>\n        </div>\n    );\n};\n\nexport default Tags;\n"],"mappings":"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"}

package/Tags/Tags.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Tags/Tags.stories.js

@@ -0,0 +1,43 @@
+"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 _addonKnobs = require("@storybook/addon-knobs");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _form = require("@webiny/form");
+
+var _Tags = require("./Tags");
+
+var story = (0, _react2.storiesOf)("Components/Tags", module);
+story.addDecorator(_addonKnobs.withKnobs);
+story.add("usage", function () {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
+    title: "Single value"
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
+    data: {
+      tags: ["animals", "dogs", "food"]
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "tags"
+    }, /*#__PURE__*/_react.default.createElement(_Tags.Tags, {
+      label: "Tags",
+      disabled: disabled,
+      description: "Choose your tags"
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                     <Form data={{ tags: ['animals', 'dogs', 'food'] }}>\n                        {({ Bind }) => (\n                            <Bind name=\"tags\">\n                                <Tags\n                                    label=\"Tags\"\n                                    disabled={disabled}\n                                    description=\"Choose your tags\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+}, {
+  info: {
+    propTables: [_Tags.Tags]
+  }
+});

package/Tags/Tags.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","readme","tags","Bind","info","propTables","Tags"],"sources":["Tags.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 { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Tags } from \"./Tags\";\n\nconst story = storiesOf(\"Components/Tags\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Single value\"}>\n                        <Form data={{ tags: [\"animals\", \"dogs\", \"food\"] }}>\n                            {({ Bind }) => (\n                                <Bind name=\"tags\">\n                                    <Tags\n                                        label=\"Tags\"\n                                        disabled={disabled}\n                                        description=\"Choose your tags\"\n                                    />\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{ tags: ['animals', 'dogs', 'food'] }}>\n                        {({ Bind }) => (\n                            <Bind name=\"tags\">\n                                <Tags\n                                    label=\"Tags\"\n                                    disabled={disabled}\n                                    description=\"Choose your tags\"\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Tags] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,iBAAV,EAA6BC,MAA7B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,IAAI,EAAE,CAAC,SAAD,EAAY,MAAZ,EAAoB,MAApB;IAAR;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,UAAD;MACI,KAAK,EAAC,MADV;MAEI,QAAQ,EAAEJ,QAFd;MAGI,WAAW,EAAC;IAHhB,EADJ,CADH;EAAA,CADL,CADJ,CADJ,eAcI,6BAAC,uBAAD,miBAdJ,CAFJ,CADJ;AAmCH,CAxCL,EAyCI;EAAEK,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,UAAD;EAAd;AAAR,CAzCJ"}

package/Tags/icons/baseline-close-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/Tags/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tags";

package/Tags/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Tags = require("./Tags");
+
+Object.keys(_Tags).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tags[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Tags[key];
+    }
+  });
+});

package/Tags/index.js.map

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

package/Tooltip/README.md

@@ -0,0 +1,15 @@
+# Tooltip
+
+### Additional information
+
+<a href="http://react-component.github.io/tooltip/" target="_blank">http://react-component.github.io/tooltip/</a>
+
+### Description
+
+Use `Tooltip` component to display useful messages to users.
+
+### Import
+
+```js
+import { Tooltip } from "@webiny/ui/Tooltip";
+```