@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/es/components/Datagrid/useStickyColumn.js

@@ -5,161 +5,149 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import { debounce } from '../../global/js/utils/debounce.js';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
-var blockClass = "".concat(pkg.prefix, "--datagrid");
-var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
-var leftStickyStyleClassPrefix = "".concat(blockClass, "__left-sticky-column");
-var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
-var useStickyColumn = function useStickyColumn(hooks) {
-  var tableBodyRef = useRef(undefined);
-  var stickyHeaderCellRef = useRef(undefined);
-  var _useState = useState(undefined),
-    _useState2 = _slicedToArray(_useState, 2),
-    windowSize = _useState2[0],
-    setWindowSize = _useState2[1];
-  useEffect(function () {
-    var _window;
-    setWindowSize((_window = window) === null || _window === void 0 ? void 0 : _window.innerWidth);
+const blockClass = `${pkg.prefix}--datagrid`;
+const styleClassPrefix = `${blockClass}__right-sticky-column`;
+const leftStickyStyleClassPrefix = `${blockClass}__left-sticky-column`;
+const OFFSET_SCROLL_CLASS = `${styleClassPrefix}-offset-scroll`;
+const useStickyColumn = hooks => {
+  const tableBodyRef = useRef(undefined);
+  const stickyHeaderCellRef = useRef(undefined);
+  const [windowSize, setWindowSize] = useState(undefined);
+  useEffect(() => {
+    setWindowSize(window?.innerWidth);
   }, []);
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
     /* istanbul ignore next */
     window.addEventListener('resize', updateSize);
-    return function () {
-      return window.removeEventListener('resize', updateSize);
-    };
+    return () => window.removeEventListener('resize', updateSize);
   }, []);
   hooks.getCellProps.push(changeProps.bind(null, 'cell', null, windowSize));
   hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef, windowSize));
   hooks.getTableBodyProps.push(addTableBodyProps.bind(null, tableBodyRef));
