@pega/lists-core 8.0.0-build.27.14

package/lib/src/core/features/uIFeatures/beforeRender/columnOrder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnOrder.js","sourceRoot":"","sources":["../../../../../../src/core/features/uIFeatures/beforeRender/columnOrder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAMtD,qDAAqD;AAErD,MAAM,cAAc,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAA2C,EAAE,EAAE;IAC3F,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,aAAa,GAAG,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC;IACzD,MAAM,kBAAkB,GAAG,aAAa,CAAC,MAAM,CAAC;IAChD,MAAM,iBAAiB,GAAG,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,CAAC;IACzD,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QAC3C,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC;QAC5B,MAAM,KAAK,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;QAClC,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAChD,KAAK,CAAC,KAAK;YACT,kBAAkB,GAAG,iBAAiB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACxF,IAAI,aAAa,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC;YACpC,KAAK,CAAC,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAC/C,CAAC;QACD,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,eAAe,GAAG,EAAE;IAClB,MAAM,sBAAsB,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;IAE/D,OAAO,SAAS,OAAO,CAAC,YAAsC;QAC5D,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;QACtC,sBAAsB,CACpB,CAAC,YAAY,CAAC,EACd;YACE,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,aAAa;YACnB,KAAK,EAAE,eAAe,EAAE,MAAM;YAC9B,YAAY,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM;SACvC,CACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { withMemoization } from '../../../utils/util';\nimport type { BeforeRenderFeatureProps } from '../../featureFactory';\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type View from '../../../generators/ViewGenerator';\nimport type Column from '../../../generators/ColumnGenerator';\nimport type { State } from '../../../../../types/State.types';\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\nconst getColumnOrder = ([{ getView, getState }]: [featureProps: BeforeRenderFeatureProps]) => {\n  const { colOrder = [], freezeColumns = [] } = getState();\n  const freezeColumnsCount = freezeColumns.length;\n  const totalColumnsCount = getView().columns?.length ?? 0;\n  getView().columns?.forEach((column, index) => {\n    const { id } = column.field;\n    const style = { ...column.style };\n    const existingOrder = colOrder.indexOf(`${id}`);\n    style.order =\n      freezeColumnsCount + totalColumnsCount + (existingOrder > -1 ? existingOrder : index);\n    if (freezeColumns.includes(`${id}`)) {\n      style.order = freezeColumns.indexOf(`${id}`);\n    }\n    column = column.setProp('style', style);\n  });\n};\n\n/**\n * Sets the {@link Column.style style} prop for each column when any of the following properties are changed:\n * - {@link State.colOrder}\n * - {@link State.freezeColumns}\n * - `active` in {@link State.personalization}\n * - `size` of {@link View.columns columns}.\n */\nexport default () => {\n  const memoizedGetColumnOrder = withMemoization(getColumnOrder);\n\n  return function execute(featureProps: BeforeRenderFeatureProps) {\n    const state = featureProps.getState();\n    memoizedGetColumnOrder(\n      [featureProps],\n      [\n        state.colOrder,\n        state.freezeColumns,\n        state?.personalization?.active,\n        featureProps.getView().columns?.length\n      ]\n    );\n  };\n};\n"]}

package/lib/src/core/features/uIFeatures/beforeRender/columnReOrder.d.ts

@@ -0,0 +1,11 @@
+import type { BeforeRenderFeatureProps } from '../../featureFactory';
+/**
+ * Sets the column {@link RsStore. getFieldReorderProps reorder} props (onDragStart, onDrag, onDragEnd). This feature is executed when any of the following state slices are changed:
+ * - {@link State.columnWidths}
+ * - {@link State.freezeColumns}
+ * - {@link State.colOrder}
+ * - {@link State.hiddenColumns}
+ */
+declare const _default: () => (featureProps: BeforeRenderFeatureProps) => void;
+export default _default;
+//# sourceMappingURL=columnReOrder.d.ts.map

package/lib/src/core/features/uIFeatures/beforeRender/columnReOrder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnReOrder.d.ts","sourceRoot":"","sources":["../../../../../../src/core/features/uIFeatures/beforeRender/columnReOrder.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AA+OrE;;;;;;GAMG;6CAIqC,wBAAwB;AAHhE,wBAcE"}

package/lib/src/core/features/uIFeatures/beforeRender/columnReOrder.js

