fix(popover-container): prevent DatePicker from rendering behind the popover

src/components/date/__internal__/date-picker/day-picker.style.ts

@@ -305,7 +305,7 @@ const StyledDayPicker = styled.div`
   ${officialReactDayPickerStyling}
 
   .rdp-root {
-    z-index: 1000;
+    z-index: 2000;
     top: calc(100% + 1px);
     left: 0;
     background-color: var(--colorsUtilityYang100);

src/components/popover-container/popover-container-test.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Button from "../button";
 import Box from "../box";
 import PopoverContainer, {
@@ -12,6 +12,21 @@ import Search from "../search";
 import IconButton from "../icon-button";
 import Icon from "../icon";
 import RadioButton, { RadioButtonGroup } from "../radio-button";
+import {
+  FlatTable,
+  FlatTableHead,
+  FlatTableBody,
+  FlatTableRow,
+  FlatTableHeader,
+  FlatTableRowHeader,
+  FlatTableCell,
+  FlatTableCheckbox,
+} from "../flat-table";
+import Dialog from "../dialog";
+import Form from "../form";
+import DateRange, { DateRangeChangeEvent } from "../date-range";
+import DateInput, { DateChangeEvent } from "../date";
+import isChromatic from "../../../.storybook/isChromatic";
 
 export default {
   title: "Popover Container/Test",
@@ -24,15 +39,20 @@ export default {
     "InsideMenuWithOpenButton",
     "WithFullWidthButton",
     "WithRadioButtons",
+    "WithDateRange",
+    "InsideDialog",
   ],
   parameters: {
     info: { disable: true },
     chromatic: {
       disableSnapshot: true,
+      delay: 2000,
     },
   },
 };
 
+const defaultOpenState = isChromatic();
+
 export const Default = ({ ...args }: PopoverContainerProps) => (
   <PopoverContainer {...args} />
 );
@@ -277,3 +297,165 @@ export const WithRadioButtons = () => {
     </Box>
   );
 };
+
+export const WithDateRange = () => {
+  const [open, setOpen] = useState(defaultOpenState);
+  const [state, setState] = useState(["01/10/2016", "30/10/2016"]);
+  const handleChange = (ev: DateRangeChangeEvent) => {
+    const newValue = [
+      ev.target.value[0].formattedValue,
+      ev.target.value[1].formattedValue,
+    ];
+    setState(newValue);
+  };
+
+  return (
+    <Box width="100vw" height="100vh">
+      <PopoverContainer
+        open={open}
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        renderOpenComponent={({ ref, ...rest }) => (
+          <Button
+            iconPosition="after"
+            iconType="filter_new"
+            ref={ref}
+            {...rest}
+          >
+            Filter
+          </Button>
+        )}
+        title="Should render over sticky column"
+      >
+        <Box height="200px">
+          <DateRange
+            mt={2}
+            startLabel="Disabled Portal"
+            endLabel="In Portal"
+            onChange={handleChange}
+            value={state}
+            startDateProps={{ disablePortal: true }}
+          />
+        </Box>
+      </PopoverContainer>
+      <FlatTable my={2} width="380px" overflowX="auto" title="FlatTable">
+        <FlatTableHead>
+          <FlatTableRow>
+            <FlatTableHeader>Select</FlatTableHeader>
+            <FlatTableRowHeader>Name</FlatTableRowHeader>
+            <FlatTableHeader>Location</FlatTableHeader>
+            <FlatTableHeader>Relationship Status</FlatTableHeader>
+          </FlatTableRow>
+        </FlatTableHead>
+        <FlatTableBody>
+          <FlatTableRow>
+            <FlatTableCheckbox ariaLabelledBy="ft-row-1-cell-1 ft-row-1-cell-2 ft-row-1-cell-3" />
+            <FlatTableRowHeader id="ft-row-1-cell-1">
+              John Doe
+            </FlatTableRowHeader>
+            <FlatTableCell id="ft-row-1-cell-2">London</FlatTableCell>
+            <FlatTableCell id="ft-row-1-cell-3">Single</FlatTableCell>
+          </FlatTableRow>
+          <FlatTableRow>
+            <FlatTableCheckbox ariaLabelledBy="ft-row-2-cell-1 ft-row-2-cell-2 ft-row-2-cell-3" />
+            <FlatTableRowHeader id="ft-row-2-cell-1">
+              Jane Doe
+            </FlatTableRowHeader>
+            <FlatTableCell id="ft-row-2-cell-2">York</FlatTableCell>
+            <FlatTableCell id="ft-row-2-cell-3">Married</FlatTableCell>
+          </FlatTableRow>
+        </FlatTableBody>
+      </FlatTable>
+    </Box>
+  );
+};
+WithDateRange.parameters = {
+  chromatic: { disableSnapshot: false },
+  themeProvider: { chromatic: { theme: "sage" } },
+};
+
+export const InsideDialog = () => {
+  const [open, setOpen] = useState(defaultOpenState);
+  const [openPopover, setOpenPopover] = useState(false);
+  const [dateRangeValue, setDateRangeValue] = useState([
+    "01/10/2016",
+    "30/10/2016",
+  ]);
+  const [dateValue, setDateValue] = useState("04/04/2019");
+
+  const handleDateRange = (ev: DateRangeChangeEvent) => {
+    const newValue = [
+      ev.target.value[0].formattedValue,
+      ev.target.value[1].formattedValue,
+    ];
+    setDateRangeValue(newValue);
+  };
+
+  const handleDate = (ev: DateChangeEvent) => {
+    setDateValue(ev.target.value.formattedValue);
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      setOpenPopover(defaultOpenState);
+    }, 1000);
+  }, []);
+
+  return (
+    <Box width="100vw" height="100vh">
+      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+      <Dialog open={open} title="Dialog with PopoverContainer">
+        <Form
+          stickyFooter
+          leftSideButtons={
+            <Button onClick={() => setOpen(false)}>Cancel</Button>
+          }
+          saveButton={
+            <Button buttonType="primary" type="submit">
+              Save
+            </Button>
+          }
+        >
+          <Box height="250px">
+            <PopoverContainer
+              open={openPopover}
+              onClose={() => setOpenPopover(false)}
+              onOpen={() => setOpenPopover(true)}
+              renderOpenComponent={({ ref, ...rest }) => (
+                <Button
+                  iconPosition="after"
+                  iconType="filter_new"
+                  ref={ref}
+                  {...rest}
+                >
+                  Filter
+                </Button>
+              )}
+            >
+              <Box height="200px">
+                <DateRange
+                  mt={2}
+                  startLabel="Disabled Portal"
+                  endLabel="In Portal"
+                  onChange={handleDateRange}
+                  value={dateRangeValue}
+                  startDateProps={{ disablePortal: true }}
+                />
+              </Box>
+            </PopoverContainer>
+            <DateInput
+              label="Date"
+              name="date-input"
+              value={dateValue}
+              onChange={handleDate}
+            />
+          </Box>
+        </Form>
+      </Dialog>
+    </Box>
+  );
+};
+InsideDialog.parameters = {
+  chromatic: { disableSnapshot: false },
+  themeProvider: { chromatic: { theme: "sage" } },
+};

src/components/popover-container/popover-container.style.ts

@@ -32,7 +32,7 @@ const PopoverContainerContentStyle = styled.div<PopoverContainerContentStyleProp
   box-shadow: var(--boxShadow100);
   min-width: 300px;
   position: absolute;
-  z-index: ${({ theme }) => theme.zIndex.popover};
+  z-index: 2000;
 
   ${({ disableAnimation }) =>
     disableAnimation