Merge pull request #3964 from Royal-Navy/fix/date-picker-strict-mode

fix(DatePicker): Fix compatibility with strict mode
Royal-Navy · Nov 22, 2024 · 6101069 · 6101069
2 parents 27ed2be + b5c1b3f
commit 6101069
Show file tree

Hide file tree

Showing 6 changed files with 3,372 additions and 8,783 deletions.
diff --git a/packages/react-component-library/package.json b/packages/react-component-library/package.json
@@ -173,8 +173,8 @@
     "date-fns": "^2.9.0",
     "decimal.js": "^10.3.1",
     "downshift": "^6.1.12",
-    "focus-trap": "^6.9.0",
-    "focus-trap-react": "^8.11.0",
+    "focus-trap": "^7.6.2",
+    "focus-trap-react": "^10.3.1",
     "lodash": "^4.17.21",
     "polished": "^4.0.3",
     "react-compound-slider": "^3.3.1",

diff --git a/packages/react-component-library/src/components/DatePicker/Input.tsx b/packages/react-component-library/src/components/DatePicker/Input.tsx
@@ -120,9 +120,15 @@ export const Input = memo(
 
     const handleInputClick = useCallback(() => {
       if (isRange) {
-        dispatch({ type: DATEPICKER_ACTION.TOGGLE_OPEN })
+        dispatch({
+          type: DATEPICKER_ACTION.UPDATE,
+          data: {
+            calendarTableVariant: CALENDAR_TABLE_VARIANT.HIDE,
+            isOpen: !isOpen,
+          },
+        })
       }
-    }, [isRange, dispatch])
+    }, [isOpen, isRange, dispatch])
 
     const handleShowHideClick = useCallback(() => {
       dispatch({

diff --git a/packages/react-component-library/src/components/DatePicker/types.ts b/packages/react-component-library/src/components/DatePicker/types.ts
@@ -16,7 +16,6 @@ export const DATEPICKER_ACTION = {
   UPDATE: 'UPDATE',
   REFRESH_HAS_ERROR: 'REFRESH_HAS_ERROR',
   REFRESH_INPUT_VALUE: 'REFRESH_INPUT_VALUE',
-  TOGGLE_OPEN: 'TOGGLE_OPEN',
 } as const
 
 interface ResetAction {
@@ -39,14 +38,8 @@ interface RefreshInputValueAction {
   data?: never
 }
 
-interface ToggleOpenAction {
-  type: typeof DATEPICKER_ACTION.TOGGLE_OPEN
-  data?: never
-}
-
 export type DatePickerAction =
   | ResetAction
   | UpdateAction
   | RefreshHasErrorAction
   | RefreshInputValueAction
-  | ToggleOpenAction
diff --git a/packages/react-component-library/src/components/DatePicker/useDatePickerContext.tsx b/packages/react-component-library/src/components/DatePicker/useDatePickerContext.tsx
@@ -81,11 +81,6 @@ function reducer(
           state.datePickerFormat
         ),
       }
-    case DATEPICKER_ACTION.TOGGLE_OPEN:
-      return {
-        ...state,
-        isOpen: !state.isOpen,
-      }
     default:
       throw new Error('Unknown reducer action type')
   }

diff --git a/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts b/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts
@@ -19,10 +19,21 @@ export function useFocusTrapOptions(
     () => ({
       allowOutsideClick: (event) =>
         isEventTargetDescendantOf(event, clickAllowedElementRefs),
-      clickOutsideDeactivates: (event) =>
-        !isEventTargetDescendantOf(event, clickAllowedElementRefs),
+      clickOutsideDeactivates: (event) => {
+        const shouldDeactivate = !isEventTargetDescendantOf(
+          event,
+          clickAllowedElementRefs
+        )
+        if (shouldDeactivate) {
+          close()
+        }
+        return shouldDeactivate
+      },
+      escapeDeactivates: () => {
+        close()
+        return true
+      },
       initialFocus: false,
-      onDeactivate: close,
     }),
     [clickAllowedElementRefs, close]
   )