@helsenorge/designsystem-react 14.0.0-beta.7 → 14.0.0

package/lib/hooks/useIsServerSide.d.ts

@@ -1,5 +1,5 @@
 /**
- * Sjekk om React kjører på server, eller ikke. (useEffect kjører ikke på server)
+ * Sjekk om React kjører på server, eller ikke.
  *
  * @returns true dersom koden kjører på server
  */

package/lib/resources/HN.Designsystem.ArticleTeaser.en-GB.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonClose": "Show more",
+  "expandButtonOpen": "Show less"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.ArticleTeaser.nb-NO.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonClose": "Vis mer",
+  "expandButtonOpen": "Vis mindre"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Drawer.en-GB.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "ariaLabelCloseBtn": "Close"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Drawer.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "ariaLabelCloseBtn": "Lukk"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Dropdown.en-GB.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "closeText": "Close"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Dropdown.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "closeText": "Lukk"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.FavoriteButton.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "ariaLabel": "Favorittmarkering"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.FormFieldTag.en-GB.json.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+  "allRequired": "All fields must be filled out",
+  "requiredField": "Required",
+  "optional": "Optional",
+  "allOptional": "All fields are optional",
+  "requiredRadiobuttonList": "Select one",
+  "requiredCheckboxList": "Select one or more",
+  "requiredSingleCheckbox": "Must be selected"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.FormFieldTag.nb-NO.json.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+  "allRequired": "Alle felt må fylles ut",
+  "requiredField": "Må fylles ut",
+  "optional": "Valgfritt",
+  "allOptional": "Alle felt er valgfrie",
+  "requiredRadiobuttonList": "Velg én",
+  "requiredCheckboxList": "Velg én eller flere",
+  "requiredSingleCheckbox": "Må velges"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.FormFieldTag.nn-NO.json.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+  "allRequired": "Alle felt må fyllast ut",
+  "requiredField": "Må fyllast ut",
+  "optional": "Valfritt",
+  "allOptional": "Alle felt er valfrie",
+  "requiredRadiobuttonList": "Vel éin",
+  "requiredCheckboxList": "Vel éin eller fleire",
+  "requiredSingleCheckbox": "Må veljast"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.FormFieldTag.se-NO.json.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+  "allRequired": "Buot sajiid ferte deavdit",
+  "requiredField": "Ferte devdojuvvot",
+  "optional": "Válljenláhkái",
+  "allOptional": "Buot sajit eat válljenláhkái",
+  "requiredRadiobuttonList": "Vállje ovtta",
+  "requiredCheckboxList": "Vállje ovtta dahje máŋga",
+  "requiredSingleCheckbox": "Ferte válljejuvvot"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.HelpBubble.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "ariaLabel": "Hjelpetekst"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.HelpDrawer.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "ariaLabel": "Hjelpetekst"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.InfoTeaser.en-GB.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonOpen": "Show less",
+  "expandButtonClose": "Show more"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.InfoTeaser.nb-NO.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonOpen": "Vis mindre",
+  "expandButtonClose": "Vis mer"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Input.en-GB.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "characters": "characters"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Input.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "characters": "tegn"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Input.nn-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "characters": "teikn"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.LinkList.en-GB.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "editMode_deleteButtonAriaLabel": "Delete"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.LinkList.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "editMode_deleteButtonAriaLabel": "Slett"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Panel.en-GB.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonOpen": "See details",
+  "expandButtonClose": "Hide details"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Panel.nb-NO.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "expandButtonOpen": "Se detaljer",
+  "expandButtonClose": "Skjul detaljer"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Tabs.en-GB.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "ariaLabelRightButton": "Scroll right",
+  "ariaLabelLeftButton": "Scroll left"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Tabs.nb-NO.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "ariaLabelRightButton": "Scroll til høyre",
+  "ariaLabelLeftButton": "Scroll til venstre"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.TextArea.en-GB.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "characters": "characters"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.TextArea.nb-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "characters": "tegn"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.TextArea.nn-NO.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "characters": "teikn"
+}
+;
+
+export default _default;

package/lib/resources/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/useBreakpoint.js

@@ -1,5 +1,5 @@
 import { r as screen, t as breakpoints } from "./grid.js";
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 let Breakpoint = /* @__PURE__ */ function(Breakpoint$1) {
 	Breakpoint$1[Breakpoint$1["xxs"] = breakpoints.xxs] = "xxs";
 	Breakpoint$1[Breakpoint$1["xs"] = breakpoints.xs] = "xs";
@@ -17,30 +17,21 @@ function getCurrentBreakpoint() {
 		};
 	}).find((entry) => entry.mq.matches)?.breakpoint ?? Breakpoint.xxs;
 }
