mig-schema-table 3.0.63 → 3.0.66

package/dist/SchemaTable/{Th → SchemaTableTh}/index.d.ts

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

package/dist/SchemaTable/SchemaTableTh/index.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { t, uncamel } from "../../inc/string";
+import { SELECT_ALL_COLUMN_NAME } from "../constants";
+import { timeZone } from "../../inc/date";
+export var EColumnFilterStatus;
+(function (EColumnFilterStatus) {
+    EColumnFilterStatus["UNAVAILABLE"] = "UNAVAILABLE";
+    EColumnFilterStatus["AVAILABLE"] = "AVAILABLE";
+    EColumnFilterStatus["ACTIVE"] = "ACTIVE";
+})(EColumnFilterStatus || (EColumnFilterStatus = {}));
+const SchemaTableTh = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propIsRequired, propName, schema, setMenuConfig, setSortAsc, setSortColumn, sortAsc, style, }) => {
+    const classNames = [
+        `schema-table-th`,
+        `schema-table-th--filter-${columnFilterStatus}`,
+    ];
+    classNames.push(isSortable ? "schema-table-th--sortable" : "schema-table-th--unsortable");
+    if (sortAsc !== undefined) {
+        classNames.push("schema-table-th--sorted");
+    }
+    const onLabelClick = 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 onTriggerClick = React.useCallback((e) => {
+        const referenceElement = e.currentTarget;
+        setMenuConfig((menuConfig) => {
+            if ((menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.propName) === propName) {
+                return undefined;
+            }
+            return {
+                propConfig,
+                propIsRequired,
+                propName,
+                referenceElement,
+            };
+        });
+    }, [propConfig, propIsRequired, propName, setMenuConfig]);
+    const labelBody = React.useMemo(() => {
+        if ((propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) !== undefined) {
+            return propConfig.title;
+        }
+        if ((schema === null || schema === void 0 ? void 0 : schema.format) &&
+            schema.format.startsWith("date") &&
+            (propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones) !== false) {
+            return `${uncamel(propName)} (${t(timeZone)})`;
+        }
+        return uncamel(propName);
+    }, [propConfig, propName, schema === null || schema === void 0 ? void 0 : schema.format]);
+    if (propName === SELECT_ALL_COLUMN_NAME) {
+        return (_jsx("div", Object.assign({ style: style, className: classNames.join(" ") }, { 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 && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell)) {
+        return _jsx("div", { style: style, className: classNames.join(" ") });
+    }
+    switch (schema === null || schema === void 0 ? void 0 : schema.type) {
+        case "boolean":
+            classNames.push(`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":
+            classNames.push(`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) {
+                classNames.push(`text-${propConfig.align}`);
+            }
+    }
+    return (_jsxs("div", Object.assign({ style: style, className: classNames.join(" ") }, { children: [_jsxs("div", Object.assign({ className: "schema-table-th__label-body", style: { lineHeight: "44px" }, onClick: onLabelClick }, { children: [_jsx("span", Object.assign({ className: "schema-table-th__label-body-text" }, { children: labelBody })), sortAsc === undefined ? null : (_jsx("span", Object.assign({ className: "schema-table-th__sort-icon" }, { children: sortAsc ? "↓" : "↑" })))] })), _jsx("button", Object.assign({ className: "schema-table-th__trigger-el", onClick: onTriggerClick }, { children: "\u2304" }))] })));
+};
+export default React.memo(SchemaTableTh);

package/dist/SchemaTable/{SchemaColumnFilterPopover/FilterFormComponent → SchemaTableThMenu/FilterMenuComponent}/index.d.ts

@@ -2,14 +2,14 @@ import React from "react";
 import { oas31 } from "openapi3-ts";
 import { TColumnFilterValue } from "../../index";
 import { IColumnConfig } from "../../../types";
-export interface IFilterFormComponentProps {
+export interface IFilterMenuComponentProps {
     columnFilterValue: TColumnFilterValue;
-    onChange: (newValue?: TColumnFilterValue) => void;
+    onChange: (newValue: TColumnFilterValue | undefined, persistState: boolean) => void;
     onInputKeyDown: (e: React.KeyboardEvent) => void;
     propConfig?: IColumnConfig<any>;
     propIsRequired: boolean;
     propName: string;
     propSchema?: oas31.SchemaObject;
 }
-declare const _default: React.MemoExoticComponent<({ columnFilterValue, onChange, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, }: IFilterFormComponentProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ columnFilterValue, onChange, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, }: IFilterMenuComponentProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/SchemaTable/SchemaTableThMenu/FilterMenuComponent/index.js

@@ -0,0 +1,107 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { t } 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";
+import { endOfDay } from "date-fns";
+const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, }) => {
+    const { type, format, minimum, maximum } = propSchema || {};
+    const value = columnFilterValue;
+    switch (type) {
+        case "integer":
+            return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table-th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsx("input", { autoFocus: true, className: "form-control", type: "number", value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+                            onChange(e.currentTarget.value === ""
+                                ? undefined
+                                : parseInt(e.currentTarget.value), false);
+                        }, onBlur: (e) => {
+                            onChange(e.currentTarget.value === ""
+                                ? undefined
+                                : parseInt(e.currentTarget.value), true);
+                        }, onKeyDown: onInputKeyDown, placeholder: `Search ${propName}`, min: minimum, max: maximum }) }) })));
+        case "boolean":
+            let selectValue = value ? "✓" : "✕";
+            if (value === undefined) {
+                selectValue = "";
+            }
+            return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table-th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: selectValue, "data-prop-name": propName, onChange: (e) => {
+                            switch (e.currentTarget.value) {
+                                case "✓":
+                                    onChange(true, true);
+                                    break;
+                                case "✕":
+                                    onChange(false, true);
+                                    break;
+                                default:
+                                    onChange(undefined, true);
+                            }
+                        } }, { 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 === null || propSchema === void 0 ? void 0 : propSchema.enum) {
+                return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table-th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsxs("select", Object.assign({ autoFocus: true, className: "form-select", value: value, "data-prop-name": propName, onChange: (e) => {
+                                onChange(e.currentTarget.value || undefined, true);
+                            } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), propSchema.enum.map((name) => {
+                                    const rowName = !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.translation)
+                                        ? name
+                                        : t(name, propConfig.translation);
+                                    return (_jsx("option", Object.assign({ value: rowName }, { children: rowName }), `column-filter-select-${rowName}`));
+                                })] })) }) })));
+            }
+            if (format === "date-time" || format === "date") {
+                const dateFormat = format === "date" ? DEFAULT_DATE_FORMAT : DEFAULT_DATE_TIME_FORMAT;
+                const dateRangeValue = (columnFilterValue || {
+                    from: undefined,
+                    to: undefined,
+                    filterEmpty: undefined,
+                });
+                return (_jsxs("ol", Object.assign({ className: "schema-table-menu schema-table-th-menu__filter-menu-component" }, { children: [propIsRequired ? null : (_jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsxs("label", Object.assign({ className: "d-flex" }, { children: [_jsx("input", { type: "checkbox", className: "m-0 me-1", checked: !!dateRangeValue.filterEmpty, onChange: () => {
+                                                const { filterEmpty } = dateRangeValue, newDateRangeValue = __rest(dateRangeValue, ["filterEmpty"]);
+                                                if (!filterEmpty) {
+                                                    newDateRangeValue.filterEmpty = true;
+                                                }
+                                                onChange(Object.keys(newDateRangeValue).length
+                                                    ? newDateRangeValue
+                                                    : undefined, true);
+                                            } }), "Hide empty values"] })), _jsx("hr", {})] }))), _jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsx("label", Object.assign({ style: { width: 120, paddingLeft: 4 } }, { children: "Start date-time" })), _jsx(DatePicker, { dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: dateRangeValue.from, onChange: (date) => {
+                                        if (!date && !dateRangeValue.to) {
+                                            onChange(undefined, true);
+                                            return;
+                                        }
+                                        if (dateRangeValue.to && date && date > dateRangeValue.to) {
+                                            return;
+                                        }
+                                        onChange(Object.assign(Object.assign({}, columnFilterValue), { from: date || undefined }), true);
+                                    }, placeholderText: dateFormat, isClearable: true, selectsStart: true, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] })), _jsxs("li", Object.assign({ style: { padding: 8 } }, { children: [_jsx("label", Object.assign({ style: { width: 120, paddingLeft: 4 } }, { children: "End date-time" })), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selectsEnd: true, selected: dateRangeValue.to, onChange: (date) => {
+                                        if (!date && !dateRangeValue.from) {
+                                            onChange(undefined, true);
+                                            return;
+                                        }
+                                        const to = date ? endOfDay(date) : undefined;
+                                        if (dateRangeValue.from && to && to < dateRangeValue.from) {
+                                            return;
+                                        }
+                                        onChange(Object.assign(Object.assign({}, columnFilterValue), { to }), true);
+                                    }, placeholderText: dateFormat, isClearable: true, startDate: dateRangeValue.from, endDate: dateRangeValue.to, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] })));
+            }
+        // falls through
+        default:
+            return (_jsx("ol", Object.assign({ className: "schema-table-menu schema-table-th-menu__filter-menu-component" }, { children: _jsx("li", { children: _jsx("input", { autoFocus: true, type: "text", className: "form-control", placeholder: `Search ${propName}`, "aria-label": `Search ${propName}`, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
+                            onChange(e.currentTarget.value || undefined, false);
+                        }, onKeyDown: onInputKeyDown, onBlur: (e) => {
+                            onChange(e.currentTarget.value || undefined, true);
+                        } }) }) })));
+    }
+};
+export default React.memo(FilterMenuComponent);

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

