@pega/cosmos-react-work 8.7.2 → 8.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Details/Details.d.ts.map +1 -1
- package/lib/components/Details/Details.js +1 -1
- package/lib/components/Details/Details.js.map +1 -1
- package/lib/components/Details/DetailsList.d.ts.map +1 -1
- package/lib/components/Details/DetailsList.js +1 -1
- package/lib/components/Details/DetailsList.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAmB7D,OAAO,KAAK,EAAE,mBAAmB,EAAc,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAgB3F,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,EACH;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,CAAC,EAAE,KAAK,CAAC;QACV,CAAC,CAAC,EAAE,KAAK,CAAC;KACX,GACD;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,CAAC,EAAE,KAAK,CAAC;KACX,GACD;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;KACd,CAAC;IACN,6BAA6B;IAC7B,WAAW,CAAC,EAAE,YAAY,GAAG,YAAY,CAAC;IAC1C,uCAAuC;IACvC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,GAAG,CACE;IACE,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,gBAAgB,CAAC,EAAE,KAAK,CAAC;CAC1B,CACJ,CAAC;;;;
|
|
1
|
+
{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAmB7D,OAAO,KAAK,EAAE,mBAAmB,EAAc,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAgB3F,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG;IACtC;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,EACH;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,CAAC,EAAE,KAAK,CAAC;QACV,CAAC,CAAC,EAAE,KAAK,CAAC;KACX,GACD;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,CAAC,EAAE,KAAK,CAAC;KACX,GACD;QACE,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;QACb,CAAC,EAAE,SAAS,CAAC;KACd,CAAC;IACN,6BAA6B;IAC7B,WAAW,CAAC,EAAE,YAAY,GAAG,YAAY,CAAC;IAC1C,uCAAuC;IACvC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B,GAAG,CACE;IACE,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,cAAc,CAAC,EAAE;QACf,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GACD;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,gBAAgB,CAAC,EAAE,KAAK,CAAC;CAC1B,CACJ,CAAC;;;;AAkOJ,wBAAuD"}
|
|
@@ -84,7 +84,7 @@ const Details = forwardRef(function Details({ testId, highlightedData, columns,
|
|
|
84
84
|
return name && additionalInfoProp ? (_jsx(AdditionalInfo, { heading: additionalInfoProp.heading, contextualLabel: name, children: additionalInfoProp.content })) : undefined;
|
|
85
85
|
}, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);
|
|
86
86
|
const content = useMemo(() => {
|
|
87
|
-
return (_jsxs(_Fragment, { children: [description && (_jsx(StyledDetailDescription, { "data-testid": testIds.description, children: _jsx(HTML, { as: 'p', content: description }) })), highlightedData && (_jsxs(_Fragment, { children: [_jsx(Flex, { "data-testid": testIds.highlightedData, as: StyledHighlightedDetailList, container: { wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }, children: highlightedData.map((child, i) => (
|
|
87
|
+
return (_jsxs(_Fragment, { children: [description && (_jsx(StyledDetailDescription, { "data-testid": testIds.description, children: _jsx(HTML, { as: 'p', content: description }) })), highlightedData && (_jsxs(_Fragment, { children: [_jsx(Flex, { "data-testid": testIds.highlightedData, as: StyledHighlightedDetailList, container: { wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }, role: 'none', children: highlightedData.map((child, i) => (
|
|
88
88
|
// eslint-disable-next-line react/no-array-index-key
|
|
89
89
|
_jsx(Fragment, { children: child }, i))) }), _jsx("hr", {})] })), _jsxs(Flex, { as: StyledDetailColumns, container: {
|
|
90
90
|
direction: 'row',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n AdditionalInfo,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useTheme,\n ExpandCollapse,\n Button,\n Flex,\n Icon,\n useChToPxConversionFactor,\n useI18n,\n HTML,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { AdditionalInfoProps, HeadingTag, TestIdProp } from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n StyledFieldValueGroupLabel,\n StyledDetails,\n StyledHighlightedDetailList,\n StyledDetailDescription,\n StyledDetailColumns,\n columnGapMultiplier,\n StyledDetailColumn\n} from './Details.styles';\n\ntype ColumnCount = 1 | 2 | 3;\n\nexport type DetailsProps = TestIdProp & {\n /**\n * FieldValueItems to display as highlighted data above children\n */\n highlightedData?: ReactNode[];\n /** Copy placed in paragraph below the name */\n description?: string;\n /**\n * Template children separated into 1-3 columns {a, b, c}\n */\n columns:\n | {\n a: ReactNode;\n b?: never;\n c?: never;\n }\n | {\n a: ReactNode;\n b: ReactNode;\n c?: never;\n }\n | {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n };\n /** Arrangement of columns */\n arrangement?: 'narrowWide' | 'wideNarrow';\n /** Style variant applied to element */\n variant?: 'field-group';\n ref?: Ref<HTMLDivElement>;\n} & (\n | {\n /** Text used as heading of list */\n name: string;\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 /**\n * Whether the items children can be collapsed (only applies if name is provided)\n * @default false\n */\n collapsible?: boolean;\n defaultCollapsed?: boolean;\n }\n | {\n name?: undefined;\n additionalInfo?: never;\n collapsible?: never;\n defaultCollapsed?: never;\n }\n );\n\nconst oneRemInPx = parseInt(remToPx(1), 10);\n\nconst Details = forwardRef(function Details(\n {\n testId,\n highlightedData,\n columns,\n name,\n description,\n arrangement,\n variant,\n collapsible = false,\n defaultCollapsed = false,\n additionalInfo: additionalInfoProp\n }: PropsWithoutRef<DetailsProps>,\n ref: DetailsProps['ref']\n) {\n const testIds = useTestIds(testId, getDetailsTestIds);\n const t = useI18n();\n const { longestLabelLength, depth, ...context } = useContext(DetailsContext);\n\n const containerRef = useConsolidatedRef(ref);\n const [open, setOpen] = useState(!defaultCollapsed);\n\n // Observer and state for mobile.\n const columnCount = (() => {\n let count: ColumnCount = 1;\n\n if (columns.b) count = 2;\n if (columns.c) count = 3;\n\n return count;\n })();\n const {\n base: {\n 'content-width': { sm: smContentWidth }\n }\n } = useTheme();\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n const fitsThreeColumns = useBreakpoint('xl', {\n breakpointRef: containerRef,\n themeProp: 'content-width'\n });\n const fitsTwoColumns = useBreakpoint('md', {\n breakpointRef: containerRef,\n themeProp: 'content-width'\n });\n const [contentMobileView, setContentMobileView] = useState(false);\n\n const applyColumnCount = (() => {\n if (columnCount !== 1) {\n if (columnCount === 3 && fitsThreeColumns) {\n return 3;\n }\n if (fitsTwoColumns) {\n return 2;\n }\n return 1;\n }\n\n return columnCount;\n })();\n\n useEffect(() => {\n const checkBreakpoint = (elementWidth: number) => {\n const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;\n const colGapPxAllowance = oneRemInPx * (0.5 * columnGapMultiplier) * (columnCount - 1);\n const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n setContentMobileView(elementWidth < mobileViewBreakpoint);\n };\n const resizeObserver = new ResizeObserver(entries => {\n const containerPxWidth = entries[0].contentRect.width;\n checkBreakpoint(containerPxWidth);\n });\n\n if (containerRef.current) {\n checkBreakpoint(containerRef.current.offsetWidth);\n resizeObserver.observe(containerRef.current);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [columnCount]);\n\n // Context\n const headingDepth = depth ? Math.max(depth, 2) : 2;\n const asFieldGroup = variant === 'field-group' && !!name && !description && !highlightedData;\n\n const contextValue = useMemo(() => {\n return {\n ...context,\n mobileView: contentMobileView,\n depth: name ? headingDepth + 1 : headingDepth,\n inFieldGroup: context.inFieldGroup ? true : asFieldGroup,\n longestLabelLength\n };\n }, [name, headingDepth, longestLabelLength, contentMobileView, asFieldGroup, context]);\n\n // Memoized Elements\n const applyVariant = asFieldGroup ? 'field-group' : undefined;\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 name && additionalInfoProp ? (\n <AdditionalInfo heading={additionalInfoProp.heading} contextualLabel={name}>\n {additionalInfoProp.content}\n </AdditionalInfo>\n ) : undefined;\n }, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n const content = useMemo(() => {\n return (\n <>\n {description && (\n <StyledDetailDescription data-testid={testIds.description}>\n <HTML as='p' content={description} />\n </StyledDetailDescription>\n )}\n\n {highlightedData && (\n <>\n <Flex\n data-testid={testIds.highlightedData}\n as={StyledHighlightedDetailList}\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 <Flex\n as={StyledDetailColumns}\n container={{\n direction: 'row',\n colGap: columnGapMultiplier\n }}\n data-testid={testIds.data}\n arrangement={arrangement}\n variant={applyVariant}\n columnCount={applyColumnCount}\n >\n <StyledDetailColumn>{columns.a}</StyledDetailColumn>\n {columns.b && <StyledDetailColumn>{columns.b}</StyledDetailColumn>}\n {columns.c && <StyledDetailColumn>{columns.c}</StyledDetailColumn>}\n </Flex>\n </>\n );\n }, [\n highlightedData,\n columnCount,\n columns.a,\n columns.b,\n columns.c,\n arrangement,\n testIds,\n fitsTwoColumns,\n fitsThreeColumns,\n description\n ]);\n\n return (\n <DetailsContext.Provider value={contextValue}>\n <StyledDetails\n data-testid={testIds.root}\n ref={containerRef}\n variant={applyVariant}\n columnCount={applyColumnCount}\n >\n {name && (\n <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {collapsible ? (\n <>\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open}\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 {collapsible ? (\n <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n {content}\n </ExpandCollapse>\n ) : (\n content\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 { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';\nimport type { PropsWithoutRef, ReactNode, Ref } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n AdditionalInfo,\n Text,\n useBreakpoint,\n useConsolidatedRef,\n useTheme,\n ExpandCollapse,\n Button,\n Flex,\n Icon,\n useChToPxConversionFactor,\n useI18n,\n HTML,\n useTestIds,\n withTestIds\n} from '@pega/cosmos-react-core';\nimport type { AdditionalInfoProps, HeadingTag, TestIdProp } from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n StyledFieldValueGroupLabel,\n StyledDetails,\n StyledHighlightedDetailList,\n StyledDetailDescription,\n StyledDetailColumns,\n columnGapMultiplier,\n StyledDetailColumn\n} from './Details.styles';\n\ntype ColumnCount = 1 | 2 | 3;\n\nexport type DetailsProps = TestIdProp & {\n /**\n * FieldValueItems to display as highlighted data above children\n */\n highlightedData?: ReactNode[];\n /** Copy placed in paragraph below the name */\n description?: string;\n /**\n * Template children separated into 1-3 columns {a, b, c}\n */\n columns:\n | {\n a: ReactNode;\n b?: never;\n c?: never;\n }\n | {\n a: ReactNode;\n b: ReactNode;\n c?: never;\n }\n | {\n a: ReactNode;\n b: ReactNode;\n c: ReactNode;\n };\n /** Arrangement of columns */\n arrangement?: 'narrowWide' | 'wideNarrow';\n /** Style variant applied to element */\n variant?: 'field-group';\n ref?: Ref<HTMLDivElement>;\n} & (\n | {\n /** Text used as heading of list */\n name: string;\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 /**\n * Whether the items children can be collapsed (only applies if name is provided)\n * @default false\n */\n collapsible?: boolean;\n defaultCollapsed?: boolean;\n }\n | {\n name?: undefined;\n additionalInfo?: never;\n collapsible?: never;\n defaultCollapsed?: never;\n }\n );\n\nconst oneRemInPx = parseInt(remToPx(1), 10);\n\nconst Details = forwardRef(function Details(\n {\n testId,\n highlightedData,\n columns,\n name,\n description,\n arrangement,\n variant,\n collapsible = false,\n defaultCollapsed = false,\n additionalInfo: additionalInfoProp\n }: PropsWithoutRef<DetailsProps>,\n ref: DetailsProps['ref']\n) {\n const testIds = useTestIds(testId, getDetailsTestIds);\n const t = useI18n();\n const { longestLabelLength, depth, ...context } = useContext(DetailsContext);\n\n const containerRef = useConsolidatedRef(ref);\n const [open, setOpen] = useState(!defaultCollapsed);\n\n // Observer and state for mobile.\n const columnCount = (() => {\n let count: ColumnCount = 1;\n\n if (columns.b) count = 2;\n if (columns.c) count = 3;\n\n return count;\n })();\n const {\n base: {\n 'content-width': { sm: smContentWidth }\n }\n } = useTheme();\n const chToPxConversionFactor = useChToPxConversionFactor();\n\n const fitsThreeColumns = useBreakpoint('xl', {\n breakpointRef: containerRef,\n themeProp: 'content-width'\n });\n const fitsTwoColumns = useBreakpoint('md', {\n breakpointRef: containerRef,\n themeProp: 'content-width'\n });\n const [contentMobileView, setContentMobileView] = useState(false);\n\n const applyColumnCount = (() => {\n if (columnCount !== 1) {\n if (columnCount === 3 && fitsThreeColumns) {\n return 3;\n }\n if (fitsTwoColumns) {\n return 2;\n }\n return 1;\n }\n\n return columnCount;\n })();\n\n useEffect(() => {\n const checkBreakpoint = (elementWidth: number) => {\n const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;\n const colGapPxAllowance = oneRemInPx * (0.5 * columnGapMultiplier) * (columnCount - 1);\n const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n setContentMobileView(elementWidth < mobileViewBreakpoint);\n };\n const resizeObserver = new ResizeObserver(entries => {\n const containerPxWidth = entries[0].contentRect.width;\n checkBreakpoint(containerPxWidth);\n });\n\n if (containerRef.current) {\n checkBreakpoint(containerRef.current.offsetWidth);\n resizeObserver.observe(containerRef.current);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [columnCount]);\n\n // Context\n const headingDepth = depth ? Math.max(depth, 2) : 2;\n const asFieldGroup = variant === 'field-group' && !!name && !description && !highlightedData;\n\n const contextValue = useMemo(() => {\n return {\n ...context,\n mobileView: contentMobileView,\n depth: name ? headingDepth + 1 : headingDepth,\n inFieldGroup: context.inFieldGroup ? true : asFieldGroup,\n longestLabelLength\n };\n }, [name, headingDepth, longestLabelLength, contentMobileView, asFieldGroup, context]);\n\n // Memoized Elements\n const applyVariant = asFieldGroup ? 'field-group' : undefined;\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 name && additionalInfoProp ? (\n <AdditionalInfo heading={additionalInfoProp.heading} contextualLabel={name}>\n {additionalInfoProp.content}\n </AdditionalInfo>\n ) : undefined;\n }, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n const content = useMemo(() => {\n return (\n <>\n {description && (\n <StyledDetailDescription data-testid={testIds.description}>\n <HTML as='p' content={description} />\n </StyledDetailDescription>\n )}\n\n {highlightedData && (\n <>\n <Flex\n data-testid={testIds.highlightedData}\n as={StyledHighlightedDetailList}\n container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n role='none'\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 <Flex\n as={StyledDetailColumns}\n container={{\n direction: 'row',\n colGap: columnGapMultiplier\n }}\n data-testid={testIds.data}\n arrangement={arrangement}\n variant={applyVariant}\n columnCount={applyColumnCount}\n >\n <StyledDetailColumn>{columns.a}</StyledDetailColumn>\n {columns.b && <StyledDetailColumn>{columns.b}</StyledDetailColumn>}\n {columns.c && <StyledDetailColumn>{columns.c}</StyledDetailColumn>}\n </Flex>\n </>\n );\n }, [\n highlightedData,\n columnCount,\n columns.a,\n columns.b,\n columns.c,\n arrangement,\n testIds,\n fitsTwoColumns,\n fitsThreeColumns,\n description\n ]);\n\n return (\n <DetailsContext.Provider value={contextValue}>\n <StyledDetails\n data-testid={testIds.root}\n ref={containerRef}\n variant={applyVariant}\n columnCount={applyColumnCount}\n >\n {name && (\n <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {collapsible ? (\n <>\n <Button\n type='button'\n variant='text'\n onClick={() => {\n setOpen(cur => !cur);\n }}\n aria-expanded={open}\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 {collapsible ? (\n <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n {content}\n </ExpandCollapse>\n ) : (\n content\n )}\n </StyledDetails>\n </DetailsContext.Provider>\n );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailsList.d.ts","sourceRoot":"","sources":["../../../src/components/Details/DetailsList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,GAAG,EAAE,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EACV,uBAAuB,EACvB,cAAc,EAEd,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAC3C,IAAI,EACJ,cAAc,GAAG;IACf,6BAA6B;IAC7B,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B,CACF,CAAC;AAEF,QAAA,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"DetailsList.d.ts","sourceRoot":"","sources":["../../../src/components/Details/DetailsList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,GAAG,EAAE,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EACV,uBAAuB,EACvB,cAAc,EAEd,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAC3C,IAAI,EACJ,cAAc,GAAG;IACf,6BAA6B;IAC7B,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B,CACF,CAAC;AAEF,QAAA,MAAM,WAAW,4HA0DhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -18,7 +18,7 @@ const DetailsList = forwardRef(function DetailsList({ items, valueComparison = f
|
|
|
18
18
|
});
|
|
19
19
|
const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));
|
|
20
20
|
const applyMobileView = inMobileView || !isSmallOrAbove || !isSmContentWidthOrAbove;
|
|
21
|
-
return items.length > 0 ? (_jsx(StyledDetailsList, { ref: containerRef, labelLength: labelLength, stacked: applyMobileView, variant: valueComparison && !applyMobileView ? 'value-comparison' : undefined, narrow: !isMdContentWidthOrAbove, children: items.map(({ id, name, value, variant: fieldVariant, testId }) => {
|
|
21
|
+
return items.length > 0 ? (_jsx(StyledDetailsList, { ref: containerRef, labelLength: labelLength, stacked: applyMobileView, variant: valueComparison && !applyMobileView ? 'value-comparison' : undefined, narrow: !isMdContentWidthOrAbove, role: 'none', children: items.map(({ id, name, value, variant: fieldVariant, testId }) => {
|
|
22
22
|
const isStacked = applyMobileView ||
|
|
23
23
|
fieldVariant === 'stacked' ||
|
|
24
24
|
(fieldLabelPosition === 'stacked' && !valueComparison);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailsList.js","sourceRoot":"","sources":["../../../src/components/Details/DetailsList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,EACL,cAAc,EACd,IAAI,EACJ,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAQjC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAejF,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,EAAE,EAAE,GAAG;IAC1D,MAAM,EACJ,UAAU,EAAE,EACV,OAAO,EAAE,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC/C,EACF,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IACpF,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,YAAY;QAC3B,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IACH,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,YAAY;QAC3B,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,kBAAkB,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IACzE,MAAM,eAAe,GAAG,YAAY,IAAI,CAAC,cAAc,IAAI,CAAC,uBAAuB,CAAC;IAEpF,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,iBAAiB,IAChB,GAAG,EAAE,YAAY,EACjB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,eAAe,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EAC7E,MAAM,EAAE,CAAC,uBAAuB,
|
|
1
|
+
{"version":3,"file":"DetailsList.js","sourceRoot":"","sources":["../../../src/components/Details/DetailsList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,EACL,cAAc,EACd,IAAI,EACJ,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAQjC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAejF,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,EAAE,EAAE,GAAG;IAC1D,MAAM,EACJ,UAAU,EAAE,EACV,OAAO,EAAE,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC/C,EACF,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IACpF,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,YAAY;QAC3B,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IACH,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;QAClD,aAAa,EAAE,YAAY;QAC3B,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,kBAAkB,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;IACzE,MAAM,eAAe,GAAG,YAAY,IAAI,CAAC,cAAc,IAAI,CAAC,uBAAuB,CAAC;IAEpF,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,iBAAiB,IAChB,GAAG,EAAE,YAAY,EACjB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,eAAe,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EAC7E,MAAM,EAAE,CAAC,uBAAuB,EAChC,IAAI,EAAC,MAAM,YAEV,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,EAAE;YAChE,MAAM,SAAS,GACb,eAAe;gBACf,YAAY,KAAK,SAAS;gBAC1B,CAAC,kBAAkB,KAAK,SAAS,IAAI,CAAC,eAAe,CAAC,CAAC;YAEzD,MAAM,IAAI,GAAG,CACX,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,IACpC,EAAE,IAAI,IAAI,CACf,CACH,CAAC;YAEF,OAAO,SAAS,IAAI,eAAe,CAAC,CAAC,CAAC,CACpC,IAAI,CACL,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,EAAE,EAAE,0BAA0B,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,qBAAqB,EAAE,YAC7E,IAAI,GACA,CACR,CAAC;QACJ,CAAC,CAAC,GACgB,CACrB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, useContext } from 'react';\nimport type { PropsWithRef, Ref } from 'react';\n\nimport {\n FieldValueItem,\n Grid,\n useBreakpoint,\n useConsolidatedRef,\n useTheme\n} from '@pega/cosmos-react-core';\nimport type {\n FieldValueListItemProps,\n NoChildrenProp,\n RefElement,\n WithAttributes\n} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport { StyledDetailsList, StyledInlineFieldValueItem } from './Details.styles';\n\nexport type DetailsListProps = WithAttributes<\n 'dl',\n NoChildrenProp & {\n /** Field value list items */\n items: FieldValueListItemProps[];\n /** Whether to apply `value-comparison` styles to list items\n * @default false\n */\n valueComparison?: boolean;\n ref?: Ref<HTMLDListElement>;\n }\n>;\n\nconst DetailsList = forwardRef<RefElement<DetailsListProps>, PropsWithRef<DetailsListProps>>(\n function DetailsList({ items, valueComparison = false }, ref) {\n const {\n components: {\n details: { 'field-label': fieldLabelPosition }\n }\n } = useTheme();\n const { longestLabelLength, mobileView: inMobileView } = useContext(DetailsContext);\n const containerRef = useConsolidatedRef(ref);\n const isSmallOrAbove = useBreakpoint('sm');\n const isSmContentWidthOrAbove = useBreakpoint('sm', {\n breakpointRef: containerRef,\n themeProp: 'content-width'\n });\n const isMdContentWidthOrAbove = useBreakpoint('md', {\n breakpointRef: containerRef,\n themeProp: 'content-width'\n });\n\n const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n const applyMobileView = inMobileView || !isSmallOrAbove || !isSmContentWidthOrAbove;\n\n return items.length > 0 ? (\n <StyledDetailsList\n ref={containerRef}\n labelLength={labelLength}\n stacked={applyMobileView}\n variant={valueComparison && !applyMobileView ? 'value-comparison' : undefined}\n narrow={!isMdContentWidthOrAbove}\n role='none'\n >\n {items.map(({ id, name, value, variant: fieldVariant, testId }) => {\n const isStacked =\n applyMobileView ||\n fieldVariant === 'stacked' ||\n (fieldLabelPosition === 'stacked' && !valueComparison);\n\n const item = (\n <FieldValueItem\n testId={testId}\n name={name}\n value={value}\n variant={isStacked ? 'stacked' : 'inline'}\n key={id ?? name}\n />\n );\n\n return isStacked || valueComparison ? (\n item\n ) : (\n <Grid as={StyledInlineFieldValueItem} container={{ cols: '16ch minmax(0, 1fr)' }}>\n {item}\n </Grid>\n );\n })}\n </StyledDetailsList>\n ) : null;\n }\n);\n\nexport default DetailsList;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "8.7.
|
|
3
|
+
"version": "8.7.4",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"author": "Pegasystems",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"build": "tsc -b tsconfig.build.json"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@pega/cosmos-react-core": "8.7.
|
|
18
|
-
"@pega/cosmos-react-rte": "8.7.
|
|
17
|
+
"@pega/cosmos-react-core": "8.7.4",
|
|
18
|
+
"@pega/cosmos-react-rte": "8.7.4",
|
|
19
19
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
20
20
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|
|
21
21
|
"@types/styled-components": "^5.1.26",
|