@webiny/ui 6.0.0-beta.0 → 6.0.0-rc.0

package/Switch/Switch.d.ts

@@ -1,15 +1,30 @@
 import React from "react";
-import { SwitchProps } from "@rmwc/switch";
-import { FormComponentProps } from "../types";
-declare type Props = Omit<SwitchProps, "value"> & FormComponentProps<boolean> & {
+import type { FormComponentProps } from "../types.js";
+type SwitchProps = {
+    /** A DOM ID for the toggle. */
+    id?: string;
+    /** Disables the control. */
+    disabled?: boolean;
+    /** Toggle the control on and off. */
+    checked?: boolean;
+    /** The value of the control. */
+    value?: string | number | string[];
+    /** A label for the control. */
+    label?: React.ReactNode;
+    /** By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. */
+    rootProps?: React.HTMLProps<any>;
+    /** A reference to the native input. */
+    inputRef?: React.Ref<HTMLInputElement>;
+};
+type Props = Omit<SwitchProps, "value"> & FormComponentProps<boolean> & {
     description?: string;
     className?: string;
 };
 /**
- * Switch component can be used to store simple boolean values.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Switch` component from the `@webiny/admin-ui` package instead.
  */
 declare class Switch extends React.Component<Props> {
-    static rmwcProps: string[];
     render(): React.JSX.Element;
 }
 export { Switch };

package/Switch/Switch.js

@@ -1,52 +1,30 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Switch = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _switch = require("@rmwc/switch");
-var _pick = _interopRequireDefault(require("lodash/pick"));
-var _FormElementMessage = require("../FormElementMessage");
-var _Helpers = require("../Helpers");
+import React from "react";
+import { Switch as AdminSwitch } from "@webiny/admin-ui";
 /**
- * Switch component can be used to store simple boolean values.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Switch` component from the `@webiny/admin-ui` package instead.
  */
-var Switch = exports.Switch = /*#__PURE__*/function (_React$Component) {
-  function Switch() {
-    (0, _classCallCheck2.default)(this, Switch);
-    return (0, _callSuper2.default)(this, Switch, arguments);
+class Switch extends React.Component {
+  render() {
+    const {
+      value,
+      description,
+      validation,
+      label,
+      disabled
+    } = this.props;
+    return /*#__PURE__*/React.createElement(AdminSwitch, {
+      label: label,
+      note: description,
+      validation: validation,
+      className: "webiny-ui-switch",
+      checked: Boolean(value),
+      value: String(value),
+      onChange: () => this.props.onChange && this.props.onChange(!value),
+      disabled: disabled
+    });
   }
-  (0, _inherits2.default)(Switch, _React$Component);
-  return (0, _createClass2.default)(Switch, [{
-    key: "render",
-    value: function render() {
-      var _this = this;
-      var _this$props = this.props,
-        value = _this$props.value,
-        description = _this$props.description,
-        validation = _this$props.validation;
-      var _ref = validation || {},
-        validationIsValid = _ref.isValid,
-        validationMessage = _ref.message;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_switch.Switch, Object.assign({}, (0, _Helpers.getClasses)((0, _objectSpread2.default)({}, (0, _pick.default)(this.props, Switch.rmwcProps)), "webiny-ui-switch"), {
-        checked: Boolean(value),
-        onClick: function onClick() {
-          return _this.props.onChange && _this.props.onChange(!value);
-        }
-      })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        error: true
-      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
-    }
-  }]);
-}(_react.default.Component);
-(0, _defineProperty2.default)(Switch, "rmwcProps", ["id", "disabled", "checked", "label", "rootProps", "className"]);
+}
+export { Switch };
 
 //# sourceMappingURL=Switch.js.map

package/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_switch","_pick","_FormElementMessage","_Helpers","Switch","exports","_React$Component","_classCallCheck2","default","_callSuper2","arguments","_inherits2","_createClass2","key","value","render","_this","_this$props","props","description","validation","_ref","validationIsValid","isValid","validationMessage","message","createElement","Fragment","Object","assign","getClasses","_objectSpread2","pick","rmwcProps","checked","Boolean","onClick","onChange","FormElementMessage","error","React","Component","_defineProperty2"],"sources":["Switch.tsx"],"sourcesContent":["import React from \"react\";\nimport { Switch as RmwcSwitch, SwitchProps } from \"@rmwc/switch\";\nimport { FormComponentProps } from \"~/types\";\nimport pick from \"lodash/pick\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { getClasses } from \"~/Helpers\";\n\ntype Props = Omit<SwitchProps, \"value\"> &\n    FormComponentProps<boolean> & {\n        // Description beneath the switch.\n        description?: string;\n\n        // Optional class name.\n        className?: string;\n    };\n\n/**\n * Switch component can be used to store simple boolean values.\n */\nclass Switch extends React.Component<Props> {\n    static rmwcProps = [\"id\", \"disabled\", \"checked\", \"label\", \"rootProps\", \"className\"];\n\n    public override render() {\n        const { value, description, validation } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <RmwcSwitch\n                    {...getClasses({ ...pick(this.props, Switch.rmwcProps) }, \"webiny-ui-switch\")}\n                    checked={Boolean(value)}\n                    onClick={() => this.props.onChange && this.props.onChange(!value)}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { Switch };\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAWA;AACA;AACA;AAFA,IAGMK,MAAM,GAAAC,OAAA,CAAAD,MAAA,0BAAAE,gBAAA;EAAA,SAAAF,OAAA;IAAA,IAAAG,gBAAA,CAAAC,OAAA,QAAAJ,MAAA;IAAA,WAAAK,WAAA,CAAAD,OAAA,QAAAJ,MAAA,EAAAM,SAAA;EAAA;EAAA,IAAAC,UAAA,CAAAH,OAAA,EAAAJ,MAAA,EAAAE,gBAAA;EAAA,WAAAM,aAAA,CAAAJ,OAAA,EAAAJ,MAAA;IAAAS,GAAA;IAAAC,KAAA,EAGR,SAAAC,OAAA,EAAyB;MAAA,IAAAC,KAAA;MACrB,IAAAC,WAAA,GAA2C,IAAI,CAACC,KAAK;QAA7CJ,KAAK,GAAAG,WAAA,CAALH,KAAK;QAAEK,WAAW,GAAAF,WAAA,CAAXE,WAAW;QAAEC,UAAU,GAAAH,WAAA,CAAVG,UAAU;MAEtC,IAAAC,IAAA,GAAmED,UAAU,IAAI,CAAC,CAAC;QAAlEE,iBAAiB,GAAAD,IAAA,CAA1BE,OAAO;QAA8BC,iBAAiB,GAAAH,IAAA,CAA1BI,OAAO;MAE3C,oBACI5B,MAAA,CAAAW,OAAA,CAAAkB,aAAA,CAAC7B,MAAA,CAAAW,OAAK,CAACmB,QAAQ,qBACX9B,MAAA,CAAAW,OAAA,CAAAkB,aAAA,CAAC1B,OAAA,CAAAI,MAAU,EAAAwB,MAAA,CAAAC,MAAA,KACH,IAAAC,mBAAU,MAAAC,cAAA,CAAAvB,OAAA,MAAM,IAAAwB,aAAI,EAAC,IAAI,CAACd,KAAK,EAAEd,MAAM,CAAC6B,SAAS,CAAC,GAAI,kBAAkB,CAAC;QAC7EC,OAAO,EAAEC,OAAO,CAACrB,KAAK,CAAE;QACxBsB,OAAO,EAAE,SAAAA,QAAA;UAAA,OAAMpB,KAAI,CAACE,KAAK,CAACmB,QAAQ,IAAIrB,KAAI,CAACE,KAAK,CAACmB,QAAQ,CAAC,CAACvB,KAAK,CAAC;QAAA;MAAC,EACrE,CAAC,EAEDQ,iBAAiB,KAAK,KAAK,iBACxBzB,MAAA,CAAAW,OAAA,CAAAkB,aAAA,CAACxB,mBAAA,CAAAoC,kBAAkB;QAACC,KAAK;MAAA,GAAEf,iBAAsC,CACpE,EAEAF,iBAAiB,KAAK,KAAK,IAAIH,WAAW,iBACvCtB,MAAA,CAAAW,OAAA,CAAAkB,aAAA,CAACxB,mBAAA,CAAAoC,kBAAkB,QAAEnB,WAAgC,CAE7C,CAAC;IAEzB;EAAC;AAAA,EAzBgBqB,cAAK,CAACC,SAAS;AAAA,IAAAC,gBAAA,CAAAlC,OAAA,EAA9BJ,MAAM,eACW,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Switch","AdminSwitch","Component","render","value","description","validation","label","disabled","props","createElement","note","className","checked","Boolean","String","onChange"],"sources":["Switch.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FormComponentProps } from \"~/types.js\";\nimport { Switch as AdminSwitch } from \"@webiny/admin-ui\";\n\ntype SwitchProps = {\n    /** A DOM ID for the toggle. */\n    id?: string;\n    /** Disables the control. */\n    disabled?: boolean;\n    /** Toggle the control on and off. */\n    checked?: boolean;\n    /** The value of the control. */\n    value?: string | number | string[];\n    /** A label for the control. */\n    label?: React.ReactNode;\n    /** By default, all props except className and style spread to the input. These are additional props for the root of the checkbox. */\n    rootProps?: React.HTMLProps<any>;\n    /** A reference to the native input. */\n    inputRef?: React.Ref<HTMLInputElement>;\n};\n\ntype Props = Omit<SwitchProps, \"value\"> &\n    FormComponentProps<boolean> & {\n        // Description beneath the switch.\n        description?: string;\n\n        // Optional class name.\n        className?: string;\n    };\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `Switch` component from the `@webiny/admin-ui` package instead.\n */\nclass Switch extends React.Component<Props> {\n    public override render() {\n        const { value, description, validation, label, disabled } = this.props;\n\n        return (\n            <AdminSwitch\n                label={label}\n                note={description}\n                validation={validation}\n                className={\"webiny-ui-switch\"}\n                checked={Boolean(value)}\n                value={String(value)}\n                onChange={() => this.props.onChange && this.props.onChange(!value)}\n                disabled={disabled}\n            />\n        );\n    }\n}\n\nexport { Switch };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,MAAM,IAAIC,WAAW,QAAQ,kBAAkB;AA4BxD;AACA;AACA;AACA;AACA,MAAMD,MAAM,SAASD,KAAK,CAACG,SAAS,CAAQ;EACxBC,MAAMA,CAAA,EAAG;IACrB,MAAM;MAAEC,KAAK;MAAEC,WAAW;MAAEC,UAAU;MAAEC,KAAK;MAAEC;IAAS,CAAC,GAAG,IAAI,CAACC,KAAK;IAEtE,oBACIV,KAAA,CAAAW,aAAA,CAACT,WAAW;MACRM,KAAK,EAAEA,KAAM;MACbI,IAAI,EAAEN,WAAY;MAClBC,UAAU,EAAEA,UAAW;MACvBM,SAAS,EAAE,kBAAmB;MAC9BC,OAAO,EAAEC,OAAO,CAACV,KAAK,CAAE;MACxBA,KAAK,EAAEW,MAAM,CAACX,KAAK,CAAE;MACrBY,QAAQ,EAAEA,CAAA,KAAM,IAAI,CAACP,KAAK,CAACO,QAAQ,IAAI,IAAI,CAACP,KAAK,CAACO,QAAQ,CAAC,CAACZ,KAAK,CAAE;MACnEI,QAAQ,EAAEA;IAAS,CACtB,CAAC;EAEV;AACJ;AAEA,SAASR,MAAM","ignoreList":[]}

package/Switch/index.d.ts

@@ -1 +1 @@
-export * from "./Switch";
+export * from "./Switch.js";

package/Switch/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Switch = require("./Switch");
-Object.keys(_Switch).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Switch[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Switch[key];
-    }
-  });
-});
+export * from "./Switch.js";
 
 //# sourceMappingURL=index.js.map

