@swan-io/lake 1.5.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "engines": {
     "node": ">=14.0.0",
     "yarn": "^1.20.0"

package/src/components/AutocompleteSearchInput.d.ts

@@ -0,0 +1,25 @@
+import { Future, Result } from "@swan-io/boxed";
+import { MutableRefObject, ReactNode } from "react";
+type Suggestion<T> = {
+    id: string;
+    title: string;
+    subtitle: string;
+    value: T;
+};
+type Props<T> = {
+    inputRef?: MutableRefObject<unknown>;
+    value?: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    id?: string;
+    placeholder?: string;
+    error?: string;
+    emptyResultText: string;
+    ListFooterComponent?: ReactNode;
+    shouldDisplaySuggestions?: boolean;
+    loadSuggestions: (value: string) => Future<Result<Suggestion<T>[], unknown>>;
+    onSuggestion: (suggestion: Suggestion<T>) => void;
+    onLoadError?: (error: unknown) => void;
+};
+export declare const AutocompleteSearchInput: <T>({ inputRef, value, onValueChange, disabled, id, placeholder, error, emptyResultText, ListFooterComponent, shouldDisplaySuggestions, loadSuggestions, onSuggestion, onLoadError, }: Props<T>) => JSX.Element;
+export {};

package/src/components/AutocompleteSearchInput.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AsyncData } from "@swan-io/boxed";
+import { useRef, useState } from "react";
+import { colors } from "../constants/design";
+import { LakeCombobox } from "./LakeCombobox";
+import { LakeText } from "./LakeText";
+export const AutocompleteSearchInput = ({ inputRef, value, onValueChange, disabled, id, placeholder, error, emptyResultText, ListFooterComponent, shouldDisplaySuggestions = true, loadSuggestions, onSuggestion, onLoadError, }) => {
+    const [state, setState] = useState(AsyncData.NotAsked());
+    const lastRequest = useRef();
+    return (_jsx(LakeCombobox, { inputRef: inputRef, id: id, placeholder: placeholder, value: value ?? "", items: state, icon: "search-filled", disabled: disabled, error: error, ListFooterComponent: ListFooterComponent, onSelectItem: item => {
+            onSuggestion(item);
+        }, onValueChange: value => {
+            lastRequest.current?.cancel(); // cancel previous request to avoid race condition
+            lastRequest.current = undefined; // avoid to cancel twice the same request
+            onValueChange(value);
+            if (value.length <= 3 || !shouldDisplaySuggestions) {
+                return setState(AsyncData.NotAsked());
+            }
+            setState(AsyncData.Loading());
+            const request = loadSuggestions(value);
+            lastRequest.current = request;
+            if (onLoadError != null) {
+                request.tapError(onLoadError);
+            }
+            request.onResolve(value => setState(AsyncData.Done(value)));
+        }, keyExtractor: item => item.id, emptyResultText: emptyResultText, renderItem: item => (_jsxs(_Fragment, { children: [_jsx(LakeText, { numberOfLines: 1, selectable: false, color: colors.gray[900], children: item.title }), _jsx(LakeText, { numberOfLines: 1, selectable: false, variant: "smallRegular", children: item.subtitle })] })) }));
+};

package/src/components/FilterChooser.js

