DotMenu.tsx

import React from 'react';
import classNames from 'classnames';
import styled from 'styled-components/macro';
import { PlainButton } from './Button';
import Dropdown, { DropdownList, DropdownProps } from './Dropdown';
import './DotMenu.css';

/**
 * Three-dot vertical menu icon (ellipsis).
 * SVG path from Font Awesome Free (https://fontawesome.com - MIT License)
 *
 * Note: Wrapped with styled() to enable styled-components component selector references
 */
function DotMenuIconBase({ className, ...props }: React.SVGAttributes<SVGSVGElement>) {
  return (
    <svg
      className={classNames('dot-menu-icon', className)}
      viewBox="0 0 192 512"
      aria-hidden="true"
      {...props}
    >
      <path
        fill="currentColor"
        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
      />
    </svg>
  );
}

export const DotMenuIcon = styled(DotMenuIconBase)``;

interface DotMenuToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
  isOpen?: boolean;
  [key: `data-${string}`]: unknown;
}

const DotMenuToggleBase = React.forwardRef<HTMLButtonElement, DotMenuToggleProps>(
  function DotMenuToggleBase({ isOpen, className, ...props }, ref) {
    return (
      <PlainButton
        className={classNames('dot-menu-toggle', className)}
        aria-label="Actions"
        aria-expanded={isOpen}
        {...props}
        ref={ref}
      >
        <div tabIndex={-1}>
          <DotMenuIcon />
        </div>
      </PlainButton>
    );
  }
);

export const DotMenuToggle = styled(DotMenuToggleBase)``;

type DotMenuDropdownListProps = React.ComponentPropsWithoutRef<typeof DropdownList> & {
  rightAlign?: boolean;
}

export function DotMenuDropdownList({ rightAlign, className, children, ...props }: DotMenuDropdownListProps) {
  return (
    <DropdownList
      className={classNames(
        'dot-menu-dropdown-list',
        { 'dot-menu-right-align': rightAlign },
        className
      )}
      {...props}
    >
      {children}
    </DropdownList>
  );
}

export type DotMenuDropdownProps = Omit<DropdownProps, 'children' | 'toggle'> & {
  children?: React.ReactNode;
  toggle?: React.ReactElement;
};

export function DotMenuDropdown({ className, children, toggle, ...props }: DotMenuDropdownProps) {
  // Extract rightAlign from children if it's a DotMenuDropdownList
  const rightAlign = React.Children.toArray(children).some(
    (child) => React.isValidElement(child) && child.props.rightAlign
  );

  return (
    <Dropdown
      className={classNames('dot-menu-dropdown', className)}
      menuClassName={rightAlign ? 'dot-menu-right-align' : 'dot-menu-left-align'}
      toggle={toggle || <DotMenuToggle />}
      {...props}
    >
      {children}
    </Dropdown>
  );
}