@webiny/ui 5.43.2 → 6.0.0-alpha.0

package/Tabs/Tabs.js

@@ -1,121 +1,67 @@
-"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.TabsContext = exports.Tabs = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _tabs = require("@rmwc/tabs");
-var _excluded = ["children", "value", "onActivate", "className"];
-var disabledStyles = {
-  opacity: 0.5,
-  pointerEvents: "none"
-};
-var TabsContext = exports.TabsContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+import React, { createContext, useCallback, useMemo, useState } from "react";
+import { Tabs as AdminTabs } from "@webiny/admin-ui";
+const VALUE_PREFIX = "tab-";
+export const DeprecatedTabsContext = /*#__PURE__*/createContext(undefined);
 
 /**
- * Use Tabs component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tabs` component from the `@webiny/admin-ui` package instead.
  */
-var Tabs = exports.Tabs = function Tabs(_ref) {
-  var children = _ref.children,
-    value = _ref.value,
-    _onActivate = _ref.onActivate,
-    className = _ref.className,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  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 = value !== undefined ? value : activeTabIndex;
+export const Tabs = ({
+  value,
+  onActivate,
+  ...props
+}) => {
+  const [activeTabIndex, setActiveIndex] = useState(0);
+  const [tabs, setTabs] = useState([]);
+  const activeIndex = value !== undefined ? value : activeTabIndex;
+  const onValueChange = useCallback(value => {
+    const parts = value.split(VALUE_PREFIX);
+    const index = parseInt(parts[1]);
+    if (isNaN(index)) {
+      return;
+    }
+    setActiveIndex(index);
+    onActivate && onActivate(index);
+  }, [onActivate]);
 
   /* 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) {
-      setActiveIndex(evt.detail.index);
-      _onActivate && _onActivate(evt.detail.index);
-    }
-  }, tabs.map(function (item) {
-    if (!item.visible) {
-      return /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
-        tag: "div",
-        style: {
-          display: "none"
-        },
-        key: item.id
-      });
-    }
-    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"
+  const newTabs = tabs.map((tab, index) => {
+    return /*#__PURE__*/React.createElement(AdminTabs.Tab, {
+      key: `${VALUE_PREFIX}${index}`,
+      value: `${VALUE_PREFIX}${index}`,
+      trigger: tab.label,
+      content: tab.children,
+      icon: tab.icon,
+      disabled: tab.disabled,
+      visible: tab.visible !== false,
+      "data-testid": tab["data-testid"]
+    });
+  });
+  const context = useMemo(() => ({
+    addTab(props) {
+      setTabs(tabs => {
+        const existingIndex = tabs.findIndex(tab => tab.id === props.id);
+        if (existingIndex > -1) {
+          return [...tabs.slice(0, existingIndex), props, ...tabs.slice(existingIndex + 1)];
         }
-      }, tab.children);
+        return [...tabs, props];
+      });
+    },
+    removeTab(id) {
+      setTabs(tabs => tabs.filter(tab => tab.id === id));
     }
-  });
-  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", {
-    id: props.id,
-    className: (0, _classnames.default)("webiny-ui-tabs", className)
-  }, tabBar, /*#__PURE__*/_react.default.createElement("div", {
-    className: "webiny-ui-tabs__content mdc-tab-content"
-  }, content), /*#__PURE__*/_react.default.createElement(TabsContext.Provider, {
+  }), [setTabs]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AdminTabs, Object.assign({}, props, {
+    value: `${VALUE_PREFIX}${activeIndex}`,
+    onValueChange: onValueChange,
+    tabs: newTabs,
+    size: "md",
+    separator: true,
+    spacing: "lg"
+  })), /*#__PURE__*/React.createElement(DeprecatedTabsContext.Provider, {
     value: context
-  }, children));
+  }, props.children));
 };
 Tabs.displayName = "Tabs";
 