-  hooks.getHeaderGroupProps.push(function (props) {
-    return [props, {
-      style: _objectSpread2(_objectSpread2({}, props.style), {}, {
-        minWidth: 'unset' // unset the min-width calculated by sum of all column min-width
-      })
-    }];
-  });
-  var useEventListener = function useEventListener(instance) {
-    useEffect(function () {
-      var tableBodyElement = tableBodyRef.current;
-      var headerCellElement = stickyHeaderCellRef === null || stickyHeaderCellRef === void 0 ? void 0 : stickyHeaderCellRef.current;
+  hooks.getHeaderGroupProps.push(props => [props, {
+    style: {
+      ...props.style,
+      minWidth: 'unset' // unset the min-width calculated by sum of all column min-width
+    }
+  }]);
+  const useEventListener = instance => {
+    useEffect(() => {
+      const tableBodyElement = tableBodyRef.current;
+      const headerCellElement = stickyHeaderCellRef?.current;
       /* istanbul ignore next */
       if (hasVertScroll(tableBodyElement) && headerCellElement) {
-        var _headerCellElement$cl;
-        headerCellElement === null || headerCellElement === void 0 || (_headerCellElement$cl = headerCellElement.classList) === null || _headerCellElement$cl === void 0 || _headerCellElement$cl.add(OFFSET_SCROLL_CLASS);
+        headerCellElement?.classList?.add(OFFSET_SCROLL_CLASS);
       }
-      var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
+      const boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
       /* istanbul ignore next */
       if (typeof window !== 'undefined') {
         window.addEventListener('resize', boundListener);
       }
-      return function () {
+      return () => {
         /* istanbul ignore next */
         if (typeof window !== 'undefined') {
           window.removeEventListener('resize', boundListener);
         }
       };
     }, [instance.rows, instance.isFetching]);
-    useEffect(function () {
-      var tableBodyElement = tableBodyRef.current;
-      var headerCellElement = stickyHeaderCellRef.current;
-      var listener = function listener(evt) {
+    useEffect(() => {
+      const tableBodyElement = tableBodyRef.current;
+      const headerCellElement = stickyHeaderCellRef.current;
+      const listener = evt => {
         toggleStickyShadow(evt.target, headerCellElement);
       };
       toggleStickyShadow(tableBodyElement, headerCellElement);
       if (tableBodyElement) {
-        tableBodyElement === null || tableBodyElement === void 0 || tableBodyElement.addEventListener('scroll', listener);
+        tableBodyElement?.addEventListener('scroll', listener);
       }
-      return function () {
+      return () => {
         if (tableBodyElement) {
           tableBodyElement.removeEventListener('scroll', listener);
         }
       };
     }, [instance.rows, instance.isFetching]);
   };
-  var useCheckScroll = function useCheckScroll(instance) {
-    var tableBodyElement = tableBodyRef.current;
-    var headerCellElement = stickyHeaderCellRef.current;
-    useEffect(function () {
+  const useCheckScroll = instance => {
+    const tableBodyElement = tableBodyRef.current;
+    const headerCellElement = stickyHeaderCellRef.current;
+    useEffect(() => {
       onBodyResize(tableBodyElement, headerCellElement);
     }, [instance.rows, headerCellElement, tableBodyElement]);
   };
   hooks.useInstance.push(useEventListener);
   hooks.useInstance.push(useCheckScroll);
-  hooks.useInstance.push(function (instance) {
+  hooks.useInstance.push(instance => {
     Object.assign(instance, {
       withStickyColumn: true
     });
   });
-  hooks.useInstance.push(function (instance) {
+  hooks.useInstance.push(instance => {
     // sticky column is defined by consumer
     // it will always comes after the spacer which is defined by useFlexResize
     // swap them here to use the spacer to push
     // sticky column to the right when there are few
     // columns defined
-    var newColumns = instance.visibleColumns;
-    var spacerIdx = newColumns.findIndex(function (col) {
-      return col.id === 'spacer';
-    });
-    var stickyIdx = newColumns.findIndex(function (col) {
-      return col.sticky === 'right';
-    });
+    const newColumns = instance.visibleColumns;
+    let spacerIdx = newColumns.findIndex(col => col.id === 'spacer');
+    let stickyIdx = newColumns.findIndex(col => col.sticky === 'right');
     if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
-      var temp = newColumns[spacerIdx];
+      const temp = newColumns[spacerIdx];
       newColumns[spacerIdx] = newColumns[stickyIdx];
       newColumns[stickyIdx] = temp;
     }
-    var newHeaders = instance.headers;
-    spacerIdx = newHeaders.findIndex(function (col) {
-      return col.id === 'spacer';
-    });
-    stickyIdx = newHeaders.findIndex(function (col) {
-      return col.sticky === 'right';
-    });
+    const newHeaders = instance.headers;
+    spacerIdx = newHeaders.findIndex(col => col.id === 'spacer');
+    stickyIdx = newHeaders.findIndex(col => col.sticky === 'right');
     if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
-      var _temp = newHeaders[spacerIdx];
+      const temp = newHeaders[spacerIdx];
       newHeaders[spacerIdx] = newHeaders[stickyIdx];
       newHeaders[spacerIdx].canResize = false;
       newHeaders[spacerIdx].disableResizing = true;
       delete newHeaders[spacerIdx].getResizerProps;
-      newHeaders[stickyIdx] = _temp;
+      newHeaders[stickyIdx] = temp;
     }
   });
 };
-var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
-  return [props, {
-    ref: tableBodyRef
-  }];
-};
-var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
-  var _data$cell;
-  var column = data.column || ((_data$cell = data.cell) === null || _data$cell === void 0 ? void 0 : _data$cell.column);
-  if ((column === null || column === void 0 ? void 0 : column.sticky) === 'right') {
-    return [props, _objectSpread2({
-      className: cx(_defineProperty(_defineProperty(_defineProperty({}, "".concat(styleClassPrefix, "-").concat(elementName), true), "".concat(blockClass, "__resizableColumn"), false), "".concat(blockClass, "__sortableColumn"), false))
-    }, headerCellRef && {
-      ref: headerCellRef
-    })];
+const addTableBodyProps = (tableBodyRef, props) => [props, {
+  ref: tableBodyRef
+}];
+const changeProps = (elementName, headerCellRef, windowSize, props, data) => {
+  const column = data.column || data.cell?.column;
+  if (column?.sticky === 'right') {
+    return [props, {
+      className: cx({
+        [`${styleClassPrefix}-${elementName}`]: true,
+        [`${blockClass}__resizableColumn`]: false,
+        [`${blockClass}__sortableColumn`]: false
+      }),
+      ...(headerCellRef && {
+        ref: headerCellRef
+      })
+    }];
   }
-  if ((column === null || column === void 0 ? void 0 : column.sticky) === 'left') {
-    var _data$instance;
-    return [props, _objectSpread2({
-      className: cx(_defineProperty(_defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), windowSize && windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize && windowSize > 671))
-    }, headerCellRef && {
-      ref: headerCellRef
-    })];
+  if (column?.sticky === 'left') {
+    return [props, {
+      className: cx({
+        [`${leftStickyStyleClassPrefix}-${elementName}`]: windowSize && windowSize > 671,
+        [`${leftStickyStyleClassPrefix}-${elementName}--with-extra-select-column`]: data?.instance?.withSelectRows && windowSize && windowSize > 671
+      }),
+      ...(headerCellRef && {
+        ref: headerCellRef
+      })
+    }];
   }
   return [props];
 };
-var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
+const onBodyResize = (tableBodyEle, headerCellEle) => {
   if (headerCellEle) {
     /* istanbul ignore next */
     if (hasVertScroll(tableBodyEle)) {
@@ -170,26 +158,28 @@ var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
     toggleStickyShadow(tableBodyEle, headerCellEle);
   }
 };
-var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle) {
+const toggleStickyShadow = (tableBodyEle, headerCellEle) => {
   /* istanbul ignore next */
   if (tableBodyEle && headerCellEle) {
-    var isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
+    const isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
     if (isScrolledToRight) {
-      headerCellEle.classList.add("".concat(blockClass, "__sticky-noShadow"));
-      tableBodyEle.classList.add("".concat(blockClass, "__sticky-column-noShadow"));
+      headerCellEle.classList.add(`${blockClass}__sticky-noShadow`);
+      tableBodyEle.classList.add(`${blockClass}__sticky-column-noShadow`);
     } else {
-      headerCellEle.classList.remove("".concat(blockClass, "__sticky-noShadow"));
-      tableBodyEle.classList.remove("".concat(blockClass, "__sticky-column-noShadow"));
+      headerCellEle.classList.remove(`${blockClass}__sticky-noShadow`);
+      tableBodyEle.classList.remove(`${blockClass}__sticky-column-noShadow`);
     }
   }
 };
-var hasVertScroll = function hasVertScroll(element) {
+const hasVertScroll = element => {
   /* istanbul ignore next */
   if (!element) {
     return false;
   }
-  var scrollHeight = element.scrollHeight,
-    clientHeight = element.clientHeight;
+  const {
+    scrollHeight,
+    clientHeight
+  } = element;
   return scrollHeight > clientHeight;
 };
 

package/es/components/Datagrid/utils/getAutoSizedColumnWidth.js

@@ -5,22 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-
-/**
- * Copyright IBM Corp. 2023, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var getAutoSizedColumnWidth = function getAutoSizedColumnWidth(rows, accessor, headerText) {
-  var maxWidth = 400;
-  var minWidth = 58;
-  var letterSpacing = 10;
-  var cellLength = Math.max.apply(Math, _toConsumableArray(rows.map(function (row) {
-    return ("".concat(row[accessor]) || '').length;
-  })).concat([headerText.length]));
+const getAutoSizedColumnWidth = (rows, accessor, headerText) => {
+  const maxWidth = 400;
+  const minWidth = 58;
+  const letterSpacing = 10;
+  const cellLength = Math.max(...rows.map(row => (`${row[accessor]}` || '').length), headerText.length);
   if (cellLength <= 3) {
     return minWidth;
   }

package/es/components/Decorator/Decorator.js

@@ -13,13 +13,13 @@ import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
 import { DecoratorBase } from '../DecoratorBase/DecoratorBase.js';
 
-var componentName = 'Decorator';
+const componentName = 'Decorator';
 
 /**
  * The Decorator groups a key/value pair as a single element. This component is not interactive.
  */
-var Decorator = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var validProps = prepareProps(props, ['disabled', 'kind', 'onClick', 'onClickLabel', 'onClickValue', 'onContextMenu', 'onContextMenuLabel', 'onContextMenuValue']);
+let Decorator = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const validProps = prepareProps(props, ['disabled', 'kind', 'onClick', 'onClickLabel', 'onClickValue', 'onContextMenu', 'onContextMenuLabel', 'onContextMenuValue']);
   return /*#__PURE__*/React__default.createElement(DecoratorBase, _extends({
     ref: ref
   }, validProps, {

package/es/components/DecoratorBase/DecoratorBase.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -13,16 +13,15 @@ import { pkg } from '../../settings.js';
 import { getMagnitude, truncate } from './utils.js';
 import { DecoratorIcon } from './DecoratorIcon.js';
 
-var _excluded = ["className", "disabled", "hideIcon", "href", "kind", "label", "setLabelTitle", "onClick", "onClickLabel", "onClickValue", "onContextMenu", "onContextMenuLabel", "onContextMenuValue", "score", "scoreThresholds", "small", "theme", "truncateValue", "value", "valueTitle"];
-var blockClass = "".concat(pkg.prefix, "--decorator");
-var componentName = 'DecoratorBase';
-var defaults = {
-  onClick: function onClick() {},
-  onClickLabel: function onClickLabel() {},
-  onClickValue: function onClickValue() {},
-  onContextMenu: function onContextMenu() {},
-  onContextMenuLabel: function onContextMenuLabel() {},
-  onContextMenuValue: function onContextMenuValue() {},
+const blockClass = `${pkg.prefix}--decorator`;
+const componentName = 'DecoratorBase';
+const defaults = {
+  onClick: () => {},
+  onClickLabel: () => {},
+  onClickValue: () => {},
+  onContextMenu: () => {},
+  onContextMenuLabel: () => {},
+  onContextMenuValue: () => {},
   scoreThresholds: [0, 4, 7, 10]
 };
 
@@ -31,115 +30,120 @@ var defaults = {
  *
  * DecoratorBase is for internal use only. Refer to the other Decorator types as components for your app.
  */
-var DecoratorBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    disabled = _ref.disabled,
-    hideIcon = _ref.hideIcon,
-    href = _ref.href,
-    kind = _ref.kind,
-    label = _ref.label,
-    setLabelTitle = _ref.setLabelTitle,
-    _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
-    _ref$onClickLabel = _ref.onClickLabel,
-    onClickLabel = _ref$onClickLabel === void 0 ? defaults.onClickLabel : _ref$onClickLabel,
-    _ref$onClickValue = _ref.onClickValue,
-    onClickValue = _ref$onClickValue === void 0 ? defaults.onClickValue : _ref$onClickValue,
-    _ref$onContextMenu = _ref.onContextMenu,
-    onContextMenu = _ref$onContextMenu === void 0 ? defaults.onContextMenu : _ref$onContextMenu,
-    _ref$onContextMenuLab = _ref.onContextMenuLabel,
-    onContextMenuLabel = _ref$onContextMenuLab === void 0 ? defaults.onContextMenuLabel : _ref$onContextMenuLab,
-    _ref$onContextMenuVal = _ref.onContextMenuValue,
-    onContextMenuValue = _ref$onContextMenuVal === void 0 ? defaults.onContextMenuValue : _ref$onContextMenuVal,
-    score = _ref.score,
-    _ref$scoreThresholds = _ref.scoreThresholds,
-    scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
-    small = _ref.small,
-    theme = _ref.theme,
-    truncateValue = _ref.truncateValue,
-    value = _ref.value,
-    valueTitle = _ref.valueTitle,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var magnitude = getMagnitude(score, scoreThresholds);
-  var _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
-  var _value = truncate(value, truncateValue);
+let DecoratorBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    className,
+    disabled,
+    hideIcon,
+    href,
+    kind,
+    label,
+    setLabelTitle,
+    onClick = defaults.onClick,
+    onClickLabel = defaults.onClickLabel,
+    onClickValue = defaults.onClickValue,
+    onContextMenu = defaults.onContextMenu,
+    onContextMenuLabel = defaults.onContextMenuLabel,
+    onContextMenuValue = defaults.onContextMenuValue,
+    score,
+    scoreThresholds = defaults.scoreThresholds,
+    small,
+    theme,
+    truncateValue,
+    value,
+    valueTitle,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const magnitude = getMagnitude(score, scoreThresholds);
+  const _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
+  const _value = truncate(value, truncateValue);
 
   // These class names apply to all types of DecoratorBase.
-  var classNames = cx(blockClass, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--").concat(theme), theme), "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
+  const classNames = cx(blockClass, className, {
+    [`${blockClass}--${theme}`]: theme,
+    [`${blockClass}--sm`]: small,
+    [`${blockClass}--truncate-end`]: truncateValue === 'end',
+    [`${blockClass}--truncate-start`]: truncateValue === 'start',
+    [`${blockClass}--truncate-midline`]: truncateValue?.maxLength
+  });
 
   // These properties apply to all <DecoratorIcons>.
-  var decoratorIconsProps = {
-    className: "".concat(blockClass, "__icon"),
+  const decoratorIconsProps = {
+    className: `${blockClass}__icon`,
     magnitude: magnitude.toLowerCase(),
     // e.g. "Medium" -> "medium"
     small: small
   };
 
   // Optional callback functions specific to "link" or "single-button".
-  var handleOnClick = function handleOnClick(event) {
+  const handleOnClick = event => {
     onClick(event, {
-      score: score,
-      label: label,
-      value: value,
-      magnitude: magnitude
+      score,
+      label,
+      value,
+      magnitude
     });
   };
-  var handleOnContextMenu = function handleOnContextMenu(event) {
+  const handleOnContextMenu = event => {
     onContextMenu(event, {
-      score: score,
-      label: label,
-      value: value,
-      magnitude: magnitude
+      score,
+      label,
+      value,
+      magnitude
     });
   };
 
   // RETURN DUAL BUTTONS
   if (kind === 'dual-button') {
     // Optional callback functions specific to "dual-button".
-    var handleOnClickLabel = function handleOnClickLabel(event) {
+    const handleOnClickLabel = event => {
       onClickLabel(event, {
-        score: score,
-        label: label,
-        value: value,
-        magnitude: magnitude
+        score,
+        label,
+        value,
+        magnitude
       });
     };
-    var handleOnClickValue = function handleOnClickValue(event) {
+    const handleOnClickValue = event => {
       onClickValue(event, {
-        score: score,
-        label: label,
-        value: value,
-        magnitude: magnitude
+        score,
+        label,
+        value,
+        magnitude
       });
     };
-    var handleOnContextMenuLabel = function handleOnContextMenuLabel(event) {
+    const handleOnContextMenuLabel = event => {
       onContextMenuLabel(event, {
-        score: score,
-        label: label,
-        value: value,
-        magnitude: magnitude
+        score,
+        label,
+        value,
+        magnitude
       });
     };
-    var handleOnContextMenuValue = function handleOnContextMenuValue(event) {
+    const handleOnContextMenuValue = event => {
       onContextMenuValue(event, {
-        score: score,
-        label: label,
-        value: value,
-        magnitude: magnitude
+        score,
+        label,
+        value,
+        magnitude
       });
     };
     return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
-      className: cx(classNames, "".concat(blockClass, "--dual-button"), _defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
+      className: cx(classNames, `${blockClass}--dual-button`, {
+        [`${blockClass}-disabled`]: disabled
+      }),
       ref: ref
     }), /*#__PURE__*/React__default.createElement("button", {
-      className: "".concat(blockClass, "__label"),
+      className: `${blockClass}__label`,
       disabled: disabled,
       onClick: !disabled && handleOnClickLabel,
       onContextMenu: !disabled && handleOnContextMenuLabel,
       title: _labelTitle || label,
       type: "button"
     }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("button", {
-      className: "".concat(blockClass, "__value"),
+      className: `${blockClass}__value`,
       disabled: disabled,
       onClick: !disabled && handleOnClickValue,
       onContextMenu: !disabled && handleOnContextMenuValue,
@@ -151,17 +155,19 @@ var DecoratorBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   // RETURN SINGLE BUTTON
   if (kind === 'single-button') {
     return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
-      className: cx(classNames, "".concat(blockClass, "--single-button"), _defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
+      className: cx(classNames, `${blockClass}--single-button`, {
+        [`${blockClass}-disabled`]: disabled
+      }),
       disabled: disabled,
       onClick: !disabled && handleOnClick,
       onContextMenu: !disabled && handleOnContextMenu,
       ref: ref,
       type: "button"
     }), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__label"),
+      className: `${blockClass}__label`,
       title: _labelTitle || label
     }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__value"),
+      className: `${blockClass}__value`,
       title: valueTitle || value
     }, _value));
   }
@@ -170,28 +176,28 @@ var DecoratorBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   if (kind === 'link') {
     return /*#__PURE__*/React__default.createElement("a", _extends({}, rest, {
       href: href,
-      className: cx(classNames, "".concat(blockClass, "--link")),
+      className: cx(classNames, `${blockClass}--link`),
       onClick: handleOnClick,
       onContextMenu: handleOnContextMenu,
       ref: ref
     }), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__label"),
+      className: `${blockClass}__label`,
       title: _labelTitle || label
     }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__value"),
+      className: `${blockClass}__value`,
       title: valueTitle || value
     }, _value));
   }
 
   // RETURN DEFAULT (NON-INTERACTIVE)
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
-    className: cx(classNames, "".concat(blockClass, "--default")),
+    className: cx(classNames, `${blockClass}--default`),
     ref: ref
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(blockClass, "__label"),
+    className: `${blockClass}__label`,
     title: _labelTitle || label
   }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(blockClass, "__value"),
+    className: `${blockClass}__value`,
     title: valueTitle || value
   }, _value));
 });