@@ -0,0 +1,199 @@
+import { actionColumnDragDrop } from '../../../actions/actions';
+import { rowActionColumnMeta, rowDragDropColumnMeta, rowSelectColumnMeta } from '../../../constants';
+import { withMemoization } from '../../../utils/util';
+const ColIdSelector = '[data-col-id]';
+const SomeNegativeBigOffset = `${Number.MIN_SAFE_INTEGER}px`;
+// Todo: comeback and see if there is any other way to just have no drag image
+const emptyImg = document.createElement('img');
+emptyImg.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+function createElement(type, className) {
+    const domNode = document.createElement(type);
+    domNode.classList.add(className);
+    return domNode;
+}
+const columnReOrder = ([{ getView, getState, dispatch }]) => {
+    if (!getView().meta.reorderFields) {
+        return null;
+    }
+    const { columnWidths, freezeColumns = [] } = getState();
+    let fieldDragHelper = {};
+    const allPositions = (() => {
+        const allWidths = getView()
+            .columns.filter(column => !column.hidden) // Take all visible columns
+            .map(column => ({
+            width: (columnWidths?.[column.field.id] ?? column.field.width),
+            order: column.style?.order,
+            id: column.field.id
+        }));
+        // Bail out when AllWidths/Visible columns is empty
+        if (allWidths.length === 0) {
+            return {
+                allWidths,
+                freezeColumnsWidth: 0
+            };
+        }
+        allWidths.sort((a, b) => a.order - b.order);
+        let previousColOffset = 0;
+        allWidths.forEach(column => {
+            column.offset = previousColOffset;
+            previousColOffset += column.width;
+        });
+        allWidths.push({
+            width: 0,
+            order: allWidths[allWidths.length - 1].order + 1,
+            offset: allWidths[allWidths.length - 1].offset + allWidths[allWidths.length - 1].width,
+            id: 'last$'
+        });
+        const visibleFreezeColumns = getView().columns.filter(col => col.frozen && !col.hidden);
+        const freezeColumnsWidth = allWidths[visibleFreezeColumns.length]?.offset;
+        return {
+            allWidths,
+            freezeColumnsWidth
+        };
+    })();
+    const { allWidths, freezeColumnsWidth } = allPositions;
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=505521
+    // This DragOver on document is the hack for the above bug as clientX is not proper in firefox
+    const documentDragOver = (e) => {
+        fieldDragHelper.mouseX = e.clientX;
+        fieldDragHelper.mouseY = e.clientY;
+    };
+    const onDragStart = (e) => {
+        fieldDragHelper = {};
+        const domContainer = getView().getDomContainer();
+        const scrollNode = getView().getScrollNode();
+        const virtualizeEle = getView()
+            .getVirtualizeElement('rootVirtualiser')
+            ?.getParentContainer?.();
+        fieldDragHelper.dragLineNode = createElement('div', 'table-drag-line');
+        fieldDragHelper.dragProxyNode = createElement('div', 'table-drag-proxy');
+        const container = domContainer?.getElementsByClassName('container')[0];
+        const Header = domContainer?.getElementsByClassName('sticky-header')[0];
+        container.appendChild(fieldDragHelper.dragProxyNode);
+        virtualizeEle.appendChild(fieldDragHelper.dragLineNode);
+        fieldDragHelper.dragLineNode.style.height = `${
+        // eslint-disable-next-line no-unsafe-optional-chaining
+        scrollNode?.clientHeight + Header.clientHeight}px`;
+        const sourceElem = e.target.closest(ColIdSelector);
+        fieldDragHelper.sourceElemIndex = allWidths.findIndex(xCol => {
+            return `${xCol.id}` === sourceElem.dataset.colId;
+        });
+        if (!sourceElem)
+            return;
+        document.body.appendChild(emptyImg);
+        if (e.dataTransfer) {
+            e.dataTransfer.setDragImage(emptyImg, 0, 0);
+            // e.dataTransfer.setDragImage(new Image(0, 0), 0, 0);
+            e.dataTransfer.effectAllowed = 'none';
+            e.dataTransfer.dropEffect = 'none';
+        }
+        document.addEventListener('dragover', documentDragOver);
+        fieldDragHelper.virtualizeOffsetLeft = virtualizeEle.getBoundingClientRect().left;
+        fieldDragHelper.dragProxyOffset =
+            sourceElem.offsetLeft -
+                (virtualizeEle.scrollLeft + fieldDragHelper.mouseX - fieldDragHelper.virtualizeOffsetLeft);
+        fieldDragHelper.dragProxyNode.style.width = sourceElem.style.width;
+        fieldDragHelper.dragProxyNode.style.marginLeft = `${fieldDragHelper.dragProxyOffset}px`;
+        fieldDragHelper.dragProxyNode.style.left = SomeNegativeBigOffset;
+        fieldDragHelper.dragLineNode.style.left = SomeNegativeBigOffset;
+        fieldDragHelper.dragProxyNode.style.display = 'block';
+        fieldDragHelper.dragLineNode.style.display = 'block';
+        return false; // required for browser allowing image drag out of container
+    };
+    const onDrag = (e) => {
+        e.preventDefault();
+        const virtualizeEle = getView()
+            .getVirtualizeElement('rootVirtualiser')
+            ?.getParentContainer?.();
+        const distanceFromFreezeB = fieldDragHelper.mouseX - fieldDragHelper.virtualizeOffsetLeft - freezeColumnsWidth;
+        // is our cursor pointer near to freeze columBoundary?
+        if (freezeColumnsWidth !== 0 &&
+            distanceFromFreezeB < 100 &&
+            distanceFromFreezeB > 0 &&
+            virtualizeEle.scrollLeft > 0) {
+            // is something there to scroll?
+            if (distanceFromFreezeB > 50) {
+                virtualizeEle.scrollLeft -= 1;
+            }
+            else {
+                virtualizeEle.scrollLeft -= 3;
+            }
+            fieldDragHelper.dragProxyNode.style.left = `${fieldDragHelper.mouseX - fieldDragHelper.virtualizeOffsetLeft}px`;
+            fieldDragHelper.dropTarget = allWidths[freezeColumns.length].id;
+            fieldDragHelper.dragLineNode.style.left = SomeNegativeBigOffset;
+            return false;
+        }
+        fieldDragHelper.dragProxyNode.style.left = `${fieldDragHelper.mouseX - fieldDragHelper.virtualizeOffsetLeft}px`;
+        let currentDragLeftOffset = parseInt(
+        // @ts-expect-error parseInt expects string.
+        virtualizeEle.scrollLeft + fieldDragHelper.mouseX - fieldDragHelper.virtualizeOffsetLeft, 10);
+        if (distanceFromFreezeB < 0) {
+            // if we are in freezeZone do not consider scrollLeft for targetColLine calc
+            currentDragLeftOffset -= virtualizeEle.scrollLeft;
+        }
+        let xColIndex = allWidths.findIndex(xCol => {
+            return currentDragLeftOffset < xCol.offset + xCol.width / 2;
+        });
+        if (xColIndex === -1) {
+            xColIndex = allWidths.length - 1;
+        }
+        fieldDragHelper.dragLineNode.style.left = `${allWidths[xColIndex].offset}px`;
+        if (distanceFromFreezeB < 0) {
+            // if we are in freezeZone consider scrollLeft for dragLine calculation
+            fieldDragHelper.dragLineNode.style.left = `${allWidths[xColIndex].offset + virtualizeEle.scrollLeft}px`;
+        }
+        if (xColIndex <= fieldDragHelper.sourceElemIndex) {
+            fieldDragHelper.dropTarget = allWidths[xColIndex].id;
+        }
+        else {
+            fieldDragHelper.dropTarget = allWidths[xColIndex - 1].id;
+        }
+        // Edge Case to not show dragLine when the col is under frozen area
+        if (distanceFromFreezeB > 0 &&
+            allWidths[xColIndex].offset < virtualizeEle.scrollLeft + freezeColumnsWidth) {
+            fieldDragHelper.dragLineNode.style.left = SomeNegativeBigOffset;
+        }
+        return false;
+    };
+    const onDragEnd = (e) => {
+        e.preventDefault();
+        fieldDragHelper.dragProxyNode.style.display = 'none';
+        fieldDragHelper.dragLineNode.style.display = 'none';
+        const sourceElem = e.target.closest(ColIdSelector);
+        if (rowSelectColumnMeta.field.id !== fieldDragHelper.dropTarget &&
+            rowDragDropColumnMeta.field.id !== fieldDragHelper.dropTarget &&
+            rowActionColumnMeta.field.id !== fieldDragHelper.dropTarget &&
+            sourceElem &&
+            `${sourceElem.dataset.colId}` !== `${fieldDragHelper.dropTarget}`) {
+            dispatch(actionColumnDragDrop(sourceElem.dataset.colId, fieldDragHelper.dropTarget));
+        }
+        document.body.removeChild(emptyImg);
+        fieldDragHelper.dragLineNode.remove();
+        fieldDragHelper.dragProxyNode.remove();
+        document.removeEventListener('dragover', documentDragOver);
+        fieldDragHelper = {};
+        return false;
+    };
+    return {
+        onDragStart,
+        onDrag,
+        onDragEnd
+    };
+};
+/**
+ * Sets the column {@link RsStore. getFieldReorderProps reorder} props (onDragStart, onDrag, onDragEnd). This feature is executed when any of the following state slices are changed:
+ * - {@link State.columnWidths}
+ * - {@link State.freezeColumns}
+ * - {@link State.colOrder}
+ * - {@link State.hiddenColumns}
+ */
+export default () => {
+    const memoizedColReOrder = withMemoization(columnReOrder);
+    return function execute(featureProps) {
+        const state = featureProps.getState();
+        featureProps
+            .getRsStore()
+            .setFieldReorderProps(memoizedColReOrder([featureProps], [state.columnWidths, state.freezeColumns, state.colOrder, state.hiddenColumns]));
+    };
+};
+//# sourceMappingURL=columnReOrder.js.map

