@helsenorge/designsystem-react 7.3.1 → 7.5.0

package/components/PopMenu/PopMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopMenu.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const openRef = useRef<HTMLButtonElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n  const { isHovered: openButtonIsHovered } = useHover(openRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={closeRef}\n          popOverRef={popOverRef}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const handleOnClick = (isOpen: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(isOpen);\n  };\n\n  const openButton = (\n    <button\n      ref={openRef}\n      data-testid={openButtonTestId}\n      className={buttonClasses}\n      aria-label={openButtonAriaLabel || 'Se mer'}\n      onClick={(e): void => handleOnClick(true, e)}\n      type=\"button\"\n    >\n      <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n    </button>\n  );\n\n  const closeButton = (\n    <Close\n      ariaLabel={closeButtonAriaLabel}\n      color=\"black\"\n      className={buttonClasses}\n      testId={closeButtonTestId}\n      ref={closeRef}\n      onClick={(e): void => handleOnClick(false, e)}\n      small={mobile}\n    />\n  );\n\n  return (\n    <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {!isOpen ? openButton : closeButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","openButtonIsHovered","useHover","mobileIconSize","IconSize","handleClick","cb","renderChildren","isComponent","LinkList","React","PopOver","child","event","handleOnClick","e","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":"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"}
+{"version":3,"file":"PopMenu.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef<HTMLDivElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={iconRef}\n          popOverRef={popOverRef}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","PopMenu","props","triggerButtonRef","useRef","iconRef","popOverRef","outerRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","svgIcon","labelText","labelTextPosition","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","triggerButtonIsHovered","useHover","mobileIconSize","IconSize","handleClick","cb","renderChildren","isComponent","LinkList","React","PopOver","child","event","toggleOpenOnClick","e","iconComponent","LazyIcon","Icon","openIcon","VerticalDots","getColor","closeIcon","X","triggerButton","AnalyticsId","PopMenu$1"],"mappings":"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"}

