@pega/lists-core 8.0.0-build.27.14

package/lib/src/core/features/featureFactory.d.ts

@@ -0,0 +1,52 @@
+import type { State } from 'packages/lists-rs-core/types/State.types';
+import type View from '../generators/ViewGenerator';
+import type RsInternal from '../RsInternal';
+import type RsProps from '../RsProps';
+import type StateResolver from '../StateResolver';
+import type RsStore from '../RsStore';
+import type { Action } from '../actions/actions.types';
+export type FeatureProps<WithQueuedActions extends boolean = false> = {
+    /** Returns reference to current {@link View} */
+    getView: () => View;
+    /** Returns reference to {@link RsStore} */
+    getRsStore: () => RsStore;
+    /** Returns reference to {@link RsProps} */
+    getRsProps: () => RsProps;
+    /** Returns reference to latest/current {@link State} */
+    getState: () => State;
+    /** Returns the stable {@link State} before the actions in the queue started executing. */
+    getOriginalState: StateResolver['getOriginalState'];
+    /** A dispatcher to dispatch RS actions. */
+    dispatch: StateResolver['dispatch'];
+} & (WithQueuedActions extends true ? {
+    /** A queue of current actions that are dispatched. */
+    queuedActions: Action[];
+} : {});
+export type BeforeRenderFeatureProps = FeatureProps<true>;
+export type MiddleWareFeatureProps = {
+    /** Reference to RsInternal object. */
+    rsInternal: RsInternal;
+    /** Returns reference to latest/current {@link State}. */
+    getState: () => State;
+    /** Returns the stable {@link State} before the actions in the queue started executing. */
+    getOriginalState: StateResolver['getOriginalState'];
+    /** A dispatcher to dispatch RS actions. */
+    dispatch: StateResolver['dispatch'];
+    /** A queue of current actions that are dispatched. */
+    queuedActions: Action[];
+};
+/** A feature is a function that runs based on a particular state slice change and produces immutable generator({@link View}, {@link Row}, {@link Column}) objects. It may also {@link StateResolver.dispatch dispatch} an action. */
+export type Feature<WithQueuedActions extends boolean = false> = (rsInternal: RsInternal) => ((featureProps: FeatureProps<WithQueuedActions>) => void) | void;
+export type UIFeatures = ReturnType<typeof getUIFeatures>;
+declare function getUIFeatures(): {
+    beforeRender: Feature<true>[];
+    afterRender: Feature[];
+};
+/**
+ * Initializes and return before and after render features.
+ * @param rsInternal
+ * @returns
+ */
+export default function initializeFeatures(rsInternal: RsInternal): [(featureProps: MiddleWareFeatureProps) => Promise<void | null>, () => void];
+export {};
+//# sourceMappingURL=featureFactory.d.ts.map

package/lib/src/core/features/featureFactory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"featureFactory.d.ts","sourceRoot":"","sources":["../../../../src/core/features/featureFactory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0CAA0C,CAAC;AAEtE,OAAO,KAAK,IAAI,MAAM,6BAA6B,CAAC;AAKpD,OAAO,KAAK,UAAU,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,OAAO,MAAM,YAAY,CAAC;AACtC,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,OAAO,MAAM,YAAY,CAAC;AACtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAIvD,MAAM,MAAM,YAAY,CAAC,iBAAiB,SAAS,OAAO,GAAG,KAAK,IAAI;IACpE,gDAAgD;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,2CAA2C;IAC3C,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,2CAA2C;IAC3C,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,wDAAwD;IACxD,QAAQ,EAAE,MAAM,KAAK,CAAC;IACtB,0FAA0F;IAC1F,gBAAgB,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACpD,2CAA2C;IAC3C,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACrC,GAAG,CAAC,iBAAiB,SAAS,IAAI,GAC/B;IACE,sDAAsD;IACtD,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,GAGD,EAAE,CAAC,CAAC;AAER,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;AAE1D,MAAM,MAAM,sBAAsB,GAAG;IACnC,sCAAsC;IACtC,UAAU,EAAE,UAAU,CAAC;IACvB,yDAAyD;IACzD,QAAQ,EAAE,MAAM,KAAK,CAAC;IACtB,0FAA0F;IAC1F,gBAAgB,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACpD,2CAA2C;IAC3C,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,sDAAsD;IACtD,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,qOAAqO;AACrO,MAAM,MAAM,OAAO,CAAC,iBAAiB,SAAS,OAAO,GAAG,KAAK,IAAI,CAC/D,UAAU,EAAE,UAAU,KACnB,CAAC,CAAC,YAAY,EAAE,YAAY,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;AAEtE,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,iBAAS,aAAa;kBAEJ,OAAO,CAAC,IAAI,CAAC,EAAE;iBAChB,OAAO,EAAE;EA8DzB;AAuDD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,UAAU,EAAE,UAAU,GACrB,CAAC,CAAC,YAAY,EAAE,sBAAsB,KAAK,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC,CAE9E"}

package/lib/src/core/features/featureFactory.js

