Updates DatePicker style so helper text does not shift

CHANGELOG.md

@@ -22,6 +22,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Updates the following components to accept `JSX.Element` type values into their `"headingText"` prop: `AlphabetFilter`, `AudioPlayer`, `ComponentWrapper`, `SearchBar`, `VideoPlayer`
 - Updates the `Notification` component to accept `JSX.Element` type values into its `"notificationHeading"` prop.
 - Updates the `StructuredContent` component to accept `JSX.Element` type values into its `"headingText"` and `"calloutText"` props.
+- Adds z-index to the `DatePicker`'s calendar container so that the helper text does not shift when the calendar opens.
 
 ## Fixes
 

src/components/DatePicker/DatePicker.mdx

@@ -10,10 +10,10 @@ import Table from "../Table/Table";
 
 # DatePicker
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.24.0`   |
-| Latest            | `2.1.1`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.24.0`     |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

src/components/DatePicker/_DatePicker.scss

@@ -1,4 +1,10 @@
 // Styles needed to override `react-datepicker` plugin styles.
+.react-datepicker__tab-loop {
+  // Prevents the calendar from shifting any elements below it.
+  position: absolute;
+  z-index: 1000;
+}
+
 .date-picker-calendar {
   font-family: var(--nypl-fonts-body);
 

src/components/DatePicker/datePickerChangelogData.ts

@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "2023-11-28",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Adds z-index to calendar container so that helper text does not shift when calendar opens.",
+    ],
+  },
   {
     date: "2023-10-26",
     version: "2.1.1",