@swan-io/lake 2.5.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/TabView.d.ts

@@ -7,13 +7,21 @@ type Tab = {
     icon?: IconName;
     withSeparator?: boolean;
     count?: number;
+} | {
+    label: string;
+    icon?: IconName;
+    withSeparator?: boolean;
+    count?: number;
+    id: string;
 };
 type Props = {
+    activeTabId?: string;
+    onChange?: (id: string) => void;
     tabs: Tab[];
     otherLabel: string;
     hideIfSingleItem?: boolean;
     padding?: SpacingValue;
     sticky?: boolean;
 };
-export declare const TabView: ({ tabs, otherLabel, hideIfSingleItem, sticky, padding, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TabView: ({ tabs, otherLabel, hideIfSingleItem, sticky, padding, activeTabId, onChange, }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/components/TabView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLocation } from "@swan-io/chicane";
 import { Fragment, forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View, } from "react-native";
 import { P, match } from "ts-pattern";
 import { animations, backgroundColor, colors, negativeSpacings, radii, shadows, spacings, texts, } from "../constants/design";
 import { useHover } from "../hooks/useHover";
@@ -121,24 +121,38 @@ const styles = StyleSheet.create({
         top: -1,
     },
 });
-const Dropdown = ({ tabs, onHoverStart, onHoverEnd, onLinkFocus, onLinkBlur, onLinkPress, }) => {
+const TabViewLink = forwardRef(({ children, style, tab, onChange, activeTabId, onBlur, onFocus, onPress }, ref) => {
+    return match(tab)
+        .with({ url: P.string }, ({ url }) => (_jsx(Link, { ref: ref, to: url, style: style, onFocus: onFocus, onBlur: onBlur, onPress: onPress, children: children })))
+        .with({ id: P.string }, ({ id }) => {
+        const tabId = getTabId(tab);
+        const isActive = tabId === activeTabId;
+        return (_jsx(PressableText, { ref: ref, style: state => style({ ...state, active: isActive }), onPress: () => {
+                onChange?.(id);
+                onPress?.();
+            }, onFocus: onFocus, onBlur: onBlur, children: children }));
+    })
+        .exhaustive();
+});
+const Dropdown = ({ tabs, onHoverStart, onHoverEnd, onLinkFocus, onLinkBlur, onLinkPress, activeTabId, onChange, }) => {
     const containerRef = useRef(null);
     useHover(containerRef, {
         onHoverStart,
         onHoverEnd,
     });
-    return (_jsx(View, { role: "menu", style: styles.dropdown, ref: containerRef, children: tabs.map(({ url, label }) => {
-            return (_jsx(Link, { to: url, onFocus: onLinkFocus, onBlur: onLinkBlur, onPress: onLinkPress, role: "menuitem", ariaCurrentValue: "location", style: ({ active, hovered }) => [
+    return (_jsx(View, { role: "menu", style: styles.dropdown, ref: containerRef, children: tabs.map(tab => {
+            const tabId = getTabId(tab);
+            return (_jsx(TabViewLink, { onChange: onChange, activeTabId: activeTabId, tab: tab, onFocus: onLinkFocus, onBlur: onLinkBlur, onPress: onLinkPress, role: "menuitem", ariaCurrentValue: "location", style: ({ active, hovered }) => [
                     styles.dropdownLink,
                     active && styles.dropdownLinkTextActive,
                     hovered && styles.dropdownLinkTextHovered,
-                ], children: label }, url));
+                ], children: tab.label }, tabId));
         }) }));
 };
 const SHOULD_AUTOFOCUS = new Set(["ForcedOpen", "OpenFromFocus"]);
 const SHOULD_OPEN = new Set(["Open", "ForcedOpen", "OpenFromFocus"]);
 const SHOULD_LOCK_FOCUS = new Set(["ForcedOpen"]);
-const DropdownItems = forwardRef(({ tabs, otherLabel, currentUrl }, ref) => {
+const DropdownItems = forwardRef(({ tabs, otherLabel, currentUrl, activeTabId, onChange }, ref) => {
     const [openingStatus, dispatch] = useReducer((state, action) => {
         return match([action, state])
             .returnType()
@@ -251,13 +265,21 @@ const DropdownItems = forwardRef(({ tabs, otherLabel, currentUrl }, ref) => {
         onHoverEnd,
     });
     const mergedRef = useMergeRefs(containerRef, ref);
-    const activeTab = tabs.find(({ url }) => url === currentUrl);
+    const activeTab = tabs.find(tab => isTabActive({ activeTabId, currentLocationURL: currentUrl, tab }));
     return (_jsxs(View, { style: styles.dropdownHandleContainer, ref: mergedRef, children: [_jsxs(PressableText, { ref: handleRef, role: "button", "aria-expanded": shouldOpen, "aria-haspopup": "true", onFocus: onHandleFocus, onBlur: onAnyBlur, onPress: onPress, style: ({ hovered }) => [
                     styles.link,
                     isNotNullish(activeTab) ? styles.activeLink : hovered ? styles.hoveredLink : null,
-                ], children: [_jsx(Text, { children: otherLabel }), _jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: tabs.length }), _jsx(Space, { width: 4 }), _jsx(Icon, { name: "chevron-down-filled", size: 12 })] }), _jsx(TransitionView, { ...animations.fadeAndSlideInFromBottom, style: styles.dropdownPlacement, children: shouldOpen ? (_jsx(FocusTrap, { autoFocus: shouldAutoFocus, focusLock: shouldLockFocus, returnFocus: shouldLockFocus, onClickOutside: onPressOutside, onEscapeKey: shouldLockFocus ? onEscapeKey : undefined, children: _jsx(Dropdown, { tabs: tabs, onHoverStart: onHoverStart, onHoverEnd: onHoverEnd, onLinkFocus: onLinkFocus, onLinkBlur: onAnyBlur, onLinkPress: onEscapeKey }) })) : null })] }));
+                ], children: [_jsx(Text, { children: otherLabel }), _jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: tabs.length }), _jsx(Space, { width: 4 }), _jsx(Icon, { name: "chevron-down-filled", size: 12 })] }), _jsx(TransitionView, { ...animations.fadeAndSlideInFromBottom, style: styles.dropdownPlacement, children: shouldOpen ? (_jsx(FocusTrap, { autoFocus: shouldAutoFocus, focusLock: shouldLockFocus, returnFocus: shouldLockFocus, onClickOutside: onPressOutside, onEscapeKey: shouldLockFocus ? onEscapeKey : undefined, children: _jsx(Dropdown, { onChange: onChange, activeTabId: activeTabId, tabs: tabs, onHoverStart: onHoverStart, onHoverEnd: onHoverEnd, onLinkFocus: onLinkFocus, onLinkBlur: onAnyBlur, onLinkPress: onEscapeKey }) })) : null })] }));
 });
