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

package/es/components/SidePanel/SidePanel.js

@@ -21,7 +21,7 @@ import { motion, AnimatePresence } from 'framer-motion'; // Other standard impor
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { useResizeDetector } from 'react-resize-detector';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 import { moderate02 } from '@carbon/motion';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { allPropTypes } from '../../global/js/utils/props-helper';
@@ -51,7 +51,7 @@ var defaults = {
  */
 
 export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _window, _ref4, _cx4;
+  var _window, _ref5, _cx4;
 
   var actionToolbarButtons = _ref.actionToolbarButtons,
       actions = _ref.actions,
@@ -172,9 +172,10 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [labelText, title]);
   /* istanbul ignore next */
 
-  var handleResize = function handleResize(width, height) {
+  var handleResize = function handleResize(_ref2) {
     var _sidePanelOuter$style3;
 
+    var height = _ref2.height;
     setPanelHeight(height);
     var sidePanelOuter = document.querySelector("#".concat(blockClass, "-outer"));
     var actionsContainer = getActionsContainerElement();
@@ -371,9 +372,9 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   /* istanbul ignore next */
 
-  var handleBlur = function handleBlur(_ref2) {
-    var oldActiveNode = _ref2.target,
-        currentActiveNode = _ref2.relatedTarget;
+  var handleBlur = function handleBlur(_ref3) {
+    var oldActiveNode = _ref3.target,
+        currentActiveNode = _ref3.relatedTarget;
 
     // focus trap should only be set if the side panel is a `slideOver` type
     if (open && sidePanelInnerRef && !slideIn) {
@@ -388,7 +389,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref4 = {}, _defineProperty(_ref4, "".concat(blockClass, "__container-right-placement"), placement === 'right'), _defineProperty(_ref4, "".concat(blockClass, "__container-left-placement"), placement === 'left'), _defineProperty(_ref4, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), _defineProperty(_ref4, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), _defineProperty(_ref4, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _ref4)]);
+  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, _defineProperty(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), _defineProperty(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), _defineProperty(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), _defineProperty(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), _defineProperty(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _ref5)]);
 
   var renderHeader = function renderHeader() {
     var _cx, _cx2;
@@ -427,17 +428,17 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: cx("".concat(blockClass, "__subtitle-text"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-without-title"), !title), _cx2))
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__action-toolbar"), _defineProperty({}, "".concat(blockClass, "__action-toolbar-no-animation"), !animateTitle))
-    }, actionToolbarButtons.map(function (_ref5) {
-      var label = _ref5.label,
-          kind = _ref5.kind,
-          icon = _ref5.icon,
-          tooltipPosition = _ref5.tooltipPosition,
-          tooltipAlignment = _ref5.tooltipAlignment,
-          leading = _ref5.leading,
-          disabled = _ref5.disabled,
-          className = _ref5.className,
-          onClick = _ref5.onClick,
-          rest = _objectWithoutProperties(_ref5, _excluded2);
+    }, actionToolbarButtons.map(function (_ref6) {
+      var label = _ref6.label,
+          kind = _ref6.kind,
+          icon = _ref6.icon,
+          tooltipPosition = _ref6.tooltipPosition,
+          tooltipAlignment = _ref6.tooltipAlignment,
+          leading = _ref6.leading,
+          disabled = _ref6.disabled,
+          className = _ref6.className,
+          onClick = _ref6.onClick,
+          rest = _objectWithoutProperties(_ref6, _excluded2);
 
       return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
         key: label,
@@ -468,10 +469,8 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   var contentRef = ref || sidePanelRef;
-  useResizeDetector({
-    handleHeight: true,
-    onResize: handleResize,
-    targetRef: contentRef
+  useResizeObserver(contentRef, {
+    callback: handleResize
   });
   return /*#__PURE__*/React.createElement(AnimatePresence, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
     id: "".concat(blockClass, "-outer"),
@@ -640,8 +639,8 @@ SidePanel.propTypes = {
    * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
    * This prop is required when using the `slideIn` variant of the side panel.
    */
-  selectorPageContent: PropTypes.string.isRequired.if(function (_ref7) {
-    var slideIn = _ref7.slideIn;
+  selectorPageContent: PropTypes.string.isRequired.if(function (_ref8) {
+    var slideIn = _ref8.slideIn;
     return slideIn;
   }),
 
@@ -669,8 +668,8 @@ SidePanel.propTypes = {
   /**
    * Sets the title text
    */
-  title: PropTypes.string.isRequired.if(function (_ref8) {
-    var labelText = _ref8.labelText;
+  title: PropTypes.string.isRequired.if(function (_ref9) {
+    var labelText = _ref9.labelText;
     return labelText;
   })
 };

package/es/components/TagSet/TagSet.js

@@ -23,7 +23,7 @@ import cx from 'classnames';
 import { TagSetOverflow } from './TagSetOverflow';
 import { TagSetModal } from './TagSetModal';
 import { Tag } from '@carbon/react';
-import { useResizeDetector } from 'react-resize-detector';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { prepareProps, isRequiredIf } from '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';
@@ -222,13 +222,11 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setShowAllModalOpen(false);
   };
 
-  useResizeDetector({
-    onResize: handleSizerTagsResize,
-    targetRef: sizingContainerRef
+  useResizeObserver(sizingContainerRef, {
+    callback: handleSizerTagsResize
   });
-  useResizeDetector({
-    onResize: handleResize,
-    targetRef: tagSetRef
+  useResizeObserver(tagSetRef, {
+    callback: handleResize
   });
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: cx([blockClass, className]),

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/Tearsheet/TearsheetShell.js

@@ -17,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // Import portions of React that are needed.
 import React, { useEffect, useState, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { useResizeDetector } from 'react-resize-detector'; // Other standard imports.
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -91,13 +91,11 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [portalTargetIn]);
   var localRef = useRef();
+  var resizer = useRef(null);
   var modalRef = ref || localRef;
 
-  var _useResizeDetector = useResizeDetector({
-    handleHeight: false
-  }),
-      width = _useResizeDetector.width,
-      resizer = _useResizeDetector.ref;
+  var _useResizeObserver = useResizeObserver(resizer),
+      width = _useResizeObserver.width;
 
   var wide = size === 'wide'; // Keep track of the stack depth and our position in it (1-based, 0=closed)
 

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';
@@ -35,7 +34,7 @@ export { UserProfileImage } from './UserProfileImage';
 export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from './WebTerminal';
 export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
-export { InlineEdit } from './InlineEdit';
+export { EditInPlace } from './EditInPlace';
 export { DataSpreadsheet } from './DataSpreadsheet';
 export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth } from './Datagrid';
 export { EditTearsheet } from './EditTearsheet';

package/es/global/js/hooks/useResizeObserver.js

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/**
+ * 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 { useRef, useState, useLayoutEffect } from 'react';
+export var useResizeObserver = function useResizeObserver(ref) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    callback: null,
+    throttleInterval: 0
+  };
+  var callback = options.callback,
+      throttleInterval = options.throttleInterval;
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      height = _useState4[0],
+      setHeight = _useState4[1];
+
+  var throttleTimeout = useRef(null);
+  var entriesToHandle = useRef(null);
+  useLayoutEffect(function () {
+    if (!(ref !== null && ref !== void 0 && ref.current)) {
+      return;
+    }
+
+    var doCallbacks = function doCallbacks() {
+      if (!(ref !== null && ref !== void 0 && ref.current) || !Array.isArray(entriesToHandle === null || entriesToHandle === void 0 ? void 0 : entriesToHandle.current)) {
+        return;
+      }
+
+      var entry = entriesToHandle.current[0];
+      setWidth(entry.contentRect.width);
+      setHeight(entry.contentRect.height);
+      throttleTimeout.current = null;
+      callback && callback(entry.contentRect);
+    };
+
+    var observer = new ResizeObserver(function (entries) {
+      // always update entriesToHandle
+      entriesToHandle.current = entries;
+
+      if (throttleInterval) {
+        // if a throttleInterval check for running timeout
+        if (throttleTimeout.current === null) {
+          // no live timeout set entries to handle and move on
+          // set up throttle
+          throttleTimeout.current = setTimeout(function () {
+            // do callbacks
+            doCallbacks(); // reset throttle
+
+            throttleTimeout.current = null;
+          }, throttleInterval);
+        }
+      } else {
+        // no throttle do callbacks every time
+        doCallbacks();
+      }
+    }); // observe all refs passed
+
+    observer.observe(ref.current);
+    return function () {
+      observer.disconnect();
+      observer = null;
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref, options]);
+  return {
+    width: width,
+    height: height
+  };
+};

package/es/global/js/hooks/useWindowResize.js

@@ -5,6 +5,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/**
+ * 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 { useRef, useLayoutEffect } from 'react';
 var windowExists = (typeof window === "undefined" ? "undefined" : _typeof(window)) !== "undefined";
 

package/es/global/js/hooks/useWindowScroll.js

@@ -1,4 +1,11 @@
 import _typeof from "@babel/runtime/helpers/typeof";
+
+/**
+ * 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 { useRef, useLayoutEffect } from 'react';
 import { scrollableAncestor } from '../utils/scrollableAncestor';
 var windowExists = (typeof window === "undefined" ? "undefined" : _typeof(window)) !== "undefined";

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

@@ -27,6 +27,7 @@ var defaults = {
     CreateTearsheet: true,
     CreateTearsheetStep: true,
     CreateTearsheetDivider: true,
+    EditInPlace: true,
     EmptyState: true,
     ErrorEmptyState: true,
     ExportModal: true,
@@ -35,8 +36,6 @@ var defaults = {
     HTTPError404: true,
     HTTPErrorOther: true,
     ImportModal: true,
-    InlineEdit: true,
-    InlineEditV1: true,
     MultiAddSelect: true,
     NotificationsPanel: true,
     NoDataEmptyState: true,
@@ -60,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,
@@ -71,8 +69,7 @@ var defaults = {
     EditTearsheet: false,
     EditTearsheetNarrow: false,
     EditFullPage: false,
-    EditUpdateCards: false,
-    InlineEditV2: false
+    EditUpdateCards: false
     /* new component flags here - comment used by generate CLI */
 
   },
@@ -80,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

@@ -19,7 +19,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactResizeDetector = require("react-resize-detector");
+var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -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),
@@ -94,14 +91,13 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     bodyRef.current = contentRef.current.parentElement;
   }, [bodyRef]); // Detect resize of the ModalBody to recalculate whether scrolling is enabled
 
-  (0, _reactResizeDetector.useResizeDetector)({
-    onResize: handleResize,
-    targetRef: bodyRef
+  (0, _useResizeObserver.useResizeObserver)(bodyRef, {
+    callback: handleResize
   });
   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,
@@ -124,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,
@@ -194,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),
 
@@ -239,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
 };