@elliemae/ds-app-picker 2.0.0-rc.11 → 2.0.0-rc.15
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/DSAppPicker.js +1 -1
- package/cjs/styles.js +3 -3
- package/esm/DSAppPicker.js +1 -1
- package/esm/styles.js +3 -3
- package/package.json +10 -8
- package/types/styles.d.ts +1 -1
- package/types/types/AppPickerTypes.d.ts +1 -1
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
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/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
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.15",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - App Picker",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -56,21 +56,23 @@
|
|
|
56
56
|
"build": "node ../../scripts/build/build.js"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@elliemae/ds-button": "2.0.0-rc.
|
|
60
|
-
"@elliemae/ds-
|
|
61
|
-
"@elliemae/ds-
|
|
62
|
-
"@elliemae/ds-
|
|
63
|
-
"@elliemae/ds-utilities": "2.0.0-rc.
|
|
59
|
+
"@elliemae/ds-button": "2.0.0-rc.15",
|
|
60
|
+
"@elliemae/ds-icons": "2.0.0-rc.15",
|
|
61
|
+
"@elliemae/ds-popover": "2.0.0-rc.15",
|
|
62
|
+
"@elliemae/ds-system": "2.0.0-rc.15",
|
|
63
|
+
"@elliemae/ds-utilities": "2.0.0-rc.15",
|
|
64
64
|
"react-desc": "^4.1.3"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
67
|
"@testing-library/jest-dom": "~5.15.0",
|
|
68
|
-
"@testing-library/react": "~12.1.2"
|
|
68
|
+
"@testing-library/react": "~12.1.2",
|
|
69
|
+
"styled-components": "~5.3.3"
|
|
69
70
|
},
|
|
70
71
|
"peerDependencies": {
|
|
71
72
|
"lodash": "^4.17.21",
|
|
72
73
|
"react": "^17.0.2",
|
|
73
|
-
"react-dom": "^17.0.2"
|
|
74
|
+
"react-dom": "^17.0.2",
|
|
75
|
+
"styled-components": "^5.3.3"
|
|
74
76
|
},
|
|
75
77
|
"publishConfig": {
|
|
76
78
|
"access": "public",
|
package/types/styles.d.ts
CHANGED
|
@@ -4,6 +4,6 @@ export declare const StyledRow: import("styled-components").StyledComponent<"div
|
|
|
4
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
|
-
selected: boolean;
|
|
7
|
+
selected: boolean | undefined;
|
|
8
8
|
}, never>;
|
|
9
9
|
export declare const StyledSeparator: import("styled-components").StyledComponent<"hr", import("@elliemae/ds-system/types/styled/types").Theme, {}, never>;
|
|
@@ -34,7 +34,7 @@ export interface AppPickerImplProps {
|
|
|
34
34
|
customSectionTitle: string;
|
|
35
35
|
close?: () => void;
|
|
36
36
|
onKeyDown: (e: KeyboardEvent) => void;
|
|
37
|
-
wrapperRef: React.RefObject<
|
|
37
|
+
wrapperRef: React.RefObject<HTMLUListElement>;
|
|
38
38
|
triggerRef: React.RefObject<HTMLElement>;
|
|
39
39
|
}
|
|
40
40
|
export declare type DSAppPickerImplType = React.ComponentType<AppPickerImplProps>;
|