@helpdice/ui 1.5.6 → 1.5.9

package/dist/index.js

@@ -26321,6 +26321,8 @@ var TableHead = function TableHead(props) {
   var _ref = props,
     columns = _ref.columns,
     width = _ref.width,
+    onFilters = _ref.onFilters,
+    showFilters = _ref.showFilters,
     stickyHeader = _ref.stickyHeader;
   var isScalableWidth = React$1.useMemo(function () {
     return columns.find(function (item) {
@@ -26331,6 +26333,86 @@ var TableHead = function TableHead(props) {
     if (!isScalableWidth) return /*#__PURE__*/React$1.createElement("colgroup", null);
     return makeColgroup(width, columns);
   }, [isScalableWidth, width]);
+  var _React$useState = React$1.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filters = _React$useState2[0],
+    setFilters = _React$useState2[1];
+  var handleFilterChange = function handleFilterChange(name, value) {
+    setFilters(function (prevFilters) {
+      var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
+      return updatedFilters;
+    });
+  };
+  var applyFilters = function applyFilters() {
+    if (onFilters) {
+      onFilters(filters);
+    }
+  };
+  var generateFilterInputs = function generateFilterInputs() {
+    return columns.map(function (col) {
+      var _String, _filters$filterName;
+      var Header = col.label,
+        accessor = col.filter,
+        options = col.options;
+      var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+      // const unq_accessor = _.uniqueId(filterName);
+      // if (Header === 'actions') {
+      //   return (
+      //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
+      //       <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
+      //     </th>
+      //   )
+      // }
+      return /*#__PURE__*/React$1.createElement("th", {
+        style: {
+          padding: '3px'
+        },
+        "data-column": Header
+      }, 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',
+        onChange: function onChange(newValue) {
+          return handleFilterChange(filterName, newValue);
+        }
+      }, /*#__PURE__*/React$1.createElement(Select.Option, {
+        value: "All"
+      }, "All ", Header), options ? options.map(function (option) {
+        return /*#__PURE__*/React$1.createElement(Select.Option, {
+          value: option.value
+        }, option.name);
+      }) : null), accessor === 'date' && /*#__PURE__*/React$1.createElement(Input
+      // id={`filter-date-${filterName}`}
+      , {
+        htmlType: "date"
+        // name={filterName}
+        ,
+        value: filters[filterName],
+        onChange: function onChange(e) {
+          return handleFilterChange(filterName, e.target.value);
+        }
+      }), accessor === 'search' && /*#__PURE__*/React$1.createElement(Input
+      // id={`filter-search-${filterName}`}
+      , {
+        htmlType: "text",
+        autoComplete: "off"
+        // ref={filterRefs.current[filterName]} // Dynamically set ref}
+        // name={filterName}
+        ,
+        style: {
+          height: 30,
+          minWidth: 160
+        },
+        value: filters[filterName],
+        onChange: function onChange(e) {
+          return handleFilterChange(filterName, e.target.value);
+        },
+        placeholder: "Search...",
+        fullWidth: true
+      }));
+    });
+  };
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, colgroup, /*#__PURE__*/React$1.createElement("thead", {
     className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React$1.createElement("tr", {
@@ -26339,9 +26421,8 @@ var TableHead = function TableHead(props) {
     },
     className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, columns.map(function (column, _index) {
-    var _String;
-    var dataName = (_String = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
-    console.log('Column Hide:', dataName);
+    var _String2;
+    var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React$1.createElement("th", {
       style: _objectSpread2({
         // textAlign: `${column?.align} !important`,
@@ -26363,7 +26444,15 @@ var TableHead = function TableHead(props) {
       },
       className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }, column.text)));
-  }))), /*#__PURE__*/React$1.createElement(_JSXStyle, {
+  })), showFilters && /*#__PURE__*/React$1.createElement("tr", {
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+  }, generateFilterInputs(), /*#__PURE__*/React$1.createElement("th", {
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+  }, /*#__PURE__*/React$1.createElement(Button, {
+    onClick: function onClick() {
+      return applyFilters();
+    }
+  }, "Apply")))), /*#__PURE__*/React$1.createElement(_JSXStyle, {
     id: "2156261549",
     dynamic: [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
   }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:#fff;font-size:inherit;".concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
@@ -44181,6 +44270,9 @@ function Placeholder(_ref) {
   }, msg));
 }
 
+// import Input from '../input';
+// import Select from '../select';
+
 function DataTable(_ref) {
   var _ref$cols = _ref.cols,
     cols = _ref$cols === void 0 ? [] : _ref$cols,
@@ -44203,7 +44295,7 @@ function DataTable(_ref) {
       window.history.back();
     } : _ref$onBack,
     onRefresh = _ref.onRefresh,
-    onFilters = _ref.onFilters,
+    _onFilters = _ref.onFilters,
     onSelectedDelete = _ref.onSelectedDelete,
     onSelectedEdit = _ref.onSelectedEdit,
     onSelected = _ref.onSelected,
@@ -44254,13 +44346,13 @@ function DataTable(_ref) {
   });
 
   // State for filter values
-  var _useState7 = React$1.useState(COLUMNS.reduce(function (acc, col) {
-      acc[col.filter] = '';
-      return acc;
-    }, {})),
-    _useState8 = _slicedToArray(_useState7, 2),
-    filterValues = _useState8[0],
-    setFilterValues = _useState8[1];
+  // const [filterValues, setFilterValues] = useState(
+  //     COLUMNS.reduce((acc, col) => {
+  //         acc[col.filter] = '';
+  //         return acc;
+  //     }, {})
+  // );
+
   function handleShowFilter() {
     return setOpenFilter(!openFilter);
   }
@@ -44330,80 +44422,72 @@ function DataTable(_ref) {
   //     // '& tr': { borderBottom: '1px solid #ccc !important' }
   // };
 
-  var handleFilterChange = function handleFilterChange(name, value) {
-    setFilterValues(_objectSpread2(_objectSpread2({}, filterValues), {}, _defineProperty$1({}, name, value)));
-  };
-  var generateFilterInputs = function generateFilterInputs() {
-    return COLUMNS.map(function (col) {
-      var _String4, _filterValues$filterN;
-      var Header = col.name,
-        accessor = col.filter,
-        options = col.options;
-      var filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
-      // const unq_accessor = _.uniqueId(filterName);
-      // if (Header === 'actions') {
-      //   return (
-      //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
-      //       <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
-      //     </th>
-      //   )
-      // }
-      return /*#__PURE__*/React$1.createElement(Popover.Item, {
-        style: {
-          padding: '3px'
-        },
-        "data-column": Header
-      }, 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);
-        }
-      }, /*#__PURE__*/React$1.createElement(Select.Option, {
-        value: "All"
-      }, "All ", Header), options ? options.map(function (option) {
-        return /*#__PURE__*/React$1.createElement(Select.Option, {
-          value: option.value
-        }, option.name);
-      }) : null), accessor === 'date' && /*#__PURE__*/React$1.createElement(Input
-      // id={`filter-date-${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,
-        style: {
-          height: 30,
-          minWidth: 160
-        },
-        value: filterValues[filterName],
-        onChange: function onChange(e) {
-          return handleFilterChange(filterName, e.target.value);
-        },
-        placeholder: "Search...",
-        fullWidth: true
-      }));
-    });
-  };
+  // const handleFilterChange = (name: string, value?: any) => {
+  //     setFilterValues({ ...filterValues, [name]: value });
+  // };
+
+  // const generateFilterInputs = () => {
+  //     return COLUMNS.map((col) => {
+  //         const { name: Header, filter: accessor, options } = col;
+  //         const filterName = String(col?.name)?.replace(' ', '_').toLowerCase();
+  //         // const unq_accessor = _.uniqueId(filterName);
+  //         // if (Header === 'actions') {
+  //         //   return (
+  //         //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
+  //         //       <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
+  //         //     </th>
+  //         //   )
+  //         // }
+  //         return (
+  //             <Popover.Item style={{ padding: '3px' }} data-column={Header}>
+  //                 {accessor === 'fixed' && (
+  //                     <Select
+  //                         // key={filterName}
+  //                         name={filterName}
+  //                         value={filterValues[filterName] ?? 'All'}
+  //                         onChange={(newValue) => handleFilterChange(filterName, newValue)}
+  //                     >
+  //                         <Select.Option value="All">All {Header}</Select.Option>
+  //                         {options ? options.map((option: any) => (
+  //                             <Select.Option value={option.value}>{option.name}</Select.Option>
+  //                         )) : null}
+  //                     </Select>
+  //                 )}
+  //                 {accessor === 'date' && (
+  //                     <Input
+  //                         // id={`filter-date-${filterName}`}
+  //                         // key={filterName}
+  //                         htmlType="date"
+  //                         name={filterName}
+  //                         value={filterValues[filterName]}
+  //                         onChange={(e) => handleFilterChange(filterName, e.target.value)}
+  //                     />
+  //                 )}
+  //                 {accessor === 'search' && (
+  //                     <Input
+  //                         // id={`filter-search-${filterName}`}
+  //                         // key={filterName}
+  //                         htmlType="text"
+  //                         autoComplete="off"
+  //                         // ref={filterRefs.current[filterName]} // Dynamically set ref}
+  //                         name={filterName}
+  //                         style={{ height: 30, minWidth: 160 }}
+  //                         value={filterValues[filterName]}
+  //                         onChange={(e) => handleFilterChange(filterName, e.target.value)}
+  //                         placeholder="Search..."
+  //                         fullWidth
+  //                     />
+  //                 )}
+  //             </Popover.Item>
+  //         );
+  //     });
+  // };
+
   var content = function content() {
     return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, cols.map(function (option, _index) {
-      var _String5;
+      var _String4;
       // const colunqid = _.uniqueId(`${option.name}-${index}`);
-      var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
+      var dataName = (_String4 = String(option.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
       var isSelected = !hideColumn.includes(dataName);
       return /*#__PURE__*/React$1.createElement(Popover.Item, {
         selected: isSelected
@@ -44415,15 +44499,18 @@ 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")));
-  };
+
+  // const filterContent = () => (
+  //     <>
+  //         {generateFilterInputs()}
+  //         <Popover.Item>
+  //             <Button onClick={() => {
+  //                 if (onFilters) {
+  //                     onFilters(filterValues)
+  //                 }
+  //             }}>Apply</Button></Popover.Item></>
+  // )
+
   return /*#__PURE__*/React$1.createElement(GridContainer, {
     className: "helpdice-ui-data-table-container",
     direction: "column"
@@ -44508,13 +44595,8 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React$1.createElement(Refresh$1, null)
-  })) : null, onFilters && filter ? /*#__PURE__*/React$1.createElement(Popover, {
-    hideArrow: true,
-    disableItemsAutoClose: true,
-    placement: "bottomEnd",
-    child: filterContent
-  }, /*#__PURE__*/React$1.createElement(Tooltip, {
-    text: "Filters",
+  })) : null, _onFilters && filter ? /*#__PURE__*/React$1.createElement(Tooltip, {
+    text: "Columns",
     placement: "bottomEnd",
     font: 0.8,
     px: 0.6,
@@ -44527,7 +44609,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,
@@ -44593,6 +44675,11 @@ function DataTable(_ref) {
         _onPageChange(page, start, end);
       }
     },
+    onFilters: function onFilters(filters) {
+      if (_onFilters) {
+        _onFilters(filters);
+      }
+    },
     onRow: onRowClick,
     rowDraggable: rowDraggable,
     showFilters: openFilter,
@@ -44836,7 +44923,7 @@ var TableColumn = function TableColumn(columnProps) {
 };
 TableColumn.displayName = 'TableColumn';
 
-var _excluded$9 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
+var _excluded$9 = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 function TableComponent(tableProps) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
   var _ref = tableProps,
@@ -44862,9 +44949,11 @@ function TableComponent(tableProps) {
     onRow = _ref.onRow,
     onCell = _ref.onCell;
     _ref.onChange;
-    var onPageChange = _ref.onPageChange;
-    _ref.showFilters;
-    var _ref$stickyHeader = _ref.stickyHeader,
+    var onFilters = _ref.onFilters,
+    onPageChange = _ref.onPageChange,
+    _ref$showFilters = _ref.showFilters,
+    showFilters = _ref$showFilters === void 0 ? false : _ref$showFilters,
+    _ref$stickyHeader = _ref.stickyHeader,
     stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
     onSelected = _ref.onSelected,
     dataLength = _ref.dataLength,
@@ -44935,6 +45024,8 @@ function TableComponent(tableProps) {
     className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React$1.createElement(TableHead, {
     stickyHeader: stickyHeader,
+    onFilters: onFilters,
+    showFilters: showFilters,
     columns: columns,
     width: width
   }), /*#__PURE__*/React$1.createElement(TableBody, {