@elliemae/ds-app-picker 2.4.2-rc.3 → 2.4.3-rc.0

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 +10 -24
  2. package/cjs/DSAppPicker.js +0 -1
  3. package/cjs/styles.js +173 -37
  4. package/esm/AppPickerImpl.js +10 -24
  5. package/esm/DSAppPicker.js +0 -1
  6. package/esm/styles.js +173 -33
  7. package/package.json +8 -8
package/cjs/AppPickerImpl.js CHANGED
@@ -3,13 +3,13 @@
3
3
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
4
  var _jsx = require('@babel/runtime/helpers/jsx');
5
5
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
6
- require('core-js/modules/esnext.async-iterator.for-each.js');
7
- require('core-js/modules/esnext.iterator.constructor.js');
8
- require('core-js/modules/esnext.iterator.for-each.js');
9
6
  require('core-js/modules/esnext.async-iterator.map.js');
10
7
  require('core-js/modules/esnext.iterator.map.js');
11
8
  require('core-js/modules/esnext.async-iterator.filter.js');
9
+ require('core-js/modules/esnext.iterator.constructor.js');
12
10
  require('core-js/modules/esnext.iterator.filter.js');
11
+ require('core-js/modules/esnext.async-iterator.for-each.js');
12
+ require('core-js/modules/esnext.iterator.for-each.js');
13
13
  var react = require('react');
14
14
  var dsPropsHelpers = require('@elliemae/ds-props-helpers');
15
15
  var lodash = require('lodash');
@@ -47,13 +47,9 @@ const AppPickerImpl = _ref => {
47
47
  const allFocusableButtons = react.useRef([]);
48
48
  const selectedButton = react.useRef(null);
49
49
  react.useEffect(() => {
50
- var _wrapperRef$current;
51
-
52
- 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) => {
50
+ wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {
53
51
  if (!e.hasAttribute('disabled')) {
54
- var _allFocusableButtons$;
55
-
56
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$ = allFocusableButtons.current) === null || _allFocusableButtons$ === void 0 ? void 0 : _allFocusableButtons$.push(e);
52
+ allFocusableButtons?.current?.push(e);
57
53
  }
58
54
 
59
55
  if (e.getAttribute('aria-selected') === 'true') {
@@ -62,38 +58,28 @@ const AppPickerImpl = _ref => {
62
58
  });
63
59
 
64
60
  if (selectedButton.current) {
65
- var _wrapperRef$current2;
66
-
67
- 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();
61
+ wrapperRef?.current?.querySelectorAll('button')[selectedButton.current].focus();
68
62
  } else {
69
- var _allFocusableButtons$2;
70
-
71
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$2 = allFocusableButtons.current[0]) === null || _allFocusableButtons$2 === void 0 ? void 0 : _allFocusableButtons$2.focus();
63
+ allFocusableButtons?.current[0]?.focus();
72
64
  }
73
65
  }, [wrapperRef]); // eslint-disable-next-line max-statements
74
66
 
