@elliemae/ds-page-header 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/v1/PageHeaderImpl.js

@@ -0,0 +1,121 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'react';
+import { isFunction } from '@elliemae/ds-utilities';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { ChevronLeft } from '@elliemae/ds-icons';
+import DSBreadcrumb from '@elliemae/ds-breadcrumb';
+import { DSIconSizes } from '@elliemae/ds-icon';
+import EditableTitle from './EditableTitle.js';
+import Title from './Title.js';
+import DropdownTitle from './DropdownTitle.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const blockName = 'page-header';
+const PageHeaderContainer = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    withBottomSeparator,
+    subtitle
+  } = _ref;
+  return {
+    'with-bottom-separator': withBottomSeparator,
+    'with-subtitle': subtitle
+  };
+});
+const PageHeaderMainSection = aggregatedClasses('div')("".concat(blockName, "-main-section"));
+const PageHeaderTitleSection = aggregatedClasses('div')("".concat(blockName, "-title-section"));
+const PageHeaderToolbar = aggregatedClasses('div')("".concat(blockName, "-toolbar"), null, () => ({
+  'ie-flex-basis-auto': true
+}));
+const PageHeaderBreadcrumb = aggregatedClasses(DSBreadcrumb)("".concat(blockName, "-breadcrumb"));
+const PageHeaderTitle = aggregatedClasses('div')("".concat(blockName, "-title"));
+const Subtitle = aggregatedClasses('div')("".concat(blockName, "-title"), 'subtitle');
+const BackArrow = aggregatedClasses(ChevronLeft)("".concat(blockName, "-backarrow"));
+
+function HeaderTitle(_ref2) {
+  let {
+    title = '',
+    options = [],
+    optionsMinWidth,
+    onSelectOption = () => null,
+    selection,
+    subtitle = '',
+    editable = false,
+    editing = false,
+    titleInputProps,
+    zIndex
+  } = _ref2;
+  const titleComponent = editable ? /*#__PURE__*/_jsx(EditableTitle, {
+    editing: editing,
+    titleInputProps: titleInputProps
+  }, void 0, title) : /*#__PURE__*/_jsx(Title, {}, void 0, title);
+  return /*#__PURE__*/_jsx(PageHeaderTitle, {}, void 0, options.length ? /*#__PURE__*/_jsx(DropdownTitle, {
+    onSelectOption: onSelectOption,
+    options: options,
+    optionsMinWidth: optionsMinWidth,
+    selection: selection,
+    titleComponent: titleComponent,
+    zIndex: zIndex
+  }) : titleComponent, subtitle && /*#__PURE__*/_jsx(Subtitle, {}, void 0, subtitle));
+}
+
+function PageHeaderImpl(_ref3) {
+  let {
+    containerProps,
+    className,
+    title,
+    titleOptions,
+    renderToolbar,
+    breadcrumbs = [],
+    previousPage,
+    onGoToPreviousPage = () => null,
+    subtitle = '',
+    withBottomSeparator,
+    onSelectOption,
+    optionsSelection,
+    optionsMinWidth,
+    editable = false,
+    titleInputProps,
+    editing = undefined,
+    zIndex
+  } = _ref3;
+  const hasBreadcrumbs = !!breadcrumbs.length;
+  return /*#__PURE__*/jsxs(PageHeaderContainer, _objectSpread(_objectSpread({}, containerProps), {}, {
+    className: className,
+    classProps: {
+      withBottomSeparator,
+      subtitle
+    },
+    children: [previousPage && /*#__PURE__*/_jsx(BackArrow, {
+      "data-testid": "back-arrow",
+      onClick: onGoToPreviousPage,
+      size: DSIconSizes.M
+    }), /*#__PURE__*/_jsx(PageHeaderMainSection, {}, void 0, hasBreadcrumbs && /*#__PURE__*/_jsx(PageHeaderBreadcrumb, {}, void 0, breadcrumbs.map(breadcrumb => /*#__PURE__*/jsx(DSBreadcrumb.Item, _objectSpread({}, breadcrumb), breadcrumb.label))), previousPage && /*#__PURE__*/_jsx(PageHeaderBreadcrumb, {}, void 0, /*#__PURE__*/jsx(DSBreadcrumb.Item, _objectSpread({
+      label: previousPage.title,
+      onClick: previousPage.onClick
+    }, previousPage), previousPage.id)), /*#__PURE__*/_jsx(PageHeaderTitleSection, {}, void 0, /*#__PURE__*/_jsx(HeaderTitle, {
+      editable: editable,
+      editing: editing,
+      onSelectOption: onSelectOption,
+      options: titleOptions,
+      optionsMinWidth: optionsMinWidth,
+      selection: optionsSelection,
+      subtitle: subtitle,
+      title: title,
+      titleInputProps: titleInputProps,
+      zIndex: zIndex
+    }), isFunction(renderToolbar) && /*#__PURE__*/_jsx(PageHeaderToolbar, {}, void 0, renderToolbar())))]
+  }));
+}
+
+export { PageHeaderImpl as default };

