@swan-io/lake 15.5.1 → 15.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "15.5.1",
+  "version": "15.5.3",
   "engines": {
     "node": ">22.12.0"
   },

package/src/components/Accordion.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { backgroundColor, colors, spacings } from "../constants/design";
-import { useDisclosure } from "../hooks/useDisclosure";
+import { useBoolean } from "../hooks/useBoolean";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { Space } from "./Space";
@@ -40,6 +40,6 @@ const styles = StyleSheet.create({
 });
 export const Accordion = ({ children, trigger, style, contentContainerStyle }) => {
     const id = useId();
-    const [isOpen, { toggle }] = useDisclosure(false);
+    const [isOpen, { toggle }] = useBoolean(false);
     return (_jsxs(View, { children: [_jsxs(Pressable, { "aria-controls": id, role: "button", "aria-expanded": isOpen, onPress: toggle, style: [styles.trigger, style], children: [_jsx(Icon, { name: "chevron-right-filled", size: 12, color: colors.gray[500], style: [styles.arrow, isOpen && styles.arrowOpen] }), _jsx(Space, { width: 20 }), typeof trigger === "string" ? (_jsx(LakeText, { variant: "smallMedium", color: colors.gray[900], children: trigger })) : (trigger)] }), _jsx(View, { "aria-labelledby": id, "aria-hidden": !isOpen, role: "region", style: [styles.contentContainer, isOpen && styles.contentContainerDisplayed], children: _jsx(View, { style: styles.contentInner, children: _jsx(View, { style: [styles.content, contentContainerStyle], children: children }) }) })] }));
 };

package/src/components/ContextMenu.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { createContext, useContext, useRef } from "react";
 import { StyleSheet, View } from "react-native";
 import { colors, spacings } from "../constants/design";
-import { useDisclosure } from "../hooks/useDisclosure";
+import { useBoolean } from "../hooks/useBoolean";
 import { noop } from "../utils/function";
 import { LakeButton } from "./LakeButton";
 import { LakeText } from "./LakeText";
@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
 });
 const ContextMenuContext = createContext({ close: noop });
 export const ContextMenu = ({ children, ariaLabel, withPill = false, verticalPlacement, }) => {
-    const [isOpen, { open, close }] = useDisclosure(false);
+    const [isOpen, { on: open, off: close }] = useBoolean(false);
     const triggerRef = useRef(null);
     return (_jsxs(ContextMenuContext.Provider, { value: { close }, children: [_jsx(LakeButton, { ref: triggerRef, mode: "tertiary", size: "small", icon: "more-horizontal-filled", color: "gray", onPress: open, ariaLabel: ariaLabel, pill: withPill }), _jsx(Popover, { referenceRef: triggerRef, visible: isOpen, onDismiss: close, verticalPlacement: verticalPlacement, children: _jsx(View, { style: styles.container, children: children }) })] }));
 };

package/src/components/LakeSelect.js

@@ -5,7 +5,6 @@ import { t } from "../../../shared-business/src/utils/i18n";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
-import { useDisclosure } from "../hooks/useDisclosure";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
 import { setHighlightApi } from "../utils/highlights";
@@ -163,7 +162,7 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
     const currentlyTypedRef = useRef(undefined);
     const listItemRefs = useRef(Array(items.length));
     const mergedRef = useMergeRefs(inputRef, ref);
-    const [visible, { close, open }] = useDisclosure(false);
+    const [visible, { on: open, off: close }] = useBoolean(false);
     const hasValue = isNotNullish(value);
     const isSmall = size === "small";
     const itemValue = items.find(i => i.value === value);

package/src/components/LakeSlider.d.ts

@@ -7,7 +7,8 @@ type Props = {
     step: number;
     disabled?: boolean;
     style?: ViewProps["style"];
+    labelledBy?: string;
     onChange: (value: number) => void;
 };
