@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

package/es/components/Tearsheet/TearsheetShell.js

@@ -3,84 +3,87 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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. 2020, 2022
+ * Copyright IBM Corp. 2020, 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 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';
 import { pkg } from '../../settings';
-import pconsole from '../../global/js/utils/pconsole'; // Carbon and package components we use.
+import pconsole from '../../global/js/utils/pconsole';
 
-import { Button, ComposedModal, ModalHeader, ModalBody, usePrefix } from '@carbon/react';
+// Carbon and package components we use.
+import { Button, ComposedModal, Layer, ModalHeader, ModalBody, usePrefix } from '@carbon/react';
 import { ActionSet } from '../ActionSet';
-import { Wrap } from '../../global/js/utils/Wrap'; // The block part of our conventional BEM class names (bc__E--M).
+import { Wrap } from '../../global/js/utils/Wrap';
 
+// The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
 var componentName = 'TearsheetShell';
-var maxDepth = 3; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+var maxDepth = 3;
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
 // Global data structure to communicate the state of tearsheet stacking
 // (i.e. when more than one tearsheet is open). Each tearsheet supplies a
 // handler to be called whenever the stacking of the tearsheets changes, which
 // happens when a tearsheet opens or closes. The 'open' array contains one
 // handler per OPEN tearsheet ordered from lowest to highest in visual z-order.
 // The 'all' array contains all the handlers for open and closed tearsheets.
-
 var stack = {
   open: [],
   all: []
-}; // these props are only applicable when size='wide'
+};
 
+// these props are only applicable when size='wide'
 export var tearsheetShellWideProps = ['headerActions', 'influencer', 'influencerPosition', 'influencerWidth', 'navigation'];
 export var tearsheetIsPassive = function tearsheetIsPassive(actions) {
   return !actions || !(actions !== null && actions !== void 0 && actions.length);
 };
 export var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon) {
   return hasCloseIcon !== null && hasCloseIcon !== void 0 ? hasCloseIcon : tearsheetIsPassive(actions);
-}; // TearSheetShell is used internally by TearSheet and TearSheetNarrow
+};
 
+// TearSheetShell is used internally by TearSheet and TearSheetNarrow
 export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
-      children = _ref.children,
-      className = _ref.className,
-      closeIconDescription = _ref.closeIconDescription,
-      description = _ref.description,
-      hasCloseIcon = _ref.hasCloseIcon,
-      headerActions = _ref.headerActions,
-      influencer = _ref.influencer,
-      influencerPosition = _ref.influencerPosition,
-      influencerWidth = _ref.influencerWidth,
-      label = _ref.label,
-      navigation = _ref.navigation,
-      onClose = _ref.onClose,
-      open = _ref.open,
-      selectorPrimaryFocus = _ref.selectorPrimaryFocus,
-      size = _ref.size,
-      portalTargetIn = _ref.portalTarget,
-      title = _ref.title,
-      verticalPosition = _ref.verticalPosition,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref.children,
+    className = _ref.className,
+    closeIconDescription = _ref.closeIconDescription,
+    description = _ref.description,
+    hasCloseIcon = _ref.hasCloseIcon,
+    headerActions = _ref.headerActions,
+    influencer = _ref.influencer,
+    influencerPosition = _ref.influencerPosition,
+    influencerWidth = _ref.influencerWidth,
+    label = _ref.label,
+    navigation = _ref.navigation,
+    onClose = _ref.onClose,
+    open = _ref.open,
+    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+    size = _ref.size,
+    portalTargetIn = _ref.portalTarget,
+    title = _ref.title,
+    verticalPosition = _ref.verticalPosition,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = usePrefix();
-  var bcModalHeader = "".concat(carbonPrefix, "--modal-header"); // node the modal tearsheet is hosted in
-
+  var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
+  // node the modal tearsheet is hosted in
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      portalTarget = _useState2[0],
-      setPortalTarget = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    portalTarget = _useState2[0],
+    setPortalTarget = _useState2[1];
   useEffect(function () {
     if (portalTargetIn) {
       setPortalTarget(portalTargetIn);
@@ -91,92 +94,89 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [portalTargetIn]);
   var localRef = useRef();
+  var resizer = useRef(null);
   var modalRef = ref || localRef;
+  var _useResizeObserver = useResizeObserver(resizer),
+    width = _useResizeObserver.width;
+  var wide = size === 'wide';
 
-  var _useResizeDetector = useResizeDetector({
-    handleHeight: false
-  }),
-      width = _useResizeDetector.width,
-      resizer = _useResizeDetector.ref; // Keep track of the stack depth and our position in it (1-based, 0=closed)
-
-
+  // Keep track of the stack depth and our position in it (1-based, 0=closed)
   var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      depth = _useState4[0],
-      setDepth = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    depth = _useState4[0],
+    setDepth = _useState4[1];
   var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      position = _useState6[0],
-      setPosition = _useState6[1]; // Keep a record of the previous value of depth.
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    position = _useState6[0],
+    setPosition = _useState6[1];
 
+  // Keep a record of the previous value of depth.
   var prevDepth = useRef();
   useEffect(function () {
     prevDepth.current = depth;
-  }); // A "passive" tearsheet is one with no navigation actions.
+  });
 
