@navikt/ds-react 7.8.0 → 7.8.1

package/esm/tooltip/Tooltip.js

@@ -14,6 +14,7 @@ import cl from "clsx";
 import React, { forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context.js";
 import { Portal } from "../portal/index.js";
+import { UNSAFE_useAkselTheme } from "../provider/index.js";
 import { Slot } from "../slot/Slot.js";
 import { Detail } from "../typography/index.js";
 import { useId } from "../util/hooks/index.js";
@@ -34,6 +35,8 @@ import { useMergeRefs } from "../util/hooks/useMergeRefs.js";
  */
 export const Tooltip = forwardRef((_a, ref) => {
     var { children, className, arrow: _arrow = true, placement: _placement = "top", open, defaultOpen = false, onOpenChange, offset: _offset, content, delay = 150, id, keys, maxChar = 80, describesChild = false } = _a, rest = __rest(_a, ["children", "className", "arrow", "placement", "open", "defaultOpen", "onOpenChange", "offset", "content", "delay", "id", "keys", "maxChar", "describesChild"]);
+    const themeContext = UNSAFE_useAkselTheme(false);
+    const showArrow = _arrow && !themeContext;
     const [_open, _setOpen] = useControllableState({
         defaultValue: defaultOpen,
         value: open,
@@ -47,7 +50,7 @@ export const Tooltip = forwardRef((_a, ref) => {
         open: _open,
         onOpenChange: (newState) => _setOpen(newState),
         middleware: [
-            offset(_offset ? _offset : _arrow ? 10 : 2),
+            offset(_offset !== null && _offset !== void 0 ? _offset : (themeContext ? 8 : _arrow ? 16 : 4)),
             shift(),
             flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
             flArrow({ element: arrowRef, padding: 5 }),
@@ -89,10 +92,10 @@ export const Tooltip = forwardRef((_a, ref) => {
                 top: y !== null && y !== void 0 ? y : 0,
                 left: x !== null && x !== void 0 ? x : 0,
                 visibility: referenceHidden ? "hidden" : "visible",
-            }, role: "tooltip", id: ariaId, className: cl("navds-tooltip", "navds-detail navds-detail--small", className) })), { "data-side": placement }),
+            }, role: "tooltip", id: ariaId, className: cl("navds-tooltip", "navds-detail navds-detail--small", className) })), { "data-side": placement, "data-state": "open" }),
             content,
             keys && (React.createElement("span", { className: "navds-tooltip__keys", "aria-hidden": true }, keys.map((key) => (React.createElement(Detail, { as: "kbd", key: key, className: "navds-tooltip__key" }, key))))),
