mig-schema-table 4.0.4 → 4.0.6

package/dist/style.css

@@ -0,0 +1 @@
+.mig-schema-table,.mig-schema-table *{box-sizing:border-box}.mig-schema-table button{border:1px solid #e4e4e4;padding:8px}.mig-schema-table button:enabled{background-color:#f6f6f6;color:#404040}.mig-schema-table button:enabled:hover{border-color:#dbdbdb;background-color:#ececec}.mig-schema-table input{padding:8px;border:1px solid #888}.mig-schema-table input:hover{border-color:#add8e6}.mig-schema-table select{height:33px}.mig-schema-table__custom_element_placeholder{flex:1}.mig-schema-table__tbody{overflow-x:hidden!important;border-collapse:collapse;width:100%}.mig-schema-table__th-row{overflow:hidden!important}.mig-schema-table--clickable-rows .mig-schema-table__td{cursor:pointer}.mig-schema-table__action-container{display:flex;flex-direction:row;padding:.5rem;align-items:center}.mig-schema-table__row_counter{margin-left:8px;font-size:.835rem}.mig-schema-table__column_resize_container{position:relative}.mig-schema-table__th{background-color:#fcfcfc;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;-webkit-user-select:none;user-select:none}.mig-schema-table__th:first-child{border-left:1px solid #ddd}.mig-schema-table__th div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mig-schema-table__th--sorted{background-color:#eff6fb}.mig-schema-table__th--dragging{opacity:.5}.mig-schema-table__th--dragging .mig-schema-table__th__trigger-el{display:none!important}.mig-schema-table__th--drop-target{border-right:3px dashed green}.mig-schema-table__th--drop-target .mig-schema-table__th__trigger-el{display:none!important}.mig-schema-table__th--filter-ACTIVE .mig-schema-table__th__label-body-text{text-decoration:underline;font-style:italic}.mig-schema-table__th__label-body{display:flex;flex:1;font-size:14px;align-items:center}.mig-schema-table__th__label-body-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mig-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:5px 0 0!important}.mig-schema-table__th__sort-icon{font-size:24px;width:32px;display:block;text-align:center}.mig-schema-table__th:hover{background-color:#eff6fb}.mig-schema-table__th:hover .mig-schema-table__th__trigger-el{display:block!important}.mig-schema-table__th svg{vertical-align:baseline}.mig-schema-table__th-menu{background-color:#fff;z-index:99999}.mig-schema-table__th-menu label{flex:1}.mig-schema-table__th-menu .mig-schema-table__th-menu__sub-menu-indicator{padding-left:8px;margin-left:8px}.mig-schema-table__th-menu__icon{display:block;width:24px;overflow:hidden;text-align:center}.mig-schema-table__th-menu__sub-menu{background-color:#fff;border:1px solid #ddd;z-index:99999}.mig-schema-table-menu{font-size:14px;list-style:none outside;padding:0;margin:0}.mig-schema-table-menu li{display:flex;border:1px solid #ddd;align-items:center;cursor:pointer}.mig-schema-table-menu li .react-datepicker{width:20.5rem}.mig-schema-table-menu li:hover{background-color:#eff6fb}.mig-schema-table__td{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;padding-right:8px;align-content:center}.mig-schema-table__td--odd{background-color:var(--bs-gray-100, #f8f9fa)}.mig-schema-table__td--even{background-color:var(--bs-white, #fff)}.mig-schema-table__td--selected{background-color:var(--bs-gray-300, #dee2e6)}.mig-schema-table__column_resizer{position:absolute;top:0;-webkit-user-select:none;user-select:none;background-color:transparent;cursor:e-resize;width:3px}.mig-schema-table__column_resizer--dragged,.mig-schema-table__column_resizer:hover{background-color:#bbb;bottom:0!important}

package/package.json

@@ -1,83 +1,70 @@
 {
   "name": "mig-schema-table",
-  "version": "4.0.4",
-  "main": "dist/index.js",
+  "version": "4.0.6",
   "files": [
-    "dist/"
+    "dist"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/mig-schema-table.es.js",
+      "require": "./dist/mig-schema-table.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "main": "./dist/mig-schema-table.umd.js",
+  "module": "./dist/mig-schema-table.es.js",
   "types": "./dist/index.d.ts",
   "private": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
   "dependencies": {
-    "@types/file-saver": "^2.0.7",
-    "@types/jest": "^27.5.2",
-    "@types/react": "^18.2.6",
-    "@types/react-datepicker": "^4.11.2",
-    "@types/react-dom": "^18.2.4",
-    "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.0",
+    "date-fns": "^3.6.0",
+    "date-fns-tz": "^3.1.3",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
-    "openapi3-ts": "^4.1.2",
-    "react": "^18.2.0",
-    "react-datepicker": "^6.2.0",
-    "react-dom": "^18.2.0",
+    "react-datepicker": "^6.9.0",
     "react-popper": "^2.3.0",
-    "react-scripts": "5.0.1",
-    "react-window": "^1.8.9"
-  },
-  "scripts": {
-    "build": "rm -rf dist; tsc -p tsconfig.json; sass --no-source-map src/component/index.scss dist/index.css",
-    "prepublishOnly": "npm run build",
-    "start": "react-scripts start",
-    "test": "react-scripts test",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "react-window": "^1.8.10"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.3",
-    "@storybook/addon-essentials": "^8.0.8",
-    "@storybook/addon-interactions": "^8.0.8",
-    "@storybook/addon-links": "^8.0.8",
-    "@storybook/addon-onboarding": "^8.0.8",
-    "@storybook/blocks": "^8.0.8",
-    "@storybook/preset-create-react-app": "^8.0.8",
-    "@storybook/react": "^8.0.8",
-    "@storybook/react-webpack5": "^8.0.8",
-    "@storybook/test": "^8.0.8",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@chromatic-com/storybook": "^1.4.0",
+    "@storybook/addon-essentials": "^8.1.2",
+    "@storybook/addon-interactions": "^8.1.2",
+    "@storybook/addon-links": "^8.1.2",
+    "@storybook/addon-onboarding": "^8.1.2",
+    "@storybook/blocks": "^8.1.2",
+    "@storybook/react": "^8.1.2",
+    "@storybook/test": "^8.1.2",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
     "@types/date-fns": "^2.6.0",
-    "@types/lodash": "^4.14.194",
-    "@types/node": "^20.12.5",
-    "@types/react-window": "^1.8.5",
-    "axios": "^1.4.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "prettier": "^2.8.8",
-    "prop-types": "^15.8.1",
-    "react-router-dom": "^6.11.2",
-    "sass": "^1.62.1",
-    "storybook": "^8.0.8",
-    "typescript": "^4.9.5",
-    "webpack": "^5.91.0"
+    "@types/file-saver": "^2.0.7",
+    "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.4",
+    "@types/react": "^18.2.66",
+    "@types/react-datepicker": "^6.2.0",
+    "@types/react-dom": "^18.2.22",
+    "@types/react-window": "^1.8.8",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "openapi3-ts": "^4.3.1",
+    "prettier": "^3.2.5",
+    "sass": "^1.77.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

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

@@ -1,9 +0,0 @@
-interface IColumnResizersProps {
-    columnWidths: number[];
-    onColumnWidthsChange: (newColumnWidths: number[]) => void;
-    resizeColumnIndex: number;
-    setResizeColumnIndex: (newResizeColumnIndex: number) => void;
-    tableBodyHeight: number;
-}
-declare const ColumnResizers: ({ columnWidths, onColumnWidthsChange, resizeColumnIndex, setResizeColumnIndex, tableBodyHeight, }: IColumnResizersProps) => import("react/jsx-runtime").JSX.Element;
-export default ColumnResizers;

package/dist/SchemaTable/ColumnResizers/index.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { COLUMN_WIDTH, MINIMUM_COLUMN_WIDTH } from "../../inc/constant";
-const ColumnResizers = ({ columnWidths, onColumnWidthsChange, resizeColumnIndex, setResizeColumnIndex, tableBodyHeight, }) => {
-    const [dragStartX, setDragStartX] = React.useState(0);
-    const setColumnDelta = React.useCallback((columnDelta) => {
-        const newColumnWidths = columnWidths.map((columnWidth, columnWidthIndex) => {
-            if (columnWidthIndex === resizeColumnIndex) {
-                return Math.max(columnWidth + columnDelta, MINIMUM_COLUMN_WIDTH);
-            }
-            return columnWidth;
-        });
-        onColumnWidthsChange(newColumnWidths);
-    }, [columnWidths, resizeColumnIndex, onColumnWidthsChange]);
-    let pointer = 0;
-    const onDragStart = React.useCallback((e) => {
-        setResizeColumnIndex(parseInt(e.currentTarget.dataset.columnIndex));
-        setDragStartX(e.clientX);
-    }, [setResizeColumnIndex]);
-    const onDragEnd = React.useCallback((e) => {
-        setColumnDelta(e.clientX - dragStartX);
-        setDragStartX(0);
-        setResizeColumnIndex(-1);
-    }, [dragStartX, setColumnDelta, setResizeColumnIndex]);
-    return (_jsx("div", { children: columnWidths.map((columnWidth, columnIndex) => {
-            pointer += columnWidth;
-            const classNames = ["mig-schema-table__column_resizer"];
-            if (columnIndex === resizeColumnIndex) {
-                classNames.push("mig-schema-table__column_resizer--dragged");
-            }
-            return (_jsx("div", { style: { left: pointer - COLUMN_WIDTH, bottom: tableBodyHeight }, className: classNames.join(" "), draggable: "true", "data-column-index": columnIndex, onDragStart: onDragStart, onDragEnd: onDragEnd }, columnIndex));
-        }) }));
-};
-export default ColumnResizers;

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

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

@@ -1,121 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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";
-function Td({ checkedIndexes, disabledCheckedIndexes, columnIndex, data, getRowClassName, getRowSelected, onCheckedIndexesChange, onRowClick, onRowDoubleClick, propConfig, propName, propSchema, rowIndex, sortedRenderData, style, translate, }) {
-    const onTdClick = React.useCallback((e) => {
-        if (!sortedRenderData || !onRowClick) {
-            return;
-        }
-        const { rowIndex } = e.currentTarget.dataset;
-        if (!rowIndex) {
-            return;
-        }
-        const row = sortedRenderData[parseInt(rowIndex, 10)];
-        onRowClick(data[row._index], row._index, e);
-    }, [data, onRowClick, sortedRenderData]);
-    const onTdDoubleClick = React.useCallback((e) => {
-        if (!sortedRenderData || !onRowDoubleClick) {
-            return;
-        }
-        const { rowIndex } = e.currentTarget.dataset;
-        if (!rowIndex) {
-            return;
-        }
-        const row = sortedRenderData[parseInt(rowIndex, 10)];
-        onRowDoubleClick(data[row._index], row._index, e);
-    }, [data, onRowDoubleClick, sortedRenderData]);
-    const row = sortedRenderData ? sortedRenderData[rowIndex] : undefined;
-    const { showTimezones, TdBody } = propConfig || {};
-    const tdDivProps = React.useMemo(() => {
-        if (!row || !sortedRenderData) {
-            return undefined;
-        }
-        let title = propName === SELECT_ALL_COLUMN_NAME ? null : row[propName];
-        if ((propSchema === null || propSchema === void 0 ? void 0 : propSchema.format) &&
-            propSchema.format === "date-time" &&
-            showTimezones !== false) {
-            // @ts-ignore
-            const dateString = data[row._index][propName];
-            const date = dateString ? new Date(dateString) : undefined;
-            const alternativeTimeZone = timeZone.startsWith("Europe/")
-                ? "Asia/Jakarta"
-                : "Europe/Amsterdam";
-            if (date) {
-                title = `${localeFormatInTimeZone(date, alternativeTimeZone, DEFAULT_DATE_TIME_FORMAT)} (${translate(alternativeTimeZone)})`;
-            }
-        }
-        const classNames = [
-            "mig-schema-table__td",
-            `mig-schema-table__td--${rowIndex % 2 ? "odd" : "even"}`,
-            `mig-schema-table__td--prop-${propName}`,
-        ];
-        if (getRowSelected && getRowSelected(data[row._index], row._index)) {
-            classNames.push("mig-schema-table__td--selected");
-        }
-        if (getRowClassName) {
-            classNames.push(getRowClassName(data[row._index], row._index, sortedRenderData));
-        }
-        return {
-            "data-row-index": rowIndex,
-            "data-column-index": columnIndex,
-            style,
-            onClick: onTdClick,
-            onDoubleClick: onTdDoubleClick,
-            className: classNames.join(" "),
-            title,
-        };
-    }, [
-        columnIndex,
-        data,
-        getRowClassName,
-        getRowSelected,
-        onTdClick,
-        onTdDoubleClick,
-        showTimezones,
-        propName,
-        propSchema === null || propSchema === void 0 ? void 0 : propSchema.format,
-        row,
-        rowIndex,
-        sortedRenderData,
-        style,
-        translate,
-    ]);
-    if (!row || !tdDivProps) {
-        return null;
-    }
-    if (TdBody) {
-        return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx(TdBody, { dataIndex: row._index, rowData: data[row._index], rowIndex: rowIndex }) })));
-    }
-    if (propName === SELECT_ALL_COLUMN_NAME) {
-        const onChecked = () => {
-            if (!onCheckedIndexesChange) {
-                return;
-            }
-            onCheckedIndexesChange([row._index]);
-        };
-        return (_jsx("div", Object.assign({}, tdDivProps, { children: _jsx("div", Object.assign({ style: { textAlign: "center" } }, { children: _jsx("input", { "data-key": "row-checkbox", type: "checkbox", onChange: onChecked, checked: checkedIndexes === null || checkedIndexes === void 0 ? void 0 : checkedIndexes.includes(row._index), disabled: disabledCheckedIndexes === null || disabledCheckedIndexes === void 0 ? void 0 : disabledCheckedIndexes.includes(row._index) }) })) })));
-    }
-    const propValue = row[propName];
-    switch (propSchema === null || propSchema === void 0 ? void 0 : propSchema.type) {
-        case "boolean":
-            tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "center"}`;
-            break;
-        case "number":
-        case "integer":
-            tdDivProps.className += ` text-${(propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) || "end"}`;
-            break;
-        default:
-            if (propConfig === null || propConfig === void 0 ? void 0 : propConfig.align) {
-                tdDivProps.className += ` text-${propConfig.align}`;
-            }
-            if ((propSchema === null || propSchema === void 0 ? void 0 : propSchema.format) === "url" && propValue) {
-                return (
-                // @ts-ignore
-                _jsx("a", Object.assign({ href: propValue, target: "_blank", rel: "noopener noreferrer" }, tdDivProps, { children: propValue })));
-            }
-    }
-    return _jsx("div", Object.assign({}, tdDivProps, { children: propValue }));
-}
-export default React.memo(Td);

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

@@ -1,29 +0,0 @@
-import { oas31 } from "openapi3-ts";
-import React, { CSSProperties, Dispatch, SetStateAction } from "react";
-import { IColumnConfig } from "../../types";
-import { IThMenuConfig } from "../ThMenu";
-export declare enum EColumnFilterStatus {
-    UNAVAILABLE = "UNAVAILABLE",
-    AVAILABLE = "AVAILABLE",
-    ACTIVE = "ACTIVE"
-}
-interface IThProps {
-    columnFilterStatus: EColumnFilterStatus;
-    isAllChecked?: boolean;
-    isSortable: boolean;
-    numberOfSelectedRows?: number;
-    onColumnPositionChange?: (sourceColumnName: string, destinationColumnName: string) => void;
-    onSelectAllIndexesHandler?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    propConfig?: IColumnConfig<any>;
-    propIsRequired: boolean;
-    propName: string;
-    schema?: oas31.SchemaObject;
-    setMenuConfig: Dispatch<SetStateAction<IThMenuConfig | undefined>>;
-    setSortAsc: Dispatch<SetStateAction<boolean>>;
-    setSortColumn: Dispatch<SetStateAction<string>>;
-    sortAsc?: boolean;
-    style: CSSProperties;
-    translate: (key: string, ...args: Array<string | number>) => string;
-}
-declare const _default: ({ columnFilterStatus, isAllChecked, isSortable, numberOfSelectedRows, onColumnPositionChange, 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,133 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-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, isAllChecked, isSortable, numberOfSelectedRows, onColumnPositionChange, onSelectAllIndexesHandler, propConfig, propIsRequired, propName, schema, setMenuConfig, setSortAsc, setSortColumn, sortAsc, style, translate, }) => {
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [isDropTarget, setIsDropTarget] = React.useState(false);
-    const classNames = [
-        `mig-schema-table__th`,
-        `mig-schema-table__th--filter-${columnFilterStatus}`,
-        `mig-schema-table__th--prop-${propName}`,
-    ];
-    classNames.push(isSortable
-        ? "mig-schema-table__th--sortable"
-        : "mig-schema-table__th--unsortable");
-    if (sortAsc !== undefined) {
-        classNames.push("mig-schema-table__th--sorted");
-    }
-    if (isDragging) {
-        classNames.push(`mig-schema-table__th--dragging`);
-    }
-    if (isDropTarget) {
-        classNames.push(`mig-schema-table__th--drop-target`);
-    }
-    const { format } = schema || {};
-    const { align, defaultSortDesc, renderData, showTimezones, TdBody, title } = propConfig || {};
-    const onLabelClick = React.useCallback(() => {
-        if (!isSortable) {
-            return;
-        }
-        if (sortAsc === undefined) {
-            setSortColumn(propName);
-            setSortAsc(!defaultSortDesc);
-            return;
-        }
-        setSortAsc((sortAsc) => !sortAsc);
-    }, [
-        isSortable,
-        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 (title !== undefined) {
-            return title;
-        }
-        if (format === "date-time" && showTimezones !== false) {
-            return `${translate(propName)} (${translate(timeZone)})`;
-        }
-        return translate(propName);
-    }, [title, format, showTimezones, translate, propName]);
-    const onDragStart = React.useCallback((e) => {
-        if (!onColumnPositionChange) {
-            return;
-        }
-        setIsDragging(true);
-        e.dataTransfer.effectAllowed = "move";
-        e.dataTransfer.dropEffect = "move";
-        e.dataTransfer.setData("text/plain", propName);
-    }, [onColumnPositionChange, propName]);
-    const onDragEnd = React.useCallback(() => {
-        if (!onColumnPositionChange) {
-            return;
-        }
-        setIsDragging(false);
-    }, [onColumnPositionChange]);
-    const onDragOver = React.useCallback((e) => {
-        if (!onColumnPositionChange) {
-            return;
-        }
-        e.preventDefault();
-        setIsDropTarget(true);
-    }, [onColumnPositionChange]);
-    const onDragLeave = React.useCallback(() => {
-        if (!onColumnPositionChange) {
-            return;
-        }
-        setIsDropTarget(false);
-    }, [onColumnPositionChange]);
-    const onDrop = React.useCallback((e) => {
-        if (!onColumnPositionChange || !propName) {
-            return;
-        }
-        const sourcePropName = e.dataTransfer.getData("text/plain");
-        if (!sourcePropName || sourcePropName === propName) {
-            return;
-        }
-        onColumnPositionChange(sourcePropName, propName);
-    }, [onColumnPositionChange, propName]);
-    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", name: "selectAll", checked: isAllChecked, onChange: onSelectAllIndexesHandler }) })) })));
-    }
-    switch (schema === null || schema === void 0 ? void 0 : schema.type) {
-        case "boolean":
-            classNames.push(`text-${align || "center"}`, `justify-content-${align || "center"}`);
-            break;
-        case "integer":
-        case "number":
-            classNames.push(`text-${align || "end"}`, `justify-content-${align || "end"}`);
-            break;
-        default:
-            if (align) {
-                classNames.push(`text-${align}`);
-            }
-    }
-    return (_jsxs("div", Object.assign({ className: classNames.join(" "), style: style, title: typeof labelBody === "string" ? labelBody : undefined, draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop }, { children: [_jsxs("div", Object.assign({ className: "mig-schema-table__th__label-body", style: { lineHeight: "44px" }, onClick: onLabelClick }, { children: [_jsx("span", Object.assign({ className: "mig-schema-table__th__label-body-text" }, { children: labelBody })), sortAsc === undefined ? null : (_jsx("span", Object.assign({ className: "mig-schema-table__th__sort-icon" }, { children: sortAsc ? "↓" : "↑" })))] })), isSortable || columnFilterStatus !== EColumnFilterStatus.UNAVAILABLE ? (_jsx("button", Object.assign({ className: "mig-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(Th);

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

@@ -1,14 +0,0 @@
-import React from "react";
-import { oas31 } from "openapi3-ts";
-import { TColumnFilterValue } from "../../index";
-export interface IFilterMenuComponentProps {
-    columnFilterValue: TColumnFilterValue;
-    onChange: (newValue: TColumnFilterValue | undefined, persistState?: boolean) => void;
-    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, propIsRequired, propName, propSchema, translate, }: IFilterMenuComponentProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;