@dreamtree-org/twreact-ui 1.3.11 → 2.0.0

package/dist/esm/components/core/menu/MenuPopover.js

@@ -0,0 +1,177 @@
+'use client';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useLayoutEffect, useCallback, useMemo, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { setRefs } from '../../../utils/position.js';
+import Portal from '../../utility/Portal.js';
+import { useFloatingPosition } from '../../../hooks/useFloatingPosition.js';
+import { useFocusTrap } from '../../../hooks/useFocusTrap.js';
+import { useClickOutside } from '../../../hooks/useClickOutside.js';
+import { useLatestRef } from '../../../hooks/useLatestRef.js';
+import { getMenuItems, handleMenuKeyDown } from './menuKeyboard.js';
+import { isDestructive } from './menuItems.js';
+
+// Internal (not exported). Desktop presentation of the action menu: a
+// portaled, floating `role="menu"` anchored to its trigger (flip + shift via
+// useFloatingPosition), with roving focus and Escape/outside-press dismissal.
+var MENU_CLASSES = "z-popover min-w-[10rem] max-h-80 overflow-y-auto rounded-control border border-line bg-surface p-1 text-foreground shadow-overlay focus:outline-none transition-opacity duration-fast motion-reduce:transition-none";
+var ITEM_CLASSES = "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm outline-none transition-colors focus:bg-line/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500";
+function itemToneClass(item) {
+  if (item.disabled) return "cursor-not-allowed opacity-50 text-muted";
+  if (isDestructive(item)) return "text-error-600 dark:text-error-400 hover:bg-error-50 dark:hover:bg-error-900/30";
+  return "text-foreground hover:bg-line/50";
+}
+/**
+ * @param {object} props
+ * @param {HTMLElement|null} props.anchorEl - the trigger the menu floats next to.
+ * @param {Array} props.items - normalized items (see menuItems.js).
+ * @param {(item: object) => void} props.onSelectItem
+ * @param {(reason: string) => void} props.onRequestClose - 'escape' | 'outside' | 'tab' | 'scroll'.
+ * @param {string} [props.placement='bottom-start']
+ * @param {'first'|'last'} [props.initialFocus='first']
+ * @param {boolean} [props.closeOnScroll=false] - close when a scroll happens outside the menu.
+ */
+function MenuPopover(_ref) {
+  var anchorEl = _ref.anchorEl,
+    items = _ref.items,
+    onSelectItem = _ref.onSelectItem,
+    onRequestClose = _ref.onRequestClose,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    _ref$initialFocus = _ref.initialFocus,
+    initialFocus = _ref$initialFocus === void 0 ? "first" : _ref$initialFocus,
+    _ref$closeOnScroll = _ref.closeOnScroll,
+    closeOnScroll = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll,
+    menuRef = _ref.menuRef,
+    id = _ref.id,
+    label = _ref.label,
+    className = _ref.className,
+    itemClassName = _ref.itemClassName,
+    _ref$emptyLabel = _ref.emptyLabel,
+    emptyLabel = _ref$emptyLabel === void 0 ? "No actions" : _ref$emptyLabel;
+  var _useFloatingPosition = useFloatingPosition({
+      placement: placement,
+      open: true
+    }),
+    refs = _useFloatingPosition.refs,
+    floatingStyles = _useFloatingPosition.floatingStyles,
+    isPositioned = _useFloatingPosition.isPositioned;
+  var elRef = useRef(null);
+  // The menu node once the Portal has rendered it; focus management waits.
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuEl = _useState2[0],
+    setMenuEl = _useState2[1];
+  var closeRef = useLatestRef(onRequestClose);
+  useLayoutEffect(function () {
+    refs.setReference(anchorEl !== null && anchorEl !== void 0 ? anchorEl : null);
+  }, [refs, anchorEl]);
+  var setMenuNode = useCallback(function (node) {
+    return setRefs(node, elRef, refs.setFloating, menuRef, setMenuEl);
+  }, [refs, menuRef]);
+  var focusTarget = useMemo(function () {
+    return {
+      get current() {
+        var _ref2;
+        var list = getMenuItems(menuEl);
+        return (_ref2 = initialFocus === "last" ? list[list.length - 1] : list[0]) !== null && _ref2 !== void 0 ? _ref2 : menuEl;
+      }
+    };
+  }, [menuEl, initialFocus]);
+  useFocusTrap(elRef, {
+    active: menuEl != null,
+    trap: false,
+    initialFocusRef: focusTarget,
+    onEscape: function onEscape(e) {
+      var _e$preventDefault, _closeRef$current;
+      e === null || e === void 0 || (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 || _e$preventDefault.call(e);
+      (_closeRef$current = closeRef.current) === null || _closeRef$current === void 0 || _closeRef$current.call(closeRef, "escape");
+    }
+  });
+  var anchorRef = useMemo(function () {
+    return {
+      current: anchorEl
+    };
+  }, [anchorEl]);
+  useClickOutside([elRef, anchorRef], function () {
+    var _closeRef$current2;
+    return (_closeRef$current2 = closeRef.current) === null || _closeRef$current2 === void 0 ? void 0 : _closeRef$current2.call(closeRef, "outside");
+  });
+  useEffect(function () {
+    if (!closeOnScroll) return undefined;
+    var onScroll = function onScroll(e) {
+      var _closeRef$current3;
+      var node = elRef.current;
+      if (node && e.target instanceof Node && node.contains(e.target)) return;
+      (_closeRef$current3 = closeRef.current) === null || _closeRef$current3 === void 0 || _closeRef$current3.call(closeRef, "scroll");
+    };
+    window.addEventListener("scroll", onScroll, true);
+    return function () {
+      return window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [closeOnScroll, closeRef]);
+  var hasItems = items.length > 0;
+  return jsx(Portal, {
+    children: jsx("div", {
+      ref: setMenuNode,
+      id: id,
+      role: "menu",
+      "aria-orientation": "vertical",
+      "aria-label": label,
+      tabIndex: -1,
+      "data-presentation": "popover",
+      className: cn(MENU_CLASSES, className),
+      style: _objectSpread2(_objectSpread2({}, floatingStyles), {}, {
+        opacity: isPositioned ? 1 : 0
+      }),
+      onKeyDown: function onKeyDown(e) {
+        return handleMenuKeyDown(e, elRef.current, {
+          onTab: function onTab() {
+            var _closeRef$current4;
+            return (_closeRef$current4 = closeRef.current) === null || _closeRef$current4 === void 0 ? void 0 : _closeRef$current4.call(closeRef, "tab");
+          }
+        });
+      },
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      children: !hasItems ? jsx("div", {
+        className: "px-3 py-2 text-sm italic text-muted",
+        children: emptyLabel
+      }) : items.map(function (item, idx) {
+        var _item$content, _item$key;
+        return jsx("button", {
+          type: "button",
+          role: "menuitem",
+          tabIndex: -1,
+          disabled: item.disabled || undefined,
+          "aria-disabled": item.disabled || undefined,
+          "data-tone": isDestructive(item) ? "destructive" : undefined,
+          className: cn(ITEM_CLASSES, itemToneClass(item), itemClassName, !item.disabled && item.className),
+          onMouseEnter: function onMouseEnter(e) {
+            if (!item.disabled) e.currentTarget.focus({
+              preventScroll: true
+            });
+          },
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            if (!item.disabled) onSelectItem(item);
+          },
+          children: (_item$content = item.content) !== null && _item$content !== void 0 ? _item$content : jsxs(Fragment, {
+            children: [item.icon != null && jsx("span", {
+              className: "inline-flex shrink-0",
+              "aria-hidden": "true",
+              children: item.icon
+            }), jsx("span", {
+              className: "min-w-0 flex-1 truncate",
+              children: item.label
+            })]
+          })
+        }, (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : "item-".concat(idx));
+      })
+    })
+  });
+}
+
+export { MenuPopover as default, itemToneClass };

package/dist/esm/components/core/menu/menuItems.js

@@ -0,0 +1,61 @@
+'use client';
+import { typeof as _typeof } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+// Internal (not exported). Shared helpers for the action-menu primitive used
+// by ThreeDotPopover and Table's row ActionMenu (DTUI-36).
+//
+// A normalized menu item looks like:
+//   {
+//     key:       string | number,   // React key
+//     label:     ReactNode,         // visible text (also used for typeahead)
+//     icon?:     ReactNode,         // rendered before the label
+//     content?:  ReactNode,         // replaces icon + label entirely
+//     disabled?: boolean,
+//     tone?:     'default' | 'destructive',
+//     destructive?: boolean,        // legacy alias for tone: 'destructive'
+//     className?: string,           // popover-mode-only extra item classes
+//     onSelect?: () => void,
+//   }
+/** True when an item should render in the error (destructive) tone. */
+var isDestructive = function isDestructive(item) {
+  return Boolean(item) && (item.tone === "destructive" || item.destructive === true);
+};
+/**
+ * Renders an icon given either a component type (`Edit2`) or a ready node
+ * (`<Edit2 />`). Returns null for anything else.
+ */
+function renderIcon(icon, className) {
+  if (icon == null || icon === false) return null;
+  if (/*#__PURE__*/React.isValidElement(icon)) return icon;
+  var isComponent = typeof icon === "function" || _typeof(icon) === "object" && icon.$$typeof != null;
+  if (isComponent) {
+    var Icon = icon;
+    return jsx(Icon, {
+      className: className,
+      "aria-hidden": "true"
+    });
+  }
+  return icon;
+}
+/**
+ * Normalizes a public ActionSheet action
+ * ({ key?, label, icon?, tone?, onSelect?, disabled? }) into a menu item.
+ * `icon` may be a node or a component type.
+ */
+function normalizeAction(action, idx) {
+  var _a$key;
+  var a = action || {};
+  return {
+    key: (_a$key = a.key) !== null && _a$key !== void 0 ? _a$key : "action-".concat(idx),
+    label: a.label,
+    icon: renderIcon(a.icon, "h-5 w-5"),
+    disabled: Boolean(a.disabled),
+    tone: a.tone,
+    destructive: a.destructive,
+    onSelect: a.onSelect
+  };
+}
+
+export { isDestructive, normalizeAction, renderIcon };

package/dist/esm/components/core/menu/menuKeyboard.js

@@ -0,0 +1,54 @@
+// Internal (not exported). Roving focus for a `role="menu"` element: the
+// menu's items all carry tabIndex=-1 and focus moves between them with the
+// keyboard (WAI-ARIA menu pattern).
+var ITEM_SELECTOR = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
+/** The enabled menu items inside `menuEl`, in DOM order. */
+var getMenuItems = function getMenuItems(menuEl) {
+  return menuEl ? Array.from(menuEl.querySelectorAll(ITEM_SELECTOR)) : [];
+};
+var focusItem = function focusItem(el) {
+  var _el$focus;
+  return el === null || el === void 0 || (_el$focus = el.focus) === null || _el$focus === void 0 ? void 0 : _el$focus.call(el, {
+    preventScroll: true
+  });
+};
+var isTypeaheadKey = function isTypeaheadKey(e) {
+  return e.key.length === 1 && /\S/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey;
+};
+/**
+ * Keydown handler for the menu element. ArrowDown/ArrowUp move (and wrap),
+ * Home/End jump, a printable character jumps to the next item starting with
+ * it, Tab calls `onTab`. Escape is handled by the caller's focus layer.
+ *
+ * @param {KeyboardEvent} e
+ * @param {HTMLElement} menuEl
+ * @param {{ onTab?: () => void }} [options]
+ */
+function handleMenuKeyDown(e, menuEl) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    onTab = _ref.onTab;
+  if (e.key === "Tab") {
+    onTab === null || onTab === void 0 || onTab();
+    return;
+  }
+  var items = getMenuItems(menuEl);
+  if (items.length === 0) return;
+  var current = items.indexOf(document.activeElement);
+  var last = items.length - 1;
+  var next;
+  if (e.key === "ArrowDown") next = current < 0 || current === last ? 0 : current + 1;else if (e.key === "ArrowUp") next = current <= 0 ? last : current - 1;else if (e.key === "Home") next = 0;else if (e.key === "End") next = last;else if (isTypeaheadKey(e)) {
+    var key = e.key.toLowerCase();
+    for (var step = 1; step <= items.length; step += 1) {
+      var i = (current + step + items.length) % items.length;
+      if ((items[i].textContent || "").trim().toLowerCase().startsWith(key)) {
+        next = i;
+        break;
+      }
+    }
+  }
+  if (next === undefined) return;
+  e.preventDefault();
+  focusItem(items[next]);
+}
+
+export { getMenuItems, handleMenuKeyDown };

package/dist/esm/components/feedback/ActionSheet.js

@@ -0,0 +1,55 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+import ActionSheetMenu from '../core/menu/ActionSheetMenu.js';
+import { normalizeAction } from '../core/menu/menuItems.js';
+
+var _excluded = ["open", "isOpen", "onClose", "title", "message", "actions", "cancelLabel", "className", "aria-label"];
+// iOS UIAlertController-style action sheet on the bottom Sheet: an optional
+// title + message, a card of actions (destructive ones in the error tone) and
+// a separate Cancel. The same implementation (ActionSheetMenu) renders the
+// phone presentation of ThreeDotPopover and Table's row menu.
+//
+// Selecting an action calls its `onSelect`, then `onClose('select')`. Focus
+// returns to the element that was focused before the sheet opened (the
+// Sheet's focus trap restores it).
+var ActionSheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var open = _ref.open,
+    isOpen = _ref.isOpen,
+    _onClose = _ref.onClose,
+    title = _ref.title,
+    message = _ref.message,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    _ref$cancelLabel = _ref.cancelLabel,
+    cancelLabel = _ref$cancelLabel === void 0 ? "Cancel" : _ref$cancelLabel,
+    className = _ref.className,
+    ariaLabel = _ref["aria-label"],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var items = (Array.isArray(actions) ? actions : []).filter(Boolean).map(normalizeAction);
+  var selectItem = function selectItem(item) {
+    var _item$onSelect;
+    if (item.disabled) return;
+    (_item$onSelect = item.onSelect) === null || _item$onSelect === void 0 || _item$onSelect.call(item);
+    _onClose === null || _onClose === void 0 || _onClose("select");
+  };
+  return jsx(ActionSheetMenu, _objectSpread2({
+    ref: ref,
+    open: Boolean(open !== null && open !== void 0 ? open : isOpen),
+    onClose: function onClose(reason) {
+      return _onClose === null || _onClose === void 0 ? void 0 : _onClose(reason);
+    },
+    groups: [items],
+    onSelectItem: selectItem,
+    title: title,
+    message: message,
+    label: ariaLabel,
+    cancelLabel: cancelLabel,
+    className: cn(className)
+  }, rest));
+});
+ActionSheet.displayName = "ActionSheet";
+
+export { ActionSheet as default };

