@helsenorge/designsystem-react 13.5.0 → 13.7.0

package/lib/hoc/withBreakpoint/index.js

@@ -1,5 +1,3 @@
-import "../../grid.js";
-import "../../useBreakpoint.js";
 import { n as withBreakpoint_default$1, t as withBreakpoint } from "../../withBreakpoint.js";
 var withBreakpoint_default = withBreakpoint_default$1;
 export { withBreakpoint_default as default, withBreakpoint };

package/lib/hoc/withBreakpoint/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/hoc/withBreakpoint/index.ts"],"sourcesContent":["import withBreakpoint from './withBreakpoint';\nexport * from './withBreakpoint';\nexport default withBreakpoint;\n"],"mappings":";;;AAEA,IAAA,yBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/hoc/withBreakpoint/index.ts"],"sourcesContent":["import withBreakpoint from './withBreakpoint';\nexport * from './withBreakpoint';\nexport default withBreakpoint;\n"],"mappings":";AAEA,IAAA,yBAAe"}

package/lib/hoc/withBreakpoint/withBreakpoint.js

@@ -1,4 +1,2 @@
-import "../../grid.js";
-import "../../useBreakpoint.js";
 import { n as withBreakpoint_default, t as withBreakpoint } from "../../withBreakpoint.js";
 export { withBreakpoint_default as default, withBreakpoint };

package/lib/hooks/useBreakpoint.js

@@ -1,3 +1,2 @@
-import "../grid.js";
 import { n as useBreakpoint, t as Breakpoint } from "../useBreakpoint.js";
 export { Breakpoint, useBreakpoint };

package/lib/hooks/useExpand.js

@@ -1,3 +1,2 @@
-import "../usePrevious.js";
 import { t as useExpand } from "../useExpand.js";
 export { useExpand };

package/lib/hooks/useFocusToggle.js

@@ -1,4 +1,2 @@
-import "../useElementList.js";
-import "../useFocusableElements.js";
 import { t as useFocusToggle } from "../useFocusToggle.js";
 export { useFocusToggle };

package/lib/hooks/useFocusTrap.js

@@ -1,5 +1,2 @@
-import "../useElementList.js";
-import "../useFocusableElements.js";
-import "../focus.js";
 import { n as useFocusTrap_default, t as useFocusTrap } from "../useFocusTrap.js";
 export { useFocusTrap_default as default, useFocusTrap };

package/lib/hooks/useFocusableElements.js

@@ -1,3 +1,2 @@
-import "../useElementList.js";
 import { n as useFocusableElements, t as FOCUSABLE_SELECTORS } from "../useFocusableElements.js";
 export { FOCUSABLE_SELECTORS, useFocusableElements };

package/lib/hooks/useIcons.js

@@ -1,8 +1,2 @@
-import "../constants2.js";
-import "../Icon.js";
-import "../_rolldown_dynamic_import_helper.js";
-import "../useIsServerSide.js";
-import "../LazyIcon.js";
-import "../component.js";
 import { t as useIcons } from "../useIcons.js";
 export { useIcons };

package/lib/hooks/useIsMobileBreakpoint.js

@@ -1,4 +1,2 @@
-import "../grid.js";
-import "../useBreakpoint.js";
 import { t as useIsMobileBreakpoint } from "../useIsMobileBreakpoint.js";
 export { useIsMobileBreakpoint };

package/lib/hooks/useIsVisible.js

@@ -1,3 +1,2 @@
-import "../useIntersectionObserver.js";
 import { t as useIsVisible } from "../useIsVisible.js";
 export { useIsVisible };

package/lib/hooks/useLayoutEvent.js

@@ -1,3 +1,2 @@
-import "../debounce.js";
 import { t as useLayoutEvent } from "../useLayoutEvent.js";
 export { useLayoutEvent };

package/lib/hooks/useReturnFocusOnUnmount.js

@@ -1,4 +1,2 @@
-import "../focus.js";
-import "../deepContains.js";
 import { t as useReturnFocusOnUnmount } from "../useReturnFocusOnUnmount.js";
 export { useReturnFocusOnUnmount };

package/lib/hooks/useRovingFocus.js

@@ -1,4 +1,2 @@
-import "../constants2.js";
-import "../useKeyboardEvent.js";
 import { t as useRovingFocus } from "../useRovingFocus.js";
 export { useRovingFocus };

package/lib/hooks/useSize.js

@@ -1,3 +1,2 @@
-import "../debounce.js";
 import { t as useSize } from "../useSize.js";
 export { useSize };

package/lib/hooks/useToggle.js

