@elliemae/ds-app-picker 2.0.0-next.8 → 2.0.0-rc.11

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 (13) hide show
  1. package/cjs/AppPickerImpl.js +34 -42
  2. package/cjs/DSAppPicker.js +36 -33
  3. package/cjs/propTypes.js +2 -6
  4. package/cjs/styles.js +49 -0
  5. package/esm/AppPickerImpl.js +36 -44
  6. package/esm/DSAppPicker.js +36 -32
  7. package/esm/propTypes.js +1 -1
  8. package/esm/styles.js +35 -0
  9. package/package.json +14 -5
  10. package/types/DSAppPicker.d.ts +7 -1
  11. package/types/propTypes.d.ts +59 -12
  12. package/types/styles.d.ts +9 -0
  13. package/types/types/AppPickerTypes.d.ts +8 -4
package/cjs/AppPickerImpl.js CHANGED
@@ -1,42 +1,34 @@
1
1
  'use strict';
2
2
 
3
3
  var _jsx = require('@babel/runtime/helpers/jsx');
4
+ require('core-js/modules/esnext.async-iterator.for-each.js');
5
+ require('core-js/modules/esnext.iterator.constructor.js');
6
+ require('core-js/modules/esnext.iterator.for-each.js');
7
+ require('core-js/modules/esnext.async-iterator.map.js');
8
+ require('core-js/modules/esnext.iterator.map.js');
4
9
  var react = require('react');
5
10
  var lodash = require('lodash');
6
- var dsClassnames = require('@elliemae/ds-classnames');
7
11
  var utils = require('./utils.js');
12
+ var styles = require('./styles.js');
8
13
  var jsxRuntime = require('react/jsx-runtime');
9
14
 
10
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
16
 
12
17
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
13
18
 
