@carbon/ibm-products 2.0.0-rc.28 → 2.0.0-rc.29

package/es/components/AddSelect/AddSelectColumn.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["columnInputPlaceholder", "filterByLabel", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath"];
+var _excluded = ["columnInputPlaceholder", "filterByLabel", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath", "sortByLabel"];
 //
 // Copyright IBM Corp. 2022, 2022
 //
@@ -33,6 +33,7 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
       path = _ref.path,
       setMultiSelection = _ref.setMultiSelection,
       setPath = _ref.setPath,
+      sortByLabel = _ref.sortByLabel,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var carbonPrefix = usePrefix();
@@ -183,7 +184,8 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
     setSortDirection: setSortDirection,
     sortAttribute: sortAttribute,
     sortDirection: sortDirection,
-    sortBy: sortBy
+    sortBy: sortBy,
+    sortByLabel: sortByLabel
   }), filterByOpts.length > 0 && /*#__PURE__*/React.createElement(OverflowMenu, {
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/React.createElement(Filter, _extends({
@@ -192,7 +194,8 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
     },
     className: "".concat(colClass, "-overflow"),
     flipped: true,
-    ariaLabel: filterByLabel
+    ariaLabel: filterByLabel,
+    iconDescription: filterByLabel
   }, filterByOpts.map(function (opt) {
     return /*#__PURE__*/React.createElement("div", {
       key: opt,
@@ -236,7 +239,9 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
     setMultiSelection: setMultiSelection,
     parentId: selectedItem.id,
     setPath: setPath,
-    path: path
+    path: path,
+    sortByLabel: sortByLabel,
+    filterByLabel: filterByLabel
   }, props)));
 };
 AddSelectColumn.propTypes = {
@@ -248,6 +253,7 @@ AddSelectColumn.propTypes = {
   parentId: PropTypes.string,
   path: PropTypes.array,
   setMultiSelection: PropTypes.func,
-  setPath: PropTypes.func
+  setPath: PropTypes.func,
+  sortByLabel: PropTypes.string
 };
 AddSelectColumn.displayName = componentName;

package/es/components/AddSelect/AddSelectFilter.js

@@ -13,7 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 import React, { useState } from 'react';
-import { Button, ButtonSet, Dropdown, Search, Tag } from '@carbon/react';
+import { Button, ButtonSet, Dropdown, Search, Tag, Layer } from '@carbon/react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { Filter } from '@carbon/react/icons';
@@ -116,16 +116,17 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
     className: filterBtnClassnames,
     size: "md",
     tooltipPosition: "left"
-  }), open && /*#__PURE__*/React.createElement("div", {
-    className: blockClass
+  }), open && /*#__PURE__*/React.createElement(Layer, {
+    className: blockClass,
+    level: 1
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-content")
   }, /*#__PURE__*/React.createElement("p", null, filtersLabel), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-opts")
   }, filterOpts.map(function (filterOpts) {
     return /*#__PURE__*/React.createElement(Dropdown, {
-      id: filterOpts.id,
       key: filterOpts.id,
+      id: filterOpts.id,
       titleText: filterOpts.label,
       items: filterOpts.opts,
       onChange: function onChange(value) {

package/es/components/AddSelect/AddSelectRow.js

@@ -8,7 +8,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 // LICENSE file in the root directory of this source tree.
 //
 import React, { useRef, useEffect, useCallback } from 'react';
-import { Button, Dropdown } from '@carbon/react';
+import { Button, Dropdown, Layer } from '@carbon/react';
 import { ChevronRight, View } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -149,7 +149,7 @@ export var AddSelectRow = function AddSelectRow(_ref) {
     item: item,
     selected: selected,
     onClick: handleMultiSelection
-  }), hasModifiers && /*#__PURE__*/React.createElement(Dropdown, {
+  }), hasModifiers && /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(Dropdown, {
     id: "add-select-modifier-".concat(item.id),
     type: "inline",
     items: modifiers.options,
@@ -161,7 +161,7 @@ export var AddSelectRow = function AddSelectRow(_ref) {
       var selectedItem = _ref3.selectedItem;
       return modifierHandler(item.id, selectedItem);
     }
-  })) : /*#__PURE__*/React.createElement(AddSelectFormControl, {
+  }))) : /*#__PURE__*/React.createElement(AddSelectFormControl, {
     type: "radio",
     item: item,
     selected: selected,

package/es/components/AddSelect/AddSelectSort.js

@@ -54,7 +54,8 @@ export var AddSelectSort = function AddSelectSort(_ref) {
     },
     className: "".concat(blockClass, "_overflow"),
     flipped: true,
-    ariaLabel: sortByLabel
+    ariaLabel: sortByLabel,
+    iconDescription: sortByLabel
   }, sortByOpts.map(function (opt) {
     return /*#__PURE__*/React.createElement(OverflowMenuItem, {
       className: "".concat(blockClass, "_overflow-item"),

package/es/components/Datagrid/index.js

@@ -22,5 +22,6 @@ export { default as useSelectAllWithToggle } from './useSelectAllToggle';
 export { default as useColumnCenterAlign } from './useColumnCenterAlign';
 export { default as useColumnOrder } from './useColumnOrder';
 export { default as useInlineEdit } from './useInlineEdit';
+export { default as useEditableCell } from './useEditableCell';
 export { default as useFiltering } from './useFiltering';
 export { getAutoSizedColumnWidth } from './utils/getAutoSizedColumnWidth';

package/es/components/Datagrid/useEditableCell.js

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+import useInlineEdit from './useInlineEdit';
+
+var useEditableCell = function useEditableCell(hooks) {
+  useInlineEdit(hooks, 'usingEditableCell');
+};
+
+export default useEditableCell;

package/es/components/Datagrid/useInlineEdit.js

@@ -1,19 +1,24 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2022
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2022, 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.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { pkg } from '../../settings';
 import cx from 'classnames';
 import { InlineEditCell } from './Datagrid/addons/InlineEdit/InlineEditCell';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
-var useInlineEdit = function useInlineEdit(hooks) {
+var useInlineEdit = function useInlineEdit(hooks, usingEditableCell) {
+  useEffect(function () {
+    if (!usingEditableCell) {
+      pkg.checkReportFeatureEnabled('Datagrid.useInlineEdit');
+    }
+  }, [usingEditableCell]);
+
   var addInlineEdit = function addInlineEdit(props, _ref) {
     var _cell$column, _cell$column$inlineEd, _instance$columns$fil;
 
@@ -44,9 +49,9 @@ var useInlineEdit = function useInlineEdit(hooks) {
     }
 
     return [props, {
-      className: cx("".concat(blockClass, "__cell"), _defineProperty({}, "".concat(blockClass, "__cell-inline-edit"), true)),
+      className: cx("".concat(blockClass, "__cell"), _defineProperty({}, "".concat(blockClass, "__cell-inline-edit"), !!usingEditableCell || pkg.isFeatureEnabled('Datagrid.useInlineEdit') ? true : '')),
       role: 'gridcell',
-      children: /*#__PURE__*/React.createElement(React.Fragment, null, inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), !inlineEditType && /*#__PURE__*/React.createElement(InlineEditCell, {
+      children: (!!usingEditableCell || pkg.isFeatureEnabled('Datagrid.useInlineEdit')) && /*#__PURE__*/React.createElement(React.Fragment, null, inlineEditType === 'text' && renderInlineEditComponent(inlineEditType), inlineEditType === 'number' && renderInlineEditComponent(inlineEditType), inlineEditType === 'selection' && renderInlineEditComponent(inlineEditType), inlineEditType === 'date' && renderInlineEditComponent(inlineEditType), !inlineEditType && /*#__PURE__*/React.createElement(InlineEditCell, {
         config: columnInlineEditConfig,
         tabIndex: -1,
         value: cell.value,
@@ -63,7 +68,7 @@ var useInlineEdit = function useInlineEdit(hooks) {
   hooks.getCellProps.push(addInlineEdit);
   hooks.useInstance.push(function (instance) {
     Object.assign(instance, {
-      withInlineEdit: true
+      withInlineEdit: !!usingEditableCell || pkg.isFeatureEnabled('Datagrid.useInlineEdit') ? true : false
     });
   });
 };

package/es/components/ExampleComponent/ExampleDeprecatedComponent.js

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+import React from 'react';
+import { pkg } from '../../settings';
+import { ExampleComponent } from './ExampleComponent';
+var componentName = 'ExampleDeprecatedComponent'; // This is NOT a full component example. It is only intended to show the deprecation of a component.
+
+export var ExampleDeprecatedComponent = function ExampleDeprecatedComponent() {
+  return /*#__PURE__*/React.createElement(ExampleComponent, {
+    primaryButtonLabel: "primary",
+    secondaryButtonLabel: "secondary"
+  });
+}; // example of a deprecation warning
+
+ExampleDeprecatedComponent.deprecated = {
+  level: 'warn',
+  details: "This an example component deprecation message used by 'checkComponentEnabled'."
+}; // The component enable should log the deprecation
+
+ExampleDeprecatedComponent = pkg.checkComponentEnabled(ExampleDeprecatedComponent, componentName);

package/es/components/Tearsheet/Tearsheet.js

@@ -187,6 +187,11 @@ Tearsheet.propTypes = _objectSpread({
    */
   portalTarget: PropTypes.node,
 
+  /**
+   * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+   */
+  selectorPrimaryFocus: PropTypes.string,
+
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/es/components/index.js

@@ -18,7 +18,6 @@ export { ExportModal } from './ExportModal';
 export { ExpressiveCard } from './ExpressiveCard';
 export { HTTPError403, HTTPError404, HTTPErrorOther } from './HTTPErrors';
 export { ImportModal } from './ImportModal';
-export { ModifiedTabs } from './ModifiedTabs';
 export { MultiAddSelect } from './MultiAddSelect';
 export { NotificationsPanel } from './NotificationsPanel';
 export { PageHeader } from './PageHeader';

package/es/global/js/package-settings.js

@@ -59,7 +59,6 @@ var defaults = {
     WebTerminalContentWrapper: true,
     WebTerminalProvider: true,
     // other public components not yet reviewed and released:
-    ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
@@ -78,7 +77,8 @@ var defaults = {
   feature: {
     'a-new-feature': false,
     'default-portal-target-body': true,
-    'Datagrid.useInfiniteScroll': false
+    'Datagrid.useInfiniteScroll': false,
+    'Datagrid.useInlineEdit': false
   }
 };
 

package/es/settings.js

@@ -2,32 +2,51 @@ import { Canary } from './components/_Canary';
 import pkgSettings from './global/js/package-settings';
 import React from 'react';
 import { themes } from '@carbon/themes';
+import pconsole from './global/js/utils/pconsole';
 export var carbon = {
   get themes() {
     return themes;
   },
 
   prefix: 'cds'
+};
+
+var componentDeprecatedWarning = function componentDeprecatedWarning(name, details) {
+  return "Carbon for IBM Products (WARNING): Component \"".concat(name, "\" is deprecated. ").concat(details);
+};
+
+pkgSettings.logDeprecated = function (component, name) {
+  if (component !== null && component !== void 0 && component.deprecated) {
+    var _pconsole$level;
+
+    var _component$deprecated = component.deprecated,
+        level = _component$deprecated.level,
+        details = _component$deprecated.details;
+    var logUsing = (_pconsole$level = pconsole === null || pconsole === void 0 ? void 0 : pconsole[level]) !== null && _pconsole$level !== void 0 ? _pconsole$level : pconsole.error;
+    logUsing(componentDeprecatedWarning(name || component.displayName, details));
+  }
 }; // Check that a component is enabled. This function returns a stub which checks
 // the component status on first use and then renders as the component or as
 // a Canary placeholder initialized with the name of the replaced component.
 // Note that the returned stub carries any other properties which had already
 // been assigned (eg propTypes, displayName, etc).
 
+
 pkgSettings.checkComponentEnabled = function (component, name) {
   if (component.render) {
     // The component is a forward-ref, so make a stub forward-ref.
     var forward = /*#__PURE__*/React.forwardRef(function (props, ref) {
-      return (// Replace the stub's render fn so this test only happens once.
-        (forward.render = pkgSettings.isComponentEnabled(name) || !pkgSettings.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
-        // replace the stub's render fn with the component's render fn.
-        component.render : // Note that Canary is a direct render fn (not a forward-ref) and
-        // will ignore the passed props and ref (if any)
-        Canary.bind(undefined, {
-          componentName: name
-        }))( // Call it now (after this it will be directly called).
-        props, ref)
-      );
+      pkgSettings.logDeprecated(component, name); // may log don't care about result
+      // Replace the stub's render fn so this test only happens once.
+
+      return (forward.render = pkgSettings.isComponentEnabled(name) || !pkgSettings.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
+      // replace the stub's render fn with the component's render fn.
+      component.render : // Note that Canary is a direct render fn (not a forward-ref) and
+      // will ignore the passed props and ref (if any)
+      Canary.bind(undefined, {
+        componentName: name
+      }))( // Call it now (after this it will be directly called).
+      props, ref);
     }); // Transfer object properties already assigned (eg propTypes, displayName)
     // then merge in the stub forward-ref which checks the component status
     // when first used.
@@ -36,16 +55,17 @@ pkgSettings.checkComponentEnabled = function (component, name) {
   } else {
     // The component is a direct render fn, so make a stub render fn.
     var _render = function render(props) {
-      return (// Replace the stub render fn so this test only happens once.
-        (_render = pkgSettings.isComponentEnabled(name) || !pkgSettings.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
-        // replace the stub render fn with the component render fn.
-        component : // Replace the stub render fn with the Canary render fn, which will
-        // ignore the passed props.
-        Canary.bind(undefined, {
-          componentName: name
-        }))( // Call it now (after this it will be directly called).
-        props)
-      );
+      pkgSettings.logDeprecated(component, name); // may log don't care about result
+      // Replace the stub render fn so this test only happens once.
+
+      return (_render = pkgSettings.isComponentEnabled(name) || !pkgSettings.isComponentPublic(name) ? // If the component is enabled, or if it's not a public component,
+      // replace the stub render fn with the component render fn.
+      component : // Replace the stub render fn with the Canary render fn, which will
+      // ignore the passed props.
+      Canary.bind(undefined, {
+        componentName: name
+      }))( // Call it now (after this it will be directly called).
+      props);
     }; // Transfer object properties already assigned (eg propTypes, displayName)
     // to a function which calls the stub render fn which checks the component
     // status when first used.

package/lib/components/AboutModal/AboutModal.js

@@ -33,9 +33,7 @@ var _devtools = require("../../global/js/utils/devtools");
 
 var _react2 = require("@carbon/react");
 
-var _propsHelper = require("../../global/js/utils/props-helper");
-
-var _excluded = ["additionalInfo", "className", "closeIconDescription", "content", "copyrightText", "legalText", "links", "logo", "modalAriaLabel", "onClose", "open", "tabListAriaLabel", "title"];
+var _excluded = ["additionalInfo", "className", "closeIconDescription", "copyrightText", "content", "links", "logo", "modalAriaLabel", "onClose", "open", "title", "version"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -61,16 +59,15 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var additionalInfo = _ref.additionalInfo,
       className = _ref.className,
       closeIconDescription = _ref.closeIconDescription,
-      content = _ref.content,
       copyrightText = _ref.copyrightText,
-      legalText = _ref.legalText,
+      content = _ref.content,
       links = _ref.links,
       logo = _ref.logo,
       modalAriaLabel = _ref.modalAriaLabel,
       onClose = _ref.onClose,
       open = _ref.open,
-      tabListAriaLabel = _ref.tabListAriaLabel,
       title = _ref.title,
+      version = _ref.version,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(true),
@@ -99,8 +96,8 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   });
   return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
-    className, // Apply any supplied class names to the main HTML element.
-    (0, _defineProperty2.default)({}, "".concat(blockClass, "--with-tabs"), additionalInfo && additionalInfo.length > 1)),
+    className // Apply any supplied class names to the main HTML element.
+    ),
     "aria-label": modalAriaLabel
   }, _objectSpread({
     onClose: onClose,
@@ -123,59 +120,42 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__body-content"),
     ref: contentRef,
     id: contentId
-  }, content, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__version")
+  }, version), links && links.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__links-container")
-  }, links && links.length > 0 && links.map(function (link, i) {
+  }, links.map(function (link, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
     }, link);
-  })), legalText && /*#__PURE__*/_react.default.createElement("p", {
-    className: "".concat(blockClass, "__legal-text")
-  }, legalText), copyrightText && /*#__PURE__*/_react.default.createElement("p", {
+  })), content && /*#__PURE__*/_react.default.createElement("p", {
+    className: "".concat(blockClass, "__content")
+  }, content), copyrightText && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__copyright-text")
-  }, copyrightText))), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
+  }, copyrightText))), additionalInfo && additionalInfo.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.Theme, {
+    theme: "g100"
+  }, /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
     className: "".concat(blockClass, "__footer")
-  }, additionalInfo && additionalInfo.length > 0 && (additionalInfo.length === 1 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
-    className: "".concat(blockClass, "__version-label")
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "".concat(blockClass, "__footer-label")
   }, additionalInfo[0].label), /*#__PURE__*/_react.default.createElement("p", {
-    className: "".concat(blockClass, "__version-number")
-  }, additionalInfo[0].content)) : /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__tab-container")
-  }, /*#__PURE__*/_react.default.createElement(_react2.Tabs, null, /*#__PURE__*/_react.default.createElement(_react2.TabList, {
-    "aria-label": tabListAriaLabel
-  }, additionalInfo.map(function (tab, index) {
-    return /*#__PURE__*/_react.default.createElement(_react2.Tab, {
-      key: index
-    }, tab.label);
-  })), /*#__PURE__*/_react.default.createElement(_react2.TabPanels, null, additionalInfo.map(function (tab, index) {
-    return /*#__PURE__*/_react.default.createElement(_react2.TabPanel, {
-      key: index
-    }, tab.content);
-  })))))));
+    className: "".concat(blockClass, "__footer-content")
+  }, additionalInfo[0].content))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 
 exports.AboutModal = AboutModal;
 exports.AboutModal = AboutModal = _settings.pkg.checkComponentEnabled(AboutModal, componentName);
