@elliemae/ds-global-header 1.53.4-rc.0 → 1.53.4-rc.5
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/components/Toolbar/ToolbarItems.js +6 -2
- package/cjs/components/Toolbar/ToolbarItems.js.map +1 -1
- package/cjs/outOfTheBox/AppPicker/AppPicker.js +25 -10
- package/cjs/outOfTheBox/AppPicker/AppPicker.js.map +1 -1
- package/esm/components/Toolbar/ToolbarItems.js +6 -2
- package/esm/components/Toolbar/ToolbarItems.js.map +1 -1
- package/esm/outOfTheBox/AppPicker/AppPicker.js +25 -10
- package/esm/outOfTheBox/AppPicker/AppPicker.js.map +1 -1
- package/package.json +7 -7
|
@@ -53,7 +53,9 @@ var ToolbarItems = function ToolbarItems() {
|
|
|
53
53
|
apps = _ref2.apps,
|
|
54
54
|
customApps = _ref2.customApps,
|
|
55
55
|
sectionTitle = _ref2.sectionTitle,
|
|
56
|
-
customSectionTitle = _ref2.customSectionTitle
|
|
56
|
+
customSectionTitle = _ref2.customSectionTitle,
|
|
57
|
+
actionRef = _ref2.actionRef,
|
|
58
|
+
onKeyDown = _ref2.onKeyDown;
|
|
57
59
|
return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_AppPicker_AppPicker.AppPicker, {
|
|
58
60
|
onClick: onClick,
|
|
59
61
|
label: label,
|
|
@@ -61,7 +63,9 @@ var ToolbarItems = function ToolbarItems() {
|
|
|
61
63
|
customApps: customApps,
|
|
62
64
|
sectionTitle: sectionTitle,
|
|
63
65
|
customSectionTitle: customSectionTitle,
|
|
64
|
-
|
|
66
|
+
actionRef: actionRef,
|
|
67
|
+
key: "".concat(instanceUID, "-ds-app-picker-").concat(label),
|
|
68
|
+
onKeyDown: onKeyDown
|
|
65
69
|
});
|
|
66
70
|
|
|
67
71
|
default:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarItems.js","sources":["../../../../src/components/Toolbar/ToolbarItems.tsx"],"sourcesContent":["/* eslint-disable no-case-declarations */\nimport React, { useContext, useMemo } from 'react';\nimport { AppPicker, PopupMenu } from '../../outOfTheBox';\nimport { Button } from './styles';\nimport type { AppPickerPropsT, PopupPropsT } from '../../index.d';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const ToolbarItems = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n } = useContext(GlobalHeaderContext);\n\n const itemsList = useMemo(\n () =>\n toolbar.map((item) => {\n const { Icon, type, onClick, componentProps, label } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n const { options, closeOnClick } = componentProps as PopupPropsT;\n return (\n <PopupMenu\n onClick={onClick}\n title={label}\n Icon={Icon}\n options={options}\n closeOnClick={closeOnClick}\n key={`${instanceUID}-ds-popup-menu-${label}`}\n />\n );\n case 'ds-app-picker':\n const { apps, customApps, sectionTitle, customSectionTitle }
|
|
1
|
+
{"version":3,"file":"ToolbarItems.js","sources":["../../../../src/components/Toolbar/ToolbarItems.tsx"],"sourcesContent":["/* eslint-disable no-case-declarations */\nimport React, { useContext, useMemo } from 'react';\nimport { AppPicker, PopupMenu } from '../../outOfTheBox';\nimport { Button } from './styles';\nimport type { AppPickerPropsT, PopupPropsT } from '../../index.d';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const ToolbarItems = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n } = useContext(GlobalHeaderContext);\n\n const itemsList = useMemo(\n () =>\n toolbar.map((item) => {\n const { Icon, type, onClick, componentProps, label } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n const { options, closeOnClick } = componentProps as PopupPropsT;\n return (\n <PopupMenu\n onClick={onClick}\n title={label}\n Icon={Icon}\n options={options}\n closeOnClick={closeOnClick}\n key={`${instanceUID}-ds-popup-menu-${label}`}\n />\n );\n case 'ds-app-picker':\n const { apps, customApps, sectionTitle, customSectionTitle, actionRef, onKeyDown } =\n componentProps as AppPickerPropsT;\n return (\n <AppPicker\n onClick={onClick}\n label={label}\n apps={apps}\n customApps={customApps}\n sectionTitle={sectionTitle}\n customSectionTitle={customSectionTitle}\n actionRef={actionRef}\n key={`${instanceUID}-ds-app-picker-${label}`}\n onKeyDown={onKeyDown}\n />\n );\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 >\n <Icon fill=\"#FFF\" size=\"m\" />\n </Button>\n );\n }\n }),\n [toolbar, instanceUID],\n );\n\n return <>{itemsList}</>;\n};\n"],"names":["ToolbarItems","useContext","GlobalHeaderContext","toolbar","props","instanceUID","itemsList","useMemo","map","item","Icon","type","onClick","componentProps","label","options","closeOnClick","React","PopupMenu","apps","customApps","sectionTitle","customSectionTitle","actionRef","onKeyDown","AppPicker","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;IAOaA,YAAY,GAAG,SAAfA,YAAe,GAAmB;AAC7C,oBAGIC,gBAAU,CAACC,uCAAD,CAHd;AAAA,MACWC,OADX,eACEC,KADF,CACWD,OADX;AAAA,MAEEE,WAFF,eAEEA,WAFF;;AAKA,MAAMC,SAAS,GAAGC,aAAO,CACvB;AAAA,WACEJ,OAAO,CAACK,GAAR,CAAY,UAACC,IAAD,EAAU;AACpB,UAAQC,IAAR,GAAuDD,IAAvD,CAAQC,IAAR;AAAA,UAAcC,IAAd,GAAuDF,IAAvD,CAAcE,IAAd;AAAA,UAAoBC,OAApB,GAAuDH,IAAvD,CAAoBG,OAApB;AAAA,UAA6BC,cAA7B,GAAuDJ,IAAvD,CAA6BI,cAA7B;AAAA,UAA6CC,KAA7C,GAAuDL,IAAvD,CAA6CK,KAA7C;;AAEA,cAAQH,IAAR;AACE,aAAK,eAAL;AACE,qBAAkCE,cAAlC;AAAA,cAAQE,OAAR,QAAQA,OAAR;AAAA,cAAiBC,YAAjB,QAAiBA,YAAjB;AACA,8BACEC,wCAACC,yCAAD;AACE,YAAA,OAAO,EAAEN,OADX;AAEE,YAAA,KAAK,EAAEE,KAFT;AAGE,YAAA,IAAI,EAAEJ,IAHR;AAIE,YAAA,OAAO,EAAEK,OAJX;AAKE,YAAA,YAAY,EAAEC,YALhB;AAME,YAAA,GAAG,YAAKX,WAAL,4BAAkCS,KAAlC;AANL,YADF;;AAUF,aAAK,eAAL;AACE,sBACED,cADF;AAAA,cAAQM,IAAR,SAAQA,IAAR;AAAA,cAAcC,UAAd,SAAcA,UAAd;AAAA,cAA0BC,YAA1B,SAA0BA,YAA1B;AAAA,cAAwCC,kBAAxC,SAAwCA,kBAAxC;AAAA,cAA4DC,SAA5D,SAA4DA,SAA5D;AAAA,cAAuEC,SAAvE,SAAuEA,SAAvE;AAEA,8BACEP,wCAACQ,yCAAD;AACE,YAAA,OAAO,EAAEb,OADX;AAEE,YAAA,KAAK,EAAEE,KAFT;AAGE,YAAA,IAAI,EAAEK,IAHR;AAIE,YAAA,UAAU,EAAEC,UAJd;AAKE,YAAA,YAAY,EAAEC,YALhB;AAME,YAAA,kBAAkB,EAAEC,kBANtB;AAOE,YAAA,SAAS,EAAEC,SAPb;AAQE,YAAA,GAAG,YAAKlB,WAAL,4BAAkCS,KAAlC,CARL;AASE,YAAA,SAAS,EAAEU;AATb,YADF;;AAaF;AACE,8BACEP,wCAACS,gCAAD;AACE,YAAA,OAAO,EAAEd,OADX;AAEE,YAAA,GAAG,YAAKP,WAAL,gCAAsCS,KAAtC,CAFL;AAGE,YAAA,KAAK,EAAEA,KAHT;AAIE,2BAAY;AAJd,0BAMEG,wCAAC,IAAD;AAAM,YAAA,IAAI,EAAC,MAAX;AAAkB,YAAA,IAAI,EAAC;AAAvB,YANF,CADF;AA9BJ;AAyCD,KA5CD,CADF;AAAA,GADuB,EA+CvB,CAACd,OAAD,EAAUE,WAAV,CA/CuB,CAAzB;AAkDA,sBAAOY,kFAAGX,SAAH,CAAP;AACD;;;;"}
|
|
@@ -21,7 +21,15 @@ var AppPicker = function AppPicker(_ref) {
|
|
|
21
21
|
customApps = _ref.customApps,
|
|
22
22
|
sectionTitle = _ref.sectionTitle,
|
|
23
23
|
customSectionTitle = _ref.customSectionTitle,
|
|
24
|
-
onClick = _ref.onClick
|
|
24
|
+
_ref$onClick = _ref.onClick,
|
|
25
|
+
onClick = _ref$onClick === void 0 ? function () {
|
|
26
|
+
return null;
|
|
27
|
+
} : _ref$onClick,
|
|
28
|
+
actionRef = _ref.actionRef,
|
|
29
|
+
_ref$onKeyDown = _ref.onKeyDown,
|
|
30
|
+
customHandleOnKeyDown = _ref$onKeyDown === void 0 ? function () {
|
|
31
|
+
return null;
|
|
32
|
+
} : _ref$onKeyDown;
|
|
25
33
|
|
|
26
34
|
var _useState = React.useState(false),
|
|
27
35
|
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
@@ -29,16 +37,20 @@ var AppPicker = function AppPicker(_ref) {
|
|
|
29
37
|
setIsOpen = _useState2[1];
|
|
30
38
|
|
|
31
39
|
var buttonRef = React.useRef();
|
|
32
|
-
var
|
|
40
|
+
var handleTriggerKeyDown = React.useCallback(function (e) {
|
|
33
41
|
if (e.code === 'Enter' || e.code === 'Space') {
|
|
34
42
|
setIsOpen(true);
|
|
35
43
|
}
|
|
36
44
|
}, []);
|
|
37
|
-
var
|
|
38
|
-
|
|
45
|
+
var handleAppPickerOnKeyDown = React.useCallback(function (e) {
|
|
46
|
+
customHandleOnKeyDown(e);
|
|
39
47
|
|
|
48
|
+
if (e.code === 'Escape') {
|
|
49
|
+
setIsOpen(false);
|
|
50
|
+
}
|
|
51
|
+
}, [customHandleOnKeyDown]);
|
|
52
|
+
var handleOnClickOutside = React.useCallback(function () {
|
|
40
53
|
setIsOpen(false);
|
|
41
|
-
(_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
|
|
42
54
|
}, []);
|
|
43
55
|
var handleOnClick = React.useCallback(function (e) {
|
|
44
56
|
setIsOpen(true);
|
|
@@ -51,7 +63,7 @@ var AppPicker = function AppPicker(_ref) {
|
|
|
51
63
|
ref: ref
|
|
52
64
|
}, /*#__PURE__*/React__default['default'].createElement(components_Toolbar_styles.Button, {
|
|
53
65
|
onClick: handleOnClick,
|
|
54
|
-
onKeyDown:
|
|
66
|
+
onKeyDown: handleTriggerKeyDown,
|
|
55
67
|
ref: buttonRef,
|
|
56
68
|
title: label,
|
|
57
69
|
"data-testid": "gh-toolbar-item"
|
|
@@ -60,7 +72,7 @@ var AppPicker = function AppPicker(_ref) {
|
|
|
60
72
|
size: "m"
|
|
61
73
|
})));
|
|
62
74
|
};
|
|
63
|
-
}, [
|
|
75
|
+
}, [handleOnClick, handleTriggerKeyDown, label]);
|
|
64
76
|
return React.useMemo(function () {
|
|
65
77
|
return /*#__PURE__*/React__default['default'].createElement(dsAppPicker.DSAppPicker, {
|
|
66
78
|
isOpen: isOpen,
|
|
@@ -68,10 +80,13 @@ var AppPicker = function AppPicker(_ref) {
|
|
|
68
80
|
customApps: customApps,
|
|
69
81
|
sectionTitle: sectionTitle,
|
|
70
82
|
customSectionTitle: customSectionTitle,
|
|
71
|
-
|
|
72
|
-
renderTrigger: trigger
|
|
83
|
+
onClickOutside: handleOnClickOutside,
|
|
84
|
+
renderTrigger: trigger,
|
|
85
|
+
triggerRef: buttonRef,
|
|
86
|
+
actionRef: actionRef,
|
|
87
|
+
onKeyDown: handleAppPickerOnKeyDown
|
|
73
88
|
});
|
|
74
|
-
}, [apps, customApps, customSectionTitle,
|
|
89
|
+
}, [actionRef, apps, customApps, customSectionTitle, handleAppPickerOnKeyDown, handleOnClickOutside, isOpen, sectionTitle, trigger]);
|
|
75
90
|
};
|
|
76
91
|
|
|
77
92
|
exports.AppPicker = AppPicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppPicker.js","sources":["../../../../src/outOfTheBox/AppPicker/AppPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport MenuPicker from '@elliemae/ds-icons/MenuPicker';\nimport type { AppPickerPropsT as Props } from '../../index.d';\nimport { Button } from '../../components/Toolbar/styles';\n\nexport const AppPicker = ({\n label,\n apps,\n customApps,\n sectionTitle,\n customSectionTitle,\n onClick,\n}: Props): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const buttonRef = useRef<HTMLButtonElement>();\n\n const
|
|
1
|
+
{"version":3,"file":"AppPicker.js","sources":["../../../../src/outOfTheBox/AppPicker/AppPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport MenuPicker from '@elliemae/ds-icons/MenuPicker';\nimport type { AppPickerPropsT as Props } from '../../index.d';\nimport { Button } from '../../components/Toolbar/styles';\n\nexport const AppPicker = ({\n label,\n apps,\n customApps,\n sectionTitle,\n customSectionTitle,\n onClick = () => null,\n actionRef,\n onKeyDown: customHandleOnKeyDown = () => null,\n}: Props): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const buttonRef = useRef<HTMLButtonElement>();\n\n const handleTriggerKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Enter' || e.code === 'Space') {\n setIsOpen(true);\n }\n }, []);\n\n const handleAppPickerOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n customHandleOnKeyDown(e);\n if (e.code === 'Escape') {\n setIsOpen(false);\n }\n },\n [customHandleOnKeyDown],\n );\n\n const handleOnClickOutside = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleOnClick = useCallback(\n (e) => {\n setIsOpen(true);\n onClick(e);\n },\n [onClick],\n );\n\n const trigger = useMemo(\n () =>\n ({ ref }: { ref: React.MutableRefObject<HTMLDivElement> }) =>\n (\n <div ref={ref}>\n <Button\n onClick={handleOnClick}\n onKeyDown={handleTriggerKeyDown}\n ref={buttonRef}\n title={label}\n data-testid=\"gh-toolbar-item\"\n >\n <MenuPicker fill=\"#FFF\" size=\"m\" />\n </Button>\n </div>\n ),\n [handleOnClick, handleTriggerKeyDown, label],\n );\n\n return useMemo(\n () => (\n <DSAppPicker\n isOpen={isOpen}\n apps={apps}\n customApps={customApps}\n sectionTitle={sectionTitle}\n customSectionTitle={customSectionTitle}\n onClickOutside={handleOnClickOutside}\n renderTrigger={trigger}\n triggerRef={buttonRef}\n actionRef={actionRef}\n onKeyDown={handleAppPickerOnKeyDown}\n />\n ),\n [\n actionRef,\n apps,\n customApps,\n customSectionTitle,\n handleAppPickerOnKeyDown,\n handleOnClickOutside,\n isOpen,\n sectionTitle,\n trigger,\n ],\n );\n};\n"],"names":["AppPicker","label","apps","customApps","sectionTitle","customSectionTitle","onClick","actionRef","onKeyDown","customHandleOnKeyDown","useState","isOpen","setIsOpen","buttonRef","useRef","handleTriggerKeyDown","useCallback","e","code","handleAppPickerOnKeyDown","handleOnClickOutside","handleOnClick","trigger","useMemo","ref","React","Button","MenuPicker","DSAppPicker"],"mappings":"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"}
|
|
@@ -45,7 +45,9 @@ var ToolbarItems = function ToolbarItems() {
|
|
|
45
45
|
apps = _ref2.apps,
|
|
46
46
|
customApps = _ref2.customApps,
|
|
47
47
|
sectionTitle = _ref2.sectionTitle,
|
|
48
|
-
customSectionTitle = _ref2.customSectionTitle
|
|
48
|
+
customSectionTitle = _ref2.customSectionTitle,
|
|
49
|
+
actionRef = _ref2.actionRef,
|
|
50
|
+
onKeyDown = _ref2.onKeyDown;
|
|
49
51
|
return /*#__PURE__*/React.createElement(AppPicker, {
|
|
50
52
|
onClick: onClick,
|
|
51
53
|
label: label,
|
|
@@ -53,7 +55,9 @@ var ToolbarItems = function ToolbarItems() {
|
|
|
53
55
|
customApps: customApps,
|
|
54
56
|
sectionTitle: sectionTitle,
|
|
55
57
|
customSectionTitle: customSectionTitle,
|
|
56
|
-
|
|
58
|
+
actionRef: actionRef,
|
|
59
|
+
key: "".concat(instanceUID, "-ds-app-picker-").concat(label),
|
|
60
|
+
onKeyDown: onKeyDown
|
|
57
61
|
});
|
|
58
62
|
|
|
59
63
|
default:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarItems.js","sources":["../../../../src/components/Toolbar/ToolbarItems.tsx"],"sourcesContent":["/* eslint-disable no-case-declarations */\nimport React, { useContext, useMemo } from 'react';\nimport { AppPicker, PopupMenu } from '../../outOfTheBox';\nimport { Button } from './styles';\nimport type { AppPickerPropsT, PopupPropsT } from '../../index.d';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const ToolbarItems = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n } = useContext(GlobalHeaderContext);\n\n const itemsList = useMemo(\n () =>\n toolbar.map((item) => {\n const { Icon, type, onClick, componentProps, label } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n const { options, closeOnClick } = componentProps as PopupPropsT;\n return (\n <PopupMenu\n onClick={onClick}\n title={label}\n Icon={Icon}\n options={options}\n closeOnClick={closeOnClick}\n key={`${instanceUID}-ds-popup-menu-${label}`}\n />\n );\n case 'ds-app-picker':\n const { apps, customApps, sectionTitle, customSectionTitle }
|
|
1
|
+
{"version":3,"file":"ToolbarItems.js","sources":["../../../../src/components/Toolbar/ToolbarItems.tsx"],"sourcesContent":["/* eslint-disable no-case-declarations */\nimport React, { useContext, useMemo } from 'react';\nimport { AppPicker, PopupMenu } from '../../outOfTheBox';\nimport { Button } from './styles';\nimport type { AppPickerPropsT, PopupPropsT } from '../../index.d';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const ToolbarItems = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n } = useContext(GlobalHeaderContext);\n\n const itemsList = useMemo(\n () =>\n toolbar.map((item) => {\n const { Icon, type, onClick, componentProps, label } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n const { options, closeOnClick } = componentProps as PopupPropsT;\n return (\n <PopupMenu\n onClick={onClick}\n title={label}\n Icon={Icon}\n options={options}\n closeOnClick={closeOnClick}\n key={`${instanceUID}-ds-popup-menu-${label}`}\n />\n );\n case 'ds-app-picker':\n const { apps, customApps, sectionTitle, customSectionTitle, actionRef, onKeyDown } =\n componentProps as AppPickerPropsT;\n return (\n <AppPicker\n onClick={onClick}\n label={label}\n apps={apps}\n customApps={customApps}\n sectionTitle={sectionTitle}\n customSectionTitle={customSectionTitle}\n actionRef={actionRef}\n key={`${instanceUID}-ds-app-picker-${label}`}\n onKeyDown={onKeyDown}\n />\n );\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 >\n <Icon fill=\"#FFF\" size=\"m\" />\n </Button>\n );\n }\n }),\n [toolbar, instanceUID],\n );\n\n return <>{itemsList}</>;\n};\n"],"names":["ToolbarItems","useContext","GlobalHeaderContext","toolbar","props","instanceUID","itemsList","useMemo","map","item","Icon","type","onClick","componentProps","label","options","closeOnClick","apps","customApps","sectionTitle","customSectionTitle","actionRef","onKeyDown"],"mappings":";;;;;;;;;;;;;;AAAA;IAOaA,YAAY,GAAG,SAAfA,YAAe,GAAmB;AAC7C,oBAGIC,UAAU,CAACC,mBAAD,CAHd;AAAA,MACWC,OADX,eACEC,KADF,CACWD,OADX;AAAA,MAEEE,WAFF,eAEEA,WAFF;;AAKA,MAAMC,SAAS,GAAGC,OAAO,CACvB;AAAA,WACEJ,OAAO,CAACK,GAAR,CAAY,UAACC,IAAD,EAAU;AACpB,UAAQC,IAAR,GAAuDD,IAAvD,CAAQC,IAAR;AAAA,UAAcC,IAAd,GAAuDF,IAAvD,CAAcE,IAAd;AAAA,UAAoBC,OAApB,GAAuDH,IAAvD,CAAoBG,OAApB;AAAA,UAA6BC,cAA7B,GAAuDJ,IAAvD,CAA6BI,cAA7B;AAAA,UAA6CC,KAA7C,GAAuDL,IAAvD,CAA6CK,KAA7C;;AAEA,cAAQH,IAAR;AACE,aAAK,eAAL;AACE,qBAAkCE,cAAlC;AAAA,cAAQE,OAAR,QAAQA,OAAR;AAAA,cAAiBC,YAAjB,QAAiBA,YAAjB;AACA,8BACE,oBAAC,SAAD;AACE,YAAA,OAAO,EAAEJ,OADX;AAEE,YAAA,KAAK,EAAEE,KAFT;AAGE,YAAA,IAAI,EAAEJ,IAHR;AAIE,YAAA,OAAO,EAAEK,OAJX;AAKE,YAAA,YAAY,EAAEC,YALhB;AAME,YAAA,GAAG,YAAKX,WAAL,4BAAkCS,KAAlC;AANL,YADF;;AAUF,aAAK,eAAL;AACE,sBACED,cADF;AAAA,cAAQI,IAAR,SAAQA,IAAR;AAAA,cAAcC,UAAd,SAAcA,UAAd;AAAA,cAA0BC,YAA1B,SAA0BA,YAA1B;AAAA,cAAwCC,kBAAxC,SAAwCA,kBAAxC;AAAA,cAA4DC,SAA5D,SAA4DA,SAA5D;AAAA,cAAuEC,SAAvE,SAAuEA,SAAvE;AAEA,8BACE,oBAAC,SAAD;AACE,YAAA,OAAO,EAAEV,OADX;AAEE,YAAA,KAAK,EAAEE,KAFT;AAGE,YAAA,IAAI,EAAEG,IAHR;AAIE,YAAA,UAAU,EAAEC,UAJd;AAKE,YAAA,YAAY,EAAEC,YALhB;AAME,YAAA,kBAAkB,EAAEC,kBANtB;AAOE,YAAA,SAAS,EAAEC,SAPb;AAQE,YAAA,GAAG,YAAKhB,WAAL,4BAAkCS,KAAlC,CARL;AASE,YAAA,SAAS,EAAEQ;AATb,YADF;;AAaF;AACE,8BACE,oBAAC,MAAD;AACE,YAAA,OAAO,EAAEV,OADX;AAEE,YAAA,GAAG,YAAKP,WAAL,gCAAsCS,KAAtC,CAFL;AAGE,YAAA,KAAK,EAAEA,KAHT;AAIE,2BAAY;AAJd,0BAME,oBAAC,IAAD;AAAM,YAAA,IAAI,EAAC,MAAX;AAAkB,YAAA,IAAI,EAAC;AAAvB,YANF,CADF;AA9BJ;AAyCD,KA5CD,CADF;AAAA,GADuB,EA+CvB,CAACX,OAAD,EAAUE,WAAV,CA/CuB,CAAzB;AAkDA,sBAAO,0CAAGC,SAAH,CAAP;AACD;;;;"}
|
|
@@ -11,7 +11,15 @@ var AppPicker = function AppPicker(_ref) {
|
|
|
11
11
|
customApps = _ref.customApps,
|
|
12
12
|
sectionTitle = _ref.sectionTitle,
|
|
13
13
|
customSectionTitle = _ref.customSectionTitle,
|
|
14
|
-
onClick = _ref.onClick
|
|
14
|
+
_ref$onClick = _ref.onClick,
|
|
15
|
+
onClick = _ref$onClick === void 0 ? function () {
|
|
16
|
+
return null;
|
|
17
|
+
} : _ref$onClick,
|
|
18
|
+
actionRef = _ref.actionRef,
|
|
19
|
+
_ref$onKeyDown = _ref.onKeyDown,
|
|
20
|
+
customHandleOnKeyDown = _ref$onKeyDown === void 0 ? function () {
|
|
21
|
+
return null;
|
|
22
|
+
} : _ref$onKeyDown;
|
|
15
23
|
|
|
16
24
|
var _useState = useState(false),
|
|
17
25
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -19,16 +27,20 @@ var AppPicker = function AppPicker(_ref) {
|
|
|
19
27
|
setIsOpen = _useState2[1];
|
|
20
28
|
|
|
21
29
|
var buttonRef = useRef();
|
|
22
|
-
var
|
|
30
|
+
var handleTriggerKeyDown = useCallback(function (e) {
|
|
23
31
|
if (e.code === 'Enter' || e.code === 'Space') {
|
|
24
32
|
setIsOpen(true);
|
|
25
33
|
}
|
|
26
34
|
}, []);
|
|
27
|
-
var
|
|
28
|
-
|
|
35
|
+
var handleAppPickerOnKeyDown = useCallback(function (e) {
|
|
36
|
+
customHandleOnKeyDown(e);
|
|
29
37
|
|
|
38
|
+
if (e.code === 'Escape') {
|
|
39
|
+
setIsOpen(false);
|
|
40
|
+
}
|
|
41
|
+
}, [customHandleOnKeyDown]);
|
|
42
|
+
var handleOnClickOutside = useCallback(function () {
|
|
30
43
|
setIsOpen(false);
|
|
31
|
-
(_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
|
|
32
44
|
}, []);
|
|
33
45
|
var handleOnClick = useCallback(function (e) {
|
|
34
46
|
setIsOpen(true);
|
|
@@ -41,7 +53,7 @@ var AppPicker = function AppPicker(_ref) {
|
|
|
41
53
|
ref: ref
|
|
42
54
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
43
55
|
onClick: handleOnClick,
|
|
44
|
-
onKeyDown:
|
|
56
|
+
onKeyDown: handleTriggerKeyDown,
|
|
45
57
|
ref: buttonRef,
|
|
46
58
|
title: label,
|
|
47
59
|
"data-testid": "gh-toolbar-item"
|
|
@@ -50,7 +62,7 @@ var AppPicker = function AppPicker(_ref) {
|
|
|
50
62
|
size: "m"
|
|
51
63
|
})));
|
|
52
64
|
};
|
|
53
|
-
}, [
|
|
65
|
+
}, [handleOnClick, handleTriggerKeyDown, label]);
|
|
54
66
|
return useMemo(function () {
|
|
55
67
|
return /*#__PURE__*/React.createElement(DSAppPicker, {
|
|
56
68
|
isOpen: isOpen,
|
|
@@ -58,10 +70,13 @@ var AppPicker = function AppPicker(_ref) {
|
|
|
58
70
|
customApps: customApps,
|
|
59
71
|
sectionTitle: sectionTitle,
|
|
60
72
|
customSectionTitle: customSectionTitle,
|
|
61
|
-
|
|
62
|
-
renderTrigger: trigger
|
|
73
|
+
onClickOutside: handleOnClickOutside,
|
|
74
|
+
renderTrigger: trigger,
|
|
75
|
+
triggerRef: buttonRef,
|
|
76
|
+
actionRef: actionRef,
|
|
77
|
+
onKeyDown: handleAppPickerOnKeyDown
|
|
63
78
|
});
|
|
64
|
-
}, [apps, customApps, customSectionTitle,
|
|
79
|
+
}, [actionRef, apps, customApps, customSectionTitle, handleAppPickerOnKeyDown, handleOnClickOutside, isOpen, sectionTitle, trigger]);
|
|
65
80
|
};
|
|
66
81
|
|
|
67
82
|
export { AppPicker };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppPicker.js","sources":["../../../../src/outOfTheBox/AppPicker/AppPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport MenuPicker from '@elliemae/ds-icons/MenuPicker';\nimport type { AppPickerPropsT as Props } from '../../index.d';\nimport { Button } from '../../components/Toolbar/styles';\n\nexport const AppPicker = ({\n label,\n apps,\n customApps,\n sectionTitle,\n customSectionTitle,\n onClick,\n}: Props): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const buttonRef = useRef<HTMLButtonElement>();\n\n const
|
|
1
|
+
{"version":3,"file":"AppPicker.js","sources":["../../../../src/outOfTheBox/AppPicker/AppPicker.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport MenuPicker from '@elliemae/ds-icons/MenuPicker';\nimport type { AppPickerPropsT as Props } from '../../index.d';\nimport { Button } from '../../components/Toolbar/styles';\n\nexport const AppPicker = ({\n label,\n apps,\n customApps,\n sectionTitle,\n customSectionTitle,\n onClick = () => null,\n actionRef,\n onKeyDown: customHandleOnKeyDown = () => null,\n}: Props): JSX.Element => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const buttonRef = useRef<HTMLButtonElement>();\n\n const handleTriggerKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Enter' || e.code === 'Space') {\n setIsOpen(true);\n }\n }, []);\n\n const handleAppPickerOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n customHandleOnKeyDown(e);\n if (e.code === 'Escape') {\n setIsOpen(false);\n }\n },\n [customHandleOnKeyDown],\n );\n\n const handleOnClickOutside = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleOnClick = useCallback(\n (e) => {\n setIsOpen(true);\n onClick(e);\n },\n [onClick],\n );\n\n const trigger = useMemo(\n () =>\n ({ ref }: { ref: React.MutableRefObject<HTMLDivElement> }) =>\n (\n <div ref={ref}>\n <Button\n onClick={handleOnClick}\n onKeyDown={handleTriggerKeyDown}\n ref={buttonRef}\n title={label}\n data-testid=\"gh-toolbar-item\"\n >\n <MenuPicker fill=\"#FFF\" size=\"m\" />\n </Button>\n </div>\n ),\n [handleOnClick, handleTriggerKeyDown, label],\n );\n\n return useMemo(\n () => (\n <DSAppPicker\n isOpen={isOpen}\n apps={apps}\n customApps={customApps}\n sectionTitle={sectionTitle}\n customSectionTitle={customSectionTitle}\n onClickOutside={handleOnClickOutside}\n renderTrigger={trigger}\n triggerRef={buttonRef}\n actionRef={actionRef}\n onKeyDown={handleAppPickerOnKeyDown}\n />\n ),\n [\n actionRef,\n apps,\n customApps,\n customSectionTitle,\n handleAppPickerOnKeyDown,\n handleOnClickOutside,\n isOpen,\n sectionTitle,\n trigger,\n ],\n );\n};\n"],"names":["AppPicker","label","apps","customApps","sectionTitle","customSectionTitle","onClick","actionRef","onKeyDown","customHandleOnKeyDown","useState","isOpen","setIsOpen","buttonRef","useRef","handleTriggerKeyDown","useCallback","e","code","handleAppPickerOnKeyDown","handleOnClickOutside","handleOnClick","trigger","useMemo","ref"],"mappings":";;;;;;;IAMaA,SAAS,GAAG,SAAZA,SAAY,OASC;AAAA,MARxBC,KAQwB,QARxBA,KAQwB;AAAA,MAPxBC,IAOwB,QAPxBA,IAOwB;AAAA,MANxBC,UAMwB,QANxBA,UAMwB;AAAA,MALxBC,YAKwB,QALxBA,YAKwB;AAAA,MAJxBC,kBAIwB,QAJxBA,kBAIwB;AAAA,0BAHxBC,OAGwB;AAAA,MAHxBA,OAGwB,6BAHd;AAAA,WAAM,IAAN;AAAA,GAGc;AAAA,MAFxBC,SAEwB,QAFxBA,SAEwB;AAAA,4BADxBC,SACwB;AAAA,MADbC,qBACa,+BADW;AAAA,WAAM,IAAN;AAAA,GACX;;AACxB,kBAA4BC,QAAQ,CAAU,KAAV,CAApC;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,SAAS,GAAGC,MAAM,EAAxB;AAEA,MAAMC,oBAAoB,GAAGC,WAAW,CAAC,UAACC,CAAD,EAA4B;AACnE,QAAIA,CAAC,CAACC,IAAF,KAAW,OAAX,IAAsBD,CAAC,CAACC,IAAF,KAAW,OAArC,EAA8C;AAC5CN,MAAAA,SAAS,CAAC,IAAD,CAAT;AACD;AACF,GAJuC,EAIrC,EAJqC,CAAxC;AAMA,MAAMO,wBAAwB,GAAGH,WAAW,CAC1C,UAACC,CAAD,EAA4B;AAC1BR,IAAAA,qBAAqB,CAACQ,CAAD,CAArB;;AACA,QAAIA,CAAC,CAACC,IAAF,KAAW,QAAf,EAAyB;AACvBN,MAAAA,SAAS,CAAC,KAAD,CAAT;AACD;AACF,GANyC,EAO1C,CAACH,qBAAD,CAP0C,CAA5C;AAUA,MAAMW,oBAAoB,GAAGJ,WAAW,CAAC,YAAM;AAC7CJ,IAAAA,SAAS,CAAC,KAAD,CAAT;AACD,GAFuC,EAErC,EAFqC,CAAxC;AAIA,MAAMS,aAAa,GAAGL,WAAW,CAC/B,UAACC,CAAD,EAAO;AACLL,IAAAA,SAAS,CAAC,IAAD,CAAT;AACAN,IAAAA,OAAO,CAACW,CAAD,CAAP;AACD,GAJ8B,EAK/B,CAACX,OAAD,CAL+B,CAAjC;AAQA,MAAMgB,OAAO,GAAGC,OAAO,CACrB;AAAA,WACE;AAAA,UAAGC,GAAH,SAAGA,GAAH;AAAA,0BAEI;AAAK,QAAA,GAAG,EAAEA;AAAV,sBACE,oBAAC,MAAD;AACE,QAAA,OAAO,EAAEH,aADX;AAEE,QAAA,SAAS,EAAEN,oBAFb;AAGE,QAAA,GAAG,EAAEF,SAHP;AAIE,QAAA,KAAK,EAAEZ,KAJT;AAKE,uBAAY;AALd,sBAOE,oBAAC,UAAD;AAAY,QAAA,IAAI,EAAC,MAAjB;AAAwB,QAAA,IAAI,EAAC;AAA7B,QAPF,CADF,CAFJ;AAAA,KADF;AAAA,GADqB,EAgBrB,CAACoB,aAAD,EAAgBN,oBAAhB,EAAsCd,KAAtC,CAhBqB,CAAvB;AAmBA,SAAOsB,OAAO,CACZ;AAAA,wBACE,oBAAC,WAAD;AACE,MAAA,MAAM,EAAEZ,MADV;AAEE,MAAA,IAAI,EAAET,IAFR;AAGE,MAAA,UAAU,EAAEC,UAHd;AAIE,MAAA,YAAY,EAAEC,YAJhB;AAKE,MAAA,kBAAkB,EAAEC,kBALtB;AAME,MAAA,cAAc,EAAEe,oBANlB;AAOE,MAAA,aAAa,EAAEE,OAPjB;AAQE,MAAA,UAAU,EAAET,SARd;AASE,MAAA,SAAS,EAAEN,SATb;AAUE,MAAA,SAAS,EAAEY;AAVb,MADF;AAAA,GADY,EAeZ,CACEZ,SADF,EAEEL,IAFF,EAGEC,UAHF,EAIEE,kBAJF,EAKEc,wBALF,EAMEC,oBANF,EAOET,MAPF,EAQEP,YARF,EASEkB,OATF,CAfY,CAAd;AA2BD;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-global-header",
|
|
3
|
-
"version": "1.53.4-rc.
|
|
3
|
+
"version": "1.53.4-rc.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Ellie Mae - Dim Sum - Global Header",
|
|
6
6
|
"module": "esm/index.js",
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
"build": "node ../../scripts/build/build.js"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@elliemae/ds-app-picker": "1.53.4-rc.
|
|
20
|
-
"@elliemae/ds-classnames": "1.53.4-rc.
|
|
21
|
-
"@elliemae/ds-grid": "1.53.4-rc.
|
|
22
|
-
"@elliemae/ds-icons": "1.53.4-rc.
|
|
23
|
-
"@elliemae/ds-popover": "1.53.4-rc.
|
|
24
|
-
"@elliemae/ds-utilities": "1.53.4-rc.
|
|
19
|
+
"@elliemae/ds-app-picker": "1.53.4-rc.5",
|
|
20
|
+
"@elliemae/ds-classnames": "1.53.4-rc.5",
|
|
21
|
+
"@elliemae/ds-grid": "1.53.4-rc.5",
|
|
22
|
+
"@elliemae/ds-icons": "1.53.4-rc.5",
|
|
23
|
+
"@elliemae/ds-popover": "1.53.4-rc.5",
|
|
24
|
+
"@elliemae/ds-utilities": "1.53.4-rc.5",
|
|
25
25
|
"react-desc": "^4.1.2",
|
|
26
26
|
"uid": "2.0.0"
|
|
27
27
|
},
|