@helpdice/ui 1.5.1 → 1.5.2

package/dist/table/table-head.d.ts

@@ -3,9 +3,7 @@ import { TableAbstractColumn, TableDataItemBase } from './table-types';
 interface Props<TableDataItem extends TableDataItemBase> {
     width: number;
     columns: Array<TableAbstractColumn<TableDataItem>>;
-    onFilters?: (filters: any) => void;
     stickyHeader: boolean;
-    showFilters?: boolean;
     className?: string;
 }
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;

package/dist/table/table.d.ts

@@ -9,7 +9,6 @@ interface Props<TableDataItem extends TableDataItemBase> {
     onRow?: TableOnRowClick<TableDataItem>;
     onCell?: TableOnCellClick<TableDataItem>;
     onChange?: TableOnChange<TableDataItem>;
-    onFilters?: (filters: any) => void;
     onSelected?: (selected: any[]) => void;
     onPageChange?: (page: number, start: number, end: number) => void;
     className?: string;

package/esm/table/data-table.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { memo, useEffect, useState } from 'react';
@@ -12,6 +13,8 @@ import Button from '../button';
 import Tooltip from '../tooltip';
 import Table from './table';
 import Popover from '../popover';
+import Input from '../input';
+import Select from '../select';
 function DataTable(_ref) {
   var _ref$cols = _ref.cols,
     cols = _ref$cols === void 0 ? [] : _ref$cols,
@@ -34,7 +37,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,
@@ -68,31 +71,30 @@ function DataTable(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filters = _useState4[0],
+    setFilters = _useState4[1];
   // const [table_filters] = useDebounce(filters, 500);
   // const open = Boolean(anchorEl);
   // const handleMenuOpen = (event: any) => {
   //     setAnchorEl(event.currentTarget);
   // };
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hideColumn = _useState4[0],
-    setHideColumn = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hideColumn = _useState6[0],
+    setHideColumn = _useState6[1];
   // const handleMenuClose = () => {
   //     setAnchorEl(null);
   // };
 
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    openFilter = _useState6[0],
-    setOpenFilter = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    openFilter = _useState8[0],
+    setOpenFilter = _useState8[1];
   function handleShowFilter() {
     return setOpenFilter(!openFilter);
   }
-  useEffect(function () {
-    if (selected.length > 0 && onSelected) {
-      onSelected(selected);
-    }
-  }, [selected]);
   useEffect(function () {
     cols.forEach(function (col) {
       var _String;
@@ -164,11 +166,86 @@ function DataTable(_ref) {
     var dataName = (_String3 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String3 === void 0 ? void 0 : _String3.replace(' ', '_').toLowerCase();
     return !hideColumn.includes(dataName);
   });
+  var handleFilterChange = function handleFilterChange(name, value) {
+    setFilters(function (prevFilters) {
+      var updatedFilters = _extends({}, prevFilters, _defineProperty({}, name, value));
+      if (onFilters) {
+        onFilters(updatedFilters);
+      }
+      return updatedFilters;
+    });
+  };
+  var generateFilterInputs = function generateFilterInputs() {
+    return COLUMNS.map(function (col) {
+      var _String4, _filters$filterName;
+      var Header = col.label,
+        accessor = col.filter,
+        options = col.options;
+      var filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
+      var 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.createElement("div", {
+        style: {
+          padding: '3px'
+        },
+        "data-column": Header,
+        key: unq_accessor
+      }, accessor === 'fixed' && /*#__PURE__*/React.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.createElement(Select.Option, {
+        value: "All"
+      }, "All ", Header), options ? options.map(function (option) {
+        return /*#__PURE__*/React.createElement(Select.Option, {
+          value: option.value
+        }, option.name);
+      }) : null), accessor === 'date' && /*#__PURE__*/React.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.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
+      }));
+    });
+  };
   var content = function content() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
-      var _String4;
+      var _String5;
       var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
-      var dataName = (_String4 = String(option.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
+      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,
@@ -215,7 +292,7 @@ function DataTable(_ref) {
     },
     justify: "flex-end",
     alignContent: "center"
-  }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, onSelected && onSelected, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
+  }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, selected.length > 0 && onSelected ? onSelected(selected) : null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
     text: "Edit Selected",
     placement: "bottom",
     font: 0.8,
@@ -263,7 +340,7 @@ 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(Tooltip, {
     text: "Filters",
     placement: "bottomEnd",
     font: 0.8,
@@ -305,7 +382,7 @@ function DataTable(_ref) {
       display: 'flex',
       flexDirection: sideMenu ? 'row' : 'column'
     }
-  }, sideMenu && /*#__PURE__*/React.createElement(Container, {
+  }, sideMenu || openFilter ? /*#__PURE__*/React.createElement(Container, {
     direction: "column",
     style: {
       width: '15rem',
@@ -313,7 +390,7 @@ function DataTable(_ref) {
       border: '1px solid #cfcfcf',
       borderRadius: '5px'
     }
-  }, sideMenu), /*#__PURE__*/React.createElement("div", {
+  }, openFilter ? generateFilterInputs() : sideMenu) : null, /*#__PURE__*/React.createElement("div", {
     onDragOver: onDragOver,
     onDragEnter: onDragEnter,
     onDragLeave: onDragLeave,
@@ -348,9 +425,6 @@ function DataTable(_ref) {
     onSelected: function onSelected(selected) {
       return setSelected(selected);
     },
-    onFilters: function onFilters(filters) {
-      return _onFilters && _onFilters(filters);
-    },
     data: rows,
     style: {
       borderCollapse: 'collapse',

package/esm/table/table-head.d.ts

@@ -3,9 +3,7 @@ import { TableAbstractColumn, TableDataItemBase } from './table-types';
 interface Props<TableDataItem extends TableDataItemBase> {
     width: number;
     columns: Array<TableAbstractColumn<TableDataItem>>;
-    onFilters?: (filters: any) => void;
     stickyHeader: boolean;
-    showFilters?: boolean;
     className?: string;
 }
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;

package/esm/table/table-head.js

@@ -1,12 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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, { useMemo } from 'react';
 import useTheme from '../use-theme';
-import Input from '../input';
-import _ from 'lodash';
-import Select from '../select';
 var makeColgroup = function makeColgroup(width, columns) {
   var unsetWidthCount = columns.filter(function (c) {
     return !c.width;
@@ -25,15 +20,9 @@ var makeColgroup = function makeColgroup(width, columns) {
 };
 var TableHead = function TableHead(props) {
   var theme = useTheme();
-  var _React$useState = React.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 = useMemo(function () {
     return columns.find(function (item) {
@@ -44,88 +33,6 @@ var TableHead = function TableHead(props) {
     if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
     return makeColgroup(width, columns);
   }, [isScalableWidth, width]);
-  var handleFilterChange = function handleFilterChange(name, value) {
-    setFilters(function (prevFilters) {
-      var updatedFilters = _extends({}, prevFilters, _defineProperty({}, name, value));
-      if (onFilters) {
-        onFilters(updatedFilters);
-      }
-      return updatedFilters;
-    });
-  };
-
-  // const 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();
-      var 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.createElement("th", {
-        style: {
-          padding: '3px'
-        },
-        "data-column": Header,
-        key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React.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.createElement(Select.Option, {
-        value: "All"
-      }, "All ", Header), options ? options.map(function (option) {
-        return /*#__PURE__*/React.createElement(Select.Option, {
-          value: option.value
-        }, option.name);
-      }) : null), accessor === 'date' && /*#__PURE__*/React.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.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.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.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.createElement("tr", {
@@ -134,8 +41,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 _String2;
-    var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
+    var _String;
+    var dataName = (_String = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("th", {
       style: _extends({
         // textAlign: `${column?.align} !important`,
@@ -158,9 +65,7 @@ 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)));
-  })), showFilters && /*#__PURE__*/React.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.createElement(_JSXStyle, {
+  }))), /*#__PURE__*/React.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;}")));

package/esm/table/table.d.ts

@@ -9,7 +9,6 @@ interface Props<TableDataItem extends TableDataItemBase> {
     onRow?: TableOnRowClick<TableDataItem>;
     onCell?: TableOnCellClick<TableDataItem>;
     onChange?: TableOnChange<TableDataItem>;
-    onFilters?: (filters: any) => void;
     onSelected?: (selected: any[]) => void;
     onPageChange?: (page: number, start: number, end: number) => void;
     className?: string;

package/esm/table/table.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["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"];
+var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
@@ -44,7 +44,6 @@ function TableComponent(tableProps) {
     onRow = _ref.onRow,
     onCell = _ref.onCell,
     onChange = _ref.onChange,
-    onFilters = _ref.onFilters,
     onPageChange = _ref.onPageChange,
     _ref$showFilters = _ref.showFilters,
     showFilters = _ref$showFilters === void 0 ? false : _ref$showFilters,
@@ -111,15 +110,6 @@ function TableComponent(tableProps) {
       endIndex: endIndex
     };
   };
-  var _useState5 = useState({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    filters = _useState6[0],
-    setFilters = _useState6[1];
-  useEffect(function () {
-    if (onFilters) {
-      onFilters(filters);
-    }
-  }, [filters]);
   return /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("table", _extends({
@@ -129,10 +119,6 @@ function TableComponent(tableProps) {
   }), /*#__PURE__*/React.createElement(TableHead, {
     stickyHeader: stickyHeader,
     columns: columns,
-    onFilters: function onFilters(filters) {
-      return setFilters(filters);
-    },
-    showFilters: showFilters,
     width: width
   }), /*#__PURE__*/React.createElement(TableBody, {
     data: data,

package/package.json

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