@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-YUFKPLCK.mjs

@@ -0,0 +1,320 @@
+import {
+  useFormContext
+} from "./chunk-6NJMDDL6.mjs";
+import {
+  FormItemControlProvider
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-OU2AV7DY.mjs";
+
+// src/components/FormItem.tsx
+import React, { useMemo, useEffect, useState, useCallback, useId, useRef } from "react";
+import {
+  classNames,
+  devWarn,
+  extractFormChangeValue,
+  getFormItemAsteriskClasses,
+  getFormItemClasses,
+  getFormItemContentClasses,
+  getFormItemErrorBlockClasses,
+  getFormItemErrorClasses,
+  getFormItemErrorPopupClasses,
+  getFormItemFieldClasses,
+  getFormItemLabelClasses,
+  hasRequiredRule,
+  isFormItemGroupControl,
+  mergeAriaDescribedBy
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FIELD_CLASSES = getFormItemFieldClasses();
+var ASTERISK_CLASSES = getFormItemAsteriskClasses();
+var FormItem = ({
+  name,
+  label,
+  labelWidth,
+  required,
+  rules,
+  error: controlledError,
+  showMessage = true,
+  errorDisplayMode = "inline",
+  size,
+  children,
+  className,
+  style,
+  condition,
+  ...rest
+}) => {
+  const formContext = useFormContext();
+  const [shakeTrigger, setShakeTrigger] = useState(0);
+  const [popupActive, setPopupActive] = useState(false);
+  const prevFormErrorRef = useRef("");
+  const contentRef = useRef(null);
+  const errorRef = useRef(null);
+  const reactId = useId();
+  const baseId = `tiger-form-item-${reactId}`;
+  const labelId = `${baseId}-label`;
+  const fieldId = `${baseId}-field`;
+  const errorId = `${baseId}-error`;
+  const actualSize = size || formContext?.size || "md";
+  const labelPosition = formContext?.labelPosition || "left";
+  const labelAlign = formContext?.labelAlign;
+  const conditionState = useMemo(() => {
+    if (!name || !formContext) {
+      return { shown: true, disabled: false, required: false };
+    }
+    return formContext.getFieldConditionState(name, condition);
+  }, [name, formContext, condition]);
+  const actualLabelWidth = useMemo(() => {
+    const width = labelWidth || formContext?.labelWidth;
+    if (typeof width === "number") {
+      return `${width}px`;
+    }
+    return width;
+  }, [labelWidth, formContext?.labelWidth]);
+  const fieldIsRequired = useMemo(() => {
+    if (required !== void 0) return required;
+    if (hasRequiredRule(rules)) return true;
+    if (name && hasRequiredRule(formContext?.rules?.[name])) return true;
+    return conditionState.required;
+  }, [required, rules, name, formContext?.rules, conditionState.required]);
+  const showAsterisk = fieldIsRequired && (formContext?.showRequiredAsterisk ?? true);
+  const formError = name ? formContext?.errorsByField[name] : void 0;
+  const errorMessage = controlledError !== void 0 ? controlledError : formError ?? "";
+  const hasError = !!errorMessage;
+  useEffect(() => {
+    if (errorMessage && errorMessage !== prevFormErrorRef.current) {
+      setShakeTrigger((prev) => prev + 1);
+    }
+    prevFormErrorRef.current = errorMessage;
+  }, [errorMessage]);
+  useEffect(() => {
+    if (!name || !formContext) {
+      return;
+    }
+    formContext.registerFieldRules(name, rules);
+    formContext.registerFieldCondition(name, condition);
+    return () => {
+      formContext.registerFieldRules(name, void 0);
+      formContext.registerFieldCondition(name, void 0);
+    };
+  }, [name, rules, condition, formContext]);
+  const handleBlur = useCallback(() => {
+    if (name && formContext) {
+      formContext.validateField(name, rules, "blur");
+    }
+  }, [name, formContext, rules]);
+  const handleValueChange = useCallback(
+    (next) => {
+      if (!name || !formContext) return;
+      formContext.updateValue(name, next);
+      formContext.validateField(name, rules, "change");
+    },
+    [name, formContext, rules]
+  );
+  const handleNativeChange = useCallback(
+    (argument) => {
+      const extracted = extractFormChangeValue(argument);
+      if (extracted.found) {
+        handleValueChange(extracted.value);
+      } else if (name && formContext) {
+        formContext.validateField(name, rules, "change");
+      }
+    },
+    [handleValueChange, name, formContext, rules]
+  );
+  const effectiveShowMessage = showMessage && (formContext?.inlineMessage ?? true);
+  const popupErrorVisible = effectiveShowMessage && hasError && errorDisplayMode === "popup" && popupActive;
+  const overlay = useAnchoredOverlay({
+    enabled: popupErrorVisible,
+    referenceRef: contentRef,
+    floatingRef: errorRef,
+    placement: "bottom-start",
+    offset: 4
+  });
+  const describedById = effectiveShowMessage && hasError ? errorId : void 0;
+  const fieldValue = name ? formContext?.getFieldValue(name) : void 0;
+  const controlDisabled = Boolean(
+    formContext?.disabled || formContext?.loading || conditionState.disabled
+  );
+  const childArray = React.Children.toArray(children);
+  const onlyChild = childArray.length === 1 ? childArray[0] : null;
+  const isNativeElement = React.isValidElement(onlyChild) && typeof onlyChild.type === "string";
+  const nativeId = isNativeElement ? onlyChild.props.id : void 0;
+  const effectiveFieldId = nativeId ?? fieldId;
+  const useGroup = childArray.length !== 1;
+  const isGroupControl = React.isValidElement(onlyChild) && isFormItemGroupControl(onlyChild.type);
+  const enhancedChild = useMemo(() => {
+    if (!isNativeElement || !React.isValidElement(onlyChild)) {
+      return children;
+    }
+    const nativeType = typeof onlyChild.props.type === "string" ? onlyChild.props.type.toLowerCase() : "";
+    const nextProps = {
+      id: effectiveFieldId,
+      name: onlyChild.props.name ?? name,
+      "aria-invalid": hasError ? true : onlyChild.props["aria-invalid"],
+      "aria-required": fieldIsRequired ? true : onlyChild.props["aria-required"],
+      disabled: controlDisabled ? true : onlyChild.props.disabled,
+      "aria-describedby": mergeAriaDescribedBy(onlyChild.props["aria-describedby"], describedById),
+      onBlur: (event) => {
+        onlyChild.props.onBlur?.(event);
+        handleBlur();
+      },
+      onChange: (event) => {
+        onlyChild.props.onChange?.(event);
+        handleNativeChange(event);
+      }
+    };
+    if (nativeType === "checkbox") {
+      nextProps.checked = Boolean(fieldValue);
+    } else if (nativeType === "radio") {
+      nextProps.checked = onlyChild.props.value === fieldValue;
+    } else if (fieldValue !== void 0) {
+      nextProps.value = fieldValue;
+    } else {
+      nextProps.value = onlyChild.props.value ?? "";
+    }
+    return React.cloneElement(onlyChild, nextProps);
+  }, [
+    isNativeElement,
+    onlyChild,
+    children,
+    effectiveFieldId,
+    name,
+    hasError,
+    fieldIsRequired,
+    controlDisabled,
+    describedById,
+    handleBlur,
+    handleNativeChange,
+    fieldValue
+  ]);
+  useEffect(() => {
+    if (useGroup && name) {
+      devWarn(
+        "FormItem.multipleControls",
+        "FormItem supports a single field control. Extra children do not receive value or validation bindings."
+      );
+    }
+  }, [useGroup, name]);
+  const controlValue = useMemo(
+    () => ({
+      id: effectiveFieldId,
+      labelId: label ? labelId : void 0,
+      name,
+      status: hasError ? "error" : void 0,
+      shakeTrigger: hasError ? shakeTrigger : void 0,
+      disabled: controlDisabled,
+      describedBy: describedById,
+      required: fieldIsRequired,
+      value: name ? fieldValue ?? "" : fieldValue,
+      onChange: handleValueChange,
+      onBlur: handleBlur
+    }),
+    [
+      effectiveFieldId,
+      label,
+      labelId,
+      name,
+      hasError,
+      shakeTrigger,
+      controlDisabled,
+      describedById,
+      fieldIsRequired,
+      fieldValue,
+      handleValueChange,
+      handleBlur
+    ]
+  );
+  const formItemClasses = classNames(
+    getFormItemClasses({
+      size: actualSize,
+      labelPosition,
+      hasError,
+      disabled: controlDisabled
+    }),
+    className
+  );
+  const labelClasses = getFormItemLabelClasses({
+    size: actualSize,
+    labelAlign,
+    labelPosition,
+    isRequired: showAsterisk
+  });
+  const labelStyles = labelPosition === "top" ? {} : actualLabelWidth ? { width: actualLabelWidth } : {};
+  const errorNode = (() => {
+    if (!effectiveShowMessage) return null;
+    if (errorDisplayMode === "block" && !hasError) return null;
+    if (errorDisplayMode === "popup" && !hasError) return null;
+    const errorClass = errorDisplayMode === "block" ? getFormItemErrorBlockClasses(actualSize) : errorDisplayMode === "popup" ? classNames(getFormItemErrorPopupClasses(), overlay.floatingClasses) : getFormItemErrorClasses(actualSize, { visible: hasError });
+    return renderOverlayPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: errorRef,
+          id: hasError ? errorId : void 0,
+          role: hasError ? "alert" : void 0,
+          className: errorClass,
+          style: errorDisplayMode === "popup" ? overlay.floatingStyles : void 0,
+          "data-positioned": errorDisplayMode === "popup" ? overlay.positioned : void 0,
+          "aria-hidden": hasError ? void 0 : true,
+          children: hasError ? errorMessage : ""
+        }
+      ),
+      overlay.target,
+      errorDisplayMode !== "popup"
+    );
+  })();
+  if (!conditionState.shown) {
+    return null;
+  }
+  const fieldWrapperProps = useGroup ? {
+    role: "group",
+    "aria-labelledby": label ? labelId : void 0,
+    "aria-describedby": describedById,
+    "aria-invalid": hasError ? true : void 0
+  } : {};
+  return /* @__PURE__ */ jsxs("div", { className: formItemClasses, style, ...rest, children: [
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        id: labelId,
+        className: labelClasses,
+        style: labelStyles,
+        htmlFor: isGroupControl ? void 0 : effectiveFieldId,
+        children: [
+          showAsterisk && /* @__PURE__ */ jsx("span", { className: ASTERISK_CLASSES, children: "*" }),
+          label
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: contentRef,
+        className: classNames(
+          getFormItemContentClasses(labelPosition),
+          errorDisplayMode === "popup" && "relative"
+        ),
+        onMouseEnter: () => setPopupActive(true),
+        onMouseLeave: () => setPopupActive(false),
+        onFocus: () => setPopupActive(true),
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) {
+            setPopupActive(false);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: FIELD_CLASSES, ...fieldWrapperProps, children: /* @__PURE__ */ jsx(FormItemControlProvider, { value: controlValue, children: enhancedChild }) }),
+          errorNode
+        ]
+      }
+    )
+  ] });
+};
+FormItem.displayName = "TigerFormItem";
+
+export {
+  FormItem
+};

