mig-schema-table 3.0.29 → 3.0.31

package/dist/component/SchemaTable/Th/index.d.ts

@@ -1,27 +0,0 @@
-import { oas31 } from "openapi3-ts";
-import React, { CSSProperties, Dispatch, SetStateAction } from "react";
-import { IColumnConfig } from "../../types";
-import { ISchemaColumnFilterPopoverConfig } from "../SchemaColumnFilterPopover";
-export declare enum EColumnFilterStatus {
-    UNAVAILABLE = "UNAVAILABLE",
-    AVAILABLE = "AVAILABLE",
-    ACTIVE = "ACTIVE"
-}
-interface IThProps {
-    columnFilterStatus: EColumnFilterStatus;
-    disableColumnFilter: (propName: string) => void;
-    isAllChecked?: boolean;
-    isSortable: boolean;
-    numberOfSelectedRows?: number;
-    onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    propConfig?: IColumnConfig<any>;
-    propName: string;
-    schema: oas31.SchemaObject;
-    setPopoverConfig?: Dispatch<SetStateAction<ISchemaColumnFilterPopoverConfig | undefined>>;
-    setSortAsc: Dispatch<SetStateAction<boolean>>;
-    setSortColumn: Dispatch<SetStateAction<string>>;
-    sortAsc?: boolean;
-    style: CSSProperties;
-}
-declare const _default: ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propName, schema, setPopoverConfig, setSortAsc, setSortColumn, sortAsc, style, }: IThProps) => import("react/jsx-runtime").JSX.Element;
-export default _default;

package/dist/component/SchemaTable/Th/index.js

@@ -1,78 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { uncamel } from "../../inc/string";
-import { SELECT_ALL_COLUMN_NAME } from "../constants";
-export var EColumnFilterStatus;
-(function (EColumnFilterStatus) {
-    EColumnFilterStatus["UNAVAILABLE"] = "UNAVAILABLE";
-    EColumnFilterStatus["AVAILABLE"] = "AVAILABLE";
-    EColumnFilterStatus["ACTIVE"] = "ACTIVE";
-})(EColumnFilterStatus || (EColumnFilterStatus = {}));
-const Th = ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propName, schema, setPopoverConfig, setSortAsc, setSortColumn, sortAsc, style, }) => {
-    const thDivProps = {
-        style,
-        className: `schema-table__th schema-table__th--column-filter-status-${columnFilterStatus} ${isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable"}`,
-    };
-    const onSortButtonClick = React.useCallback(() => {
-        if (sortAsc === undefined) {
-            setSortColumn(propName);
-            setSortAsc(!(propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc));
-            return;
-        }
-        setSortAsc((sortAsc) => !sortAsc);
-    }, [
-        propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc,
-        propName,
-        setSortAsc,
-        setSortColumn,
-        sortAsc,
-    ]);
-    const onFilterButtonClick = React.useCallback((e) => {
-        if (columnFilterStatus === EColumnFilterStatus.ACTIVE &&
-            disableColumnFilter) {
-            disableColumnFilter(propName);
-            return;
-        }
-        if (!setPopoverConfig) {
-            return;
-        }
-        const referenceElement = e.currentTarget;
-        setPopoverConfig((popoverConfig) => {
-            if (popoverConfig) {
-                return undefined;
-            }
-            return {
-                referenceElement,
-                propName,
-            };
-        });
-    }, [columnFilterStatus, disableColumnFilter, propName, setPopoverConfig]);
-    if (propName === SELECT_ALL_COLUMN_NAME) {
-        return (_jsx("div", Object.assign({}, thDivProps, { children: _jsx("div", Object.assign({ style: {
-                    width: "100%",
-                    textAlign: "center",
-                }, title: `${numberOfSelectedRows || 0} selected` }, { children: _jsx("input", { type: "checkbox", checked: isAllChecked, onChange: onSelectAllIndexesHandler }) })) })));
-    }
-    if (!schema) {
-        return _jsx("div", Object.assign({}, thDivProps));
-    }
-    switch (schema.type) {
-        case "boolean":
-            thDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"} justify-content-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
-            break;
-        case "integer":
-        case "number":
-            thDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"} justify-content-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
-            break;
-        default:
-            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) {
-                thDivProps.className += ` text-${propConfig.align}`;
-            }
-    }
-    return (_jsxs("div", Object.assign({}, thDivProps, { children: [isSortable ? (_jsxs("button", Object.assign({ className: "px-0", disabled: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sortable) === false, onClick: onSortButtonClick }, { children: [(propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined
-                        ? uncamel(propName)
-                        : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: (propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) === undefined
-                    ? uncamel(propName)
-                    : propConfig === null || propConfig === void 0 ? void 0 : propConfig.title }))), columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ onClick: onFilterButtonClick, "data-bs-toggle": "dropdown" }, { children: _jsx("svg", Object.assign({ viewBox: "0 0 36 36", xmlns: "http://www.w3.org/2000/svg", height: 16, width: 16, style: { display: "block" }, fill: "currentColor" }, { children: _jsx("polygon", { points: "14,30 22,25 22,17 35.999,0 17.988,0 0,0 14,17 " }) })) }))) : null] })));
-};
-export default React.memo(Th);

