@swan-io/lake 2.5.0 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.5.0",
+  "version": "2.6.1",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"
@@ -27,29 +27,29 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@react-three/drei": "^9.77.0",
-    "@react-three/fiber": "^8.13.3",
+    "@react-three/drei": "^9.77.10",
+    "@react-three/fiber": "^8.13.4",
     "@swan-io/boxed": "^1.0.2",
-    "@swan-io/chicane": "^1.4.0",
-    "dayjs": "^1.11.8",
+    "@swan-io/chicane": "^1.4.1",
+    "dayjs": "^1.11.9",
     "polished": "^4.2.2",
-    "prism-react-renderer": "^2.0.5",
+    "prism-react-renderer": "^2.0.6",
     "react": "^18.2.0",
     "react-atomic-state": "^1.2.7",
     "react-dom": "^18.2.0",
-    "react-native-web": "^0.19.5",
+    "react-native-web": "^0.19.6",
     "react-popper": "^2.3.0",
     "react-ux-form": "^1.3.0",
     "rifm": "^0.12.1",
-    "three": "^0.153.0",
+    "three": "^0.154.0",
     "ts-dedent": "^2.2.0",
     "ts-pattern": "^5.0.1",
     "urql": "^4.0.4",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "@types/react-native": "^0.72.2",
     "@types/three": "^0.152.1",
     "@types/uuid": "^9.0.2",

package/src/components/LakeCheckbox.js

@@ -50,5 +50,5 @@ export const LakeCheckbox = ({ value, color = "current", disabled = false, isErr
         ], children: [value === true && (_jsx(Svg, { viewBox: "0 0 16 16", children: _jsx(Path, { d: "m3.5 7.5 2.8 3.4 5.6-6.7", stroke: colors[color].contrast, strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: "20", strokeDashoffset: shouldAnimate ? "20" : "0", children: shouldAnimate && (_jsx(Animate, { attributeName: "stroke-dashoffset", values: "20;0", dur: "150ms", begin: "150ms", fill: "freeze" })) }) })), value === "mixed" && (_jsx(View, { style: [styles.mixed, { backgroundColor: colors[color].contrast }] }))] }));
 };
 export const LakeLabelledCheckbox = ({ value, color, label, onValueChange, disabled = false, isError = false, }) => {
-    return (_jsxs(Pressable, { "aria-checked": value, style: styles.labelled, onPress: () => onValueChange(value === true ? false : true), disabled: disabled, children: [_jsx(LakeCheckbox, { value: value, color: color, disabled: disabled, isError: isError }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], userSelect: "none", children: label })] }));
+    return (_jsxs(Pressable, { role: "checkbox", "aria-checked": value, style: styles.labelled, onPress: () => onValueChange(value === true ? false : true), disabled: disabled, children: [_jsx(LakeCheckbox, { value: value, color: color, disabled: disabled, isError: isError }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], userSelect: "none", children: label })] }));
 };

package/src/components/Switch.js

@@ -82,5 +82,5 @@ export const Switch = memo(forwardRef(({ value, disabled = false, onValueChange
             useNativeDriver: false,
         }).start();
     }, [animation, animatedValue]);
-    return (_jsx(Pressable, { ref: ref, role: "switch", disabled: disabled, onPress: () => onValueChange?.(!value), children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.shadow, hovered && styles.opaque] }), _jsx(View, { style: [styles.base, value && styles.active, disabled && styles.disabled], children: _jsx(View, { ref: buttonRef, style: styles.button, children: _jsx(Icon, { color: colors.positive[400], name: "checkmark-filled", size: 10, style: [styles.icon, value && styles.opaque] }) }) })] })) }));
+    return (_jsx(Pressable, { ref: ref, role: "switch", "aria-checked": value, disabled: disabled, onPress: () => onValueChange?.(!value), children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.shadow, hovered && styles.opaque] }), _jsx(View, { style: [styles.base, value && styles.active, disabled && styles.disabled], children: _jsx(View, { ref: buttonRef, style: styles.button, children: _jsx(Icon, { color: colors.positive[400], name: "checkmark-filled", size: 10, style: [styles.icon, value && styles.opaque] }) }) })] })) }));
 }));

package/src/components/TabView.d.ts

@@ -1,19 +1,24 @@
 import { IconName } from "./Icon";
 import { SpacingValue } from "./Space";
 export declare const tabsViewHeight: number;
-type Tab = {
-    label: string;
+type Tab = ({
+    id: string;
+} | {
     url: string;
+}) & {
+    count?: number;
     icon?: IconName;
+    label: string;
     withSeparator?: boolean;
-    count?: number;
 };
 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,37 @@ 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 isActive = id === 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 +264,21 @@ const DropdownItems = forwardRef(({ tabs, otherLabel, currentUrl }, ref) => {
         onHoverEnd,
     });
     const mergedRef = useMergeRefs(containerRef, ref);
-    const activeTab = tabs.find(({ url }) => url === currentUrl);
+    const activeTab = useMemo(() => tabs.find(tab => isTabActive({ activeTabId, currentLocationURL: currentUrl, tab })), [activeTabId, currentUrl, tabs]);
     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 +294,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 +307,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 +338,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 +360,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 +388,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 +403,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})` },