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

INX Platform elements

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import { ExpandMore, ExpandLess } from '@mui/icons-material';
import Menu from '@mui/material/Menu';
import Button from '@mui/material/Button';
import Palette from '../../constants/Palette';
import Font from '../../constants/Font';
import { FontStyles } from '../../index';
export default function ExpandableContainer({
  header,
  content,
  transparent,
  buttonStyles,
  padding = 12,
  startIcon,
  endIcon = undefined,
  color = Palette.DIM_GREY,
  border = false,
  width = 'auto',
  height,
  maxHeight,
  menuWidth,
  buttonHeight,
  closeOnClick = false
}) {
  var _a;
  const [open, setOpen] = useState(false);
  const buttonRef = React.useRef(null);
  const handleClose = () => setOpen(false);
  const iconToShow = open ? _jsx(ExpandLess, {
    style: {
      width: '16px',
      height: '16px'
    }
  }) : _jsx(ExpandMore, {
    style: {
      width: '16px',
      height: '16px'
    }
  });
  let extraButtonStyle = transparent ? {
    backgroundColor: "transparent"
  } : {};
  return _jsxs(_Fragment, {
    children: [_jsx(Button, {
      ref: buttonRef,
      "aria-controls": 'basic-menu',
      "aria-haspopup": "true",
      "aria-expanded": open ? 'true' : undefined,
      variant: border ? 'outlined' : 'text',
      fullWidth: true,
      startIcon: startIcon,
      endIcon: endIcon !== undefined ? endIcon : iconToShow,
      style: Object.assign(Object.assign({
        width,
        textTransform: 'initial',
        padding: 8,
        borderRadius: 4,
        color: color,
        backgroundColor: Palette.WHITE,
        borderColor: Palette.DIM_GREY
      }, extraButtonStyle), buttonStyles),
      sx: {
        '&.MuiButton-root': {
          font: FontStyles.INPUT_FONT,
          justifyContent: 'space-between'
        },
        '&.MuiButton-sizeMd': !!buttonHeight ? {
          minHeight: buttonHeight,
          height: buttonHeight
        } : {}
      },
      onClick: () => {
        setOpen(!open);
      },
      children: header
    }), _jsx(Menu, Object.assign({
      placement: "top-left",
      sx: {
        fontFamily: Font.fontFamily,
        fontSize: 12,
        border: "none",
        borderRadius: 4,
        overflowY: 'auto',
        '& .MuiMenu-list': {
          padding: `${padding}px`
        },
        '& .MuiMenuItem-root:hover img': {
          filter: `${Palette.FILTER_LIGHT_BLACK} !important`
        },
        '& .MuiMenuItem-root:hover': {
          backgroundColor: Palette.WHITE_SMOKE
        }
      },
      anchorEl: buttonRef.current,
      anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'left'
      },
      slotProps: {
        paper: {
          sx: {
            width: (_a = menuWidth || width) !== null && _a !== void 0 ? _a : 'auto',
            height: height !== null && height !== void 0 ? height : 'auto',
            maxHeight
          }
        }
      },
      open: open,
      onClose: handleClose
    }, closeOnClick && {
      onClick: handleClose
    }, {
      children: content
    }))]
  });
}