@swan-io/lake 4.3.3 → 4.4.0

package/package.json

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

package/src/components/FixedListView.js

@@ -741,8 +741,8 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
                             },
                         ], children: isLoading
                             ? match(mode)
-                                .with("tile", () => (_jsx(FixedListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: rowVerticalSpacing, paddingHorizontal: 0 })))
-                                .with("plain", () => (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: rowVerticalSpacing, paddingHorizontal: 0 })))
+                                .with("tile", () => (_jsx(FixedListViewPlaceholder, { count: loading.count, headerHeight: headerHeight, rowHeight: rowHeight, rowVerticalSpacing: rowVerticalSpacing, paddingHorizontal: 0 })))
+                                .with("plain", () => (_jsx(PlainListViewPlaceholder, { count: loading.count, headerHeight: headerHeight, rowHeight: rowHeight, rowVerticalSpacing: rowVerticalSpacing, paddingHorizontal: 0 })))
                                 .exhaustive()
                             : null }), _jsx(View, { style: [styles.backgroundRows, { top: headerHeight }], children: backgroundRows }), _jsxs(View, { style: styles.scrollContentContainer, ref: scrollContentsRef, children: [stickedToStartColumns.length > 0 ? (_jsxs(View, { style: [
                                     styles.stickyColumn,

package/src/components/LakeRadio.d.ts

@@ -3,6 +3,7 @@ type Props = {
     value: boolean;
     disabled?: boolean;
     color?: ColorVariants;
+    isError?: boolean;
 };
-export declare const LakeRadio: ({ value, disabled, color }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeRadio: ({ value, disabled, color, isError, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/LakeRadio.js

@@ -14,6 +14,9 @@ const styles = StyleSheet.create({
         borderWidth: 1,
         borderColor: colors.gray[500],
     },
+    error: {
+        borderColor: colors.negative[500],
+    },
     innerCircle: {
         justifyContent: "center",
         alignItems: "center",
@@ -28,13 +31,14 @@ const styles = StyleSheet.create({
         transform: "scale(1)",
     },
 });
-export const LakeRadio = ({ value, disabled = false, color = "current" }) => (_jsx(View, { style: [
+export const LakeRadio = ({ value, disabled = false, color = "current", isError = false, }) => (_jsx(View, { style: [
         styles.outerCircle,
         value && { borderColor: colors[color].primary },
         disabled && {
             borderColor: colors.gray[300],
         },
-    ], role: "none", children: _jsx(View, { "aria-hidden": !value, style: [
+        isError && styles.error,
+    ], role: "none", "aria-invalid": isError, children: _jsx(View, { "aria-hidden": !value, style: [
             styles.innerCircle,
             { backgroundColor: colors[color].primary },
             disabled && {

package/src/components/LakeSelect.js

@@ -64,7 +64,6 @@ const styles = StyleSheet.create({
     },
     listContent: {
         paddingVertical: 12,
-        maxHeight: 300,
     },
     item: {
         display: "flex",
@@ -169,7 +168,7 @@ const LakeSelectWithRef = ({ title, items, valueStyle, size, color = "current",
                                                 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, { variant: "smallRegular", color: colors.negative[500], style: styles.errorText, children: error ?? " " })), _jsxs(Popover, { role: "listbox", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, field: true, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { role: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: (event) => {
+                                            ], 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, { variant: "smallRegular", color: colors.negative[500], 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, { role: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: (event) => {
                             const { key } = event.nativeEvent;
                             if (key === "ArrowDown" || key === "ArrowUp") {
                                 event.preventDefault();

package/src/components/RadioGroup.d.ts

@@ -10,6 +10,9 @@ export type RadioGroupProps<V> = {
     color?: ColorVariants;
     disabled?: boolean;
     value?: V;
+    error?: string;
+    help?: string;
+    hideErrors?: boolean;
     onValueChange: (value: V) => void;
 };
-export declare function RadioGroup<V>({ items, direction, color, disabled, value, onValueChange, }: RadioGroupProps<V>): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroup<V>({ items, direction, color, disabled, hideErrors, error, help, value, onValueChange, }: RadioGroupProps<V>): import("react/jsx-runtime").JSX.Element;

package/src/components/RadioGroup.js

@@ -1,8 +1,8 @@
-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 { Fragment } from "react";
 import { StyleSheet } from "react-native";
-import { colors } from "../constants/design";
-import { isNullish } from "../utils/nullish";
+import { colors, spacings } from "../constants/design";
+import { isNotNullishOrEmpty, isNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { LakeRadio } from "./LakeRadio";
 import { LakeText } from "./LakeText";
@@ -18,26 +18,30 @@ const styles = StyleSheet.create({
     },
     withRightSpace: {
         // use margin instead of <Space /> to avoid line starting with <Space /> because of flex-wrap
-        marginRight: 24,
+        marginRight: spacings[24],
     },
     // We need this bottom margin in case there are too much items and some of them are wrapped to next line
     withBottomSpace: {
         // use margin instead of <Space /> to avoid making height bigger than expected
-        marginBottom: 12,
+        marginBottom: spacings[12],
+    },
+    errorContainer: {
+        paddingTop: spacings[4],
     },
 });
-export function RadioGroup({ items, direction = "column", color = "current", disabled = false, value, onValueChange, }) {
-    return (_jsx(Box, { direction: direction, style: styles.container, children: items.map((item, index) => {
-            const isLast = index === items.length - 1;
-            const isDisabled = disabled || !isNullish(item.disabled);
-            return (_jsxs(Fragment, { children: [_jsxs(Pressable, { disabled: isDisabled, onPress: () => {
-                            if (item.value !== value) {
-                                onValueChange(item.value);
-                            }
-                        }, style: [
-                            styles.item,
-                            direction === "row" && styles.withBottomSpace,
-                            direction === "row" && !isLast && styles.withRightSpace,
-                        ], children: [_jsx(LakeRadio, { disabled: isDisabled, color: color, value: item.value === value }), _jsx(Space, { width: 12 }), _jsx(LakeText, { color: isDisabled ? colors.gray[300] : colors.gray[900], children: item.name })] }), !isLast && _jsx(Space, { height: direction === "column" ? 12 : undefined })] }, index));
-        }) }));
+export function RadioGroup({ items, direction = "column", color = "current", disabled = false, hideErrors = false, error, help, value, onValueChange, }) {
+    const hasError = isNotNullishOrEmpty(error);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: direction, style: styles.container, children: items.map((item, index) => {
+                    const isLast = index === items.length - 1;
+                    const isDisabled = disabled || !isNullish(item.disabled);
+                    return (_jsxs(Fragment, { children: [_jsxs(Pressable, { disabled: isDisabled, onPress: () => {
+                                    if (item.value !== value) {
+                                        onValueChange(item.value);
+                                    }
+                                }, style: [
+                                    styles.item,
+                                    direction === "row" && styles.withBottomSpace,
+                                    direction === "row" && !isLast && styles.withRightSpace,
+                                ], children: [_jsx(LakeRadio, { isError: hasError, disabled: isDisabled, color: color, value: item.value === value }), _jsx(Space, { width: 12 }), _jsx(LakeText, { color: isDisabled ? colors.gray[300] : colors.gray[900], children: item.name })] }), !isLast && _jsx(Space, { height: direction === "column" ? 12 : undefined })] }, index));
+                }) }), !hideErrors && (_jsx(Box, { direction: "row", style: styles.errorContainer, children: isNotNullishOrEmpty(error) ? (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.gray[500], children: help ?? " " })) }))] }));
 }