@carbon/ibm-products
Version:
Carbon for IBM Products
111 lines (106 loc) • 3.54 kB
JavaScript
/**
* 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.
*/
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useRef, useCallback, useState, useEffect, createContext } from 'react';
import { p as propTypesExports } from '../../_virtual/index.js';
import { getFocusableElements } from '../../global/js/utils/getFocusableElements.js';
import cx from 'classnames';
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
import { pkg } from '../../settings.js';
const {
checkComponentEnabled,
prefix
} = pkg;
const blockClass = `${prefix}--toolbar`;
const ToolbarContext = /*#__PURE__*/createContext({});
/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
let Toolbar = /*#__PURE__*/forwardRef((_ref, r) => {
let {
children,
className,
vertical,
...rest
} = _ref;
const focusableElements = useRef(undefined);
const getFocusableElements$1 = useCallback(() => focusableElements.current, [focusableElements]);
const localRef = useRef(null);
const ref = r || localRef;
const [focus, setFocus] = useState(-1);
useEffect(() => {
focusableElements.current = getFocusableElements(ref?.['current']);
if (focus !== -1) {
getFocusableElements$1()?.forEach((element, index) => {
element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', '-1');
});
}
});
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__default.createElement("div", _extends({}, rest, {
ref: ref,
className: cx(blockClass, className, {
[`${blockClass}--vertical`]: vertical
}),
onFocus: onFocus,
onKeyDown: onKeyDown
}, vertical && {
'aria-orientation': 'vertical'
}, getDevtoolsProps(componentName), {
role: "toolbar"
}), /*#__PURE__*/React__default.createElement(ToolbarContext.Provider, {
value: {
vertical
}
}, children));
});
const componentName = 'Toolbar';
Toolbar.displayName = componentName;
Toolbar.propTypes = {
/** Provide the content of the `Toolbar` */
children: propTypesExports.node.isRequired,
/** Provide an optional class to be applied to the containing node */
className: propTypesExports.string,
/** Determines whether the `Toolbar` is rendered vertically */
vertical: propTypesExports.bool
};
Toolbar = checkComponentEnabled(Toolbar, componentName);
export { Toolbar, ToolbarContext, blockClass, componentName };