mig-schema-table 3.0.80 → 3.0.82

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

@@ -18,7 +18,8 @@ interface ITdProps<T> {
     propSchema?: oas31.SchemaObject;
     sortedRenderData?: IRenderData[];
     style: React.CSSProperties;
+    translate: (key: string, ...args: Array<string | number>) => string;
 }
-declare function Td<T>({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
+declare function Td<T>({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, translate, }: ITdProps<T>): import("react/jsx-runtime").JSX.Element | null;
 declare const _default: typeof Td;
 export default _default;

package/dist/SchemaTable/Td/index.js

@@ -3,8 +3,7 @@ import React from "react";
 import { SELECT_ALL_COLUMN_NAME } from "../constants";
 import { localeFormatInTimeZone, timeZone } from "../../inc/date";
 import { DEFAULT_DATE_TIME_FORMAT } from "../../inc/constant";
-import { t } from "../../inc/string";
-function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, }) {
+function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowHeight, rowIndex, sortedRenderData, style, translate, }) {
     const onTdClick = React.useCallback((e) => {
         if (!sortedRenderData || !onRowClick) {
             return;
@@ -43,7 +42,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
                 ? "Asia/Jakarta"
                 : "Europe/Amsterdam";
             if (date) {
-                title = `${localeFormatInTimeZone(date, alternativeTimeZone, DEFAULT_DATE_TIME_FORMAT)} (${t(alternativeTimeZone)})`;
+                title = `${localeFormatInTimeZone(date, alternativeTimeZone, DEFAULT_DATE_TIME_FORMAT)} (${translate(alternativeTimeZone)})`;
             }
         }
         const classNames = [
@@ -82,6 +81,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
         rowIndex,
         sortedRenderData,
         style,
+        translate,
     ]);
     if (!row || !tdDivProps) {
         return null;

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

@@ -22,6 +22,7 @@ interface IThProps {
     setSortColumn: Dispatch<SetStateAction<string>>;
     sortAsc?: boolean;
     style: CSSProperties;
+    translate: (key: string, ...args: Array<string | number>) => string;
 }
-declare const _default: ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows, onSelectAllIndexesHandler, propConfig, propIsRequired, propName, schema, setMenuConfig, 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, translate, }: IThProps) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/SchemaTable/Th/index.js

@@ -1,6 +1,5 @@
 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;
@@ -9,7 +8,7 @@ export var EColumnFilterStatus;
     EColumnFilterStatus["AVAILABLE"] = "AVAILABLE";
     EColumnFilterStatus["ACTIVE"] = "ACTIVE";
 })(EColumnFilterStatus || (EColumnFilterStatus = {}));
