@elliemae/ds-page-header 2.0.0-alpha.3 → 2.0.0-alpha.7

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

@@ -21,7 +21,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 +41,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 +116,4 @@ DSPageHeaderV1WithSchema.propTypes = props;
 
 exports.DSPageHeader = DSPageHeader;
 exports.DSPageHeaderV1WithSchema = DSPageHeaderV1WithSchema;
-exports['default'] = DSPageHeader;
+exports["default"] = DSPageHeader;

package/cjs/v1/DropdownTitle.js

@@ -24,15 +24,15 @@ function DropdownTitle({
   selection,
   zIndex
 }) {
-  return /*#__PURE__*/_jsx__default['default'](TitleWrapper, {}, void 0, titleComponent, /*#__PURE__*/_jsx__default['default'](DSDropdownMenu__default['default'], {
+  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"](ChevronSmallDown__default["default"], {})
     })),
     zIndex: zIndex
   }));

package/cjs/v1/EditableTitle.js

@@ -19,9 +19,9 @@ 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"])(`${blockName}-title`, 'editable-title');
 
 function EditableTitle({
   children: value,
@@ -30,7 +30,7 @@ function EditableTitle({
 }) {
   const [titleValue, setTitleValue] = react.useState(value);
   const [hovered, setHovered] = react.useState(false);
-  const [editing, setEditing] = useDerivedStateFromProps__default['default'](editingProp || false);
+  const [editing, setEditing] = useDerivedStateFromProps__default["default"](editingProp || false);
   const titleRef = react.useRef(null);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: hovered || editing ? /*#__PURE__*/jsxRuntime.jsx(EditableTitleComponent, _objectSpread(_objectSpread({}, titleInputProps), {}, {
@@ -42,7 +42,7 @@ function EditableTitle({
     })) : /*#__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

@@ -22,7 +22,7 @@ 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,
@@ -36,10 +36,10 @@ const PageHeaderTitleSection = dsClassnames.aggregatedClasses('div')(`${blockNam
 const PageHeaderToolbar = dsClassnames.aggregatedClasses('div')(`${blockName}-toolbar`, null, () => ({
   'ie-flex-basis-auto': true
 }));
-const PageHeaderBreadcrumb = dsClassnames.aggregatedClasses(DSBreadcrumb__default['default'])(`${blockName}-breadcrumb`);
+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 BackArrow = dsClassnames.aggregatedClasses(ChevronLeft__default["default"])(`${blockName}-backarrow`);
 
 function HeaderTitle({
   title = '',
@@ -53,18 +53,18 @@ function HeaderTitle({
   titleInputProps,
   zIndex
 }) {
-  const titleComponent = editable ? /*#__PURE__*/_jsx__default['default'](EditableTitle, {
+  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({
@@ -93,14 +93,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 +111,7 @@ function PageHeaderImpl({
       title: title,
       titleInputProps: titleInputProps,
       zIndex: zIndex
-    }), utils.isFunction(renderToolbar) && /*#__PURE__*/_jsx__default['default'](PageHeaderToolbar, {}, void 0, renderToolbar())))]
+    }), utils.isFunction(renderToolbar) && /*#__PURE__*/_jsx__default["default"](PageHeaderToolbar, {}, void 0, renderToolbar())))]
   }));
 }
 

package/cjs/v1/Title.js

@@ -11,11 +11,11 @@ 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"])(`${blockName}-title`, 'title');
 
 const Title = ({
   children
-}) => /*#__PURE__*/_jsx__default['default'](TitleWrapper, {
+}) => /*#__PURE__*/_jsx__default["default"](TitleWrapper, {
   value: children
 });
 

package/cjs/v2/PageHeader.js

