nishant-design-system/lib/components/Tabs/TabList/TabDropdown.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';
import {
  // $FlowFixMe[untyped-import]
  autoUpdate,
  // $FlowFixMe[untyped-import]
  flip,
  // $FlowFixMe[untyped-import]
  offset,
  // $FlowFixMe[untyped-import]
  shift,
  // $FlowFixMe[untyped-import]
  useFloating,
} from '@floating-ui/react-dom';

import {spaceNone, spaceXXSmall} from '../../../styles/variables/_space';
import {classify} from '../../../utils/classify';
import {ClickAway} from '../../../utils/click-away';
import type {AnchorType} from '../../ButtonDropdown';
import type {MenuOption, MenuProps} from '../../Menu';
import {Menu} from '../../Menu';
import type {TabProps} from '../Tab';
import {Tab} from '../Tab';

import css from './TabDropdown.module.css';


type ClassNames = $ReadOnly<{wrapper?: string}>;

export type TabDropdownProps = {
  anchorPosition?: AnchorType,
  size?: 'medium' | 'small',
  props?: {
    tab: TabProps,
    menu: MenuProps,
  },
  onOptionSelect?: (option: MenuOption) => mixed,
  classNames?: ClassNames,
  selected?: boolean,
  disabled?: boolean,
};

export const TabDropdown = ({
  anchorPosition = 'bottom-start',
  size,
  onOptionSelect,
  props,
  classNames,
}: TabDropdownProps): React.Node => {
  const menuBtnRef = React.useRef();
  const {x, y, reference, floating, strategy} = useFloating({
    strategy: 'absolute',
    placement: anchorPosition,
    whileElementsMounted: autoUpdate,
    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
  });

  return (
    <ClickAway>
      {({isOpen, onOpen, cancelNext, clickAway}) => (
        <div
          data-testid="TabDropdown"
          className={classify(css.tabDropdownContainer, classNames?.wrapper)}
          ref={menuBtnRef}
        >
          <Tab
            {...props?.tab}
            size={size}
            ref={reference}
            onClick={(e) => {
              e.stopPropagation();
              onOpen();
            }}
            classNames={{
              wrapper: css.dotTabWrapper,
              iconTextWrap: css.dotTextWrap,
            }}
          />
          {isOpen && props?.menu && (
            <div
              onClickCapture={cancelNext}
              ref={floating}
              style={{
                display: 'flex',
                position: strategy,
                top: y ?? spaceNone,
                left: x ?? spaceNone,
              }}
            >
              <Menu
                {...props.menu}
                onSelect={(option) => {
                  onOptionSelect && onOptionSelect(option);
                  clickAway();
                }}
                size={props.menu.size || size}
              />
            </div>
          )}
        </div>
      )}
    </ClickAway>
  );
};