@dreamtree-org/twreact-ui 1.1.2 → 1.1.4

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, createElement, useId, useRef, useState, useEffect, useImperativeHandle, useMemo, memo, useLayoutEffect, useCallback, createContext, useContext, cloneElement, PureComponent } from 'react';
+import React__default, { forwardRef, createElement, useId, useRef, useState, useEffect, useImperativeHandle, useMemo, useLayoutEffect, useCallback, createContext, useContext, cloneElement, PureComponent } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 
 function _extends() {
@@ -3346,8 +3346,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)
@@ -3370,7 +3370,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
       }));
     });
@@ -3460,7 +3460,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
   var flatOptions = 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;
@@ -3487,7 +3487,7 @@ var Select = /*#__PURE__*/React__default.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());
           })
@@ -3714,7 +3714,7 @@ var Select = /*#__PURE__*/React__default.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__default.createElement(ChevronDown, {
@@ -4185,78 +4185,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__*/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 = 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;
   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__default.createElement("div", {
+  };
+
+  // measure & position before paint
+  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__*/createPortal(/*#__PURE__*/React__default.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();
     }
@@ -4268,18 +4327,25 @@ var ActionMenu = /*#__PURE__*/memo(function ActionMenu(_ref) {
     return /*#__PURE__*/React__default.createElement("div", {
       key: action.name,
       className: "px-1"
-    }, /*#__PURE__*/React__default.createElement("button", {
+    }, action.render ? /*#__PURE__*/React__default.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__default.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__default.createElement(React__default.Fragment, null, action.icon && /*#__PURE__*/React__default.createElement("span", {
+    }, action.icon && /*#__PURE__*/React__default.createElement("span", {
       className: "inline-flex"
-    }, action.icon), /*#__PURE__*/React__default.createElement("span", null, action.label))));
-  })));
-});
+    }, action.icon), /*#__PURE__*/React__default.createElement("span", null, action.label)));
+  }))), document.body);
+}
 
 /**
  * Desktop table row component
@@ -15847,6 +15913,176 @@ function LocationPicker(_ref) {
   }, iconButton)));
 }
 
+var SpeechToText = /*#__PURE__*/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 = useRef(null);
+  var finalTranscriptRef = useRef("");
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    _isListening = _useState2[0],
+    setIsListening = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _isSupported = _useState4[0],
+    setIsSupported = _useState4[1];
+  useEffect(function () {
+    if (!("webkitSpeechRecognition" in window) && !("SpeechRecognition" in window)) {
+      setIsSupported(false);
+    } else {
+      setIsSupported(true);
+    }
+  }, []);
+  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();
+    }
+  }
+  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__default.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"];
 
 /**
@@ -16479,7 +16715,7 @@ var Navbar = function Navbar(_ref3) {
         "text-gray-700 hover:bg-gray-50": !item.active
       })
     }, item.label);
-  }))));
+  }))), /*#__PURE__*/React__default.createElement("h1", null, "asddddddddddddd"));
 };
 Navbar.displayName = "Navbar";
 Navbar.propTypes = {
@@ -26519,4 +26755,4 @@ var StoreProvider = function StoreProvider(_ref) {
   }, children));
 };
 
-export { Accordion, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Carousel, Checkbox, ColorPicker, Condition, DatePicker, DateRangePicker, Dialog, EmitterClass as Emitter, FileUpload, FootNav, Form, Helpers, Input, Loader, LocationPicker, Navbar, Pagination, PriceRangePicker, ProgressBar, Radio, Rate, RoundedTag, Select, Sidebar, Skeleton, Stepper, StoreProvider, Switch, Table, Tabs, ThemeProvider, ThreeDotPopoverSimple as ThreeDotPopover, Toast, ToastContainer, Tooltip, cn$1 as cn, useApi, useMixins, useTheme, useToast };
+export { Accordion, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Carousel, Checkbox, ColorPicker, Condition, DatePicker, DateRangePicker, Dialog, EmitterClass as Emitter, FileUpload, FootNav, Form, Helpers, Input, Loader, LocationPicker, Navbar, Pagination, PriceRangePicker, ProgressBar, Radio, Rate, RoundedTag, Select, Sidebar, Skeleton, SpeechToText, Stepper, StoreProvider, Switch, Table, Tabs, ThemeProvider, ThreeDotPopoverSimple as ThreeDotPopover, Toast, ToastContainer, Tooltip, cn$1 as cn, useApi, useMixins, useTheme, useToast };