npm - @pega/cosmos-react-work - Versions diffs - 4.0.0-dev.12.1 → 4.0.0-dev.14.0 - Mend

@pega/cosmos-react-work 4.0.0-dev.12.1 → 4.0.0-dev.14.0

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 (101) hide show

package/lib/components/Details/Details.js CHANGED Viewed

@@ -1,15 +1,23 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';
 import { remToPx } from 'polished';
-import { Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useI18n } from '@pega/cosmos-react-core';
+import { Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useChToPxConversionFactor, useI18n } from '@pega/cosmos-react-core';
 import DetailsContext from './DetailsContext';
-import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp, chToRem } from './Details.styles';
+import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp } from './Details.styles';
 const Details = forwardRef(({ highlightedData, children, name, columnCount = 1, nested = false, asFlex = false, valueComparison = false, collapsible = false }, ref) => {
-    const { longestLabelLength, mobileView, depth, ...context } = useContext(DetailsContext);
-    const { base: { 'content-width': { sm } } } = useTheme();
+    const { longestLabelLength, mobileView: inMobileView, depth, ...context } = useContext(DetailsContext);
+    const { base: { 'content-width': { sm: smContentWidth } } } = useTheme();
     const isSmallOrAbove = useBreakpoint('sm');
     const listRef = useConsolidatedRef(ref);
-    const flexRow = useBreakpoint(columnCount > 2 ? 'md' : 'sm', {
+    const isXsContentWidthOrAbove = useBreakpoint('xs', {
+        breakpointRef: listRef,
+        themeProp: 'content-width'
+    });
+    const isMdContentWidthOrAbove = useBreakpoint('md', {
+        breakpointRef: listRef,
+        themeProp: 'content-width'
+    });
+    const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {
         breakpointRef: listRef,
         themeProp: 'content-width'
     });
@@ -18,16 +26,17 @@ const Details = forwardRef(({ highlightedData, children, name, columnCount = 1,
     const [open, setOpen] = useState(true);
     const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));
     const headingDepth = depth ?? 1;
-    const applyMobileView = asFlex
-        ? mobileView || (flexRow && flexContextMobileView) || !isSmallOrAbove
-        : mobileView || !isSmallOrAbove;
+    const applyMobileView = inMobileView ||
+        !isSmallOrAbove ||
+        !isXsContentWidthOrAbove ||
+        (asFlex && flexRow && flexContextMobileView);
+    const chToPxConversionFactor = useChToPxConversionFactor();
     /**
      * Mount resize observer to update flex context mobile view & run initial check.
      */
     useEffect(() => {
         const checkBreakpoint = (elementWidth) => {
-            const minWidthRem = chToRem(parseInt(sm, 10));
-            const minWidthPx = parseInt(remToPx(minWidthRem), 10);
+            const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;
             const oneRemInPx = parseInt(remToPx(1), 10);
             const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);
             const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;
@@ -57,9 +66,9 @@ const Details = forwardRef(({ highlightedData, children, name, columnCount = 1,
         return (_jsx(Text, { variant: `h${Math.min(headingDepth, 6)}`, children: name }));
     }, [name, headingDepth]);
     const details = useMemo(() => {
-        return (_jsxs(_Fragment, { children: [highlightedData && (_jsxs(_Fragment, { children: [_jsx(StyledHighlightedDetailList, { as: nested ? 'div' : 'dl', children: highlightedData.map((child, i) => (
+        return (_jsxs(_Fragment, { children: [highlightedData && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledHighlightedDetailList, forwardedAs: nested ? 'div' : 'dl', container: { wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }, children: highlightedData.map((child, i) => (
                             // eslint-disable-next-line react/no-array-index-key
-                            _jsx(Fragment, { children: child }, i))) }), _jsx("hr", {})] })), _jsx(StyledDetailList, { ref: listRef, as: nested ? 'div' : 'dl', columnCount: columnCount, labelLength: labelLength, stacked: applyMobileView, hasName: !!name, nested: nested, flex: asFlex, wrapped: asFlex ? !flexRow : false, variant: valueComparison ? 'value-comparison' : undefined, children: children })] }));
+                            _jsx(Fragment, { children: child }, i))) }), _jsx("hr", {})] })), children ? (_jsx(StyledDetailList, { ref: listRef, as: nested ? 'div' : 'dl', columnCount: columnCount, labelLength: labelLength, stacked: applyMobileView, nested: nested, flex: asFlex, wrapped: asFlex ? !flexRow : false, variant: valueComparison ? 'value-comparison' : undefined, narrow: !isMdContentWidthOrAbove, children: children })) : null] }));
     }, [
         highlightedData,
         nested,
@@ -72,6 +81,8 @@ const Details = forwardRef(({ highlightedData, children, name, columnCount = 1,
         valueComparison,
         children
     ]);
+    if (!name && !children && !highlightedData)
+        return null;
     return (_jsx(DetailsContext.Provider, { value: contextValue, children: _jsxs(StyledDetails, { children: [name && (_jsx(StyledFieldValueGroupLabel, { children: collapsible ? (_jsx(Button, { type: 'button', variant: 'text', onClick: () => {
                             setOpen(cur => !cur);
                         }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: 'span', children: [_jsx(Icon, { name: 'caret-right' }), nameText] }) })) : (nameText) })), collapsible ? _jsx(ExpandCollapse, { collapsed: !open, children: details }) : details] }) }));

package/lib/components/Details/Details.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FC,\n Fragment,\n ReactNode,\n Ref,\n useState,\n useContext,\n useEffect,\n useMemo\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useTheme,\n ForwardProps,\n ExpandCollapse,\n Button,\n Flex,\n Icon,\n useI18n\n} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport {\n StyledFieldValueGroupLabel,\n StyledDetails,\n StyledDetailList,\n StyledHighlightedDetailList,\n flexGapProp,\n chToRem\n} from './Details.styles';\n\nexport interface DetailsProps {\n highlightedData?: ReactNode[];\n children?: ReactNode;\n /** Text used as heading of list /\n name?: string;\n /\n Whether the items children can be collapsed (only applies if name is provided)\n * @default false\n /\n collapsible?: boolean;\n /\n Number of columns in detail layout\n * @default 1\n /\n columnCount?: 1 \| 2 \| 3;\n /* Whether detail list is rendering within another detail list\n * @default false\n /\n nested?: boolean;\n /* Whether detail list is rendering multiple sub-lists in columns (passed as children)\n * @default false\n /\n asFlex?: boolean;\n /* Whether to apply `value-comparison` styles to list items\n * @default false\n /\n valueComparison?: boolean;\n ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(\n (\n {\n highlightedData,\n children,\n name,\n columnCount = 1,\n nested = false,\n asFlex = false,\n valueComparison = false,\n collapsible = false\n },\n ref\n ) => {\n const { longestLabelLength, mobileView, depth, ...context } = useContext(DetailsContext);\n const {\n base: {\n 'content-width': { sm }\n }\n } = useTheme();\n const isSmallOrAbove = useBreakpoint('sm');\n const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n const flexRow = useBreakpoint(columnCount > 2 ? 'md' : 'sm', {\n breakpointRef: listRef,\n themeProp: 'content-width'\n });\n const t = useI18n();\n\n const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n const [open, setOpen] = useState(true);\n\n const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n const headingDepth = depth ?? 1;\n const applyMobileView = asFlex\n ? mobileView \|\| (flexRow && flexContextMobileView) \|\| !isSmallOrAbove\n : mobileView \|\| !isSmallOrAbove;\n\n /\n Mount resize observer to update flex context mobile view & run initial check.\n /\n useEffect(() => {\n const checkBreakpoint = (elementWidth: number) => {\n const minWidthRem = chToRem(parseInt(sm, 10));\n const minWidthPx = parseInt(remToPx(minWidthRem), 10);\n const oneRemInPx = parseInt(remToPx(1), 10);\n const colGapPxAllowance = oneRemInPx (0.5 * flexGapProp) * (columnCount - 1);\n const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n };\n const resizeObserver = new ResizeObserver(entries => {\n const containerPxWidth = entries[0].contentRect.width;\n checkBreakpoint(containerPxWidth);\n });\n\n if (listRef.current) {\n checkBreakpoint(listRef.current.offsetWidth);\n resizeObserver.observe(listRef.current);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [listRef, columnCount]);\n\n const contextValue = useMemo(() => {\n return {\n mobileView: applyMobileView,\n depth: name ? headingDepth + 1 : headingDepth,\n longestLabelLength,\n ...context\n };\n }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n const nameText = useMemo(() => {\n return (\n <Text variant={`h${Math.min(headingDepth, 6)}` as 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'}>\n {name}\n </Text>\n );\n }, [name, headingDepth]);\n\n const details = useMemo(() => {\n return (\n <>\n {highlightedData && (\n <>\n <StyledHighlightedDetailList as={nested ? 'div' : 'dl'}>\n {highlightedData.map((child, i) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={i}>{child}</Fragment>\n ))}\n </StyledHighlightedDetailList>\n\n <hr />\n </>\n )}\n\n <StyledDetailList\n ref={listRef}\n as={nested ? 'div' : 'dl'}\n columnCount={columnCount}\n labelLength={labelLength}\n stacked={applyMobileView}\n hasName={!!name}\n nested={nested}\n flex={asFlex}\n wrapped={asFlex ? !flexRow : false}\n variant={valueComparison ? 'value-comparison' : undefined}\n >\n {children}\n </StyledDetailList>\n </>\n );\n }, [\n highlightedData,\n nested,\n columnCount,\n labelLength,\n applyMobileView,\n name,\n asFlex,\n flexRow,\n valueComparison,\n children\n ]);\n\n return (\n <DetailsContext.Provider value={contextValue}>\n <StyledDetails>\n {name && (\n <StyledFieldValueGroupLabel>\n {collapsible ? (\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n <Icon name='caret-right' />\n {nameText}\n </Flex>\n </Button>\n ) : (\n nameText\n )}\n </StyledFieldValueGroupLabel>\n )}\n\n {collapsible ? <ExpandCollapse collapsed={!open}>{details}</ExpandCollapse> : details}\n </StyledDetails>\n </DetailsContext.Provider>\n );\n }\n);\n\nexport default Details;\n"]}
1	+ {"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAEV,QAAQ,EAGR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,EACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EACL,IAAI,EACJ,aAAa,EACb,kBAAkB,EAClB,QAAQ,EAER,cAAc,EACd,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,yBAAyB,EACzB,OAAO,EACR,MAAM,yBAAyB,CAAC;AAEjC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,0BAA0B,EAC1B,aAAa,EACb,gBAAgB,EAChB,2BAA2B,EAC3B,WAAW,EACZ,MAAM,kBAAkB,CAAC;AAgC1B,MAAM,OAAO,GAAoC,UAAU,CACzD,CACE,EACE,eAAe,EACf,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,CAAC,EACf,MAAM,GAAG,KAAK,EACd,MAAM,GAAG,KAAK,EACd,eAAe,GAAG,KAAK,EACvB,WAAW,GAAG,KAAK,EACpB,EACD,GAAG,EACH,EAAE;IACF,MAAM,EACJ,kBAAkB,EAClB,UAAU,EAAE,YAAY,EACxB,KAAK,EACL,GAAG,OAAO,EACX,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC/B,MAAM,EACJ,IAAI,EAAE,EACJ,eAAe,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,EACxC,EACF,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,OAAO,GAAG,kBAAkB,CAAmB,GAAG,CAAC,CAAC;IAC1D,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,OAAO;QACtB,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IACH,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,OAAO;QACtB,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,aAAa,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE;QAC3D,aAAa,EAAE,OAAO;QACtB,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEvC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,kBAAkB,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IACzE,MAAM,YAAY,GAAG,KAAK,IAAI,CAAC,CAAC;IAChC,MAAM,eAAe,GACnB,YAAY;QACZ,CAAC,cAAc;QACf,CAAC,uBAAuB;QACxB,CAAC,MAAM,IAAI,OAAO,IAAI,qBAAqB,CAAC,CAAC;IAE/C,MAAM,sBAAsB,GAAG,yBAAyB,EAAE,CAAC;IAE3D;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,CAAC,YAAoB,EAAE,EAAE;YAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,EAAE,EAAE,CAAC,GAAG,sBAAsB,CAAC;YACzE,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC5C,MAAM,iBAAiB,GAAG,UAAU,GAAG,CAAC,GAAG,GAAG,WAAW,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;YAC/E,MAAM,oBAAoB,GAAG,UAAU,GAAG,WAAW,GAAG,iBAAiB,CAAC;YAE1E,wBAAwB,CAAC,YAAY,GAAG,oBAAoB,CAAC,CAAC;QAChE,CAAC,CAAC;QACF,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAClD,MAAM,gBAAgB,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;YACtD,eAAe,CAAC,gBAAgB,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;QAEH,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YAC7C,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SACzC;QAED,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3B,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO;YACL,UAAU,EAAE,eAAe;YAC3B,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY;YAC7C,kBAAkB;YAClB,GAAG,OAAO;SACX,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,EAAE,YAAY,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvE,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,CACL,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC,EAA6C,YACtF,IAAI,GACA,CACR,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IAEzB,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,CACL,8BACG,eAAe,IAAI,CAClB,8BACE,KAAC,IAAI,IACH,EAAE,EAAE,2BAA2B,EAC/B,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAClC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,YAEtE,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;4BACjC,oDAAoD;4BACpD,KAAC,QAAQ,cAAU,KAAK,IAAT,CAAC,CAAoB,CACrC,CAAC,GACG,EAEP,cAAM,IACL,CACJ,EAEA,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,gBAAgB,IACf,GAAG,EAAE,OAAO,EACZ,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EACzB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAClC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EACzD,MAAM,EAAE,CAAC,uBAAuB,YAE/B,QAAQ,GACQ,CACpB,CAAC,CAAC,CAAC,IAAI,IACP,CACJ,CAAC;IACJ,CAAC,EAAE;QACD,eAAe;QACf,MAAM;QACN,WAAW;QACX,WAAW;QACX,eAAe;QACf,IAAI;QACJ,MAAM;QACN,OAAO;QACP,eAAe;QACf,QAAQ;KACT,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,eAAe;QAAE,OAAO,IAAI,CAAC;IAExD,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC1C,MAAC,aAAa,eACX,IAAI,IAAI,CACP,KAAC,0BAA0B,cACxB,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;wBACvB,CAAC,mBACc,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC1B,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,YAE7D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAC,MAAM,aAC5D,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC1B,QAAQ,IACJ,GACA,CACV,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GAC0B,CAC9B,EAEA,WAAW,CAAC,CAAC,CAAC,KAAC,cAAc,IAAC,SAAS,EAAE,CAAC,IAAI,YAAG,OAAO,GAAkB,CAAC,CAAC,CAAC,OAAO,IACvE,GACQ,CAC3B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n forwardRef,\n FC,\n Fragment,\n ReactNode,\n Ref,\n useState,\n useContext,\n useEffect,\n useMemo\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useTheme,\n ForwardProps,\n ExpandCollapse,\n Button,\n Flex,\n Icon,\n useChToPxConversionFactor,\n useI18n\n} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport {\n StyledFieldValueGroupLabel,\n StyledDetails,\n StyledDetailList,\n StyledHighlightedDetailList,\n flexGapProp\n} from './Details.styles';\n\nexport interface DetailsProps {\n highlightedData?: ReactNode[];\n children?: ReactNode;\n /** Text used as heading of list /\n name?: string;\n /\n Whether the items children can be collapsed (only applies if name is provided)\n * @default false\n /\n collapsible?: boolean;\n /\n Number of columns in detail layout\n * @default 1\n /\n columnCount?: 1 \| 2 \| 3;\n /* Whether detail list is rendering within another detail list\n * @default false\n /\n nested?: boolean;\n /* Whether detail list is rendering multiple sub-lists in columns (passed as children)\n * @default false\n /\n asFlex?: boolean;\n /* Whether to apply `value-comparison` styles to list items\n * @default false\n /\n valueComparison?: boolean;\n ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(\n (\n {\n highlightedData,\n children,\n name,\n columnCount = 1,\n nested = false,\n asFlex = false,\n valueComparison = false,\n collapsible = false\n },\n ref\n ) => {\n const {\n longestLabelLength,\n mobileView: inMobileView,\n depth,\n ...context\n } = useContext(DetailsContext);\n const {\n base: {\n 'content-width': { sm: smContentWidth }\n }\n } = useTheme();\n const isSmallOrAbove = useBreakpoint('sm');\n const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n const isXsContentWidthOrAbove = useBreakpoint('xs', {\n breakpointRef: listRef,\n themeProp: 'content-width'\n });\n const isMdContentWidthOrAbove = useBreakpoint('md', {\n breakpointRef: listRef,\n themeProp: 'content-width'\n });\n const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {\n breakpointRef: listRef,\n themeProp: 'content-width'\n });\n const t = useI18n();\n\n const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n const [open, setOpen] = useState(true);\n\n const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n const headingDepth = depth ?? 1;\n const applyMobileView =\n inMobileView \|\|\n !isSmallOrAbove \|\|\n !isXsContentWidthOrAbove \|\|\n (asFlex && flexRow && flexContextMobileView);\n\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n /\n Mount resize observer to update flex context mobile view & run initial check.\n /\n useEffect(() => {\n const checkBreakpoint = (elementWidth: number) => {\n const minWidthPx = parseInt(smContentWidth, 10) chToPxConversionFactor;\n const oneRemInPx = parseInt(remToPx(1), 10);\n const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n };\n const resizeObserver = new ResizeObserver(entries => {\n const containerPxWidth = entries[0].contentRect.width;\n checkBreakpoint(containerPxWidth);\n });\n\n if (listRef.current) {\n checkBreakpoint(listRef.current.offsetWidth);\n resizeObserver.observe(listRef.current);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [listRef, columnCount]);\n\n const contextValue = useMemo(() => {\n return {\n mobileView: applyMobileView,\n depth: name ? headingDepth + 1 : headingDepth,\n longestLabelLength,\n ...context\n };\n }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n const nameText = useMemo(() => {\n return (\n <Text variant={`h${Math.min(headingDepth, 6)}` as 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'}>\n {name}\n </Text>\n );\n }, [name, headingDepth]);\n\n const details = useMemo(() => {\n return (\n <>\n {highlightedData && (\n <>\n <Flex\n as={StyledHighlightedDetailList}\n forwardedAs={nested ? 'div' : 'dl'}\n container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n >\n {highlightedData.map((child, i) => (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={i}>{child}</Fragment>\n ))}\n </Flex>\n\n <hr />\n </>\n )}\n\n {children ? (\n <StyledDetailList\n ref={listRef}\n as={nested ? 'div' : 'dl'}\n columnCount={columnCount}\n labelLength={labelLength}\n stacked={applyMobileView}\n nested={nested}\n flex={asFlex}\n wrapped={asFlex ? !flexRow : false}\n variant={valueComparison ? 'value-comparison' : undefined}\n narrow={!isMdContentWidthOrAbove}\n >\n {children}\n </StyledDetailList>\n ) : null}\n </>\n );\n }, [\n highlightedData,\n nested,\n columnCount,\n labelLength,\n applyMobileView,\n name,\n asFlex,\n flexRow,\n valueComparison,\n children\n ]);\n\n if (!name && !children && !highlightedData) return null;\n\n return (\n <DetailsContext.Provider value={contextValue}>\n <StyledDetails>\n {name && (\n <StyledFieldValueGroupLabel>\n {collapsible ? (\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open ? 'true' : 'false'}\n aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n >\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n <Icon name='caret-right' />\n {nameText}\n </Flex>\n </Button>\n ) : (\n nameText\n )}\n </StyledFieldValueGroupLabel>\n )}\n\n {collapsible ? <ExpandCollapse collapsed={!open}>{details}</ExpandCollapse> : details}\n </StyledDetails>\n </DetailsContext.Provider>\n );\n }\n);\n\nexport default Details;\n"]}

package/lib/components/Details/Details.styles.d.ts CHANGED Viewed

@@ -5,8 +5,6 @@ interface StyledDetailListProps extends StyledFieldValueListProps {
     stacked?: boolean;
     /** Whether the list is a flex row of other lists */
     flex?: boolean;
-    /** Whether the list has a name attribute */
-    hasName?: boolean;
     /** Whether the list is nested */
     nested?: boolean;
     /** The character length applied to all list labels */
@@ -21,6 +19,11 @@ interface StyledDetailListProps extends StyledFieldValueListProps {
      * @default 1
      */
     columnCount?: 1 | 2 | 3;
+    /**
+     * Whether to apply narrow list styles
+     * @default false
+     */
+    narrow?: boolean;
     theme: DefaultTheme;
 }
 export declare const colCountChWidth: {
@@ -38,7 +41,6 @@ export declare const colCountChWidth: {
     };
 };
 export declare const flexGapProp = 5.5;
-export declare const chToRem: (chVal: number) => number;
 export declare const StyledFieldValueGroupLabel: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledHighlightedDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, {}, never>;
 export declare const StyledDetails: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;

package/lib/components/Details/Details.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAML,yBAAyB,EAM1B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,~~4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,~~iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,~~OAAO,UAAW,MAAM,KAAG,MAEvC,CAAC;AAEF,eAAO,MAAM,~~0BAA0B,~~6EA4BrC~~,CAAC;AAIH,eAAO,MAAM,2BAA2B,~~4EA4BtC~~,CAAC;AAIH,eAAO,MAAM,aAAa,6EAIxB,CAAC;~~AAkCH~~,eAAO,MAAM,gBAAgB,~~uQAwJ5B~~,CAAC"}
1	+ {"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAML,yBAAyB,EAM1B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,0BAA0B,6EAyBrC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAIxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,uQA+H5B,CAAC"}

package/lib/components/Details/Details.styles.js CHANGED Viewed

@@ -17,9 +17,6 @@ export const colCountChWidth = {
     }
 };
 export const flexGapProp = 5.5;
-export const chToRem = (chVal) => {
-    return chVal / 2;
-};
 export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
     const { base: { spacing, animation } } = theme;
     const { rtl } = useDirection();
@@ -28,10 +25,7 @@ export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
     grid-column-start: 1;
     grid-column-end: -1;
     margin-block-end: calc(0.5 * ${spacing});
-    &:not(:first-child) {
-      margin-block-start: calc(3 * ${spacing});
-    }
+    margin-block-start: calc(3 * ${spacing});
     ${StyledButton} ${StyledIcon} {
       transition: transform ${animation.speed} ${animation.timing.ease};
@@ -51,12 +45,7 @@ export const StyledHighlightedDetailList = styled.dl(({ theme }) => {
     const { base: { spacing, palette } } = theme;
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
-    column-gap: calc(5 * ${spacing});
-    gap: calc(2 * ${spacing});
-    align-items: start;
-    max-width: ${`${colCountChWidth[3].containerWidth}ch}`};
+    max-width: ${colCountChWidth[3].containerWidth}ch;
     padding-block-end: calc(1.5 * ${spacing});
     dd {
@@ -74,40 +63,17 @@ export const StyledHighlightedDetailList = styled.dl(({ theme }) => {
   `;
 });
 StyledHighlightedDetailList.defaultProps = defaultThemeProp;
-export const StyledDetails = styled.div(() => {
+export const StyledDetails = styled.div(({ theme }) => {
     return css `
-    grid-column: 1 / -1;
+    margin-block-end: ${theme.base.spacing};
   `;
 });
 StyledDetails.defaultProps = defaultThemeProp;
-const nthRecursiveContainerSelector = (depth, includeAllImmediateContainers) => {
-    const firstContainerSelector = '> div:first-child';
-    const baseSelector = includeAllImmediateContainers ? '> div' : firstContainerSelector;
-    return baseSelector.concat(` ${firstContainerSelector}`.repeat(depth));
-};
-const initialLabelNoMargin = (applyToAllChildren = false) => {
-    return css `
-    ${nthRecursiveContainerSelector(0, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(1, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(2, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(3, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(4, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(5, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(6, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(7, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(8, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(9, applyToAllChildren)},
-    ${nthRecursiveContainerSelector(10, applyToAllChildren)} {
-      > ${StyledFieldValueGroupLabel}:first-child {
-        margin-block-start: 0;
-      }
-    }
-  `;
-};
-export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, hasName, nested, labelLength, variant, theme, wrapped = false, columnCount = 1 }) => {
+export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, nested, labelLength, variant, theme, wrapped = false, columnCount = 1, narrow = false }) => {
     const { base: { spacing } } = theme;
     const isValueComparison = variant === 'value-comparison';
     const containerWidthCh = colCountChWidth[columnCount].containerWidth;
+    const columnWidthCh = colCountChWidth[columnCount].colWidth;
     const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;
     return css `
       /* Top Level Styles */
@@ -118,14 +84,6 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, h
           overflow: auto;
         }
-        ${StyledFieldValueGroupLabel} {
-          margin-block-start: calc(3 * ${spacing});
-        }
-        > ${StyledFieldValueGroupLabel}:nth-child(1) {
-          margin-block-start: 0;
-        }
         ${StyledStackedFieldValue} {
           grid-column: 1 / -1;
         }
@@ -141,7 +99,7 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, h
       ${!flex &&
         css `
         display: grid;
-        grid-template-columns: ${`minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr)`};
+        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);
         column-gap: calc(2 * ${spacing});
         row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});
@@ -152,11 +110,16 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, h
         `}
         > ${StyledStackedFieldValue} {
-          max-width: ${`${containerWidthCh}ch`};
+          max-width: ${containerWidthCh}ch;
         }
         > ${StyledFieldValue} {
           max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));
+          ${!isValueComparison &&
+            css `
+            width: 100%;
+          `}
         }
         ${isValueComparison &&
@@ -164,8 +127,18 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, h
           grid-template-columns: auto auto;
           column-gap: 0;
           row-gap: calc(0.5 * ${spacing});
-          max-width: ${`${containerWidthCh}ch`};
+          max-width: ${containerWidthCh}ch;
+          > dd {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+          }
         `}
+        > ${StyledDetails} {
+          grid-column: 1 / -1;
+        }
       `}
       /* As Flex Container */
@@ -175,68 +148,37 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, h
         flex-direction: ${wrapped ? 'column' : 'row'};
         column-gap: calc(${flexGapProp} * ${spacing});
         align-items: flex-start;
-        max-width: ${`${containerWidthCh}ch`};
+        max-width: ${containerWidthCh}ch;
         ${!wrapped &&
             css `
           > * {
-            max-width: ${`${100 / columnCount}%`};
+            width: 100%;
+            max-width: ${columnWidthCh}%;
           }
-          ${hasName && initialLabelNoMargin(true)}
         `}
-        ${wrapped &&
-            css `
-          ${hasName && initialLabelNoMargin()}
-          ${!stacked &&
-                css `
-              > div:not(:first-child) {
-                margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
-              }
-            `}}
-        `}
-      `}
-      /* Key / Group Label Spacing */
-      ${!nested &&
-        css `
-        > div {
-          + dt {
-            margin-block-start: calc(3 * ${spacing});
-          }
-          + ${StyledStackedFieldValue} {
-            margin-block-start: calc(3 * ${spacing});
-          }
-          ${!stacked &&
-            css `
-            + dt + dd {
-              margin-block-start: calc(3 * ${spacing});
-            }
-          `}
+        > ${StyledDetails} {
+          width: 100%;
         }
-        ${initialLabelNoMargin()}
       `}
+      /* Key / Group Label Spacing */
       ${stacked &&
+        !isValueComparison &&
         css `
-        dt {
+        > dt {
           margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
         }
       `}
-      ${StyledFieldValueGroupLabel} + div {
-        > ${StyledFieldValueGroupLabel}:first-child {
-          margin-block-start: 0;
-        }
-        ${initialLabelNoMargin()}
-      }
+      /* Responsive behavior */
+      ${narrow &&
+        !stacked &&
+        !isValueComparison &&
+        css `
+        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);
+      `}
     `;
 });
 StyledDetailList.defaultProps = defaultThemeProp;

package/lib/components/Details/Details.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledFieldValueList,\n StyledFieldValueListProps,\n StyledIcon,\n FontSize,\n PropsWithDefaults,\n useDirection,\n StyledButton\n} from '@pega/cosmos-react-core';\n\ninterface StyledDetailListProps extends StyledFieldValueListProps {\n /** Whether individual list items all have labels stacks on top /\n stacked?: boolean;\n /* Whether the list is a flex row of other lists /\n flex?: boolean;\n /* Whether the list has a name attribute /\n hasName?: boolean;\n /* Whether the list is nested /\n nested?: boolean;\n /* The character length applied to all list labels /\n labelLength?: number;\n /\n Whether the list is wrapped to 1 column\n * @default false\n /\n wrapped?: boolean;\n /\n Number of columns in the list\n * @default 1\n /\n columnCount?: 1 \| 2 \| 3;\n theme: DefaultTheme;\n}\n\ntype StyledDetailListPropsWithDefaults = PropsWithDefaults<\n StyledDetailListProps,\n 'wrapped' \| 'columnCount'\n>;\n\nconst verticalGapSpacingMultiplier = 1;\n\n// colWidth reduces by 20% as column count increases\nexport const colCountChWidth = {\n '1': {\n containerWidth: 100,\n colWidth: 100\n },\n '2': {\n containerWidth: 80 2,\n colWidth: 80\n },\n '3': {\n containerWidth: 64 * 3,\n colWidth: 64\n }\n};\n\nexport const flexGapProp = 5.5;\n\nexport const chToRem = (chVal: number): number => {\n return chVal / 2;\n};\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n const {\n base: { spacing, animation }\n } = theme;\n const { rtl } = useDirection();\n\n return css`\n width: 100%;\n grid-column-start: 1;\n grid-column-end: -1;\n margin-block-end: calc(0.5 * ${spacing});\n\n &:not(:first-child) {\n margin-block-start: calc(3 * ${spacing});\n }\n\n ${StyledButton} ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n ${StyledButton}[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n ${StyledButton}[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n const {\n base: { spacing, palette }\n } = theme;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));\n column-gap: calc(5 * ${spacing});\n gap: calc(2 * ${spacing});\n align-items: start;\n max-width: ${`${colCountChWidth[3].containerWidth}ch}`};\n padding-block-end: calc(1.5 * ${spacing});\n\n dd {\n font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n\n + hr {\n border-top: unset;\n border-radius: unset;\n border-style: unset;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n margin-block-end: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledDetails = styled.div(() => {\n return css`\n grid-column: 1 / -1;\n `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nconst nthRecursiveContainerSelector = (\n depth: number,\n includeAllImmediateContainers?: boolean\n): string => {\n const firstContainerSelector = '> div:first-child';\n const baseSelector = includeAllImmediateContainers ? '> div' : firstContainerSelector;\n\n return baseSelector.concat(` ${firstContainerSelector}`.repeat(depth));\n};\n\nconst initialLabelNoMargin = (applyToAllChildren = false) => {\n return css`\n ${nthRecursiveContainerSelector(0, applyToAllChildren)},\n ${nthRecursiveContainerSelector(1, applyToAllChildren)},\n ${nthRecursiveContainerSelector(2, applyToAllChildren)},\n ${nthRecursiveContainerSelector(3, applyToAllChildren)},\n ${nthRecursiveContainerSelector(4, applyToAllChildren)},\n ${nthRecursiveContainerSelector(5, applyToAllChildren)},\n ${nthRecursiveContainerSelector(6, applyToAllChildren)},\n ${nthRecursiveContainerSelector(7, applyToAllChildren)},\n ${nthRecursiveContainerSelector(8, applyToAllChildren)},\n ${nthRecursiveContainerSelector(9, applyToAllChildren)},\n ${nthRecursiveContainerSelector(10, applyToAllChildren)} {\n > ${StyledFieldValueGroupLabel}:first-child {\n margin-block-start: 0;\n }\n }\n `;\n};\n\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(\n ({\n stacked,\n flex,\n hasName,\n nested,\n labelLength,\n variant,\n theme,\n wrapped = false,\n columnCount = 1\n }): any => {\n const {\n base: { spacing }\n } = theme;\n\n const isValueComparison = variant === 'value-comparison';\n const containerWidthCh = colCountChWidth[columnCount].containerWidth;\n const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;\n\n return css`\n /* Top Level Styles /\n ${!nested &&\n css`\n ${StyledFieldValue} {\n word-break: break-word;\n overflow: auto;\n }\n\n ${StyledFieldValueGroupLabel} {\n margin-block-start: calc(3 ${spacing});\n }\n\n > ${StyledFieldValueGroupLabel}:nth-child(1) {\n margin-block-start: 0;\n }\n\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `}\n\n /* Nested List /\n ${nested &&\n css`\n grid-column: 1 / -1;\n `}\n\n / As Field Grid /\n ${!flex &&\n css`\n display: grid;\n grid-template-columns: ${`minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr)`};\n column-gap: calc(2 ${spacing});\n row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});\n\n ${stacked &&\n css`\n grid-template-columns: minmax(0, 1fr);\n row-gap: 0;\n `}\n\n > ${StyledStackedFieldValue} {\n max-width: ${`${containerWidthCh}ch`};\n }\n\n > ${StyledFieldValue} {\n max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));\n }\n\n ${isValueComparison &&\n css`\n grid-template-columns: auto auto;\n column-gap: 0;\n row-gap: calc(0.5 * ${spacing});\n max-width: ${`${containerWidthCh}ch`};\n `}\n `}\n\n /* As Flex Container /\n ${flex &&\n css`\n display: flex;\n flex-direction: ${wrapped ? 'column' : 'row'};\n column-gap: calc(${flexGapProp} ${spacing});\n align-items: flex-start;\n\n max-width: ${`${containerWidthCh}ch`};\n\n ${!wrapped &&\n css`\n > * {\n max-width: ${`${100 / columnCount}%`};\n }\n\n ${hasName && initialLabelNoMargin(true)}\n `}\n\n ${wrapped &&\n css`\n ${hasName && initialLabelNoMargin()}\n\n ${\n !stacked &&\n css`\n > div:not(:first-child) {\n margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n }\n `\n }}\n `}\n `}\n\n /* Key / Group Label Spacing /\n ${!nested &&\n css`\n > div {\n + dt {\n margin-block-start: calc(3 ${spacing});\n }\n\n + ${StyledStackedFieldValue} {\n margin-block-start: calc(3 * ${spacing});\n }\n\n ${!stacked &&\n css`\n + dt + dd {\n margin-block-start: calc(3 * ${spacing});\n }\n `}\n }\n\n ${initialLabelNoMargin()}\n `}\n\n ${stacked &&\n css`\n dt {\n margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n }\n `}\n\n ${StyledFieldValueGroupLabel} + div {\n > ${StyledFieldValueGroupLabel}:first-child {\n margin-block-start: 0;\n }\n\n ${initialLabelNoMargin()}\n }\n `;\n }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\n\nimport {\n calculateFontSize,\n defaultThemeProp,\n StyledFieldValue,\n StyledStackedFieldValue,\n StyledFieldValueList,\n StyledFieldValueListProps,\n StyledIcon,\n FontSize,\n PropsWithDefaults,\n useDirection,\n StyledButton\n} from '@pega/cosmos-react-core';\n\ninterface StyledDetailListProps extends StyledFieldValueListProps {\n /** Whether individual list items all have labels stacks on top /\n stacked?: boolean;\n /* Whether the list is a flex row of other lists /\n flex?: boolean;\n /* Whether the list is nested /\n nested?: boolean;\n /* The character length applied to all list labels /\n labelLength?: number;\n /\n Whether the list is wrapped to 1 column\n * @default false\n /\n wrapped?: boolean;\n /\n Number of columns in the list\n * @default 1\n /\n columnCount?: 1 \| 2 \| 3;\n /\n Whether to apply narrow list styles\n * @default false\n /\n narrow?: boolean;\n theme: DefaultTheme;\n}\n\ntype StyledDetailListPropsWithDefaults = PropsWithDefaults<\n StyledDetailListProps,\n 'wrapped' \| 'columnCount'\n>;\n\nconst verticalGapSpacingMultiplier = 1;\n\n// colWidth reduces by 20% as column count increases\nexport const colCountChWidth = {\n '1': {\n containerWidth: 100,\n colWidth: 100\n },\n '2': {\n containerWidth: 80 2,\n colWidth: 80\n },\n '3': {\n containerWidth: 64 * 3,\n colWidth: 64\n }\n};\n\nexport const flexGapProp = 5.5;\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n const {\n base: { spacing, animation }\n } = theme;\n const { rtl } = useDirection();\n\n return css`\n width: 100%;\n grid-column-start: 1;\n grid-column-end: -1;\n margin-block-end: calc(0.5 * ${spacing});\n margin-block-start: calc(3 * ${spacing});\n\n ${StyledButton} ${StyledIcon} {\n transition: transform ${animation.speed} ${animation.timing.ease};\n }\n\n ${StyledButton}[aria-expanded='true'] ${StyledIcon} {\n transform: rotate(90deg);\n }\n\n ${StyledButton}[aria-expanded='false'] ${StyledIcon} {\n transform: rotate(${rtl ? 180 : 0}deg);\n }\n `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n const {\n base: { spacing, palette }\n } = theme;\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n max-width: ${colCountChWidth[3].containerWidth}ch;\n padding-block-end: calc(1.5 * ${spacing});\n\n dd {\n font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n font-weight: ${theme.components.text.h1['font-weight']};\n }\n\n + hr {\n border-top: unset;\n border-radius: unset;\n border-style: unset;\n border-bottom: 0.0625rem solid ${palette['border-line']};\n margin-block-end: calc(1.5 * ${spacing});\n }\n `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledDetails = styled.div(({ theme }) => {\n return css`\n margin-block-end: ${theme.base.spacing};\n `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(\n ({\n stacked,\n flex,\n nested,\n labelLength,\n variant,\n theme,\n wrapped = false,\n columnCount = 1,\n narrow = false\n }): any => {\n const {\n base: { spacing }\n } = theme;\n\n const isValueComparison = variant === 'value-comparison';\n const containerWidthCh = colCountChWidth[columnCount].containerWidth;\n const columnWidthCh = colCountChWidth[columnCount].colWidth;\n const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;\n\n return css`\n /* Top Level Styles /\n ${!nested &&\n css`\n ${StyledFieldValue} {\n word-break: break-word;\n overflow: auto;\n }\n\n ${StyledStackedFieldValue} {\n grid-column: 1 / -1;\n }\n `}\n\n / Nested List /\n ${nested &&\n css`\n grid-column: 1 / -1;\n `}\n\n / As Field Grid /\n ${!flex &&\n css`\n display: grid;\n grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n column-gap: calc(2 ${spacing});\n row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});\n\n ${stacked &&\n css`\n grid-template-columns: minmax(0, 1fr);\n row-gap: 0;\n `}\n\n > ${StyledStackedFieldValue} {\n max-width: ${containerWidthCh}ch;\n }\n\n > ${StyledFieldValue} {\n max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));\n\n ${!isValueComparison &&\n css`\n width: 100%;\n `}\n }\n\n ${isValueComparison &&\n css`\n grid-template-columns: auto auto;\n column-gap: 0;\n row-gap: calc(0.5 * ${spacing});\n max-width: ${containerWidthCh}ch;\n\n > dd {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n `}\n\n > ${StyledDetails} {\n grid-column: 1 / -1;\n }\n `}\n\n /* As Flex Container /\n ${flex &&\n css`\n display: flex;\n flex-direction: ${wrapped ? 'column' : 'row'};\n column-gap: calc(${flexGapProp} ${spacing});\n align-items: flex-start;\n max-width: ${containerWidthCh}ch;\n\n ${!wrapped &&\n css`\n > * {\n width: 100%;\n max-width: ${columnWidthCh}%;\n }\n `}\n\n > ${StyledDetails} {\n width: 100%;\n }\n `}\n\n /* Key / Group Label Spacing /\n ${stacked &&\n !isValueComparison &&\n css`\n > dt {\n margin-block-start: calc(${verticalGapSpacingMultiplier} ${spacing});\n }\n `}\n\n /* Responsive behavior */\n ${narrow &&\n !stacked &&\n !isValueComparison &&\n css`\n grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);\n `}\n `;\n }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Glimpse/Glimpse.d.ts CHANGED Viewed

@@ -1,20 +1,20 @@
-import { FunctionComponent, Ref } from 'react';
-import { BaseProps, FieldValueListProps, ForwardProps, MenuItemProps, NoChildrenProp } from '@pega/cosmos-react-core';
-export interface GlimpseProps extends BaseProps, NoChildrenProp {
+import { FunctionComponent, MouseEventHandler, Ref } from 'react';
+import { BaseProps, ButtonProps, FieldValueListProps, ForwardProps, InfoDialogProps, NoChildrenProp, OmitStrict } from '@pega/cosmos-react-core';
+type InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;
+export interface GlimpseProps extends BaseProps, OmitStrict<InfoDialogProps, 'children'>, NoChildrenProp {
     /** The unique id for the operator. */
     id: string;
-    /** The primary piece of item information as a string. */
-    primary: MenuItemProps['primary'];
-    /** Secondary info about an item. Useful for additional metadata or context. */
-    secondary?: MenuItemProps['secondary'];
-    /** A visual to assist identifying an item. e.g. Avatar or Icon. */
-    visual?: MenuItemProps['visual'];
+    /** Primary, secondary and avatar for the glimpse.  */
+    heading?: InfoDialogSummaryHeading;
     /** The set of field values to render in the list. */
     fields?: FieldValueListProps['fields'];
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
+    /** Callback for click event on View profile button. Passing this will render View profile button  */
+    onViewProfile?: MouseEventHandler<HTMLButtonElement>;
+    /** A URL location to navigate to. Passing an href will render View profile button as a link. */
+    href?: ButtonProps['href'];
 }
-export declare const StyledGlimpse: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").CardProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 declare const Glimpse: FunctionComponent<GlimpseProps & ForwardProps>;
 export default Glimpse;
 //# sourceMappingURL=Glimpse.d.ts.map

package/lib/components/Glimpse/Glimpse.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Glimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAc~~,iBAAiB,~~EAAmB~~,GAAG,~~EAAE~~,MAAM,OAAO,CAAC;~~AAG5E~~,OAAO,EACL,SAAS,~~EAMT~~,mBAAmB,~~EACnB~~,YAAY,~~EACZ~~,~~aAAa~~,~~EAEb~~,cAAc,~~EAGf~~,MAAM,yBAAyB,CAAC;~~AAGjC~~,MAAM,WAAW,~~YAAa~~,SAAQ,SAAS,EAAE,cAAc;~~IAC7D~~,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,~~yDAAyD~~;~~IACzD~~,OAAO,~~EAAE,aAAa,~~CAAC,~~SAAS~~,~~CAAC~~,CAAC;~~IAClC,+EAA+E~~;~~IAC/E~~,~~SAAS~~,CAAC,EAAE,~~aAAa~~,CAAC,~~WAAW~~,CAAC,CAAC;IACvC,~~mEAAmE~~;~~IACnE~~,~~MAAM~~,CAAC,EAAE,~~aAAa~~,CAAC,~~QAAQ~~,CAAC,CAAC;~~IACjC~~,~~qDAAqD~~;~~IACrD~~,~~MAAM~~,CAAC,EAAE,~~mBAAmB~~,CAAC,~~QAAQ~~,CAAC,CAAC;~~IACvC~~,~~oCAAoC~~;~~IACpC~~,~~GAAG~~,CAAC,EAAE,~~GAAG~~,CAAC,~~cAAc~~,CAAC,CAAC;~~CAC3B~~;AAED,~~eAAO,MAAM,aAAa,iLAUxB,CAAC;AAIH,~~QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,~~CAsB3D~~,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Glimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,iBAAiB,EAEjB,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAET,WAAW,EAEX,mBAAmB,EAEnB,YAAY,EAEZ,eAAe,EACf,cAAc,EACd,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,KAAK,wBAAwB,GAAG,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;AAE5E,MAAM,WAAW,YACf,SAAQ,SAAS,EACf,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,cAAc;IAChB,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,sDAAsD;IACtD,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,qGAAqG;IACrG,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,gGAAgG;IAChG,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA2C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Glimpse/Glimpse.js CHANGED Viewed

@@ -1,22 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Card, CardContent, CardHeader, defaultThemeProp, FieldValueList, MetaList, StyledFieldValueList, SummaryItem } from '@pega/cosmos-react-core';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-export const StyledGlimpse = styled(Card)(({ theme }) => {
-    return css `
-    ${StyledCardContent} {
-      border-top: solid 0.0625rem ${theme.base.palette['border-line']};
-    }
-    ${StyledFieldValueList} {
-      padding-top: calc(1.5 * ${theme.base.spacing});
-    }
-  `;
-});
-StyledGlimpse.defaultProps = defaultThemeProp;
-const Glimpse = forwardRef(({ primary, visual, secondary = [], fields = [] }, ref) => {
-    return (_jsxs(StyledGlimpse, { ref: ref, children: [_jsx(CardHeader, { children: _jsx(SummaryItem, { primary: primary, secondary: _jsx(MetaList, { items: secondary }), visual: visual }) }), !!fields.length && (_jsx(CardContent, { children: _jsx(FieldValueList, { fields: fields }) }))] }));
+import { Button, FieldValueList, Flex, InfoDialog, useI18n } from '@pega/cosmos-react-core';
+const Glimpse = forwardRef(({ heading, fields = [], target, onDismiss, href, progress, onViewProfile, ...restProps }, ref) => {
+    const t = useI18n();
+    return (_jsx(InfoDialog, { ...restProps, target: target, heading: heading, progress: progress, onDismiss: onDismiss, ref: ref, children: _jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [fields.length > 0 && _jsx(FieldValueList, { fields: fields }), (onViewProfile || href) && (_jsx(Button, { href: href, onClick: (e) => {
+                        onViewProfile?.(e);
+                        onDismiss();
+                    }, children: t('view_profile') }))] }) }));
 });
 export default Glimpse;
 //# sourceMappingURL=Glimpse.js.map

package/lib/components/Glimpse/Glimpse.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,~~EAAE~~,UAAU,~~EAA2C~~,MAAM,OAAO,CAAC;~~AAC5E~~,OAAO,MAAM,~~EAAE~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~MAAM~~,~~mBAAmB~~,~~CAAC;AAEhD~~,OAAO,~~EAEL~~,~~IAAI~~,~~EACJ~~,~~WAAW~~,~~EACX~~,~~UAAU~~,~~EACV~~,~~gBAAgB~~,~~EAChB~~,~~cAAc~~,~~EAId~~,~~QAAQ~~,~~EAER~~,~~oBAAoB~~,~~EACpB~~,~~WAAW~~,~~EACZ~~,MAAM,~~yBAAyB~~,~~CAAC;AACjC~~,~~OAAO~~,~~EAAE~~,~~iBAAiB~~,~~EAAE~~,~~MAAM~~,~~yDAAyD~~,~~CAAC;AAiB5F~~,~~MAAM~~,~~CAAC~~,~~MAAM~~,~~aAAa~~,~~GAAG~~,~~MAAM~~,~~CAAC~~,~~IAAI~~,CAAC,~~CAAC~~,~~CAAC~~,EAAE,~~KAAK,EAAE,EAAE,EAAE~~;~~IACtD~~,OAAO,~~GAAG~~,~~CAAA;MACN~~,~~iBAAiB;oCACa~~,~~KAAK~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~OAAO~~,~~CAAC~~,~~aAAa~~,~~CAAC;;;MAG/D~~,~~oBAAoB;gCACM~~,~~KAAK~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~OAAO;;GAE/C~~,~~CAAC;AACJ~~,~~CAAC~~,~~CAAC~~,~~CAAC;AAEH~~,~~aAAa~~,~~CAAC~~,~~YAAY~~,GAAG,~~gBAAgB~~,~~CAAC;AAE9C~~,~~MAAM~~,~~OAAO~~,~~GAAmD~~,~~UAAU~~,~~CACxE,CACE,~~EAAE,~~OAAO~~,EAAE,~~MAAM~~,EAAE,~~SAAS,~~GAAG,EAAE,~~EAAE~~,~~MAAM,GAAG,~~EAAE,~~EAAiC~~,~~EAC/E~~,~~GAAwB~~,~~EACxB~~,~~EAAE;IACF~~,~~OAAO~~,~~CACL~~,~~MAAC~~,~~aAAa~~,IAAC,~~GAAG~~,EAAE,~~GAAG~~,~~aACrB~~,~~KAAC~~,~~UAAU~~,~~cACT~~,~~KAAC~~,~~WAAW~~,~~IACV~~,~~OAAO~~,~~EAAE~~,~~OAAO~~,~~EAChB~~,~~SAAS~~,EAAE,~~KAAC~~,~~QAAQ~~,~~IAAC~~,~~KAAK,~~EAAE,~~SAAS~~,~~GAAI~~,~~EACzC~~,~~MAAM,~~EAAE,~~MAAM~~,~~GACd~~,~~GACS~~,~~EACZ,~~CAAC,CAAC,~~MAAM,~~CAAC,~~MAAM~~,~~IAAI~~,~~CAClB~~,~~KAAC~~,~~WAAW~~,~~cACV~~,~~KAAC~~,cAAc,~~IAAC~~,~~MAAM~~,~~EAAE~~,~~MAAM~~,~~GAAI~~,~~GACtB~~,~~CACf,IACa,CACjB,~~CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\~~nimport styled, { css } from 'styled-components';\~~n\nimport {\n BaseProps,\n ~~Card~~,\n ~~CardContent~~,\n ~~CardHeader~~,\n ~~defaultThemeProp~~,\n ~~FieldValueList~~,\n ~~FieldValueListProps,\n~~ ForwardProps,\n ~~MenuItemProps~~,\n ~~MetaList~~,\n NoChildrenProp,\n ~~StyledFieldValueList~~,\n ~~SummaryItem~~\n} from '@pega/cosmos-react-core';\~~nimport~~ { ~~StyledCardContent~~ ~~} from~~ '~~@pega/cosmos-react-core/lib/components/Card/CardContent~~';\n\nexport interface GlimpseProps extends BaseProps, NoChildrenProp {\n /** The unique id for the operator. /\n id: string;\n /* ~~The~~ ~~primary~~ ~~piece~~ of ~~item information as a string. /\n primary: MenuItemProps['primary'];\n /* Secondary info about an item. Useful~~ for ~~additional~~ ~~metadata or context~~. /\n ~~secondary?: MenuItemProps['secondary'];\n /* A visual to assist identifying an item. e.g. Avatar or Icon.~~ /\n ~~visual~~?: ~~MenuItemProps['visual']~~;\n /* The set of field values to render in the list. /\n fields?: FieldValueListProps['fields'];\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLDivElement>;\n~~}\n\nexport~~ ~~const~~ ~~StyledGlimpse~~ = ~~styled(Card)(({~~ ~~theme~~ }) => {\n ~~return~~ ~~css`\~~n ~~${StyledCardContent}~~ ~~{\n border-top:~~ ~~solid~~ ~~0.0625rem~~ ~~${theme.base.palette['border-line']};\n }\n\n ${StyledFieldValueList}~~ ~~{\n padding-top:~~ ~~calc(1~~.5 ~~${theme~~.~~base.spacing});\~~n ~~}\n~~ ~~`;\~~n}~~);\n~~\~~nStyledGlimpse.defaultProps = defaultThemeProp;\~~n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n (\n { ~~primary, visual, secondary = [],~~ fields = [] }: PropsWithoutRef<GlimpseProps>,\n ref: GlimpseProps['ref']\n ) => {\n return (\n <~~StyledGlimpse ref=~~{~~ref~~}>\n ~~<CardHeader>\n <SummaryItem~~\n ~~primary~~={~~primary~~}\n ~~secondary~~={~~<MetaList items~~={~~secondary~~} ~~/>}~~\n ~~visual~~={~~visual~~}\n ~~/>\~~n ~~</CardHeader~~>\n {!!fields.length && (\n ~~<CardContent>\~~n <~~FieldValueList fields~~={~~fields~~} ~~/>\~~n </~~CardContent~~>\n )}\n </~~StyledGlimpse~~>\n );\n }\n);\n\nexport default Glimpse;\n"]}
1	+ {"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,MAAM,EAEN,cAAc,EAEd,IAAI,EAEJ,UAAU,EAIV,OAAO,EACR,MAAM,yBAAyB,CAAC;AAsBjC,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EACE,OAAO,EACP,MAAM,GAAG,EAAE,EACX,MAAM,EACN,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,GAAG,SAAS,EACkB,EAChC,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAER,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC7C,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,EAEvD,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,CAC1B,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;wBACnB,SAAS,EAAE,CAAC;oBACd,CAAC,YAEA,CAAC,CAAC,cAAc,CAAC,GACX,CACV,IACI,GACI,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MouseEvent,\n MouseEventHandler,\n PropsWithoutRef,\n Ref\n} from 'react';\n\nimport {\n BaseProps,\n Button,\n ButtonProps,\n FieldValueList,\n FieldValueListProps,\n Flex,\n ForwardProps,\n InfoDialog,\n InfoDialogProps,\n NoChildrenProp,\n OmitStrict,\n useI18n\n} from '@pega/cosmos-react-core';\n\ntype InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;\n\nexport interface GlimpseProps\n extends BaseProps,\n OmitStrict<InfoDialogProps, 'children'>,\n NoChildrenProp {\n /** The unique id for the operator. /\n id: string;\n /* Primary, secondary and avatar for the glimpse. /\n heading?: InfoDialogSummaryHeading;\n /* The set of field values to render in the list. /\n fields?: FieldValueListProps['fields'];\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLDivElement>;\n /* Callback for click event on View profile button. Passing this will render View profile button /\n onViewProfile?: MouseEventHandler<HTMLButtonElement>;\n /* A URL location to navigate to. Passing an href will render View profile button as a link. */\n href?: ButtonProps['href'];\n}\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n fields = [],\n target,\n onDismiss,\n href,\n progress,\n onViewProfile,\n ...restProps\n }: PropsWithoutRef<GlimpseProps>,\n ref: GlimpseProps['ref']\n ) => {\n const t = useI18n();\n\n return (\n <InfoDialog\n {...restProps}\n target={target}\n heading={heading}\n progress={progress}\n onDismiss={onDismiss}\n ref={ref}\n >\n <Flex container={{ direction: 'column', gap: 2 }}>\n {fields.length > 0 && <FieldValueList fields={fields} />}\n\n {(onViewProfile \|\| href) && (\n <Button\n href={href}\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n onViewProfile?.(e);\n onDismiss();\n }}\n >\n {t('view_profile')}\n </Button>\n )}\n </Flex>\n </InfoDialog>\n );\n }\n);\n\nexport default Glimpse;\n"]}

package/lib/components/Glimpse/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { default } from './Glimpse';
-export { GlimpseProps, StyledGlimpse } from './Glimpse';
+export { GlimpseProps } from './Glimpse';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Glimpse/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,~~aAAa,EAAE,~~MAAM,WAAW,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/Glimpse/index.js CHANGED Viewed

@@ -1,3 +1,2 @@
 export { default } from './Glimpse';
-export { StyledGlimpse } from './Glimpse';
 //# sourceMappingURL=index.js.map

package/lib/components/Glimpse/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC~~;AACpC,OAAO,EAAgB,aAAa,EAAE,MAAM,WAAW,CAAC~~","sourcesContent":["export { default } from './Glimpse';\nexport { GlimpseProps, ~~StyledGlimpse~~ } from './Glimpse';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Glimpse';\nexport { GlimpseProps } from './Glimpse';\n"]}

package/lib/components/IntelligentGuidance/IntelligentGuidance.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,~~EAQb~~,MAAM,yBAAyB,CAAC;AAQjC,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;~~AAIxE~~,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,GAAG,YAAY,~~CAgHnF~~,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
1	+ {"version":3,"file":"IntelligentGuidance.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAQjC,OAAO,KAAK,wBAAwB,MAAM,6BAA6B,CAAC;AAExE,QAAA,MAAM,mBAAmB,EAAE,iBAAiB,CAAC,wBAAwB,GAAG,YAAY,CA6GnF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}