package/dist/component/SchemaTable/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const SELECT_ALL_COLUMN_NAME = "SELECT_ALL_COLUMN_NAME";
-export declare const SELECT_ALL_COLUMN_WIDTH = 40;

package/dist/component/SchemaTable/constants.js

@@ -1,2 +0,0 @@
-export const SELECT_ALL_COLUMN_NAME = "SELECT_ALL_COLUMN_NAME";
-export const SELECT_ALL_COLUMN_WIDTH = 40;

package/dist/component/SchemaTable/index.d.ts

@@ -1,34 +0,0 @@
-import React from "react";
-import { oas31 } from "openapi3-ts";
-import { IColumnConfig } from "../types";
-export interface ISchemaTableProps<T> {
-    Heading?: any;
-    checkedIndexes?: number[];
-    config?: {
-        [propName: string]: IColumnConfig<T>;
-    };
-    customElement?: React.ReactNode;
-    data: T[];
-    defaultSortAsc?: boolean;
-    defaultSortColumn?: keyof T;
-    getRowClassName?: (rowData: T, dataIndex: number) => string;
-    getRowSelected?: (rowData: T) => boolean;
-    maxHeight?: number;
-    isSearchable?: boolean;
-    isColumnFilterable?: boolean;
-    isSortable?: boolean;
-    onCheckedIndexesChange?: (dataIndex: number[]) => void;
-    onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
-    rowHeight?: number;
-    schema: oas31.SchemaObject;
-    searchPlaceholder?: string;
-    style?: React.CSSProperties;
-    width: number;
-}
-export type TColumnFilterValue = string | number | boolean | {
-    from?: Date;
-    to?: Date;
-};
-declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultSortAsc, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight, schema, searchPlaceholder, style, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof SchemaTable;
-export default _default;

package/dist/component/SchemaTable/index.js

