@helsenorge/designsystem-react 1.0.0-beta91 → 1.0.0-beta92

package/Modal-b68c7a72.js

@@ -0,0 +1,2 @@
+import{_ as e,a as t}from"./_rollupPluginBabelHelpers-d0752906.js";import r,{useRef as a,useEffect as n,useState as l}from"react";import{c as o}from"./index-9b84fabc.js";import{p as i}from"./palette-f206f488.js";import{B as c}from"./Button-2be46c88.js";import{I as s}from"./Icon-9b4a8a2d.js";import{Z as d,I as m}from"./constants-a4b0b501.js";import u from"./components/Modal/styles.module.scss";import{A as v,a as p}from"./AlertSignFill-e607ff43.js";import{T as f}from"./Title-72851d51.js";import{u as _}from"./uuid-8870ab4b.js";import{C as E}from"./Close-80751ae6.js";import{createPortal as h}from"react-dom";function b(){var e=a(null);function t(t){var r=e.current,a="Tab"===t.key;if(r&&a){var n=function(e){try{return("string"==typeof e?document.querySelector(e):e).getRootNode().activeElement}catch(t){return console.error("Feil ved å ta tak i active element basert på angitt node: ",e,t),null}}(r),l=null==r?void 0:r.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),o=l[0],i=1===l.length?o:l[l.length-1];t.shiftKey?n===o&&(i.focus(),t.preventDefault()):n===i&&(o.focus(),t.preventDefault())}}function r(t){var r=e.current;if(r){var a=r.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select');1===a.length&&(a[0].focus(),t.preventDefault())}}return n((function(){var a=e.current;return a.addEventListener("keydown",t),a.addEventListener("click",r),function(){a.removeEventListener("keydown",t),a.removeEventListener("click",r)}}),[]),e}var y,g,N=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,a=l(!1),o=e(a,2),i=o[0],c=o[1];return n((function(){var e=new IntersectionObserver((function(e){c(e[0].intersectionRatio>=r)}),{threshold:r});return(null==t?void 0:t.current)&&e.observe(t.current),function(){(null==t?void 0:t.current)&&e.unobserve(t.current)}}),[t]),i},x=function(e){e.isExtraSmall;var t=e.isHovered,a=r.createElement("path",{d:"m9.16 23.421 2.883-2.773 8.262 8.584L35.958 12.97l2.882 2.774-18.536 19.257-11.143-11.58zm26.744-13.279-15.6 16.206-8.206-8.529-5.766 5.547 13.973 14.518 21.362-22.193-5.764-5.549z","fill-rule":"evenodd"});return t?r.createElement("path",{d:"m11.128 25.394 2.88-2.771 6.291 6.613 17.071-17.68 2.882 2.775-19.944 20.668-9.18-9.605zM37.318 8.73 20.31 26.345l-6.239-6.558-5.766 5.548 11.996 12.552 22.781-23.609-5.764-5.548z","fill-rule":"evenodd"}):a};function w(e){var t=e.children,a=e.parent,n=e.className,l=e.testId,o=r.useMemo((function(){return document.createElement("div")}),[]);return l&&o.setAttribute("data-testid",l),r.useEffect((function(){var e=a&&a.appendChild?a:document.body,t=["portal-container"];return n&&n.split(" ").forEach((function(e){return t.push(e)})),t.forEach((function(e){return o.classList.add(e)})),e.appendChild(o),function(){e.removeChild(o)}}),[o,a,n]),h(t,o)}!function(e){e.normal="normal",e.warning="warning",e.error="error",e.success="success",e.image="image"}(y||(y={})),function(e){e.large="large",e.medium="medium"}(g||(g={}));var C={variant:y.normal,primaryButtonText:"OK",large:!1,className:"",size:g.large,zIndex:d.Modal},k=function(e,t){var a=function(e){return e===y.error?r.createElement(s,{size:m.Small,svgIcon:v,color:i.cherry500}):e===y.warning?r.createElement(s,{size:m.Small,svgIcon:p,color:i.black}):e===y.success?r.createElement(s,{size:m.Small,svgIcon:x,color:i.kiwi900}):null}(e);return a?r.createElement("div",{className:u.modal__iconWrapper},a):t?r.createElement("div",{className:u.modal__iconWrapper},r.cloneElement(t,{size:m.Small})):null},L=function(a){var l,i,s,d,m=r.useState(0),v=e(m,2),p=v[0],h=v[1],g=r.useState(_()),x=e(g,1)[0],C=r.useRef(null),L=r.useRef(null),B=r.useRef(null),z=N(L),I=r.useRef(null),S=N(I),T=B.current&&B.current.scrollHeight>B.current.clientHeight;function W(e){"Escape"===e.key&&a.onClose&&(e.stopPropagation(),a.onClose())}function j(e){e.target&&A.current===e.target&&a.onClose&&(e.stopPropagation(),a.onClose())}var R=a.variant===y.image,M=null!==(i=a.titleId)&&void 0!==i?i:x,A=r.useRef(null),P=a.secondaryButtonText&&(null===(s=a.secondaryButtonText)||void 0===s?void 0:s.length)>0||a.onSuccess,D=a.ariaLabelledBy?void 0:a.ariaLabel,H=a.ariaLabelledBy?a.ariaLabelledBy:a.ariaLabel?void 0:M;n((function(){var e,t=A.current;return null===(e=C.current)||void 0===e||e.focus(),document.body.style.overflow="hidden",t&&!P&&(t.addEventListener("keydown",W),t.addEventListener("click",j)),function(){document.body.style.removeProperty("overflow"),t&&!P&&(t.removeEventListener("keydown",W),t.removeEventListener("click",j))}}),[]);var q=o((t(l={},u["modal__title--error"],a.variant===y.error),t(l,u["modal__title--success"],a.variant===y.success),l)),F=r.createElement("div",{"data-testid":"dialog-container"},r.createElement("div",{ref:A,className:u["modal-overlay"],"data-testid":a.testId,style:{zIndex:a.zIndex}},r.createElement("div",{className:u.align,ref:b()},r.createElement("div",{className:o(a.className,u.modal,u["modal--".concat(a.variant)],u["modal--".concat(a.size)]),role:"dialog","aria-label":D,"aria-labelledby":H},r.createElement("div",{tabIndex:p,ref:C,onBlur:function(){return h(-1)}}),r.createElement("div",{className:o(u.modal__shadow,u["modal__shadow--top"],t({},u["modal__shadow--show"],!z&&T))}),r.createElement("div",{className:o(u.modal__contentWrapper,t({},u["modal__contentWrapper--image"],R)),ref:B},!a.noCloseButton&&r.createElement("div",{className:u.modal__closeWrapper},r.createElement("div",{className:o(u.modal__closeWrapper__close)},r.createElement(E,{onClick:a.onClose,ariaLabel:a.ariaLabelCloseBtn}))),r.createElement("div",{className:o(u["modal__contentWrapper__scroll--".concat(a.size)],t({},u["modal__contentWrapper__scroll--image"],R))},r.createElement("div",{ref:L}),r.createElement("div",{className:u.modal__contentWrapper__title},k(a.variant,a.icon),r.createElement(f,{id:M,htmlMarkup:"h3",appearance:"title3",className:q},a.title),a.afterTitleChildren&&r.createElement("div",{className:u.modal__afterTitleChildren},a.afterTitleChildren)),R&&r.createElement("div",null,r.createElement("div",{className:u.modal__contentWrapper__imageWrapper},a.children),r.createElement("span",{className:u.modal__contentWrapper__imageDescription},a.description)),!R&&a.children&&r.createElement("div",null,a.children),!R&&!a.children&&r.createElement("p",{className:u.modal__description},a.description),r.createElement("div",{ref:I}))),r.createElement("div",{className:o(u.modal__shadow,u["modal__shadow--bottom"],t({},u["modal__shadow--show"],!S&&T))}),P&&r.createElement("div",{className:o(u["modal__call-to-action"],u["modal__call-to-action--".concat(a.size)])},a.onSuccess&&r.createElement(c,{onClick:a.onSuccess},a.primaryButtonText),a.secondaryButtonText&&(null===(d=a.secondaryButtonText)||void 0===d?void 0:d.length)>0&&r.createElement(c,{variant:"borderless",onClick:a.onClose},a.secondaryButtonText))))));if(a.printable){return r.createElement(w,{className:"print-modal",testId:"print-modal"},r.createElement("style",{media:"print"},"body > *:not(.".concat("print-modal",") {visibility: hidden;}")),F)}return F};L.defaultProps=C;export{L as M};
+//# sourceMappingURL=Modal-b68c7a72.js.map

package/Modal-b68c7a72.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-b68c7a72.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/ButtonWithModal/componentdata.json

@@ -412,6 +412,25 @@
       "type": {
         "name": "(() => void)"
       }
+    },
+    "printable": {
+      "defaultValue": null,
+      "description": "When enabled the component will be rendered in the bottom of document.body",
+      "name": "printable",
+      "parent": {
+        "fileName": "designsystem/src/components/Modal/Modal.tsx",
+        "name": "ModalProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/components/Modal/Modal.tsx",
+          "name": "ModalProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
     }
   }
 }

