@elliemae/ds-page-header 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/DSPageHeader.js

@@ -14,7 +14,7 @@ var PageHeaderMenu = require('./v2/components/PageHeaderMenu/PageHeaderMenu.js')
 exports.DSPageHeaderV2 = PageHeader.DSPageHeaderV2;
 exports.DSPageHeaderWithSchema = PageHeader.DSPageHeaderWithSchema;
 exports.PageHeaderCustomRenderer = PageHeader.PageHeaderCustomRenderer;
-exports.default = DSPageHeader.DSPageHeader;
+exports["default"] = DSPageHeader.DSPageHeader;
 exports.PageHeaderTitle = PageHeaderTitle.PageHeaderTitle;
 exports.PageHeaderEditableTitle = PageHeaderEditableTitle.PageHeaderEditableTitle;
 exports.PageHeaderSummary = PageHeaderSummary.PageHeaderSummary;

package/cjs/index.js

@@ -13,7 +13,7 @@ var PageHeaderMenu = require('./v2/components/PageHeaderMenu/PageHeaderMenu.js')
 
 exports.DSPageHeader = DSPageHeader.DSPageHeader;
 exports.DSPageHeaderV1WithSchema = DSPageHeader.DSPageHeaderV1WithSchema;
-exports.default = DSPageHeader.DSPageHeader;
+exports["default"] = DSPageHeader.DSPageHeader;
 exports.DSPageHeaderV2 = PageHeader.DSPageHeaderV2;
 exports.DSPageHeaderWithSchema = PageHeader.DSPageHeaderWithSchema;
 exports.PageHeaderCustomRenderer = PageHeader.PageHeaderCustomRenderer;

