@elliemae/ds-app-picker 1.55.0-next.8 → 1.55.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/cjs/AppPickerImpl.js +27 -119
  2. package/cjs/AppPickerImpl.js.map +1 -1
  3. package/esm/AppPickerImpl.js +27 -119
  4. package/esm/AppPickerImpl.js.map +1 -1
  5. package/package.json +6 -5
package/cjs/AppPickerImpl.js CHANGED
@@ -11,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
 
12
12
  /* eslint-disable react/prop-types */
13
13
  var blockName = 'app-picker';
14
- var Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper');
14
+ var Wrapper = dsClassnames.aggregatedClasses('ul')(blockName, 'wrapper');
15
15
  var Grid = dsClassnames.aggregatedClasses('div')(blockName, 'grid');
16
16
  var Row = dsClassnames.aggregatedClasses('div')(blockName, 'row');
17
17
  var Chip = dsClassnames.aggregatedClasses('button')(blockName, 'chip', function (_ref) {
@@ -43,33 +43,11 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
43
43
  onKeyDown = _ref2.onKeyDown,
44
44
  triggerRef = _ref2.triggerRef;
45
45
  var allFocusableButtons = React.useRef([]);
46
- var allButtons = React.useRef([]);
47
46
  var selectedButton = React.useRef(null);
48
47
  React.useEffect(function () {
49
- var _wrapperRef$current, _wrapperRef$current2;
48
+ var _wrapperRef$current;
50
49
 
51
- wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelectorAll('.em-ds-app-picker__row').forEach(function (row) {
52
- var _allButtons$current2, _allButtons$current4, _allButtons$current6;
53
-
54
- if (row.children[0] && !row.children[0].hasAttribute('disabled')) {
55
- var _allButtons$current;
56
-
57
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current = allButtons.current) === null || _allButtons$current === void 0 ? void 0 : _allButtons$current.push(row.children[0]);
58
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current2 = allButtons.current) === null || _allButtons$current2 === void 0 ? void 0 : _allButtons$current2.push(null);
59
-
60
- if (row.children[1] && !row.children[1].hasAttribute('disabled')) {
61
- var _allButtons$current3;
62
-
63
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current3 = allButtons.current) === null || _allButtons$current3 === void 0 ? void 0 : _allButtons$current3.push(row.children[1]);
64
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current4 = allButtons.current) === null || _allButtons$current4 === void 0 ? void 0 : _allButtons$current4.push(null);
65
-
66
- if (row.children[2] && !row.children[2].hasAttribute('disabled')) {
67
- var _allButtons$current5;
68
-
69
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current5 = allButtons.current) === null || _allButtons$current5 === void 0 ? void 0 : _allButtons$current5.push(row.children[2]);
70
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current6 = allButtons.current) === null || _allButtons$current6 === void 0 ? void 0 : _allButtons$current6.push(null);
71
- });
72
- wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelectorAll('button').forEach(function (e, index) {
50
+ wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelectorAll('button').forEach(function (e, index) {
73
51
  if (!e.hasAttribute('disabled')) {
74
52
  var _allFocusableButtons$;
75
53
 
@@ -82,125 +60,47 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
82
60
  });
83
61
 
84
62
  if (selectedButton.current) {
85
- var _wrapperRef$current3;
63
+ var _wrapperRef$current2;
86
64
 
87
- wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current3 = wrapperRef.current) === null || _wrapperRef$current3 === void 0 ? void 0 : _wrapperRef$current3.querySelectorAll('button')[selectedButton.current].focus();
65
+ wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelectorAll('button')[selectedButton.current].focus();
88
66
  } else {
89
67
  var _allFocusableButtons$2;
90
68
 
91
69
  allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$2 = allFocusableButtons.current[0]) === null || _allFocusableButtons$2 === void 0 ? void 0 : _allFocusableButtons$2.focus();
92
70
  }
93
- }, [wrapperRef]);
94
- var move = React.useCallback(function (position, offset) {
95
- var newPosition = position + offset;
96
-
97
- if (position + offset < 0) {
98
- newPosition = allButtons.current.length + position + offset;
99
- }
100
-
101
- if (position + offset > allButtons.current.length - 1) {
102
- newPosition = position - allButtons.current.length;
103
- }
104
-
105
- var element = allButtons.current[newPosition];
106
-
107
- if (element) {
108
- return element.focus();
109
- }
110
-
111
- return move(newPosition, offset);
112
- }, []); // eslint-disable-next-line max-statements
71
+ }, [wrapperRef]); // eslint-disable-next-line max-statements
113
72
 
