@navikt/ds-react 8.2.2 → 8.4.0

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

@@ -38,11 +38,10 @@ const getValidationMessage = (from = {}, to = {}): RangeValidationT => ({
   },
 });
 
-export interface UseRangeDatepickerOptions
-  extends Omit<
-    UseDatepickerOptions,
-    "defaultSelected" | "onDateChange" | "onValidate"
-  > {
+export interface UseRangeDatepickerOptions extends Omit<
+  UseDatepickerOptions,
+  "defaultSelected" | "onDateChange" | "onValidate"
+> {
   /**
    * The initially selected DateRange
    */

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

@@ -1,7 +1,7 @@
 import { isBefore, isSameDay, isWeekend } from "date-fns";
 import React, { useCallback } from "react";
 import { ClassNames, DayPicker, dateMatchModifiers } from "react-day-picker";
-import { Show } from "../../../layout/responsive";
+import { Show } from "../../../primitives/responsive";
 import { omit } from "../../../utils-external";
 import { cl } from "../../../utils/helpers";
 import { useDateLocale } from "../../../utils/i18n/i18n.hooks";

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

@@ -15,11 +15,10 @@ import {
 } from "../DatePicker.types";
 import { ReactDayPicker } from "./DatePicker.RDP";
 
-interface DatePickerStandaloneDefaultProps
-  extends Omit<
-    DatePickerDefaultProps,
-    "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
-  > {
+interface DatePickerStandaloneDefaultProps extends Omit<
+  DatePickerDefaultProps,
+  "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
+> {
   /**
    * Datepicker classname
    */

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

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { CalendarWeek, useDayPicker } from "react-day-picker";
 import { Button } from "../../../button";
-import { Hide, Show } from "../../../layout/responsive";
+import { Hide, Show } from "../../../primitives/responsive";
 import { Detail } from "../../../typography";
 import { cl } from "../../../utils/helpers";
 import { useDateTranslationContext } from "../../Date.locale";

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { CalendarWeek } from "react-day-picker";
-import { Show } from "../../../layout/responsive";
+import { Show } from "../../../primitives/responsive";
 import { Detail } from "../../../typography";
 import { useId } from "../../../utils-external";
 import { useDateTranslationContext } from "../../Date.locale";

package/src/date/monthpicker/hooks/useMonthPicker.tsx

@@ -6,11 +6,10 @@ import { getLocaleFromString } from "../../Date.locale";
 import { formatDateForInput, isValidDate, parseDate } from "../../date-utils";
 import { MonthPickerProps } from "../MonthPicker.types";
 
-export interface UseMonthPickerOptions
-  extends Pick<
-    MonthPickerProps,
-    "locale" | "fromDate" | "toDate" | "disabled" | "defaultSelected"
-  > {
+export interface UseMonthPickerOptions extends Pick<
+  MonthPickerProps,
+  "locale" | "fromDate" | "toDate" | "disabled" | "defaultSelected"
+> {
   /**
    * Make Date-selection required
    */

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

@@ -11,11 +11,10 @@ import { MonthPickerProps } from "../MonthPicker.types";
 import { MonthPickerCaption } from "./MonthPicker.Caption";
 import { MonthPickerTable } from "./MonthPicker.Table";
 
-export interface MonthPickerStandaloneProps
-  extends Omit<
-    MonthPickerProps,
-    "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
-  > {
+export interface MonthPickerStandaloneProps extends Omit<
+  MonthPickerProps,
+  "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
+> {
   /**
    * Monthpicker classname
    */

package/src/dialog/close-trigger/DialogCloseTrigger.tsx

@@ -3,8 +3,7 @@ import { Slot } from "../../utils/components/slot/Slot";
 import { composeEventHandlers } from "../../utils/helpers";
 import { useDialogContext } from "../root/DialogRoot.context";
 
-interface DialogCloseTriggerProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface DialogCloseTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactElement;
 }
 

package/src/dialog/popup/DialogPopupInternal.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { BoxNew, type BoxNewProps } from "../../layout/box";
-import { DismissableLayer } from "../../overlays/dismissablelayer/DismissableLayer";
+import { BoxNew, type BoxNewProps } from "../../primitives/box";
+import { DismissableLayer } from "../../utils/components/dismissablelayer/DismissableLayer";
 import { FocusBoundary } from "../../utils/components/focus-boundary/FocusBoundary";
 import { FocusGuards } from "../../utils/components/focus-guards/FocusGuards";
 import { cl } from "../../utils/helpers";
@@ -14,8 +14,7 @@ import { useDialogContext } from "../root/DialogRoot.context";
 
 type DialogPosition = "center" | "bottom" | "left" | "right" | "fullscreen";
 
-interface DialogPopupInternalProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface DialogPopupInternalProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Determines if the dialog enters a modal state when open.
    * - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.

package/src/dropdown/Menu/GroupedList/GroupedHeading.tsx

@@ -1,8 +1,7 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 
-export interface GroupedHeadingProps
-  extends React.HTMLAttributes<HTMLDetailsElement> {
+export interface GroupedHeadingProps extends React.HTMLAttributes<HTMLDetailsElement> {
   /**
    * Heading
    */

package/src/dropdown/Menu/GroupedList/GroupedItem.tsx

@@ -3,8 +3,7 @@ import type { OverridableComponent } from "../../../utils-external";
 import { cl, composeEventHandlers } from "../../../utils/helpers";
 import { DropdownContext } from "../../context";
 
-export interface GroupedItemProps
-  extends React.ButtonHTMLAttributes<HTMLElement> {
+export interface GroupedItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
   /**
    * Menu item content
    */

package/src/dropdown/Menu/GroupedList/index.tsx

@@ -4,18 +4,16 @@ import { cl } from "../../../utils/helpers";
 import GroupedHeading, { GroupedHeadingProps } from "./GroupedHeading";
 import GroupedItem, { GroupedItemProps } from "./GroupedItem";
 
-export interface GroupedListProps
-  extends React.HTMLAttributes<HTMLDListElement> {
+export interface GroupedListProps extends React.HTMLAttributes<HTMLDListElement> {
   /**
    * Menu list content
    */
   children: React.ReactNode;
 }
 
-export interface GroupedListType
-  extends React.ForwardRefExoticComponent<
-    GroupedListProps & React.RefAttributes<HTMLDListElement>
-  > {
+export interface GroupedListType extends React.ForwardRefExoticComponent<
+  GroupedListProps & React.RefAttributes<HTMLDListElement>
+> {
   /**
    * @see 🏷️ {@link GroupedHeadingProps}
    */

package/src/dropdown/Menu/List/index.tsx

@@ -10,10 +10,9 @@ export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;
 }
 
-export interface ListType
-  extends React.ForwardRefExoticComponent<
-    ListProps & React.RefAttributes<HTMLUListElement>
-  > {
+export interface ListType extends React.ForwardRefExoticComponent<
+  ListProps & React.RefAttributes<HTMLUListElement>
+> {
   /**
    * @see 🏷️ {@link ListItemProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support

package/src/dropdown/Menu/index.tsx

@@ -39,10 +39,11 @@ interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     | "left-end";
 }
 
-export interface MenuType<Props = DropdownMenuProps>
-  extends React.ForwardRefExoticComponent<
-    Props & React.RefAttributes<HTMLDivElement>
-  > {
+export interface MenuType<
+  Props = DropdownMenuProps,
+> extends React.ForwardRefExoticComponent<
+  Props & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link ListType}
    */

package/src/dropdown/Toggle.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef, useContext } from "react";
 import { cl, composeEventHandlers } from "../utils/helpers";
 import { DropdownContext } from "./context";
 
-export interface DropdownToggleProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface DropdownToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Button content
    */

package/src/expansion-card/ExpansionCardContent.tsx

@@ -4,8 +4,7 @@ import { BodyLong } from "../typography";
 import { cl } from "../utils/helpers";
 import { ExpansionCardContext } from "./context";
 
-export interface ExpansionCardContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface ExpansionCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -3,8 +3,7 @@ import { BodyLong } from "../typography";
 import { cl } from "../utils/helpers";
 import { ExpansionCardContext } from "./context";
 
-export interface ExpansionCardDescriptionProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface ExpansionCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
   children: React.ReactNode;
 }
 

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -4,8 +4,7 @@ import { cl } from "../utils/helpers";
 import { useI18n } from "../utils/i18n/i18n.hooks";
 import { ExpansionCardContext } from "./context";
 
-export interface ExpansionCardHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface ExpansionCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from "react";
 import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 
-export interface ExpansionCardTitleProps
-  extends React.HTMLAttributes<HTMLHeadingElement> {
+export interface ExpansionCardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
   children: React.ReactNode;
   /**
    * Changes text-sizing

package/src/form/checkbox/CheckboxGroup.tsx

@@ -13,11 +13,10 @@ export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
   null,
 );
 
-export interface CheckboxGroupProps
-  extends Omit<
-    FieldsetProps,
-    "onChange" | "errorPropagation" | "defaultValue" | "nativeReadOnly"
-  > {
+export interface CheckboxGroupProps extends Omit<
+  FieldsetProps,
+  "onChange" | "errorPropagation" | "defaultValue" | "nativeReadOnly"
+> {
   /**
    * Collection of `<Checkbox/>`.
    */

package/src/form/checkbox/types.ts

@@ -2,7 +2,8 @@ import { InputHTMLAttributes } from "react";
 import { FormFieldProps } from "../useFormField";
 
 export interface CheckboxProps
-  extends FormFieldProps,
+  extends
+    FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
    * Adds error indication on checkbox.

package/src/form/combobox/Combobox.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { Floating } from "../../overlays/floating/Floating";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { Floating } from "../../utils/components/floating/Floating";
 import { cl } from "../../utils/helpers";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";

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

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from "react";
-import { DismissableLayer } from "../../../overlays/dismissablelayer/DismissableLayer";
-import { Floating } from "../../../overlays/floating/Floating";
 import { useClientLayoutEffect } from "../../../utils-external";
+import { DismissableLayer } from "../../../utils/components/dismissablelayer/DismissableLayer";
+import { Floating } from "../../../utils/components/floating/Floating";
 import { cl } from "../../../utils/helpers";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";

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

@@ -87,7 +87,13 @@ const FilteredOptionsProvider = ({
   const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] =
     useState(false);
 
-  const filteredOptionsMap = useMemo(() => {
+  /**
+   * Returns a map of all possible virtual options avaliable in the combobox, including:
+   * - Filtered options
+   * - Custom options
+   * - Add new option
+   */
+  const allOptionsMap = useMemo(() => {
     const initialMap = {
       [filteredOptionsUtils.getAddNewOptionId(id)]: allowNewValues
         ? toComboboxOption(value)
@@ -99,15 +105,24 @@ const FilteredOptionsProvider = ({
       }, {}),
     };
 
-    // Add the options to the map
-    const finalMap = options.reduce((map, _option) => {
+    /* Add the filtered options to the map */
+    const mapWithFiltered = filteredOptions.reduce((map, _option) => {
       const _id = filteredOptionsUtils.getOptionId(id, _option.value);
       map[_id] = _option;
       return map;
     }, initialMap);
 
+    /* Add all options, avoiding duplicates */
+    const finalMap = options.reduce((map, _option) => {
+      const _id = filteredOptionsUtils.getOptionId(id, _option.value);
+      if (!map[_id]) {
+        map[_id] = _option;
+      }
+      return map;
+    }, mapWithFiltered);
+
     return finalMap;
-  }, [allowNewValues, customOptions, id, options, value]);
+  }, [allowNewValues, customOptions, id, filteredOptions, options, value]);
 
   useClientLayoutEffect(() => {
     const autoCompleteCandidate =
@@ -161,8 +176,8 @@ const FilteredOptionsProvider = ({
   const isValueNew = useMemo(
     () =>
       Boolean(searchTerm) &&
-      !filteredOptionsMap[filteredOptionsUtils.getOptionId(id, searchTerm)],
-    [filteredOptionsMap, id, searchTerm],
+      !allOptionsMap[filteredOptionsUtils.getOptionId(id, searchTerm)],
+    [allOptionsMap, id, searchTerm],
   );
 
   const ariaDescribedBy = useMemo(() => {
@@ -200,9 +215,8 @@ const FilteredOptionsProvider = ({
   ]);
 
   const currentOption = useMemo(
-    () =>
-      filteredOptionsMap[virtualFocus.activeElement?.getAttribute("id") || -1],
-    [filteredOptionsMap, virtualFocus],
+    () => allOptionsMap[virtualFocus.activeElement?.getAttribute("id") || -1],
+    [allOptionsMap, virtualFocus],
   );
 
   const activeDecendantId = useMemo(

package/src/form/combobox/Input/Input.tsx

@@ -13,19 +13,18 @@ import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsCon
 import { ComboboxOption } from "../types";
 import { useInputContext } from "./Input.context";
 
-interface InputProps
-  extends Omit<
-    InputHTMLAttributes<HTMLInputElement>,
-    | "value"
-    | "disabled"
-    | "onClick"
-    | "onInput"
-    | "type"
-    | "role"
-    | "onKeyUp"
-    | "onKeyDown"
-    | "autoComplete"
-  > {
+interface InputProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  | "value"
+  | "disabled"
+  | "onClick"
+  | "onInput"
+  | "type"
+  | "role"
+  | "onKeyUp"
+  | "onKeyDown"
+  | "autoComplete"
+> {
   ref: React.Ref<HTMLInputElement>;
   inputClassName?: string;
   shouldShowSelectedOptions?: boolean;

package/src/form/combobox/Input/InputController.tsx

@@ -2,7 +2,7 @@
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { forwardRef } from "react";
-import { Floating } from "../../../overlays/floating/Floating";
+import { Floating } from "../../../utils/components/floating/Floating";
 import { cl } from "../../../utils/helpers";
 import { useMergeRefs } from "../../../utils/hooks";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";

package/src/form/combobox/types.ts

@@ -17,7 +17,8 @@ export type ComboboxOption = {
 };
 
 export interface ComboboxProps
-  extends FormFieldProps,
+  extends
+    FormFieldProps,
     Omit<
       InputHTMLAttributes<HTMLInputElement>,
       | "size"

package/src/form/confirmation-panel/ConfirmationPanel.tsx

@@ -5,11 +5,10 @@ import { cl } from "../../utils/helpers";
 import { Checkbox, CheckboxProps } from "../checkbox";
 import { useFormField } from "../useFormField";
 
-export interface ConfirmationPanelProps
-  extends Omit<
-    CheckboxProps,
-    "children" | "indeterminate" | "hideLabel" | "error" | "readOnly"
-  > {
+export interface ConfirmationPanelProps extends Omit<
+  CheckboxProps,
+  "children" | "indeterminate" | "hideLabel" | "error" | "readOnly"
+> {
   /**
    * Additional information on panel
    */

package/src/form/error-summary/ErrorSummary.tsx

@@ -5,8 +5,10 @@ import { useMergeRefs } from "../../utils/hooks";
 import { useI18n } from "../../utils/i18n/i18n.hooks";
 import ErrorSummaryItem from "./ErrorSummaryItem";
 
-export interface ErrorSummaryProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "tabIndex"> {
+export interface ErrorSummaryProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "tabIndex"
+> {
   /**
    * Collection of `ErrorSummary.Item`.
    */
@@ -28,10 +30,9 @@ export interface ErrorSummaryProps
   headingTag?: React.ElementType<any>;
 }
 
-interface ErrorSummaryComponent
-  extends React.ForwardRefExoticComponent<
-    ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface ErrorSummaryComponent extends React.ForwardRefExoticComponent<
+  ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * Error message with link to field.
    *

package/src/form/error-summary/ErrorSummaryItem.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from "react";
 import type { OverridableComponent } from "../../utils-external";
 import { cl } from "../../utils/helpers";
 
-export interface ErrorSummaryItemProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface ErrorSummaryItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
    * Link text
    */

package/src/form/fieldset/Fieldset.tsx

@@ -8,8 +8,7 @@ import { FieldsetContext } from "./context";
 import { useFieldset } from "./useFieldset";
 
 export interface FieldsetProps
-  extends FormFieldProps,
-    FieldsetHTMLAttributes<HTMLFieldSetElement> {
+  extends FormFieldProps, FieldsetHTMLAttributes<HTMLFieldSetElement> {
   /**
    * FormFields in Fieldset
    */