@progress/kendo-react-editor 5.16.0-dev.202307211637 → 5.16.0

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-editor',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1689955755,
+    publishDate: 1690290162,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/tools/table-wizard/cellPropsUtils.d.ts

@@ -0,0 +1,36 @@
+import { EditorState, Transaction } from '@progress/kendo-editor-common';
+/**
+ * @hidden
+ */
+interface CellData {
+    applyToAll: boolean;
+    cellWidth: number | null;
+    widthUnit: string;
+    cellHeight: number | null;
+    heightUnit: string;
+    alignment: {
+        x: string;
+        y: string;
+    };
+    textControl: string;
+    backgroundColor?: string;
+    cellPadding: number | null;
+    borderWidth: number | null;
+    borderColor?: string;
+    borderStyle: string | null;
+    id: string;
+    className: string;
+}
+/**
+ * @hidden
+ */
+declare const initialCellData: CellData;
+/**
+ * @hidden
+ */
+declare const cellsDefaultData: (state: EditorState) => CellData;
+/**
+ * @hidden
+ */
+declare const applyCellsData: (state: EditorState, data: CellData) => Transaction;
+export { CellData, initialCellData, cellsDefaultData, applyCellsData };

package/dist/es/tools/table-wizard/cellPropsUtils.js

@@ -0,0 +1,203 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { htmlToFragment } from '@progress/kendo-editor-common';
+import { getUnit, parseStyle, selectedCells, setNodeStyle, tableCells } from './utils';
+import { parentNode } from '../utils';
+var colgroupAttr = 'k-colgroup-data';
+var cellsWidth = function (cells, table, $pos) {
+    var result = {
+        cellWidth: null,
+        widthUnit: ''
+    };
+    var tableNode = table.node;
+    var tablePos = $pos.start(table.depth);
+    if (!tableNode.attrs[colgroupAttr]) {
+        return result;
+    }
+    var width = new Set();
+    var value = '';
+    var colgroup = htmlToFragment(tableNode.attrs[colgroupAttr]).firstChild;
+    cells.forEach(function (cell) {
+        var $cell = tableNode.resolve(cell.pos - tablePos);
+        var row = $cell.parent;
+        var cellIndex = $cell.index();
+        var colSpan = 0;
+        for (var i = 0; i <= cellIndex; i++) {
+            colSpan += row.child(i).attrs.colspan;
+        }
+        var col = colgroup.children[colSpan - 1];
+        if (col) {
+            value = col.style.width;
+            width.add(value);
+        }
+    });
+    if (width.size === 1 && value) {
+        result.cellWidth = parseFloat(value) || null;
+        result.widthUnit = getUnit(value);
+    }
+    return result;
+};
+var cellsHeight = function (cells, table, $pos) {
+    var result = {
+        cellHeight: null,
+        heightUnit: ''
+    };
+    var tableNode = table.node;
+    var tablePos = $pos.start(table.depth);
+    var height = new Set();
+    var value = '';
+    cells.forEach(function (cell) {
+        var _a;
+        var $cell = tableNode.resolve(cell.pos - tablePos);
+        var row = $cell.parent;
+        value = parseStyle(((_a = row.attrs) === null || _a === void 0 ? void 0 : _a.style) || '').height || '';
+        height.add(value);
+    });
+    if (height.size === 1 && value) {
+        result.cellHeight = parseFloat(value) || null;
+        result.heightUnit = getUnit(value);
+    }
+    return result;
+};
+var cellsStyle = function (cells, style) {
+    var values = new Set();
+    var value = '';
+    cells.forEach(function (cell) {
+        var _a;
+        value = parseStyle(((_a = cell.node.attrs) === null || _a === void 0 ? void 0 : _a.style) || '')[style] || '';
+        values.add(value);
+    });
+    if (values.size === 1 && value) {
+        return value;
+    }
+    return '';
+};
+var cellsProp = function (cells, prop) {
+    var values = new Set();
+    var value = '';
+    cells.forEach(function (cell) {
+        value = (cell.node.attrs || {})[prop] || '';
+        values.add(value);
+    });
+    if (values.size === 1 && value) {
+        return value;
+    }
+    return '';
+};
+/**
+ * @hidden
+ */
+var initialCellData = {
+    applyToAll: false,
+    cellWidth: null,
+    widthUnit: '',
+    cellHeight: null,
+    heightUnit: '',
+    alignment: { x: '', y: '' },
+    textControl: '',
+    backgroundColor: undefined,
+    cellPadding: null,
+    borderWidth: null,
+    borderColor: undefined,
+    borderStyle: null,
+    id: '',
+    className: ''
+};
+/**
+ * @hidden
+ */
+var cellsDefaultData = function (state) {
+    var cells = selectedCells(state);
+    var $pos = state.selection.$from;
+    var table = cells.length ? parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; }) : null;
+    if (!table) {
+        return initialCellData;
+    }
+    return __assign(__assign(__assign(__assign({}, initialCellData), cellsWidth(cells, table, $pos)), cellsHeight(cells, table, $pos)), { alignment: { x: cellsStyle(cells, 'text-align'), y: cellsStyle(cells, 'vertical-align') }, textControl: cellsStyle(cells, 'white-space'), backgroundColor: cellsStyle(cells, 'background-color') || undefined, cellPadding: parseFloat(cellsStyle(cells, 'padding')) || null, borderWidth: parseFloat(cellsStyle(cells, 'border-width')) || null, borderColor: cellsStyle(cells, 'border-color') || undefined, borderStyle: cellsStyle(cells, 'border-style') || null, id: cellsProp(cells, 'id'), className: cellsProp(cells, 'class') });
+};
+var setCellWidth = function (tr, pos, width) {
+    var _a, _b;
+    var $cell = tr.doc.resolve(pos);
+    var row = $cell.parent;
+    var cellIndex = $cell.index();
+    var colSpan = 0;
+    for (var i = 0; i <= cellIndex; i++) {
+        colSpan += row.child(i).attrs.colspan;
+    }
+    var tableNode = $cell.node($cell.depth - 1);
+    var tablePos = $cell.posAtIndex(0, $cell.depth - 1) - 1;
+    var attrs = tableNode.attrs;
+    var col;
+    if (attrs && attrs[colgroupAttr]) {
+        // const colgroup = parseStrColgroup(tableNode.attrs[colgroupAttr]);
+        var colgroup = htmlToFragment(attrs[colgroupAttr]).firstChild;
+        col = colgroup.children[colSpan - 1];
+        col.style.width = width;
+        attrs = __assign(__assign({}, attrs), (_a = {}, _a[colgroupAttr] = colgroup.outerHTML, _a));
+        tr.setNodeMarkup(tablePos, null, attrs);
+    }
+    else {
+        var total = 0;
+        for (var i = 0; i < row.childCount; i++) {
+            total += row.child(i).attrs.colspan;
+        }
+        var colgroup = document.createElement('colgroup');
+        var cols = new Array(total);
+        for (var i = 0; i < total; i++) {
+            cols[i] = document.createElement('col');
+            colgroup.appendChild(cols[i]);
+        }
+        col = cols[cellIndex];
+        col.style.width = width;
+        attrs = __assign(__assign({}, attrs), (_b = {}, _b[colgroupAttr] = '<colgroup>' + cols.reduce(function (acc, cur) { return acc + cur.outerHTML; }, '') + '</colgroup>', _b));
+        tr.setNodeMarkup(tablePos, null, attrs);
+    }
+};
+var setCellHeight = function (tr, pos, height) {
+    var $cell = tr.doc.resolve(pos);
+    var row = $cell.parent;
+    var rowPos = $cell.posAtIndex(0) - 1;
+    tr.setNodeMarkup(rowPos, null, setNodeStyle(row.attrs, 'height', height));
+};
+var applyOnCell = function (tr, data, cells) {
+    cells.forEach(function (_a) {
+        var node = _a.node, pos = _a.pos;
+        var attrs = __assign({}, node.attrs);
+        attrs = setNodeStyle(attrs, 'border-color', data.borderColor || '');
+        attrs = setNodeStyle(attrs, 'border-style', data.borderStyle || '');
+        attrs = setNodeStyle(attrs, 'border-width', typeof data.borderWidth === 'number' ? data.borderWidth + 'px' : '');
+        attrs = setNodeStyle(attrs, 'padding', typeof data.cellPadding === 'number' ? data.cellPadding + 'px' : '');
+        attrs = setNodeStyle(attrs, 'background-color', data.backgroundColor || '');
+        attrs = setNodeStyle(attrs, 'text-align', data.alignment.x || '');
+        attrs = setNodeStyle(attrs, 'vertical-align', data.alignment.y || '');
+        attrs = setNodeStyle(attrs, 'white-space', data.textControl || '');
+        attrs.id = data.id || null;
+        attrs.class = data.className || null;
+        tr.setNodeMarkup(pos, null, attrs);
+        if (typeof data.cellWidth === 'number') {
+            setCellWidth(tr, pos, data.cellWidth + (data.widthUnit || 'px'));
+        }
+        if (typeof data.cellHeight === 'number') {
+            setCellHeight(tr, pos, data.cellHeight + (data.heightUnit || 'px'));
+        }
+    });
+};
+/**
+ * @hidden
+ */
+var applyCellsData = function (state, data) {
+    var tr = state.tr;
+    var cells = data.applyToAll ? tableCells(state) : selectedCells(state);
+    applyOnCell(tr, data, cells);
+    return tr;
+};
+export { initialCellData, cellsDefaultData, applyCellsData };