-const Th = ({ 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, translate, }) => {
     const classNames = [
         `schema-table__th`,
         `schema-table__th--filter-${columnFilterStatus}`,
@@ -58,10 +57,16 @@ const Th = ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows
         if ((schema === null || schema === void 0 ? void 0 : schema.format) &&
             schema.format === "date-time" &&
             (propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones) !== false) {
-            return `${uncamel(propName)} (${t(timeZone)})`;
+            return `${translate(propName)} (${translate(timeZone)})`;
         }
-        return uncamel(propName);
-    }, [propConfig, propName, schema === null || schema === void 0 ? void 0 : schema.format]);
+        return translate(propName);
+    }, [
+        propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones,
+        propConfig === null || propConfig === void 0 ? void 0 : propConfig.title,
+        propName,
+        schema === null || schema === void 0 ? void 0 : schema.format,
+        translate,
+    ]);
     if (propName === SELECT_ALL_COLUMN_NAME) {
         return (_jsx("div", Object.assign({ style: style, className: classNames.join(" ") }, { children: _jsx("div", Object.assign({ style: {
                     width: "100%",

package/dist/SchemaTable/ThMenu/FilterMenuComponent/index.d.ts

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

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

@@ -11,12 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 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 FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, propIsRequired, propName, propSchema, translate, }) => {
     const { type, format, minimum, maximum } = propSchema || {};
     const value = columnFilterValue;
     const isDateTime = format === "date-time";
@@ -53,11 +52,8 @@ const FilterMenuComponent = ({ columnFilterValue, onChange, onInputKeyDown, prop
             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}`));
+                            } }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), propSchema.enum.map((value) => {
+                                    return (_jsx("option", Object.assign({ value: value }, { children: translate(value) }), `column-filter-select-${value}`));
                                 })] })) }) })));
             }
             if (isDateTime || format === "date") {

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

@@ -13,12 +13,13 @@ type TThMenuProps = IThMenuConfig & {
     isFilterable: boolean;
     onChange: (newValue: TColumnFilterValue | undefined, persistState: boolean) => void;
     onClose: (e: MouseEvent | React.MouseEvent) => void;
-    onInputKeyDown: (e: React.KeyboardEvent) => void;
+    onInputKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
     propIsRequired: boolean;
     propSchema: oas31.SchemaObject;
     setSortAsc: Dispatch<SetStateAction<boolean>>;
     setSortColumn: Dispatch<SetStateAction<string>>;
+    translate: (key: string, ...args: Array<string | number>) => string;
     value: TColumnFilterValue;
 };
-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>;
+declare const _default: React.MemoExoticComponent<({ isSortable, isFilterable, onChange, onClose, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, referenceElement, setSortAsc, setSortColumn, translate, value, }: TThMenuProps) => import("react/jsx-runtime").JSX.Element | null>;
 export default _default;

package/dist/SchemaTable/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 ThMenu = ({ 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, translate, value, }) => {
     const [menu, setMenu] = React.useState(null);
     const [subMenu, setSubMenu] = React.useState(null);
     const [subMenuReferenceElement, setSubMenuReferenceElement] = React.useState(null);
@@ -51,6 +51,6 @@ const ThMenu = ({ isSortable, isFilterable, onChange, onClose, onInputKeyDown, p
     }
     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, propIsRequired: propIsRequired, propName: propName, propSchema: propSchema, translate: translate }) }))) : null] }));
 };
 export default React.memo(ThMenu);

package/dist/SchemaTable/index.d.ts

@@ -35,10 +35,12 @@ export interface ISchemaTableProps<T> {
     onCheckedIndexesChange?: (dataIndex: number[]) => void;
     onRowClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
     onRowDoubleClick?: (rowData: T, dataIndex: number, event: React.MouseEvent) => void;
+    onSearchEnter?: () => void;
     rowHeight?: number;
     schema: oas31.SchemaObject;
     searchPlaceholder?: string;
     style?: React.CSSProperties;
+    translate?: (key: string, ...args: Array<string | number>) => string;
     useFilterStateHash?: boolean;
     width: number;
 }
@@ -48,6 +50,6 @@ export interface IDateColumnFilterValue {
     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, isExportable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, rowHeight, schema, searchPlaceholder, style, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SchemaTable<T>({ Heading, checkedIndexes, config, customElement, data, defaultColumnFilters, defaultSortAsc, defaultSortColumn, disabledCheckedIndexes, enableAutoFocus, getRowClassName, getRowSelected, isColumnFilterable, isExportable, isSearchable, isSortable, maxHeight, onCheckedIndexesChange, onRowClick, onRowDoubleClick, onSearchEnter, rowHeight, schema, searchPlaceholder, style, translate, useFilterStateHash, width, }: ISchemaTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof SchemaTable;
 export default _default;

package/dist/SchemaTable/index.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { VariableSizeGrid, VariableSizeList } from "react-window";
 import { localeFormat } from "../inc/date";
-import { t, uncamel } from "../inc/string";
+import { defaultTranslate } from "../inc/string";
 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";
@@ -46,7 +46,7 @@ function getIsColumnSortable(isTableSortable, propSchema, propConfig) {
     return !!(isTableSortable &&
         (propSchema || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderData) || (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort)));
 }
-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, }) {
+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, onSearchEnter, rowHeight = 36, schema, searchPlaceholder, style, translate = defaultTranslate, useFilterStateHash, width, }) {
     const [sortColumn, setSortColumn] = React.useState(defaultSortColumn);
     const [sortAsc, setSortAsc] = React.useState(defaultSortAsc);
     const [thMenuConfig, setThMenuConfig] = React.useState();
@@ -138,16 +138,13 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
                 prev[propName] = "";
                 return prev;
             }
-            const val = object[propName];
-            const rawValue = !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.translation)
-                ? val
-                : t(val, propConfig.translation);
+            const rawValue = object[propName];
             switch (schema.type) {
                 case "array":
                     prev[propName] =
                         ((_a = schema.items) === null || _a === void 0 ? void 0 : _a.type) === "string" &&
                             rawValue
-                            ? rawValue.map(uncamel).join(", ")
+                            ? rawValue.map(translate).join(", ")
                             : JSON.stringify(rawValue);
                     return prev;
                 case "boolean":
@@ -167,10 +164,9 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
                 // @ts-ignore
                 case "string":
                     if (schema.format === "date" && rawValue) {
-                        prev[propName] =
-                            rawValue === "2999-12-31"
-                                ? "-"
-                                : localeFormat(new Date(rawValue), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) || DEFAULT_DATE_FORMAT);
+                        prev[propName] = ["2999-12-31", "1970-01-01"].includes(rawValue)
+                            ? "-"
+                            : localeFormat(new Date(rawValue), (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) || DEFAULT_DATE_FORMAT);
                         return prev;
                     }
                     if (schema.format === "date-time" && rawValue) {
@@ -178,7 +174,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
                         return prev;
                     }
                     if (schema.enum) {
-                        prev[propName] = rawValue ? uncamel(rawValue) : "";
+                        prev[propName] = rawValue ? translate(rawValue) : "";
                         return prev;
                     }
                 // fallthrough
@@ -187,7 +183,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
                     return prev;
             }
         }, { _index: rowIndex }))
-        : undefined, [columnNames, config, sourceData, properties]);
+        : undefined, [sourceData, columnNames, properties, config, translate]);
     const columnCount = columnNames.length;
     const { dynamicWidthColumnCount, fixedWidthColumnsWidth } = React.useMemo(() => {
         let fixedWidthColumnsWidth = 0;
@@ -417,13 +413,12 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }
         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: setThMenuConfig, 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, translate: translate }));
     }, [
         checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.length,
         columnFilterMap,
         columnNames,
         config,
-        // disableColumnFilter,
         isAllRowsChecked,
         isColumnFilterable,
         isSortable,
@@ -434,13 +429,14 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         required,
         sortAsc,
         sortColumn,
+        translate,
     ]);
     const SchemaTableTd = React.useCallback(({ columnIndex, rowIndex, style }) => {
         const propName = columnNames[columnIndex];
         const propSchema = (propName === SELECT_ALL_COLUMN_NAME
             ? { type: "boolean" }
             : properties[propName]);
-        return sourceData ? (_jsx(Td, { checkedIndexes: checkedIndexes, disabledCheckedIndexes: disabledCheckedIndexes, columnIndex: columnIndex, data: sourceData, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: propSchema, rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style })) : null;
+        return sourceData ? (_jsx(Td, { checkedIndexes: checkedIndexes, disabledCheckedIndexes: disabledCheckedIndexes, columnIndex: columnIndex, data: sourceData, getRowClassName: getRowClassName, getRowSelected: getRowSelected, onCheckedIndexesChange: onCheckedIndexesChange, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, propConfig: config ? config[propName] : undefined, propName: propName, propSchema: propSchema, rowHeight: rowHeight, rowIndex: rowIndex, sortedRenderData: sortedRenderData, style: style, translate: translate })) : null;
     }, [
         columnNames,
         properties,
@@ -455,6 +451,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         config,
         rowHeight,
         sortedRenderData,
+        translate,
     ]);
     const onSearchChange = React.useCallback((e) => {
         if (isDataFunction) {
@@ -472,8 +469,12 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
             if (isDirty) {
                 refreshData();
             }
+            if (onSearchEnter &&
+                e.currentTarget.className === "schema-table__search") {
+                onSearchEnter();
+            }
         }
-    }, [isDirty, refreshData]);
+    }, [isDirty, onSearchEnter, refreshData]);
     const getRowHeight = React.useCallback(() => rowHeight, [rowHeight]);
     const rowWidth = dynamicWidthColumnCount ? width : fixedWidthColumnsWidth;
     const rowCount = React.useMemo(() => (sortedRenderData ? sortedRenderData.length : 0), [sortedRenderData]);
@@ -569,7 +570,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: 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: {
+    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", { className: "schema-table__search", 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",
@@ -578,6 +579,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..." })) }))), 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] })));
+                } }, { 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, translate: translate, value: columnFilterMap[thMenuConfig.propName] })) : null] })));
 }
 export default React.memo(SchemaTable);

package/dist/inc/string.d.ts

@@ -1,2 +1,2 @@
 export declare function uncamel(camel: string): string;
-export declare function t(key: string, ...args: any[]): string;
+export declare function defaultTranslate(key: string, ...args: any[]): string;

package/dist/inc/string.js

@@ -21,7 +21,7 @@ const db = {
     "Asia/Jakarta": "JKT",
     "Asia/Bangkok": "JKT",
 };
-export function t(key, ...args) {
+export function defaultTranslate(key, ...args) {
     let string = db[key] || uncamel(key);
     args.forEach((arg, index) => {
         string = string.replace(`{${index}}`, arg);

package/dist/index.css

@@ -49,13 +49,6 @@
 .schema-table__td--selected {
   background-color: var(--bs-gray-300, #dee2e6);
 }
-.schema-table__search {
-  margin: 1rem;
-  padding-right: 1rem;
-}
-.schema-table__search input {
-  width: 100%;
-}
 .schema-table--clickable-rows .schema-table__td {
   cursor: pointer;
 }
@@ -130,6 +123,9 @@
 .schema-table__th:hover .schema-table__th__trigger-el {
   display: block !important;
 }
+.schema-table__th svg {
+  vertical-align: baseline;
+}
 
 .schema-table__th-menu {
   background-color: white;

package/package.json

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