package/dist/esm/components/feedback/Alert.js

@@ -6,92 +6,102 @@ import { cn } from '../../utils/cn.js';
 import { Info, AlertTriangle, AlertCircle, CheckCircle, X } from 'lucide-react';
 import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["variant", "title", "children", "dismissible", "onDismiss", "className"];
+var _excluded = ["variant", "title", "children", "actions", "dismissible", "onDismiss", "dismissLabel", "className"];
 // error / warning need attention now (role="alert", assertive); info / success
-// are neutral and must not interrupt (role="status", polite).
+// / neutral must not interrupt (role="status", polite).
 var URGENT_VARIANTS = new Set(['error', 'warning']);
+var VARIANTS = {
+  success: {
+    container: 'bg-success-50 border-success-200 dark:bg-success-950/40 dark:border-success-800',
+    Icon: CheckCircle,
+    icon: 'text-success-500 dark:text-success-400',
+    title: 'text-success-800 dark:text-success-200',
+    content: 'text-success-700 dark:text-success-300',
+    dismiss: 'text-success-500 hover:bg-success-100 focus-visible:ring-success-600 dark:text-success-400 dark:hover:bg-success-900/50'
+  },
+  error: {
+    container: 'bg-error-50 border-error-200 dark:bg-error-950/40 dark:border-error-800',
+    Icon: AlertCircle,
+    icon: 'text-error-500 dark:text-error-400',
+    title: 'text-error-800 dark:text-error-200',
+    content: 'text-error-700 dark:text-error-300',
+    dismiss: 'text-error-500 hover:bg-error-100 focus-visible:ring-error-600 dark:text-error-400 dark:hover:bg-error-900/50'
+  },
+  warning: {
+    container: 'bg-warning-50 border-warning-200 dark:bg-warning-950/40 dark:border-warning-800',
+    Icon: AlertTriangle,
+    icon: 'text-warning-500 dark:text-warning-400',
+    title: 'text-warning-800 dark:text-warning-200',
+    content: 'text-warning-700 dark:text-warning-300',
+    dismiss: 'text-warning-500 hover:bg-warning-100 focus-visible:ring-warning-600 dark:text-warning-400 dark:hover:bg-warning-900/50'
+  },
+  info: {
+    container: 'bg-primary-50 border-primary-200 dark:bg-primary-950/40 dark:border-primary-800',
+    Icon: Info,
+    icon: 'text-primary-500 dark:text-primary-400',
+    title: 'text-primary-800 dark:text-primary-200',
+    content: 'text-primary-700 dark:text-primary-300',
+    dismiss: 'text-primary-500 hover:bg-primary-100 focus-visible:ring-primary-600 dark:text-primary-400 dark:hover:bg-primary-900/50'
+  },
+  neutral: {
+    container: 'bg-surface border-line dark:bg-surface dark:border-line',
+    Icon: Info,
+    icon: 'text-muted dark:text-muted',
+    title: 'text-foreground dark:text-foreground',
+    content: 'text-muted dark:text-muted',
+    dismiss: 'text-muted hover:bg-line/50 focus-visible:ring-primary-500 dark:text-muted dark:hover:bg-line/50'
+  }
+};
 var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
     title = _ref.title,
     children = _ref.children,