@@ -0,0 +1,22 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { oas31 } from "openapi3-ts";
+import { TColumnFilterValue } from "../index";
+import { IColumnConfig } from "../../types";
+export interface ISchemaTableThMenuConfig {
+    referenceElement: HTMLElement;
+    propName: string;
+    propConfig?: IColumnConfig<any>;
+    propIsRequired: boolean;
+}
+type TSchemaTableThMenuProps = ISchemaTableThMenuConfig & {
+    onChange: (newValue: TColumnFilterValue | undefined, persistState: boolean) => void;
+    onInputKeyDown: (e: React.KeyboardEvent) => void;
+    propIsRequired: boolean;
+    propSchema: oas31.SchemaObject;
+    setSortColumn: Dispatch<SetStateAction<string>>;
+    setSortAsc: Dispatch<SetStateAction<boolean>>;
+    value: TColumnFilterValue;
+    onClose: (e: MouseEvent | React.MouseEvent) => void;
+};
+declare const _default: React.MemoExoticComponent<({ onChange, onClose, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, referenceElement, setSortAsc, setSortColumn, value, }: TSchemaTableThMenuProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/SchemaTable/SchemaTableThMenu/index.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import FilterMenuComponent from "./FilterMenuComponent";
+import { usePopper } from "react-popper";
+const SchemaTableThMenu = ({ onChange, onClose, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, referenceElement, setSortAsc, setSortColumn, value, }) => {
+    const [menu, setMenu] = React.useState(null);
+    const [subMenu, setSubMenu] = React.useState(null);
+    const [subMenuReferenceElement, setSubMenuReferenceElement] = React.useState(null);
+    const menuPopper = usePopper(referenceElement, menu, {
+        placement: "bottom-end",
+    });
+    const subMenuPopper = usePopper(subMenuReferenceElement, subMenu, {
+        placement: "right-start",
+    });
+    React.useEffect(() => {
+        const onWindowClick = (e) => {
+            if (!menu) {
+                return;
+            }
+            let parent = e.target;
+            while (parent && menu) {
+                if (parent === menu || parent === subMenu) {
+                    return;
+                }
+                parent =
+                    parent.parentNode === window.document ? null : parent.parentNode;
+            }
+            onClose(e);
+        };
+        window.addEventListener("click", onWindowClick, { capture: true });
+        return () => {
+            window.removeEventListener("click", onWindowClick, { capture: true });
+        };
+    }, [onClose, menu, subMenu]);
+    const FilterMenu = (propConfig === null || propConfig === void 0 ? void 0 : propConfig.FilterMenu) || FilterMenuComponent;
+    const onSortAscendingClick = React.useCallback((e) => {
+        setSortColumn(propName);
+        setSortAsc(true);
+        onClose(e);
+    }, [onClose, propName, setSortAsc, setSortColumn]);
+    const onSortDescendingClick = React.useCallback((e) => {
+        setSortColumn(propName);
+        setSortAsc(false);
+        onClose(e);
+    }, [onClose, propName, setSortAsc, setSortColumn]);
+    const onFilterCheckboxChange = React.useCallback(() => {
+        onChange(undefined, true);
+    }, [onChange]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "schema-table-th-menu", ref: setMenu, style: menuPopper.styles.popper }, menuPopper.attributes.popper, { children: _jsxs("ol", Object.assign({ className: "schema-table-menu" }, { children: [_jsxs("li", Object.assign({ onClick: onSortAscendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "schema-table-th-menu__icon" }, { children: "\u2193" })), " Sort ascending"] })), _jsxs("li", Object.assign({ onClick: onSortDescendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "schema-table-th-menu__icon" }, { children: "\u2191" })), " Sort descending"] })), _jsxs("li", Object.assign({ style: { padding: 8 }, onMouseOver: (e) => {
+                                setSubMenuReferenceElement(e.currentTarget);
+                            } }, { children: [_jsx("span", Object.assign({ className: "schema-table-th-menu__icon" }, { children: _jsx("input", { type: "checkbox", id: "schema-table-th-menu__filters", checked: value !== undefined, disabled: value === undefined, onChange: onFilterCheckboxChange }) })), _jsx("label", Object.assign({ htmlFor: "schema-table-th-menu__filters" }, { children: "Filters" })), _jsx("div", Object.assign({ className: "schema-table-th-menu__sub-menu-indicator" }, { children: ">" }))] }))] })) })), subMenuReferenceElement ? (_jsx("div", Object.assign({ className: "schema-table-th-menu__sub-menu", ref: setSubMenu, style: subMenuPopper.styles.popper }, subMenuPopper.attributes.popper, { children: _jsx(FilterMenu, { columnFilterValue: value, onChange: onChange, onInputKeyDown: onInputKeyDown, propConfig: propConfig, propIsRequired: propIsRequired, propName: propName, propSchema: propSchema }) }))) : null] }));
+};
+export default React.memo(SchemaTableThMenu);