-export declare const LakeSlider: ({ id, min, max, value, step, disabled, style, onChange, }: Props) => import("react").JSX.Element;
+export declare const LakeSlider: ({ id, min, max, value, step, disabled, style, labelledBy, onChange, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeSlider.js

@@ -8,7 +8,7 @@ const styles = StyleSheet.create({
         zIndex: 1,
     },
 });
-export const LakeSlider = ({ id, min, max, value, step, disabled = false, style, onChange, }) => (_jsx(View, { style: [styles.container, style], children: _jsx("input", { id: id, type: "range", min: min, max: max, value: value, step: step, disabled: disabled, onChange: useCallback((event) => onChange(Number(event.target.value)), [onChange]), style: {
+export const LakeSlider = ({ id, min, max, value, step, disabled = false, style, labelledBy, onChange, }) => (_jsx(View, { style: [styles.container, style], children: _jsx("input", { id: id, "aria-labelledby": labelledBy, type: "range", min: min, max: max, value: value, step: step, disabled: disabled, onChange: useCallback((event) => onChange(Number(event.target.value)), [onChange]), style: {
             backgroundSize: `${((value - min) / (max - min)) * 100}% 100%`,
             ...(disabled ? commonStyles.disabled : {}),
         } }) }));

package/src/components/LakeTagInput.d.ts

@@ -18,4 +18,4 @@ export type LakeTagInputProps = Merge<TextInputProps, {
     onValuesChanged: (values: string[]) => void;
     placeholder?: string;
 }>;
-export declare const LakeTagInput: ({ ref, validator, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur, values, onValuesChanged, readOnly, disabled, valid, hideErrors, placeholder, help, error, }: LakeTagInputProps) => import("react").JSX.Element;
+export declare const LakeTagInput: ({ ref, id, validator, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur, values, onValuesChanged, readOnly, disabled, valid, hideErrors, placeholder, help, error, }: LakeTagInputProps) => import("react").JSX.Element;

package/src/components/LakeTagInput.js

@@ -77,7 +77,7 @@ const styles = StyleSheet.create({
     },
 });
 const SEPARATORS_REGEX = /,| /;
-export const LakeTagInput = ({ ref, validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur = true, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }) => {
+export const LakeTagInput = ({ ref, id, validator = () => true, onFocus: originalOnFocus, onBlur: originalOnBlur, validateOnBlur = true, values, onValuesChanged, readOnly = false, disabled = false, valid = false, hideErrors = false, placeholder, help, error, }) => {
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
@@ -152,5 +152,5 @@ export const LakeTagInput = ({ ref, validator = () => true, onFocus: originalOnF
                     isHovered && styles.hovered,
                 ], "aria-errormessage": error, onPress: autoFocus, ref: containerRef, children: [values.map((value, i) => (_jsx(Tag, { onPressRemove: !readOnly && !disabled
                             ? () => onValuesChanged(values.filter(current => current !== value))
-                            : undefined, style: styles.tag, color: validator(value) ? "gray" : "negative", children: value }, i))), _jsx(TextInput, { ref: mergedRef, style: [styles.input, disabled && styles.disabled], onFocus: onFocus, onBlur: onBlur, "aria-disabled": disabled, onChangeText: onTextInputChange, onKeyPress: onTextInputKeyPress, readOnly: readOnly, placeholder: placeholder })] }), !hideErrors && (_jsx(Box, { direction: "row", style: styles.errorContainer, children: isNotNullish(error) ? (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.gray[500], children: help !== null && help !== void 0 ? help : " " })) }))] }));
+                            : undefined, style: styles.tag, color: validator(value) ? "gray" : "negative", children: value }, i))), _jsx(TextInput, { ref: mergedRef, id: id, style: [styles.input, disabled && styles.disabled], onFocus: onFocus, onBlur: onBlur, "aria-disabled": disabled, onChangeText: onTextInputChange, onKeyPress: onTextInputKeyPress, readOnly: readOnly, placeholder: placeholder })] }), !hideErrors && (_jsx(Box, { direction: "row", style: styles.errorContainer, children: isNotNullish(error) ? (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.gray[500], children: help !== null && help !== void 0 ? help : " " })) }))] }));
 };

