var _excluded = ["children", "onClose", "qa"],
  _excluded2 = ["children"],
  _excluded3 = ["placement", "width"],
  _excluded4 = ["children", "noSideSpacing"],
  _excluded5 = ["children"],
  _excluded6 = ["children"],
  _excluded7 = ["aria-describedby", "aria-details", "aria-labelledby", "aria-label", "children", "howToClose", "id", "onClickOverlay", "onClose", "open", "placement", "role"],
  _excluded8 = ["children", "headline", "onClose"];
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 _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 _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; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import { Clear } from '@procore/core-icons/dist';
import { FocusScope } from '@react-aria/focus';
import React, { useEffect } from 'react';
import { Button } from '../Button/Button';
import { CloseWithConfirmContext, useCloseWithConfirmContext, useCloseWithConfirmState } from '../Form/closeWithConfirm';
import { useModalDialogLike } from '../OverlayTrigger/a11yPresets';
import { Portal } from '../Portal/Portal';
import { Heading, LevelContext, Section, SectionProvider } from '../Section/Section';
import { useDeprecation } from '../_hooks/Deprecation';
import { useLayoutEventListener } from '../_hooks/EventListener';
import { useI18nContext } from '../_hooks/I18n';
import { useOverflowObserver } from '../_hooks/OverflowObserver';
import { useScrollLock } from '../_hooks/ScrollLock';
import { Visibility } from '../_hooks/Visibility';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { mergeRefs } from '../_utils/mergeRefs';
import { ChildRegistryProvider, useModalChildRegistryDispatch } from './ChildRegistry.context';
import { fadeInClassName, fadeOutClassName, StyledModal, StyledModalBody, StyledModalButtons, StyledModalCancel, StyledModalContainer, StyledModalContent, StyledModalFooter, StyledModalFooterNotation, StyledModalFooterSummary, StyledModalHeader, StyledModalHeading, StyledModalScrim, StyledModalWarningIcon } from './Modal.styles';
import { useInitializeModalFocus } from './useInitializeModalFocus';
function noop() {}
var defaultStartLevel = 2;
var initialBodyLevel = 3;

