@elliemae/ds-app-picker 2.0.0-rc.9 → 2.0.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 (9) hide show
  1. package/cjs/AppPickerImpl.js +42 -41
  2. package/cjs/DSAppPicker.js +1 -1
  3. package/cjs/styles.js +49 -0
  4. package/esm/AppPickerImpl.js +42 -43
  5. package/esm/DSAppPicker.js +1 -1
  6. package/esm/styles.js +35 -0
  7. package/package.json +14 -8
  8. package/types/styles.d.ts +9 -0
  9. package/types/types/AppPickerTypes.d.ts +9 -5
package/cjs/AppPickerImpl.js CHANGED
@@ -1,41 +1,37 @@
1
1
  'use strict';
2
2
 
3
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
3
4
  var _jsx = require('@babel/runtime/helpers/jsx');
5
+ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
4
6
  require('core-js/modules/esnext.async-iterator.for-each.js');
5
7
  require('core-js/modules/esnext.iterator.constructor.js');
6
8
  require('core-js/modules/esnext.iterator.for-each.js');
7
9
  require('core-js/modules/esnext.async-iterator.map.js');
8
10
  require('core-js/modules/esnext.iterator.map.js');
11
+ require('core-js/modules/esnext.async-iterator.filter.js');
12
+ require('core-js/modules/esnext.iterator.filter.js');
9
13
  var react = require('react');
14
+ var dsPropsHelpers = require('@elliemae/ds-props-helpers');
10
15
  var lodash = require('lodash');
11
- var dsClassnames = require('@elliemae/ds-classnames');
12
16
  var utils = require('./utils.js');
17
+ var styles = require('./styles.js');
13
18
  var jsxRuntime = require('react/jsx-runtime');
14
19
 
15
20
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
21
 
22
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
17
23
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
24
+ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
18
25
 
19
- var _Separator;
20
- const blockName = 'app-picker';
21
- const Wrapper = dsClassnames.aggregatedClasses('ul')(blockName, 'wrapper');
22
- const Grid = dsClassnames.aggregatedClasses('div')(blockName, 'grid');
23
- const Row = dsClassnames.aggregatedClasses('div')(blockName, 'row');
24
- const Chip = dsClassnames.aggregatedClasses('button')(blockName, 'chip', _ref => {
25
- let {
26
- disabled,
27
- selected
28
- } = _ref;
29
- return {
30
- disabled,
31
- selected
32
- };
33
- });
34
- const ChipLabel = dsClassnames.aggregatedClasses('p')(blockName, 'chip-label');
35
- const Separator = dsClassnames.aggregatedClasses('hr')(blockName, 'separator');
36
- const SectionTitle = dsClassnames.aggregatedClasses('p')(blockName, 'section-title');
26
+ var _StyledSeparator;
27
+
28
+ const _excluded = ["label", "disabled", "selected", "icon", "id"];
29
+
30
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
37
31
 