package/components/ButtonWithModal/index.js

@@ -1,2 +1,2 @@
-import{_ as t}from"../../_rollupPluginBabelHelpers-d0752906.js";import s,{useState as e}from"react";import{B as o}from"../../Button-2be46c88.js";import{M as r}from"../../Modal-e7d8aac4.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../Icon-9b4a8a2d.js";import"../../constants-a4b0b501.js";import"../../Loader-3589bdb1.js";import"../../index-9b84fabc.js";import"../../uuid-8870ab4b.js";import"../Loader/styles.module.scss";import"../../useHover-037be19d.js";import"../../useWindowSize-73b47451.js";import"../Button/styles.module.scss";import"../Modal/styles.module.scss";import"../../AlertSignFill-e607ff43.js";import"../../Title-72851d51.js";import"../Title/styles.module.scss";import"../../Close-80751ae6.js";import"../Close/styles.module.scss";import"../../useBreakpoint-324a9b14.js";var i=s.forwardRef((function(i,m){var a=e(!1),l=t(a,2),p=l[0],n=l[1];return s.createElement("div",{"data-testid":i.testId},s.createElement(o,{onClick:function(){return n(!0)}},i.buttonText),p&&s.createElement(r,Object.assign({},i,{onClose:function(){return n(!1)}})))}));export default i;
+import{_ as t}from"../../_rollupPluginBabelHelpers-d0752906.js";import o,{useState as s}from"react";import{B as e}from"../../Button-2be46c88.js";import{M as r}from"../../Modal-b68c7a72.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../Icon-9b4a8a2d.js";import"../../constants-a4b0b501.js";import"../../Loader-3589bdb1.js";import"../../index-9b84fabc.js";import"../../uuid-8870ab4b.js";import"../Loader/styles.module.scss";import"../../useHover-037be19d.js";import"../../useWindowSize-73b47451.js";import"../Button/styles.module.scss";import"../Modal/styles.module.scss";import"../../AlertSignFill-e607ff43.js";import"../../Title-72851d51.js";import"../Title/styles.module.scss";import"../../Close-80751ae6.js";import"../Close/styles.module.scss";import"../../useBreakpoint-324a9b14.js";import"react-dom";var i=o.forwardRef((function(i,m){var a=s(!1),l=t(a,2),p=l[0],n=l[1];return o.createElement("div",{"data-testid":i.testId},o.createElement(e,{onClick:function(){return n(!0)}},i.buttonText),p&&o.createElement(r,Object.assign({},i,{onClose:function(){return n(!1)}})))}));export default i;
 //# sourceMappingURL=index.js.map

