@plesk/ui-library 3.28.3 → 3.29.1

package/README.md

@@ -33,3 +33,18 @@ function App() {
 
 export default App;
 ```
+
+## Development
+
+Sometimes you need to fix UI Library bug that fires in your project using UI Library.
+
+There is a way to test dev version of the UI Library with your project. You need to use `yarn link` command,
+but there are some details.
+
+* First, you need to run `yarn link` in your UI Library working copy root directory.
+* Then, you need to run `yarn link @plesk/ui-library` in your project working copy root directory.
+* Third. There is a bug with a React library that makes us to do additional steps. Run `yarn link` in your
+project's `node_modules/react` and `node_modules/react-dom` directories.
+* Then, run `yarn link react` and `yarn link react-dom` in your UI Library working copy root directory.
+
+So, in this setup, your project will use the dev copy of UI Library. And UI Library will use React from your project.

package/cjs/components/ContentLoader/IconsLoader.js

@@ -21,10 +21,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 const DEFAULT_ICONS = ['clock', 'emoticon-smile', 'rocket', 'sand-clock', 'sleep', 'web', 'star'];
 
-const useIcon = (icons, initialCursor, isSync) => {
+const useIconCursor = (icons, initialCursor, isSync) => {
   const targetRef = (0, _react.useRef)(null);
   const [cursor, setCursor] = (0, _react.useState)(initialCursor);
   (0, _react.useEffect)(() => {
@@ -46,50 +46,58 @@ const useIcon = (icons, initialCursor, isSync) => {
       }
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [icons]);
-  return {
-    name: icons[cursor],
-    targetRef
-  };
+  return [icons[cursor], targetRef];
 };
 
 const IconsLoader = ({
   baseClassName = `${_constants.CLS_PREFIX}icons-loader`,
   className,
   icons,
+  size,
+  style,
   ...props
 }) => {
-  const syncRef = (0, _react.useRef)(0);
-  icons = icons && icons.length > 0 ? icons : DEFAULT_ICONS;
-  const icon1 = useIcon(icons, 0, () => {
-    if (syncRef.current === 0) {
-      syncRef.current += 1;
+  var _icons;
+
+  const syncRef = (0, _react.useRef)('icon1');
+
+  if (!((_icons = icons) !== null && _icons !== void 0 && _icons.length)) {
+    icons = DEFAULT_ICONS;
+  } else if (icons.length === 1) {
+    icons = [icons[0], icons[0]];
+  }
+
+  const [icon1, icon1Ref] = useIconCursor(icons, 0, () => {
+    if (syncRef.current === 'icon1') {
+      syncRef.current = 'icon2';
       return true;
     }
 
     return false;
   });
-  const icon2 = useIcon(icons, 1, () => {
-    if (syncRef.current === 1) {
-      syncRef.current -= 1;
+  const [icon2, icon2Ref] = useIconCursor(icons, 1, () => {
+    if (syncRef.current === 'icon2') {
+      syncRef.current = 'icon1';
       return true;
     }
 
     return false;
   });
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    className: (0, _classnames.default)(baseClassName, className)
+    className: (0, _classnames.default)(baseClassName, className),
+    style: { ...style,
+      ['--icons-loader-size']: size ? size : undefined
+    }
   }, props), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${baseClassName}__icon`, `${baseClassName}__icon--1`),