+  // A "passive" tearsheet is one with no navigation actions.
   var isPassive = tearsheetIsPassive(actions);
-  var effectiveHasCloseIcon = tearsheetHasCloseIcon(actions, hasCloseIcon); // Callback that will be called whenever the stacking order changes.
-  // position is 1-based with 0 indicating closed.
+  var effectiveHasCloseIcon = tearsheetHasCloseIcon(actions, hasCloseIcon);
 
+  // Callback that will be called whenever the stacking order changes.
+  // position is 1-based with 0 indicating closed.
   function handleStackChange(newDepth, newPosition) {
     setDepth(newDepth);
     setPosition(newPosition);
   }
-
   handleStackChange.checkFocus = function () {
     // if we are now the topmost tearsheet, ensure we have focus
     if (position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
       handleStackChange.claimFocus();
     }
-  }; // Callback to give the tearsheet the opportunity to claim focus
-
+  };
 
+  // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
     var element = selectorPrimaryFocus ? modalRef.current.querySelector(selectorPrimaryFocus) : modalRef.current;
     setTimeout(function () {
       return element.focus();
     }, 1);
   };
-
   useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
         handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
         handler.checkFocus();
       });
-    }; // Register this tearsheet's stack change callback/listener.
+    };
 
+    // Register this tearsheet's stack change callback/listener.
+    stack.all.push(handleStackChange);
 
-    stack.all.push(handleStackChange); // If the tearsheet is mounting with open=true or open is changing from
+    // If the tearsheet is mounting with open=true or open is changing from
     // false to true to open it then append its notification callback to
     // the end of the stack array (as its ID), and call all the callbacks
     // to notify all open tearsheets that the stacking has changed.
-
     if (open) {
       stack.open.push(handleStackChange);
       notify();
-    } // Cleanup function called whenever the tearsheet unmounts or the open
+    }
+
+    // Cleanup function called whenever the tearsheet unmounts or the open
     // prop changes value (in which case it is called prior to this hook
     // being called again).
-
-
     return function cleanup() {
       // Remove the notification callback from the all handlers array.
-      stack.all.splice(stack.all.indexOf(handleStackChange), 1); // Remove the notification callback from the open handlers array, if
+      stack.all.splice(stack.all.indexOf(handleStackChange), 1);
+
+      // Remove the notification callback from the open handlers array, if
       // it's there, and notify all open tearsheets that the stacking has
       // changed (only necessary if this tearsheet was open).
-
       var openIndex = stack.open.indexOf(handleStackChange);
-
       if (openIndex >= 0) {
         stack.open.splice(openIndex, 1);
         notify();
       }
     };
   }, [open]);
-
   function handleFocus() {
     // If something within us is receiving focus but we are not the topmost
     // stacked tearsheet, transfer focus to the topmost tearsheet instead
@@ -184,22 +184,22 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       stack.open[stack.open.length - 1].claimFocus();
     }
   }
