mig-schema-table 3.0.27 → 3.0.29

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/ColumnFilterRow/index.d.ts

@@ -1,17 +1,21 @@
+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: string | number | boolean) => void;
+    columnSearchHandler: (propName: string, value: tColumnSearchValue) => void;
     value: {
-        [propName: string]: string | number | boolean;
+        [propName: string]: tColumnSearchValue;
     };
     schema: oas31.SchemaObject;
+    columnFilterDropdown?: string;
+    setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
 }
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, }: IColumnFilterRowProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -4,15 +4,15 @@ 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 { localeFormat } from "../../inc/date";
 import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../inc/constant";
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, }) {
+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" ? ["true", "false"] : propSchema.enum;
+        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, propConfig) => {
+    const field = React.useCallback((propSchema, propName, propValue) => {
         const { type, format, minimum, maximum } = propSchema;
         const inputChangeHandler = (event) => {
             columnSearchHandler(propName, event.target.value);
@@ -24,24 +24,68 @@ export default function ColumnFilterRow({ columnNames, getWidth, config, value,
                     return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
                 }
                 if (format === "date-time" || format === "date") {
-                    const dateFormat = (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) ||
-                        (format === "date"
-                            ? DEFAULT_DATE_FORMAT
-                            : DEFAULT_DATE_TIME_FORMAT);
-                    const dateChangeHandler = (date) => {
-                        columnSearchHandler(propName, date ? localeFormat(date, dateFormat) : "");
+                    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 : ""}` }));
                     };
-                    return (_jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, showTimeSelect: format === "date-time", locale: nl, selected: propValue ? new Date(propValue) : null, onChange: dateChangeHandler, value: propValue || undefined, placeholderText: dateFormat, isClearable: true }));
+                    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("input", { value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}` }));
+                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("input", { type: "number", value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}`, min: minimum, max: maximum }));
+                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];
@@ -50,8 +94,14 @@ export default function ColumnFilterRow({ columnNames, getWidth, config, value,
         if (propName === SELECT_ALL_COLUMN_NAME || !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable)) {
             return _jsx("div", { className: "schema-table__th" });
         }
-        return (_jsx("div", Object.assign({ className: "schema-table__th" }, { children: field(propSchema, propName, propValue, propConfig) }), `filter-col-${propName}`));
-    }, [columnNames, config, field, properties, value]);
+        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),

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

@@ -2,11 +2,7 @@ import React from "react";
 import { oas31 } from "openapi3-ts";
 import { TColumnFilterValue } from "../index";
 export interface ISchemaColumnFilterPopoverConfig {
-    anchorPoint: {
-        x: number;
-        y: number;
-    };
-    anchorPosition?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+    referenceElement: HTMLElement;
     propName: string;
 }
 type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
@@ -15,5 +11,5 @@ type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
     value: TColumnFilterValue;
     onClose: () => void;
 };
-declare const _default: React.MemoExoticComponent<(props: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onChange, onClose, propName, propSchema, referenceElement, value, }: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/SchemaTable/SchemaColumnFilterPopover/index.js

@@ -1,53 +1,37 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import FilterFormComponent from "./FilterFormComponent";
-const SchemaColumnFilterPopover = (props) => {
-    const { anchorPoint, onClose, onChange, propName, propSchema, value } = props;
-    const [popoverEl, setPopoverEl] = React.useState();
-    const rect = React.useMemo(() => {
-        return popoverEl === null || popoverEl === void 0 ? void 0 : popoverEl.getBoundingClientRect();
-    }, [popoverEl]);
-    const ref = React.useCallback((el) => {
-        if (el) {
-            setPopoverEl(el);
-        }
-    }, []);
-    const style = React.useMemo(() => {
-        const result = {};
-        let anchorPosition = props.anchorPosition;
-        if (!anchorPosition) {
-            const anchorPositionVertical = anchorPoint.y > window.innerHeight / 2 ? "bottom" : "top";
-            const anchorPositionHorizontal = anchorPoint.x > window.innerWidth / 2 ? "Right" : "Left";
-            anchorPosition = `${anchorPositionVertical}${anchorPositionHorizontal}`;
-        }
-        switch (anchorPosition) {
-            case "bottomLeft":
-                result.left = (anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0;
-                result.top = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y) || 0) - rect.height : 0;
-                break;
-            case "topLeft":
-                result.left = (anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0;
-                result.top = (anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y) || 0;
-                break;
-            case "bottomRight":
-                result.left = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0) - rect.width : 0;
-                result.top = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y) || 0) - rect.height : 0;
-                break;
-            case "topRight":
-            default:
-                result.left = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0) - rect.width : 0;
-                result.top = anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y;
-                break;
-        }
-        result.maxHeight = window.innerHeight - result.top - 10;
-        return result;
-    }, [anchorPoint.x, anchorPoint.y, props.anchorPosition, rect]);
-    const lightboxRef = React.useRef(null);
-    const onLightboxClick = React.useCallback((e) => {
-        if (e.target === lightboxRef.current) {
+import { usePopper } from "react-popper";
+const SchemaColumnFilterPopover = ({ onChange, onClose, propName, propSchema, referenceElement, value, }) => {
+    const [popperElement, setPopperElement] = React.useState(null);
+    const [arrowElement, setArrowElement] = React.useState(null);
+    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+        modifiers: [{ name: "arrow", options: { element: arrowElement } }],
+    });
+    React.useEffect(() => {
+        const onWindowClick = (e) => {
+            if (!popperElement) {
+                return;
+            }
+            let parent = e.target;
+            while (parent && popperElement) {
+                if (parent === popperElement) {
+                    return;
+                }
+                parent =
+                    parent.parentNode === window.document ? null : parent.parentNode;
+            }
             onClose();
-        }
-    }, [onClose]);
-    return (_jsx("div", Object.assign({ className: `lightbox lightbox--transparent schema-column-filter-popover schema-column-filter-popover__${propSchema.type}${propSchema.format ? `_${propSchema.format}` : ""}`, onClick: onLightboxClick, onContextMenu: onClose, ref: lightboxRef }, { children: _jsx("div", Object.assign({ className: "popover", ref: ref, style: style }, { children: _jsx(FilterFormComponent, { onChange: onChange, propSchema: propSchema, propName: propName, columnFilterValue: value }) })) })));
+        };
+        window.addEventListener("click", onWindowClick, { capture: true });
+        return () => {
+            window.removeEventListener("click", onWindowClick, { capture: true });
+        };
+    }, [onClose, popperElement]);
+    const classNames = ["popover"];
+    if (attributes.popper) {
+        classNames.push(`bs-popover-${attributes.popper["data-popper-placement"]}`);
+    }
+    return (_jsxs("div", Object.assign({ className: classNames.join(" "), role: "tooltip", ref: setPopperElement, style: styles.popper }, attributes.popper, { children: [_jsx("div", { className: "popover-arrow", ref: setArrowElement, style: styles.arrow }), _jsx("div", Object.assign({ className: "popover-body" }, { children: _jsx(FilterFormComponent, { onChange: onChange, propSchema: propSchema, propName: propName, columnFilterValue: value }) }))] })));
 };
 export default React.memo(SchemaColumnFilterPopover);

package/dist/SchemaTable/Th/index.js

@@ -36,21 +36,13 @@ const Th = ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable,
         if (!setPopoverConfig) {
             return;
         }
-        const rect = e.currentTarget.getBoundingClientRect();
+        const referenceElement = e.currentTarget;
         setPopoverConfig((popoverConfig) => {
             if (popoverConfig) {
                 return undefined;
             }
             return {
-                anchorPoint: rect
-                    ? {
-                        x: Math.round(rect.x + rect.width),
-                        y: Math.round(rect.y + rect.height),
-                    }
-                    : {
-                        x: e.clientX,
-                        y: e.clientY,
-                    },
+                referenceElement,
                 propName,
             };
         });

package/dist/SchemaTable/index.js

@@ -324,6 +324,6 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }
         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, { anchorPoint: popoverConfig.anchorPoint, anchorPosition: popoverConfig.anchorPosition, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName] })) : null] })));
+    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/SchemaColumnFilterPopover/FilterFormComponent/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { oas31 } from "openapi3-ts";
+import { TColumnFilterValue } from "../../index";
+interface IFilterFormComponentProps {
+    onChange: (newValue?: TColumnFilterValue) => void;
+    propSchema: oas31.SchemaObject;
+    propName: string;
+    columnFilterValue: TColumnFilterValue;
+}
+declare const _default: React.MemoExoticComponent<({ onChange, propSchema, propName, columnFilterValue, }: IFilterFormComponentProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { uncamel } from "../../../inc/string";
+import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../../inc/constant";
+import DatePicker from "react-datepicker";
+import nl from "date-fns/locale/nl";
+const FilterFormComponent = ({ onChange, propSchema, propName, columnFilterValue, }) => {
+    const { type, format, minimum, maximum } = propSchema;
+    const value = columnFilterValue;
+    switch (type) {
+        case "integer":
+            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));
+                    }, placeholder: `Search ${propName}`, min: minimum, max: maximum }) })));
+        case "boolean":
+            let selectValue = value ? "✓" : "✕";
+            if (value === undefined) {
+                selectValue = "";
+            }
+            return (_jsxs("select", Object.assign({ className: "form-select", value: selectValue, "data-prop-name": propName, onChange: (e) => {
+                    switch (e.currentTarget.value) {
+                        case "✓":
+                            onChange(true);
+                            break;
+                        case "✕":
+                            onChange(false);
+                            break;
+                        default:
+                            onChange(undefined);
+                    }
+                } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), ["✓", "✕"].map((optionValue) => (_jsx("option", Object.assign({ value: optionValue }, { children: optionValue }), `column-filter-select-${optionValue}`)))] })));
+        // @ts-ignore
+        case "string":
+            if (propSchema.enum) {
+                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}`)))] })));
+            }
+            if (format === "date-time" || format === "date") {
+                const dateFormat = format === "date" ? DEFAULT_DATE_FORMAT : DEFAULT_DATE_TIME_FORMAT;
+                const dateRangeValue = (columnFilterValue || {
+                    from: undefined,
+                    to: undefined,
+                });
+                const startDateChangeHandler = (date) => {
+                    if (!date && !dateRangeValue.to) {
+                        onChange(undefined);
+                        return;
+                    }
+                    if (dateRangeValue.to && date && date > dateRangeValue.to) {
+                        return;
+                    }
+                    onChange(Object.assign(Object.assign({}, columnFilterValue), { from: date || undefined }));
+                };
+                const endDateChangeHandler = (date) => {
+                    if (!date && !dateRangeValue.from) {
+                        onChange(undefined);
+                        return;
+                    }
+                    if (dateRangeValue.from && date && date < dateRangeValue.from) {
+                        return;
+                    }
+                    onChange(Object.assign(Object.assign({}, columnFilterValue), { to: date || undefined }));
+                };
+                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: "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);
+                    } }) })));
+    }
+};
+export default React.memo(FilterFormComponent);

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { oas31 } from "openapi3-ts";
+import { TColumnFilterValue } from "../index";
+export interface ISchemaColumnFilterPopoverConfig {
+    referenceElement: HTMLElement;
+    propName: string;
+}
+type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
+    onChange: (newValue?: TColumnFilterValue) => void;
+    propSchema: oas31.SchemaObject;
+    value: TColumnFilterValue;
+    onClose: () => void;
+};
+declare const _default: React.MemoExoticComponent<({ onChange, onClose, propName, propSchema, referenceElement, value, }: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import FilterFormComponent from "./FilterFormComponent";
+import { usePopper } from "react-popper";
+const SchemaColumnFilterPopover = ({ onChange, onClose, propName, propSchema, referenceElement, value, }) => {
+    const [popperElement, setPopperElement] = React.useState(null);
+    const [arrowElement, setArrowElement] = React.useState(null);
+    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+        modifiers: [{ name: "arrow", options: { element: arrowElement } }],
+    });
+    React.useEffect(() => {
+        const onWindowClick = (e) => {
+            if (!popperElement) {
+                return;
+            }
+            let parent = e.target;
+            while (parent && popperElement) {
+                if (parent === popperElement) {
+                    return;
+                }
+                parent =
+                    parent.parentNode === window.document ? null : parent.parentNode;
+            }
+            onClose();
+        };
+        window.addEventListener("click", onWindowClick, { capture: true });
+        return () => {
+            window.removeEventListener("click", onWindowClick, { capture: true });
+        };
+    }, [onClose, popperElement]);
+    const classNames = ["popover", "schema-column-filter-popover"];
+    if (attributes.popper) {
+        classNames.push(`bs-popover-${attributes.popper["data-popper-placement"]}`);
+    }
+    return (_jsxs("div", Object.assign({ className: classNames.join(" "), role: "tooltip", ref: setPopperElement, style: styles.popper }, attributes.popper, { children: [_jsx("div", { className: "popover-arrow", ref: setArrowElement, style: styles.arrow }), _jsx("div", Object.assign({ className: "popover-body" }, { children: _jsx(FilterFormComponent, { onChange: onChange, propSchema: propSchema, propName: propName, columnFilterValue: value }) }))] })));
+};
+export default React.memo(SchemaColumnFilterPopover);

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { oas31 } from "openapi3-ts";
+import { IColumnConfig, IRenderData } from "../../types";
+interface ITdProps<T> {
+    checkedIndexes?: number[];
+    columnIndex: number;
+    data: T[];
+    getRowClassName?: (rowData: T, dataIndex: number) => string;
+    getRowSelected?: (rowData: T) => boolean;
+    rowHeight: number;
+    rowIndex: number;
+    onCheckedIndexesChange?: (dataIndex: number[]) => void;
+    onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
+    propConfig?: IColumnConfig<any>;
+    propName: string;
+    propSchema: oas31.SchemaObject;
+    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 const _default: typeof Td;
+export default _default;

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

@@ -0,0 +1,78 @@
+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, }) {
+    const onTdClick = React.useCallback((e) => {
+        if (!sortedRenderData || !onRowClick) {
+            return;
+        }
+        const { rowIndex } = e.currentTarget.dataset;
+        if (!rowIndex) {
+            return;
+        }
+        const row = sortedRenderData[parseInt(rowIndex, 10)];
+        onRowClick(data[row._index], row._index, e);
+    }, [data, onRowClick, sortedRenderData]);
+    const row = sortedRenderData ? sortedRenderData[rowIndex] : undefined;
+    const tdDivProps = React.useMemo(() => {
+        if (!row) {
+            return undefined;
+        }
+        return {
+            "data-row-index": rowIndex,
+            "data-column-index": columnIndex,
+            key: propName,
+            style: Object.assign(Object.assign({}, style), { lineHeight: `${rowHeight}px` }),
+            onClick: !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) ? onTdClick : undefined,
+            className: `schema-table__td schema-table__td--${rowIndex % 2 ? "odd" : "even"}${getRowSelected && getRowSelected(data[row._index])
+                ? " schema-table__td--selected"
+                : ""} ${getRowClassName ? getRowClassName(data[row._index], row._index) : ""}`,
+            title: row[propName],
+        };
+    }, [
+        columnIndex,
+        data,
+        getRowClassName,
+        getRowSelected,
+        onTdClick,
+        propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell,
+        propName,
+        row,
+        rowHeight,
+        rowIndex,
+        style,
+    ]);
+    if (!row || !tdDivProps) {
+        return null;
+    }
+    if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) {
+        return (_jsx("div", Object.assign({}, tdDivProps, { children: propConfig.renderCell(data[row._index], row._index, rowIndex) })));
+    }
+    if (propName === SELECT_ALL_COLUMN_NAME) {
+        const onChecked = () => {
+            if (!onCheckedIndexesChange) {
+                return;
+            }
+            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) }) })) })));
+    }
+    if (!propSchema) {
+        return null;
+    }
+    switch (propSchema.type) {
+        case "boolean":
+            tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
+            break;
+        case "number":
+        case "integer":
+            tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
+            break;
+        default:
+            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) {
+                tdDivProps.className += ` text-${propConfig.align}`;
+            }
+    }
+    return _jsx("div", Object.assign({}, tdDivProps, { children: row[propName] }));
+}
+export default React.memo(Td);

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

@@ -0,0 +1,27 @@
+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;