package/components/PopMenu/PopMenu.stories.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StoryObj } from '@storybook/react';
-import { PopMenuVariant } from './PopMenu';
+import { PopMenuLabelPosition, PopMenuVariant } from './PopMenu';
 declare const meta: {
     title: string;
     component: React.FC<import("./PopMenu").PopMenuProps>;
@@ -24,10 +24,16 @@ declare const meta: {
             control: string;
             options: typeof PopMenuVariant;
         };
+        labelTextPosition: {
+            control: string;
+            options: typeof PopMenuLabelPosition;
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const CustomIcon: Story;
+export declare const WithLabel: Story;
 export declare const HorizontalScroll: Story;
 export declare const CenteredOverflow: Story;

package/components/PopMenu/index.js

@@ -1,7 +1,8 @@
 import e from "./PopMenu.js";
-import { PopMenu as t, PopMenuVariant as a } from "./PopMenu.js";
+import { PopMenu as r, PopMenuLabelPosition as t, PopMenuVariant as a } from "./PopMenu.js";
 export {
-  t as PopMenu,
+  r as PopMenu,
+  t as PopMenuLabelPosition,
   a as PopMenuVariant,
   e as default
 };

package/components/PopMenu/styles.module.scss

@@ -11,7 +11,7 @@
   justify-content: center;
   align-items: center;
   height: 3rem;
-  width: 3rem;
+  min-width: 3rem;
 
   &:focus {
     border: 0.1875rem solid $black;

package/components/PromoPanel/PromoPanel.stories.d.ts

@@ -15,6 +15,7 @@ declare const meta: {
         title: string;
         children: string;
         href: string;
+        target: "_parent";
         color: "neutral";
         illustration: "Doctor";
     };

package/components/RadioButton/RadioButton.js

@@ -1,13 +1,14 @@
-import p, { useState as D } from "react";
+import p, { useState as q } from "react";
 import l from "classnames";
 import { FormMode as i, FormSize as W, AnalyticsId as $ } from "../../constants.js";
 import { usePseudoClasses as G } from "../../hooks/usePseudoClasses.js";
 import { useUuid as H } from "../../hooks/useUuid.js";
-import { isMutableRefObject as J, mergeRefs as K } from "../../utils/refs.js";
-import { uuid as Q } from "../../utils/uuid.js";
-import { getLabelText as V, renderLabelAsParent as X } from "../Label/Label.js";
+import { getAriaDescribedBy as J } from "../../utils/accessibility.js";
+import { isMutableRefObject as K, mergeRefs as Q } from "../../utils/refs.js";
+import { uuid as V } from "../../utils/uuid.js";
+import { getLabelText as X, renderLabelAsParent as Y } from "../Label/Label.js";
 import e from "../RadioButton/styles.module.scss";
-const ie = (s, o, a, b) => {
+const se = (s, o, a, b) => {
   const n = o === "oninvalid", r = s === b;
   return l({
     [e["radio-button-label__large--on-grey"]]: a && o === "ongrey" && !r,
@@ -22,26 +23,26 @@ const ie = (s, o, a, b) => {
     onChange: n,
     disabled: r,
     label: f,
-    inputId: _ = Q(),
+    inputId: _ = V(),
     mode: d = i.onwhite,
     name: w = _,
-    size: R,
+    size: B,
     errorText: u,
-    error: k = !!u,
-    errorTextId: B,
-    value: N = V(f),
+    error: R = !!u,
+    errorTextId: k,
+    value: N = X(f),
     testId: L,
     required: x,
     labelClassNames: I,
     ...S
-  } = s, g = k || d === i.oninvalid, y = d === i.ondark, h = d === i.onblueberry, T = d === i.oninvalid, t = R === W.large, [j, E] = D(b), { refObject: F, isFocused: c } = G(J(o) ? o : null), z = K([o, F]), C = H(B), A = l(e["radio-button-wrapper"], {
+  } = s, g = R || d === i.oninvalid, y = d === i.ondark, h = d === i.onblueberry, T = d === i.oninvalid, t = B === W.large, [A, E] = q(b), { refObject: F, isFocused: c } = G(K(o) ? o : null), j = Q([o, F]), C = H(k), z = l(e["radio-button-wrapper"], {
     [e["radio-button-wrapper--with-error"]]: u,
     [e["radio-button-wrapper__large"]]: t,
     [e["radio-button-wrapper__large--focused"]]: t && c,
-    [e["radio-button-wrapper__large--selected"]]: t && j && c,
+    [e["radio-button-wrapper__large--selected"]]: t && A && c,
     [e["radio-button-wrapper__large--invalid"]]: t && T && c,
     [e["radio-button-wrapper__large--on-blueberry"]]: t && h && c
-  }), M = l(
+  }), D = l(
     e["radio-button-label"],
     {
       [e["radio-button-label--disabled"]]: r,
@@ -51,7 +52,7 @@ const ie = (s, o, a, b) => {
       [e["radio-button-label__large--disabled"]]: t && r
     },
     I
-  ), O = l(
+  ), M = l(
     e["radio-button"],
     {
       [e["radio-button--on-dark"]]: y,
@@ -63,41 +64,41 @@ const ie = (s, o, a, b) => {
       [e["radio-button__large--invalid"]]: t && g
     },
     a
-  ), P = l(e["radio-button-errors"]), U = (m) => {
+  ), O = l(e["radio-button-errors"]), P = (m) => {
     E(m.target.checked), n && n(m);
-  }, q = () => /* @__PURE__ */ p.createElement(
+  }, U = () => /* @__PURE__ */ p.createElement(
     "input",
     {
       id: _,
       name: w,
-      className: O,
+      className: M,
       type: "radio",
       disabled: r,
       value: N,
-      ref: z,
+      ref: j,
       defaultChecked: b,
-      "aria-describedby": [s["aria-describedby"] || "", C].join(" "),
+      "aria-describedby": J(s, C),
       required: x,
       ...S,
-      onChange: (m) => U(m)
+      onChange: (m) => P(m)
     }
   );
-  return /* @__PURE__ */ p.createElement("div", { "data-testid": L, "data-analyticsid": $.RadioButton, className: A }, u && /* @__PURE__ */ p.createElement("p", { className: P, id: C }, u), X(
+  return /* @__PURE__ */ p.createElement("div", { "data-testid": L, "data-analyticsid": $.RadioButton, className: z }, u && /* @__PURE__ */ p.createElement("p", { className: O, id: C }, u), Y(
     f,
-    q(),
+    U(),
     _,
     d,
-    M,
+    D,
     void 0,
     e["radiobutton-sublabel-wrapper"],
     t
   ));
 });
 v.displayName = "RadioButton";
-const le = v;
+const be = v;
 export {
   v as RadioButton,
-  le as default,
-  ie as getRadioLabelClasses
+  be as default,
+  se as getRadioLabelClasses
 };
 //# sourceMappingURL=RadioButton.js.map

package/components/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && (\n        <p className={errorStyles} id={errorTextUuid}>\n          {errorText}\n        </p>\n      )}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        isLarge\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && (\n        <p className={errorStyles} id={errorTextUuid}>\n          {errorText}\n        </p>\n      )}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        isLarge\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","getAriaDescribedBy","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}

package/components/Select/Select.js

@@ -1,14 +1,15 @@
 import r from "react";
 import s from "classnames";
-import { FormMode as F, AnalyticsId as H, IconSize as M, AVERAGE_CHARACTER_WIDTH_PX as U } from "../../constants.js";
+import { FormMode as B, AnalyticsId as F, IconSize as H, AVERAGE_CHARACTER_WIDTH_PX as M } from "../../constants.js";
 import { useUuid as w } from "../../hooks/useUuid.js";
 import { getColor as v } from "../../theme/currys/color.js";
+import { getAriaDescribedBy as U } from "../../utils/accessibility.js";
 import V from "../ErrorWrapper/ErrorWrapper.js";
 import { Icon as X } from "../Icon/Icon.js";
-import j from "../Icons/ChevronDown.js";
-import { renderLabel as B } from "../Label/Label.js";
+import G from "../Icons/ChevronDown.js";
+import { renderLabel as L } from "../Label/Label.js";
 import e from "../Select/styles.module.scss";
-const G = (o) => `calc(${o * U}px + 2rem)`, L = (o, t) => t ? v("neutral", 500) : v(o ? "cherry" : "blueberry", 600), P = r.forwardRef(function(t, c) {
+const P = (o) => `calc(${o * M}px + 2rem)`, j = (o, t) => t ? v("neutral", 500) : v(o ? "cherry" : "blueberry", 600), k = r.forwardRef(function(t, c) {
   const {
     className: y,
     children: I,
@@ -20,16 +21,16 @@ const G = (o) => `calc(${o * U}px + 2rem)`, L = (o, t) => t ? v("neutral", 500)
     label: S,
     selectId: d,
     name: W = d,
-    mode: n = F.onwhite,
-    testId: N,
+    mode: n = B.onwhite,
+    testId: g,
     width: m,
     required: p,
-    value: g,
-    defaultValue: R,
+    value: N,
+    defaultValue: A,
     autoComplete: u = "off",
-    wrapperClassName: T,
-    ...A
-  } = t, f = w(d), b = w(x), C = n === "onblueberry", a = n === "oninvalid" || !!i || !!E, _ = L(a, !!l), $ = m ? G(m) : void 0, q = s(
+    wrapperClassName: R,
+    ...T
+  } = t, f = w(d), b = w(x), C = n === "onblueberry", a = n === "oninvalid" || !!i || !!E, _ = j(a, !!l), D = m ? P(m) : void 0, $ = s(
     e["select-inner-wrapper"],
     {
       [e["select-inner-wrapper--transparent"]]: h === "transparent",
@@ -38,32 +39,32 @@ const G = (o) => `calc(${o * U}px + 2rem)`, L = (o, t) => t ? v("neutral", 500)
       [e["select-inner-wrapper--disabled"]]: l
     },
     y
-  ), z = s(e.select, {
+  ), q = s(e.select, {
     [e["select--on-blueberry"]]: C,
     [e["select--invalid"]]: a
-  }), D = s(e["select-wrapper"], T);
-  return /* @__PURE__ */ r.createElement(V, { errorText: i, errorTextId: b }, /* @__PURE__ */ r.createElement("div", { "data-testid": N, "data-analyticsid": H.Select, className: D, style: { maxWidth: $ } }, B(S, f, n), /* @__PURE__ */ r.createElement("div", { className: q }, /* @__PURE__ */ r.createElement(X, { className: e["select-arrow"], svgIcon: j, color: _, size: M.XSmall }), /* @__PURE__ */ r.createElement(
+  }), z = s(e["select-wrapper"], R);
+  return /* @__PURE__ */ r.createElement(V, { errorText: i, errorTextId: b }, /* @__PURE__ */ r.createElement("div", { "data-testid": g, "data-analyticsid": F.Select, className: z, style: { maxWidth: D } }, L(S, f, n), /* @__PURE__ */ r.createElement("div", { className: $ }, /* @__PURE__ */ r.createElement(X, { className: e["select-arrow"], svgIcon: G, color: _, size: H.XSmall }), /* @__PURE__ */ r.createElement(
     "select",
     {
       "aria-invalid": !!a,
       id: f,
       name: W,
-      className: z,
+      className: q,
       disabled: l,
       ref: c,
       required: p,
-      "aria-describedby": [t["aria-describedby"] || "", b].join(" "),
+      "aria-describedby": U(t, b),
       "aria-required": !!p,
-      value: g,
-      defaultValue: R,
+      value: N,
+      defaultValue: A,
       autoComplete: u || void 0,
-      ...A
+      ...T
     },
     I
   ))));
-}), oe = P;
+}), le = k;
 export {
-  P as Select,
-  oe as default
+  k as Select,
+  le as default
 };
 //# sourceMappingURL=Select.js.map

package/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<\n    React.SelectHTMLAttributes<HTMLSelectElement>,\n    'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n  > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","className","children","concept","error","errorText","errorTextId","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","autoComplete","wrapperClassName","rest","uuid","useUuid","errorTextUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","selectWrapperClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":";;;;;;;;;;AAiDA,MAAMA,IAAoB,CAACC,MAGlB,QAAQA,IAAaC,CAA0B,cAGlDC,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAR;AAAA,IACA,OAAAS;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,kBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAApB,GAEEqB,IAAOC,EAAQb,CAAQ,GACvBc,IAAgBD,EAAQf,CAAW,GACnCiB,IAAcb,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACL,KAAa,CAAC,CAACD,GACnDoB,IAAY/B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C8B,IAAWZ,IAAQvB,EAAkBuB,CAAK,IAAI,QAE9Ca,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGzB,MAAY;AAAA,MACjE,CAACyB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAGlC;AAAA,MACjD,CAACkC,EAAa,gCAAgC,CAAC,GAAGjC;AAAA,IACpD;AAAA,IACAM;AAAA,EAAA,GAGI4B,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAGlC;AAAA,EAAA,CACpC,GAEKoC,IAAuBH,EAAWC,EAAa,gBAAgB,GAAGV,CAAgB;AAExF,yCACGa,GAAa,EAAA,WAAA1B,GAAsB,aAAaiB,KAC/CxB,gBAAAA,EAAA,cAAC,SAAI,eAAac,GAAQ,oBAAkBoB,EAAY,QAAQ,WAAWF,GAAsB,OAAO,EAAE,UAAAL,EAAA,KACvGQ,EAAY1B,GAAOa,GAAMV,CAAgB,GACzCZ,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAW4B,EACd,GAAA5B,gBAAAA,EAAA,cAACoC,KAAK,WAAWN,EAAa,cAAc,GAAG,SAASO,GAAa,OAAOX,GAAW,MAAMY,EAAS,QAAQ,GAC9GtC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,CAAC,CAACJ;AAAA,MAChB,IAAI0B;AAAA,MACJ,MAAAX;AAAA,MACA,WAAWoB;AAAA,MACX,UAAAlC;AAAA,MACA,KAAAK;AAAA,MACA,UAAAc;AAAA,MACA,oBAAkB,CAACf,EAAM,kBAAkB,KAAK,IAAIuB,CAAa,EAAE,KAAK,GAAG;AAAA,MAC3E,iBAAe,CAAC,CAACR;AAAA,MACjB,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAcC,KAA8B;AAAA,MAC3C,GAAGE;AAAA,IAAA;AAAA,IAEHjB;AAAA,EAEL,CAAA,CACF,CACF;AAEJ,CAAC,GAEDmC,KAAexC;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<\n    React.SelectHTMLAttributes<HTMLSelectElement>,\n    'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n  > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","className","children","concept","error","errorText","errorTextId","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","autoComplete","wrapperClassName","rest","uuid","useUuid","errorTextUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","selectWrapperClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","getAriaDescribedBy","Select$1"],"mappings":";;;;;;;;;;;AAkDA,MAAMA,IAAoB,CAACC,MAGlB,QAAQA,IAAaC,CAA0B,cAGlDC,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAR;AAAA,IACA,OAAAS;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,kBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAApB,GAEEqB,IAAOC,EAAQb,CAAQ,GACvBc,IAAgBD,EAAQf,CAAW,GACnCiB,IAAcb,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACL,KAAa,CAAC,CAACD,GACnDoB,IAAY/B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C8B,IAAWZ,IAAQvB,EAAkBuB,CAAK,IAAI,QAE9Ca,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGzB,MAAY;AAAA,MACjE,CAACyB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAGlC;AAAA,MACjD,CAACkC,EAAa,gCAAgC,CAAC,GAAGjC;AAAA,IACpD;AAAA,IACAM;AAAA,EAAA,GAGI4B,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAGlC;AAAA,EAAA,CACpC,GAEKoC,IAAuBH,EAAWC,EAAa,gBAAgB,GAAGV,CAAgB;AAExF,yCACGa,GAAa,EAAA,WAAA1B,GAAsB,aAAaiB,KAC/CxB,gBAAAA,EAAA,cAAC,SAAI,eAAac,GAAQ,oBAAkBoB,EAAY,QAAQ,WAAWF,GAAsB,OAAO,EAAE,UAAAL,EAAA,KACvGQ,EAAY1B,GAAOa,GAAMV,CAAgB,GACzCZ,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAW4B,EACd,GAAA5B,gBAAAA,EAAA,cAACoC,KAAK,WAAWN,EAAa,cAAc,GAAG,SAASO,GAAa,OAAOX,GAAW,MAAMY,EAAS,QAAQ,GAC9GtC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,CAAC,CAACJ;AAAA,MAChB,IAAI0B;AAAA,MACJ,MAAAX;AAAA,MACA,WAAWoB;AAAA,MACX,UAAAlC;AAAA,MACA,KAAAK;AAAA,MACA,UAAAc;AAAA,MACA,oBAAkBuB,EAAmBtC,GAAOuB,CAAa;AAAA,MACzD,iBAAe,CAAC,CAACR;AAAA,MACjB,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAcC,KAA8B;AAAA,MAC3C,GAAGE;AAAA,IAAA;AAAA,IAEHjB;AAAA,EAEL,CAAA,CACF,CACF;AAEJ,CAAC,GAEDoC,KAAezC;"}

package/components/ServiceMessage/ServiceMessage.stories.d.ts

@@ -19,7 +19,7 @@ declare const meta: {
         expanderOpenFromStart: true;
         urlTitle: string;
         url: string;
-        target: "_self";
+        target: "_parent";
         closeBtnText: string;
         variant: "alert";
         testId: string;

package/components/Textarea/Textarea.js

@@ -1,41 +1,42 @@
-import o, { useState as A, useRef as te, useEffect as N } from "react";
+import o, { useState as A, useRef as te, useEffect as B } from "react";
 import p from "classnames";
 import { FormMode as m, AnalyticsId as re, AVERAGE_CHARACTER_WIDTH_PX as ae } from "../../constants.js";
 import { useUuid as oe } from "../../hooks/useUuid.js";
-import { uuid as ne } from "../../utils/uuid.js";
-import ie from "../ErrorWrapper/ErrorWrapper.js";
-import { renderLabel as se } from "../Label/Label.js";
-import ce from "../MaxCharacters/MaxCharacters.js";
+import { getAriaDescribedBy as ne } from "../../utils/accessibility.js";
+import { uuid as ie } from "../../utils/uuid.js";
+import se from "../ErrorWrapper/ErrorWrapper.js";
+import { renderLabel as ce } from "../Label/Label.js";
+import de from "../MaxCharacters/MaxCharacters.js";
 import t from "../Textarea/styles.module.scss";
-const de = (a) => `calc(${a * ae}px + 2rem + 16px + 4px)`, $ = o.forwardRef((a, x) => {
+const le = (a) => `calc(${a * ae}px + 2rem + 16px + 4px)`, N = o.forwardRef((a, x) => {
   const {
     maxCharacters: n,
     maxText: h,
     width: f,
-    testId: B,
+    testId: $,
     defaultValue: s,
     marginBottom: M,
     transparent: k,
     mode: i = m.onwhite,
-    label: L,
-    textareaId: b = ne(),
+    label: D,
+    textareaId: b = ie(),
     minRows: g = 3,
     maxRows: c = 10,
     grow: w,
-    error: S,
+    error: L,
     errorText: C,
-    errorTextId: D,
+    errorTextId: S,
     autoFocus: F,
     disabled: U,
     name: V,
     autoComplete: T = "off",
-    placeholder: j,
-    readOnly: q,
-    required: z,
+    placeholder: q,
+    readOnly: z,
+    required: G,
     onChange: E,
-    ...G
-  } = a, [O, W] = A(g), [y, R] = A(s || ""), d = te(null), v = oe(D);
-  N(() => {
+    ...O
+  } = a, [P, W] = A(g), [y, R] = A(s || ""), d = te(null), v = oe(S);
+  B(() => {
     R(s || "");
   }, [s]);
   const _ = (e) => {
@@ -43,18 +44,18 @@ const de = (a) => `calc(${a * ae}px + 2rem + 16px + 4px)`, $ = o.forwardRef((a,
     e.rows = g;
     const r = Math.floor((e.scrollHeight - 16) / 28);
     r === l && (e.rows = r), r >= c && (e.rows = c, e.scrollTop = e.scrollHeight), r < c ? W(r) : W(c);
-  }, P = i === m.ondark, X = i === m.onblueberry, J = !!n && y.toString().length > n, H = i === m.oninvalid || !!C || !!S || J, K = p(t.textarea, {
+  }, X = i === m.ondark, j = i === m.onblueberry, J = !!n && y.toString().length > n, H = i === m.oninvalid || !!C || !!L || J, K = p(t.textarea, {
     [t["textarea--gutterBottom"]]: M
   }), Q = p(t["input-container"], {
     [t["input-container--transparent"]]: k,
-    [t["input-container--on-blueberry"]]: X,
-    [t["input-container--on-dark"]]: P,
+    [t["input-container--on-blueberry"]]: j,
+    [t["input-container--on-dark"]]: X,
     [t["input-container--invalid"]]: H,
     [t["input-container--disabled"]]: a.disabled
   }), Y = p(t["input-container__input"], {
     [t["input-container__input--disabled"]]: a.disabled
   });
-  N(() => {
+  B(() => {
     var e, u, l;
     if (w && ((e = d.current) != null && e.children) && ((u = d.current) != null && u.children[0])) {
       const r = (l = d.current) == null ? void 0 : l.children[0];
@@ -65,29 +66,29 @@ const de = (a) => `calc(${a * ae}px + 2rem + 16px + 4px)`, $ = o.forwardRef((a,
     w && _(e.target), R(e.target.value);
   }, ee = (e) => {
     E && E(e), Z(e);
-  }, I = f ? de(f) : void 0;
-  return /* @__PURE__ */ o.createElement(ie, { errorText: C, errorTextId: v }, /* @__PURE__ */ o.createElement("div", { "data-testid": B, "data-analyticsid": re.Textarea, className: K }, se(L, b, i), /* @__PURE__ */ o.createElement("div", { className: Q, ref: d, style: { maxWidth: I } }, /* @__PURE__ */ o.createElement(
+  }, I = f ? le(f) : void 0;
+  return /* @__PURE__ */ o.createElement(se, { errorText: C, errorTextId: v }, /* @__PURE__ */ o.createElement("div", { "data-testid": $, "data-analyticsid": re.Textarea, className: K }, ce(D, b, i), /* @__PURE__ */ o.createElement("div", { className: Q, ref: d, style: { maxWidth: I } }, /* @__PURE__ */ o.createElement(
     "textarea",
     {
-      rows: O,
+      rows: P,
       defaultValue: s,
       id: b,
       className: Y,
       ref: x,
-      "aria-describedby": [a["aria-describedby"] || "", v].join(" "),
+      "aria-describedby": ne(a, v),
       "aria-invalid": !!H,
       autoFocus: F,
       disabled: U,
       name: V,
       autoComplete: T || void 0,
-      placeholder: j,
-      readOnly: q,
-      required: z,
+      placeholder: q,
+      readOnly: z,
+      required: G,
       onChange: ee,
-      ...G
+      ...O
     }
   )), n && /* @__PURE__ */ o.createElement(
-    ce,
+    de,
     {
       maxCharacters: n,
       length: y.toString().length,
@@ -97,9 +98,9 @@ const de = (a) => `calc(${a * ae}px + 2rem + 16px + 4px)`, $ = o.forwardRef((a,
     }
   )));
 });
-$.displayName = "Textarea";
-const we = $;
+N.displayName = "Textarea";
+const Te = N;
 export {
-  we as default
+  Te as default
 };
 //# sourceMappingURL=Textarea.js.map

package/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useUuid(errorTextId);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","errorTextUuid","useUuid","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useUuid(errorTextId);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","errorTextUuid","useUuid","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters","Textarea$1"],"mappings":"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"}