package/Switch/index.js.map

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

package/Tabs/Tab.d.ts

@@ -1,7 +1,24 @@
 import React from "react";
-import { TabProps as RmwcTabProps } from "@rmwc/tabs";
-export declare type TabProps = RmwcTabProps & {
+export type TabProps = {
+    /**
+     * A label for the tab.
+     */
+    label?: any;
+    /**
+     * The label for the tab, passed as children.
+     */
+    children?: React.ReactNode;
+    /**
+     * The icon to use for the tab.
+     */
+    icon?: React.ReactElement;
+    /**
+     * Is tab visible?
+     */
     visible?: boolean;
+    /**
+     * @deprecated
+     */
     tag?: string;
     /**
      * Is tab disabled?
@@ -16,4 +33,8 @@ export declare type TabProps = RmwcTabProps & {
      */
     "data-testid"?: string;
 };
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `Tabs` component props from the `@webiny/admin-ui` package instead.
+ */
 export declare const Tab: React.MemoExoticComponent<(props: TabProps) => null>;

package/Tabs/Tab.js

@@ -1,26 +1,22 @@
-"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.Tab = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _react = _interopRequireWildcard(require("react"));
-var _shortid = _interopRequireDefault(require("shortid"));
-var _Tabs = require("./Tabs");
-var Tab = exports.Tab = /*#__PURE__*/_react.default.memo(function (props) {
-  var tabsContext = (0, _react.useContext)(_Tabs.TabsContext);
-  var idRef = (0, _react.useRef)(_shortid.default.generate());
-  (0, _react.useEffect)(function () {
-    tabsContext.addTab((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+import React, { useContext, useEffect, useRef } from "react";
+import { generateAlphaNumericId } from "@webiny/utils/generateId.js";
+import { DeprecatedTabsContext } from "./Tabs.js";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `Tabs` component props from the `@webiny/admin-ui` package instead.
+ */
+export const Tab = /*#__PURE__*/React.memo(props => {
+  const tabsContext = useContext(DeprecatedTabsContext);
+  const idRef = useRef(generateAlphaNumericId(12));
+  useEffect(() => {
+    tabsContext.addTab({
+      ...props,
       id: idRef.current,
       visible: props.visible ?? true
-    }));
+    });
   }, [props]);
-  (0, _react.useEffect)(function () {
-    return function () {
+  useEffect(() => {
+    return () => {
       return tabsContext.removeTab(idRef.current);
     };
   }, []);

package/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_shortid","_interopRequireDefault","_Tabs","Tab","exports","React","memo","props","tabsContext","useContext","TabsContext","idRef","useRef","shortid","generate","useEffect","addTab","_objectSpread2","default","id","current","visible","removeTab","displayName"],"sources":["Tab.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef } from \"react\";\nimport { TabProps as RmwcTabProps } from \"@rmwc/tabs\";\nimport shortid from \"shortid\";\nimport { TabsContext } from \"./Tabs\";\n\nexport type TabProps = RmwcTabProps & {\n    visible?: boolean;\n\n    tag?: string;\n    /**\n     * Is tab disabled?\n     */\n    disabled?: boolean;\n    /**\n     * Style object\n     */\n    style?: React.CSSProperties;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n};\n\nexport const Tab = React.memo((props: TabProps) => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(shortid.generate());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n});\n\nTab.displayName = \"Tab\";\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAoBO,IAAMI,GAAG,GAAAC,OAAA,CAAAD,GAAA,gBAAGE,cAAK,CAACC,IAAI,CAAC,UAACC,KAAe,EAAK;EAC/C,IAAMC,WAAW,GAAG,IAAAC,iBAAU,EAACC,iBAAW,CAAC;EAC3C,IAAMC,KAAK,GAAG,IAAAC,aAAM,EAACC,gBAAO,CAACC,QAAQ,CAAC,CAAC,CAAC;EAExC,IAAAC,gBAAS,EAAC,YAAM;IACZP,WAAW,CAAEQ,MAAM,KAAAC,cAAA,CAAAC,OAAA,MAAAD,cAAA,CAAAC,OAAA,MAAMX,KAAK;MAAEY,EAAE,EAAER,KAAK,CAACS,OAAO;MAAEC,OAAO,EAAEd,KAAK,CAACc,OAAO,IAAI;IAAI,EAAE,CAAC;EACxF,CAAC,EAAE,CAACd,KAAK,CAAC,CAAC;EAEX,IAAAQ,gBAAS,EAAC,YAAM;IACZ,OAAO,YAAM;MACT,OAAOP,WAAW,CAAEc,SAAS,CAACX,KAAK,CAACS,OAAO,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC,CAAC;AAEFjB,GAAG,CAACoB,WAAW,GAAG,KAAK","ignoreList":[]}
+{"version":3,"names":["React","useContext","useEffect","useRef","generateAlphaNumericId","DeprecatedTabsContext","Tab","memo","props","tabsContext","idRef","addTab","id","current","visible","removeTab","displayName"],"sources":["Tab.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef } from \"react\";\nimport { generateAlphaNumericId } from \"@webiny/utils/generateId.js\";\nimport { DeprecatedTabsContext } from \"./Tabs.js\";\n\nexport type TabProps = {\n    /**\n     * A label for the tab.\n     */\n    label?: any;\n    /**\n     * The label for the tab, passed as children.\n     */\n    children?: React.ReactNode;\n    /**\n     * The icon to use for the tab.\n     */\n    icon?: React.ReactElement;\n    /**\n     * Is tab visible?\n     */\n    visible?: boolean;\n    /**\n     * @deprecated\n     */\n    tag?: string;\n    /**\n     * Is tab disabled?\n     */\n    disabled?: boolean;\n    /**\n     * Style object\n     */\n    style?: React.CSSProperties;\n    /**\n     * Tab ID for the testing.\n     */\n    \"data-testid\"?: string;\n};\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please find out the new `Tabs` component props from the `@webiny/admin-ui` package instead.\n */\nexport const Tab = React.memo((props: TabProps) => {\n    const tabsContext = useContext(DeprecatedTabsContext);\n    const idRef = useRef(generateAlphaNumericId(12));\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n});\n\nTab.displayName = \"Tab\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAC5D,SAASC,sBAAsB,QAAQ,6BAA6B;AACpE,SAASC,qBAAqB;AAqC9B;AACA;AACA;AACA;AACA,OAAO,MAAMC,GAAG,gBAAGN,KAAK,CAACO,IAAI,CAAEC,KAAe,IAAK;EAC/C,MAAMC,WAAW,GAAGR,UAAU,CAACI,qBAAqB,CAAC;EACrD,MAAMK,KAAK,GAAGP,MAAM,CAACC,sBAAsB,CAAC,EAAE,CAAC,CAAC;EAEhDF,SAAS,CAAC,MAAM;IACZO,WAAW,CAAEE,MAAM,CAAC;MAAE,GAAGH,KAAK;MAAEI,EAAE,EAAEF,KAAK,CAACG,OAAO;MAAEC,OAAO,EAAEN,KAAK,CAACM,OAAO,IAAI;IAAK,CAAC,CAAC;EACxF,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;EAEXN,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACT,OAAOO,WAAW,CAAEM,SAAS,CAACL,KAAK,CAACG,OAAO,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC,CAAC;AAEFP,GAAG,CAACU,WAAW,GAAG,KAAK","ignoreList":[]}

package/Tabs/Tabs.d.ts

@@ -1,6 +1,11 @@
-import React, { PropsWithChildren } from "react";
-import { TabProps } from "./Tab";
-export declare type TabsProps = PropsWithChildren<{
+import type { PropsWithChildren } from "react";
+import React from "react";
+import type { TabProps } from "./Tab.js";
+export type TabsProps = PropsWithChildren<{
+    /**
+     * Append an ID.
+     */
+    id?: string;
     /**
      * Append a class name.
      */
@@ -21,16 +26,17 @@ export declare type TabsProps = PropsWithChildren<{
 interface TabItem extends TabProps {
     id: string;
 }
-interface TabsContext {
+interface DeprecatedTabsContext {
     addTab(props: TabItem): void;
     removeTab(id: string): void;
 }
-export declare const TabsContext: React.Context<TabsContext | undefined>;
+export declare const DeprecatedTabsContext: React.Context<DeprecatedTabsContext | 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.
  */
 export declare const Tabs: {
-    (props: TabsProps): React.JSX.Element;
+    ({ value, onActivate, ...props }: TabsProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/Tabs/Tabs.js

@@ -1,111 +1,65 @@
-"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 = 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(props) {
-  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;
+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);
-      props.onActivate && props.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", {
-    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, {
+  }), [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
   }, props.children));
 };

package/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_tabs","disabledStyles","opacity","pointerEvents","TabsContext","exports","createContext","undefined","Tabs","props","_useState","useState","_useState2","_slicedToArray2","default","activeTabIndex","setActiveIndex","_useState3","_useState4","tabs","setTabs","activeIndex","value","tabBar","createElement","TabBar","key","map","tab","id","join","className","onActivate","evt","detail","index","item","visible","Tab","tag","style","display","disabled","Object","assign","icon","label","content","filter","Boolean","children","context","useMemo","addTab","existingIndex","findIndex","concat","_toConsumableArray2","slice","removeTab","classNames","Provider","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { createContext, PropsWithChildren, useMemo, useState } 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     * 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 = (props: TabsProps) => {\n    const [activeTabIndex, setActiveIndex] = useState(0);\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const activeIndex = props.value !== undefined ? props.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                props.onActivate && props.onActivate(evt.detail.index);\n            }}\n        >\n            {tabs.map(item => {\n                if (!item.visible) {\n                    return <RmwcTab tag={\"div\"} style={{ display: \"none\" }} key={item.id} />;\n                }\n\n                const style = item.style || {};\n                if (item.disabled) {\n                    Object.assign(style, disabledStyles);\n                }\n\n                return (\n                    <RmwcTab\n                        tag={\"div\"}\n                        style={style}\n                        key={item.id}\n                        data-testid={item[\"data-testid\"]}\n                        {...(item.icon ? { icon: item.icon } : {})}\n                    >\n                        {item.label}\n                    </RmwcTab>\n                );\n            })}\n        </TabBar>\n    );\n\n    const content = tabs.filter(Boolean).map((tab, index) => {\n        if (activeIndex === index) {\n            return <div key={index}>{tab.children}</div>;\n        } else {\n            return (\n                <div key={index} style={{ display: \"none\" }}>\n                    {tab.children}\n                </div>\n            );\n        }\n    });\n\n    const context: TabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.id === props.id);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id === id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <div className={classNames(\"webiny-ui-tabs\", props.className)}>\n            {tabBar}\n            <div className={\"webiny-ui-tabs__content mdc-tab-content\"}>{content}</div>\n            <TabsContext.Provider value={context}>{props.children}</TabsContext.Provider>\n        </div>\n    );\n};\n\nTabs.displayName = \"Tabs\";\n"],"mappings":"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","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 type { PropsWithChildren } from \"react\";\nimport React, { createContext, useCallback, useMemo, useState } from \"react\";\nimport { Tabs as AdminTabs } from \"@webiny/admin-ui\";\nimport type { TabProps } from \"./Tab.js\";\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): void => {\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.d.ts

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

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.js";
+export * from "./Tab.js";
 
 //# 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.js\";\nexport * from \"./Tab.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/Tags/Tags.d.ts

@@ -1,10 +1,11 @@
+import type { FocusEventHandler } from "react";
 import React from "react";
-import { FormComponentProps } from "../types";
+import type { FormComponentProps } from "../types.js";
 interface TagsProps extends FormComponentProps {
     /**
      * Component label.
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Are input and chosen tags disabled?
      */
@@ -16,7 +17,7 @@ interface TagsProps extends FormComponentProps {
     /**
      * Description beneath the input.
      */
-    description?: string;
+    description?: string | React.ReactNode;
     /**
      * A className for the root element.
      */
@@ -32,7 +33,7 @@ interface TagsProps extends FormComponentProps {
     /**
      * Callback that gets executed when the input is focused.
      */
-    onFocus?: (ev: Event) => void;
+    onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
     /**
      * Automatically focus on the tags input.
      */
@@ -42,5 +43,9 @@ interface TagsProps extends FormComponentProps {
      */
     protectedTags?: string[];
 }
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Tags` component from the `@webiny/admin-ui` package instead.
+ */
 export declare const Tags: (props: TagsProps) => React.JSX.Element;
 export default Tags;