@dreamtree-org/twreact-ui 1.0.80 → 1.0.82

package/dist/index.js

@@ -3365,7 +3365,7 @@ function _defineProperty$4(e, r, t) {
   }) : e[r] = t, e;
 }
 
-var _excluded$l = ["options", "value", "onChange", "placeholder", "label", "error", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel"];
+var _excluded$l = ["options", "value", "onChange", "placeholder", "label", "error", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name"];
 function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
@@ -3441,6 +3441,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     _ref$maxTagCount = _ref.maxTagCount,
     maxTagCount = _ref$maxTagCount === void 0 ? 3 : _ref$maxTagCount,
     renderGroupLabel = _ref.renderGroupLabel,
+    name = _ref.name,
     props = _objectWithoutProperties$1(_ref, _excluded$l);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -3849,7 +3850,24 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     className: cn$1("h-4 w-4 text-gray-400 transition-transform", {
       "rotate-180": isOpen
     })
-  }))), isOpen && /*#__PURE__*/React.createElement("div", {
+  }))), name && (multiSelect ?
+  // For multi-select, create a hidden input for each selected value
+  selectedValues.length > 0 ? selectedValues.map(function (val, idx) {
+    return /*#__PURE__*/React.createElement("input", {
+      key: "".concat(name, "-").concat(idx),
+      type: "hidden",
+      name: name,
+      value: val !== null && val !== void 0 ? val : ""
+    });
+  }) : /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    name: name,
+    value: ""
+  }) : /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    name: name,
+    value: selectedValues !== null && selectedValues !== void 0 ? selectedValues : ""
+  })), isOpen && /*#__PURE__*/React.createElement("div", {
     ref: menuRef,
     className: cn$1("absolute z-50 w-full rounded-md border border-gray-300 bg-white shadow-lg", {
       // if placement is bottom, place it below with margin-top; if top, place it above with bottom full and margin-bottom
@@ -3937,89 +3955,16 @@ var DEFAULT_ACTIONS = [{
   })
 }];
 
-// Memoized ActionMenuPortal to prevent unnecessary re-renders
-var ActionMenuPortal = /*#__PURE__*/React.memo(function ActionMenuPortal(_ref) {
-  var anchorElem = _ref.anchorElem,
-    _ref$actions = _ref.actions,
+// Simple inline action menu component (no portal)
+var ActionMenu = /*#__PURE__*/React.memo(function ActionMenu(_ref) {
+  var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
-    anchorRow = _ref.anchorRow,
+    row = _ref.row,
     onAction = _ref.onAction,
     menuRef = _ref.menuRef;
-  var _useState = React.useState({
-      left: 0,
-      top: 0,
-      transformOrigin: "top right",
-      maxHeight: 300,
-      width: 180,
-      opacity: 0
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    style = _useState2[0],
-    setStyle = _useState2[1];
-  var menuWidth = 180;
-  var maxMenuHeight = 320;
-  var margin = 8;
-  var minMenuHeight = 80;
-  React.useLayoutEffect(function () {
-    if (!anchorElem) return;
-    var computePosition = function computePosition() {
-      var rect = anchorElem.getBoundingClientRect();
-      var scrollY = window.scrollY || window.pageYOffset;
-      var scrollX = window.scrollX || window.pageXOffset;
-      var spaceBelow = window.innerHeight - rect.bottom;
-      var spaceAbove = rect.top;
-      var placement = "bottom";
-      var allowedMaxHeight;
-      if (spaceBelow < 160 && spaceAbove > spaceBelow) {
-        placement = "top";
-        allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceAbove - margin));
-      } else {
-        allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, spaceBelow - margin));
-      }
-      var measuredMenuHeight = allowedMaxHeight;
-      var menuEl = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current;
-      if (menuEl) {
-        var contentHeight = menuEl.scrollHeight || menuEl.offsetHeight || allowedMaxHeight;
-        measuredMenuHeight = Math.min(contentHeight, allowedMaxHeight);
-      }
-      var top = placement === "top" ? rect.top + scrollY - measuredMenuHeight - margin : rect.bottom + scrollY + margin;
-      var minTop = margin + scrollY;
-      var maxTop = window.innerHeight + scrollY - measuredMenuHeight - margin;
-      top = Math.max(minTop, Math.min(top, maxTop));
-      var left = rect.right + scrollX - menuWidth;
-      left = Math.max(margin, Math.min(left, window.innerWidth - menuWidth - margin));
-      setStyle({
-        left: left,
-        top: top,
-        transformOrigin: placement === "bottom" ? "top right" : "bottom right",
-        maxHeight: allowedMaxHeight,
-        width: menuWidth,
-        opacity: 1
-      });
-    };
-    computePosition();
-    var onScrollOrResize = function onScrollOrResize() {
-      window.requestAnimationFrame(computePosition);
-    };
-    window.addEventListener("resize", onScrollOrResize);
-    window.addEventListener("scroll", onScrollOrResize, true);
-    return function () {
-      window.removeEventListener("resize", onScrollOrResize);
-      window.removeEventListener("scroll", onScrollOrResize, true);
-    };
-  }, [anchorElem, menuRef]);
   return /*#__PURE__*/React.createElement("div", {
     ref: menuRef,
-    style: {
-      position: "absolute",
-      top: style.top,
-      left: style.left,
-      width: style.width,
-      maxHeight: style.maxHeight,
-      transformOrigin: style.transformOrigin,
-      opacity: style.opacity
-    },
-    className: "absolute z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto transition-opacity duration-150 ease-out",
+    className: "absolute right-0 top-full mt-1 z-50 w-44 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto max-h-64",
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
@@ -4035,9 +3980,9 @@ var ActionMenuPortal = /*#__PURE__*/React.memo(function ActionMenuPortal(_ref) {
       className: "w-full text-left px-3 py-2 text-sm hover:bg-gray-100 flex items-center gap-2 rounded-md",
       onClick: function onClick(e) {
         e.stopPropagation();
-        onAction === null || onAction === void 0 || onAction(action, anchorRow);
+        onAction === null || onAction === void 0 || onAction(action, row);
       }
-    }, action.render ? action.render(anchorRow) : /*#__PURE__*/React.createElement(React.Fragment, null, action.icon && /*#__PURE__*/React.createElement("span", {
+    }, action.render ? action.render(row) : /*#__PURE__*/React.createElement(React.Fragment, null, action.icon && /*#__PURE__*/React.createElement("span", {
       className: "inline-flex"
     }, action.icon), /*#__PURE__*/React.createElement("span", null, action.label))));
   })));
@@ -4125,85 +4070,85 @@ var Table = function Table(_ref2) {
     pageNumber = _ref2.pageNumber,
     props = _objectWithoutProperties$1(_ref2, _excluded$k);
   // Core state
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isMobileView = _useState4[0],
-    setIsMobileView = _useState4[1];
-  var _useState5 = React.useState(function () {
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMobileView = _useState2[0],
+    setIsMobileView = _useState2[1];
+  var _useState3 = React.useState(function () {
       return Array.isArray(data) ? data : [];
     }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tableData = _useState4[0],
+    setTableData = _useState4[1];
+  var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    tableData = _useState6[0],
-    setTableData = _useState6[1];
-  var _useState7 = React.useState(false),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var _useState7 = React.useState(pageSize),
     _useState8 = _slicedToArray(_useState7, 2),
-    loading = _useState8[0],
-    setLoading = _useState8[1];
-  var _useState9 = React.useState(pageSize),
-    _useState0 = _slicedToArray(_useState9, 2),
-    limit = _useState0[0],
-    setLimit = _useState0[1];
-  var _useState1 = React.useState(function () {
+    limit = _useState8[0],
+    setLimit = _useState8[1];
+  var _useState9 = React.useState(function () {
       return typeof pageNumber === "number" ? pageNumber : 1;
     }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    currentPage = _useState10[0],
-    setCurrentPage = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    currentPage = _useState0[0],
+    setCurrentPage = _useState0[1];
 
   // Column state
-  var _useState11 = React.useState(function () {
+  var _useState1 = React.useState(function () {
       return Array.isArray(columns) ? columns.map(function (c) {
         return _objectSpread$9({}, c);
       }) : [];
     }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    columnsState = _useState10[0],
+    setColumnsState = _useState10[1];
+  var _useState11 = React.useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    columnsState = _useState12[0],
-    setColumnsState = _useState12[1];
-  var _useState13 = React.useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    showColumnMenu = _useState14[0],
-    setShowColumnMenu = _useState14[1];
+    showColumnMenu = _useState12[0],
+    setShowColumnMenu = _useState12[1];
 
   // Sorting/filtering state
-  var _useState15 = React.useState({
+  var _useState13 = React.useState({
       key: null,
       direction: "asc"
     }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    sortConfig = _useState14[0],
+    setSortConfig = _useState14[1];
+  var _useState15 = React.useState({}),
     _useState16 = _slicedToArray(_useState15, 2),
-    sortConfig = _useState16[0],
-    setSortConfig = _useState16[1];
-  var _useState17 = React.useState({}),
+    filters = _useState16[0],
+    setFilters = _useState16[1];
+  var _useState17 = React.useState(""),
     _useState18 = _slicedToArray(_useState17, 2),
-    filters = _useState18[0],
-    setFilters = _useState18[1];
-  var _useState19 = React.useState(""),
-    _useState20 = _slicedToArray(_useState19, 2),
-    searchInput = _useState20[0],
-    setSearchInput = _useState20[1];
+    searchInput = _useState18[0],
+    setSearchInput = _useState18[1];
 
   // Selection/expansion state
-  var _useState21 = React.useState(function () {
+  var _useState19 = React.useState(function () {
       return new Set();
     }),
-    _useState22 = _slicedToArray(_useState21, 2),
-    selectedRows = _useState22[0],
-    setSelectedRows = _useState22[1];
-  var _useState23 = React.useState(function () {
+    _useState20 = _slicedToArray(_useState19, 2),
+    selectedRows = _useState20[0],
+    setSelectedRows = _useState20[1];
+  var _useState21 = React.useState(function () {
       return new Set();
     }),
-    _useState24 = _slicedToArray(_useState23, 2),
-    expandedRows = _useState24[0],
-    setExpandedRows = _useState24[1];
+    _useState22 = _slicedToArray(_useState21, 2),
+    expandedRows = _useState22[0],
+    setExpandedRows = _useState22[1];
 
   // Action menu state
-  var _useState25 = React.useState(null),
+  var _useState23 = React.useState(null),
+    _useState24 = _slicedToArray(_useState23, 2),
+    actionAnchor = _useState24[0],
+    setActionAnchor = _useState24[1];
+  var _useState25 = React.useState(false),
     _useState26 = _slicedToArray(_useState25, 2),
-    actionAnchor = _useState26[0],
-    setActionAnchor = _useState26[1];
-  var _useState27 = React.useState(false),
-    _useState28 = _slicedToArray(_useState27, 2),
-    showMobileFilters = _useState28[0],
-    setShowMobileFilters = _useState28[1];
+    showMobileFilters = _useState26[0],
+    setShowMobileFilters = _useState26[1];
 
   // Refs
   var columnMenuRef = React.useRef(null);
@@ -4544,15 +4489,14 @@ var Table = function Table(_ref2) {
       title: "Actions"
     }, /*#__PURE__*/React.createElement(MoreVertical, {
       className: "h-4 w-4"
-    })), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(ActionMenuPortal, {
-      anchorElem: actionAnchor.elem,
-      anchorRow: actionAnchor.row,
+    })), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/React.createElement(ActionMenu, {
       actions: actionsToUse,
+      row: row,
       onAction: function onAction(action) {
         return handleOnAction(action, row);
       },
       menuRef: actionMenuRef
-    }), document.body))), /*#__PURE__*/React.createElement("div", {
+    }))), /*#__PURE__*/React.createElement("div", {
       className: "p-4"
     }, visibleColumns.map(function (column, colIndex) {
       var extraCellClass = typeof cellClass === "function" ? cellClass({
@@ -4934,7 +4878,7 @@ var Table = function Table(_ref2) {
         return e.stopPropagation();
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: "inline-block"
+      className: "relative inline-block"
     }, /*#__PURE__*/React.createElement("button", {
       onClick: function onClick(e) {
         return toggleActions(e, actionCellKey, row);
@@ -4944,15 +4888,14 @@ var Table = function Table(_ref2) {
       title: "Actions"
     }, /*#__PURE__*/React.createElement(MoreVertical, {
       className: "h-4 w-4"
-    }))), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(ActionMenuPortal, {
-      anchorElem: actionAnchor.elem,
-      anchorRow: actionAnchor.row,
+    })), (actionAnchor === null || actionAnchor === void 0 ? void 0 : actionAnchor.key) === actionCellKey && /*#__PURE__*/React.createElement(ActionMenu, {
       actions: actionsToUse,
+      row: row,
       onAction: function onAction(action) {
         return handleOnAction(action, row);
       },
       menuRef: actionMenuRef
-    }), document.body))), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    })))), hasDetails && isExpanded && DetailsComponent && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
       colSpan: visibleCount,
       className: "px-6 py-4 bg-gray-50"
     }, /*#__PURE__*/React.createElement(DetailsComponent, {