@swan-io/lake 1.0.0

package/src/components/Link.d.ts

@@ -0,0 +1,138 @@
+/// <reference types="react" />
+import { PressableTextProps } from "@swan-io/lake/src/components/Pressable";
+import { HrefAttrs, PressableStateCallbackType, Text, TextProps } from "react-native";
+import { Except } from "type-fest";
+export type LinkProps = Except<PressableTextProps, "hrefAttrs" | "style" | "onPress" | "children"> & {
+    to: string;
+    replace?: boolean;
+    disabled?: boolean;
+    download?: boolean;
+    target?: NonNullable<HrefAttrs>["target"];
+    style?: TextProps["style"] | ((state: PressableStateCallbackType & {
+        active: boolean;
+    }) => TextProps["style"]);
+    ariaCurrentValue?: "page" | "location";
+    onPress?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    children?: TextProps["children"] | ((state: PressableStateCallbackType & {
+        active: boolean;
+    }) => TextProps["children"]);
+};
+export declare const Link: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Except<{
+    testID?: string | undefined;
+    style?: false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | ((state: PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").TextStyle>) | null | undefined;
+    children?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | ((state: PressableStateCallbackType) => import("react").ReactNode) | null | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+    nativeID?: string | undefined;
+    accessibilityRole?: import("react-native").WebAccessibilityRole | undefined;
+    onKeyDown?: ((event: import("react-native").NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
+    focusable?: boolean | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    accessibilityLabelledBy?: string | string[] | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityLanguage?: string | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    onMagicTap?: (() => void) | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    accessibilityActiveDescendant?: string | undefined;
+    accessibilityAtomic?: boolean | undefined;
+    accessibilityAutoComplete?: string | undefined;
+    accessibilityBusy?: boolean | undefined;
+    accessibilityChecked?: boolean | "mixed" | undefined;
+    accessibilityColumnCount?: number | undefined;
+    accessibilityColumnIndex?: number | undefined;
+    accessibilityColumnSpan?: number | undefined;
+    accessibilityControls?: string | undefined;
+    accessibilityCurrent?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
+    accessibilityDescribedBy?: string | undefined;
+    accessibilityDetails?: string | undefined;
+    accessibilityDisabled?: boolean | undefined;
+    accessibilityErrorMessage?: string | undefined;
+    accessibilityExpanded?: boolean | undefined;
+    accessibilityFlowTo?: string | undefined;
+    accessibilityHasPopup?: string | undefined;
+    accessibilityHidden?: boolean | undefined;
+    accessibilityInvalid?: boolean | undefined;
+    accessibilityKeyShortcuts?: string[] | undefined;
+    accessibilityLevel?: number | undefined;
+    accessibilityModal?: boolean | undefined;
+    accessibilityMultiSelectable?: boolean | undefined;
+    accessibilityMultiline?: boolean | undefined;
+    accessibilityOrientation?: "horizontal" | "vertical" | undefined;
+    accessibilityOwns?: string | undefined;
+    accessibilityPlaceholder?: string | undefined;
+    accessibilityPosInSet?: number | undefined;
+    accessibilityPressed?: boolean | undefined;
+    accessibilityReadOnly?: boolean | undefined;
+    accessibilityRequired?: boolean | undefined;
+    accessibilityRoleDescription?: string | undefined;
+    accessibilityRowCount?: number | undefined;
+    accessibilityRowIndex?: number | undefined;
+    accessibilityRowSpan?: number | undefined;
+    accessibilitySelected?: boolean | undefined;
+    accessibilitySetSize?: number | undefined;
+    accessibilitySort?: "none" | "ascending" | "descending" | "other" | undefined;
+    accessibilityValueMax?: number | undefined;
+    accessibilityValueMin?: number | undefined;
+    accessibilityValueNow?: number | undefined;
+    accessibilityValueText?: string | undefined;
+    allowFontScaling?: boolean | undefined;
+    ellipsizeMode?: "clip" | "head" | "middle" | "tail" | undefined;
+    lineBreakMode?: "clip" | "head" | "middle" | "tail" | undefined;
+    numberOfLines?: number | undefined;
+    onTextLayout?: ((event: import("react-native").NativeSyntheticEvent<import("react-native").TextLayoutEventData>) => void) | undefined;
+    onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onPressIn?: ((event: unknown) => void) | undefined;
+    onPressOut?: ((event: unknown) => void) | undefined;
+    onLongPress?: ((event: unknown) => void) | undefined;
+    maxFontSizeMultiplier?: number | null | undefined;
+    href?: string | undefined;
+    hrefAttrs?: HrefAttrs | undefined;
+    lang?: string | undefined;
+    adjustsFontSizeToFit?: boolean | undefined;
+    minimumFontScale?: number | undefined;
+    suppressHighlighting?: boolean | undefined;
+    disabled?: boolean | undefined;
+    selectable?: boolean | undefined;
+    selectionColor?: import("react-native").ColorValue | undefined;
+    textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
+    dataDetectorType?: "none" | "all" | "link" | "phoneNumber" | "email" | null | undefined;
+    android_hyphenationFrequency?: "none" | "normal" | "full" | undefined;
+    onBlur?: ((event: import("react-native").NativeSyntheticEvent<import("react").FocusEvent<Element, Element>>) => void) | undefined;
+    onFocus?: ((event: import("react-native").NativeSyntheticEvent<import("react").FocusEvent<Element, Element>>) => void) | undefined;
+    onPressMove?: ((event: unknown) => void) | undefined;
+    delayLongPress?: number | undefined;
+    delayPressIn?: number | undefined;
+    delayPressOut?: number | undefined;
+    onContextMenu?: ((event: import("react-native").NativeSyntheticEvent<import("react").SyntheticEvent<Element, Event>>) => void) | undefined;
+    onHoverIn?: ((event: unknown) => void) | undefined;
+    onHoverOut?: ((event: unknown) => void) | undefined;
+    testOnly_hovered?: boolean | undefined;
+    testOnly_pressed?: boolean | undefined;
+}, "style" | "children" | "onPress" | "hrefAttrs"> & {
+    to: string;
+    replace?: boolean | undefined;
+    disabled?: boolean | undefined;
+    download?: boolean | undefined;
+    target?: NonNullable<HrefAttrs>["target"];
+    style?: import("react-native").StyleProp<import("react-native").TextStyle> | ((state: PressableStateCallbackType & {
+        active: boolean;
+    }) => TextProps["style"]);
+    ariaCurrentValue?: "page" | "location" | undefined;
+    onPress?: ((e: React.MouseEvent<HTMLAnchorElement>) => void) | undefined;
+    children?: import("react").ReactNode | ((state: PressableStateCallbackType & {
+        active: boolean;
+    }) => TextProps["children"]);
+} & import("react").RefAttributes<Text>>>;

package/src/components/Link.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLinkProps } from "@swan-io/chicane";
+import { PressableText } from "@swan-io/lake/src/components/Pressable";
+import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
+import { forwardRef, memo } from "react";
+export const Link = memo(forwardRef(({ accessibilityRole = "link", children, disabled = false, onPress, replace = false, download = false, style, target, to, ariaCurrentValue = "page", focusable, ...props }, forwardedRef) => {
+    const { active, onClick } = useLinkProps({ href: to, replace, target });
+    return (_jsx(PressableText, { ...props, accessibilityRole: accessibilityRole, accessibilityDisabled: disabled, focusable: isNotNullish(focusable) ? focusable : !disabled, accessibilityCurrent: active ? ariaCurrentValue : undefined, href: to, onPress: (event) => {
+            const e = event;
+            if (disabled) {
+                e.preventDefault();
+            }
+            else {
+                onPress?.(e);
+                onClick(e);
+            }
+        }, ref: forwardedRef, style: typeof style === "function" ? state => style({ ...state, active }) : style, hrefAttrs: {
+            rel: target && target !== "self" ? "noopener noreferrer" : undefined,
+            download,
+            target,
+        }, children: typeof children === "function" ? state => children({ ...state, active }) : children }));
+}));
+Link.displayName = "Link";

package/src/components/ListRightPanel.d.ts

@@ -0,0 +1,17 @@
+import { MutableRefObject } from "react";
+import { FocusTrapRef } from "./FocusTrap";
+type Props<T> = {
+    items: T[];
+    keyExtractor: (item: T) => string;
+    activeId: string | null;
+    onActiveIdChange: (id: string) => void;
+    onClose: () => void;
+    render: (item: T, large: boolean) => React.ReactNode;
+    closeLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+};
+export declare const ListRightPanel: <T>(props: Props<T> & {
+    ref?: MutableRefObject<FocusTrapRef | null>;
+}) => React.ReactElement;
+export {};

package/src/components/ListRightPanel.js

@@ -0,0 +1,79 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Array, Option } from "@swan-io/boxed";
+import { forwardRef } from "react";
+import { StyleSheet, View } from "react-native";
+import { match } from "ts-pattern";
+import { animations, spacings } from "../constants/design";
+import { usePreviousValue } from "../hooks/usePreviousValue";
+import { noop } from "../utils/function";
+import { Box } from "./Box";
+import { LakeButton } from "./LakeButton";
+import { RightPanel } from "./RightPanel";
+import { Space } from "./Space";
+import { TransitionView } from "./TransitionView";
+const styles = StyleSheet.create({
+    details: {
+        padding: spacings[24],
+        paddingTop: spacings[12],
+        flexGrow: 1,
+    },
+    detailsLarge: {
+        paddingVertical: spacings[24],
+        paddingTop: spacings[12],
+        paddingHorizontal: spacings[40],
+        flexGrow: 1,
+    },
+    detailsContents: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    detailsContainer: {
+        flexGrow: 1,
+    },
+});
+const ListRightPanel_ = forwardRef(({ items, keyExtractor, activeId, onActiveIdChange, onClose, render, closeLabel, previousLabel, nextLabel, }, ref) => {
+    const activeItem = items.find(item => keyExtractor(item) === activeId);
+    // use `Array.getIndexBy` instead of `Array.findIndex` to avoid -1 value
+    const activeItemIndex = Array.getIndexBy(items, item => keyExtractor(item) === activeId).toUndefined();
+    const previousId = usePreviousValue(activeId);
+    const previousItem = usePreviousValue(activeItem);
+    const previousIndex = usePreviousValue(activeItemIndex);
+    const newDetailDirection = typeof activeItemIndex === "number" && typeof previousIndex === "number"
+        ? match({ activeItemIndex, previousIndex })
+            .when(({ activeItemIndex, previousIndex }) => activeItemIndex < previousIndex, () => animations.fadeAndSlideInFromTop)
+            .when(({ activeItemIndex, previousIndex }) => activeItemIndex > previousIndex, () => animations.fadeAndSlideInFromBottom)
+            .otherwise(() => null)
+        : null;
+    const previousDetailDirection = typeof activeItemIndex === "number" && typeof previousIndex === "number"
+        ? match({ activeItemIndex, previousIndex })
+            .when(({ activeItemIndex, previousIndex }) => activeItemIndex < previousIndex, () => animations.fadeAndSlideInFromBottom)
+            .when(({ activeItemIndex, previousIndex }) => activeItemIndex > previousIndex, () => animations.fadeAndSlideInFromTop)
+            .otherwise(() => null)
+        : null;
+    return (_jsx(RightPanel, { ref: ref, visible: activeItem != null, onPressClose: onClose, children: ({ large }) => (_jsxs(View, { style: large ? styles.detailsLarge : styles.details, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeButton, { mode: "tertiary", icon: "lake-close", accessibilityLabel: closeLabel, onPress: onClose }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeButton, { mode: "tertiary", accessibilityLabel: previousLabel, icon: "arrow-left-regular", disabled: activeItemIndex === 0, onPress: () => {
+                                        if (typeof activeItemIndex === "number") {
+                                            Option.fromNullable(items[activeItemIndex - 1]).match({
+                                                Some: item => onActiveIdChange(keyExtractor(item)),
+                                                None: noop,
+                                            });
+                                        }
+                                    } }), _jsx(LakeButton, { mode: "tertiary", accessibilityLabel: nextLabel, icon: "arrow-right-regular", disabled: activeItemIndex === items.length - 1, onPress: () => {
+                                        if (typeof activeItemIndex === "number") {
+                                            Option.fromNullable(items[activeItemIndex + 1]).match({
+                                                Some: item => onActiveIdChange(keyExtractor(item)),
+                                                None: noop,
+                                            });
+                                        }
+                                    } })] })] }), _jsx(Space, { height: 12 }), _jsx(View, { style: styles.detailsContainer, children: activeItem != null
+                        ? [
+                            _createElement(TransitionView, { ...newDetailDirection, key: activeId, style: styles.detailsContents }, render(activeItem, large)),
+                            ...(previousItem != null && previousId !== activeId
+                                ? [
+                                    _createElement(TransitionView, { ...previousDetailDirection, key: previousId, style: styles.detailsContents }, null),
+                                ]
+                                : []),
+                        ]
+                        : null })] })) }));
+});
+// @ts-expect-error this is the only way I found to use generic props with forwardRef
+export const ListRightPanel = ListRightPanel_;

