From a011bfa1b61db3b6dfe3dce4a117e3f3a839c0e1 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Mon, 20 Sep 2021 15:50:08 -0500
Subject: [PATCH 1/2] fix(datepicker): pass through flatpickr inline prop

---
 .../src/components/DatePicker/DatePicker.js   | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js
index 06228336c3fc..fca7bf6ee627 100644
--- a/packages/react/src/components/DatePicker/DatePicker.js
+++ b/packages/react/src/components/DatePicker/DatePicker.js
@@ -309,6 +309,7 @@ export default class DatePicker extends Component {
       onClose,
       disable,
       enable,
+      ...rest
     } = this.props;
     if (datePickerType === 'single' || datePickerType === 'range') {
       const onHook = (electedDates, dateStr, instance) => {
@@ -338,6 +339,7 @@ export default class DatePicker extends Component {
       // inputField ref might not be set in enzyme tests
       if (this.inputField) {
         this.cal = new flatpickr(this.inputField, {
+          inline: rest.inline ?? false,
           disableMobile: true,
           defaultDate: value,
           mode: datePickerType,
@@ -404,8 +406,17 @@ export default class DatePicker extends Component {
     value: prevValue,
     disable: prevDisable,
     enable: prevEnable,
+    ...prevRest
   }) {
-    const { dateFormat, minDate, maxDate, value, disable, enable } = this.props;
+    const {
+      dateFormat,
+      minDate,
+      maxDate,
+      value,
+      disable,
+      enable,
+      ...rest
+    } = this.props;
     if (this.cal) {
       if (prevDateFormat !== dateFormat) {
         this.cal.set({ dateFormat });
@@ -422,6 +433,9 @@ export default class DatePicker extends Component {
       if (enable !== prevEnable) {
         this.cal.set('enable', enable);
       }
+      if (rest.inline && rest.inline !== prevRest?.inline) {
+        this.cal.set('inline', rest.inline);
+      }
     }
 
     // Coordinate when the given `value` prop changes. When this happens, we
@@ -605,7 +619,7 @@ export default class DatePicker extends Component {
       onChange, // eslint-disable-line
       locale, // eslint-disable-line
       value, // eslint-disable-line
-      ...other
+      ...rest
     } = this.props;
 
     const scope = this.context;
@@ -668,7 +682,7 @@ export default class DatePicker extends Component {
     });
     return (
       <div className={wrapperClasses}>
-        <div className={datePickerClasses} {...other}>
+        <div className={datePickerClasses} {...rest}>
           {childrenWithProps}
         </div>
       </div>

From bbd3e263029add013454a0c3b65d4638e03d9b86 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Tue, 21 Sep 2021 13:10:16 -0500
Subject: [PATCH 2/2] fix(datepicker): ensure inline is not spread onto div

---
 packages/react/src/components/DatePicker/DatePicker.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js
index fca7bf6ee627..43a183939dd5 100644
--- a/packages/react/src/components/DatePicker/DatePicker.js
+++ b/packages/react/src/components/DatePicker/DatePicker.js
@@ -619,6 +619,7 @@ export default class DatePicker extends Component {
       onChange, // eslint-disable-line
       locale, // eslint-disable-line
       value, // eslint-disable-line
+      inline, // eslint-disable-line
       ...rest
     } = this.props;