@pega/cosmos-react-core 9.0.0-build.9.9 → 9.0.0

package/lib/components/SelectionCard/SelectionCard.js

@@ -1,45 +1,56 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState, useMemo, useLayoutEffect, useCallback, cloneElement } from 'react';
 import { getActiveElement, withTestIds, isValidElement, hasProp } from '../../utils';
 import Icon, { registerIcon } from '../Icon';
-import { useConsolidatedRef, useEscape, useFocusTrap, useFocusWithin, useI18n, usePrevious, useTestIds, useUID } from '../../hooks';
+import { useConsolidatedRef, useElement, useEscape, useFocusTrap, useFocusWithin, useI18n, usePrevious, useTestIds, useUID } from '../../hooks';
 import Grid from '../Grid';
 import Flex from '../Flex';
 import FieldValueList from '../FieldValueList';
-import Actions from '../Actions';
 import { StyledImage } from '../Image';
 import * as pictureIcon from '../Icon/icons/picture.icon';
+import ShowMoreLess from '../ShowMoreLess';
+import Tooltip from '../Tooltip';
 import { getSelectionCardTestIds } from './SelectionCard.test-ids';
-import { StyledSelectionCard, StyledContentContainer, StyledImageContainer, StyledSelectionCardInline, StyledSelectionCardStacked, StyledValueList } from './SelectionCard.styles';
+import { StyledSelectionCard, StyledContentContainer, StyledImageContainer, StyledSelectionCardInline, StyledSelectionCardStacked, StyledValueList, StyledHeader, StyledImageCell, StyledContentCell, StyledTileContent, StyledCardFooter, StyledSingleField } from './SelectionCard.styles';
+import SelectionCardActions from './SelectionCardActions';
 registerIcon(pictureIcon);
+const isTileContent = (img) => {
+    return 'foregroundColor' in img;
+};
 export const focusableSelector = 'a[href], button, input, textarea, select, details, video[controls], audio[controls]';