package/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_tabs","_excluded","disabledStyles","opacity","pointerEvents","TabsContext","exports","createContext","undefined","Tabs","_ref","children","value","onActivate","className","props","_objectWithoutProperties2","default","_useState","useState","_useState2","_slicedToArray2","activeTabIndex","setActiveIndex","_useState3","_useState4","tabs","setTabs","activeIndex","tabBar","createElement","TabBar","key","map","tab","id","join","evt","detail","index","item","visible","Tab","tag","style","display","disabled","Object","assign","icon","label","content","filter","Boolean","context","useMemo","addTab","existingIndex","findIndex","concat","_toConsumableArray2","slice","removeTab","classNames","Provider","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { createContext, useMemo, useState } from \"react\";\nimport classNames from \"classnames\";\nimport { TabBar, Tab as RmwcTab } from \"@rmwc/tabs\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {\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     * 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\n/**\n * Use Tabs component to display a list of choices, once the handler is triggered.\n */\nexport const Tabs = ({ children, value, onActivate, className, ...props }: TabsProps) => {\n    const [activeTabIndex, setActiveIndex] = useState(0);\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const activeIndex = value !== undefined ? value : activeTabIndex;\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                setActiveIndex(evt.detail.index);\n                onActivate && onActivate(evt.detail.index);\n            }}\n        >\n            {tabs.map(item => {\n                if (!item.visible) {\n                    return <RmwcTab tag={\"div\"} style={{ display: \"none\" }} key={item.id} />;\n                }\n\n                const style = item.style || {};\n                if (item.disabled) {\n                    Object.assign(style, disabledStyles);\n                }\n\n                return (\n                    <RmwcTab\n                        tag={\"div\"}\n                        style={style}\n                        key={item.id}\n                        data-testid={item[\"data-testid\"]}\n                        {...(item.icon ? { icon: item.icon } : {})}\n                    >\n                        {item.label}\n                    </RmwcTab>\n                );\n            })}\n        </TabBar>\n    );\n\n    const content = tabs.filter(Boolean).map((tab, index) => {\n        if (activeIndex === index) {\n            return <div key={index}>{tab.children}</div>;\n        } else {\n            return (\n                <div key={index} style={{ display: \"none\" }}>\n                    {tab.children}\n                </div>\n            );\n        }\n    });\n\n    const context: TabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.id === props.id);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id === id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <div id={props.id} className={classNames(\"webiny-ui-tabs\", className)}>\n            {tabBar}\n            <div className={\"webiny-ui-tabs__content mdc-tab-content\"}>{content}</div>\n            <TabsContext.Provider value={context}>{children}</TabsContext.Provider>\n        </div>\n    );\n};\n\nTabs.displayName = \"Tabs\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","createContext","useCallback","useMemo","useState","Tabs","AdminTabs","VALUE_PREFIX","DeprecatedTabsContext","undefined","value","onActivate","props","activeTabIndex","setActiveIndex","tabs","setTabs","activeIndex","onValueChange","parts","split","index","parseInt","isNaN","newTabs","map","tab","createElement","Tab","key","trigger","label","content","children","icon","disabled","visible","context","addTab","existingIndex","findIndex","id","slice","removeTab","filter","Fragment","Object","assign","size","separator","spacing","Provider","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { createContext, PropsWithChildren, useCallback, useMemo, useState } from \"react\";\nimport { Tabs as AdminTabs } from \"@webiny/admin-ui\";\nimport { TabProps } from \"./Tab\";\n\nconst VALUE_PREFIX = \"tab-\";\n\nexport type TabsProps = PropsWithChildren<{\n    /**\n     * Append an ID.\n     */\n    id?: string;\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     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n}>;\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\ninterface DeprecatedTabsContext {\n    addTab(props: TabItem): void;\n\n    removeTab(id: string): void;\n}\n\nexport const DeprecatedTabsContext = createContext<DeprecatedTabsContext | undefined>(undefined);\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `Tabs` component from the `@webiny/admin-ui` package instead.\n */\nexport const Tabs = ({ value, onActivate, ...props }: TabsProps) => {\n    const [activeTabIndex, setActiveIndex] = useState(0);\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const activeIndex = value !== undefined ? value : activeTabIndex;\n\n    const onValueChange = useCallback(\n        (value: string) => {\n            const parts = value.split(VALUE_PREFIX);\n            const index = parseInt(parts[1]);\n\n            if (isNaN(index)) {\n                return;\n            }\n\n            setActiveIndex(index);\n            onActivate && onActivate(index);\n        },\n        [onActivate]\n    );\n\n    /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */\n    const newTabs = tabs.map((tab, index) => {\n        return (\n            <AdminTabs.Tab\n                key={`${VALUE_PREFIX}${index}`}\n                value={`${VALUE_PREFIX}${index}`}\n                trigger={tab.label}\n                content={tab.children}\n                icon={tab.icon}\n                disabled={tab.disabled}\n                visible={tab.visible !== false}\n                data-testid={tab[\"data-testid\"]}\n            />\n        );\n    });\n\n    const context: DeprecatedTabsContext = 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        <>\n            <AdminTabs\n                {...props}\n                value={`${VALUE_PREFIX}${activeIndex}`}\n                onValueChange={onValueChange}\n                tabs={newTabs}\n                size={\"md\"}\n                separator={true}\n                spacing={\"lg\"}\n            />\n            <DeprecatedTabsContext.Provider value={context}>\n                {props.children}\n            </DeprecatedTabsContext.Provider>\n        </>\n    );\n};\n\nTabs.displayName = \"Tabs\";\n"],"mappings":"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","ignoreList":[]}