@@ -0,0 +1,118 @@
+import uiFeatures from './uIFeatures';
+function getUIFeatures() {
+    const features = {
+        beforeRender: [],
+        afterRender: []
+    };
+    features.beforeRender.push(uiFeatures.beforeRender.scrollToTop);
+    features.beforeRender.push(uiFeatures.beforeRender.busyIndicator);
+    features.beforeRender.push(uiFeatures.beforeRender.personalization);
+    // Reset dataApi context so that new count and data could be fetched on change of personalization
+    features.beforeRender.push(uiFeatures.beforeRender.resetFetch);
+    features.beforeRender.push(uiFeatures.beforeRender.changePersonalisation);
+    features.beforeRender.push(uiFeatures.beforeRender.prepareColumns);
+    features.beforeRender.push(uiFeatures.beforeRender.columnFormatter);
+    features.beforeRender.push(uiFeatures.beforeRender.ColumnDisplayMode);
+    /* customColumn feature injects field definitions for custom fields, so stateSanitization feature should run after customColumn */
+    features.beforeRender.push(uiFeatures.beforeRender.customColumn);
+    features.beforeRender.push(uiFeatures.beforeRender.columnAlias);
+    features.beforeRender.push(uiFeatures.beforeRender.stateSanitization);
+    features.beforeRender.push(uiFeatures.beforeRender.stateHydration);
+    features.beforeRender.push(uiFeatures.beforeRender.conditionalStyleFormat);
+    features.beforeRender.push(uiFeatures.beforeRender.columnToggle);
+    // ORDER: if any feature is going to generate some markup, then it should come before columnSizing feature
+    // If reordering or moving records is enabled then rowDragDrop handler size has to be calculated and picked by column sizing
+    features.beforeRender.push(uiFeatures.beforeRender.errorColumn);
+    features.beforeRender.push(uiFeatures.beforeRender.rowDragDrop);
+    features.beforeRender.push(uiFeatures.beforeRender.columnSizing);
+    features.beforeRender.push(uiFeatures.beforeRender.adjustHeight);
+    features.beforeRender.push(uiFeatures.beforeRender.adjustMaxHeight);
+    features.beforeRender.push(uiFeatures.beforeRender.freeze);
+    // columnOrder is required for both columnVisualOrder and columnReorder feature
+    features.beforeRender.push(uiFeatures.beforeRender.columnOrder);
+    features.beforeRender.push(uiFeatures.beforeRender.columnVisualOrder);
+    // Columns header should be rendered as soon as it is available. Features making calculation on columns should be before this.
+    features.beforeRender.push(uiFeatures.beforeRender.renderHeader);
+    features.beforeRender.push(uiFeatures.beforeRender.refresh);
+    features.beforeRender.push(uiFeatures.beforeRender.rowHeight);
+    features.beforeRender.push(uiFeatures.beforeRender.animation);
+    features.beforeRender.push(uiFeatures.beforeRender.prepareRows);
+    // We have to inject this feature always as we are generating instance
+    // level data with same to avoid condition block in UI.
+    features.beforeRender.push(uiFeatures.beforeRender.grouping);
+    features.beforeRender.push(uiFeatures.beforeRender.resizeGroupedDragDropColumn);
+    features.beforeRender.push(uiFeatures.beforeRender.filter);
+    features.beforeRender.push(uiFeatures.beforeRender.columnSort);
+    features.beforeRender.push(uiFeatures.beforeRender.groupSorting);
+    features.beforeRender.push(uiFeatures.beforeRender.columnResize);
+    features.beforeRender.push(uiFeatures.beforeRender.adjustHeightToFitRecords);
+    features.beforeRender.push(uiFeatures.beforeRender.columnReOrder);
+    features.beforeRender.push(uiFeatures.beforeRender.rowSelect);
+    features.beforeRender.push(uiFeatures.beforeRender.toggleSelectAllCheckbox);
+    features.beforeRender.push(uiFeatures.beforeRender.aggregation);
+    features.beforeRender.push(uiFeatures.beforeRender.edit);
+    features.beforeRender.push(uiFeatures.beforeRender.moveRecords);
+    features.beforeRender.push(uiFeatures.beforeRender.toggleHeaderIcons);
+    features.afterRender.push(uiFeatures.afterRender.animation);
+    features.afterRender.push(uiFeatures.afterRender.columnAutoSizing);
+    features.afterRender.push(uiFeatures.afterRender.customizeParentContainer);
+    return features;
+}
+/**
+ * Initializes and returns before render features which run when any action is dispatched in the queue.
+ * @param rsInternal - RsInternal reference.
+ * @returns
+ */
+function initializeBeforeRenderFeatures(rsInternal) {
+    const features = getUIFeatures();
+    const beforeRenderUIFeatures = features.beforeRender.map(t => t(rsInternal)).filter(Boolean);
+    return (featureProps) => {
+        return beforeRenderUIFeatures.reduce(async (p, feature) => {
+            return p.then(() => {
+                if (!featureProps.rsInternal.getRsStore().isMounted)
+                    return null;
+                return feature({
+                    getView: featureProps.rsInternal.getView,
+                    getRsStore: featureProps.rsInternal.getRsStore,
+                    getRsProps: featureProps.rsInternal.getRsProps,
+                    getState: featureProps.getState,
+                    getOriginalState: featureProps.getOriginalState,
+                    dispatch: featureProps.dispatch,
+                    queuedActions: featureProps.queuedActions
+                });
+            });
+        }, Promise.resolve());
+    };
+}
+/**
+ * Initializes and returns after render features which run after the render is completed.
+ * @param rsInternal RsInternal reference.
+ * @returns
+ */
+function initializeAfterRenderFeatures(rsInternal) {
+    const features = getUIFeatures();
+    const afterRenderUIFeatures = features.afterRender.map(t => t(rsInternal)).filter(Boolean);
+    return () => {
+        afterRenderUIFeatures.forEach(feature => {
+            if (rsInternal.getRsStore().isMounted) {
+                feature({
+                    getView: rsInternal.getView,
+                    getRsStore: rsInternal.getRsStore,
+                    getRsProps: rsInternal.getRsProps,
+                    getState: rsInternal.getRsStateResolver().getState,
+                    getOriginalState: rsInternal.getRsStateResolver().getOriginalState,
+                    dispatch: rsInternal.getRsStateResolver().dispatch
+                });
+            }
+        });
+    };
+}
+/**
+ * Initializes and return before and after render features.
+ * @param rsInternal
+ * @returns
+ */
+export default function initializeFeatures(rsInternal) {
+    return [initializeBeforeRenderFeatures(rsInternal), initializeAfterRenderFeatures(rsInternal)];
+}
+//# sourceMappingURL=featureFactory.js.map

