udp-react-enterprise-component-library 1.0.5-beta.1 → 1.0.5-beta.2

package/dist/MenuPage-DNywMmn2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPage-DNywMmn2.cjs","names":["useStyles","TreeViewModeEnums","other","NodeActionTriggerEnums","TreeItem","Tooltip","CircularProgress","UnityFluentIcon","getUnityIconFromName","getIconFromName","Typography","AggregateChip","useStyles","TreeViewModeEnums","searchTree","getNodeIdForRightBorder","CircularProgress","Typography","findAllParentIds","tree","expanded","TreeView","FluentIcon","CaretUpSolid8Icon","CaretDownSolid8Icon","useBuildEnvironment","APP_RIBBON_SPACE","useUser","useSetLocationState","useAxiosGet","ConfigService","useShellStore","transformMenuPageTree","DndProvider","HTML5Backend","UtilitySideBar","TreeViewModeEnums","NodeLoader","PageContainer"],"sources":["../src/treeMenu/BaseTreeMenuItem.jsx","../src/treeMenu/BaseTreeMenu.jsx","../src/menuPage/MenuPage.jsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport {\n  makeStyles,\n  lighten,\n  Typography,\n  CircularProgress,\n  darken,\n  useTheme,\n  Tooltip\n} from '@material-ui/core';\nimport TreeItem from '@material-ui/lab/TreeItem';\nimport { getIconFromName } from '../utilities/tree/TreeUtilities';\nimport clsx from 'clsx';\nimport { UnityFluentIcon } from '../utilities/UnityFluentIcon';\nimport { getUnityIconFromName } from '../utilities/iconLibrary/UnityIconLibrary';\nimport { useDrag, useDrop } from 'react-dnd';\nimport {\n  NodeActionTriggerEnums,\n  TreeViewModeEnums\n} from '../enums/unitySystemEnums.ts';\nimport { AggregateChip } from '../UI/utilityDisplay/AggregateChip';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    '&.Mui-selected > .MuiTreeItem-content': {\n      backgroundColor:\n        theme?.getThemeData()?.mode === 'dark'\n          ? theme.palette.grey[700]\n          : theme.palette.grey[300],\n      borderRight: `4px solid ${theme.palette.primary.main}`\n    },\n    '&.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label': {\n      backgroundColor: 'transparent',\n      paddingLeft: 0\n    },\n    '&.Mui-selected > .MuiTreeItem-content > .MuiCollapse-wrapperInner': {\n      backgroundColor:\n        theme?.getThemeData()?.mode !== 'dark' && theme.palette.grey[50]\n    },\n    '& .MuiTreeItem-content .MuiTreeItem-iconContainer': {\n      display: (props) => (props.sidebarExpanded ? 'flex' : 'none')\n    }\n  },\n  content: {\n    backgroundColor: (props) =>\n      theme?.getThemeData()?.mode !== 'dark' &&\n      props.conditionalIconName &&\n      props.conditionalIconColor\n        ? lighten(props.conditionalIconColor, 0.92)\n        : ''\n  },\n  labelRoot: {\n    display: 'flex',\n    alignItems: 'center',\n    marginLeft: (props) => (props.sidebarExpanded ? 0 : theme.spacing(1.5)),\n    width: '100%'\n  },\n  labelContainer: {\n    display: (props) => (!props.sidebarExpanded ? 'none' : ''),\n    width: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? `calc(100% - ${theme.spacing(6.25)}px)`\n        : `calc(100% - ${theme.spacing(7.75)}px)`\n  },\n  conditionalIconContainer: {\n    display: 'inline-flex'\n  },\n  labelText: {\n    fontSize: '0.75rem',\n    fontWeight: 600,\n    lineHeight: '1rem',\n    letterSpacing: 0.1\n  },\n  captionText: {\n    marginLeft: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(1) : '',\n    fontSize: '0.65rem',\n    fontWeight: 400,\n    lineHeight: 1,\n    letterSpacing: 0.4\n  },\n  labelOverflow: {\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis'\n  },\n  group: {\n    width: '100%',\n    '& .MuiTreeItem-group': {\n      marginLeft: 0\n    },\n    '& .MuiTreeItem-content': {\n      paddingLeft: (props) =>\n        props.sidebarExpanded ? (props.depth || 1) * theme.spacing(1) : 0,\n      borderRight: (props) =>\n        props.showRightBorderColor\n          ? `4px solid ${theme.palette.primary.main}`\n          : '',\n      borderBottom: (props) =>\n        props.treeViewMode === TreeViewModeEnums.Compact\n          ? `1px solid ${theme.palette.grey[200]}`\n          : ''\n    },\n    '& .MuiTreeItem-content .MuiTreeItem-label': {\n      paddingLeft: 0,\n      width: (props) =>\n        props.sidebarExpanded && `calc(100% - ${theme.spacing(2.5)}px)`\n    },\n    '& .MuiTreeItem-content .MuiTreeItem-iconContainer span': {\n      display: (props) => (props.hideExpansion ? 'none' : '')\n    },\n    '& .MuiCollapse-wrapperInner': {\n      backgroundColor: (props) =>\n        theme?.getThemeData()?.mode !== 'dark' && props.isSelectedNode\n          ? theme.palette.grey[50]\n          : ''\n    }\n  },\n  iconContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 50,\n    marginTop: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(0.25)\n        : theme.spacing(0.5),\n    marginBottom: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(0.25)\n        : theme.spacing(0.5),\n    marginRight: theme.spacing(1),\n    width: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(3)\n        : theme.spacing(4),\n    height: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? theme.spacing(3)\n        : theme.spacing(4),\n    border: (props) =>\n      props.iconColor\n        ? `1px solid ${darken(props.iconColor, 0.1)}`\n        : `1px solid ${theme.palette.secondary.main}`,\n    backgroundColor: '#ffffff'\n  }\n}));\n\nexport const BaseTreeMenuItem = (props) => {\n  const {\n    parentId,\n    nodeId,\n    iconName,\n    iconType,\n    conditionalIconName,\n    conditionalIconType,\n    conditionalIconColor,\n    label,\n    iconColor,\n    onNodeSelect,\n    isSelectedNode,\n    subLabel,\n    sidebarExpanded,\n    isLastNode,\n    loading,\n    node,\n    onDropNode,\n    treeViewMode,\n    menuIndex,\n    aggregateThresholdId,\n    ...other\n  } = props;\n  const classes = useStyles(props);\n  const theme = useTheme();\n\n  const [{ isDragging }, dragRef] = useDrag({\n    type: 'BaseTreeMenuItem',\n    item: { ...node, sourceNodeMenuIndex: menuIndex },\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging()\n    })\n  });\n\n  const handleOnDrop = useCallback(\n    (sourceNode, monitor) => {\n      if (!monitor.didDrop()) {\n        if (onDropNode) {\n          const { sourceNodeMenuIndex, ...other } = sourceNode;\n          onDropNode({ ...other }, node, sourceNodeMenuIndex, menuIndex);\n        }\n      }\n    },\n    [onDropNode, node, menuIndex]\n  );\n\n  const [{ canDrop, isOver }, dropRef] = useDrop(\n    () => ({\n      accept: ['BaseTreeMenuItem'],\n      drop: (sourceNode, monitor) => {\n        // condition to only handle first drop\n        handleOnDrop(sourceNode, monitor);\n      },\n      canDrop: (sourceNode) => checkCanDrop(sourceNode),\n      collect: (monitor) => ({\n        isOver: monitor.isOver(),\n        canDrop: !!monitor.canDrop()\n      })\n    }),\n    [handleOnDrop]\n  );\n\n  const checkCanDrop = useCallback(\n    (sourceNode) => {\n      if (sourceNode) {\n        const onDropActions = node?.properties?.nodeActions?.filter(\n          (na) => na?.triggerType === NodeActionTriggerEnums.On_Node_Drop\n        );\n        if (!onDropActions) {\n          return false;\n        }\n        const nodeDragEntities = onDropActions?.map(\n          (action) => action?.dragEntityName\n        );\n        return nodeDragEntities.includes(\n          sourceNode?.properties?.catalogReturnObject\n        );\n      }\n    },\n    [node]\n  );\n\n  const handleOnLabelClick = useCallback(\n    (e) => {\n      e.preventDefault();\n      onNodeSelect(e, nodeId);\n    },\n    [onNodeSelect, nodeId]\n  );\n\n  return (\n    <TreeItem\n      className={classes.group}\n      key={nodeId}\n      nodeId={nodeId}\n      label={\n        <div ref={dropRef}>\n          <Tooltip title={sidebarExpanded ? '' : label}>\n            <div\n              ref={(node?.properties?.isDraggable && dragRef) || null}\n              style={{ opacity: isDragging ? 0.5 : 1 }}\n            >\n              {loading ? (\n                <CircularProgress size={12} />\n              ) : (\n                <div\n                  id={'udpRecord-BaseTreeMenuItem-'+label.replace(/\\s+/g, '')}\n                  udprecordid={'udpRecord-BaseTreeMenuItem-'+label.replace(/\\s+/g, '')}\n                  className={classes.labelRoot}\n                  style={{\n                    fontWeight: isSelectedNode ? 'bold' : ''\n                  }}\n                >\n                  {iconName && (\n                    <div className={classes.iconContainer}>\n                      <UnityFluentIcon\n                        size={\n                          treeViewMode === TreeViewModeEnums.Compact\n                            ? 'small'\n                            : 'medium'\n                        }\n                        color={iconColor}\n                        type={iconType}\n                        icon={\n                          iconType === 'unity'\n                            ? getUnityIconFromName(iconName)\n                            : getIconFromName(iconName)\n                        }\n                        style={{\n                          color: iconColor\n                            ? darken(iconColor, 0.1)\n                            : theme.palette.secondary.main\n                        }}\n                      />\n                    </div>\n                  )}\n                  <div className={classes.labelContainer}>\n                    <Typography\n                      variant='subtitle2'\n                      className={clsx(classes.labelText, classes.labelOverflow)}\n                    >\n                      {label}\n                      {subLabel &&\n                        treeViewMode === TreeViewModeEnums.Compact && (\n                          <Typography\n                            variant='caption'\n                            className={clsx(\n                              classes.captionText,\n                              classes.labelOverflow\n                            )}\n                          >\n                            {subLabel}\n                          </Typography>\n                        )}\n                    </Typography>\n                    {subLabel && treeViewMode === TreeViewModeEnums.Classic && (\n                      <div className={classes.labelOverflow}>\n                        <Typography\n                          variant='caption'\n                          className={clsx(classes.captionText)}\n                        >\n                          {subLabel}\n                        </Typography>\n                      </div>\n                    )}\n                  </div>\n                  <AggregateChip aggregateThresholdId={aggregateThresholdId} />\n                  {conditionalIconName && sidebarExpanded && (\n                    <div className={classes.conditionalIconContainer}>\n                      <UnityFluentIcon\n                        size={\n                          treeViewMode === TreeViewModeEnums.Compact\n                            ? 'small'\n                            : 'medium'\n                        }\n                        color={conditionalIconColor}\n                        type={conditionalIconType}\n                        icon={\n                          conditionalIconType === 'unity'\n                            ? getUnityIconFromName(conditionalIconName)\n                            : getIconFromName(conditionalIconName)\n                        }\n                        style={{\n                          color: conditionalIconColor\n                        }}\n                      />\n                    </div>\n                  )}\n                </div>\n              )}\n            </div>\n          </Tooltip>\n        </div>\n      }\n      onLabelClick={handleOnLabelClick}\n      classes={{ root: classes.root, content: classes.content }}\n      {...other}\n    />\n  );\n};\n","import React, { useCallback, useState, useEffect } from 'react';\nimport {\n  makeStyles,\n  useTheme,\n  lighten,\n  CircularProgress,\n  Typography\n} from '@material-ui/core';\nimport TreeView from '@material-ui/lab/TreeView';\nimport { BaseTreeMenuItem } from './BaseTreeMenuItem';\nimport {\n  searchTree,\n  findAllParentIds,\n  getNodeIdForRightBorder\n} from '../utilities/tree/TreeUtilities';\nimport { FluentIcon } from '../utilities/FluentIcon';\nimport { CaretUpSolid8Icon, CaretDownSolid8Icon } from '@fluentui/react-icons';\nimport { cloneDeep } from 'lodash';\nimport { TreeViewModeEnums } from '../enums/unitySystemEnums.ts';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    marginBottom: theme.spacing(1.75),\n    borderTop: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? `1px solid ${theme.palette.grey[200]}`\n        : ''\n  },\n  noChildrenContainer: {\n    borderBottom: (props) =>\n      props.treeViewMode === TreeViewModeEnums.Compact\n        ? `1px solid ${theme.palette.grey[200]}`\n        : ''\n  }\n}));\n\nexport const BaseTreeMenu = (props) => {\n  const {\n    menuItems,\n    onSelectNode,\n    onDropNode,\n    menuIndex,\n    selectedNodeId,\n    selectedNodeParentId,\n    sidebarExpanded,\n    treeViewMode,\n    childrenKey = 'children'\n  } = props;\n  const [expanded, setExpanded] = useState(null);\n  const [isCurrentActiveTree, setIsCurrentActiveTree] = useState(false);\n  const [selectedNodeIsHidden, setSelectedNodeIsHidden] = useState(false);\n  const [tree, setTree] = useState(menuItems);\n  const theme = useTheme();\n  const classes = useStyles(props);\n\n  const handleSelectedNode = useCallback(\n    (e, value) => {\n      const selectedNode = searchTree(tree, value);\n      if (onSelectNode) {\n        onSelectNode(selectedNode, menuIndex);\n        setSelectedNodeIsHidden(false);\n      }\n    },\n    [tree, menuIndex, onSelectNode]\n  );\n\n  const renderTree = useCallback(\n    (node, depth = 1) => {\n      let label = node.properties?.nodeLabel || node.properties?.name;\n      let subLabel = node.properties?.nodeSubLabel;\n      let iconName = node.properties?.defaultIcon?.name;\n      let iconType = node.properties?.defaultIcon?.type;\n      let conditionalIconName = node.properties?.conditionalIconName || '';\n      let conditionalIconType = node.properties?.conditionalIconName\n        ? node.properties.conditionalIconType\n        : '';\n      let conditionalIconColor = node.properties?.conditionalIconName\n        ? node.properties?.conditionalIconColor\n        : '';\n      let nodeId = node.id;\n      let iconColor = node.properties?.conditionalIconName\n        ? node.properties?.conditionalIconColor\n        : node.properties?.defaultIcon?.color?.hex;\n      let aggregateThresholdId = node.properties?.aggregateThresholdId || '';\n\n      if (node.isGroupNode) {\n        label = node.properties?.label;\n        subLabel = node.properties?.subLabel;\n        iconName = node.properties?.icon?.name;\n        iconType = node.properties?.icon?.type;\n        iconColor = node.properties?.icon?.color?.hex;\n      }\n\n      return (\n        <BaseTreeMenuItem\n          key={nodeId}\n          nodeId={nodeId}\n          label={label}\n          subLabel={subLabel}\n          iconName={iconName}\n          iconType={iconType}\n          conditionalIconName={conditionalIconName}\n          conditionalIconType={conditionalIconType}\n          conditionalIconColor={conditionalIconColor}\n          parentId={node.parentId}\n          iconColor={iconColor}\n          onNodeSelect={handleSelectedNode}\n          selectedNodeId={selectedNodeId}\n          isSelectedNode={selectedNodeId === node.id}\n          showRightBorderColor={\n            selectedNodeIsHidden &&\n            isCurrentActiveTree &&\n            getNodeIdForRightBorder(expanded, tree, selectedNodeParentId) ===\n            node.id\n          }\n          isCurrentActiveTree={isCurrentActiveTree}\n          sidebarExpanded={sidebarExpanded}\n          depth={depth}\n          hideExpansion={!!!node[childrenKey]?.length}\n          node={node}\n          onDropNode={onDropNode}\n          treeViewMode={treeViewMode}\n          menuIndex={menuIndex}\n          aggregateThresholdId={aggregateThresholdId}\n        >\n          {node.properties?.lazyLoad &&\n            !!!node[childrenKey]?.length &&\n            !node.completedLoadingChildren && (\n              <CircularProgress\n                size={12}\n                style={{ marginLeft: (depth || 1) * theme.spacing(1) }}\n              />\n            )}\n          {node.properties?.lazyLoad &&\n            !!!node[childrenKey]?.length &&\n            node.completedLoadingChildren &&\n            sidebarExpanded &&\n            !node.errorRetrievingChildren && (\n              <div className={classes.noChildrenContainer}>\n                <Typography\n                  variant='caption'\n                  style={{\n                    marginLeft: (depth || 1) * theme.spacing(3),\n                    fontWeight: 400\n                  }}\n                >\n                  No Children\n                </Typography>\n              </div>\n            )}\n          {node.properties?.lazyLoad &&\n            node.completedLoadingChildren &&\n            sidebarExpanded &&\n            node.errorRetrievingChildren && (\n              <div className={classes.noChildrenContainer}>\n                <Typography\n                  variant='caption'\n                  style={{\n                    marginLeft: (depth || 1) * theme.spacing(3),\n                    fontWeight: 400\n                  }}\n                >\n                  {`Error Retrieving ${!!node[childrenKey]?.length ? `Additional ` : ''\n                    }Children`}\n                </Typography>\n              </div>\n            )}\n          {Array.isArray(node[childrenKey])\n            ? node[childrenKey].map((n, i) => renderTree(n, depth + 1))\n            : null}\n        </BaseTreeMenuItem>\n      );\n    },\n    [\n      handleSelectedNode,\n      selectedNodeId,\n      selectedNodeIsHidden,\n      isCurrentActiveTree,\n      sidebarExpanded,\n      expanded,\n      tree,\n      selectedNodeParentId,\n      theme,\n      classes,\n      onDropNode,\n      treeViewMode,\n      menuIndex,\n      childrenKey\n    ]\n  );\n\n  const handleNodeExpansion = useCallback(\n    async (evt, nodeIds) => {\n      const treeCopy = cloneDeep(tree);\n      setExpanded(nodeIds);\n\n      const parentNode = searchTree(treeCopy, selectedNodeParentId);\n      const initialAllParentNodeIds = selectedNodeParentId\n        ? [selectedNodeParentId]\n        : [];\n      const allParentNodeIds = findAllParentIds(\n        treeCopy,\n        parentNode,\n        initialAllParentNodeIds\n      );\n      const selectedNodeShown = allParentNodeIds.every((id) =>\n        nodeIds.includes(id)\n      );\n      if (\n        isCurrentActiveTree &&\n        allParentNodeIds.length &&\n        !selectedNodeShown\n      ) {\n        setSelectedNodeIsHidden(true);\n      } else {\n        setSelectedNodeIsHidden(false);\n      }\n    },\n    [isCurrentActiveTree, tree, selectedNodeParentId]\n  );\n\n  const getExpandedRecursively = useCallback(\n    (tree) => {\n      if (!tree) return [];\n      return tree.reduce((expandedIds, item) => {\n        if (item?.isExpanded) {\n          expandedIds.push(item.id);\n        }\n        if (item && item[childrenKey]?.length) {\n          expandedIds = expandedIds.concat(\n            getExpandedRecursively(item[childrenKey])\n          );\n        }\n        return expandedIds;\n      }, []);\n    },\n    [childrenKey]\n  );\n\n  useEffect(() => {\n    setTree(menuItems);\n  }, [menuItems]);\n\n  useEffect(() => {\n    if (!tree) {\n      return;\n    }\n    let expanded = [];\n    if (tree?.isExpanded) {\n      expanded.push(tree.id);\n    }\n    expanded = expanded.concat(getExpandedRecursively(tree[childrenKey]));\n    setExpanded(expanded);\n  }, [getExpandedRecursively, tree, childrenKey]);\n\n  useEffect(() => {\n    if (!!searchTree(tree, selectedNodeId)) {\n      setIsCurrentActiveTree(true);\n    } else {\n      setIsCurrentActiveTree(false);\n    }\n  }, [tree, selectedNodeId]);\n\n  if (!expanded) {\n    return null;\n  }\n\n  return (\n    <TreeView\n      key={tree}\n      className={classes.root}\n      defaultCollapseIcon={\n        <FluentIcon\n          size='small'\n          component={CaretUpSolid8Icon}\n          style={{\n            color: lighten(theme.palette.primary.main, 0.5),\n            width: theme.spacing(1.5),\n            height: theme.spacing(1.5)\n          }}\n        />\n      }\n      expanded={expanded || []}\n      onNodeToggle={handleNodeExpansion}\n      defaultExpandIcon={\n        <FluentIcon\n          size='small'\n          component={CaretDownSolid8Icon}\n          style={{\n            color: lighten(theme.palette.primary.main, 0.5),\n            width: theme.spacing(1.5),\n            height: theme.spacing(1.5)\n          }}\n        />\n      }\n      selected={selectedNodeId}\n    >\n      {tree && renderTree(tree)}\n    </TreeView>\n  );\n};\n","import React, { useCallback, useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { useAxiosGet } from '../utilities/useAxiosGet';\nimport { UtilitySideBar } from '../UI/utilityDisplay/UtilitySideBar';\nimport { makeStyles } from '@material-ui/core';\nimport { PageContainer } from '../page/PageContainer';\nimport { transformMenuPageTree } from '../utilities/tree/TreeUtilities';\nimport { BaseTreeMenu } from '../treeMenu/BaseTreeMenu';\nimport { TreeViewModeEnums } from '../enums/unitySystemEnums';\nimport { DndProvider } from 'react-dnd';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { useUser } from '../utilities/auth/useUser';\nimport { useShellStore } from '../stores/shellStore';\nimport { NodeLoader } from '../UI/feedback/NodeLoader';\nimport {\n  APP_RIBBON_SPACE,\n  useBuildEnvironment\n} from '../shell/ui/EnvironmentRibbon';\nimport { useSetLocationState } from '../hooks/useSetLocationState';\nimport { useTranslation } from 'react-i18next';\nimport { ConfigService } from 'udp-react-stencil-component-library';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    flex: 1,\n    minHeight: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,\n    display: 'grid',\n    gridTemplateAreas: ['sidebar content'].map((line) => `\"${line}\"`).join(' '),\n    gridTemplateColumns: 'auto 1fr',\n    gridTemplateRows: 'auto 1fr'\n  },\n  sidebar: {\n    gridArea: 'sidebar',\n    marginRight: theme.spacing(1)\n  },\n  content: {\n    gridArea: 'content',\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n    zIndex: 1,\n    height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,\n    overflowY: 'auto'\n  },\n  menuContent: {\n    marginTop: theme.spacing(1),\n    height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 116}px)`,\n    overflowX: 'hidden'\n  },\n  loader: {\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(1)\n  },\n  loadingContent: {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center'\n  }\n}));\n\nexport const MenuPage = (props) => {\n  const buildEnv = useBuildEnvironment();\n  const classes = useStyles({\n    ...props,\n    appRibbonSpace: buildEnv ? APP_RIBBON_SPACE : 0\n  });\n  const location = useLocation();\n  const user = useUser();\n  const { t } = useTranslation();\n  const setLocationState = useSetLocationState();\n\n  const [menuItemsList, setMenuItemsList] = useState([]); // holds a list of trees\n  const [selectedNode, setSelectedNode] = useState(null);\n  const [sidebarExpanded, setSidebarExpanded] = useState(true);\n  // Just the menuInstanceId for an inner menu\n  const innerMenuId = location.pathname.replace('/menupage/', '');\n  const [{ data: innerMenu, loading: menuLoading }] = useAxiosGet(\n    ConfigService.tenantV1ApiUrl,\n    `menus/${innerMenuId}`,\n    {},\n    !!!innerMenuId,\n    false\n  );\n\n  const { setSubHeaderActionHasChildren, setNavigationExpanded } =\n    useShellStore();\n\n  const [{ data: pageData, loading: pageLoading, error: pageError }] =\n    useAxiosGet(\n      ConfigService.tenantV1ApiUrl,\n      `page/${selectedNode?.properties?.page?.id}`,\n      {},\n      !!!selectedNode?.properties?.page?.id,\n      false\n    );\n\n  const handleSelectedNode = useCallback((node, menuIndex) => {\n    setSelectedNode(node);\n  }, []);\n\n  const handleDropNode = useCallback(\n    (sourceNode, targetNode, sourceNodeMenuIndex, targetNodeMenuIndex) => {\n      // TODO: Implement if we need to for next Phase\n    },\n    []\n  );\n\n  const handleSidebarExpandClick = useCallback(() => {\n    setSidebarExpanded((expanded) => !expanded);\n  }, []);\n\n  useEffect(() => {\n    if (innerMenu) {\n      const list = [];\n      let nodeSelected = false;\n      innerMenu.menuItemInstanceStructureViews.forEach((menuInstance) => {\n        const updatedMenu = transformMenuPageTree(menuInstance);\n        if (updatedMenu) {\n          list.push(updatedMenu);\n          if (!nodeSelected) {\n            setSelectedNode(updatedMenu);\n            nodeSelected = true;\n            setNavigationExpanded(false);\n          }\n        }\n      });\n      setMenuItemsList(list);\n    }\n  }, [innerMenu, setNavigationExpanded]);\n\n  useEffect(() => {\n    setSubHeaderActionHasChildren(false);\n  }, [setSubHeaderActionHasChildren]);\n\n  // Setting location state label so that if this page was saved to favorites\n  // we can determine the bread crumb\n  useEffect(() => {\n    if (innerMenu) {\n      setLocationState({ label: t(innerMenu?.name) });\n    }\n  }, [setLocationState, t, innerMenu]);\n\n  return (\n    <DndProvider backend={HTML5Backend}>\n      <div className={classes.root}>\n        <div className={classes.sidebar}>\n          <UtilitySideBar\n            title={innerMenu?.name}\n            isUsingChildren={true}\n            resizable={true}\n            removePadding={true}\n            removeTopLayoutUnit={true}\n            onUtilitySidebarToggleExpandClick={handleSidebarExpandClick}\n            collapsedWidth={64}\n          >\n            <div className={classes.menuContent} key={innerMenuId}>\n              {menuItemsList?.length > 0 &&\n                !menuLoading &&\n                menuItemsList.map((menuItems, index) => (\n                  <div key={menuItems.id} className={classes.nodeContainer}>\n                    <BaseTreeMenu\n                      menuItems={menuItems}\n                      onSelectNode={handleSelectedNode}\n                      onDropNode={handleDropNode}\n                      menuIndex={index}\n                      selectedNodeId={selectedNode?.id}\n                      selectedNodeParentId={selectedNode?.parentId}\n                      sidebarExpanded={sidebarExpanded}\n                      treeViewMode={TreeViewModeEnums.Classic}\n                    />\n                  </div>\n                ))}\n              {menuLoading && (\n                <div className={classes.loader}>\n                  <NodeLoader loading={menuLoading} />\n                </div>\n              )}\n            </div>\n          </UtilitySideBar>\n        </div>\n        <div className={classes.content}>\n          {selectedNode?.properties?.page?.id && (\n            <PageContainer\n              user={user}\n              key={selectedNode?.id}\n              pageData={pageData}\n              pageLoading={pageLoading}\n              widgetParams={{\n                pageId: pageData?.pageId,\n                entityName: selectedNode?.properties?.page?.entity?.entityName,\n                pbiReportCode: selectedNode?.properties?.page?.pbiReportCode,\n                requiredFieldsMap:\n                  selectedNode?.properties?.page?.requiredFieldMapping,\n                udpTagId: selectedNode?.properties?.page?.udpTagId,\n                queryId: selectedNode?.properties?.page?.queryId,\n                inquiryTreeId: selectedNode?.properties?.page?.inquiryTreeId\n              }}\n              disableMargins={true}\n              fromMenu={true}\n            />\n          )}\n        </div>\n      </div>\n    </DndProvider>\n  );\n};\n"],"mappings":"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"}

package/dist/MenuPage-MyE8iJHD.js

@@ -0,0 +1,561 @@
+import { APP_RIBBON_SPACE, FluentIcon, NodeActionTriggerEnums, TreeViewModeEnums, UnityFluentIcon, useAxiosGet, useBuildEnvironment, useShellStore, useUser } from "./EnvironmentRibbon-DBJftQWQ.js";
+import "./apiHelpers-ntQQ4i7A.js";
+import { AggregateChip, NodeLoader, UtilitySideBar, findAllParentIds, getIconFromName, getNodeIdForRightBorder, getUnityIconFromName, searchTree, transformMenuPageTree } from "./UtilitySideBar-Dz_17lBo.js";
+import "./SearchUtilities-Bl4U_j-0.js";
+import { PageContainer, useSetLocationState } from "./PageContainer-SljTiaZr.js";
+import React, { useCallback, useEffect, useState } from "react";
+import { CircularProgress, Tooltip, Typography, darken, lighten, makeStyles, useTheme } from "@material-ui/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ConfigService } from "udp-react-stencil-component-library";
+import { useLocation } from "react-router-dom";
+import clsx from "clsx";
+import { CaretDownSolid8Icon, CaretUpSolid8Icon } from "@fluentui/react-icons";
+import { cloneDeep } from "lodash";
+import { useTranslation } from "react-i18next";
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import TreeView from "@material-ui/lab/TreeView";
+import TreeItem from "@material-ui/lab/TreeItem";
+
+//#region src/treeMenu/BaseTreeMenuItem.jsx
+const useStyles$2 = makeStyles((theme) => {
+	var _theme$getThemeData, _theme$getThemeData2;
+	return {
+		root: {
+			"&.Mui-selected > .MuiTreeItem-content": {
+				backgroundColor: (theme === null || theme === void 0 || (_theme$getThemeData = theme.getThemeData()) === null || _theme$getThemeData === void 0 ? void 0 : _theme$getThemeData.mode) === "dark" ? theme.palette.grey[700] : theme.palette.grey[300],
+				borderRight: `4px solid ${theme.palette.primary.main}`
+			},
+			"&.Mui-selected > .MuiTreeItem-content .MuiTreeItem-label": {
+				backgroundColor: "transparent",
+				paddingLeft: 0
+			},
+			"&.Mui-selected > .MuiTreeItem-content > .MuiCollapse-wrapperInner": { backgroundColor: (theme === null || theme === void 0 || (_theme$getThemeData2 = theme.getThemeData()) === null || _theme$getThemeData2 === void 0 ? void 0 : _theme$getThemeData2.mode) !== "dark" && theme.palette.grey[50] },
+			"& .MuiTreeItem-content .MuiTreeItem-iconContainer": { display: (props) => props.sidebarExpanded ? "flex" : "none" }
+		},
+		content: { backgroundColor: (props) => {
+			var _theme$getThemeData3;
+			return (theme === null || theme === void 0 || (_theme$getThemeData3 = theme.getThemeData()) === null || _theme$getThemeData3 === void 0 ? void 0 : _theme$getThemeData3.mode) !== "dark" && props.conditionalIconName && props.conditionalIconColor ? lighten(props.conditionalIconColor, .92) : "";
+		} },
+		labelRoot: {
+			display: "flex",
+			alignItems: "center",
+			marginLeft: (props) => props.sidebarExpanded ? 0 : theme.spacing(1.5),
+			width: "100%"
+		},
+		labelContainer: {
+			display: (props) => !props.sidebarExpanded ? "none" : "",
+			width: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `calc(100% - ${theme.spacing(6.25)}px)` : `calc(100% - ${theme.spacing(7.75)}px)`
+		},
+		conditionalIconContainer: { display: "inline-flex" },
+		labelText: {
+			fontSize: "0.75rem",
+			fontWeight: 600,
+			lineHeight: "1rem",
+			letterSpacing: .1
+		},
+		captionText: {
+			marginLeft: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(1) : "",
+			fontSize: "0.65rem",
+			fontWeight: 400,
+			lineHeight: 1,
+			letterSpacing: .4
+		},
+		labelOverflow: {
+			whiteSpace: "nowrap",
+			overflow: "hidden",
+			textOverflow: "ellipsis"
+		},
+		group: {
+			width: "100%",
+			"& .MuiTreeItem-group": { marginLeft: 0 },
+			"& .MuiTreeItem-content": {
+				paddingLeft: (props) => props.sidebarExpanded ? (props.depth || 1) * theme.spacing(1) : 0,
+				borderRight: (props) => props.showRightBorderColor ? `4px solid ${theme.palette.primary.main}` : "",
+				borderBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : ""
+			},
+			"& .MuiTreeItem-content .MuiTreeItem-label": {
+				paddingLeft: 0,
+				width: (props) => props.sidebarExpanded && `calc(100% - ${theme.spacing(2.5)}px)`
+			},
+			"& .MuiTreeItem-content .MuiTreeItem-iconContainer span": { display: (props) => props.hideExpansion ? "none" : "" },
+			"& .MuiCollapse-wrapperInner": { backgroundColor: (props) => {
+				var _theme$getThemeData4;
+				return (theme === null || theme === void 0 || (_theme$getThemeData4 = theme.getThemeData()) === null || _theme$getThemeData4 === void 0 ? void 0 : _theme$getThemeData4.mode) !== "dark" && props.isSelectedNode ? theme.palette.grey[50] : "";
+			} }
+		},
+		iconContainer: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: 50,
+			marginTop: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
+			marginBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
+			marginRight: theme.spacing(1),
+			width: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4),
+			height: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4),
+			border: (props) => props.iconColor ? `1px solid ${darken(props.iconColor, .1)}` : `1px solid ${theme.palette.secondary.main}`,
+			backgroundColor: "#ffffff"
+		}
+	};
+});
+const BaseTreeMenuItem = (props) => {
+	var _node$properties2;
+	const { parentId, nodeId, iconName, iconType, conditionalIconName, conditionalIconType, conditionalIconColor, label, iconColor, onNodeSelect, isSelectedNode, subLabel, sidebarExpanded, isLastNode, loading, node, onDropNode, treeViewMode, menuIndex, aggregateThresholdId,...other } = props;
+	const classes = useStyles$2(props);
+	const theme = useTheme();
+	const [{ isDragging }, dragRef] = useDrag({
+		type: "BaseTreeMenuItem",
+		item: {
+			...node,
+			sourceNodeMenuIndex: menuIndex
+		},
+		collect: (monitor) => ({ isDragging: monitor.isDragging() })
+	});
+	const handleOnDrop = useCallback((sourceNode, monitor) => {
+		if (!monitor.didDrop()) {
+			if (onDropNode) {
+				const { sourceNodeMenuIndex,...other$1 } = sourceNode;
+				onDropNode({ ...other$1 }, node, sourceNodeMenuIndex, menuIndex);
+			}
+		}
+	}, [
+		onDropNode,
+		node,
+		menuIndex
+	]);
+	const [{ canDrop, isOver }, dropRef] = useDrop(() => ({
+		accept: ["BaseTreeMenuItem"],
+		drop: (sourceNode, monitor) => {
+			handleOnDrop(sourceNode, monitor);
+		},
+		canDrop: (sourceNode) => checkCanDrop(sourceNode),
+		collect: (monitor) => ({
+			isOver: monitor.isOver(),
+			canDrop: !!monitor.canDrop()
+		})
+	}), [handleOnDrop]);
+	const checkCanDrop = useCallback((sourceNode) => {
+		if (sourceNode) {
+			var _node$properties, _sourceNode$propertie;
+			const onDropActions = node === null || node === void 0 || (_node$properties = node.properties) === null || _node$properties === void 0 || (_node$properties = _node$properties.nodeActions) === null || _node$properties === void 0 ? void 0 : _node$properties.filter((na) => (na === null || na === void 0 ? void 0 : na.triggerType) === NodeActionTriggerEnums.On_Node_Drop);
+			if (!onDropActions) return false;
+			const nodeDragEntities = onDropActions === null || onDropActions === void 0 ? void 0 : onDropActions.map((action) => action === null || action === void 0 ? void 0 : action.dragEntityName);
+			return nodeDragEntities.includes(sourceNode === null || sourceNode === void 0 || (_sourceNode$propertie = sourceNode.properties) === null || _sourceNode$propertie === void 0 ? void 0 : _sourceNode$propertie.catalogReturnObject);
+		}
+	}, [node]);
+	const handleOnLabelClick = useCallback((e) => {
+		e.preventDefault();
+		onNodeSelect(e, nodeId);
+	}, [onNodeSelect, nodeId]);
+	return /* @__PURE__ */ jsx(TreeItem, {
+		className: classes.group,
+		nodeId,
+		label: /* @__PURE__ */ jsx("div", {
+			ref: dropRef,
+			children: /* @__PURE__ */ jsx(Tooltip, {
+				title: sidebarExpanded ? "" : label,
+				children: /* @__PURE__ */ jsx("div", {
+					ref: (node === null || node === void 0 || (_node$properties2 = node.properties) === null || _node$properties2 === void 0 ? void 0 : _node$properties2.isDraggable) && dragRef || null,
+					style: { opacity: isDragging ? .5 : 1 },
+					children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 12 }) : /* @__PURE__ */ jsxs("div", {
+						id: "udpRecord-BaseTreeMenuItem-" + label.replace(/\s+/g, ""),
+						udprecordid: "udpRecord-BaseTreeMenuItem-" + label.replace(/\s+/g, ""),
+						className: classes.labelRoot,
+						style: { fontWeight: isSelectedNode ? "bold" : "" },
+						children: [
+							iconName && /* @__PURE__ */ jsx("div", {
+								className: classes.iconContainer,
+								children: /* @__PURE__ */ jsx(UnityFluentIcon, {
+									size: treeViewMode === TreeViewModeEnums.Compact ? "small" : "medium",
+									color: iconColor,
+									type: iconType,
+									icon: iconType === "unity" ? getUnityIconFromName(iconName) : getIconFromName(iconName),
+									style: { color: iconColor ? darken(iconColor, .1) : theme.palette.secondary.main }
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: classes.labelContainer,
+								children: [/* @__PURE__ */ jsxs(Typography, {
+									variant: "subtitle2",
+									className: clsx(classes.labelText, classes.labelOverflow),
+									children: [label, subLabel && treeViewMode === TreeViewModeEnums.Compact && /* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										className: clsx(classes.captionText, classes.labelOverflow),
+										children: subLabel
+									})]
+								}), subLabel && treeViewMode === TreeViewModeEnums.Classic && /* @__PURE__ */ jsx("div", {
+									className: classes.labelOverflow,
+									children: /* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										className: clsx(classes.captionText),
+										children: subLabel
+									})
+								})]
+							}),
+							/* @__PURE__ */ jsx(AggregateChip, { aggregateThresholdId }),
+							conditionalIconName && sidebarExpanded && /* @__PURE__ */ jsx("div", {
+								className: classes.conditionalIconContainer,
+								children: /* @__PURE__ */ jsx(UnityFluentIcon, {
+									size: treeViewMode === TreeViewModeEnums.Compact ? "small" : "medium",
+									color: conditionalIconColor,
+									type: conditionalIconType,
+									icon: conditionalIconType === "unity" ? getUnityIconFromName(conditionalIconName) : getIconFromName(conditionalIconName),
+									style: { color: conditionalIconColor }
+								})
+							})
+						]
+					})
+				})
+			})
+		}),
+		onLabelClick: handleOnLabelClick,
+		classes: {
+			root: classes.root,
+			content: classes.content
+		},
+		...other
+	}, nodeId);
+};
+
+//#endregion
+//#region src/treeMenu/BaseTreeMenu.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		marginBottom: theme.spacing(1.75),
+		borderTop: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : ""
+	},
+	noChildrenContainer: { borderBottom: (props) => props.treeViewMode === TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : "" }
+}));
+const BaseTreeMenu = (props) => {
+	const { menuItems, onSelectNode, onDropNode, menuIndex, selectedNodeId, selectedNodeParentId, sidebarExpanded, treeViewMode, childrenKey = "children" } = props;
+	const [expanded, setExpanded] = useState(null);
+	const [isCurrentActiveTree, setIsCurrentActiveTree] = useState(false);
+	const [selectedNodeIsHidden, setSelectedNodeIsHidden] = useState(false);
+	const [tree, setTree] = useState(menuItems);
+	const theme = useTheme();
+	const classes = useStyles$1(props);
+	const handleSelectedNode = useCallback((e, value) => {
+		const selectedNode = searchTree(tree, value);
+		if (onSelectNode) {
+			onSelectNode(selectedNode, menuIndex);
+			setSelectedNodeIsHidden(false);
+		}
+	}, [
+		tree,
+		menuIndex,
+		onSelectNode
+	]);
+	const renderTree = useCallback((node, depth = 1) => {
+		var _node$properties, _node$properties2, _node$properties3, _node$properties4, _node$properties5, _node$properties6, _node$properties7, _node$properties8, _node$properties9, _node$properties10, _node$properties11, _node$properties12, _node$properties13, _node$childrenKey, _node$properties19, _node$childrenKey2, _node$properties20, _node$childrenKey3, _node$properties21, _node$childrenKey4;
+		let label = ((_node$properties = node.properties) === null || _node$properties === void 0 ? void 0 : _node$properties.nodeLabel) || ((_node$properties2 = node.properties) === null || _node$properties2 === void 0 ? void 0 : _node$properties2.name);
+		let subLabel = (_node$properties3 = node.properties) === null || _node$properties3 === void 0 ? void 0 : _node$properties3.nodeSubLabel;
+		let iconName = (_node$properties4 = node.properties) === null || _node$properties4 === void 0 || (_node$properties4 = _node$properties4.defaultIcon) === null || _node$properties4 === void 0 ? void 0 : _node$properties4.name;
+		let iconType = (_node$properties5 = node.properties) === null || _node$properties5 === void 0 || (_node$properties5 = _node$properties5.defaultIcon) === null || _node$properties5 === void 0 ? void 0 : _node$properties5.type;
+		let conditionalIconName = ((_node$properties6 = node.properties) === null || _node$properties6 === void 0 ? void 0 : _node$properties6.conditionalIconName) || "";
+		let conditionalIconType = ((_node$properties7 = node.properties) === null || _node$properties7 === void 0 ? void 0 : _node$properties7.conditionalIconName) ? node.properties.conditionalIconType : "";
+		let conditionalIconColor = ((_node$properties8 = node.properties) === null || _node$properties8 === void 0 ? void 0 : _node$properties8.conditionalIconName) ? (_node$properties9 = node.properties) === null || _node$properties9 === void 0 ? void 0 : _node$properties9.conditionalIconColor : "";
+		let nodeId = node.id;
+		let iconColor = ((_node$properties10 = node.properties) === null || _node$properties10 === void 0 ? void 0 : _node$properties10.conditionalIconName) ? (_node$properties11 = node.properties) === null || _node$properties11 === void 0 ? void 0 : _node$properties11.conditionalIconColor : (_node$properties12 = node.properties) === null || _node$properties12 === void 0 || (_node$properties12 = _node$properties12.defaultIcon) === null || _node$properties12 === void 0 || (_node$properties12 = _node$properties12.color) === null || _node$properties12 === void 0 ? void 0 : _node$properties12.hex;
+		let aggregateThresholdId = ((_node$properties13 = node.properties) === null || _node$properties13 === void 0 ? void 0 : _node$properties13.aggregateThresholdId) || "";
+		if (node.isGroupNode) {
+			var _node$properties14, _node$properties15, _node$properties16, _node$properties17, _node$properties18;
+			label = (_node$properties14 = node.properties) === null || _node$properties14 === void 0 ? void 0 : _node$properties14.label;
+			subLabel = (_node$properties15 = node.properties) === null || _node$properties15 === void 0 ? void 0 : _node$properties15.subLabel;
+			iconName = (_node$properties16 = node.properties) === null || _node$properties16 === void 0 || (_node$properties16 = _node$properties16.icon) === null || _node$properties16 === void 0 ? void 0 : _node$properties16.name;
+			iconType = (_node$properties17 = node.properties) === null || _node$properties17 === void 0 || (_node$properties17 = _node$properties17.icon) === null || _node$properties17 === void 0 ? void 0 : _node$properties17.type;
+			iconColor = (_node$properties18 = node.properties) === null || _node$properties18 === void 0 || (_node$properties18 = _node$properties18.icon) === null || _node$properties18 === void 0 || (_node$properties18 = _node$properties18.color) === null || _node$properties18 === void 0 ? void 0 : _node$properties18.hex;
+		}
+		return /* @__PURE__ */ jsxs(BaseTreeMenuItem, {
+			nodeId,
+			label,
+			subLabel,
+			iconName,
+			iconType,
+			conditionalIconName,
+			conditionalIconType,
+			conditionalIconColor,
+			parentId: node.parentId,
+			iconColor,
+			onNodeSelect: handleSelectedNode,
+			selectedNodeId,
+			isSelectedNode: selectedNodeId === node.id,
+			showRightBorderColor: selectedNodeIsHidden && isCurrentActiveTree && getNodeIdForRightBorder(expanded, tree, selectedNodeParentId) === node.id,
+			isCurrentActiveTree,
+			sidebarExpanded,
+			depth,
+			hideExpansion: !!!((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length),
+			node,
+			onDropNode,
+			treeViewMode,
+			menuIndex,
+			aggregateThresholdId,
+			children: [
+				((_node$properties19 = node.properties) === null || _node$properties19 === void 0 ? void 0 : _node$properties19.lazyLoad) && !!!((_node$childrenKey2 = node[childrenKey]) === null || _node$childrenKey2 === void 0 ? void 0 : _node$childrenKey2.length) && !node.completedLoadingChildren && /* @__PURE__ */ jsx(CircularProgress, {
+					size: 12,
+					style: { marginLeft: (depth || 1) * theme.spacing(1) }
+				}),
+				((_node$properties20 = node.properties) === null || _node$properties20 === void 0 ? void 0 : _node$properties20.lazyLoad) && !!!((_node$childrenKey3 = node[childrenKey]) === null || _node$childrenKey3 === void 0 ? void 0 : _node$childrenKey3.length) && node.completedLoadingChildren && sidebarExpanded && !node.errorRetrievingChildren && /* @__PURE__ */ jsx("div", {
+					className: classes.noChildrenContainer,
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						style: {
+							marginLeft: (depth || 1) * theme.spacing(3),
+							fontWeight: 400
+						},
+						children: "No Children"
+					})
+				}),
+				((_node$properties21 = node.properties) === null || _node$properties21 === void 0 ? void 0 : _node$properties21.lazyLoad) && node.completedLoadingChildren && sidebarExpanded && node.errorRetrievingChildren && /* @__PURE__ */ jsx("div", {
+					className: classes.noChildrenContainer,
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						style: {
+							marginLeft: (depth || 1) * theme.spacing(3),
+							fontWeight: 400
+						},
+						children: `Error Retrieving ${!!((_node$childrenKey4 = node[childrenKey]) === null || _node$childrenKey4 === void 0 ? void 0 : _node$childrenKey4.length) ? `Additional ` : ""}Children`
+					})
+				}),
+				Array.isArray(node[childrenKey]) ? node[childrenKey].map((n, i) => renderTree(n, depth + 1)) : null
+			]
+		}, nodeId);
+	}, [
+		handleSelectedNode,
+		selectedNodeId,
+		selectedNodeIsHidden,
+		isCurrentActiveTree,
+		sidebarExpanded,
+		expanded,
+		tree,
+		selectedNodeParentId,
+		theme,
+		classes,
+		onDropNode,
+		treeViewMode,
+		menuIndex,
+		childrenKey
+	]);
+	const handleNodeExpansion = useCallback(async (evt, nodeIds) => {
+		const treeCopy = cloneDeep(tree);
+		setExpanded(nodeIds);
+		const parentNode = searchTree(treeCopy, selectedNodeParentId);
+		const initialAllParentNodeIds = selectedNodeParentId ? [selectedNodeParentId] : [];
+		const allParentNodeIds = findAllParentIds(treeCopy, parentNode, initialAllParentNodeIds);
+		const selectedNodeShown = allParentNodeIds.every((id) => nodeIds.includes(id));
+		if (isCurrentActiveTree && allParentNodeIds.length && !selectedNodeShown) setSelectedNodeIsHidden(true);
+		else setSelectedNodeIsHidden(false);
+	}, [
+		isCurrentActiveTree,
+		tree,
+		selectedNodeParentId
+	]);
+	const getExpandedRecursively = useCallback((tree$1) => {
+		if (!tree$1) return [];
+		return tree$1.reduce((expandedIds, item) => {
+			var _item$childrenKey;
+			if (item === null || item === void 0 ? void 0 : item.isExpanded) expandedIds.push(item.id);
+			if (item && ((_item$childrenKey = item[childrenKey]) === null || _item$childrenKey === void 0 ? void 0 : _item$childrenKey.length)) expandedIds = expandedIds.concat(getExpandedRecursively(item[childrenKey]));
+			return expandedIds;
+		}, []);
+	}, [childrenKey]);
+	useEffect(() => {
+		setTree(menuItems);
+	}, [menuItems]);
+	useEffect(() => {
+		if (!tree) return;
+		let expanded$1 = [];
+		if (tree === null || tree === void 0 ? void 0 : tree.isExpanded) expanded$1.push(tree.id);
+		expanded$1 = expanded$1.concat(getExpandedRecursively(tree[childrenKey]));
+		setExpanded(expanded$1);
+	}, [
+		getExpandedRecursively,
+		tree,
+		childrenKey
+	]);
+	useEffect(() => {
+		if (!!searchTree(tree, selectedNodeId)) setIsCurrentActiveTree(true);
+		else setIsCurrentActiveTree(false);
+	}, [tree, selectedNodeId]);
+	if (!expanded) return null;
+	return /* @__PURE__ */ jsx(TreeView, {
+		className: classes.root,
+		defaultCollapseIcon: /* @__PURE__ */ jsx(FluentIcon, {
+			size: "small",
+			component: CaretUpSolid8Icon,
+			style: {
+				color: lighten(theme.palette.primary.main, .5),
+				width: theme.spacing(1.5),
+				height: theme.spacing(1.5)
+			}
+		}),
+		expanded: expanded || [],
+		onNodeToggle: handleNodeExpansion,
+		defaultExpandIcon: /* @__PURE__ */ jsx(FluentIcon, {
+			size: "small",
+			component: CaretDownSolid8Icon,
+			style: {
+				color: lighten(theme.palette.primary.main, .5),
+				width: theme.spacing(1.5),
+				height: theme.spacing(1.5)
+			}
+		}),
+		selected: selectedNodeId,
+		children: tree && renderTree(tree)
+	}, tree);
+};
+
+//#endregion
+//#region src/menuPage/MenuPage.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		flex: 1,
+		minHeight: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
+		display: "grid",
+		gridTemplateAreas: ["sidebar content"].map((line) => `"${line}"`).join(" "),
+		gridTemplateColumns: "auto 1fr",
+		gridTemplateRows: "auto 1fr"
+	},
+	sidebar: {
+		gridArea: "sidebar",
+		marginRight: theme.spacing(1)
+	},
+	content: {
+		gridArea: "content",
+		display: "flex",
+		flexDirection: "column",
+		position: "relative",
+		zIndex: 1,
+		height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 56}px)`,
+		overflowY: "auto"
+	},
+	menuContent: {
+		marginTop: theme.spacing(1),
+		height: ({ appRibbonSpace }) => `calc(100vh - ${appRibbonSpace + 116}px)`,
+		overflowX: "hidden"
+	},
+	loader: {
+		marginRight: theme.spacing(1),
+		marginLeft: theme.spacing(1)
+	},
+	loadingContent: {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center"
+	}
+}));
+const MenuPage = (props) => {
+	var _selectedNode$propert, _selectedNode$propert2, _selectedNode$propert3, _selectedNode$propert4, _selectedNode$propert5, _selectedNode$propert6, _selectedNode$propert7, _selectedNode$propert8, _selectedNode$propert9;
+	const buildEnv = useBuildEnvironment();
+	const classes = useStyles({
+		...props,
+		appRibbonSpace: buildEnv ? APP_RIBBON_SPACE : 0
+	});
+	const location = useLocation();
+	const user = useUser();
+	const { t } = useTranslation();
+	const setLocationState = useSetLocationState();
+	const [menuItemsList, setMenuItemsList] = useState([]);
+	const [selectedNode, setSelectedNode] = useState(null);
+	const [sidebarExpanded, setSidebarExpanded] = useState(true);
+	const innerMenuId = location.pathname.replace("/menupage/", "");
+	const [{ data: innerMenu, loading: menuLoading }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `menus/${innerMenuId}`, {}, !!!innerMenuId, false);
+	const { setSubHeaderActionHasChildren, setNavigationExpanded } = useShellStore();
+	const [{ data: pageData, loading: pageLoading, error: pageError }] = useAxiosGet(ConfigService.tenantV1ApiUrl, `page/${selectedNode === null || selectedNode === void 0 || (_selectedNode$propert = selectedNode.properties) === null || _selectedNode$propert === void 0 || (_selectedNode$propert = _selectedNode$propert.page) === null || _selectedNode$propert === void 0 ? void 0 : _selectedNode$propert.id}`, {}, !!!(selectedNode === null || selectedNode === void 0 || (_selectedNode$propert2 = selectedNode.properties) === null || _selectedNode$propert2 === void 0 || (_selectedNode$propert2 = _selectedNode$propert2.page) === null || _selectedNode$propert2 === void 0 ? void 0 : _selectedNode$propert2.id), false);
+	const handleSelectedNode = useCallback((node, menuIndex) => {
+		setSelectedNode(node);
+	}, []);
+	const handleDropNode = useCallback((sourceNode, targetNode, sourceNodeMenuIndex, targetNodeMenuIndex) => {}, []);
+	const handleSidebarExpandClick = useCallback(() => {
+		setSidebarExpanded((expanded) => !expanded);
+	}, []);
+	useEffect(() => {
+		if (innerMenu) {
+			const list = [];
+			let nodeSelected = false;
+			innerMenu.menuItemInstanceStructureViews.forEach((menuInstance) => {
+				const updatedMenu = transformMenuPageTree(menuInstance);
+				if (updatedMenu) {
+					list.push(updatedMenu);
+					if (!nodeSelected) {
+						setSelectedNode(updatedMenu);
+						nodeSelected = true;
+						setNavigationExpanded(false);
+					}
+				}
+			});
+			setMenuItemsList(list);
+		}
+	}, [innerMenu, setNavigationExpanded]);
+	useEffect(() => {
+		setSubHeaderActionHasChildren(false);
+	}, [setSubHeaderActionHasChildren]);
+	useEffect(() => {
+		if (innerMenu) setLocationState({ label: t(innerMenu === null || innerMenu === void 0 ? void 0 : innerMenu.name) });
+	}, [
+		setLocationState,
+		t,
+		innerMenu
+	]);
+	return /* @__PURE__ */ jsx(DndProvider, {
+		backend: HTML5Backend,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: classes.root,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: classes.sidebar,
+				children: /* @__PURE__ */ jsx(UtilitySideBar, {
+					title: innerMenu === null || innerMenu === void 0 ? void 0 : innerMenu.name,
+					isUsingChildren: true,
+					resizable: true,
+					removePadding: true,
+					removeTopLayoutUnit: true,
+					onUtilitySidebarToggleExpandClick: handleSidebarExpandClick,
+					collapsedWidth: 64,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: classes.menuContent,
+						children: [(menuItemsList === null || menuItemsList === void 0 ? void 0 : menuItemsList.length) > 0 && !menuLoading && menuItemsList.map((menuItems, index) => /* @__PURE__ */ jsx("div", {
+							className: classes.nodeContainer,
+							children: /* @__PURE__ */ jsx(BaseTreeMenu, {
+								menuItems,
+								onSelectNode: handleSelectedNode,
+								onDropNode: handleDropNode,
+								menuIndex: index,
+								selectedNodeId: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.id,
+								selectedNodeParentId: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.parentId,
+								sidebarExpanded,
+								treeViewMode: TreeViewModeEnums.Classic
+							})
+						}, menuItems.id)), menuLoading && /* @__PURE__ */ jsx("div", {
+							className: classes.loader,
+							children: /* @__PURE__ */ jsx(NodeLoader, { loading: menuLoading })
+						})]
+					}, innerMenuId)
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: classes.content,
+				children: (selectedNode === null || selectedNode === void 0 || (_selectedNode$propert3 = selectedNode.properties) === null || _selectedNode$propert3 === void 0 || (_selectedNode$propert3 = _selectedNode$propert3.page) === null || _selectedNode$propert3 === void 0 ? void 0 : _selectedNode$propert3.id) && /* @__PURE__ */ jsx(PageContainer, {
+					user,
+					pageData,
+					pageLoading,
+					widgetParams: {
+						pageId: pageData === null || pageData === void 0 ? void 0 : pageData.pageId,
+						entityName: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert4 = selectedNode.properties) === null || _selectedNode$propert4 === void 0 || (_selectedNode$propert4 = _selectedNode$propert4.page) === null || _selectedNode$propert4 === void 0 || (_selectedNode$propert4 = _selectedNode$propert4.entity) === null || _selectedNode$propert4 === void 0 ? void 0 : _selectedNode$propert4.entityName,
+						pbiReportCode: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert5 = selectedNode.properties) === null || _selectedNode$propert5 === void 0 || (_selectedNode$propert5 = _selectedNode$propert5.page) === null || _selectedNode$propert5 === void 0 ? void 0 : _selectedNode$propert5.pbiReportCode,
+						requiredFieldsMap: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert6 = selectedNode.properties) === null || _selectedNode$propert6 === void 0 || (_selectedNode$propert6 = _selectedNode$propert6.page) === null || _selectedNode$propert6 === void 0 ? void 0 : _selectedNode$propert6.requiredFieldMapping,
+						udpTagId: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert7 = selectedNode.properties) === null || _selectedNode$propert7 === void 0 || (_selectedNode$propert7 = _selectedNode$propert7.page) === null || _selectedNode$propert7 === void 0 ? void 0 : _selectedNode$propert7.udpTagId,
+						queryId: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert8 = selectedNode.properties) === null || _selectedNode$propert8 === void 0 || (_selectedNode$propert8 = _selectedNode$propert8.page) === null || _selectedNode$propert8 === void 0 ? void 0 : _selectedNode$propert8.queryId,
+						inquiryTreeId: selectedNode === null || selectedNode === void 0 || (_selectedNode$propert9 = selectedNode.properties) === null || _selectedNode$propert9 === void 0 || (_selectedNode$propert9 = _selectedNode$propert9.page) === null || _selectedNode$propert9 === void 0 ? void 0 : _selectedNode$propert9.inquiryTreeId
+					},
+					disableMargins: true,
+					fromMenu: true
+				}, selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.id)
+			})]
+		})
+	});
+};
+
+//#endregion
+export { MenuPage };
+//# sourceMappingURL=MenuPage-MyE8iJHD.js.map