package/Tabs/index.js

@@ -1,29 +1,4 @@
-"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];
-    }
-  });
-});
+export * from "./Tabs";
+export * from "./Tab";
 
 //# sourceMappingURL=index.js.map

package/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Tabs","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_Tab"],"sources":["index.ts"],"sourcesContent":["export * from \"./Tabs\";\nexport * from \"./Tab\";\n"],"mappings":";;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,KAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,KAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,KAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,IAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,IAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,IAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,IAAA,CAAAL,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Tabs\";\nexport * from \"./Tab\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/Tags/Tags.d.ts

@@ -4,7 +4,7 @@ interface TagsProps extends FormComponentProps {
     /**
      * Component label.
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Are input and chosen tags disabled?
      */

package/Tags/Tags.js

@@ -1,78 +1,34 @@
-"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 = (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
-    }
-  }
-});
-var Tags = exports.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), {}, {
+import React, { useCallback, useState } from "react";
+import keycode from "keycode";
+import minimatch from "minimatch";
+import { Input } from "../Input";
+import { Chips, Chip } from "../Chips";
+export const Tags = props => {
+  const [inputValue, setInputValue] = useState("");
+  const {
+    value,
+    disabled,
+    onChange,
+    protectedTags = [],
+    ...otherInputProps
+  } = props;
+  const isProtected = useCallback(tag => protectedTags.some(pattern => minimatch(tag, pattern)), [protectedTags]);
+  const inputProps = {
+    ...otherInputProps,
     value: inputValue,
-    onChange: function onChange(inputValue) {
+    onChange: inputValue => {
       setInputValue(inputValue);
     },
-    onKeyDown: function onKeyDown(ev) {
+    onKeyDown: ev => {
       if (!onChange) {
         return;
       }
-      var newValue = Array.isArray(value) ? (0, _toConsumableArray2.default)(value) : [];
+      const newValue = Array.isArray(value) ? [...value] : [];
 
       /**
        * We must cast as keycode only works with Event | string type.
        */
-      switch ((0, _keycode.default)(ev)) {
+      switch (keycode(ev)) {
         case "enter":
           if (inputValue) {
             newValue.push(inputValue);
@@ -88,32 +44,24 @@ var Tags = exports.Tags = function Tags(props) {
           }
       }
     }
-  });
-  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, {
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, inputProps), Array.isArray(value) && value.length ? /*#__PURE__*/React.createElement(Chips, {
     disabled: disabled
-  }, value.map(function (item, index) {
-    return /*#__PURE__*/_react.default.createElement(_Chips.Chip, {
+  }, value.map((item, index) => {
+    return /*#__PURE__*/React.createElement(Chip, {
       label: item,
-      trailingIcon: isProtected(item) ? null : /*#__PURE__*/_react.default.createElement(_baselineClose24px.ReactComponent, null),
-      key: "".concat(item, "-").concat(index),
-      onRemove: function onRemove() {
+      key: `${item}-${index}`,
+      onRemove: !isProtected(item) ? () => {
         // On removal, let's update the value and call "onChange" callback.
         if (onChange) {
-          var newValue = (0, _toConsumableArray2.default)(value);
+          const newValue = [...value];
           newValue.splice(index, 1);
           onChange(newValue);
         }
-      }
+      } : undefined
     });
-  })) : null));
+  })) : null);
 };
-var _default = exports.default = Tags;
+export default Tags;
 
 //# sourceMappingURL=Tags.js.map

package/Tags/Tags.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_keycode","_interopRequireDefault","_minimatch","_Input","_Chips","_baselineClose24px","_FormElementMessage","_excluded","tagsStyle","css","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","Tags","exports","props","_useState","useState","_useState2","_slicedToArray2","default","inputValue","setInputValue","validation","value","disabled","onChange","description","_props$protectedTags","protectedTags","otherInputProps","_objectWithoutProperties2","isProtected","useCallback","tag","some","pattern","minimatch","inputProps","_objectSpread2","onKeyDown","ev","newValue","Array","isArray","_toConsumableArray2","keycode","push","length","splice","_ref","validationIsValid","isValid","validationMessage","message","createElement","className","Input","FormElementMessage","error","Chips","map","item","index","Chip","label","trailingIcon","ReactComponent","key","concat","onRemove","_default"],"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?: <T = unknown>(value: T) => void;\n\n    /**\n     * Callback that gets executed when the input is focused.\n     */\n    onFocus?: (ev: Event) => void;\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 = (props: TagsProps) => {\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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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useState","keycode","minimatch","Input","Chips","Chip","Tags","props","inputValue","setInputValue","value","disabled","onChange","protectedTags","otherInputProps","isProtected","tag","some","pattern","inputProps","onKeyDown","ev","newValue","Array","isArray","push","length","splice","createElement","map","item","index","label","key","onRemove","undefined"],"sources":["Tags.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useState } from \"react\";\nimport keycode from \"keycode\";\nimport minimatch from \"minimatch\";\nimport { Input, InputProps } from \"~/Input\";\nimport { Chips, Chip } from \"~/Chips\";\nimport { FormComponentProps } from \"~/types\";\n\ninterface TagsProps extends FormComponentProps {\n    /**\n     * Component label.\n     */\n    label?: React.ReactNode;\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?: <T = unknown>(value: T) => void;\n\n    /**\n     * Callback that gets executed when the input is focused.\n     */\n    onFocus?: (ev: Event) => void;\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\nexport const Tags = (props: TagsProps) => {\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const { value, disabled, onChange, protectedTags = [], ...otherInputProps } = 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    return (\n        <div>\n            <Input {...inputProps} />\n            {Array.isArray(value) && value.length ? (\n                <Chips disabled={disabled}>\n                    {value.map((item, index) => {\n                        return (\n                            <Chip\n                                label={item}\n                                key={`${item}-${index}`}\n                                onRemove={\n                                    !isProtected(item)\n                                        ? () => {\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                                        : undefined\n                                }\n                            />\n                        );\n                    })}\n                </Chips>\n            ) : null}\n        </div>\n    );\n};\n\nexport default Tags;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAoBC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACpE,OAAOC,OAAO,MAAM,SAAS;AAC7B,OAAOC,SAAS,MAAM,WAAW;AACjC,SAASC,KAAK;AACd,SAASC,KAAK,EAAEC,IAAI;AAuDpB,OAAO,MAAMC,IAAI,GAAIC,KAAgB,IAAK;EACtC,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGT,QAAQ,CAAC,EAAE,CAAC;EAEhD,MAAM;IAAEU,KAAK;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,aAAa,GAAG,EAAE;IAAE,GAAGC;EAAgB,CAAC,GAAGP,KAAK;EAEnF,MAAMQ,WAAW,GAAGhB,WAAW,CAC1BiB,GAAW,IAAKH,aAAa,CAACI,IAAI,CAACC,OAAO,IAAIhB,SAAS,CAACc,GAAG,EAAEE,OAAO,CAAC,CAAC,EACvE,CAACL,aAAa,CAClB,CAAC;EAED,MAAMM,UAA8B,GAAG;IACnC,GAAGL,eAAe;IAClBJ,KAAK,EAAEF,UAAU;IACjBI,QAAQ,EAAEJ,UAAU,IAAI;MACpBC,aAAa,CAACD,UAAU,CAAC;IAC7B,CAAC;IACDY,SAAS,EAAGC,EAAkB,IAAK;MAC/B,IAAI,CAACT,QAAQ,EAAE;QACX;MACJ;MAEA,MAAMU,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACd,KAAK,CAAC,GAAG,CAAC,GAAGA,KAAK,CAAC,GAAG,EAAE;;MAEvD;AACZ;AACA;MACY,QAAQT,OAAO,CAACoB,EAAsB,CAAC;QACnC,KAAK,OAAO;UACR,IAAIb,UAAU,EAAE;YACZc,QAAQ,CAACG,IAAI,CAACjB,UAAU,CAAC;YACzBI,QAAQ,CAACU,QAAQ,CAAC;YAClBb,aAAa,CAAC,EAAE,CAAC;UACrB;UACA;QACJ,KAAK,WAAW;UACZ,IAAIa,QAAQ,CAACI,MAAM,IAAI,CAAClB,UAAU,EAAE;YAChCc,QAAQ,CAACK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACtBf,QAAQ,CAACU,QAAQ,CAAC;YAClB;UACJ;MACR;IACJ;EACJ,CAAC;EAED,oBACIxB,KAAA,CAAA8B,aAAA,2BACI9B,KAAA,CAAA8B,aAAA,CAACzB,KAAK,EAAKgB,UAAa,CAAC,EACxBI,KAAK,CAACC,OAAO,CAACd,KAAK,CAAC,IAAIA,KAAK,CAACgB,MAAM,gBACjC5B,KAAA,CAAA8B,aAAA,CAACxB,KAAK;IAACO,QAAQ,EAAEA;EAAS,GACrBD,KAAK,CAACmB,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;IACxB,oBACIjC,KAAA,CAAA8B,aAAA,CAACvB,IAAI;MACD2B,KAAK,EAAEF,IAAK;MACZG,GAAG,EAAE,GAAGH,IAAI,IAAIC,KAAK,EAAG;MACxBG,QAAQ,EACJ,CAACnB,WAAW,CAACe,IAAI,CAAC,GACZ,MAAM;QACF;QACA,IAAIlB,QAAQ,EAAE;UACV,MAAMU,QAAQ,GAAG,CAAC,GAAGZ,KAAK,CAAC;UAC3BY,QAAQ,CAACK,MAAM,CAACI,KAAK,EAAE,CAAC,CAAC;UACzBnB,QAAQ,CAACU,QAAQ,CAAC;QACtB;MACJ,CAAC,GACDa;IACT,CACJ,CAAC;EAEV,CAAC,CACE,CAAC,GACR,IACH,CAAC;AAEd,CAAC;AAED,eAAe7B,IAAI","ignoreList":[]}