14
- var _Separator;
15
- const blockName = 'app-picker';
16
- const Wrapper = dsClassnames.aggregatedClasses('ul')(blockName, 'wrapper');
17
- const Grid = dsClassnames.aggregatedClasses('div')(blockName, 'grid');
18
- const Row = dsClassnames.aggregatedClasses('div')(blockName, 'row');
19
- const Chip = dsClassnames.aggregatedClasses('button')(blockName, 'chip', ({
20
- disabled,
21
- selected
22
- }) => ({
23
- disabled,
24
- selected
25
- }));
26
- const ChipLabel = dsClassnames.aggregatedClasses('p')(blockName, 'chip-label');
27
- const Separator = dsClassnames.aggregatedClasses('hr')(blockName, 'separator');
28
- const SectionTitle = dsClassnames.aggregatedClasses('p')(blockName, 'section-title');
29
-
30
- const AppPickerImpl = ({
31
- apps = [],
32
- customApps = [],
33
- sectionTitle = 'APPLICATIONS',
34
- customSectionTitle = 'CUSTOM APPLICATIONS',
35
- close = () => null,
36
- wrapperRef,
37
- onKeyDown,
38
- triggerRef
39
- }) => {
19
+ var _StyledSeparator;
20
+
21
+ const AppPickerImpl = _ref => {
22
+ let {
23
+ apps = [],
24
+ customApps = [],
25
+ sectionTitle = 'APPLICATIONS',
26
+ customSectionTitle = 'CUSTOM APPLICATIONS',
27
+ close = () => null,
28
+ wrapperRef,
29
+ onKeyDown,
30
+ triggerRef
31
+ } = _ref;
40
32
  const allFocusableButtons = react.useRef([]);
41
33
  const selectedButton = react.useRef(null);
42
34
  react.useEffect(() => {
@@ -104,58 +96,58 @@ const AppPickerImpl = ({
104
96
  }
105
97
  }, [onKeyDown, close]);
106
98
 
107
- const buildRows = (appList, prevIndex = 0) => {
99
+ const buildRows = function (appList) {
100
+ let prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
108
101
  const rows = lodash.chunk(appList, 3); // divides array in subarrays of 3 items
109
102
 
110
- const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx__default["default"](Row, {}, index, row.map((app, key) => {
103
+ const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx__default["default"](styles.StyledRow, {}, index, row.map((app, key) => {
111
104
  const {
112
105
  label,
113
106
  disabled,
114
107
  selected,
115
108
  icon: Icon
116
109
  } = app;
117
- return /*#__PURE__*/_jsx__default["default"](Chip, {
118
- classProps: {
119
- disabled,
120
- selected
121
- },
110
+ return /*#__PURE__*/_jsx__default["default"](styles.StyledChip, {
122
111
  onClick: e => handleOnClick(e, app),
123
112
  onKeyDown: handleKeyDown,
124
113
  "data-testid": "app-picker__chip",
125
114
  "aria-disabled": disabled,
126
115
  disabled: disabled,
116
+ selected: selected,
127
117
  "aria-selected": selected,
128
118
  "aria-setsize": apps.length + customApps.length,
129
119
  "aria-posinset": key + prevIndex
130
120
  }, key, /*#__PURE__*/_jsx__default["default"](Icon, {
131
121
  className: "app-picker__icon",
132
122
  size: "m"
133
- }), /*#__PURE__*/_jsx__default["default"](ChipLabel, {}, void 0, label));
123
+ }), /*#__PURE__*/_jsx__default["default"](styles.StyledChipLabel, {}, void 0, label));
134
124
  })));
135
- return formattedRows;
125
+ return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
126
+ children: formattedRows
127
+ });
136
128
  };
137
129
 
138
130
  const AppsRows = () => buildRows(apps, 1);
139
131
 
140
132
  const CustomRows = () => buildRows(customApps, apps.length);
141
133
 
142
- return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, {
134
+ return /*#__PURE__*/jsxRuntime.jsxs(styles.StyledWrapper, {
143
135
  role: "listbox",
144
136
  ref: wrapperRef,
145
137
  onKeyDown: handleOnKeyDownWrapper,
146
138
  "data-testid": "app-picker__wrapper",
147
- children: [/*#__PURE__*/_jsx__default["default"](SectionTitle, {
139
+ children: [/*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {
148
140
  "data-testid": "app-picker__main-title",
149
141
  "aria-hidden": true
150
- }, void 0, sectionTitle), /*#__PURE__*/_jsx__default["default"](Grid, {
142
+ }, void 0, sectionTitle), /*#__PURE__*/_jsx__default["default"](styles.StyledGrid, {
151
143
  "data-testid": "app-picker__main-grid"
152
144
  }, void 0, /*#__PURE__*/_jsx__default["default"](AppsRows, {})), !!customApps.length && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
153
- children: [_Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](Separator, {
145
+ children: [_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styles.StyledSeparator, {
154
146
  "aria-hidden": true
155
- })), /*#__PURE__*/_jsx__default["default"](SectionTitle, {
147
+ })), /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {
156
148
  "data-testid": "app-picker__custom-title",
157
149
  "aria-hidden": true
158
- }, void 0, customSectionTitle), /*#__PURE__*/_jsx__default["default"](Grid, {
150
+ }, void 0, customSectionTitle), /*#__PURE__*/_jsx__default["default"](styles.StyledGrid, {
159
151
  "data-testid": "app-picker__custom-grid"
160
152
  }, void 0, /*#__PURE__*/_jsx__default["default"](CustomRows, {}))]
161
153
  })]
package/cjs/DSAppPicker.js CHANGED
@@ -6,7 +6,7 @@ var _jsx = require('@babel/runtime/helpers/jsx');
6
6
  require('core-js/modules/web.dom-collections.iterator.js');
7
7
  var react = require('react');
8
8
  var reactDesc = require('react-desc');
9
- var MenuPicker = require('@elliemae/ds-icons/MenuPicker');
9
+ var dsIcons = require('@elliemae/ds-icons');
10
10
  var DSButton = require('@elliemae/ds-button');
11
11
  var DSPopover = require('@elliemae/ds-popover');
12
12
  var dsUtilities = require('@elliemae/ds-utilities');
@@ -16,30 +16,30 @@ var propTypes = require('./propTypes.js');
16
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
17
 
18
18
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
19
- var MenuPicker__default = /*#__PURE__*/_interopDefaultLegacy(MenuPicker);
20
19
  var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
21
20
  var DSPopover__default = /*#__PURE__*/_interopDefaultLegacy(DSPopover);
22
21
 
23
- const DSAppPicker = ({
24
- apps = [],
25
- customApps = [],
26
- sectionTitle = 'APPLICATIONS',
27
- customSectionTitle = 'CUSTOM APPLICATIONS',
28
- icon: Icon = () => /*#__PURE__*/_jsx__default["default"](MenuPicker__default["default"], {
29
- fill: ['brand-primary', 700],
30
- size: "m"
31
- }),
32
- renderTrigger,
33
- isOpen,
34
- onClose = () => null,
35
- actionRef,
36
- onKeyDown,
37
- onClick = () => null,
38
- onClickOutside = () => null,
39
- triggerRef
40
- }) => {
22
+ const DSAppPicker = _ref => {
41
23
  var _Icon;
42
24
 
25
+ let {
26
+ apps = [],
27
+ customApps = [],
28
+ sectionTitle = 'APPLICATIONS',
29
+ customSectionTitle = 'CUSTOM APPLICATIONS',
30
+ icon: Icon = () => /*#__PURE__*/_jsx__default["default"](dsIcons.MenuPicker, {
31
+ fill: ['brand-primary', 700],
32
+ size: "m"
33
+ }),
34
+ renderTrigger,
35
+ isOpen,
36
+ onClose = () => null,
37
+ actionRef,
38
+ onKeyDown,
39
+ onClick = () => null,
40
+ onClickOutside = () => null,
41
+ triggerRef
42
+ } = _ref;
43
43
  const [open, setOpen] = react.useState(false);
44
44
  const wrapperRef = react.useRef(null);
45
45
  const defaultTriggerRef = react.useRef(null);
@@ -82,19 +82,22 @@ const DSAppPicker = ({
82
82
  triggerRef: triggerRef || defaultTriggerRef
83
83
  });
84
84
 
85
- const RenderTrigger = renderTrigger || (({
86
- ref
87
- }) => /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
88
- "data-testid": "app-picker__button",
89
- id: "app-picker__button",
90
- buttonType: "text",
91
- icon: _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {})),
92
- innerRef: dsUtilities.mergeRefs(ref, defaultTriggerRef),
93
- onClick: e => {
94
- onClick(e);
95
- setOpen(true);
96
- }
97
- }));
85
+ const RenderTrigger = renderTrigger || (_ref2 => {
86
+ let {
87
+ ref
88
+ } = _ref2;
89
+ return /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
90
+ "data-testid": "app-picker__button",
91
+ id: "app-picker__button",
92
+ buttonType: "text",
93
+ icon: _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {})),
94
+ innerRef: dsUtilities.mergeRefs(ref, defaultTriggerRef),
95
+ onClick: e => {
96
+ onClick(e);
97
+ setOpen(true);
98
+ }
99
+ });
100
+ });
98
101
 