package/components/Modal/Modal.d.ts

@@ -50,6 +50,8 @@ export interface ModalProps {
     onSuccess?: () => void;
     /** Function is called when user clicks secondary button */
     onClose?: () => void;
+    /** When enabled the component will be rendered in the bottom of document.body */
+    printable?: boolean;
 }
 declare const Modal: {
     (props: ModalProps): JSX.Element;

package/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAgBzC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAC9B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2BAA2B;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAuCD,QAAA,MAAM,KAAK;;;;;;;;;;CA4IV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAC9B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2BAA2B;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAuCD,QAAA,MAAM,KAAK;;;;;;;;;;CAwJV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/components/Modal/componentdata.json

@@ -403,6 +403,25 @@
       "type": {
         "name": "(() => void)"
       }
+    },
+    "printable": {
+      "defaultValue": null,
+      "description": "When enabled the component will be rendered in the bottom of document.body",
+      "name": "printable",
+      "parent": {
+        "fileName": "src/components/Modal/Modal.tsx",
+        "name": "ModalProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Modal/Modal.tsx",
+          "name": "ModalProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
     }
   }
 }

package/components/Modal/index.js

@@ -1,2 +1,2 @@
-import{M as s}from"../../Modal-e7d8aac4.js";export{M as default}from"../../Modal-e7d8aac4.js";import"../../_rollupPluginBabelHelpers-d0752906.js";import"react";import"../../index-9b84fabc.js";import"../../palette-f206f488.js";import"../../Button-2be46c88.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../grid-11a70eb7.js";import"../../Icon-9b4a8a2d.js";import"../../constants-a4b0b501.js";import"../../Loader-3589bdb1.js";import"../../uuid-8870ab4b.js";import"../Loader/styles.module.scss";import"../../useHover-037be19d.js";import"../../useWindowSize-73b47451.js";import"../Button/styles.module.scss";import"./styles.module.scss";import"../../AlertSignFill-e607ff43.js";import"../../Title-72851d51.js";import"../Title/styles.module.scss";import"../../Close-80751ae6.js";import"../Close/styles.module.scss";import"../../useBreakpoint-324a9b14.js";
+import{M as s}from"../../Modal-b68c7a72.js";export{M as default}from"../../Modal-b68c7a72.js";import"../../_rollupPluginBabelHelpers-d0752906.js";import"react";import"../../index-9b84fabc.js";import"../../palette-f206f488.js";import"../../Button-2be46c88.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../grid-11a70eb7.js";import"../../Icon-9b4a8a2d.js";import"../../constants-a4b0b501.js";import"../../Loader-3589bdb1.js";import"../../uuid-8870ab4b.js";import"../Loader/styles.module.scss";import"../../useHover-037be19d.js";import"../../useWindowSize-73b47451.js";import"../Button/styles.module.scss";import"./styles.module.scss";import"../../AlertSignFill-e607ff43.js";import"../../Title-72851d51.js";import"../Title/styles.module.scss";import"../../Close-80751ae6.js";import"../Close/styles.module.scss";import"../../useBreakpoint-324a9b14.js";import"react-dom";
 //# sourceMappingURL=index.js.map

