@gpa-gemstone/react-table 1.2.44 → 1.2.46

package/lib/AdjustableTable/AdjustableTable.js

@@ -1,273 +1,273 @@
-"use strict";
-//  ******************************************************************************************************
-//  Adjustable.tsx - Gbtc
-//
-//  Copyright © 2023, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  11/18/2023 - C. Lackner
-//       Generated original version of source code.
-//
-//  ******************************************************************************************************
-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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var _ = require("lodash");
-var Column_1 = require("./Column");
-var AdjustableColumn_1 = require("./AdjustableColumn");
-function AdjustableTable(props) {
-    var _a, _b, _c, _d;
-    var tblref = React.useRef(null);
-    var _e = React.useState(false), fixLayout = _e[0], setFixLayout = _e[1];
-    var _f = React.useState(0), currentTableWidth = _f[0], setCurrentTableWidth = _f[1];
-    var _g = React.useState(new Map()), fixedWidths = _g[0], setFixedWidths = _g[1];
-    var _h = React.useState(new Map()), adjustedWidths = _h[0], setAdjustedWidths = _h[1];
-    var _j = React.useState((_b = (_a = React.Children.map(props.children, function (element) {
-        if (!React.isValidElement(element))
-            return undefined;
-        if (element.type === Column_1.default)
-            return element.props.Key;
-        return undefined;
-    })) === null || _a === void 0 ? void 0 : _a.filter(function (s) { return s !== undefined; })) !== null && _b !== void 0 ? _b : []), fixedkeys = _j[0], setFixedKeys = _j[1];
-    var _k = React.useState((_d = (_c = React.Children.map(props.children, function (element) {
-        if (!React.isValidElement(element))
-            return undefined;
-        if (element.type === AdjustableColumn_1.default)
-            return element.props.Key;
-        return undefined;
-    })) === null || _c === void 0 ? void 0 : _c.filter(function (d) { return d !== undefined; })) !== null && _d !== void 0 ? _d : []), adjKeys = _k[0], setAdjKeys = _k[1];
-    var setTableWidth = React.useCallback(_.debounce(function () { var _a, _b; setCurrentTableWidth((_b = (_a = tblref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0); }, 500), []);
-    React.useEffect(function () {
-        var element = tblref === null || tblref === void 0 ? void 0 : tblref.current;
-        if (element == null)
-            return;
-        var observer = new ResizeObserver(function () {
-            setTableWidth();
-        });
-        observer.observe(element);
-        return function () {
-            observer.disconnect();
-        };
-    }, []);
-    React.useEffect(function () {
-        var _a, _b;
-        var keysFixed = (_b = (_a = React.Children.map(props.children, function (element) {
-            if (!React.isValidElement(element))
-                return undefined;
-            if (element.type === Column_1.default)
-                return element.props.Key;
-            return undefined;
-        })) === null || _a === void 0 ? void 0 : _a.filter(function (k) { return k !== undefined; })) !== null && _b !== void 0 ? _b : [];
-        var keysAdj = React.Children.map(props.children, function (element) {
-            if (!React.isValidElement(element))
-                return undefined;
-            if (element.type === AdjustableColumn_1.default)
-                return element.props.Key;
-            return undefined;
-        });
-        setFixedKeys(function (k) {
-            var _a;
-            var u = (_a = keysFixed === null || keysFixed === void 0 ? void 0 : keysFixed.filter(function (d) { return d !== undefined; })) !== null && _a !== void 0 ? _a : [];
-            if (_.isEqual(k, u))
-                return k;
-            return u;
-        });
-        setAdjKeys(function (k) {
-            var _a;
-            var u = (_a = keysAdj === null || keysAdj === void 0 ? void 0 : keysAdj.filter(function (d) { return d !== undefined; })) !== null && _a !== void 0 ? _a : [];
-            if (_.isEqual(k, u))
-                return k;
-            return u;
-        });
-    }, [props.children]);
-    React.useEffect(function () {
-        setFixLayout(false);
-        setFixedWidths(new Map());
-        setAdjustedWidths(new Map());
-    }, [fixedkeys.length, adjKeys.length, currentTableWidth]);
-    React.useEffect(function () {
-        var fixed = fixedkeys.length == fixedWidths.size;
-        var adj = adjKeys.length == adjustedWidths.size;
-        setFixLayout(fixed && adj);
-    }, [fixedkeys, adjKeys, fixedWidths, adjustedWidths]);
-    var handleSort = React.useCallback(function (data, event) {
-        if (data.colKey !== null)
-            props.OnSort(data, event);
-    }, [props.OnSort]);
-    var getWidth = React.useCallback(function (key, type) {
-        var _a;
-        if (type === 'fixed' && fixedWidths.has(key))
-            return fixedWidths.get(key);
-        if (type === 'adjustable' && adjustedWidths.has(key))
-            return (_a = adjustedWidths.get(key)) === null || _a === void 0 ? void 0 : _a.width;
-        return undefined;
-    }, [fixedWidths, adjustedWidths]);
-    var getMinWidth = React.useCallback(function (key) {
-        var _a, _b;
-        if (adjustedWidths.has(key))
-            return (_b = (_a = adjustedWidths.get(key)) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : 100;
-        return 100;
-    }, [fixedWidths, adjustedWidths]);
-    var getPrevKey = React.useCallback(function (key) {
-        var i = adjKeys.findIndex(function (a) { return a === key; });
-        if (i < 1)
-            return undefined;
-        return adjKeys[i - 1];
-    }, [adjKeys]);
-    var setWidth = React.useCallback(function (key, width, type, minWidth) {
-        var _a, _b;
-        if (type === 'fixed')
-            setFixedWidths(function (d) {
-                var u = new Map(d);
-                u.set(key, width);
-                return u;
-            });
-        if (type === 'adjustable') {
-            if (adjustedWidths.has(key))
-                minWidth = (_b = (_a = adjustedWidths.get(key)) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : 100;
-            setAdjustedWidths(function (d) {
-                var u = new Map(d);
-                u.set(key, { width: width, minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : 100 });
-                return u;
-            });
-        }
-    }, []);
-    return (React.createElement("table", { className: props.TableClass !== undefined ? props.TableClass : '', style: props.TableStyle, ref: tblref },
-        React.createElement(Header, { Class: props.TheadClass, Style: props.TheadStyle, SortKey: props.SortKey, Ascending: props.Ascending, OnSort: handleSort, SetWidth: setWidth, GetWidth: getWidth, GetMinWidth: getMinWidth, GetLeftKey: getPrevKey, LastColumn: props.LastColumn, FixedLayout: fixLayout }, props.children),
-        React.createElement(Rows, { DragStart: props.OnDragStart, Data: props.Data, RowStyle: props.RowStyle, BodyStyle: props.TbodyStyle, BodyClass: props.TbodyClass, OnClick: props.OnClick, Selected: props.Selected, KeySelector: props.KeySelector, AdjWidth: adjustedWidths, FixedWidth: fixedWidths, FixedLayout: fixLayout }, props.children),
-        props.LastRow !== undefined ? React.createElement("tr", { style: (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {}, key: -1 }, props.LastRow) : null));
-}
-exports.default = AdjustableTable;
-function Rows(props) {
-    if (props.Data.length === 0)
-        return null;
-    var getWidth = React.useCallback(function (key, type) {
-        var _a;
-        if (type === 'fixed' && props.FixedWidth.has(key))
-            return props.FixedWidth.get(key);
-        if (type === 'adjustable' && props.AdjWidth.has(key))
-            return (_a = props.AdjWidth.get(key)) === null || _a === void 0 ? void 0 : _a.width;
-        return undefined;
-    }, [props.FixedWidth, props.AdjWidth]);
-    return (React.createElement("tbody", { style: props.BodyStyle, className: props.BodyClass }, props.Data.map(function (d, i) {
-        var style = (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {};
-        if (style.cursor === undefined && (props.OnClick !== undefined || props.DragStart !== undefined))
-            style.cursor = 'pointer';
-        if (props.Selected !== undefined && props.Selected(d, i))
-            style.backgroundColor = 'yellow';
-        var key = props.KeySelector(d, i);
-        return React.createElement("tr", { key: key, style: __assign({ display: (props.FixedLayout ? 'block' : undefined) }, style) },
-            React.Children.map(props.children, function (element) {
-                if (!React.isValidElement(element))
-                    return null;
-                if (element.type === AdjustableColumn_1.default)
-                    return React.createElement(Column_1.ColumnDataWrapper, __assign({}, element.props, { width: getWidth(element.props.Key, 'adjustable'), item: d, index: i, key: element.key, fixedLayout: props.FixedLayout, onClick: props.OnClick, dragStart: props.DragStart, sel: true }));
-                return null;
-            }),
-            React.Children.map(props.children, function (element) {
-                if (!React.isValidElement(element))
-                    return null;
-                if (element.type === Column_1.default)
-                    return React.createElement(Column_1.ColumnDataWrapper, __assign({}, element.props, { width: getWidth(element.props.Key, 'fixed'), item: d, index: i, key: element.key, fixedLayout: props.FixedLayout, onClick: props.OnClick, dragStart: props.DragStart }));
-                return null;
-            }));
-    })));
-}
-function Header(props) {
-    var trRef = React.useRef(null);
-    var _a = React.useState(undefined), adjKeys = _a[0], setAdjKeys = _a[1];
-    var _b = React.useState(0), mouseDown = _b[0], setMouseDown = _b[1];
-    var _c = React.useState(0), deltaX = _c[0], setDeltaX = _c[1];
-    var finishAdjustment = function (e) {
-        var _a, _b;
-        var d = deltaX;
-        if (adjKeys === undefined)
-            return;
-        var w = limitMovement(adjKeys[0], adjKeys[1], d);
-        var leftWidth = (_a = props.GetWidth(adjKeys[0], 'adjustable')) !== null && _a !== void 0 ? _a : 100;
-        var rightWidth = (_b = props.GetWidth(adjKeys[1], 'adjustable')) !== null && _b !== void 0 ? _b : 100;
-        if (Math.abs(w) > 5) {
-            props.SetWidth(adjKeys[0], (leftWidth - w), 'adjustable');
-            props.SetWidth(adjKeys[1], (rightWidth + w), 'adjustable');
-        }
-        setMouseDown(0);
-        setAdjKeys(undefined);
-        setDeltaX(0);
-    };
-    var onMove = React.useCallback(function (e) {
-        if (adjKeys === undefined)
-            return;
-        var w = limitMovement(adjKeys[0], adjKeys[1], mouseDown - e.screenX);
-        setDeltaX(w);
-    }, [mouseDown, adjKeys]);
-    function limitMovement(leftKey, rightKey, delta) {
-        var w = delta;
-        var leftWidth = props.GetWidth(leftKey, 'adjustable');
-        var rightWidth = props.GetWidth(rightKey, 'adjustable');
-        var leftMin = props.GetMinWidth(leftKey);
-        var rightMin = props.GetMinWidth(rightKey);
-        if ((leftWidth !== null && leftWidth !== void 0 ? leftWidth : 100) - w < leftMin) {
-            w = (leftWidth !== null && leftWidth !== void 0 ? leftWidth : 100) - leftMin;
-        }
-        if ((rightWidth !== null && rightWidth !== void 0 ? rightWidth : 100) + w < rightMin) {
-            w = -(rightWidth !== null && rightWidth !== void 0 ? rightWidth : 100) - rightMin;
-        }
-        return w;
-    }
-    var adjustWidth = function (w, key) {
-        if (w === undefined)
-            return w;
-        if (adjKeys === undefined)
-            return w;
-        if (key === adjKeys[0])
-            return w - deltaX;
-        if (key === adjKeys[1])
-            return w + deltaX;
-        return w;
-    };
-    return (React.createElement("thead", { className: props.Class, style: props.Style, onMouseMove: function (e) { onMove(e.nativeEvent); e.stopPropagation(); }, onMouseUp: function (e) { finishAdjustment(e.nativeEvent); e.stopPropagation(); }, onMouseLeave: function (e) { finishAdjustment(e.nativeEvent); e.stopPropagation(); } },
-        React.createElement("tr", { ref: trRef },
-            React.Children.map(props.children, function (element) {
-                var _a;
-                if (!React.isValidElement(element))
-                    return null;
-                if (element.type === AdjustableColumn_1.default)
-                    return React.createElement(AdjustableColumn_1.AdjColumnHeaderWrapper, __assign({}, element.props, { setWidth: function (w, min) { return props.SetWidth(element.props.Key, Math.floor(w), 'adjustable', min); }, onSort: function (key, e, fld) { return props.OnSort({ colKey: key, colField: fld, ascending: props.Ascending }, e); }, sorted: props.SortKey === element.props.Key && ((_a = element.props.AllowSort) !== null && _a !== void 0 ? _a : true), asc: props.Ascending, width: adjustWidth(props.GetWidth(element.props.Key, 'adjustable'), element.props.Key), startAdjustment: function (e) {
-                            if (props.GetLeftKey(element.props.Key) !== undefined)
-                                setAdjKeys([props.GetLeftKey(element.props.Key), element.props.Key]);
-                            setMouseDown(e.screenX);
-                        }, fixedLayout: props.FixedLayout }));
-                return null;
-            }),
-            React.Children.map(props.children, function (element) {
-                var _a;
-                if (!React.isValidElement(element))
-                    return null;
-                if (element.type === Column_1.default)
-                    return React.createElement(Column_1.ColumnHeaderWrapper, __assign({}, element.props, { setWidth: function (w) { return props.SetWidth(element.props.Key, Math.floor(w), 'fixed'); }, onSort: function (key, e, fld) { return props.OnSort({ colKey: key, colField: fld, ascending: props.Ascending }, e); }, sorted: props.SortKey === element.props.Key && ((_a = element.props.AllowSort) !== null && _a !== void 0 ? _a : true), asc: props.Ascending, width: props.GetWidth(element.props.Key, 'fixed'), fixedLayout: props.FixedLayout }));
-                return null;
-            }),
-            React.createElement("th", { style: { width: 17, padding: 0 } }, props.LastColumn))));
-}
+"use strict";
+//  ******************************************************************************************************
+//  Adjustable.tsx - Gbtc
+//
+//  Copyright © 2023, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  11/18/2023 - C. Lackner
+//       Generated original version of source code.
+//
+//  ******************************************************************************************************
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AdjustableTable;
+var React = require("react");
+var _ = require("lodash");
+var Column_1 = require("./Column");
+var AdjustableColumn_1 = require("./AdjustableColumn");
+function AdjustableTable(props) {
+    var _a, _b, _c, _d;
+    var tblref = React.useRef(null);
+    var _e = React.useState(false), fixLayout = _e[0], setFixLayout = _e[1];
+    var _f = React.useState(0), currentTableWidth = _f[0], setCurrentTableWidth = _f[1];
+    var _g = React.useState(new Map()), fixedWidths = _g[0], setFixedWidths = _g[1];
+    var _h = React.useState(new Map()), adjustedWidths = _h[0], setAdjustedWidths = _h[1];
+    var _j = React.useState((_b = (_a = React.Children.map(props.children, function (element) {
+        if (!React.isValidElement(element))
+            return undefined;
+        if (element.type === Column_1.default)
+            return element.props.Key;
+        return undefined;
+    })) === null || _a === void 0 ? void 0 : _a.filter(function (s) { return s !== undefined; })) !== null && _b !== void 0 ? _b : []), fixedkeys = _j[0], setFixedKeys = _j[1];
+    var _k = React.useState((_d = (_c = React.Children.map(props.children, function (element) {
+        if (!React.isValidElement(element))
+            return undefined;
+        if (element.type === AdjustableColumn_1.default)
+            return element.props.Key;
+        return undefined;
+    })) === null || _c === void 0 ? void 0 : _c.filter(function (d) { return d !== undefined; })) !== null && _d !== void 0 ? _d : []), adjKeys = _k[0], setAdjKeys = _k[1];
+    var setTableWidth = React.useCallback(_.debounce(function () { var _a, _b; setCurrentTableWidth((_b = (_a = tblref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0); }, 500), []);
+    React.useEffect(function () {
+        var element = tblref === null || tblref === void 0 ? void 0 : tblref.current;
+        if (element == null)
+            return;
+        var observer = new ResizeObserver(function () {
+            setTableWidth();
+        });
+        observer.observe(element);
+        return function () {
+            observer.disconnect();
+        };
+    }, []);
+    React.useEffect(function () {
+        var _a, _b;
+        var keysFixed = (_b = (_a = React.Children.map(props.children, function (element) {
+            if (!React.isValidElement(element))
+                return undefined;
+            if (element.type === Column_1.default)
+                return element.props.Key;
+            return undefined;
+        })) === null || _a === void 0 ? void 0 : _a.filter(function (k) { return k !== undefined; })) !== null && _b !== void 0 ? _b : [];
+        var keysAdj = React.Children.map(props.children, function (element) {
+            if (!React.isValidElement(element))
+                return undefined;
+            if (element.type === AdjustableColumn_1.default)
+                return element.props.Key;
+            return undefined;
+        });
+        setFixedKeys(function (k) {
+            var _a;
+            var u = (_a = keysFixed === null || keysFixed === void 0 ? void 0 : keysFixed.filter(function (d) { return d !== undefined; })) !== null && _a !== void 0 ? _a : [];
+            if (_.isEqual(k, u))
+                return k;
+            return u;
+        });
+        setAdjKeys(function (k) {
+            var _a;
+            var u = (_a = keysAdj === null || keysAdj === void 0 ? void 0 : keysAdj.filter(function (d) { return d !== undefined; })) !== null && _a !== void 0 ? _a : [];
+            if (_.isEqual(k, u))
+                return k;
+            return u;
+        });
+    }, [props.children]);
+    React.useEffect(function () {
+        setFixLayout(false);
+        setFixedWidths(new Map());
+        setAdjustedWidths(new Map());
+    }, [fixedkeys.length, adjKeys.length, currentTableWidth]);
+    React.useEffect(function () {
+        var fixed = fixedkeys.length == fixedWidths.size;
+        var adj = adjKeys.length == adjustedWidths.size;
+        setFixLayout(fixed && adj);
+    }, [fixedkeys, adjKeys, fixedWidths, adjustedWidths]);
+    var handleSort = React.useCallback(function (data, event) {
+        if (data.colKey !== null)
+            props.OnSort(data, event);
+    }, [props.OnSort]);
+    var getWidth = React.useCallback(function (key, type) {
+        var _a;
+        if (type === 'fixed' && fixedWidths.has(key))
+            return fixedWidths.get(key);
+        if (type === 'adjustable' && adjustedWidths.has(key))
+            return (_a = adjustedWidths.get(key)) === null || _a === void 0 ? void 0 : _a.width;
+        return undefined;
+    }, [fixedWidths, adjustedWidths]);
+    var getMinWidth = React.useCallback(function (key) {
+        var _a, _b;
+        if (adjustedWidths.has(key))
+            return (_b = (_a = adjustedWidths.get(key)) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : 100;
+        return 100;
+    }, [fixedWidths, adjustedWidths]);
+    var getPrevKey = React.useCallback(function (key) {
+        var i = adjKeys.findIndex(function (a) { return a === key; });
+        if (i < 1)
+            return undefined;
+        return adjKeys[i - 1];
+    }, [adjKeys]);
+    var setWidth = React.useCallback(function (key, width, type, minWidth) {
+        var _a, _b;
+        if (type === 'fixed')
+            setFixedWidths(function (d) {
+                var u = new Map(d);
+                u.set(key, width);
+                return u;
+            });
+        if (type === 'adjustable') {
+            if (adjustedWidths.has(key))
+                minWidth = (_b = (_a = adjustedWidths.get(key)) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : 100;
+            setAdjustedWidths(function (d) {
+                var u = new Map(d);
+                u.set(key, { width: width, minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : 100 });
+                return u;
+            });
+        }
+    }, []);
+    return (React.createElement("table", { className: props.TableClass !== undefined ? props.TableClass : '', style: props.TableStyle, ref: tblref },
+        React.createElement(Header, { Class: props.TheadClass, Style: props.TheadStyle, SortKey: props.SortKey, Ascending: props.Ascending, OnSort: handleSort, SetWidth: setWidth, GetWidth: getWidth, GetMinWidth: getMinWidth, GetLeftKey: getPrevKey, LastColumn: props.LastColumn, FixedLayout: fixLayout }, props.children),
+        React.createElement(Rows, { DragStart: props.OnDragStart, Data: props.Data, RowStyle: props.RowStyle, BodyStyle: props.TbodyStyle, BodyClass: props.TbodyClass, OnClick: props.OnClick, Selected: props.Selected, KeySelector: props.KeySelector, AdjWidth: adjustedWidths, FixedWidth: fixedWidths, FixedLayout: fixLayout }, props.children),
+        props.LastRow !== undefined ? React.createElement("tr", { style: (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {}, key: -1 }, props.LastRow) : null));
+}
+function Rows(props) {
+    if (props.Data.length === 0)
+        return null;
+    var getWidth = React.useCallback(function (key, type) {
+        var _a;
+        if (type === 'fixed' && props.FixedWidth.has(key))
+            return props.FixedWidth.get(key);
+        if (type === 'adjustable' && props.AdjWidth.has(key))
+            return (_a = props.AdjWidth.get(key)) === null || _a === void 0 ? void 0 : _a.width;
+        return undefined;
+    }, [props.FixedWidth, props.AdjWidth]);
+    return (React.createElement("tbody", { style: props.BodyStyle, className: props.BodyClass }, props.Data.map(function (d, i) {
+        var style = (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {};
+        if (style.cursor === undefined && (props.OnClick !== undefined || props.DragStart !== undefined))
+            style.cursor = 'pointer';
+        if (props.Selected !== undefined && props.Selected(d, i))
+            style.backgroundColor = 'yellow';
+        var key = props.KeySelector(d, i);
+        return React.createElement("tr", { key: key, style: __assign({ display: (props.FixedLayout ? 'block' : undefined) }, style) },
+            React.Children.map(props.children, function (element) {
+                if (!React.isValidElement(element))
+                    return null;
+                if (element.type === AdjustableColumn_1.default)
+                    return React.createElement(Column_1.ColumnDataWrapper, __assign({}, element.props, { width: getWidth(element.props.Key, 'adjustable'), item: d, index: i, key: element.key, fixedLayout: props.FixedLayout, onClick: props.OnClick, dragStart: props.DragStart, sel: true }));
+                return null;
+            }),
+            React.Children.map(props.children, function (element) {
+                if (!React.isValidElement(element))
+                    return null;
+                if (element.type === Column_1.default)
+                    return React.createElement(Column_1.ColumnDataWrapper, __assign({}, element.props, { width: getWidth(element.props.Key, 'fixed'), item: d, index: i, key: element.key, fixedLayout: props.FixedLayout, onClick: props.OnClick, dragStart: props.DragStart }));
+                return null;
+            }));
+    })));
+}
+function Header(props) {
+    var trRef = React.useRef(null);
+    var _a = React.useState(undefined), adjKeys = _a[0], setAdjKeys = _a[1];
+    var _b = React.useState(0), mouseDown = _b[0], setMouseDown = _b[1];
+    var _c = React.useState(0), deltaX = _c[0], setDeltaX = _c[1];
+    var finishAdjustment = function (e) {
+        var _a, _b;
+        var d = deltaX;
+        if (adjKeys === undefined)
+            return;
+        var w = limitMovement(adjKeys[0], adjKeys[1], d);
+        var leftWidth = (_a = props.GetWidth(adjKeys[0], 'adjustable')) !== null && _a !== void 0 ? _a : 100;
+        var rightWidth = (_b = props.GetWidth(adjKeys[1], 'adjustable')) !== null && _b !== void 0 ? _b : 100;
+        if (Math.abs(w) > 5) {
+            props.SetWidth(adjKeys[0], (leftWidth - w), 'adjustable');
+            props.SetWidth(adjKeys[1], (rightWidth + w), 'adjustable');
+        }
+        setMouseDown(0);
+        setAdjKeys(undefined);
+        setDeltaX(0);
+    };
+    var onMove = React.useCallback(function (e) {
+        if (adjKeys === undefined)
+            return;
+        var w = limitMovement(adjKeys[0], adjKeys[1], mouseDown - e.screenX);
+        setDeltaX(w);
+    }, [mouseDown, adjKeys]);
+    function limitMovement(leftKey, rightKey, delta) {
+        var w = delta;
+        var leftWidth = props.GetWidth(leftKey, 'adjustable');
+        var rightWidth = props.GetWidth(rightKey, 'adjustable');
+        var leftMin = props.GetMinWidth(leftKey);
+        var rightMin = props.GetMinWidth(rightKey);
+        if ((leftWidth !== null && leftWidth !== void 0 ? leftWidth : 100) - w < leftMin) {
+            w = (leftWidth !== null && leftWidth !== void 0 ? leftWidth : 100) - leftMin;
+        }
+        if ((rightWidth !== null && rightWidth !== void 0 ? rightWidth : 100) + w < rightMin) {
+            w = -(rightWidth !== null && rightWidth !== void 0 ? rightWidth : 100) - rightMin;
+        }
+        return w;
+    }
+    var adjustWidth = function (w, key) {
+        if (w === undefined)
+            return w;
+        if (adjKeys === undefined)
+            return w;
+        if (key === adjKeys[0])
+            return w - deltaX;
+        if (key === adjKeys[1])
+            return w + deltaX;
+        return w;
+    };
+    return (React.createElement("thead", { className: props.Class, style: props.Style, onMouseMove: function (e) { onMove(e.nativeEvent); e.stopPropagation(); }, onMouseUp: function (e) { finishAdjustment(e.nativeEvent); e.stopPropagation(); }, onMouseLeave: function (e) { finishAdjustment(e.nativeEvent); e.stopPropagation(); } },
+        React.createElement("tr", { ref: trRef },
+            React.Children.map(props.children, function (element) {
+                var _a;
+                if (!React.isValidElement(element))
+                    return null;
+                if (element.type === AdjustableColumn_1.default)
+                    return React.createElement(AdjustableColumn_1.AdjColumnHeaderWrapper, __assign({}, element.props, { setWidth: function (w, min) { return props.SetWidth(element.props.Key, Math.floor(w), 'adjustable', min); }, onSort: function (key, e, fld) { return props.OnSort({ colKey: key, colField: fld, ascending: props.Ascending }, e); }, sorted: props.SortKey === element.props.Key && ((_a = element.props.AllowSort) !== null && _a !== void 0 ? _a : true), asc: props.Ascending, width: adjustWidth(props.GetWidth(element.props.Key, 'adjustable'), element.props.Key), startAdjustment: function (e) {
+                            if (props.GetLeftKey(element.props.Key) !== undefined)
+                                setAdjKeys([props.GetLeftKey(element.props.Key), element.props.Key]);
+                            setMouseDown(e.screenX);
+                        }, fixedLayout: props.FixedLayout }));
+                return null;
+            }),
+            React.Children.map(props.children, function (element) {
+                var _a;
+                if (!React.isValidElement(element))
+                    return null;
+                if (element.type === Column_1.default)
+                    return React.createElement(Column_1.ColumnHeaderWrapper, __assign({}, element.props, { setWidth: function (w) { return props.SetWidth(element.props.Key, Math.floor(w), 'fixed'); }, onSort: function (key, e, fld) { return props.OnSort({ colKey: key, colField: fld, ascending: props.Ascending }, e); }, sorted: props.SortKey === element.props.Key && ((_a = element.props.AllowSort) !== null && _a !== void 0 ? _a : true), asc: props.Ascending, width: props.GetWidth(element.props.Key, 'fixed'), fixedLayout: props.FixedLayout }));
+                return null;
+            }),
+            React.createElement("th", { style: { width: 17, padding: 0 } }, props.LastColumn))));
+}