@pega/cosmos-react-work 4.0.0-dev.12.0 → 4.0.0-dev.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactElement, ReactNode, MouseEvent } from 'react';\n\nimport {\n  Tab,\n  NoChildrenProp,\n  FieldValueListItemProps,\n  ForwardProps,\n  MenuItemProps,\n  Action,\n  BaseProps,\n  OmitStrict,\n  RequireAtLeastOne\n} from '@pega/cosmos-react-core';\n\nexport interface SummaryField extends OmitStrict<FieldValueListItemProps, 'value'> {\n  value: FieldValueListItemProps['value'];\n}\n\nexport type CaseSummaryFieldsProps = RequireAtLeastOne<{\n  primary?: SummaryField[];\n  secondary?: SummaryField[];\n}>;\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps {\n  /** A unique identifier for the case instance. */\n  caseId: string;\n\n  /** Text to quickly identify a case instance. */\n  heading: string;\n\n  /** Supplemental text to identify a case instance. */\n  subheading?: string;\n\n  /** A set of props including an href that will be forwarded to the case heading and caseId. */\n  caseLink?: { href: string } & ForwardProps;\n\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n\n  /** An icon to serve as a visual for the CaseView. */\n  icon?: ReactElement;\n\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange.  */\n  followed?: boolean;\n\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n\n  /** Case level actions available in an action menu. */\n  actions?: Action[];\n\n  /** Visually promoted case level actions available outside the menu. */\n  promotedActions?: Action[];\n\n  /** A callback for when the edit button is clicked */\n  onEdit?: () => void;\n\n  /** Field data to render in summary areas. */\n  summaryFields: CaseSummaryFieldsProps;\n\n  /**\n   * Determines the layout state of the summary region.\n   * @default true\n   */\n  summaryExpanded?: boolean;\n\n  /**\n   * Callback to toggle the case summary's layout.\n   */\n  onToggleSummary?: () => void;\n\n  /** An object handling the rendering and functionality of the Tabs in CaseSummary. */\n  tabs: {\n    items: Tab[];\n    onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n    currentTabId: string;\n  };\n\n  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n\n  /**\n   * Provide an instance of IntelligentGuidance to be rendered for a case.\n   */\n  intelligentGuidance?: ReactNode;\n\n  /** A region for case widgets. */\n  utilities?: ReactNode;\n\n  /** An indicator of case widgets when the utilities are collapsed. */\n  utilitiesSummaryItems?: { iconName: string; name: string; count?: number }[];\n\n  /**\n   * Determines the layout state of the utilities.\n   * @default true\n   */\n  utilitiesExpanded?: boolean;\n\n  /**\n   * Callback to toggle the utilities.\n   */\n  onToggleUtilities?: () => void;\n\n  /**\n   * Indicates CaseView is rendered within a CasePreview.\n   * @internal\n   */\n  isPreview?: boolean;\n}\n\nexport interface CaseViewContextValue\n  extends Pick<\n    CaseViewProps,\n    | 'caseId'\n    | 'heading'\n    | 'subheading'\n    | 'caseLink'\n    | 'parentCases'\n    | 'icon'\n    | 'followed'\n    | 'onFollowedChange'\n    | 'actions'\n    | 'promotedActions'\n    | 'onEdit'\n    | 'tabs'\n    | 'summaryExpanded'\n    | 'onToggleSummary'\n    | 'utilitiesExpanded'\n    | 'persistentUtility'\n    | 'intelligentGuidance'\n  > {\n  summaryId: string;\n  summary: ReactNode;\n  aboveMD: boolean;\n  aboveLG: boolean;\n  aboveXL: boolean;\n  isPreview: boolean;\n}\n"]}
+{"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactElement, ReactNode, MouseEvent } from 'react';\n\nimport {\n  Tab,\n  NoChildrenProp,\n  FieldValueListItemProps,\n  ForwardProps,\n  MenuItemProps,\n  Action,\n  BaseProps,\n  TestIdProp,\n  OmitStrict,\n  RequireAtLeastOne\n} from '@pega/cosmos-react-core';\n\nimport type { getCaseViewTestIds } from './CaseView.test-ids';\n\nexport interface SummaryField extends OmitStrict<FieldValueListItemProps, 'value'> {\n  value: FieldValueListItemProps['value'];\n}\n\nexport type CaseSummaryFieldsProps = RequireAtLeastOne<{\n  primary?: SummaryField[];\n  secondary?: SummaryField[];\n}>;\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps, TestIdProp {\n  /** A unique identifier for the case instance. */\n  caseId: string;\n\n  /** Text to quickly identify a case instance. */\n  heading: string;\n\n  /** Supplemental text to identify a case instance. */\n  subheading?: string;\n\n  /**\n   * @internal\n   */\n  caseLink?: CaseViewContextValue['caseLink'];\n\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n\n  /** An icon to serve as a visual for the CaseView. */\n  icon?: ReactElement;\n\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange.  */\n  followed?: boolean;\n\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n\n  /** Case level actions available in an action menu. */\n  actions?: Action[];\n\n  /** Visually promoted case level actions available outside the menu. */\n  promotedActions?: Action[];\n\n  /** A callback for when the edit button is clicked */\n  onEdit?: () => void;\n\n  /** Field data to render in summary areas. */\n  summaryFields: CaseSummaryFieldsProps;\n\n  /**\n   * Determines the layout state of the summary region.\n   * @default true\n   */\n  summaryExpanded?: boolean;\n\n  /**\n   * Callback to toggle the case summary's layout.\n   */\n  onToggleSummary?: () => void;\n\n  /** An object handling the rendering and functionality of the Tabs in CaseSummary. */\n  tabs: {\n    items: Tab[];\n    onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n    currentTabId: string;\n  };\n\n  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n\n  /**\n   * Provide an instance of IntelligentGuidance to be rendered for a case.\n   */\n  intelligentGuidance?: ReactNode;\n\n  /** A region for case widgets. */\n  utilities?: ReactNode;\n\n  /** An indicator of case widgets when the utilities are collapsed. */\n  utilitiesSummaryItems?: { iconName: string; name: string; count?: number }[];\n\n  /**\n   * Determines the layout state of the utilities.\n   * @default true\n   */\n  utilitiesExpanded?: boolean;\n\n  /**\n   * Callback to toggle the utilities.\n   */\n  onToggleUtilities?: () => void;\n\n  /**\n   * Indicates CaseView is rendered within a CasePreview.\n   * @internal\n   */\n  isPreview?: boolean;\n}\n\nexport interface CaseViewContextValue\n  extends Pick<\n    CaseViewProps,\n    | 'caseId'\n    | 'heading'\n    | 'subheading'\n    | 'parentCases'\n    | 'icon'\n    | 'followed'\n    | 'onFollowedChange'\n    | 'actions'\n    | 'promotedActions'\n    | 'onEdit'\n    | 'tabs'\n    | 'summaryExpanded'\n    | 'onToggleSummary'\n    | 'utilitiesExpanded'\n    | 'persistentUtility'\n    | 'intelligentGuidance'\n  > {\n  testIds: ReturnType<typeof getCaseViewTestIds>;\n  summaryId: string;\n  summary: ReactNode;\n  aboveMD: boolean;\n  aboveLG: boolean;\n  aboveXL: boolean;\n  isPreview: boolean;\n  caseLink?: { href: string } & ForwardProps;\n}\n"]}

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,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"}
+{"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;AAWjC,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,CA0L5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Details/Details.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Fragment,\n  ReactNode,\n  Ref,\n  useState,\n  useContext,\n  useEffect,\n  useMemo\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useTheme,\n  ForwardProps,\n  ExpandCollapse,\n  Button,\n  Flex,\n  Icon,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledDetailList,\n  StyledHighlightedDetailList,\n  flexGapProp,\n  chToRem\n} from './Details.styles';\n\nexport interface DetailsProps {\n  highlightedData?: ReactNode[];\n  children?: ReactNode;\n  /** Text used as heading of list */\n  name?: string;\n  /**\n   * Whether the items children can be collapsed (only applies if name is provided)\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * Number of columns in detail layout\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /** Whether detail list is rendering within another detail list\n   * @default false\n   */\n  nested?: boolean;\n  /** Whether detail list is rendering multiple sub-lists in columns (passed as children)\n   * @default false\n   */\n  asFlex?: boolean;\n  /** Whether to apply `value-comparison` styles to list items\n   * @default false\n   */\n  valueComparison?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(\n  (\n    {\n      highlightedData,\n      children,\n      name,\n      columnCount = 1,\n      nested = false,\n      asFlex = false,\n      valueComparison = false,\n      collapsible = false\n    },\n    ref\n  ) => {\n    const { longestLabelLength, mobileView, depth, ...context } = useContext(DetailsContext);\n    const {\n      base: {\n        'content-width': { sm }\n      }\n    } = useTheme();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n    const flexRow = useBreakpoint(columnCount > 2 ? 'md' : 'sm', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const t = useI18n();\n\n    const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n    const [open, setOpen] = useState(true);\n\n    const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n    const headingDepth = depth ?? 1;\n    const applyMobileView = asFlex\n      ? mobileView || (flexRow && flexContextMobileView) || !isSmallOrAbove\n      : mobileView || !isSmallOrAbove;\n\n    /**\n     * Mount resize observer to update flex context mobile view & run initial check.\n     */\n    useEffect(() => {\n      const checkBreakpoint = (elementWidth: number) => {\n        const minWidthRem = chToRem(parseInt(sm, 10));\n        const minWidthPx = parseInt(remToPx(minWidthRem), 10);\n        const oneRemInPx = parseInt(remToPx(1), 10);\n        const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n        const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n        setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n      };\n      const resizeObserver = new ResizeObserver(entries => {\n        const containerPxWidth = entries[0].contentRect.width;\n        checkBreakpoint(containerPxWidth);\n      });\n\n      if (listRef.current) {\n        checkBreakpoint(listRef.current.offsetWidth);\n        resizeObserver.observe(listRef.current);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [listRef, columnCount]);\n\n    const contextValue = useMemo(() => {\n      return {\n        mobileView: applyMobileView,\n        depth: name ? headingDepth + 1 : headingDepth,\n        longestLabelLength,\n        ...context\n      };\n    }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n    const nameText = useMemo(() => {\n      return (\n        <Text variant={`h${Math.min(headingDepth, 6)}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>\n          {name}\n        </Text>\n      );\n    }, [name, headingDepth]);\n\n    const details = useMemo(() => {\n      return (\n        <>\n          {highlightedData && (\n            <>\n              <StyledHighlightedDetailList as={nested ? 'div' : 'dl'}>\n                {highlightedData.map((child, i) => (\n                  // eslint-disable-next-line react/no-array-index-key\n                  <Fragment key={i}>{child}</Fragment>\n                ))}\n              </StyledHighlightedDetailList>\n\n              <hr />\n            </>\n          )}\n\n          <StyledDetailList\n            ref={listRef}\n            as={nested ? 'div' : 'dl'}\n            columnCount={columnCount}\n            labelLength={labelLength}\n            stacked={applyMobileView}\n            hasName={!!name}\n            nested={nested}\n            flex={asFlex}\n            wrapped={asFlex ? !flexRow : false}\n            variant={valueComparison ? 'value-comparison' : undefined}\n          >\n            {children}\n          </StyledDetailList>\n        </>\n      );\n    }, [\n      highlightedData,\n      nested,\n      columnCount,\n      labelLength,\n      applyMobileView,\n      name,\n      asFlex,\n      flexRow,\n      valueComparison,\n      children\n    ]);\n\n    return (\n      <DetailsContext.Provider value={contextValue}>\n        <StyledDetails>\n          {name && (\n            <StyledFieldValueGroupLabel>\n              {collapsible ? (\n                <Button\n                  type='button'\n                  variant='text'\n                  onClick={() => {\n                    setOpen(cur => !cur);\n                  }}\n                  aria-expanded={open ? 'true' : 'false'}\n                  aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n                >\n                  <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n                    <Icon name='caret-right' />\n                    {nameText}\n                  </Flex>\n                </Button>\n              ) : (\n                nameText\n              )}\n            </StyledFieldValueGroupLabel>\n          )}\n\n          {collapsible ? <ExpandCollapse collapsed={!open}>{details}</ExpandCollapse> : details}\n        </StyledDetails>\n      </DetailsContext.Provider>\n    );\n  }\n);\n\nexport default Details;\n"]}
+{"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} 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 isXsContentWidthOrAbove = useBreakpoint('xs', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const isMdContentWidthOrAbove = useBreakpoint('md', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const t = useI18n();\n\n    const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n    const [open, setOpen] = useState(true);\n\n    const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n    const headingDepth = depth ?? 1;\n    const applyMobileView = asFlex\n      ? mobileView ||\n        (flexRow && flexContextMobileView) ||\n        !isSmallOrAbove ||\n        !isXsContentWidthOrAbove\n      : mobileView || !isSmallOrAbove || !isXsContentWidthOrAbove;\n\n    const chToPxConversionFactor = useMemo(() => {\n      const chToPxDiv = document.createElement('div');\n      chToPxDiv.style.width = '1ch';\n      document.body.append(chToPxDiv);\n      const conversionFactor = chToPxDiv.offsetWidth;\n      chToPxDiv.remove();\n\n      return conversionFactor;\n    }, []);\n\n    /**\n     * Mount resize observer to update flex context mobile view & run initial check.\n     */\n    useEffect(() => {\n      const checkBreakpoint = (elementWidth: number) => {\n        const minWidthPx = parseInt(sm, 10) * chToPxConversionFactor;\n        const oneRemInPx = parseInt(remToPx(1), 10);\n        const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n        const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n        setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n      };\n      const resizeObserver = new ResizeObserver(entries => {\n        const containerPxWidth = entries[0].contentRect.width;\n        checkBreakpoint(containerPxWidth);\n      });\n\n      if (listRef.current) {\n        checkBreakpoint(listRef.current.offsetWidth);\n        resizeObserver.observe(listRef.current);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [listRef, columnCount]);\n\n    const contextValue = useMemo(() => {\n      return {\n        mobileView: applyMobileView,\n        depth: name ? headingDepth + 1 : headingDepth,\n        longestLabelLength,\n        ...context\n      };\n    }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n    const nameText = useMemo(() => {\n      return (\n        <Text variant={`h${Math.min(headingDepth, 6)}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>\n          {name}\n        </Text>\n      );\n    }, [name, headingDepth]);\n\n    const details = useMemo(() => {\n      return (\n        <>\n          {highlightedData && (\n            <>\n              <Flex\n                as={StyledHighlightedDetailList}\n                forwardedAs={nested ? 'div' : 'dl'}\n                container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n              >\n                {highlightedData.map((child, i) => (\n                  // eslint-disable-next-line react/no-array-index-key\n                  <Fragment key={i}>{child}</Fragment>\n                ))}\n              </Flex>\n\n              <hr />\n            </>\n          )}\n\n          {children ? (\n            <StyledDetailList\n              ref={listRef}\n              as={nested ? 'div' : 'dl'}\n              columnCount={columnCount}\n              labelLength={labelLength}\n              stacked={applyMobileView}\n              nested={nested}\n              flex={asFlex}\n              wrapped={asFlex ? !flexRow : false}\n              variant={valueComparison ? 'value-comparison' : undefined}\n              narrow={!isMdContentWidthOrAbove}\n            >\n              {children}\n            </StyledDetailList>\n          ) : null}\n        </>\n      );\n    }, [\n      highlightedData,\n      nested,\n      columnCount,\n      labelLength,\n      applyMobileView,\n      name,\n      asFlex,\n      flexRow,\n      valueComparison,\n      children\n    ]);\n\n    if (!name && !children && !highlightedData) return null;\n\n    return (\n      <DetailsContext.Provider value={contextValue}>\n        <StyledDetails>\n          {name && (\n            <StyledFieldValueGroupLabel>\n              {collapsible ? (\n                <Button\n                  type='button'\n                  variant='text'\n                  onClick={() => {\n                    setOpen(cur => !cur);\n                  }}\n                  aria-expanded={open ? 'true' : 'false'}\n                  aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n                >\n                  <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n                    <Icon name='caret-right' />\n                    {nameText}\n                  </Flex>\n                </Button>\n              ) : (\n                nameText\n              )}\n            </StyledFieldValueGroupLabel>\n          )}\n\n          {collapsible ? <ExpandCollapse collapsed={!open}>{details}</ExpandCollapse> : details}\n        </StyledDetails>\n      </DetailsContext.Provider>\n    );\n  }\n);\n\nexport default Details;\n"]}

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

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

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

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

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

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

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

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

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

