@elliemae/ds-app-picker 2.0.0-alpha.9 → 2.0.0-next.4

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 (7) hide show
  1. package/cjs/AppPickerImpl.js +27 -120
  2. package/cjs/DSAppPicker.js +1 -0
  3. package/esm/AppPickerImpl.js +27 -120
  4. package/esm/DSAppPicker.js +1 -0
  5. package/package.json +5 -5
  6. package/cjs/package.json +0 -7
  7. package/esm/package.json +0 -7
package/cjs/AppPickerImpl.js CHANGED
@@ -13,7 +13,7 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
13
13
 
14
14
  var _Separator;
15
15
  const blockName = 'app-picker';
16
- const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper');
16
+ const Wrapper = dsClassnames.aggregatedClasses('ul')(blockName, 'wrapper');
17
17
  const Grid = dsClassnames.aggregatedClasses('div')(blockName, 'grid');
18
18
  const Row = dsClassnames.aggregatedClasses('div')(blockName, 'row');
19
19
  const Chip = dsClassnames.aggregatedClasses('button')(blockName, 'chip', ({
@@ -38,33 +38,11 @@ const AppPickerImpl = ({
38
38
  triggerRef
39
39
  }) => {
40
40
  const allFocusableButtons = react.useRef([]);
41
- const allButtons = react.useRef([]);
42
41
  const selectedButton = react.useRef(null);
43
42
  react.useEffect(() => {
44
- var _wrapperRef$current, _wrapperRef$current2;
43
+ var _wrapperRef$current;
45
44
 
46
- 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(row => {
47
- var _allButtons$current2, _allButtons$current4, _allButtons$current6;
48
-
49
- if (row.children[0] && !row.children[0].hasAttribute('disabled')) {
50
- var _allButtons$current;
51
-
52
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current = allButtons.current) === null || _allButtons$current === void 0 ? void 0 : _allButtons$current.push(row.children[0]);
53
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current2 = allButtons.current) === null || _allButtons$current2 === void 0 ? void 0 : _allButtons$current2.push(null);
54
-
55
- if (row.children[1] && !row.children[1].hasAttribute('disabled')) {
56
- var _allButtons$current3;
57
-
58
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current3 = allButtons.current) === null || _allButtons$current3 === void 0 ? void 0 : _allButtons$current3.push(row.children[1]);
59
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current4 = allButtons.current) === null || _allButtons$current4 === void 0 ? void 0 : _allButtons$current4.push(null);
60
-
61
- if (row.children[2] && !row.children[2].hasAttribute('disabled')) {
62
- var _allButtons$current5;
63
-
64
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current5 = allButtons.current) === null || _allButtons$current5 === void 0 ? void 0 : _allButtons$current5.push(row.children[2]);
65
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current6 = allButtons.current) === null || _allButtons$current6 === void 0 ? void 0 : _allButtons$current6.push(null);
66
- });
67
- wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelectorAll('button').forEach((e, index) => {
45
+ wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelectorAll('button').forEach((e, index) => {
68
46
  if (!e.hasAttribute('disabled')) {
69
47
  var _allFocusableButtons$;
70
48
 
@@ -77,125 +55,47 @@ const AppPickerImpl = ({
77
55
  });
78
56
 
79
57
  if (selectedButton.current) {
80
- var _wrapperRef$current3;
58
+ var _wrapperRef$current2;
81
59
 
82
- 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();
60
+ 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();
83
61
  } else {
84
62
  var _allFocusableButtons$2;
85
63
 
86
64
  allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$2 = allFocusableButtons.current[0]) === null || _allFocusableButtons$2 === void 0 ? void 0 : _allFocusableButtons$2.focus();
87
65
  }
88
- }, [wrapperRef]);
89
- const move = react.useCallback((position, offset) => {
90
- let newPosition = position + offset;
91
-
92
- if (position + offset < 0) {
93
- newPosition = allButtons.current.length + position + offset;
94
- }
95
-
96
- if (position + offset > allButtons.current.length - 1) {
97
- newPosition = position - allButtons.current.length;
98
- }
99
-
100
- const element = allButtons.current[newPosition];
101
-
102
- if (element) {
103
- return element.focus();
104
- }
105
-
106
- return move(newPosition, offset);
107
- }, []); // eslint-disable-next-line max-statements
66
+ }, [wrapperRef]); // eslint-disable-next-line max-statements
108
67
 
109
68
  const handleKeyDown = e => {
110
- var _triggerRef$current, _allFocusableButtons$3, _allFocusableButtons$4;
69
+ var _triggerRef$current;
111
70
 
112
71
  switch (e.key) {
113
- case utils.keys.LEFT:
114
- e.preventDefault();
115
-
116
- for (let index = 0; index < allButtons.current.length; index += 1) {
117
- if ((allButtons === null || allButtons === void 0 ? void 0 : allButtons.current[index]) === e.target) {
118
- move(index, -1);
119
- break;
120
- }
121
- }
122
-
123
- break;
124
-
125
- case utils.keys.RIGHT:
126
- e.preventDefault();
127
-
128
- for (let index = 0; index < allButtons.current.length; index += 1) {
129
- if (allButtons.current[index] === e.target) {
130
- move(index, 1);
131
- break;
132
- }
133
- }
134
-
135
- break;
136
-
137
- case utils.keys.UP:
138
- e.preventDefault();
139
-
140
- for (let index = 0; index < allButtons.current.length; index += 1) {
141
- if (allButtons.current[index] === e.target) {
142
- move(index, -3);
143
- break;
144
- }
145
- }
146
-
147
- break;
148
-
149
- case utils.keys.DOWN:
150
- e.preventDefault();
151
-
152
- for (let index = 0; index < allButtons.current.length; index += 1) {
153
- if (allButtons.current[index] === e.target) {
154
- move(index, 3);
155
- break;
156
- }
157
- }
158
-
159
- break;
160
-
161
72
  case utils.keys.ESC:
162
73
  triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
163
74
  close();
164
75
  break;
165
76
 
166
- case utils.keys.HOME:
167
- e.preventDefault();
168
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$3 = allFocusableButtons.current[0]) === null || _allFocusableButtons$3 === void 0 ? void 0 : _allFocusableButtons$3.focus();
169
- break;
170
-
171
- case utils.keys.END:
172
- e.preventDefault();
173
- 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();
174
- break;
175
-
176
77
  case utils.keys.TAB:
177
78
  if (e.shiftKey) {
178
79
  if (e.target === allFocusableButtons.current[0]) {
179
- var _allFocusableButtons$5;
80
+ var _allFocusableButtons$3;
180
81
 
181
82
  e.preventDefault();
182
- 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();
83
+ 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();
183
84
  }
184
85
  } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {
185
- var _allFocusableButtons$6;
86
+ var _allFocusableButtons$4;
186
87
 
187
88
  e.preventDefault();
188
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$6 = allFocusableButtons.current[0]) === null || _allFocusableButtons$6 === void 0 ? void 0 : _allFocusableButtons$6.focus();
89
+ allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[0]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
189
90
  }
190
91
 
191
92
  break;
192
93
  }
193
94
  };
194
95
 
195
- const handleOnClick = (e, app) => {
96
+ const handleOnClick = react.useCallback((e, app) => {
196
97
  if (app.onClick) app.onClick(e, app);
197
- };
198
-
98
+ }, []);
199
99
  const handleOnKeyDownWrapper = react.useCallback(e => {
200
100
  if (onKeyDown) onKeyDown(e);
201
101
 
@@ -204,7 +104,7 @@ const AppPickerImpl = ({
204
104
  }
205
105
  }, [onKeyDown, close]);
206
106
 
207
- const buildRows = appList => {
107
+ const buildRows = (appList, prevIndex = 0) => {
208
108
  const rows = lodash.chunk(appList, 3); // divides array in subarrays of 3 items
209
109
 
210
110
  const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx__default["default"](Row, {}, index, row.map((app, key) => {
@@ -224,7 +124,9 @@ const AppPickerImpl = ({
224
124
  "data-testid": "app-picker__chip",
225
125
  "aria-disabled": disabled,
226
126
  disabled: disabled,
227
- "aria-selected": selected
127
+ "aria-selected": selected,
128
+ "aria-setsize": apps.length + customApps.length,
129
+ "aria-posinset": key + prevIndex
228
130
  }, key, /*#__PURE__*/_jsx__default["default"](Icon, {
229
131
  className: "app-picker__icon",
230
132
  size: "m"
@@ -233,21 +135,26 @@ const AppPickerImpl = ({
233
135
  return formattedRows;
234
136
  };
235
137
 
236
- const AppsRows = () => buildRows(apps);
138
+ const AppsRows = () => buildRows(apps, 1);
237
139
 
238
- const CustomRows = () => buildRows(customApps);
140
+ const CustomRows = () => buildRows(customApps, apps.length);
239
141
 
240
142
  return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, {
143
+ role: "listbox",
241
144
  ref: wrapperRef,
242
145
  onKeyDown: handleOnKeyDownWrapper,
243
146
  "data-testid": "app-picker__wrapper",
244
147
  children: [/*#__PURE__*/_jsx__default["default"](SectionTitle, {
245
- "data-testid": "app-picker__main-title"
148
+ "data-testid": "app-picker__main-title",
149
+ "aria-hidden": true
246
150
  }, void 0, sectionTitle), /*#__PURE__*/_jsx__default["default"](Grid, {
247
151
  "data-testid": "app-picker__main-grid"
248
152
  }, void 0, /*#__PURE__*/_jsx__default["default"](AppsRows, {})), !!customApps.length && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
249
- children: [_Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](Separator, {})), /*#__PURE__*/_jsx__default["default"](SectionTitle, {
250
- "data-testid": "app-picker__custom-title"
153
+ children: [_Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](Separator, {
154
+ "aria-hidden": true
155
+ })), /*#__PURE__*/_jsx__default["default"](SectionTitle, {
156
+ "data-testid": "app-picker__custom-title",
157
+ "aria-hidden": true
251
158
  }, void 0, customSectionTitle), /*#__PURE__*/_jsx__default["default"](Grid, {
252
159
  "data-testid": "app-picker__custom-grid"
253
160
  }, void 0, /*#__PURE__*/_jsx__default["default"](CustomRows, {}))]
package/cjs/DSAppPicker.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _jsx = require('@babel/runtime/helpers/jsx');
6
+ require('core-js/modules/web.dom-collections.iterator.js');
6
7
  var react = require('react');
7
8
  var reactDesc = require('react-desc');
8
9
  var MenuPicker = require('@elliemae/ds-icons/MenuPicker');
package/esm/AppPickerImpl.js CHANGED
@@ -7,7 +7,7 @@ import { jsxs, Fragment } from 'react/jsx-runtime';
7
7
 
8
8
  var _Separator;
9
9
  const blockName = 'app-picker';
10
- const Wrapper = aggregatedClasses('div')(blockName, 'wrapper');
10
+ const Wrapper = aggregatedClasses('ul')(blockName, 'wrapper');
11
11
  const Grid = aggregatedClasses('div')(blockName, 'grid');
12
12
  const Row = aggregatedClasses('div')(blockName, 'row');
13
13
  const Chip = aggregatedClasses('button')(blockName, 'chip', ({
@@ -32,33 +32,11 @@ const AppPickerImpl = ({
32
32
  triggerRef
33
33
  }) => {
34
34
  const allFocusableButtons = useRef([]);
35
- const allButtons = useRef([]);
36
35
  const selectedButton = useRef(null);
37
36
  useEffect(() => {
38
- var _wrapperRef$current, _wrapperRef$current2;
37
+ var _wrapperRef$current;
39
38
 
40
- 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(row => {
41
- var _allButtons$current2, _allButtons$current4, _allButtons$current6;
42
-
43
- if (row.children[0] && !row.children[0].hasAttribute('disabled')) {
44
- var _allButtons$current;
45
-
46
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current = allButtons.current) === null || _allButtons$current === void 0 ? void 0 : _allButtons$current.push(row.children[0]);
47
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current2 = allButtons.current) === null || _allButtons$current2 === void 0 ? void 0 : _allButtons$current2.push(null);
48
-
49
- if (row.children[1] && !row.children[1].hasAttribute('disabled')) {
50
- var _allButtons$current3;
51
-
52
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current3 = allButtons.current) === null || _allButtons$current3 === void 0 ? void 0 : _allButtons$current3.push(row.children[1]);
53
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current4 = allButtons.current) === null || _allButtons$current4 === void 0 ? void 0 : _allButtons$current4.push(null);
54
-
55
- if (row.children[2] && !row.children[2].hasAttribute('disabled')) {
56
- var _allButtons$current5;
57
-
58
- allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current5 = allButtons.current) === null || _allButtons$current5 === void 0 ? void 0 : _allButtons$current5.push(row.children[2]);
59
- } else allButtons === null || allButtons === void 0 ? void 0 : (_allButtons$current6 = allButtons.current) === null || _allButtons$current6 === void 0 ? void 0 : _allButtons$current6.push(null);
60
- });
61
- wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.querySelectorAll('button').forEach((e, index) => {
39
+ wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelectorAll('button').forEach((e, index) => {
62
40
  if (!e.hasAttribute('disabled')) {
63
41
  var _allFocusableButtons$;
64
42
 
@@ -71,125 +49,47 @@ const AppPickerImpl = ({
71
49
  });
72
50
 
73
51
  if (selectedButton.current) {
74
- var _wrapperRef$current3;
52
+ var _wrapperRef$current2;
75
53
 
76
- 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();
54
+ 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();
77
55
  } else {
78
56
  var _allFocusableButtons$2;
79
57
 
80
58
  allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$2 = allFocusableButtons.current[0]) === null || _allFocusableButtons$2 === void 0 ? void 0 : _allFocusableButtons$2.focus();
81
59
  }
82
- }, [wrapperRef]);
83
- const move = useCallback((position, offset) => {
84
- let newPosition = position + offset;
85
-
86
- if (position + offset < 0) {
87
- newPosition = allButtons.current.length + position + offset;
88
- }
89
-
90
- if (position + offset > allButtons.current.length - 1) {
91
- newPosition = position - allButtons.current.length;
92
- }
93
-
94
- const element = allButtons.current[newPosition];
95
-
96
- if (element) {
97
- return element.focus();
98
- }
99
-
100
- return move(newPosition, offset);
101
- }, []); // eslint-disable-next-line max-statements
60
+ }, [wrapperRef]); // eslint-disable-next-line max-statements
102
61
 
103
62
  const handleKeyDown = e => {
104
- var _triggerRef$current, _allFocusableButtons$3, _allFocusableButtons$4;
63
+ var _triggerRef$current;
105
64
 
106
65
  switch (e.key) {
107
- case keys.LEFT:
108
- e.preventDefault();
109
-
110
- for (let index = 0; index < allButtons.current.length; index += 1) {
111
- if ((allButtons === null || allButtons === void 0 ? void 0 : allButtons.current[index]) === e.target) {
112
- move(index, -1);
113
- break;
114
- }
115
- }
116
-
117
- break;
118
-
119
- case keys.RIGHT:
120
- e.preventDefault();
121
-
122
- for (let index = 0; index < allButtons.current.length; index += 1) {
123
- if (allButtons.current[index] === e.target) {
124
- move(index, 1);
125
- break;
126
- }
127
- }
128
-
129
- break;
130
-
131
- case keys.UP:
132
- e.preventDefault();
133
-
134
- for (let index = 0; index < allButtons.current.length; index += 1) {
135
- if (allButtons.current[index] === e.target) {
136
- move(index, -3);
137
- break;
138
- }
139
- }
140
-
141
- break;
142
-
143
- case keys.DOWN:
144
- e.preventDefault();
145
-
146
- for (let index = 0; index < allButtons.current.length; index += 1) {
147
- if (allButtons.current[index] === e.target) {
148
- move(index, 3);
149
- break;
150
- }
151
- }
152
-
153
- break;
154
-
155
66
  case keys.ESC:
156
67
  triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
157
68
  close();
158
69
  break;
159
70
 
160
- case keys.HOME:
161
- e.preventDefault();
162
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$3 = allFocusableButtons.current[0]) === null || _allFocusableButtons$3 === void 0 ? void 0 : _allFocusableButtons$3.focus();
163
- break;
164
-
165
- case keys.END:
166
- e.preventDefault();
167
- 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();
168
- break;
169
-
170
71
  case keys.TAB:
171
72
  if (e.shiftKey) {
172
73
  if (e.target === allFocusableButtons.current[0]) {
173
- var _allFocusableButtons$5;
74
+ var _allFocusableButtons$3;
174
75
 
175
76
  e.preventDefault();
176
- 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();
77
+ 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();
177
78
  }
178
79
  } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {
179
- var _allFocusableButtons$6;
80
+ var _allFocusableButtons$4;
180
81
 
181
82
  e.preventDefault();
182
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$6 = allFocusableButtons.current[0]) === null || _allFocusableButtons$6 === void 0 ? void 0 : _allFocusableButtons$6.focus();
83
+ allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[0]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
183
84
  }
184
85
 
185
86
  break;
186
87
  }
187
88
  };
188
89
 
189
- const handleOnClick = (e, app) => {
90
+ const handleOnClick = useCallback((e, app) => {
190
91
  if (app.onClick) app.onClick(e, app);
191
- };
192
-
92
+ }, []);
193
93
  const handleOnKeyDownWrapper = useCallback(e => {
194
94
  if (onKeyDown) onKeyDown(e);
195
95
 
@@ -198,7 +98,7 @@ const AppPickerImpl = ({
198
98
  }
199
99
  }, [onKeyDown, close]);
200
100
 
201
- const buildRows = appList => {
101
+ const buildRows = (appList, prevIndex = 0) => {
202
102
  const rows = chunk(appList, 3); // divides array in subarrays of 3 items
203
103
 
204
104
  const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx(Row, {}, index, row.map((app, key) => {
@@ -218,7 +118,9 @@ const AppPickerImpl = ({
218
118
  "data-testid": "app-picker__chip",
219
119
  "aria-disabled": disabled,
220
120
  disabled: disabled,
221
- "aria-selected": selected
121
+ "aria-selected": selected,
122
+ "aria-setsize": apps.length + customApps.length,
123
+ "aria-posinset": key + prevIndex
222
124
  }, key, /*#__PURE__*/_jsx(Icon, {
223
125
  className: "app-picker__icon",
224
126
  size: "m"
@@ -227,21 +129,26 @@ const AppPickerImpl = ({
227
129
  return formattedRows;
228
130
  };
229
131
 
230
- const AppsRows = () => buildRows(apps);
132
+ const AppsRows = () => buildRows(apps, 1);
231
133
 
232
- const CustomRows = () => buildRows(customApps);
134
+ const CustomRows = () => buildRows(customApps, apps.length);
233
135
 
234
136
  return /*#__PURE__*/jsxs(Wrapper, {
137
+ role: "listbox",
235
138
  ref: wrapperRef,
236
139
  onKeyDown: handleOnKeyDownWrapper,
237
140
  "data-testid": "app-picker__wrapper",
238
141
  children: [/*#__PURE__*/_jsx(SectionTitle, {
239
- "data-testid": "app-picker__main-title"
142
+ "data-testid": "app-picker__main-title",
143
+ "aria-hidden": true
240
144
  }, void 0, sectionTitle), /*#__PURE__*/_jsx(Grid, {
241
145
  "data-testid": "app-picker__main-grid"
242
146
  }, void 0, /*#__PURE__*/_jsx(AppsRows, {})), !!customApps.length && /*#__PURE__*/jsxs(Fragment, {
243
- children: [_Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {})), /*#__PURE__*/_jsx(SectionTitle, {
244
- "data-testid": "app-picker__custom-title"
147
+ children: [_Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {
148
+ "aria-hidden": true
149
+ })), /*#__PURE__*/_jsx(SectionTitle, {
150
+ "data-testid": "app-picker__custom-title",
151
+ "aria-hidden": true
245
152
  }, void 0, customSectionTitle), /*#__PURE__*/_jsx(Grid, {
246
153
  "data-testid": "app-picker__custom-grid"
247
154
  }, void 0, /*#__PURE__*/_jsx(CustomRows, {}))]
package/esm/DSAppPicker.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import 'core-js/modules/web.dom-collections.iterator.js';
2
3
  import { useState, useRef, useEffect } from 'react';
3
4
  import { describe } from 'react-desc';
4
5
  import MenuPicker from '@elliemae/ds-icons/MenuPicker';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-app-picker",
3
- "version": "2.0.0-alpha.9",
3
+ "version": "2.0.0-next.4",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - App Picker",
6
6
  "module": "./esm/index.js",
@@ -52,10 +52,10 @@
52
52
  "build": "node ../../scripts/build/build.js"
53
53
  },
54
54
  "dependencies": {
55
- "@elliemae/ds-button": "2.0.0-alpha.9",
56
- "@elliemae/ds-classnames": "2.0.0-alpha.9",
57
- "@elliemae/ds-icons": "2.0.0-alpha.9",
58
- "@elliemae/ds-popover": "2.0.0-alpha.9",
55
+ "@elliemae/ds-button": "2.0.0-next.4",
56
+ "@elliemae/ds-classnames": "2.0.0-next.4",
57
+ "@elliemae/ds-icons": "2.0.0-next.4",
58
+ "@elliemae/ds-popover": "2.0.0-next.4",
59
59
  "react-desc": "^4.1.3"
60
60
  },
61
61
  "peerDependencies": {
package/cjs/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "commonjs",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }
package/esm/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "module",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }