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

package/es/components/CreateModal/CreateModal.d.ts

@@ -1,8 +1,72 @@
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { ReactNode } from 'react';
+import { ComposedModal } from '@carbon/react';
+interface CreateModalProps extends React.ComponentProps<typeof ComposedModal> {
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specifies an optional handler which is called when the CreateModal
+     * is closed.
+     */
+    onRequestClose?(): void;
+    /**
+     * Specifies an optional handler which is called when the CreateModal
+     * primary button is pressed.
+     */
+    onRequestSubmit?(): void;
+    /**
+     * Specifies whether the CreateModal is open or not.
+     */
+    open?: boolean;
+    /**
+     * The title of the CreateModal is usually the product or service name.
+     */
+    title: ReactNode;
+    /**
+     * The subtitle of the CreateModal is optional and serves to provide more information about the modal.
+     */
+    subtitle?: ReactNode;
+    /**
+     * The description of the CreateModal serves to provide more information about the modal.
+     */
+    description: ReactNode;
+    /**
+     * Specifies the secondary button's text in the modal.
+     */
+    secondaryButtonText: string;
+    /**
+     * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    /**
+     * Specifies the primary button's text in the modal.
+     */
+    primaryButtonText: string;
+    /**
+     * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+     * Returning `true` prevents the primary button from being clicked until required fields are completed.
+     */
+    disableSubmit?: boolean;
+    /**
+     * Specifies which DOM element in the form should be focused.
+     */
+    selectorPrimaryFocus: ReactNode;
+}
 /**
  * The `CreateModal` component provides a way for a user to quickly generate a new
 resource. It is triggered by a user’s action, appears on top of the main page
 content, and is persistent until dismissed. The purpose of this modal should be
 immediately apparent to the user, with a clear and obvious path to completion.
  */
-export let CreateModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CreateModal: React.ForwardRefExoticComponent<CreateModalProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<unknown>>;
+export {};

package/es/components/CreateModal/CreateModal.js

@@ -28,7 +28,6 @@ var isValidChildren = function isValidChildren() {
     return;
   };
 };
-
 /**
  * The `CreateModal` component provides a way for a user to quickly generate a new
 resource. It is triggered by a user’s action, appears on top of the main page
@@ -93,6 +92,7 @@ CreateModal.propTypes = {
   /**
    * Children refers to all form items within a form inside of the modal's body.
    */
+  /**@ts-ignore*/
   children: isValidChildren(),
   /**
    * Specify an optional className to be applied to the modal root node

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -87,7 +87,7 @@ var DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Table, _extends({}, getTableProps(), {
-      className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: /* istanbul ignore next */

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.d.ts

@@ -1,5 +1,5 @@
 export default Columns;
