@elliemae/ds-global-header 2.2.0 → 2.3.0-alpha.3
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 +55 -35
- package/cjs/GlobalHeader.js.map +7 -0
- package/cjs/GlobalHeaderContainer.js +40 -23
- package/cjs/GlobalHeaderContainer.js.map +7 -0
- package/cjs/GlobalHeaderContext.js +39 -13
- package/cjs/GlobalHeaderContext.js.map +7 -0
- package/cjs/GlobalHeaderTypes.js +27 -2
- package/cjs/GlobalHeaderTypes.js.map +7 -0
- package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js +59 -59
- package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map +7 -0
- package/cjs/components/Breadcrumb/PureBreadcrumb.js +50 -59
- package/cjs/components/Breadcrumb/PureBreadcrumb.js.map +7 -0
- package/cjs/components/Breadcrumb/styles.js +82 -58
- package/cjs/components/Breadcrumb/styles.js.map +7 -0
- package/cjs/components/Title/GlobalHeaderTitle.js +43 -24
- package/cjs/components/Title/GlobalHeaderTitle.js.map +7 -0
- package/cjs/components/Toolbar/GlobalHeaderToolbar.js +41 -22
- package/cjs/components/Toolbar/GlobalHeaderToolbar.js.map +7 -0
- package/cjs/components/Toolbar/ToolbarItems.js +83 -94
- package/cjs/components/Toolbar/ToolbarItems.js.map +7 -0
- package/cjs/components/Toolbar/styles.js +60 -24
- package/cjs/components/Toolbar/styles.js.map +7 -0
- package/cjs/config/useGetPropsWithDefaults.js +42 -30
- package/cjs/config/useGetPropsWithDefaults.js.map +7 -0
- package/cjs/config/useGlobalHeader.js +44 -30
- package/cjs/config/useGlobalHeader.js.map +7 -0
- package/cjs/config/useValidateProps.js +81 -64
- package/cjs/config/useValidateProps.js.map +7 -0
- package/cjs/config/validateHelpers.js +95 -41
- package/cjs/config/validateHelpers.js.map +7 -0
- package/cjs/defaultProps.js +34 -7
- package/cjs/defaultProps.js.map +7 -0
- package/cjs/index.js +36 -11
- package/cjs/index.js.map +7 -0
- package/cjs/outOfTheBox/AppPicker/AppPicker.js +83 -90
- package/cjs/outOfTheBox/AppPicker/AppPicker.js.map +7 -0
- package/cjs/outOfTheBox/PopupMenu/PopupMenu.js +70 -75
- package/cjs/outOfTheBox/PopupMenu/PopupMenu.js.map +7 -0
- package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js +76 -83
- package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js.map +7 -0
- package/cjs/outOfTheBox/PopupMenu/styles.js +66 -31
- package/cjs/outOfTheBox/PopupMenu/styles.js.map +7 -0
- package/cjs/outOfTheBox/SearchToggle/SearchToggle.js +80 -85
- package/cjs/outOfTheBox/SearchToggle/SearchToggle.js.map +7 -0
- package/cjs/outOfTheBox/SearchToggle/styles.js +76 -9
- package/cjs/outOfTheBox/SearchToggle/styles.js.map +7 -0
- package/cjs/outOfTheBox/index.js +30 -13
- package/cjs/outOfTheBox/index.js.map +7 -0
- package/cjs/propTypes.js +52 -25
- package/cjs/propTypes.js.map +7 -0
- package/cjs/styles.js +42 -20
- package/cjs/styles.js.map +7 -0
- package/esm/GlobalHeader.js +21 -21
- package/esm/GlobalHeader.js.map +7 -0
- package/esm/GlobalHeaderContainer.js +11 -15
- package/esm/GlobalHeaderContainer.js.map +7 -0
- package/esm/GlobalHeaderContext.js +9 -8
- package/esm/GlobalHeaderContext.js.map +7 -0
- package/esm/GlobalHeaderTypes.js +2 -1
- package/esm/GlobalHeaderTypes.js.map +7 -0
- package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js +26 -45
- package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map +7 -0
- package/esm/components/Breadcrumb/PureBreadcrumb.js +22 -49
- package/esm/components/Breadcrumb/PureBreadcrumb.js.map +7 -0
- package/esm/components/Breadcrumb/styles.js +54 -48
- package/esm/components/Breadcrumb/styles.js.map +7 -0
- package/esm/components/Title/GlobalHeaderTitle.js +13 -15
- package/esm/components/Title/GlobalHeaderTitle.js.map +7 -0
- package/esm/components/Toolbar/GlobalHeaderToolbar.js +12 -14
- package/esm/components/Toolbar/GlobalHeaderToolbar.js.map +7 -0
- package/esm/components/Toolbar/ToolbarItems.js +53 -83
- package/esm/components/Toolbar/ToolbarItems.js.map +7 -0
- package/esm/components/Toolbar/styles.js +32 -17
- package/esm/components/Toolbar/styles.js.map +7 -0
- package/esm/config/useGetPropsWithDefaults.js +13 -22
- package/esm/config/useGetPropsWithDefaults.js.map +7 -0
- package/esm/config/useGlobalHeader.js +12 -19
- package/esm/config/useGlobalHeader.js.map +7 -0
- package/esm/config/useValidateProps.js +58 -58
- package/esm/config/useValidateProps.js.map +7 -0
- package/esm/config/validateHelpers.js +66 -28
- package/esm/config/validateHelpers.js.map +7 -0
- package/esm/defaultProps.js +5 -3
- package/esm/defaultProps.js.map +7 -0
- package/esm/index.js +7 -1
- package/esm/index.js.map +7 -0
- package/esm/outOfTheBox/AppPicker/AppPicker.js +50 -76
- package/esm/outOfTheBox/AppPicker/AppPicker.js.map +7 -0
- package/esm/outOfTheBox/PopupMenu/PopupMenu.js +37 -61
- package/esm/outOfTheBox/PopupMenu/PopupMenu.js.map +7 -0
- package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js +45 -71
- package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js.map +7 -0
- package/esm/outOfTheBox/PopupMenu/styles.js +38 -21
- package/esm/outOfTheBox/PopupMenu/styles.js.map +7 -0
- package/esm/outOfTheBox/SearchToggle/SearchToggle.js +46 -70
- package/esm/outOfTheBox/SearchToggle/SearchToggle.js.map +7 -0
- package/esm/outOfTheBox/SearchToggle/styles.js +51 -5
- package/esm/outOfTheBox/SearchToggle/styles.js.map +7 -0
- package/esm/outOfTheBox/index.js +5 -3
- package/esm/outOfTheBox/index.js.map +7 -0
- package/esm/propTypes.js +21 -17
- package/esm/propTypes.js.map +7 -0
- package/esm/styles.js +14 -13
- package/esm/styles.js.map +7 -0
- package/package.json +7 -7
|
@@ -1,48 +1,54 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
const Pipe =
|
|
4
|
-
|
|
5
|
-
})
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
const Pipe = styled.span`
|
|
4
|
+
margin: 0 7px 0 0;
|
|
5
|
+
border-left: ${({ showIconOnly }) => showIconOnly ? "none" : "1px solid #fff"};
|
|
6
|
+
height: 20px;
|
|
7
|
+
`;
|
|
8
|
+
const BreadcrumbItem = styled.div`
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
height: 100%;
|
|
12
|
+
`;
|
|
13
|
+
const LabelButton = styled.button`
|
|
14
|
+
width: fit-content;
|
|
15
|
+
height: 100%;
|
|
16
|
+
margin: 0;
|
|
17
|
+
padding: 0;
|
|
18
|
+
border: 1px solid transparent;
|
|
19
|
+
background-color: transparent;
|
|
20
|
+
outline: none;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
position: relative;
|
|
23
|
+
&:focus {
|
|
24
|
+
:before {
|
|
25
|
+
content: '';
|
|
26
|
+
position: absolute;
|
|
27
|
+
z-index: 2;
|
|
28
|
+
top: 2px;
|
|
29
|
+
left: -5px;
|
|
30
|
+
width: calc(100% + 10px);
|
|
31
|
+
height: calc(100% - 4px);
|
|
32
|
+
border: 2px solid ${({ theme }) => theme.colors.neutral["000"]};
|
|
33
|
+
border-radius: 4px;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
`;
|
|
37
|
+
const Label = styled.p`
|
|
38
|
+
color: ${({ theme }) => theme.colors.neutral["000"]};
|
|
39
|
+
${({ theme, isSelected }) => `-webkit-text-stroke: 0.4px ${isSelected ? theme.colors.neutral["000"] : "transparent"}`};
|
|
40
|
+
font-size: 16px;
|
|
41
|
+
text-transform: uppercase;
|
|
42
|
+
border-bottom: ${({ isSelected, isOnlyItem }) => `2px solid ${isSelected && !isOnlyItem ? "#FFF" : "transparent"}`};
|
|
43
|
+
margin: 3px 5px 0 5px;
|
|
44
|
+
:hover {
|
|
45
|
+
${({ theme }) => `-webkit-text-stroke: 0.4px ${theme.colors.neutral["000"]}`};
|
|
46
|
+
}
|
|
47
|
+
`;
|
|
48
|
+
export {
|
|
49
|
+
BreadcrumbItem,
|
|
50
|
+
Label,
|
|
51
|
+
LabelButton,
|
|
52
|
+
Pipe
|
|
53
|
+
};
|
|
54
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Breadcrumb/styles.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAGO,MAAM,OAAO,OAAO;AAAA;AAAA,iBAEV,CAAC,EAAE,mBAAoB,eAAe,SAAS;AAAA;AAAA;AAIzD,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAM,cAAc,OAAO;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,OAAO;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,21 +1,19 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useContext } from
|
|
3
|
-
import { Grid } from
|
|
4
|
-
import { GlobalHeaderContext } from
|
|
5
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useContext } from "react";
|
|
3
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
+
import { GlobalHeaderContext } from "../../GlobalHeaderContext";
|
|
6
5
|
const GlobalHeaderTitle = () => {
|
|
7
6
|
const {
|
|
8
|
-
props: {
|
|
9
|
-
Logo,
|
|
10
|
-
LogoWithBrand
|
|
11
|
-
},
|
|
7
|
+
props: { Logo, LogoWithBrand },
|
|
12
8
|
showIconOnly
|
|
13
9
|
} = useContext(GlobalHeaderContext);
|
|
14
|
-
return
|
|
10
|
+
return /* @__PURE__ */ React2.createElement(Grid, {
|
|
15
11
|
alignItems: "center",
|
|
16
|
-
pr: showIconOnly ?
|
|
17
|
-
cols: showIconOnly ? [
|
|
18
|
-
},
|
|
12
|
+
pr: showIconOnly ? "0px" : "36px",
|
|
13
|
+
cols: showIconOnly ? ["auto"] : ["auto", "1fr"]
|
|
14
|
+
}, Logo && showIconOnly && /* @__PURE__ */ React2.createElement(Logo, null), LogoWithBrand && !showIconOnly && /* @__PURE__ */ React2.createElement(LogoWithBrand, null));
|
|
19
15
|
};
|
|
20
|
-
|
|
21
|
-
|
|
16
|
+
export {
|
|
17
|
+
GlobalHeaderTitle
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=GlobalHeaderTitle.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Title/GlobalHeaderTitle.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,MACE,WAAW;AAEf,SACE,qCAAC,MAAD;AAAA,IAAM,YAAW;AAAA,IAAS,IAAI,eAAe,QAAQ;AAAA,IAAQ,MAAM,eAAe,CAAC,UAAU,CAAC,QAAQ;AAAA,KACnG,QAAQ,gBAAgB,qCAAC,MAAD,OACxB,iBAAiB,CAAC,gBAAgB,qCAAC,eAAD;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,22 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useContext } from
|
|
3
|
-
import { Grid } from
|
|
4
|
-
import { ToolbarItems } from
|
|
5
|
-
import { GlobalHeaderContext } from
|
|
6
|
-
|
|
7
|
-
var _ToolbarItems;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useContext } from "react";
|
|
3
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
+
import { ToolbarItems } from "./ToolbarItems";
|
|
5
|
+
import { GlobalHeaderContext } from "../../GlobalHeaderContext";
|
|
8
6
|
const GlobalHeaderToolbar = () => {
|
|
9
|
-
const {
|
|
10
|
-
|
|
11
|
-
} = useContext(GlobalHeaderContext);
|
|
12
|
-
return /*#__PURE__*/_jsx(Grid, {
|
|
7
|
+
const { globalHeaderToolbarGrid } = useContext(GlobalHeaderContext);
|
|
8
|
+
return /* @__PURE__ */ React2.createElement(Grid, {
|
|
13
9
|
height: "100%",
|
|
14
10
|
alignItems: "center",
|
|
15
11
|
justifyContent: "center",
|
|
16
12
|
gutter: "xxs",
|
|
17
13
|
cols: globalHeaderToolbarGrid,
|
|
18
14
|
role: "toolbar"
|
|
19
|
-
},
|
|
15
|
+
}, /* @__PURE__ */ React2.createElement(ToolbarItems, null));
|
|
20
16
|
};
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
export {
|
|
18
|
+
GlobalHeaderToolbar
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=GlobalHeaderToolbar.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Toolbar/GlobalHeaderToolbar.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEO,MAAM,sBAAsB,MAAmB;AACpD,QAAM,EAAE,4BAA4B,WAAW;AAC/C,SACE,qCAAC,MAAD;AAAA,IACE,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,QAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAK;AAAA,KAEL,qCAAC,cAAD;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,97 +1,67 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
8
|
-
import 'core-js/modules/esnext.iterator.filter.js';
|
|
9
|
-
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
10
|
-
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
11
|
-
import { useContext, useMemo } from 'react';
|
|
12
|
-
import { AppPicker } from '../../outOfTheBox/AppPicker/AppPicker.js';
|
|
13
|
-
import { PopupMenu } from '../../outOfTheBox/PopupMenu/PopupMenu.js';
|
|
14
|
-
import { SearchToggle } from '../../outOfTheBox/SearchToggle/SearchToggle.js';
|
|
15
|
-
import { Button } from './styles.js';
|
|
16
|
-
import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
|
|
17
|
-
import { getDataProps } from '@elliemae/ds-props-helpers';
|
|
18
|
-
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
19
|
-
|
|
20
|
-
const _excluded = ["Icon", "type", "onClick", "componentProps", "label", "onKeyPress", "id", "CustomComponent"];
|
|
21
|
-
|
|
22
|
-
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; }
|
|
23
|
-
|
|
24
|
-
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; }
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useContext, useMemo } from "react";
|
|
3
|
+
import { AppPicker, PopupMenu, SearchToggle } from "../../outOfTheBox";
|
|
4
|
+
import { Button } from "./styles";
|
|
5
|
+
import { GlobalHeaderContext } from "../../GlobalHeaderContext";
|
|
6
|
+
import { getDataProps } from "@elliemae/ds-props-helpers";
|
|
25
7
|
const ToolbarItems = () => {
|
|
26
8
|
const {
|
|
27
|
-
props: {
|
|
28
|
-
toolbar
|
|
29
|
-
},
|
|
9
|
+
props: { toolbar },
|
|
30
10
|
instanceUID
|
|
31
11
|
} = useContext(GlobalHeaderContext);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
const {
|
|
36
|
-
Icon,
|
|
37
|
-
type,
|
|
38
|
-
onClick,
|
|
39
|
-
componentProps,
|
|
40
|
-
label,
|
|
41
|
-
onKeyPress,
|
|
42
|
-
id,
|
|
43
|
-
CustomComponent
|
|
44
|
-
} = item,
|
|
45
|
-
otherProps = _objectWithoutProperties(item, _excluded);
|
|
46
|
-
|
|
12
|
+
console.log(`toolbar`, toolbar);
|
|
13
|
+
const itemsList = useMemo(() => toolbar?.map((item) => {
|
|
14
|
+
const { Icon, type, onClick, componentProps, label, onKeyPress, id, CustomComponent, ...otherProps } = item;
|
|
47
15
|
switch (type) {
|
|
48
|
-
case
|
|
49
|
-
return
|
|
16
|
+
case "ds-popup-menu":
|
|
17
|
+
return /* @__PURE__ */ React2.createElement(PopupMenu, {
|
|
50
18
|
title: label,
|
|
51
|
-
Icon
|
|
52
|
-
onClick
|
|
53
|
-
onKeyPress
|
|
54
|
-
id
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
case 'ds-app-picker':
|
|
60
|
-
return /*#__PURE__*/jsx(AppPicker, _objectSpread({
|
|
61
|
-
label: label,
|
|
62
|
-
id: id,
|
|
63
|
-
componentProps: componentProps
|
|
64
|
-
}, otherProps), "".concat(instanceUID, "-ds-app-picker-").concat(label));
|
|
65
|
-
|
|
66
|
-
case 'ds-search-toggle':
|
|
67
|
-
return /*#__PURE__*/jsx(SearchToggle, _objectSpread({
|
|
68
|
-
id: id,
|
|
69
|
-
componentProps: componentProps
|
|
70
|
-
}, otherProps), "".concat(instanceUID, "-ds-search-toggle-").concat(id));
|
|
71
|
-
|
|
72
|
-
case 'custom':
|
|
73
|
-
if (CustomComponent) return /*#__PURE__*/_jsx(CustomComponent, {
|
|
74
|
-
item: item
|
|
19
|
+
Icon,
|
|
20
|
+
onClick,
|
|
21
|
+
onKeyPress,
|
|
22
|
+
id,
|
|
23
|
+
key: `${instanceUID}-ds-popup-menu-${label}`,
|
|
24
|
+
...otherProps,
|
|
25
|
+
componentProps
|
|
75
26
|
});
|
|
27
|
+
case "ds-app-picker":
|
|
28
|
+
return /* @__PURE__ */ React2.createElement(AppPicker, {
|
|
29
|
+
label,
|
|
30
|
+
key: `${instanceUID}-ds-app-picker-${label}`,
|
|
31
|
+
id,
|
|
32
|
+
componentProps,
|
|
33
|
+
...otherProps
|
|
34
|
+
});
|
|
35
|
+
case "ds-search-toggle":
|
|
36
|
+
return /* @__PURE__ */ React2.createElement(SearchToggle, {
|
|
37
|
+
key: `${instanceUID}-ds-search-toggle-${id}`,
|
|
38
|
+
id,
|
|
39
|
+
componentProps,
|
|
40
|
+
...otherProps
|
|
41
|
+
});
|
|
42
|
+
case "custom":
|
|
43
|
+
if (CustomComponent)
|
|
44
|
+
return /* @__PURE__ */ React2.createElement(CustomComponent, {
|
|
45
|
+
item
|
|
46
|
+
});
|
|
76
47
|
return null;
|
|
77
|
-
|
|
78
48
|
default:
|
|
79
|
-
return
|
|
80
|
-
onClick
|
|
49
|
+
return /* @__PURE__ */ React2.createElement(Button, {
|
|
50
|
+
onClick,
|
|
51
|
+
key: `${instanceUID}-ds-toolbar-button-${label}`,
|
|
81
52
|
title: label,
|
|
82
53
|
"data-testid": "gh-toolbar-item",
|
|
83
|
-
id
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}), "".concat(instanceUID, "-ds-toolbar-button-").concat(label));
|
|
54
|
+
id,
|
|
55
|
+
...getDataProps(otherProps)
|
|
56
|
+
}, /* @__PURE__ */ React2.createElement(Icon, {
|
|
57
|
+
fill: "#FFF",
|
|
58
|
+
size: "m"
|
|
59
|
+
}));
|
|
90
60
|
}
|
|
91
61
|
}), [toolbar, instanceUID]);
|
|
92
|
-
return
|
|
93
|
-
|
|
94
|
-
|
|
62
|
+
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, itemsList);
|
|
63
|
+
};
|
|
64
|
+
export {
|
|
65
|
+
ToolbarItems
|
|
95
66
|
};
|
|
96
|
-
|
|
97
|
-
export { ToolbarItems };
|
|
67
|
+
//# sourceMappingURL=ToolbarItems.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Toolbar/ToolbarItems.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-case-declarations */\nimport React, { useContext, useMemo } from 'react';\nimport { AppPicker, PopupMenu, SearchToggle } from '../../outOfTheBox';\nimport { Button } from './styles';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\n\nexport const ToolbarItems = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n } = useContext(GlobalHeaderContext);\n\n console.log(`toolbar`, toolbar);\n const itemsList = useMemo(\n () =>\n toolbar?.map((item) => {\n const { Icon, type, onClick, componentProps, label, onKeyPress, id, CustomComponent, ...otherProps } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n return (\n <PopupMenu\n title={label}\n Icon={Icon}\n onClick={onClick}\n onKeyPress={onKeyPress}\n id={id}\n key={`${instanceUID}-ds-popup-menu-${label}`}\n {...otherProps}\n componentProps={componentProps}\n />\n );\n case 'ds-app-picker':\n return (\n <AppPicker\n label={label}\n key={`${instanceUID}-ds-app-picker-${label}`}\n id={id}\n componentProps={componentProps}\n {...otherProps}\n />\n );\n case 'ds-search-toggle':\n return (\n <SearchToggle\n key={`${instanceUID}-ds-search-toggle-${id}`}\n id={id}\n componentProps={componentProps}\n {...otherProps}\n />\n );\n case 'custom':\n if (CustomComponent) return <CustomComponent item={item} />;\n return null;\n default:\n return (\n <Button\n onClick={onClick}\n key={`${instanceUID}-ds-toolbar-button-${label}`}\n title={label}\n data-testid=\"gh-toolbar-item\"\n id={id}\n {...getDataProps(otherProps)}\n >\n <Icon fill=\"#FFF\" size=\"m\" />\n </Button>\n );\n }\n }),\n [toolbar, instanceUID],\n );\n\n return <>{itemsList}</>;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEO,MAAM,eAAe,MAAmB;AAC7C,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,WAAW;AAEf,UAAQ,IAAI,WAAW;AACvB,QAAM,YAAY,QAChB,MACE,SAAS,IAAI,CAAC,SAAS;AACrB,UAAM,EAAE,MAAM,MAAM,SAAS,gBAAgB,OAAO,YAAY,IAAI,oBAAoB,eAAe;AAEvG,YAAQ;AAAA,WACD;AACH,eACE,qCAAC,WAAD;AAAA,UACE,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,KAAK,GAAG,6BAA6B;AAAA,aACjC;AAAA,UACJ;AAAA;AAAA,WAGD;AACH,eACE,qCAAC,WAAD;AAAA,UACE;AAAA,UACA,KAAK,GAAG,6BAA6B;AAAA,UACrC;AAAA,UACA;AAAA,aACI;AAAA;AAAA,WAGL;AACH,eACE,qCAAC,cAAD;AAAA,UACE,KAAK,GAAG,gCAAgC;AAAA,UACxC;AAAA,UACA;AAAA,aACI;AAAA;AAAA,WAGL;AACH,YAAI;AAAiB,iBAAO,qCAAC,iBAAD;AAAA,YAAiB;AAAA;AAC7C,eAAO;AAAA;AAEP,eACE,qCAAC,QAAD;AAAA,UACE;AAAA,UACA,KAAK,GAAG,iCAAiC;AAAA,UACzC,OAAO;AAAA,UACP,eAAY;AAAA,UACZ;AAAA,aACI,aAAa;AAAA,WAEjB,qCAAC,MAAD;AAAA,UAAM,MAAK;AAAA,UAAO,MAAK;AAAA;AAAA;AAAA,MAKnC,CAAC,SAAS;AAGZ,SAAO,4DAAG;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,17 +1,32 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
const Button =
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
theme
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
const Button = styled.button`
|
|
4
|
+
height: 40px;
|
|
5
|
+
width: 40px;
|
|
6
|
+
border: none;
|
|
7
|
+
background-color: transparent;
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
position: relative;
|
|
10
|
+
outline: none;
|
|
11
|
+
&:hover:not(:focus) {
|
|
12
|
+
background-color: ${({ theme }) => theme.colors.brand[700]};
|
|
13
|
+
outline: none;
|
|
14
|
+
}
|
|
15
|
+
&:focus {
|
|
16
|
+
:before {
|
|
17
|
+
content: '';
|
|
18
|
+
position: absolute;
|
|
19
|
+
z-index: 2;
|
|
20
|
+
top: 2px;
|
|
21
|
+
left: 2px;
|
|
22
|
+
width: calc(100% - 4px);
|
|
23
|
+
height: calc(100% - 4px);
|
|
24
|
+
border: 2px solid ${({ theme }) => theme.colors.neutral["000"]};
|
|
25
|
+
border-radius: 4px;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
`;
|
|
29
|
+
export {
|
|
30
|
+
Button
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Toolbar/styles.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const Button = styled.button`\n height: 40px;\n width: 40px;\n border: none;\n background-color: transparent;\n cursor: pointer;\n position: relative;\n outline: none;\n &:hover:not(:focus) {\n background-color: ${({ theme }) => theme.colors.brand[700]};\n outline: none;\n }\n &:focus {\n :before {\n content: '';\n position: absolute;\n z-index: 2;\n top: 2px;\n left: 2px;\n width: calc(100% - 4px);\n height: calc(100% - 4px);\n border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n border-radius: 4px;\n }\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEO,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASL,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYhC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,23 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
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; }
|
|
11
|
-
|
|
12
|
-
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; }
|
|
13
|
-
const useGetPropsWithDefaults = props => {
|
|
14
|
-
const {
|
|
15
|
-
toolbar,
|
|
16
|
-
breadcrumb,
|
|
17
|
-
Logo,
|
|
18
|
-
LogoWithBrand
|
|
19
|
-
} = props;
|
|
20
|
-
return useMemo(() => _objectSpread(_objectSpread({}, defaultProps), props), [toolbar, breadcrumb, Logo, LogoWithBrand]);
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { defaultProps } from "../defaultProps";
|
|
4
|
+
const useGetPropsWithDefaults = (props) => {
|
|
5
|
+
const { toolbar, breadcrumb, Logo, LogoWithBrand } = props;
|
|
6
|
+
return useMemo(() => ({
|
|
7
|
+
...defaultProps,
|
|
8
|
+
...props
|
|
9
|
+
}), [toolbar, breadcrumb, Logo, LogoWithBrand]);
|
|
21
10
|
};
|
|
22
|
-
|
|
23
|
-
|
|
11
|
+
export {
|
|
12
|
+
useGetPropsWithDefaults
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=useGetPropsWithDefaults.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGetPropsWithDefaults.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react-hooks/exhaustive-deps */\nimport { useMemo } from 'react';\nimport type { GlobalHeaderPropsT } from '../GlobalHeaderTypes';\nimport { defaultProps } from '../defaultProps';\n\nexport const useGetPropsWithDefaults = (props: GlobalHeaderPropsT): GlobalHeaderPropsT => {\n const { toolbar, breadcrumb, Logo, LogoWithBrand } = props;\n\n return useMemo(\n () => ({\n ...defaultProps,\n ...props,\n }),\n [toolbar, breadcrumb, Logo, LogoWithBrand],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AAEA;AAEO,MAAM,0BAA0B,CAAC,UAAkD;AACxF,QAAM,EAAE,SAAS,YAAY,MAAM,kBAAkB;AAErD,SAAO,QACL,MAAO;AAAA,OACF;AAAA,OACA;AAAA,MAEL,CAAC,SAAS,YAAY,MAAM;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,23 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { uid } from
|
|
4
|
-
import { useGetPropsWithDefaults } from
|
|
5
|
-
|
|
6
|
-
const useGlobalHeader = props => {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useState, useMemo } from "react";
|
|
3
|
+
import { uid } from "uid";
|
|
4
|
+
import { useGetPropsWithDefaults } from "./useGetPropsWithDefaults";
|
|
5
|
+
const useGlobalHeader = (props) => {
|
|
7
6
|
const [showIconOnly, setShowIconOnly] = useState(false);
|
|
8
7
|
const instanceUID = useMemo(() => uid(5), []);
|
|
9
|
-
const globalHeaderToolbarGrid = useMemo(() =>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
return new Array((_props$toolbar$length = props === null || props === void 0 ? void 0 : (_props$toolbar = props.toolbar) === null || _props$toolbar === void 0 ? void 0 : _props$toolbar.length) !== null && _props$toolbar$length !== void 0 ? _props$toolbar$length : 0).fill('auto');
|
|
13
|
-
}, [props.toolbar]);
|
|
14
|
-
const globalHeaderBreadcrumbGrid = useMemo(() => {
|
|
15
|
-
var _props$breadcrumb$len, _props$breadcrumb;
|
|
16
|
-
|
|
17
|
-
return ['auto', ...new Array((_props$breadcrumb$len = props === null || props === void 0 ? void 0 : (_props$breadcrumb = props.breadcrumb) === null || _props$breadcrumb === void 0 ? void 0 : _props$breadcrumb.length) !== null && _props$breadcrumb$len !== void 0 ? _props$breadcrumb$len : 0).fill('auto'), '1fr'];
|
|
18
|
-
}, [props.breadcrumb]);
|
|
8
|
+
const globalHeaderToolbarGrid = useMemo(() => new Array(props?.toolbar?.length ?? 0).fill("auto"), [props.toolbar]);
|
|
9
|
+
const globalHeaderBreadcrumbGrid = useMemo(() => ["auto", ...new Array(props?.breadcrumb?.length ?? 0).fill("auto"), "1fr"], [props.breadcrumb]);
|
|
19
10
|
const propsWithDefaults = useGetPropsWithDefaults(props);
|
|
20
|
-
const ctx =
|
|
11
|
+
const ctx = React2.useMemo(() => ({
|
|
21
12
|
props: propsWithDefaults,
|
|
22
13
|
showIconOnly,
|
|
23
14
|
setShowIconOnly,
|
|
@@ -27,5 +18,7 @@ const useGlobalHeader = props => {
|
|
|
27
18
|
}), [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid, globalHeaderBreadcrumbGrid]);
|
|
28
19
|
return ctx;
|
|
29
20
|
};
|
|
30
|
-
|
|
31
|
-
|
|
21
|
+
export {
|
|
22
|
+
useGlobalHeader
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=useGlobalHeader.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGlobalHeader.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { ContextT, GlobalHeaderPropsT } from '../GlobalHeaderTypes';\nimport { useGetPropsWithDefaults } from './useGetPropsWithDefaults';\n\nexport const useGlobalHeader = (props: GlobalHeaderPropsT): ContextT => {\n const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n const instanceUID = useMemo(() => uid(5), []);\n\n const globalHeaderToolbarGrid = useMemo(() => new Array(props?.toolbar?.length ?? 0).fill('auto'), [props.toolbar]);\n const globalHeaderBreadcrumbGrid = useMemo(\n () => ['auto', ...new Array(props?.breadcrumb?.length ?? 0).fill('auto'), '1fr'],\n [props.breadcrumb],\n );\n\n const propsWithDefaults = useGetPropsWithDefaults(props);\n\n const ctx = React.useMemo(\n () => ({\n props: propsWithDefaults,\n showIconOnly,\n setShowIconOnly,\n instanceUID,\n globalHeaderToolbarGrid,\n globalHeaderBreadcrumbGrid,\n }),\n [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid, globalHeaderBreadcrumbGrid],\n );\n\n return ctx;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA;AAEO,MAAM,kBAAkB,CAAC,UAAwC;AACtE,QAAM,CAAC,cAAc,mBAAmB,SAAkB;AAE1D,QAAM,cAAc,QAAQ,MAAM,IAAI,IAAI;AAE1C,QAAM,0BAA0B,QAAQ,MAAM,IAAI,MAAM,OAAO,SAAS,UAAU,GAAG,KAAK,SAAS,CAAC,MAAM;AAC1G,QAAM,6BAA6B,QACjC,MAAM,CAAC,QAAQ,GAAG,IAAI,MAAM,OAAO,YAAY,UAAU,GAAG,KAAK,SAAS,QAC1E,CAAC,MAAM;AAGT,QAAM,oBAAoB,wBAAwB;AAElD,QAAM,MAAM,OAAM,QAChB,MAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,mBAAmB,cAAc,aAAa,yBAAyB;AAG1E,SAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|