@pega/lists-react 8.0.0-build.27.14

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

@@ -0,0 +1,317 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { Popover, useElement, useModalManager } from '@pega/cosmos-react-core';
+import useTranslate from '../../../Hooks/useTranslate';
+import PersonalizationDeleteConfirmation from '../../DefaultComponents/PersonalizationDeleteConfirmation';
+import ColumnSelector, { colsVisibility, pinning } from '../ColumnSelector';
+import DebugInfo from '../DebugInfo';
+import { useKeyboardA11y } from '../../../Hooks/a11y';
+import useOuterEvent from '../../../Hooks/UseOuterEvent';
+import { resolveViewComponent } from '../../RenderingEngine/ComponentResolverFactory';
+const RowDensity = 'Row density';
+const SaveViewAs = 'Save view as..';
+const SaveViewChanges = 'Save changes';
+const ViewAs = 'View as...';
+const EditView = 'Edit view';
+const SetAsDefault = 'Set as default';
+const MarkAsAppDefault = 'Mark as app default';
+const Delete = 'Delete view';
+const ResetColumnWidths = 'Reset column widths';
+const AutoSizeColumns = 'Auto size columns';
+const ShowHeaderIcons = 'ShowHeaderIcons';
+const Info = 'Query info';
+const ImportCSVData = 'Import CSV data';
+const ExportToExcel = 'Export to Excel';
+const ExportToCSV = 'Export to CSV';
+const StyledMenuContent = styled.div `
+  padding: 0.062rem 0;
+`;
+const StyledPopover = styled.div `
+  .action-menu li button {
+    justify-content: start;
+  }
+  .action-menu button div {
+    align-items: center;
+  }
+`;
+const useMore = ({ view }) => {
+    const { meta: { displayDensity, toggleFieldVisibility, freezeFields, personalization, headerBar, enableAppDefault, enableFreezeColumns, autoSizeColumns, resetColumnWidths, rowDensity, showHeaderIcons: isHeaderIcons, showImportDataOption, showExportToExcelOption, showExportToCSVOption }, state: { showHeaderIcons, personalization: personalizationState, responsive: { sm: isSmallOrAbove } = {} } = {}, type: { applyToggleVisibility, applyFreeze }, toolBarOptions = [], columns, defaultPresetId, renderFactory, getContext } = view;
+    const actionsButtonRef = useRef(null);
+    const [translate] = useTranslate();
+    const { create } = useModalManager();
+    const [moreContent, setMoreContent] = useState('default');
+    const currentActiveView = personalizationState?.active;
+    const currentDefaultView = personalizationState?.defaultPersonalization;
+    const isAppDefaultView = currentActiveView === 'APP_DEFAULT';
+    const isViewDirty = personalizationState?.dirty;
+    const currentActiveViewName = personalizationState?.allPersonalizations?.[currentActiveView]?.name;
+    const isPreset = !!personalizationState?.allPersonalizations?.[currentActiveView]?.isPreset;
+    const onDeletePersonalization = useCallback(() => {
+        create(PersonalizationDeleteConfirmation, {
+            onSubmit: () => {
+                view.type.deletePersonalization(currentActiveView);
+            },
+            currentActiveViewName,
+            translate
+        }, {
+            alert: true
+        });
+    }, [create, currentActiveViewName, view.type, currentActiveView]);
+    const [forceShowMenu, setForceShowMenu] = useState(false);
+    const [container, setContainer] = useElement();
+    const moreBtnRef = useRef(null);
+    const actions = useMemo(() => [
+        [
+            {
+                id: colsVisibility,
+                icon: 'eye-off',
+                text: translate(colsVisibility),
+                show: !!toggleFieldVisibility,
+                onClick: () => {
+                    setMoreContent(colsVisibility);
+                    setForceShowMenu(true);
+                }
+            },
+            {
+                id: RowDensity,
+                icon: 'row-insert',
+                text: translate(RowDensity),
+                show: displayDensity.length > 0 && rowDensity,
+                onClick: () => {
+                    setMoreContent(RowDensity);
+                    setForceShowMenu(true);
+                }
+            },
+            {
+                id: pinning,
+                icon: 'freeze-column',
+                text: translate(pinning),
+                show: !!freezeFields && !!enableFreezeColumns && isSmallOrAbove,
+                onClick: () => {
+                    setMoreContent(pinning);
+                    setForceShowMenu(true);
+                }
+            },
+            {
+                id: ShowHeaderIcons,
+                icon: 'picture',
+                text: showHeaderIcons ? translate('Hide header icons') : translate('Show header icons'),
+                show: isHeaderIcons,
+                onClick: () => {
+                    view.type.updateHeaderIconsVisibility(!showHeaderIcons);
+                }
+            },
+            {
+                id: AutoSizeColumns,
+                icon: 'scale-up',
+                text: translate(AutoSizeColumns),
+                show: autoSizeColumns,
+                onClick: () => {
+                    view.applyColumnsAutoSize(false);
+                }
+            },
+            {
+                id: ResetColumnWidths,
+                icon: 'scale-down',
+                text: translate(ResetColumnWidths),
+                show: resetColumnWidths,
+                onClick: () => {
+                    view.applyColumnsAutoSize(true);
+                }
+            },
+            {
+                id: Info,
+                icon: 'information',
+                text: translate(Info),
+                show: true,
+                onClick: () => {
+                    setMoreContent(Info);
+                    setForceShowMenu(true);
+                }
+            }
+        ],
+        [
+            {
+                id: ViewAs,
+                icon: 'columns',
+                text: translate(ViewAs),
+                show: Boolean(personalization && !headerBar),
+                onClick: () => {
+                    setMoreContent(ViewAs);
+                    setForceShowMenu(true);
+                }
+            },
+            {
+                id: SaveViewAs,
+                icon: 'clipboard-plus',
+                text: translate(SaveViewAs),
+                show: Boolean(personalization),
+                onClick: () => {
+                    setMoreContent(SaveViewAs);
+                    setForceShowMenu(true);
+                }
+            },
+            {
+                id: SaveViewChanges,
+                icon: 'clipboard-plus',
+                text: translate(SaveViewChanges),
+                show: Boolean(personalization &&
+                    currentActiveView !== defaultPresetId &&
+                    (!isPreset || (isAppDefaultView && enableAppDefault)) &&
+                    isViewDirty),
+                onClick: () => {
+                    view.type.updatePersonalization(currentActiveView, currentDefaultView === currentActiveView, isAppDefaultView);
+                }
+            },
+            {
+                id: EditView,
+                icon: 'pencil',
+                text: translate(EditView),
+                show: Boolean(personalization &&
+                    (!isPreset || (isAppDefaultView && enableAppDefault)) &&
+                    currentActiveView !== defaultPresetId),
+                onClick: () => {
+                    setMoreContent(EditView);
+                    setForceShowMenu(true);
+                }
+            },
+            {
+                id: Delete,
+                icon: 'trash',
+                text: translate(Delete),
+                show: Boolean(personalization &&
+                    !isPreset &&
+                    currentActiveView !== defaultPresetId &&
+                    !isAppDefaultView),
+                onClick: onDeletePersonalization
+            },
+            {
+                id: SetAsDefault,
+                icon: 'clipboard-check',
+                text: translate(SetAsDefault),
+                show: Boolean((personalization || isPreset || currentActiveView === defaultPresetId) &&
+                    currentDefaultView !== currentActiveView &&
+                    !isAppDefaultView),
+                onClick: () => view.type.setDefaultPersonalization(currentActiveView)
+            },
+            {
+                id: MarkAsAppDefault,
+                icon: 'clipboard-check',
+                text: translate(MarkAsAppDefault),
+                show: Boolean(isPreset && enableAppDefault && personalization && !isAppDefaultView),
+                onClick: () => view.type.setAppDefaultPersonalization('APP_DEFAULT', currentActiveViewName)
+            },
+            {
+                id: ImportCSVData,
+                icon: 'document-xls',
+                text: translate(ImportCSVData),
+                show: Boolean(showImportDataOption),
+                onClick: () => view.type.importCSVData(create)
+            },
+            {
+                id: ExportToExcel,
+                testId: 'export-to-excel',
+                icon: 'document-xls',
+                text: translate(ExportToExcel),
+                show: Boolean(showExportToExcelOption),
+                onClick: () => view.type.exportToExcel()
+            },
+            {
+                id: ExportToCSV,
+                icon: 'document-xls',
+                text: translate(ExportToCSV),
+                show: Boolean(showExportToCSVOption),
+                onClick: () => view.type.exportToCSV()
+            }
+        ],
+        ...toolBarOptions
+    ], [
+        translate,
+        toggleFieldVisibility,
+        displayDensity.length,
+        rowDensity,
+        freezeFields,
+        enableFreezeColumns,
+        showHeaderIcons,
+        isHeaderIcons,
+        autoSizeColumns,
+        resetColumnWidths,
+        personalization,
+        headerBar,
+        currentActiveView,
+        defaultPresetId,
+        isPreset,
+        isViewDirty,
+        isAppDefaultView,
+        showExportToExcelOption,
+        showExportToCSVOption,
+        onDeletePersonalization,
+        currentDefaultView,
+        toolBarOptions,
+        currentActiveViewName,
+        view,
+        enableAppDefault,
+        isSmallOrAbove
+    ]);
+    const filteredActions = useMemo(() => actions
+        .flat()
+        .map(action => ({
+        ...action,
+        id: action.id.replaceAll(' ', '-')
+    }))
+        .filter(({ show = true }) => show), [actions]);
+    // refactor to more cleanWay later
+    const finishPopOver = () => {
+        if (forceShowMenu) {
+            setForceShowMenu(false); // this closes the popup
+            actionsButtonRef.current.focus();
+        }
+    };
+    useKeyboardA11y({
+        container,
+        originatorRef: moreBtnRef,
+        circularNavigation: true,
+        onEscape: finishPopOver
+    });
+    // considering only maximum 2d array, filtering null value.
+    let content;
+    if (moreContent === colsVisibility) {
+        content = (_jsx(ColumnSelector, { dispatch: applyToggleVisibility, columns: columns, action: moreContent }));
+    }
+    else if (moreContent === pinning) {
+        content = _jsx(ColumnSelector, { dispatch: applyFreeze, columns: columns, action: moreContent });
+    }
+    else if (moreContent === RowDensity) {
+        content = resolveViewComponent('rowHeightRenderer', renderFactory, { ...getContext(), view });
+    }
+    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 });
+    }
+    const [popperRef, setPopperRef] = useElement();
+    useOuterEvent('mousedown', [popperRef], () => {
+        finishPopOver();
+    });
+    const popover = (_jsx(_Fragment, { children: forceShowMenu && (_jsx(Popover, { className: 'popper', arrow: true, ref: setPopperRef, target: actionsButtonRef.current, placement: 'bottom-end', children: _jsx(StyledPopover, { children: _jsx(StyledMenuContent, { ref: setContainer, children: content }) }) })) }));
+    return { actions: filteredActions, actionsButtonRef, popover };
+};
+export default useMore;
+//# sourceMappingURL=useMore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMore.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useMore.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Popover, useElement, useModalManager } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../../../Hooks/useTranslate';\nimport PersonalizationDeleteConfirmation from '../../DefaultComponents/PersonalizationDeleteConfirmation';\nimport ColumnSelector, { colsVisibility, pinning } from '../ColumnSelector';\nimport DebugInfo from '../DebugInfo';\nimport { useKeyboardA11y } from '../../../Hooks/a11y';\nimport useOuterEvent from '../../../Hooks/UseOuterEvent';\nimport { resolveViewComponent } from '../../RenderingEngine/ComponentResolverFactory';\n\nconst RowDensity = 'Row density';\n\nconst SaveViewAs = 'Save view as..';\nconst SaveViewChanges = 'Save changes';\nconst ViewAs = 'View as...';\nconst EditView = 'Edit view';\nconst SetAsDefault = 'Set as default';\nconst MarkAsAppDefault = 'Mark as app default';\nconst Delete = 'Delete view';\nconst ResetColumnWidths = 'Reset column widths';\nconst AutoSizeColumns = 'Auto size columns';\nconst ShowHeaderIcons = 'ShowHeaderIcons';\nconst Info = 'Query info';\nconst ImportCSVData = 'Import CSV data';\nconst ExportToExcel = 'Export to Excel';\nconst ExportToCSV = 'Export to CSV';\n\nconst StyledMenuContent = styled.div`\n  padding: 0.062rem 0;\n`;\n\nconst StyledPopover = styled.div`\n  .action-menu li button {\n    justify-content: start;\n  }\n  .action-menu button div {\n    align-items: center;\n  }\n`;\n\nconst useMore = ({ view }) => {\n  const {\n    meta: {\n      displayDensity,\n      toggleFieldVisibility,\n      freezeFields,\n      personalization,\n      headerBar,\n      enableAppDefault,\n      enableFreezeColumns,\n      autoSizeColumns,\n      resetColumnWidths,\n      rowDensity,\n      showHeaderIcons: isHeaderIcons,\n      showImportDataOption,\n      showExportToExcelOption,\n      showExportToCSVOption\n    },\n    state: {\n      showHeaderIcons,\n      personalization: personalizationState,\n      responsive: { sm: isSmallOrAbove } = {}\n    } = {},\n    type: { applyToggleVisibility, applyFreeze },\n    toolBarOptions = [],\n    columns,\n    defaultPresetId,\n    renderFactory,\n    getContext\n  } = view;\n\n  const actionsButtonRef = useRef(null);\n  const [translate] = useTranslate();\n  const { create } = useModalManager();\n  const [moreContent, setMoreContent] = useState('default');\n  const currentActiveView = personalizationState?.active;\n  const currentDefaultView = personalizationState?.defaultPersonalization;\n  const isAppDefaultView = currentActiveView === 'APP_DEFAULT';\n  const isViewDirty = personalizationState?.dirty;\n  const currentActiveViewName =\n    personalizationState?.allPersonalizations?.[currentActiveView]?.name;\n  const isPreset = !!personalizationState?.allPersonalizations?.[currentActiveView]?.isPreset;\n\n  const onDeletePersonalization = useCallback(() => {\n    create(\n      PersonalizationDeleteConfirmation,\n      {\n        onSubmit: () => {\n          view.type.deletePersonalization(currentActiveView);\n        },\n        currentActiveViewName,\n        translate\n      },\n      {\n        alert: true\n      }\n    );\n  }, [create, currentActiveViewName, view.type, currentActiveView]);\n\n  const [forceShowMenu, setForceShowMenu] = useState(false);\n  const [container, setContainer] = useElement();\n  const moreBtnRef = useRef(null);\n\n  const actions = useMemo(\n    () => [\n      [\n        {\n          id: colsVisibility,\n          icon: 'eye-off',\n          text: translate(colsVisibility),\n          show: !!toggleFieldVisibility,\n          onClick: () => {\n            setMoreContent(colsVisibility);\n            setForceShowMenu(true);\n          }\n        },\n        {\n          id: RowDensity,\n          icon: 'row-insert',\n          text: translate(RowDensity),\n          show: displayDensity.length > 0 && rowDensity,\n          onClick: () => {\n            setMoreContent(RowDensity);\n            setForceShowMenu(true);\n          }\n        },\n        {\n          id: pinning,\n          icon: 'freeze-column',\n          text: translate(pinning),\n          show: !!freezeFields && !!enableFreezeColumns && isSmallOrAbove,\n          onClick: () => {\n            setMoreContent(pinning);\n            setForceShowMenu(true);\n          }\n        },\n        {\n          id: ShowHeaderIcons,\n          icon: 'picture',\n          text: showHeaderIcons ? translate('Hide header icons') : translate('Show header icons'),\n          show: isHeaderIcons,\n          onClick: () => {\n            view.type.updateHeaderIconsVisibility(!showHeaderIcons);\n          }\n        },\n        {\n          id: AutoSizeColumns,\n          icon: 'scale-up',\n          text: translate(AutoSizeColumns),\n          show: autoSizeColumns,\n          onClick: () => {\n            view.applyColumnsAutoSize(false);\n          }\n        },\n        {\n          id: ResetColumnWidths,\n          icon: 'scale-down',\n          text: translate(ResetColumnWidths),\n          show: resetColumnWidths,\n          onClick: () => {\n            view.applyColumnsAutoSize(true);\n          }\n        },\n        {\n          id: Info,\n          icon: 'information',\n          text: translate(Info),\n          show: true,\n          onClick: () => {\n            setMoreContent(Info);\n            setForceShowMenu(true);\n          }\n        }\n      ],\n      [\n        {\n          id: ViewAs,\n          icon: 'columns',\n          text: translate(ViewAs),\n          show: Boolean(personalization && !headerBar),\n          onClick: () => {\n            setMoreContent(ViewAs);\n            setForceShowMenu(true);\n          }\n        },\n        {\n          id: SaveViewAs,\n          icon: 'clipboard-plus',\n          text: translate(SaveViewAs),\n          show: Boolean(personalization),\n          onClick: () => {\n            setMoreContent(SaveViewAs);\n            setForceShowMenu(true);\n          }\n        },\n        {\n          id: SaveViewChanges,\n          icon: 'clipboard-plus',\n          text: translate(SaveViewChanges),\n          show: Boolean(\n            personalization &&\n              currentActiveView !== defaultPresetId &&\n              (!isPreset || (isAppDefaultView && enableAppDefault)) &&\n              isViewDirty\n          ),\n          onClick: () => {\n            view.type.updatePersonalization(\n              currentActiveView,\n              currentDefaultView === currentActiveView,\n              isAppDefaultView\n            );\n          }\n        },\n        {\n          id: EditView,\n          icon: 'pencil',\n          text: translate(EditView),\n          show: Boolean(\n            personalization &&\n              (!isPreset || (isAppDefaultView && enableAppDefault)) &&\n              currentActiveView !== defaultPresetId\n          ),\n          onClick: () => {\n            setMoreContent(EditView);\n            setForceShowMenu(true);\n          }\n        },\n        {\n          id: Delete,\n          icon: 'trash',\n          text: translate(Delete),\n          show: Boolean(\n            personalization &&\n              !isPreset &&\n              currentActiveView !== defaultPresetId &&\n              !isAppDefaultView\n          ),\n          onClick: onDeletePersonalization\n        },\n        {\n          id: SetAsDefault,\n          icon: 'clipboard-check',\n          text: translate(SetAsDefault),\n          show: Boolean(\n            (personalization || isPreset || currentActiveView === defaultPresetId) &&\n              currentDefaultView !== currentActiveView &&\n              !isAppDefaultView\n          ),\n          onClick: () => view.type.setDefaultPersonalization(currentActiveView)\n        },\n        {\n          id: MarkAsAppDefault,\n          icon: 'clipboard-check',\n          text: translate(MarkAsAppDefault),\n          show: Boolean(isPreset && enableAppDefault && personalization && !isAppDefaultView),\n          onClick: () =>\n            view.type.setAppDefaultPersonalization('APP_DEFAULT', currentActiveViewName)\n        },\n        {\n          id: ImportCSVData,\n          icon: 'document-xls',\n          text: translate(ImportCSVData),\n          show: Boolean(showImportDataOption),\n          onClick: () => view.type.importCSVData(create)\n        },\n        {\n          id: ExportToExcel,\n          testId: 'export-to-excel',\n          icon: 'document-xls',\n          text: translate(ExportToExcel),\n          show: Boolean(showExportToExcelOption),\n          onClick: () => view.type.exportToExcel()\n        },\n        {\n          id: ExportToCSV,\n          icon: 'document-xls',\n          text: translate(ExportToCSV),\n          show: Boolean(showExportToCSVOption),\n          onClick: () => view.type.exportToCSV()\n        }\n      ],\n      ...toolBarOptions\n    ],\n    [\n      translate,\n      toggleFieldVisibility,\n      displayDensity.length,\n      rowDensity,\n      freezeFields,\n      enableFreezeColumns,\n      showHeaderIcons,\n      isHeaderIcons,\n      autoSizeColumns,\n      resetColumnWidths,\n      personalization,\n      headerBar,\n      currentActiveView,\n      defaultPresetId,\n      isPreset,\n      isViewDirty,\n      isAppDefaultView,\n      showExportToExcelOption,\n      showExportToCSVOption,\n      onDeletePersonalization,\n      currentDefaultView,\n      toolBarOptions,\n      currentActiveViewName,\n      view,\n      enableAppDefault,\n      isSmallOrAbove\n    ]\n  );\n\n  const filteredActions = useMemo(\n    () =>\n      actions\n        .flat()\n        .map(action => ({\n          ...action,\n          id: action.id.replaceAll(' ', '-')\n        }))\n        .filter(({ show = true }) => show),\n    [actions]\n  );\n\n  // refactor to more cleanWay later\n  const finishPopOver = () => {\n    if (forceShowMenu) {\n      setForceShowMenu(false); // this closes the popup\n      actionsButtonRef.current.focus();\n    }\n  };\n\n  useKeyboardA11y({\n    container,\n    originatorRef: moreBtnRef,\n    circularNavigation: true,\n    onEscape: finishPopOver\n  });\n\n  // considering only maximum 2d array, filtering null value.\n\n  let content;\n  if (moreContent === colsVisibility) {\n    content = (\n      <ColumnSelector dispatch={applyToggleVisibility} columns={columns} action={moreContent} />\n    );\n  } else if (moreContent === pinning) {\n    content = <ColumnSelector dispatch={applyFreeze} columns={columns} action={moreContent} />;\n  } else if (moreContent === RowDensity) {\n    content = resolveViewComponent('rowHeightRenderer', renderFactory, { ...getContext(), view });\n  } else if (moreContent === ViewAs) {\n    content = resolveViewComponent('personalizationSelectorRenderer', renderFactory, getContext());\n  } else if (moreContent === SaveViewAs) {\n    content = resolveViewComponent('personalizationCreateEditRenderer', renderFactory, {\n      onFinish: finishPopOver,\n      ...getContext(),\n      view\n    });\n  } else if (moreContent === EditView) {\n    content = resolveViewComponent('personalizationCreateEditRenderer', renderFactory, {\n      onFinish: finishPopOver,\n      editing: true,\n      ...getContext(),\n      view\n    });\n  } else if (moreContent === Info) {\n    content = <DebugInfo view={view} />;\n  }\n\n  const [popperRef, setPopperRef] = useElement();\n  useOuterEvent('mousedown', [popperRef], () => {\n    finishPopOver();\n  });\n\n  const popover = (\n    <>\n      {forceShowMenu && (\n        <Popover\n          className='popper'\n          arrow\n          ref={setPopperRef}\n          target={actionsButtonRef.current}\n          placement='bottom-end'\n        >\n          <StyledPopover>\n            <StyledMenuContent ref={setContainer}>{content}</StyledMenuContent>\n          </StyledPopover>\n        </Popover>\n      )}\n    </>\n  );\n\n  return { actions: filteredActions, actionsButtonRef, popover };\n};\n\nexport default useMore;\n"]}

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

