@swan-io/lake 1.6.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "engines": {
     "node": ">=14.0.0",
     "yarn": "^1.20.0"
@@ -26,8 +26,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@popperjs/core": "^2.11.6",
-    "@swan-io/boxed": "^0.12.1",
+    "@popperjs/core": "^2.11.7",
+    "@swan-io/boxed": "^0.13.0",
     "@swan-io/chicane": "^1.3.4",
     "dayjs": "^1.11.7",
     "polished": "^4.2.2",
@@ -35,22 +35,21 @@
     "react": "^18.2.0",
     "react-atomic-state": "^1.2.7",
     "react-dom": "^18.2.0",
-    "react-native-web": "^0.19.1",
+    "react-native-web": "^0.19.4",
     "react-popper": "^2.3.0",
     "react-ux-form": "^1.3.0",
     "rifm": "^0.12.1",
     "ts-dedent": "^2.2.0",
-    "ts-pattern": "^4.2.1",
-    "urql": "^3.0.4",
+    "ts-pattern": "^4.2.2",
+    "urql": "^4.0.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@storybook/react": "^6.5.16",
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
     "@types/react-native": "^0.71.5",
     "@types/uuid": "^9.0.1",
     "jsdom": "^21.1.1",
-    "type-fest": "^3.6.1"
+    "type-fest": "^3.8.0"
   }
 }

package/src/components/AutoWidthImage.d.ts

@@ -1,7 +1,99 @@
 /// <reference types="react" />
