@elliemae/ds-page-header 2.3.0-next.3 → 3.0.0-alpha.0

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.
Files changed (125) hide show
  1. package/dist/cjs/DSPageHeader.js +36 -0
  2. package/dist/cjs/DSPageHeader.js.map +7 -0
  3. package/dist/cjs/index.js +43 -0
  4. package/dist/cjs/index.js.map +7 -0
  5. package/dist/cjs/v1/DSPageHeader.js +97 -0
  6. package/dist/cjs/v1/DSPageHeader.js.map +7 -0
  7. package/dist/cjs/v1/DropdownTitle.js +55 -0
  8. package/dist/cjs/v1/DropdownTitle.js.map +7 -0
  9. package/dist/cjs/v1/EditableTitle.js +69 -0
  10. package/dist/cjs/v1/EditableTitle.js.map +7 -0
  11. package/dist/cjs/v1/PageHeaderImpl.js +135 -0
  12. package/dist/cjs/v1/PageHeaderImpl.js.map +7 -0
  13. package/dist/cjs/v1/Title.js +43 -0
  14. package/dist/cjs/v1/Title.js.map +7 -0
  15. package/dist/cjs/v1/TitleWrapper.js +37 -0
  16. package/dist/cjs/v1/TitleWrapper.js.map +7 -0
  17. package/dist/cjs/v2/PageHeader.js +106 -0
  18. package/dist/cjs/v2/PageHeader.js.map +7 -0
  19. package/dist/cjs/v2/components/PageHeaderBack/PageHeaderBack.js +39 -0
  20. package/dist/cjs/v2/components/PageHeaderBack/PageHeaderBack.js.map +7 -0
  21. package/dist/cjs/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js +107 -0
  22. package/dist/cjs/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js.map +7 -0
  23. package/dist/cjs/v2/components/PageHeaderMenu/PageHeaderMenu.js +39 -0
  24. package/dist/cjs/v2/components/PageHeaderMenu/PageHeaderMenu.js.map +7 -0
  25. package/dist/cjs/v2/components/PageHeaderSummary/PageHeaderSummary.js +54 -0
  26. package/dist/cjs/v2/components/PageHeaderSummary/PageHeaderSummary.js.map +7 -0
  27. package/dist/cjs/v2/components/PageHeaderTitle/PageHeaderTitle.js +55 -0
  28. package/dist/cjs/v2/components/PageHeaderTitle/PageHeaderTitle.js.map +7 -0
  29. package/dist/cjs/v2/components/PageHeaderToolbar/PageHeaderToolbar.js +39 -0
  30. package/dist/cjs/v2/components/PageHeaderToolbar/PageHeaderToolbar.js.map +7 -0
  31. package/dist/cjs/v2/components/blocks.js +49 -0
  32. package/dist/cjs/v2/components/blocks.js.map +7 -0
  33. package/dist/cjs/v2/props.js +56 -0
  34. package/dist/cjs/v2/props.js.map +7 -0
  35. package/dist/cjs/v2/tests/utils.js +123 -0
  36. package/dist/cjs/v2/tests/utils.js.map +7 -0
  37. package/dist/esm/DSPageHeader.js +7 -0
  38. package/dist/esm/DSPageHeader.js.map +7 -0
  39. package/dist/esm/index.js +14 -0
  40. package/dist/esm/index.js.map +7 -0
  41. package/dist/esm/v1/DSPageHeader.js +68 -0
  42. package/dist/esm/v1/DSPageHeader.js.map +7 -0
  43. package/dist/esm/v1/DropdownTitle.js +26 -0
  44. package/dist/esm/v1/DropdownTitle.js.map +7 -0
  45. package/dist/esm/v1/EditableTitle.js +40 -0
  46. package/dist/esm/v1/EditableTitle.js.map +7 -0
  47. package/dist/esm/v1/PageHeaderImpl.js +106 -0
  48. package/dist/esm/v1/PageHeaderImpl.js.map +7 -0
  49. package/dist/esm/v1/Title.js +14 -0
  50. package/dist/esm/v1/Title.js.map +7 -0
  51. package/dist/esm/v1/TitleWrapper.js +8 -0
  52. package/dist/esm/v1/TitleWrapper.js.map +7 -0
  53. package/dist/esm/v2/PageHeader.js +77 -0
  54. package/dist/esm/v2/PageHeader.js.map +7 -0
  55. package/dist/esm/v2/components/PageHeaderBack/PageHeaderBack.js +10 -0
  56. package/dist/esm/v2/components/PageHeaderBack/PageHeaderBack.js.map +7 -0
  57. package/dist/esm/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js +78 -0
  58. package/dist/esm/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js.map +7 -0
  59. package/dist/esm/v2/components/PageHeaderMenu/PageHeaderMenu.js +10 -0
  60. package/dist/esm/v2/components/PageHeaderMenu/PageHeaderMenu.js.map +7 -0
  61. package/dist/esm/v2/components/PageHeaderSummary/PageHeaderSummary.js +25 -0
  62. package/dist/esm/v2/components/PageHeaderSummary/PageHeaderSummary.js.map +7 -0
  63. package/dist/esm/v2/components/PageHeaderTitle/PageHeaderTitle.js +26 -0
  64. package/dist/esm/v2/components/PageHeaderTitle/PageHeaderTitle.js.map +7 -0
  65. package/dist/esm/v2/components/PageHeaderToolbar/PageHeaderToolbar.js +10 -0
  66. package/dist/esm/v2/components/PageHeaderToolbar/PageHeaderToolbar.js.map +7 -0
  67. package/dist/esm/v2/components/blocks.js +20 -0
  68. package/dist/esm/v2/components/blocks.js.map +7 -0
  69. package/dist/esm/v2/props.js +27 -0
  70. package/dist/esm/v2/props.js.map +7 -0
  71. package/dist/esm/v2/tests/utils.js +94 -0
  72. package/dist/esm/v2/tests/utils.js.map +7 -0
  73. package/{types → dist/types}/DSPageHeader.d.ts +0 -0
  74. package/{types → dist/types}/index.d.ts +0 -0
  75. package/{types → dist/types}/v1/DSPageHeader.d.ts +0 -0
  76. package/{types → dist/types}/v1/DropdownTitle.d.ts +0 -0
  77. package/{types → dist/types}/v1/EditableTitle.d.ts +0 -0
  78. package/{types → dist/types}/v1/PageHeaderImpl.d.ts +0 -0
  79. package/{types → dist/types}/v1/Title.d.ts +0 -0
  80. package/{types → dist/types}/v1/TitleWrapper.d.ts +0 -0
  81. package/{types → dist/types}/v2/PageHeader.d.ts +0 -0
  82. package/{types → dist/types}/v2/components/PageHeaderBack/PageHeaderBack.d.ts +0 -0
  83. package/{types → dist/types}/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.d.ts +0 -0
  84. package/{types → dist/types}/v2/components/PageHeaderMenu/PageHeaderMenu.d.ts +0 -0
  85. package/{types → dist/types}/v2/components/PageHeaderSummary/PageHeaderSummary.d.ts +0 -0
  86. package/{types → dist/types}/v2/components/PageHeaderTitle/PageHeaderTitle.d.ts +2 -2
  87. package/{types → dist/types}/v2/components/PageHeaderToolbar/PageHeaderToolbar.d.ts +0 -0
  88. package/{types → dist/types}/v2/components/blocks.d.ts +0 -0
  89. package/{types → dist/types}/v2/props.d.ts +0 -0
  90. package/{types → dist/types}/v2/tests/utils.d.ts +0 -0
  91. package/package.json +67 -59
  92. package/cjs/DSPageHeader.js +0 -21
  93. package/cjs/index.js +0 -26
  94. package/cjs/v1/DSPageHeader.js +0 -124
  95. package/cjs/v1/DropdownTitle.js +0 -41
  96. package/cjs/v1/EditableTitle.js +0 -55
  97. package/cjs/v1/PageHeaderImpl.js +0 -129
  98. package/cjs/v1/Title.js +0 -25
  99. package/cjs/v1/TitleWrapper.js +0 -8
  100. package/cjs/v2/PageHeader.js +0 -91
  101. package/cjs/v2/components/PageHeaderBack/PageHeaderBack.js +0 -37
  102. package/cjs/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js +0 -121
  103. package/cjs/v2/components/PageHeaderMenu/PageHeaderMenu.js +0 -37
  104. package/cjs/v2/components/PageHeaderSummary/PageHeaderSummary.js +0 -61
  105. package/cjs/v2/components/PageHeaderTitle/PageHeaderTitle.js +0 -64
  106. package/cjs/v2/components/PageHeaderToolbar/PageHeaderToolbar.js +0 -37
  107. package/cjs/v2/components/blocks.js +0 -25
  108. package/cjs/v2/props.js +0 -44
  109. package/esm/DSPageHeader.js +0 -6
  110. package/esm/index.js +0 -6
  111. package/esm/v1/DSPageHeader.js +0 -112
  112. package/esm/v1/DropdownTitle.js +0 -33
  113. package/esm/v1/EditableTitle.js +0 -47
  114. package/esm/v1/PageHeaderImpl.js +0 -121
  115. package/esm/v1/Title.js +0 -18
  116. package/esm/v1/TitleWrapper.js +0 -6
  117. package/esm/v2/PageHeader.js +0 -75
  118. package/esm/v2/components/PageHeaderBack/PageHeaderBack.js +0 -28
  119. package/esm/v2/components/PageHeaderEditableTitle/PageHeaderEditableTitle.js +0 -108
  120. package/esm/v2/components/PageHeaderMenu/PageHeaderMenu.js +0 -28
  121. package/esm/v2/components/PageHeaderSummary/PageHeaderSummary.js +0 -50
  122. package/esm/v2/components/PageHeaderTitle/PageHeaderTitle.js +0 -51
  123. package/esm/v2/components/PageHeaderToolbar/PageHeaderToolbar.js +0 -28
  124. package/esm/v2/components/blocks.js +0 -13
  125. package/esm/v2/props.js +0 -39
