@elliemae/ds-global-header 2.2.0-alpha.3 → 2.2.0-next.2
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/GlobalHeader.js +35 -55
- package/cjs/GlobalHeaderContainer.js +23 -40
- package/cjs/GlobalHeaderContext.js +13 -39
- package/cjs/GlobalHeaderTypes.js +2 -27
- package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js +59 -59
- package/cjs/components/Breadcrumb/PureBreadcrumb.js +59 -50
- package/cjs/components/Breadcrumb/styles.js +58 -82
- package/cjs/components/Title/GlobalHeaderTitle.js +24 -43
- package/cjs/components/Toolbar/GlobalHeaderToolbar.js +22 -41
- package/cjs/components/Toolbar/ToolbarItems.js +94 -83
- package/cjs/components/Toolbar/styles.js +24 -60
- package/cjs/config/useGetPropsWithDefaults.js +30 -42
- package/cjs/config/useGlobalHeader.js +30 -44
- package/cjs/config/useValidateProps.js +64 -81
- package/cjs/config/validateHelpers.js +41 -95
- package/cjs/defaultProps.js +7 -34
- package/cjs/index.js +11 -36
- package/cjs/outOfTheBox/AppPicker/AppPicker.js +90 -83
- package/cjs/outOfTheBox/PopupMenu/PopupMenu.js +75 -70
- package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js +83 -76
- package/cjs/outOfTheBox/PopupMenu/styles.js +31 -66
- package/cjs/outOfTheBox/SearchToggle/SearchToggle.js +85 -80
- package/cjs/outOfTheBox/SearchToggle/styles.js +9 -76
- package/cjs/outOfTheBox/index.js +13 -30
- package/cjs/propTypes.js +25 -52
- package/cjs/styles.js +20 -42
- package/esm/GlobalHeader.js +21 -21
- package/esm/GlobalHeaderContainer.js +15 -11
- package/esm/GlobalHeaderContext.js +8 -9
- package/esm/GlobalHeaderTypes.js +1 -2
- package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js +45 -26
- package/esm/components/Breadcrumb/PureBreadcrumb.js +49 -22
- package/esm/components/Breadcrumb/styles.js +48 -54
- package/esm/components/Title/GlobalHeaderTitle.js +15 -13
- package/esm/components/Toolbar/GlobalHeaderToolbar.js +14 -12
- package/esm/components/Toolbar/ToolbarItems.js +83 -53
- package/esm/components/Toolbar/styles.js +17 -32
- package/esm/config/useGetPropsWithDefaults.js +22 -13
- package/esm/config/useGlobalHeader.js +19 -12
- package/esm/config/useValidateProps.js +58 -58
- package/esm/config/validateHelpers.js +28 -66
- package/esm/defaultProps.js +3 -5
- package/esm/index.js +1 -7
- package/esm/outOfTheBox/AppPicker/AppPicker.js +76 -50
- package/esm/outOfTheBox/PopupMenu/PopupMenu.js +61 -37
- package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js +71 -45
- package/esm/outOfTheBox/PopupMenu/styles.js +21 -38
- package/esm/outOfTheBox/SearchToggle/SearchToggle.js +70 -46
- package/esm/outOfTheBox/SearchToggle/styles.js +5 -51
- package/esm/outOfTheBox/index.js +3 -5
- package/esm/propTypes.js +17 -21
- package/esm/styles.js +13 -14
- package/package.json +7 -7
- package/cjs/GlobalHeader.js.map +0 -7
- package/cjs/GlobalHeaderContainer.js.map +0 -7
- package/cjs/GlobalHeaderContext.js.map +0 -7
- package/cjs/GlobalHeaderTypes.js.map +0 -7
- package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map +0 -7
- package/cjs/components/Breadcrumb/PureBreadcrumb.js.map +0 -7
- package/cjs/components/Breadcrumb/styles.js.map +0 -7
- package/cjs/components/Title/GlobalHeaderTitle.js.map +0 -7
- package/cjs/components/Toolbar/GlobalHeaderToolbar.js.map +0 -7
- package/cjs/components/Toolbar/ToolbarItems.js.map +0 -7
- package/cjs/components/Toolbar/styles.js.map +0 -7
- package/cjs/config/useGetPropsWithDefaults.js.map +0 -7
- package/cjs/config/useGlobalHeader.js.map +0 -7
- package/cjs/config/useValidateProps.js.map +0 -7
- package/cjs/config/validateHelpers.js.map +0 -7
- package/cjs/defaultProps.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/outOfTheBox/AppPicker/AppPicker.js.map +0 -7
- package/cjs/outOfTheBox/PopupMenu/PopupMenu.js.map +0 -7
- package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js.map +0 -7
- package/cjs/outOfTheBox/PopupMenu/styles.js.map +0 -7
- package/cjs/outOfTheBox/SearchToggle/SearchToggle.js.map +0 -7
- package/cjs/outOfTheBox/SearchToggle/styles.js.map +0 -7
- package/cjs/outOfTheBox/index.js.map +0 -7
- package/cjs/propTypes.js.map +0 -7
- package/cjs/styles.js.map +0 -7
- package/esm/GlobalHeader.js.map +0 -7
- package/esm/GlobalHeaderContainer.js.map +0 -7
- package/esm/GlobalHeaderContext.js.map +0 -7
- package/esm/GlobalHeaderTypes.js.map +0 -7
- package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map +0 -7
- package/esm/components/Breadcrumb/PureBreadcrumb.js.map +0 -7
- package/esm/components/Breadcrumb/styles.js.map +0 -7
- package/esm/components/Title/GlobalHeaderTitle.js.map +0 -7
- package/esm/components/Toolbar/GlobalHeaderToolbar.js.map +0 -7
- package/esm/components/Toolbar/ToolbarItems.js.map +0 -7
- package/esm/components/Toolbar/styles.js.map +0 -7
- package/esm/config/useGetPropsWithDefaults.js.map +0 -7
- package/esm/config/useGlobalHeader.js.map +0 -7
- package/esm/config/useValidateProps.js.map +0 -7
- package/esm/config/validateHelpers.js.map +0 -7
- package/esm/defaultProps.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/outOfTheBox/AppPicker/AppPicker.js.map +0 -7
- package/esm/outOfTheBox/PopupMenu/PopupMenu.js.map +0 -7
- package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js.map +0 -7
- package/esm/outOfTheBox/PopupMenu/styles.js.map +0 -7
- package/esm/outOfTheBox/SearchToggle/SearchToggle.js.map +0 -7
- package/esm/outOfTheBox/SearchToggle/styles.js.map +0 -7
- package/esm/outOfTheBox/index.js.map +0 -7
- package/esm/propTypes.js.map +0 -7
- package/esm/styles.js.map +0 -7
|
@@ -1,60 +1,86 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
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, { useContext, useRef, useEffect, useMemo } from 'react';
|
|
11
|
+
import { getDataProps, getAriaProps } from '@elliemae/ds-props-helpers';
|
|
12
|
+
import { ItemWrapper, Separator, List, Label } from './styles.js';
|
|
13
|
+
import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
|
|
14
|
+
import { jsxs, jsx } 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 PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
|
|
20
|
+
let {
|
|
21
|
+
options,
|
|
22
|
+
onItemClick,
|
|
23
|
+
onClose,
|
|
24
|
+
popupOnKeyPress
|
|
25
|
+
} = _ref;
|
|
26
|
+
const {
|
|
27
|
+
instanceUID
|
|
28
|
+
} = useContext(GlobalHeaderContext);
|
|
8
29
|
const menuRef = useRef(null);
|
|
9
30
|
useEffect(() => {
|
|
10
|
-
|
|
31
|
+
var _menuRef$current, _menuRef$current$firs;
|
|
32
|
+
|
|
33
|
+
(_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : (_menuRef$current$firs = _menuRef$current.firstChild) === null || _menuRef$current$firs === void 0 ? void 0 : _menuRef$current$firs.focus();
|
|
11
34
|
}, []);
|
|
12
|
-
const content = useMemo(() => options.map(
|
|
13
|
-
const {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
35
|
+
const content = useMemo(() => options.map(option => {
|
|
36
|
+
const {
|
|
37
|
+
type,
|
|
38
|
+
Icon,
|
|
39
|
+
label = '',
|
|
40
|
+
onClick,
|
|
41
|
+
Content,
|
|
42
|
+
id
|
|
43
|
+
} = option;
|
|
44
|
+
|
|
45
|
+
const ariaAndDataProps = _objectSpread(_objectSpread({}, getAriaProps(option)), getDataProps(option));
|
|
46
|
+
|
|
47
|
+
const handleClick = e => {
|
|
19
48
|
onItemClick(e);
|
|
20
|
-
if (onClick)
|
|
21
|
-
onClick(e);
|
|
49
|
+
if (onClick) onClick(e);
|
|
22
50
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
if (popupOnKeyPress)
|
|
27
|
-
popupOnKeyPress(e);
|
|
51
|
+
|
|
52
|
+
const handleKeyDown = e => {
|
|
53
|
+
if (e.code === 'Escape') onClose();
|
|
54
|
+
if (popupOnKeyPress) popupOnKeyPress(e);
|
|
28
55
|
};
|
|
56
|
+
|
|
29
57
|
switch (type) {
|
|
30
|
-
case
|
|
31
|
-
return
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
case "custom":
|
|
36
|
-
return /* @__PURE__ */ React2.createElement(ItemWrapper, {
|
|
58
|
+
case 'separator':
|
|
59
|
+
return /*#__PURE__*/jsx(Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
|
|
60
|
+
|
|
61
|
+
case 'custom':
|
|
62
|
+
return /*#__PURE__*/jsx(ItemWrapper, _objectSpread(_objectSpread({
|
|
37
63
|
onClick: handleClick,
|
|
38
64
|
onKeyDown: handleKeyDown,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
},
|
|
65
|
+
id: id
|
|
66
|
+
}, ariaAndDataProps), {}, {
|
|
67
|
+
children: Content && /*#__PURE__*/_jsx(Content, {})
|
|
68
|
+
}), "".concat(instanceUID, "-popup-").concat(label));
|
|
69
|
+
|
|
43
70
|
default:
|
|
44
|
-
return
|
|
71
|
+
return /*#__PURE__*/jsxs(ItemWrapper, _objectSpread(_objectSpread({
|
|
45
72
|
onClick: handleClick,
|
|
46
73
|
onKeyDown: handleKeyDown,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
},
|
|
74
|
+
id: id
|
|
75
|
+
}, ariaAndDataProps), {}, {
|
|
76
|
+
children: [Icon && /*#__PURE__*/_jsx(Icon, {}), Label && /*#__PURE__*/_jsx(Label, {}, void 0, label)]
|
|
77
|
+
}), "".concat(instanceUID, "-popup-").concat(label));
|
|
51
78
|
}
|
|
52
79
|
}), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
|
|
53
|
-
return
|
|
54
|
-
ref: menuRef
|
|
55
|
-
|
|
80
|
+
return /*#__PURE__*/jsx(List, {
|
|
81
|
+
ref: menuRef,
|
|
82
|
+
children: content
|
|
83
|
+
});
|
|
56
84
|
});
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
};
|
|
60
|
-
//# sourceMappingURL=PopupMenuContent.js.map
|
|
85
|
+
|
|
86
|
+
export { PopupMenuContent };
|
|
@@ -1,38 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
const List = styled.div
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const Label = styled.p`
|
|
23
|
-
width: 100%;
|
|
24
|
-
font-size: 14px;
|
|
25
|
-
margin: 10px;
|
|
26
|
-
`;
|
|
27
|
-
const Separator = styled.div`
|
|
28
|
-
width: 100%;
|
|
29
|
-
border: none;
|
|
30
|
-
border-bottom: 1px solid #ccc;
|
|
31
|
-
`;
|
|
32
|
-
export {
|
|
33
|
-
ItemWrapper,
|
|
34
|
-
Label,
|
|
35
|
-
List,
|
|
36
|
-
Separator
|
|
37
|
-
};
|
|
38
|
-
//# sourceMappingURL=styles.js.map
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
|
|
3
|
+
const List = /*#__PURE__*/styled.div.withConfig({
|
|
4
|
+
componentId: "sc-snqcgs-0"
|
|
5
|
+
})(["padding:5px 0px;background:white;"]);
|
|
6
|
+
const ItemWrapper = /*#__PURE__*/styled.button.withConfig({
|
|
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:", ";}"], _ref => {
|
|
9
|
+
let {
|
|
10
|
+
theme
|
|
11
|
+
} = _ref;
|
|
12
|
+
return "1px solid ".concat(theme.colors.brand[600]);
|
|
13
|
+
});
|
|
14
|
+
const Label = /*#__PURE__*/styled.p.withConfig({
|
|
15
|
+
componentId: "sc-snqcgs-2"
|
|
16
|
+
})(["width:100%;font-size:14px;margin:10px;"]);
|
|
17
|
+
const Separator = /*#__PURE__*/styled.div.withConfig({
|
|
18
|
+
componentId: "sc-snqcgs-3"
|
|
19
|
+
})(["width:100%;border:none;border-bottom:1px solid #ccc;"]);
|
|
20
|
+
|
|
21
|
+
export { ItemWrapper, Label, List, Separator };
|
|
@@ -1,12 +1,33 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
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, useCallback } from 'react';
|
|
11
|
+
import { Search } from '@elliemae/ds-icons';
|
|
12
|
+
import { getDataProps } from '@elliemae/ds-props-helpers';
|
|
13
|
+
import { DSIconColors } from '@elliemae/ds-icon';
|
|
14
|
+
import { DSNavSearchBox } from '@elliemae/ds-form';
|
|
15
|
+
import { StyledNavSearchBoxContainer } from './styles.js';
|
|
16
|
+
import { Button } from '../../components/Toolbar/styles.js';
|
|
17
|
+
import { jsx } from 'react/jsx-runtime';
|
|
18
|
+
|
|
19
|
+
const _excluded = ["id", "componentProps"];
|
|
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 SearchToggle = _ref => {
|
|
25
|
+
let {
|
|
26
|
+
id,
|
|
27
|
+
componentProps
|
|
28
|
+
} = _ref,
|
|
29
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
30
|
+
|
|
10
31
|
const [isOpen, setIsOpen] = useState(false);
|
|
11
32
|
const inputRef = useRef(null);
|
|
12
33
|
const triggerRef = useRef(null);
|
|
@@ -25,55 +46,58 @@ const SearchToggle = ({ id, componentProps, ...otherProps }) => {
|
|
|
25
46
|
onKeyDown,
|
|
26
47
|
onClick
|
|
27
48
|
} = componentProps;
|
|
28
|
-
const handleOnClick = useCallback(
|
|
29
|
-
if (userIsOpen ===
|
|
30
|
-
|
|
31
|
-
if (onClick)
|
|
32
|
-
onClick(e);
|
|
49
|
+
const handleOnClick = useCallback(e => {
|
|
50
|
+
if (userIsOpen === undefined) setIsOpen(true);
|
|
51
|
+
if (onClick) onClick(e);
|
|
33
52
|
}, [onClick, userIsOpen]);
|
|
34
|
-
const handleOnKeyDown = useCallback(
|
|
35
|
-
if (userIsOpen ===
|
|
36
|
-
if (e.code ===
|
|
53
|
+
const handleOnKeyDown = useCallback(e => {
|
|
54
|
+
if (userIsOpen === undefined) {
|
|
55
|
+
if (e.code === 'Escape') {
|
|
37
56
|
setIsOpen(false);
|
|
38
|
-
setTimeout(() =>
|
|
57
|
+
setTimeout(() => {
|
|
58
|
+
var _triggerRef$current;
|
|
59
|
+
|
|
60
|
+
return (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
|
|
61
|
+
});
|
|
39
62
|
}
|
|
40
63
|
}
|
|
41
|
-
|
|
42
|
-
|
|
64
|
+
|
|
65
|
+
if (onKeyDown) onKeyDown(e);
|
|
43
66
|
}, [onKeyDown, userIsOpen]);
|
|
44
67
|
const handleOnBlur = useCallback(() => {
|
|
45
68
|
setTimeout(() => {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
69
|
+
var _containerRef$current;
|
|
70
|
+
|
|
71
|
+
const contains = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.contains(document.activeElement);
|
|
72
|
+
if (value === '' && !contains) setIsOpen(false);
|
|
49
73
|
});
|
|
50
74
|
}, [value]);
|
|
51
|
-
return userIsOpen || isOpen ?
|
|
75
|
+
return userIsOpen || isOpen ? /*#__PURE__*/jsx(StyledNavSearchBoxContainer, {
|
|
52
76
|
onKeyDown: handleOnKeyDown,
|
|
53
77
|
ref: containerRef,
|
|
54
|
-
onBlur: handleOnBlur
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
78
|
+
onBlur: handleOnBlur,
|
|
79
|
+
children: /*#__PURE__*/_jsx(DSNavSearchBox, {
|
|
80
|
+
onNext: onNext,
|
|
81
|
+
onPrevious: onPrevious,
|
|
82
|
+
currentResultIndex: currentResultIndex,
|
|
83
|
+
totalResults: totalResults,
|
|
84
|
+
onClear: onClear,
|
|
85
|
+
placeholder: placeholder,
|
|
86
|
+
onChange: onChange,
|
|
87
|
+
value: value,
|
|
88
|
+
onBlur: onBlur,
|
|
89
|
+
innerRef: inputRef,
|
|
90
|
+
autoFocus: true
|
|
91
|
+
})
|
|
92
|
+
}) : /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
|
|
68
93
|
onClick: handleOnClick,
|
|
69
94
|
ref: triggerRef,
|
|
70
|
-
id
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
95
|
+
id: id
|
|
96
|
+
}, getDataProps(otherProps)), {}, {
|
|
97
|
+
children: /*#__PURE__*/_jsx(Search, {
|
|
98
|
+
color: DSIconColors.WHITE
|
|
99
|
+
})
|
|
74
100
|
}));
|
|
75
101
|
};
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
};
|
|
79
|
-
//# sourceMappingURL=SearchToggle.js.map
|
|
102
|
+
|
|
103
|
+
export { SearchToggle };
|
|
@@ -1,53 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import styled from "styled-components";
|
|
3
|
-
const StyledNavSearchBoxContainer = styled.div`
|
|
4
|
-
background: white;
|
|
5
|
-
position: relative;
|
|
1
|
+
import styled from 'styled-components';
|
|
6
2
|
|
|
7
|
-
|
|
3
|
+
const StyledNavSearchBoxContainer = /*#__PURE__*/styled.div.withConfig({
|
|
4
|
+
componentId: "sc-1dlcqwh-0"
|
|
5
|
+
})(["background:white;position:relative;min-width:260px;& .em-ds-button{margin-right:2px;height:24px;width:24px;}& .em-ds-input{border:none;outline:none;box-shadow:none;}& .em-ds-input:focus{border:none;box-shadow:none;}& .em-ds-input.em-ds-input--clearable:hover{border:none;outline:none;box-shadow:none;}& .em-ds-input-addon-wrapper{box-shadow:none;}& .em-ds-input-addon-wrapper:hover{outline:none;}& .em-ds-input-addon-wrapper__addon:hover{outline:none;}& .em-ds-input:not(.floating-label-input-controller):hover:active{border:none;outline:none;box-shadow:none;}"]);
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
margin-right: 2px;
|
|
11
|
-
height: 24px;
|
|
12
|
-
width: 24px;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
& .em-ds-input {
|
|
16
|
-
border: none;
|
|
17
|
-
outline: none;
|
|
18
|
-
box-shadow: none;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
& .em-ds-input:focus {
|
|
22
|
-
border: none;
|
|
23
|
-
box-shadow: none;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
& .em-ds-input.em-ds-input--clearable:hover {
|
|
27
|
-
border: none;
|
|
28
|
-
outline: none;
|
|
29
|
-
box-shadow: none;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
& .em-ds-input-addon-wrapper {
|
|
33
|
-
box-shadow: none;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
& .em-ds-input-addon-wrapper:hover {
|
|
37
|
-
outline: none;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
& .em-ds-input-addon-wrapper__addon:hover {
|
|
41
|
-
outline: none;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
& .em-ds-input:not(.floating-label-input-controller):hover:active {
|
|
45
|
-
border: none;
|
|
46
|
-
outline: none;
|
|
47
|
-
box-shadow: none;
|
|
48
|
-
}
|
|
49
|
-
`;
|
|
50
|
-
export {
|
|
51
|
-
StyledNavSearchBoxContainer
|
|
52
|
-
};
|
|
53
|
-
//# sourceMappingURL=styles.js.map
|
|
7
|
+
export { StyledNavSearchBoxContainer };
|
package/esm/outOfTheBox/index.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export * from "./SearchToggle/SearchToggle";
|
|
5
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export { AppPicker } from './AppPicker/AppPicker.js';
|
|
2
|
+
export { PopupMenu } from './PopupMenu/PopupMenu.js';
|
|
3
|
+
export { SearchToggle } from './SearchToggle/SearchToggle.js';
|
package/esm/propTypes.js
CHANGED
|
@@ -1,27 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { PropTypes } from 'react-desc';
|
|
2
|
+
|
|
3
3
|
const breadcrumbItem = PropTypes.shape({
|
|
4
|
-
label: PropTypes.string.description(
|
|
5
|
-
hasNext: PropTypes.bool.description(
|
|
6
|
-
isSelected: PropTypes.bool.description(
|
|
7
|
-
onClick: PropTypes.func.description(
|
|
4
|
+
label: PropTypes.string.description('breadrcrumb item label'),
|
|
5
|
+
hasNext: PropTypes.bool.description('whether the item has a child or not'),
|
|
6
|
+
isSelected: PropTypes.bool.description('whether the item is selected or not'),
|
|
7
|
+
onClick: PropTypes.func.description('Callback executed on click')
|
|
8
8
|
});
|
|
9
9
|
const toolbarItem = PropTypes.shape({
|
|
10
|
-
label: PropTypes.string.description(
|
|
11
|
-
type: PropTypes.oneOf([
|
|
12
|
-
componentProps: PropTypes.object.description(
|
|
13
|
-
Icon: PropTypes.func.description(
|
|
14
|
-
onClick: PropTypes.func.description(
|
|
10
|
+
label: PropTypes.string.description('title tag description'),
|
|
11
|
+
type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description('use to select one of the out-of-the-box types of items'),
|
|
12
|
+
componentProps: PropTypes.object.description('props of out-of-the-box component'),
|
|
13
|
+
Icon: PropTypes.func.description('Icon to display'),
|
|
14
|
+
onClick: PropTypes.func.description('Callback executed on click')
|
|
15
15
|
});
|
|
16
16
|
const globalHeaderProps = {
|
|
17
|
-
Logo: PropTypes.func.description(
|
|
18
|
-
LogoWithBrand: PropTypes.func.description(
|
|
19
|
-
breadcrumb: PropTypes.arrayOf(breadcrumbItem).description(
|
|
20
|
-
toolbar: PropTypes.arrayOf(toolbarItem).description(
|
|
17
|
+
Logo: PropTypes.func.description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.'),
|
|
18
|
+
LogoWithBrand: PropTypes.func.description('Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.'),
|
|
19
|
+
breadcrumb: PropTypes.arrayOf(breadcrumbItem).description('Breadcrumb items to display. max 3 levels'),
|
|
20
|
+
toolbar: PropTypes.arrayOf(toolbarItem).description('Toolbar items')
|
|
21
21
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
globalHeaderProps,
|
|
25
|
-
toolbarItem
|
|
26
|
-
};
|
|
27
|
-
//# sourceMappingURL=propTypes.js.map
|
|
22
|
+
|
|
23
|
+
export { breadcrumbItem, globalHeaderProps, toolbarItem };
|
package/esm/styles.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
const Wrapper = styled(GridContainer)
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
};
|
|
14
|
-
//# sourceMappingURL=styles.js.map
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { GridContainer } from '@elliemae/ds-grid';
|
|
3
|
+
|
|
4
|
+
const Wrapper = /*#__PURE__*/styled(GridContainer).withConfig({
|
|
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;"], _ref => {
|
|
7
|
+
let {
|
|
8
|
+
theme
|
|
9
|
+
} = _ref;
|
|
10
|
+
return theme.colors.neutral['000'];
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
export { Wrapper };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-global-header",
|
|
3
|
-
"version": "2.2.0-
|
|
3
|
+
"version": "2.2.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Global Header",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -132,12 +132,12 @@
|
|
|
132
132
|
"build": "node ../../scripts/build/build.js"
|
|
133
133
|
},
|
|
134
134
|
"dependencies": {
|
|
135
|
-
"@elliemae/ds-app-picker": "2.2.0-
|
|
136
|
-
"@elliemae/ds-grid": "2.2.0-
|
|
137
|
-
"@elliemae/ds-icons": "2.2.0-
|
|
138
|
-
"@elliemae/ds-popperjs": "2.2.0-
|
|
139
|
-
"@elliemae/ds-props-helpers": "2.2.0-
|
|
140
|
-
"@elliemae/ds-utilities": "2.2.0-
|
|
135
|
+
"@elliemae/ds-app-picker": "2.2.0-next.2",
|
|
136
|
+
"@elliemae/ds-grid": "2.2.0-next.2",
|
|
137
|
+
"@elliemae/ds-icons": "2.2.0-next.2",
|
|
138
|
+
"@elliemae/ds-popperjs": "2.2.0-next.2",
|
|
139
|
+
"@elliemae/ds-props-helpers": "2.2.0-next.2",
|
|
140
|
+
"@elliemae/ds-utilities": "2.2.0-next.2",
|
|
141
141
|
"react-desc": "~4.1.3",
|
|
142
142
|
"uid": "~2.0.0"
|
|
143
143
|
},
|
package/cjs/GlobalHeader.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/GlobalHeader.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from 'react-desc';\nimport { globalHeaderProps } from './propTypes';\nimport type { GlobalHeaderPropsT as Props } from './GlobalHeaderTypes';\nimport { GlobalHeaderTitle } from './components/Title/GlobalHeaderTitle';\nimport { GlobalHeaderBreadcrumb } from './components/Breadcrumb/GlobalHeaderBreadcrumb';\nimport { GlobalHeaderToolbar } from './components/Toolbar/GlobalHeaderToolbar';\nimport { GlobalHeaderContext } from './GlobalHeaderContext';\nimport { useGlobalHeader } from './config/useGlobalHeader';\nimport { defaultProps } from './defaultProps';\nimport { GlobalHeaderContainer } from './GlobalHeaderContainer';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst GlobalHeader = (props: Props): JSX.Element => {\n useValidateProps(props);\n const ctx = useGlobalHeader(props);\n return (\n <GlobalHeaderContainer>\n <GlobalHeaderContext.Provider value={ctx}>\n <GlobalHeaderTitle />\n <GlobalHeaderBreadcrumb />\n <GlobalHeaderToolbar />\n </GlobalHeaderContext.Provider>\n </GlobalHeaderContainer>\n );\n};\n\nGlobalHeader.defaultProps = defaultProps;\n\nGlobalHeader.propTypes = globalHeaderProps;\nconst GlobalHeaderWithSchema = describe(GlobalHeader);\nGlobalHeaderWithSchema.propTypes = globalHeaderProps;\n\nexport { GlobalHeader, GlobalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAyB;AACzB,uBAAkC;AAElC,+BAAkC;AAClC,oCAAuC;AACvC,iCAAoC;AACpC,iCAAoC;AACpC,6BAAgC;AAChC,0BAA6B;AAC7B,mCAAsC;AACtC,8BAAiC;AAEjC,MAAM,eAAe,CAAC,UAA8B;AAClD,gDAAiB;AACjB,QAAM,MAAM,4CAAgB;AAC5B,SACE,mDAAC,oDAAD,MACE,mDAAC,+CAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KACnC,mDAAC,4CAAD,OACA,mDAAC,sDAAD,OACA,mDAAC,gDAAD;AAAA;AAMR,aAAa,eAAe;AAE5B,aAAa,YAAY;AACzB,MAAM,yBAAyB,gCAAS;AACxC,uBAAuB,YAAY;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/GlobalHeaderContainer.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type { GlobalHeaderContainerT } from './GlobalHeaderTypes';\nimport { Wrapper } from './styles';\n\nexport const GlobalHeaderContainer = ({ children }: GlobalHeaderContainerT): JSX.Element => (\n <header data-testid=\"ds-global-header\">\n <Wrapper cols={['auto', '1fr', 'auto']}>{children}</Wrapper>\n </header>\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAElB,oBAAwB;AAEjB,MAAM,wBAAwB,CAAC,EAAE,eACtC,mDAAC,UAAD;AAAA,EAAQ,eAAY;AAAA,GAClB,mDAAC,uBAAD;AAAA,EAAS,MAAM,CAAC,QAAQ,OAAO;AAAA,GAAU;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/GlobalHeaderContext.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { createContext } from 'react';\nimport { defaultProps } from './defaultProps';\nimport type { ContextT } from './GlobalHeaderTypes';\n\nconst noop = () => null;\n\nconst defaultContext = {\n props: defaultProps,\n showIconOnly: false,\n setShowIconOnly: noop,\n instanceUID: '',\n globalHeaderToolbarGrid: [],\n globalHeaderBreadcrumbGrid: [],\n};\n\nexport const GlobalHeaderContext = createContext<ContextT>(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAC9B,0BAA6B;AAG7B,MAAM,OAAO,MAAM;AAEnB,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,yBAAyB;AAAA,EACzB,4BAA4B;AAAA;AAGvB,MAAM,sBAAsB,gCAAwB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/GlobalHeaderTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\n\nexport type AppPickerProps = React.ComponentProps<typeof DSAppPicker>;\nexport interface ContextT {\n showIconOnly: boolean;\n setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n instanceUID: string;\n globalHeaderToolbarGrid: string[];\n globalHeaderBreadcrumbGrid: string[];\n props: GlobalHeaderPropsT;\n}\n\nexport interface GlobalHeaderContainerT {\n children: React.ReactNode;\n}\n\nexport interface GlobalHeaderPropsT {\n Logo?: React.ComponentType;\n LogoWithBrand?: React.ComponentType;\n breadcrumb?: BreadcrumbItemT[];\n toolbar?: ToolbarItemT[];\n appPickerProps?: AppPickerProps;\n}\n\nexport interface BreadcrumbItemT {\n label: string;\n hasNext?: boolean;\n isSelected?: boolean;\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n length: number;\n}\n\nexport interface ToolbarItemT {\n type?: 'ds-app-picker' | 'ds-popup-menu' | 'ds-search-toggle' | 'custom';\n label: string;\n Icon: React.ComponentType<Record<string, unknown>>;\n onClick: (event: React.MouseEvent<HTMLElement>) => void;\n componentProps?: PopupPropsT | AppPickerProps | SearchTogglePropsT;\n CustomComponent?: React.ComponentType<{ item: ToolbarItemT }>;\n}\n\nexport interface PopupPropsT {\n Icon?: React.ComponentType<Record<string, unknown>>;\n options: PopupMenuItemT[];\n closeOnClick?: boolean;\n title?: string;\n onClick: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport interface AppPickerMenuItemT {\n label: string;\n icon: React.ComponentType;\n onClick: (event: React.MouseEvent<HTMLElement>) => void;\n disabled?: boolean;\n}\n\nexport interface PopupMenuItemT extends Record<string, unknown> {\n type?: string;\n Icon?: React.ComponentType;\n label?: string;\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n closeOnClick?: boolean;\n Content?: React.ComponentType;\n}\n\nexport interface PopupMenuContentPropsT {\n options: PopupMenuItemT[];\n onItemClick: (event: React.MouseEvent<HTMLElement>) => void;\n onClose: () => void;\n}\n\nexport interface PipeT {\n showIconOnly: boolean;\n}\n\nexport interface LabelT {\n isSelected: boolean;\n isOnlyItem: boolean;\n}\n\nexport interface SearchTogglePropsT {\n onNext: () => void;\n onPrevious: () => void;\n currentResultIndex: number;\n totalResults: number;\n placeholder: string;\n value: string;\n onChange: () => void;\n onBlur: () => void;\n onClear: () => void;\n isOpen: boolean;\n onKeyDown: (e: React.KeyboardEvent) => void;\n onClick: (e: React.MouseEvent) => void;\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/components/Breadcrumb/GlobalHeaderBreadcrumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useContext, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Pipe } from './styles';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\nimport { PureBreadcrumb } from './PureBreadcrumb';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const {\n props: { breadcrumb },\n instanceUID,\n showIconOnly,\n setShowIconOnly,\n globalHeaderBreadcrumbGrid,\n } = useContext(GlobalHeaderContext);\n const breakpoint = useRef<number | null>(null);\n const flexRegion = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const evaluateShowIconOnly = () => {\n if (flexRegion && flexRegion.current && flexRegion?.current.offsetWidth <= 0 && !breakpoint.current) {\n setShowIconOnly(true);\n breakpoint.current = window.innerWidth;\n } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {\n setShowIconOnly(false);\n breakpoint.current = null;\n }\n };\n\n evaluateShowIconOnly();\n\n window.addEventListener('resize', evaluateShowIconOnly);\n return () => window.removeEventListener('resize', evaluateShowIconOnly);\n }, [breakpoint, flexRegion, setShowIconOnly]);\n\n return (\n <Grid\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumbs\"\n cols={globalHeaderBreadcrumbGrid}\n role=\"navigation\"\n >\n <Pipe showIconOnly={showIconOnly} />\n {breadcrumb?.map((item) => {\n const { label, ...rest } = item;\n return (\n <PureBreadcrumb\n label={label}\n length={breadcrumb.length}\n key={`${instanceUID}-breadcrumb-item-${label}`}\n {...rest}\n />\n );\n })}\n <div id=\"global-header-flex-region\" ref={flexRegion}></div>\n </Grid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,qBAAqB;AACrB,oBAAqB;AACrB,iCAAoC;AACpC,4BAA+B;AAExB,MAAM,yBAAyB,MAAmB;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AACf,QAAM,aAAa,yBAAsB;AACzC,QAAM,aAAa,yBAAuB;AAE1C,8BAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UAAI,cAAc,WAAW,WAAW,YAAY,QAAQ,eAAe,KAAK,CAAC,WAAW,SAAS;AACnG,wBAAgB;AAChB,mBAAW,UAAU,OAAO;AAAA,iBACnB,cAAc,WAAW,YAAY,QAAQ,OAAO,cAAc,WAAW,SAAS;AAC/F,wBAAgB;AAChB,mBAAW,UAAU;AAAA;AAAA;AAIzB;AAEA,WAAO,iBAAiB,UAAU;AAClC,WAAO,MAAM,OAAO,oBAAoB,UAAU;AAAA,KACjD,CAAC,YAAY,YAAY;AAE5B,SACE,mDAAC,qBAAD;AAAA,IACE,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,cAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAK;AAAA,KAEL,mDAAC,oBAAD;AAAA,IAAM;AAAA,MACL,YAAY,IAAI,CAAC,SAAS;AACzB,UAAM,EAAE,UAAU,SAAS;AAC3B,WACE,mDAAC,sCAAD;AAAA,MACE;AAAA,MACA,QAAQ,WAAW;AAAA,MACnB,KAAK,GAAG,+BAA+B;AAAA,SACnC;AAAA;AAAA,MAIV,mDAAC,OAAD;AAAA,IAAK,IAAG;AAAA,IAA4B,KAAK;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/components/Breadcrumb/PureBreadcrumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport { BreadcrumbItem, LabelButton, Label } from './styles';\nimport type { BreadcrumbItemT as Props } from '../../GlobalHeaderTypes';\n\nexport const PureBreadcrumb = React.memo(({ onClick, isSelected, length, label, hasNext, id, ...rest }: Props) => (\n <BreadcrumbItem>\n <LabelButton\n onClick={onClick}\n aria-selected={isSelected}\n data-testid=\"gh-breadcrumb-btn\"\n id={id}\n {...getDataProps(rest)}\n >\n <Label isSelected={!!isSelected} isOnlyItem={length === 1}>\n {label}\n </Label>\n </LabelButton>\n {hasNext && <ChevronSmallRight size=\"m\" fill=\"#FFF\" />}\n </BreadcrumbItem>\n));\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAAkC;AAClC,8BAA6B;AAC7B,oBAAmD;AAG5C,MAAM,iBAAiB,qBAAM,KAAK,CAAC,EAAE,SAAS,YAAY,QAAQ,OAAO,SAAS,OAAO,WAC9F,mDAAC,8BAAD,MACE,mDAAC,2BAAD;AAAA,EACE;AAAA,EACA,iBAAe;AAAA,EACf,eAAY;AAAA,EACZ;AAAA,KACI,0CAAa;AAAA,GAEjB,mDAAC,qBAAD;AAAA,EAAO,YAAY,CAAC,CAAC;AAAA,EAAY,YAAY,WAAW;AAAA,GACrD,SAGJ,WAAW,mDAAC,mCAAD;AAAA,EAAmB,MAAK;AAAA,EAAI,MAAK;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/components/Breadcrumb/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import styled from 'styled-components';\nimport type { LabelT, PipeT } from '../../GlobalHeaderTypes';\n\nexport const Pipe = styled.span<PipeT>`\n margin: 0 7px 0 0;\n border-left: ${({ showIconOnly }) => (showIconOnly ? 'none' : '1px solid #fff')};\n height: 20px;\n`;\n\nexport const BreadcrumbItem = styled.div`\n display: flex;\n align-items: center;\n height: 100%;\n`;\n\nexport const LabelButton = styled.button`\n width: fit-content;\n height: 100%;\n margin: 0;\n padding: 0;\n border: 1px solid transparent;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n position: relative;\n &:focus {\n :before {\n content: '';\n position: absolute;\n z-index: 2;\n top: 2px;\n left: -5px;\n width: calc(100% + 10px);\n height: calc(100% - 4px);\n border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n border-radius: 4px;\n }\n }\n`;\n\nexport const Label = styled.p<LabelT>`\n color: ${({ theme }) => theme.colors.neutral['000']};\n ${({ theme, isSelected }) =>\n `-webkit-text-stroke: 0.4px ${isSelected ? theme.colors.neutral['000'] : 'transparent'}`};\n font-size: 16px;\n text-transform: uppercase;\n border-bottom: ${({ isSelected, isOnlyItem }) => `2px solid ${isSelected && !isOnlyItem ? '#FFF' : 'transparent'}`};\n margin: 3px 5px 0 5px;\n :hover {\n ${({ theme }) => `-webkit-text-stroke: 0.4px ${theme.colors.neutral['000']}`};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAGZ,MAAM,OAAO,iCAAO;AAAA;AAAA,iBAEV,CAAC,EAAE,mBAAoB,eAAe,SAAS;AAAA;AAAA;AAIzD,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAmBR,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,QAAQ,iCAAO;AAAA,WACjB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,IAC3C,CAAC,EAAE,OAAO,iBACV,+BAA+B,aAAa,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA,mBAG3D,CAAC,EAAE,YAAY,iBAAiB,aAAa,cAAc,CAAC,aAAa,SAAS;AAAA;AAAA;AAAA,MAG/F,CAAC,EAAE,YAAY,8BAA8B,MAAM,OAAO,QAAQ;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/components/Title/GlobalHeaderTitle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const GlobalHeaderTitle = (): JSX.Element => {\n const {\n props: { Logo, LogoWithBrand },\n showIconOnly,\n } = useContext(GlobalHeaderContext);\n\n return (\n <Grid alignItems=\"center\" pr={showIconOnly ? '0px' : '36px'} cols={showIconOnly ? ['auto'] : ['auto', '1fr']}>\n {Logo && showIconOnly && <Logo />}\n {LogoWithBrand && !showIconOnly && <LogoWithBrand />}\n </Grid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,qBAAqB;AACrB,iCAAoC;AAE7B,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,MACE,6BAAW;AAEf,SACE,mDAAC,qBAAD;AAAA,IAAM,YAAW;AAAA,IAAS,IAAI,eAAe,QAAQ;AAAA,IAAQ,MAAM,eAAe,CAAC,UAAU,CAAC,QAAQ;AAAA,KACnG,QAAQ,gBAAgB,mDAAC,MAAD,OACxB,iBAAiB,CAAC,gBAAgB,mDAAC,eAAD;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/components/Toolbar/GlobalHeaderToolbar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ToolbarItems } from './ToolbarItems';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const { globalHeaderToolbarGrid } = useContext(GlobalHeaderContext);\n return (\n <Grid\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"toolbar\"\n >\n <ToolbarItems />\n </Grid>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,qBAAqB;AACrB,0BAA6B;AAC7B,iCAAoC;AAE7B,MAAM,sBAAsB,MAAmB;AACpD,QAAM,EAAE,4BAA4B,6BAAW;AAC/C,SACE,mDAAC,qBAAD;AAAA,IACE,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,QAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAK;AAAA,KAEL,mDAAC,kCAAD;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|