@pega/lists-react 9.0.0-build.8.3 → 9.0.0-build.9.0

package/lib/Core/Components/DefaultComponents/PersonalizationCreateEdit.d.ts

@@ -1,7 +1,8 @@
-declare function PersonalizationCreateEdit({ view, onFinish, editing }: {
+declare function PersonalizationCreateEdit({ view, onFinish, editing, target }: {
     view: any;
     onFinish: any;
     editing?: boolean | undefined;
+    target: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace PersonalizationCreateEdit {
     namespace propTypes {
@@ -10,6 +11,7 @@ declare namespace PersonalizationCreateEdit {
             [x: string]: any;
         }>;
         let editing: PropTypes.Requireable<boolean>;
+        let target: PropTypes.Requireable<Element>;
     }
     namespace defaultProps {
         export function onFinish_1(): void;
@@ -19,6 +21,5 @@ declare namespace PersonalizationCreateEdit {
     }
 }
 export default PersonalizationCreateEdit;
-export const StyledModalContent: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
 import PropTypes from 'prop-types';
 //# sourceMappingURL=PersonalizationCreateEdit.d.ts.map

package/lib/Core/Components/DefaultComponents/PersonalizationCreateEdit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PersonalizationCreateEdit.d.ts","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/PersonalizationCreateEdit.jsx"],"names":[],"mappings":"AAgBA;;;;4CAoIC;;;;;;;;;;QASW,mCAAQ;;;;;;;AArJpB,kPAMG;sBAbmB,YAAY"}
+{"version":3,"file":"PersonalizationCreateEdit.d.ts","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/PersonalizationCreateEdit.jsx"],"names":[],"mappings":"AAOA;;;;;4CAwHC;;;;;;;;;;;QAUW,mCAAQ;;;;;;;sBAxIE,YAAY"}

package/lib/Core/Components/DefaultComponents/PersonalizationCreateEdit.js

@@ -1,17 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import { Flex, Button, Input, Checkbox, Text } from '@pega/cosmos-react-core';
+import { Flex, Input, Checkbox, FormDialog } from '@pega/cosmos-react-core';
 import useTranslate from '../../Hooks/useTranslate';
-export const StyledModalContent = styled(Flex)(() => {
-    return css `
-    position: relative;
-    padding: 1.25rem;
-    overflow: auto;
-  `;
-});
-export default function PersonalizationCreateEdit({ view, onFinish, editing = false }) {
+export default function PersonalizationCreateEdit({ view, onFinish, editing = false, target }) {
     const { state: { personalization }, meta: { nonPersonalizationViewName } } = view;
     const personalizationNames = useMemo(() => {
         const personalizations = personalization?.allPersonalizations || {};
@@ -88,12 +80,13 @@ export default function PersonalizationCreateEdit({ view, onFinish, editing = fa
         return undefined;
     };
     const heading = editing ? translate('Edit view') : translate('Save view as..');
-    return (_jsx(Flex, { as: StyledModalContent, container: { direction: 'column' }, item: { grow: 1 }, children: _jsxs(Flex, { container: { direction: 'column', itemGap: 2 }, children: [_jsx(Text, { variant: 'h2', className: 'modalHeader', children: heading }), _jsx(Input, { ref: viewNameRef, name: 'viewName', required: true, label: translate('View name'), autoComplete: 'off', status: error ? 'error' : null, info: error, value: viewName, onChange: onChange }), !(editing && isAppDefaultView) && (_jsx(Checkbox, { checked: markAsDefault, label: translate('Mark as default?'), required: false, disabled: false, onChange: () => setMarkAsDefault(curState => !curState) })), _jsxs(Flex, { container: { alignContent: 'center', justify: 'between' }, className: 'modalFooter', children: [_jsx(Button, { onClick: onFinish, children: translate('Cancel') }), _jsx("div", { children: _jsx(Button, { variant: 'primary', onClick: onSubmit, children: translate('Submit') }) })] })] }) }));
+    return (_jsx(FormDialog, { heading: heading, onCancel: onFinish, onSubmit: onSubmit, target: target, children: _jsxs(Flex, { container: { direction: 'column', itemGap: 2 }, children: [_jsx(Input, { ref: viewNameRef, name: 'viewName', required: true, label: translate('View name'), autoComplete: 'off', status: error ? 'error' : null, info: error, value: viewName, onChange: onChange }), !(editing && isAppDefaultView) && (_jsx(Checkbox, { checked: markAsDefault, label: translate('Mark as default?'), required: false, disabled: false, onChange: () => setMarkAsDefault(curState => !curState) }))] }) }));
 }
 PersonalizationCreateEdit.propTypes = {
     onFinish: PropTypes.func,
     view: PropTypes.objectOf(PropTypes.any).isRequired,
-    editing: PropTypes.bool
+    editing: PropTypes.bool,
+    target: PropTypes.instanceOf(Element)
 };
 PersonalizationCreateEdit.defaultProps = {
     onFinish: () => { },

package/lib/Core/Components/DefaultComponents/PersonalizationCreateEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"PersonalizationCreateEdit.js","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/PersonalizationCreateEdit.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Button, Input, Checkbox, Text } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\n\nexport const StyledModalContent = styled(Flex)(() => {\n  return css`\n    position: relative;\n    padding: 1.25rem;\n    overflow: auto;\n  `;\n});\n\nexport default function PersonalizationCreateEdit({ view, onFinish, editing = false }) {\n  const {\n    state: { personalization },\n    meta: { nonPersonalizationViewName }\n  } = view;\n  const personalizationNames = useMemo(() => {\n    const personalizations = personalization?.allPersonalizations || {};\n    return Object.keys(personalizations).map(key => personalizations[key]?.name?.toLowerCase());\n  }, [personalization]);\n  const [translate] = useTranslate();\n  const currentPersonalization = personalization?.allPersonalizations?.[personalization.active];\n  const currentPersonalizationName = currentPersonalization?.name;\n  const isAppDefaultView = personalization.active === 'APP_DEFAULT';\n  const [viewName, setViewName] = useState(() => {\n    if (editing) return currentPersonalizationName;\n    return '';\n  });\n  const [error, setError] = useState();\n  const viewNameRef = useRef(null);\n  const defaultNameError = `${nonPersonalizationViewName} ${translate(\n    'name is reserved for non Personalized view and cannot be used.'\n  )}`;\n  const viewAlreadyPresentError = translate('This view is already present.');\n  const viewNameEmptyError = translate('This view name cannot be empty.');\n  const viewNameMaxLengthError = translate('View name must contain less than 65 characters.');\n  // markAsDefault is meant to be null rather than false as APIS will remove the default if it sees false\n  // but will be a no-op if undefined or null\n  const [markAsDefault, setMarkAsDefault] = useState(() => {\n    if (!editing) {\n      return true;\n    }\n    if (editing && personalization.defaultPersonalization === personalization.active) {\n      return true;\n    }\n    return null;\n  });\n\n  useEffect(() => {\n    if (viewName && viewName.toLowerCase() === nonPersonalizationViewName.toLowerCase()) {\n      setError(defaultNameError);\n      return;\n    }\n    if (\n      personalizationNames.includes(viewName?.trim().toLowerCase()) &&\n      !(editing && viewName.trim() === currentPersonalizationName)\n    ) {\n      setError(viewAlreadyPresentError);\n      return;\n    }\n    if (viewName?.length > 64) {\n      setError(viewNameMaxLengthError);\n      return;\n    }\n    setError(null);\n  }, [\n    defaultNameError,\n    currentPersonalizationName,\n    editing,\n    nonPersonalizationViewName,\n    personalizationNames,\n    viewName,\n    viewAlreadyPresentError,\n    viewNameMaxLengthError\n  ]);\n\n  const onChange = e => {\n    setViewName(e.target.value);\n  };\n\n  const onSubmit = () => {\n    const trimmedName = viewName.trim();\n    if (!trimmedName) {\n      viewNameRef.current.focus();\n      setError(viewNameEmptyError);\n      return;\n    }\n    if (editing) {\n      view.type.editPersonalization(\n        personalization.active,\n        trimmedName,\n        markAsDefault,\n        isAppDefaultView\n      );\n    } else {\n      view.type.createPersonalization(trimmedName, markAsDefault);\n    }\n\n    onFinish();\n    return undefined;\n  };\n\n  const heading = editing ? translate('Edit view') : translate('Save view as..');\n\n  return (\n    <Flex as={StyledModalContent} container={{ direction: 'column' }} item={{ grow: 1 }}>\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Text variant='h2' className='modalHeader'>\n          {heading}\n        </Text>\n        <Input\n          ref={viewNameRef}\n          name='viewName'\n          required\n          label={translate('View name')}\n          autoComplete='off'\n          status={error ? 'error' : null}\n          info={error}\n          value={viewName}\n          onChange={onChange}\n        />\n\n        {!(editing && isAppDefaultView) && (\n          <Checkbox\n            checked={markAsDefault}\n            label={translate('Mark as default?')}\n            required={false}\n            disabled={false}\n            onChange={() => setMarkAsDefault(curState => !curState)}\n          />\n        )}\n\n        <Flex container={{ alignContent: 'center', justify: 'between' }} className='modalFooter'>\n          <Button onClick={onFinish}>{translate('Cancel')}</Button>\n          <div>\n            <Button variant='primary' onClick={onSubmit}>\n              {translate('Submit')}\n            </Button>\n          </div>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n}\n\nPersonalizationCreateEdit.propTypes = {\n  onFinish: PropTypes.func,\n  view: PropTypes.objectOf(PropTypes.any).isRequired,\n  editing: PropTypes.bool\n};\n\nPersonalizationCreateEdit.defaultProps = {\n  onFinish: () => {},\n  editing: false\n};\n"]}
+{"version":3,"file":"PersonalizationCreateEdit.js","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/PersonalizationCreateEdit.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAG,KAAK,EAAE,MAAM,EAAE;IAC3F,MAAM,EACJ,KAAK,EAAE,EAAE,eAAe,EAAE,EAC1B,IAAI,EAAE,EAAE,0BAA0B,EAAE,EACrC,GAAG,IAAI,CAAC;IACT,MAAM,oBAAoB,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,gBAAgB,GAAG,eAAe,EAAE,mBAAmB,IAAI,EAAE,CAAC;QACpE,OAAO,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;IAC9F,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IACtB,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,sBAAsB,GAAG,eAAe,EAAE,mBAAmB,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9F,MAAM,0BAA0B,GAAG,sBAAsB,EAAE,IAAI,CAAC;IAChE,MAAM,gBAAgB,GAAG,eAAe,CAAC,MAAM,KAAK,aAAa,CAAC;IAClE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC5C,IAAI,OAAO;YAAE,OAAO,0BAA0B,CAAC;QAC/C,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAE,CAAC;IACrC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACjC,MAAM,gBAAgB,GAAG,GAAG,0BAA0B,IAAI,SAAS,CACjE,gEAAgE,CACjE,EAAE,CAAC;IACJ,MAAM,uBAAuB,GAAG,SAAS,CAAC,+BAA+B,CAAC,CAAC;IAC3E,MAAM,kBAAkB,GAAG,SAAS,CAAC,iCAAiC,CAAC,CAAC;IACxE,MAAM,sBAAsB,GAAG,SAAS,CAAC,iDAAiD,CAAC,CAAC;IAC5F,uGAAuG;IACvG,2CAA2C;IAC3C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtD,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,IAAI,CAAC;QACd,CAAC;QACD,IAAI,OAAO,IAAI,eAAe,CAAC,sBAAsB,KAAK,eAAe,CAAC,MAAM,EAAE,CAAC;YACjF,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,IAAI,QAAQ,CAAC,WAAW,EAAE,KAAK,0BAA0B,CAAC,WAAW,EAAE,EAAE,CAAC;YACpF,QAAQ,CAAC,gBAAgB,CAAC,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,IACE,oBAAoB,CAAC,QAAQ,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;YAC7D,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,0BAA0B,CAAC,EAC5D,CAAC;YACD,QAAQ,CAAC,uBAAuB,CAAC,CAAC;YAClC,OAAO;QACT,CAAC;QACD,IAAI,QAAQ,EAAE,MAAM,GAAG,EAAE,EAAE,CAAC;YAC1B,QAAQ,CAAC,sBAAsB,CAAC,CAAC;YACjC,OAAO;QACT,CAAC;QACD,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC,EAAE;QACD,gBAAgB;QAChB,0BAA0B;QAC1B,OAAO;QACP,0BAA0B;QAC1B,oBAAoB;QACpB,QAAQ;QACR,uBAAuB;QACvB,sBAAsB;KACvB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,CAAC,CAAC,EAAE;QACnB,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC;QACpC,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC5B,QAAQ,CAAC,kBAAkB,CAAC,CAAC;YAC7B,OAAO;QACT,CAAC;QACD,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAC3B,eAAe,CAAC,MAAM,EACtB,WAAW,EACX,aAAa,EACb,gBAAgB,CACjB,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;QAC9D,CAAC;QAED,QAAQ,EAAE,CAAC;QACX,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAE/E,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,YAClF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aAClD,KAAC,KAAK,IACJ,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EACf,QAAQ,QACR,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,EAC7B,YAAY,EAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAC9B,IAAI,EAAE,KAAK,EACX,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,QAAQ,GAClB,EAED,CAAC,CAAC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CACjC,KAAC,QAAQ,IACP,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,SAAS,CAAC,kBAAkB,CAAC,EACpC,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,GACvD,CACH,IACI,GACI,CACd,CAAC;AACJ,CAAC;AAED,yBAAyB,CAAC,SAAS,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IAClD,OAAO,EAAE,SAAS,CAAC,IAAI;IACvB,MAAM,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC;CACtC,CAAC;AAEF,yBAAyB,CAAC,YAAY,GAAG;IACvC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,OAAO,EAAE,KAAK;CACf,CAAC","sourcesContent":["import { useState, useEffect, useMemo, useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Flex, Input, Checkbox, FormDialog } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\n\nexport default function PersonalizationCreateEdit({ view, onFinish, editing = false, target }) {\n  const {\n    state: { personalization },\n    meta: { nonPersonalizationViewName }\n  } = view;\n  const personalizationNames = useMemo(() => {\n    const personalizations = personalization?.allPersonalizations || {};\n    return Object.keys(personalizations).map(key => personalizations[key]?.name?.toLowerCase());\n  }, [personalization]);\n  const [translate] = useTranslate();\n  const currentPersonalization = personalization?.allPersonalizations?.[personalization.active];\n  const currentPersonalizationName = currentPersonalization?.name;\n  const isAppDefaultView = personalization.active === 'APP_DEFAULT';\n  const [viewName, setViewName] = useState(() => {\n    if (editing) return currentPersonalizationName;\n    return '';\n  });\n  const [error, setError] = useState();\n  const viewNameRef = useRef(null);\n  const defaultNameError = `${nonPersonalizationViewName} ${translate(\n    'name is reserved for non Personalized view and cannot be used.'\n  )}`;\n  const viewAlreadyPresentError = translate('This view is already present.');\n  const viewNameEmptyError = translate('This view name cannot be empty.');\n  const viewNameMaxLengthError = translate('View name must contain less than 65 characters.');\n  // markAsDefault is meant to be null rather than false as APIS will remove the default if it sees false\n  // but will be a no-op if undefined or null\n  const [markAsDefault, setMarkAsDefault] = useState(() => {\n    if (!editing) {\n      return true;\n    }\n    if (editing && personalization.defaultPersonalization === personalization.active) {\n      return true;\n    }\n    return null;\n  });\n\n  useEffect(() => {\n    if (viewName && viewName.toLowerCase() === nonPersonalizationViewName.toLowerCase()) {\n      setError(defaultNameError);\n      return;\n    }\n    if (\n      personalizationNames.includes(viewName?.trim().toLowerCase()) &&\n      !(editing && viewName.trim() === currentPersonalizationName)\n    ) {\n      setError(viewAlreadyPresentError);\n      return;\n    }\n    if (viewName?.length > 64) {\n      setError(viewNameMaxLengthError);\n      return;\n    }\n    setError(null);\n  }, [\n    defaultNameError,\n    currentPersonalizationName,\n    editing,\n    nonPersonalizationViewName,\n    personalizationNames,\n    viewName,\n    viewAlreadyPresentError,\n    viewNameMaxLengthError\n  ]);\n\n  const onChange = e => {\n    setViewName(e.target.value);\n  };\n\n  const onSubmit = () => {\n    const trimmedName = viewName.trim();\n    if (!trimmedName) {\n      viewNameRef.current.focus();\n      setError(viewNameEmptyError);\n      return;\n    }\n    if (editing) {\n      view.type.editPersonalization(\n        personalization.active,\n        trimmedName,\n        markAsDefault,\n        isAppDefaultView\n      );\n    } else {\n      view.type.createPersonalization(trimmedName, markAsDefault);\n    }\n\n    onFinish();\n    return undefined;\n  };\n\n  const heading = editing ? translate('Edit view') : translate('Save view as..');\n\n  return (\n    <FormDialog heading={heading} onCancel={onFinish} onSubmit={onSubmit} target={target}>\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Input\n          ref={viewNameRef}\n          name='viewName'\n          required\n          label={translate('View name')}\n          autoComplete='off'\n          status={error ? 'error' : null}\n          info={error}\n          value={viewName}\n          onChange={onChange}\n        />\n\n        {!(editing && isAppDefaultView) && (\n          <Checkbox\n            checked={markAsDefault}\n            label={translate('Mark as default?')}\n            required={false}\n            disabled={false}\n            onChange={() => setMarkAsDefault(curState => !curState)}\n          />\n        )}\n      </Flex>\n    </FormDialog>\n  );\n}\n\nPersonalizationCreateEdit.propTypes = {\n  onFinish: PropTypes.func,\n  view: PropTypes.objectOf(PropTypes.any).isRequired,\n  editing: PropTypes.bool,\n  target: PropTypes.instanceOf(Element)\n};\n\nPersonalizationCreateEdit.defaultProps = {\n  onFinish: () => {},\n  editing: false\n};\n"]}

package/lib/Core/Components/Toolbar/AdvanceToolbar.js

@@ -30,7 +30,7 @@ export default function AdvanceToolbar({ view }) {
     const filter = useFilter({ view });
     const group = useGroup({ view });
     const sort = useSort({ view });
-    const { actions, actionsButtonRef, popover } = useMore({ view });
+    const { actions, actionsButtonRef, content } = useMore({ view });
     const enableActionsMenu = selectionMode === SELECTION_MODES.multi && selectedRecordsCount !== 0;
     const formControlProps = useFormControlProps(view);
     const wrapAction = useWrapAction(view);
@@ -45,13 +45,13 @@ export default function AdvanceToolbar({ view }) {
     let Toolbar;
     switch (template) {
         case REPEATING_STRUCTURE_TEMPLATES.TIMELINE:
-            Toolbar = (_jsxs(_Fragment, { children: [_jsx(TimelineToolbar, { name: title, formControlProps: formControlProps, viewSelector: viewSelector, search: search, count: count, additionalActions: additionalActions, filter: filter, createNew: createNew, view: view, actions: actions, actionsButtonRef: actionsButtonRef }), popover] }));
+            Toolbar = (_jsxs(_Fragment, { children: [_jsx(TimelineToolbar, { name: title, formControlProps: formControlProps, viewSelector: viewSelector, search: search, count: count, additionalActions: additionalActions, filter: filter, createNew: createNew, view: view, actions: actions, actionsButtonRef: actionsButtonRef }), content] }));
             break;
         case REPEATING_STRUCTURE_TEMPLATES.MAP:
             Toolbar = (_jsx(MapToolbar, { locationFieldId: mapFieldIds?.location, name: title, formControlProps: formControlProps, rows: rows, count: count, createNew: createNew, additionalActions: additionalActions }));
             break;
         default:
-            Toolbar = (_jsxs(_Fragment, { children: [_jsx(ListToolbar, { name: title, formControlProps: formControlProps, viewSelector: viewSelector, search: search, count: count, additionalActions: additionalActions, filter: filter, group: group, sort: sort, actions: actions, actionsButtonRef: actionsButtonRef, createNew: createNew, wrap: template === REPEATING_STRUCTURE_TEMPLATES.TABLE && wrapAction, keyboardInstructions: template === REPEATING_STRUCTURE_TEMPLATES.TABLE ? (_jsx(KeyboardInstructions, { template: template })) : undefined }), popover] }));
+            Toolbar = (_jsxs(_Fragment, { children: [_jsx(ListToolbar, { name: title, formControlProps: formControlProps, viewSelector: viewSelector, search: search, count: count, additionalActions: additionalActions, filter: filter, group: group, sort: sort, actions: actions, actionsButtonRef: actionsButtonRef, createNew: createNew, wrap: template === REPEATING_STRUCTURE_TEMPLATES.TABLE && wrapAction, keyboardInstructions: template === REPEATING_STRUCTURE_TEMPLATES.TABLE ? (_jsx(KeyboardInstructions, { template: template })) : undefined }), content] }));
     }
     return (_jsxs(AnnounceRowsCount, { state: state, count: count, isLoading: isLoading, announceCount: announceCount, children: [_jsx(ValidateMessage, { message: validatemessage, children: Toolbar }), refreshNotification && (_jsx(RefreshBanner, { refreshNotification: refreshNotification, forceRefresh: forceRefresh }))] }));
 }

package/lib/Core/Components/Toolbar/AdvanceToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdvanceToolbar.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/AdvanceToolbar.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\n\nimport { ListToolbar } from '@pega/cosmos-react-core';\nimport { REPEATING_STRUCTURE_TEMPLATES } from 'pega-repeating-structures-core/lib/types/Meta.types';\n\nimport { SELECTION_MODES } from '../../constants';\n\nimport ActionsMenu from './ActionsMenu';\nimport MapToolbar from './Map/MapToolbar';\nimport ToolbarActions from './ToolbarActions';\nimport TimelineToolbar from './Timeline/TimelineToolbar';\nimport useSearch from './hooks/useSearch';\nimport useFilter from './hooks/useFilter';\nimport usePersonalization from './hooks/usePersonalization';\nimport useMore from './hooks/useMore';\nimport useGroup from './hooks/useGroup/useGroup';\nimport useSort from './hooks/useSort/useSort';\nimport getCount from './utils/getCount';\nimport RefreshBanner from './RefreshBanner';\nimport AnnounceRowsCount from './AnnounceRowsCount';\nimport ValidateMessage from './ValidateMessage';\nimport useFormControlProps from './hooks/useFormControlProps';\nimport useWrapAction from './hooks/useWrapAction';\nimport KeyboardInstructions from './KeyboardInstructions';\n\nexport default function AdvanceToolbar({ view }) {\n  const {\n    selectedRecordsCount,\n    meta: {\n      basicMode,\n      selectionMode,\n      title,\n      toolbarActions,\n      template,\n      allowBulkActions,\n      mapFieldIds\n    } = {},\n    rows,\n    state,\n    getContext,\n    isLoading,\n    showCount,\n    refreshNotification,\n    type: { forceRefresh },\n    announceCount\n  } = view;\n  const { getRequiredDef } = getContext();\n  const { validatemessage } = getRequiredDef() || {};\n  const { viewSelector } = usePersonalization({ view });\n  const search = useSearch({ view });\n  const count = showCount ? getCount({ view }) : undefined;\n  const filter = useFilter({ view });\n  const group = useGroup({ view });\n  const sort = useSort({ view });\n  const { actions, actionsButtonRef, popover } = useMore({ view });\n  const enableActionsMenu = selectionMode === SELECTION_MODES.multi && selectedRecordsCount !== 0;\n  const formControlProps = useFormControlProps(view);\n  const wrapAction = useWrapAction(view);\n\n  const additionalActions = (\n    <>\n      {basicMode && (\n        <ToolbarActions\n          toolbarActions={toolbarActions?.filter(action => !action.id.startsWith('Add'))}\n        />\n      )}\n      {allowBulkActions && <ActionsMenu enableActionsMenu={enableActionsMenu} view={view} />}\n    </>\n  );\n\n  const createNewAction = toolbarActions?.find(action => action.id.startsWith('Add'));\n  const createNew =\n    createNewAction && basicMode\n      ? {\n          label: createNewAction?.text,\n          onClick: createNewAction.onClick\n        }\n      : undefined;\n\n  let Toolbar;\n  switch (template) {\n    case REPEATING_STRUCTURE_TEMPLATES.TIMELINE:\n      Toolbar = (\n        <>\n          <TimelineToolbar\n            name={title}\n            formControlProps={formControlProps}\n            viewSelector={viewSelector}\n            search={search}\n            count={count}\n            additionalActions={additionalActions}\n            filter={filter}\n            createNew={createNew}\n            view={view}\n            actions={actions}\n            actionsButtonRef={actionsButtonRef}\n          />\n          {popover}\n        </>\n      );\n      break;\n    case REPEATING_STRUCTURE_TEMPLATES.MAP:\n      Toolbar = (\n        <MapToolbar\n          locationFieldId={mapFieldIds?.location}\n          name={title}\n          formControlProps={formControlProps}\n          rows={rows}\n          count={count}\n          createNew={createNew}\n          additionalActions={additionalActions}\n        />\n      );\n      break;\n    default:\n      Toolbar = (\n        <>\n          <ListToolbar\n            name={title}\n            formControlProps={formControlProps}\n            viewSelector={viewSelector}\n            search={search}\n            count={count}\n            additionalActions={additionalActions}\n            filter={filter}\n            group={group}\n            sort={sort}\n            actions={actions}\n            actionsButtonRef={actionsButtonRef}\n            createNew={createNew}\n            wrap={template === REPEATING_STRUCTURE_TEMPLATES.TABLE && wrapAction}\n            keyboardInstructions={\n              template === REPEATING_STRUCTURE_TEMPLATES.TABLE ? (\n                <KeyboardInstructions template={template} />\n              ) : undefined\n            }\n          />\n          {popover}\n        </>\n      );\n  }\n\n  return (\n    <AnnounceRowsCount\n      state={state}\n      count={count}\n      isLoading={isLoading}\n      announceCount={announceCount}\n    >\n      <ValidateMessage message={validatemessage}>\n        {Toolbar}\n        {/* FIXME: This implementation of error status should be considered temporary until an official, and properly accessible, spec is determined. */}\n      </ValidateMessage>\n      {refreshNotification && (\n        <RefreshBanner refreshNotification={refreshNotification} forceRefresh={forceRefresh} />\n      )}\n    </AnnounceRowsCount>\n  );\n}\n\nAdvanceToolbar.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}
+{"version":3,"file":"AdvanceToolbar.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/AdvanceToolbar.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\n\nimport { ListToolbar } from '@pega/cosmos-react-core';\nimport { REPEATING_STRUCTURE_TEMPLATES } from 'pega-repeating-structures-core/lib/types/Meta.types';\n\nimport { SELECTION_MODES } from '../../constants';\n\nimport ActionsMenu from './ActionsMenu';\nimport MapToolbar from './Map/MapToolbar';\nimport ToolbarActions from './ToolbarActions';\nimport TimelineToolbar from './Timeline/TimelineToolbar';\nimport useSearch from './hooks/useSearch';\nimport useFilter from './hooks/useFilter';\nimport usePersonalization from './hooks/usePersonalization';\nimport useMore from './hooks/useMore';\nimport useGroup from './hooks/useGroup/useGroup';\nimport useSort from './hooks/useSort/useSort';\nimport getCount from './utils/getCount';\nimport RefreshBanner from './RefreshBanner';\nimport AnnounceRowsCount from './AnnounceRowsCount';\nimport ValidateMessage from './ValidateMessage';\nimport useFormControlProps from './hooks/useFormControlProps';\nimport useWrapAction from './hooks/useWrapAction';\nimport KeyboardInstructions from './KeyboardInstructions';\n\nexport default function AdvanceToolbar({ view }) {\n  const {\n    selectedRecordsCount,\n    meta: {\n      basicMode,\n      selectionMode,\n      title,\n      toolbarActions,\n      template,\n      allowBulkActions,\n      mapFieldIds\n    } = {},\n    rows,\n    state,\n    getContext,\n    isLoading,\n    showCount,\n    refreshNotification,\n    type: { forceRefresh },\n    announceCount\n  } = view;\n  const { getRequiredDef } = getContext();\n  const { validatemessage } = getRequiredDef() || {};\n  const { viewSelector } = usePersonalization({ view });\n  const search = useSearch({ view });\n  const count = showCount ? getCount({ view }) : undefined;\n  const filter = useFilter({ view });\n  const group = useGroup({ view });\n  const sort = useSort({ view });\n  const { actions, actionsButtonRef, content } = useMore({ view });\n  const enableActionsMenu = selectionMode === SELECTION_MODES.multi && selectedRecordsCount !== 0;\n  const formControlProps = useFormControlProps(view);\n  const wrapAction = useWrapAction(view);\n\n  const additionalActions = (\n    <>\n      {basicMode && (\n        <ToolbarActions\n          toolbarActions={toolbarActions?.filter(action => !action.id.startsWith('Add'))}\n        />\n      )}\n      {allowBulkActions && <ActionsMenu enableActionsMenu={enableActionsMenu} view={view} />}\n    </>\n  );\n\n  const createNewAction = toolbarActions?.find(action => action.id.startsWith('Add'));\n  const createNew =\n    createNewAction && basicMode\n      ? {\n          label: createNewAction?.text,\n          onClick: createNewAction.onClick\n        }\n      : undefined;\n\n  let Toolbar;\n  switch (template) {\n    case REPEATING_STRUCTURE_TEMPLATES.TIMELINE:\n      Toolbar = (\n        <>\n          <TimelineToolbar\n            name={title}\n            formControlProps={formControlProps}\n            viewSelector={viewSelector}\n            search={search}\n            count={count}\n            additionalActions={additionalActions}\n            filter={filter}\n            createNew={createNew}\n            view={view}\n            actions={actions}\n            actionsButtonRef={actionsButtonRef}\n          />\n          {content}\n        </>\n      );\n      break;\n    case REPEATING_STRUCTURE_TEMPLATES.MAP:\n      Toolbar = (\n        <MapToolbar\n          locationFieldId={mapFieldIds?.location}\n          name={title}\n          formControlProps={formControlProps}\n          rows={rows}\n          count={count}\n          createNew={createNew}\n          additionalActions={additionalActions}\n        />\n      );\n      break;\n    default:\n      Toolbar = (\n        <>\n          <ListToolbar\n            name={title}\n            formControlProps={formControlProps}\n            viewSelector={viewSelector}\n            search={search}\n            count={count}\n            additionalActions={additionalActions}\n            filter={filter}\n            group={group}\n            sort={sort}\n            actions={actions}\n            actionsButtonRef={actionsButtonRef}\n            createNew={createNew}\n            wrap={template === REPEATING_STRUCTURE_TEMPLATES.TABLE && wrapAction}\n            keyboardInstructions={\n              template === REPEATING_STRUCTURE_TEMPLATES.TABLE ? (\n                <KeyboardInstructions template={template} />\n              ) : undefined\n            }\n          />\n          {content}\n        </>\n      );\n  }\n\n  return (\n    <AnnounceRowsCount\n      state={state}\n      count={count}\n      isLoading={isLoading}\n      announceCount={announceCount}\n    >\n      <ValidateMessage message={validatemessage}>\n        {Toolbar}\n        {/* FIXME: This implementation of error status should be considered temporary until an official, and properly accessible, spec is determined. */}\n      </ValidateMessage>\n      {refreshNotification && (\n        <RefreshBanner refreshNotification={refreshNotification} forceRefresh={forceRefresh} />\n      )}\n    </AnnounceRowsCount>\n  );\n}\n\nAdvanceToolbar.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}

package/lib/Core/Components/Toolbar/DebugInfo.d.ts

@@ -1,8 +1,8 @@
 declare const _default: import("react").MemoExoticComponent<typeof DebugInfo>;
 export default _default;
-declare function DebugInfo({ view, targetRef, onClose }: {
+declare function DebugInfo({ view, target, onClose }: {
     view: any;
-    targetRef: any;
+    target: any;
     onClose: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace DebugInfo {
@@ -10,9 +10,7 @@ declare namespace DebugInfo {
         let view: PropTypes.Validator<{
             [x: string]: any;
         }>;
-        let targetRef: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            current: PropTypes.Requireable<Element>;
-        }>>>;
+        let target: PropTypes.Requireable<Element>;
         let onClose: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }

package/lib/Core/Components/Toolbar/DebugInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebugInfo.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/DebugInfo.jsx"],"names":[],"mappings":";;AAgBA;;;;4CAwCC;;;;;;;;;;;;sBAvDqB,YAAY"}
+{"version":3,"file":"DebugInfo.d.ts","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/DebugInfo.jsx"],"names":[],"mappings":";;AAgBA;;;;4CAwCC;;;;;;;;;;sBAvDqB,YAAY"}

package/lib/Core/Components/Toolbar/DebugInfo.js

@@ -11,7 +11,7 @@ const fieldsConfiguration = [
     { field: debugInfoFields.timeTaken, defaultLabel: 'Time taken' },
     { field: debugInfoFields.insightId, defaultLabel: 'Insight ID', hideIfNotAvailable: true }
 ];
-function DebugInfo({ view, targetRef, onClose }) {
+function DebugInfo({ view, target, onClose }) {
     const [translate] = useTranslate();
     const debugInfoList = view.debugInfo.length === 0 ? [{}] : view.debugInfo;
     const headingRef = useRef(null);
@@ -30,11 +30,11 @@ function DebugInfo({ view, targetRef, onClose }) {
         });
         return result;
     }, []));
-    return (_jsx(InfoDialog, { target: targetRef.current, heading: translate('Query info'), onDismiss: onClose, children: formattedData.map((debugInfoEntry, index) => (_jsx(FieldValueList, { className: 'debug-record', variant: 'inline', fields: debugInfoEntry }, index))) }));
+    return (_jsx(InfoDialog, { target: target, heading: translate('Query info'), onDismiss: onClose, children: formattedData.map((debugInfoEntry, index) => (_jsx(FieldValueList, { className: 'debug-record', variant: 'inline', fields: debugInfoEntry }, index))) }));
 }
 DebugInfo.propTypes = {
     view: PropTypes.objectOf(PropTypes.any).isRequired,
-    targetRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,
+    target: PropTypes.instanceOf(Element),
     onClose: PropTypes.func
 };
 export default memo(DebugInfo);

package/lib/Core/Components/Toolbar/DebugInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebugInfo.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/DebugInfo.jsx"],"names":[],"mappings":"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","sourcesContent":["import { memo, useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { FieldValueList, Text, InfoDialog } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport { debugInfoFields } from '../../constants';\n\nconst fieldsConfiguration = [\n  { field: debugInfoFields.className, defaultLabel: 'Class' },\n  { field: debugInfoFields.dataPage, defaultLabel: 'Data page' },\n  { field: debugInfoFields.dataSource, defaultLabel: 'Data source' },\n  { field: debugInfoFields.timeTaken, defaultLabel: 'Time taken' },\n  { field: debugInfoFields.insightId, defaultLabel: 'Insight ID', hideIfNotAvailable: true }\n];\n\nfunction DebugInfo({ view, targetRef, onClose }) {\n  const [translate] = useTranslate();\n  const debugInfoList = view.debugInfo.length === 0 ? [{}] : view.debugInfo;\n  const headingRef = useRef(null);\n\n  useEffect(() => {\n    if (headingRef.current) headingRef.current.focus();\n  }, []);\n\n  const formattedData = debugInfoList.map(debugInfoEntry =>\n    fieldsConfiguration.reduce((result, { field, defaultLabel, hideIfNotAvailable }) => {\n      if (hideIfNotAvailable && !debugInfoEntry[field]) {\n        return result;\n      }\n      result.push({\n        id: field,\n        name: translate(defaultLabel),\n        value: debugInfoEntry[field] ? (\n          <Text variant='h5' data-testid={`field-${field}`}>\n            {debugInfoEntry[field]}\n          </Text>\n        ) : undefined\n      });\n      return result;\n    }, [])\n  );\n\n  return (\n    <InfoDialog target={targetRef.current} heading={translate('Query info')} onDismiss={onClose}>\n      {formattedData.map((debugInfoEntry, index) => (\n        <FieldValueList\n          className='debug-record'\n          variant='inline'\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          fields={debugInfoEntry}\n        />\n      ))}\n    </InfoDialog>\n  );\n}\n\nDebugInfo.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired,\n  targetRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,\n  onClose: PropTypes.func\n};\n\nexport default memo(DebugInfo);\n"]}
+{"version":3,"file":"DebugInfo.js","sourceRoot":"","sources":["../../../../Core/Components/Toolbar/DebugInfo.jsx"],"names":[],"mappings":"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","sourcesContent":["import { memo, useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { FieldValueList, Text, InfoDialog } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../../Hooks/useTranslate';\nimport { debugInfoFields } from '../../constants';\n\nconst fieldsConfiguration = [\n  { field: debugInfoFields.className, defaultLabel: 'Class' },\n  { field: debugInfoFields.dataPage, defaultLabel: 'Data page' },\n  { field: debugInfoFields.dataSource, defaultLabel: 'Data source' },\n  { field: debugInfoFields.timeTaken, defaultLabel: 'Time taken' },\n  { field: debugInfoFields.insightId, defaultLabel: 'Insight ID', hideIfNotAvailable: true }\n];\n\nfunction DebugInfo({ view, target, onClose }) {\n  const [translate] = useTranslate();\n  const debugInfoList = view.debugInfo.length === 0 ? [{}] : view.debugInfo;\n  const headingRef = useRef(null);\n\n  useEffect(() => {\n    if (headingRef.current) headingRef.current.focus();\n  }, []);\n\n  const formattedData = debugInfoList.map(debugInfoEntry =>\n    fieldsConfiguration.reduce((result, { field, defaultLabel, hideIfNotAvailable }) => {\n      if (hideIfNotAvailable && !debugInfoEntry[field]) {\n        return result;\n      }\n      result.push({\n        id: field,\n        name: translate(defaultLabel),\n        value: debugInfoEntry[field] ? (\n          <Text variant='h5' data-testid={`field-${field}`}>\n            {debugInfoEntry[field]}\n          </Text>\n        ) : undefined\n      });\n      return result;\n    }, [])\n  );\n\n  return (\n    <InfoDialog target={target} heading={translate('Query info')} onDismiss={onClose}>\n      {formattedData.map((debugInfoEntry, index) => (\n        <FieldValueList\n          className='debug-record'\n          variant='inline'\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          fields={debugInfoEntry}\n        />\n      ))}\n    </InfoDialog>\n  );\n}\n\nDebugInfo.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired,\n  target: PropTypes.instanceOf(Element),\n  onClose: PropTypes.func\n};\n\nexport default memo(DebugInfo);\n"]}

package/lib/Core/Components/Toolbar/Timeline/TimelineToolbar.d.ts

@@ -1,8 +1,7 @@
-import type { OmitStrict } from '@pega/cosmos-react-core';
-import type { TimelineToolbarProps } from '@pega/cosmos-react-work/lib/components/Timeline/Timeline.types';
+import type { OmitStrict, ListToolbarProps } from '@pega/cosmos-react-core';
 import type { RsCoreTypes } from 'pega-repeating-structures-core';
 declare const TimelineToolbar: ({ view, ...restProps }: {
     view: RsCoreTypes.View;
-} & OmitStrict<TimelineToolbarProps, "sort" | "group">) => import("react/jsx-runtime").JSX.Element;
+} & OmitStrict<ListToolbarProps, "sort" | "group">) => import("react/jsx-runtime").JSX.Element;
 export default TimelineToolbar;
 //# sourceMappingURL=TimelineToolbar.d.ts.map

package/lib/Core/Components/Toolbar/Timeline/TimelineToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineToolbar.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,KAAK,EAGV,oBAAoB,EACrB,MAAM,gEAAgE,CAAC;AACxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAKlE,QAAA,MAAM,eAAe,GAAI,wBAGtB;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;CACxB,GAAG,UAAU,CAAC,oBAAoB,EAAE,MAAM,GAAG,OAAO,CAAC,4CA4ErD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TimelineToolbar.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAMlE,QAAA,MAAM,eAAe,GAAI,wBAGtB;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;CACxB,GAAG,UAAU,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC,4CAiHjD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/Core/Components/Toolbar/Timeline/TimelineToolbar.js

@@ -1,61 +1,109 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { TimelineToolbar as TimelineToolbarCosmos } from '@pega/cosmos-react-work';
+import { ListToolbar, useI18n } from '@pega/cosmos-react-core';
 import { TOOLBAR_FEATURES } from '../../../constants';
 import { mapDateFnToGroupOption } from '../../../Views/Timeline/utility';
 const TimelineToolbar = ({ view, ...restProps }) => {
+    const t = useI18n();
     const displaySort = view.shouldDisplayFeature(TOOLBAR_FEATURES.SORT);
     const displayGrouping = view.shouldDisplayFeature(TOOLBAR_FEATURES.GROUPING);
-    const sort = useMemo(() => ({
-        selected: view.state.sortingOrder?.[0]?.order === 'asc' ? 'ascending' : 'descending',
-        onItemClick: id => {
-            if (view.state?.sortingOrder?.[0]) {
-                view.type.applySorting([
-                    {
-                        ...view.state.sortingOrder[0],
-                        order: id === 'ascending' ? 'asc' : 'desc'
-                    }
-                ]);
+    const sort = useMemo(() => {
+        const selected = view.state.sortingOrder?.[0]?.order === 'asc' ? 'ascending' : 'descending';
+        return {
+            mode: 'single-select',
+            items: [
+                {
+                    id: 'descending',
+                    text: t('timeline_toolbar_sort_descending'),
+                    icon: 'arrow-down',
+                    selected: selected === 'descending'
+                },
+                {
+                    id: 'ascending',
+                    text: t('timeline_toolbar_sort_ascending'),
+                    icon: 'arrow-up',
+                    selected: selected === 'ascending'
+                }
+            ],
+            onItemClick: id => {
+                if (view.state?.sortingOrder?.[0]) {
+                    view.type.applySorting([
+                        {
+                            ...view.state.sortingOrder[0],
+                            order: id === 'ascending' ? 'asc' : 'desc'
+                        }
+                    ]);
+                }
             }
-        }
-    }), [view.state.sortingOrder, view.type.applySorting]);
-    const group = useMemo(() => ({
-        selected: mapDateFnToGroupOption(view.state.groups?.[0]?.dateFunction),
-        onItemClick: id => {
-            let dateFunction;
-            switch (id) {
-                case 'year':
-                    dateFunction = 'YEARS';
-                    break;
-                case 'quarteryear':
-                    dateFunction = 'QUARTERS';
-                    break;
-                case 'monthyear':
-                    dateFunction = 'MONTHS';
-                    break;
-                case 'date':
-                    dateFunction = 'DAYS';
-                    break;
-                default:
+        };
+    }, [view.state.sortingOrder, view.type.applySorting]);
+    const group = useMemo(() => {
+        const selected = mapDateFnToGroupOption(view.state.groups?.[0]?.dateFunction);
+        return {
+            mode: 'single-select',
+            items: [
+                {
+                    id: 'date',
+                    text: t('timeline_toolbar_group_date'),
+                    selected: selected === 'date'
+                },
+                {
+                    id: 'monthyear',
+                    text: t('timeline_toolbar_group_monthyear'),
+                    selected: selected === 'monthyear'
+                },
+                {
+                    id: 'quarteryear',
+                    text: t('timeline_toolbar_group_quarteryear'),
+                    selected: selected === 'quarteryear'
+                },
+                {
+                    id: 'year',
+                    text: t('timeline_toolbar_group_year'),
+                    selected: selected === 'year'
+                },
+                {
+                    id: 'none',
+                    text: t('timeline_toolbar_group_none'),
+                    selected: selected === 'none'
+                }
+            ],
+            onItemClick: id => {
+                let dateFunction;
+                switch (id) {
+                    case 'year':
+                        dateFunction = 'YEARS';
+                        break;
+                    case 'quarteryear':
+                        dateFunction = 'QUARTERS';
+                        break;
+                    case 'monthyear':
+                        dateFunction = 'MONTHS';
+                        break;
+                    case 'date':
+                        dateFunction = 'DAYS';
+                        break;
+                    default:
+                }
+                view.type.applyGrouping(dateFunction && view.meta.timelineFields?.date?.label
+                    ? [
+                        {
+                            columnId: view.meta.timelineFields.date.label,
+                            dateFunction,
+                            level: 0,
+                            order: view.state.sortingOrder?.[0]?.order ?? 'desc'
+                        }
+                    ]
+                    : []);
             }
-            view.type.applyGrouping(dateFunction && view.meta.timelineFields?.date?.label
-                ? [
-                    {
-                        columnId: view.meta.timelineFields.date.label,
-                        dateFunction,
-                        level: 0,
-                        order: view.state.sortingOrder?.[0]?.order ?? 'desc'
-                    }
-                ]
-                : []);
-        }
-    }), [
+        };
+    }, [
         view.state.groups,
         view.type.applyGrouping,
         view.meta.timelineFields?.date,
         view.state.sortingOrder
     ]);
-    return (_jsx(TimelineToolbarCosmos, { sort: displaySort ? sort : undefined, group: view.meta.grouping && displayGrouping ? group : undefined, ...restProps }));
+    return (_jsx(ListToolbar, { ...restProps, sort: displaySort ? sort : undefined, group: view.meta.grouping && displayGrouping ? group : undefined }));
 };
 export default TimelineToolbar;
 //# sourceMappingURL=TimelineToolbar.js.map

package/lib/Core/Components/Toolbar/Timeline/TimelineToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineToolbar.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Group } from 'packages/lists-rs-core/types/State.types';\nimport { useMemo } from 'react';\n\nimport type { OmitStrict } from '@pega/cosmos-react-core';\nimport { TimelineToolbar as TimelineToolbarCosmos } from '@pega/cosmos-react-work';\nimport type {\n  TimelineGroupBy,\n  TimelineSortOrder,\n  TimelineToolbarProps\n} from '@pega/cosmos-react-work/lib/components/Timeline/Timeline.types';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nimport { TOOLBAR_FEATURES } from '../../../constants';\nimport { mapDateFnToGroupOption } from '../../../Views/Timeline/utility';\n\nconst TimelineToolbar = ({\n  view,\n  ...restProps\n}: {\n  view: RsCoreTypes.View;\n} & OmitStrict<TimelineToolbarProps, 'sort' | 'group'>) => {\n  const displaySort = view.shouldDisplayFeature(TOOLBAR_FEATURES.SORT);\n  const displayGrouping = view.shouldDisplayFeature(TOOLBAR_FEATURES.GROUPING);\n\n  const sort = useMemo<{\n    selected: TimelineSortOrder;\n    onItemClick: (id: TimelineSortOrder) => void;\n  }>(\n    () => ({\n      selected: view.state.sortingOrder?.[0]?.order === 'asc' ? 'ascending' : 'descending',\n      onItemClick: id => {\n        if (view.state?.sortingOrder?.[0]) {\n          view.type.applySorting([\n            {\n              ...view.state.sortingOrder[0],\n              order: id === 'ascending' ? 'asc' : 'desc'\n            }\n          ]);\n        }\n      }\n    }),\n    [view.state.sortingOrder, view.type.applySorting]\n  );\n\n  const group = useMemo<{\n    selected: TimelineGroupBy | undefined;\n    onItemClick: (id: TimelineGroupBy) => void;\n  }>(\n    () => ({\n      selected: mapDateFnToGroupOption(view.state.groups?.[0]?.dateFunction),\n      onItemClick: id => {\n        let dateFunction: Group['dateFunction'];\n        switch (id) {\n          case 'year':\n            dateFunction = 'YEARS';\n            break;\n          case 'quarteryear':\n            dateFunction = 'QUARTERS';\n            break;\n          case 'monthyear':\n            dateFunction = 'MONTHS';\n            break;\n          case 'date':\n            dateFunction = 'DAYS';\n            break;\n          default:\n        }\n        view.type.applyGrouping(\n          dateFunction && view.meta.timelineFields?.date?.label\n            ? [\n                {\n                  columnId: view.meta.timelineFields.date.label,\n                  dateFunction,\n                  level: 0,\n                  order: view.state.sortingOrder?.[0]?.order ?? 'desc'\n                }\n              ]\n            : []\n        );\n      }\n    }),\n    [\n      view.state.groups,\n      view.type.applyGrouping,\n      view.meta.timelineFields?.date,\n      view.state.sortingOrder\n    ]\n  );\n\n  return (\n    <TimelineToolbarCosmos\n      sort={displaySort ? sort : undefined}\n      group={view.meta.grouping && displayGrouping ? group : undefined}\n      {...restProps}\n    />\n  );\n};\n\nexport default TimelineToolbar;\n"]}
+{"version":3,"file":"TimelineToolbar.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/Timeline/TimelineToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Group } from 'packages/lists-rs-core/types/State.types';\nimport { useMemo } from 'react';\n\nimport type { OmitStrict, ListToolbarProps } from '@pega/cosmos-react-core';\nimport type { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport { ListToolbar, useI18n } from '@pega/cosmos-react-core';\n\nimport { TOOLBAR_FEATURES } from '../../../constants';\nimport { mapDateFnToGroupOption } from '../../../Views/Timeline/utility';\n\nconst TimelineToolbar = ({\n  view,\n  ...restProps\n}: {\n  view: RsCoreTypes.View;\n} & OmitStrict<ListToolbarProps, 'sort' | 'group'>) => {\n  const t = useI18n();\n  const displaySort = view.shouldDisplayFeature(TOOLBAR_FEATURES.SORT);\n  const displayGrouping = view.shouldDisplayFeature(TOOLBAR_FEATURES.GROUPING);\n\n  const sort: PresetMenuProps = useMemo(() => {\n    const selected = view.state.sortingOrder?.[0]?.order === 'asc' ? 'ascending' : 'descending';\n    return {\n      mode: 'single-select',\n      items: [\n        {\n          id: 'descending',\n          text: t('timeline_toolbar_sort_descending'),\n          icon: 'arrow-down',\n          selected: selected === 'descending'\n        },\n        {\n          id: 'ascending',\n          text: t('timeline_toolbar_sort_ascending'),\n          icon: 'arrow-up',\n          selected: selected === 'ascending'\n        }\n      ],\n      onItemClick: id => {\n        if (view.state?.sortingOrder?.[0]) {\n          view.type.applySorting([\n            {\n              ...view.state.sortingOrder[0],\n              order: id === 'ascending' ? 'asc' : 'desc'\n            }\n          ]);\n        }\n      }\n    };\n  }, [view.state.sortingOrder, view.type.applySorting]);\n\n  const group: PresetMenuProps = useMemo(() => {\n    const selected = mapDateFnToGroupOption(view.state.groups?.[0]?.dateFunction);\n\n    return {\n      mode: 'single-select',\n      items: [\n        {\n          id: 'date',\n          text: t('timeline_toolbar_group_date'),\n          selected: selected === 'date'\n        },\n        {\n          id: 'monthyear',\n          text: t('timeline_toolbar_group_monthyear'),\n          selected: selected === 'monthyear'\n        },\n        {\n          id: 'quarteryear',\n          text: t('timeline_toolbar_group_quarteryear'),\n          selected: selected === 'quarteryear'\n        },\n        {\n          id: 'year',\n          text: t('timeline_toolbar_group_year'),\n          selected: selected === 'year'\n        },\n        {\n          id: 'none',\n          text: t('timeline_toolbar_group_none'),\n          selected: selected === 'none'\n        }\n      ],\n      onItemClick: id => {\n        let dateFunction: Group['dateFunction'];\n        switch (id) {\n          case 'year':\n            dateFunction = 'YEARS';\n            break;\n          case 'quarteryear':\n            dateFunction = 'QUARTERS';\n            break;\n          case 'monthyear':\n            dateFunction = 'MONTHS';\n            break;\n          case 'date':\n            dateFunction = 'DAYS';\n            break;\n          default:\n        }\n        view.type.applyGrouping(\n          dateFunction && view.meta.timelineFields?.date?.label\n            ? [\n                {\n                  columnId: view.meta.timelineFields.date.label,\n                  dateFunction,\n                  level: 0,\n                  order: view.state.sortingOrder?.[0]?.order ?? 'desc'\n                }\n              ]\n            : []\n        );\n      }\n    };\n  }, [\n    view.state.groups,\n    view.type.applyGrouping,\n    view.meta.timelineFields?.date,\n    view.state.sortingOrder\n  ]);\n\n  return (\n    <ListToolbar\n      {...restProps}\n      sort={displaySort ? sort : undefined}\n      group={view.meta.grouping && displayGrouping ? group : undefined}\n    />\n  );\n};\n\nexport default TimelineToolbar;\n"]}

package/lib/Core/Components/Toolbar/hooks/useGroup/utils.d.ts

@@ -5,7 +5,7 @@ import type { GroupingOptions } from '../../Grouping.types';
  * Finds the matching column for the given columnId and returns its field type.
  * Returns `undefined` if no match found
  */
-export declare function getFieldType(columnId: Group['columnId'], columns: RsCoreTypes.Column[]): "number" | "boolean" | "text" | "time" | "action" | "date" | "currency" | "datetime" | "custom" | "URL" | "Date" | "Date only" | undefined;
+export declare function getFieldType(columnId: Group['columnId'], columns: RsCoreTypes.Column[]): "number" | "boolean" | "text" | "time" | "action" | "date" | "custom" | "currency" | "datetime" | "URL" | "Date" | "Date only" | undefined;
 /** Returns metadata to identify which fields and which date functions are/aren't available for selection */
 export declare function getGroupingOptions(groups: Group[], columns: RsCoreTypes.Column[], dateFunctions: RsCoreTypes.Meta['dateFunctions']): GroupingOptions;
 //# sourceMappingURL=utils.d.ts.map

package/lib/Core/Components/Toolbar/hooks/useMore.d.ts

@@ -4,6 +4,6 @@ declare function useMore({ view }: {
 }): {
     actions: any[];
     actionsButtonRef: import("react").MutableRefObject<null>;
-    popover: false | import("react/jsx-runtime").JSX.Element;
+    content: import("react/jsx-runtime").JSX.Element | null | undefined;
 };
 //# sourceMappingURL=useMore.d.ts.map

package/lib/Core/Components/Toolbar/hooks/useMore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMore.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useMore.jsx"],"names":[],"mappings":";AA6BA;;;;;;EAqXC"}
+{"version":3,"file":"useMore.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useMore.jsx"],"names":[],"mappings":";AA6BA;;;;;;EAyZC"}

package/lib/Core/Components/Toolbar/hooks/useMore.js

@@ -271,46 +271,60 @@ const useMore = ({ view }) => {
         }
     }, [forceShowMenu]);
     useKeyboardA11y({
-        container: popperRef,
-        onClose: finishPopOver
+        container: popperRef && forceShowMenu ? popperRef : null,
+        onClose: popperRef && forceShowMenu ? finishPopOver : () => { }
     });
-    let content;
-    if (moreContent === colsVisibility) {
-        content = (_jsx(ColumnSelector, { dispatch: applyToggleVisibility, columns: columns, action: moreContent, finishPopOver: finishPopOver }));
-    }
-    else if (moreContent === pinning) {
-        content = (_jsx(ColumnSelector, { dispatch: applyFreeze, columns: columns, action: moreContent, finishPopOver: finishPopOver }));
-    }
-    else if (moreContent === RowDensity) {
-        content = resolveViewComponent('rowHeightRenderer', renderFactory, {
-            ...getContext(),
-            view,
-            onClose: finishPopOver
-        });
-    }
-    else if (moreContent === ViewAs) {
-        content = resolveViewComponent('personalizationSelectorRenderer', renderFactory, getContext());
-    }
-    else if (moreContent === SaveViewAs) {
-        content = resolveViewComponent('personalizationCreateEditRenderer', renderFactory, {
-            onFinish: finishPopOver,
-            ...getContext(),
-            view
-        });
-    }
-    else if (moreContent === EditView) {
-        content = resolveViewComponent('personalizationCreateEditRenderer', renderFactory, {
-            onFinish: finishPopOver,
-            editing: true,
-            ...getContext(),
-            view
-        });
-    }
-    else if (moreContent === Info) {
-        content = _jsx(DebugInfo, { view: view, targetRef: actionsButtonRef, onClose: finishPopOver });
+    let component;
+    if (forceShowMenu) {
+        switch (moreContent) {
+            case colsVisibility:
+                component = (_jsx(ColumnSelector, { dispatch: applyToggleVisibility, columns: columns, action: moreContent, finishPopOver: finishPopOver }));
+                break;
+            case pinning:
+                component = (_jsx(ColumnSelector, { dispatch: applyFreeze, columns: columns, action: moreContent, finishPopOver: finishPopOver }));
+                break;
+            case RowDensity:
+                component = resolveViewComponent('rowHeightRenderer', renderFactory, {
+                    ...getContext(),
+                    view,
+                    onClose: finishPopOver
+                });
+                break;
+            case ViewAs:
+                component = resolveViewComponent('personalizationSelectorRenderer', renderFactory, getContext());
+                break;
+            case SaveViewAs:
+                component = actionsButtonRef.current
+                    ? resolveViewComponent('personalizationCreateEditRenderer', renderFactory, {
+                        onFinish: finishPopOver,
+                        target: actionsButtonRef.current,
+                        ...getContext(),
+                        view
+                    })
+                    : null;
+                break;
+            case EditView:
+                component = actionsButtonRef.current
+                    ? resolveViewComponent('personalizationCreateEditRenderer', renderFactory, {
+                        onFinish: finishPopOver,
+                        editing: true,
+                        target: actionsButtonRef.current,
+                        ...getContext(),
+                        view
+                    })
+                    : null;
+                break;
+            case Info:
+                component = actionsButtonRef.current ? (_jsx(DebugInfo, { view: view, target: actionsButtonRef.current, onClose: finishPopOver })) : null;
+                break;
+            default:
+                component = null;
+                break;
+        }
     }
-    const popover = forceShowMenu && (_jsx(Popover, { className: 'popper', arrow: true, ref: setPopperRef, target: actionsButtonRef.current, placement: 'bottom-end', children: content }));
-    return { actions: filteredActions, actionsButtonRef, popover };
+    // ColVisibility, pinning, RowDensity, ViewAs are all returning Menu, so popover is needed for them
+    const content = component && [colsVisibility, pinning, RowDensity, ViewAs].includes(moreContent) ? (_jsx(Popover, { className: 'popper', arrow: true, ref: setPopperRef, target: actionsButtonRef.current, placement: 'bottom-end', children: component })) : (component);
+    return { actions: filteredActions, actionsButtonRef, content };
 };
 export default useMore;
 //# sourceMappingURL=useMore.js.map