@helsenorge/designsystem-react 8.0.2 → 8.1.1

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [8.1.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.0.2&targetVersion=GTv8.1.0) (2024-08-23)
+
+### Features
+
+- mulig å skru av swiping i tabs ([45aac8f](https://github.com/helsenorge/designsystem/commit/45aac8f7358e77fe85467d826b54c052b01b3086)),
+  closes [#330586](https://github.com/helsenorge/designsystem/issues/330586)
+
+### Bug Fixes
+
+- table kan brukes i tabs uten problemer med scrolling på mobil
+  ([d28a280](https://github.com/helsenorge/designsystem/commit/d28a280d4afe56227a331334348d91aac5be6281)), closes
+  [#330555](https://github.com/helsenorge/designsystem/issues/330555)
+- unngå blinking i tabs på mobil når man scroller
+  ([2bddf20](https://github.com/helsenorge/designsystem/commit/2bddf2017f1067ba1b17473006b2103de630054e)), closes
+  [#330597](https://github.com/helsenorge/designsystem/issues/330597)
+- validationsummary er ikke labelled by ikke-eksisterende element
+  ([3ac0b88](https://github.com/helsenorge/designsystem/commit/3ac0b8822820ad47ac635da95b7d7377481f2f33)), closes
+  [#328895](https://github.com/helsenorge/designsystem/issues/328895)
+
+## [8.0.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.0.1&targetVersion=GTv8.0.2) (2024-08-22)
+
+### Bug Fixes
+
+- lightbox uu forbedringer ([8026ee9](https://github.com/helsenorge/designsystem/commit/8026ee9fc1acb94cd1b9e9d12ff1a190beca31d3)), closes
+  [#329075](https://github.com/helsenorge/designsystem/issues/329075)
+- radiobutton-scss bygger når designsystem tas i bruk
+  ([867b0ec](https://github.com/helsenorge/designsystem/commit/867b0ec36002ed16fda4f7e6dae07bad4b805c46)), closes
+  [#330427](https://github.com/helsenorge/designsystem/issues/330427)
+
 ## [8.0.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv8.0.0&targetVersion=GTv8.0.1) (2024-08-15)
 
 ## 8.0.0-beta.6 (2024-08-15)

package/components/Close/styles.module.scss

@@ -7,12 +7,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
-  @media (max-width: map.get($grid-breakpoints, sm)) {
-    height: 2.375rem;
-    width: 2.375rem;
-  }
-
   height: 3rem;
   width: 3rem;
   padding: 0;
@@ -20,6 +14,11 @@
   background-color: transparent;
   cursor: pointer;
 
+  @media (max-width: map.get($grid-breakpoints, sm)) {
+    height: 2.375rem;
+    width: 2.375rem;
+  }
+
   &:hover,
   &:active {
     background-color: rgb(88 170 187 / 10%);

package/components/ExpanderList/styles.module.scss

@@ -39,12 +39,6 @@
   position: relative;
   font-size: $font-size-sm;
   line-height: $lineheight-size-sm;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
-  }
-
   display: flex;
   cursor: pointer;
   font-weight: 600;
@@ -58,6 +52,11 @@
   width: 100%;
   outline: none;
 
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
+  }
+
   &--banana {
     background-color: $banana100;
   }

package/components/EyebrowHeader/styles.module.scss

@@ -1,4 +1,4 @@
-@import '@helsenorge/designsystem-react/scss/spacers';
+@import '../../scss/spacers';
 
 .subtitle {
   margin: 0;

package/components/EyebrowHeader/styles.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  subtitle: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/FormGroup/styles.module.scss

@@ -28,11 +28,11 @@
   }
 
   &__legend {
-    @include legend;
-
     margin-bottom: getSpacer(m);
     margin-top: 0;
 
+    @include legend;
+
     &--on-dark {
       color: $white;
     }

package/components/HighlightPanel/styles.module.scss

@@ -8,7 +8,9 @@
 @mixin content-wrapper-with-icon-flex {
   display: flex;
   flex-direction: column;
+}
 
+@mixin content-wrapper-with-icon-flex-responsive {
   @media (min-width: map.get($grid-breakpoints, md)) {
     flex-direction: row;
   }
@@ -113,6 +115,7 @@
     #{$panel}__content-wrapper {
       @include content-wrapper-with-icon-flex;
       @include content-wrapper-with-icon-padding;
+      @include content-wrapper-with-icon-flex-responsive;
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
         padding-left: getSpacer(m);
@@ -123,6 +126,7 @@
   &--has-icon#{&}--large {
     #{$panel}__col {
       @include content-wrapper-with-icon-flex;
+      @include content-wrapper-with-icon-flex-responsive;
     }
     #{$panel}__content-wrapper {
       @include content-wrapper-with-icon-padding;
@@ -171,6 +175,7 @@
   &--has-icon#{&}--fluid {
     @include content-wrapper-with-icon-flex;
     @include content-wrapper-with-icon-padding;
+    @include content-wrapper-with-icon-flex-responsive;
   }
 
   &__icon {

package/components/HorizontalScroll/HorizontalScroll.js

@@ -1,15 +1,16 @@
 import r, { useRef as e } from "react";
 import i from "classnames";
 import { useIsVisible as c } from "../../hooks/useIsVisible.js";
-import { useSize as g } from "../../hooks/useSize.js";
-import o from "../HorizontalScroll/styles.module.scss";
-const d = "3px", O = ({ children: m, childWidth: _, testId: f, ...l }) => {
-  const t = e(null), a = e(null), s = e(null), h = c(a, 1, { root: t == null ? void 0 : t.current, rootMargin: d }, !0), u = c(s, 1, { root: t == null ? void 0 : t.current, rootMargin: d }, !0), { width: v = 0 } = g(t) || {}, z = _ > v, b = i(o.horizontalscroll__viewport, z && o["horizontalscroll__viewport--overflow"]), n = l["aria-label"] || l["aria-labelledby"];
-  return /* @__PURE__ */ r.createElement("div", { className: o.horizontalscroll, "data-testid": f }, /* @__PURE__ */ r.createElement(
+import { useSize as p } from "../../hooks/useSize.js";
+import { useStopPropagation as g } from "../../hooks/usestopPropagation.js";
+import t from "../HorizontalScroll/styles.module.scss";
+const m = "3px", x = ({ children: d, childWidth: _, testId: h, ...l }) => {
+  const o = e(null), a = e(null), s = e(null), u = c(a, 1, { root: o == null ? void 0 : o.current, rootMargin: m }, !0), f = c(s, 1, { root: o == null ? void 0 : o.current, rootMargin: m }, !0), { width: v = 0 } = p(o) || {}, z = _ > v, b = i(t.horizontalscroll__viewport, z && t["horizontalscroll__viewport--overflow"]), n = l["aria-label"] || l["aria-labelledby"];
+  return g(o, ["touchstart", "touchmove"]), /* @__PURE__ */ r.createElement("div", { className: t.horizontalscroll, "data-testid": h }, /* @__PURE__ */ r.createElement(
     "div",
     {
       className: b,
-      ref: t,
+      ref: o,
       tabIndex: n ? 0 : void 0,
       role: n ? "region" : void 0,
       ...l
@@ -18,9 +19,9 @@ const d = "3px", O = ({ children: m, childWidth: _, testId: f, ...l }) => {
       "div",
       {
         className: i(
-          o.horizontalscroll__indicator,
-          o["horizontalscroll__indicator--left"],
-          !h && o["horizontalscroll__indicator--visible"]
+          t.horizontalscroll__indicator,
+          t["horizontalscroll__indicator--left"],
+          !u && t["horizontalscroll__indicator--visible"]
         )
       }
     ),
@@ -28,19 +29,19 @@ const d = "3px", O = ({ children: m, childWidth: _, testId: f, ...l }) => {
       "div",
       {
         className: i(
-          o.horizontalscroll__indicator,
-          o["horizontalscroll__indicator--right"],
-          !u && o["horizontalscroll__indicator--visible"]
+          t.horizontalscroll__indicator,
+          t["horizontalscroll__indicator--right"],
+          !f && t["horizontalscroll__indicator--visible"]
         )
       }
     ),
     /* @__PURE__ */ r.createElement("div", { ref: a }),
-    m,
+    d,
     /* @__PURE__ */ r.createElement("div", { ref: s })
   ));
 };
 export {
-  O as HorizontalScroll,
-  O as default
+  x as HorizontalScroll,
+  x as default
 };
 //# sourceMappingURL=HorizontalScroll.js.map

package/components/HorizontalScroll/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","testId","rest","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","hasAriaAttributes","React"],"mappings":";;;;;AAWA,MAAMA,IAAqB,OAYdC,IAA0E,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,QAAW;AAC9H,QAAAC,IAAcC,EAAuB,IAAI,GACzCC,IAAUD,EAAuB,IAAI,GACrCE,IAAWF,EAAuB,IAAI,GACtCG,IAAgBC,EAAaH,GAAS,GAAG,EAAE,MAAMF,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC7GY,IAAiBD,EAAaF,GAAU,GAAG,EAAE,MAAMH,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC/G,EAAE,OAAOa,IAAgB,MAAMC,EAAQR,CAAW,KAAK,IAEvDS,IAAgBZ,IAAaU,GAC7BG,IAAkBC,EAAWC,EAAO,4BAA4BH,KAAiBG,EAAO,sCAAsC,CAAC,GAC/HC,IAAoBd,EAAK,YAAY,KAAKA,EAAK,iBAAiB;AAEtE,yCACG,OAAI,EAAA,WAAWa,EAAO,kBAAkB,eAAad,EAGpD,GAAAgB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,KAAKV;AAAA,MACL,UAAUa,IAAoB,IAAI;AAAA,MAClC,MAAMA,IAAoB,WAAW;AAAA,MACpC,GAAGd;AAAA,IAAA;AAAA,IAEJe,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,mCAAmC;AAAA,UAC1C,CAACR,KAAiBQ,EAAO,sCAAsC;AAAA,QACjE;AAAA,MAAA;AAAA,IACF;AAAA,IACAE,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,oCAAoC;AAAA,UAC3C,CAACN,KAAkBM,EAAO,sCAAsC;AAAA,QAClE;AAAA,MAAA;AAAA,IACF;AAAA,IACAE,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKZ,EAAS,CAAA;AAAA,IAClBN;AAAA,IACDkB,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKX,EAAU,CAAA;AAAA,EAAA,CAExB;AAEJ;"}
+{"version":3,"file":"HorizontalScroll.js","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","testId","rest","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","hasAriaAttributes","useStopPropagation","React"],"mappings":";;;;;;AAYA,MAAMA,IAAqB,OAYdC,IAA0E,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,QAAW;AAC9H,QAAAC,IAAcC,EAAuB,IAAI,GACzCC,IAAUD,EAAuB,IAAI,GACrCE,IAAWF,EAAuB,IAAI,GACtCG,IAAgBC,EAAaH,GAAS,GAAG,EAAE,MAAMF,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC7GY,IAAiBD,EAAaF,GAAU,GAAG,EAAE,MAAMH,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC/G,EAAE,OAAOa,IAAgB,MAAMC,EAAQR,CAAW,KAAK,IAEvDS,IAAgBZ,IAAaU,GAC7BG,IAAkBC,EAAWC,EAAO,4BAA4BH,KAAiBG,EAAO,sCAAsC,CAAC,GAC/HC,IAAoBd,EAAK,YAAY,KAAKA,EAAK,iBAAiB;AAEtE,SAAAe,EAAmBd,GAAa,CAAC,cAAc,WAAW,CAAC,mCAGxD,OAAI,EAAA,WAAWY,EAAO,kBAAkB,eAAad,EAGpD,GAAAiB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWL;AAAA,MACX,KAAKV;AAAA,MACL,UAAUa,IAAoB,IAAI;AAAA,MAClC,MAAMA,IAAoB,WAAW;AAAA,MACpC,GAAGd;AAAA,IAAA;AAAA,IAEJgB,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWJ;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,mCAAmC;AAAA,UAC1C,CAACR,KAAiBQ,EAAO,sCAAsC;AAAA,QACjE;AAAA,MAAA;AAAA,IACF;AAAA,IACAG,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWJ;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,oCAAoC;AAAA,UAC3C,CAACN,KAAkBM,EAAO,sCAAsC;AAAA,QAClE;AAAA,MAAA;AAAA,IACF;AAAA,IACAG,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKb,EAAS,CAAA;AAAA,IAClBN;AAAA,IACDmB,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKZ,EAAU,CAAA;AAAA,EAAA,CAExB;AAEJ;"}

package/components/Input/Input.d.ts

@@ -19,6 +19,8 @@ export interface InputProps extends Pick<React.InputHTMLAttributes<HTMLInputElem
     icon?: SvgIcon | IconName;
     /** Places the icon to the right */
     iconRight?: boolean;
+    /** Ref that is placed on the inputContainerRef */
+    inputContainerRef?: React.RefObject<HTMLDivElement>;
     /** Ref that is placed on the inputWrapper */
     inputWrapperRef?: React.RefObject<HTMLDivElement>;
     /** Changes the color profile of the input */

package/components/Input/Input.js

@@ -1,21 +1,22 @@
-import r, { useRef as K, useState as $, useEffect as xe } from "react";
+import r, { useRef as K, useState as $, useEffect as Ce } from "react";
 import v from "classnames";
-import { FormMode as l, FormSize as Ce, IconSize as B, AnalyticsId as _e, AVERAGE_CHARACTER_WIDTH_PX as ve } from "../../constants.js";
+import { FormMode as l, FormSize as xe, IconSize as B, AnalyticsId as _e, AVERAGE_CHARACTER_WIDTH_PX as ve } from "../../constants.js";
 import { useBreakpoint as ye, Breakpoint as Ee } from "../../hooks/useBreakpoint.js";
 import { useUuid as U } from "../../hooks/useUuid.js";
 import { getColor as F } from "../../theme/currys/color.js";
 import { getAriaDescribedBy as ke } from "../../utils/accessibility.js";
-import { ErrorWrapper as we } from "../ErrorWrapper/ErrorWrapper.js";
-import { Icon as Ne } from "../Icon/Icon.js";
-import { renderLabel as Ie } from "../Label/Label.js";
-import { LazyIcon as Re } from "../LazyIcon/LazyIcon.js";
-import We from "../MaxCharacters/MaxCharacters.js";
+import { mergeRefs as we } from "../../utils/refs.js";
+import { ErrorWrapper as Ne } from "../ErrorWrapper/ErrorWrapper.js";
+import { Icon as Ie } from "../Icon/Icon.js";
+import { renderLabel as Re } from "../Label/Label.js";
+import { LazyIcon as We } from "../LazyIcon/LazyIcon.js";
+import Se from "../MaxCharacters/MaxCharacters.js";
 import t from "../Input/styles.module.scss";
-var Se = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.search = "search", e.tel = "tel", e.url = "url", e.date = "date", e.time = "time", e))(Se || {});
-const ze = (e, s, p) => {
+var ze = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.search = "search", e.tel = "tel", e.url = "url", e.date = "date", e.time = "time", e))(ze || {});
+const Ae = (e, s, p) => {
   const i = s ? "1.5rem" : "2rem", f = s ? `${p}px` : "0px";
   return `calc(${e * ve}px + ${i} + ${f} + 4px)`;
-}, Ae = r.forwardRef((e, s) => {
+}, Ve = r.forwardRef((e, s) => {
   const {
     className: p,
     defaultValue: i,
@@ -24,7 +25,7 @@ const ze = (e, s, p) => {
     name: L,
     transparent: M = !1,
     icon: a,
-    iconRight: b,
+    iconRight: g,
     inputId: P,
     inputWrapperRef: H,
     mode: c = l.onwhite,
@@ -48,27 +49,27 @@ const ze = (e, s, p) => {
     maxCharacters: d,
     maxText: te,
     ...ne
-  } = e, re = ye(), m = K(null), I = U(P), [R, W] = $(i || ""), [ae, oe] = $(void 0), g = K(!1), S = U(G), z = /^[0-9]$/;
-  xe(() => {
+  } = e, re = ye(), m = K(null), I = U(P), [R, W] = $(i || ""), [ae, oe] = $(void 0), b = K(!1), S = U(G), z = /^[0-9]$/;
+  Ce(() => {
     W(i || "");
   }, [i]);
-  const ie = c === l.ondark, ce = c === l.onblueberry, le = !!d && R.toString().length > d, x = c === l.oninvalid || !!E || !!q || le, C = O === Ce.large, se = M && c !== l.ondark && !x, ue = v(t["input-wrapper"], p), de = v(t["input-container"], {
+  const ie = c === l.ondark, ce = c === l.onblueberry, le = !!d && R.toString().length > d, C = c === l.oninvalid || !!E || !!q || le, x = O === xe.large, se = M && c !== l.ondark && !C, ue = v(t["input-wrapper"], p), de = v(t["input-container"], {
     [t["input-container--transparent"]]: se,
     [t["input-container--on-blueberry"]]: ce,
     [t["input-container--on-dark"]]: ie,
-    [t["input-container--invalid"]]: x,
-    [t["input-container--large"]]: C,
+    [t["input-container--invalid"]]: C,
+    [t["input-container--large"]]: x,
     [t["input-container--disabled"]]: u,
     [t["input-container--with-icon"]]: a
   }), me = v(t["input-container__input"], {
-    [t["input-container__input--large"]]: C,
+    [t["input-container__input--large"]]: x,
     [t["input-container__input--disabled"]]: u
-  }), A = u ? F("neutral", 700) : F("black"), _ = re === Ee.xs || !C ? B.XSmall : B.Small, V = () => {
+  }), A = u ? F("neutral", 700) : F("black"), _ = re === Ee.xs || !x ? B.XSmall : B.Small, V = () => {
     if (a)
-      return typeof a == "string" ? /* @__PURE__ */ r.createElement(Re, { className: t["input-container__input__icon"], color: A, size: _, iconName: a }) : /* @__PURE__ */ r.createElement(Ne, { className: t["input-container__input__icon"], color: A, size: _, svgIcon: a });
+      return typeof a == "string" ? /* @__PURE__ */ r.createElement(We, { className: t["input-container__input__icon"], color: A, size: _, iconName: a }) : /* @__PURE__ */ r.createElement(Ie, { className: t["input-container__input__icon"], color: A, size: _, svgIcon: a });
   }, pe = (n) => {
     if (m && m.current && a) {
-      const o = b ? 0 : 1;
+      const o = g ? 0 : 1;
       m.current.children[o].focus(), e.onClick && e.onClick(n);
     }
   }, fe = (n) => {
@@ -77,40 +78,51 @@ const ze = (e, s, p) => {
   }, he = (n) => {
     if (typeof y > "u" || h !== "number") return n.target.value;
     const o = Number(n.target.value);
-    return !ae && !g.current && (o === 1 || o === -1) && (n.target.value = y + ""), n.target.value;
-  }, be = (n) => {
-    z.test(n.key) && (g.current = !0), N && N(n);
+    return !ae && !b.current && (o === 1 || o === -1) && (n.target.value = y + ""), n.target.value;
   }, ge = (n) => {
-    z.test(n.key) && (g.current = !1);
-  }, D = k ? ze(k, !!a, _) : void 0;
-  return /* @__PURE__ */ r.createElement(we, { errorText: E, errorTextId: S }, /* @__PURE__ */ r.createElement("div", { "data-testid": j, "data-analyticsid": _e.Input, className: ue, ref: H }, Ie(X, I, c), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper"] }, /* @__PURE__ */ r.createElement("div", { onClick: pe, ref: m, className: de, style: { maxWidth: D } }, !b && V(), /* @__PURE__ */ r.createElement(
-    "input",
+    z.test(n.key) && (b.current = !0), N && N(n);
+  }, be = (n) => {
+    z.test(n.key) && (b.current = !1);
+  }, D = k ? Ae(k, !!a, _) : void 0;
+  return /* @__PURE__ */ r.createElement(Ne, { errorText: E, errorTextId: S }, /* @__PURE__ */ r.createElement("div", { "data-testid": j, "data-analyticsid": _e.Input, className: ue, ref: H }, Re(X, I, c), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper"] }, /* @__PURE__ */ r.createElement(
+    "div",
     {
-      onChange: fe,
-      onKeyDown: be,
-      onKeyUp: ge,
-      name: L,
-      type: h,
-      defaultValue: i,
-      id: I,
-      className: me,
-      ref: s,
-      "aria-labelledby": e["aria-labelledby"] ?? void 0,
-      "aria-describedby": ke(e, S),
-      "aria-invalid": !!x,
-      disabled: u,
-      placeholder: f,
-      readOnly: J,
-      autoComplete: Q || "off",
-      required: Z,
-      autoFocus: ee,
-      ...ne
-    }
-  ), b && V()), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper__right-of-input"] }, Y)), d && /* @__PURE__ */ r.createElement(We, { maxCharacters: d, length: R.toString().length, maxText: te, mode: c, maxWidth: D }), T));
+      onClick: pe,
+      ref: we([m, e.inputContainerRef]),
+      className: de,
+      style: { maxWidth: D }
+    },
+    !g && V(),
+    /* @__PURE__ */ r.createElement(
+      "input",
+      {
+        onChange: fe,
+        onKeyDown: ge,
+        onKeyUp: be,
+        name: L,
+        type: h,
+        defaultValue: i,
+        id: I,
+        className: me,
+        ref: s,
+        "aria-labelledby": e["aria-labelledby"] ?? void 0,
+        "aria-describedby": ke(e, S),
+        "aria-invalid": !!C,
+        disabled: u,
+        placeholder: f,
+        readOnly: J,
+        autoComplete: Q || "off",
+        required: Z,
+        autoFocus: ee,
+        ...ne
+      }
+    ),
+    g && V()
+  ), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper__right-of-input"] }, Y)), d && /* @__PURE__ */ r.createElement(Se, { maxCharacters: d, length: R.toString().length, maxText: te, mode: c, maxWidth: D }), T));
 });
-Ae.displayName = "Input";
+Ve.displayName = "Input";
 export {
-  Se as InputTypes,
-  Ae as default
+  ze as InputTypes,
+  Ve as default
 };
 //# sourceMappingURL=Input.js.map

package/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\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  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextUuid = useUuid(errorTextId);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div onClick={handleClick} ref={inputContainerRef} className={inputContainer} style={{ maxWidth }}>\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","size","baseIncrementValue","label","error","errorText","errorTextId","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","errorTextUuid","numRegex","useEffect","onDark","onBlueberry","maxCharactersExceeded","onError","isLarge","FormSize","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","LazyIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\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  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextUuid = useUuid(errorTextId);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--large']]: isLarge,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRef, props.inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","size","baseIncrementValue","label","error","errorText","errorTextId","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","errorTextUuid","numRegex","useEffect","onDark","onBlueberry","maxCharactersExceeded","onError","isLarge","FormSize","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","LazyIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","mergeRefs","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}

package/components/Input/styles.module.scss

@@ -32,13 +32,13 @@
 }
 
 .input-container {
-  @include input-container;
-
   $container: &;
 
   padding: 0.5rem 0;
   align-items: center;
 
+  @include input-container;
+
   &--with-icon {
     padding: 1px 0;
 

package/components/Loader/Loader.d.ts

@@ -7,7 +7,7 @@ export declare enum Overlay {
     parent = "parent"
 }
 export interface LoaderProps {
-    /** Sets the color of the loader */
+    /** Sets the color of the loader. If overlay is used, the color will always be white.  */
     color?: LoaderColors;
     /**	Adds custom classes to the element. */
     className?: string;
@@ -23,9 +23,9 @@ export interface LoaderProps {
     inline?: boolean;
     /** Loader is displayed with grey background covering the entire screen */
     overlay?: keyof typeof Overlay;
-    /**  Individual id for loading icon (aria-labelledby).  */
+    /** Individual id for loading icon (aria-labelledby).  */
     ariaLabelledById?: string;
-    /**  String that labels the current loading element  */
+    /** String that labels the current loading element  */
     ariaLabel?: string;
 }
 declare const Loader: React.FC<LoaderProps>;

package/components/Loader/Loader.js

@@ -3,26 +3,25 @@ import i from "classnames";
 import { ZIndex as z, AnalyticsId as D } from "../../constants.js";
 import { uuid as A } from "../../utils/uuid.js";
 import e from "../Loader/styles.module.scss";
-var B = /* @__PURE__ */ ((t) => (t.screen = "screen", t.parent = "parent", t))(B || {});
-const F = (t) => {
+var B = /* @__PURE__ */ ((a) => (a.screen = "screen", a.parent = "parent", a))(B || {});
+const F = (a) => {
   const {
-    overlay: a,
-    color: r = a ? "black" : "neutral",
-    size: d = "small",
+    overlay: t,
+    size: n = "small",
     className: N = "",
     labelId: m = A(),
-    testId: L,
-    center: h,
-    inline: n,
+    testId: h,
+    center: L,
+    inline: d,
     ariaLabelledById: p,
     ariaLabel: I = "Laster inn"
-  } = t, g = () => !(a === "parent" || n), [c, u] = S(g()), _ = d === "small", y = d === "medium", f = d === "large", k = i({
-    [e["loader-wrapper--center"]]: h,
-    [e["loader-wrapper--overlay"]]: a,
-    [e["loader-wrapper--overlay-screen"]]: a === "screen",
-    [e["loader-wrapper--overlay-parent"]]: a === "parent" && c,
-    [e["loader-wrapper--inline"]]: n && c
-  }), x = i(
+  } = a, r = a.overlay ? "white" : a.color || "neutral", g = () => !(t === "parent" || d), [c, u] = S(g()), _ = n === "small", y = n === "medium", f = n === "large", x = i({
+    [e["loader-wrapper--center"]]: L,
+    [e["loader-wrapper--overlay"]]: t,
+    [e["loader-wrapper--overlay-screen"]]: t === "screen",
+    [e["loader-wrapper--overlay-parent"]]: t === "parent" && c,
+    [e["loader-wrapper--inline"]]: d && c
+  }), k = i(
     e.loader,
     {
       [e["loader--small"]]: _,
@@ -43,16 +42,16 @@ const F = (t) => {
     [e["loader__dot--white"]]: r === "white"
   }), s = C(null);
   return R(() => {
-    var v, E, b, w;
-    a === "parent" && ((E = (v = s.current) == null ? void 0 : v.parentElement) != null && E.style) && (s.current.parentElement.style.position = "relative", u(!0)), n && ((w = (b = s.current) == null ? void 0 : b.parentElement) != null && w.style) && (s.current.parentElement.style.display = "flex", u(!0));
-  }, []), /* @__PURE__ */ l.createElement("div", { className: k, ref: s, style: a === "screen" ? { zIndex: z.OverlayScreen } : {} }, c && /* @__PURE__ */ l.createElement(
+    var v, w, E, b;
+    t === "parent" && ((w = (v = s.current) == null ? void 0 : v.parentElement) != null && w.style) && (s.current.parentElement.style.position = "relative", u(!0)), d && ((b = (E = s.current) == null ? void 0 : E.parentElement) != null && b.style) && (s.current.parentElement.style.display = "flex", u(!0));
+  }, []), /* @__PURE__ */ l.createElement("div", { className: x, ref: s, style: t === "screen" ? { zIndex: z.OverlayScreen } : {} }, c && /* @__PURE__ */ l.createElement(
     "div",
     {
-      "data-testid": L,
+      "data-testid": h,
       "data-analyticsid": D.Loader,
       role: "progressbar",
       "aria-labelledby": p || m,
-      className: x
+      className: k
     },
     /* @__PURE__ */ l.createElement("div", { className: o }),
     /* @__PURE__ */ l.createElement("div", { className: o }),