@helpdice/ui 1.5.5 → 1.5.8

package/dist/index.js

@@ -26318,9 +26318,15 @@ var makeColgroup = function makeColgroup(width, columns) {
 };
 var TableHead = function TableHead(props) {
   var theme = useTheme();
+  var _React$useState = React$1.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filters = _React$useState2[0],
+    setFilters = _React$useState2[1];
   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 +26337,82 @@ var TableHead = function TableHead(props) {
     if (!isScalableWidth) return /*#__PURE__*/React$1.createElement("colgroup", null);
     return makeColgroup(width, columns);
   }, [isScalableWidth, width]);
+  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", {
@@ -26338,10 +26420,9 @@ var TableHead = function TableHead(props) {
       backgroundColor: '#fff'
     },
     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);
+  }, columns.map(function (column, _index) {
+    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`,
@@ -26351,7 +26432,6 @@ var TableHead = function TableHead(props) {
         color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       }, column === null || column === void 0 ? void 0 : column.style),
-      key: "table-th-".concat(column.prop.toString(), "-").concat(index),
       "data-column": dataName,
       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.className || "")
     }, /*#__PURE__*/React$1.createElement("div", {
@@ -26364,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;}")));
@@ -44341,7 +44429,7 @@ function DataTable(_ref) {
         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();
-      var unq_accessor = _.uniqueId(filterName);
+      // const unq_accessor = _.uniqueId(filterName);
       // if (Header === 'actions') {
       //   return (
       //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
@@ -44353,10 +44441,10 @@ function DataTable(_ref) {
         style: {
           padding: '3px'
         },
-        "data-column": Header,
-        key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React$1.createElement(Select, {
-        key: filterName,
+        "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) {
@@ -44370,8 +44458,8 @@ function DataTable(_ref) {
         }, option.name);
       }) : null), accessor === 'date' && /*#__PURE__*/React$1.createElement(Input
       // id={`filter-date-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "date",
         name: filterName,
         value: filterValues[filterName],
@@ -44380,8 +44468,8 @@ function DataTable(_ref) {
         }
       }), accessor === 'search' && /*#__PURE__*/React$1.createElement(Input
       // id={`filter-search-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
@@ -44401,14 +44489,15 @@ function DataTable(_ref) {
     });
   };
   var content = function content() {
-    return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, cols.map(function (option, index) {
+    return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, cols.map(function (option, _index) {
       var _String5;
-      var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
+      // const colunqid = _.uniqueId(`${option.name}-${index}`);
       var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
       var isSelected = !hideColumn.includes(dataName);
       return /*#__PURE__*/React$1.createElement(Popover.Item, {
-        selected: isSelected,
-        key: colunqid,
+        selected: isSelected
+        // key={colunqid}
+        ,
         onClick: function onClick(e) {
           return handleHideColumnClick(e, option.name);
         }
@@ -44508,18 +44597,18 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React$1.createElement(Refresh$1, null)
-  })) : null, onFilters && filter ? /*#__PURE__*/React$1.createElement(Tooltip, {
+  })) : null, onFilters && filter ? /*#__PURE__*/React$1.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
+  }, /*#__PURE__*/React$1.createElement(Tooltip, {
     text: "Filters",
     placement: "bottomEnd",
     font: 0.8,
     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,
@@ -44593,6 +44682,9 @@ function DataTable(_ref) {
         _onPageChange(page, start, end);
       }
     },
+    onFilters: function onFilters(filters) {
+      console.log(filters);
+    },
     onRow: onRowClick,
     rowDraggable: rowDraggable,
     showFilters: openFilter,
@@ -44604,12 +44696,11 @@ function DataTable(_ref) {
       borderCollapse: 'collapse',
       overflow: 'auto'
     }
-  }, COLUMNS.map(function (column, index) {
+  }, COLUMNS.map(function (column) {
     return /*#__PURE__*/React$1.createElement(Table.Column, {
       style: column === null || column === void 0 ? void 0 : column.style,
       options: column === null || column === void 0 ? void 0 : column.options,
       fontSize: column === null || column === void 0 ? void 0 : column.fontSize,
-      key: "".concat(column.id, "-").concat(index),
       prop: column.id,
       label: column.name,
       filter: column === null || column === void 0 ? void 0 : column.filter,
@@ -44837,7 +44928,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,
@@ -44863,9 +44954,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,
@@ -44936,6 +45029,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, {