@multiplatform.one/components 7.4.0 → 7.5.0

package/dist/esm/SortableList/useSortableRows.native.js

@@ -0,0 +1,369 @@
+import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { AUTO_SCROLL_EDGE_PX, AUTO_SCROLL_MAX_SPEED, LIST_COLUMN_ID, TOUCH_LONG_PRESS_MS, applyReorder, autoScrollVelocity, describeCancel, describeDragState, formatListAnnouncement, insertionIndexForY, keyboardLift, keyboardMove, listBoardSnapshot, resolveDrop, siblingOffset } from "../views/kanbanDnd.native.js";
+var DEFAULT_ROW_SELECTOR = "[data-sortable-row], [data-child-row]";
+var SortableSessionContext = createContext({
+  sourceId: null
+});
+function SortableSessionProvider(param) {
+  var {
+    sourceId,
+    children
+  } = param;
+  return createElement(SortableSessionContext.Provider, {
+    value: {
+      sourceId
+    }
+  }, children);
+}
+function useSortableDragging(itemId, dragging) {
+  var {
+    sourceId
+  } = useContext(SortableSessionContext);
+  return dragging !== null && dragging !== void 0 ? dragging : sourceId === itemId;
+}
+function useSortableRows(param) {
+  var {
+    items,
+    getId,
+    getLabel,
+    canReorder,
+    onChange,
+    enabled,
+    containerRef,
+    rowSelector = DEFAULT_ROW_SELECTOR
+  } = param;
+  var [session, setSession] = useState(null);
+  var [announcement, setAnnouncement] = useState("");
+  var [focusedIndex, setFocusedIndex] = useState(0);
+  var sessionRef = useRef(null);
+  sessionRef.current = session;
+  var itemsRef = useRef(items);
+  itemsRef.current = items;
+  var board = useMemo(function () {
+    return listBoardSnapshot(items.length);
+  }, [items.length]);
+  var ids = useMemo(function () {
+    return items.map(function (item, i) {
+      return getId(item, i);
+    });
+  }, [items, getId]);
+  var labels = useMemo(function () {
+    return items.map(function (item, i) {
+      return getLabel(item, i);
+    });
+  }, [items, getLabel]);
+  var rowEnabled = useCallback(function (index) {
+    if (!enabled) return false;
+    if (index < 0 || index >= items.length) return false;
+    return canReorder ? canReorder(items[index], index) : true;
+  }, [canReorder, enabled, items]);
+  var announce = useCallback(function (type, drag, label) {
+    if (type === "cancel") {
+      setAnnouncement(formatListAnnouncement(describeCancel(drag, board, label), {
+        sourcePosition: drag.sourceIndex + 1
+      }));
+      return;
+    }
+    setAnnouncement(formatListAnnouncement(describeDragState(type, drag, board, label)));
+  }, [board]);
+  var toDrag = useCallback(function (s) {
+    return {
+      sourceColumnId: LIST_COLUMN_ID,
+      sourceIndex: s.sourceIndex,
+      target: {
+        columnId: LIST_COLUMN_ID,
+        index: s.targetIndex
+      }
+    };
+  }, []);
+  var focusRow = useCallback(function (id) {
+    var _el_focus;
+    var root = containerRef.current;
+    if (!root) return;
+    var el = root.querySelector(`[data-sortable-row="${id}"], [data-child-row-id="${id}"]`);
+    el === null || el === void 0 ? void 0 : (_el_focus = el.focus) === null || _el_focus === void 0 ? void 0 : _el_focus.call(el);
+  }, [containerRef]);
+  var liftAt = useCallback(function (index, mode) {
+    if (!rowEnabled(index)) return false;
+    var kb = keyboardLift(board, LIST_COLUMN_ID, index);
+    if (!kb) return false;
+    var next = {
+      mode,
+      sourceIndex: index,
+      targetIndex: kb.target.index,
+      id: ids[index],
+      label: labels[index],
+      size: 44
+    };
+    setSession(next);
+    sessionRef.current = next;
+    announce("lift", kb, next.label);
+    return true;
+  }, [announce, board, ids, labels, rowEnabled]);
+  var moveSession = useCallback(function (direction) {
+    var current = sessionRef.current;
+    if (!current) return false;
+    var drag = toDrag(current);
+    var moved = keyboardMove(drag, board, direction);
+    if (moved === drag) return true;
+    var next = {
+      ...current,
+      targetIndex: moved.target.index
+    };
+    setSession(next);
+    sessionRef.current = next;
+    announce("move", moved, current.label);
+    return true;
+  }, [announce, board, toDrag]);
+  var dropSession = useCallback(function () {
+    var current = sessionRef.current;
+    if (!current) return false;
+    var drag = toDrag(current);
+    var result = resolveDrop(drag);
+    announce("drop", drag, current.label);
+    setSession(null);
+    sessionRef.current = null;
+    if (result.commit) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(applyReorder(itemsRef.current, result.from.index, result.to.index));
+    }
+    requestAnimationFrame(function () {
+      return focusRow(current.id);
+    });
+    return true;
+  }, [announce, focusRow, onChange, toDrag]);
+  var cancelSession = useCallback(function () {
+    var current = sessionRef.current;
+    if (!current) return false;
+    announce("cancel", toDrag(current), current.label);
+    setSession(null);
+    sessionRef.current = null;
+    requestAnimationFrame(function () {
+      return focusRow(current.id);
+    });
+    return true;
+  }, [announce, focusRow, toDrag]);
+  var onRowKeyDown = useCallback(function (index, e) {
+    if (!enabled) return;
+    if (sessionRef.current) return;
+    if (e.key === " ") {
+      e.preventDefault();
+      liftAt(index, "keyboard");
+    }
+  }, [enabled, liftAt]);
+  var onHandleKeyDown = useCallback(function (index, e) {
+    if (!enabled) return;
+    if (sessionRef.current) return;
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      liftAt(index, "keyboard");
+    }
+  }, [enabled, liftAt]);
+  useEffect(function () {
+    if (!enabled || typeof window === "undefined") return;
+    var onKey = function onKey2(e) {
+      var _e_target_closest, _e_target;
+      var current = sessionRef.current;
+      if (current) {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          e.stopPropagation();
+          cancelSession();
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          e.stopPropagation();
+          moveSession("down");
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          e.stopPropagation();
+          moveSession("up");
+          return;
+        }
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          dropSession();
+        }
+        return;
+      }
+      if (e.key !== " " && e.key !== "Enter") return;
+      var handle = (_e_target = e.target) === null || _e_target === void 0 ? void 0 : (_e_target_closest = _e_target.closest) === null || _e_target_closest === void 0 ? void 0 : _e_target_closest.call(_e_target, "[data-sortable-handle]");
+      if (!handle) return;
+      var id = handle.getAttribute("data-sortable-handle");
+      var index = ids.indexOf(id !== null && id !== void 0 ? id : "");
+      if (index < 0) return;
+      e.preventDefault();
+      liftAt(index, "keyboard");
+    };
+    window.addEventListener("keydown", onKey, true);
+    return function () {
+      return window.removeEventListener("keydown", onKey, true);
+    };
+  }, [cancelSession, dropSession, enabled, ids, liftAt, moveSession]);
+  var measure = useCallback(function () {
+    var _ref;
+    var _rows_;
+    var root = containerRef.current;
+    if (!root) return {
+      items: [],
+      size: 44
+    };
+    var els = [...root.querySelectorAll(rowSelector)];
+    var top = root.getBoundingClientRect().top;
+    var rows = els.map(function (el, index) {
+      var r = el.getBoundingClientRect();
+      return {
+        index,
+        start: r.top - top + root.scrollTop,
+        size: r.height
+      };
+    });
+    return {
+      items: rows,
+      size: (_ref = (_rows_ = rows[0]) === null || _rows_ === void 0 ? void 0 : _rows_.size) !== null && _ref !== void 0 ? _ref : 44
+    };
+  }, [containerRef, rowSelector]);
+  var onHandlePointerDown = useCallback(function (index, e) {
+    var _e_pointerType;
+    var _e_preventDefault;
+    if (!enabled || !rowEnabled(index)) return;
+    (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+    var pointerType = (_e_pointerType = e.pointerType) !== null && _e_pointerType !== void 0 ? _e_pointerType : "mouse";
+    var lifted = false;
+    var hold = null;
+    var liftPointer = function liftPointer2(clientY) {
+      if (lifted) return;
+      lifted = true;
+      var {
+        items: measured,
+        size
+      } = measure();
+      if (!liftAt(index, "pointer")) return;
+      var current = sessionRef.current;
+      if (current) {
+        var sized = {
+          ...current,
+          size
+        };
+        setSession(sized);
+        sessionRef.current = sized;
+      }
+      var localY = function () {
+        var root = containerRef.current;
+        if (!root) return 0;
+        return clientY - root.getBoundingClientRect().top + root.scrollTop;
+      }();
+      var target = insertionIndexForY({
+        localY,
+        items: measured,
+        sourceIndex: index,
+        count: itemsRef.current.length,
+        size
+      });
+      var next = sessionRef.current;
+      if (next && target !== next.targetIndex) {
+        var moved = {
+          ...next,
+          targetIndex: target
+        };
+        setSession(moved);
+        sessionRef.current = moved;
+        announce("move", toDrag(moved), moved.label);
+      }
+    };
+    var onMove = function onMove2(ev) {
+      if (!lifted) return;
+      var root = containerRef.current;
+      if (!root) return;
+      var rect = root.getBoundingClientRect();
+      var vel = autoScrollVelocity({
+        pos: ev.clientY,
+        start: rect.top,
+        end: rect.bottom,
+        edge: AUTO_SCROLL_EDGE_PX,
+        maxSpeed: AUTO_SCROLL_MAX_SPEED
+      });
+      if (vel) root.scrollTop += vel;
+      var {
+        items: measured,
+        size
+      } = measure();
+      var localY = ev.clientY - rect.top + root.scrollTop;
+      var current = sessionRef.current;
+      if (!current) return;
+      var target = insertionIndexForY({
+        localY,
+        items: measured,
+        sourceIndex: current.sourceIndex,
+        count: itemsRef.current.length,
+        size
+      });
+      if (target === current.targetIndex) return;
+      var moved = {
+        ...current,
+        targetIndex: target
+      };
+      setSession(moved);
+      sessionRef.current = moved;
+      announce("move", toDrag(moved), moved.label);
+    };
+    var teardown = function teardown2() {
+      if (hold != null) clearTimeout(hold);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onCancel);
+    };
+    var onUp = function onUp2() {
+      teardown();
+      if (lifted) dropSession();
+    };
+    var onCancel = function onCancel2() {
+      teardown();
+      if (lifted) cancelSession();
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    if (pointerType === "mouse") {
+      liftPointer(e.clientY);
+    } else {
+      hold = setTimeout(function () {
+        return liftPointer(e.clientY);
+      }, TOUCH_LONG_PRESS_MS);
+    }
+  }, [announce, cancelSession, containerRef, dropSession, enabled, liftAt, measure, rowEnabled, toDrag]);
+  var translateForIndex = useCallback(function (index) {
+    var current = session;
+    if (!current) return 0;
+    return siblingOffset({
+      index,
+      sourceIndex: current.sourceIndex,
+      gapIndex: current.targetIndex,
+      size: current.size
+    });
+  }, [session]);
+  return {
+    session,
+    announcement,
+    focusedIndex,
+    setFocusedIndex,
+    rowEnabled,
+    ids,
+    labels,
+    liftAt,
+    onRowKeyDown,
+    onHandleKeyDown,
+    onHandlePointerDown,
+    translateForIndex,
+    liveProps: {
+      "aria-live": "polite",
+      "aria-atomic": true,
+      "data-sortable-live": "true"
+    }
+  };
+}
+export { SortableSessionProvider, useSortableDragging, useSortableRows };
+//# sourceMappingURL=useSortableRows.native.js.map

