@navikt/ds-react 6.0.0-alpha.2 → 6.0.0

package/src/date/hooks/useDatepicker.tsx

@@ -1,5 +1,4 @@
-import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
-import isWeekend from "date-fns/isWeekend";
+import { differenceInCalendarDays, isWeekend } from "date-fns";
 import React, { useCallback, useState } from "react";
 import { DayClickEventHandler, isMatch } from "react-day-picker";
 import { DatePickerProps } from "../datepicker/DatePicker";
@@ -53,14 +52,9 @@ export interface UseDatepickerOptions
    * Allows input of with 'yy' year format.
    * @default true
    * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-   * In 2023 this equals to 1943 - 2042
+   * In 2024 this equals to 1944 - 2043
    */
   allowTwoDigitYear?: boolean;
-  /**
-   * Will be removed in a future major-version
-   * @deprecated
-   */
-  openOnFocus?: false;
 }
 
 interface UseDatepickerValue {

package/src/date/hooks/useMonthPicker.tsx

@@ -39,14 +39,9 @@ export interface UseMonthPickerOptions
    * Allows input of with 'yy' year format.
    * @default true
    * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-   * In 2023 this equals to 1943 - 2042
+   * In 2024 this equals to 1944 - 2043
    */
   allowTwoDigitYear?: boolean;
-  /**
-   * Will be removed in a future major-version
-   * @deprecated
-   */
-  openOnFocus?: boolean;
 }
 
 interface UseMonthPickerValue {

package/src/date/hooks/useRangeDatepicker.tsx

@@ -1,6 +1,8 @@
-import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
-import checkIsBefore from "date-fns/isBefore";
-import isWeekend from "date-fns/isWeekend";
+import {
+  isBefore as checkIsBefore,
+  differenceInCalendarDays,
+  isWeekend,
+} from "date-fns";
 import React, { useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
 import { DatePickerProps } from "../datepicker/DatePicker";

package/src/date/monthpicker/MonthButton.tsx

@@ -1,9 +1,11 @@
 import cl from "clsx";
-import compareAsc from "date-fns/compareAsc";
-import compareDesc from "date-fns/compareDesc";
-import format from "date-fns/format";
-import isSameMonth from "date-fns/isSameMonth";
-import setYear from "date-fns/setYear";
+import {
+  compareAsc,
+  compareDesc,
+  format,
+  isSameMonth,
+  setYear,
+} from "date-fns";
 import React, { useEffect, useRef } from "react";
 import { useDayPicker } from "react-day-picker";
 import { useSharedMonthContext } from "../context";

package/src/date/monthpicker/MonthCaption.tsx

@@ -1,7 +1,10 @@
-import { isAfter, isBefore } from "date-fns";
-import setYear from "date-fns/setYear";
-import startOfMonth from "date-fns/startOfMonth";
-import startOfYear from "date-fns/startOfYear";
+import {
+  isAfter,
+  isBefore,
+  setYear,
+  startOfMonth,
+  startOfYear,
+} from "date-fns";
 import React from "react";
 import { useDayPicker } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";

package/src/date/monthpicker/MonthPicker.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
-import { RootProvider } from "react-day-picker";
+import { DayPickerProvider } from "react-day-picker";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { DateContext, SharedMonthProvider } from "../context";
@@ -127,12 +127,14 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
               strategy,
             }}
           >
-            <RootProvider
-              locale={getLocaleFromString(locale)}
-              selected={selected ?? selectedMonth}
-              toDate={toDate}
-              fromDate={fromDate}
-              month={selected ?? selectedMonth}
+            <DayPickerProvider
+              initialProps={{
+                locale: getLocaleFromString(locale),
+                selected: selected ?? selectedMonth,
+                toDate,
+                fromDate,
+                month: selected ?? selectedMonth,
+              }}
             >
               <div className={cl("rdp-month", className)}>
                 <SharedMonthProvider
@@ -147,7 +149,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
                   <MonthSelector />
                 </SharedMonthProvider>
               </div>
-            </RootProvider>
+            </DayPickerProvider>
           </DateWrapper>
         </div>
       </DateContext.Provider>

