@elliemae/ds-card-v3-poc 3.62.1 → 3.70.0-alpha.9
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.map +1 -1
- package/dist/cjs/parts/CardSelectIndicator.js +1 -1
- package/dist/cjs/parts/CardSelectIndicator.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/styled.js.map +1 -1
- package/dist/esm/CardV3.js.map +1 -1
- package/dist/esm/parts/CardSelectIndicator.js +1 -1
- package/dist/esm/parts/CardSelectIndicator.js.map +2 -2
- package/dist/esm/styled.js.map +1 -1
- package/dist/types/parts/CardContent.d.ts +2 -1
- package/dist/types/parts/CardFocusRing.d.ts +2 -1
- package/dist/types/parts/CardFooter.d.ts +2 -1
- package/dist/types/parts/CardHeader.d.ts +2 -1
- package/dist/types/parts/CardSelectIndicator.d.ts +2 -1
- package/package.json +9 -9
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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n\n/* eslint-disable react/display-name */\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useMemo } from 'react';\nimport { DSCardV3DataTestIds } from './CardV3Definitions.js';\nimport { CardContext } from './parts/CardContext.js';\nimport { FocusRing } from './parts/index.js';\nimport type { CardT } from './react-desc-prop-types.js';\nimport { CardActionArea, StyledButtonCard, StyledCard, StyledCardDisabled } from './styled.js';\n\nexport const defaultProps: CardT.DefaultProps = {\n hasError: false,\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 = useGetGlobalAttributes<CardT.InternalProps, HTMLDivElement, DSGridT.Props>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n const ctx = useMemo(\n () => ({\n isMultiSelect,\n disabled,\n isSelected,\n onClick,\n }),\n [isMultiSelect, disabled, isSelected, onClick],\n );\n\n return (\n <CardContext.Provider value={ctx}>\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
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDf;AArDR,8BAAyF;AACzF,mBAA4C;AAC5C,+BAAoC;AACpC,yBAA4B;AAC5B,mBAA0B;AAE1B,oBAAiF;AAE1E,MAAM,eAAmC;AAAA,EAC9C,UAAU;AACZ;AAIO,MAAM,OAAiD,CAAC,UAAU;AACvE,QAAM,uBAAmB,sDAA0C,OAAO,YAAY;AACtF,QAAM,EAAE,UAAU,UAAU,UAAU,WAAW,SAAS,YAAY,cAAc,IAAI;AAExF,QAAM,0BAAsB,sBAAQ,MAAM;AACxC,QAAI,WAAW,CAAC,UAAU;AACxB,aAAO;AAAA,IACT;AACA,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,OAAO,CAAC;AAEtB,QAAM,mBAAe,gDAA2E,gBAAgB;AAChH,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAE5E,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,UAAU,YAAY,OAAO;AAAA,EAC/C;AAEA,SACE,4CAAC,+BAAY,UAAZ,EAAqB,OAAO,KAC3B;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAU;AAAA,MACV;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MAEf,uDAAC,0BAAU,QAAQ,gBAAgB,6CAAoB,WAAW,KAAK,UACpE;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,6CAAoB;AAAA,YACjC,iBAAe;AAAA,YACf,wBAAsB;AAAA,YACtB,iBAAe;AAAA,YACf,gBAAc;AAAA,YACd;AAAA;AAAA,QACF,IACE;AAAA,QACH;AAAA,SACH;AAAA;AAAA,EACF,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,7 +39,7 @@ var import_styled = require("../styled.js");
|
|
|
39
39
|
const CardSelectIndicator = (props) => {
|
|
40
40
|
const { isSelected, isMultiSelect } = props;
|
|
41
41
|
if (!isMultiSelect) {
|
|
42
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_radio.PresentationalRadio, { checked: isSelected, "aria-label": "@todo", device: "desktop" }) });
|
|
42
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_radio.PresentationalRadio, { checked: isSelected, "aria-label": "@todo", device: "desktop", name: "", value: "" }) });
|
|
43
43
|
}
|
|
44
44
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCardSingleIndicator, { isSelected });
|
|
45
45
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/CardSelectIndicator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PresentationalRadio } from '@elliemae/ds-form-radio';\nimport { StyledCardSingleIndicator } from '../styled.js';\nimport { type CardT } from '../react-desc-prop-types.js';\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWf;AAVR,qBAAqB;AACrB,2BAAoC;AACpC,oBAA0C;AAGnC,MAAM,sBAAsB,CAAC,UAA0C;AAC5E,QAAM,EAAE,YAAY,cAAc,IAAI;AACtC,MAAI,CAAC,eAAe;AAClB,WACE,4CAAC,uBAAK,YAAW,UACf,sDAAC,4CAAoB,SAAS,YAAY,cAAW,SAAQ,QAAO,WAAU,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PresentationalRadio } from '@elliemae/ds-form-radio';\nimport { StyledCardSingleIndicator } from '../styled.js';\nimport { type CardT } from '../react-desc-prop-types.js';\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\" name=\"\" value=\"\" />\n </Grid>\n );\n }\n return <StyledCardSingleIndicator isSelected={isSelected} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWf;AAVR,qBAAqB;AACrB,2BAAoC;AACpC,oBAA0C;AAGnC,MAAM,sBAAsB,CAAC,UAA0C;AAC5E,QAAM,EAAE,YAAY,cAAc,IAAI;AACtC,MAAI,CAAC,eAAe;AAClB,WACE,4CAAC,uBAAK,YAAW,UACf,sDAAC,4CAAoB,SAAS,YAAY,cAAW,SAAQ,QAAO,WAAU,MAAK,IAAG,OAAM,IAAG,GACjG;AAAA,EAEJ;AACA,SAAO,4CAAC,2CAA0B,YAAwB;AAC5D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { type GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { type DSGridT } from '@elliemae/ds-grid';\n\nexport declare 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
|
|
4
|
+
"sourcesContent": ["import { type GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { type DSGridT } from '@elliemae/ds-grid';\n\nexport declare 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\n RequiredProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>,\n OptinalProps,\n DefaultProps {}\n export interface InternalProps\n extends\n 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 export interface FocusRingProps {\n target: string;\n children: React.ReactNode;\n hasError?: boolean;\n }\n\n export interface CardElementsProps extends Partial<DSGridT.InternalProps> {\n children: React.ReactNode;\n }\n}\n\nexport interface CardContextProps {\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n isSelected?: boolean;\n isMultiSelect?: boolean;\n disabled?: boolean;\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV3Name, DSCardV3Slots } from './CardV3Definitions.js';\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 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\nexport const StyledCardDisabled: React.FC = styled(StyledCard)
|
|
4
|
+
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV3Name, DSCardV3Slots } from './CardV3Definitions.js';\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 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\nexport const StyledCardDisabled: React.FC = styled(StyledCard)<{ isSelected?: boolean }>`\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,qBAAqB;AACrB,+BAA4C;AACrC,MAAM,qBAAiB,yBAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,uCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM,MAAM,iBAAa,yBAAO,mBAAI;AAAA;AAAA;AAAA,sBAMf,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI,OAAQ;AAAA;AAAA;AAAA,aAGtF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAU;AAAA;AAAA;AAAA,IAGxF,mCAAkB;AAAA;AAGf,MAAM,uBAAmB,yBAAO,UAAU;AAAA;AAAA;AAI1C,MAAM,sBAAkB,yBAAO,UAAU;AAAA,aACnC,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,OAAO,GAAG,CAAC,EAAE;AAAA;AAG5D,MAAM,gCAA4B,yBAAO,mBAAI;AAAA,WACzC,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ,KAAM;AAAA;AAAA,sBAErC,CAAC,EAAE,OAAO,WAAW,MAAM;AAC7C,MAAI,WAAY,QAAO,MAAM,OAAO,MAAM,KAAK;AAC/C,SAAO,MAAM,OAAO,MAAM,KAAK;AACjC,CAAC;AAAA;AAAA;AAAA,IAGC,UAAU;AAAA,wBACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAIzD,MAAM,sBAAkB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA,aAI7B,CAAC,EAAE,eAAe,UAAU,MAAM,MAAM;AACjD,MAAI,eAAe;AACjB,WAAO,aAAa,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAC7C;AACA,MAAI,UAAU;AACZ,WAAO,aAAa,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EAC9C;AACA,SAAO;AACT,CAAC;AAAA;AAGI,MAAM,yBAA+B,yBAAO,UAAU;AAAA;AAAA;AAAA;AAAA,IAIzD,yBAAyB;AAAA,wBACL,CAAC,EAAE,OAAO,WAAW,MACvC,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,IAGxE,cAAc;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
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
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n\n/* eslint-disable react/display-name */\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useMemo } from 'react';\nimport { DSCardV3DataTestIds } from './CardV3Definitions.js';\nimport { CardContext } from './parts/CardContext.js';\nimport { FocusRing } from './parts/index.js';\nimport type { CardT } from './react-desc-prop-types.js';\nimport { CardActionArea, StyledButtonCard, StyledCard, StyledCardDisabled } from './styled.js';\n\nexport const defaultProps: CardT.DefaultProps = {\n hasError: false,\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 = useGetGlobalAttributes<CardT.InternalProps, HTMLDivElement, DSGridT.Props>(propsWithDefault);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n\n const ctx = useMemo(\n () => ({\n isMultiSelect,\n disabled,\n isSelected,\n onClick,\n }),\n [isMultiSelect, disabled, isSelected, onClick],\n );\n\n return (\n <CardContext.Provider value={ctx}>\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
5
|
"mappings": "AAAA,YAAY,WAAW;ACyDf,SAEI,KAFJ;AArDR,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAgB,aAAa,eAAe;AAC5C,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAE1B,SAAS,gBAAgB,kBAAkB,YAAY,0BAA0B;AAE1E,MAAM,eAAmC;AAAA,EAC9C,UAAU;AACZ;AAIO,MAAM,OAAiD,CAAC,UAAU;AACvE,QAAM,mBAAmB,6BAA0C,OAAO,YAAY;AACtF,QAAM,EAAE,UAAU,UAAU,UAAU,WAAW,SAAS,YAAY,cAAc,IAAI;AAExF,QAAM,sBAAsB,QAAQ,MAAM;AACxC,QAAI,WAAW,CAAC,UAAU;AACxB,aAAO;AAAA,IACT;AACA,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,OAAO,CAAC;AAEtB,QAAM,eAAe,uBAA2E,gBAAgB;AAChH,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAE5E,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,UAAU,YAAY,OAAO;AAAA,EAC/C;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,KAC3B;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAU;AAAA,MACV;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MAEf,+BAAC,aAAU,QAAQ,gBAAgB,oBAAoB,WAAW,KAAK,UACpE;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAa,oBAAoB;AAAA,YACjC,iBAAe;AAAA,YACf,wBAAsB;AAAA,YACtB,iBAAe;AAAA,YACf,gBAAc;AAAA,YACd;AAAA;AAAA,QACF,IACE;AAAA,QACH;AAAA,SACH;AAAA;AAAA,EACF,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,7 +6,7 @@ import { StyledCardSingleIndicator } from "../styled.js";
|
|
|
6
6
|
const CardSelectIndicator = (props) => {
|
|
7
7
|
const { isSelected, isMultiSelect } = props;
|
|
8
8
|
if (!isMultiSelect) {
|
|
9
|
-
return /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(PresentationalRadio, { checked: isSelected, "aria-label": "@todo", device: "desktop" }) });
|
|
9
|
+
return /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(PresentationalRadio, { checked: isSelected, "aria-label": "@todo", device: "desktop", name: "", value: "" }) });
|
|
10
10
|
}
|
|
11
11
|
return /* @__PURE__ */ jsx(StyledCardSingleIndicator, { isSelected });
|
|
12
12
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/CardSelectIndicator.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PresentationalRadio } from '@elliemae/ds-form-radio';\nimport { StyledCardSingleIndicator } from '../styled.js';\nimport { type CardT } from '../react-desc-prop-types.js';\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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACWf;AAVR,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAGnC,MAAM,sBAAsB,CAAC,UAA0C;AAC5E,QAAM,EAAE,YAAY,cAAc,IAAI;AACtC,MAAI,CAAC,eAAe;AAClB,WACE,oBAAC,QAAK,YAAW,UACf,8BAAC,uBAAoB,SAAS,YAAY,cAAW,SAAQ,QAAO,WAAU,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PresentationalRadio } from '@elliemae/ds-form-radio';\nimport { StyledCardSingleIndicator } from '../styled.js';\nimport { type CardT } from '../react-desc-prop-types.js';\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\" name=\"\" value=\"\" />\n </Grid>\n );\n }\n return <StyledCardSingleIndicator isSelected={isSelected} />;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACWf;AAVR,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAGnC,MAAM,sBAAsB,CAAC,UAA0C;AAC5E,QAAM,EAAE,YAAY,cAAc,IAAI;AACtC,MAAI,CAAC,eAAe;AAClB,WACE,oBAAC,QAAK,YAAW,UACf,8BAAC,uBAAoB,SAAS,YAAY,cAAW,SAAQ,QAAO,WAAU,MAAK,IAAG,OAAM,IAAG,GACjG;AAAA,EAEJ;AACA,SAAO,oBAAC,6BAA0B,YAAwB;AAC5D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV3Name, DSCardV3Slots } from './CardV3Definitions.js';\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 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\nexport const StyledCardDisabled: React.FC = styled(StyledCard)
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV3Name, DSCardV3Slots } from './CardV3Definitions.js';\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 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\nexport const StyledCardDisabled: React.FC = styled(StyledCard)<{ isSelected?: boolean }>`\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"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAS,cAAc,qBAAqB;AACrC,MAAM,iBAAiB,OAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA,sBAMf,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI,OAAQ;AAAA;AAAA;AAAA,aAGtF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAU;AAAA;AAAA;AAAA,IAGxF,kBAAkB;AAAA;AAGf,MAAM,mBAAmB,OAAO,UAAU;AAAA;AAAA;AAI1C,MAAM,kBAAkB,OAAO,UAAU;AAAA,aACnC,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,OAAO,GAAG,CAAC,EAAE;AAAA;AAG5D,MAAM,4BAA4B,OAAO,IAAI;AAAA,WACzC,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ,KAAM;AAAA;AAAA,sBAErC,CAAC,EAAE,OAAO,WAAW,MAAM;AAC7C,MAAI,WAAY,QAAO,MAAM,OAAO,MAAM,KAAK;AAC/C,SAAO,MAAM,OAAO,MAAM,KAAK;AACjC,CAAC;AAAA;AAAA;AAAA,IAGC,UAAU;AAAA,wBACU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAIzD,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,aAI7B,CAAC,EAAE,eAAe,UAAU,MAAM,MAAM;AACjD,MAAI,eAAe;AACjB,WAAO,aAAa,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAC7C;AACA,MAAI,UAAU;AACZ,WAAO,aAAa,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EAC9C;AACA,SAAO;AACT,CAAC;AAAA;AAGI,MAAM,qBAA+B,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,IAIzD,yBAAyB;AAAA,wBACL,CAAC,EAAE,OAAO,WAAW,MACvC,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,IAGxE,cAAc;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { CardT } from '../react-desc-prop-types.js';
|
|
2
|
-
export declare const CardContent: (props: CardT.CardElementsProps) =>
|
|
3
|
+
export declare const CardContent: (props: CardT.CardElementsProps) => React.JSX.Element;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { type CardT } from '../react-desc-prop-types.js';
|
|
2
|
-
export declare const FocusRing: (props: CardT.FocusRingProps) =>
|
|
3
|
+
export declare const FocusRing: (props: CardT.FocusRingProps) => React.JSX.Element;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { CardT } from '../react-desc-prop-types.js';
|
|
2
|
-
export declare const CardFooter: (props: CardT.CardElementsProps) =>
|
|
3
|
+
export declare const CardFooter: (props: CardT.CardElementsProps) => React.JSX.Element;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import type { CardT } from '../react-desc-prop-types.js';
|
|
2
|
-
export declare const CardHeader: (props: CardT.CardElementsProps) =>
|
|
3
|
+
export declare const CardHeader: (props: CardT.CardElementsProps) => React.JSX.Element;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { type CardT } from '../react-desc-prop-types.js';
|
|
2
|
-
export declare const CardSelectIndicator: (props: CardT.CardSelectIndicatorProps) =>
|
|
3
|
+
export declare const CardSelectIndicator: (props: CardT.CardSelectIndicatorProps) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-card-v3-poc",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.70.0-alpha.9",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Card V3",
|
|
6
6
|
"files": [
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
],
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
|
-
"url": "https://
|
|
25
|
+
"url": "https://github.com/intcx/PLATFORM-UI.dimsum.git"
|
|
26
26
|
},
|
|
27
27
|
"engines": {
|
|
28
28
|
"pnpm": ">=9",
|
|
@@ -36,23 +36,23 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-props-helpers": "3.
|
|
42
|
-
"@elliemae/ds-grid": "3.
|
|
39
|
+
"@elliemae/ds-form-radio": "3.70.0-alpha.9",
|
|
40
|
+
"@elliemae/ds-system": "3.70.0-alpha.9",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.70.0-alpha.9",
|
|
42
|
+
"@elliemae/ds-grid": "3.70.0-alpha.9"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@elliemae/pui-theme": "~2.13.0",
|
|
46
46
|
"jest": "^30.0.0",
|
|
47
|
-
"styled-components": "~5.3.
|
|
47
|
+
"styled-components": "~5.3.11",
|
|
48
48
|
"styled-system": "^5.1.5",
|
|
49
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
49
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-alpha.9"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"@elliemae/pui-theme": "~2.13.0",
|
|
53
53
|
"react": "^18.3.1",
|
|
54
54
|
"react-dom": "^18.3.1",
|
|
55
|
-
"styled-components": "~5.3.
|
|
55
|
+
"styled-components": "~5.3.11",
|
|
56
56
|
"styled-system": "^5.1.5"
|
|
57
57
|
},
|
|
58
58
|
"publishConfig": {
|