elseware-ui 2.37.0 → 2.37.2

package/dist/index.d.mts

@@ -1708,7 +1708,7 @@ interface ContentAreaProps {
     styles?: string;
     enablePadding?: boolean;
 }
-declare function ContentArea({ children, styles, enablePadding, }: ContentAreaProps): React__default.JSX.Element;
+declare const ContentArea: React__default.ForwardRefExoticComponent<ContentAreaProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface FlexColProps$1 {
     children?: React__default.ReactNode;
@@ -1836,10 +1836,13 @@ interface DrawerProps {
     side?: "left" | "right" | "top" | "bottom";
     handleClose: () => void;
     styles?: string;
+    backdropStyles?: string;
     showBackdrop?: boolean;
     closeOnBackdropClick?: boolean;
+    offsetTop?: string;
+    offsetBottom?: string;
 }
-declare const Drawer: ({ children, visibility, side, handleClose, styles, showBackdrop, closeOnBackdropClick, }: DrawerProps) => React__default.JSX.Element;
+declare const Drawer: ({ children, visibility, side, handleClose, styles, backdropStyles, showBackdrop, closeOnBackdropClick, offsetTop, offsetBottom, }: DrawerProps) => React__default.JSX.Element;
 
 interface DrawerTogglerProps {
     icon?: ReactNode;
@@ -3149,6 +3152,7 @@ declare const useDrawer: (defaultVisibility?: boolean) => {
     show: boolean;
     openDrawer: () => void;
     closeDrawer: () => void;
+    toggleDrawer: () => void;
 };
 
 declare const useModal: () => {

package/dist/index.d.ts

@@ -1708,7 +1708,7 @@ interface ContentAreaProps {
     styles?: string;
     enablePadding?: boolean;
 }
-declare function ContentArea({ children, styles, enablePadding, }: ContentAreaProps): React__default.JSX.Element;
+declare const ContentArea: React__default.ForwardRefExoticComponent<ContentAreaProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface FlexColProps$1 {
     children?: React__default.ReactNode;
@@ -1836,10 +1836,13 @@ interface DrawerProps {
     side?: "left" | "right" | "top" | "bottom";
     handleClose: () => void;
     styles?: string;
+    backdropStyles?: string;
     showBackdrop?: boolean;
     closeOnBackdropClick?: boolean;
+    offsetTop?: string;
+    offsetBottom?: string;
 }
-declare const Drawer: ({ children, visibility, side, handleClose, styles, showBackdrop, closeOnBackdropClick, }: DrawerProps) => React__default.JSX.Element;
+declare const Drawer: ({ children, visibility, side, handleClose, styles, backdropStyles, showBackdrop, closeOnBackdropClick, offsetTop, offsetBottom, }: DrawerProps) => React__default.JSX.Element;
 
 interface DrawerTogglerProps {
     icon?: ReactNode;
@@ -3149,6 +3152,7 @@ declare const useDrawer: (defaultVisibility?: boolean) => {
     show: boolean;
     openDrawer: () => void;
     closeDrawer: () => void;
+    toggleDrawer: () => void;
 };
 
 declare const useModal: () => {

package/dist/index.js

@@ -19596,25 +19596,24 @@ function TextArea({
   ] });
 }
 var TextArea_default = TextArea;
-function ContentArea({
-  children,
-  styles,
-  enablePadding = false
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: classNames17__default.default({
-        "min-h-screen h-full w-full py-3 px-5": true,
-        "py-3 px-5": !enablePadding,
-        "py-3 px-5 lg:px-[150px]": enablePadding,
-        "transition-all duration-[200ms]": true,
-        [`${styles}`]: styles
-      }),
-      children
-    }
-  );
-}
+var ContentArea = React2.forwardRef(
+  ({ children, styles, enablePadding = false }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: classNames17__default.default({
+          "min-h-screen h-full w-full transition-all duration-[200ms]": true,
+          "py-3 px-5": !enablePadding,
+          "py-3 px-5 lg:px-[150px]": enablePadding,
+          [`${styles}`]: Boolean(styles)
+        }),
+        children
+      }
+    );
+  }
+);
+ContentArea.displayName = "ContentArea";
 var ContentArea_default = ContentArea;
 function FlexCol({ children, gap = 3, styles }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -20196,26 +20195,40 @@ var Drawer = ({
   side = "left",
   handleClose,
   styles,
+  backdropStyles,
   showBackdrop = true,
-  closeOnBackdropClick = true
+  closeOnBackdropClick = true,
+  offsetTop = "0px",
+  offsetBottom = "0px"
 }) => {
   const isHorizontal = side === "left" || side === "right";
   const isMobile = useIsMobile_default();
+  const hasOffset = offsetTop !== "0px" || offsetBottom !== "0px";
+  const drawerStyle = isHorizontal ? {
+    top: offsetTop,
+    bottom: offsetBottom,
+    height: hasOffset ? `calc(100vh - ${offsetTop} - ${offsetBottom})` : void 0
+  } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     isMobile && showBackdrop && /* @__PURE__ */ jsxRuntime.jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "fixed inset-0 bg-black/50 z-40",
+        className: classNames17__default.default(
+          "fixed inset-0 bg-black/50 z-40",
+          backdropStyles
+        ),
         onClick: closeOnBackdropClick ? handleClose : void 0
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(TransitionSlide_default, { visibility, side, leaveDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        style: drawerStyle,
         className: classNames17__default.default(
           "fixed shadow-lg z-50",
           {
-            "h-full w-[300px] top-0": isHorizontal,
+            "h-full w-[300px] top-0": isHorizontal && !hasOffset,
+            "w-[300px]": isHorizontal && hasOffset,
             "w-full h-[300px] left-0": !isHorizontal,
             "left-0": side === "left",
             "right-0": side === "right",
@@ -21751,16 +21764,20 @@ function CommentHeader({ comment, config }) {
 var CommentHeader_default = CommentHeader;
 var useDrawer = (defaultVisibility = true) => {
   const [show, setShow] = React2.useState(defaultVisibility);
-  const openDrawer = () => {
-    setShow((prev) => !prev);
-  };
-  const closeDrawer = () => {
+  const openDrawer = React2.useCallback(() => {
+    setShow(true);
+  }, []);
+  const closeDrawer = React2.useCallback(() => {
     setShow(false);
-  };
+  }, []);
+  const toggleDrawer = React2.useCallback(() => {
+    setShow((prev) => !prev);
+  }, []);
   return {
     show,
     openDrawer,
-    closeDrawer
+    closeDrawer,
+    toggleDrawer
   };
 };
 var useDrawer_default = useDrawer;
@@ -23561,12 +23578,7 @@ function MyReviewPanel({
             maxRating: config.maxRating
           }
         ),
-        config.allowRecommendation && /* @__PURE__ */ jsxRuntime.jsx(
-          RecommendationComponent,
-          {
-            isRecommended: myReview.isRecommended
-          }
-        )
+        config.allowRecommendation && /* @__PURE__ */ jsxRuntime.jsx(RecommendationComponent, { isRecommended: myReview.isRecommended })
       ] })
     ] }) })
   ] });