package/dist/es/tools/table-wizard/tableCellProperties.d.ts

@@ -1,21 +1,6 @@
 import * as React from 'react';
 import { ListItemProps } from '@progress/kendo-react-dropdowns';
 import { ToolProps } from '../ToolProps';
-import { EditorState, Node } from '@progress/kendo-editor-common';
-/**
- * @hidden
- */
-export declare const selectedCells: (state: EditorState) => Array<{
-    node: Node;
-    pos: number;
-}>;
-/**
- * @hidden
- */
-export declare const tableCells: (state: EditorState) => Array<{
-    node: Node;
-    pos: number;
-}>;
 /**
  * @hidden
  */

package/dist/es/tools/table-wizard/tableCellProperties.js

@@ -36,132 +36,10 @@ import { AutoComplete, DropDownList } from '@progress/kendo-react-dropdowns';
 import { Window, WindowActionsBar } from '@progress/kendo-react-dialogs';
 import { tableAlignBottomCenterIcon, tableAlignBottomLeftIcon, tableAlignBottomRightIcon, tableAlignMiddleCenterIcon, tableAlignMiddleLeftIcon, tableAlignMiddleRightIcon, tableAlignTopCenterIcon, tableAlignTopLeftIcon, tableAlignTopRightIcon, tableAlignRemoveIcon, tableCellPropertiesIcon, textWrapIcon, parameterStringIcon } from '@progress/kendo-svg-icons';
 import { borderStyles as borderStylesData, onDownPreventDefault, popupSettings, units, parentNode } from '../utils';
