@carbon/ibm-products 2.31.0-alpha.5 → 2.31.1

package/lib/components/Decorator/Decorator.js

@@ -12,202 +12,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
-var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
-var utils = require('./utils.js');
-var DecoratorIcon = require('./DecoratorIcon.js');
+var DecoratorBase = require('../DecoratorBase/DecoratorBase.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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(settings.pkg.prefix, "--decorator");
 var componentName = 'Decorator';
-var defaults = {
-  kind: 'default',
-  onClick: function onClick() {},
-  onClickLabel: function onClickLabel() {},
-  onClickValue: function onClickValue() {},
-  onContextMenu: function onContextMenu() {},
-  onContextMenuLabel: function onContextMenuLabel() {},
-  onContextMenuValue: function onContextMenuValue() {},
-  scoreThresholds: [0, 4, 7, 10],
-  theme: 'light'
-};
 
 /**
- * The Decorator groups a key/value pair to look and behave like a single UI element.
+ * The Decorator groups a key/value pair as a single element. This component is not interactive.
  */
-exports.Decorator = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    disabled = _ref.disabled,
-    hideIcon = _ref.hideIcon,
-    href = _ref.href,
-    _ref$kind = _ref.kind,
-    kind = _ref$kind === void 0 ? defaults.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,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    truncateValue = _ref.truncateValue,
-    value = _ref.value,
-    valueTitle = _ref.valueTitle,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var magnitude = utils.getMagnitude(score, scoreThresholds);
-  var _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
-  var _value = utils.truncate(value, truncateValue);
-
-  // These class names apply to all types of Decorator.
-  var classNames = cx__default["default"](blockClass, className, "".concat(blockClass, "--").concat(theme), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".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));
-
-  // These properties apply to all <DecoratorIcons>.
-  var decoratorIconsProps = {
-    className: "".concat(blockClass, "__icon"),
-    magnitude: magnitude.toLowerCase(),
-    // e.g. "Medium" -> "medium"
-    small: small
-  };
-
-  // Optional callback functions if `kind` is "link" or "single-button".
-  var handleOnClick = function handleOnClick(event) {
-    onClick(event, {
-      score: score,
-      label: label,
-      value: value,
-      magnitude: magnitude
-    });
-  };
-  var handleOnContextMenu = function handleOnContextMenu(event) {
-    onContextMenu(event, {
-      score: score,
-      label: label,
-      value: value,
-      magnitude: magnitude
-    });
-  };
-
-  // RETURN DUAL BUTTONS
-  if (kind === 'dual-button') {
-    // Optional callback functions if `kind` is "dual-button" only.
-    var handleOnClickLabel = function handleOnClickLabel(event) {
-      onClickLabel(event, {
-        score: score,
-        label: label,
-        value: value,
-        magnitude: magnitude
-      });
-    };
-    var handleOnClickValue = function handleOnClickValue(event) {
-      onClickValue(event, {
-        score: score,
-        label: label,
-        value: value,
-        magnitude: magnitude
-      });
-    };
-    var handleOnContextMenuLabel = function handleOnContextMenuLabel(event) {
-      onContextMenuLabel(event, {
-        score: score,
-        label: label,
-        value: value,
-        magnitude: magnitude
-      });
-    };
-    var handleOnContextMenuValue = function handleOnContextMenuValue(event) {
-      onContextMenuValue(event, {
-        score: score,
-        label: label,
-        value: value,
-        magnitude: magnitude
-      });
-    };
-    return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
-      className: cx__default["default"](classNames, "".concat(blockClass, "--buttons"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
-      ref: ref
-    }), /*#__PURE__*/React__default["default"].createElement("button", {
-      className: "".concat(blockClass, "__label"),
-      disabled: disabled,
-      onClick: !disabled && handleOnClickLabel,
-      onContextMenu: !disabled && handleOnContextMenuLabel,
-      title: _labelTitle || label,
-      type: "button"
-    }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("button", {
-      className: "".concat(blockClass, "__value"),
-      disabled: disabled,
-      onClick: !disabled && handleOnClickValue,
-      onContextMenu: !disabled && handleOnContextMenuValue,
-      title: valueTitle || value,
-      type: "button"
-    }, _value));
-  }
-
-  // RETURN SINGLE BUTTON
-  if (kind === 'single-button') {
-    return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
-      className: cx__default["default"](classNames, "".concat(blockClass, "--button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
-      disabled: disabled,
-      onClick: !disabled && handleOnClick,
-      onContextMenu: !disabled && handleOnContextMenu,
-      ref: ref,
-      type: "button"
-    }), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(blockClass, "__label"),
-      title: _labelTitle || label
-    }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(blockClass, "__value"),
-      title: valueTitle || value
-    }, _value));
-  }
-
-  // RETURN LINK
-  if (kind === 'link') {
-    return /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
-      href: href,
-      className: cx__default["default"](classNames, "".concat(blockClass, "--link")),
-      onClick: handleOnClick,
-      onContextMenu: handleOnContextMenu,
-      ref: ref
-    }), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(blockClass, "__label"),
-      title: _labelTitle || label
-    }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(blockClass, "__value"),
-      title: valueTitle || value
-    }, _value));
-  }
-
-  // RETURN DEFAULT (NON-INTERACTIVE)
-  if (kind === 'default') {
-    return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
-      className: cx__default["default"](classNames, "".concat(blockClass, "--default")),
-      ref: ref
-    }), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(blockClass, "__label"),
-      title: _labelTitle || label
-    }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(blockClass, "__value"),
-      title: valueTitle || value
-    }, _value));
-  }
+exports.Decorator = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  var validProps = propsHelper.prepareProps(props, ['disabled', 'kind', 'onClick', 'onClickLabel', 'onClickValue', 'onContextMenu', 'onContextMenuLabel', 'onContextMenuValue']);
+  return /*#__PURE__*/React__default["default"].createElement(DecoratorBase.DecoratorBase, _rollupPluginBabelHelpers["extends"]({
+    ref: ref
+  }, validProps, {
+    kind: "default"
+  }, devtools.getDevtoolsProps(componentName)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -225,70 +50,14 @@ exports.Decorator.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].string,
-  /**
-   * `disabled` only applies if `kind` is "single-button" or "dual-button".
-   */
-  disabled: index["default"].bool,
   /**
    * Do not show the icon, regardless of score.
    */
   hideIcon: index["default"].bool,
-  /**
-   * `href` is req'd if `kind` is "link".
-   *
-   * These two properties together will render the `label` and `value` as a single anchor tag.
-   */
-  href: index["default"].string,
-  /**
-   * If `kind` is "dual-button" then refer to the `onClickLabel`, `onClickValue`, `onContextMenuLabel`, and `onContextMenuValue` callback functions.
-   *
-   * If `kind` is "single-button" then refer to the `onClick` and `onContextMenu` callback functions.
-   *
-   * If `kind` is "link" then also populate `href`.
-   *
-   * `kind's` default value is "default" and has no other requirements.
-   */
-  kind: index["default"].oneOf(['default', 'link', 'single-button', 'dual-button']),
   /**
    * The label for the data.
    */
   label: index["default"].string,
-  /**
-   * Optional callback function if `kind` is "link" or "single-button".
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onClick: index["default"].func,
-  /**
-   * Optional callback functions if `kind` is "dual-button" only.
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onClickLabel: index["default"].func,
-  /**
-   * Optional callback functions if `kind` is "dual-button" only.
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onClickValue: index["default"].func,
-  /**
-   * Optional callback function if `kind` is "link" or "single-button".
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onContextMenu: index["default"].func,
-  /**
-   * Optional callback functions if `kind` is "dual-button" only.
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onContextMenuLabel: index["default"].func,
-  /**
-   * Optional callback functions if `kind` is "dual-button" only.
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onContextMenuValue: index["default"].func,
   /**
    * Used in conjunction with `scoreThresholds`, determines the color, shape, and type of magnitude of the icon.
    *
@@ -310,13 +79,13 @@ exports.Decorator.propTypes = {
    */
   scoreThresholds: index["default"].arrayOf(index["default"].number),
   /**
-   * Callback function for building the label's descriptive text for screen readers.
+   * Optional callback function for building a more detailed descriptive text.
+   * Returns `score`, `scoreThresholds`, `magnitude`.
    *
-   * The default description is in the form of `"(magnitude)" magnitude: score X out of Y"`.
-   * E.g. `"Medium" magnitude: score 5 out of 10`.
+   * Typical description is in the form of
+   * '"(magnitude)" magnitude: score (score) out of (last element of scoreThresholds array)'.
    *
-   * Where `magnitude` is the label associated with the specific score,
-   * X is the `score`, and Y is the last element of the `setLabelTitle` array.
+   * E.g. `"Medium" magnitude: score 5 out of 10`.
    *
    * If not defined, the title will default to the `label` prop.
    */
@@ -331,13 +100,6 @@ exports.Decorator.propTypes = {
   theme: index["default"].oneOf(['light', 'dark']),
   /**
    * If not defined, it will behave as `display:inline-block`.
-   *
-   * If `end` it will append "..." to the `value` if there is not enough space.
-   *
-   * If `start` it will prepend "..." to the `value` if there is not enough space.
-   *
-   * If `{maxLength, front, back}` it will inject "..." in the middle
-   * of the `value` regardless of available space.
    */
   truncateValue: index["default"].oneOfType([index["default"].oneOf(['end', 'start']), index["default"].shape({
     maxLength: index["default"].number,

package/lib/components/DecoratorBase/DecoratorBase.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The DecoratorBase groups a key/value pair to look and behave like a single UI element.
+ *
+ * DecoratorBase is for internal use only. Refer to the other Decorator types as components for your app.
+ */
+export let DecoratorBase: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/DecoratorBase/DecoratorBase.js

@@ -0,0 +1,242 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var settings = require('../../settings.js');
+var utils = require('./utils.js');
+var DecoratorIcon = require('./DecoratorIcon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+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(settings.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() {},
+  scoreThresholds: [0, 4, 7, 10],
+  theme: 'light'
+};
+
+/**
+ * The DecoratorBase groups a key/value pair to look and behave like a single UI element.
+ *
+ * DecoratorBase is for internal use only. Refer to the other Decorator types as components for your app.
+ */
+var DecoratorBase = /*#__PURE__*/React__default["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,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    truncateValue = _ref.truncateValue,
+    value = _ref.value,
+    valueTitle = _ref.valueTitle,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var magnitude = utils.getMagnitude(score, scoreThresholds);
+  var _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
+  var _value = utils.truncate(value, truncateValue);
+
+  // These class names apply to all types of DecoratorBase.
+  var classNames = cx__default["default"](blockClass, className, "".concat(blockClass, "--").concat(theme), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".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));
+
+  // These properties apply to all <DecoratorIcons>.
+  var decoratorIconsProps = {
+    className: "".concat(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) {
+    onClick(event, {
+      score: score,
+      label: label,
+      value: value,
+      magnitude: magnitude
+    });
+  };
+  var handleOnContextMenu = function handleOnContextMenu(event) {
+    onContextMenu(event, {
+      score: score,
+      label: label,
+      value: value,
+      magnitude: magnitude
+    });
+  };
+
+  // RETURN DUAL BUTTONS
+  if (kind === 'dual-button') {
+    // Optional callback functions specific to "dual-button".
+    var handleOnClickLabel = function handleOnClickLabel(event) {
+      onClickLabel(event, {
+        score: score,
+        label: label,
+        value: value,
+        magnitude: magnitude
+      });
+    };
+    var handleOnClickValue = function handleOnClickValue(event) {
+      onClickValue(event, {
+        score: score,
+        label: label,
+        value: value,
+        magnitude: magnitude
+      });
+    };
+    var handleOnContextMenuLabel = function handleOnContextMenuLabel(event) {
+      onContextMenuLabel(event, {
+        score: score,
+        label: label,
+        value: value,
+        magnitude: magnitude
+      });
+    };
+    var handleOnContextMenuValue = function handleOnContextMenuValue(event) {
+      onContextMenuValue(event, {
+        score: score,
+        label: label,
+        value: value,
+        magnitude: magnitude
+      });
+    };
+    return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
+      className: cx__default["default"](classNames, "".concat(blockClass, "--dual-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
+      ref: ref
+    }), /*#__PURE__*/React__default["default"].createElement("button", {
+      className: "".concat(blockClass, "__label"),
+      disabled: disabled,
+      onClick: !disabled && handleOnClickLabel,
+      onContextMenu: !disabled && handleOnContextMenuLabel,
+      title: _labelTitle || label,
+      type: "button"
+    }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("button", {
+      className: "".concat(blockClass, "__value"),
+      disabled: disabled,
+      onClick: !disabled && handleOnClickValue,
+      onContextMenu: !disabled && handleOnContextMenuValue,
+      title: valueTitle || value,
+      type: "button"
+    }, _value));
+  }
+
+  // RETURN SINGLE BUTTON
+  if (kind === 'single-button') {
+    return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
+      className: cx__default["default"](classNames, "".concat(blockClass, "--single-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
+      disabled: disabled,
+      onClick: !disabled && handleOnClick,
+      onContextMenu: !disabled && handleOnContextMenu,
+      ref: ref,
+      type: "button"
+    }), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(blockClass, "__label"),
+      title: _labelTitle || label
+    }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(blockClass, "__value"),
+      title: valueTitle || value
+    }, _value));
+  }
+
+  // RETURN LINK
+  if (kind === 'link') {
+    return /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, rest, {
+      href: href,
+      className: cx__default["default"](classNames, "".concat(blockClass, "--link")),
+      onClick: handleOnClick,
+      onContextMenu: handleOnContextMenu,
+      ref: ref
+    }), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(blockClass, "__label"),
+      title: _labelTitle || label
+    }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(blockClass, "__value"),
+      title: valueTitle || value
+    }, _value));
+  }
+
+  // RETURN DEFAULT (NON-INTERACTIVE)
+  return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](classNames, "".concat(blockClass, "--default")),
+    ref: ref
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__label"),
+    title: _labelTitle || label
+  }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(blockClass, "__value"),
+    title: valueTitle || value
+  }, _value));
+});
+DecoratorBase.displayName = componentName;
+
+// See the other Decorator types for detailed, context-specific comments.
+DecoratorBase.propTypes = {
+  className: index["default"].string,
+  disabled: index["default"].bool,
+  hideIcon: index["default"].bool,
+  href: index["default"].string,
+  /**
+   * `kind` differentiates between each type of Decorator, and is for internal use only.
+   */
+  kind: index["default"].oneOf(['default', 'link', 'single-button', 'dual-button']),
+  label: index["default"].string,
+  onClick: index["default"].func,
+  onClickLabel: index["default"].func,
+  onClickValue: index["default"].func,
+  onContextMenu: index["default"].func,
+  onContextMenuLabel: index["default"].func,
+  onContextMenuValue: index["default"].func,
+  score: index["default"].number,
+  scoreThresholds: index["default"].arrayOf(index["default"].number),
+  setLabelTitle: index["default"].func,
+  small: index["default"].bool,
+  theme: index["default"].oneOf(['light', 'dark']),
+  truncateValue: index["default"].oneOfType([index["default"].oneOf(['end', 'start']), index["default"].shape({
+    maxLength: index["default"].number,
+    front: index["default"].number,
+    back: index["default"].number
+  })]),
+  value: index["default"].string.isRequired,
+  valueTitle: index["default"].string
+};
+
+exports.DecoratorBase = DecoratorBase;

