@mattilsynet/design 3.0.6 → 3.1.0

package/mtds/app/app-observer.js

@@ -1,6 +1,6 @@
 import P from "../styles.module.css.js";
 import { getByCSSModule as _, onHotReload as h, on as r, QUICK_EVENT as m, debounce as E } from "../utils.js";
-import "./app-toggle2.js";
+import "./app-toggle.js";
 const y = P.app.split(" ")[0], I = `[data-command="toggle-app-expanded"],.${y} > [command="show-modal"]`, u = `.${y} > dialog,.${y} dialog ~ main`, S = _("sticky"), w = (t) => {
   document.startViewTransition ? document.startViewTransition(t) : t();
 }, x = (t) => (

package/mtds/app/app-toggle.js

@@ -1,27 +1,11 @@
-const t = `if (
-	typeof window !== "undefined" &&
-	window.CSSStyleSheet &&
-	document.adoptedStyleSheets
-)
-	(() => {
-		const key = "--mtds-app-expanded";
-		const sheet = new CSSStyleSheet();
-		const prev = () => !window.localStorage.getItem(key)?.includes("false");
-
-		document.adoptedStyleSheets.push(sheet);
-		window.mtdsToggleAppExpanded = (force) => {
-			try {
-				const next = force ?? !prev();
-				sheet.replaceSync?.(\`:root { \${key}: var(\${key}--\${next})}\`);
-				window.localStorage.setItem(key, next);
-			} catch (_err) {} // localStorage is full or replaceSync is not supported
-		};
-
-		// Set and store initial state
-		window.mtdsToggleAppExpanded(prev());
-	})();
-`;
-export {
-  t as default
-};
+typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
+  const e = "--mtds-app-expanded", d = new CSSStyleSheet(), o = () => !window.localStorage.getItem(e)?.includes("false");
+  document.adoptedStyleSheets.push(d), window.mtdsToggleAppExpanded = (n) => {
+    try {
+      const t = n ?? !o();
+      d.replaceSync?.(`:root { ${e}: var(${e}--${t})}`), window.localStorage.setItem(e, t);
+    } catch {
+    }
+  }, window.mtdsToggleAppExpanded(o());
+})();
 //# sourceMappingURL=app-toggle.js.map

package/mtds/app/app-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js?raw"],"sourcesContent":["export default \"if (\\n\\ttypeof window !== \\\"undefined\\\" &&\\n\\twindow.CSSStyleSheet &&\\n\\tdocument.adoptedStyleSheets\\n)\\n\\t(() => {\\n\\t\\tconst key = \\\"--mtds-app-expanded\\\";\\n\\t\\tconst sheet = new CSSStyleSheet();\\n\\t\\tconst prev = () => !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsToggleAppExpanded = (force) => {\\n\\t\\t\\ttry {\\n\\t\\t\\t\\tconst next = force ?? !prev();\\n\\t\\t\\t\\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t\\t} catch (_err) {} // localStorage is full or replaceSync is not supported\\n\\t\\t};\\n\\n\\t\\t// Set and store initial state\\n\\t\\twindow.mtdsToggleAppExpanded(prev());\\n\\t})();\\n\""],"names":["script"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (\n\ttypeof window !== \"undefined\" &&\n\twindow.CSSStyleSheet &&\n\tdocument.adoptedStyleSheets\n)\n\t(() => {\n\t\tconst key = \"--mtds-app-expanded\";\n\t\tconst sheet = new CSSStyleSheet();\n\t\tconst prev = () => !window.localStorage.getItem(key)?.includes(\"false\");\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsToggleAppExpanded = (force) => {\n\t\t\ttry {\n\t\t\t\tconst next = force ?? !prev();\n\t\t\t\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\n\t\t\t\twindow.localStorage.setItem(key, next);\n\t\t\t} catch (_err) {} // localStorage is full or replaceSync is not supported\n\t\t};\n\n\t\t// Set and store initial state\n\t\twindow.mtdsToggleAppExpanded(prev());\n\t})();\n"],"names":["key","sheet","prev","force","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAa,GACzBC,IAAO,MAAM,CAAC,OAAO,aAAa,QAAQF,CAAG,GAAG,SAAS,OAAO;AAEtE,WAAS,mBAAmB,KAAKC,CAAK,GACtC,OAAO,wBAAwB,CAACE,MAAU;AACzC,QAAI;AACH,YAAMC,IAAOD,KAAS,CAACD,EAAI;AAC3B,MAAAD,EAAM,cAAc,WAAWD,CAAG,SAASA,CAAG,KAAKI,CAAI,IAAI,GAC3D,OAAO,aAAa,QAAQJ,GAAKI,CAAI;AAAA,IACtC,QAAe;AAAA,IAAC;AAAA,EACjB,GAGA,OAAO,sBAAsBF,GAAM;AACpC,GAAC;"}

package/mtds/app/app-toggle2.js

@@ -1,11 +1,27 @@
-typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
-  const e = "--mtds-app-expanded", d = new CSSStyleSheet(), o = () => !window.localStorage.getItem(e)?.includes("false");
-  document.adoptedStyleSheets.push(d), window.mtdsToggleAppExpanded = (n) => {
-    try {
-      const t = n ?? !o();
-      d.replaceSync?.(`:root { ${e}: var(${e}--${t})}`), window.localStorage.setItem(e, t);
-    } catch {
-    }
-  }, window.mtdsToggleAppExpanded(o());
-})();
+const t = `if (
+	typeof window !== "undefined" &&
+	window.CSSStyleSheet &&
+	document.adoptedStyleSheets
+)
+	(() => {
+		const key = "--mtds-app-expanded";
+		const sheet = new CSSStyleSheet();
+		const prev = () => !window.localStorage.getItem(key)?.includes("false");
+
+		document.adoptedStyleSheets.push(sheet);
+		window.mtdsToggleAppExpanded = (force) => {
+			try {
+				const next = force ?? !prev();
+				sheet.replaceSync?.(\`:root { \${key}: var(\${key}--\${next})}\`);
+				window.localStorage.setItem(key, next);
+			} catch (_err) {} // localStorage is full or replaceSync is not supported
+		};
+
+		// Set and store initial state
+		window.mtdsToggleAppExpanded(prev());
+	})();
+`;
+export {
+  t as default
+};
 //# sourceMappingURL=app-toggle2.js.map

