@pega/lists-react 8.0.0-build.27.14

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useMemo } from 'react';
+import { ConditionBuilder, splitConditionTree } from '@pega/cosmos-react-condition-builder';
+import useValidRhsTypes from '../../Filters/Hooks/useValidRhsTypes';
+import getMenuItemsFromColumns from '../utils/utils';
+import { TOOLBAR_FEATURES } from '../../../constants';
+const useFilter = ({ view }) => {
+    const { state: { filterExpression, clearColFilter } = {}, type: { clearFilter, applyFilter } } = view;
+    const displayFilter = view.shouldDisplayFeature(TOOLBAR_FEATURES.FILTER);
+    const formattedColumns = useMemo(() => getMenuItemsFromColumns(view.columns?.filter(c => c.field.filter), 'name'), [view.columns]);
+    const validRhsTypes = useValidRhsTypes(view);
+    const handle = useRef(null);
+    const { conditions } = splitConditionTree(filterExpression);
+    const filters = Object.keys(conditions) || [];
+    const onSubmit = useCallback(() => {
+        if (!handle?.current)
+            return true;
+        const [valid, newCondition] = handle.current.getCondition();
+        if (!valid)
+            return false;
+        applyFilter({ filterExp: newCondition });
+        if (clearColFilter)
+            clearFilter(null);
+        return true;
+    }, [applyFilter, clearFilter, clearColFilter]);
+    const onCancel = useCallback(() => {
+        if (clearColFilter)
+            clearFilter(null);
+    }, [clearColFilter, clearFilter]);
+    const filterRenderer = useCallback(() => {
+        return (_jsx(ConditionBuilder, { fields: formattedColumns, condition: filterExpression || undefined, validRhsTypes: validRhsTypes, dateFunctions: view.meta.dateFunctions, disallowNOT: true, handle: handle }));
+    }, [filterExpression, formattedColumns, validRhsTypes, view.meta.dateFunctions]);
+    if (!displayFilter)
+        return;
+    return {
+        count: filters?.length > 0 ? filters.length : undefined,
+        renderer: filterRenderer,
+        onCancel,
+        onSubmit
+    };
+};
+export default useFilter;
+//# sourceMappingURL=useFilter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFilter.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useFilter.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE5F,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,uBAAuB,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7B,MAAM,EACJ,KAAK,EAAE,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,EAAE,EAChD,IAAI,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,EACnC,GAAG,IAAI,CAAC;IACT,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACzE,MAAM,gBAAgB,GAAG,OAAO,CAC9B,GAAG,EAAE,CACH,uBAAuB,CACrB,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,EACzC,MAAM,CACP,EACH,CAAC,IAAI,CAAC,OAAO,CAAC,CACf,CAAC;IACF,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,EAAE,UAAU,EAAE,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC5D,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IAE9C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,MAAM,EAAE,OAAO;YAAE,OAAO,IAAI,CAAC;QAElC,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;QAC5D,IAAI,CAAC,KAAK;YAAE,OAAO,KAAK,CAAC;QAEzB,WAAW,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,CAAC;QACzC,IAAI,cAAc;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,IAAI,cAAc;YAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC;IAClC,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,OAAO,CACL,KAAC,gBAAgB,IACf,MAAM,EAAE,gBAAgB,EACxB,SAAS,EAAE,gBAAgB,IAAI,SAAS,EACxC,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,EACtC,WAAW,QACX,MAAM,EAAE,MAAM,GACd,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IACjF,IAAI,CAAC,aAAa;QAAE,OAAO;IAC3B,OAAO;QACL,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACvD,QAAQ,EAAE,cAAc;QACxB,QAAQ;QACR,QAAQ;KACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useCallback, useRef, useMemo } from 'react';\n\nimport { ConditionBuilder, splitConditionTree } from '@pega/cosmos-react-condition-builder';\n\nimport useValidRhsTypes from '../../Filters/Hooks/useValidRhsTypes';\nimport getMenuItemsFromColumns from '../utils/utils';\nimport { TOOLBAR_FEATURES } from '../../../constants';\n\nconst useFilter = ({ view }) => {\n  const {\n    state: { filterExpression, clearColFilter } = {},\n    type: { clearFilter, applyFilter }\n  } = view;\n  const displayFilter = view.shouldDisplayFeature(TOOLBAR_FEATURES.FILTER);\n  const formattedColumns = useMemo(\n    () =>\n      getMenuItemsFromColumns(\n        view.columns?.filter(c => c.field.filter),\n        'name'\n      ),\n    [view.columns]\n  );\n  const validRhsTypes = useValidRhsTypes(view);\n  const handle = useRef(null);\n  const { conditions } = splitConditionTree(filterExpression);\n  const filters = Object.keys(conditions) || [];\n\n  const onSubmit = useCallback(() => {\n    if (!handle?.current) return true;\n\n    const [valid, newCondition] = handle.current.getCondition();\n    if (!valid) return false;\n\n    applyFilter({ filterExp: newCondition });\n    if (clearColFilter) clearFilter(null);\n    return true;\n  }, [applyFilter, clearFilter, clearColFilter]);\n\n  const onCancel = useCallback(() => {\n    if (clearColFilter) clearFilter(null);\n  }, [clearColFilter, clearFilter]);\n  const filterRenderer = useCallback(() => {\n    return (\n      <ConditionBuilder\n        fields={formattedColumns}\n        condition={filterExpression || undefined}\n        validRhsTypes={validRhsTypes}\n        dateFunctions={view.meta.dateFunctions} // Could be undefined\n        disallowNOT\n        handle={handle}\n      />\n    );\n  }, [filterExpression, formattedColumns, validRhsTypes, view.meta.dateFunctions]);\n  if (!displayFilter) return;\n  return {\n    count: filters?.length > 0 ? filters.length : undefined,\n    renderer: filterRenderer,\n    onCancel,\n    onSubmit\n  };\n};\n\nexport default useFilter;\n"]}

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