75
67
  const handleKeyDown = e => {
76
- var _triggerRef$current;
77
-
78
68
  switch (e.key) {
79
69
  case utils.keys.ESC:
80
- triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
70
+ triggerRef?.current?.focus();
81
71
  close();
82
72
  break;
83
73
 
84
74
  case utils.keys.TAB:
85
75
  if (e.shiftKey) {
86
76
  if (e.target === allFocusableButtons.current[0]) {
87
- var _allFocusableButtons$3;
88
-
89
77
  e.preventDefault();
90
- 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();
78
+ allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();
91
79
  }
92
80
  } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {
93
- var _allFocusableButtons$4;
94
-
95
81
  e.preventDefault();
96
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[0]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
82
+ allFocusableButtons?.current[0]?.focus();
97
83
  }
98
84
 
99
85
  break;
package/cjs/DSAppPicker.js CHANGED
@@ -3,7 +3,6 @@
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');
7
6
  var react = require('react');
8
7
  var reactDesc = require('react-desc');
9
8
  var dsIcons = require('@elliemae/ds-icons');
package/cjs/styles.js CHANGED
@@ -2,158 +2,294 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
5
  var dsSystem = require('@elliemae/ds-system');
7
6
 
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
-
10
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
11
-
12
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
7
+ /* eslint-disable @typescript-eslint/no-unsafe-assignment */
13
8
  const StyledTitle = dsSystem.styled('h3', {
14
9
  name: 'DS-AppPicker',
15
10
  slot: 'title'
16
- })(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n margin: 12px 0 0 0;\n line-height: 1.38;\n text-transform: uppercase;\n"])), _ref => {
11
+ })`
12
+ color: ${_ref => {
17
13
  let {
18
14
  theme
19
15
  } = _ref;
20
16
  return theme.colors.neutral[700];
21
- }, _ref2 => {
17
+ }};
18
+ font-size: ${_ref2 => {
22
19
  let {
23
20
  theme
24
21
  } = _ref2;
25
22
  return theme.fontSizes.value[400];
26
- }, _ref3 => {
23
+ }};
24
+ font-weight: ${_ref3 => {
27
25
  let {
28
26
  theme
29
27
  } = _ref3;
30
28
  return theme.fontWeights.semibold;
31
- });
29
+ }};
30
+ margin: 12px 0 0 0;
31
+ line-height: 1.38;
32
+ text-transform: uppercase;
33
+ `;
32
34
  const StyledWrapper = dsSystem.styled('ul', {
33
35
  name: 'DS-AppPicker',
34
36
  slot: 'root'
35
- })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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: ", ";\n &:focus {\n outline: none;\n }\n"])), _ref4 => {
37
+ })`
38
+ align-items: center;
39
+ min-width: 308px;
40
+ min-height: 110px;
41
+ max-height: 449px;
42
+ width: 308px;
43
+ overflow-y: auto;
44
+ overflow-x: hidden;
45
+ margin: 0;
46
+ padding: ${_ref4 => {
36
47
  let {
37
48
  isOverflow
38
49
  } = _ref4;
39
50
  return isOverflow ? '0 0 0 16px' : '0 16px';
40
- });
51
+ }};
52
+ &:focus {
53
+ outline: none;
54
+ }
55
+ `;
41
56
  const StyledGrid = dsSystem.styled('div', {
42
57
  name: 'DS-AppPicker',
43
58
  slot: 'grid'
44
- })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n margin: 8px 0;\n"])));
59
+ })`
60
+ display: flex;
61
+ flex-direction: column;
62
+ justify-content: center;
63
+ align-items: center;
64
+ width: 100%;
65
+ margin: 8px 0;
66
+ `;
45
67
  const StyledRow = dsSystem.styled('div', {
46
68
  name: 'DS-AppPicker',
47
69
  slot: 'row'
48
- })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n display: flex;\n width: 100%;\n"])));
70
+ })`
71
+ display: flex;
72
+ width: 100%;
73
+ `;
49
74
  const StyledChipLabel = dsSystem.styled('p', {
50
75
  name: 'DS-AppPicker',
51
76
  slot: 'chipLabel'
52
- })(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n font-size: ", ";\n font-weight: ", ";\n word-wrap: break-word;\n margin: 0 6px;\n line-height: 1.45;\n width: 100%;\n z-index: 120;\n\n & span {\n padding-top: 6px;\n }\n"])), _ref5 => {
77
+ })`
78
+ font-size: ${_ref5 => {
53
79
  let {
54
80
  theme
55
81
  } = _ref5;
56
82
  return theme.fontSizes.label[200];
57
- }, _ref6 => {
83
+ }};
84
+ font-weight: ${_ref6 => {
58
85
  let {
59
86
  theme
60
87
  } = _ref6;
61
88
  return theme.fontWeights.semibold;
62
- });
63
- const styledChipSelectedCss = dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n color: ", ";\n background-color: ", ";\n\n .app-picker__icon {\n fill: ", ";\n }\n\n &:before {\n border: 1px solid ", ";\n }\n\n &:focus {\n &:before {\n border: 2px solid ", ";\n }\n }\n"])), _ref7 => {
89
+ }};
90
+ word-wrap: break-word;
91
+ margin: 0 6px;
92
+ line-height: 1.45;
93
+ width: 100%;
94
+ z-index: 120;
95
+
96
+ & span {
97
+ padding-top: 6px;
98
+ }
99
+ `;
100
+ const styledChipSelectedCss = dsSystem.css`
101
+ color: ${_ref7 => {
64
102
  let {
65
103
  theme
66
104
  } = _ref7;
67
105
  return theme.colors.brand[800];
68
- }, _ref8 => {
106
+ }};
107
+ background-color: ${_ref8 => {
69
108
  let {
70
109
  theme
71
110
  } = _ref8;
72
111
  return theme.colors.brand[200];
73
- }, _ref9 => {
112
+ }};
113
+
114
+ .app-picker__icon {
115
+ fill: ${_ref9 => {
74
116
  let {
75
117
  theme
76
118
  } = _ref9;
77
119
  return theme.colors.brand[800];
78
- }, _ref10 => {
120
+ }};
121
+ }
122
+
123
+ &:before {
124
+ border: 1px solid ${_ref10 => {
79
125
  let {
80
126
  theme
81
127
  } = _ref10;
82
128
  return theme.colors.brand[600];
83
- }, _ref11 => {
129
+ }};
130
+ }
131
+
132
+ &:focus {
133
+ &:before {
134
+ border: 2px solid ${_ref11 => {
84
135
  let {
85
136
  theme
86
137
  } = _ref11;
87
138
  return theme.colors.brand[800];
88
- });
139
+ }};
140
+ }
141
+ }
142
+ `;
89
143
  const StyledChip = dsSystem.styled('button', {
90
144
  name: 'DS-AppPicker',
91
145
  slot: 'chip'
92
- })(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: none;\n height: 68px;\n width: 92px;\n background-color: #fff;\n color: ", ";\n cursor: pointer;\n outline: none;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n border: 2px solid transparent;\n }\n\n & .app-picker__icon {\n fill: ", ";\n height: 28px;\n width: 28px;\n }\n\n & .app-picker__icon svg {\n height: 28px;\n width: 28px;\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n .app-picker__icon {\n fill: ", ";\n }\n }\n\n &:focus {\n &:before {\n border-color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n cursor: not-allowed;\n\n .app-picker__icon {\n fill: ", ";\n }\n\n &:focus,\n &:hover {\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ", " {\n color: ", ";\n }\n }\n\n &:hover .app-picker__icon {\n fill: ", ";\n }\n }\n\n ", "\n"])), _ref12 => {
146
+ })`
147
+ position: relative;
148
+ display: flex;
149
+ flex-direction: column;
150
+ align-items: center;
151
+ justify-content: center;
152
+ border: none;
153
+ height: 68px;
154
+ width: 92px;
155
+ background-color: #fff;
156
+ color: ${_ref12 => {
93
157
  let {
94
158
  theme
95
159
  } = _ref12;
96
160
  return theme.colors.brand[600];
97
- }, _ref13 => {
161
+ }};
162
+ cursor: pointer;
163
+ outline: none;
164
+
165
+ &:before {
166
+ content: '';
167
+ position: absolute;
168
+ top: 0;
169
+ left: 0;
170
+ width: 100%;
171
+ height: 100%;
172
+ border-radius: 2px;
173
+ border: 2px solid transparent;
174
+ }
175
+
176
+ & .app-picker__icon {
177
+ fill: ${_ref13 => {
98
178
  let {
99
179
  theme
100
180
  } = _ref13;
101
181
  return theme.colors.brand[600];
102
- }, _ref14 => {
182
+ }};
183
+ height: 28px;
184
+ width: 28px;
185
+ }
186
+
187
+ & .app-picker__icon svg {
188
+ height: 28px;
189
+ width: 28px;
190
+ }
191
+
192
+ &:hover {
193
+ color: ${_ref14 => {
103
194
  let {
104
195
  theme
105
196
  } = _ref14;
106
197
  return theme.colors.brand[800];
107
- }, _ref15 => {
198
+ }};
199
+ background-color: ${_ref15 => {
108
200
  let {
109
201
  theme
110
202
  } = _ref15;
111
203
  return theme.colors.brand[200];
112
- }, _ref16 => {
204
+ }};
205
+ .app-picker__icon {
206
+ fill: ${_ref16 => {
113
207
  let {
114
208
  theme
115
209
  } = _ref16;
116
210
  return theme.colors.brand[800];
117
- }, _ref17 => {
211
+ }};
212
+ }
213
+ }
214
+
215
+ &:focus {
216
+ &:before {
217
+ border-color: ${_ref17 => {
118
218
  let {
119
219
  theme
120
220
  } = _ref17;
121
221
  return theme.colors.brand[800];
122
- }, _ref18 => {
222
+ }};
223
+ }
224
+ }
225
+
226
+ &:disabled {
227
+ color: ${_ref18 => {
123
228
  let {
124
229
  theme
125
230
  } = _ref18;
126
231
  return theme.colors.neutral[500];
127
- }, _ref19 => {
232
+ }};
233
+ cursor: not-allowed;
234
+
235
+ .app-picker__icon {
236
+ fill: ${_ref19 => {
128
237
  let {
129
238
  theme
130
239
  } = _ref19;
131
240
  return theme.colors.neutral[500];
132
- }, StyledChipLabel, _ref20 => {
241
+ }};
242
+ }
243
+
244
+ &:focus,
245
+ &:hover {
246
+ background-color: #fff;
247
+ cursor: not-allowed;
248
+ &:before {
249
+ border-color: transparent;
250
+ }
251
+
252
+ ${StyledChipLabel} {
253
+ color: ${_ref20 => {
133
254
  let {
134
255
  theme
135
256
  } = _ref20;
136
257
  return theme.colors.neutral[500];
137
- }, _ref21 => {
258
+ }};
259
+ }
260
+ }
261
+
262
+ &:hover .app-picker__icon {
263
+ fill: ${_ref21 => {
138
264
  let {
139
265
  theme
140
266
  } = _ref21;
141
267
  return theme.colors.neutral[500];
142
- }, _ref22 => {
268
+ }};
269
+ }
270
+ }
271
+
272
+ ${_ref22 => {
143
273
  let {
144
274
  selected
145
275
  } = _ref22;
146
276
  return !selected ? '' : styledChipSelectedCss;
147
- });
277
+ }}
278
+ `;
148
279
  const StyledSeparator = dsSystem.styled('hr', {
149
280
  name: 'DS-AppPicker',
150
281
  slot: 'separator'
151
- })(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n border-top: 1px solid ", ";\n border-bottom: none;\n width: 99%;\n margin: 0;\n"])), _ref23 => {
282
+ })`
283
+ border-top: 1px solid ${_ref23 => {
152
284
  let {
153
285
  theme
154
286
  } = _ref23;
155
287
  return theme.colors.neutral[100];
156
- });
288
+ }};
289
+ border-bottom: none;
290
+ width: 99%;
291
+ margin: 0;
292
+ `;
157
293
 
