@helpdice/ui 1.5.5 → 1.5.6

package/dist/index.js

@@ -26338,7 +26338,7 @@ 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) {
+  }, 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);
@@ -26351,7 +26351,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", {
@@ -44341,7 +44340,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 +44352,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 +44369,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 +44379,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 +44400,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 +44508,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,
@@ -44604,12 +44604,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,

package/dist/table/index.js

@@ -1027,7 +1027,7 @@ 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) {
+  }, 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);
@@ -1040,7 +1040,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.createElement("div", {
@@ -31629,7 +31628,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}>
@@ -31641,10 +31640,10 @@ function DataTable(_ref) {
         style: {
           padding: '3px'
         },
-        "data-column": Header,
-        key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
-        key: filterName,
+        "data-column": Header
+      }, 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) {
@@ -31658,8 +31657,8 @@ function DataTable(_ref) {
         }, option.name);
       }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
       // id={`filter-date-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "date",
         name: filterName,
         value: filterValues[filterName],
@@ -31668,8 +31667,8 @@ function DataTable(_ref) {
         }
       }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
       // id={`filter-search-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
@@ -31689,14 +31688,15 @@ function DataTable(_ref) {
     });
   };
   var content = function content() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(React.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.createElement(Popover.Item, {
-        selected: isSelected,
-        key: colunqid,
+        selected: isSelected
+        // key={colunqid}
+        ,
         onClick: function onClick(e) {
           return handleHideColumnClick(e, option.name);
         }
@@ -31796,18 +31796,18 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Refresh$1, null)
-  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
+  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     text: "Filters",
     placement: "bottomEnd",
     font: 0.8,
     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,
@@ -31892,12 +31892,11 @@ function DataTable(_ref) {
       borderCollapse: 'collapse',
       overflow: 'auto'
     }
-  }, COLUMNS.map(function (column, index) {
+  }, COLUMNS.map(function (column) {
     return /*#__PURE__*/React.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,

package/esm/table/data-table.js

@@ -174,7 +174,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}>
@@ -186,10 +186,10 @@ function DataTable(_ref) {
         style: {
           padding: '3px'
         },
-        "data-column": Header,
-        key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
-        key: filterName,
+        "data-column": Header
+      }, 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) {
@@ -203,8 +203,8 @@ function DataTable(_ref) {
         }, option.name);
       }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
       // id={`filter-date-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "date",
         name: filterName,
         value: filterValues[filterName],
@@ -213,8 +213,8 @@ function DataTable(_ref) {
         }
       }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
       // id={`filter-search-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
@@ -234,14 +234,15 @@ function DataTable(_ref) {
     });
   };
   var content = function content() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(React.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.createElement(Popover.Item, {
-        selected: isSelected,
-        key: colunqid,
+        selected: isSelected
+        // key={colunqid}
+        ,
         onClick: function onClick(e) {
           return handleHideColumnClick(e, option.name);
         }
@@ -341,18 +342,18 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Refresh, null)
-  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
+  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     text: "Filters",
     placement: "bottomEnd",
     font: 0.8,
     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,
@@ -437,12 +438,11 @@ function DataTable(_ref) {
       borderCollapse: 'collapse',
       overflow: 'auto'
     }
-  }, COLUMNS.map(function (column, index) {
+  }, COLUMNS.map(function (column) {
     return /*#__PURE__*/React.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,

package/esm/table/table-head.js

@@ -40,7 +40,7 @@ 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) {
+  }, 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);
@@ -53,7 +53,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.createElement("div", {

package/package.json

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