@mattilsynet/design 2.2.23 → 2.2.25

package/mtds/field/field.js

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

package/mtds/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["\"use client\";\nimport type { Placement } from \"@floating-ui/dom\";\nimport type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\nimport clsx from \"clsx\";\nimport type { JSX } from \"react\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { HelpText } from \"../helptext/helptext\";\nimport { Input, type InputProps } from \"../input/input\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\nimport { Validation } from \"../validation/validation\";\n\ntype FieldBaseProps = {\n\t\"data-validation\"?: \"form\" | \"false\" | false;\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: string[] | FieldComboboxSelected;\n\tprefix?: string;\n\treadOnly?: boolean; // Allow readoOnly also on <select>\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nconst toOption = (\n\to: FieldComboboxSelected[number] | string,\n): FieldComboboxSelected[number] =>\n\ttypeof o === \"string\" ? { label: o, value: o } : o;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\t\"data-validation\": validationType,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation: validationContent,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst validation = validationContent || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\t\"data-validation\": validationType,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\toptions: undefined, // Ensure options is not passed to DOM\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{(rest.options as FieldBaseProps[\"options\"])\n\t\t\t\t\t\t?.map(toOption)\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p suppressHydrationWarning>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag\n\t\t\t\t\t\tclassName={styles.input}\n\t\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t/>\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={typeof as === \"string\" ? styles.input : undefined}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!validation && (\n\t\t\t\t<Validation hidden={validationType === \"form\"}>{validation}</Validation>\n\t\t\t)}\n\t\t\t{!!count && <p suppressHydrationWarning data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type FieldAffixProps = React.ComponentPropsWithoutRef<\"div\">;\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldAffixProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\"> & {\n\t\"data-nofilter\"?: boolean;\n\t\"data-position\"?: Placement;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist({ \"data-nofilter\": filter, ...rest }, ref) {\n\t\treturn (\n\t\t\t<u-datalist\n\t\t\t\tdata-nofilter={!!filter || undefined} // Ensure data-nofilter is set correctly\n\t\t\t\tref={ref}\n\t\t\t\t{...toCustomElementProps(rest)}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldComboboxSelected = {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: React.ReactNode;\n}[];\nexport type FieldComboboxProps = Omit<\n\tReactUcombobox,\n\t\"onChange\" | \"onInput\"\n> & {\n\t\"data-creatable\"?: boolean;\n\t\"data-multiple\"?: boolean;\n\tonAfterChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonBeforeMatch?: (e: CustomEvent<HTMLOptionElement>) => void; // Custom event to handle before change\n\tonBeforeSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonSelectedChange?: (selected: FieldComboboxSelected) => void; // Allow onChange to be a function that returns void\n\toptions?: FieldComboboxSelected;\n\tselected?: FieldComboboxSelected; // Allow value to be a string or an array of strings for multiple select\n} & Pick<\n\t\tInputProps,\n\t\t| \"disabled\"\n\t\t| \"name\"\n\t\t| \"onChange\"\n\t\t| \"onInput\"\n\t\t| \"placeholder\"\n\t\t| \"readOnly\"\n\t\t| \"type\"\n\t\t| \"value\"\n\t> & // Allow input props to be passed down\n\tPick<FieldDatalistProps, \"data-position\" | \"data-nofilter\">; // Allow datalist props to be passed down\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(\n\t\t{\n\t\t\t\"aria-required\": required,\n\t\t\t\"data-position\": position,\n\t\t\t\"data-nofilter\": nofilter,\n\t\t\t\"data-multiple\": multiple,\n\t\t\tonAfterChange,\n\t\t\tonAfterSelect,\n\t\t\tonBeforeChange,\n\t\t\tonBeforeMatch,\n\t\t\tonBeforeSelect,\n\t\t\tonSelectedChange,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\tname,\n\t\t\toptions,\n\t\t\tplaceholder,\n\t\t\treadOnly,\n\t\t\tselected,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) {\n\t\tconst innerRef = useRef<UHTMLComboboxElement>(null);\n\t\tconst onSelected = useRef(onSelectedChange);\n\t\tonSelected.current = onSelectedChange; // Sync the latest onSelectedChange function\n\n\t\t// Deprecated props\n\t\tif (onAfterChange) {\n\t\t\tonAfterSelect = onAfterChange;\n\t\t\tconsole.warn(\n\t\t\t\t`Combobox onAfterChange is deprecated, use onAfterSelect instead.`,\n\t\t\t);\n\t\t}\n\t\tif (onBeforeChange) {\n\t\t\tonBeforeSelect = onBeforeChange;\n\t\t\tconsole.warn(\n\t\t\t\t`Combobox onBeforeChange is deprecated, use onBeforeSelect instead.`,\n\t\t\t);\n\t\t}\n\n\t\t// Using useEffect for React 18 and lower compatibility\n\t\tuseImperativeHandle(ref, () => innerRef.current as UHTMLComboboxElement); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tconst self = innerRef.current;\n\t\t\tconst handleChange = (event: CustomEvent<HTMLDataElement>) => {\n\t\t\t\tconst handleSelected = onSelected.current;\n\t\t\t\tif (!onSelected) return; // No onSelectedChange function provided, let u-combobox handle it\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst { isConnected: remove, textContent, value } = event.detail;\n\t\t\t\tconst label = textContent?.trim() || \"\";\n\t\t\t\tconst prev = selected || [];\n\n\t\t\t\tif (remove) handleSelected?.(prev.filter((i) => i.value !== value));\n\t\t\t\telse if (multiple) handleSelected?.([...prev, { value, label }]);\n\t\t\t\telse handleSelected?.([{ value, label }]);\n\t\t\t};\n\n\t\t\tself?.addEventListener(\"comboboxbeforeselect\", handleChange);\n\t\t\treturn () =>\n\t\t\t\tself?.removeEventListener(\"comboboxbeforeselect\", handleChange);\n\t\t}, [multiple, selected]);\n\n\t\treturn (\n\t\t\t<u-combobox\n\t\t\t\tdata-multiple={multiple || undefined}\n\t\t\t\t{...toCustomElementProps({\n\t\t\t\t\toncomboboxbeforeselect: onBeforeSelect,\n\t\t\t\t\toncomboboxbeforematch: onBeforeMatch,\n\t\t\t\t\toncomboboxafterselect: onAfterSelect,\n\t\t\t\t\tref: innerRef,\n\t\t\t\t\t...props,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{selected?.map(({ children, label, value }) => (\n\t\t\t\t\t<data key={value} value={value} suppressHydrationWarning>\n\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t</data>\n\t\t\t\t))}\n\t\t\t\t{children || (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\taria-required={required}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tname={name}\n\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<del {...toCustomElementProps({ \"aria-label\": \"Fjern tekst\" })} />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{!!options && (\n\t\t\t\t\t<FieldDatalist data-nofilter={nofilter} data-position={position}>\n\t\t\t\t\t\t{options.map(toOption).map(({ children, label, value }) => (\n\t\t\t\t\t\t\t<FieldOption key={value} value={value} label={label}>\n\t\t\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t\t\t</FieldOption>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</FieldDatalist>\n\t\t\t\t)}\n\t\t\t</u-combobox>\n\t\t);\n\t},\n);\n\nexport type FieldLabelProps = React.ComponentPropsWithoutRef<\"label\">;\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n\tLabel: forwardRef<HTMLLabelElement, FieldLabelProps>(\n\t\tfunction FieldLabel(rest, ref) {\n\t\t\treturn <label suppressHydrationWarning ref={ref} {...rest} />;\n\t\t},\n\t),\n});\n"],"names":["toOption","FieldComp","forwardRef","size","validationType","as","className","count","description","error","helpText","helpTextLabel","label","prefix","style","suffix","validationContent","rest","ref","Tag","affixes","validation","shared","clsx","styles","value","jsx","jsxs","HelpText","FieldAffixes","Validation","FieldDatalist","filter","toCustomElementProps","FieldOption","props","FieldCombobox","required","position","nofilter","multiple","onAfterChange","onAfterSelect","onBeforeChange","onBeforeMatch","onBeforeSelect","onSelectedChange","children","disabled","name","options","placeholder","readOnly","selected","type","innerRef","useRef","onSelected","useImperativeHandle","useEffect","self","handleChange","event","handleSelected","remove","textContent","prev","i","Fragment","Input","Field"],"mappings":"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"}
+{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["\"use client\";\nimport type { Placement } from \"@floating-ui/dom\";\nimport type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\nimport clsx from \"clsx\";\nimport type { JSX } from \"react\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { HelpText } from \"../helptext/helptext\";\nimport { Input, type InputProps } from \"../input/input\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\nimport { Validation } from \"../validation/validation\";\n\ntype FieldBaseProps = {\n\t\"data-validation\"?: \"form\" | \"false\" | false;\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: string[] | FieldComboboxSelected;\n\tprefix?: string;\n\treadOnly?: boolean; // Allow readoOnly also on <select>\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nconst toOption = (\n\to: FieldComboboxSelected[number] | string,\n): FieldComboboxSelected[number] =>\n\ttypeof o === \"string\" ? { label: o, value: o } : o;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\t\"data-validation\": validationType,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation: validationContent,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst validation = validationContent || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\t\"data-validation\": validationType,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\toptions: undefined, // Ensure options is not passed to DOM\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{(rest.options as FieldBaseProps[\"options\"])\n\t\t\t\t\t\t?.map(toOption)\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p suppressHydrationWarning>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag\n\t\t\t\t\t\tclassName={styles.input}\n\t\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t/>\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={typeof as === \"string\" ? styles.input : undefined}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!validation && (\n\t\t\t\t<Validation hidden={validationType === \"form\"}>{validation}</Validation>\n\t\t\t)}\n\t\t\t{!!count && <p suppressHydrationWarning data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type FieldAffixProps = React.ComponentPropsWithoutRef<\"div\">;\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldAffixProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\"> & {\n\t\"data-nofilter\"?: boolean;\n\t\"data-position\"?: Placement;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist({ \"data-nofilter\": filter, ...rest }, ref) {\n\t\treturn (\n\t\t\t<u-datalist\n\t\t\t\tdata-nofilter={!!filter || undefined} // Ensure data-nofilter is set correctly\n\t\t\t\tref={ref}\n\t\t\t\t{...toCustomElementProps(rest)}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldComboboxSelected = {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: React.ReactNode;\n}[];\nexport type FieldComboboxProps = Omit<\n\tReactUcombobox,\n\t\"onChange\" | \"onInput\"\n> & {\n\t\"data-creatable\"?: boolean;\n\t\"data-multiple\"?: boolean;\n\tonAfterChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void; // deprecated\n\tonBeforeMatch?: (e: CustomEvent<HTMLOptionElement>) => void; // Custom event to handle before change\n\tonBeforeSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonSelectedChange?: (selected: FieldComboboxSelected) => void; // Allow onChange to be a function that returns void\n\toptions?: FieldComboboxSelected;\n\tselected?: FieldComboboxSelected; // Allow value to be a string or an array of strings for multiple select\n} & Pick<\n\t\tInputProps,\n\t\t| \"disabled\"\n\t\t| \"name\"\n\t\t| \"onChange\"\n\t\t| \"onInput\"\n\t\t| \"placeholder\"\n\t\t| \"readOnly\"\n\t\t| \"type\"\n\t\t| \"value\"\n\t> & // Allow input props to be passed down\n\tPick<FieldDatalistProps, \"data-position\" | \"data-nofilter\">; // Allow datalist props to be passed down\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(\n\t\t{\n\t\t\t\"aria-required\": required,\n\t\t\t\"data-position\": position,\n\t\t\t\"data-nofilter\": nofilter,\n\t\t\t\"data-multiple\": multiple,\n\t\t\tonAfterChange,\n\t\t\tonAfterSelect,\n\t\t\tonBeforeChange,\n\t\t\tonBeforeMatch,\n\t\t\tonBeforeSelect,\n\t\t\tonSelectedChange,\n\t\t\tonInput,\n\t\t\tonChange,\n\t\t\tchildren,\n\t\t\tdisabled,\n\t\t\tname,\n\t\t\toptions,\n\t\t\tplaceholder,\n\t\t\treadOnly,\n\t\t\tselected,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) {\n\t\tconst innerRef = useRef<UHTMLComboboxElement>(null);\n\t\tconst onSelected = useRef(onSelectedChange);\n\t\tonSelected.current = onSelectedChange; // Sync the latest onSelectedChange function\n\n\t\t// Deprecated props\n\t\tif (onAfterChange) {\n\t\t\tonAfterSelect = onAfterChange;\n\t\t\tconsole.warn(\n\t\t\t\t`Combobox onAfterChange is deprecated, use onAfterSelect instead.`,\n\t\t\t);\n\t\t}\n\t\tif (onBeforeChange) {\n\t\t\tonBeforeSelect = onBeforeChange;\n\t\t\tconsole.warn(\n\t\t\t\t`Combobox onBeforeChange is deprecated, use onBeforeSelect instead.`,\n\t\t\t);\n\t\t}\n\n\t\t// Using useEffect for React 18 and lower compatibility\n\t\tuseImperativeHandle(ref, () => innerRef.current as UHTMLComboboxElement); // Forward innerRef\n\t\tuseEffect(() => {\n\t\t\tconst self = innerRef.current;\n\t\t\tconst handleChange = (event: CustomEvent<HTMLDataElement>) => {\n\t\t\t\tconst handleSelected = onSelected.current;\n\t\t\t\tif (!onSelected) return; // No onSelectedChange function provided, let u-combobox handle it\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst { isConnected: remove, textContent, value } = event.detail;\n\t\t\t\tconst label = textContent?.trim() || \"\";\n\t\t\t\tconst prev = selected || [];\n\n\t\t\t\tif (remove) handleSelected?.(prev.filter((i) => i.value !== value));\n\t\t\t\telse if (multiple) handleSelected?.([...prev, { value, label }]);\n\t\t\t\telse handleSelected?.([{ value, label }]);\n\t\t\t};\n\n\t\t\tself?.addEventListener(\"comboboxbeforeselect\", handleChange);\n\t\t\treturn () =>\n\t\t\t\tself?.removeEventListener(\"comboboxbeforeselect\", handleChange);\n\t\t}, [multiple, selected]);\n\n\t\treturn (\n\t\t\t<u-combobox\n\t\t\t\tdata-multiple={multiple || undefined}\n\t\t\t\t{...toCustomElementProps({\n\t\t\t\t\toncomboboxbeforeselect: onBeforeSelect,\n\t\t\t\t\toncomboboxbeforematch: onBeforeMatch,\n\t\t\t\t\toncomboboxafterselect: onAfterSelect,\n\t\t\t\t\tref: innerRef,\n\t\t\t\t\t...props,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{selected?.map(({ children, label, value }) => (\n\t\t\t\t\t<data key={value} value={value} suppressHydrationWarning>\n\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t</data>\n\t\t\t\t))}\n\t\t\t\t{children || (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\taria-required={required}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tname={name}\n\t\t\t\t\t\t\tonInput={onInput}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<del {...toCustomElementProps({ \"aria-label\": \"Fjern tekst\" })} />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{!!options && (\n\t\t\t\t\t<FieldDatalist data-nofilter={nofilter} data-position={position}>\n\t\t\t\t\t\t{options.map(toOption).map(({ children, label, value }) => (\n\t\t\t\t\t\t\t<FieldOption key={value} value={value} label={label}>\n\t\t\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t\t\t</FieldOption>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</FieldDatalist>\n\t\t\t\t)}\n\t\t\t</u-combobox>\n\t\t);\n\t},\n);\n\nexport type FieldLabelProps = React.ComponentPropsWithoutRef<\"label\">;\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n\tLabel: forwardRef<HTMLLabelElement, FieldLabelProps>(\n\t\tfunction FieldLabel(rest, ref) {\n\t\t\treturn <label suppressHydrationWarning ref={ref} {...rest} />;\n\t\t},\n\t),\n});\n"],"names":["Field","label","FieldAffixes","FieldDatalist","FieldOption","FieldCombobox","children"],"mappings":"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"}

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

