@elliemae/ds-app-picker 3.4.2 → 3.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/AppPickerImpl.js +103 -68
- package/dist/cjs/AppPickerImpl.js.map +1 -1
- package/dist/cjs/DSAppPicker.js +14 -9
- package/dist/cjs/DSAppPicker.js.map +2 -2
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/propTypes.js +13 -4
- package/dist/cjs/propTypes.js.map +1 -1
- package/dist/cjs/styles.js +4 -1
- package/dist/cjs/styles.js.map +1 -1
- package/dist/cjs/types/AppPickerTypes.js +4 -1
- package/dist/cjs/types/AppPickerTypes.js.map +1 -1
- package/dist/cjs/utils.js +4 -1
- package/dist/cjs/utils.js.map +1 -1
- package/dist/esm/AppPickerImpl.js +99 -67
- package/dist/esm/AppPickerImpl.js.map +1 -1
- package/dist/esm/DSAppPicker.js +10 -8
- package/dist/esm/DSAppPicker.js.map +1 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/propTypes.js +9 -3
- package/dist/esm/propTypes.js.map +1 -1
- package/dist/esm/styles.js.map +1 -1
- package/dist/esm/types/AppPickerTypes.js.map +1 -1
- package/dist/esm/utils.js.map +1 -1
- package/package.json +8 -8
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var AppPickerImpl_exports = {};
|
|
23
26
|
__export(AppPickerImpl_exports, {
|
|
@@ -25,7 +28,8 @@ __export(AppPickerImpl_exports, {
|
|
|
25
28
|
});
|
|
26
29
|
module.exports = __toCommonJS(AppPickerImpl_exports);
|
|
27
30
|
var React = __toESM(require("react"));
|
|
28
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
+
var import_react = require("react");
|
|
29
33
|
var import_ds_chip = require("@elliemae/ds-chip");
|
|
30
34
|
var import_utils = require("./utils");
|
|
31
35
|
var import_styles = require("./styles");
|
|
@@ -59,62 +63,77 @@ const AppPickerImpl = ({
|
|
|
59
63
|
}
|
|
60
64
|
});
|
|
61
65
|
}, [wrapperRef]);
|
|
62
|
-
const handleKeyDown = (0, import_react.useCallback)(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
if (e.
|
|
66
|
+
const handleKeyDown = (0, import_react.useCallback)(
|
|
67
|
+
(e) => {
|
|
68
|
+
switch (e.key) {
|
|
69
|
+
case import_utils.keys.ESC:
|
|
70
|
+
triggerRef?.current?.focus();
|
|
71
|
+
close();
|
|
72
|
+
break;
|
|
73
|
+
case import_utils.keys.TAB:
|
|
74
|
+
if (e.shiftKey) {
|
|
75
|
+
if (e.target === allFocusableButtons.current[0]) {
|
|
76
|
+
e.preventDefault();
|
|
77
|
+
allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();
|
|
78
|
+
}
|
|
79
|
+
} else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {
|
|
71
80
|
e.preventDefault();
|
|
72
|
-
allFocusableButtons?.current[
|
|
81
|
+
allFocusableButtons?.current[0]?.focus();
|
|
73
82
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
83
|
+
break;
|
|
84
|
+
default:
|
|
85
|
+
break;
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
[close, triggerRef]
|
|
89
|
+
);
|
|
90
|
+
const handleOnClick = (0, import_react.useCallback)(
|
|
91
|
+
(app) => (e) => {
|
|
92
|
+
if (app.onClick)
|
|
93
|
+
app.onClick(e, app);
|
|
94
|
+
},
|
|
95
|
+
[]
|
|
96
|
+
);
|
|
97
|
+
const handleOnKeyDownWrapper = (0, import_react.useCallback)(
|
|
98
|
+
(e) => {
|
|
99
|
+
if (onKeyDown)
|
|
100
|
+
onKeyDown(e);
|
|
101
|
+
if (!onKeyDown && e.key === import_utils.keys.ESC) {
|
|
102
|
+
close();
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
[onKeyDown, close]
|
|
106
|
+
);
|
|
94
107
|
const totalAppsLenght = (0, import_react.useMemo)(() => apps.length + customApps.length, []);
|
|
95
|
-
const buildRows = (0, import_react.useCallback)(
|
|
96
|
-
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
108
|
+
const buildRows = (0, import_react.useCallback)(
|
|
109
|
+
(appList, prevIndex = 0, title) => {
|
|
110
|
+
const formattedRows = appList.map((app, index) => {
|
|
111
|
+
const { label, disabled, selected, icon: Icon, id } = app;
|
|
112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledListItem, {
|
|
113
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chip.DSChip, {
|
|
114
|
+
onClick: handleOnClick(app),
|
|
115
|
+
onKeyDown: handleKeyDown,
|
|
116
|
+
"data-testid": "app-picker__chip",
|
|
117
|
+
"aria-disabled": disabled,
|
|
118
|
+
disabled,
|
|
119
|
+
selected,
|
|
120
|
+
"aria-selected": selected,
|
|
121
|
+
id,
|
|
122
|
+
"aria-label": `${label}. ${title} (${index + prevIndex} of ${totalAppsLenght})`,
|
|
123
|
+
icon: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
|
|
124
|
+
className: "app-picker__icon",
|
|
125
|
+
size: "m"
|
|
126
|
+
}),
|
|
127
|
+
label
|
|
128
|
+
}, index)
|
|
129
|
+
});
|
|
130
|
+
});
|
|
131
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
|
|
132
|
+
children: formattedRows
|
|
133
|
+
});
|
|
134
|
+
},
|
|
135
|
+
[handleKeyDown, handleOnClick, totalAppsLenght]
|
|
136
|
+
);
|
|
118
137
|
const AppsRows = (0, import_react.useMemo)(() => buildRows(apps, 1, sectionTitle), []);
|
|
119
138
|
const CustomRows = (0, import_react.useMemo)(() => buildRows(customApps, apps.length, customSectionTitle), []);
|
|
120
139
|
const layout = (0, import_react.useMemo)(() => {
|
|
@@ -135,25 +154,41 @@ const AppPickerImpl = ({
|
|
|
135
154
|
cols
|
|
136
155
|
};
|
|
137
156
|
}, [apps.length, customApps.length]);
|
|
138
|
-
return /* @__PURE__ */
|
|
157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledWrapper, {
|
|
139
158
|
ref: wrapperRef,
|
|
140
159
|
onKeyDown: handleOnKeyDownWrapper,
|
|
141
160
|
"data-testid": "app-picker__wrapper",
|
|
142
161
|
isOverflow,
|
|
143
162
|
cols: layout.cols,
|
|
144
163
|
rows: layout.rows,
|
|
145
|
-
forwardedAs: "ul"
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
164
|
+
forwardedAs: "ul",
|
|
165
|
+
children: [
|
|
166
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledListItemFullRow, {
|
|
167
|
+
"aria-hidden": true,
|
|
168
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, {
|
|
169
|
+
"data-testid": "app-picker__main-title",
|
|
170
|
+
children: sectionTitle
|
|
171
|
+
})
|
|
172
|
+
}),
|
|
173
|
+
AppsRows,
|
|
174
|
+
customApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
175
|
+
children: [
|
|
176
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledListItemFullRow, {
|
|
177
|
+
"aria-hidden": true,
|
|
178
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSeparator, {})
|
|
179
|
+
}),
|
|
180
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledListItemFullRow, {
|
|
181
|
+
"aria-hidden": true,
|
|
182
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTitle, {
|
|
183
|
+
"data-testid": "app-picker__custom-title",
|
|
184
|
+
children: customSectionTitle
|
|
185
|
+
})
|
|
186
|
+
}),
|
|
187
|
+
CustomRows
|
|
188
|
+
]
|
|
189
|
+
})
|
|
190
|
+
]
|
|
191
|
+
});
|
|
157
192
|
};
|
|
158
193
|
var AppPickerImpl_default = AppPickerImpl;
|
|
159
194
|
//# sourceMappingURL=AppPickerImpl.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AppPickerImpl.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\nimport React, { useEffect, useCallback, useRef, useMemo } from 'react';\nimport { DSChip } from '@elliemae/ds-chip';\nimport { keys } from './utils';\nimport { AppItemType, DSAppPickerImplType } from './types/AppPickerTypes';\nimport { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from './styles';\n\nconst AppPickerImpl: DSAppPickerImplType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n close = () => null,\n wrapperRef,\n onKeyDown,\n triggerRef,\n isOverflow,\n}) => {\n const allFocusableButtons = useRef<HTMLButtonElement[]>([]);\n const selectedButton = useRef<number | null>(null);\n\n useEffect(() => {\n // this setTimeout prevent the first truncated chip to lost focus after\n // rerender because the tooltip. @todo refactor how apppicker init the focus\n setTimeout(() => {\n wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {\n if (!e.hasAttribute('disabled')) {\n allFocusableButtons?.current?.push(e);\n }\n if (e.getAttribute('aria-selected') === 'true') {\n selectedButton.current = index;\n }\n });\n\n if (selectedButton.current) {\n wrapperRef?.current?.querySelectorAll('button')[selectedButton.current].focus();\n } else {\n allFocusableButtons?.current[0]?.focus();\n }\n });\n }, [wrapperRef]);\n\n // eslint-disable-next-line max-statements\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n switch (e.key) {\n case keys.ESC:\n triggerRef?.current?.focus();\n close();\n break;\n case keys.TAB:\n if (e.shiftKey) {\n if (e.target === allFocusableButtons.current[0]) {\n e.preventDefault();\n allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();\n }\n } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {\n e.preventDefault();\n allFocusableButtons?.current[0]?.focus();\n }\n break;\n default:\n break;\n }\n },\n [close, triggerRef],\n );\n\n const handleOnClick = useCallback(\n (app: AppItemType) => (e: React.MouseEvent) => {\n if (app.onClick) app.onClick(e, app);\n },\n [],\n );\n\n const handleOnKeyDownWrapper = useCallback(\n (e) => {\n if (onKeyDown) onKeyDown(e);\n if (!onKeyDown && e.key === keys.ESC) {\n close();\n }\n },\n [onKeyDown, close],\n );\n\n const totalAppsLenght = useMemo(() => apps.length + customApps.length, []);\n\n const buildRows = useCallback(\n (appList: AppItemType[], prevIndex = 0, title: string): JSX.Element => {\n const formattedRows = appList.map((app, index) => {\n const { label, disabled, selected, icon: Icon, id } = app;\n return (\n <StyledListItem>\n <DSChip\n key={index}\n onClick={handleOnClick(app)}\n onKeyDown={handleKeyDown}\n data-testid=\"app-picker__chip\"\n aria-disabled={disabled}\n disabled={disabled}\n selected={selected}\n aria-selected={selected}\n id={id}\n aria-label={`${label}. ${title} (${index + prevIndex} of ${totalAppsLenght})`}\n icon={() => <Icon className=\"app-picker__icon\" size=\"m\" />}\n label={label}\n />\n </StyledListItem>\n );\n });\n\n return <>{formattedRows}</>;\n },\n [handleKeyDown, handleOnClick, totalAppsLenght],\n );\n\n const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), []);\n const CustomRows = useMemo(() => buildRows(customApps, apps.length, customSectionTitle), []);\n\n const layout = useMemo(() => {\n const cols = ['repeat(3, 92px)'];\n let appsRows = 0;\n let customRows = 0;\n let rows = [];\n if (apps.length > 0) {\n appsRows = apps.length / 3;\n rows.push('68px', `repeat(${appsRows}, 68px})`);\n }\n if (customApps.length > 0) {\n customRows = customApps.length / 3;\n rows.push('9px', '68px', `repeat(${customRows}, 68px})`);\n }\n return {\n rows,\n cols,\n };\n }, [apps.length, customApps.length]);\n\n return (\n <StyledWrapper\n ref={wrapperRef}\n onKeyDown={handleOnKeyDownWrapper}\n data-testid=\"app-picker__wrapper\"\n isOverflow={isOverflow}\n cols={layout.cols}\n rows={layout.rows}\n forwardedAs=\"ul\"\n >\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__main-title\">{sectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {AppsRows}\n {customApps.length > 0 && (\n <>\n <StyledListItemFullRow aria-hidden>\n <StyledSeparator />\n </StyledListItemFullRow>\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__custom-title\">{customSectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {CustomRows}\n </>\n )}\n </StyledWrapper>\n );\n};\n\nexport default AppPickerImpl;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/DSAppPicker.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var DSAppPicker_exports = {};
|
|
23
26
|
__export(DSAppPicker_exports, {
|
|
@@ -27,7 +30,8 @@ __export(DSAppPicker_exports, {
|
|
|
27
30
|
});
|
|
28
31
|
module.exports = __toCommonJS(DSAppPicker_exports);
|
|
29
32
|
var React = __toESM(require("react"));
|
|
30
|
-
var
|
|
33
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
|
+
var import_react = require("react");
|
|
31
35
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
32
36
|
var import_ds_button = require("@elliemae/ds-button");
|
|
33
37
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
@@ -39,7 +43,7 @@ const DSAppPicker = ({
|
|
|
39
43
|
customApps = [],
|
|
40
44
|
sectionTitle = "APPLICATIONS",
|
|
41
45
|
customSectionTitle = "CUSTOM APPLICATIONS",
|
|
42
|
-
icon: Icon = () => /* @__PURE__ */
|
|
46
|
+
icon: Icon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MenuPicker, {
|
|
43
47
|
color: ["brand-primary", "700"],
|
|
44
48
|
size: "m"
|
|
45
49
|
}),
|
|
@@ -90,7 +94,7 @@ const DSAppPicker = ({
|
|
|
90
94
|
onClose();
|
|
91
95
|
onClickOutside(e);
|
|
92
96
|
};
|
|
93
|
-
const AppPickerContent = () => /* @__PURE__ */
|
|
97
|
+
const AppPickerContent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AppPickerImpl.default, {
|
|
94
98
|
apps,
|
|
95
99
|
customApps,
|
|
96
100
|
sectionTitle,
|
|
@@ -101,7 +105,7 @@ const DSAppPicker = ({
|
|
|
101
105
|
triggerRef: triggerRef || defaultTriggerRef,
|
|
102
106
|
isOverflow
|
|
103
107
|
});
|
|
104
|
-
const RenderTrigger = renderTrigger || (({ ref }) => /* @__PURE__ */
|
|
108
|
+
const RenderTrigger = renderTrigger || (({ ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_button.DSButtonV2, {
|
|
105
109
|
"data-testid": "app-picker__button",
|
|
106
110
|
id: "app-picker__button",
|
|
107
111
|
buttonType: "icon",
|
|
@@ -111,10 +115,11 @@ const DSAppPicker = ({
|
|
|
111
115
|
onClick: (e) => {
|
|
112
116
|
onClick(e);
|
|
113
117
|
setOpen(true);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
+
},
|
|
119
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {})
|
|
120
|
+
}));
|
|
121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_popover.default, {
|
|
122
|
+
content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppPickerContent, {}),
|
|
118
123
|
isOpen: typeof isOpen === "boolean" ? isOpen : open,
|
|
119
124
|
onClickOutside: handleOnClickOutside,
|
|
120
125
|
placement: "bottom",
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSAppPicker.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { describe, mergeRefs } from '@elliemae/ds-utilities';\nimport DSPopover from '@elliemae/ds-popover';\nimport AppPickerImpl from './AppPickerImpl';\nimport { propTypes } from './propTypes';\nimport type { DSAppPickerType } from './types/AppPickerTypes';\n\nconst DSAppPicker: DSAppPickerType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n icon: Icon = () => <MenuPicker color={['brand-primary', '700']} size=\"m\" />,\n renderTrigger,\n isOpen,\n onClose = () => null,\n actionRef,\n onKeyDown,\n onClick = () => null,\n onClickOutside = () => null,\n triggerRef,\n}) => {\n const [open, setOpen] = useState(false);\n const [isOverflow, setIsOverflow] = useState(false);\n const wrapperRef = useRef<HTMLUListElement>(null);\n const defaultTriggerRef = useRef(null);\n\n useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusToIndex = (index) => {\n if (wrapperRef.current) {\n const parent = wrapperRef.current;\n const buttons = [...parent.querySelectorAll('button')];\n buttons[index].focus();\n }\n };\n }\n }, [actionRef, apps, customApps]);\n\n useEffect(() => {\n setTimeout(() => {\n if (wrapperRef.current) {\n const { scrollHeight, clientHeight } = wrapperRef.current;\n if (scrollHeight > clientHeight) return setIsOverflow(true);\n }\n return setIsOverflow(false);\n });\n }, [isOpen, open]);\n\n const handleOnClose = () => {\n if (typeof isOpen === 'boolean') {\n setOpen(isOpen);\n } else {\n setOpen(false);\n }\n onClose();\n };\n\n const handleOnClickOutside = (e: MouseEvent) => {\n setOpen(false);\n onClose();\n onClickOutside(e);\n };\n\n const AppPickerContent = () => (\n <AppPickerImpl\n apps={apps}\n customApps={customApps}\n sectionTitle={sectionTitle}\n customSectionTitle={customSectionTitle}\n close={handleOnClose}\n wrapperRef={wrapperRef}\n onKeyDown={onKeyDown}\n triggerRef={triggerRef || defaultTriggerRef}\n isOverflow={isOverflow}\n />\n );\n const RenderTrigger =\n renderTrigger ||\n (({ ref }) => (\n <DSButtonV2\n data-testid=\"app-picker__button\"\n id=\"app-picker__button\"\n buttonType=\"icon\"\n aria-haspopup=\"true\"\n aria-expanded={open || isOpen}\n innerRef={mergeRefs(ref, defaultTriggerRef)}\n onClick={(e) => {\n onClick(e);\n setOpen(true);\n }}\n >\n <Icon />\n </DSButtonV2>\n ));\n\n return (\n <DSPopover\n content={<AppPickerContent />}\n isOpen={typeof isOpen === 'boolean' ? isOpen : open}\n onClickOutside={handleOnClickOutside}\n placement=\"bottom\"\n interactionType=\"click\"\n renderTrigger={RenderTrigger}\n showArrow\n style={{\n padding: '0',\n maxWidth: '1000px',\n width: 'fit-content',\n }}\n />\n );\n};\n\nDSAppPicker.displayName = 'DSAppPicker';\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = propTypes;\n\nexport { DSAppPicker, AppPickerWithSchema };\nexport default DSAppPicker;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["AppPickerImpl", "DSPopover"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -18,7 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
23
|
+
mod
|
|
24
|
+
));
|
|
22
25
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
26
|
var src_exports = {};
|
|
24
27
|
__export(src_exports, {
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export * from './DSAppPicker';\n\nexport { default } from './DSAppPicker';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,0BAAd;AAEA,yBAAwB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/propTypes.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var propTypes_exports = {};
|
|
23
26
|
__export(propTypes_exports, {
|
|
@@ -28,13 +31,19 @@ var React = __toESM(require("react"));
|
|
|
28
31
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
29
32
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
30
33
|
const propTypes = {
|
|
31
|
-
apps: import_ds_utilities.PropTypes.array.description(
|
|
32
|
-
|
|
34
|
+
apps: import_ds_utilities.PropTypes.array.description(
|
|
35
|
+
"Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"
|
|
36
|
+
).isRequired,
|
|
37
|
+
customApps: import_ds_utilities.PropTypes.array.description(
|
|
38
|
+
"Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"
|
|
39
|
+
),
|
|
33
40
|
sectionTitle: import_ds_utilities.PropTypes.string.description("main section title").defaultValue("APPLICATIONS"),
|
|
34
41
|
customSectionTitle: import_ds_utilities.PropTypes.string.description("custom section title").defaultValue("CUSTOM APPLICATIONS"),
|
|
35
42
|
icon: import_ds_utilities.PropTypes.func.description("trigger button s icon").defaultValue(import_ds_icons.MenuPicker),
|
|
36
43
|
renderTrigger: import_ds_utilities.PropTypes.func.description("Custom trigger component."),
|
|
37
|
-
actionRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.shape({ current: import_ds_utilities.PropTypes.any })]).description(
|
|
44
|
+
actionRef: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.func, import_ds_utilities.PropTypes.shape({ current: import_ds_utilities.PropTypes.any })]).description(
|
|
45
|
+
"Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker."
|
|
46
|
+
),
|
|
38
47
|
isOpen: import_ds_utilities.PropTypes.bool.description("Wether the AppPicker should be open or not."),
|
|
39
48
|
onClose: import_ds_utilities.PropTypes.func.description("Callback function when the AppPicker closes"),
|
|
40
49
|
onKeyDown: import_ds_utilities.PropTypes.func.description("OnKeyDown handler callback."),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\nimport { MenuPicker } from '@elliemae/ds-icons';\n\nexport const propTypes = {\n apps: PropTypes.array.description(\n 'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n ).isRequired,\n customApps: PropTypes.array.description(\n 'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n ),\n sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n renderTrigger: PropTypes.func.description('Custom trigger component.'),\n actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n ),\n isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n onClose: PropTypes.func.description('Callback function when the AppPicker closes'),\n onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAC1B,sBAA2B;AAEpB,MAAM,YAAY;AAAA,EACvB,MAAM,8BAAU,MAAM;AAAA,IACpB;AAAA,EACF,EAAE;AAAA,EACF,YAAY,8BAAU,MAAM;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,cAAc,8BAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,8BAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,8BAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,0BAAU;AAAA,EACjF,eAAe,8BAAU,KAAK,YAAY,2BAA2B;AAAA,EACrE,WAAW,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,EAAE,SAAS,8BAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC5F;AAAA,EACF;AAAA,EACA,QAAQ,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,SAAS,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EACjF,WAAW,8BAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,8BAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,8BAAU,KAAK,YAAY,6DAA6D;AAC1G;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var styles_exports = {};
|
|
23
26
|
__export(styles_exports, {
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const StyledWrapper = styled(Grid, { name: 'DS-AppPicker', slot: 'root' })`\n align-items: center;\n min-width: 308px;\n min-height: 110px;\n max-height: 449px;\n width: 308px;\n overflow-y: auto;\n overflow-x: hidden;\n margin: 0;\n padding: ${({ isOverflow }) => (isOverflow ? '0 0 8px 16px' : '0 16px 8px 16px')};\n &:focus {\n outline: none;\n }\n`;\n\nexport const StyledListItem = styled.li`\n list-style: none;\n`;\n\nexport const StyledListItemFullRow = styled.li`\n list-style: none;\n grid-column: 1/4;\n`;\n\nexport const StyledTitle = styled('h3', { name: 'DS-AppPicker', slot: 'title' })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.value[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin: 12px 0 8px 0;\n line-height: 1.385;\n text-transform: uppercase;\n`;\n\nexport const StyledSeparator = styled('hr', { name: 'DS-AppPicker', slot: 'separator' })`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n border-bottom: none;\n width: 99%;\n margin: 8px 0 0 0;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAuB;AACvB,qBAAqB;AAEd,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,gBAAgB,MAAM,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aASnE,CAAC,EAAE,WAAW,MAAO,aAAa,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMzD,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAI9B,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAKrC,MAAM,kBAAc,yBAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,QAAQ,CAAC;AAAA,WACpE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAM3C,MAAM,sBAAkB,yBAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,YAAY,CAAC;AAAA,0BAC7D,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -13,7 +13,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
13
13
|
}
|
|
14
14
|
return to;
|
|
15
15
|
};
|
|
16
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
18
|
+
mod
|
|
19
|
+
));
|
|
17
20
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
21
|
var AppPickerTypes_exports = {};
|
|
19
22
|
module.exports = __toCommonJS(AppPickerTypes_exports);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/types/AppPickerTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import type { SvgIconType } from '@elliemae/ds-icons';\n\nexport interface AppItemType {\n label: string;\n icon: React.ComponentType<{ className: string; size: string }>;\n onClick?: () => void | null;\n disabled?: boolean;\n id?: string;\n selected?: boolean;\n}\n\nexport interface AppPickerPropsType {\n apps: AppItemType[];\n customApps: AppItemType[];\n sectionTitle: string;\n customSectionTitle: string;\n icon: SvgIconType;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n actionRef?: React.RefObject<{ focusToIndex: (index: number) => void }>;\n onClick?: (e: MouseEvent) => void;\n onClickOutside?: (e: React.MouseEvent) => void;\n renderTrigger?: React.ComponentType<any>;\n isOpen?: boolean;\n onClose?: () => void;\n triggerRef?: React.RefObject<HTMLButtonElement>;\n}\n\nexport interface AppPickerImplProps {\n apps: AppItemType[];\n customApps: AppItemType[];\n sectionTitle: string;\n customSectionTitle: string;\n close?: () => void;\n onKeyDown: (e: KeyboardEvent) => void;\n wrapperRef: React.RefObject<HTMLUListElement>;\n triggerRef: React.RefObject<HTMLElement>;\n isOverflow: boolean;\n}\n\nexport type DSAppPickerImplType = React.ComponentType<AppPickerImplProps>;\nexport type DSAppPickerType = React.ComponentType<AppPickerPropsType>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/utils.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var utils_exports = {};
|
|
23
26
|
__export(utils_exports, {
|
package/dist/cjs/utils.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const keys = {\n LEFT: 'ArrowLeft',\n UP: 'ArrowUp',\n RIGHT: 'ArrowRight',\n DOWN: 'ArrowDown',\n ENTER: 'Enter',\n SPACE: '',\n TAB: 'Tab',\n ESC: 'Escape',\n HOME: 'Home',\n END: 'End',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,OAAO;AAAA,EAClB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AACP;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useCallback, useRef, useMemo } from "react";
|
|
3
4
|
import { DSChip } from "@elliemae/ds-chip";
|
|
4
5
|
import { keys } from "./utils";
|
|
5
6
|
import { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from "./styles";
|
|
@@ -33,62 +34,77 @@ const AppPickerImpl = ({
|
|
|
33
34
|
}
|
|
34
35
|
});
|
|
35
36
|
}, [wrapperRef]);
|
|
36
|
-
const handleKeyDown = useCallback(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
if (e.
|
|
37
|
+
const handleKeyDown = useCallback(
|
|
38
|
+
(e) => {
|
|
39
|
+
switch (e.key) {
|
|
40
|
+
case keys.ESC:
|
|
41
|
+
triggerRef?.current?.focus();
|
|
42
|
+
close();
|
|
43
|
+
break;
|
|
44
|
+
case keys.TAB:
|
|
45
|
+
if (e.shiftKey) {
|
|
46
|
+
if (e.target === allFocusableButtons.current[0]) {
|
|
47
|
+
e.preventDefault();
|
|
48
|
+
allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();
|
|
49
|
+
}
|
|
50
|
+
} else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {
|
|
45
51
|
e.preventDefault();
|
|
46
|
-
allFocusableButtons?.current[
|
|
52
|
+
allFocusableButtons?.current[0]?.focus();
|
|
47
53
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
54
|
+
break;
|
|
55
|
+
default:
|
|
56
|
+
break;
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
[close, triggerRef]
|
|
60
|
+
);
|
|
61
|
+
const handleOnClick = useCallback(
|
|
62
|
+
(app) => (e) => {
|
|
63
|
+
if (app.onClick)
|
|
64
|
+
app.onClick(e, app);
|
|
65
|
+
},
|
|
66
|
+
[]
|
|
67
|
+
);
|
|
68
|
+
const handleOnKeyDownWrapper = useCallback(
|
|
69
|
+
(e) => {
|
|
70
|
+
if (onKeyDown)
|
|
71
|
+
onKeyDown(e);
|
|
72
|
+
if (!onKeyDown && e.key === keys.ESC) {
|
|
73
|
+
close();
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
[onKeyDown, close]
|
|
77
|
+
);
|
|
68
78
|
const totalAppsLenght = useMemo(() => apps.length + customApps.length, []);
|
|
69
|
-
const buildRows = useCallback(
|
|
70
|
-
|
|
71
|
-
const
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
79
|
+
const buildRows = useCallback(
|
|
80
|
+
(appList, prevIndex = 0, title) => {
|
|
81
|
+
const formattedRows = appList.map((app, index) => {
|
|
82
|
+
const { label, disabled, selected, icon: Icon, id } = app;
|
|
83
|
+
return /* @__PURE__ */ jsx(StyledListItem, {
|
|
84
|
+
children: /* @__PURE__ */ jsx(DSChip, {
|
|
85
|
+
onClick: handleOnClick(app),
|
|
86
|
+
onKeyDown: handleKeyDown,
|
|
87
|
+
"data-testid": "app-picker__chip",
|
|
88
|
+
"aria-disabled": disabled,
|
|
89
|
+
disabled,
|
|
90
|
+
selected,
|
|
91
|
+
"aria-selected": selected,
|
|
92
|
+
id,
|
|
93
|
+
"aria-label": `${label}. ${title} (${index + prevIndex} of ${totalAppsLenght})`,
|
|
94
|
+
icon: () => /* @__PURE__ */ jsx(Icon, {
|
|
95
|
+
className: "app-picker__icon",
|
|
96
|
+
size: "m"
|
|
97
|
+
}),
|
|
98
|
+
label
|
|
99
|
+
}, index)
|
|
100
|
+
});
|
|
101
|
+
});
|
|
102
|
+
return /* @__PURE__ */ jsx(Fragment, {
|
|
103
|
+
children: formattedRows
|
|
104
|
+
});
|
|
105
|
+
},
|
|
106
|
+
[handleKeyDown, handleOnClick, totalAppsLenght]
|
|
107
|
+
);
|
|
92
108
|
const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), []);
|
|
93
109
|
const CustomRows = useMemo(() => buildRows(customApps, apps.length, customSectionTitle), []);
|
|
94
110
|
const layout = useMemo(() => {
|
|
@@ -109,25 +125,41 @@ const AppPickerImpl = ({
|
|
|
109
125
|
cols
|
|
110
126
|
};
|
|
111
127
|
}, [apps.length, customApps.length]);
|
|
112
|
-
return /* @__PURE__ */
|
|
128
|
+
return /* @__PURE__ */ jsxs(StyledWrapper, {
|
|
113
129
|
ref: wrapperRef,
|
|
114
130
|
onKeyDown: handleOnKeyDownWrapper,
|
|
115
131
|
"data-testid": "app-picker__wrapper",
|
|
116
132
|
isOverflow,
|
|
117
133
|
cols: layout.cols,
|
|
118
134
|
rows: layout.rows,
|
|
119
|
-
forwardedAs: "ul"
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
135
|
+
forwardedAs: "ul",
|
|
136
|
+
children: [
|
|
137
|
+
/* @__PURE__ */ jsx(StyledListItemFullRow, {
|
|
138
|
+
"aria-hidden": true,
|
|
139
|
+
children: /* @__PURE__ */ jsx(StyledTitle, {
|
|
140
|
+
"data-testid": "app-picker__main-title",
|
|
141
|
+
children: sectionTitle
|
|
142
|
+
})
|
|
143
|
+
}),
|
|
144
|
+
AppsRows,
|
|
145
|
+
customApps.length > 0 && /* @__PURE__ */ jsxs(Fragment, {
|
|
146
|
+
children: [
|
|
147
|
+
/* @__PURE__ */ jsx(StyledListItemFullRow, {
|
|
148
|
+
"aria-hidden": true,
|
|
149
|
+
children: /* @__PURE__ */ jsx(StyledSeparator, {})
|
|
150
|
+
}),
|
|
151
|
+
/* @__PURE__ */ jsx(StyledListItemFullRow, {
|
|
152
|
+
"aria-hidden": true,
|
|
153
|
+
children: /* @__PURE__ */ jsx(StyledTitle, {
|
|
154
|
+
"data-testid": "app-picker__custom-title",
|
|
155
|
+
children: customSectionTitle
|
|
156
|
+
})
|
|
157
|
+
}),
|
|
158
|
+
CustomRows
|
|
159
|
+
]
|
|
160
|
+
})
|
|
161
|
+
]
|
|
162
|
+
});
|
|
131
163
|
};
|
|
132
164
|
var AppPickerImpl_default = AppPickerImpl;
|
|
133
165
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/AppPickerImpl.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\nimport React, { useEffect, useCallback, useRef, useMemo } from 'react';\nimport { DSChip } from '@elliemae/ds-chip';\nimport { keys } from './utils';\nimport { AppItemType, DSAppPickerImplType } from './types/AppPickerTypes';\nimport { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from './styles';\n\nconst AppPickerImpl: DSAppPickerImplType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n close = () => null,\n wrapperRef,\n onKeyDown,\n triggerRef,\n isOverflow,\n}) => {\n const allFocusableButtons = useRef<HTMLButtonElement[]>([]);\n const selectedButton = useRef<number | null>(null);\n\n useEffect(() => {\n // this setTimeout prevent the first truncated chip to lost focus after\n // rerender because the tooltip. @todo refactor how apppicker init the focus\n setTimeout(() => {\n wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {\n if (!e.hasAttribute('disabled')) {\n allFocusableButtons?.current?.push(e);\n }\n if (e.getAttribute('aria-selected') === 'true') {\n selectedButton.current = index;\n }\n });\n\n if (selectedButton.current) {\n wrapperRef?.current?.querySelectorAll('button')[selectedButton.current].focus();\n } else {\n allFocusableButtons?.current[0]?.focus();\n }\n });\n }, [wrapperRef]);\n\n // eslint-disable-next-line max-statements\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n switch (e.key) {\n case keys.ESC:\n triggerRef?.current?.focus();\n close();\n break;\n case keys.TAB:\n if (e.shiftKey) {\n if (e.target === allFocusableButtons.current[0]) {\n e.preventDefault();\n allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();\n }\n } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {\n e.preventDefault();\n allFocusableButtons?.current[0]?.focus();\n }\n break;\n default:\n break;\n }\n },\n [close, triggerRef],\n );\n\n const handleOnClick = useCallback(\n (app: AppItemType) => (e: React.MouseEvent) => {\n if (app.onClick) app.onClick(e, app);\n },\n [],\n );\n\n const handleOnKeyDownWrapper = useCallback(\n (e) => {\n if (onKeyDown) onKeyDown(e);\n if (!onKeyDown && e.key === keys.ESC) {\n close();\n }\n },\n [onKeyDown, close],\n );\n\n const totalAppsLenght = useMemo(() => apps.length + customApps.length, []);\n\n const buildRows = useCallback(\n (appList: AppItemType[], prevIndex = 0, title: string): JSX.Element => {\n const formattedRows = appList.map((app, index) => {\n const { label, disabled, selected, icon: Icon, id } = app;\n return (\n <StyledListItem>\n <DSChip\n key={index}\n onClick={handleOnClick(app)}\n onKeyDown={handleKeyDown}\n data-testid=\"app-picker__chip\"\n aria-disabled={disabled}\n disabled={disabled}\n selected={selected}\n aria-selected={selected}\n id={id}\n aria-label={`${label}. ${title} (${index + prevIndex} of ${totalAppsLenght})`}\n icon={() => <Icon className=\"app-picker__icon\" size=\"m\" />}\n label={label}\n />\n </StyledListItem>\n );\n });\n\n return <>{formattedRows}</>;\n },\n [handleKeyDown, handleOnClick, totalAppsLenght],\n );\n\n const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), []);\n const CustomRows = useMemo(() => buildRows(customApps, apps.length, customSectionTitle), []);\n\n const layout = useMemo(() => {\n const cols = ['repeat(3, 92px)'];\n let appsRows = 0;\n let customRows = 0;\n let rows = [];\n if (apps.length > 0) {\n appsRows = apps.length / 3;\n rows.push('68px', `repeat(${appsRows}, 68px})`);\n }\n if (customApps.length > 0) {\n customRows = customApps.length / 3;\n rows.push('9px', '68px', `repeat(${customRows}, 68px})`);\n }\n return {\n rows,\n cols,\n };\n }, [apps.length, customApps.length]);\n\n return (\n <StyledWrapper\n ref={wrapperRef}\n onKeyDown={handleOnKeyDownWrapper}\n data-testid=\"app-picker__wrapper\"\n isOverflow={isOverflow}\n cols={layout.cols}\n rows={layout.rows}\n forwardedAs=\"ul\"\n >\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__main-title\">{sectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {AppsRows}\n {customApps.length > 0 && (\n <>\n <StyledListItemFullRow aria-hidden>\n <StyledSeparator />\n </StyledListItemFullRow>\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__custom-title\">{customSectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {CustomRows}\n </>\n )}\n </StyledWrapper>\n );\n};\n\nexport default AppPickerImpl;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSAppPicker.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useState, useEffect, useRef } from "react";
|
|
3
4
|
import { MenuPicker } from "@elliemae/ds-icons";
|
|
4
5
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
5
6
|
import { describe, mergeRefs } from "@elliemae/ds-utilities";
|
|
@@ -11,7 +12,7 @@ const DSAppPicker = ({
|
|
|
11
12
|
customApps = [],
|
|
12
13
|
sectionTitle = "APPLICATIONS",
|
|
13
14
|
customSectionTitle = "CUSTOM APPLICATIONS",
|
|
14
|
-
icon: Icon = () => /* @__PURE__ */
|
|
15
|
+
icon: Icon = () => /* @__PURE__ */ jsx(MenuPicker, {
|
|
15
16
|
color: ["brand-primary", "700"],
|
|
16
17
|
size: "m"
|
|
17
18
|
}),
|
|
@@ -62,7 +63,7 @@ const DSAppPicker = ({
|
|
|
62
63
|
onClose();
|
|
63
64
|
onClickOutside(e);
|
|
64
65
|
};
|
|
65
|
-
const AppPickerContent = () => /* @__PURE__ */
|
|
66
|
+
const AppPickerContent = () => /* @__PURE__ */ jsx(AppPickerImpl, {
|
|
66
67
|
apps,
|
|
67
68
|
customApps,
|
|
68
69
|
sectionTitle,
|
|
@@ -73,7 +74,7 @@ const DSAppPicker = ({
|
|
|
73
74
|
triggerRef: triggerRef || defaultTriggerRef,
|
|
74
75
|
isOverflow
|
|
75
76
|
});
|
|
76
|
-
const RenderTrigger = renderTrigger || (({ ref }) => /* @__PURE__ */
|
|
77
|
+
const RenderTrigger = renderTrigger || (({ ref }) => /* @__PURE__ */ jsx(DSButtonV2, {
|
|
77
78
|
"data-testid": "app-picker__button",
|
|
78
79
|
id: "app-picker__button",
|
|
79
80
|
buttonType: "icon",
|
|
@@ -83,10 +84,11 @@ const DSAppPicker = ({
|
|
|
83
84
|
onClick: (e) => {
|
|
84
85
|
onClick(e);
|
|
85
86
|
setOpen(true);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
},
|
|
88
|
+
children: /* @__PURE__ */ jsx(Icon, {})
|
|
89
|
+
}));
|
|
90
|
+
return /* @__PURE__ */ jsx(DSPopover, {
|
|
91
|
+
content: /* @__PURE__ */ jsx(AppPickerContent, {}),
|
|
90
92
|
isOpen: typeof isOpen === "boolean" ? isOpen : open,
|
|
91
93
|
onClickOutside: handleOnClickOutside,
|
|
92
94
|
placement: "bottom",
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSAppPicker.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useRef } from 'react';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { describe, mergeRefs } from '@elliemae/ds-utilities';\nimport DSPopover from '@elliemae/ds-popover';\nimport AppPickerImpl from './AppPickerImpl';\nimport { propTypes } from './propTypes';\nimport type { DSAppPickerType } from './types/AppPickerTypes';\n\nconst DSAppPicker: DSAppPickerType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n icon: Icon = () => <MenuPicker color={['brand-primary', '700']} size=\"m\" />,\n renderTrigger,\n isOpen,\n onClose = () => null,\n actionRef,\n onKeyDown,\n onClick = () => null,\n onClickOutside = () => null,\n triggerRef,\n}) => {\n const [open, setOpen] = useState(false);\n const [isOverflow, setIsOverflow] = useState(false);\n const wrapperRef = useRef<HTMLUListElement>(null);\n const defaultTriggerRef = useRef(null);\n\n useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusToIndex = (index) => {\n if (wrapperRef.current) {\n const parent = wrapperRef.current;\n const buttons = [...parent.querySelectorAll('button')];\n buttons[index].focus();\n }\n };\n }\n }, [actionRef, apps, customApps]);\n\n useEffect(() => {\n setTimeout(() => {\n if (wrapperRef.current) {\n const { scrollHeight, clientHeight } = wrapperRef.current;\n if (scrollHeight > clientHeight) return setIsOverflow(true);\n }\n return setIsOverflow(false);\n });\n }, [isOpen, open]);\n\n const handleOnClose = () => {\n if (typeof isOpen === 'boolean') {\n setOpen(isOpen);\n } else {\n setOpen(false);\n }\n onClose();\n };\n\n const handleOnClickOutside = (e: MouseEvent) => {\n setOpen(false);\n onClose();\n onClickOutside(e);\n };\n\n const AppPickerContent = () => (\n <AppPickerImpl\n apps={apps}\n customApps={customApps}\n sectionTitle={sectionTitle}\n customSectionTitle={customSectionTitle}\n close={handleOnClose}\n wrapperRef={wrapperRef}\n onKeyDown={onKeyDown}\n triggerRef={triggerRef || defaultTriggerRef}\n isOverflow={isOverflow}\n />\n );\n const RenderTrigger =\n renderTrigger ||\n (({ ref }) => (\n <DSButtonV2\n data-testid=\"app-picker__button\"\n id=\"app-picker__button\"\n buttonType=\"icon\"\n aria-haspopup=\"true\"\n aria-expanded={open || isOpen}\n innerRef={mergeRefs(ref, defaultTriggerRef)}\n onClick={(e) => {\n onClick(e);\n setOpen(true);\n }}\n >\n <Icon />\n </DSButtonV2>\n ));\n\n return (\n <DSPopover\n content={<AppPickerContent />}\n isOpen={typeof isOpen === 'boolean' ? isOpen : open}\n onClickOutside={handleOnClickOutside}\n placement=\"bottom\"\n interactionType=\"click\"\n renderTrigger={RenderTrigger}\n showArrow\n style={{\n padding: '0',\n maxWidth: '1000px',\n width: 'fit-content',\n }}\n />\n );\n};\n\nDSAppPicker.displayName = 'DSAppPicker';\nconst AppPickerWithSchema = describe(DSAppPicker);\nAppPickerWithSchema.propTypes = propTypes;\n\nexport { DSAppPicker, AppPickerWithSchema };\nexport default DSAppPicker;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,UAAU,WAAW,cAAc;AACnD,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,UAAU,iBAAiB;AACpC,OAAO,eAAe;AACtB,OAAO,mBAAmB;AAC1B,SAAS,iBAAiB;AAG1B,MAAM,cAA+B,CAAC;AAAA,EACpC,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,MAAM,OAAO,MAAM,oBAAC;AAAA,IAAW,OAAO,CAAC,iBAAiB,KAAK;AAAA,IAAG,MAAK;AAAA,GAAI;AAAA,EACzE;AAAA,EACA;AAAA,EACA,UAAU,MAAM;AAAA,EAChB;AAAA,EACA;AAAA,EACA,UAAU,MAAM;AAAA,EAChB,iBAAiB,MAAM;AAAA,EACvB;AACF,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,aAAa,OAAyB,IAAI;AAChD,QAAM,oBAAoB,OAAO,IAAI;AAErC,YAAU,MAAM;AACd,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,eAAe,CAAC,UAAU;AAC1C,YAAI,WAAW,SAAS;AACtB,gBAAM,SAAS,WAAW;AAC1B,gBAAM,UAAU,CAAC,GAAG,OAAO,iBAAiB,QAAQ,CAAC;AACrD,kBAAQ,OAAO,MAAM;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,MAAM,UAAU,CAAC;AAEhC,YAAU,MAAM;AACd,eAAW,MAAM;AACf,UAAI,WAAW,SAAS;AACtB,cAAM,EAAE,cAAc,aAAa,IAAI,WAAW;AAClD,YAAI,eAAe;AAAc,iBAAO,cAAc,IAAI;AAAA,MAC5D;AACA,aAAO,cAAc,KAAK;AAAA,IAC5B,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,gBAAgB,MAAM;AAC1B,QAAI,OAAO,WAAW,WAAW;AAC/B,cAAQ,MAAM;AAAA,IAChB,OAAO;AACL,cAAQ,KAAK;AAAA,IACf;AACA,YAAQ;AAAA,EACV;AAEA,QAAM,uBAAuB,CAAC,MAAkB;AAC9C,YAAQ,KAAK;AACb,YAAQ;AACR,mBAAe,CAAC;AAAA,EAClB;AAEA,QAAM,mBAAmB,MACvB,oBAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,YAAY,cAAc;AAAA,IAC1B;AAAA,GACF;AAEF,QAAM,gBACJ,kBACC,CAAC,EAAE,IAAI,MACN,oBAAC;AAAA,IACC,eAAY;AAAA,IACZ,IAAG;AAAA,IACH,YAAW;AAAA,IACX,iBAAc;AAAA,IACd,iBAAe,QAAQ;AAAA,IACvB,UAAU,UAAU,KAAK,iBAAiB;AAAA,IAC1C,SAAS,CAAC,MAAM;AACd,cAAQ,CAAC;AACT,cAAQ,IAAI;AAAA,IACd;AAAA,IAEA,8BAAC,QAAK;AAAA,GACR;AAGJ,SACE,oBAAC;AAAA,IACC,SAAS,oBAAC,oBAAiB;AAAA,IAC3B,QAAQ,OAAO,WAAW,YAAY,SAAS;AAAA,IAC/C,gBAAgB;AAAA,IAChB,WAAU;AAAA,IACV,iBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,WAAS;AAAA,IACT,OAAO;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,GACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,sBAAsB,SAAS,WAAW;AAChD,oBAAoB,YAAY;AAGhC,IAAO,sBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSAppPicker';\n\nexport { default } from './DSAppPicker';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AAEd,SAAS,WAAAA,gBAAe;",
|
|
6
|
+
"names": ["default"]
|
|
7
7
|
}
|
package/dist/esm/propTypes.js
CHANGED
|
@@ -2,13 +2,19 @@ import * as React from "react";
|
|
|
2
2
|
import { PropTypes } from "@elliemae/ds-utilities";
|
|
3
3
|
import { MenuPicker } from "@elliemae/ds-icons";
|
|
4
4
|
const propTypes = {
|
|
5
|
-
apps: PropTypes.array.description(
|
|
6
|
-
|
|
5
|
+
apps: PropTypes.array.description(
|
|
6
|
+
"Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"
|
|
7
|
+
).isRequired,
|
|
8
|
+
customApps: PropTypes.array.description(
|
|
9
|
+
"Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]"
|
|
10
|
+
),
|
|
7
11
|
sectionTitle: PropTypes.string.description("main section title").defaultValue("APPLICATIONS"),
|
|
8
12
|
customSectionTitle: PropTypes.string.description("custom section title").defaultValue("CUSTOM APPLICATIONS"),
|
|
9
13
|
icon: PropTypes.func.description("trigger button s icon").defaultValue(MenuPicker),
|
|
10
14
|
renderTrigger: PropTypes.func.description("Custom trigger component."),
|
|
11
|
-
actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(
|
|
15
|
+
actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(
|
|
16
|
+
"Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker."
|
|
17
|
+
),
|
|
12
18
|
isOpen: PropTypes.bool.description("Wether the AppPicker should be open or not."),
|
|
13
19
|
onClose: PropTypes.func.description("Callback function when the AppPicker closes"),
|
|
14
20
|
onKeyDown: PropTypes.func.description("OnKeyDown handler callback."),
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport { MenuPicker } from '@elliemae/ds-icons';\n\nexport const propTypes = {\n apps: PropTypes.array.description(\n 'Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n ).isRequired,\n customApps: PropTypes.array.description(\n 'Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]',\n ),\n sectionTitle: PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),\n customSectionTitle: PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),\n icon: PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker),\n renderTrigger: PropTypes.func.description('Custom trigger component.'),\n actionRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'Ref containing a focusToIndex method. This method allows you to focus any App inside the AppPicker.',\n ),\n isOpen: PropTypes.bool.description('Wether the AppPicker should be open or not.'),\n onClose: PropTypes.func.description('Callback function when the AppPicker closes'),\n onKeyDown: PropTypes.func.description('OnKeyDown handler callback.'),\n onClick: PropTypes.func.description('Custom onClick for Trigger component.'),\n onClickOutside: PropTypes.func.description('Callback event when the user clicks outside the App Picker.'),\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,YAAY;AAAA,EACvB,MAAM,UAAU,MAAM;AAAA,IACpB;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,MAAM;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,cAAc,UAAU,OAAO,YAAY,oBAAoB,EAAE,aAAa,cAAc;AAAA,EAC5F,oBAAoB,UAAU,OAAO,YAAY,sBAAsB,EAAE,aAAa,qBAAqB;AAAA,EAC3G,MAAM,UAAU,KAAK,YAAY,uBAAuB,EAAE,aAAa,UAAU;AAAA,EACjF,eAAe,UAAU,KAAK,YAAY,2BAA2B;AAAA,EACrE,WAAW,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC5F;AAAA,EACF;AAAA,EACA,QAAQ,UAAU,KAAK,YAAY,6CAA6C;AAAA,EAChF,SAAS,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACjF,WAAW,UAAU,KAAK,YAAY,6BAA6B;AAAA,EACnE,SAAS,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAC3E,gBAAgB,UAAU,KAAK,YAAY,6DAA6D;AAC1G;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const StyledWrapper = styled(Grid, { name: 'DS-AppPicker', slot: 'root' })`\n align-items: center;\n min-width: 308px;\n min-height: 110px;\n max-height: 449px;\n width: 308px;\n overflow-y: auto;\n overflow-x: hidden;\n margin: 0;\n padding: ${({ isOverflow }) => (isOverflow ? '0 0 8px 16px' : '0 16px 8px 16px')};\n &:focus {\n outline: none;\n }\n`;\n\nexport const StyledListItem = styled.li`\n list-style: none;\n`;\n\nexport const StyledListItemFullRow = styled.li`\n list-style: none;\n grid-column: 1/4;\n`;\n\nexport const StyledTitle = styled('h3', { name: 'DS-AppPicker', slot: 'title' })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.value[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin: 12px 0 8px 0;\n line-height: 1.385;\n text-transform: uppercase;\n`;\n\nexport const StyledSeparator = styled('hr', { name: 'DS-AppPicker', slot: 'separator' })`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n border-bottom: none;\n width: 99%;\n margin: 8px 0 0 0;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,cAAc;AACvB,SAAS,YAAY;AAEd,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aASnE,CAAC,EAAE,WAAW,MAAO,aAAa,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMzD,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAI9B,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAKrC,MAAM,cAAc,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,QAAQ,CAAC;AAAA,WACpE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAM3C,MAAM,kBAAkB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,YAAY,CAAC;AAAA,0BAC7D,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/utils.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const keys = {\n LEFT: 'ArrowLeft',\n UP: 'ArrowUp',\n RIGHT: 'ArrowRight',\n DOWN: 'ArrowDown',\n ENTER: 'Enter',\n SPACE: '',\n TAB: 'Tab',\n ESC: 'Escape',\n HOME: 'Home',\n END: 'End',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,OAAO;AAAA,EAClB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AACP;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-app-picker",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - App Picker",
|
|
6
6
|
"files": [
|
|
@@ -59,13 +59,13 @@
|
|
|
59
59
|
"indent": 4
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@elliemae/ds-button": "3.4.
|
|
63
|
-
"@elliemae/ds-chip": "3.4.
|
|
64
|
-
"@elliemae/ds-grid": "3.4.
|
|
65
|
-
"@elliemae/ds-icons": "3.4.
|
|
66
|
-
"@elliemae/ds-popover": "3.4.
|
|
67
|
-
"@elliemae/ds-system": "3.4.
|
|
68
|
-
"@elliemae/ds-utilities": "3.4.
|
|
62
|
+
"@elliemae/ds-button": "3.4.3",
|
|
63
|
+
"@elliemae/ds-chip": "3.4.3",
|
|
64
|
+
"@elliemae/ds-grid": "3.4.3",
|
|
65
|
+
"@elliemae/ds-icons": "3.4.3",
|
|
66
|
+
"@elliemae/ds-popover": "3.4.3",
|
|
67
|
+
"@elliemae/ds-system": "3.4.3",
|
|
68
|
+
"@elliemae/ds-utilities": "3.4.3"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@testing-library/jest-dom": "~5.16.4",
|