package/lib/src/core/features/featureFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"featureFactory.js","sourceRoot":"","sources":["../../../../src/core/features/featureFactory.ts"],"names":[],"mappings":"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","sourcesContent":["import type { State } from 'packages/lists-rs-core/types/State.types';\n\nimport type View from '../generators/ViewGenerator';\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type Column from '../generators/ColumnGenerator';\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type Row from '../generators/RowGenerator';\nimport type RsInternal from '../RsInternal';\nimport type RsProps from '../RsProps';\nimport type StateResolver from '../StateResolver';\nimport type RsStore from '../RsStore';\nimport type { Action } from '../actions/actions.types';\n\nimport uiFeatures from './uIFeatures';\n\nexport type FeatureProps<WithQueuedActions extends boolean = false> = {\n  /** Returns reference to current {@link View} */\n  getView: () => View;\n  /** Returns reference to {@link RsStore} */\n  getRsStore: () => RsStore;\n  /** Returns reference to {@link RsProps} */\n  getRsProps: () => RsProps;\n  /** Returns reference to latest/current {@link State} */\n  getState: () => State;\n  /** Returns the stable {@link State} before the actions in the queue started executing. */\n  getOriginalState: StateResolver['getOriginalState'];\n  /** A dispatcher to dispatch RS actions. */\n  dispatch: StateResolver['dispatch'];\n} & (WithQueuedActions extends true\n  ? {\n      /** A queue of current actions that are dispatched. */\n      queuedActions: Action[];\n    }\n  : // For better readability keeping {} rather than Record<string, never>.\n    // eslint-disable-next-line @typescript-eslint/ban-types\n    {});\n\nexport type BeforeRenderFeatureProps = FeatureProps<true>;\n\nexport type MiddleWareFeatureProps = {\n  /** Reference to RsInternal object. */\n  rsInternal: RsInternal;\n  /** Returns reference to latest/current {@link State}. */\n  getState: () => State;\n  /** Returns the stable {@link State} before the actions in the queue started executing. */\n  getOriginalState: StateResolver['getOriginalState'];\n  /** A dispatcher to dispatch RS actions. */\n  dispatch: StateResolver['dispatch'];\n  /** A queue of current actions that are dispatched. */\n  queuedActions: Action[];\n};\n\n/** A feature is a function that runs based on a particular state slice change and produces immutable generator({@link View}, {@link Row}, {@link Column}) objects. It may also {@link StateResolver.dispatch dispatch} an action. */\nexport type Feature<WithQueuedActions extends boolean = false> = (\n  rsInternal: RsInternal\n) => ((featureProps: FeatureProps<WithQueuedActions>) => void) | void;\n\nexport type UIFeatures = ReturnType<typeof getUIFeatures>;\nfunction getUIFeatures() {\n  const features: {\n    beforeRender: Feature<true>[];\n    afterRender: Feature[];\n  } = {\n    beforeRender: [],\n    afterRender: []\n  };\n  features.beforeRender.push(uiFeatures.beforeRender.scrollToTop);\n  features.beforeRender.push(uiFeatures.beforeRender.busyIndicator);\n  features.beforeRender.push(uiFeatures.beforeRender.personalization);\n  // Reset dataApi context so that new count and data could be fetched on change of personalization\n  features.beforeRender.push(uiFeatures.beforeRender.resetFetch);\n  features.beforeRender.push(uiFeatures.beforeRender.changePersonalisation);\n  features.beforeRender.push(uiFeatures.beforeRender.prepareColumns);\n  features.beforeRender.push(uiFeatures.beforeRender.columnFormatter);\n  features.beforeRender.push(uiFeatures.beforeRender.ColumnDisplayMode);\n  /* customColumn feature injects field definitions for custom fields, so stateSanitization feature should run after customColumn */\n  features.beforeRender.push(uiFeatures.beforeRender.customColumn);\n  features.beforeRender.push(uiFeatures.beforeRender.columnAlias);\n  features.beforeRender.push(uiFeatures.beforeRender.stateSanitization);\n  features.beforeRender.push(uiFeatures.beforeRender.stateHydration);\n  features.beforeRender.push(uiFeatures.beforeRender.conditionalStyleFormat);\n  features.beforeRender.push(uiFeatures.beforeRender.columnToggle);\n  // ORDER: if any feature is going to generate some markup, then it should come before columnSizing feature\n  // If reordering or moving records is enabled then rowDragDrop handler size has to be calculated and picked by column sizing\n  features.beforeRender.push(uiFeatures.beforeRender.errorColumn);\n  features.beforeRender.push(uiFeatures.beforeRender.rowDragDrop);\n  features.beforeRender.push(uiFeatures.beforeRender.columnSizing);\n  features.beforeRender.push(uiFeatures.beforeRender.adjustHeight);\n  features.beforeRender.push(uiFeatures.beforeRender.adjustMaxHeight);\n  features.beforeRender.push(uiFeatures.beforeRender.freeze);\n  // columnOrder is required for both columnVisualOrder and columnReorder feature\n  features.beforeRender.push(uiFeatures.beforeRender.columnOrder);\n  features.beforeRender.push(uiFeatures.beforeRender.columnVisualOrder);\n  // Columns header should be rendered as soon as it is available. Features making calculation on columns should be before this.\n  features.beforeRender.push(uiFeatures.beforeRender.renderHeader);\n  features.beforeRender.push(uiFeatures.beforeRender.refresh);\n  features.beforeRender.push(uiFeatures.beforeRender.rowHeight);\n  features.beforeRender.push(uiFeatures.beforeRender.animation);\n  features.beforeRender.push(uiFeatures.beforeRender.prepareRows);\n  // We have to inject this feature always as we are generating instance\n  // level data with same to avoid condition block in UI.\n\n  features.beforeRender.push(uiFeatures.beforeRender.grouping);\n  features.beforeRender.push(uiFeatures.beforeRender.resizeGroupedDragDropColumn);\n  features.beforeRender.push(uiFeatures.beforeRender.filter);\n  features.beforeRender.push(uiFeatures.beforeRender.columnSort);\n  features.beforeRender.push(uiFeatures.beforeRender.groupSorting);\n  features.beforeRender.push(uiFeatures.beforeRender.columnResize);\n  features.beforeRender.push(uiFeatures.beforeRender.adjustHeightToFitRecords);\n\n  features.beforeRender.push(uiFeatures.beforeRender.columnReOrder);\n  features.beforeRender.push(uiFeatures.beforeRender.rowSelect);\n  features.beforeRender.push(uiFeatures.beforeRender.toggleSelectAllCheckbox);\n  features.beforeRender.push(uiFeatures.beforeRender.aggregation);\n  features.beforeRender.push(uiFeatures.beforeRender.edit);\n  features.beforeRender.push(uiFeatures.beforeRender.moveRecords);\n  features.beforeRender.push(uiFeatures.beforeRender.toggleHeaderIcons);\n\n  features.afterRender.push(uiFeatures.afterRender.animation);\n  features.afterRender.push(uiFeatures.afterRender.columnAutoSizing);\n  features.afterRender.push(uiFeatures.afterRender.customizeParentContainer);\n\n  return features;\n}\n\n/**\n * Initializes and returns before render features which run when any action is dispatched in the queue.\n * @param rsInternal - RsInternal reference.\n * @returns\n */\nfunction initializeBeforeRenderFeatures(rsInternal: RsInternal) {\n  const features = getUIFeatures();\n  const beforeRenderUIFeatures = features.beforeRender.map(t => t(rsInternal)).filter(Boolean);\n  return (featureProps: MiddleWareFeatureProps) => {\n    return (beforeRenderUIFeatures as ((featureProps: BeforeRenderFeatureProps) => void)[]).reduce<\n      Promise<void | null>\n    >(async (p, feature) => {\n      return p.then(() => {\n        if (!featureProps.rsInternal.getRsStore().isMounted) return null;\n        return feature({\n          getView: featureProps.rsInternal.getView,\n          getRsStore: featureProps.rsInternal.getRsStore,\n          getRsProps: featureProps.rsInternal.getRsProps,\n          getState: featureProps.getState,\n          getOriginalState: featureProps.getOriginalState,\n          dispatch: featureProps.dispatch,\n          queuedActions: featureProps.queuedActions\n        });\n      });\n    }, Promise.resolve());\n  };\n}\n\n/**\n * Initializes and returns after render features which run after the render is completed.\n * @param rsInternal RsInternal reference.\n * @returns\n */\nfunction initializeAfterRenderFeatures(rsInternal: RsInternal) {\n  const features = getUIFeatures();\n  const afterRenderUIFeatures = features.afterRender.map(t => t(rsInternal)).filter(Boolean);\n\n  return () => {\n    (afterRenderUIFeatures as ((featureProps: FeatureProps) => void)[]).forEach(feature => {\n      if (rsInternal.getRsStore().isMounted) {\n        feature({\n          getView: rsInternal.getView,\n          getRsStore: rsInternal.getRsStore,\n          getRsProps: rsInternal.getRsProps,\n          getState: rsInternal.getRsStateResolver()!.getState,\n          getOriginalState: rsInternal.getRsStateResolver()!.getOriginalState,\n          dispatch: rsInternal.getRsStateResolver()!.dispatch\n        });\n      }\n    });\n  };\n}\n\n/**\n * Initializes and return before and after render features.\n * @param rsInternal\n * @returns\n */\nexport default function initializeFeatures(\n  rsInternal: RsInternal\n): [(featureProps: MiddleWareFeatureProps) => Promise<void | null>, () => void] {\n  return [initializeBeforeRenderFeatures(rsInternal), initializeAfterRenderFeatures(rsInternal)];\n}\n"]}

