mig-schema-table 3.0.73 → 3.0.75

package/dist/SchemaTable/Td/index.js

@@ -48,6 +48,17 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
                     : DEFAULT_DATE_TIME_FORMAT)} (${t(alternativeTimeZone)})`;
             }
         }
+        const classNames = [
+            "schema-table__td",
+            `schema-table__td--${rowIndex % 2 ? "odd" : "even"}`,
+            `schema-table__td--prop-${propName}`,
+        ];
+        if (getRowSelected && getRowSelected(data[row._index], row._index)) {
+            classNames.push("schema-table__td--selected");
+        }
+        if (getRowClassName) {
+            classNames.push(getRowClassName(data[row._index], row._index, sortedRenderData));
+        }
         return {
             "data-row-index": rowIndex,
             "data-column-index": columnIndex,
@@ -55,11 +66,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
             style: Object.assign(Object.assign({}, style), { lineHeight: `${rowHeight}px` }),
             onClick: onTdClick,
             onDoubleClick: onTdDoubleClick,
-            className: `schema-table__td schema-table__td--${rowIndex % 2 ? "odd" : "even"}${getRowSelected && getRowSelected(data[row._index], row._index)
-                ? " schema-table__td--selected"
-                : ""} ${getRowClassName
-                ? getRowClassName(data[row._index], row._index, sortedRenderData)
-                : ""}`,
+            className: classNames.join(" "),
             title,
         };
     }, [

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

@@ -1,7 +1,7 @@
 import { oas31 } from "openapi3-ts";
 import React, { CSSProperties, Dispatch, SetStateAction } from "react";
 import { IColumnConfig } from "../../types";
-import { ISchemaTableThMenuConfig } from "../SchemaTableThMenu";
+import { IThMenuConfig } from "../ThMenu";
 export declare enum EColumnFilterStatus {
     UNAVAILABLE = "UNAVAILABLE",
     AVAILABLE = "AVAILABLE",
@@ -17,7 +17,7 @@ interface IThProps {
     propIsRequired: boolean;
     propName: string;
     schema?: oas31.SchemaObject;
-    setMenuConfig: Dispatch<SetStateAction<ISchemaTableThMenuConfig | undefined>>;
+    setMenuConfig: Dispatch<SetStateAction<IThMenuConfig | undefined>>;
     setSortAsc: Dispatch<SetStateAction<boolean>>;
     setSortColumn: Dispatch<SetStateAction<string>>;
     sortAsc?: boolean;

package/dist/SchemaTable/{SchemaTableTh → Th}/index.js

@@ -9,14 +9,15 @@ export var EColumnFilterStatus;
     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 Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propIsRequired, propName, schema, setMenuConfig, setSortAsc, setSortColumn, sortAsc, style, }) => {
     const classNames = [
-        `schema-table-th`,
-        `schema-table-th--filter-${columnFilterStatus}`,
+        `schema-table__th`,
+        `schema-table__th--filter-${columnFilterStatus}`,
+        `schema-table__th--prop-${propName}`,
     ];
-    classNames.push(isSortable ? "schema-table-th--sortable" : "schema-table-th--unsortable");
+    classNames.push(isSortable ? "schema-table__th--sortable" : "schema-table__th--unsortable");
     if (sortAsc !== undefined) {
-        classNames.push("schema-table-th--sorted");
+        classNames.push("schema-table__th--sorted");
     }
     const onLabelClick = React.useCallback(() => {
         if (!isSortable) {
@@ -83,6 +84,6 @@ const SchemaTableTh = ({ columnFilterStatus, isAllChecked, isSortable, numberOfS
                 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 ? "↓" : "↑" })))] })), isSortable || columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ className: "schema-table-th__trigger-el", onClick: onTriggerClick }, { children: _jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#404040", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })) }))) : null] })));
+    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 ? "↓" : "↑" })))] })), isSortable || columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ className: "schema-table__th__trigger-el", onClick: onTriggerClick }, { children: _jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#404040", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })) }))) : null] })));
 };
-export default React.memo(SchemaTableTh);
+export default React.memo(Th);

package/dist/SchemaTable/{SchemaTableThMenu → ThMenu}/FilterMenuComponent/index.js

@@ -21,7 +21,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
     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) => {
+            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);
@@ -35,7 +35,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
             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) => {
+            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);
@@ -50,7 +50,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
         // @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) => {
+                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)
@@ -66,7 +66,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
                     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: () => {
+                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;
@@ -97,7 +97,7 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
             }
         // 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) => {
+            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);

package/dist/SchemaTable/{SchemaTableThMenu → ThMenu}/index.d.ts

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

package/dist/SchemaTable/{SchemaTableThMenu → ThMenu}/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from "react";
 import FilterMenuComponent from "./FilterMenuComponent";
 import { usePopper } from "react-popper";
-const SchemaTableThMenu = ({ isSortable, isFilterable, onChange, onClose, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, referenceElement, setSortAsc, setSortColumn, value, }) => {
+const ThMenu = ({ isSortable, isFilterable, 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);
@@ -49,8 +49,8 @@ const SchemaTableThMenu = ({ isSortable, isFilterable, onChange, onClose, onInpu
     if (!isSortable && !isFilterable) {
         return null;
     }
-    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: [isSortable ? (_jsxs("li", Object.assign({ onClick: onSortAscendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "schema-table-th-menu__icon" }, { children: "\u2193" })), " Sort ascending"] }))) : null, isSortable ? (_jsxs("li", Object.assign({ onClick: onSortDescendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "schema-table-th-menu__icon" }, { children: "\u2191" })), " Sort descending"] }))) : null, isFilterable ? (_jsxs("li", Object.assign({ style: { padding: 8 }, onMouseOver: (e) => {
+    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: [isSortable ? (_jsxs("li", Object.assign({ onClick: onSortAscendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "schema-table__th-menu__icon" }, { children: "\u2193" })), " Sort ascending"] }))) : null, isSortable ? (_jsxs("li", Object.assign({ onClick: onSortDescendingClick, style: { padding: 8 } }, { children: [_jsx("span", Object.assign({ className: "schema-table__th-menu__icon" }, { children: "\u2191" })), " Sort descending"] }))) : null, isFilterable ? (_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: ">" }))] }))) : null] })) })), 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] }));
+                            } }, { 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: ">" }))] }))) : null] })) })), 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);
+export default React.memo(ThMenu);

package/dist/SchemaTable/index.js

@@ -18,11 +18,12 @@ 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 { parseLocationHash, serializeLocationHash } from "../inc/data";
-import SchemaTableTh, { EColumnFilterStatus } from "./SchemaTableTh";
-import SchemaTableThMenu from "./SchemaTableThMenu";
+import Th, { EColumnFilterStatus } from "./Th";
+import ThMenu from "./ThMenu";
 import { saveAs } from "file-saver";
 import { unparse } from "papaparse";
 const startOfTheWorldDate = new Date("1000-01-01 00:00:00Z");
+const intFormatter = new Intl.NumberFormat("nl-NL");
 function getSortByValue(propSchema, propConfig) {
     var _a;
     if ((propConfig === null || propConfig === void 0 ? void 0 : propConfig.sortByValue) !== undefined) {
@@ -44,7 +45,7 @@ function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
 function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, customElement, data, defaultColumnFilters = {}, defaultSortAsc = false, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable = true, isExportable = true, isSearchable = true, isSortable = true, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight = 36, schema, searchPlaceholder, style, useFilterStateHash, width, }) {
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
-    const [schemaTableThMenuConfig, setSchemaTableThMenuConfig] = React.useState();
+    const [thMenuConfig, setThMenuConfig] = React.useState();
     const isDataFunction = data instanceof Function;
     const [sourceData, setSourceData] = React.useState(isDataFunction ? undefined : data);
     const [locationHash, setLocationHash] = React.useState(parseLocationHash(window.location.hash));
@@ -151,7 +152,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
                 case "integer":
                     prev[propName] = [undefined, null].includes(rawValue)
                         ? ""
-                        : new Intl.NumberFormat("nl-NL").format(rawValue);
+                        : intFormatter.format(rawValue);
                     return prev;
                 // @ts-ignore
                 case "string":
@@ -390,7 +391,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }
         setSortAsc(x);
     }, [isDataFunction]);
-    const ConfiguredSchemaTableTh = React.useCallback(({ style, index }) => {
+    const ConfiguredTh = React.useCallback(({ style, index }) => {
         const propName = columnNames[index];
         const propSchema = (propName === SELECT_ALL_COLUMN_NAME
             ? { type: "boolean" }
@@ -404,9 +405,9 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         if (columnFilterMap[propName] !== undefined) {
             columnFilterStatus = EColumnFilterStatus.ACTIVE;
         }
-        return (_jsx(SchemaTableTh, { columnFilterStatus: columnFilterStatus, 
+        return (_jsx(Th, { columnFilterStatus: columnFilterStatus, 
             // disableColumnFilter={disableColumnFilter}
-            isAllChecked: isAllRowsChecked, isSortable: getIsColumnSortable(!!isSortable, propSchema, propConfig), 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 }));
+            isAllChecked: isAllRowsChecked, isSortable: getIsColumnSortable(!!isSortable, propSchema, propConfig), numberOfSelectedRows: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length, onSelectAllIndexesHandler: onSelectAllIndexesHandler, propConfig: propConfig, propIsRequired: required.includes(propName), propName: propName, schema: propSchema, setMenuConfig: setThMenuConfig, setSortAsc: onSetSortAsc, setSortColumn: onSetSortColumn, sortAsc: sortColumn === propName ? sortAsc : undefined, style: style }));
     }, [
         checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
         columnFilterMap,
@@ -457,7 +458,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
     }, []);
     const onInputKeyDown = React.useCallback((e) => {
         if (e.key === "Enter") {
-            setSchemaTableThMenuConfig(undefined);
+            setThMenuConfig(undefined);
             if (isDirty) {
                 refreshData();
             }
@@ -474,7 +475,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             : rowsHeight;
     }, [maxHeight, isSearchable, rowCount, rowHeight]);
     const onPopoverClose = React.useCallback((e) => {
-        setSchemaTableThMenuConfig(undefined);
+        setThMenuConfig(undefined);
         e.preventDefault();
         e.stopPropagation();
     }, []);
@@ -498,27 +499,27 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         setSearchQuery(locationHash.searchQuery || "");
     }, [locationHash, useFilterStateHash]);
     const onSchemaColumnFilterChange = React.useCallback((newColumnFilterValue, persistState) => {
-        if (!schemaTableThMenuConfig) {
+        if (!thMenuConfig) {
             return;
         }
         if (isDataFunction) {
             setIsDirty(true);
         }
         if (useFilterStateHash && persistState) {
-            window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { columnFilterMap: Object.assign(Object.assign({}, columnFilterMap), { [schemaTableThMenuConfig.propName]: newColumnFilterValue }) }));
+            window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { columnFilterMap: Object.assign(Object.assign({}, columnFilterMap), { [thMenuConfig.propName]: newColumnFilterValue }) }));
             return;
         }
         if (newColumnFilterValue === undefined) {
-            disableColumnFilter(schemaTableThMenuConfig.propName);
+            disableColumnFilter(thMenuConfig.propName);
             return;
         }
-        setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [schemaTableThMenuConfig.propName]: newColumnFilterValue })));
+        setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [thMenuConfig.propName]: newColumnFilterValue })));
     }, [
         columnFilterMap,
         disableColumnFilter,
         isDataFunction,
         locationHash,
-        schemaTableThMenuConfig,
+        thMenuConfig,
         useFilterStateHash,
     ]);
     const searchInputAutoFocus = React.useMemo(() => {
@@ -558,7 +559,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             type: "text/csv;charset=utf-8",
         }), "export.csv");
     }, [sortedRenderData]);
-    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, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: "Export data" }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: "Clear filters" }))) : null] })), _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: {
+    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, isExportable ? (_jsx("button", Object.assign({ onClick: onExportDataClick, style: { marginLeft: 8 }, disabled: !(sortedRenderData === null || sortedRenderData === void 0 ? void 0 : sortedRenderData.length) }, { children: "Export data" }))) : null, isSearchable || isColumnFilterable ? (_jsx("button", Object.assign({ onClick: onClearFiltersButtonClick, style: { marginLeft: 8 }, disabled: Object.keys(columnFilterMap).length + searchQuery.length === 0 }, { children: "Clear filters" }))) : null] })), _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: ConfiguredTh }), `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",
@@ -567,6 +568,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..." })) }))), schemaTableThMenuConfig ? (_jsx(SchemaTableThMenu, { isFilterable: !!isColumnFilterable, isSortable: getIsColumnSortable(!!isSortable, schema.properties[schemaTableThMenuConfig.propName], schemaTableThMenuConfig.propConfig), 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] })));
+                } }, { children: isDirty ? (_jsx("button", Object.assign({ onClick: refreshData, className: "btn border" }, { children: "Refresh data" }))) : (_jsx("div", { children: "\u231B Loading..." })) }))), thMenuConfig ? (_jsx(ThMenu, { isFilterable: !!isColumnFilterable, isSortable: getIsColumnSortable(!!isSortable, schema.properties[thMenuConfig.propName], thMenuConfig.propConfig), onChange: onSchemaColumnFilterChange, onClose: onPopoverClose, onInputKeyDown: onInputKeyDown, propConfig: thMenuConfig.propConfig, propIsRequired: thMenuConfig.propIsRequired, propName: thMenuConfig.propName, propSchema: schema.properties[thMenuConfig.propName], referenceElement: thMenuConfig.referenceElement, setSortAsc: setSortAsc, setSortColumn: setSortColumn, value: columnFilterMap[thMenuConfig.propName] })) : null] })));
 }
 export default React.memo(SchemaTable);

