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

package/lib/components/Tearsheet/TearsheetShell.js

@@ -1,447 +0,0 @@
-"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 _useResizeObserver2 = require("../../global/js/hooks/useResizeObserver");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _settings = require("../../settings");
-
-var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
-
-var _react2 = require("@carbon/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 componentName = 'TearsheetShell';
-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'
-
-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
-
-
-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);
-  var carbonPrefix = (0, _react2.usePrefix)();
-  var bcModalHeader = "".concat(carbonPrefix, "--modal-header"); // 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];
-
-  (0, _react.useEffect)(function () {
-    if (portalTargetIn) {
-      setPortalTarget(portalTargetIn);
-    } else {
-      if (_settings.pkg.isFeatureEnabled('default-portal-target-body')) {
-        setPortalTarget(document.body);
-      }
-    }
-  }, [portalTargetIn]);
-  var localRef = (0, _react.useRef)();
-  var resizer = (0, _react.useRef)(null);
-  var modalRef = ref || localRef;
-
-  var _useResizeObserver = (0, _useResizeObserver2.useResizeObserver)(resizer),
-      width = _useResizeObserver.width;
-
-  var wide = size === 'wide'; // 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];
-
-  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.
-
-
-  var prevDepth = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    prevDepth.current = depth;
-  }); // 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.
-
-  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
-
-
-  handleStackChange.claimFocus = function () {
-    var element = selectorPrimaryFocus ? modalRef.current.querySelector(selectorPrimaryFocus) : modalRef.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.
-
-
-    stack.all.push(handleStackChange); // 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
-    // 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
-      // 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
-    if (position < depth) {
-      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 includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
-    return (portalTarget ? _reactDom.createPortal : function (children) {
-      return children;
-    })( /*#__PURE__*/_react.default.createElement(_react2.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.
-      depth > 1 || depth === 1 && prevDepth.current > 1), (0, _defineProperty2.default)(_cx, "".concat(bc, "--wide"), wide), (0, _defineProperty2.default)(_cx, "".concat(bc, "--narrow"), !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')),
-      onClose: onClose,
-      open: open,
-      selectorPrimaryFocus: selectorPrimaryFocus,
-      onFocus: handleFocus,
-      preventCloseOnClickOutside: !isPassive,
-      ref: modalRef,
-      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
-      size: "sm"
-    }), includeHeader && /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
-      className: (0, _classnames.default)("".concat(bc, "__header"), (_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), (0, _defineProperty2.default)(_cx3, "".concat(bc, "__header--with-nav"), navigation), _cx3)),
-      closeClassName: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
-      closeModal: onClose,
-      iconDescription: closeIconDescription
-    }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: "".concat(bc, "__header-content")
-    }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: "".concat(bc, "__header-fields")
-    }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      element: "h2",
-      className: "".concat(bcModalHeader, "__label")
-    }, label), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      element: "h3",
-      className: (0, _classnames.default)("".concat(bcModalHeader, "__heading"), "".concat(bc, "__heading"))
-    }, title), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: "".concat(bc, "__header-description")
-    }, description)), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: "".concat(bc, "__header-actions")
-    }, headerActions)), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: "".concat(bc, "__header-navigation")
-    }, navigation)), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      element: _react2.ModalBody,
-      className: "".concat(bc, "__body")
-    }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: (0, _classnames.default)((_cx5 = {}, (0, _defineProperty2.default)(_cx5, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx5, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx5)),
-      neverRender: influencerPosition === 'right'
-    }, influencer), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: "".concat(bc, "__right")
-    }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: "".concat(bc, "__main"),
-      alwaysRender: includeActions,
-      element: wide ? _react2.Layer : undefined
-    }, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: "".concat(bc, "__content"),
-      alwaysRender: influencer && influencerPosition === 'right',
-      element: wide ? _react2.Layer : undefined
-    }, children), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: (0, _classnames.default)((_cx6 = {}, (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
-      neverRender: influencerPosition !== 'right'
-    }, influencer)), includeActions && /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
-      className: "".concat(bc, "__button-container")
-    }, /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
-      actions: actions,
-      buttonSize: wide ? '2xl' : null,
-      className: "".concat(bc, "__buttons"),
-      size: wide ? '2xl' : 'lg'
-    })))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(bc, "__resize-detector"),
-      ref: resizer
-    })), 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.
-
-
-exports.TearsheetShell = TearsheetShell;
-TearsheetShell.displayName = componentName;
-var deprecatedProps = {
-  /**
-   * **Deprecated**
-   *
-   * The position of the top of tearsheet in the viewport. The 'normal'
-   * position is a short distance down from the top of the
-   * viewport, leaving room at the top for a global header bar to show through
-   * from below. The 'lower' position (the default) provides a little extra room at the top
-   * 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,
-// 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({
-  /**
-   * The actions to be shown as buttons in the action area at the bottom of the
-   * tearsheet. Each action is specified as an object with optional fields
-   * 'label' to supply the button label, 'kind' to select the button kind (must
-   * be 'primary', 'secondary' or 'ghost'), 'loading' to display a loading
-   * indicator, and 'onClick' to receive notifications when the button is
-   * clicked. Additional fields in the object will be passed to the Button
-   * component, and these can include 'disabled', 'ref', 'className', and any
-   * other Button props. Any other fields in the object will be passed through
-   * to the button element as HTML attributes.
-   *
-   * 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
-  // one should ensure appropriate validation is done.
-  _propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
-    kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
-    label: _propTypes.default.string,
-    loading: _propTypes.default.bool,
-    // we duplicate this Button prop to improve the DocGen here
-    onClick: _react2.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).
-   *
-   * **Note:** This prop is only required if a close icon is shown, i.e. if
-   * there are a no navigation actions and/or hasCloseIcon is true.
-   */
-  closeIconDescription: _propTypes.default.string.isRequired.if(function (_ref3) {
-    var actions = _ref3.actions,
-        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
-   * display a close icon if there are navigation actions ("transactional
-   * tearsheet") and displays one if there are no navigation actions ("passive
-   * tearsheet"), and that behavior can be overridden if required by setting
-   * 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
-   * of small buttons, or similar. NB the headerActions is only applicable for
-   * 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
-   * progress indicator, or similar. NB the influencer is only applicable for
-   * 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,
-
-  /**
-   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
-   */
-  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.
-   */
-  title: _propTypes.default.node
-}, deprecatedProps);

package/lib/components/Tearsheet/index.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Tearsheet", {
-  enumerable: true,
-  get: function get() {
-    return _Tearsheet.Tearsheet;
-  }
-});
-Object.defineProperty(exports, "TearsheetNarrow", {
-  enumerable: true,
-  get: function get() {
-    return _TearsheetNarrow.TearsheetNarrow;
-  }
-});
-
-var _Tearsheet = require("./Tearsheet");
-
-var _TearsheetNarrow = require("./TearsheetNarrow");

package/lib/components/Toolbar/Toolbar.js

@@ -1,137 +0,0 @@
-"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 _devtools = require("../../global/js/utils/devtools");
-
-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;
-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. */
-
-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);
-  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];
-
-  (0, _react.useEffect)(function () {
-    focusableElements.current = (0, _getFocusableElements2.getFocusableElements)(ref.current);
-    typeof focus !== 'undefined' && getFocusableElements().forEach(function (element, index) {
-      element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', -1);
-    });
-  });
-  (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];
-
-  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;
-
-    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)),
-    onFocus: onFocus,
-    onKeyDown: onKeyDown
-  }, vertical && {
-    'aria-orientation': 'vertical'
-  }, (0, _devtools.getDevtoolsProps)(componentName), {
-    role: "toolbar"
-  }), /*#__PURE__*/_react.default.createElement(ToolbarContext.Provider, {
-    value: {
-      vertical: vertical
-    }
-  }, children));
-});
-exports.Toolbar = Toolbar;
-var componentName = 'Toolbar';
-exports.componentName = componentName;
-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
-};
-exports.Toolbar = Toolbar = checkComponentEnabled(Toolbar, componentName);