@@ -0,0 +1,13 @@
+export default usePersonalization;
+declare function usePersonalization({ view }: {
+    view: any;
+}): {
+    viewSelector?: undefined;
+} | {
+    viewSelector: {
+        views: never[];
+        defaultId: undefined;
+        appDefaultId: undefined;
+    };
+};
+//# sourceMappingURL=usePersonalization.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePersonalization.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/usePersonalization.js"],"names":[],"mappings":";AAEA;;;;;;;;;;EAoBC"}

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

@@ -0,0 +1,17 @@
+import { usePersonalizationSelector } from '../../DefaultComponents/PersonalizationSelector';
+const usePersonalization = ({ view }) => {
+    const { state: { personalization } = {}, meta: { nonPersonalizationViewName, name }, defaultPresetId } = view;
+    const { actions, defaultId, appDefaultId } = usePersonalizationSelector({
+        personalization,
+        nonPersonalizationViewName,
+        actionPersonalizationSetActive: view.type.applyActivePersonalization,
+        name,
+        defaultPresetId
+    });
+    if (!personalization) {
+        return {};
+    }
+    return { viewSelector: { views: actions.flat(), defaultId, appDefaultId } };
+};
+export default usePersonalization;
+//# sourceMappingURL=usePersonalization.js.map