package/dist/SchemaTable/index.d.ts

@@ -44,7 +44,7 @@ export interface ISchemaTableProps<T> {
 export interface IDateColumnFilterValue {
     from?: Date;
     to?: Date;
-    filterEmpty?: boolean;
+    filterEmpty?: true;
 }
 export type TColumnFilterValue = string | number | boolean | IDateColumnFilterValue;
 declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight, schema, searchPlaceholder, style, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/SchemaTable/index.js

@@ -3,12 +3,12 @@ import React from "react";
 import { VariableSizeGrid, VariableSizeList } from "react-window";
 import { localeFormat } from "../inc/date";
 import { t, 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 { parseLocationHash, serializeLocationHash } from "../inc/data";
+import SchemaTableTh, { EColumnFilterStatus } from "./SchemaTableTh";
+import SchemaTableThMenu from "./SchemaTableThMenu";
 const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
 function getSortByValue(propSchema, propConfig) {
     var _a;
@@ -27,7 +27,7 @@ function getSortByValue(propSchema, propConfig) {
 function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters = {}, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight = 36, schema, searchPlaceholder, style, useFilterStateHash, width, }) {
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
-    const [popoverConfig, setPopoverConfig] = React.useState();
+    const [schemaTableThMenuConfig, setSchemaTableThMenuConfig] = React.useState();
     const isDataFunction = data instanceof Function;
     const [sourceData, setSourceData] = React.useState(isDataFunction ? undefined : data);
     const [locationHash, setLocationHash] = React.useState(parseLocationHash(window.location.hash));
@@ -367,27 +367,29 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }
         setSortAsc(x);
     }, [isDataFunction]);
