@dreamtree-org/twreact-ui 1.3.9 → 1.3.10

package/dist/esm/components/navigation/Sidebar.js

@@ -6,6 +6,8 @@ import { cn } from '../../utils/cn.js';
 import { ChevronRight, ChevronLeft, ChevronDown } from 'lucide-react';
 import Tooltip from '../core/Tooltip.js';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { useFocusTrap } from '../../hooks/useFocusTrap.js';
+import { useScrollLock } from '../../hooks/useScrollLock.js';
 
 var _excluded = ["items", "collapsed", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange"];
 // useLayoutEffect warns during SSR; fall back to useEffect on the server.
@@ -15,13 +17,6 @@ var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect
 var isModifiedClick = function isModifiedClick(e) {
   return Boolean(e && (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || typeof e.button === "number" && e.button !== 0));
 };
-// Focus trap for the mobile drawer (same selector as feedback/Dialog).
-var FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
-var getFocusable = function getFocusable(root) {
-  return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
-    return el.getAttribute("aria-hidden") !== "true";
-  }) : [];
-};
 var hasChildItems = function hasChildItems(item) {
   return Array.isArray(item.children) && item.children.length > 0;
 };
@@ -171,12 +166,8 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var setIsMobileOpenRef = useLatestRef(setIsMobileOpen);
   var mobileOpen = isMobileOpen !== null && isMobileOpen !== void 0 ? isMobileOpen : false;
   var effectiveCollapsed = mobileOpen ? false : collapsed;
-  useEffect(function () {
-    if (mobileOpen) document.body.style.overflow = "hidden";else document.body.style.overflow = "";
-    return function () {
-      document.body.style.overflow = "";
-    };
-  }, [mobileOpen]);
+  // Ref-counted, so a Dialog/Drawer stacked on top never unlocks the page early.
+  useScrollLock(mobileOpen);
   // The drawer stays mounted (it slides in/out), so when it is shut it must
   // leave the tab order and the a11y tree. `inert` is set imperatively: React
   // 18 does not know the attribute and React 19 treats `inert=""` as false.
@@ -185,54 +176,15 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     if (!drawer) return;
     if (mobileOpen) drawer.removeAttribute("inert");else drawer.setAttribute("inert", "");
   }, [mobileOpen]);
-  // Open drawer = modal dialog: initial focus inside, Tab trapped, Escape
-  // closes, focus returns to the opener on close (WAI-ARIA APG dialog).
-  useEffect(function () {
-    var _ref2, _ref2$focus, _focusables$;
-    if (!mobileOpen) return undefined;
-    var drawer = drawerRef.current;
-    var previouslyFocused = document.activeElement;
-    var focusables = getFocusable(drawer);
-    (_ref2 = (_focusables$ = focusables[0]) !== null && _focusables$ !== void 0 ? _focusables$ : drawer) === null || _ref2 === void 0 || (_ref2$focus = _ref2.focus) === null || _ref2$focus === void 0 || _ref2$focus.call(_ref2);
-    var handleKeyDown = function handleKeyDown(e) {
-      if (e.key === "Escape") {
-        var _setIsMobileOpenRef$c;
-        (_setIsMobileOpenRef$c = setIsMobileOpenRef.current) === null || _setIsMobileOpenRef$c === void 0 || _setIsMobileOpenRef$c.call(setIsMobileOpenRef, false);
-        return;
-      }
-      if (e.key !== "Tab" || !drawer) return;
-      // md+ viewports hide the drawer (md:hidden): nothing to trap.
-      if (window.getComputedStyle(drawer).display === "none") return;
-      var nodes = getFocusable(drawer);
-      if (nodes.length === 0) {
-        e.preventDefault();
-        drawer.focus();
-        return;
-      }
-      var first = nodes[0];
-      var last = nodes[nodes.length - 1];
-      var active = document.activeElement;
-      var outside = !drawer.contains(active) || active === drawer;
-      if (e.shiftKey && (active === first || outside)) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && (active === last || outside)) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return function () {
-      document.removeEventListener("keydown", handleKeyDown);
-      // Restore focus only if it is still in the drawer (or was dropped to
-      // <body> when the drawer went inert) — never steal it from elsewhere.
-      var active = document.activeElement;
-      var focusLost = !active || active === document.body || (drawer === null || drawer === void 0 ? void 0 : drawer.contains(active));
-      if (focusLost && previouslyFocused && previouslyFocused !== document.body && typeof previouslyFocused.focus === "function" && document.contains(previouslyFocused)) {
-        previouslyFocused.focus();
-      }
-    };
-  }, [mobileOpen, setIsMobileOpenRef]);
+  // Open drawer = modal dialog: initial focus inside, Tab trapped (skipped
+  // while md:hidden hides it), Escape closes, focus returns to the opener.
+  useFocusTrap(drawerRef, {
+    active: mobileOpen,
+    onEscape: function onEscape() {
+      var _setIsMobileOpenRef$c;
+      return (_setIsMobileOpenRef$c = setIsMobileOpenRef.current) === null || _setIsMobileOpenRef$c === void 0 ? void 0 : _setIsMobileOpenRef$c.call(setIsMobileOpenRef, false);
+    }
+  });
   var closeMobile = function closeMobile() {
     if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);
   };