@@ -16,7 +16,7 @@ const styles = StyleSheet.create({
     list: {
         paddingVertical: 20,
         marginVertical: 4,
-        width: 250,
+        minWidth: 250,
         overflow: "hidden",
     },
     item: {

package/src/components/Filters.js

@@ -60,7 +60,7 @@ const styles = StyleSheet.create({
         paddingHorizontal: 24,
     },
     input: {
-        width: 200,
+        minWidth: 200,
     },
     value: {
         maxWidth: 130,

package/src/components/LakeButton.js

@@ -76,6 +76,9 @@ const styles = StyleSheet.create({
         cursor: "not-allowed",
         opacity: 0.3,
     },
+    resetOpacity: {
+        opacity: 1,
+    },
     loaderContainer: {
         ...StyleSheet.absoluteFillObject,
         alignItems: "center",
@@ -114,6 +117,7 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
             hasIconEnd && (isSmall ? styles.withIconEndSmall : styles.withIconEnd),
             hasOnlyIcon && (isSmall ? styles.iconSmallOnly : styles.iconOnly),
             disabled && styles.disabled,
+            disabled && forceBackground && styles.resetOpacity,
             grow && styles.grow,
             typeof style == "function" ? style({ hovered, pressed, focused }) : style,
             match(mode)
@@ -135,7 +139,11 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
                             ? backgroundColor.accented
                             : invariantColors.transparent,
                 borderWidth: 1,
-                borderColor: hovered ? colors[color][600] : colors[color][300],
+                borderColor: disabled && forceBackground
+                    ? colors[color][100]
+                    : hovered
+                        ? colors[color][600]
+                        : colors[color][300],
             }))
                 .with("tertiary", () => ({
                 backgroundColor: pressed
@@ -147,9 +155,11 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
                 .exhaustive(),
         ], children: ({ pressed, hovered }) => {
             const textColor = mode === "secondary" || mode === "tertiary"
-                ? hovered || pressed
-                    ? colors[color][700]
-                    : colors[color][600]
+                ? disabled && forceBackground
+                    ? colors[color][300]
+                    : hovered || pressed
+                        ? colors[color][700]
+                        : colors[color][600]
                 : colors[color].contrast;
             return (_jsxs(_Fragment, { children: [hasIconStart && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: textColor, name: icon, size: iconSize }), isNotNullish(children) && _jsx(Space, { width: isSmall ? 8 : 12 })] })), isReactText(children) ? (_jsx(LakeText, { numberOfLines: 1, userSelect: "none", style: [isSmall ? styles.textSmall : styles.text, { color: textColor }], children: children })) : (children), hasIconEnd && (_jsxs(_Fragment, { children: [isNotNullish(children) && _jsx(Space, { width: isSmall ? 8 : 12 }), _jsx(Icon, { color: textColor, name: icon, size: iconSize })] })), loading && (_jsx(View, { role: "none", style: [
                             styles.loaderContainer,

package/src/components/LakeCombobox.js

@@ -122,7 +122,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, ListFooterComponent, onVa
                 }
                 const nextIndex = index + direction;
                 event.preventDefault();
-                if (nextIndex === 0) {
+                if (nextIndex === -1) {
                     ref.current?.focus();
                 }
                 else {

package/src/components/LakeModal.js

@@ -112,8 +112,8 @@ const styles = StyleSheet.create({
         ...StyleSheet.absoluteFillObject,
     },
     closeButton: {
-        top: negativeSpacings[4],
-        right: negativeSpacings[4],
+        top: negativeSpacings[16],
+        right: negativeSpacings[16],
     },
 });
 export const LakeModal = ({ visible, icon, title, color = "current", children, maxWidth = 570, onPressClose, }) => {

package/src/components/LakeTextInput.d.ts

@@ -22,6 +22,7 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
     style?: TextInputProps["style"];
     onChange?: ChangeEventHandler<HTMLInputElement>;
     maxCharCount?: number;
+    help?: string;
 };
 export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Except<TextInputProps, "editable" | "keyboardType" | "onChange"> & {
     ariaExpanded?: boolean | undefined;
@@ -42,4 +43,5 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Ex
     style?: TextInputProps["style"];
     onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
     maxCharCount?: number | undefined;
+    help?: string | undefined;
 } & import("react").RefAttributes<TextInput | null>>;

package/src/components/LakeTextInput.js

@@ -124,7 +124,7 @@ const styles = StyleSheet.create({
 export const LakeTextInput = forwardRef(({ ariaExpanded, ariaControls, error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", inputMode = "text", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, 
 //maxCharCount is different from maxLength(props inherited of TextInput), maxLength truncates the text in the limitation asked,
 //maxCharCount doesn't have limitation but displays a counter of characters
-maxCharCount, ...props }, forwardRef) => {
+maxCharCount, help, ...props }, forwardRef) => {
     const inputRef = useRef(null);
     const [isHovered, setIsHovered] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
@@ -159,5 +159,5 @@ maxCharCount, ...props }, forwardRef) => {
                                             isFocused && styles.focused,
                                             isFocused && { borderColor: colors[color][500] },
                                             stylesFromProps,
-                                        ] }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", style: styles.errorContainer, children: [_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " }), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
+                                        ] }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsxs(Box, { direction: "row", style: styles.errorContainer, children: [isNotNullish(help) ? (_jsx(LakeText, { variant: "smallRegular", color: isNotNullish(error) ? colors.negative[500] : colors.gray[500], children: help })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " })), isNotNullish(maxCharCount) && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 4 }), _jsxs(LakeText, { variant: "smallRegular", color: charCount > maxCharCount ? colors.negative[500] : colors.gray[400], style: styles.descriptionLimitation, children: [charCount, " / ", maxCharCount] })] }))] }))] }));
 });

package/src/components/Pressable.d.ts

@@ -275,6 +275,7 @@ export declare const PressableTextInput: FC<Except<{
     "aria-rowspan"?: number | undefined;
     "aria-setsize"?: number | undefined;
     "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    value?: string | undefined;
     allowFontScaling?: boolean | undefined;
     numberOfLines?: number | undefined;
     onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
@@ -286,33 +287,32 @@ export declare const PressableTextInput: FC<Except<{
     disabled?: boolean | undefined;
     selectionColor?: import("react-native").ColorValue | undefined;
     textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
-    autoFocus?: boolean | undefined;
-    value?: string | undefined;
-    onContentSizeChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputContentSizeChangeEventData>) => void) | undefined;
-    onScroll?: ((e: NativeSyntheticEvent<import("react-native").TextInputScrollEventData>) => void) | undefined;
-    scrollEnabled?: boolean | undefined;
+    placeholderTextColor?: import("react-native").ColorValue | undefined;
+    readOnly?: boolean | undefined;
+    editable?: boolean | undefined;
+    keyboardType?: import("react-native").KeyboardTypeOptions | undefined;
+    onChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
     autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;
     autoCorrect?: boolean | undefined;
+    autoFocus?: boolean | undefined;
     blurOnSubmit?: boolean | undefined;
     caretHidden?: boolean | undefined;
     contextMenuHidden?: boolean | undefined;
     defaultValue?: string | undefined;
-    editable?: boolean | undefined;
-    keyboardType?: import("react-native").KeyboardTypeOptions | undefined;
     inputMode?: import("react-native").InputModeOptions | undefined;
     maxLength?: number | undefined;
     multiline?: boolean | undefined;
     onBlur?: ((event: NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
-    onChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
     onChangeText?: ((text: string) => void) | undefined;
+    onContentSizeChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputContentSizeChangeEventData>) => void) | undefined;
     onEndEditing?: ((e: NativeSyntheticEvent<import("react-native").TextInputEndEditingEventData>) => void) | undefined;
     onFocus?: ((event: NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
     onSelectionChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputSelectionChangeEventData>) => void) | undefined;
     onSubmitEditing?: ((e: NativeSyntheticEvent<import("react-native").TextInputSubmitEditingEventData>) => void) | undefined;
     onTextInput?: ((e: NativeSyntheticEvent<import("react-native").TextInputTextInputEventData>) => void) | undefined;
+    onScroll?: ((e: NativeSyntheticEvent<import("react-native").TextInputScrollEventData>) => void) | undefined;
     onKeyPress?: ((e: NativeSyntheticEvent<import("react-native").TextInputKeyPressEventData>) => void) | undefined;
     placeholder?: string | undefined;
-    placeholderTextColor?: import("react-native").ColorValue | undefined;
     returnKeyType?: import("react-native").ReturnKeyTypeOptions | undefined;
     secureTextEntry?: boolean | undefined;
     selectTextOnFocus?: boolean | undefined;
@@ -322,10 +322,9 @@ export declare const PressableTextInput: FC<Except<{
     } | undefined;
     inputAccessoryViewID?: string | undefined;
     initialValue?: string | undefined;
-    autoComplete?: "off" | "name" | "email" | "url" | "tel" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
+    autoComplete?: "off" | "name" | "email" | "tel" | "url" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
     enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
     rows?: number | undefined;
-    readOnly?: boolean | undefined;
     clearButtonMode?: "never" | "while-editing" | "unless-editing" | "always" | undefined;
     clearTextOnFocus?: boolean | undefined;
     dataDetectorTypes?: import("react-native").DataDetectorTypes | import("react-native").DataDetectorTypes[] | undefined;
@@ -336,6 +335,7 @@ export declare const PressableTextInput: FC<Except<{
     selectionState?: import("react-native").DocumentSelectionState | undefined;
     spellCheck?: boolean | undefined;
     textContentType?: "none" | "location" | "name" | "nickname" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "password" | "newPassword" | "oneTimeCode" | undefined;
+    scrollEnabled?: boolean | undefined;
     cursorColor?: import("react-native").ColorValue | null | undefined;
     importantForAutofill?: "auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
     disableFullscreenUI?: boolean | undefined;

package/src/components/SortBottomPanel.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+type SortDirection = "Asc" | "Desc";
+export type SortField<T> = {
+    name: T;
+    ascLabel: string;
+    descLabel: string;
+};
+export type SortValue<T extends string> = {
+    field: T;
+    direction: SortDirection;
+};
+type Props<T extends string> = {
+    visible: boolean;
+    title: string;
+    fields: SortField<T>[];
+    value: SortValue<T> | undefined;
+    onChange: (value: SortValue<T>) => void;
+    onClose: () => void;
+};
+export declare const SortBottomPanel: <T extends string>({ visible, title, value, fields, onChange, onClose, }: Props<T>) => JSX.Element;
+export {};

package/src/components/SortBottomPanel.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { StyleSheet, View } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
+import { colors, spacings } from "../constants/design";
+import { BottomPanel } from "./BottomPanel";
+import { Icon } from "./Icon";
+import { LakeHeading } from "./LakeHeading";
+import { LakeRadio } from "./LakeRadio";
+import { LakeText } from "./LakeText";
+import { Pressable } from "./Pressable";
+import { Separator } from "./Separator";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    head: {
+        padding: 24,
+        paddingBottom: 12,
+    },
+    option: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: spacings[24],
+        paddingVertical: spacings[12],
+    },
+    arrowDown: {
+        transform: "rotate(180deg)",
+    },
+    text: {
+        ...commonStyles.fill,
+    },
+});
+export const SortBottomPanel = ({ visible, title, value, fields, onChange, onClose, }) => {
+    return (_jsxs(BottomPanel, { visible: visible, onPressClose: onClose, children: [_jsx(View, { style: styles.head, children: _jsx(LakeHeading, { level: 3, variant: "h3", children: title }) }), fields.map((field, index) => (_jsxs(Fragment, { children: [_jsxs(Pressable, { style: styles.option, onPress: () => {
+                            onChange({ field: field.name, direction: "Asc" });
+                            onClose();
+                        }, children: [_jsx(Icon, { name: "arrow-up-filled", size: 12, color: colors.gray[600], style: styles.arrowDown }), _jsx(Space, { width: 12 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[600], style: styles.text, children: field.ascLabel }), _jsx(Space, { width: 16 }), _jsx(LakeRadio, { value: value?.field === field.name && value.direction === "Asc" })] }), _jsxs(Pressable, { style: styles.option, onPress: () => {
+                            onChange({ field: field.name, direction: "Desc" });
+                            onClose();
+                        }, children: [_jsx(Icon, { name: "arrow-up-filled", size: 12, color: colors.gray[600] }), _jsx(Space, { width: 12 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[600], style: styles.text, children: field.descLabel }), _jsx(Space, { width: 16 }), _jsx(LakeRadio, { value: value?.field === field.name && value.direction === "Desc" })] }), index < fields.length - 1 && _jsx(Separator, {})] }, field.name))), _jsx(Space, { height: 12 })] }));
+};

package/src/components/Stack.d.ts

@@ -7,6 +7,6 @@ export declare const Stack: import("react").ForwardRefExoticComponent<import("re
     justifyContent?: ("end" | "start" | "normal" | "center" | "spaceBetween" | "spaceAround" | "spaceEvenly") | undefined;
     style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
 } & {
-    space?: 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 96 | undefined;
+    space?: 4 | 8 | 12 | 16 | 20 | 32 | 24 | 40 | 48 | 72 | 96 | undefined;
     wrap?: boolean | undefined;
 } & import("react").RefAttributes<View>>;