{"version":3,"file":"DynamicContainerWithMenu.mjs","names":["MoreVerticalIcon","MenuItem","Popover","makeStyles","PropTypes","React","Children","cloneElement","forwardRef","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","useTranslation","useDynamicListCalculation","AmbientTokenButton","useStyles","theme","filterChipMenuIcon","background","palette","common","grey","padding","spacing","color","primary","main","DynamicContainerWithMenu","props","ref","children","className","menuButton","menuIconClassName","includeBuffer","classes","t","calculateNumberOfVisibleChildren","modifiedMenuButton","onClick","event","handlePopoverClick","allChildren","setAllChildren","visibleChildren","setVisibleChildren","menuChildren","setMenuChildren","anchorEl","setAnchorEl","open","Boolean","id","undefined","containerRef","outerContainerRef","childrenRefs","currentTarget","handlePopoverClose","handleSizeChange","maxVisibleChildren","slice","handleMenuItemClick","child","Array","isArray","length","forEach","arrayChildren","toArray","window","addEventListener","resizeObserver","ResizeObserver","current","observe","removeEventListener","disconnect","width","overflow","display","flexWrap","flexGrow","map","index","defaultValue","vertical","horizontal","displayName","propTypes","node","isRequired","string","bool"],"sources":["../../../src/UI/containers/DynamicContainerWithMenu.jsx"],"sourcesContent":["import { MoreVerticalIcon } from '@fluentui/react-icons';\nimport { MenuItem, Popover } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport React, {\n Children,\n cloneElement,\n forwardRef,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useDynamicListCalculation } from '../../hooks/useDynamicListCalculation';\nimport { AmbientTokenButton } from '../inputs/buttons/AmbientTokenButton';\n\nconst useStyles = makeStyles((theme) => ({\n filterChipMenuIcon: {\n background: theme.palette.common.grey,\n padding: theme.spacing(1),\n color: theme.palette.primary.main\n }\n}));\n\nexport const DynamicContainerWithMenu = forwardRef((props, ref) => {\n // ################### Props ###################\n const {\n children,\n className,\n menuButton,\n menuIconClassName,\n includeBuffer = true\n } = props;\n\n // ################### Custom Hooks ###################\n const classes = useStyles();\n const { t } = useTranslation();\n const { calculateNumberOfVisibleChildren } = useDynamicListCalculation();\n\n // ################### Memoized Values ###################\n const modifiedMenuButton = useMemo(() => {\n if (!menuButton) return null;\n\n return cloneElement(\n menuButton,\n {\n onClick: (event) => {\n menuButton.props.onClick(event);\n handlePopoverClick(event);\n },\n ...menuButton.props\n },\n menuButton.props.children\n );\n }, [menuButton]);\n\n // ################### States ###################\n const [allChildren, setAllChildren] = useState([]);\n const [visibleChildren, setVisibleChildren] = useState([]);\n const [menuChildren, setMenuChildren] = useState([]);\n const [anchorEl, setAnchorEl] = useState(null);\n\n // ################### Variables ###################\n const open = Boolean(anchorEl);\n const id = open ? 'simple-popover' : undefined;\n\n // ################### Refs ###################\n const containerRef = useRef(ref);\n const outerContainerRef = useRef(null);\n const childrenRefs = useRef([]);\n\n // ################### Functions ###################\n const handlePopoverClick = (event) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handlePopoverClose = () => {\n setAnchorEl(null);\n };\n\n // ################### Callbacks ###################\n const handleSizeChange = useCallback(() => {\n const maxVisibleChildren = calculateNumberOfVisibleChildren(\n containerRef,\n childrenRefs,\n includeBuffer\n );\n\n const visibleChildren = allChildren.slice(0, maxVisibleChildren);\n const menuChildren = allChildren.slice(maxVisibleChildren);\n\n setVisibleChildren(visibleChildren);\n setMenuChildren(menuChildren);\n }, [\n containerRef,\n allChildren,\n childrenRefs,\n calculateNumberOfVisibleChildren,\n includeBuffer\n ]);\n\n const handleMenuItemClick = useCallback((child) => {\n if (child.props.onClick && typeof child.props.onClick === 'function') {\n child.props.onClick();\n }\n\n // If the child has children, then call the onClick function for each child\n let children = child.props.children;\n while (children) {\n if (Array.isArray(children) && children.length > 0) {\n children.forEach((child) => {\n if (\n child.props.onClick &&\n typeof child.props.onClick === 'function'\n ) {\n child.props.onClick();\n }\n });\n } else if (typeof children === 'object') {\n if (\n children.props.onClick &&\n typeof children.props.onClick === 'function'\n ) {\n children.props.onClick();\n }\n }\n\n children = children.props.children;\n }\n\n handlePopoverClose();\n }, []);\n\n // ################### Effects ###################\n useEffect(() => {\n const arrayChildren = Children.toArray(children);\n setAllChildren(arrayChildren);\n setVisibleChildren(arrayChildren);\n }, [children]);\n\n useLayoutEffect(handleSizeChange, [handleSizeChange]);\n\n useLayoutEffect(() => {\n // Add the resize event listener for when the browser window is resized\n window.addEventListener('resize', handleSizeChange);\n // Add the resize observer for when the parent div is resized\n const resizeObserver = new ResizeObserver(handleSizeChange);\n if (outerContainerRef.current) {\n resizeObserver.observe(outerContainerRef.current);\n }\n\n // Remove the event listeners on cleanup\n return () => {\n window.removeEventListener('resize', handleSizeChange);\n resizeObserver.disconnect();\n };\n }, [handleSizeChange, outerContainerRef]);\n\n // ################### Render ###################\n return (\n \n \n {visibleChildren &&\n Children.map(visibleChildren, (child, index) => {\n return cloneElement(\n child,\n {\n ref: (ref) => (childrenRefs.current[index] = ref),\n ...child.props\n },\n child.props.children\n );\n })}\n {menuChildren && menuChildren.length > 0 && (\n
\n {modifiedMenuButton ?? (\n \n )}\n \n {Children.map(menuChildren, (child, index) => {\n return (\n handleMenuItemClick(child)}>\n {cloneElement(\n child,\n {\n ...child.props\n },\n child.props.children\n )}\n \n );\n })}\n \n
\n )}\n \n \n );\n});\n\nDynamicContainerWithMenu.displayName = 'DynamicContainerWithMenu';\nDynamicContainerWithMenu.propTypes = {\n /**\n * The children to render in the container\n */\n children: PropTypes.node.isRequired,\n /**\n * A className to apply to the container\n */\n className: PropTypes.string,\n /**\n * A custom menu button to use instead of the default\n */\n menuButton: PropTypes.node,\n /**\n * A custom class to apply to the menu icon\n */\n menuIconClassName: PropTypes.string,\n /**\n * Whether to include a space buffer between the menu button and container border (default: true)\n * @default true\n */\n includeBuffer: PropTypes.bool\n};\n"],"mappings":"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"}