@helsenorge/designsystem-react 13.0.0-workspaces-beta.0 → 13.0.0-workspaces-beta.1

package/lib/components/Toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Toggle: React.FC<ToggleProps>"],"sources":["../../../src/components/Toggle/Toggle.tsx","../../../src/components/Toggle/index.ts"],"sourcesContent":["import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={classNames(styles['toggle-container__toggle-group'])}>\n        <input\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={`${subLabel ? subLabelId + ' ' : undefined} ${statusText ? toggleId + '-status' : undefined}`}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"17\"\n              height=\"13\"\n              viewBox=\"0 0 17 13\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={classNames(styles['toggle-container__label'])}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Toggle: React.FC<ToggleProps>"],"sources":["../../../src/components/Toggle/Toggle.tsx","../../../src/components/Toggle/index.ts"],"sourcesContent":["import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={classNames(styles['toggle-container__toggle-group'])}>\n        <input\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={`${subLabel ? subLabelId + ' ' : undefined} ${statusText ? toggleId + '-status' : undefined}`}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"17\"\n              height=\"13\"\n              viewBox=\"0 0 17 13\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={classNames(styles['toggle-container__label'])}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}

package/lib/components/Validation/index.js

@@ -61,7 +61,7 @@ import { t as Input_default } from "../../Input2.js";
 import { t as List_default } from "../../List.js";
 import { t as RadioButton_default } from "../../RadioButton2.js";
 import React, { useId } from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var ErrorListItem = (props) => {
@@ -87,7 +87,7 @@ var ValidationSummary = (props) => {
 	const titleId = useId();
 	const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;
 	const visuallyHidden = props.visuallyHidden;
-	const summaryClasses = cn(styles["validation__summary"], {
+	const summaryClasses = classNames(styles["validation__summary"], {
 		[styles["validation__summary--visible"]]: hasErrors && !visuallyHidden,
 		[styles["validation__summary--sr-only"]]: visuallyHidden
 	});

package/lib/components/Validation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ErrorListItem: React.FC<ErrorElementProps>","ErrorList: React.FC<ErrorListProps>","ValidationSummary: React.FC<ValidationSummaryProps>"],"sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx","../../../src/components/Validation/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useId();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\nimport Input, { InputProps } from '../Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n","import Validation from './Validation';\nexport * from './Validation';\nexport default Validation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,iBAA6C,UAAS;CAC1D,MAAM,eAAe,OAAgC,YAAqC;AACxF,SAAO,gBAAgB;AACvB,MAAI,SAAS,MAAO,UAAS,OAAO;;AAGtC,KAAI,MAAM,MAAM,IACd,QACE,oBAAC,oBAAA;EAAW,MAAM,IAAI,MAAM;EAAQ,UAAU,MAAY,YAAY,GAAG,MAAM,MAAM,IAAI;YACtF,MAAM,MAAM;GACF;AAIjB,QAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,MAAM,SAAA,CAAW;;AAGnC,IAAA,wBAAe;ACjBf,IAAMC,aAAsC,UAC1C,oBAAC,cAAA,EAAA,UACE,OAAO,QAAQ,MAAM,OAAO,CAAC,KAAK,CAAC,MAAM,WACxC,oBAAC,aAAK,MAAA,EAAA,UACJ,oBAAC,uBAAA;CAAoB;CAAa;EAAS,EAAA,EAD7B,KAEJ,CACZ,EAAA,CACG;AAGT,IAAA,oBAAe;ACGf,IAAMC,qBAAsD,UAAS;CACnE,MAAM,EAAE,uBAAuB,SAAS;CACxC,MAAM,UAAU,OAAO;CAEvB,MAAM,YAAY,CAAC,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,OAAO,CAAC,SAAS;CAC1E,MAAM,iBAAiB,MAAM;CAE7B,MAAM,iBAAiB,GAAW,OAAO,wBAAwB;GAC9D,OAAO,kCAAkC,aAAa,CAAC;GACvD,OAAO,kCAAkC;EAC3C,CAAC;AAEF,QACE,qBAAC,OAAA;EACC,MAAM;EACN,eAAa;EACb,aAAW;EACX,iBAAe;EACf,mBAAiB,aAAa,MAAM,aAAa,UAAU,KAAA;EAC3D,WAAW;aAEV,aACC,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,cACL,oBAAC,eAAA;GAAM,YAAW;GAAS,IAAI;GAAS,YAAY;GAAsB,QAAQ;IAAE,WAAW;IAAG,cAAc;IAAG;aAChH,MAAM;IACD,EAEV,oBAAC,mBAAA,EAAU,QAAQ,MAAM,QAAA,CAAW,CAAA,EAAA,CACnC,EAEJ,MAAM,SAAA;GACH;;AAIV,IAAA,4BAAe;ACzBf,MAAa,aAAa,MAAM,YAAY,OAAwB,QAA4C;CAC9G,MAAM,uBAAuB,OAAO;CAEpC,MAAM,oBAA0D,UAAwD;AACtH,SAAO,MAAM,aAAa,OAAO;GAC/B,GAAG,MAAM;GACT,uBAAuB;GACxB,CAAC;;CAGJ,MAAM,eAAe,UAA4C;AAC/D,MACE,YAA4B,OAAO,kBAAU,IAC7C,YAA2B,OAAO,iBAAS,IAC3C,YAA8B,OAAO,oBAAY,IACjD,YAA2B,OAAO,iBAAS,IAC3C,YAAwB,OAAO,cAAM,IACrC,YAAyB,OAAO,eAAO,IACvC,YAAyB,OAAO,eAAO,IACvC,2BAAuD,OAAO,wBAAwB,IACtF,2BAAuD,OAAO,aAAa,IAC3E,2BAAuD,OAAO,WAAW,CAEzE,QAAO,iBAA6C,MAAM;AAE5D,MAAI,MAAM,eAAe,MAAM,IAAI,MAAM,SAAS,MAAM,SACtD,QAAO,MAAM,SAAS,IAAI,MAAM,MAAM,WAAW,YAA2B;AAC1E,UAAO,YAAY,QAAM;IACzB;AAGJ,SAAO;;AAGT,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAA;EAAI,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,WAAW,MAAM;EAAgB;YACxG,MAAM,SAAS,IAAI,MAAM,WAAW,UAA2B,YAAY,MAAM,CAAC;GAC/E,EACN,oBAAC,2BAAA;EAAkB,YAAY,MAAM;EAAY,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;GAAyB,CAAA,EAAA,CACrH;EAEL;AAEF,WAAW,cAAc;AC5EzB,IAAA,qBD8Ee"}
+{"version":3,"file":"index.js","names":["ErrorListItem: React.FC<ErrorElementProps>","ErrorList: React.FC<ErrorListProps>","ValidationSummary: React.FC<ValidationSummaryProps>"],"sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx","../../../src/components/Validation/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useId();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\nimport Input, { InputProps } from '../Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n","import Validation from './Validation';\nexport * from './Validation';\nexport default Validation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,iBAA6C,UAAS;CAC1D,MAAM,eAAe,OAAgC,YAAqC;AACxF,SAAO,gBAAgB;AACvB,MAAI,SAAS,MAAO,UAAS,OAAO;;AAGtC,KAAI,MAAM,MAAM,IACd,QACE,oBAAC,oBAAA;EAAW,MAAM,IAAI,MAAM;EAAQ,UAAU,MAAY,YAAY,GAAG,MAAM,MAAM,IAAI;YACtF,MAAM,MAAM;GACF;AAIjB,QAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,MAAM,SAAA,CAAW;;AAGnC,IAAA,wBAAe;ACjBf,IAAMC,aAAsC,UAC1C,oBAAC,cAAA,EAAA,UACE,OAAO,QAAQ,MAAM,OAAO,CAAC,KAAK,CAAC,MAAM,WACxC,oBAAC,aAAK,MAAA,EAAA,UACJ,oBAAC,uBAAA;CAAoB;CAAa;EAAS,EAAA,EAD7B,KAEJ,CACZ,EAAA,CACG;AAGT,IAAA,oBAAe;ACGf,IAAMC,qBAAsD,UAAS;CACnE,MAAM,EAAE,uBAAuB,SAAS;CACxC,MAAM,UAAU,OAAO;CAEvB,MAAM,YAAY,CAAC,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,OAAO,CAAC,SAAS;CAC1E,MAAM,iBAAiB,MAAM;CAE7B,MAAM,iBAAiB,WAAW,OAAO,wBAAwB;GAC9D,OAAO,kCAAkC,aAAa,CAAC;GACvD,OAAO,kCAAkC;EAC3C,CAAC;AAEF,QACE,qBAAC,OAAA;EACC,MAAM;EACN,eAAa;EACb,aAAW;EACX,iBAAe;EACf,mBAAiB,aAAa,MAAM,aAAa,UAAU,KAAA;EAC3D,WAAW;aAEV,aACC,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,cACL,oBAAC,eAAA;GAAM,YAAW;GAAS,IAAI;GAAS,YAAY;GAAsB,QAAQ;IAAE,WAAW;IAAG,cAAc;IAAG;aAChH,MAAM;IACD,EAEV,oBAAC,mBAAA,EAAU,QAAQ,MAAM,QAAA,CAAW,CAAA,EAAA,CACnC,EAEJ,MAAM,SAAA;GACH;;AAIV,IAAA,4BAAe;ACzBf,MAAa,aAAa,MAAM,YAAY,OAAwB,QAA4C;CAC9G,MAAM,uBAAuB,OAAO;CAEpC,MAAM,oBAA0D,UAAwD;AACtH,SAAO,MAAM,aAAa,OAAO;GAC/B,GAAG,MAAM;GACT,uBAAuB;GACxB,CAAC;;CAGJ,MAAM,eAAe,UAA4C;AAC/D,MACE,YAA4B,OAAO,kBAAU,IAC7C,YAA2B,OAAO,iBAAS,IAC3C,YAA8B,OAAO,oBAAY,IACjD,YAA2B,OAAO,iBAAS,IAC3C,YAAwB,OAAO,cAAM,IACrC,YAAyB,OAAO,eAAO,IACvC,YAAyB,OAAO,eAAO,IACvC,2BAAuD,OAAO,wBAAwB,IACtF,2BAAuD,OAAO,aAAa,IAC3E,2BAAuD,OAAO,WAAW,CAEzE,QAAO,iBAA6C,MAAM;AAE5D,MAAI,MAAM,eAAe,MAAM,IAAI,MAAM,SAAS,MAAM,SACtD,QAAO,MAAM,SAAS,IAAI,MAAM,MAAM,WAAW,YAA2B;AAC1E,UAAO,YAAY,QAAM;IACzB;AAGJ,SAAO;;AAGT,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAA;EAAI,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,WAAW,MAAM;EAAgB;YACxG,MAAM,SAAS,IAAI,MAAM,WAAW,UAA2B,YAAY,MAAM,CAAC;GAC/E,EACN,oBAAC,2BAAA;EAAkB,YAAY,MAAM;EAAY,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;GAAyB,CAAA,EAAA,CACrH;EAEL;AAEF,WAAW,cAAc;AC5EzB,IAAA,qBD8Ee"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "13.0.0-workspaces-beta.0",
+  "version": "13.0.0-workspaces-beta.1",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",