@navikt/ds-react 7.5.2 → 7.6.0

package/src/date/parts/DateInput.tsx

@@ -5,6 +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";
 
 export interface DateInputProps
@@ -46,16 +47,17 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
   } = props;
 
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const translate = useI18n("DatePicker");
 
   const isDatepickerVariant = variant === "datepicker";
 
   const conditionalVariables = {
     prefix: isDatepickerVariant ? "datepicker-input" : "monthpicker-input",
     iconTitle: {
-      open: isDatepickerVariant ? "Åpne datovelger" : "Åpne månedsvelger",
-      close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
+      open: isDatepickerVariant ? "openDatePicker" : "openMonthPicker",
+      close: isDatepickerVariant ? "closeDatePicker" : "closeMonthPicker",
     },
-  };
+  } as const;
 
   const context = useDateInputContext();
 
@@ -137,12 +139,9 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           ref={buttonRef}
         >
           <CalendarIcon
-            pointerEvents="none"
-            title={
-              context?.open
-                ? conditionalVariables.iconTitle.close
-                : conditionalVariables.iconTitle.open
-            }
+            title={translate(
+              conditionalVariables.iconTitle[context?.open ? "close" : "open"],
+            )}
           />
         </button>
       </div>

package/src/date/parts/DateWrapper.tsx

@@ -5,14 +5,23 @@ import { Modal } from "../../modal";
 import { useModalContext } from "../../modal/Modal.context";
 import { Popover } from "../../popover";
 import { useMedia } from "../../util/hooks";
