@swan-io/lake 1.3.1 → 1.3.2

package/package.json

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

package/src/components/LakeSelect.js

@@ -67,7 +67,6 @@ const styles = StyleSheet.create({
         paddingHorizontal: spacings[24],
         paddingVertical: spacings[8],
         flexDirection: "row",
-        justifyContent: "space-between",
         alignItems: "center",
     },
     itemHighlighted: {
@@ -86,9 +85,9 @@ const styles = StyleSheet.create({
         backgroundColor: invariantColors.transparent,
     },
     itemText: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
     },
     errorText: {
         paddingTop: spacings[4],
@@ -150,7 +149,11 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
                     mode !== "borderless" && error != null && styles.errorContainer,
                     (disabled || readOnly) && mode === "borderless" && styles.inputBorderlessDisabled,
                     style,
-                ], onPress: toggle, onKeyDown: onKeyDown, accessibilityErrorMessage: error, children: ({ hovered }) => (_jsxs(_Fragment, { children: [mode === "normal" && _jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: colors[color].primary, name: icon, size: isSmall ? 16 : 18 }), _jsx(Space, { width: 8 })] })), hasValue ? (_jsxs(LakeText, { color: colors.gray[900], variant: isSmall ? "smallRegular" : "regular", style: [styles.itemText, valueStyle], children: [isNotNullish(itemValue?.icon) && (_jsxs(_Fragment, { children: [itemValue?.icon, _jsx(Space, { width: 12 })] })), name] })) : (_jsx(LakeText, { style: [styles.selectPlaceholder, isSmall && styles.selectSmallPlaceholder], children: placeholder ?? " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " })), _jsxs(Popover, { role: "listbox", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { accessibilityRole: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: e => {
+                ], onPress: toggle, onKeyDown: onKeyDown, accessibilityErrorMessage: error, children: ({ hovered }) => (_jsxs(_Fragment, { children: [mode === "normal" && _jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: colors[color].primary, name: icon, size: isSmall ? 16 : 18 }), _jsx(Space, { width: 8 })] })), hasValue ? (_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [isNotNullish(itemValue?.icon) && (_jsxs(_Fragment, { children: [itemValue?.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], variant: isSmall ? "smallRegular" : "regular", style: [styles.itemText, valueStyle], children: name })] })) : (_jsx(LakeText, { style: [
+                                                styles.itemText,
+                                                styles.selectPlaceholder,
+                                                isSmall && styles.selectSmallPlaceholder,
+                                            ], children: placeholder ?? " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " })), _jsxs(Popover, { role: "listbox", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { accessibilityRole: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: e => {
                             match(e.nativeEvent.key)
                                 .with("ArrowDown", () => {
                                 e.preventDefault();
@@ -178,6 +181,6 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
                                 ], accessibilityRole: "option", accessibilitySelected: true, onPress: () => {
                                     onValueChange(item.value);
                                     close();
-                                }, children: [_jsxs(LakeText, { color: colors.gray[900], numberOfLines: 1, style: [styles.itemText, isSelected && styles.selected], children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { width: 12 })] })), item.name] }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }));
+                                }, children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, style: [styles.itemText, isSelected && styles.selected], children: item.name }), _jsx(Fill, { minWidth: 12 }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }));
                         } }), PopoverFooter] })] }));
 }

package/src/components/LakeTextInput.d.ts

@@ -18,6 +18,7 @@ export type LakeTextInputProps = Omit<TextInputProps, "editable" | "onChange"> &
     hideErrors?: boolean;
     style?: TextInputProps["style"];
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    maxCharCount?: number;
 };
 export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "editable" | "onChange"> & {
     error?: string | undefined;
@@ -35,4 +36,5 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Om
     hideErrors?: boolean | undefined;
     style?: TextInputProps["style"];
     onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+    maxCharCount?: number | undefined;
 } & import("react").RefAttributes<TextInput | null>>;

package/src/components/LakeTextInput.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef, useState } from "react";
 import { ActivityIndicator, StyleSheet, TextInput, View, } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
@@ -7,6 +7,8 @@ import { useHover } from "../hooks/useHover";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { useNativeProp } from "../hooks/useNativeProp";
 import { isNotNullish, isNotNullishOrEmpty, isNullish } from "../utils/nullish";
