@navikt/ds-react 7.7.0 → 7.8.1

package/src/date/monthpicker/MonthPicker.tsx

@@ -3,11 +3,15 @@ import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useDateLocale } from "../../util/i18n/i18n.context";
-import { DateContext, SharedMonthProvider } from "../context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import {
+  DateInputContext,
+  DateTranslationContextProvider,
+  SharedMonthProvider,
+} from "../context";
 import { MonthPickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
-import { getLocaleFromString } from "../utils";
+import { getLocaleFromString, getTranslations } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthPickerStandalone from "./MonthPickerStandalone";
 import MonthSelector from "./MonthSelector";
@@ -69,6 +73,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
       onClose,
       onOpenToggle,
       locale,
+      translations,
       onMonthSelect,
       className,
       wrapperClassName,
@@ -79,6 +84,11 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     },
     ref,
   ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
     const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
@@ -103,61 +113,64 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     }
 
     return (
-      <DateContext.Provider
-        value={{
-          open: _open ?? open,
-          onOpen: () => {
-            setOpen((x) => !x);
-            onOpenToggle?.();
-          },
-          ariaId,
-          defined: true,
-        }}
-      >
-        <div
-          ref={mergedRef}
-          className={cl("navds-date__wrapper", wrapperClassName)}
+      <DateTranslationContextProvider translate={translate}>
+        <DateInputContext.Provider
+          value={{
+            open: _open ?? open,
+            onOpen: () => {
+              setOpen((x) => !x);
+              onOpenToggle?.();
+            },
+            ariaId,
+            defined: true,
+          }}
         >
-          {children}
-          <DateWrapper
-            open={_open ?? open}
-            anchor={wrapperRef}
-            onClose={() => onClose?.() ?? setOpen(false)}
-            locale={locale}
-            variant="month"
-            popoverProps={{
-              id: ariaId,
-              strategy,
-            }}
+          <div
+            ref={mergedRef}
+            className={cl("navds-date__wrapper", wrapperClassName)}
           >
-            <DayPickerProvider
-              initialProps={{
-                locale: locale
-                  ? getLocaleFromString(locale)
-                  : langProviderLocale,
-                selected: selected ?? selectedMonth,
-                toDate,
-                fromDate,
-                month: selected ?? selectedMonth,
+            {children}
+            <DateWrapper
+              open={_open ?? open}
+              anchor={wrapperRef}
+              onClose={() => onClose?.() ?? setOpen(false)}
+              locale={locale}
+              translate={translate}
+              variant="month"
+              popoverProps={{
+                id: ariaId,
+                strategy,
               }}
             >
-              <div className={cl("rdp-month", className)}>
-                <SharedMonthProvider
-                  dropdownCaption={dropdownCaption}
-                  disabled={disabled}
-                  selected={selected ?? selectedMonth}
-                  onSelect={handleSelect}
-                  year={year}
-                  onYearChange={onYearChange}
-                >
-                  <MonthCaption />
-                  <MonthSelector />
-                </SharedMonthProvider>
-              </div>
-            </DayPickerProvider>
-          </DateWrapper>
-        </div>
-      </DateContext.Provider>
+              <DayPickerProvider
+                initialProps={{
+                  locale: locale
+                    ? getLocaleFromString(locale)
+                    : langProviderLocale,
+                  selected: selected ?? selectedMonth,
+                  toDate,
+                  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>
+              </DayPickerProvider>
+            </DateWrapper>
+          </div>
+        </DateInputContext.Provider>
+      </DateTranslationContextProvider>
     );
   },
 ) as MonthPickerComponent;

package/src/date/monthpicker/MonthPickerStandalone.tsx

@@ -1,8 +1,12 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
-import { SharedMonthProvider } from "../context";
-import { getLocaleFromString } from "../utils";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import {
+  DateTranslationContextProvider,
+  SharedMonthProvider,
+} from "../context";
+import { getLocaleFromString, getTranslations } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthSelector from "./MonthSelector";
 import { MonthPickerProps } from "./types";
@@ -34,7 +38,8 @@ export const MonthPickerStandalone = forwardRef<
       disabled = [],
       selected,
       className,
-      locale = "nb",
+      locale,
+      translations,
       onMonthSelect,
       defaultSelected,
       year,
@@ -42,6 +47,12 @@ export const MonthPickerStandalone = forwardRef<
     },
     ref,
   ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
+    const langProviderLocale = useDateLocale();
     const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
       defaultSelected,
     );
