@carbon/react
Version:
React components for the Carbon Design System
90 lines (88 loc) • 3.41 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 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_usePrefix = require("../../internal/usePrefix.js");
const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/ButtonSet/ButtonSet.tsx
/**
* Copyright IBM Corp. 2016, 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.
*/
const buttonOrder = (kind) => ({
ghost: 1,
"danger--ghost": 2,
tertiary: 3,
danger: 5,
primary: 6
})[kind] ?? 4;
const getButtonKind = (element) => {
if (react.default.isValidElement(element) && element.props && typeof element.props === "object") return element.props.kind ?? "primary";
return "primary";
};
const ButtonSet = (0, react.forwardRef)((props, ref) => {
const { children, className, fluid, stacked, ...rest } = props;
const prefix = require_usePrefix.usePrefix();
const fluidInnerRef = (0, react.useRef)(null);
const [isStacked, setIsStacked] = (0, react.useState)(false);
const [sortedChildren, setSortedChildren] = (0, react.useState)(react.default.Children.toArray(children));
/**
* Used to determine if the buttons are currently stacked
*/
require_useIsomorphicEffect.default(() => {
const checkStacking = () => {
let newIsStacked = stacked || false;
if (fluidInnerRef && fluidInnerRef.current) newIsStacked = window.getComputedStyle(fluidInnerRef.current)?.getPropertyValue?.("--flex-direction") === "column";
return newIsStacked;
};
setIsStacked(checkStacking());
if (!fluidInnerRef.current) return;
const resizeObserver = new ResizeObserver(() => {
setIsStacked(checkStacking());
});
resizeObserver.observe(fluidInnerRef.current);
return () => resizeObserver.disconnect();
}, [fluid, stacked]);
(0, react.useEffect)(() => {
const newSortedChildren = react.default.Children.toArray(children);
newSortedChildren.sort((a, b) => {
return (buttonOrder(getButtonKind(a)) - buttonOrder(getButtonKind(b))) * (isStacked ? -1 : 1);
});
setSortedChildren(newSortedChildren);
}, [children, isStacked]);
const buttonSetClasses = (0, classnames.default)(className, `${prefix}--btn-set`, {
[`${prefix}--btn-set--stacked`]: isStacked,
[`${prefix}--btn-set--fluid`]: fluid
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
...rest,
className: buttonSetClasses,
ref,
children: fluid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
ref: fluidInnerRef,
className: (0, classnames.default)(`${prefix}--btn-set__fluid-inner`, { [`${prefix}--btn-set__fluid-inner--auto-stack`]: true }),
children: sortedChildren
}) : children
});
});
ButtonSet.displayName = "ButtonSet";
ButtonSet.propTypes = {
children: prop_types.default.node,
className: prop_types.default.string,
fluid: prop_types.default.bool,
stacked: prop_types.default.bool
};
//#endregion
exports.default = ButtonSet;