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

package/es/components/Toolbar/ToolbarButton.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useContext } from 'react';
 import { ToolbarContext, blockClass as blockClass$1 } from './Toolbar.js';
 import { p as propTypesExports } from '../../_virtual/index.js';
@@ -13,43 +13,43 @@ import { IconButton } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
-var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription", "label"];
-var blockClass = "".concat(blockClass$1, "__button");
+const blockClass = `${blockClass$1}__button`;
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
-var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _useContext;
-  var _ref$caret = _ref.caret,
-    caret = _ref$caret === void 0 ? false : _ref$caret,
-    children = _ref.children,
-    className = _ref.className,
-    renderIcon = _ref.renderIcon,
-    _ref$iconDescription = _ref.iconDescription,
-    deprecated_iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
-    label = _ref.label,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var Icon = renderIcon;
+let ToolbarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    caret = false,
+    children,
+    className,
+    renderIcon,
+    iconDescription: deprecated_iconDescription = '',
+    label,
+    ...rest
+  } = _ref;
+  const Icon = renderIcon;
   return /*#__PURE__*/React__default.createElement(IconButton, _extends({
-    align: (_useContext = useContext(ToolbarContext)) !== null && _useContext !== void 0 && _useContext.vertical ? 'right' : 'top'
+    align: useContext(ToolbarContext)?.vertical ? 'right' : 'top'
   }, rest, {
-    label: label !== null && label !== void 0 ? label : deprecated_iconDescription,
+    label: label ?? deprecated_iconDescription,
     ref: ref,
-    className: cx(className, _defineProperty({}, "".concat(blockClass, "--caret"), caret)),
+    className: cx(className, {
+      [`${blockClass}--caret`]: caret
+    }),
     kind: "ghost",
     size: "md"
   }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, Icon ? /*#__PURE__*/React__default.createElement(Icon, null) : null, children, caret && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(blockClass, "__caret")
+    className: `${blockClass}__caret`
   })));
 });
-var componentName = 'ToolbarButton';
+const componentName = 'ToolbarButton';
 ToolbarButton.displayName = componentName;
-var deprecatedProps = {
+const deprecatedProps = {
   /**
    * **Deprecated**
    * Specifies the label for the icon button
    *  */
   iconDescription: propTypesExports.string
 };
-ToolbarButton.propTypes = _objectSpread2({
+ToolbarButton.propTypes = {
   /** Determines whether the caret is rendered */
   caret: propTypesExports.bool,
   /** Provide the content of the `ToolbarButton` */
@@ -59,8 +59,9 @@ ToolbarButton.propTypes = _objectSpread2({
   /** Specifies the label for the icon button */
   label: propTypesExports.string.isRequired,
   /** Specifies the icon to be used by the ToolbarButton component */
-  renderIcon: propTypesExports.func.isRequired
-}, deprecatedProps);
+  renderIcon: propTypesExports.func.isRequired,
+  ...deprecatedProps
+};
 ToolbarButton = pkg.checkComponentEnabled(ToolbarButton, componentName);
 
 export { ToolbarButton, blockClass, deprecatedProps };

package/es/components/Toolbar/ToolbarGroup.js

@@ -5,25 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import { p as propTypesExports } from '../../_virtual/index.js';
 import { blockClass } from './Toolbar.js';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
 
-var _excluded = ["className", "children"];
 /** Toolbar groups organize the commands within a toolbar into related groups. */
-var ToolbarGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
+let ToolbarGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    className,
+    children,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: cx("".concat(blockClass, "__group"), className)
+    className: cx(`${blockClass}__group`, className)
   }), children);
 });
-var componentName = 'ToolbarGroup';
+const componentName = 'ToolbarGroup';
 ToolbarGroup.displayName = componentName;
 ToolbarGroup.propTypes = {
   /** Provide the content of the `ToolbarGroup` */

package/es/components/TooltipTrigger/TooltipTrigger.js

@@ -5,17 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } 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';
 
