@tiny-codes/react-easy 1.1.1 → 1.1.3

package/lib/components/EditableText/style/index.js

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/EditableText/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default
+});
+module.exports = __toCommonJS(style_exports);
+var import_internal = require("antd/es/theme/internal");
+var genStyle = (token) => {
+  const { componentCls, antCls, iconCls } = token;
+  return {
+    [componentCls]: {
+      width: "100%",
+      lineHeight: 1,
+      [`${componentCls}-view-mode`]: {
+        display: "inline-flex",
+        width: "auto",
+        maxWidth: "100%",
+        columnGap: 8,
+        "&-block": {
+          display: "flex"
+        },
+        [`${componentCls}-text-content`]: {
+          flex: "auto",
+          minWidth: 0
+        },
+        [`${componentCls}-edit-icon`]: {
+          display: "inline-flex",
+          alignItems: "center",
+          flex: "none",
+          color: token.colorTextSecondary,
+          fontSize: token.fontSize,
+          // lineHeight: token.lineHeight,
+          // height: token.fontSize * token.lineHeight, // The height of the button should match the line height of the text, so that when the button is at the bottom, it aligns with the text baseline
+          cursor: "pointer",
+          "&:hover": {
+            color: token.colorPrimary
+          }
+        }
+        // '&.${componentCls}-has-children': {
+        //   '.edit-icon': {
+        //     lineHeight: 0,
+        //     height: 'auto', // When custom children are used, the height of the edit button should adapt automatically, rather than being set according to the Typography line height
+        //   },
+        // },
+      },
+      [`${componentCls}-edit-mode`]: {
+        width: "100%",
+        [`${componentCls}-form`]: {
+          display: "flex",
+          [`${antCls}-form`]: {
+            display: "flex",
+            flexWrap: "nowrap",
+            width: "100%",
+            [`${antCls}-form-item`]: {
+              [`&${antCls}-form-item-block`]: {
+                flex: 1
+              },
+              [`input${antCls}-input`]: {
+                minWidth: 100,
+                transition: "all 0.2s, width 0s"
+              },
+              [`textarea${antCls}-input`]: {
+                minWidth: 100,
+                transition: "all 0.2s, width 0s"
+              }
+            },
+            [`${componentCls}-form-btns`]: {
+              flex: "none",
+              lineHeight: 0,
+              [`${componentCls}-form-btn`]: {
+                width: 20,
+                height: 20,
+                padding: 0,
+                fontSize: 20,
+                lineHeight: 1,
+                [iconCls]: {
+                  fontSize: 20
+                },
+                [`&${componentCls}-form-btn-save:not(:disabled)`]: {
+                  color: token.colorSuccess,
+                  "&:hover": {
+                    color: token.colorSuccessActive
+                  }
+                },
+                [`&${componentCls}-form-btn-close:not(:disabled)`]: {
+                  color: token.colorError,
+                  "&:hover": {
+                    color: token.colorErrorActive
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (0, import_internal.genStyleHooks)("EasyEditableText", genStyle);
+//# sourceMappingURL=index.js.map

package/lib/components/EditableText/style/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/EditableText/style/index.ts"],
+  "sourcesContent": ["import { genStyleHooks } from 'antd/es/theme/internal';\nimport type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\n\ntype EditableTextToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<EditableTextToken> = (token): CSSObject => {\n  const { componentCls, antCls, iconCls } = token;\n  return {\n    [componentCls]: {\n      width: '100%',\n      lineHeight: 1,\n\n      [`${componentCls}-view-mode`]: {\n        display: 'inline-flex',\n        width: 'auto',\n        maxWidth: '100%',\n        columnGap: 8,\n        '&-block': {\n          display: 'flex',\n        },\n\n        [`${componentCls}-text-content`]: {\n          flex: 'auto',\n          minWidth: 0,\n        },\n\n        [`${componentCls}-edit-icon`]: {\n          display: 'inline-flex',\n          alignItems: 'center',\n          flex: 'none',\n          color: token.colorTextSecondary,\n          fontSize: token.fontSize,\n          // lineHeight: token.lineHeight,\n          // height: token.fontSize * token.lineHeight, // The height of the button should match the line height of the text, so that when the button is at the bottom, it aligns with the text baseline\n          cursor: 'pointer',\n          '&:hover': {\n            color: token.colorPrimary,\n          },\n        },\n        // '&.${componentCls}-has-children': {\n        //   '.edit-icon': {\n        //     lineHeight: 0,\n        //     height: 'auto', // When custom children are used, the height of the edit button should adapt automatically, rather than being set according to the Typography line height\n        //   },\n        // },\n      },\n\n      [`${componentCls}-edit-mode`]: {\n        width: '100%',\n\n        [`${componentCls}-form`]: {\n          display: 'flex',\n          [`${antCls}-form`]: {\n            display: 'flex',\n            flexWrap: 'nowrap',\n            width: '100%',\n\n            [`${antCls}-form-item`]: {\n              [`&${antCls}-form-item-block`]: {\n                flex: 1,\n              },\n              [`input${antCls}-input`]: {\n                minWidth: 100,\n                transition: 'all 0.2s, width 0s',\n              },\n              [`textarea${antCls}-input`]: {\n                minWidth: 100,\n                transition: 'all 0.2s, width 0s',\n              },\n            },\n            [`${componentCls}-form-btns`]: {\n              flex: 'none',\n              lineHeight: 0,\n\n              [`${componentCls}-form-btn`]: {\n                width: 20,\n                height: 20,\n                padding: 0,\n                fontSize: 20,\n                lineHeight: 1,\n\n                [iconCls]: {\n                  fontSize: 20,\n                },\n\n                [`&${componentCls}-form-btn-save:not(:disabled)`]: {\n                  color: token.colorSuccess,\n\n                  '&:hover': {\n                    color: token.colorSuccessActive,\n                  },\n                },\n\n                [`&${componentCls}-form-btn-close:not(:disabled)`]: {\n                  color: token.colorError,\n\n                  '&:hover': {\n                    color: token.colorErrorActive,\n                  },\n                },\n              },\n            },\n          },\n        },\n      },\n    },\n  };\n};\n\nexport default genStyleHooks('EasyEditableText' as never, genStyle);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA8B;AAO9B,IAAM,WAA6C,CAAC,UAAqB;AACvE,QAAM,EAAE,cAAc,QAAQ,QAAQ,IAAI;AAC1C,SAAO;AAAA,IACL,CAAC,YAAY,GAAG;AAAA,MACd,OAAO;AAAA,MACP,YAAY;AAAA,MAEZ,CAAC,GAAG,wBAAwB,GAAG;AAAA,QAC7B,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX,WAAW;AAAA,UACT,SAAS;AAAA,QACX;AAAA,QAEA,CAAC,GAAG,2BAA2B,GAAG;AAAA,UAChC,MAAM;AAAA,UACN,UAAU;AAAA,QACZ;AAAA,QAEA,CAAC,GAAG,wBAAwB,GAAG;AAAA,UAC7B,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,MAAM;AAAA,UACN,OAAO,MAAM;AAAA,UACb,UAAU,MAAM;AAAA;AAAA;AAAA,UAGhB,QAAQ;AAAA,UACR,WAAW;AAAA,YACT,OAAO,MAAM;AAAA,UACf;AAAA,QACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOF;AAAA,MAEA,CAAC,GAAG,wBAAwB,GAAG;AAAA,QAC7B,OAAO;AAAA,QAEP,CAAC,GAAG,mBAAmB,GAAG;AAAA,UACxB,SAAS;AAAA,UACT,CAAC,GAAG,aAAa,GAAG;AAAA,YAClB,SAAS;AAAA,YACT,UAAU;AAAA,YACV,OAAO;AAAA,YAEP,CAAC,GAAG,kBAAkB,GAAG;AAAA,cACvB,CAAC,IAAI,wBAAwB,GAAG;AAAA,gBAC9B,MAAM;AAAA,cACR;AAAA,cACA,CAAC,QAAQ,cAAc,GAAG;AAAA,gBACxB,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cACA,CAAC,WAAW,cAAc,GAAG;AAAA,gBAC3B,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,YACF;AAAA,YACA,CAAC,GAAG,wBAAwB,GAAG;AAAA,cAC7B,MAAM;AAAA,cACN,YAAY;AAAA,cAEZ,CAAC,GAAG,uBAAuB,GAAG;AAAA,gBAC5B,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,YAAY;AAAA,gBAEZ,CAAC,OAAO,GAAG;AAAA,kBACT,UAAU;AAAA,gBACZ;AAAA,gBAEA,CAAC,IAAI,2CAA2C,GAAG;AAAA,kBACjD,OAAO,MAAM;AAAA,kBAEb,WAAW;AAAA,oBACT,OAAO,MAAM;AAAA,kBACf;AAAA,gBACF;AAAA,gBAEA,CAAC,IAAI,4CAA4C,GAAG;AAAA,kBAClD,OAAO,MAAM;AAAA,kBAEb,WAAW;AAAA,oBACT,OAAO,MAAM;AAAA,kBACf;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,oBAAQ,+BAAc,oBAA6B,QAAQ;",
+  "names": []
+}

package/lib/components/FloatDrawer/index.d.ts

@@ -1,179 +1,182 @@
 import type { CSSProperties, FC, ReactNode } from 'react';
 import type { CardProps } from 'antd';
 export interface FloatDrawerProps {
+    prefixCls?: string;
     /**
-     * **EN:** Whether the drawer is open
-     *
-     * **CN:** 抽屉是否打开
+     * - **EN:** Whether the drawer is open
+     * - **CN:** 抽屉是否打开
      */
     open?: boolean;
     /**
-     * **EN:** Position of the drawer
-     *
-     * **CN:** 抽屉的位置
+     * - **EN:** Position of the drawer
+     * - **CN:** 抽屉的位置
      *
      * @default 'right'
      */
     position?: 'left' | 'right' | 'top' | 'bottom';
     /**
-     * **EN:** Default size of the drawer. If the drawer is placed on the left or right, this is the
-     * width, otherwise it is the height.
-     *
-     * **CN:** 抽屉的默认宽度。如果抽屉放在左侧或右侧，则为宽度，否则为高度。
-     *
-     * @default 300
+     * - **EN:** Default size of the drawer. If the drawer is placed on the left or right, this is the
+     *   width, otherwise it is the height. If not set, the drawer will adapt to the content size.
+     * - **CN:** 抽屉的默认宽度。如果抽屉放在左侧或右侧，则为宽度，否则为高度。不设置时，抽屉会根据内容自适应大小。
      */
     defaultSize?: number;
     /**
-     * **EN:** Minimum size of the drawer
-     *
-     * **CN:** 抽屉的最小宽度
+     * - **EN:** Minimum size of the drawer
+     * - **CN:** 抽屉的最小宽度
      *
      * @default 0
      */
     minSize?: number;
     /**
-     * **EN:** Maximum size of the drawer
-     *
-     * **CN:** 抽屉的最大宽度
+     * - **EN:** Maximum size of the drawer
+     * - **CN:** 抽屉的最大宽度
      *
      * @default Infinity
      */
     maxSize?: number;
     /**
-     * **EN:** Cache key for storing the drawer size in localStorage. If not set, the size will not be
-     * cached.
+     * - **EN:** Offset of the drawer from the edge of the screen, supports all CSS length units,
+     *   default is `0`.
+     *
+     * > The drawer will be hidden outside the parent container's edge, but since the parent container
+     * > may have padding or border, the drawer may not be completely hidden. You can adjust the
+     * > `edgeOffset` to ensure the drawer is completely hidden outside the parent container.
      *
-     * **CN:** 指定一个localStorage缓存键，用于记忆抽屉宽度。如果不设置，则不使用缓存。
+     * - **CN:** 抽屉距离屏幕边缘的偏移量，支持所有的CSS长度单位, 默认`0`。
+     *
+     * > 抽屉会隐藏在父容器的外边缘, 但由于父容器可能有padding或border, 导致抽屉不能完全隐藏, 因此可以通过设置 `edgeOffset` 来调整抽屉的偏移量,
+     * > 以确保抽屉完全隐藏在父容器之外。
+     *
+     * @default 0
+     */
+    edgeOffset?: CSSProperties['width'];
+    /**
+     * - **EN:** Whether to show the toggle button, default is `true`.
+     * - **CN:** 是否显示展开/收起按钮，默认`true`。
+     */
+    showToggle?: boolean;
+    /**
+     * - **EN:** Whether the drawer is resizable, default is `true`.
+     * - **CN:** 抽屉是否可调整大小, 默认`true`。
+     */
+    resizable?: boolean;
+    /**
+     * - **EN:** Cache key for storing the drawer size in localStorage. If not set, the size will not be
+     *   cached.
+     * - **CN:** 指定一个localStorage缓存键，用于记忆抽屉宽度。如果不设置，则不使用缓存。
      */
     cacheKey?: string;
     /**
-     * **EN:** Custom class name for the root element
-     *
-     * **CN:** 根元素的自定义类名
+     * - **EN:** Custom class name for the root element
+     * - **CN:** 根元素的自定义类名
      */
     className?: string;
     /**
-     * **EN:** Custom class names for specific elements
-     *
-     * **CN:** 特定元素的自定义类名
+     * - **EN:** Custom class names for specific elements
+     * - **CN:** 特定元素的自定义类名
      */
     classNames?: {
         /**
-         * **EN:** Class name for the drawer element
-         *
-         * **CN:** 抽屉元素的类名
+         * - **EN:** Class name for the drawer element
+         * - **CN:** 抽屉元素的类名
          */
         drawer?: string;
         /**
-         * **EN:** Class name for the expand handle
-         *
-         * **CN:** 展开手柄的类名
+         * - **EN:** Class name for the expand handle
+         * - **CN:** 展开手柄的类名
          */
-        expandHandle?: string;
+        toggle?: string;
         /**
-         * **EN:** Class name for the resize handle
-         *
-         * **CN:** 调整大小手柄的类名
+         * - **EN:** Class name for the resize handle
+         * - **CN:** 调整大小手柄的类名
          */
         resizeHandle?: string;
         /**
-         * **EN:** Class name for the handle icon
-         *
-         * **CN:** 手柄图标的类名
+         * - **EN:** Class name for the handle icon
+         * - **CN:** 手柄图标的类名
          */
         handleIcon?: string;
         /**
-         * **EN:** Class name for the content area
-         *
-         * **CN:** 内容区域的类名
+         * - **EN:** Class name for the content area
+         * - **CN:** 内容区域的类名
          */
         content?: string;
         /**
-         * **EN:** Class name for the card element
-         *
-         * **CN:** 卡片元素的类名
+         * - **EN:** Class name for the card element
+         * - **CN:** 卡片元素的类名
          */
         card?: string;
     };
     /**
-     * **EN:** Custom styles for the root element
-     *
-     * **CN:** 根元素的自定义样式
+     * - **EN:** Custom styles for the root element
+     * - **CN:** 根元素的自定义样式
      */
     style?: CSSProperties;
     /**
-     * **EN:** Custom styles for specific elements
-     *
-     * **CN:** 特定元素的自定义样式
+     * - **EN:** Custom styles for specific elements
+     * - **CN:** 特定元素的自定义样式
      */
     styles?: {
         /**
-         * **EN:** Styles for the drawer element
-         *
-         * **CN:** 抽屉元素的样式
+         * - **EN:** Styles for the drawer element
+         * - **CN:** 抽屉元素的样式
          */
         drawer?: CSSProperties;
         /**
-         * **EN:** Styles for the expand handle
-         *
-         * **CN:** 展开手柄的样式
+         * - **EN:** Styles for the expand handle
+         * - **CN:** 展开手柄的样式
          */
-        expandHandle?: CSSProperties;
+        toggle?: CSSProperties;
         /**
-         * **EN:** Styles for the resize handle
-         *
-         * **CN:** 调整大小手柄的样式
+         * - **EN:** Styles for the resize handle
+         * - **CN:** 调整大小手柄的样式
          */
         resizeHandle?: CSSProperties;
         /**
-         * **EN:** Styles for the handle icon
-         *
-         * **CN:** 手柄图标的样式
+         * - **EN:** Styles for the handle icon
+         * - **CN:** 手柄图标的样式
          */
         handleIcon?: CSSProperties;
         /**
-         * **EN:** Styles for the content area
-         *
-         * **CN:** 内容区域的样式
+         * - **EN:** Styles for the content area
+         * - **CN:** 内容区域的样式
          */
         content?: CSSProperties;
         /**
-         * **EN:** Styles for the card element
-         *
-         * **CN:** 卡片元素的样式
+         * - **EN:** Styles for the card element
+         * - **CN:** 卡片元素的样式
          */
         card?: CSSProperties;
     };
     /**
-     * **EN:** Custom properties for the card element
-     *
-     * **CN:** 卡片元素的自定义属性
+     * - **EN:** Custom properties for the card element
+     * - **CN:** 卡片元素的自定义属性
      */
     cardProps?: Omit<CardProps, 'children'>;
     /**
-     * **EN:** Content to be rendered inside the drawer
-     *
-     * **CN:** 抽屉内容
+     * - **EN:** Content to be rendered inside the drawer
+     * - **CN:** 抽屉内容
      */
     children?: ReactNode;
     /**
-     * **EN:** Callback function when the open state changes
-     *
-     * **CN:** 打开状态变化时的回调函数
+     * - **EN:** Callback function when the open state changes
+     * - **CN:** 打开状态变化时的回调函数
      */
     onOpenChange?: (open: boolean) => void;
     /**
-     * **EN:** Callback function when the drawer is resized
-     *
-     * **CN:** 抽屉调整大小时的回调函数
+     * - **EN:** Callback function when the drawer is resized
+     * - **CN:** 抽屉调整大小时的回调函数
      */
     onResize?: (size: number) => void;
+    /**
+     * - **EN:** Event handler for click events on the drawer container and its internal elements
+     * - **CN:** 点击抽屉容器及内部元素时的事件
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 /**
- * **EN:** FloatDrawer component for creating a draggable, resizable drawer
- *
- * **CN:** FloatDrawer组件，用于创建可拖动、可调整大小的抽屉
+ * - **EN:** FloatDrawer component for creating a draggable, resizable drawer
+ * - **CN:** FloatDrawer组件，用于创建可拖动、可调整大小的抽屉
  */
 declare const FloatDrawer: FC<FloatDrawerProps>;
 export default FloatDrawer;

package/lib/components/FloatDrawer/index.js

@@ -40,6 +40,7 @@ var import_useRefFunction = __toESM(require("../../hooks/useRefFunction"));
 var import_style = __toESM(require("./style"));
 var FloatDrawer = (props) => {
   const {
+    prefixCls: prefixClsInProps,
     open,
     position = "right",
     cardProps,
@@ -49,16 +50,20 @@ var FloatDrawer = (props) => {
     style,
     styles,
     cacheKey,
-    defaultSize = 300,
+    defaultSize,
     minSize = 0,
     maxSize = Infinity,
+    edgeOffset,
+    showToggle = true,
+    resizable = true,
     onOpenChange,
-    onResize
+    onResize,
+    onClick
   } = props;
   const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
-  const prefixCls = getPrefixCls("re-float-drawer");
+  const prefixCls = getPrefixCls("easy-float-drawer", prefixClsInProps);
   const [wrapCSSVar, hashId, cssVarCls] = (0, import_style.default)(prefixCls);
-  const [isOpen, setIsOpen] = (0, import_react.useState)();
+  const [drawerRef, setDrawerRef] = (0, import_react.useState)(null);
   const [size, setSize] = (0, import_react.useState)(
     cacheKey && localStorage.getItem(cacheKey) ? Number(localStorage.getItem(cacheKey)) || defaultSize : defaultSize
   );
@@ -68,6 +73,7 @@ var FloatDrawer = (props) => {
       [type]: size
     };
   }, [position, size]);
+  const [isOpen, setIsOpen] = (0, import_react.useState)();
   const [isDragging, setIsDragging] = (0, import_react.useState)(false);
   const dragStartPos = (0, import_react.useRef)(0);
   const dragStartSize = (0, import_react.useRef)(size);
@@ -103,7 +109,7 @@ var FloatDrawer = (props) => {
     e.preventDefault();
   });
   const handleResize = (0, import_useRefFunction.default)((e) => {
-    if (isDragging) {
+    if (isDragging && dragStartSize.current) {
       let newSize;
       if (position === "left") {
         newSize = dragStartSize.current - (dragStartPos.current - e.clientX);
@@ -126,6 +132,12 @@ var FloatDrawer = (props) => {
   const handleResizeEnd = (0, import_useRefFunction.default)(() => {
     setIsDragging(false);
   });
+  (0, import_react.useEffect)(() => {
+    if (drawerRef && size === void 0) {
+      const rect = drawerRef.getBoundingClientRect();
+      setSize(position === "left" || position === "right" ? rect.width : rect.height);
+    }
+  }, [drawerRef, position, size]);
   (0, import_react.useEffect)(() => {
     setIsOpen(open);
   }, [open]);
@@ -143,52 +155,65 @@ var FloatDrawer = (props) => {
     };
   }, [isDragging]);
   return wrapCSSVar(
-    /* @__PURE__ */ React.createElement("div", { className: classString, style }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: (0, import_classnames.default)(`${prefixCls}-drawer`, classNamesInProps == null ? void 0 : classNamesInProps.drawer),
-        style: { ...sizeMap, ...styles == null ? void 0 : styles.drawer }
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: (0, import_classnames.default)(
-            `${prefixCls}-resize-handle`,
-            isDragging && `${prefixCls}-resize-handle-dragging`,
-            classNamesInProps == null ? void 0 : classNamesInProps.resizeHandle
-          ),
-          style: styles == null ? void 0 : styles.resizeHandle,
-          onMouseDown: handleResizeStart
-        }
-      ),
-      /* @__PURE__ */ React.createElement("div", { className: (0, import_classnames.default)(`${prefixCls}-content`, classNamesInProps == null ? void 0 : classNamesInProps.content), style: styles == null ? void 0 : styles.content }, /* @__PURE__ */ React.createElement(
-        import_antd.Card,
-        {
-          bordered: false,
-          variant: "borderless",
-          className: (0, import_classnames.default)(`${prefixCls}-card`, classNamesInProps == null ? void 0 : classNamesInProps.card),
-          style: styles == null ? void 0 : styles.card,
-          ...cardProps
+        className: classString,
+        style: {
+          // @ts-expect-error: because of dynamic CSS variables
+          "--edge-offset": typeof edgeOffset === "number" ? `${edgeOffset}px` : edgeOffset,
+          ...style
         },
-        children
-      )),
+        onClick
+      },
       /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: (0, import_classnames.default)(`${prefixCls}-expand-handle`, classNamesInProps == null ? void 0 : classNamesInProps.expandHandle),
-          style: styles == null ? void 0 : styles.expandHandle,
-          onClick: toggleDrawer
+          ref: setDrawerRef,
+          className: (0, import_classnames.default)(`${prefixCls}-drawer`, classNamesInProps == null ? void 0 : classNamesInProps.drawer),
+          style: { ...sizeMap, ...styles == null ? void 0 : styles.drawer }
         },
-        /* @__PURE__ */ React.createElement(
+        resizable && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: (0, import_classnames.default)(
+              `${prefixCls}-resize-handle`,
+              isDragging && `${prefixCls}-resize-handle-dragging`,
+              classNamesInProps == null ? void 0 : classNamesInProps.resizeHandle
+            ),
+            style: styles == null ? void 0 : styles.resizeHandle,
+            onMouseDown: handleResizeStart
+          }
+        ),
+        /* @__PURE__ */ React.createElement("div", { className: (0, import_classnames.default)(`${prefixCls}-content`, classNamesInProps == null ? void 0 : classNamesInProps.content), style: styles == null ? void 0 : styles.content }, /* @__PURE__ */ React.createElement(
+          import_antd.Card,
+          {
+            bordered: false,
+            variant: "borderless",
+            className: (0, import_classnames.default)(`${prefixCls}-card`, classNamesInProps == null ? void 0 : classNamesInProps.card),
+            style: styles == null ? void 0 : styles.card,
+            ...cardProps
+          },
+          children
+        )),
+        showToggle && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: (0, import_classnames.default)(`${prefixCls}-handle-icon`, classNamesInProps == null ? void 0 : classNamesInProps.handleIcon),
-            style: styles == null ? void 0 : styles.handleIcon
+            className: (0, import_classnames.default)(`${prefixCls}-toggle`, classNamesInProps == null ? void 0 : classNamesInProps.toggle),
+            style: styles == null ? void 0 : styles.toggle,
+            onClick: toggleDrawer
           },
-          isOpen ? openIcon : closeIcon
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: (0, import_classnames.default)(`${prefixCls}-handle-icon`, classNamesInProps == null ? void 0 : classNamesInProps.handleIcon),
+              style: styles == null ? void 0 : styles.handleIcon
+            },
+            isOpen ? openIcon : closeIcon
+          )
         )
       )
-    ))
+    )
   );
 };
 var FloatDrawer_default = FloatDrawer;

package/lib/components/FloatDrawer/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/FloatDrawer/index.tsx"],
-  "sourcesContent": ["import type { CSSProperties, FC, ReactNode } from 'react';\nimport { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { CardProps } from 'antd';\nimport { Card, ConfigProvider } from 'antd';\nimport classNames from 'classnames';\nimport { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';\nimport useRefFunction from '../../hooks/useRefFunction';\nimport useStyle from './style';\n\nexport interface FloatDrawerProps {\n  /**\n   * **EN:** Whether the drawer is open\n   *\n   * **CN:** 抽屉是否打开\n   */\n  open?: boolean;\n  /**\n   * **EN:** Position of the drawer\n   *\n   * **CN:** 抽屉的位置\n   *\n   * @default 'right'\n   */\n  position?: 'left' | 'right' | 'top' | 'bottom';\n  /**\n   * **EN:** Default size of the drawer. If the drawer is placed on the left or right, this is the\n   * width, otherwise it is the height.\n   *\n   * **CN:** 抽屉的默认宽度。如果抽屉放在左侧或右侧，则为宽度，否则为高度。\n   *\n   * @default 300\n   */\n  defaultSize?: number;\n  /**\n   * **EN:** Minimum size of the drawer\n   *\n   * **CN:** 抽屉的最小宽度\n   *\n   * @default 0\n   */\n  minSize?: number;\n  /**\n   * **EN:** Maximum size of the drawer\n   *\n   * **CN:** 抽屉的最大宽度\n   *\n   * @default Infinity\n   */\n  maxSize?: number;\n  /**\n   * **EN:** Cache key for storing the drawer size in localStorage. If not set, the size will not be\n   * cached.\n   *\n   * **CN:** 指定一个localStorage缓存键，用于记忆抽屉宽度。如果不设置，则不使用缓存。\n   */\n  cacheKey?: string;\n  /**\n   * **EN:** Custom class name for the root element\n   *\n   * **CN:** 根元素的自定义类名\n   */\n  className?: string;\n  /**\n   * **EN:** Custom class names for specific elements\n   *\n   * **CN:** 特定元素的自定义类名\n   */\n  classNames?: {\n    /**\n     * **EN:** Class name for the drawer element\n     *\n     * **CN:** 抽屉元素的类名\n     */\n    drawer?: string;\n    /**\n     * **EN:** Class name for the expand handle\n     *\n     * **CN:** 展开手柄的类名\n     */\n    expandHandle?: string;\n    /**\n     * **EN:** Class name for the resize handle\n     *\n     * **CN:** 调整大小手柄的类名\n     */\n    resizeHandle?: string;\n    /**\n     * **EN:** Class name for the handle icon\n     *\n     * **CN:** 手柄图标的类名\n     */\n    handleIcon?: string;\n    /**\n     * **EN:** Class name for the content area\n     *\n     * **CN:** 内容区域的类名\n     */\n    content?: string;\n    /**\n     * **EN:** Class name for the card element\n     *\n     * **CN:** 卡片元素的类名\n     */\n    card?: string;\n  };\n  /**\n   * **EN:** Custom styles for the root element\n   *\n   * **CN:** 根元素的自定义样式\n   */\n  style?: CSSProperties;\n  /**\n   * **EN:** Custom styles for specific elements\n   *\n   * **CN:** 特定元素的自定义样式\n   */\n  styles?: {\n    /**\n     * **EN:** Styles for the drawer element\n     *\n     * **CN:** 抽屉元素的样式\n     */\n    drawer?: CSSProperties;\n    /**\n     * **EN:** Styles for the expand handle\n     *\n     * **CN:** 展开手柄的样式\n     */\n    expandHandle?: CSSProperties;\n    /**\n     * **EN:** Styles for the resize handle\n     *\n     * **CN:** 调整大小手柄的样式\n     */\n    resizeHandle?: CSSProperties;\n    /**\n     * **EN:** Styles for the handle icon\n     *\n     * **CN:** 手柄图标的样式\n     */\n    handleIcon?: CSSProperties;\n    /**\n     * **EN:** Styles for the content area\n     *\n     * **CN:** 内容区域的样式\n     */\n    content?: CSSProperties;\n    /**\n     * **EN:** Styles for the card element\n     *\n     * **CN:** 卡片元素的样式\n     */\n    card?: CSSProperties;\n  };\n  /**\n   * **EN:** Custom properties for the card element\n   *\n   * **CN:** 卡片元素的自定义属性\n   */\n  cardProps?: Omit<CardProps, 'children'>;\n  /**\n   * **EN:** Content to be rendered inside the drawer\n   *\n   * **CN:** 抽屉内容\n   */\n  children?: ReactNode;\n  /**\n   * **EN:** Callback function when the open state changes\n   *\n   * **CN:** 打开状态变化时的回调函数\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * **EN:** Callback function when the drawer is resized\n   *\n   * **CN:** 抽屉调整大小时的回调函数\n   */\n  onResize?: (size: number) => void;\n}\n\n/**\n * **EN:** FloatDrawer component for creating a draggable, resizable drawer\n *\n * **CN:** FloatDrawer组件，用于创建可拖动、可调整大小的抽屉\n */\nconst FloatDrawer: FC<FloatDrawerProps> = (props) => {\n  const {\n    open,\n    position = 'right',\n    cardProps,\n    children,\n    className,\n    classNames: classNamesInProps,\n    style,\n    styles,\n    cacheKey,\n    defaultSize = 300,\n    minSize = 0,\n    maxSize = +Infinity,\n    onOpenChange,\n    onResize,\n  } = props;\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const prefixCls = getPrefixCls('re-float-drawer');\n  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n  const [isOpen, setIsOpen] = useState<boolean>();\n  const [size, setSize] = useState(\n    cacheKey && localStorage.getItem(cacheKey) ? Number(localStorage.getItem(cacheKey)) || defaultSize : defaultSize\n  );\n  const sizeMap = useMemo(() => {\n    const type = position === 'left' || position === 'right' ? 'width' : 'height';\n    return {\n      [type]: size,\n    };\n  }, [position, size]);\n  const [isDragging, setIsDragging] = useState(false);\n  const dragStartPos = useRef<number>(0);\n  const dragStartSize = useRef<number>(size);\n  const classString = classNames(\n    prefixCls,\n    className,\n    {\n      [`${prefixCls}-open`]: isOpen,\n      [`${prefixCls}-closed`]: !isOpen,\n      [`${prefixCls}-${position}`]: position,\n    },\n    hashId,\n    cssVarCls\n  );\n  const closeIcon = useMemo(() => {\n    return position === 'left' ? (\n      <RightOutlined />\n    ) : position === 'top' ? (\n      <DownOutlined />\n    ) : position === 'bottom' ? (\n      <UpOutlined />\n    ) : (\n      <LeftOutlined />\n    );\n  }, [position]);\n  const openIcon = useMemo(() => {\n    return position === 'left' ? (\n      <LeftOutlined />\n    ) : position === 'top' ? (\n      <UpOutlined />\n    ) : position === 'bottom' ? (\n      <DownOutlined />\n    ) : (\n      <RightOutlined />\n    );\n  }, [position]);\n\n  // Handle drawer visibility\n  const toggleDrawer = () => {\n    setIsOpen(!isOpen);\n    onOpenChange?.(!isOpen);\n  };\n\n  // Handle resize events\n  const handleResizeStart = useRefFunction((e: React.MouseEvent) => {\n    setIsDragging(true);\n    if (position === 'top' || position === 'bottom') {\n      dragStartPos.current = e.clientY;\n    } else {\n      dragStartPos.current = e.clientX;\n    }\n    dragStartSize.current = size;\n    e.preventDefault();\n  });\n  const handleResize = useRefFunction((e: MouseEvent) => {\n    if (isDragging) {\n      let newSize: number;\n      if (position === 'left') {\n        newSize = dragStartSize.current - (dragStartPos.current - e.clientX);\n      } else if (position === 'top') {\n        newSize = dragStartSize.current - (dragStartPos.current - e.clientY);\n      } else if (position === 'bottom') {\n        newSize = dragStartSize.current - (e.clientY - dragStartPos.current);\n      } else {\n        newSize = dragStartSize.current - (e.clientX - dragStartPos.current);\n      }\n      if (newSize >= minSize && newSize <= maxSize) {\n        setSize(newSize);\n        if (cacheKey) {\n          localStorage.setItem(cacheKey, String(newSize));\n        }\n        onResize?.(newSize);\n      }\n    }\n  });\n  const handleResizeEnd = useRefFunction(() => {\n    setIsDragging(false);\n  });\n\n  // Controlled open state\n  useEffect(() => {\n    setIsOpen(open);\n  }, [open]);\n\n  // Handle global events\n  useEffect(() => {\n    if (isDragging) {\n      window.addEventListener('mousemove', handleResize);\n      window.addEventListener('mouseup', handleResizeEnd);\n    } else {\n      window.removeEventListener('mousemove', handleResize);\n      window.removeEventListener('mouseup', handleResizeEnd);\n    }\n    return () => {\n      window.removeEventListener('mousemove', handleResize);\n      window.removeEventListener('mouseup', handleResizeEnd);\n    };\n  }, [isDragging]);\n\n  return wrapCSSVar(\n    <div className={classString} style={style}>\n      <div\n        className={classNames(`${prefixCls}-drawer`, classNamesInProps?.drawer)}\n        style={{ ...sizeMap, ...styles?.drawer }}\n      >\n        <div\n          className={classNames(\n            `${prefixCls}-resize-handle`,\n            isDragging && `${prefixCls}-resize-handle-dragging`,\n            classNamesInProps?.resizeHandle\n          )}\n          style={styles?.resizeHandle}\n          onMouseDown={handleResizeStart}\n        />\n        <div className={classNames(`${prefixCls}-content`, classNamesInProps?.content)} style={styles?.content}>\n          <Card\n            bordered={false}\n            variant=\"borderless\"\n            className={classNames(`${prefixCls}-card`, classNamesInProps?.card)}\n            style={styles?.card}\n            {...cardProps}\n          >\n            {children}\n          </Card>\n        </div>\n        <div\n          className={classNames(`${prefixCls}-expand-handle`, classNamesInProps?.expandHandle)}\n          style={styles?.expandHandle}\n          onClick={toggleDrawer}\n        >\n          <div\n            className={classNames(`${prefixCls}-handle-icon`, classNamesInProps?.handleIcon)}\n            style={styles?.handleIcon}\n          >\n            {isOpen ? openIcon : closeIcon}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default FloatDrawer;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { CSSProperties, FC, ReactNode } from 'react';\nimport { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { CardProps } from 'antd';\nimport { Card, ConfigProvider } from 'antd';\nimport classNames from 'classnames';\nimport { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';\nimport useRefFunction from '../../hooks/useRefFunction';\nimport useStyle from './style';\n\nexport interface FloatDrawerProps {\n  prefixCls?: string;\n  /**\n   * - **EN:** Whether the drawer is open\n   * - **CN:** 抽屉是否打开\n   */\n  open?: boolean;\n  /**\n   * - **EN:** Position of the drawer\n   * - **CN:** 抽屉的位置\n   *\n   * @default 'right'\n   */\n  position?: 'left' | 'right' | 'top' | 'bottom';\n  /**\n   * - **EN:** Default size of the drawer. If the drawer is placed on the left or right, this is the\n   *   width, otherwise it is the height. If not set, the drawer will adapt to the content size.\n   * - **CN:** 抽屉的默认宽度。如果抽屉放在左侧或右侧，则为宽度，否则为高度。不设置时，抽屉会根据内容自适应大小。\n   */\n  defaultSize?: number;\n  /**\n   * - **EN:** Minimum size of the drawer\n   * - **CN:** 抽屉的最小宽度\n   *\n   * @default 0\n   */\n  minSize?: number;\n  /**\n   * - **EN:** Maximum size of the drawer\n   * - **CN:** 抽屉的最大宽度\n   *\n   * @default Infinity\n   */\n  maxSize?: number;\n  /**\n   * - **EN:** Offset of the drawer from the edge of the screen, supports all CSS length units,\n   *   default is `0`.\n   *\n   * > The drawer will be hidden outside the parent container's edge, but since the parent container\n   * > may have padding or border, the drawer may not be completely hidden. You can adjust the\n   * > `edgeOffset` to ensure the drawer is completely hidden outside the parent container.\n   *\n   * - **CN:** 抽屉距离屏幕边缘的偏移量，支持所有的CSS长度单位, 默认`0`。\n   *\n   * > 抽屉会隐藏在父容器的外边缘, 但由于父容器可能有padding或border, 导致抽屉不能完全隐藏, 因此可以通过设置 `edgeOffset` 来调整抽屉的偏移量,\n   * > 以确保抽屉完全隐藏在父容器之外。\n   *\n   * @default 0\n   */\n  edgeOffset?: CSSProperties['width'];\n  /**\n   * - **EN:** Whether to show the toggle button, default is `true`.\n   * - **CN:** 是否显示展开/收起按钮，默认`true`。\n   */\n  showToggle?: boolean;\n  /**\n   * - **EN:** Whether the drawer is resizable, default is `true`.\n   * - **CN:** 抽屉是否可调整大小, 默认`true`。\n   */\n  resizable?: boolean;\n  /**\n   * - **EN:** Cache key for storing the drawer size in localStorage. If not set, the size will not be\n   *   cached.\n   * - **CN:** 指定一个localStorage缓存键，用于记忆抽屉宽度。如果不设置，则不使用缓存。\n   */\n  cacheKey?: string;\n  /**\n   * - **EN:** Custom class name for the root element\n   * - **CN:** 根元素的自定义类名\n   */\n  className?: string;\n  /**\n   * - **EN:** Custom class names for specific elements\n   * - **CN:** 特定元素的自定义类名\n   */\n  classNames?: {\n    /**\n     * - **EN:** Class name for the drawer element\n     * - **CN:** 抽屉元素的类名\n     */\n    drawer?: string;\n    /**\n     * - **EN:** Class name for the expand handle\n     * - **CN:** 展开手柄的类名\n     */\n    toggle?: string;\n    /**\n     * - **EN:** Class name for the resize handle\n     * - **CN:** 调整大小手柄的类名\n     */\n    resizeHandle?: string;\n    /**\n     * - **EN:** Class name for the handle icon\n     * - **CN:** 手柄图标的类名\n     */\n    handleIcon?: string;\n    /**\n     * - **EN:** Class name for the content area\n     * - **CN:** 内容区域的类名\n     */\n    content?: string;\n    /**\n     * - **EN:** Class name for the card element\n     * - **CN:** 卡片元素的类名\n     */\n    card?: string;\n  };\n  /**\n   * - **EN:** Custom styles for the root element\n   * - **CN:** 根元素的自定义样式\n   */\n  style?: CSSProperties;\n  /**\n   * - **EN:** Custom styles for specific elements\n   * - **CN:** 特定元素的自定义样式\n   */\n  styles?: {\n    /**\n     * - **EN:** Styles for the drawer element\n     * - **CN:** 抽屉元素的样式\n     */\n    drawer?: CSSProperties;\n    /**\n     * - **EN:** Styles for the expand handle\n     * - **CN:** 展开手柄的样式\n     */\n    toggle?: CSSProperties;\n    /**\n     * - **EN:** Styles for the resize handle\n     * - **CN:** 调整大小手柄的样式\n     */\n    resizeHandle?: CSSProperties;\n    /**\n     * - **EN:** Styles for the handle icon\n     * - **CN:** 手柄图标的样式\n     */\n    handleIcon?: CSSProperties;\n    /**\n     * - **EN:** Styles for the content area\n     * - **CN:** 内容区域的样式\n     */\n    content?: CSSProperties;\n    /**\n     * - **EN:** Styles for the card element\n     * - **CN:** 卡片元素的样式\n     */\n    card?: CSSProperties;\n  };\n  /**\n   * - **EN:** Custom properties for the card element\n   * - **CN:** 卡片元素的自定义属性\n   */\n  cardProps?: Omit<CardProps, 'children'>;\n  /**\n   * - **EN:** Content to be rendered inside the drawer\n   * - **CN:** 抽屉内容\n   */\n  children?: ReactNode;\n  /**\n   * - **EN:** Callback function when the open state changes\n   * - **CN:** 打开状态变化时的回调函数\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * - **EN:** Callback function when the drawer is resized\n   * - **CN:** 抽屉调整大小时的回调函数\n   */\n  onResize?: (size: number) => void;\n  /**\n   * - **EN:** Event handler for click events on the drawer container and its internal elements\n   * - **CN:** 点击抽屉容器及内部元素时的事件\n   */\n  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n}\n\n/**\n * - **EN:** FloatDrawer component for creating a draggable, resizable drawer\n * - **CN:** FloatDrawer组件，用于创建可拖动、可调整大小的抽屉\n */\nconst FloatDrawer: FC<FloatDrawerProps> = (props) => {\n  const {\n    prefixCls: prefixClsInProps,\n    open,\n    position = 'right',\n    cardProps,\n    children,\n    className,\n    classNames: classNamesInProps,\n    style,\n    styles,\n    cacheKey,\n    defaultSize,\n    minSize = 0,\n    maxSize = +Infinity,\n    edgeOffset,\n    showToggle = true,\n    resizable = true,\n    onOpenChange,\n    onResize,\n    onClick,\n  } = props;\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const prefixCls = getPrefixCls('easy-float-drawer', prefixClsInProps);\n  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n  const [drawerRef, setDrawerRef] = useState<HTMLDivElement | null>(null);\n  const [size, setSize] = useState(\n    cacheKey && localStorage.getItem(cacheKey) ? Number(localStorage.getItem(cacheKey)) || defaultSize : defaultSize\n  );\n  const sizeMap = useMemo(() => {\n    const type = position === 'left' || position === 'right' ? 'width' : 'height';\n    return {\n      [type]: size,\n    };\n  }, [position, size]);\n  const [isOpen, setIsOpen] = useState<boolean>();\n  const [isDragging, setIsDragging] = useState(false);\n  const dragStartPos = useRef<number>(0);\n  const dragStartSize = useRef<number>(size);\n  const classString = classNames(\n    prefixCls,\n    className,\n    {\n      [`${prefixCls}-open`]: isOpen,\n      [`${prefixCls}-closed`]: !isOpen,\n      [`${prefixCls}-${position}`]: position,\n    },\n    hashId,\n    cssVarCls\n  );\n  const closeIcon = useMemo(() => {\n    return position === 'left' ? (\n      <RightOutlined />\n    ) : position === 'top' ? (\n      <DownOutlined />\n    ) : position === 'bottom' ? (\n      <UpOutlined />\n    ) : (\n      <LeftOutlined />\n    );\n  }, [position]);\n  const openIcon = useMemo(() => {\n    return position === 'left' ? (\n      <LeftOutlined />\n    ) : position === 'top' ? (\n      <UpOutlined />\n    ) : position === 'bottom' ? (\n      <DownOutlined />\n    ) : (\n      <RightOutlined />\n    );\n  }, [position]);\n\n  // Handle drawer visibility\n  const toggleDrawer = () => {\n    setIsOpen(!isOpen);\n    onOpenChange?.(!isOpen);\n  };\n\n  // Handle resize events\n  const handleResizeStart = useRefFunction((e: React.MouseEvent) => {\n    setIsDragging(true);\n    if (position === 'top' || position === 'bottom') {\n      dragStartPos.current = e.clientY;\n    } else {\n      dragStartPos.current = e.clientX;\n    }\n    dragStartSize.current = size;\n    e.preventDefault();\n  });\n  const handleResize = useRefFunction((e: MouseEvent) => {\n    if (isDragging && dragStartSize.current) {\n      let newSize: number;\n      if (position === 'left') {\n        newSize = dragStartSize.current - (dragStartPos.current - e.clientX);\n      } else if (position === 'top') {\n        newSize = dragStartSize.current - (dragStartPos.current - e.clientY);\n      } else if (position === 'bottom') {\n        newSize = dragStartSize.current - (e.clientY - dragStartPos.current);\n      } else {\n        newSize = dragStartSize.current - (e.clientX - dragStartPos.current);\n      }\n      if (newSize >= minSize && newSize <= maxSize) {\n        setSize(newSize);\n        if (cacheKey) {\n          localStorage.setItem(cacheKey, String(newSize));\n        }\n        onResize?.(newSize);\n      }\n    }\n  });\n  const handleResizeEnd = useRefFunction(() => {\n    setIsDragging(false);\n  });\n\n  // Monitor drawer ref, calculate size if not set\n  // This is useful for initial rendering when size is not provided\n  useEffect(() => {\n    if (drawerRef && size === undefined) {\n      const rect = drawerRef.getBoundingClientRect();\n      setSize(position === 'left' || position === 'right' ? rect.width : rect.height);\n    }\n  }, [drawerRef, position, size]);\n\n  // Controlled open state\n  useEffect(() => {\n    setIsOpen(open);\n  }, [open]);\n\n  // Handle global events\n  useEffect(() => {\n    if (isDragging) {\n      window.addEventListener('mousemove', handleResize);\n      window.addEventListener('mouseup', handleResizeEnd);\n    } else {\n      window.removeEventListener('mousemove', handleResize);\n      window.removeEventListener('mouseup', handleResizeEnd);\n    }\n    return () => {\n      window.removeEventListener('mousemove', handleResize);\n      window.removeEventListener('mouseup', handleResizeEnd);\n    };\n  }, [isDragging]);\n\n  return wrapCSSVar(\n    <div\n      className={classString}\n      style={{\n        // @ts-expect-error: because of dynamic CSS variables\n        '--edge-offset': typeof edgeOffset === 'number' ? `${edgeOffset}px` : edgeOffset,\n        ...style,\n      }}\n      onClick={onClick}\n    >\n      <div\n        ref={setDrawerRef}\n        className={classNames(`${prefixCls}-drawer`, classNamesInProps?.drawer)}\n        style={{ ...sizeMap, ...styles?.drawer }}\n      >\n        {resizable && (\n          <div\n            className={classNames(\n              `${prefixCls}-resize-handle`,\n              isDragging && `${prefixCls}-resize-handle-dragging`,\n              classNamesInProps?.resizeHandle\n            )}\n            style={styles?.resizeHandle}\n            onMouseDown={handleResizeStart}\n          />\n        )}\n        <div className={classNames(`${prefixCls}-content`, classNamesInProps?.content)} style={styles?.content}>\n          <Card\n            bordered={false}\n            variant=\"borderless\"\n            className={classNames(`${prefixCls}-card`, classNamesInProps?.card)}\n            style={styles?.card}\n            {...cardProps}\n          >\n            {children}\n          </Card>\n        </div>\n        {showToggle && (\n          <div\n            className={classNames(`${prefixCls}-toggle`, classNamesInProps?.toggle)}\n            style={styles?.toggle}\n            onClick={toggleDrawer}\n          >\n            <div\n              className={classNames(`${prefixCls}-handle-icon`, classNamesInProps?.handleIcon)}\n              style={styles?.handleIcon}\n            >\n              {isOpen ? openIcon : closeIcon}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default FloatDrawer;\n"],
+  "mappings": "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",
   "names": ["useStyle", "classNames", "useRefFunction"]
 }