package/lib/Core/Components/Toolbar/hooks/usePersonalization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersonalization.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/usePersonalization.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAC;AAE7F,MAAM,kBAAkB,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACtC,MAAM,EACJ,KAAK,EAAE,EAAE,eAAe,EAAE,GAAG,EAAE,EAC/B,IAAI,EAAE,EAAE,0BAA0B,EAAE,IAAI,EAAE,EAC1C,eAAe,EAChB,GAAG,IAAI,CAAC;IAET,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,0BAA0B,CAAC;QACtE,eAAe;QACf,0BAA0B;QAC1B,8BAA8B,EAAE,IAAI,CAAC,IAAI,CAAC,0BAA0B;QACpE,IAAI;QACJ,eAAe;KAChB,CAAC,CAAC;IAEH,IAAI,CAAC,eAAe,EAAE,CAAC;QACrB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,CAAC;AAC9E,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { usePersonalizationSelector } from '../../DefaultComponents/PersonalizationSelector';\n\nconst usePersonalization = ({ view }) => {\n  const {\n    state: { personalization } = {},\n    meta: { nonPersonalizationViewName, name },\n    defaultPresetId\n  } = view;\n\n  const { actions, defaultId, appDefaultId } = usePersonalizationSelector({\n    personalization,\n    nonPersonalizationViewName,\n    actionPersonalizationSetActive: view.type.applyActivePersonalization,\n    name,\n    defaultPresetId\n  });\n\n  if (!personalization) {\n    return {};\n  }\n\n  return { viewSelector: { views: actions.flat(), defaultId, appDefaultId } };\n};\n\nexport default usePersonalization;\n"]}

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

