@pega/cosmos-react-work 5.0.0-dev.4.8 → 5.0.0-dev.5.0

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

@@ -0,0 +1,7 @@
+import { Ref } from 'react';
+declare const useTrackWrappedRegions: (regionElArray: (HTMLElement | null)[], disabled?: boolean) => {
+    containerRef: Ref<HTMLElement | null>;
+    regionWrappedStates: boolean[];
+};
+export default useTrackWrappedRegions;
+//# sourceMappingURL=useTrackWrappedRegions.d.ts.map

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

@@ -0,0 +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,aAC1B,OAAO;kBACD,IAAI,WAAW,GAAG,IAAI,CAAC;yBAAuB,OAAO,EAAE;CA2CzE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.js

@@ -0,0 +1,37 @@
+import { useRef, useEffect, useState } from 'react';
+import { debounce } from '@pega/cosmos-react-core';
+const useTrackWrappedRegions = (regionElArray, disabled) => {
+    const containerRef = useRef(null);
+    const [regionWrappedStates, setRegionWrappedStates] = useState(new Array(regionElArray.length).fill(false));
+    useEffect(() => {
+        if (disabled)
+            return;
+        let isMounted = true;
+        const observer = new ResizeObserver(debounce(entries => {
+            if (isMounted) {
+                const containerWidth = entries[0].contentRect.width;
+                const newWrappedStates = [...regionWrappedStates];
+                regionElArray.forEach((regionEl, index) => {
+                    const regionWidth = regionEl?.getBoundingClientRect().width;
+                    if (regionWidth !== undefined && regionWidth >= containerWidth) {
+                        newWrappedStates[index] = true;
+                    }
+                    else {
+                        newWrappedStates[index] = false;
+                    }
+                });
+                setRegionWrappedStates(newWrappedStates);
+            }
+        }, 100));
+        if (containerRef.current && regionElArray.length) {
+            observer.observe(containerRef.current);
+        }
+        return () => {
+            isMounted = false;
+            observer.disconnect();
+        };
+    }, [containerRef, regionElArray]);
+    return { containerRef, regionWrappedStates };
+};
+export default useTrackWrappedRegions;
+//# sourceMappingURL=useTrackWrappedRegions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTrackWrappedRegions.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAO,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,sBAAsB,GAAG,CAC7B,aAAqC,EACrC,QAAkB,EACyD,EAAE;IAC7E,MAAM,YAAY,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAC5C,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,MAAM,QAAQ,GAAG,IAAI,cAAc,CACjC,QAAQ,CAAC,OAAO,CAAC,EAAE;YACjB,IAAI,SAAS,EAAE;gBACb,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;gBACpD,MAAM,gBAAgB,GAAG,CAAC,GAAG,mBAAmB,CAAC,CAAC;gBAElD,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,WAAW,GAAG,QAAQ,EAAE,qBAAqB,EAAE,CAAC,KAAK,CAAC;oBAE5D,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE;wBAC9D,gBAAgB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;qBAChC;yBAAM;wBACL,gBAAgB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;qBACjC;gBACH,CAAC,CAAC,CAAC;gBAEH,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;aAC1C;QACH,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;QAEF,IAAI,YAAY,CAAC,OAAO,IAAI,aAAa,CAAC,MAAM,EAAE;YAChD,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SACxC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;YAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAElC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { useRef, useEffect, useState, Ref } from 'react';\n\nimport { debounce } from '@pega/cosmos-react-core';\n\nconst useTrackWrappedRegions = (\n  regionElArray: (HTMLElement | null)[],\n  disabled?: boolean\n): { containerRef: Ref<HTMLElement | null>; regionWrappedStates: boolean[] } => {\n  const containerRef = useRef<HTMLElement | null>(null);\n  const [regionWrappedStates, setRegionWrappedStates] = useState(\n    new Array(regionElArray.length).fill(false)\n  );\n\n  useEffect(() => {\n    if (disabled) return;\n\n    let isMounted = true;\n\n    const observer = new ResizeObserver(\n      debounce(entries => {\n        if (isMounted) {\n          const containerWidth = entries[0].contentRect.width;\n          const newWrappedStates = [...regionWrappedStates];\n\n          regionElArray.forEach((regionEl, index) => {\n            const regionWidth = regionEl?.getBoundingClientRect().width;\n\n            if (regionWidth !== undefined && regionWidth >= containerWidth) {\n              newWrappedStates[index] = true;\n            } else {\n              newWrappedStates[index] = false;\n            }\n          });\n\n          setRegionWrappedStates(newWrappedStates);\n        }\n      }, 100)\n    );\n\n    if (containerRef.current && regionElArray.length) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      isMounted = false;\n      observer.disconnect();\n    };\n  }, [containerRef, regionElArray]);\n\n  return { containerRef, regionWrappedStates };\n};\n\nexport default useTrackWrappedRegions;\n"]}

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

