@elliemae/ds-app-picker 2.1.0-rc.1 → 2.1.0-rc.5

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 (8) hide show
  1. package/cjs/AppPickerImpl.js +8 -2
  2. package/cjs/DSAppPicker.js +17 -1
  3. package/cjs/styles.js +126 -11
  4. package/esm/AppPickerImpl.js +8 -2
  5. package/esm/DSAppPicker.js +17 -1
  6. package/esm/styles.js +126 -11
  7. package/package.json +6 -6
  8. package/types/styles.d.ts +1 -1
package/cjs/AppPickerImpl.js CHANGED
@@ -14,6 +14,7 @@ var react = require('react');
14
14
  var dsPropsHelpers = require('@elliemae/ds-props-helpers');
15
15
  var lodash = require('lodash');
16
16
  var utils = require('./utils.js');
17
+ var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
17
18
  var styles = require('./styles.js');
18
19
  var jsxRuntime = require('react/jsx-runtime');
19
20
 
@@ -40,7 +41,8 @@ const AppPickerImpl = _ref => {
40
41
  close = () => null,
41
42
  wrapperRef,
42
43
  onKeyDown,
43
- triggerRef
44
+ triggerRef,
45
+ isOverflow
44
46
  } = _ref;
45
47
  const allFocusableButtons = react.useRef([]);
46
48
  const selectedButton = react.useRef(null);
@@ -138,7 +140,10 @@ const AppPickerImpl = _ref => {
138
140
  children: [/*#__PURE__*/_jsx__default["default"](Icon, {
139
141
  className: "app-picker__icon",
140
142
  size: "m"
141
- }), /*#__PURE__*/_jsx__default["default"](styles.StyledChipLabel, {}, void 0, label)]
143
+ }), /*#__PURE__*/_jsx__default["default"](styles.StyledChipLabel, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
144
+ value: label,
145
+ placement: "bottom"
146
+ }))]
142
147
  }), key);
143
148
  })));
144
149
  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
