@storybook/react-native-ui 10.2.0 → 10.2.2-alpha.0

package/dist/index.js

@@ -726,14 +726,14 @@ var Explorer = import_react7.default.memo(function Explorer2({
 });
 
 // src/Sidebar.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_react_native_theming10 = require("@storybook/react-native-theming");
 
 // src/Search.tsx
 var import_bottom_sheet = require("@gorhom/bottom-sheet");
 var import_react_native_theming8 = require("@storybook/react-native-theming");
-var import_fuse = __toESM(require("fuse.js"));
-var import_react9 = __toESM(require("react"));
+var import_react9 = require("@nozbe/microfuzz/react");
+var import_react10 = __toESM(require("react"));
 var import_react_native2 = require("react-native");
 
 // src/icon/CloseIcon.tsx
@@ -785,22 +785,6 @@ var SearchIcon = ({ width = 14, height = 14, ...props }) => {
 var import_react_native_ui_common3 = require("@storybook/react-native-ui-common");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_MAX_SEARCH_RESULTS = 50;
-var options = {
-  shouldSort: true,
-  tokenize: true,
-  findAllMatches: true,
-  includeScore: true,
-  includeMatches: true,
-  threshold: 0.2,
-  location: 0,
-  distance: 100,
-  maxPatternLength: 32,
-  minMatchCharLength: 1,
-  keys: [
-    { name: "name", weight: 0.7 },
-    { name: "path", weight: 0.3 }
-  ]
-};
 var SearchIconWrapper = import_react_native_theming8.styled.View({
   position: "absolute",
   top: 0,
@@ -856,15 +840,15 @@ var ClearIcon = import_react_native_theming8.styled.TouchableOpacity(({ theme })
   justifyContent: "center",
   height: "100%"
 }));
-var Search = import_react9.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
+var Search = import_react10.default.memo(function Search2({ children, dataset, setSelection, getLastViewed, initialQuery = "" }) {
   const context = (0, import_bottom_sheet.useBottomSheetInternal)(true);
   const isBottomSheet = context !== null;
-  const inputRef = (0, import_react9.useRef)(null);
-  const [inputValue, setInputValue] = (0, import_react9.useState)(initialQuery);
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const [allComponents, showAllComponents] = (0, import_react9.useState)(false);
+  const inputRef = (0, import_react10.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react10.useState)(initialQuery);
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const [allComponents, showAllComponents] = (0, import_react10.useState)(false);
   const { scrollToSelectedNode } = useSelectedNode();
-  const selectStory = (0, import_react9.useCallback)(
+  const selectStory = (0, import_react10.useCallback)(
     (id, refId) => {
       setSelection({ storyId: id, refId });
       inputRef.current?.blur();
@@ -874,11 +858,10 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
     },
     [scrollToSelectedNode, setSelection]
   );
-  const getItemProps = (0, import_react9.useCallback)(
+  const getItemProps = (0, import_react10.useCallback)(
     ({ item: result }) => {
       return {
         icon: result?.item?.type === "component" ? "component" : "story",
-        result,
         onPress: () => {
           if (result?.item?.type === "story") {
             selectStory(result.item.id, result.item.refId);
@@ -889,7 +872,6 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
           }
         },
         score: result.score,
-        refIndex: result.refIndex,
         item: result.item,
         matches: result.matches,
         isHighlighted: false
@@ -897,63 +879,69 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
     },
     [selectStory]
   );
-  const makeFuse = (0, import_react9.useCallback)(() => {
-    const list = dataset.entries.reduce((acc, [refId, { index }]) => {
+  const deferredDataset = (0, import_react10.useDeferredValue)(dataset);
+  const searchList = (0, import_react10.useMemo)(() => {
+    return deferredDataset.entries.reduce((acc, [refId, { index }]) => {
       if (index) {
         acc.push(
           ...Object.values(index).map((item) => {
-            return (0, import_react_native_ui_common3.searchItem)(item, dataset.hash[refId]);
+            return (0, import_react_native_ui_common3.searchItem)(item, deferredDataset.hash[refId]);
           })
         );
       }
       return acc;
     }, []);
-    return new import_fuse.default(list, options);
-  }, [dataset]);
-  const getResults = (0, import_react9.useCallback)(
-    (input2) => {
-      const fuse = makeFuse();
-      if (!input2) return [];
-      let results2 = [];
-      const resultIds = /* @__PURE__ */ new Set();
-      const distinctResults = fuse.search(input2).filter(({ item }) => {
-        if (!(item.type === "component" || item.type === "docs" || item.type === "story") || resultIds.has(item.parent)) {
-          return false;
-        }
-        resultIds.add(item.id);
-        return true;
-      });
-      if (distinctResults.length) {
-        results2 = distinctResults.slice(0, allComponents ? 1e3 : DEFAULT_MAX_SEARCH_RESULTS);
-        if (distinctResults.length > DEFAULT_MAX_SEARCH_RESULTS && !allComponents) {
-          results2.push({
-            showAll: () => showAllComponents(true),
-            totalCount: distinctResults.length,
-            moreCount: distinctResults.length - DEFAULT_MAX_SEARCH_RESULTS
-          });
-        }
+  }, [deferredDataset]);
+  const deferredQuery = (0, import_react10.useDeferredValue)(inputValue);
+  const queryText = (0, import_react10.useMemo)(() => deferredQuery ? deferredQuery.trim() : "", [deferredQuery]);
+  const getText = (0, import_react10.useCallback)((item) => [item.name, item.path?.join(" ") ?? ""], []);
+  const mapResultItem = (0, import_react10.useCallback)(
+    ({
+      item,
+      score,
+      matches
+    }) => ({
+      item,
+      score,
+      matches: matches ?? []
+    }),
+    []
+  );
+  const fuzzyResults = (0, import_react9.useFuzzySearchList)({
+    list: searchList,
+    queryText,
+    getText,
+    mapResultItem
+  });
+  const results = (0, import_react10.useMemo)(() => {
+    if (!queryText) return [];
+    const maxResults = allComponents ? 1e3 : DEFAULT_MAX_SEARCH_RESULTS;
+    const processedResults = [];
+    const resultIds = /* @__PURE__ */ new Set();
+    let totalDistinctCount = 0;
+    for (const result of fuzzyResults) {
+      const { item } = result;
+      if (!(item.type === "component" || item.type === "docs" || item.type === "story") || resultIds.has(item.parent)) {
+        continue;
       }
-      const lastViewed = !input2 && getLastViewed();
-      if (lastViewed && lastViewed.length) {
-        results2 = lastViewed.reduce((acc, { storyId, refId }) => {
-          const data = dataset.hash[refId];
-          if (data && data.index && data.index[storyId]) {
-            const story = data.index[storyId];
-            const item = story.type === "story" ? data.index[story.parent] : story;
-            if (!acc.some((res) => res.item.refId === refId && res.item.id === item.id)) {
-              acc.push({ item: (0, import_react_native_ui_common3.searchItem)(item, dataset.hash[refId]), matches: [], score: 0 });
-            }
-          }
-          return acc;
-        }, []);
+      resultIds.add(item.id);
+      totalDistinctCount++;
+      if (processedResults.length < maxResults) {
+        processedResults.push(result);
       }
-      return results2;
-    },
-    [allComponents, dataset.hash, getLastViewed, makeFuse]
-  );
-  const deferredQuery = (0, import_react9.useDeferredValue)(inputValue);
-  const input = deferredQuery ? deferredQuery.trim() : "";
-  const results = input ? getResults(input) : [];
+      if (allComponents && processedResults.length >= maxResults) {
+        break;
+      }
+    }
+    if (!allComponents && totalDistinctCount > DEFAULT_MAX_SEARCH_RESULTS) {
+      processedResults.push({
+        showAll: () => showAllComponents(true),
+        totalCount: totalDistinctCount,
+        moreCount: totalDistinctCount - DEFAULT_MAX_SEARCH_RESULTS
+      });
+    }
+    return processedResults;
+  }, [queryText, fuzzyResults, allComponents]);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(SearchField, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SearchIcon, {}) }),
@@ -978,7 +966,7 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
       )
     ] }),
     children({
-      query: input,
+      query: queryText,
       results,
       isBrowsing: !isOpen || !inputValue.length,
       closeMenu: () => {
@@ -991,12 +979,12 @@ var Search = import_react9.default.memo(function Search2({ children, dataset, se
 
 // src/SearchResults.tsx
 var import_react_native_theming9 = require("@storybook/react-native-theming");
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_polished2 = require("polished");
 var import_react_native_ui_common4 = require("@storybook/react-native-ui-common");
 var import_react_native3 = require("react-native");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var ResultsList = import_react_native_theming9.styled.View({
   margin: 0,
   padding: 0,
@@ -1062,22 +1050,23 @@ var RecentlyOpenedTitle = import_react_native_theming9.styled.View(({ theme }) =
   marginBottom: 4,
   alignItems: "center"
 }));
-var Highlight = import_react10.default.memo(
-  function Highlight2({ children, match }) {
-    if (!match) return children;
-    const { value, indices } = match;
-    const { nodes: result } = indices.reduce(
+var Highlight = import_react11.default.memo(
+  function Highlight2({ children, text, ranges }) {
+    if (!ranges || ranges.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: children ?? text });
+    const { nodes: result } = ranges.reduce(
       ({ cursor, nodes }, [start, end], index, { length }) => {
-        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: value.slice(cursor, start) }, `text-${index}`));
-        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Mark, { children: value.slice(start, end + 1) }, `mark-${index}`));
-        if (index === length - 1) {
-          nodes.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: value.slice(end + 1) }, `last-${index}`));
+        if (cursor < start) {
+          nodes.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: text.slice(cursor, start) }, `text-${index}`));
+        }
+        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Mark, { children: text.slice(start, end + 1) }, `mark-${index}`));
+        if (index === length - 1 && end + 1 < text.length) {
+          nodes.push(/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: text.slice(end + 1) }, `last-${index}`));
         }
         return { cursor: end + 1, nodes };
       },
       { cursor: 0, nodes: [] }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: result }, `end-${match.key}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: result });
   }
 );
 var Title = import_react_native_theming9.styled.Text(({ theme }) => ({
@@ -1096,46 +1085,37 @@ var PathText = import_react_native_theming9.styled.Text(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   color: theme.textMutedColor
 }));
-var Result = import_react10.default.memo(function Result2({
+var Result = import_react11.default.memo(function Result2({
   item,
   matches,
   icon: _icon,
   onPress,
   ...props
 }) {
-  const press = (0, import_react10.useCallback)(
+  const press = (0, import_react11.useCallback)(
     (event) => {
       event.preventDefault();
       onPress?.(event);
     },
     [onPress]
   );
-  const nameMatch = matches.find((match) => match.key === "name");
-  const pathMatches = matches.filter((match) => match.key === "path");
+  const nameHighlights = matches?.[0];
+  const pathString = item.path?.join(" ") ?? "";
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ResultRow, { ...props, onPress: press, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(IconWrapper, { children: [
       item.type === "component" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ComponentIcon, { width: "14", height: "14" }),
       item.type === "story" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StoryIcon, { width: "14", height: "14" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ResultRowContent, { testID: "search-result-item--label", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Highlight, { match: nameMatch, children: item.name }, "search-result-item--label-highlight") }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Path9, { children: item.path.map((group, index) => {
-        const pathSeparator = index === item.path.length - 1 ? "" : "/";
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native3.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          Highlight,
-          {
-            match: pathMatches.find((match) => match.refIndex === index),
-            children: `${group}${pathSeparator}`
-          }
-        ) }) }, index);
-      }) })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Highlight, { text: item.name, ranges: nameHighlights, children: item.name }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Path9, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Highlight, { text: pathString, ranges: matches?.[1], children: item.path?.join(" / ") }) }) })
     ] })
   ] });
 });
 var Text = import_react_native_theming9.styled.Text(({ theme }) => ({
   color: theme.color.defaultText
 }));
-var SearchResults = import_react10.default.memo(function SearchResults2({
+var SearchResults = import_react11.default.memo(function SearchResults2({
   query,
   results,
   closeMenu,
@@ -1170,7 +1150,7 @@ var SearchResults = import_react10.default.memo(function SearchResults2({
       }
       const { item } = result;
       const key = `${item.refId}::${item.id}`;
-      return /* @__PURE__ */ (0, import_react11.createElement)(
+      return /* @__PURE__ */ (0, import_react12.createElement)(
         Result,
         {
           ...result,
@@ -1208,18 +1188,18 @@ var Top = import_react_native_theming10.styled.View({
   flex: 1,
   flexDirection: "row"
 });
-var Swap = import_react12.default.memo(function Swap2({
+var Swap = import_react13.default.memo(function Swap2({
   children,
   condition
 }) {
-  const [a, b] = import_react12.default.Children.toArray(children);
+  const [a, b] = import_react13.default.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native4.View, { style: { display: condition ? "flex" : "none" }, children: a }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native4.View, { style: { display: condition ? "none" : "flex" }, children: b })
   ] });
 });
 var useCombination = (index, indexError, previewInitialized, status, refs) => {
-  const hash = (0, import_react12.useMemo)(
+  const hash = (0, import_react13.useMemo)(
     () => ({
       [DEFAULT_REF_ID]: {
         index,
@@ -1234,9 +1214,9 @@ var useCombination = (index, indexError, previewInitialized, status, refs) => {
     }),
     [refs, index, indexError, previewInitialized, status]
   );
-  return (0, import_react12.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
+  return (0, import_react13.useMemo)(() => ({ hash, entries: Object.entries(hash) }), [hash]);
 };
-var Sidebar = import_react12.default.memo(function Sidebar2({
+var Sidebar = import_react13.default.memo(function Sidebar2({
   storyId = null,
   refId = DEFAULT_REF_ID,
   index,
@@ -1246,7 +1226,7 @@ var Sidebar = import_react12.default.memo(function Sidebar2({
   refs = {},
   setSelection
 }) {
-  const selected = (0, import_react12.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
+  const selected = (0, import_react13.useMemo)(() => storyId && { storyId, refId }, [storyId, refId]);
   const dataset = useCombination(index, indexError, previewInitialized, status, refs);
   const lastViewedProps = (0, import_react_native_ui_common5.useLastViewed)(selected);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Container2, { style: { paddingHorizontal: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Top, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Search, { dataset, setSelection, ...lastViewedProps, children: ({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Swap, { condition: isBrowsing, children: [
@@ -1280,7 +1260,7 @@ var import_bottom_sheet4 = require("@gorhom/bottom-sheet");
 var import_portal = require("@gorhom/portal");
 var import_react_native_theming15 = require("@storybook/react-native-theming");
 var import_react_native_ui_common7 = require("@storybook/react-native-ui-common");
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_native8 = require("react-native");
 var import_react_native_gesture_handler2 = require("react-native-gesture-handler");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
@@ -1317,13 +1297,13 @@ var BottomBarToggleIcon = ({
 };
 
 // src/icon/CloseFullscreenIcon.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_react_native_svg10 = __toESM(require("react-native-svg"));
 var import_react_native_theming11 = require("@storybook/react-native-theming");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }) {
   const theme = (0, import_react_native_theming11.useTheme)();
-  const fillColor = (0, import_react13.useMemo)(() => {
+  const fillColor = (0, import_react14.useMemo)(() => {
     return color ?? theme.color.defaultText;
   }, [color, theme.color.defaultText]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_svg10.default, { fill: fillColor, height, viewBox: "0 0 16 16", width, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_svg10.Path, { d: "M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.5 0 00-.5-.5h-4a.5.5 0 01-.5-.5zm10 1a1.5 1.5 0 011.5-1.5h4a.5.5 0 010 1h-4a.5.5 0 00-.5.5v4a.5.5 0 01-1 0v-4z" }) });
@@ -1332,11 +1312,11 @@ function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }) {
 // src/icon/FullscreenIcon.tsx
 var import_react_native_svg11 = __toESM(require("react-native-svg"));
 var import_react_native_theming12 = require("@storybook/react-native-theming");
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function FullscreenIcon({ color, width = 14, height = 14, ...props }) {
   const theme = (0, import_react_native_theming12.useTheme)();
-  const fillColor = (0, import_react14.useMemo)(() => {
+  const fillColor = (0, import_react15.useMemo)(() => {
     return color ?? theme.color.defaultText;
   }, [color, theme.color.defaultText]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native_svg11.default, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -1371,7 +1351,7 @@ var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
 var import_manager_api = require("storybook/manager-api");
 var import_react_native_theming13 = require("@storybook/react-native-theming");
 var import_types = require("storybook/internal/types");
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_react_native5 = require("react-native");
 var import_react_native_gesture_handler = require("react-native-gesture-handler");
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
@@ -1384,15 +1364,15 @@ var bottomSheetStyle = {
 var contentStyle = {
   flex: 1
 };
-var MobileAddonsPanel = (0, import_react15.forwardRef)(
+var MobileAddonsPanel = (0, import_react16.forwardRef)(
   ({ storyId }, ref) => {
     const theme = (0, import_react_native_theming13.useTheme)();
     const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
-    const addonsPanelBottomSheetRef = (0, import_react15.useRef)(null);
+    const addonsPanelBottomSheetRef = (0, import_react16.useRef)(null);
     const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
     const animatedPosition = (0, import_react_native_reanimated.useSharedValue)(0);
     (0, import_react_native_reanimated.useAnimatedKeyboard)();
-    (0, import_react15.useImperativeHandle)(ref, () => ({
+    (0, import_react16.useImperativeHandle)(ref, () => ({
       setAddonsPanelOpen: (open) => {
         if (open) {
           addonsPanelBottomSheetRef.current?.present();
@@ -1478,14 +1458,14 @@ var centeredStyle = {
 var hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
 var AddonsTabs = ({ onClose, storyId }) => {
   const panels = import_manager_api.addons.getElements(import_types.Addon_TypesEnum.PANEL);
-  const [addonSelected, setAddonSelected] = (0, import_react15.useState)(Object.keys(panels)[0]);
+  const [addonSelected, setAddonSelected] = (0, import_react16.useState)(Object.keys(panels)[0]);
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const scrollContentContainerStyle = (0, import_react_native_ui_common6.useStyle)(() => {
     return {
       paddingBottom: insets.bottom + 16
     };
   });
-  const panel = (0, import_react15.useMemo)(() => {
+  const panel = (0, import_react16.useMemo)(() => {
     if (!storyId) {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native5.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native5.Text, { children: "No Story Selected" }) });
     }
@@ -1558,7 +1538,7 @@ var TabText = import_react_native_theming13.styled.Text(({ theme, active }) => (
 // src/MobileMenuDrawer.tsx
 var import_bottom_sheet3 = __toESM(require("@gorhom/bottom-sheet"));
 var import_react_native_theming14 = require("@storybook/react-native-theming");
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_native6 = require("react-native");
 var import_react_native_reanimated2 = require("react-native-reanimated");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
@@ -1591,15 +1571,15 @@ var BottomSheetBackdropComponent = (backdropComponentProps) => {
   );
 };
 var snapPoints = ["50%", "75%"];
-var MobileMenuDrawer = (0, import_react16.memo)(
-  (0, import_react16.forwardRef)(({ children }, ref) => {
+var MobileMenuDrawer = (0, import_react17.memo)(
+  (0, import_react17.forwardRef)(({ children }, ref) => {
     const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
     const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
     const theme = (0, import_react_native_theming14.useTheme)();
-    const menuBottomSheetRef = (0, import_react16.useRef)(null);
+    const menuBottomSheetRef = (0, import_react17.useRef)(null);
     const { scrollToSelectedNode, scrollRef } = useSelectedNode();
-    const shouldScrollOnOpen = (0, import_react16.useRef)(false);
-    const handleSheetChange = (0, import_react16.useCallback)(
+    const shouldScrollOnOpen = (0, import_react17.useRef)(false);
+    const handleSheetChange = (0, import_react17.useCallback)(
       (index) => {
         if (index >= 0 && shouldScrollOnOpen.current) {
           shouldScrollOnOpen.current = false;
@@ -1608,7 +1588,7 @@ var MobileMenuDrawer = (0, import_react16.memo)(
       },
       [scrollToSelectedNode]
     );
-    (0, import_react16.useImperativeHandle)(ref, () => ({
+    (0, import_react17.useImperativeHandle)(ref, () => ({
       setMobileMenuOpen: (open) => {
         if (open) {
           shouldScrollOnOpen.current = true;
@@ -1619,13 +1599,13 @@ var MobileMenuDrawer = (0, import_react16.memo)(
         }
       }
     }));
-    const bgColorStyle = (0, import_react16.useMemo)(() => {
+    const bgColorStyle = (0, import_react17.useMemo)(() => {
       return { backgroundColor: theme.background.content };
     }, [theme.background.content]);
-    const handleIndicatorStyle = (0, import_react16.useMemo)(() => {
+    const handleIndicatorStyle = (0, import_react17.useMemo)(() => {
       return { backgroundColor: theme.textMutedColor };
     }, [theme.textMutedColor]);
-    const contentContainerStyle2 = (0, import_react16.useMemo)(() => {
+    const contentContainerStyle2 = (0, import_react17.useMemo)(() => {
       return { paddingBottom: insets.bottom };
     }, [insets.bottom]);
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -1660,7 +1640,7 @@ var MobileMenuDrawer = (0, import_react16.memo)(
 );
 
 // src/StorybookLogo.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_native7 = require("react-native");
 
 // src/icon/DarkLogo.tsx
@@ -1801,11 +1781,11 @@ var WIDTH = 125;
 var HEIGHT = 25;
 var NoBrandLogo = ({ theme }) => theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Logo, { height: HEIGHT, width: WIDTH }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DarkLogo, { height: HEIGHT, width: WIDTH });
 function isElement(value) {
-  return (0, import_react17.isValidElement)(value);
+  return (0, import_react18.isValidElement)(value);
 }
 var BrandLogo = ({ theme }) => {
   const imageHasNoWidthOrHeight = typeof theme.brand.image === "object" && typeof theme.brand.image === "object" && "uri" in theme.brand.image && (!("height" in theme.brand.image) || !("width" in theme.brand.image));
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (imageHasNoWidthOrHeight) {
       console.warn(
         "STORYBOOK: When using a remote image as the brand logo, you must also set the width and height.\nFor example:  brand: { image: { uri: 'https://sb.com/img.png', height: 25, width: 25}}"
@@ -1841,7 +1821,7 @@ var BrandLogo = ({ theme }) => {
   }
 };
 var BrandTitle = ({ theme }) => {
-  const brandTitleStyle = (0, import_react17.useMemo)(() => {
+  const brandTitleStyle = (0, import_react18.useMemo)(() => {
     return {
       width: WIDTH,
       height: HEIGHT,
@@ -1865,8 +1845,8 @@ var BrandTitle = ({ theme }) => {
   }
 };
 var StorybookLogo = ({ theme }) => {
-  const image = (0, import_react17.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
-  const title = (0, import_react17.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
+  const image = (0, import_react18.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
+  const title = (0, import_react18.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
   if (image) {
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BrandLogo, { theme });
   } else if (title) {
@@ -1911,8 +1891,8 @@ var Layout = ({
   children
 }) => {
   const theme = (0, import_react_native_theming15.useTheme)();
-  const mobileMenuDrawerRef = (0, import_react18.useRef)(null);
-  const addonPanelRef = (0, import_react18.useRef)(null);
+  const mobileMenuDrawerRef = (0, import_react19.useRef)(null);
+  const addonPanelRef = (0, import_react19.useRef)(null);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const { isDesktop } = (0, import_react_native_ui_common7.useLayout)();
   const [desktopSidebarOpen, setDesktopSidebarOpen] = (0, import_react_native_ui_common7.useStoreBooleanState)(
@@ -1923,8 +1903,8 @@ var Layout = ({
     "desktopPanelState",
     true
   );
-  const [uiHidden, setUiHidden] = (0, import_react18.useState)(false);
-  (0, import_react18.useLayoutEffect)(() => {
+  const [uiHidden, setUiHidden] = (0, import_react19.useState)(false);
+  (0, import_react19.useLayoutEffect)(() => {
     setUiHidden(story?.parameters?.storybookUIVisibility === "hidden");
   }, [story?.parameters?.storybookUIVisibility]);
   const desktopSidebarStyle = (0, import_react_native_ui_common7.useStyle)(
@@ -1993,10 +1973,10 @@ var Layout = ({
     }),
     [theme.barTextColor]
   );
-  const openMobileMenu = (0, import_react18.useCallback)(() => {
+  const openMobileMenu = (0, import_react19.useCallback)(() => {
     mobileMenuDrawerRef.current.setMobileMenuOpen(true);
   }, [mobileMenuDrawerRef]);
-  const setSelection = (0, import_react18.useCallback)(({ storyId: newStoryId }) => {
+  const setSelection = (0, import_react19.useCallback)(({ storyId: newStoryId }) => {
     const channel = import_manager_api2.addons.getChannel();
     channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "10.2.0",
+  "version": "10.2.2-alpha.0",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -38,10 +38,10 @@
   },
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@storybook/react": "10.2.0-beta.1",
-    "@storybook/react-native-theming": "^10.2.0",
-    "@storybook/react-native-ui-common": "^10.2.0",
-    "fuse.js": "^7.1.0",
+    "@nozbe/microfuzz": "^1.0.0",
+    "@storybook/react": "^10.2.2",
+    "@storybook/react-native-theming": "^10.2.2-alpha.0",
+    "@storybook/react-native-ui-common": "^10.2.2-alpha.0",
     "polished": "^4.3.1"
   },
   "peerDependencies": {
@@ -60,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eca4a572e630d6536b62685bdd62114994c7515d"
+  "gitHead": "5e99a2f9de73aa3b88e6517f1016e933cac67c19"
 }

package/src/Search.tsx

@@ -1,8 +1,7 @@
 import { BottomSheetTextInput, useBottomSheetInternal } from '@gorhom/bottom-sheet';
 import { styled } from '@storybook/react-native-theming';
-import type { IFuseOptions } from 'fuse.js';
-import Fuse from 'fuse.js';
-import React, { useCallback, useDeferredValue, useRef, useState } from 'react';
+import { useFuzzySearchList } from '@nozbe/microfuzz/react';
+import React, { useCallback, useDeferredValue, useMemo, useRef, useState } from 'react';
 import { Platform, TextInput, View } from 'react-native';
 import { CloseIcon } from './icon/CloseIcon';
 import { SearchIcon } from './icon/SearchIcon';
@@ -18,24 +17,11 @@ import {
   searchItem,
 } from '@storybook/react-native-ui-common';
 
-const DEFAULT_MAX_SEARCH_RESULTS = 50;
+// Microfuzz highlight types
+type HighlightRange = [number, number];
+type HighlightRanges = HighlightRange[];
 
-const options = {
-  shouldSort: true,
-  tokenize: true,
-  findAllMatches: true,
-  includeScore: true,
-  includeMatches: true,
-  threshold: 0.2,
-  location: 0,
-  distance: 100,
-  maxPatternLength: 32,
-  minMatchCharLength: 1,
-  keys: [
-    { name: 'name', weight: 0.7 },
-    { name: 'path', weight: 0.3 },
-  ],
-} as IFuseOptions<SearchItem>;
+const DEFAULT_MAX_SEARCH_RESULTS = 50;
 
 const SearchIconWrapper = styled.View({
   position: 'absolute',
@@ -111,7 +97,6 @@ export const Search = React.memo<{
   const [inputValue, setInputValue] = useState(initialQuery);
   const [isOpen, setIsOpen] = useState(false);
   const [allComponents, showAllComponents] = useState(false);
-  // const { isMobile } = useLayout();
   const { scrollToSelectedNode } = useSelectedNode();
 
   const selectStory = useCallback(
@@ -133,7 +118,6 @@ export const Search = React.memo<{
     ({ item: result }) => {
       return {
         icon: result?.item?.type === 'component' ? 'component' : 'story',
-        result,
         onPress: () => {
           if (result?.item?.type === 'story') {
             selectStory(result.item.id, result.item.refId);
@@ -144,7 +128,6 @@ export const Search = React.memo<{
           }
         },
         score: result.score,
-        refIndex: result.refIndex,
         item: result.item,
         matches: result.matches,
         isHighlighted: false,
@@ -153,72 +136,103 @@ export const Search = React.memo<{
     [selectStory]
   );
 
-  const makeFuse = useCallback(() => {
-    const list = dataset.entries.reduce<SearchItem[]>((acc, [refId, { index }]) => {
+  // Defer dataset updates to prevent blocking during data changes
+  const deferredDataset = useDeferredValue(dataset);
+
+  // Build the search list - memoized
+  const searchList = useMemo(() => {
+    return deferredDataset.entries.reduce<SearchItem[]>((acc, [refId, { index }]) => {
       if (index) {
         acc.push(
           ...Object.values(index).map((item) => {
-            return searchItem(item, dataset.hash[refId]);
+            return searchItem(item, deferredDataset.hash[refId]);
           })
         );
       }
       return acc;
     }, []);
-    return new Fuse(list, options);
-  }, [dataset]);
-
-  const getResults = useCallback(
-    (input: string) => {
-      const fuse = makeFuse();
-      if (!input) return [];
-
-      let results = [];
-      const resultIds: Set<string> = new Set();
-      const distinctResults = (fuse.search(input) as SearchResult[]).filter(({ item }) => {
-        if (
-          !(item.type === 'component' || item.type === 'docs' || item.type === 'story') ||
-          resultIds.has(item.parent)
-        ) {
-          return false;
-        }
-        resultIds.add(item.id);
-        return true;
-      });
+  }, [deferredDataset]);
+
+  // Defer query input to prevent blocking typing
+  const deferredQuery = useDeferredValue(inputValue);
+  const queryText = useMemo(() => (deferredQuery ? deferredQuery.trim() : ''), [deferredQuery]);
+
+  // getText function for microfuzz - memoized for performance
+  // Returns [name, path] - matches[0] will be name highlights, matches[1] will be path highlights
+  const getText = useCallback((item: SearchItem) => [item.name, item.path?.join(' ') ?? ''], []);
+
+  // Map microfuzz result to our SearchResult type (native format)
+  const mapResultItem = useCallback(
+    ({
+      item,
+      score,
+      matches,
+    }: {
+      item: SearchItem;
+      score: number | null;
+      matches: HighlightRanges[];
+    }): SearchResult => ({
+      item,
+      score,
+      matches: matches ?? [],
+    }),
+    []
+  );
+
+  // Use microfuzz's React hook with built-in memoization
+  const fuzzyResults = useFuzzySearchList({
+    list: searchList,
+    queryText,
+    getText,
+    mapResultItem,
+  });
+
+  // Process results: filter, deduplicate, and limit
+  const results = useMemo(() => {
+    if (!queryText) return [];
+
+    const maxResults = allComponents ? 1000 : DEFAULT_MAX_SEARCH_RESULTS;
+    const processedResults = [];
+    const resultIds = new Set<string>();
 
-      if (distinctResults.length) {
-        results = distinctResults.slice(0, allComponents ? 1000 : DEFAULT_MAX_SEARCH_RESULTS);
-        if (distinctResults.length > DEFAULT_MAX_SEARCH_RESULTS && !allComponents) {
-          results.push({
-            showAll: () => showAllComponents(true),
-            totalCount: distinctResults.length,
-            moreCount: distinctResults.length - DEFAULT_MAX_SEARCH_RESULTS,
-          });
-        }
+    let totalDistinctCount = 0;
+
+    for (const result of fuzzyResults) {
+      const { item } = result;
+
+      // Skip invalid types or duplicates
+      if (
+        !(item.type === 'component' || item.type === 'docs' || item.type === 'story') ||
+        resultIds.has(item.parent)
+      ) {
+        continue;
       }
 
-      const lastViewed = !input && getLastViewed();
-      if (lastViewed && lastViewed.length) {
-        results = lastViewed.reduce((acc, { storyId, refId }) => {
-          const data = dataset.hash[refId];
-          if (data && data.index && data.index[storyId]) {
-            const story = data.index[storyId];
-            const item = story.type === 'story' ? data.index[story.parent] : story;
-            // prevent duplicates
-            if (!acc.some((res) => res.item.refId === refId && res.item.id === item.id)) {
-              acc.push({ item: searchItem(item, dataset.hash[refId]), matches: [], score: 0 });
-            }
-          }
-          return acc;
-        }, []);
+      resultIds.add(item.id);
+      totalDistinctCount++;
+
+      // Only add to results if we haven't reached the limit
+      if (processedResults.length < maxResults) {
+        processedResults.push(result);
       }
 
-      return results;
-    },
-    [allComponents, dataset.hash, getLastViewed, makeFuse]
-  );
-  const deferredQuery = useDeferredValue(inputValue);
-  const input = deferredQuery ? deferredQuery.trim() : '';
-  const results = input ? getResults(input) : [];
+      // Early exit when showing all components and we have enough
+      if (allComponents && processedResults.length >= maxResults) {
+        break;
+      }
+    }
+
+    // Add "show all" option if there are more results than displayed
+    if (!allComponents && totalDistinctCount > DEFAULT_MAX_SEARCH_RESULTS) {
+      processedResults.push({
+        showAll: () => showAllComponents(true),
+        totalCount: totalDistinctCount,
+        moreCount: totalDistinctCount - DEFAULT_MAX_SEARCH_RESULTS,
+      });
+    }
+
+    return processedResults;
+  }, [queryText, fuzzyResults, allComponents]);
 
   return (
     <View style={{ flex: 1 }}>
@@ -251,7 +265,7 @@ export const Search = React.memo<{
       </SearchField>
 
       {children({
-        query: input,
+        query: queryText,
         results,
         isBrowsing: !isOpen || !inputValue.length,
         closeMenu: () => {},

package/src/SearchResults.stories.tsx

@@ -12,6 +12,9 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+// Microfuzz format: matches[0] = name highlights, matches[1] = path highlights
+// Path is joined with spaces: "NestingExample Message bubble"
+// "bubble" starts at index 23 (14 + 1 + 7 + 1 = 23)
 export const Default: Story = {
   args: {
     query: 'bubble',
@@ -35,48 +38,14 @@ export const Default: Story = {
           subtype: 'story',
           exportName: 'First',
         },
-        refIndex: 46,
-        matches: [
-          {
-            indices: [[0, 5]],
-            value: 'bubble',
-            key: 'path',
-            refIndex: 2,
-          },
-        ],
+        // matches[0] = name highlights (none), matches[1] = path highlights
+        matches: [[], [[23, 28]]],
         score: 0.000020134092876783674,
       },
     ],
     getItemProps: () => ({
       icon: 'story',
-      result: {
-        item: {
-          type: 'story',
-          id: 'nestingexample-message-bubble--first',
-          name: 'First',
-          title: 'NestingExample/Message/bubble',
-          importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
-          tags: ['story'],
-          depth: 3,
-          parent: 'nestingexample-message-bubble',
-          prepared: false,
-          refId: 'storybook_internal',
-          path: ['NestingExample', 'Message', 'bubble'],
-          status: null,
-        },
-        refIndex: 46,
-        matches: [
-          {
-            indices: [[0, 5]],
-            value: 'bubble',
-            key: 'path',
-            refIndex: 2,
-          },
-        ],
-        score: 0.000020134092876783674,
-      },
       score: 0.000020134092876783674,
-      refIndex: 46,
       item: {
         type: 'story',
         id: 'nestingexample-message-bubble--first',
@@ -93,14 +62,7 @@ export const Default: Story = {
         subtype: 'story',
         exportName: 'First',
       },
-      matches: [
-        {
-          indices: [[0, 5]],
-          value: 'bubble',
-          key: 'path',
-          refIndex: 2,
-        },
-      ],
+      matches: [[], [[23, 28]]],
       isHighlighted: false,
       onPress: () => {},
     }),

package/src/SearchResults.tsx

@@ -11,12 +11,15 @@ import {
   Button,
 } from '@storybook/react-native-ui-common';
 
-import { FuseResultMatch } from 'fuse.js';
 import { PressableProps, View } from 'react-native';
 
 import { ComponentIcon } from './icon/ComponentIcon';
 import { StoryIcon } from './icon/StoryIcon';
 
+// Microfuzz highlight types
+type HighlightRange = [number, number];
+type HighlightRanges = HighlightRange[];
+
 const ResultsList = styled.View({
   margin: 0,
   padding: 0,
@@ -91,23 +94,29 @@ const RecentlyOpenedTitle = styled.View(({ theme }) => ({
   alignItems: 'center',
 }));
 
-const Highlight: FC<PropsWithChildren<{ match?: FuseResultMatch }>> = React.memo(
-  function Highlight({ children, match }) {
-    if (!match) return children;
-    const { value, indices } = match;
+// Highlight component using native microfuzz format
+// ranges is an array of [start, end] tuples (end is inclusive in microfuzz)
+const Highlight: FC<PropsWithChildren<{ text: string; ranges?: HighlightRanges }>> = React.memo(
+  function Highlight({ children, text, ranges }) {
+    if (!ranges || ranges.length === 0) return <Text>{children ?? text}</Text>;
 
-    const { nodes: result } = indices.reduce<{ cursor: number; nodes: ReactNode[] }>(
+    const { nodes: result } = ranges.reduce<{ cursor: number; nodes: ReactNode[] }>(
       ({ cursor, nodes }, [start, end], index, { length }) => {
-        nodes.push(<Text key={`text-${index}`}>{value.slice(cursor, start)}</Text>);
-        nodes.push(<Mark key={`mark-${index}`}>{value.slice(start, end + 1)}</Mark>);
-        if (index === length - 1) {
-          nodes.push(<Text key={`last-${index}`}>{value.slice(end + 1)}</Text>);
+        // Add text before the highlight
+        if (cursor < start) {
+          nodes.push(<Text key={`text-${index}`}>{text.slice(cursor, start)}</Text>);
+        }
+        // Add highlighted text (end is inclusive in microfuzz)
+        nodes.push(<Mark key={`mark-${index}`}>{text.slice(start, end + 1)}</Mark>);
+        // Add remaining text after last highlight
+        if (index === length - 1 && end + 1 < text.length) {
+          nodes.push(<Text key={`last-${index}`}>{text.slice(end + 1)}</Text>);
         }
         return { cursor: end + 1, nodes };
       },
       { cursor: 0, nodes: [] }
     );
-    return <Text key={`end-${match.key}`}>{result}</Text>;
+    return <Text>{result}</Text>;
   }
 );
 
@@ -145,8 +154,9 @@ const Result: FC<SearchResultProps> = React.memo(function Result({
     [onPress]
   );
 
-  const nameMatch = matches.find((match: FuseResultMatch) => match.key === 'name');
-  const pathMatches = matches.filter((match: FuseResultMatch) => match.key === 'path');
+  // matches[0] = name highlights, matches[1] = path highlights (as joined string)
+  const nameHighlights = matches?.[0];
+  const pathString = item.path?.join(' ') ?? '';
 
   return (
     <ResultRow {...props} onPress={press}>
@@ -156,25 +166,16 @@ const Result: FC<SearchResultProps> = React.memo(function Result({
       </IconWrapper>
       <ResultRowContent testID="search-result-item--label">
         <Title>
-          <Highlight key="search-result-item--label-highlight" match={nameMatch}>
+          <Highlight text={item.name} ranges={nameHighlights}>
             {item.name}
           </Highlight>
         </Title>
         <Path>
-          {item.path.map((group, index) => {
-            const pathSeparator = index === item.path.length - 1 ? '' : '/';
-            return (
-              <View key={index} style={{ flexShrink: 1 }}>
-                <PathText>
-                  <Highlight
-                    match={pathMatches.find((match: FuseResultMatch) => match.refIndex === index)}
-                  >
-                    {`${group}${pathSeparator}`}
-                  </Highlight>
-                </PathText>
-              </View>
-            );
-          })}
+          <PathText>
+            <Highlight text={pathString} ranges={matches?.[1]}>
+              {item.path?.join(' / ')}
+            </Highlight>
+          </PathText>
         </Path>
       </ResultRowContent>
     </ResultRow>