({
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledby,
children,
fullWidth,
onChange,
size,
sx: sxProp = defaultSxProp,
variant = 'default',
...rest
})
| 45 | }) |
| 46 | |
| 47 | const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({ |
| 48 | 'aria-label': ariaLabel, |
| 49 | 'aria-labelledby': ariaLabelledby, |
| 50 | children, |
| 51 | fullWidth, |
| 52 | onChange, |
| 53 | size, |
| 54 | sx: sxProp = defaultSxProp, |
| 55 | variant = 'default', |
| 56 | ...rest |
| 57 | }) => { |
| 58 | const segmentedControlContainerRef = useRef<HTMLUListElement>(null) |
| 59 | const {theme} = useTheme() |
| 60 | const isUncontrolled = |
| 61 | onChange === undefined || |
| 62 | React.Children.toArray(children).some( |
| 63 | child => React.isValidElement<SegmentedControlButtonProps>(child) && child.props.defaultSelected !== undefined, |
| 64 | ) |
| 65 | const responsiveVariant = useResponsiveValue(variant, 'default') |
| 66 | const isFullWidth = useResponsiveValue(fullWidth, false) |
| 67 | const selectedSegments = React.Children.toArray(children).map( |
| 68 | child => |
| 69 | React.isValidElement<SegmentedControlButtonProps | SegmentedControlIconButtonProps>(child) && |
| 70 | (child.props.defaultSelected || child.props.selected), |
| 71 | ) |
| 72 | const hasSelectedButton = selectedSegments.some(isSelected => isSelected) |
| 73 | const selectedIndexExternal = hasSelectedButton ? selectedSegments.indexOf(true) : 0 |
| 74 | const [selectedIndexInternalState, setSelectedIndexInternalState] = useState<number>(selectedIndexExternal) |
| 75 | const selectedIndex = isUncontrolled ? selectedIndexInternalState : selectedIndexExternal |
| 76 | const selectedChild = React.isValidElement<SegmentedControlButtonProps | SegmentedControlIconButtonProps>( |
| 77 | React.Children.toArray(children)[selectedIndex], |
| 78 | ) |
| 79 | ? React.Children.toArray(children)[selectedIndex] |
| 80 | : undefined |
| 81 | const getChildIcon = (childArg: React.ReactNode) => { |
| 82 | if ( |
| 83 | React.isValidElement<SegmentedControlButtonProps>(childArg) && |
| 84 | childArg.type === Button && |
| 85 | childArg.props.leadingIcon |
| 86 | ) { |
| 87 | return childArg.props.leadingIcon |
| 88 | } |
| 89 | |
| 90 | return React.isValidElement<SegmentedControlIconButtonProps>(childArg) ? childArg.props.icon : null |
| 91 | } |
| 92 | const getChildText = (childArg: React.ReactNode) => { |
| 93 | if (React.isValidElement<SegmentedControlButtonProps>(childArg) && childArg.type === Button) { |
| 94 | return childArg.props.children |
| 95 | } |
| 96 | |
| 97 | return React.isValidElement<SegmentedControlIconButtonProps>(childArg) ? childArg.props['aria-label'] : null |
| 98 | } |
| 99 | const listSx = merge(getSegmentedControlStyles({isFullWidth, size}), sxProp as SxProp) |
| 100 | |
| 101 | if (!ariaLabel && !ariaLabelledby) { |
| 102 | // eslint-disable-next-line no-console |
| 103 | console.warn( |
| 104 | 'Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies', |
nothing calls this directly
no test coverage detected