@pega/cosmos-react-work 4.2.6 → 4.3.1
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC, ReactNode, Ref } from 'react';
|
|
2
|
-
import { ForwardProps, TestIdProp } from '@pega/cosmos-react-core';
|
|
2
|
+
import { ForwardProps, TestIdProp, AdditionalInfoProps } from '@pega/cosmos-react-core';
|
|
3
3
|
export interface DetailsProps extends TestIdProp {
|
|
4
4
|
highlightedData?: ReactNode[];
|
|
5
5
|
children?: ReactNode;
|
|
@@ -29,6 +29,11 @@ export interface DetailsProps extends TestIdProp {
|
|
|
29
29
|
* @default false
|
|
30
30
|
*/
|
|
31
31
|
valueComparison?: boolean;
|
|
32
|
+
/** Pass a heading and content to show additional information on the list. */
|
|
33
|
+
additionalInfo?: {
|
|
34
|
+
heading: AdditionalInfoProps['heading'];
|
|
35
|
+
content: AdditionalInfoProps['children'];
|
|
36
|
+
};
|
|
32
37
|
ref?: Ref<HTMLDListElement>;
|
|
33
38
|
}
|
|
34
39
|
declare const _default: FC<DetailsProps & ForwardProps> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EAEF,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,
|
|
1
|
+
{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EAEF,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAML,YAAY,EASZ,UAAU,EAGV,mBAAmB,EACpB,MAAM,yBAAyB,CAAC;AAajC,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6EAA6E;IAC7E,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;;;;AAqND,wBAAuD"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';
|
|
3
3
|
import { remToPx } from 'polished';
|
|
4
|
-
import { Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useChToPxConversionFactor, useI18n, HTML, useTestIds, withTestIds } from '@pega/cosmos-react-core';
|
|
4
|
+
import { AdditionalInfo, Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useChToPxConversionFactor, useI18n, HTML, useTestIds, withTestIds } from '@pega/cosmos-react-core';
|
|
5
5
|
import { getDetailsTestIds } from './Details.test-ids';
|
|
6
6
|
import DetailsContext from './DetailsContext';
|
|
7
7
|
import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp, StyledDetailDescription } from './Details.styles';
|
|
8
|
-
const Details = forwardRef(function Details({ testId, highlightedData, children, name, description, columnCount = 1, nested = false, asFlex = false, valueComparison = false, collapsible = false }, ref) {
|
|
8
|
+
const Details = forwardRef(function Details({ testId, highlightedData, children, name, description, columnCount = 1, nested = false, asFlex = false, valueComparison = false, collapsible = false, additionalInfo: additionalInfoProp }, ref) {
|
|
9
9
|
const { longestLabelLength, mobileView: inMobileView, depth, ...context } = useContext(DetailsContext);
|
|
10
10
|
const { base: { 'content-width': { sm: smContentWidth } } } = useTheme();
|
|
11
11
|
const isSmallOrAbove = useBreakpoint('sm');
|
|
@@ -65,6 +65,9 @@ const Details = forwardRef(function Details({ testId, highlightedData, children,
|
|
|
65
65
|
const nameText = useMemo(() => {
|
|
66
66
|
return _jsx(Text, { variant: `h${Math.min(headingDepth, 6)}`, children: name });
|
|
67
67
|
}, [name, headingDepth]);
|
|
68
|
+
const additionalInfo = useMemo(() => {
|
|
69
|
+
return additionalInfoProp ? (_jsx(AdditionalInfo, { heading: additionalInfoProp.heading, children: additionalInfoProp.content })) : undefined;
|
|
70
|
+
}, [additionalInfoProp?.heading, additionalInfoProp?.content]);
|
|
68
71
|
const details = useMemo(() => {
|
|
69
72
|
return (_jsxs(_Fragment, { children: [highlightedData && (_jsxs(_Fragment, { children: [_jsx(Flex, { "data-testid": testIds.highlightedData, as: StyledHighlightedDetailList, forwardedAs: nested ? 'div' : 'dl', container: { wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }, children: highlightedData.map((child, i) => (
|
|
70
73
|
// eslint-disable-next-line react/no-array-index-key
|
|
@@ -84,9 +87,9 @@ const Details = forwardRef(function Details({ testId, highlightedData, children,
|
|
|
84
87
|
]);
|
|
85
88
|
if (!name && !children && !highlightedData && !description)
|
|
86
89
|
return null;
|
|
87
|
-
return (_jsx(DetailsContext.Provider, { value: contextValue, children: _jsxs(StyledDetails, { "data-testid": testIds.root, children: [name && (_jsx(StyledFieldValueGroupLabel, { "data-testid": testIds.heading, children: collapsible ? (_jsx(Button, { type: 'button', variant: 'text', onClick: () => {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
+
return (_jsx(DetailsContext.Provider, { value: contextValue, children: _jsxs(StyledDetails, { "data-testid": testIds.root, children: [name && (_jsx(StyledFieldValueGroupLabel, { "data-testid": testIds.heading, children: _jsx(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: 'span', children: collapsible ? (_jsxs(_Fragment, { children: [_jsx(Button, { type: 'button', variant: 'text', onClick: () => {
|
|
91
|
+
setOpen(cur => !cur);
|
|
92
|
+
}, "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] }) }), additionalInfo] })) : (_jsxs(_Fragment, { children: [nameText, additionalInfo] })) }) })), description && (_jsx(StyledDetailDescription, { "data-testid": testIds.description, children: _jsx(HTML, { as: 'p', content: description }) })), collapsible ? (_jsx(ExpandCollapse, { "data-testid": testIds.expandCollapse, collapsed: !open, children: details })) : (details)] }) }));
|
|
90
93
|
});
|
|
91
94
|
export default withTestIds(Details, getDetailsTestIds);
|
|
92
95
|
//# sourceMappingURL=Details.js.map
|
|
@@ -1 +1 @@
|
|
|
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,EAEP,IAAI,EAEJ,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,0BAA0B,EAC1B,aAAa,EACb,gBAAgB,EAChB,2BAA2B,EAC3B,WAAW,EACX,uBAAuB,EACxB,MAAM,kBAAkB,CAAC;AAkC1B,MAAM,OAAO,GAAoC,UAAU,CAAC,SAAS,OAAO,CAC1E,EACE,MAAM,EACN,eAAe,EACf,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,WAAW,GAAG,CAAC,EACf,MAAM,GAAG,KAAK,EACd,MAAM,GAAG,KAAK,EACd,eAAe,GAAG,KAAK,EACvB,WAAW,GAAG,KAAK,EACpB,EACD,GAAG;IAEH,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;IACpB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAEtD,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,gFAAgF;IAChF,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,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC,EAAgB,YAAG,IAAI,GAAQ,CAAC;IACrF,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,mBACU,OAAO,CAAC,eAAe,EACpC,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,mBACF,OAAO,CAAC,IAAI,EACzB,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;QACR,OAAO;KACR,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,eAAe,IAAI,CAAC,WAAW;QAAE,OAAO,IAAI,CAAC;IAExE,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC1C,MAAC,aAAa,mBAAc,OAAO,CAAC,IAAI,aACrC,IAAI,IAAI,CACP,KAAC,0BAA0B,mBAAc,OAAO,CAAC,OAAO,YACrD,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,IAAI,CACd,KAAC,uBAAuB,mBAAc,OAAO,CAAC,WAAW,YACvD,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,GAAI,GACb,CAC3B,EAEA,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,cAAc,mBAAc,OAAO,CAAC,cAAc,EAAE,SAAS,EAAE,CAAC,IAAI,YAClE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,IACa,GACQ,CAC3B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,OAAO,EAAE,iBAAiB,CAAC,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 HeadingTag,\n HTML,\n TestIdProp,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n StyledFieldValueGroupLabel,\n StyledDetails,\n StyledDetailList,\n StyledHighlightedDetailList,\n flexGapProp,\n StyledDetailDescription\n} from './Details.styles';\n\nexport interface DetailsProps extends TestIdProp {\n highlightedData?: ReactNode[];\n children?: ReactNode;\n /** Text used as heading of list */\n name?: string;\n /** Copy placed in paragraph below the name */\n description?: 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(function Details(\n {\n testId,\n highlightedData,\n children,\n name,\n description,\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 const testIds = useTestIds(testId, getDetailsTestIds);\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 // Mount resize observer to update flex context mobile view & run initial check.\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 <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n }, [name, headingDepth]);\n\n const details = useMemo(() => {\n return (\n <>\n {highlightedData && (\n <>\n <Flex\n data-testid={testIds.highlightedData}\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 data-testid={testIds.data}\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 testIds\n ]);\n\n if (!name && !children && !highlightedData && !description) return null;\n\n return (\n <DetailsContext.Provider value={contextValue}>\n <StyledDetails data-testid={testIds.root}>\n {name && (\n <StyledFieldValueGroupLabel data-testid={testIds.heading}>\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 {description && (\n <StyledDetailDescription data-testid={testIds.description}>\n <HTML as='p' content={description} />\n </StyledDetailDescription>\n )}\n\n {collapsible ? (\n <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n {details}\n </ExpandCollapse>\n ) : (\n details\n )}\n </StyledDetails>\n </DetailsContext.Provider>\n );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}
|
|
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 AdditionalInfo,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useTheme,\n ForwardProps,\n ExpandCollapse,\n Button,\n Flex,\n Icon,\n useChToPxConversionFactor,\n useI18n,\n HeadingTag,\n HTML,\n TestIdProp,\n useTestIds,\n withTestIds,\n AdditionalInfoProps\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n StyledFieldValueGroupLabel,\n StyledDetails,\n StyledDetailList,\n StyledHighlightedDetailList,\n flexGapProp,\n StyledDetailDescription\n} from './Details.styles';\n\nexport interface DetailsProps extends TestIdProp {\n highlightedData?: ReactNode[];\n children?: ReactNode;\n /** Text used as heading of list */\n name?: string;\n /** Copy placed in paragraph below the name */\n description?: 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 /** Pass a heading and content to show additional information on the list. */\n additionalInfo?: {\n heading: AdditionalInfoProps['heading'];\n content: AdditionalInfoProps['children'];\n };\n ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(function Details(\n {\n testId,\n highlightedData,\n children,\n name,\n description,\n columnCount = 1,\n nested = false,\n asFlex = false,\n valueComparison = false,\n collapsible = false,\n additionalInfo: additionalInfoProp\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 const testIds = useTestIds(testId, getDetailsTestIds);\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 // Mount resize observer to update flex context mobile view & run initial check.\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 <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n }, [name, headingDepth]);\n\n const additionalInfo = useMemo(() => {\n return additionalInfoProp ? (\n <AdditionalInfo heading={additionalInfoProp.heading}>\n {additionalInfoProp.content}\n </AdditionalInfo>\n ) : undefined;\n }, [additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n const details = useMemo(() => {\n return (\n <>\n {highlightedData && (\n <>\n <Flex\n data-testid={testIds.highlightedData}\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 data-testid={testIds.data}\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 testIds\n ]);\n\n if (!name && !children && !highlightedData && !description) return null;\n\n return (\n <DetailsContext.Provider value={contextValue}>\n <StyledDetails data-testid={testIds.root}>\n {name && (\n <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n {collapsible ? (\n <>\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 {additionalInfo}\n </>\n ) : (\n <>\n {nameText}\n {additionalInfo}\n </>\n )}\n </Flex>\n </StyledFieldValueGroupLabel>\n )}\n\n {description && (\n <StyledDetailDescription data-testid={testIds.description}>\n <HTML as='p' content={description} />\n </StyledDetailDescription>\n )}\n\n {collapsible ? (\n <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n {details}\n </ExpandCollapse>\n ) : (\n details\n )}\n </StyledDetails>\n </DetailsContext.Provider>\n );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.1",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "4.
|
|
23
|
+
"@pega/cosmos-react-core": "4.3.1",
|
|
24
24
|
"@types/react": "^16.14.43 || ^17.0.62",
|
|
25
25
|
"@types/react-dom": "^16.9.19 || ^17.0.20",
|
|
26
26
|
"@types/styled-components": "^5.1.26",
|