package/src/components/LoadingView.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StyleProp, View, ViewStyle } from "react-native";
+type Props = {
+    color?: string;
+    delay?: number;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const LoadingView: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<View>>;
+export {};

package/src/components/LoadingView.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { colors } from "../constants/colors";
+const styles = StyleSheet.create({
+    base: {
+        alignItems: "center",
+        flexGrow: 1,
+        flexShrink: 1,
+        justifyContent: "center",
+    },
+    indicator: {
+        opacity: 0,
+        animationKeyframes: {
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+        },
+        animationDuration: "250ms",
+        animationFillMode: "forwards",
+        animationTimingFunction: "ease",
+    },
+});
+const isDev = process.env.NODE_ENV === "development";
+export const LoadingView = forwardRef(({ color = colors.gray[100], delay = isDev ? 0 : 1000, style }, forwardedRef) => (_jsx(View, { ref: forwardedRef, style: [styles.base, style], children: _jsx(ActivityIndicator, { size: "small", color: color, style: [styles.indicator, delay > 0 && { animationDelay: delay.toString() + "ms" }] }) })));

package/src/components/Modal.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode, ReactText } from "react";
+import { Modal as BaseModal, StyleProp, ViewStyle } from "react-native";
+type Props = {
+    children?: ReactNode;
+    onDismiss?: () => void;
+    title?: ReactText;
+    style?: StyleProp<ViewStyle>;
+    visible?: boolean;
+    wrapContent?: boolean;
+};
+export declare const Modal: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<BaseModal>>>;
+export {};

