@navikt/ds-react 5.8.0 → 5.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.8.0",
-    "@navikt/ds-tokens": "^5.8.0",
+    "@navikt/aksel-icons": "^5.9.0",
+    "@navikt/ds-tokens": "^5.9.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/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);

package/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>
     );

package/src/date/datepicker/datepicker.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import isSameDay from "date-fns/isSameDay";
 import React, { useId, useState } from "react";
 import { useDatepicker, useRangeDatepicker } from "..";
-import { BodyLong, Button, HGrid, HStack, Modal, VStack } from "../..";
+import { BodyLong, Button, HGrid, Modal, VStack } from "../..";
 import DatePicker, { DatePickerProps } from "./DatePicker";
 
 const disabledDays = [
@@ -18,7 +18,6 @@ export default {
 
 type DefaultStoryProps = DatePickerProps & {
   size: "medium" | "small";
-  openOnFocus: boolean;
   inputfield: boolean;
   standalone: boolean;
 };
@@ -30,13 +29,11 @@ export const Default: StoryObj<DefaultStoryProps> = {
     const rangeCtx = useRangeDatepicker({
       fromDate: new Date("Aug 23 2020"),
       toDate: new Date("Aug 23 2023"),
-      openOnFocus: props.openOnFocus,
     });
 
     const singleCtx = useDatepicker({
       fromDate: new Date("Aug 23 2020"),
       toDate: new Date("Aug 23 2023"),
-      openOnFocus: props.openOnFocus,
     });
 
     const newProps = {
@@ -111,7 +108,6 @@ export const Default: StoryObj<DefaultStoryProps> = {
     disableWeekends: false,
     showWeekNumber: false,
     mode: "single",
-    openOnFocus: true,
     inputfield: true,
     standalone: false,
   },
@@ -186,21 +182,6 @@ export const UseRangedDatepicker = () => {
   );
 };
 
-export const OpenOnFocus = () => {
-  const { datepickerProps, inputProps } = useDatepicker({
-    onDateChange: console.log,
-    openOnFocus: false,
-  });
-
-  return (
-    <div style={{ display: "flex", gap: "1rem" }}>
-      <DatePicker {...datepickerProps}>
-        <DatePicker.Input {...inputProps} label="Velg dato" />
-      </DatePicker>
-    </div>
-  );
-};
-
 export const NB = () => (
   <DatePicker.Standalone locale="nb" today={new Date("2006-07-01")} />
 );
@@ -333,15 +314,32 @@ export const Size = () => {
     fromDate: new Date("Aug 23 2019"),
     toDate: new Date("Feb 23 2024"),
     onDateChange: console.log,
+    defaultSelected: new Date("Feb 23 2023"),
+  });
+  const { datepickerProps: d2, inputProps: i2 } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+    defaultSelected: new Date("Feb 23 2023"),
   });
 
   return (
     <div style={{ display: "flex", gap: "1rem" }}>
       <DatePicker {...datepickerProps} dropdownCaption>
-        <DatePicker.Input size="medium" {...inputProps} label="Velg dato" />
+        <DatePicker.Input
+          placeholder="10/10/2023"
+          size="medium"
+          {...inputProps}
+          label="Velg dato"
+        />
       </DatePicker>
-      <DatePicker {...datepickerProps} dropdownCaption>
-        <DatePicker.Input size="small" {...inputProps} label="Velg dato" />
+      <DatePicker {...d2} dropdownCaption>
+        <DatePicker.Input
+          placeholder="10/10/2023"
+          size="small"
+          {...i2}
+          label="Velg dato"
+        />
       </DatePicker>
     </div>
   );
