@laerdal/life-react-components 6.0.0-dev.7.full → 6.0.0

package/dist/MiniProductCard/MiniProductCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniProductCard.js","names":["React","styled","useTheme","BREAKPOINTS","COLORS","ComponentTextStyle","SystemIcons","ComponentMStyling","ComponentSStyling","StyledLink","jsx","_jsx","jsxs","_jsxs","ProductLink","props","_objectSpread","getColor","theme","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","product","target","$variant","href","children","image","src","name","type","ChevronRight","color","className","size","propTypes","_pt","string"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <ProductLink $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,IAAIC,QAAQ,QAAQ,mBAAmB;AACpD,SAAQC,WAAW,EAAEC,MAAM,EAAEC,kBAAkB,QAAO,WAAW;AACjE,SAAQC,WAAW,QAAO,UAAU;AAEpC,SAAQC,iBAAiB,EAAEC,iBAAiB,QAAO,WAAW;AAC9D,SAASC,UAAU,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOpD,MAAMC,WAAW,GAAGb,MAAM,CAACc,KAAK,iBAAIJ,IAAA,CAACF,UAAU,EAAAO,aAAA,KAAKD,KAAK,CAAG,CAAC,CAAC;AAC9D;AACA;AACA;AACA,WAAWA,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AACzD;AACA;AACA,IAAIf,WAAW,CAACgB,MAAM;AACtB;AACA;AACA,CAAC;AAED,MAAMC,YAAY,GAAGnB,MAAM,CAACoB,GAAG;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBN,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AACrE;AACA;AACA,cAAcH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAClE;AACA;AACA;AACA,kBAAkBH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACtE;AACA;AACA,cAAcH,KAAK,IAAIX,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAClE;AACA;AACA,CAAC;AAED,MAAMI,YAAY,GAAGrB,MAAM,CAACsB,GAAG;AAC/B;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,WAAW,GAAGvB,MAAM,CAACwB,EAAE;AAC7B,IAAIV,KAAK,IAAIR,iBAAiB,CAACF,kBAAkB,CAACqB,OAAO,EAAEtB,MAAM,CAACa,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACjG;AACA;AACA,CAAC;AAED,MAAMS,WAAW,GAAG1B,MAAM,CAAC2B,IAAI;AAC/B,IAAIb,KAAK,IAAIP,iBAAiB,CAACH,kBAAkB,CAACqB,OAAO,EAAEtB,MAAM,CAACa,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACjG;AACA,CAAC;AAED,MAAMW,mBAAmB,GAAG5B,MAAM,CAACoB,GAAG;AACtC;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMS,gBAAgB,GAAG7B,MAAM,CAACoB,GAAG;AACnC;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMU,eAA8D,GAAGC,IAAA,IAA8D;EAAA,IAA7D;IAAEC,GAAG;IAAEC,OAAO;IAAEC,MAAM,GAAG;EAA8B,CAAC,GAAAH,IAAA;EAC9H,MAAMd,KAAK,GAAGhB,QAAQ,CAAC,CAAC;EACxB,oBACES,IAAA,CAACG,WAAW;IAACsB,QAAQ,EAAC,WAAW;IAACC,IAAI,EAAEJ,GAAG,IAAI,EAAG;IAACE,MAAM,EAAEA,MAAO;IAAAG,QAAA,eAChEzB,KAAA,CAACO,YAAY;MAAAkB,QAAA,GACVJ,OAAO,CAACK,KAAK,iBAAI5B,IAAA,CAACW,YAAY;QAACkB,GAAG,EAAEN,OAAO,CAACK;MAAM,CAAE,CAAC,eACtD1B,KAAA,CAACgB,mBAAmB;QAAAS,QAAA,gBAClB3B,IAAA,CAACa,WAAW;UAAAc,QAAA,EAAEJ,OAAO,CAACO;QAAI,CAAc,CAAC,eACzC9B,IAAA,CAACgB,WAAW;UAAAW,QAAA,EAAEJ,OAAO,CAACQ;QAAI,CAAc,CAAC;MAAA,CACtB,CAAC,eACtB/B,IAAA,CAACmB,gBAAgB;QAAAQ,QAAA,eACf3B,IAAA,CAACL,WAAW,CAACqC,YAAY;UAACC,KAAK,EAAExC,MAAM,CAACa,QAAQ,CAAC,SAAS,EAAEC,KAAK,CAAE;UAAC2B,SAAS,EAAE,uBAAwB;UAACC,IAAI,EAAE;QAAO,CAAE;MAAC,CACxG,CAAC;IAAA,CACP;EAAC,CACJ,CAAC;AAElB,CAAC;AAACf,eAAA,CAAAgB,SAAA;EAtFAd,GAAG,EAAAe,GAAA,CAAAC,MAAA;EACHd,MAAM,EAAAa,GAAA,CAAAC;AAAA;AAuFR,eAAelB,eAAe","ignoreList":[]}
+{"version":3,"file":"MiniProductCard.js","names":["React","styled","useTheme","BREAKPOINTS","COLORS","ComponentTextStyle","SystemIcons","ComponentMStyling","ComponentSStyling","StyledLink","useNavigation","jsx","_jsx","jsxs","_jsxs","ProductLink","props","_objectSpread","getColor","theme","MEDIUM","ProductThing","div","ProductImage","img","ProductName","h2","Regular","ProductType","span","ProductInnerWrapper","RightIconWrapper","MiniProductCard","_ref","url","external","product","target","navigate","onClick","e","preventDefault","$variant","href","children","image","src","name","type","ChevronRight","color","className","size","propTypes","_pt","string","bool"],"sources":["../../src/MiniProductCard/MiniProductCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {SystemIcons} from '../icons';\r\nimport {Product} from '../types';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport { StyledLink } from '../HyperLink/HyperLink';\r\nimport { useNavigation } from '../Navigation';\r\n\r\nexport type MiniProductCardProps = {\r\n  product: Product;\r\n  url?: string;\r\n  target?: string;\r\n  external?: boolean;\r\n};\r\nconst ProductLink = styled(props => <StyledLink {...props} />)`\r\n  display: flex;\r\n  flex: 1;\r\n  margin: 10px 8px;\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n  text-decoration: none;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    width: 305px;\r\n  }\r\n`;\r\n\r\nconst ProductThing = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  border-radius: 8px;\r\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\r\n\r\n  &:hover {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n  &:active {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    .product-chevron-right-path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nconst ProductImage = styled.img`\r\n  width: 95px;\r\n  height: 75px;\r\n  object-fit: fill;\r\n  border-radius: 8px;\r\n`;\r\n\r\nconst ProductName = styled.h2`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n  margin-top: 3px;\r\n`;\r\n\r\nconst ProductType = styled.span`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  margin: 0;\r\n`;\r\n\r\nconst ProductInnerWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 18px;\r\n  flex: 1;\r\n`;\r\n\r\nconst RightIconWrapper = styled.div`\r\n  display: flex;\r\n  justify-self: flex-start;\r\n  align-items: center;\r\n  padding-right: 12px;\r\n`;\r\n\r\nconst MiniProductCard: React.FunctionComponent<MiniProductCardProps> = ({ url, external, product, target = '_self' }: MiniProductCardProps) => {\r\n  const theme = useTheme();\r\n  const { navigate } = useNavigation();\r\n  const onClick = (e: any) => {\r\n    if (external) {\r\n      return;\r\n    }\r\n    e?.preventDefault();\r\n    navigate && navigate(url ?? '', false);\r\n  };\r\n  return (\r\n    <ProductLink onClick={onClick} $variant='styleless' href={url ?? ''} target={target}>\r\n      <ProductThing>\r\n        {product.image && <ProductImage src={product.image} />}\r\n        <ProductInnerWrapper>\r\n          <ProductName>{product.name}</ProductName>\r\n          <ProductType>{product.type}</ProductType>\r\n        </ProductInnerWrapper>\r\n        <RightIconWrapper>\r\n          <SystemIcons.ChevronRight color={COLORS.getColor('primary', theme)} className={'product-chevron-right'} size={'24px'} />\r\n        </RightIconWrapper>\r\n      </ProductThing>\r\n    </ProductLink>\r\n  );\r\n};\r\n\r\nexport default MiniProductCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Modals/ModalContainer.cjs

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _reactModal = _interopRequireDefault(require("react-modal"));
 var _styles = require("../styles");
+var _styledComponents = require("styled-components");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -79,26 +80,102 @@ const modalTransitions = `
   transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);
 }
 `;
-const Counter = {
-  openInstances: 0
-};
-const ModalContainer = props => {
-  const [scroll, setScroll] = React.useState();
-  const [wasOpened, setWasOpened] = React.useState(false);
-  const preventScroll = offset => {
-    Counter.openInstances++;
-    setWasOpened(true);
-    if (document) {
-      setScroll(offset);
+class ModalContainer extends React.Component {
+  componentDidMount() {
+    if (_reactModal.default.defaultStyles.overlay) {
+      _reactModal.default.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
+    }
+
+    //append style node to override modal transition classes
+    if (!document.querySelector('[modal-custom-styling="active"]')) {
+      const head = document.head || document.getElementsByTagName('head')[0];
+      const style = document.createElement('style');
+      style.setAttribute('modal-custom-styling', 'active');
+      head.appendChild(style);
+      style.appendChild(document.createTextNode(modalTransitions));
+    }
+    if (this.props.showModal) {
+      this.preventScroll(window.scrollY);
+    }
+  }
+  getSnapshotBeforeUpdate(prevProps, prevState) {
+    return {
+      scroll: window.scrollY
+    };
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.props.showModal && !prevProps.showModal) {
+      this.preventScroll(snapshot.scroll);
+    }
+    if (!this.props.showModal && prevProps.showModal) {
+      this.resetScroll();
+    }
+  }
+  componentWillUnmount() {
+    if (this.props.showModal) {
+      this.resetScroll();
+    }
+  }
+  render() {
+    const {
+      id,
+      showModal,
+      closeModal,
+      children,
+      height = 'auto',
+      width = 'auto',
+      overflow = 'visible',
+      padding,
+      minWidth = '',
+      maxWidth = '',
+      zIndex = parseInt(_styles.Z_INDEXES.modal),
+      shouldCloseOnOverlayClick = true
+    } = this.props;
+
+    // should be at least z-index of modal and below z-index of toast
+    const zIndexValue = Math.min(Math.max(zIndex, +_styles.Z_INDEXES.modal), +_styles.Z_INDEXES.toast - 1);
+    const stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
+      height,
+      width,
+      padding,
+      overflow,
+      minWidth,
+      maxWidth,
+      zIndex: zIndexValue,
+      background: _styles.COLORS.generateToken({
+        componentType: 'bg-surface',
+        defaultVariant: 'default'
+      }, this.context.theme)
+    });
+    const styles = {
+      content: stylesConfiguration
+    };
+    _reactModal.default.setAppElement('body');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactModal.default, {
+      id: id,
+      isOpen: showModal,
+      closeTimeoutMS: 120,
+      onRequestClose: () => closeModal(),
+      shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
+      style: styles,
+      children: children
+    });
+  }
+  preventScroll(offset) {
+    if (!ModalContainer.openInstances) {
+      this.setState({
+        scroll: offset
+      });
       document.body.style.position = 'fixed';
       document.body.style.left = `0px`;
       document.body.style.right = `0px`;
       document.body.style.top = `-${offset}px`;
     }
-  };
-  const resetScroll = () => {
-    Counter.openInstances--;
-    if (!Counter.openInstances && document) {
+    ModalContainer.openInstances++;
+  }
+  resetScroll() {
+    ModalContainer.openInstances--;
+    if (!ModalContainer.openInstances) {
       //@ts-ignore
       document.body.style.position = null;
       //@ts-ignore
@@ -107,74 +184,14 @@ const ModalContainer = props => {
       document.body.style.top = null;
       //@ts-ignore
       document.body.style.right = null;
-      scroll && window.scrollTo(0, scroll);
-      setScroll(0);
-    }
-  };
-  React.useEffect(() => {
-    window && setScroll(window.scrollY);
-  });
-  React.useEffect(() => {
-    //modal was opened
-    window && !props.showModal && wasOpened && resetScroll();
-    //modal was closed
-    window && props.showModal && preventScroll(window.scrollY);
-  }, [props.showModal]);
-  React.useEffect(() => {
-    if (_reactModal.default.defaultStyles.overlay) {
-      _reactModal.default.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
-    }
-
-    //append style node to override modal transition classes
-    if (document && !document.querySelector('[modal-custom-styling="active"]')) {
-      const head = document.head || document.getElementsByTagName('head')[0];
-      const style = document.createElement('style');
-      style.setAttribute('modal-custom-styling', 'active');
-      head.appendChild(style);
-      style.appendChild(document.createTextNode(modalTransitions));
+      this.state.scroll && window.scrollTo(0, this.state.scroll);
+      this.setState({
+        scroll: 0
+      });
     }
-  }, []);
-  const {
-    id,
-    showModal,
-    closeModal,
-    children,
-    height = 'auto',
-    width = 'auto',
-    overflow = 'visible',
-    padding,
-    minWidth = '',
-    maxWidth = '',
-    zIndex = parseInt(_styles.Z_INDEXES.modal),
-    shouldCloseOnOverlayClick = true
-  } = props;
-
-  // should be at least z-index of modal and below z-index of toast
-  const zIndexValue = Math.min(Math.max(zIndex, +_styles.Z_INDEXES.modal), +_styles.Z_INDEXES.toast - 1);
-  const stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
-    height,
-    width,
-    padding,
-    overflow,
-    minWidth,
-    maxWidth,
-    zIndex: zIndexValue
-  });
-  const styles = {
-    content: stylesConfiguration
-  };
-  _reactModal.default.setAppElement('body');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactModal.default, {
-    id: id,
-    isOpen: showModal,
-    closeTimeoutMS: 120,
-    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
-    onRequestClose: () => closeModal(),
-    style: styles,
-    children: children
-  });
-};
-ModalContainer.propTypes = {
+  }
+}
+(0, _defineProperty2.default)(ModalContainer, "propTypes", {
   id: _propTypes.default.string,
   showModal: _propTypes.default.bool.isRequired,
   closeModal: _propTypes.default.func.isRequired,
@@ -187,6 +204,8 @@ ModalContainer.propTypes = {
   maxWidth: _propTypes.default.string,
   zIndex: _propTypes.default.number,
   shouldCloseOnOverlayClick: _propTypes.default.bool
-};
+});
+(0, _defineProperty2.default)(ModalContainer, "openInstances", 0);
+(0, _defineProperty2.default)(ModalContainer, "contextType", _styledComponents.ThemeContext);
 var _default = exports.default = ModalContainer;
 //# sourceMappingURL=ModalContainer.cjs.map