-import { TableMap, htmlToFragment } from '@progress/kendo-editor-common';
-import { getUnit, parseStyle, setNodeStyle } from './utils';
 import { IconWrap } from '@progress/kendo-react-common';
 import { useLocalization } from '@progress/kendo-react-intl';
 import { messages, keys } from './../../messages';
-var colgroupAttr = 'k-colgroup-data';
-var getCells = function (state) {
-    var doc = state.doc, selection = state.selection;
-    var result = [];
-    selection.ranges.forEach(function (range) {
-        var from = range.$from.pos;
-        var to = range.$to.pos;
-        doc.nodesBetween(from, to, function (node, pos, _parent, _index) {
-            if (node.type.name === 'table_cell' || node.type.name === 'table_header') {
-                result.push({ node: node, pos: pos });
-            }
-        });
-    });
-    return result;
-};
-/**
- * @hidden
- */
-export var selectedCells = function (state) {
-    var startNodeTable = parentNode(state.selection.$from, function (n) { return n.type.name === 'table'; });
-    var endNodeTable = parentNode(state.selection.$to, function (n) { return n.type.name === 'table'; });
-    if (startNodeTable && endNodeTable && startNodeTable.depth === endNodeTable.depth && startNodeTable.node.eq(endNodeTable.node)) {
-        var cells = getCells(state).filter(function (_a) {
-            var pos = _a.pos;
-            var parentTable = parentNode(state.doc.resolve(pos), function (n) { return n.type.name === 'table'; });
-            return parentTable && parentTable.depth === startNodeTable.depth && startNodeTable.node.eq(parentTable.node);
-        });
-        return cells;
-    }
-    return [];
-};
-/**
- * @hidden
- */
-export var tableCells = function (state) {
-    var cells = [];
-    if (selectedCells(state).length) {
-        var $pos = state.selection.$from;
-        var parentTable = parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; });
-        if (parentTable === null) {
-            return cells;
-        }
-        var tablePos_1 = $pos.start(parentTable.depth);
-        var tableNode = parentTable.node;
-        var map = TableMap.get(tableNode);
-        var doc_1 = state.doc;
-        map.map.forEach(function (m) {
-            var pos = m + tablePos_1;
-            cells.push({ pos: pos, node: doc_1.nodeAt(pos) });
-        });
-    }
-    return cells;
-};
-var setCellWidth = function (tr, pos, width) {
-    var _a, _b;
-    var $cell = tr.doc.resolve(pos);
-    var row = $cell.parent;
-    var cellIndex = $cell.index();
-    var colSpan = 0;
-    for (var i = 0; i <= cellIndex; i++) {
-        colSpan += row.child(i).attrs.colspan;
-    }
-    var tableNode = $cell.node($cell.depth - 1);
-    var tablePos = $cell.posAtIndex(0, $cell.depth - 1) - 1;
-    var attrs = tableNode.attrs;
-    var col;
-    if (attrs && attrs[colgroupAttr]) {
-        // const colgroup = parseStrColgroup(tableNode.attrs[colgroupAttr]);
-        var colgroup = htmlToFragment(attrs[colgroupAttr]).firstChild;
-        col = colgroup.children[colSpan - 1];
-        col.style.width = width;
-        attrs = __assign(__assign({}, attrs), (_a = {}, _a[colgroupAttr] = colgroup.outerHTML, _a));
-        tr.setNodeMarkup(tablePos, null, attrs);
-    }
-    else {
-        var total = 0;
-        for (var i = 0; i < row.childCount; i++) {
-            total += row.child(i).attrs.colspan;
-        }
-        var colgroup = document.createElement('colgroup');
-        var cols = new Array(total);
-        for (var i = 0; i < total; i++) {
-            cols[i] = document.createElement('col');
-            colgroup.appendChild(cols[i]);
-        }
-        col = cols[cellIndex];
-        col.style.width = width;
-        attrs = __assign(__assign({}, attrs), (_b = {}, _b[colgroupAttr] = '<colgroup>' + cols.reduce(function (acc, cur) { return acc + cur.outerHTML; }, '') + '</colgroup>', _b));
-        tr.setNodeMarkup(tablePos, null, attrs);
-    }
-};
-var setCellHeight = function (tr, pos, height) {
-    var $cell = tr.doc.resolve(pos);
-    var row = $cell.parent;
-    var rowPos = $cell.posAtIndex(0) - 1;
-    tr.setNodeMarkup(rowPos, null, setNodeStyle(row.attrs, 'height', height));
-};
-var applyOnCell = function (tr, data, cells) {
-    cells.forEach(function (_a) {
-        var _b, _c, _d;
-        var node = _a.node, pos = _a.pos;
-        var attrs = __assign({}, node.attrs);
-        attrs = setNodeStyle(attrs, 'border-color', data.borderColor || '');
-        attrs = setNodeStyle(attrs, 'border-style', ((_b = data.borderStyle) === null || _b === void 0 ? void 0 : _b.value) || '');
-        attrs = setNodeStyle(attrs, 'border-width', typeof data.borderWidth === 'number' ? data.borderWidth + 'px' : '');
-        attrs = setNodeStyle(attrs, 'padding', typeof data.cellPadding === 'number' ? data.cellPadding + 'px' : '');
-        attrs = setNodeStyle(attrs, 'background-color', data.backgroundColor || '');
-        attrs = setNodeStyle(attrs, 'text-align', ((_c = data.alignment) === null || _c === void 0 ? void 0 : _c.value.x) || '');
-        attrs = setNodeStyle(attrs, 'vertical-align', ((_d = data.alignment) === null || _d === void 0 ? void 0 : _d.value.y) || '');
-        attrs = setNodeStyle(attrs, 'white-space', data.textControl || '');
-        attrs.id = data.id || null;
-        attrs.class = data.className || null;
-        tr.setNodeMarkup(pos, null, attrs);
-        if (typeof data.cellWidth === 'number') {
-            setCellWidth(tr, pos, data.cellWidth + (data.widthUnit || 'px'));
-        }
-        if (typeof data.cellHeight === 'number') {
-            setCellHeight(tr, pos, data.cellHeight + (data.heightUnit || 'px'));
-        }
-    });
-};
+import { applyCellsData, cellsDefaultData } from './cellPropsUtils';
 /**
  * @hidden
  */