-
   if (position <= depth) {
     var _cx, _ref2, _cx3, _cx5, _cx6;
-
     // Include a modal header if and only if one or more of these is given.
     // We can't use a Wrap for the ModalHeader because ComposedModal requires
     // the direct child to be the ModalHeader instance.
-    var includeHeader = label || title || description || headerActions || navigation || effectiveHasCloseIcon; // Include an ActionSet if and only if one or more actions is given.
+    var includeHeader = label || title || description || headerActions || navigation || effectiveHasCloseIcon;
 
+    // Include an ActionSet if and only if one or more actions is given.
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     return (portalTarget ? createPortal : function (children) {
       return children;
     })( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
       "aria-label": title,
-      className: cx(bc, className, (_cx = {}, _defineProperty(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth), // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), _defineProperty(_cx, "".concat(bc, "--wide"), size === 'wide'), _defineProperty(_cx, "".concat(bc, "--narrow"), size !== 'wide'), _cx)),
+      className: cx(bc, className, (_cx = {}, _defineProperty(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      // Don't apply this on the initial open of a single tearsheet.
+      depth > 1 || depth === 1 && prevDepth.current > 1), _defineProperty(_cx, "".concat(bc, "--wide"), wide), _defineProperty(_cx, "".concat(bc, "--narrow"), !wide), _cx)),
       style: (_ref2 = {}, _defineProperty(_ref2, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), _defineProperty(_ref2, "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width), _ref2),
       containerClassName: cx("".concat(bc, "__container"), _defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
       onClose: onClose,
@@ -240,11 +240,13 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, influencer), /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__right")
     }, /*#__PURE__*/React.createElement(Wrap, {
+      className: "".concat(bc, "__main"),
       alwaysRender: includeActions,
-      className: "".concat(bc, "__main")
+      element: wide ? Layer : undefined
     }, /*#__PURE__*/React.createElement(Wrap, {
+      className: "".concat(bc, "__content"),
       alwaysRender: influencer && influencerPosition === 'right',
-      className: "".concat(bc, "__content")
+      element: wide ? Layer : undefined
     }, children), /*#__PURE__*/React.createElement(Wrap, {
       className: cx((_cx6 = {}, _defineProperty(_cx6, "".concat(bc, "__influencer"), true), _defineProperty(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
       neverRender: influencerPosition !== 'right'
@@ -252,9 +254,9 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(bc, "__button-container")
     }, /*#__PURE__*/React.createElement(ActionSet, {
       actions: actions,
-      buttonSize: size === 'wide' ? 'xl' : null,
+      buttonSize: wide ? '2xl' : null,
       className: "".concat(bc, "__buttons"),
-      size: size === 'wide' ? '2xl' : 'lg'
+      size: wide ? '2xl' : 'lg'
     })))), /*#__PURE__*/React.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer
@@ -263,9 +265,10 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     pconsole.warn('Tearsheet not rendered: maximum stacking depth exceeded.');
     return null;
   }
-}); // The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
+});
 
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
 TearsheetShell.displayName = componentName;
 export var deprecatedProps = {
   /**
@@ -278,12 +281,14 @@ export var deprecatedProps = {
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
   verticalPosition: PropTypes.oneOf(['normal', 'lower'])
-}; // The types and DocGen commentary for the component props,
+};
+
+// The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
+
 // Note that the descriptions here should be kept in sync with those for the
 // corresponding props for Tearsheet and TearsheetNarrow components.
-
 TearsheetShell.propTypes = _objectSpread({
   /**
    * The actions to be shown as buttons in the action area at the bottom of the
@@ -298,7 +303,8 @@ TearsheetShell.propTypes = _objectSpread({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: PropTypes.arrayOf( // NB we don't include the validator here, as the component wrapping this
+  actions: PropTypes.arrayOf(
+  // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
   PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
     kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -307,17 +313,14 @@ TearsheetShell.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: Button.propTypes.onClick
   }))),
-
   /**
    * The main content of the tearsheet.
    */
   children: PropTypes.node,
-
   /**
    * An optional class or classes to be added to the outermost element.
    */
   className: PropTypes.string,
-
   /**
    * The accessibility title for the close icon (if shown).
    *
@@ -326,15 +329,13 @@ TearsheetShell.propTypes = _objectSpread({
    */
   closeIconDescription: PropTypes.string.isRequired.if(function (_ref3) {
     var actions = _ref3.actions,
-        hasCloseIcon = _ref3.hasCloseIcon;
+      hasCloseIcon = _ref3.hasCloseIcon;
     return tearsheetHasCloseIcon(actions, hasCloseIcon);
   }),
-
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
   description: PropTypes.node,
-
   /**
    * Enable a close icon ('x') in the header area of the tearsheet. By default,
    * (when this prop is omitted, or undefined or null) a tearsheet does not
@@ -344,7 +345,6 @@ TearsheetShell.propTypes = _objectSpread({
    * this prop to either true or false.
    */
   hasCloseIcon: PropTypes.bool,
-
   /**
    * The content for the header actions area, displayed alongside the title in
    * the header area of the tearsheet. This is typically a drop-down, or a set
@@ -352,7 +352,6 @@ TearsheetShell.propTypes = _objectSpread({
    * wide tearsheets.
    */
   headerActions: PropTypes.element,
-
   /**
    * The content for the influencer section of the tearsheet, displayed
    * alongside the main content. This is typically a menu, or filter, or
@@ -360,54 +359,45 @@ TearsheetShell.propTypes = _objectSpread({
    * wide tearsheets.
    */
   influencer: PropTypes.element,
-
   /**
    * The position of the influencer section, 'left' or 'right'.
    */
   influencerPosition: PropTypes.oneOf(['left', 'right']),
-
   /**
    * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
    * is 320px.
    */
   influencerWidth: PropTypes.oneOf(['narrow', 'wide']),
-
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet
    * to maintain context for the tearsheet (e.g. as the title changes from page
    * to page of a multi-page task).
    */
   label: PropTypes.node,
-
   /**
    * Navigation content, such as a set of tabs, to be displayed at the bottom
    * of the header area of the tearsheet. NB the navigation is only applicable
    * for wide tearsheets.
    */
   navigation: PropTypes.element,
-
   /**
    * An optional handler that is called when the user closes the tearsheet (by
    * clicking the close button, if enabled, or clicking outside, if enabled).
    * Returning `false` here prevents the modal from closing.
    */
   onClose: PropTypes.func,
-
   /**
    * Specifies whether the tearsheet is currently open.
    */
   open: PropTypes.bool,
-
   /**
-   * portal target for the all tags modal
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
    */
   portalTarget: PropTypes.node,
-
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */
   size: PropTypes.oneOf(['narrow', 'wide']).isRequired,
-
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/es/components/Tearsheet/index.js

@@ -4,5 +4,6 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 export { Tearsheet } from './Tearsheet';
 export { TearsheetNarrow } from './TearsheetNarrow';

package/es/components/Toolbar/Toolbar.js

@@ -3,13 +3,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "vertical"];
-
 /**
  * Copyright IBM Corp. 2021, 2022
  *
  * 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 cx from 'classnames';
 import { bool, node, string } from 'prop-types';
 import React, { createContext, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
@@ -17,31 +17,26 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { getFocusableElements as _getFocusableElements } from '../../global/js/utils/getFocusableElements';
 import { pkg } from '../../settings';
 var checkComponentEnabled = pkg.checkComponentEnabled,
-    prefix = pkg.prefix;
+  prefix = pkg.prefix;
 var blockClass = "".concat(prefix, "--toolbar");
 var ToolbarContext = /*#__PURE__*/createContext();
-/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
 
+/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
 var Toolbar = /*#__PURE__*/forwardRef(function (_ref2, r) {
   var children = _ref2.children,
-      className = _ref2.className,
-      vertical = _ref2.vertical,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-
+    className = _ref2.className,
+    vertical = _ref2.vertical,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var focusableElements = useRef();
   var getFocusableElements = useCallback(function () {
     return focusableElements.current;
   }, [focusableElements]);
-
   var _ref = useRef();
-
   var ref = r || _ref;
-
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      focus = _useState2[0],
-      setFocus = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    focus = _useState2[0],
+    setFocus = _useState2[1];
   useEffect(function () {
     focusableElements.current = _getFocusableElements(ref.current);
     typeof focus !== 'undefined' && getFocusableElements().forEach(function (element, index) {
@@ -51,40 +46,33 @@ var Toolbar = /*#__PURE__*/forwardRef(function (_ref2, r) {
   useEffect(function () {
     typeof focus !== 'undefined' && getFocusableElements()[focus].focus();
   }, [focus, getFocusableElements]);
-
   var _ref3 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
-      _ref4 = _slicedToArray(_ref3, 2),
-      arrowNext = _ref4[0],
-      arrowPrevious = _ref4[1];
-
+    _ref4 = _slicedToArray(_ref3, 2),
+    arrowNext = _ref4[0],
+    arrowPrevious = _ref4[1];
   function onArrowDown(increment) {
     var nextFocus = focus + increment;
     getFocusableElements()[nextFocus] && setFocus(nextFocus);
   }
-
   function onFocus(_ref5) {
     var target = _ref5.target;
     var elements = getFocusableElements();
     elements.includes(target) && setFocus(elements.indexOf(target));
   }
-
   function onKeyDown(_ref6) {
     var key = _ref6.key,
-        target = _ref6.target;
-
+      target = _ref6.target;
     if (getFocusableElements().includes(target)) {
       switch (key) {
         case arrowNext:
           onArrowDown(1);
           break;
-
         case arrowPrevious:
           onArrowDown(-1);
           break;
       }
     }
   }
-
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref,
     className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "--vertical"), vertical)),
@@ -105,10 +93,8 @@ Toolbar.displayName = componentName;
 Toolbar.propTypes = {
   /** Provide the content of the `Toolbar` */
   children: node.isRequired,
-
   /** Provide an optional class to be applied to the containing node */
   className: string,
-
   /** Determines whether the `Toolbar` is rendered vertically */
   vertical: bool
 };

package/es/components/Toolbar/ToolbarButton.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
-
 /**
  * Copyright IBM Corp. 2021, 2021
  *
  * 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 { IconButton } from '@carbon/react';
 import cx from 'classnames';
 import { bool, func, node, string } from 'prop-types';
@@ -16,19 +16,17 @@ import React, { forwardRef, useContext } from 'react';
 import { pkg } from '../../settings';
 import { blockClass as toolbarClass, ToolbarContext } from './Toolbar';
 export var blockClass = "".concat(toolbarClass, "__button");
-/** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
 
+/** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
 export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useContext;
-
   var caret = _ref.caret,
-      children = _ref.children,
-      className = _ref.className,
-      renderIcon = _ref.renderIcon,
-      _ref$iconDescription = _ref.iconDescription,
-      iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref.children,
+    className = _ref.className,
+    renderIcon = _ref.renderIcon,
+    _ref$iconDescription = _ref.iconDescription,
+    iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var Icon = renderIcon;
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     align: ((_useContext = useContext(ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
@@ -47,16 +45,12 @@ ToolbarButton.displayName = componentName;
 ToolbarButton.propTypes = {
   /** Determines whether the caret is rendered */
   caret: bool,
-
   /** Provide the content of the `ToolbarButton` */
   children: node,
-
   /** Provide an optional class to be applied to the containing node */
   className: string,
-
   /** Specifies the label for the icon button */
   iconDescription: string.isRequired,
-
   /** Specifies the icon to be used by the ToolbarButton component */
   renderIcon: func.isRequired
 };

package/es/components/Toolbar/ToolbarGroup.js

@@ -1,25 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children"];
-
 /**
  * Copyright IBM Corp. 2021, 2021
  *
  * 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 cx from 'classnames';
 import { node, string } from 'prop-types';
 import React, { forwardRef } from 'react';
 import { pkg } from '../../settings';
 import { blockClass } from './Toolbar';
-/** Toolbar groups organize the commands within a toolbar into related groups. */
 
+/** Toolbar groups organize the commands within a toolbar into related groups. */
 export var ToolbarGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref,
     className: cx("".concat(blockClass, "__group"), className)
@@ -30,7 +29,6 @@ ToolbarGroup.displayName = componentName;
 ToolbarGroup.propTypes = {
   /** Provide the content of the `ToolbarGroup` */
   children: node.isRequired,
-
   /** Provide an optional class to be applied to the containing node */
   className: string
 };