package/lib/src/core/features/uIFeatures/beforeRender/columnReOrder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnReOrder.js","sourceRoot":"","sources":["../../../../../../src/core/features/uIFeatures/beforeRender/columnReOrder.ts"],"names":[],"mappings":"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","sourcesContent":["import { actionColumnDragDrop } from '../../../actions/actions';\nimport {\n  rowActionColumnMeta,\n  rowDragDropColumnMeta,\n  rowSelectColumnMeta\n} from '../../../constants';\nimport type RsStore from '../../../RsStore';\nimport { withMemoization } from '../../../utils/util';\nimport type { BeforeRenderFeatureProps } from '../../featureFactory';\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type { State } from '../../../../../types/State.types';\n\ntype FieldDragHelper = {\n  mouseX: number;\n  mouseY: number;\n  dragLineNode: HTMLElement;\n  dragProxyNode: HTMLElement;\n  sourceElemIndex: number;\n  dragProxyOffset: number;\n  virtualizeOffsetLeft: number;\n  dropTarget: string;\n};\n\nconst ColIdSelector = '[data-col-id]';\nconst SomeNegativeBigOffset = `${Number.MIN_SAFE_INTEGER}px`;\n\n// Todo: comeback and see if there is any other way to just have no drag image\nconst emptyImg = document.createElement('img');\nemptyImg.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';\n\nfunction createElement(type: string, className: string): HTMLElement {\n  const domNode = document.createElement(type);\n  domNode.classList.add(className);\n  return domNode;\n}\n\nconst columnReOrder = ([{ getView, getState, dispatch }]: [\n  featureProps: BeforeRenderFeatureProps\n]): RsStore['fieldReorderProps'] => {\n  if (!getView().meta.reorderFields) {\n    return null;\n  }\n  const { columnWidths, freezeColumns = [] } = getState();\n  let fieldDragHelper: FieldDragHelper = {} as FieldDragHelper;\n  const allPositions = (() => {\n    const allWidths: {\n      width: number;\n      order: number;\n      offset?: number;\n      id: string;\n    }[] = getView()\n      .columns!.filter(column => !column.hidden) // Take all visible columns\n      .map(column => ({\n        width: (columnWidths?.[column.field.id] ?? column.field.width)!,\n        order: column.style?.order,\n        id: column.field.id\n      }));\n    // Bail out when AllWidths/Visible columns is empty\n    if (allWidths.length === 0) {\n      return {\n        allWidths,\n        freezeColumnsWidth: 0\n      };\n    }\n\n    allWidths.sort((a, b) => a.order - b.order);\n\n    let previousColOffset = 0;\n    allWidths.forEach(column => {\n      column.offset = previousColOffset;\n      previousColOffset += column.width;\n    });\n    allWidths.push({\n      width: 0,\n      order: allWidths[allWidths.length - 1].order + 1,\n      offset: allWidths[allWidths.length - 1].offset! + allWidths[allWidths.length - 1].width,\n      id: 'last$'\n    });\n    const visibleFreezeColumns = getView().columns!.filter(col => col.frozen && !col.hidden);\n    const freezeColumnsWidth = allWidths[visibleFreezeColumns.length]?.offset;\n    return {\n      allWidths,\n      freezeColumnsWidth\n    };\n  })();\n\n  const { allWidths, freezeColumnsWidth } = allPositions;\n\n  // https://bugzilla.mozilla.org/show_bug.cgi?id=505521\n  // This DragOver on document is the hack for the above bug as clientX is not proper in firefox\n  const documentDragOver = (e: DragEvent) => {\n    fieldDragHelper.mouseX = e.clientX;\n    fieldDragHelper.mouseY = e.clientY;\n  };\n\n  const onDragStart = (e: DragEvent) => {\n    fieldDragHelper = {} as FieldDragHelper;\n    const domContainer = getView().getDomContainer();\n    const scrollNode = getView().getScrollNode();\n    const virtualizeEle = getView()\n      .getVirtualizeElement('rootVirtualiser')\n      ?.getParentContainer?.()!;\n    fieldDragHelper.dragLineNode = createElement('div', 'table-drag-line');\n    fieldDragHelper.dragProxyNode = createElement('div', 'table-drag-proxy');\n    const container = domContainer?.getElementsByClassName('container')[0]!;\n    const Header = domContainer?.getElementsByClassName('sticky-header')[0]!;\n    container.appendChild(fieldDragHelper.dragProxyNode);\n    virtualizeEle.appendChild(fieldDragHelper.dragLineNode);\n    fieldDragHelper.dragLineNode.style.height = `${\n      // eslint-disable-next-line no-unsafe-optional-chaining\n      scrollNode?.clientHeight! + Header.clientHeight\n    }px`;\n\n    const sourceElem = (e.target as HTMLElement).closest(ColIdSelector) as HTMLElement;\n    fieldDragHelper.sourceElemIndex = allWidths.findIndex(xCol => {\n      return `${xCol.id}` === sourceElem.dataset.colId;\n    });\n\n    if (!sourceElem) return;\n\n    document.body.appendChild(emptyImg);\n    if (e.dataTransfer) {\n      e.dataTransfer.setDragImage(emptyImg, 0, 0);\n      // e.dataTransfer.setDragImage(new Image(0, 0), 0, 0);\n      e.dataTransfer.effectAllowed = 'none';\n      e.dataTransfer.dropEffect = 'none';\n    }\n    document.addEventListener('dragover', documentDragOver);\n\n    fieldDragHelper.virtualizeOffsetLeft = virtualizeEle.getBoundingClientRect().left;\n    fieldDragHelper.dragProxyOffset =\n      sourceElem.offsetLeft -\n      (virtualizeEle.scrollLeft + fieldDragHelper.mouseX - fieldDragHelper.virtualizeOffsetLeft);\n    fieldDragHelper.dragProxyNode.style.width = sourceElem.style.width;\n    fieldDragHelper.dragProxyNode.style.marginLeft = `${fieldDragHelper.dragProxyOffset}px`;\n    fieldDragHelper.dragProxyNode.style.left = SomeNegativeBigOffset;\n    fieldDragHelper.dragLineNode.style.left = SomeNegativeBigOffset;\n    fieldDragHelper.dragProxyNode.style.display = 'block';\n    fieldDragHelper.dragLineNode.style.display = 'block';\n\n    return false; // required for browser allowing image drag out of container\n  };\n\n  const onDrag = (e: DragEvent) => {\n    e.preventDefault();\n    const virtualizeEle = getView()\n      .getVirtualizeElement('rootVirtualiser')\n      ?.getParentContainer?.()!;\n    const distanceFromFreezeB =\n      fieldDragHelper.mouseX - fieldDragHelper.virtualizeOffsetLeft - freezeColumnsWidth!;\n    // is our cursor pointer near to freeze columBoundary?\n    if (\n      freezeColumnsWidth !== 0 &&\n      distanceFromFreezeB < 100 &&\n      distanceFromFreezeB > 0 &&\n      virtualizeEle.scrollLeft > 0\n    ) {\n      // is something there to scroll?\n      if (distanceFromFreezeB > 50) {\n        virtualizeEle.scrollLeft -= 1;\n      } else {\n        virtualizeEle.scrollLeft -= 3;\n      }\n      fieldDragHelper.dragProxyNode.style.left = `${\n        fieldDragHelper.mouseX - fieldDragHelper.virtualizeOffsetLeft\n      }px`;\n      fieldDragHelper.dropTarget = allWidths[freezeColumns.length].id;\n      fieldDragHelper.dragLineNode.style.left = SomeNegativeBigOffset;\n      return false;\n    }\n\n    fieldDragHelper.dragProxyNode.style.left = `${\n      fieldDragHelper.mouseX - fieldDragHelper.virtualizeOffsetLeft\n    }px`;\n    let currentDragLeftOffset = parseInt(\n      // @ts-expect-error parseInt expects string.\n      virtualizeEle.scrollLeft + fieldDragHelper.mouseX - fieldDragHelper.virtualizeOffsetLeft,\n      10\n    );\n\n    if (distanceFromFreezeB < 0) {\n      // if we are in freezeZone do not consider scrollLeft for targetColLine calc\n      currentDragLeftOffset -= virtualizeEle.scrollLeft;\n    }\n\n    let xColIndex = allWidths.findIndex(xCol => {\n      return currentDragLeftOffset < xCol.offset! + xCol.width / 2;\n    });\n\n    if (xColIndex === -1) {\n      xColIndex = allWidths.length - 1;\n    }\n    fieldDragHelper.dragLineNode.style.left = `${allWidths[xColIndex].offset}px`;\n\n    if (distanceFromFreezeB < 0) {\n      // if we are in freezeZone consider scrollLeft for dragLine calculation\n      fieldDragHelper.dragLineNode.style.left = `${\n        allWidths[xColIndex].offset! + virtualizeEle.scrollLeft\n      }px`;\n    }\n\n    if (xColIndex <= fieldDragHelper.sourceElemIndex) {\n      fieldDragHelper.dropTarget = allWidths[xColIndex].id;\n    } else {\n      fieldDragHelper.dropTarget = allWidths[xColIndex - 1].id;\n    }\n\n    // Edge Case to not show dragLine when the col is under frozen area\n    if (\n      distanceFromFreezeB > 0 &&\n      allWidths[xColIndex].offset! < virtualizeEle.scrollLeft + freezeColumnsWidth!\n    ) {\n      fieldDragHelper.dragLineNode.style.left = SomeNegativeBigOffset;\n    }\n\n    return false;\n  };\n\n  const onDragEnd = (e: DragEvent) => {\n    e.preventDefault();\n    fieldDragHelper.dragProxyNode.style.display = 'none';\n    fieldDragHelper.dragLineNode.style.display = 'none';\n    const sourceElem: HTMLElement | null = (e.target as HTMLElement).closest(ColIdSelector);\n    if (\n      rowSelectColumnMeta.field.id !== fieldDragHelper.dropTarget &&\n      rowDragDropColumnMeta.field.id !== fieldDragHelper.dropTarget &&\n      rowActionColumnMeta.field.id !== fieldDragHelper.dropTarget &&\n      sourceElem &&\n      `${sourceElem.dataset.colId}` !== `${fieldDragHelper.dropTarget}`\n    ) {\n      dispatch(actionColumnDragDrop(sourceElem.dataset.colId!, fieldDragHelper.dropTarget));\n    }\n    document.body.removeChild(emptyImg);\n    fieldDragHelper.dragLineNode.remove();\n    fieldDragHelper.dragProxyNode.remove();\n    document.removeEventListener('dragover', documentDragOver);\n    fieldDragHelper = {} as FieldDragHelper;\n    return false;\n  };\n\n  return {\n    onDragStart,\n    onDrag,\n    onDragEnd\n  };\n};\n\n/**\n * Sets the column {@link RsStore. getFieldReorderProps reorder} props (onDragStart, onDrag, onDragEnd). This feature is executed when any of the following state slices are changed:\n * - {@link State.columnWidths}\n * - {@link State.freezeColumns}\n * - {@link State.colOrder}\n * - {@link State.hiddenColumns}\n */\nexport default () => {\n  const memoizedColReOrder = withMemoization(columnReOrder);\n\n  return function execute(featureProps: BeforeRenderFeatureProps) {\n    const state = featureProps.getState();\n    featureProps\n      .getRsStore()\n      .setFieldReorderProps(\n        memoizedColReOrder(\n          [featureProps],\n          [state.columnWidths, state.freezeColumns, state.colOrder, state.hiddenColumns]\n        )\n      );\n  };\n};\n"]}

