@webiny/ui 5.43.2 → 6.0.0-alpha.0

package/CodeEditor/CodeEditor.d.ts

@@ -1,11 +1,5 @@
 import React from "react";
 import { FormComponentProps } from "../types";
-import "brace/mode/html";
-import "brace/mode/json";
-import "brace/ext/searchbox";
-import "brace/theme/github";
-import "brace/theme/twilight";
-import "brace/theme/chrome";
 interface Props extends FormComponentProps {
     mode: string;
     theme: string;
@@ -13,10 +7,8 @@ interface Props extends FormComponentProps {
     description?: React.ReactNode;
 }
 /**
- * CodeEditor component can be used to store simple boolean values.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `CodeEditor` component props from the `@webiny/admin-ui` package instead.
  */
-declare class CodeEditor extends React.Component<Props> {
-    onChange: (value: string) => void;
-    render(): React.JSX.Element;
-}
-export { CodeEditor };
+export declare const CodeEditor: ({ readOnly, ...props }: Props) => React.JSX.Element;
+export {};

package/CodeEditor/CodeEditor.js

@@ -1,86 +1,16 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CodeEditor = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-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 _emotion = require("emotion");
-var _reactAce = _interopRequireDefault(require("react-ace"));
-require("brace/mode/html");
-require("brace/mode/json");
-require("brace/ext/searchbox");
-require("brace/theme/github");
-require("brace/theme/twilight");
-require("brace/theme/chrome");
-var _FormElementMessage = require("../FormElementMessage");
-var _excluded = ["value", "description", "validation", "theme"]; // Modes
-// Extensions
-// Themes
-/**
- * Controls the helper text below the checkbox.
- * @type {string}
- */
-var webinyCheckboxHelperText = (0, _emotion.css)({}, {
-  "&.mdc-text-field-helper-text": {
-    paddingTop: 5
-  }
-});
+import React from "react";
+import { CodeEditor as AdminCodeEditor } from "@webiny/admin-ui";
 /**
- * CodeEditor component can be used to store simple boolean values.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `CodeEditor` component props from the `@webiny/admin-ui` package instead.
  */
-var CodeEditor = exports.CodeEditor = /*#__PURE__*/function (_React$Component) {
-  function CodeEditor() {
-    var _this;
-    (0, _classCallCheck2.default)(this, CodeEditor);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2.default)(this, CodeEditor, [].concat(args));
-    (0, _defineProperty2.default)(_this, "onChange", function (value) {
-      _this.props.onChange && _this.props.onChange(value);
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(CodeEditor, _React$Component);
-  return (0, _createClass2.default)(CodeEditor, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        value = _this$props.value,
-        description = _this$props.description,
-        validation = _this$props.validation,
-        _this$props$theme = _this$props.theme,
-        theme = _this$props$theme === void 0 ? "github" : _this$props$theme,
-        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var _ref = validation || {},
-        validationIsValid = _ref.isValid,
-        validationMessage = _ref.message;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactAce.default, Object.assign({
-        value: value ? String(value) : "",
-        theme: theme,
-        onChange: this.onChange
-      }, rest, {
-        width: "100%",
-        className: "mdc-text-field",
-        editorProps: {
-          $blockScrolling: Infinity // Suppresses scrolling warning in console.
-        }
-      })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        error: true,
-        className: webinyCheckboxHelperText
-      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        className: webinyCheckboxHelperText
-      }, description));
-    }
-  }]);
-}(_react.default.Component);
+export const CodeEditor = ({
+  readOnly,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(AdminCodeEditor, Object.assign({
+    disabled: readOnly
+  }, props));
+};
 
 //# sourceMappingURL=CodeEditor.js.map

package/CodeEditor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_reactAce","_FormElementMessage","_excluded","webinyCheckboxHelperText","css","paddingTop","CodeEditor","exports","_React$Component","_this","_classCallCheck2","default","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","value","props","onChange","_inherits2","_createClass2","key","render","_this$props","description","validation","_this$props$theme","theme","rest","_objectWithoutProperties2","_ref","validationIsValid","isValid","validationMessage","message","createElement","Fragment","Object","assign","String","width","className","editorProps","$blockScrolling","Infinity","FormElementMessage","error","React","Component"],"sources":["CodeEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\n\nimport AceEditor from \"react-ace\";\n// Modes\nimport \"brace/mode/html\";\nimport \"brace/mode/json\";\n// Extensions\nimport \"brace/ext/searchbox\";\n// Themes\nimport \"brace/theme/github\";\nimport \"brace/theme/twilight\";\nimport \"brace/theme/chrome\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst webinyCheckboxHelperText = css(\n    {},\n    {\n        \"&.mdc-text-field-helper-text\": {\n            paddingTop: 5\n        }\n    }\n);\n\ninterface Props extends FormComponentProps {\n    mode: string;\n\n    theme: string;\n\n    readOnly?: boolean;\n\n    // Description beneath the input.\n    description?: React.ReactNode;\n}\n\n/**\n * CodeEditor component can be used to store simple boolean values.\n */\nclass CodeEditor extends React.Component<Props> {\n    onChange = (value: string) => {\n        this.props.onChange && this.props.onChange(value);\n    };\n\n    public override render() {\n        const { value, description, validation, theme = \"github\", ...rest } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <AceEditor\n                    value={value ? String(value) : \"\"}\n                    theme={theme}\n                    onChange={this.onChange}\n                    {...rest}\n                    width=\"100%\"\n                    className={\"mdc-text-field\"}\n                    editorProps={{\n                        $blockScrolling: Infinity // Suppresses scrolling warning in console.\n                    }}\n                />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error className={webinyCheckboxHelperText}>\n                        {validationMessage}\n                    </FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage className={webinyCheckboxHelperText}>\n                        {description}\n                    </FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { CodeEditor };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","CodeEditor","AdminCodeEditor","readOnly","props","createElement","Object","assign","disabled"],"sources":["CodeEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { CodeEditor as AdminCodeEditor } from \"@webiny/admin-ui\";\nimport { FormComponentProps } from \"~/types\";\n\ninterface Props extends FormComponentProps {\n    mode: string;\n\n    theme: string;\n\n    readOnly?: boolean;\n\n    // Description beneath the input.\n    description?: React.ReactNode;\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please find out the new `CodeEditor` component props from the `@webiny/admin-ui` package instead.\n */\nexport const CodeEditor = ({ readOnly, ...props }: Props) => {\n    return <AdminCodeEditor disabled={readOnly} {...props} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,IAAIC,eAAe,QAAQ,kBAAkB;AAchE;AACA;AACA;AACA;AACA,OAAO,MAAMD,UAAU,GAAGA,CAAC;EAAEE,QAAQ;EAAE,GAAGC;AAAa,CAAC,KAAK;EACzD,oBAAOJ,KAAA,CAAAK,aAAA,CAACH,eAAe,EAAAI,MAAA,CAAAC,MAAA;IAACC,QAAQ,EAAEL;EAAS,GAAKC,KAAK,CAAG,CAAC;AAC7D,CAAC","ignoreList":[]}