114
73
  var handleKeyDown = function handleKeyDown(e) {
115
- var _triggerRef$current, _allFocusableButtons$3, _allFocusableButtons$4;
74
+ var _triggerRef$current;
116
75
 
117
76
  switch (e.key) {
118
- case utils.keys.LEFT:
119
- e.preventDefault();
120
-
121
- for (var index = 0; index < allButtons.current.length; index += 1) {
122
- if ((allButtons === null || allButtons === void 0 ? void 0 : allButtons.current[index]) === e.target) {
123
- move(index, -1);
124
- break;
125
- }
126
- }
127
-
128
- break;
129
-
130
- case utils.keys.RIGHT:
131
- e.preventDefault();
132
-
133
- for (var _index = 0; _index < allButtons.current.length; _index += 1) {
134
- if (allButtons.current[_index] === e.target) {
135
- move(_index, 1);
136
- break;
137
- }
138
- }
139
-
140
- break;
141
-
142
- case utils.keys.UP:
143
- e.preventDefault();
144
-
145
- for (var _index2 = 0; _index2 < allButtons.current.length; _index2 += 1) {
146
- if (allButtons.current[_index2] === e.target) {
147
- move(_index2, -3);
148
- break;
149
- }
150
- }
151
-
152
- break;
153
-
154
- case utils.keys.DOWN:
155
- e.preventDefault();
156
-
157
- for (var _index3 = 0; _index3 < allButtons.current.length; _index3 += 1) {
158
- if (allButtons.current[_index3] === e.target) {
159
- move(_index3, 3);
160
- break;
161
- }
162
- }
163
-
164
- break;
165
-
166
77
  case utils.keys.ESC:
167
78
  triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
168
79
  close();
169
80
  break;
170
81
 
171
- case utils.keys.HOME:
172
- e.preventDefault();
173
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$3 = allFocusableButtons.current[0]) === null || _allFocusableButtons$3 === void 0 ? void 0 : _allFocusableButtons$3.focus();
174
- break;
175
-
176
- case utils.keys.END:
177
- e.preventDefault();
178
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[allFocusableButtons.current.length - 1]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
179
- break;
180
-
181
82
  case utils.keys.TAB:
182
83
  if (e.shiftKey) {
183
84
  if (e.target === allFocusableButtons.current[0]) {
184
- var _allFocusableButtons$5;
85
+ var _allFocusableButtons$3;
185
86
 
186
87
  e.preventDefault();
187
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$5 = allFocusableButtons.current[allFocusableButtons.current.length - 1]) === null || _allFocusableButtons$5 === void 0 ? void 0 : _allFocusableButtons$5.focus();
88
+ allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$3 = allFocusableButtons.current[allFocusableButtons.current.length - 1]) === null || _allFocusableButtons$3 === void 0 ? void 0 : _allFocusableButtons$3.focus();
188
89
  }
189
90
  } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {
190
- var _allFocusableButtons$6;
91
+ var _allFocusableButtons$4;
191
92
 
192
93
  e.preventDefault();
193
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$6 = allFocusableButtons.current[0]) === null || _allFocusableButtons$6 === void 0 ? void 0 : _allFocusableButtons$6.focus();
94
+ allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[0]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
194
95
  }
195
96
 
196
97
  break;
197
98
  }
198
99
  };
199
100
 
200
- var handleOnClick = function handleOnClick(e, app) {
101
+ var handleOnClick = React.useCallback(function (e, app) {
201
102
  if (app.onClick) app.onClick(e, app);
202
- };
203
-
103
+ }, []);
204
104
  var handleOnKeyDownWrapper = React.useCallback(function (e) {
205
105
  if (onKeyDown) onKeyDown(e);
206
106
 
@@ -210,6 +110,7 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
210
110
  }, [onKeyDown, close]);
211
111
 
212
112
  var buildRows = function buildRows(appList) {
113
+ var prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
213
114
  var rows = lodash.chunk(appList, 3); // divides array in subarrays of 3 items
214
115
 
215
116
  var formattedRows = rows.map(function (row, index) {
@@ -233,7 +134,9 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
233
134
  "data-testid": "app-picker__chip",
234
135
  "aria-disabled": disabled,
235
136
  disabled: disabled,
236
- "aria-selected": selected
137
+ "aria-selected": selected,
138
+ "aria-setsize": apps.length + customApps.length,
139
+ "aria-posinset": key + prevIndex
237
140
  }, /*#__PURE__*/React__default['default'].createElement(Icon, {
238
141
  className: "app-picker__icon",
239
142
  size: "m"
@@ -244,23 +147,28 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
244
147
  };
245
148
 
246
149
  var AppsRows = function AppsRows() {
247
- return buildRows(apps);
150
+ return buildRows(apps, 1);
248
151
  };
249
152
 
250
153
  var CustomRows = function CustomRows() {
251
- return buildRows(customApps);
154
+ return buildRows(customApps, apps.length);
252
155
  };
253
156
 
254
157
  return /*#__PURE__*/React__default['default'].createElement(Wrapper, {
158
+ role: "listbox",
255
159
  ref: wrapperRef,
256
160
  onKeyDown: handleOnKeyDownWrapper,
257
161
  "data-testid": "app-picker__wrapper"
258
162
  }, /*#__PURE__*/React__default['default'].createElement(SectionTitle, {
259
- "data-testid": "app-picker__main-title"
163
+ "data-testid": "app-picker__main-title",
164
+ "aria-hidden": true
260
165
  }, sectionTitle), /*#__PURE__*/React__default['default'].createElement(Grid, {
261
166
  "data-testid": "app-picker__main-grid"
262
- }, /*#__PURE__*/React__default['default'].createElement(AppsRows, null)), !!customApps.length && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Separator, null), /*#__PURE__*/React__default['default'].createElement(SectionTitle, {
263
- "data-testid": "app-picker__custom-title"
167
+ }, /*#__PURE__*/React__default['default'].createElement(AppsRows, null)), !!customApps.length && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Separator, {
168
+ "aria-hidden": true
169
+ }), /*#__PURE__*/React__default['default'].createElement(SectionTitle, {
170
+ "data-testid": "app-picker__custom-title",
171
+ "aria-hidden": true
264
172
  }, customSectionTitle), /*#__PURE__*/React__default['default'].createElement(Grid, {
265
173
  "data-testid": "app-picker__custom-grid"
266
174
  }, /*#__PURE__*/React__default['default'].createElement(CustomRows, null))));
