@elliemae/ds-app-picker 2.0.0-rc.13 → 2.0.0-rc.17
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.
- package/cjs/AppPickerImpl.js +27 -8
- package/cjs/styles.js +3 -3
- package/esm/AppPickerImpl.js +25 -8
- package/esm/styles.js +3 -3
- package/package.json +6 -6
package/cjs/AppPickerImpl.js
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
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
16
|
var utils = require('./utils.js');
|
|
12
17
|
var styles = require('./styles.js');
|
|
@@ -14,10 +19,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
26
|
var _StyledSeparator;
|
|
20
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; }
|
|
31
|
+
|
|
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
|
+
|
|
21
34
|
const AppPickerImpl = _ref => {
|
|
22
35
|
let {
|
|
23
36
|
apps = [],
|
|
@@ -105,9 +118,12 @@ const AppPickerImpl = _ref => {
|
|
|
105
118
|
label,
|
|
106
119
|
disabled,
|
|
107
120
|
selected,
|
|
108
|
-
icon: Icon
|
|
109
|
-
|
|
110
|
-
|
|
121
|
+
icon: Icon,
|
|
122
|
+
id
|
|
123
|
+
} = app,
|
|
124
|
+
otherProps = _objectWithoutProperties__default["default"](app, _excluded);
|
|
125
|
+
|
|
126
|
+
return /*#__PURE__*/jsxRuntime.jsxs(styles.StyledChip, _objectSpread(_objectSpread({
|
|
111
127
|
onClick: e => handleOnClick(e, app),
|
|
112
128
|
onKeyDown: handleKeyDown,
|
|
113
129
|
"data-testid": "app-picker__chip",
|
|
@@ -116,11 +132,14 @@ const AppPickerImpl = _ref => {
|
|
|
116
132
|
selected: selected,
|
|
117
133
|
"aria-selected": selected,
|
|
118
134
|
"aria-setsize": apps.length + customApps.length,
|
|
119
|
-
"aria-posinset": key + prevIndex
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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);
|
|
124
143
|
})));
|
|
125
144
|
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
126
145
|
children: formattedRows
|
package/cjs/styles.js
CHANGED
|
@@ -29,12 +29,12 @@ const StyledTitle = dsSystem.styled('p', {
|
|
|
29
29
|
const StyledChipLabel = dsSystem.styled('p', {
|
|
30
30
|
name: 'DS-AppPicker',
|
|
31
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
|
|
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
34
|
const StyledChip = dsSystem.styled('button', {
|
|
35
35
|
name: 'DS-AppPicker',
|
|
36
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
|
|
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
38
|
const StyledSeparator = dsSystem.styled('hr', {
|
|
39
39
|
name: 'DS-AppPicker',
|
|
40
40
|
slot: 'separator'
|
package/esm/AppPickerImpl.js
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
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
14
|
import { keys } from './utils.js';
|
|
10
15
|
import { StyledWrapper, StyledTitle, StyledGrid, StyledSeparator, StyledRow, StyledChip, StyledChipLabel } from './styles.js';
|
|
@@ -12,6 +17,12 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
|
12
17
|
|
|
13
18
|
var _StyledSeparator;
|
|
14
19
|
|
|
20
|
+
const _excluded = ["label", "disabled", "selected", "icon", "id"];
|
|
21
|
+
|
|
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
|
+
|
|
15
26
|
const AppPickerImpl = _ref => {
|
|
16
27
|
let {
|
|
17
28
|
apps = [],
|
|
@@ -99,9 +110,12 @@ const AppPickerImpl = _ref => {
|
|
|
99
110
|
label,
|
|
100
111
|
disabled,
|
|
101
112
|
selected,
|
|
102
|
-
icon: Icon
|
|
103
|
-
|
|
104
|
-
|
|
113
|
+
icon: Icon,
|
|
114
|
+
id
|
|
115
|
+
} = app,
|
|
116
|
+
otherProps = _objectWithoutProperties(app, _excluded);
|
|
117
|
+
|
|
118
|
+
return /*#__PURE__*/jsxs(StyledChip, _objectSpread(_objectSpread({
|
|
105
119
|
onClick: e => handleOnClick(e, app),
|
|
106
120
|
onKeyDown: handleKeyDown,
|
|
107
121
|
"data-testid": "app-picker__chip",
|
|
@@ -110,11 +124,14 @@ const AppPickerImpl = _ref => {
|
|
|
110
124
|
selected: selected,
|
|
111
125
|
"aria-selected": selected,
|
|
112
126
|
"aria-setsize": apps.length + customApps.length,
|
|
113
|
-
"aria-posinset": key + prevIndex
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
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);
|
|
118
135
|
})));
|
|
119
136
|
return /*#__PURE__*/jsx(Fragment, {
|
|
120
137
|
children: formattedRows
|
package/esm/styles.js
CHANGED
|
@@ -21,12 +21,12 @@ const StyledTitle = styled('p', {
|
|
|
21
21
|
const StyledChipLabel = styled('p', {
|
|
22
22
|
name: 'DS-AppPicker',
|
|
23
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
|
|
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
26
|
const StyledChip = styled('button', {
|
|
27
27
|
name: 'DS-AppPicker',
|
|
28
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
|
|
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
30
|
const StyledSeparator = styled('hr', {
|
|
31
31
|
name: 'DS-AppPicker',
|
|
32
32
|
slot: 'separator'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-app-picker",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.17",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - App Picker",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -56,11 +56,11 @@
|
|
|
56
56
|
"build": "node ../../scripts/build/build.js"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@elliemae/ds-button": "2.0.0-rc.
|
|
60
|
-
"@elliemae/ds-icons": "2.0.0-rc.
|
|
61
|
-
"@elliemae/ds-popover": "2.0.0-rc.
|
|
62
|
-
"@elliemae/ds-system": "2.0.0-rc.
|
|
63
|
-
"@elliemae/ds-utilities": "2.0.0-rc.
|
|
59
|
+
"@elliemae/ds-button": "2.0.0-rc.17",
|
|
60
|
+
"@elliemae/ds-icons": "2.0.0-rc.17",
|
|
61
|
+
"@elliemae/ds-popover": "2.0.0-rc.17",
|
|
62
|
+
"@elliemae/ds-system": "2.0.0-rc.17",
|
|
63
|
+
"@elliemae/ds-utilities": "2.0.0-rc.17",
|
|
64
64
|
"react-desc": "^4.1.3"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|