@@ -58,29 +69,31 @@ export const MonthPickerStandalone = forwardRef<
 
     return (
       <div ref={ref} className={cl("navds-date__wrapper", className)}>
-        <DayPickerProvider
-          initialProps={{
-            locale: getLocaleFromString(locale),
-            selected: selected ?? selectedMonth,
-            toDate,
-            fromDate,
-            month: selected ?? selectedMonth,
-          }}
-        >
-          <div className="navds-date rdp-month">
-            <SharedMonthProvider
-              dropdownCaption={dropdownCaption}
-              disabled={disabled}
-              selected={selected ?? selectedMonth}
-              onSelect={handleSelect}
-              year={year}
-              onYearChange={onYearChange}
-            >
-              <MonthCaption />
-              <MonthSelector />
-            </SharedMonthProvider>
-          </div>
-        </DayPickerProvider>
+        <DateTranslationContextProvider translate={translate}>
+          <DayPickerProvider
+            initialProps={{
+              locale: locale ? getLocaleFromString(locale) : langProviderLocale,
+              selected: selected ?? selectedMonth,
+              toDate,
+              fromDate,
+              month: selected ?? selectedMonth,
+            }}
+          >
+            <div className="navds-date rdp-month">
+              <SharedMonthProvider
+                dropdownCaption={dropdownCaption}
+                disabled={disabled}
+                selected={selected ?? selectedMonth}
+                onSelect={handleSelect}
+                year={year}
+                onYearChange={onYearChange}
+              >
+                <MonthCaption />
+                <MonthSelector />
+              </SharedMonthProvider>
+            </div>
+          </DayPickerProvider>
+        </DateTranslationContextProvider>
       </div>
     );
   },

package/src/date/monthpicker/types.ts

@@ -1,3 +1,4 @@
+import { ComponentTranslation } from "../../util/i18n/i18n.types";
 import { Matcher } from "../utils";
 
 export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -25,8 +26,15 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Changes monthpicker locale
    * @default "nb" (norsk bokmål)
+   * @deprecated Use `<Provider />`-component
    */
   locale?: "nb" | "nn" | "en";
+  /**
+   * i18n-API for customizing texts and labels.
+   *
+   * **NB: If you need to change the language, use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) instead.**
+   */
+  translations?: ComponentTranslation<"DatePicker">;
   /**
    * Display dropdown for choosing year. Needs `fromDate` + `toDate` to work.
    * @default false

package/src/date/parts/DateInput.tsx

@@ -5,8 +5,7 @@ import { ReadOnlyIcon } from "../../form/ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../../form/useFormField";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { useI18n } from "../../util/i18n/i18n.context";
-import { useDateInputContext } from "../context";
+import { useDateInputContext, useDateTranslationContext } from "../context";
 
 export interface DateInputProps
   extends FormFieldProps,
@@ -47,7 +46,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
   } = props;
 
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const translate = useI18n("DatePicker");
+  const translate = useDateTranslationContext().translate;
 
   const isDatepickerVariant = variant === "datepicker";
 

package/src/date/parts/DateWrapper.tsx

@@ -5,8 +5,8 @@ import { Modal } from "../../modal";
 import { useModalContext } from "../../modal/Modal.context";
 import { Popover } from "../../popover";
 import { useMedia } from "../../util/hooks";
-import { useI18n } from "../../util/i18n/i18n.context";
-import { getTranslations } from "../utils";
+import { TFunction, useI18n } from "../../util/i18n/i18n.context";
+import { getGlobalTranslations } from "../utils";
 
 const variantToLabel = {
   single: "chooseDate",
@@ -22,6 +22,7 @@ type DateWrapperProps = {
   anchor: HTMLDivElement | null;
   /** @deprecated Temporary to support locale prop */
   locale: "nb" | "nn" | "en" | undefined;