@@ -0,0 +1,6 @@
+export default function useRowFocus(): {
+    focusRowRef: import("react").MutableRefObject<null>;
+    focusRowId: string;
+    setFocusRowId: import("react").Dispatch<import("react").SetStateAction<string>>;
+};
+//# sourceMappingURL=useRowFocus.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useRowFocus.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useRowFocus.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,WAAW;;;;EAUlC"}

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

@@ -0,0 +1,13 @@
+import { useEffect, useState, useRef } from 'react';
+import { getFocusables } from '@pega/cosmos-react-core';
+export default function useRowFocus() {
+    const focusRowRef = useRef(null);
+    const [focusRowId, setFocusRowId] = useState('');
+    useEffect(() => {
+        const focusables = getFocusables(focusRowRef);
+        if (focusables[0])
+            focusables[0].focus();
+    }, [focusRowId]);
+    return { focusRowRef, focusRowId, setFocusRowId };
+}
+//# sourceMappingURL=useRowFocus.js.map

package/lib/Core/Components/Toolbar/hooks/useRowFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowFocus.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useRowFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,WAAW;IACjC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACjC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;QAC9C,IAAI,UAAU,CAAC,CAAC,CAAC;YAAE,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC;AACpD,CAAC","sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\nimport { getFocusables } from '@pega/cosmos-react-core';\n\nexport default function useRowFocus() {\n  const focusRowRef = useRef(null);\n  const [focusRowId, setFocusRowId] = useState<string>('');\n\n  useEffect(() => {\n    const focusables = getFocusables(focusRowRef);\n    if (focusables[0]) focusables[0].focus();\n  }, [focusRowId]);\n\n  return { focusRowRef, focusRowId, setFocusRowId };\n}\n"]}

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