+import { Box } from "./Box";
+import { Fill } from "./Fill";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 const TRANSPARENT = "transparent";
@@ -93,9 +95,6 @@ const styles = StyleSheet.create({
     readOnlyEndIcon: {
         right: 0,
     },
-    errorText: {
-        paddingTop: spacings[4],
-    },
     unit: {
         backgroundColor: colors.gray[50],
         paddingHorizontal: spacings[16],
@@ -115,8 +114,17 @@ const styles = StyleSheet.create({
         borderColor: colors.gray[500],
         boxShadow: shadows.tile,
     },
+    descriptionLimitation: {
+        flexShrink: 0,
+    },
+    errorContainer: {
+        paddingTop: spacings[4],
+    },
 });
-export const LakeTextInput = forwardRef(({ error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", keyboardType = "default", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, ...props }, forwardRef) => {
+export const LakeTextInput = forwardRef(({ error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", keyboardType = "default", 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) => {
     const inputRef = useRef(null);
     const [isHovered, setIsHovered] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
@@ -136,6 +144,7 @@ export const LakeTextInput = forwardRef(({ error, disabled = false, validating =
     const mergedRef = useMergeRefs(inputRef, forwardRef);
     const isInteractive = !disabled && !readOnly;
     const hasError = isNotNullishOrEmpty(error);
+    const charCount = isNullish(value) ? 0 : value.length;
     return (_jsxs(View, { style: commonStyles.fill, children: [_jsxs(View, { style: styles.root, accessibilityErrorMessage: error, children: [_jsxs(View, { style: styles.container, children: [_jsxs(View, { style: styles.contents, children: [_jsx(TextInput, { keyboardType: keyboardType, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, editable: isInteractive, onChange: onChange, multiline: multiline, style: [
                                             styles.input,
                                             multiline && styles.multilineInput,
@@ -150,5 +159,5 @@ export const LakeTextInput = forwardRef(({ error, disabled = false, validating =
                                             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 && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " }))] }));
+                                        ] }), 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, { color: colors.negative[400], 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/WithPartnerAccentColor.js

@@ -30,34 +30,21 @@ export const WithPartnerAccentColor = ({ color, scoped = false, children }) => {
                     scalePower += 0.1;
                 }
                 const colorScale = {
-                    0: setLightness(1.0, color),
-                    50: setLightness(0.97, color),
-                    100: setLightness(0.9, color),
-                    200: setLightness(0.8, color),
-                    300: setLightness(0.7, color),
-                    400: setLightness(0.6, color),
-                    500: setLightness(0.5, color),
-                    600: setLightness(0.4, color),
-                    700: setLightness(0.3, color),
-                    800: setLightness(0.2, color),
-                    900: setLightness(0.1, color),
+                    0: setLightness(Math.pow(1.0, scalePower), color),
+                    50: setLightness(Math.pow(0.97, scalePower), color),
+                    100: setLightness(Math.pow(0.9, scalePower), color),
+                    200: setLightness(Math.pow(0.8, scalePower), color),
+                    300: setLightness(Math.pow(0.7, scalePower), color),
+                    400: setLightness(Math.pow(0.6, scalePower), color),
+                    500: setLightness(Math.pow(0.5, scalePower), color),
+                    600: setLightness(Math.pow(0.4, scalePower), color),
+                    700: setLightness(Math.pow(0.3, scalePower), color),
+                    800: setLightness(Math.pow(0.2, scalePower), color),
+                    900: setLightness(Math.pow(0.1, scalePower), color),
                     primary: color,
                     contrast: getContrastColor(color),
                     secondary: shade(0.2, color),
                 };
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-900", colorScale[900], "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-800", colorScale[800], "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-700", colorScale[700], "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-600", colorScale[600], "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-500", colorScale[500], "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-400", colorScale[400], "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-300", colorScale[300], "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-200", colorScale[200], "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-100", colorScale[100], "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-50", colorScale[50], "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-primary", colorScale.primary, "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-secondary", colorScale.secondary, "");
-                element.ownerDocument.documentElement.style.setProperty("--color-partner-contrast", colorScale.contrast, "");
                 const rootElement = scoped ? element : element.ownerDocument.documentElement;
                 rootElement.style.setProperty("--color-partner-900", colorScale[900], "");
                 rootElement.style.setProperty("--color-partner-800", colorScale[800], "");