@dreamtree-org/twreact-ui 1.1.2 → 1.1.4

package/dist/index.js

@@ -3366,8 +3366,8 @@ function _defineProperty$4(e, r, t) {
 }
 
 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$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; }
 
 /**
  * Enhanced Select component (debounce removed)
@@ -3390,7 +3390,7 @@ var flattenGroups = function flattenGroups() {
   return groups.reduce(function (acc, g) {
     var groupLabel = g.label;
     g.options.forEach(function (opt) {
-      return acc.push(_objectSpread$b(_objectSpread$b({}, opt), {}, {
+      return acc.push(_objectSpread$a(_objectSpread$a({}, opt), {}, {
         _group: groupLabel
       }));
     });
@@ -3480,7 +3480,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var flatOptions = React.useMemo(function () {
     if (grouped) return flattenGroups(options);
     return options.map(function (opt) {
-      return _objectSpread$b({}, opt);
+      return _objectSpread$a({}, opt);
     });
   }, [options, grouped]);
   var selectedValues = multiSelect ? Array.isArray(value) ? value : [] : value;
@@ -3507,7 +3507,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     }
     if (grouped) {
       return options.map(function (g) {
-        return _objectSpread$b(_objectSpread$b({}, g), {}, {
+        return _objectSpread$a(_objectSpread$a({}, g), {}, {
           options: g.options.filter(function (o) {
             return o.label.toLowerCase().includes(searchTerm.toLowerCase());
           })
@@ -3734,7 +3734,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         className: "text-xs border border-slate-200 p-0.5 rounded-md cursor-pointer hover:bg-gray-100",
         onClick: function onClick() {
           return setCollapsedGroups(function (prev) {
-            return _objectSpread$b(_objectSpread$b({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
+            return _objectSpread$a(_objectSpread$a({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
           });
         }
       }, /*#__PURE__*/React.createElement(ChevronDown, {
@@ -4205,78 +4205,137 @@ function MobileFilters(_ref) {
   })));
 }
 