@@ -0,0 +1,11 @@
+export default useSearch;
+declare function useSearch({ view }: {
+    view: any;
+}): {
+    value: any;
+    onSearchSubmit: any;
+    onSearchChange: (query: any) => void;
+    'aria-label': string;
+    disabled: boolean;
+} | null;
+//# sourceMappingURL=useSearch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSearch.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useSearch.js"],"names":[],"mappings":";AAMA;;;;;;;;SAyCC"}

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

@@ -0,0 +1,38 @@
+import { useEffect, useState, useCallback } from 'react';
+import { getVisibileFields } from 'pega-repeating-structures-core';
+import useTranslate from '../../../Hooks/useTranslate';
+const useSearch = ({ view }) => {
+    const [translate] = useTranslate();
+    const { meta: { fieldDefs, title }, state: { hiddenColumns, customFields } } = view;
+    const [value, setValue] = useState(view.state?.searchText || '');
+    const activeView = view.state.personalization?.active;
+    const personalizations = view.state.personalization?.allPersonalizations;
+    const ariaLabel = (personalizations && personalizations[activeView]?.name) || title;
+    const visibleFields = getVisibileFields(fieldDefs, hiddenColumns, customFields);
+    const isAnyTextFieldPresent = !!visibleFields.find(({ type }) => type === 'text');
+    const onSearchChange = useCallback(query => {
+        setValue(query);
+        if (!query && view.type)
+            view.type.applySearch(query);
+    }, [view.type]);
+    useEffect(() => {
+        if (!isAnyTextFieldPresent) {
+            onSearchChange('');
+        }
+    }, [isAnyTextFieldPresent, onSearchChange]);
+    useEffect(() => {
+        onSearchChange('');
+    }, [activeView]);
+    if (!view.meta.globalSearch) {
+        return null;
+    }
+    return {
+        value,
+        onSearchSubmit: view.type?.applySearch,
+        onSearchChange,
+        'aria-label': `${translate(ariaLabel)} table`,
+        disabled: !isAnyTextFieldPresent
+    };
+};
+export default useSearch;
+//# sourceMappingURL=useSearch.js.map