@@ -30,16 +30,16 @@ 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 ${props.theme.colors.neutral[400]};`);
 
 const DSPageHeaderV2 = ({
   containerProps,
@@ -52,22 +52,22 @@ const DSPageHeaderV2 = ({
   withBottomSeparator
 }) => {
   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, {
+    }, 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, 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 +82,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

@@ -17,12 +17,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

@@ -27,8 +27,8 @@ const _excluded = ["children", "editing", "onBlur", "onChange", "onFocus", "onMo
 
 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,16 +41,16 @@ 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] = useDerivedStateFromProps__default["default"](editingProp || false);
   const titleRef = react.useRef(null);
   const {
     width
   } = hooks.useMeasure(titleRef);
-  return /*#__PURE__*/_jsx__default['default'](EditableContainer, {
+  return /*#__PURE__*/_jsx__default["default"](EditableContainer, {
     className: hovered || editing ? 'editable-title-component' : ''
   }, void 0, (hovered || editing) && /*#__PURE__*/jsxRuntime.jsx(blocks.EditableTitleComponent, _objectSpread(_objectSpread({}, rest), {}, {
     onBlur: e => {
@@ -77,7 +77,7 @@ const PageHeaderEditableTitle = _ref => {
   })), /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: titleRef,
     onMouseEnter: () => setHovered(true),
-    children: /*#__PURE__*/_jsx__default['default'](PageHeaderTitle.PageHeaderTitle, {
+    children: /*#__PURE__*/_jsx__default["default"](PageHeaderTitle.PageHeaderTitle, {
       showMarker: showMarker && !hovered && !editing
     }, void 0, titleValue)
   }));
@@ -109,4 +109,4 @@ DSPageHeaderEditableTitleWithSchema.propTypes = props;
 
 exports.DSPageHeaderEditableTitleWithSchema = DSPageHeaderEditableTitleWithSchema;
 exports.PageHeaderEditableTitle = PageHeaderEditableTitle;
-exports['default'] = PageHeaderEditableTitle;
+exports["default"] = PageHeaderEditableTitle;

package/cjs/v2/components/PageHeaderMenu/PageHeaderMenu.js

@@ -17,12 +17,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 PageHeaderMenu = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   return /*#__PURE__*/jsxRuntime.jsx(blocks.PageHeaderMenuWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: children

package/cjs/v2/components/PageHeaderSummary/PageHeaderSummary.js

@@ -22,21 +22,21 @@ const _excluded = ["value", "label"];
 
 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 PageHeaderSummary = _ref => {
   let {
     value = null,
     label = ''
   } = _ref,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   return /*#__PURE__*/jsxRuntime.jsxs(blocks.PageHeaderSummaryWrapper, _objectSpread(_objectSpread({}, rest), {}, {
-    children: [(value === 0 || value) && /*#__PURE__*/_jsx__default['default']("div", {
+    children: [(value === 0 || value) && /*#__PURE__*/_jsx__default["default"]("div", {
       className: "ph-summary-value"
-    }, void 0, value), label && /*#__PURE__*/_jsx__default['default']("div", {
+    }, void 0, value), label && /*#__PURE__*/_jsx__default["default"]("div", {
       className: "ph-summary-label"
-    }, void 0, label), (value === 0 || value || label) && (_div || (_div = /*#__PURE__*/_jsx__default['default']("div", {
+    }, void 0, label), (value === 0 || value || label) && (_div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {
       className: "ph-summary-space"
     })))]
   }));

package/cjs/v2/components/PageHeaderTitle/PageHeaderTitle.js

@@ -26,19 +26,19 @@ const _excluded = ["children", "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; }
+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 PageHeaderTitle = _ref => {
   let {
     children,
     showMarker = false
   } = _ref,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   return /*#__PURE__*/jsxRuntime.jsxs(blocks.PageHeaderTitleWrapper, _objectSpread(_objectSpread({}, rest), {}, {
-    children: [/*#__PURE__*/_jsx__default['default'](DSTruncatedTooltipText__default['default'], {
+    children: [/*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
       value: children
-    }), showMarker && (_RequiredMark || (_RequiredMark = /*#__PURE__*/_jsx__default['default'](RequiredMark__default['default'], {
+    }), showMarker && (_RequiredMark || (_RequiredMark = /*#__PURE__*/_jsx__default["default"](RequiredMark__default["default"], {
       required: true
     })))]
   }));

package/cjs/v2/components/PageHeaderToolbar/PageHeaderToolbar.js

@@ -17,12 +17,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 PageHeaderToolbar = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   return /*#__PURE__*/jsxRuntime.jsx(blocks.PageHeaderToolbarWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: children

package/cjs/v2/components/blocks.js

@@ -12,7 +12,7 @@ var DSInput__default = /*#__PURE__*/_interopDefaultLegacy(DSInput);
 
 const blockName = 'page-header-v2';
 const PageHeaderTitleWrapper = dsClassnames.aggregatedClasses('div')(`${blockName}-title`, 'title');
-const EditableTitleComponent = dsClassnames.aggregatedClasses(DSInput__default['default'])(`${blockName}-title`, 'editable-title');
+const EditableTitleComponent = dsClassnames.aggregatedClasses(DSInput__default["default"])(`${blockName}-title`, 'editable-title');
 const PageHeaderBackWrapper = dsClassnames.aggregatedClasses('div')(`${blockName}-back`);
 const PageHeaderSummaryWrapper = dsClassnames.aggregatedClasses('div')(`${blockName}-summary`);
 const PageHeaderMenuWrapper = dsClassnames.aggregatedClasses('div')(`${blockName}-menu`);
@@ -20,9 +20,7 @@ const PageHeaderToolbarWrapper = dsClassnames.aggregatedClasses('div')(`${blockN
 
 Object.defineProperty(exports, 'cssPrefix', {
   enumerable: true,
-  get: function () {
-    return aggregatedClasses.cssPrefix;
-  }
+  get: function () { return aggregatedClasses.cssPrefix; }
 });
 exports.EditableTitleComponent = EditableTitleComponent;
 exports.PageHeaderBackWrapper = PageHeaderBackWrapper;

package/esm/v2/PageHeader.js

@@ -27,10 +27,10 @@ const PageHeaderCustomRenderer = /*#__PURE__*/styled.div.withConfig({
 })(["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:4px;"]);
+})(["width:100%;margin-bottom:8px;"]);
 const ContainerWBorder = /*#__PURE__*/styled.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 ${props.theme.colors.neutral[400]};`);
 
 const DSPageHeaderV2 = ({
   containerProps,
@@ -43,7 +43,7 @@ const DSPageHeaderV2 = ({
   withBottomSeparator
 }) => {
   const wrapperRow = ['auto', 1];
-  const mainRow = compact([1, '268px']);
+  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, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-page-header",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.7",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Page Header",
   "module": "./esm/index.js",
@@ -100,15 +100,15 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-breadcrumb": "2.0.0-alpha.3",
-    "@elliemae/ds-button": "2.0.0-alpha.3",
-    "@elliemae/ds-classnames": "2.0.0-alpha.3",
-    "@elliemae/ds-dropdownmenu": "2.0.0-alpha.3",
-    "@elliemae/ds-form": "2.0.0-alpha.3",
-    "@elliemae/ds-grid": "2.0.0-alpha.3",
-    "@elliemae/ds-icons": "2.0.0-alpha.3",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.3",
-    "@elliemae/ds-utilities": "2.0.0-alpha.3",
+    "@elliemae/ds-breadcrumb": "2.0.0-alpha.7",
+    "@elliemae/ds-button": "2.0.0-alpha.7",
+    "@elliemae/ds-classnames": "2.0.0-alpha.7",
+    "@elliemae/ds-dropdownmenu": "2.0.0-alpha.7",
+    "@elliemae/ds-form": "2.0.0-alpha.7",
+    "@elliemae/ds-grid": "2.0.0-alpha.7",
+    "@elliemae/ds-icons": "2.0.0-alpha.7",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.7",
+    "@elliemae/ds-utilities": "2.0.0-alpha.7",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3"
   },