package/lib/src/core/features/uIFeatures/beforeRender/columnSizing/index.d.ts

@@ -0,0 +1,5 @@
+import type { BeforeRenderFeatureProps } from '../../../featureFactory';
+export declare const setColumnWidths: ([{ getView, getState }]: [featureProps: BeforeRenderFeatureProps]) => void;
+declare const _default: () => (featureProps: BeforeRenderFeatureProps) => void;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/lib/src/core/features/uIFeatures/beforeRender/columnSizing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/features/uIFeatures/beforeRender/columnSizing/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAExE,eAAO,MAAM,eAAe,4BAA6B,CACvD,YAAY,EAAE,wBAAwB,CACvC,SAoBA,CAAC;6CAKsC,wBAAwB;AAHhE,wBAWE"}

package/lib/src/core/features/uIFeatures/beforeRender/columnSizing/index.js

@@ -0,0 +1,29 @@
+import { withMemoization } from '../../../../utils/util';
+export const setColumnWidths = ([{ getView, getState }]) => {
+    const { columnWidths = {} } = getState();
+    const widthUnit = 'px';
+    getView().columns?.forEach(column => {
+        const style = { ...column.style };
+        const currentWidth = columnWidths[column.field.id] || column.field.width;
+        let isWidthChanged = false;
+        if (column.isWidthChanged ||
+            (column.currentWidth !== undefined && column.currentWidth !== currentWidth)) {
+            isWidthChanged = true;
+        }
+        style.width = `${currentWidth}${widthUnit}`;
+        column = column.setProp({
+            currentWidth,
+            isWidthChanged,
+            style
+        });
+    });
+};
+export default () => {
+    const memoizedSetColumnWidths = withMemoization(setColumnWidths);
+    return function execute(featureProps) {
+        const { getState } = featureProps;
+        const state = getState();
+        memoizedSetColumnWidths([featureProps], [state?.columnWidths, state?.customFields, state?.personalization?.active]);
+    };
+};
+//# sourceMappingURL=index.js.map