package/lib/Core/Components/Toolbar/hooks/useSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearch.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useSearch.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAEvD,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7B,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IACnC,MAAM,EACJ,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,EAC1B,KAAK,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,EACvC,GAAG,IAAI,CAAC;IACT,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;IACjE,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,MAAM,CAAC;IACtD,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,mBAAmB,CAAC;IACzE,MAAM,SAAS,GAAG,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC;IACpF,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,EAAE,aAAa,EAAE,YAAY,CAAC,CAAC;IAChF,MAAM,qBAAqB,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC;IAClF,MAAM,cAAc,GAAG,WAAW,CAChC,KAAK,CAAC,EAAE;QACN,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC,EACD,CAAC,IAAI,CAAC,IAAI,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC3B,cAAc,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,EAAE,CAAC,qBAAqB,EAAE,cAAc,CAAC,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO;QACL,KAAK;QACL,cAAc,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW;QACtC,cAAc;QACd,YAAY,EAAE,GAAG,SAAS,CAAC,SAAS,CAAC,QAAQ;QAC7C,QAAQ,EAAE,CAAC,qBAAqB;KACjC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useEffect, useState, useCallback } from 'react';\n\nimport { getVisibileFields } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../../Hooks/useTranslate';\n\nconst useSearch = ({ view }) => {\n  const [translate] = useTranslate();\n  const {\n    meta: { fieldDefs, title },\n    state: { hiddenColumns, customFields }\n  } = view;\n  const [value, setValue] = useState(view.state?.searchText || '');\n  const activeView = view.state.personalization?.active;\n  const personalizations = view.state.personalization?.allPersonalizations;\n  const ariaLabel = (personalizations && personalizations[activeView]?.name) || title;\n  const visibleFields = getVisibileFields(fieldDefs, hiddenColumns, customFields);\n  const isAnyTextFieldPresent = !!visibleFields.find(({ type }) => type === 'text');\n  const onSearchChange = useCallback(\n    query => {\n      setValue(query);\n      if (!query && view.type) view.type.applySearch(query);\n    },\n    [view.type]\n  );\n\n  useEffect(() => {\n    if (!isAnyTextFieldPresent) {\n      onSearchChange('');\n    }\n  }, [isAnyTextFieldPresent, onSearchChange]);\n\n  useEffect(() => {\n    onSearchChange('');\n  }, [activeView]);\n\n  if (!view.meta.globalSearch) {\n    return null;\n  }\n\n  return {\n    value,\n    onSearchSubmit: view.type?.applySearch,\n    onSearchChange,\n    'aria-label': `${translate(ariaLabel)} table`,\n    disabled: !isAnyTextFieldPresent\n  };\n};\n\nexport default useSearch;\n"]}

