@helsenorge/designsystem-react 14.8.0 → 14.9.1

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 (5) hide show
  1. package/lib/CHANGELOG.md +13 -0
  2. package/lib/FormGroup.js +3 -1
  3. package/lib/FormGroup.js.map +1 -1
  4. package/lib/components/FormGroup/FormGroup.d.ts +2 -0
  5. package/package.json +1 -1
package/lib/CHANGELOG.md CHANGED
@@ -1,4 +1,17 @@
1
1
 
2
+ ## [14.9.1](https://github.com/helsenorge/designsystem/compare/v14.9.0...v14.9.1) (2026-05-12)
3
+
4
+ ### Bug Fixes
5
+
6
+ * **datepicker:** onblur skal trigges når popup lukkes ([dfc3193](https://github.com/helsenorge/designsystem/commit/dfc31937fae8d1dfa63c221792e340355db59101)), closes [#377127](https://github.com/helsenorge/designsystem/issues/377127)
7
+
8
+ ## [14.9.0](https://github.com/helsenorge/designsystem/compare/v14.8.0...v14.9.0) (2026-05-11)
9
+
10
+ ### Features
11
+
12
+ * **daterangepicker:** from og to value kan være undefined og null ([b1e2b07](https://github.com/helsenorge/designsystem/commit/b1e2b07037b932b1ceb35a5f2998fb0d8a224f3a)), closes [#377492](https://github.com/helsenorge/designsystem/issues/377492)
13
+ * **formgroup:** ny prop legendid ([5d73bdc](https://github.com/helsenorge/designsystem/commit/5d73bdcd1940f268b7aef79e602f8bf1d30044cf)), closes [#377978](https://github.com/helsenorge/designsystem/issues/377978)
14
+
2
15
  ## [14.8.0](https://github.com/helsenorge/designsystem/compare/v14.7.3...v14.8.0) (2026-05-11)
3
16
 
4
17
  ### Features
package/lib/FormGroup.js CHANGED
@@ -16,7 +16,7 @@ import React, { useId, useState } from "react";
16
16
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
17
17
  import formGroupStyles from "./components/FormGroup/styles.module.scss";
18
18
  const FormGroup = (props) => {
19
- const { ariaLabelledBy, className, errorTextId: errorTextIdProp, fieldsetClassName, formFieldTag, legendClassName, onColor = FormOnColor.onwhite, size = FormSize.medium, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId, errorMessageRef, legendHtmlMarkup = "h5", titleHtmlMarkup = "h4" } = props;
19
+ const { ariaLabelledBy, className, errorTextId: errorTextIdProp, fieldsetClassName, formFieldTag, legendClassName, legendId, onColor = FormOnColor.onwhite, size = FormSize.medium, error, name, htmlMarkup = "fieldset", renderError = true, errorWrapperClassName, errorWrapperTestId, errorMessageRef, legendHtmlMarkup = "h5", titleHtmlMarkup = "h4" } = props;
20
20
  const [checkedRadioId, setCheckedRadioId] = useState();
21
21
  const radioGroupId = useId();
22
22
  const errorTextId = useIdWithFallback(errorTextIdProp);
@@ -91,6 +91,7 @@ const FormGroup = (props) => {
91
91
  return /* @__PURE__ */ jsxs("div", { children: [htmlMarkup === "div" && /* @__PURE__ */ jsxs("div", {
92
92
  className: fieldsetClasses,
93
93
  children: [props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(CustomTagForLegend, {
94
+ id: legendId,
94
95
  className: legendClasses,
95
96
  children: [props.legend, formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag)]
96
97
  }) }), React.Children.map(props.children, mapFormComponent)]
@@ -99,6 +100,7 @@ const FormGroup = (props) => {
99
100
  name: props.fieldsetName,
100
101
  className: fieldsetClasses,
101
102
  children: [props.legend && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("legend", {
103
+ id: legendId,
102
104
  className: legendClasses,
103
105
  children: [props.legend, formFieldTag && isComponent(formFieldTag, FormFieldTag_default) && React.cloneElement(formFieldTag)]
104
106
  }) }), React.Children.map(props.children, mapFormComponent)]
package/lib/FormGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FormGroup.js","names":["FormGroup: React.FC<FormGroupProps>"],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioButtonProps } from '../RadioButton/RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport RadioButton from '../RadioButton/RadioButton';\nimport { getRadioLabelClasses } from '../RadioButton/utils';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n ariaLabelledBy?: string;\n /** title for the the fieldset */\n title?: string;\n /** text placed in the legend tag of the fieldset */\n legend?: string;\n /** Items in the FormGroup component */\n children?: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds custom classes to the errorWrapper. */\n errorWrapperClassName?: string;\n /** Adds custom classes to the fieldset element. */\n fieldsetClassName?: string;\n /** Sets a tag that describes whether the form group is required or optional */\n formFieldTag?: React.ReactNode;\n /** Adds custom classes to the legend element. */\n legendClassName?: string;\n /** Changes the visuals of the formgroup */\n onColor?: keyof typeof FormOnColor;\n /** Changes the visuals of the formgroup */\n size?: keyof typeof FormSize;\n /** Error message */\n error?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets the data-testid attribute for the error-wrapper. */\n errorWrapperTestId?: string;\n /** Unique name for the child input element */\n name?: string;\n /** Unique name for the fieldset */\n fieldsetName?: string;\n /** Sets div instead of fieldset tag */\n htmlMarkup?: FormGroupTags;\n /** Markup for legend if formgroup htmlMarkup is div*/\n legendHtmlMarkup?: TitleTags;\n /** Markup for title */\n titleHtmlMarkup?: TitleTags;\n /** Renders the error component (Default: true) */\n renderError?: boolean;\n /** Ref passed to the error message element */\n errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n const {\n ariaLabelledBy,\n className,\n errorTextId: errorTextIdProp,\n fieldsetClassName,\n formFieldTag,\n legendClassName,\n onColor = FormOnColor.onwhite,\n size = FormSize.medium,\n error,\n name,\n htmlMarkup = 'fieldset',\n renderError = true,\n errorWrapperClassName,\n errorWrapperTestId,\n errorMessageRef,\n legendHtmlMarkup = 'h5',\n titleHtmlMarkup = 'h4',\n } = props;\n const [checkedRadioId, setCheckedRadioId] = useState<string>();\n const radioGroupId = useId();\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const onDark = onColor === FormOnColor.ondark;\n const isLarge = size === FormSize.large;\n const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n const titleClasses = classNames({\n [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n });\n\n const CustomTagForLegend = legendHtmlMarkup;\n\n const legendClasses = classNames(\n formGroupStyles['field-set__legend'],\n {\n [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n },\n legendClassName\n );\n\n const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n if (isComponent<FormLayoutProps>(child, FormLayout)) {\n return React.cloneElement(child, {\n size,\n mapHelper: mapFormComponent,\n });\n } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n return React.cloneElement(child, {\n onColor,\n size,\n error,\n renderError: false,\n errorTextId: errorTextId,\n });\n } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n size,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n return React.cloneElement(child, {\n inputId: radioId,\n name: name ?? child.props.name,\n onColor,\n size,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n setCheckedRadioId(event.target.id);\n if (child.props.onChange) child.props.onChange(event);\n },\n error: !!error,\n errorTextId: errorTextId,\n labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n });\n } else if (isComponent<InputProps>(child, Input)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n size,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<TextareaProps>(child, Textarea)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<SelectProps>(child, Select)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<SliderProps>(child, Slider)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n error: !!error,\n errorTextId: errorTextId,\n });\n }\n return child;\n };\n\n const formGroupContent = (): React.ReactNode => {\n return (\n <div>\n {htmlMarkup === 'div' && (\n <div className={fieldsetClasses}>\n {props.legend && (\n <>\n <CustomTagForLegend className={legendClasses}>\n {props.legend}\n {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n </CustomTagForLegend>\n </>\n )}\n {React.Children.map(props.children, mapFormComponent)}\n </div>\n )}\n {htmlMarkup === 'fieldset' && (\n <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n {props.legend && (\n <>\n <legend className={legendClasses}>\n {props.legend}\n {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n </legend>\n </>\n )}\n {React.Children.map(props.children, mapFormComponent)}\n </fieldset>\n )}\n </div>\n );\n };\n\n return (\n <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n {props.title && (\n <Title\n className={titleClasses}\n htmlMarkup={titleHtmlMarkup}\n appearance={'title4'}\n margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n >\n {props.title}\n </Title>\n )}\n <ErrorWrapper\n className={errorWrapperClassName}\n errorText={error}\n testId={errorWrapperTestId}\n errorTextId={errorTextId}\n errorMessageRef={errorMessageRef}\n renderError={renderError}\n >\n {formGroupContent()}\n </ErrorWrapper>\n </div>\n );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}
1
+ {"version":3,"file":"FormGroup.js","names":["FormGroup: React.FC<FormGroupProps>"],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { CheckboxProps } from '../Checkbox/Checkbox';\nimport type { FormFieldTagProps } from '../FormFieldTag';\nimport type { FormLayoutProps } from '../FormLayout';\nimport type { InputProps } from '../Input/Input';\nimport type { RadioButtonProps } from '../RadioButton/RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag from '../FormFieldTag';\nimport FormLayout from '../FormLayout';\nimport Input from '../Input/Input';\nimport RadioButton from '../RadioButton/RadioButton';\nimport { getRadioLabelClasses } from '../RadioButton/utils';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\nimport Title, { type TitleTags } from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n ariaLabelledBy?: string;\n /** title for the the fieldset */\n title?: string;\n /** text placed in the legend tag of the fieldset */\n legend?: string;\n /** id for the legend tag */\n legendId?: string;\n /** Items in the FormGroup component */\n children?: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds custom classes to the errorWrapper. */\n errorWrapperClassName?: string;\n /** Adds custom classes to the fieldset element. */\n fieldsetClassName?: string;\n /** Sets a tag that describes whether the form group is required or optional */\n formFieldTag?: React.ReactNode;\n /** Adds custom classes to the legend element. */\n legendClassName?: string;\n /** Changes the visuals of the formgroup */\n onColor?: keyof typeof FormOnColor;\n /** Changes the visuals of the formgroup */\n size?: keyof typeof FormSize;\n /** Error message */\n error?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets the data-testid attribute for the error-wrapper. */\n errorWrapperTestId?: string;\n /** Unique name for the child input element */\n name?: string;\n /** Unique name for the fieldset */\n fieldsetName?: string;\n /** Sets div instead of fieldset tag */\n htmlMarkup?: FormGroupTags;\n /** Markup for legend if formgroup htmlMarkup is div*/\n legendHtmlMarkup?: TitleTags;\n /** Markup for title */\n titleHtmlMarkup?: TitleTags;\n /** Renders the error component (Default: true) */\n renderError?: boolean;\n /** Ref passed to the error message element */\n errorMessageRef?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const FormGroup: React.FC<FormGroupProps> = (props: FormGroupProps) => {\n const {\n ariaLabelledBy,\n className,\n errorTextId: errorTextIdProp,\n fieldsetClassName,\n formFieldTag,\n legendClassName,\n legendId,\n onColor = FormOnColor.onwhite,\n size = FormSize.medium,\n error,\n name,\n htmlMarkup = 'fieldset',\n renderError = true,\n errorWrapperClassName,\n errorWrapperTestId,\n errorMessageRef,\n legendHtmlMarkup = 'h5',\n titleHtmlMarkup = 'h4',\n } = props;\n const [checkedRadioId, setCheckedRadioId] = useState<string>();\n const radioGroupId = useId();\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const onDark = onColor === FormOnColor.ondark;\n const isLarge = size === FormSize.large;\n const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n const titleClasses = classNames({\n [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n });\n\n const CustomTagForLegend = legendHtmlMarkup;\n\n const legendClasses = classNames(\n formGroupStyles['field-set__legend'],\n {\n [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n },\n legendClassName\n );\n\n const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n if (isComponent<FormLayoutProps>(child, FormLayout)) {\n return React.cloneElement(child, {\n size,\n mapHelper: mapFormComponent,\n });\n } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n return React.cloneElement(child, {\n onColor,\n size,\n error,\n renderError: false,\n errorTextId: errorTextId,\n });\n } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n size,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n return React.cloneElement(child, {\n inputId: radioId,\n name: name ?? child.props.name,\n onColor,\n size,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n setCheckedRadioId(event.target.id);\n if (child.props.onChange) child.props.onChange(event);\n },\n error: !!error,\n errorTextId: errorTextId,\n labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n });\n } else if (isComponent<InputProps>(child, Input)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n size,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<TextareaProps>(child, Textarea)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<SelectProps>(child, Select)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<SliderProps>(child, Slider)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n error: !!error,\n errorTextId: errorTextId,\n });\n }\n return child;\n };\n\n const formGroupContent = (): React.ReactNode => {\n return (\n <div>\n {htmlMarkup === 'div' && (\n <div className={fieldsetClasses}>\n {props.legend && (\n <>\n <CustomTagForLegend id={legendId} className={legendClasses}>\n {props.legend}\n {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n </CustomTagForLegend>\n </>\n )}\n {React.Children.map(props.children, mapFormComponent)}\n </div>\n )}\n {htmlMarkup === 'fieldset' && (\n <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n {props.legend && (\n <>\n <legend id={legendId} className={legendClasses}>\n {props.legend}\n {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n </legend>\n </>\n )}\n {React.Children.map(props.children, mapFormComponent)}\n </fieldset>\n )}\n </div>\n );\n };\n\n return (\n <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses}>\n {props.title && (\n <Title\n className={titleClasses}\n htmlMarkup={titleHtmlMarkup}\n appearance={'title4'}\n margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}\n >\n {props.title}\n </Title>\n )}\n <ErrorWrapper\n className={errorWrapperClassName}\n errorText={error}\n testId={errorWrapperTestId}\n errorTextId={errorTextId}\n errorMessageRef={errorMessageRef}\n renderError={renderError}\n >\n {formGroupContent()}\n </ErrorWrapper>\n </div>\n );\n};\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}
package/lib/components/FormGroup/FormGroup.d.ts CHANGED
@@ -9,6 +9,8 @@ export interface FormGroupProps {
9
9
  title?: string;
10
10
  /** text placed in the legend tag of the fieldset */
11
11
  legend?: string;
12
+ /** id for the legend tag */
13
+ legendId?: string;
12
14
  /** Items in the FormGroup component */
13
15
  children?: React.ReactNode;
14
16
  /** Adds custom classes to the element. */
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@helsenorge/designsystem-react",
3
3
  "sideEffects": false,
4
4
  "private": false,
5
- "version": "14.8.0",
5
+ "version": "14.9.1",
6
6
  "description": "The official design system for Helsenorge built with React.",
7
7
  "repository": {
8
8
  "type": "git",