@parkassist/pa-ui-library/dist/components/DroppableMenuWithButton/index.js

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useRef, useState } from 'react';
import { Palette, Row, Column, Button } from '../../index';
import { OpenArrowIcon } from '../Icons';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
function DroppableMenuWithButton({
  buttonLabel,
  options,
  buttonStyle = {},
  buttonIcon = null,
  hideChevron = false
}) {
  const [open, setOpen] = useState(false);
  const buttonRef = useRef(null);
  return _jsxs(_Fragment, {
    children: [_jsx(Button, {
      ref: buttonRef,
      "aria-controls": 'basic-menu',
      "aria-haspopup": "true",
      "aria-expanded": open ? 'true' : undefined,
      onClick: () => setOpen(prevValue => !prevValue),
      style: Object.assign({}, buttonStyle),
      width: "auto",
      children: _jsxs(Row, {
        gap: 8,
        justifyContent: 'space-between',
        children: [_jsx(Column, {
          children: _jsxs(Row, {
            children: [buttonIcon, _jsx(Column, {
              style: {
                marginLeft: buttonIcon ? 8 : 0
              },
              children: buttonLabel
            })]
          })
        }), hideChevron && _jsx(Column, {
          justifyContent: "center",
          alignItems: "center",
          children: _jsx(OpenArrowIcon, {
            filter: Palette.FILTER_LIGHT_BLACK
          })
        })]
      })
    }), _jsx(Menu, {
      open: open,
      onClose: () => setOpen(false),
      placement: "bottom-start",
      anchorEl: buttonRef.current,
      anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'left'
      },
      anchorPosition: {
        top: 186,
        left: 60
      },
      slotProps: {
        paper: {
          sx: {
            marginTop: '8px'
          }
        }
      },
      children: (options || []).map(element => _jsx(MenuItem, {
        disableRipple: true,
        children: element
      }))
    })]
  });
}
export default DroppableMenuWithButton;