package/src/components/Modal.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo } from "react";
+import { Modal as BaseModal, Pressable, ScrollView, StyleSheet, TouchableOpacity, View, } from "react-native";
+import { backgroundColor, colors, radii } from "../constants/design";
+import { useResponsive } from "../hooks/useResponsive";
+import { Box } from "./Box";
+import { Fill } from "./Fill";
+import { Heading } from "./Heading";
+import { Icon } from "./Icon";
+import { Separator } from "./Separator";
+const styles = StyleSheet.create({
+    // eslint-disable-next-line react-native/no-color-literals
+    blanket: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: "rgba(0,0,0,0.5)",
+        cursor: "default",
+        flexGrow: 1,
+        flexShrink: 1,
+    },
+    outbox: {
+        margin: 16,
+        flexGrow: 1,
+        flexShrink: 1,
+    },
+    desktopOutbox: {
+        margin: 32,
+    },
+    modal: {
+        backgroundColor: backgroundColor.accented,
+        borderRadius: radii[8],
+        flexGrow: 1,
+        flexShrink: 1,
+        overflow: "hidden",
+    },
+    wrapped: {
+        flexGrow: 0,
+        margin: "auto",
+    },
+    desktopModal: {
+        flexGrow: 0,
+        margin: "auto",
+        width: 800,
+        maxWidth: "100%",
+    },
+    content: {
+        minHeight: "100%",
+        padding: 20,
+    },
+    contentDesktop: {
+        padding: 40,
+    },
+    title: {
+        flexGrow: 1,
+        flexShrink: 1,
+        paddingLeft: 20,
+        paddingVertical: 20,
+    },
+    titleHeader: {
+        paddingLeft: 40,
+        paddingVertical: 32,
+    },
+    dismissIcon: {
+        padding: 20,
+        right: 0,
+    },
+    dismissIconDesktop: {
+        marginVertical: 12,
+        marginRight: 20,
+    },
+});
+export const Modal = memo(forwardRef(({ children, onDismiss, title = "", style, visible = false, wrapContent = false }, forwardedRef) => {
+    const { desktop, media } = useResponsive();
+    return (_jsxs(BaseModal, { ref: forwardedRef, animationType: "fade", visible: visible, transparent: true, onDismiss: onDismiss, onRequestClose: onDismiss, children: [_jsx(Pressable, { accessibilityRole: "none", focusable: false, onPress: onDismiss, style: styles.blanket }), _jsx(View, { pointerEvents: "box-none", style: [styles.outbox, desktop && styles.desktopOutbox], children: _jsxs(View, { style: [
+                        styles.modal,
+                        desktop && styles.desktopModal,
+                        wrapContent && styles.wrapped,
+                        style,
+                    ], children: [_jsxs(Box, { direction: "row", accessibilityRole: "banner", alignItems: "center", children: [title !== "" ? (_jsx(Heading, { size: media({ mobile: 20, desktop: 24 }), level: 2, style: [styles.title, desktop && styles.titleHeader], children: title })) : (_jsx(Fill, {})), onDismiss && (_jsx(TouchableOpacity, { accessibilityRole: "button", activeOpacity: 0.5, style: [styles.dismissIcon, desktop && styles.dismissIconDesktop], onPress: onDismiss, children: _jsx(Icon, { name: "dismiss-filled", size: 18, color: colors.gray[500] }) }))] }), title !== "" && _jsx(Separator, {}), _jsx(ScrollView, { contentContainerStyle: desktop ? styles.contentDesktop : styles.content, children: children })] }) })] }));
+}));
+Modal.displayName = "Modal";