package/mtds/app/app-toggle2.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (\n\ttypeof window !== \"undefined\" &&\n\twindow.CSSStyleSheet &&\n\tdocument.adoptedStyleSheets\n)\n\t(() => {\n\t\tconst key = \"--mtds-app-expanded\";\n\t\tconst sheet = new CSSStyleSheet();\n\t\tconst prev = () => !window.localStorage.getItem(key)?.includes(\"false\");\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsToggleAppExpanded = (force) => {\n\t\t\ttry {\n\t\t\t\tconst next = force ?? !prev();\n\t\t\t\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\n\t\t\t\twindow.localStorage.setItem(key, next);\n\t\t\t} catch (_err) {} // localStorage is full or replaceSync is not supported\n\t\t};\n\n\t\t// Set and store initial state\n\t\twindow.mtdsToggleAppExpanded(prev());\n\t})();\n"],"names":["key","sheet","prev","force","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAa,GACzBC,IAAO,MAAM,CAAC,OAAO,aAAa,QAAQF,CAAG,GAAG,SAAS,OAAO;AAEtE,WAAS,mBAAmB,KAAKC,CAAK,GACtC,OAAO,wBAAwB,CAACE,MAAU;AACzC,QAAI;AACH,YAAMC,IAAOD,KAAS,CAACD,EAAI;AAC3B,MAAAD,EAAM,cAAc,WAAWD,CAAG,SAASA,CAAG,KAAKI,CAAI,IAAI,GAC3D,OAAO,aAAa,QAAQJ,GAAKI,CAAI;AAAA,IACtC,QAAe;AAAA,IAAC;AAAA,EACjB,GAGA,OAAO,sBAAsBF,GAAM;AACpC,GAAC;"}
+{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js?raw"],"sourcesContent":["export default \"if (\\n\\ttypeof window !== \\\"undefined\\\" &&\\n\\twindow.CSSStyleSheet &&\\n\\tdocument.adoptedStyleSheets\\n)\\n\\t(() => {\\n\\t\\tconst key = \\\"--mtds-app-expanded\\\";\\n\\t\\tconst sheet = new CSSStyleSheet();\\n\\t\\tconst prev = () => !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsToggleAppExpanded = (force) => {\\n\\t\\t\\ttry {\\n\\t\\t\\t\\tconst next = force ?? !prev();\\n\\t\\t\\t\\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t\\t} catch (_err) {} // localStorage is full or replaceSync is not supported\\n\\t\\t};\\n\\n\\t\\t// Set and store initial state\\n\\t\\twindow.mtdsToggleAppExpanded(prev());\\n\\t})();\\n\""],"names":["script"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/mtds/app/app.js

@@ -3,7 +3,7 @@ import a from "clsx";
 import { forwardRef as n } from "react";
 import { Button as m } from "../button/button.js";
 import s from "../styles.module.css.js";
-import d from "./app-toggle.js";
+import d from "./app-toggle2.js";
 const u = n(function({ as: r, className: t, ...p }, e) {
   return /* @__PURE__ */ o(r || "div", { className: a(s.app, t), ref: e, ...p });
 }), f = n(function({ as: r, className: t, ...p }, e) {

package/mtds/atlas/atlas-element.js

@@ -24,7 +24,7 @@ class m extends C {
         "style",
         null,
         `@layer leaflet{${f}}
-@layer mt.v3-0-6design{${b}`
+@layer mt.v3-1-0design{${b}`
       ),
       r("figure")
     );

package/mtds/card/card.d.ts

@@ -2,6 +2,7 @@ import { JSX } from 'react';
 import { PolymorphicComponentPropWithRef, Sizes } from '../react-types';
 type CardBaseProps<Href> = {
     "data-pad"?: Sizes;
+    "data-radius"?: "sm" | "md" | "lg" | "xl";
     href?: Href;
 };
 export type CardProps<Href, As extends React.ElementType = Href extends string ? "a" : "div"> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;

package/mtds/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n\tSizes,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\t\"data-pad\"?: Sizes;\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nexport const Card: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, { \"data-pad\"?: Sizes }>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\tif (Tag === \"button\" && !rest.type) Object.assign(rest, { type: \"button\" }); // Default type for button to avoid accidental submits\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Card","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group"],"mappings":";;;;AA0BO,MAAMA,IAAsBC,EAAiB,SAGlD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA6BC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAErC,SAAO,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC,GASYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AACvE,QAAMC,IAAMJ,KAAM;AAClB,SAAII,MAAQ,YAAY,CAACF,EAAK,QAAM,OAAO,OAAOA,GAAM,EAAE,MAAM,SAAA,CAAU,GACnE,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC;"}
+{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n\tSizes,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\t\"data-pad\"?: Sizes;\n\t\"data-radius\"?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nexport const Card: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, { \"data-pad\"?: Sizes }>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\tif (Tag === \"button\" && !rest.type) Object.assign(rest, { type: \"button\" }); // Default type for button to avoid accidental submits\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Card","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group"],"mappings":";;;;AA2BO,MAAMA,IAAsBC,EAAiB,SAGlD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA6BC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAErC,SAAO,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC,GASYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AACvE,QAAMC,IAAMJ,KAAM;AAClB,SAAII,MAAQ,YAAY,CAACF,EAAK,QAAM,OAAO,OAAOA,GAAM,EAAE,MAAM,SAAA,CAAU,GACnE,gBAAAG,EAACD,GAAA,EAAI,WAAWE,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC;"}

package/mtds/card/card.stories.d.ts

@@ -14,6 +14,7 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const React: Story;
 export declare const Padding: Story;
+export declare const Radius: Story;
 export declare const Interactive: Story;
 export declare const Responsive: Story;
 export declare const GroupStory: Story;

package/mtds/field/field.d.ts

@@ -39,6 +39,7 @@ export type FieldSuggestionSelected = {
 export type FieldSuggestionProps = Omit<CustomReactElementProps<DSSuggestionElement>, "onChange" | "onInput"> & {
     "data-creatable"?: boolean;
     "data-multiple"?: boolean;
+    "data-variant"?: "inside";
     onAfterChange?: (e: CustomEvent<HTMLDataElement>) => void;
     onAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void;
     onBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void;

package/mtds/field/field.js

@@ -83,90 +83,92 @@ const V = (a) => typeof a == "string" ? { label: a, value: a } : a, ie = s(funct
   function(t, n) {
     return /* @__PURE__ */ e("u-option", { ref: n, ...N(t) });
   }
-), I = s(function({
-  "aria-required": t,
-  "data-position": n,
-  "data-placement": i,
-  "data-nofilter": d,
-  "data-multiple": c,
-  onAfterChange: m,
-  // Backwards compatibility
-  onAfterSelect: y,
-  onBeforeChange: g,
-  // Backwards compatibility
-  onBeforeMatch: C,
-  onBeforeSelect: b,
-  onSelectedChange: p,
-  onInput: D,
-  onChange: h,
-  children: O,
-  disabled: o,
-  name: F,
-  options: v,
-  placeholder: j,
-  readOnly: w,
-  selected: u,
-  type: L,
-  ...H
-}, X) {
-  const B = z(null), E = z(p);
-  return E.current = p, m && (y = m, window.dsWarnings === !1 || console.warn(
-    "\x1B[1m@mattilsynet/design - deprecation warning:\x1B[m onAfterChange is deprecated, please use onAfterSelect instead"
-  )), g && (b = g, window.dsWarnings === !1 || console.warn(
-    "\x1B[1m@mattilsynet/design - deprecation warning:\x1B[m onBeforeChange is deprecated, please use onBeforeSelect instead"
-  )), $(X, () => B.current), ee(() => {
-    const f = B.current, l = (r) => {
-      const S = E.current;
-      if (!E) return;
-      r.preventDefault();
-      const { isConnected: Y, textContent: Z, value: A } = r.detail, R = Z?.trim() || "", q = u || [];
-      S?.(Y ? q.filter((_) => _.value !== A) : c ? [...q, { value: A, label: R }] : [{ value: A, label: R }]);
-    };
-    return f?.addEventListener("comboboxbeforeselect", l), () => f?.removeEventListener("comboboxbeforeselect", l);
-  }, [c, u]), /* @__PURE__ */ W(
-    "ds-suggestion",
-    {
-      "data-multiple": c || void 0,
-      ...N(
-        {
-          oncomboboxbeforeselect: b,
-          oncomboboxbeforematch: C,
-          oncomboboxafterselect: y,
-          ref: B,
-          ...H
-        },
-        x.suggestion
-      ),
-      children: [
-        u?.map(({ children: f, label: l, value: r }) => /* @__PURE__ */ e("data", { value: r, suppressHydrationWarning: !0, children: f ?? l }, r)),
-        O || /* @__PURE__ */ W(k, { children: [
-          /* @__PURE__ */ e(
-            ne,
+), I = s(
+  function({
+    "aria-required": t,
+    "data-position": n,
+    "data-placement": i,
+    "data-nofilter": d,
+    "data-multiple": c,
+    onAfterChange: m,
+    // Backwards compatibility
+    onAfterSelect: y,
+    onBeforeChange: g,
+    // Backwards compatibility
+    onBeforeMatch: C,
+    onBeforeSelect: b,
+    onSelectedChange: p,
+    onInput: D,
+    onChange: h,
+    children: O,
+    disabled: o,
+    name: F,
+    options: v,
+    placeholder: j,
+    readOnly: w,
+    selected: u,
+    type: L,
+    ...H
+  }, X) {
+    const B = z(null), E = z(p);
+    return E.current = p, m && (y = m, window.dsWarnings === !1 || console.warn(
+      "\x1B[1m@mattilsynet/design - deprecation warning:\x1B[m onAfterChange is deprecated, please use onAfterSelect instead"
+    )), g && (b = g, window.dsWarnings === !1 || console.warn(
+      "\x1B[1m@mattilsynet/design - deprecation warning:\x1B[m onBeforeChange is deprecated, please use onBeforeSelect instead"
+    )), $(X, () => B.current), ee(() => {
+      const f = B.current, l = (r) => {
+        const S = E.current;
+        if (!E) return;
+        r.preventDefault();
+        const { isConnected: Y, textContent: Z, value: A } = r.detail, R = Z?.trim() || "", q = u || [];
+        S?.(Y ? q.filter((_) => _.value !== A) : c ? [...q, { value: A, label: R }] : [{ value: A, label: R }]);
+      };
+      return f?.addEventListener("comboboxbeforeselect", l), () => f?.removeEventListener("comboboxbeforeselect", l);
+    }, [c, u]), /* @__PURE__ */ W(
+      "ds-suggestion",
+      {
+        "data-multiple": c || void 0,
+        ...N(
+          {
+            oncomboboxbeforeselect: b,
+            oncomboboxbeforematch: C,
+            oncomboboxafterselect: y,
+            ref: B,
+            ...H
+          },
+          x.suggestion
+        ),
+        children: [
+          u?.map(({ children: f, label: l, value: r }) => /* @__PURE__ */ e("data", { value: r, suppressHydrationWarning: !0, children: f ?? l }, r)),
+          O || /* @__PURE__ */ W(k, { children: [
+            /* @__PURE__ */ e(
+              ne,
+              {
+                "aria-required": t,
+                disabled: o,
+                name: F,
+                onInput: D,
+                onChange: h,
+                placeholder: j,
+                readOnly: w,
+                type: L
+              }
+            ),
+            /* @__PURE__ */ e("del", { "aria-label": "Fjern tekst", suppressHydrationWarning: !0 })
+          ] }),
+          !!v && /* @__PURE__ */ e(
+            J,
             {
-              "aria-required": t,
-              disabled: o,
-              name: F,
-              onInput: D,
-              onChange: h,
-              placeholder: j,
-              readOnly: w,
-              type: L
+              "data-nofilter": d,
+              "data-placement": i || n,
+              children: v.map(V).map(({ children: f, label: l, value: r }) => /* @__PURE__ */ e(K, { value: r, label: l, children: f ?? l }, r))
             }
-          ),
-          /* @__PURE__ */ e("del", { "aria-label": "Fjern tekst", suppressHydrationWarning: !0 })
-        ] }),
-        !!v && /* @__PURE__ */ e(
-          J,
-          {
-            "data-nofilter": d,
-            "data-placement": i || n,
-            children: v.map(V).map(({ children: f, label: l, value: r }) => /* @__PURE__ */ e(K, { value: r, label: l, children: f ?? l }, r))
-          }
-        )
-      ]
-    }
-  );
-}), M = s(
+          )
+        ]
+      }
+    );
+  }
+), M = s(
   function(t, n) {
     return /* @__PURE__ */ e("label", { suppressHydrationWarning: !0, ref: n, ...t });
   }

package/mtds/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["\"use client\";\nimport type { DSSuggestionElement } from \"@digdir/designsystemet-web\";\nimport type { Placement } from \"@floating-ui/dom\";\nimport clsx from \"clsx\";\nimport type { JSX } from \"react\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { HelpText } from \"../helptext/helptext\";\nimport { Input, type InputProps } from \"../input/input\";\nimport type {\n\tCustomReactElementProps,\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\nimport { Validation } from \"../validation/validation\";\n\ntype FieldBaseProps = {\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: string[] | FieldSuggestionSelected;\n\tprefix?: string;\n\treadOnly?: boolean; // Allow readoOnly also on <select>\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nconst toOption = (\n\to: FieldSuggestionSelected[number] | string,\n): FieldSuggestionSelected[number] =>\n\ttypeof o === \"string\" ? { label: o, value: o } : o;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\t\"data-validation\": dataValidation,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation: validationContent,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"ds-field\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst validation = validationContent || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\t\"data-validation\": dataValidation,\n\t\tclass: clsx(styles.field, className),\n\t\tsuppressHydrationWarning: true,\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\toptions: undefined, // Ensure options is not passed to DOM\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{(rest.options as FieldBaseProps[\"options\"])\n\t\t\t\t\t\t?.map(toOption)\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<ds-field {...shared}>\n\t\t\t{!!label && <FieldLabel>{label}</FieldLabel>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <FieldDescription>{description}</FieldDescription>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag\n\t\t\t\t\t\tclassName={typeof as === \"string\" ? styles.input : undefined}\n\t\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t/>\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={typeof as === \"string\" ? styles.input : undefined}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!validation && <Validation>{validation}</Validation>}\n\t\t\t{!!count && <FieldCount data-limit={count} />}\n\t\t</ds-field>\n\t) : (\n\t\t<ds-field ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type FieldAffixProps = React.ComponentPropsWithoutRef<\"div\">;\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldAffixProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\"> & {\n\t\"data-nofilter\"?: boolean;\n\t/**\n\t * @deprecated Use `data-placement` instead.\n\t */\n\t\"data-position\"?: Placement;\n\t\"data-placement\"?: Placement;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(\n\t\t{ \"data-position\": placement, \"data-nofilter\": filter, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<u-datalist\n\t\t\t\tdata-placement={placement} // Backward compatibility\n\t\t\t\tdata-nofilter={!!filter || undefined} // Ensure data-nofilter is set correctly\n\t\t\t\tref={ref}\n\t\t\t\t{...toCustomElementProps(rest)}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldComboboxSelected = FieldSuggestionSelected; // Backwards compatibility\nexport type FieldComboboxProps = FieldSuggestionProps; // Backwards compatibility\n\nexport type FieldSuggestionSelected = {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: React.ReactNode;\n}[];\nexport type FieldSuggestionProps = Omit<\n\tCustomReactElementProps<DSSuggestionElement>,\n\t\"onChange\" | \"onInput\"\n> & {\n\t\"data-creatable\"?: boolean;\n\t\"data-multiple\"?: boolean;\n\tonAfterChange?: (e: CustomEvent<HTMLDataElement>) => void; // Backwards compatibility\n\tonAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void; // Backwards compatibility\n\tonBeforeMatch?: (e: CustomEvent<HTMLOptionElement>) => void; // Custom event to handle before change\n\tonBeforeSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonSelectedChange?: (selected: FieldSuggestionSelected) => void; // Allow onChange to be a function that returns void\n\toptions?: FieldSuggestionSelected;\n\tselected?: FieldSuggestionSelected; // Allow value to be a string or an array of strings for multiple select\n} & Pick<\n\t\tInputProps,\n\t\t| \"disabled\"\n\t\t| \"name\"\n\t\t| \"onChange\"\n\t\t| \"onInput\"\n\t\t| \"placeholder\"\n\t\t| \"readOnly\"\n\t\t| \"type\"\n\t\t| \"value\"\n\t> & // Allow input props to be passed down\n\tPick<\n\t\tFieldDatalistProps,\n\t\t\"data-position\" | \"data-placement\" | \"data-nofilter\"\n\t>; // Allow datalist props to be passed down\n\nconst FieldSuggestion = forwardRef<\n\tDSSuggestionElement,\n\tFieldSuggestionProps | FieldSuggestionProps\n>(function FieldSuggestion(\n\t{\n\t\t\"aria-required\": required,\n\t\t\"data-position\": position,\n\t\t\"data-placement\": placement,\n\t\t\"data-nofilter\": nofilter,\n\t\t\"data-multiple\": multiple,\n\t\tonAfterChange, // Backwards compatibility\n\t\tonAfterSelect,\n\t\tonBeforeChange, // Backwards compatibility\n\t\tonBeforeMatch,\n\t\tonBeforeSelect,\n\t\tonSelectedChange,\n\t\tonInput,\n\t\tonChange,\n\t\tchildren,\n\t\tdisabled,\n\t\tname,\n\t\toptions,\n\t\tplaceholder,\n\t\treadOnly,\n\t\tselected,\n\t\ttype,\n\t\t...props\n\t},\n\tref,\n) {\n\tconst innerRef = useRef<DSSuggestionElement>(null);\n\tconst onSelected = useRef(onSelectedChange);\n\tonSelected.current = onSelectedChange; // Sync the latest onSelectedChange function\n\n\t// Deprecated props\n\tif (onAfterChange) {\n\t\tonAfterSelect = onAfterChange;\n\t\twindow.dsWarnings === false ||\n\t\t\tconsole.warn(\n\t\t\t\t`\\x1B[1m@mattilsynet/design - deprecation warning:\\x1B[m onAfterChange is deprecated, please use onAfterSelect instead`,\n\t\t\t);\n\t}\n\n\tif (onBeforeChange) {\n\t\tonBeforeSelect = onBeforeChange;\n\t\twindow.dsWarnings === false ||\n\t\t\tconsole.warn(\n\t\t\t\t`\\x1B[1m@mattilsynet/design - deprecation warning:\\x1B[m onBeforeChange is deprecated, please use onBeforeSelect instead`,\n\t\t\t);\n\t}\n\n\t// Using useEffect for React 18 and lower compatibility\n\tuseImperativeHandle(ref, () => innerRef.current as DSSuggestionElement); // Forward innerRef\n\tuseEffect(() => {\n\t\tconst self = innerRef.current;\n\t\tconst handleChange = (event: CustomEvent<HTMLDataElement>) => {\n\t\t\tconst handleSelected = onSelected.current;\n\t\t\tif (!onSelected) return; // No onSelectedChange function provided, let ds-suggestion handle it\n\t\t\tevent.preventDefault();\n\t\t\tconst { isConnected: remove, textContent, value } = event.detail;\n\t\t\tconst label = textContent?.trim() || \"\";\n\t\t\tconst prev = selected || [];\n\n\t\t\tif (remove) handleSelected?.(prev.filter((i) => i.value !== value));\n\t\t\telse if (multiple) handleSelected?.([...prev, { value, label }]);\n\t\t\telse handleSelected?.([{ value, label }]);\n\t\t};\n\n\t\tself?.addEventListener(\"comboboxbeforeselect\", handleChange);\n\t\treturn () =>\n\t\t\tself?.removeEventListener(\"comboboxbeforeselect\", handleChange);\n\t}, [multiple, selected]);\n\n\treturn (\n\t\t<ds-suggestion\n\t\t\tdata-multiple={multiple || undefined}\n\t\t\t{...toCustomElementProps(\n\t\t\t\t{\n\t\t\t\t\toncomboboxbeforeselect: onBeforeSelect,\n\t\t\t\t\toncomboboxbeforematch: onBeforeMatch,\n\t\t\t\t\toncomboboxafterselect: onAfterSelect,\n\t\t\t\t\tref: innerRef,\n\t\t\t\t\t...props,\n\t\t\t\t},\n\t\t\t\tstyles.suggestion,\n\t\t\t)}\n\t\t>\n\t\t\t{selected?.map(({ children, label, value }) => (\n\t\t\t\t<data key={value} value={value} suppressHydrationWarning>\n\t\t\t\t\t{children ?? label}\n\t\t\t\t</data>\n\t\t\t))}\n\t\t\t{children || (\n\t\t\t\t<>\n\t\t\t\t\t<Input\n\t\t\t\t\t\taria-required={required}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tname={name}\n\t\t\t\t\t\tonInput={onInput}\n\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\t\ttype={type}\n\t\t\t\t\t/>\n\t\t\t\t\t<del aria-label=\"Fjern tekst\" suppressHydrationWarning />\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t{!!options && (\n\t\t\t\t<FieldDatalist\n\t\t\t\t\tdata-nofilter={nofilter}\n\t\t\t\t\tdata-placement={placement || position}\n\t\t\t\t>\n\t\t\t\t\t{options.map(toOption).map(({ children, label, value }) => (\n\t\t\t\t\t\t<FieldOption key={value} value={value} label={label}>\n\t\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t\t</FieldOption>\n\t\t\t\t\t))}\n\t\t\t\t</FieldDatalist>\n\t\t\t)}\n\t\t</ds-suggestion>\n\t);\n});\n\nexport type FieldLabelProps = React.ComponentPropsWithoutRef<\"label\">;\nconst FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(\n\tfunction FieldLabel(rest, ref) {\n\t\treturn <label suppressHydrationWarning ref={ref} {...rest} />;\n\t},\n);\n\nexport type FieldDescriptionProps = React.ComponentPropsWithoutRef<\"p\">;\nconst FieldDescription = forwardRef<\n\tHTMLParagraphElement,\n\tFieldDescriptionProps\n>(function FieldDescription(rest, ref) {\n\treturn (\n\t\t<div\n\t\t\tsuppressHydrationWarning\n\t\t\tdata-field=\"description\"\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n\nexport type FieldCountProps = React.ComponentPropsWithoutRef<\"p\"> & {\n\t/**\n\t * @deprecated Use \"data-limit\" instead\n\t */\n\t\"data-count\"?: number;\n\t\"data-limit\": number;\n};\nconst FieldCount = forwardRef<HTMLParagraphElement, FieldCountProps>(\n\tfunction FieldCount(\n\t\t{ \"data-count\": count, \"data-limit\": limit, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<Validation\n\t\t\t\tdata-field=\"counter\"\n\t\t\t\tdata-limit={limit || count}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\t/**\n\t * @deprecated Use Field.Suggestion instead\n\t */\n\tCombobox: FieldSuggestion, // Backwards compatibility\n\tSuggestion: FieldSuggestion,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n\tDescription: FieldDescription,\n\tLabel: FieldLabel,\n\tCount: FieldCount,\n});\n"],"names":["toOption","o","FieldComp","forwardRef","size","dataValidation","as","className","count","description","error","helpText","helpTextLabel","label","prefix","style","suffix","validationContent","rest","ref","Tag","affixes","validation","shared","clsx","styles","value","jsx","jsxs","FieldLabel","HelpText","FieldDescription","FieldAffixes","Validation","FieldCount","FieldDatalist","placement","filter","toCustomElementProps","FieldOption","props","FieldSuggestion","required","position","nofilter","multiple","onAfterChange","onAfterSelect","onBeforeChange","onBeforeMatch","onBeforeSelect","onSelectedChange","onInput","onChange","children","disabled","name","options","placeholder","readOnly","selected","type","innerRef","useRef","onSelected","useImperativeHandle","useEffect","self","handleChange","event","handleSelected","remove","textContent","prev","i","Fragment","Input","limit","Field"],"mappings":";;;;;;;;AAsCA,MAAMA,IAAW,CAChBC,MAEA,OAAOA,KAAM,WAAW,EAAE,OAAOA,GAAG,OAAOA,EAAA,IAAMA,GAErCC,KAA4BC,EAAiB,SAGzD;AAAA,EACC,aAAaC;AAAA,EACb,mBAAmBC;AAAA,EACnB,IAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,GAAGC;AACJ,GACAC,GACC;AACD,QAAMC,IAAMd,KAAM,YACZe,IAAU,CAAC,CAACL,KAAU,CAAC,CAACF,GACxBQ,IAAaL,KAAqBP,GAClCa,IAAS;AAAA,IACd,aAAanB;AAAA,IACb,mBAAmBC;AAAA,IACnB,OAAOmB,EAAKC,EAAO,OAAOlB,CAAS;AAAA,IACnC,0BAA0B;AAAA,IAC1B,OAAAQ;AAAA,EAAA;AAID,SAAIT,MAAO,YAAY,CAACY,EAAK,YAC5B,OAAO,OAAOA,GAAM;AAAA,IACnB,SAAS;AAAA;AAAA,IACT,iCAEI,UAAAA,EAAK,SACJ,IAAIlB,CAAQ,EACb,IAAI,CAAC,EAAE,OAAAa,GAAO,OAAAa,EAAA,MACd,gBAAAC,EAAC,UAAA,EAAmB,OAAAD,GAClB,UAAAb,EAAAA,GADWa,CAEb,CACA,EAAA,CACH;AAAA,EAAA,CAED,GAGKpB,IACN,gBAAAsB,EAAC,YAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,IAAA,CAAC,CAACV,KAAS,gBAAAc,EAACE,GAAA,EAAY,UAAAhB,GAAM;AAAA,IAC9B,CAAC,CAACF,uBAAamB,IAAA,EAAS,cAAYlB,GAAgB,UAAAD,GAAS;AAAA,IAC7D,CAAC,CAACF,KAAe,gBAAAkB,EAACI,KAAkB,UAAAtB,GAAY;AAAA,IAChDY,sBACCW,GAAA,EACC,UAAA;AAAA,MAAA,CAAC,CAAClB,KAAU,gBAAAa,EAAC,QAAA,EAAM,UAAAb,GAAO;AAAA,MAC3B,gBAAAa;AAAA,QAACP;AAAA,QAAA;AAAA,UACA,WAAW,OAAOd,KAAO,WAAWmB,EAAO,QAAQ;AAAA,UACnD,0BAAwB;AAAA,UACxB,KAAAN;AAAA,UACC,GAAGD;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,CAAC,CAACF,KAAU,gBAAAW,EAAC,UAAM,UAAAX,EAAA,CAAO;AAAA,IAAA,EAAA,CAC5B,IAEA,gBAAAW;AAAA,MAACP;AAAA,MAAA;AAAA,QACA,WAAW,OAAOd,KAAO,WAAWmB,EAAO,QAAQ;AAAA,QACnD,0BAAwB;AAAA,QACxB,KAAAN;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA,IAGL,CAAC,CAACI,KAAc,gBAAAK,EAACM,KAAY,UAAAX,GAAW;AAAA,IACxC,CAAC,CAACd,KAAS,gBAAAmB,EAACO,GAAA,EAAW,cAAY1B,EAAA,CAAO;AAAA,EAAA,GAC5C,IAEA,gBAAAmB,EAAC,YAAA,EAAS,KAAAR,GAAW,GAAGI,GAAS,GAAGL,GAAM;AAE5C,CAAC,GAGKc,IAAe7B;AAAA,EACpB,SAAsB,EAAE,WAAAI,GAAW,GAAGW,EAAA,GAAQC,GAAK;AAClD,WACC,gBAAAQ,EAAC,OAAA,EAAI,WAAWH,EAAKC,EAAO,SAASlB,CAAS,GAAG,KAAAY,GAAW,GAAGD,EAAA,CAAM;AAAA,EAEvE;AACD,GAWMiB,IAAgBhC;AAAA,EACrB,SACC,EAAE,iBAAiBiC,GAAW,iBAAiBC,GAAQ,GAAGnB,EAAA,GAC1DC,GACC;AACD,WACC,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,kBAAgBS;AAAA,QAChB,iBAAe,CAAC,CAACC,KAAU;AAAA,QAC3B,KAAAlB;AAAA,QACC,GAAGmB,EAAqBpB,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhC;AACD,GAGMqB,IAAcpC;AAAA,EACnB,SAAqBqC,GAAOrB,GAAK;AAChC,6BAAQ,YAAA,EAAS,KAAAA,GAAW,GAAGmB,EAAqBE,CAAK,GAAG;AAAA,EAC7D;AACD,GAwCMC,IAAkBtC,EAGtB,SACD;AAAA,EACC,iBAAiBuC;AAAA,EACjB,iBAAiBC;AAAA,EACjB,kBAAkBP;AAAA,EAClB,iBAAiBQ;AAAA,EACjB,iBAAiBC;AAAA,EACjB,eAAAC;AAAA;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGrB;AACJ,GACArB,GACC;AACD,QAAM2C,IAAWC,EAA4B,IAAI,GAC3CC,IAAaD,EAAOZ,CAAgB;AAC1C,SAAAa,EAAW,UAAUb,GAGjBL,MACHC,IAAgBD,GAChB,OAAO,eAAe,MACrB,QAAQ;AAAA,IACP;AAAA,EAAA,IAICE,MACHE,IAAiBF,GACjB,OAAO,eAAe,MACrB,QAAQ;AAAA,IACP;AAAA,EAAA,IAKHiB,EAAoB9C,GAAK,MAAM2C,EAAS,OAA8B,GACtEI,GAAU,MAAM;AACf,UAAMC,IAAOL,EAAS,SAChBM,IAAe,CAACC,MAAwC;AAC7D,YAAMC,IAAiBN,EAAW;AAClC,UAAI,CAACA,EAAY;AACjB,MAAAK,EAAM,eAAA;AACN,YAAM,EAAE,aAAaE,GAAQ,aAAAC,GAAa,OAAA9C,EAAA,IAAU2C,EAAM,QACpDxD,IAAQ2D,GAAa,KAAA,KAAU,IAC/BC,IAAOb,KAAY,CAAA;AAEzB,UAAIW,IAAyBE,EAAK,OAAO,CAACC,MAAMA,EAAE,UAAUhD,CAAK,IACxDmB,IAA2B,CAAC,GAAG4B,GAAM,EAAE,OAAA/C,GAAO,OAAAb,EAAA,CAAO,IACxC,CAAC,EAAE,OAAAa,GAAO,OAAAb,EAAA,CAAO,CAF2B;AAAA,IAGnE;AAEA,WAAAsD,GAAM,iBAAiB,wBAAwBC,CAAY,GACpD,MACND,GAAM,oBAAoB,wBAAwBC,CAAY;AAAA,EAChE,GAAG,CAACvB,GAAUe,CAAQ,CAAC,GAGtB,gBAAAhC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,iBAAeiB,KAAY;AAAA,MAC1B,GAAGP;AAAA,QACH;AAAA,UACC,wBAAwBY;AAAA,UACxB,uBAAuBD;AAAA,UACvB,uBAAuBF;AAAA,UACvB,KAAKe;AAAA,UACL,GAAGtB;AAAA,QAAA;AAAA,QAEJf,EAAO;AAAA,MAAA;AAAA,MAGP,UAAA;AAAA,QAAAmC,GAAU,IAAI,CAAC,EAAE,UAAAN,GAAU,OAAAzC,GAAO,OAAAa,EAAA,MAClC,gBAAAC,EAAC,QAAA,EAAiB,OAAAD,GAAc,0BAAwB,IACtD,UAAA4B,KAAYzC,EAAA,GADHa,CAEX,CACA;AAAA,QACA4B,KACA,gBAAA1B,EAAA+C,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAhD;AAAA,YAACiD;AAAA,YAAA;AAAA,cACA,iBAAelC;AAAA,cACf,UAAAa;AAAA,cACA,MAAAC;AAAA,cACA,SAAAJ;AAAA,cACA,UAAAC;AAAA,cACA,aAAAK;AAAA,cACA,UAAAC;AAAA,cACA,MAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,UAED,gBAAAlC,EAAC,OAAA,EAAI,cAAW,eAAc,0BAAwB,GAAA,CAAC;AAAA,QAAA,GACxD;AAAA,QAEA,CAAC,CAAC8B,KACF,gBAAA9B;AAAA,UAACQ;AAAA,UAAA;AAAA,YACA,iBAAeS;AAAA,YACf,kBAAgBR,KAAaO;AAAA,YAE5B,UAAAc,EAAQ,IAAIzD,CAAQ,EAAE,IAAI,CAAC,EAAE,UAAAsD,GAAU,OAAAzC,GAAO,OAAAa,QAC9C,gBAAAC,EAACY,KAAwB,OAAAb,GAAc,OAAAb,GACrC,UAAAyC,KAAYzC,EAAA,GADIa,CAElB,CACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIJ,CAAC,GAGKG,IAAa1B;AAAA,EAClB,SAAoBe,GAAMC,GAAK;AAC9B,6BAAQ,SAAA,EAAM,0BAAwB,IAAC,KAAAA,GAAW,GAAGD,GAAM;AAAA,EAC5D;AACD,GAGMa,IAAmB5B,EAGvB,SAA0Be,GAAMC,GAAK;AACtC,SACC,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,0BAAwB;AAAA,MACxB,cAAW;AAAA,MACX,KAAAR;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GASKgB,IAAa/B;AAAA,EAClB,SACC,EAAE,cAAcK,GAAO,cAAcqE,GAAO,GAAG3D,EAAA,GAC/CC,GACC;AACD,WACC,gBAAAQ;AAAA,MAACM;AAAA,MAAA;AAAA,QACA,cAAW;AAAA,QACX,cAAY4C,KAASrE;AAAA,QACrB,KAAAW;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD,GAEa4D,KAAQ,OAAO,OAAO5E,IAAW;AAAA,EAC7C,SAAS8B;AAAA;AAAA;AAAA;AAAA,EAIT,UAAUS;AAAA;AAAA,EACV,YAAYA;AAAA,EACZ,UAAUN;AAAA,EACV,QAAQI;AAAA,EACR,aAAaR;AAAA,EACb,OAAOF;AAAA,EACP,OAAOK;AACR,CAAC;"}
+{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["\"use client\";\nimport type { DSSuggestionElement } from \"@digdir/designsystemet-web\";\nimport type { Placement } from \"@floating-ui/dom\";\nimport clsx from \"clsx\";\nimport type { JSX } from \"react\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { HelpText } from \"../helptext/helptext\";\nimport { Input, type InputProps } from \"../input/input\";\nimport type {\n\tCustomReactElementProps,\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\nimport { Validation } from \"../validation/validation\";\n\ntype FieldBaseProps = {\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: string[] | FieldSuggestionSelected;\n\tprefix?: string;\n\treadOnly?: boolean; // Allow readoOnly also on <select>\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nconst toOption = (\n\to: FieldSuggestionSelected[number] | string,\n): FieldSuggestionSelected[number] =>\n\ttypeof o === \"string\" ? { label: o, value: o } : o;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\t\"data-validation\": dataValidation,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation: validationContent,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"ds-field\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst validation = validationContent || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\t\"data-validation\": dataValidation,\n\t\tclass: clsx(styles.field, className),\n\t\tsuppressHydrationWarning: true,\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\toptions: undefined, // Ensure options is not passed to DOM\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{(rest.options as FieldBaseProps[\"options\"])\n\t\t\t\t\t\t?.map(toOption)\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<ds-field {...shared}>\n\t\t\t{!!label && <FieldLabel>{label}</FieldLabel>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <FieldDescription>{description}</FieldDescription>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag\n\t\t\t\t\t\tclassName={typeof as === \"string\" ? styles.input : undefined}\n\t\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t/>\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={typeof as === \"string\" ? styles.input : undefined}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!validation && <Validation>{validation}</Validation>}\n\t\t\t{!!count && <FieldCount data-limit={count} />}\n\t\t</ds-field>\n\t) : (\n\t\t<ds-field ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type FieldAffixProps = React.ComponentPropsWithoutRef<\"div\">;\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldAffixProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\"> & {\n\t\"data-nofilter\"?: boolean;\n\t/**\n\t * @deprecated Use `data-placement` instead.\n\t */\n\t\"data-position\"?: Placement;\n\t\"data-placement\"?: Placement;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(\n\t\t{ \"data-position\": placement, \"data-nofilter\": filter, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<u-datalist\n\t\t\t\tdata-placement={placement} // Backward compatibility\n\t\t\t\tdata-nofilter={!!filter || undefined} // Ensure data-nofilter is set correctly\n\t\t\t\tref={ref}\n\t\t\t\t{...toCustomElementProps(rest)}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldComboboxSelected = FieldSuggestionSelected; // Backwards compatibility\nexport type FieldComboboxProps = FieldSuggestionProps; // Backwards compatibility\n\nexport type FieldSuggestionSelected = {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: React.ReactNode;\n}[];\nexport type FieldSuggestionProps = Omit<\n\tCustomReactElementProps<DSSuggestionElement>,\n\t\"onChange\" | \"onInput\"\n> & {\n\t\"data-creatable\"?: boolean;\n\t\"data-multiple\"?: boolean;\n\t\"data-variant\"?: \"inside\";\n\tonAfterChange?: (e: CustomEvent<HTMLDataElement>) => void; // Backwards compatibility\n\tonAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void; // Backwards compatibility\n\tonBeforeMatch?: (e: CustomEvent<HTMLOptionElement>) => void; // Custom event to handle before change\n\tonBeforeSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonSelectedChange?: (selected: FieldSuggestionSelected) => void; // Allow onChange to be a function that returns void\n\toptions?: FieldSuggestionSelected;\n\tselected?: FieldSuggestionSelected; // Allow value to be a string or an array of strings for multiple select\n} & Pick<\n\t\tInputProps,\n\t\t| \"disabled\"\n\t\t| \"name\"\n\t\t| \"onChange\"\n\t\t| \"onInput\"\n\t\t| \"placeholder\"\n\t\t| \"readOnly\"\n\t\t| \"type\"\n\t\t| \"value\"\n\t> & // Allow input props to be passed down\n\tPick<\n\t\tFieldDatalistProps,\n\t\t\"data-position\" | \"data-placement\" | \"data-nofilter\"\n\t>; // Allow datalist props to be passed down\n\nconst FieldSuggestion = forwardRef<DSSuggestionElement, FieldSuggestionProps>(\n\tfunction FieldSuggestion(\n\t\t{\n\t\t\t\"aria-required\": required,\n\t\t\t\"data-position\": position,\n\t\t\t\"data-placement\": placement,\n\t\t\t\"data-nofilter\": nofilter,\n\t\t\t\"data-multiple\": multiple,\n\t\t\tonAfterChange, // Backwards compatibility\n\t\t\tonAfterSelect,\n\t\t\tonBeforeChange, // Backwards compatibility\n\t\t\tonBeforeMatch,\n\t\t\tonBeforeSelect,\n\t\t\tonSelectedChange,\n\t\t\tonInput,\n\t\t\tonChange,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\tname,\n\t\t\toptions,\n\t\t\tplaceholder,\n\t\t\treadOnly,\n\t\t\tselected,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) {\n\t\tconst innerRef = useRef<DSSuggestionElement>(null);\n\t\tconst onSelected = useRef(onSelectedChange);\n\t\tonSelected.current = onSelectedChange; // Sync the latest onSelectedChange function\n\n\t\t// Deprecated props\n\t\tif (onAfterChange) {\n\t\t\tonAfterSelect = onAfterChange;\n\t\t\twindow.dsWarnings === false ||\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`\\x1B[1m@mattilsynet/design - deprecation warning:\\x1B[m onAfterChange is deprecated, please use onAfterSelect instead`,\n\t\t\t\t);\n\t\t}\n\n\t\tif (onBeforeChange) {\n\t\t\tonBeforeSelect = onBeforeChange;\n\t\t\twindow.dsWarnings === false ||\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`\\x1B[1m@mattilsynet/design - deprecation warning:\\x1B[m onBeforeChange is deprecated, please use onBeforeSelect instead`,\n\t\t\t\t);\n\t\t}\n\n\t\t// Using useEffect for React 18 and lower compatibility\n\t\tuseImperativeHandle(ref, () => innerRef.current as DSSuggestionElement); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tconst self = innerRef.current;\n\t\t\tconst handleChange = (event: CustomEvent<HTMLDataElement>) => {\n\t\t\t\tconst handleSelected = onSelected.current;\n\t\t\t\tif (!onSelected) return; // No onSelectedChange function provided, let ds-suggestion handle it\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst { isConnected: remove, textContent, value } = event.detail;\n\t\t\t\tconst label = textContent?.trim() || \"\";\n\t\t\t\tconst prev = selected || [];\n\n\t\t\t\tif (remove) handleSelected?.(prev.filter((i) => i.value !== value));\n\t\t\t\telse if (multiple) handleSelected?.([...prev, { value, label }]);\n\t\t\t\telse handleSelected?.([{ value, label }]);\n\t\t\t};\n\n\t\t\tself?.addEventListener(\"comboboxbeforeselect\", handleChange);\n\t\t\treturn () =>\n\t\t\t\tself?.removeEventListener(\"comboboxbeforeselect\", handleChange);\n\t\t}, [multiple, selected]);\n\n\t\treturn (\n\t\t\t<ds-suggestion\n\t\t\t\tdata-multiple={multiple || undefined}\n\t\t\t\t{...toCustomElementProps(\n\t\t\t\t\t{\n\t\t\t\t\t\toncomboboxbeforeselect: onBeforeSelect,\n\t\t\t\t\t\toncomboboxbeforematch: onBeforeMatch,\n\t\t\t\t\t\toncomboboxafterselect: onAfterSelect,\n\t\t\t\t\t\tref: innerRef,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t},\n\t\t\t\t\tstyles.suggestion,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{selected?.map(({ children, label, value }) => (\n\t\t\t\t\t<data key={value} value={value} suppressHydrationWarning>\n\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t</data>\n\t\t\t\t))}\n\t\t\t\t{children || (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\taria-required={required}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tname={name}\n\t\t\t\t\t\t\tonInput={onInput}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<del aria-label=\"Fjern tekst\" suppressHydrationWarning />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{!!options && (\n\t\t\t\t\t<FieldDatalist\n\t\t\t\t\t\tdata-nofilter={nofilter}\n\t\t\t\t\t\tdata-placement={placement || position}\n\t\t\t\t\t>\n\t\t\t\t\t\t{options.map(toOption).map(({ children, label, value }) => (\n\t\t\t\t\t\t\t<FieldOption key={value} value={value} label={label}>\n\t\t\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t\t\t</FieldOption>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</FieldDatalist>\n\t\t\t\t)}\n\t\t\t</ds-suggestion>\n\t\t);\n\t},\n);\n\nexport type FieldLabelProps = React.ComponentPropsWithoutRef<\"label\">;\nconst FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(\n\tfunction FieldLabel(rest, ref) {\n\t\treturn <label suppressHydrationWarning ref={ref} {...rest} />;\n\t},\n);\n\nexport type FieldDescriptionProps = React.ComponentPropsWithoutRef<\"p\">;\nconst FieldDescription = forwardRef<\n\tHTMLParagraphElement,\n\tFieldDescriptionProps\n>(function FieldDescription(rest, ref) {\n\treturn (\n\t\t<div\n\t\t\tsuppressHydrationWarning\n\t\t\tdata-field=\"description\"\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n\nexport type FieldCountProps = React.ComponentPropsWithoutRef<\"p\"> & {\n\t/**\n\t * @deprecated Use \"data-limit\" instead\n\t */\n\t\"data-count\"?: number;\n\t\"data-limit\": number;\n};\nconst FieldCount = forwardRef<HTMLParagraphElement, FieldCountProps>(\n\tfunction FieldCount(\n\t\t{ \"data-count\": count, \"data-limit\": limit, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<Validation\n\t\t\t\tdata-field=\"counter\"\n\t\t\t\tdata-limit={limit || count}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\t/**\n\t * @deprecated Use Field.Suggestion instead\n\t */\n\tCombobox: FieldSuggestion, // Backwards compatibility\n\tSuggestion: FieldSuggestion,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n\tDescription: FieldDescription,\n\tLabel: FieldLabel,\n\tCount: FieldCount,\n});\n"],"names":["toOption","o","FieldComp","forwardRef","size","dataValidation","as","className","count","description","error","helpText","helpTextLabel","label","prefix","style","suffix","validationContent","rest","ref","Tag","affixes","validation","shared","clsx","styles","value","jsx","jsxs","FieldLabel","HelpText","FieldDescription","FieldAffixes","Validation","FieldCount","FieldDatalist","placement","filter","toCustomElementProps","FieldOption","props","FieldSuggestion","required","position","nofilter","multiple","onAfterChange","onAfterSelect","onBeforeChange","onBeforeMatch","onBeforeSelect","onSelectedChange","onInput","onChange","children","disabled","name","options","placeholder","readOnly","selected","type","innerRef","useRef","onSelected","useImperativeHandle","useEffect","self","handleChange","event","handleSelected","remove","textContent","prev","i","Fragment","Input","limit","Field"],"mappings":"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"}

package/mtds/field/field.stories.d.ts

@@ -152,12 +152,14 @@ export declare const WithCharacterCount: Story;
 export declare const WithCustomDescriptionTag: Story;
 export declare const WithSuggestion: Story;
 export declare const WithSuggestionMultiple: Story;
+export declare const WithSuggestionMultipleInside: Story;
 export declare const WithSuggestionCreatable: Story;
 export declare const WithSuggestionAPI: Story;
 export declare const WithSuggestionCustomFilter: Story;
 export declare const ReactWithSuggestion: Story;
 export declare const ReactWithSuggestionWithChildren: Story;
 export declare const ReactWithSuggestionMultiple: Story;
+export declare const ReactWithSuggestionMultipleInside: Story;
 export declare const ReactWithSuggestionCreatable: Story;
 export declare const ReactWithSuggestionLong: Story;
 export declare const ReactWithSuggestionCustomFilter: Story;