package/cjs/AppPickerImpl.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppPickerImpl.js","sources":["../../src/AppPickerImpl.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable no-unused-expressions */\n/* eslint-disable object-curly-newline */\n/* eslint-disable prefer-template */\nimport React, { useEffect, useCallback, useRef } from 'react';\nimport { chunk } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { keys } from './utils';\nimport { DSAppPickerImplType } from './types/AppPickerTypes';\n\nconst blockName = 'app-picker';\nconst Wrapper = aggregatedClasses('div')(blockName, 'wrapper');\nconst Grid = aggregatedClasses('div')(blockName, 'grid');\nconst Row = aggregatedClasses('div')(blockName, 'row');\nconst Chip = aggregatedClasses('button')(blockName, 'chip', ({ disabled, selected }) => ({\n disabled,\n selected,\n}));\nconst ChipLabel = aggregatedClasses('p')(blockName, 'chip-label');\nconst Separator = aggregatedClasses('hr')(blockName, 'separator');\nconst SectionTitle = aggregatedClasses('p')(blockName, 'section-title');\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}) => {\n const allFocusableButtons = useRef([]);\n const allButtons = useRef([]);\n const selectedButton = useRef(null);\n\n useEffect(() => {\n wrapperRef?.current?.querySelectorAll('.em-ds-app-picker__row').forEach((row) => {\n if (row.children[0] && !row.children[0].hasAttribute('disabled')) {\n allButtons?.current?.push(row.children[0]);\n } else allButtons?.current?.push(null);\n if (row.children[1] && !row.children[1].hasAttribute('disabled')) {\n allButtons?.current?.push(row.children[1]);\n } else allButtons?.current?.push(null);\n if (row.children[2] && !row.children[2].hasAttribute('disabled')) {\n allButtons?.current?.push(row.children[2]);\n } else allButtons?.current?.push(null);\n });\n\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 }, [wrapperRef]);\n\n const move = useCallback((position, offset) => {\n let newPosition = position + offset;\n if (position + offset < 0) {\n newPosition = allButtons.current.length + position + offset;\n }\n\n if (position + offset > allButtons.current.length - 1) {\n newPosition = position - allButtons.current.length;\n }\n const element = allButtons.current[newPosition];\n if (element) {\n return element.focus();\n }\n return move(newPosition, offset);\n }, []);\n // eslint-disable-next-line max-statements\n const handleKeyDown = (e) => {\n switch (e.key) {\n case keys.LEFT:\n e.preventDefault();\n for (let index = 0; index < allButtons.current.length; index += 1) {\n if (allButtons?.current[index] === e.target) {\n move(index, -1);\n break;\n }\n }\n break;\n case keys.RIGHT:\n e.preventDefault();\n for (let index = 0; index < allButtons.current.length; index += 1) {\n if (allButtons.current[index] === e.target) {\n move(index, 1);\n break;\n }\n }\n break;\n case keys.UP:\n e.preventDefault();\n for (let index = 0; index < allButtons.current.length; index += 1) {\n if (allButtons.current[index] === e.target) {\n move(index, -3);\n break;\n }\n }\n break;\n case keys.DOWN:\n e.preventDefault();\n for (let index = 0; index < allButtons.current.length; index += 1) {\n if (allButtons.current[index] === e.target) {\n move(index, 3);\n break;\n }\n }\n break;\n case keys.ESC:\n triggerRef?.current?.focus();\n close();\n break;\n case keys.HOME:\n e.preventDefault();\n allFocusableButtons?.current[0]?.focus();\n break;\n case keys.END:\n e.preventDefault();\n allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();\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\n const handleOnClick = (e, app) => {\n if (app.onClick) app.onClick(e, app);\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 buildRows = (appList) => {\n const rows = chunk(appList, 3); // divides array in subarrays of 3 items\n const formattedRows = rows.map((row, index) => (\n <Row key={index}>\n {row.map((app, key) => {\n const { label, disabled, selected, icon: Icon } = app;\n return (\n <Chip\n key={key}\n classProps={{ disabled, selected }}\n onClick={(e) => handleOnClick(e, app)}\n onKeyDown={handleKeyDown}\n data-testid=\"app-picker__chip\"\n aria-disabled={disabled}\n disabled={disabled}\n aria-selected={selected}\n >\n <Icon className=\"app-picker__icon\" size=\"m\" />\n <ChipLabel>{label}</ChipLabel>\n </Chip>\n );\n })}\n </Row>\n ));\n return formattedRows;\n };\n\n const AppsRows = () => buildRows(apps);\n const CustomRows = () => buildRows(customApps);\n\n return (\n <Wrapper ref={wrapperRef} onKeyDown={handleOnKeyDownWrapper} data-testid=\"app-picker__wrapper\">\n <SectionTitle data-testid=\"app-picker__main-title\">{sectionTitle}</SectionTitle>\n <Grid data-testid=\"app-picker__main-grid\">\n <AppsRows />\n </Grid>\n {!!customApps.length && (\n <>\n <Separator />\n <SectionTitle data-testid=\"app-picker__custom-title\">{customSectionTitle}</SectionTitle>\n <Grid data-testid=\"app-picker__custom-grid\">\n <CustomRows />\n </Grid>\n </>\n )}\n </Wrapper>\n );\n};\n\nexport default AppPickerImpl;\n"],"names":["blockName","Wrapper","aggregatedClasses","Grid","Row","Chip","disabled","selected","ChipLabel","Separator","SectionTitle","AppPickerImpl","apps","customApps","sectionTitle","customSectionTitle","close","wrapperRef","onKeyDown","triggerRef","allFocusableButtons","useRef","allButtons","selectedButton","useEffect","current","querySelectorAll","forEach","row","children","hasAttribute","push","e","index","getAttribute","focus","move","useCallback","position","offset","newPosition","length","element","handleKeyDown","key","keys","LEFT","preventDefault","target","RIGHT","UP","DOWN","ESC","HOME","END","TAB","shiftKey","handleOnClick","app","onClick","handleOnKeyDownWrapper","buildRows","appList","rows","chunk","formattedRows","map","React","label","Icon","icon","AppsRows","CustomRows"],"mappings":"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"}
1
+ {"version":3,"file":"AppPickerImpl.js","sources":["../../src/AppPickerImpl.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable no-unused-expressions */\n/* eslint-disable object-curly-newline */\n/* eslint-disable prefer-template */\nimport React, { useEffect, useCallback, useRef } from 'react';\nimport { chunk } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { keys } from './utils';\nimport { DSAppPickerImplType } from './types/AppPickerTypes';\n\nconst blockName = 'app-picker';\nconst Wrapper = aggregatedClasses('ul')(blockName, 'wrapper');\nconst Grid = aggregatedClasses('div')(blockName, 'grid');\nconst Row = aggregatedClasses('div')(blockName, 'row');\nconst Chip = aggregatedClasses('button')(blockName, 'chip', ({ disabled, selected }) => ({\n disabled,\n selected,\n}));\nconst ChipLabel = aggregatedClasses('p')(blockName, 'chip-label');\nconst Separator = aggregatedClasses('hr')(blockName, 'separator');\nconst SectionTitle = aggregatedClasses('p')(blockName, 'section-title');\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}) => {\n const allFocusableButtons = useRef([]);\n const selectedButton = useRef(null);\n\n useEffect(() => {\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 }, [wrapperRef]);\n\n // eslint-disable-next-line max-statements\n const handleKeyDown = (e) => {\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\n const handleOnClick = useCallback((e, app) => {\n if (app.onClick) app.onClick(e, app);\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 buildRows = (appList, prevIndex = 0) => {\n const rows = chunk(appList, 3); // divides array in subarrays of 3 items\n const formattedRows = rows.map((row, index) => (\n <Row key={index}>\n {row.map((app, key) => {\n const { label, disabled, selected, icon: Icon } = app;\n return (\n <Chip\n key={key}\n classProps={{ disabled, selected }}\n onClick={(e) => handleOnClick(e, app)}\n onKeyDown={handleKeyDown}\n data-testid=\"app-picker__chip\"\n aria-disabled={disabled}\n disabled={disabled}\n aria-selected={selected}\n aria-setsize={apps.length + customApps.length}\n aria-posinset={key + prevIndex}\n >\n <Icon className=\"app-picker__icon\" size=\"m\" />\n <ChipLabel>{label}</ChipLabel>\n </Chip>\n );\n })}\n </Row>\n ));\n return formattedRows;\n };\n\n const AppsRows = () => buildRows(apps, 1);\n const CustomRows = () => buildRows(customApps, apps.length);\n\n return (\n <Wrapper role=\"listbox\" ref={wrapperRef} onKeyDown={handleOnKeyDownWrapper} data-testid=\"app-picker__wrapper\">\n <SectionTitle data-testid=\"app-picker__main-title\" aria-hidden>\n {sectionTitle}\n </SectionTitle>\n <Grid data-testid=\"app-picker__main-grid\">\n <AppsRows />\n </Grid>\n {!!customApps.length && (\n <>\n <Separator aria-hidden />\n <SectionTitle data-testid=\"app-picker__custom-title\" aria-hidden>\n {customSectionTitle}\n </SectionTitle>\n <Grid data-testid=\"app-picker__custom-grid\">\n <CustomRows />\n </Grid>\n </>\n )}\n </Wrapper>\n );\n};\n\nexport default AppPickerImpl;\n"],"names":["blockName","Wrapper","aggregatedClasses","Grid","Row","Chip","disabled","selected","ChipLabel","Separator","SectionTitle","AppPickerImpl","apps","customApps","sectionTitle","customSectionTitle","close","wrapperRef","onKeyDown","triggerRef","allFocusableButtons","useRef","selectedButton","useEffect","current","querySelectorAll","forEach","e","index","hasAttribute","push","getAttribute","focus","handleKeyDown","key","keys","ESC","TAB","shiftKey","target","preventDefault","length","handleOnClick","useCallback","app","onClick","handleOnKeyDownWrapper","buildRows","appList","prevIndex","rows","chunk","formattedRows","map","row","React","label","Icon","icon","AppsRows","CustomRows"],"mappings":"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"}
package/esm/AppPickerImpl.js CHANGED
@@ -5,7 +5,7 @@ import { keys } from './utils.js';
5
5
 
6
6
  /* eslint-disable react/prop-types */
7
7
  var blockName = 'app-picker';
8
- var Wrapper = aggregatedClasses('div')(blockName, 'wrapper');
8
+ var Wrapper = aggregatedClasses('ul')(blockName, 'wrapper');
9
9
  var Grid = aggregatedClasses('div')(blockName, 'grid');
10
10
  var Row = aggregatedClasses('div')(blockName, 'row');
11
11
  var Chip = aggregatedClasses('button')(blockName, 'chip', function (_ref) {
@@ -37,33 +37,11 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
37
37
  onKeyDown = _ref2.onKeyDown,
38
38
  triggerRef = _ref2.triggerRef;
39
39
  var allFocusableButtons = useRef([]);
40
- var allButtons = useRef([]);
41
40
  var selectedButton = useRef(null);
42
41
  useEffect(function () {
43
- var _wrapperRef$current, _wrapperRef$current2;
42
+ var _wrapperRef$current;
44
43
 
45
- wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelectorAll('.em-ds-app-picker__row').forEach(function (row) {
46
- var _allButtons$current2, _allButtons$current4, _allButtons$current6;
47
-
48
- if (row.children[0] && !row.children[0].hasAttribute('disabled')) {
49
- var _allButtons$current;
50
-
51
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current = allButtons.current) === null || _allButtons$current === void 0 ? void 0 : _allButtons$current.push(row.children[0]);
52
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current2 = allButtons.current) === null || _allButtons$current2 === void 0 ? void 0 : _allButtons$current2.push(null);
53
-
54
- if (row.children[1] && !row.children[1].hasAttribute('disabled')) {
55
- var _allButtons$current3;
56
-
57
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current3 = allButtons.current) === null || _allButtons$current3 === void 0 ? void 0 : _allButtons$current3.push(row.children[1]);
58
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current4 = allButtons.current) === null || _allButtons$current4 === void 0 ? void 0 : _allButtons$current4.push(null);
59
-
60
- if (row.children[2] && !row.children[2].hasAttribute('disabled')) {
61
- var _allButtons$current5;
62
-
63
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current5 = allButtons.current) === null || _allButtons$current5 === void 0 ? void 0 : _allButtons$current5.push(row.children[2]);
64
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current6 = allButtons.current) === null || _allButtons$current6 === void 0 ? void 0 : _allButtons$current6.push(null);
65
- });
66
- wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelectorAll('button').forEach(function (e, index) {
44
+ wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelectorAll('button').forEach(function (e, index) {
67
45
  if (!e.hasAttribute('disabled')) {
68
46
  var _allFocusableButtons$;
69
47
 
@@ -76,125 +54,47 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
76
54
  });
77
55
 
78
56
  if (selectedButton.current) {
79
- var _wrapperRef$current3;
57
+ var _wrapperRef$current2;
80
58
 
81
- wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current3 = wrapperRef.current) === null || _wrapperRef$current3 === void 0 ? void 0 : _wrapperRef$current3.querySelectorAll('button')[selectedButton.current].focus();
59
+ wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelectorAll('button')[selectedButton.current].focus();
82
60
  } else {
83
61
  var _allFocusableButtons$2;
84
62
 
85
63
  allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$2 = allFocusableButtons.current[0]) === null || _allFocusableButtons$2 === void 0 ? void 0 : _allFocusableButtons$2.focus();
86
64
  }
87
- }, [wrapperRef]);
88
- var move = useCallback(function (position, offset) {
89
- var newPosition = position + offset;
90
-
91
- if (position + offset < 0) {
92
- newPosition = allButtons.current.length + position + offset;
93
- }
94
-
95
- if (position + offset > allButtons.current.length - 1) {
96
- newPosition = position - allButtons.current.length;
97
- }
98
-
99
- var element = allButtons.current[newPosition];
100
-
101
- if (element) {
102
- return element.focus();
103
- }
104
-
105
- return move(newPosition, offset);
106
- }, []); // eslint-disable-next-line max-statements
65
+ }, [wrapperRef]); // eslint-disable-next-line max-statements
107
66
 
