@procore/core-react/dist/DetailPage/DetailPage.js

React library of Procore Design Guidelines

var _excluded = ["width", "hasNavigation", "children"],
  _excluded2 = ["children"],
  _excluded3 = ["navigationLabel"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { useId } from '@react-aria/utils';
import React from 'react';
import { AnchorNavigationProvider, useAnchorNavigationContext } from '../AnchorNavigation/AnchorNavigationProvider';
import { Grid } from '../Grid/Grid';
import { Page, PageBodyNavigation } from '../PageLayout/PageLayout';
import { Section, SectionProvider } from '../Section/Section';
import { H1 } from '../Semantic/Semantic';
import { spacing } from '../_styles/spacing';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { mergeRefs } from '../_utils/mergeRefs';
import { gridConfig } from './DetailPage.constants';
import { StyledDetailPageBody, StyledDetailPageCard, StyledDetailPageFooter, StyledDetailPageFooterActions, StyledDetailPageFooterContent, StyledDetailPageFooterNotation } from './DetailPage.styles';
export var DetailPageViewContext = /*#__PURE__*/React.createContext({
  width: 'md',
  hasNavigation: false
});
var DetailPage_ = /*#__PURE__*/React.forwardRef(function DetailPage_(_ref, ref) {
  var _ref$width = _ref.width,
    width = _ref$width === void 0 ? 'md' : _ref$width,
    _ref$hasNavigation = _ref.hasNavigation,
    hasNavigation = _ref$hasNavigation === void 0 ? false : _ref$hasNavigation,
    children = _ref.children,
    props = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/React.createElement(DetailPageViewContext.Provider, {
    value: {
      width: width,
      hasNavigation: hasNavigation
    }
  }, /*#__PURE__*/React.createElement(AnchorNavigationProvider, {
    offset: spacing.xs
  }, /*#__PURE__*/React.createElement(Page, _extends({
    ref: ref
  }, props, {
    "data-core-react": "detail-page"
  }), children)));
});
export var Heading = /*#__PURE__*/React.forwardRef(function Heading(props, ref) {
  return /*#__PURE__*/React.createElement(H1, _extends({
    ref: ref
  }, props));
});
export var Body = /*#__PURE__*/React.forwardRef(function Body(props, ref) {
  var _React$useContext = React.useContext(DetailPageViewContext),
    width = _React$useContext.width,
    hasNavigation = _React$useContext.hasNavigation;
  return /*#__PURE__*/React.createElement(Page.Body, null, hasNavigation && /*#__PURE__*/React.createElement(PageBodyNavigation, null), /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement(Grid.Col, {
    colWidth: gridConfig[width].width,
    colStart: gridConfig[width].offset
  }, /*#__PURE__*/React.createElement(StyledDetailPageBody, _extends({
    ref: ref
  }, props)))));
});
export var Footer = /*#__PURE__*/React.forwardRef(function Footer(_ref2, ref) {
  var children = _ref2.children,
    props = _objectWithoutProperties(_ref2, _excluded2);
  return /*#__PURE__*/React.createElement(StyledDetailPageFooter, _extends({
    ref: ref
  }, props), /*#__PURE__*/React.createElement(StyledDetailPageFooterContent, null, children));
});
export var FooterNotation = /*#__PURE__*/React.forwardRef(function FooterNotation(props, ref) {
  return /*#__PURE__*/React.createElement(StyledDetailPageFooterNotation, _extends({
    ref: ref
  }, props));
});
export var FooterActions = /*#__PURE__*/React.forwardRef(function Actions(props, ref) {
  return /*#__PURE__*/React.createElement(StyledDetailPageFooterActions, _extends({
    ref: ref
  }, props));
});
export var Card = /*#__PURE__*/React.forwardRef(function Card(_ref3, ref) {
  var navigationLabel = _ref3.navigationLabel,
    props = _objectWithoutProperties(_ref3, _excluded3);
  var cardId = useId();
  var card = React.useRef(null);
  var _useAnchorNavigationC = useAnchorNavigationContext(),
    registerSection = _useAnchorNavigationC.registerSection,
    unregisterSection = _useAnchorNavigationC.unregisterSection;
  var id = props.id || cardId;
  React.useEffect(function () {
    var _card$current, _card$current$querySe;
    // Use content of first H2 element as label if navigationLabel is not provided
    var label = navigationLabel || ((_card$current = card.current) === null || _card$current === void 0 ? void 0 : (_card$current$querySe = _card$current.querySelector('h2')) === null || _card$current$querySe === void 0 ? void 0 : _card$current$querySe.textContent);
    if (!card.current || !label) return;
    registerSection(id, label, card.current);
    return function () {
      return unregisterSection(id);
    };
  }, [id, navigationLabel]); // eslint-disable-line react-hooks/exhaustive-deps

  return /*#__PURE__*/React.createElement(SectionProvider, null, /*#__PURE__*/React.createElement(StyledDetailPageCard, _extends({
    ref: mergeRefs(ref, card),
    id: id
  }, props)));
});
DetailPage_.displayName = 'DetailPage';
Heading.displayName = 'DetailPage.Heading';
Body.displayName = 'DetailPage.Body';
Footer.displayName = 'DetailPage.Footer';
Card.displayName = 'DetailPage.Card';

/**

 A detail page is used when an object is selected from a list page. The layout
 can adhere to varying predefined widths depending on use case.

  - DetailPage
    - DetailPage.Main
      - DetailPage.Header
        - DetailPage.Breadcrumbs
          - Breadcrumbs
        - DetailPage.Banner
          - Banner
        - DetailPage.Title
          - Title or H1
        - DetailPage.Tabs
          - Tabs
      - DetailPage.Body
        - DetailPage.Title
        - DetailPage.Banner
        - DetailPage.Card
          - DetailPage.Banner
          - DetailPage.Section
            - DetailPage.Section
          - DetailPage.Section
      - DetailPage.Footer
        - DetailPage.FooterNotation
        - DetailPage.FooterActions
          - Button
    - DetailPage.Aside
      - Panel

 @since 10.19.0

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

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

 */
export var DetailPage = addSubcomponents({
  Main: Page.Main,
  Header: Page.Header,
  Breadcrumbs: Page.Breadcrumbs,
  Card: Card,
  Banner: Page.Banner,
  Title: Page.Title,
  Heading: Heading,
  Tabs: Page.Tabs,
  Footer: Footer,
  FooterActions: FooterActions,
  FooterNotation: FooterNotation,
  Section: Section,
  Body: Body,
  Aside: Page.Aside
}, DetailPage_);
//# sourceMappingURL=DetailPage.js.map