package/dist/esm/components/utility/Avatar.js

@@ -1,5 +1,5 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { cn } from '../../utils/cn.js';
@@ -17,6 +17,22 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     status = _ref.status,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
+  // State-driven fallback: a broken image swaps to initials / icon without
+  // touching the DOM directly. Reset whenever `src` changes
+  // (adjust-during-render pattern).
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    imgFailed = _React$useState2[0],
+    setImgFailed = _React$useState2[1];
+  var _React$useState3 = React.useState(src),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    prevSrc = _React$useState4[0],
+    setPrevSrc = _React$useState4[1];
+  if (src !== prevSrc) {
+    setPrevSrc(src);
+    setImgFailed(false);
+  }
+  var showImage = Boolean(src) && !imgFailed;
   var sizes = {
     xs: 'h-6 w-6 text-xs',
     sm: 'h-8 w-8 text-sm',
@@ -48,14 +64,14 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return jsxs("div", {
     ref: ref,
     className: "relative inline-block",
-    children: [jsxs("div", _objectSpread2(_objectSpread2({
+    children: [jsx("div", _objectSpread2(_objectSpread2({
       className: cn('flex items-center justify-center bg-gray-100 text-primary-600 font-medium', sizes[size], {
         'rounded-full': shape === 'circle',
         'rounded-md': shape === 'square',
         'rounded-lg': shape === 'rounded'
       }, className)
     }, props), {}, {
-      children: [src ? jsx("img", {
+      children: showImage ? jsx("img", {
         src: src,
         alt: alt || name,
         className: cn('h-full w-full object-cover', {
@@ -63,22 +79,19 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           'rounded-md': shape === 'square',
           'rounded-lg': shape === 'rounded'
         }),
-        onError: function onError(e) {
-          e.target.style.display = 'none';
-          e.target.nextSibling.style.display = 'flex';
+        onError: function onError() {
+          return setImgFailed(true);
         }
-      }) : null, jsx("div", {
+      }) : jsx("div", {
         className: cn('flex items-center justify-center h-full w-full', {
           'rounded-full': shape === 'circle',
           'rounded-md': shape === 'square',
           'rounded-lg': shape === 'rounded'
-        }, {
-          'hidden': src
         }),
         children: name ? getInitials(name) : jsx(User, {
           className: "h-1/2 w-1/2"
         })
-      })]
+      })
     })), status && jsx("span", {
       className: cn('absolute bottom-0 right-0 rounded-full border-2 border-white', statusColors[status], statusSizes[size])
     })]

package/dist/esm/components/utility/Carousel.js

@@ -1,10 +1,15 @@
 'use client';
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
+var _excluded = ["children", "autoPlay", "interval", "showDots", "className", "itemClassName", "onMouseEnter", "onMouseLeave"];
+// Arrows stay visible at rest (touch devices have no hover) and use the surface /
+// foreground role tokens so they read on light and dark themes alike.
+var ARROW_CLASSES = "absolute top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center p-2 rounded-full bg-surface/80 backdrop-blur-md border border-line text-foreground shadow-lg transition-colors motion-reduce:transition-none hover:bg-surface focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
 var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
   var children = props.children,
     _props$autoPlay = props.autoPlay,
@@ -14,7 +19,10 @@ var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
     _props$showDots = props.showDots,
     showDots = _props$showDots === void 0 ? true : _props$showDots,
     className = props.className,
-    itemClassName = props.itemClassName;
+    itemClassName = props.itemClassName,
+    _onMouseEnter = props.onMouseEnter,
+    _onMouseLeave = props.onMouseLeave,
+    rest = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     currentIndex = _React$useState2[0],
@@ -44,17 +52,20 @@ var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
     };
   }, [autoPlay, isPaused, next, interval]);
   var childrenArray = React.Children.toArray(children);
-  return jsxs("div", {
+  return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn("relative group overflow-hidden rounded-xl bg-card border border-border/50 shadow-sm", className),
-    onMouseEnter: function onMouseEnter() {
-      return setIsPaused(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsPaused(false);
+    className: cn("relative overflow-hidden rounded-xl bg-surface border border-line shadow-sm", className),
+    onMouseEnter: function onMouseEnter(e) {
+      setIsPaused(true);
+      _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter(e);
     },
+    onMouseLeave: function onMouseLeave(e) {
+      setIsPaused(false);
+      _onMouseLeave === null || _onMouseLeave === void 0 || _onMouseLeave(e);
+    }
+  }, rest), {}, {
     children: [jsx("div", {
-      className: "flex transition-transform duration-500 ease-out",
+      className: "flex transition-transform duration-500 ease-out motion-reduce:transition-none",
       style: {
         transform: "translateX(-".concat(currentIndex * 100, "%)")
       },
@@ -65,32 +76,38 @@ var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
         }, index);
       })
     }), jsx("button", {
+      type: "button",
       onClick: prev,
-      className: "absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/80 backdrop-blur-md border border-border/50 text-foreground opacity-0 group-hover:opacity-100 transition-all hover:bg-background shadow-lg focus:outline-none focus:ring-2 focus:ring-primary",
+      className: cn(ARROW_CLASSES, TOUCH_TARGET, "left-4"),
       "aria-label": "Previous slide",
       children: jsx(ChevronLeft, {
-        className: "w-5 h-5 text-white"
+        className: "w-5 h-5",
+        "aria-hidden": "true"
       })
     }), jsx("button", {
+      type: "button",
       onClick: next,
-      className: "absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/80 backdrop-blur-md border border-border/50 text-foreground opacity-0 group-hover:opacity-100 transition-all hover:bg-background shadow-lg focus:outline-none focus:ring-2 focus:ring-primary",
+      className: cn(ARROW_CLASSES, TOUCH_TARGET, "right-4"),
       "aria-label": "Next slide",
       children: jsx(ChevronRight, {
-        className: "w-5 h-5 text-white"
+        className: "w-5 h-5",
+        "aria-hidden": "true"
       })
     }), showDots && jsx("div", {
       className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10",
       children: childrenArray.map(function (_, index) {
         return jsx("button", {
+          type: "button",
           onClick: function onClick() {
             return setCurrentIndex(index);
           },
-          className: cn("w-2 h-2 rounded-full transition-all duration-300", currentIndex === index ? "bg-primary w-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"),
-          "aria-label": "Go to slide ".concat(index + 1)
+          className: cn("h-2 rounded-full transition-all duration-300 motion-reduce:transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2", currentIndex === index ? "bg-primary-600 w-6" : "w-2 bg-muted/40 hover:bg-muted/70"),
+          "aria-label": "Go to slide ".concat(index + 1),
+          "aria-current": currentIndex === index ? "true" : undefined
         }, index);
       })
     })]
-  });
+  }));
 });
 Carousel.displayName = "Carousel";
 

