@primer/react
Version:
An implementation of GitHub's Primer Design System using React
253 lines (252 loc) • 9.38 kB
JavaScript
import { isSlot } from "../utils/is-slot.js";
import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
import { ActionList } from "../ActionList/index.js";
import { ActionMenu } from "../ActionMenu/ActionMenu.js";
import SegmentedControl_module_css_default from "./SegmentedControl.module.css.js";
import SegmentedControlButton from "./SegmentedControlButton.js";
import { SegmentedControlIconButton } from "./SegmentedControlIconButton.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import React, { useRef, useState } from "react";
import { isElement } from "react-is";
//#region src/SegmentedControl/SegmentedControl.tsx
const Root = (t0) => {
const $ = c(54);
let ariaLabel;
let ariaLabelledby;
let children;
let className;
let fullWidth;
let onChange;
let rest;
let size;
let t1;
if ($[0] !== t0) {
({"aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, fullWidth, onChange, size, variant: t1, className, ...rest} = t0);
$[0] = t0;
$[1] = ariaLabel;
$[2] = ariaLabelledby;
$[3] = children;
$[4] = className;
$[5] = fullWidth;
$[6] = onChange;
$[7] = rest;
$[8] = size;
$[9] = t1;
} else {
ariaLabel = $[1];
ariaLabelledby = $[2];
children = $[3];
className = $[4];
fullWidth = $[5];
onChange = $[6];
rest = $[7];
size = $[8];
t1 = $[9];
}
const variant = t1 === void 0 ? "default" : t1;
const segmentedControlContainerRef = useRef(null);
let t2;
if ($[10] !== children || $[11] !== onChange) {
t2 = onChange === void 0 || React.Children.toArray(children).some(_temp);
$[10] = children;
$[11] = onChange;
$[12] = t2;
} else t2 = $[12];
const isUncontrolled = t2;
let t3;
if ($[13] !== children) {
const selectedSegments = React.Children.toArray(children).map(_temp2);
t3 = selectedSegments.some(_temp3) ? selectedSegments.indexOf(true) : 0;
$[13] = children;
$[14] = t3;
} else t3 = $[14];
const selectedIndexExternal = t3;
const [selectedIndexInternalState, setSelectedIndexInternalState] = useState(selectedIndexExternal);
const selectedIndex = isUncontrolled ? selectedIndexInternalState : selectedIndexExternal;
let hasDropdownVariant;
let t4;
if ($[15] !== ariaLabel || $[16] !== ariaLabelledby || $[17] !== children || $[18] !== isUncontrolled || $[19] !== onChange || $[20] !== selectedIndex || $[21] !== variant) {
const selectedChild = /*#__PURE__*/ React.isValidElement(React.Children.toArray(children)[selectedIndex]) ? React.Children.toArray(children)[selectedIndex] : void 0;
const getChildIcon = _temp4;
const getChildText = _temp5;
if (!ariaLabel && !ariaLabelledby) console.warn("Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies");
const responsiveVariant = typeof variant === "object" ? variant : void 0;
let t5;
if ($[24] !== responsiveVariant) {
t5 = responsiveVariant ? Object.values(responsiveVariant).includes("dropdown") : false;
$[24] = responsiveVariant;
$[25] = t5;
} else t5 = $[25];
hasDropdownVariant = t5;
t4 = hasDropdownVariant && /*#__PURE__*/ jsx("div", {
className: SegmentedControl_module_css_default.DropdownContainer,
...getResponsiveAttributes("variant", variant),
children: /*#__PURE__*/ jsxs(ActionMenu, { children: [/*#__PURE__*/ jsx(ActionMenu.Button, {
"aria-label": ariaLabel && `${getChildText(selectedChild)}, ${ariaLabel}`,
leadingVisual: getChildIcon(selectedChild),
children: getChildText(selectedChild)
}), /*#__PURE__*/ jsx(ActionMenu.Overlay, {
"aria-labelledby": ariaLabelledby,
children: /*#__PURE__*/ jsx(ActionList, {
selectionVariant: "single",
children: React.Children.map(children, (child_1, index) => {
const ChildIcon = getChildIcon(child_1);
if (!/*#__PURE__*/ React.isValidElement(child_1)) return null;
return /*#__PURE__*/ jsxs(ActionList.Item, {
selected: index === selectedIndex,
onSelect: (event) => {
isUncontrolled && setSelectedIndexInternalState(index);
onChange && onChange(index);
child_1.props.onClick && child_1.props.onClick(event);
},
children: [
ChildIcon,
" ",
getChildText(child_1)
]
}, `segmented-control-action-btn-${index}`);
})
})
})] })
});
$[15] = ariaLabel;
$[16] = ariaLabelledby;
$[17] = children;
$[18] = isUncontrolled;
$[19] = onChange;
$[20] = selectedIndex;
$[21] = variant;
$[22] = hasDropdownVariant;
$[23] = t4;
} else {
hasDropdownVariant = $[22];
t4 = $[23];
}
const dropdownContent = t4;
let t5;
if ($[26] !== className) {
t5 = clsx(SegmentedControl_module_css_default.SegmentedControl, className);
$[26] = className;
$[27] = t5;
} else t5 = $[27];
let t6;
if ($[28] !== fullWidth) {
t6 = getResponsiveAttributes("full-width", fullWidth);
$[28] = fullWidth;
$[29] = t6;
} else t6 = $[29];
let t7;
if ($[30] !== variant) {
t7 = getResponsiveAttributes("variant", variant);
$[30] = variant;
$[31] = t7;
} else t7 = $[31];
let t8;
if ($[32] !== children || $[33] !== isUncontrolled || $[34] !== onChange || $[35] !== selectedIndex) {
let t9;
if ($[37] !== isUncontrolled || $[38] !== onChange || $[39] !== selectedIndex) {
t9 = (child_2, index_0) => {
if (!/*#__PURE__*/ React.isValidElement(child_2)) return null;
const sharedChildProps = {
onClick: onChange ? (event_0) => {
if (!(child_2.props.disabled === true || child_2.props["aria-disabled"] === "true" || child_2.props["aria-disabled"] === true)) {
onChange(index_0);
isUncontrolled && setSelectedIndexInternalState(index_0);
child_2.props.onClick && child_2.props.onClick(event_0);
}
} : (event_1) => {
if (!(child_2.props.disabled === true || child_2.props["aria-disabled"] === "true" || child_2.props["aria-disabled"] === true)) {
child_2.props.onClick && child_2.props.onClick(event_1);
isUncontrolled && setSelectedIndexInternalState(index_0);
}
},
selected: index_0 === selectedIndex,
style: {
"--separator-color": index_0 === selectedIndex || index_0 === selectedIndex - 1 ? "transparent" : "var(--borderColor-default)",
...child_2.props.style
}
};
return /*#__PURE__*/ React.cloneElement(child_2, sharedChildProps);
};
$[37] = isUncontrolled;
$[38] = onChange;
$[39] = selectedIndex;
$[40] = t9;
} else t9 = $[40];
t8 = React.Children.map(children, t9);
$[32] = children;
$[33] = isUncontrolled;
$[34] = onChange;
$[35] = selectedIndex;
$[36] = t8;
} else t8 = $[36];
let t9;
if ($[41] !== ariaLabel || $[42] !== ariaLabelledby || $[43] !== rest || $[44] !== size || $[45] !== t5 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8) {
t9 = /*#__PURE__*/ jsx("ul", {
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
ref: segmentedControlContainerRef,
className: t5,
...t6,
...t7,
"data-size": size,
...rest,
"data-component": "SegmentedControl",
children: t8
});
$[41] = ariaLabel;
$[42] = ariaLabelledby;
$[43] = rest;
$[44] = size;
$[45] = t5;
$[46] = t6;
$[47] = t7;
$[48] = t8;
$[49] = t9;
} else t9 = $[49];
const segmentedControlContent = t9;
let t10;
if ($[50] !== dropdownContent || $[51] !== hasDropdownVariant || $[52] !== segmentedControlContent) {
t10 = hasDropdownVariant ? /*#__PURE__*/ jsxs(Fragment, { children: [dropdownContent, segmentedControlContent] }) : segmentedControlContent;
$[50] = dropdownContent;
$[51] = hasDropdownVariant;
$[52] = segmentedControlContent;
$[53] = t10;
} else t10 = $[53];
return t10;
};
Root.displayName = "SegmentedControl";
const SegmentedControl = Object.assign(Root, {
Button: SegmentedControlButton,
IconButton: SegmentedControlIconButton
});
function _temp(child) {
return /*#__PURE__*/ React.isValidElement(child) && child.props.defaultSelected !== void 0;
}
function _temp2(child_0) {
return /*#__PURE__*/ React.isValidElement(child_0) && (child_0.props.defaultSelected || child_0.props.selected);
}
function _temp3(isSelected) {
return isSelected;
}
function _temp4(childArg) {
if (/*#__PURE__*/ React.isValidElement(childArg) && (childArg.type === SegmentedControlButton || isSlot(childArg, SegmentedControlButton))) {
var _childArg$props$leadi;
const leadingVisual = (_childArg$props$leadi = childArg.props.leadingVisual) !== null && _childArg$props$leadi !== void 0 ? _childArg$props$leadi : childArg.props.leadingIcon;
if (leadingVisual) if (isElement(leadingVisual)) return leadingVisual;
else return /*#__PURE__*/ jsx(leadingVisual, {});
}
if (/*#__PURE__*/ React.isValidElement(childArg) && (childArg.type === SegmentedControlIconButton || isSlot(childArg, SegmentedControlIconButton))) if (isElement(childArg.props.icon)) {} else {
const Icon = childArg.props.icon;
return /*#__PURE__*/ jsx(Icon, {});
}
return null;
}
function _temp5(childArg_0) {
if (/*#__PURE__*/ React.isValidElement(childArg_0) && (childArg_0.type === SegmentedControlButton || isSlot(childArg_0, SegmentedControlButton))) return childArg_0.props.children;
return /*#__PURE__*/ React.isValidElement(childArg_0) ? childArg_0.props["aria-label"] : null;
}
//#endregion
export { SegmentedControl };