@elliemae/ds-global-header 3.0.0-alpha.0 → 3.0.0-alpha.1
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/dist/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js +30 -5
- package/dist/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map +1 -1
- package/dist/cjs/components/Breadcrumb/PureBreadcrumb.js +41 -13
- package/dist/cjs/components/Breadcrumb/PureBreadcrumb.js.map +1 -1
- package/dist/cjs/components/Toolbar/ToolbarItems.js +43 -17
- package/dist/cjs/components/Toolbar/ToolbarItems.js.map +1 -1
- package/dist/cjs/config/useGetPropsWithDefaults.js +15 -4
- package/dist/cjs/config/useGetPropsWithDefaults.js.map +1 -1
- package/dist/cjs/outOfTheBox/AppPicker/AppPicker.js +39 -10
- package/dist/cjs/outOfTheBox/AppPicker/AppPicker.js.map +1 -1
- package/dist/cjs/outOfTheBox/PopupMenu/PopupMenu.js +31 -5
- package/dist/cjs/outOfTheBox/PopupMenu/PopupMenu.js.map +1 -1
- package/dist/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js +24 -16
- package/dist/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js.map +1 -1
- package/dist/cjs/outOfTheBox/SearchToggle/SearchToggle.js +31 -5
- package/dist/cjs/outOfTheBox/SearchToggle/SearchToggle.js.map +1 -1
- package/dist/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js +32 -5
- package/dist/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map +1 -1
- package/dist/esm/components/Breadcrumb/PureBreadcrumb.js +43 -13
- package/dist/esm/components/Breadcrumb/PureBreadcrumb.js.map +1 -1
- package/dist/esm/components/Toolbar/ToolbarItems.js +45 -17
- package/dist/esm/components/Toolbar/ToolbarItems.js.map +1 -1
- package/dist/esm/config/useGetPropsWithDefaults.js +17 -4
- package/dist/esm/config/useGetPropsWithDefaults.js.map +1 -1
- package/dist/esm/outOfTheBox/AppPicker/AppPicker.js +41 -10
- package/dist/esm/outOfTheBox/AppPicker/AppPicker.js.map +1 -1
- package/dist/esm/outOfTheBox/PopupMenu/PopupMenu.js +33 -5
- package/dist/esm/outOfTheBox/PopupMenu/PopupMenu.js.map +1 -1
- package/dist/esm/outOfTheBox/PopupMenu/PopupMenuContent.js +26 -16
- package/dist/esm/outOfTheBox/PopupMenu/PopupMenuContent.js.map +1 -1
- package/dist/esm/outOfTheBox/SearchToggle/SearchToggle.js +33 -5
- package/dist/esm/outOfTheBox/SearchToggle/SearchToggle.js.map +1 -1
- package/package.json +10 -9
- package/dist/types/GlobalHeader.d.ts +0 -39
- package/dist/types/GlobalHeaderContainer.d.ts +0 -3
- package/dist/types/GlobalHeaderContext.d.ts +0 -3
- package/dist/types/GlobalHeaderTypes.d.ts +0 -85
- package/dist/types/components/Breadcrumb/GlobalHeaderBreadcrumb.d.ts +0 -2
- package/dist/types/components/Breadcrumb/PureBreadcrumb.d.ts +0 -3
- package/dist/types/components/Breadcrumb/styles.d.ts +0 -5
- package/dist/types/components/Title/GlobalHeaderTitle.d.ts +0 -2
- package/dist/types/components/Toolbar/GlobalHeaderToolbar.d.ts +0 -2
- package/dist/types/components/Toolbar/ToolbarItems.d.ts +0 -2
- package/dist/types/components/Toolbar/styles.d.ts +0 -1
- package/dist/types/config/useGetPropsWithDefaults.d.ts +0 -2
- package/dist/types/config/useGlobalHeader.d.ts +0 -2
- package/dist/types/config/useValidateProps.d.ts +0 -2
- package/dist/types/config/validateHelpers.d.ts +0 -27
- package/dist/types/defaultProps.d.ts +0 -2
- package/dist/types/index.d.ts +0 -2
- package/dist/types/outOfTheBox/AppPicker/AppPicker.d.ts +0 -8
- package/dist/types/outOfTheBox/PopupMenu/PopupMenu.d.ts +0 -3
- package/dist/types/outOfTheBox/PopupMenu/PopupMenuContent.d.ts +0 -3
- package/dist/types/outOfTheBox/PopupMenu/styles.d.ts +0 -4
- package/dist/types/outOfTheBox/SearchToggle/SearchToggle.d.ts +0 -2
- package/dist/types/outOfTheBox/SearchToggle/styles.d.ts +0 -1
- package/dist/types/outOfTheBox/index.d.ts +0 -3
- package/dist/types/propTypes.d.ts +0 -29
- package/dist/types/styles.d.ts +0 -2
|
@@ -2,9 +2,35 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
7
21
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
22
|
+
var __objRest = (source, exclude) => {
|
|
23
|
+
var target = {};
|
|
24
|
+
for (var prop in source)
|
|
25
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
26
|
+
target[prop] = source[prop];
|
|
27
|
+
if (source != null && __getOwnPropSymbols)
|
|
28
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
29
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
30
|
+
target[prop] = source[prop];
|
|
31
|
+
}
|
|
32
|
+
return target;
|
|
33
|
+
};
|
|
8
34
|
var __export = (target, all) => {
|
|
9
35
|
for (var name in all)
|
|
10
36
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -69,13 +95,12 @@ const GlobalHeaderBreadcrumb = () => {
|
|
|
69
95
|
}, /* @__PURE__ */ import_react.default.createElement(import_styles.Pipe, {
|
|
70
96
|
showIconOnly
|
|
71
97
|
}), breadcrumb?.map((item) => {
|
|
72
|
-
const { label,
|
|
73
|
-
return /* @__PURE__ */ import_react.default.createElement(import_PureBreadcrumb.PureBreadcrumb, {
|
|
98
|
+
const _a = item, { label } = _a, rest = __objRest(_a, ["label"]);
|
|
99
|
+
return /* @__PURE__ */ import_react.default.createElement(import_PureBreadcrumb.PureBreadcrumb, __spreadValues({
|
|
74
100
|
label,
|
|
75
101
|
length: breadcrumb.length,
|
|
76
|
-
key: `${instanceUID}-breadcrumb-item-${label}
|
|
77
|
-
|
|
78
|
-
});
|
|
102
|
+
key: `${instanceUID}-breadcrumb-item-${label}`
|
|
103
|
+
}, rest));
|
|
79
104
|
}), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
80
105
|
id: "global-header-flex-region",
|
|
81
106
|
ref: flexRegion
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/Breadcrumb/GlobalHeaderBreadcrumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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": "
|
|
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,UAA2B,WAAnB,YAAmB,IAAT,iBAAS,IAAT,CAAV;AACR,WACE,mDAAC,sCAAD;AAAA,MACE;AAAA,MACA,QAAQ,WAAW;AAAA,MACnB,KAAK,GAAG,+BAA+B;AAAA,OACnC;AAAA,MAIV,mDAAC,OAAD;AAAA,IAAK,IAAG;AAAA,IAA4B,KAAK;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,9 +2,35 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
7
21
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
22
|
+
var __objRest = (source, exclude) => {
|
|
23
|
+
var target = {};
|
|
24
|
+
for (var prop in source)
|
|
25
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
26
|
+
target[prop] = source[prop];
|
|
27
|
+
if (source != null && __getOwnPropSymbols)
|
|
28
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
29
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
30
|
+
target[prop] = source[prop];
|
|
31
|
+
}
|
|
32
|
+
return target;
|
|
33
|
+
};
|
|
8
34
|
var __export = (target, all) => {
|
|
9
35
|
for (var name in all)
|
|
10
36
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -34,18 +60,20 @@ var import_react = __toESM(require("react"));
|
|
|
34
60
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
35
61
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
36
62
|
var import_styles = require("./styles");
|
|
37
|
-
const PureBreadcrumb = import_react.default.memo((
|
|
38
|
-
onClick,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
63
|
+
const PureBreadcrumb = import_react.default.memo((_a) => {
|
|
64
|
+
var _b = _a, { onClick, isSelected, length, label, hasNext, id } = _b, rest = __objRest(_b, ["onClick", "isSelected", "length", "label", "hasNext", "id"]);
|
|
65
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.BreadcrumbItem, null, /* @__PURE__ */ import_react.default.createElement(import_styles.LabelButton, __spreadValues({
|
|
66
|
+
onClick,
|
|
67
|
+
"aria-selected": isSelected,
|
|
68
|
+
"data-testid": "gh-breadcrumb-btn",
|
|
69
|
+
id
|
|
70
|
+
}, (0, import_ds_props_helpers.getDataProps)(rest)), /* @__PURE__ */ import_react.default.createElement(import_styles.Label, {
|
|
71
|
+
isSelected: !!isSelected,
|
|
72
|
+
isOnlyItem: length === 1
|
|
73
|
+
}, label)), hasNext && /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallRight, {
|
|
74
|
+
size: "m",
|
|
75
|
+
fill: "#FFF"
|
|
76
|
+
}));
|
|
77
|
+
});
|
|
50
78
|
module.exports = __toCommonJS(PureBreadcrumb_exports);
|
|
51
79
|
//# sourceMappingURL=PureBreadcrumb.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/Breadcrumb/PureBreadcrumb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAAkC;AAClC,8BAA6B;AAC7B,oBAAmD;AAG5C,MAAM,iBAAiB,qBAAM,KAAK,CAAC,OAAqE;AAArE,eAAE,WAAS,YAAY,QAAQ,OAAO,SAAS,OAA/C,IAAsD,iBAAtD,IAAsD,CAApD,WAAS,cAAY,UAAQ,SAAO,WAAS;AACvF,4DAAC,8BAAD,MACE,mDAAC,2BAAD;AAAA,IACE;AAAA,IACA,iBAAe;AAAA,IACf,eAAY;AAAA,IACZ;AAAA,KACI,0CAAa,QAEjB,mDAAC,qBAAD;AAAA,IAAO,YAAY,CAAC,CAAC;AAAA,IAAY,YAAY,WAAW;AAAA,KACrD,SAGJ,WAAW,mDAAC,mCAAD;AAAA,IAAmB,MAAK;AAAA,IAAI,MAAK;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,39 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
8
37
|
var __export = (target, all) => {
|
|
9
38
|
for (var name in all)
|
|
10
39
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -42,34 +71,32 @@ const ToolbarItems = () => {
|
|
|
42
71
|
} = (0, import_react.useContext)(import_GlobalHeaderContext.GlobalHeaderContext);
|
|
43
72
|
console.log(`toolbar`, toolbar);
|
|
44
73
|
const itemsList = (0, import_react.useMemo)(() => toolbar?.map((item) => {
|
|
45
|
-
const { Icon, type, onClick, componentProps, label, onKeyPress, id, CustomComponent,
|
|
74
|
+
const _a = item, { Icon, type, onClick, componentProps, label, onKeyPress, id, CustomComponent } = _a, otherProps = __objRest(_a, ["Icon", "type", "onClick", "componentProps", "label", "onKeyPress", "id", "CustomComponent"]);
|
|
46
75
|
switch (type) {
|
|
47
76
|
case "ds-popup-menu":
|
|
48
|
-
return /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.PopupMenu, {
|
|
77
|
+
return /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.PopupMenu, __spreadProps(__spreadValues({
|
|
49
78
|
title: label,
|
|
50
79
|
Icon,
|
|
51
80
|
onClick,
|
|
52
81
|
onKeyPress,
|
|
53
82
|
id,
|
|
54
|
-
key: `${instanceUID}-ds-popup-menu-${label}
|
|
55
|
-
|
|
83
|
+
key: `${instanceUID}-ds-popup-menu-${label}`
|
|
84
|
+
}, otherProps), {
|
|
56
85
|
componentProps
|
|
57
|
-
});
|
|
86
|
+
}));
|
|
58
87
|
case "ds-app-picker":
|
|
59
|
-
return /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.AppPicker, {
|
|
88
|
+
return /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.AppPicker, __spreadValues({
|
|
60
89
|
label,
|
|
61
90
|
key: `${instanceUID}-ds-app-picker-${label}`,
|
|
62
91
|
id,
|
|
63
|
-
componentProps
|
|
64
|
-
|
|
65
|
-
});
|
|
92
|
+
componentProps
|
|
93
|
+
}, otherProps));
|
|
66
94
|
case "ds-search-toggle":
|
|
67
|
-
return /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.SearchToggle, {
|
|
95
|
+
return /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.SearchToggle, __spreadValues({
|
|
68
96
|
key: `${instanceUID}-ds-search-toggle-${id}`,
|
|
69
97
|
id,
|
|
70
|
-
componentProps
|
|
71
|
-
|
|
72
|
-
});
|
|
98
|
+
componentProps
|
|
99
|
+
}, otherProps));
|
|
73
100
|
case "custom":
|
|
74
101
|
if (CustomComponent)
|
|
75
102
|
return /* @__PURE__ */ import_react.default.createElement(CustomComponent, {
|
|
@@ -77,14 +104,13 @@ const ToolbarItems = () => {
|
|
|
77
104
|
});
|
|
78
105
|
return null;
|
|
79
106
|
default:
|
|
80
|
-
return /* @__PURE__ */ import_react.default.createElement(import_styles.Button, {
|
|
107
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.Button, __spreadValues({
|
|
81
108
|
onClick,
|
|
82
109
|
key: `${instanceUID}-ds-toolbar-button-${label}`,
|
|
83
110
|
title: label,
|
|
84
111
|
"data-testid": "gh-toolbar-item",
|
|
85
|
-
id
|
|
86
|
-
|
|
87
|
-
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
112
|
+
id
|
|
113
|
+
}, (0, import_ds_props_helpers.getDataProps)(otherProps)), /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
88
114
|
fill: "#FFF",
|
|
89
115
|
size: "m"
|
|
90
116
|
}));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/Toolbar/ToolbarItems.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA2C;AAC3C,yBAAmD;AACnD,oBAAuB;AACvB,iCAAoC;AACpC,8BAA6B;AAEtB,MAAM,eAAe,MAAmB;AAC7C,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,6BAAW;AAEf,UAAQ,IAAI,WAAW;AACvB,QAAM,YAAY,0BAChB,MACE,SAAS,IAAI,CAAC,SAAS;AACrB,UAAuG,WAA/F,QAAM,MAAM,SAAS,gBAAgB,OAAO,YAAY,IAAI,oBAAmC,IAAf,uBAAe,IAAf,CAAhF,QAAM,QAAM,WAAS,kBAAgB,SAAO,cAAY,MAAI;AAEpE,YAAQ;AAAA,WACD;AACH,eACE,mDAAC,8BAAD;AAAA,UACE,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,KAAK,GAAG,6BAA6B;AAAA,WACjC,aAPN;AAAA,UAQE;AAAA;AAAA,WAGD;AACH,eACE,mDAAC,8BAAD;AAAA,UACE;AAAA,UACA,KAAK,GAAG,6BAA6B;AAAA,UACrC;AAAA,UACA;AAAA,WACI;AAAA,WAGL;AACH,eACE,mDAAC,iCAAD;AAAA,UACE,KAAK,GAAG,gCAAgC;AAAA,UACxC;AAAA,UACA;AAAA,WACI;AAAA,WAGL;AACH,YAAI;AAAiB,iBAAO,mDAAC,iBAAD;AAAA,YAAiB;AAAA;AAC7C,eAAO;AAAA;AAEP,eACE,mDAAC,sBAAD;AAAA,UACE;AAAA,UACA,KAAK,GAAG,iCAAiC;AAAA,UACzC,OAAO;AAAA,UACP,eAAY;AAAA,UACZ;AAAA,WACI,0CAAa,cAEjB,mDAAC,MAAD;AAAA,UAAM,MAAK;AAAA,UAAO,MAAK;AAAA;AAAA;AAAA,MAKnC,CAAC,SAAS;AAGZ,SAAO,wFAAG;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,8 +2,22 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
7
21
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
22
|
var __export = (target, all) => {
|
|
9
23
|
for (var name in all)
|
|
@@ -34,10 +48,7 @@ var import_react = require("react");
|
|
|
34
48
|
var import_defaultProps = require("../defaultProps");
|
|
35
49
|
const useGetPropsWithDefaults = (props) => {
|
|
36
50
|
const { toolbar, breadcrumb, Logo, LogoWithBrand } = props;
|
|
37
|
-
return (0, import_react.useMemo)(() => ({
|
|
38
|
-
...import_defaultProps.defaultProps,
|
|
39
|
-
...props
|
|
40
|
-
}), [toolbar, breadcrumb, Logo, LogoWithBrand]);
|
|
51
|
+
return (0, import_react.useMemo)(() => __spreadValues(__spreadValues({}, import_defaultProps.defaultProps), props), [toolbar, breadcrumb, Logo, LogoWithBrand]);
|
|
41
52
|
};
|
|
42
53
|
module.exports = __toCommonJS(useGetPropsWithDefaults_exports);
|
|
43
54
|
//# sourceMappingURL=useGetPropsWithDefaults.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useGetPropsWithDefaults.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwB;AAExB,0BAA6B;AAEtB,MAAM,0BAA0B,CAAC,UAAkD;AACxF,QAAM,EAAE,SAAS,YAAY,MAAM,kBAAkB;AAErD,SAAO,0BACL,MAAO,kCACF,mCACA,QAEL,CAAC,SAAS,YAAY,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,9 +2,35 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
7
21
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
22
|
+
var __objRest = (source, exclude) => {
|
|
23
|
+
var target = {};
|
|
24
|
+
for (var prop in source)
|
|
25
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
26
|
+
target[prop] = source[prop];
|
|
27
|
+
if (source != null && __getOwnPropSymbols)
|
|
28
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
29
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
30
|
+
target[prop] = source[prop];
|
|
31
|
+
}
|
|
32
|
+
return target;
|
|
33
|
+
};
|
|
8
34
|
var __export = (target, all) => {
|
|
9
35
|
for (var name in all)
|
|
10
36
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -36,12 +62,16 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
|
36
62
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
37
63
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
38
64
|
var import_styles = require("../../components/Toolbar/styles");
|
|
39
|
-
const AppPicker = ({
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
65
|
+
const AppPicker = (_a) => {
|
|
66
|
+
var _b = _a, {
|
|
67
|
+
label,
|
|
68
|
+
id,
|
|
69
|
+
componentProps
|
|
70
|
+
} = _b, otherProps = __objRest(_b, [
|
|
71
|
+
"label",
|
|
72
|
+
"id",
|
|
73
|
+
"componentProps"
|
|
74
|
+
]);
|
|
45
75
|
const [isOpen, setIsOpen] = (0, import_react.useState)(false);
|
|
46
76
|
const buttonRef = (0, import_react.useRef)(null);
|
|
47
77
|
const {
|
|
@@ -78,15 +108,14 @@ const AppPicker = ({
|
|
|
78
108
|
}, []);
|
|
79
109
|
const renderTrigger = (0, import_react.useMemo)(() => ({ ref }) => /* @__PURE__ */ import_react.default.createElement("div", {
|
|
80
110
|
ref
|
|
81
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_styles.Button, {
|
|
111
|
+
}, /* @__PURE__ */ import_react.default.createElement(import_styles.Button, __spreadValues({
|
|
82
112
|
onClick: triggerOnClick ?? handleOnClick,
|
|
83
113
|
onKeyDown: handleTriggerKeyDown,
|
|
84
114
|
ref: (0, import_ds_utilities.mergeRefs)(buttonRef, triggerRef),
|
|
85
115
|
title: label,
|
|
86
116
|
"data-testid": "gh-toolbar-item",
|
|
87
|
-
id
|
|
88
|
-
|
|
89
|
-
}, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MenuPicker, {
|
|
117
|
+
id
|
|
118
|
+
}, (0, import_ds_props_helpers.getDataProps)(otherProps)), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MenuPicker, {
|
|
90
119
|
fill: "#FFF",
|
|
91
120
|
width: 20.73,
|
|
92
121
|
height: 20.73
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/AppPicker/AppPicker.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport { Button } from '../../components/Toolbar/styles';\n\ntype AppPickerProps = React.ComponentProps<typeof DSAppPicker>;\n\nexport const AppPicker = ({\n label,\n id,\n componentProps,\n ...otherProps\n}: AppPickerProps & {\n label: string;\n triggerOnClick?: React.MouseEventHandler;\n}): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const {\n apps,\n icon,\n customApps,\n sectionTitle,\n customSectionTitle,\n actionRef,\n isOpen: userIsOpen,\n onKeyDown: userOnKeyDown,\n onClickOutside: userOnClickOutside,\n renderTrigger: userRenderTrigger,\n onClose,\n triggerRef,\n triggerOnClick,\n } = componentProps;\n\n const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n if (e.code === 'Enter' || e.code === 'Space') {\n setIsOpen(true);\n }\n }, []);\n\n const handleAppPickerOnKeyDown: AppPickerProps['onKeyDown'] = useCallback((e) => {\n if (e.code === 'Escape') {\n setIsOpen(false);\n buttonRef?.current?.focus();\n }\n }, []);\n\n const handleOnClickOutside: AppPickerProps['onClickOutside'] = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleOnClick: React.MouseEventHandler = useCallback(() => {\n setIsOpen(true);\n }, []);\n\n const renderTrigger: AppPickerProps['renderTrigger'] = useMemo(\n () =>\n ({ ref }) =>\n (\n <div ref={ref}>\n <Button\n onClick={triggerOnClick ?? handleOnClick}\n onKeyDown={handleTriggerKeyDown}\n ref={mergeRefs(buttonRef, triggerRef)}\n title={label}\n data-testid=\"gh-toolbar-item\"\n id={id}\n {...getDataProps(otherProps)}\n >\n <MenuPicker fill=\"#FFF\" width={20.73} height={20.73} />\n </Button>\n </div>\n ),\n [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps],\n );\n\n return (\n <DSAppPicker\n apps={apps}\n customApps={customApps}\n sectionTitle={sectionTitle}\n customSectionTitle={customSectionTitle}\n icon={icon}\n onKeyDown={userOnKeyDown ?? handleAppPickerOnKeyDown}\n actionRef={actionRef}\n onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n renderTrigger={userRenderTrigger ?? renderTrigger}\n isOpen={userIsOpen ?? isOpen}\n onClose={onClose}\n triggerRef={triggerRef}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8D;AAC9D,2BAA4B;AAC5B,0BAA0B;AAC1B,sBAA2B;AAC3B,8BAA6B;AAC7B,oBAAuB;AAIhB,MAAM,YAAY,CAAC,OAQP;AARO,eACxB;AAAA;AAAA,IACA;AAAA,IACA;AAAA,MAHwB,IAIrB,uBAJqB,IAIrB;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAMA,QAAM,CAAC,QAAQ,aAAa,2BAAkB;AAC9C,QAAM,YAAY,yBAA0B;AAE5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,uBAAmD,8BAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,SAAS;AAC5C,gBAAU;AAAA;AAAA,KAEX;AAEH,QAAM,2BAAwD,8BAAY,CAAC,MAAM;AAC/E,QAAI,EAAE,SAAS,UAAU;AACvB,gBAAU;AACV,iBAAW,SAAS;AAAA;AAAA,KAErB;AAEH,QAAM,uBAAyD,8BAAY,MAAM;AAC/E,cAAU;AAAA,KACT;AAEH,QAAM,gBAAyC,8BAAY,MAAM;AAC/D,cAAU;AAAA,KACT;AAEH,QAAM,gBAAiD,0BACrD,MACE,CAAC,EAAE,UAEC,mDAAC,OAAD;AAAA,IAAK;AAAA,KACH,mDAAC,sBAAD;AAAA,IACE,SAAS,kBAAkB;AAAA,IAC3B,WAAW;AAAA,IACX,KAAK,mCAAU,WAAW;AAAA,IAC1B,OAAO;AAAA,IACP,eAAY;AAAA,IACZ;AAAA,KACI,0CAAa,cAEjB,mDAAC,4BAAD;AAAA,IAAY,MAAK;AAAA,IAAO,OAAO;AAAA,IAAO,QAAQ;AAAA,QAIxD,CAAC,gBAAgB,eAAe,sBAAsB,YAAY,OAAO,IAAI;AAG/E,SACE,mDAAC,kCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B;AAAA,IACA,gBAAgB,sBAAsB;AAAA,IACtC,eAAe,qBAAqB;AAAA,IACpC,QAAQ,cAAc;AAAA,IACtB;AAAA,IACA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,9 +2,35 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
7
21
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
22
|
+
var __objRest = (source, exclude) => {
|
|
23
|
+
var target = {};
|
|
24
|
+
for (var prop in source)
|
|
25
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
26
|
+
target[prop] = source[prop];
|
|
27
|
+
if (source != null && __getOwnPropSymbols)
|
|
28
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
29
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
30
|
+
target[prop] = source[prop];
|
|
31
|
+
}
|
|
32
|
+
return target;
|
|
33
|
+
};
|
|
8
34
|
var __export = (target, all) => {
|
|
9
35
|
for (var name in all)
|
|
10
36
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -35,7 +61,8 @@ var import_ds_popperjs = require("@elliemae/ds-popperjs");
|
|
|
35
61
|
var import_PopupMenuContent = require("./PopupMenuContent");
|
|
36
62
|
var import_styles = require("../../components/Toolbar/styles");
|
|
37
63
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
38
|
-
const PopupMenu = (
|
|
64
|
+
const PopupMenu = (_a) => {
|
|
65
|
+
var _b = _a, { Icon, title, onClick, id, componentProps } = _b, otherProps = __objRest(_b, ["Icon", "title", "onClick", "id", "componentProps"]);
|
|
39
66
|
const [isOpen, setIsOpen] = (0, import_react.useState)(false);
|
|
40
67
|
const [buttonRef, setButtonRef] = (0, import_react.useState)(null);
|
|
41
68
|
const {
|
|
@@ -74,15 +101,14 @@ const PopupMenu = ({ Icon, title, onClick, id, componentProps, ...otherProps })
|
|
|
74
101
|
onClose: handleOnClose,
|
|
75
102
|
popupOnKeyPress
|
|
76
103
|
}), [options, handleItemClick, handleOnClose, popupOnKeyPress]);
|
|
77
|
-
return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_styles.Button, {
|
|
104
|
+
return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_styles.Button, __spreadValues({
|
|
78
105
|
onClick: handleTriggerOnClick,
|
|
79
106
|
onKeyPress: handleKeyPress,
|
|
80
107
|
title,
|
|
81
108
|
ref: setButtonRef,
|
|
82
109
|
"data-testid": "gh-toolbar-item",
|
|
83
|
-
id
|
|
84
|
-
|
|
85
|
-
}, Icon && /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
110
|
+
id
|
|
111
|
+
}, (0, import_ds_props_helpers.getDataProps)(otherProps)), Icon && /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
86
112
|
fill: "#FFF",
|
|
87
113
|
size: "m"
|
|
88
114
|
})), /* @__PURE__ */ import_react.default.createElement(import_ds_popperjs.DSPopperJS, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/PopupMenu/PopupMenu.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useState, useCallback, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './PopupMenuContent';\nimport { Button } from '../../components/Toolbar/styles';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport type { PopupPropsT as Props } from '../../GlobalHeaderTypes';\n\nexport const PopupMenu = ({ Icon, title, onClick, id, componentProps, ...otherProps }: Props): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n\n const {\n onClickOutside = () => null,\n onKeyPress,\n popupOnKeyPress,\n isOpen: userIsOpen,\n options,\n closeOnClick,\n } = componentProps;\n\n const handleKeyPress = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'Enter' || e.code === 'Space') {\n setIsOpen(true);\n }\n if (onKeyPress) onKeyPress(e);\n },\n [onKeyPress],\n );\n\n const handleOnClose = useCallback(() => {\n if (userIsOpen === undefined) {\n setIsOpen(false);\n }\n buttonRef?.focus();\n }, [buttonRef, userIsOpen]);\n\n const handleTriggerOnClick = useCallback(\n (e) => {\n if (userIsOpen === undefined) setIsOpen(true);\n onClick(e);\n },\n [onClick, userIsOpen],\n );\n\n const handleItemClick = useCallback(() => {\n if (closeOnClick && userIsOpen === undefined) handleOnClose();\n }, [closeOnClick, handleOnClose, userIsOpen]);\n\n const content = useMemo(\n () => (\n <PopupMenuContent\n options={options}\n onItemClick={handleItemClick}\n onClose={handleOnClose}\n popupOnKeyPress={popupOnKeyPress}\n />\n ),\n [options, handleItemClick, handleOnClose, popupOnKeyPress],\n );\n\n return (\n <div>\n <Button\n onClick={handleTriggerOnClick}\n onKeyPress={handleKeyPress}\n title={title}\n ref={setButtonRef}\n data-testid=\"gh-toolbar-item\"\n id={id}\n {...getDataProps(otherProps)}\n >\n {Icon && <Icon fill=\"#FFF\" size=\"m\" />}\n </Button>\n <DSPopperJS\n referenceElement={buttonRef}\n showPopover={userIsOpen ?? isOpen}\n closeContextMenu={handleOnClose}\n onClickOutside={onClickOutside}\n >\n {content}\n </DSPopperJS>\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsD;AACtD,yBAA2B;AAC3B,8BAAiC;AACjC,oBAAuB;AACvB,8BAA6B;AAGtB,MAAM,YAAY,CAAC,OAAoF;AAApF,eAAE,QAAM,OAAO,SAAS,IAAI,mBAA5B,IAA+C,uBAA/C,IAA+C,CAA7C,QAAM,SAAO,WAAS,MAAI;AACpD,QAAM,CAAC,QAAQ,aAAa,2BAAkB;AAC9C,QAAM,CAAC,WAAW,gBAAgB,2BAAmC;AAErE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,iBAAiB,8BACrB,CAAC,MAA2B;AAC1B,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,SAAS;AAC5C,gBAAU;AAAA;AAEZ,QAAI;AAAY,iBAAW;AAAA,KAE7B,CAAC;AAGH,QAAM,gBAAgB,8BAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU;AAAA;AAEZ,eAAW;AAAA,KACV,CAAC,WAAW;AAEf,QAAM,uBAAuB,8BAC3B,CAAC,MAAM;AACL,QAAI,eAAe;AAAW,gBAAU;AACxC,YAAQ;AAAA,KAEV,CAAC,SAAS;AAGZ,QAAM,kBAAkB,8BAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW;AAAA,KAC7C,CAAC,cAAc,eAAe;AAEjC,QAAM,UAAU,0BACd,MACE,mDAAC,0CAAD;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,MAGJ,CAAC,SAAS,iBAAiB,eAAe;AAG5C,SACE,mDAAC,OAAD,MACE,mDAAC,sBAAD;AAAA,IACE,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA,KAAK;AAAA,IACL,eAAY;AAAA,IACZ;AAAA,KACI,0CAAa,cAEhB,QAAQ,mDAAC,MAAD;AAAA,IAAM,MAAK;AAAA,IAAO,MAAK;AAAA,OAElC,mDAAC,+BAAD;AAAA,IACE,kBAAkB;AAAA,IAClB,aAAa,cAAc;AAAA,IAC3B,kBAAkB;AAAA,IAClB;AAAA,KAEC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,8 +2,22 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
7
21
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
22
|
var __export = (target, all) => {
|
|
9
23
|
for (var name in all)
|
|
@@ -42,10 +56,7 @@ const PopupMenuContent = import_react.default.memo(({ options, onItemClick, onCl
|
|
|
42
56
|
}, []);
|
|
43
57
|
const content = (0, import_react.useMemo)(() => options.map((option) => {
|
|
44
58
|
const { type, Icon, label = "", onClick, Content, id } = option;
|
|
45
|
-
const ariaAndDataProps = {
|
|
46
|
-
...(0, import_ds_props_helpers.getAriaProps)(option),
|
|
47
|
-
...(0, import_ds_props_helpers.getDataProps)(option)
|
|
48
|
-
};
|
|
59
|
+
const ariaAndDataProps = __spreadValues(__spreadValues({}, (0, import_ds_props_helpers.getAriaProps)(option)), (0, import_ds_props_helpers.getDataProps)(option));
|
|
49
60
|
const handleClick = (e) => {
|
|
50
61
|
onItemClick(e);
|
|
51
62
|
if (onClick)
|
|
@@ -59,26 +70,23 @@ const PopupMenuContent = import_react.default.memo(({ options, onItemClick, onCl
|
|
|
59
70
|
};
|
|
60
71
|
switch (type) {
|
|
61
72
|
case "separator":
|
|
62
|
-
return /* @__PURE__ */ import_react.default.createElement(import_styles.Separator, {
|
|
63
|
-
key: `${instanceUID}-separator-${label}
|
|
64
|
-
|
|
65
|
-
});
|
|
73
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.Separator, __spreadValues({
|
|
74
|
+
key: `${instanceUID}-separator-${label}`
|
|
75
|
+
}, ariaAndDataProps));
|
|
66
76
|
case "custom":
|
|
67
|
-
return /* @__PURE__ */ import_react.default.createElement(import_styles.ItemWrapper, {
|
|
77
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.ItemWrapper, __spreadValues({
|
|
68
78
|
onClick: handleClick,
|
|
69
79
|
onKeyDown: handleKeyDown,
|
|
70
80
|
key: `${instanceUID}-popup-${label}`,
|
|
71
|
-
id
|
|
72
|
-
|
|
73
|
-
}, Content && /* @__PURE__ */ import_react.default.createElement(Content, null));
|
|
81
|
+
id
|
|
82
|
+
}, ariaAndDataProps), Content && /* @__PURE__ */ import_react.default.createElement(Content, null));
|
|
74
83
|
default:
|
|
75
|
-
return /* @__PURE__ */ import_react.default.createElement(import_styles.ItemWrapper, {
|
|
84
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.ItemWrapper, __spreadValues({
|
|
76
85
|
onClick: handleClick,
|
|
77
86
|
onKeyDown: handleKeyDown,
|
|
78
87
|
key: `${instanceUID}-popup-${label}`,
|
|
79
|
-
id
|
|
80
|
-
|
|
81
|
-
}, Icon && /* @__PURE__ */ import_react.default.createElement(Icon, null), import_styles.Label && /* @__PURE__ */ import_react.default.createElement(import_styles.Label, null, label));
|
|
88
|
+
id
|
|
89
|
+
}, ariaAndDataProps), Icon && /* @__PURE__ */ import_react.default.createElement(Icon, null), import_styles.Label && /* @__PURE__ */ import_react.default.createElement(import_styles.Label, null, label));
|
|
82
90
|
}
|
|
83
91
|
}), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
|
|
84
92
|
return /* @__PURE__ */ import_react.default.createElement(import_styles.List, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/outOfTheBox/PopupMenu/PopupMenuContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useRef, useEffect, useMemo, useContext } from 'react';\nimport { getAriaProps, getDataProps } from '@elliemae/ds-props-helpers';\nimport { Separator, ItemWrapper, Label, List } from './styles';\nimport type { PopupMenuContentPropsT as Props } from '../../GlobalHeaderTypes';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const PopupMenuContent = React.memo(({ options, onItemClick, onClose, popupOnKeyPress }: Props): JSX.Element => {\n const { instanceUID } = useContext(GlobalHeaderContext);\n\n const menuRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n (menuRef.current?.firstChild as HTMLButtonElement)?.focus();\n }, []);\n\n const content = useMemo(\n () =>\n options.map((option) => {\n const { type, Icon, label = '', onClick, Content, id } = option;\n\n const ariaAndDataProps = {\n ...getAriaProps(option),\n ...getDataProps(option),\n };\n\n const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {\n onItemClick(e);\n if (onClick) onClick(e);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.code === 'Escape') onClose();\n if (popupOnKeyPress) popupOnKeyPress(e);\n };\n\n switch (type) {\n case 'separator':\n return <Separator key={`${instanceUID}-separator-${label}`} {...ariaAndDataProps} />;\n case 'custom':\n return (\n <ItemWrapper\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n key={`${instanceUID}-popup-${label}`}\n id={id}\n {...ariaAndDataProps}\n >\n {Content && <Content />}\n </ItemWrapper>\n );\n default:\n return (\n <ItemWrapper\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n key={`${instanceUID}-popup-${label}`}\n id={id}\n {...ariaAndDataProps}\n >\n {Icon && <Icon />}\n {Label && <Label>{label}</Label>}\n </ItemWrapper>\n );\n }\n }),\n [options, onItemClick, onClose, popupOnKeyPress, instanceUID],\n );\n return <List ref={menuRef}>{content}</List>;\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8D;AAC9D,8BAA2C;AAC3C,oBAAoD;AAEpD,iCAAoC;AAE7B,MAAM,mBAAmB,qBAAM,KAAK,CAAC,EAAE,SAAS,aAAa,SAAS,sBAA0C;AACrH,QAAM,EAAE,gBAAgB,6BAAW;AAEnC,QAAM,UAAU,yBAAuB;AAEvC,8BAAU,MAAM;AACd,IAAC,QAAQ,SAAS,YAAkC;AAAA,KACnD;AAEH,QAAM,UAAU,0BACd,MACE,QAAQ,IAAI,CAAC,WAAW;AACtB,UAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,OAAO;AAEzD,UAAM,mBAAmB,kCACpB,0CAAa,UACb,0CAAa;AAGlB,UAAM,cAAc,CAAC,MAAiD;AACpE,kBAAY;AACZ,UAAI;AAAS,gBAAQ;AAAA;AAGvB,UAAM,gBAAgB,CAAC,MAA2B;AAChD,UAAI,EAAE,SAAS;AAAU;AACzB,UAAI;AAAiB,wBAAgB;AAAA;AAGvC,YAAQ;AAAA,WACD;AACH,eAAO,mDAAC,yBAAD;AAAA,UAAW,KAAK,GAAG,yBAAyB;AAAA,WAAa;AAAA,WAC7D;AACH,eACE,mDAAC,2BAAD;AAAA,UACE,SAAS;AAAA,UACT,WAAW;AAAA,UACX,KAAK,GAAG,qBAAqB;AAAA,UAC7B;AAAA,WACI,mBAEH,WAAW,mDAAC,SAAD;AAAA;AAIhB,eACE,mDAAC,2BAAD;AAAA,UACE,SAAS;AAAA,UACT,WAAW;AAAA,UACX,KAAK,GAAG,qBAAqB;AAAA,UAC7B;AAAA,WACI,mBAEH,QAAQ,mDAAC,MAAD,OACR,uBAAS,mDAAC,qBAAD,MAAQ;AAAA;AAAA,MAK9B,CAAC,SAAS,aAAa,SAAS,iBAAiB;AAEnD,SAAO,mDAAC,oBAAD;AAAA,IAAM,KAAK;AAAA,KAAU;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|