@carbon/ibm-products 1.34.1 → 1.35.0

package/lib/components/Tearsheet/TearsheetShell.js

@@ -1,113 +1,88 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tearsheetShellWideProps = exports.tearsheetIsPassive = exports.tearsheetHasCloseIcon = exports.deprecatedProps = exports.TearsheetShell = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactDom = require("react-dom");
-
 var _reactResizeDetector = require("react-resize-detector");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _settings = require("../../settings");
-
 var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
-
 var _carbonComponentsReact = require("carbon-components-react");
-
 var _ActionSet = require("../ActionSet");
-
 var _Wrap = require("../../global/js/utils/Wrap");
-
 var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
-
 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); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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) { (0, _defineProperty2.default)(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; }
-
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(_settings.pkg.prefix, "--tearsheet");
 var bcModalHeader = "".concat(_settings.carbon.prefix, "--modal-header");
 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'
 var tearsheetShellWideProps = ['headerActions', 'influencer', 'influencerPosition', 'influencerWidth', 'navigation'];
 exports.tearsheetShellWideProps = tearsheetShellWideProps;
-
 var tearsheetIsPassive = function tearsheetIsPassive(actions) {
   return !actions || !(actions !== null && actions !== void 0 && actions.length);
 };
-
 exports.tearsheetIsPassive = tearsheetIsPassive;
-
 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
 exports.tearsheetHasCloseIcon = tearsheetHasCloseIcon;
-
 var TearsheetShell = /*#__PURE__*/_react.default.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 = (0, _objectWithoutProperties2.default)(_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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // node the modal tearsheet is hosted in
   var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      portalTarget = _useState2[0],
-      setPortalTarget = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    portalTarget = _useState2[0],
+    setPortalTarget = _useState2[1];
   (0, _react.useEffect)(function () {
     if (portalTargetIn) {
       setPortalTarget(portalTargetIn);
@@ -119,91 +94,89 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }, [portalTargetIn]);
   var localRef = (0, _react.useRef)();
   var modalRef = ref || localRef;
-
   var _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)({
-    handleHeight: false
-  }),
-      width = _useResizeDetector.width,
-      resizer = _useResizeDetector.ref; // Keep track of the stack depth and our position in it (1-based, 0=closed)
-
+      handleHeight: false
+    }),
+    width = _useResizeDetector.width,
+    resizer = _useResizeDetector.ref;
 
+  // Keep track of the stack depth and our position in it (1-based, 0=closed)
   var _useState3 = (0, _react.useState)(0),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      depth = _useState4[0],
-      setDepth = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    depth = _useState4[0],
+    setDepth = _useState4[1];
   var _useState5 = (0, _react.useState)(0),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      position = _useState6[0],
-      setPosition = _useState6[1]; // Keep a record of the previous value of depth.
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    position = _useState6[0],
+    setPosition = _useState6[1];
 
+  // Keep a record of the previous value of depth.
   var prevDepth = (0, _react.useRef)();
   (0, _react.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.innerModal.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.innerModal.current.querySelector(selectorPrimaryFocus) : modalRef.current.startSentinel.current;
     setTimeout(function () {
       return element.focus();
     }, 1);
   };