package/src/date/monthpicker/MonthPickerStandalone.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
-import { RootProvider } from "react-day-picker";
+import { DayPickerProvider } from "react-day-picker";
 import { SharedMonthProvider } from "../context";
 import { getLocaleFromString } from "../utils";
 import MonthCaption from "./MonthCaption";
@@ -58,12 +58,14 @@ export const MonthPickerStandalone = forwardRef<
 
     return (
       <div ref={ref} className={cl("navds-date__wrapper", className)}>
-        <RootProvider
-          locale={getLocaleFromString(locale)}
-          selected={selected ?? selectedMonth}
-          toDate={toDate}
-          fromDate={fromDate}
-          month={selected ?? selectedMonth}
+        <DayPickerProvider
+          initialProps={{
+            locale: getLocaleFromString(locale),
+            selected: selected ?? selectedMonth,
+            toDate,
+            fromDate,
+            month: selected ?? selectedMonth,
+          }}
         >
           <div className="navds-date rdp-month">
             <SharedMonthProvider
@@ -78,7 +80,7 @@ export const MonthPickerStandalone = forwardRef<
               <MonthSelector />
             </SharedMonthProvider>
           </div>
-        </RootProvider>
+        </DayPickerProvider>
       </div>
     );
   },

package/src/date/monthpicker/MonthSelector.tsx

@@ -1,7 +1,4 @@
-import isSameMonth from "date-fns/isSameMonth";
-import setMonth from "date-fns/setMonth";
-import setYear from "date-fns/setYear";
-import startOfMonth from "date-fns/startOfMonth";
+import { isSameMonth, setMonth, setYear, startOfMonth } from "date-fns";
 import React, { useState } from "react";
 import { BodyShort } from "../../typography";
 import { useSharedMonthContext } from "../context";

package/src/date/monthpicker/monthpicker.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, StoryFn } from "@storybook/react";
-import setYear from "date-fns/setYear";
+import { setYear } from "date-fns";
 import React, { useId, useState } from "react";
-import { Button, DateInputProps } from "../..";
+import { Button } from "../../button";
 import { useMonthpicker } from "../hooks";
+import { DateInputProps } from "../parts/DateInput";
 import MonthPicker from "./MonthPicker";
 import { MonthPickerProps } from "./types";
 