-import { Image, ImageProps } from "react-native";
-import { Except } from "type-fest";
-export declare const AutoWidthImage: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Except<ImageProps, "source"> & {
+import { Image } from "react-native";
+export declare const AutoWidthImage: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    style?: import("react-native").StyleProp<import("react-native").ImageStyle>;
+    role?: import("react-native").WebRole | undefined;
+    defaultSource?: any;
+    draggable?: boolean | undefined;
+    id?: string | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+    onError?: ((error: import("react-native").NativeSyntheticEvent<import("react-native").ImageErrorEventData>) => void) | undefined;
+    onLoad?: ((event: import("react-native").NativeSyntheticEvent<import("react-native").ImageLoadEventData>) => void) | undefined;
+    onLoadEnd?: (() => void) | undefined;
+    onLoadStart?: (() => void) | undefined;
+    progressiveRenderingEnabled?: boolean | undefined;
+    borderRadius?: number | undefined;
+    borderTopLeftRadius?: number | undefined;
+    borderTopRightRadius?: number | undefined;
+    borderBottomLeftRadius?: number | undefined;
+    borderBottomRightRadius?: number | undefined;
+    resizeMode?: import("react-native").ImageResizeMode | undefined;
+    resizeMethod?: "auto" | "resize" | "scale" | undefined;
+    loadingIndicatorSource?: import("react-native").ImageURISource | undefined;
+    testID?: string | undefined;
+    nativeID?: string | undefined;
+    alt?: string | undefined;
+    blurRadius?: number | undefined;
+    capInsets?: import("react-native").Insets | undefined;
+    onProgress?: ((event: import("react-native").NativeSyntheticEvent<import("react-native").ImageProgressEventDataIOS>) => void) | undefined;
+    onPartialLoad?: (() => void) | undefined;
+    fadeDuration?: number | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined;
+    'aria-label'?: string | undefined;
+    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    'aria-busy'?: boolean | undefined;
+    'aria-checked'?: boolean | "mixed" | undefined;
+    'aria-disabled'?: boolean | undefined;
+    'aria-expanded'?: boolean | undefined;
+    'aria-selected'?: boolean | undefined;
+    'aria-labelledby'?: string | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    'aria-hidden'?: boolean | undefined;
+    'aria-live'?: "polite" | "assertive" | "off" | undefined;
+    'aria-modal'?: boolean | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    onMagicTap?: (() => void) | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    tabIndex?: 0 | -1 | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: boolean | undefined;
+    "aria-autocomplete"?: string | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-haspopup"?: string | undefined;
+    "aria-invalid"?: boolean | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-multiline"?: boolean | undefined;
+    "aria-multiselectable"?: boolean | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | undefined;
+    "aria-readonly"?: boolean | undefined;
+    "aria-required"?: boolean | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+} & {
     ariaLabel?: string | undefined;
     maxWidth?: number | undefined;
     height: number;

package/src/components/BottomPanel.js

@@ -1,13 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useEffect, useState } from "react";
-import { Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
+import { PanResponder, Pressable, ScrollView, StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
-import { backgroundColor, radii, shadows, spacings } from "../constants/design";
+import { backgroundColor, colors, radii, shadows, spacings } from "../constants/design";
 import { useBodyClassName } from "../hooks/useBodyClassName";
+import { limitElastic } from "../utils/math";
 import { FocusTrap } from "./FocusTrap";
 import { LoadingView } from "./LoadingView";
 import { Portal } from "./Portal";
 import { TransitionView } from "./TransitionView";
+const ELASTIC_LENGTH = 100; // the maximum value you can reach
+const ELASTIC_STRENGTH = 0.008; // higher value, maximum value reached faster
+const limitGrab = limitElastic({
+    elasticLength: ELASTIC_LENGTH,
+    elasticStrength: ELASTIC_STRENGTH,
+});
+const DELTA_Y_CLOSE_THRESHOLD = 100;
+const SWIPE_CLOSE_VELOCITY = 0.5;
 const BACKGROUND_COLOR = "rgba(0, 0, 0, 0.6)";
 const styles = StyleSheet.create({
     fill: {
@@ -53,6 +62,18 @@ const styles = StyleSheet.create({
         animationDuration: "300ms",
         animationTimingFunction: "ease-in-out",
     },
+    container: {
+        ...StyleSheet.absoluteFillObject,
+        transitionDuration: "300ms",
+        transitionProperty: "transform",
+    },
+    bottomCache: {
+        position: "absolute",
+        bottom: -ELASTIC_LENGTH + 1,
+        width: "100%",
+        height: ELASTIC_LENGTH,
+        backgroundColor: backgroundColor.accented,
+    },
     modalContainer: {
         ...StyleSheet.absoluteFillObject,
     },
@@ -69,14 +90,26 @@ const styles = StyleSheet.create({
         borderTopRightRadius: radii[8],
         boxShadow: shadows.modal,
         alignSelf: "stretch",
-        marginTop: spacings[32],
     },
     pressableOverlay: {
-        ...StyleSheet.absoluteFillObject,
+        ...commonStyles.fill,
+        outlineWidth: 0,
+        // make focus indicator invisible on iOS (outline: none doesn't work)
+        opacity: 0,
+    },
+    grabContainer: {
+        paddingHorizontal: 128,
+        paddingVertical: spacings[12],
+    },
+    grabLine: {
+        backgroundColor: colors.gray[100],
+        height: 5,
+        borderRadius: radii[4],
     },
 });
 export const BottomPanel = ({ visible, onPressClose, children, returnFocus = true }) => {
     const [rootElement, setRootElement] = useState(() => undefined);
+    const container = useRef(null);
     useEffect(() => {
         const rootElement = document.createElement("div");
         document.body.append(rootElement);
@@ -86,9 +119,38 @@ export const BottomPanel = ({ visible, onPressClose, children, returnFocus = tru
             setRootElement(undefined);
         };
     }, []);
+    const panResponder = useMemo(() => PanResponder.create({
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: () => {
+            if (container.current instanceof HTMLElement) {
+                container.current.style.transitionDuration = "0ms";
+            }
+        },
+        onPanResponderMove: (_event, { dy }) => {
+            const translateY = dy > 0 ? dy : -limitGrab(-dy);
+            if (container.current instanceof HTMLElement) {
+                container.current.style.transform = `translateY(${translateY}px)`;
+            }
+        },
+        onPanResponderRelease: (_event, gestureState) => {
+            if (container.current instanceof HTMLElement) {
+                // @ts-expect-error
+                container.current.style.transitionDuration = null;
+            }
+            const shouldClose = gestureState.dy > DELTA_Y_CLOSE_THRESHOLD || gestureState.vy > SWIPE_CLOSE_VELOCITY;
+            if (shouldClose) {
+                onPressClose();
+            }
+            else {
+                if (container.current instanceof HTMLElement) {
+                    container.current.style.transform = `translateY(0px)`;
+                }
+            }
+        },
+    }), [onPressClose]);
     useBodyClassName("BottomPanelOpen", { enabled: visible });
     if (rootElement == null) {
         return null;
     }
-    return (_jsxs(Portal, { container: rootElement, children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsxs(ScrollView, { style: styles.modalContainer, contentContainerStyle: styles.modalContentContainer, children: [_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: returnFocus, style: styles.trap, children: onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null }), _jsx(View, { style: styles.modal, children: children })] })) : null }) })] }));
+    return (_jsxs(Portal, { container: rootElement, children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsxs(View, { ref: container, style: styles.container, children: [_jsx(ScrollView, { style: styles.modalContainer, contentContainerStyle: styles.modalContentContainer, children: _jsxs(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: returnFocus, style: styles.trap, children: [onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null, _jsxs(View, { style: styles.modal, children: [_jsx(View, { style: styles.grabContainer, ...panResponder.panHandlers, children: _jsx(View, { style: styles.grabLine }) }), children] })] }) }), _jsx(View, { style: styles.bottomCache })] })) : null }) })] }));
 };

