@helpdice/ui 1.3.5 → 1.3.7

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-body.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _JSXStyle from "../styled-jsx.es.js";
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import useTheme from '../use-theme';
 import TableCell from './table-cell';
 import { useTableContext } from './table-context';
 import useClasses from '../use-classes';
 import _ from 'lodash';
 import Placeholder from '../Placeholder';
+import DataTable from './data-table';
 var TableBody = function TableBody(_ref) {
   var data = _ref.data,
     emptyText = _ref.emptyText,
@@ -46,6 +47,9 @@ var TableBody = function TableBody(_ref) {
       newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
     }
     setSelected(newSelected);
+    if (newSelected.length > 0 && onSelected) {
+      onSelected(newSelected);
+    }
   };
 
   // const handleSelectAllClick = (event: { target: { checked: any } }) => {
@@ -58,11 +62,12 @@ var TableBody = function TableBody(_ref) {
   // };
 
   // Push Selected Rows
-  useEffect(function () {
-    if (selected.length > 0 && onSelected) {
-      onSelected(selected);
-    }
-  }, [selected]);
+  // useEffect(() => {
+  //   if (selected.length > 0 && onSelected) {
+  //     onSelected(selected);
+  //   }
+  // }, [selected]);
+
   function renderRow(cols, row, index) {
     var _row$style;
     var urid = _.uniqueId();
@@ -122,6 +127,7 @@ var TableBody = function TableBody(_ref) {
   return /*#__PURE__*/React.createElement("tbody", {
     className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
   }, data.map(function (row, index) {
+    var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
     var qid = _.uniqueId();
     if (row === null || row === undefined) {
       var uid = _.uniqueId();
@@ -142,7 +148,17 @@ var TableBody = function TableBody(_ref) {
       },
       colSpan: columns.length,
       className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-    })));
+    }, /*#__PURE__*/React.createElement(DataTable, {
+      readOnly: true,
+      stickyHeader: false,
+      style: _extends({
+        height: 'auto !important'
+      }, row === null || row === void 0 || (_row$table = row.table) === null || _row$table === void 0 ? void 0 : _row$table.style),
+      menu: (_row$table2 = row.table) === null || _row$table2 === void 0 ? void 0 : _row$table2.menu,
+      rows: (_row$table3 = row.table) === null || _row$table3 === void 0 ? void 0 : _row$table3.rows,
+      heading: (_row$table4 = row.table) === null || _row$table4 === void 0 ? void 0 : _row$table4.heading,
+      cols: (_row$table5 = row.table) === null || _row$table5 === void 0 ? void 0 : _row$table5.cols
+    }))));
 
     // return (
     //   <tr

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.5",
+  "version": "1.3.7",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",