38
- const AppPickerImpl = _ref2 => {
32
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
33
+
34
+ const AppPickerImpl = _ref => {
39
35
  let {
40
36
  apps = [],
41
37
  customApps = [],
@@ -45,7 +41,7 @@ const AppPickerImpl = _ref2 => {
45
41
  wrapperRef,
46
42
  onKeyDown,
47
43
  triggerRef
48
- } = _ref2;
44
+ } = _ref;
49
45
  const allFocusableButtons = react.useRef([]);
50
46
  const selectedButton = react.useRef(null);
51
47
  react.useEffect(() => {
@@ -117,55 +113,60 @@ const AppPickerImpl = _ref2 => {
117
113
  let prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
118
114
  const rows = lodash.chunk(appList, 3); // divides array in subarrays of 3 items
119
115
 
120
- const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx__default["default"](Row, {}, index, row.map((app, key) => {
116
+ const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx__default["default"](styles.StyledRow, {}, index, row.map((app, key) => {
121
117
  const {
122
118
  label,
123
119
  disabled,
124
120
  selected,
125
- icon: Icon
126
- } = app;
127
- return /*#__PURE__*/_jsx__default["default"](Chip, {
128
- classProps: {
129
- disabled,
130
- selected
131
- },
121
+ icon: Icon,
122
+ id
123
+ } = app,
124
+ otherProps = _objectWithoutProperties__default["default"](app, _excluded);
125
+
126
+ return /*#__PURE__*/jsxRuntime.jsxs(styles.StyledChip, _objectSpread(_objectSpread({
132
127
  onClick: e => handleOnClick(e, app),
133
128
  onKeyDown: handleKeyDown,
134
129
  "data-testid": "app-picker__chip",
135
130
  "aria-disabled": disabled,
136
131
  disabled: disabled,
132
+ selected: selected,
137
133
  "aria-selected": selected,
138
134
  "aria-setsize": apps.length + customApps.length,
139
- "aria-posinset": key + prevIndex
140
- }, key, /*#__PURE__*/_jsx__default["default"](Icon, {
141
- className: "app-picker__icon",
142
- size: "m"
143
- }), /*#__PURE__*/_jsx__default["default"](ChipLabel, {}, void 0, label));
135
+ "aria-posinset": key + prevIndex,
136
+ id: id
137
+ }, dsPropsHelpers.getDataProps(otherProps)), {}, {
138
+ children: [/*#__PURE__*/_jsx__default["default"](Icon, {
139
+ className: "app-picker__icon",
140
+ size: "m"
141
+ }), /*#__PURE__*/_jsx__default["default"](styles.StyledChipLabel, {}, void 0, label)]
142
+ }), key);
144
143
  })));
145
- return formattedRows;
144
+ return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
145
+ children: formattedRows
146
+ });
146
147
  };
147
148
 
148
149
  const AppsRows = () => buildRows(apps, 1);
149
150
 
150
151
  const CustomRows = () => buildRows(customApps, apps.length);
151
152
 
152
- return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, {
153
+ return /*#__PURE__*/jsxRuntime.jsxs(styles.StyledWrapper, {
153
154
  role: "listbox",
154
155
  ref: wrapperRef,
155
156
  onKeyDown: handleOnKeyDownWrapper,
156
157
  "data-testid": "app-picker__wrapper",
157
- children: [/*#__PURE__*/_jsx__default["default"](SectionTitle, {
158
+ children: [/*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {
158
159
  "data-testid": "app-picker__main-title",
159
160
  "aria-hidden": true
160
- }, void 0, sectionTitle), /*#__PURE__*/_jsx__default["default"](Grid, {
161
+ }, void 0, sectionTitle), /*#__PURE__*/_jsx__default["default"](styles.StyledGrid, {
161
162
  "data-testid": "app-picker__main-grid"
162
163
  }, void 0, /*#__PURE__*/_jsx__default["default"](AppsRows, {})), !!customApps.length && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
163
- children: [_Separator || (_Separator = /*#__PURE__*/_jsx__default["default"](Separator, {
164
+ children: [_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styles.StyledSeparator, {
164
165
  "aria-hidden": true
165
- })), /*#__PURE__*/_jsx__default["default"](SectionTitle, {
166
+ })), /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {
166
167
  "data-testid": "app-picker__custom-title",
167
168
  "aria-hidden": true
168
- }, void 0, customSectionTitle), /*#__PURE__*/_jsx__default["default"](Grid, {
169
+ }, void 0, customSectionTitle), /*#__PURE__*/_jsx__default["default"](styles.StyledGrid, {
169
170
  "data-testid": "app-picker__custom-grid"
170
171
  }, void 0, /*#__PURE__*/_jsx__default["default"](CustomRows, {}))]
171
172
  })]
package/cjs/DSAppPicker.js CHANGED
@@ -44,7 +44,7 @@ const DSAppPicker = _ref => {
44
44
  const wrapperRef = react.useRef(null);
45
45
  const defaultTriggerRef = react.useRef(null);
46
46
  react.useEffect(() => {
47
- if (actionRef) {
47
+ if (actionRef && actionRef.current) {
48
48
  actionRef.current.focusToIndex = index => {
49
49
  if (wrapperRef.current) {
50
50
  const parent = wrapperRef.current;
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 0 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 overflow: hidden;\n"])));
33
+ const styledChipSelectedCss = dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n color: ", ";\n background-color: ", ";\n\n .app-picker__icon {\n fill: ", ";\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\n &:focus {\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: 2px solid ", ";\n border-radius: 2px;\n }\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[600], props => props.theme.colors.brand[800]);
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 position: relative;\n\n & .app-picker__icon {\n fill: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n .app-picker__icon {\n fill: ", ";\n }\n }\n\n &:focus {\n outline: none;\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: 2px solid ", ";\n border-radius: 2px;\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 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[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,35 +1,29 @@
1
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
1
2
  import _jsx from '@babel/runtime/helpers/esm/jsx';
3
+ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
2
4
  import 'core-js/modules/esnext.async-iterator.for-each.js';
3
5
  import 'core-js/modules/esnext.iterator.constructor.js';
4
6
  import 'core-js/modules/esnext.iterator.for-each.js';
5
7
  import 'core-js/modules/esnext.async-iterator.map.js';
6
8
  import 'core-js/modules/esnext.iterator.map.js';
9
+ import 'core-js/modules/esnext.async-iterator.filter.js';
10
+ import 'core-js/modules/esnext.iterator.filter.js';
7
11
  import { useRef, useEffect, useCallback } from 'react';
12
+ import { getDataProps } from '@elliemae/ds-props-helpers';
8
13
  import { chunk } from 'lodash';
9
- import { aggregatedClasses } from '@elliemae/ds-classnames';
10
14
  import { keys } from './utils.js';
11
- import { jsxs, Fragment } from 'react/jsx-runtime';
12
-
13
- var _Separator;
14
- const blockName = 'app-picker';
15
- const Wrapper = aggregatedClasses('ul')(blockName, 'wrapper');
16
- const Grid = aggregatedClasses('div')(blockName, 'grid');
17
- const Row = aggregatedClasses('div')(blockName, 'row');
18
- const Chip = aggregatedClasses('button')(blockName, 'chip', _ref => {
19
- let {
20
- disabled,
21
- selected
22
- } = _ref;
23
- return {
24
- disabled,
25
- selected
26
- };
27
- });
28
- const ChipLabel = aggregatedClasses('p')(blockName, 'chip-label');
29
- const Separator = aggregatedClasses('hr')(blockName, 'separator');
30
- const SectionTitle = aggregatedClasses('p')(blockName, 'section-title');
15
+ import { StyledWrapper, StyledTitle, StyledGrid, StyledSeparator, StyledRow, StyledChip, StyledChipLabel } from './styles.js';
16
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
17
+
18
+ var _StyledSeparator;
19
+
20
+ const _excluded = ["label", "disabled", "selected", "icon", "id"];
31
21
 
32
- const AppPickerImpl = _ref2 => {
22
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
23
+
24
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
25
+
26
+ const AppPickerImpl = _ref => {
33
27
  let {
34
28
  apps = [],
35
29
  customApps = [],
@@ -39,7 +33,7 @@ const AppPickerImpl = _ref2 => {
39
33
  wrapperRef,
40
34
  onKeyDown,
41
35
  triggerRef
42
- } = _ref2;
36
+ } = _ref;
43
37
  const allFocusableButtons = useRef([]);
44
38
  const selectedButton = useRef(null);
45
39
  useEffect(() => {
@@ -111,55 +105,60 @@ const AppPickerImpl = _ref2 => {
111
105
  let prevIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
112
106
  const rows = chunk(appList, 3); // divides array in subarrays of 3 items
113
107
 
114
- const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx(Row, {}, index, row.map((app, key) => {
108
+ const formattedRows = rows.map((row, index) => /*#__PURE__*/_jsx(StyledRow, {}, index, row.map((app, key) => {
115
109
  const {
116
110
  label,
117
111
  disabled,
118
112
  selected,
119
- icon: Icon
120
- } = app;
121
- return /*#__PURE__*/_jsx(Chip, {
122
- classProps: {
123
- disabled,
124
- selected
125
- },
113
+ icon: Icon,
114
+ id
115
+ } = app,
116
+ otherProps = _objectWithoutProperties(app, _excluded);
117
+
118
+ return /*#__PURE__*/jsxs(StyledChip, _objectSpread(_objectSpread({
126
119
  onClick: e => handleOnClick(e, app),
127
120
  onKeyDown: handleKeyDown,
128
121
  "data-testid": "app-picker__chip",
129
122
  "aria-disabled": disabled,
130
123
  disabled: disabled,
124
+ selected: selected,
131
125
  "aria-selected": selected,
132
126
  "aria-setsize": apps.length + customApps.length,
133
- "aria-posinset": key + prevIndex
134
- }, key, /*#__PURE__*/_jsx(Icon, {
135
- className: "app-picker__icon",
136
- size: "m"
137
- }), /*#__PURE__*/_jsx(ChipLabel, {}, void 0, label));
127
+ "aria-posinset": key + prevIndex,
128
+ id: id
129
+ }, getDataProps(otherProps)), {}, {
130
+ children: [/*#__PURE__*/_jsx(Icon, {
131
+ className: "app-picker__icon",
132
+ size: "m"
133
+ }), /*#__PURE__*/_jsx(StyledChipLabel, {}, void 0, label)]
134
+ }), key);
138
135
  })));
139
- return formattedRows;
136
+ return /*#__PURE__*/jsx(Fragment, {
137
+ children: formattedRows
138
+ });
140
139
  };
141
140
 
142
141
  const AppsRows = () => buildRows(apps, 1);
143
142
 
144
143
  const CustomRows = () => buildRows(customApps, apps.length);
145
144
 
146
- return /*#__PURE__*/jsxs(Wrapper, {
145
+ return /*#__PURE__*/jsxs(StyledWrapper, {
147
146
  role: "listbox",
148
147
  ref: wrapperRef,
149
148
  onKeyDown: handleOnKeyDownWrapper,
150
149
  "data-testid": "app-picker__wrapper",
151
- children: [/*#__PURE__*/_jsx(SectionTitle, {
150
+ children: [/*#__PURE__*/_jsx(StyledTitle, {
152
151
  "data-testid": "app-picker__main-title",
153
152
  "aria-hidden": true
154
- }, void 0, sectionTitle), /*#__PURE__*/_jsx(Grid, {
153
+ }, void 0, sectionTitle), /*#__PURE__*/_jsx(StyledGrid, {
155
154
  "data-testid": "app-picker__main-grid"
156
155
  }, void 0, /*#__PURE__*/_jsx(AppsRows, {})), !!customApps.length && /*#__PURE__*/jsxs(Fragment, {
157
- children: [_Separator || (_Separator = /*#__PURE__*/_jsx(Separator, {
156
+ children: [_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
158
157
  "aria-hidden": true
159
- })), /*#__PURE__*/_jsx(SectionTitle, {
158
+ })), /*#__PURE__*/_jsx(StyledTitle, {
160
159
  "data-testid": "app-picker__custom-title",
161
160
  "aria-hidden": true
162
- }, void 0, customSectionTitle), /*#__PURE__*/_jsx(Grid, {
161
+ }, void 0, customSectionTitle), /*#__PURE__*/_jsx(StyledGrid, {
163
162
  "data-testid": "app-picker__custom-grid"
164
163
  }, void 0, /*#__PURE__*/_jsx(CustomRows, {}))]
165
164
  })]
package/esm/DSAppPicker.js CHANGED
@@ -34,7 +34,7 @@ const DSAppPicker = _ref => {
34
34
  const wrapperRef = useRef(null);
35
35
  const defaultTriggerRef = useRef(null);
36
36
  useEffect(() => {
37
- if (actionRef) {
37
+ if (actionRef && actionRef.current) {
38
38
  actionRef.current.focusToIndex = index => {
39
39
  if (wrapperRef.current) {
40
40
  const parent = wrapperRef.current;
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 0 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 overflow: hidden;\n"])));
25
+ const styledChipSelectedCss = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n\n .app-picker__icon {\n fill: ", ";\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\n &:focus {\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: 2px solid ", ";\n border-radius: 2px;\n }\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[600], props => props.theme.colors.brand[800]);
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 position: relative;\n\n & .app-picker__icon {\n fill: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n .app-picker__icon {\n fill: ", ";\n }\n }\n\n &:focus {\n outline: none;\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: 2px solid ", ";\n border-radius: 2px;\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 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[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-rc.9",
3
+ "version": "2.0.0",
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,21 +56,23 @@
52
56
  "build": "node ../../scripts/build/build.js"
53
57
  },
54
58
  "dependencies": {
55
- "@elliemae/ds-button": "2.0.0-rc.9",
56
- "@elliemae/ds-classnames": "2.0.0-rc.9",
57
- "@elliemae/ds-icons": "2.0.0-rc.9",
58
- "@elliemae/ds-popover": "2.0.0-rc.9",
59
- "@elliemae/ds-utilities": "2.0.0-rc.9",
59
+ "@elliemae/ds-button": "2.0.0",
60
+ "@elliemae/ds-icons": "2.0.0",
61
+ "@elliemae/ds-popover": "2.0.0",
62
+ "@elliemae/ds-system": "2.0.0",
63
+ "@elliemae/ds-utilities": "2.0.0",
60
64
  "react-desc": "^4.1.3"
61
65
  },
62
66
  "devDependencies": {
63
67
  "@testing-library/jest-dom": "~5.15.0",
64
- "@testing-library/react": "~12.1.2"
68
+ "@testing-library/react": "~12.1.2",
69
+ "styled-components": "~5.3.3"
65
70
  },
66
71
  "peerDependencies": {
67
72
  "lodash": "^4.17.21",
68
73
  "react": "^17.0.2",
69
- "react-dom": "^17.0.2"
74
+ "react-dom": "^17.0.2",
75
+ "styled-components": "^5.3.3"
70
76
  },
71
77
  "publishConfig": {
72
78
  "access": "public",
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 | undefined;
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[];
@@ -30,7 +34,7 @@ export interface AppPickerImplProps {
30
34
  customSectionTitle: string;
31
35
  close?: () => void;
32
36
  onKeyDown: (e: KeyboardEvent) => void;
33
- wrapperRef: React.RefObject<HTMLDivElement>;
37
+ wrapperRef: React.RefObject<HTMLUListElement>;
34
38
  triggerRef: React.RefObject<HTMLElement>;
35
39
  }
36
40
  export declare type DSAppPickerImplType = React.ComponentType<AppPickerImplProps>;