@lets-events/react 12.11.4 → 12.11.5

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.11.4 build
+> @lets-events/react@12.11.5 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 439.40 KB
-CJS ⚡️ Build success in 524ms
-ESM dist/index.mjs 423.28 KB
-ESM ⚡️ Build success in 525ms
+ESM dist/index.mjs 423.54 KB
+ESM ⚡️ Build success in -258293ms
+CJS dist/index.js 439.68 KB
+CJS ⚡️ Build success in -258292ms
 DTS Build start
-DTS ⚡️ Build success in 11253ms
+DTS ⚡️ Build success in 7027ms
 DTS dist/index.d.mts 411.19 KB
 DTS dist/index.d.ts  411.19 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 12.11.5
+
+### Patch Changes
+
+- Drawer overflow
+
 ## 12.11.4
 
 ### Patch Changes

package/dist/index.js

@@ -8721,12 +8721,20 @@ function DoubleCalendar(_a) {
 var import_react10 = require("react");
 
 // src/components/Drawer/styledComponents.ts
-var DrawerOverlayStyled = styled("div", {
+var viewportHeight = {
+  height: "100vh",
+  minHeight: "100vh",
+  "@supports (height: 100dvh)": {
+    height: "100dvh",
+    minHeight: "100dvh"
+  }
+};
+var DrawerOverlayStyled = styled("div", __spreadProps(__spreadValues({
   position: "fixed",
   top: 0,
   right: 0,
-  width: "100vw",
-  height: "100dvh",
+  width: "100vw"
+}, viewportHeight), {
   background: "rgba(0, 0, 0, 0.4)",
   transition: "opacity 200ms ease",
   variants: {
@@ -8740,48 +8748,44 @@ var DrawerOverlayStyled = styled("div", {
       }
     }
   }
-});
-var DrawerWrapper = styled("div", {
+}));
+var DrawerWrapper = styled("div", __spreadProps(__spreadValues({
   position: "fixed",
   top: 0,
-  right: 0,
-  height: "100dvh",
-  minHeight: "100vh",
+  right: 0
+}, viewportHeight), {
   overflow: "hidden",
+  transition: "transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)",
   variants: {
     open: {
-      true: {},
+      true: {
+        transform: "translateX(0) scale(1)"
+      },
       false: {
-        pointerEvents: "none"
+        pointerEvents: "none",
+        transform: "translateX(110%) scale(0.98)"
       }
     }
   }
-});
+}));
 var DrawerContainerStyled = styled("div", {
-  position: "absolute",
-  top: 0,
-  right: 0,
-  height: "100dvh",
-  minHeight: "100vh",
+  width: "100%",
+  height: "100%",
   background: "$neutral50",
   display: "flex",
   flexDirection: "column",
   boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
+  overflow: "hidden",
+  boxSizing: "border-box"
+});
+var DrawerBodyStyled = styled("div", {
+  flex: 1,
+  minHeight: 0,
   overflowY: "auto",
-  width: "100%",
-  boxSizing: "border-box",
-  transition: "transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)",
-  paddingBottom: "1.5rem",
-  variants: {
-    open: {
-      true: {
-        transform: "translateX(0) scale(1)"
-      },
-      false: {
-        transform: "translateX(110%) scale(0.98)"
-      }
-    }
-  }
+  WebkitOverflowScrolling: "touch",
+  touchAction: "pan-y",
+  overscrollBehavior: "contain",
+  paddingBottom: "1.5rem"
 });
 var DrawerHeaderDiv = styled("div", {
   display: "flex",
@@ -8789,7 +8793,8 @@ var DrawerHeaderDiv = styled("div", {
   alignItems: "center",
   borderBottom: "1px solid $neutral300",
   padding: "1.5rem 1rem",
-  position: "relative"
+  position: "relative",
+  flexShrink: 0
 });
 var DrawerHeaderTitle = styled("h2", {
   fontSize: "1.125rem",
@@ -8867,7 +8872,6 @@ function Drawer({
         children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           DrawerContainerStyled,
           {
-            open: isOpen,
             css: {
               backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
             },
@@ -8888,7 +8892,7 @@ function Drawer({
                   ] })
                 ] })
               ] }),
-              isOpen ? children : null
+              isOpen ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DrawerBodyStyled, { children }) : null
             ]
           }
         )

