diff --git a/.changeset/nine-years-walk.md b/.changeset/nine-years-walk.md new file mode 100644 index 0000000000..8da66ccebf --- /dev/null +++ b/.changeset/nine-years-walk.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +:bug: floating-ui sendte ikke escape-events opp gjennom dom-treet diff --git a/@navikt/core/react/src/date/datepicker/DatePicker.tsx b/@navikt/core/react/src/date/datepicker/DatePicker.tsx index 9f029c8c35..301f3c29da 100644 --- a/@navikt/core/react/src/date/datepicker/DatePicker.tsx +++ b/@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( onClose, onOpenToggle, strategy = "absolute", + bubbleEscape = false, ...rest }, ref @@ -251,6 +257,7 @@ export const DatePicker = forwardRef( role="dialog" ref={ref} strategy={strategy} + bubbleEscape={bubbleEscape} > handleOpen(!open), disabled, disableWeekends, + bubbleEscape: true, ref: setDaypickerRef, }; diff --git a/@navikt/core/react/src/date/hooks/useMonthPicker.tsx b/@navikt/core/react/src/date/hooks/useMonthPicker.tsx index 95f178f869..a4916c5c3e 100644 --- a/@navikt/core/react/src/date/hooks/useMonthPicker.tsx +++ b/@navikt/core/react/src/date/hooks/useMonthPicker.tsx @@ -312,6 +312,7 @@ export const useMonthpicker = ( open, onOpenToggle: () => handleOpen(!open), disabled, + bubbleEscape: true, ref: setMonthpickerRef, }; diff --git a/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx b/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx index 7afa162f7c..4d2afb58cb 100644 --- a/@navikt/core/react/src/date/hooks/useRangeDatepicker.tsx +++ b/@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, }; diff --git a/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx b/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx index 0828823e7c..8e1183357c 100644 --- a/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx +++ b/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx @@ -86,6 +86,11 @@ export interface MonthPickerProps extends React.HTMLAttributes { * @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( year, onYearChange, strategy = "absolute", + bubbleEscape = false, }, ref ) => { @@ -204,6 +210,7 @@ export const MonthPicker = forwardRef( id={ariaId} className="navds-date" strategy={strategy} + bubbleEscape={bubbleEscape} > { * @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( placement = "top", offset, strategy: userStrategy = "absolute", + bubbleEscape = false, ...rest }, ref @@ -143,7 +149,11 @@ export const Popover = forwardRef( const { getFloatingProps } = useInteractions([ useClick(context), - useDismiss(context), + useDismiss(context, { + bubbles: { + escapeKey: bubbleEscape, + }, + }), ]); useClientLayoutEffect(() => { diff --git a/yarn.lock b/yarn.lock index 3164994e56..44ffaa497c 100644 --- a/yarn.lock +++ b/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/ds-css@4.1.3, @navikt/ds-css@^4.1.3, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@*, @navikt/ds-css@4.1.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/ds-react@4.1.3, @navikt/ds-react@^4.1.3, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@*, @navikt/ds-react@4.1.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