-
   (0, _react.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
@@ -211,21 +184,21 @@ var TearsheetShell = /*#__PURE__*/_react.default.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 ? _reactDom.createPortal : function (children) {
       return children;
     })( /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
       "aria-label": title,
-      className: (0, _classnames.default)(bc, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth), // Don't apply this on the initial open of a single tearsheet.
+      className: (0, _classnames.default)(bc, className, (_cx = {}, (0, _defineProperty2.default)(_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), (0, _defineProperty2.default)(_cx, "".concat(bc, "--wide"), size === 'wide'), (0, _defineProperty2.default)(_cx, "".concat(bc, "--narrow"), size !== 'wide'), _cx)),
       style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), (0, _defineProperty2.default)(_ref2, "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width), _ref2),
       containerClassName: (0, _classnames.default)("".concat(bc, "__container"), (0, _defineProperty2.default)({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
@@ -287,13 +260,12 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     })), portalTarget);
   } else {
     _pconsole.default.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.
 exports.TearsheetShell = TearsheetShell;
 TearsheetShell.displayName = componentName;
 var deprecatedProps = {
@@ -307,12 +279,14 @@ var deprecatedProps = {
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
   verticalPosition: _propTypes.default.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.
-
 exports.deprecatedProps = deprecatedProps;
 TearsheetShell.propTypes = _objectSpread({
   /**
@@ -328,7 +302,8 @@ TearsheetShell.propTypes = _objectSpread({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: _propTypes.default.arrayOf( // NB we don't include the validator here, as the component wrapping this
+  actions: _propTypes.default.arrayOf(
+  // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
   _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
     kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -337,17 +312,14 @@ TearsheetShell.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: _carbonComponentsReact.Button.propTypes.onClick
   }))),
-
   /**
    * The main content of the tearsheet.
    */
   children: _propTypes.default.node,
-
   /**
    * An optional class or classes to be added to the outermost element.
    */
   className: _propTypes.default.string,
-
   /**
    * The accessibility title for the close icon (if shown).
    *
@@ -356,15 +328,13 @@ TearsheetShell.propTypes = _objectSpread({
    */
   closeIconDescription: _propTypes.default.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.default.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
@@ -374,7 +344,6 @@ TearsheetShell.propTypes = _objectSpread({
    * this prop to either true or false.
    */
   hasCloseIcon: _propTypes.default.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
@@ -382,7 +351,6 @@ TearsheetShell.propTypes = _objectSpread({
    * wide tearsheets.
    */
   headerActions: _propTypes.default.element,
-
   /**
    * The content for the influencer section of the tearsheet, displayed
    * alongside the main content. This is typically a menu, or filter, or
@@ -390,54 +358,45 @@ TearsheetShell.propTypes = _objectSpread({
    * wide tearsheets.
    */
   influencer: _propTypes.default.element,
-
   /**
    * The position of the influencer section, 'left' or 'right'.
    */
   influencerPosition: _propTypes.default.oneOf(['left', 'right']),
-
   /**
    * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
    * is 320px.
    */
   influencerWidth: _propTypes.default.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.default.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.default.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.default.func,
-
   /**
    * Specifies whether the tearsheet is currently open.
    */
   open: _propTypes.default.bool,
-
   /**
    * portal target for the all tags modal
    */
   portalTarget: _propTypes.default.node,
-
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */
   size: _propTypes.default.oneOf(['narrow', 'wide']).isRequired,
-
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/lib/components/Tearsheet/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "TearsheetNarrow", {
     return _TearsheetNarrow.TearsheetNarrow;
   }
 });
-
 var _Tearsheet = require("./Tearsheet");
-
 var _TearsheetNarrow = require("./TearsheetNarrow");

package/lib/components/Toolbar/Toolbar.js

@@ -1,65 +1,46 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.componentName = exports.blockClass = exports.ToolbarContext = exports.Toolbar = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = require("prop-types");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _getFocusableElements2 = require("../../global/js/utils/getFocusableElements");
-
 var _settings = require("../../settings");
-
 var _excluded = ["children", "className", "vertical"];
-
 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); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var checkComponentEnabled = _settings.pkg.checkComponentEnabled,
-    prefix = _settings.pkg.prefix;
+  prefix = _settings.pkg.prefix;
 var blockClass = "".concat(prefix, "--toolbar");
 exports.blockClass = blockClass;
 var ToolbarContext = /*#__PURE__*/(0, _react.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. */
 exports.ToolbarContext = ToolbarContext;
 var Toolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, r) {
   var children = _ref2.children,
-      className = _ref2.className,
-      vertical = _ref2.vertical,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    className = _ref2.className,
+    vertical = _ref2.vertical,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var focusableElements = (0, _react.useRef)();
   var getFocusableElements = (0, _react.useCallback)(function () {
     return focusableElements.current;
   }, [focusableElements]);
-
   var _ref = (0, _react.useRef)();
-
   var ref = r || _ref;
-
   var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      focus = _useState2[0],
-      setFocus = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    focus = _useState2[0],
+    setFocus = _useState2[1];
   (0, _react.useEffect)(function () {
     focusableElements.current = (0, _getFocusableElements2.getFocusableElements)(ref.current);
     typeof focus !== 'undefined' && getFocusableElements().forEach(function (element, index) {
@@ -69,40 +50,33 @@ var Toolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, r) {
   (0, _react.useEffect)(function () {
     typeof focus !== 'undefined' && getFocusableElements()[focus].focus();
   }, [focus, getFocusableElements]);
-
   var _ref3 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
-      _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-      arrowNext = _ref4[0],
-      arrowPrevious = _ref4[1];
-
+    _ref4 = (0, _slicedToArray2.default)(_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.default.createElement("div", (0, _extends2.default)({}, rest, {
     ref: ref,
     className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--vertical"), vertical)),
@@ -125,10 +99,8 @@ Toolbar.displayName = componentName;
 Toolbar.propTypes = {
   /** Provide the content of the `Toolbar` */
   children: _propTypes.node.isRequired,
-
   /** Provide an optional class to be applied to the containing node */
   className: _propTypes.string,
-
   /** Determines whether the `Toolbar` is rendered vertically */
   vertical: _propTypes.bool
 };

package/lib/components/Toolbar/ToolbarButton.js

@@ -1,49 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.blockClass = exports.ToolbarButton = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _carbonComponentsReact = require("carbon-components-react");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = require("prop-types");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _settings = require("../../settings");
-
 var _Toolbar = require("./Toolbar");
-
 var _excluded = ["caret", "children", "className"];
-
 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); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var blockClass = "".concat(_Toolbar.blockClass, "__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.  */
 exports.blockClass = blockClass;
 var ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _useContext;
-
   var caret = _ref.caret,
-      children = _ref.children,
-      className = _ref.className,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    children = _ref.children,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({
     tooltipPosition: ((_useContext = (0, _react.useContext)(_Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
   }, rest, {
@@ -62,10 +46,8 @@ ToolbarButton.displayName = componentName;
 ToolbarButton.propTypes = {
   /** Determines whether the caret is rendered */
   caret: _propTypes.bool,
-
   /** Provide the content of the `ToolbarButton` */
   children: _propTypes.node,
-
   /** Provide an optional class to be applied to the containing node */
   className: _propTypes.string
 };