@gpa-gemstone/react-table 1.2.57 → 1.2.59

package/lib/index.js

@@ -24,24 +24,18 @@
 //
 //  ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Paging = exports.Rows = exports.DynamicTable = exports.SearchableTable = exports.SelectTable = exports.ReactTable = void 0;
-const Table_1 = require("./Table");
-Object.defineProperty(exports, "Rows", { enumerable: true, get: function () { return Table_1.Rows; } });
-const SelectTable_1 = require("./SelectTable");
-Object.defineProperty(exports, "SelectTable", { enumerable: true, get: function () { return SelectTable_1.SelectTable; } });
-const SearchableTable_1 = require("./SearchableTable");
-Object.defineProperty(exports, "SearchableTable", { enumerable: true, get: function () { return SearchableTable_1.SearchableTable; } });
-const DynamicTable_1 = require("./DynamicTable");
-Object.defineProperty(exports, "DynamicTable", { enumerable: true, get: function () { return DynamicTable_1.DynamicTable; } });
+exports.Paging = exports.ConfigurableColumn = exports.ConfigurableTable = exports.FilterableColumn = exports.Column = exports.Table = exports.ReactTableProps = void 0;
 const Paging_1 = require("./Paging");
 exports.Paging = Paging_1.default;
-const Table_2 = require("./AdjustableTable/Table");
-const Column_1 = require("./AdjustableTable/Column");
-const AdjustableColumn_1 = require("./AdjustableTable/AdjustableColumn");
-const ReactTable = {
-    Table: Table_2.default,
-    Column: Column_1.default,
-    AdjustableColumn: AdjustableColumn_1.default,
-};
-exports.ReactTable = ReactTable;
-exports.default = Table_1.default;
+const ReactTableProps = require("./Table/Types");
+exports.ReactTableProps = ReactTableProps;
+const Table_1 = require("./Table/Table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
+const Column_1 = require("./Table/Column");
+Object.defineProperty(exports, "Column", { enumerable: true, get: function () { return Column_1.Column; } });
+const FilterableColumn_1 = require("./Table/FilterableColumn");
+exports.FilterableColumn = FilterableColumn_1.default;
+const ConfigurableTable_1 = require("./ConfigurableTable/ConfigurableTable");
+exports.ConfigurableTable = ConfigurableTable_1.default;
+const ConfigurableColumn_1 = require("./ConfigurableTable/ConfigurableColumn");
+exports.ConfigurableColumn = ConfigurableColumn_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-table",
-  "version": "1.2.57",
+  "version": "1.2.59",
   "description": "Table for GPA web applications",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -35,6 +35,7 @@
     "@types/jest": "^27.0.0",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
+    "@types/react-portal": "4.0.4",
     "eslint": "^8.43.0",
     "jest": "^29.0.0",
     "prettier": "^2.3.2",
@@ -42,12 +43,15 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/gpa-symbols": "0.0.44",
-    "@gpa-gemstone/helper-functions": "0.0.36",
+    "@gpa-gemstone/gpa-symbols": "0.0.46",
+    "@gpa-gemstone/helper-functions": "0.0.37",
+    "@gpa-gemstone/react-interactive": "1.0.138",
     "@types/lodash": "^4.14.171",
     "@types/react": "^17.0.14",
     "lodash": "^4.17.21",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
+    "react-portal": "4.2.2"
   },
   "publishConfig": {"access": "public"}
 }

package/lib/AdjustableTable/AdjustableColumn.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { IColumnProps, IDataWrapperProps, IHeaderWrapperProps } from './Column';
-export default function AdjustableColumn<T>(props: React.PropsWithChildren<IColumnProps<T>>): JSX.Element;
-interface IAdjustableHeaderWrapperProps extends IHeaderWrapperProps {
-    adjustment: number;
-    startAdjustment: React.MouseEventHandler<HTMLDivElement>;
-    setMinWidth: (w: number) => void;
-    minWidth?: number;
-    setMaxWidth: (w: number) => void;
-    maxWidth?: number;
-    extraWidth: number;
-}
-export declare function AdjustableColumnHeaderWrapper(props: React.PropsWithChildren<IAdjustableHeaderWrapperProps>): JSX.Element | null;
-interface IAdjustableDataWrapperProps extends IDataWrapperProps {
-    adjustment?: number;
-}
-export declare function AdjustableColumnDataWrapper(props: React.PropsWithChildren<IAdjustableDataWrapperProps>): JSX.Element | null;
-export {};