@@ -0,0 +1,19 @@
+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;
+    /** Region for a Field Value List component */
+    details?: ReactNode;
+    /** Array of React nodes to be put into a list */
+    whatsNext?: UnorderedListProps['items'];
+    /** Region for a Tasks component */
+    tasks?: ReactNode;
+    /** Called when the done/close button is clicked */
+    onClose?: () => void;
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLElement>;
+}
+declare const Confirmation: FunctionComponent<ConfirmationProps & ForwardProps>;
+export default Confirmation;
+//# sourceMappingURL=Confirmation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EAClB,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAUjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,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;AAUD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAiDrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Confirmation/Confirmation.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { Card, CardContent, Flex, Text, useI18n, UnorderedList, Button, defaultThemeProp, VisuallyHiddenText } from '@pega/cosmos-react-core';
+import { StyledDetails, StyledFieldValueGroupLabel, DetailsContext } from '../Details';
+const StyledWhatsNextList = styled(UnorderedList) `
+  padding-inline-start: 0;
+`;
+StyledWhatsNextList.defaultProps = defaultThemeProp;
+const StyledConfirmationDetails = styled.div(() => {
+    return css `
+    > ${StyledDetails} > ${StyledFieldValueGroupLabel}:first-child {
+      margin-block-start: 0;
+    }
+  `;
+});
+const Confirmation = forwardRef(function Confirmation({ title, details, whatsNext, tasks, onClose, ...restProps }, ref) {
+    const t = useI18n();
+    const detailsContext = useContext(DetailsContext);
+    const detailsCtxValue = useMemo(() => {
+        return {
+            ...detailsContext,
+            depth: 4
+        };
+    }, [detailsContext]);
+    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [title && _jsx(Text, { variant: 'h3', children: title }), details && (_jsx(DetailsContext.Provider, { value: detailsCtxValue, children: _jsx(StyledConfirmationDetails, { children: details }) })), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: t('confirmation_whats_next') }), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList })] })), tasks, onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsxs(Button, { onClick: onClose, variant: 'primary', children: [t('done'), title ? _jsx(VisuallyHiddenText, { children: `- ${title}` }) : null] }) }))] }) }) }));
+});
+export default Confirmation;
+//# sourceMappingURL=Confirmation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAKV,UAAU,EACV,OAAO,EACR,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGhB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvF,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAChD,OAAO,GAAG,CAAA;QACJ,aAAa,MAAM,0BAA0B;;;GAGlD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAwD,UAAU,CAClF,SAAS,YAAY,CACnB,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAElD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO;YACL,GAAG,cAAc;YACjB,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,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,EAE1C,OAAO,IAAI,CACV,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,YAC7C,KAAC,yBAAyB,cAAE,OAAO,GAA6B,GACxC,CAC3B,EAEA,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,EAEA,KAAK,EAEL,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,MAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,aACxC,CAAC,CAAC,MAAM,CAAC,EACT,KAAK,CAAC,CAAC,CAAC,KAAC,kBAAkB,cAAE,KAAK,KAAK,EAAE,GAAsB,CAAC,CAAC,CAAC,IAAI,IAChE,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  useContext,\n  useMemo\n} from 'react';\nimport styled, { css } 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  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport { StyledDetails, StyledFieldValueGroupLabel, DetailsContext } from '../Details';\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 StyledConfirmationDetails = styled.div(() => {\n  return css`\n    > ${StyledDetails} > ${StyledFieldValueGroupLabel}:first-child {\n      margin-block-start: 0;\n    }\n  `;\n});\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  function Confirmation(\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) {\n    const t = useI18n();\n    const detailsContext = useContext(DetailsContext);\n\n    const detailsCtxValue = useMemo(() => {\n      return {\n        ...detailsContext,\n        depth: 4\n      };\n    }, [detailsContext]);\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            {title && <Text variant='h3'>{title}</Text>}\n\n            {details && (\n              <DetailsContext.Provider value={detailsCtxValue}>\n                <StyledConfirmationDetails>{details}</StyledConfirmationDetails>\n              </DetailsContext.Provider>\n            )}\n\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h4'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n\n            {tasks}\n\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                  {title ? <VisuallyHiddenText>{`- ${title}`}</VisuallyHiddenText> : null}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './Confirmation';
+export type { ConfirmationProps } from './Confirmation';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/Confirmation/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Confirmation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './Confirmation';\nexport type { ConfirmationProps } from './Confirmation';\n"]}

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

