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

package/es/components/AboutModal/AboutModal.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { unstable_FeatureFlags, ComposedModal, ModalHeader, ModalBody, Theme, ModalFooter } from '@carbon/react';
 import React__default, { useRef, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
@@ -16,11 +16,9 @@ import { pkg } from '../../settings.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 
-var _excluded = ["additionalInfo", "className", "closeIconDescription", "copyrightText", "content", "links", "logo", "modalAriaLabel", "onClose", "open", "portalTarget", "title", "version"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--about-modal");
-var componentName = 'AboutModal';
+const blockClass = `${pkg.prefix}--about-modal`;
+const componentName = 'AboutModal';
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -30,37 +28,40 @@ var componentName = 'AboutModal';
  * should be immediately apparent to the user, with a clear and obvious path
  * to completion.
  */
-var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var additionalInfo = _ref.additionalInfo,
-    className = _ref.className,
-    closeIconDescription = _ref.closeIconDescription,
-    copyrightText = _ref.copyrightText,
-    content = _ref.content,
-    links = _ref.links,
-    logo = _ref.logo,
-    modalAriaLabel = _ref.modalAriaLabel,
-    onClose = _ref.onClose,
-    open = _ref.open,
-    portalTargetIn = _ref.portalTarget,
-    title = _ref.title,
-    version = _ref.version,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var bodyRef = useRef(null);
-  var localRef = useRef(undefined);
-  var modalRef = ref || localRef;
-  var contentRef = useRef(null);
-  var contentId = uuidv4();
-  var renderPortalUse = usePortalTarget(portalTargetIn);
-  var _useFocus = useFocus(modalRef),
-    claimFocus = _useFocus.claimFocus;
+let AboutModal = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    additionalInfo,
+    className,
+    closeIconDescription,
+    copyrightText,
+    content,
+    links,
+    logo,
+    modalAriaLabel,
+    onClose,
+    open,
+    portalTarget: portalTargetIn,
+    title,
+    version,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const bodyRef = useRef(null);
+  const localRef = useRef(undefined);
+  const modalRef = ref || localRef;
+  const contentRef = useRef(null);
+  const contentId = uuidv4();
+  const renderPortalUse = usePortalTarget(portalTargetIn);
+  const {
+    claimFocus
+  } = useFocus(modalRef);
 
   // We can't add a ref directly to the ModalBody, so track it in a ref
   // as the parent of the current bodyRef element
-  useEffect(function () {
-    var _contentRef$current;
-    bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
+  useEffect(() => {
+    bodyRef.current = contentRef.current?.parentElement;
   }, [bodyRef]);
-  useEffect(function () {
+  useEffect(() => {
     if (open) {
       claimFocus();
     }
@@ -74,40 +75,37 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className // Apply any supplied class names to the main HTML element.
     ),
     "aria-label": modalAriaLabel,
-    ref: modalRef
-  }, _objectSpread2({
-    onClose: onClose,
-    open: open
-  }, getDevtoolsProps(componentName))), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__logo")
+    ref: modalRef,
+    onClose,
+    open
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__logo`
   }, logo), /*#__PURE__*/React__default.createElement(ModalHeader, {
-    className: "".concat(blockClass, "__header"),
+    className: `${blockClass}__header`,
     closeModal: onClose,
     iconDescription: closeIconDescription,
     label: title,
-    labelClassName: "".concat(blockClass, "__title")
+    labelClassName: `${blockClass}__title`
   }), /*#__PURE__*/React__default.createElement(ModalBody, {
-    className: "".concat(blockClass, "__body")
+    className: `${blockClass}__body`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__body-content"),
+    className: `${blockClass}__body-content`,
     ref: contentRef,
     id: contentId
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__version")
+    className: `${blockClass}__version`
   }, version), links && links.length > 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__links-container")
-  }, links.map(function (link, i) {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: i
-    }, link);
-  })), content && /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "__content")
+    className: `${blockClass}__links-container`
+  }, links.map((link, i) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    key: i
+  }, link))), content && /*#__PURE__*/React__default.createElement("p", {
+    className: `${blockClass}__content`
   }, content), copyrightText && /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "__copyright-text")
+    className: `${blockClass}__copyright-text`
   }, copyrightText))), additionalInfo && /*#__PURE__*/React__default.createElement(Theme, {
     theme: "g100"
   }, /*#__PURE__*/React__default.createElement(ModalFooter, {
-    className: "".concat(blockClass, "__footer")
+    className: `${blockClass}__footer`
   }, additionalInfo)))));
 });
 

package/es/components/ActionBar/ActionBar.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useRef } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -17,16 +17,12 @@ import { ActionBarItem } from './ActionBarItem.js';
 import { ActionBarOverflowItems } from './ActionBarOverflowItems.js';
 import { useOverflowItems } from '../../global/js/hooks/useOverflowItems/useOverflowItems.js';
 
-var _excluded = ["actions", "className", "maxVisible", "menuOptionsClass", "onWidthChange", "overflowAriaLabel", "overflowMenuRef", "rightAlign"],
-  _excluded2 = ["id"],
-  _excluded3 = ["key", "id"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--action-bar");
-var componentName = 'ActionBar';
+const blockClass = `${pkg.prefix}--action-bar`;
+const componentName = 'ActionBar';
 
 // Default values for props
-var defaults = {
+const defaults = {
   actions: Object.freeze([])
 };
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -34,36 +30,42 @@ var defaults = {
 /**
  * The ActionBar is used internally by the PageHeader to wrap ActionBarItems.
  */
-var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _ref$actions = _ref.actions,
-    actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
-    className = _ref.className,
-    maxVisible = _ref.maxVisible,
-    menuOptionsClass = _ref.menuOptionsClass,
-    onWidthChange = _ref.onWidthChange,
-    overflowAriaLabel = _ref.overflowAriaLabel,
-    overflowMenuRef = _ref.overflowMenuRef,
-    rightAlign = _ref.rightAlign,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var internalId = useRef(uuidv4());
-  var refDisplayedItems = useRef(null);
-  var backupRef = useRef(null);
-  var localRef = ref || backupRef;
-  var _offsetRef = useRef(null);
-  var offsetRef = overflowMenuRef || _offsetRef;
-  var _items = actions.map(function (action) {
-    return _objectSpread2({
-      id: action === null || action === void 0 ? void 0 : action.key
-    }, action);
-  });
-  var _useOverflowItems = useOverflowItems(_items, localRef, offsetRef, maxVisible, onWidthChange),
-    visibleItems = _useOverflowItems.visibleItems,
-    hiddenItems = _useOverflowItems.hiddenItems,
-    itemRefHandler = _useOverflowItems.itemRefHandler,
-    offsetRefHandler = _useOverflowItems.offsetRefHandler;
-  var overflowMenuItems = hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.map(function (_ref2) {
-    var key = _ref2.id,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
+let ActionBar = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    actions = defaults.actions,
+    className,
+    maxVisible,
+    menuOptionsClass,
+    onWidthChange,
+    overflowAriaLabel,
+    overflowMenuRef,
+    rightAlign,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const internalId = useRef(uuidv4());
+  const refDisplayedItems = useRef(null);
+  const backupRef = useRef(null);
+  const localRef = ref || backupRef;
+  const _offsetRef = useRef(null);
+  const offsetRef = overflowMenuRef || _offsetRef;
+  const _items = actions.map(action => ({
+    id: action?.key,
+    ...action
+  }));
+  const {
+    visibleItems,
+    hiddenItems,
+    itemRefHandler,
+    offsetRefHandler
+  } = useOverflowItems(_items, localRef, offsetRef, maxVisible, onWidthChange);
+  const overflowMenuItems = hiddenItems?.map(_ref2 => {
+    let {
+      id: key,
+      ...rest
+    } = _ref2;
     return /*#__PURE__*/React__default.createElement(ActionBarItem, _extends({}, rest, {
       key: key
     }));
@@ -73,27 +75,29 @@ var ActionBar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     ref: localRef
   }), /*#__PURE__*/React__default.createElement("div", {
     ref: refDisplayedItems,
-    className: cx(["".concat(blockClass, "__displayed-items"), _defineProperty({}, "".concat(blockClass, "__displayed-items--right"), rightAlign)])
-  }, visibleItems.map(function (_ref4) {
-    var key = _ref4.key,
-      id = _ref4.id,
-      rest = _objectWithoutProperties(_ref4, _excluded3);
-    return /*#__PURE__*/React__default.createElement(ActionBarItem, _extends({}, _objectSpread2({
-      id: id
-    }, rest), {
+    className: cx([`${blockClass}__displayed-items`, {
+      [`${blockClass}__displayed-items--right`]: rightAlign
+    }])
+  }, visibleItems.map(_ref3 => {
+    let {
+      key,
+      id,
+      ...rest
+    } = _ref3;
+    return /*#__PURE__*/React__default.createElement(ActionBarItem, _extends({
+      id
+    }, rest, {
       key: key,
-      ref: function ref(node) {
+      ref: node => {
         itemRefHandler(id, node);
       }
     }));
-  }), (overflowMenuItems === null || overflowMenuItems === void 0 ? void 0 : overflowMenuItems.length) > 0 && /*#__PURE__*/React__default.createElement(ActionBarOverflowItems, {
+  }), overflowMenuItems?.length > 0 && /*#__PURE__*/React__default.createElement(ActionBarOverflowItems, {
     menuOptionsClass: menuOptionsClass,
     overflowAriaLabel: overflowAriaLabel,
-    overflowMenuRef: function overflowMenuRef(node) {
-      return offsetRef.current = offsetRefHandler(node);
-    },
+    overflowMenuRef: node => offsetRef.current = offsetRefHandler(node),
     overflowItems: overflowMenuItems,
-    key: "overflow-menu-".concat(internalId.current)
+    key: `overflow-menu-${internalId.current}`
   })));
 });
 ActionBar = pkg.checkComponentEnabled(ActionBar, componentName);
@@ -115,9 +119,11 @@ ActionBar.propTypes = {
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   /**@ts-ignore */
-  actions: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Button.propTypes, [
-  // props not desired from Button.propTypes
-  'kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    /**@ts-ignore */
+    ...prepareProps(Button.propTypes, [
+    // props not desired from Button.propTypes
+    'kind', 'size', 'tooltipPosition', 'tooltipAlignment']),
     id: PropTypes.string,
     // Additional props
     key: PropTypes.string.isRequired,
@@ -128,7 +134,7 @@ ActionBar.propTypes = {
     renderIcon: Button.propTypes.renderIcon.isRequired,
     // We duplicate onClick here to improve DocGen in Storybook
     onClick: PropTypes.func
-  }))),
+  })),
   // expects action bar item as array or in fragment,
   /**
    * className

package/es/components/ActionBar/ActionBarItem.js

@@ -5,36 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import { IconButton } from '@carbon/react';
 
-var _excluded = ["label", "className", "renderIcon"];
 // The block part of our conventional BEM class names (blockClass__E--M).
-var componentName = 'ActionBarItem';
-var blockClass = "".concat(pkg.prefix, "--action-bar-item");
+const componentName = 'ActionBarItem';
+const blockClass = `${pkg.prefix}--action-bar-item`;
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
  * The ActionBarItem is used in the page header to populate the action bar
  */
-var ActionBarItem = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var label = _ref.label,
-    className = _ref.className,
-    renderIcon = _ref.renderIcon,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var Icon = renderIcon;
-  return /*#__PURE__*/React__default.createElement(IconButton, _objectSpread2(_objectSpread2({}, rest), {}, {
-    ref: ref,
+let ActionBarItem = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    label,
+    className,
+    renderIcon,
+    ...rest
+  } = _ref;
+  const Icon = renderIcon;
+  return /*#__PURE__*/React__default.createElement(IconButton, _extends({}, rest, {
+    ref,
     className: cx(blockClass, className),
     kind: 'ghost',
     size: 'md',
     align: 'bottom-end',
     type: 'button',
-    label: label
+    label
   }), Icon ? /*#__PURE__*/React__default.createElement(Icon, null) : null);
 });
 
@@ -42,16 +43,22 @@ var ActionBarItem = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 ActionBarItem = pkg.checkComponentEnabled(ActionBarItem, componentName);
 
 // Props the user cannot change
-var reservedProps = ['kind', 'size', 'align', 'type'];
+const reservedProps = ['kind', 'size', 'align', 'type'];
 // Base props on Carbon Button
-var propTypes = _objectSpread2({}, IconButton.propTypes);
+const propTypes = {
+  ...IconButton.propTypes
+};
 
 // Remove reserved props
-reservedProps.forEach(function (prop) {
+reservedProps.forEach(prop => {
   delete propTypes[prop];
 });
 ActionBarItem.displayName = componentName;
-ActionBarItem.propTypes = _objectSpread2(_objectSpread2({}, propTypes), {}, {
+ActionBarItem.propTypes = {
+  /**
+   * The ...propTypes are copies of those from Button minus the props reserved for use by this component
+   */
+  ...propTypes,
   /* ***************************************
   /
   /  The declarations below allow storybook & DocGen to produce documentation.
@@ -89,6 +96,6 @@ ActionBarItem.propTypes = _objectSpread2(_objectSpread2({}, propTypes), {}, {
    * Optional tab index
    */
   tabIndex: PropTypes.number
-});
+};
 
 export { ActionBarItem };

package/es/components/ActionBar/ActionBarOverflowItems.js

@@ -18,15 +18,17 @@ import { pkg } from '../../settings.js';
 // LICENSE file in the root directory of this source tree.
 //
 
-var blockClass = "".concat(pkg.prefix, "--action-bar-overflow-items");
-var componentName = 'ActionBar';
-var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
-  var className = _ref.className,
-    menuOptionsClass = _ref.menuOptionsClass,
-    overflowItems = _ref.overflowItems,
-    overflowAriaLabel = _ref.overflowAriaLabel,
-    overflowMenuRef = _ref.overflowMenuRef;
-  var internalId = useRef(uuidv4());
+const blockClass = `${pkg.prefix}--action-bar-overflow-items`;
+const componentName = 'ActionBar';
+const ActionBarOverflowItems = _ref => {
+  let {
+    className,
+    menuOptionsClass,
+    overflowItems,
+    overflowAriaLabel,
+    overflowMenuRef
+  } = _ref;
+  const internalId = useRef(uuidv4());
   return /*#__PURE__*/React__default.createElement("div", {
     ref: overflowMenuRef
   }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
@@ -36,22 +38,22 @@ var ActionBarOverflowItems = function ActionBarOverflowItems(_ref) {
     flipped: true,
     iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
     ,
-    menuOptionsClass: cx("".concat(blockClass, "__options"), menuOptionsClass)
-  }, React__default.Children.map(overflowItems, function (item, index) {
+    menuOptionsClass: cx(`${blockClass}__options`, menuOptionsClass)
+  }, React__default.Children.map(overflowItems, (item, index) => {
     // This uses a copy of a menu item option
     // NOTE: Cannot use a real Tooltip icon below as it uses a <button /> the
     // div equivalent below is based on Carbon 10.25.0
-    var ItemIcon = item === null || item === void 0 ? void 0 : item.props.renderIcon;
+    const ItemIcon = item?.props.renderIcon;
     return /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
-      className: "".concat(blockClass, "__item"),
-      onClick: item === null || item === void 0 ? void 0 : item.props.onClick,
+      className: `${blockClass}__item`,
+      onClick: item?.props.onClick,
       itemText: /*#__PURE__*/React__default.createElement("div", {
-        className: "".concat(blockClass, "__item-content"),
-        "aria-describedby": "".concat(internalId.current, "-").concat(index, "--item-label")
+        className: `${blockClass}__item-content`,
+        "aria-describedby": `${internalId.current}-${index}--item-label`
       }, /*#__PURE__*/React__default.createElement("span", {
-        className: "".concat(blockClass, "__item-label"),
-        id: "".concat(internalId.current, "-").concat(index, "--item-label")
-      }, item === null || item === void 0 ? void 0 : item.props.label), typeof (item === null || item === void 0 ? void 0 : item.props.renderIcon) === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item === null || item === void 0 ? void 0 : item.props.renderIcon)
+        className: `${blockClass}__item-label`,
+        id: `${internalId.current}-${index}--item-label`
+      }, item?.props.label), typeof item?.props.renderIcon === 'function' ? /*#__PURE__*/React__default.createElement(ItemIcon, null) : item?.props.renderIcon)
     });
   })));
 };