@swan-io/lake 2.6.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "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/LakeSearchField.d.ts

@@ -1,9 +1,11 @@
+import { ReactNode } from "react";
 type Props = {
     initialValue: string;
     placeholder: string;
     onChangeText: (text: string) => void;
     debounceDuration?: number;
     maxWidth?: number;
+    renderEnd?: () => ReactNode;
 };
-export declare const LakeSearchField: ({ initialValue, placeholder, onChangeText, debounceDuration, maxWidth, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSearchField: ({ initialValue, placeholder, onChangeText, debounceDuration, maxWidth, renderEnd, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/LakeSearchField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
-import { animations, backgroundColor, colors, radii } from "../constants/design";
+import { animations, backgroundColor, colors, radii, spacings } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
 import { useDebounce } from "../hooks/useDebounce";
 import { LakeButton } from "./LakeButton";
@@ -10,44 +10,24 @@ import { ResponsiveContainer } from "./ResponsiveContainer";
 import { Line, Svg } from "./Svg";
 import { TransitionView } from "./TransitionView";
 const styles = StyleSheet.create({
-    root: {
-        flexGrow: 1,
-        flexShrink: 1,
+    input: {
+        transition: "300ms ease-in-out border-color",
         // ResponsiveContainer uses a 200 breaking,
         // we give the opportunity to the component to grow 2px more
         // to trigger the change
         maxWidth: 202,
         minWidth: 38,
     },
-    container: {
-        width: "100%",
-        flexGrow: 1,
-        flexShrink: 0,
-        alignSelf: "flex-end",
-    },
-    input: {
-        paddingRight: 50,
-        minWidth: 200,
-        // fixes a responsiveness bug where the default input width is too large
-        width: 1,
-        flexGrow: 1,
-        transition: "300ms ease-in-out border-color",
-    },
     focus: {
         outlineStyle: "none",
         borderColor: colors.current.primary,
     },
     clearButton: {
-        position: "absolute",
-        right: 0,
-        top: "50%",
-        transform: "translateY(-50%)",
-        padding: 16,
+        marginRight: spacings[8],
     },
     clear: {
         width: 8,
         height: 8,
-        display: "flex",
     },
     smallButtonContainer: {
         flexDirection: "row",
@@ -68,30 +48,30 @@ const styles = StyleSheet.create({
         borderRadius: radii[6],
     },
 });
-const CollapsibleSeachField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, currentValue, }) => {
-    return (_jsxs(View, { children: [_jsx(LakeButton, { mode: "secondary", size: "small", ariaLabel: placeholder, icon: "search-filled", onPress: () => {
+const CollapsibleSeachField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, currentValue, renderEnd, }) => {
+    return (_jsxs(View, { style: styles.smallButtonContainer, children: [_jsx(LakeButton, { mode: "secondary", size: "small", ariaLabel: placeholder, icon: "search-filled", onPress: () => {
                     setFocused.on();
-                }, pill: currentValue !== "" }), _jsx(TransitionView, { style: styles.openSearchFieldContainer, ...animations.fadeAndSlideInFromRight, children: hasFocus ? (_jsx(View, { style: styles.openSearchField, children: _jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue }) })) : null })] }));
+                }, pill: currentValue !== "" }), _jsx(TransitionView, { style: styles.openSearchFieldContainer, ...animations.fadeAndSlideInFromRight, children: hasFocus ? (_jsx(View, { style: styles.openSearchField, children: _jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue, renderEnd: renderEnd }) })) : null })] }));
 };
-const ExpandedSearchField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, }) => {
+const ExpandedSearchField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, renderEnd, }) => {
     const timeoutRef = useRef(null);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(LakeTextInput, { ref: inputRef, autoFocus: hasFocus, icon: "search-filled", placeholder: placeholder, defaultValue: initialValue, inputMode: "search", onChangeText: onChange, hideErrors: true, onFocus: () => {
-                    if (timeoutRef.current != null) {
-                        clearTimeout(timeoutRef.current);
-                    }
-                    setFocused.on();
-                }, onBlur: () => {
-                    timeoutRef.current = window.setTimeout(() => {
-                        setFocused.off();
-                    }, 300);
-                }, style: [styles.input, hasFocus ? styles.focus : null] }), _jsx(Pressable, { onPress: () => {
-                    if (timeoutRef.current != null) {
-                        clearTimeout(timeoutRef.current);
-                    }
-                    clear();
-                }, style: styles.clearButton, children: _jsx(Svg, { viewBox: "0 0 16 16", style: styles.clear, children: _jsxs(_Fragment, { children: [_jsx(Line, { x1: "0", x2: "16", y1: "0", y2: "16", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 }), _jsx(Line, { x1: "0", x2: "16", y1: "16", y2: "0", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 })] }) }) })] }));
+    return (_jsx(LakeTextInput, { ref: inputRef, autoFocus: hasFocus, icon: "search-filled", placeholder: placeholder, defaultValue: initialValue, inputMode: "search", onChangeText: onChange, hideErrors: true, renderEnd: () => (_jsxs(_Fragment, { children: [_jsx(Pressable, { onPress: () => {
+                        if (timeoutRef.current != null) {
+                            clearTimeout(timeoutRef.current);
+                        }
+                        clear();
+                    }, style: styles.clearButton, children: _jsx(Svg, { viewBox: "0 0 16 16", style: styles.clear, children: _jsxs(_Fragment, { children: [_jsx(Line, { x1: "0", x2: "16", y1: "0", y2: "16", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 }), _jsx(Line, { x1: "0", x2: "16", y1: "16", y2: "0", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 })] }) }) }), renderEnd?.()] })), onFocus: () => {
+            if (timeoutRef.current != null) {
+                clearTimeout(timeoutRef.current);
+            }
+            setFocused.on();
+        }, onBlur: () => {
+            timeoutRef.current = window.setTimeout(() => {
+                setFocused.off();
+            }, 300);
+        }, style: [styles.input, hasFocus ? styles.focus : null] }));
 };