package/dist/index.mjs

@@ -8604,12 +8604,20 @@ function DoubleCalendar(_a) {
 import { useEffect as useEffect5 } from "react";
 
 // src/components/Drawer/styledComponents.ts
-var DrawerOverlayStyled = styled("div", {
+var viewportHeight = {
+  height: "100vh",
+  minHeight: "100vh",
+  "@supports (height: 100dvh)": {
+    height: "100dvh",
+    minHeight: "100dvh"
+  }
+};
+var DrawerOverlayStyled = styled("div", __spreadProps(__spreadValues({
   position: "fixed",
   top: 0,
   right: 0,
-  width: "100vw",
-  height: "100dvh",
+  width: "100vw"
+}, viewportHeight), {
   background: "rgba(0, 0, 0, 0.4)",
   transition: "opacity 200ms ease",
   variants: {
@@ -8623,48 +8631,44 @@ var DrawerOverlayStyled = styled("div", {
       }
     }
   }
-});
-var DrawerWrapper = styled("div", {
+}));
+var DrawerWrapper = styled("div", __spreadProps(__spreadValues({
   position: "fixed",
   top: 0,
-  right: 0,
-  height: "100dvh",
-  minHeight: "100vh",
+  right: 0
+}, viewportHeight), {
   overflow: "hidden",
+  transition: "transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)",
   variants: {
     open: {
-      true: {},
+      true: {
+        transform: "translateX(0) scale(1)"
+      },
       false: {
-        pointerEvents: "none"
+        pointerEvents: "none",
+        transform: "translateX(110%) scale(0.98)"
       }
     }
   }
-});
+}));
 var DrawerContainerStyled = styled("div", {
-  position: "absolute",
-  top: 0,
-  right: 0,
-  height: "100dvh",
-  minHeight: "100vh",
+  width: "100%",
+  height: "100%",
   background: "$neutral50",
   display: "flex",
   flexDirection: "column",
   boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
+  overflow: "hidden",
+  boxSizing: "border-box"
+});
+var DrawerBodyStyled = styled("div", {
+  flex: 1,
+  minHeight: 0,
   overflowY: "auto",
-  width: "100%",
-  boxSizing: "border-box",
-  transition: "transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)",
-  paddingBottom: "1.5rem",
-  variants: {
-    open: {
-      true: {
-        transform: "translateX(0) scale(1)"
-      },
-      false: {
-        transform: "translateX(110%) scale(0.98)"
-      }
-    }
-  }
+  WebkitOverflowScrolling: "touch",
+  touchAction: "pan-y",
+  overscrollBehavior: "contain",
+  paddingBottom: "1.5rem"
 });
 var DrawerHeaderDiv = styled("div", {
   display: "flex",
@@ -8672,7 +8676,8 @@ var DrawerHeaderDiv = styled("div", {
   alignItems: "center",
   borderBottom: "1px solid $neutral300",
   padding: "1.5rem 1rem",
-  position: "relative"
+  position: "relative",
+  flexShrink: 0
 });
 var DrawerHeaderTitle = styled("h2", {
   fontSize: "1.125rem",
@@ -8750,7 +8755,6 @@ function Drawer({
         children: /* @__PURE__ */ jsxs9(
           DrawerContainerStyled,
           {
-            open: isOpen,
             css: {
               backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
             },
@@ -8771,7 +8775,7 @@ function Drawer({
                   ] })
                 ] })
               ] }),
-              isOpen ? children : null
+              isOpen ? /* @__PURE__ */ jsx17(DrawerBodyStyled, { children }) : null
             ]
           }
         )