-const useContentHeight = (ref) => {
-    const [height, setHeight] = useState();
+const SingleField = ({ id, 'data-testid': testId, truncate, value }) => {
+    const [el, setEl] = useElement(null);
+    return (_jsxs(_Fragment, { children: [_jsx(StyledSingleField, { ref: setEl, id: id, "data-testid": testId, truncate: truncate, children: value }), truncate && el && (_jsx(Tooltip, { target: el, smart: true, children: value }))] }));
+};
+const useContentHeight = (contentRef, targetRef) => {
     useLayoutEffect(() => {
-        if (!ref.current)
+        if (!contentRef.current || !targetRef.current)
             return;
         const resizeObserver = new ResizeObserver(() => {
-            setHeight(ref.current?.scrollHeight);
+            requestAnimationFrame(() => {
+                targetRef.current?.style.setProperty('--content-height', `${contentRef.current?.scrollHeight}px`);
+            });
         });
-        resizeObserver.observe(ref.current);
+        resizeObserver.observe(contentRef.current);
         return () => {
             resizeObserver.disconnect();
         };
     }, []);
-    return height;
 };
 const SelectionCard = forwardRef(function SelectionCard(props, ref) {
     const uid = useUID();
-    const { testId, id = uid, label, heading, disabled = false, image, fields = [], onClick, onKeyDown, actions, additionalInfo, ...restProps } = props;
+    const { testId, id = uid, 'aria-label': label, heading, disabled = false, readOnly, image, footer, fields = [], onClick, onKeyDown, actions, additionalInfo, ...restProps } = props;
     const t = useI18n();
     const contentRef = useRef(null);
     const containerRef = useConsolidatedRef(ref);
     const [focusOnInput, setFocusOnInput] = useState(false);
     const [hasInteractiveElements, setHasInteractiveElements] = useState(0);
     const [isBrokenImage, setIsBrokenImage] = useState(false);
-    const prevImageSrc = usePrevious(image?.src);
+    const isTile = image !== undefined && isTileContent(image);
+    const tile = isTile ? image : undefined;
+    const resolvedImageSrc = !isTile ? image?.src : undefined;
+    const prevImageSrc = usePrevious(resolvedImageSrc);
     const testIds = useTestIds(testId, getSelectionCardTestIds);
-    const contentHeight = useContentHeight(contentRef);
     const contentId = `${id}-content`;
     const hasAdditionalContent = fields.length > 0;
     useEffect(() => {
@@ -49,7 +60,7 @@ const SelectionCard = forwardRef(function SelectionCard(props, ref) {
         focusables?.forEach(el => el.hasAttribute('data-main-focus')
             ? el.removeAttribute('tabindex')
             : el.setAttribute('tabindex', '-1'));
-    }, [additionalInfo, fields, actions, contentHeight]);
+    }, [additionalInfo, fields, actions]);
     useFocusTrap(focusOnInput ? null : contentRef, false, [contentRef]);
     useFocusWithin([focusOnInput ? null : contentRef], focused => contentRef.current
         ?.querySelectorAll(focusableSelector)
@@ -57,6 +68,7 @@ const SelectionCard = forwardRef(function SelectionCard(props, ref) {
     useEscape(() => containerRef.current?.focus(), focusOnInput ? null : containerRef, [
         containerRef
     ]);
+    useContentHeight(contentRef, containerRef);
     const handleKeyDown = useCallback((event) => {
         if (event.key === 'Enter' &&
             containerRef.current === getActiveElement() &&
@@ -67,29 +79,38 @@ const SelectionCard = forwardRef(function SelectionCard(props, ref) {
         onKeyDown?.(event);
     }, [containerRef, contentRef]);
     const imageContent = useMemo(() => {
-        if (image) {
-            const imagery = (isBrokenImage && image.src === prevImageSrc) || image.src === undefined ? (_jsx(Icon, { name: 'picture', "aria-label": t('image_load_error') })) : (_jsx(StyledImage, { "data-testid": testIds.image, ...image, onError: () => setIsBrokenImage(true), onLoad: () => setIsBrokenImage(false) }));
-            return (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledImageContainer, placement: image.placement, size: image.size, children: imagery }));
-        }
-    }, [isBrokenImage, image?.src, prevImageSrc, image?.placement, image?.size]);
+        if (!image)
+            return undefined;
+        const innerContent = tile ? (_jsx(StyledTileContent, { "data-tile-content": true, foregroundColor: tile.foregroundColor, backgroundColor: tile.backgroundColor, size: tile.size, children: tile.icon ? _jsx(Icon, { name: tile.icon }) : tile.text || _jsx(Icon, { name: 'picture' }) })) : (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledImageContainer, placement: image.placement, size: image.size, children: (isBrokenImage && resolvedImageSrc === prevImageSrc) || resolvedImageSrc === undefined ? (_jsx(Icon, { name: 'picture', "aria-label": t('image_load_error') })) : (_jsx(StyledImage, { "data-testid": testIds.image, ...image, onError: () => setIsBrokenImage(true), onLoad: () => setIsBrokenImage(false) })) }));
+        return (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledImageCell, placement: image.placement, size: image.size, isTile: isTile, style: !isTile && image.src && !isBrokenImage ? { '--bg-image': `url(${image.src})` } : undefined, children: innerContent }));
+    }, [
+        isBrokenImage,
+        prevImageSrc,
+        image?.placement,
+        image?.size,
+        tile?.icon,
+        tile?.text,
+        tile?.foregroundColor,
+        tile?.backgroundColor
+    ]);
     let asProp = StyledSelectionCard;
     if (image) {
-        asProp = image.placement?.startsWith('block')
+        asProp = (image.placement ?? 'inline-start').startsWith('block')
             ? StyledSelectionCardStacked
             : StyledSelectionCardInline;
     }
     const isFieldValueListItemProps = (item) => {
         return hasProp(item, 'name');
     };
-    return (_jsxs(Grid, { "data-testid": testIds.root, ...restProps, id: id, onClick: onClick, as: asProp, placement: image?.placement, size: image?.size, container: { cols: '1fr', rows: 'auto' }, disabled: disabled, role: hasInteractiveElements ? 'group' : 'article', "aria-label": label, ref: containerRef, "data-main-focus": focusOnInput ? undefined : true, tabIndex: focusOnInput ? undefined : 0, onKeyDown: handleKeyDown, style: { '--content-height': `${contentHeight}px` }, children: [image && image.placement !== 'inline-end' && imageContent, _jsx("div", { children: _jsxs(Flex, { as: StyledContentContainer, container: { wrap: 'wrap', alignContent: 'start', justify: 'between' }, ref: contentRef, children: [isValidElement(heading) ? (cloneElement(heading, {
-                            ...{
-                                tabIndex: focusOnInput ? undefined : -1,
-                                additionalInfo,
-                                'data-main-focus': focusOnInput ? true : undefined,
-                                'aria-details': hasAdditionalContent ? contentId : undefined
-                            }
-                        })) : (_jsx("span", { "aria-details": hasAdditionalContent ? contentId : undefined, children: heading })), actions && (_jsx(Actions, { "data-testid": testIds.actions, items: actions, menuAt: 1, disabled: disabled, contextualLabel: label })), hasAdditionalContent &&
-                            (fields.every(field => isFieldValueListItemProps(field)) ? (_jsx(FieldValueList, { id: contentId, "data-testid": testIds.content, fields: fields })) : (_jsx(Flex, { container: { direction: 'column', gap: 1 }, as: StyledValueList, id: contentId, "data-testid": testIds.content, children: fields.map(field => (_jsx("li", { children: field.value }, field.id))) })))] }) }), image?.placement === 'inline-end' && imageContent] }));
+    return (_jsxs(Grid, { "data-testid": testIds.root, ...restProps, id: id, onClick: onClick, as: asProp, placement: image?.placement, size: image?.size, container: { cols: '1fr', rows: 'auto' }, disabled: disabled, readOnly: readOnly, role: hasInteractiveElements ? 'group' : 'article', "aria-label": label, ref: containerRef, "data-main-focus": focusOnInput ? undefined : true, tabIndex: focusOnInput ? undefined : 0, onKeyDown: handleKeyDown, children: [image && image.placement !== 'inline-end' && imageContent, _jsxs(StyledContentCell, { children: [_jsxs(Flex, { as: StyledContentContainer, container: { direction: 'column', gap: 0.75 }, ref: contentRef, children: [_jsxs(Flex, { as: StyledHeader, container: { alignItems: 'center', justify: 'between' }, children: [isValidElement(heading) ? (cloneElement(heading, {
+                                        ...{
+                                            tabIndex: focusOnInput ? undefined : -1,
+                                            additionalInfo,
+                                            'data-main-focus': focusOnInput ? true : undefined,
+                                            'aria-details': hasAdditionalContent ? contentId : undefined
+                                        }
+                                    })) : (_jsx("span", { "data-testid": testIds.label, "aria-details": hasAdditionalContent ? contentId : undefined, children: heading })), actions && (_jsx(SelectionCardActions, { "data-testid": testIds.actions, actions: actions, disabled: disabled, contextualLabel: label }))] }), hasAdditionalContent &&
+                                (fields.every(field => isFieldValueListItemProps(field)) ? (_jsx(FieldValueList, { id: contentId, "data-testid": testIds.content, fields: fields })) : (_jsx(_Fragment, { children: fields.length === 1 ? (_jsx(SingleField, { id: contentId, "data-testid": testIds.content, truncate: fields[0].truncate, value: fields[0].value })) : (_jsx(Flex, { container: { direction: 'column', gap: 1 }, as: StyledValueList, id: contentId, "data-testid": testIds.content, children: fields.map(field => (_jsx("li", { children: field.truncate ? (_jsx(ShowMoreLess, { lines: 3, children: field.value })) : (field.value) }, field.id))) })) })))] }), footer && _jsx(StyledCardFooter, { children: footer })] }), image?.placement === 'inline-end' && imageContent] }));
 });
 export default withTestIds(SelectionCard, getSelectionCardTestIds);
 //# sourceMappingURL=SelectionCard.js.map