package/src/components/Breadcrumbs.js

@@ -165,10 +165,10 @@ export const useCrumb = (crumb) => {
     }, [id, crumb, setValue, index]);
 };
 const CHEVRON = (_jsx(View, { style: styles.chevron, children: _jsx(Icon, { name: "chevron-right-filled", color: colors.gray[500], size: 16 }) }));
-const BreadcrumbsSiblingsDropdown = ({ siblings, onPress, }) => {
+const BreadcrumbsSiblingsDropdown = ({ siblings, isLast, onPress, }) => {
     return (_jsx(View, { style: styles.siblingsDropdown, children: siblings.map(({ url, label, isMatching }) => {
             return (_jsx(Link, { to: url, ariaCurrentValue: "location", onPress: (event) => {
-                    if (isMatching) {
+                    if (isMatching && isLast) {
                         event.preventDefault();
                     }
                     onPress();
@@ -192,7 +192,7 @@ const BreadcrumbsItem = ({ crumb, isFirstItem = false, isLastItem = false, shoul
     return (_jsxs(View, { style: [styles.item, shouldAnimate ? animations.fadeAndSlideInFromRight.enter : null], children: [!isFirstItem ? CHEVRON : null, _jsxs(View, { children: [_jsx(Link, { to: crumb.link, ariaCurrentValue: "location", onPress: handlePress, children: _jsx(View, { ref: hoverRef, style: [
                                 styles.horizontalLink,
                                 shouldAnimate && animations.fadeAndSlideInFromRight.enter,
-                            ], children: _jsxs(LakeText, { color: colors.gray[800], style: [styles.horizontalLinkText, isLastItem && styles.activeHorizontalLinkText], children: [_jsx(Text, { style: isHovered && !isLastItem ? styles.horizontalLinkTextHovered : undefined, children: crumb.label }), crumb.siblings != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 4 }), _jsx(Icon, { name: "chevron-down-filled", color: colors.gray[500], size: 16 })] })) : null] }) }) }), _jsx(View, { style: styles.dropdownContainer, children: _jsx(TransitionView, { ...animations.fadeAndSlideInFromBottom, children: siblings ? (_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: true, onClickOutside: () => setSiblings(null), onEscapeKey: () => setSiblings(null), children: _jsx(BreadcrumbsSiblingsDropdown, { siblings: siblings, onPress: () => setSiblings(null) }) })) : null }) })] })] }));
+                            ], children: _jsxs(LakeText, { color: colors.gray[800], style: [styles.horizontalLinkText, isLastItem && styles.activeHorizontalLinkText], children: [_jsx(Text, { style: isHovered && !isLastItem ? styles.horizontalLinkTextHovered : undefined, children: crumb.label }), crumb.siblings != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 4 }), _jsx(Icon, { name: "chevron-down-filled", color: colors.gray[500], size: 16 })] })) : null] }) }) }), _jsx(View, { style: styles.dropdownContainer, children: _jsx(TransitionView, { ...animations.fadeAndSlideInFromBottom, children: siblings ? (_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: true, onClickOutside: () => setSiblings(null), onEscapeKey: () => setSiblings(null), children: _jsx(BreadcrumbsSiblingsDropdown, { siblings: siblings, isLast: isLastItem, onPress: () => setSiblings(null) }) })) : null }) })] })] }));
 };
 const BreadcrumbsDropdown = ({ crumbs, onHoverStart, onHoverEnd, onLinkFocus, onLinkBlur, onLinkPress, }) => {
     const containerRef = useRef(null);

package/src/components/ChoicePicker.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { StyleSheet, View } from "react-native";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { match } from "ts-pattern";
 import { breakpoints, negativeSpacings, spacings } from "../constants/design";
 import { useResponsive } from "../hooks/useResponsive";
+import { clampValue } from "../utils/math";
+import { detectScrollAnimationEnd } from "../utils/viewport";
 import { LakeButton } from "./LakeButton";
 import { LakeRadio } from "./LakeRadio";
 import { Pressable } from "./Pressable";
@@ -16,6 +19,9 @@ const styles = StyleSheet.create({
         overflow: "hidden",
         marginHorizontal: negativeSpacings[12],
     },
+    scrollSnap: {
+        scrollSnapType: "x mandatory",
+    },
     container: {
         alignSelf: "stretch",
         flexDirection: "row",
@@ -35,6 +41,8 @@ const styles = StyleSheet.create({
         flexBasis: "33.333%",
         maxWidth: 300,
         padding: spacings[12],
+    },
+    itemAnimation: {
         transform: "translateZ(0px)",
         animationKeyframes: {
             from: {
@@ -58,6 +66,7 @@ const styles = StyleSheet.create({
         width: "100%",
         flexBasis: "auto",
         maxWidth: "none",
+        scrollSnapAlign: "center",
     },
     tileContents: {
         alignItems: "center",
@@ -74,26 +83,108 @@ const styles = StyleSheet.create({
         top: "50%",
         left: negativeSpacings[24],
         transform: "translateY(-50%)",
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderWidth: 1,
+        borderLeftWidth: 0,
     },
     rightButton: {
         position: "absolute",
         top: "50%",
         right: negativeSpacings[24],
         transform: "translateY(-50%)",
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        borderWidth: 1,
+        borderRightWidth: 0,
     },
 });
 const identity = (x) => x;
 export const ChoicePicker = ({ items, getId = identity, large = false, renderItem, value, onChange, }) => {
+    const containerRef = useRef(null);
     const { desktop } = useResponsive(breakpoints.medium);
-    const [index, setIndex] = useState(0);
-    return (_jsxs(View, { children: [_jsx(View, { style: styles.root, children: _jsx(View, { style: [
+    const [mobilePosition, setMobilePosition] = useState("start");
+    useEffect(() => {
+        if (desktop) {
+            return;
+        }
+        // auto scroll to selected value on mobile
+        const scrollContainer = containerRef.current;
+        const index = items.findIndex(item => value === item);
+        if (index !== -1 && scrollContainer instanceof HTMLDivElement) {
+            const width = scrollContainer.offsetWidth;
+            scrollContainer.scrollTo({ x: index * width, animated: false });
+        }
+        // if no value is selected, select first item
+        if (value == null && items[0] != null) {
+            onChange(items[0]);
+        }
+        // disable exhaustive-deps because we only want to run this effect only when screen size go from desktop to mobile
+    }, [desktop]); // eslint-disable-line react-hooks/exhaustive-deps
+    const onScroll = () => {
+        // prevent scroll event when we change screen size from mobile to desktop
+        if (desktop) {
+            return;
+        }
+        const scrollContainer = containerRef.current;
+        if (scrollContainer instanceof HTMLDivElement) {
+            const scrollLeft = scrollContainer.scrollLeft;
+            const width = scrollContainer.offsetWidth;
+            const index = clampValue(0, items.length - 1)(Math.round(scrollLeft / width));
+            const item = items[index];
+            if (item != null) {
+                onChange(item);
+            }
+            match(index)
+                .with(0, () => setMobilePosition("start"))
+                .with(items.length - 1, () => setMobilePosition("end"))
+                .otherwise(() => setMobilePosition("middle"));
+        }
+    };
+    const onPressPrevious = () => {
+        const scrollContainer = containerRef.current;
+        if (scrollContainer instanceof HTMLDivElement) {
+            const scrollLeft = scrollContainer.scrollLeft;
+            const width = scrollContainer.offsetWidth;
+            const index = Math.round(scrollLeft / width);
+            const previousIndex = Math.max(0, index - 1);
+            // remove scroll snap during scroll animation to avoid weird behavior on older browsers
+            scrollContainer.style.scrollSnapType = "none";
+            containerRef.current?.scrollTo({ x: previousIndex * width, animated: true });
+            detectScrollAnimationEnd(scrollContainer).onResolve(() => {
+                // set back scroll snap
+                // @ts-expect-error
+                scrollContainer.style.scrollSnapType = null;
+            });
+        }
+    };
+    const onPressNext = () => {
+        const scrollContainer = containerRef.current;
+        if (scrollContainer instanceof HTMLDivElement) {
+            const scrollLeft = scrollContainer.scrollLeft;
+            const width = scrollContainer.offsetWidth;
+            const index = Math.round(scrollLeft / width);
+            const nextIndex = Math.min(items.length - 1, index + 1);
+            // remove scroll snap during scroll animation to avoid weird behavior on older browsers
+            scrollContainer.style.scrollSnapType = "none";
+            containerRef.current?.scrollTo({ x: nextIndex * width, animated: true });
+            detectScrollAnimationEnd(scrollContainer).onResolve(() => {
+                // set back scroll snap
+                // @ts-expect-error
+                scrollContainer.style.scrollSnapType = null;
+            });
+        }
+    };
+    return (_jsxs(View, { children: [_jsx(View, { style: styles.root, children: _jsx(ScrollView, { ref: containerRef, horizontal: !desktop, onScroll: onScroll, scrollEventThrottle: 200, style: styles.scrollSnap, contentContainerStyle: [
                         styles.container,
                         !desktop && styles.mobileContainer,
-                        !desktop && { transform: `translateX(-${100 * index}%)` },
+                        !desktop && { width: `${items.length * 100}%` },
                     ], children: items.map((item, index) => (_jsx(Pressable, { style: [
                             styles.item,
+                            desktop && styles.itemAnimation,
+                            desktop && { animationDelay: `${200 + 100 * index}ms` },
                             large && styles.itemLarge,
                             !desktop && styles.itemSmallViewport,
-                            { animationDelay: `${200 + 100 * index}ms` },
-                        ], onPress: () => onChange(item), children: ({ hovered }) => (_jsx(Tile, { hovered: hovered, selected: value != null && getId(item) === getId(value), flexGrow: 1, children: _jsxs(View, { style: styles.tileContents, children: [_jsx(View, { style: styles.tileRenderedContents, children: renderItem(item) }), _jsx(Space, { height: 24 }), _jsx(LakeRadio, { value: value != null && getId(item) === getId(value) })] }) })) }, String(index)))) }) }), !desktop && (_jsx(View, { style: styles.leftButton, children: _jsx(LakeButton, { icon: "chevron-left-filled", mode: "secondary", forceBackground: true, onPress: () => setIndex(Math.max(0, index - 1)), disabled: index === 0 }) })), !desktop && (_jsx(View, { style: styles.rightButton, children: _jsx(LakeButton, { icon: "chevron-right-filled", mode: "secondary", forceBackground: true, onPress: () => setIndex(Math.min(items.length - 1, index + 1)), disabled: index === items.length - 1 }) }))] }));
+                            !desktop && { width: `${100 / items.length}%` },
+                        ], onPress: () => onChange(item), children: ({ hovered }) => (_jsx(Tile, { hovered: hovered, selected: value != null && getId(item) === getId(value), flexGrow: 1, children: _jsxs(View, { style: styles.tileContents, children: [_jsx(View, { style: styles.tileRenderedContents, children: renderItem(item) }), desktop && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeRadio, { value: value != null && getId(item) === getId(value) })] }))] }) })) }, String(index)))) }) }), !desktop && (_jsx(LakeButton, { icon: "chevron-left-filled", mode: "secondary", forceBackground: true, onPress: onPressPrevious, disabled: mobilePosition === "start", style: styles.leftButton })), !desktop && (_jsx(LakeButton, { icon: "chevron-right-filled", mode: "secondary", forceBackground: true, onPress: onPressNext, disabled: mobilePosition === "end", style: styles.rightButton }))] }));
 };