-    const SchemaTableTh = React.useCallback(({ style, index }) => {
+    const ConfiguredSchemaTableTh = React.useCallback(({ style, index }) => {
         const propName = columnNames[index];
         const propSchema = (propName === SELECT_ALL_COLUMN_NAME
             ? { type: "boolean" }
             : properties[propName]);
         const propConfig = config ? config[propName] : undefined;
         let columnFilterStatus = isColumnFilterable &&
-            (propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.FilterForm)) &&
+            (propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.FilterMenu)) &&
             (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, propIsRequired: required.includes(propName), propName: propName, schema: propSchema, setPopoverConfig: setPopoverConfig, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
+        return (_jsx(SchemaTableTh, { columnFilterStatus: columnFilterStatus, 
+            // disableColumnFilter={disableColumnFilter}
+            isAllChecked: isAllRowsChecked, isSortable: !!isSortable, numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: propConfig, propIsRequired: required.includes(propName), propName: propName, schema: propSchema, setMenuConfig: setSchemaTableThMenuConfig, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
     }, [
         checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
         columnFilterMap,
         columnNames,
         config,
-        disableColumnFilter,
+        // disableColumnFilter,
         isAllRowsChecked,
         isColumnFilterable,
         isSortable,
@@ -424,19 +426,15 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         if (isDataFunction) {
             setIsDirty(true);
         }
-        if (useFilterStateHash) {
-            window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { searchQuery: e.currentTarget.value }));
-            return;
-        }
         setSearchQuery(e.currentTarget.value);
-    }, [isDataFunction, locationHash, useFilterStateHash]);
+    }, [isDataFunction]);
     const refreshData = React.useCallback(() => {
         setIsDirty(false);
         setSourceData(undefined);
     }, []);
     const onInputKeyDown = React.useCallback((e) => {
         if (e.key === "Enter") {
-            setPopoverConfig(undefined);
+            setSchemaTableThMenuConfig(undefined);
             if (isDirty) {
                 refreshData();
             }
@@ -452,8 +450,10 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             ? rowsMaxHeight
             : rowsHeight;
     }, [maxHeight, isSearchable, rowCount, rowHeight]);
-    const onPopoverClose = React.useCallback(() => {
-        setPopoverConfig(undefined);
+    const onPopoverClose = React.useCallback((e) => {
+        setSchemaTableThMenuConfig(undefined);
+        e.preventDefault();
+        e.stopPropagation();
     }, []);
     React.useEffect(() => {
         if (!useFilterStateHash) {
@@ -471,35 +471,31 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         if (!useFilterStateHash) {
             return;
         }
-        if (locationHash.columnFilterMap) {
-            setColumnFilterMap(locationHash.columnFilterMap);
-        }
-        if (locationHash.searchQuery !== undefined) {
-            setSearchQuery(locationHash.searchQuery);
-        }
+        setColumnFilterMap(locationHash.columnFilterMap || {});
+        setSearchQuery(locationHash.searchQuery || "");
     }, [locationHash, useFilterStateHash]);
-    const onSchemaColumnFilterChange = React.useCallback((newColumnFilterValue) => {
-        if (!popoverConfig) {
+    const onSchemaColumnFilterChange = React.useCallback((newColumnFilterValue, persistState) => {
+        if (!schemaTableThMenuConfig) {
             return;
         }
         if (isDataFunction) {
             setIsDirty(true);
         }
-        if (newColumnFilterValue === undefined) {
-            disableColumnFilter(popoverConfig.propName);
+        if (useFilterStateHash && persistState) {
+            window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { columnFilterMap: Object.assign(Object.assign({}, columnFilterMap), { [schemaTableThMenuConfig.propName]: newColumnFilterValue }) }));
             return;
         }
-        if (useFilterStateHash) {
-            window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { columnFilterMap: Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue }) }));
+        if (newColumnFilterValue === undefined) {
+            disableColumnFilter(schemaTableThMenuConfig.propName);
             return;
         }
-        setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue })));
+        setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [schemaTableThMenuConfig.propName]: newColumnFilterValue })));
     }, [
         columnFilterMap,
         disableColumnFilter,
         isDataFunction,
         locationHash,
-        popoverConfig,
+        schemaTableThMenuConfig,
         useFilterStateHash,
     ]);
     const searchInputAutoFocus = React.useMemo(() => {
@@ -508,7 +504,20 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }
         return enableAutoFocus;
     }, [enableAutoFocus]);