99
102
  return /*#__PURE__*/_jsx__default["default"](DSPopover__default["default"], {
100
103
  content: /*#__PURE__*/_jsx__default["default"](AppPickerContent, {}),
package/cjs/propTypes.js CHANGED
@@ -3,18 +3,14 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var reactDesc = require('react-desc');
6
- var MenuPicker = require('@elliemae/ds-icons/MenuPicker');
7
-
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
-
10
- var MenuPicker__default = /*#__PURE__*/_interopDefaultLegacy(MenuPicker);
6
+ var dsIcons = require('@elliemae/ds-icons');
11
7
 
12
8
  const propTypes = {
13
9
  apps: reactDesc.PropTypes.array.description('Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]').isRequired,
14
10
  customApps: reactDesc.PropTypes.array.description('Custom items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]'),
15
11
  sectionTitle: reactDesc.PropTypes.string.description('main section title').defaultValue('APPLICATIONS'),
16
12
  customSectionTitle: reactDesc.PropTypes.string.description('custom section title').defaultValue('CUSTOM APPLICATIONS'),
17
- icon: reactDesc.PropTypes.func.description('trigger button s icon').defaultValue(MenuPicker__default["default"]),
13
+ icon: reactDesc.PropTypes.func.description('trigger button s icon').defaultValue(dsIcons.MenuPicker),
18
14
  renderTrigger: reactDesc.PropTypes.func.description('Custom trigger component.'),
19
15
  actionRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
20
16
  current: reactDesc.PropTypes.any
package/cjs/styles.js ADDED
@@ -0,0 +1,49 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
+ var dsSystem = require('@elliemae/ds-system');
7
+
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;
13
+ const StyledWrapper = dsSystem.styled('ul', {
14
+ name: 'DS-AppPicker',
15
+ slot: 'root'
16
+ })(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 244px;\n max-height: 449px;\n overflow-y: auto;\n padding: 4px 0;\n margin: 0 auto;\n\n &:focus {\n outline: none;\n }\n"])));
17
+ const StyledGrid = dsSystem.styled('div', {
18
+ name: 'DS-AppPicker',
19
+ slot: 'grid'
20
+ })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 0 8px;\n"])));
21
+ const StyledRow = dsSystem.styled('div', {
22
+ name: 'DS-AppPicker',
23
+ slot: 'row'
24
+ })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n display: flex;\n width: 100%;\n"])));
25
+ const StyledTitle = dsSystem.styled('p', {
26
+ name: 'DS-AppPicker',
27
+ slot: 'title'
28
+ })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n color: ", ";\n font-size: 0.8461rem;\n font-weight: bold;\n margin: 8px 0 4px 0;\n line-height: 1;\n text-transform: uppercase;\n"])), props => props.theme.colors.neutral[700]);
29
+ const StyledChipLabel = dsSystem.styled('p', {
30
+ name: 'DS-AppPicker',
31
+ slot: 'chipLabel'
32
+ })(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n font-size: 0.8461rem;\n font-weight: 600;\n word-wrap: break-word;\n margin: 4px 0;\n line-height: 14px;\n text-overflow: ellipsis;\n max-width: 68px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n"])));
33
+ const styledChipSelectedCss = dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n color: ", ";\n background-color: ", ";\n position: relative;\n\n .app-picker__icon {\n fill: ", ";\n }\n\n &:focus {\n border: 2px solid transparent;\n &::after {\n border: 2px solid ", ";\n }\n }\n\n &::after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n border: 1px solid ", ";\n border-radius: 2px;\n }\n"])), props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.brand[600]);
34
+ const StyledChip = dsSystem.styled('button', {
35
+ name: 'DS-AppPicker',
36
+ slot: 'chip'
37
+ })(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 2%;\n padding: 8px 0 4px 0;\n margin: 4px;\n height: 68px;\n width: 68px;\n line-height: 1px;\n background-color: #fff;\n color: ", ";\n cursor: pointer;\n border: 2px solid transparent;\n overflow: hidden;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n .app-picker__icon {\n fill: ", ";\n }\n }\n\n &:focus {\n outline: none;\n border: 2px solid ", ";\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 border: 2px solid transparent;\n\n ", " {\n color: ", ";\n }\n }\n\n &:hover .app-picker__icon {\n fill: ", ";\n }\n }\n\n ", "\n"])), props => props.theme.colors.brand[600], props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], StyledChipLabel, props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], props => !props.selected ? '' : styledChipSelectedCss);
38
+ const StyledSeparator = dsSystem.styled('hr', {
39
+ name: 'DS-AppPicker',
40
+ slot: 'separator'
41
+ })(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n border-top: 1px solid ", ";\n border-bottom: none;\n width: 99%;\n margin-bottom: 0;\n"])), props => props.theme.colors.neutral[100]);
42
+
43
+ exports.StyledChip = StyledChip;
44
+ exports.StyledChipLabel = StyledChipLabel;
45
+ exports.StyledGrid = StyledGrid;
46
+ exports.StyledRow = StyledRow;
47
+ exports.StyledSeparator = StyledSeparator;
48
+ exports.StyledTitle = StyledTitle;
49
+ exports.StyledWrapper = StyledWrapper;
package/esm/AppPickerImpl.js CHANGED
@@ -1,36 +1,28 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
3
+ import 'core-js/modules/esnext.iterator.constructor.js';
4
+ import 'core-js/modules/esnext.iterator.for-each.js';
5
+ import 'core-js/modules/esnext.async-iterator.map.js';
6
+ import 'core-js/modules/esnext.iterator.map.js';
2
7
  import { useRef, useEffect, useCallback } from 'react';
3
8
  import { chunk } from 'lodash';
4
- import { aggregatedClasses } from '@elliemae/ds-classnames';
5
9
  import { keys } from './utils.js';
6
- import { jsxs, Fragment } from 'react/jsx-runtime';
7
-
8
- var _Separator;
9
- const blockName = 'app-picker';
10
- const Wrapper = aggregatedClasses('ul')(blockName, 'wrapper');
11
- const Grid = aggregatedClasses('div')(blockName, 'grid');
12
- const Row = aggregatedClasses('div')(blockName, 'row');
13
- const Chip = aggregatedClasses('button')(blockName, 'chip', ({
14
- disabled,
15
- selected
16
- }) => ({
17
- disabled,
18
- selected
19
- }));
20
- const ChipLabel = aggregatedClasses('p')(blockName, 'chip-label');
21
- const Separator = aggregatedClasses('hr')(blockName, 'separator');
22
- const SectionTitle = aggregatedClasses('p')(blockName, 'section-title');
23
-
24
- const AppPickerImpl = ({
25
- apps = [],
26
- customApps = [],
27
- sectionTitle = 'APPLICATIONS',
28
- customSectionTitle = 'CUSTOM APPLICATIONS',
29
- close = () => null,
30
- wrapperRef,
31
- onKeyDown,
32
- triggerRef
33
- }) => {
10
+ import { StyledWrapper, StyledTitle, StyledGrid, StyledSeparator, StyledRow, StyledChip, StyledChipLabel } from './styles.js';
11
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
12
+
13
+ var _StyledSeparator;
14
+
15
+ const AppPickerImpl = _ref => {
16
+ let {
17
+ apps = [],
18
+ customApps = [],
19
+ sectionTitle = 'APPLICATIONS',
20
+ customSectionTitle = 'CUSTOM APPLICATIONS',
21
+ close = () => null,
22
+ wrapperRef,
23
+ onKeyDown,
24
+ triggerRef
25
+ } = _ref;
34
26
  const allFocusableButtons = useRef([]);
35
27
  const selectedButton = useRef(null);
36
28
  useEffect(() => {
@@ -98,58 +90,58 @@ const AppPickerImpl = ({
98
90
  }
99
91
  }, [onKeyDown, close]);
100
92
 
101
- const buildRows = (appList, prevIndex = 0) => {
93
+ const buildRows = function (appList) {
94
+ let prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
102
95
  const rows = chunk(appList, 3); // divides array in subarrays of 3 items
103
96
 
104
- const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx(Row, {}, index, row.map((app, key) => {
97
+ const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx(StyledRow, {}, index, row.map((app, key) => {
105
98
  const {
106
99
  label,
107
100
  disabled,
108
101
  selected,
109
102
  icon: Icon
110
103
  } = app;
111
- return /*#__PURE__*/_jsx(Chip, {
112
- classProps: {
113
- disabled,
114
- selected
115
- },
104
+ return /*#__PURE__*/_jsx(StyledChip, {
116
105
  onClick: e => handleOnClick(e, app),
117
106
  onKeyDown: handleKeyDown,
118
107
  "data-testid": "app-picker__chip",
119
108
  "aria-disabled": disabled,
120
109
  disabled: disabled,
110
+ selected: selected,
121
111
  "aria-selected": selected,
122
112
  "aria-setsize": apps.length + customApps.length,
123
113
  "aria-posinset": key + prevIndex
124
114
  }, key, /*#__PURE__*/_jsx(Icon, {
125
115
  className: "app-picker__icon",
126
116
  size: "m"
127
- }), /*#__PURE__*/_jsx(ChipLabel, {}, void 0, label));
117
+ }), /*#__PURE__*/_jsx(StyledChipLabel, {}, void 0, label));
128
118
  })));
129
- return formattedRows;
119
+ return /*#__PURE__*/jsx(Fragment, {
120
+ children: formattedRows
121
+ });
130
122
  };
131
123
 
132
124
  const AppsRows = () => buildRows(apps, 1);
133
125
 
134
126
  const CustomRows = () => buildRows(customApps, apps.length);
135
127
 
136
- return /*#__PURE__*/jsxs(Wrapper, {
128
+ return /*#__PURE__*/jsxs(StyledWrapper, {
137
129
  role: "listbox",
138
130
  ref: wrapperRef,
139
131
  onKeyDown: handleOnKeyDownWrapper,
140
132
  "data-testid": "app-picker__wrapper",
141
- children: [/*#__PURE__*/_jsx(SectionTitle, {
133
+ children: [/*#__PURE__*/_jsx(StyledTitle, {
142
134
  "data-testid": "app-picker__main-title",
143
135
  "aria-hidden": true
144
- }, void 0, sectionTitle), /*#__PURE__*/_jsx(Grid, {
136
+ }, void 0, sectionTitle), /*#__PURE__*/_jsx(StyledGrid, {
145
137
  "data-testid": "app-picker__main-grid"
146
138
  }, void 0, /*#__PURE__*/_jsx(AppsRows, {})), !!customApps.length && /*#__PURE__*/jsxs(Fragment, {
147
- children: [_Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {
139
+ children: [_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
148
140
  "aria-hidden": true
149
- })), /*#__PURE__*/_jsx(SectionTitle, {
141
+ })), /*#__PURE__*/_jsx(StyledTitle, {
150
142
  "data-testid": "app-picker__custom-title",
151
143
  "aria-hidden": true
152
- }, void 0, customSectionTitle), /*#__PURE__*/_jsx(Grid, {
144
+ }, void 0, customSectionTitle), /*#__PURE__*/_jsx(StyledGrid, {
153
145
  "data-testid": "app-picker__custom-grid"
154
146
  }, void 0, /*#__PURE__*/_jsx(CustomRows, {}))]
155
147
  })]
package/esm/DSAppPicker.js CHANGED
@@ -2,33 +2,34 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'core-js/modules/web.dom-collections.iterator.js';
3
3
  import { useState, useRef, useEffect } from 'react';
4
4
  import { describe } from 'react-desc';
5
- import MenuPicker from '@elliemae/ds-icons/MenuPicker';
5
+ import { MenuPicker } from '@elliemae/ds-icons';
6
6
  import DSButton from '@elliemae/ds-button';
7
7
  import DSPopover from '@elliemae/ds-popover';
8
8
  import { mergeRefs } from '@elliemae/ds-utilities';
9
9
  import AppPickerImpl from './AppPickerImpl.js';
10
10
  import { propTypes } from './propTypes.js';
11
11
 
12
- const DSAppPicker = ({
13
- apps = [],
14
- customApps = [],
15
- sectionTitle = 'APPLICATIONS',
16
- customSectionTitle = 'CUSTOM APPLICATIONS',
17
- icon: Icon = () => /*#__PURE__*/_jsx(MenuPicker, {
18
- fill: ['brand-primary', 700],
19
- size: "m"
20
- }),
21
- renderTrigger,
22
- isOpen,
23
- onClose = () => null,
24
- actionRef,
25
- onKeyDown,
26
- onClick = () => null,
27
- onClickOutside = () => null,
28
- triggerRef
29
- }) => {
12
+ const DSAppPicker = _ref => {
30
13
  var _Icon;
31
14
 
15
+ let {
16
+ apps = [],
17
+ customApps = [],
18
+ sectionTitle = 'APPLICATIONS',
19
+ customSectionTitle = 'CUSTOM APPLICATIONS',
20
+ icon: Icon = () => /*#__PURE__*/_jsx(MenuPicker, {
21
+ fill: ['brand-primary', 700],
22
+ size: "m"
23
+ }),
24
+ renderTrigger,
25
+ isOpen,
26
+ onClose = () => null,
27
+ actionRef,
28
+ onKeyDown,
29
+ onClick = () => null,
30
+ onClickOutside = () => null,
31
+ triggerRef
32
+ } = _ref;
32
33
  const [open, setOpen] = useState(false);
33
34
  const wrapperRef = useRef(null);
34
35
  const defaultTriggerRef = useRef(null);
@@ -71,19 +72,22 @@ const DSAppPicker = ({
71
72
  triggerRef: triggerRef || defaultTriggerRef
72
73
  });
73
74
 
74
- const RenderTrigger = renderTrigger || (({
75
- ref
76
- }) => /*#__PURE__*/_jsx(DSButton, {
77
- "data-testid": "app-picker__button",
78
- id: "app-picker__button",
79
- buttonType: "text",
80
- icon: _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {})),
81
- innerRef: mergeRefs(ref, defaultTriggerRef),
82
- onClick: e => {
83
- onClick(e);
84
- setOpen(true);
85
- }
86
- }));
75
+ const RenderTrigger = renderTrigger || (_ref2 => {
76
+ let {
77
+ ref
78
+ } = _ref2;
79
+ return /*#__PURE__*/_jsx(DSButton, {
80
+ "data-testid": "app-picker__button",
81
+ id: "app-picker__button",
82
+ buttonType: "text",
83
+ icon: _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {})),
84
+ innerRef: mergeRefs(ref, defaultTriggerRef),
85
+ onClick: e => {
86
+ onClick(e);
87
+ setOpen(true);
88
+ }
89
+ });
90
+ });
87
91
 
88
92
  return /*#__PURE__*/_jsx(DSPopover, {
89
93
  content: /*#__PURE__*/_jsx(AppPickerContent, {}),
package/esm/propTypes.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { PropTypes } from 'react-desc';
2
- import MenuPicker from '@elliemae/ds-icons/MenuPicker';
2
+ import { MenuPicker } from '@elliemae/ds-icons';
3
3
 
4
4
  const propTypes = {
5
5
  apps: PropTypes.array.description('Main items. Format: [{ label:string, icon:component, onClick:func, disabled:bool, selected:bool }]').isRequired,
package/esm/styles.js ADDED
@@ -0,0 +1,35 @@
1
+ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
+ import { styled, css } from '@elliemae/ds-system';
3
+
4
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
5
+ const StyledWrapper = styled('ul', {
6
+ name: 'DS-AppPicker',
7
+ slot: 'root'
8
+ })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 244px;\n max-height: 449px;\n overflow-y: auto;\n padding: 4px 0;\n margin: 0 auto;\n\n &:focus {\n outline: none;\n }\n"])));
9
+ const StyledGrid = styled('div', {
10
+ name: 'DS-AppPicker',
11
+ slot: 'grid'
12
+ })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n padding: 0 8px;\n"])));
13
+ const StyledRow = styled('div', {
14
+ name: 'DS-AppPicker',
15
+ slot: 'row'
16
+ })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n"])));
17
+ const StyledTitle = styled('p', {
18
+ name: 'DS-AppPicker',
19
+ slot: 'title'
20
+ })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 0.8461rem;\n font-weight: bold;\n margin: 8px 0 4px 0;\n line-height: 1;\n text-transform: uppercase;\n"])), props => props.theme.colors.neutral[700]);
21
+ const StyledChipLabel = styled('p', {
22
+ name: 'DS-AppPicker',
23
+ slot: 'chipLabel'
24
+ })(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: 0.8461rem;\n font-weight: 600;\n word-wrap: break-word;\n margin: 4px 0;\n line-height: 14px;\n text-overflow: ellipsis;\n max-width: 68px;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n"])));
25
+ const styledChipSelectedCss = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n position: relative;\n\n .app-picker__icon {\n fill: ", ";\n }\n\n &:focus {\n border: 2px solid transparent;\n &::after {\n border: 2px solid ", ";\n }\n }\n\n &::after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n width: calc(100% + 4px);\n height: calc(100% + 4px);\n border: 1px solid ", ";\n border-radius: 2px;\n }\n"])), props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.brand[600]);
26
+ const StyledChip = styled('button', {
27
+ name: 'DS-AppPicker',
28
+ slot: 'chip'
29
+ })(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 2%;\n padding: 8px 0 4px 0;\n margin: 4px;\n height: 68px;\n width: 68px;\n line-height: 1px;\n background-color: #fff;\n color: ", ";\n cursor: pointer;\n border: 2px solid transparent;\n overflow: hidden;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n .app-picker__icon {\n fill: ", ";\n }\n }\n\n &:focus {\n outline: none;\n border: 2px solid ", ";\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 border: 2px solid transparent;\n\n ", " {\n color: ", ";\n }\n }\n\n &:hover .app-picker__icon {\n fill: ", ";\n }\n }\n\n ", "\n"])), props => props.theme.colors.brand[600], props => props.theme.colors.brand[800], props => props.theme.colors.brand[200], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], StyledChipLabel, props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[500], props => !props.selected ? '' : styledChipSelectedCss);
30
+ const StyledSeparator = styled('hr', {
31
+ name: 'DS-AppPicker',
32
+ slot: 'separator'
33
+ })(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border-top: 1px solid ", ";\n border-bottom: none;\n width: 99%;\n margin-bottom: 0;\n"])), props => props.theme.colors.neutral[100]);
34
+
35
+ 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.0.0-next.8",
3
+ "version": "2.0.0-rc.11",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - App Picker",
6
6
  "module": "./esm/index.js",
@@ -19,6 +19,10 @@
19
19
  "import": "./esm/types/AppPickerTypes.js",
20
20
  "require": "./cjs/types/AppPickerTypes.js"
21
21
  },
22
+ "./styles": {
23
+ "import": "./esm/styles.js",
24
+ "require": "./cjs/styles.js"
25
+ },
22
26
  "./propTypes": {
23
27
  "import": "./esm/propTypes.js",
24
28
  "require": "./cjs/propTypes.js"
@@ -52,12 +56,17 @@
52
56
  "build": "node ../../scripts/build/build.js"
53
57
  },
54
58
  "dependencies": {
55
- "@elliemae/ds-button": "2.0.0-next.8",
56
- "@elliemae/ds-classnames": "2.0.0-next.8",
57
- "@elliemae/ds-icons": "2.0.0-next.8",
58
- "@elliemae/ds-popover": "2.0.0-next.8",
59
+ "@elliemae/ds-button": "2.0.0-rc.11",
60
+ "@elliemae/ds-classnames": "2.0.0-rc.11",
61
+ "@elliemae/ds-icons": "2.0.0-rc.11",
62
+ "@elliemae/ds-popover": "2.0.0-rc.11",
63
+ "@elliemae/ds-utilities": "2.0.0-rc.11",
59
64
  "react-desc": "^4.1.3"
60
65
  },
66
+ "devDependencies": {
67
+ "@testing-library/jest-dom": "~5.15.0",
68
+ "@testing-library/react": "~12.1.2"
69
+ },
61
70
  "peerDependencies": {
62
71
  "lodash": "^4.17.21",
63
72
  "react": "^17.0.2",
package/types/DSAppPicker.d.ts CHANGED
@@ -1,5 +1,11 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
2
+ import React from 'react';
1
3
  import type { DSAppPickerType } from './types/AppPickerTypes';
2
4
  declare const DSAppPicker: DSAppPickerType;
3
- declare const AppPickerWithSchema: any;
5
+ declare const AppPickerWithSchema: {
6
+ (props?: React.PropsWithChildren<import("./types/AppPickerTypes").AppPickerPropsType> | undefined): JSX.Element;
7
+ propTypes: unknown;
8
+ toTypescript: () => import("react-desc").TypescriptSchema;
9
+ };
4
10
  export { DSAppPicker, AppPickerWithSchema };
5
11
  export default DSAppPicker;
package/types/propTypes.d.ts CHANGED
@@ -1,14 +1,61 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  export declare const propTypes: {
2
- apps: any;
3
- customApps: any;
4
- sectionTitle: any;
5
- customSectionTitle: any;
6
- icon: any;
7
- renderTrigger: any;
8
- actionRef: any;
9
- isOpen: any;
10
- onClose: any;
11
- onKeyDown: any;
12
- onClick: any;
13
- onClickOutside: any;
3
+ apps: import("react-desc").PropTypesDescValidator;
4
+ customApps: {
5
+ defaultValue<T = unknown>(arg: T): {
6
+ deprecated: import("react-desc").PropTypesDescValidator;
7
+ };
8
+ isRequired: import("react-desc").PropTypesDescValidator;
9
+ };
10
+ sectionTitle: {
11
+ deprecated: import("react-desc").PropTypesDescValidator;
12
+ };
13
+ customSectionTitle: {
14
+ deprecated: import("react-desc").PropTypesDescValidator;
15
+ };
16
+ icon: {
17
+ deprecated: import("react-desc").PropTypesDescValidator;
18
+ };
19
+ renderTrigger: {
20
+ defaultValue<T = unknown>(arg: T): {
21
+ deprecated: import("react-desc").PropTypesDescValidator;
22
+ };
23
+ isRequired: import("react-desc").PropTypesDescValidator;
24
+ };
25
+ actionRef: {
26
+ defaultValue<T = unknown>(arg: T): {
27
+ deprecated: import("react-desc").PropTypesDescValidator;
28
+ };
29
+ isRequired: import("react-desc").PropTypesDescValidator;
30
+ };
31
+ isOpen: {
32
+ defaultValue<T = unknown>(arg: T): {
33
+ deprecated: import("react-desc").PropTypesDescValidator;
34
+ };
35
+ isRequired: import("react-desc").PropTypesDescValidator;
36
+ };
37
+ onClose: {
38
+ defaultValue<T = unknown>(arg: T): {
39
+ deprecated: import("react-desc").PropTypesDescValidator;
40
+ };
41
+ isRequired: import("react-desc").PropTypesDescValidator;
42
+ };
43
+ onKeyDown: {
44
+ defaultValue<T = unknown>(arg: T): {
45
+ deprecated: import("react-desc").PropTypesDescValidator;
46
+ };
47
+ isRequired: import("react-desc").PropTypesDescValidator;
48
+ };
49
+ onClick: {
50
+ defaultValue<T = unknown>(arg: T): {
51
+ deprecated: import("react-desc").PropTypesDescValidator;
52
+ };
53
+ isRequired: import("react-desc").PropTypesDescValidator;
54
+ };
55
+ onClickOutside: {
56
+ defaultValue<T = unknown>(arg: T): {
57
+ deprecated: import("react-desc").PropTypesDescValidator;
58
+ };
59
+ isRequired: import("react-desc").PropTypesDescValidator;
60
+ };
14
61
  };
package/types/styles.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ export declare const StyledWrapper: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
2
+ export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
3
+ export declare const StyledRow: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
4
+ export declare const StyledTitle: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
5
+ export declare const StyledChipLabel: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
6
+ export declare const StyledChip: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system/types/styled/types").Theme, {
7
+ selected: boolean;
8
+ }, never>;
9
+ export declare const StyledSeparator: import("styled-components").StyledComponent<"hr", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
package/types/types/AppPickerTypes.d.ts CHANGED
@@ -2,7 +2,10 @@
2
2
  import type { SvgIconType } from '@elliemae/ds-icons';
3
3
  export interface AppItemType {
4
4
  label: string;
5
- icon: React.Component;
5
+ icon: React.ComponentType<{
6
+ className: string;
7
+ size: string;
8
+ }>;
6
9
  onClick: () => void | null;
7
10
  disabled?: boolean;
8
11
  selected?: boolean;
@@ -13,15 +16,16 @@ export interface AppPickerPropsType {
13
16
  sectionTitle: string;
14
17
  customSectionTitle: string;
15
18
  icon: SvgIconType;
16
- onKeyDown?: (e: KeyboardEvent) => void;
19
+ onKeyDown?: (e: React.KeyboardEvent) => void;
17
20
  actionRef?: React.RefObject<{
18
21
  focusToIndex: (index: number) => void;
19
22
  }>;
20
23
  onClick?: (e: MouseEvent) => void;
21
- onClickOutside?: (e: MouseEvent) => void;
22
- renderTrigger?: JSX.Element;
24
+ onClickOutside?: (e: React.MouseEvent) => void;
25
+ renderTrigger?: React.ComponentType<any>;
23
26
  isOpen?: boolean;
24
27
  onClose?: () => void;
28
+ triggerRef?: React.RefObject<HTMLButtonElement>;
25
29
  }
26
30
  export interface AppPickerImplProps {
27
31
  apps: AppItemType[];