@mattilsynet/design 2.2.21 → 2.2.23

package/mtds/chart/chart.js

@@ -1,16 +1,17 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as $ } from "react";
 import { toCustomElementProps as p } from "../utils.js";
 import "./chart-element.js";
-const x = d(function({ data: h, children: i, ...m }, n) {
-  return /* @__PURE__ */ r("mtds-chart", { ref: n, ...p(m), children: h ? /* @__PURE__ */ l("table", { children: [
-    /* @__PURE__ */ r("thead", { children: h.slice(0, 1).map((o, c) => /* @__PURE__ */ r("tr", { children: o.map((e, t) => /* @__PURE__ */ r("th", { children: e }, `${t + 1}`)) }, `${c + 1}`)) }),
-    /* @__PURE__ */ r("tbody", { children: h.slice(1).map((o, c) => /* @__PURE__ */ r("tr", { children: o.map(
-      (e, t) => t ? /* @__PURE__ */ r("td", { children: e }, `${t + 1}`) : /* @__PURE__ */ r("th", { children: e }, `${t + 1}`)
-    ) }, `${c + 1}`)) })
-  ] }) : i });
+let t = 0;
+const u = $(function({ data: l, children: i, ...m }, n) {
+  return /* @__PURE__ */ r("mtds-chart", { ref: n, ...p(m), children: l ? /* @__PURE__ */ d("table", { children: [
+    /* @__PURE__ */ r("thead", { children: l.slice(0, 1).map((o, c) => /* @__PURE__ */ r("tr", { children: o.map((h, e) => /* @__PURE__ */ r("th", { children: h }, `${e}_${t}`)) }, `${c}_${t}`)) }),
+    /* @__PURE__ */ r("tbody", { children: l.slice(1).map((o, c) => /* @__PURE__ */ r("tr", { children: o.map(
+      (h, e) => e ? /* @__PURE__ */ r("td", { children: h }, `${e}_${t}`) : /* @__PURE__ */ r("th", { children: h }, `${e}_${t}`)
+    ) }, `${c}_${t}`)) })
+  ] }, `table_${++t}`) : i });
 });
 export {
-  x as Chart
+  u as Chart
 };
 //# sourceMappingURL=chart.js.map

package/mtds/chart/chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.js","sources":["../../designsystem/chart/chart.tsx"],"sourcesContent":["import type * as ReactTypes from \"react\";\nimport { forwardRef } from \"react\";\nimport { toCustomElementProps } from \"../utils\";\nimport \"./chart-element\";\nimport type { MTDSChartElement } from \"./chart-element\";\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-chart\": ChartProps;\n\t\t}\n\t}\n}\n\nexport type ChartProps = ReactTypes.DetailedHTMLProps<\n\tReactTypes.HTMLAttributes<MTDSChartElement>,\n\tMTDSChartElement\n> & {\n\tclass?: string;\n\tdata?: (number | string)[][];\n\t\"data-legend\"?: \"none\" | \"hidden\" | \"false\" | \"true\" | boolean;\n\t\"data-axis\"?: \"none\" | \"hidden\" | \"false\" | \"true\" | boolean;\n\t\"data-variant\"?:\n\t\t| \"area\"\n\t\t| \"bar\"\n\t\t| \"bar-stacked\"\n\t\t| \"column\"\n\t\t| \"column-stacked\"\n\t\t| \"doughnut\"\n\t\t| \"line\"\n\t\t| \"pie\";\n};\n\nexport const Chart = forwardRef<MTDSChartElement, ChartProps>(function Chart(\n\t{ data, children, ...rest },\n\tref,\n) {\n\treturn (\n\t\t<mtds-chart ref={ref} {...toCustomElementProps(rest)}>\n\t\t\t{data ? (\n\t\t\t\t<table>\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t{data.slice(0, 1).map((tr, row) => (\n\t\t\t\t\t\t\t<tr key={`${row + 1}`}>\n\t\t\t\t\t\t\t\t{tr.map((td, i) => (\n\t\t\t\t\t\t\t\t\t<th key={`${i + 1}`}>{td}</th>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody>\n\t\t\t\t\t\t{data.slice(1).map((tr, row) => (\n\t\t\t\t\t\t\t<tr key={`${row + 1}`}>\n\t\t\t\t\t\t\t\t{tr.map((td, i) =>\n\t\t\t\t\t\t\t\t\ti ? (\n\t\t\t\t\t\t\t\t\t\t<td key={`${i + 1}`}>{td}</td>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<th key={`${i + 1}`}>{td}</th>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</mtds-chart>\n\t);\n});\n"],"names":["Chart","forwardRef","data","children","rest","ref","jsx","toCustomElementProps","jsxs","tr","row","td","i"],"mappings":";;;;AAiCO,MAAMA,IAAQC,EAAyC,SAC7D,EAAE,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GACrBC,GACC;AACD,SACC,gBAAAC,EAAC,gBAAW,KAAAD,GAAW,GAAGE,EAAqBH,CAAI,GACjD,UAAAF,IACA,gBAAAM,EAAC,SAAA,EACA,UAAA;AAAA,IAAA,gBAAAF,EAAC,SAAA,EACC,UAAAJ,EAAK,MAAM,GAAG,CAAC,EAAE,IAAI,CAACO,GAAIC,MAC1B,gBAAAJ,EAAC,MAAA,EACC,YAAG,IAAI,CAACK,GAAIC,MACZ,gBAAAN,EAAC,MAAA,EAAqB,UAAAK,EAAA,GAAb,GAAGC,IAAI,CAAC,EAAQ,CACzB,EAAA,GAHO,GAAGF,IAAM,CAAC,EAInB,CACA,GACF;AAAA,IACA,gBAAAJ,EAAC,SAAA,EACC,UAAAJ,EAAK,MAAM,CAAC,EAAE,IAAI,CAACO,GAAIC,MACvB,gBAAAJ,EAAC,MAAA,EACC,UAAAG,EAAG;AAAA,MAAI,CAACE,GAAIC,MACZA,IACC,gBAAAN,EAAC,MAAA,EAAqB,eAAb,GAAGM,IAAI,CAAC,EAAQ,IAEzB,gBAAAN,EAAC,MAAA,EAAqB,eAAb,GAAGM,IAAI,CAAC,EAAQ;AAAA,IAAA,KALnB,GAAGF,IAAM,CAAC,EAQnB,CACA,EAAA,CACF;AAAA,EAAA,EAAA,CACD,IAEAP,GAEF;AAEF,CAAC;"}
+{"version":3,"file":"chart.js","sources":["../../designsystem/chart/chart.tsx"],"sourcesContent":["import type * as ReactTypes from \"react\";\nimport { forwardRef } from \"react\";\nimport { toCustomElementProps } from \"../utils\";\nimport \"./chart-element\";\nimport type { MTDSChartElement } from \"./chart-element\";\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-chart\": ChartProps;\n\t\t}\n\t}\n}\n\nexport type ChartProps = ReactTypes.DetailedHTMLProps<\n\tReactTypes.HTMLAttributes<MTDSChartElement>,\n\tMTDSChartElement\n> & {\n\tclass?: string;\n\tdata?: (number | string)[][];\n\t\"data-legend\"?: \"none\" | \"hidden\" | \"false\" | \"true\" | boolean;\n\t\"data-axis\"?: \"none\" | \"hidden\" | \"false\" | \"true\" | boolean;\n\t\"data-variant\"?:\n\t\t| \"area\"\n\t\t| \"bar\"\n\t\t| \"bar-stacked\"\n\t\t| \"column\"\n\t\t| \"column-stacked\"\n\t\t| \"doughnut\"\n\t\t| \"line\"\n\t\t| \"pie\";\n};\n\nlet RENDER = 0; // Ensure re-render on data change\nexport const Chart = forwardRef<MTDSChartElement, ChartProps>(function Chart(\n\t{ data, children, ...rest },\n\tref,\n) {\n\treturn (\n\t\t<mtds-chart ref={ref} {...toCustomElementProps(rest)}>\n\t\t\t{data ? (\n\t\t\t\t<table key={`table_${++RENDER}`}>\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t{data.slice(0, 1).map((tr, row) => (\n\t\t\t\t\t\t\t<tr key={`${row}_${RENDER}`}>\n\t\t\t\t\t\t\t\t{tr.map((td, i) => (\n\t\t\t\t\t\t\t\t\t<th key={`${i}_${RENDER}`}>{td}</th>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody>\n\t\t\t\t\t\t{data.slice(1).map((tr, row) => (\n\t\t\t\t\t\t\t<tr key={`${row}_${RENDER}`}>\n\t\t\t\t\t\t\t\t{tr.map((td, i) =>\n\t\t\t\t\t\t\t\t\ti ? (\n\t\t\t\t\t\t\t\t\t\t<td key={`${i}_${RENDER}`}>{td}</td>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<th key={`${i}_${RENDER}`}>{td}</th>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</mtds-chart>\n\t);\n});\n"],"names":["RENDER","Chart","forwardRef","data","children","rest","ref","jsx","toCustomElementProps","jsxs","tr","row","td","i"],"mappings":";;;;AAiCA,IAAIA,IAAS;AACN,MAAMC,IAAQC,EAAyC,SAC7D,EAAE,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GACrBC,GACC;AACD,SACC,gBAAAC,EAAC,gBAAW,KAAAD,GAAW,GAAGE,EAAqBH,CAAI,GACjD,UAAAF,IACA,gBAAAM,EAAC,SAAA,EACA,UAAA;AAAA,IAAA,gBAAAF,EAAC,SAAA,EACC,UAAAJ,EAAK,MAAM,GAAG,CAAC,EAAE,IAAI,CAACO,GAAIC,MAC1B,gBAAAJ,EAAC,MAAA,EACC,UAAAG,EAAG,IAAI,CAACE,GAAIC,MACZ,gBAAAN,EAAC,MAAA,EAA2B,UAAAK,EAAA,GAAnB,GAAGC,CAAC,IAAIb,CAAM,EAAQ,CAC/B,EAAA,GAHO,GAAGW,CAAG,IAAIX,CAAM,EAIzB,CACA,GACF;AAAA,IACA,gBAAAO,EAAC,SAAA,EACC,UAAAJ,EAAK,MAAM,CAAC,EAAE,IAAI,CAACO,GAAIC,MACvB,gBAAAJ,EAAC,MAAA,EACC,UAAAG,EAAG;AAAA,MAAI,CAACE,GAAIC,MACZA,sBACE,MAAA,EAA2B,UAAAD,EAAA,GAAnB,GAAGC,CAAC,IAAIb,CAAM,EAAQ,sBAE9B,MAAA,EAA2B,UAAAY,EAAA,GAAnB,GAAGC,CAAC,IAAIb,CAAM,EAAQ;AAAA,IAAA,KALzB,GAAGW,CAAG,IAAIX,CAAM,EAQzB,CACA,EAAA,CACF;AAAA,EAAA,EAAA,GAtBW,SAAS,EAAEA,CAAM,EAuB7B,IAEAI,GAEF;AAEF,CAAC;"}