package/lib/src/core/features/uIFeatures/beforeRender/columnSizing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/core/features/uIFeatures/beforeRender/columnSizing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAErD,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,GAAG,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE;QAClC,MAAM,KAAK,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;QAClC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;QACzE,IAAI,cAAc,GAAG,KAAK,CAAC;QAC3B,IACE,MAAM,CAAC,cAAc;YACrB,CAAC,MAAM,CAAC,YAAY,KAAK,SAAS,IAAI,MAAM,CAAC,YAAY,KAAK,YAAY,CAAC,EAC3E,CAAC;YACD,cAAc,GAAG,IAAI,CAAC;QACxB,CAAC;QACD,KAAK,CAAC,KAAK,GAAG,GAAG,YAAa,GAAG,SAAS,EAAE,CAAC;QAC7C,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC;YACtB,YAAY;YACZ,cAAc;YACd,KAAK;SACN,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,GAAG,EAAE;IAClB,MAAM,uBAAuB,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;IAEjE,OAAO,SAAS,OAAO,CAAC,YAAsC;QAC5D,MAAM,EAAE,QAAQ,EAAE,GAAG,YAAY,CAAC;QAClC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QACzB,uBAAuB,CACrB,CAAC,YAAY,CAAC,EACd,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,CAAC,CAC3E,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { withMemoization } from '../../../../utils/util';\nimport type { BeforeRenderFeatureProps } from '../../../featureFactory';\n\nexport const setColumnWidths = ([{ getView, getState }]: [\n  featureProps: BeforeRenderFeatureProps\n]) => {\n  const { columnWidths = {} } = getState();\n  const widthUnit = 'px';\n  getView().columns?.forEach(column => {\n    const style = { ...column.style };\n    const currentWidth = columnWidths[column.field.id] || column.field.width;\n    let isWidthChanged = false;\n    if (\n      column.isWidthChanged ||\n      (column.currentWidth !== undefined && column.currentWidth !== currentWidth)\n    ) {\n      isWidthChanged = true;\n    }\n    style.width = `${currentWidth!}${widthUnit}`;\n    column = column.setProp({\n      currentWidth,\n      isWidthChanged,\n      style\n    });\n  });\n};\n\nexport default () => {\n  const memoizedSetColumnWidths = withMemoization(setColumnWidths);\n\n  return function execute(featureProps: BeforeRenderFeatureProps) {\n    const { getState } = featureProps;\n    const state = getState();\n    memoizedSetColumnWidths(\n      [featureProps],\n      [state?.columnWidths, state?.customFields, state?.personalization?.active]\n    );\n  };\n};\n"]}

package/lib/src/core/features/uIFeatures/beforeRender/columnSizing/resize.d.ts

@@ -0,0 +1,14 @@
+import type { State } from '../../../../../../types/State.types';
+import type Column from '../../../../generators/ColumnGenerator';
+import type View from '../../../../generators/ViewGenerator';
+import type { BeforeRenderFeatureProps } from '../../../featureFactory';
+export declare const COLUMN_RESIZING_CLASS = "column-resizing";
+export declare function setColumnStyle(domContainer: View['domContainer'], style: string, columnId: number, value: number): void;
+export declare const resizedColumnWidth: (column: Column, distanceDragged: number) => number;
+export declare const getNextFrozenColumns: (columnId: string, freezeColumns?: State["freezeColumns"]) => string[];
+export declare const columnResizerProps: ([{ getState, getView, dispatch }]: [featureProps: BeforeRenderFeatureProps]) => {
+    onMouseDown: (e: MouseEvent) => boolean;
+};
+declare const _default: () => (featureProps: BeforeRenderFeatureProps) => void;
+export default _default;
+//# sourceMappingURL=resize.d.ts.map

package/lib/src/core/features/uIFeatures/beforeRender/columnSizing/resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/features/uIFeatures/beforeRender/columnSizing/resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAC;AAEjE,OAAO,KAAK,MAAM,MAAM,wCAAwC,CAAC;AACjE,OAAO,KAAK,IAAI,MAAM,sCAAsC,CAAC;AAE7D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAGxE,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AAEvD,wBAAgB,cAAc,CAC5B,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,EAClC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,QAKd;AAED,eAAO,MAAM,kBAAkB,WAAY,MAAM,mBAAmB,MAAM,WAOzE,CAAC;AAEF,eAAO,MAAM,oBAAoB,aACrB,MAAM,kBACD,KAAK,CAAC,eAAe,CAAC,aAUtC,CAAC;AAEF,eAAO,MAAM,kBAAkB,sCAAuC,CACpE,YAAY,EAAE,wBAAwB,CACvC;qBAiEyB,UAAU;CA+BnC,CAAC;6CAKsC,wBAAwB;AAHhE,wBAWE"}

package/lib/src/core/features/uIFeatures/beforeRender/columnSizing/resize.js

