@mattilsynet/design 2.0.0 → 2.0.2

package/mtds/field/field-observer.js

@@ -1,43 +1,44 @@
-import { UHTMLComboboxElement as g } from "../external/@u-elements/u-combobox/dist/u-combobox.js";
-import { UHTMLDataListElement as E } from "../external/@u-elements/u-datalist/dist/u-datalist.js";
+import { UHTMLComboboxElement as h } from "../external/@u-elements/u-combobox/dist/u-combobox.js";
+import { UHTMLDataListElement as S } from "../external/@u-elements/u-datalist/dist/u-datalist.js";
 import v from "../styles.module.css.js";
-import { onLoaded as I, onMutation as A, on as f, QUICK_EVENT as p, isInputLike as x, attr as n, useId as b, anchorPosition as m } from "../utils.js";
-const h = v.field.split(" ")[0], y = v.validation.split(" "), M = y[0], a = (t, o) => t.getPropertyValue(`--mtds-text-${o}`)?.slice(1, -1) || "";
-function T(t, o) {
-  for (const s of t)
-    if (s.isConnected) {
-      const i = [], r = [], u = [];
+import { onLoaded as M, onMutation as A, on as m, QUICK_EVENT as u, isInputLike as x, attr as n, useId as p, anchorPosition as b } from "../utils.js";
+const g = v.field.split(" ")[0], y = v.validation.split(" "), H = y[0], s = (t, o) => t.getPropertyValue(`--mtds-text-${o}`)?.slice(1, -1) || "";
+function L(t, o) {
+  for (const a of t)
+    if (a.isConnected) {
+      const i = [], r = [], f = [];
       let c = null, d = null, l = !0;
-      for (const e of s.getElementsByTagName("*"))
-        e instanceof HTMLLabelElement ? i.push(e) : e instanceof g ? c = e : x(e) && !e.hidden ? d = e : e.hasAttribute("data-description") ? r.push(e) : e.classList.contains(M) ? (l = n(e, "data-color") === "success" || !e.clientHeight, u.push(e), r.unshift(e)) : e instanceof HTMLParagraphElement && (r.some((C) => C.contains(e)) || r.push(e));
+      for (const e of a.getElementsByTagName("*"))
+        e instanceof HTMLLabelElement ? i.push(e) : e instanceof h ? c = e : x(e) && !e.hidden ? d = e : e.hasAttribute("data-description") ? r.push(e) : e.classList.contains(H) ? (l = n(e, "data-color") === "success" || !e.clientHeight, f.push(e), r.unshift(e)) : e instanceof HTMLParagraphElement && (r.some((I) => I.contains(e)) || r.push(e));
       if (d) {
-        for (const e of i) e.htmlFor = b(d);
-        if (o && n(s, "data-validation") === "form") {
+        for (const e of i) e.htmlFor = p(d);
+        if (o && n(a, "data-validation") === "form") {
           l = d.matches(":valid");
-          for (const e of u) n(e, "hidden", l ? "" : null);
+          for (const e of f) n(e, "hidden", l ? "" : null);
         }
-        H(c), S(d), L(d), n(d, "aria-describedby", r.map(b).join(" ") || null), n(d, "aria-invalid", `${!l}`);
+        N(c), E(d), T(d), n(d, "aria-describedby", r.map(p).join(" ") || null), n(d, "aria-invalid", `${!l}`);
       }
     }
 }
-function L(t) {
+function T(t) {
   t instanceof HTMLTextAreaElement && (t.style.setProperty("--mtds-textarea-height", "auto"), t.style.setProperty(
     "--mtds-textarea-height",
     `${t.scrollHeight}px`
   ));
 }
-function H(t) {
-  const { control: o, list: s } = t || {};
-  if (t && s && o && !t.hasAttribute("data-sr-added")) {
+function N(t) {
+  const { control: o, list: a } = t || {};
+  if (t && a && !t.hasAttribute("data-sr-added")) {
     const i = window.getComputedStyle(t);
-    n(t, "data-sr-added", a(i, "combobox-added")), n(t, "data-sr-empty", a(i, "combobox-empty")), n(t, "data-sr-found", a(i, "combobox-found")), n(t, "data-sr-invalid", a(i, "combobox-invalid")), n(t, "data-sr-of", a(i, "combobox-of")), n(t, "data-sr-remove", a(i, "combobox-remove")), n(t, "data-sr-removed", a(i, "combobox-removed")), n(s, "data-sr-plural", a(i, "datalist-plural")), n(s, "data-sr-singular", a(i, "datalist-singular")), n(s, "popover", "manual"), n(o, "popovertarget", b(s));
+    n(t, "data-sr-added", s(i, "combobox-added")), n(t, "data-sr-empty", s(i, "combobox-empty")), n(t, "data-sr-found", s(i, "combobox-found")), n(t, "data-sr-invalid", s(i, "combobox-invalid")), n(t, "data-sr-of", s(i, "combobox-of")), n(t, "data-sr-remove", s(i, "combobox-remove")), n(t, "data-sr-removed", s(i, "combobox-removed")), n(a, "data-sr-plural", s(i, "datalist-plural")), n(a, "data-sr-singular", s(i, "datalist-singular"));
   }
+  a && o && !a.hasAttribute("popover") && (n(a, "popover", "manual"), n(o, "popovertarget", p(a)));
 }
-function S(t) {
-  const o = t?.nextElementSibling, s = o && n(o, "data-count");
-  if (o && s) {
-    const i = Number(s) - t.value.length, r = i < 0, u = n(o, "aria-live") === "polite", c = window.getComputedStyle(o || t), d = a(c, "count-over"), l = a(c, "count-under");
-    if (u !== r) {
+function E(t) {
+  const o = t?.nextElementSibling, a = o && n(o, "data-count");
+  if (o && a) {
+    const i = Number(a) - t.value.length, r = i < 0, f = n(o, "aria-live") === "polite", c = window.getComputedStyle(o || t), d = s(c, "count-over"), l = s(c, "count-under");
+    if (f !== r) {
       n(o, "aria-live", r ? "polite" : "off");
       for (const e of y) o.classList.toggle(e, r);
     }
@@ -47,32 +48,29 @@ function S(t) {
     );
   }
 }
-function N({ target: t, newState: o }) {
-  if (t instanceof E) {
+function $({ target: t, newState: o }) {
+  if (t instanceof S) {
     const i = t.getRootNode()?.querySelector(
       `[popovertarget="${t.id}"]`
     );
-    o === "closed" ? m(t, !1) : i && (t.style.width = `${i.clientWidth}px`, m(t, i, n(t, "data-position") ?? "bottom", !0));
+    o === "closed" ? b(t, !1) : i && (t.style.width = `${i.clientWidth}px`, b(t, i, n(t, "data-position") ?? "bottom", !0));
   }
 }
-function $({ target: t }) {
-  if (x(t)) {
-    S(t), L(t);
-    const o = t.hasAttribute("list") && t.list;
-    o && setTimeout(() => {
-      m(o, t, n(o, "data-position") ?? "bottom", !0);
-    }, 10);
-  }
+function D(t) {
+  x(t.target) && (E(t.target), T(t.target), C(t));
 }
-function w(t) {
-  const o = t.target?.closest?.(`.${h}`);
-  t.type === "invalid" && o && t.preventDefault(), T(document.getElementsByClassName(h), !0);
+function P(t) {
+  const o = t.target?.closest?.(`.${g}`);
+  t.type === "invalid" && o && t.preventDefault(), L(document.getElementsByClassName(g), !0);
 }
-function D({ target: t }) {
-  const o = t instanceof g && t.list;
-  o && !o?.hidden && setTimeout(() => m(o, t, 2, !0), 10);
+function C({ target: t }) {
+  const o = (t instanceof h || t instanceof HTMLInputElement) && t.list;
+  if (o && !o?.hidden) {
+    const a = n(o, "data-position") ?? "bottom";
+    setTimeout(() => b(o, t, a, !0), 10);
+  }
 }
-I(() => {
-  A(document.documentElement, h, T), f(document, "comboboxbeforeselect", D, p), f(document, "input", $, p), f(document, "invalid,submit", w, !0), f(document, "toggle", N, p);
+M(() => {
+  A(document.documentElement, g, L), m(document, "comboboxbeforeselect", C, u), m(document, "input", D, u), m(document, "invalid,submit", P, !0), m(document, "toggle", $, u);
 });
 //# sourceMappingURL=field-observer.js.map

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\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];\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\nfunction handleMutation(fields: HTMLCollectionOf<Element>, validate?: boolean) {\n\tfor (const field of fields)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descs: Element[] = [];\n\t\t\tconst valids: 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\")) descs.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\tvalids.push(el);\n\t\t\t\t\tdescs.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescs.some((desc) => desc.contains(el)) || descs.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\tfor (const el of valids) attr(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\", descs.map(useId).join(\" \") || null); // Remove if empty\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\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 && control && !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\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 handleToggle({ target: el, newState }: Event & { newState?: string }) {\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\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\tanchorPosition(el, anchor, attr(el, \"data-position\") ?? \"bottom\", true);\n\t\t}\n\t}\n}\n// Update when typing\nfunction handleInput({ target: el }: Event) {\n\tif (isInputLike(el)) {\n\t\trenderCounter(el);\n\t\trenderTextareaSize(el);\n\n\t\t// Reposition list datalist // TODO Enhance by using style.bottom?\n\t\tconst list = el.hasAttribute(\"list\") && el.list;\n\t\tif (list)\n\t\t\tsetTimeout(() => {\n\t\t\t\tanchorPosition(list, el, attr(list, \"data-position\") ?? \"bottom\", true);\n\t\t\t}, 10);\n\t}\n}\n\nfunction handleValdiation(event: Event) {\n\tconst field = (event.target as Element)?.closest?.(`.${CSS_FIELD}`);\n\n\tif (event.type === \"invalid\" && field) event.preventDefault(); // Prevent browsers from showing default validation bubbles\n\thandleMutation(document.getElementsByClassName(CSS_FIELD), true); // Update state\n}\n\n// Position combobox when changing content\nfunction handleSelect({ target: el }: Event) {\n\tconst list = el instanceof UHTMLComboboxElement && el.list;\n\tif (list && !list?.hidden)\n\t\tsetTimeout(() => anchorPosition(list, el, 2, true), 10); // Reposition list if not hidden\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELD, handleMutation);\n\ton(document, \"comboboxbeforeselect\", handleSelect, QUICK_EVENT);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid,submit\", handleValdiation, true); // Use capture as invalid and submit does not bubble\n\ton(document, \"toggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n});\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","getText","style","key","handleMutation","fields","validate","field","labels","descs","valids","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","control","list","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleToggle","newState","UHTMLDataListElement","anchor","anchorPosition","handleInput","handleValdiation","event","handleSelect","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\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];\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\nfunction handleMutation(fields: HTMLCollectionOf<Element>, validate?: boolean) {\n\tfor (const field of fields)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descs: Element[] = [];\n\t\t\tconst valids: 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\")) descs.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\tvalids.push(el);\n\t\t\t\t\tdescs.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescs.some((desc) => desc.contains(el)) || descs.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\tfor (const el of valids) attr(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\", descs.map(useId).join(\" \") || null); // Remove if empty\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\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 handleToggle({ target: el, newState }: Event & { newState?: string }) {\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\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\tanchorPosition(el, anchor, attr(el, \"data-position\") ?? \"bottom\", true);\n\t\t}\n\t}\n}\n// Update when typing\nfunction handleInput(event: Event) {\n\tif (isInputLike(event.target)) {\n\t\trenderCounter(event.target);\n\t\trenderTextareaSize(event.target);\n\t\thandleDatalistPosition(event); // Reposition list datalist // TODO Enhance by using style.bottom?\n\t}\n}\n\nfunction handleValdiation(event: Event) {\n\tconst field = (event.target as Element)?.closest?.(`.${CSS_FIELD}`);\n\n\tif (event.type === \"invalid\" && field) event.preventDefault(); // Prevent browsers from showing default validation bubbles\n\thandleMutation(document.getElementsByClassName(CSS_FIELD), true); // Update state\n}\n\n// Position combobox when changing content\nfunction handleDatalistPosition({ target: el }: Event) {\n\tconst list =\n\t\t(el instanceof UHTMLComboboxElement || el instanceof HTMLInputElement) &&\n\t\tel.list;\n\tif (list && !list?.hidden) {\n\t\tconst position = attr(list, \"data-position\") ?? \"bottom\";\n\t\tsetTimeout(() => anchorPosition(list, el, position, true), 10); // Reposition list if not hidden\n\t}\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELD, handleMutation);\n\ton(document, \"comboboxbeforeselect\", handleDatalistPosition, QUICK_EVENT);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid,submit\", handleValdiation, true); // Use capture as invalid and submit does not bubble\n\ton(document, \"toggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n});\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","getText","style","key","handleMutation","fields","validate","field","labels","descs","valids","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","control","list","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleToggle","newState","UHTMLDataListElement","anchor","anchorPosition","handleInput","event","handleDatalistPosition","handleValdiation","position","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}

package/mtds/field/field.d.ts

@@ -1,5 +1,6 @@
 import { ReactUcombobox, UHTMLComboboxElement } from '@u-elements/u-combobox';
 import { JSX } from 'react';
+import { InputProps } from '../react';
 import { PolymorphicComponentPropWithRef } from '../react-types';
 import { AnchorPosition } from '../utils';
 type FieldBaseProps = {
@@ -34,18 +35,16 @@ export type FieldComboboxSelected = {
 export type FieldComboboxProps = ReactUcombobox & {
     "data-creatable"?: boolean;
     "data-multiple"?: boolean;
-    "data-nofilter"?: boolean;
     onAfterChange?: (e: CustomEvent<HTMLDataElement>) => void;
-    onBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void;
     onAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void;
-    onBeforeSelect?: (e: CustomEvent<HTMLDataElement>) => void;
+    onBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void;
     onBeforeMatch?: (e: CustomEvent<HTMLOptionElement>) => void;
+    onBeforeSelect?: (e: CustomEvent<HTMLDataElement>) => void;
     onSelectedChange?: (selected: FieldComboboxSelected) => void;
-    disabled?: boolean;
     options?: FieldComboboxSelected;
-    readOnly?: boolean;
     selected?: FieldComboboxSelected;
-};
+} & Pick<InputProps, "disabled" | "readOnly" | "placeholder" | "type" | "name"> & // Allow input props to be passed down
+Pick<FieldDatalistProps, "data-position" | "data-nofilter">;
 export declare const Field: FieldComponent & {
     Affixes: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Combobox: React.ForwardRefExoticComponent<Omit<FieldComboboxProps, "ref"> & React.RefAttributes<UHTMLComboboxElement>>;

package/mtds/field/field.js

@@ -1,6 +1,6 @@
-import { jsx as t, Fragment as R, jsxs as H } from "react/jsx-runtime";
-import { clsx as W } from "../external/clsx/dist/clsx.js";
-import { forwardRef as F, useRef as A, useImperativeHandle as q, useEffect as B } from "react";
+import { jsx as t, Fragment as L, jsxs as j } from "react/jsx-runtime";
+import { clsx as k } from "../external/clsx/dist/clsx.js";
+import { forwardRef as g, useRef as I, useImperativeHandle as K, useEffect as M } from "react";
 import "../alert/alert.js";
 import "../app/app.js";
 import "../avatar/avatar.js";
@@ -14,8 +14,8 @@ import "../dialog/dialog.js";
 import "../divider/divider.js";
 import "../errorsummary/errorsummary.js";
 import "../fieldset/fieldset.js";
-import { HelpText as G } from "../helptext/helptext.js";
-import { Input as J } from "../input/input.js";
+import { HelpText as Q } from "../helptext/helptext.js";
+import { Input as U } from "../input/input.js";
 import "../layout/layout.js";
 import "../link/link.js";
 import "../logo/logo.js";
@@ -33,122 +33,150 @@ import "../typography/typography.js";
 import "../validation/validation.js";
 import v from "../styles.module.css.js";
 import { toCustomElementProps as N } from "../utils.js";
-const z = (n) => typeof n == "string" ? { label: n, value: n } : n, K = F(function({
+const P = (i) => typeof i == "string" ? { label: i, value: i } : i, V = g(function({
   "data-size": e,
   as: o,
-  className: l,
-  count: d,
-  description: p,
-  error: g,
-  helpText: C,
-  helpTextLabel: y,
-  label: O,
-  prefix: f,
-  style: j,
-  suffix: u,
-  validation: b,
-  ...s
+  className: a,
+  count: m,
+  description: c,
+  error: F,
+  helpText: y,
+  helpTextLabel: C,
+  label: f,
+  prefix: u,
+  style: D,
+  suffix: b,
+  validation: H,
+  ...r
 }, h) {
-  const m = o || "div", x = !!u || !!f, a = b || g, i = {
+  const p = o || "div", E = !!b || !!u, W = H || F, O = {
     "data-size": e,
-    className: W(v.field, l),
-    style: j
+    className: k(v.field, a),
+    style: D
   };
-  return o === "select" && !s.children && Object.assign(s, {
-    children: /* @__PURE__ */ t(R, { children: s.options?.map(z).map(({ label: r, value: c }) => /* @__PURE__ */ t("option", { value: c, children: r }, c)) })
-  }), o ? /* @__PURE__ */ H("div", { ...i, children: [
-    !!O && /* @__PURE__ */ t("label", { suppressHydrationWarning: !0, children: O }),
-    !!C && /* @__PURE__ */ t(G, { "aria-label": y, children: C }),
-    !!p && /* @__PURE__ */ t("p", { children: p }),
-    x ? /* @__PURE__ */ H(I, { children: [
-      !!f && /* @__PURE__ */ t("span", { children: f }),
-      /* @__PURE__ */ t(m, { className: v.input, ref: h, ...s }),
-      !!u && /* @__PURE__ */ t("span", { children: u })
+  return o === "select" && !r.children && Object.assign(r, {
+    children: /* @__PURE__ */ t(L, { children: r.options?.map(P).map(({ label: x, value: d }) => /* @__PURE__ */ t("option", { value: d, children: x }, d)) })
+  }), o ? /* @__PURE__ */ j("div", { ...O, children: [
+    !!f && /* @__PURE__ */ t("label", { suppressHydrationWarning: !0, children: f }),
+    !!y && /* @__PURE__ */ t(Q, { "aria-label": C, children: y }),
+    !!c && /* @__PURE__ */ t("p", { suppressHydrationWarning: !0, children: c }),
+    E ? /* @__PURE__ */ j(S, { children: [
+      !!u && /* @__PURE__ */ t("span", { children: u }),
+      /* @__PURE__ */ t(
+        p,
+        {
+          className: v.input,
+          suppressHydrationWarning: !0,
+          ref: h,
+          ...r
+        }
+      ),
+      !!b && /* @__PURE__ */ t("span", { children: b })
     ] }) : /* @__PURE__ */ t(
-      m,
+      p,
       {
         className: typeof o == "string" ? v.input : void 0,
         suppressHydrationWarning: !0,
         ref: h,
-        ...s
+        ...r
       }
     ),
-    !!a && /* @__PURE__ */ t("div", { className: v.validation, children: a }),
-    !!d && /* @__PURE__ */ t("p", { "data-count": d })
-  ] }) : /* @__PURE__ */ t("div", { ref: h, ...i, ...s });
-}), I = F(
-  function({ className: e, ...o }, l) {
-    return /* @__PURE__ */ t("div", { className: W(v.affixes, e), ref: l, ...o });
+    !!W && /* @__PURE__ */ t("div", { suppressHydrationWarning: !0, className: v.validation, children: W }),
+    !!m && /* @__PURE__ */ t("p", { suppressHydrationWarning: !0, "data-count": m })
+  ] }) : /* @__PURE__ */ t("div", { ref: h, ...O, ...r });
+}), S = g(
+  function({ className: e, ...o }, a) {
+    return /* @__PURE__ */ t("div", { className: k(v.affixes, e), ref: a, ...o });
   }
-), L = F(
-  function(e, o) {
-    return /* @__PURE__ */ t("u-datalist", { ref: o, ...N(e) });
+), T = g(
+  function({ "data-nofilter": e, ...o }, a) {
+    return /* @__PURE__ */ t(
+      "u-datalist",
+      {
+        "data-nofilter": !!e || void 0,
+        ref: a,
+        ...N(o)
+      }
+    );
   }
-), k = F(
+), q = g(
   function(e, o) {
     return /* @__PURE__ */ t("u-option", { ref: o, ...N(e) });
   }
-), M = F(
+), X = g(
   function({
     "data-multiple": e,
     "data-nofilter": o,
-    onAfterChange: l,
-    onBeforeChange: d,
-    onAfterSelect: p,
-    onBeforeSelect: g,
-    onBeforeMatch: C,
-    onSelectedChange: y,
-    children: O,
-    disabled: f,
-    options: j,
-    readOnly: u,
-    selected: b,
-    ...s
-  }, h) {
-    const m = A(null), x = A(y);
-    return x.current = y, l && (p = l, console.warn(
+    "data-position": a,
+    onAfterChange: m,
+    onAfterSelect: c,
+    onBeforeChange: F,
+    onBeforeMatch: y,
+    onBeforeSelect: C,
+    onSelectedChange: f,
+    children: u,
+    disabled: D,
+    name: b,
+    options: H,
+    placeholder: r,
+    readOnly: h,
+    selected: p,
+    type: E,
+    ...W
+  }, O) {
+    const x = I(null), d = I(f);
+    return d.current = f, m && (c = m, console.warn(
       "Combobox onAfterChange is deprecated, use onAfterSelect instead."
-    )), d && (g = d, console.warn(
+    )), F && (C = F, console.warn(
       "Combobox onBeforeChange is deprecated, use onBeforeSelect instead."
-    )), q(h, () => m.current), B(() => {
-      const a = m.current, i = (r) => {
-        const c = x.current;
-        if (!x) return;
-        r.preventDefault();
-        const { isConnected: P, textContent: S, value: D } = r.detail, E = S?.trim() || "", w = b || [];
-        c?.(P ? w.filter((T) => T.value !== D) : e ? [...w, { value: D, label: E }] : [{ value: D, label: E }]);
+    )), K(O, () => x.current), M(() => {
+      const l = x.current, s = (n) => {
+        const w = d.current;
+        if (!d) return;
+        n.preventDefault();
+        const { isConnected: B, textContent: G, value: A } = n.detail, R = G?.trim() || "", z = p || [];
+        w?.(B ? z.filter((J) => J.value !== A) : e ? [...z, { value: A, label: R }] : [{ value: A, label: R }]);
       };
-      return a?.addEventListener("comboboxbeforeselect", i), () => a?.removeEventListener("comboboxbeforeselect", i);
-    }, [e, b]), /* @__PURE__ */ H(
+      return l?.addEventListener("comboboxbeforeselect", s), () => l?.removeEventListener("comboboxbeforeselect", s);
+    }, [e, p]), /* @__PURE__ */ j(
       "u-combobox",
       {
+        "data-multiple": e || void 0,
         ...N({
-          "data-multiple": e,
-          oncomboboxbeforeselect: g,
-          oncomboboxbeforematch: C,
-          oncomboboxafterselect: p,
-          ref: m,
-          ...s
+          oncomboboxbeforeselect: C,
+          oncomboboxbeforematch: y,
+          oncomboboxafterselect: c,
+          ref: x,
+          ...W
         }),
         children: [
-          b?.map(({ children: a, label: i, value: r }) => /* @__PURE__ */ t("data", { value: r, suppressHydrationWarning: !0, children: a ?? i }, r)),
-          O || /* @__PURE__ */ H(R, { children: [
-            /* @__PURE__ */ t(J, { disabled: f, readOnly: u }),
+          p?.map(({ children: l, label: s, value: n }) => /* @__PURE__ */ t("data", { value: n, suppressHydrationWarning: !0, children: l ?? s }, n)),
+          u || /* @__PURE__ */ j(L, { children: [
+            /* @__PURE__ */ t(
+              U,
+              {
+                name: b,
+                type: E,
+                disabled: D,
+                readOnly: h,
+                placeholder: r
+              }
+            ),
             /* @__PURE__ */ t("del", { ...N({ "aria-label": "Fjern tekst" }) })
           ] }),
-          !!j && /* @__PURE__ */ t(L, { "data-nofilter": o || void 0, children: j.map(z).map(({ children: a, label: i, value: r }) => /* @__PURE__ */ t(k, { value: r, label: i, children: a ?? i }, r)) })
+          !!H && /* @__PURE__ */ t(T, { "data-nofilter": o, "data-position": a, children: H.map(P).map(({ children: l, label: s, value: n }) => /* @__PURE__ */ t(q, { value: n, label: s, children: l ?? s }, n)) })
         ]
       }
     );
   }
-), Dt = Object.assign(K, {
-  Affixes: I,
-  Combobox: M,
-  Datalist: L,
-  Option: k
+), At = Object.assign(V, {
+  Affixes: S,
+  Combobox: X,
+  Datalist: T,
+  Option: q
 });
 export {
-  Dt as Field,
-  K as FieldComp
+  At as Field,
+  V 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":["import type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\nimport clsx from \"clsx\";\nimport {\n\tforwardRef,\n\ttype JSX,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from \"react\";\nimport { HelpText, Input } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { type AnchorPosition, 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\tvalue?: React.ComponentPropsWithRef<\"input\">[\"value\"];\n\tonInput?: (\n\t\te: React.ChangeEvent<\n\t\t\tHTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n\t\t>,\n\t) => void;\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\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>{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 className={styles.input} ref={ref} {...rest} />\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 && <div className={styles.validation}>{valid}</div>}\n\t\t\t{!!count && <p 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\"?: AnchorPosition;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(props, ref) {\n\t\treturn <u-datalist ref={ref} {...toCustomElementProps(props)} />;\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 = ReactUcombobox & {\n\t\"data-creatable\"?: boolean;\n\t\"data-multiple\"?: boolean;\n\t\"data-nofilter\"?: boolean;\n\tonAfterChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeMatch?: (e: CustomEvent<HTMLOptionElement>) => void; // Custom event to handle before change\n\tonSelectedChange?: (selected: FieldComboboxSelected) => void; // Allow onChange to be a function that returns void\n\tdisabled?: boolean; // Allow disabled prop to be passed down\n\toptions?: FieldComboboxSelected;\n\treadOnly?: boolean; // Allow disabled prop to be passed down\n\tselected?: FieldComboboxSelected; // Allow value to be a string or an array of strings for multiple select\n};\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\tonAfterChange,\n\t\t\tonBeforeChange,\n\t\t\tonAfterSelect,\n\t\t\tonBeforeSelect,\n\t\t\tonBeforeMatch,\n\t\t\tonSelectedChange,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\toptions,\n\t\t\treadOnly,\n\t\t\tselected,\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\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\t{...toCustomElementProps({\n\t\t\t\t\t\"data-multiple\": multiple,\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 disabled={disabled} readOnly={readOnly} />\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 || undefined}>\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 const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n});\n"],"names":["toOption","o","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","props","toCustomElementProps","FieldOption","FieldCombobox","multiple","nofilter","onAfterChange","onBeforeChange","onAfterSelect","onBeforeSelect","onBeforeMatch","onSelectedChange","children","disabled","options","readOnly","selected","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":["import type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\nimport clsx from \"clsx\";\nimport {\n\tforwardRef,\n\ttype JSX,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from \"react\";\nimport { HelpText, Input, type InputProps } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { type AnchorPosition, 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\tvalue?: React.ComponentPropsWithRef<\"input\">[\"value\"];\n\tonInput?: (\n\t\te: React.ChangeEvent<\n\t\t\tHTMLInputElement | HTMLSelectElement | HTMLTextAreaElement\n\t\t>,\n\t) => void;\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\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\"?: AnchorPosition;\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 = ReactUcombobox & {\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\" | \"readOnly\" | \"placeholder\" | \"type\" | \"name\"\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 const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n});\n"],"names":["toOption","o","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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"}