package/dist/esm/components/utility/Pagination.js

@@ -50,7 +50,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: cn('flex items-center justify-center space-x-1', className),
     "aria-label": "Pagination"
   }, props), {}, {
-    children: [showFirstLast && currentPage > 1 && jsx("button", {
+    children: [showFirstLast && visiblePages[0] > 1 && jsx("button", {
       className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
       onClick: function onClick() {
         return handlePageClick(1);
@@ -96,7 +96,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: jsx(ChevronRight, {
         className: "h-4 w-4"
       })
-    }), showFirstLast && currentPage < totalPages && jsx("button", {
+    }), showFirstLast && visiblePages[visiblePages.length - 1] < totalPages && jsx("button", {
       className: "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
       onClick: function onClick() {
         return handlePageClick(totalPages);

package/dist/esm/hooks/useFocusTrap.js

@@ -3,8 +3,7 @@ import { useEffect } from 'react';
 import { useLatestRef } from './useLatestRef.js';
 
 // Internal (not exported from the package). Shared focus management for the
-// overlay primitives (Drawer, Popover, Tour). Dialog keeps its own copy so its
-// behavior is untouched.
+// overlay primitives (Drawer, Dialog, Popover, Tour, Sidebar, AppShell).
 var FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
 var getFocusable = function getFocusable(root) {
   return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
@@ -17,7 +16,16 @@ var layerStack = [];
 var isTopLayer = function isTopLayer(token) {
   return layerStack[layerStack.length - 1] === token;
 };
+// A responsive drawer (Sidebar's `md:hidden`, AppShell's `lg:hidden`) can be
+// "open" while CSS hides it on wide viewports; there is nothing to trap then.
+var isDisplayNone = function isDisplayNone(el) {
+  for (var node = el; node && node.nodeType === 1; node = node.parentElement) {
+    if (window.getComputedStyle(node).display === "none") return true;
+  }
+  return false;
+};
 function cycleFocus(e, panel) {
+  if (isDisplayNone(panel)) return;
   var focusables = getFocusable(panel);
   if (focusables.length === 0) {
     e.preventDefault();

package/dist/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.js"],"names":[],"mappings":"AAgDA;;;;GAIG;AACH;;;;;;SAmCC;AAjFD,wCAOY;AAEL,+CAKC"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.js"],"names":[],"mappings":"AAyDA;;;;GAIG;AACH;;;;;;SAmCC;AA3FD,wCAOY;AAEL,+CAKC"}