@pega/cosmos-react-work 8.0.0-build.7.2 → 8.0.0-build.7.4

package/lib/components/Assignments/Assignments.js

@@ -14,7 +14,7 @@ const Assignments = ({ items, count, collapsed, onToggleCollapsed, ...restProps
     const header = (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && _jsx(Icon, { name: 'caret-right' }), _jsx(Text, { variant: 'h2', children: t('assignments') }), _jsx(Count, { children: count })] }));
     return (_jsxs(StyledAssignments, { ...restProps, openItem: !!openItem, "data-app-region": true, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && onToggleCollapsed && (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
                             onToggleCollapsed();
-                        }, "aria-controls": assignmentsId, "aria-expanded": !collapsed ? 'true' : 'false', "aria-label": t('assignments'), children: header })), collapsed === undefined && header] })), typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: tasks })) : (tasks)] }));
+                        }, "aria-controls": assignmentsId, "aria-expanded": !collapsed, "aria-label": t('assignments'), children: header })), collapsed === undefined && header] })), typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: tasks })) : (tasks)] }));
 };
 export default Assignments;
 //# sourceMappingURL=Assignments.js.map

package/lib/components/Assignments/Assignments.js.map

@@ -1 +1 @@
-{"version":3,"file":"Assignments.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,UAAU,EACV,OAAO,EACP,UAAU,EACV,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAkB7E,MAAM,WAAW,GAAwC,CAAC,EACxD,KAAK,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,QAAQ,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAC5E,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,KAAK,GAAG,KAAC,WAAW,cAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GAAe,CAAC;IAEzF,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,OAAO,SAAS,KAAK,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC9D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,EAC5C,KAAC,KAAK,cAAE,KAAK,GAAS,IACjB,CACR,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,OAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,sCACnD,CAAC,QAAQ,IAAI,CACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CACtD,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,EAAE,CAAC;wBACtB,CAAC,mBACc,aAAa,mBACb,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAChC,CAAC,CAAC,aAAa,CAAC,YAE3B,MAAM,GACY,CACtB,EACA,SAAS,KAAK,SAAS,IAAI,MAAM,IACvB,CACd,EAEA,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClE,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAAG,KAAK,GAAkB,CAC/D,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACiB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport type { FC } from 'react';\n\nimport {\n  CardHeader,\n  useI18n,\n  EmptyState,\n  ExpandCollapse,\n  Icon,\n  Text,\n  Count,\n  Flex,\n  useUID,\n  CardContent\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem } from '../Tasks/TaskList';\nimport type { TaskItemProps } from '../Tasks/TaskList';\n\nimport { StyledAssignments, StyledExpandButton } from './Assignments.styles';\n\nexport interface AssignmentsProps extends NoChildrenProp {\n  /** An array of TaskItemProps to generate the list. */\n  items: TaskItemProps[];\n  /** Integer representing the total count of tasks. */\n  count: number;\n  /**\n   * Controls the collapsed state of the assignments list.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Call when the user clicks the collapsed element.\n   */\n  onToggleCollapsed?: () => void;\n}\n\nconst Assignments: FC<ForwardProps & AssignmentsProps> = ({\n  items,\n  count,\n  collapsed,\n  onToggleCollapsed,\n  ...restProps\n}) => {\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n  const assignmentsId = useUID();\n\n  const TaskItems = useMemo(() => {\n    return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} />;\n  }, [items, openItem]);\n\n  const tasks = <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>;\n\n  const header = (\n    <Flex container={{ alignItems: 'center', gap: 1 }}>\n      {typeof collapsed === 'boolean' && <Icon name='caret-right' />}\n      <Text variant='h2'>{t('assignments')}</Text>\n      <Count>{count}</Count>\n    </Flex>\n  );\n\n  return (\n    <StyledAssignments {...restProps} openItem={!!openItem} data-app-region>\n      {!openItem && (\n        <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n          {typeof collapsed === 'boolean' && onToggleCollapsed && (\n            <StyledExpandButton\n              type='button'\n              variant='text'\n              onClick={() => {\n                onToggleCollapsed();\n              }}\n              aria-controls={assignmentsId}\n              aria-expanded={!collapsed ? 'true' : 'false'}\n              aria-label={t('assignments')}\n            >\n              {header}\n            </StyledExpandButton>\n          )}\n          {collapsed === undefined && header}\n        </CardHeader>\n      )}\n\n      {typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (\n        <ExpandCollapse collapsed={collapsed}>{tasks}</ExpandCollapse>\n      ) : (\n        tasks\n      )}\n    </StyledAssignments>\n  );\n};\n\nexport default Assignments;\n"]}
+{"version":3,"file":"Assignments.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,UAAU,EACV,OAAO,EACP,UAAU,EACV,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACN,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAkB7E,MAAM,WAAW,GAAwC,CAAC,EACxD,KAAK,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,QAAQ,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAC5E,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,KAAK,GAAG,KAAC,WAAW,cAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GAAe,CAAC;IAEzF,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,OAAO,SAAS,KAAK,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC9D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,EAC5C,KAAC,KAAK,cAAE,KAAK,GAAS,IACjB,CACR,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,OAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,sCACnD,CAAC,QAAQ,IAAI,CACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CACtD,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,EAAE,CAAC;wBACtB,CAAC,mBACc,aAAa,mBACb,CAAC,SAAS,gBACb,CAAC,CAAC,aAAa,CAAC,YAE3B,MAAM,GACY,CACtB,EACA,SAAS,KAAK,SAAS,IAAI,MAAM,IACvB,CACd,EAEA,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClE,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAAG,KAAK,GAAkB,CAC/D,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACiB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport type { FC } from 'react';\n\nimport {\n  CardHeader,\n  useI18n,\n  EmptyState,\n  ExpandCollapse,\n  Icon,\n  Text,\n  Count,\n  Flex,\n  useUID,\n  CardContent\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem } from '../Tasks/TaskList';\nimport type { TaskItemProps } from '../Tasks/TaskList';\n\nimport { StyledAssignments, StyledExpandButton } from './Assignments.styles';\n\nexport interface AssignmentsProps extends NoChildrenProp {\n  /** An array of TaskItemProps to generate the list. */\n  items: TaskItemProps[];\n  /** Integer representing the total count of tasks. */\n  count: number;\n  /**\n   * Controls the collapsed state of the assignments list.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Call when the user clicks the collapsed element.\n   */\n  onToggleCollapsed?: () => void;\n}\n\nconst Assignments: FC<ForwardProps & AssignmentsProps> = ({\n  items,\n  count,\n  collapsed,\n  onToggleCollapsed,\n  ...restProps\n}) => {\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n  const assignmentsId = useUID();\n\n  const TaskItems = useMemo(() => {\n    return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} />;\n  }, [items, openItem]);\n\n  const tasks = <CardContent>{items.length > 0 ? TaskItems : <EmptyState />}</CardContent>;\n\n  const header = (\n    <Flex container={{ alignItems: 'center', gap: 1 }}>\n      {typeof collapsed === 'boolean' && <Icon name='caret-right' />}\n      <Text variant='h2'>{t('assignments')}</Text>\n      <Count>{count}</Count>\n    </Flex>\n  );\n\n  return (\n    <StyledAssignments {...restProps} openItem={!!openItem} data-app-region>\n      {!openItem && (\n        <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n          {typeof collapsed === 'boolean' && onToggleCollapsed && (\n            <StyledExpandButton\n              type='button'\n              variant='text'\n              onClick={() => {\n                onToggleCollapsed();\n              }}\n              aria-controls={assignmentsId}\n              aria-expanded={!collapsed}\n              aria-label={t('assignments')}\n            >\n              {header}\n            </StyledExpandButton>\n          )}\n          {collapsed === undefined && header}\n        </CardHeader>\n      )}\n\n      {typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (\n        <ExpandCollapse collapsed={collapsed}>{tasks}</ExpandCollapse>\n      ) : (\n        tasks\n      )}\n    </StyledAssignments>\n  );\n};\n\nexport default Assignments;\n"]}

package/lib/components/Details/Details.js

@@ -104,7 +104,7 @@ const Details = forwardRef(function Details({ testId, highlightedData, columns,
     ]);
     return (_jsx(DetailsContext.Provider, { value: contextValue, children: _jsxs(StyledDetails, { "data-testid": testIds.root, ref: containerRef, variant: applyVariant, children: [name && (_jsx(StyledFieldValueGroupLabel, { "data-testid": testIds.heading, children: _jsx(Flex, { container: { alignItems: 'center', gap: 0.5 }, 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] })) }) })), collapsible ? (_jsx(ExpandCollapse, { "data-testid": testIds.expandCollapse, collapsed: !open, children: content })) : (content)] }) }));