package/esm/v1/Title.js

@@ -0,0 +1,18 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+
+const blockName = 'page-header';
+const TitleWrapper = aggregatedClasses(DSTruncatedTooltipText)("".concat(blockName, "-title"), 'title');
+
+const Title = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(TitleWrapper, {
+    value: children
+  });
+};
+
+export { Title as default };

package/esm/v1/TitleWrapper.js

@@ -0,0 +1,6 @@
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+
+const blockName = 'page-header';
+var TitleWrapper = aggregatedClasses('span')("".concat(blockName, "-title-wrapper"));
+
+export { TitleWrapper as default };

package/esm/v2/PageHeader.js

@@ -0,0 +1,75 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import { compact } from 'lodash';
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+export { PageHeaderTitle } from './components/PageHeaderTitle/PageHeaderTitle.js';
+export { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle/PageHeaderEditableTitle.js';
+export { PageHeaderSummary } from './components/PageHeaderSummary/PageHeaderSummary.js';
+import { PageHeaderMenu } from './components/PageHeaderMenu/PageHeaderMenu.js';
+export { PageHeaderMenu } from './components/PageHeaderMenu/PageHeaderMenu.js';
+import { PageHeaderToolbar } from './components/PageHeaderToolbar/PageHeaderToolbar.js';
+import { PageHeaderBack } from './components/PageHeaderBack/PageHeaderBack.js';
+import './components/blocks.js';
+import { navProps, defaultProps } from './props.js';
+import { jsx } from 'react/jsx-runtime';
+import { cssPrefix } from '@elliemae/ds-classnames';
+
+var _div;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const PageHeaderCustomRenderer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-ps4m9w-0"
+})(["width:auto;color:", ";font-style:italic;font-size:0.8rem;"], props => props.theme.colors.brand[800]);
+const Container = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-ps4m9w-1"
+})(["width:100%;margin-bottom:8px;"]);
+const ContainerWBorder = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-ps4m9w-2"
+})(["width:100%;padding:12px 0 8px 0;display:grid;align-items:center;height:100%;", ""], props => !props.withBottomSeparator ? '' : "border-bottom: solid 1px ".concat(props.theme.colors.neutral[400], ";"));
+
+const DSPageHeaderV2 = _ref => {
+  let {
+    containerProps,
+    breadcrumbs,
+    pageTitle,
+    backarrow,
+    summary,
+    toolbar,
+    menu,
+    withBottomSeparator
+  } = _ref;
+  const wrapperRow = ['auto', 1];
+  const mainRow = compact([1, 'auto']);
+  const pageTitleRow = compact(['auto', menu && '30px', summary && 'auto', 1]);
+  return /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
+    children: /*#__PURE__*/_jsx(ContainerWBorder, {
+      withBottomSeparator: withBottomSeparator
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      cols: wrapperRow
+    }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(PageHeaderBack, {}, void 0, backarrow)), /*#__PURE__*/_jsx(Grid, {
+      rows: ['auto', 'auto']
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      className: "".concat(cssPrefix, "-page-header-v2-breadcrumb")
+    }, void 0, breadcrumbs), /*#__PURE__*/_jsx(Grid, {
+      cols: mainRow
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      cols: pageTitleRow
+    }, void 0, pageTitle, menu && /*#__PURE__*/_jsx(PageHeaderMenu, {}, void 0, menu), summary, _div || (_div = /*#__PURE__*/_jsx("div", {}))), /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(PageHeaderToolbar, {}, void 0, toolbar))))))
+  }));
+};
+
+DSPageHeaderV2.defaultProps = defaultProps;
+const DSPageHeaderWithSchema = describe(DSPageHeaderV2);
+DSPageHeaderWithSchema.propTypes = navProps;
+
+export { DSPageHeaderV2, DSPageHeaderWithSchema, PageHeaderCustomRenderer, DSPageHeaderV2 as default };

package/esm/v2/components/PageHeaderBack/PageHeaderBack.js