108
67
  var handleKeyDown = function handleKeyDown(e) {
109
- var _triggerRef$current, _allFocusableButtons$3, _allFocusableButtons$4;
68
+ var _triggerRef$current;
110
69
 
111
70
  switch (e.key) {
112
- case keys.LEFT:
113
- e.preventDefault();
114
-
115
- for (var index = 0; index < allButtons.current.length; index += 1) {
116
- if ((allButtons === null || allButtons === void 0 ? void 0 : allButtons.current[index]) === e.target) {
117
- move(index, -1);
118
- break;
119
- }
120
- }
121
-
122
- break;
123
-
124
- case keys.RIGHT:
125
- e.preventDefault();
126
-
127
- for (var _index = 0; _index < allButtons.current.length; _index += 1) {
128
- if (allButtons.current[_index] === e.target) {
129
- move(_index, 1);
130
- break;
131
- }
132
- }
133
-
134
- break;
135
-
136
- case keys.UP:
137
- e.preventDefault();
138
-
139
- for (var _index2 = 0; _index2 < allButtons.current.length; _index2 += 1) {
140
- if (allButtons.current[_index2] === e.target) {
141
- move(_index2, -3);
142
- break;
143
- }
144
- }
145
-
146
- break;
147
-
148
- case keys.DOWN:
149
- e.preventDefault();
150
-
151
- for (var _index3 = 0; _index3 < allButtons.current.length; _index3 += 1) {
152
- if (allButtons.current[_index3] === e.target) {
153
- move(_index3, 3);
154
- break;
155
- }
156
- }
157
-
158
- break;
159
-
160
71
  case keys.ESC:
161
72
  triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
162
73
  close();
163
74
  break;
164
75
 
165
- case keys.HOME:
166
- e.preventDefault();
167
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$3 = allFocusableButtons.current[0]) === null || _allFocusableButtons$3 === void 0 ? void 0 : _allFocusableButtons$3.focus();
168
- break;
169
-
170
- case keys.END:
171
- e.preventDefault();
172
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[allFocusableButtons.current.length - 1]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
173
- break;
174
-
175
76
  case keys.TAB:
176
77
  if (e.shiftKey) {
177
78
  if (e.target === allFocusableButtons.current[0]) {
178
- var _allFocusableButtons$5;
79
+ var _allFocusableButtons$3;
179
80
 
180
81
  e.preventDefault();
181
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$5 = allFocusableButtons.current[allFocusableButtons.current.length - 1]) === null || _allFocusableButtons$5 === void 0 ? void 0 : _allFocusableButtons$5.focus();
82
+ allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$3 = allFocusableButtons.current[allFocusableButtons.current.length - 1]) === null || _allFocusableButtons$3 === void 0 ? void 0 : _allFocusableButtons$3.focus();
182
83
  }
