{"version":3,"file":"UdpTabs.mjs","names":["React","useCallback","useEffect","useMemo","useState","useRef","createRef","makeStyles","MenuItem","Typography","Popover","ButtonBase","Badge","IconButton","FluentIcon","clsx","MoreVerticalIcon","useStyles","theme","root","flexSkrink","overflow","tabsWrapper","display","gap","props","variant","spacing","flexGrow","tab","padding","flex","blockTab","backgroundColor","palette","background","paper","activeTab","borderBottom","secondary","main","light","color","getContrastText","moreButton","marginTop","width","height","borderRadius","menuItem","whiteSpace","menuWidth","popoverWrapper","maxHeight","menuMaxHeight","UdpTabs","value","onChange","className","menuItemProps","tabList","buttonWidth","classes","tabContainerRef","innerTabContainerRef","anchorEl","setAnchorEl","visibleTabList","setVisibleTabList","menuTabList","setMenuTabList","initialTotalTabWidth","setInitialTotalTabWidth","initialTabWidth","setInitialTabWidth","gapWidth","open","Boolean","currentTabList","map","index","id","ref","handlePopoverClick","event","currentTarget","handlePopoverClose","menuItemSelected","find","getInitialTabWidth","tabsElements","totalTabWidth","tabWidth","length","i","clientWidth","calculateHiddenTabs","current","containerWidth","Array","from","children","moreBtnWidth","hiddenTabsArray","visibleTabsArray","accumulatedWidth","slice","observer","ResizeObserver","entries","observe","disconnect","justifyContent","item","label","replace","e","onClick","fontWeight","vertical","horizontal"],"sources":["../../../../src/UI/navigation/tabs/UdpTabs.jsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  useRef,\n  createRef\n} from 'react';\nimport {\n  makeStyles,\n  MenuItem,\n  Typography,\n  Popover,\n  ButtonBase,\n  Badge,\n  IconButton\n} from '@material-ui/core';\nimport { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';\nimport clsx from 'clsx';\nimport { MoreVerticalIcon } from '@fluentui/react-icons';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    flexSkrink: 0,\n    overflow: 'hidden'\n  },\n  tabsWrapper: {\n    display: 'flex',\n    gap: (props) => (props?.variant === 'block' ? theme.spacing(1) : null),\n    flexGrow: 1\n  },\n  tab: {\n    padding: `8px 18px`,\n    flex: 1\n  },\n  blockTab: {\n    backgroundColor: theme.palette.background.paper\n  },\n  activeTab: {\n    borderBottom: (props) =>\n      props?.variant === 'block'\n        ? null\n        : `2px solid ${theme.palette.secondary.main}`,\n    backgroundColor: (props) =>\n      props?.variant === 'block' ? theme.palette.secondary.light : null,\n    color: (props) =>\n      props?.variant === 'block'\n        ? theme.palette.getContrastText(theme.palette.secondary.light)\n        : null\n  },\n  moreButton: {\n    marginTop: theme.spacing(1),\n    width: theme.spacing(1),\n    height: theme.spacing(1),\n    borderRadius: 2\n  },\n  menuItem: {\n    whiteSpace: 'normal',\n    width: (props) => (props?.menuWidth ? props?.menuWidth : '170px')\n  },\n  popoverWrapper: {\n    maxHeight: (props) =>\n      props?.menuMaxHeight ? props?.menuMaxHeight : '250px'\n  }\n}));\n\nexport const UdpTabs = (props) => {\n  const {\n    value,\n    onChange,\n    className,\n    menuItemProps,\n    tabList,\n    variant,\n    buttonWidth\n  } = props;\n  const classes = useStyles(props);\n  const tabContainerRef = useRef(null);\n  const innerTabContainerRef = useRef(null);\n  const [anchorEl, setAnchorEl] = useState(null);\n  const [visibleTabList, setVisibleTabList] = useState(null);\n  const [menuTabList, setMenuTabList] = useState(null);\n  const [initialTotalTabWidth, setInitialTotalTabWidth] = useState(null);\n  const [initialTabWidth, setInitialTabWidth] = useState();\n  const gapWidth = 8;\n  const open = Boolean(anchorEl);\n\n  const currentTabList = useMemo(() => {\n    return tabList?.map((tab, index) => ({\n      id: index,\n      ...tab,\n      ref: createRef()\n    }));\n  }, [tabList]);\n\n  const handlePopoverClick = useCallback((event, index) => {\n    setAnchorEl(event.currentTarget);\n  }, []);\n\n  const handlePopoverClose = () => {\n    setAnchorEl(null);\n  };\n\n  const menuItemSelected = useMemo(() => {\n    return !!menuTabList?.find((tab) => tab?.id === value);\n  }, [value, menuTabList]);\n\n  const getInitialTabWidth = useCallback(\n    (tabsElements, currentTabList) => {\n      let totalTabWidth = 0;\n      let tabWidth = [];\n\n      if (\n        tabsElements?.length === currentTabList?.length &&\n        !initialTotalTabWidth\n      ) {\n        for (let i = 0; i < tabsElements.length; i++) {\n          totalTabWidth += tabsElements[i].clientWidth;\n          if (variant === 'block') {\n            totalTabWidth += gapWidth;\n          }\n          tabWidth[i] = tabsElements[i].clientWidth;\n        }\n        setInitialTotalTabWidth(totalTabWidth);\n        setInitialTabWidth(tabWidth);\n\n        return { totalTabWidth, tabWidth };\n      }\n\n      return { totalTabWidth: initialTotalTabWidth, tabWidth: initialTabWidth };\n    },\n    [initialTabWidth, initialTotalTabWidth, variant]\n  );\n\n  const calculateHiddenTabs = useCallback(() => {\n    if (innerTabContainerRef.current) {\n      const containerWidth = innerTabContainerRef.current.clientWidth;\n      const tabsElements = Array.from(innerTabContainerRef.current.children);\n      const moreBtnWidth = 24;\n      let hiddenTabsArray = [];\n      let visibleTabsArray = Array.from(currentTabList);\n      const { totalTabWidth, tabWidth } = getInitialTabWidth(\n        tabsElements,\n        currentTabList\n      );\n\n      if (totalTabWidth > containerWidth) {\n        let accumulatedWidth = 0;\n        for (let i = 0; i < tabWidth?.length; i++) {\n          accumulatedWidth += tabWidth[i];\n          if (variant === 'block') {\n            accumulatedWidth += gapWidth;\n          }\n\n          if (accumulatedWidth > containerWidth - moreBtnWidth) {\n            hiddenTabsArray = Array.from(currentTabList).slice(i);\n            visibleTabsArray = Array.from(currentTabList).slice(0, i);\n            break;\n          }\n        }\n      }\n      setVisibleTabList(visibleTabsArray);\n      setMenuTabList(hiddenTabsArray);\n    }\n  }, [currentTabList, getInitialTabWidth, variant]);\n\n  useEffect(() => {\n    // initial visible tab list\n    setVisibleTabList(currentTabList);\n  }, [currentTabList]);\n\n  useEffect(() => {\n    calculateHiddenTabs();\n\n    const observer = new ResizeObserver((entries) => {\n      handlePopoverClose();\n      calculateHiddenTabs();\n    });\n\n    if (tabContainerRef.current) {\n      observer.observe(tabContainerRef.current);\n    }\n\n    // Cleanup observer on component unmount\n    return () => {\n      observer.disconnect();\n    };\n  }, [calculateHiddenTabs]);\n\n  return (\n    <div>\n      <div className={clsx(classes.root, className)} ref={tabContainerRef}>\n        <div\n          className={classes.tabsWrapper}\n          ref={innerTabContainerRef}\n          style={\n            variant === 'spread' ? { justifyContent: 'space-between' } : null\n          }\n        >\n          {visibleTabList?.map((item, index) => (\n            <ButtonBase\n              // style={variant === 'spread' ? { flex: 1 } : null}\n              style={{\n                flex: variant === 'spread' && 1,\n                width: !!buttonWidth && buttonWidth\n              }}\n              key={index}\n              id={\n                'udpRecord-UdpTabs-MenuItem-' + item?.label?.replace(/ /g, '-')\n              }\n              udprecordid={\n                'udpRecord-UdpTabs-MenuItem-' + item?.label?.replace(/ /g, '-')\n              }\n            >\n              <div\n                className={clsx(classes.tab, {\n                  [classes.blockTab]: variant === 'block',\n                  [classes.activeTab]: value === item?.id\n                })}\n                onClick={(e) => {\n                  onChange(e, item?.id);\n                  if (item?.onClick) {\n                    item.onClick();\n                  }\n                  setAnchorEl(null);\n                }}\n              >\n                <Typography\n                  noWrap\n                  style={{\n                    fontWeight: variant === 'spread' ? 'bold' : 'normal'\n                  }}\n                >\n                  {item?.label}\n                </Typography>\n              </div>\n            </ButtonBase>\n          ))}\n          {menuTabList?.length > 0 && (\n            <IconButton\n              onClick={handlePopoverClick}\n              className={classes.moreButton}\n              color='primary'\n              id='udpRecord-UdpTabs-MoreActions'\n              udprecordid='udpRecord-UdpTabs-MoreActions'\n            >\n              <Badge\n                color='secondary'\n                variant='dot'\n                invisible={menuItemSelected === false}\n              >\n                <FluentIcon component={MoreVerticalIcon} size='medium' />\n              </Badge>\n            </IconButton>\n          )}\n        </div>\n\n        {!!menuTabList?.length && (\n          <div>\n            <Popover\n              id='menuTabList'\n              open={open}\n              anchorEl={anchorEl}\n              onClose={handlePopoverClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'left'\n              }}\n              transformOrigin={{\n                vertical: 'top',\n                horizontal: 'left'\n              }}\n              className={classes.popoverWrapper}\n            >\n              {menuTabList?.map((tab) => {\n                return (\n                  <MenuItem\n                    key={tab?.id}\n                    id={\n                      'udpRecord-UdpTabs-MenuItem-' +\n                      tab?.label?.replace(/ /g, '-')\n                    }\n                    udprecordid={\n                      'udpRecord-UdpTabs-MenuItem-' +\n                      tab?.label?.replace(/ /g, '-')\n                    }\n                    onClick={(e) => {\n                      if (tab?.onClick) {\n                        tab.onClick();\n                      }\n\n                      if (onChange) {\n                        onChange(e, tab?.id);\n                      }\n                      setAnchorEl(null);\n                    }}\n                    className={clsx(classes.menuItem, className)}\n                    selected={tab?.id === value}\n                    {...menuItemProps}\n                  >\n                    <Typography>{tab?.label}</Typography>\n                  </MenuItem>\n                );\n              })}\n            </Popover>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}