🐛 Datepicker og Monthpicker lukker nå popover ved escape

.changeset/nine-years-walk.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+:bug: floating-ui sendte ikke escape-events opp gjennom dom-treet

@navikt/core/react/src/date/datepicker/DatePicker.tsx

@@ -114,6 +114,11 @@ export interface DatePickerDefaultProps
    * @default "absolute"
    */
   strategy?: "absolute" | "fixed";
+  /**
+   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
+   * @default false
+   */
+  bubbleEscape?: boolean;
 }
 
 export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
@@ -180,6 +185,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       onClose,
       onOpenToggle,
       strategy = "absolute",
+      bubbleEscape = false,
       ...rest
     },
     ref
@@ -251,6 +257,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               role="dialog"
               ref={ref}
               strategy={strategy}
+              bubbleEscape={bubbleEscape}
             >
               <DayPicker
                 locale={getLocaleFromString(locale)}

@navikt/core/react/src/date/hooks/useDatepicker.tsx

@@ -319,6 +319,7 @@ export const useDatepicker = (
     onOpenToggle: () => handleOpen(!open),
     disabled,
     disableWeekends,
+    bubbleEscape: true,
     ref: setDaypickerRef,
   };
 

@navikt/core/react/src/date/hooks/useMonthPicker.tsx

@@ -312,6 +312,7 @@ export const useMonthpicker = (
     open,
     onOpenToggle: () => handleOpen(!open),
     disabled,
+    bubbleEscape: true,
     ref: setMonthpickerRef,
   };
 

@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx

@@ -544,6 +544,7 @@ export const useRangeDatepicker = (
     onOpenToggle: () => setOpen((x) => !x),
     disabled,
     disableWeekends,
+    bubbleEscape: true,
     ref: setDaypickerRef,
   };
 

@navikt/core/react/src/date/monthpicker/MonthPicker.tsx

@@ -86,6 +86,11 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default "absolute"
    */
   strategy?: "absolute" | "fixed";
+  /**
+   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
+   * @default false
+   */
+  bubbleEscape?: boolean;
 }
 
 interface MonthPickerComponent
@@ -153,6 +158,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
       year,
       onYearChange,
       strategy = "absolute",
+      bubbleEscape = false,
     },
     ref
   ) => {
@@ -204,6 +210,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
               id={ariaId}
               className="navds-date"
               strategy={strategy}
+              bubbleEscape={bubbleEscape}
             >
               <RootProvider
                 locale={getLocaleFromString(locale)}

@navikt/core/react/src/popover/Popover.tsx

@@ -72,6 +72,11 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    * @default "absolute"
    */
   strategy?: "absolute" | "fixed";
+  /**
+   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
+   * @default false
+   */
+  bubbleEscape?: boolean;
 }
 
 interface PopoverComponent
@@ -113,6 +118,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       placement = "top",
       offset,
       strategy: userStrategy = "absolute",
+      bubbleEscape = false,
       ...rest
     },
     ref
@@ -143,7 +149,11 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
 
     const { getFloatingProps } = useInteractions([
       useClick(context),
-      useDismiss(context),
+      useDismiss(context, {
+        bubbles: {
+          escapeKey: bubbleEscape,
+        },
+      }),
     ]);
 
     useClientLayoutEffect(() => {

yarn.lock

@@ -3741,7 +3741,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^4.1.3, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^4.1.4, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3768,8 +3768,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^4.1.3
-    "@navikt/ds-tokens": ^4.1.3
+    "@navikt/ds-css": ^4.1.4
+    "@navikt/ds-tokens": ^4.1.4
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3786,7 +3786,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 4.1.3
+    "@navikt/ds-css": 4.1.4
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3810,11 +3810,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/[email protected].3, @navikt/ds-css@^4.1.3, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/[email protected].4, @navikt/ds-css@^4.1.4, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^4.1.3
+    "@navikt/ds-tokens": ^4.1.4
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3827,12 +3827,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/[email protected].3, @navikt/ds-react@^4.1.3, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/[email protected].4, @navikt/ds-react@^4.1.4, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.24.1
-    "@navikt/aksel-icons": ^4.1.3
+    "@navikt/aksel-icons": ^4.1.4
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3868,11 +3868,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^4.1.3, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^4.1.4, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^4.1.3
+    "@navikt/ds-tokens": ^4.1.4
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3883,7 +3883,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^4.1.3, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^4.1.4, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -7918,11 +7918,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^4.1.3
-    "@navikt/ds-css": ^4.1.3
-    "@navikt/ds-react": ^4.1.3
-    "@navikt/ds-tailwind": ^4.1.3
-    "@navikt/ds-tokens": ^4.1.3
+    "@navikt/aksel-icons": ^4.1.4
+    "@navikt/ds-css": ^4.1.4
+    "@navikt/ds-react": ^4.1.4
+    "@navikt/ds-tailwind": ^4.1.4
+    "@navikt/ds-tokens": ^4.1.4
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -22312,8 +22312,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 4.1.3
-    "@navikt/ds-react": 4.1.3
+    "@navikt/ds-css": 4.1.4
+    "@navikt/ds-react": 4.1.4
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^2.1.0