@@ -22,7 +23,7 @@ export const Default: StoryFn<{
 
   return (
     <div style={{ height: "20rem" }}>
-      <MonthPicker {...monthpickerProps}>
+      <MonthPicker {...monthpickerProps} onMonthSelect={console.log}>
         <MonthPicker.Input
           label="Velg måned"
           variant="monthpicker"
@@ -47,6 +48,7 @@ Default.argTypes = {
 export const DropdownCaption = () => {
   return (
     <MonthPicker.Standalone
+      onMonthSelect={console.log}
       dropdownCaption
       fromDate={new Date("Feb 10 2019")}
       toDate={new Date("Sep 27 2032")}

package/src/date/parts/DateInput.tsx

@@ -15,7 +15,7 @@ export interface DateInputProps
    */
   label: React.ReactNode;
   /**
-   * Shows label and description for screenreaders-only
+   * Shows label and description for screen readers only
    * @default false
    */
   hideLabel?: boolean;

package/src/date/parts/DateWrapper.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
-import React, { useContext, useRef } from "react";
+import React, { useRef } from "react";
 import { Button } from "../../button";
 import { Modal } from "../../modal";
-import { ModalContext } from "../../modal/ModalContext";
+import { useModalContext } from "../../modal/Modal.context";
 import { Popover } from "../../popover";
 import { useMedia } from "../../util/hooks";
 import { modalCloseButtonLabel, modalLabel } from "../utils/labels";
@@ -30,7 +30,7 @@ export const DateWrapper = ({
   popoverProps,
 }: DateWrapperProps) => {
   const modalRef = useRef<HTMLDialogElement>(null);
-  const isInModal = useContext(ModalContext) !== null;
+  const isInModal = useModalContext(false) !== undefined;
   const hideModal =
     useMedia("screen and (min-width: 768px)", true) && !isInModal;
 

package/src/date/utils/__tests__/format-dates.test.ts

@@ -1,4 +1,4 @@
-import nb from "date-fns/locale/nb";
+import { nb } from "date-fns/locale";
 import { formatDateForInput } from "../format-date";
 import { parseDate } from "../parse-date";
 

package/src/date/utils/__tests__/get-initial-year.test.ts

@@ -1,4 +1,4 @@
-import isSameYear from "date-fns/isSameYear";
+import { isSameYear } from "date-fns";
 import { getInitialYear } from "..";
 
 describe("Returns initial year for monthpicker", () => {

package/src/date/utils/__tests__/parse-dates.test.ts

@@ -1,6 +1,6 @@
 /* eslint-disable jest/expect-expect */
-import getMonth from "date-fns/getMonth";
-import nb from "date-fns/locale/nb";
+import { getMonth } from "date-fns";
+import { nb } from "date-fns/locale";
 import { isValidDate, parseDate } from "..";
 
 const check = (inp: string) =>

package/src/date/utils/check-dates.ts

@@ -1,5 +1,4 @@
-import isThisMonth from "date-fns/isThisMonth";
-import setYear from "date-fns/setYear";
+import { isThisMonth, setYear } from "date-fns";
 
 export const dateIsInCurrentMonth = (
   date: Date,

package/src/date/utils/dates-disabled.ts

@@ -1,4 +1,4 @@
-import isSameDay from "date-fns/isSameDay";
+import { isSameDay } from "date-fns";
 import { isDateRange } from "react-day-picker";
 
 // TODO: ((date: Date) => boolean)

package/src/date/utils/format-date.ts

@@ -1,4 +1,4 @@
-import format from "date-fns/format";
+import { Locale, format } from "date-fns";
 import {
   INPUT_DATE_STRING_FORMAT_DATE,
   INPUT_DATE_STRING_FORMAT_MONTH,

package/src/date/utils/get-dates.ts

@@ -1,8 +1,10 @@
-import isSameYear from "date-fns/isSameYear";
-import setMonth from "date-fns/setMonth";
-import setYear from "date-fns/setYear";
-import startOfMonth from "date-fns/startOfMonth";
-import startOfYear from "date-fns/startOfYear";
+import {
+  isSameYear,
+  setMonth,
+  setYear,
+  startOfMonth,
+  startOfYear,
+} from "date-fns";
 
 export const getMonths = (start: Date, end: Date, current: Date): Date[] => {
   const dropdownMonths: Date[] = [];

package/src/date/utils/get-initial-year.ts

@@ -1,4 +1,4 @@
-import startOfYear from "date-fns/startOfYear";
+import { startOfYear } from "date-fns";
 import { DayPickerContextValue } from "react-day-picker";
 
 /**

package/src/date/utils/is-match.ts

@@ -1,7 +1,9 @@
-import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
-import isDate from "date-fns/isDate";
-import isSameDay from "date-fns/isSameDay";
-import isSameMonth from "date-fns/isSameMonth";
+import {
+  differenceInCalendarDays,
+  isDate,
+  isSameDay,
+  isSameMonth,
+} from "date-fns";
 import {
   DateAfter,
   DateBefore,

package/src/date/utils/labels.ts

@@ -1,3 +1,4 @@
+import { Locale } from "date-fns";
 import { Labels, NavButtonLabel } from "react-day-picker";
 
 const labelNext: NavButtonLabel = (date, options) => {

package/src/date/utils/locale.ts

@@ -1,6 +1,4 @@
-import enGB from "date-fns/locale/en-GB";
-import nb from "date-fns/locale/nb";
-import nn from "date-fns/locale/nn";
+import { enGB, nb, nn } from "date-fns/locale";
 
 /** @private */
 export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {

package/src/date/utils/navigation.ts

@@ -1,4 +1,4 @@
-import setYear from "date-fns/setYear";
+import { setYear } from "date-fns";
 import { Matcher, isMatch } from "./is-match";
 
 export const nextEnabled = (

package/src/date/utils/parse-date.ts

@@ -1,6 +1,4 @@
-import isBefore from "date-fns/isBefore";
-import parse from "date-fns/parse";
-import sub from "date-fns/sub";
+import { Locale, isBefore, parse, sub } from "date-fns";
 import { isValidDate } from "./check-dates";
 
 export const INPUT_DATE_STRING_FORMAT_DATE = "dd.MM.yyyy";

package/src/dropdown/dropdown.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
-import { Dropdown } from "..";
 import { Button } from "../button";
+import Dropdown from "./Dropdown";
 
 export default {
   title: "ds-react/Dropdown",

package/src/form/Textarea.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef, useState } from "react";
 import { BodyShort, ErrorMessage, Label } from "../typography";
 import { omit } from "../util";
 import TextareaAutosize from "../util/TextareaAutoSize";
+import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { ReadOnlyIcon } from "./ReadOnlyIcon";
 import Counter from "./TextareaCounter";
@@ -102,7 +103,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     const maxLengthId = useId();
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
 
-    const [controlledValue, setControlledValue] = useState<string>(
+    const [uncontrolledValue, setUncontrolledValue] = useState(
       props?.defaultValue ?? "",
     );
 
@@ -157,40 +158,39 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             {description}
           </BodyShort>
         )}
-        <div className="navds-textarea__wrapper">
-          <TextareaAutosize
-            {...omit(rest, ["error", "errorId", "size"])}
-            {...inputProps}
-            onChange={(e) =>
-              props.onChange
-                ? props.onChange(e)
-                : setControlledValue(e.target.value)
-            }
-            minRows={getMinRows()}
-            autoScrollbar={UNSAFE_autoScrollbar}
-            ref={ref}
-            readOnly={readOnly}
-            className={cl(
-              "navds-textarea__input",
-              "navds-body-short",
-              `navds-body-short--${size ?? "medium"}`,
-            )}
-            {...(describedBy ? { "aria-describedby": describedBy } : {})}
-          />
-          {hasMaxLength && !readOnly && !inputProps.disabled && (
-            <>
-              <span id={maxLengthId} className="navds-sr-only">
-                {`Tekstområde med plass til ${maxLength} tegn.`}
-              </span>
-              <Counter
-                maxLength={maxLength}
-                currentLength={props.value?.length ?? controlledValue?.length}
-                size={size}
-                i18n={i18n}
-              />
-            </>
+        <TextareaAutosize
+          {...omit(rest, ["error", "errorId", "size"])}
+          {...inputProps}
+          onChange={composeEventHandlers(
+            props.onChange,
+            props.value === undefined
+              ? (e) => setUncontrolledValue(e.target.value)
+              : undefined,
           )}
-        </div>
+          minRows={getMinRows()}
+          autoScrollbar={UNSAFE_autoScrollbar}
+          ref={ref}
+          readOnly={readOnly}
+          className={cl(
+            "navds-textarea__input",
+            "navds-body-short",
+            `navds-body-short--${size ?? "medium"}`,
+          )}
+          {...(describedBy ? { "aria-describedby": describedBy } : {})}
+        />
+        {hasMaxLength && !readOnly && !inputProps.disabled && (
+          <>
+            <span id={maxLengthId} className="navds-sr-only">
+              {`Tekstområde med plass til ${maxLength} tegn.`}
+            </span>
+            <Counter
+              maxLength={maxLength}
+              currentLength={props.value?.length ?? uncontrolledValue.length}
+              size={size}
+              i18n={i18n}
+            />
+          </>
+        )}
         <div
           className="navds-form-field__error"
           id={errorId}

package/src/form/combobox/Combobox.tsx

@@ -89,7 +89,7 @@ export const Combobox = forwardRef<
             "navds-combobox__wrapper-inner navds-text-field__input",
             {
               "navds-combobox__wrapper-inner--virtually-unfocused":
-                activeDecendantId !== null,
+                activeDecendantId !== undefined,
             },
           )}
           onClick={focusInput}

package/src/form/combobox/ComboboxProvider.tsx

@@ -43,6 +43,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       isMultiSelect,
       onToggleSelected,
       selectedOptions,
+      maxSelected,
       options,
       value,
       onChange,
@@ -71,6 +72,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
               allowNewValues,
               isMultiSelect,
               selectedOptions,
+              maxSelected,
               onToggleSelected,
               options,
             }}

package/src/form/combobox/ComboboxWrapper.tsx

@@ -57,7 +57,6 @@ const ComboboxWrapper = ({
       )}
       onFocus={onFocusInsideWrapper}
       onBlur={onBlurWrapper}
-      tabIndex={-1}
     >
       {children}
     </div>