elseware-ui 2.37.0 → 2.37.2

package/dist/index.mjs

@@ -19568,25 +19568,24 @@ function TextArea({
   ] });
 }
 var TextArea_default = TextArea;
-function ContentArea({
-  children,
-  styles,
-  enablePadding = false
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classNames17({
-        "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 = forwardRef(
+  ({ children, styles, enablePadding = false }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: classNames17({
+          "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__ */ jsx(
@@ -20168,26 +20167,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__ */ jsxs(Fragment, { children: [
     isMobile && showBackdrop && /* @__PURE__ */ jsx(TransitionFade_default, { visibility, leaveDuration: 200, children: /* @__PURE__ */ jsx(
       "div",
       {
-        className: "fixed inset-0 bg-black/50 z-40",
+        className: classNames17(
+          "fixed inset-0 bg-black/50 z-40",
+          backdropStyles
+        ),
         onClick: closeOnBackdropClick ? handleClose : void 0
       }
     ) }),
     /* @__PURE__ */ jsx(TransitionSlide_default, { visibility, side, leaveDuration: 200, children: /* @__PURE__ */ jsx(
       "div",
       {
+        style: drawerStyle,
         className: classNames17(
           "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",
@@ -21723,16 +21736,20 @@ function CommentHeader({ comment, config }) {
 var CommentHeader_default = CommentHeader;
 var useDrawer = (defaultVisibility = true) => {
   const [show, setShow] = useState(defaultVisibility);
-  const openDrawer = () => {
-    setShow((prev) => !prev);
-  };
-  const closeDrawer = () => {
+  const openDrawer = useCallback(() => {
+    setShow(true);
+  }, []);
+  const closeDrawer = useCallback(() => {
     setShow(false);
-  };
+  }, []);
+  const toggleDrawer = useCallback(() => {
+    setShow((prev) => !prev);
+  }, []);
   return {
     show,
     openDrawer,
-    closeDrawer
+    closeDrawer,
+    toggleDrawer
   };
 };
 var useDrawer_default = useDrawer;
@@ -23533,12 +23550,7 @@ function MyReviewPanel({
             maxRating: config.maxRating
           }
         ),
-        config.allowRecommendation && /* @__PURE__ */ jsx(
-          RecommendationComponent,
-          {
-            isRecommended: myReview.isRecommended
-          }
-        )
+        config.allowRecommendation && /* @__PURE__ */ jsx(RecommendationComponent, { isRecommended: myReview.isRecommended })
       ] })
     ] }) })
   ] });
@@ -23912,7 +23924,13 @@ function ReviewItem({
     ] }),
     /* @__PURE__ */ jsx(ContentComponent, { review }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ jsx(RatingComponent, { rating: review.rating, maxRating: config.maxRating }),
+      /* @__PURE__ */ jsx(
+        RatingComponent,
+        {
+          rating: review.rating,
+          maxRating: config.maxRating
+        }
+      ),
       config.allowRecommendation && /* @__PURE__ */ jsx(RecommendationComponent, { isRecommended: review.isRecommended })
     ] }),
     /* @__PURE__ */ jsx(
@@ -23963,13 +23981,7 @@ function ReviewList({
   const ItemComponent = components?.Item ?? ReviewItem_default;
   const EmptyStateComponent = components?.EmptyState ?? ReviewEmptyState_default;
   if (!reviews.length) {
-    return /* @__PURE__ */ jsx(
-      EmptyStateComponent,
-      {
-        title: config.emptyTitle,
-        text: config.emptyText
-      }
-    );
+    return /* @__PURE__ */ jsx(EmptyStateComponent, { title: config.emptyTitle, text: config.emptyText });
   }
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-5", children: reviews.map((review) => /* @__PURE__ */ jsx(
     ItemComponent,
@@ -24192,12 +24204,7 @@ function useReviewThreadState({
         setIsCreatingReviewReply(false);
       }
     },
-    [
-      applyReview,
-      applyReviewUpdater,
-      config.maxRepliesPerReview,
-      dataSource
-    ]
+    [applyReview, applyReviewUpdater, config.maxRepliesPerReview, dataSource]
   );
   const updateReviewReply2 = useCallback(
     async (input) => {