-import { modalCloseButtonLabel, modalLabel } from "../utils/labels";
+import { useI18n } from "../../util/i18n/i18n.context";
+import { getTranslations } from "../utils";
+
+const variantToLabel = {
+  single: "chooseDate",
+  multiple: "chooseDates",
+  range: "chooseDateRange",
+  month: "chooseMonth",
+} as const;
 
 type DateWrapperProps = {
   open: boolean;
   children: React.ReactNode;
   onClose: () => void;
   anchor: HTMLDivElement | null;
-  locale: "nb" | "nn" | "en";
+  /** @deprecated Temporary to support locale prop */
+  locale: "nb" | "nn" | "en" | undefined;
   variant: "single" | "multiple" | "range" | "month";
   popoverProps: {
     id?: string;
@@ -29,6 +38,7 @@ export const DateWrapper = ({
   variant,
   popoverProps,
 }: DateWrapperProps) => {
+  const translate = useI18n("DatePicker", getTranslations(locale));
   const modalRef = useRef<HTMLDialogElement>(null);
   const isInModal = useModalContext(false) !== undefined;
   const hideModal =
@@ -61,7 +71,7 @@ export const DateWrapper = ({
         event.stopPropagation();
         onClose();
       }}
-      aria-label={modalLabel(locale, variant)}
+      aria-label={translate(variantToLabel[variant])}
       className={cl("navds-date__modal", {
         "navds-date__nested-modal": isInModal,
         "navds-date": variant === "month",
@@ -76,7 +86,7 @@ export const DateWrapper = ({
           size="small"
           type="button"
         >
-          {modalCloseButtonLabel(locale)}
+          {translate("close")}
         </Button>
       </div>
     </Modal>

package/src/date/utils/index.ts

@@ -1,18 +1,11 @@
 export { formatDateForInput } from "./format-date";
 export { getMonths, getYears } from "./get-dates";
-export {
-  labelMonthDropdown,
-  labelYearDropdown,
-  labels,
-  labelNextYear,
-  labelPrevYear,
-} from "./labels";
 export {
   INPUT_DATE_STRING_FORMAT_DATE,
   INPUT_DATE_STRING_FORMAT_MONTH,
   parseDate,
 } from "./parse-date";
-export { getLocaleFromString } from "./locale";
+export { getLocaleFromString, getTranslations } from "./locale";
 export { disableDate } from "./dates-disabled";
 
 export { dateIsInCurrentMonth, isValidDate } from "./check-dates";

package/src/date/utils/locale.ts

@@ -1,4 +1,6 @@
 import { enGB, nb, nn } from "date-fns/locale";
+import en_translations from "../../util/i18n/locales/en";
+import nn_translations from "../../util/i18n/locales/nn";
 
 /** @private */
 export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {
@@ -11,3 +13,19 @@ export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {
       return nb;
   }
 };
+
+/**
+ * @private
+ * Temporary for backwards compatibility with locale prop
+ */
+export const getTranslations = (locale: string | undefined) => {
+  switch (locale) {
+    case "nn":
+      return nn_translations.DatePicker;
+    case "en":
+    case "en-GB":
+      return en_translations.DatePicker;
+    default:
+      return undefined;
+  }
+};

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -45,7 +45,11 @@ const SelectedOptions: React.FC<SelectedOptionsProps> = ({
   const { value } = useInputContext();
   const { isMultiSelect } = useSelectedOptionsContext();
   return (
-    <Chips className="navds-combobox__selected-options" size={size}>
+    <Chips
+      className="navds-combobox__selected-options"
+      size={size}
+      data-type={isMultiSelect ? "multiple" : "single"}
+    >
       {value.length === 0 || (isMultiSelect && selectedOptions.length)
         ? selectedOptions.map((option, i) => (
             <Option key={option.label + i} option={option} />

package/src/form/switch/Switch.tsx

@@ -6,31 +6,12 @@ import React, {
   useState,
 } from "react";
 import { Loader } from "../../loader";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
-const SelectedIcon = () => (
-  <svg
-    width="12"
-    height="10"
-    viewBox="0 0 12 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    focusable={false}
-    role="img"
-    aria-hidden
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
 export interface SwitchProps
   extends Omit<FormFieldProps, "error" | "errorId">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
@@ -88,6 +69,8 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       defaultChecked ?? checkedProp ?? false,
     );
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     useEffect(() => {
       checkedProp !== undefined && setChecked(checkedProp);
     }, [checkedProp]);
@@ -138,11 +121,34 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               <Loader
                 size="xsmall"
                 aria-live="polite"
-                variant={checked ? "interaction" : "neutral"}
+                variant={
+                  checked
+                    ? "interaction"
+                    : themeContext
+                      ? "inverted"
+                      : "neutral"
+                }
               />
-            ) : checked ? (
-              <SelectedIcon />
-            ) : null}
+            ) : (
+              <svg
+                width="12"
+                height="10"
+                viewBox="0 0 12 10"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                focusable={false}
+                role="img"
+                aria-hidden
+                className="navds-switch__checkmark"
+              >
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z"
+                  fill="currentColor"
+                />
+              </svg>
+            )}
           </span>
         </span>
         <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">

package/src/internal-header/InternalHeader.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { UNSAFE_AkselTheme, UNSAFE_useAkselTheme } from "../provider";
 import { OverridableComponent } from "../util/types";
 import InternalHeaderButton, {
   InternalHeaderButtonProps,
@@ -76,14 +77,33 @@ interface InternalHeaderComponent
  * </InternalHeader>
  * ```
  */
-export const InternalHeader = forwardRef(({ className, ...rest }, ref) => (
-  <header
-    data-theme="dark"
-    {...rest}
-    ref={ref}
-    className={cl("navds-internalheader", className)}
-  />
-)) as InternalHeaderComponent;
+export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
+  const themeContext = UNSAFE_useAkselTheme(false);
+
+  /*
+   * Component is always in "dark" mode, so we manually override global theme.
+   */
+  if (themeContext) {
+    return (
+      <UNSAFE_AkselTheme theme="dark" asChild>
+        <header
+          {...rest}
+          ref={ref}
+          className={cl("navds-internalheader", className)}
+        />
+      </UNSAFE_AkselTheme>
+    );
+  }
+
+  return (
+    <header
+      data-theme="dark"
+      {...rest}
+      ref={ref}
+      className={cl("navds-internalheader", className)}
+    />
+  );
+}) as InternalHeaderComponent;
 
 InternalHeader.Title = InternalHeaderTitle;
 InternalHeader.User = InternalHeaderUser;

package/src/overlays/action-menu/ActionMenu.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, useRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { useModalContext } from "../../modal/Modal.context";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
 import { OverridableComponent, useId } from "../../util";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
@@ -332,44 +333,56 @@ export const ActionMenuTrigger = forwardRef<
 interface ActionMenuContentProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
   children?: React.ReactNode;
+  align?: "start" | "end";
 }
 
 export const ActionMenuContent = forwardRef<
   HTMLDivElement,
   ActionMenuContentProps
->(({ children, className, style, ...rest }: ActionMenuContentProps, ref) => {
-  const context = useActionMenuContext();
+>(
+  (
+    {
+      children,
+      className,
+      style,
+      align = "start",
+      ...rest
+    }: ActionMenuContentProps,
+    ref,
+  ) => {
+    const context = useActionMenuContext();
 
-  return (
-    <Menu.Portal rootElement={context.rootElement} asChild>
-      <Menu.Content
-        ref={ref}
-        id={context.contentId}
-        aria-labelledby={context.triggerId}
-        className={cl("navds-action-menu__content", className)}
-        {...rest}
-        align="start"
-        sideOffset={4}
-        collisionPadding={10}
-        onCloseAutoFocus={() => {
-          context.triggerRef.current?.focus();
-        }}
-        safeZone={{ anchor: context.triggerRef.current }}
-        style={{
-          ...style,
-          ...{
-            "--__ac-action-menu-content-transform-origin":
-              "var(--ac-floating-transform-origin)",
-            "--__ac-action-menu-content-available-height":
-              "var(--ac-floating-available-height)",
-          },
-        }}
-      >
-        <div className="navds-action-menu__content-inner">{children}</div>
-      </Menu.Content>
-    </Menu.Portal>
-  );
-});
+    return (
+      <Menu.Portal rootElement={context.rootElement} asChild>
+        <Menu.Content
+          ref={ref}
+          id={context.contentId}
+          aria-labelledby={context.triggerId}
+          className={cl("navds-action-menu__content", className)}
+          {...rest}
+          align={align}
+          sideOffset={4}
+          collisionPadding={10}
+          onCloseAutoFocus={() => {
+            context.triggerRef.current?.focus();
+          }}
+          safeZone={{ anchor: context.triggerRef.current }}
+          style={{
+            ...style,
+            ...{
+              "--__ac-action-menu-content-transform-origin":
+                "var(--ac-floating-transform-origin)",
+              "--__ac-action-menu-content-available-height":
+                "var(--ac-floating-available-height)",
+            },
+          }}
+        >
+          <div className="navds-action-menu__content-inner">{children}</div>
+        </Menu.Content>
+      </Menu.Portal>
+    );
+  },
+);
 
 /* -------------------------------------------------------------------------- */
 /*                              ActionMenuLabel                               */
@@ -723,6 +736,8 @@ export const ActionMenuRadioItem = forwardRef<
     { children, className, onSelect, ...rest }: ActionMenuRadioItemProps,
     ref,
   ) => {
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     return (
       <Menu.RadioItem
         ref={ref}
@@ -768,29 +783,48 @@ export const ActionMenuRadioItem = forwardRef<
                   fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
               </g>
-              <g className="navds-action-menu__indicator-icon--checked">
-                <rect
-                  x="1"
-                  y="1"
-                  width="22"
-                  height="22"
-                  rx="11"
-                  fill="var(--ax-bg-default, var(--a-surface-default))"
-                />
-                <rect
-                  x="1"
-                  y="1"
-                  width="22"
-                  height="22"
-                  rx="11"
-                  stroke="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
-                  strokeWidth="2"
-                />
-                <path
-                  d="M20 12C20 16.4178 16.4178 20 12 20C7.58222 20 4 16.4178 4 12C4 7.58222 7.58222 4 12 4C16.4178 4 20 7.58222 20 12Z"
-                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
-                />
-              </g>
+              {themeContext ? (
+                <g className="navds-action-menu__indicator-icon--checked">
+                  <rect
+                    width="24"
+                    height="24"
+                    rx="12"
+                    fill="var(--ax-bg-accent-strong-pressed)"
+                  />
+                  <rect
+                    x="8"
+                    y="8"
+                    width="8"
+                    height="8"
+                    rx="4"
+                    fill="var(--ax-bg-default, var(--a-surface-default))"
+                  />
+                </g>
+              ) : (
+                <g className="navds-action-menu__indicator-icon--checked">
+                  <rect
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="11"
+                    fill="var(--ax-bg-default, var(--a-surface-default))"
+                  />
+                  <rect
+                    x="1"
+                    y="1"
+                    width="22"
+                    height="22"
+                    rx="11"
+                    stroke="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
+                    strokeWidth="2"
+                  />
+                  <path
+                    d="M20 12C20 16.4178 16.4178 20 12 20C7.58222 20 4 16.4178 4 12C4 7.58222 7.58222 4 12 4C16.4178 4 20 7.58222 20 12Z"
+                    fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
+                  />
+                </g>
+              )}
             </svg>
           </Menu.ItemIndicator>
         </Marker>
@@ -955,11 +989,11 @@ ActionMenu.SubTrigger = ActionMenuSubTrigger;
 ActionMenu.SubContent = ActionMenuSubContent;
 
 export type {
-  ActionMenuItemProps,
   ActionMenuCheckboxItemProps,
   ActionMenuContentProps,
   ActionMenuDividerProps,
   ActionMenuGroupProps,
+  ActionMenuItemProps,
   ActionMenuLabelProps,
   ActionMenuProps,
   ActionMenuRadioGroupProps,

package/src/provider/theme/AkselTheme.tsx

@@ -1,9 +1,20 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
 import { createContext } from "../../util/create-context";
 
 type AkselThemeContext = {
-  theme: "light" | "dark";
+  /**
+   * Color theme
+   * @default "light"
+   */
+  theme?: "light" | "dark";
+  /**
+   * Brand volume
+   * @default "low"
+   * This is experimental and subject to changes
+   */
+  volume?: "high" | "low";
 };
 
 const [ThemeProvider, useAkselTheme] = createContext<AkselThemeContext>({
@@ -17,6 +28,8 @@ type AkselThemeProps = {
   children: React.ReactNode;
   className?: string;
   hasBackground?: boolean;
+  /* TODO: Handle this correctly with types */
+  asChild?: boolean;
 } & AkselThemeContext;
 
 const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
@@ -26,7 +39,9 @@ const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
     const {
       children,
       className,
+      asChild = false,
       theme = context?.theme ?? "light",
+      volume = context?.volume ?? "low",
       hasBackground: hasBackgroundProp = true,
     } = props;
 
@@ -35,15 +50,18 @@ const AkselTheme = forwardRef<HTMLDivElement, AkselThemeProps>(
     const hasBackground =
       hasBackgroundProp ?? (isRoot || props.theme !== undefined);
 
+    const SlotElement = asChild ? Slot : "div";
+
     return (
-      <ThemeProvider theme={theme}>
-        <div
+      <ThemeProvider theme={theme} volume={volume}>
+        <SlotElement
           ref={ref}
           className={cl("navds-theme", className, theme)}
           data-background={hasBackground}
+          data-volume={volume}
         >
           {children}
-        </div>
+        </SlotElement>
       </ThemeProvider>
     );
   },

package/src/react-css.d.ts

@@ -4,5 +4,7 @@ declare module "react" {
   interface CSSProperties {
     [key: `--ac-${string}`]: string | number | undefined;
     [key: `--__ac-${string}`]: string | number | undefined;
+    [key: `--axc-${string}`]: string | number | undefined;
+    [key: `--__axc-${string}`]: string | number | undefined;
   }
 }

package/src/read-more/ReadMore.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { BodyLong } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -33,7 +34,7 @@ export interface ReadMoreProps
    * Changes fontsize for content.
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "large" | "medium" | "small";
 }
 
 /**
@@ -74,6 +75,10 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
       onChange: onOpenChange,
     });
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
+    const typoSize = size === "small" ? "small" : "medium";
+
     return (
       <div
         className={cl(
@@ -82,6 +87,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           className,
           { "navds-read-more--open": _open },
         )}
+        data-volume={themeContext?.volume}
       >
         <button
           {...rest}
@@ -92,6 +98,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           })}
           onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
           aria-expanded={_open}
+          data-state={_open ? "open" : "closed"}
         >
           <ChevronDownIcon
             className="navds-read-more__expand-icon"
@@ -106,7 +113,8 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           className={cl("navds-read-more__content", {
             "navds-read-more__content--closed": !_open,
           })}
-          size={size}
+          size={typoSize}
+          data-state={_open ? "open" : "closed"}
         >
           {children}
         </BodyLong>

package/src/stepper/Step.tsx

@@ -60,6 +60,9 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
             "navds-stepper__step--non-interactive": !isInteractive,
             "navds-stepper__step--completed": completed,
           })}
+          data-active={activeStep === context.index}
+          data-completed={completed}
+          data-interactive={isInteractive}
           onClick={composeEventHandlers(onClick, handleStepClick)}
         >
           {completed ? (

package/src/stepper/Stepper.tsx

@@ -93,6 +93,7 @@ export const Stepper: StepperComponent = forwardRef<
           orientation === "horizontal" ? "navds-stepper--horizontal" : "",
           className,
         )}
+        data-orientation={orientation}
       >
         {React.Children.map(children, (step, index) => {
           const stepProps: Partial<StepperStepProps> =
@@ -101,10 +102,12 @@ export const Stepper: StepperComponent = forwardRef<
           return (
             <li
               className={cl("navds-stepper__item", {
+                /* TODO: Remove these 3 classNames in darkmode update */
                 "navds-stepper__item--behind": activeStep > index,
                 "navds-stepper__item--completed": stepProps.completed,
-                "navds-stepper__item--non-interactive":
-                  stepProps.interactive ?? interactive,
+                "navds-stepper__item--non-interactive": !(
+                  stepProps.interactive ?? interactive
+                ),
               })}
               key={index + (children?.toString?.() ?? "")}
             >

package/src/util/TextareaAutoSize.tsx

@@ -224,6 +224,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
 
     const mainStyle: React.CSSProperties = {
       "--__ac-textarea-height": state.outerHeightStyle + "px",
+      "--__axc-textarea-height": state.outerHeightStyle + "px",
       // Need a large enough difference to allow scrolling.
       // This prevents infinite rendering loop.
       overflow:

package/src/util/i18n/locales/en.ts

@@ -97,4 +97,24 @@ export default {
       reset: "Reset zoom",
     },
   },
+  DatePicker: {
+    close: "Close",
+    chooseDate: "Choose date",
+    chooseDates: "Choose dates",
+    chooseDateRange: "Choose start and end date",
+    chooseMonth: "Choose month",
+    week: "Week",
+    weekNumber: "Week {week}",
+    selectWeekNumber: "Select week {week}",
+    month: "Month",
+    goToNextMonth: "Go to next month",
+    goToPreviousMonth: "Go to previous month",
+    year: "Year",
+    goToNextYear: "Go to next year",
+    goToPreviousYear: "Go to previous year",
+    openDatePicker: "Open date picker",
+    openMonthPicker: "Open month picker",
+    closeDatePicker: "Close date picker",
+    closeMonthPicker: "Close month picker",
+  },
 } satisfies Translations;