@progress/kendo-react-editor 5.15.0-dev.202307180734 → 5.15.0-dev.202307181521

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

@@ -0,0 +1,701 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { Checkbox, ColorPicker, NumericTextBox, TextBox } from '@progress/kendo-react-inputs';
+import { AutoComplete, DropDownList } from '@progress/kendo-react-dropdowns';
+import { Window, WindowActionsBar } from '@progress/kendo-react-dialogs';
+import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
+import { tableAlignMiddleCenterIcon, tableAlignMiddleLeftIcon, tableAlignMiddleRightIcon, tableAlignRemoveIcon, tablePropertiesIcon, tablePositionStartIcon, tablePositionCenterIcon, tablePositionEndIcon, positionTopIcon, positionBottomIcon } from '@progress/kendo-svg-icons';
+import { borderStyles, onDownPreventDefault, popupSettings, units, parentNode } from './../utils';
+import { nodeSize, parseStyle, setNodeStyle } from './utils';
+import { itemRenderWithIcon, selectedCells, tableCells, valueRenderWithIcon } from './tableCellProperties';
+import { Selection, TableMap, TextSelection, addColumnAfter, addRowAfter, pmDocToFragment, fragmentToHtml, parseContent, CellSelection } from '@progress/kendo-editor-common';
+import { deleteColumnCmd, deleteRowCmd } from '../tableEdit';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, keys } from './../../messages';
+var lastCell = function (table) {
+    var lastRow = table.lastChild;
+    var cell = lastRow.lastChild;
+    return { node: cell, pos: table.content.size - cell.nodeSize };
+};
+var addTableNodes = function (state, tablePos, table, toAdd, command) {
+    var last = lastCell(table);
+    var cellPos = tablePos + last.pos;
+    var cell = state.doc.nodeAt(cellPos);
+    if (!cell) {
+        return state;
+    }
+    var res = state.doc.resolve(cellPos);
+    var sel = new CellSelection(res, res);
+    var selTr = state.tr.setSelection(sel);
+    var resultState = state.apply(selTr);
+    for (var i = 0; i < toAdd; i++) {
+        command(resultState, function (tr) {
+            resultState = resultState.apply(tr);
+        });
+    }
+    return resultState;
+};
+var removeTableNodes = function (state, tablePos, toDelete, command) {
+    var resultState = state;
+    for (var i = 0; i < toDelete; i++) {
+        var table = resultState.doc.nodeAt(tablePos);
+        if (table) {
+            var last = lastCell(table);
+            var cellPos = tablePos + last.pos;
+            var res = resultState.doc.resolve(cellPos);
+            var selection = new CellSelection(res, res);
+            var selTr = resultState.tr.setSelection(selection);
+            resultState = resultState.apply(selTr);
+            command(resultState, function (tr) {
+                resultState = resultState.apply(tr);
+            });
+        }
+    }
+    return resultState;
+};
+var resizeTable = function (state, tablePos, rows, columns) {
+    var nextState = state;
+    var table = nextState.doc.nodeAt(tablePos);
+    if (!table) {
+        return nextState;
+    }
+    var map = TableMap.get(table);
+    if (map.width === columns && map.height === rows) {
+        return nextState;
+    }
+    if (columns > map.width) {
+        nextState = addTableNodes(nextState, tablePos, table, columns - map.width, addColumnAfter);
+    }
+    else if (columns < map.width) {
+        nextState = removeTableNodes(nextState, tablePos, map.width - columns, deleteColumnCmd);
+    }
+    table = nextState.doc.nodeAt(tablePos);
+    if (!table) {
+        return nextState;
+    }
+    map = TableMap.get(table);
+    if (rows > map.height) {
+        nextState = addTableNodes(nextState, tablePos, table, rows - map.height, addRowAfter);
+    }
+    else if (rows < map.height) {
+        nextState = removeTableNodes(nextState, tablePos, map.height - rows, deleteRowCmd);
+    }
+    return nextState;
+};
+var setTableStyles = function (state, data, tablePos) {
+    var _a;
+    var table = state.doc.nodeAt(tablePos);
+    if (!table) {
+        return state;
+    }
+    var attrs = __assign({}, table.attrs);
+    attrs = setNodeStyle(attrs, 'width', data.width !== null ? data.width + data.widthUnit : '');
+    attrs = setNodeStyle(attrs, 'height', data.height !== null ? data.height + data.heightUnit : '');
+    attrs = setNodeStyle(attrs, 'text-align', data.textAlign || '');
+    attrs = setNodeStyle(attrs, 'background-color', data.backgroundColor || '');
+    attrs = setNodeStyle(attrs, 'border-width', data.borderWidth ? data.borderWidth + 'px' : '');
+    attrs = setNodeStyle(attrs, 'border-style', data.borderStyle || '');
+    attrs = setNodeStyle(attrs, 'border-color', data.borderColor || '');
+    attrs = setNodeStyle(attrs, 'border-spacing', data.cellSpacing !== null ? data.cellSpacing + 'px' : '');
+    if (data.cellSpacing !== null) {
+        attrs = setNodeStyle(attrs, 'border-collapse', 'unset');
+    }
+    else {
+        attrs = setNodeStyle(attrs, 'border-collapse', data.collapseBorders ? 'collapse' : '');
+    }
+    var posStyles = ((_a = data.position) === null || _a === void 0 ? void 0 : _a.style) || {};
+    Object.keys(posStyles).forEach(function (style) {
+        attrs = setNodeStyle(attrs, style, posStyles[style]);
+    });
+    attrs.id = data.id || null;
+    attrs.class = data.className || null;
+    var tr = state.tr.setNodeMarkup(tablePos, null, attrs);
+    state = state.apply(tr);
+    return state;
+};
+var toCellsMap = function (map) {
+    var cells = [];
+    for (var h = 0; h < map.height; h++) {
+        var start = h * map.width;
+        var end = start + map.width;
+        cells.push(map.map.slice(start, end));
+    }
+    return cells;
+};
+var headerCellsCount = function (table, map) {
+    var headerRows = 0;
+    var headerColumns = 0;
+    var cells = toCellsMap(map);
+    cells.forEach(function (row) {
+        var headerCells = true;
+        row.forEach(function (cellPos) {
+            var cell = table.nodeAt(cellPos);
+            if (cell && cell.type.name !== 'table_header') {
+                headerCells = false;
+            }
+        });
+        if (headerCells) {
+            headerRows++;
+        }
+    });
+    for (var col = 0; col < map.width; col++) {
+        var headerCells = true;
+        for (var row = 0; row < map.height; row++) {
+            var cellPos = cells[row] && cells[row][col];
+            var cell = typeof cellPos === 'number' && table.nodeAt(cellPos);
+            if (cell && cell.type.name !== 'table_header') {
+                headerCells = false;
+            }
+        }
+        if (headerCells) {
+            headerColumns++;
+        }
+    }
+    return { rows: headerRows, columns: headerColumns };
+};
+var setCellType = function (state, cell, pos, type, attrs) {
+    if (cell.type.name !== type.name || Object.keys(attrs).length > 0) {
+        var tr = state.tr.setNodeMarkup(pos, type, __assign(__assign({}, cell.attrs), attrs));
+        return state.apply(tr);
+    }
+    return state;
+};
+var resetId = function (cell, attrs) {
+    if (/^cell-[0-9]+-[0-9]+$/.test(cell.attrs.id || '')) {
+        attrs.id = null;
+    }
+};
+var setTableHeaderCells = function (state, data, tablePos) {
+    var table = state.doc.nodeAt(tablePos);
+    var map = table && TableMap.get(table);
+    if (!table || !map) {
+        return state;
+    }
+    // const headerCells = headerCellsCount(table, map);
+    // if (data.headerRows === headerCells.rows && data.headerColumns === headerCells.columns) {
+    //     return state;
+    // }
+    var cells = toCellsMap(map);
+    var newState = state;
+    var _a = state.schema.nodes, table_header = _a.table_header, table_cell = _a.table_cell;
+    var id = String(new Date().getTime());
+    var ids = [];
+    var cellId = function (row, col) {
+        var result = "cell-".concat(row).concat(col, "-").concat(id);
+        if (!ids[row]) {
+            ids.push([]);
+        }
+        if (!ids[row][col]) {
+            ids[row].push([]);
+        }
+        ids[row][col] = result;
+        return result;
+    };
+    var headers = function (row, col, colHeader, rowHeader) {
+        var result = [];
+        if (rowHeader) {
+            for (var r = 0; r < row; r++) {
+                if (ids[r] && ids[r][col]) {
+                    result.push(ids[r][col]);
+                }
+            }
+        }
+        if (colHeader) {
+            for (var c = 0; c < col; c++) {
+                if (ids[row] && ids[row][c]) {
+                    result.push(ids[row][c]);
+                }
+            }
+        }
+        return result.join(' ');
+    };
+    cells.forEach(function (row, rowIndex) {
+        row.forEach(function (cellPos, cellIndex) {
+            var cell = table.nodeAt(cellPos);
+            if (cell) {
+                var colHeader = cellIndex < data.headerColumns;
+                var rowHeader = rowIndex < data.headerRows;
+                var attrs = __assign({}, cell.attrs);
+                resetId(cell, attrs);
+                attrs.headers = null;
+                attrs.scope = null;
+                if (rowHeader || colHeader) {
+                    if (data.associateHeaders === 'scope') {
+                        attrs.scope = rowHeader ? 'col' : 'row';
+                    }
+                    if (data.associateHeaders === 'id') {
+                        attrs.id = cellId(rowIndex, cellIndex);
+                        if (cellIndex > 0 || rowIndex > 0) {
+                            attrs.headers = headers(rowIndex, cellIndex, colHeader, rowHeader) || null;
+                        }
+                    }
+                    newState = setCellType(newState, cell, tablePos + cellPos + 1, table_header, attrs);
+                }
+                else {
+                    if (data.associateHeaders === 'id') {
+                        attrs.headers = headers(rowIndex, cellIndex, data.headerColumns > 0, data.headerRows > 0) || null;
+                    }
+                    newState = setCellType(newState, cell, tablePos + cellPos + 1, table_cell, attrs);
+                }
+            }
+        });
+    });
+    return newState;
+};
+var setTablePosition = function (state, wrapperNode, wrapperPos, styles) {
+    var attrs = __assign({}, wrapperNode.attrs);
+    attrs = setNodeStyle(attrs, 'margin-left', '');
+    attrs = setNodeStyle(attrs, 'margin-right', '');
+    Object.keys(styles || {}).forEach(function (s) {
+        attrs = setNodeStyle(attrs, s, (styles || {})[s] || '');
+    });
+    return state.apply(state.tr.setNodeMarkup(wrapperPos, null, attrs));
+};
+var parseCaptionContent = function (content, schema) {
+    var doc = parseContent('<p>' + content + '</p>', schema);
+    return doc.content.firstChild.content;
+};
+var createCaption = function (data, schema) {
+    if (!data.caption) {
+        return;
+    }
+    var captAttrs = { caption: '', style: 'display: table-caption' };
+    if (data.captionAlignment) {
+        captAttrs = setNodeStyle(captAttrs, 'text-align', data.captionAlignment);
+    }
+    if (data.captionPosition) {
+        captAttrs = setNodeStyle(captAttrs, 'caption-side', data.captionPosition);
+    }
+    var captionContent = parseCaptionContent(data.caption, schema);
+    var captionNode = (captionContent && schema.nodes.table_caption_external.createAndFill(captAttrs, captionContent)) || undefined;
+    return captionNode;
+};
+var hasCaption = function (wrapperNode) {
+    return wrapperNode.firstChild && wrapperNode.firstChild.type.name === 'table_caption_external';
+};
+var setTableCaption = function (state, wrapperNode, wrapperPos, data) {
+    var nextState = state;
+    var captionNode;
+    var captContentPos = wrapperPos + 2;
+    var captPos = wrapperPos + 1;
+    var schema = nextState.schema;
+    if (hasCaption(wrapperNode)) {
+        captionNode = wrapperNode.firstChild;
+        if (data.caption) {
+            var captionContent = parseCaptionContent(data.caption, schema);
+            nextState = nextState.apply(nextState.tr.replaceWith(captContentPos, captContentPos + captionNode.content.size, captionContent));
+            captionNode = nextState.doc.nodeAt(captPos);
+            if (captionNode) {
+                var captAttrs = __assign({}, captionNode.attrs);
+                captAttrs = setNodeStyle(captAttrs, 'text-align', data.captionAlignment || '');
+                captAttrs = setNodeStyle(captAttrs, 'caption-side', data.captionPosition || '');
+                nextState = nextState.apply(nextState.tr.setNodeAttribute(captPos, 'style', captAttrs.style));
+            }
+        }
+        else {
+            nextState = nextState.apply(nextState.tr.deleteRange(captContentPos, captContentPos + captionNode.content.size));
+        }
+    }
+    else {
+        captionNode = createCaption(data, schema);
+        if (captionNode) {
+            nextState = nextState.apply(nextState.tr.replaceWith(captContentPos, captContentPos, captionNode));
+        }
+    }
+    return nextState;
+};
+var updateWrapper = function (state, data, tablePos, tableWrapper, tableWrapperPos) {
+    if (!tableWrapper && (data.position || data.caption)) {
+        var wrapperAttrs_1 = { table: '', style: 'display: table' };
+        var children = [];
+        if (data.position) {
+            Object.keys(data.position.style).forEach(function (s) {
+                wrapperAttrs_1 = setNodeStyle(wrapperAttrs_1, s, data.position.style[s] || '');
+            });
+        }
+        var captionNode = createCaption(data, state.schema);
+        if (captionNode) {
+            children.push(captionNode);
+        }
+        var table = state.doc.nodeAt(tablePos);
+        children.push(table);
+        var createdWrapper = state.schema.nodes.table_wrapper.createAndFill(wrapperAttrs_1, children);
+        if (createdWrapper) {
+            var tr = state.tr.replaceWith(tablePos, tablePos + table.content.size, createdWrapper);
+            state = state.apply(tr);
+            return { state: state, pos: tablePos };
+        }
+    }
+    else if (tableWrapper && (data.position || data.caption || (!data.caption && hasCaption(tableWrapper.node)))) {
+        state = setTablePosition(state, tableWrapper.node, tableWrapperPos, data.position && data.position.style);
+        state = setTableCaption(state, tableWrapper.node, tableWrapperPos, data);
+        return { state: state, pos: tableWrapperPos };
+    }
+    else if (tableWrapper && !(data.position || data.caption)) {
+        return { state: state, node: tableWrapper.node, pos: state.selection.$from.start(tableWrapper.depth) - 1 };
+    }
+    return { state: state, pos: tablePos };
+};
+/**
+ * @hidden
+ */
+export var TableProperties = function (props) {
+    var view = props.view, buttonProps = __rest(props, ["view"]);
+    var loc = useLocalization();
+    var _a = React.useState(false), showDialog = _a[0], setShowDialog = _a[1];
+    var inTable = Boolean(view && parentNode(view.state.selection.$from, function (n) { return n.type.spec.tableRole === 'table'; }));
+    var onClick = React.useCallback(function () {
+        setShowDialog(true);
+    }, []);
+    var onClose = React.useCallback(function () {
+        setShowDialog(false);
+    }, []);
+    var onSave = React.useCallback(function (data) {
+        if (view && data) {
+            var $from = view.state.selection.$from;
+            var table = parentNode($from, function (n) { return n.type.spec.tableRole === 'table'; });
+            if (!table) {
+                return;
+            }
+            var tablePos = $from.start(table.depth) - 1;
+            var state = resizeTable(view.state, tablePos, data.rows, data.columns);
+            if (!state) {
+                return;
+            }
+            var transaction_1 = state.tr;
+            tableCells(state).forEach(function (cell) {
+                var attrs = __assign({}, cell.node.attrs);
+                attrs = setNodeStyle(attrs, 'padding', typeof data.cellPadding === 'number' ? data.cellPadding + 'px' : '');
+                transaction_1.setNodeMarkup(cell.pos, null, attrs);
+            });
+            state = state.apply(transaction_1);
+            state = setTableStyles(state, data, tablePos);
+            state = setTableHeaderCells(state, data, tablePos);
+            var tableParent = parentNode($from, function (n) { return n.type.name === 'table_wrapper'; });
+            var tableParentPos = $from.start((tableParent === null || tableParent === void 0 ? void 0 : tableParent.depth) || 0) - 1;
+            var result = updateWrapper(state, data, tablePos, tableParent, tableParentPos);
+            state = result.state;
+            var from = result.pos;
+            var node = state.doc.nodeAt(result.pos);
+            if (!node) {
+                return;
+            }
+            var to = from + (tableParent || table).node.content.size;
+            var tr = view.state.tr.replaceWith(from, to, node);
+            var atEnd = Selection.atEnd(node);
+            var selection = TextSelection.create(tr.doc, from + atEnd.to);
+            tr.setSelection(selection);
+            view.dispatch(tr);
+        }
+        setShowDialog(false);
+    }, [view]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, __assign({ type: "button", title: loc.toLanguageString(keys.tableProperties, messages[keys.tableProperties]), icon: 'table-properties', svgIcon: tablePropertiesIcon, onClick: onClick, disabled: !inTable }, onDownPreventDefault, buttonProps)),
+        showDialog && React.createElement(TablePropertiesDialog, { onClose: onClose, onSave: onSave, view: view })));
+};
+var alignData = [
+    { textKey: keys.tablePropertiesAlignLeft, text: messages[keys.tablePropertiesAlignLeft],
+        value: 'left', icon: 'table-align-middle-left', svgIcon: tableAlignMiddleLeftIcon },
+    { textKey: keys.tablePropertiesAlignCenter, text: messages[keys.tablePropertiesAlignCenter],
+        value: 'center', icon: 'table-align-middle-center', svgIcon: tableAlignMiddleCenterIcon },
+    { textKey: keys.tablePropertiesAlignRight, text: messages[keys.tablePropertiesAlignRight],
+        value: 'right', icon: 'table-align-middle-right', svgIcon: tableAlignMiddleRightIcon },
+    { textKey: keys.tablePropertiesNoAlignment, text: messages[keys.tablePropertiesNoAlignment],
+        value: '', icon: 'align-remove', svgIcon: tableAlignRemoveIcon }
+];
+var tablePosition = [{
+        textKey: keys.tablePropertiesLeft,
+        text: messages[keys.tablePropertiesLeft],
+        value: 'left',
+        style: { 'margin-left': '', 'margin-right': 'auto' },
+        icon: 'table-position-left',
+        svgIcon: tablePositionStartIcon
+    }, {
+        textKey: keys.tablePropertiesCenter,
+        text: messages[keys.tablePropertiesCenter],
+        value: 'center',
+        style: { 'margin-left': 'auto', 'margin-right': 'auto' },
+        icon: 'table-position-center',
+        svgIcon: tablePositionCenterIcon
+    }, {
+        textKey: keys.tablePropertiesRight,
+        text: messages[keys.tablePropertiesRight],
+        value: 'right',
+        style: { 'margin-left': 'auto', 'margin-right': '' },
+        icon: 'table-position-right',
+        svgIcon: tablePositionEndIcon
+    }];
+var captionPositionData = [{
+        textKey: keys.tablePropertiesTop,
+        text: messages[keys.tablePropertiesTop],
+        value: 'top',
+        icon: 'position-top',
+        svgIcon: positionTopIcon
+    }, {
+        textKey: keys.tablePropertiesBottom,
+        text: messages[keys.tablePropertiesBottom],
+        value: 'bottom',
+        icon: 'position-bottom',
+        svgIcon: positionBottomIcon
+    }];
+var associateHeadersData = [
+    { textKey: keys.tablePropertiesNone, text: messages[keys.tablePropertiesNone], value: 'none' },
+    { textKey: keys.tablePropertiesUsingScopeAttribute, text: messages[keys.tablePropertiesUsingScopeAttribute], value: 'scope' },
+    { textKey: keys.tablePropertiesUsingIdAttributes, text: messages[keys.tablePropertiesUsingIdAttributes], value: 'id' }
+];
+var initialData = {
+    rows: 0,
+    columns: 0,
+    width: null,
+    widthUnit: '',
+    height: null,
+    heightUnit: '',
+    position: null,
+    textAlign: '',
+    cellPadding: null,
+    cellSpacing: null,
+    backgroundColor: undefined,
+    borderWidth: null,
+    borderColor: undefined,
+    borderStyle: null,
+    collapseBorders: false,
+    id: '',
+    className: '',
+    caption: '',
+    captionAlignment: null,
+    captionPosition: null,
+    headerRows: 0,
+    headerColumns: 0,
+    associateHeaders: 'none'
+};
+var TablePropertiesDialog = function (props) {
+    var defaults = React.useMemo(function () {
+        var _a, _b, _c;
+        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;
+        }
+        var tableParent = parentNode($pos, function (n) { return n.type.name === 'table_wrapper'; });
+        var captionStr = '';
+        var captionStyles = {};
+        var parentStyles = {};
+        if (tableParent) {
+            parentStyles = parseStyle(tableParent.node.attrs.style);
+            tableParent.node.content.forEach(function (node) {
+                if (node.type.name === 'table_caption_external') {
+                    var fr = pmDocToFragment(node);
+                    captionStr = fragmentToHtml(fr);
+                    captionStyles = parseStyle(node.attrs.style);
+                }
+            });
+        }
+        var styles = parseStyle(((_a = table.node.attrs) === null || _a === void 0 ? void 0 : _a.style) || '');
+        var map = TableMap.get(table.node);
+        var pos = (parentStyles['margin-left'] === 'auto' && parentStyles['margin-right'] === 'auto') ? tablePosition.find(function (p) { return p.value === 'center'; }) :
+            parentStyles['margin-right'] === 'auto' ? tablePosition.find(function (p) { return p.value === 'left'; }) :
+                parentStyles['margin-left'] === 'auto' ? tablePosition.find(function (p) { return p.value === 'right'; }) : null;
+        var headerCells = headerCellsCount(table.node, map);
+        return __assign(__assign(__assign(__assign(__assign({}, initialData), { columns: map.width, rows: map.height }), nodeSize(table.node, 'width')), nodeSize(table.node, 'height')), { textAlign: styles['text-align'] || '', position: pos || null, cellPadding: styles.padding ? parseFloat(styles.padding) : null, cellSpacing: styles['border-spacing'] ? parseFloat(styles['border-spacing']) : null, backgroundColor: styles['background-color'], borderWidth: styles['border-width'] ? parseFloat(styles['border-width']) : null, borderColor: styles['border-color'], borderStyle: styles['border-style'], collapseBorders: styles['border-collapse'] === 'collapse', caption: captionStr, captionAlignment: captionStyles['text-align'], captionPosition: captionStyles['caption-side'], headerRows: headerCells.rows, headerColumns: headerCells.columns, 
+            // associateHeaders
+            id: (_b = table.node.attrs) === null || _b === void 0 ? void 0 : _b.id, className: (_c = table.node.attrs) === null || _c === void 0 ? void 0 : _c.class });
+    }, [props.view]);
+    var loc = useLocalization();
+    var _a = React.useState(0), selected = _a[0], setSelected = _a[1];
+    var onSelect = React.useCallback(function (event) {
+        setSelected(event.selected);
+    }, []);
+    // General tab refs
+    var rows = React.useRef(null);
+    var columns = React.useRef(null);
+    var width = React.useRef(null);
+    var height = React.useRef(null);
+    var cellSpacing = React.useRef(null);
+    var cellPadding = React.useRef(null);
+    var borderWidth = React.useRef(null);
+    var widthUnit = React.useRef(null);
+    var heightUnit = React.useRef(null);
+    var position = React.useRef(null);
+    var alignment = React.useRef(null);
+    var borderStyle = React.useRef(null);
+    var backgroundColor = React.useRef(null);
+    var borderColor = React.useRef(null);
+    var collapseBorders = React.useRef(null);
+    // Advanced tab refs
+    var id = React.useRef(null);
+    var className = React.useRef(null);
+    var caption = React.useRef(null);
+    var headerRows = React.useRef(null);
+    var headerColumns = React.useRef(null);
+    var captionAlignment = React.useRef(null);
+    var captionPosition = React.useRef(null);
+    var associateHeaders = React.useRef(null);
+    var onSave = React.useCallback(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        var data = {
+            rows: ((_a = rows.current) === null || _a === void 0 ? void 0 : _a.value) || 0,
+            columns: ((_b = columns.current) === null || _b === void 0 ? void 0 : _b.value) || 0,
+            width: width.current ? width.current.value : null,
+            height: height.current ? height.current.value : null,
+            cellSpacing: cellSpacing.current ? cellSpacing.current.value : null,
+            cellPadding: cellPadding.current ? cellPadding.current.value : null,
+            borderWidth: borderWidth.current ? borderWidth.current.value : null,
+            widthUnit: ((_c = widthUnit.current) === null || _c === void 0 ? void 0 : _c.value) || '',
+            heightUnit: ((_d = heightUnit.current) === null || _d === void 0 ? void 0 : _d.value) || '',
+            position: ((_e = position.current) === null || _e === void 0 ? void 0 : _e.value) || null,
+            textAlign: ((_f = alignment.current) === null || _f === void 0 ? void 0 : _f.value) ? alignment.current.value.value : null,
+            borderStyle: ((_g = borderStyle.current) === null || _g === void 0 ? void 0 : _g.value) ? borderStyle.current.value.value : null,
+            backgroundColor: (_h = backgroundColor.current) === null || _h === void 0 ? void 0 : _h.value,
+            borderColor: (_j = borderColor.current) === null || _j === void 0 ? void 0 : _j.value,
+            collapseBorders: Boolean((_l = (_k = collapseBorders.current) === null || _k === void 0 ? void 0 : _k.element) === null || _l === void 0 ? void 0 : _l.checked),
+            id: String(((_m = id.current) === null || _m === void 0 ? void 0 : _m.value) || ''),
+            className: String(((_o = className.current) === null || _o === void 0 ? void 0 : _o.value) || ''),
+            caption: String(((_p = caption.current) === null || _p === void 0 ? void 0 : _p.value) || ''),
+            headerRows: ((_q = headerRows.current) === null || _q === void 0 ? void 0 : _q.value) || 0,
+            headerColumns: ((_r = headerColumns.current) === null || _r === void 0 ? void 0 : _r.value) || 0,
+            captionAlignment: ((_s = captionAlignment.current) === null || _s === void 0 ? void 0 : _s.value) ? captionAlignment.current.value.value : null,
+            captionPosition: ((_t = captionPosition.current) === null || _t === void 0 ? void 0 : _t.value) ? captionPosition.current.value.value : null,
+            associateHeaders: ((_u = associateHeaders.current) === null || _u === void 0 ? void 0 : _u.value) ? associateHeaders.current.value.value : 'none'
+        };
+        props.onSave.call(undefined, data);
+    }, [props.onSave]);
+    var general = (React.createElement("div", { className: "k-form k-form-md" },
+        React.createElement("fieldset", { className: "k-form-fieldset" },
+            React.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-4 k-gap-x-4" },
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesRows, messages[keys.tablePropertiesRows])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(NumericTextBox, { ref: rows, defaultValue: defaults.rows, min: 1 }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesColumns, messages[keys.tablePropertiesColumns])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(NumericTextBox, { ref: columns, defaultValue: defaults.columns, min: 1 }))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesWidth, messages[keys.tablePropertiesWidth])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(NumericTextBox, { ref: width, defaultValue: defaults.width, min: 0, placeholder: loc.toLanguageString(keys.sizeAuto, messages[keys.sizeAuto]) }))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, "\u00A0"),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(AutoComplete, { ref: widthUnit, defaultValue: defaults.widthUnit, data: units, popupSettings: popupSettings }))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesHeight, messages[keys.tablePropertiesHeight])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(NumericTextBox, { ref: height, defaultValue: defaults.height, min: 0, placeholder: loc.toLanguageString(keys.sizeAuto, messages[keys.sizeAuto]) }))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, "\u00A0"),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(AutoComplete, { ref: heightUnit, defaultValue: defaults.heightUnit, data: units, popupSettings: popupSettings }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesPosition, messages[keys.tablePropertiesPosition])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(DropDownList, { ref: position, defaultValue: defaults.position, popupSettings: popupSettings, data: tablePosition.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), textField: 'text', dataItemKey: 'value', valueRender: valueRenderWithIcon, itemRender: itemRenderWithIcon }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesAlignment, messages[keys.tablePropertiesAlignment])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(DropDownList, { ref: alignment, defaultValue: alignData.find(function (a) { return a.value === defaults.textAlign; }), data: alignData.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), textField: 'text', dataItemKey: 'value', popupSettings: popupSettings, valueRender: valueRenderWithIcon, itemRender: itemRenderWithIcon }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesCellSpacing, messages[keys.tablePropertiesCellSpacing])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(NumericTextBox, { ref: cellSpacing, defaultValue: defaults.cellSpacing, placeholder: loc.toLanguageString(keys.sizeAuto, messages[keys.sizeAuto]), min: 0 }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesCellPadding, messages[keys.tablePropertiesCellPadding])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(NumericTextBox, { ref: cellPadding, defaultValue: defaults.cellPadding, placeholder: loc.toLanguageString(keys.sizeAuto, messages[keys.sizeAuto]), min: 0 }))),
+                React.createElement("div", { className: "k-form-field k-col-span-full" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesTableBackground, messages[keys.tablePropertiesTableBackground])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(ColorPicker, { ref: backgroundColor, defaultValue: defaults.backgroundColor }))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesBorderWidth, messages[keys.tablePropertiesBorderWidth])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(NumericTextBox, { ref: borderWidth, defaultValue: defaults.borderWidth, min: 0 }))),
+                React.createElement("div", { className: "k-form-field k-col-span-1" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesBorderColor, messages[keys.tablePropertiesBorderColor])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(ColorPicker, { ref: borderColor, defaultValue: defaults.borderColor }))),
+                React.createElement("div", { className: "k-form-field k-col-span-2" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesBorderStyle, messages[keys.tablePropertiesBorderStyle])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(DropDownList, { ref: borderStyle, defaultValue: borderStyles.find(function (s) { return s.value === defaults.borderStyle; }), popupSettings: popupSettings, data: borderStyles.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), textField: 'text', dataItemKey: 'value' }))),
+                React.createElement("div", { className: "k-form-field k-col-span-full" },
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(Checkbox, { ref: collapseBorders, className: "k-checkbox-wrap", label: loc.toLanguageString(keys.tablePropertiesCollapseBorders, messages[keys.tablePropertiesCollapseBorders]), defaultChecked: defaults.collapseBorders })))))));
+    var advanced = (React.createElement("div", { className: "k-form k-form-md" },
+        React.createElement("fieldset", { className: "k-form-fieldset" },
+            React.createElement("div", { className: "k-form-layout k-d-grid" },
+                React.createElement("div", { className: "k-form-field" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesId, messages[keys.tablePropertiesId])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(TextBox, { ref: id, defaultValue: defaults.id }))),
+                React.createElement("div", { className: "k-form-field" },
+                    React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesCssClass, messages[keys.tablePropertiesCssClass])),
+                    React.createElement("div", { className: "k-form-field-wrap" },
+                        React.createElement(TextBox, { ref: className, defaultValue: defaults.className }))),
+                React.createElement("fieldset", { className: "k-form-fieldset" },
+                    React.createElement("legend", { className: "k-form-legend" }, loc.toLanguageString(keys.tablePropertiesAccessibility, messages[keys.tablePropertiesAccessibility])),
+                    React.createElement("div", { className: "k-d-grid k-grid-cols-4 k-gap-x-4" },
+                        React.createElement("div", { className: "k-form-field k-col-span-full" },
+                            React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesCaption, messages[keys.tablePropertiesCaption])),
+                            React.createElement("div", { className: "k-form-field-wrap" },
+                                React.createElement(TextBox, { ref: caption, defaultValue: defaults.caption }))),
+                        React.createElement("div", { className: "k-form-field k-col-span-2" },
+                            React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesCaptionPosition, messages[keys.tablePropertiesCaptionPosition])),
+                            React.createElement("div", { className: "k-form-field-wrap" },
+                                React.createElement(DropDownList, { ref: captionPosition, defaultValue: captionPositionData.find(function (i) { return i.value === defaults.captionPosition; }), data: captionPositionData.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), popupSettings: popupSettings, textField: 'text', dataItemKey: 'value', valueRender: valueRenderWithIcon, itemRender: itemRenderWithIcon }))),
+                        React.createElement("div", { className: "k-form-field k-col-span-2" },
+                            React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesCaptionAlignment, messages[keys.tablePropertiesCaptionAlignment])),
+                            React.createElement("div", { className: "k-form-field-wrap" },
+                                React.createElement(DropDownList, { ref: captionAlignment, defaultValue: alignData.find(function (i) { return i.value === defaults.captionAlignment; }), data: alignData.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), popupSettings: popupSettings, textField: 'text', dataItemKey: 'value', valueRender: valueRenderWithIcon, itemRender: itemRenderWithIcon }))),
+                        React.createElement("div", { className: "k-form-field k-col-span-1" },
+                            React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesHeaderRows, messages[keys.tablePropertiesHeaderRows])),
+                            React.createElement("div", { className: "k-form-field-wrap" },
+                                React.createElement(NumericTextBox, { ref: headerRows, defaultValue: defaults.headerRows, min: 0 }))),
+                        React.createElement("div", { className: "k-form-field k-col-span-1" },
+                            React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesHeaderCols, messages[keys.tablePropertiesHeaderCols])),
+                            React.createElement("div", { className: "k-form-field-wrap" },
+                                React.createElement(NumericTextBox, { ref: headerColumns, defaultValue: defaults.headerColumns, min: 0 }))),
+                        React.createElement("div", { className: "k-form-field k-col-span-2" },
+                            React.createElement("label", { className: "k-label k-form-label" }, loc.toLanguageString(keys.tablePropertiesAssociateHeaders, messages[keys.tablePropertiesAssociateHeaders])),
+                            React.createElement("div", { className: "k-form-field-wrap" },
+                                React.createElement(DropDownList, { ref: associateHeaders, defaultValue: associateHeadersData[0], data: associateHeadersData.map(function (i) { return (__assign(__assign({}, i), { text: loc.toLanguageString(i.textKey, i.text) })); }), popupSettings: popupSettings, textField: 'text', dataItemKey: 'value' })))))))));
+    var content = (React.createElement(TabStrip, { selected: selected, onSelect: onSelect, animation: false, keepTabsMounted: true },
+        React.createElement(TabStripTab, { title: loc.toLanguageString(keys.tablePropertiesGeneral, messages[keys.tablePropertiesGeneral]) }, general),
+        React.createElement(TabStripTab, { title: loc.toLanguageString(keys.tablePropertiesAdvanced, messages[keys.tablePropertiesAdvanced]) }, advanced)));
+    var actionButtons = [(React.createElement(Button, { themeColor: 'primary', key: "save", onClick: onSave }, loc.toLanguageString(keys.tablePropertiesSave, messages[keys.tablePropertiesSave]))), (React.createElement(Button, { onClick: props.onClose, key: "cancel" }, loc.toLanguageString(keys.tablePropertiesCancel, messages[keys.tablePropertiesCancel])))];
+    return (React.createElement(Window, { className: 'k-editor-window k-editor-table-wizard-window', title: loc.toLanguageString(keys.tableProperties, messages[keys.tableProperties]), onClose: props.onClose, key: "dialog", style: { userSelect: 'none' }, width: 480, height: 630, modal: true, minimizeButton: function () { return null; }, maximizeButton: function () { return null; }, resizable: false },
+        content,
+        React.createElement.apply(React, __spreadArray([WindowActionsBar, { layout: 'start' }], actionButtons, false))));
+};