package/cjs/v1/DSPageHeader.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -21,7 +26,7 @@ const _excluded = ["containerProps", "renderToolbar", "withBottomSeparator", "ti
 
 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__default['default'](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; }
+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__default["default"](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 {
@@ -41,9 +46,9 @@ const DSPageHeader = _ref => {
     zIndex = 2,
     optionsMinWidth = undefined
   } = _ref,
-      otherProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
 
-  return /*#__PURE__*/_jsx__default['default'](DSTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(PageHeaderImpl, _objectSpread({
+  return /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(PageHeaderImpl, _objectSpread({
     containerProps: containerProps,
     editable: editable,
     editing: editing,
@@ -116,4 +121,4 @@ DSPageHeaderV1WithSchema.propTypes = props;
 
 exports.DSPageHeader = DSPageHeader;
 exports.DSPageHeaderV1WithSchema = DSPageHeaderV1WithSchema;
-exports['default'] = DSPageHeader;
+exports["default"] = DSPageHeader;

package/cjs/v1/DropdownTitle.js

@@ -3,7 +3,7 @@
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
-var ChevronSmallDown = require('@elliemae/ds-icons/ChevronSmallDown');
+var dsIcons = require('@elliemae/ds-icons');
 var DSButton = require('@elliemae/ds-button');
 var TitleWrapper = require('./TitleWrapper.js');
 
@@ -11,28 +11,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
-var ChevronSmallDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallDown);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 var _DSButton;
 
-function DropdownTitle({
-  titleComponent,
-  onSelectOption,
-  options,
-  optionsMinWidth,
-  selection,
-  zIndex
-}) {
-  return /*#__PURE__*/_jsx__default['default'](TitleWrapper, {}, void 0, titleComponent, /*#__PURE__*/_jsx__default['default'](DSDropdownMenu__default['default'], {
+function DropdownTitle(_ref) {
+  let {
+    titleComponent,
+    onSelectOption,
+    options,
+    optionsMinWidth,
+    selection,
+    zIndex
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](TitleWrapper, {}, void 0, titleComponent, /*#__PURE__*/_jsx__default["default"](DSDropdownMenu__default["default"], {
     minWidth: optionsMinWidth,
     onSelectMenuItem: onSelectOption,
     options: options,
     selection: selection,
-    triggerComponent: _DSButton || (_DSButton = /*#__PURE__*/_jsx__default['default'](DSButton__default['default'], {
+    triggerComponent: _DSButton || (_DSButton = /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       buttonType: "text",
       "data-testid": "page-header-dropdown-trigger-component",
-      icon: /*#__PURE__*/_jsx__default['default'](ChevronSmallDown__default['default'], {})
+      icon: /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})
     })),
     zIndex: zIndex
   }));

package/cjs/v1/EditableTitle.js

@@ -2,10 +2,15 @@
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var react = require('react');
-var useDerivedStateFromProps = require('@elliemae/ds-utilities/hooks/useDerivedStateFromProps');
+var dsUtilities = require('@elliemae/ds-utilities');
 var dsClassnames = require('@elliemae/ds-classnames');
-var utils = require('@elliemae/ds-utilities/utils');
 var DSInput = require('@elliemae/ds-form/Input');
 var Title = require('./Title.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -14,35 +19,35 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var useDerivedStateFromProps__default = /*#__PURE__*/_interopDefaultLegacy(useDerivedStateFromProps);
 var DSInput__default = /*#__PURE__*/_interopDefaultLegacy(DSInput);
 
 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__default['default'](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; }
+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__default["default"](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 = dsClassnames.aggregatedClasses(DSInput__default['default'])(`${blockName}-title`, 'editable-title');
+const EditableTitleComponent = dsClassnames.aggregatedClasses(DSInput__default["default"])("".concat(blockName, "-title"), 'editable-title');
 
-function EditableTitle({
-  children: value,
-  editing: editingProp,
-  titleInputProps
-}) {
+function EditableTitle(_ref) {
+  let {
+    children: value,
+    editing: editingProp,
+    titleInputProps
+  } = _ref;
   const [titleValue, setTitleValue] = react.useState(value);
   const [hovered, setHovered] = react.useState(false);
-  const [editing, setEditing] = useDerivedStateFromProps__default['default'](editingProp || false);
+  const [editing, setEditing] = dsUtilities.useDerivedStateFromProps(editingProp || false);
   const titleRef = react.useRef(null);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: hovered || editing ? /*#__PURE__*/jsxRuntime.jsx(EditableTitleComponent, _objectSpread(_objectSpread({}, titleInputProps), {}, {
-      onBlur: utils.runAll(() => setEditing(false), titleInputProps.onBlur),
-      onChange: utils.runAll(e => setTitleValue(e.target.value), titleInputProps.onChange),
-      onFocus: utils.runAll(() => setEditing(true), titleInputProps.onFocus),
-      onMouseOut: utils.runAll(() => setHovered(false), titleInputProps.onMouseOut),
+      onBlur: dsUtilities.runAll(() => setEditing(false), titleInputProps.onBlur),
+      onChange: dsUtilities.runAll(e => setTitleValue(e.target.value), titleInputProps.onChange),
+      onFocus: dsUtilities.runAll(() => setEditing(true), titleInputProps.onFocus),
+      onMouseOut: dsUtilities.runAll(() => setHovered(false), titleInputProps.onMouseOut),
       value: titleValue
     })) : /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: titleRef,
       onMouseEnter: () => setHovered(true),
-      children: /*#__PURE__*/_jsx__default['default'](Title, {}, void 0, titleValue)
+      children: /*#__PURE__*/_jsx__default["default"](Title, {}, void 0, titleValue)
     })
   });
 }

package/cjs/v1/PageHeaderImpl.js

@@ -2,10 +2,17 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('react');
-var utils = require('@elliemae/ds-utilities/utils');
+var dsUtilities = require('@elliemae/ds-utilities');
 var dsClassnames = require('@elliemae/ds-classnames');
-var ChevronLeft = require('@elliemae/ds-icons/ChevronLeft');
+var dsIcons = require('@elliemae/ds-icons');
 var DSBreadcrumb = require('@elliemae/ds-breadcrumb');
 var dsIcon = require('@elliemae/ds-icon');
 var EditableTitle = require('./EditableTitle.js');
@@ -17,75 +24,79 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ChevronLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeft);
 var DSBreadcrumb__default = /*#__PURE__*/_interopDefaultLegacy(DSBreadcrumb);
 
 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__default['default'](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; }
+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__default["default"](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 = dsClassnames.aggregatedClasses('div')(blockName, null, ({
-  withBottomSeparator,
-  subtitle
-}) => ({
-  'with-bottom-separator': withBottomSeparator,
-  'with-subtitle': subtitle
-}));
-const PageHeaderMainSection = dsClassnames.aggregatedClasses('div')(`${blockName}-main-section`);
-const PageHeaderTitleSection = dsClassnames.aggregatedClasses('div')(`${blockName}-title-section`);
-const PageHeaderToolbar = dsClassnames.aggregatedClasses('div')(`${blockName}-toolbar`, null, () => ({
+const PageHeaderContainer = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    withBottomSeparator,
+    subtitle
+  } = _ref;
+  return {
+    'with-bottom-separator': withBottomSeparator,
+    'with-subtitle': subtitle
+  };
+});
+const PageHeaderMainSection = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-main-section"));
+const PageHeaderTitleSection = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-title-section"));
+const PageHeaderToolbar = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-toolbar"), null, () => ({
   'ie-flex-basis-auto': true
 }));
-const PageHeaderBreadcrumb = dsClassnames.aggregatedClasses(DSBreadcrumb__default['default'])(`${blockName}-breadcrumb`);
-const PageHeaderTitle = dsClassnames.aggregatedClasses('div')(`${blockName}-title`);
-const Subtitle = dsClassnames.aggregatedClasses('div')(`${blockName}-title`, 'subtitle');
-const BackArrow = dsClassnames.aggregatedClasses(ChevronLeft__default['default'])(`${blockName}-backarrow`);
+const PageHeaderBreadcrumb = dsClassnames.aggregatedClasses(DSBreadcrumb__default["default"])("".concat(blockName, "-breadcrumb"));
+const PageHeaderTitle = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-title"));
+const Subtitle = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-title"), 'subtitle');
+const BackArrow = dsClassnames.aggregatedClasses(dsIcons.ChevronLeft)("".concat(blockName, "-backarrow"));
 
-function HeaderTitle({
-  title = '',
-  options = [],
-  optionsMinWidth,
-  onSelectOption = () => null,
-  selection,
-  subtitle = '',
-  editable = false,
-  editing = false,
-  titleInputProps,
-  zIndex
-}) {
-  const titleComponent = editable ? /*#__PURE__*/_jsx__default['default'](EditableTitle, {
+function HeaderTitle(_ref2) {
+  let {
+    title = '',
+    options = [],
+    optionsMinWidth,
+    onSelectOption = () => null,
+    selection,
+    subtitle = '',
+    editable = false,
+    editing = false,
+    titleInputProps,
+    zIndex
+  } = _ref2;
+  const titleComponent = editable ? /*#__PURE__*/_jsx__default["default"](EditableTitle, {
     editing: editing,
     titleInputProps: titleInputProps
-  }, void 0, title) : /*#__PURE__*/_jsx__default['default'](Title, {}, void 0, title);
-  return /*#__PURE__*/_jsx__default['default'](PageHeaderTitle, {}, void 0, options.length ? /*#__PURE__*/_jsx__default['default'](DropdownTitle, {
+  }, void 0, title) : /*#__PURE__*/_jsx__default["default"](Title, {}, void 0, title);
+  return /*#__PURE__*/_jsx__default["default"](PageHeaderTitle, {}, void 0, options.length ? /*#__PURE__*/_jsx__default["default"](DropdownTitle, {
     onSelectOption: onSelectOption,
     options: options,
     optionsMinWidth: optionsMinWidth,
     selection: selection,
     titleComponent: titleComponent,
     zIndex: zIndex
-  }) : titleComponent, subtitle && /*#__PURE__*/_jsx__default['default'](Subtitle, {}, void 0, subtitle));
+  }) : titleComponent, subtitle && /*#__PURE__*/_jsx__default["default"](Subtitle, {}, void 0, subtitle));
 }
 
-function PageHeaderImpl({
-  containerProps,
-  className,
-  title,
-  titleOptions,
-  renderToolbar,
-  breadcrumbs = [],
-  previousPage,
-  onGoToPreviousPage = () => null,
-  subtitle = '',
-  withBottomSeparator,
-  onSelectOption,
-  optionsSelection,
-  optionsMinWidth,
-  editable = false,
-  titleInputProps,
-  editing = undefined,
-  zIndex
-}) {
+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__*/jsxRuntime.jsxs(PageHeaderContainer, _objectSpread(_objectSpread({}, containerProps), {}, {
     className: className,
@@ -93,14 +104,14 @@ function PageHeaderImpl({
       withBottomSeparator,
       subtitle
     },
-    children: [previousPage && /*#__PURE__*/_jsx__default['default'](BackArrow, {
+    children: [previousPage && /*#__PURE__*/_jsx__default["default"](BackArrow, {
       "data-testid": "back-arrow",
       onClick: onGoToPreviousPage,
       size: dsIcon.DSIconSizes.M
-    }), /*#__PURE__*/_jsx__default['default'](PageHeaderMainSection, {}, void 0, hasBreadcrumbs && /*#__PURE__*/_jsx__default['default'](PageHeaderBreadcrumb, {}, void 0, breadcrumbs.map(breadcrumb => /*#__PURE__*/jsxRuntime.jsx(DSBreadcrumb__default['default'].Item, _objectSpread({}, breadcrumb), breadcrumb.label))), previousPage && /*#__PURE__*/_jsx__default['default'](PageHeaderBreadcrumb, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(DSBreadcrumb__default['default'].Item, _objectSpread({
+    }), /*#__PURE__*/_jsx__default["default"](PageHeaderMainSection, {}, void 0, hasBreadcrumbs && /*#__PURE__*/_jsx__default["default"](PageHeaderBreadcrumb, {}, void 0, breadcrumbs.map(breadcrumb => /*#__PURE__*/jsxRuntime.jsx(DSBreadcrumb__default["default"].Item, _objectSpread({}, breadcrumb), breadcrumb.label))), previousPage && /*#__PURE__*/_jsx__default["default"](PageHeaderBreadcrumb, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(DSBreadcrumb__default["default"].Item, _objectSpread({
       label: previousPage.title,
       onClick: previousPage.onClick
-    }, previousPage), previousPage.id)), /*#__PURE__*/_jsx__default['default'](PageHeaderTitleSection, {}, void 0, /*#__PURE__*/_jsx__default['default'](HeaderTitle, {
+    }, previousPage), previousPage.id)), /*#__PURE__*/_jsx__default["default"](PageHeaderTitleSection, {}, void 0, /*#__PURE__*/_jsx__default["default"](HeaderTitle, {
       editable: editable,
       editing: editing,
       onSelectOption: onSelectOption,
@@ -111,7 +122,7 @@ function PageHeaderImpl({
       title: title,
       titleInputProps: titleInputProps,
       zIndex: zIndex
-    }), utils.isFunction(renderToolbar) && /*#__PURE__*/_jsx__default['default'](PageHeaderToolbar, {}, void 0, renderToolbar())))]
+    }), dsUtilities.isFunction(renderToolbar) && /*#__PURE__*/_jsx__default["default"](PageHeaderToolbar, {}, void 0, renderToolbar())))]
   }));
 }
 

package/cjs/v1/Title.js

@@ -11,12 +11,15 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
 
 const blockName = 'page-header';
-const TitleWrapper = dsClassnames.aggregatedClasses(DSTruncatedTooltipText__default['default'])(`${blockName}-title`, 'title');
+const TitleWrapper = dsClassnames.aggregatedClasses(DSTruncatedTooltipText__default["default"])("".concat(blockName, "-title"), 'title');
 
-const Title = ({
-  children
-}) => /*#__PURE__*/_jsx__default['default'](TitleWrapper, {
-  value: children
-});
+const Title = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](TitleWrapper, {
+    value: children
+  });
+};
 
 module.exports = Title;

package/cjs/v1/TitleWrapper.js

@@ -3,6 +3,6 @@
 var dsClassnames = require('@elliemae/ds-classnames');
 
 const blockName = 'page-header';
-var TitleWrapper = dsClassnames.aggregatedClasses('span')(`${blockName}-title-wrapper`);
+var TitleWrapper = dsClassnames.aggregatedClasses('span')("".concat(blockName, "-title-wrapper"));
 
 module.exports = TitleWrapper;

package/cjs/v2/PageHeader.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
@@ -18,7 +23,7 @@ var PageHeaderBack = require('./components/PageHeaderBack/PageHeaderBack.js');
 require('./components/blocks.js');
 var props = require('./props.js');
 var jsxRuntime = require('react/jsx-runtime');
-var aggregatedClasses = require('@elliemae/ds-classnames/aggregatedClasses');
+var dsClassnames = require('@elliemae/ds-classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,44 +35,45 @@ var _div;
 
 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__default['default'](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 PageHeaderCustomRenderer = /*#__PURE__*/styled__default['default'].div.withConfig({
+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__default["default"](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 PageHeaderCustomRenderer = /*#__PURE__*/styled__default["default"].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__default['default'].div.withConfig({
+const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ps4m9w-1"
-})(["width:100%;margin-bottom:4px;"]);
-const ContainerWBorder = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["width:100%;margin-bottom:8px;"]);
+const ContainerWBorder = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-ps4m9w-2"
-})(["width:100%;padding-bottom:4px;", ""], props => !props.withBottomSeparator ? '' : `border-bottom: solid 1px ${props.theme.colors.neutral[400]};`);
+})(["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 = ({
-  containerProps,
-  breadcrumbs,
-  pageTitle,
-  backarrow,
-  summary,
-  toolbar,
-  menu,
-  withBottomSeparator
-}) => {
+const DSPageHeaderV2 = _ref => {
+  let {
+    containerProps,
+    breadcrumbs,
+    pageTitle,
+    backarrow,
+    summary,
+    toolbar,
+    menu,
+    withBottomSeparator
+  } = _ref;
   const wrapperRow = ['auto', 1];
-  const mainRow = lodash.compact([1, '268px']);
+  const mainRow = lodash.compact([1, 'auto']);
   const pageTitleRow = lodash.compact(['auto', menu && '30px', summary && 'auto', 1]);
   return /*#__PURE__*/jsxRuntime.jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
-    children: /*#__PURE__*/_jsx__default['default'](ContainerWBorder, {
+    children: /*#__PURE__*/_jsx__default["default"](ContainerWBorder, {
       withBottomSeparator: withBottomSeparator
-    }, void 0, /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
       cols: wrapperRow
-    }, void 0, /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {}, void 0, /*#__PURE__*/_jsx__default['default'](PageHeaderBack.PageHeaderBack, {}, void 0, backarrow)), /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](PageHeaderBack.PageHeaderBack, {}, void 0, backarrow)), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
       rows: ['auto', 'auto']
-    }, void 0, /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
-      className: `${aggregatedClasses.cssPrefix}-page-header-v2-breadcrumb`
-    }, void 0, breadcrumbs), /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+      className: "".concat(dsClassnames.cssPrefix, "-page-header-v2-breadcrumb")
+    }, void 0, breadcrumbs), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
       cols: mainRow
-    }, void 0, /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
       cols: pageTitleRow
-    }, void 0, pageTitle, menu && /*#__PURE__*/_jsx__default['default'](PageHeaderMenu.PageHeaderMenu, {}, void 0, menu), summary, _div || (_div = /*#__PURE__*/_jsx__default['default']("div", {}))), /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {}, void 0, /*#__PURE__*/_jsx__default['default'](PageHeaderToolbar.PageHeaderToolbar, {}, void 0, toolbar))))))
+    }, void 0, pageTitle, menu && /*#__PURE__*/_jsx__default["default"](PageHeaderMenu.PageHeaderMenu, {}, void 0, menu), summary, _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {}))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](PageHeaderToolbar.PageHeaderToolbar, {}, void 0, toolbar))))))
   }));
 };
 
