@highcharts/grid-pro 2.2.0 → 2.3.0

package/es-modules/Grid/Core/UI/SvgIcons.js

@@ -21,20 +21,23 @@
  *
  * */
 import Globals from '../Globals.js';
+import { setHTMLContent } from '../GridUtils.js';
+import { defined } from '../../../Shared/Utilities.js';
 /**
  * The registry of all Grid Svg icons with their SVG path data.
  */
 export const icons = {
     filter: {
-        width: 16,
-        height: 14,
+        width: 12,
+        height: 12,
         children: [{
-                d: 'M2.2571 2.77791C1.75287 2.21437 1.50076 1.93259 1.49125 1.69312C1.48299 1.48509 1.57238 1.28515 1.73292 1.15259C1.91773 1 2.29583 1 3.05202 1H12.9473C13.7035 1 14.0816 1 14.2664 1.15259C14.427 1.28515 14.5163 1.48509 14.5081 1.69312C14.4986 1.93259 14.2465 2.21437 13.7422 2.77791L9.93808 7.02962C9.83756 7.14196 9.78731 7.19813 9.75147 7.26205C9.71969 7.31875 9.69637 7.37978 9.68225 7.44323C9.66633 7.51476 9.66633 7.59013 9.66633 7.74087V11.3056C9.66633 11.436 9.66633 11.5011 9.64531 11.5575C9.62673 11.6073 9.59651 11.6519 9.55717 11.6877C9.51265 11.7281 9.45213 11.7524 9.33108 11.8008L7.06441 12.7074C6.81938 12.8054 6.69687 12.8545 6.59852 12.834C6.51251 12.8161 6.43704 12.765 6.3885 12.6918C6.333 12.6081 6.333 12.4762 6.333 12.2122V7.74087C6.333 7.59013 6.333 7.51476 6.31708 7.44323C6.30296 7.37978 6.27964 7.31875 6.24786 7.26205C6.21203 7.19813 6.16177 7.14196 6.06126 7.02962L2.2571 2.77791Z'
+                d: 'M 1.69283 2.38107 C 1.31465 1.89803 1.12557 1.65651 1.11844 1.45125 C 1.11224 1.27293 1.17929 1.10156 1.29969 0.98793 C 1.4383 0.85714 1.72187 0.85714 2.28902 0.85714 H 9.71048 C 10.27763 0.85714 10.5612 0.85714 10.6998 0.98793 C 10.82025 1.10156 10.88722 1.27293 10.88108 1.45125 C 10.87395 1.65651 10.68487 1.89803 10.30665 2.38107 L 7.45356 6.02539 C 7.37817 6.12168 7.34048 6.16983 7.3136 6.22461 C 7.28977 6.27321 7.27228 6.32553 7.26169 6.37991 C 7.24975 6.44122 7.24975 6.50583 7.24975 6.63503 V 9.69051 C 7.24975 9.80229 7.24975 9.85809 7.23398 9.90643 C 7.22005 9.94911 7.19738 9.98734 7.16788 10.01803 C 7.13449 10.05266 7.0891 10.07349 6.99831 10.11497 L 5.29831 10.89206 C 5.11454 10.97606 5.02265 11.01814 4.94889 11.00057 C 4.88438 10.98523 4.82778 10.94143 4.79137 10.87869 C 4.74975 10.80694 4.74975 10.69389 4.74975 10.4676 V 6.63503 C 4.74975 6.50583 4.74975 6.44122 4.73781 6.37991 C 4.72722 6.32553 4.70973 6.27321 4.6859 6.22461 C 4.65902 6.16983 4.62133 6.12168 4.54594 6.02539 L 1.69283 2.38107 Z'
             }]
     },
     menu: {
-        width: 4,
+        width: 8,
         height: 12,
+        viewBox: '0 0 4 12',
         children: [{
                 d: 'M2.00016 6.66675C2.36835 6.66675 2.66683 6.36827 2.66683 6.00008C2.66683 5.63189 2.36835 5.33341 2.00016 5.33341C1.63197 5.33341 1.3335 5.63189 1.3335 6.00008C1.3335 6.36827 1.63197 6.66675 2.00016 6.66675Z'
             }, {
@@ -43,47 +46,145 @@ export const icons = {
                 d: 'M2.00016 11.3334C2.36835 11.3334 2.66683 11.0349 2.66683 10.6667C2.66683 10.2986 2.36835 10.0001 2.00016 10.0001C1.63197 10.0001 1.3335 10.2986 1.3335 10.6667C1.3335 11.0349 1.63197 11.3334 2.00016 11.3334Z'
             }]
     },
-    chevronRight: {
-        width: 6,
-        height: 10,
-        children: [{
-                d: 'M1 9L5 5L1 1',
-                'stroke-width': 1.34
-            }]
-    },
     checkmark: {
         width: 12,
-        height: 9,
+        height: 12,
         children: [{
-                d: 'M11.3332 1L3.99984 8.33333L0.666504 5'
+                d: 'M 11.3332 1.33333 L 3.99984 11.11111 L 0.6665 6.66667'
             }]
     },
-    upDownArrows: {
-        width: 14,
+    arrowUpDown: {
+        width: 12,
         height: 12,
         children: [{
-                d: 'M3.66667 0.666748V11.3334M3.66667 11.3334L1 8.66675M3.66667 11.3334L6.33333 8.66675M10.3333 11.3334V0.666748M10.3333 0.666748L7.66667 3.33341M10.3333 0.666748L13 3.33341'
+                d: 'M 3.14286 0.66675 V 11.3334 M 3.14286 11.3334 L 0.85714 8.66675 M 3.14286 11.3334 L 5.42857 8.66675 M 8.85711 11.3334 V 0.66675 M 8.85711 0.66675 L 6.57143 3.33341 M 8.85711 0.66675 L 11.14286 3.33341'
             }]
     },
-    sortAsc: {
-        width: 14,
+    arrowUp: {
+        width: 12,
         height: 12,
         children: [{
-                d: 'M3.66667 0.666748V11.3334M3.66667 11.3334L1 8.66675M3.66667 11.3334L6.33333 8.66675',
+                d: 'M 3.14286 0.66675 V 11.3334 M 3.14286 11.3334 L 0.85714 8.66675 M 3.14286 11.3334 L 5.42857 8.66675',
                 opacity: 0.2
             }, {
-                d: 'M 10.3333 11.3334 V 0.6667 M 10.3333 0.6667 L 7.6667 3.3334 M 10.3333 0.6667 L 13 3.3334'
+                d: 'M 8.85711 11.3334 V 0.6667 M 8.85711 0.6667 L 6.57146 3.3334 M 8.85711 0.6667 L 11.14286 3.3334'
             }]
     },
-    sortDesc: {
-        width: 14,
+    arrowDown: {
+        width: 12,
         height: 12,
         children: [{
-                d: 'M3.66667 0.666748V11.3334M3.66667 11.3334L1 8.66675M3.66667 11.3334L6.33333 8.66675'
+                d: 'M 3.14286 0.66675 V 11.3334 M 3.14286 11.3334 L 0.85714 8.66675 M 3.14286 11.3334 L 5.42857 8.66675'
             }, {
-                d: 'M 10.3333 11.3334 V 0.6667 M 10.3333 0.6667 L 7.6667 3.3334 M 10.3333 0.6667 L 13 3.3334',
+                d: 'M 8.85711 11.3334 V 0.6667 M 8.85711 0.6667 L 6.57146 3.3334 M 8.85711 0.6667 L 11.14286 3.3334',
                 opacity: 0.2
             }]
+    },
+    doubleChevronLeft: {
+        width: 12,
+        height: 12,
+        children: [{
+                d: 'M 6 10.8 L 1.2 6 L 6 1.2 M 10.8 10.8 L 6 6 L 10.8 1.2',
+                'stroke-width': 1.34
+            }]
+    },
+    chevronLeft: {
+        width: 12,
+        height: 12,
+        children: [{
+                d: 'M 7.5 10.8 L 1.5 6 L 7.5 1.2',
+                'stroke-width': 1.34
+            }]
+    },
+    doubleChevronRight: {
+        width: 12,
+        height: 12,
+        children: [{
+                d: 'M 6 1.2 L 10.8 6 L 6 10.8 M 1.2 1.2 L 6 6 L 1.2 10.8',
+                'stroke-width': 1.34
+            }]
+    },
+    chevronRight: {
+        width: 12,
+        height: 12,
+        children: [{
+                d: 'M 4.5 1.2 L 10.5 6 L 4.5 10.8',
+                'stroke-width': 1.34
+            }]
+    },
+    copy: {
+        // Imported from a 24x24 source icon and scaled down via viewBox.
+        width: 16,
+        height: 16,
+        viewBox: '0 0 24 24',
+        children: [{
+                d: 'M5 15C4.06812 15 3.60218 15 3.23463 14.8478C2.74458 14.6448 2.35523 14.2554 2.15224 13.7654C2 13.3978 2 12.9319 2 12V5.2C2 4.0799 2 3.51984 2.21799 3.09202C2.40973 2.71569 2.71569 2.40973 3.09202 2.21799C3.51984 2 4.0799 2 5.2 2H12C12.9319 2 13.3978 2 13.7654 2.15224C14.2554 2.35523 14.6448 2.74458 14.8478 3.23463C15 3.60218 15 4.06812 15 5M12.2 22H18.8C19.9201 22 20.4802 22 20.908 21.782C21.2843 21.5903 21.5903 21.2843 21.782 20.908C22 20.4802 22 19.9201 22 18.8V12.2C22 11.0799 22 10.5198 21.782 10.092C21.5903 9.71569 21.2843 9.40973 20.908 9.21799C20.4802 9 19.9201 9 18.8 9H12.2C11.0799 9 10.5198 9 10.092 9.21799C9.71569 9.40973 9.40973 9.71569 9.21799 10.092C9 10.5198 9 11.0799 9 12.2V18.8C9 19.9201 9 20.4802 9.21799 20.908C9.40973 21.2843 9.71569 21.5903 10.092 21.782C10.5198 22 11.0799 22 12.2 22Z',
+                'stroke-width': 2
+            }]
+    },
+    clipboard: {
+        // Imported from a 24x24 source icon and scaled down via viewBox.
+        width: 16,
+        height: 16,
+        viewBox: '0 0 24 24',
+        children: [{
+                d: 'M16 4C16.93 4 17.395 4 17.7765 4.10222C18.8117 4.37962 19.6204 5.18827 19.8978 6.22354C20 6.60504 20 7.07003 20 8V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V8C4 7.07003 4 6.60504 4.10222 6.22354C4.37962 5.18827 5.18827 4.37962 6.22354 4.10222C6.60504 4 7.07003 4 8 4M9.6 6H14.4C14.9601 6 15.2401 6 15.454 5.89101C15.6422 5.79513 15.7951 5.64215 15.891 5.45399C16 5.24008 16 4.96005 16 4.4V3.6C16 3.03995 16 2.75992 15.891 2.54601C15.7951 2.35785 15.6422 2.20487 15.454 2.10899C15.2401 2 14.9601 2 14.4 2H9.6C9.03995 2 8.75992 2 8.54601 2.10899C8.35785 2.20487 8.20487 2.35785 8.10899 2.54601C8 2.75992 8 3.03995 8 3.6V4.4C8 4.96005 8 5.24008 8.10899 5.45399C8.20487 5.64215 8.35785 5.79513 8.54601 5.89101C8.75992 6 9.03995 6 9.6 6Z',
+                'stroke-width': 2
+            }]
+    },
+    plus: {
+        width: 16,
+        height: 16,
+        viewBox: '0 0 24 24',
+        children: [{
+                d: 'M12 5V19M5 12H19',
+                'stroke-width': 2
+            }]
+    },
+    trash: {
+        width: 16,
+        height: 16,
+        viewBox: '0 0 24 24',
+        children: [{
+                d: 'M16 6V5.2C16 4.0799 16 3.51984 15.782 3.09202C15.5903 2.71569 15.2843 2.40973 14.908 2.21799C14.4802 2 13.9201 2 12.8 2H11.2C10.0799 2 9.51984 2 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8 3.51984 8 4.0799 8 5.2V6M10 11.5V16.5M14 11.5V16.5M3 6H21M19 6V17.2C19 18.8802 19 19.7202 18.673 20.362C18.3854 20.9265 17.9265 21.3854 17.362 21.673C16.7202 22 15.8802 22 14.2 22H9.8C8.11984 22 7.27976 22 6.63803 21.673C6.07354 21.3854 5.6146 20.9265 5.32698 20.362C5 19.7202 5 18.8802 5 17.2V6',
+                'stroke-width': 2
+            }]
+    },
+    addRowAbove: {
+        width: 16,
+        height: 16,
+        viewBox: '0 0 24 24',
+        children: [{
+                d: 'M22.654 16.657H1m21.654-6.048H1m0-6.143v12.433c0 2.033 0 3.05.393 3.825a3.619 3.619 0 0 0 1.577 1.587c.772.395 1.783.395 3.804.395H16.88c2.021 0 3.032 0 3.804-.395a3.619 3.619 0 0 0 1.577-1.587c.394-.776.394-1.792.394-3.825V4.466m-14.068-.24h6.462M11.822 1v6.462',
+                'stroke-width': 1.34
+            }]
+    },
+    addRowBelow: {
+        width: 16,
+        height: 16,
+        viewBox: '0 0 24 24',
+        children: [{
+                d: 'M1 7.049h21.654M1 13.097h21.654m0 6.143V6.807c0-2.033 0-3.05-.394-3.825a3.619 3.619 0 0 0-1.577-1.586C19.911 1 18.901 1 16.88 1H6.774c-2.02 0-3.031 0-3.803.396a3.62 3.62 0 0 0-1.578 1.586C1 3.758 1 4.774 1 6.807V19.24m14.068.24H8.606m3.226 3.226v-6.462',
+                'stroke-width': 1.34
+            }]
+    },
+    addColumnLeft: {
+        width: 16,
+        height: 16,
+        viewBox: '0 0 24 24',
+        children: [{
+                d: 'M16.657 1v21.654M10.61 1v21.654m-6.143 0h12.433c2.033 0 3.05 0 3.825-.394a3.62 3.62 0 0 0 1.587-1.577c.395-.772.395-1.782.395-3.804V6.774c0-2.02 0-3.031-.395-3.803a3.62 3.62 0 0 0-1.587-1.578C19.948 1 18.932 1 16.9 1H4.466m-.24 14.068V8.606M1 11.832h6.462',
+                'stroke-width': 1.34
+            }]
+    },
+    addColumnRight: {
+        width: 16,
+        height: 16,
+        viewBox: '0 0 24 24',
+        children: [{
+                d: 'M7.049 22.654V1m6.048 21.654V1m6.143 0H6.807c-2.033 0-3.05 0-3.825.393a3.62 3.62 0 0 0-1.586 1.578C1 3.743 1 4.753 1 6.774V16.88c0 2.021 0 3.032.396 3.804.348.68.903 1.231 1.586 1.577.776.394 1.792.394 3.825.394H19.24m.24-14.068v6.462m3.226-3.226h-6.462',
+                'stroke-width': 1.34
+            }]
     }
 };
 /**
@@ -101,20 +202,43 @@ export const pathDefaults = {
 *
 * */
 /**
- * Creates an SVG icon element from the SvgIcons registry.
- *
- * @param name
- * The name of the icon from SvgIcons registry
+ * Parses a raw SVG markup string into an SVG element and applies a class.
  *
+ * @param svgString
+ * Raw SVG markup
  * @param className
- * CSS class name for the SVG element (default: 'hcg-icon')
+ * CSS class name for the SVG element
+ * @returns
+ * SVG element, or a fallback empty SVG if parsing fails
+ */
+function parseSvgString(svgString, className) {
+    const div = document.createElement('div');
+    setHTMLContent(div, svgString);
+    const svg = div.firstElementChild;
+    if (!svg || svg.namespaceURI !== 'http://www.w3.org/2000/svg') {
+        const fallback = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        fallback.setAttribute('width', '16');
+        fallback.setAttribute('height', '16');
+        fallback.classList.add(className);
+        return fallback;
+    }
+    const clone = svg.cloneNode(true);
+    clone.classList.add(className);
+    return clone;
+}
+/**
+ * Builds an SVG element from an SVG definition object.
  *
+ * @param def
+ * SVG definition from the registry
+ * @param className
+ * CSS class name for the SVG element
  * @returns
- * SVG element with the specified icon
+ * SVG element
  */
-export function createGridIcon(name, className = Globals.getClassName('icon')) {
+function createSvgFromDefinition(def, className) {
     const createElement = (type) => document.createElementNS('http://www.w3.org/2000/svg', type);
-    const { width = 16, height = 16, viewBox, fill, children } = icons[name];
+    const { width = 16, height = 16, viewBox, fill, children } = def;
     const svg = createElement('svg');
     svg.setAttribute('width', width.toString());
     svg.setAttribute('height', height.toString());
@@ -137,6 +261,54 @@ export function createGridIcon(name, className = Globals.getClassName('icon')) {
     svg.classList.add(className);
     return svg;
 }
+/**
+ * Looks up an icon by name, checking custom icons first and then falling
+ * back to the built-in registry.
+ *
+ * @param name
+ * Icon name to look up.
+ *
+ * @param customIcons
+ * Optional map of icon names provided via `rendering.icons`.
+ *
+ * @returns
+ * Icon registry value (definition or raw SVG string), or `undefined` if
+ * neither a custom nor a built-in icon exists for the given name.
+ */
+export function getIconFromRegistry(name, customIcons) {
+    if (customIcons && Object.prototype.hasOwnProperty.call(customIcons, name)) {
+        return customIcons[name];
+    }
+    return icons[name];
+}
+/**
+ * Creates an SVG icon element from the SvgIcons registry or a custom
+ * registry. When `customIcons` is provided, `name` can be any registered
+ * name (built-in or custom). When omitted, only built-in `GridIconName`
+ * values are allowed. The SVG element always receives the default icon
+ * class name from `Globals`.
+ *
+ * @param name
+ * The name of the icon (built-in or from registry)
+ *
+ * @param customIcons
+ * Optional custom icons map from `rendering.icons`. When provided, custom
+ * and override icons are used and arbitrary names are allowed.
+ *
+ * @returns
+ * SVG element with the specified icon
+ */
+export function createGridIcon(name, customIcons) {
+    const className = Globals.getClassName('icon');
+    const value = getIconFromRegistry(name, customIcons);
+    if (!defined(value)) {
+        return createSvgFromDefinition(icons.filter, className);
+    }
+    if (typeof value === 'string') {
+        return parseSvgString(value, className);
+    }
+    return createSvgFromDefinition(value, className);
+}
 /* *
  *
  *  Default Export
@@ -144,6 +316,7 @@ export function createGridIcon(name, className = Globals.getClassName('icon')) {
  * */
 export default {
     createGridIcon,
+    getIconFromRegistry,
     icons,
     pathDefaults
 };

package/es-modules/Grid/Core/UI/Toolbar.d.ts

@@ -1,3 +1,4 @@
+import type Grid from '../Grid';
 import type ToolbarButton from './ToolbarButton.js';
 interface Toolbar {
     /**
@@ -12,5 +13,9 @@ interface Toolbar {
      * The index of the focused button in the toolbar.
      */
     focusCursor: number;
+    /**
+     * Optional reference to the Grid instance (e.g. for icon registry).
+     */
+    grid?: Grid;
 }
 export default Toolbar;

package/es-modules/Grid/Core/UI/ToolbarButton.d.ts

@@ -1,7 +1,6 @@
 import type Toolbar from './Toolbar';
 import type Button from './Button';
 import type Popup from './Popup';
-import { GridIconName } from './SvgIcons.js';
 import { ClassNameKey } from '../Globals.js';
 declare class ToolbarButton implements Button {
     /**
@@ -51,9 +50,9 @@ declare class ToolbarButton implements Button {
      * Sets the icon for the button.
      *
      * @param icon
-     * The icon to set.
+     * The icon to set (built-in name or custom name from rendering.icons).
      */
-    setIcon(icon: GridIconName): void;
+    setIcon(icon: string): void;
     setActive(active: boolean): void;
     setHighlighted(highlighted: boolean): void;
     /**
@@ -67,13 +66,6 @@ declare class ToolbarButton implements Button {
      * The mouse event.
      */
     protected clickHandler(event: MouseEvent): void;
-    /**
-     * Renders the active indicator for the button.
-     *
-     * @param render
-     * Whether the active indicator should be rendered.
-     */
-    protected renderActiveIndicator(render: boolean): void;
     /**
      * Adds event listeners to the button.
      */
@@ -88,9 +80,9 @@ declare class ToolbarButton implements Button {
  */
 export interface ToolbarButtonOptions {
     /**
-     * The icon for the button.
+     * The icon for the button (built-in name or custom from rendering.icons).
      */
-    icon: GridIconName;
+    icon: string;
     /**
      * The class name key for the button.
      */

package/es-modules/Grid/Core/UI/ToolbarButton.js

@@ -60,7 +60,9 @@ class ToolbarButton {
         this.wrapper = wrapper;
         const button = this.buttonEl = makeHTMLElement('button', {
             className: (Globals.getClassName('button') +
-                (this.isActive ? ' active' : ''))
+                (this.isActive ?
+                    ' ' + Globals.getClassName('buttonSelected') :
+                    ''))
         }, wrapper);
         button.setAttribute('type', 'button');
         button.setAttribute('tabindex', '-1');
@@ -97,20 +99,20 @@ class ToolbarButton {
      * Sets the icon for the button.
      *
      * @param icon
-     * The icon to set.
+     * The icon to set (built-in name or custom name from rendering.icons).
      */
     setIcon(icon) {
         this.icon?.remove();
-        this.icon = createGridIcon(icon);
+        const grid = this.toolbar?.grid;
+        this.icon = createGridIcon(icon, grid?.options?.rendering?.icons);
         this.buttonEl?.appendChild(this.icon);
     }
     setActive(active) {
         this.isActive = active;
-        this.buttonEl?.classList.toggle('active', active);
-        this.renderActiveIndicator(active);
+        this.buttonEl?.classList.toggle(Globals.getClassName('buttonSelected'), active);
     }
     setHighlighted(highlighted) {
-        this.buttonEl?.classList.toggle('highlighted', highlighted);
+        this.buttonEl?.classList.toggle(Globals.getClassName('buttonHighlighted'), highlighted);
         const ariaExpanded = this.options.accessibility?.ariaExpanded;
         if (typeof ariaExpanded === 'boolean') {
             this.buttonEl?.setAttribute('aria-expanded', highlighted);
@@ -142,26 +144,6 @@ class ToolbarButton {
     clickHandler(event) {
         this.options.onClick?.(event, this);
     }
-    /**
-     * Renders the active indicator for the button.
-     *
-     * @param render
-     * Whether the active indicator should be rendered.
-     */
-    renderActiveIndicator(render) {
-        const button = this.buttonEl;
-        if (!button) {
-            return;
-        }
-        this.activeIndicator?.remove();
-        if (!render) {
-            delete this.activeIndicator;
-            return;
-        }
-        this.activeIndicator = makeHTMLElement('div', {
-            className: Globals.getClassName('toolbarButtonActiveIndicator')
-        }, button);
-    }
     /**
      * Adds event listeners to the button.
      */

package/es-modules/Grid/Pro/CellEditing/CellEditMode.d.ts

@@ -1,4 +1,4 @@
-import type DataTable from '../../../Data/DataTable';
+import type { CellType as DataTableCellType } from '../../../Data/DataTable';
 import type TableCell from '../../Core/Table/Body/TableCell';
 /**
  * Interface for the edit mode content in a cell. It can be implemented by
@@ -13,7 +13,7 @@ export interface EditModeContent<E extends HTMLElement = HTMLElement> {
     /**
      * Value of the edit mode cell content, parsed according to the column type.
      */
-    readonly value: DataTable.CellType;
+    readonly value: DataTableCellType;
     /**
      * Raw value of the edit mode cell content, in a string format.
      */

package/es-modules/Grid/Pro/CellEditing/CellEditing.js

@@ -15,8 +15,7 @@
  * */
 'use strict';
 import Globals from '../../Core/Globals.js';
-import U from '../../../Core/Utilities.js';
-const { fireEvent } = U;
+import { fireEvent } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -115,8 +114,8 @@ class CellEditing {
         const newValue = emContent.value;
         if (submit) {
             const validationErrors = [];
-            if (!vp.validator.validate(cell, validationErrors)) {
-                vp.validator.initErrorBox(cell, validationErrors);
+            if (!vp.validator?.validate(cell, validationErrors)) {
+                vp.validator?.initErrorBox(cell, validationErrors);
                 this.setA11yAttributes(false);
                 return false;
             }
@@ -125,17 +124,18 @@ class CellEditing {
             vp.validator.errorCell = void 0;
         }
         // Hide notification
-        this.viewport.validator.hide();
+        this.viewport.validator?.hide();
         // Hide input
         this.destroy();
         cell.htmlElement.classList.remove(Globals.getClassName('editedCell'));
         cell.htmlElement.focus();
         const isValueChanged = cell.value !== newValue;
-        void cell.setValue(submit ? newValue : cell.value, submit && isValueChanged);
-        if (isValueChanged) {
-            fireEvent(cell, 'stoppedEditing', { submit });
-        }
-        delete this.editedCell;
+        void cell.setValue(submit ? newValue : cell.value, submit && isValueChanged).then(() => {
+            if (isValueChanged) {
+                fireEvent(cell, 'stoppedEditing', { submit });
+            }
+            delete this.editedCell;
+        });
         return true;
     }
     setA11yAttributes(valid) {

package/es-modules/Grid/Pro/CellEditing/CellEditingComposition.js

@@ -19,9 +19,8 @@ import Globals from '../../Core/Globals.js';
 import CellEditing from './CellEditing.js';
 import CellRendererRegistry from '../CellRendering/CellRendererRegistry.js';
 import GU from '../../Core/GridUtils.js';
-import U from '../../../Core/Utilities.js';
+import { addEvent, merge, pushUnique } from '../../../Shared/Utilities.js';
 const { makeHTMLElement } = GU;
-const { addEvent, merge, pushUnique } = U;
 /* *
  *
  *  Composition

package/es-modules/Grid/Pro/CellRendering/CellRenderersComposition.d.ts

@@ -20,7 +20,7 @@ declare module '../../Core/Table/Column' {
         /**
          * The cell view renderer instance for the column.
          */
-        cellRenderer: CellRendererType;
+        cellRenderer?: CellRendererType;
     }
 }
 declare const _default: {

package/es-modules/Grid/Pro/CellRendering/CellRenderersComposition.js

@@ -15,8 +15,7 @@
 'use strict';
 import CellRendererRegistry from './CellRendererRegistry.js';
 import Globals from '../../Core/Globals.js';
-import U from '../../../Core/Utilities.js';
-const { addEvent, pushUnique } = U;
+import { addEvent, pushUnique } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Composition
@@ -62,6 +61,9 @@ function afterColumnInit() {
  * Formatted cell content.
  */
 function createCellContent(cell) {
+    if (!this.cellRenderer) {
+        throw new Error('Called cell renderer on uninitialized column.');
+    }
     return this.cellRenderer.render(cell);
 }
 /* *

package/es-modules/Grid/Pro/CellRendering/ContentTypes/CheckboxContent.d.ts

@@ -1,5 +1,5 @@
 import type CheckboxRenderer from '../Renderers/CheckboxRenderer';
-import type DataTable from '../../../../Data/DataTable';
+import type { CellType as DataTableCellType } from '../../../../Data/DataTable';
 import type { EditModeContent } from '../../CellEditing/CellEditMode';
 import type TableCell from '../../../Core/Table/Body/TableCell';
 import CellContentPro from '../CellContentPro.js';
@@ -19,7 +19,7 @@ declare class CheckboxContent extends CellContentPro implements EditModeContent
     protected add(parentElement?: HTMLElement): HTMLInputElement;
     update(): void;
     get rawValue(): string;
-    get value(): DataTable.CellType;
+    get value(): DataTableCellType;
     getMainElement(): HTMLInputElement;
     destroy(): void;
     private readonly onChange;

package/es-modules/Grid/Pro/CellRendering/ContentTypes/NumberInputContent.js

@@ -14,9 +14,8 @@
  * */
 'use strict';
 import CellContentPro from '../CellContentPro.js';
-import U from '../../../../Core/Utilities.js';
 import Globals from '../../../Core/Globals.js';
-const { defined } = U;
+import { defined } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Grid/Pro/CellRendering/ContentTypes/SelectContent.d.ts

@@ -1,4 +1,4 @@
-import type DataTable from '../../../../Data/DataTable';
+import type { CellType as DataTableCellType } from '../../../../Data/DataTable';
 import type { EditModeContent } from '../../CellEditing/CellEditMode';
 import type SelectRenderer from '../Renderers/SelectRenderer';
 import type TableCell from '../../../Core/Table/Body/TableCell';
@@ -44,7 +44,7 @@ declare class SelectContent extends CellContentPro implements EditModeContent {
     /**
      * Gets the value of the select element.
      */
-    get value(): DataTable.CellType;
+    get value(): DataTableCellType;
     /**
      * Gets the main element (select) of the content.
      * @returns The select element.

package/es-modules/Grid/Pro/CellRendering/ContentTypes/SparklineContent.js

@@ -16,8 +16,7 @@
 'use strict';
 import CellContentPro from '../CellContentPro.js';
 import Globals from '../../../Core/Globals.js';
-import U from '../../../../Core/Utilities.js';
-const { defined, merge } = U;
+import { defined, merge } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Grid/Pro/CellRendering/ContentTypes/TextInputContent.d.ts

@@ -1,4 +1,4 @@
-import type DataTable from '../../../../Data/DataTable';
+import type { CellType as DataTableCellType } from '../../../../Data/DataTable';
 import type { EditModeContent } from '../../CellEditing/CellEditMode';
 import type TableCell from '../../../Core/Table/Body/TableCell';
 import type TextInputRenderer from '../Renderers/TextInputRenderer';
@@ -36,7 +36,7 @@ declare class TextInputContent extends CellContentPro implements EditModeContent
     /**
      * Gets the value of the input element.
      */
-    get value(): DataTable.CellType;
+    get value(): DataTableCellType;
     /**
      * Converts the cell value to a string for the input.
      */

package/es-modules/Grid/Pro/CellRendering/ContentTypes/TextInputContent.js

@@ -15,9 +15,8 @@
  * */
 'use strict';
 import CellContentPro from '../CellContentPro.js';
-import U from '../../../../Core/Utilities.js';
 import Globals from '../../../Core/Globals.js';
-const { defined } = U;
+import { defined } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Grid/Pro/CellRendering/Renderers/CheckboxRenderer.js

@@ -17,8 +17,7 @@
 import { CellRenderer } from '../CellRenderer.js';
 import { registerRenderer } from '../CellRendererRegistry.js';
 import CheckboxContent from '../ContentTypes/CheckboxContent.js';
-import U from '../../../../Core/Utilities.js';
-const { merge } = U;
+import { merge } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Grid/Pro/CellRendering/Renderers/DateInputRenderer.js

@@ -17,8 +17,7 @@
 import { CellRenderer } from '../CellRenderer.js';
 import { registerRenderer } from '../CellRendererRegistry.js';
 import DateInputContent from '../ContentTypes/DateInputContent.js';
-import U from '../../../../Core/Utilities.js';
-const { merge } = U;
+import { merge } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class