package/dist/{chunk-CC7IOSNI.mjs → chunk-Z3AD5DZX.mjs}

@@ -1,25 +1,26 @@
 import {
-  renderBodyPortal,
+  composeRefs
+} from "./chunk-WWZZRB7H.mjs";
+import {
+  renderOverlayPortal,
   useBodyScrollLock,
   useEscapeKey,
-  useFocusTrap
-} from "./chunk-HKAZXG74.mjs";
+  useFocusTrap,
+  useOverlayPortalTarget
+} from "./chunk-OU2AV7DY.mjs";
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/Drawer.tsx
 import React, { useCallback, useEffect, useId, useMemo, useRef } from "react";
 import {
-  ANIMATION_DURATION_MS,
-  captureActiveElement,
   classNames,
   closeIconViewBox,
   closeIconPathD,
   closeIconPathStrokeLinecap,
   closeIconPathStrokeLinejoin,
   closeIconPathStrokeWidth,
-  focusFirst,
   getDrawerMaskClasses,
   getDrawerContainerClasses,
   getDrawerPanelClasses,
@@ -30,13 +31,20 @@ import {
   getDrawerTitleClasses,
   getGestureTouchPoint,
   isDrawerSwipeCloseGesture,
-  resolveLocaleText,
+  resolveDrawerPlacement,
+  getDrawerSwipeCloseDirection,
+  getDrawerLabels,
   resolveSwipeGesture,
-  restoreFocus,
+  shouldRenderOverlay,
+  isOverlayVisuallyHidden,
+  scheduleOverlayLeave,
+  canStartOverlaySwipeClose,
+  OVERLAY_SWIPE_HANDLE_ATTR,
   shouldCloseOnMaskClick,
-  mergeTigerLocale
+  mergeTigerLocale,
+  OVERLAY_Z_INDEX
 } from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var CloseIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -45,6 +53,8 @@ var CloseIcon = () => /* @__PURE__ */ jsx(
     stroke: "currentColor",
     viewBox: closeIconViewBox,
     xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
     children: /* @__PURE__ */ jsx(
       "path",
       {
@@ -56,7 +66,7 @@ var CloseIcon = () => /* @__PURE__ */ jsx(
     )
   }
 );
-var Drawer = ({
+var Drawer = React.forwardRef(function Drawer2({
   open = false,
   placement = "right",
   size = "md",
@@ -66,12 +76,12 @@ var Drawer = ({
   closable = true,
   mask = true,
   maskClosable = true,
-  zIndex = 1e3,
+  keyboard = true,
+  zIndex = OVERLAY_Z_INDEX.modal,
   className,
   bodyClassName,
   bodyPadding,
   destroyOnClose = false,
-  deferDestroyOnClose = false,
   fullscreenOnMobile = true,
   panelClassName,
   panelStyle,
@@ -86,25 +96,44 @@ var Drawer = ({
   footer,
   style,
   ...rest
-}) => {
+}, forwardedRef) {
   const config = useTigerConfig();
   const mergedLocale = useMemo(
     () => mergeTigerLocale(config.locale, locale),
     [config.locale, locale]
   );
-  const [hasBeenOpened, setHasBeenOpened] = React.useState(open);
-  const [deferredRendered, setDeferredRendered] = React.useState(open);
+  const [hasOpened, setHasOpened] = React.useState(open);
+  const [leaving, setLeaving] = React.useState(false);
+  const wasOpenRef = useRef(open);
+  const afterEnterRef = useRef(onAfterEnter);
+  const afterCloseRef = useRef(onAfterClose);
+  afterEnterRef.current = onAfterEnter;
+  afterCloseRef.current = onAfterClose;
   useEffect(() => {
     if (open) {
-      setHasBeenOpened(true);
-      setDeferredRendered(true);
-      return;
-    }
-    if (destroyOnClose && !deferDestroyOnClose) {
-      setDeferredRendered(false);
+      setHasOpened(true);
+      setLeaving(false);
+      wasOpenRef.current = true;
+      return scheduleOverlayLeave({
+        onFinish: () => afterEnterRef.current?.()
+      });
     }
-  }, [destroyOnClose, deferDestroyOnClose, open]);
-  const shouldRender = destroyOnClose ? deferDestroyOnClose ? deferredRendered : open : hasBeenOpened;
+    if (!wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    setLeaving(true);
+    return scheduleOverlayLeave({
+      onFinish: () => {
+        setLeaving(false);
+        afterCloseRef.current?.();
+      }
+    });
+  }, [open]);
+  const shouldRender = shouldRenderOverlay({
+    open,
+    hasOpened,
+    leaving,
+    destroyOnClose
+  });
   const handleClose = useCallback(() => {
     onOpenChange?.(false);
     onClose?.();
@@ -118,71 +147,61 @@ var Drawer = ({
     [maskClosable, handleClose]
   );
   useBodyScrollLock({ enabled: open });
-  const previousVisible = useRef(false);
-  useEffect(() => {
-    if (open === previousVisible.current) return;
-    previousVisible.current = open;
-    const timer = window.setTimeout(() => {
-      if (open) {
-        onAfterEnter?.();
-      } else {
-        onAfterClose?.();
-        if (destroyOnClose && deferDestroyOnClose) {
-          setDeferredRendered(false);
-        }
-      }
-    }, ANIMATION_DURATION_MS);
-    return () => window.clearTimeout(timer);
-  }, [destroyOnClose, deferDestroyOnClose, open, onAfterEnter, onAfterClose]);
   const reactId = useId();
   const drawerId = useMemo(() => `tiger-drawer-${reactId}`, [reactId]);
   const titleId = `${drawerId}-title`;
+  const bodyId = `${drawerId}-body`;
   const overlayHostId = `${drawerId}-overlay-host`;
   const {
     ["aria-labelledby"]: _ariaLabelledby,
+    ["aria-label"]: ariaLabelFromRest,
+    ["aria-describedby"]: ariaDescribedbyFromRest,
     role: _role,
     tabIndex: _tabIndex,
     ...dialogDivProps
   } = rest;
-  const ariaLabelledby = rest["aria-labelledby"] ?? (title || header ? titleId : void 0);
+  const drawerLabels = getDrawerLabels(mergedLocale, {
+    ...labels,
+    ...closeAriaLabel ? { closeAriaLabel } : {}
+  });
+  const hasTitle = Boolean(title || header);
+  const ariaLabelledby = rest["aria-labelledby"] ?? (hasTitle ? titleId : void 0);
+  const ariaLabel = ariaLabelFromRest ?? (hasTitle ? void 0 : drawerLabels.dialogAriaLabel);
+  const ariaDescribedby = ariaDescribedbyFromRest ?? (children ? bodyId : void 0);
+  const { anchorRef, target: portalTarget } = useOverlayPortalTarget();
   const dialogRef = useRef(null);
   const rootRef = useRef(null);
   const closeButtonRef = useRef(null);
-  const previousActiveElementRef = useRef(null);
+  const bodyRef = useRef(null);
   const touchStartRef = useRef(null);
   const touchCurrentRef = useRef(null);
-  useEscapeKey({ enabled: open, onEscape: handleClose, layerRef: rootRef });
-  const resolvedCloseAriaLabel = resolveLocaleText(
-    "Close drawer",
-    closeAriaLabel,
-    labels?.closeAriaLabel,
-    mergedLocale?.drawer?.closeAriaLabel,
-    mergedLocale?.common?.closeText
+  const swipeAllowedRef = useRef(false);
+  const resolvedPlacement = resolveDrawerPlacement(
+    placement,
+    mergedLocale?.direction === "rtl" ? "rtl" : "ltr"
   );
-  useEffect(() => {
-    if (open) {
-      previousActiveElementRef.current = captureActiveElement();
-      const timer = window.setTimeout(() => {
-        focusFirst([closeButtonRef.current, dialogRef.current]);
-      }, 0);
-      return () => window.clearTimeout(timer);
-    }
-    restoreFocus(previousActiveElementRef.current);
-  }, [open]);
-  useFocusTrap({ enabled: open, containerRef: rootRef });
+  useEscapeKey({ enabled: open && keyboard, onEscape: handleClose, layerRef: rootRef });
+  const resolvedCloseAriaLabel = drawerLabels.closeAriaLabel;
+  useFocusTrap({ enabled: open, containerRef: rootRef, inert: true, autoFocus: true });
   const resetTouchGesture = useCallback(() => {
     touchStartRef.current = null;
     touchCurrentRef.current = null;
+    swipeAllowedRef.current = false;
   }, []);
   const handleTouchStart = useCallback(
     (event) => {
       dialogDivProps.onTouchStart?.(event);
       if (!open) return;
+      swipeAllowedRef.current = canStartOverlaySwipeClose({
+        target: event.target,
+        scrollContainer: bodyRef.current,
+        closeDirection: getDrawerSwipeCloseDirection(resolvedPlacement)
+      });
       const point = getGestureTouchPoint(event.touches);
       touchStartRef.current = point;
       touchCurrentRef.current = point;
     },
-    [dialogDivProps, open]
+    [dialogDivProps, open, resolvedPlacement]
   );
   const handleTouchMove = useCallback(
     (event) => {
@@ -203,12 +222,13 @@ var Drawer = ({
         getGestureTouchPoint(event.changedTouches) ?? touchCurrentRef.current,
         { minDistance: 48, minVelocity: 0.15 }
       );
+      const allowed = swipeAllowedRef.current;
       resetTouchGesture();
-      if (isDrawerSwipeCloseGesture(placement, gesture)) {
+      if (allowed && isDrawerSwipeCloseGesture(resolvedPlacement, gesture)) {
         handleClose();
       }
     },
-    [dialogDivProps, handleClose, placement, resetTouchGesture]
+    [dialogDivProps, handleClose, resolvedPlacement, resetTouchGesture]
   );
   const handleTouchCancel = useCallback(
     (event) => {
@@ -217,10 +237,10 @@ var Drawer = ({
     },
     [dialogDivProps, resetTouchGesture]
   );
-  const containerClasses = classNames(getDrawerContainerClasses(), !open && "pointer-events-none");
+  const containerClasses = getDrawerContainerClasses();
   const maskClasses = getDrawerMaskClasses(open);
   const panelClasses = classNames(
-    getDrawerPanelClasses(placement, open, size, fullscreenOnMobile),
+    getDrawerPanelClasses(resolvedPlacement, open, size, fullscreenOnMobile),
     "flex flex-col",
     className,
     panelClassName
@@ -230,17 +250,17 @@ var Drawer = ({
   const footerClasses = getDrawerFooterClasses();
   const closeButtonClasses = getDrawerCloseButtonClasses();
   const titleClasses = getDrawerTitleClasses();
+  const anchor = /* @__PURE__ */ jsx("span", { ref: anchorRef, hidden: true });
   if (!shouldRender) {
-    return null;
+    return anchor;
   }
-  const isClosingBeforeDestroy = destroyOnClose && deferDestroyOnClose && !open;
   const drawerContent = /* @__PURE__ */ jsxs(
     "div",
     {
       ref: rootRef,
       className: containerClasses,
       style: { zIndex },
-      hidden: !open && !isClosingBeforeDestroy,
+      hidden: isOverlayVisuallyHidden(open, leaving),
       "aria-hidden": !open ? "true" : void 0,
       "data-tiger-overlay-layer": "",
       "data-tiger-drawer-root": "",
@@ -262,24 +282,26 @@ var Drawer = ({
               ...panelStyle,
               ...style,
               ...width ? {
-                [placement === "left" || placement === "right" ? "width" : "height"]: typeof width === "number" ? `${width}px` : width
+                [resolvedPlacement === "left" || resolvedPlacement === "right" ? "width" : "height"]: typeof width === "number" ? `${width}px` : width
               } : void 0
             },
             ...dialogDivProps,
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": ariaLabelledby,
+            "aria-label": ariaLabel,
+            "aria-describedby": ariaDescribedby,
             "aria-owns": overlayHostId,
             tabIndex: -1,
-            ref: dialogRef,
+            ref: composeRefs(forwardedRef, dialogRef),
             onTouchStart: handleTouchStart,
             onTouchMove: handleTouchMove,
             onTouchEnd: handleTouchEnd,
             onTouchCancel: handleTouchCancel,
             "data-tiger-drawer": "",
             children: [
-              (title || header || closable) && /* @__PURE__ */ jsxs("div", { className: headerClasses, children: [
-                (title || header) && /* @__PURE__ */ jsx("h3", { className: titleClasses, id: titleId, children: header || title }),
+              (title || header || closable) && /* @__PURE__ */ jsxs("div", { className: headerClasses, ...{ [OVERLAY_SWIPE_HANDLE_ATTR]: "" }, children: [
+                header ? /* @__PURE__ */ jsx("div", { className: titleClasses, id: titleId, children: header }) : title ? /* @__PURE__ */ jsx("h3", { className: titleClasses, id: titleId, children: title }) : null,
                 closable && /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -292,7 +314,7 @@ var Drawer = ({
                   }
                 )
               ] }),
-              children && /* @__PURE__ */ jsx("div", { className: bodyClasses, children }),
+              children && /* @__PURE__ */ jsx("div", { className: bodyClasses, ref: bodyRef, id: bodyId, "data-tiger-drawer-body": "", children }),
               footer && /* @__PURE__ */ jsx("div", { className: footerClasses, children: footer })
             ]
           }
@@ -301,8 +323,11 @@ var Drawer = ({
       ]
     }
   );
-  return renderBodyPortal(drawerContent);
-};
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    anchor,
+    renderOverlayPortal(drawerContent, portalTarget)
+  ] });
+});
 
 export {
   Drawer