@elliemae/ds-global-header 2.1.0 → 2.2.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.
Files changed (105) hide show
  1. package/cjs/GlobalHeader.js +55 -35
  2. package/cjs/GlobalHeader.js.map +7 -0
  3. package/cjs/GlobalHeaderContainer.js +40 -23
  4. package/cjs/GlobalHeaderContainer.js.map +7 -0
  5. package/cjs/GlobalHeaderContext.js +39 -13
  6. package/cjs/GlobalHeaderContext.js.map +7 -0
  7. package/cjs/GlobalHeaderTypes.js +27 -2
  8. package/cjs/GlobalHeaderTypes.js.map +7 -0
  9. package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js +59 -59
  10. package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map +7 -0
  11. package/cjs/components/Breadcrumb/PureBreadcrumb.js +50 -59
  12. package/cjs/components/Breadcrumb/PureBreadcrumb.js.map +7 -0
  13. package/cjs/components/Breadcrumb/styles.js +82 -58
  14. package/cjs/components/Breadcrumb/styles.js.map +7 -0
  15. package/cjs/components/Title/GlobalHeaderTitle.js +43 -24
  16. package/cjs/components/Title/GlobalHeaderTitle.js.map +7 -0
  17. package/cjs/components/Toolbar/GlobalHeaderToolbar.js +41 -22
  18. package/cjs/components/Toolbar/GlobalHeaderToolbar.js.map +7 -0
  19. package/cjs/components/Toolbar/ToolbarItems.js +83 -94
  20. package/cjs/components/Toolbar/ToolbarItems.js.map +7 -0
  21. package/cjs/components/Toolbar/styles.js +60 -24
  22. package/cjs/components/Toolbar/styles.js.map +7 -0
  23. package/cjs/config/useGetPropsWithDefaults.js +42 -30
  24. package/cjs/config/useGetPropsWithDefaults.js.map +7 -0
  25. package/cjs/config/useGlobalHeader.js +44 -30
  26. package/cjs/config/useGlobalHeader.js.map +7 -0
  27. package/cjs/config/useValidateProps.js +81 -64
  28. package/cjs/config/useValidateProps.js.map +7 -0
  29. package/cjs/config/validateHelpers.js +95 -41
  30. package/cjs/config/validateHelpers.js.map +7 -0
  31. package/cjs/defaultProps.js +34 -7
  32. package/cjs/defaultProps.js.map +7 -0
  33. package/cjs/index.js +36 -11
  34. package/cjs/index.js.map +7 -0
  35. package/cjs/outOfTheBox/AppPicker/AppPicker.js +83 -90
  36. package/cjs/outOfTheBox/AppPicker/AppPicker.js.map +7 -0
  37. package/cjs/outOfTheBox/PopupMenu/PopupMenu.js +70 -75
  38. package/cjs/outOfTheBox/PopupMenu/PopupMenu.js.map +7 -0
  39. package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js +76 -83
  40. package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js.map +7 -0
  41. package/cjs/outOfTheBox/PopupMenu/styles.js +66 -31
  42. package/cjs/outOfTheBox/PopupMenu/styles.js.map +7 -0
  43. package/cjs/outOfTheBox/SearchToggle/SearchToggle.js +80 -85
  44. package/cjs/outOfTheBox/SearchToggle/SearchToggle.js.map +7 -0
  45. package/cjs/outOfTheBox/SearchToggle/styles.js +76 -9
  46. package/cjs/outOfTheBox/SearchToggle/styles.js.map +7 -0
  47. package/cjs/outOfTheBox/index.js +30 -13
  48. package/cjs/outOfTheBox/index.js.map +7 -0
  49. package/cjs/propTypes.js +52 -25
  50. package/cjs/propTypes.js.map +7 -0
  51. package/cjs/styles.js +42 -20
  52. package/cjs/styles.js.map +7 -0
  53. package/esm/GlobalHeader.js +21 -21
  54. package/esm/GlobalHeader.js.map +7 -0
  55. package/esm/GlobalHeaderContainer.js +11 -15
  56. package/esm/GlobalHeaderContainer.js.map +7 -0
  57. package/esm/GlobalHeaderContext.js +9 -8
  58. package/esm/GlobalHeaderContext.js.map +7 -0
  59. package/esm/GlobalHeaderTypes.js +2 -1
  60. package/esm/GlobalHeaderTypes.js.map +7 -0
  61. package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js +26 -45
  62. package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map +7 -0
  63. package/esm/components/Breadcrumb/PureBreadcrumb.js +22 -49
  64. package/esm/components/Breadcrumb/PureBreadcrumb.js.map +7 -0
  65. package/esm/components/Breadcrumb/styles.js +54 -48
  66. package/esm/components/Breadcrumb/styles.js.map +7 -0
  67. package/esm/components/Title/GlobalHeaderTitle.js +13 -15
  68. package/esm/components/Title/GlobalHeaderTitle.js.map +7 -0
  69. package/esm/components/Toolbar/GlobalHeaderToolbar.js +12 -14
  70. package/esm/components/Toolbar/GlobalHeaderToolbar.js.map +7 -0
  71. package/esm/components/Toolbar/ToolbarItems.js +53 -83
  72. package/esm/components/Toolbar/ToolbarItems.js.map +7 -0
  73. package/esm/components/Toolbar/styles.js +32 -17
  74. package/esm/components/Toolbar/styles.js.map +7 -0
  75. package/esm/config/useGetPropsWithDefaults.js +13 -22
  76. package/esm/config/useGetPropsWithDefaults.js.map +7 -0
  77. package/esm/config/useGlobalHeader.js +12 -19
  78. package/esm/config/useGlobalHeader.js.map +7 -0
  79. package/esm/config/useValidateProps.js +58 -58
  80. package/esm/config/useValidateProps.js.map +7 -0
  81. package/esm/config/validateHelpers.js +66 -28
  82. package/esm/config/validateHelpers.js.map +7 -0
  83. package/esm/defaultProps.js +5 -3
  84. package/esm/defaultProps.js.map +7 -0
  85. package/esm/index.js +7 -1
  86. package/esm/index.js.map +7 -0
  87. package/esm/outOfTheBox/AppPicker/AppPicker.js +50 -76
  88. package/esm/outOfTheBox/AppPicker/AppPicker.js.map +7 -0
  89. package/esm/outOfTheBox/PopupMenu/PopupMenu.js +37 -61
  90. package/esm/outOfTheBox/PopupMenu/PopupMenu.js.map +7 -0
  91. package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js +45 -71
  92. package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js.map +7 -0
  93. package/esm/outOfTheBox/PopupMenu/styles.js +38 -21
  94. package/esm/outOfTheBox/PopupMenu/styles.js.map +7 -0
  95. package/esm/outOfTheBox/SearchToggle/SearchToggle.js +46 -70
  96. package/esm/outOfTheBox/SearchToggle/SearchToggle.js.map +7 -0
  97. package/esm/outOfTheBox/SearchToggle/styles.js +51 -5
  98. package/esm/outOfTheBox/SearchToggle/styles.js.map +7 -0
  99. package/esm/outOfTheBox/index.js +5 -3
  100. package/esm/outOfTheBox/index.js.map +7 -0
  101. package/esm/propTypes.js +21 -17
  102. package/esm/propTypes.js.map +7 -0
  103. package/esm/styles.js +14 -13
  104. package/esm/styles.js.map +7 -0
  105. package/package.json +7 -7
