mig-schema-table 3.0.66 → 3.0.68

package/dist/SchemaTable/SchemaTableTh/index.js

@@ -19,6 +19,9 @@ const SchemaTableTh = ({ columnFilterStatus, isAllChecked, isSortable, numberOfS
         classNames.push("schema-table-th--sorted");
     }
     const onLabelClick = React.useCallback(() => {
+        if (!isSortable) {
+            return;
+        }
         if (sortAsc === undefined) {
             setSortColumn(propName);
             setSortAsc(!(propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc));
@@ -26,6 +29,7 @@ const SchemaTableTh = ({ columnFilterStatus, isAllChecked, isSortable, numberOfS
         }
         setSortAsc((sortAsc) => !sortAsc);
     }, [
+        isSortable,
         propConfig === null || propConfig === void 0 ? void 0 : propConfig.defaultSortDesc,
         propName,
         setSortAsc,
@@ -79,6 +83,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 ? "↓" : "↑" })))] })), _jsx("button", Object.assign({ className: "schema-table-th__trigger-el", onClick: onTriggerClick }, { children: "\u2304" }))] })));
+    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);

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

@@ -9,14 +9,16 @@ export interface ISchemaTableThMenuConfig {
     propIsRequired: boolean;
 }
 type TSchemaTableThMenuProps = ISchemaTableThMenuConfig & {
+    isSortable: boolean;
+    isFilterable: boolean;
     onChange: (newValue: TColumnFilterValue | undefined, persistState: boolean) => void;
+    onClose: (e: MouseEvent | React.MouseEvent) => void;
     onInputKeyDown: (e: React.KeyboardEvent) => void;
     propIsRequired: boolean;
     propSchema: oas31.SchemaObject;
-    setSortColumn: Dispatch<SetStateAction<string>>;
     setSortAsc: Dispatch<SetStateAction<boolean>>;
+    setSortColumn: Dispatch<SetStateAction<string>>;
     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>;
+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>;
 export default _default;

package/dist/SchemaTable/SchemaTableThMenu/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 = ({ onChange, onClose, onInputKeyDown, propConfig, propIsRequired, propName, propSchema, referenceElement, setSortAsc, setSortColumn, value, }) => {
+const SchemaTableThMenu = ({ 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);
@@ -46,8 +46,11 @@ const SchemaTableThMenu = ({ onChange, onClose, onInputKeyDown, propConfig, prop
     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) => {
+    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) => {
                                 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] }));
+                            } }, { 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);

package/dist/SchemaTable/Td/index.js

@@ -53,7 +53,7 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
             "data-column-index": columnIndex,
             key: propName,
             style: Object.assign(Object.assign({}, style), { lineHeight: `${rowHeight}px` }),
-            onClick: !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell) ? onTdClick : undefined,
+            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"
@@ -69,7 +69,6 @@ function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowC
         getRowSelected,
         onTdClick,
         onTdDoubleClick,
-        propConfig === null || propConfig === void 0 ? void 0 : propConfig.renderCell,
         propConfig === null || propConfig === void 0 ? void 0 : propConfig.showTimezones,
         propName,
         propSchema === null || propSchema === void 0 ? void 0 : propSchema.format,

package/dist/SchemaTable/index.js

@@ -113,7 +113,7 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
                 return prev;
             }
             if (!schema || propName === SELECT_ALL_COLUMN_NAME) {
-                prev[propName] = "?";
+                prev[propName] = "";
                 return prev;
             }
             const val = object[propName];
@@ -381,9 +381,13 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         if (columnFilterMap[propName] !== undefined) {
             columnFilterStatus = EColumnFilterStatus.ACTIVE;
         }
+        const isColumnSortable = !!(isSortable &&
+            (propSchema ||
+                ((propConfig === null || propConfig === void 0 ? void 0 : propConfig.sortByValue) && propConfig.renderData) ||
+                (propConfig === null || propConfig === void 0 ? void 0 : propConfig.sort)));
         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 }));
+            isAllChecked: isAllRowsChecked, isSortable: isColumnSortable, 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,
@@ -513,7 +517,10 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         setSearchQuery("");
     }, [useFilterStateHash]);
     const onSearchBlur = React.useCallback(() => {
-        if (useFilterStateHash && searchQuery !== locationHash.searchQuery) {
+        if (useFilterStateHash &&
+            // prevent hash change for undefined vs empty string compare
+            (searchQuery || locationHash.searchQuery) &&
+            searchQuery !== locationHash.searchQuery) {
             window.location.hash = serializeLocationHash(Object.assign(Object.assign({}, locationHash), { searchQuery }));
         }
     }, [locationHash, searchQuery, useFilterStateHash]);
@@ -526,6 +533,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, { 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..." })) }))), schemaTableThMenuConfig ? (_jsx(SchemaTableThMenu, { isFilterable: !!isColumnFilterable, isSortable: !!isSortable, 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/index.css

@@ -66,6 +66,7 @@
 }
 
 .schema-table-th {
+  background-color: #fcfcfc;
   border-right: 1px solid #ddd;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
@@ -76,6 +77,9 @@
   padding-right: 8px;
   user-select: none;
 }
+.schema-table-th:first-child {
+  border-left: 1px solid #ddd;
+}
 .schema-table-th div {
   overflow: hidden;
   white-space: nowrap;
@@ -107,7 +111,7 @@
   color: #666;
   font-size: 28px;
   text-align: center;
-  padding: 0 0 5px !important;
+  padding: 5px 0 0 !important;
 }
 .schema-table-th__sort-icon {
   font-size: 24px;

package/package.json

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