@helsenorge/designsystem-react 9.1.0 → 9.2.0

package/HighlightPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize","Wrapper","className","size","children","jsx","styles","classNames","ContentWrapper","props","contentWrapperClasses","HighlightPanel","color","testId","svgIcon","htmlMarkup","contentWrapperClassName","title","titleHtmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","titleElement","Title","jsxs","Fragment","LazyIcon","Icon","CustomTag","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper. Not used for fluid size. */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize","Wrapper","className","size","children","jsx","styles","classNames","ContentWrapper","props","contentWrapperClasses","HighlightPanel","color","testId","svgIcon","htmlMarkup","contentWrapperClassName","title","titleHtmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","titleElement","Title","jsxs","Fragment","LazyIcon","Icon","CustomTag","AnalyticsId"],"mappings":"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"}

package/Textarea.js

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

package/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, FormOnColor } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends ErrorWrapperClassNameProps,\n    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      | 'value'\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  onColor?: keyof typeof FormOnColor;\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    onColor = FormOnColor.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(value || 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 = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.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    value && setTextareaInput(value);\n\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\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    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, onColor as FormOnColor)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            {...rest}\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            value={textareaInput}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            onColor={onColor}\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","onColor","FormOnColor","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","errorWrapperClassName","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","value","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","jsx","ErrorWrapper","jsxs","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters"],"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, FormOnColor } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends ErrorWrapperClassNameProps,\n    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      | 'value'\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  onColor?: keyof typeof FormOnColor;\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    onColor = FormOnColor.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(value || 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 = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.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    value && setTextareaInput(value);\n\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    if (grow) {\n      resizeHeight(e.target);\n    }\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, onColor as FormOnColor)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            {...rest}\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            value={value}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            onColor={onColor}\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","onColor","FormOnColor","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","errorWrapperClassName","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","value","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","onChangeHandler","maxWidth","jsx","ErrorWrapper","jsxs","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}

package/components/HelpPanel/index.js

@@ -1,17 +1,18 @@
-import { jsx as n } from "react/jsx-runtime";
-import { H as p } from "../../HighlightPanel.js";
-import l from "../Icons/HandWaving.js";
-import m from "./styles.module.scss";
-const H = ({ className: r, testId: e, size: o, children: t, title: a }) => /* @__PURE__ */ n(
-  p,
+import { jsx as p } from "react/jsx-runtime";
+import s from "classnames";
+import { H as t } from "../../HighlightPanel.js";
+import n from "../Icons/HandWaving.js";
+import e from "./styles.module.scss";
+const H = ({ className: r, testId: l, size: a, children: o, title: m }) => /* @__PURE__ */ p(
+  t,
   {
-    className: r,
-    contentWrapperClassName: m["help-panel"],
-    testId: e,
-    size: o,
-    svgIcon: l,
-    title: a,
-    children: t
+    className: s(r, { [e["help-panel"]]: a === "fluid" }),
+    contentWrapperClassName: e["help-panel"],
+    testId: l,
+    size: a,
+    svgIcon: n,
+    title: m,
+    children: o
   }
 );
 export {

package/components/HelpPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport HighlightPanel, { HighlightPanelSize } from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  return (\n    <HighlightPanel\n      className={className}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","jsx","HighlightPanel","styles","HandWaving"],"mappings":";;;;AAoBM,MAAAA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAE9E,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAAN;AAAA,IACA,yBAAyBO,EAAO,YAAY;AAAA,IAC5C,QAAAN;AAAA,IACA,MAAAC;AAAA,IACA,SAASM;AAAA,IACT,OAAAJ;AAAA,IAEC,UAAAD;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightPanel, { HighlightPanelSize } from '../HighlightPanel';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  return (\n    <HighlightPanel\n      className={classNames(className, { [styles['help-panel']]: size === 'fluid' })}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightPanel>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","jsx","HighlightPanel","classNames","styles","HandWaving"],"mappings":";;;;;AAsBM,MAAAA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAE9E,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAWP,GAAW,EAAE,CAACQ,EAAO,YAAY,CAAC,GAAGN,MAAS,SAAS;AAAA,IAC7E,yBAAyBM,EAAO,YAAY;AAAA,IAC5C,QAAAP;AAAA,IACA,MAAAC;AAAA,IACA,SAASO;AAAA,IACT,OAAAL;AAAA,IAEC,UAAAD;AAAA,EAAA;AAAA;"}

package/components/HighlightPanel/HighlightPanel.d.ts

@@ -23,7 +23,7 @@ export interface HighlightPanelProps {
     htmlMarkup?: HighlightPanelTags;
     /** Adds custom classes to the element. */
     className?: string;
-    /** Adds custom classes to the content-wrapper */
+    /** Adds custom classes to the content-wrapper. Not used for fluid size. */
     contentWrapperClassName?: string;
     /** Sets the data-testid attribute. */
     testId?: string;

package/components/Tabs/TabList/styles.module.scss

@@ -12,13 +12,18 @@
   gap: 0.25rem;
   list-style-type: none;
   white-space: nowrap;
-  overflow: hidden;
+  overflow: auto hidden;
   height: 3rem;
   margin: 0;
   background-color: var(--color-base-background-white);
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   margin-bottom: -1px;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none; /* Safari */
+  }
 
   @media (min-width: map.get($grid-breakpoints, md)) {
     padding-left: 0;

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {