{"version":3,"file":"MenuItem.mjs","sources":["../../../../../../../../../web/src/adminPortal/shared/components/MenuItem.tsx"],"sourcesContent":["import { MenuItem as MUIMenuItem, styled } from '@mui/material';\nimport React, { MouseEventHandler, ReactNode } from 'react';\n\nimport { FlexBox } from '../../components/FlexBox';\nimport { InjectedComponents } from './componentInjection';\nimport { OptionItem, Prettify } from './types';\n\nconst TextContainer = styled('div')({\n  display: 'flex',\n  flexDirection: 'column',\n  textWrap: 'wrap',\n});\n\nconst IconContainer = styled('div')<{ visible?: boolean }>(({ visible, theme }) => ({\n  display: 'flex',\n  marginRight: theme.spacing(1),\n  visibility: visible ? 'visible' : 'hidden',\n}));\n\nconst StyledMenuItem = styled(MUIMenuItem)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(1),\n  flex: 1,\n}));\n\nexport type MenuItemFields = Prettify<\n  OptionItem & {\n    /**\n     * Subtext for the menu item.\n     */\n    subtext?: string;\n    /**\n     * Function to call when the menu item is clicked.\n     */\n    onClick?: MouseEventHandler<HTMLLIElement>;\n  }\n>;\n\nexport type MenuItemCoreProps = MenuItemFields & {\n  /**\n   * Icon to show on the left of the menu item\n   */\n  Icon?: ReactNode;\n  /**\n   * Whether the menu item is selected. Controls whether the icon shows.\n   */\n  selected?: boolean;\n  /**\n   * This prop is only used for the MUI Select component since the Select handles the onClick and selected props.\n   * For other cases use the 'selected' prop instead.\n   */\n  forceSelected?: boolean;\n};\n\nexport const MenuItemCore = ({\n  Icon,\n  disabled,\n  forceSelected,\n  label,\n  onClick,\n  selected,\n  subtext,\n  TypographyComponent: Typography,\n}: MenuItemCoreProps & InjectedComponents<'Typography'>): JSX.Element => {\n  return (\n    <FlexBox alignItems=\"center\" justifyContent=\"space-between\">\n      <StyledMenuItem data-value={label} disabled={disabled} onClick={onClick}>\n        {Icon && <IconContainer visible={selected || forceSelected}>{Icon}</IconContainer>}\n        <TextContainer>\n          <Typography variant=\"body2\">{label}</Typography>\n          <Typography variant=\"caption\">{subtext}</Typography>\n        </TextContainer>\n      </StyledMenuItem>\n    </FlexBox>\n  );\n};\n"],"names":["TextContainer","styled","display","flexDirection","textWrap","IconContainer","visible","theme","marginRight","spacing","visibility","StyledMenuItem","MUIMenuItem","alignItems","padding","flex","MenuItemCore","Icon","disabled","forceSelected","label","onClick","selected","subtext","TypographyComponent","Typography","React","FlexBox","justifyContent","data-value","variant"],"mappings":";;;;;AAOA,MAAMA,aAAAA,GAAgBC,OAAO,KAAA,CAAA,CAAO;IAClCC,OAAAA,EAAS,MAAA;IACTC,aAAAA,EAAe,QAAA;IACfC,QAAAA,EAAU;AACZ,CAAA,CAAA;AAEA,MAAMC,aAAAA,GAAgBJ,MAAAA,CAAO,KAAA,CAAA,CAA8B,CAAC,EAAEK,OAAO,EAAEC,KAAK,EAAE,IAAM;QAClFL,OAAAA,EAAS,MAAA;QACTM,WAAAA,EAAaD,KAAAA,CAAME,OAAO,CAAC,CAAA,CAAA;AAC3BC,QAAAA,UAAAA,EAAYJ,UAAU,SAAA,GAAY;KACpC,CAAA,CAAA;AAEA,MAAMK,cAAAA,GAAiBV,OAAOW,QAAAA,CAAAA,CAAa,CAAC,EAAEL,KAAK,EAAE,IAAM;QACzDL,OAAAA,EAAS,MAAA;QACTW,UAAAA,EAAY,QAAA;QACZC,OAAAA,EAASP,KAAAA,CAAME,OAAO,CAAC,CAAA,CAAA;QACvBM,IAAAA,EAAM;KACR,CAAA,CAAA;AA+BO,MAAMC,eAAe,CAAC,EAC3BC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,OAAO,EACPC,mBAAAA,EAAqBC,UAAU,EACsB,GAAA;AACrD,IAAA,qBACEC,EAAA,CAAA,aAAA,CAACC,OAAAA,EAAAA;QAAQd,UAAAA,EAAW,QAAA;QAASe,cAAAA,EAAe;qBAC1CF,EAAA,CAAA,aAAA,CAACf,cAAAA,EAAAA;QAAekB,YAAAA,EAAYT,KAAAA;QAAOF,QAAAA,EAAUA,QAAAA;QAAUG,OAAAA,EAASA;AAC7DJ,KAAAA,EAAAA,IAAAA,kBAAQS,EAAA,CAAA,aAAA,CAACrB,aAAAA,EAAAA;AAAcC,QAAAA,OAAAA,EAASgB,QAAAA,IAAYH;OAAgBF,IAAAA,CAAAA,gBAC7DS,EAAA,CAAA,aAAA,CAAC1B,mCACC0B,EAAA,CAAA,aAAA,CAACD,UAAAA,EAAAA;QAAWK,OAAAA,EAAQ;AAASV,KAAAA,EAAAA,KAAAA,CAAAA,gBAC7BM,EAAA,CAAA,aAAA,CAACD,UAAAA,EAAAA;QAAWK,OAAAA,EAAQ;AAAWP,KAAAA,EAAAA,OAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAKzC;;;;"}