@hhgtech/hhg-components 1.29.82 → 1.29.84

package/build/index-31c0bdad.js

@@ -0,0 +1,256 @@
+'use strict';
+
+var React = require('react');
+var useScrollbarSize = require('./useScrollbarSize-f077e15f.js');
+var ReactDOM = require('react-dom');
+var styled = require('@emotion/styled');
+var utils = require('./utils-7effa670.js');
+var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
+var miscTheme = require('./miscTheme.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const StyledModal = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].div `
+    position: relative;
+    z-index: 200;
+    background-color: ${miscTheme.theme.colors.white};
+    border-radius: ${miscTheme.theme.borderRadius};
+    box-shadow: 0px 8px 40px 0px #0000001a;
+    &[data-site-type='marryBaby'] {
+      border-radius: 16px;
+      .hhg-modal__content {
+        position: relative;
+        z-index: 111;
+        height: 100%;
+        padding: 24px;
+      }
+    }
+    .hhg-modal__content {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+      padding: 16px;
+    }
+    .hhg-modal__video {
+      position: relative;
+      z-index: 111;
+      height: 100%;
+      background-color: none;
+      box-shadow: none;
+    }
+  `, 'hhgcomp-modal-modal');
+const StyledModalWrapper = styled__default["default"].div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 201;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  visibility: hidden;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  transition: opacity 0.3s ease-in-out;
+
+  .hhg-modal__close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+  }
+  &[data-type='video'] {
+    z-index: 1001;
+  }
+  &[data-open='true'] {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  ${StyledModal.classSelector} {
+    transition: transform 0.3s ease-in-out;
+  }
+  &.slideTop {
+    ${StyledModal.classSelector} {
+      transform: translate(0, -100vh);
+    }
+
+    &[data-open='true'] {
+      ${StyledModal.classSelector} {
+        transform: translate(0);
+      }
+    }
+  }
+
+  &.scaleUp {
+    ${StyledModal.classSelector} {
+      transform: scale(0.9);
+    }
+
+    &[data-open='true'] {
+      ${StyledModal.classSelector} {
+        transform: scale(1);
+      }
+    }
+  }
+
+  &[data-type='tail'] {
+    justify-content: flex-end;
+    ${StyledModal.classSelector} {
+      width: 420px;
+      height: 100%;
+      border-radius: 0;
+      overflow: hidden auto;
+    }
+  }
+  &[data-type='form'] {
+    ${StyledModal.classSelector} {
+      width: 496px;
+      height: 548px;
+      max-height: 100%;
+      overflow-y: auto;
+      ${utils.MediaQueries.mbDown} {
+        width: 340px;
+      }
+    }
+  }
+  &[data-type='video'] {
+    ${StyledModal.classSelector} {
+      height: 100%;
+      max-height: 539px;
+      ${utils.MediaQueries.mbDown} {
+        height: 192px;
+        width: 100%;
+        height: 100%;
+        border-radius: ${miscTheme.theme.borderRadius};
+        max-height: 192px;
+      }
+    }
+  }
+  &[data-type='confirm'] {
+    ${StyledModal.classSelector} {
+      width: 100%;
+      max-width: 407px;
+      ${utils.MediaQueries.mbDown} {
+        width: calc(100% - 32px);
+        max-width: calc(100% - 32px);
+      }
+    }
+  }
+`;
+const StyledModalMask = styled__default["default"].div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+
+  &[data-open='false'] {
+    display: none;
+  }
+  &[data-type='video'] {
+    background-color: ${miscTheme.theme.colors.secondaryDark};
+  }
+`;
+
+const MODAL_ROOT_ID = 'hhg-modals';
+const getModalsRoot = () => {
+    let el = document.getElementById(MODAL_ROOT_ID);
+    if (!el) {
+        el = document.createElement('div');
+        el.setAttribute('id', MODAL_ROOT_ID);
+        document.body.append(el);
+    }
+    return el;
+};
+const cleanUpModalShow = () => {
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    // Remove the opening class if there are only 1 popup is shown
+    if (remainingPopupOpened.length < 1) {
+        document.body.classList.remove('hhc-modal-show');
+    }
+};
+const cleanUpDisabledScroll = () => {
+    // Clear the overflow if there are only 1 popup is shown. useEffect runs after so the count number becomes zero
+    const selector = '.hhg-modal[data-open="true"]';
+    const remainingPopupOpened = document.querySelectorAll(selector);
+    if (remainingPopupOpened.length < 1) {
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+        document.body.classList.remove('hhc-disabled-scroll');
+    }
+};
+/**
+ * @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
+ */
+const Modal = ({ type = 'lead', closeIcon, isOpen = true, onClose, children, className = '', animationType = 'scaleUp', isStaticBackdrop = false, siteType, }) => {
+    const [mounted, setMounted] = React.useState(false);
+    const elRef = React.useRef(null);
+    const { width: scrollBarWidth } = useScrollbarSize.useScrollbarSize();
+    if (!elRef.current && mounted) {
+        elRef.current = document.createElement('div');
+    }
+    React.useEffect(() => {
+        setMounted(true);
+        return () => {
+            setMounted(false);
+            cleanUpModalShow();
+            cleanUpDisabledScroll();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (mounted) {
+            const modalsRoot = getModalsRoot();
+            modalsRoot.appendChild(elRef.current);
+            return () => {
+                modalsRoot.removeChild(elRef.current);
+            };
+        }
+    }, [mounted]);
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.classList.add('hhc-modal-show');
+        }
+        else {
+            cleanUpModalShow();
+        }
+    }, [isOpen]);
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = scrollBarWidth + 'px';
+            document.body.classList.add('hhc-disabled-scroll');
+        }
+        else {
+            cleanUpDisabledScroll();
+        }
+    }, [isOpen, scrollBarWidth]);
+    if (!mounted)
+        return null;
+    const classes = ['hhg-modal__wrapper', className, animationType]
+        .filter((s) => s)
+        .join(' ');
+    return ReactDOM.createPortal(React__default["default"].createElement(StyledModalWrapper, { className: classes, "data-open": isOpen, "data-type": type },
+        !isStaticBackdrop && (React__default["default"].createElement(StyledModalMask, { "data-open": isOpen, onClick: onClose, "data-type": type })),
+        !isStaticBackdrop && type === 'video' && !!closeIcon && (React__default["default"].createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+        React__default["default"].createElement(StyledModal, { className: "hhg-modal", "data-open": isOpen, "data-site-type": siteType },
+            React__default["default"].createElement("div", { className: type === 'video' ? 'hhg-modal__video' : 'hhg-modal__content' },
+                !!closeIcon && type !== 'video' && (React__default["default"].createElement("div", { className: "hhg-modal__close", onClick: onClose }, closeIcon)),
+                children))), elRef.current);
+};
+
+exports.Modal = Modal;

package/build/{index-3eb666e6.js → index-353ce6f8.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-bd3f8718.js');
+var tslib_es6 = require('./tslib.es6-a7663f7d.js');
 var React = require('react');
 var core = require('@mantine/core');
 

package/build/{index-6aeb5ff5.js → index-35ac1158.js}

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-1fdf2f01.js');
+var index = require('./index-4184d8d6.js');
 var styled = require('@emotion/styled');
-var theme = require('./theme-be20929b.js');
-var utils = require('./utils-15a9772e.js');
-var index$1 = require('./index-dff7ee1b.js');
-var index$2 = require('./index-a9bbb5aa.js');
-var defaultClassWrapper = require('./defaultClassWrapper-b7719693.js');
-var tslib_es6 = require('./tslib.es6-bd3f8718.js');
+var miscTheme = require('./miscTheme.js');
+var utils = require('./utils-7effa670.js');
+var index$1 = require('./index-848c257f.js');
+var index$2 = require('./index-9112bf2c.js');
+var miscDefaultClassWrapper = require('./miscDefaultClassWrapper.js');
+var tslib_es6 = require('./tslib.es6-a7663f7d.js');
 var flattenChildren = require('react-keyed-flatten-children');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -80,13 +80,13 @@ const renderNotificationStyles = (type, size, hasIcon, color) => {
     switch (color) {
         case 'primary':
             notificationColor = `
-      background: ${theme.theme.colors.primary50};
-      color: ${theme.theme.colors.primary600};  
+      background: ${miscTheme.theme.colors.primary50};
+      color: ${miscTheme.theme.colors.primary600};  
     `;
             break;
         case 'error':
             notificationColor = `
-        background: ${theme.theme.colors.error};
+        background: ${miscTheme.theme.colors.error};
         color: white;
       `;
             break;
@@ -121,7 +121,7 @@ const StyledBadge = styled__default["default"].div `
   }
 
   span {
-    font-weight: ${theme.theme.sizes.fwBold};
+    font-weight: ${miscTheme.theme.sizes.fwBold};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -159,7 +159,7 @@ const StyledBorderHeading = styled__default["default"].h4 `
     left: 0;
     width: 4px;
     height: 18px;
-    background-color: ${theme.theme.colors.primaryBase};
+    background-color: ${miscTheme.theme.colors.primaryBase};
     content: '';
   }
 
@@ -179,10 +179,10 @@ const StyledBorderHeading = styled__default["default"].h4 `
   }
 
   &[data-type='bold'] {
-    font-weight: ${theme.theme.sizes.fwBold};
+    font-weight: ${miscTheme.theme.sizes.fwBold};
   }
   &[data-type='semiBold'] {
-    font-weight: ${theme.theme.sizes.fwSemiBold};
+    font-weight: ${miscTheme.theme.sizes.fwSemiBold};
   }
 
   &[data-uppercase] {
@@ -201,14 +201,14 @@ const BorderHeading = ({ style, children, className, size = 'lg', type = 'bold',
 const StyledDropdown = styled__default["default"].div `
   position: relative;
   box-sizing: border-box;
-  border: 1px solid ${theme.theme.colors.gray200};
+  border: 1px solid ${miscTheme.theme.colors.gray200};
   background: url('../../../public/bgSvg/arrow-down.svg') no-repeat;
   background-position: right 16px center;
-  border-radius: ${theme.theme.borderRadius};
+  border-radius: ${miscTheme.theme.borderRadius};
 
   &[data-has-icons='true'] {
     border: none;
-    background: ${theme.theme.colors.gray100};
+    background: ${miscTheme.theme.colors.gray100};
 
     img,
     svg {
@@ -246,7 +246,7 @@ const StyledDropdown = styled__default["default"].div `
   }
 
   &:hover {
-    box-shadow: 0 0 2px 2px ${theme.theme.colors.primary200};
+    box-shadow: 0 0 2px 2px ${miscTheme.theme.colors.primary200};
   }
 `;
 const StyledDropdownName = styled__default["default"].div `
@@ -254,9 +254,9 @@ const StyledDropdownName = styled__default["default"].div `
   cursor: pointer;
   &[data-dropdown-open] {
     padding: 11px 15px 11px 15px;
-    border: 1px solid ${theme.theme.colors.primaryBase};
-    border-radius: ${theme.theme.borderRadius};
-    box-shadow: 0 0 2px 2px ${theme.theme.colors.primary200};
+    border: 1px solid ${miscTheme.theme.colors.primaryBase};
+    border-radius: ${miscTheme.theme.borderRadius};
+    box-shadow: 0 0 2px 2px ${miscTheme.theme.colors.primary200};
   }
 
   & > svg {
@@ -271,8 +271,8 @@ const StyledDropdownList = styled__default["default"].ul `
   left: 0;
   display: block;
   margin-top: 4px;
-  background: ${theme.theme.colors.white};
-  border-radius: ${theme.theme.borderRadius};
+  background: ${miscTheme.theme.colors.white};
+  border-radius: ${miscTheme.theme.borderRadius};
   box-shadow: -1px 1px 2px rgba(67, 70, 74, 0.0001),
     -2px 2px 5px rgba(67, 86, 100, 0.123689);
   cursor: pointer;
@@ -280,18 +280,18 @@ const StyledDropdownList = styled__default["default"].ul `
   &[data-has-icons='true'] {
     background: white;
     box-shadow: none;
-    border: 1px solid ${theme.theme.colors.gray200};
+    border: 1px solid ${miscTheme.theme.colors.gray200};
     filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04));
   }
 `;
 const StyledDropdownOption = styled__default["default"].li `
   margin: 8px;
   padding: 12px 18px 12px 16px;
-  border-radius: ${theme.theme.borderRadius};
+  border-radius: ${miscTheme.theme.borderRadius};
   display: flex;
   &:hover,
   :active {
-    background: ${theme.theme.colors.gray100};
+    background: ${miscTheme.theme.colors.gray100};
   }
 `;
 const StyledIcon = styled__default["default"].div `
@@ -386,11 +386,11 @@ const StyledPagination = styled__default["default"].div `
     transition: all 0.3s ease;
   }
   [data-page-active] {
-    background: ${theme.theme.colors.primaryBase};
-    color: ${theme.theme.colors.white};
+    background: ${miscTheme.theme.colors.primaryBase};
+    color: ${miscTheme.theme.colors.white};
 
     > a {
-      color: ${theme.theme.colors.white};
+      color: ${miscTheme.theme.colors.white};
     }
   }
 `;
@@ -401,23 +401,23 @@ const StyledPageBlock = styled__default["default"].div `
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  border: 1px solid ${theme.theme.colors.gray200};
+  border: 1px solid ${miscTheme.theme.colors.gray200};
   margin: 0 2px;
   border-radius: 4px;
-  color: ${theme.theme.colors.gray800};
+  color: ${miscTheme.theme.colors.gray800};
   cursor: pointer;
   font-size: 14px;
-  font-weight: ${theme.theme.sizes.fwBold};
+  font-weight: ${miscTheme.theme.sizes.fwBold};
 
   &[data-last-page] {
     border: none;
-    background-color: ${theme.theme.colors.gray100};
+    background-color: ${miscTheme.theme.colors.gray100};
     cursor: not-allowed;
     pointer-events: none;
 
     svg {
       path {
-        stroke: ${theme.theme.colors.gray300};
+        stroke: ${miscTheme.theme.colors.gray300};
       }
     }
   }
@@ -430,13 +430,13 @@ const StyledPaginationBlock = styled__default["default"].li `
   justify-content: center;
   margin: 0 2px;
   border-radius: 4px;
-  color: ${theme.theme.colors.gray800};
+  color: ${miscTheme.theme.colors.gray800};
   cursor: pointer;
   font-size: 14px;
-  font-weight: ${theme.theme.sizes.fwBold};
+  font-weight: ${miscTheme.theme.sizes.fwBold};
 
   > a {
-    color: ${theme.theme.colors.gray800};
+    color: ${miscTheme.theme.colors.gray800};
     text-decoration: unset;
     display: block;
     width: 100%;
@@ -533,72 +533,72 @@ const Radio = ({ size = 'small', label, name, checked, value, className, isDisab
 const getTag = (tag, isLight) => {
     switch (tag) {
         case 'yellow': {
-            const color = isLight ? theme.theme.colors.yellow50 : theme.theme.colors.yellow600;
+            const color = isLight ? miscTheme.theme.colors.yellow50 : miscTheme.theme.colors.yellow600;
             return `
         background: ${color};
         p {
           color: var(
             --text-props-color,
-            ${theme.theme.colors.gray800}
+            ${miscTheme.theme.colors.gray800}
           );
         }
       `;
         }
         case 'standard': {
             return `
-      background: ${theme.theme.colors.white};
-      border: 1px solid ${theme.theme.colors.gray200};
+      background: ${miscTheme.theme.colors.white};
+      border: 1px solid ${miscTheme.theme.colors.gray200};
   
       p {
         color: var(
           --text-props-color,
-          ${theme.theme.colors.gray800}
+          ${miscTheme.theme.colors.gray800}
         );
       }
   
       &:hover {
-        background: ${theme.theme.colors.gray100};
+        background: ${miscTheme.theme.colors.gray100};
       }
       `;
         }
         case 'red': {
-            const color = isLight ? theme.theme.colors.red50 : theme.theme.colors.red500;
+            const color = isLight ? miscTheme.theme.colors.red50 : miscTheme.theme.colors.red500;
             return `
          background: ${color};
         `;
         }
         case 'green': {
-            const color = isLight ? theme.theme.colors.green50 : theme.theme.colors.green500;
+            const color = isLight ? miscTheme.theme.colors.green50 : miscTheme.theme.colors.green500;
             return `
          background: ${color};
       `;
         }
         case 'blue': {
-            const color = isLight ? theme.theme.colors.primary50 : theme.theme.colors.primaryBase;
+            const color = isLight ? miscTheme.theme.colors.primary50 : miscTheme.theme.colors.primaryBase;
             return `
          background: ${color};
       `;
         }
         case 'teal': {
-            const color = isLight ? theme.theme.colors.teal100 : theme.theme.colors.teal600;
+            const color = isLight ? miscTheme.theme.colors.teal100 : miscTheme.theme.colors.teal600;
             return `
          background: ${color};
       `;
         }
         case 'pink': {
-            const color = isLight ? theme.theme.colors.pink200 : theme.theme.colors.pink800;
+            const color = isLight ? miscTheme.theme.colors.pink200 : miscTheme.theme.colors.pink800;
             return `
          background: ${color};
       `;
         }
         case 'violet': {
-            const color = isLight ? theme.theme.colors.violet100 : theme.theme.colors.violet500;
+            const color = isLight ? miscTheme.theme.colors.violet100 : miscTheme.theme.colors.violet500;
             return `
           background: ${color};
       `;
         }
         case 'grey': {
-            const color = isLight ? theme.theme.colors.gray100 : theme.theme.colors.gray600;
+            const color = isLight ? miscTheme.theme.colors.gray100 : miscTheme.theme.colors.gray600;
             return `
           background: ${color};
       `;
@@ -626,15 +626,15 @@ const StyledTag = styled__default["default"].div `
     border-radius: 0 4px 18px 0;
     height: 24px;
     width: 90px;
-    border-left: var(--offset-size) solid ${theme.theme.colors.accentLight};
+    border-left: var(--offset-size) solid ${miscTheme.theme.colors.accentLight};
     padding: 0;
     margin-left: calc(var(--offset-size) * -1);
 
     p {
-      font-weight: ${theme.theme.sizes.fwBold};
+      font-weight: ${miscTheme.theme.sizes.fwBold};
       color: var(
         --text-props-color,
-        ${theme.theme.colors.secondaryDark}
+        ${miscTheme.theme.colors.secondaryDark}
       );
       font-size: 11px;
       margin-left: calc(var(--offset-size) * -1);
@@ -643,7 +643,7 @@ const StyledTag = styled__default["default"].div `
     &::after {
       width: calc(var(--offset-size) * 2);
       height: var(--offset-size);
-      background: ${theme.theme.colors.accentMain};
+      background: ${miscTheme.theme.colors.accentMain};
       position: absolute;
       left: calc(var(--offset-size) * -1);
       bottom: calc(var(--offset-size) * -1);
@@ -670,7 +670,7 @@ const StyledTag = styled__default["default"].div `
       color: var(--text-props-color, #000);
       `
     : `
-      color: var(--text-props-color, ${theme.theme.colors.white});
+      color: var(--text-props-color, ${miscTheme.theme.colors.white});
         `}
   }
 
@@ -689,7 +689,7 @@ const StyledTag = styled__default["default"].div `
 
   &[data-is-selected],
   &:active {
-    background: ${theme.theme.colors.primary50};
+    background: ${miscTheme.theme.colors.primary50};
   }
 `;
 
@@ -704,7 +704,7 @@ const Tag = ({ type, children, style, isInline, isSquared = false, className, is
 };
 
 const heightIcon = '24px';
-const StyledToggleIcon = defaultClassWrapper.setDefaultClass(styled__default["default"].span `
+const StyledToggleIcon = miscDefaultClassWrapper.setDefaultClass(styled__default["default"].span `
     position: relative;
     display: block;
     width: 40px;
@@ -740,11 +740,11 @@ const StyledToggle = styled__default["default"].div `
   label {
     cursor: pointer;
     display: inline-flex;
-    color: ${theme.theme.colors.gray600};
+    color: ${miscTheme.theme.colors.gray600};
   }
 
   input:checked + label ${StyledToggleIcon.classSelector} {
-    background: ${theme.theme.colors.primaryBase};
+    background: ${miscTheme.theme.colors.primaryBase};
     &:after {
       left: calc(100% - 2px);
       transform: translateX(-100%);

package/build/{index-a8680a58.js → index-37001a3b.js}

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var index = require('./index-7953fb8e.js');
-var theme = require('./theme-be20929b.js');
+var index = require('./index-672f0358.js');
+var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -15,9 +15,9 @@ const StyledTextArea = styled__default["default"].div `
     width: 100%;
     height: var(--textarea-height, 116px);
     padding: 1rem;
-    border: 1px solid ${theme.theme.colors.gray200};
+    border: 1px solid ${miscTheme.theme.colors.gray200};
     border-radius: 6px;
-    color: ${theme.theme.colors.gray800};
+    color: ${miscTheme.theme.colors.gray800};
     font-size: 14px;
     resize: none;
 
@@ -26,11 +26,11 @@ const StyledTextArea = styled__default["default"].div `
     }
 
     &::placeholder {
-      color: ${theme.theme.colors.gray500};
+      color: ${miscTheme.theme.colors.gray500};
     }
 
     &:disabled {
-      background-color: ${theme.theme.colors.neutral50};
+      background-color: ${miscTheme.theme.colors.neutral50};
       cursor: not-allowed;
     }
   }

package/build/{index-9e8877c0.js → index-3ae597e3.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var styled = require('@emotion/styled');
-var theme = require('./theme-be20929b.js');
+var miscTheme = require('./miscTheme.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -11,7 +11,7 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 const StyledDivider = styled__default["default"].hr `
   border-width: 1px;
-  border-color: ${theme.theme.colors.neutral200};
+  border-color: ${miscTheme.theme.colors.neutral200};
   border-style: ${(props) => props.dividerType};
 `;