package/CodeEditor/index.js

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

package/CodeEditor/index.js.map

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

package/ColorPicker/ColorPicker.d.ts

@@ -1,29 +1,14 @@
 import React from "react";
-import { ColorState } from "react-color";
 import { FormComponentProps } from "../types";
-interface ColorPickerState {
-    showColorPicker: boolean;
-}
-interface ColorPickerProps extends FormComponentProps {
+interface ColorPickerProps extends FormComponentProps<string> {
     label?: string;
     disable?: boolean;
     description?: string;
     align?: "left" | "right";
 }
 /**
- * Use ColorPicker 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 `ColorPicker` component from the `@webiny/admin-ui` package instead.
  */
-declare class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {
-    colorPickerRef: React.RefObject<HTMLDivElement>;
-    state: {
-        showColorPicker: boolean;
-    };
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleClickOutside: (event: MouseEvent) => void;
-    handleClick: (e: React.MouseEvent) => void;
-    handleClose: (e: React.MouseEvent) => void;
-    handleChange: (color: ColorState) => void;
-    render(): React.JSX.Element;
-}
+declare const ColorPicker: ({ value, onChange, align: originalAlign, ...props }: ColorPickerProps) => React.JSX.Element;
 export { ColorPicker };

package/ColorPicker/ColorPicker.js

@@ -1,156 +1,31 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ColorPicker = void 0;
-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 _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = _interopRequireDefault(require("react"));
-var _reactColor = require("react-color");
-var _emotion = require("emotion");
-var _FormElementMessage = require("../FormElementMessage");
-var _classnames = _interopRequireDefault(require("classnames"));
-var classes = {
-  label: (0, _emotion.css)({
-    marginBottom: "10px !important"
-  }),
-  color: (0, _emotion.css)({
-    width: "36px",
-    minHeight: "14px",
-    height: "inherit",
-    borderRadius: "2px"
-  }),
-  swatch: (0, _emotion.css)({
-    padding: "5px",
-    background: "#fff",
-    borderRadius: "1px",
-    boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
-    display: "inline-block",
-    cursor: "pointer"
-  }),
-  classNames: (0, _emotion.css)({
-    position: "fixed",
-    top: "0px",
-    right: "0px",
-    bottom: "0px",
-    left: "0px"
-  }),
-  disable: (0, _emotion.css)({
-    opacity: 0.7,
-    pointerEvents: "none"
-  })
-};
-var Popover = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "e13tf12v0"
-} : {
-  target: "e13tf12v0",
-  label: "Popover"
-})("position:absolute;z-index:2;right:", function (_ref) {
-  var align = _ref.align;
-  return align === "right" ? "10px" : "auto";
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbG9yUGlja2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QzhDIiwiZmlsZSI6IkNvbG9yUGlja2VyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IFNrZXRjaFBpY2tlciwgQ29sb3JTdGF0ZSB9IGZyb20gXCJyZWFjdC1jb2xvclwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcImVtb3Rpb25cIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgRm9ybUNvbXBvbmVudFByb3BzIH0gZnJvbSBcIn4vdHlwZXNcIjtcbmltcG9ydCB7IEZvcm1FbGVtZW50TWVzc2FnZSB9IGZyb20gXCJ+L0Zvcm1FbGVtZW50TWVzc2FnZVwiO1xuaW1wb3J0IGNsYXNzTmFtZXMgZnJvbSBcImNsYXNzbmFtZXNcIjtcblxuY29uc3QgY2xhc3NlcyA9IHtcbiAgICBsYWJlbDogY3NzKHtcbiAgICAgICAgbWFyZ2luQm90dG9tOiBcIjEwcHggIWltcG9ydGFudFwiXG4gICAgfSksXG4gICAgY29sb3I6IGNzcyh7XG4gICAgICAgIHdpZHRoOiBcIjM2cHhcIixcbiAgICAgICAgbWluSGVpZ2h0OiBcIjE0cHhcIixcbiAgICAgICAgaGVpZ2h0OiBcImluaGVyaXRcIixcbiAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjJweFwiXG4gICAgfSksXG4gICAgc3dhdGNoOiBjc3Moe1xuICAgICAgICBwYWRkaW5nOiBcIjVweFwiLFxuICAgICAgICBiYWNrZ3JvdW5kOiBcIiNmZmZcIixcbiAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjFweFwiLFxuICAgICAgICBib3hTaGFkb3c6IFwiMCAwIDAgMXB4IHJnYmEoMCwwLDAsLjEpXCIsXG4gICAgICAgIGRpc3BsYXk6IFwiaW5saW5lLWJsb2NrXCIsXG4gICAgICAgIGN1cnNvcjogXCJwb2ludGVyXCJcbiAgICB9KSxcbiAgICBjbGFzc05hbWVzOiBjc3Moe1xuICAgICAgICBwb3NpdGlvbjogXCJmaXhlZFwiLFxuICAgICAgICB0b3A6IFwiMHB4XCIsXG4gICAgICAgIHJpZ2h0OiBcIjBweFwiLFxuICAgICAgICBib3R0b206IFwiMHB4XCIsXG4gICAgICAgIGxlZnQ6IFwiMHB4XCJcbiAgICB9KSxcbiAgICBkaXNhYmxlOiBjc3Moe1xuICAgICAgICBvcGFjaXR5OiAwLjcsXG4gICAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiXG4gICAgfSlcbn07XG5cbmNvbnN0IFBvcG92ZXIgPSBzdHlsZWQuZGl2PHsgYWxpZ24/OiBzdHJpbmcgfT5gXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHotaW5kZXg6IDI7XG4gICAgcmlnaHQ6ICR7KHsgYWxpZ24gfSkgPT4gKGFsaWduID09PSBcInJpZ2h0XCIgPyBcIjEwcHhcIiA6IFwiYXV0b1wiKX07XG5gO1xuXG5pbnRlcmZhY2UgQ29sb3JQaWNrZXJTdGF0ZSB7XG4gICAgc2hvd0NvbG9yUGlja2VyOiBib29sZWFuO1xufVxuXG5pbnRlcmZhY2UgQ29sb3JQaWNrZXJQcm9wcyBleHRlbmRzIEZvcm1Db21wb25lbnRQcm9wcyB7XG4gICAgLy8gQ29tcG9uZW50IGxhYmVsLlxuICAgIGxhYmVsPzogc3RyaW5nO1xuXG4gICAgLy8gSXMgY29sb3IgcGlja2VyIGRpc2FibGVkP1xuICAgIGRpc2FibGU/OiBib29sZWFuO1xuXG4gICAgLy8gRGVzY3JpcHRpb24gYmVuZWF0aCB0aGUgY29sb3IgcGlja2VyLlxuICAgIGRlc2NyaXB0aW9uPzogc3RyaW5nO1xuXG4gICAgLy8gUG9wb3ZlciBhbGlnbm1lbnQgKGRlZmF1bHQgaXMgYGxlZnRgKS5cbiAgICBhbGlnbj86IFwibGVmdFwiIHwgXCJyaWdodFwiO1xufVxuXG4vKipcbiAqIFVzZSBDb2xvclBpY2tlciBjb21wb25lbnQgdG8gZGlzcGxheSBhIGxpc3Qgb2YgY2hvaWNlcywgb25jZSB0aGUgaGFuZGxlciBpcyB0cmlnZ2VyZWQuXG4gKi9cbmNsYXNzIENvbG9yUGlja2VyIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50PENvbG9yUGlja2VyUHJvcHMsIENvbG9yUGlja2VyU3RhdGU+IHtcbiAgICBjb2xvclBpY2tlclJlZiA9IFJlYWN0LmNyZWF0ZVJlZjxIVE1MRGl2RWxlbWVudD4oKTtcblxuICAgIHB1YmxpYyBvdmVycmlkZSBzdGF0ZSA9IHtcbiAgICAgICAgc2hvd0NvbG9yUGlja2VyOiBmYWxzZVxuICAgIH07XG5cbiAgICBwdWJsaWMgb3ZlcnJpZGUgY29tcG9uZW50RGlkTW91bnQoKSB7XG4gICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoXCJjbGlja1wiLCB0aGlzLmhhbmRsZUNsaWNrT3V0c2lkZSk7XG4gICAgfVxuXG4gICAgcHVibGljIG92ZXJyaWRlIGNvbXBvbmVudFdpbGxVbm1vdW50KCkge1xuICAgICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKFwiY2xpY2tcIiwgdGhpcy5oYW5kbGVDbGlja091dHNpZGUpO1xuICAgIH1cblxuICAgIGhhbmRsZUNsaWNrT3V0c2lkZSA9IChldmVudDogTW91c2VFdmVudCkgPT4ge1xuICAgICAgICBpZiAoXG4gICAgICAgICAgICB0aGlzLmNvbG9yUGlja2VyUmVmLmN1cnJlbnQgJiZcbiAgICAgICAgICAgICF0aGlzLmNvbG9yUGlja2VyUmVmLmN1cnJlbnQuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpXG4gICAgICAgICkge1xuICAgICAgICAgICAgdGhpcy5zZXRTdGF0ZSh7IHNob3dDb2xvclBpY2tlcjogZmFsc2UgfSk7XG4gICAgICAgIH1cbiAgICB9O1xuXG4gICAgaGFuZGxlQ2xpY2sgPSAoZTogUmVhY3QuTW91c2VFdmVudCkgPT4ge1xuICAgICAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgICB0aGlzLnNldFN0YXRlKHsgc2hvd0NvbG9yUGlja2VyOiAhdGhpcy5zdGF0ZS5zaG93Q29sb3JQaWNrZXIgfSk7XG4gICAgfTtcblxuICAgIGhhbmRsZUNsb3NlID0gKGU6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICAgICAgZS5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgICAgdGhpcy5zZXRTdGF0ZSh7IHNob3dDb2xvclBpY2tlcjogZmFsc2UgfSk7XG4gICAgfTtcblxuICAgIGhhbmRsZUNoYW5nZSA9IChjb2xvcjogQ29sb3JTdGF0ZSkgPT4ge1xuICAgICAgICBjb25zdCB7IG9uQ2hhbmdlIH0gPSB0aGlzLnByb3BzO1xuICAgICAgICBvbkNoYW5nZSAmJiBvbkNoYW5nZShjb2xvci5oZXgpO1xuICAgIH07XG5cbiAgICBwdWJsaWMgb3ZlcnJpZGUgcmVuZGVyKCkge1xuICAgICAgICBjb25zdCB7IHZhbHVlLCBsYWJlbCwgZGlzYWJsZSwgZGVzY3JpcHRpb24sIHZhbGlkYXRpb24sIGFsaWduIH0gPSB0aGlzLnByb3BzO1xuXG4gICAgICAgIGxldCBiYWNrZ3JvdW5kQ29sb3JTdHlsZSA9IHt9O1xuICAgICAgICBpZiAodmFsdWUpIHtcbiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvclN0eWxlID0ge1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IGAke3ZhbHVlfWBcbiAgICAgICAgICAgIH07XG4gICAgICAgIH1cblxuICAgICAgICBjb25zdCB7IGlzVmFsaWQ6IHZhbGlkYXRpb25Jc1ZhbGlkLCBtZXNzYWdlOiB2YWxpZGF0aW9uTWVzc2FnZSB9ID0gdmFsaWRhdGlvbiB8fCB7fTtcblxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgIHJlZj17dGhpcy5jb2xvclBpY2tlclJlZn1cbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXMoeyBbY2xhc3Nlcy5kaXNhYmxlXTogZGlzYWJsZSB9KX1cbiAgICAgICAgICAgICAgICBkYXRhLXJvbGU9e1wiY29sb3ItcGlja2VyLWNvbnRhaW5lclwifVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtsYWJlbCAmJiAoXG4gICAgICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lcyhcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBcIm1kYy10ZXh0LWZpZWxkLWhlbHBlci10ZXh0IG1kYy10ZXh0LWZpZWxkLWhlbHBlci10ZXh0LS1wZXJzaXN0ZW50XCIsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3Nlcy5sYWJlbFxuICAgICAgICAgICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgICAge2xhYmVsfVxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICApfVxuXG4gICAgICAgICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc2VzLnN3YXRjaH1cbiAgICAgICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9e3RoaXMuaGFuZGxlQ2xpY2t9XG4gICAgICAgICAgICAgICAgICAgICAgICBkYXRhLXJvbGU9e1wiY29sb3ItcGlja2VyLXN3YXRjaFwifVxuICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y2xhc3Nlcy5jb2xvcn0gc3R5bGU9e2JhY2tncm91bmRDb2xvclN0eWxlfSAvPlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAge3RoaXMuc3RhdGUuc2hvd0NvbG9yUGlja2VyID8gKFxuICAgICAgICAgICAgICAgICAgICAgICAgPFBvcG92ZXIgYWxpZ249e2FsaWdufT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y2xhc3Nlcy5jbGFzc05hbWVzfSBvbkNsaWNrPXt0aGlzLmhhbmRsZUNsb3NlfSAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxTa2V0Y2hQaWNrZXIgY29sb3I9e3ZhbHVlIHx8IFwiXCJ9IG9uQ2hhbmdlPXt0aGlzLmhhbmRsZUNoYW5nZX0gLz5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvUG9wb3Zlcj5cbiAgICAgICAgICAgICAgICAgICAgKSA6IG51bGx9XG4gICAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgICB7dmFsaWRhdGlvbklzVmFsaWQgPT09IGZhbHNlICYmIChcbiAgICAgICAgICAgICAgICAgICAgPEZvcm1FbGVtZW50TWVzc2FnZSBlcnJvcj57dmFsaWRhdGlvbk1lc3NhZ2V9PC9Gb3JtRWxlbWVudE1lc3NhZ2U+XG4gICAgICAgICAgICAgICAgKX1cblxuICAgICAgICAgICAgICAgIHt2YWxpZGF0aW9uSXNWYWxpZCAhPT0gZmFsc2UgJiYgZGVzY3JpcHRpb24gJiYgKFxuICAgICAgICAgICAgICAgICAgICA8Rm9ybUVsZW1lbnRNZXNzYWdlPntkZXNjcmlwdGlvbn08L0Zvcm1FbGVtZW50TWVzc2FnZT5cbiAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICk7XG4gICAgfVxufVxuXG5leHBvcnQgeyBDb2xvclBpY2tlciB9O1xuIl19 */"));
+import React, { useCallback, useMemo } from "react";
+import { ColorPicker as AdminColorPicker } from "@webiny/admin-ui";
 /**
- * Use ColorPicker 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 `ColorPicker` component from the `@webiny/admin-ui` package instead.
  */
-var ColorPicker = exports.ColorPicker = /*#__PURE__*/function (_React$Component) {
-  function ColorPicker() {
-    var _this;
-    (0, _classCallCheck2.default)(this, ColorPicker);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2.default)(this, ColorPicker, [].concat(args));
-    (0, _defineProperty2.default)(_this, "colorPickerRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)(_this, "state", {
-      showColorPicker: false
-    });
-    (0, _defineProperty2.default)(_this, "handleClickOutside", function (event) {
-      if (_this.colorPickerRef.current && !_this.colorPickerRef.current.contains(event.target)) {
-        _this.setState({
-          showColorPicker: false
-        });
-      }
-    });
-    (0, _defineProperty2.default)(_this, "handleClick", function (e) {
-      e.stopPropagation();
-      _this.setState({
-        showColorPicker: !_this.state.showColorPicker
-      });
-    });
-    (0, _defineProperty2.default)(_this, "handleClose", function (e) {
-      e.stopPropagation();
-      _this.setState({
-        showColorPicker: false
-      });
-    });
-    (0, _defineProperty2.default)(_this, "handleChange", function (color) {
-      var onChange = _this.props.onChange;
-      onChange && onChange(color.hex);
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(ColorPicker, _React$Component);
-  return (0, _createClass2.default)(ColorPicker, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener("click", this.handleClickOutside);
+const ColorPicker = ({
+  value,
+  onChange,
+  align: originalAlign,
+  ...props
+}) => {
+  const onValueChange = useCallback(value => onChange && onChange(value), [onChange]);
+  const align = useMemo(() => {
+    if (!originalAlign) {
+      return undefined;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener("click", this.handleClickOutside);
+    if (originalAlign === "right") {
+      return "end";
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        value = _this$props.value,
-        label = _this$props.label,
-        disable = _this$props.disable,
-        description = _this$props.description,
-        validation = _this$props.validation,
-        align = _this$props.align;
-      var backgroundColorStyle = {};
-      if (value) {
-        backgroundColorStyle = {
-          background: "".concat(value)
-        };
-      }
-      var _ref2 = validation || {},
-        validationIsValid = _ref2.isValid,
-        validationMessage = _ref2.message;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        ref: this.colorPickerRef,
-        className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.disable, disable)),
-        "data-role": "color-picker-container"
-      }, label && /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)("mdc-text-field-helper-text mdc-text-field-helper-text--persistent", classes.label)
-      }, label), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-        className: classes.swatch,
-        onClick: this.handleClick,
-        "data-role": "color-picker-swatch"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: classes.color,
-        style: backgroundColorStyle
-      })), this.state.showColorPicker ? /*#__PURE__*/_react.default.createElement(Popover, {
-        align: align
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: classes.classNames,
-        onClick: this.handleClose
-      }), /*#__PURE__*/_react.default.createElement(_reactColor.SketchPicker, {
-        color: value || "",
-        onChange: this.handleChange
-      })) : null), 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);
+    return "start";
+  }, [originalAlign]);
+  return /*#__PURE__*/React.createElement(AdminColorPicker, Object.assign({}, props, {
+    value: value,
+    onChange: onValueChange,
+    align: align
+  }));
+};
+export { ColorPicker };
 
 //# sourceMappingURL=ColorPicker.js.map

