@helsenorge/designsystem-react 8.0.2 → 8.1.1

package/components/Loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\n\nimport loaderStyles from './styles.module.scss';\n\nexport type LoaderColors = PaletteNames;\nexport type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n\nexport interface LoaderProps {\n  /** Sets the color of the loader */\n  color?: LoaderColors;\n  /**\tAdds custom classes to the element. */\n  className?: string;\n  /** Changes the size of the loader. */\n  size?: LoaderSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** id of the label */\n  labelId?: string;\n  /** Centers the loader in a container */\n  center?: boolean;\n  /** Inline the loader so it can be used in a span or paragraph */\n  inline?: boolean;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /**  Individual id for loading icon (aria-labelledby).  */\n  ariaLabelledById?: string;\n  /**  String that labels the current loading element  */\n  ariaLabel?: string;\n}\n\nconst Loader: React.FC<LoaderProps> = props => {\n  const {\n    overlay,\n    color = overlay ? 'black' : 'neutral',\n    size = 'small',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n\n  const showLoader = (): boolean => {\n    if (overlay === Overlay.parent || inline) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const [display, setDisplay] = useState(showLoader());\n\n  const isSmall = size === 'small';\n  const isMedium = size === 'medium';\n  const isLarge = size === 'large';\n\n  const loaderWrapperClasses = classNames({\n    [loaderStyles['loader-wrapper--center']]: center,\n    [loaderStyles['loader-wrapper--overlay']]: overlay,\n    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,\n    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,\n    [loaderStyles['loader-wrapper--inline']]: inline && display,\n  });\n  const loaderClasses = classNames(\n    loaderStyles.loader,\n    {\n      [loaderStyles['loader--small']]: isSmall,\n      [loaderStyles['loader--medium']]: isMedium,\n      [loaderStyles['loader--large']]: isLarge,\n    },\n    className\n  );\n  const loaderDotClasses = classNames(loaderStyles.loader__dot, {\n    [loaderStyles['loader__dot--small']]: isSmall,\n    [loaderStyles['loader__dot--medium']]: isMedium,\n    [loaderStyles['loader__dot--large']]: isLarge,\n    [loaderStyles['loader__dot--banana']]: color === 'banana',\n    [loaderStyles['loader__dot--cherry']]: color === 'cherry',\n    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',\n    [loaderStyles['loader__dot--neutral']]: color === 'neutral',\n    [loaderStyles['loader__dot--plum']]: color === 'plum',\n    [loaderStyles['loader__dot--black']]: color === 'black',\n    [loaderStyles['loader__dot--white']]: color === 'white',\n  });\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n      setDisplay(true);\n    }\n\n    if (inline && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.display = 'flex';\n      setDisplay(true);\n    }\n  }, []);\n\n  return (\n    <div className={loaderWrapperClasses} ref={wrapperRef} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>\n      {display && (\n        <div\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Loader}\n          role=\"progressbar\"\n          aria-labelledby={ariaLabelledById || labelId}\n          className={loaderClasses}\n        >\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          {!ariaLabelledById && (\n            <span id={labelId} className={loaderStyles['loader__hidden-text']}>\n              {ariaLabel}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Loader;\n"],"names":["Overlay","Loader","props","overlay","color","size","className","labelId","uuid","testId","center","inline","ariaLabelledById","ariaLabel","showLoader","display","setDisplay","useState","isSmall","isMedium","isLarge","loaderWrapperClasses","classNames","loaderStyles","loaderClasses","loaderDotClasses","wrapperRef","useRef","useEffect","_b","_a","_d","_c","ZIndex","React","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/Loader/Loader.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\n\nimport loaderStyles from './styles.module.scss';\n\nexport type LoaderColors = PaletteNames;\nexport type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n\nexport interface LoaderProps {\n  /** Sets the color of the loader. If overlay is used, the color will always be white.  */\n  color?: LoaderColors;\n  /**\tAdds custom classes to the element. */\n  className?: string;\n  /** Changes the size of the loader. */\n  size?: LoaderSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** id of the label */\n  labelId?: string;\n  /** Centers the loader in a container */\n  center?: boolean;\n  /** Inline the loader so it can be used in a span or paragraph */\n  inline?: boolean;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Individual id for loading icon (aria-labelledby).  */\n  ariaLabelledById?: string;\n  /** String that labels the current loading element  */\n  ariaLabel?: string;\n}\n\nconst Loader: React.FC<LoaderProps> = props => {\n  const {\n    overlay,\n    size = 'small',\n    className = '',\n    labelId = uuid(),\n    testId,\n    center,\n    inline,\n    ariaLabelledById,\n    ariaLabel = 'Laster inn',\n  } = props;\n  const color = props.overlay ? 'white' : props.color || 'neutral';\n\n  const showLoader = (): boolean => {\n    if (overlay === Overlay.parent || inline) {\n      return false;\n    }\n\n    return true;\n  };\n\n  const [display, setDisplay] = useState(showLoader());\n\n  const isSmall = size === 'small';\n  const isMedium = size === 'medium';\n  const isLarge = size === 'large';\n\n  const loaderWrapperClasses = classNames({\n    [loaderStyles['loader-wrapper--center']]: center,\n    [loaderStyles['loader-wrapper--overlay']]: overlay,\n    [loaderStyles['loader-wrapper--overlay-screen']]: overlay === Overlay.screen,\n    [loaderStyles['loader-wrapper--overlay-parent']]: overlay === Overlay.parent && display,\n    [loaderStyles['loader-wrapper--inline']]: inline && display,\n  });\n  const loaderClasses = classNames(\n    loaderStyles.loader,\n    {\n      [loaderStyles['loader--small']]: isSmall,\n      [loaderStyles['loader--medium']]: isMedium,\n      [loaderStyles['loader--large']]: isLarge,\n    },\n    className\n  );\n  const loaderDotClasses = classNames(loaderStyles.loader__dot, {\n    [loaderStyles['loader__dot--small']]: isSmall,\n    [loaderStyles['loader__dot--medium']]: isMedium,\n    [loaderStyles['loader__dot--large']]: isLarge,\n    [loaderStyles['loader__dot--banana']]: color === 'banana',\n    [loaderStyles['loader__dot--cherry']]: color === 'cherry',\n    [loaderStyles['loader__dot--kiwi']]: color === 'kiwi',\n    [loaderStyles['loader__dot--neutral']]: color === 'neutral',\n    [loaderStyles['loader__dot--plum']]: color === 'plum',\n    [loaderStyles['loader__dot--black']]: color === 'black',\n    [loaderStyles['loader__dot--white']]: color === 'white',\n  });\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n      setDisplay(true);\n    }\n\n    if (inline && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.display = 'flex';\n      setDisplay(true);\n    }\n  }, []);\n\n  return (\n    <div className={loaderWrapperClasses} ref={wrapperRef} style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}>\n      {display && (\n        <div\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Loader}\n          role=\"progressbar\"\n          aria-labelledby={ariaLabelledById || labelId}\n          className={loaderClasses}\n        >\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          <div className={loaderDotClasses} />\n          {!ariaLabelledById && (\n            <span id={labelId} className={loaderStyles['loader__hidden-text']}>\n              {ariaLabel}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Loader;\n"],"names":["Overlay","Loader","props","overlay","size","className","labelId","uuid","testId","center","inline","ariaLabelledById","ariaLabel","color","showLoader","display","setDisplay","useState","isSmall","isMedium","isLarge","loaderWrapperClasses","classNames","loaderStyles","loaderClasses","loaderDotClasses","wrapperRef","useRef","useEffect","_b","_a","_d","_c","ZIndex","React","AnalyticsId"],"mappings":"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"}

package/components/Loader/styles.module.scss

@@ -14,6 +14,8 @@
 }
 
 @mixin loader-dot-scale($name, $scale-start, $scale-end) {
+  @include animate($name, scale, 0.6s, infinite);
+
   @include keyframes($name) {
     0% {
       transform: scale($scale-start);
@@ -23,11 +25,11 @@
       transform: scale($scale-end);
     }
   }
-
-  @include animate($name, scale, 0.6s, infinite);
 }
 
 @mixin loader-dot-translate($name, $distance) {
+  @include animate($name, translate, 0.6s, infinite);
+
   @include keyframes($name) {
     0% {
       transform: translate(0, 0);
@@ -37,8 +39,6 @@
       transform: translate($distance, 0);
     }
   }
-
-  @include animate($name, translate, 0.6s, infinite);
 }
 
 .loader-wrapper {
@@ -105,6 +105,9 @@
     background-color: $blueberry500;
     border-radius: 50%;
 
+    // Sets a form of easing animation curve
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+
     &--small {
       width: 12px;
       height: 12px;
@@ -148,9 +151,6 @@
       background-color: $white;
     }
 
-    // Sets a form of easing animation curve
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);
-
     // Scales up the first dot
     &:nth-child(1) {
       @include loader-dot-scale(scale-regular, 0, 1);

package/components/Modal/Modal.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ZIndex } from '../../constants';
 export declare enum ModalVariants {
     normal = "normal",
     warning = "warning",
@@ -55,15 +54,5 @@ export interface ModalProps {
     /** If disabled, clicking escape or outside the modal will not close it */
     disableCloseEvents?: boolean;
 }
-declare const Modal: {
-    (props: ModalProps): JSX.Element;
-    defaultProps: {
-        variant: ModalVariants;
-        primaryButtonText: string;
-        titleId: string;
-        className: string;
-        size: ModalSize;
-        zIndex: ZIndex;
-    };
-};
+declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/components/Modal/Modal.js

@@ -1,142 +1,145 @@
-import t, { useEffect as N } from "react";
-import n from "classnames";
-import { ZIndex as W, AnalyticsId as R, IconSize as c } from "../../constants.js";
-import { useFocusTrap as P } from "../../hooks/useFocusTrap.js";
-import { useIsVisible as I } from "../../hooks/useIsVisible.js";
-import { palette as u } from "../../theme/palette.js";
-import { uuid as $ } from "../../utils/uuid.js";
-import w from "../Button/Button.js";
-import A from "../Close/Close.js";
-import { Icon as _ } from "../Icon/Icon.js";
-import F from "../Icons/AlertSignFill.js";
-import H from "../Icons/AlertSignStroke.js";
-import K from "../Icons/CheckOutline.js";
-import O from "../Portal/index.js";
-import { Title as D } from "../Title/Title.js";
+import t, { useEffect as k } from "react";
+import o from "classnames";
+import { ZIndex as H, AnalyticsId as K, IconSize as d } from "../../constants.js";
+import { useFocusTrap as O } from "../../hooks/useFocusTrap.js";
+import { useIsVisible as L } from "../../hooks/useIsVisible.js";
+import { palette as v } from "../../theme/palette.js";
+import { uuid as D } from "../../utils/uuid.js";
+import S from "../Button/Button.js";
+import V from "../Close/Close.js";
+import { Icon as E } from "../Icon/Icon.js";
+import Z from "../Icons/AlertSignFill.js";
+import j from "../Icons/AlertSignStroke.js";
+import q from "../Icons/CheckOutline.js";
+import G from "../Portal/index.js";
+import { Title as J } from "../Title/Title.js";
 import a from "../Modal/styles.module.scss";
-var V = /* @__PURE__ */ ((e) => (e.normal = "normal", e.warning = "warning", e.error = "error", e.success = "success", e.image = "image", e))(V || {}), Z = /* @__PURE__ */ ((e) => (e.large = "large", e.medium = "medium", e))(Z || {});
-const j = {
-  variant: "normal",
-  primaryButtonText: "OK",
-  titleId: $(),
-  className: "",
-  size: "large",
-  zIndex: W.Modal
-}, q = (e) => e === "error" ? /* @__PURE__ */ t.createElement(_, { size: c.Small, svgIcon: F, color: u.cherry500 }) : e === "warning" ? /* @__PURE__ */ t.createElement(_, { size: c.Small, svgIcon: H, color: u.black }) : e === "success" ? /* @__PURE__ */ t.createElement(_, { size: c.Small, svgIcon: K, color: u.kiwi900 }) : null, G = (e, r) => {
-  const o = q(e);
-  return o ? /* @__PURE__ */ t.createElement("div", { className: a.modal__iconWrapper }, o) : r ? /* @__PURE__ */ t.createElement("div", { className: a.modal__iconWrapper }, t.cloneElement(r, {
-    size: c.Small
+var M = /* @__PURE__ */ ((e) => (e.normal = "normal", e.warning = "warning", e.error = "error", e.success = "success", e.image = "image", e))(M || {}), Q = /* @__PURE__ */ ((e) => (e.large = "large", e.medium = "medium", e))(Q || {});
+const U = (e) => e === "error" ? /* @__PURE__ */ t.createElement(E, { size: d.Small, svgIcon: Z, color: v.cherry500 }) : e === "warning" ? /* @__PURE__ */ t.createElement(E, { size: d.Small, svgIcon: j, color: v.black }) : e === "success" ? /* @__PURE__ */ t.createElement(E, { size: d.Small, svgIcon: q, color: v.kiwi900 }) : null, X = (e, n) => {
+  const m = U(e);
+  return m ? /* @__PURE__ */ t.createElement("div", { className: a.modal__iconWrapper }, m) : n ? /* @__PURE__ */ t.createElement("div", { className: a.modal__iconWrapper }, t.cloneElement(n, {
+    size: d.Small
   })) : null;
-}, J = (e) => {
-  var C, h;
-  const r = t.useRef(null), o = t.useRef(null), m = t.useRef(null);
-  P(m, !0);
-  const B = I(r), f = t.useRef(null), k = I(f), s = o.current && o.current.scrollHeight > o.current.clientHeight;
-  function v(l) {
+}, fe = (e) => {
+  var I, B;
+  const {
+    variant: n = "normal",
+    primaryButtonText: m = "OK",
+    titleId: W = D(),
+    className: x = "",
+    size: c = "large",
+    zIndex: T = H.Modal
+  } = e, b = t.useRef(null), s = t.useRef(null), u = t.useRef(null);
+  O(u, !0);
+  const R = L(b), g = t.useRef(null), z = L(g), r = s.current && s.current.scrollHeight > s.current.clientHeight;
+  function y(l) {
     l.key === "Escape" && e.onClose && (l.stopPropagation(), e.onClose());
   }
-  function E(l) {
-    l.target && d.current === l.target && e.onClose && (l.stopPropagation(), e.onClose());
+  function C(l) {
+    l.target && _.current === l.target && e.onClose && (l.stopPropagation(), e.onClose());
   }
-  function z() {
+  function $() {
     document.body.style.overflow = "hidden";
   }
-  function x() {
+  function A() {
     document.body.style.removeProperty("overflow");
   }
-  const i = e.variant === "image", d = t.useRef(null), g = e.secondaryButtonText && ((C = e.secondaryButtonText) == null ? void 0 : C.length) > 0 || e.onSuccess, L = e.ariaLabelledBy ? void 0 : e.ariaLabel, y = e.ariaLabelledBy ? e.ariaLabelledBy : e.ariaLabel ? void 0 : e.titleId;
-  N(() => {
-    const l = d.current;
-    return z(), !e.disableCloseEvents && l && (l.addEventListener("keydown", v), l.addEventListener("click", E)), () => {
-      x(), !e.disableCloseEvents && l && (l.removeEventListener("keydown", v), l.removeEventListener("click", E));
+  const i = n === "image", _ = t.useRef(null), h = e.secondaryButtonText && ((I = e.secondaryButtonText) == null ? void 0 : I.length) > 0 || e.onSuccess, N = e.ariaLabelledBy ? void 0 : e.ariaLabel, f = e.ariaLabelledBy ? e.ariaLabelledBy : e.ariaLabel ? void 0 : W;
+  k(() => {
+    const l = _.current;
+    return $(), !e.disableCloseEvents && l && (l.addEventListener("keydown", y), l.addEventListener("click", C)), () => {
+      A(), !e.disableCloseEvents && l && (l.removeEventListener("keydown", y), l.removeEventListener("click", C));
     };
-  }, [e.disableCloseEvents]), N(() => {
+  }, [e.disableCloseEvents]), k(() => {
     var l;
-    (l = m.current) == null || l.focus();
+    (l = u.current) == null || l.focus();
   }, []);
-  const S = n(
-    e.className,
+  const P = o(
+    x,
     a.modal,
-    e.variant && a[`modal--${e.variant}`],
-    e.size && a[`modal--${e.size}`],
-    s && !g && a["modal--no-actions"]
-  ), T = n({
-    [a["modal__title--error"]]: e.variant === "error",
-    [a["modal__title--success"]]: e.variant === "success"
+    n && a[`modal--${n}`],
+    c && a[`modal--${c}`],
+    r && !h && a["modal--no-actions"]
+  ), F = o({
+    [a["modal__title--error"]]: n === "error",
+    [a["modal__title--success"]]: n === "success"
     /* success */
-  }), b = /* @__PURE__ */ t.createElement("div", { "data-testid": "dialog-container" }, /* @__PURE__ */ t.createElement(
+  }), w = /* @__PURE__ */ t.createElement("div", { "data-testid": "dialog-container" }, /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: d,
+      ref: _,
       className: a["modal-overlay"],
       "data-testid": e.testId,
-      "data-analyticsid": R.Modal,
-      style: { zIndex: e.zIndex }
+      "data-analyticsid": K.Modal,
+      style: { zIndex: T }
     },
     /* @__PURE__ */ t.createElement("div", { className: a.align }, /* @__PURE__ */ t.createElement(
       "div",
       {
-        className: S,
+        className: P,
         role: "dialog",
         "aria-modal": "true",
         tabIndex: -1,
-        "aria-label": L,
-        "aria-labelledby": y,
-        ref: m
+        "aria-label": N,
+        "aria-labelledby": f,
+        ref: u
       },
       /* @__PURE__ */ t.createElement(
         "div",
         {
-          className: n(a.modal__shadow, a["modal__shadow--top"], {
-            [a["modal__shadow--show"]]: !B && s
+          className: o(a.modal__shadow, a["modal__shadow--top"], {
+            [a["modal__shadow--show"]]: !R && r
           })
         }
       ),
       /* @__PURE__ */ t.createElement(
         "div",
         {
-          className: n(a.modal__contentWrapper, {
+          className: o(a.modal__contentWrapper, {
             [a["modal__contentWrapper--image"]]: i
           }),
-          ref: o
+          tabIndex: r ? 0 : void 0,
+          role: r ? "region" : void 0,
+          "aria-label": r ? N : void 0,
+          "aria-labelledby": r ? f : void 0,
+          ref: s
         },
-        !e.noCloseButton && /* @__PURE__ */ t.createElement("div", { className: a.modal__closeWrapper }, /* @__PURE__ */ t.createElement("div", { className: n(a.modal__closeWrapper__close) }, /* @__PURE__ */ t.createElement(A, { onClick: e.onClose, ariaLabel: e.ariaLabelCloseBtn }))),
+        !e.noCloseButton && /* @__PURE__ */ t.createElement("div", { className: a.modal__closeWrapper }, /* @__PURE__ */ t.createElement("div", { className: o(a.modal__closeWrapper__close) }, /* @__PURE__ */ t.createElement(V, { onClick: e.onClose, ariaLabel: e.ariaLabelCloseBtn }))),
         /* @__PURE__ */ t.createElement(
           "div",
           {
-            className: n(e.size && a[`modal__contentWrapper__scroll--${e.size}`], {
+            className: o(c && a[`modal__contentWrapper__scroll--${c}`], {
               [a["modal__contentWrapper__scroll--image"]]: i
             })
           },
-          /* @__PURE__ */ t.createElement("div", { ref: r }),
-          /* @__PURE__ */ t.createElement("div", { className: a.modal__contentWrapper__title }, G(e.variant, e.icon), /* @__PURE__ */ t.createElement(D, { id: y, htmlMarkup: "h3", appearance: "title3", className: T }, e.title), e.afterTitleChildren && /* @__PURE__ */ t.createElement("div", { className: a.modal__afterTitleChildren }, e.afterTitleChildren)),
+          /* @__PURE__ */ t.createElement("div", { ref: b }),
+          /* @__PURE__ */ t.createElement("div", { className: a.modal__contentWrapper__title }, X(n, e.icon), /* @__PURE__ */ t.createElement(J, { id: f, htmlMarkup: "h3", appearance: "title3", className: F }, e.title), e.afterTitleChildren && /* @__PURE__ */ t.createElement("div", { className: a.modal__afterTitleChildren }, e.afterTitleChildren)),
           i && /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement("div", { className: a.modal__contentWrapper__imageWrapper }, e.children), /* @__PURE__ */ t.createElement("span", { className: a.modal__contentWrapper__imageDescription }, e.description)),
           !i && e.children && /* @__PURE__ */ t.createElement("div", null, e.children),
           !i && !e.children && /* @__PURE__ */ t.createElement("p", { className: a.modal__description }, e.description),
-          /* @__PURE__ */ t.createElement("div", { ref: f })
+          /* @__PURE__ */ t.createElement("div", { ref: g })
         )
       ),
       /* @__PURE__ */ t.createElement(
         "div",
         {
-          className: n(a.modal__shadow, a["modal__shadow--bottom"], {
-            [a["modal__shadow--show"]]: !k && s
+          className: o(a.modal__shadow, a["modal__shadow--bottom"], {
+            [a["modal__shadow--show"]]: !z && r
           })
         }
       ),
-      g && /* @__PURE__ */ t.createElement("div", { className: n(a["modal__call-to-action"], e.size && a[`modal__call-to-action--${e.size}`]) }, e.onSuccess && /* @__PURE__ */ t.createElement(w, { onClick: e.onSuccess }, e.primaryButtonText), e.secondaryButtonText && ((h = e.secondaryButtonText) == null ? void 0 : h.length) > 0 && /* @__PURE__ */ t.createElement(w, { variant: "borderless", onClick: e.onClose }, e.secondaryButtonText))
+      h && /* @__PURE__ */ t.createElement("div", { className: o(a["modal__call-to-action"], c && a[`modal__call-to-action--${c}`]) }, e.onSuccess && /* @__PURE__ */ t.createElement(S, { onClick: e.onSuccess }, m), e.secondaryButtonText && ((B = e.secondaryButtonText) == null ? void 0 : B.length) > 0 && /* @__PURE__ */ t.createElement(S, { variant: "borderless", onClick: e.onClose }, e.secondaryButtonText))
     ))
   ));
   if (e.printable) {
     const l = "print-modal";
-    return /* @__PURE__ */ t.createElement(O, { className: l, testId: "print-modal" }, /* @__PURE__ */ t.createElement("style", { media: "print" }, `body > *:not(.${l}) {display: none;}`), b);
+    return /* @__PURE__ */ t.createElement(G, { className: l, testId: "print-modal" }, /* @__PURE__ */ t.createElement("style", { media: "print" }, `body > *:not(.${l}) {display: none;}`), w);
   }
-  return b;
+  return w;
 };
-J.defaultProps = j;
 export {
-  Z as ModalSize,
-  V as ModalVariants,
-  J as default
+  Q as ModalSize,
+  M as ModalVariants,
+  fe as default
 };
 //# sourceMappingURL=Modal.js.map

package/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { palette } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst defaultProps = {\n  variant: ModalVariants.normal,\n  primaryButtonText: 'OK',\n  titleId: uuid(),\n  className: '',\n  size: ModalSize.large,\n  zIndex: ZIndex.Modal,\n};\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal = (props: ModalProps): JSX.Element => {\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = props.variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? props.titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    props.className,\n    styles.modal,\n    props.variant && styles[`modal--${props.variant}`],\n    props.size && styles[`modal--${props.size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: props.variant === ModalVariants.error,\n    [styles['modal__title--success']]: props.variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex: props.zIndex }}\n      >\n        <div className={styles.align}>\n          <div\n            className={dialogClasses}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={dialogRef}\n          >\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(props.size && styles[`modal__contentWrapper__scroll--${props.size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(props.variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], props.size && styles[`modal__call-to-action--${props.size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{props.primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nModal.defaultProps = defaultProps;\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","defaultProps","uuid","ZIndex","getVariantIcon","variant","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","Modal","props","topContent","modalContentRef","dialogRef","useFocusTrap","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","Close","Title","Button","_b","printModal","Portal"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { palette } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.Modal,\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div\n            className={dialogClasses}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={dialogRef}\n          >\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              aria-label={contentIsScrollable ? ariaLabel : undefined}\n              aria-labelledby={contentIsScrollable ? ariaLabelledBy : undefined}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","getVariantIcon","variant","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","Modal","props","primaryButtonText","titleId","uuid","className","size","zIndex","ZIndex","topContent","modalContentRef","dialogRef","useFocusTrap","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","Close","Title","Button","_b","printModal","Portal"],"mappings":"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"}

package/components/Modal/styles.module.scss

@@ -144,13 +144,13 @@
   }
 
   &__closeWrapper {
+    position: relative;
+    width: 100%;
+
     @media print {
       display: none;
     }
 
-    position: relative;
-    width: 100%;
-
     &__close {
       position: absolute;
       right: getSpacer(3xs);

package/components/Panel/styles.module.scss

@@ -39,8 +39,6 @@ $layout-md-col-gap: getSpacer(m);
 }
 
 .panel {
-  @include panel-padding;
-
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -49,6 +47,8 @@ $layout-md-col-gap: getSpacer(m);
   width: 100%;
   box-sizing: border-box;
 
+  @include panel-padding;
+
   &__layout-1,
   &__layout-2,
   &__layout-3 {

package/components/PopOver/styles.module.scss

@@ -19,11 +19,6 @@
   background-color: $white;
   z-index: 3;
   visibility: hidden;
-
-  &--visible {
-    visibility: visible;
-  }
-
   border: getSpacer(4xs) solid $plum600;
   border-radius: 0.5625rem;
   box-shadow: 0 0.125rem 1.125rem 0 rgb(0 0 0 / 15%);
@@ -33,6 +28,10 @@
     line-height: $lineheight-size-md;
   }
 
+  &--visible {
+    visibility: visible;
+  }
+
   &__arrow {
     --drop-shadow-color: #{$plum600};
 

package/components/Table/styles.module.scss

@@ -17,13 +17,13 @@ table .table-body .table-row {
 }
 
 @mixin block {
+  display: block;
+  clear: both;
+
   .table__head {
     display: none;
   }
 
-  display: block;
-  clear: both;
-
   .table-body,
   .table-row,
   .table__head-cell,

package/components/Tabs/TabList/TabItem.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TabProps } from '../Tab';
+import { TabsColors } from '../Tabs';
+interface TabItemProps {
+    tabProps: TabProps;
+    index: number;
+    color: TabsColors;
+    selectedTab: number;
+    tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;
+    onTabListClick: (index: number) => void;
+}
+declare const TabItem: React.FC<TabItemProps>;
+export default TabItem;

package/components/Tabs/TabList/TabItem.js

@@ -0,0 +1,45 @@
+import a, { useRef as R, useEffect as E } from "react";
+import T from "classnames";
+import { useIsVisible as y } from "../../../hooks/useIsVisible.js";
+import { palette as i } from "../../../theme/palette.js";
+import { Icon as C } from "../../Icon/Icon.js";
+import { IconSize as f } from "../../../constants.js";
+import { LazyIcon as z } from "../../LazyIcon/LazyIcon.js";
+import l from "../../Tabs/TabList/styles.module.scss";
+const w = (e) => {
+  const t = e.index === e.selectedTab, { title: d, onTabClick: o, icon: n, testId: u } = e.tabProps, _ = () => {
+    o && o(e.index), e.onTabListClick(e.index), s(e.index);
+  }, x = T(l["tab-list__tab"], l[`tab-list__tab--${e.color}`], {
+    [l["tab-list__tab--selected"]]: t,
+    [l["tab-list__tab--first"]]: e.index == 0
+  }), I = e.tabRefs.current && e.tabRefs.current[e.index], s = (k) => {
+    var m;
+    const c = e.tabRefs.current && e.tabRefs.current[k];
+    (m = c == null ? void 0 : c.current) == null || m.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+  }, r = R(null), b = y(r);
+  return E(() => {
+    t && b && s(e.index);
+  }, [t && b]), /* @__PURE__ */ a.createElement("li", { role: "presentation", ref: r }, /* @__PURE__ */ a.createElement(
+    "button",
+    {
+      role: "tab",
+      "aria-selected": t,
+      onClick: _,
+      className: x,
+      "data-testid": u,
+      ref: I
+    },
+    /* @__PURE__ */ a.createElement("span", { className: l["tab-list__tab__title-and-icon"] }, n && (typeof n == "string" ? /* @__PURE__ */ a.createElement(
+      z,
+      {
+        iconName: n,
+        size: f.XSmall,
+        color: t ? i.black : i.blueberry500
+      }
+    ) : /* @__PURE__ */ a.createElement(C, { svgIcon: n, size: f.XSmall, color: t ? i.black : i.blueberry500 })), d)
+  ));
+};
+export {
+  w as default
+};
+//# sourceMappingURL=TabItem.js.map

package/components/Tabs/TabList/TabItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabItem.js","sources":["../../../../src/components/Tabs/TabList/TabItem.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    onTabClick && onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--first']]: props.index == 0,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n    currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n  const isVisible = useIsVisible(itemRef);\n\n  useEffect(() => {\n    if (isSelected && isVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected && isVisible]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n"],"names":["TabItem","props","isSelected","title","onTabClick","icon","testId","handleClick","scrollToTab","tabButtonClasses","classNames","styles","currentRef","index","itemRef","useRef","isVisible","useIsVisible","useEffect","React","LazyIcon","IconSize","palette","Icon"],"mappings":";;;;;;;;AAuBA,MAAMA,IAAkC,CAASC,MAAA;AACzC,QAAAC,IAAaD,EAAM,UAAUA,EAAM,aACnC,EAAE,OAAAE,GAAO,YAAAC,GAAY,MAAAC,GAAM,QAAAC,MAAWL,EAAM,UAC5CM,IAAc,MAAY;AAChB,IAAAH,KAAAA,EAAWH,EAAM,KAAK,GAC9BA,EAAA,eAAeA,EAAM,KAAK,GAChCO,EAAYP,EAAM,KAAK;AAAA,EAAA,GAEnBQ,IAAmBC,EAAWC,EAAO,eAAe,GAAGA,EAAO,kBAAkBV,EAAM,KAAK,EAAE,GAAG;AAAA,IACpG,CAACU,EAAO,yBAAyB,CAAC,GAAGT;AAAA,IACrC,CAACS,EAAO,sBAAsB,CAAC,GAAGV,EAAM,SAAS;AAAA,EAAA,CAClD,GAEKW,IAAaX,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QAAQA,EAAM,KAAK,GAEvEO,IAAc,CAACK,MAAwB;;AAC3C,UAAMD,IAAaX,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QAAQY,CAAK;AACvED,KAAAA,IAAAA,KAAAA,gBAAAA,EAAY,YAAZA,QAAAA,EAAqB,eAAe,EAAE,UAAU,UAAU,QAAQ,UAAU,OAAO,UAAA;AAAA,EAAW,GAG1FE,IAAUC,EAAsB,IAAI,GACpCC,IAAYC,EAAaH,CAAO;AAEtC,SAAAI,EAAU,MAAM;AACd,IAAIhB,KAAcc,KAChBR,EAAYP,EAAM,KAAK;AAAA,EACzB,GACC,CAACC,KAAcc,CAAS,CAAC,GAGzBG,gBAAAA,EAAA,cAAA,MAAA,EAAG,MAAK,gBAAe,KAAKL,KAC3BK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAejB;AAAA,MACf,SAASK;AAAA,MACT,WAAWE;AAAA,MACX,eAAaH;AAAA,MACb,KAAKM;AAAA,IAAA;AAAA,IAELO,gBAAAA,EAAA,cAAC,UAAK,WAAWR,EAAO,+BAA+B,EACpD,GAAAN,MACE,OAAOA,KAAS,WACfc,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAUf;AAAA,QACV,MAAMgB,EAAS;AAAA,QACf,OAAOnB,IAAaoB,EAAQ,QAAWA,EAAQ;AAAA,MAAc;AAAA,IAAA,IAG9DH,gBAAAA,EAAA,cAAAI,GAAA,EAAK,SAASlB,GAAM,MAAMgB,EAAS,QAAQ,OAAOnB,IAAaoB,EAAQ,QAAWA,EAAQ,aAAc,CAAG,IAE/GnB,CACH;AAAA,EAAA,CAEJ;AAEJ;"}