package/lib/src/core/features/uIFeatures/afterRender/animation.d.ts

@@ -0,0 +1,24 @@
+import type { FeatureProps } from '../../featureFactory';
+/**
+ * Handles animations for rows and columns
+ * The animations are triggered based on changes to specific state properties:
+ *
+ * ### Row Animation Triggers
+ *   - {@link State.filterExpression}
+ *   - search text
+ *   - {@link State.sortingOrder}
+ *   - {@link State.groups}
+ *   - {@link State.refresh}
+ *   - {@link State.selectedHeightOption}
+ *
+ * ### Column Animation Triggers
+ *   - {@link State.freezeColumns}
+ *   - {@link State.colOrder}
+ *   - {@link State.hiddenColumns}
+ *   - {@link State.columnWidths}
+ *   - {@link State.refresh}
+ *   - {@link RsStore.skipColumnAnimationOnNextRun}
+ */
+declare const _default: () => (featureProps: FeatureProps) => void;
+export default _default;
+//# sourceMappingURL=animation.d.ts.map

package/lib/src/core/features/uIFeatures/afterRender/animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../../../src/core/features/uIFeatures/afterRender/animation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AA6HzD;;;;;;;;;;;;;;;;;;;GAmBG;6CAKqC,YAAY;AAJpD,wBA8BE"}

package/lib/src/core/features/uIFeatures/afterRender/animation.js

