import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group'; import { ToggleGroupItem, ToggleGroupItemProps } from './ToggleGroupItem'; export interface ToggleGroupProps extends React.HTMLProps { /** Content rendered inside the toggle group */ children?: React.ReactNode; /** Additional classes added to the toggle group */ className?: string; /** Modifies the toggle group to include compact styling. */ isCompact?: boolean; /** Disable all toggle group items under this component. */ areAllGroupsDisabled?: boolean; /** Accessible label for the toggle group */ 'aria-label'?: string; } export const ToggleGroup: React.FunctionComponent = ({ className, children, isCompact = false, areAllGroupsDisabled = false, 'aria-label': ariaLabel, ...props }: ToggleGroupProps) => { const toggleGroupItemList = React.Children.map(children, (child) => !(React.isValidElement(child) && child.type === ToggleGroupItem) ? child : React.cloneElement(child, areAllGroupsDisabled ? { isDisabled: true } : {}) ); return (
{toggleGroupItemList}
); }; ToggleGroup.displayName = 'ToggleGroup';