@@ -1,343 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { VariableSizeGrid, VariableSizeList } from "react-window";
-import { localeFormat } from "../inc/date";
-import { uncamel } from "../inc/string";
-import Th, { EColumnFilterStatus } from "./Th";
-import { SELECT_ALL_COLUMN_NAME, SELECT_ALL_COLUMN_WIDTH } from "./constants";
-import Td from "./Td";
-import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from "../inc/constant";
-import SchemaColumnFilterPopover from "./SchemaColumnFilterPopover";
-import { sum } from "lodash";
-function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultSortAsc = false, defaultSortColumn, getRowClassName, getRowSelected, maxHeight, isSearchable, isColumnFilterable, isSortable, onCheckedIndexesChange, onRowClick, rowHeight = 36, schema, searchPlaceholder, style, width, }) {
-    const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
-    const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
-    const [searchQuery, setSearchQuery] = React.useState("");
-    const [columnFilterMap, setColumnFilterMap] = React.useState({});
-    const [popoverConfig, setPopoverConfig] = React.useState();
-    const { properties = {} } = schema;
-    const columnNames = React.useMemo(() => {
-        const columns = Object.keys(properties);
-        if (onCheckedIndexesChange) {
-            columns.unshift(SELECT_ALL_COLUMN_NAME);
-        }
-        if (!config) {
-            return columns;
-        }
-        const invisibleColumns = Object.entries(config).reduce((prev, [propName, propConfig]) => {
-            if (propConfig.hidden) {
-                prev.push(propName);
-            }
-            return prev;
-        }, []);
-        return columns
-            .filter((key) => !invisibleColumns.includes(key))
-            .sort((columnA, columnB) => {
-            let orderA = config[columnA] ? config[columnA].order : undefined;
-            if (orderA === undefined) {
-                orderA = Object.keys(properties).findIndex((propName) => propName === columnA);
-            }
-            let orderB = config[columnB] ? config[columnB].order : undefined;
-            if (orderB === undefined) {
-                orderB = Object.keys(properties).findIndex((propName) => propName === columnB);
-            }
-            if (columnB === SELECT_ALL_COLUMN_NAME ||
-                columnA === SELECT_ALL_COLUMN_NAME) {
-                return 0;
-            }
-            if (orderA === -1) {
-                return 1;
-            }
-            if (orderB === -1) {
-                return -1;
-            }
-            return orderA - orderB;
-        });
-    }, [config, onCheckedIndexesChange, properties]);
-    const renderData = React.useMemo(() => data
-        ? data.map((object, rowIndex) => columnNames.reduce((prev, propName) => {
-            var _a;
-            const schema = properties[propName];
-            const propConfig = config ? config[propName] : undefined;
-            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) {
-                prev[propName] = propConfig.renderData(object, rowIndex);
-                return prev;
-            }
-            if (!schema || propName === SELECT_ALL_COLUMN_NAME) {
-                prev[propName] = "?";
-                return prev;
-            }
-            const rawValue = object[propName];
-            switch (schema.type) {
-                case "array":
-                    prev[propName] =
-                        ((_a = schema.items) === null || _a === void 0 ? void 0 : _a.type) === "string" &&
-                            rawValue
-                            ? rawValue.map(uncamel).join(", ")
-                            : JSON.stringify(rawValue);
-                    return prev;
-                case "boolean":
-                    prev[propName] = rawValue ? "✓" : "✕";
-                    return prev;
-                case "integer":
-                    prev[propName] = [undefined, null].includes(rawValue)
-                        ? ""
-                        : `${rawValue}`;
-                    return prev;
-                // @ts-ignore
-                case "string":
-                    if (schema.format === "date" && rawValue) {
-                        prev[propName] =
-                            rawValue === "2999-12-31"
-                                ? "-"
-                                : localeFormat(new Date(rawValue), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) || DEFAULT_DATE_FORMAT);
-                        return prev;
-                    }
-                    if (schema.format === "date-time" && rawValue) {
-                        prev[propName] = localeFormat(new Date(rawValue), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) || DEFAULT_DATE_TIME_FORMAT);
-                        return prev;
-                    }
-                    if (schema.enum) {
-                        prev[propName] = rawValue ? uncamel(rawValue) : "";
-                        return prev;
-                    }
-                // fallthrough
-                default:
-                    prev[propName] = rawValue ? `${rawValue}` : "";
-                    return prev;
-            }
-        }, { _index: rowIndex }))
-        : undefined, [columnNames, config, data, properties]);
-    const columnCount = columnNames.length;
-    const { dynamicWidthColumnCount, fixedWidthColumnsWidth } = React.useMemo(() => {
-        let fixedWidthColumnsWidth = 0;
-        let dynamicWidthColumnCount = 0;
-        columnNames.forEach((propName) => {
-            if (propName === SELECT_ALL_COLUMN_NAME) {
-                fixedWidthColumnsWidth += SELECT_ALL_COLUMN_WIDTH;
-                return;
-            }
-            const propConfig = config ? config[propName] : undefined;
-            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) {
-                fixedWidthColumnsWidth += propConfig.width;
-            }
-            else {
-                dynamicWidthColumnCount += 1;
-            }
-        }, 0);
-        return { dynamicWidthColumnCount, fixedWidthColumnsWidth };
-    }, [columnNames, config]);
-    const columnWidths = React.useMemo(() => {
-        const dynamicColumnWidth = Math.floor((width - fixedWidthColumnsWidth) / dynamicWidthColumnCount);
-        const result = columnNames.map((propName) => {
-            if (propName === SELECT_ALL_COLUMN_NAME) {
-                return SELECT_ALL_COLUMN_WIDTH;
-            }
-            const propConfig = config ? config[propName] : undefined;
-            return (propConfig === null || propConfig === void 0 ? void 0 : propConfig.width) || dynamicColumnWidth;
-        });
-        const totalWidth = sum(result);
-        if (totalWidth < width && dynamicWidthColumnCount) {
-            // find the last dynamic width column and adjust to overcome rounding differences
-            const lastDynamicColumnName = [...columnNames]
-                .reverse()
-                .find((propName) => !config || !config[propName].width);
-            if (lastDynamicColumnName) {
-                const lastDynamicColumnIndex = columnNames.indexOf(lastDynamicColumnName);
-                result[lastDynamicColumnIndex] += width - totalWidth;
-            }
-        }
-        return result;
-    }, [
-        columnNames,
-        config,
-        dynamicWidthColumnCount,
-        fixedWidthColumnsWidth,
-        width,
-    ]);
-    const getColumnWidth = React.useCallback((columnIndex) => (columnWidths ? columnWidths[columnIndex] : 1), [columnWidths]);
-    const filteredRenderData = React.useMemo(() => {
-        if (!renderData || (!isColumnFilterable && !isSearchable)) {
-            return renderData;
-        }
-        return renderData.filter((item) => {
-            const lcSearchQuery = searchQuery.toLowerCase();
-            if (searchQuery &&
-                !columnNames.find((columnName) => `${item[columnName]}`.toLowerCase().includes(lcSearchQuery))) {
-                return false;
-            }
-            let result = true;
-            Object.entries(columnFilterMap).forEach(([propName, columnFilterValue]) => {
-                if (!result || columnFilterValue === undefined) {
-                    return;
-                }
-                const propSchema = properties[propName];
-                // @ts-ignore
-                const rawValue = data[item._index][propName];
-                switch (propSchema.type) {
-                    case "boolean":
-                    case "integer":
-                        result = rawValue === columnFilterValue;
-                        break;
-                    // @ts-ignore
-                    case "string":
-                        if (typeof columnFilterValue === "object" &&
-                            (propSchema.format === "date" ||
-                                propSchema.format === "date-time")) {
-                            const { from, to } = columnFilterValue;
-                            const rawDate = rawValue ? new Date(rawValue) : undefined;
-                            if ((from && (!rawDate || rawDate < from)) ||
-                                (to && (!rawDate || rawDate > to))) {
-                                result = false;
-                            }
-                            return;
-                        }
-                    // fall through
-                    default:
-                        // fallback by looking at the render value
-                        result = `${item[propName]}`
-                            .toLowerCase()
-                            .includes(`${columnFilterValue}`.toLowerCase());
-                }
-            });
-            return result;
-        });
-    }, [
-        renderData,
-        isColumnFilterable,
-        isSearchable,
-        searchQuery,
-        columnNames,
-        columnFilterMap,
-        properties,
-        data,
-    ]);
-    // Sort the filtered data
-    const sortedRenderData = React.useMemo(() => {
-        if (!sortColumn || !filteredRenderData) {
-            return filteredRenderData;
-        }
-        const sortSchema = properties[sortColumn];
-        const propConfig = config ? config[sortColumn] : undefined;
-        const columnSort = propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort;
-        if (columnSort) {
-            return filteredRenderData.sort((a, b) => {
-                const aData = data[a._index];
-                const bData = data[b._index];
-                if (!aData) {
-                    return 1;
-                }
-                if (!bData) {
-                    return -1;
-                }
-                return columnSort(aData, bData, sortAsc);
-            });
-        }
-        return filteredRenderData.sort((a, b) => {
-            const sortByValue = (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sortByValue) === undefined
-                ? !sortSchema ||
-                    sortSchema.type === "boolean" ||
-                    sortSchema.type === "integer" ||
-                    sortSchema.format === "date" ||
-                    sortSchema.format === "date-time" ||
-                    (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell)
-                : propConfig.sortByValue;
-            const x = sortByValue && data[a._index]
-                ? // @ts-ignore
-                    data[a._index][sortColumn]
-                : a[sortColumn].toLowerCase();
-            const y = sortByValue && data[b._index]
-                ? // @ts-ignore
-                    data[b._index][sortColumn]
-                : b[sortColumn].toLowerCase();
-            if (x === y) {
-                return 0;
-            }
-            return (x < y ? 1 : -1) * (sortAsc ? -1 : 1);
-        });
-    }, [config, data, filteredRenderData, properties, sortAsc, sortColumn]);
-    const onSelectAllIndexesHandler = React.useCallback(() => {
-        if (!onCheckedIndexesChange || !filteredRenderData) {
-            return;
-        }
-        onCheckedIndexesChange(filteredRenderData.map((el) => el._index));
-    }, [onCheckedIndexesChange, filteredRenderData]);
-    const isAllRowsChecked = React.useMemo(() => {
-        return ((checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length) !== 0 &&
-            (filteredRenderData === null || filteredRenderData === void 0 ? void 0 : filteredRenderData.length) === (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length) &&
-            (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.every((checkedIndex) => filteredRenderData === null || filteredRenderData === void 0 ? void 0 : filteredRenderData.some((el) => el._index === checkedIndex))));
-    }, [checkedIndexes, filteredRenderData]);
-    const disableColumnFilter = React.useCallback((propName) => {
-        const newColumnFilterMap = Object.assign({}, columnFilterMap);
-        delete newColumnFilterMap[propName];
-        setColumnFilterMap(newColumnFilterMap);
-    }, [columnFilterMap]);
-    const SchemaTableTh = React.useCallback(({ style, index }) => {
-        const propName = columnNames[index];
-        const propConfig = config ? config[propName] : undefined;
-        let columnFilterStatus = isColumnFilterable && (propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable) !== false
-            ? EColumnFilterStatus.AVAILABLE
-            : EColumnFilterStatus.UNAVAILABLE;
-        if (columnFilterMap[propName] !== undefined) {
-            columnFilterStatus = EColumnFilterStatus.ACTIVE;
-        }
-        return (_jsx(Th, { isAllChecked: isAllRowsChecked, columnFilterStatus: columnFilterStatus, disableColumnFilter: disableColumnFilter, isSortable: !!isSortable, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: propConfig, propName: propName, schema: properties[propName], setPopoverConfig: setPopoverConfig, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
-    }, [
-        checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
-        columnFilterMap,
-        columnNames,
-        config,
-        disableColumnFilter,
-        isAllRowsChecked,
-        isColumnFilterable,
-        isSortable,
-        onSelectAllIndexesHandler,
-        properties,
-        sortAsc,
-        sortColumn,
-    ]);
-    const SchemaTableTd = React.useCallback(({ columnIndex, rowIndex, style }) => {
-        const propName = columnNames[columnIndex];
-        return (_jsx(Td, { checkedIndexes: checkedIndexes, columnIndex: columnIndex, data: data, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: properties[propName], rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style }));
-    }, [
-        checkedIndexes,
-        columnNames,
-        config,
-        data,
-        getRowClassName,
-        getRowSelected,
-        onCheckedIndexesChange,
-        onRowClick,
-        properties,
-        rowHeight,
-        sortedRenderData,
-    ]);
-    const onSearchChange = React.useCallback((e) => {
-        setSearchQuery(e.currentTarget.value);
-    }, []);
-    const getRowHeight = React.useCallback(() => rowHeight, [rowHeight]);
-    const rowWidth = dynamicWidthColumnCount ? width : fixedWidthColumnsWidth;
-    const rowCount = React.useMemo(() => (sortedRenderData ? sortedRenderData.length : 0), [sortedRenderData]);
-    const tableBodyHeight = React.useMemo(() => {
-        const rowsHeight = rowHeight * rowCount;
-        const rowsMaxHeight = maxHeight ? maxHeight - (isSearchable ? 50 : 0) : 0;
-        return rowsMaxHeight && rowsMaxHeight < rowsHeight
-            ? rowsMaxHeight
-            : rowsHeight;
-    }, [maxHeight, isSearchable, rowCount, rowHeight]);
-    const onPopoverClose = React.useCallback(() => {
-        setPopoverConfig(undefined);
-    }, []);
-    const onSchemaColumnFilterChange = React.useCallback((newColumnFilterValue) => {
-        if (!popoverConfig) {
-            return;
-        }
-        if (newColumnFilterValue === undefined) {
-            disableColumnFilter(popoverConfig.propName);
-            return;
-        }
-        setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue })));
-    }, [disableColumnFilter, popoverConfig]);
-    return (_jsxs("div", Object.assign({ className: `schema-table${onRowClick ? " schema-table--clickable-rows" : ""}`, style: Object.assign(Object.assign({}, style), { width: rowWidth }), role: "table" }, { children: [_jsxs("div", Object.assign({ className: "schema-table__action-container" }, { children: [_jsx("div", Object.assign({ style: { flex: 1 } }, { children: isSearchable ? (_jsx("input", { type: "text", placeholder: searchPlaceholder || "Search...", value: searchQuery, onChange: onSearchChange, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), _jsx(VariableSizeGrid, Object.assign({ className: "schema-table__tbody", height: tableBodyHeight, width: rowWidth, columnWidth: getColumnWidth, rowHeight: getRowHeight, columnCount: columnCount, rowCount: rowCount }, { children: SchemaTableTd }), `tbody_${tableBodyHeight}_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}_${columnCount}`), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { referenceElement: popoverConfig.referenceElement, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName] })) : null] })));
-}
-export default React.memo(SchemaTable);

package/dist/component/SchemaTable/index.test.d.ts

@@ -1 +0,0 @@
-import "@testing-library/jest-dom";

package/dist/component/SchemaTable/index.test.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import SchemaTable from "./index";
-import exampleData, { exampleDataSchema } from "../../exampleData";
-it("renders an empty table", () => {
-    render(_jsx(SchemaTable, { data: [], schema: {}, width: 1 }));
-    const table = screen.getByRole("table");
-    expect(table).toBeInTheDocument();
-});
-it("should match the configured width without configuration", () => {
-    render(_jsx(SchemaTable, { data: exampleData, schema: exampleDataSchema, width: 1000 }));
-    const table = screen.getByRole("table");
-    // eslint-disable-next-line testing-library/no-node-access
-    const renderedWidth = [...table.querySelectorAll(".schema-table__th")].reduce((prev, node) => prev + parseInt(node.style.width), 0);
-    expect(renderedWidth).toBe(1000);
-});

package/dist/component/inc/constant.d.ts

@@ -1,2 +0,0 @@
-export declare const DEFAULT_DATE_FORMAT = "dd MMM yyyy";
-export declare const DEFAULT_DATE_TIME_FORMAT = "dd MMM yyyy HH:mm";

package/dist/component/inc/constant.js

@@ -1,2 +0,0 @@
-export const DEFAULT_DATE_FORMAT = "dd MMM yyyy";
-export const DEFAULT_DATE_TIME_FORMAT = "dd MMM yyyy HH:mm";

package/dist/component/inc/date.d.ts

@@ -1 +0,0 @@
-export declare const localeFormat: (date: Date | number, dateFormat: string) => string;

package/dist/component/inc/date.js

@@ -1,3 +0,0 @@
-import { format } from "date-fns";
-import nl from "date-fns/locale/nl";
-export const localeFormat = (date, dateFormat) => format(date, dateFormat, { locale: nl });

package/dist/component/inc/schema.d.ts

@@ -1,2 +0,0 @@
-import { SchemaObject } from "openapi3-ts/oas31";
-export declare function getEmptyObject<T>(schema: SchemaObject): T;

package/dist/component/inc/schema.js

@@ -1,32 +0,0 @@
-export function getEmptyObject(schema) {
-    const { properties = {} } = schema;
-    return Object.keys(properties).reduce((prev, propName) => {
-        const prop = properties[propName];
-        let propValue;
-        switch (prop.type) {
-            case "string":
-                propValue = prop.enum ? prop.enum[0] : prop.default || "";
-                break;
-            case "array":
-                propValue = prop.default || [];
-                break;
-            case "number":
-            case "integer":
-                propValue = prop.default || 0;
-                break;
-            case "boolean":
-                propValue = prop.default || false;
-                break;
-            case "object":
-                propValue = prop.default || getEmptyObject(prop);
-                break;
-            // eslint-disable-next-line no-fallthrough
-            default:
-                console.log(prop);
-                throw new Error("Unsupported property");
-        }
-        // @ts-ignore
-        prev[propName] = propValue;
-        return prev;
-    }, {});
-}

package/dist/component/inc/string.d.ts

@@ -1 +0,0 @@
-export declare function uncamel(camel: string): string;

package/dist/component/inc/string.js

@@ -1,17 +0,0 @@
-import { upperFirst } from "lodash";
-function isUpperCase(letter) {
-    return !!letter.match(/[A-Z]/);
-}
-export function uncamel(camel) {
-    return upperFirst(camel.replaceAll(/[A-Z]/g, (letter, position) => {
-        const prevLetter = camel[position - 1];
-        const prevIsUppercase = prevLetter ? isUpperCase(prevLetter) : false;
-        const nextLetter = camel[position + 1];
-        const nextIsUppercase = nextLetter ? isUpperCase(nextLetter) : false;
-        if (position === 0 ||
-            (prevIsUppercase && (!nextLetter || nextIsUppercase))) {
-            return letter;
-        }
-        return ` ${nextIsUppercase ? letter : letter.toLowerCase()}`;
-    }));
-}

package/dist/component/index.d.ts

@@ -1,4 +0,0 @@
-import SchemaTable from "./SchemaTable";
-import { IColumnConfig, IRenderData } from "./types";
-export type { IColumnConfig, IRenderData };
-export { SchemaTable };

package/dist/component/index.js

@@ -1,2 +0,0 @@
-import SchemaTable from "./SchemaTable";
-export { SchemaTable };

package/dist/component/types.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-export interface IColumnConfig<T> {
-    align?: "start" | "center" | "end";
-    defaultSortDesc?: boolean;
-    hidden?: boolean;
-    hoverTitle?: string;
-    renderCell?: (rowData: T, dataIndex: number, rowIndex: number) => React.ReactElement | null;
-    renderData?: (rowData: T, dataIndex: number) => string;
-    sort?: (a: T, b: T, sortAsc: boolean) => number;
-    sortByValue?: boolean;
-    sortable?: boolean;
-    title?: string | React.ReactElement;
-    width?: number;
-    order?: number;
-    isFilterable?: boolean;
-    dateFormat?: string;
-}
-export interface IRenderData {
-    _index: number;
-    [key: string]: string | any;
-}

package/dist/component/types.js

@@ -1 +0,0 @@
-export {};

package/dist/exampleData.d.ts

@@ -1,29 +0,0 @@
-import { oas31 } from "openapi3-ts";
-export interface IExampleData {
-    jobId: string;
-    /** @enum {string} */
-    jobType: "scrape" | "clean";
-    topLevelId: number;
-    domainId: string;
-    hostId: string;
-    sourceId: string;
-    /** @enum {string} */
-    sources: ("fromIndexPage" | "manual")[];
-    priority: number;
-    /** Format: date-time */
-    insertDateTime: string;
-    /** Format: date-time */
-    scrapeStartDateTime?: string;
-    /** Format: date-time */
-    scrapeEndDateTime?: string;
-    scraperHost?: string;
-    scraperContainer?: string;
-    errorMessage?: string;
-    /** Format: url */
-    url?: string;
-    retryCount: number;
-    isError: boolean;
-}
-export declare const exampleDataSchema: oas31.SchemaObject;
-declare const exampleData: IExampleData[];
-export default exampleData;