@@ -0,0 +1,157 @@
+import { withMemoization } from '../../../utils/util';
+/**
+ * Triggers animation on a {@link domNode} in X and Y direction by {@link deltaX} and {@link deltaY} respectively.
+ * @param domNode - Dom node on which animation should be triggered.
+ * @param deltaX - Range of movement on X axis.
+ * @param deltaY - Range of movement on Y axis
+ * @returns void
+ */
+function animate(domNode, deltaX = 150, deltaY = 150) {
+    if (!domNode)
+        return;
+    if (deltaY || deltaX) {
+        requestAnimationFrame(() => {
+            // Ensure that it inverts immediately
+            domNode.style.transition = 'transform 0s';
+            // Before the DOM paints, Invert it to its old
+            domNode.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0)`;
+            requestAnimationFrame(() => {
+                domNode.style.removeProperty('transform');
+                domNode.style.removeProperty('transition');
+            });
+        });
+    }
+}
+/**
+ * Triggers column animation.
+ * @param featureProps - A tuple containing an object of feature props.
+ * @returns void
+ */
+const rowAnimation = ([{ getState, getView, getRsStore }]) => {
+    const { featuresToAvoid } = getState();
+    const rsStore = getRsStore();
+    let avoidRowAnimation = false;
+    if (featuresToAvoid?.includes('rowAnimation')) {
+        avoidRowAnimation = true;
+    }
+    // Row animation
+    if (!avoidRowAnimation && rsStore.oldBoundingBox?.size) {
+        const pNode = getView().getDomContainer();
+        const rowContainer = pNode?.querySelector('.row-container'); // row container should wrap all the rows.
+        // Calculate the bounding box
+        const newBoundingBox = new Map();
+        rowContainer?.childNodes.forEach(n => {
+            if (n.nodeType === Node.ELEMENT_NODE && n instanceof Element && n.hasAttribute?.('data-key'))
+                newBoundingBox.set(n.getAttribute('data-key'), n.getBoundingClientRect());
+        });
+        for (const [key, value] of newBoundingBox) {
+            const rowNode = rowContainer?.querySelector(`[data-key='${CSS.escape(key)}']`);
+            if (rsStore.oldBoundingBox.has(key)) {
+                // Those elements that were in the dom earlier as well
+                const deltaY = rsStore.oldBoundingBox.get(key).top - value.top;
+                const deltaX = rsStore.oldBoundingBox.get(key).left - value.left;
+                animate(rowNode, deltaX, deltaY);
+            }
+            else {
+                // Those elements that came in now
+                animate(rowNode, 0);
+            }
+        }
+        rsStore.oldBoundingBox = null;
+    }
+};
+/**
+ * Evaluates if column animation needs to be skipped based on {@link State.featuresToAvoid}
+ * @param featuresToAvoid
+ * @returns boolean - true if columnAnimation should be skipped otherwise false.
+ */
+function avoidColumnAnimation(featuresToAvoid) {
+    return featuresToAvoid?.includes('columnAnimation');
+}
+/**
+ * Triggers column animation.
+ * @param featureProps - A tuple containing an object of feature props.
+ * @returns void
+ */
+const columnAnimation = ([{ getState, getView, getRsStore }]) => {
+    const { featuresToAvoid } = getState();
+    const rsStore = getRsStore();
+    if (rsStore.skipColumnAnimationOnNextRun) {
+        rsStore.skipColumnAnimationOnNextRun = false;
+        return;
+    }
+    // Column animation
+    if (!avoidColumnAnimation(featuresToAvoid) && rsStore.oldColumnBoundingBox?.size) {
+        const pNode = getView().getDomContainer();
+        // Calculate the bounding box
+        const newColBoundingBox = new Map();
+        if (getView().getItemElement()) {
+            getView()
+                .getItemElement()
+                .childNodes.forEach(cell => {
+                if (cell.nodeType === Node.ELEMENT_NODE &&
+                    cell instanceof Element &&
+                    cell.hasAttribute?.('data-col-id')) {
+                    newColBoundingBox.set(cell.getAttribute('data-col-id'), cell.getBoundingClientRect());
+                }
+            });
+        }
+        rsStore.oldColumnBoundingBox.forEach((value, key) => {
+            if (newColBoundingBox.has(key)) {
+                const deltaX = value.left - newColBoundingBox.get(key).left;
+                const domNodes = pNode?.querySelectorAll(`[data-col-id='${key}']`);
+                if (deltaX) {
+                    domNodes?.forEach(domNode => {
+                        animate(domNode, deltaX, 0);
+                    });
+                }
+            }
+        });
+        rsStore.oldColumnBoundingBox = null;
+    }
+};
+/**
+ * Handles animations for rows and columns
+ * The animations are triggered based on changes to specific state properties:
+ *
+ * ### Row Animation Triggers
+ *   - {@link State.filterExpression}
+ *   - search text
+ *   - {@link State.sortingOrder}
+ *   - {@link State.groups}
+ *   - {@link State.refresh}
+ *   - {@link State.selectedHeightOption}
+ *
+ * ### Column Animation Triggers
+ *   - {@link State.freezeColumns}
+ *   - {@link State.colOrder}
+ *   - {@link State.hiddenColumns}
+ *   - {@link State.columnWidths}
+ *   - {@link State.refresh}
+ *   - {@link RsStore.skipColumnAnimationOnNextRun}
+ */
+export default () => {
+    const memoizedRowAnimation = withMemoization(rowAnimation);
+    const memoizedColumnAnimation = withMemoization(columnAnimation);
+    return function execute(featureProps) {
+        const state = featureProps.getState();
+        memoizedRowAnimation([featureProps], [
+            state.filterExpression,
+            // @ts-expect-error Property 'searchText' does not exist on type 'State' but exists on view.state
+            state.searchText,
+            state.sortingOrder,
+            state.groups,
+            state.refresh,
+            state.selectedHeightOption
+        ]);
+        memoizedColumnAnimation([featureProps], [
+            state.freezeColumns,
+            state.colOrder,
+            state.hiddenColumns,
+            state.columnWidths,
+            state.refresh,
+            featureProps.getRsStore().skipColumnAnimationOnNextRun
+        ]);
+    };
+};
+//# sourceMappingURL=animation.js.map

package/lib/src/core/features/uIFeatures/afterRender/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","sourceRoot":"","sources":["../../../../../../src/core/features/uIFeatures/afterRender/animation.ts"],"names":[],"mappings":"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","sourcesContent":["import type { State } from '../../../../../types/State.types';\nimport { withMemoization } from '../../../utils/util';\nimport type { FeatureProps } from '../../featureFactory';\n// Used in JsDoc.\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type RsStore from '../../../RsStore';\n\n/**\n * Triggers animation on a {@link domNode} in X and Y direction by {@link deltaX} and {@link deltaY} respectively.\n * @param domNode - Dom node on which animation should be triggered.\n * @param deltaX - Range of movement on X axis.\n * @param deltaY - Range of movement on Y axis\n * @returns void\n */\nfunction animate(domNode: HTMLElement, deltaX = 150, deltaY = 150) {\n  if (!domNode) return;\n  if (deltaY || deltaX) {\n    requestAnimationFrame(() => {\n      // Ensure that it inverts immediately\n      domNode.style.transition = 'transform 0s';\n      // Before the DOM paints, Invert it to its old\n      domNode.style.transform = `translate3d(${deltaX}px, ${deltaY}px, 0)`;\n\n      requestAnimationFrame(() => {\n        domNode.style.removeProperty('transform');\n        domNode.style.removeProperty('transition');\n      });\n    });\n  }\n}\n\n/**\n * Triggers column animation.\n * @param featureProps - A tuple containing an object of feature props.\n * @returns void\n */\nconst rowAnimation = ([{ getState, getView, getRsStore }]: [featureProps: FeatureProps]) => {\n  const { featuresToAvoid } = getState();\n  const rsStore = getRsStore();\n  let avoidRowAnimation = false;\n  if (featuresToAvoid?.includes('rowAnimation')) {\n    avoidRowAnimation = true;\n  }\n  // Row animation\n  if (!avoidRowAnimation && rsStore.oldBoundingBox?.size) {\n    const pNode = getView().getDomContainer();\n    const rowContainer = pNode?.querySelector('.row-container'); // row container should wrap all the rows.\n\n    // Calculate the bounding box\n    const newBoundingBox = new Map();\n    rowContainer?.childNodes.forEach(n => {\n      if (n.nodeType === Node.ELEMENT_NODE && n instanceof Element && n.hasAttribute?.('data-key'))\n        newBoundingBox.set(n.getAttribute('data-key'), n.getBoundingClientRect());\n    });\n\n    for (const [key, value] of newBoundingBox) {\n      const rowNode = rowContainer?.querySelector<HTMLElement>(`[data-key='${CSS.escape(key)}']`);\n      if (rsStore.oldBoundingBox.has(key)) {\n        // Those elements that were in the dom earlier as well\n        const deltaY = rsStore.oldBoundingBox.get(key)!.top - value.top;\n        const deltaX = rsStore.oldBoundingBox.get(key)!.left - value.left;\n        animate(rowNode!, deltaX, deltaY);\n      } else {\n        // Those elements that came in now\n        animate(rowNode!, 0);\n      }\n    }\n    rsStore.oldBoundingBox = null;\n  }\n};\n\n/**\n * Evaluates if column animation needs to be skipped based on {@link State.featuresToAvoid}\n * @param featuresToAvoid\n * @returns boolean - true if columnAnimation should be skipped otherwise false.\n */\nfunction avoidColumnAnimation(featuresToAvoid: State['featuresToAvoid']) {\n  return featuresToAvoid?.includes('columnAnimation');\n}\n/**\n * Triggers column animation.\n * @param featureProps - A tuple containing an object of feature props.\n * @returns void\n */\nconst columnAnimation = ([{ getState, getView, getRsStore }]: [featureProps: FeatureProps]) => {\n  const { featuresToAvoid } = getState();\n  const rsStore = getRsStore();\n\n  if (rsStore.skipColumnAnimationOnNextRun) {\n    rsStore.skipColumnAnimationOnNextRun = false;\n    return;\n  }\n\n  // Column animation\n  if (!avoidColumnAnimation(featuresToAvoid) && rsStore.oldColumnBoundingBox?.size) {\n    const pNode = getView().getDomContainer();\n\n    // Calculate the bounding box\n    const newColBoundingBox = new Map<string, DOMRect>();\n    if (getView().getItemElement()) {\n      getView()\n        .getItemElement()!\n        .childNodes.forEach(cell => {\n          if (\n            cell.nodeType === Node.ELEMENT_NODE &&\n            cell instanceof Element &&\n            cell.hasAttribute?.('data-col-id')\n          ) {\n            newColBoundingBox.set(cell.getAttribute('data-col-id')!, cell.getBoundingClientRect());\n          }\n        });\n    }\n    rsStore.oldColumnBoundingBox.forEach((value, key) => {\n      if (newColBoundingBox.has(key)) {\n        const deltaX = value.left - newColBoundingBox.get(key)!.left;\n        const domNodes = pNode?.querySelectorAll<HTMLElement>(`[data-col-id='${key}']`);\n        if (deltaX) {\n          domNodes?.forEach(domNode => {\n            animate(domNode, deltaX, 0);\n          });\n        }\n      }\n    });\n    rsStore.oldColumnBoundingBox = null;\n  }\n};\n\n/**\n * Handles animations for rows and columns\n * The animations are triggered based on changes to specific state properties:\n *\n * ### Row Animation Triggers\n *   - {@link State.filterExpression}\n *   - search text\n *   - {@link State.sortingOrder}\n *   - {@link State.groups}\n *   - {@link State.refresh}\n *   - {@link State.selectedHeightOption}\n *\n * ### Column Animation Triggers\n *   - {@link State.freezeColumns}\n *   - {@link State.colOrder}\n *   - {@link State.hiddenColumns}\n *   - {@link State.columnWidths}\n *   - {@link State.refresh}\n *   - {@link RsStore.skipColumnAnimationOnNextRun}\n */\nexport default () => {\n  const memoizedRowAnimation = withMemoization(rowAnimation);\n  const memoizedColumnAnimation = withMemoization(columnAnimation);\n\n  return function execute(featureProps: FeatureProps) {\n    const state = featureProps.getState();\n    memoizedRowAnimation(\n      [featureProps],\n      [\n        state.filterExpression,\n        // @ts-expect-error Property 'searchText' does not exist on type 'State' but exists on view.state\n        state.searchText,\n        state.sortingOrder,\n        state.groups,\n        state.refresh,\n        state.selectedHeightOption\n      ]\n    );\n    memoizedColumnAnimation(\n      [featureProps],\n      [\n        state.freezeColumns,\n        state.colOrder,\n        state.hiddenColumns,\n        state.columnWidths,\n        state.refresh,\n        featureProps.getRsStore().skipColumnAnimationOnNextRun\n      ]\n    );\n  };\n};\n"]}

package/lib/src/core/features/uIFeatures/afterRender/columnSizing/autoSize.d.ts

@@ -0,0 +1,29 @@
+import type Column from '../../../../generators/ColumnGenerator';
+import type View from '../../../../generators/ViewGenerator';
+/**
+ * Calculates the width of column based on their content size. If a column already has a width specified in {@link FieldDef.width} or through {@link column.getPersonalizedWidth personalization}, then that width will be honored over content size width.
+ *
+ * @param column - A column object representing column in the view.
+ * @param domContainer - The HTML element that acts as the container for RS.
+ * @param forceAutoSize - A boolean flag that indicates whether to force a recalculation of column widths.
+ * @returns column width in pixels.
+ */
+export declare function autoSizeOfColumn(column: Column, domContainer: NonNullable<View['domContainer']>, forceAutoSize?: boolean): number;
+/**
+ * Calculates the maximum width available in the dom container
+ * @param domContainer The HTML element that acts as the container for RS.
+ * @returns Maximum available width.
+ */
+export declare function getMaxAvailableWidth(domContainer: NonNullable<View['domContainer']>): number;
+/**
+ * Calculates the width of columns based on their content size. If a column already has a width specified in {@link FieldDef.width} or through {@link column.getPersonalizedWidth personalization}, then that width will be honored over content size width..
+ *
+ * @param columns - An array of `Column` objects representing the columns in the view.
+ * @param domContainer - The HTML element that acts as the container for RS.
+ * @param reset - A boolean flag that indicates whether to force a recalculation of column widths.
+ * @returns An object containing width for each column.
+ */
+export declare function autoSizeOfColumns(columns: Column[], domContainer: NonNullable<View['domContainer']>, reset?: boolean): {
+    [fieldId: string]: number;
+};
+//# sourceMappingURL=autoSize.d.ts.map

package/lib/src/core/features/uIFeatures/afterRender/columnSizing/autoSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoSize.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/features/uIFeatures/afterRender/columnSizing/autoSize.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,MAAM,wCAAwC,CAAC;AACjE,OAAO,KAAK,IAAI,MAAM,sCAAsC,CAAC;AAO7D;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,EAC/C,aAAa,UAAQ,UA0CtB;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,UAmBnF;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,EAAE,EACjB,YAAY,EAAE,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,EAC/C,KAAK,CAAC,EAAE,OAAO;;EA8BhB"}

package/lib/src/core/features/uIFeatures/afterRender/columnSizing/autoSize.js

@@ -0,0 +1,114 @@
+import { rowSelectColumnMeta } from '../../../../constants';
+import { getScrollbarWidth } from '../../../../utils/util';
+const GROUP_ICON_WIDTH = 24;
+/**
+ * Calculates the width of column based on their content size. If a column already has a width specified in {@link FieldDef.width} or through {@link column.getPersonalizedWidth personalization}, then that width will be honored over content size width.
+ *
+ * @param column - A column object representing column in the view.
+ * @param domContainer - The HTML element that acts as the container for RS.
+ * @param forceAutoSize - A boolean flag that indicates whether to force a recalculation of column widths.
+ * @returns column width in pixels.
+ */
+export function autoSizeOfColumn(column, domContainer, forceAutoSize = false) {
+    if (!forceAutoSize) {
+        // This will be executed in case of reset width
+        const personalizedWidth = column.getPersonalizedWidth();
+        if (personalizedWidth)
+            return personalizedWidth;
+        if (column.field.width)
+            return column.field.width;
+    }
+    // Condition for double click event triggered to autosize the column
+    /* Autosize calculations begin */
+    const cells = domContainer.querySelectorAll(`[data-col-id="${column.field.id}"]`);
+    const holder = document.createElement('div');
+    holder.style.width = '100000px'; // some very high number
+    const span = document.createElement('span');
+    holder.appendChild(span);
+    domContainer.appendChild(holder);
+    cells.forEach(cell => {
+        const row = document.createElement('div');
+        row.style.display = 'table-row';
+        cell.childNodes.forEach(child => row.appendChild(child.cloneNode(true)));
+        span.appendChild(row);
+    });
+    let autoSize = Math.ceil(span.getBoundingClientRect().width);
+    const iconsPlaceholder = domContainer.querySelector(`.header .cell[data-col-id="${column.field.id}"] .icons-ph`);
+    const groupIconPlaceholder = domContainer.querySelector(`.show-expand-collapse-all .row .cell[data-col-id="${column.field.id}"]`);
+    if (iconsPlaceholder) {
+        autoSize += iconsPlaceholder.offsetWidth;
+    }
+    if (groupIconPlaceholder) {
+        autoSize += GROUP_ICON_WIDTH;
+    }
+    domContainer.removeChild(holder);
+    // Increased spacing style width by 1px to account for offsetWidth rounding off, this was causing truncation.
+    autoSize += 17; // 17px for Spacing styles applied (Fetching applied styles is costly, so keeping some visible space)
+    // Allow columns to autosize till a restricted max width
+    return column.field.maxWidth && autoSize > column.field.maxWidth
+        ? column.field.maxWidth
+        : autoSize;
+}
+/**
+ * Calculates the maximum width available in the dom container
+ * @param domContainer The HTML element that acts as the container for RS.
+ * @returns Maximum available width.
+ */
+export function getMaxAvailableWidth(domContainer) {
+    let width = domContainer.clientWidth - getScrollbarWidth();
+    const firstCell = domContainer.querySelector('.cell');
+    if (!firstCell) {
+        return width;
+    }
+    let element = firstCell.parentElement;
+    let style = null;
+    let margin = 0;
+    let padding = 0;
+    while (element !== domContainer.parentElement) {
+        // @ts-expect-error Property 'currentStyle' does not exist on type 'HTMLElement' This was used for IE browser initially. Check if it can be removed.
+        style = element.currentStyle || window.getComputedStyle(element);
+        margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+        padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+        width -= padding + margin + element.offsetWidth - element.clientWidth;
+        element = element.parentElement;
+    }
+    return width;
+}
+/**
+ * Calculates the width of columns based on their content size. If a column already has a width specified in {@link FieldDef.width} or through {@link column.getPersonalizedWidth personalization}, then that width will be honored over content size width..
+ *
+ * @param columns - An array of `Column` objects representing the columns in the view.
+ * @param domContainer - The HTML element that acts as the container for RS.
+ * @param reset - A boolean flag that indicates whether to force a recalculation of column widths.
+ * @returns An object containing width for each column.
+ */
+export function autoSizeOfColumns(columns, domContainer, reset) {
+    let totalCalculatedWidth = 0;
+    const columnAutoSizes = {};
+    const remainingAvailableWidth = getMaxAvailableWidth(domContainer);
+    columns.forEach(column => {
+        if (!column.hidden) {
+            if (!(column.currentWidth && reset === undefined)) {
+                // always calculate the content based width for row selection column because it's width will change depending on if grouping is applied or not.
+                const forceAutosize = column.field.id === rowSelectColumnMeta.field.id || !reset;
+                const autoSize = autoSizeOfColumn(column, domContainer, forceAutosize);
+                columnAutoSizes[column.field.id] = autoSize;
+                totalCalculatedWidth += autoSize;
+            }
+            else {
+                totalCalculatedWidth += column.currentWidth;
+            }
+        }
+    });
+    const extraSpace = remainingAvailableWidth - totalCalculatedWidth;
+    if (extraSpace <= 0 || Number.isNaN(extraSpace))
+        return columnAutoSizes;
+    const columnToFillRemainingSpace = columns.find(c => c.field.fillAvailableSpace);
+    if (columnToFillRemainingSpace && !columnToFillRemainingSpace.hidden) {
+        columnAutoSizes[columnToFillRemainingSpace.field.id] =
+            (columnAutoSizes[columnToFillRemainingSpace.field.id] ??
+                columnToFillRemainingSpace.currentWidth) + extraSpace;
+    }
+    return columnAutoSizes;
+}
+//# sourceMappingURL=autoSize.js.map

package/lib/src/core/features/uIFeatures/afterRender/columnSizing/autoSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autoSize.js","sourceRoot":"","sources":["../../../../../../../src/core/features/uIFeatures/afterRender/columnSizing/autoSize.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ColumnResizePayload } from '../../../../actions/actions.types';\nimport { rowSelectColumnMeta } from '../../../../constants';\nimport type Column from '../../../../generators/ColumnGenerator';\nimport type View from '../../../../generators/ViewGenerator';\nimport { getScrollbarWidth } from '../../../../utils/util';\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport type { FieldDef } from '../../../../../../types/Meta.types';\n\nconst GROUP_ICON_WIDTH = 24;\n\n/**\n * Calculates the width of column based on their content size. If a column already has a width specified in {@link FieldDef.width} or through {@link column.getPersonalizedWidth personalization}, then that width will be honored over content size width.\n *\n * @param column - A column object representing column in the view.\n * @param domContainer - The HTML element that acts as the container for RS.\n * @param forceAutoSize - A boolean flag that indicates whether to force a recalculation of column widths.\n * @returns column width in pixels.\n */\nexport function autoSizeOfColumn(\n  column: Column,\n  domContainer: NonNullable<View['domContainer']>,\n  forceAutoSize = false\n) {\n  if (!forceAutoSize) {\n    // This will be executed in case of reset width\n    const personalizedWidth = column.getPersonalizedWidth();\n    if (personalizedWidth) return personalizedWidth;\n    if (column.field.width) return column.field.width;\n  }\n  // Condition for double click event triggered to autosize the column\n  /* Autosize calculations begin */\n  const cells = domContainer.querySelectorAll(`[data-col-id=\"${column.field.id}\"]`);\n  const holder = document.createElement('div');\n  holder.style.width = '100000px'; // some very high number\n  const span = document.createElement('span');\n  holder.appendChild(span);\n  domContainer.appendChild(holder);\n  cells.forEach(cell => {\n    const row = document.createElement('div');\n    row.style.display = 'table-row';\n    cell.childNodes.forEach(child => row.appendChild(child.cloneNode(true)));\n    span.appendChild(row);\n  });\n  let autoSize = Math.ceil(span.getBoundingClientRect().width);\n  const iconsPlaceholder = domContainer.querySelector<HTMLElement>(\n    `.header .cell[data-col-id=\"${column.field.id}\"] .icons-ph`\n  );\n  const groupIconPlaceholder = domContainer.querySelector<HTMLElement>(\n    `.show-expand-collapse-all .row .cell[data-col-id=\"${column.field.id}\"]`\n  );\n  if (iconsPlaceholder) {\n    autoSize += iconsPlaceholder.offsetWidth;\n  }\n  if (groupIconPlaceholder) {\n    autoSize += GROUP_ICON_WIDTH;\n  }\n  domContainer.removeChild(holder);\n  // Increased spacing style width by 1px to account for offsetWidth rounding off, this was causing truncation.\n  autoSize += 17; // 17px for Spacing styles applied (Fetching applied styles is costly, so keeping some visible space)\n  // Allow columns to autosize till a restricted max width\n  return column.field.maxWidth && autoSize > column.field.maxWidth\n    ? column.field.maxWidth\n    : autoSize;\n}\n\n/**\n * Calculates the maximum width available in the dom container\n * @param domContainer The HTML element that acts as the container for RS.\n * @returns Maximum available width.\n */\nexport function getMaxAvailableWidth(domContainer: NonNullable<View['domContainer']>) {\n  let width = domContainer.clientWidth - getScrollbarWidth();\n  const firstCell = domContainer.querySelector('.cell');\n  if (!firstCell) {\n    return width;\n  }\n  let element = firstCell.parentElement!;\n  let style = null;\n  let margin = 0;\n  let padding = 0;\n  while (element !== domContainer.parentElement) {\n    // @ts-expect-error Property 'currentStyle' does not exist on type 'HTMLElement' This was used for IE browser initially. Check if it can be removed.\n    style = element.currentStyle || window.getComputedStyle(element);\n    margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n    padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);\n    width -= padding + margin + element.offsetWidth - element.clientWidth;\n    element = element.parentElement!;\n  }\n  return width;\n}\n\n/**\n * Calculates the width of columns based on their content size. If a column already has a width specified in {@link FieldDef.width} or through {@link column.getPersonalizedWidth personalization}, then that width will be honored over content size width..\n *\n * @param columns - An array of `Column` objects representing the columns in the view.\n * @param domContainer - The HTML element that acts as the container for RS.\n * @param reset - A boolean flag that indicates whether to force a recalculation of column widths.\n * @returns An object containing width for each column.\n */\nexport function autoSizeOfColumns(\n  columns: Column[],\n  domContainer: NonNullable<View['domContainer']>,\n  reset?: boolean\n) {\n  let totalCalculatedWidth = 0;\n  const columnAutoSizes: ColumnResizePayload['data'] = {};\n\n  const remainingAvailableWidth = getMaxAvailableWidth(domContainer);\n\n  columns.forEach(column => {\n    if (!column.hidden) {\n      if (!(column.currentWidth && reset === undefined)) {\n        // always calculate the content based width for row selection column because it's width will change depending on if grouping is applied or not.\n        const forceAutosize = column.field.id === rowSelectColumnMeta.field.id || !reset;\n        const autoSize = autoSizeOfColumn(column, domContainer, forceAutosize);\n        columnAutoSizes[column.field.id] = autoSize;\n        totalCalculatedWidth += autoSize;\n      } else {\n        totalCalculatedWidth += column.currentWidth;\n      }\n    }\n  });\n  const extraSpace = remainingAvailableWidth - totalCalculatedWidth;\n  if (extraSpace <= 0 || Number.isNaN(extraSpace)) return columnAutoSizes;\n  const columnToFillRemainingSpace = columns.find(c => c.field.fillAvailableSpace);\n\n  if (columnToFillRemainingSpace && !columnToFillRemainingSpace.hidden) {\n    columnAutoSizes[columnToFillRemainingSpace.field.id] =\n      (columnAutoSizes[columnToFillRemainingSpace.field.id] ??\n        columnToFillRemainingSpace.currentWidth) + extraSpace;\n  }\n  return columnAutoSizes;\n}\n"]}

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

@@ -0,0 +1,38 @@
+import type { OmitStrict } from '@pega/cosmos-react-core';
+import type { FeatureProps } from '../../../featureFactory';
+/**
+ * Executes the autosizing feature on all the columns. It dispatches an action that updates {@link State.columnWidths} slice with the calculated widths for all the columns.
+ * @param param featureProps
+ * @returns
+ */
+export declare function runColumnSizing([{ getState, getView, getRsStore, dispatch }]: [
+    featureProps: OmitStrict<FeatureProps, 'getOriginalState' | 'getRsProps'>
+]): void;
+/**
+ * Manages the autosizing feature of columns in the view. This includes the following actions:
+ * 1. **Executing Autosize for All Columns**:
+ *
+ *  This action is triggered when any of the following properties change:
+ *  - {@link State.personalization.active}
+ *  - {@link View.rows}
+ *  - {@link RsStore.autosizeTriggered}
+ *  - {@link State.refresh}
+ *  - {@link State.hiddenColumns}
+ *  - {@link State.forceUpdateFeatures.forceCalculateAutoWidth}
+ * 2. **Resetting Autosize Status**:
+ *
+ *  This action is triggered when any of the following properties change:
+ *  - {@link State.personalization.active}
+ *  - {@link State.refresh}
+ *  - {@link State.hiddenColumns}
+ *  - {@link State.customFields}
+ *
+ * 3. **Executing Autosize on Row Selection Column**:
+ *
+ *    This action is triggered when any of the following properties change:
+ *    - {@link State.groups}
+ *    - {@link State.responsive.sm}
+ */
+declare const _default: () => (featureProps: FeatureProps) => void;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/features/uIFeatures/afterRender/columnSizing/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAU1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAwD5D;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,EAAE;IAC7E,YAAY,EAAE,UAAU,CAAC,YAAY,EAAE,kBAAkB,GAAG,YAAY,CAAC;CAC1E,QA2DA;AAWD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;6CAKqC,YAAY;AAJpD,wBAwBE"}