@elliemae/ds-page-header 1.60.0 → 2.0.0-alpha.12

package/esm/v1/DSPageHeader.js

@@ -1,63 +1,44 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React from 'react';
+import 'react';
 import { PropTypes, describe } from 'react-desc';
 import { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';
 import PageHeaderImpl from './PageHeaderImpl.js';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-breadcrumb';
-import '@elliemae/ds-icon';
-import './EditableTitle.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'prop-types';
-import '@elliemae/ds-form/Input';
-import './Title.js';
-import './DropdownTitle.js';
-import '@elliemae/ds-dropdownmenu';
-import '@elliemae/ds-button';
-import './TitleWrapper.js';
-
-var _excluded = ["containerProps", "renderToolbar", "withBottomSeparator", "title", "titleOptions", "onSelectOption", "subtitle", "optionsSelection", "onGoToPreviousPage", "previousPage", "editable", "editing", "titleInputProps", "zIndex", "optionsMinWidth"];
-
-var DSPageHeader = function DSPageHeader(_ref) {
-  var _ref$containerProps = _ref.containerProps,
-      containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
-      _ref$renderToolbar = _ref.renderToolbar,
-      renderToolbar = _ref$renderToolbar === void 0 ? undefined : _ref$renderToolbar,
-      _ref$withBottomSepara = _ref.withBottomSeparator,
-      withBottomSeparator = _ref$withBottomSepara === void 0 ? true : _ref$withBottomSepara,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '' : _ref$title,
-      _ref$titleOptions = _ref.titleOptions,
-      titleOptions = _ref$titleOptions === void 0 ? undefined : _ref$titleOptions,
-      _ref$onSelectOption = _ref.onSelectOption,
-      onSelectOption = _ref$onSelectOption === void 0 ? function () {
-    return null;
-  } : _ref$onSelectOption,
-      _ref$subtitle = _ref.subtitle,
-      subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle,
-      _ref$optionsSelection = _ref.optionsSelection,
-      optionsSelection = _ref$optionsSelection === void 0 ? {} : _ref$optionsSelection,
-      _ref$onGoToPreviousPa = _ref.onGoToPreviousPage,
-      onGoToPreviousPage = _ref$onGoToPreviousPa === void 0 ? function () {
-    return null;
-  } : _ref$onGoToPreviousPa,
-      previousPage = _ref.previousPage,
-      _ref$editable = _ref.editable,
-      editable = _ref$editable === void 0 ? false : _ref$editable,
-      _ref$editing = _ref.editing,
-      editing = _ref$editing === void 0 ? undefined : _ref$editing,
-      _ref$titleInputProps = _ref.titleInputProps,
-      titleInputProps = _ref$titleInputProps === void 0 ? {} : _ref$titleInputProps,
-      _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? 2 : _ref$zIndex,
-      _ref$optionsMinWidth = _ref.optionsMinWidth,
-      optionsMinWidth = _ref$optionsMinWidth === void 0 ? undefined : _ref$optionsMinWidth,
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["containerProps", "renderToolbar", "withBottomSeparator", "title", "titleOptions", "onSelectOption", "subtitle", "optionsSelection", "onGoToPreviousPage", "previousPage", "editable", "editing", "titleInputProps", "zIndex", "optionsMinWidth"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const DSPageHeader = _ref => {
+  let {
+    containerProps = {},
+    renderToolbar = undefined,
+    withBottomSeparator = true,
+    title = '',
+    titleOptions = undefined,
+    onSelectOption = () => null,
+    subtitle = '',
+    optionsSelection = {},
+    onGoToPreviousPage = () => null,
+    previousPage,
+    editable = false,
+    editing = undefined,
+    titleInputProps = {},
+    zIndex = 2,
+    optionsMinWidth = undefined
+  } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(TooltipTextProvider, null, /*#__PURE__*/React.createElement(PageHeaderImpl, _extends({
+  return /*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/jsx(PageHeaderImpl, _objectSpread({
     containerProps: containerProps,
     editable: editable,
     editing: editing,
@@ -76,7 +57,7 @@ var DSPageHeader = function DSPageHeader(_ref) {
   }, otherProps)));
 };
 
-var props = {
+const props = {
   /* Component version */
   version: PropTypes.oneOf([1, 2]).description('Component version'),
 
@@ -125,9 +106,7 @@ var props = {
   /** min width for options dropdown menu */
   optionsMinWidth: PropTypes.number.description('min width for options dropdown menu')
 };
-DSPageHeader.propTypes = props;
-var DSPageHeaderV1WithSchema = describe(DSPageHeader).deprecated('use DSPageHeaderV2');
+const DSPageHeaderV1WithSchema = describe(DSPageHeader).deprecated('use DSPageHeaderV2');
 DSPageHeaderV1WithSchema.propTypes = props;
 
 export { DSPageHeader, DSPageHeaderV1WithSchema, DSPageHeader as default };
-//# sourceMappingURL=DSPageHeader.js.map

package/esm/v1/DropdownTitle.js

@@ -1,32 +1,33 @@
-import React from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
 import { ChevronSmallDown } from '@elliemae/ds-icons';
 import DSButton from '@elliemae/ds-button';
 import TitleWrapper from './TitleWrapper.js';
-import '@elliemae/ds-classnames';
+
+var _DSButton;
 
 function DropdownTitle(_ref) {
-  var titleComponent = _ref.titleComponent,
-      onSelectOption = _ref.onSelectOption,
-      options = _ref.options,
-      optionsMinWidth = _ref.optionsMinWidth,
-      selection = _ref.selection,
-      zIndex = _ref.zIndex;
-  return /*#__PURE__*/React.createElement(TitleWrapper, null, titleComponent, /*#__PURE__*/React.createElement(DSDropdownMenu, {
+  let {
+    titleComponent,
+    onSelectOption,
+    options,
+    optionsMinWidth,
+    selection,
+    zIndex
+  } = _ref;
+  return /*#__PURE__*/_jsx(TitleWrapper, {}, void 0, titleComponent, /*#__PURE__*/_jsx(DSDropdownMenu, {
     minWidth: optionsMinWidth,
     onSelectMenuItem: onSelectOption,
     options: options,
     selection: selection,
-    triggerComponent: /*#__PURE__*/React.createElement(DSButton, {
+    triggerComponent: _DSButton || (_DSButton = /*#__PURE__*/_jsx(DSButton, {
       buttonType: "text",
       "data-testid": "page-header-dropdown-trigger-component",
-      icon: /*#__PURE__*/React.createElement(ChevronSmallDown, null)
-    }),
+      icon: /*#__PURE__*/_jsx(ChevronSmallDown, {})
+    })),
     zIndex: zIndex
   }));
 }
 
-DropdownTitle.propTypes = {};
-
 export { DropdownTitle as default };
-//# sourceMappingURL=DropdownTitle.js.map

package/esm/v1/EditableTitle.js

@@ -1,66 +1,47 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useRef } from 'react';
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useRef } from 'react';
 import { useDerivedStateFromProps, runAll } from '@elliemae/ds-utilities';
-import PropTypes from 'prop-types';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import DSInput from '@elliemae/ds-form/Input';
 import Title from './Title.js';
-import '@elliemae/ds-truncated-tooltip-text';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
-var blockName = 'page-header';
-var EditableTitleComponent = aggregatedClasses(DSInput)("".concat(blockName, "-title"), 'editable-title');
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function EditableTitle(_ref) {
-  var value = _ref.children,
-      editingProp = _ref.editing,
-      titleInputProps = _ref.titleInputProps;
-
-  var _useState = useState(value),
-      _useState2 = _slicedToArray(_useState, 2),
-      titleValue = _useState2[0],
-      setTitleValue = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hovered = _useState4[0],
-      setHovered = _useState4[1];
-
-  var _useDerivedStateFromP = useDerivedStateFromProps(editingProp || false),
-      _useDerivedStateFromP2 = _slicedToArray(_useDerivedStateFromP, 2),
-      editing = _useDerivedStateFromP2[0],
-      setEditing = _useDerivedStateFromP2[1];
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const blockName = 'page-header';
+const EditableTitleComponent = aggregatedClasses(DSInput)("".concat(blockName, "-title"), 'editable-title');
 
-  var titleRef = useRef(null);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hovered || editing ? /*#__PURE__*/React.createElement(EditableTitleComponent, _extends({}, titleInputProps, {
-    onBlur: runAll(function () {
-      return setEditing(false);
-    }, titleInputProps.onBlur),
-    onChange: runAll(function (e) {
-      return setTitleValue(e.target.value);
-    }, titleInputProps.onChange),
-    onFocus: runAll(function () {
-      return setEditing(true);
-    }, titleInputProps.onFocus),
-    onMouseOut: runAll(function () {
-      return setHovered(false);
-    }, titleInputProps.onMouseOut),
-    value: titleValue
-  })) : /*#__PURE__*/React.createElement("div", {
-    ref: titleRef,
-    onMouseEnter: function onMouseEnter() {
-      return setHovered(true);
-    }
-  }, /*#__PURE__*/React.createElement(Title, null, titleValue)));
+function EditableTitle(_ref) {
+  let {
+    children: value,
+    editing: editingProp,
+    titleInputProps
+  } = _ref;
+  const [titleValue, setTitleValue] = useState(value);
+  const [hovered, setHovered] = useState(false);
+  const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);
+  const titleRef = useRef(null);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: hovered || editing ? /*#__PURE__*/jsx(EditableTitleComponent, _objectSpread(_objectSpread({}, titleInputProps), {}, {
+      onBlur: runAll(() => setEditing(false), titleInputProps.onBlur),
+      onChange: runAll(e => setTitleValue(e.target.value), titleInputProps.onChange),
+      onFocus: runAll(() => setEditing(true), titleInputProps.onFocus),
+      onMouseOut: runAll(() => setHovered(false), titleInputProps.onMouseOut),
+      value: titleValue
+    })) : /*#__PURE__*/jsx("div", {
+      ref: titleRef,
+      onMouseEnter: () => setHovered(true),
+      children: /*#__PURE__*/_jsx(Title, {}, void 0, titleValue)
+    })
+  });
 }
 
-EditableTitle.propTypes = {
-  /** The title text */
-  children: PropTypes.string,
-
-  /** Whether the title is editing or not */
-  editing: PropTypes.bool
-};
-
 export { EditableTitle as default };
-//# sourceMappingURL=EditableTitle.js.map

package/esm/v1/PageHeaderImpl.js

@@ -1,5 +1,13 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import React from 'react';
+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';
@@ -8,125 +16,106 @@ import { DSIconSizes } from '@elliemae/ds-icon';
 import EditableTitle from './EditableTitle.js';
 import Title from './Title.js';
 import DropdownTitle from './DropdownTitle.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'prop-types';
-import '@elliemae/ds-form/Input';
-import '@elliemae/ds-truncated-tooltip-text';
-import '@elliemae/ds-dropdownmenu';
-import '@elliemae/ds-button';
-import './TitleWrapper.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-var blockName = 'page-header';
-var PageHeaderContainer = aggregatedClasses('div')(blockName, null, function (_ref) {
-  var withBottomSeparator = _ref.withBottomSeparator,
-      subtitle = _ref.subtitle;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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
   };
 });
-var PageHeaderMainSection = aggregatedClasses('div')("".concat(blockName, "-main-section"));
-var PageHeaderTitleSection = aggregatedClasses('div')("".concat(blockName, "-title-section"));
-var PageHeaderToolbar = aggregatedClasses('div')("".concat(blockName, "-toolbar"), null, function () {
-  return {
-    'ie-flex-basis-auto': true
-  };
-});
-var PageHeaderBreadcrumb = aggregatedClasses(DSBreadcrumb)("".concat(blockName, "-breadcrumb"));
-var PageHeaderTitle = aggregatedClasses('div')("".concat(blockName, "-title"));
-var Subtitle = aggregatedClasses('div')("".concat(blockName, "-title"), 'subtitle');
-var BackArrow = aggregatedClasses(ChevronLeft)("".concat(blockName, "-backarrow"));
+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) {
-  var _ref2$title = _ref2.title,
-      title = _ref2$title === void 0 ? '' : _ref2$title,
-      _ref2$options = _ref2.options,
-      options = _ref2$options === void 0 ? [] : _ref2$options,
-      optionsMinWidth = _ref2.optionsMinWidth,
-      _ref2$onSelectOption = _ref2.onSelectOption,
-      onSelectOption = _ref2$onSelectOption === void 0 ? function () {
-    return null;
-  } : _ref2$onSelectOption,
-      selection = _ref2.selection,
-      _ref2$subtitle = _ref2.subtitle,
-      subtitle = _ref2$subtitle === void 0 ? '' : _ref2$subtitle,
-      _ref2$editable = _ref2.editable,
-      editable = _ref2$editable === void 0 ? false : _ref2$editable,
-      _ref2$editing = _ref2.editing,
-      editing = _ref2$editing === void 0 ? false : _ref2$editing,
-      titleInputProps = _ref2.titleInputProps,
-      zIndex = _ref2.zIndex;
-  var titleComponent = editable ? /*#__PURE__*/React.createElement(EditableTitle, {
+  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
-  }, title) : /*#__PURE__*/React.createElement(Title, null, title);
-  return /*#__PURE__*/React.createElement(PageHeaderTitle, null, options.length ? /*#__PURE__*/React.createElement(DropdownTitle, {
+  }, 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__*/React.createElement(Subtitle, null, subtitle));
+  }) : titleComponent, subtitle && /*#__PURE__*/_jsx(Subtitle, {}, void 0, subtitle));
 }
 
 function PageHeaderImpl(_ref3) {
-  var containerProps = _ref3.containerProps,
-      className = _ref3.className,
-      title = _ref3.title,
-      titleOptions = _ref3.titleOptions,
-      renderToolbar = _ref3.renderToolbar,
-      _ref3$breadcrumbs = _ref3.breadcrumbs,
-      breadcrumbs = _ref3$breadcrumbs === void 0 ? [] : _ref3$breadcrumbs,
-      previousPage = _ref3.previousPage,
-      _ref3$onGoToPreviousP = _ref3.onGoToPreviousPage,
-      onGoToPreviousPage = _ref3$onGoToPreviousP === void 0 ? function () {
-    return null;
-  } : _ref3$onGoToPreviousP,
-      _ref3$subtitle = _ref3.subtitle,
-      subtitle = _ref3$subtitle === void 0 ? '' : _ref3$subtitle,
-      withBottomSeparator = _ref3.withBottomSeparator,
-      onSelectOption = _ref3.onSelectOption,
-      optionsSelection = _ref3.optionsSelection,
-      optionsMinWidth = _ref3.optionsMinWidth,
-      _ref3$editable = _ref3.editable,
-      editable = _ref3$editable === void 0 ? false : _ref3$editable,
-      titleInputProps = _ref3.titleInputProps,
-      _ref3$editing = _ref3.editing,
-      editing = _ref3$editing === void 0 ? undefined : _ref3$editing,
-      zIndex = _ref3.zIndex;
-  var hasBreadcrumbs = !!breadcrumbs.length;
-  return /*#__PURE__*/React.createElement(PageHeaderContainer, _extends({}, containerProps, {
+  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: withBottomSeparator,
-      subtitle: subtitle
-    }
-  }), previousPage && /*#__PURE__*/React.createElement(BackArrow, {
-    "data-testid": "back-arrow",
-    onClick: onGoToPreviousPage,
-    size: DSIconSizes.M
-  }), /*#__PURE__*/React.createElement(PageHeaderMainSection, null, hasBreadcrumbs && /*#__PURE__*/React.createElement(PageHeaderBreadcrumb, null, breadcrumbs.map(function (breadcrumb) {
-    return /*#__PURE__*/React.createElement(DSBreadcrumb.Item, _extends({
-      key: breadcrumb.label
-    }, breadcrumb));
-  })), previousPage && /*#__PURE__*/React.createElement(PageHeaderBreadcrumb, null, /*#__PURE__*/React.createElement(DSBreadcrumb.Item, _extends({
-    key: previousPage.id,
-    label: previousPage.title,
-    onClick: previousPage.onClick
-  }, previousPage))), /*#__PURE__*/React.createElement(PageHeaderTitleSection, null, /*#__PURE__*/React.createElement(HeaderTitle, {
-    editable: editable,
-    editing: editing,
-    onSelectOption: onSelectOption,
-    options: titleOptions,
-    optionsMinWidth: optionsMinWidth,
-    selection: optionsSelection,
-    subtitle: subtitle,
-    title: title,
-    titleInputProps: titleInputProps,
-    zIndex: zIndex
-  }), isFunction(renderToolbar) && /*#__PURE__*/React.createElement(PageHeaderToolbar, null, renderToolbar()))));
+      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 };
-//# sourceMappingURL=PageHeaderImpl.js.map

package/esm/v1/Title.js

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

package/esm/v1/TitleWrapper.js

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