@@ -1,3 +1,2 @@
-import "../usePrevious.js";
 import { t as useToggle } from "../useToggle.js";
 export { useToggle };

package/lib/index.js

@@ -1,20 +1,12 @@
 import { t as uuid } from "./uuid.js";
-import "./environment.js";
 import { a as IconSize, c as ZIndex, i as FormSize, n as AnalyticsId, o as KeyboardEventKey, r as FormOnColor, s as LanguageLocales, t as AVERAGE_CHARACTER_WIDTH_PX } from "./constants2.js";
 import { t as usePseudoClasses } from "./usePseudoClasses.js";
-import "./grid.js";
-import "./palette.js";
-import "./spacers.js";
 import { t as theme } from "./theme.js";
 import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
-import "./useElementList.js";
-import "./useFocusableElements.js";
 import { t as useFocusToggle } from "./useFocusToggle.js";
-import "./focus.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
 import { t as useIntersectionObserver } from "./useIntersectionObserver.js";
 import { t as useIsVisible } from "./useIsVisible.js";
-import "./debounce.js";
 import { t as useLayoutEvent } from "./useLayoutEvent.js";
 import { t as usePrevious } from "./usePrevious.js";
 import { t as useSize } from "./useSize.js";
@@ -23,5 +15,4 @@ import { t as useToggle } from "./useToggle.js";
 import { t as useKeyboardEvent } from "./useKeyboardEvent.js";
 import { t as useOutsideEvent } from "./useOutsideEvent.js";
 import { t as isMobileUA } from "./mobile.js";
-import "./src.js";
 export { AVERAGE_CHARACTER_WIDTH_PX, AnalyticsId, Breakpoint, FormOnColor, FormSize, IconSize, KeyboardEventKey, LanguageLocales, ZIndex, isMobileUA, theme, useBreakpoint, useFocusToggle, useFocusTrap, useIntersectionObserver, useIsVisible, useKeyboardEvent, useLayoutEvent, useOutsideEvent, usePrevious, usePseudoClasses, useResizeObserver, useSize, useToggle, uuid };

package/lib/theme/currys/color.js

@@ -1,6 +1,2 @@
-import "../../grid.js";
-import "../../palette.js";
-import "../../spacers.js";
-import "../../theme.js";
 import { n as getHoverColor, t as getColor } from "../../color.js";
 export { getColor, getHoverColor };

package/lib/theme/currys/index.js

@@ -1,8 +1,3 @@
-import "../../grid.js";
-import "../../palette.js";
-import "../../spacers.js";
-import "../../theme.js";
 import { n as getHoverColor, t as getColor } from "../../color.js";
 import { n as mapSpacerValue, t as getSpacer } from "../../spacing.js";
-import "../../currys.js";
 export { getColor, getHoverColor, getSpacer, mapSpacerValue };

package/lib/theme/currys/spacing.js

@@ -1,3 +1,2 @@
-import "../../spacers.js";
 import { n as mapSpacerValue, t as getSpacer } from "../../spacing.js";
 export { getSpacer, mapSpacerValue };

package/lib/theme/index.js

@@ -1,5 +1,2 @@
-import "../grid.js";
-import "../palette.js";
-import "../spacers.js";
 import { t as theme } from "../theme.js";
 export { theme };

package/lib/useElementList.js

