@elliemae/ds-app-picker 3.0.0-next.77 → 3.0.0-next.78
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/dist/cjs/AppPickerImpl.js +14 -42
- package/dist/cjs/AppPickerImpl.js.map +2 -2
- package/dist/cjs/styles.js +0 -111
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/types/AppPickerTypes.js.map +1 -1
- package/dist/esm/AppPickerImpl.js +15 -53
- package/dist/esm/AppPickerImpl.js.map +2 -2
- package/dist/esm/styles.js +1 -112
- package/dist/esm/styles.js.map +2 -2
- package/package.json +2 -1
|
@@ -2,34 +2,8 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
-
var __spreadValues = (a, b) => {
|
|
11
|
-
for (var prop in b || (b = {}))
|
|
12
|
-
if (__hasOwnProp.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
if (__getOwnPropSymbols)
|
|
15
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
-
if (__propIsEnum.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
}
|
|
19
|
-
return a;
|
|
20
|
-
};
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
7
|
var __export = (target, all) => {
|
|
34
8
|
for (var name in all)
|
|
35
9
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -51,9 +25,8 @@ __export(AppPickerImpl_exports, {
|
|
|
51
25
|
module.exports = __toCommonJS(AppPickerImpl_exports);
|
|
52
26
|
var React = __toESM(require("react"));
|
|
53
27
|
var import_react = __toESM(require("react"));
|
|
54
|
-
var
|
|
28
|
+
var import_ds_chip = require("@elliemae/ds-chip");
|
|
55
29
|
var import_utils = require("./utils");
|
|
56
|
-
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
57
30
|
var import_styles = require("./styles");
|
|
58
31
|
const AppPickerImpl = ({
|
|
59
32
|
apps = [],
|
|
@@ -83,7 +56,7 @@ const AppPickerImpl = ({
|
|
|
83
56
|
allFocusableButtons?.current[0]?.focus();
|
|
84
57
|
}
|
|
85
58
|
}, [wrapperRef]);
|
|
86
|
-
const handleKeyDown = (e) => {
|
|
59
|
+
const handleKeyDown = (0, import_react.useCallback)((e) => {
|
|
87
60
|
switch (e.key) {
|
|
88
61
|
case import_utils.keys.ESC:
|
|
89
62
|
triggerRef?.current?.focus();
|
|
@@ -103,7 +76,7 @@ const AppPickerImpl = ({
|
|
|
103
76
|
default:
|
|
104
77
|
break;
|
|
105
78
|
}
|
|
106
|
-
};
|
|
79
|
+
}, [close, triggerRef]);
|
|
107
80
|
const handleOnClick = (0, import_react.useCallback)((app) => (e) => {
|
|
108
81
|
if (app.onClick)
|
|
109
82
|
app.onClick(e, app);
|
|
@@ -118,8 +91,8 @@ const AppPickerImpl = ({
|
|
|
118
91
|
const totalAppsLenght = (0, import_react.useMemo)(() => apps.length + customApps.length, []);
|
|
119
92
|
const buildRows = (0, import_react.useCallback)((appList, prevIndex = 0, title) => {
|
|
120
93
|
const formattedRows = appList.map((app, index) => {
|
|
121
|
-
const
|
|
122
|
-
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledListItem, null, /* @__PURE__ */ import_react.default.createElement(
|
|
94
|
+
const { label, disabled, selected, icon: Icon, id } = app;
|
|
95
|
+
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledListItem, null, /* @__PURE__ */ import_react.default.createElement(import_ds_chip.DSChip, {
|
|
123
96
|
key: index,
|
|
124
97
|
onClick: handleOnClick(app),
|
|
125
98
|
onKeyDown: handleKeyDown,
|
|
@@ -131,17 +104,16 @@ const AppPickerImpl = ({
|
|
|
131
104
|
"aria-setsize": totalAppsLenght,
|
|
132
105
|
"aria-posinset": index + prevIndex,
|
|
133
106
|
id,
|
|
134
|
-
"aria-label": `${label}. ${title}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
}))));
|
|
107
|
+
"aria-label": `${label}. ${title}`,
|
|
108
|
+
icon: () => /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
109
|
+
className: "app-picker__icon",
|
|
110
|
+
size: "m"
|
|
111
|
+
}),
|
|
112
|
+
label
|
|
113
|
+
}));
|
|
142
114
|
});
|
|
143
115
|
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, formattedRows);
|
|
144
|
-
}, []);
|
|
116
|
+
}, [handleKeyDown, handleOnClick, totalAppsLenght]);
|
|
145
117
|
const AppsRows = (0, import_react.useMemo)(() => buildRows(apps, 1, sectionTitle), []);
|
|
146
118
|
const CustomRows = (0, import_react.useMemo)(() => buildRows(customApps, apps.length, customSectionTitle), []);
|
|
147
119
|
const layout = (0, import_react.useMemo)(() => {
|
|
@@ -161,7 +133,7 @@ const AppPickerImpl = ({
|
|
|
161
133
|
rows,
|
|
162
134
|
cols
|
|
163
135
|
};
|
|
164
|
-
}, []);
|
|
136
|
+
}, [apps.length, customApps.length]);
|
|
165
137
|
return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledWrapper, {
|
|
166
138
|
role: "listbox",
|
|
167
139
|
ref: wrapperRef,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/AppPickerImpl.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\nimport React, { useEffect, useCallback, useRef, useMemo } from 'react';\nimport {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\nimport React, { useEffect, useCallback, useRef, useMemo } from 'react';\nimport { DSChip } from '@elliemae/ds-chip';\nimport { keys } from './utils';\nimport { AppItemType, DSAppPickerImplType } from './types/AppPickerTypes';\nimport { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from './styles';\n\nconst AppPickerImpl: DSAppPickerImplType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n close = () => null,\n wrapperRef,\n onKeyDown,\n triggerRef,\n isOverflow,\n}) => {\n const allFocusableButtons = useRef<HTMLButtonElement[]>([]);\n const selectedButton = useRef<number | null>(null);\n\n useEffect(() => {\n wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {\n if (!e.hasAttribute('disabled')) {\n allFocusableButtons?.current?.push(e);\n }\n if (e.getAttribute('aria-selected') === 'true') {\n selectedButton.current = index;\n }\n });\n\n if (selectedButton.current) {\n wrapperRef?.current?.querySelectorAll('button')[selectedButton.current].focus();\n } else {\n allFocusableButtons?.current[0]?.focus();\n }\n }, [wrapperRef]);\n\n // eslint-disable-next-line max-statements\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n switch (e.key) {\n case keys.ESC:\n triggerRef?.current?.focus();\n close();\n break;\n case keys.TAB:\n if (e.shiftKey) {\n if (e.target === allFocusableButtons.current[0]) {\n e.preventDefault();\n allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();\n }\n } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {\n e.preventDefault();\n allFocusableButtons?.current[0]?.focus();\n }\n break;\n default:\n break;\n }\n },\n [close, triggerRef],\n );\n\n const handleOnClick = useCallback(\n (app: AppItemType) => (e: React.MouseEvent) => {\n if (app.onClick) app.onClick(e, app);\n },\n [],\n );\n\n const handleOnKeyDownWrapper = useCallback(\n (e) => {\n if (onKeyDown) onKeyDown(e);\n if (!onKeyDown && e.key === keys.ESC) {\n close();\n }\n },\n [onKeyDown, close],\n );\n\n const totalAppsLenght = useMemo(() => apps.length + customApps.length, []);\n\n const buildRows = useCallback(\n (appList: AppItemType[], prevIndex = 0, title: string): JSX.Element => {\n const formattedRows = appList.map((app, index) => {\n const { label, disabled, selected, icon: Icon, id } = app;\n return (\n <StyledListItem>\n <DSChip\n key={index}\n onClick={handleOnClick(app)}\n onKeyDown={handleKeyDown}\n data-testid=\"app-picker__chip\"\n aria-disabled={disabled}\n disabled={disabled}\n selected={selected}\n aria-selected={selected}\n aria-setsize={totalAppsLenght}\n aria-posinset={index + prevIndex}\n id={id}\n aria-label={`${label}. ${title}`}\n icon={() => <Icon className=\"app-picker__icon\" size=\"m\" />}\n label={label}\n ></DSChip>\n </StyledListItem>\n );\n });\n\n return <>{formattedRows}</>;\n },\n [handleKeyDown, handleOnClick, totalAppsLenght],\n );\n\n const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), []);\n const CustomRows = useMemo(() => buildRows(customApps, apps.length, customSectionTitle), []);\n\n const layout = useMemo(() => {\n const cols = ['repeat(3, 92px)'];\n let appsRows = 0;\n let customRows = 0;\n let rows = [];\n if (apps.length > 0) {\n appsRows = apps.length / 3;\n rows.push('68px', `repeat(${appsRows}, 68px})`);\n }\n if (customApps.length > 0) {\n customRows = customApps.length / 3;\n rows.push('9px', '68px', `repeat(${customRows}, 68px})`);\n }\n return {\n rows,\n cols,\n };\n }, [apps.length, customApps.length]);\n\n return (\n <StyledWrapper\n role=\"listbox\"\n ref={wrapperRef}\n onKeyDown={handleOnKeyDownWrapper}\n data-testid=\"app-picker__wrapper\"\n isOverflow={isOverflow}\n cols={layout.cols}\n rows={layout.rows}\n forwardedAs=\"ul\"\n >\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__main-title\">{sectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {AppsRows}\n {customApps.length > 0 && (\n <>\n <StyledListItemFullRow aria-hidden>\n <StyledSeparator />\n </StyledListItemFullRow>\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__custom-title\">{customSectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {CustomRows}\n </>\n )}\n </StyledWrapper>\n );\n};\n\nexport default AppPickerImpl;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -20,8 +20,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
20
20
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
21
21
|
var styles_exports = {};
|
|
22
22
|
__export(styles_exports, {
|
|
23
|
-
StyledChip: () => StyledChip,
|
|
24
|
-
StyledChipLabel: () => StyledChipLabel,
|
|
25
23
|
StyledListItem: () => StyledListItem,
|
|
26
24
|
StyledListItemFullRow: () => StyledListItemFullRow,
|
|
27
25
|
StyledSeparator: () => StyledSeparator,
|
|
@@ -32,24 +30,6 @@ module.exports = __toCommonJS(styles_exports);
|
|
|
32
30
|
var React = __toESM(require("react"));
|
|
33
31
|
var import_ds_system = require("@elliemae/ds-system");
|
|
34
32
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
35
|
-
const styledChipSelectedSetter = import_ds_system.css`
|
|
36
|
-
color: ${({ theme }) => theme.colors.brand[800]};
|
|
37
|
-
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
38
|
-
|
|
39
|
-
.app-picker__icon {
|
|
40
|
-
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
&:before {
|
|
44
|
-
border: 1px solid ${({ theme }) => theme.colors.brand[600]};
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
&:focus {
|
|
48
|
-
&:before {
|
|
49
|
-
border: 2px solid ${({ theme }) => theme.colors.brand[800]};
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
`;
|
|
53
33
|
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: "DS-AppPicker", slot: "root" })`
|
|
54
34
|
align-items: center;
|
|
55
35
|
min-width: 308px;
|
|
@@ -79,97 +59,6 @@ const StyledTitle = (0, import_ds_system.styled)("h3", { name: "DS-AppPicker", s
|
|
|
79
59
|
line-height: 1.385;
|
|
80
60
|
text-transform: uppercase;
|
|
81
61
|
`;
|
|
82
|
-
const StyledChipLabel = (0, import_ds_system.styled)("p", { name: "DS-AppPicker", slot: "chipLabel" })`
|
|
83
|
-
font-size: ${({ theme }) => theme.fontSizes.label[200]};
|
|
84
|
-
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
85
|
-
word-wrap: break-word;
|
|
86
|
-
margin: 0 6px;
|
|
87
|
-
line-height: 1.45;
|
|
88
|
-
width: 100%;
|
|
89
|
-
z-index: 120;
|
|
90
|
-
|
|
91
|
-
& span {
|
|
92
|
-
padding-top: 6px;
|
|
93
|
-
}
|
|
94
|
-
`;
|
|
95
|
-
const StyledChip = (0, import_ds_system.styled)("button", { name: "DS-AppPicker", slot: "chip" })`
|
|
96
|
-
position: relative;
|
|
97
|
-
display: flex;
|
|
98
|
-
flex-direction: column;
|
|
99
|
-
align-items: center;
|
|
100
|
-
justify-content: center;
|
|
101
|
-
border: none;
|
|
102
|
-
height: 68px;
|
|
103
|
-
width: 92px;
|
|
104
|
-
background-color: #fff;
|
|
105
|
-
color: ${({ theme }) => theme.colors.brand[600]};
|
|
106
|
-
cursor: pointer;
|
|
107
|
-
outline: none;
|
|
108
|
-
|
|
109
|
-
&:before {
|
|
110
|
-
content: '';
|
|
111
|
-
position: absolute;
|
|
112
|
-
top: 0;
|
|
113
|
-
left: 0;
|
|
114
|
-
width: 100%;
|
|
115
|
-
height: 100%;
|
|
116
|
-
border-radius: 2px;
|
|
117
|
-
border: 2px solid transparent;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
& .app-picker__icon {
|
|
121
|
-
fill: ${({ theme }) => theme.colors.brand[600]};
|
|
122
|
-
height: 28px;
|
|
123
|
-
width: 28px;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
& .app-picker__icon svg {
|
|
127
|
-
height: 28px;
|
|
128
|
-
width: 28px;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
&:hover {
|
|
132
|
-
color: ${({ theme }) => theme.colors.brand[800]};
|
|
133
|
-
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
134
|
-
.app-picker__icon {
|
|
135
|
-
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
&:focus {
|
|
140
|
-
&:before {
|
|
141
|
-
border-color: ${({ theme }) => theme.colors.brand[800]};
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
&:disabled {
|
|
146
|
-
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
147
|
-
cursor: not-allowed;
|
|
148
|
-
|
|
149
|
-
.app-picker__icon {
|
|
150
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
&:focus,
|
|
154
|
-
&:hover {
|
|
155
|
-
background-color: #fff;
|
|
156
|
-
cursor: not-allowed;
|
|
157
|
-
&:before {
|
|
158
|
-
border-color: transparent;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
${StyledChipLabel} {
|
|
162
|
-
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
&:hover .app-picker__icon {
|
|
167
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
${({ selected }) => !selected ? "" : styledChipSelectedSetter}
|
|
172
|
-
`;
|
|
173
62
|
const StyledSeparator = (0, import_ds_system.styled)("hr", { name: "DS-AppPicker", slot: "separator" })`
|
|
174
63
|
border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};
|
|
175
64
|
border-bottom: none;
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const StyledWrapper = styled(Grid, { name: 'DS-AppPicker', slot: 'root' })`\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: ${({ isOverflow }) => (isOverflow ? '0 0 8px 16px' : '0 16px 8px 16px')};\n &:focus {\n outline: none;\n }\n`;\n\nexport const StyledListItem = styled.li`\n list-style: none;\n`;\n\nexport const StyledListItemFullRow = styled.li`\n list-style: none;\n grid-column: 1/4;\n`;\n\nexport const StyledTitle = styled('h3', { name: 'DS-AppPicker', slot: 'title' })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.value[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin: 12px 0 8px 0;\n line-height: 1.385;\n text-transform: uppercase;\n`;\n\nexport const StyledSeparator = styled('hr', { name: 'DS-AppPicker', slot: 'separator' })`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n border-bottom: none;\n width: 99%;\n margin: 8px 0 0 0;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAA4B;AAC5B,qBAAqB;AAEd,MAAM,gBAAgB,6BAAO,qBAAM,EAAE,MAAM,gBAAgB,MAAM,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aASnE,CAAC,EAAE,iBAAkB,aAAa,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMzD,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAI9B,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAKrC,MAAM,cAAc,6BAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,QAAQ,CAAC;AAAA,WACpE,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAM3C,MAAM,kBAAkB,6BAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,YAAY,CAAC;AAAA,0BAC7D,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/types/AppPickerTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { SvgIconType } from '@elliemae/ds-icons';\n\nexport interface AppItemType {\n label: string;\n icon: React.ComponentType<{ className: string; size: string }>;\n onClick
|
|
4
|
+
"sourcesContent": ["import type { SvgIconType } from '@elliemae/ds-icons';\n\nexport interface AppItemType {\n label: string;\n icon: React.ComponentType<{ className: string; size: string }>;\n onClick?: () => void | null;\n disabled?: boolean;\n id?: string;\n selected?: boolean;\n}\n\nexport interface AppPickerPropsType {\n apps: AppItemType[];\n customApps: AppItemType[];\n sectionTitle: string;\n customSectionTitle: string;\n icon: SvgIconType;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n actionRef?: React.RefObject<{ focusToIndex: (index: number) => void }>;\n onClick?: (e: MouseEvent) => void;\n onClickOutside?: (e: React.MouseEvent) => void;\n renderTrigger?: React.ComponentType<any>;\n isOpen?: boolean;\n onClose?: () => void;\n triggerRef?: React.RefObject<HTMLButtonElement>;\n}\n\nexport interface AppPickerImplProps {\n apps: AppItemType[];\n customApps: AppItemType[];\n sectionTitle: string;\n customSectionTitle: string;\n close?: () => void;\n onKeyDown: (e: KeyboardEvent) => void;\n wrapperRef: React.RefObject<HTMLUListElement>;\n triggerRef: React.RefObject<HTMLElement>;\n isOverflow: boolean;\n}\n\nexport type DSAppPickerImplType = React.ComponentType<AppPickerImplProps>;\nexport type DSAppPickerType = React.ComponentType<AppPickerPropsType>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,45 +1,8 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __spreadValues = (a, b) => {
|
|
7
|
-
for (var prop in b || (b = {}))
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
var __objRest = (source, exclude) => {
|
|
18
|
-
var target = {};
|
|
19
|
-
for (var prop in source)
|
|
20
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
21
|
-
target[prop] = source[prop];
|
|
22
|
-
if (source != null && __getOwnPropSymbols)
|
|
23
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
24
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
}
|
|
27
|
-
return target;
|
|
28
|
-
};
|
|
29
1
|
import * as React from "react";
|
|
30
2
|
import React2, { useEffect, useCallback, useRef, useMemo } from "react";
|
|
31
|
-
import {
|
|
3
|
+
import { DSChip } from "@elliemae/ds-chip";
|
|
32
4
|
import { keys } from "./utils";
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
StyledWrapper,
|
|
36
|
-
StyledChip,
|
|
37
|
-
StyledChipLabel,
|
|
38
|
-
StyledTitle,
|
|
39
|
-
StyledSeparator,
|
|
40
|
-
StyledListItemFullRow,
|
|
41
|
-
StyledListItem
|
|
42
|
-
} from "./styles";
|
|
5
|
+
import { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from "./styles";
|
|
43
6
|
const AppPickerImpl = ({
|
|
44
7
|
apps = [],
|
|
45
8
|
customApps = [],
|
|
@@ -68,7 +31,7 @@ const AppPickerImpl = ({
|
|
|
68
31
|
allFocusableButtons?.current[0]?.focus();
|
|
69
32
|
}
|
|
70
33
|
}, [wrapperRef]);
|
|
71
|
-
const handleKeyDown = (e) => {
|
|
34
|
+
const handleKeyDown = useCallback((e) => {
|
|
72
35
|
switch (e.key) {
|
|
73
36
|
case keys.ESC:
|
|
74
37
|
triggerRef?.current?.focus();
|
|
@@ -88,7 +51,7 @@ const AppPickerImpl = ({
|
|
|
88
51
|
default:
|
|
89
52
|
break;
|
|
90
53
|
}
|
|
91
|
-
};
|
|
54
|
+
}, [close, triggerRef]);
|
|
92
55
|
const handleOnClick = useCallback((app) => (e) => {
|
|
93
56
|
if (app.onClick)
|
|
94
57
|
app.onClick(e, app);
|
|
@@ -103,8 +66,8 @@ const AppPickerImpl = ({
|
|
|
103
66
|
const totalAppsLenght = useMemo(() => apps.length + customApps.length, []);
|
|
104
67
|
const buildRows = useCallback((appList, prevIndex = 0, title) => {
|
|
105
68
|
const formattedRows = appList.map((app, index) => {
|
|
106
|
-
const
|
|
107
|
-
return /* @__PURE__ */ React2.createElement(StyledListItem, null, /* @__PURE__ */ React2.createElement(
|
|
69
|
+
const { label, disabled, selected, icon: Icon, id } = app;
|
|
70
|
+
return /* @__PURE__ */ React2.createElement(StyledListItem, null, /* @__PURE__ */ React2.createElement(DSChip, {
|
|
108
71
|
key: index,
|
|
109
72
|
onClick: handleOnClick(app),
|
|
110
73
|
onKeyDown: handleKeyDown,
|
|
@@ -116,17 +79,16 @@ const AppPickerImpl = ({
|
|
|
116
79
|
"aria-setsize": totalAppsLenght,
|
|
117
80
|
"aria-posinset": index + prevIndex,
|
|
118
81
|
id,
|
|
119
|
-
"aria-label": `${label}. ${title}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}))));
|
|
82
|
+
"aria-label": `${label}. ${title}`,
|
|
83
|
+
icon: () => /* @__PURE__ */ React2.createElement(Icon, {
|
|
84
|
+
className: "app-picker__icon",
|
|
85
|
+
size: "m"
|
|
86
|
+
}),
|
|
87
|
+
label
|
|
88
|
+
}));
|
|
127
89
|
});
|
|
128
90
|
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, formattedRows);
|
|
129
|
-
}, []);
|
|
91
|
+
}, [handleKeyDown, handleOnClick, totalAppsLenght]);
|
|
130
92
|
const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), []);
|
|
131
93
|
const CustomRows = useMemo(() => buildRows(customApps, apps.length, customSectionTitle), []);
|
|
132
94
|
const layout = useMemo(() => {
|
|
@@ -146,7 +108,7 @@ const AppPickerImpl = ({
|
|
|
146
108
|
rows,
|
|
147
109
|
cols
|
|
148
110
|
};
|
|
149
|
-
}, []);
|
|
111
|
+
}, [apps.length, customApps.length]);
|
|
150
112
|
return /* @__PURE__ */ React2.createElement(StyledWrapper, {
|
|
151
113
|
role: "listbox",
|
|
152
114
|
ref: wrapperRef,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/AppPickerImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\nimport React, { useEffect, useCallback, useRef, useMemo } from 'react';\nimport {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable max-lines */\nimport React, { useEffect, useCallback, useRef, useMemo } from 'react';\nimport { DSChip } from '@elliemae/ds-chip';\nimport { keys } from './utils';\nimport { AppItemType, DSAppPickerImplType } from './types/AppPickerTypes';\nimport { StyledWrapper, StyledSeparator, StyledListItemFullRow, StyledListItem, StyledTitle } from './styles';\n\nconst AppPickerImpl: DSAppPickerImplType = ({\n apps = [],\n customApps = [],\n sectionTitle = 'APPLICATIONS',\n customSectionTitle = 'CUSTOM APPLICATIONS',\n close = () => null,\n wrapperRef,\n onKeyDown,\n triggerRef,\n isOverflow,\n}) => {\n const allFocusableButtons = useRef<HTMLButtonElement[]>([]);\n const selectedButton = useRef<number | null>(null);\n\n useEffect(() => {\n wrapperRef?.current?.querySelectorAll('button').forEach((e, index) => {\n if (!e.hasAttribute('disabled')) {\n allFocusableButtons?.current?.push(e);\n }\n if (e.getAttribute('aria-selected') === 'true') {\n selectedButton.current = index;\n }\n });\n\n if (selectedButton.current) {\n wrapperRef?.current?.querySelectorAll('button')[selectedButton.current].focus();\n } else {\n allFocusableButtons?.current[0]?.focus();\n }\n }, [wrapperRef]);\n\n // eslint-disable-next-line max-statements\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n switch (e.key) {\n case keys.ESC:\n triggerRef?.current?.focus();\n close();\n break;\n case keys.TAB:\n if (e.shiftKey) {\n if (e.target === allFocusableButtons.current[0]) {\n e.preventDefault();\n allFocusableButtons?.current[allFocusableButtons.current.length - 1]?.focus();\n }\n } else if (e.target === allFocusableButtons.current[allFocusableButtons.current.length - 1]) {\n e.preventDefault();\n allFocusableButtons?.current[0]?.focus();\n }\n break;\n default:\n break;\n }\n },\n [close, triggerRef],\n );\n\n const handleOnClick = useCallback(\n (app: AppItemType) => (e: React.MouseEvent) => {\n if (app.onClick) app.onClick(e, app);\n },\n [],\n );\n\n const handleOnKeyDownWrapper = useCallback(\n (e) => {\n if (onKeyDown) onKeyDown(e);\n if (!onKeyDown && e.key === keys.ESC) {\n close();\n }\n },\n [onKeyDown, close],\n );\n\n const totalAppsLenght = useMemo(() => apps.length + customApps.length, []);\n\n const buildRows = useCallback(\n (appList: AppItemType[], prevIndex = 0, title: string): JSX.Element => {\n const formattedRows = appList.map((app, index) => {\n const { label, disabled, selected, icon: Icon, id } = app;\n return (\n <StyledListItem>\n <DSChip\n key={index}\n onClick={handleOnClick(app)}\n onKeyDown={handleKeyDown}\n data-testid=\"app-picker__chip\"\n aria-disabled={disabled}\n disabled={disabled}\n selected={selected}\n aria-selected={selected}\n aria-setsize={totalAppsLenght}\n aria-posinset={index + prevIndex}\n id={id}\n aria-label={`${label}. ${title}`}\n icon={() => <Icon className=\"app-picker__icon\" size=\"m\" />}\n label={label}\n ></DSChip>\n </StyledListItem>\n );\n });\n\n return <>{formattedRows}</>;\n },\n [handleKeyDown, handleOnClick, totalAppsLenght],\n );\n\n const AppsRows = useMemo(() => buildRows(apps, 1, sectionTitle), []);\n const CustomRows = useMemo(() => buildRows(customApps, apps.length, customSectionTitle), []);\n\n const layout = useMemo(() => {\n const cols = ['repeat(3, 92px)'];\n let appsRows = 0;\n let customRows = 0;\n let rows = [];\n if (apps.length > 0) {\n appsRows = apps.length / 3;\n rows.push('68px', `repeat(${appsRows}, 68px})`);\n }\n if (customApps.length > 0) {\n customRows = customApps.length / 3;\n rows.push('9px', '68px', `repeat(${customRows}, 68px})`);\n }\n return {\n rows,\n cols,\n };\n }, [apps.length, customApps.length]);\n\n return (\n <StyledWrapper\n role=\"listbox\"\n ref={wrapperRef}\n onKeyDown={handleOnKeyDownWrapper}\n data-testid=\"app-picker__wrapper\"\n isOverflow={isOverflow}\n cols={layout.cols}\n rows={layout.rows}\n forwardedAs=\"ul\"\n >\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__main-title\">{sectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {AppsRows}\n {customApps.length > 0 && (\n <>\n <StyledListItemFullRow aria-hidden>\n <StyledSeparator />\n </StyledListItemFullRow>\n <StyledListItemFullRow aria-hidden>\n <StyledTitle data-testid=\"app-picker__custom-title\">{customSectionTitle}</StyledTitle>\n </StyledListItemFullRow>\n {CustomRows}\n </>\n )}\n </StyledWrapper>\n );\n};\n\nexport default AppPickerImpl;\n"],
|
|
5
|
+
"mappings": "AAAA;ACGA;AACA;AACA;AAEA;AAEA,MAAM,gBAAqC,CAAC;AAAA,EAC1C,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,QAAQ,MAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,sBAAsB,OAA4B,CAAC,CAAC;AAC1D,QAAM,iBAAiB,OAAsB,IAAI;AAEjD,YAAU,MAAM;AACd,gBAAY,SAAS,iBAAiB,QAAQ,EAAE,QAAQ,CAAC,GAAG,UAAU;AACpE,UAAI,CAAC,EAAE,aAAa,UAAU,GAAG;AAC/B,6BAAqB,SAAS,KAAK,CAAC;AAAA,MACtC;AACA,UAAI,EAAE,aAAa,eAAe,MAAM,QAAQ;AAC9C,uBAAe,UAAU;AAAA,MAC3B;AAAA,IACF,CAAC;AAED,QAAI,eAAe,SAAS;AAC1B,kBAAY,SAAS,iBAAiB,QAAQ,EAAE,eAAe,SAAS,MAAM;AAAA,IAChF,OAAO;AACL,2BAAqB,QAAQ,IAAI,MAAM;AAAA,IACzC;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAGf,QAAM,gBAAgB,YACpB,CAAC,MAA2B;AAC1B,YAAQ,EAAE;AAAA,WACH,KAAK;AACR,oBAAY,SAAS,MAAM;AAC3B,cAAM;AACN;AAAA,WACG,KAAK;AACR,YAAI,EAAE,UAAU;AACd,cAAI,EAAE,WAAW,oBAAoB,QAAQ,IAAI;AAC/C,cAAE,eAAe;AACjB,iCAAqB,QAAQ,oBAAoB,QAAQ,SAAS,IAAI,MAAM;AAAA,UAC9E;AAAA,QACF,WAAW,EAAE,WAAW,oBAAoB,QAAQ,oBAAoB,QAAQ,SAAS,IAAI;AAC3F,YAAE,eAAe;AACjB,+BAAqB,QAAQ,IAAI,MAAM;AAAA,QACzC;AACA;AAAA;AAEA;AAAA;AAAA,EAEN,GACA,CAAC,OAAO,UAAU,CACpB;AAEA,QAAM,gBAAgB,YACpB,CAAC,QAAqB,CAAC,MAAwB;AAC7C,QAAI,IAAI;AAAS,UAAI,QAAQ,GAAG,GAAG;AAAA,EACrC,GACA,CAAC,CACH;AAEA,QAAM,yBAAyB,YAC7B,CAAC,MAAM;AACL,QAAI;AAAW,gBAAU,CAAC;AAC1B,QAAI,CAAC,aAAa,EAAE,QAAQ,KAAK,KAAK;AACpC,YAAM;AAAA,IACR;AAAA,EACF,GACA,CAAC,WAAW,KAAK,CACnB;AAEA,QAAM,kBAAkB,QAAQ,MAAM,KAAK,SAAS,WAAW,QAAQ,CAAC,CAAC;AAEzE,QAAM,YAAY,YAChB,CAAC,SAAwB,YAAY,GAAG,UAA+B;AACrE,UAAM,gBAAgB,QAAQ,IAAI,CAAC,KAAK,UAAU;AAChD,YAAM,EAAE,OAAO,UAAU,UAAU,MAAM,MAAM,OAAO;AACtD,aACE,qCAAC,sBACC,qCAAC;AAAA,QACC,KAAK;AAAA,QACL,SAAS,cAAc,GAAG;AAAA,QAC1B,WAAW;AAAA,QACX,eAAY;AAAA,QACZ,iBAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,iBAAe,QAAQ;AAAA,QACvB;AAAA,QACA,cAAY,GAAG,UAAU;AAAA,QACzB,MAAM,MAAM,qCAAC;AAAA,UAAK,WAAU;AAAA,UAAmB,MAAK;AAAA,SAAI;AAAA,QACxD;AAAA,OACD,CACH;AAAA,IAEJ,CAAC;AAED,WAAO,4DAAG,aAAc;AAAA,EAC1B,GACA,CAAC,eAAe,eAAe,eAAe,CAChD;AAEA,QAAM,WAAW,QAAQ,MAAM,UAAU,MAAM,GAAG,YAAY,GAAG,CAAC,CAAC;AACnE,QAAM,aAAa,QAAQ,MAAM,UAAU,YAAY,KAAK,QAAQ,kBAAkB,GAAG,CAAC,CAAC;AAE3F,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,OAAO,CAAC,iBAAiB;AAC/B,QAAI,WAAW;AACf,QAAI,aAAa;AACjB,QAAI,OAAO,CAAC;AACZ,QAAI,KAAK,SAAS,GAAG;AACnB,iBAAW,KAAK,SAAS;AACzB,WAAK,KAAK,QAAQ,UAAU,kBAAkB;AAAA,IAChD;AACA,QAAI,WAAW,SAAS,GAAG;AACzB,mBAAa,WAAW,SAAS;AACjC,WAAK,KAAK,OAAO,QAAQ,UAAU,oBAAoB;AAAA,IACzD;AACA,WAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,KAAK,QAAQ,WAAW,MAAM,CAAC;AAEnC,SACE,qCAAC;AAAA,IACC,MAAK;AAAA,IACL,KAAK;AAAA,IACL,WAAW;AAAA,IACX,eAAY;AAAA,IACZ;AAAA,IACA,MAAM,OAAO;AAAA,IACb,MAAM,OAAO;AAAA,IACb,aAAY;AAAA,KAEZ,qCAAC;AAAA,IAAsB,eAAW;AAAA,KAChC,qCAAC;AAAA,IAAY,eAAY;AAAA,KAA0B,YAAa,CAClE,GACC,UACA,WAAW,SAAS,KACnB,4DACE,qCAAC;AAAA,IAAsB,eAAW;AAAA,KAChC,qCAAC,qBAAgB,CACnB,GACA,qCAAC;AAAA,IAAsB,eAAW;AAAA,KAChC,qCAAC;AAAA,IAAY,eAAY;AAAA,KAA4B,kBAAmB,CAC1E,GACC,UACH,CAEJ;AAEJ;AAEA,IAAO,wBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -1,24 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled
|
|
2
|
+
import { styled } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
-
const styledChipSelectedSetter = css`
|
|
5
|
-
color: ${({ theme }) => theme.colors.brand[800]};
|
|
6
|
-
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
7
|
-
|
|
8
|
-
.app-picker__icon {
|
|
9
|
-
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
&:before {
|
|
13
|
-
border: 1px solid ${({ theme }) => theme.colors.brand[600]};
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
&:focus {
|
|
17
|
-
&:before {
|
|
18
|
-
border: 2px solid ${({ theme }) => theme.colors.brand[800]};
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
`;
|
|
22
4
|
const StyledWrapper = styled(Grid, { name: "DS-AppPicker", slot: "root" })`
|
|
23
5
|
align-items: center;
|
|
24
6
|
min-width: 308px;
|
|
@@ -48,97 +30,6 @@ const StyledTitle = styled("h3", { name: "DS-AppPicker", slot: "title" })`
|
|
|
48
30
|
line-height: 1.385;
|
|
49
31
|
text-transform: uppercase;
|
|
50
32
|
`;
|
|
51
|
-
const StyledChipLabel = styled("p", { name: "DS-AppPicker", slot: "chipLabel" })`
|
|
52
|
-
font-size: ${({ theme }) => theme.fontSizes.label[200]};
|
|
53
|
-
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
54
|
-
word-wrap: break-word;
|
|
55
|
-
margin: 0 6px;
|
|
56
|
-
line-height: 1.45;
|
|
57
|
-
width: 100%;
|
|
58
|
-
z-index: 120;
|
|
59
|
-
|
|
60
|
-
& span {
|
|
61
|
-
padding-top: 6px;
|
|
62
|
-
}
|
|
63
|
-
`;
|
|
64
|
-
const StyledChip = styled("button", { name: "DS-AppPicker", slot: "chip" })`
|
|
65
|
-
position: relative;
|
|
66
|
-
display: flex;
|
|
67
|
-
flex-direction: column;
|
|
68
|
-
align-items: center;
|
|
69
|
-
justify-content: center;
|
|
70
|
-
border: none;
|
|
71
|
-
height: 68px;
|
|
72
|
-
width: 92px;
|
|
73
|
-
background-color: #fff;
|
|
74
|
-
color: ${({ theme }) => theme.colors.brand[600]};
|
|
75
|
-
cursor: pointer;
|
|
76
|
-
outline: none;
|
|
77
|
-
|
|
78
|
-
&:before {
|
|
79
|
-
content: '';
|
|
80
|
-
position: absolute;
|
|
81
|
-
top: 0;
|
|
82
|
-
left: 0;
|
|
83
|
-
width: 100%;
|
|
84
|
-
height: 100%;
|
|
85
|
-
border-radius: 2px;
|
|
86
|
-
border: 2px solid transparent;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
& .app-picker__icon {
|
|
90
|
-
fill: ${({ theme }) => theme.colors.brand[600]};
|
|
91
|
-
height: 28px;
|
|
92
|
-
width: 28px;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
& .app-picker__icon svg {
|
|
96
|
-
height: 28px;
|
|
97
|
-
width: 28px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
&:hover {
|
|
101
|
-
color: ${({ theme }) => theme.colors.brand[800]};
|
|
102
|
-
background-color: ${({ theme }) => theme.colors.brand[200]};
|
|
103
|
-
.app-picker__icon {
|
|
104
|
-
fill: ${({ theme }) => theme.colors.brand[800]};
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
&:focus {
|
|
109
|
-
&:before {
|
|
110
|
-
border-color: ${({ theme }) => theme.colors.brand[800]};
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
&:disabled {
|
|
115
|
-
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
116
|
-
cursor: not-allowed;
|
|
117
|
-
|
|
118
|
-
.app-picker__icon {
|
|
119
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
&:focus,
|
|
123
|
-
&:hover {
|
|
124
|
-
background-color: #fff;
|
|
125
|
-
cursor: not-allowed;
|
|
126
|
-
&:before {
|
|
127
|
-
border-color: transparent;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
${StyledChipLabel} {
|
|
131
|
-
color: ${({ theme }) => theme.colors.neutral[500]};
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
&:hover .app-picker__icon {
|
|
136
|
-
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
${({ selected }) => !selected ? "" : styledChipSelectedSetter}
|
|
141
|
-
`;
|
|
142
33
|
const StyledSeparator = styled("hr", { name: "DS-AppPicker", slot: "separator" })`
|
|
143
34
|
border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};
|
|
144
35
|
border-bottom: none;
|
|
@@ -146,8 +37,6 @@ const StyledSeparator = styled("hr", { name: "DS-AppPicker", slot: "separator" }
|
|
|
146
37
|
margin: 8px 0 0 0;
|
|
147
38
|
`;
|
|
148
39
|
export {
|
|
149
|
-
StyledChip,
|
|
150
|
-
StyledChipLabel,
|
|
151
40
|
StyledListItem,
|
|
152
41
|
StyledListItemFullRow,
|
|
153
42
|
StyledSeparator,
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\
|
|
5
|
-
"mappings": "AAAA;ACEA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const StyledWrapper = styled(Grid, { name: 'DS-AppPicker', slot: 'root' })`\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: ${({ isOverflow }) => (isOverflow ? '0 0 8px 16px' : '0 16px 8px 16px')};\n &:focus {\n outline: none;\n }\n`;\n\nexport const StyledListItem = styled.li`\n list-style: none;\n`;\n\nexport const StyledListItemFullRow = styled.li`\n list-style: none;\n grid-column: 1/4;\n`;\n\nexport const StyledTitle = styled('h3', { name: 'DS-AppPicker', slot: 'title' })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.value[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n margin: 12px 0 8px 0;\n line-height: 1.385;\n text-transform: uppercase;\n`;\n\nexport const StyledSeparator = styled('hr', { name: 'DS-AppPicker', slot: 'separator' })`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n border-bottom: none;\n width: 99%;\n margin: 8px 0 0 0;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACEA;AACA;AAEO,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aASnE,CAAC,EAAE,iBAAkB,aAAa,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAMzD,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAI9B,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAKrC,MAAM,cAAc,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,QAAQ,CAAC;AAAA,WACpE,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAM3C,MAAM,kBAAkB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,YAAY,CAAC;AAAA,0BAC7D,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-app-picker",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.78",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - App Picker",
|
|
6
6
|
"files": [
|
|
@@ -67,6 +67,7 @@
|
|
|
67
67
|
},
|
|
68
68
|
"dependencies": {
|
|
69
69
|
"@elliemae/ds-button": "workspace:*",
|
|
70
|
+
"@elliemae/ds-chip": "workspace:*",
|
|
70
71
|
"@elliemae/ds-icons": "workspace:*",
|
|
71
72
|
"@elliemae/ds-popover": "workspace:*",
|
|
72
73
|
"@elliemae/ds-system": "workspace:*",
|