@helpdice/ui 1.1.8 → 1.2.0

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

@@ -5,6 +5,7 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     label?: string;
     filter?: string;
     width?: number;
+    options?: any[];
     className?: string;
     render?: TableColumnRender<TableDataItem>;
 };

package/esm/table/table-body.js

@@ -26,9 +26,10 @@ var TableBody = function TableBody(_ref) {
     setSelected = _useState2[1];
   var _useTableContext = useTableContext(),
     columns = _useTableContext.columns;
-  var rowClickHandler = function rowClickHandler(row, index) {
-    onRow && onRow(row, index);
-  };
+  // const rowClickHandler = (row: TableDataItem, index: number) => {
+  //   onRow && onRow(row, index)
+  // }
+
   var handleClick = function handleClick(_event, id) {
     if (readOnly) {
       return true;
@@ -72,15 +73,11 @@ var TableBody = function TableBody(_ref) {
     delete rw.table;
     delete rw.style;
     delete rw.onDragStart;
-    var frow = Object.fromEntries(Object.entries(row).filter(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        ky = _ref3[0],
-        _ = _ref3[1];
-      return ky !== '_id' && cols.map(function (col) {
-        return col.id;
-      }).includes(ky);
-    }));
-    console.log(frow);
+    // console.log(row);
+    // const frow = Object.fromEntries(
+    //   Object.entries(row).filter(([ky, _]) => ky !== '_id' && cols.map((col: any) => col.id).includes(ky))
+    // ) as unknown as TableDataItem
+    // console.log(frow);
     var isRowSelected = selected.indexOf(row) !== -1;
     return /*#__PURE__*/React.createElement("tr", {
       draggable: rowDraggable,
@@ -98,8 +95,8 @@ var TableBody = function TableBody(_ref) {
       }, rowStyle),
       onClick: function onClick(e) {
         if (!rowDraggable) {
-          if (rowClickHandler) {
-            rowClickHandler(row, index);
+          if (onRow) {
+            onRow(row, index);
           } else {
             handleClick(e, row);
           }
@@ -107,7 +104,7 @@ var TableBody = function TableBody(_ref) {
       }
     }, /*#__PURE__*/React.createElement(TableCell, {
       columns: cols,
-      row: frow,
+      row: rw,
       rowIndex: index,
       emptyText: emptyText,
       onCellClick: onCell

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

@@ -5,6 +5,7 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     label?: string;
     filter?: string;
     width?: number;
+    options?: any[];
     className?: string;
     render?: TableColumnRender<TableDataItem>;
 };

package/esm/table/table-column.js

@@ -10,6 +10,7 @@ var TableColumn = function TableColumn(columnProps) {
     label = _ref.label,
     width = _ref.width,
     filter = _ref.filter,
+    options = _ref.options,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     renderHandler = _ref.render;
@@ -23,12 +24,13 @@ var TableColumn = function TableColumn(columnProps) {
     updateColumn({
       label: children || label,
       filter: filter,
+      options: options,
       prop: safeProp,
       width: width,
       className: className,
       renderHandler: function renderHandler() {}
     });
-  }, [children, filter, label, prop, width, className, renderHandler]);
+  }, [children, filter, options, label, prop, width, className, renderHandler]);
   return null;
 };
 TableColumn.displayName = 'TableColumn';

package/esm/table/table-head.js

@@ -6,6 +6,7 @@ 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;
@@ -41,10 +42,7 @@ var TableHead = function TableHead(props) {
     if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
     return makeColgroup(width, columns);
   }, [isScalableWidth, width]);
-  var handleFilterChange = function handleFilterChange(e) {
-    var _e$target = e.target,
-      name = _e$target.name,
-      value = _e$target.value;
+  var handleFilterChange = function handleFilterChange(name, value) {
     setFilters(function (prevFilters) {
       var updatedFilters = _extends({}, prevFilters, _defineProperty({}, name, value));
       // Call onFiltersChange to propagate filter changes to the parent
@@ -63,16 +61,19 @@ var TableHead = function TableHead(props) {
       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 (accessor === 'fixed') {
+        var _filters$filterName;
         // Dropdown filter for categorical data (category, status)
-        return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
+        return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Select, {
           key: unq_accessor,
           name: filterName,
-          value: filters[filterName],
-          onChange: handleFilterChange
-        }, /*#__PURE__*/React.createElement("option", {
-          value: ""
+          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("option", {
+          return /*#__PURE__*/React.createElement(Select.Option, {
             value: option.value
           }, option.name);
         }) : null));
@@ -81,30 +82,35 @@ var TableHead = function TableHead(props) {
         // Date filter
         return /*#__PURE__*/React.createElement("th", {
           key: unq_accessor
-        }, /*#__PURE__*/React.createElement("input", {
-          type: "date",
+        }, /*#__PURE__*/React.createElement(Input, {
+          htmlType: "date",
+          name: filterName,
+          value: filters[filterName],
+          onChange: function onChange(e) {
+            return handleFilterChange(filterName, e.target.value);
+          }
+        }));
+      }
+      if (accessor === 'search') {
+        // Text search filter
+        return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
+          id: "filter-search-".concat(filterName),
+          htmlType: "text"
+          // ref={filterRefs.current[filterName]} // Dynamically set ref}
+          ,
           name: filterName,
+          style: {
+            height: 30,
+            minWidth: 160
+          },
           value: filters[filterName],
-          onChange: handleFilterChange
+          onChange: function onChange(e) {
+            return handleFilterChange(filterName, e.target.value);
+          },
+          placeholder: "Search...",
+          fullWidth: true
         }));
       }
-
-      // Text search filter for other fields (like name)
-      return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
-        id: "filter-search-".concat(filterName),
-        htmlType: "text"
-        // ref={filterRefs.current[filterName]} // Dynamically set ref}
-        ,
-        name: filterName,
-        style: {
-          height: 30,
-          minWidth: 160
-        },
-        value: filters[filterName],
-        onChange: handleFilterChange,
-        placeholder: "Search...",
-        fullWidth: true
-      }));
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {

package/esm/utils/use-hd-ui-context.js

@@ -1,5 +1,3 @@
-'use client';
-
 import React from 'react';
 export var defaultToastLayout = {
   padding: '12px 16px',

package/package.json

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