@@ -0,0 +1,43 @@
+import { FC, ReactNode, Ref } from 'react';
+import { ForwardProps, TestIdProp, AdditionalInfoProps } from '@pega/cosmos-react-core';
+export interface DetailsProps extends TestIdProp {
+    highlightedData?: ReactNode[];
+    children?: ReactNode;
+    /** Text used as heading of list */
+    name?: string;
+    /** Copy placed in paragraph below the name */
+    description?: 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;
+    /** Pass a heading and content to show additional information on the list. */
+    additionalInfo?: {
+        heading: AdditionalInfoProps['heading'];
+        content: AdditionalInfoProps['children'];
+    };
+    ref?: Ref<HTMLDListElement>;
+}
+declare const _default: FC<DetailsProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "description", "highlighted-data", "data", "expand-collapse"]>;
+};
+export default _default;
+//# sourceMappingURL=Details.d.ts.map

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

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

package/lib/components/Details/Details.js

@@ -0,0 +1,95 @@
+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 { AdditionalInfo, Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useChToPxConversionFactor, useI18n, HTML, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import { getDetailsTestIds } from './Details.test-ids';
+import DetailsContext from './DetailsContext';
+import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp, StyledDetailDescription } from './Details.styles';
+const Details = forwardRef(function Details({ testId, highlightedData, children, name, description, columnCount = 1, nested = false, asFlex = false, valueComparison = false, collapsible = false, additionalInfo: additionalInfoProp }, ref) {
+    const { longestLabelLength, mobileView: inMobileView, depth, ...context } = useContext(DetailsContext);
+    const { base: { 'content-width': { sm: smContentWidth } } } = useTheme();
+    const isSmallOrAbove = useBreakpoint('sm');
+    const listRef = useConsolidatedRef(ref);
+    const isXsContentWidthOrAbove = useBreakpoint('xs', {
+        breakpointRef: listRef,
+        themeProp: 'content-width'
+    });
+    const isMdContentWidthOrAbove = useBreakpoint('md', {
+        breakpointRef: listRef,
+        themeProp: 'content-width'
+    });
+    const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {
+        breakpointRef: listRef,
+        themeProp: 'content-width'
+    });
+    const t = useI18n();
+    const testIds = useTestIds(testId, getDetailsTestIds);
+    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 = inMobileView ||
+        !isSmallOrAbove ||
+        !isXsContentWidthOrAbove ||
+        (asFlex && flexRow && flexContextMobileView);
+    const chToPxConversionFactor = useChToPxConversionFactor();
+    // Mount resize observer to update flex context mobile view & run initial check.
+    useEffect(() => {
+        const checkBreakpoint = (elementWidth) => {
+            const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;
+            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 additionalInfo = useMemo(() => {
+        return additionalInfoProp ? (_jsx(AdditionalInfo, { heading: additionalInfoProp.heading, children: additionalInfoProp.content })) : undefined;
+    }, [additionalInfoProp?.heading, additionalInfoProp?.content]);
+    const details = useMemo(() => {
+        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) => (
+                            // eslint-disable-next-line react/no-array-index-key
+                            _jsx(Fragment, { children: child }, i))) }), _jsx("hr", {})] })), children ? (_jsx(StyledDetailList, { "data-testid": testIds.data, ref: listRef, as: nested ? 'div' : 'dl', columnCount: columnCount, labelLength: labelLength, stacked: applyMobileView, nested: nested, flex: asFlex, wrapped: asFlex ? !flexRow : false, variant: valueComparison ? 'value-comparison' : undefined, narrow: !isMdContentWidthOrAbove, children: children })) : null] }));
+    }, [
+        highlightedData,
+        nested,
+        columnCount,
+        labelLength,
+        applyMobileView,
+        name,
+        asFlex,
+        flexRow,
+        valueComparison,
+        children,
+        testIds
+    ]);
+    if (!name && !children && !highlightedData && !description)
+        return null;
+    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: () => {
+                                        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] }) }), 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)] }) }));
+});
+export default withTestIds(Details, getDetailsTestIds);
+//# sourceMappingURL=Details.js.map

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