@@ -0,0 +1,28 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { PageHeaderBackWrapper } from '../blocks.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const PageHeaderBack = _ref => {
+  let {
+    children
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(PageHeaderBackWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    children: children
+  }));
+};
+
+export { PageHeaderBack };

package/esm/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js

@@ -0,0 +1,108 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useState, useRef } from 'react';
+import { noop } from 'lodash';
+import styled from 'styled-components';
+import { PropTypes, describe } from 'react-desc';
+import { useDerivedStateFromProps, useMeasure } from '@elliemae/ds-utilities';
+import { EditableTitleComponent } from '../blocks.js';
+import { PageHeaderTitle } from '../PageHeaderTitle/PageHeaderTitle.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["children", "editing", "onBlur", "onChange", "onFocus", "onMouseOut", "showMarker"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const EditableContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-v0pkny-0"
+})(["height:32px;position:relative;overflow:hidden;"]);
+const PageHeaderEditableTitle = _ref => {
+  let {
+    children: value,
+    editing: editingProp = false,
+    onBlur = noop,
+    onChange = noop,
+    onFocus = noop,
+    onMouseOut = noop,
+    showMarker = false
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const [titleValue, setTitleValue] = useState(value);
+  const [hovered, setHovered] = useState(false);
+  const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);
+  const titleRef = useRef(null);
+  const {
+    width
+  } = useMeasure(titleRef);
+  return /*#__PURE__*/_jsx(EditableContainer, {
+    className: hovered || editing ? 'editable-title-component' : '',
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false)
+  }, void 0, (hovered || editing) && /*#__PURE__*/jsx(EditableTitleComponent, _objectSpread(_objectSpread({}, rest), {}, {
+    onBlur: e => {
+      setEditing(false);
+      onBlur(e);
+    },
+    onChange: e => {
+      setTitleValue(e.target.value);
+      onChange(e);
+    },
+    onFocus: e => {
+      setEditing(true);
+      onFocus(e);
+    },
+    onMouseOut: e => {
+      setHovered(false);
+      onMouseOut(e);
+    },
+    style: {
+      width: width + 10,
+      minWidth: '260px',
+      maxWidth: '100%'
+    },
+    value: titleValue
+  })), /*#__PURE__*/jsx("div", {
+    ref: titleRef,
+    style: {
+      width: 'fit-content'
+    },
+    children: /*#__PURE__*/_jsx(PageHeaderTitle, {
+      showMarker: showMarker && !hovered && !editing
+    }, void 0, titleValue)
+  }));
+};
+const props = {
+  /** The title text */
+  children: PropTypes.string.description('The title text'),
+
+  /** Whether the title is editing or not */
+  editing: PropTypes.bool.description('Whether the title is editing or not'),
+
+  /** Show error marker */
+  showMarker: PropTypes.bool.description('Show error marker'),
+
+  /** blur callback */
+  onBlur: PropTypes.func.description('blur callback'),
+
+  /** on change handler */
+  onChange: PropTypes.func.description('on change handler'),
+
+  /** on focus handler */
+  onFocus: PropTypes.func.description('on focus handler'),
+
+  /** mouse out of component handler */
+  onMouseOut: PropTypes.func.description('mouse out of component handler')
+};
+const DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);
+DSPageHeaderEditableTitleWithSchema.propTypes = props;
+
+export { DSPageHeaderEditableTitleWithSchema, PageHeaderEditableTitle, PageHeaderEditableTitle as default };

package/esm/v2/components/PageHeaderMenu/PageHeaderMenu.js

@@ -0,0 +1,28 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { PageHeaderMenuWrapper } from '../blocks.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const PageHeaderMenu = _ref => {
+  let {
+    children
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(PageHeaderMenuWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    children: children
+  }));
+};
+
+export { PageHeaderMenu };

package/esm/v2/components/PageHeaderSummary/PageHeaderSummary.js

@@ -0,0 +1,50 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { PageHeaderSummaryWrapper } from '../blocks.js';
+import { jsxs } from 'react/jsx-runtime';
+
+var _div;
+
+const _excluded = ["value", "label"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const PageHeaderSummary = _ref => {
+  let {
+    value = null,
+    label = ''
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsxs(PageHeaderSummaryWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [(value === 0 || value) && /*#__PURE__*/_jsx("div", {
+      className: "ph-summary-value"
+    }, void 0, value), label && /*#__PURE__*/_jsx("div", {
+      className: "ph-summary-label"
+    }, void 0, label), (value === 0 || value || label) && (_div || (_div = /*#__PURE__*/_jsx("div", {
+      className: "ph-summary-space"
+    })))]
+  }));
+};
+
+const props = {
+  /** value for page header summary */
+  value: PropTypes.number.description('value for page header summary'),
+
+  /** label attached to value */
+  label: PropTypes.string.description('label attached to value')
+};
+const DSPageHeaderSummaryWithSchema = describe(PageHeaderSummary);
+DSPageHeaderSummaryWithSchema.propTypes = props;
+
+export { DSPageHeaderSummaryWithSchema, PageHeaderSummary };