package/lib/components/SelectionCard/SelectionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,eAAe,EACf,WAAW,EACX,YAAY,EACb,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACrF,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,YAAY,EACZ,cAAc,EACd,OAAO,EACP,WAAW,EACX,UAAU,EACV,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,WAAW,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,yBAAyB,EACzB,0BAA0B,EAC1B,eAAe,EAChB,MAAM,wBAAwB,CAAC;AAGhC,YAAY,CAAC,WAAW,CAAC,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAC5B,qFAAqF,CAAC;AAExF,MAAM,gBAAgB,GAAG,CAAC,GAA2B,EAAE,EAAE;IACvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAE3D,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QAEzB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAEpC,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,UAAU,CAG9B,SAAS,aAAa,CAAC,KAAK,EAAE,GAAG;IACjC,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,EAAE,GAAG,GAAG,EACR,KAAK,EACL,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,MAAM,GAAG,EAAE,EACX,OAAO,EACP,SAAS,EACT,OAAO,EACP,cAAc,EACd,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,GAAG,EAAE,UAAU,CAAC;IAElC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;QAC7E,yBAAyB,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC;QACnD,eAAe,CAAC,UAAU,EAAE,MAAM,KAAK,CAAC,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,YAAY,gBAAgB,CAAC,CAAC;QACzF,UAAU,EAAE,OAAO,CAAC,EAAE,CAAC,EAAE,CACvB,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC;YAChC,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC;YAChC,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CACtC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAErD,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEpE,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,EAAE,CAC3D,UAAU,CAAC,OAAO;QAChB,EAAE,gBAAgB,CAAC,iBAAiB,CAAC;SACpC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CACjG,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE;QACjF,YAAY;KACb,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAoB,EAAE,EAAE;QACvB,IACE,KAAK,CAAC,GAAG,KAAK,OAAO;YACrB,YAAY,CAAC,OAAO,KAAK,gBAAgB,EAAE;YAC3C,CAAC,CAAC,YAAY,IAAI,CAAC,YAAY,IAAI,sBAAsB,GAAG,CAAC,CAAC,CAAC,EAC/D,CAAC;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,UAAU,CAAC,OAAO,EAAE,gBAAgB,CAAc,iBAAiB,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;QACnF,CAAC;QACD,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,YAAY,EAAE,UAAU,CAAC,CAC3B,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,OAAO,GACX,CAAC,aAAa,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,CACzE,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,gBAAa,CAAC,CAAC,kBAAkB,CAAC,GAAI,CAC3D,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,mBACG,OAAO,CAAC,KAAK,KACtB,KAAK,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EACrC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,GACrC,CACH,CAAC;YACJ,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,oBAAoB,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAE,KAAK,CAAC,IAAI,YAEf,OAAO,GACH,CACR,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAE7E,IAAI,MAAM,GAAoB,mBAAmB,CAAC;IAClD,IAAI,KAAK,EAAE,CAAC;QACV,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC;YAC3C,CAAC,CAAC,0BAA0B;YAC5B,CAAC,CAAC,yBAAyB,CAAC;IAChC,CAAC;IAED,MAAM,yBAAyB,GAAG,CAChC,IAA2D,EAC1B,EAAE;QACnC,OAAO,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,KAAK,EAAE,SAAS,EAC3B,IAAI,EAAE,KAAK,EAAE,IAAI,EACjB,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EACxC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,gBACtC,KAAK,EACjB,GAAG,EAAE,YAAY,qBACA,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAChD,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EACtC,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,EAAE,kBAAkB,EAAE,GAAG,aAAa,IAAI,EAAE,aAElD,KAAK,IAAI,KAAK,CAAC,SAAS,KAAK,YAAY,IAAI,YAAY,EAC1D,wBACE,MAAC,IAAI,IACH,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,EACtE,GAAG,EAAE,UAAU,aAEd,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CACzB,YAAY,CAAC,OAAO,EAAE;4BACpB,GAAG;gCACD,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;gCACvC,cAAc;gCACd,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;gCAClD,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;6BAC7D;yBACF,CAAC,CACH,CAAC,CAAC,CAAC,CACF,+BAAoB,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,YAAG,OAAO,GAAQ,CACnF,EACA,OAAO,IAAI,CACV,KAAC,OAAO,mBACO,OAAO,CAAC,OAAO,EAC5B,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,CAAC,EACT,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,KAAK,GACtB,CACH,EACA,oBAAoB;4BACnB,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CACzD,KAAC,cAAc,IAAC,EAAE,EAAE,SAAS,iBAAe,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,GAAI,CAChF,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAC1C,EAAE,EAAE,eAAe,EACnB,EAAE,EAAE,SAAS,iBACA,OAAO,CAAC,OAAO,YAE3B,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACnB,uBAAoB,KAAK,CAAC,KAAK,IAAtB,KAAK,CAAC,EAAE,CAAoB,CACtC,CAAC,GACG,CACR,CAAC,IACC,GACH,EACL,KAAK,EAAE,SAAS,KAAK,YAAY,IAAI,YAAY,IAC7C,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,aAAa,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useMemo,\n  useLayoutEffect,\n  useCallback,\n  cloneElement\n} from 'react';\nimport type { KeyboardEvent, PropsWithoutRef, RefObject } from 'react';\n\nimport { getActiveElement, withTestIds, isValidElement, hasProp } from '../../utils';\nimport Icon, { registerIcon } from '../Icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useFocusWithin,\n  useI18n,\n  usePrevious,\n  useTestIds,\n  useUID\n} from '../../hooks';\nimport Grid from '../Grid';\nimport type { GridProps } from '../Grid';\nimport Flex from '../Flex';\nimport FieldValueList from '../FieldValueList';\nimport type { FieldValueListItemProps } from '../FieldValueList';\nimport Actions from '../Actions';\nimport { StyledImage } from '../Image';\nimport * as pictureIcon from '../Icon/icons/picture.icon';\n\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport {\n  StyledSelectionCard,\n  StyledContentContainer,\n  StyledImageContainer,\n  StyledSelectionCardInline,\n  StyledSelectionCardStacked,\n  StyledValueList\n} from './SelectionCard.styles';\nimport type { FieldValueItemPropsOmitName, SelectionCardProps } from './SelectionCard.types';\n\nregisterIcon(pictureIcon);\n\nexport const focusableSelector =\n  'a[href], button, input, textarea, select, details, video[controls], audio[controls]';\n\nconst useContentHeight = (ref: RefObject<HTMLElement>) => {\n  const [height, setHeight] = useState<number | undefined>();\n\n  useLayoutEffect(() => {\n    if (!ref.current) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      setHeight(ref.current?.scrollHeight);\n    });\n\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  return height;\n};\n\nconst SelectionCard = forwardRef<\n  RefElement<SelectionCardProps>,\n  PropsWithoutRef<SelectionCardProps>\n>(function SelectionCard(props, ref) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    label,\n    heading,\n    disabled = false,\n    image,\n    fields = [],\n    onClick,\n    onKeyDown,\n    actions,\n    additionalInfo,\n    ...restProps\n  } = props;\n\n  const t = useI18n();\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const containerRef = useConsolidatedRef(ref);\n\n  const [focusOnInput, setFocusOnInput] = useState(false);\n  const [hasInteractiveElements, setHasInteractiveElements] = useState(0);\n  const [isBrokenImage, setIsBrokenImage] = useState(false);\n  const prevImageSrc = usePrevious(image?.src);\n  const testIds = useTestIds(testId, getSelectionCardTestIds);\n  const contentHeight = useContentHeight(contentRef);\n  const contentId = `${id}-content`;\n\n  const hasAdditionalContent = fields.length > 0;\n\n  useEffect(() => {\n    const focusables = containerRef.current?.querySelectorAll(focusableSelector);\n    setHasInteractiveElements(focusables?.length || 0);\n    setFocusOnInput(focusables?.length === 1 && focusables?.[0] instanceof HTMLInputElement);\n    focusables?.forEach(el =>\n      el.hasAttribute('data-main-focus')\n        ? el.removeAttribute('tabindex')\n        : el.setAttribute('tabindex', '-1')\n    );\n  }, [additionalInfo, fields, actions, contentHeight]);\n\n  useFocusTrap(focusOnInput ? null : contentRef, false, [contentRef]);\n\n  useFocusWithin([focusOnInput ? null : contentRef], focused =>\n    contentRef.current\n      ?.querySelectorAll(focusableSelector)\n      .forEach(el => (focused ? el.removeAttribute('tabindex') : el.setAttribute('tabindex', '-1')))\n  );\n\n  useEscape(() => containerRef.current?.focus(), focusOnInput ? null : containerRef, [\n    containerRef\n  ]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (\n        event.key === 'Enter' &&\n        containerRef.current === getActiveElement() &&\n        (!focusOnInput || (focusOnInput && hasInteractiveElements > 1))\n      ) {\n        event.preventDefault();\n        contentRef.current?.querySelectorAll<HTMLElement>(focusableSelector)[0]?.focus();\n      }\n      onKeyDown?.(event);\n    },\n    [containerRef, contentRef]\n  );\n\n  const imageContent = useMemo(() => {\n    if (image) {\n      const imagery =\n        (isBrokenImage && image.src === prevImageSrc) || image.src === undefined ? (\n          <Icon name='picture' aria-label={t('image_load_error')} />\n        ) : (\n          <StyledImage\n            data-testid={testIds.image}\n            {...image}\n            onError={() => setIsBrokenImage(true)}\n            onLoad={() => setIsBrokenImage(false)}\n          />\n        );\n      return (\n        <Flex\n          container={{ justify: 'center', alignItems: 'center' }}\n          as={StyledImageContainer}\n          placement={image.placement}\n          size={image.size}\n        >\n          {imagery}\n        </Flex>\n      );\n    }\n  }, [isBrokenImage, image?.src, prevImageSrc, image?.placement, image?.size]);\n\n  let asProp: GridProps['as'] = StyledSelectionCard;\n  if (image) {\n    asProp = image.placement?.startsWith('block')\n      ? StyledSelectionCardStacked\n      : StyledSelectionCardInline;\n  }\n\n  const isFieldValueListItemProps = (\n    item: FieldValueListItemProps | FieldValueItemPropsOmitName\n  ): item is FieldValueListItemProps => {\n    return hasProp(item, 'name');\n  };\n\n  return (\n    <Grid\n      data-testid={testIds.root}\n      {...restProps}\n      id={id}\n      onClick={onClick}\n      as={asProp}\n      placement={image?.placement}\n      size={image?.size}\n      container={{ cols: '1fr', rows: 'auto' }}\n      disabled={disabled}\n      role={hasInteractiveElements ? 'group' : 'article'}\n      aria-label={label}\n      ref={containerRef}\n      data-main-focus={focusOnInput ? undefined : true}\n      tabIndex={focusOnInput ? undefined : 0}\n      onKeyDown={handleKeyDown}\n      style={{ '--content-height': `${contentHeight}px` }}\n    >\n      {image && image.placement !== 'inline-end' && imageContent}\n      <div>\n        <Flex\n          as={StyledContentContainer}\n          container={{ wrap: 'wrap', alignContent: 'start', justify: 'between' }}\n          ref={contentRef}\n        >\n          {isValidElement(heading) ? (\n            cloneElement(heading, {\n              ...{\n                tabIndex: focusOnInput ? undefined : -1,\n                additionalInfo,\n                'data-main-focus': focusOnInput ? true : undefined,\n                'aria-details': hasAdditionalContent ? contentId : undefined\n              }\n            })\n          ) : (\n            <span aria-details={hasAdditionalContent ? contentId : undefined}>{heading}</span>\n          )}\n          {actions && (\n            <Actions\n              data-testid={testIds.actions}\n              items={actions}\n              menuAt={1}\n              disabled={disabled}\n              contextualLabel={label}\n            />\n          )}\n          {hasAdditionalContent &&\n            (fields.every(field => isFieldValueListItemProps(field)) ? (\n              <FieldValueList id={contentId} data-testid={testIds.content} fields={fields} />\n            ) : (\n              <Flex\n                container={{ direction: 'column', gap: 1 }}\n                as={StyledValueList}\n                id={contentId}\n                data-testid={testIds.content}\n              >\n                {fields.map(field => (\n                  <li key={field.id}>{field.value}</li>\n                ))}\n              </Flex>\n            ))}\n        </Flex>\n      </div>\n      {image?.placement === 'inline-end' && imageContent}\n    </Grid>\n  );\n});\n\nexport default withTestIds(SelectionCard, getSelectionCardTestIds);\n"]}
+{"version":3,"file":"SelectionCard.js","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useMemo,\n  useLayoutEffect,\n  useCallback,\n  cloneElement\n} from 'react';\nimport type { KeyboardEvent, PropsWithoutRef, ReactNode, RefObject } from 'react';\n\nimport { getActiveElement, withTestIds, isValidElement, hasProp } from '../../utils';\nimport Icon, { registerIcon } from '../Icon';\nimport type { RefElement } from '../../types';\nimport {\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useFocusWithin,\n  useI18n,\n  usePrevious,\n  useTestIds,\n  useUID\n} from '../../hooks';\nimport Grid from '../Grid';\nimport type { GridProps } from '../Grid';\nimport Flex from '../Flex';\nimport FieldValueList from '../FieldValueList';\nimport type { FieldValueListItemProps } from '../FieldValueList';\nimport { StyledImage } from '../Image';\nimport * as pictureIcon from '../Icon/icons/picture.icon';\nimport ShowMoreLess from '../ShowMoreLess';\nimport Tooltip from '../Tooltip';\n\nimport { getSelectionCardTestIds } from './SelectionCard.test-ids';\nimport {\n  StyledSelectionCard,\n  StyledContentContainer,\n  StyledImageContainer,\n  StyledSelectionCardInline,\n  StyledSelectionCardStacked,\n  StyledValueList,\n  StyledHeader,\n  StyledImageCell,\n  StyledContentCell,\n  StyledTileContent,\n  StyledCardFooter,\n  StyledSingleField\n} from './SelectionCard.styles';\nimport type {\n  FieldValueItemPropsOmitName,\n  ImagePlacement,\n  ImageSize,\n  SelectionCardProps,\n  SelectionCardTile\n} from './SelectionCard.types';\nimport SelectionCardActions from './SelectionCardActions';\n\nregisterIcon(pictureIcon);\n\nconst isTileContent = (\n  img: NonNullable<SelectionCardProps['image']>\n): img is SelectionCardTile & { placement?: ImagePlacement; size?: ImageSize } => {\n  return 'foregroundColor' in img;\n};\n\nexport const focusableSelector =\n  'a[href], button, input, textarea, select, details, video[controls], audio[controls]';\n\nconst SingleField = ({\n  id,\n  'data-testid': testId,\n  truncate,\n  value\n}: {\n  id: string;\n  'data-testid'?: string;\n  truncate?: boolean;\n  value: ReactNode;\n}) => {\n  const [el, setEl] = useElement<HTMLDivElement>(null);\n  return (\n    <>\n      <StyledSingleField ref={setEl} id={id} data-testid={testId} truncate={truncate}>\n        {value}\n      </StyledSingleField>\n      {truncate && el && (\n        <Tooltip target={el} smart>\n          {value}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst useContentHeight = (\n  contentRef: RefObject<HTMLElement>,\n  targetRef: RefObject<HTMLElement>\n) => {\n  useLayoutEffect(() => {\n    if (!contentRef.current || !targetRef.current) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      requestAnimationFrame(() => {\n        targetRef.current?.style.setProperty(\n          '--content-height',\n          `${contentRef.current?.scrollHeight}px`\n        );\n      });\n    });\n\n    resizeObserver.observe(contentRef.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n};\n\nconst SelectionCard = forwardRef<\n  RefElement<SelectionCardProps>,\n  PropsWithoutRef<SelectionCardProps>\n>(function SelectionCard(props, ref) {\n  const uid = useUID();\n  const {\n    testId,\n    id = uid,\n    'aria-label': label,\n    heading,\n    disabled = false,\n    readOnly,\n    image,\n    footer,\n    fields = [],\n    onClick,\n    onKeyDown,\n    actions,\n    additionalInfo,\n    ...restProps\n  } = props;\n\n  const t = useI18n();\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const containerRef = useConsolidatedRef(ref);\n\n  const [focusOnInput, setFocusOnInput] = useState(false);\n  const [hasInteractiveElements, setHasInteractiveElements] = useState(0);\n  const [isBrokenImage, setIsBrokenImage] = useState(false);\n  const isTile = image !== undefined && isTileContent(image);\n  const tile = isTile ? image : undefined;\n  const resolvedImageSrc = !isTile ? image?.src : undefined;\n  const prevImageSrc = usePrevious(resolvedImageSrc);\n  const testIds = useTestIds(testId, getSelectionCardTestIds);\n  const contentId = `${id}-content`;\n\n  const hasAdditionalContent = fields.length > 0;\n\n  useEffect(() => {\n    const focusables = containerRef.current?.querySelectorAll(focusableSelector);\n    setHasInteractiveElements(focusables?.length || 0);\n    setFocusOnInput(focusables?.length === 1 && focusables?.[0] instanceof HTMLInputElement);\n    focusables?.forEach(el =>\n      el.hasAttribute('data-main-focus')\n        ? el.removeAttribute('tabindex')\n        : el.setAttribute('tabindex', '-1')\n    );\n  }, [additionalInfo, fields, actions]);\n\n  useFocusTrap(focusOnInput ? null : contentRef, false, [contentRef]);\n\n  useFocusWithin([focusOnInput ? null : contentRef], focused =>\n    contentRef.current\n      ?.querySelectorAll(focusableSelector)\n      .forEach(el => (focused ? el.removeAttribute('tabindex') : el.setAttribute('tabindex', '-1')))\n  );\n\n  useEscape(() => containerRef.current?.focus(), focusOnInput ? null : containerRef, [\n    containerRef\n  ]);\n\n  useContentHeight(contentRef, containerRef);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (\n        event.key === 'Enter' &&\n        containerRef.current === getActiveElement() &&\n        (!focusOnInput || (focusOnInput && hasInteractiveElements > 1))\n      ) {\n        event.preventDefault();\n        contentRef.current?.querySelectorAll<HTMLElement>(focusableSelector)[0]?.focus();\n      }\n      onKeyDown?.(event);\n    },\n    [containerRef, contentRef]\n  );\n\n  const imageContent = useMemo(() => {\n    if (!image) return undefined;\n\n    const innerContent = tile ? (\n      <StyledTileContent\n        data-tile-content\n        foregroundColor={tile.foregroundColor}\n        backgroundColor={tile.backgroundColor}\n        size={tile.size}\n      >\n        {tile.icon ? <Icon name={tile.icon} /> : tile.text || <Icon name='picture' />}\n      </StyledTileContent>\n    ) : (\n      <Flex\n        container={{ justify: 'center', alignItems: 'center' }}\n        as={StyledImageContainer}\n        placement={image.placement}\n        size={image.size}\n      >\n        {(isBrokenImage && resolvedImageSrc === prevImageSrc) || resolvedImageSrc === undefined ? (\n          <Icon name='picture' aria-label={t('image_load_error')} />\n        ) : (\n          <StyledImage\n            data-testid={testIds.image}\n            {...image}\n            onError={() => setIsBrokenImage(true)}\n            onLoad={() => setIsBrokenImage(false)}\n          />\n        )}\n      </Flex>\n    );\n\n    return (\n      <Flex\n        container={{ justify: 'center', alignItems: 'center' }}\n        as={StyledImageCell}\n        placement={image.placement}\n        size={image.size}\n        isTile={isTile}\n        style={\n          !isTile && image.src && !isBrokenImage ? { '--bg-image': `url(${image.src})` } : undefined\n        }\n      >\n        {innerContent}\n      </Flex>\n    );\n  }, [\n    isBrokenImage,\n    prevImageSrc,\n    image?.placement,\n    image?.size,\n    tile?.icon,\n    tile?.text,\n    tile?.foregroundColor,\n    tile?.backgroundColor\n  ]);\n\n  let asProp: GridProps['as'] = StyledSelectionCard;\n  if (image) {\n    asProp = (image.placement ?? 'inline-start').startsWith('block')\n      ? StyledSelectionCardStacked\n      : StyledSelectionCardInline;\n  }\n\n  const isFieldValueListItemProps = (\n    item: FieldValueListItemProps | FieldValueItemPropsOmitName\n  ): item is FieldValueListItemProps => {\n    return hasProp(item, 'name');\n  };\n\n  return (\n    <Grid\n      data-testid={testIds.root}\n      {...restProps}\n      id={id}\n      onClick={onClick}\n      as={asProp}\n      placement={image?.placement}\n      size={image?.size}\n      container={{ cols: '1fr', rows: 'auto' }}\n      disabled={disabled}\n      readOnly={readOnly}\n      role={hasInteractiveElements ? 'group' : 'article'}\n      aria-label={label}\n      ref={containerRef}\n      data-main-focus={focusOnInput ? undefined : true}\n      tabIndex={focusOnInput ? undefined : 0}\n      onKeyDown={handleKeyDown}\n    >\n      {image && image.placement !== 'inline-end' && imageContent}\n      {/* element needed to get actual content height of the content container */}\n      <StyledContentCell>\n        <Flex\n          as={StyledContentContainer}\n          container={{ direction: 'column', gap: 0.75 }}\n          ref={contentRef}\n        >\n          <Flex as={StyledHeader} container={{ alignItems: 'center', justify: 'between' }}>\n            {isValidElement(heading) ? (\n              cloneElement(heading, {\n                ...{\n                  tabIndex: focusOnInput ? undefined : -1,\n                  additionalInfo,\n                  'data-main-focus': focusOnInput ? true : undefined,\n                  'aria-details': hasAdditionalContent ? contentId : undefined\n                }\n              })\n            ) : (\n              <span\n                data-testid={testIds.label}\n                aria-details={hasAdditionalContent ? contentId : undefined}\n              >\n                {heading}\n              </span>\n            )}\n            {actions && (\n              <SelectionCardActions\n                data-testid={testIds.actions}\n                actions={actions}\n                disabled={disabled}\n                contextualLabel={label}\n              />\n            )}\n          </Flex>\n          {hasAdditionalContent &&\n            (fields.every(field => isFieldValueListItemProps(field)) ? (\n              <FieldValueList id={contentId} data-testid={testIds.content} fields={fields} />\n            ) : (\n              <>\n                {fields.length === 1 ? (\n                  <SingleField\n                    id={contentId}\n                    data-testid={testIds.content}\n                    truncate={fields[0].truncate}\n                    value={fields[0].value}\n                  />\n                ) : (\n                  <Flex\n                    container={{ direction: 'column', gap: 1 }}\n                    as={StyledValueList}\n                    id={contentId}\n                    data-testid={testIds.content}\n                  >\n                    {fields.map(field => (\n                      <li key={field.id}>\n                        {field.truncate ? (\n                          <ShowMoreLess lines={3}>{field.value}</ShowMoreLess>\n                        ) : (\n                          field.value\n                        )}\n                      </li>\n                    ))}\n                  </Flex>\n                )}\n              </>\n            ))}\n        </Flex>\n        {footer && <StyledCardFooter>{footer}</StyledCardFooter>}\n      </StyledContentCell>\n      {image?.placement === 'inline-end' && imageContent}\n    </Grid>\n  );\n});\n\nexport default withTestIds(SelectionCard, getSelectionCardTestIds);\n"]}