@@ -1,48 +1,54 @@
1
- import styled from 'styled-components';
2
-
3
- const Pipe = /*#__PURE__*/styled.span.withConfig({
4
- componentId: "sc-1n5l527-0"
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
- });
11
- const BreadcrumbItem = /*#__PURE__*/styled.div.withConfig({
12
- componentId: "sc-1n5l527-1"
13
- })(["display:flex;align-items:center;height:100%;"]);
14
- const LabelButton = /*#__PURE__*/styled.button.withConfig({
15
- componentId: "sc-1n5l527-2"
16
- })(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{: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.neutral['000'];
21
- });
22
- const Label = /*#__PURE__*/styled.p.withConfig({
23
- componentId: "sc-1n5l527-3"
24
- })(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], _ref3 => {
25
- let {
26
- theme
27
- } = _ref3;
28
- return theme.colors.neutral['000'];
29
- }, _ref4 => {
30
- let {
31
- theme,
32
- isSelected
33
- } = _ref4;
34
- return "-webkit-text-stroke: 0.4px ".concat(isSelected ? theme.colors.neutral['000'] : 'transparent');
35
- }, _ref5 => {
36
- let {
37
- isSelected,
38
- isOnlyItem
39
- } = _ref5;
40
- return "2px solid ".concat(isSelected && !isOnlyItem ? '#FFF' : 'transparent');
41
- }, _ref6 => {
42
- let {
43
- theme
44
- } = _ref6;
45
- return "-webkit-text-stroke: 0.4px ".concat(theme.colors.neutral['000']);
46
- });
47
-
48
- export { BreadcrumbItem, Label, LabelButton, Pipe };
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 _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import { useContext } from 'react';
3
- import { Grid } from '@elliemae/ds-grid';
4
- import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
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 /*#__PURE__*/_jsx(Grid, {
10
+ return /* @__PURE__ */ React2.createElement(Grid, {
15
11
  alignItems: "center",
16
- pr: showIconOnly ? '0px' : '36px',
17
- cols: showIconOnly ? ['auto'] : ['auto', '1fr']
18
- }, void 0, Logo && showIconOnly && /*#__PURE__*/_jsx(Logo, {}), LogoWithBrand && !showIconOnly && /*#__PURE__*/_jsx(LogoWithBrand, {}));
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
- export { GlobalHeaderTitle };
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 _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import { useContext } from 'react';
3
- import { Grid } from '@elliemae/ds-grid';
4
- import { ToolbarItems } from './ToolbarItems.js';
5
- import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
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
- globalHeaderToolbarGrid
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
- }, void 0, _ToolbarItems || (_ToolbarItems = /*#__PURE__*/_jsx(ToolbarItems, {})));
15
+ }, /* @__PURE__ */ React2.createElement(ToolbarItems, null));
20
16
  };