package/dist/esm/SortableList/useSortableRows.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","createElement","useCallback","useContext","useEffect","useMemo","useRef","useState","AUTO_SCROLL_EDGE_PX","AUTO_SCROLL_MAX_SPEED","LIST_COLUMN_ID","TOUCH_LONG_PRESS_MS","applyReorder","autoScrollVelocity","describeCancel","describeDragState","formatListAnnouncement","insertionIndexForY","keyboardLift","keyboardMove","listBoardSnapshot","resolveDrop","siblingOffset","DEFAULT_ROW_SELECTOR","SortableSessionContext","sourceId","SortableSessionProvider","param","children","Provider","value","useSortableDragging","itemId","dragging","useSortableRows","items","getId","getLabel","canReorder","onChange","enabled","containerRef","rowSelector","session","setSession","announcement","setAnnouncement","focusedIndex","setFocusedIndex","sessionRef","current","itemsRef","board","length","ids","map","item","i","labels","rowEnabled","index","announce","type","drag","label","sourcePosition","sourceIndex","toDrag","s","sourceColumnId","target","columnId","targetIndex","focusRow","id","_el_focus","root","el","querySelector","focus","call","liftAt","mode","kb","next","size","moveSession","direction","moved","dropSession","result","commit","from","to","requestAnimationFrame","cancelSession","onRowKeyDown","e","key","preventDefault","onHandleKeyDown","window","onKey","onKey2","_e_target_closest","_e_target","stopPropagation","handle","closest","getAttribute","indexOf","addEventListener","removeEventListener","measure","_ref","_rows_","els","querySelectorAll","top","getBoundingClientRect","rows","r","start","scrollTop","height","onHandlePointerDown","_e_pointerType","_e_preventDefault","pointerType","lifted","hold","liftPointer","liftPointer2","clientY","measured","sized","localY","count","onMove","onMove2","ev","rect","vel","pos","end","bottom","edge","maxSpeed","teardown","teardown2","clearTimeout","onUp","onCancel","onUp2","onCancel2","setTimeout"],"sources":["../../../src/SortableList/useSortableRows.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/Tabs/index.mjs