+                                    }, "aria-expanded": open, "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] })) }) })), collapsible ? (_jsx(ExpandCollapse, { "data-testid": testIds.expandCollapse, collapsed: !open, children: content })) : (content)] }) }));
 });
 export default withTestIds(Details, getDetailsTestIds);
 //# sourceMappingURL=Details.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvF,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EACL,cAAc,EACd,IAAI,EACJ,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,yBAAyB,EACzB,OAAO,EACP,IAAI,EACJ,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAQjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,0BAA0B,EAC1B,aAAa,EACb,2BAA2B,EAC3B,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,kBAAkB,CAAC;AAyD1B,MAAM,OAAO,GAAoC,UAAU,CAAC,SAAS,OAAO,CAC1E,EACE,MAAM,EACN,eAAe,EACf,OAAO,EACP,IAAI,EACJ,WAAW,EACX,WAAW,EACX,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,cAAc,EAAE,kBAAkB,EACnC,EACD,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IACtD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,GAAG,OAAO,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE7E,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEvC,iCAAiC;IACjC,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE;QACxB,IAAI,KAAK,GAAgB,CAAC,CAAC;QAE3B,IAAI,OAAO,CAAC,CAAC;YAAE,KAAK,GAAG,CAAC,CAAC;QACzB,IAAI,OAAO,CAAC,CAAC;YAAE,KAAK,GAAG,CAAC,CAAC;QAEzB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,EAAE,CAAC;IACL,MAAM,EACJ,IAAI,EAAE,EACJ,eAAe,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,EACxC,EACF,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,sBAAsB,GAAG,yBAAyB,EAAE,CAAC;IAE3D,MAAM,gBAAgB,GAAG,aAAa,CAAC,IAAI,EAAE;QAC3C,aAAa,EAAE,YAAY;QAC3B,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,aAAa,CAAC,IAAI,EAAE;QACzC,aAAa,EAAE,YAAY;QAC3B,SAAS,EAAE,eAAe;KAC3B,CAAC,CAAC;IACH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,CAAC,YAAoB,EAAE,EAAE;YAC/C,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,EAAE,EAAE,CAAC,GAAG,sBAAsB,CAAC;YACzE,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC5C,MAAM,iBAAiB,GAAG,UAAU,GAAG,CAAC,GAAG,GAAG,mBAAmB,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;YACvF,MAAM,oBAAoB,GAAG,UAAU,GAAG,WAAW,GAAG,iBAAiB,CAAC;YAE1E,oBAAoB,CAAC,YAAY,GAAG,oBAAoB,CAAC,CAAC;QAC5D,CAAC,CAAC;QACF,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAClD,MAAM,gBAAgB,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;YACtD,eAAe,CAAC,gBAAgB,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;QAEH,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YAClD,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QAED,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,UAAU;IACV,MAAM,YAAY,GAAG,KAAK,IAAI,CAAC,CAAC;IAChC,MAAM,YAAY,GAAG,OAAO,KAAK,aAAa,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,eAAe,CAAC;IAE7F,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO;YACL,GAAG,OAAO;YACV,UAAU,EAAE,iBAAiB;YAC7B,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY;YAC7C,YAAY,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY;YACxD,kBAAkB;SACnB,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvF,oBAAoB;IACpB,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC,EAAgB,YAAG,IAAI,GAAQ,CAAC;IACrF,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC;IAEzB,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,IAAI,IAAI,kBAAkB,CAAC,CAAC,CAAC,CAClC,KAAC,cAAc,IAAC,OAAO,EAAE,kBAAkB,CAAC,OAAO,EAAE,eAAe,EAAE,IAAI,YACvE,kBAAkB,CAAC,OAAO,GACZ,CAClB,CAAC,CAAC,CAAC,SAAS,CAAC;IAChB,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,OAAO,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC,CAAC;IAErE,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,gBAAgB,GAAG,WAAW,CAAC;QAEnC,IAAI,WAAW,KAAK,CAAC,EAAE,CAAC;YACtB,IAAI,WAAW,KAAK,CAAC,IAAI,gBAAgB,EAAE,CAAC;gBAC1C,gBAAgB,GAAG,CAAC,CAAC;YACvB,CAAC;iBAAM,IAAI,cAAc,EAAE,CAAC;gBAC1B,gBAAgB,GAAG,CAAC,CAAC;YACvB,CAAC;iBAAM,CAAC;gBACN,gBAAgB,GAAG,CAAC,CAAC;YACvB,CAAC;QACH,CAAC;QAED,OAAO,CACL,8BACG,WAAW,IAAI,CACd,KAAC,uBAAuB,mBAAc,OAAO,CAAC,WAAW,YACvD,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,OAAO,EAAE,WAAW,GAAI,GACb,CAC3B,EAEA,eAAe,IAAI,CAClB,8BACE,KAAC,IAAI,mBACU,OAAO,CAAC,eAAe,EACpC,EAAE,EAAE,2BAA2B,EAC/B,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,YAEtE,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;4BACjC,oDAAoD;4BACpD,KAAC,QAAQ,cAAU,KAAK,IAAT,CAAC,CAAoB,CACrC,CAAC,GACG,EAEP,cAAM,IACL,CACJ,EAED,MAAC,IAAI,IACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;wBACT,SAAS,EAAE,KAAK;wBAChB,MAAM,EAAE,mBAAmB;qBAC5B,iBACY,OAAO,CAAC,IAAI,EACzB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,WAAW,EAAE,gBAAgB,aAE7B,KAAC,kBAAkB,cAAE,OAAO,CAAC,CAAC,GAAsB,EACnD,OAAO,CAAC,CAAC,IAAI,KAAC,kBAAkB,cAAE,OAAO,CAAC,CAAC,GAAsB,EACjE,OAAO,CAAC,CAAC,IAAI,KAAC,kBAAkB,cAAE,OAAO,CAAC,CAAC,GAAsB,IAC7D,IACN,CACJ,CAAC;IACJ,CAAC,EAAE;QACD,eAAe;QACf,WAAW;QACX,OAAO,CAAC,CAAC;QACT,OAAO,CAAC,CAAC;QACT,OAAO,CAAC,CAAC;QACT,WAAW;QACX,OAAO;QACP,cAAc;QACd,gBAAgB;QAChB,WAAW;KACZ,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC1C,MAAC,aAAa,mBAAc,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,aAC/E,IAAI,IAAI,CACP,KAAC,0BAA0B,mBAAc,OAAO,CAAC,OAAO,YACtD,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,YAChD,WAAW,CAAC,CAAC,CAAC,CACb,8BACE,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;wCACZ,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;oCACvB,CAAC,mBACc,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC1B,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,CAAC,YAE7D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAC,MAAM,aAC5D,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC1B,QAAQ,IACJ,GACA,EACR,cAAc,IACd,CACJ,CAAC,CAAC,CAAC,CACF,8BACG,QAAQ,EACR,cAAc,IACd,CACJ,GACI,GACoB,CAC9B,EAEA,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,cAAc,mBAAc,OAAO,CAAC,cAAc,EAAE,SAAS,EAAE,CAAC,IAAI,YAClE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,IACa,GACQ,CAC3B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC","sourcesContent":["import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';\nimport type { FC, ReactNode, Ref } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  AdditionalInfo,\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useTheme,\n  ExpandCollapse,\n  Button,\n  Flex,\n  Icon,\n  useChToPxConversionFactor,\n  useI18n,\n  HTML,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n  AdditionalInfoProps,\n  ForwardProps,\n  HeadingTag,\n  TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledHighlightedDetailList,\n  StyledDetailDescription,\n  StyledDetailColumns,\n  columnGapMultiplier,\n  StyledDetailColumn\n} from './Details.styles';\n\ntype ColumnCount = 1 | 2 | 3;\n\nexport type DetailsProps = TestIdProp & {\n  /**\n   * FieldValueItems to display as highlighted data above children\n   */\n  highlightedData?: ReactNode[];\n  /** Copy placed in paragraph below the name */\n  description?: string;\n  /**\n   * Template children separated into 1-3 columns {a, b, c}\n   */\n  columns:\n    | {\n        a: ReactNode;\n        b?: never;\n        c?: never;\n      }\n    | {\n        a: ReactNode;\n        b: ReactNode;\n        c?: never;\n      }\n    | {\n        a: ReactNode;\n        b: ReactNode;\n        c: ReactNode;\n      };\n  /** Arrangement of columns */\n  arrangement?: 'narrowWide' | 'wideNarrow';\n  /** Style variant applied to element */\n  variant?: 'field-group';\n  ref?: Ref<HTMLDivElement>;\n} & (\n    | {\n        /** Text used as heading of list */\n        name: string;\n        /** Pass a heading and content to show additional information on the list */\n        additionalInfo?: {\n          heading?: AdditionalInfoProps['heading'];\n          content: AdditionalInfoProps['children'];\n        };\n        /**\n         * Whether the items children can be collapsed (only applies if name is provided)\n         * @default false\n         */\n        collapsible?: boolean;\n      }\n    | {\n        name?: undefined;\n        additionalInfo?: never;\n        collapsible?: never;\n      }\n  );\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(function Details(\n  {\n    testId,\n    highlightedData,\n    columns,\n    name,\n    description,\n    arrangement,\n    variant,\n    collapsible = false,\n    additionalInfo: additionalInfoProp\n  },\n  ref\n) {\n  const testIds = useTestIds(testId, getDetailsTestIds);\n  const t = useI18n();\n  const { longestLabelLength, depth, ...context } = useContext(DetailsContext);\n\n  const containerRef = useConsolidatedRef(ref);\n  const [open, setOpen] = useState(true);\n\n  // Observer and state for mobile.\n  const columnCount = (() => {\n    let count: ColumnCount = 1;\n\n    if (columns.b) count = 2;\n    if (columns.c) count = 3;\n\n    return count;\n  })();\n  const {\n    base: {\n      'content-width': { sm: smContentWidth }\n    }\n  } = useTheme();\n  const chToPxConversionFactor = useChToPxConversionFactor();\n\n  const fitsThreeColumns = useBreakpoint('xl', {\n    breakpointRef: containerRef,\n    themeProp: 'content-width'\n  });\n  const fitsTwoColumns = useBreakpoint('md', {\n    breakpointRef: containerRef,\n    themeProp: 'content-width'\n  });\n  const [contentMobileView, setContentMobileView] = useState(false);\n\n  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 * columnGapMultiplier) * (columnCount - 1);\n      const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n      setContentMobileView(elementWidth < mobileViewBreakpoint);\n    };\n    const resizeObserver = new ResizeObserver(entries => {\n      const containerPxWidth = entries[0].contentRect.width;\n      checkBreakpoint(containerPxWidth);\n    });\n\n    if (containerRef.current) {\n      checkBreakpoint(containerRef.current.offsetWidth);\n      resizeObserver.observe(containerRef.current);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [columnCount]);\n\n  // Context\n  const headingDepth = depth ?? 1;\n  const asFieldGroup = variant === 'field-group' && !!name && !description && !highlightedData;\n\n  const contextValue = useMemo(() => {\n    return {\n      ...context,\n      mobileView: contentMobileView,\n      depth: name ? headingDepth + 1 : headingDepth,\n      inFieldGroup: context.inFieldGroup ? true : asFieldGroup,\n      longestLabelLength\n    };\n  }, [name, headingDepth, longestLabelLength, contentMobileView, asFieldGroup, context]);\n\n  // Memoized Elements\n  const applyVariant = asFieldGroup ? 'field-group' : undefined;\n\n  const nameText = useMemo(() => {\n    return <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n  }, [name, headingDepth]);\n\n  const additionalInfo = useMemo(() => {\n    return name && additionalInfoProp ? (\n      <AdditionalInfo heading={additionalInfoProp.heading} contextualLabel={name}>\n        {additionalInfoProp.content}\n      </AdditionalInfo>\n    ) : undefined;\n  }, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n  const content = useMemo(() => {\n    let applyColumnCount = columnCount;\n\n    if (columnCount !== 1) {\n      if (columnCount === 3 && fitsThreeColumns) {\n        applyColumnCount = 3;\n      } else if (fitsTwoColumns) {\n        applyColumnCount = 2;\n      } else {\n        applyColumnCount = 1;\n      }\n    }\n\n    return (\n      <>\n        {description && (\n          <StyledDetailDescription data-testid={testIds.description}>\n            <HTML as='p' content={description} />\n          </StyledDetailDescription>\n        )}\n\n        {highlightedData && (\n          <>\n            <Flex\n              data-testid={testIds.highlightedData}\n              as={StyledHighlightedDetailList}\n              container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n            >\n              {highlightedData.map((child, i) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <Fragment key={i}>{child}</Fragment>\n              ))}\n            </Flex>\n\n            <hr />\n          </>\n        )}\n\n        <Flex\n          as={StyledDetailColumns}\n          container={{\n            direction: 'row',\n            colGap: columnGapMultiplier\n          }}\n          data-testid={testIds.data}\n          arrangement={arrangement}\n          variant={applyVariant}\n          columnCount={applyColumnCount}\n        >\n          <StyledDetailColumn>{columns.a}</StyledDetailColumn>\n          {columns.b && <StyledDetailColumn>{columns.b}</StyledDetailColumn>}\n          {columns.c && <StyledDetailColumn>{columns.c}</StyledDetailColumn>}\n        </Flex>\n      </>\n    );\n  }, [\n    highlightedData,\n    columnCount,\n    columns.a,\n    columns.b,\n    columns.c,\n    arrangement,\n    testIds,\n    fitsTwoColumns,\n    fitsThreeColumns,\n    description\n  ]);\n\n  return (\n    <DetailsContext.Provider value={contextValue}>\n      <StyledDetails data-testid={testIds.root} ref={containerRef} variant={applyVariant}>\n        {name && (\n          <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n            <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n              {collapsible ? (\n                <>\n                  <Button\n                    type='button'\n                    variant='text'\n                    onClick={() => {\n                      setOpen(cur => !cur);\n                    }}\n                    aria-expanded={open ? '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        {collapsible ? (\n          <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n            {content}\n          </ExpandCollapse>\n        ) : (\n          content\n        )}\n      </StyledDetails>\n    </DetailsContext.Provider>\n  );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';\nimport type { FC, ReactNode, Ref } from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  AdditionalInfo,\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useTheme,\n  ExpandCollapse,\n  Button,\n  Flex,\n  Icon,\n  useChToPxConversionFactor,\n  useI18n,\n  HTML,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type {\n  AdditionalInfoProps,\n  ForwardProps,\n  HeadingTag,\n  TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledHighlightedDetailList,\n  StyledDetailDescription,\n  StyledDetailColumns,\n  columnGapMultiplier,\n  StyledDetailColumn\n} from './Details.styles';\n\ntype ColumnCount = 1 | 2 | 3;\n\nexport type DetailsProps = TestIdProp & {\n  /**\n   * FieldValueItems to display as highlighted data above children\n   */\n  highlightedData?: ReactNode[];\n  /** Copy placed in paragraph below the name */\n  description?: string;\n  /**\n   * Template children separated into 1-3 columns {a, b, c}\n   */\n  columns:\n    | {\n        a: ReactNode;\n        b?: never;\n        c?: never;\n      }\n    | {\n        a: ReactNode;\n        b: ReactNode;\n        c?: never;\n      }\n    | {\n        a: ReactNode;\n        b: ReactNode;\n        c: ReactNode;\n      };\n  /** Arrangement of columns */\n  arrangement?: 'narrowWide' | 'wideNarrow';\n  /** Style variant applied to element */\n  variant?: 'field-group';\n  ref?: Ref<HTMLDivElement>;\n} & (\n    | {\n        /** Text used as heading of list */\n        name: string;\n        /** Pass a heading and content to show additional information on the list */\n        additionalInfo?: {\n          heading?: AdditionalInfoProps['heading'];\n          content: AdditionalInfoProps['children'];\n        };\n        /**\n         * Whether the items children can be collapsed (only applies if name is provided)\n         * @default false\n         */\n        collapsible?: boolean;\n      }\n    | {\n        name?: undefined;\n        additionalInfo?: never;\n        collapsible?: never;\n      }\n  );\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(function Details(\n  {\n    testId,\n    highlightedData,\n    columns,\n    name,\n    description,\n    arrangement,\n    variant,\n    collapsible = false,\n    additionalInfo: additionalInfoProp\n  },\n  ref\n) {\n  const testIds = useTestIds(testId, getDetailsTestIds);\n  const t = useI18n();\n  const { longestLabelLength, depth, ...context } = useContext(DetailsContext);\n\n  const containerRef = useConsolidatedRef(ref);\n  const [open, setOpen] = useState(true);\n\n  // Observer and state for mobile.\n  const columnCount = (() => {\n    let count: ColumnCount = 1;\n\n    if (columns.b) count = 2;\n    if (columns.c) count = 3;\n\n    return count;\n  })();\n  const {\n    base: {\n      'content-width': { sm: smContentWidth }\n    }\n  } = useTheme();\n  const chToPxConversionFactor = useChToPxConversionFactor();\n\n  const fitsThreeColumns = useBreakpoint('xl', {\n    breakpointRef: containerRef,\n    themeProp: 'content-width'\n  });\n  const fitsTwoColumns = useBreakpoint('md', {\n    breakpointRef: containerRef,\n    themeProp: 'content-width'\n  });\n  const [contentMobileView, setContentMobileView] = useState(false);\n\n  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 * columnGapMultiplier) * (columnCount - 1);\n      const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n      setContentMobileView(elementWidth < mobileViewBreakpoint);\n    };\n    const resizeObserver = new ResizeObserver(entries => {\n      const containerPxWidth = entries[0].contentRect.width;\n      checkBreakpoint(containerPxWidth);\n    });\n\n    if (containerRef.current) {\n      checkBreakpoint(containerRef.current.offsetWidth);\n      resizeObserver.observe(containerRef.current);\n    }\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [columnCount]);\n\n  // Context\n  const headingDepth = depth ?? 1;\n  const asFieldGroup = variant === 'field-group' && !!name && !description && !highlightedData;\n\n  const contextValue = useMemo(() => {\n    return {\n      ...context,\n      mobileView: contentMobileView,\n      depth: name ? headingDepth + 1 : headingDepth,\n      inFieldGroup: context.inFieldGroup ? true : asFieldGroup,\n      longestLabelLength\n    };\n  }, [name, headingDepth, longestLabelLength, contentMobileView, asFieldGroup, context]);\n\n  // Memoized Elements\n  const applyVariant = asFieldGroup ? 'field-group' : undefined;\n\n  const nameText = useMemo(() => {\n    return <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n  }, [name, headingDepth]);\n\n  const additionalInfo = useMemo(() => {\n    return name && additionalInfoProp ? (\n      <AdditionalInfo heading={additionalInfoProp.heading} contextualLabel={name}>\n        {additionalInfoProp.content}\n      </AdditionalInfo>\n    ) : undefined;\n  }, [name, additionalInfoProp?.heading, additionalInfoProp?.content]);\n\n  const content = useMemo(() => {\n    let applyColumnCount = columnCount;\n\n    if (columnCount !== 1) {\n      if (columnCount === 3 && fitsThreeColumns) {\n        applyColumnCount = 3;\n      } else if (fitsTwoColumns) {\n        applyColumnCount = 2;\n      } else {\n        applyColumnCount = 1;\n      }\n    }\n\n    return (\n      <>\n        {description && (\n          <StyledDetailDescription data-testid={testIds.description}>\n            <HTML as='p' content={description} />\n          </StyledDetailDescription>\n        )}\n\n        {highlightedData && (\n          <>\n            <Flex\n              data-testid={testIds.highlightedData}\n              as={StyledHighlightedDetailList}\n              container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n            >\n              {highlightedData.map((child, i) => (\n                // eslint-disable-next-line react/no-array-index-key\n                <Fragment key={i}>{child}</Fragment>\n              ))}\n            </Flex>\n\n            <hr />\n          </>\n        )}\n\n        <Flex\n          as={StyledDetailColumns}\n          container={{\n            direction: 'row',\n            colGap: columnGapMultiplier\n          }}\n          data-testid={testIds.data}\n          arrangement={arrangement}\n          variant={applyVariant}\n          columnCount={applyColumnCount}\n        >\n          <StyledDetailColumn>{columns.a}</StyledDetailColumn>\n          {columns.b && <StyledDetailColumn>{columns.b}</StyledDetailColumn>}\n          {columns.c && <StyledDetailColumn>{columns.c}</StyledDetailColumn>}\n        </Flex>\n      </>\n    );\n  }, [\n    highlightedData,\n    columnCount,\n    columns.a,\n    columns.b,\n    columns.c,\n    arrangement,\n    testIds,\n    fitsTwoColumns,\n    fitsThreeColumns,\n    description\n  ]);\n\n  return (\n    <DetailsContext.Provider value={contextValue}>\n      <StyledDetails data-testid={testIds.root} ref={containerRef} variant={applyVariant}>\n        {name && (\n          <StyledFieldValueGroupLabel data-testid={testIds.heading}>\n            <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n              {collapsible ? (\n                <>\n                  <Button\n                    type='button'\n                    variant='text'\n                    onClick={() => {\n                      setOpen(cur => !cur);\n                    }}\n                    aria-expanded={open}\n                    aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n                  >\n                    <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n                      <Icon name='caret-right' />\n                      {nameText}\n                    </Flex>\n                  </Button>\n                  {additionalInfo}\n                </>\n              ) : (\n                <>\n                  {nameText}\n                  {additionalInfo}\n                </>\n              )}\n            </Flex>\n          </StyledFieldValueGroupLabel>\n        )}\n\n        {collapsible ? (\n          <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n            {content}\n          </ExpandCollapse>\n        ) : (\n          content\n        )}\n      </StyledDetails>\n    </DetailsContext.Provider>\n  );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}