// TODO default in breaking
var defaultHowToClose = ['scrim', 'x'];
var ModalCloseContext = /*#__PURE__*/React.createContext({
  howToClose: [],
  onClose: undefined
});
var ModalBodyScrollContext = /*#__PURE__*/React.createContext({
  isBodyScrolled: false,
  setIsBodyScrolled: noop
});
var ModalClosableHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    externalOnClose = _ref.onClose,
    qa = _ref.qa,
    props = _objectWithoutProperties(_ref, _excluded);
  var _React$useContext = React.useContext(ModalBodyScrollContext),
    isBodyScrolled = _React$useContext.isBodyScrolled;
  var _React$useContext2 = React.useContext(ModalCloseContext),
    howToClose = _React$useContext2.howToClose,
    onClose = _React$useContext2.onClose;
  var I18n = useI18nContext();
  var modalClosableHeaderRef = React.useRef(null);
  var _useCloseWithConfirmC = useCloseWithConfirmContext(),
    closeWithConfirm = _useCloseWithConfirmC.closeWithConfirm;
  var registerChildRef = useModalChildRegistryDispatch();
  useEffect(function () {
    registerChildRef({
      child: 'header',
      ref: modalClosableHeaderRef
    });
  }, []);
  function onClickButton(e) {
    if (onClose && howToClose !== null && howToClose !== void 0 && howToClose.includes('x')) {
      closeWithConfirm(onClose)(e, 'x');
      return;
    }
    closeWithConfirm(externalOnClose)(e);
  }
  return /*#__PURE__*/React.createElement(StyledModalHeader, _extends({
    $isBodyScrolled: isBodyScrolled
  }, props, {
    ref: mergeRefs(ref, modalClosableHeaderRef)
  }), /*#__PURE__*/React.createElement(StyledModalHeading, null, children), onClose && howToClose !== null && howToClose !== void 0 && howToClose.includes('x') || externalOnClose ? /*#__PURE__*/React.createElement(StyledModalCancel, null, /*#__PURE__*/React.createElement(Button, {
    "aria-label": I18n.t('core.modal.a11y.close'),
    "data-qa": qa === null || qa === void 0 ? void 0 : qa.closeButton,
    "data-internal": "close-button",
    onClick: onClickButton,
    icon: /*#__PURE__*/React.createElement(Clear, null),
    variant: "tertiary"
  })) : null);
});
var ModalClosableFooterButtons = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
  var children = _ref2.children,
    props = _objectWithoutProperties(_ref2, _excluded2);
  var _React$useContext3 = React.useContext(ModalCloseContext),
    howToClose = _React$useContext3.howToClose,
    onClose = _React$useContext3.onClose;
  var I18n = useI18nContext();
  var _useCloseWithConfirmC2 = useCloseWithConfirmContext(),
    closeWithConfirm = _useCloseWithConfirmC2.closeWithConfirm;
  var modalClosableFooterButtonsRef = React.useRef(null);
  var registerChildRef = useModalChildRegistryDispatch();
  useEffect(function () {
    registerChildRef({
      child: 'closeableButtons',
      ref: modalClosableFooterButtonsRef
    });
  }, []);
  function onClickButton(e) {
    closeWithConfirm(onClose)(e, 'footer-button');
  }
  return /*#__PURE__*/React.createElement(StyledModalButtons, _extends({}, props, {
    ref: mergeRefs(ref, modalClosableFooterButtonsRef)
  }), (howToClose === null || howToClose === void 0 ? void 0 : howToClose.includes('footer-button')) && /*#__PURE__*/React.createElement(Button, {
    onClick: onClickButton,
    variant: "tertiary"
  }, I18n.t('core.modal.cancel')), children);
});
var ModalContainer = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
  var placement = _ref3.placement,
    width = _ref3.width,
    props = _objectWithoutProperties(_ref3, _excluded3);
  var _React$useContext4 = React.useContext(ModalCloseContext),
    onClose = _React$useContext4.onClose;
  var modalContainerRef = React.useRef(null);
  useInitializeModalFocus({
    modalContainerRef: modalContainerRef,
    hasOnClose: !!onClose
  });
  return /*#__PURE__*/React.createElement(StyledModalContainer, _extends({}, props, {
    shadowStrength: 4,
    $placement: placement,
    $width: width,
    ref: mergeRefs(ref, modalContainerRef)
  }));
});
var ModalBody = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
  var children = _ref4.children,
    _ref4$noSideSpacing = _ref4.noSideSpacing,
    noSideSpacing = _ref4$noSideSpacing === void 0 ? false : _ref4$noSideSpacing,
    props = _objectWithoutProperties(_ref4, _excluded4);
  var _useOverflowObserver = useOverflowObserver(),
    isOverflowingY = _useOverflowObserver.isOverflowingY,
    overflowRef = _useOverflowObserver.ref;
  var scrollRef = React.useRef(null);
  var modalBodyRef = React.useRef(null);
  var _React$useContext5 = React.useContext(ModalBodyScrollContext),
    setIsBodyScrolled = _React$useContext5.setIsBodyScrolled;
  var registerChildRef = useModalChildRegistryDispatch();
  useEffect(function () {
    registerChildRef({
      child: 'body',
      ref: modalBodyRef
    });
  }, []);
  useLayoutEventListener({
    event: 'scroll',
    handler: function handler(e) {
      setIsBodyScrolled(e.currentTarget.scrollTop > 0);
    },
    scope: scrollRef
  });
  return /*#__PURE__*/React.createElement(SectionProvider, null, /*#__PURE__*/React.createElement(LevelContext.Provider, {
    value: initialBodyLevel
  }, /*#__PURE__*/React.createElement(StyledModalBody, _extends({}, props, {
    isOverflowingY: isOverflowingY,
    noSideSpacing: noSideSpacing,
    ref: mergeRefs(overflowRef, scrollRef, ref, modalBodyRef),
    tabIndex: 0
  }), children)));
});
var ModalFooterSummary = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
  var children = _ref5.children,
    props = _objectWithoutProperties(_ref5, _excluded5);
  return /*#__PURE__*/React.createElement(StyledModalFooterSummary, _extends({}, props, {
    ref: ref
  }), children);
});
var ModalFooterNotation = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
  var children = _ref6.children,
    props = _objectWithoutProperties(_ref6, _excluded6);
  return /*#__PURE__*/React.createElement(StyledModalFooterNotation, _extends({
    "aria-live": "polite",
    intent: "small",
    color: "gray45",
    italic: true
  }, props, {
    ref: ref
  }), children);
});

/**

 We use modals to present additional actions, information, or forms on pages
 where a user’s experience would benefit from remaining on the same page.
 They can include graphics, inputs, buttons, and other elements as needed to
 produce the workflow or action needed.

 Do not include modals on pages with complicated UI layouts.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-modal--demo)

 @see [Design Guidelines](https://design.procore.com/modal)

 */
