"use strict";

exports.__esModule = true;
exports.SlidingModal = SlidingModal;
var _react = _interopRequireWildcard(require("react"));
var _SlidingModalStCss = require("./SlidingModal.st.css.js");
var _scopeTab = require("./scopeTab");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SlidingModal/SlidingModal.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function SlidingModal(props) {
  const {
    dataHook,
    className,
    style: styleProp,
    shadowWidth = 20,
    width,
    isOpen,
    children,
    contentRef,
    onExited,
    onEntered,
    onEntering,
    onExiting,
    onRequestClose,
    transitionStatus,
    appendTo,
    overlay
  } = props;
  const style = (0, _react.useMemo)(() => ({
    ...styleProp,
    transform: `translate3d(${isOpen ? 0 : typeof width === 'number' ? `${width + shadowWidth}px` : `${width}px`}, 0, 0)`
  }), [styleProp, width, isOpen]);
  const isOpenRef = (0, _react.useRef)(isOpen);
  const divRef = (0, _react.useRef)();
  (0, _react.useEffect)(() => {
    if (process.env.NODE_ENV === 'test' && isOpen) {
      onEntered == null || onEntered();
    } else {
      if (process.env.NODE_ENV === 'test' && isOpenRef.current) {
        onExited == null || onExited();
      }
    }
    isOpenRef.current = isOpen;
  }, [isOpen]);
  (0, _react.useEffect)(() => {
    const rootElement = divRef.current;
    if (!rootElement) {
      return;
    }
    const onTransitionEnd = e => {
      if (e.propertyName === 'transform') {
        isOpenRef.current ? onEntered == null ? void 0 : onEntered() : onExited == null ? void 0 : onExited();
      }
    };
    const onTransitionStart = e => {
      if (e.propertyName === 'transform') {
        isOpenRef.current ? onEntering == null ? void 0 : onEntering() : onExiting == null ? void 0 : onExiting();
      }
    };
    rootElement.addEventListener('transitionend', onTransitionEnd);
    rootElement.addEventListener('transitionstart', onTransitionStart);
    return () => {
      rootElement.removeEventListener('transitionend', onTransitionEnd);
      rootElement.removeEventListener('transitionstart', onTransitionStart);
    };
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    tabIndex: -1,
    onKeyDown: e => {
      if (e.nativeEvent.code === 'Escape') {
        onRequestClose == null || onRequestClose();
        return;
      }
      if (divRef.current && e.nativeEvent.code === 'Tab') {
        (0, _scopeTab.scopeTab)(divRef.current, e);
        return;
      }
    },
    ref: el => {
      if (el) {
        divRef.current = el;
      }
      contentRef == null || contentRef(el);
    },
    "data-hook": dataHook,
    "data-transition-status": transitionStatus,
    className: (0, _SlidingModalStCss.st)(_SlidingModalStCss.classes.root, {
      exited: transitionStatus === 'exited',
      overlay,
      appendTo
    }, ...[className, isOpen ? 'cairo-sliding-modal-is-open' : undefined]),
    role: "presentation",
    style: style,
    "aria-modal": undefined,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 109,
      columnNumber: 5
    }
  }, children);
}
//# sourceMappingURL=SlidingModal.js.map