package/lib/components/GenAICoach/InitialSuggestedMessage.js

@@ -12,7 +12,7 @@ const InitialSuggestedMessage = function SuggestionCard({ id, message, testId, o
                 e.preventDefault();
                 onSend({ id, message });
             }
-        }, "data-testId": testIds.root, children: [_jsx(CardContent, { children: _jsx(Flex, { container: { alignItems: 'center' }, children: message }) }), _jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(Icon, { name: `arrow-${end}` }) })] }));
+        }, "data-testid": testIds.root, children: [_jsx(CardContent, { children: _jsx(Flex, { container: { alignItems: 'center' }, children: message }) }), _jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(Icon, { name: `arrow-${end}` }) })] }));
 };
 export default InitialSuggestedMessage;
 //# sourceMappingURL=InitialSuggestedMessage.js.map

package/lib/components/GenAICoach/InitialSuggestedMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InitialSuggestedMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/InitialSuggestedMessage.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGlG,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,MAAM,uBAAuB,GAC3B,SAAS,cAAc,CAAC,EACtB,EAAE,EACF,OAAO,EACP,MAAM,EACN,MAAM,EACwC;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IACzD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EACjC,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,GAAG,EAAE;YACZ,MAAM,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;QAC1B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,MAAM,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,iBACY,OAAO,CAAC,IAAI,aAEzB,KAAC,WAAW,cACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAG,OAAO,GAAQ,GAC/C,EACd,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACvC,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAI,GACzB,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEJ,eAAe,uBAAuB,CAAC","sourcesContent":["import type { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport { Card, CardContent, Flex, Icon, useDirection, useTestIds } from '@pega/cosmos-react-core';\n\nimport type { InitialSuggestedMessageProps } from './GenAICoach.types';\nimport { StyledSuggestedMessage } from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\n\nconst InitialSuggestedMessage: FunctionComponent<InitialSuggestedMessageProps> =\n  function SuggestionCard({\n    id,\n    message,\n    testId,\n    onSend\n  }: PropsWithoutRef<InitialSuggestedMessageProps>) {\n    const testIds = useTestIds(testId, getGenAICoachTestIds);\n    const { end } = useDirection();\n\n    return (\n      <Card\n        container={{ justify: 'between' }}\n        as={StyledSuggestedMessage}\n        onClick={() => {\n          onSend({ id, message });\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            onSend({ id, message });\n          }\n        }}\n        data-testId={testIds.root}\n      >\n        <CardContent>\n          <Flex container={{ alignItems: 'center' }}>{message}</Flex>\n        </CardContent>\n        <Flex container={{ alignItems: 'center' }}>\n          <Icon name={`arrow-${end}`} />\n        </Flex>\n      </Card>\n    );\n  };\n\nexport default InitialSuggestedMessage;\n"]}
+{"version":3,"file":"InitialSuggestedMessage.js","sourceRoot":"","sources":["../../../src/components/GenAICoach/InitialSuggestedMessage.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGlG,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,MAAM,uBAAuB,GAC3B,SAAS,cAAc,CAAC,EACtB,EAAE,EACF,OAAO,EACP,MAAM,EACN,MAAM,EACwC;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IACzD,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,EACjC,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,GAAG,EAAE;YACZ,MAAM,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;QAC1B,CAAC,EACD,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,MAAM,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,iBACY,OAAO,CAAC,IAAI,aAEzB,KAAC,WAAW,cACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAG,OAAO,GAAQ,GAC/C,EACd,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACvC,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAG,EAAE,GAAI,GACzB,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEJ,eAAe,uBAAuB,CAAC","sourcesContent":["import type { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport { Card, CardContent, Flex, Icon, useDirection, useTestIds } from '@pega/cosmos-react-core';\n\nimport type { InitialSuggestedMessageProps } from './GenAICoach.types';\nimport { StyledSuggestedMessage } from './GenAICoach.styles';\nimport { getGenAICoachTestIds } from './GenAICoach.test-ids';\n\nconst InitialSuggestedMessage: FunctionComponent<InitialSuggestedMessageProps> =\n  function SuggestionCard({\n    id,\n    message,\n    testId,\n    onSend\n  }: PropsWithoutRef<InitialSuggestedMessageProps>) {\n    const testIds = useTestIds(testId, getGenAICoachTestIds);\n    const { end } = useDirection();\n\n    return (\n      <Card\n        container={{ justify: 'between' }}\n        as={StyledSuggestedMessage}\n        onClick={() => {\n          onSend({ id, message });\n        }}\n        onKeyDown={(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            onSend({ id, message });\n          }\n        }}\n        data-testid={testIds.root}\n      >\n        <CardContent>\n          <Flex container={{ alignItems: 'center' }}>{message}</Flex>\n        </CardContent>\n        <Flex container={{ alignItems: 'center' }}>\n          <Icon name={`arrow-${end}`} />\n        </Flex>\n      </Card>\n    );\n  };\n\nexport default InitialSuggestedMessage;\n"]}

package/lib/components/InteractionNotification/CountdownButton.js

@@ -35,7 +35,7 @@ const CountdownButton = forwardRef(function CountdownButton({ startTime, timeout
     // The proper definition will be captured and used with any changes to msRemaining.
     [msRemaining]);
     const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledAcceptButton, { ...restProps, "aria-describedby": descriptionId, ref: ref, children: [children, _jsx(Text, { "aria-hidden": 'true', children: timer })] }), _jsx(VisuallyHiddenText, { "aria-hidden": 'true', id: descriptionId, children: msRemaining > 0
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledAcceptButton, { ...restProps, "aria-describedby": descriptionId, ref: ref, children: [children, _jsx(Text, { "aria-hidden": true, children: timer })] }), _jsx(VisuallyHiddenText, { "aria-hidden": true, id: descriptionId, children: msRemaining > 0
                     ? t('interaction_time_remaining', [secondsRemaining], {
                         count: secondsRemaining
                     })

package/lib/components/InteractionNotification/CountdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountdownButton.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useState } from 'react';\nimport type { FunctionComponent, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useI18n,\n  Text,\n  VisuallyHiddenText,\n  useUID,\n  Button,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type { ButtonProps, ForwardProps } from '@pega/cosmos-react-core';\n\nexport interface CountdownButtonProps extends ButtonProps {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /** Start time of incoming Interaction. */\n  startTime: Date | number;\n  /** The time the user has to accept the call in seconds. */\n  timeout: number;\n  /** Callback invoked when timeout ends. */\n  onTimerEnd?: () => void;\n}\n\nconst formatDuration = (millis: number): string => {\n  const seconds = Math.round(millis / 1000);\n  return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, '0')}`;\n};\n\nconst StyledAcceptButton = styled(Button)(\n  ({ theme }) => css`\n    gap: ${theme.base.spacing};\n  `\n);\n\nStyledAcceptButton.defaultProps = defaultThemeProp;\n\nconst CountdownButton: FunctionComponent<CountdownButtonProps & ForwardProps> = forwardRef(\n  function CountdownButton(\n    { startTime, timeout, onTimerEnd, children, ...restProps }: CountdownButtonProps & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) {\n    const timeoutMs = timeout * 1000;\n    const start = Number(startTime);\n    const endTime = start + timeoutMs;\n    const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());\n\n    const secondsRemaining = Math.round(msRemaining / 1000);\n\n    const t = useI18n();\n    const descriptionId = useUID();\n\n    useEffect(\n      () => {\n        let timeoutId: number;\n\n        if (msRemaining > 0) {\n          timeoutId = window.setTimeout(() => {\n            setMsRemaining(endTime - Date.now());\n          }, 1000);\n        } else {\n          onTimerEnd?.();\n        }\n\n        return () => clearTimeout(timeoutId);\n      },\n      // Omitting onTimerEnd as an effect trigger on purpose.\n      // An unstable function definition in the prop causes the effect to run more than necessary.\n      // The proper definition will be captured and used with any changes to msRemaining.\n      [msRemaining]\n    );\n\n    const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';\n\n    return (\n      <>\n        <StyledAcceptButton {...restProps} aria-describedby={descriptionId} ref={ref}>\n          {children}\n          <Text aria-hidden='true'>{timer}</Text>\n        </StyledAcceptButton>\n        <VisuallyHiddenText aria-hidden='true' id={descriptionId}>\n          {msRemaining > 0\n            ? t('interaction_time_remaining', [secondsRemaining], {\n                count: secondsRemaining\n              })\n            : t('interaction_time_expired')}\n        </VisuallyHiddenText>\n      </>\n    );\n  }\n);\n\nexport default CountdownButton;\n"]}
+{"version":3,"file":"CountdownButton.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useState } from 'react';\nimport type { FunctionComponent, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useI18n,\n  Text,\n  VisuallyHiddenText,\n  useUID,\n  Button,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type { ButtonProps, ForwardProps } from '@pega/cosmos-react-core';\n\nexport interface CountdownButtonProps extends ButtonProps {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /** Start time of incoming Interaction. */\n  startTime: Date | number;\n  /** The time the user has to accept the call in seconds. */\n  timeout: number;\n  /** Callback invoked when timeout ends. */\n  onTimerEnd?: () => void;\n}\n\nconst formatDuration = (millis: number): string => {\n  const seconds = Math.round(millis / 1000);\n  return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, '0')}`;\n};\n\nconst StyledAcceptButton = styled(Button)(\n  ({ theme }) => css`\n    gap: ${theme.base.spacing};\n  `\n);\n\nStyledAcceptButton.defaultProps = defaultThemeProp;\n\nconst CountdownButton: FunctionComponent<CountdownButtonProps & ForwardProps> = forwardRef(\n  function CountdownButton(\n    { startTime, timeout, onTimerEnd, children, ...restProps }: CountdownButtonProps & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) {\n    const timeoutMs = timeout * 1000;\n    const start = Number(startTime);\n    const endTime = start + timeoutMs;\n    const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());\n\n    const secondsRemaining = Math.round(msRemaining / 1000);\n\n    const t = useI18n();\n    const descriptionId = useUID();\n\n    useEffect(\n      () => {\n        let timeoutId: number;\n\n        if (msRemaining > 0) {\n          timeoutId = window.setTimeout(() => {\n            setMsRemaining(endTime - Date.now());\n          }, 1000);\n        } else {\n          onTimerEnd?.();\n        }\n\n        return () => clearTimeout(timeoutId);\n      },\n      // Omitting onTimerEnd as an effect trigger on purpose.\n      // An unstable function definition in the prop causes the effect to run more than necessary.\n      // The proper definition will be captured and used with any changes to msRemaining.\n      [msRemaining]\n    );\n\n    const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';\n\n    return (\n      <>\n        <StyledAcceptButton {...restProps} aria-describedby={descriptionId} ref={ref}>\n          {children}\n          <Text aria-hidden>{timer}</Text>\n        </StyledAcceptButton>\n        <VisuallyHiddenText aria-hidden id={descriptionId}>\n          {msRemaining > 0\n            ? t('interaction_time_remaining', [secondsRemaining], {\n                count: secondsRemaining\n              })\n            : t('interaction_time_expired')}\n        </VisuallyHiddenText>\n      </>\n    );\n  }\n);\n\nexport default CountdownButton;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAyBhF,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,yBAAyB,CAAC;AAI1E,OAAO,KAAK,EACV,kBAAkB,EAInB,MAAM,uBAAuB,CAAC;AAgF/B,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiQvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAyBhF,OAAO,KAAK,EAAE,YAAY,EAAgB,MAAM,yBAAyB,CAAC;AAI1E,OAAO,KAAK,EACV,kBAAkB,EAInB,MAAM,uBAAuB,CAAC;AAgF/B,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAgQvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/SearchResults/SearchResults.js

@@ -29,7 +29,6 @@ const SearchResults = forwardRef(function SearchResults({ results, searchInputPr
     const { searchContainerEl } = useContext(AppShellContext);
     const { announcePolite } = useLiveLog();
     const filtersMethods = useRef();
-    const { placeholder = t('search_placeholder_default') } = searchInputProps;
     const { base: { palette: { 'brand-primary': primary } } } = useTheme();
     const [accent, setAccent] = useState();
     const [submittedSearchValue, setSubmittedSearchValue] = useState(searchInputProps.value);
@@ -86,7 +85,7 @@ const SearchResults = forwardRef(function SearchResults({ results, searchInputPr
     const searchInput = (_jsx(SearchInput, { ...searchInputProps, onSearchSubmit: val => {
             searchInputProps.onSearchSubmit?.(val);
             setSubmittedSearchValue(val);
-        }, placeholder: placeholder }));
+        }, placeholder: searchInputProps.placeholder }));
     return (_jsxs(Grid, { ...restProps, as: StyledSearchResults, ref: ref, md: filters.length
             ? {
                 container: {

package/lib/components/SearchResults/SearchResults.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ComponentProps } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n  Button,\n  Count,\n  Flex,\n  Grid,\n  Icon,\n  registerIcon,\n  Modal,\n  EmptyState,\n  SearchInput,\n  Text,\n  useModalManager,\n  useI18n,\n  useBreakpoint,\n  useAfterInitialEffect,\n  SummaryItem,\n  Avatar,\n  useTheme,\n  AppShellContext,\n  Progress,\n  useLiveLog\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, ModalMethods } from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport type {\n  SearchResultsProps,\n  SearchResultProps,\n  FilterProps,\n  ActiveFilters\n} from './SearchResults.types';\nimport SearchResult from './SearchResult';\nimport Filter from './Filter';\nimport {\n  StyledModalFilterContent,\n  StyledCountText,\n  StyledSelectedFilters,\n  StyledSearchResults,\n  StyledResults,\n  StyledFilters,\n  StyledSearchSummaryItem\n} from './SearchResults.styles';\nimport ActiveFilter from './ActiveFilter';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nconst FilterModal = (\n  props: Pick<\n    SearchResultsProps,\n    'count' | 'filters' | 'onFilterChange' | 'onClearFilter' | 'onClearAllFilters'\n  > & {\n    activeFilters: ActiveFilters[];\n  }\n) => {\n  const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;\n  const t = useI18n();\n\n  return (\n    <Modal heading={t('filters')}>\n      <Grid as={StyledModalFilterContent} container={{ rowGap: 2 }}>\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Text as={StyledCountText} variant='secondary'>\n            {t('results_count', [count], { count })}\n          </Text>\n          {onClearAllFilters && !!activeFilters.length && (\n            <Button variant='link' onClick={onClearAllFilters}>\n              {t('clear_all')}\n            </Button>\n          )}\n        </Flex>\n        {!!activeFilters.length && (\n          <Flex\n            as={StyledSelectedFilters}\n            container={{ gap: 1 }}\n            aria-label={t('search_results_active_filters')}\n          >\n            {activeFilters.map(filter => {\n              return (\n                <ActiveFilter\n                  key={filter.id}\n                  name={`${filter.groupName}: ${filter.name}`}\n                  onRemove={() =>\n                    onFilterChange?.({\n                      name: filter.groupName,\n                      type: filter.type,\n                      value: filter.resetValue\n                    })\n                  }\n                />\n              );\n            })}\n          </Flex>\n        )}\n        <div>\n          {filters.map((filter: FilterProps) => {\n            return (\n              <Filter\n                key={filter.name}\n                onFilterChange={onFilterChange}\n                onClearFilter={onClearFilter}\n                {...filter}\n              />\n            );\n          })}\n        </div>\n      </Grid>\n    </Modal>\n  );\n};\n\nconst SearchResults: FunctionComponent<SearchResultsProps & ForwardProps> = forwardRef(\n  function SearchResults(\n    {\n      results,\n      searchInputProps,\n      count,\n      filters,\n      onFilterChange,\n      onClearAllFilters,\n      onClearFilter,\n      onShowMore,\n      loading = false,\n      ...restProps\n    }: PropsWithoutRef<SearchResultsProps>,\n    ref: SearchResultsProps['ref']\n  ) {\n    const t = useI18n();\n    const isMedium = useBreakpoint('md');\n    const { create } = useModalManager();\n    const { searchContainerEl } = useContext(AppShellContext);\n    const { announcePolite } = useLiveLog();\n    const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\n    const { placeholder = t('search_placeholder_default') } = searchInputProps;\n    const {\n      base: {\n        palette: { 'brand-primary': primary }\n      }\n    } = useTheme();\n    const [accent, setAccent] = useState<undefined | RegExp>();\n    const [submittedSearchValue, setSubmittedSearchValue] = useState(searchInputProps.value);\n\n    const activeFilters: ActiveFilters[] = filters.flatMap(group => {\n      if (group.type === 'select') {\n        return group.items.flatMap(item => {\n          if (item.checked) {\n            return {\n              id: item.id,\n              name: item.name,\n              resetValue: { ...item, checked: false },\n              groupName: group.name,\n              type: group.type\n            };\n          }\n          return [];\n        });\n      }\n      return [];\n    });\n\n    const openFiltersModal = () => {\n      filtersMethods.current = create(FilterModal, {\n        activeFilters,\n        count,\n        filters,\n        onFilterChange,\n        onClearFilter,\n        onClearAllFilters\n      });\n    };\n\n    useAfterInitialEffect(() => {\n      if (filtersMethods.current) {\n        filtersMethods.current.update({\n          activeFilters,\n          count,\n          filters\n        });\n      }\n    }, [activeFilters, count, filters]);\n\n    useAfterInitialEffect(() => {\n      if (isMedium && filtersMethods.current) filtersMethods.current.dismiss();\n    }, [isMedium]);\n\n    useAfterInitialEffect(() => {\n      setAccent(submittedSearchValue ? new RegExp(submittedSearchValue, 'gi') : undefined);\n    }, [submittedSearchValue]);\n\n    useEffect(() => {\n      if (filters.length) announcePolite({ message: t('search_filter_update_message') });\n    }, []);\n\n    const searchTitle = (\n      <SummaryItem\n        as={StyledSearchSummaryItem}\n        visual={\n          <Avatar\n            icon='search'\n            name='search'\n            shape='squircle'\n            backgroundColor={primary}\n            color='white'\n          />\n        }\n        primary={<Text variant='h1'>{t('search')}</Text>}\n        actions={\n          onClearAllFilters &&\n          isMedium &&\n          !!activeFilters.length && (\n            <Button\n              variant='link'\n              onClick={onClearAllFilters}\n              aria-label={t('search_results_clear_all_filters')}\n            >\n              {t('clear_all')}\n            </Button>\n          )\n        }\n      />\n    );\n    const searchInput = (\n      <SearchInput\n        {...searchInputProps}\n        onSearchSubmit={val => {\n          searchInputProps.onSearchSubmit?.(val);\n          setSubmittedSearchValue(val);\n        }}\n        placeholder={placeholder}\n      />\n    );\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledSearchResults}\n        ref={ref}\n        md={\n          filters.length\n            ? {\n                container: {\n                  cols: '15rem auto'\n                }\n              }\n            : undefined\n        }\n        sm={\n          filters.length\n            ? {\n                container: {\n                  cols: 'auto',\n                  rowGap: 2\n                }\n              }\n            : undefined\n        }\n        container={{\n          rows: 'auto auto',\n          cols: 'auto 1fr',\n          areas: '\"filters results\"'\n        }}\n      >\n        {isMedium && !!filters.length && (\n          <Grid item={{ area: 'filters', alignSelf: 'start' }} as={StyledFilters}>\n            {searchTitle}\n            {filters.map((filter: FilterProps) => {\n              return (\n                <Filter\n                  key={filter.name}\n                  onFilterChange={onFilterChange}\n                  onClearFilter={onClearFilter}\n                  {...filter}\n                />\n              );\n            })}\n          </Grid>\n        )}\n        <Grid\n          item={{ alignSelf: 'start', area: 'results' }}\n          container={{\n            alignItems: 'center',\n            rowGap: 2,\n            rows: 'auto auto 1fr',\n            areas: '\"search\" \"meta\" \"items\"'\n          }}\n          as={StyledResults}\n        >\n          {loading && <Progress placement='local' />}\n          {searchContainerEl && isMedium ? (\n            createPortal(searchInput, searchContainerEl)\n          ) : (\n            <Grid item={{ area: 'search' }}>\n              {!isMedium && searchTitle}\n              {searchInput}\n            </Grid>\n          )}\n          <Grid item={{ area: 'meta' }} container={{ rowGap: 1 }}>\n            <Flex container={{ justify: 'between', alignItems: 'center' }}>\n              {!loading && (\n                <Text as={StyledCountText} variant='secondary'>\n                  {submittedSearchValue !== '' || results.length > 0\n                    ? t('results_count', [count], { count })\n                    : ''}\n                </Text>\n              )}\n              {!isMedium && !!filters.length && (\n                <Button variant='secondary' onClick={openFiltersModal}>\n                  <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n                  &nbsp;{t('filters')}&nbsp;\n                  <Count>{activeFilters.length}</Count>\n                </Button>\n              )}\n            </Flex>\n            {!!activeFilters.length && (\n              <Flex\n                as={StyledSelectedFilters}\n                container={{ gap: 1, wrap: 'wrap' }}\n                aria-label={t('search_results_active_filters')}\n              >\n                {activeFilters.map(filter => {\n                  return (\n                    <ActiveFilter\n                      key={filter.id}\n                      name={`${filter.groupName}: ${filter.name}`}\n                      onRemove={() =>\n                        onFilterChange?.({\n                          name: filter.groupName,\n                          type: filter.type,\n                          value: filter.resetValue\n                        })\n                      }\n                    />\n                  );\n                })}\n              </Flex>\n            )}\n          </Grid>\n          <Grid\n            item={{ area: 'items', alignSelf: results.length ? 'start' : 'stretch' }}\n            container={{ rowGap: 2 }}\n          >\n            {!loading && (\n              <>\n                {results.length ? (\n                  results.map((result: SearchResultProps) => {\n                    return <SearchResult key={result.id} {...result} accent={accent} />;\n                  })\n                ) : (\n                  <Grid item={{ alignSelf: 'stretch' }}>\n                    <EmptyState\n                      message={submittedSearchValue === '' ? t('empty_search') : undefined}\n                    />\n                  </Grid>\n                )}\n                {onShowMore && (\n                  <Flex container={{ justify: 'center' }}>\n                    <Button variant='link' onClick={onShowMore}>\n                      {t('show_more')}\n                    </Button>\n                  </Flex>\n                )}\n              </>\n            )}\n          </Grid>\n        </Grid>\n      </Grid>\n    );\n  }\n);\n\nexport default SearchResults;\n"]}
+{"version":3,"file":"SearchResults.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ComponentProps } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n  Button,\n  Count,\n  Flex,\n  Grid,\n  Icon,\n  registerIcon,\n  Modal,\n  EmptyState,\n  SearchInput,\n  Text,\n  useModalManager,\n  useI18n,\n  useBreakpoint,\n  useAfterInitialEffect,\n  SummaryItem,\n  Avatar,\n  useTheme,\n  AppShellContext,\n  Progress,\n  useLiveLog\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, ModalMethods } from '@pega/cosmos-react-core';\nimport * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';\nimport * as filterOnIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter-on.icon';\n\nimport type {\n  SearchResultsProps,\n  SearchResultProps,\n  FilterProps,\n  ActiveFilters\n} from './SearchResults.types';\nimport SearchResult from './SearchResult';\nimport Filter from './Filter';\nimport {\n  StyledModalFilterContent,\n  StyledCountText,\n  StyledSelectedFilters,\n  StyledSearchResults,\n  StyledResults,\n  StyledFilters,\n  StyledSearchSummaryItem\n} from './SearchResults.styles';\nimport ActiveFilter from './ActiveFilter';\n\nregisterIcon(filterIcon, filterOnIcon);\n\nconst FilterModal = (\n  props: Pick<\n    SearchResultsProps,\n    'count' | 'filters' | 'onFilterChange' | 'onClearFilter' | 'onClearAllFilters'\n  > & {\n    activeFilters: ActiveFilters[];\n  }\n) => {\n  const { activeFilters, count, filters, onFilterChange, onClearFilter, onClearAllFilters } = props;\n  const t = useI18n();\n\n  return (\n    <Modal heading={t('filters')}>\n      <Grid as={StyledModalFilterContent} container={{ rowGap: 2 }}>\n        <Flex container={{ gap: 1, alignItems: 'center' }}>\n          <Text as={StyledCountText} variant='secondary'>\n            {t('results_count', [count], { count })}\n          </Text>\n          {onClearAllFilters && !!activeFilters.length && (\n            <Button variant='link' onClick={onClearAllFilters}>\n              {t('clear_all')}\n            </Button>\n          )}\n        </Flex>\n        {!!activeFilters.length && (\n          <Flex\n            as={StyledSelectedFilters}\n            container={{ gap: 1 }}\n            aria-label={t('search_results_active_filters')}\n          >\n            {activeFilters.map(filter => {\n              return (\n                <ActiveFilter\n                  key={filter.id}\n                  name={`${filter.groupName}: ${filter.name}`}\n                  onRemove={() =>\n                    onFilterChange?.({\n                      name: filter.groupName,\n                      type: filter.type,\n                      value: filter.resetValue\n                    })\n                  }\n                />\n              );\n            })}\n          </Flex>\n        )}\n        <div>\n          {filters.map((filter: FilterProps) => {\n            return (\n              <Filter\n                key={filter.name}\n                onFilterChange={onFilterChange}\n                onClearFilter={onClearFilter}\n                {...filter}\n              />\n            );\n          })}\n        </div>\n      </Grid>\n    </Modal>\n  );\n};\n\nconst SearchResults: FunctionComponent<SearchResultsProps & ForwardProps> = forwardRef(\n  function SearchResults(\n    {\n      results,\n      searchInputProps,\n      count,\n      filters,\n      onFilterChange,\n      onClearAllFilters,\n      onClearFilter,\n      onShowMore,\n      loading = false,\n      ...restProps\n    }: PropsWithoutRef<SearchResultsProps>,\n    ref: SearchResultsProps['ref']\n  ) {\n    const t = useI18n();\n    const isMedium = useBreakpoint('md');\n    const { create } = useModalManager();\n    const { searchContainerEl } = useContext(AppShellContext);\n    const { announcePolite } = useLiveLog();\n    const filtersMethods = useRef<ModalMethods<ComponentProps<typeof FilterModal>>>();\n    const {\n      base: {\n        palette: { 'brand-primary': primary }\n      }\n    } = useTheme();\n    const [accent, setAccent] = useState<undefined | RegExp>();\n    const [submittedSearchValue, setSubmittedSearchValue] = useState(searchInputProps.value);\n\n    const activeFilters: ActiveFilters[] = filters.flatMap(group => {\n      if (group.type === 'select') {\n        return group.items.flatMap(item => {\n          if (item.checked) {\n            return {\n              id: item.id,\n              name: item.name,\n              resetValue: { ...item, checked: false },\n              groupName: group.name,\n              type: group.type\n            };\n          }\n          return [];\n        });\n      }\n      return [];\n    });\n\n    const openFiltersModal = () => {\n      filtersMethods.current = create(FilterModal, {\n        activeFilters,\n        count,\n        filters,\n        onFilterChange,\n        onClearFilter,\n        onClearAllFilters\n      });\n    };\n\n    useAfterInitialEffect(() => {\n      if (filtersMethods.current) {\n        filtersMethods.current.update({\n          activeFilters,\n          count,\n          filters\n        });\n      }\n    }, [activeFilters, count, filters]);\n\n    useAfterInitialEffect(() => {\n      if (isMedium && filtersMethods.current) filtersMethods.current.dismiss();\n    }, [isMedium]);\n\n    useAfterInitialEffect(() => {\n      setAccent(submittedSearchValue ? new RegExp(submittedSearchValue, 'gi') : undefined);\n    }, [submittedSearchValue]);\n\n    useEffect(() => {\n      if (filters.length) announcePolite({ message: t('search_filter_update_message') });\n    }, []);\n\n    const searchTitle = (\n      <SummaryItem\n        as={StyledSearchSummaryItem}\n        visual={\n          <Avatar\n            icon='search'\n            name='search'\n            shape='squircle'\n            backgroundColor={primary}\n            color='white'\n          />\n        }\n        primary={<Text variant='h1'>{t('search')}</Text>}\n        actions={\n          onClearAllFilters &&\n          isMedium &&\n          !!activeFilters.length && (\n            <Button\n              variant='link'\n              onClick={onClearAllFilters}\n              aria-label={t('search_results_clear_all_filters')}\n            >\n              {t('clear_all')}\n            </Button>\n          )\n        }\n      />\n    );\n    const searchInput = (\n      <SearchInput\n        {...searchInputProps}\n        onSearchSubmit={val => {\n          searchInputProps.onSearchSubmit?.(val);\n          setSubmittedSearchValue(val);\n        }}\n        placeholder={searchInputProps.placeholder}\n      />\n    );\n\n    return (\n      <Grid\n        {...restProps}\n        as={StyledSearchResults}\n        ref={ref}\n        md={\n          filters.length\n            ? {\n                container: {\n                  cols: '15rem auto'\n                }\n              }\n            : undefined\n        }\n        sm={\n          filters.length\n            ? {\n                container: {\n                  cols: 'auto',\n                  rowGap: 2\n                }\n              }\n            : undefined\n        }\n        container={{\n          rows: 'auto auto',\n          cols: 'auto 1fr',\n          areas: '\"filters results\"'\n        }}\n      >\n        {isMedium && !!filters.length && (\n          <Grid item={{ area: 'filters', alignSelf: 'start' }} as={StyledFilters}>\n            {searchTitle}\n            {filters.map((filter: FilterProps) => {\n              return (\n                <Filter\n                  key={filter.name}\n                  onFilterChange={onFilterChange}\n                  onClearFilter={onClearFilter}\n                  {...filter}\n                />\n              );\n            })}\n          </Grid>\n        )}\n        <Grid\n          item={{ alignSelf: 'start', area: 'results' }}\n          container={{\n            alignItems: 'center',\n            rowGap: 2,\n            rows: 'auto auto 1fr',\n            areas: '\"search\" \"meta\" \"items\"'\n          }}\n          as={StyledResults}\n        >\n          {loading && <Progress placement='local' />}\n          {searchContainerEl && isMedium ? (\n            createPortal(searchInput, searchContainerEl)\n          ) : (\n            <Grid item={{ area: 'search' }}>\n              {!isMedium && searchTitle}\n              {searchInput}\n            </Grid>\n          )}\n          <Grid item={{ area: 'meta' }} container={{ rowGap: 1 }}>\n            <Flex container={{ justify: 'between', alignItems: 'center' }}>\n              {!loading && (\n                <Text as={StyledCountText} variant='secondary'>\n                  {submittedSearchValue !== '' || results.length > 0\n                    ? t('results_count', [count], { count })\n                    : ''}\n                </Text>\n              )}\n              {!isMedium && !!filters.length && (\n                <Button variant='secondary' onClick={openFiltersModal}>\n                  <Icon name={activeFilters.length > 0 ? 'filter-on' : 'filter'} />\n                  &nbsp;{t('filters')}&nbsp;\n                  <Count>{activeFilters.length}</Count>\n                </Button>\n              )}\n            </Flex>\n            {!!activeFilters.length && (\n              <Flex\n                as={StyledSelectedFilters}\n                container={{ gap: 1, wrap: 'wrap' }}\n                aria-label={t('search_results_active_filters')}\n              >\n                {activeFilters.map(filter => {\n                  return (\n                    <ActiveFilter\n                      key={filter.id}\n                      name={`${filter.groupName}: ${filter.name}`}\n                      onRemove={() =>\n                        onFilterChange?.({\n                          name: filter.groupName,\n                          type: filter.type,\n                          value: filter.resetValue\n                        })\n                      }\n                    />\n                  );\n                })}\n              </Flex>\n            )}\n          </Grid>\n          <Grid\n            item={{ area: 'items', alignSelf: results.length ? 'start' : 'stretch' }}\n            container={{ rowGap: 2 }}\n          >\n            {!loading && (\n              <>\n                {results.length ? (\n                  results.map((result: SearchResultProps) => {\n                    return <SearchResult key={result.id} {...result} accent={accent} />;\n                  })\n                ) : (\n                  <Grid item={{ alignSelf: 'stretch' }}>\n                    <EmptyState\n                      message={submittedSearchValue === '' ? t('empty_search') : undefined}\n                    />\n                  </Grid>\n                )}\n                {onShowMore && (\n                  <Flex container={{ justify: 'center' }}>\n                    <Button variant='link' onClick={onShowMore}>\n                      {t('show_more')}\n                    </Button>\n                  </Flex>\n                )}\n              </>\n            )}\n          </Grid>\n        </Grid>\n      </Grid>\n    );\n  }\n);\n\nexport default SearchResults;\n"]}

package/lib/components/Stages/StageGlimpse.js

@@ -5,7 +5,7 @@ import { StyledDateTimeDisplay, StyledStep, StyledStepsContainer } from './Stage
 registerIcon(checkIcon);
 const StageGlimpse = ({ stage }) => {
     const t = useI18n();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { children: stage.date ? (_jsx(StyledDateTimeDisplay, { value: stage.date, variant: 'relative', format: 'short' })) : (_jsx(Text, { variant: 'secondary', children: t('not_started') })) }), stage.steps && (_jsx(StyledStepsContainer, { children: stage.steps.map(({ id, name, completed }) => (_jsxs(Flex, { as: StyledStep, container: { gap: 0.5 }, completed: completed, children: [completed ? (_jsx(Icon, { name: 'check' })) : (_jsx(StyledIcon, { as: 'span', role: 'presentation', "aria-hidden": 'true', children: "\u2022" })), _jsx("div", { children: name })] }, id))) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { children: stage.date ? (_jsx(StyledDateTimeDisplay, { value: stage.date, variant: 'relative', format: 'short' })) : (_jsx(Text, { variant: 'secondary', children: t('not_started') })) }), stage.steps && (_jsx(StyledStepsContainer, { children: stage.steps.map(({ id, name, completed }) => (_jsxs(Flex, { as: StyledStep, container: { gap: 0.5 }, completed: completed, children: [completed ? (_jsx(Icon, { name: 'check' })) : (_jsx(StyledIcon, { as: 'span', role: 'presentation', "aria-hidden": true, children: "\u2022" })), _jsx("div", { children: name })] }, id))) }))] }));
 };
 export default StageGlimpse;
 //# sourceMappingURL=StageGlimpse.js.map

package/lib/components/Stages/StageGlimpse.js.map

@@ -1 +1 @@
-{"version":3,"file":"StageGlimpse.js","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC9F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AAMxB,MAAM,YAAY,GAAyC,CAAC,EAAE,KAAK,EAAqB,EAAE,EAAE;IAC1F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,8BACE,wBACG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,qBAAqB,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,GAAG,CAC/E,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,CACpD,GACG,EACL,KAAK,CAAC,KAAK,IAAI,CACd,KAAC,oBAAoB,cAClB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5C,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAW,SAAS,EAAE,SAAS,aACzE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,uBAE/C,CACd,EACD,wBAAM,IAAI,GAAO,KARiC,EAAE,CAS/C,CACR,CAAC,GACmB,CACxB,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport { Icon, Flex, registerIcon, Text, useI18n, StyledIcon } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StageProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledStep, StyledStepsContainer } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StageGlimpseProps {\n  stage: StageProps;\n}\n\nconst StageGlimpse: FunctionComponent<StageGlimpseProps> = ({ stage }: StageGlimpseProps) => {\n  const t = useI18n();\n  return (\n    <>\n      <div>\n        {stage.date ? (\n          <StyledDateTimeDisplay value={stage.date} variant='relative' format='short' />\n        ) : (\n          <Text variant='secondary'>{t('not_started')}</Text>\n        )}\n      </div>\n      {stage.steps && (\n        <StyledStepsContainer>\n          {stage.steps.map(({ id, name, completed }) => (\n            <Flex as={StyledStep} container={{ gap: 0.5 }} key={id} completed={completed}>\n              {completed ? (\n                <Icon name='check' />\n              ) : (\n                <StyledIcon as='span' role='presentation' aria-hidden='true'>\n                  •\n                </StyledIcon>\n              )}\n              <div>{name}</div>\n            </Flex>\n          ))}\n        </StyledStepsContainer>\n      )}\n    </>\n  );\n};\n\nexport default StageGlimpse;\n"]}
+{"version":3,"file":"StageGlimpse.js","sourceRoot":"","sources":["../../../src/components/Stages/StageGlimpse.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC9F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE1F,YAAY,CAAC,SAAS,CAAC,CAAC;AAMxB,MAAM,YAAY,GAAyC,CAAC,EAAE,KAAK,EAAqB,EAAE,EAAE;IAC1F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,8BACE,wBACG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,qBAAqB,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,OAAO,GAAG,CAC/E,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,CACpD,GACG,EACL,KAAK,CAAC,KAAK,IAAI,CACd,KAAC,oBAAoB,cAClB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5C,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAW,SAAS,EAAE,SAAS,aACzE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,4CAE5B,CACd,EACD,wBAAM,IAAI,GAAO,KARiC,EAAE,CAS/C,CACR,CAAC,GACmB,CACxB,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport { Icon, Flex, registerIcon, Text, useI18n, StyledIcon } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport type { StageProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledStep, StyledStepsContainer } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StageGlimpseProps {\n  stage: StageProps;\n}\n\nconst StageGlimpse: FunctionComponent<StageGlimpseProps> = ({ stage }: StageGlimpseProps) => {\n  const t = useI18n();\n  return (\n    <>\n      <div>\n        {stage.date ? (\n          <StyledDateTimeDisplay value={stage.date} variant='relative' format='short' />\n        ) : (\n          <Text variant='secondary'>{t('not_started')}</Text>\n        )}\n      </div>\n      {stage.steps && (\n        <StyledStepsContainer>\n          {stage.steps.map(({ id, name, completed }) => (\n            <Flex as={StyledStep} container={{ gap: 0.5 }} key={id} completed={completed}>\n              {completed ? (\n                <Icon name='check' />\n              ) : (\n                <StyledIcon as='span' role='presentation' aria-hidden>\n                  •\n                </StyledIcon>\n              )}\n              <div>{name}</div>\n            </Flex>\n          ))}\n        </StyledStepsContainer>\n      )}\n    </>\n  );\n};\n\nexport default StageGlimpse;\n"]}

package/lib/components/Stakeholders/Stakeholders.js

@@ -133,7 +133,7 @@ const Stakeholders = forwardRef(function Stakeholders({ items: itemsProp, count,
     }
     let editPopover = null;
     if (popoverTarget) {
-        editPopover = (_jsx(StyledPopover, { ref: popoverRef, target: popoverTarget.button, placement: 'auto', role: 'dialog', children: _jsxs(StyledContainer, { container: { direction: 'column', gap: 2 }, children: [_jsx(Text, { variant: 'h3', children: t('edit_stakeholder') }), _jsxs(StyledEditFormWrap, { "aria-busy": form.loading ? 'true' : 'false', children: [_jsx(Progress, { placement: 'local', visible: form.loading, message: progressMsgRef.current }), (!form.loading || progressMsgRef.current === t('submitting')) && (_jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer, rendererProps: form.rendererProps, setSelectedRoleNameRef: setSelectedRoleNameRef }))] }), formActions && (_jsx(Flex, { container: { justify: 'between', pad: [undefined, 2, 2] }, children: formActions }))] }) }));
+        editPopover = (_jsx(StyledPopover, { ref: popoverRef, target: popoverTarget.button, placement: 'auto', role: 'dialog', children: _jsxs(StyledContainer, { container: { direction: 'column', gap: 2 }, children: [_jsx(Text, { variant: 'h3', children: t('edit_stakeholder') }), _jsxs(StyledEditFormWrap, { "aria-busy": !!form.loading, children: [_jsx(Progress, { placement: 'local', visible: form.loading, message: progressMsgRef.current }), (!form.loading || progressMsgRef.current === t('submitting')) && (_jsx(StakeholderForm, { roles: form.roles, currentRole: form.currentRole, renderer: form.renderer, rendererProps: form.rendererProps, setSelectedRoleNameRef: setSelectedRoleNameRef }))] }), formActions && (_jsx(Flex, { container: { justify: 'between', pad: [undefined, 2, 2] }, children: formActions }))] }) }));
     }
     // Content for the modal either for adding new or viewing all.
     let modalContent = null;

package/lib/components/Stakeholders/Stakeholders.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useMemo, useState, useCallback } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  SummaryList,\n  useI18n,\n  Button,\n  ViewAll,\n  Modal,\n  Popover,\n  Flex,\n  Text,\n  useModalManager,\n  useOuterEvent,\n  Progress,\n  useAfterInitialEffect,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type {\n  Action,\n  ForwardProps,\n  ModalMethods,\n  ModalProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nconst StyledEditFormWrap = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    min-height: 8rem;\n    overflow: auto;\n    padding-block: calc(${theme.base.spacing} / 2);\n    padding-inline: calc(2 * ${theme.base.spacing});\n\n    &[aria-busy='true'] > :nth-child(2) {\n      visibility: hidden;\n    }\n  `;\n});\n\nStyledEditFormWrap.defaultProps = defaultThemeProp;\n\nconst StyledPopover = styled(Popover)`\n  width: 40ch;\n  min-height: 12rem;\n`;\n\nconst StyledContainer = styled(Flex)(({ theme }) => {\n  return css`\n    max-height: inherit;\n    > h3 {\n      padding-block-start: calc(2 * ${theme.base.spacing});\n      padding-inline: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n  function Stakeholders(\n    {\n      items: itemsProp,\n      count,\n      loading,\n      onAddNew,\n      form,\n      onViewAll,\n      viewAll,\n      error,\n      ...restProps\n    }: PropsWithoutRef<StakeholdersProps>,\n    ref: StakeholdersProps['ref']\n  ) {\n    const { create: createModal } = useModalManager();\n    const t = useI18n();\n    const modalMethods = useRef<ModalMethods>();\n    const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n    const [editing, setEditing] = useState(false);\n    const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n    const popoverRef = useRef<HTMLDivElement>(null);\n    const progressMsgRef = useRef(t('loading'));\n\n    // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.\n    const selectedRoleNameRef = useRef<Role['name'] | undefined>();\n    // Setter for the ref. Avoids a re-render.\n    const setSelectedRoleNameRef = useCallback((selectedRoleName?: Role['name']) => {\n      selectedRoleNameRef.current = selectedRoleName;\n    }, []);\n\n    const [popoverTarget, setPopoverTarget] = useState<{\n      portal: HTMLLIElement;\n      button: HTMLButtonElement | null;\n    } | null>(null);\n\n    const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n      itemEls: [],\n      viewAllItemEls: []\n    });\n\n    // This function merges the pre-defined actions(add & edit) to the item object.\n    const mergeItemActions = (\n      items: StakeholdersProps['items'] | NonNullable<StakeholdersProps['viewAll']>['items']\n    ) => {\n      return items.map(({ onEdit, onRemove, ...rest }, i) => {\n        let itemActions: Action[] = [];\n        const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n        if (onEdit) {\n          itemActions = [\n            {\n              id: 'edit',\n              text: t('edit'),\n              icon: 'pencil',\n              onClick: () => {\n                setEditing(true);\n                setPopoverTarget({\n                  portal: elArray[i],\n                  button: elArray[i].querySelector<HTMLButtonElement>(\n                    'button[aria-haspopup=\"menu\"]'\n                  )\n                });\n\n                onEdit?.();\n              }\n            }\n          ];\n        }\n\n        if (onRemove) {\n          itemActions = [\n            ...itemActions,\n            {\n              id: 'remove',\n              text: t('remove'),\n              icon: 'trash',\n              onClick: () => {\n                onRemove?.();\n              }\n            }\n          ];\n        }\n\n        return {\n          ...rest,\n          ref: (el: HTMLLIElement) => {\n            elArray[i] = el;\n          },\n          actions: itemActions\n        };\n      });\n    };\n\n    const closePopover = () => {\n      if (!popoverTarget || (form.loading && progressMsgRef.current === t('submitting'))) return;\n      popoverTarget.button?.focus();\n      setPopoverTarget(null);\n      setEditing(false);\n      progressMsgRef.current = t('loading');\n    };\n\n    let formContent: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      formContent = (\n        <StakeholderForm\n          roles={form.roles}\n          currentRole={form.currentRole}\n          renderer={form.renderer}\n          rendererProps={form.rendererProps}\n          setSelectedRoleNameRef={setSelectedRoleNameRef}\n        />\n      );\n    }\n\n    // Actions used for add and edit both in the modal and the popover.\n    let formActions: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      const closeForm = () => {\n        if (mode === 'add') {\n          modalMethods.current?.dismiss();\n        } else {\n          closePopover();\n        }\n      };\n\n      formActions = (\n        <>\n          <Button\n            disabled={form.loading}\n            onClick={() => {\n              form.onDismiss({ closeForm });\n            }}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            disabled={form.loading}\n            type='submit'\n            variant='primary'\n            onClick={() => {\n              progressMsgRef.current = t('submitting');\n              form.onSubmit({\n                selectedRoleName: selectedRoleNameRef.current,\n                closeForm\n              });\n            }}\n          >\n            {t('submit')}\n          </Button>\n        </>\n      );\n    }\n\n    let editPopover: ReactNode = null;\n    if (popoverTarget) {\n      editPopover = (\n        <StyledPopover\n          ref={popoverRef}\n          target={popoverTarget.button}\n          placement='auto'\n          role='dialog'\n        >\n          <StyledContainer container={{ direction: 'column', gap: 2 }}>\n            <Text variant='h3'>{t('edit_stakeholder')}</Text>\n            <StyledEditFormWrap aria-busy={form.loading ? 'true' : 'false'}>\n              <Progress placement='local' visible={form.loading} message={progressMsgRef.current} />\n              {(!form.loading || progressMsgRef.current === t('submitting')) && (\n                <StakeholderForm\n                  roles={form.roles}\n                  currentRole={form.currentRole}\n                  renderer={form.renderer}\n                  rendererProps={form.rendererProps}\n                  setSelectedRoleNameRef={setSelectedRoleNameRef}\n                />\n              )}\n            </StyledEditFormWrap>\n            {formActions && (\n              <Flex container={{ justify: 'between', pad: [undefined, 2, 2] }}>{formActions}</Flex>\n            )}\n          </StyledContainer>\n        </StyledPopover>\n      );\n    }\n\n    // Content for the modal either for adding new or viewing all.\n    let modalContent: ReactNode = null;\n    if (mode === 'add') modalContent = formContent;\n\n    if (!viewAll.loading && (mode === 'viewAll' || (editing && modalMethods.current))) {\n      modalContent = (\n        <>\n          <ViewAll\n            items={mergeItemActions(viewAll.items)}\n            actions={[\n              {\n                id: 'addStakeHolder',\n                text: 'Add new',\n                onClick: () => {\n                  setMode('add');\n                  onAddNew?.();\n                }\n              }\n            ]}\n            searchInputProps={\n              viewAll.onSearch\n                ? {\n                    value: viewAllSearchValue,\n                    onSearchChange: (value: string) => {\n                      setViewAllSearchValue(value);\n                      viewAll?.onSearch?.(value);\n                    }\n                  }\n                : undefined\n            }\n          />\n          {/* Edit popover triggered from a modal must be rendered within modal content to render in correct DOM position. */}\n          {editPopover}\n        </>\n      );\n    }\n\n    useEffect(() => {\n      if (!mode) {\n        modalMethods.current = undefined;\n        return;\n      }\n\n      const modalProps: OmitStrict<ModalProps, 'heading'> = {\n        progress:\n          (mode === 'add' && form.loading) || viewAll.loading\n            ? { message: progressMsgRef.current }\n            : undefined,\n        count: mode === 'viewAll' ? count : undefined,\n        children: modalContent,\n        actions: mode === 'add' ? formActions : undefined,\n        onRequestDismiss:\n          form.loading && progressMsgRef.current === t('submitting') ? () => false : undefined\n      };\n\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      } else if (mode === 'add' || mode === 'viewAll') {\n        modalMethods.current = createModal(Modal, {\n          ...modalProps,\n          heading: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),\n          onAfterClose: () => {\n            if (mode === 'add') {\n              form.onAfterClose?.();\n            } else {\n              setViewAllSearchValue('');\n              viewAll.onAfterClose?.();\n            }\n\n            progressMsgRef.current = t('loading');\n            setMode(undefined);\n          }\n        });\n      }\n    }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);\n\n    // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n    useOuterEvent('mousedown', [popoverRef], closePopover);\n\n    const onKeydown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closePopover();\n      }\n    };\n\n    useEffect(() => {\n      if (!popoverTarget) return;\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [popoverTarget]);\n\n    useAfterInitialEffect(() => {\n      if (!popoverTarget) form.onAfterClose?.();\n    }, [popoverTarget]);\n\n    return (\n      <>\n        <StyledStakeholders\n          {...restProps}\n          ref={ref}\n          icon='person'\n          name={t('view_stakeholders')}\n          headingTag='h3'\n          loading={loading}\n          count={count}\n          error={error}\n          items={useMemo(\n            () => mergeItemActions(itemsProp.slice(0, 3)),\n            [mergeItemActions, itemsProp]\n          )}\n          actions={\n            onAddNew\n              ? [\n                  {\n                    text: t('add'),\n                    id: 'add_new',\n                    icon: 'plus',\n                    onClick() {\n                      setMode('add');\n                      onAddNew?.();\n                    }\n                  }\n                ]\n              : undefined\n          }\n          onViewAll={\n            onViewAll && count && count > 3\n              ? () => {\n                  setMode('viewAll');\n                  onViewAll?.();\n                }\n              : undefined\n          }\n        />\n        {/* When edit is opened outside of the view all modal. */}\n        {editPopover && mode !== 'viewAll' ? editPopover : null}\n      </>\n    );\n  }\n);\n\nexport default Stakeholders;\n"]}
+{"version":3,"file":"Stakeholders.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useEffect, useMemo, useState, useCallback } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  SummaryList,\n  useI18n,\n  Button,\n  ViewAll,\n  Modal,\n  Popover,\n  Flex,\n  Text,\n  useModalManager,\n  useOuterEvent,\n  Progress,\n  useAfterInitialEffect,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type {\n  Action,\n  ForwardProps,\n  ModalMethods,\n  ModalProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\nimport StakeholderForm from './StakeholderForm';\n\nconst StyledStakeholders = styled(SummaryList)``;\n\nconst StyledEditFormWrap = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    min-height: 8rem;\n    overflow: auto;\n    padding-block: calc(${theme.base.spacing} / 2);\n    padding-inline: calc(2 * ${theme.base.spacing});\n\n    &[aria-busy='true'] > :nth-child(2) {\n      visibility: hidden;\n    }\n  `;\n});\n\nStyledEditFormWrap.defaultProps = defaultThemeProp;\n\nconst StyledPopover = styled(Popover)`\n  width: 40ch;\n  min-height: 12rem;\n`;\n\nconst StyledContainer = styled(Flex)(({ theme }) => {\n  return css`\n    max-height: inherit;\n    > h3 {\n      padding-block-start: calc(2 * ${theme.base.spacing});\n      padding-inline: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nconst Stakeholders: FunctionComponent<StakeholdersProps & ForwardProps> = forwardRef(\n  function Stakeholders(\n    {\n      items: itemsProp,\n      count,\n      loading,\n      onAddNew,\n      form,\n      onViewAll,\n      viewAll,\n      error,\n      ...restProps\n    }: PropsWithoutRef<StakeholdersProps>,\n    ref: StakeholdersProps['ref']\n  ) {\n    const { create: createModal } = useModalManager();\n    const t = useI18n();\n    const modalMethods = useRef<ModalMethods>();\n    const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n    const [editing, setEditing] = useState(false);\n    const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n    const popoverRef = useRef<HTMLDivElement>(null);\n    const progressMsgRef = useRef(t('loading'));\n\n    // Why? Don't think this should trigger a re-render. We just need the value when we invoke callback props.\n    const selectedRoleNameRef = useRef<Role['name'] | undefined>();\n    // Setter for the ref. Avoids a re-render.\n    const setSelectedRoleNameRef = useCallback((selectedRoleName?: Role['name']) => {\n      selectedRoleNameRef.current = selectedRoleName;\n    }, []);\n\n    const [popoverTarget, setPopoverTarget] = useState<{\n      portal: HTMLLIElement;\n      button: HTMLButtonElement | null;\n    } | null>(null);\n\n    const itemElsRef = useRef<{ itemEls: HTMLLIElement[]; viewAllItemEls: HTMLLIElement[] }>({\n      itemEls: [],\n      viewAllItemEls: []\n    });\n\n    // This function merges the pre-defined actions(add & edit) to the item object.\n    const mergeItemActions = (\n      items: StakeholdersProps['items'] | NonNullable<StakeholdersProps['viewAll']>['items']\n    ) => {\n      return items.map(({ onEdit, onRemove, ...rest }, i) => {\n        let itemActions: Action[] = [];\n        const elArray = itemElsRef.current[mode === 'viewAll' ? 'viewAllItemEls' : 'itemEls'];\n\n        if (onEdit) {\n          itemActions = [\n            {\n              id: 'edit',\n              text: t('edit'),\n              icon: 'pencil',\n              onClick: () => {\n                setEditing(true);\n                setPopoverTarget({\n                  portal: elArray[i],\n                  button: elArray[i].querySelector<HTMLButtonElement>(\n                    'button[aria-haspopup=\"menu\"]'\n                  )\n                });\n\n                onEdit?.();\n              }\n            }\n          ];\n        }\n\n        if (onRemove) {\n          itemActions = [\n            ...itemActions,\n            {\n              id: 'remove',\n              text: t('remove'),\n              icon: 'trash',\n              onClick: () => {\n                onRemove?.();\n              }\n            }\n          ];\n        }\n\n        return {\n          ...rest,\n          ref: (el: HTMLLIElement) => {\n            elArray[i] = el;\n          },\n          actions: itemActions\n        };\n      });\n    };\n\n    const closePopover = () => {\n      if (!popoverTarget || (form.loading && progressMsgRef.current === t('submitting'))) return;\n      popoverTarget.button?.focus();\n      setPopoverTarget(null);\n      setEditing(false);\n      progressMsgRef.current = t('loading');\n    };\n\n    let formContent: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      formContent = (\n        <StakeholderForm\n          roles={form.roles}\n          currentRole={form.currentRole}\n          renderer={form.renderer}\n          rendererProps={form.rendererProps}\n          setSelectedRoleNameRef={setSelectedRoleNameRef}\n        />\n      );\n    }\n\n    // Actions used for add and edit both in the modal and the popover.\n    let formActions: ReactNode = null;\n    if (\n      (mode === 'add' || editing) &&\n      (!form.loading || progressMsgRef.current === t('submitting'))\n    ) {\n      const closeForm = () => {\n        if (mode === 'add') {\n          modalMethods.current?.dismiss();\n        } else {\n          closePopover();\n        }\n      };\n\n      formActions = (\n        <>\n          <Button\n            disabled={form.loading}\n            onClick={() => {\n              form.onDismiss({ closeForm });\n            }}\n          >\n            {t('cancel')}\n          </Button>\n          <Button\n            disabled={form.loading}\n            type='submit'\n            variant='primary'\n            onClick={() => {\n              progressMsgRef.current = t('submitting');\n              form.onSubmit({\n                selectedRoleName: selectedRoleNameRef.current,\n                closeForm\n              });\n            }}\n          >\n            {t('submit')}\n          </Button>\n        </>\n      );\n    }\n\n    let editPopover: ReactNode = null;\n    if (popoverTarget) {\n      editPopover = (\n        <StyledPopover\n          ref={popoverRef}\n          target={popoverTarget.button}\n          placement='auto'\n          role='dialog'\n        >\n          <StyledContainer container={{ direction: 'column', gap: 2 }}>\n            <Text variant='h3'>{t('edit_stakeholder')}</Text>\n            <StyledEditFormWrap aria-busy={!!form.loading}>\n              <Progress placement='local' visible={form.loading} message={progressMsgRef.current} />\n              {(!form.loading || progressMsgRef.current === t('submitting')) && (\n                <StakeholderForm\n                  roles={form.roles}\n                  currentRole={form.currentRole}\n                  renderer={form.renderer}\n                  rendererProps={form.rendererProps}\n                  setSelectedRoleNameRef={setSelectedRoleNameRef}\n                />\n              )}\n            </StyledEditFormWrap>\n            {formActions && (\n              <Flex container={{ justify: 'between', pad: [undefined, 2, 2] }}>{formActions}</Flex>\n            )}\n          </StyledContainer>\n        </StyledPopover>\n      );\n    }\n\n    // Content for the modal either for adding new or viewing all.\n    let modalContent: ReactNode = null;\n    if (mode === 'add') modalContent = formContent;\n\n    if (!viewAll.loading && (mode === 'viewAll' || (editing && modalMethods.current))) {\n      modalContent = (\n        <>\n          <ViewAll\n            items={mergeItemActions(viewAll.items)}\n            actions={[\n              {\n                id: 'addStakeHolder',\n                text: 'Add new',\n                onClick: () => {\n                  setMode('add');\n                  onAddNew?.();\n                }\n              }\n            ]}\n            searchInputProps={\n              viewAll.onSearch\n                ? {\n                    value: viewAllSearchValue,\n                    onSearchChange: (value: string) => {\n                      setViewAllSearchValue(value);\n                      viewAll?.onSearch?.(value);\n                    }\n                  }\n                : undefined\n            }\n          />\n          {/* Edit popover triggered from a modal must be rendered within modal content to render in correct DOM position. */}\n          {editPopover}\n        </>\n      );\n    }\n\n    useEffect(() => {\n      if (!mode) {\n        modalMethods.current = undefined;\n        return;\n      }\n\n      const modalProps: OmitStrict<ModalProps, 'heading'> = {\n        progress:\n          (mode === 'add' && form.loading) || viewAll.loading\n            ? { message: progressMsgRef.current }\n            : undefined,\n        count: mode === 'viewAll' ? count : undefined,\n        children: modalContent,\n        actions: mode === 'add' ? formActions : undefined,\n        onRequestDismiss:\n          form.loading && progressMsgRef.current === t('submitting') ? () => false : undefined\n      };\n\n      if (modalMethods.current) {\n        modalMethods.current.update(modalProps);\n      } else if (mode === 'add' || mode === 'viewAll') {\n        modalMethods.current = createModal(Modal, {\n          ...modalProps,\n          heading: mode === 'add' ? t('add_stakeholders') : t('view_stakeholders'),\n          onAfterClose: () => {\n            if (mode === 'add') {\n              form.onAfterClose?.();\n            } else {\n              setViewAllSearchValue('');\n              viewAll.onAfterClose?.();\n            }\n\n            progressMsgRef.current = t('loading');\n            setMode(undefined);\n          }\n        });\n      }\n    }, [mode, modalContent, form.loading, formActions, count, viewAll.loading]);\n\n    // Using mousedown instead of click since drag selecting an input's value within the popover, then releasing outside the popover triggers outer click.\n    useOuterEvent('mousedown', [popoverRef], closePopover);\n\n    const onKeydown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closePopover();\n      }\n    };\n\n    useEffect(() => {\n      if (!popoverTarget) return;\n      document.addEventListener('keydown', onKeydown);\n      return () => {\n        document.removeEventListener('keydown', onKeydown);\n      };\n    }, [popoverTarget]);\n\n    useAfterInitialEffect(() => {\n      if (!popoverTarget) form.onAfterClose?.();\n    }, [popoverTarget]);\n\n    return (\n      <>\n        <StyledStakeholders\n          {...restProps}\n          ref={ref}\n          icon='person'\n          name={t('view_stakeholders')}\n          headingTag='h3'\n          loading={loading}\n          count={count}\n          error={error}\n          items={useMemo(\n            () => mergeItemActions(itemsProp.slice(0, 3)),\n            [mergeItemActions, itemsProp]\n          )}\n          actions={\n            onAddNew\n              ? [\n                  {\n                    text: t('add'),\n                    id: 'add_new',\n                    icon: 'plus',\n                    onClick() {\n                      setMode('add');\n                      onAddNew?.();\n                    }\n                  }\n                ]\n              : undefined\n          }\n          onViewAll={\n            onViewAll && count && count > 3\n              ? () => {\n                  setMode('viewAll');\n                  onViewAll?.();\n                }\n              : undefined\n          }\n        />\n        {/* When edit is opened outside of the view all modal. */}\n        {editPopover && mode !== 'viewAll' ? editPopover : null}\n      </>\n    );\n  }\n);\n\nexport default Stakeholders;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-work",
-  "version": "8.0.0-build.7.2",
+  "version": "8.0.0-build.7.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pegasystems/cosmos-react.git",
@@ -19,8 +19,8 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "8.0.0-build.7.2",
-    "@pega/cosmos-react-rte": "8.0.0-build.7.2",
+    "@pega/cosmos-react-core": "8.0.0-build.7.4",
+    "@pega/cosmos-react-rte": "8.0.0-build.7.4",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "@types/styled-components": "^5.1.26",