@@ -0,0 +1,5 @@
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+import type { FormControlProps } from '@pega/cosmos-react-core';
+declare const useFormControlProps: (view: RsCoreTypes.View) => FormControlProps;
+export default useFormControlProps;
+//# sourceMappingURL=useFormControlProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormControlProps.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useFormControlProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAIhE,QAAA,MAAM,mBAAmB,SAAU,WAAW,CAAC,IAAI,KAAG,gBAcrD,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { useToolbarContext } from '../../../Context/ToolbarContext';
+const useFormControlProps = (view) => {
+    const { meta: { requiredOnLoad } = {}, getContext } = view;
+    const { getRequiredDef } = getContext();
+    const { required } = getRequiredDef() || {};
+    const { additionalInfo } = useToolbarContext();
+    return useMemo(() => {
+        const formProps = {};
+        if (required ?? requiredOnLoad) {
+            formProps.required = true;
+        }
+        formProps.additionalInfo = additionalInfo;
+        return formProps;
+    }, [required, requiredOnLoad, additionalInfo]);
+};
+export default useFormControlProps;
+//# sourceMappingURL=useFormControlProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormControlProps.js","sourceRoot":"","sources":["../../../../../Core/Components/Toolbar/hooks/useFormControlProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEpE,MAAM,mBAAmB,GAAG,CAAC,IAAsB,EAAoB,EAAE;IACvE,MAAM,EAAE,IAAI,EAAE,EAAE,cAAc,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAE3D,MAAM,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IACxC,MAAM,EAAE,QAAQ,EAAE,GAAQ,cAAc,EAAE,IAAI,EAAE,CAAC;IACjD,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAC/C,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,SAAS,GAAqB,EAAE,CAAC;QACvC,IAAI,QAAQ,IAAI,cAAc,EAAE,CAAC;YAC/B,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;QAC5B,CAAC;QACD,SAAS,CAAC,cAAc,GAAG,cAAc,CAAC;QAC1C,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC;AACjD,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { FormControlProps } from '@pega/cosmos-react-core';\n\nimport { useToolbarContext } from '../../../Context/ToolbarContext';\n\nconst useFormControlProps = (view: RsCoreTypes.View): FormControlProps => {\n  const { meta: { requiredOnLoad } = {}, getContext } = view;\n\n  const { getRequiredDef } = getContext();\n  const { required }: any = getRequiredDef() || {};\n  const { additionalInfo } = useToolbarContext();\n  return useMemo(() => {\n    const formProps: FormControlProps = {};\n    if (required ?? requiredOnLoad) {\n      formProps.required = true;\n    }\n    formProps.additionalInfo = additionalInfo;\n    return formProps;\n  }, [required, requiredOnLoad, additionalInfo]);\n};\n\nexport default useFormControlProps;\n"]}

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