-declare function Columns({ getVisibleColumnsCount, filterString, columns, setColumnsObject, onSelectColumn, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, }: {
+declare function Columns({ getVisibleColumnsCount, filterString, columns, setColumnsObject, onSelectColumn, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, customizeTearsheetHeadingLabel }: {
     getVisibleColumnsCount: any;
     filterString: any;
     columns: any;
@@ -8,12 +8,14 @@ declare function Columns({ getVisibleColumnsCount, filterString, columns, setCol
     assistiveTextInstructionsLabel: any;
     assistiveTextDisabledInstructionsLabel: any;
     selectAllLabel: any;
+    customizeTearsheetHeadingLabel: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace Columns {
     namespace propTypes {
         let assistiveTextDisabledInstructionsLabel: PropTypes.Requireable<string>;
         let assistiveTextInstructionsLabel: PropTypes.Requireable<string>;
         let columns: PropTypes.Validator<any[]>;
+        let customizeTearsheetHeadingLabel: PropTypes.Requireable<string>;
         let disabledInstructionsLabel: PropTypes.Requireable<string>;
         let filterString: PropTypes.Validator<string>;
         let getVisibleColumnsCount: PropTypes.Validator<(...args: any[]) => any>;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -24,7 +24,8 @@ var Columns = function Columns(_ref) {
     onSelectColumn = _ref.onSelectColumn,
     assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-    selectAllLabel = _ref.selectAllLabel;
+    selectAllLabel = _ref.selectAllLabel,
+    customizeTearsheetHeadingLabel = _ref.customizeTearsheetHeadingLabel;
   var listId = useRef(uuidv4()); // keep id between renders
   var listRef = useRef(null);
   var _React$useState = React__default.useState(''),
@@ -47,6 +48,7 @@ var Columns = function Columns(_ref) {
   }, /*#__PURE__*/React__default.createElement("ol", {
     className: "".concat(blockClass, "__customize-columns-column-list--focus"),
     role: "listbox",
+    "aria-label": customizeTearsheetHeadingLabel,
     "aria-describedby": "".concat(blockClass, "__customize-columns--instructions"),
     tabIndex: 0
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -81,6 +83,7 @@ Columns.propTypes = {
   assistiveTextDisabledInstructionsLabel: PropTypes.string,
   assistiveTextInstructionsLabel: PropTypes.string,
   columns: PropTypes.array.isRequired,
+  customizeTearsheetHeadingLabel: PropTypes.string,
   disabledInstructionsLabel: PropTypes.string,
   filterString: PropTypes.string.isRequired,
   getVisibleColumnsCount: PropTypes.func.isRequired,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -8,7 +8,6 @@
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useCallback, useEffect } from 'react';
 import PropTypes from '../../../../../node_modules/prop-types/index.js';
-import { isColumnVisible } from './common.js';
 import Columns from './Columns.js';
 import Actions from './Actions.js';
 import { pkg } from '../../../../../settings.js';
@@ -51,19 +50,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     searchText = _useState6[0],
     setSearchText = _useState6[1];
-  var _useState7 = useState(columnDefinitions
-    // only sort the hidden column to the end when modal reopen
-    .sort(function (defA, defB) {
-      var isVisibleA = isColumnVisible(defA);
-      var isVisibleB = isColumnVisible(defB);
-      if (isVisibleA && !isVisibleB) {
-        return -1;
-      }
-      if (!isVisibleA && isVisibleB) {
-        return 1;
-      }
-      return 0;
-    })),
+  var _useState7 = useState(columnDefinitions),
     _useState8 = _slicedToArray(_useState7, 2),
     columnObjects = _useState8[0],
     setColumnObjects = _useState8[1];
@@ -149,7 +136,8 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel
+    selectAllLabel: selectAllLabel,
+    customizeTearsheetHeadingLabel: customizeTearsheetHeadingLabel
   }));
 };
 CustomizeColumnsTearsheet.propTypes = {

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/common.js

@@ -7,13 +7,6 @@
 
 import isBoolean from 'lodash/isBoolean';
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
 var isColumnVisible = function isColumnVisible(colDef) {
   return isBoolean(colDef.isVisible) ? colDef.isVisible : true;
 };

package/es/components/Decorator/Decorator.d.ts

@@ -1,5 +1,5 @@
 /**
- * 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.
  */
 export let Decorator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/es/components/Decorator/Decorator.js

@@ -5,200 +5,26 @@
  * 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 '../../node_modules/prop-types/index.js';
-import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { prepareProps } from '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
-import { getMagnitude, truncate } from './utils.js';
-import { DecoratorIcon } from './DecoratorIcon.js';
+import { DecoratorBase } from '../DecoratorBase/DecoratorBase.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 = '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.
  */
-var Decorator = /*#__PURE__*/React__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 = _objectWithoutProperties(_ref, _excluded);
-  var magnitude = getMagnitude(score, scoreThresholds);
-  var _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
-  var _value = truncate(value, truncateValue);
-
-  // These class names apply to all types of Decorator.
-  var classNames = cx(blockClass, className, "".concat(blockClass, "--").concat(theme), _defineProperty(_defineProperty(_defineProperty(_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.createElement("span", _extends({}, rest, getDevtoolsProps(componentName), {
-      className: cx(classNames, "".concat(blockClass, "--buttons"), _defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
-      ref: ref
-    }), /*#__PURE__*/React__default.createElement("button", {
-      className: "".concat(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"),
-      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.createElement("button", _extends({}, rest, getDevtoolsProps(componentName), {
-      className: cx(classNames, "".concat(blockClass, "--button"), _defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
-      disabled: disabled,
-      onClick: !disabled && handleOnClick,
-      onContextMenu: !disabled && handleOnContextMenu,
-      ref: ref,
-      type: "button"
-    }), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__label"),
-      title: _labelTitle || label
-    }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__value"),
-      title: valueTitle || value
-    }, _value));
-  }
-
-  // RETURN LINK
-  if (kind === 'link') {
-    return /*#__PURE__*/React__default.createElement("a", _extends({}, rest, getDevtoolsProps(componentName), {
-      href: href,
-      className: cx(classNames, "".concat(blockClass, "--link")),
-      onClick: handleOnClick,
-      onContextMenu: handleOnContextMenu,
-      ref: ref
-    }), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__label"),
-      title: _labelTitle || label
-    }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__value"),
-      title: valueTitle || value
-    }, _value));
-  }
-
-  // RETURN DEFAULT (NON-INTERACTIVE)
-  if (kind === 'default') {
-    return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, getDevtoolsProps(componentName), {
-      className: cx(classNames, "".concat(blockClass, "--default")),
-      ref: ref
-    }), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__label"),
-      title: _labelTitle || label
-    }, !hideIcon && /*#__PURE__*/React__default.createElement(DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(blockClass, "__value"),
-      title: valueTitle || value
-    }, _value));
-  }
+var Decorator = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var validProps = prepareProps(props, ['disabled', 'kind', 'onClick', 'onClickLabel', 'onClickValue', 'onContextMenu', 'onContextMenuLabel', 'onContextMenuValue']);
+  return /*#__PURE__*/React__default.createElement(DecoratorBase, _extends({
+    ref: ref
+  }, validProps, {
+    kind: "default"
+  }, getDevtoolsProps(componentName)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -216,70 +42,14 @@ Decorator.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
-  /**
-   * `disabled` only applies if `kind` is "single-button" or "dual-button".
-   */
-  disabled: PropTypes.bool,
   /**
    * Do not show the icon, regardless of score.
    */
   hideIcon: PropTypes.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: PropTypes.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: PropTypes.oneOf(['default', 'link', 'single-button', 'dual-button']),
   /**
    * The label for the data.
    */
   label: PropTypes.string,
-  /**
-   * Optional callback function if `kind` is "link" or "single-button".
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onClick: PropTypes.func,
-  /**
-   * Optional callback functions if `kind` is "dual-button" only.
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onClickLabel: PropTypes.func,
-  /**
-   * Optional callback functions if `kind` is "dual-button" only.
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onClickValue: PropTypes.func,
-  /**
-   * Optional callback function if `kind` is "link" or "single-button".
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onContextMenu: PropTypes.func,
-  /**
-   * Optional callback functions if `kind` is "dual-button" only.
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onContextMenuLabel: PropTypes.func,
-  /**
-   * Optional callback functions if `kind` is "dual-button" only.
-   *
-   * Returns two objects: `event` and `{ score, label, value, magnitude }`
-   */
-  onContextMenuValue: PropTypes.func,
   /**
    * Used in conjunction with `scoreThresholds`, determines the color, shape, and type of magnitude of the icon.
    *
@@ -301,13 +71,13 @@ Decorator.propTypes = {
    */
   scoreThresholds: PropTypes.arrayOf(PropTypes.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.
    */
@@ -322,13 +92,6 @@ Decorator.propTypes = {
   theme: PropTypes.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: PropTypes.oneOfType([PropTypes.oneOf(['end', 'start']), PropTypes.shape({
     maxLength: PropTypes.number,

package/es/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';