package/esm/v2/components/PageHeaderTitle/PageHeaderTitle.js

@@ -0,0 +1,51 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';
+import RequiredMark from '@elliemae/ds-form/RequiredMark';
+import { PageHeaderTitleWrapper } from '../blocks.js';
+import { jsxs } from 'react/jsx-runtime';
+
+var _RequiredMark;
+
+const _excluded = ["children", "showMarker"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const PageHeaderTitle = _ref => {
+  let {
+    children,
+    showMarker = false
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsxs(PageHeaderTitleWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    "data-testid": "ds-page-header-title",
+    children: [/*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: children
+    })), showMarker && (_RequiredMark || (_RequiredMark = /*#__PURE__*/_jsx(RequiredMark, {
+      required: true
+    })))]
+  }));
+};
+
+const props = {
+  /** page header title string */
+  children: PropTypes.string.description('Page header title string'),
+
+  /** show required mark */
+  showMarker: PropTypes.bool.description('show required mark')
+};
+const DSPageHeaderTitleWithSchema = describe(PageHeaderTitle);
+DSPageHeaderTitleWithSchema.propTypes = props;
+
+export { DSPageHeaderTitleWithSchema, PageHeaderTitle };

package/esm/v2/components/PageHeaderToolbar/PageHeaderToolbar.js

@@ -0,0 +1,28 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { PageHeaderToolbarWrapper } from '../blocks.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const PageHeaderToolbar = _ref => {
+  let {
+    children
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(PageHeaderToolbarWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    children: children
+  }));
+};
+
+export { PageHeaderToolbar };

package/esm/v2/components/blocks.js

@@ -0,0 +1,13 @@
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+export { cssPrefix } from '@elliemae/ds-classnames';
+import { DSInput } from '@elliemae/ds-form';
+
+const blockName = 'page-header-v2';
+const PageHeaderTitleWrapper = aggregatedClasses('div')("".concat(blockName, "-title"), 'title');
+const EditableTitleComponent = aggregatedClasses(DSInput)("".concat(blockName, "-title"), 'editable-title');
+const PageHeaderBackWrapper = aggregatedClasses('div')("".concat(blockName, "-back"));
+const PageHeaderSummaryWrapper = aggregatedClasses('div')("".concat(blockName, "-summary"));
+const PageHeaderMenuWrapper = aggregatedClasses('div')("".concat(blockName, "-menu"));
+const PageHeaderToolbarWrapper = aggregatedClasses('div')("".concat(blockName, "-toolbar"));
+
+export { EditableTitleComponent, PageHeaderBackWrapper, PageHeaderMenuWrapper, PageHeaderSummaryWrapper, PageHeaderTitleWrapper, PageHeaderToolbarWrapper };

package/esm/v2/props.js

@@ -0,0 +1,39 @@
+import { PropTypes } from 'react-desc';
+
+const navProps = {
+  /** props injected to wrapper of page header */
+  containerProps: PropTypes.shape({}).description('props injected to wrapper of page header'),
+
+  /** breadcrumbs component */
+  breadcrumbs: PropTypes.node.description('breadcrumbs component'),
+
+  /** PageHeaderTitle component */
+  pageTitle: PropTypes.node.description('PageHeaderTitle component'),
+
+  /** back arrow component */
+  backarrow: PropTypes.node.description('back arrow component'),
+
+  /** PageHeaderSummary component */
+  summary: PropTypes.node.description('PageHeaderSummary component'),
+
+  /** toolbar component */
+  toolbar: PropTypes.node.description('toolbar component'),
+
+  /** PageHeaderMenu component */
+  menu: PropTypes.node.description('PageHeaderMenu component'),
+
+  /** Border bottom below the page header */
+  withBottomSeparator: PropTypes.bool.description('Border bottom below the page header')
+};
+const defaultProps = {
+  containerProps: {},
+  breadcrumbs: null,
+  pageTitle: null,
+  backarrow: null,
+  summary: null,
+  toolbar: null,
+  menu: null,
+  withBottomSeparator: true
+};
+
+export { defaultProps, navProps };