@@ -441,33 +439,26 @@ export const ModalDemo = () => {
   });
 
   return (
-    <Modal open header={{ heading: "Modal-demo" }} width="1024px">
+    <Modal open header={{ heading: "Modal-demo" }}>
       <Modal.Body style={{ position: "relative" }}>
-        <BodyLong>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores nisi
-          incidunt ipsum cupiditate nostrum nesciunt, corrupti nihil at atque
-          animi ab aut. Quam iusto harum eligendi magnam nulla repudiandae
-          molestias.
+        <BodyLong spacing>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
         </BodyLong>
 
-        <HGrid gap="6" columns={{ xs: 1, lg: 2 }}>
-          <HStack justify="center" align="start">
-            <DatePicker.Standalone
-              fromDate={new Date("Aug 23 2019")}
-              toDate={new Date("Feb 23 2024")}
-            />
-          </HStack>
-          <DatePicker {...datepickerProps} dropdownCaption>
-            <DatePicker.Input {...inputProps} label="Velg dato" />
-          </DatePicker>
-          <HStack justify="center">
-            <DatePicker.Standalone
-              fromDate={new Date("Aug 23 2019")}
-              toDate={new Date("Feb 23 2024")}
-            />
-          </HStack>
-        </HGrid>
+        <DatePicker {...datepickerProps} dropdownCaption>
+          <DatePicker.Input
+            {...inputProps}
+            label="Velg dato"
+            description="Format: dd.mm.yyyy"
+          />
+        </DatePicker>
       </Modal.Body>
+      <Modal.Footer>
+        <Button>Neste</Button>
+        <Button variant="secondary">Tilbake</Button>
+        <Button variant="tertiary">Avbryt</Button>
+      </Modal.Footer>
     </Modal>
   );
 };
+ModalDemo.parameters = { chromatic: { pauseAnimationAtEnd: true } };

package/src/date/datepicker/types.ts

@@ -101,9 +101,4 @@ export interface DatePickerDefaultProps
    * @default See Popover
    */
   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/hooks/useDatepicker.tsx

@@ -1,17 +1,15 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import isWeekend from "date-fns/isWeekend";
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { DayClickEventHandler, isMatch } from "react-day-picker";
-import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
+import { DateInputProps } from "../parts/DateInput";
 import {
   formatDateForInput,
   getLocaleFromString,
   isValidDate,
   parseDate,
 } from "../utils";
-import { useEscape } from "./useEscape";
-import { useOutsideClickHandler } from "./useOutsideClickHandler";
 
 export interface UseDatepickerOptions
   extends Pick<
@@ -59,10 +57,10 @@ export interface UseDatepickerOptions
    */
   allowTwoDigitYear?: boolean;
   /**
-   * Opens datepicker on input-focus
-   * @default true
+   * Will be removed in a future major-version
+   * @deprecated
    */
