@react-spectrum/s2
Version:
Spectrum 2 UI components in React
148 lines (136 loc) • 6.53 kB
JavaScript
require("./ButtonGroup.css");
var $25d06cf8d4e72761$exports = require("./Button.cjs");
var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
var $5rFNy$reactjsxruntime = require("react/jsx-runtime");
var $5rFNy$reactariacomponents = require("react-aria-components");
var $5rFNy$react = require("react");
var $5rFNy$reactariautils = require("@react-aria/utils");
var $5rFNy$reactspectrumutils = require("@react-spectrum/utils");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "ButtonGroupContext", () => $e1016b8947dbadb8$export$4c574c91bb0be0e2);
$parcel$export(module.exports, "ButtonGroup", () => $e1016b8947dbadb8$export$69b1032f2ecdf404);
/*
* Copyright 2024 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const $e1016b8947dbadb8$export$4c574c91bb0be0e2 = /*#__PURE__*/ (0, $5rFNy$react.createContext)({});
const $e1016b8947dbadb8$var$buttongroup = function anonymous(props, overrides) {
let rules = " ";
let position = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
for (let p of matches){
if (p[1] === "_P") position = true;
rules += p[0];
}
rules += ' sh91';
if (!position) rules += ' _Pc91';
if (props.size === "XL") rules += ' Ug91';
else if (props.size === "L") rules += ' Ug91';
else if (props.size === "M") rules += ' Ug91';
else if (props.size === "S") rules += ' Ue91';
if (props.size === "XL") rules += ' qg91';
else if (props.size === "L") rules += ' qg91';
else if (props.size === "M") rules += ' qg91';
else if (props.size === "S") rules += ' qe91';
if (props.orientation === "vertical") rules += ' _ta91';
else rules += ' _tc91';
if (props.orientation === "vertical") {
if (props.align === "center") rules += ' eb91';
else if (props.align === "end") rules += ' ec91';
else rules += ' ed91';
} else rules += ' eb91';
if (props.orientation === "vertical") {
if (props.align === "center") rules += ' _Ca91';
else if (props.align === "end") rules += ' _Cb91';
else rules += ' _Cg91';
}
return rules;
};
const $e1016b8947dbadb8$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $5rFNy$react.forwardRef)(function ButtonGroup(props, ref) {
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $e1016b8947dbadb8$export$4c574c91bb0be0e2);
let domRef = (0, $5rFNy$reactspectrumutils.useDOMRef)(ref);
let { size: size = 'M', orientation: orientation = 'horizontal', align: align = 'start', children: children, isDisabled: isDisabled, ...otherProps } = props;
let [hasOverflow, setHasOverflow] = (0, $5rFNy$reactariautils.useValueEffect)(false);
let checkForOverflow = (0, $5rFNy$react.useCallback)(()=>{
let computeHasOverflow = ()=>{
if (domRef.current && orientation === 'horizontal') {
let buttonGroupChildren = Array.from(domRef.current.children);
let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors
// If any buttons have negative X positions (align="end") or extend beyond
// the width of the button group (align="start"), then switch to vertical.
if (buttonGroupChildren.some((child)=>child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX)) return true;
return false;
}
};
if (orientation === 'horizontal') setHasOverflow(function*() {
// Force to horizontal for measurement.
yield false;
// Measure, and update if there is overflow.
yield computeHasOverflow();
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
domRef,
orientation,
setHasOverflow,
children
]);
// There are two main reasons we need to remeasure:
// 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)
(0, $5rFNy$reactariautils.useLayoutEffect)(()=>{
checkForOverflow();
}, [
checkForOverflow
]);
// 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure
let parent = (0, $5rFNy$react.useRef)(null);
(0, $5rFNy$reactariautils.useLayoutEffect)(()=>{
if (domRef.current) parent.current = domRef.current.parentElement;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
domRef.current
]);
(0, $5rFNy$reactspectrumutils.useResizeObserver)({
ref: parent,
onResize: checkForOverflow
});
if (props.isHidden) return null;
let context = {
styles: " _va91",
size: size,
isDisabled: isDisabled
};
return /*#__PURE__*/ (0, $5rFNy$reactjsxruntime.jsx)("div", {
...(0, $5rFNy$reactariautils.filterDOMProps)(otherProps),
ref: domRef,
style: props.UNSAFE_style,
className: (props.UNSAFE_className || '') + $e1016b8947dbadb8$var$buttongroup({
align: align,
orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',
size: size
}, props.styles),
children: /*#__PURE__*/ (0, $5rFNy$reactjsxruntime.jsx)((0, $5rFNy$reactariacomponents.Provider), {
values: [
[
(0, $25d06cf8d4e72761$exports.ButtonContext),
context
],
[
(0, $25d06cf8d4e72761$exports.LinkButtonContext),
context
]
],
children: children
})
});
});
//# sourceMappingURL=ButtonGroup.cjs.map