package/lib/AdjustableTable/AdjustableColumn.js

@@ -1,187 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = AdjustableColumn;
-exports.AdjustableColumnHeaderWrapper = AdjustableColumnHeaderWrapper;
-exports.AdjustableColumnDataWrapper = AdjustableColumnDataWrapper;
-//  ******************************************************************************************************
-//  AdjustableColumn.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/19/2023 - C. Lackner
-//       Generated original version of source code.
-//  05/31/2024 - C. Lackner
-//       Refactored to fix sizing issues.
-//
-//  ******************************************************************************************************
-const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-const React = require("react");
-function AdjustableColumn(props) {
-    return React.createElement(React.Fragment, null, props.children);
-}
-function AdjustableColumnHeaderWrapper(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const thref = React.useRef(null);
-    const [mode, setMode] = React.useState('minWidth');
-    //const [width, setWidth] = React.useState<number>();
-    const [minWidth, setMinWidth] = React.useState();
-    const [maxWidth, setMaxWidth] = React.useState();
-    const [showBorder, setShowBorder] = React.useState(false);
-    const onHover = React.useCallback(() => { setShowBorder(true); }, []);
-    const onLeave = React.useCallback(() => { setShowBorder(false); }, []);
-    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
-    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
-    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
-    style.position = (_c = style.position) !== null && _c !== void 0 ? _c : 'relative';
-    style.borderTop = (_d = style.borderTop) !== null && _d !== void 0 ? _d : 'none';
-    style.minWidth = (_e = style.minWidth) !== null && _e !== void 0 ? _e : 100;
-    const isAuto = style.width == 'auto';
-    const isUndefined = style.width === undefined;
-    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined && mode === 'width') {
-        style.width = (props.width) + props.extraWidth;
-    }
-    if (mode === 'minWidth') {
-        style.width = style.minWidth;
-    }
-    if (mode === 'maxWidth') {
-        style.width = style.maxWidth;
-    }
-    if (mode === 'width' && props.adjustment !== undefined && props.adjustment !== 0 && style.width !== undefined) {
-        style.width = `calc(${formatwidth(style.width).toString()} ${props.adjustment < 0 ? '-' : '+'} ${Math.abs(props.adjustment).toString()}px)`;
-    }
-    if (style.cursor === undefined && ((_f = props.allowSort) !== null && _f !== void 0 ? _f : true)) {
-        style.cursor = 'pointer';
-    }
-    React.useLayoutEffect(() => {
-        var _a, _b, _c;
-        if (thref.current == null)
-            return;
-        if (mode == 'minWidth') {
-            const w = (_a = thref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-            if (w === undefined)
-                return;
-            if (w !== minWidth) {
-                setMinWidth(w);
-            }
-            if (maxWidth === undefined && style.maxWidth !== undefined) {
-                setMode('maxWidth');
-            }
-            else if (props.width === undefined) {
-                setMode('width');
-            }
-        }
-        if (mode == 'maxWidth') {
-            const w = (_b = thref.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
-            if (w === undefined)
-                return;
-            if (w !== maxWidth) {
-                setMaxWidth(w);
-            }
-            if (props.width === undefined) {
-                setMode('width');
-            }
-            else if (props.minWidth === undefined && style.minWidth !== undefined) {
-                setMode('minWidth');
-            }
-        }
-        if (mode == 'width') {
-            const w = (_c = thref.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width;
-            if (w === undefined)
-                return;
-            if (props.width === undefined || (w !== (props.width + props.extraWidth))) {
-                props.setWidth(w, isAuto, isUndefined);
-            }
-            if (maxWidth === undefined && style.maxWidth !== undefined) {
-                setMode('maxWidth');
-            }
-            else if (minWidth === undefined && style.minWidth !== undefined) {
-                setMode('minWidth');
-            }
-        }
-    });
-    React.useEffect(() => {
-        if (minWidth !== props.minWidth)
-            props.setMinWidth(minWidth);
-    }, [minWidth]);
-    React.useEffect(() => {
-        if (maxWidth !== props.maxWidth)
-            props.setMaxWidth(maxWidth);
-    }, [maxWidth]);
-    const onClick = React.useCallback((e) => {
-        var _a;
-        if ((_a = props.allowSort) !== null && _a !== void 0 ? _a : true)
-            props.onSort(e);
-    }, [props.onSort, props.allowSort]);
-    const onClickBorder = React.useCallback((e) => {
-        props.startAdjustment(e);
-    }, [props.startAdjustment]);
-    if (props.width != undefined && !props.enabled)
-        return null;
-    return React.createElement("th", { ref: thref, style: style, onClick: onClick, onDrag: (e) => { e.stopPropagation(); } },
-        React.createElement("div", { style: {
-                width: 5,
-                height: '100%',
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                opacity: showBorder ? 1 : 0,
-                background: '#e9ecef',
-                cursor: 'col-resize'
-            }, onMouseEnter: onHover, onMouseLeave: onLeave, onMouseDown: onClickBorder }),
-        props.sorted ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, props.asc ? React.createElement(gpa_symbols_1.ReactIcons.ArrowDropUp, null) : React.createElement(gpa_symbols_1.ReactIcons.ArrowDropDown, null)) : null,
-        React.createElement("div", { style: {
-                marginLeft: (props.sorted ? 25 : 0),
-            } }, (_g = props.children) !== null && _g !== void 0 ? _g : props.colKey));
-}
-function AdjustableColumnDataWrapper(props) {
-    var _a, _b;
-    const tdref = React.useRef(null);
-    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
-    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
-    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
-    const isAuto = style.width == 'auto';
-    const isUndefined = style.width === undefined;
-    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined) {
-        style.width = (props.width) + props.extraWidth;
-    }
-    if (props.dragStart !== undefined)
-        style.cursor = "grab";
-    React.useLayoutEffect(() => {
-        var _a;
-        if (tdref.current == null)
-            return;
-        const w = (_a = tdref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-        if (style.width === undefined && props.width === undefined) {
-            props.setWidth(w, isAuto, isUndefined);
-            return;
-        }
-        if (props.adjustment !== undefined && props.adjustment !== 0)
-            return;
-        if (w === undefined || (props.width !== undefined && w == (props.width + props.extraWidth)))
-            return;
-        props.setWidth(w, isAuto, isUndefined);
-    });
-    if (props.adjustment !== undefined && props.adjustment !== 0 && style.width !== undefined)
-        style.width = `calc(${formatwidth(style.width)} ${props.adjustment < 0 ? '-' : '+'} ${Math.abs(props.adjustment).toString()}px)`;
-    if (props.width != undefined && !props.enabled)
-        return null;
-    return (React.createElement("td", { ref: tdref, style: style, onClick: props.onClick, draggable: props.dragStart !== undefined, onDragStart: props.dragStart }, props.children));
-}
-function formatwidth(style) {
-    if (style.toString().endsWith('%') || style.toString().endsWith('px'))
-        return style;
-    return style.toString() + "px";
-}

package/lib/AdjustableTable/Column.d.ts

@@ -1,59 +0,0 @@
-import * as React from 'react';
-export interface IColumnProps<T> {
-    /**
-     * a unique Key for this Collumn
-     */
-    Key: string;
-    /**
-     * Flag indicating whether sorting by this Collumn is allowed
-     */
-    AllowSort?: boolean;
-    /**
-     * Optional - the Field to be used
-     */
-    Field?: keyof T;
-    /**
-     * The Default style for the th element
-     */
-    HeaderStyle?: React.CSSProperties;
-    /**
-     * The Default style for the td element
-     */
-    RowStyle?: React.CSSProperties;
-    /**
-     * Determines the Content to be displayed
-     * @param d the data to be turned into content
-     * @returns the content displayed
-     */
-    Content?: (d: {
-        item: T;
-        key: string;
-        field: keyof T | undefined;
-        index: number;
-        style?: React.CSSProperties;
-    }) => React.ReactNode;
-}
-export default function Column<T>(props: React.PropsWithChildren<IColumnProps<T>>): JSX.Element;
-export interface IHeaderWrapperProps {
-    setWidth: (w: number, a: boolean, u: boolean) => void;
-    onSort: React.MouseEventHandler<HTMLTableCellElement>;
-    sorted: boolean;
-    asc: boolean;
-    style: React.CSSProperties;
-    allowSort?: boolean;
-    colKey: string;
-    width?: number;
-    enabled: boolean;
-    extraWidth: number;
-}
-export declare function ColumnHeaderWrapper(props: React.PropsWithChildren<IHeaderWrapperProps>): JSX.Element | null;
-export interface IDataWrapperProps {
-    setWidth: (w: number, a: boolean, u: boolean) => void;
-    width?: number;
-    enabled: boolean;
-    dragStart?: (e: React.DragEvent) => void;
-    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    style: React.CSSProperties;
-    extraWidth: number;
-}
-export declare function ColumnDataWrapper(props: React.PropsWithChildren<IDataWrapperProps>): JSX.Element | null;

package/lib/AdjustableTable/Column.js

@@ -1,98 +0,0 @@
-"use strict";
-//  ******************************************************************************************************
-//  Column.tsx - Gbtc
-//
-//  Copyright © 2018, 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:
-//  ----------------------------------------------------------------------------------------------------
-//  08/02/2018 - Billy Ernest
-//       Generated original version of source code.
-//  05/31/2024 - C. Lackner
-//       Refactored to fix sizing issues.
-//
-//  ******************************************************************************************************
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Column;
-exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
-exports.ColumnDataWrapper = ColumnDataWrapper;
-const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-const React = require("react");
-function Column(props) {
-    return React.createElement(React.Fragment, null, props.children);
-}
-function ColumnHeaderWrapper(props) {
-    var _a, _b, _c, _d, _e, _f;
-    const thref = React.useRef(null);
-    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
-    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
-    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
-    style.position = (_c = style.position) !== null && _c !== void 0 ? _c : 'relative';
-    style.borderTop = (_d = style.borderTop) !== null && _d !== void 0 ? _d : 'none';
-    const isAuto = style.width == 'auto';
-    const isUndefined = style.width === undefined;
-    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined) {
-        style.width = (props.width) + props.extraWidth;
-    }
-    if (style.cursor === undefined && ((_e = props.allowSort) !== null && _e !== void 0 ? _e : true)) {
-        style.cursor = 'pointer';
-    }
-    React.useLayoutEffect(() => {
-        var _a;
-        if (thref.current == null)
-            return;
-        const w = (_a = thref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-        if (props.width !== undefined && (w === undefined || w == (props.width + props.extraWidth)))
-            return;
-        props.setWidth(w, isAuto, isUndefined);
-    });
-    const onClick = React.useCallback((e) => {
-        var _a;
-        if ((_a = props.allowSort) !== null && _a !== void 0 ? _a : true)
-            props.onSort(e);
-    }, [props.onSort, props.allowSort]);
-    if (props.width != undefined && !props.enabled)
-        return null;
-    return React.createElement("th", { ref: thref, style: style, onClick: onClick, onDrag: (e) => { e.stopPropagation(); } },
-        props.sorted ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, props.asc ? React.createElement(gpa_symbols_1.ReactIcons.ArrowDropUp, null) : React.createElement(gpa_symbols_1.ReactIcons.ArrowDropDown, null)) : null,
-        React.createElement("div", { style: {
-                marginLeft: (props.sorted ? 25 : 0),
-            } }, (_f = props.children) !== null && _f !== void 0 ? _f : props.colKey));
-}
-function ColumnDataWrapper(props) {
-    var _a, _b;
-    const tdref = React.useRef(null);
-    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
-    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
-    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
-    const isAuto = style.width == 'auto';
-    const isUndefined = style.width === undefined;
-    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined) {
-        style.width = (props.width) + props.extraWidth;
-    }
-    if (props.dragStart !== undefined)
-        style.cursor = "grab";
-    React.useLayoutEffect(() => {
-        var _a;
-        if (tdref.current == null)
-            return;
-        const w = (_a = tdref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-        if (props.width !== undefined && (w === undefined || w == (props.width + props.extraWidth)))
-            return;
-        props.setWidth(w, isAuto, isUndefined);
-    });
-    if (props.width != undefined && !props.enabled)
-        return null;
-    return (React.createElement("td", { ref: tdref, style: style, onClick: props.onClick, draggable: props.dragStart !== undefined, onDragStart: props.dragStart }, props.children));
-}