@elliemae/ds-card-v2 3.22.0-next.30 → 3.22.0-next.32
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 +40 -14
- package/dist/cjs/CardV3.js.map +2 -2
- package/dist/esm/CardV3.js +40 -14
- package/dist/esm/CardV3.js.map +2 -2
- package/dist/types/CardV3.d.ts +1 -0
- package/package.json +11 -11
package/dist/cjs/CardV3.js
CHANGED
|
@@ -57,6 +57,7 @@ const DSCardV3Slots = {
|
|
|
57
57
|
ACTION_AREA: "action-area"
|
|
58
58
|
};
|
|
59
59
|
const DSCardV3DataTestIds = (0, import_ds_system.slotObjectToDataTestIds)(DSCardV3Name, DSCardV3Slots);
|
|
60
|
+
const CardContext = import_react.default.createContext({ isHovered: false });
|
|
60
61
|
const defaultProps = {
|
|
61
62
|
hasError: false
|
|
62
63
|
};
|
|
@@ -88,9 +89,15 @@ const StyledCardError = (0, import_ds_system.styled)(StyledCard)`
|
|
|
88
89
|
outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};
|
|
89
90
|
`;
|
|
90
91
|
const StyledCardSingleIndicator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
91
|
-
width: ${({ isSelected }) => isSelected ? "6px" : "4px"};
|
|
92
|
+
width: ${({ isSelected, isHovered }) => isSelected || isHovered ? "6px" : "4px"};
|
|
92
93
|
align-self: normal;
|
|
93
|
-
background-color: ${({ theme, isSelected }) =>
|
|
94
|
+
background-color: ${({ theme, isHovered, isSelected }) => {
|
|
95
|
+
if (isSelected)
|
|
96
|
+
return theme.colors.brand["700"];
|
|
97
|
+
else if (isHovered)
|
|
98
|
+
return theme.colors.brand["500"];
|
|
99
|
+
return theme.colors.brand["300"];
|
|
100
|
+
}};
|
|
94
101
|
transition: all 0.1s ease-in-out;
|
|
95
102
|
`;
|
|
96
103
|
const StyledCardDisabled = (0, import_ds_system.styled)(StyledCard)`
|
|
@@ -111,10 +118,11 @@ const CardFooter = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
111
118
|
`;
|
|
112
119
|
const CardSelectIndicator = (props) => {
|
|
113
120
|
const { isSelected, isMultiSelect } = props;
|
|
121
|
+
const { isHovered } = import_react.default.useContext(CardContext);
|
|
114
122
|
if (isMultiSelect) {
|
|
115
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" }) });
|
|
116
124
|
}
|
|
117
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardSingleIndicator, { isSelected });
|
|
125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardSingleIndicator, { isSelected, isHovered });
|
|
118
126
|
};
|
|
119
127
|
const StyledFocusRing = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
120
128
|
width: 100%;
|
|
@@ -163,6 +171,13 @@ const FocusRing = (props) => {
|
|
|
163
171
|
const Card = (props) => {
|
|
164
172
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, defaultProps);
|
|
165
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
|
+
}, []);
|
|
166
181
|
const StyledCardContainer = (0, import_react.useMemo)(() => {
|
|
167
182
|
if (onClick && !disabled) {
|
|
168
183
|
return StyledButtonCard;
|
|
@@ -174,16 +189,27 @@ const Card = (props) => {
|
|
|
174
189
|
}, [disabled, onClick]);
|
|
175
190
|
const globalsAttrs = (0, import_lodash.omit)((0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault), ["cols", "rows", "wrap"]);
|
|
176
191
|
const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
|
|
177
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
192
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContext.Provider, { value: { isHovered }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
193
|
+
StyledCardContainer,
|
|
194
|
+
{
|
|
195
|
+
border: "solid 1px neutral-100",
|
|
196
|
+
boxShadow: "xs",
|
|
197
|
+
isOverlay,
|
|
198
|
+
...globalsAttrs,
|
|
199
|
+
onMouseEnter: handleOnMouseEnter,
|
|
200
|
+
onMouseLeave: handleOnMouseLeave,
|
|
201
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FocusRing, { target: `[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`, hasError, children: [
|
|
202
|
+
onClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
203
|
+
CardActionArea,
|
|
204
|
+
{
|
|
205
|
+
disabled,
|
|
206
|
+
"data-testid": DSCardV3DataTestIds.ACTION_AREA,
|
|
207
|
+
getOwnerProps
|
|
208
|
+
}
|
|
209
|
+
) : null,
|
|
210
|
+
children
|
|
211
|
+
] })
|
|
212
|
+
}
|
|
213
|
+
) });
|
|
188
214
|
};
|
|
189
215
|
//# sourceMappingURL=CardV3.js.map
|
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';\n\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, type GlobalAttributesT } 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\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 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\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 }) => (isSelected
|
|
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 } from '@elliemae/ds-grid';\nimport { styled, slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { PresentationalRadio } from '@elliemae/ds-controlled-form';\n\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, type GlobalAttributesT } 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 isHovered: boolean;\n}\nconst CardContext = React.createContext<CardContextProps>({ isHovered: false });\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 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\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; isHovered: boolean }>`\n width: ${({ isSelected, isHovered }) => (isSelected || isHovered ? '6px' : '4px')};\n align-self: normal;\n background-color: ${({ theme, isHovered, isSelected }) => {\n if (isSelected) return theme.colors.brand['700'];\n else if (isHovered) return theme.colors.brand['500'];\n return theme.colors.brand['300'];\n }};\n transition: all 0.1s ease-in-out;\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// END style cards variants\nexport const CardContent = styled(Grid)``;\n\nexport const CardFooter = styled(Grid)`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral['200']};\n`;\n\nexport const CardSelectIndicator = (props: CardT.CardSelectIndicatorProps) => {\n const { isSelected, isMultiSelect } = props;\n const { isHovered } = React.useContext(CardContext);\n if (isMultiSelect) {\n return (\n <Grid alignItems=\"center\">\n <PresentationalRadio checked={isSelected} aria-label=\"@todo\" />\n </Grid>\n );\n }\n return <StyledCardSingleIndicator isSelected={isSelected} isHovered={isHovered} />;\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 } = propsWithDefault;\n\n const [isHovered, setIsHovered] = React.useState(false);\n\n const handleOnMouseEnter = useCallback(() => {\n setIsHovered(true);\n }, []);\n\n const handleOnMouseLeave = useCallback(() => {\n setIsHovered(false);\n }, []);\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 getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n return (\n <CardContext.Provider value={{ isHovered }}>\n <StyledCardContainer\n border=\"solid 1px neutral-100\"\n boxShadow=\"xs\"\n isOverlay={isOverlay}\n {...globalsAttrs}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\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 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
|
@@ -11,6 +11,7 @@ const DSCardV3Slots = {
|
|
|
11
11
|
ACTION_AREA: "action-area"
|
|
12
12
|
};
|
|
13
13
|
const DSCardV3DataTestIds = slotObjectToDataTestIds(DSCardV3Name, DSCardV3Slots);
|
|
14
|
+
const CardContext = React2.createContext({ isHovered: false });
|
|
14
15
|
const defaultProps = {
|
|
15
16
|
hasError: false
|
|
16
17
|
};
|
|
@@ -42,9 +43,15 @@ const StyledCardError = styled(StyledCard)`
|
|
|
42
43
|
outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};
|
|
43
44
|
`;
|
|
44
45
|
const StyledCardSingleIndicator = styled(Grid)`
|
|
45
|
-
width: ${({ isSelected }) => isSelected ? "6px" : "4px"};
|
|
46
|
+
width: ${({ isSelected, isHovered }) => isSelected || isHovered ? "6px" : "4px"};
|
|
46
47
|
align-self: normal;
|
|
47
|
-
background-color: ${({ theme, isSelected }) =>
|
|
48
|
+
background-color: ${({ theme, isHovered, isSelected }) => {
|
|
49
|
+
if (isSelected)
|
|
50
|
+
return theme.colors.brand["700"];
|
|
51
|
+
else if (isHovered)
|
|
52
|
+
return theme.colors.brand["500"];
|
|
53
|
+
return theme.colors.brand["300"];
|
|
54
|
+
}};
|
|
48
55
|
transition: all 0.1s ease-in-out;
|
|
49
56
|
`;
|
|
50
57
|
const StyledCardDisabled = styled(StyledCard)`
|
|
@@ -65,10 +72,11 @@ const CardFooter = styled(Grid)`
|
|
|
65
72
|
`;
|
|
66
73
|
const CardSelectIndicator = (props) => {
|
|
67
74
|
const { isSelected, isMultiSelect } = props;
|
|
75
|
+
const { isHovered } = React2.useContext(CardContext);
|
|
68
76
|
if (isMultiSelect) {
|
|
69
77
|
return /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(PresentationalRadio, { checked: isSelected, "aria-label": "@todo" }) });
|
|
70
78
|
}
|
|
71
|
-
return /* @__PURE__ */ jsx(StyledCardSingleIndicator, { isSelected });
|
|
79
|
+
return /* @__PURE__ */ jsx(StyledCardSingleIndicator, { isSelected, isHovered });
|
|
72
80
|
};
|
|
73
81
|
const StyledFocusRing = styled(Grid)`
|
|
74
82
|
width: 100%;
|
|
@@ -117,6 +125,13 @@ const FocusRing = (props) => {
|
|
|
117
125
|
const Card = (props) => {
|
|
118
126
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
119
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
|
+
}, []);
|
|
120
135
|
const StyledCardContainer = useMemo(() => {
|
|
121
136
|
if (onClick && !disabled) {
|
|
122
137
|
return StyledButtonCard;
|
|
@@ -128,17 +143,28 @@ const Card = (props) => {
|
|
|
128
143
|
}, [disabled, onClick]);
|
|
129
144
|
const globalsAttrs = omit(useGetGlobalAttributes(propsWithDefault), ["cols", "rows", "wrap"]);
|
|
130
145
|
const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
|
|
131
|
-
return /* @__PURE__ */ jsx(
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
146
|
+
return /* @__PURE__ */ jsx(CardContext.Provider, { value: { isHovered }, children: /* @__PURE__ */ jsx(
|
|
147
|
+
StyledCardContainer,
|
|
148
|
+
{
|
|
149
|
+
border: "solid 1px neutral-100",
|
|
150
|
+
boxShadow: "xs",
|
|
151
|
+
isOverlay,
|
|
152
|
+
...globalsAttrs,
|
|
153
|
+
onMouseEnter: handleOnMouseEnter,
|
|
154
|
+
onMouseLeave: handleOnMouseLeave,
|
|
155
|
+
children: /* @__PURE__ */ jsxs(FocusRing, { target: `[data-testid=${DSCardV3DataTestIds.ACTION_AREA}]`, hasError, children: [
|
|
156
|
+
onClick ? /* @__PURE__ */ jsx(
|
|
157
|
+
CardActionArea,
|
|
158
|
+
{
|
|
159
|
+
disabled,
|
|
160
|
+
"data-testid": DSCardV3DataTestIds.ACTION_AREA,
|
|
161
|
+
getOwnerProps
|
|
162
|
+
}
|
|
163
|
+
) : null,
|
|
164
|
+
children
|
|
165
|
+
] })
|
|
166
|
+
}
|
|
167
|
+
) });
|
|
142
168
|
};
|
|
143
169
|
export {
|
|
144
170
|
Card,
|
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';\n\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, type GlobalAttributesT } 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\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 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\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 }) => (isSelected
|
|
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 } from '@elliemae/ds-grid';\nimport { styled, slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { PresentationalRadio } from '@elliemae/ds-controlled-form';\n\nimport { useMemoMergePropsWithDefault, useGetGlobalAttributes, type GlobalAttributesT } 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 isHovered: boolean;\n}\nconst CardContext = React.createContext<CardContextProps>({ isHovered: false });\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 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\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; isHovered: boolean }>`\n width: ${({ isSelected, isHovered }) => (isSelected || isHovered ? '6px' : '4px')};\n align-self: normal;\n background-color: ${({ theme, isHovered, isSelected }) => {\n if (isSelected) return theme.colors.brand['700'];\n else if (isHovered) return theme.colors.brand['500'];\n return theme.colors.brand['300'];\n }};\n transition: all 0.1s ease-in-out;\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// END style cards variants\nexport const CardContent = styled(Grid)``;\n\nexport const CardFooter = styled(Grid)`\n border-top: 1px solid ${({ theme }) => theme.colors.neutral['200']};\n`;\n\nexport const CardSelectIndicator = (props: CardT.CardSelectIndicatorProps) => {\n const { isSelected, isMultiSelect } = props;\n const { isHovered } = React.useContext(CardContext);\n if (isMultiSelect) {\n return (\n <Grid alignItems=\"center\">\n <PresentationalRadio checked={isSelected} aria-label=\"@todo\" />\n </Grid>\n );\n }\n return <StyledCardSingleIndicator isSelected={isSelected} isHovered={isHovered} />;\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 } = propsWithDefault;\n\n const [isHovered, setIsHovered] = React.useState(false);\n\n const handleOnMouseEnter = useCallback(() => {\n setIsHovered(true);\n }, []);\n\n const handleOnMouseLeave = useCallback(() => {\n setIsHovered(false);\n }, []);\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 getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n return (\n <CardContext.Provider value={{ isHovered }}>\n <StyledCardContainer\n border=\"solid 1px neutral-100\"\n boxShadow=\"xs\"\n isOverlay={isOverlay}\n {...globalsAttrs}\n onMouseEnter={handleOnMouseEnter}\n onMouseLeave={handleOnMouseLeave}\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 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
|
@@ -45,6 +45,7 @@ export declare const StyledCardError: import("styled-components").StyledComponen
|
|
|
45
45
|
} & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
46
46
|
export declare const StyledCardSingleIndicator: 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, {
|
|
47
47
|
isSelected?: boolean | undefined;
|
|
48
|
+
isHovered: boolean;
|
|
48
49
|
} & import("@elliemae/ds-system").OwnerInterface, never>;
|
|
49
50
|
export declare const StyledCardDisabled: import("styled-components").StyledComponent<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, {
|
|
50
51
|
isOverlay?: boolean | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-card-v2",
|
|
3
|
-
"version": "3.22.0-next.
|
|
3
|
+
"version": "3.22.0-next.32",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Card V2",
|
|
6
6
|
"files": [
|
|
@@ -51,20 +51,20 @@
|
|
|
51
51
|
"jest-axe": "^7.0.1",
|
|
52
52
|
"lodash": "^4.17.21",
|
|
53
53
|
"uid": "~2.0.1",
|
|
54
|
-
"@elliemae/ds-button": "3.22.0-next.
|
|
55
|
-
"@elliemae/ds-
|
|
56
|
-
"@elliemae/ds-grid": "3.22.0-next.
|
|
57
|
-
"@elliemae/ds-header": "3.22.0-next.
|
|
58
|
-
"@elliemae/ds-
|
|
59
|
-
"@elliemae/ds-
|
|
60
|
-
"@elliemae/ds-
|
|
61
|
-
"@elliemae/ds-
|
|
62
|
-
"@elliemae/ds-utilities": "3.22.0-next.
|
|
54
|
+
"@elliemae/ds-button": "3.22.0-next.32",
|
|
55
|
+
"@elliemae/ds-icons": "3.22.0-next.32",
|
|
56
|
+
"@elliemae/ds-grid": "3.22.0-next.32",
|
|
57
|
+
"@elliemae/ds-header": "3.22.0-next.32",
|
|
58
|
+
"@elliemae/ds-controlled-form": "3.22.0-next.32",
|
|
59
|
+
"@elliemae/ds-separator": "3.22.0-next.32",
|
|
60
|
+
"@elliemae/ds-system": "3.22.0-next.32",
|
|
61
|
+
"@elliemae/ds-truncated-tooltip-text": "3.22.0-next.32",
|
|
62
|
+
"@elliemae/ds-utilities": "3.22.0-next.32"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@elliemae/pui-cli": "~9.0.0-next.22",
|
|
66
66
|
"styled-components": "~5.3.9",
|
|
67
|
-
"@elliemae/ds-monorepo-devops": "3.22.0-next.
|
|
67
|
+
"@elliemae/ds-monorepo-devops": "3.22.0-next.32"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
70
|
"@testing-library/jest-dom": "~5.16.4",
|