@elliemae/ds-card-v2 3.23.1-rc.1 → 3.24.0-next.1
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/CardV3.js +105 -24
- package/dist/cjs/CardV3.js.map +2 -2
- package/dist/esm/CardV3.js +111 -26
- package/dist/esm/CardV3.js.map +2 -2
- package/dist/types/CardV3.d.ts +12 -8
- package/dist/types/styles.d.ts +1 -1
- package/package.json +11 -11
package/dist/cjs/CardV3.js
CHANGED
|
@@ -32,6 +32,7 @@ __export(CardV3_exports, {
|
|
|
32
32
|
CardActionArea: () => CardActionArea,
|
|
33
33
|
CardContent: () => CardContent,
|
|
34
34
|
CardFooter: () => CardFooter,
|
|
35
|
+
CardHeader: () => CardHeader,
|
|
35
36
|
CardSelectIndicator: () => CardSelectIndicator,
|
|
36
37
|
DSCardV3DataTestIds: () => DSCardV3DataTestIds,
|
|
37
38
|
DSCardV3Name: () => DSCardV3Name,
|
|
@@ -57,7 +58,12 @@ const DSCardV3Slots = {
|
|
|
57
58
|
ACTION_AREA: "action-area"
|
|
58
59
|
};
|
|
59
60
|
const DSCardV3DataTestIds = (0, import_ds_system.slotObjectToDataTestIds)(DSCardV3Name, DSCardV3Slots);
|
|
60
|
-
const
|
|
61
|
+
const defaultContext = {
|
|
62
|
+
isSelected: false,
|
|
63
|
+
isMultiSelect: false,
|
|
64
|
+
disabled: false
|
|
65
|
+
};
|
|
66
|
+
const CardContext = import_react.default.createContext(defaultContext);
|
|
61
67
|
const defaultProps = {
|
|
62
68
|
hasError: false
|
|
63
69
|
};
|
|
@@ -76,11 +82,15 @@ const CardActionArea = (0, import_ds_system.styled)("button", {
|
|
|
76
82
|
text-align: unset;
|
|
77
83
|
`;
|
|
78
84
|
const StyledCard = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
85
|
+
min-width: 240px;
|
|
86
|
+
min-height: 56px;
|
|
79
87
|
background-color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["080"] : "white"};
|
|
80
88
|
outline-offset: -2px;
|
|
81
89
|
* {
|
|
82
90
|
color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["500"] : "inherit"};
|
|
83
91
|
}
|
|
92
|
+
|
|
93
|
+
${import_ds_system.xStyledCommonProps}
|
|
84
94
|
`;
|
|
85
95
|
const StyledButtonCard = (0, import_ds_system.styled)(StyledCard)`
|
|
86
96
|
cursor: pointer;
|
|
@@ -89,16 +99,18 @@ const StyledCardError = (0, import_ds_system.styled)(StyledCard)`
|
|
|
89
99
|
outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};
|
|
90
100
|
`;
|
|
91
101
|
const StyledCardSingleIndicator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
92
|
-
width: ${({ isSelected
|
|
102
|
+
width: ${({ isSelected }) => isSelected ? "6px" : "4px"};
|
|
93
103
|
align-self: normal;
|
|
94
|
-
background-color: ${({ theme,
|
|
104
|
+
background-color: ${({ theme, isSelected }) => {
|
|
95
105
|
if (isSelected)
|
|
96
106
|
return theme.colors.brand["700"];
|
|
97
|
-
else if (isHovered)
|
|
98
|
-
return theme.colors.brand["500"];
|
|
99
107
|
return theme.colors.brand["300"];
|
|
100
108
|
}};
|
|
101
109
|
transition: all 0.1s ease-in-out;
|
|
110
|
+
|
|
111
|
+
${StyledCard}:not([data-disabled='true']):not([data-selected='true']):hover & {
|
|
112
|
+
background-color: ${({ theme }) => theme.colors.brand["500"]};
|
|
113
|
+
}
|
|
102
114
|
`;
|
|
103
115
|
const StyledCardDisabled = (0, import_ds_system.styled)(StyledCard)`
|
|
104
116
|
cursor: not-allowed;
|
|
@@ -112,17 +124,87 @@ const StyledCardDisabled = (0, import_ds_system.styled)(StyledCard)`
|
|
|
112
124
|
pointer-events: none;
|
|
113
125
|
}
|
|
114
126
|
`;
|
|
115
|
-
const CardContent = (0, import_ds_system.styled)(import_ds_grid.Grid)``;
|
|
116
|
-
const CardFooter = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
117
|
-
border-top: 1px solid ${({ theme }) => theme.colors.neutral["200"]};
|
|
118
|
-
`;
|
|
119
127
|
const CardSelectIndicator = (props) => {
|
|
120
128
|
const { isSelected, isMultiSelect } = props;
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_controlled_form.PresentationalRadio, { checked: isSelected, "aria-label": "@todo" }) });
|
|
129
|
+
if (!isMultiSelect) {
|
|
130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_controlled_form.PresentationalRadio, { checked: isSelected, "aria-label": "@todo", device: "desktop" }) });
|
|
124
131
|
}
|
|
125
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardSingleIndicator, { isSelected
|
|
132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardSingleIndicator, { isSelected });
|
|
133
|
+
};
|
|
134
|
+
const CardHeader = (props) => {
|
|
135
|
+
const { isSelected, isMultiSelect, onClick } = import_react.default.useContext(CardContext);
|
|
136
|
+
const { children, ...rest } = props;
|
|
137
|
+
if (isSelected !== void 0 && isMultiSelect && onClick) {
|
|
138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
139
|
+
import_ds_grid.Grid,
|
|
140
|
+
{
|
|
141
|
+
cols: ["12px", "auto"],
|
|
142
|
+
"data-type": "card-header",
|
|
143
|
+
padding: "xxxs",
|
|
144
|
+
alignItems: "center",
|
|
145
|
+
minHeight: "56px",
|
|
146
|
+
...rest,
|
|
147
|
+
children: [
|
|
148
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardSelectIndicator, { isSelected, isMultiSelect }),
|
|
149
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { py: "xxxs", paddingRight: "xxs2", children })
|
|
150
|
+
]
|
|
151
|
+
}
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
if (isSelected !== void 0 && !isMultiSelect && onClick) {
|
|
155
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
156
|
+
import_ds_grid.Grid,
|
|
157
|
+
{
|
|
158
|
+
cols: ["16px", "auto"],
|
|
159
|
+
"data-type": "card-header",
|
|
160
|
+
gutter: "xxs",
|
|
161
|
+
px: "xs",
|
|
162
|
+
py: "xxs",
|
|
163
|
+
alignItems: "center",
|
|
164
|
+
minHeight: "56px",
|
|
165
|
+
...rest,
|
|
166
|
+
children: [
|
|
167
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardSelectIndicator, { isSelected, isMultiSelect }),
|
|
168
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { py: "xxxs", paddingRight: "xxs2", children })
|
|
169
|
+
]
|
|
170
|
+
}
|
|
171
|
+
);
|
|
172
|
+
}
|
|
173
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { "data-type": "card-header", px: "xs", py: "xxs", gutter: "xxs", alignItems: "center", minHeight: "56px", ...rest, children });
|
|
174
|
+
};
|
|
175
|
+
const CardFooter = (props) => {
|
|
176
|
+
const { children, ...rest } = props;
|
|
177
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
178
|
+
import_ds_grid.Grid,
|
|
179
|
+
{
|
|
180
|
+
"data-type": "card-footer",
|
|
181
|
+
px: "xs",
|
|
182
|
+
py: "xxs",
|
|
183
|
+
gutter: "xxs",
|
|
184
|
+
borderTop: "1px solid #CBCFD7",
|
|
185
|
+
minHeight: "40px",
|
|
186
|
+
alignItems: "center",
|
|
187
|
+
...rest,
|
|
188
|
+
children
|
|
189
|
+
}
|
|
190
|
+
);
|
|
191
|
+
};
|
|
192
|
+
const CardContent = (props) => {
|
|
193
|
+
const { children, ...rest } = props;
|
|
194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
195
|
+
import_ds_grid.Grid,
|
|
196
|
+
{
|
|
197
|
+
"data-type": "card-content",
|
|
198
|
+
gutter: "xxs",
|
|
199
|
+
px: "xs",
|
|
200
|
+
py: "xxs",
|
|
201
|
+
paddingTop: "0px",
|
|
202
|
+
minHeight: "64px",
|
|
203
|
+
alignItems: "center",
|
|
204
|
+
...rest,
|
|
205
|
+
children
|
|
206
|
+
}
|
|
207
|
+
);
|
|
126
208
|
};
|
|
127
209
|
const StyledFocusRing = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
128
210
|
width: 100%;
|
|
@@ -170,14 +252,7 @@ const FocusRing = (props) => {
|
|
|
170
252
|
};
|
|
171
253
|
const Card = (props) => {
|
|
172
254
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, defaultProps);
|
|
173
|
-
const { children, hasError, disabled, isOverlay, onClick } = propsWithDefault;
|
|
174
|
-
const [isHovered, setIsHovered] = import_react.default.useState(false);
|
|
175
|
-
const handleOnMouseEnter = (0, import_react.useCallback)(() => {
|
|
176
|
-
setIsHovered(true);
|
|
177
|
-
}, []);
|
|
178
|
-
const handleOnMouseLeave = (0, import_react.useCallback)(() => {
|
|
179
|
-
setIsHovered(false);
|
|
180
|
-
}, []);
|
|
255
|
+
const { children, hasError, disabled, isOverlay, onClick, isSelected, isMultiSelect } = propsWithDefault;
|
|
181
256
|
const StyledCardContainer = (0, import_react.useMemo)(() => {
|
|
182
257
|
if (onClick && !disabled) {
|
|
183
258
|
return StyledButtonCard;
|
|
@@ -188,22 +263,28 @@ const Card = (props) => {
|
|
|
188
263
|
return StyledCard;
|
|
189
264
|
}, [disabled, onClick]);
|
|
190
265
|
const globalsAttrs = (0, import_lodash.omit)((0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault), ["cols", "rows", "wrap"]);
|
|
266
|
+
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
|
|
191
267
|
const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
|
|
192
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContext.Provider, { value: {
|
|
268
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContext.Provider, { value: { isMultiSelect, disabled, isSelected, onClick }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
193
269
|
StyledCardContainer,
|
|
194
270
|
{
|
|
195
271
|
border: "solid 1px neutral-100",
|
|
196
272
|
boxShadow: "xs",
|
|
197
273
|
isOverlay,
|
|
198
274
|
...globalsAttrs,
|
|
199
|
-
|
|
200
|
-
|
|
275
|
+
...xstyledProps,
|
|
276
|
+
"data-disabled": disabled,
|
|
277
|
+
"data-selected": isSelected,
|
|
201
278
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FocusRing, { target: `[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`, hasError, children: [
|
|
202
279
|
onClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
203
280
|
CardActionArea,
|
|
204
281
|
{
|
|
205
282
|
disabled,
|
|
206
283
|
"data-testid": DSCardV3DataTestIds.ACTION_AREA,
|
|
284
|
+
"aria-selected": isSelected,
|
|
285
|
+
"aria-multiselectable": isMultiSelect,
|
|
286
|
+
"aria-disabled": disabled,
|
|
287
|
+
"aria-invalid": hasError,
|
|
207
288
|
getOwnerProps
|
|
208
289
|
}
|
|
209
290
|
) : null,
|
package/dist/cjs/CardV3.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/CardV3.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable react/display-name */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { PresentationalRadio } from '@elliemae/ds-controlled-form';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable react/display-name */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { Grid, type DSGridT } from '@elliemae/ds-grid';\nimport { styled, slotObjectToDataTestIds, xStyledCommonProps } from '@elliemae/ds-system';\nimport { PresentationalRadio } from '@elliemae/ds-controlled-form';\nimport {\n useMemoMergePropsWithDefault,\n useGetXstyledProps,\n useGetGlobalAttributes,\n type GlobalAttributesT,\n} from '@elliemae/ds-utilities';\n\nexport const DSCardV3Name = 'DSCardV3';\nexport const DSCardV3Slots = {\n ACTION_AREA: 'action-area',\n};\n\nexport const DSCardV3DataTestIds = slotObjectToDataTestIds(DSCardV3Name, DSCardV3Slots);\n\ndeclare namespace CardT {\n export interface RequiredProps {\n children: React.ReactNode;\n }\n\n export interface OptinalProps {\n isSelected?: boolean;\n isMultiSelect?: boolean;\n isOverlay?: boolean;\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n }\n\n export interface DefaultProps {\n hasError: boolean;\n }\n\n export interface Props\n extends RequiredProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n OptinalProps,\n DefaultProps {}\n export interface InternalProps\n extends RequiredProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n OptinalProps,\n Partial<DefaultProps> {}\n\n export interface CardSelectIndicatorProps {\n isSelected?: boolean;\n isMultiSelect?: boolean;\n }\n}\n\ninterface CardContextProps {\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n isSelected?: boolean;\n isMultiSelect?: boolean;\n disabled?: boolean;\n}\n\nconst defaultContext: CardContextProps = {\n isSelected: false,\n isMultiSelect: false,\n disabled: false,\n};\n\nconst CardContext = React.createContext<CardContextProps>(defaultContext);\n\nexport const defaultProps: CardT.DefaultProps = {\n hasError: false,\n};\n\nexport const CardActionArea = styled('button', {\n name: DSCardV3Name,\n slot: DSCardV3Slots.ACTION_AREA,\n})`\n border: none;\n background-color: transparent;\n width: 0px;\n height: 0px;\n padding: 0;\n &:focus {\n outline: none;\n }\n text-align: unset;\n`;\n\n// START style cards variants\nexport const StyledCard = styled(Grid)<{\n isOverlay?: boolean;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}>`\n min-width: 240px;\n min-height: 56px;\n background-color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['080'] : 'white')};\n outline-offset: -2px;\n * {\n color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['500'] : 'inherit')};\n }\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledButtonCard = styled(StyledCard)<{ isOverlay?: boolean }>`\n cursor: pointer;\n`;\n\nexport const StyledCardError = styled(StyledCard)`\n outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};\n`;\n\nexport const StyledCardSingleIndicator = styled(Grid)<{ isSelected?: boolean }>`\n width: ${({ isSelected }) => (isSelected ? '6px' : '4px')};\n align-self: normal;\n background-color: ${({ theme, isSelected }) => {\n if (isSelected) return theme.colors.brand['700'];\n return theme.colors.brand['300'];\n }};\n transition: all 0.1s ease-in-out;\n\n ${StyledCard}:not([data-disabled='true']):not([data-selected='true']):hover & {\n background-color: ${({ theme }) => theme.colors.brand['500']};\n }\n`;\n\nexport const StyledCardDisabled = styled(StyledCard)`\n cursor: not-allowed;\n user-select: none;\n opacity: 0.5;\n ${StyledCardSingleIndicator} {\n background-color: ${({ theme, isSelected }) =>\n isSelected ? theme.colors.neutral['800'] : theme.colors.neutral['080']};\n }\n\n ${CardActionArea} {\n pointer-events: none;\n }\n`;\n\nexport const CardSelectIndicator = (props: CardT.CardSelectIndicatorProps) => {\n const { isSelected, isMultiSelect } = props;\n if (!isMultiSelect) {\n return (\n <Grid alignItems=\"center\">\n <PresentationalRadio checked={isSelected} aria-label=\"@todo\" device=\"desktop\" />\n </Grid>\n );\n }\n return <StyledCardSingleIndicator isSelected={isSelected} />;\n};\n\ninterface CardElementsProps extends DSGridT.InternalProps {\n children: React.ReactNode;\n}\nexport const CardHeader = (props: CardElementsProps) => {\n const { isSelected, isMultiSelect, onClick } = React.useContext(CardContext);\n const { children, ...rest } = props;\n if (isSelected !== undefined && isMultiSelect && onClick) {\n return (\n <Grid\n cols={['12px', 'auto']}\n data-type=\"card-header\"\n padding=\"xxxs\"\n alignItems=\"center\"\n minHeight=\"56px\"\n {...rest}\n >\n <CardSelectIndicator isSelected={isSelected} isMultiSelect={isMultiSelect} />\n <Grid py=\"xxxs\" paddingRight=\"xxs2\">\n {children}\n </Grid>\n </Grid>\n );\n }\n if (isSelected !== undefined && !isMultiSelect && onClick) {\n return (\n <Grid\n cols={['16px', 'auto']}\n data-type=\"card-header\"\n gutter=\"xxs\"\n px=\"xs\"\n py=\"xxs\"\n alignItems=\"center\"\n minHeight=\"56px\"\n {...rest}\n >\n <CardSelectIndicator isSelected={isSelected} isMultiSelect={isMultiSelect} />\n <Grid py=\"xxxs\" paddingRight=\"xxs2\">\n {children}\n </Grid>\n </Grid>\n );\n }\n return (\n <Grid data-type=\"card-header\" px=\"xs\" py=\"xxs\" gutter=\"xxs\" alignItems=\"center\" minHeight=\"56px\" {...rest}>\n {children}\n </Grid>\n );\n};\n\nexport const CardFooter = (props: CardElementsProps) => {\n const { children, ...rest } = props;\n return (\n <Grid\n data-type=\"card-footer\"\n px=\"xs\"\n py=\"xxs\"\n gutter=\"xxs\"\n borderTop=\"1px solid #CBCFD7\"\n minHeight=\"40px\"\n alignItems=\"center\"\n {...rest}\n >\n {children}\n </Grid>\n );\n};\n\nexport const CardContent = (props: CardElementsProps) => {\n const { children, ...rest } = props;\n return (\n <Grid\n data-type=\"card-content\"\n gutter=\"xxs\"\n px=\"xs\"\n py=\"xxs\"\n paddingTop=\"0px\"\n minHeight=\"64px\"\n alignItems=\"center\"\n {...rest}\n >\n {children}\n </Grid>\n );\n};\n\nconst StyledFocusRing = styled(Grid)<{ showFocusRing: boolean; hasError?: boolean }>`\n width: 100%;\n height: 100%;\n outline-offset: -1px;\n outline: ${({ showFocusRing, hasError, theme }) => {\n if (showFocusRing) {\n return `2px solid ${theme.colors.brand[700]}`;\n }\n if (hasError) {\n return `2px solid ${theme.colors.danger[900]}`;\n }\n return 'none';\n }};\n`;\n\ninterface FocusRingProps {\n target: string;\n children: React.ReactNode;\n hasError?: boolean;\n}\nconst FocusRing = (props: FocusRingProps) => {\n const { target, children, hasError } = props;\n const [showFocusRing, setShowFocusingRing] = React.useState(false);\n const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n (e) => {\n if (e.target.matches(target)) {\n setShowFocusingRing(true);\n }\n },\n [target],\n );\n\n const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n (e) => {\n if (e.target.matches(target)) {\n setShowFocusingRing(false);\n }\n },\n [target],\n );\n return (\n <StyledFocusRing\n hasError={hasError}\n onFocusCapture={handleOnFocus}\n onBlurCapture={handleOnBlur}\n showFocusRing={showFocusRing}\n >\n {children}\n </StyledFocusRing>\n );\n};\n\n// create acontext\n\nexport const Card: React.ComponentType<CardT.InternalProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<CardT.Props>(props, defaultProps);\n const { children, hasError, disabled, isOverlay, onClick, isSelected, isMultiSelect } = propsWithDefault;\n\n const StyledCardContainer = useMemo(() => {\n if (onClick && !disabled) {\n return StyledButtonCard;\n }\n if (disabled) {\n return StyledCardDisabled;\n }\n return StyledCard;\n }, [disabled, onClick]);\n\n const globalsAttrs = omit(useGetGlobalAttributes(propsWithDefault), ['cols', 'rows', 'wrap']);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n return (\n <CardContext.Provider value={{ isMultiSelect, disabled, isSelected, onClick }}>\n <StyledCardContainer\n border=\"solid 1px neutral-100\"\n boxShadow=\"xs\"\n isOverlay={isOverlay}\n {...globalsAttrs}\n {...xstyledProps}\n data-disabled={disabled}\n data-selected={isSelected}\n >\n <FocusRing target={`[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`} hasError={hasError}>\n {onClick ? (\n <CardActionArea\n disabled={disabled}\n data-testid={DSCardV3DataTestIds.ACTION_AREA}\n aria-selected={isSelected}\n aria-multiselectable={isMultiSelect}\n aria-disabled={disabled}\n aria-invalid={hasError}\n getOwnerProps={getOwnerProps}\n />\n ) : null}\n {children}\n </FocusRing>\n </StyledCardContainer>\n </CardContext.Provider>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/CardV3.js
CHANGED
|
@@ -3,15 +3,24 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import React2, { useMemo, useCallback } from "react";
|
|
4
4
|
import { omit } from "lodash";
|
|
5
5
|
import { Grid } from "@elliemae/ds-grid";
|
|
6
|
-
import { styled, slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
6
|
+
import { styled, slotObjectToDataTestIds, xStyledCommonProps } from "@elliemae/ds-system";
|
|
7
7
|
import { PresentationalRadio } from "@elliemae/ds-controlled-form";
|
|
8
|
-
import {
|
|
8
|
+
import {
|
|
9
|
+
useMemoMergePropsWithDefault,
|
|
10
|
+
useGetXstyledProps,
|
|
11
|
+
useGetGlobalAttributes
|
|
12
|
+
} from "@elliemae/ds-utilities";
|
|
9
13
|
const DSCardV3Name = "DSCardV3";
|
|
10
14
|
const DSCardV3Slots = {
|
|
11
15
|
ACTION_AREA: "action-area"
|
|
12
16
|
};
|
|
13
17
|
const DSCardV3DataTestIds = slotObjectToDataTestIds(DSCardV3Name, DSCardV3Slots);
|
|
14
|
-
const
|
|
18
|
+
const defaultContext = {
|
|
19
|
+
isSelected: false,
|
|
20
|
+
isMultiSelect: false,
|
|
21
|
+
disabled: false
|
|
22
|
+
};
|
|
23
|
+
const CardContext = React2.createContext(defaultContext);
|
|
15
24
|
const defaultProps = {
|
|
16
25
|
hasError: false
|
|
17
26
|
};
|
|
@@ -30,11 +39,15 @@ const CardActionArea = styled("button", {
|
|
|
30
39
|
text-align: unset;
|
|
31
40
|
`;
|
|
32
41
|
const StyledCard = styled(Grid)`
|
|
42
|
+
min-width: 240px;
|
|
43
|
+
min-height: 56px;
|
|
33
44
|
background-color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["080"] : "white"};
|
|
34
45
|
outline-offset: -2px;
|
|
35
46
|
* {
|
|
36
47
|
color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["500"] : "inherit"};
|
|
37
48
|
}
|
|
49
|
+
|
|
50
|
+
${xStyledCommonProps}
|
|
38
51
|
`;
|
|
39
52
|
const StyledButtonCard = styled(StyledCard)`
|
|
40
53
|
cursor: pointer;
|
|
@@ -43,16 +56,18 @@ const StyledCardError = styled(StyledCard)`
|
|
|
43
56
|
outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};
|
|
44
57
|
`;
|
|
45
58
|
const StyledCardSingleIndicator = styled(Grid)`
|
|
46
|
-
width: ${({ isSelected
|
|
59
|
+
width: ${({ isSelected }) => isSelected ? "6px" : "4px"};
|
|
47
60
|
align-self: normal;
|
|
48
|
-
background-color: ${({ theme,
|
|
61
|
+
background-color: ${({ theme, isSelected }) => {
|
|
49
62
|
if (isSelected)
|
|
50
63
|
return theme.colors.brand["700"];
|
|
51
|
-
else if (isHovered)
|
|
52
|
-
return theme.colors.brand["500"];
|
|
53
64
|
return theme.colors.brand["300"];
|
|
54
65
|
}};
|
|
55
66
|
transition: all 0.1s ease-in-out;
|
|
67
|
+
|
|
68
|
+
${StyledCard}:not([data-disabled='true']):not([data-selected='true']):hover & {
|
|
69
|
+
background-color: ${({ theme }) => theme.colors.brand["500"]};
|
|
70
|
+
}
|
|
56
71
|
`;
|
|
57
72
|
const StyledCardDisabled = styled(StyledCard)`
|
|
58
73
|
cursor: not-allowed;
|
|
@@ -66,17 +81,87 @@ const StyledCardDisabled = styled(StyledCard)`
|
|
|
66
81
|
pointer-events: none;
|
|
67
82
|
}
|
|
68
83
|
`;
|
|
69
|
-
const CardContent = styled(Grid)``;
|
|
70
|
-
const CardFooter = styled(Grid)`
|
|
71
|
-
border-top: 1px solid ${({ theme }) => theme.colors.neutral["200"]};
|
|
72
|
-
`;
|
|
73
84
|
const CardSelectIndicator = (props) => {
|
|
74
85
|
const { isSelected, isMultiSelect } = props;
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
return /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(PresentationalRadio, { checked: isSelected, "aria-label": "@todo" }) });
|
|
86
|
+
if (!isMultiSelect) {
|
|
87
|
+
return /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(PresentationalRadio, { checked: isSelected, "aria-label": "@todo", device: "desktop" }) });
|
|
78
88
|
}
|
|
79
|
-
return /* @__PURE__ */ jsx(StyledCardSingleIndicator, { isSelected
|
|
89
|
+
return /* @__PURE__ */ jsx(StyledCardSingleIndicator, { isSelected });
|
|
90
|
+
};
|
|
91
|
+
const CardHeader = (props) => {
|
|
92
|
+
const { isSelected, isMultiSelect, onClick } = React2.useContext(CardContext);
|
|
93
|
+
const { children, ...rest } = props;
|
|
94
|
+
if (isSelected !== void 0 && isMultiSelect && onClick) {
|
|
95
|
+
return /* @__PURE__ */ jsxs(
|
|
96
|
+
Grid,
|
|
97
|
+
{
|
|
98
|
+
cols: ["12px", "auto"],
|
|
99
|
+
"data-type": "card-header",
|
|
100
|
+
padding: "xxxs",
|
|
101
|
+
alignItems: "center",
|
|
102
|
+
minHeight: "56px",
|
|
103
|
+
...rest,
|
|
104
|
+
children: [
|
|
105
|
+
/* @__PURE__ */ jsx(CardSelectIndicator, { isSelected, isMultiSelect }),
|
|
106
|
+
/* @__PURE__ */ jsx(Grid, { py: "xxxs", paddingRight: "xxs2", children })
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
if (isSelected !== void 0 && !isMultiSelect && onClick) {
|
|
112
|
+
return /* @__PURE__ */ jsxs(
|
|
113
|
+
Grid,
|
|
114
|
+
{
|
|
115
|
+
cols: ["16px", "auto"],
|
|
116
|
+
"data-type": "card-header",
|
|
117
|
+
gutter: "xxs",
|
|
118
|
+
px: "xs",
|
|
119
|
+
py: "xxs",
|
|
120
|
+
alignItems: "center",
|
|
121
|
+
minHeight: "56px",
|
|
122
|
+
...rest,
|
|
123
|
+
children: [
|
|
124
|
+
/* @__PURE__ */ jsx(CardSelectIndicator, { isSelected, isMultiSelect }),
|
|
125
|
+
/* @__PURE__ */ jsx(Grid, { py: "xxxs", paddingRight: "xxs2", children })
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
return /* @__PURE__ */ jsx(Grid, { "data-type": "card-header", px: "xs", py: "xxs", gutter: "xxs", alignItems: "center", minHeight: "56px", ...rest, children });
|
|
131
|
+
};
|
|
132
|
+
const CardFooter = (props) => {
|
|
133
|
+
const { children, ...rest } = props;
|
|
134
|
+
return /* @__PURE__ */ jsx(
|
|
135
|
+
Grid,
|
|
136
|
+
{
|
|
137
|
+
"data-type": "card-footer",
|
|
138
|
+
px: "xs",
|
|
139
|
+
py: "xxs",
|
|
140
|
+
gutter: "xxs",
|
|
141
|
+
borderTop: "1px solid #CBCFD7",
|
|
142
|
+
minHeight: "40px",
|
|
143
|
+
alignItems: "center",
|
|
144
|
+
...rest,
|
|
145
|
+
children
|
|
146
|
+
}
|
|
147
|
+
);
|
|
148
|
+
};
|
|
149
|
+
const CardContent = (props) => {
|
|
150
|
+
const { children, ...rest } = props;
|
|
151
|
+
return /* @__PURE__ */ jsx(
|
|
152
|
+
Grid,
|
|
153
|
+
{
|
|
154
|
+
"data-type": "card-content",
|
|
155
|
+
gutter: "xxs",
|
|
156
|
+
px: "xs",
|
|
157
|
+
py: "xxs",
|
|
158
|
+
paddingTop: "0px",
|
|
159
|
+
minHeight: "64px",
|
|
160
|
+
alignItems: "center",
|
|
161
|
+
...rest,
|
|
162
|
+
children
|
|
163
|
+
}
|
|
164
|
+
);
|
|
80
165
|
};
|
|
81
166
|
const StyledFocusRing = styled(Grid)`
|
|
82
167
|
width: 100%;
|
|
@@ -124,14 +209,7 @@ const FocusRing = (props) => {
|
|
|
124
209
|
};
|
|
125
210
|
const Card = (props) => {
|
|
126
211
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
127
|
-
const { children, hasError, disabled, isOverlay, onClick } = propsWithDefault;
|
|
128
|
-
const [isHovered, setIsHovered] = React2.useState(false);
|
|
129
|
-
const handleOnMouseEnter = useCallback(() => {
|
|
130
|
-
setIsHovered(true);
|
|
131
|
-
}, []);
|
|
132
|
-
const handleOnMouseLeave = useCallback(() => {
|
|
133
|
-
setIsHovered(false);
|
|
134
|
-
}, []);
|
|
212
|
+
const { children, hasError, disabled, isOverlay, onClick, isSelected, isMultiSelect } = propsWithDefault;
|
|
135
213
|
const StyledCardContainer = useMemo(() => {
|
|
136
214
|
if (onClick && !disabled) {
|
|
137
215
|
return StyledButtonCard;
|
|
@@ -142,22 +220,28 @@ const Card = (props) => {
|
|
|
142
220
|
return StyledCard;
|
|
143
221
|
}, [disabled, onClick]);
|
|
144
222
|
const globalsAttrs = omit(useGetGlobalAttributes(propsWithDefault), ["cols", "rows", "wrap"]);
|
|
223
|
+
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
145
224
|
const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
|
|
146
|
-
return /* @__PURE__ */ jsx(CardContext.Provider, { value: {
|
|
225
|
+
return /* @__PURE__ */ jsx(CardContext.Provider, { value: { isMultiSelect, disabled, isSelected, onClick }, children: /* @__PURE__ */ jsx(
|
|
147
226
|
StyledCardContainer,
|
|
148
227
|
{
|
|
149
228
|
border: "solid 1px neutral-100",
|
|
150
229
|
boxShadow: "xs",
|
|
151
230
|
isOverlay,
|
|
152
231
|
...globalsAttrs,
|
|
153
|
-
|
|
154
|
-
|
|
232
|
+
...xstyledProps,
|
|
233
|
+
"data-disabled": disabled,
|
|
234
|
+
"data-selected": isSelected,
|
|
155
235
|
children: /* @__PURE__ */ jsxs(FocusRing, { target: `[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`, hasError, children: [
|
|
156
236
|
onClick ? /* @__PURE__ */ jsx(
|
|
157
237
|
CardActionArea,
|
|
158
238
|
{
|
|
159
239
|
disabled,
|
|
160
240
|
"data-testid": DSCardV3DataTestIds.ACTION_AREA,
|
|
241
|
+
"aria-selected": isSelected,
|
|
242
|
+
"aria-multiselectable": isMultiSelect,
|
|
243
|
+
"aria-disabled": disabled,
|
|
244
|
+
"aria-invalid": hasError,
|
|
161
245
|
getOwnerProps
|
|
162
246
|
}
|
|
163
247
|
) : null,
|
|
@@ -171,6 +255,7 @@ export {
|
|
|
171
255
|
CardActionArea,
|
|
172
256
|
CardContent,
|
|
173
257
|
CardFooter,
|
|
258
|
+
CardHeader,
|
|
174
259
|
CardSelectIndicator,
|
|
175
260
|
DSCardV3DataTestIds,
|
|
176
261
|
DSCardV3Name,
|
package/dist/esm/CardV3.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/CardV3.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable react/display-name */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled, slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { PresentationalRadio } from '@elliemae/ds-controlled-form';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable react/display-name */\nimport React, { useMemo, useCallback } from 'react';\nimport { omit } from 'lodash';\nimport { Grid, type DSGridT } from '@elliemae/ds-grid';\nimport { styled, slotObjectToDataTestIds, xStyledCommonProps } from '@elliemae/ds-system';\nimport { PresentationalRadio } from '@elliemae/ds-controlled-form';\nimport {\n useMemoMergePropsWithDefault,\n useGetXstyledProps,\n useGetGlobalAttributes,\n type GlobalAttributesT,\n} from '@elliemae/ds-utilities';\n\nexport const DSCardV3Name = 'DSCardV3';\nexport const DSCardV3Slots = {\n ACTION_AREA: 'action-area',\n};\n\nexport const DSCardV3DataTestIds = slotObjectToDataTestIds(DSCardV3Name, DSCardV3Slots);\n\ndeclare namespace CardT {\n export interface RequiredProps {\n children: React.ReactNode;\n }\n\n export interface OptinalProps {\n isSelected?: boolean;\n isMultiSelect?: boolean;\n isOverlay?: boolean;\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n }\n\n export interface DefaultProps {\n hasError: boolean;\n }\n\n export interface Props\n extends RequiredProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n OptinalProps,\n DefaultProps {}\n export interface InternalProps\n extends RequiredProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n OptinalProps,\n Partial<DefaultProps> {}\n\n export interface CardSelectIndicatorProps {\n isSelected?: boolean;\n isMultiSelect?: boolean;\n }\n}\n\ninterface CardContextProps {\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n isSelected?: boolean;\n isMultiSelect?: boolean;\n disabled?: boolean;\n}\n\nconst defaultContext: CardContextProps = {\n isSelected: false,\n isMultiSelect: false,\n disabled: false,\n};\n\nconst CardContext = React.createContext<CardContextProps>(defaultContext);\n\nexport const defaultProps: CardT.DefaultProps = {\n hasError: false,\n};\n\nexport const CardActionArea = styled('button', {\n name: DSCardV3Name,\n slot: DSCardV3Slots.ACTION_AREA,\n})`\n border: none;\n background-color: transparent;\n width: 0px;\n height: 0px;\n padding: 0;\n &:focus {\n outline: none;\n }\n text-align: unset;\n`;\n\n// START style cards variants\nexport const StyledCard = styled(Grid)<{\n isOverlay?: boolean;\n onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}>`\n min-width: 240px;\n min-height: 56px;\n background-color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['080'] : 'white')};\n outline-offset: -2px;\n * {\n color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['500'] : 'inherit')};\n }\n\n ${xStyledCommonProps}\n`;\n\nexport const StyledButtonCard = styled(StyledCard)<{ isOverlay?: boolean }>`\n cursor: pointer;\n`;\n\nexport const StyledCardError = styled(StyledCard)`\n outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};\n`;\n\nexport const StyledCardSingleIndicator = styled(Grid)<{ isSelected?: boolean }>`\n width: ${({ isSelected }) => (isSelected ? '6px' : '4px')};\n align-self: normal;\n background-color: ${({ theme, isSelected }) => {\n if (isSelected) return theme.colors.brand['700'];\n return theme.colors.brand['300'];\n }};\n transition: all 0.1s ease-in-out;\n\n ${StyledCard}:not([data-disabled='true']):not([data-selected='true']):hover & {\n background-color: ${({ theme }) => theme.colors.brand['500']};\n }\n`;\n\nexport const StyledCardDisabled = styled(StyledCard)`\n cursor: not-allowed;\n user-select: none;\n opacity: 0.5;\n ${StyledCardSingleIndicator} {\n background-color: ${({ theme, isSelected }) =>\n isSelected ? theme.colors.neutral['800'] : theme.colors.neutral['080']};\n }\n\n ${CardActionArea} {\n pointer-events: none;\n }\n`;\n\nexport const CardSelectIndicator = (props: CardT.CardSelectIndicatorProps) => {\n const { isSelected, isMultiSelect } = props;\n if (!isMultiSelect) {\n return (\n <Grid alignItems=\"center\">\n <PresentationalRadio checked={isSelected} aria-label=\"@todo\" device=\"desktop\" />\n </Grid>\n );\n }\n return <StyledCardSingleIndicator isSelected={isSelected} />;\n};\n\ninterface CardElementsProps extends DSGridT.InternalProps {\n children: React.ReactNode;\n}\nexport const CardHeader = (props: CardElementsProps) => {\n const { isSelected, isMultiSelect, onClick } = React.useContext(CardContext);\n const { children, ...rest } = props;\n if (isSelected !== undefined && isMultiSelect && onClick) {\n return (\n <Grid\n cols={['12px', 'auto']}\n data-type=\"card-header\"\n padding=\"xxxs\"\n alignItems=\"center\"\n minHeight=\"56px\"\n {...rest}\n >\n <CardSelectIndicator isSelected={isSelected} isMultiSelect={isMultiSelect} />\n <Grid py=\"xxxs\" paddingRight=\"xxs2\">\n {children}\n </Grid>\n </Grid>\n );\n }\n if (isSelected !== undefined && !isMultiSelect && onClick) {\n return (\n <Grid\n cols={['16px', 'auto']}\n data-type=\"card-header\"\n gutter=\"xxs\"\n px=\"xs\"\n py=\"xxs\"\n alignItems=\"center\"\n minHeight=\"56px\"\n {...rest}\n >\n <CardSelectIndicator isSelected={isSelected} isMultiSelect={isMultiSelect} />\n <Grid py=\"xxxs\" paddingRight=\"xxs2\">\n {children}\n </Grid>\n </Grid>\n );\n }\n return (\n <Grid data-type=\"card-header\" px=\"xs\" py=\"xxs\" gutter=\"xxs\" alignItems=\"center\" minHeight=\"56px\" {...rest}>\n {children}\n </Grid>\n );\n};\n\nexport const CardFooter = (props: CardElementsProps) => {\n const { children, ...rest } = props;\n return (\n <Grid\n data-type=\"card-footer\"\n px=\"xs\"\n py=\"xxs\"\n gutter=\"xxs\"\n borderTop=\"1px solid #CBCFD7\"\n minHeight=\"40px\"\n alignItems=\"center\"\n {...rest}\n >\n {children}\n </Grid>\n );\n};\n\nexport const CardContent = (props: CardElementsProps) => {\n const { children, ...rest } = props;\n return (\n <Grid\n data-type=\"card-content\"\n gutter=\"xxs\"\n px=\"xs\"\n py=\"xxs\"\n paddingTop=\"0px\"\n minHeight=\"64px\"\n alignItems=\"center\"\n {...rest}\n >\n {children}\n </Grid>\n );\n};\n\nconst StyledFocusRing = styled(Grid)<{ showFocusRing: boolean; hasError?: boolean }>`\n width: 100%;\n height: 100%;\n outline-offset: -1px;\n outline: ${({ showFocusRing, hasError, theme }) => {\n if (showFocusRing) {\n return `2px solid ${theme.colors.brand[700]}`;\n }\n if (hasError) {\n return `2px solid ${theme.colors.danger[900]}`;\n }\n return 'none';\n }};\n`;\n\ninterface FocusRingProps {\n target: string;\n children: React.ReactNode;\n hasError?: boolean;\n}\nconst FocusRing = (props: FocusRingProps) => {\n const { target, children, hasError } = props;\n const [showFocusRing, setShowFocusingRing] = React.useState(false);\n const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n (e) => {\n if (e.target.matches(target)) {\n setShowFocusingRing(true);\n }\n },\n [target],\n );\n\n const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = React.useCallback(\n (e) => {\n if (e.target.matches(target)) {\n setShowFocusingRing(false);\n }\n },\n [target],\n );\n return (\n <StyledFocusRing\n hasError={hasError}\n onFocusCapture={handleOnFocus}\n onBlurCapture={handleOnBlur}\n showFocusRing={showFocusRing}\n >\n {children}\n </StyledFocusRing>\n );\n};\n\n// create acontext\n\nexport const Card: React.ComponentType<CardT.InternalProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<CardT.Props>(props, defaultProps);\n const { children, hasError, disabled, isOverlay, onClick, isSelected, isMultiSelect } = propsWithDefault;\n\n const StyledCardContainer = useMemo(() => {\n if (onClick && !disabled) {\n return StyledButtonCard;\n }\n if (disabled) {\n return StyledCardDisabled;\n }\n return StyledCard;\n }, [disabled, onClick]);\n\n const globalsAttrs = omit(useGetGlobalAttributes(propsWithDefault), ['cols', 'rows', 'wrap']);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n return (\n <CardContext.Provider value={{ isMultiSelect, disabled, isSelected, onClick }}>\n <StyledCardContainer\n border=\"solid 1px neutral-100\"\n boxShadow=\"xs\"\n isOverlay={isOverlay}\n {...globalsAttrs}\n {...xstyledProps}\n data-disabled={disabled}\n data-selected={isSelected}\n >\n <FocusRing target={`[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`} hasError={hasError}>\n {onClick ? (\n <CardActionArea\n disabled={disabled}\n data-testid={DSCardV3DataTestIds.ACTION_AREA}\n aria-selected={isSelected}\n aria-multiselectable={isMultiSelect}\n aria-disabled={disabled}\n aria-invalid={hasError}\n getOwnerProps={getOwnerProps}\n />\n ) : null}\n {children}\n </FocusRing>\n </StyledCardContainer>\n </CardContext.Provider>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/types/CardV3.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { type DSGridT } from '@elliemae/ds-grid';
|
|
2
3
|
import { type GlobalAttributesT } from '@elliemae/ds-utilities';
|
|
3
4
|
export declare const DSCardV3Name = "DSCardV3";
|
|
4
5
|
export declare const DSCardV3Slots: {
|
|
@@ -29,25 +30,24 @@ declare namespace CardT {
|
|
|
29
30
|
}
|
|
30
31
|
export declare const defaultProps: CardT.DefaultProps;
|
|
31
32
|
export declare const CardActionArea: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
32
|
-
export declare const StyledCard: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<
|
|
33
|
+
export declare const StyledCard: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
33
34
|
isOverlay?: boolean | undefined;
|
|
34
35
|
onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
|
35
36
|
} & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
36
|
-
export declare const StyledButtonCard: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<
|
|
37
|
+
export declare const StyledButtonCard: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
37
38
|
isOverlay?: boolean | undefined;
|
|
38
39
|
onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
|
39
40
|
} & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, {
|
|
40
41
|
isOverlay?: boolean | undefined;
|
|
41
42
|
} & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
42
|
-
export declare const StyledCardError: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<
|
|
43
|
+
export declare const StyledCardError: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
43
44
|
isOverlay?: boolean | undefined;
|
|
44
45
|
onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
|
45
46
|
} & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
46
|
-
export declare const StyledCardSingleIndicator: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<
|
|
47
|
+
export declare const StyledCardSingleIndicator: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
47
48
|
isSelected?: boolean | undefined;
|
|
48
|
-
isHovered: boolean;
|
|
49
49
|
} & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
50
|
-
export declare const StyledCardDisabled: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<
|
|
50
|
+
export declare const StyledCardDisabled: import("styled-components").StyledComponent<import("styled-components").StyledComponent<React.ForwardRefExoticComponent<DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
51
51
|
isOverlay?: boolean | undefined;
|
|
52
52
|
onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
|
|
53
53
|
} & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, {
|
|
@@ -60,8 +60,12 @@ export declare const StyledCardDisabled: import("styled-components").StyledCompo
|
|
|
60
60
|
as?: string | React.ComponentType<any> | undefined;
|
|
61
61
|
forwardedAs?: string | React.ComponentType<any> | undefined;
|
|
62
62
|
} & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
63
|
-
export declare const CardContent: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
64
|
-
export declare const CardFooter: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
65
63
|
export declare const CardSelectIndicator: (props: CardT.CardSelectIndicatorProps) => import("react/jsx-runtime").JSX.Element;
|
|
64
|
+
interface CardElementsProps extends DSGridT.InternalProps {
|
|
65
|
+
children: React.ReactNode;
|
|
66
|
+
}
|
|
67
|
+
export declare const CardHeader: (props: CardElementsProps) => import("react/jsx-runtime").JSX.Element;
|
|
68
|
+
export declare const CardFooter: (props: CardElementsProps) => import("react/jsx-runtime").JSX.Element;
|
|
69
|
+
export declare const CardContent: (props: CardElementsProps) => import("react/jsx-runtime").JSX.Element;
|
|
66
70
|
export declare const Card: React.ComponentType<CardT.InternalProps>;
|
|
67
71
|
export {};
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
declare const CardContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid
|
|
2
|
+
declare const CardContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
3
3
|
hasBorder?: boolean | undefined;
|
|
4
4
|
} & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
5
5
|
declare const LeftSection: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-card-v2",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.24.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Card V2",
|
|
6
6
|
"files": [
|
|
@@ -49,22 +49,22 @@
|
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"lodash": "~4.17.21",
|
|
51
51
|
"uid": "~2.0.1",
|
|
52
|
-
"@elliemae/ds-button": "3.
|
|
53
|
-
"@elliemae/ds-controlled-form": "3.
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-
|
|
56
|
-
"@elliemae/ds-icons": "3.
|
|
57
|
-
"@elliemae/ds-
|
|
58
|
-
"@elliemae/ds-system": "3.
|
|
59
|
-
"@elliemae/ds-truncated-tooltip-text": "3.
|
|
60
|
-
"@elliemae/ds-utilities": "3.
|
|
52
|
+
"@elliemae/ds-button": "3.24.0-next.1",
|
|
53
|
+
"@elliemae/ds-controlled-form": "3.24.0-next.1",
|
|
54
|
+
"@elliemae/ds-header": "3.24.0-next.1",
|
|
55
|
+
"@elliemae/ds-separator": "3.24.0-next.1",
|
|
56
|
+
"@elliemae/ds-icons": "3.24.0-next.1",
|
|
57
|
+
"@elliemae/ds-grid": "3.24.0-next.1",
|
|
58
|
+
"@elliemae/ds-system": "3.24.0-next.1",
|
|
59
|
+
"@elliemae/ds-truncated-tooltip-text": "3.24.0-next.1",
|
|
60
|
+
"@elliemae/ds-utilities": "3.24.0-next.1"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@elliemae/pui-cli": "~9.0.0-next.22",
|
|
64
64
|
"@xstyled/system": "3.7.0",
|
|
65
65
|
"jest-axe": "^7.0.1",
|
|
66
66
|
"styled-components": "~5.3.9",
|
|
67
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
67
|
+
"@elliemae/ds-monorepo-devops": "3.24.0-next.1"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
70
|
"@testing-library/jest-dom": "~5.16.4",
|