@itwin/itwinui-react/DEV-cjs/core/Buttons/SplitButton.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'SplitButton', {
  enumerable: true,
  get: function () {
    return SplitButton;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _Button = require('./Button.js');
const _IconButton = require('./IconButton.js');
const _index = require('../../utils/index.js');
const _Menu = require('../Menu/Menu.js');
const SplitButton = _react.forwardRef((props, forwardedRef) => {
  let {
    onClick,
    menuItems,
    className,
    menuPlacement = 'bottom-end',
    styleType = 'default',
    size,
    children,
    wrapperProps,
    menuButtonProps,
    dropdownMenuProps,
    portal = true,
    ...rest
  } = props;
  let { middleware, ...dropdownMenuPropsRest } = dropdownMenuProps || {};
  let [visible, setVisible] = _react.useState(false);
  let menuContent = _react.useMemo(() => {
    if ('function' == typeof menuItems)
      return menuItems(() => setVisible(false));
    return menuItems;
  }, [menuItems]);
  let popoverProps = {
    visible,
    onVisibleChange: setVisible,
    placement: menuPlacement,
    matchWidth: true,
    middleware,
  };
  let labelId = (0, _index.useId)();
  let trigger = _react.createElement(
    _IconButton.IconButton,
    {
      styleType: styleType,
      size: size,
      disabled: props.disabled,
      'aria-labelledby': props.labelProps?.id || labelId,
      ...menuButtonProps,
    },
    visible
      ? _react.createElement(_index.SvgCaretUpSmall, null)
      : _react.createElement(_index.SvgCaretDownSmall, null),
  );
  let [positionReference, setPositionReference] = _react.useState(null);
  return _react.createElement(
    _index.Box,
    {
      as: 'div',
      ...wrapperProps,
      ref: setPositionReference,
      className: (0, _classnames.default)(
        'iui-button-split',
        {
          'iui-disabled': props.disabled,
        },
        wrapperProps?.className,
      ),
    },
    _react.createElement(
      _Button.Button,
      {
        className: className,
        styleType: styleType,
        size: size,
        onClick: onClick,
        ref: forwardedRef,
        ...rest,
        labelProps: {
          id: labelId,
          ...props.labelProps,
        },
      },
      children,
    ),
    _react.createElement(
      _Menu.Menu,
      {
        popoverProps: popoverProps,
        trigger: trigger,
        portal: portal,
        positionReference: positionReference,
        ...dropdownMenuPropsRest,
        onKeyDown: (0, _index.mergeEventHandlers)(
          dropdownMenuPropsRest?.onKeyDown,
          ({ key }) => {
            if ('Tab' === key) setVisible(false);
          },
        ),
      },
      menuContent,
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  SplitButton.displayName = 'SplitButton';