package/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactColor","_emotion","_FormElementMessage","_classnames","classes","label","css","marginBottom","color","width","minHeight","height","borderRadius","swatch","padding","background","boxShadow","display","cursor","classNames","position","top","right","bottom","left","disable","opacity","pointerEvents","Popover","_base","default","process","env","NODE_ENV","target","_ref","align","ColorPicker","exports","_React$Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","React","createRef","showColorPicker","event","colorPickerRef","current","contains","setState","e","stopPropagation","state","onChange","props","hex","_inherits2","_createClass2","key","value","componentDidMount","document","addEventListener","handleClickOutside","componentWillUnmount","removeEventListener","render","_this$props","description","validation","backgroundColorStyle","_ref2","validationIsValid","isValid","validationMessage","message","createElement","ref","className","onClick","handleClick","style","handleClose","SketchPicker","handleChange","FormElementMessage","error","Component"],"sources":["ColorPicker.tsx"],"sourcesContent":["import React from \"react\";\nimport { SketchPicker, ColorState } from \"react-color\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { FormComponentProps } from \"~/types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport classNames from \"classnames\";\n\nconst classes = {\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    color: css({\n        width: \"36px\",\n        minHeight: \"14px\",\n        height: \"inherit\",\n        borderRadius: \"2px\"\n    }),\n    swatch: css({\n        padding: \"5px\",\n        background: \"#fff\",\n        borderRadius: \"1px\",\n        boxShadow: \"0 0 0 1px rgba(0,0,0,.1)\",\n        display: \"inline-block\",\n        cursor: \"pointer\"\n    }),\n    classNames: css({\n        position: \"fixed\",\n        top: \"0px\",\n        right: \"0px\",\n        bottom: \"0px\",\n        left: \"0px\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\nconst Popover = styled.div<{ align?: string }>`\n    position: absolute;\n    z-index: 2;\n    right: ${({ align }) => (align === \"right\" ? \"10px\" : \"auto\")};\n`;\n\ninterface ColorPickerState {\n    showColorPicker: boolean;\n}\n\ninterface ColorPickerProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is color picker disabled?\n    disable?: boolean;\n\n    // Description beneath the color picker.\n    description?: string;\n\n    // Popover alignment (default is `left`).\n    align?: \"left\" | \"right\";\n}\n\n/**\n * Use ColorPicker component to display a list of choices, once the handler is triggered.\n */\nclass ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {\n    colorPickerRef = React.createRef<HTMLDivElement>();\n\n    public override state = {\n        showColorPicker: false\n    };\n\n    public override componentDidMount() {\n        document.addEventListener(\"click\", this.handleClickOutside);\n    }\n\n    public override componentWillUnmount() {\n        document.removeEventListener(\"click\", this.handleClickOutside);\n    }\n\n    handleClickOutside = (event: MouseEvent) => {\n        if (\n            this.colorPickerRef.current &&\n            !this.colorPickerRef.current.contains(event.target as Node)\n        ) {\n            this.setState({ showColorPicker: false });\n        }\n    };\n\n    handleClick = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        this.setState({ showColorPicker: !this.state.showColorPicker });\n    };\n\n    handleClose = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        this.setState({ showColorPicker: false });\n    };\n\n    handleChange = (color: ColorState) => {\n        const { onChange } = this.props;\n        onChange && onChange(color.hex);\n    };\n\n    public override render() {\n        const { value, label, disable, description, validation, align } = this.props;\n\n        let backgroundColorStyle = {};\n        if (value) {\n            backgroundColorStyle = {\n                background: `${value}`\n            };\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <div\n                ref={this.colorPickerRef}\n                className={classNames({ [classes.disable]: disable })}\n                data-role={\"color-picker-container\"}\n            >\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n\n                <div>\n                    <div\n                        className={classes.swatch}\n                        onClick={this.handleClick}\n                        data-role={\"color-picker-swatch\"}\n                    >\n                        <div className={classes.color} style={backgroundColorStyle} />\n                    </div>\n                    {this.state.showColorPicker ? (\n                        <Popover align={align}>\n                            <div className={classes.classNames} onClick={this.handleClose} />\n                            <SketchPicker color={value || \"\"} onChange={this.handleChange} />\n                        </Popover>\n                    ) : null}\n                </div>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { ColorPicker };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","ColorPicker","AdminColorPicker","value","onChange","align","originalAlign","props","onValueChange","undefined","createElement","Object","assign"],"sources":["ColorPicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ColorPicker as AdminColorPicker } from \"@webiny/admin-ui\";\nimport { FormComponentProps } from \"~/types\";\n\ninterface ColorPickerProps extends FormComponentProps<string> {\n    // Component label.\n    label?: string;\n\n    // Is color picker disabled?\n    disable?: boolean;\n\n    // Description beneath the color picker.\n    description?: string;\n\n    // Popover alignment (default is `left`).\n    align?: \"left\" | \"right\";\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `ColorPicker` component from the `@webiny/admin-ui` package instead.\n */\nconst ColorPicker = ({ value, onChange, align: originalAlign, ...props }: ColorPickerProps) => {\n    const onValueChange = useCallback((value: string) => onChange && onChange(value), [onChange]);\n\n    const align = useMemo(() => {\n        if (!originalAlign) {\n            return undefined;\n        }\n\n        if (originalAlign === \"right\") {\n            return \"end\";\n        }\n\n        return \"start\";\n    }, [originalAlign]);\n\n    return <AdminColorPicker {...props} value={value} onChange={onValueChange} align={align} />;\n};\n\nexport { ColorPicker };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,WAAW,IAAIC,gBAAgB,QAAQ,kBAAkB;AAiBlE;AACA;AACA;AACA;AACA,MAAMD,WAAW,GAAGA,CAAC;EAAEE,KAAK;EAAEC,QAAQ;EAAEC,KAAK,EAAEC,aAAa;EAAE,GAAGC;AAAwB,CAAC,KAAK;EAC3F,MAAMC,aAAa,GAAGT,WAAW,CAAEI,KAAa,IAAKC,QAAQ,IAAIA,QAAQ,CAACD,KAAK,CAAC,EAAE,CAACC,QAAQ,CAAC,CAAC;EAE7F,MAAMC,KAAK,GAAGL,OAAO,CAAC,MAAM;IACxB,IAAI,CAACM,aAAa,EAAE;MAChB,OAAOG,SAAS;IACpB;IAEA,IAAIH,aAAa,KAAK,OAAO,EAAE;MAC3B,OAAO,KAAK;IAChB;IAEA,OAAO,OAAO;EAClB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,oBAAOR,KAAA,CAAAY,aAAA,CAACR,gBAAgB,EAAAS,MAAA,CAAAC,MAAA,KAAKL,KAAK;IAAEJ,KAAK,EAAEA,KAAM;IAACC,QAAQ,EAAEI,aAAc;IAACH,KAAK,EAAEA;EAAM,EAAE,CAAC;AAC/F,CAAC;AAED,SAASJ,WAAW","ignoreList":[]}

package/ColorPicker/index.js

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

package/ColorPicker/index.js.map

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