21
-
22
- export { GlobalHeaderToolbar };
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 _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
- import 'core-js/modules/esnext.async-iterator.map.js';
5
- import 'core-js/modules/esnext.iterator.map.js';
6
- import 'core-js/modules/esnext.async-iterator.filter.js';
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
- const itemsList = useMemo(() => toolbar === null || toolbar === void 0 ? void 0 : toolbar.map(item => {
33
- var _Icon;
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 'ds-popup-menu':
49
- return /*#__PURE__*/jsx(PopupMenu, _objectSpread(_objectSpread({
16
+ case "ds-popup-menu":
17
+ return /* @__PURE__ */ React2.createElement(PopupMenu, {
50
18
  title: label,
51
- Icon: Icon,
52
- onClick: onClick,
53
- onKeyPress: onKeyPress,
54
- id: id
55
- }, otherProps), {}, {
56
- componentProps: componentProps
57
- }), "".concat(instanceUID, "-ds-popup-menu-").concat(label));
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 /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
80
- onClick: 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: id
84
- }, getDataProps(otherProps)), {}, {
85
- children: _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
86
- fill: "#FFF",
87
- size: "m"
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 /*#__PURE__*/jsx(Fragment, {
93
- children: itemsList
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 styled from 'styled-components';
2
-
3
- const Button = /*#__PURE__*/styled.button.withConfig({
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{: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.neutral['000'];
15
- });
16
-
17
- export { Button };
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 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import { useMemo } from 'react';
8
- import { defaultProps } from '../defaultProps.js';
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
- export { useGetPropsWithDefaults };
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 'core-js/modules/web.dom-collections.iterator.js';
2
- import React, { useState, useMemo } from 'react';
3
- import { uid } from 'uid';
4
- import { useGetPropsWithDefaults } from './useGetPropsWithDefaults.js';
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
- var _props$toolbar$length, _props$toolbar;
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 = React.useMemo(() => ({
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
- export { useGlobalHeader };
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
+ }