mig-schema-table 3.0.27 → 3.0.28

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

@@ -1,17 +1,21 @@
+import { Dispatch, SetStateAction } from "react";
 import { IColumnConfig } from "../../types";
 import { oas31 } from "openapi3-ts";
 import "react-datepicker/dist/react-datepicker.css";
+import { tColumnSearchValue } from "../index";
 interface IColumnFilterRowProps {
     columnNames: string[];
     getWidth: (index: number) => number;
     config?: {
         [propName: string]: IColumnConfig<any>;
     };
-    columnSearchHandler: (propName: string, value: string | number | boolean) => void;
+    columnSearchHandler: (propName: string, value: tColumnSearchValue) => void;
     value: {
-        [propName: string]: string | number | boolean;
+        [propName: string]: tColumnSearchValue;
     };
     schema: oas31.SchemaObject;
+    columnFilterDropdown?: string;
+    setColumnFilterDropdown?: Dispatch<SetStateAction<string | undefined>>;
 }
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, }: IColumnFilterRowProps): import("react/jsx-runtime").JSX.Element;
+export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, columnFilterDropdown, setColumnFilterDropdown, }: IColumnFilterRowProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/SchemaTable/ColumnFilterRow/index.js

@@ -4,15 +4,15 @@ import { SELECT_ALL_COLUMN_NAME } from "../constants";
 import DatePicker from "react-datepicker";
 import nl from "date-fns/locale/nl";
 import "react-datepicker/dist/react-datepicker.css";
-import { localeFormat } from "../../inc/date";
 import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT, } from "../../inc/constant";
