@mattilsynet/design 1.2.2 → 1.2.3

package/mtds/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\nimport clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport { HelpText } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\ntype FieldBaseProps = {\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: Array<string | { label: string; value: string }>;\n\tprefix?: string;\n\treadOnly?: boolean; // Allow readoOnly also on <select>\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\toptions,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst valid = validation || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{options\n\t\t\t\t\t\t?.map((o) => (typeof o === \"string\" ? { label: o, value: o } : o))\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag className={styles.input} ref={ref} {...rest} />\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={styles.input}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!valid && <div className={styles.validation}>{valid}</div>}\n\t\t\t{!!count && <p data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\"> & {\n\t\"data-nofilter\"?: boolean;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(props, ref) {\n\t\treturn <u-datalist ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\n\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldComboboxProps = ReactUcombobox;\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(props, ref) {\n\t\treturn <u-combobox ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n});\n"],"names":["FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","options","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","jsx","Fragment","o","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldCombobox","Field"],"mappings":"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"}
+{"version":3,"file":"field.js","sources":["../../designsystem/field/field.tsx"],"sourcesContent":["import type {\n\tReactUcombobox,\n\tUHTMLComboboxElement,\n} from \"@u-elements/u-combobox\";\nimport clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport { HelpText } from \"../react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\nimport { toCustomElementProps } from \"../utils\";\n\ntype FieldBaseProps = {\n\tcount?: number;\n\tdescription?: React.ReactNode;\n\terror?: React.ReactNode; // Kept for backwards compatibility\n\thelpText?: React.ReactNode;\n\thelpTextLabel?: string;\n\tlabel?: React.ReactNode;\n\toptions?: Array<string | { label: string; value: string }>;\n\tprefix?: string;\n\treadOnly?: boolean; // Allow readoOnly also on <select>\n\tsuffix?: string;\n\tvalidation?: React.ReactNode;\n};\n\nexport type FieldProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<As, FieldBaseProps>;\n\ntype FieldComponent = <As extends React.ElementType = \"div\">(\n\tprops: FieldProps<As>,\n) => JSX.Element;\n\nexport const FieldComp: FieldComponent = forwardRef<null>(function Field<\n\tAs extends React.ElementType = \"div\",\n>(\n\t{\n\t\t\"data-size\": size,\n\t\tas,\n\t\tclassName,\n\t\tcount,\n\t\tdescription,\n\t\terror,\n\t\thelpText,\n\t\thelpTextLabel,\n\t\tlabel,\n\t\toptions,\n\t\tprefix,\n\t\tstyle,\n\t\tsuffix,\n\t\tvalidation,\n\t\t...rest\n\t}: FieldProps<As>,\n\tref?: PolymorphicRef<As>,\n) {\n\tconst Tag = as || \"div\";\n\tconst affixes = !!suffix || !!prefix;\n\tconst valid = validation || error; // error kept for backwards compatibility\n\tconst shared = {\n\t\t\"data-size\": size,\n\t\tclassName: clsx(styles.field, className),\n\t\tstyle,\n\t};\n\n\t// Render options if select\n\tif (as === \"select\" && !rest.children)\n\t\tObject.assign(rest, {\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{options\n\t\t\t\t\t\t?.map((o) => (typeof o === \"string\" ? { label: o, value: o } : o))\n\t\t\t\t\t\t.map(({ label, value }) => (\n\t\t\t\t\t\t\t<option key={value} value={value}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t),\n\t\t});\n\n\t// Using suppressHydrationWarning to avoid Next.js vs field-observer.ts hydration conflict\n\treturn as ? (\n\t\t<div {...shared}>\n\t\t\t{!!label && <label suppressHydrationWarning>{label}</label>}\n\t\t\t{!!helpText && <HelpText aria-label={helpTextLabel}>{helpText}</HelpText>}\n\t\t\t{!!description && <p>{description}</p>}\n\t\t\t{affixes ? (\n\t\t\t\t<FieldAffixes>\n\t\t\t\t\t{!!prefix && <span>{prefix}</span>}\n\t\t\t\t\t<Tag className={styles.input} ref={ref} {...rest} />\n\t\t\t\t\t{!!suffix && <span>{suffix}</span>}\n\t\t\t\t</FieldAffixes>\n\t\t\t) : (\n\t\t\t\t<Tag\n\t\t\t\t\tclassName={styles.input}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{!!valid && <div className={styles.validation}>{valid}</div>}\n\t\t\t{!!count && <p data-count={count} />}\n\t\t</div>\n\t) : (\n\t\t<div ref={ref} {...shared} {...rest} />\n\t);\n}) as FieldComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nconst FieldAffixes = forwardRef<HTMLDivElement, FieldProps>(\n\tfunction FieldAffixes({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<div className={clsx(styles.affixes, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n\nexport type FieldDatalistProps = React.ComponentPropsWithoutRef<\"datalist\"> & {\n\t\"data-nofilter\"?: boolean;\n};\n\nconst FieldDatalist = forwardRef<HTMLDataListElement, FieldDatalistProps>(\n\tfunction FieldDatalist(props, ref) {\n\t\treturn <u-datalist ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldOptionProps = React.ComponentPropsWithoutRef<\"option\">;\n\nconst FieldOption = forwardRef<HTMLOptionElement, FieldOptionProps>(\n\tfunction FieldOption(props, ref) {\n\t\treturn <u-option ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport type FieldComboboxProps = ReactUcombobox & {\n\t\"data-multiple\"?: boolean;\n\t\"data-creatable\"?: boolean;\n};\n\nconst FieldCombobox = forwardRef<UHTMLComboboxElement, FieldComboboxProps>(\n\tfunction FieldCombobox(props, ref) {\n\t\treturn <u-combobox ref={ref} {...toCustomElementProps(props)} />;\n\t},\n);\n\nexport const Field = Object.assign(FieldComp, {\n\tAffixes: FieldAffixes,\n\tCombobox: FieldCombobox,\n\tDatalist: FieldDatalist,\n\tOption: FieldOption,\n});\n"],"names":["FieldComp","forwardRef","size","as","className","count","description","error","helpText","helpTextLabel","label","options","prefix","style","suffix","validation","rest","ref","Tag","affixes","valid","shared","clsx","styles","jsx","Fragment","o","value","jsxs","HelpText","FieldAffixes","FieldDatalist","props","toCustomElementProps","FieldOption","FieldCombobox","Field"],"mappings":"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"}

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

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