@pega/cosmos-react-work 3.0.0-dev.9.1 → 3.0.0-rc.10

package/lib/components/CaseView/index.d.ts

@@ -1,6 +1,9 @@
 export { default } from './CaseView';
-export { CaseViewProps } from './CaseView';
-export { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView.styles';
+export { CaseViewProps } from './CaseView.types';
+export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
 export { default as MobileCaseView } from './MobileCaseView';
 export { MobileCaseViewProps } from './MobileCaseView';
+export { default as CaseSummary } from './CaseSummary';
+export { default as CaseSummaryFields } from './CaseSummaryFields';
+export { default as CaseHeader } from './CaseHeader';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/CaseView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/CaseView/index.js

@@ -1,4 +1,7 @@
 export { default } from './CaseView';
-export { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView.styles';
+export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
 export { default as MobileCaseView } from './MobileCaseView';
+export { default as CaseSummary } from './CaseSummary';
+export { default as CaseSummaryFields } from './CaseSummaryFields';
+export { default as CaseHeader } from './CaseHeader';
 //# sourceMappingURL=index.js.map

package/lib/components/CaseView/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './CaseView';\nexport { CaseViewProps } from './CaseView';\nexport {\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledSummaryRegion\n} from './CaseView.styles';\nexport { default as MobileCaseView } from './MobileCaseView';\nexport { MobileCaseViewProps } from './MobileCaseView';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default } from './CaseView';\nexport { CaseViewProps } from './CaseView.types';\nexport {\n  StyledCaseView,\n  StyledWorkArea as StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledSummary as StyledSummaryRegion\n} from './CaseView.styles';\nexport { default as MobileCaseView } from './MobileCaseView';\nexport { MobileCaseViewProps } from './MobileCaseView';\nexport { default as CaseSummary } from './CaseSummary';\nexport { default as CaseSummaryFields } from './CaseSummaryFields';\nexport { default as CaseHeader } from './CaseHeader';\n"]}

package/lib/components/ConfigurableLayout/ConfigurableLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableLayout.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AA+B1E,QAAA,MAAM,kBAAkB,iHAsFvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ConfigurableLayout.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AA+B1E,QAAA,MAAM,kBAAkB,iHA8EvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/ConfigurableLayout/ConfigurableLayout.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect, useRef, useMemo } from 'react';
+import { forwardRef, useRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { Flex, defaultThemeProp } from '@pega/cosmos-react-core';
 import { containerMinWidth, cellGap } from './defaults';
@@ -28,31 +28,24 @@ const StyledContainerRuler = styled.div(({ theme }) => {
 });
 StyledContainerRuler.defaultProps = defaultThemeProp;
 const ConfigurableLayout = forwardRef(({ items, arrangement }, ref) => {
-    const [renderMode, setRenderMode] = useState('direct');
     const containerRulerRef = useRef(null);
-    // Update render mode when arrangement wraps
-    useEffect(() => {
+    const renderMode = useMemo(() => {
         const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;
         if (activeArrangement) {
             switch (arrangement.size) {
                 case 'main':
-                    setRenderMode('direct');
-                    break;
+                    return 'direct';
                 case 'half':
-                    setRenderMode('double');
-                    break;
+                    return 'double';
                 case 'narrow':
-                    setRenderMode('full');
-                    break;
+                    return 'full';
                 default:
-                    setRenderMode('direct');
-                    break;
+                    return 'direct';
             }
-            return;
         }
         // Use direct by default
-        setRenderMode('direct');
-    }, [arrangement?.hasWrapped]);
+        return 'direct';
+    }, [arrangement]);
     const content = useMemo(() => {
         if (items && !!items.length) {
             return items.map(itemConfig => {
@@ -82,7 +75,7 @@ const ConfigurableLayout = forwardRef(({ items, arrangement }, ref) => {
                             break;
                     }
                 }
-                return _jsx(LayoutCell, { config: config }, `${itemConfig.id}--${renderMode}`);
+                return _jsx(LayoutCell, { config: config }, `${itemConfig.id}`);
             });
         }
         return null;

package/lib/components/ConfigurableLayout/ConfigurableLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableLayout.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, useState, useEffect, useRef, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\nimport { containerMinWidth, cellGap } from './defaults';\nimport widthConfigOptions from './options';\nimport LayoutCell from './LayoutCell';\n\nconst StyledConfigurableLayout = styled.div(() => {\n  return css`\n    overflow: hidden;\n  `;\n});\n\nconst StyledCellGrid = styled.div(({ theme }) => {\n  return css`\n    /* Note: inset position used to negate \"column\" inline margin on items */\n    position: relative;\n    width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    inset-inline: calc(-${cellGap} * ${theme.base.spacing});\n    margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});\n  `;\n});\nStyledCellGrid.defaultProps = defaultThemeProp;\n\nconst StyledContainerRuler = styled.div(({ theme }) => {\n  return css`\n    margin-inline: calc(${cellGap} * ${theme.base.spacing});\n    width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});\n  `;\n});\nStyledContainerRuler.defaultProps = defaultThemeProp;\n\nconst ConfigurableLayout = forwardRef(\n  ({ items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>, ref: Ref<HTMLElement>) => {\n    const [renderMode, setRenderMode] = useState<'direct' | 'double' | 'full'>('direct');\n    const containerRulerRef = useRef<HTMLDivElement>(null);\n\n    // Update render mode when arrangement wraps\n    useEffect(() => {\n      const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n      if (activeArrangement) {\n        switch (arrangement.size) {\n          case 'main':\n            setRenderMode('direct');\n            break;\n          case 'half':\n            setRenderMode('double');\n            break;\n          case 'narrow':\n            setRenderMode('full');\n            break;\n          default:\n            setRenderMode('direct');\n            break;\n        }\n\n        return;\n      }\n\n      // Use direct by default\n      setRenderMode('direct');\n    }, [arrangement?.hasWrapped]);\n\n    const content = useMemo(() => {\n      if (items && !!items.length) {\n        return items.map(itemConfig => {\n          const config = {\n            ...itemConfig,\n            layoutConfig: { ...itemConfig.layoutConfig }\n          };\n\n          if (renderMode !== 'direct') {\n            switch (renderMode) {\n              case 'double': {\n                const doubleWidth: { [key: string]: keyof typeof widthConfigOptions } = {\n                  '1/4': '1/2',\n                  '1/3': '2/3',\n                  '1/2': 'full',\n                  '2/3': 'full',\n                  '3/4': 'full',\n                  full: 'full'\n                };\n\n                config.layoutConfig.width = doubleWidth[config.layoutConfig.width];\n\n                break;\n              }\n              case 'full':\n                config.layoutConfig.width = 'full';\n                break;\n              default:\n                config.layoutConfig.width = 'full';\n                break;\n            }\n          }\n\n          return <LayoutCell key={`${itemConfig.id}--${renderMode}`} config={config} />;\n        });\n      }\n\n      return null;\n    }, [items, renderMode]);\n\n    return (\n      <StyledConfigurableLayout>\n        <Flex\n          as={StyledCellGrid}\n          container={{ wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }}\n          item={{ basis: containerMinWidth, grow: 1 }}\n          ref={ref}\n        >\n          <StyledContainerRuler ref={containerRulerRef} />\n          {content}\n        </Flex>\n      </StyledConfigurableLayout>\n    );\n  }\n);\n\nexport default ConfigurableLayout;\n"]}
+{"version":3,"file":"ConfigurableLayout.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, useRef, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\nimport { containerMinWidth, cellGap } from './defaults';\nimport widthConfigOptions from './options';\nimport LayoutCell from './LayoutCell';\n\nconst StyledConfigurableLayout = styled.div(() => {\n  return css`\n    overflow: hidden;\n  `;\n});\n\nconst StyledCellGrid = styled.div(({ theme }) => {\n  return css`\n    /* Note: inset position used to negate \"column\" inline margin on items */\n    position: relative;\n    width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    inset-inline: calc(-${cellGap} * ${theme.base.spacing});\n    margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});\n  `;\n});\nStyledCellGrid.defaultProps = defaultThemeProp;\n\nconst StyledContainerRuler = styled.div(({ theme }) => {\n  return css`\n    margin-inline: calc(${cellGap} * ${theme.base.spacing});\n    width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});\n  `;\n});\nStyledContainerRuler.defaultProps = defaultThemeProp;\n\nconst ConfigurableLayout = forwardRef(\n  ({ items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>, ref: Ref<HTMLElement>) => {\n    const containerRulerRef = useRef<HTMLDivElement>(null);\n\n    const renderMode = useMemo(() => {\n      const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n      if (activeArrangement) {\n        switch (arrangement.size) {\n          case 'main':\n            return 'direct';\n          case 'half':\n            return 'double';\n          case 'narrow':\n            return 'full';\n          default:\n            return 'direct';\n        }\n      }\n\n      // Use direct by default\n      return 'direct';\n    }, [arrangement]);\n\n    const content = useMemo(() => {\n      if (items && !!items.length) {\n        return items.map(itemConfig => {\n          const config = {\n            ...itemConfig,\n            layoutConfig: { ...itemConfig.layoutConfig }\n          };\n\n          if (renderMode !== 'direct') {\n            switch (renderMode) {\n              case 'double': {\n                const doubleWidth: { [key: string]: keyof typeof widthConfigOptions } = {\n                  '1/4': '1/2',\n                  '1/3': '2/3',\n                  '1/2': 'full',\n                  '2/3': 'full',\n                  '3/4': 'full',\n                  full: 'full'\n                };\n\n                config.layoutConfig.width = doubleWidth[config.layoutConfig.width];\n\n                break;\n              }\n              case 'full':\n                config.layoutConfig.width = 'full';\n                break;\n              default:\n                config.layoutConfig.width = 'full';\n                break;\n            }\n          }\n\n          return <LayoutCell key={`${itemConfig.id}`} config={config} />;\n        });\n      }\n\n      return null;\n    }, [items, renderMode]);\n\n    return (\n      <StyledConfigurableLayout>\n        <Flex\n          as={StyledCellGrid}\n          container={{ wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }}\n          item={{ basis: containerMinWidth, grow: 1 }}\n          ref={ref}\n        >\n          <StyledContainerRuler ref={containerRulerRef} />\n          {content}\n        </Flex>\n      </StyledConfigurableLayout>\n    );\n  }\n);\n\nexport default ConfigurableLayout;\n"]}

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'react';
-declare const useTrackWrappedRegions: (regionElArray: (HTMLElement | null)[], disabled?: boolean | undefined) => {
+declare const useTrackWrappedRegions: (regionElArray: (HTMLElement | null)[], disabled?: boolean) => {
     containerRef: Ref<HTMLElement | null>;
     regionWrappedStates: boolean[];
 };

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTrackWrappedRegions.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIzD,QAAA,MAAM,sBAAsB,kBACX,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE;kBAEpB,IAAI,WAAW,GAAG,IAAI,CAAC;yBAAuB,OAAO,EAAE;CA2CzE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"useTrackWrappedRegions.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIzD,QAAA,MAAM,sBAAsB,kBACX,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,aAC1B,OAAO;kBACD,IAAI,WAAW,GAAG,IAAI,CAAC;yBAAuB,OAAO,EAAE;CA2CzE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/Confirmation/Confirmation.d.ts

@@ -2,9 +2,9 @@ import { FunctionComponent, ReactNode, Ref } from 'react';
 import { ForwardProps, UnorderedListProps, NoChildrenProp } from '@pega/cosmos-react-core';
 export interface ConfirmationProps extends NoChildrenProp {
     /** The title of the confirmation */
-    title: string;
+    title?: string;
     /** Region for a Field Value List component */
-    details: ReactNode;
+    details?: ReactNode;
     /** Array of React nodes to be put into a list  */
     whatsNext?: UnorderedListProps['items'];
     /** Region for a Tasks component */

package/lib/components/Confirmation/Confirmation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EAClB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,OAAO,EAAE,SAAS,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAwCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EAClB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kDAAkD;IAClD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Confirmation/Confirmation.js

@@ -8,7 +8,7 @@ const StyledWhatsNextList = styled(UnorderedList) `
 StyledWhatsNextList.defaultProps = defaultThemeProp;
 const Confirmation = forwardRef(({ title, details, whatsNext, tasks, onClose, ...restProps }, ref) => {
     const t = useI18n();
-    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [_jsx(Text, { variant: 'h2', children: title }), _jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_details') }), details] }), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_whats_next') }), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList })] })), tasks && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_open_tasks') }), tasks] })), onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { onClick: onClose, variant: 'primary', children: t('done') }) }))] }) }) }));
+    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [title && _jsx(Text, { variant: 'h2', children: title }), details && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_details') }), details] })), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h3', children: t('confirmation_whats_next') }), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList })] })), tasks, onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsx(Button, { onClick: onClose, variant: 'primary', children: t('done') }) }))] }) }) }));
 });
 export default Confirmation;
 //# sourceMappingURL=Confirmation.js.map

package/lib/components/Confirmation/Confirmation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG,EACH,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EACjC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACpD,OAAO,IACH,EACN,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,GAAI,IAC7D,CACR,EACA,KAAK,IAAI,CACR,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACvD,KAAK,IACD,CACR,EACA,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,YACxC,CAAC,CAAC,MAAM,CAAC,GACH,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Card,\n  CardContent,\n  ForwardProps,\n  Flex,\n  Text,\n  useI18n,\n  UnorderedList,\n  Button,\n  defaultThemeProp,\n  UnorderedListProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps extends NoChildrenProp {\n  /** The title of the confirmation */\n  title: string;\n  /** Region for a Field Value List component */\n  details: ReactNode;\n  /** Array of React nodes to be put into a list  */\n  whatsNext?: UnorderedListProps['items'];\n  /** Region for a Tasks component */\n  tasks?: ReactNode;\n  /** Called when the done/close button is clicked */\n  onClose?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  (\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) => {\n    const t = useI18n();\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            <Text variant='h2'>{title}</Text>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h3'>{t('confirmation_details')}</Text>\n              {details}\n            </Flex>\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n            {tasks && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_open_tasks')}</Text>\n                {tasks}\n              </Flex>\n            )}\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}
+{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG,EACH,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC7C,KAAK,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAC1C,OAAO,IAAI,CACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACpD,OAAO,IACH,CACR,EACA,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,GAAI,IAC7D,CACR,EACA,KAAK,EACL,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,YACxC,CAAC,CAAC,MAAM,CAAC,GACH,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Card,\n  CardContent,\n  ForwardProps,\n  Flex,\n  Text,\n  useI18n,\n  UnorderedList,\n  Button,\n  defaultThemeProp,\n  UnorderedListProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps extends NoChildrenProp {\n  /** The title of the confirmation */\n  title?: string;\n  /** Region for a Field Value List component */\n  details?: ReactNode;\n  /** Array of React nodes to be put into a list  */\n  whatsNext?: UnorderedListProps['items'];\n  /** Region for a Tasks component */\n  tasks?: ReactNode;\n  /** Called when the done/close button is clicked */\n  onClose?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  (\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) => {\n    const t = useI18n();\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            {title && <Text variant='h2'>{title}</Text>}\n            {details && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_details')}</Text>\n                {details}\n              </Flex>\n            )}\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n            {tasks}\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}

package/lib/components/Details/Details.d.ts

@@ -1,13 +1,34 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { FieldValueListProps, ForwardProps, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
-export interface DetailsProps extends BaseProps, NoChildrenProp {
-    /** The set of field values to render in the Highlighted Data list. */
-    highlightedFields?: FieldValueListProps['fields'];
-    /** List of React components below the highlighted data and line seperation. */
-    regions?: [ReactNode] | [ReactNode, ReactNode] | [ReactNode, ReactNode, ReactNode];
+import { FC, ReactNode, Ref } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+export interface DetailsProps {
+    highlightedData?: ReactNode[];
+    children?: ReactNode;
+    /** Text used as heading of list */
+    name?: string;
+    /**
+     * Whether the items children can be collapsed (only applies if name is provided)
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Number of columns in detail layout
+     * @default 1
+     */
+    columnCount?: 1 | 2 | 3;
+    /** Whether detail list is rendering within another detail list
+     * @default false
+     */
+    nested?: boolean;
+    /** Whether detail list is rendering multiple sub-lists in columns (passed as children)
+     * @default false
+     */
+    asFlex?: boolean;
+    /** Whether to apply `value-comparison` styles to list items
+     * @default false
+     */
+    valueComparison?: boolean;
+    ref?: Ref<HTMLDListElement>;
 }
-export declare const StyledDetails: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledHighlightedFields: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const Details: FunctionComponent<DetailsProps & ForwardProps>;
+declare const Details: FC<DetailsProps & ForwardProps>;
 export default Details;
 //# sourceMappingURL=Details.d.ts.map

package/lib/components/Details/Details.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAKL,mBAAmB,EACnB,YAAY,EACZ,SAAS,EAGT,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,YAAa,SAAQ,SAAS,EAAE,cAAc;IAC7D,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,+EAA+E;IAC/E,OAAO,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;CACpF;AAED,eAAO,MAAM,aAAa,yGAAe,CAAC;AAE1C,eAAO,MAAM,uBAAuB,yGAmBlC,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA4B3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"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,EAKL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,YAAY;IAC3B,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;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,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,YAAY,CA8J5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Details/Details.js

@@ -1,38 +1,80 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from 'styled-components';
-import { Grid, defaultThemeProp, FieldValueList, StyledFieldValueList, calculateFontSize } from '@pega/cosmos-react-core';
-export const StyledDetails = styled.div ``;
-export const StyledHighlightedFields = styled.div(({ theme }) => {
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    return css `
-    ${StyledFieldValueList} {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
-      padding-block-end: calc(1.5 * ${theme.base.spacing});
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-      column-gap: calc(5 * ${theme.base.spacing});
-      dd {
-        font-size: ${fontSize[theme.components.text.h1['font-size']]};
-        font-weight: ${theme.components.text.h1['font-weight']};
-      }
-    }
-
-    & + div {
-      padding-block-start: calc(1.5 * ${theme.base.spacing});
-    }
-  `;
+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 DetailsContext from './DetailsContext';
+import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp, chToRem } 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 isSmallOrAbove = useBreakpoint('sm');
+    const listRef = useConsolidatedRef(ref);
+    const flexRow = useBreakpoint(columnCount > 2 ? 'md' : 'sm', {
+        breakpointRef: listRef,
+        themeProp: 'content-width'
+    });
+    const t = useI18n();
+    const [flexContextMobileView, setFlexContextMobileView] = useState(false);
+    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;
+    /**
+     * 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 oneRemInPx = parseInt(remToPx(1), 10);
+            const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);
+            const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;
+            setFlexContextMobileView(elementWidth < mobileViewBreakpoint);
+        };
+        const resizeObserver = new ResizeObserver(entries => {
+            const containerPxWidth = entries[0].contentRect.width;
+            checkBreakpoint(containerPxWidth);
+        });
+        if (listRef.current) {
+            checkBreakpoint(listRef.current.offsetWidth);
+            resizeObserver.observe(listRef.current);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [listRef, columnCount]);
+    const contextValue = useMemo(() => {
+        return {
+            mobileView: applyMobileView,
+            depth: name ? headingDepth + 1 : headingDepth,
+            longestLabelLength,
+            ...context
+        };
+    }, [applyMobileView, name, headingDepth, longestLabelLength, context]);
+    const nameText = useMemo(() => {
+        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) => (
+                            // 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 })] }));
+    }, [
+        highlightedData,
+        nested,
+        columnCount,
+        labelLength,
+        applyMobileView,
+        name,
+        asFlex,
+        flexRow,
+        valueComparison,
+        children
+    ]);
+    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] }) }));
 });
-StyledHighlightedFields.defaultProps = defaultThemeProp;
-const Details = ({ highlightedFields, regions }) => {
-    return (_jsxs(StyledDetails, { children: [highlightedFields && (_jsx(StyledHighlightedFields, { children: _jsx(FieldValueList, { variant: 'stacked', fields: highlightedFields }) })), regions && regions.length > 0 && (_jsx(Grid, { container: {
-                    cols: 'repeat(auto-fit, minmax(30ch, 1fr))',
-                    alignItems: 'start',
-                    alignContent: 'start',
-                    gap: 2
-                }, children: regions?.map((colItem, i) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return _jsx("div", { children: colItem }, i);
-                }) }))] }));
-};
 export default Details;
 //# sourceMappingURL=Details.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EAIpB,iBAAiB,EAGlB,MAAM,yBAAyB,CAAC;AASjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;MACN,oBAAoB;;;sCAGY,KAAK,CAAC,IAAI,CAAC,OAAO;uCACjB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;6BAC3C,KAAK,CAAC,IAAI,CAAC,OAAO;;qBAE1B,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;;;wCAKtB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,OAAO,GAAmD,CAAC,EAC/D,iBAAiB,EACjB,OAAO,EACM,EAAE,EAAE;IACjB,OAAO,CACL,MAAC,aAAa,eACX,iBAAiB,IAAI,CACpB,KAAC,uBAAuB,cACtB,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAE,iBAAiB,GAAI,GACvC,CAC3B,EACA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,qCAAqC;oBAC3C,UAAU,EAAE,OAAO;oBACnB,YAAY,EAAE,OAAO;oBACrB,GAAG,EAAE,CAAC;iBACP,YAEA,OAAO,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;oBAC3B,oDAAoD;oBACpD,OAAO,wBAAc,OAAO,IAAX,CAAC,CAAiB,CAAC;gBACtC,CAAC,CAAC,GACG,CACR,IACa,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Grid,\n  defaultThemeProp,\n  FieldValueList,\n  StyledFieldValueList,\n  FieldValueListProps,\n  ForwardProps,\n  BaseProps,\n  calculateFontSize,\n  FontSize,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nexport interface DetailsProps extends BaseProps, NoChildrenProp {\n  /** The set of field values to render in the Highlighted Data list. */\n  highlightedFields?: FieldValueListProps['fields'];\n  /** List of React components below the highlighted data and line seperation. */\n  regions?: [ReactNode] | [ReactNode, ReactNode] | [ReactNode, ReactNode, ReactNode];\n}\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledHighlightedFields = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    ${StyledFieldValueList} {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));\n      padding-block-end: calc(1.5 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      column-gap: calc(5 * ${theme.base.spacing});\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\n    & + div {\n      padding-block-start: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledHighlightedFields.defaultProps = defaultThemeProp;\n\nconst Details: FunctionComponent<DetailsProps & ForwardProps> = ({\n  highlightedFields,\n  regions\n}: DetailsProps) => {\n  return (\n    <StyledDetails>\n      {highlightedFields && (\n        <StyledHighlightedFields>\n          <FieldValueList variant='stacked' fields={highlightedFields} />\n        </StyledHighlightedFields>\n      )}\n      {regions && regions.length > 0 && (\n        <Grid\n          container={{\n            cols: 'repeat(auto-fit, minmax(30ch, 1fr))',\n            alignItems: 'start',\n            alignContent: 'start',\n            gap: 2\n          }}\n        >\n          {regions?.map((colItem, i) => {\n            // eslint-disable-next-line react/no-array-index-key\n            return <div key={i}>{colItem}</div>;\n          })}\n        </Grid>\n      )}\n    </StyledDetails>\n  );\n};\n\nexport default Details;\n"]}
+{"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"]}

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

@@ -0,0 +1,47 @@
+import { DefaultTheme } from 'styled-components';
+import { StyledFieldValueListProps } from '@pega/cosmos-react-core';
+interface StyledDetailListProps extends StyledFieldValueListProps {
+    /** Whether individual list items all have labels stacks on top */
+    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 */
+    labelLength?: number;
+    /**
+     * Whether the list is wrapped to 1 column
+     * @default false
+     */
+    wrapped?: boolean;
+    /**
+     * Number of columns in the list
+     * @default 1
+     */
+    columnCount?: 1 | 2 | 3;
+    theme: DefaultTheme;
+}
+export declare const colCountChWidth: {
+    '1': {
+        containerWidth: number;
+        colWidth: number;
+    };
+    '2': {
+        containerWidth: number;
+        colWidth: number;
+    };
+    '3': {
+        containerWidth: number;
+        colWidth: number;
+    };
+};
+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>;
+export declare const StyledDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, StyledFieldValueListProps & import("@pega/cosmos-react-core").OmitStrict<StyledDetailListProps, "columnCount" | "wrapped"> & Required<Pick<StyledDetailListProps, "columnCount" | "wrapped">>, never>;
+export {};
+//# sourceMappingURL=Details.styles.d.ts.map

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

@@ -0,0 +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"}