@elliemae/ds-global-header 2.0.0-next.7 → 2.0.0-rc.10
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/GlobalHeaderContainer.js +10 -7
- package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js +2 -0
- package/cjs/components/Breadcrumb/PureBreadcrumb.js +22 -20
- package/cjs/components/Breadcrumb/styles.js +40 -19
- package/cjs/components/Toolbar/ToolbarItems.js +15 -16
- package/cjs/components/Toolbar/styles.js +16 -7
- package/cjs/config/useGetPropsWithDefaults.js +5 -0
- package/cjs/config/useGlobalHeader.js +2 -0
- package/cjs/config/useValidateProps.js +3 -0
- package/cjs/outOfTheBox/AppPicker/AppPicker.js +31 -28
- package/cjs/outOfTheBox/PopupMenu/PopupMenu.js +25 -21
- package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js +8 -5
- package/cjs/outOfTheBox/PopupMenu/styles.js +6 -3
- package/cjs/styles.js +6 -3
- package/esm/GlobalHeaderContainer.js +10 -7
- package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js +2 -0
- package/esm/components/Breadcrumb/PureBreadcrumb.js +22 -19
- package/esm/components/Breadcrumb/styles.js +40 -19
- package/esm/components/Toolbar/ToolbarItems.js +15 -17
- package/esm/components/Toolbar/styles.js +16 -7
- package/esm/config/useGetPropsWithDefaults.js +5 -0
- package/esm/config/useGlobalHeader.js +2 -0
- package/esm/config/useValidateProps.js +3 -0
- package/esm/outOfTheBox/AppPicker/AppPicker.js +31 -27
- package/esm/outOfTheBox/PopupMenu/PopupMenu.js +25 -21
- package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js +8 -5
- package/esm/outOfTheBox/PopupMenu/styles.js +6 -3
- package/esm/styles.js +6 -3
- package/package.json +7 -9
- package/types/GlobalHeader.d.ts +30 -5
- package/types/components/Breadcrumb/styles.d.ts +4 -4
- package/types/components/Toolbar/styles.d.ts +1 -1
- package/types/outOfTheBox/PopupMenu/styles.d.ts +4 -4
- package/types/propTypes.d.ts +27 -6
- package/types/styles.d.ts +1 -1
|
@@ -10,12 +10,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
|
|
11
11
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
12
12
|
|
|
13
|
-
const GlobalHeaderContainer =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}, void 0,
|
|
13
|
+
const GlobalHeaderContainer = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
children
|
|
16
|
+
} = _ref;
|
|
17
|
+
return /*#__PURE__*/_jsx__default["default"]("header", {
|
|
18
|
+
"data-testid": "ds-global-header"
|
|
19
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Wrapper, {
|
|
20
|
+
cols: ['auto', '1fr', 'auto']
|
|
21
|
+
}, void 0, children));
|
|
22
|
+
};
|
|
20
23
|
|
|
21
24
|
exports.GlobalHeaderContainer = GlobalHeaderContainer;
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
6
8
|
var React = require('react');
|
|
7
9
|
var dsGrid = require('@elliemae/ds-grid');
|
|
8
10
|
var styles = require('./styles.js');
|
|
@@ -4,32 +4,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var
|
|
7
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
8
8
|
var styles = require('./styles.js');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
|
12
12
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
|
-
var Chevron__default = /*#__PURE__*/_interopDefaultLegacy(Chevron);
|
|
15
14
|
|
|
16
|
-
var
|
|
17
|
-
const PureBreadcrumb = /*#__PURE__*/React__default["default"].memo(
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
15
|
+
var _ChevronSmallRight;
|
|
16
|
+
const PureBreadcrumb = /*#__PURE__*/React__default["default"].memo(_ref => {
|
|
17
|
+
let {
|
|
18
|
+
onClick,
|
|
19
|
+
isSelected,
|
|
20
|
+
length,
|
|
21
|
+
label,
|
|
22
|
+
hasNext
|
|
23
|
+
} = _ref;
|
|
24
|
+
return /*#__PURE__*/_jsx__default["default"](styles.BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.LabelButton, {
|
|
25
|
+
onClick: onClick,
|
|
26
|
+
"aria-selected": isSelected,
|
|
27
|
+
"data-testid": "gh-breadcrumb-btn"
|
|
28
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Label, {
|
|
29
|
+
isSelected: isSelected,
|
|
30
|
+
isOnlyItem: length === 1
|
|
31
|
+
}, void 0, label)), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {
|
|
32
|
+
size: "m",
|
|
33
|
+
fill: "#FFF"
|
|
34
|
+
}))));
|
|
35
|
+
});
|
|
34
36
|
|
|
35
37
|
exports.PureBreadcrumb = PureBreadcrumb;
|
|
@@ -10,32 +10,53 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
10
10
|
|
|
11
11
|
const Pipe = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
12
12
|
componentId: "sc-1n5l527-0"
|
|
13
|
-
})(["margin:0 7px 0 0;border-left:", ";height:20px;"],
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
})(["margin:0 7px 0 0;border-left:", ";height:20px;"], _ref => {
|
|
14
|
+
let {
|
|
15
|
+
showIconOnly
|
|
16
|
+
} = _ref;
|
|
17
|
+
return showIconOnly ? 'none' : '1px solid #fff';
|
|
18
|
+
});
|
|
16
19
|
const BreadcrumbItem = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
17
20
|
componentId: "sc-1n5l527-1"
|
|
18
21
|
})(["display:flex;align-items:center;height:100%;"]);
|
|
19
22
|
const LabelButton = /*#__PURE__*/styled__default["default"].button.withConfig({
|
|
20
23
|
componentId: "sc-1n5l527-2"
|
|
21
|
-
})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{:after{content:'';position:absolute;top:0;left:-7px;width:calc(100% + 14px);height:100%;border:4px solid ", ";border-radius:6px;}:before{content:'';position:absolute;z-index:2;top:2px;left:-5px;width:calc(100% + 10px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"],
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{:after{content:'';position:absolute;top:0;left:-7px;width:calc(100% + 14px);height:100%;border:4px solid ", ";border-radius:6px;}:before{content:'';position:absolute;z-index:2;top:2px;left:-5px;width:calc(100% + 10px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref2 => {
|
|
25
|
+
let {
|
|
26
|
+
theme
|
|
27
|
+
} = _ref2;
|
|
28
|
+
return theme.colors.brand[700];
|
|
29
|
+
}, _ref3 => {
|
|
30
|
+
let {
|
|
31
|
+
theme
|
|
32
|
+
} = _ref3;
|
|
33
|
+
return theme.colors.neutral['000'];
|
|
34
|
+
});
|
|
26
35
|
const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
|
|
27
36
|
componentId: "sc-1n5l527-3"
|
|
28
|
-
})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"],
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], _ref4 => {
|
|
38
|
+
let {
|
|
39
|
+
theme
|
|
40
|
+
} = _ref4;
|
|
41
|
+
return theme.colors.neutral['000'];
|
|
42
|
+
}, _ref5 => {
|
|
43
|
+
let {
|
|
44
|
+
theme,
|
|
45
|
+
isSelected
|
|
46
|
+
} = _ref5;
|
|
47
|
+
return "-webkit-text-stroke: 0.4px ".concat(isSelected ? theme.colors.neutral['000'] : 'transparent');
|
|
48
|
+
}, _ref6 => {
|
|
49
|
+
let {
|
|
50
|
+
isSelected,
|
|
51
|
+
isOnlyItem
|
|
52
|
+
} = _ref6;
|
|
53
|
+
return "2px solid ".concat(isSelected && !isOnlyItem ? '#FFF' : 'transparent');
|
|
54
|
+
}, _ref7 => {
|
|
55
|
+
let {
|
|
56
|
+
theme
|
|
57
|
+
} = _ref7;
|
|
58
|
+
return "-webkit-text-stroke: 0.4px ".concat(theme.colors.neutral['000']);
|
|
59
|
+
});
|
|
39
60
|
|
|
40
61
|
exports.BreadcrumbItem = BreadcrumbItem;
|
|
41
62
|
exports.Label = Label;
|
|
@@ -2,7 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
6
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.map.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');
|
|
6
14
|
var React = require('react');
|
|
7
15
|
var AppPicker = require('../../outOfTheBox/AppPicker/AppPicker.js');
|
|
8
16
|
var PopupMenu = require('../../outOfTheBox/PopupMenu/PopupMenu.js');
|
|
@@ -12,8 +20,12 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
12
20
|
|
|
13
21
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
22
|
|
|
23
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
15
24
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
16
25
|
|
|
26
|
+
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; }
|
|
27
|
+
|
|
28
|
+
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; }
|
|
17
29
|
const ToolbarItems = () => {
|
|
18
30
|
const {
|
|
19
31
|
props: {
|
|
@@ -47,24 +59,11 @@ const ToolbarItems = () => {
|
|
|
47
59
|
}, "".concat(instanceUID, "-ds-popup-menu-").concat(label));
|
|
48
60
|
|
|
49
61
|
case 'ds-app-picker':
|
|
50
|
-
|
|
51
|
-
apps,
|
|
52
|
-
customApps,
|
|
53
|
-
sectionTitle,
|
|
54
|
-
customSectionTitle,
|
|
55
|
-
actionRef,
|
|
56
|
-
onKeyDown
|
|
57
|
-
} = componentProps;
|
|
58
|
-
return /*#__PURE__*/_jsx__default["default"](AppPicker.AppPicker, {
|
|
62
|
+
return /*#__PURE__*/React.createElement(AppPicker.AppPicker, _objectSpread(_objectSpread({}, componentProps), {}, {
|
|
59
63
|
onClick: onClick,
|
|
60
64
|
label: label,
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
sectionTitle: sectionTitle,
|
|
64
|
-
customSectionTitle: customSectionTitle,
|
|
65
|
-
actionRef: actionRef,
|
|
66
|
-
onKeyDown: onKeyDown
|
|
67
|
-
}, "".concat(instanceUID, "-ds-app-picker-").concat(label));
|
|
65
|
+
key: "".concat(instanceUID, "-ds-app-picker-").concat(label)
|
|
66
|
+
}));
|
|
68
67
|
|
|
69
68
|
default:
|
|
70
69
|
return /*#__PURE__*/_jsx__default["default"](styles.Button, {
|
|
@@ -10,12 +10,21 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
10
10
|
|
|
11
11
|
const Button = /*#__PURE__*/styled__default["default"].button.withConfig({
|
|
12
12
|
componentId: "sc-1gqj0i3-0"
|
|
13
|
-
})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid ", ";border-radius:4px;}:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"],
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
13
|
+
})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid ", ";border-radius:4px;}:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref => {
|
|
14
|
+
let {
|
|
15
|
+
theme
|
|
16
|
+
} = _ref;
|
|
17
|
+
return theme.colors.brand[700];
|
|
18
|
+
}, _ref2 => {
|
|
19
|
+
let {
|
|
20
|
+
theme
|
|
21
|
+
} = _ref2;
|
|
22
|
+
return theme.colors.brand[700];
|
|
23
|
+
}, _ref3 => {
|
|
24
|
+
let {
|
|
25
|
+
theme
|
|
26
|
+
} = _ref3;
|
|
27
|
+
return theme.colors.neutral['000'];
|
|
28
|
+
});
|
|
20
29
|
|
|
21
30
|
exports.Button = Button;
|
|
@@ -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 React = require('react');
|
|
7
12
|
var defaultProps = require('../defaultProps.js');
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
6
8
|
var React = require('react');
|
|
7
9
|
var uid = require('uid');
|
|
8
10
|
var useGetPropsWithDefaults = require('./useGetPropsWithDefaults.js');
|
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
8
|
var validateHelpers = require('./validateHelpers.js');
|
|
6
9
|
|
|
7
10
|
const validatePopupItem = componentProps => {
|
|
@@ -6,28 +6,28 @@ var _jsx = require('@babel/runtime/helpers/jsx');
|
|
|
6
6
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var dsAppPicker = require('@elliemae/ds-app-picker');
|
|
9
|
-
var
|
|
9
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
10
10
|
var styles = require('../../components/Toolbar/styles.js');
|
|
11
11
|
var jsxRuntime = require('react/jsx-runtime');
|
|
12
12
|
|
|
13
13
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
14
|
|
|
15
15
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
16
|
-
var MenuPicker__default = /*#__PURE__*/_interopDefaultLegacy(MenuPicker);
|
|
17
16
|
|
|
18
17
|
var _MenuPicker;
|
|
19
|
-
const AppPicker =
|
|
20
|
-
label,
|
|
21
|
-
apps,
|
|
22
|
-
customApps,
|
|
23
|
-
sectionTitle,
|
|
24
|
-
customSectionTitle,
|
|
25
|
-
onClick = () => null,
|
|
26
|
-
actionRef,
|
|
27
|
-
onKeyDown: customHandleOnKeyDown = () => null
|
|
28
|
-
}) => {
|
|
18
|
+
const AppPicker = _ref => {
|
|
29
19
|
var _DSAppPicker;
|
|
30
20
|
|
|
21
|
+
let {
|
|
22
|
+
label,
|
|
23
|
+
apps,
|
|
24
|
+
customApps,
|
|
25
|
+
sectionTitle,
|
|
26
|
+
customSectionTitle,
|
|
27
|
+
onClick = () => null,
|
|
28
|
+
actionRef,
|
|
29
|
+
onKeyDown: customHandleOnKeyDown = () => null
|
|
30
|
+
} = _ref;
|
|
31
31
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
32
32
|
const buttonRef = React.useRef();
|
|
33
33
|
const handleTriggerKeyDown = React.useCallback(e => {
|
|
@@ -49,22 +49,25 @@ const AppPicker = ({
|
|
|
49
49
|
setIsOpen(true);
|
|
50
50
|
onClick(e);
|
|
51
51
|
}, [onClick]);
|
|
52
|
-
const trigger = React.useMemo(() =>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
52
|
+
const trigger = React.useMemo(() => _ref2 => {
|
|
53
|
+
let {
|
|
54
|
+
ref
|
|
55
|
+
} = _ref2;
|
|
56
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
57
|
+
ref: ref,
|
|
58
|
+
children: /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
|
|
59
|
+
onClick: handleOnClick,
|
|
60
|
+
onKeyDown: handleTriggerKeyDown,
|
|
61
|
+
ref: buttonRef,
|
|
62
|
+
title: label,
|
|
63
|
+
"data-testid": "gh-toolbar-item",
|
|
64
|
+
children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx__default["default"](dsIcons.MenuPicker, {
|
|
65
|
+
fill: "#FFF",
|
|
66
|
+
size: "m"
|
|
67
|
+
}))
|
|
68
|
+
})
|
|
69
|
+
});
|
|
70
|
+
}, [handleOnClick, handleTriggerKeyDown, label]);
|
|
68
71
|
return React.useMemo(() => _DSAppPicker || (_DSAppPicker = /*#__PURE__*/_jsx__default["default"](dsAppPicker.DSAppPicker, {
|
|
69
72
|
isOpen: isOpen,
|
|
70
73
|
apps: apps,
|
|
@@ -15,15 +15,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
15
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
16
16
|
var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
|
|
17
17
|
|
|
18
|
-
const PopupMenu =
|
|
19
|
-
Icon,
|
|
20
|
-
options,
|
|
21
|
-
closeOnClick,
|
|
22
|
-
title,
|
|
23
|
-
onClick
|
|
24
|
-
}) => {
|
|
18
|
+
const PopupMenu = _ref => {
|
|
25
19
|
var _PopupMenuContent;
|
|
26
20
|
|
|
21
|
+
let {
|
|
22
|
+
Icon,
|
|
23
|
+
options,
|
|
24
|
+
closeOnClick,
|
|
25
|
+
title,
|
|
26
|
+
onClick
|
|
27
|
+
} = _ref;
|
|
27
28
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
28
29
|
const buttonRef = React.useRef();
|
|
29
30
|
const handleKeyPress = React.useCallback(e => {
|
|
@@ -50,20 +51,23 @@ const PopupMenu = ({
|
|
|
50
51
|
onItemClick: handleItemClick,
|
|
51
52
|
onClose: handleOnClose
|
|
52
53
|
})), [options, handleItemClick, handleOnClose]);
|
|
53
|
-
const trigger = React.useMemo(() =>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
54
|
+
const trigger = React.useMemo(() => _ref2 => {
|
|
55
|
+
let {
|
|
56
|
+
ref
|
|
57
|
+
} = _ref2;
|
|
58
|
+
return /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
|
|
59
|
+
onClick: handleTriggerOnClick,
|
|
60
|
+
onKeyPress: handleKeyPress,
|
|
61
|
+
title: title,
|
|
62
|
+
ref: buttonRef,
|
|
63
|
+
"data-testid": "gh-toolbar-item",
|
|
64
|
+
children: /*#__PURE__*/_jsx__default["default"](Icon, {
|
|
65
|
+
innerRef: ref,
|
|
66
|
+
fill: "#FFF",
|
|
67
|
+
size: "m"
|
|
68
|
+
})
|
|
69
|
+
});
|
|
70
|
+
}, [Icon, handleKeyPress, handleTriggerOnClick, title]);
|
|
67
71
|
return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Popover__default["default"], {
|
|
68
72
|
isOpen: isOpen,
|
|
69
73
|
content: content,
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
6
8
|
var React = require('react');
|
|
7
9
|
var styles = require('./styles.js');
|
|
8
10
|
var GlobalHeaderContext = require('../../GlobalHeaderContext.js');
|
|
@@ -13,11 +15,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
15
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
14
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
15
17
|
|
|
16
|
-
const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
|
|
19
|
+
let {
|
|
20
|
+
options,
|
|
21
|
+
onItemClick,
|
|
22
|
+
onClose
|
|
23
|
+
} = _ref;
|
|
21
24
|
const {
|
|
22
25
|
instanceUID
|
|
23
26
|
} = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
|
|
@@ -13,9 +13,12 @@ const List = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
|
13
13
|
})(["padding:5px 0px;"]);
|
|
14
14
|
const ItemWrapper = /*#__PURE__*/styled__default["default"].button.withConfig({
|
|
15
15
|
componentId: "sc-snqcgs-1"
|
|
16
|
-
})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"],
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"], _ref => {
|
|
17
|
+
let {
|
|
18
|
+
theme
|
|
19
|
+
} = _ref;
|
|
20
|
+
return "1px solid ".concat(theme.colors.brand[600]);
|
|
21
|
+
});
|
|
19
22
|
const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
|
|
20
23
|
componentId: "sc-snqcgs-2"
|
|
21
24
|
})(["width:100%;font-size:14px;margin:10px;"]);
|
package/cjs/styles.js
CHANGED
|
@@ -11,8 +11,11 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
11
11
|
|
|
12
12
|
const Wrapper = /*#__PURE__*/styled__default["default"](dsGrid.GridContainer).withConfig({
|
|
13
13
|
componentId: "sc-1v5zxxm-0"
|
|
14
|
-
})(["background-image:linear-gradient(45deg,#0f364a 0%,#1b6392 54%,#164566 100%);color:", ";width:100%;height:40px;padding:0 24px 0 12px;"],
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
})(["background-image:linear-gradient(45deg,#0f364a 0%,#1b6392 54%,#164566 100%);color:", ";width:100%;height:40px;padding:0 24px 0 12px;"], _ref => {
|
|
15
|
+
let {
|
|
16
|
+
theme
|
|
17
|
+
} = _ref;
|
|
18
|
+
return theme.colors.neutral['000'];
|
|
19
|
+
});
|
|
17
20
|
|
|
18
21
|
exports.Wrapper = Wrapper;
|
|
@@ -2,12 +2,15 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
|
2
2
|
import 'react';
|
|
3
3
|
import { Wrapper } from './styles.js';
|
|
4
4
|
|
|
5
|
-
const GlobalHeaderContainer =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}, void 0,
|
|
5
|
+
const GlobalHeaderContainer = _ref => {
|
|
6
|
+
let {
|
|
7
|
+
children
|
|
8
|
+
} = _ref;
|
|
9
|
+
return /*#__PURE__*/_jsx("header", {
|
|
10
|
+
"data-testid": "ds-global-header"
|
|
11
|
+
}, void 0, /*#__PURE__*/_jsx(Wrapper, {
|
|
12
|
+
cols: ['auto', '1fr', 'auto']
|
|
13
|
+
}, void 0, children));
|
|
14
|
+
};
|
|
12
15
|
|
|
13
16
|
export { GlobalHeaderContainer };
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
2
4
|
import { useContext, useRef, useEffect } from 'react';
|
|
3
5
|
import { Grid } from '@elliemae/ds-grid';
|
|
4
6
|
import { Pipe } from './styles.js';
|
|
@@ -1,25 +1,28 @@
|
|
|
1
1
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import
|
|
3
|
+
import { ChevronSmallRight } from '@elliemae/ds-icons';
|
|
4
4
|
import { BreadcrumbItem, LabelButton, Label } from './styles.js';
|
|
5
5
|
|
|
6
|
-
var
|
|
7
|
-
const PureBreadcrumb = /*#__PURE__*/React.memo(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
6
|
+
var _ChevronSmallRight;
|
|
7
|
+
const PureBreadcrumb = /*#__PURE__*/React.memo(_ref => {
|
|
8
|
+
let {
|
|
9
|
+
onClick,
|
|
10
|
+
isSelected,
|
|
11
|
+
length,
|
|
12
|
+
label,
|
|
13
|
+
hasNext
|
|
14
|
+
} = _ref;
|
|
15
|
+
return /*#__PURE__*/_jsx(BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx(LabelButton, {
|
|
16
|
+
onClick: onClick,
|
|
17
|
+
"aria-selected": isSelected,
|
|
18
|
+
"data-testid": "gh-breadcrumb-btn"
|
|
19
|
+
}, void 0, /*#__PURE__*/_jsx(Label, {
|
|
20
|
+
isSelected: isSelected,
|
|
21
|
+
isOnlyItem: length === 1
|
|
22
|
+
}, void 0, label)), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx(ChevronSmallRight, {
|
|
23
|
+
size: "m",
|
|
24
|
+
fill: "#FFF"
|
|
25
|
+
}))));
|
|
26
|
+
});
|
|
24
27
|
|
|
25
28
|
export { PureBreadcrumb };
|
|
@@ -2,31 +2,52 @@ import styled from 'styled-components';
|
|
|
2
2
|
|
|
3
3
|
const Pipe = /*#__PURE__*/styled.span.withConfig({
|
|
4
4
|
componentId: "sc-1n5l527-0"
|
|
5
|
-
})(["margin:0 7px 0 0;border-left:", ";height:20px;"],
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
})(["margin:0 7px 0 0;border-left:", ";height:20px;"], _ref => {
|
|
6
|
+
let {
|
|
7
|
+
showIconOnly
|
|
8
|
+
} = _ref;
|
|
9
|
+
return showIconOnly ? 'none' : '1px solid #fff';
|
|
10
|
+
});
|
|
8
11
|
const BreadcrumbItem = /*#__PURE__*/styled.div.withConfig({
|
|
9
12
|
componentId: "sc-1n5l527-1"
|
|
10
13
|
})(["display:flex;align-items:center;height:100%;"]);
|
|
11
14
|
const LabelButton = /*#__PURE__*/styled.button.withConfig({
|
|
12
15
|
componentId: "sc-1n5l527-2"
|
|
13
|
-
})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{:after{content:'';position:absolute;top:0;left:-7px;width:calc(100% + 14px);height:100%;border:4px solid ", ";border-radius:6px;}:before{content:'';position:absolute;z-index:2;top:2px;left:-5px;width:calc(100% + 10px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"],
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{:after{content:'';position:absolute;top:0;left:-7px;width:calc(100% + 14px);height:100%;border:4px solid ", ";border-radius:6px;}:before{content:'';position:absolute;z-index:2;top:2px;left:-5px;width:calc(100% + 10px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref2 => {
|
|
17
|
+
let {
|
|
18
|
+
theme
|
|
19
|
+
} = _ref2;
|
|
20
|
+
return theme.colors.brand[700];
|
|
21
|
+
}, _ref3 => {
|
|
22
|
+
let {
|
|
23
|
+
theme
|
|
24
|
+
} = _ref3;
|
|
25
|
+
return theme.colors.neutral['000'];
|
|
26
|
+
});
|
|
18
27
|
const Label = /*#__PURE__*/styled.p.withConfig({
|
|
19
28
|
componentId: "sc-1n5l527-3"
|
|
20
|
-
})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"],
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], _ref4 => {
|
|
30
|
+
let {
|
|
31
|
+
theme
|
|
32
|
+
} = _ref4;
|
|
33
|
+
return theme.colors.neutral['000'];
|
|
34
|
+
}, _ref5 => {
|
|
35
|
+
let {
|
|
36
|
+
theme,
|
|
37
|
+
isSelected
|
|
38
|
+
} = _ref5;
|
|
39
|
+
return "-webkit-text-stroke: 0.4px ".concat(isSelected ? theme.colors.neutral['000'] : 'transparent');
|
|
40
|
+
}, _ref6 => {
|
|
41
|
+
let {
|
|
42
|
+
isSelected,
|
|
43
|
+
isOnlyItem
|
|
44
|
+
} = _ref6;
|
|
45
|
+
return "2px solid ".concat(isSelected && !isOnlyItem ? '#FFF' : 'transparent');
|
|
46
|
+
}, _ref7 => {
|
|
47
|
+
let {
|
|
48
|
+
theme
|
|
49
|
+
} = _ref7;
|
|
50
|
+
return "-webkit-text-stroke: 0.4px ".concat(theme.colors.neutral['000']);
|
|
51
|
+
});
|
|
31
52
|
|
|
32
53
|
export { BreadcrumbItem, Label, LabelButton, Pipe };
|
|
@@ -1,11 +1,22 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
1
2
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
-
import
|
|
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 { useContext, useMemo, createElement } from 'react';
|
|
3
11
|
import { AppPicker } from '../../outOfTheBox/AppPicker/AppPicker.js';
|
|
4
12
|
import { PopupMenu } from '../../outOfTheBox/PopupMenu/PopupMenu.js';
|
|
5
13
|
import { Button } from './styles.js';
|
|
6
14
|
import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
|
|
7
15
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
8
16
|
|
|
17
|
+
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; }
|
|
18
|
+
|
|
19
|
+
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; }
|
|
9
20
|
const ToolbarItems = () => {
|
|
10
21
|
const {
|
|
11
22
|
props: {
|
|
@@ -39,24 +50,11 @@ const ToolbarItems = () => {
|
|
|
39
50
|
}, "".concat(instanceUID, "-ds-popup-menu-").concat(label));
|
|
40
51
|
|
|
41
52
|
case 'ds-app-picker':
|
|
42
|
-
|
|
43
|
-
apps,
|
|
44
|
-
customApps,
|
|
45
|
-
sectionTitle,
|
|
46
|
-
customSectionTitle,
|
|
47
|
-
actionRef,
|
|
48
|
-
onKeyDown
|
|
49
|
-
} = componentProps;
|
|
50
|
-
return /*#__PURE__*/_jsx(AppPicker, {
|
|
53
|
+
return /*#__PURE__*/createElement(AppPicker, _objectSpread(_objectSpread({}, componentProps), {}, {
|
|
51
54
|
onClick: onClick,
|
|
52
55
|
label: label,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
sectionTitle: sectionTitle,
|
|
56
|
-
customSectionTitle: customSectionTitle,
|
|
57
|
-
actionRef: actionRef,
|
|
58
|
-
onKeyDown: onKeyDown
|
|
59
|
-
}, "".concat(instanceUID, "-ds-app-picker-").concat(label));
|
|
56
|
+
key: "".concat(instanceUID, "-ds-app-picker-").concat(label)
|
|
57
|
+
}));
|
|
60
58
|
|
|
61
59
|
default:
|
|
62
60
|
return /*#__PURE__*/_jsx(Button, {
|
|
@@ -2,12 +2,21 @@ import styled from 'styled-components';
|
|
|
2
2
|
|
|
3
3
|
const Button = /*#__PURE__*/styled.button.withConfig({
|
|
4
4
|
componentId: "sc-1gqj0i3-0"
|
|
5
|
-
})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid ", ";border-radius:4px;}:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"],
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid ", ";border-radius:4px;}:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref => {
|
|
6
|
+
let {
|
|
7
|
+
theme
|
|
8
|
+
} = _ref;
|
|
9
|
+
return theme.colors.brand[700];
|
|
10
|
+
}, _ref2 => {
|
|
11
|
+
let {
|
|
12
|
+
theme
|
|
13
|
+
} = _ref2;
|
|
14
|
+
return theme.colors.brand[700];
|
|
15
|
+
}, _ref3 => {
|
|
16
|
+
let {
|
|
17
|
+
theme
|
|
18
|
+
} = _ref3;
|
|
19
|
+
return theme.colors.neutral['000'];
|
|
20
|
+
});
|
|
12
21
|
|
|
13
22
|
export { Button };
|
|
@@ -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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import { useMemo } from 'react';
|
|
3
8
|
import { defaultProps } from '../defaultProps.js';
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
2
4
|
import React, { useState, useMemo } from 'react';
|
|
3
5
|
import { uid } from 'uid';
|
|
4
6
|
import { useGetPropsWithDefaults } from './useGetPropsWithDefaults.js';
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
4
|
import { throwLogoError, throwBreadcrumbItemError, isValidToolbarType, throwToolbarItemGenericError, isObject, throwToolbarPopupItemError, throwToolbarAppPickerItemError } from './validateHelpers.js';
|
|
2
5
|
|
|
3
6
|
const validatePopupItem = componentProps => {
|
|
@@ -2,23 +2,24 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
|
2
2
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
3
3
|
import { useState, useRef, useCallback, useMemo } from 'react';
|
|
4
4
|
import { DSAppPicker } from '@elliemae/ds-app-picker';
|
|
5
|
-
import MenuPicker from '@elliemae/ds-icons
|
|
5
|
+
import { MenuPicker } from '@elliemae/ds-icons';
|
|
6
6
|
import { Button } from '../../components/Toolbar/styles.js';
|
|
7
7
|
import { jsx } from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
9
|
var _MenuPicker;
|
|
10
|
-
const AppPicker =
|
|
11
|
-
label,
|
|
12
|
-
apps,
|
|
13
|
-
customApps,
|
|
14
|
-
sectionTitle,
|
|
15
|
-
customSectionTitle,
|
|
16
|
-
onClick = () => null,
|
|
17
|
-
actionRef,
|
|
18
|
-
onKeyDown: customHandleOnKeyDown = () => null
|
|
19
|
-
}) => {
|
|
10
|
+
const AppPicker = _ref => {
|
|
20
11
|
var _DSAppPicker;
|
|
21
12
|
|
|
13
|
+
let {
|
|
14
|
+
label,
|
|
15
|
+
apps,
|
|
16
|
+
customApps,
|
|
17
|
+
sectionTitle,
|
|
18
|
+
customSectionTitle,
|
|
19
|
+
onClick = () => null,
|
|
20
|
+
actionRef,
|
|
21
|
+
onKeyDown: customHandleOnKeyDown = () => null
|
|
22
|
+
} = _ref;
|
|
22
23
|
const [isOpen, setIsOpen] = useState(false);
|
|
23
24
|
const buttonRef = useRef();
|
|
24
25
|
const handleTriggerKeyDown = useCallback(e => {
|
|
@@ -40,22 +41,25 @@ const AppPicker = ({
|
|
|
40
41
|
setIsOpen(true);
|
|
41
42
|
onClick(e);
|
|
42
43
|
}, [onClick]);
|
|
43
|
-
const trigger = useMemo(() =>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
44
|
+
const trigger = useMemo(() => _ref2 => {
|
|
45
|
+
let {
|
|
46
|
+
ref
|
|
47
|
+
} = _ref2;
|
|
48
|
+
return /*#__PURE__*/jsx("div", {
|
|
49
|
+
ref: ref,
|
|
50
|
+
children: /*#__PURE__*/jsx(Button, {
|
|
51
|
+
onClick: handleOnClick,
|
|
52
|
+
onKeyDown: handleTriggerKeyDown,
|
|
53
|
+
ref: buttonRef,
|
|
54
|
+
title: label,
|
|
55
|
+
"data-testid": "gh-toolbar-item",
|
|
56
|
+
children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx(MenuPicker, {
|
|
57
|
+
fill: "#FFF",
|
|
58
|
+
size: "m"
|
|
59
|
+
}))
|
|
60
|
+
})
|
|
61
|
+
});
|
|
62
|
+
}, [handleOnClick, handleTriggerKeyDown, label]);
|
|
59
63
|
return useMemo(() => _DSAppPicker || (_DSAppPicker = /*#__PURE__*/_jsx(DSAppPicker, {
|
|
60
64
|
isOpen: isOpen,
|
|
61
65
|
apps: apps,
|
|
@@ -6,15 +6,16 @@ import { PopupMenuContent } from './PopupMenuContent.js';
|
|
|
6
6
|
import { Button } from '../../components/Toolbar/styles.js';
|
|
7
7
|
import { jsx } from 'react/jsx-runtime';
|
|
8
8
|
|
|
9
|
-
const PopupMenu =
|
|
10
|
-
Icon,
|
|
11
|
-
options,
|
|
12
|
-
closeOnClick,
|
|
13
|
-
title,
|
|
14
|
-
onClick
|
|
15
|
-
}) => {
|
|
9
|
+
const PopupMenu = _ref => {
|
|
16
10
|
var _PopupMenuContent;
|
|
17
11
|
|
|
12
|
+
let {
|
|
13
|
+
Icon,
|
|
14
|
+
options,
|
|
15
|
+
closeOnClick,
|
|
16
|
+
title,
|
|
17
|
+
onClick
|
|
18
|
+
} = _ref;
|
|
18
19
|
const [isOpen, setIsOpen] = useState(false);
|
|
19
20
|
const buttonRef = useRef();
|
|
20
21
|
const handleKeyPress = useCallback(e => {
|
|
@@ -41,20 +42,23 @@ const PopupMenu = ({
|
|
|
41
42
|
onItemClick: handleItemClick,
|
|
42
43
|
onClose: handleOnClose
|
|
43
44
|
})), [options, handleItemClick, handleOnClose]);
|
|
44
|
-
const trigger = useMemo(() =>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
45
|
+
const trigger = useMemo(() => _ref2 => {
|
|
46
|
+
let {
|
|
47
|
+
ref
|
|
48
|
+
} = _ref2;
|
|
49
|
+
return /*#__PURE__*/jsx(Button, {
|
|
50
|
+
onClick: handleTriggerOnClick,
|
|
51
|
+
onKeyPress: handleKeyPress,
|
|
52
|
+
title: title,
|
|
53
|
+
ref: buttonRef,
|
|
54
|
+
"data-testid": "gh-toolbar-item",
|
|
55
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
56
|
+
innerRef: ref,
|
|
57
|
+
fill: "#FFF",
|
|
58
|
+
size: "m"
|
|
59
|
+
})
|
|
60
|
+
});
|
|
61
|
+
}, [Icon, handleKeyPress, handleTriggerOnClick, title]);
|
|
58
62
|
return useMemo(() => /*#__PURE__*/_jsx(Popover, {
|
|
59
63
|
isOpen: isOpen,
|
|
60
64
|
content: content,
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
2
4
|
import React, { useContext, useRef, useEffect, useMemo } from 'react';
|
|
3
5
|
import { ItemWrapper, Label, Separator, List } from './styles.js';
|
|
4
6
|
import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
|
|
5
7
|
import { jsx } from 'react/jsx-runtime';
|
|
6
8
|
|
|
7
|
-
const PopupMenuContent = /*#__PURE__*/React.memo(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
|
|
10
|
+
let {
|
|
11
|
+
options,
|
|
12
|
+
onItemClick,
|
|
13
|
+
onClose
|
|
14
|
+
} = _ref;
|
|
12
15
|
const {
|
|
13
16
|
instanceUID
|
|
14
17
|
} = useContext(GlobalHeaderContext);
|
|
@@ -5,9 +5,12 @@ const List = /*#__PURE__*/styled.div.withConfig({
|
|
|
5
5
|
})(["padding:5px 0px;"]);
|
|
6
6
|
const ItemWrapper = /*#__PURE__*/styled.button.withConfig({
|
|
7
7
|
componentId: "sc-snqcgs-1"
|
|
8
|
-
})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"],
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"], _ref => {
|
|
9
|
+
let {
|
|
10
|
+
theme
|
|
11
|
+
} = _ref;
|
|
12
|
+
return "1px solid ".concat(theme.colors.brand[600]);
|
|
13
|
+
});
|
|
11
14
|
const Label = /*#__PURE__*/styled.p.withConfig({
|
|
12
15
|
componentId: "sc-snqcgs-2"
|
|
13
16
|
})(["width:100%;font-size:14px;margin:10px;"]);
|
package/esm/styles.js
CHANGED
|
@@ -3,8 +3,11 @@ import { GridContainer } from '@elliemae/ds-grid';
|
|
|
3
3
|
|
|
4
4
|
const Wrapper = /*#__PURE__*/styled(GridContainer).withConfig({
|
|
5
5
|
componentId: "sc-1v5zxxm-0"
|
|
6
|
-
})(["background-image:linear-gradient(45deg,#0f364a 0%,#1b6392 54%,#164566 100%);color:", ";width:100%;height:40px;padding:0 24px 0 12px;"],
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
})(["background-image:linear-gradient(45deg,#0f364a 0%,#1b6392 54%,#164566 100%);color:", ";width:100%;height:40px;padding:0 24px 0 12px;"], _ref => {
|
|
7
|
+
let {
|
|
8
|
+
theme
|
|
9
|
+
} = _ref;
|
|
10
|
+
return theme.colors.neutral['000'];
|
|
11
|
+
});
|
|
9
12
|
|
|
10
13
|
export { Wrapper };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-global-header",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-rc.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Global Header",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -120,23 +120,21 @@
|
|
|
120
120
|
"build": "node ../../scripts/build/build.js"
|
|
121
121
|
},
|
|
122
122
|
"dependencies": {
|
|
123
|
-
"@elliemae/ds-app-picker": "2.0.0-
|
|
124
|
-
"@elliemae/ds-
|
|
125
|
-
"@elliemae/ds-
|
|
126
|
-
"@elliemae/ds-
|
|
127
|
-
"@elliemae/ds-popover": "2.0.0-next.7",
|
|
128
|
-
"@elliemae/ds-utilities": "2.0.0-next.7",
|
|
123
|
+
"@elliemae/ds-app-picker": "2.0.0-rc.10",
|
|
124
|
+
"@elliemae/ds-grid": "2.0.0-rc.10",
|
|
125
|
+
"@elliemae/ds-icons": "2.0.0-rc.10",
|
|
126
|
+
"@elliemae/ds-popover": "2.0.0-rc.10",
|
|
129
127
|
"react-desc": "~4.1.3",
|
|
130
128
|
"uid": "~2.0.0"
|
|
131
129
|
},
|
|
132
130
|
"devDependencies": {
|
|
133
|
-
"styled-components": "~5.3.
|
|
131
|
+
"styled-components": "~5.3.3"
|
|
134
132
|
},
|
|
135
133
|
"peerDependencies": {
|
|
136
134
|
"lodash": "^4.17.21",
|
|
137
135
|
"react": "^17.0.2",
|
|
138
136
|
"react-dom": "^17.0.2",
|
|
139
|
-
"styled-components": "^5.3.
|
|
137
|
+
"styled-components": "^5.3.3"
|
|
140
138
|
},
|
|
141
139
|
"publishConfig": {
|
|
142
140
|
"access": "public",
|
package/types/GlobalHeader.d.ts
CHANGED
|
@@ -1,14 +1,39 @@
|
|
|
1
|
+
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
1
2
|
/// <reference types="react" />
|
|
2
3
|
import type { GlobalHeaderPropsT as Props } from './index.d';
|
|
3
4
|
declare const GlobalHeader: {
|
|
4
5
|
(props: Props): JSX.Element;
|
|
5
6
|
defaultProps: Props;
|
|
6
7
|
propTypes: {
|
|
7
|
-
Logo:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
Logo: {
|
|
9
|
+
defaultValue<T = unknown>(arg: T): {
|
|
10
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
11
|
+
};
|
|
12
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
13
|
+
};
|
|
14
|
+
LogoWithBrand: {
|
|
15
|
+
defaultValue<T = unknown>(arg: T): {
|
|
16
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
17
|
+
};
|
|
18
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
19
|
+
};
|
|
20
|
+
breadcrumb: {
|
|
21
|
+
defaultValue<T = unknown>(arg: T): {
|
|
22
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
23
|
+
};
|
|
24
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
25
|
+
};
|
|
26
|
+
toolbar: {
|
|
27
|
+
defaultValue<T = unknown>(arg: T): {
|
|
28
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
29
|
+
};
|
|
30
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
31
|
+
};
|
|
11
32
|
};
|
|
12
33
|
};
|
|
13
|
-
declare const GlobalHeaderWithSchema:
|
|
34
|
+
declare const GlobalHeaderWithSchema: {
|
|
35
|
+
(props?: Props | undefined): JSX.Element;
|
|
36
|
+
propTypes: unknown;
|
|
37
|
+
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
38
|
+
};
|
|
14
39
|
export { GlobalHeader, GlobalHeaderWithSchema };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { LabelT, PipeT } from '../../index.d';
|
|
2
|
-
export declare const Pipe: import("styled-components").StyledComponent<"span",
|
|
3
|
-
export declare const BreadcrumbItem: import("styled-components").StyledComponent<"div",
|
|
4
|
-
export declare const LabelButton: import("styled-components").StyledComponent<"button",
|
|
5
|
-
export declare const Label: import("styled-components").StyledComponent<"p",
|
|
2
|
+
export declare const Pipe: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, PipeT, never>;
|
|
3
|
+
export declare const BreadcrumbItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const LabelButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
+
export declare const Label: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, LabelT, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const Button: import("styled-components").StyledComponent<"button",
|
|
1
|
+
export declare const Button: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const List: import("styled-components").StyledComponent<"div",
|
|
2
|
-
export declare const ItemWrapper: import("styled-components").StyledComponent<"button",
|
|
3
|
-
export declare const Label: import("styled-components").StyledComponent<"p",
|
|
4
|
-
export declare const Separator: import("styled-components").StyledComponent<"div",
|
|
1
|
+
export declare const List: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
+
export declare const ItemWrapper: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
|
|
3
|
+
export declare const Label: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const Separator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
package/types/propTypes.d.ts
CHANGED
|
@@ -1,8 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const
|
|
1
|
+
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
+
export declare const breadcrumbItem: import("react-desc").PropTypesDescValue;
|
|
3
|
+
export declare const toolbarItem: import("react-desc").PropTypesDescValue;
|
|
3
4
|
export declare const globalHeaderProps: {
|
|
4
|
-
Logo:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
Logo: {
|
|
6
|
+
defaultValue<T = unknown>(arg: T): {
|
|
7
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
8
|
+
};
|
|
9
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
10
|
+
};
|
|
11
|
+
LogoWithBrand: {
|
|
12
|
+
defaultValue<T = unknown>(arg: T): {
|
|
13
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
14
|
+
};
|
|
15
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
16
|
+
};
|
|
17
|
+
breadcrumb: {
|
|
18
|
+
defaultValue<T = unknown>(arg: T): {
|
|
19
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
20
|
+
};
|
|
21
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
22
|
+
};
|
|
23
|
+
toolbar: {
|
|
24
|
+
defaultValue<T = unknown>(arg: T): {
|
|
25
|
+
deprecated: import("react-desc").PropTypesDescValidator;
|
|
26
|
+
};
|
|
27
|
+
isRequired: import("react-desc").PropTypesDescValidator;
|
|
28
|
+
};
|
|
8
29
|
};
|
package/types/styles.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<
|
|
2
|
+
export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
|