@@ -175,9 +53,7 @@ export var TableCellProperties = function (props) {
     }, []);
     var onSave = React.useCallback(function (data) {
         if (view && data) {
-            var tr = view.state.tr;
-            var cells = data.applyToAll ? tableCells(view.state) : selectedCells(view.state);
-            applyOnCell(tr, data, cells);
+            var tr = applyCellsData(view.state, data);
             if (tr.docChanged) {
                 view.dispatch(tr);
             }
@@ -219,102 +95,6 @@ var textControlData = [
     { textKey: keys.cellPropertiesFitToCell, text: messages[keys.cellPropertiesFitToCell],
         value: 'nowrap', icon: 'parameter-string', svgIcon: parameterStringIcon }
 ];
-var cellsWidth = function (cells, table, $pos) {
-    var result = {
-        cellWidth: null,
-        widthUnit: null
-    };
-    var tableNode = table.node;
-    var tablePos = $pos.start(table.depth);
-    if (!tableNode.attrs[colgroupAttr]) {
-        return result;
-    }
-    var width = new Set();
-    var value = '';
-    var colgroup = htmlToFragment(tableNode.attrs[colgroupAttr]).firstChild;
-    cells.forEach(function (cell) {
-        var $cell = tableNode.resolve(cell.pos - tablePos);
-        var row = $cell.parent;
-        var cellIndex = $cell.index();
-        var colSpan = 0;
-        for (var i = 0; i <= cellIndex; i++) {
-            colSpan += row.child(i).attrs.colspan;
-        }
-        var col = colgroup.children[colSpan - 1];
-        if (col) {
-            value = col.style.width;
-            width.add(value);
-        }
-    });
-    if (width.size === 1 && value) {
-        result.cellWidth = parseFloat(value) || null;
-        result.widthUnit = getUnit(value);
-    }
-    return result;
-};
-var cellsHeight = function (cells, table, $pos) {
-    var result = {
-        cellHeight: null,
-        heightUnit: null
-    };
-    var tableNode = table.node;
-    var tablePos = $pos.start(table.depth);
-    var height = new Set();
-    var value = '';
-    cells.forEach(function (cell) {
-        var _a;
-        var $cell = tableNode.resolve(cell.pos - tablePos);
-        var row = $cell.parent;
-        value = parseStyle(((_a = row.attrs) === null || _a === void 0 ? void 0 : _a.style) || '').height || '';
-        height.add(value);
-    });
-    if (height.size === 1 && value) {
-        result.cellHeight = parseFloat(value) || null;
-        result.heightUnit = getUnit(value);
-    }
-    return result;
-};
-var cellsStyle = function (cells, style) {
-    var values = new Set();
-    var value = '';
-    cells.forEach(function (cell) {
-        var _a;
-        value = parseStyle(((_a = cell.node.attrs) === null || _a === void 0 ? void 0 : _a.style) || '')[style] || '';
-        values.add(value);
-    });
-    if (values.size === 1 && value) {
-        return value;
-    }
-    return '';
-};
-var cellsProp = function (cells, prop) {
-    var values = new Set();
-    var value = '';
-    cells.forEach(function (cell) {
-        value = (cell.node.attrs || {})[prop] || '';
-        values.add(value);
-    });
-    if (values.size === 1 && value) {
-        return value;
-    }
-    return '';
-};
-var initialData = {
-    applyToAll: false,
-    cellWidth: null,
-    widthUnit: null,
-    cellHeight: null,
-    heightUnit: null,
-    alignment: { x: '', y: '' },
-    textControl: '',
-    backgroundColor: null,
-    cellPadding: '',
-    borderWidth: null,
-    borderColor: null,
-    borderStyle: '',
-    id: '',
-    class: ''
-};
 /**
  * @hidden
  */
@@ -339,13 +119,7 @@ export var itemRenderWithIcon = function (li, itemProps) {
 };
 var TableCellPropertiesDialog = function (props) {
     var defaults = React.useMemo(function () {
-        var cells = selectedCells(props.view.state);
-        var $pos = props.view.state.selection.$from;
-        var table = cells.length ? parentNode($pos, function (n) { return n.type.spec.tableRole === 'table'; }) : null;
-        if (!table) {
-            return initialData;
-        }
-        return __assign(__assign(__assign(__assign({}, initialData), cellsWidth(cells, table, $pos)), cellsHeight(cells, table, $pos)), { alignment: { x: cellsStyle(cells, 'text-align'), y: cellsStyle(cells, 'vertical-align') }, textControl: cellsStyle(cells, 'white-space'), backgroundColor: cellsStyle(cells, 'background-color') || undefined, cellPadding: parseFloat(cellsStyle(cells, 'padding')) || null, borderWidth: parseFloat(cellsStyle(cells, 'border-width')) || null, borderColor: cellsStyle(cells, 'border-color') || undefined, borderStyle: cellsStyle(cells, 'border-style'), id: cellsProp(cells, 'id'), className: cellsProp(cells, 'class') });
+        return cellsDefaultData(props.view.state);
     }, [props.view]);
     var loc = useLocalization();
     var applyToAll = React.useRef(null);
@@ -365,7 +139,8 @@ var TableCellPropertiesDialog = function (props) {
     }
     var heightUnitDef = defaults.heightUnit || '';
     var alignment = React.useRef(null);
-    var alignmentDef = alignData.find(function (al) { return al.value.x !== undefined && al.value.x === defaults.alignment.x && al.value.y === defaults.alignment.y; }) || null;
+    var alignmentDef = alignData.find(function (al) { return al.value.x !== undefined && defaults.alignment &&
+        al.value.x === defaults.alignment.x && al.value.y === defaults.alignment.y; }) || null;
     var textControl = React.useRef(null);
     var textControlDef = textControlData.find(function (d) { return d.value === defaults.textControl; });
     var backgroundColor = React.useRef(null);
@@ -377,28 +152,28 @@ var TableCellPropertiesDialog = function (props) {
     var borderColor = React.useRef(null);
     var borderColorDef = defaults.borderColor;
     var borderStyle = React.useRef(null);
-    var borderStyleDef = defaults.borderStyle;
+    var borderStyleDef = borderStylesData.find(function (s) { return s.value === defaults.borderStyle; });
     var id = React.useRef(null);
     var idDef = defaults.id;
     var className = React.useRef(null);
     var classNameDef = defaults.className;
     var onSave = React.useCallback(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         var data = {
-            applyToAll: (_b = (_a = applyToAll.current) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.checked,
-            cellWidth: (_c = cellWidth.current) === null || _c === void 0 ? void 0 : _c.value,
-            widthUnit: (_d = widthUnit.current) === null || _d === void 0 ? void 0 : _d.value,
-            cellHeight: (_e = cellHeight.current) === null || _e === void 0 ? void 0 : _e.value,
-            heightUnit: (_f = heightUnit.current) === null || _f === void 0 ? void 0 : _f.value,
-            alignment: (_g = alignment.current) === null || _g === void 0 ? void 0 : _g.value,
-            textControl: (_j = (_h = textControl.current) === null || _h === void 0 ? void 0 : _h.value) === null || _j === void 0 ? void 0 : _j.value,
-            backgroundColor: (_k = backgroundColor.current) === null || _k === void 0 ? void 0 : _k.value,
-            cellPadding: (_l = cellPadding.current) === null || _l === void 0 ? void 0 : _l.value,
-            borderWidth: (_m = borderWidth.current) === null || _m === void 0 ? void 0 : _m.value,
-            borderColor: (_o = borderColor.current) === null || _o === void 0 ? void 0 : _o.value,
-            borderStyle: (_p = borderStyle.current) === null || _p === void 0 ? void 0 : _p.value,
-            id: (_q = id.current) === null || _q === void 0 ? void 0 : _q.value,
-            className: (_r = className.current) === null || _r === void 0 ? void 0 : _r.value
+            applyToAll: Boolean((_b = (_a = applyToAll.current) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.checked),
+            cellWidth: ((_c = cellWidth.current) === null || _c === void 0 ? void 0 : _c.value) || null,
+            widthUnit: ((_d = widthUnit.current) === null || _d === void 0 ? void 0 : _d.value) || '',
+            cellHeight: ((_e = cellHeight.current) === null || _e === void 0 ? void 0 : _e.value) || null,
+            heightUnit: ((_f = heightUnit.current) === null || _f === void 0 ? void 0 : _f.value) || '',
+            alignment: (_h = (_g = alignment.current) === null || _g === void 0 ? void 0 : _g.value) === null || _h === void 0 ? void 0 : _h.value,
+            textControl: (_k = (_j = textControl.current) === null || _j === void 0 ? void 0 : _j.value) === null || _k === void 0 ? void 0 : _k.value,
+            backgroundColor: (_l = backgroundColor.current) === null || _l === void 0 ? void 0 : _l.value,
+            cellPadding: typeof ((_m = cellPadding.current) === null || _m === void 0 ? void 0 : _m.value) === 'number' ? (_o = cellPadding.current) === null || _o === void 0 ? void 0 : _o.value : null,
+            borderWidth: typeof ((_p = borderWidth.current) === null || _p === void 0 ? void 0 : _p.value) === 'number' ? (_q = borderWidth.current) === null || _q === void 0 ? void 0 : _q.value : null,
+            borderColor: (_r = borderColor.current) === null || _r === void 0 ? void 0 : _r.value,
+            borderStyle: ((_t = (_s = borderStyle.current) === null || _s === void 0 ? void 0 : _s.value) === null || _t === void 0 ? void 0 : _t.value) || null,
+            id: String(((_u = id.current) === null || _u === void 0 ? void 0 : _u.value) || ''),
+            className: String(((_v = className.current) === null || _v === void 0 ? void 0 : _v.value) || '')
         };
         props.onSave.call(undefined, data);
     }, [props.onSave]);