@swan-io/lake 1.4.3 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "engines": {
     "node": ">=14.0.0",
     "yarn": "^1.20.0"
@@ -33,10 +33,9 @@
     "polished": "^4.2.2",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
+    "react-atomic-state": "^1.2.7",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.3",
-    "react-fast-compare": "^3.2.1",
-    "react-native-web": "^0.18.12",
+    "react-native-web": "^0.19.1",
     "react-popper": "^2.3.0",
     "react-ux-form": "^1.3.0",
     "rifm": "^0.12.1",
@@ -49,7 +48,7 @@
     "@storybook/react": "^6.5.16",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@types/react-native": "^0.70.12",
+    "@types/react-native": "^0.71.5",
     "@types/uuid": "^9.0.1",
     "jsdom": "^21.1.1",
     "type-fest": "^3.6.1"

package/src/components/AppOpeningAnimation.js

@@ -7,11 +7,11 @@ const styles = StyleSheet.create({
     circle: {
         opacity: 0,
         animationKeyframes: {
-            "0%": { opacity: 0, transform: [{ scale: 0.4 }] },
-            "30%": { opacity: 0, transform: [{ scale: 0.4 }] },
+            "0%": { opacity: 0, transform: "scale(0.4)" },
+            "30%": { opacity: 0, transform: "scale(0.4)" },
             "40%": { opacity: 1 },
-            "75%": { opacity: 0, transform: [{ scale: 1.5 }] },
-            "100%": { opacity: 0, transform: [{ scale: 1.5 }] },
+            "75%": { opacity: 0, transform: "scale(1.5)" },
+            "100%": { opacity: 0, transform: "scale(1.5)" },
         },
         animationDuration: "5000ms",
         animationTimingFunction: "ease-in-out",
@@ -19,10 +19,10 @@ const styles = StyleSheet.create({
     },
     icon: {
         animationKeyframes: {
-            "0%": { transform: [{ scale: 1 }] },
-            "25%": { transform: [{ scale: 1 }] },
-            "35%": { transform: [{ translateY: 60 }, { scale: 10 }] },
-            "100%": { transform: [{ translateY: 60 }, { scale: 10 }] },
+            "0%": { transform: "scale(1)" },
+            "25%": { transform: "scale(1)" },
+            "35%": { transform: "translateY(60px) scale(10)" },
+            "100%": { transform: "translateY(60px) scale(10)" },
         },
         animationDuration: "5000ms",
         animationTimingFunction: "ease-in-out",
@@ -30,10 +30,10 @@ const styles = StyleSheet.create({
     },
     logo: {
         animationKeyframes: {
-            "0%": { transform: [{ translateY: 0 }, { scale: 1 }] },
-            "25%": { transform: [{ translateY: 0 }, { scale: 1 }] },
-            "35%": { transform: [{ translateY: 72 }, { scale: 2 }] },
-            "100%": { transform: [{ translateY: 72 }, { scale: 2 }] },
+            "0%": { transform: "translateY(0px) scale(1)" },
+            "25%": { transform: "translateY(0px) scale(1)" },
+            "35%": { transform: "translateY(72px) scale(2)" },
+            "100%": { transform: "translateY(72px) scale(2)" },
         },
         animationDuration: "5000ms",
         animationTimingFunction: "ease-in-out",
@@ -46,5 +46,5 @@ export const AppOpeningAnimation = ({ accentColor, appLogo, playing = true, styl
             animationPlayState: playing ? "running" : "paused",
         };
     }, [playing]);
-    return (_jsxs(Svg, { viewBox: "0 0 442 860", style: style, children: [_jsxs(Mask, { nativeID: "phoneScreen", children: [_jsx(Rect, { x: 0, y: 0, width: 442, height: 860, fill: "#000" }), _jsx(Rect, { fill: "#fff", x: 25, y: 21, width: 392, height: 817, rx: 45 })] }), _jsxs(G, { children: [_jsx(Rect, { fill: backgroundColor.default, x: 25, y: 21, width: 392, height: 817, rx: 45 }), _jsx(Path, { d: "M80 86h35.6c15 0 27 12 27 27v35.6c0 15-12 27-27 27H80c-15 0-27-12-27-27V113c0-15 12-27 27-27zm0 117.6h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27H80c-15 0-27-12-27-27v-35.6c0-14.9 12-27 27-27zm0 117.7h35.6c15 0 27 12 27 27v35.6c0 14.9-12 27-27 27H80c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zm0 117.6h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27H80c-15 0-27-12-27-27V466c0-14.9 12-27 27-27v-.1zm0 282.5h35.6c15 0 27 12 27 27V784c0 14.9-12 27-27 27H80c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zM203.2 86h35.6c15 0 27 12 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V113c0-15 12-27 27-27zm0 117.6h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27v-35.6c0-14.9 12-27 27-27zm0 235.3h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V466c0-14.9 12-27 27-27v-.1zm0 282.5h35.6c15 0 27 12 27 27V784c0 14.9-12 27-27 27h-35.6c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zM326.4 86H362c15 0 27 12 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V113c0-15 12-27 27-27zm0 117.6H362c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27v-35.6c0-14.9 12-27 27-27zm0 117.7H362c15 0 27 12 27 27v35.6c0 14.9-12 27-27 27h-35.6c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zm0 117.6H362c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V466c0-14.9 12-27 27-27v-.1zm0 282.5H362c15 0 27 12 27 27V784c0 14.9-12 27-27 27h-35.6c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27z", fill: "#fff" }), _jsx(G, { mask: "url(#phoneScreen)", children: _jsx(Rect, { fill: accentColor, fillRule: "nonzero", x: 176.4, y: 321, width: 89.6, height: 89.6, rx: 27, style: [styles.icon, animationStyle], "transform-origin": "221.2 365.8" }) }), _jsx(Image, { xlinkHref: appLogo, preserveAspectRatio: "xMidYMid meet", x: 190, y: 335, height: 62, width: 62, style: [styles.logo, animationStyle], "transform-origin": "221.2 365.8" }), _jsx(Circle, { stroke: "#FFFFFF", strokeWidth: 2, cx: 219.5, cy: 439.5, r: 157.5, fill: "none", style: [styles.circle, animationStyle], "transform-origin": "219.5 439.5" }), _jsx(Path, { d: "M369 0a67.998 67.998 0 0168 68v177c1.326 0 2.598.527 3.536 1.464A5.004 5.004 0 01442 250v96a5.004 5.004 0 01-1.464 3.536A5.004 5.004 0 01437 351v441a67.996 67.996 0 01-19.917 48.083A67.996 67.996 0 01369 860H71a67.998 67.998 0 01-68-68V365.6a5 5 0 01-3-4.6v-58a5.002 5.002 0 013-4.6v-16.8a5 5 0 01-3-4.6v-58a5.002 5.002 0 013-4.6v-30.8a5 5 0 01-3-4.6v-24a5.002 5.002 0 013-4.6V68A68 68 0 0171 0h298zm0 21H71a46 46 0 00-46 45.2V792a45.999 45.999 0 0045.2 46H369a46 46 0 0046-45.2V67a45.998 45.998 0 00-46-46z", fill: "#000" })] })] }));
+    return (_jsxs(Svg, { viewBox: "0 0 442 860", style: style, children: [_jsxs(Mask, { id: "phoneScreen", children: [_jsx(Rect, { x: 0, y: 0, width: 442, height: 860, fill: "#000" }), _jsx(Rect, { fill: "#fff", x: 25, y: 21, width: 392, height: 817, rx: 45 })] }), _jsxs(G, { children: [_jsx(Rect, { fill: backgroundColor.default, x: 25, y: 21, width: 392, height: 817, rx: 45 }), _jsx(Path, { d: "M80 86h35.6c15 0 27 12 27 27v35.6c0 15-12 27-27 27H80c-15 0-27-12-27-27V113c0-15 12-27 27-27zm0 117.6h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27H80c-15 0-27-12-27-27v-35.6c0-14.9 12-27 27-27zm0 117.7h35.6c15 0 27 12 27 27v35.6c0 14.9-12 27-27 27H80c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zm0 117.6h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27H80c-15 0-27-12-27-27V466c0-14.9 12-27 27-27v-.1zm0 282.5h35.6c15 0 27 12 27 27V784c0 14.9-12 27-27 27H80c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zM203.2 86h35.6c15 0 27 12 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V113c0-15 12-27 27-27zm0 117.6h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27v-35.6c0-14.9 12-27 27-27zm0 235.3h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V466c0-14.9 12-27 27-27v-.1zm0 282.5h35.6c15 0 27 12 27 27V784c0 14.9-12 27-27 27h-35.6c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zM326.4 86H362c15 0 27 12 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V113c0-15 12-27 27-27zm0 117.6H362c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27v-35.6c0-14.9 12-27 27-27zm0 117.7H362c15 0 27 12 27 27v35.6c0 14.9-12 27-27 27h-35.6c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zm0 117.6H362c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V466c0-14.9 12-27 27-27v-.1zm0 282.5H362c15 0 27 12 27 27V784c0 14.9-12 27-27 27h-35.6c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27z", fill: "#fff" }), _jsx(G, { mask: "url(#phoneScreen)", children: _jsx(Rect, { fill: accentColor, fillRule: "nonzero", x: 176.4, y: 321, width: 89.6, height: 89.6, rx: 27, style: [styles.icon, animationStyle], "transform-origin": "221.2 365.8" }) }), _jsx(Image, { xlinkHref: appLogo, preserveAspectRatio: "xMidYMid meet", x: 190, y: 335, height: 62, width: 62, style: [styles.logo, animationStyle], "transform-origin": "221.2 365.8" }), _jsx(Circle, { stroke: "#FFFFFF", strokeWidth: 2, cx: 219.5, cy: 439.5, r: 157.5, fill: "none", style: [styles.circle, animationStyle], "transform-origin": "219.5 439.5" }), _jsx(Path, { d: "M369 0a67.998 67.998 0 0168 68v177c1.326 0 2.598.527 3.536 1.464A5.004 5.004 0 01442 250v96a5.004 5.004 0 01-1.464 3.536A5.004 5.004 0 01437 351v441a67.996 67.996 0 01-19.917 48.083A67.996 67.996 0 01369 860H71a67.998 67.998 0 01-68-68V365.6a5 5 0 01-3-4.6v-58a5.002 5.002 0 013-4.6v-16.8a5 5 0 01-3-4.6v-58a5.002 5.002 0 013-4.6v-30.8a5 5 0 01-3-4.6v-24a5.002 5.002 0 013-4.6V68A68 68 0 0171 0h298zm0 21H71a46 46 0 00-46 45.2V792a45.999 45.999 0 0045.2 46H369a46 46 0 0046-45.2V67a45.998 45.998 0 00-46-46z", fill: "#000" })] })] }));
 };

package/src/components/AutoWidthImage.d.ts

@@ -2,6 +2,7 @@
 import { Image, ImageProps } from "react-native";
 import { Except } from "type-fest";
 export declare const AutoWidthImage: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Except<ImageProps, "source"> & {
+    ariaLabel?: string | undefined;
     maxWidth?: number | undefined;
     height: number;
     sourceUri: string;

package/src/components/AutoWidthImage.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, memo, useEffect, useState } from "react";
-import isEqual from "react-fast-compare";
 import { Image } from "react-native";
 import { isNotNullish } from "../utils/nullish";
-export const AutoWidthImage = memo(forwardRef(({ maxWidth, height, sourceUri, style, ...props }, forwardedRef) => {
+export const AutoWidthImage = memo(forwardRef(({ ariaLabel, maxWidth, height, sourceUri, style, ...props }, forwardedRef) => {
     const [size, setSize] = useState({
         height,
         width: 0,
@@ -21,6 +20,6 @@ export const AutoWidthImage = memo(forwardRef(({ maxWidth, height, sourceUri, st
             }
         });
     }, [maxWidth, height, sourceUri]);
-    return (_jsx(Image, { ref: forwardedRef, source: { uri: sourceUri }, style: [style, size], ...props }));
-}), isEqual);
+    return (_jsx(Image, { "aria-label": ariaLabel, ref: forwardedRef, source: { uri: sourceUri }, style: [style, size], ...props }));
+}));
 AutoWidthImage.displayName = "AutoWidthImage";

package/src/components/Avatar.js

@@ -10,6 +10,7 @@ const styles = StyleSheet.create({
         ...typography.bodyLarge,
         fontWeight: typography.fontWeights.demi,
         textAlign: "center",
+        userSelect: "none",
     },
     container: {
         borderWidth: 1,
@@ -28,7 +29,7 @@ const initialsToVariant = (initials) => {
 };
 export const Avatar = memo(({ initials = "", size }) => {
     const variant = initialsToVariant(initials);
-    return (_jsx(View, { accessibilityRole: "image", style: [
+    return (_jsx(View, { role: "img", style: [
             commonStyles.center,
             styles.container,
             {
@@ -38,5 +39,5 @@ export const Avatar = memo(({ initials = "", size }) => {
                 width: size,
                 borderRadius: size / 2,
             },
-        ], children: initials !== "" ? (_jsx(Text, { style: [styles.text, { color: colors[variant][500], fontSize: size * 0.4 }], selectable: false, children: initials })) : (_jsx(Icon, { name: "person-filled", size: size - 8, color: colors[variant][50] })) }));
+        ], children: initials !== "" ? (_jsx(Text, { style: [styles.text, { color: colors[variant][500], fontSize: size * 0.4 }], children: initials })) : (_jsx(Icon, { name: "person-filled", size: size - 8, color: colors[variant][50] })) }));
 });

package/src/components/BorderedButton.d.ts

@@ -2,7 +2,7 @@ import { ReactText } from "react";
 import { GestureResponderEvent, StyleProp, View, ViewStyle } from "react-native";
 import { IconName } from "./Icon";
 type Props = {
-    accessibilityLabel?: string;
+    ariaLabel?: string;
     children?: ReactText;
     color?: string;
     disabled?: boolean;

package/src/components/BorderedButton.js

@@ -57,11 +57,13 @@ const styles = StyleSheet.create({
         ...typography.bodyLarge,
         fontWeight: typography.fontWeights.demi,
         lineHeight: 48,
+        userSelect: "none",
     },
     textSmall: {
         ...typography.bodySmall,
         fontWeight: typography.fontWeights.demi,
         lineHeight: 40,
+        userSelect: "none",
     },
     textDisabled: {
         color: colors.gray[50],
@@ -73,11 +75,11 @@ const styles = StyleSheet.create({
         justifyContent: "center",
     },
 });
-export const BorderedButton = memo(forwardRef(({ accessibilityLabel, children = "", color = colors.gray[100], disabled = false, loading = false, icon, onPress, size = "large", style, }, forwardedRef) => {
+export const BorderedButton = memo(forwardRef(({ ariaLabel, children = "", color = colors.gray[100], disabled = false, loading = false, icon, onPress, size = "large", style, }, forwardedRef) => {
     const hasText = children !== "";
     const isSmall = size === "small";
     const iconSize = isSmall ? 18 : 20;
-    return (_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityBusy: loading, accessibilityDisabled: disabled, disabled: loading || disabled, ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed }) => [
+    return (_jsxs(Pressable, { role: "button", "aria-label": ariaLabel, "aria-busy": loading, "aria-disabled": disabled, disabled: loading || disabled, ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed }) => [
             styles.base,
             isSmall && styles.small,
             isNotNullish(icon) && (isSmall ? styles.withIconSmall : styles.withIcon),
@@ -90,9 +92,9 @@ export const BorderedButton = memo(forwardRef(({ accessibilityLabel, children =
                         ? styles.hovered
                         : false,
             style,
-        ], children: [icon && _jsx(Icon, { color: color, name: icon, size: iconSize }), hasText && isNotNullish(icon) && _jsx(Space, { width: isSmall ? 8 : 12 }), hasText && (_jsx(Text, { numberOfLines: 1, selectable: false, style: [
+        ], children: [icon && _jsx(Icon, { color: color, name: icon, size: iconSize }), hasText && isNotNullish(icon) && _jsx(Space, { width: isSmall ? 8 : 12 }), hasText && (_jsx(Text, { numberOfLines: 1, style: [
                     isSmall ? styles.textSmall : styles.text,
                     disabled ? styles.textDisabled : { color },
-                ], children: children })), loading && (_jsx(View, { accessibilityRole: "none", style: styles.loaderContainer, children: _jsx(ActivityIndicator, { color: disabled ? colors.gray[50] : colors.gray[100], size: iconSize }) }))] }));
+                ], children: children })), loading && (_jsx(View, { role: "none", style: styles.loaderContainer, children: _jsx(ActivityIndicator, { color: disabled ? colors.gray[50] : colors.gray[100], size: iconSize }) }))] }));
 }));
 BorderedButton.displayName = "BorderedButton";

package/src/components/BottomPanel.js

@@ -37,7 +37,7 @@ const styles = StyleSheet.create({
         animationKeyframes: {
             "0%": {
                 opacity: 0,
-                transform: [{ translateY: 20 }],
+                transform: "translateY(20px)",
             },
         },
         animationDuration: "300ms",
@@ -47,7 +47,7 @@ const styles = StyleSheet.create({
         animationKeyframes: {
             "100%": {
                 opacity: 0,
-                transform: [{ translateY: 20 }],
+                transform: "translateY(20px)",
             },
         },
         animationDuration: "300ms",

package/src/components/Box.js

@@ -22,7 +22,7 @@ const justifyContentStyles = StyleSheet.create({
     spaceEvenly: { justifyContent: "space-evenly" },
 });
 export const Box = forwardRef((
-// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/exports/View/index.js#L133
+// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.19.1/packages/react-native-web/src/exports/View/index.js#L146
 { alignItems = "stretch", direction = "column", justifyContent = "normal", style, ...props }, forwardedRef) => (_jsx(View, { ref: forwardedRef, ...props, style: [
         alignItems !== "stretch" && alignItemsStyles[alignItems],
         direction !== "column" && directionStyles[direction],

package/src/components/Breadcrumbs.js

@@ -1,33 +1,33 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState, } from "react";
+import { Pressable, StyleSheet, Text, View, } from "react-native";
+import { P, match } from "ts-pattern";
+import { v4 as uuid } from "uuid";
+import { animations, backgroundColor, colors, gray75, radii, shadows, spacings, texts, } from "../constants/design";
+import { useHover } from "../hooks/useHover";
+import { usePreviousValue } from "../hooks/usePreviousValue";
+import { noop } from "../utils/function";
+import { isNotNullish, isNullish } from "../utils/nullish";
+import { Box } from "./Box";
 import { FocusTrap } from "./FocusTrap";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { Link } from "./Link";
 import { Space } from "./Space";
 import { TransitionView } from "./TransitionView";
-import { animations, backgroundColor, colors, gray75, radii, shadows, spacings, texts, } from "../constants/design";
-import { useHover } from "../hooks/useHover";
-import { usePreviousValue } from "../hooks/usePreviousValue";
-import { isNotNullish, isNullish } from "../utils/nullish";
-import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState, } from "react";
-import { Pressable, StyleSheet, Text, View, } from "react-native";
-import { match, P } from "ts-pattern";
-import { v4 as uuid } from "uuid";
-import { noop } from "../utils/function";
-import { Box } from "./Box";
 const styles = StyleSheet.create({
     container: {
         flexDirection: "row",
         alignItems: "center",
         zIndex: 10,
-        transform: [{ translateZ: 0 }],
+        transform: "translateZ(0px)",
     },
     item: {
         flexDirection: "row",
         alignItems: "center",
         borderRadius: radii[6],
         transitionProperty: "opacity",
-        transitionDuration: "0.15s",
+        transitionDuration: "150ms",
     },
     itemPressed: {
         opacity: 0.2,
@@ -59,7 +59,7 @@ const styles = StyleSheet.create({
     dropdown: {
         position: "absolute",
         left: "50%",
-        transform: [{ translateX: "-50%" }],
+        transform: "translateX(-50%)",
         top: "100%",
         backgroundColor: backgroundColor.accented,
         borderRadius: radii[8],
@@ -69,7 +69,7 @@ const styles = StyleSheet.create({
     siblingsDropdown: {
         position: "absolute",
         left: "50%",
-        transform: [{ translateX: "-50%" }],
+        transform: "translateX(-50%)",
         top: "100%",
         backgroundColor: backgroundColor.accented,
         borderRadius: radii[8],
@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
         position: "absolute",
         top: "50%",
         right: spacings[16],
-        transform: [{ translateY: "-50%" }],
+        transform: "translateY(-50%)",
     },
 });
 const emptyCrumbWithIdArray = [];
@@ -318,7 +318,7 @@ const BreadcrumbsDropdownItems = ({ crumbs }) => {
                             styles.item,
                             pressed && styles.itemPressed,
                             openingStatus === "ForcedOpen" && styles.itemForcedOpen,
-                        ], focusable: true, onFocus: onHandleFocus, onBlur: onAnyBlur, onPress: onPress, children: _jsx(View, { style: styles.horizontalLink, children: _jsx(LakeText, { style: [styles.horizontalLinkText, styles.activeHorizontalLinkText], children: "…" }) }) }), _jsx(TransitionView, { ...animations.fadeAndSlideInFromBottom, children: shouldOpen ? (_jsx(FocusTrap, { autoFocus: shouldAutoFocus, focusLock: shouldLockFocus, returnFocus: shouldLockFocus, onClickOutside: onPressOutside, onEscapeKey: shouldLockFocus ? onEscapeKey : undefined, children: _jsx(BreadcrumbsDropdown, { crumbs: crumbs, onHoverStart: onHoverStart, onHoverEnd: onHoverEnd, onLinkFocus: onLinkFocus, onLinkBlur: onAnyBlur, onLinkPress: onEscapeKey }) })) : null })] })] }));
+                        ], tabIndex: 0, onFocus: onHandleFocus, onBlur: onAnyBlur, onPress: onPress, children: _jsx(View, { style: styles.horizontalLink, children: _jsx(LakeText, { style: [styles.horizontalLinkText, styles.activeHorizontalLinkText], children: "…" }) }) }), _jsx(TransitionView, { ...animations.fadeAndSlideInFromBottom, children: shouldOpen ? (_jsx(FocusTrap, { autoFocus: shouldAutoFocus, focusLock: shouldLockFocus, returnFocus: shouldLockFocus, onClickOutside: onPressOutside, onEscapeKey: shouldLockFocus ? onEscapeKey : undefined, children: _jsx(BreadcrumbsDropdown, { crumbs: crumbs, onHoverStart: onHoverStart, onHoverEnd: onHoverEnd, onLinkFocus: onLinkFocus, onLinkBlur: onAnyBlur, onLinkPress: onEscapeKey }) })) : null })] })] }));
 };
 // In order to preserve the horizontal space, we collapse the breadcrumbs once
 // there's strictly more than three crumbs. In that case, the expected behavior
@@ -358,5 +358,5 @@ export const Breadcrumbs = () => {
             isRootCrumb,
         })));
     }, [cleanCrumbs]);
-    return (_jsxs(View, { accessibilityRole: "navigation", style: styles.container, children: [start.map(({ id, crumb, isFirst, isLast, isRootCrumb }) => (_jsx(BreadcrumbsItem, { crumb: crumb, isFirstItem: isFirst, isLastItem: isLast, shouldAnimate: !previousCrumbs.has(id) && !isRootCrumb }, id))), collapsed.length > 0 ? _jsx(BreadcrumbsDropdownItems, { crumbs: collapsed }) : null, end.map(({ id, crumb, isLast, isRootCrumb }) => (_jsx(BreadcrumbsItem, { crumb: crumb, isLastItem: isLast, shouldAnimate: !previousCrumbs.has(id) && !isRootCrumb }, id)))] }));
+    return (_jsxs(View, { role: "navigation", style: styles.container, children: [start.map(({ id, crumb, isFirst, isLast, isRootCrumb }) => (_jsx(BreadcrumbsItem, { crumb: crumb, isFirstItem: isFirst, isLastItem: isLast, shouldAnimate: !previousCrumbs.has(id) && !isRootCrumb }, id))), collapsed.length > 0 ? _jsx(BreadcrumbsDropdownItems, { crumbs: collapsed }) : null, end.map(({ id, crumb, isLast, isRootCrumb }) => (_jsx(BreadcrumbsItem, { crumb: crumb, isLastItem: isLast, shouldAnimate: !previousCrumbs.has(id) && !isRootCrumb }, id)))] }));
 };

package/src/components/ChoicePicker.js

@@ -35,15 +35,15 @@ const styles = StyleSheet.create({
         flexBasis: "33.333%",
         maxWidth: 300,
         padding: spacings[12],
-        transform: [{ translateZ: 0 }],
+        transform: "translateZ(0px)",
         animationKeyframes: {
             from: {
                 opacity: 0,
-                transform: [{ translateZ: 0 }, { translateX: 50 }],
+                transform: "translateZ(0px) translateX(50px)",
             },
             to: {
                 opacity: 1,
-                transform: [{ translateZ: 0 }, { translateX: 0 }],
+                transform: "translateZ(0px) translateX(0px)",
             },
         },
         animationDuration: "200ms",
@@ -73,13 +73,13 @@ const styles = StyleSheet.create({
         position: "absolute",
         top: "50%",
         left: negativeSpacings[24],
-        transform: [{ translateY: "-50%" }],
+        transform: "translateY(-50%)",
     },
     rightButton: {
         position: "absolute",
         top: "50%",
         right: negativeSpacings[24],
-        transform: [{ translateY: "-50%" }],
+        transform: "translateY(-50%)",
     },
 });
 const identity = (x) => x;
@@ -89,7 +89,7 @@ export const ChoicePicker = ({ items, getId = identity, large = false, renderIte
     return (_jsxs(View, { children: [_jsx(View, { style: styles.root, children: _jsx(View, { style: [
                         styles.container,
                         !desktop && styles.mobileContainer,
-                        !desktop && { transform: [{ translateX: `-${100 * index}%` }] },
+                        !desktop && { transform: `translateX(-${100 * index}%)` },
                     ], children: items.map((item, index) => (_jsx(Pressable, { style: [
                             styles.item,
                             large && styles.itemLarge,

package/src/components/Fill.js

@@ -5,6 +5,7 @@ import { spacingValues } from "./Space";
 const baseStyle = {
     flexGrow: 1,
     flexShrink: 1,
+    pointerEvents: "none",
 };
 const rawHeightStyles = {};
 const rawWidthStyles = {};
@@ -17,7 +18,7 @@ const styles = StyleSheet.create({
 });
 const heightStyles = StyleSheet.create(rawHeightStyles);
 const widthStyles = StyleSheet.create(rawWidthStyles);
-export const Fill = ({ minHeight, minWidth }) => (_jsx(View, { focusable: false, pointerEvents: "none", style: [
+export const Fill = ({ minHeight, minWidth }) => (_jsx(View, { tabIndex: -1, style: [
         styles.base,
         isNotNullish(minHeight) && heightStyles[minHeight],
         isNotNullish(minWidth) && widthStyles[minWidth],

package/src/components/FilterChooser.js

@@ -42,9 +42,9 @@ const styles = StyleSheet.create({
 export function FilterChooser({ filters, openFilters, label, title, availableFilters, large = true, onAddFilter, }) {
     const inputRef = useRef(null);
     const [visible, { close, toggle }] = useDisclosure(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "start", alignItems: "center", children: _jsx(LakeButton, { size: "small", mode: "secondary", color: "gray", onPress: toggle, ref: inputRef, icon: large ? "chevron-down-filled" : "filter-filled", iconPosition: "end", accessibilityLabel: label, children: large ? label : null }) }), _jsx(Popover, { role: "listbox", matchReferenceMinWidth: true, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: styles.list, children: [_jsx(Text, { style: styles.availableFiltersTitle, children: title }), _jsx(Space, { height: 8 }), _jsx(FlatList, { accessibilityRole: "list", data: availableFilters, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "start", alignItems: "center", children: _jsx(LakeButton, { size: "small", mode: "secondary", color: "gray", onPress: toggle, ref: inputRef, icon: large ? "chevron-down-filled" : "filter-filled", iconPosition: "end", ariaLabel: label, children: large ? label : null }) }), _jsx(Popover, { role: "listbox", matchReferenceMinWidth: true, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: styles.list, children: [_jsx(Text, { style: styles.availableFiltersTitle, children: title }), _jsx(Space, { height: 8 }), _jsx(FlatList, { role: "list", data: availableFilters, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
                                 const isSet = Boolean(filters[item.name]) || openFilters.includes(item.name);
-                                return (_jsxs(Pressable, { style: ({ hovered }) => [styles.item, hovered && styles.itemHovered], accessibilityRole: "button", disabled: isSet, onPress: () => {
+                                return (_jsxs(Pressable, { style: ({ hovered }) => [styles.item, hovered && styles.itemHovered], role: "button", disabled: isSet, onPress: () => {
                                         onAddFilter(item.name);
                                         close();
                                     }, children: [_jsx(Text, { style: [styles.filterName, isSet && styles.selected], children: item.label }), isSet && _jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 })] }));

package/src/components/Filters.js

@@ -4,7 +4,7 @@ import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "
 import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
 import { hasDefinedKeys, useForm } from "react-ux-form";
 import { Rifm } from "rifm";
-import { match, P } from "ts-pattern";
+import { P, match } from "ts-pattern";
 import { colors, shadows, spacings } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
 import { useMergeRefs } from "../hooks/useMergeRefs";
@@ -12,10 +12,11 @@ import { usePreviousValue } from "../hooks/usePreviousValue";
 import { isNotNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
-import { Input } from "./Input";
 import { LakeButton } from "./LakeButton";
 import { LakeCheckbox } from "./LakeCheckbox";
+import { LakeLabel } from "./LakeLabel";
 import { LakeRadio } from "./LakeRadio";
+import { LakeTextInput } from "./LakeTextInput";
 import { Popover } from "./Popover";
 import { Space } from "./Space";
 import { Stack } from "./Stack";
@@ -39,7 +40,6 @@ const styles = StyleSheet.create({
         opacity: 1,
     },
     dropdown: {
-        marginTop: 4,
         maxHeight: 400,
         minWidth: 200,
     },
@@ -59,7 +59,7 @@ const styles = StyleSheet.create({
         height: 32,
         paddingHorizontal: 24,
     },
-    dateInput: {
+    input: {
         width: 200,
     },
     value: {
@@ -79,9 +79,9 @@ function FilterRadio({ label, items, value, onValueChange, onPressRemove, autoOp
     const inputRef = useRef(null);
     const [visible, { close, toggle }] = useDisclosure(autoOpen);
     const currentValue = useMemo(() => items.find(i => i.value === value), [items, value]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: currentValue?.label }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsx(View, { style: styles.dropdown, children: _jsx(FlatList, { accessibilityRole: "list", data: items, contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: currentValue?.label }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsx(View, { style: styles.dropdown, children: _jsx(FlatList, { role: "list", data: items, contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
                             const isSelected = value === item.value;
-                            return (_jsxs(Pressable, { accessibilityRole: "radio", accessibilityChecked: isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: () => {
+                            return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: () => {
                                     onValueChange(item.value);
                                     close();
                                 }, children: [_jsx(LakeRadio, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { children: item.label })] }));
@@ -114,7 +114,7 @@ function FilterCheckbox({ label, items, checkAllLabel, value, onValueChange, app
             setLocalValue(value);
         }
     }, [visible, value]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: allChecked ? checkAllLabel : currentValue.map(item => item.label).join(", ") }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: styles.dropdown, children: [_jsx(FlatList, { accessibilityRole: "list", data: listItems, contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: allChecked ? checkAllLabel : currentValue.map(item => item.label).join(", ") }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: styles.dropdown, children: [_jsx(FlatList, { role: "list", data: listItems, contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
                                 const isSelected = match(item)
                                     .with({ checked: P.any }, ({ checked }) => checked)
                                     .with({ value: P.any }, ({ value }) => values.has(value))
@@ -146,7 +146,7 @@ function FilterCheckbox({ label, items, checkAllLabel, value, onValueChange, app
                                     }
                                 })
                                     .exhaustive();
-                                return (_jsxs(Pressable, { accessibilityRole: "radio", accessibilityChecked: isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: onPress, children: [_jsx(LakeCheckbox, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { children: item.label })] }));
+                                return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: onPress, children: [_jsx(LakeCheckbox, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { children: item.label })] }));
                             } }), _jsx(Space, { height: 8 }), _jsx(View, { style: styles.buttonContainer, children: _jsx(LakeButton, { color: "current", onPress: save, children: applyButtonLabel }) }), _jsx(Space, { height: 24 })] }) })] }));
 }
 function FilterDate({ label, initialValue, noValueText, submitText, dateFormat, rifmProps, validate, onSave, onPressRemove, autoOpen = false, }) {
@@ -170,7 +170,7 @@ function FilterDate({ label, initialValue, noValueText, submitText, dateFormat,
             }
         });
     };
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : noValueText }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "date", children: ({ value, onChange, error }) => (_jsx(Rifm, { value: value, onChange: onChange, ...rifmProps, children: ({ value, onChange }) => (_jsx(Input, { label: label, error: error, size: "small", style: styles.dateInput, placeholder: dateFormat, value: value, onChange: onChange })) })) }), _jsx(LakeButton, { color: "current", onPress: onSubmit, children: submitText })] }) })] }));
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : noValueText }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "date", children: ({ value, onChange, error }) => (_jsx(Rifm, { value: value, onChange: onChange, ...rifmProps, children: ({ value, onChange }) => (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { nativeID: id, error: error, style: styles.input, placeholder: dateFormat, value: value, onChange: onChange })) })) })) }), _jsx(LakeButton, { color: "current", size: "small", onPress: onSubmit, children: submitText })] }) })] }));
 }
 function FilterInput({ label, initialValue = "", noValueText, submitText, autoOpen = false, placeholder, validate, onSave, onPressRemove, }) {
     const inputRef = useRef(null);
@@ -191,7 +191,7 @@ function FilterInput({ label, initialValue = "", noValueText, submitText, autoOp
             }
         });
     };
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: value === "" ? noValueText : value }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "input", children: ({ error, value, onChange }) => (_jsx(Input, { label: label, size: "small", error: error, style: styles.dateInput, placeholder: placeholder, value: value, onValueChange: onChange })) }), _jsx(LakeButton, { size: "small", color: "current", onPress: onSubmit, children: submitText })] }) })] }));
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: value === "" ? noValueText : value }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "input", children: ({ error, value, onChange }) => (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { nativeID: id, error: error, style: styles.input, placeholder: placeholder, value: value, onChangeText: onChange })) })) }), _jsx(LakeButton, { size: "small", color: "current", onPress: onSubmit, children: submitText })] }) })] }));
 }
 const getFilterValue = (_type, filters, name) => filters[name];
 export const FiltersStack = ({ filters, openedFilters, definition, onChangeOpened, onChangeFilters, }) => {

package/src/components/FixedListView.js

@@ -152,6 +152,7 @@ const styles = StyleSheet.create({
         backgroundImage: "linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0))",
         opacity: 0,
         transition: "150ms ease-in-out opacity",
+        pointerEvents: "none",
     },
     rightToLeftGradient: {
         position: "absolute",
@@ -162,6 +163,7 @@ const styles = StyleSheet.create({
         backgroundImage: "linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0))",
         opacity: 0,
         transition: "150ms ease-in-out opacity",
+        pointerEvents: "none",
     },
     horizontalScrollbar: {
         position: "sticky",
@@ -312,6 +314,7 @@ const styles = StyleSheet.create({
         backgroundImage: `linear-gradient(to bottom, ${backgroundColor.default}, ${backgroundColor.defaultTransparent})`,
         opacity: 0,
         transition: "200ms ease-in-out opacity",
+        pointerEvents: "none",
     },
     visibleTopGradient: {
         opacity: 1,
@@ -349,8 +352,8 @@ const RowSegment = ({ columns, item, style, absoluteIndex, viewId, segmentColumn
     });
     const wrapper = createRowWrapper({ item, absoluteIndex, extraInfo });
     return cloneElement(wrapper, {
-        focusable: true,
-        nativeID: focusId,
+        id: focusId,
+        tabIndex: 0,
         style: [
             styles.rowSegment,
             {
@@ -372,7 +375,7 @@ const RowSegment = ({ columns, item, style, absoluteIndex, viewId, segmentColumn
                 borderTopRightRadius: radii[4],
                 borderBottomRightRadius: radii[4],
             },
-        ], ref: containerRef, accessibilityHidden: false, children: _jsx(View, { style: [styles.segmentOverflow, style], children: columns.map(({ id, width, renderCell }, index) => {
+        ], ref: containerRef, "aria-hidden": false, children: _jsx(View, { style: [styles.segmentOverflow, style], children: columns.map(({ id, width, renderCell }, index) => {
                 const columnId = `${viewId}_${id}`;
                 const paddedIndex = String(absoluteIndex).padStart(10, "0");
                 const paddedCellIndex = String(index).padStart(10, "0");
@@ -382,14 +385,14 @@ const RowSegment = ({ columns, item, style, absoluteIndex, viewId, segmentColumn
                 // 3. Cell index
                 // -> See the `onKeyDown` handler
                 const focusId = `${viewId}__Row_${paddedIndex}_Segment_${SEGMENTS_MAP[segmentColumn]}_Cell_${paddedCellIndex}`;
-                return (_jsx(View, { style: [styles.cell, { width }], accessibilityDescribedBy: columnId, nativeID: focusId, children: renderCell({ columnId, item, index: absoluteIndex, extraInfo, isHovered }) }, columnId));
+                return (_jsx(View, { style: [styles.cell, { width }], "aria-describedby": columnId, id: focusId, children: renderCell({ columnId, item, index: absoluteIndex, extraInfo, isHovered }) }, columnId));
             }) }) }));
 };
 const MemoizedRowSegment = memo(RowSegment);
 const HeaderSegment = ({ columns, viewId, extraInfo, width, }) => {
     return (_jsx(View, { style: [styles.segment, { width }], children: columns.map(({ id, width, title, renderTitle }) => {
             const columnId = `${viewId}_${id}`;
-            return (_jsx(View, { style: [styles.segmentHeaderCell, { width }], nativeID: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+            return (_jsx(View, { style: [styles.segmentHeaderCell, { width }], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
         }) }));
 };
 const findNextFocusableElement = (sortedCellIds, currentCellIndex, direction) => {
@@ -730,14 +733,14 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
         setHasHorizontalScroll(centerColumnsWidth > width);
     }, [centerColumnsWidth]);
     const isLoading = isNotNullish(loading) && loading.isLoading;
-    return (_jsxs(View, { style: styles.root, children: [_jsx(View, { ref: startFocusAnchorRef, focusable: true }), _jsxs(ScrollView, { onKeyDown: onKeyDown, onLayout: onLayout, onScroll: onScroll, scrollEventThrottle: 32, style: [styles.container, mode === "tile" && styles.containerTile], contentContainerStyle: [
+    return (_jsxs(View, { style: styles.root, children: [_jsx(View, { ref: startFocusAnchorRef, tabIndex: 0 }), _jsxs(ScrollView, { onKeyDown: onKeyDown, onLayout: onLayout, onScroll: onScroll, scrollEventThrottle: 32, style: [styles.container, mode === "tile" && styles.containerTile], contentContainerStyle: [
                     styles.contentContainer,
                     {
                         height: totalHeight +
                             SCROLLBAR_RESERVED_SPACE +
                             (isLoading ? loading.count * (rowHeight + rowVerticalSpacing) : 0),
                     },
-                ], children: [_jsx(View, { accessibilityBusy: isLoading, style: [
+                ], children: [_jsx(View, { "aria-busy": isLoading, style: [
                             styles.loadingPlaceholder,
                             {
                                 top: totalHeight,
@@ -755,7 +758,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                                         width: stickedToStartColumnsWidth + HORIZONTAL_SAFE_AREA,
                                         paddingLeft: HORIZONTAL_SAFE_AREA,
                                     },
-                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(HeaderSegment, { columns: stickedToStartColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToStartColumnsWidth }), _jsx(View, { style: styles.stickyColumnStartOverflow }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient], pointerEvents: "none" })] }), _jsx(View, { style: [styles.stickyRow, { height: totalHeight }], children: startRows })] })) : null, _jsxs(View, { style: [
+                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(HeaderSegment, { columns: stickedToStartColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToStartColumnsWidth }), _jsx(View, { style: styles.stickyColumnStartOverflow }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: [styles.stickyRow, { height: totalHeight }], children: startRows })] })) : null, _jsxs(View, { style: [
                                     styles.centerColumnsContainer,
                                     {
                                         paddingLeft: stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : ZERO,
@@ -765,7 +768,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                                                     minWidth: centerColumnsWidth +
                                                         (stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0) +
                                                         (stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0),
-                                                }, children: _jsx(HeaderSegment, { columns: columns, extraInfo: extraInfo, viewId: viewId, width: centerColumnsWidth }) }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient], pointerEvents: "none" })] }), _jsx(ScrollView, { horizontal: true, ref: centerColumnsRef, style: styles.centerColumns, contentContainerStyle: [
+                                                }, children: _jsx(HeaderSegment, { columns: columns, extraInfo: extraInfo, viewId: viewId, width: centerColumnsWidth }) }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(ScrollView, { horizontal: true, ref: centerColumnsRef, style: styles.centerColumns, contentContainerStyle: [
                                             styles.centerColumnsContentContainer,
                                             {
                                                 minWidth: centerColumnsWidth +
@@ -776,7 +779,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                                             minWidth: centerColumnsWidth +
                                                 (stickedToStartColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0) +
                                                 (stickedToEndColumns.length === 0 ? HORIZONTAL_SAFE_AREA : 0),
-                                        } }), stickedToStartColumns.length > 0 && hasHorizontalScroll ? (_jsx(View, { pointerEvents: "none", style: [
+                                        } }), stickedToStartColumns.length > 0 && hasHorizontalScroll ? (_jsx(View, { style: [
                                             styles.leftToRightGradient,
                                             {
                                                 maxHeight: data.length * totalRowHeight,
@@ -784,7 +787,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                                                 bottom: SCROLLBAR_RESERVED_SPACE + rowVerticalSpacing / 2,
                                             },
                                             shouldShowStartGradient && styles.visibleGradient,
-                                        ] })) : null, stickedToEndColumns.length > 0 && hasHorizontalScroll ? (_jsx(View, { pointerEvents: "none", style: [
+                                        ] })) : null, stickedToEndColumns.length > 0 && hasHorizontalScroll ? (_jsx(View, { style: [
                                             styles.rightToLeftGradient,
                                             {
                                                 maxHeight: data.length * totalRowHeight,
@@ -798,7 +801,7 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                                         width: stickedToEndColumnsWidth + HORIZONTAL_SAFE_AREA,
                                         paddingRight: HORIZONTAL_SAFE_AREA,
                                     },
-                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(View, { style: styles.stickyColumnEndOverflow }), _jsx(HeaderSegment, { columns: stickedToEndColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToEndColumnsWidth }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient], pointerEvents: "none" })] }), _jsx(View, { style: [styles.stickyRow, { height: totalHeight }], children: endRows })] })) : null] })] }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { ref: endFocusAnchorRef, focusable: true })] }));
+                                ], children: [_jsxs(View, { style: [styles.headingSegment, { height: headerHeight }], children: [_jsx(View, { style: styles.stickyColumnEndOverflow }), _jsx(HeaderSegment, { columns: stickedToEndColumns, extraInfo: extraInfo, viewId: viewId, width: stickedToEndColumnsWidth }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient] })] }), _jsx(View, { style: [styles.stickyRow, { height: totalHeight }], children: endRows })] })) : null] })] }), data.length === 0 && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { ref: endFocusAnchorRef, tabIndex: 0 })] }));
 };
 export const FixedListViewPlaceholder = ({ count, rowHeight, rowVerticalSpacing, groupHeaderHeight, headerHeight, paddingHorizontal = HORIZONTAL_SAFE_AREA, }) => {
     const totalRowHeight = rowHeight + rowVerticalSpacing;