183
84
  } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {
184
- var _allFocusableButtons$6;
85
+ var _allFocusableButtons$4;
185
86
 
186
87
  e.preventDefault();
187
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$6 = allFocusableButtons.current[0]) === null || _allFocusableButtons$6 === void 0 ? void 0 : _allFocusableButtons$6.focus();
88
+ allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[0]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
188
89
  }
189
90
 
190
91
  break;
191
92
  }
192
93
  };
193
94
 
194
- var handleOnClick = function handleOnClick(e, app) {
95
+ var handleOnClick = useCallback(function (e, app) {
195
96
  if (app.onClick) app.onClick(e, app);
196
- };
197
-
97
+ }, []);
198
98
  var handleOnKeyDownWrapper = useCallback(function (e) {
199
99
  if (onKeyDown) onKeyDown(e);
200
100
 
@@ -204,6 +104,7 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
204
104
  }, [onKeyDown, close]);
205
105
 
206
106
  var buildRows = function buildRows(appList) {
107
+ var prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
207
108
  var rows = chunk(appList, 3); // divides array in subarrays of 3 items
208
109
 
209
110
  var formattedRows = rows.map(function (row, index) {
@@ -227,7 +128,9 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
227
128
  "data-testid": "app-picker__chip",
228
129
  "aria-disabled": disabled,
229
130
  disabled: disabled,
230
- "aria-selected": selected
131
+ "aria-selected": selected,
132
+ "aria-setsize": apps.length + customApps.length,
133
+ "aria-posinset": key + prevIndex
231
134
  }, /*#__PURE__*/React.createElement(Icon, {
232
135
  className: "app-picker__icon",
233
136
  size: "m"
@@ -238,23 +141,28 @@ var AppPickerImpl = function AppPickerImpl(_ref2) {
238
141
  };
239
142
 
240
143
  var AppsRows = function AppsRows() {
241
- return buildRows(apps);
144
+ return buildRows(apps, 1);
242
145
  };
243
146
 
244
147
  var CustomRows = function CustomRows() {
245
- return buildRows(customApps);
148
+ return buildRows(customApps, apps.length);
246
149
  };
247
150
 
248
151
  return /*#__PURE__*/React.createElement(Wrapper, {
152
+ role: "listbox",
249
153
  ref: wrapperRef,
250
154
  onKeyDown: handleOnKeyDownWrapper,
251
155
  "data-testid": "app-picker__wrapper"
252
156
  }, /*#__PURE__*/React.createElement(SectionTitle, {
253
- "data-testid": "app-picker__main-title"
157
+ "data-testid": "app-picker__main-title",
158
+ "aria-hidden": true
254
159
  }, sectionTitle), /*#__PURE__*/React.createElement(Grid, {
255
160
  "data-testid": "app-picker__main-grid"
256
- }, /*#__PURE__*/React.createElement(AppsRows, null)), !!customApps.length && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(SectionTitle, {
257
- "data-testid": "app-picker__custom-title"
161
+ }, /*#__PURE__*/React.createElement(AppsRows, null)), !!customApps.length && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, {
162
+ "aria-hidden": true
163
+ }), /*#__PURE__*/React.createElement(SectionTitle, {
164
+ "data-testid": "app-picker__custom-title",
165
+ "aria-hidden": true
258
166
  }, customSectionTitle), /*#__PURE__*/React.createElement(Grid, {
259
167
  "data-testid": "app-picker__custom-grid"
260
168
  }, /*#__PURE__*/React.createElement(CustomRows, null))));
package/esm/AppPickerImpl.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppPickerImpl.js","sources":["../../src/AppPickerImpl.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable no-unused-expressions */\n/* eslint-disable object-curly-newline */\n/* eslint-disable prefer-template */\nimport React, { useEffect, useCallback, useRef } from 'react';\nimport { chunk } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { keys } from './utils';\nimport { DSAppPickerImplType } from './types/AppPickerTypes';\n\nconst blockName = 'app-picker';\nconst Wrapper = aggregatedClasses('div')(blockName, 'wrapper');\nconst Grid = aggregatedClasses('div')(blockName, 'grid');\nconst Row = aggregatedClasses('div')(blockName, 'row');\nconst Chip = aggregatedClasses('button')(blockName, 'chip', ({ disabled, selected }) => ({\n disabled,\n selected,\n}));\nconst ChipLabel = aggregatedClasses('p')(blockName, 'chip-label');\nconst Separator = aggregatedClasses('hr')(blockName, 'separator');\nconst SectionTitle = aggregatedClasses('p')(blockName, 'section-title');\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}) => {\n const allFocusableButtons = useRef([]);\n const allButtons = useRef([]);\n const selectedButton = useRef(null);\n\n useEffect(() => {\n wrapperRef?.current?.querySelectorAll('.em-ds-app-picker__row').forEach((row) => {\n if (row.children[0] && !row.children[0].hasAttribute('disabled')) {\n allButtons?.current?.push(row.children[0]);\n } else allButtons?.current?.push(null);\n if (row.children[1] && !row.children[1].hasAttribute('disabled')) {\n allButtons?.current?.push(row.children[1]);\n } else allButtons?.current?.push(null);\n if (row.children[2] && !row.children[2].hasAttribute('disabled')) {\n allButtons?.current?.push(row.children[2]);\n } else allButtons?.current?.push(null);\n });\n\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 }, [wrapperRef]);\n\n const move = useCallback((position, offset) => {\n let newPosition = position + offset;\n if (position + offset < 0) {\n newPosition = allButtons.current.length + position + offset;\n }\n\n if (position + offset > allButtons.current.length - 1) {\n newPosition = position - allButtons.current.length;\n }\n const element = allButtons.current[newPosition];\n if (element) {\n return element.focus();\n }\n return move(newPosition, offset);\n }, []);\n // eslint-disable-next-line max-statements\n const handleKeyDown = (e) => {\n switch (e.key) {\n case keys.LEFT:\n e.preventDefault();\n for (let index = 0; index < allButtons.current.length; index += 1) {\n if (allButtons?.current[index] === e.target) {\n move(index, -1);\n break;\n }\n }\n break;\n case keys.RIGHT:\n e.preventDefault();\n for (let index = 0; index < allButtons.current.length; index += 1) {\n if (allButtons.current[index] === e.target) {\n move(index, 1);\n break;\n }\n }\n break;\n case keys.UP:\n e.preventDefault();\n for (let index = 0; index < allButtons.current.length; index += 1) {\n if (allButtons.current[index] === e.target) {\n move(index, -3);\n break;\n }\n }\n break;\n case keys.DOWN:\n e.preventDefault();\n for (let index = 0; index < allButtons.current.length; index += 1) {\n if (allButtons.current[index] === e.target) {\n move(index, 3);\n break;\n }\n }\n break;\n case keys.ESC:\n triggerRef?.current?.focus();\n close();\n break;\n case keys.HOME:\n e.preventDefault();\n allFocusableButtons?.current[0]?.focus();\n break;\n case keys.END:\n e.preventDefault();\n allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();\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\n const handleOnClick = (e, app) => {\n if (app.onClick) app.onClick(e, app);\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 buildRows = (appList) => {\n const rows = chunk(appList, 3); // divides array in subarrays of 3 items\n const formattedRows = rows.map((row, index) => (\n <Row key={index}>\n {row.map((app, key) => {\n const { label, disabled, selected, icon: Icon } = app;\n return (\n <Chip\n key={key}\n classProps={{ disabled, selected }}\n onClick={(e) => handleOnClick(e, app)}\n onKeyDown={handleKeyDown}\n data-testid=\"app-picker__chip\"\n aria-disabled={disabled}\n disabled={disabled}\n aria-selected={selected}\n >\n <Icon className=\"app-picker__icon\" size=\"m\" />\n <ChipLabel>{label}</ChipLabel>\n </Chip>\n );\n })}\n </Row>\n ));\n return formattedRows;\n };\n\n const AppsRows = () => buildRows(apps);\n const CustomRows = () => buildRows(customApps);\n\n return (\n <Wrapper ref={wrapperRef} onKeyDown={handleOnKeyDownWrapper} data-testid=\"app-picker__wrapper\">\n <SectionTitle data-testid=\"app-picker__main-title\">{sectionTitle}</SectionTitle>\n <Grid data-testid=\"app-picker__main-grid\">\n <AppsRows />\n </Grid>\n {!!customApps.length && (\n <>\n <Separator />\n <SectionTitle data-testid=\"app-picker__custom-title\">{customSectionTitle}</SectionTitle>\n <Grid data-testid=\"app-picker__custom-grid\">\n <CustomRows />\n </Grid>\n </>\n )}\n </Wrapper>\n );\n};\n\nexport default AppPickerImpl;\n"],"names":["blockName","Wrapper","aggregatedClasses","Grid","Row","Chip","disabled","selected","ChipLabel","Separator","SectionTitle","AppPickerImpl","apps","customApps","sectionTitle","customSectionTitle","close","wrapperRef","onKeyDown","triggerRef","allFocusableButtons","useRef","allButtons","selectedButton","useEffect","current","querySelectorAll","forEach","row","children","hasAttribute","push","e","index","getAttribute","focus","move","useCallback","position","offset","newPosition","length","element","handleKeyDown","key","keys","LEFT","preventDefault","target","RIGHT","UP","DOWN","ESC","HOME","END","TAB","shiftKey","handleOnClick","app","onClick","handleOnKeyDownWrapper","buildRows","appList","rows","chunk","formattedRows","map","label","Icon","icon","AppsRows","CustomRows"],"mappings":"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"}
1
+ {"version":3,"file":"AppPickerImpl.js","sources":["../../src/AppPickerImpl.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable no-unused-expressions */\n/* eslint-disable object-curly-newline */\n/* eslint-disable prefer-template */\nimport React, { useEffect, useCallback, useRef } from 'react';\nimport { chunk } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { keys } from './utils';\nimport { DSAppPickerImplType } from './types/AppPickerTypes';\n\nconst blockName = 'app-picker';\nconst Wrapper = aggregatedClasses('ul')(blockName, 'wrapper');\nconst Grid = aggregatedClasses('div')(blockName, 'grid');\nconst Row = aggregatedClasses('div')(blockName, 'row');\nconst Chip = aggregatedClasses('button')(blockName, 'chip', ({ disabled, selected }) => ({\n disabled,\n selected,\n}));\nconst ChipLabel = aggregatedClasses('p')(blockName, 'chip-label');\nconst Separator = aggregatedClasses('hr')(blockName, 'separator');\nconst SectionTitle = aggregatedClasses('p')(blockName, 'section-title');\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}) => {\n const allFocusableButtons = useRef([]);\n const selectedButton = useRef(null);\n\n useEffect(() => {\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 }, [wrapperRef]);\n\n // eslint-disable-next-line max-statements\n const handleKeyDown = (e) => {\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\n const handleOnClick = useCallback((e, app) => {\n if (app.onClick) app.onClick(e, app);\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 buildRows = (appList, prevIndex = 0) => {\n const rows = chunk(appList, 3); // divides array in subarrays of 3 items\n const formattedRows = rows.map((row, index) => (\n <Row key={index}>\n {row.map((app, key) => {\n const { label, disabled, selected, icon: Icon } = app;\n return (\n <Chip\n key={key}\n classProps={{ disabled, selected }}\n onClick={(e) => handleOnClick(e, app)}\n onKeyDown={handleKeyDown}\n data-testid=\"app-picker__chip\"\n aria-disabled={disabled}\n disabled={disabled}\n aria-selected={selected}\n aria-setsize={apps.length + customApps.length}\n aria-posinset={key + prevIndex}\n >\n <Icon className=\"app-picker__icon\" size=\"m\" />\n <ChipLabel>{label}</ChipLabel>\n </Chip>\n );\n })}\n </Row>\n ));\n return formattedRows;\n };\n\n const AppsRows = () => buildRows(apps, 1);\n const CustomRows = () => buildRows(customApps, apps.length);\n\n return (\n <Wrapper role=\"listbox\" ref={wrapperRef} onKeyDown={handleOnKeyDownWrapper} data-testid=\"app-picker__wrapper\">\n <SectionTitle data-testid=\"app-picker__main-title\" aria-hidden>\n {sectionTitle}\n </SectionTitle>\n <Grid data-testid=\"app-picker__main-grid\">\n <AppsRows />\n </Grid>\n {!!customApps.length && (\n <>\n <Separator aria-hidden />\n <SectionTitle data-testid=\"app-picker__custom-title\" aria-hidden>\n {customSectionTitle}\n </SectionTitle>\n <Grid data-testid=\"app-picker__custom-grid\">\n <CustomRows />\n </Grid>\n </>\n )}\n </Wrapper>\n );\n};\n\nexport default AppPickerImpl;\n"],"names":["blockName","Wrapper","aggregatedClasses","Grid","Row","Chip","disabled","selected","ChipLabel","Separator","SectionTitle","AppPickerImpl","apps","customApps","sectionTitle","customSectionTitle","close","wrapperRef","onKeyDown","triggerRef","allFocusableButtons","useRef","selectedButton","useEffect","current","querySelectorAll","forEach","e","index","hasAttribute","push","getAttribute","focus","handleKeyDown","key","keys","ESC","TAB","shiftKey","target","preventDefault","length","handleOnClick","useCallback","app","onClick","handleOnKeyDownWrapper","buildRows","appList","prevIndex","rows","chunk","formattedRows","map","row","label","Icon","icon","AppsRows","CustomRows"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-app-picker",
3
- "version": "1.55.0-next.8",
3
+ "version": "1.55.0-rc.2",
4
4
  "license": "MIT",
5
5
  "description": "Ellie Mae - Dim Sum - App Picker",
6
6
  "module": "esm/index.js",
@@ -16,10 +16,11 @@
16
16
  "build": "node ../../scripts/build/build.js"
17
17
  },
18
18
  "dependencies": {
19
- "@elliemae/ds-button": "1.55.0-next.8",
20
- "@elliemae/ds-classnames": "1.55.0-next.8",
21
- "@elliemae/ds-icons": "1.55.0-next.8",
22
- "@elliemae/ds-popover": "1.55.0-next.8",
19
+ "@elliemae/ds-button": "1.55.0-rc.2",
20
+ "@elliemae/ds-classnames": "1.55.0-rc.2",
21
+ "@elliemae/ds-icons": "1.55.0-rc.2",
22
+ "@elliemae/ds-popover": "1.55.0-rc.2",
23
+ "@elliemae/ds-utilities": "1.55.0-rc.2",
23
24
  "react-desc": "^4.1.2"
24
25
  },
25
26
  "peerDependencies": {