mig-schema-table 3.0.28 → 3.0.30

package/README.md

@@ -42,6 +42,7 @@ import { SchemaTable, IColumnConfig } from "mig-schema-table";
 import "mig-schema-table/dist/index.css";
 // Add this for default datepicker styling
 import "react-datepicker/dist/react-datepicker.css";
+// Optionally add bootstrap5 styles
 
 const config: { [keyName: string]: IColumnConfig } = {
   id: {

package/dist/SchemaTable/SchemaColumnFilterPopover/FilterFormComponent/index.js

@@ -9,7 +9,7 @@ const FilterFormComponent = ({ onChange, propSchema, propName, columnFilterValue
     const value = columnFilterValue;
     switch (type) {
         case "integer":
-            return (_jsx("div", Object.assign({ className: "d-flex p-1" }, { children: _jsx("input", { type: "number", value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+            return (_jsx("div", Object.assign({ className: "input-group" }, { children: _jsx("input", { className: "form-control", type: "number", value: (value || ""), "data-prop-name": propName, onChange: (e) => {
                         onChange(e.currentTarget.value === ""
                             ? undefined
                             : parseInt(e.currentTarget.value));
@@ -19,7 +19,7 @@ const FilterFormComponent = ({ onChange, propSchema, propName, columnFilterValue
             if (value === undefined) {
                 selectValue = "";
             }
-            return (_jsxs("select", Object.assign({ value: selectValue, "data-prop-name": propName, onChange: (e) => {
+            return (_jsxs("select", Object.assign({ className: "form-select", value: selectValue, "data-prop-name": propName, onChange: (e) => {
                     switch (e.currentTarget.value) {
                         case "✓":
                             onChange(true);
@@ -34,7 +34,7 @@ const FilterFormComponent = ({ onChange, propSchema, propName, columnFilterValue
         // @ts-ignore
         case "string":
             if (propSchema.enum) {
-                return (_jsxs("select", Object.assign({ value: value, "data-prop-name": propName, onChange: (e) => {
+                return (_jsxs("select", Object.assign({ className: "form-select", value: value, "data-prop-name": propName, onChange: (e) => {
                         onChange(e.currentTarget.value || undefined);
                     } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), propSchema.enum.map((name) => (_jsx("option", Object.assign({ value: name }, { children: uncamel(name) }), `column-filter-select-${name}`)))] })));
             }
@@ -64,13 +64,13 @@ const FilterFormComponent = ({ onChange, propSchema, propName, columnFilterValue
                     }
                     onChange(Object.assign(Object.assign({}, columnFilterValue), { to: date || undefined }));
                 };
-                return (_jsx("div", Object.assign({ "data-bs-toggle": "dropdown-menu-item" }, { children: _jsxs("div", Object.assign({ className: "d-flex p-2" }, { children: [_jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "Start date-time" }), _jsx(DatePicker, { dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: dateRangeValue.from, onChange: startDateChangeHandler, placeholderText: dateFormat, isClearable: true, selectsStart: true, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] })), _jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "End date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selectsEnd: true, selected: dateRangeValue.to, onChange: endDateChangeHandler, placeholderText: dateFormat, isClearable: true, startDate: dateRangeValue.from, endDate: dateRangeValue.to, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] })) })));
+                return (_jsxs("div", Object.assign({ className: "input-group d-flex" }, { children: [_jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "Start date-time" }), _jsx(DatePicker, { dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: dateRangeValue.from, onChange: startDateChangeHandler, placeholderText: dateFormat, isClearable: true, selectsStart: true, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] })), _jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "End date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selectsEnd: true, selected: dateRangeValue.to, onChange: endDateChangeHandler, placeholderText: dateFormat, isClearable: true, startDate: dateRangeValue.from, endDate: dateRangeValue.to, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] })));
             }
         // falls through
         default:
-            return (_jsx("div", Object.assign({ className: "p-1" }, { children: _jsx("input", { autoFocus: true, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+            return (_jsx("div", Object.assign({ className: "input-group" }, { children: _jsx("input", { type: "text", className: "form-control", placeholder: `Search ${propName}`, "aria-label": `Search ${propName}`, autoFocus: true, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
                         onChange(e.currentTarget.value || undefined);
-                    }, placeholder: `Search ${propName}` }) })));
+                    } }) })));
     }
 };
 export default React.memo(FilterFormComponent);

package/dist/SchemaTable/SchemaColumnFilterPopover/index.js

@@ -28,7 +28,7 @@ const SchemaColumnFilterPopover = ({ onChange, onClose, propName, propSchema, re
             window.removeEventListener("click", onWindowClick, { capture: true });
         };
     }, [onClose, popperElement]);
-    const classNames = ["popover"];
+    const classNames = ["popover", "schema-column-filter-popover"];
     if (attributes.popper) {
         classNames.push(`bs-popover-${attributes.popper["data-popper-placement"]}`);
     }

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

@@ -3,6 +3,7 @@ import { oas31 } from "openapi3-ts";
 import { IColumnConfig, IRenderData } from "../../types";
 interface ITdProps<T> {
     checkedIndexes?: number[];
+    disabledCheckedIndexes?: number[];
     columnIndex: number;
     data: T[];
     getRowClassName?: (rowData: T, dataIndex: number) => string;
@@ -17,6 +18,6 @@ interface ITdProps<T> {
     sortedRenderData?: IRenderData[];
     style: React.CSSProperties;
 }
-declare function Td<T>({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
+declare function Td<T>({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
 declare const _default: typeof Td;
 export default _default;

package/dist/SchemaTable/Td/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { SELECT_ALL_COLUMN_NAME } from "../constants";
-function Td({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }) {
+function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }) {
     const onTdClick = React.useCallback((e) => {
         if (!sortedRenderData || !onRowClick) {
             return;
@@ -55,7 +55,7 @@ function Td({ checkedIndexes, columnIndex, data, getRowClassName, getRowSelected
             }
             onCheckedIndexesChange([row._index]);
         };
-        return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: _jsx("input", { "data-key": "row-checkbox", type: "checkbox", onChange: onChecked, checked: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.includes(row._index) }) })) })));
+        return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: _jsx("input", { "data-key": "row-checkbox", type: "checkbox", onChange: onChecked, checked: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.includes(row._index), disabled: disabledCheckedIndexes === null || disabledCheckedIndexes === void 0 ? void 0 : disabledCheckedIndexes.includes(row._index) }) })) })));
     }
     if (!propSchema) {
         return null;

package/dist/SchemaTable/index.d.ts

@@ -4,6 +4,7 @@ import { IColumnConfig } from "../types";
 export interface ISchemaTableProps<T> {
     Heading?: any;
     checkedIndexes?: number[];
+    disabledCheckedIndexes?: number[];
     config?: {
         [propName: string]: IColumnConfig<T>;
     };
@@ -29,6 +30,6 @@ 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 function SchemaTable<T>({ Heading, checkedIndexes, disabledCheckedIndexes, 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/SchemaTable/index.js

@@ -8,7 +8,8 @@ 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";
-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, }) {
+import { sum } from "lodash";
+function SchemaTable({ Heading = VariableSizeList, checkedIndexes, disabledCheckedIndexes, 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("");
@@ -113,11 +114,12 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         let dynamicWidthColumnCount = 0;
         columnNames.forEach((propName) => {
             if (propName === SELECT_ALL_COLUMN_NAME) {
-                return SELECT_ALL_COLUMN_WIDTH;
+                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 + 8;
+                fixedWidthColumnsWidth += propConfig.width;
             }
             else {
                 dynamicWidthColumnCount += 1;
@@ -127,13 +129,25 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
     }, [columnNames, config]);
     const columnWidths = React.useMemo(() => {
         const dynamicColumnWidth = Math.floor((width - fixedWidthColumnsWidth) / dynamicWidthColumnCount);
-        return columnNames.map((propName) => {
+        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,
@@ -246,13 +260,18 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         if (!onCheckedIndexesChange || !filteredRenderData) {
             return;
         }
-        onCheckedIndexesChange(filteredRenderData.map((el) => el._index));
-    }, [onCheckedIndexesChange, filteredRenderData]);
+        onCheckedIndexesChange(filteredRenderData
+            .map((el) => el._index)
+            .filter((index) => !(disabledCheckedIndexes === null || disabledCheckedIndexes === void 0 ? void 0 : disabledCheckedIndexes.includes(index))));
+    }, [onCheckedIndexesChange, filteredRenderData, disabledCheckedIndexes]);
     const isAllRowsChecked = React.useMemo(() => {
+        const tableData = [...(filteredRenderData || [])].filter((el) => (checkedIndexes ? checkedIndexes.includes(el._index) : true) ||
+            (disabledCheckedIndexes
+                ? !disabledCheckedIndexes.includes(el._index)
+                : true));
         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]);
+            tableData.length === (checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length));
+    }, [checkedIndexes, disabledCheckedIndexes, filteredRenderData]);
     const disableColumnFilter = React.useCallback((propName) => {
         const newColumnFilterMap = Object.assign({}, columnFilterMap);
         delete newColumnFilterMap[propName];
@@ -284,7 +303,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
     ]);
     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 }));
+        return (_jsx(Td, { checkedIndexes: checkedIndexes, disabledCheckedIndexes: disabledCheckedIndexes, 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,

package/dist/index.css

@@ -1,7 +1,6 @@
-.react-datepicker {
-  display: flex;
+.schema-table .popover {
+  --bs-popover-max-width: 1024px;
 }
-
 .schema-table__tbody {
   overflow-x: hidden !important;
   border-collapse: collapse;
@@ -10,22 +9,27 @@
 .schema-table__th-row {
   overflow: hidden !important;
 }
-.schema-table__column-filter {
+.schema-table .schema-column-filter-popover {
   background-color: #eee;
 }
-.schema-table__column-filter input,
-.schema-table__column-filter select {
+.schema-table .schema-column-filter-popover input,
+.schema-table .schema-column-filter-popover select {
   width: 100%;
   padding: 3px;
   margin-top: 3px;
   border-radius: 5px;
 }
-.schema-table__column-filter input[type=checkbox] {
+.schema-table .schema-column-filter-popover input[type=checkbox] {
   width: fit-content;
   margin-top: 10px;
   margin-left: 30px;
 }
-.schema-table__column-filter .react-datepicker {
+.schema-table .schema-column-filter-popover input[type=number],
+.schema-table .schema-column-filter-popover input[type=text],
+.schema-table .schema-column-filter-popover select {
+  min-width: 150px;
+}
+.schema-table .schema-column-filter-popover .react-datepicker {
   display: flex;
 }
 .schema-table__th {
@@ -47,7 +51,7 @@
   font-style: italic;
 }
 .schema-table__th--column-filter-status-ACTIVE svg {
-  color: red;
+  color: var(--bs-red, red);
 }
 .schema-table__td {
   overflow: hidden;
@@ -57,13 +61,13 @@
   align-items: center;
 }
 .schema-table__td--odd {
-  background-color: #ddd;
+  background-color: var(--bs-gray-100, #f8f9fa);
 }
 .schema-table__td--even {
-  background-color: #fff;
+  background-color: var(--bs-white, #fff);
 }
 .schema-table__td--selected {
-  background-color: #bbb;
+  background-color: var(--bs-gray-300, #dee2e6);
 }
 .schema-table__search {
   margin: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.28",
+  "version": "3.0.30",
   "main": "dist/index.js",
   "files": [
     "dist/"
@@ -24,7 +24,7 @@
     "react-window": "^1.8.9"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json; sass --no-source-map src/component/index.scss dist/index.css",
+    "build": "rm -rf dist; tsc -p tsconfig.json; sass --no-source-map src/component/index.scss dist/index.css",
     "prepublishOnly": "npm run build",
     "start": "react-scripts start",
     "test": "react-scripts test"

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

@@ -1,21 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-import { IColumnConfig } from "../../types";
-import { oas31 } from "openapi3-ts";
-import "react-datepicker/dist/react-datepicker.css";
-import { tColumnSearchValue } from "../index";
-interface IColumnFilterRowProps {
-    columnNames: string[];
-    getWidth: (index: number) => number;
-    config?: {
-        [propName: string]: IColumnConfig<any>;
-    };
-    columnSearchHandler: (propName: string, value: tColumnSearchValue) => void;
-    value: {
-        [propName: string]: tColumnSearchValue;
-    };
-    schema: oas31.SchemaObject;
-    columnFilterDropdown?: string;
-    setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
-}
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, columnFilterDropdown, setColumnFilterDropdown, }: IColumnFilterRowProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/SchemaTable/ColumnFilterRow/index.js

@@ -1,111 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from "react";
-import { SELECT_ALL_COLUMN_NAME } from "../constants";
-import DatePicker from "react-datepicker";
-import nl from "date-fns/locale/nl";
-import "react-datepicker/dist/react-datepicker.css";
-import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../inc/constant";
-import { getUnixTimeStamp } from "../../inc/date";
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, columnFilterDropdown, setColumnFilterDropdown, }) {
-    const { properties = {} } = schema;
-    const getSelectComponent = React.useCallback((propSchema, propName, value, inputChangeHandler) => {
-        const enumItems = propSchema.type === "boolean" ? ["✓", "✕"] : propSchema.enum;
-        return (_jsxs("select", Object.assign({ value: value, "data-prop-name": propName, onChange: inputChangeHandler }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), enumItems.map((name) => (_jsx("option", Object.assign({ value: name }, { children: name }), `column-filter-select-${name}`)))] })));
-    }, []);
-    const field = React.useCallback((propSchema, propName, propValue) => {
-        const { type, format, minimum, maximum } = propSchema;
-        const inputChangeHandler = (event) => {
-            columnSearchHandler(propName, event.target.value);
-        };
-        const strValue = (propValue || "");
-        switch (type) {
-            case "string":
-                if (propSchema.enum) {
-                    return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
-                }
-                if (format === "date-time" || format === "date") {
-                    const dateFormat = format === "date"
-                        ? DEFAULT_DATE_FORMAT
-                        : DEFAULT_DATE_TIME_FORMAT;
-                    const dateRangeValue = propValue;
-                    const startDate = (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.from)
-                        ? new Date(dateRangeValue.from)
-                        : null;
-                    const endDate = (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.to)
-                        ? new Date(dateRangeValue.to)
-                        : null;
-                    const startDateChangeHandler = (date) => {
-                        if (endDate && date && date > endDate) {
-                            return;
-                        }
-                        columnSearchHandler(propName, Object.assign(Object.assign({}, dateRangeValue), { from: `${date || ""}`, to: `${date && endDate ? dateRangeValue.to : ""}` }));
-                    };
-                    const endDateChangeHandler = (date) => {
-                        if (startDate &&
-                            date &&
-                            getUnixTimeStamp(`${date}`) < getUnixTimeStamp(`${startDate}`)) {
-                            return;
-                        }
-                        columnSearchHandler(propName, Object.assign(Object.assign({}, dateRangeValue), { to: `${date || ""}` }));
-                    };
-                    return (_jsx("div", Object.assign({ "data-bs-toggle": "dropdown-menu-item" }, { children: _jsxs("div", Object.assign({ className: "d-flex p-2" }, { children: [_jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "Start date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: startDate, onChange: startDateChangeHandler, placeholderText: dateFormat, isClearable: true, selectsStart: true, startDate: startDate, endDate: endDate, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] })), _jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "End date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selectsEnd: true, selected: endDate, onChange: endDateChangeHandler, placeholderText: dateFormat, isClearable: true, startDate: startDate, endDate: endDate, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] })) })));
-                }
-                return (_jsx("div", Object.assign({ className: "p-1" }, { children: _jsx("input", { value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}` }) })));
-            case "integer":
-                return (_jsx("div", Object.assign({ className: "d-flex p-1" }, { children: _jsx("input", { type: "number", value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}`, min: minimum, max: maximum }) })));
-            case "boolean":
-                return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
-            default:
-                return _jsx(_Fragment, {});
-        }
-    }, [columnSearchHandler, getSelectComponent]);
-    const removeDropdown = React.useCallback((e) => {
-        if (!columnFilterDropdown) {
-            return;
-        }
-        let columnFilterEl = null;
-        let parentNode = e.target;
-        while (parentNode && parentNode.nodeName !== "HTML") {
-            if (typeof parentNode.className === "string" &&
-                parentNode.className.includes("schema-table__column-filter")) {
-                columnFilterEl = parentNode;
-                break;
-            }
-            parentNode = parentNode.parentNode;
-        }
-        if (!columnFilterEl) {
-            setColumnFilterDropdown && setColumnFilterDropdown(undefined);
-        }
-    }, [columnFilterDropdown, setColumnFilterDropdown]);
-    React.useEffect(() => {
-        if (!columnFilterDropdown) {
-            return;
-        }
-        window.addEventListener("click", removeDropdown, { capture: true });
-        return () => {
-            window.removeEventListener("click", removeDropdown, { capture: true });
-        };
-    }, [columnFilterDropdown, removeDropdown]);
-    const SchemaColumnFilter = React.useCallback((index) => {
-        const propName = columnNames[index];
-        const propSchema = properties[propName];
-        const propConfig = config ? config[propName] : undefined;
-        const propValue = value === null || value === void 0 ? void 0 : value[propName];
-        if (propName === SELECT_ALL_COLUMN_NAME || !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable)) {
-            return _jsx("div", { className: "schema-table__th" });
-        }
-        return (_jsx("ul", Object.assign({ id: "test", className: `dropdown-menu dropdown-menu-lg-end ${columnFilterDropdown && columnFilterDropdown === propName
-                ? "show"
-                : ""}`, style: {
-                position: "fixed",
-                marginTop: -10,
-                minHeight: 100,
-            } }, { children: _jsx("div", Object.assign({ id: "filter-dropdown-item", style: { margin: 10 } }, { children: field(propSchema, propName, propValue) })) })));
-    }, [columnFilterDropdown, columnNames, config, field, properties, value]);
-    return (_jsx("div", Object.assign({ className: "schema-table__th-row", style: { display: "flex", flex: "row" } }, { children: columnNames.map((columnName, index) => {
-            return (_jsx("div", Object.assign({ className: "schema-table__column-filter", style: {
-                    width: getWidth(index),
-                    paddingBottom: 7,
-                } }, { children: SchemaColumnFilter(index) }), `filter-${index}`));
-        }) })));
-}

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

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

package/dist/SchemaTable/index.test.js

@@ -1,18 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import SchemaTable from "./index";
-it("renders an empty table", () => __awaiter(void 0, void 0, void 0, function* () {
-    render(_jsx(SchemaTable, { data: [], schema: {}, width: 1 }));
-    const table = yield screen.findByRole("table");
-    expect(table).toBeInTheDocument();
-}));