function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Button } from 'antd';
import { createPortal } from 'react-dom';
import classNames from 'classnames';
import "./index.less";
var prefixCls = 'pisell-lowcode-floating-layer';
var legacyDrawerPrefixCls = 'pisell-lowcode-drawer';
var motionDuration = 300;
var ModalButton = Button;
var overlayBaseZIndex = 600;
var overlayZIndexStep = 10;
var overlayIdSeed = 0;
var activeOverlayZIndexes = new Map();
var getNextOverlayId = function getNextOverlayId() {
  overlayIdSeed += 1;
  return overlayIdSeed;
};
var getMaxActiveOverlayZIndex = function getMaxActiveOverlayZIndex() {
  return Math.max.apply(Math, [overlayBaseZIndex].concat(_toConsumableArray(activeOverlayZIndexes.values())));
};
var acquireOverlayZIndex = function acquireOverlayZIndex(currentZIndex) {
  var maxActiveZIndex = getMaxActiveOverlayZIndex();
  return currentZIndex !== undefined && currentZIndex > maxActiveZIndex ? currentZIndex : maxActiveZIndex + overlayZIndexStep;
};
var registerOverlayZIndex = function registerOverlayZIndex(overlayId, zIndex) {
  activeOverlayZIndexes.set(overlayId, zIndex);
};
var unregisterOverlayZIndex = function unregisterOverlayZIndex(overlayId) {
  activeOverlayZIndexes.delete(overlayId);
};
var getContainer = function getContainer(container) {
  if (container === false) {
    return false;
  }
  if (typeof document === 'undefined') {
    return null;
  }
  if (!container) {
    return document.body;
  }
  if (typeof container === 'string') {
    return document.querySelector(container);
  }
  if (typeof container === 'function') {
    return container();
  }
  return container;
};
var getBodyScale = function getBodyScale() {
  if (typeof window === 'undefined' || typeof document === 'undefined') {
    return {
      x: 1,
      y: 1
    };
  }
  var transform = window.getComputedStyle(document.body).transform;
  if (!transform || transform === 'none') {
    return {
      x: 1,
      y: 1
    };
  }
  var matrix = new DOMMatrixReadOnly(transform);
  return {
    x: Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b) || 1,
    y: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d) || 1
  };
};
var getViewportSize = function getViewportSize() {
  if (typeof window === 'undefined') {
    return {
      width: 0,
      height: 0
    };
  }
  return {
    width: window.innerWidth,
    height: window.innerHeight
  };
};
var getFloatingLayoutState = function getFloatingLayoutState() {
  var isLayoutChanging = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  return {
    bodyScale: getBodyScale(),
    isLayoutChanging: isLayoutChanging,
    viewportSize: getViewportSize()
  };
};
var isSameFloatingLayout = function isSameFloatingLayout(prevLayout, nextLayout) {
  return Math.abs(prevLayout.bodyScale.x - nextLayout.bodyScale.x) < 0.001 && Math.abs(prevLayout.bodyScale.y - nextLayout.bodyScale.y) < 0.001 && prevLayout.viewportSize.width === nextLayout.viewportSize.width && prevLayout.viewportSize.height === nextLayout.viewportSize.height && prevLayout.isLayoutChanging === nextLayout.isLayoutChanging;
};
var useBodyScaleViewport = function useBodyScaleViewport() {
  var _useState = useState(function () {
      return getFloatingLayoutState(false);
    }),
    _useState2 = _slicedToArray(_useState, 2),
    layoutState = _useState2[0],
    setLayoutState = _useState2[1];
  var updateFrameRef = useRef();
  var settleTimerRef = useRef();
  useEffect(function () {
    var _window$visualViewpor;
    if (typeof window === 'undefined' || typeof document === 'undefined') {
      return undefined;
    }
    var setNextLayout = function setNextLayout(isLayoutChanging) {
      var nextLayout = getFloatingLayoutState(isLayoutChanging);
      setLayoutState(function (prevLayout) {
        return isSameFloatingLayout(prevLayout, nextLayout) ? prevLayout : nextLayout;
      });
    };
    var markLayoutSettled = function markLayoutSettled() {
      if (settleTimerRef.current) {
        window.clearTimeout(settleTimerRef.current);
      }
      settleTimerRef.current = window.setTimeout(function () {
        setNextLayout(false);
      }, motionDuration);
    };
    var scheduleScaleViewportUpdate = function scheduleScaleViewportUpdate() {
      if (updateFrameRef.current) {
        window.cancelAnimationFrame(updateFrameRef.current);
      }
      updateFrameRef.current = window.requestAnimationFrame(function () {
        updateFrameRef.current = undefined;
        setNextLayout(true);
        markLayoutSettled();
      });
    };
    setNextLayout(false);
    window.addEventListener('resize', scheduleScaleViewportUpdate);
    (_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 || _window$visualViewpor.addEventListener('resize', scheduleScaleViewportUpdate);
    var bodyObserver = new MutationObserver(scheduleScaleViewportUpdate);
    bodyObserver.observe(document.body, {
      attributes: true,
      attributeFilter: ['style', 'class']
    });
    return function () {
      var _window$visualViewpor2;
      if (updateFrameRef.current) {
        window.cancelAnimationFrame(updateFrameRef.current);
      }
      if (settleTimerRef.current) {
        window.clearTimeout(settleTimerRef.current);
      }
      window.removeEventListener('resize', scheduleScaleViewportUpdate);
      (_window$visualViewpor2 = window.visualViewport) === null || _window$visualViewpor2 === void 0 || _window$visualViewpor2.removeEventListener('resize', scheduleScaleViewportUpdate);
      bodyObserver.disconnect();
    };
  }, []);
  return layoutState;
};
var getDefaultDrawerSize = function getDefaultDrawerSize(size) {
  return size === 'large' ? 736 : 378;
};
var getWrapperStyle = function getWrapperStyle(mode, placement, size, width, height) {
  if (mode === 'drawer') {
    if (placement === 'top' || placement === 'bottom') {
      return {
        height: height || getDefaultDrawerSize(size)
      };
    }
    return {
      width: width || getDefaultDrawerSize(size)
    };
  }
  return _objectSpread({
    width: width || 520
  }, height ? {
    height: height
  } : null);
};
var getWrapperMotionStyle = function getWrapperMotionStyle(mode, placement, motionOpen, bodyScale, viewportSize) {
  var visibleStyle = {
    pointerEvents: 'auto'
  };
  var hiddenStyle = {
    pointerEvents: 'none'
  };
  if (mode === 'drawer') {
    if (motionOpen) {
      return _objectSpread(_objectSpread({}, visibleStyle), {}, {
        transform: 'translate3d(0, 0, 0)'
      });
    }
    var hiddenTransformMap = {
      bottom: 'translate3d(0, 100%, 0)',
      left: 'translate3d(-100%, 0, 0)',
      right: 'translate3d(100%, 0, 0)',
      top: 'translate3d(0, -100%, 0)'
    };
    var drawerPlacement = placement === 'center' ? 'right' : placement;
    return _objectSpread(_objectSpread({}, hiddenStyle), {}, {
      transform: hiddenTransformMap[drawerPlacement]
    });
  }
  var opacity = motionOpen ? 1 : 0;
  var modalVisibleStyle = motionOpen ? visibleStyle : hiddenStyle;
  var scaleX = bodyScale.x || 1;
  var scaleY = bodyScale.y || 1;
  var centerX = viewportSize.width / scaleX / 2;
  var centerY = viewportSize.height / scaleY / 2;
  var gapX = 24 / scaleX;
  var gapY = 24 / scaleY;
  var centeredTransform = "translate3d(calc(".concat(centerX, "px - 50%), calc(").concat(centerY, "px - 50%), 0) scale(1)");
  switch (placement) {
    case 'top':
      return _objectSpread(_objectSpread({}, modalVisibleStyle), {}, {
        opacity: opacity,
        transform: motionOpen ? centeredTransform : "translate3d(calc(".concat(centerX, "px - 50%), calc(-100% - ").concat(gapY, "px), 0) scale(1)")
      });
    case 'bottom':
      return _objectSpread(_objectSpread({}, modalVisibleStyle), {}, {
        opacity: opacity,
        transform: motionOpen ? centeredTransform : "translate3d(calc(".concat(centerX, "px - 50%), ").concat((viewportSize.height + 24) / scaleY, "px, 0) scale(1)")
      });
    case 'left':
      return _objectSpread(_objectSpread({}, modalVisibleStyle), {}, {
        opacity: opacity,
        transform: motionOpen ? centeredTransform : "translate3d(calc(-100% - ".concat(gapX, "px), calc(").concat(centerY, "px - 50%), 0) scale(1)")
      });
    case 'right':
      return _objectSpread(_objectSpread({}, modalVisibleStyle), {}, {
        opacity: opacity,
        transform: motionOpen ? centeredTransform : "translate3d(".concat((viewportSize.width + 24) / scaleX, "px, calc(").concat(centerY, "px - 50%), 0) scale(1)")
      });
    case 'center':
    default:
      return _objectSpread(_objectSpread({}, modalVisibleStyle), {}, {
        opacity: opacity,
        transform: motionOpen ? centeredTransform : "translate3d(calc(".concat(centerX, "px - 50%), ").concat((viewportSize.height + 24) / scaleY, "px, 0) scale(1)")
      });
  }
};
var hasHeader = function hasHeader(props) {
  if (props.header === false) {
    return false;
  }
  return Boolean(props.title || props.extra) || props.closable !== false && props.closeIcon !== false;
};
var getLegacyDrawerRootClasses = function getLegacyDrawerRootClasses(mode, placement) {
  if (mode !== 'drawer') {
    return null;
  }
  return classNames("".concat(legacyDrawerPrefixCls, "-root"), "".concat(legacyDrawerPrefixCls, "-").concat(placement));
};
var getLegacyDrawerWrapperClasses = function getLegacyDrawerWrapperClasses(mode) {
  if (mode !== 'drawer') {
    return null;
  }
  return "".concat(legacyDrawerPrefixCls, "-content-wrapper");
};
var getLegacyDrawerClass = function getLegacyDrawerClass(mode, suffix) {
  return mode === 'drawer' ? "".concat(legacyDrawerPrefixCls, "-").concat(suffix) : null;
};
var getLegacyModalClass = function getLegacyModalClass(mode, suffix) {
  return mode === 'modal' ? "pisell-lowcode-modal-".concat(suffix) : null;
};
var TransformFloatingLayer = function TransformFloatingLayer(props) {
  var _ref;
  var afterOpenChange = props.afterOpenChange,
    bodyStyle = props.bodyStyle,
    cancelButtonProps = props.cancelButtonProps,
    _props$cancelText = props.cancelText,
    cancelText = _props$cancelText === void 0 ? 'Cancel' : _props$cancelText,
    centered = props.centered,
    children = props.children,
    className = props.className,
    layerClassNames = props.classNames,
    closeIcon = props.closeIcon,
    _props$closable = props.closable,
    closable = _props$closable === void 0 ? true : _props$closable,
    confirmLoading = props.confirmLoading,
    contentWrapperStyle = props.contentWrapperStyle,
    destroyOnClose = props.destroyOnClose,
    extra = props.extra,
    footer = props.footer,
    footerStyle = props.footerStyle,
    customGetContainer = props.getContainer,
    headerStyle = props.headerStyle,
    height = props.height,
    _props$keyboard = props.keyboard,
    keyboard = _props$keyboard === void 0 ? true : _props$keyboard,
    _props$mask = props.mask,
    mask = _props$mask === void 0 ? true : _props$mask,
    _props$maskClosable = props.maskClosable,
    maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
    _props$mode = props.mode,
    mode = _props$mode === void 0 ? 'drawer' : _props$mode,
    modalRender = props.modalRender,
    okButtonProps = props.okButtonProps,
    _props$okText = props.okText,
    okText = _props$okText === void 0 ? 'OK' : _props$okText,
    onCancel = props.onCancel,
    onClose = props.onClose,
    onOk = props.onOk,
    open = props.open,
    rawPlacement = props.placement,
    rootClassName = props.rootClassName,
    rootStyle = props.rootStyle,
    size = props.size,
    style = props.style,
    styles = props.styles,
    title = props.title,
    visible = props.visible,
    width = props.width,
    wrapClassName = props.wrapClassName,
    zIndex = props.zIndex;
  var placement = rawPlacement || (mode === 'modal' ? 'bottom' : 'right');
  var mergedOpen = Boolean(open !== null && open !== void 0 ? open : visible);
  var showCloseButton = closable && closeIcon !== false;
  var shouldDestroyOnClose = Boolean(destroyOnClose);
  var _useState3 = useState(mergedOpen),
    _useState4 = _slicedToArray(_useState3, 2),
    rendered = _useState4[0],
    setRendered = _useState4[1];
  var _useState5 = useState(mergedOpen),
    _useState6 = _slicedToArray(_useState5, 2),
    motionOpen = _useState6[0],
    setMotionOpen = _useState6[1];
  var shouldRenderLayer = rendered || mergedOpen;
  var effectiveMotionOpen = motionOpen;
  var _useBodyScaleViewport = useBodyScaleViewport(),
    bodyScale = _useBodyScaleViewport.bodyScale,
    isLayoutChanging = _useBodyScaleViewport.isLayoutChanging,
    viewportSize = _useBodyScaleViewport.viewportSize;
  var overlayIdRef = useRef();
  var autoZIndexRef = useRef();
  var autoZIndexActiveRef = useRef(false);
  var mountedRef = useRef(false);
  var renderedRef = useRef(mergedOpen);
  var motionFrameRef = useRef();
  var motionTimerRef = useRef();
  if (overlayIdRef.current === undefined) {
    overlayIdRef.current = getNextOverlayId();
  }
  var overlayId = overlayIdRef.current;
  var releaseAutoZIndex = function releaseAutoZIndex() {
    if (autoZIndexActiveRef.current) {
      unregisterOverlayZIndex(overlayId);
      autoZIndexActiveRef.current = false;
    }
  };
  if (zIndex !== undefined) {
    releaseAutoZIndex();
  } else if (mergedOpen && !autoZIndexActiveRef.current) {
    autoZIndexRef.current = acquireOverlayZIndex(autoZIndexRef.current);
    registerOverlayZIndex(overlayId, autoZIndexRef.current);
    autoZIndexActiveRef.current = true;
  }
  var mergedZIndex = (_ref = zIndex !== null && zIndex !== void 0 ? zIndex : autoZIndexRef.current) !== null && _ref !== void 0 ? _ref : overlayBaseZIndex;
  var updateRendered = function updateRendered(nextRendered) {
    renderedRef.current = nextRendered;
    setRendered(nextRendered);
  };
  var handleClose = function handleClose(event) {
    var closeHandler = mode === 'modal' ? onCancel || onClose : onClose || onCancel;
    closeHandler === null || closeHandler === void 0 || closeHandler(event);
  };
  useEffect(function () {
    return function () {
      if (motionFrameRef.current) {
        window.cancelAnimationFrame(motionFrameRef.current);
      }
      if (motionTimerRef.current) {
        window.clearTimeout(motionTimerRef.current);
      }
      releaseAutoZIndex();
    };
  }, []);
  useEffect(function () {
    if (typeof window === 'undefined') {
      return undefined;
    }
    if (motionFrameRef.current) {
      window.cancelAnimationFrame(motionFrameRef.current);
    }
    if (motionTimerRef.current) {
      window.clearTimeout(motionTimerRef.current);
    }
    if (mergedOpen) {
      if (renderedRef.current) {
        setMotionOpen(true);
      } else {
        updateRendered(true);
        setMotionOpen(false);
        motionFrameRef.current = window.requestAnimationFrame(function () {
          setMotionOpen(true);
        });
      }
    } else {
      setMotionOpen(false);
    }
    if (!mountedRef.current) {
      mountedRef.current = true;
      return undefined;
    }
    motionTimerRef.current = window.setTimeout(function () {
      afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(mergedOpen);
      if (!mergedOpen) {
        releaseAutoZIndex();
        if (shouldDestroyOnClose) {
          updateRendered(false);
        }
      }
    }, motionDuration);
    return undefined;
  }, [afterOpenChange, mergedOpen, shouldDestroyOnClose]);
  useEffect(function () {
    if (!mergedOpen || keyboard === false || typeof window === 'undefined') {
      return undefined;
    }
    var handleKeyDown = function handleKeyDown(event) {
      if (event.key === 'Escape') {
        handleClose(event);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return function () {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [keyboard, mergedOpen, onCancel, onClose]);
  var wrapperStyle = useMemo(function () {
    var scaleX = bodyScale.x || 1;
    var modalScaleStyle = mode === 'modal' ? {
      maxWidth: Math.max((viewportSize.width - 48) / scaleX, 0)
    } : null;
    var layoutChangingStyle = mode === 'modal' && isLayoutChanging ? {
      transition: 'none'
    } : null;
    return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getWrapperStyle(mode, placement, size, width, height)), modalScaleStyle), style), contentWrapperStyle), styles === null || styles === void 0 ? void 0 : styles.wrapper), getWrapperMotionStyle(mode, placement, effectiveMotionOpen, bodyScale, viewportSize)), layoutChangingStyle);
  }, [bodyScale, contentWrapperStyle, effectiveMotionOpen, height, isLayoutChanging, mode, placement, size, style, styles === null || styles === void 0 ? void 0 : styles.wrapper, viewportSize, width]);
  var maskStyle = useMemo(function () {
    return _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.mask), {}, {
      opacity: effectiveMotionOpen ? 1 : 0,
      pointerEvents: effectiveMotionOpen ? 'auto' : 'none'
    });
  }, [effectiveMotionOpen, styles === null || styles === void 0 ? void 0 : styles.mask]);
  var rootScaleStyle = useMemo(function () {
    var scaleX = bodyScale.x || 1;
    var scaleY = bodyScale.y || 1;
    if (scaleX === 1 && scaleY === 1) {
      return {};
    }
    return {
      width: viewportSize.width / scaleX,
      height: viewportSize.height / scaleY
    };
  }, [bodyScale, viewportSize]);
  var defaultFooter = mode === 'modal' && footer === undefined ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-default-footer")
  }, /*#__PURE__*/React.createElement(ModalButton, _extends({}, cancelButtonProps, {
    onClick: function onClick(event) {
      return handleClose(event);
    }
  }), cancelText), /*#__PURE__*/React.createElement(ModalButton, _extends({}, okButtonProps, {
    type: "primary",
    loading: confirmLoading,
    onClick: onOk
  }), okText)) : null;
  var footerNode = footer === undefined ? mode === 'modal' ? defaultFooter : null : footer;
  var shouldRenderFooter = footerNode !== undefined && footerNode !== null && footerNode !== false;
  var contentNode = /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-content"), getLegacyDrawerClass(mode, 'content'), getLegacyModalClass(mode, 'content'), layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.content),
    style: styles === null || styles === void 0 ? void 0 : styles.content,
    role: "dialog",
    "aria-modal": mask || undefined
  }, hasHeader(props) ? /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-header"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-header-with-close"), showCloseButton), "".concat(prefixCls, "-header-without-close"), !showCloseButton), layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.header),
    style: _objectSpread(_objectSpread({}, headerStyle), styles === null || styles === void 0 ? void 0 : styles.header)
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-header-title")
  }, Boolean(title) ? /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-title"), layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.title)
  }, title) : null), extra ? /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-extra"), layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.extra)
  }, extra) : null, showCloseButton ? /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: classNames("".concat(prefixCls, "-close"), layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.close),
    "aria-label": "Close",
    onClick: function onClick(event) {
      return handleClose(event);
    }
  }, closeIcon === undefined ? /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-close-icon"),
    "aria-hidden": "true"
  }) : closeIcon) : null) : null, /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-body"), getLegacyDrawerClass(mode, 'body'), getLegacyModalClass(mode, 'body'), layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.body),
    style: _objectSpread(_objectSpread({}, bodyStyle), styles === null || styles === void 0 ? void 0 : styles.body)
  }, children), shouldRenderFooter ? /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-footer"), getLegacyDrawerClass(mode, 'footer'), getLegacyModalClass(mode, 'footer'), layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.footer),
    style: _objectSpread(_objectSpread({}, footerStyle), styles === null || styles === void 0 ? void 0 : styles.footer)
  }, footerNode) : null);
  var layerNode = shouldRenderLayer ? /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-root"), "".concat(prefixCls, "-mode-").concat(mode), "".concat(prefixCls, "-").concat(centered && mode === 'modal' ? 'center' : placement), getLegacyDrawerRootClasses(mode, placement), rootClassName, wrapClassName, layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.root),
    style: _objectSpread(_objectSpread(_objectSpread({
      zIndex: mergedZIndex
    }, rootScaleStyle), rootStyle), styles === null || styles === void 0 ? void 0 : styles.root)
  }, mask ? /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-mask"), getLegacyDrawerClass(mode, 'mask'), layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.mask),
    style: maskStyle,
    onClick: function onClick(event) {
      if (event.target === event.currentTarget && maskClosable) {
        handleClose(event);
      }
    }
  }) : null, /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-content-wrapper"), getLegacyDrawerWrapperClasses(mode), className, layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.wrapper),
    style: wrapperStyle
  }, modalRender ? modalRender(contentNode) : contentNode)) : null;
  if (!layerNode) {
    return null;
  }
  var portalContainer = getContainer(customGetContainer);
  if (portalContainer === false || !portalContainer) {
    return layerNode;
  }
  return /*#__PURE__*/createPortal(layerNode, portalContainer);
};
export default TransformFloatingLayer;