package/src/components/MultiSelect.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+import { ColorVariants } from "../constants/design";
+export type MultiSelectItem = {
+    disabled?: boolean;
+    group: string;
+    label: string;
+    value: string;
+};
+export type MultiSelectProps<I> = {
+    color?: ColorVariants;
+    disabled?: boolean;
+    error?: string;
+    emptyResultText?: string;
+    enableGroups?: boolean;
+    filterPlaceholder?: string;
+    items: I[];
+    onValueChange: (values: string[]) => void;
+    placeholder?: string;
+    renderTagGroup?: (items: readonly MultiSelectItem[]) => string;
+    style?: StyleProp<ViewStyle>;
+    values: string[];
+    nativeID?: string;
+};
+export declare const MultiSelect: (<I extends MultiSelectItem>(props: MultiSelectProps<I>) => JSX.Element | null) & {
+    displayName?: string | undefined;
+};

package/src/components/MultiSelect.js

@@ -0,0 +1,223 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Array, Dict, Option } from "@swan-io/boxed";
+import { memo as reactMemo, useEffect, useMemo, useRef, useState } from "react";
+import { FlatList, Pressable, SectionList, StyleSheet, Text, View, } from "react-native";
+import { backgroundColor, colors, radii, shadows, texts } from "../constants/design";
+import { useDisclosure } from "../hooks/useDisclosure";
+import { groupBy } from "../utils/array";
+import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
+import { safeSplitAround } from "../utils/string";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { InputError } from "./InputError";
+import { Popover } from "./Popover";
+import { PressableText, PressableTextInput } from "./Pressable";
+import { Space } from "./Space";
+import { Tag } from "./Tag";
+const MAX_INPUT_HEIGHT = 120;
+const ITEM_ELEMENT_HEIGHT = 32;
+const NB_SUGGESTION_DISPLAYED = 10.5;
+const styles = StyleSheet.create({
+    base: {
+        ...texts.regular,
+        backgroundColor: backgroundColor.accented,
+        borderColor: colors.gray[100],
+        borderRadius: radii[6],
+        borderWidth: 1,
+        cursor: "default",
+        overflow: "hidden",
+        transitionDuration: "150ms",
+        transitionProperty: ["border-color", "box-shadow"],
+    },
+    errored: {
+        borderColor: colors.negative[500],
+    },
+    tag: {
+        marginRight: 4,
+        marginVertical: 2,
+    },
+    hovered: {
+        boxShadow: shadows.tile,
+    },
+    focused: {
+        borderColor: colors.gray[500],
+        boxShadow: shadows.tile,
+        outlineStyle: "none",
+    },
+    disabled: {
+        backgroundColor: colors.gray[50],
+        borderColor: colors.gray[100],
+        cursor: "not-allowed",
+    },
+    actions: {
+        marginVertical: "auto",
+        position: "absolute",
+        bottom: 0,
+        top: 0,
+        right: 20,
+    },
+    placeholder: {
+        ...texts.regular,
+        color: colors.gray[300],
+    },
+    list: {
+        marginVertical: 4,
+        maxHeight: ITEM_ELEMENT_HEIGHT * NB_SUGGESTION_DISPLAYED,
+        minHeight: 224,
+    },
+    filterContainer: {
+        flexGrow: 1,
+        flexShrink: 1,
+        margin: 16,
+    },
+    filterInput: {
+        ...texts.regular,
+        backgroundColor: backgroundColor.accented,
+        borderColor: colors.gray[100],
+        borderRadius: 4,
+        borderWidth: 1,
+        flexGrow: 1,
+        flexShrink: 1,
+        height: 40,
+        outlineStyle: "none",
+        paddingHorizontal: 12,
+        paddingLeft: 40,
+        placeholderTextColor: colors.gray[300],
+    },
+    filterfocused: {
+        borderColor: colors.gray[200],
+    },
+    searchIcon: {
+        position: "absolute",
+        left: 14,
+    },
+    tagsList: {
+        flexWrap: "wrap",
+        maxHeight: MAX_INPUT_HEIGHT,
+        minHeight: 40,
+        overflowY: "auto",
+        paddingHorizontal: 16,
+        paddingRight: 60,
+        paddingVertical: 8,
+    },
+    groupTitleBase: {
+        alignItems: "center",
+        flexDirection: "row",
+        flexGrow: 1,
+        flexShrink: 1,
+        justifyContent: "space-between",
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        transitionDuration: "200ms",
+        transitionProperty: "background-color",
+    },
+    groupTitle: {
+        ...texts.semibold,
+    },
+    line: {
+        ...texts.regular,
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        transitionDuration: "200ms",
+        transitionProperty: "background-color",
+    },
+    lineInGroup: {
+        paddingLeft: 24,
+    },
+    emptyList: {
+        height: 136,
+    },
+    emptyListText: {
+        color: colors.gray.primary,
+    },
+});
+const memo = reactMemo;
+export const MultiSelect = memo(({ color = "gray", disabled = false, emptyResultText, enableGroups = true, filterPlaceholder, items, onValueChange, placeholder, renderTagGroup, error, style, values, nativeID, }) => {
+    const [filter, setFilter] = useState("");
+    const shouldScrollToBottomRef = useRef(false);
+    const selectedTagListRef = useRef(null);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const [visible, { open, close }] = useDisclosure(false);
+    const tint50 = colors[color][50];
+    const tint100 = colors[color][100];
+    useEffect(() => {
+        if (!visible) {
+            setFilter("");
+        }
+    }, [visible]);
+    useEffect(() => {
+        if (shouldScrollToBottomRef.current) {
+            const top = selectedTagListRef.current?.scrollHeight;
+            selectedTagListRef.current?.scrollTo({ top });
+        }
+        shouldScrollToBottomRef.current = false;
+    }, [values]);
+    const handleSelectItem = (item) => {
+        shouldScrollToBottomRef.current = true;
+        onValueChange([...values, item.value]);
+    };
+    const handleRemoveItem = (item) => {
+        onValueChange(values.filter(index => index !== item.value));
+    };
+    const handleClearAll = () => {
+        onValueChange([]);
+    };
+    const handleSelectGroup = (groupItems) => {
+        shouldScrollToBottomRef.current = true;
+        const items = groupItems.map(item => item.value);
+        const newValue = [...new Set([...values, ...items])];
+        onValueChange(newValue);
+    };
+    // Used to get full selected value informations in O(1).
+    const valueItemMapping = useMemo(() => items.reduce((acc, item) => {
+        acc[item.value] = item;
+        return acc;
+    }, {}), [items]);
+    const selectedTags = useMemo(() => values.map(value => valueItemMapping[value]).filter(isNotNullish), [values, valueItemMapping]);
+    const filteredItems = useMemo(() => {
+        const remainingTags = items.filter(item => !values.includes(item.value));
+        const cleanedFilter = filter.trim().toLowerCase();
+        return cleanedFilter === ""
+            ? remainingTags
+            : remainingTags.filter(({ label }) => label.toLowerCase().includes(cleanedFilter));
+    }, [filter, items, values]);
+    const sections = useMemo(() => {
+        return Array.keepMap(Dict.entries(groupBy(filteredItems, ({ group }) => group)), ([groupName, data]) => data === undefined ? Option.None() : Option.Some({ title: groupName, data }));
+    }, [filteredItems]);
+    const ListHeaderComponent = useMemo(() => (_jsxs(Box, { direction: "row", alignItems: "center", style: styles.filterContainer, children: [_jsx(PressableTextInput, { autoComplete: "off", keyboardType: "web-search", multiline: false, numberOfLines: 1, onChangeText: filterValue => setFilter(filterValue), placeholder: filterPlaceholder, value: filter, style: ({ focused }) => [styles.filterInput, focused && styles.filterfocused] }), _jsx(Icon, { name: "search-filled", color: colors[color].primary, size: 20, style: styles.searchIcon })] })), [filter, filterPlaceholder, color]);
+    const ListEmptyComponent = useMemo(() => (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), isNotNullishOrEmpty(emptyResultText) && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] }))] })), [emptyResultText]);
+    return (_jsxs(View, { style: style, children: [_jsxs(Pressable, { nativeID: nativeID, ref: inputRef, accessibilityHasPopup: "listbox", accessibilityRole: "button", accessibilityExpanded: visible, disabled: disabled, onPress: open, style: ({ hovered, focused }) => [
+                    styles.base,
+                    hovered && styles.hovered,
+                    (focused || visible) && styles.focused,
+                    disabled && styles.disabled,
+                    isNotNullish(error) && styles.errored,
+                ], children: [_jsx(Box, { ref: selectedTagListRef, alignItems: "center", direction: "row", style: styles.tagsList, children: selectedTags.length > 0 ? (selectedTags.map(item => (_jsx(Tag, { color: color, onPressRemove: disabled ? undefined : () => handleRemoveItem(item), style: styles.tag, children: item.label }, item.value)))) : placeholder !== "" ? (_jsx(Text, { accessibilityRole: "label", numberOfLines: 1, selectable: false, style: styles.placeholder, children: placeholder })) : null }), _jsxs(Box, { direction: "row", alignItems: "center", style: styles.actions, children: [selectedTags.length >= 1 && !disabled && (_jsxs(_Fragment, { children: [_jsx(Pressable, { accessibilityRole: "button", onPress: handleClearAll, children: _jsx(Icon, { name: "dismiss-filled", color: colors.gray.primary, size: 15 }) }), _jsx(Space, { width: 8 })] })), _jsx(Icon, { color: colors.gray.primary, name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 20 })] })] }), _jsx(Popover, { role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: _jsx(View, { style: styles.list, children: enableGroups ? (_jsx(SectionList, { accessibilityRole: "listbox", accessibilityMultiSelectable: true, keyExtractor: (item, index) => `group-field-${item.value}-${index}`, extraData: filter, ListHeaderComponent: ListHeaderComponent, ListEmptyComponent: ListEmptyComponent, ListFooterComponent: _jsx(Space, { height: 16 }), sections: sections, renderSectionHeader: ({ section: { title, data }, }) => (_jsxs(Pressable, { accessibilityRole: "listitem", onPress: () => handleSelectGroup(data), style: ({ hovered, pressed, focused }) => [
+                                styles.groupTitleBase,
+                                (hovered || focused) && { backgroundColor: tint50 },
+                                pressed && { backgroundColor: tint100 },
+                            ], children: [_jsx(Text, { numberOfLines: 1, selectable: false, style: styles.groupTitle, children: title }), isNotNullish(renderTagGroup) && (_jsx(Tag, { color: color, children: renderTagGroup(data) }))] })), renderItem: ({ item }) => (_jsx(LineItem, { color: color, filter: filter, item: item, handleSelectItem: handleSelectItem, style: styles.lineInGroup })) })) : (_jsx(FlatList, { ref: listRef, accessibilityRole: "list", data: filteredItems, extraData: filter, keyExtractor: item => `field-${item.value}`, ListHeaderComponent: ListHeaderComponent, ListEmptyComponent: ListEmptyComponent, ListFooterComponent: _jsx(Space, { height: 8 }), renderItem: ({ item }) => (_jsx(LineItem, { color: color, filter: filter, item: item, handleSelectItem: handleSelectItem })) })) }) }), _jsx(InputError, { message: error })] }));
+});
+const LineItem = ({ item, color, filter, handleSelectItem, style }) => {
+    const { label, disabled = false } = item;
+    const cleanFilter = filter.trim().toLowerCase();
+    const tint50 = colors[color][50];
+    const tint100 = colors[color][100];
+    const tokens = useMemo(() => (disabled || cleanFilter === "" ? label : safeSplitAround(label, cleanFilter)), [label, disabled, cleanFilter]);
+    return (_jsx(PressableText, { accessibilityRole: "listitem", disabled: disabled, numberOfLines: 1, selectable: false, onPress: () => handleSelectItem(item), style: ({ hovered, pressed }) => [
+            styles.line,
+            style,
+            hovered && { backgroundColor: tint50 },
+            pressed && { backgroundColor: tint100 },
+            disabled && { backgroundColor: colors.gray[50], color: colors.gray[100] },
+        ], children: typeof tokens === "string"
+            ? tokens
+            : tokens.map((token, index) => {
+                const colored = token.toLowerCase() === cleanFilter;
+                if (!colored) {
+                    return token;
+                }
+                return (_jsx(Text, { style: { color }, children: token }, index));
+            }) }));
+};

package/src/components/MultilineInput.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { NativeSyntheticEvent, TextInput, TextInputProps } from "react-native";
+type Props = {
+    disabled?: boolean;
+    error?: string;
+    label: string;
+    onBlur?: (event: NativeSyntheticEvent<React.FocusEvent>) => void;
+    onSubmitEditing?: TextInputProps["onSubmitEditing"];
+    onValueChange?: TextInputProps["onChangeText"];
+    placeholder?: string;
+    value?: string;
+    readOnly?: boolean;
+};
+export declare const MultilineInput: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<TextInput>>>;
+export {};