@pega/lists-react 9.0.0-build.21.0 → 9.0.0-build.21.10

package/lib/Core/Views/Timeline/TimelineItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { Card, ExpandCollapse, FieldValueItem, Grid, Icon, Status, useBreakpoint, isValidElement } from '@pega/cosmos-react-core';
-import { StyledBulletWrapper, StyledCardContent, StyledCardHeader, StyledTime, StyledTimelineIcon, StyledTimelineListItem, StyledTitle, StyledToggleButton } from './Timeline.styles';
+import { Card, ExpandCollapse, ExpandCollapseButton, FieldValueItem, Grid, Icon, Status, useBreakpoint, useUID, isValidElement } from '@pega/cosmos-react-core';
+import { StyledBulletWrapper, StyledCardContent, StyledCardHeader, StyledTime, StyledTimelineIcon, StyledTimelineListItem, StyledTitle } from './Timeline.styles';
 import { isFutureDate } from './utils';
 const shouldRenderContent = (content) => {
     if (!content) {
@@ -13,24 +13,25 @@ const shouldRenderContent = (content) => {
     return true;
 };
 const TimelineItem = ({ item: { date, dateVariant = 'datetime', title, icon, defaultExpanded = false, status, content }, prevItemDate, nextItemDate, currentTime }) => {
+    const timeId = useUID();
     const [expanded, setExpanded] = useState(defaultExpanded);
     const isSmallOrAbove = useBreakpoint('sm');
     const contentListRef = useRef(null);
     const isSMContentWidthOrAbove = useBreakpoint('sm', {
         breakpointRef: contentListRef
     });
-    return (_jsxs(StyledTimelineListItem, { children: [isSmallOrAbove && _jsx(StyledTime, { variant: dateVariant, value: date, format: 'short' }), _jsx(StyledBulletWrapper, { hasIcon: !!icon, hasPrev: !!prevItemDate, hasNext: !!nextItemDate, isPrevFuture: isFutureDate(prevItemDate, currentTime), isNextFuture: isFutureDate(nextItemDate, currentTime), children: _jsx(StyledTimelineIcon, { container: { inline: true, alignItems: 'center', justify: 'center' }, children: icon && _jsx(Icon, { name: icon }) }) }), _jsxs("div", { children: [_jsx("div", { children: _jsx(Card, { children: _jsxs(StyledCardHeader, { container: {
+    return (_jsxs(StyledTimelineListItem, { children: [isSmallOrAbove && (_jsx(StyledTime, { id: timeId, variant: dateVariant, value: date, format: 'short' })), _jsx(StyledBulletWrapper, { hasIcon: !!icon, hasPrev: !!prevItemDate, hasNext: !!nextItemDate, isPrevFuture: isFutureDate(prevItemDate, currentTime), isNextFuture: isFutureDate(nextItemDate, currentTime), children: _jsx(StyledTimelineIcon, { container: { inline: true, alignItems: 'center', justify: 'center' }, children: icon && _jsx(Icon, { name: icon }) }) }), _jsxs("div", { children: [_jsx("div", { children: _jsx(Card, { children: _jsxs(StyledCardHeader, { container: {
                                     cols: 'auto 1fr',
                                     alignContent: 'evenly',
                                     alignItems: 'center',
                                     gap: 0.5
-                                }, sm: { container: { cols: 'auto 1fr auto' } }, children: [shouldRenderContent(content) && (_jsx(StyledToggleButton, { icon: true, variant: 'simple', onClick: () => {
+                                }, sm: { container: { cols: 'auto 1fr auto' } }, children: [shouldRenderContent(content) && (_jsx(ExpandCollapseButton, { expanded: expanded, onToggle: () => {
                                             setExpanded(cur => !cur);
-                                        }, collapsed: !expanded, "aria-expanded": expanded, compact: true, children: _jsx(Icon, { name: 'caret-down' }) })), _jsxs(Grid, { item: { colStart: '2', colEnd: '2' }, container: { rowGap: 0.25 }, children: [_jsx(StyledTitle, { children: title }), !isSmallOrAbove && (_jsxs(Grid, { container: {
+                                        }, iconOnly: true, compact: true, "aria-labelledby": timeId })), _jsxs(Grid, { item: { colStart: '2', colEnd: '2' }, container: { rowGap: 0.25 }, children: [_jsx(StyledTitle, { children: title }), !isSmallOrAbove && (_jsxs(Grid, { container: {
                                                     cols: '1fr auto',
                                                     alignContent: 'evenly',
                                                     alignItems: 'center'
-                                                }, children: [_jsx(StyledTime, { variant: 'time', value: date, format: 'short' }), status && _jsx(Status, { variant: status.variant, children: status.children })] }))] }), isSmallOrAbove && status && (_jsx(Grid, { sm: { item: { colStart: '3', colEnd: '3' } }, children: _jsx(Status, { variant: status.variant, children: status.children }) }))] }) }) }), shouldRenderContent(content) && (_jsx(ExpandCollapse, { dimension: 'height', collapsed: !expanded, children: _jsx(StyledCardContent, { children: isValidElement(content) ? (content) : (_jsx(Grid, { container: {
+                                                }, children: [_jsx(StyledTime, { id: timeId, variant: 'time', value: date, format: 'short' }), status && _jsx(Status, { variant: status.variant, children: status.children })] }))] }), isSmallOrAbove && status && (_jsx(Grid, { sm: { item: { colStart: '3', colEnd: '3' } }, children: _jsx(Status, { variant: status.variant, children: status.children }) }))] }) }) }), shouldRenderContent(content) && (_jsx(ExpandCollapse, { dimension: 'height', collapsed: !expanded, children: _jsx(StyledCardContent, { children: isValidElement(content) ? (content) : (_jsx(Grid, { container: {
                                     gap: 1,
                                     cols: isSMContentWidthOrAbove
                                         ? `repeat(${content.length > 1 ? '2' : '1'}, minmax(16ch, auto) minmax(25%, 1fr))`

package/lib/Core/Views/Timeline/TimelineItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/TimelineItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, ReactElement } from 'react';\nimport { useRef, useState } from 'react';\n\nimport type { FieldValueListItemProps, ForwardProps } from '@pega/cosmos-react-core';\nimport {\n  Card,\n  ExpandCollapse,\n  FieldValueItem,\n  Grid,\n  Icon,\n  Status,\n  useBreakpoint,\n  isValidElement\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledBulletWrapper,\n  StyledCardContent,\n  StyledCardHeader,\n  StyledTime,\n  StyledTimelineIcon,\n  StyledTimelineListItem,\n  StyledTitle,\n  StyledToggleButton\n} from './Timeline.styles';\nimport type { ActivityObject } from './Timeline.types';\nimport { isFutureDate } from './utils';\n\ninterface TimelineItemProps {\n  item: ActivityObject;\n  prevItemDate: ActivityObject['date'] | undefined;\n  nextItemDate: ActivityObject['date'] | undefined;\n  currentTime: Date;\n}\n\nconst shouldRenderContent = (\n  content: ActivityObject['content']\n): content is [FieldValueListItemProps, ...FieldValueListItemProps[]] | ReactElement => {\n  if (!content) {\n    return false;\n  }\n\n  if (Array.isArray(content)) {\n    return content.length > 0;\n  }\n\n  return true;\n};\n\nconst TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps> = ({\n  item: { date, dateVariant = 'datetime', title, icon, defaultExpanded = false, status, content },\n  prevItemDate,\n  nextItemDate,\n  currentTime\n}: TimelineItemProps & ForwardProps) => {\n  const [expanded, setExpanded] = useState(defaultExpanded);\n  const isSmallOrAbove = useBreakpoint('sm');\n\n  const contentListRef = useRef<HTMLDivElement>(null);\n  const isSMContentWidthOrAbove = useBreakpoint('sm', {\n    breakpointRef: contentListRef\n  });\n\n  return (\n    <StyledTimelineListItem>\n      {isSmallOrAbove && <StyledTime variant={dateVariant} value={date} format='short' />}\n      <StyledBulletWrapper\n        hasIcon={!!icon}\n        hasPrev={!!prevItemDate}\n        hasNext={!!nextItemDate}\n        isPrevFuture={isFutureDate(prevItemDate, currentTime)}\n        isNextFuture={isFutureDate(nextItemDate, currentTime)}\n      >\n        <StyledTimelineIcon container={{ inline: true, alignItems: 'center', justify: 'center' }}>\n          {icon && <Icon name={icon} />}\n        </StyledTimelineIcon>\n      </StyledBulletWrapper>\n      <div>\n        <div>\n          <Card>\n            <StyledCardHeader\n              container={{\n                cols: 'auto 1fr',\n                alignContent: 'evenly',\n                alignItems: 'center',\n                gap: 0.5\n              }}\n              sm={{ container: { cols: 'auto 1fr auto' } }}\n            >\n              {shouldRenderContent(content) && (\n                <StyledToggleButton\n                  icon\n                  variant='simple'\n                  onClick={() => {\n                    setExpanded(cur => !cur);\n                  }}\n                  collapsed={!expanded}\n                  aria-expanded={expanded}\n                  compact\n                >\n                  <Icon name='caret-down' />\n                </StyledToggleButton>\n              )}\n              <Grid item={{ colStart: '2', colEnd: '2' }} container={{ rowGap: 0.25 }}>\n                <StyledTitle>{title}</StyledTitle>\n                {!isSmallOrAbove && (\n                  <Grid\n                    container={{\n                      cols: '1fr auto',\n                      alignContent: 'evenly',\n                      alignItems: 'center'\n                    }}\n                  >\n                    <StyledTime variant='time' value={date} format='short' />\n                    {status && <Status variant={status.variant}>{status.children}</Status>}\n                  </Grid>\n                )}\n              </Grid>\n              {isSmallOrAbove && status && (\n                <Grid sm={{ item: { colStart: '3', colEnd: '3' } }}>\n                  <Status variant={status.variant}>{status.children}</Status>\n                </Grid>\n              )}\n            </StyledCardHeader>\n          </Card>\n        </div>\n        {shouldRenderContent(content) && (\n          <ExpandCollapse dimension='height' collapsed={!expanded}>\n            <StyledCardContent>\n              {isValidElement(content) ? (\n                content\n              ) : (\n                <Grid\n                  container={{\n                    gap: 1,\n                    cols: isSMContentWidthOrAbove\n                      ? `repeat(${\n                          content.length > 1 ? '2' : '1'\n                        }, minmax(16ch, auto) minmax(25%, 1fr))`\n                      : 'minmax(0, 1fr)'\n                  }}\n                  ref={contentListRef}\n                >\n                  {content.map(({ id, name, value, variant }) => {\n                    return (\n                      <FieldValueItem\n                        name={name}\n                        value={value}\n                        variant={isSmallOrAbove ? variant : 'stacked'}\n                        key={id ?? name}\n                      />\n                    );\n                  })}\n                </Grid>\n              )}\n            </StyledCardContent>\n          </ExpandCollapse>\n        )}\n      </div>\n    </StyledTimelineListItem>\n  );\n};\n\nexport default TimelineItem;\n"]}
+{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/TimelineItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactElement } from 'react';\nimport { useRef, useState } from 'react';\n\nimport type { FieldValueListItemProps } from '@pega/cosmos-react-core';\nimport {\n  Card,\n  ExpandCollapse,\n  ExpandCollapseButton,\n  FieldValueItem,\n  Grid,\n  Icon,\n  Status,\n  useBreakpoint,\n  useUID,\n  isValidElement\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledBulletWrapper,\n  StyledCardContent,\n  StyledCardHeader,\n  StyledTime,\n  StyledTimelineIcon,\n  StyledTimelineListItem,\n  StyledTitle\n} from './Timeline.styles';\nimport type { ActivityObject } from './Timeline.types';\nimport { isFutureDate } from './utils';\n\ninterface TimelineItemProps {\n  item: ActivityObject;\n  prevItemDate: ActivityObject['date'] | undefined;\n  nextItemDate: ActivityObject['date'] | undefined;\n  currentTime: Date;\n}\n\nconst shouldRenderContent = (\n  content: ActivityObject['content']\n): content is [FieldValueListItemProps, ...FieldValueListItemProps[]] | ReactElement => {\n  if (!content) {\n    return false;\n  }\n\n  if (Array.isArray(content)) {\n    return content.length > 0;\n  }\n\n  return true;\n};\n\nconst TimelineItem = ({\n  item: { date, dateVariant = 'datetime', title, icon, defaultExpanded = false, status, content },\n  prevItemDate,\n  nextItemDate,\n  currentTime\n}: TimelineItemProps) => {\n  const timeId = useUID();\n  const [expanded, setExpanded] = useState(defaultExpanded);\n  const isSmallOrAbove = useBreakpoint('sm');\n\n  const contentListRef = useRef<HTMLDivElement>(null);\n  const isSMContentWidthOrAbove = useBreakpoint('sm', {\n    breakpointRef: contentListRef\n  });\n\n  return (\n    <StyledTimelineListItem>\n      {isSmallOrAbove && (\n        <StyledTime id={timeId} variant={dateVariant} value={date} format='short' />\n      )}\n      <StyledBulletWrapper\n        hasIcon={!!icon}\n        hasPrev={!!prevItemDate}\n        hasNext={!!nextItemDate}\n        isPrevFuture={isFutureDate(prevItemDate, currentTime)}\n        isNextFuture={isFutureDate(nextItemDate, currentTime)}\n      >\n        <StyledTimelineIcon container={{ inline: true, alignItems: 'center', justify: 'center' }}>\n          {icon && <Icon name={icon} />}\n        </StyledTimelineIcon>\n      </StyledBulletWrapper>\n      <div>\n        <div>\n          <Card>\n            <StyledCardHeader\n              container={{\n                cols: 'auto 1fr',\n                alignContent: 'evenly',\n                alignItems: 'center',\n                gap: 0.5\n              }}\n              sm={{ container: { cols: 'auto 1fr auto' } }}\n            >\n              {shouldRenderContent(content) && (\n                <ExpandCollapseButton\n                  expanded={expanded}\n                  onToggle={() => {\n                    setExpanded(cur => !cur);\n                  }}\n                  iconOnly\n                  compact\n                  aria-labelledby={timeId}\n                />\n              )}\n              <Grid item={{ colStart: '2', colEnd: '2' }} container={{ rowGap: 0.25 }}>\n                <StyledTitle>{title}</StyledTitle>\n                {!isSmallOrAbove && (\n                  <Grid\n                    container={{\n                      cols: '1fr auto',\n                      alignContent: 'evenly',\n                      alignItems: 'center'\n                    }}\n                  >\n                    <StyledTime id={timeId} variant='time' value={date} format='short' />\n                    {status && <Status variant={status.variant}>{status.children}</Status>}\n                  </Grid>\n                )}\n              </Grid>\n              {isSmallOrAbove && status && (\n                <Grid sm={{ item: { colStart: '3', colEnd: '3' } }}>\n                  <Status variant={status.variant}>{status.children}</Status>\n                </Grid>\n              )}\n            </StyledCardHeader>\n          </Card>\n        </div>\n        {shouldRenderContent(content) && (\n          <ExpandCollapse dimension='height' collapsed={!expanded}>\n            <StyledCardContent>\n              {isValidElement(content) ? (\n                content\n              ) : (\n                <Grid\n                  container={{\n                    gap: 1,\n                    cols: isSMContentWidthOrAbove\n                      ? `repeat(${\n                          content.length > 1 ? '2' : '1'\n                        }, minmax(16ch, auto) minmax(25%, 1fr))`\n                      : 'minmax(0, 1fr)'\n                  }}\n                  ref={contentListRef}\n                >\n                  {content.map(({ id, name, value, variant }) => {\n                    return (\n                      <FieldValueItem\n                        name={name}\n                        value={value}\n                        variant={isSmallOrAbove ? variant : 'stacked'}\n                        key={id ?? name}\n                      />\n                    );\n                  })}\n                </Grid>\n              )}\n            </StyledCardContent>\n          </ExpandCollapse>\n        )}\n      </div>\n    </StyledTimelineListItem>\n  );\n};\n\nexport default TimelineItem;\n"]}

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 export { default as RepeatingStructures } from './Core/Components/RSWrapper/index';
-export { convertMetaIntoState, UPDATE_DEBUG_INFO, TOGGLE_DISABLE_SELECTION, TOGGLE_REQUIRED, NOTIFY_DATA_REFRESH, USER_CONFIRMATION_ACTION, SET_IN_EXTERNAL_STATE, UPDATE_SELECTED_ROWS } from 'pega-repeating-structures-core';
+export { convertMetaIntoState, UPDATE_DEBUG_INFO, TOGGLE_DISABLE_SELECTION, TOGGLE_REQUIRED, NOTIFY_DATA_REFRESH, USER_CONFIRMATION_ACTION, SET_IN_EXTERNAL_STATE, UPDATE_SELECTED_ROWS, SET_WARNING_MESSAGES } from 'pega-repeating-structures-core';
 export { EXTERNAL_FILTERS, FOCUSABLE_SELECTORS, ACTIONABLE_SELECTORS } from './Core/constants';
 export type { RSTypes } from './types';
 export type { RepeatingStructuresProps } from './types/RepeatingStructuresBoot.types';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAGnF,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,wBAAwB,EACxB,eAAe,EACf,mBAAmB,EACnB,wBAAwB,EACxB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE/F,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACvC,YAAY,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AAEtF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAGnF,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,wBAAwB,EACxB,eAAe,EACf,mBAAmB,EACnB,wBAAwB,EACxB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE/F,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACvC,YAAY,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AAEtF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC"}

package/lib/index.js

@@ -1,6 +1,6 @@
 export { default as RepeatingStructures } from './Core/Components/RSWrapper/index';
 // FIXME: revisit these imports
-export { convertMetaIntoState, UPDATE_DEBUG_INFO, TOGGLE_DISABLE_SELECTION, TOGGLE_REQUIRED, NOTIFY_DATA_REFRESH, USER_CONFIRMATION_ACTION, SET_IN_EXTERNAL_STATE, UPDATE_SELECTED_ROWS } from 'pega-repeating-structures-core';
+export { convertMetaIntoState, UPDATE_DEBUG_INFO, TOGGLE_DISABLE_SELECTION, TOGGLE_REQUIRED, NOTIFY_DATA_REFRESH, USER_CONFIRMATION_ACTION, SET_IN_EXTERNAL_STATE, UPDATE_SELECTED_ROWS, SET_WARNING_MESSAGES } from 'pega-repeating-structures-core';
 // Dispatch Action constants that is used by consumer in order to send particular actions to Repeating structures
 export { EXTERNAL_FILTERS, FOCUSABLE_SELECTORS, ACTIONABLE_SELECTORS } from './Core/constants';
 export { ROW_DENSITY } from 'pega-repeating-structures-core';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAEnF,+BAA+B;AAC/B,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,wBAAwB,EACxB,eAAe,EACf,mBAAmB,EACnB,wBAAwB,EACxB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,gCAAgC,CAAC;AAExC,iHAAiH;AACjH,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAK/F,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC","sourcesContent":["export { default as RepeatingStructures } from './Core/Components/RSWrapper/index';\n\n// FIXME: revisit these imports\nexport {\n  convertMetaIntoState,\n  UPDATE_DEBUG_INFO,\n  TOGGLE_DISABLE_SELECTION,\n  TOGGLE_REQUIRED,\n  NOTIFY_DATA_REFRESH,\n  USER_CONFIRMATION_ACTION,\n  SET_IN_EXTERNAL_STATE,\n  UPDATE_SELECTED_ROWS\n} from 'pega-repeating-structures-core';\n\n// Dispatch Action constants that is used by consumer in order to send particular actions to Repeating structures\nexport { EXTERNAL_FILTERS, FOCUSABLE_SELECTORS, ACTIONABLE_SELECTORS } from './Core/constants';\n\nexport type { RSTypes } from './types';\nexport type { RepeatingStructuresProps } from './types/RepeatingStructuresBoot.types';\n\nexport { ROW_DENSITY } from 'pega-repeating-structures-core';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAEnF,+BAA+B;AAC/B,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,wBAAwB,EACxB,eAAe,EACf,mBAAmB,EACnB,wBAAwB,EACxB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,gCAAgC,CAAC;AAExC,iHAAiH;AACjH,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAK/F,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC","sourcesContent":["export { default as RepeatingStructures } from './Core/Components/RSWrapper/index';\n\n// FIXME: revisit these imports\nexport {\n  convertMetaIntoState,\n  UPDATE_DEBUG_INFO,\n  TOGGLE_DISABLE_SELECTION,\n  TOGGLE_REQUIRED,\n  NOTIFY_DATA_REFRESH,\n  USER_CONFIRMATION_ACTION,\n  SET_IN_EXTERNAL_STATE,\n  UPDATE_SELECTED_ROWS,\n  SET_WARNING_MESSAGES\n} from 'pega-repeating-structures-core';\n\n// Dispatch Action constants that is used by consumer in order to send particular actions to Repeating structures\nexport { EXTERNAL_FILTERS, FOCUSABLE_SELECTORS, ACTIONABLE_SELECTORS } from './Core/constants';\n\nexport type { RSTypes } from './types';\nexport type { RepeatingStructuresProps } from './types/RepeatingStructuresBoot.types';\n\nexport { ROW_DENSITY } from 'pega-repeating-structures-core';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/lists-react",
-  "version": "9.0.0-build.21.0",
+  "version": "9.0.0-build.21.10",
   "description": "Repeating view structures such as Table, Gallery(Repeating layouts), Kanban etc.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",
@@ -14,9 +14,9 @@
     "build": "tsc -b tsconfig.build.json"
   },
   "dependencies": {
-    "@pega/cosmos-react-condition-builder": "9.0.0-build.21.0",
-    "@pega/cosmos-react-core": "9.0.0-build.21.0",
-    "@pega/cosmos-react-rte": "9.0.0-build.21.0",
+    "@pega/cosmos-react-condition-builder": "9.0.0-build.21.10",
+    "@pega/cosmos-react-core": "9.0.0-build.21.10",
+    "@pega/cosmos-react-rte": "9.0.0-build.21.10",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^17.0.62 || ^18.3.3",
     "@types/react-dom": "^17.0.20 || ^18.3.0",
@@ -24,8 +24,8 @@
     "dayjs": "^1.11.13",
     "fast-deep-equal": "^3.1.3",
     "lodash-es": "^4.17.23",
-    "pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.21.0",
-    "pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.21.0",
+    "pega-repeating-structures-core": "npm:@pega/lists-core@9.0.0-build.21.10",
+    "pega-ui-list-data-apis": "npm:@pega/lists-core-utils@9.0.0-build.21.10",
     "polished": "^4.1.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.0 || ^18.0.0",
@@ -44,7 +44,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.6.1",
     "jest-axe": "^8.0.0",
-    "srs-utils": "9.0.0-build.21.0",
+    "srs-utils": "9.0.0-build.21.10",
     "typescript": "~5.9.3"
   }
 }