-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; }
-
-/**
- * Action menu dropdown component for table row actions
- * Uses fixed positioning with smart placement above/below anchor
- */
-var ActionMenu = /*#__PURE__*/React.memo(function ActionMenu(_ref) {
+function ActionMenu(_ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     row = _ref.row,
     onAction = _ref.onAction,
+    onClose = _ref.onClose,
     menuRef = _ref.menuRef,
-    anchorEl = _ref.anchorEl,
-    onClose = _ref.onClose;
+    anchorEl = _ref.anchorEl;
   var _useState = React.useState({
-      top: 0,
       left: 0,
-      visibility: "hidden"
+      top: 0,
+      transformOrigin: "top right",
+      maxHeight: 300,
+      width: 180,
+      opacity: 0
     }),
     _useState2 = _slicedToArray(_useState, 2),
-    pos = _useState2[0],
-    setPos = _useState2[1];
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  var menuWidth = 180;
+  var maxMenuHeight = 320;
+  var minMenuHeight = 80;
+  var margin = 8;
   React.useLayoutEffect(function () {
-    if (!anchorEl || !(menuRef !== null && menuRef !== void 0 && menuRef.current) || typeof window === "undefined") {
-      setPos(function (p) {
-        return _objectSpread$a(_objectSpread$a({}, p), {}, {
-          visibility: "hidden"
-        });
+    computePosition();
+    var handleResize = function handleResize() {
+      window.requestAnimationFrame(function () {
+        return computePosition();
       });
-      return;
-    }
-    var menu = menuRef.current;
+    };
+    var handleScroll = function handleScroll() {
+      onClose === null || onClose === void 0 || onClose();
+    };
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleScroll, true);
+    return function () {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [anchorEl, actions, menuRef, onClose]);
+  var computePosition = function computePosition() {
+    if (!anchorEl || typeof window === "undefined") return;
     var rect = anchorEl.getBoundingClientRect();
-    var menuWidth = menu.offsetWidth || 176;
-    var menuHeight = menu.offsetHeight || menu.scrollHeight || 200;
-    var viewportWidth = window.innerWidth;
-    var viewportHeight = window.innerHeight;
-    var scrollX = window.scrollX || window.pageXOffset || 0;
     var scrollY = window.scrollY || window.pageYOffset || 0;
-    var preferBelowTop = rect.bottom + scrollY + 6;
-    var preferAboveTop = rect.top + scrollY - menuHeight - 6;
+    var scrollX = window.scrollX || window.pageXOffset || 0;
+    var spaceBelow = window.innerHeight - rect.bottom;
+    var spaceAbove = rect.top;
 
-    // Calculate horizontal position
-    var left = rect.right + scrollX - menuWidth;
-    if (left < 8) left = 8;
-    if (left + menuWidth > viewportWidth - 8) {
-      left = Math.max(8, viewportWidth - menuWidth - 8);
+    // allowed max height based on available space
+    var allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, Math.max(spaceBelow - margin, spaceAbove - margin)));
+
+    // decide placement
+    var placement = "bottom";
+    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));
+    }
+
+    // measure content height if available
+    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);
     }
 
-    // Calculate vertical position
+    // compute top based on placement
     var top;
-    if (preferBelowTop + menuHeight <= scrollY + viewportHeight - 8) {
-      top = preferBelowTop;
-    } else if (preferAboveTop >= scrollY + 8) {
-      top = preferAboveTop;
+    if (placement === "top") {
+      top = rect.top + scrollY - measuredMenuHeight - margin;
     } else {
-      top = Math.max(scrollY + 8, Math.min(preferBelowTop, scrollY + viewportHeight - menuHeight - 8));
+      top = rect.bottom + scrollY + margin;
     }
-    setPos({
-      top: top,
+
+    // clamp top to viewport
+    var minTop = margin + scrollY;
+    var maxTop = window.innerHeight + scrollY - measuredMenuHeight - margin;
+    if (top < minTop) top = minTop;
+    if (top > maxTop) top = maxTop;
+
+    // compute left and clamp horizontally (align right edge of menu to anchor right)
+    var left = rect.right + scrollX - menuWidth;
+    if (left < margin) left = margin;
+    if (left + menuWidth > window.innerWidth - margin) {
+      left = Math.max(margin, window.innerWidth - menuWidth - margin);
+    }
+    var transformOrigin = placement === "bottom" ? "top right" : "bottom right";
+
+    // Apply style (fade-in by setting opacity to 1)
+    setStyle({
       left: left,
-      visibility: "visible"
+      top: top,
+      transformOrigin: transformOrigin,
+      maxHeight: allowedMaxHeight,
+      width: menuWidth,
+      opacity: 1
     });
-  }, [anchorEl, menuRef, actions, row]);
-  return /*#__PURE__*/React.createElement("div", {
+  };
+
+  // measure & position before paint
+  React.useLayoutEffect(function () {
+    computePosition();
+    var onScrollOrResize = function onScrollOrResize() {
+      window.requestAnimationFrame(function () {
+        return computePosition();
+      });
+    };
+    window.addEventListener("resize", onScrollOrResize);
+    window.addEventListener("scroll", onScrollOrResize, true);
+    return function () {
+      window.removeEventListener("resize", onScrollOrResize);
+      window.removeEventListener("scroll", onScrollOrResize, true);
+    };
+    // recompute when anchor or actions change (content height may change)
+  }, [anchorEl, actions, menuRef]);
+
+  // Render into body
+  return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
     ref: menuRef,
-    className: "absolute right-0 z-50 bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5",
     style: {
-      visibility: pos.visibility,
-      minWidth: 176
+      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",
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
@@ -4288,18 +4347,25 @@ var ActionMenu = /*#__PURE__*/React.memo(function ActionMenu(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       key: action.name,
       className: "px-1"
-    }, /*#__PURE__*/React.createElement("button", {
+    }, action.render ? /*#__PURE__*/React.createElement("button", {
+      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, row);
+        onClose === null || onClose === void 0 || onClose();
+      }
+    }, action.render(row)) : /*#__PURE__*/React.createElement("button", {
       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, row);
         onClose === null || onClose === void 0 || onClose();
       }
-    }, action.render ? action.render(row) : /*#__PURE__*/React.createElement(React.Fragment, null, action.icon && /*#__PURE__*/React.createElement("span", {
+    }, action.icon && /*#__PURE__*/React.createElement("span", {
       className: "inline-flex"
-    }, action.icon), /*#__PURE__*/React.createElement("span", null, action.label))));
-  })));
-});
+    }, action.icon), /*#__PURE__*/React.createElement("span", null, action.label)));
+  }))), document.body);
+}
 
 /**
  * Desktop table row component
@@ -15867,6 +15933,176 @@ function LocationPicker(_ref) {
   }, iconButton)));
 }
 
+var SpeechToText = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? "en-US" : _ref$lang,
+    _ref$continuous = _ref.continuous,
+    continuous = _ref$continuous === void 0 ? true : _ref$continuous,
+    _ref$interimResults = _ref.interimResults,
+    interimResults = _ref$interimResults === void 0 ? true : _ref$interimResults,
+    _ref$onSpeechComplete = _ref.onSpeechComplete,
+    onSpeechComplete = _ref$onSpeechComplete === void 0 ? function () {} : _ref$onSpeechComplete,
+    _ref$onSpeaking = _ref.onSpeaking,
+    onSpeaking = _ref$onSpeaking === void 0 ? function () {} : _ref$onSpeaking,
+    _ref$onError = _ref.onError,
+    onError = _ref$onError === void 0 ? function () {} : _ref$onError,
+    _ref$onStart = _ref.onStart,
+    onStart = _ref$onStart === void 0 ? function () {} : _ref$onStart,
+    _ref$onStop = _ref.onStop,
+    onStop = _ref$onStop === void 0 ? function () {} : _ref$onStop,
+    _ref$renderButton = _ref.renderButton,
+    renderButton = _ref$renderButton === void 0 ? null : _ref$renderButton,
+    _ref$autoStart = _ref.autoStart,
+    autoStart = _ref$autoStart === void 0 ? false : _ref$autoStart,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var recognitionRef = React.useRef(null);
+  var finalTranscriptRef = React.useRef("");
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    _isListening = _useState2[0],
+    setIsListening = _useState2[1];
+  var _useState3 = React.useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _isSupported = _useState4[0],
+    setIsSupported = _useState4[1];
+  React.useEffect(function () {
+    if (!("webkitSpeechRecognition" in window) && !("SpeechRecognition" in window)) {
+      setIsSupported(false);
+    } else {
+      setIsSupported(true);
+    }
+  }, []);
+  React.useEffect(function () {
+    if (autoStart && _isSupported) {
+      startListening();
+    }
+    return function () {
+      if (recognitionRef.current) {
+        try {
+          recognitionRef.current.onresult = null;
+          recognitionRef.current.onerror = null;
+          recognitionRef.current.onend = null;
+          recognitionRef.current.onstart = null;
+          recognitionRef.current.stop();
+        } catch (e) {}
+      }
+    };
+  }, [autoStart, _isSupported]);
+  function initializeRecognition() {
+    if (recognitionRef.current) return recognitionRef.current;
+    var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognition) {
+      var err = new Error("SpeechRecognition API not available");
+      onError(err);
+      return null;
+    }
+    var recognition = new SpeechRecognition();
+    recognition.continuous = !!continuous;
+    recognition.interimResults = !!interimResults;
+    recognition.lang = lang;
+    recognition.onstart = function () {
+      finalTranscriptRef.current = finalTranscriptRef.current || "";
+      setIsListening(true);
+      onStart();
+    };
+    recognition.onresult = function (event) {
+      var interim = "";
+      var finalPart = "";
+      for (var i = event.resultIndex; i < event.results.length; i++) {
+        var piece = event.results[i][0].transcript;
+        if (event.results[i].isFinal) {
+          finalPart += piece + " ";
+        } else {
+          interim += piece;
+        }
+      }
+      if (interim) {
+        onSpeaking(interim);
+      }
+      if (finalPart) {
+        finalTranscriptRef.current = (finalTranscriptRef.current || "") + finalPart;
+        onSpeechComplete(finalTranscriptRef.current.trim());
+      }
+    };
+    recognition.onerror = function (event) {
+      var err = event && event.error ? new Error(event.error) : new Error("Speech recognition error");
+      onError(err);
+      setIsListening(false);
+    };
+    recognition.onend = function () {
+      setIsListening(false);
+      onStop();
+      onSpeechComplete((finalTranscriptRef.current || "").trim());
+    };
+    recognitionRef.current = recognition;
+    return recognition;
+  }
+  function startListening() {
+    if (!_isSupported) {
+      onError(new Error("Speech recognition not supported in this browser"));
+      return;
+    }
+    try {
+      var rec = initializeRecognition();
+      if (!rec) return;
+      rec.start();
+    } catch (err) {
+      onError(err);
+    }
+  }
+  function stopListening() {
+    if (recognitionRef.current) {
+      try {
+        recognitionRef.current.stop();
+      } catch (e) {}
+    }
+  }
+  function toggleListening() {
+    if (disabled) return;
+    if (_isListening) {
+      stopListening();
+    } else {
+      startListening();
+    }
+  }
+  React.useImperativeHandle(ref, function () {
+    return {
+      start: startListening,
+      stop: stopListening,
+      toggle: toggleListening,
+      isListening: function isListening() {
+        return _isListening;
+      },
+      isSupported: function isSupported() {
+        return _isSupported;
+      },
+      getTranscript: function getTranscript() {
+        return (finalTranscriptRef.current || "").trim();
+      },
+      clearTranscript: function clearTranscript() {
+        finalTranscriptRef.current = "";
+      }
+    };
+  }, [_isListening, _isSupported]);
+  if (renderButton && typeof renderButton === "function") {
+    return renderButton({
+      isListening: _isListening,
+      isSupported: _isSupported,
+      start: startListening,
+      stop: stopListening,
+      toggle: toggleListening,
+      disabled: disabled
+    });
+  }
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-pressed": _isListening,
+    onClick: toggleListening,
+    disabled: disabled || !_isSupported
+  }, _isListening ? "Stop" : "Start");
+});
+
 var _excluded$d = ["items", "collapsed", "onToggle", "className", "logo", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions"];
 
 /**
@@ -16499,7 +16735,7 @@ var Navbar = function Navbar(_ref3) {
         "text-gray-700 hover:bg-gray-50": !item.active
       })
     }, item.label);
-  }))));
+  }))), /*#__PURE__*/React.createElement("h1", null, "asddddddddddddd"));
 };
 Navbar.displayName = "Navbar";
 Navbar.propTypes = {
@@ -26571,6 +26807,7 @@ exports.RoundedTag = RoundedTag;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
+exports.SpeechToText = SpeechToText;
 exports.Stepper = Stepper;
 exports.StoreProvider = StoreProvider;
 exports.Switch = Switch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamtree-org/twreact-ui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "A comprehensive React + Tailwind components library for building modern web apps",
   "author": {
     "name": "Partha Preetham Krishna",