@elliemae/ds-card-v2 3.22.0-next.25 → 3.22.0-next.30

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.
Files changed (20) hide show
  1. package/dist/cjs/CardV3.js +2 -2
  2. package/dist/cjs/CardV3.js.map +3 -3
  3. package/dist/cjs/DSCardV2.js.map +1 -1
  4. package/dist/cjs/config/useCardV2.js.map +1 -1
  5. package/dist/cjs/config/useValidateProps.js.map +1 -1
  6. package/dist/cjs/constants/index.js.map +1 -1
  7. package/dist/cjs/index.js.map +1 -1
  8. package/dist/cjs/react-desc-prop-types.js.map +1 -1
  9. package/dist/cjs/styles.js.map +1 -1
  10. package/dist/esm/CardV3.js +2 -2
  11. package/dist/esm/CardV3.js.map +3 -3
  12. package/dist/esm/DSCardV2.js.map +1 -1
  13. package/dist/esm/config/useCardV2.js.map +1 -1
  14. package/dist/esm/config/useValidateProps.js.map +1 -1
  15. package/dist/esm/constants/index.js.map +1 -1
  16. package/dist/esm/index.js.map +1 -1
  17. package/dist/esm/react-desc-prop-types.js.map +1 -1
  18. package/dist/esm/styles.js.map +1 -1
  19. package/dist/types/CardV3.d.ts +66 -0
  20. package/package.json +17 -17
package/dist/cjs/CardV3.js CHANGED
@@ -88,10 +88,10 @@ const StyledCardError = (0, import_ds_system.styled)(StyledCard)`
88
88
  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};
89
89
  `;
90
90
  const StyledCardSingleIndicator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
91
- width: 4px;
91
+ width: ${({ isSelected }) => isSelected ? "6px" : "4px"};
92
92
  align-self: normal;
93
93
  background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.brand["700"] : theme.colors.brand["300"]};
94
- transition: background-color 0.1s ease-in-out;
94
+ transition: all 0.1s ease-in-out;
95
95
  `;
96
96
  const StyledCardDisabled = (0, import_ds_system.styled)(StyledCard)`
97
97
  cursor: not-allowed;