@@ -82,4 +88,4 @@ exports.PageHeaderMenu = PageHeaderMenu.PageHeaderMenu;
 exports.DSPageHeaderV2 = DSPageHeaderV2;
 exports.DSPageHeaderWithSchema = DSPageHeaderWithSchema;
 exports.PageHeaderCustomRenderer = PageHeaderCustomRenderer;
-exports['default'] = DSPageHeaderV2;
+exports["default"] = DSPageHeaderV2;

package/cjs/v2/components/PageHeaderBack/PageHeaderBack.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('react');
@@ -17,12 +22,12 @@ const _excluded = ["children"];
 
 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__default['default'](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; }
+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__default["default"](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 PageHeaderBack = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   return /*#__PURE__*/jsxRuntime.jsx(blocks.PageHeaderBackWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: children

package/cjs/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js

@@ -5,12 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var react = require('react');
 var lodash = require('lodash');
 var styled = require('styled-components');
 var reactDesc = require('react-desc');
-var hooks = require('@elliemae/ds-utilities/hooks');
-var useDerivedStateFromProps = require('@elliemae/ds-utilities/hooks/useDerivedStateFromProps');
+var dsUtilities = require('@elliemae/ds-utilities');
 var blocks = require('../blocks.js');
 var PageHeaderTitle = require('../PageHeaderTitle/PageHeaderTitle.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -21,14 +26,13 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var useDerivedStateFromProps__default = /*#__PURE__*/_interopDefaultLegacy(useDerivedStateFromProps);
 
 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); 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__default['default'](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 EditableContainer = /*#__PURE__*/styled__default['default'].div.withConfig({
+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__default["default"](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 EditableContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-v0pkny-0"
 })(["height:32px;position:relative;overflow:hidden;"]);
 const PageHeaderEditableTitle = _ref => {
@@ -41,17 +45,19 @@ const PageHeaderEditableTitle = _ref => {
     onMouseOut = lodash.noop,
     showMarker = false
   } = _ref,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   const [titleValue, setTitleValue] = react.useState(value);
   const [hovered, setHovered] = react.useState(false);
-  const [editing, setEditing] = useDerivedStateFromProps__default['default'](editingProp || false);
+  const [editing, setEditing] = dsUtilities.useDerivedStateFromProps(editingProp || false);
   const titleRef = react.useRef(null);
   const {
     width
-  } = hooks.useMeasure(titleRef);
-  return /*#__PURE__*/_jsx__default['default'](EditableContainer, {
-    className: hovered || editing ? 'editable-title-component' : ''
+  } = dsUtilities.useMeasure(titleRef);
+  return /*#__PURE__*/_jsx__default["default"](EditableContainer, {
+    className: hovered || editing ? 'editable-title-component' : '',
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false)
   }, void 0, (hovered || editing) && /*#__PURE__*/jsxRuntime.jsx(blocks.EditableTitleComponent, _objectSpread(_objectSpread({}, rest), {}, {
     onBlur: e => {
       setEditing(false);
@@ -70,14 +76,17 @@ const PageHeaderEditableTitle = _ref => {
       onMouseOut(e);
     },
     style: {
-      width: width - 2,
-      minWidth: '260px'
+      width: width + 10,
+      minWidth: '260px',
+      maxWidth: '100%'
     },
     value: titleValue
   })), /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: titleRef,
-    onMouseEnter: () => setHovered(true),
-    children: /*#__PURE__*/_jsx__default['default'](PageHeaderTitle.PageHeaderTitle, {
+    style: {
+      width: 'fit-content'
+    },
+    children: /*#__PURE__*/_jsx__default["default"](PageHeaderTitle.PageHeaderTitle, {
       showMarker: showMarker && !hovered && !editing
     }, void 0, titleValue)
   }));
@@ -109,4 +118,4 @@ DSPageHeaderEditableTitleWithSchema.propTypes = props;
 
 exports.DSPageHeaderEditableTitleWithSchema = DSPageHeaderEditableTitleWithSchema;
 exports.PageHeaderEditableTitle = PageHeaderEditableTitle;
-exports['default'] = PageHeaderEditableTitle;
+exports["default"] = PageHeaderEditableTitle;