@navikt/ds-react 5.8.0 → 5.9.0

package/src/date/hooks/useRangeDatepicker.tsx

@@ -1,10 +1,10 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import checkIsBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
-import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
+import { DateInputProps } from "../parts/DateInput";
 import {
   formatDateForInput,
   getLocaleFromString,
@@ -12,8 +12,6 @@ import {
   parseDate,
 } from "../utils";
 import { DateValidationT, UseDatepickerOptions } from "./useDatepicker";
-import { useEscape } from "./useEscape";
-import { useOutsideClickHandler } from "./useOutsideClickHandler";
 
 export type RangeValidationT = {
   from: DateValidationT;
@@ -74,14 +72,28 @@ interface UseRangeDatepickerValue {
   fromInputProps: Pick<
     DateInputProps,
     "onChange" | "onFocus" | "onBlur" | "value"
-  > & { ref: React.RefObject<HTMLInputElement> };
+  > & {
+    /**
+     * @private
+     */
+    setAnchorRef: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
+  };
   /**
    * Use: <DatePicker.Input label="to" {...toInputProps}/>
    */
   toInputProps: Pick<
     DateInputProps,
     "onChange" | "onFocus" | "onBlur" | "value"
-  > & { ref: React.RefObject<HTMLInputElement> };
+  > & {
+    /**
+     * @private
+     */
+    setAnchorRef?: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
+  };
   /**
    * Resets all states (callback)
    */
@@ -218,14 +230,11 @@ export const useRangeDatepicker = (
     onValidate,
     defaultMonth,
     allowTwoDigitYear = true,
-    openOnFocus = true,
   } = opt;
 
-  const locale = getLocaleFromString(_locale);
+  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
 
-  const inputRefTo = useRef<HTMLInputElement>(null);
-  const inputRefFrom = useRef<HTMLInputElement>(null);
-  const [daypickerRef, setDaypickerRef] = useState<HTMLDivElement>();
+  const locale = getLocaleFromString(_locale);
 
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
 
@@ -255,20 +264,6 @@ export const useRangeDatepicker = (
 
   const [open, setOpen] = useState(false);
 
-  useOutsideClickHandler(open, setOpen, [
-    daypickerRef,
-    inputRefTo.current,
-    inputRefFrom.current,
-    inputRefTo.current?.nextSibling,
-    inputRefFrom.current?.nextSibling,
-  ]);
-
-  useEscape(
-    open,
-    setOpen,
-    selectedRange?.from && !selectedRange?.to ? inputRefTo : inputRefFrom
-  );
-
   const updateRange = (range?: DateRange) => {
     onRangeChange?.(range);
     setSelectedRange(range);
@@ -324,7 +319,6 @@ export const useRangeDatepicker = (
     if (e.target.readOnly) {
       return;
     }
-    !open && openOnFocus && setOpen(true);
     const day = parseDate(
       e.target.value,
       today,
@@ -378,6 +372,7 @@ export const useRangeDatepicker = (
   const handleSelect = (range) => {
     if (range?.from && range?.to) {
       setOpen(false);
+      anchorRef?.focus();
     }
     const prevToRange =
       !selectedRange?.from && selectedRange?.to ? selectedRange?.to : range?.to;
@@ -545,10 +540,12 @@ export const useRangeDatepicker = (
     mode: "range" as const,
     open,
     onOpenToggle: () => setOpen((x) => !x),
+    onClose: () => {
+      setOpen(false);
+      anchorRef?.focus();
+    },
     disabled,
     disableWeekends,
-    bubbleEscape: true,
-    ref: setDaypickerRef,
   };
 
   const fromInputProps = {
@@ -556,7 +553,7 @@ export const useRangeDatepicker = (
     onFocus: (e) => handleFocus(e, RANGE.FROM),
     onBlur: (e) => handleBlur(e, RANGE.FROM),
     value: fromInputValue,
-    ref: inputRefFrom,
+    setAnchorRef,
   };
 
   const toInputProps = {
@@ -564,7 +561,7 @@ export const useRangeDatepicker = (
     onFocus: (e) => handleFocus(e, RANGE.TO),
     onBlur: (e) => handleBlur(e, RANGE.TO),
     value: toInputValue,
-    ref: inputRefTo,
+    setAnchorRef,
   };
 
   return {

package/src/date/index.ts

@@ -1,4 +1,3 @@
-export { type DateInputProps } from "./DateInput";
 export {
   default as DatePicker,
   type DatePickerProps,
@@ -15,3 +14,4 @@ export {
 export { default as MonthPicker } from "./monthpicker/MonthPicker";
 export { type MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
 export { type MonthPickerProps } from "./monthpicker/types";
+export { type DateInputProps } from "./parts/DateInput";

package/src/date/monthpicker/MonthPicker.tsx

@@ -1,10 +1,10 @@
 import cl from "clsx";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
-import { Popover } from "../../popover";
-import { useId } from "../../util";
-import { MonthPickerInput } from "../DateInput";
+import { mergeRefs, useId } from "../../util";
 import { DateContext, SharedMonthProvider } from "../context";
+import { MonthPickerInput } from "../parts/DateInput";
+import { DateWrapper } from "../parts/DateWrapper";
 import { getLocaleFromString } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthPickerStandalone from "./MonthPickerStandalone";
@@ -74,7 +74,6 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
       year,
       onYearChange,
       strategy = "absolute",
-      bubbleEscape = false,
     },
     ref
   ) => {
@@ -82,6 +81,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     const [open, setOpen] = useState(_open ?? false);
 
     const wrapperRef = useRef<HTMLDivElement | null>(null);
+    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);
 
     const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
       defaultSelected
@@ -107,51 +107,47 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
             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"
-              role="dialog"
-              ref={ref}
-              id={ariaId}
-              className="navds-date navds-date__popover"
-              strategy={strategy}
-              bubbleEscape={bubbleEscape}
-              flip={false}
+          <DateWrapper
+            open={_open ?? open}
+            anchor={wrapperRef.current}
+            onClose={() => onClose?.() ?? setOpen(false)}
+            locale={locale}
+            variant="month"
+            popoverProps={{
+              id: ariaId,
+              strategy,
+            }}
+          >
+            <RootProvider
+              locale={getLocaleFromString(locale)}
+              selected={selected ?? selectedMonth}
+              toDate={toDate}
+              fromDate={fromDate}
+              month={selected ?? selectedMonth}
             >
-              <RootProvider
-                locale={getLocaleFromString(locale)}
-                selected={selected ?? selectedMonth}
-                toDate={toDate}
-                fromDate={fromDate}
-                month={selected ?? selectedMonth}
-              >
-                <div className={cl("rdp-month", className)}>
-                  <SharedMonthProvider
-                    dropdownCaption={dropdownCaption}
-                    disabled={disabled}
-                    selected={selected ?? selectedMonth}
-                    onSelect={handleSelect}
-                    year={year}
-                    onYearChange={onYearChange}
-                  >
-                    <MonthCaption />
-                    <MonthSelector />
-                  </SharedMonthProvider>
-                </div>
-              </RootProvider>
-            </Popover>
-          )}
+              <div className={cl("rdp-month", className)}>
+                <SharedMonthProvider
+                  dropdownCaption={dropdownCaption}
+                  disabled={disabled}
+                  selected={selected ?? selectedMonth}
+                  onSelect={handleSelect}
+                  year={year}
+                  onYearChange={onYearChange}
+                >
+                  <MonthCaption />
+                  <MonthSelector />
+                </SharedMonthProvider>
+              </div>
+            </RootProvider>
+          </DateWrapper>
         </div>
       </DateContext.Provider>
     );

package/src/date/monthpicker/types.ts

@@ -75,9 +75,4 @@ 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;
 }

package/src/date/{DateInput.tsx → parts/DateInput.tsx}

@@ -1,11 +1,11 @@
 import { CalendarIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
-import React, { forwardRef, InputHTMLAttributes } from "react";
-import { FormFieldProps, useFormField } from "../form/useFormField";
-import { useDateInputContext } from "./context";
-import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
-import { BodyShort, ErrorMessage, Label } from "../typography";
-import { omit } from "../util";
+import React, { forwardRef, InputHTMLAttributes, useRef } from "react";
+import { ReadOnlyIcon } from "../../form/ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "../../form/useFormField";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { omit } from "../../util";
+import { useDateInputContext } from "../context";
 
 export interface DateInputProps
   extends FormFieldProps,
@@ -28,6 +28,10 @@ export interface DateInputProps
    * @private
    */
   variant?: "datepicker" | "monthpicker";
+  /**
+   * @private
+   */
+  setAnchorRef?: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
 }
 
 const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
@@ -37,9 +41,12 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
     label,
     description,
     variant = "datepicker",
+    setAnchorRef,
     ...rest
   } = props;
 
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
   const isDatepickerVariant = variant === "datepicker";
 
   const conditionalVariables = {
@@ -50,7 +57,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
     },
   };
 
-  const { onOpen, ariaId, open } = useDateInputContext();
+  const context = useDateInputContext();
 
   const {
     inputProps,
@@ -108,7 +115,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           {...omit(rest, ["error", "errorId", "size"])}
           {...inputProps}
           autoComplete="off"
-          aria-controls={open ? ariaId : undefined}
+          aria-controls={context?.open ? context.ariaId : undefined}
           readOnly={readOnly}
           className={cl(
             "navds-date__field-input",
@@ -116,19 +123,23 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
             "navds-body-short",
             `navds-body-short--${size}`
           )}
-          size={isDatepickerVariant ? 10 : 14}
+          size={isDatepickerVariant ? 11 : 14}
         />
         <button
           disabled={inputProps.disabled || readOnly}
-          tabIndex={readOnly ? -1 : open ? -1 : 0}
-          onClick={() => onOpen()}
+          tabIndex={readOnly ? -1 : context?.open ? -1 : 0}
+          onClick={() => {
+            context?.onOpen();
+            setAnchorRef?.(buttonRef.current);
+          }}
           type="button"
           className="navds-date__field-button"
+          ref={buttonRef}
         >
           <CalendarIcon
             pointerEvents="none"
             title={
-              open
+              context?.open
                 ? conditionalVariables.iconTitle.close
                 : conditionalVariables.iconTitle.open
             }

package/src/date/parts/DateWrapper.tsx

@@ -0,0 +1,80 @@
+import cl from "clsx";
+import React, { useContext, useRef } from "react";
+import { Button } from "../../button";
+import { Modal } from "../../modal";
+import { ModalContext } from "../../modal/ModalContext";
+import { Popover } from "../../popover";
+import { useMedia } from "../../util/useMedia";
+import { modalCloseButtonLabel, modalLabel } from "../utils/labels";
+
+type DateWrapperProps = {
+  open: boolean;
+  children: React.ReactNode;
+  onClose: () => void;
+  anchor: HTMLDivElement | null;
+  locale: "nb" | "nn" | "en";
+  variant: "single" | "multiple" | "range" | "month";
+  popoverProps: {
+    id?: string;
+    strategy?: "absolute" | "fixed";
+  };
+};
+
+export const DateWrapper = ({
+  open,
+  children,
+  onClose,
+  anchor,
+  locale,
+  variant,
+  popoverProps,
+}: DateWrapperProps) => {
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const isInModal = useContext(ModalContext) !== null;
+  const hideModal =
+    useMedia("screen and (min-width: 768px)", true) && !isInModal;
+
+  if (hideModal) {
+    return (
+      <Popover
+        arrow={false}
+        anchorEl={anchor}
+        open={open}
+        onClose={onClose}
+        placement="bottom-start"
+        role="dialog"
+        className={cl("navds-date__popover", {
+          "navds-date": variant === "month",
+        })}
+        flip={false}
+        {...popoverProps}
+      >
+        {children}
+      </Popover>
+    );
+  }
+  return (
+    <Modal
+      ref={modalRef}
+      open={open}
+      onClose={onClose}
+      aria-label={modalLabel(locale, variant)}
+      className={cl("navds-date__modal", {
+        "navds-date__nested-modal": isInModal,
+        "navds-date": variant === "month",
+      })}
+      closeOnBackdropClick
+    >
+      <div className="navds-date__modal-body">
+        {children}
+        <Button
+          variant="tertiary"
+          onClick={() => modalRef?.current?.close()}
+          size="small"
+        >
+          {modalCloseButtonLabel(locale)}
+        </Button>
+      </div>
+    </Modal>
+  );
+};

package/src/date/utils/labels.ts

@@ -133,3 +133,86 @@ export const labelWeek = (localeCode?: string): string => {
       return `Uke:`;
   }
 };
+
+const modalLabelSingle = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg dato`;
+    case "nn":
+      return `Vel dato`;
+    case "en-GB":
+      return `Pick a date`;
+    default:
+      return `Velg dato`;
+  }
+};
+
+const modalLabelMultiple = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg datoer`;
+    case "nn":
+      return `Vel datoar`;
+    case "en-GB":
+      return `Pick dates`;
+    default:
+      return `Velg datoer`;
+  }
+};
+
+const modalLabelRanged = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg start- og sluttdato`;
+    case "nn":
+      return `Vel start- og sluttdato`;
+    case "en-GB":
+      return `Pick a start and end date`;
+    default:
+      return `Velg start- og sluttdato`;
+  }
+};
+
+const modalLabelMonth = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg måned`;
+    case "nn":
+      return `Vel månad`;
+    case "en-GB":
+      return `Pick a month`;
+    default:
+      return `Velg måned`;
+  }
+};
+
+export const modalLabel = (
+  localeCode: string,
+  variant: "single" | "multiple" | "range" | "month"
+) => {
+  switch (variant) {
+    case "single":
+      return modalLabelSingle(localeCode);
+    case "multiple":
+      return modalLabelMultiple(localeCode);
+    case "range":
+      return modalLabelRanged(localeCode);
+    case "month":
+      return modalLabelMonth(localeCode);
+    default:
+      return modalLabelSingle(localeCode);
+  }
+};
+
+export const modalCloseButtonLabel = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Lukk`;
+    case "nn":
+      return `Lukk`;
+    case "en-GB":
+      return `Close`;
+    default:
+      return `Lukk`;
+  }
+};

package/src/form/combobox/Combobox.tsx

@@ -33,7 +33,7 @@ export const Combobox = forwardRef<
 
   const toggleListButtonRef = useRef<HTMLButtonElement>(null);
 
-  const { currentOption, toggleIsListOpen } = useFilteredOptionsContext();
+  const { activeDecendantId, toggleIsListOpen } = useFilteredOptionsContext();
   const { selectedOptions } = useSelectedOptionsContext();
 
   const {
@@ -92,7 +92,7 @@ export const Combobox = forwardRef<
             "navds-combobox__wrapper-inner navds-text-field__input",
             {
               "navds-combobox__wrapper-inner--virtually-unfocused":
-                currentOption !== null,
+                activeDecendantId !== null,
             }
           )}
           onClick={focusInput}

package/src/form/combobox/ComboboxProvider.tsx

@@ -65,7 +65,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
           size,
         }}
       >
-        <CustomOptionsProvider>
+        <CustomOptionsProvider value={{ isMultiSelect }}>
           <SelectedOptionsProvider
             value={{
               allowNewValues,
@@ -81,7 +81,6 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
                 filteredOptions,
                 isListOpen,
                 isLoading,
-                isMultiSelect,
                 options,
               }}
             >

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -6,6 +6,7 @@ import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsCon
 import { useInputContext } from "../Input/inputContext";
 import { Loader } from "../../../loader";
 import { BodyShort, Label } from "../../../typography";
+import filteredOptionsUtil from "./filtered-options-util";
 
 const FilteredOptions = () => {
   const {
@@ -18,25 +19,25 @@ const FilteredOptions = () => {
     isLoading,
     isListOpen,
     filteredOptions,
-    filteredOptionsIndex,
-    filteredOptionsRef,
+    setFilteredOptionsRef,
     isMouseLastUsedInputDevice,
     setIsMouseLastUsedInputDevice,
     isValueNew,
-    setFilteredOptionsIndex,
     toggleIsListOpen,
+    activeDecendantId,
+    virtualFocus,
   } = useFilteredOptionsContext();
   const { isMultiSelect, selectedOptions, toggleOption } =
     useSelectedOptionsContext();
 
   return (
     <ul
-      ref={filteredOptionsRef}
+      ref={setFilteredOptionsRef}
       className={cl("navds-combobox__list", {
         "navds-combobox__list--closed": !isListOpen,
         "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
       })}
-      id={`${id}-filtered-options`}
+      id={filteredOptionsUtil.getFilteredOptionsId(id)}
       role="listbox"
       tabIndex={-1}
     >
@@ -45,7 +46,8 @@ const FilteredOptions = () => {
           className="navds-combobox__list-item--loading"
           role="option"
           aria-selected={false}
-          id={`${id}-is-loading`}
+          id={filteredOptionsUtil.getIsLoadingId(id)}
+          data-no-focus="true"
         >
           <Loader aria-label="Søker..." />
         </li>
@@ -54,8 +56,12 @@ const FilteredOptions = () => {
         <li
           tabIndex={-1}
           onMouseMove={() => {
-            if (filteredOptionsIndex !== -1) {
-              setFilteredOptionsIndex(-1);
+            if (
+              activeDecendantId !== filteredOptionsUtil.getAddNewOptionId(id)
+            ) {
+              virtualFocus.moveFocusToElement(
+                filteredOptionsUtil.getAddNewOptionId(id)
+              );
               setIsMouseLastUsedInputDevice(true);
             }
           }}
@@ -64,10 +70,10 @@ const FilteredOptions = () => {
             if (!isMultiSelect && !selectedOptions.includes(value))
               toggleIsListOpen(false);
           }}
-          id={`${id}-combobox-new-option`}
+          id={filteredOptionsUtil.getAddNewOptionId(id)}
           className={cl("navds-combobox__list-item__new-option", {
             "navds-combobox__list-item__new-option--focus":
-              filteredOptionsIndex === -1,
+              activeDecendantId === filteredOptionsUtil.getAddNewOptionId(id),
           })}
           role="option"
           aria-selected={false}
@@ -86,24 +92,30 @@ const FilteredOptions = () => {
           className="navds-combobox__list-item__no-options"
           role="option"
           aria-selected={false}
-          id={`${id}-no-hits`}
+          id={filteredOptionsUtil.getNoHitsId(id)}
+          data-no-focus="true"
         >
           Ingen søketreff
         </li>
       )}
-      {filteredOptions.map((option, index) => (
+      {filteredOptions.map((option) => (
         <li
           className={cl("navds-combobox__list-item", {
-            "navds-combobox__list-item--focus": index === filteredOptionsIndex,
+            "navds-combobox__list-item--focus":
+              activeDecendantId === filteredOptionsUtil.getOptionId(id, option),
             "navds-combobox__list-item--selected":
               selectedOptions.includes(option),
           })}
-          id={`${id}-option-${option.replace(" ", "-")}`}
+          id={filteredOptionsUtil.getOptionId(id, option)}
           key={option}
           tabIndex={-1}
           onMouseMove={() => {
-            if (filteredOptionsIndex !== index) {
-              setFilteredOptionsIndex(index);
+            if (
+              activeDecendantId !== filteredOptionsUtil.getOptionId(id, option)
+            ) {
+              virtualFocus.moveFocusToElement(
+                filteredOptionsUtil.getOptionId(id, option)
+              );
               setIsMouseLastUsedInputDevice(true);
             }
           }}