package/Tags/index.js

@@ -1,18 +1,3 @@
-"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];
-    }
-  });
-});
+export * from "./Tags";
 
 //# sourceMappingURL=index.js.map

package/Tags/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Tags","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.ts"],"sourcesContent":["export * from \"./Tags\";\n"],"mappings":";;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,KAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,KAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,KAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Tags\";\n"],"mappings":"AAAA","ignoreList":[]}

package/TimeAgo/index.d.ts

@@ -1,3 +1,7 @@
-import TimeAgo from "timeago-react";
-export type { TimeAgoProps, Opts, TDate } from "timeago-react";
+import { TimeAgo } from "@webiny/admin-ui";
+export type { TimeAgoProps, Opts, TDate } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `TimeAgo` component from the `@webiny/admin-ui` package instead.
+ */
 export { TimeAgo };

package/TimeAgo/index.js

@@ -1,15 +1,8 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TimeAgo", {
-  enumerable: true,
-  get: function get() {
-    return _timeagoReact.default;
-  }
-});
-var _timeagoReact = _interopRequireDefault(require("timeago-react"));
+import { TimeAgo } from "@webiny/admin-ui";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `TimeAgo` component from the `@webiny/admin-ui` package instead.
+ */
+export { TimeAgo };
 
 //# sourceMappingURL=index.js.map

