var _excluded = ["title", "children", "variant"],
  _excluded2 = ["children", "qa"],
  _excluded3 = ["children", "qa"],
  _excluded4 = ["children", "onClickBack", "onClose"],
  _excluded5 = ["children"],
  _excluded6 = ["children"],
  _excluded7 = ["children"],
  _excluded8 = ["children"],
  _excluded9 = ["children"];
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 { ChevronLeft, Clear, EllipsisVertical } from '@procore/core-icons/dist';
import React from 'react';
import { Button } from '../Button/Button';
import { Menu } from '../Menu/Menu';
import { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger';
import { LevelContext, Section, SectionProvider } from '../Section/Section';
import { Tooltip } from '../Tooltip/Tooltip';
import { useI18nContext } from '../_hooks/I18n';
import { useOverflowObserver } from '../_hooks/OverflowObserver';
import { useResize } from '../_hooks/Resize';
import { useScroll } from '../_hooks/Scroll';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { isReactElement } from '../_utils/isReactElement';
import { mergeRefs } from '../_utils/mergeRefs';
import { partition } from '../_utils/partition';
import { StyledBody, StyledCloseButton, StyledFooter, StyledFooterActions, StyledFooterNotation, StyledHeader, StyledHeaderActions, StyledHeaderBackAction, StyledMoreMenu, StyledPanel, StyledTitle } from './Panel.styles';
var PanelContext = /*#__PURE__*/React.createContext({
  isFooterSticky: false,
  setIsFooterSticky: function setIsFooterSticky() {}
});
var maxVisibleIcons = 3;
var HeaderAction = /*#__PURE__*/React.forwardRef(function HeaderAction(_ref, ref) {
  var title = _ref.title,
    children = _ref.children,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'tertiary' : _ref$variant,
    props = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/React.createElement(Tooltip, {
    overlay: title,
    ref: ref
  }, /*#__PURE__*/React.createElement(Button, _extends({}, props, {
    variant: variant
  }), children));
});
var MoreMenu = /*#__PURE__*/React.forwardRef(function MoreMenu(_ref2, ref) {
  var children = _ref2.children;
  return /*#__PURE__*/React.createElement(StyledMoreMenu, {
    ref: ref
  }, /*#__PURE__*/React.createElement(Menu, {
    ref: function ref(node) {
      return node === null || node === void 0 ? void 0 : node.focus();
    }
  }, /*#__PURE__*/React.createElement(Menu.Options, null, React.Children.map(children, function (child) {
    if (isReactElement(child)) {
      return /*#__PURE__*/React.createElement(Menu.Item, {
        item: null,
        key: child.props.title,
        onClick: child.props.onClick
      }, child.props.title);
    }
  }))));
});
export var MoreIcon = function MoreIcon(_ref3) {
  var children = _ref3.children,
    qa = _ref3.qa;
  return /*#__PURE__*/React.createElement(OverlayTrigger, {
    trigger: "click",
    placement: "bottom-right",
    overlay: /*#__PURE__*/React.createElement(MoreMenu, null, children)
  }, /*#__PURE__*/React.createElement(Button, {
    "data-qa": qa === null || qa === void 0 ? void 0 : qa.moreIcon,
    variant: "tertiary",
    icon: /*#__PURE__*/React.createElement(EllipsisVertical, null)
  }));
};
var HeaderActions = /*#__PURE__*/React.forwardRef(function HeaderActions(_ref4, ref) {
  var children = _ref4.children,
    qa = _ref4.qa,
    props = _objectWithoutProperties(_ref4, _excluded2);
  var iconsAmount = React.Children.count(children);
  var _ref5 = iconsAmount > maxVisibleIcons ? partition(function (_, index) {
      return index > iconsAmount - maxVisibleIcons;
    }, React.Children.toArray(children)) : [children, []],
    _ref6 = _slicedToArray(_ref5, 2),
    visibleIcons = _ref6[0],
    hiddenIcons = _ref6[1];
  return /*#__PURE__*/React.createElement(StyledHeaderActions, _extends({}, props, {
    ref: ref
  }), visibleIcons, hiddenIcons.length > 0 && /*#__PURE__*/React.createElement(MoreIcon, {
    qa: qa
  }, hiddenIcons));
});
export var TitleTooltip = function TitleTooltip(_ref7) {
  var children = _ref7.children,
    overlay = _ref7.overlay,
    isVisible = _ref7.isVisible;
  if (!isVisible) {
    return children;
  }
  return /*#__PURE__*/React.createElement(Tooltip, {
    trigger: "hover",
    overlay: /*#__PURE__*/React.createElement(Tooltip.Content, null, overlay),
    placement: "bottom"
  }, children);
};
var Title = /*#__PURE__*/React.forwardRef(function Title(_ref8, ref) {
  var children = _ref8.children,
    qa = _ref8.qa,
    props = _objectWithoutProperties(_ref8, _excluded3);
  var _useOverflowObserver = useOverflowObserver(),
    isOverflowingX = _useOverflowObserver.isOverflowingX,
    overflowRef = _useOverflowObserver.ref;
  return /*#__PURE__*/React.createElement(TitleTooltip, {
    isVisible: isOverflowingX,
    overlay: children
  }, /*#__PURE__*/React.createElement(StyledTitle, _extends({}, props, {
    ref: mergeRefs(overflowRef, ref),
    intent: "h2",
    "data-qa": qa === null || qa === void 0 ? void 0 : qa.title
  }), children));
});
var Header = /*#__PURE__*/React.forwardRef(function Header(_ref9, ref) {
  var children = _ref9.children,
    onClickBack = _ref9.onClickBack,
    onClose = _ref9.onClose,
    props = _objectWithoutProperties(_ref9, _excluded4);
  var I18n = useI18nContext();
  return /*#__PURE__*/React.createElement(StyledHeader, _extends({}, props, {
    ref: ref
  }), /*#__PURE__*/React.createElement(StyledHeaderBackAction, {
    active: onClickBack !== undefined
  }, /*#__PURE__*/React.createElement(Button, {
    "aria-label": I18n.t('core.panel.goBack'),
    variant: "tertiary",
    onClick: onClickBack,
    icon: /*#__PURE__*/React.createElement(ChevronLeft, null)
  })), children, typeof onClose === 'function' && /*#__PURE__*/React.createElement(StyledCloseButton, null, /*#__PURE__*/React.createElement(HeaderAction, {
    title: I18n.t('core.panel.close'),
    icon: /*#__PURE__*/React.createElement(Clear, null),
    onClick: onClose
  })));
});
var Body = /*#__PURE__*/React.forwardRef(function Body(_ref10, ref) {
  var children = _ref10.children,
    props = _objectWithoutProperties(_ref10, _excluded5);
  var bodyRef = React.useRef(null);
  var _React$useContext = React.useContext(PanelContext),
    setIsFooterSticky = _React$useContext.setIsFooterSticky;
  function calculateBodyScroll() {
    if (!bodyRef.current) {
      return;
    }
    var isScrollable = bodyRef.current.scrollHeight > bodyRef.current.clientHeight;
    if (isScrollable) {
      var isNotScrolledToBottom = bodyRef.current.scrollTop + bodyRef.current.clientHeight < bodyRef.current.scrollHeight;
      setIsFooterSticky(isNotScrolledToBottom);
    } else {
      setIsFooterSticky(false);
    }
  }
  React.useLayoutEffect(function () {
    // allow browsers to recalculate the layout
    setTimeout(function () {
      calculateBodyScroll();
    }, 0);
  }, []);
  useScroll({
    onScroll: calculateBodyScroll,
    scope: bodyRef
  });
  useResize({
    onResize: calculateBodyScroll
  });
  return /*#__PURE__*/React.createElement(SectionProvider, null, /*#__PURE__*/React.createElement(LevelContext.Provider, {
    value: 3
  }, /*#__PURE__*/React.createElement(StyledBody, _extends({}, props, {
    ref: mergeRefs(ref, bodyRef, calculateBodyScroll)
  }), children)));
});
var FooterNotation = /*#__PURE__*/React.forwardRef(function FooterNotation(_ref11, ref) {
  var children = _ref11.children,
    props = _objectWithoutProperties(_ref11, _excluded6);
  return /*#__PURE__*/React.createElement(StyledFooterNotation, _extends({}, props, {
    ref: ref
  }), children);
});
var FooterActions = /*#__PURE__*/React.forwardRef(function FooterActions(_ref12, ref) {
  var children = _ref12.children,
    props = _objectWithoutProperties(_ref12, _excluded7);
  return /*#__PURE__*/React.createElement(StyledFooterActions, _extends({}, props, {
    ref: ref
  }), children);
});
var Footer = /*#__PURE__*/React.forwardRef(function Footer(_ref13, ref) {
  var children = _ref13.children,
    props = _objectWithoutProperties(_ref13, _excluded8);
  var _React$useContext2 = React.useContext(PanelContext),
    isFooterSticky = _React$useContext2.isFooterSticky;
  return /*#__PURE__*/React.createElement(StyledFooter, _extends({}, props, {
    ref: ref,
    $hasShadow: isFooterSticky
  }), children);
});
var Panel_ = /*#__PURE__*/React.forwardRef(function Panel(_ref14, ref) {
  var children = _ref14.children,
    props = _objectWithoutProperties(_ref14, _excluded9);
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isFooterSticky = _React$useState2[0],
    setIsFooterSticky = _React$useState2[1];
  return /*#__PURE__*/React.createElement(PanelContext.Provider, {
    value: {
      setIsFooterSticky: setIsFooterSticky,
      isFooterSticky: isFooterSticky
    }
  }, /*#__PURE__*/React.createElement(StyledPanel, _extends({}, props, {
    ref: ref
  }), children));
});
Panel_.displayName = 'Panel';
Body.displayName = 'Panel.Body';
Footer.displayName = 'Panel.Footer';
FooterActions.displayName = 'Panel.FooterActions';
FooterNotation.displayName = 'Panel.FooterNotation';
Header.displayName = 'Panel.Header';
HeaderAction.displayName = 'Panel.HeaderAction';
HeaderActions.displayName = 'Panel.HeaderActions';
Title.displayName = 'Panel.Title';

/**

 Panels help users complete tasks or view additional information alongside the
 main content of a page.

 Panels are often initiated by clicking on an item somewhere on the main page,
 and they often contain additional information or options specific to that item.

 @since 10.19.0

 @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-panel--demo)

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

 */
export var Panel = addSubcomponents({
  Body: Body,
  Footer: Footer,
  FooterActions: FooterActions,
  FooterNotation: FooterNotation,
  Header: Header,
  HeaderAction: HeaderAction,
  HeaderActions: HeaderActions,
  Section: Section,
  Title: Title
}, Panel_);
//# sourceMappingURL=Panel.js.map