@@ -0,0 +1,24 @@
+export default DateFunctionSelector;
+/** Renders a Date-function selector in a grouping row if applicable */
+declare function DateFunctionSelector(props: any): import("react/jsx-runtime").JSX.Element | null;
+declare namespace DateFunctionSelector {
+    namespace propTypes {
+        let group: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+        let dateFunctions: PropTypes.Requireable<{
+            [x: string]: any;
+        }>;
+        let groupingOptions: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+        let columns: PropTypes.Validator<any[]>;
+        let onChange: PropTypes.Validator<(...args: any[]) => any>;
+    }
+    namespace defaultProps {
+        let dateFunctions_1: undefined;
+        export { dateFunctions_1 as dateFunctions };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=DateFunctionSelector.d.ts.map

package/lib/Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFunctionSelector.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.jsx"],"names":[],"mappings":";AAeA,uEAAuE;AACvE,kGA2DC;;;;;;;;;;;;;;;;;;;;sBA1EqB,YAAY"}

package/lib/Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Option, Select } from '@pega/cosmos-react-core';
+import { dateFunctionLabels } from 'pega-repeating-structures-core';
+import useTranslate from '../../../../Hooks/useTranslate';
+import { getFieldType } from './utils';
+const StyledDateFuncWrapper = styled.div `
+  width: 9rem;
+`;
+/** Renders a Date-function selector in a grouping row if applicable */
+const DateFunctionSelector = props => {
+    const { group, groupingOptions, dateFunctions, columns, onChange } = props;
+    const [translate] = useTranslate();
+    const fieldType = getFieldType(group.columnId, columns);
+    /**
+     * Determine what all date functions (if any) can be used for the given fieldType
+     * @type { import("./Grouping.types").DateSelectorOption[] }
+     */
+    const allOptions = useMemo(() => {
+        // If date functions are disabled or not applicable to the current field type
+        if (!dateFunctions || !['date', 'datetime'].includes(fieldType)) {
+            return [];
+        }
+        return [
+            // Date functions applicable for the given field type
+            ...dateFunctions[fieldType === 'date' ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({
+                key: f,
+                dateFunction: f,
+                label: translate(dateFunctionLabels[f])
+            })),
+            // Option for grouping directly by the field values
+            // The key 'NONE' is needed to work with the Select component
+            { key: 'NONE', dateFunction: undefined, label: 'Default' }
+        ];
+    }, [dateFunctions, fieldType, translate]);
+    // Skip if no options are available
+    // i.e. date functions are disabled or not applicable to current field type
+    if (allOptions.length === 0) {
+        return null;
+    }
+    // NOTE: Doing it this way to preserve the order of options.
+    // If we instead appended `group.dateFunction` to `available`, the order or options will change on further selections.
+    const { available } = groupingOptions.dateFuncs[group.columnId];
+    const optionsToUse = allOptions.filter(o => available.includes(o.dateFunction) || o.dateFunction === group.dateFunction);
+    return (_jsx(StyledDateFuncWrapper, { children: _jsx(Select, { label: 'Date function', labelHidden: true, "data-testid": 'GroupingDateFuncSelector', value: group.dateFunction || 'NONE', onChange: e => onChange(e.target.value === 'NONE' ? undefined : e.target.value), children: optionsToUse.map(o => (_jsx(Option, { value: o.key, children: o.label }, o.key))) }) }));
+};
+DateFunctionSelector.propTypes = {
+    group: PropTypes.objectOf(PropTypes.any).isRequired,
+    dateFunctions: PropTypes.objectOf(PropTypes.any),
+    groupingOptions: PropTypes.objectOf(PropTypes.any).isRequired,
+    columns: PropTypes.arrayOf(PropTypes.any).isRequired,
+    onChange: PropTypes.func.isRequired
+};
+DateFunctionSelector.defaultProps = { dateFunctions: undefined };
+export default DateFunctionSelector;
+//# sourceMappingURL=DateFunctionSelector.js.map

package/lib/Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFunctionSelector.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/DateFunctionSelector.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Option, Select } from '@pega/cosmos-react-core';\nimport { dateFunctionLabels } from 'pega-repeating-structures-core';\n\nimport useTranslate from '../../../../Hooks/useTranslate';\n\nimport { getFieldType } from './utils';\n\nconst StyledDateFuncWrapper = styled.div`\n  width: 9rem;\n`;\n\n/** Renders a Date-function selector in a grouping row if applicable */\nconst DateFunctionSelector = props => {\n  const { group, groupingOptions, dateFunctions, columns, onChange } = props;\n  const [translate] = useTranslate();\n  const fieldType = getFieldType(group.columnId, columns);\n\n  /**\n   * Determine what all date functions (if any) can be used for the given fieldType\n   * @type { import(\"./Grouping.types\").DateSelectorOption[] }\n   */\n  const allOptions = useMemo(() => {\n    // If date functions are disabled or not applicable to the current field type\n    if (!dateFunctions || !['date', 'datetime'].includes(fieldType)) {\n      return [];\n    }\n\n    return [\n      // Date functions applicable for the given field type\n      ...dateFunctions[fieldType === 'date' ? 'DATE_ONLY' : 'DATE_TIME'].map(f => ({\n        key: f,\n        dateFunction: f,\n        label: translate(dateFunctionLabels[f])\n      })),\n\n      // Option for grouping directly by the field values\n      // The key 'NONE' is needed to work with the Select component\n      { key: 'NONE', dateFunction: undefined, label: 'Default' }\n    ];\n  }, [dateFunctions, fieldType, translate]);\n\n  // Skip if no options are available\n  // i.e. date functions are disabled or not applicable to current field type\n  if (allOptions.length === 0) {\n    return null;\n  }\n\n  // NOTE: Doing it this way to preserve the order of options.\n  // If we instead appended `group.dateFunction` to `available`, the order or options will change on further selections.\n  const { available } = groupingOptions.dateFuncs[group.columnId];\n  const optionsToUse = allOptions.filter(\n    o => available.includes(o.dateFunction) || o.dateFunction === group.dateFunction\n  );\n\n  return (\n    <StyledDateFuncWrapper>\n      <Select\n        label='Date function'\n        labelHidden\n        data-testid='GroupingDateFuncSelector'\n        value={group.dateFunction || 'NONE'} // Can't set up `undefined` as value\n        onChange={e => onChange(e.target.value === 'NONE' ? undefined : e.target.value)}\n      >\n        {optionsToUse.map(o => (\n          <Option key={o.key} value={o.key}>\n            {o.label}\n          </Option>\n        ))}\n      </Select>\n    </StyledDateFuncWrapper>\n  );\n};\nDateFunctionSelector.propTypes = {\n  group: PropTypes.objectOf(PropTypes.any).isRequired,\n  dateFunctions: PropTypes.objectOf(PropTypes.any),\n  groupingOptions: PropTypes.objectOf(PropTypes.any).isRequired,\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  onChange: PropTypes.func.isRequired\n};\nDateFunctionSelector.defaultProps = { dateFunctions: undefined };\n\nexport default DateFunctionSelector;\n"]}

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

@@ -0,0 +1,16 @@
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+import type { Group } from 'pega-repeating-structures-core/types/State.types';
+import type { GroupingOptions } from '../../Grouping.types';
+import type { AppliedGroup } from './useGroup';
+interface GroupRendererProps {
+    appliedGroups: AppliedGroup[];
+    groupingOptions: GroupingOptions;
+    setGroups: (groups: (Group | {
+        id: string;
+    })[]) => void;
+    columns: RsCoreTypes.Column[];
+    dateFunctions: RsCoreTypes.Meta['dateFunctions'];
+}
+declare const GroupRenderer: ({ appliedGroups, groupingOptions, setGroups, columns, dateFunctions }: GroupRendererProps) => import("react/jsx-runtime").JSX.Element;
+export default GroupRenderer;
+//# sourceMappingURL=GroupRenderer.d.ts.map

package/lib/Core/Components/Toolbar/hooks/useGroup/GroupRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupRenderer.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/GroupRenderer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAK9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAI5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAS/C,UAAU,kBAAkB;IAC1B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,GAAG;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACxD,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;IAC9B,aAAa,EAAE,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;CAClD;AACD,QAAA,MAAM,aAAa,0EAMhB,kBAAkB,4CAoLpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/Core/Components/Toolbar/hooks/useGroup/GroupRenderer.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { useCallback, useEffect, useRef } from 'react';
+import { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';
+import useRowFocus from '../useRowFocus';
+import useDragDrop from '../../../../Hooks/useDragDrop';
+import FieldSelector from '../../FieldSelector';
+import { getFieldType } from './utils';
+import DateFunctionSelector from './DateFunctionSelector';
+const DropSelector = '[data-drop]';
+const StyledRow = styled.div `
+  .remove-group {
+    cursor: pointer;
+  }
+`;
+const GroupRenderer = ({ appliedGroups, groupingOptions, setGroups, columns, dateFunctions }) => {
+    const t = useI18n();
+    const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();
+    const dragDropRef = useRef(null);
+    const getAnimationSelector = useCallback((target) => target.closest(DropSelector), []);
+    const onDrop = useCallback((dest, src) => {
+        const dropIndex = Number(dest.getAttribute('data-index'));
+        const dragIndex = Number(src.getAttribute('data-index'));
+        if (dragIndex !== dropIndex) {
+            const existingGroups = appliedGroups.map(v => ({ ...v }));
+            const dragGroup = existingGroups.splice(dragIndex, 1)[0];
+            existingGroups.splice(dropIndex, 0, dragGroup);
+            setGroups(existingGroups);
+        }
+    }, [appliedGroups, setGroups]);
+    const { dragProps, dropProps } = useDragDrop({
+        context: dragDropRef,
+        getAnimationSelector,
+        getGhostImageSelector: getAnimationSelector,
+        getDraggedObject: getAnimationSelector,
+        onDrop
+    });
+    const removeGroup = useCallback((index) => {
+        const existingGroups = appliedGroups.map(v => ({ ...v }));
+        existingGroups.splice(index, 1);
+        setGroups(existingGroups);
+        if (existingGroups.length > 0)
+            setFocusRowId(index === appliedGroups.length - 1
+                ? existingGroups[index - 1].id
+                : existingGroups[index].id);
+    }, [appliedGroups, setGroups, setFocusRowId]);
+    const handleColumnChange = useCallback((group, index, newID) => {
+        if (newID === group.columnId)
+            return; // Ignore re-selecting the same
+        const updatedGroup = {
+            ...group,
+            columnId: newID,
+            dateFunction: undefined // Reset for non-date/time fields
+        };
+        // For date/datetime field, pick a date function by default (if enabled)
+        const fieldType = getFieldType(newID, columns);
+        if (dateFunctions && (fieldType === 'date' || fieldType === 'datetime')) {
+            updatedGroup.dateFunction = groupingOptions.dateFuncs[newID]
+                ? groupingOptions.dateFuncs[newID].available[0] // If the field is already picked before
+                : groupingOptions.dateGroupVariants[fieldType][0]; // When picking the field for the first time
+        }
+        setGroups([
+            ...appliedGroups.slice(0, index),
+            updatedGroup,
+            ...appliedGroups.slice(index + 1)
+        ]);
+    }, [appliedGroups, groupingOptions, setGroups, dateFunctions, columns]);
+    const handleDateFuncChange = useCallback((group, index, newFunc) => {
+        if (newFunc === group.dateFunction)
+            return; // Ignore re-selecting the same
+        const updatedGroup = { ...group, dateFunction: newFunc };
+        setGroups([
+            ...appliedGroups.slice(0, index),
+            updatedGroup,
+            ...appliedGroups.slice(index + 1)
+        ]);
+    }, [setGroups, appliedGroups]);
+    const addRow = useCallback(() => {
+        const newRow = { id: createUID(), columnId: '', order: 'asc' };
+        const existingGroups = [...appliedGroups, newRow];
+        setGroups(existingGroups);
+        setFocusRowId(newRow.id);
+    }, [appliedGroups, setGroups, setFocusRowId]);
+    useEffect(() => {
+        if (!appliedGroups.length) {
+            addRow();
+        }
+    }, [appliedGroups, addRow]);
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Flex, { container: { direction: 'column', gap: 1 }, className: 'group-content', ref: dragDropRef, children: appliedGroups.map((group, index) => (_jsx(StyledRow, { children: _jsx("div", { ...dropProps, "data-index": index, children: _jsxs(Flex, { container: {
+                                justify: 'between',
+                                alignItems: 'center',
+                                direction: 'row',
+                                wrap: 'nowrap',
+                                itemGap: 0.5
+                            }, ref: appliedGroups[index].id === focusRowId ? focusRowRef : null, children: [_jsx(Flex, { item: { grow: 1 }, children: _jsxs(Flex, { container: {
+                                            justify: 'start',
+                                            alignItems: 'center',
+                                            direction: 'row',
+                                            wrap: 'nowrap',
+                                            itemGap: 0.5
+                                        }, children: [_jsx("div", { ...dragProps, children: _jsx(Icon, { name: 'drag' }) }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(FieldSelector, { columns: columns?.filter(c => c.field.grouping &&
+                                                        (c.field.id.toString() === group.columnId.toString() ||
+                                                            !groupingOptions.exhaustedFields.has(c.field.id))), value: group.columnId, disabled: !!group.customFunction, onChange: (newID) => handleColumnChange(group, index, newID), fieldProp: 'id' }) }), _jsx(DateFunctionSelector, { group: group, groupingOptions: groupingOptions, dateFunctions: dateFunctions, columns: columns, onChange: (newFunc) => handleDateFuncChange(group, index, newFunc) })] }) }), _jsx(Button, { "aria-label": t('delete_group'), icon: true, variant: 'simple', className: 'remove-group', onClick: () => removeGroup(index), children: _jsx(Icon, { name: 'trash' }) })] }) }) }, group.id))) }), _jsx("div", { children: _jsx(Button, { variant: 'link', "aria-label": t('add_group'), onClick: addRow, children: _jsxs(Flex, { container: {
+                            inline: true,
+                            alignItems: 'start',
+                            gap: 1
+                        }, as: 'span', children: [_jsx(Icon, { name: 'plus' }), _jsx("span", { children: t('add') })] }) }) })] }, 'grouping'));
+};
+export default GroupRenderer;
+//# sourceMappingURL=GroupRenderer.js.map

