@mattilsynet/design 1.1.3 → 1.1.4

package/mtds/app/app-observer.js

@@ -1,6 +1,6 @@
 import m from "../styles.module.css.js";
 import { onLoaded as w, onMutation as C, on as c, QUICK_EVENT as p, debounce as T } from "../utils.js";
-import "./app-toggle2.js";
+import "./app-toggle.js";
 const f = m.app.split(" ")[0], P = m.sticky.split(" ")[0], _ = '[data-command="toggle-app-expanded"]', g = `.${f} > dialog,.${f} dialog ~ main`, h = (e) => {
   document.startViewTransition ? document.startViewTransition(e) : e();
 };

package/mtds/app/app-toggle.js

@@ -1,24 +1,12 @@
-const t = `if (
-	typeof window !== "undefined" &&
-	window.CSSStyleSheet &&
-	document.adoptedStyleSheets
-)
-	(() => {
-		const key = "--mtds-app-expanded";
-		const sheet = new CSSStyleSheet();
-
-		document.adoptedStyleSheets.push(sheet);
-		window.mtdsAppToggle = (toggle = true) => {
-			const prev = !window.localStorage.getItem(key)?.includes("false");
-			const next = toggle ? !prev : prev;
-
-			sheet.replaceSync(\`:root { \${key}: var(\${key}--\${next})}\`);
-			window.localStorage.setItem(key, next);
-		};
-		window.mtdsAppToggle(false); // Set and store initial state
-	})();
-`;
-export {
-  t as default
-};
+typeof window < "u" && window.CSSStyleSheet && document.adoptedStyleSheets && (() => {
+  const e = "--mtds-app-expanded", t = new CSSStyleSheet();
+  document.adoptedStyleSheets.push(t), window.mtdsAppToggle = (l = !0) => {
+    var d, n;
+    try {
+      const o = !((d = window.localStorage.getItem(e)) != null && d.includes("false")), S = l ? !o : o;
+      (n = t.replaceSync) == null || n.call(t, `:root { ${e}: var(${e}--${S})}`), window.localStorage.setItem(e, S);
+    } catch {
+    }
+  }, window.mtdsAppToggle(!1);
+})();
 //# sourceMappingURL=app-toggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js?raw"],"sourcesContent":["export default \"if (\\n\\ttypeof window !== \\\"undefined\\\" &&\\n\\twindow.CSSStyleSheet &&\\n\\tdocument.adoptedStyleSheets\\n)\\n\\t(() => {\\n\\t\\tconst key = \\\"--mtds-app-expanded\\\";\\n\\t\\tconst sheet = new CSSStyleSheet();\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsAppToggle = (toggle = true) => {\\n\\t\\t\\tconst prev = !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\t\\t\\tconst next = toggle ? !prev : prev;\\n\\n\\t\\t\\tsheet.replaceSync(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t};\\n\\t\\twindow.mtdsAppToggle(false); // Set and store initial state\\n\\t})();\\n\""],"names":["script"],"mappings":"AAAA,MAAeA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"app-toggle.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (\n\ttypeof window !== \"undefined\" &&\n\twindow.CSSStyleSheet &&\n\tdocument.adoptedStyleSheets\n)\n\t(() => {\n\t\tconst key = \"--mtds-app-expanded\";\n\t\tconst sheet = new CSSStyleSheet();\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsAppToggle = (toggle = true) => {\n\t\t\ttry {\n\t\t\t\tconst prev = !window.localStorage.getItem(key)?.includes(\"false\");\n\t\t\t\tconst next = toggle ? !prev : prev;\n\n\t\t\t\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\n\t\t\t\twindow.localStorage.setItem(key, next);\n\t\t\t} catch (err) {} // LocalStorage is full or replaceSync is not supported\n\t\t};\n\t\twindow.mtdsAppToggle(false); // Set and store initial state\n\t})();\n"],"names":["key","sheet","toggle","_a","_b","prev","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAe;AAEjC,WAAS,mBAAmB,KAAKA,CAAK,GACtC,OAAO,gBAAgB,CAACC,IAAS,OAAS;AAV5C,QAAAC,GAAAC;AAWG,QAAI;AACH,YAAMC,IAAO,GAACF,IAAA,OAAO,aAAa,QAAQH,CAAG,MAA/B,QAAAG,EAAkC,SAAS,WACnDG,IAAOJ,IAAS,CAACG,IAAOA;AAE9B,OAAAD,IAAAH,EAAM,gBAAN,QAAAG,EAAA,KAAAH,GAAoB,WAAWD,CAAG,SAASA,CAAG,KAAKM,CAAI,OACvD,OAAO,aAAa,QAAQN,GAAKM,CAAI;AAAA,IACzC,QAAiB;AAAA,IAAE;AAAA,EAChB,GACD,OAAO,cAAc,EAAK;AAC5B,GAAK;"}

