@navikt/ds-react 8.9.1 → 8.10.1

package/src/date/datepicker/hooks/useRangeDatepicker.tsx

@@ -183,7 +183,7 @@ const initialValidation = (
   range?: DateRange,
   opt?: UseRangeDatepickerOptions,
 ): RangeValidationT => {
-  if (!range || !range?.from) {
+  if (!range?.from) {
     return getValidationMessage(
       { isEmpty: true, isValidDate: false },
       { isEmpty: true, isValidDate: false },

package/src/date/datepicker/parts/DatePicker.DayButton.tsx

@@ -43,12 +43,13 @@ const DatePickerDayButton = ({
         "rdp-day_range_start": modifiers.range_start,
         "rdp-day_range_middle": modifiers.range_middle,
         "rdp-day_range_end": modifiers.range_end,
+        "rdp-day__range-hover-middle": modifiers.hoverRange,
         "rdp-day_today": modifiers.today,
         "rdp-day_outside": modifiers.outside,
         "rdp-day__weekend": modifiers.weekend,
       })}
     >
-      {children}
+      <div className="rdp-day__inner">{children}</div>
     </button>
   );
 };

package/src/date/datepicker/parts/DatePicker.RDP.tsx

@@ -1,5 +1,5 @@
 import { isBefore, isSameDay, isWeekend } from "date-fns";
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { ClassNames, DayPicker, dateMatchModifiers } from "react-day-picker";
 import { Show } from "../../../primitives/responsive";
 import { omit } from "../../../utils-external";
@@ -8,7 +8,7 @@ import { useDateLocale } from "../../../utils/i18n/i18n.hooks";
 import { getLocaleFromString } from "../../Date.locale";
 import { DateRange, isDateRange } from "../../Date.typeutils";
 import { clampDisplayMonth, isDateOutsideRange } from "../../date-utils";
-import {
+import type {
   ConditionalModeProps,
   DatePickerDefaultProps,
 } from "../DatePicker.types";
@@ -70,8 +70,8 @@ const ReactDayPicker = ({
 }: ReactDayPickerProps) => {
   const langProviderLocale = useDateLocale();
   const locale = _locale ? getLocaleFromString(_locale) : langProviderLocale;
-
   const mode = _mode ?? ("single" as any);
+  const [dayHovering, setDayHovering] = useState<Date>();
 
   return (
     <DayPicker
@@ -173,28 +173,46 @@ const ReactDayPicker = ({
         ),
         Weekdays: useCallback(
           (props) => (
-            <thead {...props} className="rdp-head" aria-hidden>
-              <tr className="rdp-head_row">{props.children}</tr>
+            <thead className="rdp-head" aria-hidden>
+              <tr {...props} />
             </thead>
           ),
           [],
         ),
       }}
       className={cl("aksel-date", className)}
-      disabled={(day) => {
-        return (
-          (disableWeekends && isWeekend(day)) ||
-          dateMatchModifiers(day, disabled) ||
-          isDateOutsideRange({ day, fromDate, toDate })
-        );
-      }}
+      disabled={(day) =>
+        (disableWeekends && isWeekend(day)) ||
+        dateMatchModifiers(day, disabled) ||
+        isDateOutsideRange({ day, fromDate, toDate })
+      }
       weekStartsOn={1}
       modifiers={{
         weekend: (day) => disableWeekends && isWeekend(day),
+        hoverRange: (day: Date) => {
+          if (
+            !isDateRange(selected) ||
+            !selected.from ||
+            (selected.from && selected.to) ||
+            !dayHovering
+          ) {
+            return false;
+          }
+
+          const dayTime = day.getTime();
+          const fromTime = selected.from.getTime();
+          const hoverTime = dayHovering.getTime();
+
+          // Hovering after the start date
+          if (hoverTime > fromTime) {
+            return dayTime > fromTime && dayTime < hoverTime;
+          }
+          // Hovering before the start date
+          return dayTime < fromTime && dayTime > hoverTime;
+        },
       }}
-      modifiersClassNames={{
-        weekend: "rdp-day__weekend",
-      }}
+      onDayMouseEnter={setDayHovering}
+      onDayMouseLeave={() => setDayHovering(undefined)}
       // eslint-disable-next-line jsx-a11y/no-autofocus
       autoFocus={false}
       showWeekNumber={showWeekNumber}
@@ -203,6 +221,7 @@ const ReactDayPicker = ({
       startMonth={fromDate}
       endMonth={toDate}
       month={clampDisplayMonth({ month, start: fromDate, end: toDate })}
+      resetOnSelect // Range mode: Starts a new range when selecting a day even when a range is already selected
       {...omit(rest, ["onSelect", "role", "id", "defaultSelected"])}
     />
   );

package/src/date/monthpicker/parts/MonthPicker.Button.tsx

@@ -63,7 +63,7 @@ export const MonthButton = ({
 
   useEffect(() => {
     if (focus) {
-      isSameMonth(month, focus) && ref.current && ref.current.focus();
+      isSameMonth(month, focus) && ref.current?.focus();
       setFocus();
     }
   }, [focus, month, setFocus]);
@@ -111,14 +111,16 @@ export const MonthButton = ({
         setTabRoot(focus);
       }}
     >
-      <span aria-hidden="true">
-        {format(new Date(month), "LLL", { locale })
-          .replace(".", "")
-          .substring(0, 3)}
-      </span>
-      <span className="aksel-sr-only">
-        {format(new Date(month), "LLLL", { locale })}
-      </span>
+      <div className="rdp-day__inner">
+        <span aria-hidden="true">
+          {format(new Date(month), "LLL", { locale })
+            .replace(".", "")
+            .substring(0, 3)}
+        </span>
+        <span className="aksel-sr-only">
+          {format(new Date(month), "LLLL", { locale })}
+        </span>
+      </div>
     </button>
   );
 };

package/src/date/monthpicker/parts/MonthPicker.Standalone.tsx

@@ -16,7 +16,7 @@ export interface MonthPickerStandaloneProps extends Omit<
   "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
 > {
   /**
-   * Monthpicker classname
+   * MonthPicker class name
    */
   className?: string;
 }

package/src/dialog/popup/DialogPopupInternal.tsx

@@ -266,7 +266,7 @@ function translateHeight(
 }
 
 function isFocusable(element: Element | null) {
-  if (!element || !element.isConnected) {
+  if (!element?.isConnected) {
     return false;
   }
 

package/src/form/checkbox/CheckboxGroup.context.ts

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+
+export interface CheckboxGroupContextProps {
+  readonly defaultValue?: readonly any[];
+  readonly value?: readonly any[];
+  toggleValue(value: any): void;
+}
+
+export const CheckboxGroupContext =
+  createContext<CheckboxGroupContextProps | null>(null);

package/src/form/checkbox/CheckboxGroup.tsx

@@ -1,17 +1,8 @@
-import React, { createContext, forwardRef, useContext, useState } from "react";
+import React, { forwardRef, useContext, useState } from "react";
 import { cl } from "../../utils/helpers";
 import { Fieldset, FieldsetProps } from "../fieldset";
 import { FieldsetContext } from "../fieldset/context";
-
-export interface CheckboxGroupState {
-  readonly defaultValue?: readonly any[];
-  readonly value?: readonly any[];
-  toggleValue(value: any): void;
-}
-
-export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
-  null,
-);
+import { CheckboxGroupContext } from "./CheckboxGroup.context";
 
 export interface CheckboxGroupProps extends Omit<
   FieldsetProps,
@@ -73,26 +64,25 @@ export const CheckboxGroup = forwardRef<
     };
 
     return (
-      <Fieldset
-        {...rest}
-        ref={ref}
-        className={cl(
-          className,
-          "aksel-checkbox-group",
-          `aksel-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
-        )}
-        _fieldsSupportNativeReadOnly={false}
+      <CheckboxGroupContext.Provider
+        value={{
+          value,
+          defaultValue,
+          toggleValue,
+        }}
       >
-        <CheckboxGroupContext.Provider
-          value={{
-            value,
-            defaultValue,
-            toggleValue,
-          }}
+        <Fieldset
+          {...rest}
+          ref={ref}
+          className={cl(
+            className,
+            "aksel-checkbox-group",
+            `aksel-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
+          )}
         >
           <div className="aksel-checkboxes">{children}</div>
-        </CheckboxGroupContext.Provider>
-      </Fieldset>
+        </Fieldset>
+      </CheckboxGroupContext.Provider>
     );
   },
 );

package/src/form/checkbox/useCheckbox.ts

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { omit } from "../../utils-external";
 import { useFormField } from "../useFormField";
-import { CheckboxGroupContext } from "./CheckboxGroup";
+import { CheckboxGroupContext } from "./CheckboxGroup.context";
 import { CheckboxProps } from "./types";
 
 /**

package/src/form/fieldset/Fieldset.tsx

@@ -26,10 +26,6 @@ export interface FieldsetProps
    * @default true
    */
   errorPropagation?: boolean;
-  /**
-   * @private
-   */
-  _fieldsSupportNativeReadOnly?: boolean;
 }
 
 /**
@@ -60,6 +56,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       size,
       readOnly,
       inputDescriptionId,
+      readOnlyIconNeedsTitle,
     } = useFieldset(props, legendId);
 
     const fieldset = useContext(FieldsetContext);
@@ -71,7 +68,6 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       legend,
       description,
       hideLegend,
-      _fieldsSupportNativeReadOnly = true,
       ...rest
     } = props;
 
@@ -112,10 +108,10 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             visuallyHidden={!!hideLegend}
           >
             {readOnly &&
-              (_fieldsSupportNativeReadOnly ? (
-                <ReadOnlyIcon />
-              ) : (
+              (readOnlyIconNeedsTitle ? (
                 <ReadOnlyIconWithTitle />
+              ) : (
+                <ReadOnlyIcon />
               ))}
             {legend}
           </Label>

package/src/form/fieldset/useFieldset.ts

@@ -1,19 +1,26 @@
+import { useContext } from "react";
 import { cl } from "../../utils/helpers";
-import {
-  type FormFieldProps,
-  containsReadMore,
-  useFormField,
-} from "../useFormField";
+import { CheckboxGroupContext } from "../checkbox/CheckboxGroup.context";
+import { RadioGroupContext } from "../radio/RadioGroup.context";
+import { containsReadMore, useFormField } from "../useFormField";
+import type { FieldsetProps } from "./Fieldset";
 
 /**
  * Handles props for Fieldset in context with parent Fieldset.
  */
-export const useFieldset = (props: FormFieldProps, legendId: string) => {
+export const useFieldset = (props: FieldsetProps, legendId: string) => {
   const formField = useFormField(props, "fieldset");
+  const checkboxGroupContext = useContext(CheckboxGroupContext);
+  const radioGroupContext = useContext(RadioGroupContext);
 
   return {
     ...formField,
+    readOnlyIconNeedsTitle: checkboxGroupContext || radioGroupContext,
     inputProps: {
+      ...(checkboxGroupContext || radioGroupContext
+        ? { "aria-invalid": formField.inputProps["aria-invalid"] }
+        : {}),
+
       // Having both legend and description in labelledby seems to work best, ref. https://mortentollefsen.no/demo/radio-description.html
       "aria-labelledby":
         props["aria-labelledby"] ||

package/src/form/radio/RadioGroup.context.ts

@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+export interface RadioGroupContextProps {
+  name: string;
+  defaultValue?: any;
+  value?: any;
+  onChange: (value: any) => void;
+  required?: boolean;
+}
+
+export const RadioGroupContext = createContext<RadioGroupContextProps | null>(
+  null,
+);

package/src/form/radio/RadioGroup.tsx

@@ -3,18 +3,9 @@ import { useId } from "../../utils-external";
 import { cl } from "../../utils/helpers";
 import { Fieldset, FieldsetProps } from "../fieldset";
 import { FieldsetContext } from "../fieldset/context";
+import { RadioGroupContext } from "./RadioGroup.context";
 
-export interface RadioGroupContextProps {
-  name: string;
-  defaultValue?: any;
-  value?: any;
-  onChange: (value: any) => void;
-  required?: boolean;
-}
-
-export const RadioGroupContext =
-  React.createContext<RadioGroupContextProps | null>(null);
-
+// TODO: Omit "role" in next major
 export interface RadioGroupProps extends Omit<
   FieldsetProps,
   "onChange" | "errorPropagation" | "defaultValue" | "nativeReadOnly"
@@ -75,29 +66,29 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
     const nameId = useId();
 
     return (
-      <Fieldset
-        {...rest}
-        readOnly={readOnly}
-        ref={ref}
-        className={cl(
-          className,
-          "aksel-radio-group",
-          `aksel-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
-        )}
-        _fieldsSupportNativeReadOnly={false}
+      <RadioGroupContext.Provider
+        value={{
+          name: name ?? `radioGroupName-${nameId}`,
+          defaultValue,
+          value,
+          onChange,
+          required,
+        }}
       >
-        <RadioGroupContext.Provider
-          value={{
-            name: name ?? `radioGroupName-${nameId}`,
-            defaultValue,
-            value,
-            onChange,
-            required,
-          }}
+        <Fieldset
+          role="radiogroup"
+          {...rest}
+          readOnly={readOnly}
+          ref={ref}
+          className={cl(
+            className,
+            "aksel-radio-group",
+            `aksel-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
+          )}
         >
           <div className="aksel-radio-buttons">{children}</div>
-        </RadioGroupContext.Provider>
-      </Fieldset>
+        </Fieldset>
+      </RadioGroupContext.Provider>
     );
   },
 );

package/src/form/radio/useRadio.ts

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { omit } from "../../utils-external";
 import { useFormField } from "../useFormField";
-import { RadioGroupContext } from "./RadioGroup";
+import { RadioGroupContext } from "./RadioGroup.context";
 import { RadioProps } from "./types";
 
 /**

package/src/inline-message/root/InlineMessage.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { useThemeInternal } from "../../theme/Theme";
 import { BodyLong } from "../../typography";
-import { type OverridableComponent, useId } from "../../utils-external";
+import { type OverridableComponent } from "../../utils-external";
 import { cl } from "../../utils/helpers";
 import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { InlineMessageIcon } from "../icon/InlineMessageIcon";
@@ -58,10 +58,7 @@ export const InlineMessage: OverridableComponent<
     forwardedRef,
   ) => {
     const themeContext = useThemeInternal();
-
     const translate = useI18n("global");
-    const statusId = useId();
-    const contentId = useId();
 
     return (
       <BodyLong
@@ -75,18 +72,11 @@ export const InlineMessage: OverridableComponent<
       >
         <InlineMessageIcon status={status} />
         {status && (
-          <BodyLong id={statusId} aria-hidden visuallyHidden>
+          <BodyLong as="span" visuallyHidden>
             {`${translate(status)}: `}
           </BodyLong>
         )}
-        {/** biome-ignore lint/a11y/useAriaPropsSupportedByRole: Testing shows that this works. */}
-        <span
-          data-color={themeContext?.color}
-          id={contentId}
-          aria-labelledby={cl(statusId, contentId)}
-        >
-          {children}
-        </span>
+        <span data-color={themeContext?.color}>{children}</span>
       </BodyLong>
     );
   },