package/lib/components/SelectionCard/SelectionCard.styles.d.ts

@@ -1,17 +1,42 @@
-import type { ExcludeStrict } from '../../types';
+import { type DefaultTheme } from 'styled-components';
 import type { ImagePlacement, ImageSize, SelectionCardProps } from './SelectionCard.types';
-export declare const StyledSelectionCard: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<SelectionCardProps, "disabled">, never>;
-export declare const StyledSelectionCardInline: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<SelectionCardProps, "disabled"> & {
-    placement?: ExcludeStrict<ImagePlacement, "block-start">;
+export declare const StyledSelectionCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<SelectionCardProps, "disabled" | "onClick" | "readOnly">>> & string;
+export declare const StyledSelectionCardInline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled" | "onClick" | "readOnly"> & Pick<SelectionCardProps, "disabled" | "onClick" | "readOnly">, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, {
+    placement?: Extract<ImagePlacement, "inline-start" | "inline-end">;
     size?: ImageSize;
-}, never>;
-export declare const StyledSelectionCardStacked: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<SelectionCardProps, "disabled"> & {
+}>> & string;
+export declare const StyledSelectionCardStacked: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled" | "onClick" | "readOnly"> & Pick<SelectionCardProps, "disabled" | "onClick" | "readOnly">, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, {
     size?: ImageSize;