package/TimeAgo/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_timeagoReact","_interopRequireDefault","require"],"sources":["index.ts"],"sourcesContent":["import TimeAgo from \"timeago-react\";\n\nexport type { TimeAgoProps, Opts, TDate } from \"timeago-react\";\n\nexport { TimeAgo };\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}
+{"version":3,"names":["TimeAgo"],"sources":["index.ts"],"sourcesContent":["import { TimeAgo } from \"@webiny/admin-ui\";\nexport type { TimeAgoProps, Opts, TDate } from \"@webiny/admin-ui\";\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `TimeAgo` component from the `@webiny/admin-ui` package instead.\n */\nexport { TimeAgo };\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,kBAAkB;AAG1C;AACA;AACA;AACA;AACA,SAASA,OAAO","ignoreList":[]}

package/Tooltip/Tooltip.d.ts

@@ -1,25 +1,13 @@
 import React from "react";
-import "rc-tooltip/assets/bootstrap_white.css";
-import "./style.scss";
-type TooltipPropsContent = (() => React.ReactChild) | React.ReactChild | React.ReactFragment | React.ReactPortal;
 export interface TooltipProps {
     children: React.ReactNode;
-    content: TooltipPropsContent;
+    content: React.ReactNode;
     trigger?: string;
     placement?: "left" | "right" | "top" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
     className?: string;
 }
-interface State {
-    tooltipIsOpen: boolean;
-}
 /**
- * Use Tooltip component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tooltip` component from the `@webiny/admin-ui` package instead.
  */
-declare class Tooltip extends React.Component<TooltipProps, State> {
-    state: {
-        tooltipIsOpen: boolean;
-    };
-    onVisibleChange: (visible?: boolean) => void;
-    render(): React.JSX.Element;
-}
-export { Tooltip };
+export declare const Tooltip: ({ children, content, placement, className }: TooltipProps) => React.JSX.Element;