package/dist/Modals/ModalContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContainer.cjs","names":["React","_interopRequireWildcard","require","_reactModal","_interopRequireDefault","_styles","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","Counter","openInstances","ModalContainer","props","scroll","setScroll","useState","wasOpened","setWasOpened","preventScroll","offset","document","body","style","position","resetScroll","window","scrollTo","useEffect","scrollY","showModal","ReactModal","defaultStyles","overlay","backgroundColor","querySelector","head","getElementsByTagName","createElement","setAttribute","appendChild","createTextNode","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","shouldCloseOnOverlayClick","zIndexValue","Math","min","max","toast","stylesConfiguration","assign","styles","setAppElement","jsx","isOpen","closeTimeoutMS","onRequestClose","propTypes","_propTypes","string","bool","isRequired","func","any","number","_default","exports"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n  content: {\r\n    top: 'auto',\r\n    left: 'auto',\r\n    right: 'auto',\r\n    bottom: 'auto',\r\n    marginRight: '-50%',\r\n    width: '640px',\r\n    height: '320px',\r\n    borderRadius: '8px',\r\n    boxSizing: 'border-box' as any,\r\n    margin: 0,\r\n    overflow: 'auto',\r\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n  },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n  from{\r\n    transform: scale(1.1, 1.1);\r\n  }\r\n  to {\r\n    transform: scale(1, 1);\r\n  }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.backdrop};\r\n  display:flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n  opacity: 1;\r\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n  z-index: ${Z_INDEXES.modal};\r\n  opacity:0;\r\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n  opacity: 1;\r\n  animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n  opacity: 0;\r\n  transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n  opacity: 0;\r\n  transform: scale(1.1, 1.1);\r\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n  id?: string;\r\n  showModal: boolean;\r\n  closeModal: () => void;\r\n  children: any;\r\n  height?: any;\r\n  width?: any;\r\n  overflow?: string;\r\n  padding?: string;\r\n  minWidth?: string;\r\n  maxWidth?: string;\r\n  zIndex?: number;\r\n  shouldCloseOnOverlayClick?: boolean;\r\n};\r\n\r\nconst Counter = { openInstances : 0};\r\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\r\n\r\n  const [scroll, setScroll] = React.useState<number>();\r\n  const [wasOpened, setWasOpened] = React.useState<boolean>(false);\r\n  \r\n  const preventScroll = (offset: number) => {\r\n    Counter.openInstances++;\r\n    setWasOpened(true);\r\n    if (document) {\r\n      setScroll(offset);\r\n      document.body.style.position = 'fixed';\r\n      document.body.style.left = `0px`;\r\n      document.body.style.right = `0px`;\r\n      document.body.style.top = `-${offset}px`;\r\n    }\r\n  }\r\n\r\n  const resetScroll = () => {\r\n    Counter.openInstances--;\r\n    if (!Counter.openInstances && document) {\r\n      //@ts-ignore\r\n      document.body.style.position = null;\r\n      //@ts-ignore\r\n      document.body.style.left = null;\r\n      //@ts-ignore\r\n      document.body.style.top = null;\r\n      //@ts-ignore\r\n      document.body.style.right = null;\r\n      scroll && window.scrollTo(0, scroll);\r\n      setScroll(0);\r\n    }\r\n  }\r\n\r\n  React.useEffect(() => {\r\n    window && setScroll(window.scrollY);\r\n  });\r\n\r\n  React.useEffect(() => {\r\n    //modal was opened\r\n    window && !props.showModal && wasOpened && resetScroll();\r\n    //modal was closed\r\n    window && props.showModal && preventScroll(window.scrollY);\r\n  }, [props.showModal]);\r\n\r\n\r\n  React.useEffect(() => {\r\n    if (ReactModal.defaultStyles.overlay) {\r\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n    }\r\n\r\n    //append style node to override modal transition classes\r\n    if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n      const head = document.head || document.getElementsByTagName('head')[0];\r\n      const style = document.createElement('style');\r\n      style.setAttribute('modal-custom-styling', 'active');\r\n      head.appendChild(style);\r\n      style.appendChild(document.createTextNode(modalTransitions));\r\n    }\r\n    \r\n  }, []);\r\n\r\n  const {\r\n    id,\r\n    showModal,\r\n    closeModal,\r\n    children,\r\n    height = 'auto',\r\n    width = 'auto',\r\n    overflow = 'visible',\r\n    padding,\r\n    minWidth = '',\r\n    maxWidth = '',\r\n    zIndex = parseInt(Z_INDEXES.modal),\r\n    shouldCloseOnOverlayClick = true\r\n  } = props;\r\n\r\n  // should be at least z-index of modal and below z-index of toast\r\n  const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n  const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n    height,\r\n    width,\r\n    padding,\r\n    overflow,\r\n    minWidth,\r\n    maxWidth,\r\n    zIndex: zIndexValue\r\n  });\r\n  const styles = {content: stylesConfiguration};\r\n  ReactModal.setAppElement('body');\r\n  return (\r\n    <ReactModal id={id}\r\n                isOpen={showModal}\r\n                closeTimeoutMS={120}\r\n                shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\r\n                onRequestClose={() => closeModal()}\r\n                style={styles}>\r\n      {children}\r\n    </ReactModal>\r\n  );\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ModalContainer.cjs","names":["React","_interopRequireWildcard","require","_reactModal","_interopRequireDefault","_styles","_styledComponents","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","Component","componentDidMount","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","getSnapshotBeforeUpdate","prevProps","prevState","scroll","componentDidUpdate","snapshot","resetScroll","componentWillUnmount","render","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","shouldCloseOnOverlayClick","zIndexValue","Math","min","max","toast","stylesConfiguration","assign","background","COLORS","generateToken","componentType","defaultVariant","context","theme","styles","setAppElement","jsx","isOpen","closeTimeoutMS","onRequestClose","offset","openInstances","setState","body","position","state","scrollTo","_propTypes","string","bool","isRequired","func","any","number","ThemeContext","_default","exports"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS, COLORS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes, ThemeContext} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n  content: {\r\n    top: 'auto',\r\n    left: 'auto',\r\n    right: 'auto',\r\n    bottom: 'auto',\r\n    marginRight: '-50%',\r\n    width: '640px',\r\n    height: '320px',\r\n    borderRadius: '8px',\r\n    boxSizing: 'border-box' as any,\r\n    margin: 0,\r\n    overflow: 'auto',\r\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n  },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n  from{\r\n    transform: scale(1.1, 1.1);\r\n  }\r\n  to {\r\n    transform: scale(1, 1);\r\n  }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.backdrop};\r\n  display:flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n  opacity: 1;\r\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n  z-index: ${Z_INDEXES.modal};\r\n  opacity:0;\r\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n  opacity: 1;\r\n  animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n  opacity: 0;\r\n  transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n  opacity: 0;\r\n  transform: scale(1.1, 1.1);\r\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n  id?: string;\r\n  showModal: boolean;\r\n  closeModal: () => void;\r\n  children: any;\r\n  height?: any;\r\n  width?: any;\r\n  overflow?: string;\r\n  padding?: string;\r\n  minWidth?: string;\r\n  maxWidth?: string;\r\n  zIndex?: number;\r\n  shouldCloseOnOverlayClick?: boolean;\r\n};\r\n\r\ntype ModalContainerState = {\r\n  scroll: number;\r\n};\r\n\r\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\r\n  private static openInstances = 0;\r\n\r\n  static contextType = ThemeContext;\r\n  declare context: React.ContextType<typeof ThemeContext>;\r\n\r\n  componentDidMount() {\r\n    if (ReactModal.defaultStyles.overlay) {\r\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n    }\r\n\r\n    //append style node to override modal transition classes\r\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n      const head = document.head || document.getElementsByTagName('head')[0];\r\n      const style = document.createElement('style');\r\n      style.setAttribute('modal-custom-styling', 'active');\r\n      head.appendChild(style);\r\n      style.appendChild(document.createTextNode(modalTransitions));\r\n    }\r\n\r\n    if (this.props.showModal) {\r\n      this.preventScroll(window.scrollY);\r\n    }\r\n  }\r\n\r\n  getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\r\n    return {scroll: window.scrollY};\r\n  }\r\n\r\n  componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\r\n    if (this.props.showModal && !prevProps.showModal) {\r\n      this.preventScroll(snapshot!.scroll);\r\n    }\r\n    if (!this.props.showModal && prevProps.showModal) {\r\n      this.resetScroll();\r\n    }\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    if (this.props.showModal) {\r\n      this.resetScroll();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const {\r\n      id,\r\n      showModal,\r\n      closeModal,\r\n      children,\r\n      height = 'auto',\r\n      width = 'auto',\r\n      overflow = 'visible',\r\n      padding,\r\n      minWidth = '',\r\n      maxWidth = '',\r\n      zIndex = parseInt(Z_INDEXES.modal),\r\n      shouldCloseOnOverlayClick = true\r\n    } = this.props;\r\n\r\n    // should be at least z-index of modal and below z-index of toast\r\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n    const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n      height,\r\n      width,\r\n      padding,\r\n      overflow,\r\n      minWidth,\r\n      maxWidth,\r\n      zIndex: zIndexValue,\r\n      background: COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, this.context!.theme)\r\n    });\r\n    const styles = {content: stylesConfiguration};\r\n\r\n    ReactModal.setAppElement('body');\r\n    return (\r\n      <ReactModal id={id}\r\n                  isOpen={showModal}\r\n                  closeTimeoutMS={120}\r\n                  onRequestClose={() => closeModal()}\r\n                  shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\r\n                  style={styles}>\r\n        {children}\r\n      </ReactModal>\r\n    );\r\n  }\r\n\r\n  private preventScroll(offset: number) {\r\n    if (!ModalContainer.openInstances) {\r\n      this.setState({scroll: offset});\r\n      document.body.style.position = 'fixed';\r\n      document.body.style.left = `0px`;\r\n      document.body.style.right = `0px`;\r\n      document.body.style.top = `-${offset}px`;\r\n    }\r\n    ModalContainer.openInstances++\r\n  }\r\n\r\n  private resetScroll() {\r\n    ModalContainer.openInstances--;\r\n    if (!ModalContainer.openInstances) {\r\n      //@ts-ignore\r\n      document.body.style.position = null;\r\n      //@ts-ignore\r\n      document.body.style.left = null;\r\n      //@ts-ignore\r\n      document.body.style.top = null;\r\n      //@ts-ignore\r\n      document.body.style.right = null;\r\n      this.state.scroll && window.scrollTo(0, this.state.scroll);\r\n      this.setState({scroll: 0});\r\n    }\r\n  }\r\n}\r\n\r\nexport default ModalContainer;"],"mappings":"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","ignoreList":[]}

package/dist/Modals/ModalContainer.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ThemeContext } from 'styled-components';
 type ModalContainerProps = {
     id?: string;
     showModal: boolean;
@@ -13,5 +14,23 @@ type ModalContainerProps = {
     zIndex?: number;
     shouldCloseOnOverlayClick?: boolean;
 };
-declare const ModalContainer: React.FC<ModalContainerProps>;
+type ModalContainerState = {
+    scroll: number;
+};
+declare class ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {
+    private static openInstances;
+    static contextType: React.Context<import("styled-components").DefaultTheme | undefined>;
+    context: React.ContextType<typeof ThemeContext>;
+    componentDidMount(): void;
+    getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): {
+        scroll: number;
+    };
+    componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: {
+        scroll: number;
+    }): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+    private preventScroll;
+    private resetScroll;
+}
 export default ModalContainer;

