@trackunit/react-components 0.1.393 → 0.1.394

package/index.cjs.js

@@ -1796,7 +1796,6 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
 };
 
 const cvaDialog = cssClassVarianceUtilities.cvaMerge([
-    "fixed",
     "z-toast",
     "pointer-events-auto",
     "absolute",
@@ -1883,10 +1882,10 @@ const cvaDialog = cssClassVarianceUtilities.cvaMerge([
         },
     ],
 });
-const cvaDialogContainer = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-full", "flex-col", "p-4"]);
+const cvaDialogContainer = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-full", "flex-col"]);
 const cvaSwipeContainer = cssClassVarianceUtilities.cvaMerge(["mb-4", "flex", "items-center", "justify-center", "lg:hidden"]);
 const cvaSwipeIcon = cssClassVarianceUtilities.cvaMerge(["block", "h-1", "w-10", "rounded-full", "bg-gray-400"]);
-const cvaToogleContainer = cssClassVarianceUtilities.cvaMerge(["z-8", "absolute"], {
+const cvaToogleContainer = cssClassVarianceUtilities.cvaMerge(["z-8", "relative"], {
     variants: {
         position: {
             left: "right-[-24px] top-[calc(50%-24px)]",
@@ -2013,7 +2012,7 @@ const ToogleButton = ({ open, position, onToggle }) => {
  * @param {DrawerProps} props - The props for the MapSidebar component
  * @returns {JSX.Element | null} Drawer component
  */
-const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "left", children, dataTestId, }) => {
+const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "left", children, dataTestId, className, dialogClassName, }) => {
     const { width } = useResize();
     const isLargeScreen = width >= 1024;
     const initialSidebarMode = () => {
@@ -2083,11 +2082,12 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
     if (!isVisible && !onToggle) {
         return null;
     }
-    return (jsxRuntime.jsxs("div", { "data-testid": dataTestId, children: [!disableOverlay ? jsxRuntime.jsx(Overlay, { onClose: onClose, open: isAnimationStart }) : null, jsxRuntime.jsx("div", { ...handlers, className: cvaDialog({
+    return (jsxRuntime.jsxs("div", { className: className, "data-testid": dataTestId, children: [!disableOverlay ? jsxRuntime.jsx(Overlay, { onClose: onClose, open: isAnimationStart }) : null, jsxRuntime.jsx("div", { ...handlers, className: cvaDialog({
                     sidebarMode: isLargeScreen ? null : sidebarMode,
                     isLargeScreen,
                     open: isAnimationStart,
                     position,
+                    className: dialogClassName,
                 }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, onTransitionEnd: handleAnimationEnd, children: jsxRuntime.jsxs("div", { className: cvaDialogContainer(), children: [jsxRuntime.jsx("div", { className: cvaSwipeContainer(), children: jsxRuntime.jsx("div", { className: cvaSwipeIcon() }) }), isLargeScreen && onToggle ? jsxRuntime.jsx(ToogleButton, { onToggle: onToggle, open: open, position: position }) : null, children] }) })] }));
 };
 

package/index.esm.js

@@ -1776,7 +1776,6 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
 };
 
 const cvaDialog = cvaMerge([
-    "fixed",
     "z-toast",
     "pointer-events-auto",
     "absolute",
@@ -1863,10 +1862,10 @@ const cvaDialog = cvaMerge([
         },
     ],
 });
-const cvaDialogContainer = cvaMerge(["relative", "flex", "h-full", "flex-col", "p-4"]);
+const cvaDialogContainer = cvaMerge(["relative", "flex", "h-full", "flex-col"]);
 const cvaSwipeContainer = cvaMerge(["mb-4", "flex", "items-center", "justify-center", "lg:hidden"]);
 const cvaSwipeIcon = cvaMerge(["block", "h-1", "w-10", "rounded-full", "bg-gray-400"]);
-const cvaToogleContainer = cvaMerge(["z-8", "absolute"], {
+const cvaToogleContainer = cvaMerge(["z-8", "relative"], {
     variants: {
         position: {
             left: "right-[-24px] top-[calc(50%-24px)]",
@@ -1993,7 +1992,7 @@ const ToogleButton = ({ open, position, onToggle }) => {
  * @param {DrawerProps} props - The props for the MapSidebar component
  * @returns {JSX.Element | null} Drawer component
  */
-const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "left", children, dataTestId, }) => {
+const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "left", children, dataTestId, className, dialogClassName, }) => {
     const { width } = useResize();
     const isLargeScreen = width >= 1024;
     const initialSidebarMode = () => {
@@ -2063,11 +2062,12 @@ const Drawer = ({ open = true, onToggle, onClose, disableOverlay, position = "le
     if (!isVisible && !onToggle) {
         return null;
     }
-    return (jsxs("div", { "data-testid": dataTestId, children: [!disableOverlay ? jsx(Overlay, { onClose: onClose, open: isAnimationStart }) : null, jsx("div", { ...handlers, className: cvaDialog({
+    return (jsxs("div", { className: className, "data-testid": dataTestId, children: [!disableOverlay ? jsx(Overlay, { onClose: onClose, open: isAnimationStart }) : null, jsx("div", { ...handlers, className: cvaDialog({
                     sidebarMode: isLargeScreen ? null : sidebarMode,
                     isLargeScreen,
                     open: isAnimationStart,
                     position,
+                    className: dialogClassName,
                 }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, onTransitionEnd: handleAnimationEnd, children: jsxs("div", { className: cvaDialogContainer(), children: [jsx("div", { className: cvaSwipeContainer(), children: jsx("div", { className: cvaSwipeIcon() }) }), isLargeScreen && onToggle ? jsx(ToogleButton, { onToggle: onToggle, open: open, position: position }) : null, children] }) })] }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.393",
+  "version": "0.1.394",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Drawer/Drawer.d.ts

@@ -25,6 +25,7 @@ export interface DrawerProps extends CommonProps {
      * The child node that will be rendered inside the drawer.
      */
     children?: React.ReactNode;
+    dialogClassName?: string;
 }
 /**
  * MapSidebar is a sidebar component used with Maps.
@@ -33,4 +34,4 @@ export interface DrawerProps extends CommonProps {
  * @param {DrawerProps} props - The props for the MapSidebar component
  * @returns {JSX.Element | null} Drawer component
  */
-export declare const Drawer: ({ open, onToggle, onClose, disableOverlay, position, children, dataTestId, }: DrawerProps) => JSX.Element | null;
+export declare const Drawer: ({ open, onToggle, onClose, disableOverlay, position, children, dataTestId, className, dialogClassName, }: DrawerProps) => JSX.Element | null;