158
294
  exports.StyledChip = StyledChip;
159
295
  exports.StyledChipLabel = StyledChipLabel;
package/esm/AppPickerImpl.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
2
  import _jsx from '@babel/runtime/helpers/esm/jsx';
3
3
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.constructor.js';
6
- import 'core-js/modules/esnext.iterator.for-each.js';
7
4
  import 'core-js/modules/esnext.async-iterator.map.js';
8
5
  import 'core-js/modules/esnext.iterator.map.js';
9
6
  import 'core-js/modules/esnext.async-iterator.filter.js';
7
+ import 'core-js/modules/esnext.iterator.constructor.js';
10
8
  import 'core-js/modules/esnext.iterator.filter.js';
9
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
10
+ import 'core-js/modules/esnext.iterator.for-each.js';
11
11
  import { useRef, useEffect, useCallback } from 'react';
12
12
  import { getDataProps } from '@elliemae/ds-props-helpers';
13
13
  import { chunk } from 'lodash';
@@ -39,13 +39,9 @@ const AppPickerImpl = _ref => {
39
39
  const allFocusableButtons = useRef([]);
40
40
  const selectedButton = useRef(null);
41
41
  useEffect(() => {
42
- var _wrapperRef$current;
43
-
44
- 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) => {
42
+ wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {
45
43
  if (!e.hasAttribute('disabled')) {
46
- var _allFocusableButtons$;
47
-
48
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$ = allFocusableButtons.current) === null || _allFocusableButtons$ === void 0 ? void 0 : _allFocusableButtons$.push(e);
44
+ allFocusableButtons?.current?.push(e);
49
45
  }
50
46
 
51
47
  if (e.getAttribute('aria-selected') === 'true') {
@@ -54,38 +50,28 @@ const AppPickerImpl = _ref => {
54
50
  });
55
51
 
56
52
  if (selectedButton.current) {
57
- var _wrapperRef$current2;
58
-
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();
53
+ wrapperRef?.current?.querySelectorAll('button')[selectedButton.current].focus();
60
54
  } else {
61
- var _allFocusableButtons$2;
62
-
63
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$2 = allFocusableButtons.current[0]) === null || _allFocusableButtons$2 === void 0 ? void 0 : _allFocusableButtons$2.focus();
55
+ allFocusableButtons?.current[0]?.focus();
64
56
  }
65
57
  }, [wrapperRef]); // eslint-disable-next-line max-statements