package/lib/Core/Components/Toolbar/hooks/useSort/Row.d.ts

@@ -0,0 +1,44 @@
+export default Row;
+declare function Row({ updateSortItemId, updateSortItemOrder, columns, removeSortItem, sortItems, index, id, order, sequence, dragProps, dropProps, focusRowRef }: {
+    updateSortItemId: any;
+    updateSortItemOrder: any;
+    columns: any;
+    removeSortItem: any;
+    sortItems: any;
+    index: any;
+    id: any;
+    order: any;
+    sequence: any;
+    dragProps: any;
+    dropProps: any;
+    focusRowRef: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare namespace Row {
+    namespace propTypes {
+        let updateSortItemId: PropTypes.Validator<(...args: any[]) => any>;
+        let updateSortItemOrder: PropTypes.Validator<(...args: any[]) => any>;
+        let columns: PropTypes.Validator<any[]>;
+        let removeSortItem: PropTypes.Validator<(...args: any[]) => any>;
+        let sortItems: PropTypes.Validator<any[]>;
+        let id: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
+        let index: PropTypes.Validator<number>;
+        let order: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
+        let sequence: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
+        let dragProps: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+        let dropProps: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+        let focusRowRef: PropTypes.Requireable<{
+            [x: string]: any;
+        }>;
+    }
+    namespace defaultProps {
+        let focusRowRef_1: {};
+        export { focusRowRef_1 as focusRowRef };
+    }
+    let displayName: string;
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=Row.d.ts.map

package/lib/Core/Components/Toolbar/hooks/useSort/Row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/Row.jsx"],"names":[],"mappings":";AAkBA;;;;;;;;;;;;;mDAiFC;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAnGqB,YAAY"}

package/lib/Core/Components/Toolbar/hooks/useSort/Row.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Button, Flex, Icon, Option, Select, FormField } from '@pega/cosmos-react-core';
+import FieldSelector from '../../FieldSelector';
+import { keyFrom } from '../../../../Utils';
+import useTranslate from '../../../../Hooks/useTranslate';
+import { getValidSortColumnsInRow, getValidSortOrders } from './utils';
+const StyledRow = styled.div.attrs(props => ({ 'data-drop': props['data-drop'] })) `
+  .remove-sort {
+    cursor: pointer;
+    align-items: end;
+  }
+`;
+const Row = ({ updateSortItemId, updateSortItemOrder, columns, removeSortItem, sortItems, index, id, order, sequence, dragProps, dropProps, focusRowRef }) => {
+    const [translate] = useTranslate();
+    const validSortColumnsInRow = getValidSortColumnsInRow(columns, sortItems, id);
+    if (!validSortColumnsInRow || !validSortColumnsInRow.length)
+        return null;
+    const validSortOrders = getValidSortOrders();
+    const { label } = validSortOrders.find(v => v.id === order) || {};
+    return (_jsx(StyledRow, { ...dropProps, "data-sequence": sequence, children: _jsxs(Flex, { container: {
+                justify: 'between',
+                alignItems: 'center',
+                direction: 'row',
+                wrap: 'no-wrap',
+                itemGap: 0.5
+            }, ref: focusRowRef, children: [_jsx(Flex, { item: true, ...dragProps, children: _jsx(Icon, { style: { verticalAlign: '-webkit-baseline-middle' }, name: 'drag' }) }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(FormField, { label: translate('Field'), children: _jsx(FieldSelector, { columns: validSortColumnsInRow, value: id, onChange: newID => updateSortItemId(newID, sequence), fieldProp: 'id' }) }) }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(FormField, { label: translate('Sort order'), children: _jsxs(Select, { className: 'select-sorts', "data-testid": 'SortSelector', value: label, onChange: e => {
+                                const o = validSortOrders.find(v => v.label === e.target.value);
+                                if (o) {
+                                    updateSortItemOrder(e, sequence, o.id);
+                                }
+                            }, children: [_jsx("option", { value: '', children: "Select..." }), validSortOrders.map((v, i) => (_jsx(Option, { value: v.label, children: translate(v.label) }, keyFrom(v.label, i))))] }) }) }), _jsx(Flex, { item: true, children: _jsx(Button, { "aria-label": translate('Remove sort'), icon: true, variant: 'simple', className: 'remove-sort', onClick: () => removeSortItem(index, order), children: _jsx(Icon, { name: 'trash' }) }) })] }) }));
+};
+Row.propTypes = {
+    updateSortItemId: PropTypes.func.isRequired,
+    updateSortItemOrder: PropTypes.func.isRequired,
+    columns: PropTypes.arrayOf(PropTypes.any).isRequired,
+    removeSortItem: PropTypes.func.isRequired,
+    sortItems: PropTypes.arrayOf(PropTypes.any).isRequired,
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    index: PropTypes.number.isRequired,
+    order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    sequence: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    dragProps: PropTypes.objectOf(PropTypes.any).isRequired,
+    dropProps: PropTypes.objectOf(PropTypes.any).isRequired,
+    focusRowRef: PropTypes.objectOf(PropTypes.any)
+};
+Row.defaultProps = {
+    focusRowRef: {}
+};
+Row.displayName = 'Row';
+export default Row;
+//# sourceMappingURL=Row.js.map