-    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, onKeyDown: onInputKeyDown, autoFocus: searchInputAutoFocus })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_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}`)) : (_jsx("div", Object.assign({ style: {
+    const onClearFiltersButtonClick = React.useCallback(() => {
+        if (useFilterStateHash) {
+            window.location.hash = "";
+            return;
+        }
+        setColumnFilterMap({});
+        setSearchQuery("");
+    }, [useFilterStateHash]);
+    const onSearchBlur = React.useCallback(() => {
+        if (useFilterStateHash && searchQuery !== locationHash.searchQuery) {
+            window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { searchQuery }));
+        }
+    }, [locationHash, searchQuery, useFilterStateHash]);
+    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, onKeyDown: onInputKeyDown, autoFocus: searchInputAutoFocus, onBlur: onSearchBlur })) : null })), customElement, _jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: "Clear filters" }))] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: ConfiguredSchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), sourceData && !isDirty ? (_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}`)) : (_jsx("div", Object.assign({ style: {
                     width: rowWidth,
                     height: Math.max(50, tableBodyHeight),
                     border: "1px solid #BBB",
@@ -517,6 +526,6 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
                     backgroundColor: "#CCC",
                     alignItems: "center",
                     justifyContent: "center",
-                } }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { referenceElement: popoverConfig.referenceElement, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, onInputKeyDown: onInputKeyDown, propIsRequired: popoverConfig.propIsRequired, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName], propConfig: popoverConfig.propConfig })) : null] })));
+                } }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), schemaTableThMenuConfig ? (_jsx(SchemaTableThMenu, { onChange: onSchemaColumnFilterChange, onClose: onPopoverClose, onInputKeyDown: onInputKeyDown, propConfig: schemaTableThMenuConfig.propConfig, propIsRequired: schemaTableThMenuConfig.propIsRequired, propName: schemaTableThMenuConfig.propName, propSchema: schema.properties[schemaTableThMenuConfig.propName], referenceElement: schemaTableThMenuConfig.referenceElement, setSortAsc: setSortAsc, setSortColumn: setSortColumn, value: columnFilterMap[schemaTableThMenuConfig.propName] })) : null] })));
 }
 export default React.memo(SchemaTable);