@@ -1,9 +1,34 @@
-import { MIN_PRESS_TARGET, ensureKeyboardModalityTracking, getGroupPosition, keyboardFocusRingProps, pressTargetHitSlop, stackEdgeRadius, stackRadiusProps, useAccentTintedSurface, useReadableTextOn, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
+import { MIN_PRESS_TARGET, ensureKeyboardModalityTracking, getGroupPosition, hairline, keyboardFocusRingProps, pressTargetHitSlop, stackEdgeRadius, stackRadiusProps, useAccentTintedSurface, useReadableTextOn, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
 import React from "react";
+import { useDirection } from "../hooks/useDirection.mjs";
 import { useTranslation } from "../shared/i18n.mjs";
-import { ScrollView, Tabs as TamaguiTabs, Text, Theme, View, YStack, isWeb, styled } from "tamagui";
+import { wrapBareTextChildren } from "../shared/textRidesText.mjs";
+import { ScrollView, Tabs as TamaguiTabs, Text, Theme, View, YStack, isWeb, styled, withStaticProperties } from "tamagui";
 import { componentColors } from "../componentColors.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+function tabsOverflowFades(offset, viewport, content, direction, threshold = 4) {
+  const range = Math.max(content - viewport, 0);
+  const minScrollLeft = direction === "rtl" ? -range : 0;
+  const fromLeft = offset - minScrollLeft;
+  const fromRight = minScrollLeft + range - offset;
+  return {
+    left: fromLeft > threshold,
+    right: fromRight > threshold
+  };
+}
+function tabsScrollIntoViewX(layout, offset, viewport, content, direction, pad = 32) {
+  const range = Math.max(content - viewport, 0);
+  if (range <= 0) return void 0;
+  const minScrollLeft = direction === "rtl" ? -range : 0;
+  const fromLeft = offset - minScrollLeft;
+  let targetFromLeft;
+  if (layout.x < fromLeft + pad) {
+    targetFromLeft = Math.max(0, layout.x - pad);
+  } else if (layout.x + layout.width > fromLeft + viewport - pad) {
+    targetFromLeft = Math.min(range, layout.x + layout.width - viewport + pad);
+  }
+  return targetFromLeft === void 0 ? void 0 : targetFromLeft + minScrollLeft;
+}
 function underlineStackRadius(position, radius) {
   const start = position === "first" || position === "only";
   const end = position === "last" || position === "only";
@@ -24,15 +49,7 @@ const fillProps = {
 const StripWrapper = styled(View, {
   name: "MpTabsStrip",
   width: "100%",
-  position: "relative",
-  variants: {
-    underline: {
-      true: {
-        borderBottomWidth: 1,
-        borderColor: componentColors.surface.border
-      }
-    }
-  }
+  position: "relative"
 });
 const TabsList = styled(TamaguiTabs.List, {
   name: "MpTabsList",
@@ -77,7 +94,9 @@ const UnderlineIndicator = styled(View, {
   position: "absolute",
   bottom: 0,
   height: 2,
-  borderRadius: 1,
+  // Token scale (design-audit): 0, not a 1px radius that isn't a stop.
+  // A 2px selection mark is a rectangle sitting on the G10 hairline.
+  borderRadius: 0,
   backgroundColor: "$color9"
 });
 const ThumbIndicator = styled(View, {
@@ -97,7 +116,7 @@ const TabLabel = styled(Text, {
     }
   }
 });
-function Tabs({
+function TabsRoot({
   items,
   value,
   defaultValue,
@@ -113,11 +132,13 @@ function Tabs({
   fill = false,
   activationMode = "automatic",
   loop = true,
-  disabled = false
+  disabled = false,
+  ariaLabel
 }) {
   const {
     t
   } = useTranslation();
+  const direction = useDirection();
   const intent = accent && "accent" || error && "error" || warning && "warning" || success && "success" || void 0;
   const {
     knobProps,
@@ -172,12 +193,8 @@ function Tabs({
       viewport,
       content
     } = scrollMetrics.current;
-    const left = offset > 4;
-    const right = content - viewport - offset > 4;
-    setFades(prev => prev.left === left && prev.right === right ? prev : {
-      left,
-      right
-    });
+    const next = tabsOverflowFades(offset, viewport, content, direction);
+    setFades(prev => prev.left === next.left && prev.right === next.right ? prev : next);
   };
   React.useEffect(() => {
     if (!activeLayout) return;
@@ -186,21 +203,14 @@ function Tabs({
       viewport,
       content
     } = scrollMetrics.current;
-    if (content <= viewport) return;
-    const pad = 32;
-    let target;
-    if (activeLayout.x < offset + pad) {
-      target = Math.max(0, activeLayout.x - pad);
-    } else if (activeLayout.x + activeLayout.width > offset + viewport - pad) {
-      target = Math.min(content - viewport, activeLayout.x + activeLayout.width - viewport + pad);
-    }
+    const target = tabsScrollIntoViewX(activeLayout, offset, viewport, content, direction);
     if (target !== void 0) {
       scrollRef.current?.scrollTo({
         x: target,
         animated: true
       });
     }
-  }, [activeLayout]);
+  }, [activeLayout, direction]);
   const isUnderline = variant === "underline";
   const indicatorTheme = intent ?? "accent";
   const visualSizeToken = size ?? knobProps.sizeToken;
@@ -208,7 +218,7 @@ function Tabs({
   const slop = Math.max(0, Math.ceil((MIN_PRESS_TARGET - sizePx) / 2));
   const tabHitSlop = pressTargetHitSlop(sizePx);
   const radiusToken = knobProps.borderRadius.borderRadius;
-  const outerRadiusToken = knobProps.borderRadiusOuter.borderRadius;
+  const outerRadiusToken = knobProps.borderRadiusNested.borderRadius;
   const transition = knobProps.transition;
   const enabledCount = items.length;
   const activeIndex = items.findIndex(i => i.value === currentValue);
@@ -228,6 +238,7 @@ function Tabs({
     children: /* @__PURE__ */jsx(UnderlineIndicator, {
       x: activeLayout.x,
       width: activeLayout.width,
+      "data-tabs-indicator": "underline",
       ...(transition ? {
         transition
       } : void 0)
@@ -240,6 +251,7 @@ function Tabs({
       width: activeLayout.width,
       height: activeLayout.height,
       backgroundColor: selectedTint ?? "$color4",
+      "data-tabs-indicator": "thumb",
       ...thumbRadius,
       ...(knobProps.elevation !== void 0 ? {
         elevation: knobProps.elevation
@@ -250,6 +262,7 @@ function Tabs({
     })
   }) : null;
   if (items.length === 0) return null;
+  const tabListLabel = ariaLabel ?? t("Tabs");
   return /* @__PURE__ */jsxs(TamaguiTabs, {
     value: currentValue,
     onValueChange: handleChange,
@@ -260,11 +273,17 @@ function Tabs({
     ...(fill ? fillProps : void 0),
     "data-tabs-variant": variant,
     "data-tabs-fill": fill ? "true" : void 0,
+    "data-tabs-dir": direction,
     "data-size-token": visualSizeToken,
     "data-density": knobProps.density,
     "data-visual-px": sizePx,
     children: [/* @__PURE__ */jsx(StripWrapper, {
-      underline: isUnderline,
+      ...(isUnderline ? {
+        ...hairline.bottom,
+        borderColor: componentColors.surface.border
+      } : void 0),
+      "data-fade-left": fades.left ? "true" : void 0,
+      "data-fade-right": fades.right ? "true" : void 0,
       children: /* @__PURE__ */jsx(ScrollView, {
         ref: scrollRef,
         horizontal: true,
@@ -289,7 +308,7 @@ function Tabs({
         },
         children: /* @__PURE__ */jsxs(TabsList, {
           loop,
-          "aria-label": t("Tabs"),
+          "aria-label": tabListLabel,
           "data-tabs-list": variant,
           "data-size-token": visualSizeToken,
           "data-density": knobProps.density,
@@ -305,7 +324,7 @@ function Tabs({
             gap: 0,
             // Full fragment spread (AGENTS.md knob rule) so the
             // cornerSmoothing class rides along with the radius.
-            ...knobProps.borderRadiusOuter
+            ...knobProps.borderRadiusNested
           }),
           children: [indicator, items.map((item, itemIndex) => {
             const isActive = item.value === currentValue;
@@ -368,7 +387,7 @@ function Tabs({
                   fontFamily: knobProps.label.fontFamily,
                   fontWeight: isActive ? "700" : knobProps.label.fontWeight,
                   color: isDisabled ? componentColors.text.muted : isActive ? !isUnderline && onSelectedTint ? onSelectedTint : componentColors.text.primary : componentColors.text.secondary,
-                  children: item.label
+                  children: wrapBareTextChildren(item.label, label => label)
                 }), item.badge]
               })
             }, item.value);
@@ -418,8 +437,11 @@ function Tabs({
     })]
   });
 }
-Tabs.List = TamaguiTabs.List;
-Tabs.Tab = TamaguiTabs.Tab;
-Tabs.Content = TamaguiTabs.Content;
-export { Tabs };
+TabsRoot.displayName = "Tabs";
+const Tabs = withStaticProperties(TabsRoot, {
+  List: TamaguiTabs.List,
+  Tab: TamaguiTabs.Tab,
+  Content: TamaguiTabs.Content
+});
+export { Tabs, tabsOverflowFades, tabsScrollIntoViewX };
 //# sourceMappingURL=index.mjs.map