@@ -1,112 +0,0 @@
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';
6
- import _jsx from '@babel/runtime/helpers/esm/jsx';
7
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
8
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
9
- import 'react';
10
- import { PropTypes, describe } from 'react-desc';
11
- import { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';
12
- import PageHeaderImpl from './PageHeaderImpl.js';
13
- import { jsx } from 'react/jsx-runtime';
14
-
15
- const _excluded = ["containerProps", "renderToolbar", "withBottomSeparator", "title", "titleOptions", "onSelectOption", "subtitle", "optionsSelection", "onGoToPreviousPage", "previousPage", "editable", "editing", "titleInputProps", "zIndex", "optionsMinWidth"];
16
-
17
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
18
-
19
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
20
-
21
- const DSPageHeader = _ref => {
22
- let {
23
- containerProps = {},
24
- renderToolbar = undefined,
25
- withBottomSeparator = true,
26
- title = '',
27
- titleOptions = undefined,
28
- onSelectOption = () => null,
29
- subtitle = '',
30
- optionsSelection = {},
31
- onGoToPreviousPage = () => null,
32
- previousPage,
33
- editable = false,
34
- editing = undefined,
35
- titleInputProps = {},
36
- zIndex = 2,
37
- optionsMinWidth = undefined
38
- } = _ref,
39
- otherProps = _objectWithoutProperties(_ref, _excluded);
40
-
41
- return /*#__PURE__*/_jsx(TooltipTextProvider, {}, void 0, /*#__PURE__*/jsx(PageHeaderImpl, _objectSpread({
42
- containerProps: containerProps,
43
- editable: editable,
44
- editing: editing,
45
- onGoToPreviousPage: onGoToPreviousPage,
46
- onSelectOption: onSelectOption,
47
- optionsMinWidth: optionsMinWidth,
48
- optionsSelection: optionsSelection,
49
- previousPage: previousPage,
50
- renderToolbar: renderToolbar,
51
- subtitle: subtitle,
52
- title: title,
53
- titleInputProps: titleInputProps,
54
- titleOptions: titleOptions,
55
- withBottomSeparator: withBottomSeparator,
56
- zIndex: zIndex
57
- }, otherProps)));
58
- };
59
-
60
- const props = {
61
- /* Component version */
62
- version: PropTypes.oneOf([1, 2]).description('Component version'),
63
-
64
- /* props injected to page header wrapper node */
65
- containerProps: PropTypes.object.description('props injected to page header wrapper node'),
66
-
67
- /* Function that returns the toolbar to the right of the page header */
68
- renderToolbar: PropTypes.func.description('Function that returns the toolbar to the right of the page header'),
69
-
70
- /* Whether to show a separator at the bottom of the header */
71
- withBottomSeparator: PropTypes.bool.description('Whether to show a separator at the bottom of the header'),
72
-
73
- /* The page header title */
74
- title: PropTypes.string.description('The page header title'),
75
-
76
- /* The title dropdown options */
77
- titleOptions: PropTypes.arrayOf(PropTypes.object).description('The title dropdown options'),
78
-
79
- /* Handler when a user selects an item in the dropdown menu */
80
- onSelectOption: PropTypes.func.description('Handler when a user selects an item in the dropdown menu'),
81
-
82
- /* Description text below the title */
83
- subtitle: PropTypes.string.description('Description text below the title'),
84
-
85
- /* Selection state for the title dropdown */
86
- optionsSelection: PropTypes.object.description('Selection state for the title dropdown'),
87
-
88
- /* Whether the title is editable or not */
89
- editable: PropTypes.bool.description('Whether the title is editable or not'),
90
-
91
- /* Activates/Deactivates the editing state in the title */
92
- editing: PropTypes.bool.description('Activates/Deactivates the editing state in the title'),
93
-
94
- /* Props passed to the input for editing the title */
95
- titleInputProps: PropTypes.object.description('Props passed to the input for editing the title'),
96
-
97
- /* Enables navigation to previous page with back-arrow */
98
- previousPage: PropTypes.object.description('Enables navigation to previous page with back-arrow'),
99
-
100
- /* Callback to handle navigation to previous page */
101
- onGoToPreviousPage: PropTypes.func.description('Callback to handle navigation to previous page'),
102
-
103
- /* z-index to use for the DropdownMenu */
104
- zIndex: PropTypes.number.description('z-index to use for the DropdownMenu'),
105
-
106
- /** min width for options dropdown menu */
107
- optionsMinWidth: PropTypes.number.description('min width for options dropdown menu')
108
- };
109
- const DSPageHeaderV1WithSchema = describe(DSPageHeader).deprecated('use DSPageHeaderV2');
110
- DSPageHeaderV1WithSchema.propTypes = props;
111
-
112
- export { DSPageHeader, DSPageHeaderV1WithSchema, DSPageHeader as default };
@@ -1,33 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
4
- import { ChevronSmallDown } from '@elliemae/ds-icons';
5
- import DSButton from '@elliemae/ds-button';
6
- import TitleWrapper from './TitleWrapper.js';
7
-
8
- var _DSButton;
9
-
10
- function DropdownTitle(_ref) {
11
- let {
12
- titleComponent,
13
- onSelectOption,
14
- options,
15
- optionsMinWidth,
16
- selection,
17
- zIndex
18
- } = _ref;
19
- return /*#__PURE__*/_jsx(TitleWrapper, {}, void 0, titleComponent, /*#__PURE__*/_jsx(DSDropdownMenu, {
20
- minWidth: optionsMinWidth,
21
- onSelectMenuItem: onSelectOption,
22
- options: options,
23
- selection: selection,
24
- triggerComponent: _DSButton || (_DSButton = /*#__PURE__*/_jsx(DSButton, {
25
- buttonType: "text",
26
- "data-testid": "page-header-dropdown-trigger-component",
27
- icon: /*#__PURE__*/_jsx(ChevronSmallDown, {})
28
- })),
29
- zIndex: zIndex
30
- }));
31
- }
32
-
33
- export { DropdownTitle as default };
@@ -1,47 +0,0 @@
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';
6
- import _jsx from '@babel/runtime/helpers/esm/jsx';
7
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
8
- import 'core-js/modules/web.dom-collections.iterator.js';
9
- import { useState, useRef } from 'react';
10
- import { useDerivedStateFromProps, runAll } from '@elliemae/ds-utilities';
11
- import { aggregatedClasses } from '@elliemae/ds-classnames';
12
- import DSInput from '@elliemae/ds-form/Input';
13
- import Title from './Title.js';
14
- import { jsx, Fragment } from 'react/jsx-runtime';
15
-
16
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
17
-
18
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
19
- const blockName = 'page-header';
20
- const EditableTitleComponent = aggregatedClasses(DSInput)("".concat(blockName, "-title"), 'editable-title');
21
-
22
- function EditableTitle(_ref) {
23
- let {
24
- children: value,
25
- editing: editingProp,
26
- titleInputProps
27
- } = _ref;
28
- const [titleValue, setTitleValue] = useState(value);
29
- const [hovered, setHovered] = useState(false);
30
- const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);
31
- const titleRef = useRef(null);
32
- return /*#__PURE__*/jsx(Fragment, {
33
- children: hovered || editing ? /*#__PURE__*/jsx(EditableTitleComponent, _objectSpread(_objectSpread({}, titleInputProps), {}, {
34
- onBlur: runAll(() => setEditing(false), titleInputProps.onBlur),
35
- onChange: runAll(e => setTitleValue(e.target.value), titleInputProps.onChange),
36
- onFocus: runAll(() => setEditing(true), titleInputProps.onFocus),
37
- onMouseOut: runAll(() => setHovered(false), titleInputProps.onMouseOut),
38
- value: titleValue
39
- })) : /*#__PURE__*/jsx("div", {
40
- ref: titleRef,
41
- onMouseEnter: () => setHovered(true),
42
- children: /*#__PURE__*/_jsx(Title, {}, void 0, titleValue)
43
- })
44
- });
45
- }
46
-
47
- export { EditableTitle as default };
@@ -1,121 +0,0 @@
1
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
- import _jsx from '@babel/runtime/helpers/esm/jsx';
3
- import 'core-js/modules/esnext.async-iterator.map.js';
4
- import 'core-js/modules/esnext.iterator.map.js';
5
- import 'core-js/modules/esnext.async-iterator.filter.js';
6
- import 'core-js/modules/esnext.iterator.constructor.js';
7
- import 'core-js/modules/esnext.iterator.filter.js';
8
- import 'core-js/modules/esnext.async-iterator.for-each.js';
9
- import 'core-js/modules/esnext.iterator.for-each.js';
10
- import 'react';
11
- import { isFunction } from '@elliemae/ds-utilities';
12
- import { aggregatedClasses } from '@elliemae/ds-classnames';
13
- import { ChevronLeft } from '@elliemae/ds-icons';
14
- import DSBreadcrumb from '@elliemae/ds-breadcrumb';
15
- import { DSIconSizes } from '@elliemae/ds-icon';
16
- import EditableTitle from './EditableTitle.js';
17
- import Title from './Title.js';
18
- import DropdownTitle from './DropdownTitle.js';
19
- import { jsxs, jsx } from 'react/jsx-runtime';
20
-
21
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
22
-
23
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
24
- const blockName = 'page-header';
25
- const PageHeaderContainer = aggregatedClasses('div')(blockName, null, _ref => {
26
- let {
27
- withBottomSeparator,
28
- subtitle
29
- } = _ref;
30
- return {
31
- 'with-bottom-separator': withBottomSeparator,
32
- 'with-subtitle': subtitle
33
- };
34
- });
35
- const PageHeaderMainSection = aggregatedClasses('div')("".concat(blockName, "-main-section"));
36
- const PageHeaderTitleSection = aggregatedClasses('div')("".concat(blockName, "-title-section"));
37
- const PageHeaderToolbar = aggregatedClasses('div')("".concat(blockName, "-toolbar"), null, () => ({
38
- 'ie-flex-basis-auto': true
39
- }));
40
- const PageHeaderBreadcrumb = aggregatedClasses(DSBreadcrumb)("".concat(blockName, "-breadcrumb"));
41
- const PageHeaderTitle = aggregatedClasses('div')("".concat(blockName, "-title"));
42
- const Subtitle = aggregatedClasses('div')("".concat(blockName, "-title"), 'subtitle');
43
- const BackArrow = aggregatedClasses(ChevronLeft)("".concat(blockName, "-backarrow"));
44
-
45
- function HeaderTitle(_ref2) {
46
- let {
47
- title = '',
48
- options = [],
49
- optionsMinWidth,
50
- onSelectOption = () => null,
51
- selection,
52
- subtitle = '',
53
- editable = false,
54
- editing = false,
55
- titleInputProps,
56
- zIndex
57
- } = _ref2;
58
- const titleComponent = editable ? /*#__PURE__*/_jsx(EditableTitle, {
59
- editing: editing,
60
- titleInputProps: titleInputProps
61
- }, void 0, title) : /*#__PURE__*/_jsx(Title, {}, void 0, title);
62
- return /*#__PURE__*/_jsx(PageHeaderTitle, {}, void 0, options.length ? /*#__PURE__*/_jsx(DropdownTitle, {
63
- onSelectOption: onSelectOption,
64
- options: options,
65
- optionsMinWidth: optionsMinWidth,
66
- selection: selection,
67
- titleComponent: titleComponent,
68
- zIndex: zIndex
69
- }) : titleComponent, subtitle && /*#__PURE__*/_jsx(Subtitle, {}, void 0, subtitle));
70
- }
71
-
72
- function PageHeaderImpl(_ref3) {
73
- let {
74
- containerProps,
75
- className,
76
- title,
77
- titleOptions,
78
- renderToolbar,
79
- breadcrumbs = [],
80
- previousPage,
81
- onGoToPreviousPage = () => null,
82
- subtitle = '',
83
- withBottomSeparator,
84
- onSelectOption,
85
- optionsSelection,
86
- optionsMinWidth,
87
- editable = false,
88
- titleInputProps,
89
- editing = undefined,
90
- zIndex
91
- } = _ref3;
92
- const hasBreadcrumbs = !!breadcrumbs.length;
93
- return /*#__PURE__*/jsxs(PageHeaderContainer, _objectSpread(_objectSpread({}, containerProps), {}, {
94
- className: className,
95
- classProps: {
96
- withBottomSeparator,
97
- subtitle
98
- },
99
- children: [previousPage && /*#__PURE__*/_jsx(BackArrow, {
100
- "data-testid": "back-arrow",
101
- onClick: onGoToPreviousPage,
102
- size: DSIconSizes.M
103
- }), /*#__PURE__*/_jsx(PageHeaderMainSection, {}, void 0, hasBreadcrumbs && /*#__PURE__*/_jsx(PageHeaderBreadcrumb, {}, void 0, breadcrumbs.map(breadcrumb => /*#__PURE__*/jsx(DSBreadcrumb.Item, _objectSpread({}, breadcrumb), breadcrumb.label))), previousPage && /*#__PURE__*/_jsx(PageHeaderBreadcrumb, {}, void 0, /*#__PURE__*/jsx(DSBreadcrumb.Item, _objectSpread({
104
- label: previousPage.title,
105
- onClick: previousPage.onClick
106
- }, previousPage), previousPage.id)), /*#__PURE__*/_jsx(PageHeaderTitleSection, {}, void 0, /*#__PURE__*/_jsx(HeaderTitle, {
107
- editable: editable,
108
- editing: editing,
109
- onSelectOption: onSelectOption,
110
- options: titleOptions,
111
- optionsMinWidth: optionsMinWidth,
112
- selection: optionsSelection,
113
- subtitle: subtitle,
114
- title: title,
115
- titleInputProps: titleInputProps,
116
- zIndex: zIndex
117
- }), isFunction(renderToolbar) && /*#__PURE__*/_jsx(PageHeaderToolbar, {}, void 0, renderToolbar())))]
118
- }));
119
- }
120
-
121
- export { PageHeaderImpl as default };
package/esm/v1/Title.js DELETED
@@ -1,18 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { aggregatedClasses } from '@elliemae/ds-classnames';
4
- import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
5
-
6
- const blockName = 'page-header';
7
- const TitleWrapper = aggregatedClasses(DSTruncatedTooltipText)("".concat(blockName, "-title"), 'title');
8
-
9
- const Title = _ref => {
10
- let {
11
- children
12
- } = _ref;
13
- return /*#__PURE__*/_jsx(TitleWrapper, {
14
- value: children
15
- });
16
- };
17
-
18
- export { Title as default };
@@ -1,6 +0,0 @@
1
- import { aggregatedClasses } from '@elliemae/ds-classnames';
2
-
3
- const blockName = 'page-header';
4
- var TitleWrapper = aggregatedClasses('span')("".concat(blockName, "-title-wrapper"));
5
-
6
- export { TitleWrapper as default };
@@ -1,75 +0,0 @@
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';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import _jsx from '@babel/runtime/helpers/esm/jsx';
8
- import 'react';
9
- import { describe } from 'react-desc';
10
- import { compact } from 'lodash';
11
- import styled from 'styled-components';
12
- import { Grid } from '@elliemae/ds-grid';
13
- export { PageHeaderTitle } from './components/PageHeaderTitle/PageHeaderTitle.js';
14
- export { PageHeaderEditableTitle } from './components/PageHeaderEditableTitle/PageHeaderEditableTitle.js';
15
- export { PageHeaderSummary } from './components/PageHeaderSummary/PageHeaderSummary.js';
16
- import { PageHeaderMenu } from './components/PageHeaderMenu/PageHeaderMenu.js';
17
- export { PageHeaderMenu } from './components/PageHeaderMenu/PageHeaderMenu.js';
18
- import { PageHeaderToolbar } from './components/PageHeaderToolbar/PageHeaderToolbar.js';
19
- import { PageHeaderBack } from './components/PageHeaderBack/PageHeaderBack.js';
20
- import './components/blocks.js';
21
- import { navProps, defaultProps } from './props.js';
22
- import { jsx } from 'react/jsx-runtime';
23
- import { cssPrefix } from '@elliemae/ds-classnames';
24
-
25
- var _div;
26
-
27
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
28
-
29
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
30
- const PageHeaderCustomRenderer = /*#__PURE__*/styled.div.withConfig({
31
- componentId: "sc-ps4m9w-0"
32
- })(["width:auto;color:", ";font-style:italic;font-size:0.8rem;"], props => props.theme.colors.brand[800]);
33
- const Container = /*#__PURE__*/styled.div.withConfig({
34
- componentId: "sc-ps4m9w-1"
35
- })(["width:100%;margin-bottom:8px;"]);
36
- const ContainerWBorder = /*#__PURE__*/styled.div.withConfig({
37
- componentId: "sc-ps4m9w-2"
38
- })(["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], ";"));
39
-
40
- const DSPageHeaderV2 = _ref => {
41
- let {
42
- containerProps,
43
- breadcrumbs,
44
- pageTitle,
45
- backarrow,
46
- summary,
47
- toolbar,
48
- menu,
49
- withBottomSeparator
50
- } = _ref;
51
- const wrapperRow = ['auto', 1];
52
- const mainRow = compact([1, 'auto']);
53
- const pageTitleRow = compact(['auto', menu && '30px', summary && 'auto', 1]);
54
- return /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
55
- children: /*#__PURE__*/_jsx(ContainerWBorder, {
56
- withBottomSeparator: withBottomSeparator
57
- }, void 0, /*#__PURE__*/_jsx(Grid, {
58
- cols: wrapperRow
59
- }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(PageHeaderBack, {}, void 0, backarrow)), /*#__PURE__*/_jsx(Grid, {
60
- rows: ['auto', 'auto']
61
- }, void 0, /*#__PURE__*/_jsx(Grid, {
62
- className: "".concat(cssPrefix, "-page-header-v2-breadcrumb")
63
- }, void 0, breadcrumbs), /*#__PURE__*/_jsx(Grid, {
64
- cols: mainRow
65
- }, void 0, /*#__PURE__*/_jsx(Grid, {
66
- cols: pageTitleRow
67
- }, void 0, pageTitle, menu && /*#__PURE__*/_jsx(PageHeaderMenu, {}, void 0, menu), summary, _div || (_div = /*#__PURE__*/_jsx("div", {}))), /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(PageHeaderToolbar, {}, void 0, toolbar))))))
68
- }));
69
- };
70
-
71
- DSPageHeaderV2.defaultProps = defaultProps;
72
- const DSPageHeaderWithSchema = describe(DSPageHeaderV2);
73
- DSPageHeaderWithSchema.propTypes = navProps;
74
-
75
- export { DSPageHeaderV2, DSPageHeaderWithSchema, PageHeaderCustomRenderer, DSPageHeaderV2 as default };
@@ -1,28 +0,0 @@
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';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
8
- import 'react';
9
- import { PageHeaderBackWrapper } from '../blocks.js';
10
- import { jsx } from 'react/jsx-runtime';
11
-
12
- const _excluded = ["children"];
13
-
14
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
15
-
16
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
17
- const PageHeaderBack = _ref => {
18
- let {
19
- children
20
- } = _ref,
21
- rest = _objectWithoutProperties(_ref, _excluded);
22
-
23
- return /*#__PURE__*/jsx(PageHeaderBackWrapper, _objectSpread(_objectSpread({}, rest), {}, {
24
- children: children
25
- }));
26
- };
27
-
28
- export { PageHeaderBack };
@@ -1,108 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
- import 'core-js/modules/web.dom-collections.iterator.js';
5
- import 'core-js/modules/esnext.async-iterator.filter.js';
6
- import 'core-js/modules/esnext.iterator.constructor.js';
7
- import 'core-js/modules/esnext.iterator.filter.js';
8
- import 'core-js/modules/esnext.async-iterator.for-each.js';
9
- import 'core-js/modules/esnext.iterator.for-each.js';
10
- import { useState, useRef } from 'react';
11
- import { noop } from 'lodash';
12
- import styled from 'styled-components';
13
- import { PropTypes, describe } from 'react-desc';
14
- import { useDerivedStateFromProps, useMeasure } from '@elliemae/ds-utilities';
15
- import { EditableTitleComponent } from '../blocks.js';
16
- import { PageHeaderTitle } from '../PageHeaderTitle/PageHeaderTitle.js';
17
- import { jsx } from 'react/jsx-runtime';
18
-
19
- const _excluded = ["children", "editing", "onBlur", "onChange", "onFocus", "onMouseOut", "showMarker"];
20
-
21
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
22
-
23
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
24
- const EditableContainer = /*#__PURE__*/styled.div.withConfig({
25
- componentId: "sc-v0pkny-0"
26
- })(["height:32px;position:relative;overflow:hidden;"]);
27
- const PageHeaderEditableTitle = _ref => {
28
- let {
29
- children: value,
30
- editing: editingProp = false,
31
- onBlur = noop,
32
- onChange = noop,
33
- onFocus = noop,
34
- onMouseOut = noop,
35
- showMarker = false
36
- } = _ref,
37
- rest = _objectWithoutProperties(_ref, _excluded);
38
-
39
- const [titleValue, setTitleValue] = useState(value);
40
- const [hovered, setHovered] = useState(false);
41
- const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);
42
- const titleRef = useRef(null);
43
- const {
44
- width
45
- } = useMeasure(titleRef);
46
- return /*#__PURE__*/_jsx(EditableContainer, {
47
- className: hovered || editing ? 'editable-title-component' : '',
48
- onMouseEnter: () => setHovered(true),
49
- onMouseLeave: () => setHovered(false)
50
- }, void 0, (hovered || editing) && /*#__PURE__*/jsx(EditableTitleComponent, _objectSpread(_objectSpread({}, rest), {}, {
51
- onBlur: e => {
52
- setEditing(false);
53
- onBlur(e);
54
- },
55
- onChange: e => {
56
- setTitleValue(e.target.value);
57
- onChange(e);
58
- },
59
- onFocus: e => {
60
- setEditing(true);
61
- onFocus(e);
62
- },
63
- onMouseOut: e => {
64
- setHovered(false);
65
- onMouseOut(e);
66
- },
67
- style: {
68
- width: width + 10,
69
- minWidth: '260px',
70
- maxWidth: '100%'
71
- },
72
- value: titleValue
73
- })), /*#__PURE__*/jsx("div", {
74
- ref: titleRef,
75
- style: {
76
- width: 'fit-content'
77
- },
78
- children: /*#__PURE__*/_jsx(PageHeaderTitle, {
79
- showMarker: showMarker && !hovered && !editing
80
- }, void 0, titleValue)
81
- }));
82
- };
83
- const props = {
84
- /** The title text */
85
- children: PropTypes.string.description('The title text'),
86
-
87
- /** Whether the title is editing or not */
88
- editing: PropTypes.bool.description('Whether the title is editing or not'),
89
-
90
- /** Show error marker */
91
- showMarker: PropTypes.bool.description('Show error marker'),
92
-
93
- /** blur callback */
94
- onBlur: PropTypes.func.description('blur callback'),
95
-
96
- /** on change handler */
97
- onChange: PropTypes.func.description('on change handler'),
98
-
99
- /** on focus handler */
100
- onFocus: PropTypes.func.description('on focus handler'),
101
-
102
- /** mouse out of component handler */
103
- onMouseOut: PropTypes.func.description('mouse out of component handler')
104
- };
105
- const DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);
106
- DSPageHeaderEditableTitleWithSchema.propTypes = props;
107
-
108
- export { DSPageHeaderEditableTitleWithSchema, PageHeaderEditableTitle, PageHeaderEditableTitle as default };
@@ -1,28 +0,0 @@
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';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
8
- import 'react';
9
- import { PageHeaderMenuWrapper } from '../blocks.js';
10
- import { jsx } from 'react/jsx-runtime';
11
-
12
- const _excluded = ["children"];
13
-
14
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
15
-
16
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
17
- const PageHeaderMenu = _ref => {
18
- let {
19
- children
20
- } = _ref,
21
- rest = _objectWithoutProperties(_ref, _excluded);
22
-
23
- return /*#__PURE__*/jsx(PageHeaderMenuWrapper, _objectSpread(_objectSpread({}, rest), {}, {
24
- children: children
25
- }));
26
- };
27
-
28
- export { PageHeaderMenu };
@@ -1,50 +0,0 @@
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';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import _jsx from '@babel/runtime/helpers/esm/jsx';
8
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
9
- import 'react';
10
- import { PropTypes, describe } from 'react-desc';
11
- import { PageHeaderSummaryWrapper } from '../blocks.js';
12
- import { jsxs } from 'react/jsx-runtime';
13
-
14
- var _div;
15
-
16
- const _excluded = ["value", "label"];
17
-
18
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
19
-
20
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
21
-
22
- const PageHeaderSummary = _ref => {
23
- let {
24
- value = null,
25
- label = ''
26
- } = _ref,
27
- rest = _objectWithoutProperties(_ref, _excluded);
28
-
29
- return /*#__PURE__*/jsxs(PageHeaderSummaryWrapper, _objectSpread(_objectSpread({}, rest), {}, {
30
- children: [(value === 0 || value) && /*#__PURE__*/_jsx("div", {
31
- className: "ph-summary-value"
32
- }, void 0, value), label && /*#__PURE__*/_jsx("div", {
33
- className: "ph-summary-label"
34
- }, void 0, label), (value === 0 || value || label) && (_div || (_div = /*#__PURE__*/_jsx("div", {
35
- className: "ph-summary-space"
36
- })))]
37
- }));
38
- };
39
-
40
- const props = {
41
- /** value for page header summary */
42
- value: PropTypes.number.description('value for page header summary'),
43
-
44
- /** label attached to value */
45
- label: PropTypes.string.description('label attached to value')
46
- };
47
- const DSPageHeaderSummaryWithSchema = describe(PageHeaderSummary);
48
- DSPageHeaderSummaryWithSchema.propTypes = props;
49
-
50
- export { DSPageHeaderSummaryWithSchema, PageHeaderSummary };