Refactored element queries

Author: Jialecl

packages/lib/src/base-menu/GroupItem.tsx

@@ -24,25 +24,25 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => {
 
   return hasPopOver ? (
     <>
-      {portalContainer && (
-        <Popover.Root open={isOpen}>
-          <Popover.Trigger
-            aria-controls={undefined}
-            aria-expanded={undefined}
-            aria-haspopup={undefined}
-            asChild
-            type={undefined}
-          >
-            <ItemAction
-              aria-controls={isOpen ? groupMenuId : undefined}
-              aria-expanded={isOpen ? true : undefined}
-              collapseIcon={isOpen ? <DxcIcon icon="filled_expand_less" /> : <DxcIcon icon="filled_expand_more" />}
-              onClick={() => toggleOpen()}
-              selected={groupSelected && !isOpen}
-              {...props}
-            />
-          </Popover.Trigger>
-          <Popover.Portal container={document.getElementById(`${navigationTreeId}-portal`)}>
+      <Popover.Root open={isOpen}>
+        <Popover.Trigger
+          aria-controls={undefined}
+          aria-expanded={undefined}
+          aria-haspopup={undefined}
+          asChild
+          type={undefined}
+        >
+          <ItemAction
+            aria-controls={isOpen ? groupMenuId : undefined}
+            aria-expanded={isOpen ? true : undefined}
+            collapseIcon={isOpen ? <DxcIcon icon="filled_expand_less" /> : <DxcIcon icon="filled_expand_more" />}
+            onClick={() => toggleOpen()}
+            selected={groupSelected && !isOpen}
+            {...props}
+          />
+        </Popover.Trigger>
+        {portalContainer && (
+          <Popover.Portal container={portalContainer}>
             <BaseMenuContext.Provider value={{ ...contextValue, displayGroupLines: false, hasPopOver: false }}>
               <Popover.Content
                 aria-label="Group details"
@@ -96,8 +96,8 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => {
               </Popover.Content>
             </BaseMenuContext.Provider>
           </Popover.Portal>
-        </Popover.Root>
-      )}
+        )}
+      </Popover.Root>
       <div id={`${navigationTreeId}-portal`} style={{ position: "absolute" }} />
     </>
   ) : (

packages/lib/src/dropdown/Dropdown.tsx

@@ -256,56 +256,56 @@ const DxcDropdown = ({
 
   return (
     <>
-      {portalContainer && (
-        <DropdownContainer
-          onMouseEnter={!disabled && expandOnHover ? handleOnOpenMenu : undefined}
-          onMouseLeave={!disabled && expandOnHover ? handleOnCloseMenu : undefined}
-          onBlur={!disabled ? handleOnBlur : undefined}
-          margin={margin}
-          size={size}
-        >
-          <Popover.Root open={isOpen}>
-            <Tooltip label={title}>
-              <Popover.Trigger asChild type={undefined}>
-                <DropdownTrigger
-                  onClick={handleTriggerOnClick}
-                  onKeyDown={handleTriggerOnKeyDown}
-                  onBlur={(event) => {
-                    event.stopPropagation();
-                  }}
-                  disabled={disabled}
-                  label={label}
-                  margin={margin}
-                  size={size}
-                  id={triggerId}
-                  aria-haspopup="true"
-                  aria-controls={isOpen ? menuId : undefined}
-                  aria-expanded={isOpen ? true : undefined}
-                  aria-label="Show options"
-                  tabIndex={tabIndex}
-                  ref={triggerRef}
-                >
-                  <DropdownTriggerContent iconPosition={iconPosition}>
-                    {icon && (
-                      <DropdownTriggerIcon
-                        disabled={disabled}
-                        role={typeof icon === "string" ? undefined : "img"}
-                        aria-hidden
-                      >
-                        {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
-                      </DropdownTriggerIcon>
-                    )}
-                    {label && <DropdownTriggerLabel>{label}</DropdownTriggerLabel>}
-                  </DropdownTriggerContent>
-                  {!caretHidden && (
-                    <CaretIcon disabled={disabled}>
-                      <DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} />
-                    </CaretIcon>
+      <DropdownContainer
+        onMouseEnter={!disabled && expandOnHover ? handleOnOpenMenu : undefined}
+        onMouseLeave={!disabled && expandOnHover ? handleOnCloseMenu : undefined}
+        onBlur={!disabled ? handleOnBlur : undefined}
+        margin={margin}
+        size={size}
+      >
+        <Popover.Root open={isOpen}>
+          <Tooltip label={title}>
+            <Popover.Trigger asChild type={undefined}>
+              <DropdownTrigger
+                onClick={handleTriggerOnClick}
+                onKeyDown={handleTriggerOnKeyDown}
+                onBlur={(event) => {
+                  event.stopPropagation();
+                }}
+                disabled={disabled}
+                label={label}
+                margin={margin}
+                size={size}
+                id={triggerId}
+                aria-haspopup="true"
+                aria-controls={isOpen ? menuId : undefined}
+                aria-expanded={isOpen ? true : undefined}
+                aria-label="Show options"
+                tabIndex={tabIndex}
+                ref={triggerRef}
+              >
+                <DropdownTriggerContent iconPosition={iconPosition}>
+                  {icon && (
+                    <DropdownTriggerIcon
+                      disabled={disabled}
+                      role={typeof icon === "string" ? undefined : "img"}
+                      aria-hidden
+                    >
+                      {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
+                    </DropdownTriggerIcon>
                   )}
-                </DropdownTrigger>
-              </Popover.Trigger>
-            </Tooltip>
-            <Popover.Portal container={document.getElementById(`${id}-portal`)}>
+                  {label && <DropdownTriggerLabel>{label}</DropdownTriggerLabel>}
+                </DropdownTriggerContent>
+                {!caretHidden && (
+                  <CaretIcon disabled={disabled}>
+                    <DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} />
+                  </CaretIcon>
+                )}
+              </DropdownTrigger>
+            </Popover.Trigger>
+          </Tooltip>
+          {portalContainer && (
+            <Popover.Portal container={portalContainer}>
               <Popover.Content aria-label="Dropdown options" asChild sideOffset={1}>
                 <DropdownMenu
                   id={menuId}
@@ -320,9 +320,10 @@ const DxcDropdown = ({
                 />
               </Popover.Content>
             </Popover.Portal>
-          </Popover.Root>
-        </DropdownContainer>
-      )}
+          )}
+        </Popover.Root>
+      </DropdownContainer>
+
       <div id={`${id}-portal`} style={{ position: "absolute" }} />
     </>
   );

packages/lib/src/toast/ToastsQueue.tsx

@@ -65,7 +65,7 @@ export default function DxcToastsQueue({ children, duration = 3000 }: ToastsQueu
               />
             ))}
           </ToastsQueue>,
-          document.getElementById(`toasts-${id}-portal`) || document.body
+          portalContainer || document.body
         )}
       {children}
     </ToastContext.Provider>