package/dist/cjs/CardV3.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 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: 4px;\n align-self: normal;\n background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.brand['700'] : theme.colors.brand['300'])};\n transition: background-color 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 if (isMultiSelect) {\n return (\n <Grid alignItems=\"center\">\n <PresentationalRadio checked={isSelected} aria-label=\"@todo\" />\n </Grid>\n );\n }\n return <StyledCardSingleIndicator isSelected={isSelected} />;\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\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 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 <StyledCardContainer border=\"solid 1px neutral-100\" boxShadow=\"xs\" isOverlay={isOverlay} {...globalsAttrs}>\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 );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
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 ? theme.colors.brand['700'] : theme.colors.brand['300'])};\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 if (isMultiSelect) {\n return (\n <Grid alignItems=\"center\">\n <PresentationalRadio checked={isSelected} aria-label=\"@todo\" />\n </Grid>\n );\n }\n return <StyledCardSingleIndicator isSelected={isSelected} />;\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\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 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 <StyledCardContainer border=\"solid 1px neutral-100\" boxShadow=\"xs\" isOverlay={isOverlay} {...globalsAttrs}>\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 );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/DSCardV2.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/DSCardV2.tsx", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/DSCardV2.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { type DSCardV2T, DSCardV2PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV2 } from './config/useCardV2.js';\nimport { DSCardV2Name, CARD_V2_DATA_TESTID } from './constants/index.js';\nimport DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSHeader } from '@elliemae/ds-header';\nimport {\n CardContainer,\n LeftSection,\n LeftAddon,\n MainSection,\n Description,\n RightAddonSection,\n RightAddon,\n Separator,\n} from './styles.js';\n\nconst getCol = (rightAddon: DSCardV2T.OptionalProps['rightAddon']) => {\n if (!rightAddon) return ['1fr'];\n return ['1fr', 'auto'];\n};\n\nconst DSCardV2: React.ComponentType<DSCardV2T.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps } = useCardV2(props);\n const { hasBorder, title, leftAddon, rightAddon, description } = propsWithDefault;\n return (\n <TooltipTextProvider>\n <CardContainer\n data-testid={CARD_V2_DATA_TESTID.CARD_CONTAINER} //we must keep this explicit to avoid the breaking changes\n {...globalProps}\n {...xstyledProps}\n hasBorder={hasBorder}\n cols={getCol(rightAddon)}\n >\n <LeftSection>\n {leftAddon && <LeftAddon>{leftAddon}</LeftAddon>}\n <MainSection\n style={{\n maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%',\n }}\n >\n <DSHeader\n data-testid={CARD_V2_DATA_TESTID.CARD_HEADER} //we must keep this explicit to avoid the breaking changes\n fontSize=\"16px\"\n fontWeight=\"regular\"\n color=\"neutral.800\"\n text={<DSTruncatedTooltipText value={title} />}\n />\n {description && (\n <Description>\n <DSTruncatedTooltipText value={description} />\n </Description>\n )}\n </MainSection>\n </LeftSection>\n {Array.isArray(rightAddon) && (\n <RightAddonSection>\n {rightAddon[0] ? <RightAddon>{rightAddon[0]}</RightAddon> : null}\n {rightAddon[1] ? (\n <>\n {rightAddon.length > 1 && <Separator />}\n <RightAddon>{rightAddon[1]}</RightAddon>\n </>\n ) : null}\n </RightAddonSection>\n )}\n </CardContainer>\n </TooltipTextProvider>\n );\n};\n\nDSCardV2.propTypes = DSCardV2PropTypesSchema;\nDSCardV2.displayName = DSCardV2Name;\nconst DSCardV2WithSchema = describe(DSCardV2);\nDSCardV2WithSchema.propTypes = DSCardV2PropTypesSchema;\n\nexport { DSCardV2, DSCardV2WithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCC;AAnCxB,0BAAyB;AACzB,mCAAwD;AACxD,uBAA0B;AAC1B,uBAAkD;AAClD,uCAA4D;AAC5D,uBAAyB;AACzB,oBASO;AAEP,MAAM,SAAS,CAAC,eAAsD;AACpE,MAAI,CAAC;AAAY,WAAO,CAAC,KAAK;AAC9B,SAAO,CAAC,OAAO,MAAM;AACvB;AAEA,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,aAAa,aAAa,QAAI,4BAAU,KAAK;AACvE,QAAM,EAAE,WAAW,OAAO,WAAW,YAAY,YAAY,IAAI;AACjE,SACE,4CAAC,wDACC;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,qCAAoB;AAAA,MAChC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,MAAM,OAAO,UAAU;AAAA,MAEvB;AAAA,qDAAC,6BACE;AAAA,uBAAa,4CAAC,2BAAW,qBAAU;AAAA,UACpC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU,YAAY,sBAAsB;AAAA,cAC9C;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAa,qCAAoB;AAAA,oBACjC,UAAS;AAAA,oBACT,YAAW;AAAA,oBACX,OAAM;AAAA,oBACN,MAAM,4CAAC,iCAAAA,SAAA,EAAuB,OAAO,OAAO;AAAA;AAAA,gBAC9C;AAAA,gBACC,eACC,4CAAC,6BACC,sDAAC,iCAAAA,SAAA,EAAuB,OAAO,aAAa,GAC9C;AAAA;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA,QACC,MAAM,QAAQ,UAAU,KACvB,6CAAC,mCACE;AAAA,qBAAW,CAAC,IAAI,4CAAC,4BAAY,qBAAW,CAAC,GAAE,IAAgB;AAAA,UAC3D,WAAW,CAAC,IACX,4EACG;AAAA,uBAAW,SAAS,KAAK,4CAAC,2BAAU;AAAA,YACrC,4CAAC,4BAAY,qBAAW,CAAC,GAAE;AAAA,aAC7B,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,8BAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
6
6
  "names": ["DSTruncatedTooltipText"]
package/dist/cjs/config/useCardV2.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/config/useCardV2.ts", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/config/useCardV2.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSCardV2T, DSCardV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardV2CTX {\n propsWithDefault: DSCardV2T.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useCardV2 = (propsFromUser: DSCardV2T.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSCardV2T.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSCardV2PropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = omit(useGetGlobalAttributes<DSCardV2T.InternalProps>(propsWithDefault), ['cols', 'rows', 'wrap']);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const { id } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n // ...eventHandlers,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n // eventHandlers,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAqB;AACrB,0BAAyF;AACzF,iBAAoB;AACpB,mCAAgE;AAChE,8BAAiC;AAS1B,MAAM,YAAY,CAAC,kBAAmC;AAI3D,QAAM,uBAAmB,kDAAsD,eAAe,yCAAY;AAC1G,gDAAiB,kBAAkB,8CAAiB;AAIpD,QAAM,kBAAc,wBAAK,4CAAgD,gBAAgB,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AACpH,QAAM,mBAAe,wCAAmB,gBAAgB;AAKxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
6
6
  "names": ["React"]
package/dist/cjs/config/useValidateProps.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/config/useValidateProps.ts", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/config/useValidateProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport { type DSCardV2T } from '../react-desc-prop-types.js';\nimport { DSCardV2Name } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSCardV2T.InternalProps, propTypes: WeakValidationMap<unknown>): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSCardV2Name);\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA+C;AAG/C,uBAA6B;AAEtB,MAAM,mBAAmB,CAAC,OAAgC,cAAgD;AAE/G,0DAA+B,OAAO,WAAW,6BAAY;AAC/D;",
6
6
  "names": []
package/dist/cjs/constants/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/constants/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardV2Name = 'DSCardV2';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_SLOTS = {\n CARD_CONTAINER: 'container',\n LEFT_SECTION: 'left-section',\n LEFT_ADDON: 'left-addon',\n RIGHT_ADDON: 'right-addon',\n RIGHT_ADDON_SECTION: 'right-addon-section',\n SEPARATOR: 'separator',\n MAIN_SECTION: 'main-section',\n TITLE: 'title',\n DESCRIPTION: 'description',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSCardV2Name, CARD_V2_SLOTS),\n CARD_CONTAINER: 'em-ds-card',\n CARD_HEADER: 'em-ds-card-header',\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AACf;AAGO,MAAM,sBAAsB;AAAA,EACjC,OAAG,0CAAwB,cAAc,aAAa;AAAA,EACtD,gBAAgB;AAAA,EAChB,aAAa;AACf;",
6
6
  "names": []
package/dist/cjs/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport {\n DSCardV2,\n DSCardV2 as CustomCard,\n DSCardV2WithSchema,\n DSCardV2WithSchema as DSCardCustomWithSchema,\n} from './DSCardV2.js';\nexport { type DSCardV2T } from './react-desc-prop-types.js';\nexport { CARD_V2_DATA_TESTID } from './constants/index.js';\nexport * from './CardV3.js';\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,sBAKO;AACP,mCAA+B;AAC/B,uBAAoC;AACpC,wBAAc,wBAXd;",
6
6
  "names": []
package/dist/cjs/react-desc-prop-types.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSCardV2T {\n export interface RequiredProps {\n title: string;\n }\n\n export interface DefaultProps {\n hasBorder?: boolean;\n }\n\n export interface OptionalProps {\n description: string;\n leftAddon: JSX.Element;\n rightAddon: JSX.Element | JSX.Element[];\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSCardV2T.DefaultProps = {\n hasBorder: false,\n};\n\nexport const DSCardV2PropTypes: DSPropTypesSchema<DSCardV2T.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n /**\n * Title of the card. requiered\n */\n title: PropTypes.string.isRequired.description('Title of the card. requiered'),\n /**\n * Description of the card. not requiered\n */\n description: PropTypes.string.description('Description of the card. not requiered'),\n /**\n * Left Addon\n */\n leftAddon: PropTypes.element.description('Left Addon'),\n /**\n * Right addon array, max elements: 2\n */\n rightAddon: PropTypes.array.description('Right addon array, max elements: 2'),\n /**\n * Wheter if the card has border or not\n */\n hasBorder: PropTypes.bool.description('Wheter if the card has border or not').defaultValue(false),\n};\n\nexport const DSCardV2PropTypesSchema = DSCardV2PropTypes as unknown as WeakValidationMap<DSCardV2T.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,0BAAuE;AAsChE,MAAM,eAAuC;AAAA,EAClD,WAAW;AACb;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,OAAO,8BAAU,OAAO,WAAW,YAAY,8BAA8B;AAAA;AAAA;AAAA;AAAA,EAI7E,aAAa,8BAAU,OAAO,YAAY,wCAAwC;AAAA;AAAA;AAAA;AAAA,EAIlF,WAAW,8BAAU,QAAQ,YAAY,YAAY;AAAA;AAAA;AAAA;AAAA,EAIrD,YAAY,8BAAU,MAAM,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAI5E,WAAW,8BAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAClG;AAEO,MAAM,0BAA0B;",
6
6
  "names": []
package/dist/cjs/styles.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
3
+ "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV2Name, CARD_V2_SLOTS } from './constants/index.js';\n\nconst CardContainer = styled(Grid, { name: DSCardV2Name, slot: CARD_V2_SLOTS.CARD_CONTAINER })<{ hasBorder?: boolean }>`\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 56px;\n padding: 8px 16px;\n position: relative;\n border: ${({ theme, hasBorder }) => (hasBorder ? `1px solid ${theme.colors.neutral['100']}` : '')};\n &:before {\n content: '';\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['100']};\n position: absolute;\n margin: 0 auto;\n width: 90%;\n bottom: 0;\n }\n &:last-child::before {\n content: none;\n }\n ${xStyledCommonProps}\n`;\n\nconst LeftSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_SECTION })`\n display: flex;\n align-items: center;\n`;\n\nconst LeftAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_ADDON })`\n height: fit-content;\n width: fit-content;\n margin-right: 16px;\n cursor: pointer;\n`;\n\nconst RightAddonSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON_SECTION })`\n display: flex;\n align-items: center;\n width: fit-content;\n`;\n\nconst RightAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON })`\n height: fit-content;\n width: fit-content;\n cursor: pointer;\n`;\n\nconst Separator = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.SEPARATOR })`\n width: 0px;\n height: 24px;\n border-right: 1px solid ${(props) => props.theme.colors.neutral['300']};\n margin: 0 8px;\n`;\n\nconst MainSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.MAIN_SECTION })`\n display: flex;\n flex-direction: column;\n`;\n\nconst Title = styled('h3', { name: DSCardV2Name, slot: CARD_V2_SLOTS.TITLE })`\n margin: 0;\n font-size: 16px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['800']};\n`;\n\nconst Description = styled('p', { name: DSCardV2Name, slot: CARD_V2_SLOTS.DESCRIPTION })`\n margin: 0;\n color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nexport {\n CardContainer,\n LeftSection,\n LeftAddon,\n RightAddonSection,\n RightAddon,\n Separator,\n MainSection,\n Title,\n Description,\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,qBAAqB;AACrB,uBAA4C;AAE5C,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+BAAc,MAAM,+BAAc,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOjF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,aAAa,MAAM,OAAO,QAAQ,KAAK,MAAM;AAAA;AAAA;AAAA,+BAGjE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAStE;AAAA;AAGJ,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtF,MAAM,wBAAoB,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvG,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxF,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,UAAU,CAAC;AAAA;AAAA;AAAA,4BAGzD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIvE,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+BAAc,MAAM,+BAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,YAAQ,yBAAO,MAAM,EAAE,MAAM,+BAAc,MAAM,+BAAc,MAAM,CAAC;AAAA;AAAA;AAAA,iBAG3D,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAGtD,MAAM,kBAAc,yBAAO,KAAK,EAAE,MAAM,+BAAc,MAAM,+BAAc,YAAY,CAAC;AAAA;AAAA,WAE5E,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;",
6
6
  "names": []
package/dist/esm/CardV3.js CHANGED
@@ -42,10 +42,10 @@ const StyledCardError = styled(StyledCard)`
42
42
  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};
43
43
  `;
44
44
  const StyledCardSingleIndicator = styled(Grid)`
45
- width: 4px;
45
+ width: ${({ isSelected }) => isSelected ? "6px" : "4px"};
46
46
  align-self: normal;
47
47
  background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.brand["700"] : theme.colors.brand["300"]};
48
- transition: background-color 0.1s ease-in-out;
48
+ transition: all 0.1s ease-in-out;
49
49
  `;
50
50
  const StyledCardDisabled = styled(StyledCard)`
51
51
  cursor: not-allowed;
package/dist/esm/CardV3.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 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: 4px;\n align-self: normal;\n background-color: ${({ theme, isSelected }) => (isSelected ? theme.colors.brand['700'] : theme.colors.brand['300'])};\n transition: background-color 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 if (isMultiSelect) {\n return (\n <Grid alignItems=\"center\">\n <PresentationalRadio checked={isSelected} aria-label=\"@todo\" />\n </Grid>\n );\n }\n return <StyledCardSingleIndicator isSelected={isSelected} />;\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\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 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 <StyledCardContainer border=\"solid 1px neutral-100\" boxShadow=\"xs\" isOverlay={isOverlay} {...globalsAttrs}>\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 );\n};\n"],
5
- "mappings": "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",
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 ? theme.colors.brand['700'] : theme.colors.brand['300'])};\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 if (isMultiSelect) {\n return (\n <Grid alignItems=\"center\">\n <PresentationalRadio checked={isSelected} aria-label=\"@todo\" />\n </Grid>\n );\n }\n return <StyledCardSingleIndicator isSelected={isSelected} />;\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\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 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 <StyledCardContainer border=\"solid 1px neutral-100\" boxShadow=\"xs\" isOverlay={isOverlay} {...globalsAttrs}>\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 );\n};\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/DSCardV2.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSCardV2.tsx"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSCardV2.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { type DSCardV2T, DSCardV2PropTypesSchema } from './react-desc-prop-types.js';\nimport { useCardV2 } from './config/useCardV2.js';\nimport { DSCardV2Name, CARD_V2_DATA_TESTID } from './constants/index.js';\nimport DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { DSHeader } from '@elliemae/ds-header';\nimport {\n CardContainer,\n LeftSection,\n LeftAddon,\n MainSection,\n Description,\n RightAddonSection,\n RightAddon,\n Separator,\n} from './styles.js';\n\nconst getCol = (rightAddon: DSCardV2T.OptionalProps['rightAddon']) => {\n if (!rightAddon) return ['1fr'];\n return ['1fr', 'auto'];\n};\n\nconst DSCardV2: React.ComponentType<DSCardV2T.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps } = useCardV2(props);\n const { hasBorder, title, leftAddon, rightAddon, description } = propsWithDefault;\n return (\n <TooltipTextProvider>\n <CardContainer\n data-testid={CARD_V2_DATA_TESTID.CARD_CONTAINER} //we must keep this explicit to avoid the breaking changes\n {...globalProps}\n {...xstyledProps}\n hasBorder={hasBorder}\n cols={getCol(rightAddon)}\n >\n <LeftSection>\n {leftAddon && <LeftAddon>{leftAddon}</LeftAddon>}\n <MainSection\n style={{\n maxWidth: leftAddon ? 'calc(100% - 40px)' : '100%',\n }}\n >\n <DSHeader\n data-testid={CARD_V2_DATA_TESTID.CARD_HEADER} //we must keep this explicit to avoid the breaking changes\n fontSize=\"16px\"\n fontWeight=\"regular\"\n color=\"neutral.800\"\n text={<DSTruncatedTooltipText value={title} />}\n />\n {description && (\n <Description>\n <DSTruncatedTooltipText value={description} />\n </Description>\n )}\n </MainSection>\n </LeftSection>\n {Array.isArray(rightAddon) && (\n <RightAddonSection>\n {rightAddon[0] ? <RightAddon>{rightAddon[0]}</RightAddon> : null}\n {rightAddon[1] ? (\n <>\n {rightAddon.length > 1 && <Separator />}\n <RightAddon>{rightAddon[1]}</RightAddon>\n </>\n ) : null}\n </RightAddonSection>\n )}\n </CardContainer>\n </TooltipTextProvider>\n );\n};\n\nDSCardV2.propTypes = DSCardV2PropTypesSchema;\nDSCardV2.displayName = DSCardV2Name;\nconst DSCardV2WithSchema = describe(DSCardV2);\nDSCardV2WithSchema.propTypes = DSCardV2PropTypesSchema;\n\nexport { DSCardV2, DSCardV2WithSchema };\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACoCC,SAwBV,UAxBU,KACd,YADc;AAnCxB,SAAS,gBAAgB;AACzB,SAAyB,+BAA+B;AACxD,SAAS,iBAAiB;AAC1B,SAAS,cAAc,2BAA2B;AAClD,OAAO,0BAA0B,2BAA2B;AAC5D,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,SAAS,CAAC,eAAsD;AACpE,MAAI,CAAC;AAAY,WAAO,CAAC,KAAK;AAC9B,SAAO,CAAC,OAAO,MAAM;AACvB;AAEA,MAAM,WAAiD,CAAC,UAAU;AAChE,QAAM,EAAE,kBAAkB,aAAa,aAAa,IAAI,UAAU,KAAK;AACvE,QAAM,EAAE,WAAW,OAAO,WAAW,YAAY,YAAY,IAAI;AACjE,SACE,oBAAC,uBACC;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,oBAAoB;AAAA,MAChC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,MAAM,OAAO,UAAU;AAAA,MAEvB;AAAA,6BAAC,eACE;AAAA,uBAAa,oBAAC,aAAW,qBAAU;AAAA,UACpC;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU,YAAY,sBAAsB;AAAA,cAC9C;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAa,oBAAoB;AAAA,oBACjC,UAAS;AAAA,oBACT,YAAW;AAAA,oBACX,OAAM;AAAA,oBACN,MAAM,oBAAC,0BAAuB,OAAO,OAAO;AAAA;AAAA,gBAC9C;AAAA,gBACC,eACC,oBAAC,eACC,8BAAC,0BAAuB,OAAO,aAAa,GAC9C;AAAA;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA,QACC,MAAM,QAAQ,UAAU,KACvB,qBAAC,qBACE;AAAA,qBAAW,CAAC,IAAI,oBAAC,cAAY,qBAAW,CAAC,GAAE,IAAgB;AAAA,UAC3D,WAAW,CAAC,IACX,iCACG;AAAA,uBAAW,SAAS,KAAK,oBAAC,aAAU;AAAA,YACrC,oBAAC,cAAY,qBAAW,CAAC,GAAE;AAAA,aAC7B,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
6
6
  "names": []
package/dist/esm/config/useCardV2.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCardV2.ts"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCardV2.ts"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSCardV2T, DSCardV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardV2CTX {\n propsWithDefault: DSCardV2T.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useCardV2 = (propsFromUser: DSCardV2T.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSCardV2T.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSCardV2PropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = omit(useGetGlobalAttributes<DSCardV2T.InternalProps>(propsWithDefault), ['cols', 'rows', 'wrap']);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n const { id } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n // ...eventHandlers,\n }),\n [\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n // eventHandlers,\n ],\n );\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAAyB,mBAAmB,oBAAoB;AAChE,SAAS,wBAAwB;AAS1B,MAAM,YAAY,CAAC,kBAAmC;AAI3D,QAAM,mBAAmB,6BAAsD,eAAe,YAAY;AAC1G,mBAAiB,kBAAkB,iBAAiB;AAIpD,QAAM,cAAc,KAAK,uBAAgD,gBAAgB,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AACpH,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
6
6
  "names": ["React"]
package/dist/esm/config/useValidateProps.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport { type DSCardV2T } from '../react-desc-prop-types.js';\nimport { DSCardV2Name } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSCardV2T.InternalProps, propTypes: WeakValidationMap<unknown>): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSCardV2Name);\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,oBAAoB;AAEtB,MAAM,mBAAmB,CAAC,OAAgC,cAAgD;AAE/G,iCAA+B,OAAO,WAAW,YAAY;AAC/D;",
6
6
  "names": []
package/dist/esm/constants/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardV2Name = 'DSCardV2';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_SLOTS = {\n CARD_CONTAINER: 'container',\n LEFT_SECTION: 'left-section',\n LEFT_ADDON: 'left-addon',\n RIGHT_ADDON: 'right-addon',\n RIGHT_ADDON_SECTION: 'right-addon-section',\n SEPARATOR: 'separator',\n MAIN_SECTION: 'main-section',\n TITLE: 'title',\n DESCRIPTION: 'description',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CARD_V2_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSCardV2Name, CARD_V2_SLOTS),\n CARD_CONTAINER: 'em-ds-card',\n CARD_HEADER: 'em-ds-card-header',\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,eAAe;AAGrB,MAAM,gBAAgB;AAAA,EAC3B,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AACf;AAGO,MAAM,sBAAsB;AAAA,EACjC,GAAG,wBAAwB,cAAc,aAAa;AAAA,EACtD,gBAAgB;AAAA,EAChB,aAAa;AACf;",
6
6
  "names": []
package/dist/esm/index.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport {\n DSCardV2,\n DSCardV2 as CustomCard,\n DSCardV2WithSchema,\n DSCardV2WithSchema as DSCardCustomWithSchema,\n} from './DSCardV2.js';\nexport { type DSCardV2T } from './react-desc-prop-types.js';\nexport { CARD_V2_DATA_TESTID } from './constants/index.js';\nexport * from './CardV3.js';\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACY,YAAZA;AAAA,EACA;AAAA,EACsB,sBAAtBC;AAAA,OACK;AACP,eAA+B;AAC/B,SAAS,2BAA2B;AACpC,cAAc;",
6
6
  "names": ["DSCardV2", "DSCardV2WithSchema"]
package/dist/esm/react-desc-prop-types.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-utilities';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSCardV2T {\n export interface RequiredProps {\n title: string;\n }\n\n export interface DefaultProps {\n hasBorder?: boolean;\n }\n\n export interface OptionalProps {\n description: string;\n leftAddon: JSX.Element;\n rightAddon: JSX.Element | JSX.Element[];\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLButtonElement>,\n keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSCardV2T.DefaultProps = {\n hasBorder: false,\n};\n\nexport const DSCardV2PropTypes: DSPropTypesSchema<DSCardV2T.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n /**\n * Title of the card. requiered\n */\n title: PropTypes.string.isRequired.description('Title of the card. requiered'),\n /**\n * Description of the card. not requiered\n */\n description: PropTypes.string.description('Description of the card. not requiered'),\n /**\n * Left Addon\n */\n leftAddon: PropTypes.element.description('Left Addon'),\n /**\n * Right addon array, max elements: 2\n */\n rightAddon: PropTypes.array.description('Right addon array, max elements: 2'),\n /**\n * Wheter if the card has border or not\n */\n hasBorder: PropTypes.bool.description('Wheter if the card has border or not').defaultValue(false),\n};\n\nexport const DSCardV2PropTypesSchema = DSCardV2PropTypes as unknown as WeakValidationMap<DSCardV2T.Props>;\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AAsChE,MAAM,eAAuC;AAAA,EAClD,WAAW;AACb;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,OAAO,UAAU,OAAO,WAAW,YAAY,8BAA8B;AAAA;AAAA;AAAA;AAAA,EAI7E,aAAa,UAAU,OAAO,YAAY,wCAAwC;AAAA;AAAA;AAAA;AAAA,EAIlF,WAAW,UAAU,QAAQ,YAAY,YAAY;AAAA;AAAA;AAAA;AAAA,EAIrD,YAAY,UAAU,MAAM,YAAY,oCAAoC;AAAA;AAAA;AAAA;AAAA,EAI5E,WAAW,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAClG;AAEO,MAAM,0BAA0B;",
6
6
  "names": []
package/dist/esm/styles.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV2Name, CARD_V2_SLOTS } from './constants/index.js';\n\nconst CardContainer = styled(Grid, { name: DSCardV2Name, slot: CARD_V2_SLOTS.CARD_CONTAINER })<{ hasBorder?: boolean }>`\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 56px;\n padding: 8px 16px;\n position: relative;\n border: ${({ theme, hasBorder }) => (hasBorder ? `1px solid ${theme.colors.neutral['100']}` : '')};\n &:before {\n content: '';\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['100']};\n position: absolute;\n margin: 0 auto;\n width: 90%;\n bottom: 0;\n }\n &:last-child::before {\n content: none;\n }\n ${xStyledCommonProps}\n`;\n\nconst LeftSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_SECTION })`\n display: flex;\n align-items: center;\n`;\n\nconst LeftAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.LEFT_ADDON })`\n height: fit-content;\n width: fit-content;\n margin-right: 16px;\n cursor: pointer;\n`;\n\nconst RightAddonSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON_SECTION })`\n display: flex;\n align-items: center;\n width: fit-content;\n`;\n\nconst RightAddon = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.RIGHT_ADDON })`\n height: fit-content;\n width: fit-content;\n cursor: pointer;\n`;\n\nconst Separator = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.SEPARATOR })`\n width: 0px;\n height: 24px;\n border-right: 1px solid ${(props) => props.theme.colors.neutral['300']};\n margin: 0 8px;\n`;\n\nconst MainSection = styled('div', { name: DSCardV2Name, slot: CARD_V2_SLOTS.MAIN_SECTION })`\n display: flex;\n flex-direction: column;\n`;\n\nconst Title = styled('h3', { name: DSCardV2Name, slot: CARD_V2_SLOTS.TITLE })`\n margin: 0;\n font-size: 16px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['800']};\n`;\n\nconst Description = styled('p', { name: DSCardV2Name, slot: CARD_V2_SLOTS.DESCRIPTION })`\n margin: 0;\n color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nexport {\n CardContainer,\n LeftSection,\n LeftAddon,\n RightAddonSection,\n RightAddon,\n Separator,\n MainSection,\n Title,\n Description,\n};\n"],
5
5
  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAS,cAAc,qBAAqB;AAE5C,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,cAAc,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOjF,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,aAAa,MAAM,OAAO,QAAQ,KAAK,MAAM;AAAA;AAAA;AAAA,+BAGjE,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAStE;AAAA;AAGJ,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtF,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvG,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAMxF,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,UAAU,CAAC;AAAA;AAAA;AAAA,4BAGzD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIvE,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA;AAAA;AAAA;AAK1F,MAAM,QAAQ,OAAO,MAAM,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA;AAAA;AAAA,iBAG3D,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,WACzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAGtD,MAAM,cAAc,OAAO,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA;AAAA,WAE5E,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;",
