@helpdice/ui 1.3.6 → 1.3.7

package/dist/index.js

@@ -23391,7 +23391,7 @@ var PopoverComponent = function PopoverComponent(_ref) {
 PopoverComponent.displayName = 'Popover';
 var Popover = withScale(PopoverComponent);
 
-var _excluded$n = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
+var _excluded$n = ["children", "line", "showTitle", "className", "onClick", "selected", "disableAutoClose"];
 var PopoverItemComponent = function PopoverItemComponent(_ref) {
   var children = _ref.children,
     _ref$line = _ref.line,
@@ -23401,6 +23401,8 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
     onClick = _ref.onClick,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === undefined ? false : _ref$selected,
     _ref$disableAutoClose = _ref.disableAutoClose,
     disableAutoClose = _ref$disableAutoClose === undefined ? false : _ref$disableAutoClose,
     props = _objectWithoutProperties(_ref, _excluded$n);
@@ -23424,6 +23426,9 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
     onItemClick(event);
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    style: {
+      backgroundColor: selected ? '#efefef' : ''
+    },
     onClick: clickHandler
   }, props, {
     className: _JSXStyle.dynamic([["190621384", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
@@ -42260,7 +42265,7 @@ var TableCell = function TableCell(_ref) {
         color: "".concat(column === null || column === undefined ? undefined : column.color),
         whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
-      "data-column": column.label,
+      "data-column": String(column.label).toLowerCase(),
       key: "row-td-".concat(index, "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);
@@ -42910,11 +42915,11 @@ function DataTable(_ref) {
   React.useEffect(function () {
     cols.forEach(function (col) {
       if (hideColumn.includes(col.name)) {
-        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
-          el.style.display = 'none';
+        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
+          el.style.display = 'none !important';
         });
       } else {
-        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
+        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
           el.style.display = '';
         });
       }
@@ -42975,10 +42980,10 @@ function DataTable(_ref) {
   var content = function content() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
       var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
+      var isSelected = !hideColumn.includes(option.name);
       return /*#__PURE__*/React.createElement(Popover.Item, {
-        key: colunqid
-        // selected={!hideColumn.includes(option.name as never)}
-        ,
+        selected: isSelected,
+        key: colunqid,
         onClick: function onClick(e) {
           return handleHideColumnClick(e, option.name);
         }
@@ -42986,6 +42991,7 @@ function DataTable(_ref) {
     }));
   };
   return /*#__PURE__*/React.createElement(GridContainer, {
+    className: "helpdice-ui-table-container",
     direction: "column"
   }, /*#__PURE__*/React.createElement(Grid.Container, {
     style: {

package/dist/popover/index.js

@@ -1806,7 +1806,7 @@ var PopoverComponent = function PopoverComponent(_ref) {
 PopoverComponent.displayName = 'Popover';
 var Popover = withScale(PopoverComponent);
 
-var _excluded = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
+var _excluded = ["children", "line", "showTitle", "className", "onClick", "selected", "disableAutoClose"];
 var PopoverItemComponent = function PopoverItemComponent(_ref) {
   var children = _ref.children,
     _ref$line = _ref.line,
@@ -1816,6 +1816,8 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
     onClick = _ref.onClick,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === undefined ? false : _ref$selected,
     _ref$disableAutoClose = _ref.disableAutoClose,
     disableAutoClose = _ref$disableAutoClose === undefined ? false : _ref$disableAutoClose,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -1839,6 +1841,9 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
     onItemClick(event);
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    style: {
+      backgroundColor: selected ? '#efefef' : ''
+    },
     onClick: clickHandler
   }, props, {
     className: _JSXStyle.dynamic([["190621384", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")

package/dist/popover/popover-item.d.ts

@@ -3,6 +3,7 @@ interface Props {
     line?: boolean;
     showTitle?: boolean;
     disableAutoClose?: boolean;
+    selected?: boolean;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;

package/dist/table/index.js

@@ -20023,7 +20023,7 @@ var TableCell = function TableCell(_ref) {
         color: "".concat(column === null || column === undefined ? undefined : column.color),
         whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
-      "data-column": column.label,
+      "data-column": String(column.label).toLowerCase(),
       key: "row-td-".concat(index, "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);
@@ -31488,7 +31488,7 @@ var PopoverComponent = function PopoverComponent(_ref) {
 PopoverComponent.displayName = 'Popover';
 var Popover = withScale(PopoverComponent);
 
-var _excluded$5 = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
+var _excluded$5 = ["children", "line", "showTitle", "className", "onClick", "selected", "disableAutoClose"];
 var PopoverItemComponent = function PopoverItemComponent(_ref) {
   var children = _ref.children,
     _ref$line = _ref.line,
@@ -31498,6 +31498,8 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
     onClick = _ref.onClick,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === undefined ? false : _ref$selected,
     _ref$disableAutoClose = _ref.disableAutoClose,
     disableAutoClose = _ref$disableAutoClose === undefined ? false : _ref$disableAutoClose,
     props = _objectWithoutProperties(_ref, _excluded$5);
@@ -31521,6 +31523,9 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
     onItemClick(event);
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    style: {
+      backgroundColor: selected ? '#efefef' : ''
+    },
     onClick: clickHandler
   }, props, {
     className: _JSXStyle.dynamic([["190621384", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")
@@ -31613,11 +31618,11 @@ function DataTable(_ref) {
   React.useEffect(function () {
     cols.forEach(function (col) {
       if (hideColumn.includes(col.name)) {
-        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
-          el.style.display = 'none';
+        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
+          el.style.display = 'none !important';
         });
       } else {
-        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
+        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
           el.style.display = '';
         });
       }
@@ -31678,10 +31683,10 @@ function DataTable(_ref) {
   var content = function content() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
       var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
+      var isSelected = !hideColumn.includes(option.name);
       return /*#__PURE__*/React.createElement(Popover.Item, {
-        key: colunqid
-        // selected={!hideColumn.includes(option.name as never)}
-        ,
+        selected: isSelected,
+        key: colunqid,
         onClick: function onClick(e) {
           return handleHideColumnClick(e, option.name);
         }
@@ -31689,6 +31694,7 @@ function DataTable(_ref) {
     }));
   };
   return /*#__PURE__*/React.createElement(GridContainer, {
+    className: "helpdice-ui-table-container",
     direction: "column"
   }, /*#__PURE__*/React.createElement(Grid.Container, {
     style: {

package/esm/popover/popover-item.d.ts

@@ -3,6 +3,7 @@ interface Props {
     line?: boolean;
     showTitle?: boolean;
     disableAutoClose?: boolean;
+    selected?: boolean;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;

package/esm/popover/popover-item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "line", "showTitle", "className", "onClick", "disableAutoClose"];
+var _excluded = ["children", "line", "showTitle", "className", "onClick", "selected", "disableAutoClose"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
 import useTheme from '../use-theme';
@@ -16,6 +16,8 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     onClick = _ref.onClick,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
     _ref$disableAutoClose = _ref.disableAutoClose,
     disableAutoClose = _ref$disableAutoClose === void 0 ? false : _ref$disableAutoClose,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -39,6 +41,9 @@ var PopoverItemComponent = function PopoverItemComponent(_ref) {
     onItemClick(event);
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    style: {
+      backgroundColor: selected ? '#efefef' : ''
+    },
     onClick: clickHandler
   }, props, {
     className: _JSXStyle.dynamic([["190621384", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.5), SCALES.pr(0.75), SCALES.pb(0.5), SCALES.pl(0.75), hasHandler ? 'pointer' : 'default', theme.palette.foreground, theme.palette.border, SCALES.height(0.0625), SCALES.mt(0.35), SCALES.mr(0), SCALES.mb(0.35), SCALES.ml(0), SCALES.width(1, '100%'), SCALES.font(0.925), theme.palette.foreground]]]) + " " + (props && props.className != null && props.className || classes || "")

package/esm/table/data-table.js

@@ -86,11 +86,11 @@ function DataTable(_ref) {
   useEffect(function () {
     cols.forEach(function (col) {
       if (hideColumn.includes(col.name)) {
-        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
-          el.style.display = 'none';
+        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
+          el.style.display = 'none !important';
         });
       } else {
-        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
+        document.querySelectorAll("[data-column=\"".concat(String(col.name).toLowerCase(), "\"]")).forEach(function (el) {
           el.style.display = '';
         });
       }
@@ -151,10 +151,10 @@ function DataTable(_ref) {
   var content = function content() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
       var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
+      var isSelected = !hideColumn.includes(option.name);
       return /*#__PURE__*/React.createElement(Popover.Item, {
-        key: colunqid
-        // selected={!hideColumn.includes(option.name as never)}
-        ,
+        selected: isSelected,
+        key: colunqid,
         onClick: function onClick(e) {
           return handleHideColumnClick(e, option.name);
         }
@@ -162,6 +162,7 @@ function DataTable(_ref) {
     }));
   };
   return /*#__PURE__*/React.createElement(Container, {
+    className: "helpdice-ui-table-container",
     direction: "column"
   }, /*#__PURE__*/React.createElement(Grid.Container, {
     style: {

package/esm/table/table-cell.js

@@ -20,7 +20,7 @@ var TableCell = function TableCell(_ref) {
         color: "".concat(column === null || column === void 0 ? void 0 : column.color),
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
-      "data-column": column.label,
+      "data-column": String(column.label).toLowerCase(),
       key: "row-td-".concat(index, "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);

package/package.json

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