-export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debounceDuration = 500, maxWidth, }) => {
+export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debounceDuration = 500, maxWidth, renderEnd, }) => {
     const [hasFocus, setFocused] = useBoolean(false);
     const inputRef = useRef(null);
     const [currentValue, setCurrentValue] = useState(initialValue);
@@ -107,5 +87,19 @@ export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debou
             setCurrentValue("");
         }
     }, [onChangeText]);
-    return (_jsx(ResponsiveContainer, { breakpoint: 200, style: [styles.root, maxWidth != null && { maxWidth }], children: ({ large }) => large ? (_jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue })) : (_jsx(View, { style: styles.smallButtonContainer, children: _jsx(CollapsibleSeachField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue }) })) }));
+    const props = {
+        inputRef,
+        placeholder,
+        initialValue,
+        onChange,
+        setFocused,
+        hasFocus,
+        clear,
+        currentValue,
+        renderEnd,
+    };
+    return (_jsx(ResponsiveContainer, { breakpoint: 200, style: maxWidth != null && { maxWidth }, children: ({ large }) => {
+            const Component = large ? ExpandedSearchField : CollapsibleSeachField;
+            return _jsx(Component, { ...props });
+        } }));
 };

package/src/components/LakeTextInput.d.ts

@@ -23,6 +23,7 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
     onChange?: ChangeEventHandler<HTMLInputElement>;
     maxCharCount?: number;
     help?: string;
+    renderEnd?: () => ReactNode;
 };
 export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     allowFontScaling?: boolean | undefined;
@@ -234,4 +235,5 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
     maxCharCount?: number | undefined;
     help?: string | undefined;
+    renderEnd?: (() => ReactNode) | undefined;
 } & import("react").RefAttributes<TextInput | null>>;

package/src/components/LakeTextInput.js