package/dist/inc/data.js

@@ -1,3 +1,15 @@
+const unserializeDates = (serializedObject) => {
+    if (serializedObject instanceof Object) {
+        if (serializedObject.$Date) {
+            return new Date(serializedObject.$Date);
+        }
+        return Object.entries(serializedObject).reduce((prev, [prop, value]) => {
+            prev[prop] = unserializeDates(value);
+            return prev;
+        }, {});
+    }
+    return serializedObject;
+};
 export const parseLocationHash = (search) => {
     if (!search.length) {
         return {};
@@ -15,10 +27,24 @@ export const parseLocationHash = (search) => {
             return;
         }
         // @ts-ignore
-        result[decodeURIComponent(splitPair[0])] = JSON.parse(decodeURIComponent(splitPair[1]));
+        result[decodeURIComponent(splitPair[0])] = unserializeDates(JSON.parse(decodeURIComponent(splitPair[1])));
     });
     return result;
 };
+const serializeDates = (object) => {
+    if (!(object instanceof Object)) {
+        return object;
+    }
+    if (object instanceof Date) {
+        return {
+            $Date: object.toISOString(),
+        };
+    }
+    return Object.entries(object).reduce((prev, [prop, value]) => {
+        prev[prop] = serializeDates(value);
+        return prev;
+    }, {});
+};
 export const serializeLocationHash = (params) => `${Object.entries(params)
-    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(value))}`)
+    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(serializeDates(value)))}`)
     .join("&")}`;

package/dist/index.css