package/dist/index.css

@@ -65,7 +65,7 @@
   padding-bottom: 1rem;
 }
 
-.schema-table-th {
+.schema-table__th {
   background-color: #fcfcfc;
   border-right: 1px solid #ddd;
   border-top: 1px solid #ddd;
@@ -77,28 +77,28 @@
   padding-right: 8px;
   user-select: none;
 }
-.schema-table-th:first-child {
+.schema-table__th:first-child {
   border-left: 1px solid #ddd;
 }
-.schema-table-th div {
+.schema-table__th div {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.schema-table-th--sorted {
+.schema-table__th--sorted {
   background-color: #eff6fb;
 }
-.schema-table-th--filter-ACTIVE .schema-table-th__label-body-text {
+.schema-table__th--filter-ACTIVE .schema-table__th__label-body-text {
   text-decoration: underline;
   font-style: italic;
 }
-.schema-table-th__label-body {
+.schema-table__th__label-body {
   display: flex;
   flex: 1;
   font-size: 14px;
   align-items: center;
 }
-.schema-table-th__trigger-el {
+.schema-table__th__trigger-el {
   display: none;
   position: absolute;
   border: 1px solid #ddd;
@@ -113,37 +113,37 @@
   text-align: center;
   padding: 5px 0 0 !important;
 }
-.schema-table-th__sort-icon {
+.schema-table__th__sort-icon {
   font-size: 24px;
   width: 32px;
   display: block;
   text-align: center;
 }
-.schema-table-th:hover {
+.schema-table__th:hover {
   background-color: #eff6fb;
 }
-.schema-table-th:hover .schema-table-th__trigger-el {
+.schema-table__th:hover .schema-table__th__trigger-el {
   display: block !important;
 }
 
-.schema-table-th-menu {
+.schema-table__th-menu {
   background-color: white;
 }
-.schema-table-th-menu label {
+.schema-table__th-menu label {
   flex: 1;
 }
-.schema-table-th-menu .schema-table-th-menu__sub-menu-indicator {
+.schema-table__th-menu .schema-table__th-menu__sub-menu-indicator {
   padding-left: 8px;
   margin-left: 8px;
 }
-.schema-table-th-menu__icon {
+.schema-table__th-menu__icon {
   display: block;
   width: 24px;
   overflow: hidden;
   text-align: center;
 }
 
-.schema-table-th-menu__sub-menu {
+.schema-table__th-menu__sub-menu {
   background-color: white;
   border: 1px solid #ddd;
 }

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TColumnFilterValue } from "./SchemaTable";
-import { IFilterMenuComponentProps } from "./SchemaTable/SchemaTableThMenu/FilterMenuComponent";
+import { IFilterMenuComponentProps } from "./SchemaTable/ThMenu/FilterMenuComponent";
 export interface IColumnConfig<T> {
     FilterMenu?: (props: IFilterMenuComponentProps) => React.ReactElement | null;
     align?: "start" | "center" | "end";

package/package.json

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