Version Packages (#3270 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Better support for React 19 (#3268 )
2026-10-13 01:02:02 +00:00 · 2024-10-24 09:15:01 +02:00 · 2024-10-24 09:07:26 +02:00 · 2024-10-23 15:42:26 +02:00 · 2024-10-23 13:48:46 +02:00 · 2024-10-23 09:44:11 +02:00
41 changed files with 1586 additions and 849 deletions
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 7.4.0
+
 ## 7.3.1

 ## 7.3.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "7.3.1",
+  "version": "7.4.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint

+## 7.4.0
+
 ## 7.3.1

 ## 7.3.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "7.3.1",
+  "version": "7.4.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^7.3.1",
-    "@navikt/ds-tokens": "^7.3.1",
+    "@navikt/ds-css": "^7.4.0",
+    "@navikt/ds-tokens": "^7.4.0",
    "concurrently": "9.0.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 7.4.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.4.0
+
 ## 7.3.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "7.3.1",
+  "version": "7.4.0",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "7.3.1",
+    "@navikt/ds-css": "7.4.0",
    "axios": "1.7.4",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,7 @@
 # @navikt/ds-css

+## 7.4.0
+
 ## 7.3.1

 ### Patch Changes
@@ -372,6 +372,11 @@
  border-radius: calc(var(--a-border-radius-medium) - 1px);
 }

+.navds-combobox__list-item mark {
+  background-color: transparent;
+  font-weight: bold;
+}
+
 /* Mobile */