-const useBreakpoint = () => {
-	const [breakpoint, setBreakpoint] = useState(Breakpoint.xxs);
-	useEffect(() => {
-		setBreakpoint(getCurrentBreakpoint());
-	}, []);
-	useEffect(() => {
-		const mediaQueryList = Object.values(screen).map((mediaQuery) => {
-			const mq = window.matchMedia(mediaQuery);
-			const handler = () => {
-				setBreakpoint(getCurrentBreakpoint());
-			};
-			mq.addEventListener("change", handler);
-			return {
-				mq,
-				handler
-			};
+function subscribeToBreakpointChanges(callback) {
+	const mediaQueryList = Object.values(screen).map((mediaQuery) => {
+		const mq = window.matchMedia(mediaQuery);
+		mq.addEventListener("change", callback);
+		return mq;
+	});
+	return () => {
+		mediaQueryList.forEach((mq) => {
+			mq.removeEventListener("change", callback);
 		});
-		return () => {
-			mediaQueryList.forEach(({ mq, handler }) => {
-				mq.removeEventListener("change", handler);
-			});
-		};
-	}, []);
-	return breakpoint;
+	};
+}
+var getServerSnapshot = () => Breakpoint.xxs;
+const useBreakpoint = () => {
+	return useSyncExternalStore(subscribeToBreakpointChanges, getCurrentBreakpoint, getServerSnapshot);
 };
 export { useBreakpoint as n, Breakpoint as t };
 

package/lib/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","names":[],"sources":["../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n  // We read from largest -> smallest or vice versa\n  // so that the first match is the \"highest\" one that applies\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // e.g. check xl, lg, md, etc. in descending order\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(Breakpoint.xxs);\n\n  useEffect(() => {\n    // Oppdater breakpoint i useEffect for å støtte server side rendering\n    setBreakpoint(getCurrentBreakpoint());\n  }, []);\n\n  useEffect(() => {\n    const mediaQueryList = Object.values(screen).map(mediaQuery => {\n      const mq = window.matchMedia(mediaQuery);\n      const handler = (): void => {\n        setBreakpoint(getCurrentBreakpoint());\n      };\n\n      mq.addEventListener('change', handler);\n      return { mq, handler };\n    });\n\n    return (): void => {\n      mediaQueryList.forEach(({ mq, handler }) => {\n        mq.removeEventListener('change', handler);\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"mappings":";;AAIA,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,aAAA,SAAM,YAAY,OAAA;AAClB,cAAA,aAAA,QAAK,YAAY,MAAA;AACjB,cAAA,aAAA,QAAK,YAAY,MAAA;AACjB,cAAA,aAAA,QAAK,YAAY,MAAA;AACjB,cAAA,aAAA,QAAK,YAAY,MAAA;AACjB,cAAA,aAAA,QAAK,YAAY,MAAA;;;AAGnB,SAAS,uBAAmC;AAa1C,QAVuB,OAAO,QAAQ,OAAO,CAC1C,SAAS,CACT,KAAK,CAAC,MAAM,gBAAgB;AAC3B,SAAO;GACL,YAAY,WAAW;GACvB,IAAI,OAAO,WAAW,WAAW;GAClC;GACD,CAE2B,MAAK,UAAS,MAAM,GAAG,QAAQ,EAC9C,cAAc,WAAW;;AAG3C,MAAa,sBAAkC;CAC7C,MAAM,CAAC,YAAY,iBAAiB,SAAqB,WAAW,IAAI;AAExE,iBAAgB;AAEd,gBAAc,sBAAsB,CAAC;IACpC,EAAE,CAAC;AAEN,iBAAgB;EACd,MAAM,iBAAiB,OAAO,OAAO,OAAO,CAAC,KAAI,eAAc;GAC7D,MAAM,KAAK,OAAO,WAAW,WAAW;GACxC,MAAM,gBAAsB;AAC1B,kBAAc,sBAAsB,CAAC;;AAGvC,MAAG,iBAAiB,UAAU,QAAQ;AACtC,UAAO;IAAE;IAAI;IAAS;IACtB;AAEF,eAAmB;AACjB,kBAAe,SAAS,EAAE,IAAI,cAAc;AAC1C,OAAG,oBAAoB,UAAU,QAAQ;KACzC;;IAEH,EAAE,CAAC;AAEN,QAAO"}
+{"version":3,"file":"useBreakpoint.js","names":[],"sources":["../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\n/** Sjekker nettleserens media queries fra største til minste; det høyeste treffet gjelder */\nfunction getCurrentBreakpoint(): Breakpoint {\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // Sjekk xl, lg, md, osv. i synkende rekkefølge\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\n/** Event listeners for media queries - dette varslet React ved endringer */\nfunction subscribeToBreakpointChanges(callback: () => void): () => void {\n  const mediaQueryList = Object.values(screen).map(mediaQuery => {\n    const mq = window.matchMedia(mediaQuery);\n    mq.addEventListener('change', callback);\n    return mq;\n  });\n\n  return (): void => {\n    mediaQueryList.forEach(mq => {\n      mq.removeEventListener('change', callback);\n    });\n  };\n}\n\n/** Brukes ved server side rendering der window ikke finnes. Returnerer minste breakpoint som default */\nconst getServerSnapshot = (): Breakpoint => Breakpoint.xxs;\n\nexport const useBreakpoint = (): Breakpoint => {\n  return useSyncExternalStore(subscribeToBreakpointChanges, getCurrentBreakpoint, getServerSnapshot);\n};\n"],"mappings":";;AAIA,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,aAAA,SAAM,YAAY,OAAA;AAClB,cAAA,aAAA,QAAK,YAAY,MAAA;AACjB,cAAA,aAAA,QAAK,YAAY,MAAA;AACjB,cAAA,aAAA,QAAK,YAAY,MAAA;AACjB,cAAA,aAAA,QAAK,YAAY,MAAA;AACjB,cAAA,aAAA,QAAK,YAAY,MAAA;;;AAInB,SAAS,uBAAmC;AAW1C,QAVuB,OAAO,QAAQ,OAAO,CAC1C,SAAS,CACT,KAAK,CAAC,MAAM,gBAAgB;AAC3B,SAAO;GACL,YAAY,WAAW;GACvB,IAAI,OAAO,WAAW,WAAW;GAClC;GACD,CAE2B,MAAK,UAAS,MAAM,GAAG,QAAQ,EAC9C,cAAc,WAAW;;AAI3C,SAAS,6BAA6B,UAAkC;CACtE,MAAM,iBAAiB,OAAO,OAAO,OAAO,CAAC,KAAI,eAAc;EAC7D,MAAM,KAAK,OAAO,WAAW,WAAW;AACxC,KAAG,iBAAiB,UAAU,SAAS;AACvC,SAAO;GACP;AAEF,cAAmB;AACjB,iBAAe,SAAQ,OAAM;AAC3B,MAAG,oBAAoB,UAAU,SAAS;IAC1C;;;AAKN,IAAM,0BAAsC,WAAW;AAEvD,MAAa,sBAAkC;AAC7C,QAAO,qBAAqB,8BAA8B,sBAAsB,kBAAkB"}

package/lib/useExpand.js

@@ -2,10 +2,12 @@ import { t as usePrevious } from "./usePrevious.js";
 import { useEffect, useState } from "react";
 const useExpand = (expanded, onExpand) => {
 	const [isExpanded, setIsExpanded] = useState(expanded);
+	const [prevExpanded, setPrevExpanded] = useState(expanded);
 	const previousIsExpanded = usePrevious(isExpanded);
-	useEffect(() => {
-		if (expanded !== isExpanded) setIsExpanded(expanded);
-	}, [expanded]);
+	if (expanded !== prevExpanded) {
+		setPrevExpanded(expanded);
+		setIsExpanded(expanded);
+	}
 	useEffect(() => {
 		if (onExpand && isExpanded !== !!previousIsExpanded) onExpand(isExpanded);
 	}, [isExpanded, onExpand]);

package/lib/useExpand.js.map

@@ -1 +1 @@
-{"version":3,"file":"useExpand.js","names":[],"sources":["../src/hooks/useExpand.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { usePrevious } from './usePrevious';\n\nexport const useExpand = (expanded: boolean, onExpand?: (isExpanded: boolean) => void): [boolean, Dispatch<SetStateAction<boolean>>] => {\n  const [isExpanded, setIsExpanded] = useState(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  return [isExpanded, setIsExpanded];\n};\n"],"mappings":";;AAKA,MAAa,aAAa,UAAmB,aAA2F;CACtI,MAAM,CAAC,YAAY,iBAAiB,SAAS,SAAS;CACtD,MAAM,qBAAqB,YAAY,WAAW;AAElD,iBAAgB;AACd,MAAI,aAAa,WACf,eAAc,SAAS;IAExB,CAAC,SAAS,CAAC;AAEd,iBAAgB;AACd,MAAI,YAAY,eAAe,CAAC,CAAC,mBAC/B,UAAS,WAAW;IAErB,CAAC,YAAY,SAAS,CAAC;AAE1B,QAAO,CAAC,YAAY,cAAc"}
+{"version":3,"file":"useExpand.js","names":[],"sources":["../src/hooks/useExpand.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { usePrevious } from './usePrevious';\n\nexport const useExpand = (expanded: boolean, onExpand?: (isExpanded: boolean) => void): [boolean, Dispatch<SetStateAction<boolean>>] => {\n  const [isExpanded, setIsExpanded] = useState(expanded);\n  const [prevExpanded, setPrevExpanded] = useState(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n\n  if (expanded !== prevExpanded) {\n    setPrevExpanded(expanded);\n    setIsExpanded(expanded);\n  }\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  return [isExpanded, setIsExpanded];\n};\n"],"mappings":";;AAKA,MAAa,aAAa,UAAmB,aAA2F;CACtI,MAAM,CAAC,YAAY,iBAAiB,SAAS,SAAS;CACtD,MAAM,CAAC,cAAc,mBAAmB,SAAS,SAAS;CAC1D,MAAM,qBAAqB,YAAY,WAAW;AAElD,KAAI,aAAa,cAAc;AAC7B,kBAAgB,SAAS;AACzB,gBAAc,SAAS;;AAGzB,iBAAgB;AACd,MAAI,YAAY,eAAe,CAAC,CAAC,mBAC/B,UAAS,WAAW;IAErB,CAAC,YAAY,SAAS,CAAC;AAE1B,QAAO,CAAC,YAAY,cAAc"}

package/lib/useIsServerSide.js

@@ -1,10 +1,9 @@
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
+var emptySubscribe = () => () => {};
+var getClientSnapshot = () => false;
+var getServerSnapshot = () => true;
 const useIsServerSide = () => {
-	const [isServerSide, setIsServerSide] = useState(true);
-	useEffect(() => {
-		setIsServerSide(false);
-	}, []);
-	return isServerSide;
+	return useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot);
 };
 export { useIsServerSide as t };
 

package/lib/useIsServerSide.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsServerSide.js","names":[],"sources":["../src/hooks/useIsServerSide.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\n/**\n * Sjekk om React kjører på server, eller ikke. (useEffect kjører ikke på server)\n *\n * @returns true dersom koden kjører på server\n */\nexport const useIsServerSide = (): boolean => {\n  const [isServerSide, setIsServerSide] = useState(true);\n\n  useEffect(() => {\n    setIsServerSide(false);\n  }, []);\n\n  return isServerSide;\n};\n"],"mappings":";AAOA,MAAa,wBAAiC;CAC5C,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;AAEtD,iBAAgB;AACd,kBAAgB,MAAM;IACrB,EAAE,CAAC;AAEN,QAAO"}
+{"version":3,"file":"useIsServerSide.js","names":[],"sources":["../src/hooks/useIsServerSide.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nconst emptySubscribe = (): (() => void) => (): void => {};\nconst getClientSnapshot = (): boolean => false;\nconst getServerSnapshot = (): boolean => true;\n\n/**\n * Sjekk om React kjører på server, eller ikke.\n *\n * @returns true dersom koden kjører på server\n */\nexport const useIsServerSide = (): boolean => {\n  return useSyncExternalStore(emptySubscribe, getClientSnapshot, getServerSnapshot);\n};\n"],"mappings":";AAEA,IAAM,6BAAiD;AACvD,IAAM,0BAAmC;AACzC,IAAM,0BAAmC;AAOzC,MAAa,wBAAiC;AAC5C,QAAO,qBAAqB,gBAAgB,mBAAmB,kBAAkB"}

package/lib/useToggle.js

@@ -2,13 +2,15 @@ import { t as usePrevious } from "./usePrevious.js";
 import { useEffect, useState } from "react";
 const useToggle = (initialValue, callback) => {
 	const [value, setValue] = useState(initialValue);
+	const [prevInitialValue, setPrevInitialValue] = useState(initialValue);
 	const previousValue = usePrevious(value);
+	if (initialValue !== prevInitialValue) {
+		setPrevInitialValue(initialValue);
+		setValue(initialValue);
+	}
 	const toggleValue = () => {
 		setValue(!value);
 	};
-	useEffect(() => {
-		if (initialValue !== value) setValue(initialValue);
-	}, [initialValue]);
 	useEffect(() => {
 		if (callback && value !== !!previousValue) callback(value);
 	}, [value, callback]);

package/lib/useToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToggle.js","names":[],"sources":["../src/hooks/useToggle.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { usePrevious } from './usePrevious';\n\n/**\n * Hook for å toggle en boolean og kjøre en callback når verdien endres\n *\n * @param initialValue Initiell verdi for boolean\n * @param callback Funksjon som kalles når value endrer verdi (optional)\n * @returns Objekt med nåværende verdi og funksjon som kan kalles for å toggle verdien\n */\nexport const useToggle = (initialValue: boolean, callback?: (value: boolean) => void): { value: boolean; toggleValue: () => void } => {\n  const [value, setValue] = useState(initialValue);\n  const previousValue = usePrevious(value);\n\n  const toggleValue = (): void => {\n    setValue(!value);\n  };\n\n  useEffect(() => {\n    if (initialValue !== value) {\n      setValue(initialValue);\n    }\n  }, [initialValue]);\n\n  useEffect(() => {\n    if (callback && value !== !!previousValue) {\n      callback(value);\n    }\n  }, [value, callback]);\n\n  return { value, toggleValue };\n};\n"],"mappings":";;AAWA,MAAa,aAAa,cAAuB,aAAqF;CACpI,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,gBAAgB,YAAY,MAAM;CAExC,MAAM,oBAA0B;AAC9B,WAAS,CAAC,MAAM;;AAGlB,iBAAgB;AACd,MAAI,iBAAiB,MACnB,UAAS,aAAa;IAEvB,CAAC,aAAa,CAAC;AAElB,iBAAgB;AACd,MAAI,YAAY,UAAU,CAAC,CAAC,cAC1B,UAAS,MAAM;IAEhB,CAAC,OAAO,SAAS,CAAC;AAErB,QAAO;EAAE;EAAO;EAAa"}
+{"version":3,"file":"useToggle.js","names":[],"sources":["../src/hooks/useToggle.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { usePrevious } from './usePrevious';\n\n/**\n * Hook for å toggle en boolean og kjøre en callback når verdien endres\n *\n * @param initialValue Initiell verdi for boolean\n * @param callback Funksjon som kalles når value endrer verdi (optional)\n * @returns Objekt med nåværende verdi og funksjon som kan kalles for å toggle verdien\n */\nexport const useToggle = (initialValue: boolean, callback?: (value: boolean) => void): { value: boolean; toggleValue: () => void } => {\n  const [value, setValue] = useState(initialValue);\n  const [prevInitialValue, setPrevInitialValue] = useState(initialValue);\n  const previousValue = usePrevious(value);\n\n  if (initialValue !== prevInitialValue) {\n    setPrevInitialValue(initialValue);\n    setValue(initialValue);\n  }\n\n  const toggleValue = (): void => {\n    setValue(!value);\n  };\n\n  useEffect(() => {\n    if (callback && value !== !!previousValue) {\n      callback(value);\n    }\n  }, [value, callback]);\n\n  return { value, toggleValue };\n};\n"],"mappings":";;AAWA,MAAa,aAAa,cAAuB,aAAqF;CACpI,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,aAAa;CACtE,MAAM,gBAAgB,YAAY,MAAM;AAExC,KAAI,iBAAiB,kBAAkB;AACrC,sBAAoB,aAAa;AACjC,WAAS,aAAa;;CAGxB,MAAM,oBAA0B;AAC9B,WAAS,CAAC,MAAM;;AAGlB,iBAAgB;AACd,MAAI,YAAY,UAAU,CAAC,CAAC,cAC1B,UAAS,MAAM;IAEhB,CAAC,OAAO,SAAS,CAAC;AAErB,QAAO;EAAE;EAAO;EAAa"}

package/lib/utils2.js

@@ -3,14 +3,14 @@ import { t as isComponent } from "./component.js";
 import { t as Spacer_default } from "./Spacer.js";
 import { t as FormFieldTag_default } from "./FormFieldTag.js";
 import { t as StatusDot_default } from "./StatusDot.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Label/styles.module.scss";
 const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) => {
 	const mapSublabels = (hideFromScreenReader) => {
 		return sublabelTexts && sublabelTexts.map((sublabelText, index) => {
-			const labelClasses = cn(styles.label, styles["sublabel"], {
+			const labelClasses = classNames(styles.label, styles["sublabel"], {
 				[styles["sublabel--subdued"]]: sublabelText.type === "subdued",
 				[styles["sublabel--on-dark"]]: onColor === FormOnColor.ondark
 			});
@@ -40,13 +40,13 @@ const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) =
 };
 var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, htmlMarkup = "label", labelClassName, labelTextClassName, labelId, labelTexts, onColor = FormOnColor.onwhite, statusDot, sublabel, sublabelWrapperClassName, testId, afterLabelChildrenClassName }) => {
 	const hasChildren = children && typeof children !== "undefined";
-	const labelWrapperClasses = cn(styles["label-wrapper"], { [styles["label-wrapper--no-bottom-margin"]]: hasChildren }, className);
-	const mainLabelWrapperClasses = cn({ [styles["label-wrapper--after-label-children"]]: afterLabelChildren });
-	const afterLabelChildrenClasses = cn(styles["after-label-children"], afterLabelChildrenClassName);
+	const labelWrapperClasses = classNames(styles["label-wrapper"], { [styles["label-wrapper--no-bottom-margin"]]: hasChildren }, className);
+	const mainLabelWrapperClasses = classNames({ [styles["label-wrapper--after-label-children"]]: afterLabelChildren });
+	const afterLabelChildrenClasses = classNames(styles["after-label-children"], afterLabelChildrenClassName);
 	const mapLabels = () => {
 		if (typeof labelTexts === "undefined") return null;
 		return labelTexts.map((labelText, index) => {
-			const labelClasses = cn(styles.label, {
+			const labelClasses = classNames(styles.label, {
 				[styles["label--subdued"]]: labelText.type === "subdued",
 				[styles["label--on-dark"]]: onColor === FormOnColor.ondark
 			}, labelTextClassName);
@@ -115,7 +115,7 @@ const renderLabelAsParent = (props) => {
 		htmlFor: props.inputId,
 		onColor: props.onColor,
 		children: props.children,
-		labelClassName: cn(props.labelClassName, props.label.props.labelClassName),
+		labelClassName: classNames(props.labelClassName, props.label.props.labelClassName),
 		labelTextClassName: props.labelTextClassName,
 		htmlMarkup: props.markup || "label",
 		sublabelWrapperClassName: props.sublabelWrapperClassName,

package/lib/utils2.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils2.js","names":["Sublabel: React.FC<SublabelProps>","Label: FunctionComponent<LabelProps>"],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/utils.tsx"],"sourcesContent":["import cn from 'classnames';\n\nimport type { LabelText } from './Label';\n\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import type { FunctionComponent } from 'react';\nimport React from 'react';\n\nimport cn from 'classnames';\n\nimport type { SublabelProps } from './SubLabel';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport { Sublabel } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p' | 'legend';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */\n  afterLabelChildrenClassName?: string;\n}\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n  afterLabelChildrenClassName,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(styles['label-wrapper'], { [styles['label-wrapper--no-bottom-margin']]: hasChildren }, className);\n  const mainLabelWrapperClasses = cn({\n    [styles['label-wrapper--after-label-children']]: afterLabelChildren,\n  });\n  const afterLabelChildrenClasses = cn(styles['after-label-children'], afterLabelChildrenClassName);\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div className={mainLabelWrapperClasses}>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        {afterLabelChildren && <div className={afterLabelChildrenClasses}>{afterLabelChildren}</div>}\n      </div>\n      {(sublabel || statusDot || formFieldTag) && (\n        <div className={sublabelWrapperClassName}>\n          {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Label;\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { LabelProps, LabelTags } from './Label';\nimport type { FormOnColor } from '../../constants';\n\nimport Label from './Label';\nimport { isComponent } from '../../utils/component';\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\ninterface RenderLabelProps {\n  label: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  markup?: LabelTags;\n}\n\nexport const renderLabel = (props: RenderLabelProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            htmlMarkup: props.markup || 'label',\n            onColor: props.onColor,\n          })\n        : typeof props.label === 'string' && (\n            <Label labelTexts={[{ text: props.label, type: 'normal' }]} htmlFor={props.inputId} onColor={props.onColor} />\n          )}\n    </>\n  );\n};\n\ninterface RenderLabelAsParentProps {\n  label: React.ReactNode;\n  children: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  labelClassName?: string;\n  labelTextClassName?: string;\n  sublabelWrapperClassName?: string;\n  large?: boolean;\n  markup?: LabelTags;\n  afterLabelChildrenClassName?: string;\n}\n\nexport const renderLabelAsParent = (props: RenderLabelAsParentProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            onColor: props.onColor,\n            children: props.children,\n            labelClassName: cn(props.labelClassName, props.label.props.labelClassName),\n            labelTextClassName: props.labelTextClassName,\n            htmlMarkup: props.markup || 'label',\n            sublabelWrapperClassName: props.sublabelWrapperClassName,\n            sublabel: props.large ? undefined : props.label.props.sublabel,\n            statusDot: props.large ? undefined : props.label.props.statusDot,\n            afterLabelChildrenClassName: props.afterLabelChildrenClassName,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'subdued' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              htmlMarkup={props.markup || 'label'}\n              labelClassName={props.labelClassName}\n              labelTextClassName={props.labelTextClassName}\n              sublabelWrapperClassName={props.sublabelWrapperClassName}\n              afterLabelChildrenClassName={props.afterLabelChildrenClassName}\n            >\n              {props.children}\n            </Label>\n          )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;AAwBA,MAAaA,YAAqC,EAAE,UAAU,WAAW,IAAI,SAAS,eAAe,aAAa;CAChH,MAAM,gBAAgB,yBAAoD;AACxE,SACE,iBACA,cAAc,KAAK,cAAc,UAAU;GACzC,MAAM,eAAe,GAAG,OAAO,OAAO,OAAO,aAAa;KACvD,OAAO,uBAAuB,aAAa,SAAS;KACpD,OAAO,uBAAuB,YAAY,YAAY;IACxD,CAAC;AACF,UACE,yBAAyB,aAAa,wBACpC,oBAAC,QAAA;IAAK,WAAW;cACd,aAAa;MADoB,MAE7B;IAGX;;CAIN,MAAM,YAAY,cAAc;CAChC,MAAM,sBAAsB,aAAa,KAAK;AAE9C,QACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,gBAAA,EAAO,MAAM,OAAA,CAAS;GACrB,aAAa,aACb,qBAAC,OAAA;GAAe;GAAe;GAAI,eAAa;GAAQ,oBAAkB,YAAY;cACnF,WACA,SAAA;IACG;EAEP,uBACC,oBAAC,OAAA;GAAe;GAAW,eAAa;aACrC;IACG;KAEP;;ACAP,IAAMC,SAAwC,EAC5C,oBACA,UACA,WACA,cACA,SACA,aAAa,SACb,gBACA,oBACA,SACA,YACA,UAAU,YAAY,SACtB,WACA,UACA,0BACA,QACA,kCACI;CACJ,MAAM,cAAc,YAAY,OAAO,aAAa;CACpD,MAAM,sBAAsB,GAAG,OAAO,kBAAkB,GAAG,OAAO,qCAAqC,aAAa,EAAE,UAAU;CAChI,MAAM,0BAA0B,GAAG,GAChC,OAAO,yCAAyC,oBAClD,CAAC;CACF,MAAM,4BAA4B,GAAG,OAAO,yBAAyB,4BAA4B;CAEjG,MAAM,kBAAmC;AACvC,MAAI,OAAO,eAAe,YAAa,QAAO;AAE9C,SAAO,WAAW,KAAK,WAAW,UAAU;GAC1C,MAAM,eAAe,GACnB,OAAO,OACP;KACG,OAAO,oBAAoB,UAAU,SAAS;KAC9C,OAAO,oBAAoB,YAAY,YAAY;IACrD,EACD,mBACD;AACD,UACE,oBAAC,QAAA;IAAK,eAAa,UAAU;IAAsB,WAAW;cAC3D,UAAU;MADoE,MAE1E;IAET;;AAIJ,QACE,qBAAC,OAAA;EAAI,WAAW;aACd,qBAAC,OAAA;GAAI,WAAW;cACd,oBALY,YAKX;IAAU,WAAW;IAAgB,IAAI;IAAkB;IAAS,eAAa;IAAQ,oBAAkB,YAAY;cACtH,qBAAC,QAAA;KAAK,WAAW,OAAO;gBACrB,UACD,oBAAC,QAAA;MAAK,WAAW,OAAO;gBAAe,WAAW;OAAQ,CAAA;MACrD;KACG,EACX,sBAAsB,oBAAC,OAAA;IAAI,WAAW;cAA4B;KAAyB,CAAA;IACxF,GACJ,YAAY,aAAa,iBACzB,qBAAC,OAAA;GAAI,WAAW;;IACb,gBAAgB,YAA+B,cAAc,qBAAa,IAAI,MAAM,aAAa,aAAa;IAC9G,YACC,YAA2B,UAAU,SAAS,IAC9C,MAAM,aAAa,UAAU,EAClB,SACV,CAAC;IACH,aAAa,YAA4B,WAAW,kBAAU,IAC7D,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAA,EAAO,MAAM,OAAA,CAAS,EACtB,MAAM,aAAa,WAAW,EAC7B,SAAS,YAAY,YAAY,SAAS,WAAW,WACtD,CAAC,CAAA,EAAA,CACD;;IAED,CAAA;GAEJ;;AAIV,IAAA,gBAAe;AClIf,MAAa,gBAAgB,UAAmC;CAC9D,IAAI,eAAe;AAEnB,KAAI,YAAwB,OAAO,cAAM,CACvC,OAAM,MAAM,YAAY,SAAQ,cAAa;AAC3C,kBAAgB,CAAC,UAAU,uBAAuB,UAAU,OAAO;GACnE;AAGJ,QAAO;;AAUT,MAAa,eAAe,UAA6C;AACvE,QACE,oBAAA,UAAA,EAAA,UACG,MAAM,SAAS,YAAwB,MAAM,OAAO,cAAM,GACvD,MAAM,aAAa,MAAM,OAAO;EAC9B,SAAS,MAAM;EACf,YAAY,MAAM,UAAU;EAC5B,SAAS,MAAM;EAChB,CAAC,GACF,OAAO,MAAM,UAAU,YACrB,oBAAC,eAAA;EAAM,YAAY,CAAC;GAAE,MAAM,MAAM;GAAO,MAAM;GAAU,CAAC;EAAE,SAAS,MAAM;EAAS,SAAS,MAAM;GAAW,EAAA,CAEnH;;AAiBP,MAAa,uBAAuB,UAAqD;AACvF,QACE,oBAAA,UAAA,EAAA,UACG,MAAM,SAAS,YAAwB,MAAM,OAAO,cAAM,GACvD,MAAM,aAAa,MAAM,OAAO;EAC9B,SAAS,MAAM;EACf,SAAS,MAAM;EACf,UAAU,MAAM;EAChB,gBAAgB,GAAG,MAAM,gBAAgB,MAAM,MAAM,MAAM,eAAe;EAC1E,oBAAoB,MAAM;EAC1B,YAAY,MAAM,UAAU;EAC5B,0BAA0B,MAAM;EAChC,UAAU,MAAM,QAAQ,KAAA,IAAY,MAAM,MAAM,MAAM;EACtD,WAAW,MAAM,QAAQ,KAAA,IAAY,MAAM,MAAM,MAAM;EACvD,6BAA6B,MAAM;EACpC,CAAC,GACF,OAAO,MAAM,UAAU,YACrB,oBAAC,eAAA;EACC,YAAY,CAAC;GAAE,MAAM,MAAM;GAAO,MAAM;GAAW,CAAC;EACpD,SAAS,MAAM;EACf,SAAS,MAAM;EACf,YAAY,MAAM,UAAU;EAC5B,gBAAgB,MAAM;EACtB,oBAAoB,MAAM;EAC1B,0BAA0B,MAAM;EAChC,6BAA6B,MAAM;YAElC,MAAM;GACD,EAAA,CAEb"}
+{"version":3,"file":"utils2.js","names":["Sublabel: React.FC<SublabelProps>","Label: FunctionComponent<LabelProps>"],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/utils.tsx"],"sourcesContent":["import cn from 'classnames';\n\nimport type { LabelText } from './Label';\n\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import type { FunctionComponent } from 'react';\nimport React from 'react';\n\nimport cn from 'classnames';\n\nimport type { SublabelProps } from './SubLabel';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { StatusDotProps } from '../StatusDot';\n\nimport { Sublabel } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p' | 'legend';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */\n  afterLabelChildrenClassName?: string;\n}\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n  afterLabelChildrenClassName,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(styles['label-wrapper'], { [styles['label-wrapper--no-bottom-margin']]: hasChildren }, className);\n  const mainLabelWrapperClasses = cn({\n    [styles['label-wrapper--after-label-children']]: afterLabelChildren,\n  });\n  const afterLabelChildrenClasses = cn(styles['after-label-children'], afterLabelChildrenClassName);\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div className={mainLabelWrapperClasses}>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        {afterLabelChildren && <div className={afterLabelChildrenClasses}>{afterLabelChildren}</div>}\n      </div>\n      {(sublabel || statusDot || formFieldTag) && (\n        <div className={sublabelWrapperClassName}>\n          {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Label;\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { LabelProps, LabelTags } from './Label';\nimport type { FormOnColor } from '../../constants';\n\nimport Label from './Label';\nimport { isComponent } from '../../utils/component';\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\ninterface RenderLabelProps {\n  label: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  markup?: LabelTags;\n}\n\nexport const renderLabel = (props: RenderLabelProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            htmlMarkup: props.markup || 'label',\n            onColor: props.onColor,\n          })\n        : typeof props.label === 'string' && (\n            <Label labelTexts={[{ text: props.label, type: 'normal' }]} htmlFor={props.inputId} onColor={props.onColor} />\n          )}\n    </>\n  );\n};\n\ninterface RenderLabelAsParentProps {\n  label: React.ReactNode;\n  children: React.ReactNode;\n  inputId: string;\n  onColor: FormOnColor;\n  labelClassName?: string;\n  labelTextClassName?: string;\n  sublabelWrapperClassName?: string;\n  large?: boolean;\n  markup?: LabelTags;\n  afterLabelChildrenClassName?: string;\n}\n\nexport const renderLabelAsParent = (props: RenderLabelAsParentProps): React.ReactNode => {\n  return (\n    <>\n      {props.label && isComponent<LabelProps>(props.label, Label)\n        ? React.cloneElement(props.label, {\n            htmlFor: props.inputId,\n            onColor: props.onColor,\n            children: props.children,\n            labelClassName: cn(props.labelClassName, props.label.props.labelClassName),\n            labelTextClassName: props.labelTextClassName,\n            htmlMarkup: props.markup || 'label',\n            sublabelWrapperClassName: props.sublabelWrapperClassName,\n            sublabel: props.large ? undefined : props.label.props.sublabel,\n            statusDot: props.large ? undefined : props.label.props.statusDot,\n            afterLabelChildrenClassName: props.afterLabelChildrenClassName,\n          })\n        : typeof props.label === 'string' && (\n            <Label\n              labelTexts={[{ text: props.label, type: 'subdued' }]}\n              htmlFor={props.inputId}\n              onColor={props.onColor}\n              htmlMarkup={props.markup || 'label'}\n              labelClassName={props.labelClassName}\n              labelTextClassName={props.labelTextClassName}\n              sublabelWrapperClassName={props.sublabelWrapperClassName}\n              afterLabelChildrenClassName={props.afterLabelChildrenClassName}\n            >\n              {props.children}\n            </Label>\n          )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/lib/utils3.js

@@ -6,7 +6,7 @@ import { t as useIdWithFallback } from "./useIdWithFallback.js";
 import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import radioButtonStyles from "./components/RadioButton/styles.module.scss";
@@ -21,14 +21,14 @@ const RadioButton = (props) => {
 	const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
 	const mergedRefs = mergeRefs([ref, refObject]);
 	const errorTextId = useIdWithFallback(errorTextIdProp);
-	const radioButtonWrapperClasses = cn(radioButtonStyles["radio-button-wrapper"], {
+	const radioButtonWrapperClasses = classNames(radioButtonStyles["radio-button-wrapper"], {
 		[radioButtonStyles["radio-button-wrapper__large"]]: isLarge,
 		[radioButtonStyles["radio-button-wrapper__large--focused"]]: isLarge && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--selected"]]: isLarge && checked && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--invalid"]]: isLarge && onCherry && isFocused,
 		[radioButtonStyles["radio-button-wrapper__large--on-blueberry"]]: isLarge && onBlueberry && isFocused
 	});
-	const radioButtonLabelClasses = cn(radioButtonStyles["radio-button-label"], {
+	const radioButtonLabelClasses = classNames(radioButtonStyles["radio-button-label"], {
 		[radioButtonStyles["radio-button-label--disabled"]]: disabled,
 		[radioButtonStyles["radio-button-label--on-dark"]]: onDark,
 		[radioButtonStyles["radio-button-label--invalid"]]: invalid,
@@ -36,7 +36,7 @@ const RadioButton = (props) => {
 		[radioButtonStyles["radio-button-label__large--focused"]]: isFocused && isLarge,
 		[radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled
 	}, labelClassNames);
-	const radioButtonClasses = cn(radioButtonStyles["radio-button"], {
+	const radioButtonClasses = classNames(radioButtonStyles["radio-button"], {
 		[radioButtonStyles["radio-button--on-dark"]]: onDark,
 		[radioButtonStyles["radio-button--disabled"]]: disabled,
 		[radioButtonStyles["radio-button--on-blueberry"]]: onBlueberry,
@@ -89,7 +89,7 @@ var RadioButton_default = RadioButton;
 const getRadioLabelClasses = (radioId, onColor, large, checkedRadioId) => {
 	const onCherry = onColor === "oninvalid";
 	const checked = radioId === checkedRadioId;
-	return cn({
+	return classNames({
 		[radioButtonStyles["radio-button-label__large--on-grey"]]: large && onColor === "ongrey" && !checked,
 		[radioButtonStyles["radio-button-label__large--on-blueberry"]]: onColor === "onblueberry" && !checked && large,
 		[radioButtonStyles["radio-button-label__large--selected"]]: large && checked && !onCherry,