@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/cjs/views/List.cjs

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all) __defProp(target, name, {
@@ -17,12 +19,24 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
 var List_exports = {};
 __export(List_exports, {
-  List: () => List
+  List: () => List,
+  ListRow: () => ListRow,
+  ListRowMeta: () => ListRowMeta,
+  useListItemState: () => useListItemState
 });
 module.exports = __toCommonJS(List_exports);
 var import_componentColors = require("../componentColors.cjs");
@@ -31,10 +45,131 @@ var import_forms = require("@multiplatform.one/forms");
 var import_flash_list = require("@shopify/flash-list");
 var import_theme = require("@multiplatform.one/theme");
 var import_react_hotkeys = require("@tanstack/react-hotkeys");
-var import_react = require("react");
-var import_react_i18next = require("react-i18next");
+var import_react = __toESM(require("react"));
+var import_i18n = require("../shared/i18n.cjs");
 var import_tamagui = require("tamagui");
 var import_jsx_runtime = require("react/jsx-runtime");
+const ListItemStateContext = (0, import_react.createContext)({
+  selected: false,
+  focused: false
+});
+function useListItemState() {
+  return (0, import_react.useContext)(ListItemStateContext);
+}
+function RowText({
+  children,
+  ...props
+}) {
+  if (children == null || children === false) return null;
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...props,
+      children
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children
+  });
+}
+function ListRowMeta({
+  children,
+  width,
+  color
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    selected,
+    onAccent
+  } = useListItemState();
+  const resolved = selected && onAccent ? onAccent : color ?? import_componentColors.componentColors.text.muted;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+    ...knobProps.body,
+    fontSize: "$2",
+    lineHeight: "$2",
+    color: resolved,
+    numberOfLines: 1,
+    minWidth: width,
+    textAlign: "right",
+    userSelect: "none",
+    children
+  });
+}
+function ListRow({
+  icon,
+  title,
+  subtitle,
+  meta
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    selected,
+    onAccent
+  } = useListItemState();
+  const ink = selected && onAccent ? onAccent : import_componentColors.componentColors.text.primary;
+  const muted = selected && onAccent ? onAccent : import_componentColors.componentColors.text.muted;
+  const iconSize = knobProps.sizeToken === "$3" ? 16 : knobProps.sizeToken === "$5" ? 22 : 18;
+  const leading = import_react.default.isValidElement(icon) ? import_react.default.cloneElement(icon, {
+    size: iconSize,
+    color: "currentColor"
+  }) : icon;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    gap: "$3",
+    flex: 1,
+    minWidth: 0,
+    width: "100%",
+    children: [leading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      width: iconSize,
+      height: iconSize,
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      color: muted,
+      ...{
+        "data-list-slot": "icon"
+      },
+      children: leading
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      flex: 1,
+      minWidth: 0,
+      gap: "$1",
+      ...{
+        "data-list-slot": "title"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RowText, {
+        ...knobProps.body,
+        color: ink,
+        fontWeight: "500",
+        numberOfLines: 1,
+        userSelect: "none",
+        children: title
+      }), subtitle != null && subtitle !== false ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(RowText, {
+        ...knobProps.body,
+        fontSize: "$2",
+        lineHeight: "$2",
+        color: muted,
+        opacity: selected ? 0.85 : 1,
+        numberOfLines: 1,
+        userSelect: "none",
+        children: subtitle
+      }) : null]
+    }), meta != null && meta !== false ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      alignItems: "center",
+      gap: "$4",
+      flexShrink: 0,
+      ...{
+        "data-list-slot": "meta"
+      },
+      children: typeof meta === "string" || typeof meta === "number" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ListRowMeta, {
+        children: meta
+      }) : meta
+    }) : null]
+  });
+}
 function List({
   items,
   renderItem,
@@ -48,19 +183,25 @@ function List({
   overscan = 5,
   emptyMessage: emptyMessageProp,
   height: heightProp,
+  selectedIndex: selectedIndexProp,
+  defaultSelectedIndex,
+  onSelectionChange,
   "aria-label": ariaLabel,
   hotkeys: hotkeyOverrides,
   ...stackProps
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const emptyMessage = emptyMessageProp ?? t("No items found");
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   const sz = knobProps.sizeToken;
-  const estimateSize = estimateSizeProp ?? (sz === "$3" ? 44 : sz === "$5" ? 68 : 56);
+  const estimateSize = estimateSizeProp ?? (sz === "$3" ? 48 : sz === "$5" ? 68 : 56);
+  const rowPad = knobProps.panelPadding.padding;
+  const onAccent = (0, import_theme.useReadableTextOn)("$accentBackground");
+  const cornersRadius = knobProps.borderRadius.borderRadius;
   const STREAMING_VIEWPORT_ROWS = 10;
   const scrollCap = estimateSize * STREAMING_VIEWPORT_ROWS;
   const [measuredContentHeight, setMeasuredContentHeight] = (0, import_react.useState)(null);
@@ -68,7 +209,26 @@ function List({
   const listId = (0, import_react.useId)();
   const containerRef = (0, import_react.useRef)(null);
   const flashListRef = (0, import_react.useRef)(null);
-  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
+  const isControlled = selectedIndexProp !== void 0;
+  const [uncontrolledSelected, setUncontrolledSelected] = (0, import_react.useState)(defaultSelectedIndex ?? -1);
+  const selectedIndex = isControlled ? selectedIndexProp : uncontrolledSelected;
+  const selectedRef = (0, import_react.useRef)(selectedIndex);
+  selectedRef.current = selectedIndex;
+  const [containerKeyboardFocused, setContainerKeyboardFocused] = (0, import_react.useState)(false);
+  if (typeof document !== "undefined") (0, import_theme.ensureKeyboardModalityTracking)();
+  const commitSelection = (0, import_react.useCallback)(index => {
+    if (index < 0 || index >= items.length) return;
+    if (!isControlled) setUncontrolledSelected(index);
+    onSelectionChange?.(index, items[index]);
+  }, [isControlled, items, onSelectionChange]);
+  const handleContainerFocus = (0, import_react.useCallback)(() => {
+    if (!(0, import_theme.wasKeyboardFocus)()) return;
+    setContainerKeyboardFocused(true);
+    if (selectedRef.current < 0 && items.length > 0) commitSelection(0);
+  }, [commitSelection, items.length]);
+  const handleContainerBlur = (0, import_react.useCallback)(() => {
+    setContainerKeyboardFocused(false);
+  }, []);
   const scrollToIndex = (0, import_react.useCallback)(index => {
     if (index >= 0 && index < items.length) {
       flashListRef.current?.scrollToIndex({
@@ -77,124 +237,151 @@ function List({
       });
     }
   }, [items.length]);
+  const moveSelection = (0, import_react.useCallback)(next => {
+    const clamped = Math.max(0, Math.min(next, items.length - 1));
+    commitSelection(clamped);
+    scrollToIndex(clamped);
+    return clamped;
+  }, [commitSelection, items.length, scrollToIndex]);
   const hotkeyOpts = {
     target: containerRef
   };
   (0, import_react_hotkeys.useHotkey)(hotkeyOverrides?.next ?? "ArrowDown", () => {
-    setFocusedIndex(prev => {
-      const next = prev < 0 ? 0 : Math.min(prev + 1, items.length - 1);
-      scrollToIndex(next);
-      return next;
-    });
+    const current = selectedRef.current;
+    moveSelection(current < 0 ? 0 : current + 1);
   }, hotkeyOpts);
   (0, import_react_hotkeys.useHotkey)(hotkeyOverrides?.prev ?? "ArrowUp", () => {
-    setFocusedIndex(prev => {
-      const next = prev < 0 ? items.length - 1 : Math.max(prev - 1, 0);
-      scrollToIndex(next);
-      return next;
-    });
+    const current = selectedRef.current;
+    moveSelection(current < 0 ? items.length - 1 : current - 1);
   }, hotkeyOpts);
   (0, import_react_hotkeys.useHotkey)(hotkeyOverrides?.select ?? "Enter", () => {
-    if (focusedIndex >= 0 && focusedIndex < items.length) {
-      onItemClick?.(items[focusedIndex]);
+    const current = selectedRef.current;
+    if (current >= 0 && current < items.length) {
+      onItemClick?.(items[current]);
     }
   }, hotkeyOpts);
   (0, import_react_hotkeys.useHotkey)(hotkeyOverrides?.first ?? "Home", () => {
-    if (items.length > 0) {
-      setFocusedIndex(0);
-      scrollToIndex(0);
-    }
+    if (items.length > 0) moveSelection(0);
   }, hotkeyOpts);
   (0, import_react_hotkeys.useHotkey)(hotkeyOverrides?.last ?? "End", () => {
-    if (items.length > 0) {
-      const lastIndex = items.length - 1;
-      setFocusedIndex(lastIndex);
-      scrollToIndex(lastIndex);
-    }
+    if (items.length > 0) moveSelection(items.length - 1);
   }, hotkeyOpts);
   (0, import_react_hotkeys.useHotkey)(hotkeyOverrides?.pageDown ?? "PageDown", () => {
-    setFocusedIndex(prev => {
-      const next = Math.min((prev < 0 ? 0 : prev) + 10, items.length - 1);
-      scrollToIndex(next);
-      return next;
-    });
+    const current = selectedRef.current < 0 ? 0 : selectedRef.current;
+    moveSelection(current + 10);
   }, hotkeyOpts);
   (0, import_react_hotkeys.useHotkey)(hotkeyOverrides?.pageUp ?? "PageUp", () => {
-    setFocusedIndex(prev => {
-      const next = Math.max((prev < 0 ? 0 : prev) - 10, 0);
-      scrollToIndex(next);
-      return next;
-    });
+    const current = selectedRef.current < 0 ? 0 : selectedRef.current;
+    moveSelection(current - 10);
   }, hotkeyOpts);
   const handleEndReached = (0, import_react.useCallback)(() => {
     if (onLoadMore && hasMore && !isLoading) {
       onLoadMore();
     }
   }, [onLoadMore, hasMore, isLoading]);
-  const effectiveFocused = focusedIndex >= items.length ? -1 : focusedIndex;
-  const listBody = items.length === 0 ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-    ...knobProps.gap,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-      ref: containerRef,
-      role: "list",
-      "aria-label": ariaLabel,
-      "aria-activedescendant": effectiveFocused >= 0 ? `${listId}-item-${effectiveFocused}` : void 0,
-      tabIndex: 0,
-      outlineWidth: 0,
-      style: {
-        height
+  const effectiveSelected = selectedIndex >= items.length ? -1 : selectedIndex;
+  const showKeyboardRing = containerKeyboardFocused && (0, import_theme.wasKeyboardFocus)();
+  const listBody = items.length === 0 ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    ref: containerRef,
+    role: "list",
+    "aria-label": ariaLabel,
+    "aria-activedescendant": effectiveSelected >= 0 ? `${listId}-item-${effectiveSelected}` : void 0,
+    tabIndex: 0,
+    outlineWidth: 0,
+    onFocus: handleContainerFocus,
+    onBlur: handleContainerBlur,
+    style: {
+      height
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_flash_list.FlashList, {
+      ref: flashListRef,
+      data: items,
+      extraData: {
+        selected: effectiveSelected,
+        ring: showKeyboardRing
       },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_flash_list.FlashList, {
-        ref: flashListRef,
-        data: items,
-        drawDistance: overscan * estimateSize,
-        onEndReached: handleEndReached,
-        onEndReachedThreshold: 0.5,
-        onContentSizeChange: (_w, contentHeight) => {
-          if (contentHeight > 0) {
-            setMeasuredContentHeight(prev => prev === contentHeight ? prev : contentHeight);
-          }
-        },
-        keyExtractor: (_, index) => `${listId}-item-${index}`,
-        renderItem: ({
-          item,
-          index
-        }) => {
-          const isFocused = effectiveFocused === index;
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+      drawDistance: overscan * estimateSize,
+      onEndReached: handleEndReached,
+      onEndReachedThreshold: 0.5,
+      onContentSizeChange: (_w, contentHeight) => {
+        if (contentHeight > 0) {
+          setMeasuredContentHeight(prev => prev === contentHeight ? prev : contentHeight);
+        }
+      },
+      keyExtractor: (_, index) => `${listId}-item-${index}`,
+      renderItem: ({
+        item,
+        index
+      }) => {
+        const isSelected = effectiveSelected === index;
+        const position = (0, import_theme.getGroupPosition)(index, items.length);
+        const corners = (0, import_theme.stackRadiusProps)(position, cornersRadius);
+        const state = {
+          selected: isSelected,
+          focused: isSelected && showKeyboardRing,
+          onAccent
+        };
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          children: [index > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            ...import_theme.hairline.line
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
             id: `${listId}-item-${index}`,
-            size: knobProps.sizeToken,
-            borderRadius: knobProps.borderRadius.borderRadius,
+            ...{
+              "data-list-row": true,
+              ...(isSelected ? {
+                "data-selected": true
+              } : {})
+            },
+            minHeight: import_theme.MIN_PRESS_TARGET,
+            paddingHorizontal: rowPad,
+            paddingVertical: "$2",
+            alignItems: "center",
+            overflow: "hidden",
+            ...corners,
             role: "listitem",
-            "aria-selected": isFocused,
-            ...(isFocused ? {
-              "data-focused": true
+            "aria-selected": isSelected,
+            backgroundColor: isSelected ? "$accentBackground" : "transparent",
+            ...(isSelected && onAccent ? {
+              color: onAccent
             } : {}),
-            backgroundColor: isFocused ? "$accentBackground" : "transparent",
+            ...(isSelected && showKeyboardRing ? {
+              ...import_theme.keyboardFocusRingProps,
+              ...(onAccent ? {
+                outlineColor: onAccent
+              } : {})
+            } : {
+              outlineWidth: 0
+            }),
             hoverStyle: {
-              backgroundColor: import_componentColors.componentColors.interactive.background
+              backgroundColor: isSelected ? "$accentBackground" : import_componentColors.componentColors.interactive.background,
+              ...corners
             },
             pressStyle: {
-              backgroundColor: import_componentColors.componentColors.interactive.hover
+              backgroundColor: isSelected ? "$accentBackground" : import_componentColors.componentColors.interactive.hover,
+              ...corners
             },
-            cursor: onItemClick ? "pointer" : "default",
-            borderBottomWidth: 1,
-            borderBottomColor: "$borderColor",
-            onPress: onItemClick ? () => {
-              setFocusedIndex(index);
-              onItemClick(item);
-            } : void 0,
-            children: renderItem(item, index)
-          });
-        },
-        ListFooterComponent: isLoading && items.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-          padding: "$2",
-          alignItems: "center",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Spinner, {
-            size: "small"
-          })
-        }) : null
-      })
+            cursor: "pointer",
+            ...(knobProps.transition ? {
+              transition: knobProps.transition
+            } : {}),
+            onPress: () => {
+              commitSelection(index);
+              onItemClick?.(item);
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ListItemStateContext.Provider, {
+              value: state,
+              children: renderItem(item, index, state)
+            })
+          })]
+        });
+      },
+      ListFooterComponent: isLoading && items.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        padding: "$2",
+        alignItems: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Spinner, {
+          size: "small"
+        })
+      }) : null
     })
   });
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AsyncBoundary.AsyncBoundary, {