package/src/components/LakeTooltip.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
-import { match } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import { colors, shadows, spacings } from "../constants/design";
 import { useContextualLayer } from "../hooks/useContextualLayer";
 import { useHover } from "../hooks/useHover";
@@ -57,6 +57,7 @@ const Tooltip = memo(({ ref, children, content, describedBy, matchReferenceWidth
         placement,
         visible,
         matchReferenceWidth,
+        withArrow: !hideArrow,
     });
     const rootElement = getRootElement(referenceRef.current);
     useImperativeHandle(ref, () => ({
@@ -113,14 +114,17 @@ const Tooltip = memo(({ ref, children, content, describedBy, matchReferenceWidth
     useEffect(() => {
         return () => clearTimeout(timeoutRef.current);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(View, { ref: referenceRef, style: containerStyle, children: children }), isNotNullish(rootElement) && position.isSome() && !disabled && (_jsx(Portal, { container: rootElement, children: _jsx(View, { style: [position.get().rootStyle, styles.root], children: _jsxs(View, { ref: contentRef, role: "tooltip", "aria-describedby": describedBy, style: [styles.base, position.get().style], children: [position.get().verticalPosition === "bottom" ? (_jsx(Box, { direction: "row", justifyContent: match(position.get().horizontalPosition)
-                                    .with("left", () => "start")
-                                    .with("center", () => "center")
-                                    .with("right", () => "end")
-                                    .exhaustive(), style: [styles.arrowBar, styles.arrowBarTop], children: _jsx(Svg, { width: 16, height: 8, viewBox: "0 0 16 8", children: _jsx(Polygon, { points: "8 0 16 8 0 8", fill: hideArrow ? "transparent" : colors.gray[900] }) }) })) : null, _jsx(View, { style: [styles.content, { width, maxWidth }], children: typeof content === "string" || typeof content === "number" ? (_jsx(LakeText, { align: "center", color: colors.gray.contrast, children: content })) : (content) }), position.get().verticalPosition === "top" ? (_jsx(Box, { direction: "row", justifyContent: match(position.get().horizontalPosition)
-                                    .with("left", () => "start")
-                                    .with("center", () => "center")
-                                    .with("right", () => "end")
-                                    .exhaustive(), style: [styles.arrowBar, styles.arrowBarBottom], children: _jsx(Svg, { width: 16, height: 8, viewBox: "0 0 16 8", children: _jsx(Polygon, { points: "8 8 16 0 0 0", fill: hideArrow ? "transparent" : colors.gray[900] }) }) })) : null] }) }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(View, { ref: referenceRef, style: containerStyle, children: children }), isNotNullish(rootElement) && position.isSome() && !disabled && (_jsx(Portal, { container: rootElement, children: _jsx(View, { style: [position.get().rootStyle, styles.root], children: _jsxs(View, { ref: contentRef, role: "tooltip", "aria-describedby": describedBy, style: [styles.base, position.get().style], children: [position.get().verticalPosition === "bottom" ? (_jsx(TooltipArrow, { verticalPosition: "bottom", position: position.get().arrowPosition, hideArrow: hideArrow })) : null, _jsx(View, { style: [styles.content, { width, maxWidth }], children: typeof content === "string" || typeof content === "number" ? (_jsx(LakeText, { align: "center", color: colors.gray.contrast, children: content })) : (content) }), position.get().verticalPosition === "top" ? (_jsx(TooltipArrow, { verticalPosition: "top", position: position.get().arrowPosition, hideArrow: hideArrow })) : null] }) }) }))] }));
 });
+const TooltipArrow = ({ verticalPosition, position, hideArrow }) => {
+    const { polygonPoints, top, bottom } = verticalPosition === "top"
+        ? { polygonPoints: "8 8 16 0 0 0", top: undefined, bottom: 1 }
+        : { polygonPoints: "8 0 16 8 0 8", top: 1, bottom: undefined };
+    const { justifyContent, left } = match(position)
+        .with("left", () => ({ justifyContent: "start", left: undefined }))
+        .with("right", () => ({ justifyContent: "end", left: undefined }))
+        .with(P.number, value => ({ justifyContent: "center", left: value }))
+        .exhaustive();
+    return (_jsx(Box, { direction: "row", justifyContent: justifyContent, style: [styles.arrowBar, styles.arrowBarBottom, { top, bottom, left }], children: _jsx(Svg, { width: 16, height: 8, viewBox: "0 0 16 8", children: _jsx(Polygon, { points: polygonPoints, fill: hideArrow ? "transparent" : colors.gray[900] }) }) }));
+};
 export const InformationTooltip = ({ ref, text, placement = "center", icon = "info-regular", iconSize = 24, }) => (_jsx(LakeTooltip, { ref: ref, describedBy: "copy", placement: placement, togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: icon, size: iconSize, color: colors.gray[900] }) }) }));

package/src/components/MultiSelect.js

@@ -4,7 +4,6 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, Text, TextInput, View, } from "react-native";
 import { backgroundColor, colors, radii, shadows, texts } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
-import { useDisclosure } from "../hooks/useDisclosure";
 import { groupBy } from "../utils/array";
 import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
 import { safeSplitAround } from "../utils/string";
@@ -143,7 +142,7 @@ export const MultiSelect = ({ color = "gray", disabled = false, emptyResultText,
     const shouldScrollToBottomRef = useRef(false);
     const selectedTagListRef = useRef(null);
     const inputRef = useRef(null);
-    const [visible, { open, close }] = useDisclosure(false);
+    const [visible, { on: open, off: close }] = useBoolean(false);
     const tint50 = colors[color][50];
     const tint100 = colors[color][100];
     useEffect(() => {

package/src/components/Tile.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Children, cloneElement, Fragment, useCallback, useId, useState, } from "react";
 import { Pressable, StyleSheet, Text, View, } from "react-native";
 import { backgroundColor, colors, negativeSpacings, radii, shadows, spacings, texts, } from "../constants/design";
-import { useDisclosure } from "../hooks/useDisclosure";
+import { useBoolean } from "../hooks/useBoolean";
 import { isNotNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
@@ -99,7 +99,7 @@ const styles = StyleSheet.create({
 });
 export const Tile = ({ icon, title, description, headerEnd, footer, flexBasis, children, numberOfLines, paddingVertical = 32, paddingHorizontal = 32, hovered = false, flexGrow = 0, flexShrink = 0, disabled = false, selected, collapsible = false, defaultExpanded = true, style, }) => {
     const contentId = useId();
-    const [expanded, { toggle }] = useDisclosure(defaultExpanded);
+    const [expanded, { toggle }] = useBoolean(defaultExpanded);
     const hasHeader = isNotNullish(title) || isNotNullish(headerEnd) || isNotNullish(description) || collapsible;
     const header = (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTitleIcon, children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [icon, _jsx(Space, { height: 12 })] })), isNotNullish(title) && (_jsx(Text, { style: styles.title, role: "heading", "aria-level": 3, children: title }))] }), collapsible ? (_jsx(Icon, { name: "chevron-down-filled", size: 16, color: colors.gray[500], style: [styles.chevron, expanded && styles.chevronOpen] })) : isNotNullish(headerEnd) ? (_jsx(View, { children: headerEnd })) : null] }), isNotNullish(description) && (_jsxs(_Fragment, { children: [isNotNullish(title) && _jsx(Space, { height: 12 }), _jsx(View, { style: styles.descriptionContainer, children: _jsx(LakeText, { numberOfLines: numberOfLines, style: styles.description, children: description }) })] }))] }));
     const content = (_jsxs(_Fragment, { children: [children, isNotNullish(footer) && (_jsx(View, { style: [styles.footer, { marginTop: paddingVertical, marginBottom: -paddingVertical }], children: footer }))] }));