package/src/components/Filters.js

@@ -193,6 +193,10 @@ 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(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 })] }) })] }));
 }
+function FilterBooleanTag({ children, onAdd, onPressRemove }) {
+    useEffect(onAdd, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsx(Tag, { color: "current", onPressRemove: onPressRemove, children: children }));
+}
 const getFilterValue = (_type, filters, name) => filters[name];
 export const FiltersStack = ({ filters, openedFilters, definition, onChangeOpened, onChangeFilters, }) => {
     const previousOpened = usePreviousValue(openedFilters);
@@ -224,7 +228,9 @@ export const FiltersStack = ({ filters, openedFilters, definition, onChangeOpene
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     } })))
-                    .with({ type: "boolean" }, ({ label }) => (_jsx(Tag, { color: "current", onPressRemove: () => {
+                    .with({ type: "boolean" }, ({ label }) => (_jsx(FilterBooleanTag, { onAdd: () => {
+                        onChangeFilters({ ...filters, [filterName]: true });
+                    }, onPressRemove: () => {
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     }, children: label })))

package/src/components/Form.d.ts

@@ -1,7 +1,126 @@
 import { ReactNode } from "react";
-import { View, ViewProps } from "react-native";
-import { Except } from "type-fest";
-export declare const Form: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Except<ViewProps, "role"> & {
+import { View } from "react-native";
+export declare const Form: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
+    children?: ReactNode;
+    hitSlop?: import("react-native").Insets | undefined;
+    id?: string | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+    pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
+    removeClippedSubviews?: boolean | undefined;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    testID?: string | undefined;
+    nativeID?: string | undefined;
+    onKeyDown?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
+    onKeyDownCapture?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
+    onKeyUp?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
+    onKeyUpCapture?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
+    collapsable?: boolean | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    focusable?: boolean | undefined;
+    shouldRasterizeIOS?: boolean | undefined;
+    isTVSelectable?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+    tvParallaxShiftDistanceX?: number | undefined;
+    tvParallaxShiftDistanceY?: number | undefined;
+    tvParallaxTiltAngle?: number | undefined;
+    tvParallaxMagnification?: number | undefined;
+    onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined;
+    'aria-label'?: string | undefined;
+    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    'aria-busy'?: boolean | undefined;
+    'aria-checked'?: boolean | "mixed" | undefined;
+    'aria-disabled'?: boolean | undefined;
+    'aria-expanded'?: boolean | undefined;
+    'aria-selected'?: boolean | undefined;
+    'aria-labelledby'?: string | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    'aria-hidden'?: boolean | undefined;
+    'aria-live'?: "polite" | "assertive" | "off" | undefined;
+    'aria-modal'?: boolean | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    onMagicTap?: (() => void) | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    tabIndex?: 0 | -1 | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: boolean | undefined;
+    "aria-autocomplete"?: string | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-haspopup"?: string | undefined;
+    "aria-invalid"?: boolean | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-multiline"?: boolean | undefined;
+    "aria-multiselectable"?: boolean | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | undefined;
+    "aria-readonly"?: boolean | undefined;
+    "aria-required"?: boolean | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+} & {
     children?: ReactNode;
     onReset?: ((event: React.FormEvent<HTMLElement>) => void) | undefined;
     onSubmit?: ((event: React.FormEvent<HTMLElement>) => void) | undefined;