+  translate: TFunction<"DatePicker">;
   variant: "single" | "multiple" | "range" | "month";
   popoverProps: {
     id?: string;
@@ -35,10 +36,11 @@ export const DateWrapper = ({
   onClose,
   anchor,
   locale,
+  translate,
   variant,
   popoverProps,
 }: DateWrapperProps) => {
-  const translate = useI18n("DatePicker", getTranslations(locale));
+  const translateGlobal = useI18n("global", getGlobalTranslations(locale));
   const modalRef = useRef<HTMLDialogElement>(null);
   const isInModal = useModalContext(false) !== undefined;
   const hideModal =
@@ -86,7 +88,7 @@ export const DateWrapper = ({
           size="small"
           type="button"
         >
-          {translate("close")}
+          {translateGlobal("close")}
         </Button>
       </div>
     </Modal>

package/src/date/utils/index.ts

@@ -5,7 +5,11 @@ export {
   INPUT_DATE_STRING_FORMAT_MONTH,
   parseDate,
 } from "./parse-date";
-export { getLocaleFromString, getTranslations } from "./locale";
+export {
+  getLocaleFromString,
+  getTranslations,
+  getGlobalTranslations,
+} from "./locale";
 export { disableDate } from "./dates-disabled";
 
 export { dateIsInCurrentMonth, isValidDate } from "./check-dates";

package/src/date/utils/locale.ts

@@ -16,7 +16,7 @@ export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {
 
 /**
  * @private
- * Temporary for backwards compatibility with locale prop
+ * Temporary for backwards compatibility with locale prop. Can be removed when locale prop has been removed.
  */
 export const getTranslations = (locale: string | undefined) => {
   switch (locale) {
@@ -29,3 +29,19 @@ export const getTranslations = (locale: string | undefined) => {
       return undefined;
   }
 };
+
+/**
+ * @private
+ * Temporary for backwards compatibility with locale prop. Can be removed when locale prop has been removed.
+ */
+export const getGlobalTranslations = (locale: string | undefined) => {
+  switch (locale) {
+    case "nn":
+      return nn_translations.global;
+    case "en":
+    case "en-GB":
+      return en_translations.global;
+    default:
+      return undefined;
+  }
+};

package/src/form/combobox/ComboboxWrapper.tsx

@@ -27,21 +27,20 @@ const ComboboxWrapper = ({
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
 
-  function onFocusInsideWrapper(e) {
+  function onFocusInsideWrapper(event: React.FocusEvent<HTMLDivElement>) {
     if (
-      !wrapperRef.current?.contains(e.relatedTarget) &&
-      toggleOpenButtonRef?.current !== e.target
+      !wrapperRef.current?.contains(event.relatedTarget) &&
+      toggleOpenButtonRef?.current !== event.target
     ) {
-      toggleIsListOpen(true);
       setHasFocusWithin(true);
     }
   }
 
-  function onBlurWrapper(e) {
-    if (!wrapperRef.current?.contains(e.relatedTarget)) {
+  function onBlurWrapper(event: React.FocusEvent<HTMLDivElement>) {
+    if (!wrapperRef.current?.contains(event.relatedTarget)) {
       toggleIsListOpen(false);
       setHasFocusWithin(false);
-      clearInput(e);
+      clearInput(event);
     }
   }
 

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

@@ -26,12 +26,12 @@ const FilteredOptions = () => {
   const { maxSelected } = useSelectedOptionsContext();
 
   const shouldRenderNonSelectables =
-    maxSelected?.isLimitReached || // Render maxSelected message
+    maxSelected.isLimitReached || // Render maxSelected message
     isLoading || // Render loading message
     (!isLoading && filteredOptions.length === 0 && !allowNewValues); // Render no hits message
 
   const shouldRenderFilteredOptionsList =
-    (allowNewValues && isValueNew && !maxSelected?.isLimitReached) || // Render add new option
+    (allowNewValues && isValueNew && !maxSelected.isLimitReached) || // Render add new option
     filteredOptions.length > 0; // Render filtered options
 
   return (
@@ -45,7 +45,7 @@ const FilteredOptions = () => {
     >
       {shouldRenderNonSelectables && (
         <div className="navds-combobox__list_non-selectables" role="status">
-          {maxSelected?.isLimitReached && <MaxSelectedMessage />}
+          {maxSelected.isLimitReached && <MaxSelectedMessage />}
           {isLoading && <LoadingMessage />}
           {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
             <NoSearchHitsMessage />
@@ -60,7 +60,7 @@ const FilteredOptions = () => {
           role="listbox"
           className="navds-combobox__list-options"
         >
-          {isValueNew && !maxSelected?.isLimitReached && allowNewValues && (
+          {isValueNew && !maxSelected.isLimitReached && allowNewValues && (
             <AddNewOption />
           )}
           {filteredOptions.map((option) => (

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

@@ -39,7 +39,7 @@ const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
   const [start, highlight, end] = useTextHighlight(option.label, searchTerm);
 
   const isDisabled = (_option: ComboboxOption) =>
-    maxSelected?.isLimitReached && !isInList(_option.value, selectedOptions);
+    maxSelected.isLimitReached && !isInList(_option.value, selectedOptions);
 
   return (
     <li

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

@@ -9,14 +9,7 @@ const MaxSelectedMessage = () => {
     inputProps: { id },
   } = useInputContext();
   const { maxSelected, selectedOptions } = useSelectedOptionsContext();
-  const translate = useI18n(
-    "Combobox",
-    maxSelected?.message ? { maxSelected: maxSelected.message } : undefined,
-  );
-
-  if (!maxSelected) {
-    return null;
-  }
+  const translate = useI18n("Combobox");
 
   return (
     <div
@@ -25,7 +18,7 @@ const MaxSelectedMessage = () => {
     >
       {translate("maxSelected", {
         selected: selectedOptions.length,
-        limit: maxSelected.limit,
+        limit: maxSelected.limit || 0,
       })}
     </div>
   );

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

@@ -142,13 +142,13 @@ const FilteredOptionsProvider = ({
       }
       virtualFocus.resetFocus();
       if (newState ?? !isInternalListOpen) {
-        setHideCaret(!!maxSelected?.isLimitReached);
+        setHideCaret(maxSelected.isLimitReached);
       }
       setInternalListOpen((oldState) => newState ?? !oldState);
     },
     [
       virtualFocus,
-      maxSelected?.isLimitReached,
+      maxSelected.isLimitReached,
       isInternalListOpen,
       setHideCaret,
       disabled,
@@ -178,7 +178,7 @@ const FilteredOptionsProvider = ({
       }
     }
     const maybeMaxSelectedOptionsId =
-      maxSelected?.isLimitReached &&
+      maxSelected.isLimitReached &&
       filteredOptionsUtils.getMaxSelectedOptionsId(id);
 
     return (
@@ -188,7 +188,7 @@ const FilteredOptionsProvider = ({
   }, [
     isListOpen,
     isLoading,
-    maxSelected?.isLimitReached,
+    maxSelected.isLimitReached,
     value,
     partialAriaDescribedBy,
     shouldAutocomplete,

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

@@ -93,7 +93,7 @@ const InputProvider = ({ children, value: props }: Props) => {
   );
 
   const clearInput = useCallback(
-    (event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent) => {
+    (event: React.PointerEvent | React.KeyboardEvent | React.FocusEvent) => {
       onClear?.(event);
       externalOnChange?.("");
       setInternalValue("");

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

@@ -75,7 +75,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     const onEnter = useCallback(
       (event: React.KeyboardEvent) => {
-        const isTextInSelectedOptions = (text: string) =>
+        const isSelected = (text: string) =>
           selectedOptions.some(
             (option) =>
               option.label.toLocaleLowerCase() === text.toLocaleLowerCase(),
@@ -85,10 +85,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           event.preventDefault();
           // Selecting a value from the dropdown / FilteredOptions
           toggleOption(currentOption, event);
-          if (!isMultiSelect && !isTextInSelectedOptions(currentOption.label)) {
+          if (!isMultiSelect && !isSelected(currentOption.label)) {
             toggleIsListOpen(false);
           }
-        } else if (isTextInSelectedOptions(value)) {
+        } else if (isSelected(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
           clearInput(event);
@@ -109,23 +109,23 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             filteredOptionsUtil.normalizeText(value) ===
             filteredOptionsUtil.normalizeText(autoCompletedOption?.label ?? "");
 
-          let selectedValue: ComboboxOption | undefined;
+          let optionToToggle: ComboboxOption | undefined;
 
           if (
             shouldAutocomplete &&
             autoCompletedOption &&
             autoCompleteMatchesValue
           ) {
-            selectedValue = autoCompletedOption;
+            optionToToggle = autoCompletedOption;
           } else if (allowNewValues && isValueNew) {
-            selectedValue = { label: value, value };
+            optionToToggle = { label: value, value };
           }
 
-          if (!selectedValue) {
+          if (!optionToToggle) {
             return;
           }
-          toggleOption(selectedValue, event);
-          if (!isMultiSelect && !isTextInSelectedOptions(selectedValue.label)) {
+          toggleOption(optionToToggle, event);
+          if (!isMultiSelect && !isSelected(optionToToggle.label)) {
             toggleIsListOpen(false);
           }
         }
@@ -279,7 +279,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         value={value}
         onBlur={composeEventHandlers(onBlur, virtualFocus.resetFocus)}
         onClick={() => {
-          setHideCaret(!!maxSelected?.isLimitReached);
+          setHideCaret(maxSelected.isLimitReached);
           value !== searchTerm && onChange(value);
         }}
         onInput={onChangeHandler}

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

@@ -1,9 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { XMarkIcon } from "@navikt/aksel-icons";
 import { useMergeRefs } from "../../../util/hooks";
-import { useI18n } from "../../../util/i18n/i18n.context";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import SelectedOptions from "../SelectedOptions/SelectedOptions";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -28,35 +26,31 @@ export const InputController = forwardRef<
   >
 >((props, ref) => {
   const {
-    clearButton = true,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Remove when prop has been removed from ComboboxProps.
+    clearButton,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Remove when prop has been removed from ComboboxProps.
     clearButtonLabel,
     toggleListButton = true,
     inputClassName,
     shouldShowSelectedOptions = true,
+
     ...rest
   } = props;
 
   const {
-    clearInput,
     focusInput,
     inputProps,
-    value,
     size = "medium",
     inputRef,
     toggleOpenButtonRef,
     readOnly,
   } = useInputContext();
 
-  const { activeDecendantId } = useFilteredOptionsContext();
+  const { activeDecendantId, toggleIsListOpen } = useFilteredOptionsContext();
   const { selectedOptions } = useSelectedOptionsContext();
 
   const mergedInputRef = useMergeRefs(inputRef, ref);
 
-  const translate = useI18n(
-    "Combobox",
-    clearButtonLabel ? { clear: clearButtonLabel } : undefined,
-  );
-
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
@@ -64,7 +58,14 @@ export const InputController = forwardRef<
         "navds-combobox__wrapper-inner--virtually-unfocused":
           activeDecendantId !== undefined,
       })}
-      onClick={focusInput}
+      onClick={() => {
+        if (inputProps.disabled || readOnly) {
+          return;
+        }
+
+        toggleIsListOpen(true);
+        focusInput();
+      }}
     >
       {!shouldShowSelectedOptions ? (
         <Input
@@ -86,19 +87,7 @@ export const InputController = forwardRef<
           />
         </SelectedOptions>
       )}
-      <div>
-        {value && clearButton && (
-          <div
-            onClick={clearInput}
-            className="navds-combobox__button-clear"
-            aria-hidden
-            title={translate("clear")}
-          >
-            <XMarkIcon />
-          </div>
-        )}
-        {toggleListButton && <ToggleListButton ref={toggleOpenButtonRef} />}
-      </div>
+      {toggleListButton && <ToggleListButton ref={toggleOpenButtonRef} />}
     </div>
   );
 });