@swan-io/lake 2.7.4 → 2.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.7.4",
+  "version": "2.7.5",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/LakeAlert.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
-type AlertVariant = "info" | "warning" | "error" | "success";
+type AlertVariant = "info" | "warning" | "error" | "success" | "neutral";
 type Props = {
     anchored?: boolean;
     variant: AlertVariant;

package/src/components/LakeAlert.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleSheet, View } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { colors, shadows } from "../constants/design";
@@ -38,38 +38,44 @@ const alertIcon = {
     warning: "warning-regular",
     error: "dismiss-circle-regular",
     success: "checkmark-circle-regular",
+    neutral: undefined,
 };
 const alertColor = {
     info: colors.shakespear[700],
     warning: colors.warning[700],
     error: colors.negative[700],
     success: colors.positive[700],
+    neutral: colors.gray[700],
 };
 const alertBackground = {
     info: colors.shakespear[0],
     warning: colors.warning[0],
     error: colors.negative[0],
     success: colors.positive[0],
+    neutral: colors.gray[0],
 };
 const alertBorder = {
     info: colors.shakespear[200],
     warning: colors.warning[200],
     error: colors.negative[200],
     success: colors.positive[200],
+    neutral: colors.gray[200],
 };
 const alertLeftBorder = {
     info: colors.shakespear[500],
     warning: colors.warning[500],
     error: colors.negative[500],
     success: colors.positive[500],
+    neutral: colors.gray[500],
 };
 const isText = (node) => typeof node === "string" || typeof node === "number";
 export const LakeAlert = ({ anchored = false, variant, title, subtitle, children, style, callToAction, }) => {
     const color = alertColor[variant];
+    const icon = alertIcon[variant];
     return (_jsxs(View, { style: [
             styles.base,
             { backgroundColor: alertBackground[variant], borderColor: alertBorder[variant] },
             anchored ? styles.anchored : { borderLeftColor: alertLeftBorder[variant] },
             style,
-        ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(Icon, { name: alertIcon[variant], color: color, size: 20 }), _jsx(Space, { width: 20 }), _jsxs(View, { style: commonStyles.fill, children: [_jsx(LakeText, { color: color, children: title }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: styles.content, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { children: children }) : children] }))] }));
+        ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon != null ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: color, size: 20 }), _jsx(Space, { width: 20 })] })) : null, _jsxs(View, { style: commonStyles.fill, children: [_jsx(LakeText, { color: color, variant: icon != null ? "regular" : "medium", children: title }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: icon != null ? styles.content : null, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { children: children }) : children] }))] }));
 };

package/src/components/LakeCombobox.js

@@ -86,8 +86,9 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
     const listRef = useRef(null);
     const listContainerRef = useRef(null);
     const blurTimeoutId = useRef(undefined);
-    const [isFocused, { open, close }] = useDisclosure(false);
+    const [isFocused, { open, close }] = useDisclosure(false, () => setHasChanged(false));
     const [isFetchingAdditionalInfo, setIsFetchingAdditionalInfo] = useState(false);
+    const [hasChanged, setHasChanged] = useState(false);
     useImperativeHandle(externalRef, () => {
         return {
             open,
@@ -141,7 +142,10 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
             close();
         }, 100);
     }, [close]);
-    return (_jsxs(View, { children: [_jsx(LakeTextInput, { ref: inputTextRef, style: styles.input, ariaExpanded: isFocused, ariaControls: isFocused ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: onValueChange, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: false, returnFocus: true, visible: isFocused && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
+    return (_jsxs(View, { children: [_jsx(LakeTextInput, { containerRef: inputTextRef, style: styles.input, ariaExpanded: isFocused, ariaControls: isFocused ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: onValueChange, onChange: event => {
+                    setHasChanged(true);
+                    onChange?.(event);
+                }, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: false, returnFocus: true, visible: isFocused && !items.isNotAsked() && hasChanged, underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
                         NotAsked: () => null,
                         Loading: () => _jsx(LoadingView, { style: styles.loader }),
                         Done: items => items.match({

package/src/components/LakeTextInput.d.ts

@@ -1,5 +1,5 @@
-import { ChangeEventHandler, ReactNode } from "react";
-import { NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputProps } from "react-native";
+import { ChangeEventHandler, ReactNode, Ref } from "react";
+import { NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputProps, View } from "react-native";
 import { Except } from "type-fest";
 import { ColorVariants } from "../constants/design";
 import { IconName } from "./Icon";
@@ -24,6 +24,7 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
     maxCharCount?: number;
     help?: string;
     renderEnd?: () => ReactNode;
+    containerRef?: Ref<View>;
 };
 export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     allowFontScaling?: boolean | undefined;
@@ -236,4 +237,5 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     maxCharCount?: number | undefined;
     help?: string | undefined;
     renderEnd?: (() => ReactNode) | undefined;
+    containerRef?: Ref<View> | undefined;
 } & import("react").RefAttributes<TextInput | null>>;

package/src/components/LakeTextInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef, useState } from "react";
+import { forwardRef, useCallback, useRef, useState, } from "react";
 import { ActivityIndicator, StyleSheet, TextInput, View, } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, radii, shadows, spacings, texts, } from "../constants/design";
@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
         paddingTop: spacings[4],
     },
 });
-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, 
+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, containerRef, 
 //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
@@ -158,7 +158,7 @@ maxCharCount, help, renderEnd, ...props }, forwardRef) => {
                                     hasError && styles.error,
                                     valid && styles.valid,
                                     stylesFromProps,
-                                ], children: [isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon })), _jsx(TextInput, { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, inputMode: inputMode, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, style: [
+                                ], ref: containerRef, children: [isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon })), _jsx(TextInput, { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, inputMode: inputMode, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, ref: mergedRef, style: [
                                             styles.input,
                                             multiline && styles.multilineInput,
                                             readOnly && hasError && styles.readOnlyError,

package/src/hooks/useDisclosure.d.ts

@@ -1,4 +1,4 @@
-export declare const useDisclosure: (initialValue: boolean) => [
+export declare const useDisclosure: (initialValue: boolean, onClose?: () => void) => [
     visible: boolean,
     fns: {
         open: () => void;

package/src/hooks/useDisclosure.js

@@ -1,11 +1,14 @@
 import { useMemo, useState } from "react";
-export const useDisclosure = (initialValue) => {
+export const useDisclosure = (initialValue, onClose) => {
     const [value, setValue] = useState(initialValue);
     return [
         value,
         useMemo(() => ({
             open: () => setValue(true),
-            close: () => setValue(false),
+            close: () => {
+                setValue(false);
+                onClose?.();
+            },
             toggle: () => setValue(prevValue => !prevValue),
         }), []),
     ];