package/components/Modal/styles.module.scss

@@ -13,7 +13,7 @@
   bottom: 0;
 
   @media print {
-    display: none;
+    position: absolute;
   }
 }
 
@@ -22,6 +22,13 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
+
+  @media print {
+    position: initial;
+    left: 0;
+    top: 0;
+    transform: none;
+  }
 }
 
 .modal {
@@ -122,6 +129,10 @@
   }
 
   &__closeWrapper {
+    @media print {
+      display: none;
+    }
+
     position: relative;
     width: 100%;
 
@@ -136,6 +147,11 @@
     max-height: calc(100vh - 10rem);
     overflow: auto;
 
+    @media print {
+      overflow: hidden;
+      max-height: none;
+    }
+
     &--image {
       max-height: 100vh;
     }
@@ -218,4 +234,8 @@
       transform: scale(1);
     }
   }
+
+  @media print {
+    width: 100%;
+  }
 }

package/components/Portal/componentdata.json

@@ -0,0 +1,80 @@
+{
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "Add custom class to portal, default class is portal-container",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/Portal/index.tsx",
+        "name": "PortalProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Portal/index.tsx",
+          "name": "PortalProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "children": {
+      "defaultValue": null,
+      "description": "Content to be displayed in Portal",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/Portal/index.tsx",
+        "name": "PortalProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Portal/index.tsx",
+          "name": "PortalProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "parent": {
+      "defaultValue": null,
+      "description": "Default is document.body",
+      "name": "parent",
+      "parent": {
+        "fileName": "src/components/Portal/index.tsx",
+        "name": "PortalProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Portal/index.tsx",
+          "name": "PortalProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "HTMLElement"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Portal/index.tsx",
+        "name": "PortalProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Portal/index.tsx",
+          "name": "PortalProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/Portal/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface PortalProps {
+    /** Add custom class to portal, default class is portal-container */
+    className?: string;
+    /** Content to be displayed in Portal */
+    children?: React.ReactNode;
+    /** Default is document.body */
+    parent?: HTMLElement;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export default function Portal({ children, parent, className, testId }: PortalProps): React.ReactPortal;
+//# sourceMappingURL=index.d.ts.map

package/components/Portal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Portal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,WAAW,GAAG,KAAK,CAAC,WAAW,CAyBtG"}

package/components/Portal/index.js

@@ -0,0 +1,2 @@
+import t from"react";import{createPortal as e}from"react-dom";export default function(r){var n=r.children,o=r.parent,a=r.className,c=r.testId,i=t.useMemo((function(){return document.createElement("div")}),[]);return c&&i.setAttribute("data-testid",c),t.useEffect((function(){var t=o&&o.appendChild?o:document.body,e=["portal-container"];return a&&a.split(" ").forEach((function(t){return e.push(t)})),e.forEach((function(t){return i.classList.add(t)})),t.appendChild(i),function(){t.removeChild(i)}}),[i,o,a]),e(n,i)}
+//# sourceMappingURL=index.js.map

package/components/Portal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
-  "version": "1.0.0-beta91",
+  "version": "1.0.0-beta92",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "tfs",
@@ -54,6 +54,7 @@
     "@types/classnames": "^2.2.11",
     "@types/jest": "^25.2.3",
     "@types/prettier": "1.19.0",
+    "@types/react-dom": "16.9.8",
     "@types/styled-components": "5.0.1",
     "@types/testing-library__react": "^10.0.5",
     "async": "^3.1.0",

package/Modal-e7d8aac4.js

@@ -1,2 +0,0 @@
-import{_ as e,a as t}from"./_rollupPluginBabelHelpers-d0752906.js";import a,{useRef as r,useEffect as n,useState as l}from"react";import{c as o}from"./index-9b84fabc.js";import{p as c}from"./palette-f206f488.js";import{B as i}from"./Button-2be46c88.js";import{I as s}from"./Icon-9b4a8a2d.js";import{Z as d,I as m}from"./constants-a4b0b501.js";import u from"./components/Modal/styles.module.scss";import{A as v,a as p}from"./AlertSignFill-e607ff43.js";import{T as f}from"./Title-72851d51.js";import{u as _}from"./uuid-8870ab4b.js";import{C as E}from"./Close-80751ae6.js";function g(){var e=r(null);function t(t){var a=e.current,r="Tab"===t.key;if(a&&r){var n=function(e){try{return("string"==typeof e?document.querySelector(e):e).getRootNode().activeElement}catch(t){return console.error("Feil ved å ta tak i active element basert på angitt node: ",e,t),null}}(a),l=null==a?void 0:a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),o=l[0],c=1===l.length?o:l[l.length-1];t.shiftKey?n===o&&(c.focus(),t.preventDefault()):n===c&&(o.focus(),t.preventDefault())}}function a(t){var a=e.current;if(a){var r=a.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select');1===r.length&&(r[0].focus(),t.preventDefault())}}return n((function(){var r=e.current;return r.addEventListener("keydown",t),r.addEventListener("click",a),function(){r.removeEventListener("keydown",t),r.removeEventListener("click",a)}}),[]),e}var h,b,y=function(t){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,r=l(!1),o=e(r,2),c=o[0],i=o[1];return n((function(){var e=new IntersectionObserver((function(e){i(e[0].intersectionRatio>=a)}),{threshold:a});return(null==t?void 0:t.current)&&e.observe(t.current),function(){(null==t?void 0:t.current)&&e.unobserve(t.current)}}),[t]),c},N=function(e){e.isExtraSmall;var t=e.isHovered,r=a.createElement("path",{d:"m9.16 23.421 2.883-2.773 8.262 8.584L35.958 12.97l2.882 2.774-18.536 19.257-11.143-11.58zm26.744-13.279-15.6 16.206-8.206-8.529-5.766 5.547 13.973 14.518 21.362-22.193-5.764-5.549z","fill-rule":"evenodd"});return t?a.createElement("path",{d:"m11.128 25.394 2.88-2.771 6.291 6.613 17.071-17.68 2.882 2.775-19.944 20.668-9.18-9.605zM37.318 8.73 20.31 26.345l-6.239-6.558-5.766 5.548 11.996 12.552 22.781-23.609-5.764-5.548z","fill-rule":"evenodd"}):r};!function(e){e.normal="normal",e.warning="warning",e.error="error",e.success="success",e.image="image"}(h||(h={})),function(e){e.large="large",e.medium="medium"}(b||(b={}));var x={variant:h.normal,primaryButtonText:"OK",large:!1,className:"",size:b.large,zIndex:d.Modal},w=function(e,t){var r=function(e){return e===h.error?a.createElement(s,{size:m.Small,svgIcon:v,color:c.cherry500}):e===h.warning?a.createElement(s,{size:m.Small,svgIcon:p,color:c.black}):e===h.success?a.createElement(s,{size:m.Small,svgIcon:N,color:c.kiwi900}):null}(e);return r?a.createElement("div",{className:u.modal__iconWrapper},r):t?a.createElement("div",{className:u.modal__iconWrapper},a.cloneElement(t,{size:m.Small})):null},k=function(r){var l,c,s,d,m=a.useState(0),v=e(m,2),p=v[0],b=v[1],N=a.useState(_()),x=e(N,1)[0],k=a.useRef(null),B=a.useRef(null),C=a.useRef(null),L=y(B),z=a.useRef(null),S=y(z),I=C.current&&C.current.scrollHeight>C.current.clientHeight;function T(e){"Escape"===e.key&&r.onClose&&(e.stopPropagation(),r.onClose())}function W(e){e.target&&M.current===e.target&&r.onClose&&(e.stopPropagation(),r.onClose())}var j=r.variant===h.image,R=null!==(c=r.titleId)&&void 0!==c?c:x,M=a.useRef(null),P=r.secondaryButtonText&&(null===(s=r.secondaryButtonText)||void 0===s?void 0:s.length)>0||r.onSuccess,A=r.ariaLabelledBy?void 0:r.ariaLabel,D=r.ariaLabelledBy?r.ariaLabelledBy:r.ariaLabel?void 0:R;n((function(){var e,t=M.current;return null===(e=k.current)||void 0===e||e.focus(),document.body.style.overflow="hidden",t&&!P&&(t.addEventListener("keydown",T),t.addEventListener("click",W)),function(){document.body.style.removeProperty("overflow"),t&&!P&&(t.removeEventListener("keydown",T),t.removeEventListener("click",W))}}),[]);var H=o((t(l={},u["modal__title--error"],r.variant===h.error),t(l,u["modal__title--success"],r.variant===h.success),l));return a.createElement("div",{"data-testid":"dialog-container"},a.createElement("div",{ref:M,className:u["modal-overlay"],"data-testid":r.testId,style:{zIndex:r.zIndex}},a.createElement("div",{className:u.align,ref:g()},a.createElement("div",{className:o(r.className,u.modal,u["modal--".concat(r.variant)],u["modal--".concat(r.size)]),role:"dialog","aria-label":A,"aria-labelledby":D},a.createElement("div",{tabIndex:p,ref:k,onBlur:function(){return b(-1)}}),a.createElement("div",{className:o(u.modal__shadow,u["modal__shadow--top"],t({},u["modal__shadow--show"],!L&&I))}),a.createElement("div",{className:o(u.modal__contentWrapper,t({},u["modal__contentWrapper--image"],j)),ref:C},!r.noCloseButton&&a.createElement("div",{className:u.modal__closeWrapper},a.createElement("div",{className:o(u.modal__closeWrapper__close)},a.createElement(E,{onClick:r.onClose,ariaLabel:r.ariaLabelCloseBtn}))),a.createElement("div",{className:o(u["modal__contentWrapper__scroll--".concat(r.size)],t({},u["modal__contentWrapper__scroll--image"],j))},a.createElement("div",{ref:B}),a.createElement("div",{className:u.modal__contentWrapper__title},w(r.variant,r.icon),a.createElement(f,{id:R,htmlMarkup:"h3",appearance:"title3",className:H},r.title),r.afterTitleChildren&&a.createElement("div",{className:u.modal__afterTitleChildren},r.afterTitleChildren)),j&&a.createElement("div",null,a.createElement("div",{className:u.modal__contentWrapper__imageWrapper},r.children),a.createElement("span",{className:u.modal__contentWrapper__imageDescription},r.description)),!j&&r.children&&a.createElement("div",null,r.children),!j&&!r.children&&a.createElement("p",{className:u.modal__description},r.description),a.createElement("div",{ref:z}))),a.createElement("div",{className:o(u.modal__shadow,u["modal__shadow--bottom"],t({},u["modal__shadow--show"],!S&&I))}),P&&a.createElement("div",{className:o(u["modal__call-to-action"],u["modal__call-to-action--".concat(r.size)])},r.onSuccess&&a.createElement(i,{onClick:r.onSuccess},r.primaryButtonText),r.secondaryButtonText&&(null===(d=r.secondaryButtonText)||void 0===d?void 0:d.length)>0&&a.createElement(i,{variant:"borderless",onClick:r.onClose},r.secondaryButtonText))))))};k.defaultProps=x;export{k as M};
-//# sourceMappingURL=Modal-e7d8aac4.js.map

package/Modal-e7d8aac4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal-e7d8aac4.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}