-export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, }) {
+import { getUnixTimeStamp } from "../../inc/date";
+export default function ColumnFilterRow({ columnNames, getWidth, config, value, columnSearchHandler, schema, columnFilterDropdown, setColumnFilterDropdown, }) {
     const { properties = {} } = schema;
     const getSelectComponent = React.useCallback((propSchema, propName, value, inputChangeHandler) => {
-        const enumItems = propSchema.type === "boolean" ? ["true", "false"] : propSchema.enum;
+        const enumItems = propSchema.type === "boolean" ? ["✓", "✕"] : propSchema.enum;
         return (_jsxs("select", Object.assign({ value: value, "data-prop-name": propName, onChange: inputChangeHandler }, { children: [_jsx("option", Object.assign({ value: "" }, { children: "All" }), "all"), enumItems.map((name) => (_jsx("option", Object.assign({ value: name }, { children: name }), `column-filter-select-${name}`)))] })));
     }, []);
-    const field = React.useCallback((propSchema, propName, propValue, propConfig) => {
+    const field = React.useCallback((propSchema, propName, propValue) => {
         const { type, format, minimum, maximum } = propSchema;
         const inputChangeHandler = (event) => {
             columnSearchHandler(propName, event.target.value);
@@ -24,24 +24,68 @@ export default function ColumnFilterRow({ columnNames, getWidth, config, value,
                     return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
                 }
                 if (format === "date-time" || format === "date") {
-                    const dateFormat = (propConfig === null || propConfig === void 0 ? void 0 : propConfig.dateFormat) ||
-                        (format === "date"
-                            ? DEFAULT_DATE_FORMAT
-                            : DEFAULT_DATE_TIME_FORMAT);
-                    const dateChangeHandler = (date) => {
-                        columnSearchHandler(propName, date ? localeFormat(date, dateFormat) : "");
+                    const dateFormat = format === "date"
+                        ? DEFAULT_DATE_FORMAT
+                        : DEFAULT_DATE_TIME_FORMAT;
+                    const dateRangeValue = propValue;
+                    const startDate = (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.from)
+                        ? new Date(dateRangeValue.from)
+                        : null;
+                    const endDate = (dateRangeValue === null || dateRangeValue === void 0 ? void 0 : dateRangeValue.to)
+                        ? new Date(dateRangeValue.to)
+                        : null;
+                    const startDateChangeHandler = (date) => {
+                        if (endDate && date && date > endDate) {
+                            return;
+                        }
+                        columnSearchHandler(propName, Object.assign(Object.assign({}, dateRangeValue), { from: `${date || ""}`, to: `${date && endDate ? dateRangeValue.to : ""}` }));
                     };
-                    return (_jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, showTimeSelect: format === "date-time", locale: nl, selected: propValue ? new Date(propValue) : null, onChange: dateChangeHandler, value: propValue || undefined, placeholderText: dateFormat, isClearable: true }));
+                    const endDateChangeHandler = (date) => {
+                        if (startDate &&
+                            date &&
+                            getUnixTimeStamp(`${date}`) < getUnixTimeStamp(`${startDate}`)) {
+                            return;
+                        }
+                        columnSearchHandler(propName, Object.assign(Object.assign({}, dateRangeValue), { to: `${date || ""}` }));
+                    };
+                    return (_jsx("div", Object.assign({ "data-bs-toggle": "dropdown-menu-item" }, { children: _jsxs("div", Object.assign({ className: "d-flex p-2" }, { children: [_jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "Start date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selected: startDate, onChange: startDateChangeHandler, placeholderText: dateFormat, isClearable: true, selectsStart: true, startDate: startDate, endDate: endDate, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] })), _jsxs("div", Object.assign({ className: "d-flex flex-column m-1" }, { children: [_jsx("label", { children: "End date-time" }), _jsx(DatePicker, { id: "filter-date", dateFormat: dateFormat, "data-prop-name": propName, locale: nl, selectsEnd: true, selected: endDate, onChange: endDateChangeHandler, placeholderText: dateFormat, isClearable: true, startDate: startDate, endDate: endDate, showTimeSelect: format === "date-time", timeIntervals: 15, shouldCloseOnSelect: format === "date" })] }))] })) })));
                 }
-                return (_jsx("input", { value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}` }));
+                return (_jsx("div", Object.assign({ className: "p-1" }, { children: _jsx("input", { value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}` }) })));
             case "integer":
-                return (_jsx("input", { type: "number", value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}`, min: minimum, max: maximum }));
+                return (_jsx("div", Object.assign({ className: "d-flex p-1" }, { children: _jsx("input", { type: "number", value: strValue, "data-prop-name": propName, onChange: inputChangeHandler, placeholder: `Search ${propName}`, min: minimum, max: maximum }) })));
             case "boolean":
                 return getSelectComponent(propSchema, propName, strValue, inputChangeHandler);
             default:
                 return _jsx(_Fragment, {});
         }
     }, [columnSearchHandler, getSelectComponent]);
+    const removeDropdown = React.useCallback((e) => {
+        if (!columnFilterDropdown) {
+            return;
+        }
+        let columnFilterEl = null;
+        let parentNode = e.target;
+        while (parentNode && parentNode.nodeName !== "HTML") {
+            if (typeof parentNode.className === "string" &&
+                parentNode.className.includes("schema-table__column-filter")) {
+                columnFilterEl = parentNode;
+                break;
+            }
+            parentNode = parentNode.parentNode;
+        }
+        if (!columnFilterEl) {
+            setColumnFilterDropdown && setColumnFilterDropdown(undefined);
+        }
+    }, [columnFilterDropdown, setColumnFilterDropdown]);
+    React.useEffect(() => {
+        if (!columnFilterDropdown) {
+            return;
+        }
+        window.addEventListener("click", removeDropdown, { capture: true });
+        return () => {
+            window.removeEventListener("click", removeDropdown, { capture: true });
+        };
+    }, [columnFilterDropdown, removeDropdown]);
     const SchemaColumnFilter = React.useCallback((index) => {
         const propName = columnNames[index];
         const propSchema = properties[propName];
@@ -50,8 +94,14 @@ export default function ColumnFilterRow({ columnNames, getWidth, config, value,
         if (propName === SELECT_ALL_COLUMN_NAME || !(propConfig === null || propConfig === void 0 ? void 0 : propConfig.isFilterable)) {
             return _jsx("div", { className: "schema-table__th" });
         }
-        return (_jsx("div", Object.assign({ className: "schema-table__th" }, { children: field(propSchema, propName, propValue, propConfig) }), `filter-col-${propName}`));
-    }, [columnNames, config, field, properties, value]);
+        return (_jsx("ul", Object.assign({ id: "test", className: `dropdown-menu dropdown-menu-lg-end ${columnFilterDropdown && columnFilterDropdown === propName
+                ? "show"
+                : ""}`, style: {
+                position: "fixed",
+                marginTop: -10,
+                minHeight: 100,
+            } }, { children: _jsx("div", Object.assign({ id: "filter-dropdown-item", style: { margin: 10 } }, { children: field(propSchema, propName, propValue) })) })));
+    }, [columnFilterDropdown, columnNames, config, field, properties, value]);
     return (_jsx("div", Object.assign({ className: "schema-table__th-row", style: { display: "flex", flex: "row" } }, { children: columnNames.map((columnName, index) => {
             return (_jsx("div", Object.assign({ className: "schema-table__column-filter", style: {
                     width: getWidth(index),

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

@@ -2,11 +2,7 @@ import React from "react";
 import { oas31 } from "openapi3-ts";
 import { TColumnFilterValue } from "../index";
 export interface ISchemaColumnFilterPopoverConfig {
-    anchorPoint: {
-        x: number;
-        y: number;
-    };
-    anchorPosition?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+    referenceElement: HTMLElement;
     propName: string;
 }
 type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
@@ -15,5 +11,5 @@ type TSchemaColumnFilterPopoverProps = ISchemaColumnFilterPopoverConfig & {
     value: TColumnFilterValue;
     onClose: () => void;
 };
-declare const _default: React.MemoExoticComponent<(props: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onChange, onClose, propName, propSchema, referenceElement, value, }: TSchemaColumnFilterPopoverProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/SchemaTable/SchemaColumnFilterPopover/index.js

@@ -1,53 +1,37 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import FilterFormComponent from "./FilterFormComponent";
-const SchemaColumnFilterPopover = (props) => {
-    const { anchorPoint, onClose, onChange, propName, propSchema, value } = props;
-    const [popoverEl, setPopoverEl] = React.useState();
-    const rect = React.useMemo(() => {
-        return popoverEl === null || popoverEl === void 0 ? void 0 : popoverEl.getBoundingClientRect();
-    }, [popoverEl]);
-    const ref = React.useCallback((el) => {
-        if (el) {
-            setPopoverEl(el);
-        }
-    }, []);
-    const style = React.useMemo(() => {
-        const result = {};
-        let anchorPosition = props.anchorPosition;
-        if (!anchorPosition) {
-            const anchorPositionVertical = anchorPoint.y > window.innerHeight / 2 ? "bottom" : "top";
-            const anchorPositionHorizontal = anchorPoint.x > window.innerWidth / 2 ? "Right" : "Left";
-            anchorPosition = `${anchorPositionVertical}${anchorPositionHorizontal}`;
-        }
-        switch (anchorPosition) {
-            case "bottomLeft":
-                result.left = (anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0;
-                result.top = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y) || 0) - rect.height : 0;
-                break;
-            case "topLeft":
-                result.left = (anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0;
-                result.top = (anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y) || 0;
-                break;
-            case "bottomRight":
-                result.left = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0) - rect.width : 0;
-                result.top = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y) || 0) - rect.height : 0;
-                break;
-            case "topRight":
-            default:
-                result.left = rect ? ((anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.x) || 0) - rect.width : 0;
-                result.top = anchorPoint === null || anchorPoint === void 0 ? void 0 : anchorPoint.y;
-                break;
-        }
-        result.maxHeight = window.innerHeight - result.top - 10;
-        return result;
-    }, [anchorPoint.x, anchorPoint.y, props.anchorPosition, rect]);
-    const lightboxRef = React.useRef(null);
-    const onLightboxClick = React.useCallback((e) => {
-        if (e.target === lightboxRef.current) {
+import { usePopper } from "react-popper";
+const SchemaColumnFilterPopover = ({ onChange, onClose, propName, propSchema, referenceElement, value, }) => {
+    const [popperElement, setPopperElement] = React.useState(null);
+    const [arrowElement, setArrowElement] = React.useState(null);
+    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+        modifiers: [{ name: "arrow", options: { element: arrowElement } }],
+    });
+    React.useEffect(() => {
+        const onWindowClick = (e) => {
+            if (!popperElement) {
+                return;
+            }
+            let parent = e.target;
+            while (parent && popperElement) {
+                if (parent === popperElement) {
+                    return;
+                }
+                parent =
+                    parent.parentNode === window.document ? null : parent.parentNode;
+            }
             onClose();
-        }
-    }, [onClose]);
-    return (_jsx("div", Object.assign({ className: `lightbox lightbox--transparent schema-column-filter-popover schema-column-filter-popover__${propSchema.type}${propSchema.format ? `_${propSchema.format}` : ""}`, onClick: onLightboxClick, onContextMenu: onClose, ref: lightboxRef }, { children: _jsx("div", Object.assign({ className: "popover", ref: ref, style: style }, { children: _jsx(FilterFormComponent, { onChange: onChange, propSchema: propSchema, propName: propName, columnFilterValue: value }) })) })));
+        };
+        window.addEventListener("click", onWindowClick, { capture: true });
+        return () => {
+            window.removeEventListener("click", onWindowClick, { capture: true });
+        };
+    }, [onClose, popperElement]);
+    const classNames = ["popover"];
+    if (attributes.popper) {
+        classNames.push(`bs-popover-${attributes.popper["data-popper-placement"]}`);
+    }
+    return (_jsxs("div", Object.assign({ className: classNames.join(" "), role: "tooltip", ref: setPopperElement, style: styles.popper }, attributes.popper, { children: [_jsx("div", { className: "popover-arrow", ref: setArrowElement, style: styles.arrow }), _jsx("div", Object.assign({ className: "popover-body" }, { children: _jsx(FilterFormComponent, { onChange: onChange, propSchema: propSchema, propName: propName, columnFilterValue: value }) }))] })));
 };
 export default React.memo(SchemaColumnFilterPopover);

package/dist/SchemaTable/Th/index.js

@@ -36,21 +36,13 @@ const Th = ({ isAllChecked, columnFilterStatus, disableColumnFilter, isSortable,
         if (!setPopoverConfig) {
             return;
         }
-        const rect = e.currentTarget.getBoundingClientRect();
+        const referenceElement = e.currentTarget;
         setPopoverConfig((popoverConfig) => {
             if (popoverConfig) {
                 return undefined;
             }
             return {
-                anchorPoint: rect
-                    ? {
-                        x: Math.round(rect.x + rect.width),
-                        y: Math.round(rect.y + rect.height),
-                    }
-                    : {
-                        x: e.clientX,
-                        y: e.clientY,
-                    },
+                referenceElement,
                 propName,
             };
         });

package/dist/SchemaTable/index.js

@@ -324,6 +324,6 @@ function SchemaTable({ Heading = VariableSizeList, checkedIndexes, config, custo
         }
         setColumnFilterMap((columnFilterMap) => (Object.assign(Object.assign({}, columnFilterMap), { [popoverConfig.propName]: newColumnFilterValue })));
     }, [disableColumnFilter, popoverConfig]);
-    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, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), _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}`), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { anchorPoint: popoverConfig.anchorPoint, anchorPosition: popoverConfig.anchorPosition, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName] })) : null] })));
+    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, autoFocus: true })) : null })), customElement] })), _jsx(Heading, Object.assign({ height: 50, itemCount: columnCount, itemSize: getColumnWidth, layout: "horizontal", width: rowWidth, sortAsc: sortAsc, setSortAsc: setSortAsc, setSortColumn: setSortColumn, sortColumn: sortColumn, sortedRenderData: sortedRenderData, className: "schema-table__th-row" }, { children: SchemaTableTh }), `thead_${rowWidth}_${sortColumn}_${sortAsc}_${searchQuery}`), _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}`), popoverConfig ? (_jsx(SchemaColumnFilterPopover, { referenceElement: popoverConfig.referenceElement, onClose: onPopoverClose, onChange: onSchemaColumnFilterChange, propName: popoverConfig.propName, propSchema: schema.properties[popoverConfig.propName], value: columnFilterMap[popoverConfig.propName] })) : null] })));
 }
 export default React.memo(SchemaTable);

package/dist/index.css

@@ -2,9 +2,6 @@
   display: flex;
 }
 
-.schema-table {
-  overflow: hidden;
-}
 .schema-table__tbody {
   overflow-x: hidden !important;
   border-collapse: collapse;
@@ -31,51 +28,6 @@
 .schema-table__column-filter .react-datepicker {
   display: flex;
 }
-.schema-table__column-filter .column-filter-dropdown {
-  --bs-dropdown-zindex: 1000;
-  --bs-dropdown-min-width: 10rem;
-  --bs-dropdown-padding-x: 0;
-  --bs-dropdown-padding-y: 0.5rem;
-  --bs-dropdown-spacer: 0.125rem;
-  --bs-dropdown-font-size: 1rem;
-  --bs-dropdown-color: #212529;
-  --bs-dropdown-bg: #fff;
-  --bs-dropdown-border-color: rgba(0, 0, 0, 0.175);
-  --bs-dropdown-border-radius: 0.375rem;
-  --bs-dropdown-border-width: 1px;
-  --bs-dropdown-inner-border-radius: calc(0.375rem - 1px);
-  --bs-dropdown-divider-bg: rgba(0, 0, 0, 0.175);
-  --bs-dropdown-divider-margin-y: 0.5rem;
-  --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  --bs-dropdown-link-color: #212529;
-  --bs-dropdown-link-hover-color: #1e2125;
-  --bs-dropdown-link-hover-bg: #e9ecef;
-  --bs-dropdown-link-active-color: #fff;
-  --bs-dropdown-link-active-bg: #0d6efd;
-  --bs-dropdown-link-disabled-color: #adb5bd;
-  --bs-dropdown-item-padding-x: 1rem;
-  --bs-dropdown-item-padding-y: 0.25rem;
-  --bs-dropdown-header-color: #6c757d;
-  --bs-dropdown-header-padding-x: 1rem;
-  --bs-dropdown-header-padding-y: 0.5rem;
-  position: absolute;
-  z-index: var(--bs-dropdown-zindex);
-  display: none;
-  min-width: var(--bs-dropdown-min-width);
-  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
-  margin: 0;
-  font-size: var(--bs-dropdown-font-size);
-  color: var(--bs-dropdown-color);
-  text-align: left;
-  list-style: none;
-  background-color: var(--bs-dropdown-bg);
-  background-clip: padding-box;
-  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
-  border-radius: var(--bs-dropdown-border-radius);
-}
-.schema-table__column-filter .column-filter-dropdown--show {
-  display: block;
-}
 .schema-table__th {
   background-color: #eee;
   align-items: center;
@@ -136,32 +88,3 @@
   border-radius: 8px;
   padding: 4px 10px;
 }
-.schema-table .schema-column-filter-popover__string_date-time .popover {
-  width: 500px;
-  max-width: initial;
-}
-.schema-table .lightbox {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-.schema-table .lightbox--transparent {
-  background-color: transparent;
-}
-.schema-table .popover {
-  position: fixed;
-  border-radius: 2px;
-  background: #ddd;
-  box-shadow: 0 2px 10px #999999;
-  z-index: 1;
-  padding: 10px;
-  min-width: 150px;
-}
-.schema-table .popover select,
-.schema-table .popover input {
-  width: 100%;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mig-schema-table",
-  "version": "3.0.27",
+  "version": "3.0.28",
   "main": "dist/index.js",
   "files": [
     "dist/"
@@ -19,6 +19,7 @@
     "react": "^18.2.0",
     "react-datepicker": "^4.14.0",
     "react-dom": "^18.2.0",
+    "react-popper": "^2.3.0",
     "react-scripts": "5.0.1",
     "react-window": "^1.8.9"
   },
@@ -47,11 +48,11 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/date-fns": "^2.6.0",
     "@types/lodash": "^4.14.194",
     "@types/react-window": "^1.8.5",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
     "axios": "^1.4.0",
     "prettier": "^2.8.8",
     "react-router-dom": "^6.11.2",