@@ -1,10 +1,23 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 const useElementList = (ref, selectors, options) => {
 	const [elementList, setElementList] = useState();
+	const previousElementsRef = useRef([]);
 	useEffect(() => {
 		const handleMutationChange = () => {
 			const elements = ref.current?.querySelectorAll(selectors);
-			setElementList(elements);
+			if (!elements) {
+				if (previousElementsRef.current.length > 0) {
+					previousElementsRef.current = [];
+					setElementList(void 0);
+				}
+				return;
+			}
+			const elementsArray = Array.from(elements);
+			const previousElements = previousElementsRef.current;
+			if (elementsArray.length !== previousElements.length || elementsArray.some((el, i) => el !== previousElements[i])) {
+				previousElementsRef.current = elementsArray;
+				setElementList(elements);
+			}
 		};
 		const mutationObserver = new MutationObserver(handleMutationChange);
 		if (ref?.current) mutationObserver.observe(ref.current, {

package/lib/useElementList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useElementList.js","names":[],"sources":["../src/hooks/useElementList.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\n/**\n * Hent ut en liste med HTML-elementer. Bruker MutationObserver-APIet.\n * @param ref Element som skal observeres\n * @param selectors Selektorer som sendes til querySelectorAll for å hente ut liste med elementer\n * @param options MutationObserver-options. Default er å lytte på endringer på child-elementer og deres attributter.\n * @returns Liste med HTML-elementer\n */\nexport const useElementList = (\n  ref: React.RefObject<HTMLElement>,\n  selectors: string,\n  options?: MutationObserverInit\n): NodeListOf<HTMLElement> | undefined => {\n  const [elementList, setElementList] = useState<NodeListOf<HTMLElement>>();\n\n  useEffect(() => {\n    const handleMutationChange = (): void => {\n      const elements = ref.current?.querySelectorAll<HTMLElement>(selectors);\n      setElementList(elements);\n    };\n\n    const mutationObserver = new MutationObserver(handleMutationChange);\n    if (ref?.current) {\n      mutationObserver.observe(ref.current, { subtree: true, childList: true, attributes: true, ...options });\n    }\n\n    handleMutationChange();\n\n    return (): void => {\n      mutationObserver.disconnect();\n    };\n  }, [ref, selectors]);\n\n  return elementList;\n};\n"],"mappings":";AASA,MAAa,kBACX,KACA,WACA,YACwC;CACxC,MAAM,CAAC,aAAa,kBAAkB,UAAmC;AAEzE,iBAAgB;EACd,MAAM,6BAAmC;GACvC,MAAM,WAAW,IAAI,SAAS,iBAA8B,UAAU;AACtE,kBAAe,SAAS;;EAG1B,MAAM,mBAAmB,IAAI,iBAAiB,qBAAqB;AACnE,MAAI,KAAK,QACP,kBAAiB,QAAQ,IAAI,SAAS;GAAE,SAAS;GAAM,WAAW;GAAM,YAAY;GAAM,GAAG;GAAS,CAAC;AAGzG,wBAAsB;AAEtB,eAAmB;AACjB,oBAAiB,YAAY;;IAE9B,CAAC,KAAK,UAAU,CAAC;AAEpB,QAAO"}
+{"version":3,"file":"useElementList.js","names":[],"sources":["../src/hooks/useElementList.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\n\n/**\n * Hent ut en liste med HTML-elementer. Bruker MutationObserver-APIet.\n * @param ref Element som skal observeres\n * @param selectors Selektorer som sendes til querySelectorAll for å hente ut liste med elementer\n * @param options MutationObserver-options. Default er å lytte på endringer på child-elementer og deres attributter.\n * @returns Liste med HTML-elementer\n */\nexport const useElementList = (\n  ref: React.RefObject<HTMLElement>,\n  selectors: string,\n  options?: MutationObserverInit\n): NodeListOf<HTMLElement> | undefined => {\n  const [elementList, setElementList] = useState<NodeListOf<HTMLElement>>();\n  const previousElementsRef = useRef<HTMLElement[]>([]);\n\n  useEffect(() => {\n    const handleMutationChange = (): void => {\n      const elements = ref.current?.querySelectorAll<HTMLElement>(selectors);\n      if (!elements) {\n        if (previousElementsRef.current.length > 0) {\n          previousElementsRef.current = [];\n          setElementList(undefined);\n        }\n        return;\n      }\n\n      // We check if an element has been added/removed to avoid extra state updates on other changes.\n      const elementsArray = Array.from(elements);\n      const previousElements = previousElementsRef.current;\n\n      const hasChanged = elementsArray.length !== previousElements.length || elementsArray.some((el, i) => el !== previousElements[i]);\n\n      if (hasChanged) {\n        previousElementsRef.current = elementsArray;\n        setElementList(elements);\n      }\n    };\n\n    const mutationObserver = new MutationObserver(handleMutationChange);\n    if (ref?.current) {\n      mutationObserver.observe(ref.current, { subtree: true, childList: true, attributes: true, ...options });\n    }\n\n    handleMutationChange();\n\n    return (): void => {\n      mutationObserver.disconnect();\n    };\n  }, [ref, selectors]);\n\n  return elementList;\n};\n"],"mappings":";AASA,MAAa,kBACX,KACA,WACA,YACwC;CACxC,MAAM,CAAC,aAAa,kBAAkB,UAAmC;CACzE,MAAM,sBAAsB,OAAsB,EAAE,CAAC;AAErD,iBAAgB;EACd,MAAM,6BAAmC;GACvC,MAAM,WAAW,IAAI,SAAS,iBAA8B,UAAU;AACtE,OAAI,CAAC,UAAU;AACb,QAAI,oBAAoB,QAAQ,SAAS,GAAG;AAC1C,yBAAoB,UAAU,EAAE;AAChC,oBAAe,KAAA,EAAU;;AAE3B;;GAIF,MAAM,gBAAgB,MAAM,KAAK,SAAS;GAC1C,MAAM,mBAAmB,oBAAoB;AAI7C,OAFmB,cAAc,WAAW,iBAAiB,UAAU,cAAc,MAAM,IAAI,MAAM,OAAO,iBAAiB,GAAG,EAEhH;AACd,wBAAoB,UAAU;AAC9B,mBAAe,SAAS;;;EAI5B,MAAM,mBAAmB,IAAI,iBAAiB,qBAAqB;AACnE,MAAI,KAAK,QACP,kBAAiB,QAAQ,IAAI,SAAS;GAAE,SAAS;GAAM,WAAW;GAAM,YAAY;GAAM,GAAG;GAAS,CAAC;AAGzG,wBAAsB;AAEtB,eAAmB;AACjB,oBAAiB,YAAY;;IAE9B,CAAC,KAAK,UAAU,CAAC;AAEpB,QAAO"}

package/lib/utils/uuid.js

@@ -1,3 +1,2 @@
 import { n as uuid_default, t as uuid } from "../uuid.js";
-import "../environment.js";
 export { uuid_default as default, uuid };

package/lib/uuid.js

@@ -12,7 +12,7 @@ var __export = (all, symbols) => {
 var uuid_exports = /* @__PURE__ */ __export({
 	default: () => uuid_default,
 	uuid: () => uuid
-});
+}, 1);
 const uuid = () => {
 	if (isTest()) return "test";
 	return "bxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx".replace(/[x]/g, function(c) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "13.5.0",
+  "version": "13.7.0",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",
@@ -748,9 +748,6 @@
     "generate:iconnames": "node __scripts__/generateIconNames.mjs",
     "generate:illustrationnames": "node __scripts__/generateIllustrationNames.mjs",
     "generate:cssdefinitions": "typed-scss-modules \"src/**/*.module.scss\" --nameFormat none --exportType default --includePaths node_modules ../../node_modules",
-    "pregenerate:figmatokens": "git -C ../../../designtokens pull https://github.com/helsenorge/designtokens.git",
-    "generate:figmatokens": "token-transformer ../../../designtokens/tokens.json data/design-tokens.json hn-designsystem --resolveReferences=false",
-    "postgenerate:figmatokens": "style-dictionary build --config figma-token.config.json",
     "eslint": "eslint \"src/**/*.{ts,tsx}\"",
     "eslint:fix": "npm run eslint -- --fix",
     "stylelint": "stylelint \"src/**/*.{css,scss}\"",
@@ -764,7 +761,7 @@
   },
   "peerDependencies": {
     "classnames": "^2.3.2",
-    "motion": "^11.0.0",
+    "motion": "^12.0.0",
     "normalize.css": "^8.0.1",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -776,7 +773,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.8",
-    "motion": "^11.14.3"
+    "motion": "^12.23.22"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",
@@ -809,8 +806,6 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.79.5",
     "storybook": "^10.0.5",
-    "style-dictionary": "^4.1.3",
-    "token-transformer": "^0.0.33",
     "typescript": "~5.8.2",
     "vite": "npm:rolldown-vite@^7.1.2",
     "vite-plugin-dts": "^4.5.4",

package/lib/scss/_figma-tokens.scss

@@ -1,68 +0,0 @@
-// Do not edit directly
-// Generated on Wed, 05 Oct 2022 11:38:01 GMT
-
-$palette-white: #fff;
-$palette-black: #000;
-$palette-plum900: #3c1471;
-$palette-plum800: #4c1b8c;
-$palette-plum700: #5b22a6;
-$palette-plum600: #6a2abf;
-$palette-plum500: #7a33d7;
-$palette-plum400: #9153e2;
-$palette-plum300: #a875eb;
-$palette-plum200: #bf98f3;
-$palette-plum100: #d7bdf9;
-$palette-plum50: #efe4fd;
-$palette-neutral900: #2b2c2b;
-$palette-neutral800: #474745;
-$palette-neutral700: #62625f;
-$palette-neutral600: #7d7c79;
-$palette-neutral500: #989693;
-$palette-neutral400: #aaa8a6;
-$palette-neutral300: #bdbab9;
-$palette-neutral200: #d6d4d3;
-$palette-neutral100: #eae7e7;
-$palette-neutral50: #f5f3f3;
-$palette-kiwi900: #078141;
-$palette-kiwi800: #099150;
-$palette-kiwi700: #0ca161;
-$palette-kiwi600: #10b172;
-$palette-kiwi500: #33be84;
-$palette-kiwi400: #56ca96;
-$palette-kiwi300: #79d6aa;
-$palette-kiwi200: #9de2bf;
-$palette-kiwi100: #c2edd6;
-$palette-kiwi50: #e6f8ee;
-$palette-cherry900: #7e1c0e;
-$palette-cherry800: #912112;
-$palette-cherry700: #a31f0e;
-$palette-cherry600: #b62e1c;
-$palette-cherry500: #c83521;
-$palette-cherry400: #d56147;
-$palette-cherry300: #e39376;
-$palette-cherry200: #eec0a5;
-$palette-cherry100: #f7e1d2;
-$palette-cherry50: #fff2ea;
-$palette-blueberry900: #084350;
-$palette-blueberry800: #06596c;
-$palette-blueberry700: #08667c;
-$palette-blueberry600: #126f87;
-$palette-blueberry500: #188097;
-$palette-blueberry400: #58aabb;
-$palette-blueberry300: #7abecc;
-$palette-blueberry200: #afdae3;
-$palette-blueberry100: #cae7ed;
-$palette-blueberry50: #e4f7f9;
-$palette-banana900: #764f00;
-$palette-banana800: #916500;
-$palette-banana700: #ab7c00;
-$palette-banana600: #c59302;
-$palette-banana500: #ddab06;
-$palette-banana400: #ebc840;
-$palette-banana300: #f1d460;
-$palette-banana200: #f5e080;
-$palette-banana100: #f9ea9f;
-$palette-banana50: #fcf2bf;
-$font-main: $palette-white;
-$backgrounds-destructive: $palette-cherry600;
-$backgrounds-main: $palette-blueberry600;

package/scss/_figma-tokens.scss

@@ -1,68 +0,0 @@
-// Do not edit directly
-// Generated on Wed, 05 Oct 2022 11:38:01 GMT
-
-$palette-white: #fff;
-$palette-black: #000;
-$palette-plum900: #3c1471;
-$palette-plum800: #4c1b8c;
-$palette-plum700: #5b22a6;
-$palette-plum600: #6a2abf;
-$palette-plum500: #7a33d7;
-$palette-plum400: #9153e2;
-$palette-plum300: #a875eb;
-$palette-plum200: #bf98f3;
-$palette-plum100: #d7bdf9;
-$palette-plum50: #efe4fd;
-$palette-neutral900: #2b2c2b;
-$palette-neutral800: #474745;
-$palette-neutral700: #62625f;
-$palette-neutral600: #7d7c79;
-$palette-neutral500: #989693;
-$palette-neutral400: #aaa8a6;
-$palette-neutral300: #bdbab9;
-$palette-neutral200: #d6d4d3;
-$palette-neutral100: #eae7e7;
-$palette-neutral50: #f5f3f3;
-$palette-kiwi900: #078141;
-$palette-kiwi800: #099150;
-$palette-kiwi700: #0ca161;
-$palette-kiwi600: #10b172;
-$palette-kiwi500: #33be84;
-$palette-kiwi400: #56ca96;
-$palette-kiwi300: #79d6aa;
-$palette-kiwi200: #9de2bf;
-$palette-kiwi100: #c2edd6;
-$palette-kiwi50: #e6f8ee;
-$palette-cherry900: #7e1c0e;
-$palette-cherry800: #912112;
-$palette-cherry700: #a31f0e;
-$palette-cherry600: #b62e1c;
-$palette-cherry500: #c83521;
-$palette-cherry400: #d56147;
-$palette-cherry300: #e39376;
-$palette-cherry200: #eec0a5;
-$palette-cherry100: #f7e1d2;
-$palette-cherry50: #fff2ea;
-$palette-blueberry900: #084350;
-$palette-blueberry800: #06596c;
-$palette-blueberry700: #08667c;
-$palette-blueberry600: #126f87;
-$palette-blueberry500: #188097;
-$palette-blueberry400: #58aabb;
-$palette-blueberry300: #7abecc;
-$palette-blueberry200: #afdae3;
-$palette-blueberry100: #cae7ed;
-$palette-blueberry50: #e4f7f9;
-$palette-banana900: #764f00;
-$palette-banana800: #916500;
-$palette-banana700: #ab7c00;
-$palette-banana600: #c59302;
-$palette-banana500: #ddab06;
-$palette-banana400: #ebc840;
-$palette-banana300: #f1d460;
-$palette-banana200: #f5e080;
-$palette-banana100: #f9ea9f;
-$palette-banana50: #fcf2bf;
-$font-main: $palette-white;
-$backgrounds-destructive: $palette-cherry600;
-$backgrounds-main: $palette-blueberry600;