66
58
 
67
59
  const handleKeyDown = e => {
68
- var _triggerRef$current;
69
-
70
60
  switch (e.key) {
71
61
  case keys.ESC:
72
- triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
62
+ triggerRef?.current?.focus();
73
63
  close();
74
64
  break;
75
65
 
76
66
  case keys.TAB:
77
67
  if (e.shiftKey) {
78
68
  if (e.target === allFocusableButtons.current[0]) {
79
- var _allFocusableButtons$3;
80
-
81
69
  e.preventDefault();
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();
70
+ allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();
83
71
  }
84
72
  } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {
85
- var _allFocusableButtons$4;
86
-
87
73
  e.preventDefault();
88
- allFocusableButtons === null || allFocusableButtons === void 0 ? void 0 : (_allFocusableButtons$4 = allFocusableButtons.current[0]) === null || _allFocusableButtons$4 === void 0 ? void 0 : _allFocusableButtons$4.focus();
74
+ allFocusableButtons?.current[0]?.focus();
89
75
  }
90
76
 
91
77
  break;
package/esm/DSAppPicker.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/web.dom-collections.iterator.js';
3
2
  import { useState, useRef, useEffect } from 'react';
4
3
  import { describe } from 'react-desc';
5
4
  import { MenuPicker } from '@elliemae/ds-icons';
package/esm/styles.js CHANGED
@@ -1,150 +1,290 @@
1
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
1
  import { styled, css } from '@elliemae/ds-system';
3
2
 
4
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
3
+ /* eslint-disable @typescript-eslint/no-unsafe-assignment */
5
4
  const StyledTitle = styled('h3', {
6
5
  name: 'DS-AppPicker',
7
6
  slot: 'title'
8
- })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n margin: 12px 0 0 0;\n line-height: 1.38;\n text-transform: uppercase;\n"])), _ref => {
7
+ })`
8
+ color: ${_ref => {
9
9
  let {
10
10
  theme
11
11
  } = _ref;
12
12
  return theme.colors.neutral[700];
13
- }, _ref2 => {
13
+ }};
14
+ font-size: ${_ref2 => {
14
15
  let {
15
16
  theme
16
17
  } = _ref2;
17
18
  return theme.fontSizes.value[400];
18
- }, _ref3 => {
19
+ }};
20
+ font-weight: ${_ref3 => {
19
21
  let {
20
22
  theme
21
23
  } = _ref3;
22
24
  return theme.fontWeights.semibold;
23
- });
25
+ }};
26
+ margin: 12px 0 0 0;
27
+ line-height: 1.38;
28
+ text-transform: uppercase;
29
+ `;
24
30
  const StyledWrapper = styled('ul', {
25
31
  name: 'DS-AppPicker',
26
32
  slot: 'root'
27
- })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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: ", ";\n &:focus {\n outline: none;\n }\n"])), _ref4 => {
33
+ })`
34
+ align-items: center;
35
+ min-width: 308px;
36
+ min-height: 110px;
37
+ max-height: 449px;
38
+ width: 308px;
39
+ overflow-y: auto;
40
+ overflow-x: hidden;
41
+ margin: 0;
42
+ padding: ${_ref4 => {
28
43
  let {
29
44
  isOverflow
30
45
  } = _ref4;
31
46
  return isOverflow ? '0 0 0 16px' : '0 16px';
32
- });
47
+ }};
48
+ &:focus {
49
+ outline: none;
50
+ }
51
+ `;
33
52
  const StyledGrid = styled('div', {
34
53
  name: 'DS-AppPicker',
35
54
  slot: 'grid'
36
- })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n margin: 8px 0;\n"])));
55
+ })`
56
+ display: flex;
57
+ flex-direction: column;
58
+ justify-content: center;
59
+ align-items: center;
60
+ width: 100%;
61
+ margin: 8px 0;
62
+ `;
37
63
  const StyledRow = styled('div', {
38
64
  name: 'DS-AppPicker',
39
65
  slot: 'row'
40
- })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n"])));
66
+ })`
67
+ display: flex;
68
+ width: 100%;
69
+ `;
41
70
  const StyledChipLabel = styled('p', {
42
71
  name: 'DS-AppPicker',
43
72
  slot: 'chipLabel'
44
- })(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: ", ";\n font-weight: ", ";\n word-wrap: break-word;\n margin: 0 6px;\n line-height: 1.45;\n width: 100%;\n z-index: 120;\n\n & span {\n padding-top: 6px;\n }\n"])), _ref5 => {
73
+ })`
74
+ font-size: ${_ref5 => {
45
75
  let {
46
76
  theme
47
77
  } = _ref5;
48
78
  return theme.fontSizes.label[200];
49
- }, _ref6 => {
79
+ }};
80
+ font-weight: ${_ref6 => {
50
81
  let {
51
82
  theme
52
83
  } = _ref6;
53
84
  return theme.fontWeights.semibold;
54
- });
55
- const styledChipSelectedCss = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n\n .app-picker__icon {\n fill: ", ";\n }\n\n &:before {\n border: 1px solid ", ";\n }\n\n &:focus {\n &:before {\n border: 2px solid ", ";\n }\n }\n"])), _ref7 => {
85
+ }};
86
+ word-wrap: break-word;
87
+ margin: 0 6px;
88
+ line-height: 1.45;
89
+ width: 100%;
90
+ z-index: 120;
91
+
92
+ & span {
93
+ padding-top: 6px;
94
+ }
95
+ `;
96
+ const styledChipSelectedCss = css`
97
+ color: ${_ref7 => {
56
98
  let {
57
99
  theme
58
100
  } = _ref7;
59
101
  return theme.colors.brand[800];
60
- }, _ref8 => {
102
+ }};
103
+ background-color: ${_ref8 => {
61
104
  let {
62
105
  theme
63
106
  } = _ref8;
64
107
  return theme.colors.brand[200];
65
- }, _ref9 => {
108
+ }};
109
+
110
+ .app-picker__icon {
111
+ fill: ${_ref9 => {
66
112
  let {
67
113
  theme
68
114
  } = _ref9;
69
115
  return theme.colors.brand[800];
70
- }, _ref10 => {
116
+ }};
117
+ }
118
+
119
+ &:before {
120
+ border: 1px solid ${_ref10 => {
71
121
  let {
72
122
  theme
73
123
  } = _ref10;
74
124
  return theme.colors.brand[600];
75
- }, _ref11 => {
125
+ }};
126
+ }
127
+
128
+ &:focus {
129
+ &:before {
130
+ border: 2px solid ${_ref11 => {
76
131
  let {
77
132
  theme
78
133
  } = _ref11;
79
134
  return theme.colors.brand[800];
80
- });
135
+ }};
136
+ }
137
+ }
138
+ `;
81
139
  const StyledChip = styled('button', {
82
140
  name: 'DS-AppPicker',
83
141
  slot: 'chip'
84
- })(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border: none;\n height: 68px;\n width: 92px;\n background-color: #fff;\n color: ", ";\n cursor: pointer;\n outline: none;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n border: 2px solid transparent;\n }\n\n & .app-picker__icon {\n fill: ", ";\n height: 28px;\n width: 28px;\n }\n\n & .app-picker__icon svg {\n height: 28px;\n width: 28px;\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n .app-picker__icon {\n fill: ", ";\n }\n }\n\n &:focus {\n &:before {\n border-color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n cursor: not-allowed;\n\n .app-picker__icon {\n fill: ", ";\n }\n\n &:focus,\n &:hover {\n background-color: #fff;\n cursor: not-allowed;\n &:before {\n border-color: transparent;\n }\n\n ", " {\n color: ", ";\n }\n }\n\n &:hover .app-picker__icon {\n fill: ", ";\n }\n }\n\n ", "\n"])), _ref12 => {
142
+ })`
143
+ position: relative;
144
+ display: flex;
145
+ flex-direction: column;
146
+ align-items: center;
147
+ justify-content: center;
148
+ border: none;
149
+ height: 68px;
150
+ width: 92px;
151
+ background-color: #fff;
152
+ color: ${_ref12 => {
85
153
  let {
86
154
  theme
87
155
  } = _ref12;
88
156
  return theme.colors.brand[600];
89
- }, _ref13 => {
157
+ }};
158
+ cursor: pointer;
159
+ outline: none;
160
+
161
+ &:before {
162
+ content: '';
163
+ position: absolute;
164
+ top: 0;
165
+ left: 0;
166
+ width: 100%;
167
+ height: 100%;
168
+ border-radius: 2px;
169
+ border: 2px solid transparent;
170
+ }
171
+
172
+ & .app-picker__icon {
173
+ fill: ${_ref13 => {
90
174
  let {
91
175
  theme
92
176
  } = _ref13;
93
177
  return theme.colors.brand[600];
94
- }, _ref14 => {
178
+ }};
179
+ height: 28px;
180
+ width: 28px;
181
+ }
182
+
183
+ & .app-picker__icon svg {
184
+ height: 28px;
185
+ width: 28px;
186
+ }
187
+
188
+ &:hover {
189
+ color: ${_ref14 => {
95
190
  let {
96
191
  theme
97
192
  } = _ref14;
98
193
  return theme.colors.brand[800];
99
- }, _ref15 => {
194
+ }};
195
+ background-color: ${_ref15 => {
100
196
  let {
101
197
  theme
102
198
  } = _ref15;
103
199
  return theme.colors.brand[200];
104
- }, _ref16 => {
200
+ }};
201
+ .app-picker__icon {
202
+ fill: ${_ref16 => {
105
203
  let {
106
204
  theme
107
205
  } = _ref16;
108
206
  return theme.colors.brand[800];
109
- }, _ref17 => {
207
+ }};
208
+ }
209
+ }
210
+
211
+ &:focus {
212
+ &:before {
213
+ border-color: ${_ref17 => {
110
214
  let {
111
215
  theme
112
216
  } = _ref17;
113
217
  return theme.colors.brand[800];
114
- }, _ref18 => {
218
+ }};
219
+ }
220
+ }
221
+
222
+ &:disabled {
223
+ color: ${_ref18 => {
115
224
  let {
116
225
  theme
117
226
  } = _ref18;
118
227
  return theme.colors.neutral[500];
119
- }, _ref19 => {
228
+ }};
229
+ cursor: not-allowed;
230
+
231
+ .app-picker__icon {
232
+ fill: ${_ref19 => {
120
233
  let {
121
234
  theme
122
235
  } = _ref19;
123
236
  return theme.colors.neutral[500];
124
- }, StyledChipLabel, _ref20 => {
237
+ }};
238
+ }
239
+
240
+ &:focus,
241
+ &:hover {
242
+ background-color: #fff;
243
+ cursor: not-allowed;
244
+ &:before {
245
+ border-color: transparent;
246
+ }
247
+
248
+ ${StyledChipLabel} {
249
+ color: ${_ref20 => {
125
250
  let {
126
251
  theme
127
252
  } = _ref20;
128
253
  return theme.colors.neutral[500];
129
- }, _ref21 => {
254
+ }};
255
+ }
256
+ }
257
+
258
+ &:hover .app-picker__icon {
259
+ fill: ${_ref21 => {
130
260
  let {
131
261
  theme
132
262
  } = _ref21;
133
263
  return theme.colors.neutral[500];
134
- }, _ref22 => {
264
+ }};
265
+ }
266
+ }
267
+
268
+ ${_ref22 => {
135
269
  let {
136
270
  selected
137
271
  } = _ref22;
138
272
  return !selected ? '' : styledChipSelectedCss;
139
- });
273
+ }}
274
+ `;
140
275
  const StyledSeparator = styled('hr', {
141
276
  name: 'DS-AppPicker',
142
277
  slot: 'separator'
143
- })(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border-top: 1px solid ", ";\n border-bottom: none;\n width: 99%;\n margin: 0;\n"])), _ref23 => {
278
+ })`
279
+ border-top: 1px solid ${_ref23 => {
144
280
  let {
145
281
  theme
146
282
  } = _ref23;
147
283
  return theme.colors.neutral[100];
148
- });
284
+ }};
285
+ border-bottom: none;
286
+ width: 99%;
287
+ margin: 0;
288
+ `;
149
289
 