@media (max-width: 479px) {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "7.3.1",
+  "version": "7.4.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^7.3.1",
+    "@navikt/ds-tokens": "^7.4.0",
    "autoprefixer": "^10.4.20",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
@@ -1,5 +1,25 @@
 # @navikt/ds-react

+## 7.4.0
+
+### Minor Changes
+
+- Combobox: Enable option to add a new value while autocompleting and highlight matches in FilteredOptions. ([#3225](https://github.com/navikt/aksel/pull/3225))
+
+### Patch Changes
+
+- Date/MonthPicker: Upgrade react-day-picker to fix issue with React 19 ([#3268](https://github.com/navikt/aksel/pull/3268))
+
+- Combobox: Don't scroll when browsing list with mouse ([#3265](https://github.com/navikt/aksel/pull/3265))
+
+- Avoid warning about element.ref in React 19 ([#3268](https://github.com/navikt/aksel/pull/3268))
+
+- Checkbox: Remove redundant attribute aria-checked ([#3274](https://github.com/navikt/aksel/pull/3274))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.4.0
+  - @navikt/aksel-icons@7.4.0
+
 ## 7.3.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "7.3.1",
+  "version": "7.4.0",
  "description": "React components from the Norwegian Labour and Welfare Administration.",
  "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
  "license": "MIT",
@@ -604,11 +604,11 @@
  "dependencies": {
    "@floating-ui/react": "0.25.4",
    "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.3.1",
-    "@navikt/ds-tokens": "^7.3.1",
+    "@navikt/aksel-icons": "^7.4.0",
+    "@navikt/ds-tokens": "^7.4.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.0.0",
-    "react-day-picker": "8.10.0"
+    "react-day-picker": "8.10.1"
  },
  "devDependencies": {
    "@testing-library/dom": "9.3.4",
@@ -41,7 +41,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
          {...omit(inputProps, ["aria-invalid"])}
          type="checkbox"
          className="navds-checkbox__input"
-          aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
          ref={(el) => {
            if (el) {
              el.indeterminate = props.indeterminate ?? false;
@@ -12,7 +12,7 @@ const AddNewOption = () => {
  const {
    inputProps: { id },
    size,
-    value,
+    searchTerm,
  } = useInputContext();
  const {
    setIsMouseLastUsedInputDevice,
@@ -34,8 +34,8 @@ const AddNewOption = () => {
        }
      }}
      onPointerUp={(event) => {
-        toggleOption(toComboboxOption(value), event);
-        if (!isMultiSelect && !isInList(value, selectedOptions))
+        toggleOption(toComboboxOption(searchTerm), event);
+        if (!isMultiSelect && !isInList(searchTerm, selectedOptions))
          toggleIsListOpen(false);
      }}
      id={filteredOptionsUtil.getAddNewOptionId(id)}
@@ -53,7 +53,7 @@ const AddNewOption = () => {
      <BodyShort size={size}>
        Legg til{" "}
        <Label as="span" size={size}>
-          &#8220;{value}&#8221;
+          &#8220;{searchTerm}&#8221;
        </Label>
      </BodyShort>
    </li>
@@ -9,10 +9,24 @@ import { ComboboxOption } from "../types";
 import filteredOptionsUtil from "./filtered-options-util";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";

+const useTextHighlight = (text: string, searchTerm: string) => {
+  const indexOfHighlightedText = text
+    .toLowerCase()
+    .indexOf(searchTerm.toLowerCase());
+  const start = text.substring(0, indexOfHighlightedText);
+  const highlight = text.substring(
+    indexOfHighlightedText,
+    indexOfHighlightedText + searchTerm.length,
+  );
+  const end = text.substring(indexOfHighlightedText + searchTerm.length);
+  return [start, highlight, end];
+};
+
 const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
  const {
    inputProps: { id },
    size,
+    searchTerm,
  } = useInputContext();
  const {
    setIsMouseLastUsedInputDevice,
@@ -22,9 +36,11 @@ const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
  } = useFilteredOptionsContext();
  const { isMultiSelect, maxSelected, selectedOptions, toggleOption } =
    useSelectedOptionsContext();
+  const [start, highlight, end] = useTextHighlight(option.label, searchTerm);

  const isDisabled = (_option: ComboboxOption) =>
    maxSelected?.isLimitReached && !isInList(_option.value, selectedOptions);
+
  return (
    <li
      className={cl("navds-combobox__list-item", {
@@ -64,7 +80,12 @@ const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
      aria-selected={isInList(option.value, selectedOptions)}
      aria-disabled={isDisabled(option) || undefined}
    >
-      <BodyShort size={size}>{option.label}</BodyShort>
+      {/* Aria-label is used to fix testing-library wrongly evaluating the accessible name of the option when highlighting text */}
+      <BodyShort size={size} aria-label={option.label}>
+        {start}
+        {highlight && <mark>{highlight}</mark>}
+        {end}
+      </BodyShort>
      {isInList(option.value, selectedOptions) && <CheckmarkIcon />}
    </li>
  );
@@ -158,9 +158,9 @@ const FilteredOptionsProvider = ({

  const isValueNew = useMemo(
    () =>
-      Boolean(value) &&
-      !filteredOptionsMap[filteredOptionsUtils.getOptionId(id, value)],
-    [filteredOptionsMap, id, value],
+      Boolean(searchTerm) &&
+      !filteredOptionsMap[filteredOptionsUtils.getOptionId(id, searchTerm)],
+    [filteredOptionsMap, id, searchTerm],
  );

  const ariaDescribedBy = useMemo(() => {
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";

 export type VirtualFocusType = {
  activeElement: HTMLElement | undefined;
@@ -43,6 +43,11 @@ const useVirtualFocus = (
      : false;
  };

+  const setActiveAndScrollToElement = (element?: HTMLElement) => {
+    setActiveElement(element);
+    element?.scrollIntoView?.({ block: "nearest" });
+  };
+
  const moveFocusUp = () => {
    if (!activeElement) {
      return;
@@ -53,14 +58,14 @@ const useVirtualFocus = (
    if (_currentIndex === 0) {
      setActiveElement(undefined);
    } else {
-      setActiveElement(elementAbove);
+      setActiveAndScrollToElement(elementAbove);
    }
  };

  const moveFocusDown = () => {
    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
    if (!activeElement) {
-      setActiveElement(elementsAbleToReceiveFocus[0]);
+      setActiveAndScrollToElement(elementsAbleToReceiveFocus[0]);
      return;
    }
    const _currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
@@ -68,17 +73,17 @@ const useVirtualFocus = (
      return;
    }

-    setActiveElement(elementsAbleToReceiveFocus[_currentIndex + 1]);
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[_currentIndex + 1]);
  };

  const resetFocus = () => setActiveElement(undefined);
  const moveFocusToTop = () => {
    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
-    setActiveElement(elementsAbleToReceiveFocus[0]);
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[0]);
  };
  const moveFocusToBottom = () => {
    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
-    setActiveElement(
+    setActiveAndScrollToElement(
      elementsAbleToReceiveFocus[elementsAbleToReceiveFocus.length - 1],
    );
  };
@@ -98,7 +103,7 @@ const useVirtualFocus = (
    const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
    const currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
    const newIndex = Math.max(currentIndex - numberOfElements, 0);
-    setActiveElement(elementsAbleToReceiveFocus[newIndex]);
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[newIndex]);
  };

  const moveFocusDownBy = (numberOfElements: number) => {
@@ -110,13 +115,9 @@ const useVirtualFocus = (
      currentIndex + numberOfElements,
      elementsAbleToReceiveFocus.length - 1,
    );
-    setActiveElement(elementsAbleToReceiveFocus[newIndex]);
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[newIndex]);
  };

-  useEffect(() => {
-    activeElement?.scrollIntoView?.({ block: "nearest" });
-  }, [activeElement]);
-
  return {
    activeElement,
    getElementById,
@@ -177,10 +177,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          if (value !== searchTerm) {
            setValue(searchTerm);
          }
-          if (virtualFocus.activeElement === null || !isListOpen) {
+          if (!isListOpen) {
            toggleIsListOpen(true);
+            setTimeout(virtualFocus.moveFocusDown, 0); // Wait until list is visible so that scrollIntoView works
+          } else {
+            virtualFocus.moveFocusDown();
          }
-          virtualFocus.moveFocusDown();
        } else if (e.key === "ArrowUp") {
          if (value !== "" && value !== searchTerm) {
            onChange(value);
@@ -199,19 +201,23 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
          virtualFocus.moveFocusToTop();
        } else if (e.key === "End") {
          e.preventDefault();
-          if (virtualFocus.activeElement === null || !isListOpen) {
+          if (!isListOpen) {
            toggleIsListOpen(true);
+            setTimeout(virtualFocus.moveFocusToBottom, 0); // Wait until list is visible so that scrollIntoView works
+          } else {
+            virtualFocus.moveFocusToBottom();
          }
-          virtualFocus.moveFocusToBottom();
        } else if (e.key === "PageUp") {
          e.preventDefault();
          virtualFocus.moveFocusUpBy(6);
        } else if (e.key === "PageDown") {
          e.preventDefault();
-          if (virtualFocus.activeElement === null || !isListOpen) {
+          if (!isListOpen) {
            toggleIsListOpen(true);
+            setTimeout(() => virtualFocus.moveFocusDownBy(6), 0); // Wait until list is visible so that scrollIntoView works
+          } else {
+            virtualFocus.moveFocusDownBy(6);
          }
-          virtualFocus.moveFocusDownBy(6);
        }
      },
      [
@@ -177,8 +177,8 @@ const complexOptions = [
 ];

 export const WithAddNewOptions: StoryFn = ({ open }: { open?: boolean }) => {
-  const [value, setValue] = useState<string | undefined>("hello");
  const comboboxRef = useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState<string | undefined>("hello");
  return (
    <UNSAFE_Combobox
      id="combobox-with-add-new-options"
@@ -210,6 +210,7 @@ export const MultiSelectWithAddNewOptions: StoryFn = ({
      options={options}
      allowNewValues={true}
      value={value}
+      shouldAutocomplete={true}
      selectedOptions={selectedOptions}
      onChange={setValue}
      onToggleSelected={(option, isSelected) =>
@@ -10,11 +10,16 @@ const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
  const { children, ...slotProps } = props;

  if (React.isValidElement(children)) {
+    const childRef = Object.prototype.propertyIsEnumerable.call(
+      children.props,
+      "ref",
+    )
+      ? children.props.ref // React 19 (children.ref still works, but gives a warning)
+      : (children as any).ref; // React <19
+
    return React.cloneElement<any>(children, {
      ...mergeProps(slotProps, children.props),
-      ref: forwardedRef
-        ? mergeRefs([forwardedRef, (children as any).ref])
-        : (children as any).ref,
+      ref: forwardedRef ? mergeRefs([forwardedRef, childRef]) : childRef,
    });
  }

@@ -1,3 +1,4 @@
 src/tokens.ts
 tailwind.config.js
+tailwind.darkside.config.js
 !tailwind.config.d.ts
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 7.4.0
+
 ## 7.3.1

 ## 7.3.0
@@ -0,0 +1,75 @@
+import { writeFileSync } from "fs";
+import { kebabCaseForAlpha } from "@navikt/ds-tokens/config/kebabCase";
+import { breakpointsTokenConfig } from "@navikt/ds-tokens/darkside/tokens/breakpoints";
+import * as TokensBuild from "@navikt/ds-tokens/dist/darkside/tokens";
+
+const transformedTokens = Object.fromEntries(
+  Object.entries(TokensBuild).map(([key, value]) => {
+    return [kebabCaseForAlpha(key), value];
+  }),
+);
+
+const nonColorTokens = [
+  "spacing",
+  "shadow",
+  "font-weight",
+  "font-size",
+  "font-line-height",
+  "font-family",
+  "border-radius",
+  "breakpoint",
+];
+/*
+ * Assumes that all remaining names not in nonColorTokens are colors
+ * TODO: Should probably write some tests on this when tokens are more stable
+ */
+const colorTokensEntries = Object.entries(transformedTokens).filter(([key]) => {
+  return !nonColorTokens.find((prefix) => key.toLowerCase().includes(prefix));
+});
+const colors = Object.fromEntries(colorTokensEntries);
+
+/**
+ * TODO features
+ * - Shadow
+ * TODO deprecations:
+ * - max-width
+ * - z-index
+ */
+const config = {
+  theme: {
+    colors,
+    screens: {
+      sm: breakpointsTokenConfig.breakpoint.sm.value,
+      md: breakpointsTokenConfig.breakpoint.md.value,
+      lg: breakpointsTokenConfig.breakpoint.lg.value,
+      xl: breakpointsTokenConfig.breakpoint.xl.value,
+      "2xl": breakpointsTokenConfig.breakpoint["2xl"].value,
+    },
+    extend: {
+      spacing: extractTokensForCategory("spacing"),
+      fontWeight: extractTokensForCategory("font-weight"),
+      fontSize: extractTokensForCategory("font-size"),
+      lineHeight: extractTokensForCategory("font-line-height"),
+      fontFamily: extractTokensForCategory("font-family"),
+      borderRadius: extractTokensForCategory("border-radius"),
+    },
+  },
+};
+
+const outputString = `module.exports = ${JSON.stringify(config, null, 2)};`;
+
+writeFileSync("tailwind.darkside.config.js", outputString);
+
+/* -------------------------------------------------------------------------- */
+/*                                  Utilities                                 */
+/* -------------------------------------------------------------------------- */
+
+/* Cherry-picks object keys we want */
+function extractTokensForCategory(tokenName: string) {
+  const tokens = Object.entries(transformedTokens)
+    .filter(([key]) => key.startsWith(tokenName))
+    /* We want extract only the value from each token, so we replace the name: "spacing-4" -> "4" */
+    .map(([key, value]) => [key.replace(`${tokenName}-`, ""), value]);
+
+  return Object.fromEntries(tokens);
+}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "7.3.1",
+  "version": "7.4.0",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -15,7 +15,7 @@
    "tailwind.config.d.ts"
  ],
  "scripts": {
-    "build": "yarn tsx ./src",
+    "build": "tsx ./src && tsx darkside.ts",
    "test": "vitest run",
    "test:watch": "vitest watch"
  },
@@ -25,7 +25,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^7.3.1",
+    "@navikt/ds-tokens": "^7.4.0",
    "color": "4.2.3",
    "lodash": "^4.17.21",
    "tailwindcss": "^3.3.3",
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens

+## 7.4.0
+
 ## 7.3.1

 ## 7.3.0
@@ -1,18 +1,17 @@
 import { StyleDictionaryTokenConfig } from "../util";

-export const breakpointsTokenConfig: StyleDictionaryTokenConfig<"global-breakpoints"> =
-  {
-    breakpoint: {
-      xs: { value: "0", type: "global-breakpoints" },
-      sm: { value: "480px", type: "global-breakpoints" },
-      "sm-down": { value: "479px", type: "global-breakpoints" },
-      md: { value: "768px", type: "global-breakpoints" },
-      "md-down": { value: "767px", type: "global-breakpoints" },
-      lg: { value: "1024px", type: "global-breakpoints" },
-      "lg-down": { value: "1023px", type: "global-breakpoints" },
-      xl: { value: "1280px", type: "global-breakpoints" },
-      "xl-down": { value: "1279px", type: "global-breakpoints" },
-      "2xl": { value: "1440px", type: "global-breakpoints" },
-      "2xl-down": { value: "1439px", type: "global-breakpoints" },
-    },
-  };
+export const breakpointsTokenConfig = {
+  breakpoint: {
+    xs: { value: "0", type: "global-breakpoints" },
+    sm: { value: "480px", type: "global-breakpoints" },
+    "sm-down": { value: "479px", type: "global-breakpoints" },
+    md: { value: "768px", type: "global-breakpoints" },
+    "md-down": { value: "767px", type: "global-breakpoints" },
+    lg: { value: "1024px", type: "global-breakpoints" },
+    "lg-down": { value: "1023px", type: "global-breakpoints" },
+    xl: { value: "1280px", type: "global-breakpoints" },
+    "xl-down": { value: "1279px", type: "global-breakpoints" },
+    "2xl": { value: "1440px", type: "global-breakpoints" },
+    "2xl-down": { value: "1439px", type: "global-breakpoints" },
+  },
+} satisfies StyleDictionaryTokenConfig<"global-breakpoints">;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "7.3.1",
+  "version": "7.4.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,19 @@
 # Changelog

+## 7.4
+
+### @navikt/ds-react
+
+- Combobox: Enable option to add a new value while autocompleting and highlight matches in FilteredOptions. ([#3225](https://github.com/navikt/aksel/pull/3225))
+
+* Date/MonthPicker: Upgrade react-day-picker to fix issue with React 19 ([#3268](https://github.com/navikt/aksel/pull/3268))
+
+* Combobox: Don't scroll when browsing list with mouse ([#3265](https://github.com/navikt/aksel/pull/3265))
+
+* Avoid warning about element.ref in React 19 ([#3268](https://github.com/navikt/aksel/pull/3268))
+
+* Checkbox: Remove redundant attribute aria-checked ([#3274](https://github.com/navikt/aksel/pull/3274))
+
 ## 7.3

 ### @navikt/ds-react
@@ -15,10 +15,10 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^7.3.1",
-    "@navikt/ds-css": "^7.3.1",
-    "@navikt/ds-react": "^7.3.1",
-    "@navikt/ds-tailwind": "^7.3.1",
-    "@navikt/ds-tokens": "^7.3.1"
+    "@navikt/aksel-icons": "^7.4.0",
+    "@navikt/ds-css": "^7.4.0",
+    "@navikt/ds-react": "^7.4.0",
+    "@navikt/ds-tailwind": "^7.4.0",
+    "@navikt/ds-tokens": "^7.4.0"
  }
 }
@@ -15,6 +15,7 @@ import {
  SidebarT,
 } from "@/types";
 import { generateSidebar } from "@/utils";
+import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { grunnleggendeKategorier } from "../../sanity/config";
@@ -97,7 +98,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
              <div>
                {page?.[`ingress_${kat.value}`] && (
                  <BodyLong size="large" className="mb-4 only:mb-7">
-                    {page[`ingress_${kat.value}`]}
+                    <TextWithMarkdownLink>
+                      {page[`ingress_${kat.value}`]}
+                    </TextWithMarkdownLink>
                  </BodyLong>
                )}
                {page?.[`intro_${kat.value}`] && (
@@ -25,6 +25,7 @@ import {
 } from "@/types";
 import { generateSidebar } from "@/utils";
 import { IntroCards } from "@/web/IntroCards";
+import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { komponentKategorier } from "../../sanity/config";
@@ -133,7 +134,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
              <div>
                {page?.[`ingress_${kat.value}`] && (
                  <BodyLong size="large" className="mb-4 only:mb-7">
-                    {page[`ingress_${kat.value}`]}
+                    <TextWithMarkdownLink>
+                      {page[`ingress_${kat.value}`]}
+                    </TextWithMarkdownLink>
                  </BodyLong>
                )}
                {page?.[`intro_${kat.value}`] && (
@@ -15,6 +15,7 @@ import {
  SidebarT,
 } from "@/types";
 import { generateSidebar } from "@/utils";
+import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
 import { PagePreview } from "@/web/preview/PagePreview";
 import { SEO } from "@/web/seo/SEO";
 import { templatesKategorier } from "../../sanity/config";
@@ -97,7 +98,9 @@ const Page = ({ page, sidebar, links }: PageProps["props"]) => {
              <div>
                {page?.[`ingress_${kat.value}`] && (
                  <BodyLong size="large" className="mb-4 only:mb-7">
-                    {page[`ingress_${kat.value}`]}
+                    <TextWithMarkdownLink>
+                      {page[`ingress_${kat.value}`]}
+                    </TextWithMarkdownLink>
                  </BodyLong>
                )}
                {page?.[`intro_${kat.value}`] && (
@@ -10,6 +10,7 @@ const views = () => {
    list.push(
      defineField({
        title: `Ingress ${kat.title}`,
+        description: "Støtter markdown-lenker",
        name: `ingress_${kat.value}`,
        type: "text",
        rows: 2,
@@ -10,6 +10,7 @@ const views = () => {
    list.push(
      defineField({
        title: `Ingress ${kat.title}`,
+        description: "Støtter markdown-lenker",
        name: `ingress_${kat.value}`,
        type: "text",
        rows: 2,
@@ -10,6 +10,7 @@ const views = () => {
    list.push(
      defineField({
        title: `Ingress ${kat.title}`,
+        description: "Støtter markdown-lenker",
        name: `ingress_${kat.value}`,
        type: "text",
        rows: 2,
@@ -3,7 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "dev": "next dev",
+    "dev": "rimraf .next && yarn && next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
@@ -12,8 +12,8 @@
    "@navikt/aksel-icons": "file:./../../@navikt/aksel-icons",
    "@navikt/ds-css": "file:./../../@navikt/core/css",
    "@navikt/ds-react": "file:./../../@navikt/core/react",
-    "@next/bundle-analyzer": "^14.1.0",
-    "next": "14.2.12",
+    "@next/bundle-analyzer": "^15.0.0",
+    "next": "15.0.0",
    "react": "^18",
    "react-dom": "^18"
  },
@@ -21,6 +21,7 @@
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
+    "rimraf": "^6.0.1",
    "typescript": "5.5.4"
  }
 }
@@ -1,6 +1,8 @@
 "use client";

 import { ExpansionCard } from "@navikt/ds-react";
+import { Box } from "@navikt/ds-react/Box";
+import { DatePicker, useDatepicker } from "@navikt/ds-react/DatePicker";
 import { omit, useClientLayoutEffect } from "@navikt/ds-react/Utils";

 export const ClientComponent = () => {
@@ -21,3 +23,19 @@ export const ClientComponent = () => {
    </div>
  );
 };
+
+export const MyDatePicker = () => {
+  const { datepickerProps, inputProps, selectedDay } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    onDateChange: console.info,
+  });
+
+  return (
+    <div>
+      <DatePicker {...datepickerProps}>
+        <DatePicker.Input {...inputProps} label="Velg dato" />
+      </DatePicker>
+      <Box paddingBlock="4 0">{selectedDay?.toLocaleDateString()}</Box>
+    </div>
+  );
+};
@@ -83,30 +83,6 @@
  padding: 4rem 0;
 }

-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: "";
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
 .logo {
  position: relative;
 }
@@ -13,7 +13,7 @@ import {
 import { Select } from "@navikt/ds-react/Select";
 import { Tooltip } from "@navikt/ds-react/Tooltip";
 import { omit } from "@navikt/ds-react/Utils";
-import { ClientComponent } from "./client";
+import { ClientComponent, MyDatePicker } from "./client";
 import styles from "./page.module.css";

 export default function Home() {
@@ -116,6 +116,9 @@ export default function Home() {
        <Checkbox value="Midterst">Midterst</Checkbox>
        <Checkbox value="Fremst">Fremst</Checkbox>
      </CheckboxGroup>
+
+      <MyDatePicker />
+
      <div className={styles.center}>
        <Image
          className={styles.logo}
@@ -19,7 +19,8 @@
    ],
    "paths": {
      "@/*": ["./src/*"]
-    }
+    },
+    "target": "ES2017"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
@@ -3711,7 +3711,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/aksel-icons@npm:^7.3.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@npm:^7.3.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
  dependencies:
@@ -3742,8 +3742,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
  dependencies:
-    "@navikt/ds-css": "npm:^7.3.0"
-    "@navikt/ds-tokens": "npm:^7.3.0"
+    "@navikt/ds-css": "npm:^7.3.1"
+    "@navikt/ds-tokens": "npm:^7.3.1"
    concurrently: "npm:9.0.1"
    postcss-selector-parser: "npm:^6.0.13"
    postcss-value-parser: "npm:^4.2.0"
@@ -3758,7 +3758,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel@workspace:@navikt/aksel"
  dependencies:
-    "@navikt/ds-css": "npm:7.3.0"
+    "@navikt/ds-css": "npm:7.3.1"
    axios: "npm:1.7.4"
    chalk: "npm:4.1.0"
    clipboardy: "npm:^2.3.0"
@@ -3779,11 +3779,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@npm:*, @navikt/ds-css@npm:7.3.0, @navikt/ds-css@npm:^7.3.0, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@npm:*, @navikt/ds-css@npm:7.3.1, @navikt/ds-css@npm:^7.3.1, @navikt/ds-css@workspace:@navikt/core/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css@workspace:@navikt/core/css"
  dependencies:
-    "@navikt/ds-tokens": "npm:^7.3.0"
+    "@navikt/ds-tokens": "npm:^7.3.1"
    autoprefixer: "npm:^10.4.20"
    cssnano: "npm:6.0.0"
    fast-glob: "npm:3.2.11"
@@ -3797,14 +3797,14 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.3.0, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.3.1, @navikt/ds-react@workspace:@navikt/core/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react@workspace:@navikt/core/react"
  dependencies:
    "@floating-ui/react": "npm:0.25.4"
    "@floating-ui/react-dom": "npm:^2.0.9"
-    "@navikt/aksel-icons": "npm:^7.3.0"
-    "@navikt/ds-tokens": "npm:^7.3.0"
+    "@navikt/aksel-icons": "npm:^7.3.1"
+    "@navikt/ds-tokens": "npm:^7.3.1"
    "@testing-library/dom": "npm:9.3.4"
    "@testing-library/jest-dom": "npm:^5.16.0"
    "@testing-library/react": "npm:^15.0.7"
@@ -3814,7 +3814,7 @@ __metadata:
    date-fns: "npm:^3.0.0"
    fast-glob: "npm:3.2.11"
    jsdom: "npm:24.0.0"
-    react-day-picker: "npm:8.10.0"
+    react-day-picker: "npm:8.10.1"
    react-dom: "npm:^18.0.0"
    react-router-dom: "npm:^6.3.0"
    rimraf: "npm:6.0.1"
@@ -3832,11 +3832,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@npm:^7.3.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@npm:^7.3.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
  dependencies:
-    "@navikt/ds-tokens": "npm:^7.3.0"
+    "@navikt/ds-tokens": "npm:^7.3.1"
    color: "npm:4.2.3"
    lodash: "npm:^4.17.21"
    tailwindcss: "npm:^3.3.3"
@@ -3846,7 +3846,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@npm:^7.3.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@npm:^7.3.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -7729,11 +7729,11 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/aksel-icons": "npm:^7.3.0"
-    "@navikt/ds-css": "npm:^7.3.0"
-    "@navikt/ds-react": "npm:^7.3.0"
-    "@navikt/ds-tailwind": "npm:^7.3.0"
-    "@navikt/ds-tokens": "npm:^7.3.0"
+    "@navikt/aksel-icons": "npm:^7.3.1"
+    "@navikt/ds-css": "npm:^7.3.1"
+    "@navikt/ds-react": "npm:^7.3.1"
+    "@navikt/ds-tailwind": "npm:^7.3.1"
+    "@navikt/ds-tokens": "npm:^7.3.1"
  languageName: unknown
  linkType: soft

@@ -20210,13 +20210,13 @@ __metadata:
  languageName: node
  linkType: hard

-"react-day-picker@npm:8.10.0":
-  version: 8.10.0
-  resolution: "react-day-picker@npm:8.10.0"
+"react-day-picker@npm:8.10.1":
+  version: 8.10.1
+  resolution: "react-day-picker@npm:8.10.1"
  peerDependencies:
    date-fns: ^2.28.0 || ^3.0.0
    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/974496ce004762d521923fc533f6ad6ff8d1f24368220753106617eb199aeb9658b4b7734e12a3fe8a5057840464a3d2d08b4b7f9a84ec77a59c50cc647f6dbc
+  checksum: 10/374056dca7fed70a154a3b0e98c6c746c26b4fc868548fa8f285ef3cab9679537e84c0c21ba7b6db67b3f7f54cc562f5d83efba2c7f2c7bd3705ac8992869607
  languageName: node
  linkType: hard
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	f27698a2bf	Version Packages (#3270 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-10-24 09:15:01 +02:00
Halvor Haugan	fdc3244cde	Better support for React 19 (#3268 ) * Date/MonthPicker: Upgrade react-day-picker to fix issue with Nextjs 15 * Slot: Use ref from props to avoid warning in React 19	2024-10-24 09:07:26 +02:00
Vegard Haugstvedt	59dc3e999b	Feature/combobox show add new value while autocompleting (#3225 ) * Show AddNewValue button in Combobox based on searchTerm instead of value, so it is displayed when autocompleting words * Highlight matching text in FilteredOptions * Add changeset * Move styling to combobox.css instead of inline JS * Ensure label options are read as one text, even when highlighting search matches. This only seemed to be a problem in testing library, so we should be able to remove this if they fix this in their calculation of accessible name. * Update changeset to a minor version * Re-introduce controlled value in storybook examples to not change Chromatic snapshots	2024-10-23 15:42:26 +02:00
Halvor Haugan	9711de90da	Checkbox: Remove redundant attribute aria-checked (#3274 )	2024-10-23 13:48:46 +02:00
Halvor Haugan	ddf9f9bc5a	Combobox: Don't scroll when moving virtual focus with mouse (#3265 )	2024-10-23 09:44:11 +02:00
Ken	d83a6feb36	[Darkside] Tailwind CSS config for new tokens (#3251 ) * change: Updated actionmenu examples * change: Removed flipAlignment prop for better alignment * change: Removed defaultOpen-prop from ActionMenu * change: Moved rootElement prop to component root * change: Added support for use inside Modal * change: Use MenuPortalProps instead of Pick * feat: Added build for darkside * feat: Implemented darkside-tokens in tailwind-build * change: Code cleanup and syntax simplification * change: Moved color-token extraction to start of file * memo: Moved comment	2024-10-21 17:04:06 +02:00
Ken	f505386104	[Aksel.nav.no] Add support for markdown-links in intro-texts (#3262 ) * change: added markdown-support for intro-texts * change: Added description for sanity-fields	2024-10-21 16:56:03 +02:00