@plesk/ui-library 3.28.1 → 3.29.0

package/dist/plesk-ui-library.js

@@ -1017,7 +1017,9 @@ class AutoClosable extends _react.Component {
   }
 
   componentDidMount() {
-    document.body.addEventListener('click', this.onOutsideClick);
+    document.body.addEventListener('click', this.onOutsideClick, {
+      capture: true
+    });
 
     if (this.context) {
       this.context.addChild(this);
@@ -1025,7 +1027,9 @@ class AutoClosable extends _react.Component {
   }
 
   componentWillUnmount() {
-    document.body.removeEventListener('click', this.onOutsideClick);
+    document.body.removeEventListener('click', this.onOutsideClick, {
+      capture: true
+    });
 
     if (this.context) {
       this.context.removeChild(this);
@@ -1436,7 +1440,7 @@ const renderCaret = ({
  */
 
 
-const Button = ({
+const Button = /*#__PURE__*/(0, _react.forwardRef)(({
   baseClassName,
   className,
   component: Tag,
@@ -1454,7 +1458,7 @@ const Button = ({
   arrow,
   disabled,
   ...props
-}) => {
+}, ref) => {
   const [selectedState, setSelectedState] = (0, _react.useState)(false);
 
   const handleToggle = () => {
@@ -1510,6 +1514,7 @@ const Button = ({
   const hasAriaDisabled = Tag === 'button' && disabled && tooltip;
 
   let button = /*#__PURE__*/_react.default.createElement(Tag, _extends({
+    ref: ref,
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--${size}`]: size,
       [`${baseClassName}--${intent}`]: intent && !ghost,
@@ -1549,8 +1554,8 @@ const Button = ({
   }
 
   return button;
-};
-
+});
+Button.displayName = 'Button';
 Button.propTypes = {
   /**
    * Button size.
@@ -1644,7 +1649,12 @@ Button.propTypes = {
   /**
    * @ignore
    */
-  baseClassName: _propTypes.default.string
+  baseClassName: _propTypes.default.string,
+
+  /**
+   * @ignore
+   */
+  onClick: _propTypes.default.func
 };
 Button.defaultProps = {
   size: undefined,
@@ -1662,7 +1672,8 @@ Button.defaultProps = {
   component: 'button',
   className: undefined,
   baseClassName: `${_constants.CLS_PREFIX}button`,
-  arrow: undefined
+  arrow: undefined,
+  onClick: undefined
 };
 var _default = Button;
 exports["default"] = _default;
@@ -8799,7 +8810,7 @@ class FormField extends _react.Component {
         multi
       } = this.props;
 
-      if (!description || multi && this.state.value.length - 1 > index) {
+      if (!description || multi && this.fieldApi.getValue().length - 1 > index) {
         return null;
       }
 
@@ -14791,14 +14802,9 @@ class List extends _react.Component {
 
     if (totalRows && /*#__PURE__*/(0, _react.isValidElement)(pagination)) {
       const {
-        itemsPerPageOptions = _Pagination.ITEMS_PER_PAGE_OPTIONS,
-        itemsPerPage
+        itemsPerPageOptions = _Pagination.ITEMS_PER_PAGE_OPTIONS
       } = pagination.props;
 
-      if (Number.isInteger(itemsPerPage)) {
-        return totalRows > itemsPerPage;
-      }
-
       if (Array.isArray(itemsPerPageOptions)) {
         const numericOptions = itemsPerPageOptions.filter(v => Number(v) === v);
 
@@ -17830,8 +17836,6 @@ class Overlay extends _react.Component {
       isExist: true
     }, () => {
       this.prevFocusElement = document.activeElement;
-    });
-    setTimeout(() => {
       this.setState({
         isOpened: true
       }, () => {
@@ -22045,8 +22049,8 @@ const Select = ({
 
   if (filterValue) {
     const lowerFilterValue = filterValue.toLowerCase();
-    groupFns.push(group => !!group.label && group.label.toLowerCase().indexOf(lowerFilterValue) === 0);
-    optionFns.push(option => option.label.toLowerCase().indexOf(lowerFilterValue) === 0);
+    groupFns.push(group => !!group.label && group.label.toLowerCase().includes(lowerFilterValue));
+    optionFns.push(option => option.label.toLowerCase().includes(lowerFilterValue));
   }
 
   if (groupFns.length || optionFns.length) {
@@ -22126,7 +22130,7 @@ const Select = ({
 
   const handleHighlightSearch = query => {
     const lowerQuery = query.toLowerCase();
-    const index = options.findIndex(o => !o.disabled && o.label.toLowerCase().indexOf(lowerQuery) === 0);
+    const index = options.findIndex(o => !o.disabled && o.label.toLowerCase().includes(lowerQuery));
 
     if (index !== -1) {
       setHighlightedIndex(index);
@@ -26493,6 +26497,8 @@ var _Button = _interopRequireDefault(__webpack_require__(/*! ../Button */ "./com
 
 var _intentIconMap = __webpack_require__(/*! ../intentIconMap */ "./components/intentIconMap.tsx");
 
+var _OnDarkContext = _interopRequireDefault(__webpack_require__(/*! ../OnDarkContext */ "./components/OnDarkContext/index.tsx"));
+
 __webpack_require__(/*! ./Toast.less */ "./components/Toast/Toast.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26550,6 +26556,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,
@@ -26557,18 +26567,19 @@ class Toast extends _react.Component {
       innerRef,
       ...props
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", _extends({
+
+    const result = /*#__PURE__*/_react.default.createElement("div", _extends({
       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,
@@ -26579,6 +26590,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);
   }
 
 }
@@ -26659,8 +26678,6 @@ var _Toast = _interopRequireDefault(__webpack_require__(/*! ../Toast */ "./compo
 
 var _Layer = _interopRequireDefault(__webpack_require__(/*! ../Layer */ "./components/Layer/index.tsx"));
 
-var _OnDarkContext = _interopRequireDefault(__webpack_require__(/*! ../OnDarkContext */ "./components/OnDarkContext/index.tsx"));
-
 __webpack_require__(/*! ./Toaster.less */ "./components/Toaster/Toaster.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26708,6 +26725,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>
@@ -26797,9 +26816,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", _extends({
       className: (0, _classnames.default)(baseClassName, {
@@ -26845,7 +26862,7 @@ class Toaster extends _react.Component {
         },
         innerRef: toastRef
       })));
-    })))));
+    }))));
   }
 
 }
@@ -28423,7 +28440,8 @@ var _exportNames = {
   Tour: true,
   Translate: true,
   Link: true,
-  Skeleton: true
+  Skeleton: true,
+  PortalContext: true
 };
 Object.defineProperty(exports, "Action", ({
   enumerable: true,
@@ -28767,6 +28785,12 @@ Object.defineProperty(exports, "Popover", ({
     return _Popover.default;
   }
 }));
+Object.defineProperty(exports, "PortalContext", ({
+  enumerable: true,
+  get: function () {
+    return _Layer.PortalContext;
+  }
+}));
 Object.defineProperty(exports, "Progress", ({
   enumerable: true,
   get: function () {
@@ -29290,6 +29314,8 @@ Object.keys(_Skeleton).forEach(function (key) {
   });
 });
 
+var _Layer = __webpack_require__(/*! ./Layer */ "./components/Layer/index.tsx");
+
 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; }
@@ -92580,7 +92606,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"name":"@plesk/ui-library","version":"3.28.1","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types/src","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"src/**/*.less\\"","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","create-component":"node scripts/create-component.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js --disable-host-check","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.15.4","@plesk/react-movable":"^2.6.0","@types/classnames":"2.2.7","@types/react":"16.8.13","@types/react-dom":"16.8.4","@types/react-measure":"2.0.8","@types/react-transition-group":"^4.4.4","@types/svg4everybody":"2.1.0","classnames":"^2.3.1","codemirror":"5.48.0","marked":"0.3.19","memoize-one":"^5.1.1","popper.js":"1.14.3","prop-types":"^15.7.2","react-measure":"2.3.0","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.2","scroll-into-view-if-needed":"^2.2.20","svg4everybody":"2.1.9","use-focus-visible":"^1.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.15.8","@babel/preset-env":"^7.15.8","@babel/preset-react":"^7.14.5","@babel/preset-typescript":"^7.15.0","@plesk/eslint-config":"^1.1.0","@plesk/stylelint-config":"^1.0.0","@types/buble":"^0.19.2","@types/cheerio":"^0.22.30","@types/doctrine":"^0.0.3","@types/enzyme":"^3.10.9","@types/jest":"^23.3.12","@types/webpack-dev-server":"^3.10.1","@typescript-eslint/eslint-plugin":"^2.7.0","@typescript-eslint/parser":"^2.7.0","autoprefixer":"^10.3.7","babel-loader":"^8.2.3","babel-plugin-dynamic-import-node":"^2.3.3","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^5.2.0","css-loader":"^6.4.0","css-minimizer-webpack-plugin":"^3.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.2","eslint-config-prettier":"^6.11.0","eslint-plugin-markdown":"^1.0.2","eslint-plugin-prettier":"^3.1.3","expect-puppeteer":"^4.4.0","fs-extra":"^7.0.0","html-webpack-plugin":"^5.5.0","inquirer":"^3.2.1","jest":"^24.9.0","jest-dev-server":"^4.4.0","jest-image-snapshot":"^4.0.2","less":"^4.1.2","less-loader":"^10.2.0","mini-css-extract-plugin":"^2.4.3","postcss":"^8.4.6","postcss-less":"^6.0.0","postcss-loader":"^6.2.1","postcss-logical":"^5.0.3","prettier":"^2.0.5","puppeteer-core":"13.1.3","react":"^16.8.6","react-dom":"^16.8.6","react-styleguidist":"^11.1.7","react-test-renderer":"^16.8.6","rimraf":"^3.0.1","rtlcss":"^3.4.0","style-loader":"^3.3.1","stylelint":"^14.3.0","stylelint-config-prettier":"^9.0.3","stylelint-declaration-block-no-ignored-properties":"^2.5.0","stylelint-no-unsupported-browser-features":"^5.0.2","stylelint-prettier":"^2.0.0","stylelint-use-logical-spec":"^3.2.2","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.2.4","typescript":"^3.7.2","webpack":"^5.60.0","webpack-cli":"^4.9.1"},"peerDependencies":{"react":"^16.8.6","react-dom":"^16.8.6"},"resolutions":{"@babel/types":"^7.15.6","@types/node":"^12.12.8","**/caniuse-lite":"1.0.30001307"},"browserslist":["last 2 versions",">1%","not op_mini all","not dead","not ie 11"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
+module.exports = JSON.parse('{"name":"@plesk/ui-library","version":"3.29.0","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types/src","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"src/**/*.less\\"","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","create-component":"node scripts/create-component.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js --disable-host-check","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.15.4","@plesk/react-movable":"^2.6.0","@types/classnames":"2.2.7","@types/react":"16.8.13","@types/react-dom":"16.8.4","@types/react-measure":"2.0.8","@types/react-transition-group":"^4.4.4","@types/svg4everybody":"2.1.0","classnames":"^2.3.1","codemirror":"5.48.0","marked":"0.3.19","memoize-one":"^5.1.1","popper.js":"1.14.3","prop-types":"^15.7.2","react-measure":"2.3.0","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.2","scroll-into-view-if-needed":"^2.2.20","svg4everybody":"2.1.9","use-focus-visible":"^1.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.15.8","@babel/preset-env":"^7.15.8","@babel/preset-react":"^7.14.5","@babel/preset-typescript":"^7.15.0","@plesk/eslint-config":"^1.1.0","@plesk/stylelint-config":"^1.0.0","@types/buble":"^0.19.2","@types/cheerio":"^0.22.30","@types/doctrine":"^0.0.3","@types/enzyme":"^3.10.9","@types/jest":"^23.3.12","@types/webpack-dev-server":"^3.10.1","@typescript-eslint/eslint-plugin":"^2.7.0","@typescript-eslint/parser":"^2.7.0","autoprefixer":"^10.3.7","babel-loader":"^8.2.3","babel-plugin-dynamic-import-node":"^2.3.3","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^5.2.0","css-loader":"^6.4.0","css-minimizer-webpack-plugin":"^3.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.2","eslint-config-prettier":"^6.11.0","eslint-plugin-markdown":"^1.0.2","eslint-plugin-prettier":"^3.1.3","expect-puppeteer":"^4.4.0","fs-extra":"^7.0.0","html-webpack-plugin":"^5.5.0","inquirer":"^3.2.1","jest":"^24.9.0","jest-dev-server":"^4.4.0","jest-image-snapshot":"^4.0.2","less":"^4.1.2","less-loader":"^10.2.0","mini-css-extract-plugin":"^2.4.3","postcss":"^8.4.6","postcss-less":"^6.0.0","postcss-loader":"^6.2.1","postcss-logical":"^5.0.3","prettier":"^2.0.5","puppeteer-core":"13.1.3","react":"^16.8.6","react-dom":"^16.8.6","react-styleguidist":"^11.1.7","react-test-renderer":"^16.8.6","rimraf":"^3.0.1","rtlcss":"^3.4.0","style-loader":"^3.3.1","stylelint":"^14.3.0","stylelint-config-prettier":"^9.0.3","stylelint-declaration-block-no-ignored-properties":"^2.5.0","stylelint-no-unsupported-browser-features":"^5.0.2","stylelint-prettier":"^2.0.0","stylelint-use-logical-spec":"^3.2.2","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.2.4","typescript":"^3.7.2","webpack":"^5.60.0","webpack-cli":"^4.9.1"},"peerDependencies":{"react":"^16.8.6","react-dom":"^16.8.6"},"resolutions":{"@babel/types":"^7.15.6","@types/node":"^12.12.8","**/caniuse-lite":"1.0.30001390"},"browserslist":["last 2 versions",">1%","not op_mini all","not dead","not ie 11"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
 
 /***/ }),