@mattilsynet/design 1.2.2 → 1.3.0

package/mtds/field/field-observer.js

@@ -1,18 +1,21 @@
-import { UHTMLComboboxElement as C } from "../external/@u-elements/u-combobox/dist/u-combobox.js";
-import { UHTMLDataListElement as b } from "../external/@u-elements/u-datalist/dist/u-datalist.js";
-import p from "../styles.module.css.js";
-import { onLoaded as I, onMutation as P, on as c, QUICK_EVENT as f, isInputLike as g, attr as s, useId as u, anchorPosition as m } from "../utils.js";
-const h = p.field.split(" ")[0], x = "--mtds-text-count-over", M = "--mtds-text-count-under", v = p.validation.split(" "), _ = v[0];
-function H(t) {
-  for (const e of t)
-    if (e.isConnected) {
-      const a = [], o = [];
-      let l = null, i = null, r = !0;
-      for (const n of e.getElementsByTagName("*"))
-        n instanceof HTMLLabelElement ? a.push(n) : n instanceof C ? l = n : g(n) ? i = n : n.hasAttribute("data-description") ? o.push(n) : n.classList.contains(_) ? (r = s(n, "data-color") === "success" || !n.clientWidth || !n.clientHeight, o.unshift(n)) : n instanceof HTMLParagraphElement && (o.some((d) => d.contains(n)) || o.push(n));
-      if (i) {
-        for (const n of a) n.htmlFor = u(i);
-        N(l), S(i), y(i), s(i, "aria-describedby", o.map(u).join(" ") || null), s(i, "aria-invalid", `${!r}`);
+import { UHTMLComboboxElement as p } 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 h from "../styles.module.css.js";
+import { onLoaded as C, onMutation as L, on as l, QUICK_EVENT as m, isInputLike as g, attr as s, useId as b, anchorPosition as u } from "../utils.js";
+const v = h.field.split(" ")[0], I = "--mtds-text-count-over", P = "--mtds-text-count-under", x = h.validation.split(" "), M = x[0], a = (t, o) => {
+  var n;
+  return ((n = t.getPropertyValue(`--mtds-text-${o}`)) == null ? void 0 : n.slice(1, -1)) || "";
+};
+function _(t) {
+  for (const o of t)
+    if (o.isConnected) {
+      const n = [], i = [];
+      let c = null, r = null, d = !0;
+      for (const e of o.getElementsByTagName("*"))
+        e instanceof HTMLLabelElement ? n.push(e) : e instanceof p ? c = e : g(e) ? r = e : e.hasAttribute("data-description") ? i.push(e) : e.classList.contains(M) ? (d = s(e, "data-color") === "success" || !e.clientWidth || !e.clientHeight, i.unshift(e)) : e instanceof HTMLParagraphElement && (i.some((f) => f.contains(e)) || i.push(e));
+      if (r) {
+        for (const e of n) e.htmlFor = b(r);
+        A(c), S(r), y(r), s(r, "aria-describedby", i.map(b).join(" ") || null), s(r, "aria-invalid", `${!d}`);
       }
     }
 }
@@ -22,42 +25,46 @@ function y(t) {
     `${t.scrollHeight}px`
   ));
 }
-function N(t) {
-  if (!t) return;
-  const e = t.querySelector("u-datalist,datalist"), a = window.getComputedStyle(t), o = (l) => a.getPropertyValue(`--mtds-text-${l}`);
-  e && (s(e, "data-sr-plural", o("datalist-plural")), s(e, "data-sr-singular", o("datalist-singular")), s(e, "popover", "manual")), s(t, "data-sr-added", o("combobox-added")), s(t, "data-sr-empty", o("combobox-empty")), s(t, "data-sr-found", o("combobox-found")), s(t, "data-sr-invalid", o("combobox-invalid")), s(t, "data-sr-of", o("combobox-of")), s(t, "data-sr-remove", o("combobox-remove")), s(t, "data-sr-removed", o("combobox-removed")), s(t, "data-sr-removed", o("combobox-removed"));
+function A(t) {
+  var n;
+  if (!(t != null && t.list) || (n = t.list) != null && n.hasAttribute("popover")) return;
+  const o = window.getComputedStyle(t);
+  s(t, "data-sr-added", a(o, "combobox-added")), s(t, "data-sr-empty", a(o, "combobox-empty")), s(t, "data-sr-found", a(o, "combobox-found")), s(t, "data-sr-invalid", a(o, "combobox-invalid")), s(t, "data-sr-of", a(o, "combobox-of")), s(t, "data-sr-remove", a(o, "combobox-remove")), s(t, "data-sr-removed", a(o, "combobox-removed")), s(t.list, "data-sr-plural", a(o, "datalist-plural")), s(t.list, "data-sr-singular", a(o, "datalist-singular")), s(t.list, "popover", "manual");
 }
 function S(t) {
-  var o, l;
-  const e = t == null ? void 0 : t.nextElementSibling, a = e && s(e, "data-count");
-  if (e && a) {
-    const i = Number(a) - t.value.length, r = i < 0, n = s(e, "aria-live") === "polite", d = window.getComputedStyle(e || t), E = ((o = d.getPropertyValue(x)) == null ? void 0 : o.slice(1, -1)) || "", L = ((l = d.getPropertyValue(M)) == null ? void 0 : l.slice(1, -1)) || "";
-    if (n !== r) {
-      s(e, "aria-live", r ? "polite" : "off");
-      for (const T of v) e.classList.toggle(T, r);
+  const o = t == null ? void 0 : t.nextElementSibling, n = o && s(o, "data-count");
+  if (o && n) {
+    const i = Number(n) - t.value.length, c = i < 0, r = s(o, "aria-live") === "polite", d = window.getComputedStyle(o || t), e = a(d, I), f = a(d, P);
+    if (r !== c) {
+      s(o, "aria-live", c ? "polite" : "off");
+      for (const T of x) o.classList.toggle(T, c);
     }
-    e.textContent = (r ? E : L).replace(
+    o.textContent = (c ? e : f).replace(
       "%d",
       `${Math.abs(i)}`
     );
   }
 }
-function R({ target: t, newState: e }) {
-  if (t instanceof b) {
-    const a = t.getRootNode(), o = a == null ? void 0 : a.querySelector(
+function H({ target: t, newState: o }) {
+  if (t instanceof E) {
+    const n = t.getRootNode(), i = n == null ? void 0 : n.querySelector(
       `[popovertarget="${t.id}"]`
     );
-    e === "closed" ? m(t, !1) : o && (t.style.width = `${o.clientWidth}px`, m(t, o, "bottom", !0));
+    o === "closed" ? u(t, !1) : i && (t.style.width = `${i.clientWidth}px`, u(t, i, "bottom", !0));
   }
 }
-function V({ target: t }) {
+function N({ target: t }) {
   g(t) && (S(t), y(t));
 }
-function $(t) {
-  var e, a;
-  (a = (e = t.target) == null ? void 0 : e.closest) != null && a.call(e, `.${h}`) && t.preventDefault();
+function R(t) {
+  var o, n;
+  (n = (o = t.target) == null ? void 0 : o.closest) != null && n.call(o, `.${v}`) && t.preventDefault();
 }
-I(() => {
-  P(document.documentElement, h, H), c(document, "input", V, f), c(document, "invalid", $, !0), c(document, "toggle", R, f);
+function $({ target: t }) {
+  const o = t instanceof p && t.list;
+  o && !(o != null && o.hidden) && setTimeout(() => u(o, t, 2, !0), 10);
+}
+C(() => {
+  L(document.documentElement, v, _), l(document, "beforechange", $, m), l(document, "input", N, m), l(document, "invalid", R, !0), l(document, "toggle", H, m);
 });
 //# 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\tQUICK_EVENT,\n\tanchorPosition,\n\tattr,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_PROPERTY_OVER = \"--mtds-text-count-over\";\nconst CSS_PROPERTY_UNDER = \"--mtds-text-count-under\";\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\n\nfunction handleMutation(fields: HTMLCollectionOf<Element>) {\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\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)) 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 =\n\t\t\t\t\t\tattr(el, \"data-color\") === \"success\" ||\n\t\t\t\t\t\t!el.clientWidth ||\n\t\t\t\t\t\t!el.clientHeight; // Only set invalid if Validation is visible\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\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\nfunction renderCombobox(combobox: UHTMLComboboxElement | null) {\n\tif (!combobox) return;\n\n\t// Setup translations from CSS custom properties\n\tconst list = combobox.querySelector(\"u-datalist,datalist\");\n\tconst style = window.getComputedStyle(combobox);\n\tconst i11n = (key: string) => style.getPropertyValue(`--mtds-text-${key}`);\n\n\tif (list) {\n\t\tattr(list, \"data-sr-plural\", i11n(\"datalist-plural\"));\n\t\tattr(list, \"data-sr-singular\", i11n(\"datalist-singular\"));\n\t\tattr(list, \"popover\", \"manual\");\n\t}\n\n\tattr(combobox, \"data-sr-added\", i11n(\"combobox-added\"));\n\tattr(combobox, \"data-sr-empty\", i11n(\"combobox-empty\"));\n\tattr(combobox, \"data-sr-found\", i11n(\"combobox-found\"));\n\tattr(combobox, \"data-sr-invalid\", i11n(\"combobox-invalid\"));\n\tattr(combobox, \"data-sr-of\", i11n(\"combobox-of\"));\n\tattr(combobox, \"data-sr-remove\", i11n(\"combobox-remove\"));\n\tattr(combobox, \"data-sr-removed\", i11n(\"combobox-removed\"));\n\tattr(combobox, \"data-sr-removed\", i11n(\"combobox-removed\"));\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 = style.getPropertyValue(CSS_PROPERTY_OVER)?.slice(1, -1) || \"\"; // slice to trim quotes\n\t\tconst under =\n\t\t\tstyle.getPropertyValue(CSS_PROPERTY_UNDER)?.slice(1, -1) || \"\"; // slice to trim quotes\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, \"bottom\", true);\n\t\t}\n\t}\n}\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\n\t}\n}\n\n// Prevent browsers from showing default validation bubbles\nfunction handleInvalid(event: Event) {\n\tif ((event.target as Element)?.closest?.(`.${CSS_FIELD}`))\n\t\tevent.preventDefault();\n}\n\nonLoaded(() => {\n\tonMutation(document.documentElement, CSS_FIELD, handleMutation);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid\", handleInvalid, true); // Use capture as invalid does noe bubble\n\ton(document, \"toggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n});\n"],"names":["CSS_FIELD","styles","CSS_PROPERTY_OVER","CSS_PROPERTY_UNDER","CSS_VALIDATIONS","CSS_VALIDATION","handleMutation","fields","field","labels","descs","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","list","style","i11n","key","limit","remainder","nextInvalid","prevInvalid","over","_a","under","_b","css","handleToggle","newState","UHTMLDataListElement","root","anchor","anchorPosition","handleInput","target","handleInvalid","event","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\tQUICK_EVENT,\n\tanchorPosition,\n\tattr,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_PROPERTY_OVER = \"--mtds-text-count-over\";\nconst CSS_PROPERTY_UNDER = \"--mtds-text-count-under\";\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>) {\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\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)) 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 =\n\t\t\t\t\t\tattr(el, \"data-color\") === \"success\" ||\n\t\t\t\t\t\t!el.clientWidth ||\n\t\t\t\t\t\t!el.clientHeight; // Only set invalid if Validation is visible\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\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\tif (!el?.list || el.list?.hasAttribute(\"popover\")) return;\n\tconst style = window.getComputedStyle(el);\n\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\tattr(el.list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\tattr(el.list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\tattr(el.list, \"popover\", \"manual\");\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, CSS_PROPERTY_OVER);\n\t\tconst under = getText(style, CSS_PROPERTY_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, \"bottom\", true);\n\t\t}\n\t}\n}\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\n\t}\n}\n\n// Prevent browsers from showing default validation bubbles\nfunction handleInvalid(event: Event) {\n\tif ((event.target as Element)?.closest?.(`.${CSS_FIELD}`))\n\t\tevent.preventDefault();\n}\n\n// Position combobox when changing content\nfunction handleBeforeChange({ 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, \"beforechange\", handleBeforeChange, QUICK_EVENT);\n\ton(document, \"input\", handleInput, QUICK_EVENT);\n\ton(document, \"invalid\", handleInvalid, true); // Use capture as invalid does noe bubble\n\ton(document, \"toggle\", handleToggle, QUICK_EVENT); // Use capture since toggle does not bubble\n});\n"],"names":["CSS_FIELD","styles","CSS_PROPERTY_OVER","CSS_PROPERTY_UNDER","CSS_VALIDATIONS","CSS_VALIDATION","getText","style","key","_a","handleMutation","fields","field","labels","descs","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleToggle","newState","UHTMLDataListElement","root","anchor","anchorPosition","handleInput","target","handleInvalid","event","_b","handleBeforeChange","list","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}

package/mtds/field/field.d.ts

@@ -24,10 +24,13 @@ export type FieldDatalistProps = React.ComponentPropsWithoutRef<"datalist"> & {
     "data-nofilter"?: boolean;
 };
 export type FieldOptionProps = React.ComponentPropsWithoutRef<"option">;
-export type FieldComboboxProps = ReactUcombobox;
+export type FieldComboboxProps = ReactUcombobox & {
+    "data-multiple"?: boolean;
+    "data-creatable"?: boolean;
+};
 export declare const Field: FieldComponent & {
     Affixes: React.ForwardRefExoticComponent<Omit<FieldProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Combobox: React.ForwardRefExoticComponent<Omit<ReactUcombobox, "ref"> & React.RefAttributes<UHTMLComboboxElement>>;
+    Combobox: React.ForwardRefExoticComponent<Omit<FieldComboboxProps, "ref"> & React.RefAttributes<UHTMLComboboxElement>>;
     Datalist: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>, "ref"> & {
         "data-nofilter"?: boolean;
     } & React.RefAttributes<HTMLDataListElement>>;

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 { type JSX, forwardRef } from \"react\";\nimport { HelpText } from \"../react\";\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?: Array<string | { label: string; value: string }>;\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\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\toptions,\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{options\n\t\t\t\t\t\t?.map((o) => (typeof o === \"string\" ? { label: o, value: o } : o))\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={styles.input}\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\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldProps>(\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};\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\">;\n\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 FieldComboboxProps = ReactUcombobox;\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(props, ref) {\n\t\treturn <u-combobox ref={ref} {...toCustomElementProps(props)} />;\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":["FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","options","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","jsx","Fragment","o","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldCombobox","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 { type JSX, forwardRef } from \"react\";\nimport { HelpText } from \"../react\";\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?: Array<string | { label: string; value: string }>;\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\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\toptions,\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{options\n\t\t\t\t\t\t?.map((o) => (typeof o === \"string\" ? { label: o, value: o } : o))\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={styles.input}\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\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldProps>(\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};\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\">;\n\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 FieldComboboxProps = ReactUcombobox & {\n\t\"data-multiple\"?: boolean;\n\t\"data-creatable\"?: boolean;\n};\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(props, ref) {\n\t\treturn <u-combobox ref={ref} {...toCustomElementProps(props)} />;\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":["FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","options","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","jsx","Fragment","o","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldCombobox","Field"],"mappings":"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"}

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

@@ -163,7 +163,8 @@ export declare const WithCharacterCount: Story;
 export declare const WithCustomDescriptionTag: Story;
 export declare const WithCombobox: Story;
 export declare const WithComboboxMultiple: Story;
-export declare const ReactWithDatalist: Story;
-export declare const ReactWithComboboxMultiple: Story;
 export declare const WithComboboxAPI: Story;
-export declare const WitComboboxCustomFilter: Story;
+export declare const WithComboboxCustomFilter: Story;
+export declare const ReactWithCombobx: Story;
+export declare const ReactWithComboboxMultiple: Story;
+export declare const ReactWithCombobxControlled: Story;

package/mtds/index.d.ts

@@ -1,6 +1,7 @@
 export { UHTMLTabsElement, UHTMLTabElement, UHTMLTabListElement, UHTMLTabPanelElement, } from '@u-elements/u-tabs';
 export { UHTMLComboboxElement } from '@u-elements/u-combobox';
 export { version } from '../package.json';
+export { analytics } from './analytics/analytics';
 export { pagination } from './pagination/pagination-helper';
 export { toggleAppExpanded } from './app/app-observer';
 export declare const styles: {