package/mtds/app/app-toggle2.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js"],"sourcesContent":["if (\n\ttypeof window !== \"undefined\" &&\n\twindow.CSSStyleSheet &&\n\tdocument.adoptedStyleSheets\n)\n\t(() => {\n\t\tconst key = \"--mtds-app-expanded\";\n\t\tconst sheet = new CSSStyleSheet();\n\n\t\tdocument.adoptedStyleSheets.push(sheet);\n\t\twindow.mtdsAppToggle = (toggle = true) => {\n\t\t\tconst prev = !window.localStorage.getItem(key)?.includes(\"false\");\n\t\t\tconst next = toggle ? !prev : prev;\n\n\t\t\tsheet.replaceSync(`:root { ${key}: var(${key}--${next})}`);\n\t\t\twindow.localStorage.setItem(key, next);\n\t\t};\n\t\twindow.mtdsAppToggle(false); // Set and store initial state\n\t})();\n"],"names":["key","sheet","toggle","_a","prev","next"],"mappings":"AACC,OAAO,SAAW,OAClB,OAAO,iBACP,SAAS,uBAER,MAAM;AACN,QAAMA,IAAM,uBACNC,IAAQ,IAAI,cAAe;AAEjC,WAAS,mBAAmB,KAAKA,CAAK,GACtC,OAAO,gBAAgB,CAACC,IAAS,OAAS;AAV5C,QAAAC;AAWG,UAAMC,IAAO,GAACD,IAAA,OAAO,aAAa,QAAQH,CAAG,MAA/B,QAAAG,EAAkC,SAAS,WACnDE,IAAOH,IAAS,CAACE,IAAOA;AAE9B,IAAAH,EAAM,YAAY,WAAWD,CAAG,SAASA,CAAG,KAAKK,CAAI,IAAI,GACzD,OAAO,aAAa,QAAQL,GAAKK,CAAI;AAAA,EACrC,GACD,OAAO,cAAc,EAAK;AAC5B,GAAK;"}
+{"version":3,"file":"app-toggle2.js","sources":["../../designsystem/app/app-toggle.js?raw"],"sourcesContent":["export default \"if (\\n\\ttypeof window !== \\\"undefined\\\" &&\\n\\twindow.CSSStyleSheet &&\\n\\tdocument.adoptedStyleSheets\\n)\\n\\t(() => {\\n\\t\\tconst key = \\\"--mtds-app-expanded\\\";\\n\\t\\tconst sheet = new CSSStyleSheet();\\n\\n\\t\\tdocument.adoptedStyleSheets.push(sheet);\\n\\t\\twindow.mtdsAppToggle = (toggle = true) => {\\n\\t\\t\\ttry {\\n\\t\\t\\t\\tconst prev = !window.localStorage.getItem(key)?.includes(\\\"false\\\");\\n\\t\\t\\t\\tconst next = toggle ? !prev : prev;\\n\\n\\t\\t\\t\\tsheet.replaceSync?.(`:root { ${key}: var(${key}--${next})}`);\\n\\t\\t\\t\\twindow.localStorage.setItem(key, next);\\n\\t\\t\\t} catch (err) {} // LocalStorage is full or replaceSync is not supported\\n\\t\\t};\\n\\t\\twindow.mtdsAppToggle(false); // Set and store initial state\\n\\t})();\\n\""],"names":["script"],"mappings":"AAAA,MAAeA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/mtds/app/app.js

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

package/mtds/card/card.d.ts

@@ -5,8 +5,8 @@ type CardBaseProps<Href> = {
 };
 export type CardProps<Href, As extends React.ElementType = Href extends string ? "a" : "div"> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;
 type CardComponent = <Href, As extends React.ElementType = Href extends string ? "a" : "div">(props: CardProps<Href, As>) => JSX.Element;
+export declare const Card: CardComponent;
 export type GroupProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As>;
 type GroupComponent = <As extends React.ElementType = "div">(props: GroupProps<As>) => JSX.Element;
 export declare const Group: GroupComponent;
-export declare const Card: CardComponent;
 export {};

package/mtds/card/card.js

@@ -2,14 +2,14 @@ import { jsx as c } from "react/jsx-runtime";
 import { clsx as m } from "../external/clsx/dist/clsx.js";
 import { forwardRef as n } from "react";
 import f from "../styles.module.css.js";
-const i = n(function({ as: o, className: t, ...r }, a) {
+const g = n(function({ as: o, className: t, ...r }, a) {
   const s = o || (r.href ? "a" : "div");
   return /* @__PURE__ */ c(s, { className: m(f.card, t), ref: a, ...r });
 }), l = n(function({ as: o, className: t, ...r }, a) {
   return /* @__PURE__ */ c(o || "div", { className: m(f.group, t), ref: a, ...r });
-}), C = i;
+});
 export {
-  C as Card,
+  g as Card,
   l as Group
 };
 //# sourceMappingURL=card.js.map

package/mtds/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nconst CardComp: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n// export type CardDetailsProps = React.ComponentPropsWithoutRef<\"details\">;\n// const CardDetails = forwardRef<HTMLDetailsElement, CardDetailsProps>(\n// \tfunction CardDetails({ className, ...rest }, ref) {\n// \t\treturn (\n// \t\t\t<u-details class={clsx(styles.card, className)} ref={ref} {...rest} />\n// \t\t);\n// \t},\n// );\n\n// export type CardSummaryProps = React.ComponentPropsWithoutRef<\"summary\">;\n// const CardSummary = forwardRef<HTMLElement, CardSummaryProps>(\n// \tfunction CardSummary({ className, ...rest }, ref) {\n// \t\treturn <u-summary class={className} ref={ref} {...rest} />;\n// \t},\n// );\n\nexport const Card = CardComp;\n"],"names":["CardComp","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group","Card"],"mappings":";;;;AAwBA,MAAMA,IAA0BC,EAAiB,SAG/C,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAwBC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAE9B,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC,GASYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAmBC,GAA0B;AAGhE,SAAA,gBAAAE,EAFKL,KAAM,OAEN,EAAA,WAAWM,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC3E,CAAC,GAkBYO,IAAOX;"}
+{"version":3,"file":"card.js","sources":["../../designsystem/card/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\ntype CardBaseProps<Href> = {\n\thref?: Href;\n};\n\nexport type CardProps<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n> = PolymorphicComponentPropWithRef<As, CardBaseProps<Href>>;\n\ntype CardComponent = <\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>(\n\tprops: CardProps<Href, As>,\n) => JSX.Element;\n\nexport const Card: CardComponent = forwardRef<null>(function Card<\n\tHref,\n\tAs extends React.ElementType = Href extends string ? \"a\" : \"div\",\n>({ as, className, ...rest }: CardProps<Href, As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || (rest.href ? \"a\" : \"div\");\n\n\treturn <Tag className={clsx(styles.card, className)} ref={ref} {...rest} />;\n}) as CardComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type GroupProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype GroupComponent = <As extends React.ElementType = \"div\">(\n\tprops: GroupProps<As>,\n) => JSX.Element;\n\nexport const Group: GroupComponent = forwardRef<null>(function Group<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: GroupProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.group, className)} ref={ref} {...rest} />;\n}) as GroupComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Card","forwardRef","as","className","rest","ref","Tag","jsx","clsx","styles","Group"],"mappings":";;;;AAwBa,MAAAA,IAAsBC,EAAiB,SAGlD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAwBC,GAA0B;AAC5E,QAAMC,IAAMJ,MAAOE,EAAK,OAAO,MAAM;AAE9B,SAAA,gBAAAG,EAACD,GAAI,EAAA,WAAWE,EAAKC,EAAO,MAAMN,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC,GASYM,IAAwBT,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAmBC,GAA0B;AAGhE,SAAA,gBAAAE,EAFKL,KAAM,OAEN,EAAA,WAAWM,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC3E,CAAC;"}

package/mtds/field/field-observer.js

@@ -1,17 +1,17 @@
 import { UHTMLDataListElement as L } from "../external/@u-elements/u-datalist/dist/u-datalist.js";
 import u from "../styles.module.css.js";
-import { onLoaded as I, onMutation as T, on as f, QUICK_EVENT as C, isInputLike as m, attr as s, useId as d } from "../utils.js";
-const g = u.field.split(" ")[0], P = "--mtds-text-count-over", b = "--mtds-text-count-under", p = u.validation.split(" "), x = p[0];
+import { onLoaded as I, onMutation as T, on as f, QUICK_EVENT as C, isInputLike as m, attr as a, useId as c } from "../utils.js";
+const g = u.field.split(" ")[0], b = "--mtds-text-count-over", P = "--mtds-text-count-under", p = u.validation.split(" "), x = p[0];
 function _(t) {
   for (const e of t)
     if (e.isConnected) {
-      const l = [], a = [];
-      let n = null, i = null, r = !0;
-      for (const o of e.getElementsByTagName("*"))
-        o instanceof HTMLLabelElement ? l.push(o) : o instanceof L ? i = o : m(o) ? n = o : o.classList.contains(x) ? (r = s(o, "data-color") === "success" || !o.clientWidth || !o.clientHeight, a.unshift(d(o))) : o instanceof HTMLParagraphElement && a.push(d(o));
-      if (n) {
-        for (const o of l) o.htmlFor = d(n);
-        D(n, i), v(n), h(n), s(n, "aria-describedby", a.join(" ") || null), s(n, "aria-invalid", `${!r}`);
+      const i = [], n = [];
+      let o = null, l = null, r = !0;
+      for (const s of e.getElementsByTagName("*"))
+        s instanceof HTMLLabelElement ? i.push(s) : s instanceof L ? o = s : m(s) ? l = s : s.hasAttribute("data-description") ? n.push(s) : s.classList.contains(x) ? (r = a(s, "data-color") === "success" || !s.clientWidth || !s.clientHeight, n.unshift(s)) : s instanceof HTMLParagraphElement && (n.some((d) => d.contains(s)) || n.push(s));
+      if (l) {
+        for (const s of i) s.htmlFor = c(l);
+        A(l, o), v(l), h(l), a(l, "aria-describedby", n.map(c).join(" ") || null), a(l, "aria-invalid", `${!r}`);
       }
     }
 }
@@ -21,35 +21,35 @@ function h(t) {
     `${t.scrollHeight}px`
   ));
 }