var Modal_ = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
  var ariaDescribedby = _ref7['aria-describedby'],
    ariaDetails = _ref7['aria-details'],
    ariaLabelledby = _ref7['aria-labelledby'],
    ariaLabel = _ref7['aria-label'],
    children = _ref7.children,
    howToClose = _ref7.howToClose,
    id = _ref7.id,
    _ref7$onClickOverlay = _ref7.onClickOverlay,
    onClickOverlay = _ref7$onClickOverlay === void 0 ? noop : _ref7$onClickOverlay,
    onClose = _ref7.onClose,
    _ref7$open = _ref7.open,
    open = _ref7$open === void 0 ? false : _ref7$open,
    _ref7$placement = _ref7.placement,
    placement = _ref7$placement === void 0 ? 'center' : _ref7$placement,
    role = _ref7.role,
    props = _objectWithoutProperties(_ref7, _excluded7);
  useScrollLock(open);
  var _React$useState = React.useState(open),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    visible = _React$useState2[0],
    setVisible = _React$useState2[1];
  var _React$useState3 = React.useState(''),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    fadeType = _React$useState4[0],
    setFadeType = _React$useState4[1];
  var closeWithConfirmState = useCloseWithConfirmState();
  var closeWithConfirm = closeWithConfirmState.closeWithConfirm;
  React.useEffect(function () {
    if (open) {
      setVisible(true);
      setTimeout(function () {
        setFadeType(fadeInClassName);
      }, 0);
    } else {
      setFadeType(fadeOutClassName);
    }
  }, [open]);
  var onTransitionEnd = function onTransitionEnd() {
    if (fadeType === fadeOutClassName) {
      setVisible(false);
    }
  };
  var handleKeyDown = function handleKeyDown(e) {
    if (!onClose) return;
    if (e.key === 'Escape') {
      e.preventDefault();
      e.stopPropagation();
      closeWithConfirm(onClose)(e, 'x');
    }
  };
  var _useModalDialogLike = useModalDialogLike({
      'aria-describedby': ariaDescribedby,
      'aria-details': ariaDetails,
      'aria-labelledby': ariaLabelledby,
      'aria-label': ariaLabel,
      id: id,
      isModal: false,
      isOpen: open,
      role: role
    }),
    dialogProps_ = _useModalDialogLike.dialogProps;
  var dialogProps = onClose && role === 'dialog' ? dialogProps_ : {};
  function onClickScrim(e) {
    onClickOverlay(e);
    if (onClose && howToClose !== null && howToClose !== void 0 && howToClose.includes('scrim')) {
      closeWithConfirm(onClose)(e, 'scrim');
    }
  }
  return visible ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalCloseContext.Provider, {
    value: {
      onClose: onClose,
      howToClose: howToClose
    }
  }, /*#__PURE__*/React.createElement(LevelContext.Provider, {
    value: defaultStartLevel
  }, /*#__PURE__*/React.createElement(ChildRegistryProvider, null, /*#__PURE__*/React.createElement(FocusScope
  // TODO breaking - always
  , {
    autoFocus: !!onClose,
    contain: !!onClose,
    restoreFocus: !!onClose
  }, /*#__PURE__*/React.createElement(StyledModal, _extends({
    className: fadeType,
    ref: ref,
    onTransitionEnd: onTransitionEnd,
    onKeyDown: handleKeyDown
  }, dialogProps), /*#__PURE__*/React.createElement(StyledModalScrim, {
    onClick: onClickScrim
  }), /*#__PURE__*/React.createElement(ModalContainer, _extends({}, props, {
    placement: placement
  }), /*#__PURE__*/React.createElement(StyledModalContent, null, /*#__PURE__*/React.createElement(ModalBodyScrollObserver, null, /*#__PURE__*/React.createElement(CloseWithConfirmContext.Provider, {
    value: closeWithConfirmState
  }, children)))))))))) : null;
});
function ModalBodyScrollObserver(_ref8) {
  var children = _ref8.children;
  var _React$useState5 = React.useState(false),
    _React$useState6 = _slicedToArray(_React$useState5, 2),
    isBodyScrolled = _React$useState6[0],
    setIsBodyScrolled = _React$useState6[1];
  return /*#__PURE__*/React.createElement(ModalBodyScrollContext.Provider, {
    value: {
      isBodyScrolled: isBodyScrolled,
      setIsBodyScrolled: setIsBodyScrolled
    }
  }, children);
}
export var ConfirmModal = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
  var children = _ref9.children,
    headline = _ref9.headline,
    onClose = _ref9.onClose,
    props = _objectWithoutProperties(_ref9, _excluded8);
  return /*#__PURE__*/React.createElement(Modal, _extends({}, props, {
    ref: ref
  }), /*#__PURE__*/React.createElement(ModalClosableHeader, {
    onClose: onClose
  }, /*#__PURE__*/React.createElement(StyledModalWarningIcon, {
    size: "lg"
  }), headline), children);
});
function ModalState(props) {
  useDeprecation({
    oldThing: 'Modal.State'
  });
  return /*#__PURE__*/React.createElement(Visibility, props);
}
Modal_.displayName = 'Modal';
ConfirmModal.displayName = 'ConfirmModal';
ModalBody.displayName = 'Modal.Body';
ModalFooterNotation.displayName = 'Modal.FooterNotation';
ModalFooterSummary.displayName = 'Modal.FooterSummary';
var Body = ModalBody;
var Container = ModalContainer;
var Content = StyledModalContent;
var FooterSummary = ModalFooterSummary;
var Footer = StyledModalFooter;
var FooterButtons = ModalClosableFooterButtons;
var FooterNotation = ModalFooterNotation;
var Header = ModalClosableHeader;
var Overlay = StyledModal;
var Scrim = StyledModalScrim;
var State = ModalState;
export var Modal = addSubcomponents({
  Body: Body,
  Container: Container,
  Content: Content,
  Footer: Footer,
  FooterButtons: FooterButtons,
  FooterNotation: FooterNotation,
  FooterSummary: FooterSummary,
  Header: Header,
  Heading: Heading,
  Overlay: Overlay,
  Scrim: Scrim,
  State: State,
  Section: Section
}, Modal_);
//# sourceMappingURL=Modal.js.map