package/dist/Modals/ModalContainer.js

@@ -4,8 +4,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
 import ReactModal from 'react-modal';
-import { BOXSHADOWS } from '../styles';
+import { BOXSHADOWS, COLORS } from '../styles';
 import { Z_INDEXES } from '../styles';
+import { ThemeContext } from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ModalContainerStyles = {
   content: {
@@ -71,26 +72,102 @@ const modalTransitions = `
   transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);
 }
 `;
-const Counter = {
-  openInstances: 0
-};
-const ModalContainer = props => {
-  const [scroll, setScroll] = React.useState();
-  const [wasOpened, setWasOpened] = React.useState(false);
-  const preventScroll = offset => {
-    Counter.openInstances++;
-    setWasOpened(true);
-    if (document) {
-      setScroll(offset);
+class ModalContainer extends React.Component {
+  componentDidMount() {
+    if (ReactModal.defaultStyles.overlay) {
+      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
+    }
+
+    //append style node to override modal transition classes
+    if (!document.querySelector('[modal-custom-styling="active"]')) {
+      const head = document.head || document.getElementsByTagName('head')[0];
+      const style = document.createElement('style');
+      style.setAttribute('modal-custom-styling', 'active');
+      head.appendChild(style);
+      style.appendChild(document.createTextNode(modalTransitions));
+    }
+    if (this.props.showModal) {
+      this.preventScroll(window.scrollY);
+    }
+  }
+  getSnapshotBeforeUpdate(prevProps, prevState) {
+    return {
+      scroll: window.scrollY
+    };
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.props.showModal && !prevProps.showModal) {
+      this.preventScroll(snapshot.scroll);
+    }
+    if (!this.props.showModal && prevProps.showModal) {
+      this.resetScroll();
+    }
+  }
+  componentWillUnmount() {
+    if (this.props.showModal) {
+      this.resetScroll();
+    }
+  }
+  render() {
+    const {
+      id,
+      showModal,
+      closeModal,
+      children,
+      height = 'auto',
+      width = 'auto',
+      overflow = 'visible',
+      padding,
+      minWidth = '',
+      maxWidth = '',
+      zIndex = parseInt(Z_INDEXES.modal),
+      shouldCloseOnOverlayClick = true
+    } = this.props;
+
+    // should be at least z-index of modal and below z-index of toast
+    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);
+    const stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
+      height,
+      width,
+      padding,
+      overflow,
+      minWidth,
+      maxWidth,
+      zIndex: zIndexValue,
+      background: COLORS.generateToken({
+        componentType: 'bg-surface',
+        defaultVariant: 'default'
+      }, this.context.theme)
+    });
+    const styles = {
+      content: stylesConfiguration
+    };
+    ReactModal.setAppElement('body');
+    return /*#__PURE__*/_jsx(ReactModal, {
+      id: id,
+      isOpen: showModal,
+      closeTimeoutMS: 120,
+      onRequestClose: () => closeModal(),
+      shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
+      style: styles,
+      children: children
+    });
+  }
+  preventScroll(offset) {
+    if (!ModalContainer.openInstances) {
+      this.setState({
+        scroll: offset
+      });
       document.body.style.position = 'fixed';
       document.body.style.left = `0px`;
       document.body.style.right = `0px`;
       document.body.style.top = `-${offset}px`;
     }
-  };
-  const resetScroll = () => {
-    Counter.openInstances--;
-    if (!Counter.openInstances && document) {
+    ModalContainer.openInstances++;
+  }
+  resetScroll() {
+    ModalContainer.openInstances--;
+    if (!ModalContainer.openInstances) {
       //@ts-ignore
       document.body.style.position = null;
       //@ts-ignore
@@ -99,74 +176,14 @@ const ModalContainer = props => {
       document.body.style.top = null;
       //@ts-ignore
       document.body.style.right = null;
-      scroll && window.scrollTo(0, scroll);
-      setScroll(0);
-    }
-  };
-  React.useEffect(() => {
-    window && setScroll(window.scrollY);
-  });
-  React.useEffect(() => {
-    //modal was opened
-    window && !props.showModal && wasOpened && resetScroll();
-    //modal was closed
-    window && props.showModal && preventScroll(window.scrollY);
-  }, [props.showModal]);
-  React.useEffect(() => {
-    if (ReactModal.defaultStyles.overlay) {
-      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
+      this.state.scroll && window.scrollTo(0, this.state.scroll);
+      this.setState({
+        scroll: 0
+      });
     }
-
-    //append style node to override modal transition classes
-    if (document && !document.querySelector('[modal-custom-styling="active"]')) {
-      const head = document.head || document.getElementsByTagName('head')[0];
-      const style = document.createElement('style');
-      style.setAttribute('modal-custom-styling', 'active');
-      head.appendChild(style);
-      style.appendChild(document.createTextNode(modalTransitions));
-    }
-  }, []);
-  const {
-    id,
-    showModal,
-    closeModal,
-    children,
-    height = 'auto',
-    width = 'auto',
-    overflow = 'visible',
-    padding,
-    minWidth = '',
-    maxWidth = '',
-    zIndex = parseInt(Z_INDEXES.modal),
-    shouldCloseOnOverlayClick = true
-  } = props;
-
-  // should be at least z-index of modal and below z-index of toast
-  const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);
-  const stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
-    height,
-    width,
-    padding,
-    overflow,
-    minWidth,
-    maxWidth,
-    zIndex: zIndexValue
-  });
-  const styles = {
-    content: stylesConfiguration
-  };
-  ReactModal.setAppElement('body');
-  return /*#__PURE__*/_jsx(ReactModal, {
-    id: id,
-    isOpen: showModal,
-    closeTimeoutMS: 120,
-    shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
-    onRequestClose: () => closeModal(),
-    style: styles,
-    children: children
-  });
-};
-ModalContainer.propTypes = {
+  }
+}
+_defineProperty(ModalContainer, "propTypes", {
   id: _pt.string,
   showModal: _pt.bool.isRequired,
   closeModal: _pt.func.isRequired,
@@ -179,6 +196,8 @@ ModalContainer.propTypes = {
   maxWidth: _pt.string,
   zIndex: _pt.number,
   shouldCloseOnOverlayClick: _pt.bool
-};
+});
+_defineProperty(ModalContainer, "openInstances", 0);
+_defineProperty(ModalContainer, "contextType", ThemeContext);
 export default ModalContainer;
 //# sourceMappingURL=ModalContainer.js.map