-function D(t, e) {
-  if (s(t, "list", e ? d(e) : null), !e) return;
-  t.hasAttribute("placeholder") || s(t, "placeholder", "");
-  const l = window.getComputedStyle(e), a = t.closest("u-tags"), n = (i) => l.getPropertyValue(`--mtds-text-${i}`);
-  s(e, "data-sr-plural", n("datalist-plural")), s(e, "data-sr-singular", n("datalist-singular")), a && (s(a, "data-sr-added", n("tags-added")), s(a, "data-sr-empty", n("tags-empty")), s(a, "data-sr-found", n("tags-found")), s(a, "data-sr-of", n("tags-of")), s(a, "data-sr-remove", n("tags-remove")), s(a, "data-sr-removed", n("tags-removed")));
+function A(t, e) {
+  if (a(t, "list", e ? c(e) : null), !e) return;
+  t.hasAttribute("placeholder") || a(t, "placeholder", "");
+  const i = window.getComputedStyle(e), n = t.closest("u-tags"), o = (l) => i.getPropertyValue(`--mtds-text-${l}`);
+  a(e, "data-sr-plural", o("datalist-plural")), a(e, "data-sr-singular", o("datalist-singular")), n && (a(n, "data-sr-added", o("tags-added")), a(n, "data-sr-empty", o("tags-empty")), a(n, "data-sr-found", o("tags-found")), a(n, "data-sr-of", o("tags-of")), a(n, "data-sr-remove", o("tags-remove")), a(n, "data-sr-removed", o("tags-removed")));
 }
 function v(t) {
-  var a, n;
-  const e = t == null ? void 0 : t.nextElementSibling, l = e && s(e, "data-count");
-  if (e && l) {
-    const i = Number(l) - t.value.length, r = i < 0, o = s(e, "aria-live") === "polite", c = window.getComputedStyle(e || t), y = ((a = c.getPropertyValue(P)) == null ? void 0 : a.slice(1, -1)) || "", S = ((n = c.getPropertyValue(b)) == null ? void 0 : n.slice(1, -1)) || "";
-    if (o !== r) {
-      s(e, "aria-live", r ? "polite" : "off");
+  var n, o;
+  const e = t == null ? void 0 : t.nextElementSibling, i = e && a(e, "data-count");
+  if (e && i) {
+    const l = Number(i) - t.value.length, r = l < 0, s = a(e, "aria-live") === "polite", d = window.getComputedStyle(e || t), y = ((n = d.getPropertyValue(b)) == null ? void 0 : n.slice(1, -1)) || "", S = ((o = d.getPropertyValue(P)) == null ? void 0 : o.slice(1, -1)) || "";
+    if (s !== r) {
+      a(e, "aria-live", r ? "polite" : "off");
       for (const E of p) e.classList.toggle(E, r);
     }
     e.textContent = (r ? y : S).replace(
       "%d",
-      `${Math.abs(i)}`
+      `${Math.abs(l)}`
     );
   }
 }
-function M({ target: t }) {
+function D({ target: t }) {
   m(t) && (v(t), h(t));
 }
-function V(t) {
-  var e, l;
-  (l = (e = t.target) == null ? void 0 : e.closest) != null && l.call(e, `.${g}`) && t.preventDefault();
+function M(t) {
+  var e, i;
+  (i = (e = t.target) == null ? void 0 : e.closest) != null && i.call(e, `.${g}`) && t.preventDefault();
 }
 I(() => {
-  T(document.documentElement, g, _), f(document, "input", M, C), f(document, "invalid", V, !0);
+  T(document.documentElement, g, _), f(document, "input", D, C), f(document, "invalid", M, !0);
 });
 //# 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 { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tQUICK_EVENT,\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: string[] = [];\n\t\t\tlet input: HTMLInputElement | null = null;\n\t\t\tlet datalist: UHTMLDataListElement | 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 UHTMLDataListElement) datalist = el;\n\t\t\t\telse if (isInputLike(el)) input = el;\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\t// Must be before instanceof HTMLParagraphElement since validation can also be a <p>\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(useId(el));\n\t\t\t\t} else if (el instanceof HTMLParagraphElement) descs.push(useId(el));\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\trenderDatalist(input, datalist);\n\t\t\t\trenderCounter(input);\n\t\t\t\trenderTextareaSize(input);\n\t\t\t\tattr(input, \"aria-describedby\", descs.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 renderDatalist(\n\tinput: HTMLInputElement,\n\tlist?: UHTMLDataListElement | null,\n) {\n\tattr(input, \"list\", list ? useId(list) : null);\n\n\tif (!list) return;\n\tif (!input.hasAttribute(\"placeholder\")) attr(input, \"placeholder\", \"\"); // Needed to render dropdown chevron when <datalist> is present\n\n\t// Setup translations from CSS custom properties\n\tconst style = window.getComputedStyle(list);\n\tconst tags = input.closest(\"u-tags\");\n\tconst i11n = (key: string) => style.getPropertyValue(`--mtds-text-${key}`);\n\n\tattr(list, \"data-sr-plural\", i11n(\"datalist-plural\"));\n\tattr(list, \"data-sr-singular\", i11n(\"datalist-singular\"));\n\n\tif (tags) {\n\t\tattr(tags, \"data-sr-added\", i11n(\"tags-added\"));\n\t\tattr(tags, \"data-sr-empty\", i11n(\"tags-empty\"));\n\t\tattr(tags, \"data-sr-found\", i11n(\"tags-found\"));\n\t\tattr(tags, \"data-sr-of\", i11n(\"tags-of\"));\n\t\tattr(tags, \"data-sr-remove\", i11n(\"tags-remove\"));\n\t\tattr(tags, \"data-sr-removed\", i11n(\"tags-removed\"));\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 = 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\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\n\n\t\t// const input = event.target;\n\t\t// const list = input.list;\n\t\t// if (list) {\n\t\t//   console.log('etterpå');\n\t\t//   if (isDatalistClick(event)) return; // User clicked option element\n\t\t//   if (attr(list, 'data-filter') === 'false') syncDatalistState(input); // Allow custom filtering\n\t\t// }\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 buttle\n});\n"],"names":["CSS_FIELD","styles","CSS_PROPERTY_OVER","CSS_PROPERTY_UNDER","CSS_VALIDATIONS","CSS_VALIDATION","handleMutation","fields","field","labels","descs","input","datalist","valid","el","UHTMLDataListElement","isInputLike","attr","useId","label","renderDatalist","renderCounter","renderTextareaSize","textarea","list","style","tags","i11n","key","limit","remainder","nextInvalid","prevInvalid","over","_a","under","_b","css","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 { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tQUICK_EVENT,\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 datalist: UHTMLDataListElement | 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 UHTMLDataListElement) datalist = 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\trenderDatalist(input, datalist);\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 renderDatalist(\n\tinput: HTMLInputElement,\n\tlist?: UHTMLDataListElement | null,\n) {\n\tattr(input, \"list\", list ? useId(list) : null);\n\n\tif (!list) return;\n\tif (!input.hasAttribute(\"placeholder\")) attr(input, \"placeholder\", \"\"); // Needed to render dropdown chevron when <datalist> is present\n\n\t// Setup translations from CSS custom properties\n\tconst style = window.getComputedStyle(list);\n\tconst tags = input.closest(\"u-tags\");\n\tconst i11n = (key: string) => style.getPropertyValue(`--mtds-text-${key}`);\n\n\tattr(list, \"data-sr-plural\", i11n(\"datalist-plural\"));\n\tattr(list, \"data-sr-singular\", i11n(\"datalist-singular\"));\n\n\tif (tags) {\n\t\tattr(tags, \"data-sr-added\", i11n(\"tags-added\"));\n\t\tattr(tags, \"data-sr-empty\", i11n(\"tags-empty\"));\n\t\tattr(tags, \"data-sr-found\", i11n(\"tags-found\"));\n\t\tattr(tags, \"data-sr-of\", i11n(\"tags-of\"));\n\t\tattr(tags, \"data-sr-remove\", i11n(\"tags-remove\"));\n\t\tattr(tags, \"data-sr-removed\", i11n(\"tags-removed\"));\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 = 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\n// Update when typing\nfunction handleInput({ target }: Event) {\n\tif (isInputLike(target)) {\n\t\trenderCounter(target);\n\t\trenderTextareaSize(target);\n\n\t\t// const input = event.target;\n\t\t// const list = input.list;\n\t\t// if (list) {\n\t\t//   console.log('etterpå');\n\t\t//   if (isDatalistClick(event)) return; // User clicked option element\n\t\t//   if (attr(list, 'data-filter') === 'false') syncDatalistState(input); // Allow custom filtering\n\t\t// }\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 buttle\n});\n"],"names":["CSS_FIELD","styles","CSS_PROPERTY_OVER","CSS_PROPERTY_UNDER","CSS_VALIDATIONS","CSS_VALIDATION","handleMutation","fields","field","labels","descs","datalist","input","valid","el","UHTMLDataListElement","isInputLike","attr","desc","label","useId","renderDatalist","renderCounter","renderTextareaSize","textarea","list","style","tags","i11n","key","limit","remainder","nextInvalid","prevInvalid","over","_a","under","_b","css","handleInput","target","handleInvalid","event","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}

package/mtds/field/field.d.ts

@@ -13,6 +13,7 @@ type FieldBaseProps = {
         value: string;
     }>;
     prefix?: string;
+    readOnly?: boolean;
     suffix?: string;
     validation?: React.ReactNode;
 };

package/mtds/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type { ReactUtags, UHTMLTagsElement } from \"@u-elements/u-tags\";\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\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\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 FieldTagsProps = ReactUtags;\n\nconst FieldTags = forwardRef<UHTMLTagsElement, FieldTagsProps>(\n\tfunction FieldTags(props, ref) {\n\t\treturn <u-tags ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tDatalist: FieldDatalist,\n\tTags: FieldTags,\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","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldTags","Field"],"mappings":"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"}
+{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type { ReactUtags, UHTMLTagsElement } from \"@u-elements/u-tags\";\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\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 FieldTagsProps = ReactUtags;\n\nconst FieldTags = forwardRef<UHTMLTagsElement, FieldTagsProps>(\n\tfunction FieldTags(props, ref) {\n\t\treturn <u-tags ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tDatalist: FieldDatalist,\n\tTags: FieldTags,\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","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldTags","Field"],"mappings":"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"}

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

@@ -159,6 +159,7 @@ export declare const Toggles: Story;
 export declare const WithValidation: Story;
 export declare const WithAffixes: Story;
 export declare const WithCharacterCount: Story;
+export declare const WithCustomDescriptionTag: Story;
 export declare const WithDatalist: Story;
 export declare const WithTags: Story;
 export declare const ReactWithDatalist: Story;