@itwin/itwinui-react/esm/core/ButtonGroup/ButtonGroup.js

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import { Box, OverflowContainer } from '../../utils/index.js';
import {
  Composite,
  CompositeItem,
  FloatingDelayGroup,
} from '@floating-ui/react';
import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
export const ButtonGroupContext = React.createContext(void 0);
if ('development' === process.env.NODE_ENV)
  ButtonGroupContext.displayName = 'ButtonGroupContext';
export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
  let {
    children: childrenProp,
    overflowButton,
    overflowPlacement = 'end',
    orientation = 'horizontal',
    ...rest
  } = props;
  let children = React.useMemo(() => {
    if ('toolbar' !== props.role) return childrenProp;
    return React.Children.map(childrenProp, (child, index) =>
      React.isValidElement(child)
        ? React.createElement(CompositeItem, {
            key: index,
            render: child,
          })
        : child,
    );
  }, [childrenProp, props.role]);
  let node = overflowButton
    ? React.createElement(
        OverflowGroup,
        {
          orientation: orientation,
          overflowButton: overflowButton,
          overflowPlacement: overflowPlacement,
          ref: forwardedRef,
          ...rest,
        },
        children,
      )
    : React.createElement(
        BaseGroup,
        {
          orientation: orientation,
          ref: forwardedRef,
          ...rest,
        },
        children,
      );
  return React.createElement(
    FloatingDelayGroup,
    {
      delay: defaultTooltipDelay,
    },
    React.createElement(
      ButtonGroupContext.Provider,
      {
        value: orientation,
      },
      'toolbar' === props.role
        ? React.createElement(Composite, {
            orientation: orientation,
            render: node,
            disabledIndices: [],
          })
        : node,
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  ButtonGroup.displayName = 'ButtonGroup';
let BaseGroup = React.forwardRef((props, forwardedRef) => {
  let { orientation, className, ...rest } = props;
  return React.createElement(Box, {
    className: cx('iui-button-group', className),
    'data-iui-orientation': 'vertical' === orientation ? orientation : void 0,
    ref: forwardedRef,
    ...rest,
  });
});
let OverflowGroup = React.forwardRef((props, forwardedRef) => {
  let {
    children: childrenProp,
    orientation,
    overflowButton,
    overflowPlacement,
    ...rest
  } = props;
  let items = React.useMemo(
    () => React.Children.toArray(childrenProp).filter(Boolean),
    [childrenProp],
  );
  return React.createElement(
    OverflowContainer,
    {
      as: BaseGroup,
      itemsCount: items.length,
      overflowOrientation: orientation,
      orientation: orientation,
      ...rest,
      className: cx(
        {
          'iui-button-group-overflow-x':
            !!overflowButton && 'horizontal' === orientation,
        },
        props.className,
      ),
      ref: forwardedRef,
    },
    React.createElement(OverflowGroupContent, {
      overflowButton: overflowButton,
      overflowPlacement: overflowPlacement,
      items: items,
    }),
  );
});
let OverflowGroupContent = (props) => {
  let { overflowButton, overflowPlacement, items } = props;
  let { visibleCount } = OverflowContainer.useContext();
  let overflowStart =
    'start' === overflowPlacement
      ? items.length - visibleCount
      : visibleCount - 1;
  if (!(visibleCount < items.length)) return items;
  return React.createElement(
    React.Fragment,
    null,
    overflowButton &&
      'start' === overflowPlacement &&
      overflowButton(overflowStart),
    'start' === overflowPlacement
      ? items.slice(overflowStart + 1)
      : items.slice(0, Math.max(0, overflowStart)),
    overflowButton &&
      'end' === overflowPlacement &&
      overflowButton(overflowStart),
  );
};