-            _arrow && (React.createElement("div", { ref: (node) => {
+            showArrow && (React.createElement("div", { ref: (node) => {
                     arrowRef.current = node;
                 }, className: "navds-tooltip__arrow", style: {
                     left: arrowX != null ? `${arrowX}px` : "",

package/esm/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.8.0",
+  "version": "7.8.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -8,7 +8,7 @@
     "react",
     "typescript",
     "javascript",
-    "NAV"
+    "Nav"
   ],
   "repository": {
     "type": "git",
@@ -614,8 +614,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.8.0",
-    "@navikt/ds-tokens": "^7.8.0",
+    "@navikt/aksel-icons": "^7.8.1",
+    "@navikt/ds-tokens": "^7.8.1",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.1"

package/src/form/combobox/ComboboxWrapper.tsx

@@ -32,7 +32,6 @@ const ComboboxWrapper = ({
       !wrapperRef.current?.contains(event.relatedTarget) &&
       toggleOpenButtonRef?.current !== event.target
     ) {
-      toggleIsListOpen(true);
       setHasFocusWithin(true);
     }
   }

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);
           }
         }

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

@@ -33,6 +33,7 @@ export const InputController = forwardRef<
     toggleListButton = true,
     inputClassName,
     shouldShowSelectedOptions = true,
+
     ...rest
   } = props;
 
@@ -45,7 +46,7 @@ export const InputController = forwardRef<
     readOnly,
   } = useInputContext();
 
-  const { activeDecendantId } = useFilteredOptionsContext();
+  const { activeDecendantId, toggleIsListOpen } = useFilteredOptionsContext();
   const { selectedOptions } = useSelectedOptionsContext();
 
   const mergedInputRef = useMergeRefs(inputRef, ref);
@@ -57,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

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

@@ -120,6 +120,8 @@ const SelectedOptionsProvider = ({
     ) => {
       if (isInList(option.value, selectedOptions)) {
         removeSelectedOption(option);
+      } else if (isMultiSelect && isLimitReached) {
+        return;
       } else {
         addSelectedOption(option);
       }
@@ -132,6 +134,8 @@ const SelectedOptionsProvider = ({
       focusInput,
       removeSelectedOption,
       selectedOptions,
+      isLimitReached,
+      isMultiSelect,
     ],
   );
 

package/src/form/search/Search.tsx

@@ -92,7 +92,7 @@ interface SearchComponent
  * @example
  * ```jsx
  * <form role="search">
- *   <Search label="Søk alle NAV sine sider" variant="primary" />
+ *   <Search label="Søk alle Nav sine sider" variant="primary" />
  * </form>
  * ```
  */

package/src/layout/box/Box.darkside.tsx

@@ -1,6 +1,13 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { BorderKeys } from "@navikt/ds-tokens/darkside/tokens/semantic-roles";
+import type {
+  BorderColorKeys,
+  BorderColorWithRoleKeys,
+  BorderRadiusKeys,
+  DefaultBgKeys,
+  ShadowKeys,
+  StaticBgKeys,
+} from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
@@ -10,27 +17,21 @@ import BasePrimitive, {
 } from "../base/BasePrimitive";
 import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps } from "../utilities/css";
-import {
-  BorderRadiiToken,
-  ResponsiveProp,
-  SemanticRoleBgDarkside,
-  SemanticShadowTokens,
-  SemanticStaticBgDarkside,
-  SemanticStaticBorderDarkside,
-  SpaceDelimitedAttribute,
-} from "../utilities/types";
+import { ResponsiveProp, SpaceDelimitedAttribute } from "../utilities/types";
 
 export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * CSS `background-color` property.
    * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+   * @see {@link DefaultBgKeys} and {@link StaticBgKeys}
    */
-  background?: SemanticStaticBgDarkside | SemanticRoleBgDarkside;
+  background?: DefaultBgKeys | StaticBgKeys;
   /**
    * CSS `border-color` property.
    * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+   * @see {@link BorderColorKeys} and {@link BorderColorWithRoleKeys}
    */
-  borderColor?: BorderKeys | SemanticStaticBorderDarkside;
+  borderColor?: Exclude<BorderColorKeys, "focus"> | BorderColorWithRoleKeys;
   /**
    * CSS `border-radius` property.
    * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
@@ -39,8 +40,11 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
    * borderRadius='full'
    * borderRadius='0 full large small'
    * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
+   * @see {@link BorderRadiusKeys}
    */
-  borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
+  borderRadius?: ResponsiveProp<
+    SpaceDelimitedAttribute<BorderRadiusKeys | "0">
+  >;
   /**
    * CSS `border-width` property. If this is not set there will be no border.
    * @example
@@ -51,8 +55,9 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
   /** Shadow on box. Accepts a shadow token.
    * @example
    * shadow='small'
+   * @see {@link ShadowKeys}
    */
-  shadow?: SemanticShadowTokens;
+  shadow?: ShadowKeys;
 } & PrimitiveProps &
   PrimitiveAsChildProps;
 

package/src/layout/box/Box.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { type BorderRadiusKeys } from "@navikt/ds-tokens/types";
 import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
 import { omit } from "../../util";
@@ -13,7 +14,6 @@ import { getResponsiveProps } from "../utilities/css";
 import {
   BackgroundColorToken,
   BorderColorToken,
-  BorderRadiiToken,
   ResponsiveProp,
   ShadowToken,
   SpaceDelimitedAttribute,
@@ -41,7 +41,9 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
    * borderRadius='0 full large small'
    * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
    */
-  borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
+  borderRadius?: ResponsiveProp<
+    SpaceDelimitedAttribute<BorderRadiusKeys | "0">
+  >;
   /**
    * CSS `border-width` property. If this is not set there will be no border.
    * @example

package/src/layout/utilities/types.ts

@@ -1,27 +1,23 @@
-/* Darkside tokens */
-import { semanticTokenConfig } from "@navikt/ds-tokens/darkside/tokens/semantic";
-import { SemanticTokensForAllRolesConfigT } from "@navikt/ds-tokens/darkside/tokens/semantic-roles";
-import { shadowTokenConfig } from "@navikt/ds-tokens/darkside/tokens/shadow";
-
-/* Old */
-import borderRadii from "@navikt/ds-tokens/src/border.json";
-import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
-import borderColors from "@navikt/ds-tokens/src/colors-border.json";
-import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
-import shadows from "@navikt/ds-tokens/src/shadow.json";
-import Spacing from "@navikt/ds-tokens/src/spacing.json";
-
-export type BackgroundColorToken = keyof typeof bgColors.a;
-export type SurfaceColorToken = keyof typeof surfaceColors.a;
-export type BorderColorToken = keyof typeof borderColors.a;
-export type BorderRadiiToken =
-  | keyof (typeof borderRadii.a)["border-radius"]
-  | "0";
-export type ShadowToken = keyof typeof shadows.a.shadow;
-
-export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-
-export type SpacingScale = keyof (typeof Spacing)["a"]["spacing"];
+import type {
+  BreakPointKeys,
+  LegacyBgColorKeys,
+  LegacyBorderColorKeys,
+  LegacyShadowKeys,
+  LegacySurfaceColorKeys,
+  SpacingKeys,
+} from "@navikt/ds-tokens/types";
+
+export type BackgroundColorToken = LegacyBgColorKeys;
+export type SurfaceColorToken = LegacySurfaceColorKeys;
+export type BorderColorToken = LegacyBorderColorKeys;
+export type ShadowToken = LegacyShadowKeys;
+
+export type BreakpointsAlias = Extract<
+  BreakPointKeys,
+  "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+>;
+
+export type SpacingScale = SpacingKeys;
 
 export type SpaceDelimitedAttribute<T extends string> =
   | T
@@ -33,21 +29,3 @@ type FixedResponsiveT<T> = {
 };
 
 export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
-
-/**
- * Darkside tokens
- */
-export type SemanticShadowTokens = keyof ReturnType<
-  typeof shadowTokenConfig
->["shadow"];
-
-export type SemanticStaticBgDarkside = keyof ReturnType<
-  typeof semanticTokenConfig
->["bg"];
-
-export type SemanticRoleBgDarkside =
-  keyof SemanticTokensForAllRolesConfigT<"color">["bg"];
-
-export type SemanticStaticBorderDarkside = keyof ReturnType<
-  typeof semanticTokenConfig
->["border"];

package/src/tag/Tag.tsx

@@ -31,7 +31,13 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     | "alt2-moderate"
     | "alt3"
     | "alt3-filled"
-    | "alt3-moderate";
+    | "alt3-moderate"
+    | "meta-purple"
+    | "meta-purple-filled"
+    | "meta-purple-moderate"
+    | "meta-lime"
+    | "meta-lime-filled"
+    | "meta-lime-moderate";
   /**
    * @default "medium"
    */
@@ -54,23 +60,31 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * ```
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ children, className, variant, size = "medium", icon, ...rest }, ref) => (
-    <BodyShort
-      {...rest}
-      ref={ref}
-      as="span"
-      size={size === "medium" ? "medium" : "small"}
-      className={cl(
-        "navds-tag",
-        className,
-        `navds-tag--${variant}`,
-        `navds-tag--${size}`,
-      )}
-    >
-      {icon && <span className="navds-tag__icon--left">{icon}</span>}
-      {children}
-    </BodyShort>
-  ),
+  ({ children, className, variant, size = "medium", icon, ...rest }, ref) => {
+    const filledVariant = variant?.endsWith("-filled") && "strong";
+    const moderateVariant = variant?.endsWith("-moderate") && "moderate";
+    const color = variant?.replace("-filled", "").replace("-moderate", "");
+
+    return (
+      <BodyShort
+        {...rest}
+        ref={ref}
+        as="span"
+        size={size === "medium" ? "medium" : "small"}
+        className={cl(
+          "navds-tag",
+          className,
+          `navds-tag--${variant}`,
+          `navds-tag--${size}`,
+          `navds-tag--${filledVariant || moderateVariant || "outline"}`,
+          `navds-tag--${color}`,
+        )}
+      >
+        {icon && <span className="navds-tag__icon--left">{icon}</span>}
+        {children}
+      </BodyShort>
+    );
+  },
 );
 
 export default Tag;

package/src/timeline/Pin.tsx

@@ -15,6 +15,7 @@ import {
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useI18n } from "../util/i18n/i18n.context";
 import { useTimelineContext } from "./hooks/useTimelineContext";
@@ -47,6 +48,9 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+    const showArrow = !themeContext;
+
     const {
       context,
       placement,
@@ -59,7 +63,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
       onOpenChange: (_open) => setOpen(_open),
       whileElementsMounted: autoUpdate,
       middleware: [
-        offset(16),
+        offset(showArrow ? 16 : 8),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
@@ -135,15 +139,17 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
               style={floatingStyles}
             >
               {children}
-              <div
-                ref={arrowRef}
-                style={{
-                  ...(arrowX != null ? { left: arrowX } : {}),
-                  ...(arrowY != null ? { top: arrowY } : {}),
-                  ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-                }}
-                className="navds-timeline__popover-arrow"
-              />
+              {showArrow && (
+                <div
+                  ref={arrowRef}
+                  style={{
+                    ...(arrowX != null ? { left: arrowX } : {}),
+                    ...(arrowY != null ? { top: arrowY } : {}),
+                    ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+                  }}
+                  className="navds-timeline__popover-arrow"
+                />
+              )}
             </div>
           </FloatingFocusManager>
         )}

package/src/timeline/hooks/useTimelineRows.ts

@@ -134,17 +134,33 @@ export const useTimelineRows = (
     [rows, startDate, endDate, direction],
   );
 
-const earliestDate = (earliest: Date, period: Period) =>
-  period.start < earliest ? period.start : earliest;
+export const useEarliestDate = ({
+  startDate,
+  rows,
+}: {
+  startDate?: Date;
+  rows: Pick<Period, "start">[][];
+}) =>
+  useMemo(() => {
+    if (startDate) {
+      return startDate;
+    }
 
-const earliestFomDate = (rader: Period[][]) =>
-  rader.flat().reduce(earliestDate, new Date());
+    const startDates = rows
+      .flat()
+      .filter((period) => period.start)
+      .map((period) => period.start);
 
-export const useEarliestDate = ({ startDate, rows }: any) =>
-  useMemo(
-    () => (startDate ? startDate : earliestFomDate(rows)),
-    [startDate, rows],
-  );
+    if (startDates.length === 0) {
+      return new Date();
+    }
+
+    const earliestDate = startDates.reduce((earliest, current) =>
+      current < earliest ? current : earliest,
+    );
+
+    return earliestDate;
+  }, [startDate, rows]);
 
 const latestDate = (latest: Date, period: Period) =>
   period.end > latest ? period.end : latest;

package/src/timeline/period/ClickablePeriod.tsx

@@ -15,6 +15,7 @@ import {
 } from "@floating-ui/react";
 import cl from "clsx";
 import React, { useRef, useState } from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.context";
 import { usePeriodContext } from "../hooks/usePeriodContext";
@@ -55,6 +56,9 @@ const ClickablePeriod = React.memo(
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const translate = useI18n("Timeline");
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+    const showArrow = !themeContext;
+
     const {
       context,
       placement,
@@ -67,7 +71,7 @@ const ClickablePeriod = React.memo(
       onOpenChange: (_open) => setOpen(_open),
       whileElementsMounted: autoUpdate,
       middleware: [
-        offset(16),
+        offset(showArrow ? 16 : 8),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
@@ -164,15 +168,17 @@ const ClickablePeriod = React.memo(
               style={floatingStyles}
             >
               {children}
-              <div
-                ref={arrowRef}
-                style={{
-                  ...(arrowX != null ? { left: arrowX } : {}),
-                  ...(arrowY != null ? { top: arrowY } : {}),
-                  ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-                }}
-                className="navds-timeline__popover-arrow"
-              />
+              {showArrow && (
+                <div
+                  ref={arrowRef}
+                  style={{
+                    ...(arrowX != null ? { left: arrowX } : {}),
+                    ...(arrowY != null ? { top: arrowY } : {}),
+                    ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+                  }}
+                  className="navds-timeline__popover-arrow"
+                />
+              )}
             </div>
           </FloatingFocusManager>
         )}