@itwin/itwinui-react/esm/core/Header/HeaderDropdownButton.js

A react component library for iTwinUI

import * as React from 'react';
import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
import {
  useMergedRefs,
  SvgCaretDownSmall,
  SvgCaretUpSmall,
} from '../../utils/index.js';
import { HeaderBasicButton } from './HeaderBasicButton.js';
export const HeaderDropdownButton = React.forwardRef((props, ref) => {
  let { menuItems, children, ...rest } = props;
  let [isMenuOpen, setIsMenuOpen] = React.useState(false);
  let [menuWidth, setMenuWidth] = React.useState(0);
  let buttonRef = React.useRef(null);
  let refs = useMergedRefs(ref, buttonRef);
  React.useEffect(() => {
    if (buttonRef.current) setMenuWidth(buttonRef.current.offsetWidth);
  }, [children]);
  return React.createElement(
    DropdownMenu,
    {
      menuItems: menuItems,
      style: {
        minInlineSize: menuWidth,
      },
      onVisibleChange: (open) => setIsMenuOpen(open),
    },
    React.createElement(
      HeaderBasicButton,
      {
        ref: refs,
        'aria-label': 'Dropdown',
        endIcon: isMenuOpen
          ? React.createElement(SvgCaretUpSmall, {
              className: 'iui-header-breadcrumb-button-dropdown-icon',
              'aria-hidden': true,
            })
          : React.createElement(SvgCaretDownSmall, {
              className: 'iui-header-breadcrumb-button-dropdown-icon',
              'aria-hidden': true,
            }),
        ...rest,
      },
      children,
    ),
  );
});