@@ -23940,7 +23952,13 @@ function ReviewItem({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(ContentComponent, { review }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RatingComponent, { rating: review.rating, maxRating: config.maxRating }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RatingComponent,
+        {
+          rating: review.rating,
+          maxRating: config.maxRating
+        }
+      ),
       config.allowRecommendation && /* @__PURE__ */ jsxRuntime.jsx(RecommendationComponent, { isRecommended: review.isRecommended })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -23991,13 +24009,7 @@ function ReviewList({
   const ItemComponent = components?.Item ?? ReviewItem_default;
   const EmptyStateComponent = components?.EmptyState ?? ReviewEmptyState_default;
   if (!reviews.length) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      EmptyStateComponent,
-      {
-        title: config.emptyTitle,
-        text: config.emptyText
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(EmptyStateComponent, { title: config.emptyTitle, text: config.emptyText });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-5", children: reviews.map((review) => /* @__PURE__ */ jsxRuntime.jsx(
     ItemComponent,
@@ -24220,12 +24232,7 @@ function useReviewThreadState({
         setIsCreatingReviewReply(false);
       }
     },
-    [
-      applyReview,
-      applyReviewUpdater,
-      config.maxRepliesPerReview,
-      dataSource
-    ]
+    [applyReview, applyReviewUpdater, config.maxRepliesPerReview, dataSource]
   );
   const updateReviewReply2 = React2.useCallback(
     async (input) => {