-var _excluded = ["children", "className"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--tooltip-trigger");
-var componentName = 'TooltipTrigger';
+const blockClass = `${pkg.prefix}--tooltip-trigger`;
+const componentName = 'TooltipTrigger';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -23,10 +21,13 @@ var componentName = 'TooltipTrigger';
  * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
  * no blanked button.
  */
-var TooltipTrigger = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded);
+let TooltipTrigger = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button",
     ref: ref

package/es/components/TruncatedList/TruncatedList.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { Children, useState, useRef, useEffect } from 'react';
 import { pkg, carbon } from '../../settings.js';
 import { Button } from '@carbon/react';
@@ -14,67 +14,52 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
-var _excluded = ["children", "className", "as", "buttonClassName", "collapsedItemsLimit", "expandedItemsLimit", "onClick", "viewLessLabel", "viewMoreLabel"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--truncated-list");
-var componentName = 'TruncatedList';
-var defaults = {
+const blockClass = `${pkg.prefix}--truncated-list`;
+const componentName = 'TruncatedList';
+const defaults = {
   as: 'ul',
   collapsedItemsLimit: 5,
   expandedItemsLimit: 10,
-  onClick: function onClick() {},
+  onClick: () => {},
   viewLessLabel: 'View less',
-  viewMoreLabel: function viewMoreLabel(value) {
-    return "View more (".concat(value, ")");
-  }
+  viewMoreLabel: value => `View more (${value})`
 };
 /**
  * The `TruncatedList` allows consumers to control how many items are
  * revealed to the user while giving the user the ability to expand
  * and see the entire list.
  */
-var TruncatedList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$as = _ref.as,
-    List = _ref$as === void 0 ? defaults.as : _ref$as,
-    buttonClassName = _ref.buttonClassName,
-    _ref$collapsedItemsLi = _ref.collapsedItemsLimit,
-    collapsedItemsLimit = _ref$collapsedItemsLi === void 0 ? defaults.collapsedItemsLimit : _ref$collapsedItemsLi,
-    _ref$expandedItemsLim = _ref.expandedItemsLimit,
-    expandedItemsLimit = _ref$expandedItemsLim === void 0 ? defaults.expandedItemsLimit : _ref$expandedItemsLim,
-    _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
-    _ref$viewLessLabel = _ref.viewLessLabel,
-    viewLessLabel = _ref$viewLessLabel === void 0 ? defaults.viewLessLabel : _ref$viewLessLabel,
-    _ref$viewMoreLabel = _ref.viewMoreLabel,
-    viewMoreLabel = _ref$viewMoreLabel === void 0 ? defaults.viewMoreLabel : _ref$viewMoreLabel,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var childrenArray = Children.toArray(children);
+let TruncatedList = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    as: List = defaults.as,
+    buttonClassName,
+    collapsedItemsLimit = defaults.collapsedItemsLimit,
+    expandedItemsLimit = defaults.expandedItemsLimit,
+    onClick = defaults.onClick,
+    viewLessLabel = defaults.viewLessLabel,
+    viewMoreLabel = defaults.viewMoreLabel,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const childrenArray = Children.toArray(children);
   // Exception handling: minimum number of items is 1.
-  var minItems = Math.max(collapsedItemsLimit, 1);
+  const minItems = Math.max(collapsedItemsLimit, 1);
   // Exception handling: maximum number of items is the number of items passed as children.
-  var maxItems = Math.min(expandedItemsLimit, childrenArray.length);
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isCollapsed = _useState2[0],
-    setIsCollapsed = _useState2[1];
+  const maxItems = Math.min(expandedItemsLimit, childrenArray.length);
+  const [isCollapsed, setIsCollapsed] = useState(true);
   // To minimize *initial* animation,
   //   (difference of zero height to component's rendered height)
   // guesstimate the initial height to reduce animation distance.
   //   (difference of the guessed height to rendered height - a few pixels)
-  var _useState3 = useState(minItems * 16),
-    _useState4 = _slicedToArray(_useState3, 2),
-    listHeight = _useState4[0],
-    setListHeight = _useState4[1];
-  var listRef = useRef(undefined);
-  var handleToggle = function handleToggle() {
-    setIsCollapsed(function (prev) {
-      return !prev;
-    });
+  const [listHeight, setListHeight] = useState(minItems * 16);
+  const listRef = useRef(undefined);
+  const handleToggle = () => {
+    setIsCollapsed(prev => !prev);
   };
-  useEffect(function () {
+  useEffect(() => {
     onClick(isCollapsed);
   }, [isCollapsed, onClick]);
 
@@ -82,39 +67,37 @@ var TruncatedList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   // (E.g. the height of plain text is not the same height as a link.)
   // CSS animation requires an explicitly declared height for when the
   // list is both collapsed and expanded.
-  useEffect(function () {
+  useEffect(() => {
     if (listRef && childrenArray.length > 0) {
-      var _listRef$current;
-      var numItemsToShow = isCollapsed ? minItems : maxItems;
-      var items = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.childNodes;
-      var _listHeight = 0;
-      for (var index = 0; index < numItemsToShow; index++) {
+      const numItemsToShow = isCollapsed ? minItems : maxItems;
+      const items = listRef.current?.childNodes;
+      let listHeight = 0;
+      for (let index = 0; index < numItemsToShow; index++) {
         if (items && items[index]) {
-          var _window;
-          var itemElement = items[index];
-          var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(itemElement)) === null || _window === void 0 ? void 0 : _window.height) || '16';
-          _listHeight += parseInt(height);
+          const itemElement = items[index];
+          const height = window?.getComputedStyle(itemElement)?.height || '16';
+          listHeight += parseInt(height);
         }
       }
-      setListHeight(_listHeight);
+      setListHeight(listHeight);
     }
   }, [childrenArray, minItems, maxItems, isCollapsed, listRef]);
-  useIsomorphicEffect(function () {
+  useIsomorphicEffect(() => {
     if (listRef.current) {
-      listRef.current.style.height = "".concat(listHeight, "px");
+      listRef.current.style.height = `${listHeight}px`;
     }
   }, [listHeight]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className, isCollapsed ? "".concat(blockClass, "--collapsed") : "".concat(blockClass, "--expanded"),
+    className: cx(blockClass, className, isCollapsed ? `${blockClass}--collapsed` : `${blockClass}--expanded`,
     // If the list is expanded && showing all the items,
     // then disable scrolling using CSS, instead of adding an arbitrary #px to the height of the list.
-    !isCollapsed && childrenArray.length <= maxItems && "".concat(blockClass, "--expanded-all")),
+    !isCollapsed && childrenArray.length <= maxItems && `${blockClass}--expanded-all`),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(List, {
-    className: "".concat(blockClass, "__list"),
+    className: `${blockClass}__list`,
     ref: listRef
   }, isCollapsed ? childrenArray.slice(0, minItems) : children), childrenArray.length > minItems && /*#__PURE__*/React__default.createElement(Button, {
-    className: cx("".concat(blockClass, "__button"), "".concat(carbon.prefix, "--link"), buttonClassName),
+    className: cx(`${blockClass}__button`, `${carbon.prefix}--link`, buttonClassName),
     kind: "ghost",
     size: "sm",
     onClick: handleToggle

package/es/components/UserAvatar/UserAvatar.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } 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';
@@ -16,13 +16,12 @@ import { User } from '@carbon/react/icons';
 import '../../global/js/utils/props-helper.js';
 import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
 
-var _excluded = ["backgroundColor", "className", "image", "imageDescription", "name", "renderIcon", "size", "tooltipText", "tooltipAlignment"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--user-avatar");
-var componentName = 'UserAvatar';
+const blockClass = `${pkg.prefix}--user-avatar`;
+const componentName = 'UserAvatar';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -30,51 +29,52 @@ var componentName = 'UserAvatar';
  * TODO: A description of the component.
  */
 
-var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? 'order-1-cyan' : _ref$backgroundColor,
-    className = _ref.className,
-    image = _ref.image,
-    imageDescription = _ref.imageDescription,
-    name = _ref.name,
-    RenderIcon = _ref.renderIcon,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    tooltipText = _ref.tooltipText,
-    _ref$tooltipAlignment = _ref.tooltipAlignment,
-    tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'bottom' : _ref$tooltipAlignment,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var carbonPrefix = usePrefix();
-  var iconSize = {
+let UserAvatar = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    backgroundColor = 'order-1-cyan',
+    className,
+    image,
+    imageDescription,
+    name,
+    /* TODO: add other props for UserAvatar, with default values if needed */
+    renderIcon: RenderIcon,
+    size = 'md',
+    tooltipText,
+    tooltipAlignment = 'bottom',
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const carbonPrefix = usePrefix();
+  const iconSize = {
     sm: 16,
     md: 20,
     lg: 24,
     xl: 32
   };
-  var formatInitials = function formatInitials() {
-    var _ref2;
-    var parts = (name === null || name === void 0 ? void 0 : name.split(' ')) || [];
-    var firstChar = parts[0].charAt(0).toUpperCase();
-    var secondChar = parts[0].charAt(1).toUpperCase();
+  const formatInitials = () => {
+    const parts = name?.split(' ') || [];
+    const firstChar = parts[0].charAt(0).toUpperCase();
+    const secondChar = parts[0].charAt(1).toUpperCase();
     if (parts.length === 1) {
       return firstChar + secondChar;
     }
-    var lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
-    var initials = [firstChar];
+    const lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
+    const initials = [firstChar];
     if (lastChar) {
       initials.push(lastChar);
     }
-    return (_ref2 = '').concat.apply(_ref2, initials);
+    return ''.concat(...initials);
   };
-  var getItem = function getItem() {
-    var iconProps = {
+  const getItem = () => {
+    const iconProps = {
       size: iconSize[size]
     };
     if (image) {
       return /*#__PURE__*/React__default.createElement("img", {
         alt: imageDescription,
         src: image,
-        className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
+        className: `${blockClass}__photo ${blockClass}__photo--${size}`
       });
     }
     if (RenderIcon) {
@@ -85,25 +85,24 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
     return /*#__PURE__*/React__default.createElement(User, iconProps);
   };
-  var Avatar = function Avatar() {
-    return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-      className: cx(blockClass,
-      // Apply the block class to the main HTML element
-      className, // Apply any supplied class names to the main HTML element.
-      "".concat(blockClass, "--").concat(backgroundColor), "".concat(blockClass, "--").concat(size),
-      // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
-      {
-        // switched classes dependant on props or state
-        // example: [`${blockClass}__here-if-small`]: size === 'sm',
-      }),
-      ref: ref
-    }, getDevtoolsProps(componentName)), getItem());
-  };
+  const Avatar = () => /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    className,
+    // Apply any supplied class names to the main HTML element.
+    `${blockClass}--${backgroundColor}`, `${blockClass}--${size}`,
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    {
+      // switched classes dependant on props or state
+      // example: [`${blockClass}__here-if-small`]: size === 'sm',
+    }),
+    ref: ref
+  }, getDevtoolsProps(componentName)), getItem());
   if (tooltipText) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       align: tooltipAlignment,
       label: tooltipText,
-      className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+      className: `${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`
     }, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, /*#__PURE__*/React__default.createElement(Avatar, null)));
   }
   return /*#__PURE__*/React__default.createElement(Avatar, null);
@@ -138,8 +137,10 @@ UserAvatar.propTypes = {
    * When passing the image prop use the imageDescription prop to describe the image for screen reader.
    */
   /**@ts-ignore */
-  imageDescription: PropTypes.string.isRequired.if(function (_ref3) {
-    var image = _ref3.image;
+  imageDescription: PropTypes.string.isRequired.if(_ref2 => {
+    let {
+      image
+    } = _ref2;
     return !!image;
   }),
   /**