150
290
  export { StyledChip, StyledChipLabel, StyledGrid, StyledRow, StyledSeparator, StyledTitle, StyledWrapper };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-app-picker",
3
- "version": "2.4.2-rc.3",
3
+ "version": "2.4.3-rc.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - App Picker",
6
6
  "module": "./esm/index.js",
@@ -56,13 +56,13 @@
56
56
  "build": "node ../../scripts/build/build.js"
57
57
  },
58
58
  "dependencies": {
59
- "@elliemae/ds-button": "2.4.2-rc.3",
60
- "@elliemae/ds-icons": "2.4.2-rc.3",
61
- "@elliemae/ds-popover": "2.4.2-rc.3",
62
- "@elliemae/ds-props-helpers": "2.4.2-rc.3",
63
- "@elliemae/ds-system": "2.4.2-rc.3",
64
- "@elliemae/ds-truncated-tooltip-text": "2.4.2-rc.3",
65
- "@elliemae/ds-utilities": "2.4.2-rc.3",
59
+ "@elliemae/ds-button": "2.4.3-rc.0",
60
+ "@elliemae/ds-icons": "2.4.3-rc.0",
61
+ "@elliemae/ds-popover": "2.4.3-rc.0",
62
+ "@elliemae/ds-props-helpers": "2.4.3-rc.0",
63
+ "@elliemae/ds-system": "2.4.3-rc.0",
64
+ "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.0",
65
+ "@elliemae/ds-utilities": "2.4.3-rc.0",
66
66
  "react-desc": "^4.1.3"
67
67
  },
68
68
  "devDependencies": {