@@ -1,58 +1,36 @@
-.schema-table .popover {
-  --bs-popover-max-width: 1024px;
+.schema-table,
+.schema-table * {
+  box-sizing: border-box;
 }
-.schema-table__tbody {
-  overflow-x: hidden !important;
-  border-collapse: collapse;
-  width: 100%;
-}
-.schema-table__th-row {
-  overflow: hidden !important;
-}
-.schema-table .schema-column-filter-popover {
-  background-color: #eee;
+.schema-table button {
+  border: 1px solid #e4e4e4;
+  padding: 8px;
 }
-.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 button:enabled {
+  background-color: #f6f6f6;
+  color: #404040;
 }
-.schema-table .schema-column-filter-popover input[type=checkbox] {
-  width: fit-content;
-  margin-top: 10px;
-  margin-left: 30px;
+.schema-table button:enabled:hover {
+  border-color: #dbdbdb;
+  background-color: #ececec;
 }
-.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 input {
+  padding: 8px;
+  border: 1px solid #888;
 }
-.schema-table .schema-column-filter-popover .react-datepicker {
-  display: flex;
+.schema-table input:hover {
+  border-color: lightblue;
 }
-.schema-table__th {
-  background-color: #eee;
-  align-items: center;
-  padding-left: 8px;
-  padding-right: 8px;
+.schema-table select {
+  height: 33px;
 }
-.schema-table__th div {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.schema-table__th,
-.schema-table__th button {
-  font-weight: bold;
-  display: flex;
-}
-.schema-table__th--column-filter-status-ACTIVE button {
-  font-style: italic;
+.schema-table__tbody {
+  overflow-x: hidden !important;
+  border-collapse: collapse;
+  width: 100%;
 }
-.schema-table__th--column-filter-status-ACTIVE svg {
-  color: var(--bs-red, red);
+.schema-table__th-row {
+  overflow: hidden !important;
 }
 .schema-table__td {
   overflow: hidden;
@@ -81,16 +59,103 @@
 .schema-table--clickable-rows .schema-table__td {
   cursor: pointer;
 }
-.schema-table button {
-  border: 1px solid transparent;
-}
 .schema-table__action-container {
   display: flex;
   flex-direction: row;
   padding-bottom: 1rem;
 }
-.schema-table__action-container input {
-  width: 30%;
-  border-radius: 8px;
-  padding: 4px 10px;
+
+.schema-table-th {
+  border-right: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  color: #666;
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+  padding-right: 8px;
+  user-select: none;
+}
+.schema-table-th div {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.schema-table-th--sorted {
+  background-color: #eff6fb;
+}
+.schema-table-th--filter-ACTIVE .schema-table-th__label-body-text {
+  text-decoration: underline;
+  font-style: italic;
+}
+.schema-table-th__label-body {
+  display: flex;
+  flex: 1;
+  font-size: 14px;
+  align-items: center;
+}
+.schema-table-th__trigger-el {
+  display: none;
+  position: absolute;
+  border: 1px solid #ddd;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 24px;
+  cursor: pointer;
+  background-color: #eff6fb;
+  color: #666;
+  font-size: 28px;
+  text-align: center;
+  padding: 0 0 5px !important;
+}
+.schema-table-th__sort-icon {
+  font-size: 24px;
+  width: 32px;
+  display: block;
+  text-align: center;
+}
+.schema-table-th:hover {
+  background-color: #eff6fb;
+}
+.schema-table-th:hover .schema-table-th__trigger-el {
+  display: block !important;
+}
+
+.schema-table-th-menu {
+  background-color: white;
+}
+.schema-table-th-menu label {
+  flex: 1;
+}
+.schema-table-th-menu .schema-table-th-menu__sub-menu-indicator {
+  padding-left: 8px;
+  margin-left: 8px;
+}
+.schema-table-th-menu__icon {
+  display: block;
+  width: 24px;
+  overflow: hidden;
+  text-align: center;
+}
+
+.schema-table-th-menu__sub-menu {
+  background-color: white;
+  border: 1px solid #ddd;
+}
+
+.schema-table-menu {
+  font-size: 14px;
+  list-style: none outside;
+  padding: 0;
+  margin: 0;
+}
+.schema-table-menu li {
+  display: flex;
+  border: 1px solid #ddd;
+  align-items: center;
+  cursor: pointer;
+}
+.schema-table-menu li:hover {
+  background-color: #eff6fb;
 }

package/dist/types.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { IFilterFormComponentProps } from "./SchemaTable/SchemaColumnFilterPopover/FilterFormComponent";
 import { TColumnFilterValue } from "./SchemaTable";
+import { IFilterMenuComponentProps } from "./SchemaTable/SchemaTableThMenu/FilterMenuComponent";
 export interface IColumnConfig<T> {
-    FilterForm?: (props: IFilterFormComponentProps) => React.ReactElement | null;
+    FilterMenu?: (props: IFilterMenuComponentProps) => React.ReactElement | null;
     align?: "start" | "center" | "end";
     dateFormat?: string;
     defaultSortDesc?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.63",
+  "version": "3.0.66",
   "main": "dist/index.js",
   "files": [
     "dist/"

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

@@ -1,84 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { t } 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";
-import { endOfDay } from "date-fns";
-const FilterFormComponent = ({ columnFilterValue, onChange, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, }) => {
-    const { type, format, minimum, maximum } = propSchema || {};
-    const value = columnFilterValue;
-    switch (type) {
-        case "integer":
-            return (_jsx("div", Object.assign({ className: "input-group" }, { children: _jsx("input", { autoFocus: true, className: "form-control", type: "number", value: (value || ""), "data-prop-name": propName, onChange: (e) => {
-                        onChange(e.currentTarget.value === ""
-                            ? undefined
-                            : parseInt(e.currentTarget.value));
-                    }, onKeyDown: onInputKeyDown, placeholder: `Search ${propName}`, min: minimum, max: maximum }) })));
-        case "boolean":
-            let selectValue = value ? "✓" : "✕";
-            if (value === undefined) {
-                selectValue = "";
-            }
-            return (_jsxs("select", Object.assign({ autoFocus: true, 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 === null || propSchema === void 0 ? void 0 : propSchema.enum) {
-                return (_jsxs("select", Object.assign({ autoFocus: true, 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) => {
-                            const rowName = !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.translation)
-                                ? name
-                                : t(name, propConfig.translation);
-                            return (_jsx("option", Object.assign({ value: rowName }, { children: rowName }), `column-filter-select-${rowName}`));
-                        })] })));
-            }
-            if (format === "date-time" || format === "date") {
-                const dateFormat = format === "date" ? DEFAULT_DATE_FORMAT : DEFAULT_DATE_TIME_FORMAT;
-                const dateRangeValue = (columnFilterValue || {
-                    from: undefined,
-                    to: undefined,
-                    filterEmpty: undefined,
-                });
-                return (_jsxs("div", { children: [propIsRequired ? null : (_jsxs("div", { children: [_jsxs("label", Object.assign({ className: "d-flex" }, { children: [_jsx("input", { type: "checkbox", className: "m-0 me-1", checked: !!dateRangeValue.filterEmpty, onChange: () => {
-                                                onChange(Object.assign(Object.assign({}, dateRangeValue), { filterEmpty: !dateRangeValue.filterEmpty }));
-                                            } }), "Hide empty values"] })), _jsx("hr", {})] })), _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, { autoFocus: true, dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: dateRangeValue.from, onChange: (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 }));
-                                            }, 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: (date) => {
-                                                if (!date && !dateRangeValue.from) {
-                                                    onChange(undefined);
-                                                    return;
-                                                }
-                                                const to = date ? endOfDay(date) : undefined;
-                                                if (dateRangeValue.from && to && to < dateRangeValue.from) {
-                                                    return;
-                                                }
-                                                onChange(Object.assign(Object.assign({}, columnFilterValue), { to }));
-                                            }, 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", { autoFocus: true, type: "text", className: "form-control", placeholder: `Search ${propName}`, "aria-label": `Search ${propName}`, value: (value || ""), "data-prop-name": propName, onChange: (e) => {
-                        onChange(e.currentTarget.value || undefined);
-                    }, onKeyDown: onInputKeyDown }) })));
-    }
-};
-export default React.memo(FilterFormComponent);

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

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

package/dist/SchemaTable/SchemaColumnFilterPopover/index.js

@@ -1,38 +0,0 @@
-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, onInputKeyDown, propIsRequired, propName, propSchema, referenceElement, value, propConfig, }) => {
-    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"]}`);
-    }
-    const FilterForm = (propConfig === null || propConfig === void 0 ? void 0 : propConfig.FilterForm) || FilterFormComponent;
-    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(FilterForm, { columnFilterValue: value, onChange: onChange, onInputKeyDown: onInputKeyDown, propConfig: propConfig, propIsRequired: propIsRequired, propName: propName, propSchema: propSchema }) }))] })));
-};
-export default React.memo(SchemaColumnFilterPopover);