-  openOnFocus?: boolean;
+  openOnFocus?: false;
 }
 
 interface UseDatepickerValue {
@@ -76,7 +74,14 @@ interface UseDatepickerValue {
   inputProps: Pick<
     DateInputProps,
     "onChange" | "onFocus" | "onBlur" | "value"
-  > & { ref: React.RefObject<HTMLInputElement> };
+  > & {
+    /**
+     * @private
+     */
+    setAnchorRef: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
+  };
   /**
    * Resets all states (callback)
    */
@@ -143,14 +148,11 @@ export const useDatepicker = (
     onValidate,
     defaultMonth,
     allowTwoDigitYear = true,
-    openOnFocus = true,
   } = opt;
 
+  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
   const locale = getLocaleFromString(_locale);
 
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [daypickerRef, setDaypickerRef] = useState<HTMLDivElement>();
-
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
 
   // Initialize states
@@ -172,14 +174,6 @@ export const useDatepicker = (
     [defaultMonth, defaultSelected, selectedDay, today]
   );
 
-  useOutsideClickHandler(open, handleOpen, [
-    daypickerRef,
-    inputRef.current,
-    inputRef.current?.nextSibling,
-  ]);
-
-  useEscape(open, handleOpen, inputRef);
-
   const updateDate = (date?: Date) => {
     onDateChange?.(date);
     setSelectedDay(date);
@@ -207,7 +201,6 @@ export const useDatepicker = (
     if (e.target.readOnly) {
       return;
     }
-    !open && openOnFocus && handleOpen(true);
     const day = parseDate(
       e.target.value,
       today,
@@ -243,7 +236,7 @@ export const useDatepicker = (
   const handleDayClick: DayClickEventHandler = (day, { selected }) => {
     if (day && !selected) {
       handleOpen(false);
-      inputRef.current && inputRef.current.focus();
+      anchorRef?.focus();
     }
 
     if (!required && selected) {
@@ -319,11 +312,13 @@ export const useDatepicker = (
     toDate,
     today,
     open,
+    onClose: () => {
+      handleOpen(false);
+      anchorRef?.focus();
+    },
     onOpenToggle: () => handleOpen(!open),
     disabled,
     disableWeekends,
-    bubbleEscape: true,
-    ref: setDaypickerRef,
   };
 
   const inputProps = {
@@ -331,7 +326,7 @@ export const useDatepicker = (
     onFocus: handleFocus,
     onBlur: handleBlur,
     value: inputValue,
-    ref: inputRef,
+    setAnchorRef,
   };
 
   return { datepickerProps, inputProps, reset, selectedDay, setSelected };

package/src/date/hooks/useMonthPicker.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { DateInputProps } from "../DateInput";
+import React, { useCallback, useMemo, useState } from "react";
 import { MonthPickerProps } from "../monthpicker/types";
+import { DateInputProps } from "../parts/DateInput";
 import {
   formatDateForInput,
   getLocaleFromString,
@@ -8,8 +8,6 @@ import {
   isValidDate,
   parseDate,
 } from "../utils";
-import { useEscape } from "./useEscape";
-import { useOutsideClickHandler } from "./useOutsideClickHandler";
 
 export interface UseMonthPickerOptions
   extends Pick<
@@ -45,8 +43,8 @@ export interface UseMonthPickerOptions
    */
   allowTwoDigitYear?: boolean;
   /**
-   * Opens datepicker on input-focus
-   * @default true
+   * Will be removed in a future major-version
+   * @deprecated
    */
   openOnFocus?: boolean;
 }
@@ -60,7 +58,12 @@ interface UseMonthPickerValue {
    * Use: <MonthPicker.Input {...inputProps} />
    */
   inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "value"> & {
-    ref: React.RefObject<HTMLInputElement>;
+    /**
+     * @private
+     */
+    setAnchorRef: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
   };
   /**
    * Currently selected Date
@@ -138,17 +141,14 @@ export const useMonthpicker = (
     onValidate,
     defaultYear,
     allowTwoDigitYear = true,
-    openOnFocus = true,
   } = opt;
 
+  const [anchorRef, setAnchorRef] = useState<HTMLButtonElement | null>(null);
   const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
 
   const today = useMemo(() => new Date(), []);
   const locale = getLocaleFromString(_locale);
 
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [monthpickerRef, setMonthpickerRef] = useState<HTMLDivElement>();
-
   // Initialize states
   const [year, setYear] = useState(defaultSelected ?? defaultYear ?? today);
   const [selectedMonth, setSelectedMonth] = useState(defaultSelected);
@@ -169,14 +169,6 @@ export const useMonthpicker = (
     [defaultSelected, defaultYear, selectedMonth, today]
   );
 
-  useOutsideClickHandler(open, handleOpen, [
-    monthpickerRef,
-    inputRef.current,
-    inputRef.current?.nextSibling,
-  ]);
-
-  useEscape(open, handleOpen, inputRef);
-
   const updateMonth = (date?: Date) => {
     onMonthChange?.(date);
     setSelectedMonth(date);
@@ -204,7 +196,7 @@ export const useMonthpicker = (
     if (e.target.readOnly) {
       return;
     }
-    !open && openOnFocus && handleOpen(true);
+
     const day = parseDate(
       e.target.value,
       today,
@@ -239,8 +231,8 @@ export const useMonthpicker = (
   const handleMonthClick = (month?: Date) => {
     if (month) {
       handleOpen(false);
-      inputRef.current && inputRef.current.focus();
       setYear(month);
+      anchorRef?.focus();
     }
 
     if (!required && !month) {
@@ -314,9 +306,11 @@ export const useMonthpicker = (
     toDate,
     open,
     onOpenToggle: () => handleOpen(!open),
+    onClose: () => {
+      handleOpen(false);
+      anchorRef?.focus();
+    },
     disabled,
-    bubbleEscape: true,
-    ref: setMonthpickerRef,
   };
 
   const inputProps = {
@@ -324,7 +318,7 @@ export const useMonthpicker = (
     onFocus: handleFocus,
     onBlur: handleBlur,
     value: inputValue,
-    ref: inputRef,
+    setAnchorRef,
   };
 
   return { monthpickerProps, inputProps, reset, selectedMonth, setSelected };