-}, never>;
-export declare const StyledImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+}>> & string;
+export declare const StyledImageCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     placement?: ImagePlacement;
     size?: ImageSize;
-}, never>;
-export declare const StyledValueList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledContentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+    isTile?: boolean;
+}>> & string;
+export declare const StyledContentCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledImageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    placement?: ImagePlacement;
+    size?: ImageSize;
+}>> & string;
+export declare const StyledValueList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export declare const StyledHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTileContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    foregroundColor: string;
+    backgroundColor: string;
+    size?: ImageSize;
+}>> & string;
+export declare const StyledCardFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSingleField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    truncate?: boolean;
+}>> & string;
+export declare const getBaseCardContainerStyles: (theme: DefaultTheme) => import("styled-components").RuleSet<object>;
+export declare const getInlineImageCardContainerStyles: (theme: DefaultTheme, { placement, size }: {
+    placement: Extract<ImagePlacement, "inline-start" | "inline-end">;
+    size: ImageSize;
+}) => import("styled-components").RuleSet<object>;
 //# sourceMappingURL=SelectionCard.styles.d.ts.map

package/lib/components/SelectionCard/SelectionCard.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3F,eAAO,MAAM,mBAAmB,2IAyC/B,CAAC;AAIF,eAAO,MAAM,yBAAyB;gBACxB,aAAa,CAAC,cAAc,EAAE,aAAa,CAAC;WACjD,SAAS;SAsBhB,CAAC;AAEH,eAAO,MAAM,0BAA0B;WAAwC,SAAS;SAkBtF,CAAC;AAEH,eAAO,MAAM,oBAAoB;gBACnB,cAAc;WACnB,SAAS;SA8EjB,CAAC;AAIF,eAAO,MAAM,eAAe,wGAG3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAYjC,CAAC"}
+{"version":3,"file":"SelectionCard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SelectionCard/SelectionCard.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AASnE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAQ3F,eAAO,MAAM,mBAAmB,kSAgE/B,CAAC;AAIF,eAAO,MAAM,yBAAyB;;;gBACxB,OAAO,CAAC,cAAc,EAAE,cAAc,GAAG,YAAY,CAAC;WAC3D,SAAS;YAUhB,CAAC;AAIH,eAAO,MAAM,0BAA0B;;;WAAwC,SAAS;YAkBtF,CAAC;AAEH,eAAO,MAAM,eAAe;gBACd,cAAc;WACnB,SAAS;aACP,OAAO;YAiEjB,CAAC;AAIF,eAAO,MAAM,iBAAiB,6NAG7B,CAAC;AAEF,eAAO,MAAM,oBAAoB;gBACnB,cAAc;WACnB,SAAS;YA4DjB,CAAC;AAIF,eAAO,MAAM,eAAe,iOAG3B,CAAC;AAEF,eAAO,MAAM,YAAY,6NAExB,CAAC;AAEF,eAAO,MAAM,sBAAsB,6NAiBjC,CAAC;AAIH,eAAO,MAAM,iBAAiB;qBACX,MAAM;qBACN,MAAM;WAChB,SAAS;YAqChB,CAAC;AAIH,eAAO,MAAM,gBAAgB,6NAM3B,CAAC;AAIH,eAAO,MAAM,iBAAiB;eAA2B,OAAO;YAE/D,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,OAAO,YAAY,gDAc7D,CAAC;AAiBF,eAAO,MAAM,iCAAiC,GAC5C,OAAO,YAAY,EACnB,qBAGG;IACD,SAAS,EAAE,OAAO,CAAC,cAAc,EAAE,cAAc,GAAG,YAAY,CAAC,CAAC;IAClE,IAAI,EAAE,SAAS,CAAC;CACjB,gDAuCF,CAAC"}