package/lib/Core/Components/Toolbar/hooks/useSort/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/Row.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Button, Flex, Icon, Option, Select, FormField } from '@pega/cosmos-react-core';\n\nimport FieldSelector from '../../FieldSelector';\nimport { keyFrom } from '../../../../Utils';\nimport useTranslate from '../../../../Hooks/useTranslate';\n\nimport { getValidSortColumnsInRow, getValidSortOrders } from './utils';\n\nconst StyledRow = styled.div.attrs(props => ({ 'data-drop': props['data-drop'] }))`\n  .remove-sort {\n    cursor: pointer;\n    align-items: end;\n  }\n`;\n\nconst Row = ({\n  updateSortItemId,\n  updateSortItemOrder,\n  columns,\n  removeSortItem,\n  sortItems,\n  index,\n  id,\n  order,\n  sequence,\n  dragProps,\n  dropProps,\n  focusRowRef\n}) => {\n  const [translate] = useTranslate();\n  const validSortColumnsInRow = getValidSortColumnsInRow(columns, sortItems, id);\n  if (!validSortColumnsInRow || !validSortColumnsInRow.length) return null;\n  const validSortOrders = getValidSortOrders();\n  const { label } = validSortOrders.find(v => v.id === order) || {};\n\n  return (\n    <StyledRow {...dropProps} data-sequence={sequence}>\n      <Flex\n        container={{\n          justify: 'between',\n          alignItems: 'center',\n          direction: 'row',\n          wrap: 'no-wrap',\n          itemGap: 0.5\n        }}\n        ref={focusRowRef}\n      >\n        <Flex item {...dragProps}>\n          <Icon style={{ verticalAlign: '-webkit-baseline-middle' }} name='drag' />\n        </Flex>\n        <Flex item={{ grow: 1 }}>\n          <FormField label={translate('Field')}>\n            <FieldSelector\n              columns={validSortColumnsInRow}\n              value={id}\n              onChange={newID => updateSortItemId(newID, sequence)}\n              fieldProp='id'\n            />\n          </FormField>\n        </Flex>\n        <Flex item={{ grow: 1 }}>\n          <FormField label={translate('Sort order')}>\n            <Select\n              className='select-sorts'\n              data-testid='SortSelector'\n              value={label}\n              onChange={e => {\n                const o = validSortOrders.find(v => v.label === e.target.value);\n                if (o) {\n                  updateSortItemOrder(e, sequence, o.id);\n                }\n              }}\n            >\n              <option value=''>Select...</option>\n              {validSortOrders.map((v, i) => (\n                <Option key={keyFrom(v.label, i)} value={v.label}>\n                  {translate(v.label)}\n                </Option>\n              ))}\n            </Select>\n          </FormField>\n        </Flex>\n        <Flex item>\n          <Button\n            aria-label={translate('Remove sort')}\n            icon\n            variant='simple'\n            className='remove-sort'\n            onClick={() => removeSortItem(index, order)}\n          >\n            <Icon name='trash' />\n          </Button>\n        </Flex>\n      </Flex>\n    </StyledRow>\n  );\n};\n\nRow.propTypes = {\n  updateSortItemId: PropTypes.func.isRequired,\n  updateSortItemOrder: PropTypes.func.isRequired,\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  removeSortItem: PropTypes.func.isRequired,\n  sortItems: PropTypes.arrayOf(PropTypes.any).isRequired,\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  index: PropTypes.number.isRequired,\n  order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  sequence: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  dragProps: PropTypes.objectOf(PropTypes.any).isRequired,\n  dropProps: PropTypes.objectOf(PropTypes.any).isRequired,\n  focusRowRef: PropTypes.objectOf(PropTypes.any)\n};\n\nRow.defaultProps = {\n  focusRowRef: {}\n};\n\nRow.displayName = 'Row';\n\nexport default Row;\n"]}

package/lib/Core/Components/Toolbar/hooks/useSort/SortRenderer.d.ts

@@ -0,0 +1,13 @@
+import type { Sort } from 'pega-repeating-structures-core/types/State.types';
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+import type { SortItem } from './useSort';
+interface SortRendererProps {
+    sortItems: SortItem[];
+    columns: RsCoreTypes.Column[];
+    updateSortItems: (sortItems: (Sort | {
+        order: string;
+    })[]) => void;
+}
+declare const SortRenderer: ({ sortItems, columns, updateSortItems }: SortRendererProps) => import("react/jsx-runtime").JSX.Element;
+export default SortRenderer;
+//# sourceMappingURL=SortRenderer.d.ts.map

package/lib/Core/Components/Toolbar/hooks/useSort/SortRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortRenderer.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useSort/SortRenderer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kDAAkD,CAAC;AAC7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAOlE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAI1C,UAAU,iBAAiB;IACzB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC9B,eAAe,EAAE,CAAC,SAAS,EAAE,CAAC,IAAI,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,KAAK,IAAI,CAAC;CACpE;AAED,QAAA,MAAM,YAAY,4CAA6C,iBAAiB,4CA+H/E,CAAC;AAEF,eAAe,YAAY,CAAC"}