+    actions = _ref.actions,
     _ref$dismissible = _ref.dismissible,
     dismissible = _ref$dismissible === void 0 ? false : _ref$dismissible,
     onDismiss = _ref.onDismiss,
+    _ref$dismissLabel = _ref.dismissLabel,
+    dismissLabel = _ref$dismissLabel === void 0 ? 'Dismiss' : _ref$dismissLabel,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  var variants = {
-    success: {
-      container: 'bg-success-50 border-success-200',
-      icon: jsx(CheckCircle, {
-        className: "h-5 w-5 text-success-500",
-        "aria-hidden": "true"
-      }),
-      title: 'text-success-800',
-      content: 'text-success-700'
-    },
-    error: {
-      container: 'bg-error-50 border-error-200',
-      icon: jsx(AlertCircle, {
-        className: "h-5 w-5 text-error-500",
-        "aria-hidden": "true"
-      }),
-      title: 'text-error-800',
-      content: 'text-error-700'
-    },
-    warning: {
-      container: 'bg-warning-50 border-warning-200',
-      icon: jsx(AlertTriangle, {
-        className: "h-5 w-5 text-warning-500",
-        "aria-hidden": "true"
-      }),
-      title: 'text-warning-800',
-      content: 'text-warning-700'
-    },
-    info: {
-      container: 'bg-primary-50 border-primary-200',
-      icon: jsx(Info, {
-        className: "h-5 w-5 text-primary-500",
-        "aria-hidden": "true"
-      }),
-      title: 'text-primary-800',
-      content: 'text-primary-700'
-    }
-  };
-  var variantStyles = variants[variant];
+  var styles = VARIANTS[variant] || VARIANTS.info;
+  var Icon = styles.Icon;
   return jsx("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('rounded-md border p-4', variantStyles.container, className),
+    className: cn('rounded-md border p-4 animate-fade-in motion-reduce:animate-none', styles.container, className),
     role: URGENT_VARIANTS.has(variant) ? 'alert' : 'status'
   }, props), {}, {
     children: jsxs("div", {
       className: "flex",
       children: [jsx("div", {
         className: "flex-shrink-0",
-        children: variantStyles.icon
+        children: jsx(Icon, {
+          className: cn('h-5 w-5', styles.icon),
+          "aria-hidden": "true"
+        })
       }), jsxs("div", {
-        className: "ml-3 flex-1",
+        className: "ml-3 flex-1 min-w-0",
         children: [title && jsx("h3", {
-          className: cn('text-sm font-medium', variantStyles.title),
+          className: cn('text-sm font-medium', styles.title),
           children: title
         }), jsx("div", {
-          className: cn('text-sm', variantStyles.content, {
+          className: cn('text-sm', styles.content, {
             'mt-1': title
           }),
           children: children
+        }), actions != null && actions !== false && jsx("div", {
+          "data-slot": "actions",
+          className: "mt-3 flex flex-wrap items-center gap-2",
+          children: actions
         })]
       }), dismissible && jsx("div", {
         className: "ml-auto pl-3",
         children: jsx("button", {
           type: "button",
-          className: cn('inline-flex items-center justify-center rounded-md p-1.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', TOUCH_TARGET, {
-            'text-success-500 hover:bg-success-100 focus-visible:ring-success-600': variant === 'success',
-            'text-error-500 hover:bg-error-100 focus-visible:ring-error-600': variant === 'error',
-            'text-warning-500 hover:bg-warning-100 focus-visible:ring-warning-600': variant === 'warning',
-            'text-primary-500 hover:bg-primary-100 focus-visible:ring-primary-600': variant === 'info'
-          }),
+          className: cn('inline-flex items-center justify-center rounded-md p-1.5 transition-colors motion-reduce:transition-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-background', TOUCH_TARGET, styles.dismiss),
           onClick: onDismiss,
-          "aria-label": "Dismiss",
+          "aria-label": dismissLabel,
           children: jsx(X, {
             className: "h-4 w-4",
             "aria-hidden": "true"