package/src/hooks/useContextualLayer.d.ts

@@ -24,17 +24,19 @@ type Config = {
     matchReferenceWidth?: boolean;
     matchReferenceMinWidth?: boolean;
     referenceRef?: RefObject<View | Text | null>;
+    withArrow?: boolean;
 };
 export type ContextualLayerPosition = {
     rootStyle: ViewStyle;
     style: ViewStyle;
     verticalPosition: "top" | "bottom";
     horizontalPosition: "left" | "center" | "right";
+    arrowPosition: "left" | "right" | number;
 };
 type ContextualLayerConfig = {
     referenceRef: RefObject<View | Text | null>;
     contentRef: RefObject<View | Text | null>;
     position: Option<ContextualLayerPosition>;
 };
-export declare const useContextualLayer: ({ placement, verticalPlacement, visible, matchReferenceWidth, matchReferenceMinWidth, referenceRef: externalReferenceRef, }: Config) => ContextualLayerConfig;
+export declare const useContextualLayer: ({ placement, verticalPlacement, visible, matchReferenceWidth, matchReferenceMinWidth, withArrow, referenceRef: externalReferenceRef, }: Config) => ContextualLayerConfig;
 export {};

package/src/hooks/useContextualLayer.js

@@ -3,7 +3,19 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { match, P } from "ts-pattern";
 const MAX_OFFSET_FOR_CENTER_PLACEMENT = 100;
 const HORIZONTAL_SAFETY_MARGIN = 16;
