@lets-events/react 12.11.3 → 12.11.5

package/.eslintrc.json

@@ -1,3 +1,3 @@
-{
-  "extends": "@lets-events/eslint-config"
+{
+  "extends": "@lets-events/eslint-config"
 }

package/.turbo/turbo-build.log

@@ -1,24 +1,21 @@
-
-> @lets-events/react@12.11.3 build
-> tsup src/index.tsx  --format esm,cjs --dts --external react
-
-CLI Building entry: src/index.tsx
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.5.0
-CLI Using tsup config: C:\Users\Cazuza\Desktop\Web\design-system\packages\react\tsup.config.ts
-CLI Target: es6
-ESM Build start
-CJS Build start
-ESM dist\index.mjs 423.24 KB
-ESM ⚡️ Build success in 1314ms
-CJS dist\index.js 439.36 KB
-CJS ⚡️ Build success in 1314ms
-DTS Build start
-DTS ⚡️ Build success in 7050ms
-DTS dist\index.d.mts 411.19 KB
-DTS dist\index.d.ts  411.19 KB
-npm notice
-npm notice New minor version of npm available! 11.5.1 -> 11.19.1
-npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.19.1
-npm notice To update run: npm install -g npm@11.19.1
-npm notice
+
+
+> @lets-events/react@12.11.5 build
+> tsup src/index.tsx  --format esm,cjs --dts --external react
+
+CLI Building entry: src/index.tsx
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /home/bia3003/Lets/design-system/packages/react/tsup.config.ts
+CLI Target: es6
+ESM Build start
+CJS Build start
+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 7027ms
+DTS dist/index.d.mts 411.19 KB
+DTS dist/index.d.ts  411.19 KB
+⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.11.5
+
+### Patch Changes
+
+- Drawer overflow
+
+## 12.11.4
+
+### Patch Changes
+
+- Drawer height
+
 ## 12.11.3
 
 ### 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,46 +8748,44 @@ var DrawerOverlayStyled = styled("div", {
       }
     }
   }
-});
-var DrawerWrapper = styled("div", {
+}));
+var DrawerWrapper = styled("div", __spreadProps(__spreadValues({
   position: "fixed",
   top: 0,
-  right: 0,
-  height: "100dvh",
+  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",
+  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",
@@ -8787,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",
@@ -8865,7 +8872,6 @@ function Drawer({
         children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           DrawerContainerStyled,
           {
-            open: isOpen,
             css: {
               backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
             },
@@ -8886,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,46 +8631,44 @@ var DrawerOverlayStyled = styled("div", {
       }
     }
   }
-});
-var DrawerWrapper = styled("div", {
+}));
+var DrawerWrapper = styled("div", __spreadProps(__spreadValues({
   position: "fixed",
   top: 0,
-  right: 0,
-  height: "100dvh",
+  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",
+  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",
@@ -8670,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",
@@ -8748,7 +8755,6 @@ function Drawer({
         children: /* @__PURE__ */ jsxs9(
           DrawerContainerStyled,
           {
-            open: isOpen,
             css: {
               backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
             },
@@ -8769,7 +8775,7 @@ function Drawer({
                   ] })
                 ] })
               ] }),
-              isOpen ? children : null
+              isOpen ? /* @__PURE__ */ jsx17(DrawerBodyStyled, { children }) : null
             ]
           }
         )
@@ -8779,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",
@@ -8923,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);
@@ -9666,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",
@@ -9719,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;
@@ -10079,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 {
@@ -10293,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);
@@ -12001,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
@@ -13208,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.3",
+  "version": "12.11.5",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",