@@ -19,7 +19,6 @@ const styles = StyleSheet.create({
     },
     container: {
         flexGrow: 1,
-        flexShrink: 1,
         flexDirection: "row",
         alignItems: "stretch",
     },
@@ -27,21 +26,25 @@ const styles = StyleSheet.create({
         flexGrow: 1,
         flexShrink: 1,
         flexDirection: "row",
-        alignItems: "stretch",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: radii[6],
+        backgroundColor: backgroundColor.accented,
+        borderColor: colors.gray[100],
+        borderWidth: 1,
+        paddingHorizontal: spacings[8],
     },
     input: {
         ...texts.regular,
-        paddingHorizontal: spacings[16],
+        flexGrow: 1,
         outlineStyle: "none",
-        height: 40,
-        borderColor: colors.gray[100],
         placeholderTextColor: colors.gray[400],
-        borderWidth: 1,
-        borderRadius: radii[6],
-        backgroundColor: backgroundColor.accented,
         color: colors.gray[900],
-        width: "100%",
-        flexShrink: 1,
+        paddingHorizontal: spacings[8],
+        height: 40,
+        minWidth: 0,
     },
     multilineInput: {
         height: "auto",
@@ -65,32 +68,29 @@ const styles = StyleSheet.create({
         borderColor: colors.gray[50],
         color: colors.gray[900],
     },
-    withIcon: {
-        paddingLeft: spacings[48],
-    },
     error: {
         borderColor: colors.negative[400],
-        paddingRight: spacings[48],
     },
     valid: {
         borderColor: colors.positive[500],
-        paddingRight: spacings[48],
     },
     readOnlyError: {
         borderColor: TRANSPARENT,
         paddingRight: spacings[32],
     },
     endIcon: {
-        position: "absolute",
-        right: spacings[16],
-        top: "50%",
-        transform: "translateY(-50%)",
+        marginHorizontal: spacings[8],
+    },
+    endComponents: {
+        flexDirection: "row",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        marginLeft: spacings[8],
     },
     icon: {
-        position: "absolute",
-        left: spacings[16],
-        top: "50%",
-        transform: "translateY(-50%)",
+        marginLeft: spacings[8],
+        margiRight: spacings[4],
     },
     readOnlyEndIcon: {
         right: 0,
@@ -122,9 +122,10 @@ const styles = StyleSheet.create({
     },
 });
 export const LakeTextInput = forwardRef(({ ariaExpanded, ariaControls, error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", inputMode = "text", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, 
-//maxCharCount is different from maxLength(props inherited of TextInput), maxLength truncates the text in the limitation asked,
+//maxCharCount is different from maxLength(props inherited of TextInput)
+//maxLength truncates the text in the limitation asked,
 //maxCharCount doesn't have limitation but displays a counter of characters
-maxCharCount, help, ...props }, forwardRef) => {
+maxCharCount, help, renderEnd, ...props }, forwardRef) => {
     const inputRef = useRef(null);
     const [isHovered, setIsHovered] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
@@ -145,19 +146,23 @@ maxCharCount, help, ...props }, forwardRef) => {
     const isInteractive = !disabled && !readOnly;
     const hasError = isNotNullishOrEmpty(error);
     const charCount = isNullish(value) ? 0 : value.length;
-    return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, "aria-errormessage": error, children: [_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.contents, children: [_jsx(TextInput, { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, inputMode: inputMode, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, style: [
+    return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, "aria-errormessage": error, children: [_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: [
+                                    styles.contents,
+                                    isHovered && isInteractive && styles.hovered,
+                                    isFocused && { borderColor: colors[color][500] },
+                                    readOnly && hasError && styles.readOnlyError,
+                                    disabled && styles.disabled,
+                                    readOnly && styles.readOnly,
+                                    isFocused && styles.focused,
+                                    isNotNullish(unit) && styles.inputWithUnit,
+                                    hasError && styles.error,
+                                    valid && styles.valid,
+                                    stylesFromProps,
+                                ], children: [isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon })), _jsx(TextInput, { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, inputMode: inputMode, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, style: [
                                             styles.input,
                                             multiline && styles.multilineInput,
-                                            hasError && styles.error,
-                                            valid && styles.valid,
-                                            isNotNullish(icon) && styles.withIcon,
                                             readOnly && hasError && styles.readOnlyError,
                                             disabled && styles.disabled,
                                             readOnly && styles.readOnly,
-                                            isHovered && isInteractive && styles.hovered,
-                                            isNotNullish(unit) && styles.inputWithUnit,
-                                            isFocused && styles.focused,
-                                            isFocused && { borderColor: colors[color][500] },
-                                            stylesFromProps,
-                                        ] }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", style: styles.errorContainer, children: [isNotNullish(help) ? (_jsx(LakeText, { variant: "smallRegular", color: isNotNullish(error) ? colors.negative[500] : colors.gray[500], children: help })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " })), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
+                                        ] }), isNotNullish(renderEnd) && _jsx(View, { style: styles.endComponents, children: renderEnd() }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", style: styles.errorContainer, children: [isNotNullish(help) ? (_jsx(LakeText, { variant: "smallRegular", color: isNotNullish(error) ? colors.negative[500] : colors.gray[500], children: help })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " })), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
 });

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,18 +1,15 @@
 import { IconName } from "./Icon";
 import { SpacingValue } from "./Space";
 export declare const tabsViewHeight: number;
-type Tab = {
-    label: string;
+type Tab = ({
+    id: string;
+} | {
     url: string;
-    icon?: IconName;
-    withSeparator?: boolean;
+}) & {
     count?: number;
-} | {
-    label: string;
     icon?: IconName;
+    label: string;
     withSeparator?: boolean;
-    count?: number;
-    id: string;
 };
 type Props = {
     activeTabId?: string;

package/src/components/TabView.js

@@ -125,8 +125,7 @@ const TabViewLink = forwardRef(({ children, style, tab, onChange, activeTabId, o
     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;
+        const isActive = id === activeTabId;
         return (_jsx(PressableText, { ref: ref, style: state => style({ ...state, active: isActive }), onPress: () => {
                 onChange?.(id);
                 onPress?.();
@@ -265,7 +264,7 @@ const DropdownItems = forwardRef(({ tabs, otherLabel, currentUrl, activeTabId, o
         onHoverEnd,
     });
     const mergedRef = useMergeRefs(containerRef, ref);
-    const activeTab = tabs.find(tab => isTabActive({ activeTabId, currentLocationURL: currentUrl, tab }));
+    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,