@itwin/itwinui-react/DEV-cjs/core/ButtonGroup/ButtonGroup.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
function _export(target, all) {
  for (var name in all)
    Object.defineProperty(target, name, {
      enumerable: true,
      get: all[name],
    });
}
_export(exports, {
  ButtonGroup: function () {
    return ButtonGroup;
  },
  ButtonGroupContext: function () {
    return ButtonGroupContext;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _index = require('../../utils/index.js');
const _react1 = require('@floating-ui/react');
const _Tooltip = require('../Tooltip/Tooltip.js');
const ButtonGroupContext = _react.createContext(void 0);
if ('development' === process.env.NODE_ENV)
  ButtonGroupContext.displayName = 'ButtonGroupContext';
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(_react1.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(
    _react1.FloatingDelayGroup,
    {
      delay: _Tooltip.defaultTooltipDelay,
    },
    _react.createElement(
      ButtonGroupContext.Provider,
      {
        value: orientation,
      },
      'toolbar' === props.role
        ? _react.createElement(_react1.Composite, {
            orientation: orientation,
            render: node,
            disabledIndices: [],
          })
        : node,
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  ButtonGroup.displayName = 'ButtonGroup';
const BaseGroup = _react.forwardRef((props, forwardedRef) => {
  let { orientation, className, ...rest } = props;
  return _react.createElement(_index.Box, {
    className: (0, _classnames.default)('iui-button-group', className),
    'data-iui-orientation': 'vertical' === orientation ? orientation : void 0,
    ref: forwardedRef,
    ...rest,
  });
});
const 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(
    _index.OverflowContainer,
    {
      as: BaseGroup,
      itemsCount: items.length,
      overflowOrientation: orientation,
      orientation: orientation,
      ...rest,
      className: (0, _classnames.default)(
        {
          'iui-button-group-overflow-x':
            !!overflowButton && 'horizontal' === orientation,
        },
        props.className,
      ),
      ref: forwardedRef,
    },
    _react.createElement(OverflowGroupContent, {
      overflowButton: overflowButton,
      overflowPlacement: overflowPlacement,
      items: items,
    }),
  );
});
const OverflowGroupContent = (props) => {
  let { overflowButton, overflowPlacement, items } = props;
  let { visibleCount } = _index.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),
  );
};