@@ -155,6 +160,7 @@ const AppPickerImpl = _ref => {
155
160
  ref: wrapperRef,
156
161
  onKeyDown: handleOnKeyDownWrapper,
157
162
  "data-testid": "app-picker__wrapper",
163
+ isOverflow: isOverflow,
158
164
  children: [/*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {
159
165
  "data-testid": "app-picker__main-title",
160
166
  "aria-hidden": true
package/cjs/DSAppPicker.js CHANGED
@@ -41,6 +41,7 @@ const DSAppPicker = _ref => {
41
41
  triggerRef
42
42
  } = _ref;
43
43
  const [open, setOpen] = react.useState(false);
44
+ const [isOverflow, setIsOverflow] = react.useState(false);
44
45
  const wrapperRef = react.useRef(null);
45
46
  const defaultTriggerRef = react.useRef(null);
46
47
  react.useEffect(() => {
@@ -54,6 +55,19 @@ const DSAppPicker = _ref => {
54
55
  };
55
56
  }
56
57
  }, [actionRef, apps, customApps]);
58
+ react.useEffect(() => {
59
+ setTimeout(() => {
60
+ if (wrapperRef.current) {
61
+ const {
62
+ scrollHeight,
63
+ clientHeight
64
+ } = wrapperRef.current;
65
+ if (scrollHeight > clientHeight) return setIsOverflow(true);
66
+ }
67
+
68
+ return setIsOverflow(false);
69
+ });
70
+ }, [isOpen, open]);
57
71
 
58
72
  const handleOnClose = () => {
59
73
  if (typeof isOpen === 'boolean') {
@@ -79,7 +93,8 @@ const DSAppPicker = _ref => {
79
93
  close: handleOnClose,
80
94
  wrapperRef: wrapperRef,
81
95
  onKeyDown: onKeyDown,
82
- triggerRef: triggerRef || defaultTriggerRef
96
+ triggerRef: triggerRef || defaultTriggerRef,
97
+ isOverflow: isOverflow
83
98
  });
84
99
 
85
100
  const RenderTrigger = renderTrigger || (_ref2 => {
@@ -109,6 +124,7 @@ const DSAppPicker = _ref => {
109
124
  showArrow: true,
110
125
  style: {
111
126
  padding: '0',
127
+ maxWidth: '1000px',
112
128
  width: 'fit-content'
113
129
  }
114
130
  });
package/cjs/styles.js CHANGED
@@ -10,35 +10,150 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
  var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
11
11
 
12
12
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
13
+ const StyledTitle = dsSystem.styled('h3', {
14
+ name: 'DS-AppPicker',
15
+ 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 => {
17
+ let {
18
+ theme
19
+ } = _ref;
20
+ return theme.colors.neutral[700];
21
+ }, _ref2 => {
22
+ let {
23
+ theme
24
+ } = _ref2;
25
+ return theme.fontSizes.value[400];
26
+ }, _ref3 => {
27
+ let {
28
+ theme
29
+ } = _ref3;
30
+ return theme.fontWeights.semibold;
31
+ });
13
32
  const StyledWrapper = dsSystem.styled('ul', {
14
33
  name: 'DS-AppPicker',
15
34
  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"])));
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 => {
36
+ let {
37
+ isOverflow
38
+ } = _ref4;
39
+ return isOverflow ? '0 0 0 16px' : '0 16px';
40
+ });
17
41
  const StyledGrid = dsSystem.styled('div', {
18
42
  name: 'DS-AppPicker',
19
43
  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"])));
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"])));
21
45
  const StyledRow = dsSystem.styled('div', {
22
46
  name: 'DS-AppPicker',
23
47
  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]);
48
+ })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n display: flex;\n width: 100%;\n"])));
29
49
  const StyledChipLabel = dsSystem.styled('p', {
30
50
  name: 'DS-AppPicker',
31
51
  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]);
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 => {
53
+ let {
54
+ theme
55
+ } = _ref5;
56
+ return theme.fontSizes.label[200];
57
+ }, _ref6 => {
58
+ let {
59
+ theme
60
+ } = _ref6;
61
+ 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 => {
64
+ let {
65
+ theme
66
+ } = _ref7;
67
+ return theme.colors.brand[800];
68
+ }, _ref8 => {
69
+ let {
70
+ theme
71
+ } = _ref8;
72
+ return theme.colors.brand[200];
73
+ }, _ref9 => {
74
+ let {
75
+ theme
76
+ } = _ref9;
77
+ return theme.colors.brand[800];
78
+ }, _ref10 => {
79
+ let {
80
+ theme
81
+ } = _ref10;
82
+ return theme.colors.brand[600];
83
+ }, _ref11 => {
84
+ let {
85
+ theme
86
+ } = _ref11;
87
+ return theme.colors.brand[800];
88
+ });
34
89
  const StyledChip = dsSystem.styled('button', {
35
90
  name: 'DS-AppPicker',
36
91
  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);
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 => {
93
+ let {
94
+ theme
95
+ } = _ref12;
96
+ return theme.colors.brand[600];
97
+ }, _ref13 => {
98
+ let {
99
+ theme
100
+ } = _ref13;
101
+ return theme.colors.brand[600];
102
+ }, _ref14 => {
103
+ let {
104
+ theme
105
+ } = _ref14;
106
+ return theme.colors.brand[800];
107
+ }, _ref15 => {
108
+ let {
109
+ theme
110
+ } = _ref15;
111
+ return theme.colors.brand[200];
112
+ }, _ref16 => {
113
+ let {
114
+ theme
115
+ } = _ref16;
116
+ return theme.colors.brand[800];
117
+ }, _ref17 => {
118
+ let {
119
+ theme
120
+ } = _ref17;
121
+ return theme.colors.brand[800];
122
+ }, _ref18 => {
123
+ let {
124
+ theme
125
+ } = _ref18;
126
+ return theme.colors.neutral[500];
127
+ }, _ref19 => {
128
+ let {
129
+ theme
130
+ } = _ref19;
131
+ return theme.colors.neutral[500];
132
+ }, StyledChipLabel, _ref20 => {
133
+ let {
134
+ theme
135
+ } = _ref20;
136
+ return theme.colors.neutral[500];
137
+ }, _ref21 => {
138
+ let {
139
+ theme
140
+ } = _ref21;
141
+ return theme.colors.neutral[500];
142
+ }, _ref22 => {
143
+ let {
144
+ selected
145
+ } = _ref22;
146
+ return !selected ? '' : styledChipSelectedCss;
147
+ });
38
148
  const StyledSeparator = dsSystem.styled('hr', {
39
149
  name: 'DS-AppPicker',
40
150
  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]);
151
+ })(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n border-top: 1px solid ", ";\n border-bottom: none;\n width: 99%;\n margin: 0;\n"])), _ref23 => {
152
+ let {
153
+ theme
154
+ } = _ref23;
155
+ return theme.colors.neutral[100];
156
+ });
42
157
 
43
158
  exports.StyledChip = StyledChip;
44
159
  exports.StyledChipLabel = StyledChipLabel;
package/esm/AppPickerImpl.js CHANGED
@@ -12,6 +12,7 @@ import { useRef, useEffect, useCallback } from 'react';
12
12
  import { getDataProps } from '@elliemae/ds-props-helpers';
13
13
  import { chunk } from 'lodash';
14
14
  import { keys } from './utils.js';
15
+ import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
15
16
  import { StyledWrapper, StyledTitle, StyledGrid, StyledSeparator, StyledRow, StyledChip, StyledChipLabel } from './styles.js';
16
17
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
17
18
 
@@ -32,7 +33,8 @@ const AppPickerImpl = _ref => {
32
33
  close = () => null,
33
34
  wrapperRef,
34
35
  onKeyDown,
35
- triggerRef
36
+ triggerRef,
37
+ isOverflow
36
38
  } = _ref;
37
39
  const allFocusableButtons = useRef([]);
38
40
  const selectedButton = useRef(null);
@@ -130,7 +132,10 @@ const AppPickerImpl = _ref => {
130
132
  children: [/*#__PURE__*/_jsx(Icon, {
131
133
  className: "app-picker__icon",
132
134
  size: "m"
133
- }), /*#__PURE__*/_jsx(StyledChipLabel, {}, void 0, label)]
135
+ }), /*#__PURE__*/_jsx(StyledChipLabel, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
136
+ value: label,
137
+ placement: "bottom"
138
+ }))]
134
139
  }), key);
