dxc-technology · Mil4n0r · Feb 26, 2026 · Feb 19, 2026 · Feb 19, 2026 · Feb 20, 2026
diff --git a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
@@ -188,6 +188,21 @@ const sections = [
               <TableCode>false</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                size
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>'medium' | 'fillParent'</TableCode>
+            </td>
+            <td>Size of the component.</td>
+            <td>
+              <TableCode>'medium'</TableCode>
+            </td>
+          </tr>
           <tr>
             <td>tabIndex</td>
             <td>

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lib/src/base-menu/GroupItem.tsx b/packages/lib/src/base-menu/GroupItem.tsx
@@ -1,4 +1,4 @@
-import { useContext, useId } from "react";
+import { useContext, useEffect, useId, useState } from "react";
 import DxcIcon from "../icon/Icon";
 import SubMenu from "./SubMenu";
 import ItemAction from "./ItemAction";
@@ -10,14 +10,17 @@ import BaseMenuContext from "./BaseMenuContext";
 
 const GroupItem = ({ items, ...props }: GroupItemProps) => {
   const groupMenuId = `group-menu-${useId()}`;
-
-  const NavigationTreeId = `sidenav-${useId()}`;
+  const navigationTreeId = `sidenav-${useId()}`;
   const contextValue = useContext(BaseMenuContext) ?? {};
   const { groupSelected, isOpen, toggleOpen, hasPopOver, isHorizontal } = useGroupItem(
     items,
     contextValue,
     props.defaultOpen
   );
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  useEffect(() => {
+    setPortalContainer(document?.getElementById(`${navigationTreeId}-portal`));
+  }, []);
 
   return hasPopOver ? (
     <>
@@ -38,60 +41,64 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => {
             {...props}
           />
         </Popover.Trigger>
-        <Popover.Portal container={document.getElementById(`${NavigationTreeId}-portal`)}>
-          <BaseMenuContext.Provider value={{ ...contextValue, displayGroupLines: false, hasPopOver: false }}>
-            <Popover.Content
-              aria-label="Group details"
-              onKeyDown={(event) => {
-                if (event.key === "Escape") {
-                  toggleOpen();
-                }
-              }}
-              align="start"
-              side={isHorizontal ? "bottom" : "right"}
-              style={{
-                zIndex: "var(--z-contextualmenu)",
-                padding: "var(--spacing-padding-xs)",
-                boxShadow: "var(--shadow-100)",
-                backgroundColor: "var(--color-bg-neutral-lightest)",
-                borderRadius: "var(--border-radius-m)",
-                ...(isHorizontal
-                  ? {}
-                  : {
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "var(--spacing-gap-xxs)",
-                    }),
-              }}
-              sideOffset={isHorizontal ? 16 : 0}
-              onInteractOutside={() => toggleOpen()}
-            >
-              {!isHorizontal && props.depthLevel === 0 && (
-                <ItemAction
-                  aria-controls={isOpen ? groupMenuId : undefined}
-                  aria-expanded={isOpen ? true : undefined}
-                  aria-pressed={groupSelected && !isOpen}
-                  collapseIcon={isOpen ? <DxcIcon icon="filled_expand_less" /> : <DxcIcon icon="filled_expand_more" />}
-                  onClick={() => toggleOpen()}
-                  selected={groupSelected && !isOpen}
-                  {...props}
-                  icon={undefined}
-                />
-              )}
-              <SubMenu id={groupMenuId} depthLevel={props.depthLevel} isPopOver={true}>
-                {items.map((item, index) => (
-                  <MenuItem
-                    item={item}
-                    depthLevel={isHorizontal ? props.depthLevel : props.depthLevel + 1}
-                    key={`${item.label}-${index}`}
+        {portalContainer && (
+          <Popover.Portal container={portalContainer}>
+            <BaseMenuContext.Provider value={{ ...contextValue, displayGroupLines: false, hasPopOver: false }}>
+              <Popover.Content
+                aria-label="Group details"
+                onKeyDown={(event) => {
+                  if (event.key === "Escape") {
+                    toggleOpen();
+                  }
+                }}
+                align="start"
+                side={isHorizontal ? "bottom" : "right"}
+                style={{
+                  zIndex: "var(--z-contextualmenu)",
+                  padding: "var(--spacing-padding-xs)",
+                  boxShadow: "var(--shadow-100)",
+                  backgroundColor: "var(--color-bg-neutral-lightest)",
+                  borderRadius: "var(--border-radius-m)",
+                  ...(isHorizontal
+                    ? {}
+                    : {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "var(--spacing-gap-xxs)",
+                      }),
+                }}
+                sideOffset={isHorizontal ? 16 : 0}
+                onInteractOutside={() => toggleOpen()}
+              >
+                {!isHorizontal && props.depthLevel === 0 && (
+                  <ItemAction
+                    aria-controls={isOpen ? groupMenuId : undefined}
+                    aria-expanded={isOpen ? true : undefined}
+                    aria-pressed={groupSelected && !isOpen}
+                    collapseIcon={
+                      isOpen ? <DxcIcon icon="filled_expand_less" /> : <DxcIcon icon="filled_expand_more" />
+                    }
+                    onClick={() => toggleOpen()}
+                    selected={groupSelected && !isOpen}
+                    {...props}
+                    icon={undefined}
                   />
-                ))}
-              </SubMenu>
-            </Popover.Content>
-          </BaseMenuContext.Provider>
-        </Popover.Portal>
+                )}
+                <SubMenu id={groupMenuId} depthLevel={props.depthLevel} isPopOver={true}>
+                  {items.map((item, index) => (
+                    <MenuItem
+                      item={item}
+                      depthLevel={isHorizontal ? props.depthLevel : props.depthLevel + 1}
+                      key={`${item.label}-${index}`}
+                    />
+                  ))}
+                </SubMenu>
+              </Popover.Content>
+            </BaseMenuContext.Provider>
+          </Popover.Portal>
+        )}
       </Popover.Root>
-      <div id={`${NavigationTreeId}-portal`} style={{ position: "absolute" }} />
+      <div id={`${navigationTreeId}-portal`} style={{ position: "absolute" }} />
     </>
   ) : (
     <>

diff --git a/packages/lib/src/date-input/DateInput.tsx b/packages/lib/src/date-input/DateInput.tsx
@@ -150,6 +150,8 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
         : null
     );
     const [sideOffset, setSideOffset] = useState(SIDEOFFSET);
+    const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+
     const translatedLabels = useContext(HalstackLanguageContext);
     const dateRef = useRef<HTMLDivElement | null>(null);
     const popoverContentRef = useRef<HTMLDivElement | null>(null);
@@ -258,6 +260,9 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
         closeCalendar();
       }
     };
+    useEffect(() => {
+      setPortalContainer(document?.getElementById(`${calendarId}-portal`));
+    }, []);
 
     useEffect(() => {
       window.addEventListener("scroll", adjustSideOffset);
@@ -327,20 +332,23 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
                 ariaLabel={ariaLabel}
               />
             </Popover.Trigger>
-            <Popover.Portal container={document.getElementById(`${calendarId}-portal`)}>
-              <StyledPopoverContent
-                sideOffset={sideOffset}
-                align="end"
-                aria-modal
-                onBlur={handleDatePickerOnBlur}
-                onKeyDown={handleDatePickerEscKeydown}
-                ref={popoverContentRef}
-              >
-                <DatePicker id={calendarId} onDateSelect={handleCalendarOnClick} date={dayjsDate} />
-              </StyledPopoverContent>
-            </Popover.Portal>
+            {portalContainer && (
+              <Popover.Portal container={portalContainer}>
+                <StyledPopoverContent
+                  sideOffset={sideOffset}
+                  align="end"
+                  aria-modal
+                  onBlur={handleDatePickerOnBlur}
+                  onKeyDown={handleDatePickerEscKeydown}
+                  ref={popoverContentRef}
+                >
+                  <DatePicker id={calendarId} onDateSelect={handleCalendarOnClick} date={dayjsDate} />
+                </StyledPopoverContent>
+              </Popover.Portal>
+            )}
           </Popover.Root>
         </DateInputContainer>
+
         <div id={`${calendarId}-portal`} style={{ position: "absolute" }} />
       </>
     );

diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import * as Popover from "@radix-ui/react-popover";
-import { FocusEvent, KeyboardEvent, useCallback, useId, useLayoutEffect, useRef, useState } from "react";
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import { getMargin } from "../common/utils";
 import { spaces } from "../common/variables";
@@ -131,6 +131,10 @@ const DxcDropdown = ({
   const menuId = `menu-${id}`;
   const [isOpen, changeIsOpen] = useState(false);
   const [visualFocusIndex, setVisualFocusIndex] = useState(0);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  useEffect(() => {
+    setPortalContainer(document?.getElementById(`${id}-portal`));
+  }, []);
 
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const menuRef = useRef<HTMLUListElement | null>(null);
@@ -300,23 +304,26 @@ const DxcDropdown = ({
               </DropdownTrigger>
             </Popover.Trigger>
           </Tooltip>
-          <Popover.Portal container={document.getElementById(`${id}-portal`)}>
-            <Popover.Content aria-label="Dropdown options" asChild sideOffset={1}>
-              <DropdownMenu
-                id={menuId}
-                dropdownTriggerId={triggerId}
-                options={options}
-                iconsPosition={optionsIconPosition}
-                visualFocusIndex={visualFocusIndex}
-                menuItemOnClick={handleMenuItemOnClick}
-                onKeyDown={handleMenuOnKeyDown}
-                styles={{ width }}
-                ref={menuRef}
-              />
-            </Popover.Content>
-          </Popover.Portal>
+          {portalContainer && (
+            <Popover.Portal container={portalContainer}>
+              <Popover.Content aria-label="Dropdown options" asChild sideOffset={1}>
+                <DropdownMenu
+                  id={menuId}
+                  dropdownTriggerId={triggerId}
+                  options={options}
+                  iconsPosition={optionsIconPosition}
+                  visualFocusIndex={visualFocusIndex}
+                  menuItemOnClick={handleMenuItemOnClick}
+                  onKeyDown={handleMenuOnKeyDown}
+                  styles={{ width }}
+                  ref={menuRef}
+                />
+              </Popover.Content>
+            </Popover.Portal>
+          )}
         </Popover.Root>
       </DropdownContainer>
+
       <div id={`${id}-portal`} style={{ position: "absolute" }} />
     </>
   );

diff --git a/packages/lib/src/file-input/FileInput.stories.tsx b/packages/lib/src/file-input/FileInput.stories.tsx
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from "@storybook/react-vite";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import Title from "../../.storybook/components/Title";
 import DxcFileInput from "./FileInput";
+import DxcContainer from "../container/Container";
 
 export default {
   title: "File Input",
@@ -510,6 +511,33 @@ const FileInput = () => (
         margin="xxlarge"
       />
     </ExampleContainer>
+    <Title title="Sizes" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="fillParent size" theme="light" level={4} />
+      <DxcContainer width="200px">
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          value={fileExample}
+          callbackFile={() => {}}
+          mode="filedrop"
+          size="fillParent"
+        />
+      </DxcContainer>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="fillParent size" theme="light" level={4} />
+      <DxcContainer width="200px">
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          value={fileExample}
+          callbackFile={() => {}}
+          mode="dropzone"
+          size="fillParent"
+        />
+      </DxcContainer>
+    </ExampleContainer>
   </>
 );
 // const EllipsisError = () => {