@@ -152,10 +152,12 @@ export declare const WithCharacterCount: Story;
 export declare const WithCustomDescriptionTag: Story;
 export declare const WithCombobox: Story;
 export declare const WithComboboxMultiple: Story;
+export declare const WithComboboxCreatable: Story;
 export declare const WithComboboxAPI: Story;
 export declare const WithComboboxCustomFilter: Story;
 export declare const ReactWithCombobox: Story;
 export declare const ReactWithComboboxWithChildren: Story;
 export declare const ReactWithComboboxMultiple: Story;
+export declare const ReactWithComboboxCreatable: Story;
 export declare const ReactWithComboboxLong: Story;
 export declare const ReactWithCombobxCustomFilter: Story;

package/mtds/fieldset/fieldset-observer.js

@@ -1,20 +1,30 @@
-import a from "../styles.module.css.js";
-import { IS_BROWSER as d, onLoaded as r, onMutation as f, attr as s, useId as u, isInputLike as I } from "../utils.js";
-const m = a.fieldset.split(" ")[0], S = a.validation.split(" ")[0], l = "aria-describedby", p = "aria-invalid", E = d ? document.getElementsByClassName(m) : [];
-function A() {
+import styles from "../styles.module.css.js";
+import { isBrowser, onLoaded, onMutation, attr, useId, isInputLike } from "../utils.js";
+const CSS_FIELDSET = styles.fieldset.split(" ")[0];
+const CSS_VALIDATION = styles.validation.split(" ")[0];
+const ARIA_DESC = "aria-describedby";
+const ARIA_INVALID = "aria-invalid";
+const FIELDSETS = isBrowser() ? document.getElementsByClassName(CSS_FIELDSET) : [];
+function handleFieldsetMutation() {
   setTimeout(() => {
-    for (const i of E)
-      if (i.isConnected) {
-        const o = [];
-        let e = null, n = !0;
-        for (const t of i.getElementsByTagName("*"))
-          t.classList.contains(S) ? (n = s(t, "data-color") === "success" || !t.clientHeight, e = u(t)) : I(t) && o.push(t);
-        for (const t of o) {
-          const c = s(t, l)?.replace(e || "#", "");
-          s(t, l, `${e || ""} ${c || ""}`.trim()), s(t, p, `${!n}`);
+    for (const fieldset of FIELDSETS)
+      if (fieldset.isConnected) {
+        const inputs = [];
+        let validId = null;
+        let valid = true;
+        for (const el of fieldset.getElementsByTagName("*")) {
+          if (el.classList.contains(CSS_VALIDATION)) {
+            valid = attr(el, "data-color") === "success" || !el.clientHeight;
+            validId = useId(el);
+          } else if (isInputLike(el)) inputs.push(el);
+        }
+        for (const input of inputs) {
+          const desc = attr(input, ARIA_DESC)?.replace(validId || "#", "");
+          attr(input, ARIA_DESC, `${validId || ""} ${desc || ""}`.trim());
+          attr(input, ARIA_INVALID, `${!valid}`);
         }
       }
   });
 }
-r(() => [f(A, "class")]);
+onLoaded(() => [onMutation(handleFieldsetMutation, "class")]);
 //# sourceMappingURL=fieldset-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fieldset-observer.js","sources":["../../designsystem/fieldset/fieldset-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattr,\n\tIS_BROWSER,\n\tisInputLike,\n\tonLoaded,\n\tonMutation,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELDSET = styles.fieldset.split(\" \")[0];\nconst CSS_VALIDATION = styles.validation.split(\" \")[0];\nconst ARIA_DESC = \"aria-describedby\";\nconst ARIA_INVALID = \"aria-invalid\";\nconst FIELDSETS = IS_BROWSER\n\t? document.getElementsByClassName(CSS_FIELDSET)\n\t: [];\n\n// Using setTimeout to ensure it runs after field-observer\nfunction handleFieldsetMutation() {\n\tsetTimeout(() => {\n\t\tfor (const fieldset of FIELDSETS)\n\t\t\tif (fieldset.isConnected) {\n\t\t\t\tconst inputs: HTMLInputElement[] = [];\n\t\t\t\tlet validId: string | null = null;\n\t\t\t\tlet valid = true;\n\n\t\t\t\tfor (const el of fieldset.getElementsByTagName(\"*\")) {\n\t\t\t\t\tif (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\t\tvalid = attr(el, \"data-color\") === \"success\" || !el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\t\tvalidId = useId(el);\n\t\t\t\t\t} else if (isInputLike(el)) inputs.push(el);\n\t\t\t\t}\n\n\t\t\t\tfor (const input of inputs) {\n\t\t\t\t\tconst desc = attr(input, ARIA_DESC)?.replace(validId || \"#\", \"\");\n\n\t\t\t\t\tattr(input, ARIA_DESC, `${validId || \"\"} ${desc || \"\"}`.trim());\n\t\t\t\t\tattr(input, ARIA_INVALID, `${!valid}`);\n\t\t\t\t}\n\t\t\t}\n\t});\n}\n\nonLoaded(() => [onMutation(handleFieldsetMutation, \"class\")]);\n"],"names":["CSS_FIELDSET","styles","CSS_VALIDATION","ARIA_DESC","ARIA_INVALID","FIELDSETS","IS_BROWSER","handleFieldsetMutation","fieldset","inputs","validId","valid","el","attr","useId","isInputLike","input","desc","onLoaded","onMutation"],"mappings":";;AAUA,MAAMA,IAAeC,EAAO,SAAS,MAAM,GAAG,EAAE,CAAC,GAC3CC,IAAiBD,EAAO,WAAW,MAAM,GAAG,EAAE,CAAC,GAC/CE,IAAY,oBACZC,IAAe,gBACfC,IAAYC,IACf,SAAS,uBAAuBN,CAAY,IAC5C,CAAA;AAGH,SAASO,IAAyB;AACjC,aAAW,MAAM;AAChB,eAAWC,KAAYH;AACtB,UAAIG,EAAS,aAAa;AACzB,cAAMC,IAA6B,CAAA;AACnC,YAAIC,IAAyB,MACzBC,IAAQ;AAEZ,mBAAWC,KAAMJ,EAAS,qBAAqB,GAAG;AACjD,UAAII,EAAG,UAAU,SAASV,CAAc,KACvCS,IAAQE,EAAKD,GAAI,YAAY,MAAM,aAAa,CAACA,EAAG,cACpDF,IAAUI,EAAMF,CAAE,KACRG,EAAYH,CAAE,KAAGH,EAAO,KAAKG,CAAE;AAG3C,mBAAWI,KAASP,GAAQ;AAC3B,gBAAMQ,IAAOJ,EAAKG,GAAOb,CAAS,GAAG,QAAQO,KAAW,KAAK,EAAE;AAE/D,UAAAG,EAAKG,GAAOb,GAAW,GAAGO,KAAW,EAAE,IAAIO,KAAQ,EAAE,GAAG,KAAA,CAAM,GAC9DJ,EAAKG,GAAOZ,GAAc,GAAG,CAACO,CAAK,EAAE;AAAA,QACtC;AAAA,MACD;AAAA,EACF,CAAC;AACF;AAEAO,EAAS,MAAM,CAACC,EAAWZ,GAAwB,OAAO,CAAC,CAAC;"}
+{"version":3,"file":"fieldset-observer.js","sources":["../../designsystem/fieldset/fieldset-observer.ts"],"sourcesContent":["import styles from \"../styles.module.css\";\nimport {\n\tattr,\n\tisBrowser,\n\tisInputLike,\n\tonLoaded,\n\tonMutation,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELDSET = styles.fieldset.split(\" \")[0];\nconst CSS_VALIDATION = styles.validation.split(\" \")[0];\nconst ARIA_DESC = \"aria-describedby\";\nconst ARIA_INVALID = \"aria-invalid\";\nconst FIELDSETS = isBrowser()\n\t? document.getElementsByClassName(CSS_FIELDSET)\n\t: [];\n\n// Using setTimeout to ensure it runs after field-observer\nfunction handleFieldsetMutation() {\n\tsetTimeout(() => {\n\t\tfor (const fieldset of FIELDSETS)\n\t\t\tif (fieldset.isConnected) {\n\t\t\t\tconst inputs: HTMLInputElement[] = [];\n\t\t\t\tlet validId: string | null = null;\n\t\t\t\tlet valid = true;\n\n\t\t\t\tfor (const el of fieldset.getElementsByTagName(\"*\")) {\n\t\t\t\t\tif (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\t\tvalid = attr(el, \"data-color\") === \"success\" || !el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\t\tvalidId = useId(el);\n\t\t\t\t\t} else if (isInputLike(el)) inputs.push(el);\n\t\t\t\t}\n\n\t\t\t\tfor (const input of inputs) {\n\t\t\t\t\tconst desc = attr(input, ARIA_DESC)?.replace(validId || \"#\", \"\");\n\n\t\t\t\t\tattr(input, ARIA_DESC, `${validId || \"\"} ${desc || \"\"}`.trim());\n\t\t\t\t\tattr(input, ARIA_INVALID, `${!valid}`);\n\t\t\t\t}\n\t\t\t}\n\t});\n}\n\nonLoaded(() => [onMutation(handleFieldsetMutation, \"class\")]);\n"],"names":[],"mappings":";;AAUA,MAAM,eAAe,OAAO,SAAS,MAAM,GAAG,EAAE,CAAC;AACjD,MAAM,iBAAiB,OAAO,WAAW,MAAM,GAAG,EAAE,CAAC;AACrD,MAAM,YAAY;AAClB,MAAM,eAAe;AACrB,MAAM,YAAY,UAAA,IACf,SAAS,uBAAuB,YAAY,IAC5C,CAAA;AAGH,SAAS,yBAAyB;AACjC,aAAW,MAAM;AAChB,eAAW,YAAY;AACtB,UAAI,SAAS,aAAa;AACzB,cAAM,SAA6B,CAAA;AACnC,YAAI,UAAyB;AAC7B,YAAI,QAAQ;AAEZ,mBAAW,MAAM,SAAS,qBAAqB,GAAG,GAAG;AACpD,cAAI,GAAG,UAAU,SAAS,cAAc,GAAG;AAC1C,oBAAQ,KAAK,IAAI,YAAY,MAAM,aAAa,CAAC,GAAG;AACpD,sBAAU,MAAM,EAAE;AAAA,UACnB,WAAW,YAAY,EAAE,EAAG,QAAO,KAAK,EAAE;AAAA,QAC3C;AAEA,mBAAW,SAAS,QAAQ;AAC3B,gBAAM,OAAO,KAAK,OAAO,SAAS,GAAG,QAAQ,WAAW,KAAK,EAAE;AAE/D,eAAK,OAAO,WAAW,GAAG,WAAW,EAAE,IAAI,QAAQ,EAAE,GAAG,KAAA,CAAM;AAC9D,eAAK,OAAO,cAAc,GAAG,CAAC,KAAK,EAAE;AAAA,QACtC;AAAA,MACD;AAAA,EACF,CAAC;AACF;AAEA,SAAS,MAAM,CAAC,WAAW,wBAAwB,OAAO,CAAC,CAAC;"}

package/mtds/fieldset/fieldset.d.ts

@@ -1,2 +1,2 @@
 export type FieldsetProps = React.ComponentPropsWithoutRef<"fieldset">;
-export declare const Fieldset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
+export declare const Fieldset: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & import('react').RefAttributes<HTMLFieldSetElement>>;

package/mtds/fieldset/fieldset.js

@@ -1,20 +1,20 @@
-import { jsx as o } from "react/jsx-runtime";
-import s from "clsx";
-import { forwardRef as f } from "react";
-import i from "../styles.module.css.js";
-const n = f(
-  function({ className: e, ...r }, t) {
-    return /* @__PURE__ */ o(
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import styles from "../styles.module.css.js";
+const Fieldset = forwardRef(
+  function Fieldset2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
       "fieldset",
       {
-        className: s(i.fieldset, e),
-        ref: t,
-        ...r
+        className: clsx(styles.fieldset, className),
+        ref,
+        ...rest
       }
     );
   }
 );
 export {
-  n as Fieldset
+  Fieldset
 };
 //# sourceMappingURL=fieldset.js.map

package/mtds/fieldset/fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset.js","sources":["../../designsystem/fieldset/fieldset.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type FieldsetProps = React.ComponentPropsWithoutRef<\"fieldset\">;\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(\n\tfunction Fieldset({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tclassName={clsx(styles.fieldset, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":["Fieldset","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAMO,MAAMA,IAAWC;AAAA,EACvB,SAAkB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAC9C,WACC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAWC,EAAKC,EAAO,UAAUL,CAAS;AAAA,QAC1C,KAAAE;AAAA,QACC,GAAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD;"}
+{"version":3,"file":"fieldset.js","sources":["../../designsystem/fieldset/fieldset.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type FieldsetProps = React.ComponentPropsWithoutRef<\"fieldset\">;\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(\n\tfunction Fieldset({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tclassName={clsx(styles.fieldset, className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n"],"names":["Fieldset"],"mappings":";;;;AAMO,MAAM,WAAW;AAAA,EACvB,SAASA,UAAS,EAAE,WAAW,GAAG,KAAA,GAAQ,KAAK;AAC9C,WACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAW,KAAK,OAAO,UAAU,SAAS;AAAA,QAC1C;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD;"}

package/mtds/fileupload/fileupload.js

@@ -1,13 +1,14 @@
-import { jsx as a } from "react/jsx-runtime";
-import e from "clsx";
-import { forwardRef as m } from "react";
-import f from "../styles.module.css.js";
-const d = m(
-  function({ as: o, className: r, ...l }, t) {
-    return /* @__PURE__ */ a(o || "label", { className: e(f.fileupload, r), ref: t, ...l });
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import styles from "../styles.module.css.js";
+const Fileupload = forwardRef(
+  function Fileupload2({ as, className, ...rest }, ref) {
+    const Tag = as || "label";
+    return /* @__PURE__ */ jsx(Tag, { className: clsx(styles.fileupload, className), ref, ...rest });
   }
 );
 export {
-  d as Fileupload
+  Fileupload
 };
 //# sourceMappingURL=fileupload.js.map

package/mtds/fileupload/fileupload.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileupload.js","sources":["../../designsystem/fileupload/fileupload.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type FileuploadProps<As extends React.ElementType = \"label\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype FileuploadComponent = <As extends React.ElementType = \"label\">(\n\tprops: FileuploadProps<As>,\n) => JSX.Element;\n\nexport const Fileupload: FileuploadComponent = forwardRef<null>(\n\tfunction Fileupload<As extends React.ElementType = \"label\">(\n\t\t{ as, className, ...rest }: FileuploadProps<As>,\n\t\tref?: PolymorphicRef<As>,\n\t) {\n\t\tconst Tag = as || \"label\";\n\n\t\treturn (\n\t\t\t<Tag className={clsx(styles.fileupload, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n) as FileuploadComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Fileupload","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAeO,MAAMA,IAAkCC;AAAA,EAC9C,SACC,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GACpBC,GACC;AAGD,WACC,gBAAAC,EAHWJ,KAAM,SAGhB,EAAI,WAAWK,EAAKC,EAAO,YAAYL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAAA,EAE1E;AACD;"}
+{"version":3,"file":"fileupload.js","sources":["../../designsystem/fileupload/fileupload.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type FileuploadProps<As extends React.ElementType = \"label\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype FileuploadComponent = <As extends React.ElementType = \"label\">(\n\tprops: FileuploadProps<As>,\n) => JSX.Element;\n\nexport const Fileupload: FileuploadComponent = forwardRef<null>(\n\tfunction Fileupload<As extends React.ElementType = \"label\">(\n\t\t{ as, className, ...rest }: FileuploadProps<As>,\n\t\tref?: PolymorphicRef<As>,\n\t) {\n\t\tconst Tag = as || \"label\";\n\n\t\treturn (\n\t\t\t<Tag className={clsx(styles.fileupload, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n) as FileuploadComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Fileupload"],"mappings":";;;;AAeO,MAAM,aAAkC;AAAA,EAC9C,SAASA,YACR,EAAE,IAAI,WAAW,GAAG,KAAA,GACpB,KACC;AACD,UAAM,MAAM,MAAM;AAElB,WACC,oBAAC,KAAA,EAAI,WAAW,KAAK,OAAO,YAAY,SAAS,GAAG,KAAW,GAAG,KAAA,CAAM;AAAA,EAE1E;AACD;"}

package/mtds/helptext/helptext.d.ts

@@ -1,2 +1,2 @@
 export type HelpTextProps = React.ComponentPropsWithoutRef<"button">;
-export declare const HelpText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const HelpText: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;