[Datepicker/Modal] Datepicker bruker nå Modal på mobil og for nested …

…Modal (#2419) * 🎨 Initial Modal-update * 🐛 close(open handling for Modal * 🔥 Fjernet openOnFocus * 🔥 Fjernet outsideclick og useEscape * 🐛 monthpicker onClose forwarding * 🎨 Flyttet DateInput til egen parts-mappe * 🏷️ DateInput imports * 🚚 Flyttet DateWrapper ut til egen komponent * 🎨 Monthpicker bruker dateWrapper * 💄 Oppdatert styling for datepicker * 📝 Oppdatert eksempler * 📝 changeset * 🐛 Fikset imports i date-hooks * ♻️ Bedre context-bruk i Modal.tsx * 📝 Bedre tekster for deprecation * 🐛 Støtter nå jsdom * 🐛 Fikset polyfill av datepicker * 🎨 closeOnBackdropClick i datepicker * 🏷️ 🐛 Fikset outsideClick boundary + fjernet bubbleEscape-prop * 🔥 Fjernet console.log * 🔥 Fjernet bubbleEscape-prop * Update @navikt/core/react/src/date/hooks/useMonthPicker.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/date/datepicker/datepicker.stories.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🎨 Bedre className for nested modal * 🐛 Bedre check om popover er i datepicker * 🔥 Fjernet unødvendig if rundt window-check * 🎨 Bedre fallback for useMedia-hook * 🎨 bedre navn i useMedia * 📝 Datepicker-stories for size har preset-values * Update @navikt/core/react/src/date/hooks/useDatepicker.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🎨 DateContext er nå default null hvis ikke satt * Update @navikt/core/react/src/date/parts/DateWrapper.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/date/parts/DateWrapper.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/date/parts/DateWrapper.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/react/src/date/utils/labels.ts Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * 🐛 Fikset small-size padding * 🔥 Fjernet error-demo * fokusgreier * 🎨 bedre onClose-handling av modal * 🐛 Håndterer focus ved cancel og select nå * 🐛 Feil i typer for dateinput * 🐛 setAnchorRef var optional * 🐛 null-test * 🎨 Fjernet jsdom sjekk tester for useMedia --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>
navikt · Nov 1, 2023 · 51eee7f · 51eee7f
1 parent 909ae6a
commit 51eee7f
Show file tree

Hide file tree

Showing 27 changed files with 516 additions and 395 deletions.
diff --git a/.changeset/yellow-buckets-grab-copy-2.md b/.changeset/yellow-buckets-grab-copy-2.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+Datepicker/Monthpicker: Hvis man bruker komponentene i Modal vil Popover bli erstattet med Modal uansett om man er på desktop eller mobil.
diff --git a/.changeset/yellow-buckets-grab-copy-3.md b/.changeset/yellow-buckets-grab-copy-3.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+Datepicker/Monthpicker/Popover: Fjernet `bubbleEscape`-prop.
diff --git a/.changeset/yellow-buckets-grab-copy.md b/.changeset/yellow-buckets-grab-copy.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+useDatepicker/useMonthPicker/useRangedpicker: Fjernet `openOnFocus`-prop, kan nå bare åpnes ved klikk på date-knapp i input.
diff --git a/.changeset/yellow-buckets-grab.md b/.changeset/yellow-buckets-grab.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+Datepicker/Monthpicker: Bytter nå automatisk til Modalvisning på mobil.
diff --git a/@navikt/core/css/date.css b/@navikt/core/css/date.css
@@ -149,18 +149,6 @@
   width: fit-content;
 }
 
-/* Focus layering */
-.navds-date__field-input:focus-visible,
-.navds-date__field-button {
-  z-index: 1;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-date__field-input:focus {
-    z-index: 1;
-  }
-}
-
 .navds-date .rdp-day_selected,
 .navds-monthpicker__month--selected {
   color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -201,11 +189,11 @@
 }
 
 .navds-date__field-input {
-  padding-right: var(--a-spacing-14);
+  padding-right: var(--a-spacing-12);
 }
 
 .navds-form-field--small .navds-date__field-input {
-  padding-right: var(--a-spacing-10);
+  padding-right: var(--a-spacing-8);
 }
 
 /* Error-handling */
@@ -282,10 +270,6 @@
   pointer-events: none;
 }
 
-.navds-date__popover:where(.navds-popover) {
-  border: none;
-}
-
 /* Readonly */
 .navds-date__field--readonly .navds-date__field-button {
   cursor: default;
@@ -310,11 +294,35 @@
   margin: 0;
 }
 
+.navds-date__modal.navds-date {
+  padding: 0;
+}
+
+.navds-date__modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: var(--a-spacing-4);
+  gap: var(--a-spacing-2);
+}
+
+.navds-date__modal-body > .navds-date {
+  padding: 0;
+}
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
+
 @media (min-width: 480px) {
   .navds-date {
     padding: var(--a-spacing-5) var(--a-spacing-4);
   }
 
+  .navds-date__modal-body {
+    padding: var(--a-spacing-6);
+  }
+
   .navds-date__caption {
     gap: var(--a-spacing-2);
   }

diff --git a/@navikt/core/css/modal.css b/@navikt/core/css/modal.css
@@ -130,6 +130,14 @@
   margin-left: auto;
 }
 