package/lib/components/DecoratorBase/index.d.ts

@@ -0,0 +1 @@
+export { DecoratorBase } from "./DecoratorBase";

package/{es/components/Decorator → lib/components/DecoratorBase}/utils.d.ts

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 export function getMagnitude(score: any, thresholds: any): "Medium" | "Unknown" | "Benign" | "Low" | "High" | "Critical";
-export function truncate(inputText: any, truncateValue?: {}): any;
+export function truncate(inputText: any, truncateValue: any): any;

package/lib/components/{Decorator → DecoratorBase}/utils.js

@@ -10,31 +10,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var getMagnitude = function getMagnitude(score, thresholds) {
-  if (typeof score === 'number') {
-    if (score <= thresholds[0]) {
-      return 'Benign';
-    }
-    if (score < thresholds[1]) {
-      return 'Low';
-    }
-    if (score < thresholds[2]) {
-      return 'Medium';
-    }
-    if (score < thresholds[3]) {
-      return 'High';
-    }
-    if (score >= thresholds[3]) {
-      return 'Critical';
-    }
+  if (typeof score !== 'number') {
+    return 'Unknown';
   }
-  return 'Unknown';
+  if (score <= thresholds[0]) {
+    return 'Benign';
+  }
+  if (score < thresholds[1]) {
+    return 'Low';
+  }
+  if (score < thresholds[2]) {
+    return 'Medium';
+  }
+  if (score < thresholds[3]) {
+    return 'High';
+  }
+  return 'Critical';
 };
 
 // If a "midline" truncation has been defined,
 // then return the formatted midline value generated here,
 // else return to the original value.
-var truncate = function truncate(inputText) {
-  var truncateValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+var truncate = function truncate(inputText, truncateValue) {
+  if (!truncateValue) {
+    return inputText;
+  }
   var maxLength = truncateValue.maxLength,
     front = truncateValue.front,
     back = truncateValue.back;

package/lib/components/DecoratorDualButton/DecoratorDualButton.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The DecoratorDualButton groups a key/value pair where the key and value each behave like a button.
+ */
+export let DecoratorDualButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';