package/lib/components/IntelligentGuidance/IntelligentGuidance.js

@@ -1,20 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
-import { Icon, registerIcon, useI18n, Count, useBreakpoint, useAfterInitialEffect } from '@pega/cosmos-react-core';
-import * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';
-import { StyledIntelligentGuidanceList, StyledIntelligentGuidance, StyledIntelligentGuidanceButton } from './IntelligentGuidance.styles';
-registerIcon(polarisSolidIcon);
+import { Icon, useI18n, useAfterInitialEffect, Text } from '@pega/cosmos-react-core';
+import { StyledIntelligentGuidanceList, StyledIntelligentGuidance, StyledNew, StyledBorderLine } from './IntelligentGuidance.styles';
 const IntelligentGuidance = forwardRef(({ items, heading, isCollapsed, onExpandCollapse, ...restProps }, ref) => {
     const t = useI18n();
-    const isMediumOrAbove = useBreakpoint('md');
     const summaryListRef = useRef(null);
     const toggleButtonRef = useRef(null);
     const listItems = items.map(item => {
         return {
             id: item.id,
             visual: _jsx(Icon, { name: item.icon }),
-            primary: item.label,
-            secondary: item.type,
+            primary: (_jsxs(_Fragment, { children: [item.label, item.new && (_jsxs(_Fragment, { children: [_jsx(StyledNew, { children: t('new') }), _jsx(StyledBorderLine, {})] }))] })),
+            secondary: _jsx(Text, { variant: 'secondary', children: item.type }),
             actions: item.onDismiss
                 ? [
                     {
@@ -55,7 +52,7 @@ const IntelligentGuidance = forwardRef(({ items, heading, isCollapsed, onExpandC
             }, 1000);
         }
     }, [isCollapsed]);
-    return (_jsx(StyledIntelligentGuidance, { ...restProps, ref: ref, role: 'region', "aria-live": 'polite', "aria-relevant": 'all', isCollapsed: isCollapsed, hasItems: !!items.length, children: isMediumOrAbove || !isCollapsed ? (_jsx(StyledIntelligentGuidanceList, { ref: summaryListRef, icon: 'polaris-solid', name: heading, count: items.length, items: listItems, actions: [
+    return (_jsx(StyledIntelligentGuidance, { ...restProps, ref: ref, role: 'region', "aria-live": 'polite', "aria-relevant": 'all', isCollapsed: isCollapsed, hasItems: !!items.length, children: _jsx(StyledIntelligentGuidanceList, { ref: summaryListRef, name: heading, count: items.length, items: listItems, actions: [
                 {
                     text: t(isCollapsed ? 'expand' : 'collapse'),
                     id: 'IntelligentGuidanceButton',
@@ -66,7 +63,7 @@ const IntelligentGuidance = forwardRef(({ items, heading, isCollapsed, onExpandC
                     onClick: onExpandCollapse,
                     ref: toggleButtonRef
                 }
-            ], EmptyStateText: t('no_recommendations'), style: { '--headerHeight': `${headerHeight}px` } })) : (_jsxs(StyledIntelligentGuidanceButton, { variant: 'simple', "aria-label": isCollapsed ? t('expand_noun', [heading]) : t('collapse_noun', [heading]), icon: true, onClick: onExpandCollapse, children: [_jsx(Icon, { name: 'polaris-solid' }), _jsx(Count, { children: items.length })] })) }));
+            ], EmptyStateText: t('no_recommendations'), style: { '--headerHeight': `${headerHeight}px` } }) }));
 });
 export default IntelligentGuidance;
 //# sourceMappingURL=IntelligentGuidance.js.map

package/lib/components/IntelligentGuidance/IntelligentGuidance.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  Icon,\n  registerIcon,\n  SummaryListItem,\n  useI18n,\n  Count,\n  useBreakpoint,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\n\nimport {\n  StyledIntelligentGuidanceList,\n  StyledIntelligentGuidance,\n  StyledIntelligentGuidanceButton\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nregisterIcon(polarisSolidIcon);\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      heading,\n      isCollapsed,\n      onExpandCollapse,\n      ...restProps\n    }: PropsWithoutRef<IntelligentGuidanceProps>,\n    ref: IntelligentGuidanceProps['ref']\n  ) => {\n    const t = useI18n();\n    const isMediumOrAbove = useBreakpoint('md');\n    const summaryListRef = useRef<HTMLElement>(null);\n    const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n    const listItems: SummaryListItem[] = items.map(item => {\n      return {\n        id: item.id,\n        visual: <Icon name={item.icon} />,\n        primary: item.label,\n        secondary: item.type,\n        actions: item.onDismiss\n          ? [\n              {\n                text: t('dismiss_label_a11y', [item.label]),\n                id: item.id,\n                icon: 'times',\n                onClick: (id, e) => {\n                  e.stopPropagation();\n                  item.onDismiss?.(id, e);\n                }\n              }\n            ]\n          : undefined,\n        container: { colGap: 1 },\n        role: 'button',\n        tabIndex: 0,\n        'aria-label': t('continue_label_a11y', [item.label]),\n        onClick: item.onClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            item.onClick(e);\n          }\n        }\n      };\n    });\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (summaryListRef.current) {\n        setHeaderHeight(summaryListRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [summaryListRef.current]);\n\n    // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n    useAfterInitialEffect(() => {\n      if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n        toggleButtonRef.current.blur();\n        setTimeout(() => {\n          toggleButtonRef.current?.focus();\n        }, 1000);\n      }\n    }, [isCollapsed]);\n\n    return (\n      <StyledIntelligentGuidance\n        {...restProps}\n        ref={ref}\n        role='region'\n        aria-live='polite'\n        aria-relevant='all'\n        isCollapsed={isCollapsed}\n        hasItems={!!items.length}\n      >\n        {isMediumOrAbove || !isCollapsed ? (\n          <StyledIntelligentGuidanceList\n            ref={summaryListRef}\n            icon='polaris-solid'\n            name={heading}\n            count={items.length}\n            items={listItems}\n            actions={[\n              {\n                text: t(isCollapsed ? 'expand' : 'collapse'),\n                id: 'IntelligentGuidanceButton',\n                icon: 'caret-down',\n                'aria-label': isCollapsed\n                  ? t('expand_noun', [heading])\n                  : t('collapse_noun', [heading]),\n                onClick: onExpandCollapse,\n                ref: toggleButtonRef\n              }\n            ]}\n            EmptyStateText={t('no_recommendations')}\n            style={{ '--headerHeight': `${headerHeight}px` }}\n          />\n        ) : (\n          <StyledIntelligentGuidanceButton\n            variant='simple'\n            aria-label={isCollapsed ? t('expand_noun', [heading]) : t('collapse_noun', [heading])}\n            icon\n            onClick={onExpandCollapse}\n          >\n            <Icon name='polaris-solid' />\n            <Count>{items.length}</Count>\n          </StyledIntelligentGuidanceButton>\n        )}\n      </StyledIntelligentGuidance>\n    );\n  }\n);\n\nexport default IntelligentGuidance;\n"]}
+{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  Icon,\n  SummaryListItem,\n  useI18n,\n  useAfterInitialEffect,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledIntelligentGuidanceList,\n  StyledIntelligentGuidance,\n  StyledNew,\n  StyledBorderLine\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n  (\n    {\n      items,\n      heading,\n      isCollapsed,\n      onExpandCollapse,\n      ...restProps\n    }: PropsWithoutRef<IntelligentGuidanceProps>,\n    ref: IntelligentGuidanceProps['ref']\n  ) => {\n    const t = useI18n();\n    const summaryListRef = useRef<HTMLElement>(null);\n    const toggleButtonRef = useRef<HTMLButtonElement>(null);\n\n    const listItems: SummaryListItem[] = items.map(item => {\n      return {\n        id: item.id,\n        visual: <Icon name={item.icon} />,\n        primary: (\n          <>\n            {item.label}\n            {item.new && (\n              <>\n                <StyledNew>{t('new')}</StyledNew>\n                {/* Can remove StyledBorderLine when Firefox supports :has selector. */}\n                <StyledBorderLine />\n              </>\n            )}\n          </>\n        ),\n        secondary: <Text variant='secondary'>{item.type}</Text>,\n        actions: item.onDismiss\n          ? [\n              {\n                text: t('dismiss_label_a11y', [item.label]),\n                id: item.id,\n                icon: 'times',\n                onClick: (id, e) => {\n                  e.stopPropagation();\n                  item.onDismiss?.(id, e);\n                }\n              }\n            ]\n          : undefined,\n        container: { colGap: 1 },\n        role: 'button',\n        tabIndex: 0,\n        'aria-label': t('continue_label_a11y', [item.label]),\n        onClick: item.onClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            item.onClick(e);\n          }\n        }\n      };\n    });\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (summaryListRef.current) {\n        setHeaderHeight(summaryListRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [summaryListRef.current]);\n\n    // FIXME: This is a hack to get the Tooltip to reset its position when the list is toggled.\n    useAfterInitialEffect(() => {\n      if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {\n        toggleButtonRef.current.blur();\n        setTimeout(() => {\n          toggleButtonRef.current?.focus();\n        }, 1000);\n      }\n    }, [isCollapsed]);\n\n    return (\n      <StyledIntelligentGuidance\n        {...restProps}\n        ref={ref}\n        role='region'\n        aria-live='polite'\n        aria-relevant='all'\n        isCollapsed={isCollapsed}\n        hasItems={!!items.length}\n      >\n        <StyledIntelligentGuidanceList\n          ref={summaryListRef}\n          name={heading}\n          count={items.length}\n          items={listItems}\n          actions={[\n            {\n              text: t(isCollapsed ? 'expand' : 'collapse'),\n              id: 'IntelligentGuidanceButton',\n              icon: 'caret-down',\n              'aria-label': isCollapsed\n                ? t('expand_noun', [heading])\n                : t('collapse_noun', [heading]),\n              onClick: onExpandCollapse,\n              ref: toggleButtonRef\n            }\n          ]}\n          EmptyStateText={t('no_recommendations')}\n          style={{ '--headerHeight': `${headerHeight}px` }}\n        />\n      </StyledIntelligentGuidance>\n    );\n  }\n);\n\nexport default IntelligentGuidance;\n"]}

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

@@ -1,5 +1,6 @@
+export declare const StyledNew: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBorderLine: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledIntelligentGuidanceList: import("styled-components").StyledComponent<import("react").FC<import("@pega/cosmos-react-core").SummaryListProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledIntelligentGuidanceButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export interface StyledIntelligentGuidanceProps {
     isCollapsed: boolean;
     hasItems: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"AAuBA,eAAO,MAAM,6BAA6B,2NA8ExC,CAAC;AAIH,eAAO,MAAM,+BAA+B,qOAiB1C,CAAC;AAaH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,qIAgCrC,CAAC"}
+{"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,SAAS,mOAmBpB,CAAC;AAIH,eAAO,MAAM,gBAAgB,0GAe3B,CAAC;AAIH,eAAO,MAAM,6BAA6B,2NAqFxC,CAAC;AAIH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,qIA0BrC,CAAC"}