-    ref: icon1.targetRef
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: icon1.name,
-    size: "64"
+    ref: icon1Ref
+  }, _Icon.default.create(icon1, {
+    size: size ? size : '64'
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${baseClassName}__icon`, `${baseClassName}__icon--2`),
-    ref: icon2.targetRef
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: icon2.name,
-    size: "64"
+    ref: icon2Ref
+  }, _Icon.default.create(icon2, {
+    size: size ? size : '64'
   })));
 };
 

package/cjs/components/FormField/FormField.js

@@ -225,7 +225,7 @@ class FormField extends _react.Component {
         multi
       } = this.props;
 
-      if (!description || multi && this.fieldApi.getValue().length - 1 > index) {
+      if (!description || multi && getArrayHelper(this.fieldApi.getValue()).length - 1 > index) {
         return null;
       }
 

package/cjs/components/Toast/Toast.js

@@ -23,11 +23,13 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _intentIconMap = require("../intentIconMap");
 
+var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 const AUTOCLOSE_TIMEOUT = 6000;
 
 class Toast extends _react.Component {
@@ -72,6 +74,10 @@ class Toast extends _react.Component {
       className,
       message,
       intent,
+      accent,
+      icon = intent && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        name: _intentIconMap.intentIconMap[intent]
+      }),
       onClose,
       closable = true,
       autoClosable,
@@ -79,18 +85,19 @@ class Toast extends _react.Component {
       innerRef,
       ...props
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+
+    const result = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
       tabIndex: 0,
-      className: (0, _classnames.default)(baseClassName, intent && `${baseClassName}--${intent}`, className)
+      className: (0, _classnames.default)(baseClassName, intent && `${baseClassName}--${intent}`, accent && `${baseClassName}--accent`, className)
     }, props, {
       ref: innerRef
-    }), intent ? /*#__PURE__*/_react.default.createElement("span", {
+    }), icon ? /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__icon`
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      name: _intentIconMap.intentIconMap[intent]
-    })) : null, /*#__PURE__*/_react.default.createElement("span", {
+    }, _Icon.default.create(icon, {
+      intent
+    })) : null, /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__content`
-    }, message), closable ? /*#__PURE__*/_react.default.createElement("span", {
+    }, message), closable ? /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__action`
     }, /*#__PURE__*/_react.default.createElement(_Button.default, {
       ghost: true,
@@ -101,6 +108,14 @@ class Toast extends _react.Component {
       className: `${baseClassName}__close`,
       onClick: onClose
     })) : null);
+
+    if (accent) {
+      return result;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_OnDarkContext.default.Provider, {
+      value: true
+    }, result);
   }
 
 }

package/cjs/components/Toaster/Toaster.js

@@ -25,8 +25,6 @@ var _Toast = _interopRequireDefault(require("../Toast"));
 
 var _Layer = _interopRequireDefault(require("../Layer"));
 
-var _OnDarkContext = _interopRequireDefault(require("../OnDarkContext"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -66,6 +64,8 @@ class Toaster extends _react.Component {
    * Add a new toast
    *
    * `intent` - Visual intent color to apply to component. (Type: `oneOf` 'info', 'success', 'warning', 'danger'. *Required*.)<br>
+   * `accent` - Contrast (light) version of the component. (Type: `boolean`. Default: 'undefined'.)<br>
+   * `icon` - Name of icon or [Icon](#!/Icon) component. (Type: `oneOfType` 'string', 'object', 'element'. Default: `undefined`.)<br>
    * `message` - Message to display in the body of the toast. (Type: `any`. Default: `undefined`.)<br>
    * `onClose` - onClose handler. (Type: `func`. Default: `undefined`.)<br>
    * `closable` - Show close control (cross mark). (Type: `boolean`. Default: `true`.)<br>
@@ -155,9 +155,7 @@ class Toaster extends _react.Component {
       stack.reverse();
     }
 
-    return /*#__PURE__*/_react.default.createElement(_OnDarkContext.default.Provider, {
-      value: true
-    }, /*#__PURE__*/_react.default.createElement(_Layer.default, {
+    return /*#__PURE__*/_react.default.createElement(_Layer.default, {
       level: _constants.Z_INDEX_TOASTER
     }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
       className: (0, _classnames.default)(baseClassName, {
@@ -203,7 +201,7 @@ class Toaster extends _react.Component {
         },
         innerRef: toastRef
       })));
-    })))));
+    }))));
   }
 
 }

package/cjs/index.js

@@ -54,6 +54,6 @@ Object.keys(_components).forEach(function (key) {
   });
 });
 // Copyright 1999-2018. Plesk International GmbH. All rights reserved.
-const version = "3.28.3";
+const version = "3.29.1";
 exports.version = version;
 (0, _svg4everybody.default)();