@carbon/ibm-products
Version:
Carbon for IBM Products
86 lines (84 loc) • 3.58 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_devtools = require("../../global/js/utils/devtools.js");
const require_getFocusableElements = require("../../global/js/utils/getFocusableElements.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
//#region src/components/Toolbar/Toolbar.tsx
/**
* Copyright IBM Corp. 2021, 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.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const blockClass = `${require_settings.pkg.prefix}--toolbar`;
const ToolbarContext = (0, react.createContext)({});
/** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
const Toolbar = (0, react.forwardRef)(({ children, className, vertical, ...rest }, r) => {
const focusableElements = (0, react.useRef)(void 0);
const getFocusableElements$1 = (0, react.useCallback)(() => focusableElements.current, [focusableElements]);
const localRef = (0, react.useRef)(null);
const ref = r || localRef;
const [focus, setFocus] = (0, react.useState)(-1);
(0, react.useEffect)(() => {
focusableElements.current = require_getFocusableElements.getFocusableElements(ref?.["current"]);
if (focus !== -1) getFocusableElements$1()?.forEach((element, index) => {
element[index !== focus ? "setAttribute" : "removeAttribute"]("tabindex", "-1");
});
});
(0, 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({ target }) {
const elements = getFocusableElements$1();
if (elements?.includes(target)) setFocus(elements.indexOf(target));
}
function onKeyDown({ key, target }) {
if (getFocusableElements$1()?.includes(target)) switch (key) {
case arrowNext:
onArrowDown(1);
break;
case arrowPrevious:
onArrowDown(-1);
break;
}
}
return /* @__PURE__ */ react.default.createElement("div", {
...rest,
ref,
className: (0, import_classnames.default)(blockClass, className, { [`${blockClass}--vertical`]: vertical }),
onFocus,
onKeyDown,
...vertical && { "aria-orientation": "vertical" },
...require_devtools.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: prop_types.node.isRequired,
/** Provide an optional class to be applied to the containing node */
className: prop_types.string,
/** Determines whether the `Toolbar` is rendered vertically */
vertical: prop_types.bool
};
//#endregion
exports.Toolbar = Toolbar;
exports.ToolbarContext = ToolbarContext;
exports.blockClass = blockClass;