package/dist/SchemaTable/Th/index.js

@@ -1,95 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { t, uncamel } from "../../inc/string";
-import { SELECT_ALL_COLUMN_NAME } from "../constants";
-import { timeZone } from "../../inc/date";
-export var EColumnFilterStatus;
-(function (EColumnFilterStatus) {
-    EColumnFilterStatus["UNAVAILABLE"] = "UNAVAILABLE";
-    EColumnFilterStatus["AVAILABLE"] = "AVAILABLE";
-    EColumnFilterStatus["ACTIVE"] = "ACTIVE";
-})(EColumnFilterStatus || (EColumnFilterStatus = {}));
-const Th = ({ columnFilterStatus, disableColumnFilter, isAllChecked, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propIsRequired, 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 {
-                propConfig,
-                propIsRequired,
-                propName,
-                referenceElement,
-            };
-        });
-    }, [
-        columnFilterStatus,
-        disableColumnFilter,
-        propConfig,
-        propIsRequired,
-        propName,
-        setPopoverConfig,
-    ]);
-    const labelBody = React.useMemo(() => {
-        if ((propConfig === null || propConfig === void 0 ? void 0 : propConfig.title) !== undefined) {
-            return propConfig.title;
-        }
-        if ((schema === null || schema === void 0 ? void 0 : schema.format) &&
-            schema.format.startsWith("date") &&
-            (propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones) !== false) {
-            return `${uncamel(propName)} (${t(timeZone)})`;
-        }
-        return uncamel(propName);
-    }, [propConfig, propName, schema === null || schema === void 0 ? void 0 : schema.format]);
-    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 && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) && !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell)) {
-        return _jsx("div", Object.assign({}, thDivProps));
-    }
-    switch (schema === null || schema === void 0 ? void 0 : 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: [labelBody, sortAsc === undefined ? null : sortAsc ? "▲" : "▼"] }))) : (_jsx("div", Object.assign({ style: { lineHeight: "44px" } }, { children: labelBody }))), 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);