@swan-io/lake 8.7.1 → 8.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.7.1",
+  "version": "8.8.0",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/FixedListView.d.ts

@@ -35,6 +35,7 @@
  */
 import { ReactElement, ReactNode } from "react";
 import { IconName } from "./Icon";
+import { SpacingValue } from "./Space";
 export type ColumnTitleConfig<ExtraInfo> = {
     title: string;
     extraInfo: ExtraInfo;
@@ -99,9 +100,10 @@ export declare const PlainListViewPlaceholder: ({ count, rowHeight, rowVerticalS
 type EmptyProps = {
     icon: IconName;
     borderedIcon?: boolean;
+    borderedIconPadding?: SpacingValue | 0;
     title?: string;
     subtitle?: ReactNode;
     children?: ReactNode;
 };
-export declare const FixedListViewEmpty: ({ icon, borderedIcon, title, subtitle, children, }: EmptyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FixedListViewEmpty: ({ icon, borderedIcon, borderedIconPadding, title, subtitle, children, }: EmptyProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/FixedListView.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";
 /**
  * ## FixedListView
  *
@@ -526,15 +526,10 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
     ]);
     // Used to fix some scrollbar behavior. See `main.css`.
     useLayoutEffect(() => {
-        if (centerHeadersRef.current instanceof Element) {
-            centerHeadersRef.current.setAttribute("data-hide-scrollbar", String(true));
-        }
-        if (centerColumnsRef.current instanceof Element) {
-            centerColumnsRef.current.setAttribute("data-hide-scrollbar", String(true));
-        }
-        if (horizontalScrollbarRef.current instanceof Element) {
-            horizontalScrollbarRef.current.setAttribute("data-force-scrollbar", String(true));
-        }
+        var _a, _b, _c, _d, _e, _f;
+        (_b = (_a = centerHeadersRef.current) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.setAttribute("data-hide-scrollbar", String(true));
+        (_d = (_c = centerColumnsRef.current) === null || _c === void 0 ? void 0 : _c.element) === null || _d === void 0 ? void 0 : _d.setAttribute("data-hide-scrollbar", String(true));
+        (_f = (_e = horizontalScrollbarRef.current) === null || _e === void 0 ? void 0 : _e.element) === null || _f === void 0 ? void 0 : _f.setAttribute("data-force-scrollbar", String(true));
     }, []);
     // To synchronize scrolls, we keep track of the initiator in order to ignore the scroll events
     // we provoke ourselves with the sync.
@@ -547,9 +542,9 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
             isNotNullish(centerColumnsRef.current) &&
             isNotNullish(horizontalScrollbarRef.current)) {
             const SCROLL_THRESHOLD_MS = 500;
-            const centerColumns = centerColumnsRef.current;
-            const centerHeaders = centerHeadersRef.current;
-            const horizontalScrollbar = horizontalScrollbarRef.current;
+            const centerColumns = centerColumnsRef.current.element;
+            const centerHeaders = centerHeadersRef.current.element;
+            const horizontalScrollbar = horizontalScrollbarRef.current.element;
             const onColumnsScroll = () => {
                 const now = Date.now();
                 if (lastHorizontalScroll.current.initiator === "columns" ||
@@ -833,4 +828,4 @@ export const PlainListViewPlaceholder = ({ count, rowHeight, rowVerticalSpacing,
                                 ], children: [_jsx(View, { style: styles.placeholderRow }), _jsx(Space, { width: 32 }), _jsx(View, { style: [styles.placeholderRow, styles.smallPlaceholderRow] }), _jsx(Space, { width: 32 }), _jsx(View, { style: styles.placeholderRowEnd, children: _jsx(View, { style: [styles.placeholderRow, styles.smallPlaceholderRow] }) })] }, String(index))] }, String(index)));
                 }) })] }));
 };
-export const FixedListViewEmpty = ({ icon, borderedIcon = false, title, subtitle, children, }) => (_jsxs(View, { style: styles.emptyList, children: [borderedIcon ? (_jsx(BorderedIcon, { name: icon })) : (_jsx(Icon, { name: icon, size: 96, color: colors.current.primary })), _jsx(Space, { height: 32 }), isNotNullish(title) && (_jsx(LakeHeading, { level: 3, variant: "h3", color: colors.gray[700], align: "center", children: title })), _jsx(Space, { height: 8 }), isNotNullish(subtitle) && _jsx(LakeText, { align: "center", children: subtitle }), _jsx(Space, { height: 8 }), children] }));
+export const FixedListViewEmpty = ({ icon, borderedIcon = false, borderedIconPadding, title, subtitle, children, }) => (_jsxs(View, { style: styles.emptyList, children: [borderedIcon ? (_jsx(BorderedIcon, { name: icon, padding: borderedIconPadding })) : (_jsx(Icon, { name: icon, size: 96, color: colors.current.primary })), _jsx(Space, { height: 24 }), isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeHeading, { align: "center", level: 3, variant: "h5", children: title }), _jsx(Space, { height: 8 })] })), isNotNullish(subtitle) && _jsx(LakeText, { align: "center", children: subtitle }), children] }));

package/src/components/LakeButton.d.ts

@@ -7,6 +7,7 @@ export type ButtonProps = {
     ariaExpanded?: boolean;
     color?: ColorVariants;
     disabled?: boolean;
+    direction?: "column" | "row";
     loading?: boolean;
     grow?: boolean;
     icon?: IconName;
@@ -14,6 +15,7 @@ export type ButtonProps = {
     mode?: "primary" | "secondary" | "tertiary";
     onPress?: (event: GestureResponderEvent) => void;
     size?: "large" | "small";
+    iconSize?: number;
     style?: StyleProp<ViewStyle> | ((props: PressableStateCallbackType) => StyleProp<ViewStyle>);
     forceBackground?: boolean;
     href?: string;

package/src/components/LakeButton.js

@@ -5,6 +5,7 @@ import { match } from "ts-pattern";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, invariantColors, radii, spacings, texts, } from "../constants/design";
 import { isNotNullish, isNullish } from "../utils/nullish";
+import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { Pressable } from "./Pressable";
@@ -81,7 +82,6 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
         transform: "translateZ(0px)",
-        borderRadius: radii[6],
     },
     group: {
         flexDirection: "row",
@@ -99,16 +99,32 @@ const styles = StyleSheet.create({
         top: -3,
         right: -3,
     },
+    vertical: {
+        flexDirection: "column",
+        height: "auto",
+        paddingVertical: spacings[12],
+    },
+    verticalSmall: {
+        paddingVertical: spacings[8],
+    },
+    hidden: {
+        visibility: "hidden",
+    },
 });
-export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLabel, children, color = "gray", disabled = false, icon, grow = false, iconPosition = "start", loading = false, mode = "primary", onPress, size = "large", style, forceBackground = false, href, hrefAttrs, pill, }, forwardedRef) => {
+export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLabel, children, color = "gray", direction = "row", disabled = false, icon, grow = false, iconPosition = "start", loading = false, mode = "primary", onPress, size = "large", iconSize = size === "small" ? 18 : 20, style, forceBackground = false, href, hrefAttrs, pill = false, }, forwardedRef) => {
+    const isPrimary = mode === "primary";
     const isSmall = size === "small";
-    const iconSize = isSmall ? 18 : 20;
-    const hasIconStart = isNotNullish(icon) && iconPosition === "start";
-    const hasIconEnd = isNotNullish(icon) && iconPosition === "end";
-    const hasOnlyIcon = isNullish(children) && isNotNullish(icon);
+    const vertical = direction === "column";
+    const spaceHeight = vertical ? 4 : undefined;
+    const spaceWidth = vertical ? undefined : isSmall ? 8 : 12;
+    const hasIcon = isNotNullish(icon);
+    const hasIconStart = hasIcon && iconPosition === "start";
+    const hasIconEnd = hasIcon && iconPosition === "end";
+    const hasOnlyIcon = hasIcon && isNullish(children);
     return (_jsx(Pressable, { href: href, hrefAttrs: hrefAttrs, role: href != null ? "link" : "button", "aria-busy": loading, "aria-disabled": disabled, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, disabled: loading || disabled, ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed, focused }) => [
             styles.base,
             isSmall && styles.small,
+            vertical && [styles.vertical, isSmall && styles.verticalSmall],
             hasIconStart && isSmall ? styles.withIconStartSmall : styles.withIconStart,
             hasIconEnd && (isSmall ? styles.withIconEndSmall : styles.withIconEnd),
             hasOnlyIcon && (isSmall ? styles.iconSmallOnly : styles.iconOnly),
@@ -150,23 +166,18 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
                 .exhaustive(),
             typeof style == "function" ? style({ hovered, pressed, focused }) : style,
         ], children: ({ pressed, hovered }) => {
-            const textColor = mode === "secondary" || mode === "tertiary"
-                ? disabled && forceBackground
+            const textColor = isPrimary
+                ? colors[color].contrast
+                : 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 })] })), typeof children === "string" || typeof children === "number" ? (_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,
-                            {
-                                backgroundColor: mode === "secondary" || mode === "tertiary"
-                                    ? backgroundColor.accented
-                                    : colors[color].primary,
-                            },
-                        ], children: _jsx(ActivityIndicator, { color: mode === "secondary" || mode === "tertiary"
-                                ? colors[color].primary
-                                : colors[color].contrast, size: iconSize }) })), _jsx(View, { style: [styles.hiddenView, pressed && mode === "primary" && styles.pressed] }), pill === true ? _jsx(View, { style: styles.pill }) : null] }));
+                        : colors[color][600];
+            return (_jsxs(_Fragment, { children: [hasIconStart && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: textColor, name: icon, size: iconSize, style: loading && styles.hidden }), isNotNullish(children) && _jsx(Space, { height: spaceHeight, width: spaceWidth })] })), typeof children === "string" || typeof children === "number" ? (_jsx(LakeText, { numberOfLines: 1, userSelect: "none", style: [
+                            isSmall ? styles.textSmall : styles.text,
+                            loading && styles.hidden,
+                            { color: textColor },
+                        ], children: children })) : (_jsx(Box, { alignItems: "center", justifyContent: "center", style: [vertical && styles.vertical, loading && styles.hidden], children: children })), hasIconEnd && (_jsxs(_Fragment, { children: [isNotNullish(children) && _jsx(Space, { height: spaceHeight, width: spaceWidth }), _jsx(Icon, { color: textColor, name: icon, size: iconSize, style: loading && styles.hidden })] })), loading && (_jsx(View, { style: styles.loaderContainer, children: _jsx(ActivityIndicator, { color: isPrimary ? colors[color].contrast : colors[color].primary, size: iconSize }) })), isPrimary && _jsx(View, { style: [styles.hiddenView, pressed && styles.pressed] }), pill && _jsx(View, { style: styles.pill })] }));
         } }));
 }));
 LakeButton.displayName = "Button";

package/src/components/LakeSelect.js

@@ -125,7 +125,7 @@ const LakeSelectWithRef = ({ title, items, valueStyle, size, color = "current",
     const isSmall = size === "small";
     const itemValue = items.find(i => i.value === value);
     const onKeyDown = useCallback((event) => {
-        var _a, _b;
+        var _a, _b, _c;
         // this made a search not visible for user as the native select component
         if (event.nativeEvent.key.length === 1) {
             event.nativeEvent.stopPropagation();
@@ -135,9 +135,8 @@ const LakeSelectWithRef = ({ title, items, valueStyle, size, color = "current",
             const selected = items[selectedIndex];
             if (selected != null) {
                 if (visible) {
-                    const listElement = listRef.current;
-                    if (listElement != null) {
-                        (_b = listItemRefs.current[selectedIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+                    if (((_b = listRef.current) === null || _b === void 0 ? void 0 : _b.element) != null) {
+                        (_c = listItemRefs.current[selectedIndex]) === null || _c === void 0 ? void 0 : _c.focus();
                     }
                 }
                 else {

package/src/components/ScrollView.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewProps, ViewStyle } from "react-native";
 export type ScrollViewRef = {
+    element: HTMLElement | null;
     scrollTo: (event: {
         x?: number;
         y?: number;

package/src/components/ScrollView.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef, } from "react";
 import { StyleSheet, View, } from "react-native";
-import { useMergeRefs } from "../hooks/useMergeRefs";
 const styles = StyleSheet.create({
     base: {
         WebkitOverflowScrolling: "touch",
@@ -60,7 +59,6 @@ export const ScrollView = forwardRef(({ children, contentContainerStyle, horizon
     const innerRef = useRef(null);
     const stateRef = useRef({ lastTick: 0, scrolling: false });
     const timeoutRef = useRef(null);
-    const mergedRef = useMergeRefs(innerRef, forwardedRef);
     const handleOnScroll = useCallback((event) => {
         event.stopPropagation();
         // A scroll happened, so the scroll resets the scrollend timeout.
@@ -89,8 +87,11 @@ export const ScrollView = forwardRef(({ children, contentContainerStyle, horizon
             }
         }
     }, []);
-    useImperativeHandle(forwardedRef, () => ({ scrollTo }));
-    return (_jsx(View, { ...viewProps, ref: mergedRef, onScroll: handleOnScroll, style: [
+    useImperativeHandle(forwardedRef, () => ({
+        element: innerRef.current,
+        scrollTo,
+    }));
+    return (_jsx(View, { ...viewProps, ref: innerRef, onScroll: handleOnScroll, style: [
             styles.base,
             style,
             horizontal && styles.horizontal,