@@ -8781,7 +8785,7 @@ function Drawer({
 }
 
 // src/components/TimePicker.tsx
-import { useCallback, useEffect as useEffect6, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback, useEffect as useEffect6, useRef as useRef5, useState as useState5 } from "react";
 import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var TimePickerStyled = styled("div", {
   position: "relative",
@@ -8925,7 +8929,7 @@ function TimePicker({
   const [rawHours, setRawHours] = useState5("00");
   const [rawMinutes, setRawMinutes] = useState5("00");
   const [isOpen, setIsOpen] = useState5(false);
-  const dropdownRef = useRef6(null);
+  const dropdownRef = useRef5(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
   useEffect6(() => {
     const { parsedHours, parsedMinutes } = parseTime(selected);
@@ -9668,7 +9672,7 @@ function Card(_a) {
 
 // src/components/TextareaField.tsx
 import { TextArea as TextAreaRadix } from "@radix-ui/themes";
-import React9, { useRef as useRef7, useState as useState6, useEffect as useEffect7 } from "react";
+import React9, { useRef as useRef6, useState as useState6, useEffect as useEffect7 } from "react";
 import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
@@ -9721,7 +9725,7 @@ var TextareaContainer = styled("div", {
 });
 var TextareaField = React9.forwardRef((_a, forwardedRef) => {
   var _b = _a, { maxLength, color, top = "-1.75rem" } = _b, props = __objRest(_b, ["maxLength", "color", "top"]);
-  const inputRef = useRef7(null);
+  const inputRef = useRef6(null);
   const [remaining, setRemaining] = useState6(maxLength);
   useEffect7(() => {
     var _a2;
@@ -10081,7 +10085,7 @@ function Tooltip({
 }
 
 // src/components/MultiSelect/index.tsx
-import React11, { useCallback as useCallback3, useRef as useRef9, useState as useState12 } from "react";
+import React11, { useCallback as useCallback3, useRef as useRef8, useState as useState12 } from "react";
 import { DropdownMenu as DropdownMenu4, Theme as Theme3 } from "@radix-ui/themes";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
@@ -10295,7 +10299,7 @@ var MultiSelect = React11.forwardRef(
     helperTextAfterField = ""
   }, fowardedRef) => {
     const [isOpen, setIsOpen] = useState12(false);
-    const triggerRef = useRef9(null);
+    const triggerRef = useRef8(null);
     const [allOptionsSelected, setAllOptionsSelected] = useState12(false);
     const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
     const hasSections = !!(optionsBySection == null ? void 0 : optionsBySection.length);
@@ -12003,7 +12007,7 @@ import { useController as useController3 } from "react-hook-form";
 import { useEffect as useEffect12, useState as useState16 } from "react";
 
 // src/components/RichEditor/QuillComponent.tsx
-import { useState as useState15, useRef as useRef10, useEffect as useEffect11, useCallback as useCallback5 } from "react";
+import { useState as useState15, useRef as useRef9, useEffect as useEffect11, useCallback as useCallback5 } from "react";
 import { useQuill } from "react-quilljs";
 
 // src/utils/uploadService.ts
@@ -13210,8 +13214,8 @@ var QuillComponent = ({
   const [videoUrl, setVideoUrl] = useState15("");
   const [showLinkModal, setShowLinkModal] = useState15(false);
   const [linkUrl, setLinkUrl] = useState15("");
-  const videoModalRef = useRef10(null);
-  const linkModalRef = useRef10(null);
+  const videoModalRef = useRef9(null);
+  const linkModalRef = useRef9(null);
   const { addToast, removeToast } = useToast();
   const formatHTML = (html) => {
     const parser = new DOMParser();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.11.4",
+  "version": "12.11.5",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Drawer/index.tsx

@@ -1,9 +1,10 @@
-import { ComponentProps, ReactNode, useEffect, useRef } from "react";
+import { ComponentProps, ReactNode, useEffect } from "react";
 import { colors, Colors } from "@lets-events/tokens";
 import Icon from "../Icon";
 import {
   DrawerOverlayStyled,
   DrawerContainerStyled,
+  DrawerBodyStyled,
   DrawerHeaderDiv,
   DrawerHeaderTitle,
   DrawerHeaderCloseButton,
@@ -82,7 +83,6 @@ export function Drawer({
         open={isOpen}
       >
         <DrawerContainerStyled
-          open={isOpen}
           css={{
             backgroundColor: colors[backgroundColor ?? "neutral50"],
           }}
@@ -105,7 +105,7 @@ export function Drawer({
               </DrawerHeaderCloseButton>
             </Flex>
           </DrawerHeaderDiv>
-          {isOpen ? children : null}
+          {isOpen ? <DrawerBodyStyled>{children}</DrawerBodyStyled> : null}
         </DrawerContainerStyled>
       </DrawerWrapper>
     </>

package/src/components/Drawer/styledComponents.ts

@@ -1,13 +1,21 @@
 import { styled } from "../../styles";
 
+const viewportHeight = {
+  height: "100vh",
+  minHeight: "100vh",
+  "@supports (height: 100dvh)": {
+    height: "100dvh",
+    minHeight: "100dvh",
+  },
+};
+
 export const DrawerOverlayStyled = styled("div", {
   position: "fixed",
   top: 0,
   right: 0,
   width: "100vw",
-  height: "100dvh",
+  ...viewportHeight,
   background: "rgba(0, 0, 0, 0.4)",
-
   transition: "opacity 200ms ease",
 
   variants: {
@@ -27,47 +35,42 @@ export const DrawerWrapper = styled("div", {
   position: "fixed",
   top: 0,
   right: 0,
-  height: "100dvh",
-  minHeight: "100vh",
+  ...viewportHeight,
   overflow: "hidden",
+  transition: "transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)",
 
   variants: {
     open: {
-      true: {},
+      true: {
+        transform: "translateX(0) scale(1)",
+      },
       false: {
         pointerEvents: "none",
+        transform: "translateX(110%) scale(0.98)",
       },
     },
   },
 });
 
 export const DrawerContainerStyled = styled("div", {
-  position: "absolute",
-  top: 0,
-  right: 0,
-  height: "100dvh",
-  minHeight: "100vh",
+  width: "100%",
+  height: "100%",
   background: "$neutral50",
   display: "flex",
   flexDirection: "column",
   boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
-  overflowY: "auto",
-  width: "100%",
-  boxSizing: 'border-box',
-  transition: "transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)",
+  overflow: "hidden",
+  boxSizing: "border-box",
+});
 
+export const DrawerBodyStyled = styled("div", {
+  flex: 1,
+  minHeight: 0,
+  overflowY: "auto",
+  WebkitOverflowScrolling: "touch",
+  touchAction: "pan-y",
+  overscrollBehavior: "contain",
   paddingBottom: "1.5rem",
-
-  variants: {
-    open: {
-      true: {
-        transform: "translateX(0) scale(1)",
-      },
-      false: {
-        transform: "translateX(110%) scale(0.98)",
-      },
-    },
-  },
 });
 
 export const DrawerHeaderDiv = styled("div", {
@@ -77,6 +80,7 @@ export const DrawerHeaderDiv = styled("div", {
   borderBottom: "1px solid $neutral300",
   padding: "1.5rem 1rem",
   position: "relative",
+  flexShrink: 0,
 });
 
 export const DrawerHeaderTitle = styled("h2", {
@@ -86,11 +90,13 @@ export const DrawerHeaderTitle = styled("h2", {
   color: "$dark800",
   margin: "0",
 });
+
 export const DrawerHeaderCloseButton = styled("button", {
   background: "none",
   border: "none",
   cursor: "pointer",
 });
+
 export const GoBackButtonStyled = styled("button", {
   background: "none",
   padding: "0",