-AboutModal.displayName = componentName;
-
-var tabListAriaLabelRequiredProps = function tabListAriaLabelRequiredProps(type) {
-  return (0, _propsHelper.isRequiredIf)(type, function (_ref2) {
-    var additionalInfo = _ref2.additionalInfo;
-    return additionalInfo === null || additionalInfo === void 0 ? void 0 : additionalInfo.length;
-  });
-}; // The types and DocGen commentary for the component props,
+AboutModal.displayName = componentName; // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 
-
 AboutModal.propTypes = {
   /**
-   * Additional information to be displayed in the footer. Can be used for
-   * version information and/or a set of tabs with various contents. If only
-   * one set of additional information is provided then no tabs are
-   * displayed and the label and content are just displayed one above the
-   * other in the footer.
+   * If you are legally required to display logos of technologies used
+   * to build your product you can provide this in the additionalInfo.
+   * Additional information will be displayed in the footer. The label
+   * and content are displayed one above the other in the footer (optional)
    */
   additionalInfo: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.string,
@@ -193,26 +173,21 @@ AboutModal.propTypes = {
   closeIconDescription: _propTypes.default.string.isRequired,
 
   /**
-   * A summary that appears immediately beneath the title, and might
-   * include information such as: version name, server name,
-   * user name, user role, browser version, browser OS etc.
-   */
-  content: _propTypes.default.node.isRequired,
-
-  /**
-   * Trademark and copyright information. Suggested format for copyright -
-   * "Copyright © 2018 Company".
+   * Subhead text providing any relevant product disclaimers including
+   * legal information (optional)
    */
-  copyrightText: _propTypes.default.node,
+  content: _propTypes.default.node,
 
   /**
-   * Text providing legal information.
+   * Trademark and copyright information. Displays first year of
+   * product release to current year.
    */
-  legalText: _propTypes.default.node,
+  copyrightText: _propTypes.default.string.isRequired,
 
   /**
-   * An array of Carbon `Link` components that contain links to additional
-   * information.
+   * An array of Carbon `Link` component if there are additional information
+   * to call out within the card. The about modal should be used to display
+   * the product information and not where users go to find help (optional)
    */
   links: _propTypes.default.arrayOf(_propTypes.default.element),
 
@@ -238,12 +213,15 @@ AboutModal.propTypes = {
   open: _propTypes.default.bool,
 
   /**
-   * Specifies the tab list aria label
+   * Header text that provides the product name. The IBM Services logo
+   * consists of two discrete, but required, elements: the iconic
+   * IBM 8-bar logo represented alongside the IBM Services logotype.
+   * Please follow these guidelines to ensure proper execution.
    */
-  tabListAriaLabel: tabListAriaLabelRequiredProps(_propTypes.default.string),
+  title: _propTypes.default.node.isRequired,
 
   /**
-   * The title of the AboutModal is usually the product or service name.
+   * Text that provides information on the version number of your product.
    */
-  title: _propTypes.default.node.isRequired
+  version: _propTypes.default.string.isRequired
 };

package/lib/components/AddSelect/AddSelectBody.js

@@ -51,7 +51,7 @@ var _usePath2 = _interopRequireDefault(require("./hooks/usePath"));
 
 var _settings = require("../../settings");
 
-var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "defaultModifiers", "description", "filterByLabel", "globalFilterOpts", "globalFiltersLabel", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "illustrationTheme", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "normalizedItems", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "searchResultsTitle", "title", "useNormalizedItems"];
+var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "defaultModifiers", "description", "filterByLabel", "globalFilterOpts", "globalFiltersLabel", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "illustrationTheme", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "normalizedItems", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "searchResultsTitle", "sortByLabel", "title", "useNormalizedItems"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -102,6 +102,7 @@ var AddSelectBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       open = _ref.open,
       portalTarget = _ref.portalTarget,
       searchResultsTitle = _ref.searchResultsTitle,
+      sortByLabel = _ref.sortByLabel,
       title = _ref.title,
       useNormalizedItems = _ref.useNormalizedItems,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -326,7 +327,8 @@ var AddSelectBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     items: itemsToDisplay,
     columnInputPlaceholder: columnInputPlaceholder,
     header: (_path$ = path[0]) === null || _path$ === void 0 ? void 0 : _path$.title,
-    filterByLabel: filterByLabel
+    filterByLabel: filterByLabel,
+    sortByLabel: sortByLabel
   }))) : /*#__PURE__*/_react.default.createElement("div", null, hasResults ? /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, commonListProps, {
     filteredItems: itemsToDisplay,
     modifiers: items.modifiers,

package/lib/components/AddSelect/AddSelectColumn.js

@@ -39,7 +39,7 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
 var _useParentSelect2 = _interopRequireDefault(require("./hooks/useParentSelect"));
 
-var _excluded = ["columnInputPlaceholder", "filterByLabel", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath"];
+var _excluded = ["columnInputPlaceholder", "filterByLabel", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath", "sortByLabel"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -59,6 +59,7 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
       path = _ref.path,
       setMultiSelection = _ref.setMultiSelection,
       setPath = _ref.setPath,
+      sortByLabel = _ref.sortByLabel,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var carbonPrefix = (0, _react2.usePrefix)();
 
@@ -207,7 +208,8 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     setSortDirection: setSortDirection,
     sortAttribute: sortAttribute,
     sortDirection: sortDirection,
-    sortBy: sortBy
+    sortBy: sortBy,
+    sortByLabel: sortByLabel
   }), filterByOpts.length > 0 && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
     renderIcon: function renderIcon(props) {
       return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
@@ -216,7 +218,8 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     },
     className: "".concat(colClass, "-overflow"),
     flipped: true,
-    ariaLabel: filterByLabel
+    ariaLabel: filterByLabel,
+    iconDescription: filterByLabel
   }, filterByOpts.map(function (opt) {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: opt,
@@ -260,7 +263,9 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     setMultiSelection: setMultiSelection,
     parentId: selectedItem.id,
     setPath: setPath,
-    path: path
+    path: path,
+    sortByLabel: sortByLabel,
+    filterByLabel: filterByLabel
   }, props)));
 };
 
@@ -274,6 +279,7 @@ AddSelectColumn.propTypes = {
   parentId: _propTypes.default.string,
   path: _propTypes.default.array,
   setMultiSelection: _propTypes.default.func,
-  setPath: _propTypes.default.func
+  setPath: _propTypes.default.func,
+  sortByLabel: _propTypes.default.string
 };
 AddSelectColumn.displayName = componentName;