+/* When Datepicker is used nested inside a Modal */
+.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
+  min-width: fit-content;
+  max-width: 100vw;
+  max-height: 100vh;
+  animation: none;
+}
+
 @keyframes akselModalFadeIn {
   from {
     opacity: 0;

diff --git a/@navikt/core/react/src/date/context/useDateInputContext.tsx b/@navikt/core/react/src/date/context/useDateInputContext.tsx
@@ -13,13 +13,13 @@ interface DateContextContextProps {
    * Aria-connected ID
    */
   ariaId?: string;
+  /**
+   * Flag for enabled-check
+   */
+  defined: boolean;
 }
 
-export const DateContext = createContext<DateContextContextProps>({
-  open: false,
-  onOpen: () => null,
-  ariaId: undefined,
-});
+export const DateContext = createContext<DateContextContextProps | null>(null);
 
 export const useDateInputContext = () => {
   const context = useContext(DateContext);

diff --git a/@navikt/core/react/src/date/datepicker/DatePicker.tsx b/@navikt/core/react/src/date/datepicker/DatePicker.tsx
@@ -1,11 +1,11 @@
 import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
-import { Popover } from "../../popover";
-import { omit, useId } from "../../util";
-import { DatePickerInput } from "../DateInput";
+import { mergeRefs, omit, useId } from "../../util";
 import { DateContext } from "../context";
+import { DatePickerInput } from "../parts/DateInput";
+import { DateWrapper } from "../parts/DateWrapper";
 import { getLocaleFromString, labels } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
@@ -79,7 +79,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       onClose,
       onOpenToggle,
       strategy,
-      bubbleEscape = false,
       onWeekNumberClick,
       ...rest
     },
@@ -89,6 +88,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const [open, setOpen] = useState(_open ?? false);
 
     const wrapperRef = useRef<HTMLDivElement | null>(null);
+    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);
 
     const [selectedDates, setSelectedDates] = React.useState<
       Date | Date[] | DateRange | undefined
@@ -110,6 +110,44 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       rest?.onSelect?.(newSelected);
     };
 
+    const DatePickerComponent = (
+      <DayPicker
+        locale={getLocaleFromString(locale)}
+        mode={mode}
+        onSelect={handleSelect}
+        selected={selected ?? selectedDates}
+        components={{
+          Caption: dropdownCaption ? DropdownCaption : Caption,
+          Head: TableHead,
+          HeadRow,
+          WeekNumber,
+          Row,
+          Day: DayButton,
+        }}
+        className={cl("navds-date", className)}
+        classNames={{
+          vhidden: "navds-sr-only",
+        }}
+        disabled={(day) => {
+          return (disableWeekends && isWeekend(day)) || isMatch(day, disabled);
+        }}
+        weekStartsOn={1}
+        initialFocus={false}
+        labels={labels as any}
+        modifiers={{
+          weekend: (day) => disableWeekends && isWeekend(day),
+        }}
+        modifiersClassNames={{
+          weekend: "rdp-day__weekend",
+        }}
+        showWeekNumber={showWeekNumber}
+        onWeekNumberClick={mode === "multiple" ? onWeekNumberClick : undefined}
+        fixedWeeks
+        showOutsideDays
+        {...omit(rest, ["onSelect"])}
+      />
+    );
+
     return (
       <DateContext.Provider
         value={{
@@ -119,72 +157,27 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
             onOpenToggle?.();
           },
           ariaId,
+          defined: true,
         }}
       >
         <div
-          ref={wrapperRef}
+          ref={mergedRef}
           className={cl("navds-date__wrapper", wrapperClassName)}
         >
           {children}
-          {(_open ?? open) && (
-            <Popover
-              arrow={false}
-              anchorEl={wrapperRef.current}
-              open={_open ?? open}
-              onClose={() => {
-                onClose?.() ?? setOpen(false);
-              }}
-              placement="bottom-start"
-              id={ariaId}
-              role="dialog"
-              ref={ref}
-              strategy={strategy}
-              className="navds-date__popover"
-              bubbleEscape={bubbleEscape}
-              flip={false}
-            >
-              <DayPicker
-                locale={getLocaleFromString(locale)}
-                mode={mode}
-                onSelect={handleSelect}
-                selected={selected ?? selectedDates}
-                components={{
-                  Caption: dropdownCaption ? DropdownCaption : Caption,
-                  Head: TableHead,
-                  HeadRow,
-                  WeekNumber,
-                  Row,
-                  Day: DayButton,
-                }}
-                className={cl("navds-date", className)}
-                classNames={{
-                  vhidden: "navds-sr-only",
-                }}
-                disabled={(day) => {
-                  return (
-                    (disableWeekends && isWeekend(day)) ||
-                    isMatch(day, disabled)
-                  );
-                }}
-                weekStartsOn={1}
-                initialFocus={false}
-                labels={labels as any}
-                modifiers={{
-                  weekend: (day) => disableWeekends && isWeekend(day),
-                }}
-                modifiersClassNames={{
-                  weekend: "rdp-day__weekend",
-                }}
-                showWeekNumber={showWeekNumber}
-                onWeekNumberClick={
-                  mode === "multiple" ? onWeekNumberClick : undefined
-                }
-                fixedWeeks
-                showOutsideDays
-                {...omit(rest, ["onSelect"])}
-              />
-            </Popover>
-          )}
+          <DateWrapper
+            open={_open ?? open}
+            anchor={wrapperRef.current}
+            onClose={() => onClose?.() ?? setOpen(false)}
+            locale={locale}
+            variant={mode}
+            popoverProps={{
+              id: ariaId,
+              strategy,
+            }}
+          >
+            {DatePickerComponent}
+          </DateWrapper>
         </div>
       </DateContext.Provider>
     );