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

package/dist-tsdown/MenuPage-DsZUwqyz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPage-DsZUwqyz.js","names":["useStyles","other","useStyles","tree","expanded"],"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-tsdown/MenuPage-Zn5ipVRK.cjs

@@ -0,0 +1,547 @@
+const require_chunk = require('./chunk-CsX-DzYB.cjs');
+const require_EnvironmentRibbon = require('./EnvironmentRibbon-C5I-zJ7u.cjs');
+require('./apiHelpers-TkqtXraB.cjs');
+const require_UtilitySideBar = require('./UtilitySideBar-C-5lGIvy.cjs');
+require('./SearchUtilities-kF1roS4F.cjs');
+const require_PageContainer = require('./PageContainer-BG6v3pM7.cjs');
+const react = require_chunk.__toESM(require("react"));
+const __material_ui_core = require_chunk.__toESM(require("@material-ui/core"));
+const react_jsx_runtime = require_chunk.__toESM(require("react/jsx-runtime"));
+const udp_react_stencil_component_library = require_chunk.__toESM(require("udp-react-stencil-component-library"));
+const react_router_dom = require_chunk.__toESM(require("react-router-dom"));
+const clsx = require_chunk.__toESM(require("clsx"));
+const __fluentui_react_icons = require_chunk.__toESM(require("@fluentui/react-icons"));
+const lodash = require_chunk.__toESM(require("lodash"));
+const react_i18next = require_chunk.__toESM(require("react-i18next"));
+const react_dnd = require_chunk.__toESM(require("react-dnd"));
+const react_dnd_html5_backend = require_chunk.__toESM(require("react-dnd-html5-backend"));
+const __material_ui_lab_TreeView = require_chunk.__toESM(require("@material-ui/lab/TreeView"));
+const __material_ui_lab_TreeItem = require_chunk.__toESM(require("@material-ui/lab/TreeItem"));
+
+//#region src/treeMenu/BaseTreeMenuItem.jsx
+const useStyles$2 = (0, __material_ui_core.makeStyles)((theme) => ({
+	root: {
+		"&.Mui-selected > .MuiTreeItem-content": {
+			backgroundColor: 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?.getThemeData()?.mode !== "dark" && theme.palette.grey[50] },
+		"& .MuiTreeItem-content .MuiTreeItem-iconContainer": { display: (props) => props.sidebarExpanded ? "flex" : "none" }
+	},
+	content: { backgroundColor: (props) => theme?.getThemeData()?.mode !== "dark" && props.conditionalIconName && props.conditionalIconColor ? (0, __material_ui_core.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 === require_EnvironmentRibbon.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 === require_EnvironmentRibbon.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 === require_EnvironmentRibbon.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) => theme?.getThemeData()?.mode !== "dark" && props.isSelectedNode ? theme.palette.grey[50] : "" }
+	},
+	iconContainer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		borderRadius: 50,
+		marginTop: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
+		marginBottom: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? theme.spacing(.25) : theme.spacing(.5),
+		marginRight: theme.spacing(1),
+		width: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4),
+		height: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? theme.spacing(3) : theme.spacing(4),
+		border: (props) => props.iconColor ? `1px solid ${(0, __material_ui_core.darken)(props.iconColor, .1)}` : `1px solid ${theme.palette.secondary.main}`,
+		backgroundColor: "#ffffff"
+	}
+}));
+const BaseTreeMenuItem = (props) => {
+	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 = (0, __material_ui_core.useTheme)();
+	const [{ isDragging }, dragRef] = (0, react_dnd.useDrag)({
+		type: "BaseTreeMenuItem",
+		item: {
+			...node,
+			sourceNodeMenuIndex: menuIndex
+		},
+		collect: (monitor) => ({ isDragging: monitor.isDragging() })
+	});
+	const handleOnDrop = (0, react.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] = (0, react_dnd.useDrop)(() => ({
+		accept: ["BaseTreeMenuItem"],
+		drop: (sourceNode, monitor) => {
+			handleOnDrop(sourceNode, monitor);
+		},
+		canDrop: (sourceNode) => checkCanDrop(sourceNode),
+		collect: (monitor) => ({
+			isOver: monitor.isOver(),
+			canDrop: !!monitor.canDrop()
+		})
+	}), [handleOnDrop]);
+	const checkCanDrop = (0, react.useCallback)((sourceNode) => {
+		if (sourceNode) {
+			const onDropActions = node?.properties?.nodeActions?.filter((na) => na?.triggerType === require_EnvironmentRibbon.NodeActionTriggerEnums.On_Node_Drop);
+			if (!onDropActions) return false;
+			const nodeDragEntities = onDropActions?.map((action) => action?.dragEntityName);
+			return nodeDragEntities.includes(sourceNode?.properties?.catalogReturnObject);
+		}
+	}, [node]);
+	const handleOnLabelClick = (0, react.useCallback)((e) => {
+		e.preventDefault();
+		onNodeSelect(e, nodeId);
+	}, [onNodeSelect, nodeId]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_lab_TreeItem.default, {
+		className: classes.group,
+		nodeId,
+		label: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: dropRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Tooltip, {
+				title: sidebarExpanded ? "" : label,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: node?.properties?.isDraggable && dragRef || null,
+					style: { opacity: isDragging ? .5 : 1 },
+					children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.CircularProgress, { size: 12 }) : /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: classes.iconContainer,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.UnityFluentIcon, {
+									size: treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? "small" : "medium",
+									color: iconColor,
+									type: iconType,
+									icon: iconType === "unity" ? require_UtilitySideBar.getUnityIconFromName(iconName) : require_UtilitySideBar.getIconFromName(iconName),
+									style: { color: iconColor ? (0, __material_ui_core.darken)(iconColor, .1) : theme.palette.secondary.main }
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: classes.labelContainer,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__material_ui_core.Typography, {
+									variant: "subtitle2",
+									className: (0, clsx.default)(classes.labelText, classes.labelOverflow),
+									children: [label, subLabel && treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+										variant: "caption",
+										className: (0, clsx.default)(classes.captionText, classes.labelOverflow),
+										children: subLabel
+									})]
+								}), subLabel && treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Classic && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: classes.labelOverflow,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+										variant: "caption",
+										className: (0, clsx.default)(classes.captionText),
+										children: subLabel
+									})
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UtilitySideBar.AggregateChip, { aggregateThresholdId }),
+							conditionalIconName && sidebarExpanded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: classes.conditionalIconContainer,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.UnityFluentIcon, {
+									size: treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? "small" : "medium",
+									color: conditionalIconColor,
+									type: conditionalIconType,
+									icon: conditionalIconType === "unity" ? require_UtilitySideBar.getUnityIconFromName(conditionalIconName) : require_UtilitySideBar.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 = (0, __material_ui_core.makeStyles)((theme) => ({
+	root: {
+		marginBottom: theme.spacing(1.75),
+		borderTop: (props) => props.treeViewMode === require_EnvironmentRibbon.TreeViewModeEnums.Compact ? `1px solid ${theme.palette.grey[200]}` : ""
+	},
+	noChildrenContainer: { borderBottom: (props) => props.treeViewMode === require_EnvironmentRibbon.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] = (0, react.useState)(null);
+	const [isCurrentActiveTree, setIsCurrentActiveTree] = (0, react.useState)(false);
+	const [selectedNodeIsHidden, setSelectedNodeIsHidden] = (0, react.useState)(false);
+	const [tree, setTree] = (0, react.useState)(menuItems);
+	const theme = (0, __material_ui_core.useTheme)();
+	const classes = useStyles$1(props);
+	const handleSelectedNode = (0, react.useCallback)((e, value) => {
+		const selectedNode = require_UtilitySideBar.searchTree(tree, value);
+		if (onSelectNode) {
+			onSelectNode(selectedNode, menuIndex);
+			setSelectedNodeIsHidden(false);
+		}
+	}, [
+		tree,
+		menuIndex,
+		onSelectNode
+	]);
+	const renderTree = (0, react.useCallback)((node, depth = 1) => {
+		let label = node.properties?.nodeLabel || node.properties?.name;
+		let subLabel = node.properties?.nodeSubLabel;
+		let iconName = node.properties?.defaultIcon?.name;
+		let iconType = node.properties?.defaultIcon?.type;
+		let conditionalIconName = node.properties?.conditionalIconName || "";
+		let conditionalIconType = node.properties?.conditionalIconName ? node.properties.conditionalIconType : "";
+		let conditionalIconColor = node.properties?.conditionalIconName ? node.properties?.conditionalIconColor : "";
+		let nodeId = node.id;
+		let iconColor = node.properties?.conditionalIconName ? node.properties?.conditionalIconColor : node.properties?.defaultIcon?.color?.hex;
+		let aggregateThresholdId = node.properties?.aggregateThresholdId || "";
+		if (node.isGroupNode) {
+			label = node.properties?.label;
+			subLabel = node.properties?.subLabel;
+			iconName = node.properties?.icon?.name;
+			iconType = node.properties?.icon?.type;
+			iconColor = node.properties?.icon?.color?.hex;
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BaseTreeMenuItem, {
+			nodeId,
+			label,
+			subLabel,
+			iconName,
+			iconType,
+			conditionalIconName,
+			conditionalIconType,
+			conditionalIconColor,
+			parentId: node.parentId,
+			iconColor,
+			onNodeSelect: handleSelectedNode,
+			selectedNodeId,
+			isSelectedNode: selectedNodeId === node.id,
+			showRightBorderColor: selectedNodeIsHidden && isCurrentActiveTree && require_UtilitySideBar.getNodeIdForRightBorder(expanded, tree, selectedNodeParentId) === node.id,
+			isCurrentActiveTree,
+			sidebarExpanded,
+			depth,
+			hideExpansion: !!!node[childrenKey]?.length,
+			node,
+			onDropNode,
+			treeViewMode,
+			menuIndex,
+			aggregateThresholdId,
+			children: [
+				node.properties?.lazyLoad && !!!node[childrenKey]?.length && !node.completedLoadingChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.CircularProgress, {
+					size: 12,
+					style: { marginLeft: (depth || 1) * theme.spacing(1) }
+				}),
+				node.properties?.lazyLoad && !!!node[childrenKey]?.length && node.completedLoadingChildren && sidebarExpanded && !node.errorRetrievingChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classes.noChildrenContainer,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+						variant: "caption",
+						style: {
+							marginLeft: (depth || 1) * theme.spacing(3),
+							fontWeight: 400
+						},
+						children: "No Children"
+					})
+				}),
+				node.properties?.lazyLoad && node.completedLoadingChildren && sidebarExpanded && node.errorRetrievingChildren && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: classes.noChildrenContainer,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_core.Typography, {
+						variant: "caption",
+						style: {
+							marginLeft: (depth || 1) * theme.spacing(3),
+							fontWeight: 400
+						},
+						children: `Error Retrieving ${!!node[childrenKey]?.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 = (0, react.useCallback)(async (evt, nodeIds) => {
+		const treeCopy = (0, lodash.cloneDeep)(tree);
+		setExpanded(nodeIds);
+		const parentNode = require_UtilitySideBar.searchTree(treeCopy, selectedNodeParentId);
+		const initialAllParentNodeIds = selectedNodeParentId ? [selectedNodeParentId] : [];
+		const allParentNodeIds = require_UtilitySideBar.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 = (0, react.useCallback)((tree$1) => {
+		if (!tree$1) return [];
+		return tree$1.reduce((expandedIds, item) => {
+			if (item?.isExpanded) expandedIds.push(item.id);
+			if (item && item[childrenKey]?.length) expandedIds = expandedIds.concat(getExpandedRecursively(item[childrenKey]));
+			return expandedIds;
+		}, []);
+	}, [childrenKey]);
+	(0, react.useEffect)(() => {
+		setTree(menuItems);
+	}, [menuItems]);
+	(0, react.useEffect)(() => {
+		if (!tree) return;
+		let expanded$1 = [];
+		if (tree?.isExpanded) expanded$1.push(tree.id);
+		expanded$1 = expanded$1.concat(getExpandedRecursively(tree[childrenKey]));
+		setExpanded(expanded$1);
+	}, [
+		getExpandedRecursively,
+		tree,
+		childrenKey
+	]);
+	(0, react.useEffect)(() => {
+		if (!!require_UtilitySideBar.searchTree(tree, selectedNodeId)) setIsCurrentActiveTree(true);
+		else setIsCurrentActiveTree(false);
+	}, [tree, selectedNodeId]);
+	if (!expanded) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__material_ui_lab_TreeView.default, {
+		className: classes.root,
+		defaultCollapseIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentIcon, {
+			size: "small",
+			component: __fluentui_react_icons.CaretUpSolid8Icon,
+			style: {
+				color: (0, __material_ui_core.lighten)(theme.palette.primary.main, .5),
+				width: theme.spacing(1.5),
+				height: theme.spacing(1.5)
+			}
+		}),
+		expanded: expanded || [],
+		onNodeToggle: handleNodeExpansion,
+		defaultExpandIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EnvironmentRibbon.FluentIcon, {
+			size: "small",
+			component: __fluentui_react_icons.CaretDownSolid8Icon,
+			style: {
+				color: (0, __material_ui_core.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 = (0, __material_ui_core.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) => {
+	const buildEnv = require_EnvironmentRibbon.useBuildEnvironment();
+	const classes = useStyles({
+		...props,
+		appRibbonSpace: buildEnv ? require_EnvironmentRibbon.APP_RIBBON_SPACE : 0
+	});
+	const location = (0, react_router_dom.useLocation)();
+	const user = require_EnvironmentRibbon.useUser();
+	const { t } = (0, react_i18next.useTranslation)();
+	const setLocationState = require_PageContainer.useSetLocationState();
+	const [menuItemsList, setMenuItemsList] = (0, react.useState)([]);
+	const [selectedNode, setSelectedNode] = (0, react.useState)(null);
+	const [sidebarExpanded, setSidebarExpanded] = (0, react.useState)(true);
+	const innerMenuId = location.pathname.replace("/menupage/", "");
+	const [{ data: innerMenu, loading: menuLoading }] = require_EnvironmentRibbon.useAxiosGet(udp_react_stencil_component_library.ConfigService.tenantV1ApiUrl, `menus/${innerMenuId}`, {}, !!!innerMenuId, false);
+	const { setSubHeaderActionHasChildren, setNavigationExpanded } = require_EnvironmentRibbon.useShellStore();
+	const [{ data: pageData, loading: pageLoading, error: pageError }] = require_EnvironmentRibbon.useAxiosGet(udp_react_stencil_component_library.ConfigService.tenantV1ApiUrl, `page/${selectedNode?.properties?.page?.id}`, {}, !!!selectedNode?.properties?.page?.id, false);
+	const handleSelectedNode = (0, react.useCallback)((node, menuIndex) => {
+		setSelectedNode(node);
+	}, []);
+	const handleDropNode = (0, react.useCallback)((sourceNode, targetNode, sourceNodeMenuIndex, targetNodeMenuIndex) => {}, []);
+	const handleSidebarExpandClick = (0, react.useCallback)(() => {
+		setSidebarExpanded((expanded) => !expanded);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (innerMenu) {
+			const list = [];
+			let nodeSelected = false;
+			innerMenu.menuItemInstanceStructureViews.forEach((menuInstance) => {
+				const updatedMenu = require_UtilitySideBar.transformMenuPageTree(menuInstance);
+				if (updatedMenu) {
+					list.push(updatedMenu);
+					if (!nodeSelected) {
+						setSelectedNode(updatedMenu);
+						nodeSelected = true;
+						setNavigationExpanded(false);
+					}
+				}
+			});
+			setMenuItemsList(list);
+		}
+	}, [innerMenu, setNavigationExpanded]);
+	(0, react.useEffect)(() => {
+		setSubHeaderActionHasChildren(false);
+	}, [setSubHeaderActionHasChildren]);
+	(0, react.useEffect)(() => {
+		if (innerMenu) setLocationState({ label: t(innerMenu?.name) });
+	}, [
+		setLocationState,
+		t,
+		innerMenu
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_dnd.DndProvider, {
+		backend: react_dnd_html5_backend.HTML5Backend,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: classes.root,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classes.sidebar,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UtilitySideBar.UtilitySideBar, {
+					title: innerMenu?.name,
+					isUsingChildren: true,
+					resizable: true,
+					removePadding: true,
+					removeTopLayoutUnit: true,
+					onUtilitySidebarToggleExpandClick: handleSidebarExpandClick,
+					collapsedWidth: 64,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: classes.menuContent,
+						children: [menuItemsList?.length > 0 && !menuLoading && menuItemsList.map((menuItems, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: classes.nodeContainer,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseTreeMenu, {
+								menuItems,
+								onSelectNode: handleSelectedNode,
+								onDropNode: handleDropNode,
+								menuIndex: index,
+								selectedNodeId: selectedNode?.id,
+								selectedNodeParentId: selectedNode?.parentId,
+								sidebarExpanded,
+								treeViewMode: require_EnvironmentRibbon.TreeViewModeEnums.Classic
+							})
+						}, menuItems.id)), menuLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: classes.loader,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UtilitySideBar.NodeLoader, { loading: menuLoading })
+						})]
+					}, innerMenuId)
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classes.content,
+				children: selectedNode?.properties?.page?.id && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageContainer.PageContainer, {
+					user,
+					pageData,
+					pageLoading,
+					widgetParams: {
+						pageId: pageData?.pageId,
+						entityName: selectedNode?.properties?.page?.entity?.entityName,
+						pbiReportCode: selectedNode?.properties?.page?.pbiReportCode,
+						requiredFieldsMap: selectedNode?.properties?.page?.requiredFieldMapping,
+						udpTagId: selectedNode?.properties?.page?.udpTagId,
+						queryId: selectedNode?.properties?.page?.queryId,
+						inquiryTreeId: selectedNode?.properties?.page?.inquiryTreeId
+					},
+					disableMargins: true,
+					fromMenu: true
+				}, selectedNode?.id)
+			})]
+		})
+	});
+};
+
+//#endregion
+exports.MenuPage = MenuPage;
+//# sourceMappingURL=MenuPage-Zn5ipVRK.cjs.map