@mattilsynet/design 3.0.7 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/mtds/atlas/atlas-element.js +1 -1
  2. package/mtds/field/field.d.ts +1 -0
  3. package/mtds/field/field.js +84 -82
  4. package/mtds/field/field.js.map +1 -1
  5. package/mtds/field/field.stories.d.ts +2 -0
  6. package/mtds/index.iife.js +11 -11
  7. package/mtds/package.json.js +1 -1
  8. package/mtds/styles.css +1 -1
  9. package/mtds/styles.json +23 -23
  10. package/mtds/styles.module.css.js +9 -9
  11. package/package.json +5 -5
package/mtds/atlas/atlas-element.js CHANGED
@@ -24,7 +24,7 @@ class m extends C {
24
24
  "style",
25
25
  null,
26
26
  `@layer leaflet{${f}}
27
- @layer mt.v3-0-7design{${b}`
27
+ @layer mt.v3-1-0design{${b}`
28
28
  ),
29
29
  r("figure")
30
30
  );
package/mtds/field/field.d.ts CHANGED
@@ -39,6 +39,7 @@ export type FieldSuggestionSelected = {
39
39
  export type FieldSuggestionProps = Omit<CustomReactElementProps<DSSuggestionElement>, "onChange" | "onInput"> & {
40
40
  "data-creatable"?: boolean;
41
41
  "data-multiple"?: boolean;
42
+ "data-variant"?: "inside";
42
43
  onAfterChange?: (e: CustomEvent<HTMLDataElement>) => void;
43
44
  onAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void;
44
45
  onBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void;
package/mtds/field/field.js CHANGED
@@ -83,90 +83,92 @@ const V = (a) => typeof a == "string" ? { label: a, value: a } : a, ie = s(funct
83
83
  function(t, n) {
84
84
  return /* @__PURE__ */ e("u-option", { ref: n, ...N(t) });
85
85
  }
86
- ), I = s(function({
87
- "aria-required": t,
88
- "data-position": n,
89
- "data-placement": i,
90
- "data-nofilter": d,
91
- "data-multiple": c,
92
- onAfterChange: m,
93
- // Backwards compatibility
94
- onAfterSelect: y,
95
- onBeforeChange: g,
96
- // Backwards compatibility
97
- onBeforeMatch: C,
98
- onBeforeSelect: b,
99
- onSelectedChange: p,
100
- onInput: D,
101
- onChange: h,
102
- children: O,
103
- disabled: o,
104
- name: F,
105
- options: v,
106
- placeholder: j,
107
- readOnly: w,
108
- selected: u,
109
- type: L,
110
- ...H
111
- }, X) {
112
- const B = z(null), E = z(p);
113
- return E.current = p, m && (y = m, window.dsWarnings === !1 || console.warn(
114
- "\x1B[1m@mattilsynet/design - deprecation warning:\x1B[m onAfterChange is deprecated, please use onAfterSelect instead"
115
- )), g && (b = g, window.dsWarnings === !1 || console.warn(
116
- "\x1B[1m@mattilsynet/design - deprecation warning:\x1B[m onBeforeChange is deprecated, please use onBeforeSelect instead"
117
- )), $(X, () => B.current), ee(() => {
118
- const f = B.current, l = (r) => {
119
- const S = E.current;
120
- if (!E) return;
121
- r.preventDefault();
122
- const { isConnected: Y, textContent: Z, value: A } = r.detail, R = Z?.trim() || "", q = u || [];
123
- S?.(Y ? q.filter((_) => _.value !== A) : c ? [...q, { value: A, label: R }] : [{ value: A, label: R }]);
124
- };
125
- return f?.addEventListener("comboboxbeforeselect", l), () => f?.removeEventListener("comboboxbeforeselect", l);
126
- }, [c, u]), /* @__PURE__ */ W(
127
- "ds-suggestion",
128
- {
129
- "data-multiple": c || void 0,
130
- ...N(
131
- {
132
- oncomboboxbeforeselect: b,
133
- oncomboboxbeforematch: C,
134
- oncomboboxafterselect: y,
135
- ref: B,
136
- ...H
137
- },
138
- x.suggestion
139
- ),
140
- children: [
141
- u?.map(({ children: f, label: l, value: r }) => /* @__PURE__ */ e("data", { value: r, suppressHydrationWarning: !0, children: f ?? l }, r)),
142
- O || /* @__PURE__ */ W(k, { children: [
143
- /* @__PURE__ */ e(
144
- ne,
86
+ ), I = s(
87
+ function({
88
+ "aria-required": t,
89
+ "data-position": n,
90
+ "data-placement": i,
91
+ "data-nofilter": d,
92
+ "data-multiple": c,
93
+ onAfterChange: m,
94
+ // Backwards compatibility
95
+ onAfterSelect: y,
96
+ onBeforeChange: g,
97
+ // Backwards compatibility
98
+ onBeforeMatch: C,
99
+ onBeforeSelect: b,
100
+ onSelectedChange: p,
101
+ onInput: D,
102
+ onChange: h,
103
+ children: O,
104
+ disabled: o,
105
+ name: F,
106
+ options: v,
107
+ placeholder: j,
108
+ readOnly: w,
109
+ selected: u,
110
+ type: L,
111
+ ...H
112
+ }, X) {
113
+ const B = z(null), E = z(p);
114
+ return E.current = p, m && (y = m, window.dsWarnings === !1 || console.warn(
115
+ "\x1B[1m@mattilsynet/design - deprecation warning:\x1B[m onAfterChange is deprecated, please use onAfterSelect instead"
116
+ )), g && (b = g, window.dsWarnings === !1 || console.warn(
117
+ "\x1B[1m@mattilsynet/design - deprecation warning:\x1B[m onBeforeChange is deprecated, please use onBeforeSelect instead"
118
+ )), $(X, () => B.current), ee(() => {
119
+ const f = B.current, l = (r) => {
120
+ const S = E.current;
121
+ if (!E) return;
122
+ r.preventDefault();
123
+ const { isConnected: Y, textContent: Z, value: A } = r.detail, R = Z?.trim() || "", q = u || [];
124
+ S?.(Y ? q.filter((_) => _.value !== A) : c ? [...q, { value: A, label: R }] : [{ value: A, label: R }]);
125
+ };
126
+ return f?.addEventListener("comboboxbeforeselect", l), () => f?.removeEventListener("comboboxbeforeselect", l);
127
+ }, [c, u]), /* @__PURE__ */ W(
128
+ "ds-suggestion",
129
+ {
130
+ "data-multiple": c || void 0,
131
+ ...N(
132
+ {
133
+ oncomboboxbeforeselect: b,
134
+ oncomboboxbeforematch: C,
135
+ oncomboboxafterselect: y,
136
+ ref: B,
137
+ ...H
138
+ },
139
+ x.suggestion
140
+ ),
141
+ children: [
142
+ u?.map(({ children: f, label: l, value: r }) => /* @__PURE__ */ e("data", { value: r, suppressHydrationWarning: !0, children: f ?? l }, r)),
143
+ O || /* @__PURE__ */ W(k, { children: [
144
+ /* @__PURE__ */ e(
145
+ ne,
146
+ {
147
+ "aria-required": t,
148
+ disabled: o,
149
+ name: F,
150
+ onInput: D,
151
+ onChange: h,
152
+ placeholder: j,
153
+ readOnly: w,
154
+ type: L
155
+ }
156
+ ),
157
+ /* @__PURE__ */ e("del", { "aria-label": "Fjern tekst", suppressHydrationWarning: !0 })
158
+ ] }),
159
+ !!v && /* @__PURE__ */ e(
160
+ J,
145
161
  {
146
- "aria-required": t,
147
- disabled: o,
148
- name: F,
149
- onInput: D,
150
- onChange: h,
151
- placeholder: j,
152
- readOnly: w,
153
- type: L
162
+ "data-nofilter": d,
163
+ "data-placement": i || n,
164
+ children: v.map(V).map(({ children: f, label: l, value: r }) => /* @__PURE__ */ e(K, { value: r, label: l, children: f ?? l }, r))
154
165
  }
155
- ),
156
- /* @__PURE__ */ e("del", { "aria-label": "Fjern tekst", suppressHydrationWarning: !0 })
157
- ] }),
158
- !!v && /* @__PURE__ */ e(
159
- J,
160
- {
161
- "data-nofilter": d,
162
- "data-placement": i || n,
163
- children: v.map(V).map(({ children: f, label: l, value: r }) => /* @__PURE__ */ e(K, { value: r, label: l, children: f ?? l }, r))
164
- }
165
- )
166
- ]
167
- }
168
- );
169
- }), M = s(
166
+ )
167
+ ]
168
+ }
169
+ );
170
+ }
171
+ ), M = s(
170
172
  function(t, n) {
171
173
  return /* @__PURE__ */ e("label", { suppressHydrationWarning: !0, ref: n, ...t });
172
174
  }
package/mtds/field/field.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["\"use client\";\nimport type { DSSuggestionElement } from \"@digdir/designsystemet-web\";\nimport type { Placement } from \"@floating-ui/dom\";\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\tCustomReactElementProps,\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\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[] | FieldSuggestionSelected;\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: FieldSuggestionSelected[number] | string,\n): FieldSuggestionSelected[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\": dataValidation,\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 || \"ds-field\";\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\": dataValidation,\n\t\tclass: clsx(styles.field, className),\n\t\tsuppressHydrationWarning: true,\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<ds-field {...shared}>\n\t\t\t{!!label && <FieldLabel>{label}</FieldLabel>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <FieldDescription>{description}</FieldDescription>}\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={typeof as === \"string\" ? styles.input : undefined}\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 && <Validation>{validation}</Validation>}\n\t\t\t{!!count && <FieldCount data-limit={count} />}\n\t\t</ds-field>\n\t) : (\n\t\t<ds-field 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/**\n\t * @deprecated Use `data-placement` instead.\n\t */\n\t\"data-position\"?: Placement;\n\t\"data-placement\"?: Placement;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(\n\t\t{ \"data-position\": placement, \"data-nofilter\": filter, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<u-datalist\n\t\t\t\tdata-placement={placement} // Backward compatibility\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 = FieldSuggestionSelected; // Backwards compatibility\nexport type FieldComboboxProps = FieldSuggestionProps; // Backwards compatibility\n\nexport type FieldSuggestionSelected = {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: React.ReactNode;\n}[];\nexport type FieldSuggestionProps = Omit<\n\tCustomReactElementProps<DSSuggestionElement>,\n\t\"onChange\" | \"onInput\"\n> & {\n\t\"data-creatable\"?: boolean;\n\t\"data-multiple\"?: boolean;\n\tonAfterChange?: (e: CustomEvent<HTMLDataElement>) => void; // Backwards compatibility\n\tonAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void; // Backwards compatibility\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: FieldSuggestionSelected) => void; // Allow onChange to be a function that returns void\n\toptions?: FieldSuggestionSelected;\n\tselected?: FieldSuggestionSelected; // 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<\n\t\tFieldDatalistProps,\n\t\t\"data-position\" | \"data-placement\" | \"data-nofilter\"\n\t>; // Allow datalist props to be passed down\n\nconst FieldSuggestion = forwardRef<\n\tDSSuggestionElement,\n\tFieldSuggestionProps | FieldSuggestionProps\n>(function FieldSuggestion(\n\t{\n\t\t\"aria-required\": required,\n\t\t\"data-position\": position,\n\t\t\"data-placement\": placement,\n\t\t\"data-nofilter\": nofilter,\n\t\t\"data-multiple\": multiple,\n\t\tonAfterChange, // Backwards compatibility\n\t\tonAfterSelect,\n\t\tonBeforeChange, // Backwards compatibility\n\t\tonBeforeMatch,\n\t\tonBeforeSelect,\n\t\tonSelectedChange,\n\t\tonInput,\n\t\tonChange,\n\t\tchildren,\n\t\tdisabled,\n\t\tname,\n\t\toptions,\n\t\tplaceholder,\n\t\treadOnly,\n\t\tselected,\n\t\ttype,\n\t\t...props\n\t},\n\tref,\n) {\n\tconst innerRef = useRef<DSSuggestionElement>(null);\n\tconst onSelected = useRef(onSelectedChange);\n\tonSelected.current = onSelectedChange; // Sync the latest onSelectedChange function\n\n\t// Deprecated props\n\tif (onAfterChange) {\n\t\tonAfterSelect = onAfterChange;\n\t\twindow.dsWarnings === false ||\n\t\t\tconsole.warn(\n\t\t\t\t`\\x1B[1m@mattilsynet/design - deprecation warning:\\x1B[m onAfterChange is deprecated, please use onAfterSelect instead`,\n\t\t\t);\n\t}\n\n\tif (onBeforeChange) {\n\t\tonBeforeSelect = onBeforeChange;\n\t\twindow.dsWarnings === false ||\n\t\t\tconsole.warn(\n\t\t\t\t`\\x1B[1m@mattilsynet/design - deprecation warning:\\x1B[m onBeforeChange is deprecated, please use onBeforeSelect instead`,\n\t\t\t);\n\t}\n\n\t// Using useEffect for React 18 and lower compatibility\n\tuseImperativeHandle(ref, () => innerRef.current as DSSuggestionElement); // Forward innerRef\n\tuseEffect(() => {\n\t\tconst self = innerRef.current;\n\t\tconst handleChange = (event: CustomEvent<HTMLDataElement>) => {\n\t\t\tconst handleSelected = onSelected.current;\n\t\t\tif (!onSelected) return; // No onSelectedChange function provided, let ds-suggestion handle it\n\t\t\tevent.preventDefault();\n\t\t\tconst { isConnected: remove, textContent, value } = event.detail;\n\t\t\tconst label = textContent?.trim() || \"\";\n\t\t\tconst prev = selected || [];\n\n\t\t\tif (remove) handleSelected?.(prev.filter((i) => i.value !== value));\n\t\t\telse if (multiple) handleSelected?.([...prev, { value, label }]);\n\t\t\telse handleSelected?.([{ value, label }]);\n\t\t};\n\n\t\tself?.addEventListener(\"comboboxbeforeselect\", handleChange);\n\t\treturn () =>\n\t\t\tself?.removeEventListener(\"comboboxbeforeselect\", handleChange);\n\t}, [multiple, selected]);\n\n\treturn (\n\t\t<ds-suggestion\n\t\t\tdata-multiple={multiple || undefined}\n\t\t\t{...toCustomElementProps(\n\t\t\t\t{\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\tstyles.suggestion,\n\t\t\t)}\n\t\t>\n\t\t\t{selected?.map(({ children, label, value }) => (\n\t\t\t\t<data key={value} value={value} suppressHydrationWarning>\n\t\t\t\t\t{children ?? label}\n\t\t\t\t</data>\n\t\t\t))}\n\t\t\t{children || (\n\t\t\t\t<>\n\t\t\t\t\t<Input\n\t\t\t\t\t\taria-required={required}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tname={name}\n\t\t\t\t\t\tonInput={onInput}\n\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\t\ttype={type}\n\t\t\t\t\t/>\n\t\t\t\t\t<del aria-label=\"Fjern tekst\" suppressHydrationWarning />\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t{!!options && (\n\t\t\t\t<FieldDatalist\n\t\t\t\t\tdata-nofilter={nofilter}\n\t\t\t\t\tdata-placement={placement || position}\n\t\t\t\t>\n\t\t\t\t\t{options.map(toOption).map(({ children, label, value }) => (\n\t\t\t\t\t\t<FieldOption key={value} value={value} label={label}>\n\t\t\t\t\t\t\t{children ?? label}\n\t\t\t\t\t\t</FieldOption>\n\t\t\t\t\t))}\n\t\t\t\t</FieldDatalist>\n\t\t\t)}\n\t\t</ds-suggestion>\n\t);\n});\n\nexport type FieldLabelProps = React.ComponentPropsWithoutRef<\"label\">;\nconst FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(\n\tfunction FieldLabel(rest, ref) {\n\t\treturn <label suppressHydrationWarning ref={ref} {...rest} />;\n\t},\n);\n\nexport type FieldDescriptionProps = React.ComponentPropsWithoutRef<\"p\">;\nconst FieldDescription = forwardRef<\n\tHTMLParagraphElement,\n\tFieldDescriptionProps\n>(function FieldDescription(rest, ref) {\n\treturn (\n\t\t<div\n\t\t\tsuppressHydrationWarning\n\t\t\tdata-field=\"description\"\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n\nexport type FieldCountProps = React.ComponentPropsWithoutRef<\"p\"> & {\n\t/**\n\t * @deprecated Use \"data-limit\" instead\n\t */\n\t\"data-count\"?: number;\n\t\"data-limit\": number;\n};\nconst FieldCount = forwardRef<HTMLParagraphElement, FieldCountProps>(\n\tfunction FieldCount(\n\t\t{ \"data-count\": count, \"data-limit\": limit, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<Validation\n\t\t\t\tdata-field=\"counter\"\n\t\t\t\tdata-limit={limit || count}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\t/**\n\t * @deprecated Use Field.Suggestion instead\n\t */\n\tCombobox: FieldSuggestion, // Backwards compatibility\n\tSuggestion: FieldSuggestion,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n\tDescription: FieldDescription,\n\tLabel: FieldLabel,\n\tCount: FieldCount,\n});\n"],"names":["toOption","o","FieldComp","forwardRef","size","dataValidation","as","className","count","description","error","helpText","helpTextLabel","label","prefix","style","suffix","validationContent","rest","ref","Tag","affixes","validation","shared","clsx","styles","value","jsx","jsxs","FieldLabel","HelpText","FieldDescription","FieldAffixes","Validation","FieldCount","FieldDatalist","placement","filter","toCustomElementProps","FieldOption","props","FieldSuggestion","required","position","nofilter","multiple","onAfterChange","onAfterSelect","onBeforeChange","onBeforeMatch","onBeforeSelect","onSelectedChange","onInput","onChange","children","disabled","name","options","placeholder","readOnly","selected","type","innerRef","useRef","onSelected","useImperativeHandle","useEffect","self","handleChange","event","handleSelected","remove","textContent","prev","i","Fragment","Input","limit","Field"],"mappings":"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"}
1
+ {"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["\"use client\";\nimport type { DSSuggestionElement } from \"@digdir/designsystemet-web\";\nimport type { Placement } from \"@floating-ui/dom\";\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\tCustomReactElementProps,\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\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[] | FieldSuggestionSelected;\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: FieldSuggestionSelected[number] | string,\n): FieldSuggestionSelected[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\": dataValidation,\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 || \"ds-field\";\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\": dataValidation,\n\t\tclass: clsx(styles.field, className),\n\t\tsuppressHydrationWarning: true,\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<ds-field {...shared}>\n\t\t\t{!!label && <FieldLabel>{label}</FieldLabel>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <FieldDescription>{description}</FieldDescription>}\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={typeof as === \"string\" ? styles.input : undefined}\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 && <Validation>{validation}</Validation>}\n\t\t\t{!!count && <FieldCount data-limit={count} />}\n\t\t</ds-field>\n\t) : (\n\t\t<ds-field 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/**\n\t * @deprecated Use `data-placement` instead.\n\t */\n\t\"data-position\"?: Placement;\n\t\"data-placement\"?: Placement;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(\n\t\t{ \"data-position\": placement, \"data-nofilter\": filter, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<u-datalist\n\t\t\t\tdata-placement={placement} // Backward compatibility\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 = FieldSuggestionSelected; // Backwards compatibility\nexport type FieldComboboxProps = FieldSuggestionProps; // Backwards compatibility\n\nexport type FieldSuggestionSelected = {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: React.ReactNode;\n}[];\nexport type FieldSuggestionProps = Omit<\n\tCustomReactElementProps<DSSuggestionElement>,\n\t\"onChange\" | \"onInput\"\n> & {\n\t\"data-creatable\"?: boolean;\n\t\"data-multiple\"?: boolean;\n\t\"data-variant\"?: \"inside\";\n\tonAfterChange?: (e: CustomEvent<HTMLDataElement>) => void; // Backwards compatibility\n\tonAfterSelect?: (e: CustomEvent<HTMLDataElement>) => void; // Custom event to handle before change\n\tonBeforeChange?: (e: CustomEvent<HTMLDataElement>) => void; // Backwards compatibility\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: FieldSuggestionSelected) => void; // Allow onChange to be a function that returns void\n\toptions?: FieldSuggestionSelected;\n\tselected?: FieldSuggestionSelected; // 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<\n\t\tFieldDatalistProps,\n\t\t\"data-position\" | \"data-placement\" | \"data-nofilter\"\n\t>; // Allow datalist props to be passed down\n\nconst FieldSuggestion = forwardRef<DSSuggestionElement, FieldSuggestionProps>(\n\tfunction FieldSuggestion(\n\t\t{\n\t\t\t\"aria-required\": required,\n\t\t\t\"data-position\": position,\n\t\t\t\"data-placement\": placement,\n\t\t\t\"data-nofilter\": nofilter,\n\t\t\t\"data-multiple\": multiple,\n\t\t\tonAfterChange, // Backwards compatibility\n\t\t\tonAfterSelect,\n\t\t\tonBeforeChange, // Backwards compatibility\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<DSSuggestionElement>(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\twindow.dsWarnings === false ||\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`\\x1B[1m@mattilsynet/design - deprecation warning:\\x1B[m onAfterChange is deprecated, please use onAfterSelect instead`,\n\t\t\t\t);\n\t\t}\n\n\t\tif (onBeforeChange) {\n\t\t\tonBeforeSelect = onBeforeChange;\n\t\t\twindow.dsWarnings === false ||\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`\\x1B[1m@mattilsynet/design - deprecation warning:\\x1B[m onBeforeChange is deprecated, please use onBeforeSelect instead`,\n\t\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 DSSuggestionElement); // 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 ds-suggestion 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<ds-suggestion\n\t\t\t\tdata-multiple={multiple || undefined}\n\t\t\t\t{...toCustomElementProps(\n\t\t\t\t\t{\n\t\t\t\t\t\toncomboboxbeforeselect: onBeforeSelect,\n\t\t\t\t\t\toncomboboxbeforematch: onBeforeMatch,\n\t\t\t\t\t\toncomboboxafterselect: onAfterSelect,\n\t\t\t\t\t\tref: innerRef,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t},\n\t\t\t\t\tstyles.suggestion,\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 aria-label=\"Fjern tekst\" suppressHydrationWarning />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{!!options && (\n\t\t\t\t\t<FieldDatalist\n\t\t\t\t\t\tdata-nofilter={nofilter}\n\t\t\t\t\t\tdata-placement={placement || position}\n\t\t\t\t\t>\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</ds-suggestion>\n\t\t);\n\t},\n);\n\nexport type FieldLabelProps = React.ComponentPropsWithoutRef<\"label\">;\nconst FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(\n\tfunction FieldLabel(rest, ref) {\n\t\treturn <label suppressHydrationWarning ref={ref} {...rest} />;\n\t},\n);\n\nexport type FieldDescriptionProps = React.ComponentPropsWithoutRef<\"p\">;\nconst FieldDescription = forwardRef<\n\tHTMLParagraphElement,\n\tFieldDescriptionProps\n>(function FieldDescription(rest, ref) {\n\treturn (\n\t\t<div\n\t\t\tsuppressHydrationWarning\n\t\t\tdata-field=\"description\"\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n\nexport type FieldCountProps = React.ComponentPropsWithoutRef<\"p\"> & {\n\t/**\n\t * @deprecated Use \"data-limit\" instead\n\t */\n\t\"data-count\"?: number;\n\t\"data-limit\": number;\n};\nconst FieldCount = forwardRef<HTMLParagraphElement, FieldCountProps>(\n\tfunction FieldCount(\n\t\t{ \"data-count\": count, \"data-limit\": limit, ...rest },\n\t\tref,\n\t) {\n\t\treturn (\n\t\t\t<Validation\n\t\t\t\tdata-field=\"counter\"\n\t\t\t\tdata-limit={limit || count}\n\t\t\t\tref={ref}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\t/**\n\t * @deprecated Use Field.Suggestion instead\n\t */\n\tCombobox: FieldSuggestion, // Backwards compatibility\n\tSuggestion: FieldSuggestion,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n\tDescription: FieldDescription,\n\tLabel: FieldLabel,\n\tCount: FieldCount,\n});\n"],"names":["toOption","o","FieldComp","forwardRef","size","dataValidation","as","className","count","description","error","helpText","helpTextLabel","label","prefix","style","suffix","validationContent","rest","ref","Tag","affixes","validation","shared","clsx","styles","value","jsx","jsxs","FieldLabel","HelpText","FieldDescription","FieldAffixes","Validation","FieldCount","FieldDatalist","placement","filter","toCustomElementProps","FieldOption","props","FieldSuggestion","required","position","nofilter","multiple","onAfterChange","onAfterSelect","onBeforeChange","onBeforeMatch","onBeforeSelect","onSelectedChange","onInput","onChange","children","disabled","name","options","placeholder","readOnly","selected","type","innerRef","useRef","onSelected","useImperativeHandle","useEffect","self","handleChange","event","handleSelected","remove","textContent","prev","i","Fragment","Input","limit","Field"],"mappings":"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"}
package/mtds/field/field.stories.d.ts CHANGED
@@ -152,12 +152,14 @@ export declare const WithCharacterCount: Story;
152
152
  export declare const WithCustomDescriptionTag: Story;
153
153
  export declare const WithSuggestion: Story;
154
154
  export declare const WithSuggestionMultiple: Story;
155
+ export declare const WithSuggestionMultipleInside: Story;
155
156
  export declare const WithSuggestionCreatable: Story;
156
157
  export declare const WithSuggestionAPI: Story;
157
158
  export declare const WithSuggestionCustomFilter: Story;
158
159
  export declare const ReactWithSuggestion: Story;
159
160
  export declare const ReactWithSuggestionWithChildren: Story;
160
161
  export declare const ReactWithSuggestionMultiple: Story;
162
+ export declare const ReactWithSuggestionMultipleInside: Story;
161
163
  export declare const ReactWithSuggestionCreatable: Story;
162
164
  export declare const ReactWithSuggestionLong: Story;
163
165
  export declare const ReactWithSuggestionCustomFilter: Story;