@trackunit/react-drawer 0.3.24 → 0.3.26

package/index.cjs.js

@@ -2,9 +2,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
-var react = require('react');
-var usePortal = require('react-useportal');
 var reactComponents = require('@trackunit/react-components');
+var react = require('react');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactSwipeable = require('react-swipeable');
 
@@ -97,13 +96,13 @@ const cvaOverlayContainer = cssClassVarianceUtilities.cvaMerge([
 ], {
     variants: {
         open: {
-            true: "z-popover opacity-100",
+            true: "z-overlay opacity-100",
             false: "z-hidden pointer-events-none opacity-0",
         },
     },
 });
 
-const cvaDrawer = cssClassVarianceUtilities.cvaMerge(["z-toast", "pointer-events-auto", "absolute", "flex-col", "transition-all", "duration-500", "ease-in-out"], {
+const cvaDrawer = cssClassVarianceUtilities.cvaMerge(["z-overlay", "pointer-events-auto", "absolute", "flex-col", "transition-all", "duration-500", "ease-in-out"], {
     variants: {
         position: {
             left: ["left-0", "top-0", "h-full", "w-fit"],
@@ -187,8 +186,7 @@ const NOOP$1 = () => void 0;
  */
 const Drawer = react.forwardRef(({ open = false, // Default to closed
 onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ...others }, ref) => {
-    const { isSm } = reactComponents.useViewportSize();
-    const { Portal } = usePortal();
+    const { isSm } = reactComponents.useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
     const [shouldRender, setShouldRender] = react.useState(open);
     const [mode, setMode] = react.useState(open ? "open" : "closed");
@@ -214,7 +212,7 @@ onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, data
                     position: position,
                     className,
                 }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: ref, ...others, children: jsxRuntime.jsx("div", { className: cvaDrawerContent({ position }), children: children }) })] }));
-    return shouldUsePortal ? jsxRuntime.jsx(Portal, { children: content }) : content;
+    return shouldUsePortal ? jsxRuntime.jsx(reactComponents.Portal, { children: content }) : content;
 });
 Drawer.displayName = "Drawer";
 

package/index.esm.js

@@ -1,8 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
+import { useViewportBreakpoints, Portal, Icon, useGeometry } from '@trackunit/react-components';
 import { useEffect, forwardRef, useState, useCallback, useRef, useImperativeHandle, useMemo } from 'react';
-import usePortal from 'react-useportal';
-import { useViewportSize, Icon, useGeometry } from '@trackunit/react-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useSwipeable } from 'react-swipeable';
 
@@ -95,13 +94,13 @@ const cvaOverlayContainer = cvaMerge([
 ], {
     variants: {
         open: {
-            true: "z-popover opacity-100",
+            true: "z-overlay opacity-100",
             false: "z-hidden pointer-events-none opacity-0",
         },
     },
 });
 
-const cvaDrawer = cvaMerge(["z-toast", "pointer-events-auto", "absolute", "flex-col", "transition-all", "duration-500", "ease-in-out"], {
+const cvaDrawer = cvaMerge(["z-overlay", "pointer-events-auto", "absolute", "flex-col", "transition-all", "duration-500", "ease-in-out"], {
     variants: {
         position: {
             left: ["left-0", "top-0", "h-full", "w-fit"],
@@ -185,8 +184,7 @@ const NOOP$1 = () => void 0;
  */
 const Drawer = forwardRef(({ open = false, // Default to closed
 onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ...others }, ref) => {
-    const { isSm } = useViewportSize();
-    const { Portal } = usePortal();
+    const { isSm } = useViewportBreakpoints();
     const shouldUsePortal = !isSm || renderInPortal;
     const [shouldRender, setShouldRender] = useState(open);
     const [mode, setMode] = useState(open ? "open" : "closed");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-drawer",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -12,8 +12,7 @@
     "@trackunit/i18n-library-translation": "*",
     "@trackunit/ui-icons": "*",
     "react": "18.3.1",
-    "react-swipeable": "^7.0.1",
-    "react-useportal": "1.0.18"
+    "react-swipeable": "^7.0.1"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",