@elliemae/ds-page-header 2.0.0-alpha.10 → 2.0.0-alpha.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/v1/DSPageHeader.js +5 -0
- package/cjs/v1/DropdownTitle.js +11 -11
- package/cjs/v1/EditableTitle.js +19 -14
- package/cjs/v1/PageHeaderImpl.js +60 -49
- package/cjs/v1/Title.js +9 -6
- package/cjs/v1/TitleWrapper.js +1 -1
- package/cjs/v2/PageHeader.js +19 -13
- package/cjs/v2/components/PageHeaderBack/PageHeaderBack.js +5 -0
- package/cjs/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js +18 -9
- package/cjs/v2/components/PageHeaderMenu/PageHeaderMenu.js +5 -0
- package/cjs/v2/components/PageHeaderSummary/PageHeaderSummary.js +5 -0
- package/cjs/v2/components/PageHeaderTitle/PageHeaderTitle.js +8 -2
- package/cjs/v2/components/PageHeaderToolbar/PageHeaderToolbar.js +5 -0
- package/cjs/v2/components/blocks.js +9 -14
- package/esm/v1/DSPageHeader.js +5 -0
- package/esm/v1/DropdownTitle.js +10 -9
- package/esm/v1/EditableTitle.js +14 -8
- package/esm/v1/PageHeaderImpl.js +59 -47
- package/esm/v1/Title.js +9 -6
- package/esm/v1/TitleWrapper.js +1 -1
- package/esm/v2/PageHeader.js +19 -13
- package/esm/v2/components/PageHeaderBack/PageHeaderBack.js +5 -0
- package/esm/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js +16 -6
- package/esm/v2/components/PageHeaderMenu/PageHeaderMenu.js +5 -0
- package/esm/v2/components/PageHeaderSummary/PageHeaderSummary.js +5 -0
- package/esm/v2/components/PageHeaderTitle/PageHeaderTitle.js +9 -3
- package/esm/v2/components/PageHeaderToolbar/PageHeaderToolbar.js +5 -0
- package/esm/v2/components/blocks.js +8 -8
- package/package.json +13 -12
- package/types/v1/DSPageHeader.d.ts +97 -16
- package/types/v1/DropdownTitle.d.ts +1 -1
- package/types/v2/PageHeader.d.ts +64 -10
- package/types/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.d.ts +57 -8
- package/types/v2/components/PageHeaderSummary/PageHeaderSummary.d.ts +24 -3
- package/types/v2/components/PageHeaderTitle/PageHeaderTitle.d.ts +22 -3
- package/types/v2/components/blocks.d.ts +1 -1
- package/types/v2/props.d.ts +49 -8
- package/types/v2/tests/utils.d.ts +6 -6
- package/cjs/package.json +0 -7
- package/esm/package.json +0 -7
package/cjs/v1/DSPageHeader.js
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
11
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
12
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
package/cjs/v1/DropdownTitle.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
4
|
require('react');
|
|
5
5
|
var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
|
|
6
|
-
var
|
|
6
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
7
7
|
var DSButton = require('@elliemae/ds-button');
|
|
8
8
|
var TitleWrapper = require('./TitleWrapper.js');
|
|
9
9
|
|
|
@@ -11,19 +11,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
|
|
12
12
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
13
13
|
var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
|
|
14
|
-
var ChevronSmallDown__default = /*#__PURE__*/_interopDefaultLegacy(ChevronSmallDown);
|
|
15
14
|
var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
|
|
16
15
|
|
|
17
16
|
var _DSButton;
|
|
18
17
|
|
|
19
|
-
function DropdownTitle({
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
function DropdownTitle(_ref) {
|
|
19
|
+
let {
|
|
20
|
+
titleComponent,
|
|
21
|
+
onSelectOption,
|
|
22
|
+
options,
|
|
23
|
+
optionsMinWidth,
|
|
24
|
+
selection,
|
|
25
|
+
zIndex
|
|
26
|
+
} = _ref;
|
|
27
27
|
return /*#__PURE__*/_jsx__default["default"](TitleWrapper, {}, void 0, titleComponent, /*#__PURE__*/_jsx__default["default"](DSDropdownMenu__default["default"], {
|
|
28
28
|
minWidth: optionsMinWidth,
|
|
29
29
|
onSelectMenuItem: onSelectOption,
|
|
@@ -32,7 +32,7 @@ function DropdownTitle({
|
|
|
32
32
|
triggerComponent: _DSButton || (_DSButton = /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
33
33
|
buttonType: "text",
|
|
34
34
|
"data-testid": "page-header-dropdown-trigger-component",
|
|
35
|
-
icon: /*#__PURE__*/_jsx__default["default"](
|
|
35
|
+
icon: /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})
|
|
36
36
|
})),
|
|
37
37
|
zIndex: zIndex
|
|
38
38
|
}));
|
package/cjs/v1/EditableTitle.js
CHANGED
|
@@ -2,10 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
4
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
11
|
var react = require('react');
|
|
6
|
-
var
|
|
12
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
7
13
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
8
|
-
var utils = require('@elliemae/ds-utilities/utils');
|
|
9
14
|
var DSInput = require('@elliemae/ds-form/Input');
|
|
10
15
|
var Title = require('./Title.js');
|
|
11
16
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -14,30 +19,30 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
14
19
|
|
|
15
20
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
16
21
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
17
|
-
var useDerivedStateFromProps__default = /*#__PURE__*/_interopDefaultLegacy(useDerivedStateFromProps);
|
|
18
22
|
var DSInput__default = /*#__PURE__*/_interopDefaultLegacy(DSInput);
|
|
19
23
|
|
|
20
24
|
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; }
|
|
21
25
|
|
|
22
26
|
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; }
|
|
23
27
|
const blockName = 'page-header';
|
|
24
|
-
const EditableTitleComponent = dsClassnames.aggregatedClasses(DSInput__default["default"])(
|
|
28
|
+
const EditableTitleComponent = dsClassnames.aggregatedClasses(DSInput__default["default"])("".concat(blockName, "-title"), 'editable-title');
|
|
25
29
|
|
|
26
|
-
function EditableTitle({
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
function EditableTitle(_ref) {
|
|
31
|
+
let {
|
|
32
|
+
children: value,
|
|
33
|
+
editing: editingProp,
|
|
34
|
+
titleInputProps
|
|
35
|
+
} = _ref;
|
|
31
36
|
const [titleValue, setTitleValue] = react.useState(value);
|
|
32
37
|
const [hovered, setHovered] = react.useState(false);
|
|
33
|
-
const [editing, setEditing] =
|
|
38
|
+
const [editing, setEditing] = dsUtilities.useDerivedStateFromProps(editingProp || false);
|
|
34
39
|
const titleRef = react.useRef(null);
|
|
35
40
|
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
36
41
|
children: hovered || editing ? /*#__PURE__*/jsxRuntime.jsx(EditableTitleComponent, _objectSpread(_objectSpread({}, titleInputProps), {}, {
|
|
37
|
-
onBlur:
|
|
38
|
-
onChange:
|
|
39
|
-
onFocus:
|
|
40
|
-
onMouseOut:
|
|
42
|
+
onBlur: dsUtilities.runAll(() => setEditing(false), titleInputProps.onBlur),
|
|
43
|
+
onChange: dsUtilities.runAll(e => setTitleValue(e.target.value), titleInputProps.onChange),
|
|
44
|
+
onFocus: dsUtilities.runAll(() => setEditing(true), titleInputProps.onFocus),
|
|
45
|
+
onMouseOut: dsUtilities.runAll(() => setHovered(false), titleInputProps.onMouseOut),
|
|
41
46
|
value: titleValue
|
|
42
47
|
})) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
43
48
|
ref: titleRef,
|
package/cjs/v1/PageHeaderImpl.js
CHANGED
|
@@ -2,10 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
4
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
12
|
require('react');
|
|
6
|
-
var
|
|
13
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
7
14
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
8
|
-
var
|
|
15
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
9
16
|
var DSBreadcrumb = require('@elliemae/ds-breadcrumb');
|
|
10
17
|
var dsIcon = require('@elliemae/ds-icon');
|
|
11
18
|
var EditableTitle = require('./EditableTitle.js');
|
|
@@ -17,42 +24,45 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
17
24
|
|
|
18
25
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
19
26
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
20
|
-
var ChevronLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeft);
|
|
21
27
|
var DSBreadcrumb__default = /*#__PURE__*/_interopDefaultLegacy(DSBreadcrumb);
|
|
22
28
|
|
|
23
29
|
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; }
|
|
24
30
|
|
|
25
31
|
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; }
|
|
26
32
|
const blockName = 'page-header';
|
|
27
|
-
const PageHeaderContainer = dsClassnames.aggregatedClasses('div')(blockName, null,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
const PageHeaderContainer = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
|
|
34
|
+
let {
|
|
35
|
+
withBottomSeparator,
|
|
36
|
+
subtitle
|
|
37
|
+
} = _ref;
|
|
38
|
+
return {
|
|
39
|
+
'with-bottom-separator': withBottomSeparator,
|
|
40
|
+
'with-subtitle': subtitle
|
|
41
|
+
};
|
|
42
|
+
});
|
|
43
|
+
const PageHeaderMainSection = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-main-section"));
|
|
44
|
+
const PageHeaderTitleSection = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-title-section"));
|
|
45
|
+
const PageHeaderToolbar = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-toolbar"), null, () => ({
|
|
37
46
|
'ie-flex-basis-auto': true
|
|
38
47
|
}));
|
|
39
|
-
const PageHeaderBreadcrumb = dsClassnames.aggregatedClasses(DSBreadcrumb__default["default"])(
|
|
40
|
-
const PageHeaderTitle = dsClassnames.aggregatedClasses('div')(
|
|
41
|
-
const Subtitle = dsClassnames.aggregatedClasses('div')(
|
|
42
|
-
const BackArrow = dsClassnames.aggregatedClasses(
|
|
48
|
+
const PageHeaderBreadcrumb = dsClassnames.aggregatedClasses(DSBreadcrumb__default["default"])("".concat(blockName, "-breadcrumb"));
|
|
49
|
+
const PageHeaderTitle = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-title"));
|
|
50
|
+
const Subtitle = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-title"), 'subtitle');
|
|
51
|
+
const BackArrow = dsClassnames.aggregatedClasses(dsIcons.ChevronLeft)("".concat(blockName, "-backarrow"));
|
|
43
52
|
|
|
44
|
-
function HeaderTitle({
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
function HeaderTitle(_ref2) {
|
|
54
|
+
let {
|
|
55
|
+
title = '',
|
|
56
|
+
options = [],
|
|
57
|
+
optionsMinWidth,
|
|
58
|
+
onSelectOption = () => null,
|
|
59
|
+
selection,
|
|
60
|
+
subtitle = '',
|
|
61
|
+
editable = false,
|
|
62
|
+
editing = false,
|
|
63
|
+
titleInputProps,
|
|
64
|
+
zIndex
|
|
65
|
+
} = _ref2;
|
|
56
66
|
const titleComponent = editable ? /*#__PURE__*/_jsx__default["default"](EditableTitle, {
|
|
57
67
|
editing: editing,
|
|
58
68
|
titleInputProps: titleInputProps
|
|
@@ -67,25 +77,26 @@ function HeaderTitle({
|
|
|
67
77
|
}) : titleComponent, subtitle && /*#__PURE__*/_jsx__default["default"](Subtitle, {}, void 0, subtitle));
|
|
68
78
|
}
|
|
69
79
|
|
|
70
|
-
function PageHeaderImpl({
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
80
|
+
function PageHeaderImpl(_ref3) {
|
|
81
|
+
let {
|
|
82
|
+
containerProps,
|
|
83
|
+
className,
|
|
84
|
+
title,
|
|
85
|
+
titleOptions,
|
|
86
|
+
renderToolbar,
|
|
87
|
+
breadcrumbs = [],
|
|
88
|
+
previousPage,
|
|
89
|
+
onGoToPreviousPage = () => null,
|
|
90
|
+
subtitle = '',
|
|
91
|
+
withBottomSeparator,
|
|
92
|
+
onSelectOption,
|
|
93
|
+
optionsSelection,
|
|
94
|
+
optionsMinWidth,
|
|
95
|
+
editable = false,
|
|
96
|
+
titleInputProps,
|
|
97
|
+
editing = undefined,
|
|
98
|
+
zIndex
|
|
99
|
+
} = _ref3;
|
|
89
100
|
const hasBreadcrumbs = !!breadcrumbs.length;
|
|
90
101
|
return /*#__PURE__*/jsxRuntime.jsxs(PageHeaderContainer, _objectSpread(_objectSpread({}, containerProps), {}, {
|
|
91
102
|
className: className,
|
|
@@ -111,7 +122,7 @@ function PageHeaderImpl({
|
|
|
111
122
|
title: title,
|
|
112
123
|
titleInputProps: titleInputProps,
|
|
113
124
|
zIndex: zIndex
|
|
114
|
-
}),
|
|
125
|
+
}), dsUtilities.isFunction(renderToolbar) && /*#__PURE__*/_jsx__default["default"](PageHeaderToolbar, {}, void 0, renderToolbar())))]
|
|
115
126
|
}));
|
|
116
127
|
}
|
|
117
128
|
|
package/cjs/v1/Title.js
CHANGED
|
@@ -11,12 +11,15 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
|
11
11
|
var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
|
|
12
12
|
|
|
13
13
|
const blockName = 'page-header';
|
|
14
|
-
const TitleWrapper = dsClassnames.aggregatedClasses(DSTruncatedTooltipText__default["default"])(
|
|
14
|
+
const TitleWrapper = dsClassnames.aggregatedClasses(DSTruncatedTooltipText__default["default"])("".concat(blockName, "-title"), 'title');
|
|
15
15
|
|
|
16
|
-
const Title =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
const Title = _ref => {
|
|
17
|
+
let {
|
|
18
|
+
children
|
|
19
|
+
} = _ref;
|
|
20
|
+
return /*#__PURE__*/_jsx__default["default"](TitleWrapper, {
|
|
21
|
+
value: children
|
|
22
|
+
});
|
|
23
|
+
};
|
|
21
24
|
|
|
22
25
|
module.exports = Title;
|
package/cjs/v1/TitleWrapper.js
CHANGED
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
4
4
|
|
|
5
5
|
const blockName = 'page-header';
|
|
6
|
-
var TitleWrapper = dsClassnames.aggregatedClasses('span')(
|
|
6
|
+
var TitleWrapper = dsClassnames.aggregatedClasses('span')("".concat(blockName, "-title-wrapper"));
|
|
7
7
|
|
|
8
8
|
module.exports = TitleWrapper;
|
package/cjs/v2/PageHeader.js
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
12
|
require('react');
|
|
@@ -18,7 +23,7 @@ var PageHeaderBack = require('./components/PageHeaderBack/PageHeaderBack.js');
|
|
|
18
23
|
require('./components/blocks.js');
|
|
19
24
|
var props = require('./props.js');
|
|
20
25
|
var jsxRuntime = require('react/jsx-runtime');
|
|
21
|
-
var
|
|
26
|
+
var dsClassnames = require('@elliemae/ds-classnames');
|
|
22
27
|
|
|
23
28
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
24
29
|
|
|
@@ -39,18 +44,19 @@ const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
|
39
44
|
})(["width:100%;margin-bottom:8px;"]);
|
|
40
45
|
const ContainerWBorder = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
41
46
|
componentId: "sc-ps4m9w-2"
|
|
42
|
-
})(["width:100%;padding:12px 0 8px 0;display:grid;align-items:center;height:100%;", ""], props => !props.withBottomSeparator ? '' :
|
|
47
|
+
})(["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], ";"));
|
|
43
48
|
|
|
44
|
-
const DSPageHeaderV2 =
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
49
|
+
const DSPageHeaderV2 = _ref => {
|
|
50
|
+
let {
|
|
51
|
+
containerProps,
|
|
52
|
+
breadcrumbs,
|
|
53
|
+
pageTitle,
|
|
54
|
+
backarrow,
|
|
55
|
+
summary,
|
|
56
|
+
toolbar,
|
|
57
|
+
menu,
|
|
58
|
+
withBottomSeparator
|
|
59
|
+
} = _ref;
|
|
54
60
|
const wrapperRow = ['auto', 1];
|
|
55
61
|
const mainRow = lodash.compact([1, 'auto']);
|
|
56
62
|
const pageTitleRow = lodash.compact(['auto', menu && '30px', summary && 'auto', 1]);
|
|
@@ -62,7 +68,7 @@ const DSPageHeaderV2 = ({
|
|
|
62
68
|
}, 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, {
|
|
63
69
|
rows: ['auto', 'auto']
|
|
64
70
|
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
65
|
-
className:
|
|
71
|
+
className: "".concat(dsClassnames.cssPrefix, "-page-header-v2-breadcrumb")
|
|
66
72
|
}, void 0, breadcrumbs), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
67
73
|
cols: mainRow
|
|
68
74
|
}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
12
|
require('react');
|
|
@@ -5,12 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
6
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
7
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
8
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
8
14
|
var react = require('react');
|
|
9
15
|
var lodash = require('lodash');
|
|
10
16
|
var styled = require('styled-components');
|
|
11
17
|
var reactDesc = require('react-desc');
|
|
12
|
-
var
|
|
13
|
-
var useDerivedStateFromProps = require('@elliemae/ds-utilities/hooks/useDerivedStateFromProps');
|
|
18
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
14
19
|
var blocks = require('../blocks.js');
|
|
15
20
|
var PageHeaderTitle = require('../PageHeaderTitle/PageHeaderTitle.js');
|
|
16
21
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -21,7 +26,6 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
|
21
26
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
22
27
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
23
28
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
24
|
-
var useDerivedStateFromProps__default = /*#__PURE__*/_interopDefaultLegacy(useDerivedStateFromProps);
|
|
25
29
|
|
|
26
30
|
const _excluded = ["children", "editing", "onBlur", "onChange", "onFocus", "onMouseOut", "showMarker"];
|
|
27
31
|
|
|
@@ -45,13 +49,15 @@ const PageHeaderEditableTitle = _ref => {
|
|
|
45
49
|
|
|
46
50
|
const [titleValue, setTitleValue] = react.useState(value);
|
|
47
51
|
const [hovered, setHovered] = react.useState(false);
|
|
48
|
-
const [editing, setEditing] =
|
|
52
|
+
const [editing, setEditing] = dsUtilities.useDerivedStateFromProps(editingProp || false);
|
|
49
53
|
const titleRef = react.useRef(null);
|
|
50
54
|
const {
|
|
51
55
|
width
|
|
52
|
-
} =
|
|
56
|
+
} = dsUtilities.useMeasure(titleRef);
|
|
53
57
|
return /*#__PURE__*/_jsx__default["default"](EditableContainer, {
|
|
54
|
-
className: hovered || editing ? 'editable-title-component' : ''
|
|
58
|
+
className: hovered || editing ? 'editable-title-component' : '',
|
|
59
|
+
onMouseEnter: () => setHovered(true),
|
|
60
|
+
onMouseLeave: () => setHovered(false)
|
|
55
61
|
}, void 0, (hovered || editing) && /*#__PURE__*/jsxRuntime.jsx(blocks.EditableTitleComponent, _objectSpread(_objectSpread({}, rest), {}, {
|
|
56
62
|
onBlur: e => {
|
|
57
63
|
setEditing(false);
|
|
@@ -70,13 +76,16 @@ const PageHeaderEditableTitle = _ref => {
|
|
|
70
76
|
onMouseOut(e);
|
|
71
77
|
},
|
|
72
78
|
style: {
|
|
73
|
-
width: width
|
|
74
|
-
minWidth: '260px'
|
|
79
|
+
width: width + 10,
|
|
80
|
+
minWidth: '260px',
|
|
81
|
+
maxWidth: '100%'
|
|
75
82
|
},
|
|
76
83
|
value: titleValue
|
|
77
84
|
})), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
78
85
|
ref: titleRef,
|
|
79
|
-
|
|
86
|
+
style: {
|
|
87
|
+
width: 'fit-content'
|
|
88
|
+
},
|
|
80
89
|
children: /*#__PURE__*/_jsx__default["default"](PageHeaderTitle.PageHeaderTitle, {
|
|
81
90
|
showMarker: showMarker && !hovered && !editing
|
|
82
91
|
}, void 0, titleValue)
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
12
|
require('react');
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
12
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
12
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
@@ -36,9 +41,10 @@ const PageHeaderTitle = _ref => {
|
|
|
36
41
|
rest = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
37
42
|
|
|
38
43
|
return /*#__PURE__*/jsxRuntime.jsxs(blocks.PageHeaderTitleWrapper, _objectSpread(_objectSpread({}, rest), {}, {
|
|
39
|
-
|
|
44
|
+
"data-testid": "ds-page-header-title",
|
|
45
|
+
children: [/*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
|
|
40
46
|
value: children
|
|
41
|
-
}), showMarker && (_RequiredMark || (_RequiredMark = /*#__PURE__*/_jsx__default["default"](RequiredMark__default["default"], {
|
|
47
|
+
})), showMarker && (_RequiredMark || (_RequiredMark = /*#__PURE__*/_jsx__default["default"](RequiredMark__default["default"], {
|
|
42
48
|
required: true
|
|
43
49
|
})))]
|
|
44
50
|
}));
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
12
|
require('react');
|
|
@@ -2,25 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var aggregatedClasses = require('@elliemae/ds-classnames/aggregatedClasses');
|
|
6
5
|
var dsClassnames = require('@elliemae/ds-classnames');
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
-
|
|
11
|
-
var DSInput__default = /*#__PURE__*/_interopDefaultLegacy(DSInput);
|
|
6
|
+
var dsForm = require('@elliemae/ds-form');
|
|
12
7
|
|
|
13
8
|
const blockName = 'page-header-v2';
|
|
14
|
-
const PageHeaderTitleWrapper = dsClassnames.aggregatedClasses('div')(
|
|
15
|
-
const EditableTitleComponent = dsClassnames.aggregatedClasses(
|
|
16
|
-
const PageHeaderBackWrapper = dsClassnames.aggregatedClasses('div')(
|
|
17
|
-
const PageHeaderSummaryWrapper = dsClassnames.aggregatedClasses('div')(
|
|
18
|
-
const PageHeaderMenuWrapper = dsClassnames.aggregatedClasses('div')(
|
|
19
|
-
const PageHeaderToolbarWrapper = dsClassnames.aggregatedClasses('div')(
|
|
9
|
+
const PageHeaderTitleWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-title"), 'title');
|
|
10
|
+
const EditableTitleComponent = dsClassnames.aggregatedClasses(dsForm.DSInput)("".concat(blockName, "-title"), 'editable-title');
|
|
11
|
+
const PageHeaderBackWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-back"));
|
|
12
|
+
const PageHeaderSummaryWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-summary"));
|
|
13
|
+
const PageHeaderMenuWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-menu"));
|
|
14
|
+
const PageHeaderToolbarWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-toolbar"));
|
|
20
15
|
|
|
21
16
|
Object.defineProperty(exports, 'cssPrefix', {
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () { return dsClassnames.cssPrefix; }
|
|
24
19
|
});
|
|
25
20
|
exports.EditableTitleComponent = EditableTitleComponent;
|
|
26
21
|
exports.PageHeaderBackWrapper = PageHeaderBackWrapper;
|
package/esm/v1/DSPageHeader.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
7
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
3
8
|
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
package/esm/v1/DropdownTitle.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
2
|
import 'react';
|
|
3
3
|
import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
|
|
4
|
-
import ChevronSmallDown from '@elliemae/ds-icons
|
|
4
|
+
import { ChevronSmallDown } from '@elliemae/ds-icons';
|
|
5
5
|
import DSButton from '@elliemae/ds-button';
|
|
6
6
|
import TitleWrapper from './TitleWrapper.js';
|
|
7
7
|
|
|
8
8
|
var _DSButton;
|
|
9
9
|
|
|
10
|
-
function DropdownTitle({
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
10
|
+
function DropdownTitle(_ref) {
|
|
11
|
+
let {
|
|
12
|
+
titleComponent,
|
|
13
|
+
onSelectOption,
|
|
14
|
+
options,
|
|
15
|
+
optionsMinWidth,
|
|
16
|
+
selection,
|
|
17
|
+
zIndex
|
|
18
|
+
} = _ref;
|
|
18
19
|
return /*#__PURE__*/_jsx(TitleWrapper, {}, void 0, titleComponent, /*#__PURE__*/_jsx(DSDropdownMenu, {
|
|
19
20
|
minWidth: optionsMinWidth,
|
|
20
21
|
onSelectMenuItem: onSelectOption,
|
package/esm/v1/EditableTitle.js
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
7
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
8
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
3
9
|
import { useState, useRef } from 'react';
|
|
4
|
-
import useDerivedStateFromProps from '@elliemae/ds-utilities
|
|
10
|
+
import { useDerivedStateFromProps, runAll } from '@elliemae/ds-utilities';
|
|
5
11
|
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
6
|
-
import { runAll } from '@elliemae/ds-utilities/utils';
|
|
7
12
|
import DSInput from '@elliemae/ds-form/Input';
|
|
8
13
|
import Title from './Title.js';
|
|
9
14
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
@@ -12,13 +17,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
12
17
|
|
|
13
18
|
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; }
|
|
14
19
|
const blockName = 'page-header';
|
|
15
|
-
const EditableTitleComponent = aggregatedClasses(DSInput)(
|
|
20
|
+
const EditableTitleComponent = aggregatedClasses(DSInput)("".concat(blockName, "-title"), 'editable-title');
|
|
16
21
|
|
|
17
|
-
function EditableTitle({
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
function EditableTitle(_ref) {
|
|
23
|
+
let {
|
|
24
|
+
children: value,
|
|
25
|
+
editing: editingProp,
|
|
26
|
+
titleInputProps
|
|
27
|
+
} = _ref;
|
|
22
28
|
const [titleValue, setTitleValue] = useState(value);
|
|
23
29
|
const [hovered, setHovered] = useState(false);
|
|
24
30
|
const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);
|