-export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = false, padding, }) => {
+const isTabActive = ({ tab, activeTabId, currentLocationURL }) => match(tab)
+    .with({ url: P.string }, ({ url }) => currentLocationURL.startsWith(url))
+    .with({ id: P.string }, ({ id }) => isNotNullish(activeTabId) && id === activeTabId)
+    .exhaustive();
+const getTabId = (tab) => match(tab)
+    .with({ url: P.string }, ({ url }) => url)
+    .with({ id: P.string }, ({ id }) => id)
+    .exhaustive();
+export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = false, padding, activeTabId, onChange, }) => {
     const containerRef = useRef(null);
     const placeholderRef = useRef(null);
     const otherPlaceholderRef = useRef(null);
@@ -273,8 +295,10 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = fa
         if (isNotNullish(linksRefs.current)) {
             const values = Object.entries(linksRefs.current);
             const container = containerRef.current;
-            for (const [link, node] of values) {
-                if ("/" + path.join("/") === link && isNotNullish(node) && isNotNullish(container)) {
+            for (const [tabId, node] of values) {
+                if ((tabId === activeTabId || "/" + path.join("/") === tabId) &&
+                    isNotNullish(node) &&
+                    isNotNullish(container)) {
                     node.measureLayout(container, (left, _, width) => {
                         const leftOffset = padding ?? 0;
                         setUnderlinePosition({ left: left - leftOffset, width });
@@ -284,14 +308,15 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = fa
             }
         }
         setUnderlinePosition({ left: 0, width: 0 });
-    }, [path, kept, collapsed, padding]);
+    }, [path, kept, collapsed, padding, activeTabId]);
     useEffect(() => {
         setHasRendered(width > 0);
     }, [width]);
     const reajustLayout = useCallback(({ width }) => {
         const items = tabs.map(tab => {
             if (placeholderLinkRef.current) {
-                const ref = placeholderLinkRef.current[tab.url];
+                const tabId = getTabId(tab);
+                const ref = placeholderLinkRef.current[tabId];
                 if (isNotNullish(ref)) {
                     const element = ref;
                     const width = element.getBoundingClientRect().width;
@@ -314,7 +339,7 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = fa
                 kept.push({ ...item.tab, width: item.width });
             }
             else {
-                if (currentLocationURL.startsWith(item.tab.url)) {
+                if (isTabActive({ activeTabId, currentLocationURL, tab: item.tab })) {
                     while (kept.length !== 0 &&
                         kept.reduce((acc, item) => acc + item.width, 0) + (item.width + 16) >= width) {
                         const last = kept.pop();
@@ -336,7 +361,7 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = fa
             const otherLabel = otherLabelRef;
             otherLabelWidth = otherLabel.getBoundingClientRect().width;
         }
-        const activeInKeptIndex = kept.findIndex(item => currentLocationURL.startsWith(item.url));
+        const activeInKeptIndex = kept.findIndex(item => isTabActive({ activeTabId, currentLocationURL, tab: item }));
         if (activeInKeptIndex !== -1) {
             const activeInKept = kept[activeInKeptIndex];
             const activeInKeptWidth = activeInKept?.width ?? 0;
@@ -364,7 +389,7 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = fa
         else {
             setKeptCollapsed([kept, collapsed]);
         }
-    }, [tabs, currentLocationURL]);
+    }, [tabs, activeTabId, currentLocationURL]);
     const onLayout = useCallback(({ target, nativeEvent: { layout: { width }, }, }) => {
         reajustLayout({ container: target, width });
     }, [reajustLayout]);
@@ -379,27 +404,36 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = fa
     if (tabs.length <= 1 && hideIfSingleItem) {
         return null;
     }
-    return (_jsxs(Box, { alignItems: "center", direction: "row", role: "tablist", ref: containerRef, style: [styles.container, sticky && styles.sticky, { paddingHorizontal: padding }], children: [_jsxs(View, { style: styles.placeholder, "aria-hidden": true, ref: placeholderRef, onLayout: onLayout, children: [tabs.map(({ label, url, icon, count }) => (_jsxs(Fragment, { children: [_jsxs(Link, { ref: ref => {
-                                    if (placeholderLinkRef.current) {
-                                        placeholderLinkRef.current[url] = ref;
-                                    }
-                                }, to: url, style: ({ active, hovered }) => [
-                                    styles.link,
-                                    active ? styles.activeLink : hovered ? styles.hoveredLink : null,
-                                ], children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: 16, color: "currentColor" }), _jsx(Space, { width: 8 })] })), _jsx(Text, { children: label }), count != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: count })] })) : null] }), _jsx(Space, { width: 32 })] }, url))), _jsxs(LakeText, { ref: otherPlaceholderRef, style: styles.link, children: [_jsx(Text, { children: otherLabel }), _jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: tabs.length }), _jsx(Space, { width: 4 }), _jsx(Icon, { name: "chevron-down-filled", size: 12 })] })] }), kept.map(({ label, url, icon, withSeparator, count }) => (_jsxs(Fragment, { children: [_jsxs(Link, { role: "tab", ref: ref => {
-                            if (linksRefs.current) {
-                                linksRefs.current[url] = ref;
-                            }
-                        }, to: url, style: ({ active, hovered }) => [
-                            styles.link,
-                            active ? styles.activeLink : hovered ? styles.hoveredLink : null,
-                        ], children: [withSeparator === true && _jsx(View, { style: styles.separator, role: "none" }), isNotNullish(icon) && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: 16, color: "currentColor" }), _jsx(Space, { width: 8 })] })), _jsx(Text, { children: label }), count != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: count })] })) : null] }), _jsx(Space, { width: 32 })] }, url))), collapsed.length > 0 ? (_jsx(DropdownItems, { ref: ref => {
+    return (_jsxs(Box, { alignItems: "center", direction: "row", role: "tablist", ref: containerRef, style: [styles.container, sticky && styles.sticky, { paddingHorizontal: padding }], children: [_jsxs(View, { style: styles.placeholder, "aria-hidden": true, ref: placeholderRef, onLayout: onLayout, children: [tabs.map(tab => {
+                        const { label, icon, count } = tab;
+                        const tabId = getTabId(tab);
+                        return (_jsxs(Fragment, { children: [_jsxs(TabViewLink, { ref: ref => {
+                                        if (placeholderLinkRef.current) {
+                                            placeholderLinkRef.current[tabId] = ref;
+                                        }
+                                    }, activeTabId: activeTabId, tab: tab, onChange: onChange, style: ({ active, hovered }) => [
+                                        styles.link,
+                                        active ? styles.activeLink : hovered ? styles.hoveredLink : null,
+                                    ], children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: 16, color: "currentColor" }), _jsx(Space, { width: 8 })] })), _jsx(Text, { children: label }), count != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: count })] })) : null] }), _jsx(Space, { width: 32 })] }, tabId));
+                    }), _jsxs(LakeText, { ref: otherPlaceholderRef, style: styles.link, children: [_jsx(Text, { children: otherLabel }), _jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: tabs.length }), _jsx(Space, { width: 4 }), _jsx(Icon, { name: "chevron-down-filled", size: 12 })] })] }), kept.map(tab => {
+                const { label, icon, withSeparator, count } = tab;
+                const tabId = getTabId(tab);
+                return (_jsxs(Fragment, { children: [_jsxs(TabViewLink, { ref: ref => {
+                                if (linksRefs.current) {
+                                    linksRefs.current[tabId] = ref;
+                                }
+                            }, onChange: onChange, activeTabId: activeTabId, tab: tab, role: "tab", style: ({ active, hovered }) => [
+                                styles.link,
+                                active ? styles.activeLink : hovered ? styles.hoveredLink : null,
+                            ], children: [withSeparator === true && _jsx(View, { style: styles.separator, role: "none" }), isNotNullish(icon) && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: 16, color: "currentColor" }), _jsx(Space, { width: 8 })] })), _jsx(Text, { children: label }), count != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: count })] })) : null] }), _jsx(Space, { width: 32 })] }, tabId));
+            }), collapsed.length > 0 ? (_jsx(DropdownItems, { ref: ref => {
                     collapsed.forEach(item => {
                         if (linksRefs.current) {
-                            linksRefs.current[item.url] = ref;
+                            const tabId = getTabId(item);
+                            linksRefs.current[tabId] = ref;
                         }
                     });
-                }, tabs: collapsed, currentUrl: currentLocationURL, otherLabel: otherLabel })) : null, hasRendered && (_jsx(View, { style: [
+                }, onChange: onChange, tabs: collapsed, currentUrl: currentLocationURL, otherLabel: otherLabel, activeTabId: activeTabId })) : null, hasRendered && (_jsx(View, { style: [
                     styles.underline,
                     styles.animatedUnderline,
                     { transform: `translateX(${left}px) scaleX(${width})` },