135
140
  })));
136
141
  return /*#__PURE__*/jsx(Fragment, {
@@ -147,6 +152,7 @@ const AppPickerImpl = _ref => {
147
152
  ref: wrapperRef,
148
153
  onKeyDown: handleOnKeyDownWrapper,
149
154
  "data-testid": "app-picker__wrapper",
155
+ isOverflow: isOverflow,
150
156
  children: [/*#__PURE__*/_jsx(StyledTitle, {
151
157
  "data-testid": "app-picker__main-title",
152
158
  "aria-hidden": true
package/esm/DSAppPicker.js CHANGED
@@ -31,6 +31,7 @@ const DSAppPicker = _ref => {
31
31
  triggerRef
32
32
  } = _ref;
33
33
  const [open, setOpen] = useState(false);
34
+ const [isOverflow, setIsOverflow] = useState(false);
34
35
  const wrapperRef = useRef(null);
35
36
  const defaultTriggerRef = useRef(null);
36
37
  useEffect(() => {
@@ -44,6 +45,19 @@ const DSAppPicker = _ref => {
44
45
  };
45
46
  }
46
47
  }, [actionRef, apps, customApps]);
48
+ useEffect(() => {
49
+ setTimeout(() => {
50
+ if (wrapperRef.current) {
51
+ const {
52
+ scrollHeight,
53
+ clientHeight
54
+ } = wrapperRef.current;
55
+ if (scrollHeight > clientHeight) return setIsOverflow(true);
56
+ }
57
+
58
+ return setIsOverflow(false);
59
+ });
60
+ }, [isOpen, open]);
47
61
 
48
62
  const handleOnClose = () => {
49
63
  if (typeof isOpen === 'boolean') {
@@ -69,7 +83,8 @@ const DSAppPicker = _ref => {
69
83
  close: handleOnClose,
70
84
  wrapperRef: wrapperRef,
71
85
  onKeyDown: onKeyDown,
72
- triggerRef: triggerRef || defaultTriggerRef
86
+ triggerRef: triggerRef || defaultTriggerRef,
87
+ isOverflow: isOverflow
73
88
  });
74
89
 
75
90
  const RenderTrigger = renderTrigger || (_ref2 => {
@@ -99,6 +114,7 @@ const DSAppPicker = _ref => {
99
114
  showArrow: true,
100
115
  style: {
101
116
  padding: '0',
117
+ maxWidth: '1000px',
102
118
  width: 'fit-content'
103
119
  }
104
120
  });
package/esm/styles.js CHANGED
@@ -2,34 +2,149 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLit
2
2
  import { styled, css } from '@elliemae/ds-system';
3
3
 
4
4
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
5
+ const StyledTitle = styled('h3', {
6
+ name: 'DS-AppPicker',
7
+ 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 => {
9
+ let {
10
+ theme
11
+ } = _ref;
12
+ return theme.colors.neutral[700];
13
+ }, _ref2 => {
14
+ let {
15
+ theme
16
+ } = _ref2;
17
+ return theme.fontSizes.value[400];
18
+ }, _ref3 => {
19
+ let {
20
+ theme
21
+ } = _ref3;
22
+ return theme.fontWeights.semibold;
23
+ });
5
24
  const StyledWrapper = styled('ul', {
6
25
  name: 'DS-AppPicker',
7
26
  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"])));
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 => {
28
+ let {
29
+ isOverflow
30
+ } = _ref4;
31
+ return isOverflow ? '0 0 0 16px' : '0 16px';
32
+ });
9
33
  const StyledGrid = styled('div', {
10
34
  name: 'DS-AppPicker',
11
35
  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"])));
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"])));
13
37
  const StyledRow = styled('div', {
14
38
  name: 'DS-AppPicker',
15
39
  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]);
40
+ })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n"])));
21
41
  const StyledChipLabel = styled('p', {
22
42
  name: 'DS-AppPicker',
23
43
  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]);
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 => {
45
+ let {
46
+ theme
47
+ } = _ref5;
48
+ return theme.fontSizes.label[200];
49
+ }, _ref6 => {
50
+ let {
51
+ theme
52
+ } = _ref6;
53
+ 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 => {
56
+ let {
57
+ theme
58
+ } = _ref7;
59
+ return theme.colors.brand[800];
60
+ }, _ref8 => {
61
+ let {
62
+ theme
63
+ } = _ref8;
64
+ return theme.colors.brand[200];
65
+ }, _ref9 => {
66
+ let {
67
+ theme
68
+ } = _ref9;
69
+ return theme.colors.brand[800];
70
+ }, _ref10 => {
71
+ let {
72
+ theme
73
+ } = _ref10;
74
+ return theme.colors.brand[600];
75
+ }, _ref11 => {
76
+ let {
77
+ theme
78
+ } = _ref11;
79
+ return theme.colors.brand[800];
80
+ });
26
81
  const StyledChip = styled('button', {
27
82
  name: 'DS-AppPicker',
28
83
  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);
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 => {
85
+ let {
86
+ theme
87
+ } = _ref12;
88
+ return theme.colors.brand[600];
89
+ }, _ref13 => {
90
+ let {
91
+ theme
92
+ } = _ref13;
93
+ return theme.colors.brand[600];
94
+ }, _ref14 => {
95
+ let {
96
+ theme
97
+ } = _ref14;
98
+ return theme.colors.brand[800];
99
+ }, _ref15 => {
100
+ let {
101
+ theme
102
+ } = _ref15;
103
+ return theme.colors.brand[200];
104
+ }, _ref16 => {
105
+ let {
106
+ theme
107
+ } = _ref16;
108
+ return theme.colors.brand[800];
109
+ }, _ref17 => {
110
+ let {
111
+ theme
112
+ } = _ref17;
113
+ return theme.colors.brand[800];
114
+ }, _ref18 => {
115
+ let {
116
+ theme
117
+ } = _ref18;
118
+ return theme.colors.neutral[500];
119
+ }, _ref19 => {
120
+ let {
121
+ theme
122
+ } = _ref19;
123
+ return theme.colors.neutral[500];
124
+ }, StyledChipLabel, _ref20 => {
125
+ let {
126
+ theme
127
+ } = _ref20;
128
+ return theme.colors.neutral[500];
129
+ }, _ref21 => {
130
+ let {
131
+ theme
132
+ } = _ref21;
133
+ return theme.colors.neutral[500];
134
+ }, _ref22 => {
135
+ let {
136
+ selected
137
+ } = _ref22;
138
+ return !selected ? '' : styledChipSelectedCss;
139
+ });
30
140
  const StyledSeparator = styled('hr', {
31
141
  name: 'DS-AppPicker',
32
142
  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]);
143
+ })(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border-top: 1px solid ", ";\n border-bottom: none;\n width: 99%;\n margin: 0;\n"])), _ref23 => {
144
+ let {
145
+ theme
146
+ } = _ref23;
147
+ return theme.colors.neutral[100];
148
+ });
34
149
 
35
150
  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.1.0-rc.1",
3
+ "version": "2.1.0-rc.5",
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.1.0-rc.1",
60
- "@elliemae/ds-icons": "2.1.0-rc.1",
61
- "@elliemae/ds-popover": "2.1.0-rc.1",
62
- "@elliemae/ds-system": "2.1.0-rc.1",
63
- "@elliemae/ds-utilities": "2.1.0-rc.1",
59
+ "@elliemae/ds-button": "2.1.0-rc.5",
60
+ "@elliemae/ds-icons": "2.1.0-rc.5",
61
+ "@elliemae/ds-popover": "2.1.0-rc.5",
62
+ "@elliemae/ds-system": "2.1.0-rc.5",
63
+ "@elliemae/ds-utilities": "2.1.0-rc.5",
64
64
  "react-desc": "^4.1.3"
65
65
  },
66
66
  "devDependencies": {
package/types/styles.d.ts CHANGED
@@ -1,7 +1,7 @@
1
+ export declare const StyledTitle: import("styled-components").StyledComponent<"h3", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
1
2
  export declare const StyledWrapper: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
2
3
  export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
3
4
  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
5
  export declare const StyledChipLabel: import("styled-components").StyledComponent<"p", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
6
6
  export declare const StyledChip: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system/types/styled/types").Theme, {
7
7
  selected: boolean | undefined;