package/mtds/chart/chart.stories.d.ts

@@ -25,3 +25,5 @@ export declare const WithLegendDisabled: Story;
 export declare const WithCustomTooltips: Story;
 export declare const WithDotsDisabled: Story;
 export declare const WithCustomInteractions: Story;
+export declare const WithHiddenSteps: Story;
+export declare const WithHiddeLabels: Story;

package/mtds/field/field-observer.js

@@ -1,79 +1,81 @@
-import { UHTMLComboboxElement as E } from "@u-elements/u-combobox";
+import { UHTMLComboboxElement as C } from "@u-elements/u-combobox";
 import { UHTMLDataListElement as T } from "@u-elements/u-datalist";
-import g from "../styles.module.css.js";
-import { IS_BROWSER as C, onLoaded as M, onMutation as A, on as m, QUICK_EVENT as p, isInputLike as h, attr as i, useId as u, anchorPosition as b } from "../utils.js";
-const v = g.field.split(" ")[0], x = g.validation.split(" "), H = x[0], $ = C ? document.getElementsByClassName(v) : [], l = (t, e) => t.getPropertyValue(`--mtds-text-${e}`)?.slice(1, -1) || "";
-function y(t) {
+import v from "../styles.module.css.js";
+import { IS_BROWSER as M, onLoaded as A, onMutation as H, on as m, QUICK_EVENT as g, isInputLike as x, attr as n, useId as p, anchorPosition as h } from "../utils.js";
+const y = v.field.split(" ")[0], I = v.validation.split(" "), V = I[0], $ = M ? document.getElementsByClassName(y) : [];
+function L(t) {
   let e = null;
   for (const a of $)
     if (a.isConnected) {
-      const n = [], s = [], f = [];
+      const i = [], s = [], u = [];
       let c = null, r = null, d = !0;
       for (const o of a.getElementsByTagName("*"))
-        o instanceof HTMLLabelElement ? n.push(o) : o instanceof E ? c = o : h(o) && !o.hidden ? r = o : o.hasAttribute("data-description") ? s.push(o) : o.classList.contains(H) ? (d = i(o, "data-color") === "success" || !o.clientHeight, f.push(o), s.unshift(o)) : o instanceof HTMLParagraphElement && (s.some((I) => I.contains(o)) || s.push(o));
+        o instanceof HTMLLabelElement ? i.push(o) : o instanceof C ? c = o : x(o) && !o.hidden ? r = o : o.hasAttribute("data-description") ? s.push(o) : o.classList.contains(V) ? (d = n(o, "data-color") === "success" || !o.clientHeight, u.push(o), s.unshift(o)) : o instanceof HTMLParagraphElement && (s.some((b) => b.contains(o)) || s.push(o));
       if (r) {
-        for (const o of n) o.htmlFor = u(r);
-        if (t && i(a, "data-validation") === "form") {
-          d = r.matches(":valid"), !e && !d && (e = r);
-          for (const o of f)
-            i(o, "hidden", d ? "" : null);
+        const o = c?.control;
+        if ((t || o?.validity.customError) && n(a, "data-validation") === "form") {
+          d = o?.getAttribute("aria-required") === "true" ? !!c?.items.length : r.validity.valid, !e && !d && (e = r);
+          for (const f of u) n(f, "hidden", d ? "" : null);
+          o?.setCustomValidity(d ? "" : "Invalid");
         }
-        F(c), S(r), L(r), i(r, "aria-describedby", s.map(u).join(" ")), i(r, "aria-invalid", `${!d}`);
+        for (const f of i) f.htmlFor = p(r);
+        D(c), E(r), S(r), n(r, "aria-describedby", s.map(p).join(" ")), n(r, "aria-invalid", `${!d}`);
       }
     }
-  e?.focus();
+  return t && e?.focus(), e;
 }
-function L(t) {
+function S(t) {
   t instanceof HTMLTextAreaElement && (t.style.setProperty("--mtds-textarea-height", "auto"), t.style.setProperty(
     "--mtds-textarea-height",
     `${t.scrollHeight}px`
   ));
 }
-function F(t) {
+const l = (t, e) => t.getPropertyValue(`--mtds-text-${e}`)?.slice(1, -1) || "";
+function D(t) {
   const { control: e, list: a } = t || {};
   if (t && a && !t.hasAttribute("data-sr-added")) {
-    const n = window.getComputedStyle(t);
-    i(t, "data-sr-added", l(n, "combobox-added")), i(t, "data-sr-empty", l(n, "combobox-empty")), i(t, "data-sr-found", l(n, "combobox-found")), i(t, "data-sr-invalid", l(n, "combobox-invalid")), i(t, "data-sr-of", l(n, "combobox-of")), i(t, "data-sr-remove", l(n, "combobox-remove")), i(t, "data-sr-removed", l(n, "combobox-removed")), i(a, "data-sr-plural", l(n, "datalist-plural")), i(a, "data-sr-singular", l(n, "datalist-singular"));
+    const i = window.getComputedStyle(t);
+    n(t, "data-sr-added", l(i, "combobox-added")), n(t, "data-sr-empty", l(i, "combobox-empty")), n(t, "data-sr-found", l(i, "combobox-found")), n(t, "data-sr-invalid", l(i, "combobox-invalid")), n(t, "data-sr-of", l(i, "combobox-of")), n(t, "data-sr-remove", l(i, "combobox-remove")), n(t, "data-sr-removed", l(i, "combobox-removed")), n(a, "data-sr-plural", l(i, "datalist-plural")), n(a, "data-sr-singular", l(i, "datalist-singular"));
   }
-  a && e && !a.hasAttribute("popover") && (i(a, "popover", "manual"), i(e, "popovertarget", u(a)));
+  a && e && !a.hasAttribute("popover") && (n(a, "popover", "manual"), n(e, "popovertarget", p(a)));
 }
-function S(t) {
-  const e = t?.nextElementSibling, a = e && i(e, "data-count");
+function E(t) {
+  const e = t?.nextElementSibling, a = e && n(e, "data-count");
   if (e && a) {
-    const n = Number(a) - t.value.length, s = n < 0, f = i(e, "aria-live") === "polite", c = window.getComputedStyle(e || t), r = l(c, "count-over"), d = l(c, "count-under");
-    if (f !== s) {
-      i(e, "aria-live", s ? "polite" : "off");
-      for (const o of x) e.classList.toggle(o, s);
+    const i = Number(a) - t.value.length, s = i < 0, u = n(e, "aria-live") === "polite", c = window.getComputedStyle(e || t), r = l(c, "count-over"), d = l(c, "count-under");
+    if (u !== s) {
+      n(e, "aria-live", s ? "polite" : "off");
+      for (const o of I) e.classList.toggle(o, s);
     }
     e.textContent = (s ? r : d).replace(
       "%d",
-      `${Math.abs(n)}`
+      `${Math.abs(i)}`
     );
   }
 }
-function N({ target: t, newState: e }) {
+function F({ target: t, newState: e }) {
   if (t instanceof T) {
-    const n = t.getRootNode()?.querySelector(
+    const i = t.getRootNode()?.querySelector(
       `[popovertarget="${t.id}"]`
     );
-    e === "closed" ? b(t, !1) : n && b(t, n, {
+    e === "closed" ? h(t, !1) : i && h(t, i, {
       contain({ availableHeight: s }) {
-        t.style.width = `${n.clientWidth}px`, t.style.maxHeight = `${Math.max(50, s)}px`;
+        t.style.width = `${i.clientWidth}px`, t.style.maxHeight = `${Math.max(50, s)}px`;
       }
     });
   }
 }
-function D(t) {
-  h(t.target) && (S(t.target), L(t.target));
+function N(t) {
+  x(t.target) && (E(t.target), S(t.target));
 }
 function w(t) {
-  const e = t.target?.closest?.(`.${v}`);
-  t.type === "invalid" && e && t.preventDefault(), y(!0);
+  const e = t.target?.closest?.(`.${y}`);
+  t.type === "invalid" && e && t.preventDefault(), L(!0) && t.preventDefault();
 }
-M(() => [
-  A(() => y()),
-  m(document, "input", D, p),
-  m(document, "toggle", N, p),
+A(() => [
+  H(() => L(), "class"),
+  m(document, "input", N, g),
+  m(document, "toggle", F, g),
   // Use capture since toggle does not bubble
   m(document, "invalid,submit", w, !0)
   // Use capture as invalid and submit does not bubble

package/mtds/field/field-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tIS_BROWSER,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\nconst FIELDS = IS_BROWSER ? document.getElementsByClassName(CSS_FIELD) : [];\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\nfunction handleFieldMutation(validate?: boolean) {\n\tlet firstInvalid: HTMLInputElement | null = null;\n\tfor (const field of FIELDS)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descriptions: Element[] = [];\n\t\t\tconst validationMessages: Element[] = [];\n\t\t\tlet combobox: UHTMLComboboxElement | null = null;\n\t\t\tlet input: HTMLInputElement | null = null;\n\t\t\tlet valid = true;\n\n\t\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\t\telse if (el instanceof UHTMLComboboxElement) combobox = el;\n\t\t\t\telse if (isInputLike(el) && !el.hidden) input = el;\n\t\t\t\telse if (el.hasAttribute(\"data-description\")) descriptions.push(el);\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\tvalid = attr(el, \"data-color\") === \"success\" || !el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\tvalidationMessages.push(el);\n\t\t\t\t\tdescriptions.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescriptions.some((desc) => desc.contains(el)) ||\n\t\t\t\t\t\tdescriptions.push(el); // Only add if not already inside description\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\t\tif (validate && attr(field, \"data-validation\") === \"form\") {\n\t\t\t\t\tvalid = input.matches(\":valid\");\n\t\t\t\t\tif (!firstInvalid && !valid) firstInvalid = input;\n\t\t\t\t\tfor (const el of validationMessages)\n\t\t\t\t\t\tattr(el, \"hidden\", valid ? \"\" : null);\n\t\t\t\t}\n\t\t\t\trenderCombobox(combobox);\n\t\t\t\trenderCounter(input);\n\t\t\t\trenderTextareaSize(input);\n\t\t\t\tattr(input, \"aria-describedby\", descriptions.map(useId).join(\" \"));\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n\tfirstInvalid?.focus(); // Move focus to first invalid field if doing validation\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tconst { control, list } = el || {};\n\n\tif (el && list && !el.hasAttribute(\"data-sr-added\")) {\n\t\tconst style = window.getComputedStyle(el);\n\t\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\t\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\t\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\t\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\t\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\t\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\t\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\t\tattr(list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\t\tattr(list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\t}\n\tif (list && control && !list.hasAttribute(\"popover\")) {\n\t\tattr(list, \"popover\", \"manual\");\n\t\tattr(control, \"popovertarget\", useId(list));\n\t}\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = getText(style, \"count-over\");\n\t\tconst under = getText(style, \"count-under\");\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tel.textContent = (nextInvalid ? over : under).replace(\n\t\t\t\"%d\",\n\t\t\t`${Math.abs(remainder)}`,\n\t\t);\n\t}\n}\n\nfunction handleFieldToggle({ target: el, newState }: Partial<ToggleEvent>) {\n\tif (el instanceof UHTMLDataListElement) {\n\t\tconst root = el.getRootNode() as ShadowRoot | null;\n\t\tconst anchor = root?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") anchorPosition(el, false);\n\t\telse if (anchor)\n\t\t\tanchorPosition(el, anchor, {\n\t\t\t\tcontain({ availableHeight }) {\n\t\t\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\t\t\tel.style.maxHeight = `${Math.max(50, availableHeight)}px`;\n\t\t\t\t},\n\t\t\t});\n\t}\n}\n// Update when typing\nfunction handleFieldInput(event: Event) {\n\tif (isInputLike(event.target)) {\n\t\trenderCounter(event.target);\n\t\trenderTextareaSize(event.target);\n\t}\n}\n\nfunction handleFieldValdiation(event: Event) {\n\tconst field = (event.target as Element)?.closest?.(`.${CSS_FIELD}`);\n\tif (event.type === \"invalid\" && field) event.preventDefault(); // Prevent browsers from showing default validation bubbles\n\thandleFieldMutation(true); // Update state\n}\n\nonLoaded(() => [\n\tonMutation(() => handleFieldMutation()),\n\ton(document, \"input\", handleFieldInput, QUICK_EVENT),\n\ton(document, \"toggle\", handleFieldToggle, QUICK_EVENT), // Use capture since toggle does not bubble\n\ton(document, \"invalid,submit\", handleFieldValdiation, true), // Use capture as invalid and submit does not bubble\n]);\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","FIELDS","IS_BROWSER","getText","style","key","handleFieldMutation","validate","firstInvalid","field","labels","descriptions","validationMessages","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","control","list","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleFieldToggle","newState","UHTMLDataListElement","anchor","anchorPosition","availableHeight","handleFieldInput","event","handleFieldValdiation","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}
+{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tIS_BROWSER,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\nconst FIELDS = IS_BROWSER ? document.getElementsByClassName(CSS_FIELD) : [];\n\nfunction handleFieldMutation(validate?: boolean) {\n\tlet firstInvalid: HTMLInputElement | null = null;\n\tfor (const field of FIELDS)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descriptions: Element[] = [];\n\t\t\tconst validationMsg: Element[] = [];\n\t\t\tlet combobox: UHTMLComboboxElement | null = null;\n\t\t\tlet input: HTMLInputElement | null = null;\n\t\t\tlet valid = true;\n\n\t\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\t\telse if (el instanceof UHTMLComboboxElement) combobox = el;\n\t\t\t\telse if (isInputLike(el) && !el.hidden) input = el;\n\t\t\t\telse if (el.hasAttribute(\"data-description\")) descriptions.push(el);\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\tvalid = attr(el, \"data-color\") === \"success\" || !el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\tvalidationMsg.push(el);\n\t\t\t\t\tdescriptions.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescriptions.some((desc) => desc.contains(el)) ||\n\t\t\t\t\t\tdescriptions.push(el); // Only add if not already inside description\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tconst comboboxInput = combobox?.control;\n\t\t\t\tconst shouldValidate = validate || comboboxInput?.validity.customError; // Live re-evaluate combobox if invalid to correct validity before form sumbit\n\n\t\t\t\tif (shouldValidate && attr(field, \"data-validation\") === \"form\") {\n\t\t\t\t\tvalid =\n\t\t\t\t\t\tcomboboxInput?.getAttribute(\"aria-required\") === \"true\"\n\t\t\t\t\t\t\t? !!combobox?.items.length\n\t\t\t\t\t\t\t: input.validity.valid;\n\n\t\t\t\t\tif (!firstInvalid && !valid) firstInvalid = input;\n\t\t\t\t\tfor (const el of validationMsg) attr(el, \"hidden\", valid ? \"\" : null);\n\t\t\t\t\tcomboboxInput?.setCustomValidity(valid ? \"\" : \"Invalid\"); // Combobox does not have native validation\n\t\t\t\t}\n\t\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\t\trenderCombobox(combobox);\n\t\t\t\trenderCounter(input);\n\t\t\t\trenderTextareaSize(input);\n\t\t\t\tattr(input, \"aria-describedby\", descriptions.map(useId).join(\" \"));\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n\tif (validate) firstInvalid?.focus(); // Only move focus to first invalid field if validate was true\n\treturn firstInvalid;\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tconst { control, list } = el || {};\n\n\tif (el && list && !el.hasAttribute(\"data-sr-added\")) {\n\t\tconst style = window.getComputedStyle(el);\n\t\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\t\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\t\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\t\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\t\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\t\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\t\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\t\tattr(list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\t\tattr(list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\t}\n\tif (list && control && !list.hasAttribute(\"popover\")) {\n\t\tattr(list, \"popover\", \"manual\");\n\t\tattr(control, \"popovertarget\", useId(list));\n\t}\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = getText(style, \"count-over\");\n\t\tconst under = getText(style, \"count-under\");\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tel.textContent = (nextInvalid ? over : under).replace(\n\t\t\t\"%d\",\n\t\t\t`${Math.abs(remainder)}`,\n\t\t);\n\t}\n}\n\nfunction handleFieldToggle({ target: el, newState }: Partial<ToggleEvent>) {\n\tif (el instanceof UHTMLDataListElement) {\n\t\tconst root = el.getRootNode() as ShadowRoot | null;\n\t\tconst anchor = root?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") anchorPosition(el, false);\n\t\telse if (anchor)\n\t\t\tanchorPosition(el, anchor, {\n\t\t\t\tcontain({ availableHeight }) {\n\t\t\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\t\t\tel.style.maxHeight = `${Math.max(50, availableHeight)}px`;\n\t\t\t\t},\n\t\t\t});\n\t}\n}\n// Update when typing\nfunction handleFieldInput(event: Event) {\n\tif (isInputLike(event.target)) {\n\t\trenderCounter(event.target);\n\t\trenderTextareaSize(event.target);\n\t}\n}\n\nfunction handleFieldValdiation(event: Event) {\n\tconst field = (event.target as Element)?.closest?.(`.${CSS_FIELD}`);\n\tif (event.type === \"invalid\" && field) event.preventDefault(); // Prevent browsers from showing default validation bubbles\n\tif (handleFieldMutation(true)) event.preventDefault(); // Prevent submit if invalid fields found\n}\n\nonLoaded(() => [\n\tonMutation(() => handleFieldMutation(), \"class\"),\n\ton(document, \"input\", handleFieldInput, QUICK_EVENT),\n\ton(document, \"toggle\", handleFieldToggle, QUICK_EVENT), // Use capture since toggle does not bubble\n\ton(document, \"invalid,submit\", handleFieldValdiation, true), // Use capture as invalid and submit does not bubble\n]);\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","FIELDS","IS_BROWSER","handleFieldMutation","validate","firstInvalid","field","labels","descriptions","validationMsg","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","comboboxInput","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","getText","style","key","control","list","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleFieldToggle","newState","UHTMLDataListElement","anchor","anchorPosition","availableHeight","handleFieldInput","event","handleFieldValdiation","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}

package/mtds/field/field.d.ts

@@ -4,6 +4,7 @@ import { JSX } from 'react';
 import { InputProps } from '../input/input';
 import { PolymorphicComponentPropWithRef } from '../react-types';
 type FieldBaseProps = {
+    "data-validation"?: "form" | "false" | false;
     count?: number;
     description?: React.ReactNode;
     error?: React.ReactNode;

package/mtds/field/field.js

@@ -1,154 +1,159 @@
 'use client';
-import { jsx as e, Fragment as I, jsxs as j } from "react/jsx-runtime";
+import { jsx as e, Fragment as I, jsxs as D } from "react/jsx-runtime";
 import k from "clsx";
-import { forwardRef as p, useRef as z, useImperativeHandle as K, useEffect as M } from "react";
-import { HelpText as Q } from "../helptext/helptext.js";
+import { forwardRef as p, useRef as z, useImperativeHandle as M, useEffect as Q } from "react";
+import { HelpText as T } from "../helptext/helptext.js";
 import { Input as U } from "../input/input.js";
-import g from "../styles.module.css.js";
-import { toCustomElementProps as N } from "../utils.js";
-const P = (o) => typeof o == "string" ? { label: o, value: o } : o, V = p(function({
+import j from "../styles.module.css.js";
+import { toCustomElementProps as E } from "../utils.js";
+import { Validation as X } from "../validation/validation.js";
+const P = (o) => typeof o == "string" ? { label: o, value: o } : o, Y = p(function({
   "data-size": t,
-  as: n,
-  className: a,
+  "data-validation": n,
+  as: i,
+  className: m,
   count: u,
-  description: m,
-  error: F,
+  description: f,
+  error: g,
   helpText: y,
-  helpTextLabel: H,
-  label: f,
-  prefix: b,
-  style: D,
-  suffix: h,
-  validation: C,
-  ...i
-}, v) {
-  const l = n || "div", E = !!h || !!b, W = C || F, O = {
+  helpTextLabel: C,
+  label: b,
+  prefix: h,
+  style: L,
+  suffix: v,
+  validation: H,
+  ...r
+}, x) {
+  const d = i || "div", N = !!v || !!h, W = H || g, O = {
     "data-size": t,
-    className: k(g.field, a),
-    style: D
+    "data-validation": n,
+    className: k(j.field, m),
+    style: L
   };
-  return n === "select" && !i.children && Object.assign(i, {
+  return i === "select" && !r.children && Object.assign(r, {
     options: void 0,
     // Ensure options is not passed to DOM
-    children: /* @__PURE__ */ e(I, { children: i.options?.map(P).map(({ label: x, value: d }) => /* @__PURE__ */ e("option", { value: d, children: x }, d)) })
-  }), n ? /* @__PURE__ */ j("div", { ...O, children: [
-    !!f && /* @__PURE__ */ e("label", { suppressHydrationWarning: !0, children: f }),
-    !!y && /* @__PURE__ */ e(Q, { "aria-label": H, children: y }),
-    !!m && /* @__PURE__ */ e("p", { suppressHydrationWarning: !0, children: m }),
-    E ? /* @__PURE__ */ j(S, { children: [
-      !!b && /* @__PURE__ */ e("span", { children: b }),
+    children: /* @__PURE__ */ e(I, { children: r.options?.map(P).map(({ label: F, value: l }) => /* @__PURE__ */ e("option", { value: l, children: F }, l)) })
+  }), i ? /* @__PURE__ */ D("div", { ...O, children: [
+    !!b && /* @__PURE__ */ e("label", { suppressHydrationWarning: !0, children: b }),
+    !!y && /* @__PURE__ */ e(T, { "aria-label": C, children: y }),
+    !!f && /* @__PURE__ */ e("p", { suppressHydrationWarning: !0, children: f }),
+    N ? /* @__PURE__ */ D(S, { children: [
+      !!h && /* @__PURE__ */ e("span", { children: h }),
       /* @__PURE__ */ e(
-        l,
+        d,
         {
-          className: g.input,
+          className: j.input,
           suppressHydrationWarning: !0,
-          ref: v,
-          ...i
+          ref: x,
+          ...r
         }
       ),
-      !!h && /* @__PURE__ */ e("span", { children: h })
+      !!v && /* @__PURE__ */ e("span", { children: v })
     ] }) : /* @__PURE__ */ e(
-      l,
+      d,
       {
-        className: typeof n == "string" ? g.input : void 0,
+        className: typeof i == "string" ? j.input : void 0,
         suppressHydrationWarning: !0,
-        ref: v,
-        ...i
+        ref: x,
+        ...r
       }
     ),
-    !!W && /* @__PURE__ */ e("div", { suppressHydrationWarning: !0, className: g.validation, children: W }),
+    !!W && /* @__PURE__ */ e(X, { hidden: n === "form", children: W }),
     !!u && /* @__PURE__ */ e("p", { suppressHydrationWarning: !0, "data-count": u })
-  ] }) : /* @__PURE__ */ e("div", { ref: v, ...O, ...i });
+  ] }) : /* @__PURE__ */ e("div", { ref: x, ...O, ...r });
 }), S = p(
-  function({ className: t, ...n }, a) {
-    return /* @__PURE__ */ e("div", { className: k(g.affixes, t), ref: a, ...n });
+  function({ className: t, ...n }, i) {
+    return /* @__PURE__ */ e("div", { className: k(j.affixes, t), ref: i, ...n });
   }
-), T = p(
-  function({ "data-nofilter": t, ...n }, a) {
+), V = p(
+  function({ "data-nofilter": t, ...n }, i) {
     return /* @__PURE__ */ e(
       "u-datalist",
       {
         "data-nofilter": !!t || void 0,
-        ref: a,
-        ...N(n)
+        ref: i,
+        ...E(n)
       }
     );
   }
-), q = p(
+), B = p(
   function(t, n) {
-    return /* @__PURE__ */ e("u-option", { ref: n, ...N(t) });
+    return /* @__PURE__ */ e("u-option", { ref: n, ...E(t) });
   }
-), X = p(
+), Z = p(
   function({
-    "data-multiple": t,
-    "data-nofilter": n,
-    "data-position": a,
+    "aria-required": t,
+    "data-position": n,
+    "data-nofilter": i,
+    "data-multiple": m,
     onAfterChange: u,
-    onAfterSelect: m,
-    onBeforeChange: F,
+    onAfterSelect: f,
+    onBeforeChange: g,
     onBeforeMatch: y,
-    onBeforeSelect: H,
-    onSelectedChange: f,
-    children: b,
-    disabled: D,
-    name: h,
-    options: C,
-    placeholder: i,
-    readOnly: v,
-    selected: l,
-    type: E,
+    onBeforeSelect: C,
+    onSelectedChange: b,
+    children: h,
+    disabled: L,
+    name: v,
+    options: H,
+    placeholder: r,
+    readOnly: x,
+    selected: d,
+    type: N,
     ...W
   }, O) {
-    const x = z(null), d = z(f);
-    return d.current = f, u && (m = u, console.warn(
+    const F = z(null), l = z(b);
+    return l.current = b, u && (f = u, console.warn(
       "Combobox onAfterChange is deprecated, use onAfterSelect instead."
-    )), F && (H = F, console.warn(
+    )), g && (C = g, console.warn(
       "Combobox onBeforeChange is deprecated, use onBeforeSelect instead."
-    )), K(O, () => x.current), M(() => {
-      const c = x.current, s = (r) => {
-        const L = d.current;
-        if (!d) return;
-        r.preventDefault();
-        const { isConnected: B, textContent: G, value: w } = r.detail, A = G?.trim() || "", R = l || [];
-        L?.(B ? R.filter((J) => J.value !== w) : t ? [...R, { value: w, label: A }] : [{ value: w, label: A }]);
+    )), M(O, () => F.current), Q(() => {
+      const c = F.current, s = (a) => {
+        const w = l.current;
+        if (!l) return;
+        a.preventDefault();
+        const { isConnected: G, textContent: J, value: A } = a.detail, R = J?.trim() || "", q = d || [];
+        w?.(G ? q.filter((K) => K.value !== A) : m ? [...q, { value: A, label: R }] : [{ value: A, label: R }]);
       };
       return c?.addEventListener("comboboxbeforeselect", s), () => c?.removeEventListener("comboboxbeforeselect", s);
-    }, [t, l]), /* @__PURE__ */ j(
+    }, [m, d]), /* @__PURE__ */ D(
       "u-combobox",
       {
-        "data-multiple": t || void 0,
-        ...N({
-          oncomboboxbeforeselect: H,
+        "data-multiple": m || void 0,
+        ...E({
+          oncomboboxbeforeselect: C,
           oncomboboxbeforematch: y,
-          oncomboboxafterselect: m,
-          ref: x,
+          oncomboboxafterselect: f,
+          ref: F,
           ...W
         }),
         children: [
-          l?.map(({ children: c, label: s, value: r }) => /* @__PURE__ */ e("data", { value: r, suppressHydrationWarning: !0, children: c ?? s }, r)),
-          b || /* @__PURE__ */ j(I, { children: [
+          d?.map(({ children: c, label: s, value: a }) => /* @__PURE__ */ e("data", { value: a, suppressHydrationWarning: !0, children: c ?? s }, a)),
+          h || /* @__PURE__ */ D(I, { children: [
             /* @__PURE__ */ e(
               U,
               {
-                name: h,
-                type: E,
-                disabled: D,
-                readOnly: v,
-                placeholder: i
+                "aria-required": t,
+                disabled: L,
+                name: v,
+                placeholder: r,
+                readOnly: x,
+                type: N
               }
             ),
-            /* @__PURE__ */ e("del", { ...N({ "aria-label": "Fjern tekst" }) })
+            /* @__PURE__ */ e("del", { ...E({ "aria-label": "Fjern tekst" }) })
           ] }),
-          !!C && /* @__PURE__ */ e(T, { "data-nofilter": n, "data-position": a, children: C.map(P).map(({ children: c, label: s, value: r }) => /* @__PURE__ */ e(q, { value: r, label: s, children: c ?? s }, r)) })
+          !!H && /* @__PURE__ */ e(V, { "data-nofilter": i, "data-position": n, children: H.map(P).map(({ children: c, label: s, value: a }) => /* @__PURE__ */ e(B, { value: a, label: s, children: c ?? s }, a)) })
         ]
       }
     );
   }
-), oe = Object.assign(V, {
+), ae = Object.assign(Y, {
   Affixes: S,
-  Combobox: X,
-  Datalist: T,
-  Option: q,
+  Combobox: Z,
+  Datalist: V,
+  Option: B,
   Label: p(
     function(t, n) {
       return /* @__PURE__ */ e("label", { suppressHydrationWarning: !0, ref: n, ...t });
@@ -156,7 +161,7 @@ const P = (o) => typeof o == "string" ? { label: o, value: o } : o, V = p(functi
   )
 });
 export {
-  oe as Field,
-  V as FieldComp
+  ae as Field,
+  Y as FieldComp
 };
 //# sourceMappingURL=field.js.map

package/mtds/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["\"use client\";\nimport type { Placement } from \"@floating-ui/dom\";\nimport type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\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\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\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[] | FieldComboboxSelected;\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: FieldComboboxSelected[number] | string,\n): FieldComboboxSelected[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\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,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst valid = validation || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\tclassName: clsx(styles.field, className),\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<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p suppressHydrationWarning>{description}</p>}\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={styles.input}\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{!!valid && (\n\t\t\t\t<div suppressHydrationWarning className={styles.validation}>\n\t\t\t\t\t{valid}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{!!count && <p suppressHydrationWarning data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div 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\"data-position\"?: Placement;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist({ \"data-nofilter\": filter, ...rest }, ref) {\n\t\treturn (\n\t\t\t<u-datalist\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 = {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: React.ReactNode;\n}[];\nexport type FieldComboboxProps = Omit<\n\tReactUcombobox,\n\t\"onChange\" | \"onInput\"\n> & {\n\t\"data-creatable\"?: boolean;\n\t\"data-multiple\"?: boolean;\n\tonAfterChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\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: FieldComboboxSelected) => void; // Allow onChange to be a function that returns void\n\toptions?: FieldComboboxSelected;\n\tselected?: FieldComboboxSelected; // 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<FieldDatalistProps, \"data-position\" | \"data-nofilter\">; // Allow datalist props to be passed down\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(\n\t\t{\n\t\t\t\"data-multiple\": multiple,\n\t\t\t\"data-nofilter\": nofilter,\n\t\t\t\"data-position\": position,\n\t\t\tonAfterChange,\n\t\t\tonAfterSelect,\n\t\t\tonBeforeChange,\n\t\t\tonBeforeMatch,\n\t\t\tonBeforeSelect,\n\t\t\tonSelectedChange,\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<UHTMLComboboxElement>(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\tconsole.warn(\n\t\t\t\t`Combobox onAfterChange is deprecated, use onAfterSelect instead.`,\n\t\t\t);\n\t\t}\n\t\tif (onBeforeChange) {\n\t\t\tonBeforeSelect = onBeforeChange;\n\t\t\tconsole.warn(\n\t\t\t\t`Combobox onBeforeChange is deprecated, use onBeforeSelect instead.`,\n\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 UHTMLComboboxElement); // 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 u-combobox 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<u-combobox\n\t\t\t\tdata-multiple={multiple || undefined}\n\t\t\t\t{...toCustomElementProps({\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>\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\tname={name}\n\t\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<del {...toCustomElementProps({ \"aria-label\": \"Fjern tekst\" })} />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{!!options && (\n\t\t\t\t\t<FieldDatalist data-nofilter={nofilter} data-position={position}>\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</u-combobox>\n\t\t);\n\t},\n);\n\nexport type FieldLabelProps = React.ComponentPropsWithoutRef<\"label\">;\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n\tLabel: forwardRef<HTMLLabelElement, FieldLabelProps>(\n\t\tfunction FieldLabel(rest, ref) {\n\t\t\treturn <label suppressHydrationWarning ref={ref} {...rest} />;\n\t\t},\n\t),\n});\n"],"names":["toOption","FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","value","jsx","jsxs","HelpText","FieldAffixes","FieldDatalist","filter","toCustomElementProps","FieldOption","props","FieldCombobox","multiple","nofilter","position","onAfterChange","onAfterSelect","onBeforeChange","onBeforeMatch","onBeforeSelect","onSelectedChange","children","disabled","name","options","placeholder","readOnly","selected","type","innerRef","useRef","onSelected","useImperativeHandle","useEffect","self","handleChange","event","handleSelected","remove","textContent","prev","i","Fragment","Input","Field"],"mappings":"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"}
+{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["\"use client\";\nimport type { Placement } from \"@floating-ui/dom\";\nimport type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\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\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\t\"data-validation\"?: \"form\" | \"false\" | false;\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[] | FieldComboboxSelected;\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: FieldComboboxSelected[number] | string,\n): FieldComboboxSelected[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\": validationType,\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 || \"div\";\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\": validationType,\n\t\tclassName: clsx(styles.field, className),\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<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p suppressHydrationWarning>{description}</p>}\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={styles.input}\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 && (\n\t\t\t\t<Validation hidden={validationType === \"form\"}>{validation}</Validation>\n\t\t\t)}\n\t\t\t{!!count && <p suppressHydrationWarning data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div 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\"data-position\"?: Placement;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist({ \"data-nofilter\": filter, ...rest }, ref) {\n\t\treturn (\n\t\t\t<u-datalist\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 = {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: React.ReactNode;\n}[];\nexport type FieldComboboxProps = Omit<\n\tReactUcombobox,\n\t\"onChange\" | \"onInput\"\n> & {\n\t\"data-creatable\"?: boolean;\n\t\"data-multiple\"?: boolean;\n\tonAfterChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\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: FieldComboboxSelected) => void; // Allow onChange to be a function that returns void\n\toptions?: FieldComboboxSelected;\n\tselected?: FieldComboboxSelected; // 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<FieldDatalistProps, \"data-position\" | \"data-nofilter\">; // Allow datalist props to be passed down\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(\n\t\t{\n\t\t\t\"aria-required\": required,\n\t\t\t\"data-position\": position,\n\t\t\t\"data-nofilter\": nofilter,\n\t\t\t\"data-multiple\": multiple,\n\t\t\tonAfterChange,\n\t\t\tonAfterSelect,\n\t\t\tonBeforeChange,\n\t\t\tonBeforeMatch,\n\t\t\tonBeforeSelect,\n\t\t\tonSelectedChange,\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<UHTMLComboboxElement>(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\tconsole.warn(\n\t\t\t\t`Combobox onAfterChange is deprecated, use onAfterSelect instead.`,\n\t\t\t);\n\t\t}\n\t\tif (onBeforeChange) {\n\t\t\tonBeforeSelect = onBeforeChange;\n\t\t\tconsole.warn(\n\t\t\t\t`Combobox onBeforeChange is deprecated, use onBeforeSelect instead.`,\n\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 UHTMLComboboxElement); // 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 u-combobox 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<u-combobox\n\t\t\t\tdata-multiple={multiple || undefined}\n\t\t\t\t{...toCustomElementProps({\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>\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\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 {...toCustomElementProps({ \"aria-label\": \"Fjern tekst\" })} />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{!!options && (\n\t\t\t\t\t<FieldDatalist data-nofilter={nofilter} data-position={position}>\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</u-combobox>\n\t\t);\n\t},\n);\n\nexport type FieldLabelProps = React.ComponentPropsWithoutRef<\"label\">;\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n\tLabel: forwardRef<HTMLLabelElement, FieldLabelProps>(\n\t\tfunction FieldLabel(rest, ref) {\n\t\t\treturn <label suppressHydrationWarning ref={ref} {...rest} />;\n\t\t},\n\t),\n});\n"],"names":["toOption","FieldComp","forwardRef","size","validationType","as","className","count","description","error","helpText","helpTextLabel","label","prefix","style","suffix","validationContent","rest","ref","Tag","affixes","validation","shared","clsx","styles","value","jsx","jsxs","HelpText","FieldAffixes","Validation","FieldDatalist","filter","toCustomElementProps","FieldOption","props","FieldCombobox","required","position","nofilter","multiple","onAfterChange","onAfterSelect","onBeforeChange","onBeforeMatch","onBeforeSelect","onSelectedChange","children","disabled","name","options","placeholder","readOnly","selected","type","innerRef","useRef","onSelected","useImperativeHandle","useEffect","self","handleChange","event","handleSelected","remove","textContent","prev","i","Fragment","Input","Field"],"mappings":"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"}