@@ -0,0 +1,118 @@
+import { actionColumnResize, actionColumnAutoSize } from '../../../../actions/actions';
+import { withMemoization } from '../../../../utils/util';
+import { calculateFieldLeft } from '../freeze';
+export const COLUMN_RESIZING_CLASS = 'column-resizing';
+export function setColumnStyle(domContainer, style, columnId, value) {
+    if (domContainer && domContainer.style) {
+        domContainer.style.setProperty(`--col-${style}-${columnId}`, `${value}px`);
+    }
+}
+export const resizedColumnWidth = (column, distanceDragged) => {
+    const existingWidth = column.currentWidth || column.field.width || column.field.minWidth;
+    let width = existingWidth + distanceDragged;
+    if (width < column.field.minWidth) {
+        width = column.field.minWidth;
+    }
+    return width;
+};
+export const getNextFrozenColumns = (columnId, freezeColumns = []) => {
+    const nextFrozenColumns = [];
+    const freezeColIndex = freezeColumns.indexOf(columnId); // If current column freezed
+    if (freezeColIndex > -1) {
+        for (let i = freezeColIndex + 1; i < freezeColumns.length; i += 1) {
+            nextFrozenColumns.push(freezeColumns[i]);
+        }
+    }
+    return nextFrozenColumns;
+};
+export const columnResizerProps = ([{ getState, getView, dispatch }]) => {
+    const { freezeColumns, hiddenColumns, columnWidths = {} } = getState();
+    let column = {};
+    let startPosition = 0;
+    let resized = false;
+    let updatedWidth = 0;
+    let currentCell = null;
+    let nextFrozenColumns = []; // Contains next frozen columns with left positions to apply left on resize
+    const updateWidth = (distance) => {
+        updatedWidth = resizedColumnWidth({ ...column, currentWidth: column.currentWidth }, distance);
+        column = column.setProp('currentWidth', updatedWidth); // Updating current width
+        setColumnStyle(getView().getDomContainer(), 'width', column.field.idHash, updatedWidth);
+    };
+    /**
+     * Update left positions to frozen columns or right of this column.
+     */
+    const updateLefts = () => {
+        nextFrozenColumns.forEach(colId => {
+            const left = calculateFieldLeft(colId, getView().columns, freezeColumns, hiddenColumns, { ...columnWidths, [column.field.id]: updatedWidth } // injecting the resized width to current column
+            );
+            const nextFrozenColumn = getView().columns?.find(c => `${c.field.id}` === colId);
+            setColumnStyle(getView().getDomContainer(), 'left', nextFrozenColumn.field.idHash, left);
+        });
+    };
+    const resizeHandler = (e) => {
+        e.preventDefault();
+        const distance = e.clientX - startPosition;
+        if (distance !== 0) {
+            column =
+                getView().columns?.find(c => `${c.field.id}` === currentCell?.dataset.colId) ??
+                    {};
+            updateWidth(distance);
+            updateLefts();
+            resized = true;
+        }
+        startPosition = e.clientX;
+        return false;
+    };
+    const resizeEndHandler = (e) => {
+        e.preventDefault();
+        const domContainer = getView().getDomContainer();
+        domContainer.removeEventListener('mousemove', resizeHandler);
+        domContainer.removeEventListener('mouseup', resizeEndHandler);
+        domContainer.removeEventListener('mouseleave', resizeEndHandler);
+        if (resized) {
+            dispatch(actionColumnResize({ [column.field.id]: updatedWidth }));
+            resized = false;
+        }
+        currentCell.style.pointerEvents = 'auto';
+        currentCell.classList.toggle(COLUMN_RESIZING_CLASS);
+        domContainer.classList.toggle(COLUMN_RESIZING_CLASS);
+        return false;
+    };
+    const onMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        startPosition = e.clientX;
+        const domContainer = getView().getDomContainer();
+        domContainer.addEventListener('mousemove', resizeHandler);
+        domContainer.addEventListener('mouseup', resizeEndHandler);
+        domContainer.addEventListener('mouseleave', resizeEndHandler);
+        currentCell = e.target.closest('.cell');
+        currentCell.style.pointerEvents = 'none';
+        if (e.detail >= 2) {
+            // It is a double click so ask for a resize on column
+            const col = getView().columns?.find(c => `${c.field.id}` === currentCell.dataset.colId);
+            if (col?.field?.resize) {
+                dispatch(actionColumnAutoSize(col, getView().getDomContainer(), true));
+            }
+        }
+        currentCell.classList.toggle(COLUMN_RESIZING_CLASS);
+        domContainer.classList.toggle(COLUMN_RESIZING_CLASS);
+        // TODO: getState().freezeColumns should
+        // give latest state after the action triggered from current feature only on above lines. Check this.
+        nextFrozenColumns = getNextFrozenColumns(currentCell.dataset.colId, getState().freezeColumns);
+        return false;
+    };
+    return {
+        onMouseDown
+    };
+};
+export default () => {
+    const memoizedColumnResize = withMemoization(columnResizerProps);
+    return function execute(featureProps) {
+        const { freezeColumns, hiddenColumns, columnWidths } = featureProps.getState();
+        featureProps
+            .getRsStore()
+            .setColumnResizerProps(memoizedColumnResize([featureProps], [freezeColumns, hiddenColumns, columnWidths]));
+    };
+};
+//# sourceMappingURL=resize.js.map