@@ -0,0 +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/lib/components/Details/Details.styles.d.ts

@@ -0,0 +1,50 @@
+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 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;
+    /**
+     * Whether to apply narrow list styles
+     * @default false
+     */
+    narrow?: boolean;
+    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 StyledFieldValueGroupLabel: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StyledDetailDescription: 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 & Pick<StyledDetailListProps, "flex" | "theme" | "variant" | "narrow" | "stacked" | "nested" | "labelLength"> & 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,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,0BAA0B,6EAyBrC,CAAC;AAIH,eAAO,MAAM,uBAAuB,6EAYlC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAAe,CAAC;AAE1C,eAAO,MAAM,gBAAgB,oRA+I5B,CAAC"}

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

@@ -0,0 +1,204 @@
+import styled, { css } from 'styled-components';
+import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList, StyledIcon, useDirection, StyledButton } from '@pega/cosmos-react-core';
+const verticalGapSpacingMultiplier = 1;
+// colWidth reduces by 20% as column count increases
+export const colCountChWidth = {
+    '1': {
+        containerWidth: 100,
+        colWidth: 100
+    },
+    '2': {
+        containerWidth: 80 * 2,
+        colWidth: 80
+    },
+    '3': {
+        containerWidth: 64 * 3,
+        colWidth: 64
+    }
+};
+export const flexGapProp = 5.5;
+export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
+    const { base: { spacing, animation } } = theme;
+    const { rtl } = useDirection();
+    return css `
+    width: 100%;
+    grid-column-start: 1;
+    grid-column-end: -1;
+    margin-block-end: calc(0.5 * ${spacing});
+    margin-block-start: calc(1.5 * ${spacing});
+
+    ${StyledButton} ${StyledIcon} {
+      transition: transform ${animation.speed} ${animation.timing.ease};
+    }
+
+    ${StyledButton}[aria-expanded='true'] ${StyledIcon} {
+      transform: rotate(90deg);
+    }
+
+    ${StyledButton}[aria-expanded='false'] ${StyledIcon} {
+      transform: rotate(${rtl ? 180 : 0}deg);
+    }
+  `;
+});
+StyledFieldValueGroupLabel.defaultProps = defaultThemeProp;
+export const StyledDetailDescription = styled.div(({ theme }) => {
+    const { base: { spacing, 'content-width': { xl } } } = theme;
+    return css `
+    max-width: ${xl};
+    margin-block: calc(1.5 * ${spacing});
+  `;
+});
+StyledDetailDescription.defaultProps = defaultThemeProp;
+export const StyledHighlightedDetailList = styled.dl(({ theme }) => {
+    const { base: { spacing, palette } } = theme;
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    max-width: ${colCountChWidth[3].containerWidth}ch;
+    padding-block-end: calc(1.5 * ${spacing});
+
+    dd {
+      font-size: ${fontSize[theme.components.text.h1['font-size']]};
+      font-weight: ${theme.components.text.h1['font-weight']};
+    }
+
+    + hr {
+      border-top: unset;
+      border-radius: unset;
+      border-style: unset;
+      border-bottom: 0.0625rem solid ${palette['border-line']};
+      margin-block-end: calc(1.5 * ${spacing});
+    }
+  `;
+});
+StyledHighlightedDetailList.defaultProps = defaultThemeProp;
+export const StyledDetails = styled.div ``;
+export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, nested, labelLength, variant, theme, wrapped = false, columnCount = 1, narrow = false }) => {
+    const { base: { spacing } } = theme;
+    const isValueComparison = variant === 'value-comparison';
+    const containerWidthCh = colCountChWidth[columnCount].containerWidth;
+    const columnWidthCh = colCountChWidth[columnCount].colWidth;
+    const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;
+    return css `
+      /* Top Level Styles */
+      ${!nested &&
+        css `
+        ${StyledFieldValue} {
+          word-break: break-word;
+          overflow: auto;
+        }
+
+        ${StyledStackedFieldValue} {
+          grid-column: 1 / -1;
+        }
+      `}
+
+      /* Nested List */
+      ${nested &&
+        css `
+        grid-column: 1 / -1;
+      `}
+
+      /* As Field Grid */
+      ${!flex &&
+        css `
+        display: grid;
+        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);
+        column-gap: calc(2 * ${spacing});
+        row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});
+
+        ${stacked &&
+            css `
+          grid-template-columns: minmax(0, 1fr);
+          row-gap: 0;
+
+          ${!isValueComparison &&
+                css `
+            > dt,
+            ${StyledStackedFieldValue} {
+              margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
+            }
+          `}
+        `}
+
+        > ${StyledStackedFieldValue} {
+          max-width: ${containerWidthCh}ch;
+        }
+
+        > ${StyledFieldValue} {
+          max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));
+
+          ${!isValueComparison &&
+            css `
+            width: 100%;
+          `}
+        }
+
+        ${isValueComparison &&
+            css `
+          grid-template-columns: auto auto;
+          column-gap: 0;
+          row-gap: calc(0.5 * ${spacing});
+          max-width: ${containerWidthCh}ch;
+
+          > dd {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+          }
+        `}
+
+        > ${StyledDetails} {
+          grid-column: 1 / -1;
+        }
+      `}
+
+      /* As Flex Container */
+      ${flex &&
+        css `
+        display: flex;
+        flex-direction: ${wrapped ? 'column' : 'row'};
+        column-gap: calc(${flexGapProp} * ${spacing});
+        align-items: flex-start;
+        max-width: ${containerWidthCh}ch;
+
+        ${!wrapped &&
+            css `
+          > * {
+            width: 100%;
+            max-width: ${columnWidthCh}%;
+          }
+        `}
+
+        > ${StyledDetails} {
+          width: 100%;
+
+          ${wrapped &&
+            !stacked &&
+            css `
+            + ${StyledDetails} > ${StyledDetailList}:first-child {
+              margin-block-start: ${theme.base.spacing};
+            }
+          `}
+        }
+      `}
+
+      /* Key / Group Label Spacing */
+      ${stacked &&
+        !isValueComparison &&
+        css `
+        > dt {
+          margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
+        }
+      `}
+
+      /* Responsive behavior */
+      ${narrow &&
+        !stacked &&
+        !isValueComparison &&
+        css `
+        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);
+      `}
+    `;
+});
+StyledDetailList.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Details.styles.js.map

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

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

package/lib/components/Details/Details.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getDetailsTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "description", "highlighted-data", "data", "expand-collapse"]>;
+//# sourceMappingURL=Details.test-ids.d.ts.map

package/lib/components/Details/Details.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,0KAMnB,CAAC"}

package/lib/components/Details/Details.test-ids.js

@@ -0,0 +1,9 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getDetailsTestIds = createTestIds('details', [
+    'heading',
+    'description',
+    'highlighted-data',
+    'data',
+    'expand-collapse'
+]);
+//# sourceMappingURL=Details.test-ids.js.map

package/lib/components/Details/Details.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.test-ids.js","sourceRoot":"","sources":["../../../src/components/Details/Details.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,SAAS,EAAE;IACxD,SAAS;IACT,aAAa;IACb,kBAAkB;IAClB,MAAM;IACN,iBAAiB;CACT,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getDetailsTestIds = createTestIds('details', [\n  'heading',\n  'description',\n  'highlighted-data',\n  'data',\n  'expand-collapse'\n] as const);\n"]}