6
6
  "names": []
package/dist/types/CardV3.d.ts ADDED
@@ -0,0 +1,66 @@
1
+ import React from 'react';
2
+ import { type GlobalAttributesT } from '@elliemae/ds-utilities';
3
+ export declare const DSCardV3Name = "DSCardV3";
4
+ export declare const DSCardV3Slots: {
5
+ ACTION_AREA: string;
6
+ };
7
+ export declare const DSCardV3DataTestIds: Record<string, string>;
8
+ declare namespace CardT {
9
+ interface RequiredProps {
10
+ children: React.ReactNode;
11
+ }
12
+ interface OptinalProps {
13
+ isSelected?: boolean;
14
+ isMultiSelect?: boolean;
15
+ isOverlay?: boolean;
16
+ onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
17
+ }
18
+ interface DefaultProps {
19
+ hasError: boolean;
20
+ }
21
+ interface Props extends RequiredProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>, OptinalProps, DefaultProps {
22
+ }
23
+ interface InternalProps extends RequiredProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>, OptinalProps, Partial<DefaultProps> {
24
+ }
25
+ interface CardSelectIndicatorProps {
26
+ isSelected?: boolean;
27
+ isMultiSelect?: boolean;
28
+ }
29
+ }
30
+ export declare const defaultProps: CardT.DefaultProps;
31
+ 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<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
33
+ isOverlay?: boolean | undefined;
34
+ onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
35
+ } & import("@elliemae/ds-system").OwnerInterface, never>;
36
+ export declare const StyledButtonCard: 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, {
37
+ isOverlay?: boolean | undefined;
38
+ onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
39
+ } & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, {
40
+ isOverlay?: boolean | undefined;
41
+ } & import("@elliemae/ds-system").OwnerInterface, never>;
42
+ export declare const StyledCardError: 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, {
43
+ isOverlay?: boolean | undefined;
44
+ onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
45
+ } & 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<import("@elliemae/ds-grid/dist/types/react-desc-prop-types").DSGridT.Props & React.RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
47
+ isSelected?: boolean | undefined;
48
+ } & import("@elliemae/ds-system").OwnerInterface, never>;
49
+ 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
+ isOverlay?: boolean | undefined;
51
+ onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
52
+ } & import("@elliemae/ds-system").OwnerInterface, never>, import("@elliemae/ds-system").Theme, {
53
+ [x: string]: any;
54
+ [x: number]: any;
55
+ [x: symbol]: any;
56
+ } & {
57
+ theme?: import("@elliemae/ds-system").Theme | undefined;
58
+ } & {
59
+ as?: string | React.ComponentType<any> | undefined;
60
+ forwardedAs?: string | React.ComponentType<any> | undefined;
61
+ } & import("@elliemae/ds-system").OwnerInterface, never>;
62
+ 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>;
63
+ 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>;
64
+ export declare const CardSelectIndicator: (props: CardT.CardSelectIndicatorProps) => import("react/jsx-runtime").JSX.Element;
65
+ export declare const Card: React.ComponentType<CardT.InternalProps>;
66
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-card-v2",
3
- "version": "3.22.0-next.25",
3
+ "version": "3.22.0-next.30",
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.25",
55
- "@elliemae/ds-header": "3.22.0-next.25",
56
- "@elliemae/ds-grid": "3.22.0-next.25",
57
- "@elliemae/ds-controlled-form": "3.22.0-next.25",
58
- "@elliemae/ds-separator": "3.22.0-next.25",
59
- "@elliemae/ds-system": "3.22.0-next.25",
60
- "@elliemae/ds-icons": "3.22.0-next.25",
61
- "@elliemae/ds-truncated-tooltip-text": "3.22.0-next.25",
62
- "@elliemae/ds-utilities": "3.22.0-next.25"
54
+ "@elliemae/ds-button": "3.22.0-next.30",
55
+ "@elliemae/ds-controlled-form": "3.22.0-next.30",
56
+ "@elliemae/ds-grid": "3.22.0-next.30",
57
+ "@elliemae/ds-header": "3.22.0-next.30",
58
+ "@elliemae/ds-separator": "3.22.0-next.30",
59
+ "@elliemae/ds-icons": "3.22.0-next.30",
60
+ "@elliemae/ds-truncated-tooltip-text": "3.22.0-next.30",
61
+ "@elliemae/ds-system": "3.22.0-next.30",
62
+ "@elliemae/ds-utilities": "3.22.0-next.30"
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.25"
67
+ "@elliemae/ds-monorepo-devops": "3.22.0-next.30"
68
68
  },
69
69
  "peerDependencies": {
70
70
  "@testing-library/jest-dom": "~5.16.4",
@@ -79,15 +79,15 @@
79
79
  "typeSafety": false
80
80
  },
81
81
  "scripts": {
82
- "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
82
+ "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
83
83
  "test": "pui-cli test --passWithNoTests",
84
- "lint": "node ../../scripts/lint.mjs --fix",
85
- "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
86
- "dts": "node ../../scripts/dts.mjs",
84
+ "lint": "node ../../../scripts/lint.mjs --fix",
85
+ "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
86
+ "dts": "node ../../../scripts/dts.mjs",
87
87
  "dts:withdeps": "pnpm --filter {.}... dts",
88
- "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
88
+ "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
89
89
  "dev:build": "pnpm --filter {.}... build",
90
90
  "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
91
- "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
91
+ "checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
92
92
  }
93
93
  }