package/lib/src/core/features/uIFeatures/beforeRender/columnSizing/resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.js","sourceRoot":"","sources":["../../../../../../../src/core/features/uIFeatures/beforeRender/columnSizing/resize.ts"],"names":[],"mappings":"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","sourcesContent":["import type { State } from '../../../../../../types/State.types';\nimport { actionColumnResize, actionColumnAutoSize } from '../../../../actions/actions';\nimport type Column from '../../../../generators/ColumnGenerator';\nimport type View from '../../../../generators/ViewGenerator';\nimport { withMemoization } from '../../../../utils/util';\nimport type { BeforeRenderFeatureProps } from '../../../featureFactory';\nimport { calculateFieldLeft } from '../freeze';\n\nexport const COLUMN_RESIZING_CLASS = 'column-resizing';\n\nexport function setColumnStyle(\n  domContainer: View['domContainer'],\n  style: string,\n  columnId: number,\n  value: number\n) {\n  if (domContainer && domContainer.style) {\n    domContainer.style.setProperty(`--col-${style}-${columnId}`, `${value}px`);\n  }\n}\n\nexport const resizedColumnWidth = (column: Column, distanceDragged: number) => {\n  const existingWidth = column.currentWidth || column.field.width || column.field.minWidth;\n  let width = existingWidth! + distanceDragged;\n  if (width < column.field.minWidth!) {\n    width = column.field.minWidth!;\n  }\n  return width;\n};\n\nexport const getNextFrozenColumns = (\n  columnId: string,\n  freezeColumns: State['freezeColumns'] = []\n) => {\n  const nextFrozenColumns = [];\n  const freezeColIndex = freezeColumns.indexOf(columnId); // If current column freezed\n  if (freezeColIndex > -1) {\n    for (let i = freezeColIndex + 1; i < freezeColumns.length; i += 1) {\n      nextFrozenColumns.push(freezeColumns[i]);\n    }\n  }\n  return nextFrozenColumns;\n};\n\nexport const columnResizerProps = ([{ getState, getView, dispatch }]: [\n  featureProps: BeforeRenderFeatureProps\n]) => {\n  const { freezeColumns, hiddenColumns, columnWidths = {} } = getState();\n  let column: Column = {} as Column;\n  let startPosition = 0;\n  let resized = false;\n  let updatedWidth = 0;\n  let currentCell: HTMLElement | null = null;\n  let nextFrozenColumns: string[] = []; // Contains next frozen columns with left positions to apply left on resize\n  const updateWidth = (distance: number) => {\n    updatedWidth = resizedColumnWidth(\n      { ...column, currentWidth: column.currentWidth } as Column,\n      distance\n    );\n    column = column.setProp('currentWidth', updatedWidth); // Updating current width\n    setColumnStyle(getView().getDomContainer(), 'width', column.field.idHash!, updatedWidth);\n  };\n\n  /**\n   * Update left positions to frozen columns or right of this column.\n   */\n  const updateLefts = () => {\n    nextFrozenColumns.forEach(colId => {\n      const left = calculateFieldLeft(\n        colId,\n        getView().columns,\n        freezeColumns,\n        hiddenColumns,\n        { ...columnWidths, [column.field.id]: updatedWidth } // injecting the resized width to current column\n      );\n      const nextFrozenColumn = getView().columns?.find(c => `${c.field.id}` === colId);\n      setColumnStyle(getView().getDomContainer(), 'left', nextFrozenColumn!.field.idHash!, left);\n    });\n  };\n\n  const resizeHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    const distance = e.clientX - startPosition;\n    if (distance !== 0) {\n      column =\n        getView().columns?.find(c => `${c.field.id}` === currentCell?.dataset.colId) ??\n        ({} as Column);\n      updateWidth(distance);\n      updateLefts();\n      resized = true;\n    }\n    startPosition = e.clientX;\n    return false;\n  };\n\n  const resizeEndHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    const domContainer = getView().getDomContainer()!;\n    domContainer.removeEventListener('mousemove', resizeHandler);\n    domContainer.removeEventListener('mouseup', resizeEndHandler);\n    domContainer.removeEventListener('mouseleave', resizeEndHandler);\n    if (resized) {\n      dispatch(actionColumnResize({ [column.field.id]: updatedWidth }));\n      resized = false;\n    }\n    currentCell!.style.pointerEvents = 'auto';\n    currentCell!.classList.toggle(COLUMN_RESIZING_CLASS);\n    domContainer.classList.toggle(COLUMN_RESIZING_CLASS);\n    return false;\n  };\n\n  const onMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    startPosition = e.clientX;\n    const domContainer = getView().getDomContainer()!;\n    domContainer.addEventListener('mousemove', resizeHandler);\n    domContainer.addEventListener('mouseup', resizeEndHandler);\n    domContainer.addEventListener('mouseleave', resizeEndHandler);\n    currentCell = (e.target as HTMLElement).closest('.cell')!;\n    currentCell.style.pointerEvents = 'none';\n\n    if (e.detail >= 2) {\n      // It is a double click so ask for a resize on column\n      const col = getView().columns?.find(c => `${c.field.id}` === currentCell!.dataset.colId);\n      if (col?.field?.resize) {\n        dispatch(actionColumnAutoSize(col, getView().getDomContainer()!, true));\n      }\n    }\n\n    currentCell.classList.toggle(COLUMN_RESIZING_CLASS);\n    domContainer.classList.toggle(COLUMN_RESIZING_CLASS);\n    // TODO: getState().freezeColumns should\n    // give latest state after the action triggered from current feature only on above lines. Check this.\n    nextFrozenColumns = getNextFrozenColumns(currentCell.dataset.colId!, getState().freezeColumns);\n\n    return false;\n  };\n\n  return {\n    onMouseDown\n  };\n};\n\nexport default () => {\n  const memoizedColumnResize = withMemoization(columnResizerProps);\n\n  return function execute(featureProps: BeforeRenderFeatureProps) {\n    const { freezeColumns, hiddenColumns, columnWidths } = featureProps.getState();\n    featureProps\n      .getRsStore()\n      .setColumnResizerProps(\n        memoizedColumnResize([featureProps], [freezeColumns, hiddenColumns, columnWidths])\n      );\n  };\n};\n"]}

package/lib/src/core/features/uIFeatures/beforeRender/columnSort.d.ts

@@ -0,0 +1,8 @@
+import type { BeforeRenderFeatureProps } from '../../featureFactory';
+/** Sets the sort properties({@link Column.sorted sorted}, {@link Column.sortSequence sortSequence}, {@link Column.sortOrder sortOrder}) for each column when any of the following properties are changed:
+ * - {@link State.sortingOrder}
+ * - `active` in {@link State.personalization}
+ */
+declare const _default: () => (featureProps: BeforeRenderFeatureProps) => void;
+export default _default;
+//# sourceMappingURL=columnSort.d.ts.map

package/lib/src/core/features/uIFeatures/beforeRender/columnSort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnSort.d.ts","sourceRoot":"","sources":["../../../../../../src/core/features/uIFeatures/beforeRender/columnSort.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAkBrE;;;GAGG;6CAIqC,wBAAwB;AAHhE,wBAOE"}

package/lib/src/core/features/uIFeatures/beforeRender/columnSort.js

@@ -0,0 +1,25 @@
+import { withMemoization } from '../../../utils/util';
+/* eslint-enable @typescript-eslint/no-unused-vars */
+const updateSort = ([{ getView, getState }]) => {
+    const { sortingOrder = [] } = getState();
+    getView().columns?.forEach(column => {
+        const sort = sortingOrder.find(s => s.columnId.toString() === `${column.field.id}`);
+        column = column.setProp({
+            sorted: !!sort,
+            sortSequence: sort?.sequence,
+            sortOrder: sort?.order
+        });
+    });
+};
+/** Sets the sort properties({@link Column.sorted sorted}, {@link Column.sortSequence sortSequence}, {@link Column.sortOrder sortOrder}) for each column when any of the following properties are changed:
+ * - {@link State.sortingOrder}
+ * - `active` in {@link State.personalization}
+ */
+export default () => {
+    const memoizedUpdateSort = withMemoization(updateSort);
+    return function execute(featureProps) {
+        const state = featureProps.getState();
+        memoizedUpdateSort([featureProps], [state.sortingOrder, state?.personalization?.active]);
+    };
+};
+//# sourceMappingURL=columnSort.js.map

package/lib/src/core/features/uIFeatures/beforeRender/columnSort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnSort.js","sourceRoot":"","sources":["../../../../../../src/core/features/uIFeatures/beforeRender/columnSort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAKtD,qDAAqD;AAErD,MAAM,UAAU,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAA2C,EAAE,EAAE;IACvF,MAAM,EAAE,YAAY,GAAG,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC;IACzC,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE;QAClC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QACpF,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC;YACtB,MAAM,EAAE,CAAC,CAAC,IAAI;YACd,YAAY,EAAE,IAAI,EAAE,QAAQ;YAC5B,SAAS,EAAE,IAAI,EAAE,KAAK;SACvB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;GAGG;AACH,eAAe,GAAG,EAAE;IAClB,MAAM,kBAAkB,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IAEvD,OAAO,SAAS,OAAO,CAAC,YAAsC;QAC5D,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;QACtC,kBAAkB,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAC3F,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { withMemoization } from '../../../utils/util';\nimport type { BeforeRenderFeatureProps } from '../../featureFactory';\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type Column from '../../../generators/ColumnGenerator';\nimport type { State } from '../../../../../types/State.types';\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\nconst updateSort = ([{ getView, getState }]: [featureProps: BeforeRenderFeatureProps]) => {\n  const { sortingOrder = [] } = getState();\n  getView().columns?.forEach(column => {\n    const sort = sortingOrder.find(s => s.columnId.toString() === `${column.field.id}`);\n    column = column.setProp({\n      sorted: !!sort,\n      sortSequence: sort?.sequence,\n      sortOrder: sort?.order\n    });\n  });\n};\n\n/** Sets the sort properties({@link Column.sorted sorted}, {@link Column.sortSequence sortSequence}, {@link Column.sortOrder sortOrder}) for each column when any of the following properties are changed:\n * - {@link State.sortingOrder}\n * - `active` in {@link State.personalization}\n */\nexport default () => {\n  const memoizedUpdateSort = withMemoization(updateSort);\n\n  return function execute(featureProps: BeforeRenderFeatureProps) {\n    const state = featureProps.getState();\n    memoizedUpdateSort([featureProps], [state.sortingOrder, state?.personalization?.active]);\n  };\n};\n"]}

package/lib/src/core/features/uIFeatures/beforeRender/columnToggle.d.ts

@@ -0,0 +1,9 @@
+import type { BeforeRenderFeatureProps } from '../../featureFactory';
+export declare const updateFieldDefs: ([{ getView, getState }]: [featureProps: BeforeRenderFeatureProps]) => void;
+/** Sets the {@link Column.style display} and {@link Column.hidden hidden} property of each column when any of the following properties are changed:
+ * - {@link State.hiddenColumns}
+ * - `active` {@link State.personalization}
+ */
+declare const _default: () => (featureProps: BeforeRenderFeatureProps) => void;
+export default _default;
+//# sourceMappingURL=columnToggle.d.ts.map

package/lib/src/core/features/uIFeatures/beforeRender/columnToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnToggle.d.ts","sourceRoot":"","sources":["../../../../../../src/core/features/uIFeatures/beforeRender/columnToggle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAMrE,eAAO,MAAM,eAAe,4BAA6B,CACvD,YAAY,EAAE,wBAAwB,CACvC,SAWA,CAAC;AAEF;;;GAGG;6CAIqC,wBAAwB;AAHhE,wBAOE"}

package/lib/src/core/features/uIFeatures/beforeRender/columnToggle.js

@@ -0,0 +1,26 @@
+import { withMemoization } from '../../../utils/util';
+/* eslint-enable @typescript-eslint/no-unused-vars */
+export const updateFieldDefs = ([{ getView, getState }]) => {
+    const { hiddenColumns = [] } = getState();
+    getView().columns?.forEach(column => {
+        const style = { ...column.style };
+        const hidden = hiddenColumns.includes(`${column.field.id}`);
+        style.display = hidden ? 'none' : 'unset';
+        column = column.setProp({
+            style,
+            hidden
+        });
+    });
+};
+/** Sets the {@link Column.style display} and {@link Column.hidden hidden} property of each column when any of the following properties are changed:
+ * - {@link State.hiddenColumns}
+ * - `active` {@link State.personalization}
+ */
+export default () => {
+    const memoizedToggleColumns = withMemoization(updateFieldDefs);
+    return function execute(featureProps) {
+        const state = featureProps.getState();
+        memoizedToggleColumns([featureProps], [state?.hiddenColumns, state?.personalization?.active]);
+    };
+};
+//# sourceMappingURL=columnToggle.js.map

package/lib/src/core/features/uIFeatures/beforeRender/columnToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnToggle.js","sourceRoot":"","sources":["../../../../../../src/core/features/uIFeatures/beforeRender/columnToggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAKtD,qDAAqD;AAErD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAErD,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,GAAG,EAAE,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC1C,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE;QAClC,MAAM,KAAK,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,aAAa,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;QAC5D,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC1C,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC;YACtB,KAAK;YACL,MAAM;SACP,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;GAGG;AACH,eAAe,GAAG,EAAE;IAClB,MAAM,qBAAqB,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;IAE/D,OAAO,SAAS,OAAO,CAAC,YAAsC;QAC5D,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;QACtC,qBAAqB,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAChG,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { withMemoization } from '../../../utils/util';\nimport type { BeforeRenderFeatureProps } from '../../featureFactory';\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport type Column from '../../../generators/ColumnGenerator';\nimport type { State } from '../../../../../types/State.types';\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\nexport const updateFieldDefs = ([{ getView, getState }]: [\n  featureProps: BeforeRenderFeatureProps\n]) => {\n  const { hiddenColumns = [] } = getState();\n  getView().columns?.forEach(column => {\n    const style = { ...column.style };\n    const hidden = hiddenColumns.includes(`${column.field.id}`);\n    style.display = hidden ? 'none' : 'unset';\n    column = column.setProp({\n      style,\n      hidden\n    });\n  });\n};\n\n/** Sets the {@link Column.style display} and {@link Column.hidden hidden} property of each column when any of the following properties are changed:\n * - {@link State.hiddenColumns}\n * - `active` {@link State.personalization}\n */\nexport default () => {\n  const memoizedToggleColumns = withMemoization(updateFieldDefs);\n\n  return function execute(featureProps: BeforeRenderFeatureProps) {\n    const state = featureProps.getState();\n    memoizedToggleColumns([featureProps], [state?.hiddenColumns, state?.personalization?.active]);\n  };\n};\n"]}

package/lib/src/core/features/uIFeatures/beforeRender/columnVisualOrder.d.ts

@@ -0,0 +1,12 @@
+import type { BeforeRenderFeatureProps } from '../../featureFactory';
+/**
+ * Sets the {@link Column.isFirstVisualColumn isFirstVisualColumn}, {@link Column.isFirstDataColumn isFirstDataColumn}, {@link Column.isLastColumn isLastColumn}, {@link Column.order order} properties of each column when any of the following properties are changed:
+ * - {@link State.hiddenColumns}
+ * - {@link State.freezeColumns}
+ * - {@link State.colOrder}
+ * - `active` in {@link State.personalization}
+ * - `size` of {@link View.columns columns}
+ */
+declare const _default: () => (featureProps: BeforeRenderFeatureProps) => void;
+export default _default;
+//# sourceMappingURL=columnVisualOrder.d.ts.map

package/lib/src/core/features/uIFeatures/beforeRender/columnVisualOrder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnVisualOrder.d.ts","sourceRoot":"","sources":["../../../../../../src/core/features/uIFeatures/beforeRender/columnVisualOrder.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AA2CrE;;;;;;;GAOG;6CAIqC,wBAAwB;AAHhE,wBAgBE"}