package/src/modal/Modal.tsx

@@ -93,6 +93,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       style,
       onClick,
       onMouseDown,
+      size = "medium",
       ...rest
     }: ModalProps,
     ref,
@@ -153,12 +154,17 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 
-    const mergedClassName = cl("aksel-modal", className, {
-      [polyfillClassName]: needPolyfill,
-      "aksel-modal--autowidth": !width,
-      [`aksel-modal--${width}`]: isWidthPreset,
-      "aksel-modal--top": placement === "top" && !needPolyfill,
-    });
+    const mergedClassName = cl(
+      "aksel-modal",
+      className,
+      `aksel-modal--${size}`,
+      {
+        [polyfillClassName]: needPolyfill,
+        "aksel-modal--autowidth": !width,
+        [`aksel-modal--width-${width}`]: isWidthPreset,
+        "aksel-modal--top": placement === "top" && !needPolyfill,
+      },
+    );
 
     const mergedStyle = {
       ...style,

package/src/modal/ModalUtils.ts

@@ -35,7 +35,7 @@ function useIsModalOpen(modalRef: HTMLDialogElement | null) {
       return;
     }
 
-    setIsOpen(modalRef.open);
+    setIsOpen(modalRef.open); // eslint-disable-line react-hooks/set-state-in-effect
 
     const observer = new MutationObserver(() => {
       setIsOpen(modalRef.open);

package/src/modal/types.ts

@@ -1,6 +1,7 @@
 interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
    * Affects internal padding
+   * @default "medium"
    */
   size?: "small" | "medium";
   /**

package/src/primitives/box/Box.tsx

@@ -77,7 +77,7 @@ interface BoxComponentType extends OverridableComponent<
   /**
    * @deprecated Deprecated in v8. Use `Box` from '@navikt/ds-react/Box' instead (with same props).
    *
-   * **Run `npx @navikt/aksel@latest codemod v8-box-new`> to migrate.**
+   * **Run `npx @navikt/aksel@latest codemod v8-box-new` to migrate.**
    */
   New: typeof BoxNew;
 }

package/src/tabs/useTabs.ts

@@ -17,18 +17,14 @@ export function useTabs({
     onChange,
   });
 
-  /**
-   * Sync focused `value` with controlled `selectedValue`
-   */
+  /* Sync focused `value` with controlled `selectedValue` */
   useEffect(() => {
     if (value != null) {
-      setFocusedValue(value);
+      setFocusedValue(value); // eslint-disable-line react-hooks/set-state-in-effect
     }
   }, [value]);
 
-  /**
-   * Scope ids for better tracking
-   */
+  /* Scope ids for better tracking */
   const uuid = useId();
 
   return {