package/lib/Core/Components/Toolbar/hooks/useGroup/GroupRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupRenderer.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/GroupRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAIjF,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAGhD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAG1D,MAAM,YAAY,GAAG,aAAa,CAAC;AACnC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI3B,CAAC;AASF,MAAM,aAAa,GAAG,CAAC,EACrB,aAAa,EACb,eAAe,EACf,SAAS,EACT,OAAO,EACP,aAAa,EACM,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,WAAW,EAAE,CAAC;IAEjE,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,oBAAoB,GAAG,WAAW,CAAC,CAAC,MAAe,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC;IAChG,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,IAAa,EAAE,GAAY,EAAE,EAAE;QAC9B,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;QAC1D,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;QACzD,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YAC5B,MAAM,cAAc,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;YAC1D,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACzD,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;YAC/C,SAAS,CAAC,cAAc,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,SAAS,CAAC,CAC3B,CAAC;IACF,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;QAC3C,OAAO,EAAE,WAAW;QACpB,oBAAoB;QACpB,qBAAqB,EAAE,oBAAoB;QAC3C,gBAAgB,EAAE,oBAAoB;QACtC,MAAM;KACP,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAa,EAAE,EAAE;QAChB,MAAM,cAAc,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAC1D,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAChC,SAAS,CAAC,cAAc,CAAC,CAAC;QAE1B,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC;YAC3B,aAAa,CACX,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC;gBAChC,CAAC,CAAC,cAAc,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;gBAC9B,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,CAC7B,CAAC;IACN,CAAC,EACD,CAAC,aAAa,EAAE,SAAS,EAAE,aAAa,CAAC,CAC1C,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,KAAY,EAAE,KAAa,EAAE,KAAa,EAAE,EAAE;QAC7C,IAAI,KAAK,KAAK,KAAK,CAAC,QAAQ;YAAE,OAAO,CAAC,+BAA+B;QACrE,MAAM,YAAY,GAAU;YAC1B,GAAG,KAAK;YACR,QAAQ,EAAE,KAAK;YACf,YAAY,EAAE,SAAS,CAAC,iCAAiC;SAC1D,CAAC;QAEF,wEAAwE;QACxE,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC/C,IAAI,aAAa,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,UAAU,CAAC,EAAE,CAAC;YACxE,YAAY,CAAC,YAAY,GAAG,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC;gBAC1D,CAAC,CAAC,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,wCAAwC;gBACxF,CAAC,CAAC,eAAe,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,4CAA4C;QACnG,CAAC;QAED,SAAS,CAAC;YACR,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;YAChC,YAAY;YACZ,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;SAClC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,aAAa,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,CAAC,CACpE,CAAC;IAEF,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,KAAY,EAAE,KAAa,EAAE,OAA8B,EAAE,EAAE;QAC9D,IAAI,OAAO,KAAK,KAAK,CAAC,YAAY;YAAE,OAAO,CAAC,+BAA+B;QAC3E,MAAM,YAAY,GAAG,EAAE,GAAG,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;QACzD,SAAS,CAAC;YACR,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;YAChC,YAAY;YACZ,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;SAClC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,SAAS,EAAE,aAAa,CAAC,CAC3B,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,MAAM,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;QAC/D,MAAM,cAAc,GAAG,CAAC,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC;QAClD,SAAS,CAAC,cAAc,CAAC,CAAC;QAC1B,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;YAC1B,MAAM,EAAE,CAAC;QACX,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,WAAW,YACzF,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,KAAC,SAAS,cACR,iBAAS,SAAS,gBAAc,KAAK,YACnC,MAAC,IAAI,IACH,SAAS,EAAE;gCACT,OAAO,EAAE,SAAS;gCAClB,UAAU,EAAE,QAAQ;gCACpB,SAAS,EAAE,KAAK;gCAChB,IAAI,EAAE,QAAQ;gCACd,OAAO,EAAE,GAAG;6BACb,EACD,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,aAEhE,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,MAAC,IAAI,IACH,SAAS,EAAE;4CACT,OAAO,EAAE,OAAO;4CAChB,UAAU,EAAE,QAAQ;4CACpB,SAAS,EAAE,KAAK;4CAChB,IAAI,EAAE,QAAQ;4CACd,OAAO,EAAE,GAAG;yCACb,aAED,iBAAS,SAAS,YAChB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GAChB,EACN,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,aAAa,IACZ,OAAO,EAAE,OAAO,EAAE,MAAM,CACtB,CAAC,CAAC,EAAE,CACF,CAAC,CAAC,KAAK,CAAC,QAAQ;wDAChB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE;4DAClD,CAAC,eAAe,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CACtD,EACD,KAAK,EAAE,KAAK,CAAC,QAAQ,EACrB,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,cAAc,EAChC,QAAQ,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EACpE,SAAS,EAAC,IAAI,GACd,GACG,EACP,KAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,OAA8B,EAAE,EAAE,CAC3C,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,GAE7C,IACG,GACF,EACP,KAAC,MAAM,kBACO,CAAC,CAAC,cAAc,CAAC,EAC7B,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,YAEjC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,IACJ,GACH,IA5DQ,KAAK,CAAC,EAAE,CA6DZ,CACb,CAAC,GACG,EACP,wBACE,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,gBAAa,CAAC,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,MAAM,YAChE,MAAC,IAAI,IACH,SAAS,EAAE;4BACT,MAAM,EAAE,IAAI;4BACZ,UAAU,EAAE,OAAO;4BACnB,GAAG,EAAE,CAAC;yBACP,EACD,EAAE,EAAC,MAAM,aAET,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,EACpB,yBAAO,CAAC,CAAC,KAAK,CAAC,GAAQ,IAClB,GACA,GACL,KAjF8C,UAAU,CAkFzD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import styled from 'styled-components';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button, createUID, Flex, Icon, useI18n } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport useRowFocus from '../useRowFocus';\nimport useDragDrop from '../../../../Hooks/useDragDrop';\nimport FieldSelector from '../../FieldSelector';\nimport type { GroupingOptions } from '../../Grouping.types';\n\nimport { getFieldType } from './utils';\nimport DateFunctionSelector from './DateFunctionSelector';\nimport type { AppliedGroup } from './useGroup';\n\nconst DropSelector = '[data-drop]';\nconst StyledRow = styled.div`\n  .remove-group {\n    cursor: pointer;\n  }\n`;\n\ninterface GroupRendererProps {\n  appliedGroups: AppliedGroup[];\n  groupingOptions: GroupingOptions;\n  setGroups: (groups: (Group | { id: string })[]) => void;\n  columns: RsCoreTypes.Column[];\n  dateFunctions: RsCoreTypes.Meta['dateFunctions'];\n}\nconst GroupRenderer = ({\n  appliedGroups,\n  groupingOptions,\n  setGroups,\n  columns,\n  dateFunctions\n}: GroupRendererProps) => {\n  const t = useI18n();\n  const { focusRowRef, focusRowId, setFocusRowId } = useRowFocus();\n\n  const dragDropRef = useRef<HTMLDivElement>(null);\n  const getAnimationSelector = useCallback((target: Element) => target.closest(DropSelector), []);\n  const onDrop = useCallback(\n    (dest: Element, src: Element) => {\n      const dropIndex = Number(dest.getAttribute('data-index'));\n      const dragIndex = Number(src.getAttribute('data-index'));\n      if (dragIndex !== dropIndex) {\n        const existingGroups = appliedGroups.map(v => ({ ...v }));\n        const dragGroup = existingGroups.splice(dragIndex, 1)[0];\n        existingGroups.splice(dropIndex, 0, dragGroup);\n        setGroups(existingGroups);\n      }\n    },\n    [appliedGroups, setGroups]\n  );\n  const { dragProps, dropProps } = useDragDrop({\n    context: dragDropRef,\n    getAnimationSelector,\n    getGhostImageSelector: getAnimationSelector,\n    getDraggedObject: getAnimationSelector,\n    onDrop\n  });\n\n  const removeGroup = useCallback(\n    (index: number) => {\n      const existingGroups = appliedGroups.map(v => ({ ...v }));\n      existingGroups.splice(index, 1);\n      setGroups(existingGroups);\n\n      if (existingGroups.length > 0)\n        setFocusRowId(\n          index === appliedGroups.length - 1\n            ? existingGroups[index - 1].id\n            : existingGroups[index].id\n        );\n    },\n    [appliedGroups, setGroups, setFocusRowId]\n  );\n\n  const handleColumnChange = useCallback(\n    (group: Group, index: number, newID: string) => {\n      if (newID === group.columnId) return; // Ignore re-selecting the same\n      const updatedGroup: Group = {\n        ...group,\n        columnId: newID,\n        dateFunction: undefined // Reset for non-date/time fields\n      };\n\n      // For date/datetime field, pick a date function by default (if enabled)\n      const fieldType = getFieldType(newID, columns);\n      if (dateFunctions && (fieldType === 'date' || fieldType === 'datetime')) {\n        updatedGroup.dateFunction = groupingOptions.dateFuncs[newID]\n          ? groupingOptions.dateFuncs[newID].available[0] // If the field is already picked before\n          : groupingOptions.dateGroupVariants[fieldType][0]; // When picking the field for the first time\n      }\n\n      setGroups([\n        ...appliedGroups.slice(0, index),\n        updatedGroup,\n        ...appliedGroups.slice(index + 1)\n      ]);\n    },\n    [appliedGroups, groupingOptions, setGroups, dateFunctions, columns]\n  );\n\n  const handleDateFuncChange = useCallback(\n    (group: Group, index: number, newFunc: Group['dateFunction']) => {\n      if (newFunc === group.dateFunction) return; // Ignore re-selecting the same\n      const updatedGroup = { ...group, dateFunction: newFunc };\n      setGroups([\n        ...appliedGroups.slice(0, index),\n        updatedGroup,\n        ...appliedGroups.slice(index + 1)\n      ]);\n    },\n    [setGroups, appliedGroups]\n  );\n\n  const addRow = useCallback(() => {\n    const newRow = { id: createUID(), columnId: '', order: 'asc' };\n    const existingGroups = [...appliedGroups, newRow];\n    setGroups(existingGroups);\n    setFocusRowId(newRow.id);\n  }, [appliedGroups, setGroups, setFocusRowId]);\n\n  useEffect(() => {\n    if (!appliedGroups.length) {\n      addRow();\n    }\n  }, [appliedGroups, addRow]);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }} key='grouping'>\n      <Flex container={{ direction: 'column', gap: 1 }} className='group-content' ref={dragDropRef}>\n        {appliedGroups.map((group, index) => (\n          <StyledRow key={group.id}>\n            <div {...dropProps} data-index={index}>\n              <Flex\n                container={{\n                  justify: 'between',\n                  alignItems: 'center',\n                  direction: 'row',\n                  wrap: 'nowrap',\n                  itemGap: 0.5\n                }}\n                ref={appliedGroups[index].id === focusRowId ? focusRowRef : null}\n              >\n                <Flex item={{ grow: 1 }}>\n                  <Flex\n                    container={{\n                      justify: 'start',\n                      alignItems: 'center',\n                      direction: 'row',\n                      wrap: 'nowrap',\n                      itemGap: 0.5\n                    }}\n                  >\n                    <div {...dragProps}>\n                      <Icon name='drag' />\n                    </div>\n                    <Flex item={{ grow: 1 }}>\n                      <FieldSelector\n                        columns={columns?.filter(\n                          c =>\n                            c.field.grouping &&\n                            (c.field.id.toString() === group.columnId.toString() ||\n                              !groupingOptions.exhaustedFields.has(c.field.id))\n                        )}\n                        value={group.columnId}\n                        disabled={!!group.customFunction}\n                        onChange={(newID: string) => handleColumnChange(group, index, newID)}\n                        fieldProp='id'\n                      />\n                    </Flex>\n                    <DateFunctionSelector\n                      group={group}\n                      groupingOptions={groupingOptions}\n                      dateFunctions={dateFunctions}\n                      columns={columns}\n                      onChange={(newFunc: Group['dateFunction']) =>\n                        handleDateFuncChange(group, index, newFunc)\n                      }\n                    />\n                  </Flex>\n                </Flex>\n                <Button\n                  aria-label={t('delete_group')}\n                  icon\n                  variant='simple'\n                  className='remove-group'\n                  onClick={() => removeGroup(index)}\n                >\n                  <Icon name='trash' />\n                </Button>\n              </Flex>\n            </div>\n          </StyledRow>\n        ))}\n      </Flex>\n      <div>\n        <Button variant='link' aria-label={t('add_group')} onClick={addRow}>\n          <Flex\n            container={{\n              inline: true,\n              alignItems: 'start',\n              gap: 1\n            }}\n            as='span'\n          >\n            <Icon name='plus' />\n            <span>{t('add')}</span>\n          </Flex>\n        </Button>\n      </div>\n    </Flex>\n  );\n};\n\nexport default GroupRenderer;\n"]}

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

@@ -0,0 +1,11 @@
+import { type ListToolbarProps } from '@pega/cosmos-react-core';
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+import type { Group } from 'pega-repeating-structures-core/types/State.types';
+export interface AppliedGroup extends Group {
+    id: string;
+}
+declare const useGroup: ({ view }: {
+    view: RsCoreTypes.View;
+}) => ListToolbarProps["group"];
+export default useGroup;
+//# sourceMappingURL=useGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGroup.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/useGroup.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;AACxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAQ9E,MAAM,WAAW,YAAa,SAAQ,KAAK;IACzC,EAAE,EAAE,MAAM,CAAC;CACZ;AAKD,QAAA,MAAM,QAAQ,aAAc;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,KAAG,gBAAgB,CAAC,OAAO,CAsFhF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useState } from 'react';
+import { createUID, usePrevious } from '@pega/cosmos-react-core';
+import { TOOLBAR_FEATURES } from '../../../../constants';
+import { deepEqual } from '../../../../Utils';
+import { getGroupingOptions } from './utils';
+import GroupRenderer from './GroupRenderer';
+const convertGroupsToAppliedGroups = (groups) => groups.map(group => ({ ...group, id: createUID() }));
+const useGroup = ({ view }) => {
+    const { state: { groups = [] } = {}, meta: { grouping, dateFunctions }, type: { applyGrouping }, columns = [] } = view;
+    const displayGrouping = view.shouldDisplayFeature(TOOLBAR_FEATURES.GROUPING);
+    const [appliedGroups, setAppliedGroups] = useState([]);
+    const [groupingOptions, setGroupingOptions] = useState(() => getGroupingOptions(groups, columns, dateFunctions));
+    const setGroups = useCallback((newGroups) => {
+        setAppliedGroups(newGroups);
+        setGroupingOptions(getGroupingOptions(newGroups, columns, dateFunctions));
+    }, [columns, dateFunctions]);
+    // BUG-758989 This useEffect should run only once when the columns are populated on view
+    // as getGroupingOptions function has dependency on column to form dateFunc object
+    const prevColumns = usePrevious(columns);
+    useEffect(() => {
+        if (!columns || !prevColumns)
+            return;
+        if (columns.length !== prevColumns.length) {
+            setGroupingOptions(getGroupingOptions(appliedGroups, columns, dateFunctions));
+        }
+    }, [columns]);
+    const onSubmit = useCallback(() => {
+        const groupsToSet = appliedGroups
+            .filter(e => e.columnId)
+            .map((group, index) => {
+            const { id, ...rest } = group;
+            return { ...rest, level: index };
+        });
+        applyGrouping(groupsToSet);
+    }, [applyGrouping, setGroups, appliedGroups]);
+    const onCancel = useCallback(() => {
+        setGroups(convertGroupsToAppliedGroups(groups));
+    }, [groups, setGroups]);
+    /*
+     * The usePrevious hook is used in conjunction with the effect below...
+     * ...to determine if the groups prop has in essence changed in value as it is always referentially different [] === [] // false.
+     * This workaround is necessary to render proper state within the group popover content.
+     * The conditional logic avoids many excessive renders.
+     * The overall hook/grouping implementation may be able to be modified to avoid this.
+     */
+    const prevGroups = usePrevious(groups);
+    useEffect(() => {
+        if (!view.columns)
+            return;
+        if (!groups || !prevGroups || !deepEqual(groups, prevGroups)) {
+            setGroups(convertGroupsToAppliedGroups(groups));
+            return;
+        }
+        // This is obviously not extensive comparison but may be effective enough for the group object type. Enhance as needed.
+        const groupsChanged = groups.length !== prevGroups.length ||
+            groups.some((group, i) => group.columnId !== prevGroups[i].columnId ||
+                group.order !== prevGroups[i].order ||
+                !deepEqual(group.dateFunction, prevGroups[i].dateFunction) ||
+                !deepEqual(group.customFunction, prevGroups[i].customFunction));
+        if (groupsChanged) {
+            setGroups(convertGroupsToAppliedGroups(groups));
+        }
+    }, [groups, prevGroups, setGroups, view.columns]);
+    if (!grouping || view.hierarchicalGroupEnabled || !displayGrouping)
+        return;
+    return {
+        count: groups.length > 0 ? groups.length : undefined,
+        renderer: GroupRenderer,
+        rendererProps: { appliedGroups, columns, dateFunctions, groupingOptions, setGroups },
+        onSubmit,
+        onCancel
+    };
+};
+export default useGroup;
+//# sourceMappingURL=useGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGroup.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/useGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport { createUID, type ListToolbarProps, usePrevious } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport { TOOLBAR_FEATURES } from '../../../../constants';\nimport { deepEqual } from '../../../../Utils';\n\nimport { getGroupingOptions } from './utils';\nimport GroupRenderer from './GroupRenderer';\n\nexport interface AppliedGroup extends Group {\n  id: string;\n}\n\nconst convertGroupsToAppliedGroups = (groups: Group[]) =>\n  groups.map(group => ({ ...group, id: createUID() }));\n\nconst useGroup = ({ view }: { view: RsCoreTypes.View }): ListToolbarProps['group'] => {\n  const {\n    state: { groups = [] } = {},\n    meta: { grouping, dateFunctions },\n    type: { applyGrouping },\n    columns = []\n  } = view;\n\n  const displayGrouping = view.shouldDisplayFeature(TOOLBAR_FEATURES.GROUPING);\n  const [appliedGroups, setAppliedGroups] = useState<AppliedGroup[]>([]);\n  const [groupingOptions, setGroupingOptions] = useState(() =>\n    getGroupingOptions(groups, columns, dateFunctions)\n  );\n\n  const setGroups = useCallback(\n    (newGroups: AppliedGroup[]) => {\n      setAppliedGroups(newGroups);\n      setGroupingOptions(getGroupingOptions(newGroups, columns, dateFunctions));\n    },\n    [columns, dateFunctions]\n  );\n\n  // BUG-758989 This useEffect should run only once when the columns are populated on view\n  // as getGroupingOptions function has dependency on column to form dateFunc object\n  const prevColumns = usePrevious(columns);\n  useEffect(() => {\n    if (!columns || !prevColumns) return;\n    if (columns.length !== prevColumns.length) {\n      setGroupingOptions(getGroupingOptions(appliedGroups, columns, dateFunctions));\n    }\n  }, [columns]);\n\n  const onSubmit = useCallback(() => {\n    const groupsToSet = appliedGroups\n      .filter(e => e.columnId)\n      .map((group, index) => {\n        const { id, ...rest } = group;\n        return { ...rest, level: index };\n      });\n    applyGrouping(groupsToSet);\n  }, [applyGrouping, setGroups, appliedGroups]);\n\n  const onCancel = useCallback(() => {\n    setGroups(convertGroupsToAppliedGroups(groups));\n  }, [groups, setGroups]);\n\n  /*\n   * The usePrevious hook is used in conjunction with the effect below...\n   * ...to determine if the groups prop has in essence changed in value as it is always referentially different [] === [] // false.\n   * This workaround is necessary to render proper state within the group popover content.\n   * The conditional logic avoids many excessive renders.\n   * The overall hook/grouping implementation may be able to be modified to avoid this.\n   */\n  const prevGroups = usePrevious(groups);\n  useEffect(() => {\n    if (!view.columns) return;\n    if (!groups || !prevGroups || !deepEqual(groups, prevGroups)) {\n      setGroups(convertGroupsToAppliedGroups(groups));\n      return;\n    }\n\n    // This is obviously not extensive comparison but may be effective enough for the group object type. Enhance as needed.\n    const groupsChanged =\n      groups.length !== prevGroups.length ||\n      groups.some(\n        (group, i) =>\n          group.columnId !== prevGroups[i].columnId ||\n          group.order !== prevGroups[i].order ||\n          !deepEqual(group.dateFunction, prevGroups[i].dateFunction) ||\n          !deepEqual(group.customFunction, prevGroups[i].customFunction)\n      );\n\n    if (groupsChanged) {\n      setGroups(convertGroupsToAppliedGroups(groups));\n    }\n  }, [groups, prevGroups, setGroups, view.columns]);\n\n  if (!grouping || view.hierarchicalGroupEnabled || !displayGrouping) return;\n\n  return {\n    count: groups.length > 0 ? groups.length : undefined,\n    renderer: GroupRenderer,\n    rendererProps: { appliedGroups, columns, dateFunctions, groupingOptions, setGroups },\n    onSubmit,\n    onCancel\n  };\n};\n\nexport default useGroup;\n"]}

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

@@ -0,0 +1,11 @@
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+import type { Group } from 'pega-repeating-structures-core/types/State.types';
+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;
+/** 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/useGroup/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AAE9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D;;;GAGG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,8IAEtF;AAED,4GAA4G;AAC5G,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,KAAK,EAAE,EACf,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,EAC7B,aAAa,EAAE,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,GAC/C,eAAe,CA2DjB"}

package/lib/Core/Components/Toolbar/hooks/useGroup/utils.js

@@ -0,0 +1,61 @@
+/**
+ * Finds the matching column for the given columnId and returns its field type.
+ * Returns `undefined` if no match found
+ */
+export function getFieldType(columnId, columns) {
+    return columns.find(c => c.field.id.toString() === columnId.toString())?.field.type;
+}
+/** Returns metadata to identify which fields and which date functions are/aren't available for selection */
+export function getGroupingOptions(groups, columns, dateFunctions) {
+    const groupingOptions = {
+        // Set of fields that are already exhausted in grouping
+        // NOTE: For date/datetime fields, when dateFunctions are enabled, it doesn't mark a field as exhausted until all the date-function variants are used against that field
+        exhaustedFields: new Set(),
+        // Contains field-wise lookups with values of structure { exhausted, available }
+        dateFuncs: {},
+        // Possible `dateFunction` choices by field type
+        dateGroupVariants: {
+            date: [],
+            datetime: []
+        }
+    };
+    // Traverse all the groups and mark which all fields and date functions are exhausted already
+    groups.forEach(({ columnId, dateFunction }) => {
+        if (columnId === '')
+            return; // Ignore empty groups
+        const fieldType = getFieldType(columnId, columns);
+        // If date functions are enabled, and it's a date/datetime field, track the functions used
+        if (dateFunctions && (fieldType === 'date' || fieldType === 'datetime')) {
+            groupingOptions.dateFuncs[columnId] = groupingOptions.dateFuncs[columnId] || {
+                exhausted: [],
+                available: []
+            };
+            groupingOptions.dateFuncs[columnId].exhausted.push(dateFunction); // `dateFunction` could be undefined
+        }
+        else {
+            // Otherwise, simply mark the columns as exhausted
+            groupingOptions.exhaustedFields.add(columnId);
+        }
+    });
+    // When dateFunctions are enabled, determine which date/datetime fields are fully exhausted and also note which functions are available for each field
+    if (dateFunctions) {
+        // Identify all possible variants for a given field type
+        // The `undefined` variant is applied when we group data directly by a field's values without any date function
+        groupingOptions.dateGroupVariants = {
+            date: [...dateFunctions.DATE_ONLY, undefined],
+            datetime: [...dateFunctions.DATE_TIME, undefined]
+        };
+        // For each date/datetime field, set up which variants are yet to be used. Also determine if all the variants are exhausted
+        Object.entries(groupingOptions.dateFuncs).forEach(([columnId, obj]) => {
+            const fieldType = getFieldType(columnId, columns);
+            if (fieldType === 'date' || fieldType === 'datetime') {
+                obj.available = groupingOptions.dateGroupVariants[fieldType].filter(v => !obj.exhausted.includes(v));
+            }
+            if (obj.available.length === 0) {
+                groupingOptions.exhaustedFields.add(columnId);
+            }
+        });
+    }
+    return groupingOptions;
+}
+//# sourceMappingURL=utils.js.map

package/lib/Core/Components/Toolbar/hooks/useGroup/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../Core/Components/Toolbar/hooks/useGroup/utils.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,QAA2B,EAAE,OAA6B;IACrF,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC;AACtF,CAAC;AAED,4GAA4G;AAC5G,MAAM,UAAU,kBAAkB,CAChC,MAAe,EACf,OAA6B,EAC7B,aAAgD;IAEhD,MAAM,eAAe,GAAoB;QACvC,uDAAuD;QACvD,wKAAwK;QACxK,eAAe,EAAE,IAAI,GAAG,EAAE;QAE1B,gFAAgF;QAChF,SAAS,EAAE,EAAE;QAEb,gDAAgD;QAChD,iBAAiB,EAAE;YACjB,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,EAAE;SACb;KACF,CAAC;IAEF,6FAA6F;IAC7F,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAE;QAC5C,IAAI,QAAQ,KAAK,EAAE;YAAE,OAAO,CAAC,sBAAsB;QACnD,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAElD,0FAA0F;QAC1F,IAAI,aAAa,IAAI,CAAC,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,UAAU,CAAC,EAAE,CAAC;YACxE,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI;gBAC3E,SAAS,EAAE,EAAE;gBACb,SAAS,EAAE,EAAE;aACd,CAAC;YACF,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,oCAAoC;QACxG,CAAC;aAAM,CAAC;YACN,kDAAkD;YAClD,eAAe,CAAC,eAAe,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,sJAAsJ;IACtJ,IAAI,aAAa,EAAE,CAAC;QAClB,wDAAwD;QACxD,+GAA+G;QAC/G,eAAe,CAAC,iBAAiB,GAAG;YAClC,IAAI,EAAE,CAAC,GAAG,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC;YAC7C,QAAQ,EAAE,CAAC,GAAG,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC;SAClD,CAAC;QAEF,2HAA2H;QAC3H,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,EAAE;YACpE,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YAClD,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,UAAU,EAAE,CAAC;gBACrD,GAAG,CAAC,SAAS,GAAG,eAAe,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,MAAM,CACjE,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChC,CAAC;YACJ,CAAC;YAED,IAAI,GAAG,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC/B,eAAe,CAAC,eAAe,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAChD,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,eAAe,CAAC;AACzB,CAAC","sourcesContent":["import type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Group } from 'pega-repeating-structures-core/types/State.types';\n\nimport type { GroupingOptions } from '../../Grouping.types';\n\n/**\n * Finds the matching column for the given columnId and returns its field type.\n * Returns `undefined` if no match found\n */\nexport function getFieldType(columnId: Group['columnId'], columns: RsCoreTypes.Column[]) {\n  return columns.find(c => c.field.id.toString() === columnId.toString())?.field.type;\n}\n\n/** Returns metadata to identify which fields and which date functions are/aren't available for selection */\nexport function getGroupingOptions(\n  groups: Group[],\n  columns: RsCoreTypes.Column[],\n  dateFunctions: RsCoreTypes.Meta['dateFunctions']\n): GroupingOptions {\n  const groupingOptions: GroupingOptions = {\n    // Set of fields that are already exhausted in grouping\n    // NOTE: For date/datetime fields, when dateFunctions are enabled, it doesn't mark a field as exhausted until all the date-function variants are used against that field\n    exhaustedFields: new Set(),\n\n    // Contains field-wise lookups with values of structure { exhausted, available }\n    dateFuncs: {},\n\n    // Possible `dateFunction` choices by field type\n    dateGroupVariants: {\n      date: [],\n      datetime: []\n    }\n  };\n\n  // Traverse all the groups and mark which all fields and date functions are exhausted already\n  groups.forEach(({ columnId, dateFunction }) => {\n    if (columnId === '') return; // Ignore empty groups\n    const fieldType = getFieldType(columnId, columns);\n\n    // If date functions are enabled, and it's a date/datetime field, track the functions used\n    if (dateFunctions && (fieldType === 'date' || fieldType === 'datetime')) {\n      groupingOptions.dateFuncs[columnId] = groupingOptions.dateFuncs[columnId] || {\n        exhausted: [],\n        available: []\n      };\n      groupingOptions.dateFuncs[columnId].exhausted.push(dateFunction); // `dateFunction` could be undefined\n    } else {\n      // Otherwise, simply mark the columns as exhausted\n      groupingOptions.exhaustedFields.add(columnId);\n    }\n  });\n\n  // When dateFunctions are enabled, determine which date/datetime fields are fully exhausted and also note which functions are available for each field\n  if (dateFunctions) {\n    // Identify all possible variants for a given field type\n    // The `undefined` variant is applied when we group data directly by a field's values without any date function\n    groupingOptions.dateGroupVariants = {\n      date: [...dateFunctions.DATE_ONLY, undefined],\n      datetime: [...dateFunctions.DATE_TIME, undefined]\n    };\n\n    // For each date/datetime field, set up which variants are yet to be used. Also determine if all the variants are exhausted\n    Object.entries(groupingOptions.dateFuncs).forEach(([columnId, obj]) => {\n      const fieldType = getFieldType(columnId, columns);\n      if (fieldType === 'date' || fieldType === 'datetime') {\n        obj.available = groupingOptions.dateGroupVariants[fieldType].filter(\n          v => !obj.exhausted.includes(v)\n        );\n      }\n\n      if (obj.available.length === 0) {\n        groupingOptions.exhaustedFields.add(columnId);\n      }\n    });\n  }\n\n  return groupingOptions;\n}\n"]}

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

@@ -0,0 +1,9 @@
+export default useMore;
+declare function useMore({ view }: {
+    view: any;
+}): {
+    actions: any[];
+    actionsButtonRef: import("react").MutableRefObject<null>;
+    popover: import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=useMore.d.ts.map

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

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