@helpdice/ui 1.5.3 → 1.5.5

package/dist/index.js

@@ -44233,39 +44233,42 @@ function DataTable(_ref) {
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
-  // const [anchorEl, setAnchorEl] = useState(null);
   var _useState = React$1.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var _useState3 = React$1.useState({}),
+    hideColumn = _useState2[0],
+    setHideColumn = _useState2[1];
+  var _useState3 = React$1.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    filters = _useState4[0],
-    setFilters = _useState4[1];
-  // const [table_filters] = useDebounce(filters, 500);
-  // const open = Boolean(anchorEl);
-  // const handleMenuOpen = (event: any) => {
-  //     setAnchorEl(event.currentTarget);
-  // };
+    openFilter = _useState4[0],
+    setOpenFilter = _useState4[1];
+  // const [anchorEl, setAnchorEl] = useState(null);
   var _useState5 = React$1.useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
-    hideColumn = _useState6[0],
-    setHideColumn = _useState6[1];
-  // const handleMenuClose = () => {
-  //     setAnchorEl(null);
-  // };
+    selected = _useState6[0],
+    setSelected = _useState6[1];
 
-  var _useState7 = React$1.useState(false),
+  // const [table_filters] = useDebounce(filters, 500);
+  var COLUMNS = cols.filter(function (col) {
+    var _String;
+    var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+    return !hideColumn.includes(dataName);
+  });
+
+  // State for filter values
+  var _useState7 = React$1.useState(COLUMNS.reduce(function (acc, col) {
+      acc[col.filter] = '';
+      return acc;
+    }, {})),
     _useState8 = _slicedToArray(_useState7, 2),
-    openFilter = _useState8[0],
-    setOpenFilter = _useState8[1];
+    filterValues = _useState8[0],
+    setFilterValues = _useState8[1];
   function handleShowFilter() {
     return setOpenFilter(!openFilter);
   }
   React$1.useEffect(function () {
     cols.forEach(function (col) {
-      var _String;
-      var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+      var _String2;
+      var dataName = (_String2 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
       if (hideColumn.includes(col.name)) {
         document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = 'none !important';
@@ -44278,8 +44281,8 @@ function DataTable(_ref) {
     });
   }, [hideColumn, cols]);
   function handleHideColumnClick(_event, _id) {
-    var _String2;
-    var id = (_String2 = String(_id)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
+    var _String3;
+    var id = (_String3 = String(_id)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
     if (selectedIndex === -1) {
@@ -44328,20 +44331,12 @@ function DataTable(_ref) {
   //     // '& tr': { borderBottom: '1px solid #ccc !important' }
   // };
 
-  var COLUMNS = cols.filter(function (col) {
-    var _String3;
-    var dataName = (_String3 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
-    return !hideColumn.includes(dataName);
-  });
   var handleFilterChange = function handleFilterChange(name, value) {
-    setFilters(function (prevFilters) {
-      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
-      return updatedFilters;
-    });
+    setFilterValues(_objectSpread2(_objectSpread2({}, filterValues), {}, _defineProperty$1({}, name, value)));
   };
   var generateFilterInputs = function generateFilterInputs() {
     return COLUMNS.map(function (col) {
-      var _String4, _filters$filterName;
+      var _String4, _filterValues$filterN;
       var Header = col.name,
         accessor = col.filter,
         options = col.options;
@@ -44354,17 +44349,16 @@ function DataTable(_ref) {
       //     </th>
       //   )
       // }
-      return /*#__PURE__*/React$1.createElement("div", {
+      return /*#__PURE__*/React$1.createElement(Popover.Item, {
         style: {
           padding: '3px'
         },
         "data-column": Header,
         key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React$1.createElement(Select
-      // key={unq_accessor}
-      // name={filterName}
-      , {
-        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
+      }, accessor === 'fixed' && /*#__PURE__*/React$1.createElement(Select, {
+        key: filterName,
+        name: filterName,
+        value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
         onChange: function onChange(newValue) {
           return handleFilterChange(filterName, newValue);
         }
@@ -44377,26 +44371,27 @@ function DataTable(_ref) {
       }) : null), accessor === 'date' && /*#__PURE__*/React$1.createElement(Input
       // id={`filter-date-${filterName}`}
       , {
-        htmlType: "date"
-        // name={filterName}
-        ,
-        value: filters[filterName],
+        key: filterName,
+        htmlType: "date",
+        name: filterName,
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         }
       }), accessor === 'search' && /*#__PURE__*/React$1.createElement(Input
       // id={`filter-search-${filterName}`}
       , {
+        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
-        // name={filterName}
         ,
+        name: filterName,
         style: {
           height: 30,
           minWidth: 160
         },
-        value: filters[filterName],
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         },
@@ -44420,6 +44415,15 @@ function DataTable(_ref) {
       }, /*#__PURE__*/React$1.createElement("span", null, option.name));
     }));
   };
+  var filterContent = function filterContent() {
+    return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, generateFilterInputs(), /*#__PURE__*/React$1.createElement(Popover.Item, null, /*#__PURE__*/React$1.createElement(Button, {
+      onClick: function onClick() {
+        if (onFilters) {
+          onFilters(filterValues);
+        }
+      }
+    }, "Apply")));
+  };
   return /*#__PURE__*/React$1.createElement(GridContainer, {
     className: "helpdice-ui-data-table-container",
     direction: "column"
@@ -44511,6 +44515,11 @@ function DataTable(_ref) {
     px: 0.6,
     py: 0.4,
     type: "dark"
+  }, /*#__PURE__*/React$1.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
   }, /*#__PURE__*/React$1.createElement(Button, {
     htmlType: "button",
     onClick: handleShowFilter,
@@ -44518,7 +44527,7 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React$1.createElement(Filters, null)
-  })) : null, !disableViewColumn && /*#__PURE__*/React$1.createElement(Tooltip, {
+  }))) : null, !disableViewColumn && /*#__PURE__*/React$1.createElement(Tooltip, {
     text: "Columns",
     placement: "bottomEnd",
     font: 0.8,
@@ -44546,7 +44555,7 @@ function DataTable(_ref) {
       display: 'flex',
       flexDirection: sideMenu ? 'row' : 'column'
     }
-  }, sideMenu || openFilter ? /*#__PURE__*/React$1.createElement(GridContainer, {
+  }, sideMenu ? /*#__PURE__*/React$1.createElement(GridContainer, {
     direction: "column",
     style: {
       width: '15rem',
@@ -44555,13 +44564,7 @@ function DataTable(_ref) {
       border: '1px solid #cfcfcf',
       borderRadius: '5px'
     }
-  }, openFilter ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, generateFilterInputs(), /*#__PURE__*/React$1.createElement(Button, {
-    onClick: function onClick() {
-      if (onFilters) {
-        onFilters(filters);
-      }
-    }
-  }, "Apply")) : sideMenu) : null, /*#__PURE__*/React$1.createElement("div", {
+  }, sideMenu) : null, /*#__PURE__*/React$1.createElement("div", {
     onDragOver: onDragOver,
     onDragEnter: onDragEnter,
     onDragLeave: onDragLeave,

package/dist/table/index.js

@@ -31521,39 +31521,42 @@ function DataTable(_ref) {
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
-  // const [anchorEl, setAnchorEl] = useState(null);
   var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var _useState3 = React.useState({}),
+    hideColumn = _useState2[0],
+    setHideColumn = _useState2[1];
+  var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    filters = _useState4[0],
-    setFilters = _useState4[1];
-  // const [table_filters] = useDebounce(filters, 500);
-  // const open = Boolean(anchorEl);
-  // const handleMenuOpen = (event: any) => {
-  //     setAnchorEl(event.currentTarget);
-  // };
+    openFilter = _useState4[0],
+    setOpenFilter = _useState4[1];
+  // const [anchorEl, setAnchorEl] = useState(null);
   var _useState5 = React.useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
-    hideColumn = _useState6[0],
-    setHideColumn = _useState6[1];
-  // const handleMenuClose = () => {
-  //     setAnchorEl(null);
-  // };
+    selected = _useState6[0],
+    setSelected = _useState6[1];
 
-  var _useState7 = React.useState(false),
+  // const [table_filters] = useDebounce(filters, 500);
+  var COLUMNS = cols.filter(function (col) {
+    var _String;
+    var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+    return !hideColumn.includes(dataName);
+  });
+
+  // State for filter values
+  var _useState7 = React.useState(COLUMNS.reduce(function (acc, col) {
+      acc[col.filter] = '';
+      return acc;
+    }, {})),
     _useState8 = _slicedToArray(_useState7, 2),
-    openFilter = _useState8[0],
-    setOpenFilter = _useState8[1];
+    filterValues = _useState8[0],
+    setFilterValues = _useState8[1];
   function handleShowFilter() {
     return setOpenFilter(!openFilter);
   }
   React.useEffect(function () {
     cols.forEach(function (col) {
-      var _String;
-      var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+      var _String2;
+      var dataName = (_String2 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
       if (hideColumn.includes(col.name)) {
         document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = 'none !important';
@@ -31566,8 +31569,8 @@ function DataTable(_ref) {
     });
   }, [hideColumn, cols]);
   function handleHideColumnClick(_event, _id) {
-    var _String2;
-    var id = (_String2 = String(_id)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
+    var _String3;
+    var id = (_String3 = String(_id)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
     if (selectedIndex === -1) {
@@ -31616,20 +31619,12 @@ function DataTable(_ref) {
   //     // '& tr': { borderBottom: '1px solid #ccc !important' }
   // };
 
-  var COLUMNS = cols.filter(function (col) {
-    var _String3;
-    var dataName = (_String3 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
-    return !hideColumn.includes(dataName);
-  });
   var handleFilterChange = function handleFilterChange(name, value) {
-    setFilters(function (prevFilters) {
-      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty({}, name, value));
-      return updatedFilters;
-    });
+    setFilterValues(_objectSpread2(_objectSpread2({}, filterValues), {}, _defineProperty({}, name, value)));
   };
   var generateFilterInputs = function generateFilterInputs() {
     return COLUMNS.map(function (col) {
-      var _String4, _filters$filterName;
+      var _String4, _filterValues$filterN;
       var Header = col.name,
         accessor = col.filter,
         options = col.options;
@@ -31642,17 +31637,16 @@ function DataTable(_ref) {
       //     </th>
       //   )
       // }
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Popover.Item, {
         style: {
           padding: '3px'
         },
         "data-column": Header,
         key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
-      // key={unq_accessor}
-      // name={filterName}
-      , {
-        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
+      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
+        key: filterName,
+        name: filterName,
+        value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
         onChange: function onChange(newValue) {
           return handleFilterChange(filterName, newValue);
         }
@@ -31665,26 +31659,27 @@ function DataTable(_ref) {
       }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
       // id={`filter-date-${filterName}`}
       , {
-        htmlType: "date"
-        // name={filterName}
-        ,
-        value: filters[filterName],
+        key: filterName,
+        htmlType: "date",
+        name: filterName,
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         }
       }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
       // id={`filter-search-${filterName}`}
       , {
+        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
-        // name={filterName}
         ,
+        name: filterName,
         style: {
           height: 30,
           minWidth: 160
         },
-        value: filters[filterName],
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         },
@@ -31708,6 +31703,15 @@ function DataTable(_ref) {
       }, /*#__PURE__*/React.createElement("span", null, option.name));
     }));
   };
+  var filterContent = function filterContent() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, generateFilterInputs(), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        if (onFilters) {
+          onFilters(filterValues);
+        }
+      }
+    }, "Apply")));
+  };
   return /*#__PURE__*/React.createElement(GridContainer, {
     className: "helpdice-ui-data-table-container",
     direction: "column"
@@ -31799,6 +31803,11 @@ function DataTable(_ref) {
     px: 0.6,
     py: 0.4,
     type: "dark"
+  }, /*#__PURE__*/React.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
   }, /*#__PURE__*/React.createElement(Button, {
     htmlType: "button",
     onClick: handleShowFilter,
@@ -31806,7 +31815,7 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Filters, null)
-  })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
+  }))) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
     text: "Columns",
     placement: "bottomEnd",
     font: 0.8,
@@ -31834,7 +31843,7 @@ function DataTable(_ref) {
       display: 'flex',
       flexDirection: sideMenu ? 'row' : 'column'
     }
-  }, sideMenu || openFilter ? /*#__PURE__*/React.createElement(GridContainer, {
+  }, sideMenu ? /*#__PURE__*/React.createElement(GridContainer, {
     direction: "column",
     style: {
       width: '15rem',
@@ -31843,13 +31852,7 @@ function DataTable(_ref) {
       border: '1px solid #cfcfcf',
       borderRadius: '5px'
     }
-  }, openFilter ? /*#__PURE__*/React.createElement(React.Fragment, null, generateFilterInputs(), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      if (onFilters) {
-        onFilters(filters);
-      }
-    }
-  }, "Apply")) : sideMenu) : null, /*#__PURE__*/React.createElement("div", {
+  }, sideMenu) : null, /*#__PURE__*/React.createElement("div", {
     onDragOver: onDragOver,
     onDragEnter: onDragEnter,
     onDragLeave: onDragLeave,

package/esm/table/data-table.js

@@ -66,39 +66,42 @@ function DataTable(_ref) {
     onNextPage = _ref.onNextPage,
     onPreviousPage = _ref.onPreviousPage;
   var TABLE_ID = _.uniqueId('tbl');
-  // const [anchorEl, setAnchorEl] = useState(null);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var _useState3 = useState({}),
+    hideColumn = _useState2[0],
+    setHideColumn = _useState2[1];
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    filters = _useState4[0],
-    setFilters = _useState4[1];
-  // const [table_filters] = useDebounce(filters, 500);
-  // const open = Boolean(anchorEl);
-  // const handleMenuOpen = (event: any) => {
-  //     setAnchorEl(event.currentTarget);
-  // };
+    openFilter = _useState4[0],
+    setOpenFilter = _useState4[1];
+  // const [anchorEl, setAnchorEl] = useState(null);
   var _useState5 = useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
-    hideColumn = _useState6[0],
-    setHideColumn = _useState6[1];
-  // const handleMenuClose = () => {
-  //     setAnchorEl(null);
-  // };
+    selected = _useState6[0],
+    setSelected = _useState6[1];
+
+  // const [table_filters] = useDebounce(filters, 500);
+  var COLUMNS = cols.filter(function (col) {
+    var _String;
+    var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+    return !hideColumn.includes(dataName);
+  });
 
-  var _useState7 = useState(false),
+  // State for filter values
+  var _useState7 = useState(COLUMNS.reduce(function (acc, col) {
+      acc[col.filter] = '';
+      return acc;
+    }, {})),
     _useState8 = _slicedToArray(_useState7, 2),
-    openFilter = _useState8[0],
-    setOpenFilter = _useState8[1];
+    filterValues = _useState8[0],
+    setFilterValues = _useState8[1];
   function handleShowFilter() {
     return setOpenFilter(!openFilter);
   }
   useEffect(function () {
     cols.forEach(function (col) {
-      var _String;
-      var dataName = (_String = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+      var _String2;
+      var dataName = (_String2 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
       if (hideColumn.includes(col.name)) {
         document.querySelectorAll("[data-column=\"".concat(dataName, "\"]")).forEach(function (el) {
           el.style.display = 'none !important';
@@ -111,8 +114,8 @@ function DataTable(_ref) {
     });
   }, [hideColumn, cols]);
   function handleHideColumnClick(_event, _id) {
-    var _String2;
-    var id = (_String2 = String(_id)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
+    var _String3;
+    var id = (_String3 = String(_id)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
     var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
     if (selectedIndex === -1) {
@@ -161,20 +164,12 @@ function DataTable(_ref) {
   //     // '& tr': { borderBottom: '1px solid #ccc !important' }
   // };
 
-  var COLUMNS = cols.filter(function (col) {
-    var _String3;
-    var dataName = (_String3 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
-    return !hideColumn.includes(dataName);
-  });
   var handleFilterChange = function handleFilterChange(name, value) {
-    setFilters(function (prevFilters) {
-      var updatedFilters = _extends({}, prevFilters, _defineProperty({}, name, value));
-      return updatedFilters;
-    });
+    setFilterValues(_extends({}, filterValues, _defineProperty({}, name, value)));
   };
   var generateFilterInputs = function generateFilterInputs() {
     return COLUMNS.map(function (col) {
-      var _String4, _filters$filterName;
+      var _String4, _filterValues$filterN;
       var Header = col.name,
         accessor = col.filter,
         options = col.options;
@@ -187,17 +182,16 @@ function DataTable(_ref) {
       //     </th>
       //   )
       // }
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Popover.Item, {
         style: {
           padding: '3px'
         },
         "data-column": Header,
         key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
-      // key={unq_accessor}
-      // name={filterName}
-      , {
-        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
+      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
+        key: filterName,
+        name: filterName,
+        value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
         onChange: function onChange(newValue) {
           return handleFilterChange(filterName, newValue);
         }
@@ -210,26 +204,27 @@ function DataTable(_ref) {
       }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
       // id={`filter-date-${filterName}`}
       , {
-        htmlType: "date"
-        // name={filterName}
-        ,
-        value: filters[filterName],
+        key: filterName,
+        htmlType: "date",
+        name: filterName,
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         }
       }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
       // id={`filter-search-${filterName}`}
       , {
+        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
-        // name={filterName}
         ,
+        name: filterName,
         style: {
           height: 30,
           minWidth: 160
         },
-        value: filters[filterName],
+        value: filterValues[filterName],
         onChange: function onChange(e) {
           return handleFilterChange(filterName, e.target.value);
         },
@@ -253,6 +248,15 @@ function DataTable(_ref) {
       }, /*#__PURE__*/React.createElement("span", null, option.name));
     }));
   };
+  var filterContent = function filterContent() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, generateFilterInputs(), /*#__PURE__*/React.createElement(Popover.Item, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick() {
+        if (onFilters) {
+          onFilters(filterValues);
+        }
+      }
+    }, "Apply")));
+  };
   return /*#__PURE__*/React.createElement(Container, {
     className: "helpdice-ui-data-table-container",
     direction: "column"
@@ -344,6 +348,11 @@ function DataTable(_ref) {
     px: 0.6,
     py: 0.4,
     type: "dark"
+  }, /*#__PURE__*/React.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
   }, /*#__PURE__*/React.createElement(Button, {
     htmlType: "button",
     onClick: handleShowFilter,
@@ -351,7 +360,7 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Filters, null)
-  })) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
+  }))) : null, !disableViewColumn && /*#__PURE__*/React.createElement(Tooltip, {
     text: "Columns",
     placement: "bottomEnd",
     font: 0.8,
@@ -379,7 +388,7 @@ function DataTable(_ref) {
       display: 'flex',
       flexDirection: sideMenu ? 'row' : 'column'
     }
-  }, sideMenu || openFilter ? /*#__PURE__*/React.createElement(Container, {
+  }, sideMenu ? /*#__PURE__*/React.createElement(Container, {
     direction: "column",
     style: {
       width: '15rem',
@@ -388,13 +397,7 @@ function DataTable(_ref) {
       border: '1px solid #cfcfcf',
       borderRadius: '5px'
     }
-  }, openFilter ? /*#__PURE__*/React.createElement(React.Fragment, null, generateFilterInputs(), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      if (onFilters) {
-        onFilters(filters);
-      }
-    }
-  }, "Apply")) : sideMenu) : null, /*#__PURE__*/React.createElement("div", {
+  }, sideMenu) : null, /*#__PURE__*/React.createElement("div", {
     onDragOver: onDragOver,
     onDragEnter: onDragEnter,
     onDragLeave: onDragLeave,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",