package/dist/Modals/ModalContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContainer.js","names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","jsx","_jsx","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","Counter","openInstances","ModalContainer","props","scroll","setScroll","useState","wasOpened","setWasOpened","preventScroll","offset","document","body","style","position","resetScroll","window","scrollTo","useEffect","scrollY","showModal","defaultStyles","overlay","backgroundColor","querySelector","head","getElementsByTagName","createElement","setAttribute","appendChild","createTextNode","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","shouldCloseOnOverlayClick","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","_objectSpread","styles","setAppElement","isOpen","closeTimeoutMS","onRequestClose","propTypes","_pt","string","bool","isRequired","func","any","number"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n  content: {\r\n    top: 'auto',\r\n    left: 'auto',\r\n    right: 'auto',\r\n    bottom: 'auto',\r\n    marginRight: '-50%',\r\n    width: '640px',\r\n    height: '320px',\r\n    borderRadius: '8px',\r\n    boxSizing: 'border-box' as any,\r\n    margin: 0,\r\n    overflow: 'auto',\r\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n  },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n  from{\r\n    transform: scale(1.1, 1.1);\r\n  }\r\n  to {\r\n    transform: scale(1, 1);\r\n  }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.backdrop};\r\n  display:flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n  opacity: 1;\r\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n  z-index: ${Z_INDEXES.modal};\r\n  opacity:0;\r\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n  opacity: 1;\r\n  animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n  opacity: 0;\r\n  transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n  opacity: 0;\r\n  transform: scale(1.1, 1.1);\r\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n  id?: string;\r\n  showModal: boolean;\r\n  closeModal: () => void;\r\n  children: any;\r\n  height?: any;\r\n  width?: any;\r\n  overflow?: string;\r\n  padding?: string;\r\n  minWidth?: string;\r\n  maxWidth?: string;\r\n  zIndex?: number;\r\n  shouldCloseOnOverlayClick?: boolean;\r\n};\r\n\r\nconst Counter = { openInstances : 0};\r\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\r\n\r\n  const [scroll, setScroll] = React.useState<number>();\r\n  const [wasOpened, setWasOpened] = React.useState<boolean>(false);\r\n  \r\n  const preventScroll = (offset: number) => {\r\n    Counter.openInstances++;\r\n    setWasOpened(true);\r\n    if (document) {\r\n      setScroll(offset);\r\n      document.body.style.position = 'fixed';\r\n      document.body.style.left = `0px`;\r\n      document.body.style.right = `0px`;\r\n      document.body.style.top = `-${offset}px`;\r\n    }\r\n  }\r\n\r\n  const resetScroll = () => {\r\n    Counter.openInstances--;\r\n    if (!Counter.openInstances && document) {\r\n      //@ts-ignore\r\n      document.body.style.position = null;\r\n      //@ts-ignore\r\n      document.body.style.left = null;\r\n      //@ts-ignore\r\n      document.body.style.top = null;\r\n      //@ts-ignore\r\n      document.body.style.right = null;\r\n      scroll && window.scrollTo(0, scroll);\r\n      setScroll(0);\r\n    }\r\n  }\r\n\r\n  React.useEffect(() => {\r\n    window && setScroll(window.scrollY);\r\n  });\r\n\r\n  React.useEffect(() => {\r\n    //modal was opened\r\n    window && !props.showModal && wasOpened && resetScroll();\r\n    //modal was closed\r\n    window && props.showModal && preventScroll(window.scrollY);\r\n  }, [props.showModal]);\r\n\r\n\r\n  React.useEffect(() => {\r\n    if (ReactModal.defaultStyles.overlay) {\r\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n    }\r\n\r\n    //append style node to override modal transition classes\r\n    if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n      const head = document.head || document.getElementsByTagName('head')[0];\r\n      const style = document.createElement('style');\r\n      style.setAttribute('modal-custom-styling', 'active');\r\n      head.appendChild(style);\r\n      style.appendChild(document.createTextNode(modalTransitions));\r\n    }\r\n    \r\n  }, []);\r\n\r\n  const {\r\n    id,\r\n    showModal,\r\n    closeModal,\r\n    children,\r\n    height = 'auto',\r\n    width = 'auto',\r\n    overflow = 'visible',\r\n    padding,\r\n    minWidth = '',\r\n    maxWidth = '',\r\n    zIndex = parseInt(Z_INDEXES.modal),\r\n    shouldCloseOnOverlayClick = true\r\n  } = props;\r\n\r\n  // should be at least z-index of modal and below z-index of toast\r\n  const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n  const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n    height,\r\n    width,\r\n    padding,\r\n    overflow,\r\n    minWidth,\r\n    maxWidth,\r\n    zIndex: zIndexValue\r\n  });\r\n  const styles = {content: stylesConfiguration};\r\n  ReactModal.setAppElement('body');\r\n  return (\r\n    <ReactModal id={id}\r\n                isOpen={showModal}\r\n                closeTimeoutMS={120}\r\n                shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\r\n                onRequestClose={() => closeModal()}\r\n                style={styles}>\r\n      {children}\r\n    </ReactModal>\r\n  );\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ModalContainer.js","names":["React","ReactModal","BOXSHADOWS","COLORS","Z_INDEXES","ThemeContext","jsx","_jsx","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","Component","componentDidMount","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","getSnapshotBeforeUpdate","prevProps","prevState","scroll","componentDidUpdate","snapshot","resetScroll","componentWillUnmount","render","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","shouldCloseOnOverlayClick","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","_objectSpread","background","generateToken","componentType","defaultVariant","context","theme","styles","setAppElement","isOpen","closeTimeoutMS","onRequestClose","offset","openInstances","setState","body","position","state","scrollTo","_defineProperty","_pt","string","bool","isRequired","func","any","number"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS, COLORS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes, ThemeContext} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n  content: {\r\n    top: 'auto',\r\n    left: 'auto',\r\n    right: 'auto',\r\n    bottom: 'auto',\r\n    marginRight: '-50%',\r\n    width: '640px',\r\n    height: '320px',\r\n    borderRadius: '8px',\r\n    boxSizing: 'border-box' as any,\r\n    margin: 0,\r\n    overflow: 'auto',\r\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n  },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n  from{\r\n    transform: scale(1.1, 1.1);\r\n  }\r\n  to {\r\n    transform: scale(1, 1);\r\n  }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n  opacity: 0;\r\n  z-index: ${Z_INDEXES.backdrop};\r\n  display:flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n  opacity: 1;\r\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n  z-index: ${Z_INDEXES.modal};\r\n  opacity:0;\r\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n  opacity: 1;\r\n  animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n  opacity: 0;\r\n  transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n  opacity: 0;\r\n  transform: scale(1.1, 1.1);\r\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n  id?: string;\r\n  showModal: boolean;\r\n  closeModal: () => void;\r\n  children: any;\r\n  height?: any;\r\n  width?: any;\r\n  overflow?: string;\r\n  padding?: string;\r\n  minWidth?: string;\r\n  maxWidth?: string;\r\n  zIndex?: number;\r\n  shouldCloseOnOverlayClick?: boolean;\r\n};\r\n\r\ntype ModalContainerState = {\r\n  scroll: number;\r\n};\r\n\r\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\r\n  private static openInstances = 0;\r\n\r\n  static contextType = ThemeContext;\r\n  declare context: React.ContextType<typeof ThemeContext>;\r\n\r\n  componentDidMount() {\r\n    if (ReactModal.defaultStyles.overlay) {\r\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n    }\r\n\r\n    //append style node to override modal transition classes\r\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n      const head = document.head || document.getElementsByTagName('head')[0];\r\n      const style = document.createElement('style');\r\n      style.setAttribute('modal-custom-styling', 'active');\r\n      head.appendChild(style);\r\n      style.appendChild(document.createTextNode(modalTransitions));\r\n    }\r\n\r\n    if (this.props.showModal) {\r\n      this.preventScroll(window.scrollY);\r\n    }\r\n  }\r\n\r\n  getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\r\n    return {scroll: window.scrollY};\r\n  }\r\n\r\n  componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\r\n    if (this.props.showModal && !prevProps.showModal) {\r\n      this.preventScroll(snapshot!.scroll);\r\n    }\r\n    if (!this.props.showModal && prevProps.showModal) {\r\n      this.resetScroll();\r\n    }\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    if (this.props.showModal) {\r\n      this.resetScroll();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const {\r\n      id,\r\n      showModal,\r\n      closeModal,\r\n      children,\r\n      height = 'auto',\r\n      width = 'auto',\r\n      overflow = 'visible',\r\n      padding,\r\n      minWidth = '',\r\n      maxWidth = '',\r\n      zIndex = parseInt(Z_INDEXES.modal),\r\n      shouldCloseOnOverlayClick = true\r\n    } = this.props;\r\n\r\n    // should be at least z-index of modal and below z-index of toast\r\n    const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n    const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n      height,\r\n      width,\r\n      padding,\r\n      overflow,\r\n      minWidth,\r\n      maxWidth,\r\n      zIndex: zIndexValue,\r\n      background: COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, this.context!.theme)\r\n    });\r\n    const styles = {content: stylesConfiguration};\r\n\r\n    ReactModal.setAppElement('body');\r\n    return (\r\n      <ReactModal id={id}\r\n                  isOpen={showModal}\r\n                  closeTimeoutMS={120}\r\n                  onRequestClose={() => closeModal()}\r\n                  shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\r\n                  style={styles}>\r\n        {children}\r\n      </ReactModal>\r\n    );\r\n  }\r\n\r\n  private preventScroll(offset: number) {\r\n    if (!ModalContainer.openInstances) {\r\n      this.setState({scroll: offset});\r\n      document.body.style.position = 'fixed';\r\n      document.body.style.left = `0px`;\r\n      document.body.style.right = `0px`;\r\n      document.body.style.top = `-${offset}px`;\r\n    }\r\n    ModalContainer.openInstances++\r\n  }\r\n\r\n  private resetScroll() {\r\n    ModalContainer.openInstances--;\r\n    if (!ModalContainer.openInstances) {\r\n      //@ts-ignore\r\n      document.body.style.position = null;\r\n      //@ts-ignore\r\n      document.body.style.left = null;\r\n      //@ts-ignore\r\n      document.body.style.top = null;\r\n      //@ts-ignore\r\n      document.body.style.right = null;\r\n      this.state.scroll && window.scrollTo(0, this.state.scroll);\r\n      this.setState({scroll: 0});\r\n    }\r\n  }\r\n}\r\n\r\nexport default ModalContainer;"],"mappings":"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","ignoreList":[]}