-export const useContextualLayer = ({ placement, verticalPlacement, visible, matchReferenceWidth = false, matchReferenceMinWidth = false, referenceRef: externalReferenceRef, }) => {
+const getArrowPosition = (placement, referenceWidth, contentWidth) => {
+    if (placement === "center") {
+        return 0;
+    }
+    if (contentWidth <= referenceWidth) {
+        return placement;
+    }
+    const maxOffset = contentWidth / 2 - 12; // avoid arrow to be too close to the edge of the tooltip
+    const offset = (contentWidth - referenceWidth) / 2;
+    const arrowOffset = Math.min(offset, maxOffset);
+    return placement === "left" ? -arrowOffset : arrowOffset;
+};
+export const useContextualLayer = ({ placement, verticalPlacement, visible, matchReferenceWidth = false, matchReferenceMinWidth = false, withArrow = false, referenceRef: externalReferenceRef, }) => {
     const referenceRef = useRef(null);
     const contentRef = useRef(null);
     const usedRef = externalReferenceRef !== null && externalReferenceRef !== void 0 ? externalReferenceRef : referenceRef;
@@ -53,6 +65,7 @@ export const useContextualLayer = ({ placement, verticalPlacement, visible, matc
             .with("right", () => ({ right: window.innerWidth - rect.right }))
             .with("center", () => ({ left: rect.left + width / 2, transform: "translateX(-50%)" }))
             .exhaustive();
+        const arrowPosition = withArrow ? getArrowPosition(inferedPlacement, width, contentWidth) : 0;
         const maxHeight = openAbove ? availableSpaceAbove : window.innerHeight - rect.top - height;
         const rootStyle = {
             position: "absolute",
@@ -80,10 +93,18 @@ export const useContextualLayer = ({ placement, verticalPlacement, visible, matc
         return Option.Some({
             rootStyle,
             horizontalPosition: inferedPlacement,
+            arrowPosition,
             verticalPosition: openAbove ? "top" : "bottom",
             style,
         });
-    }, [placement, verticalPlacement, matchReferenceWidth, matchReferenceMinWidth, usedRef]);
+    }, [
+        placement,
+        verticalPlacement,
+        matchReferenceWidth,
+        matchReferenceMinWidth,
+        usedRef,
+        withArrow,
+    ]);
     useEffect(() => {
         if (visible) {
             setPosition(getPosition());

package/src/hooks/useDisclosure.d.ts

@@ -1,5 +0,0 @@
-export declare const useDisclosure: (initialValue: boolean) => [visible: boolean, fns: {
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}];

package/src/hooks/useDisclosure.js

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