@popsure/dirty-swan 0.30.5 → 0.30.7

package/dist/esm/components/modal/bottomModal/index.js

@@ -5,8 +5,8 @@ import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
 import { u as useOnClose } from '../../../useOnClose-d818a54f.js';
 import { c as classnames } from '../../../index-e9e37a34.js';
 
-var css_248z = "@keyframes style-module_fade-in__1GZgs {\n  0% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.3);\n  }\n}\n@keyframes style-module_fade-out__30Bns {\n  from {\n    background-color: rgba(0, 0, 0, 0.3);\n  }\n  to {\n    background-color: rgba(0, 0, 0, 0);\n  }\n}\n@keyframes style-module_appear-in__3U2lu {\n  0% {\n    transform: translateY(100%);\n  }\n  80% {\n    transform: translateY(-2%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@keyframes style-module_disappear-out__6pOVr {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(100%);\n  }\n}\n.style-module_close__1GERU {\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.style-module_overlay__AlX2J, .style-module_overlay--close__3E9GY {\n  position: fixed;\n  z-index: 100;\n  overflow: auto;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  animation: style-module_fade-in__1GZgs 0.3s both;\n}\n.style-module_overlay--close__3E9GY {\n  animation-delay: 0.1s;\n  animation: style-module_fade-out__30Bns 0.3s both;\n}\n\n.style-module_container__aOENo, .style-module_container--close__K506c {\n  position: relative;\n  background-color: white;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  width: 100%;\n  animation-name: style-module_appear-in__3U2lu;\n  animation-duration: 0.4s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n  top: 0;\n}\n.style-module_container--close__K506c {\n  animation-name: style-module_disappear-out__6pOVr;\n  animation-duration: 0.4s;\n  animation-delay: 0s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n}\n\n.style-module_header__10iiH {\n  height: 60px;\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n}";
-var styles = {"close":"style-module_close__1GERU","overlay":"style-module_overlay__AlX2J","overlay--close":"style-module_overlay--close__3E9GY","fade-in":"style-module_fade-in__1GZgs","fade-out":"style-module_fade-out__30Bns","container":"style-module_container__aOENo","container--close":"style-module_container--close__K506c","appear-in":"style-module_appear-in__3U2lu","disappear-out":"style-module_disappear-out__6pOVr","header":"style-module_header__10iiH"};
+var css_248z = "@keyframes style-module_fade-in__1GZgs {\n  0% {\n    background-color: rgba(0, 0, 0, 0);\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.3);\n  }\n}\n@keyframes style-module_fade-out__30Bns {\n  from {\n    background-color: rgba(0, 0, 0, 0.3);\n  }\n  to {\n    background-color: rgba(0, 0, 0, 0);\n  }\n}\n@keyframes style-module_appear-in__3U2lu {\n  0% {\n    transform: translateY(100%);\n  }\n  80% {\n    transform: translateY(-2%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n@keyframes style-module_disappear-out__6pOVr {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(100%);\n  }\n}\n.style-module_close__1GERU {\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.style-module_overlay__AlX2J, .style-module_overlay--close__3E9GY {\n  position: fixed;\n  z-index: 100;\n  overflow: auto;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  animation: style-module_fade-in__1GZgs 0.3s both;\n}\n.style-module_overlay--close__3E9GY {\n  animation-delay: 0.1s;\n  animation: style-module_fade-out__30Bns 0.3s both;\n}\n\n.style-module_container__aOENo, .style-module_container--close__K506c {\n  position: relative;\n  background-color: white;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  width: 100%;\n  animation-name: style-module_appear-in__3U2lu;\n  animation-duration: 0.4s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n  top: 0;\n}\n.style-module_container--close__K506c {\n  animation-name: style-module_disappear-out__6pOVr;\n  animation-duration: 0.4s;\n  animation-delay: 0s;\n  animation-fill-mode: both;\n  animation-timing-function: ease-out;\n}\n\n.style-module_header__10iiH {\n  height: 60px;\n  display: flex;\n  align-items: center;\n  padding: 0 16px;\n}\n\n@media (max-width: 34rem) {\n  .style-module_content__mq_IJ {\n    padding-bottom: 48px;\n  }\n}";
+var styles = {"close":"style-module_close__1GERU","overlay":"style-module_overlay__AlX2J","overlay--close":"style-module_overlay--close__3E9GY","fade-in":"style-module_fade-in__1GZgs","fade-out":"style-module_fade-out__30Bns","container":"style-module_container__aOENo","container--close":"style-module_container--close__K506c","appear-in":"style-module_appear-in__3U2lu","disappear-out":"style-module_disappear-out__6pOVr","header":"style-module_header__10iiH","content":"style-module_content__mq_IJ"};
 styleInject(css_248z);
 
 var imageClose = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M18%206L6%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%206L18%2018%22%20stroke%3D%22%2326262E%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";

package/dist/esm/index.js

@@ -36,7 +36,6 @@ import './index-21239ab0.js';
 import './index-6ced5532.js';
 import './useOnClose-d818a54f.js';
 import './index-171a0108.js';
-import 'react-dom';
 import './components/comparisonTable/components/Chevron.js';
 import './components/comparisonTable/components/Row/index.js';
 import './components/comparisonTable/components/TableArrows/index.js';

package/dist/esm/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.30.5",
+  "version": "0.30.7",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,
@@ -35,7 +35,7 @@
     "react-day-picker": "^7.4.10",
     "react-dropzone": "^14.2.2",
     "react-markdown": "^8.0.3",
-    "react-scroll-sync": "^0.9.0",
+    "react-scroll-sync": "^0.11.0",
     "remark-directive": "^2.0.1",
     "sass": "^1.35.1",
     "signature_pad": "^3.0.0-beta.3"

package/src/lib/components/comparisonTable/hooks/useComparisonTable.ts

@@ -56,9 +56,10 @@ export const useComparisonTable = () => {
       return;
     }
 
+    const headerWidth = headerRef.current.getBoundingClientRect().width;
+
     const currentTabIndex = Math.round(
-      headerRef.current.scrollLeft /
-        headerRef.current.getBoundingClientRect().width
+      headerRef.current.scrollLeft / headerWidth
     );
 
     setSelectedTabIndex(currentTabIndex);

package/src/lib/components/comparisonTable/index.tsx

@@ -100,7 +100,7 @@ const ComparisonTable = <T extends { id: number }>(
   } as React.CSSProperties;
 
   return (
-    <ScrollSync>
+    <ScrollSync onSync={scrollContainerCallbackRef}>
       <div style={cssVariablesStyle}>
         <div className={classNames(baseStyles.header, styles?.header)}>
           <ScrollSyncPane>
@@ -108,7 +108,6 @@ const ComparisonTable = <T extends { id: number }>(
               className={classNames(baseStyles.container, {
                 [baseStyles.noScrollBars]: hideScrollBars,
               })}
-              ref={scrollContainerCallbackRef}
             >
               <div className={classNames(baseStyles['overflow-container'])}>
                 <div className={baseStyles['group-container']}>

package/src/lib/components/modal/bottomModal/style.module.scss

@@ -1,3 +1,5 @@
+@use "../../../scss/public/grid" as *;
+
 @keyframes fade-in {
   0% {
     background-color: rgba($color: #000000, $alpha: 0);
@@ -101,3 +103,9 @@
 
   padding: 0 16px;
 }
+
+.content {
+  @include p-size-mobile {
+    padding-bottom: 48px;
+  }
+}