@carbon/ibm-products/lib/components/Toolbar/Toolbar.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../_virtual/index.js');
var getFocusableElements = require('../../global/js/utils/getFocusableElements.js');
var cx = require('classnames');
var devtools = require('../../global/js/utils/devtools.js');
var settings = require('../../settings.js');

const {
  checkComponentEnabled,
  prefix
} = settings.pkg;
const blockClass = `${prefix}--toolbar`;
const ToolbarContext = /*#__PURE__*/React.createContext({});

/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
exports.Toolbar = /*#__PURE__*/React.forwardRef((_ref, r) => {
  let {
    children,
    className,
    vertical,
    ...rest
  } = _ref;
  const focusableElements = React.useRef(undefined);
  const getFocusableElements$1 = React.useCallback(() => focusableElements.current, [focusableElements]);
  const localRef = React.useRef(null);
  const ref = r || localRef;
  const [focus, setFocus] = React.useState(-1);
  React.useEffect(() => {
    focusableElements.current = getFocusableElements.getFocusableElements(ref?.['current']);
    if (focus !== -1) {
      getFocusableElements$1()?.forEach((element, index) => {
        element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', '-1');
      });
    }
  });
  React.useEffect(() => {
    if (focus !== -1) {
      getFocusableElements$1()?.[focus].focus();
    }
  }, [focus, getFocusableElements$1]);
  const [arrowNext, arrowPrevious] = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'];
  function onArrowDown(increment) {
    const nextFocus = focus + increment;
    if (getFocusableElements$1()?.[nextFocus]) {
      setFocus(nextFocus);
    }
  }
  function onFocus(_ref2) {
    let {
      target
    } = _ref2;
    const elements = getFocusableElements$1();
    if (elements?.includes(target)) {
      setFocus(elements.indexOf(target));
    }
  }
  function onKeyDown(_ref3) {
    let {
      key,
      target
    } = _ref3;
    if (getFocusableElements$1()?.includes(target)) {
      switch (key) {
        case arrowNext:
          onArrowDown(1);
          break;
        case arrowPrevious:
          onArrowDown(-1);
          break;
      }
    }
  }
  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
    ref: ref,
    className: cx(blockClass, className, {
      [`${blockClass}--vertical`]: vertical
    }),
    onFocus: onFocus,
    onKeyDown: onKeyDown
  }, vertical && {
    'aria-orientation': 'vertical'
  }, devtools.getDevtoolsProps(componentName), {
    role: "toolbar"
  }), /*#__PURE__*/React.createElement(ToolbarContext.Provider, {
    value: {
      vertical
    }
  }, children));
});
const componentName = 'Toolbar';
exports.Toolbar.displayName = componentName;
exports.Toolbar.propTypes = {
  /** Provide the content of the `Toolbar` */
  children: index.propTypesExports.node.isRequired,
  /** Provide an optional class to be applied to the containing node */
  className: index.propTypesExports.string,
  /** Determines whether the `Toolbar` is rendered vertically */
  vertical: index.propTypesExports.bool
};
exports.Toolbar = checkComponentEnabled(exports.Toolbar, componentName);

exports.ToolbarContext = ToolbarContext;
exports.blockClass = blockClass;
exports.componentName = componentName;