@swan-io/lake 13.7.0 → 13.7.2

package/package.json

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

package/src/components/LakeSelect.d.ts

@@ -12,6 +12,7 @@ export type SelectProps<V, T extends Item<V> = Item<V>> = {
     ref?: Ref<View>;
     placeholder?: string;
     items: T[];
+    matchReferenceMinWidth?: boolean;
     matchReferenceWidth?: boolean;
     mode?: "normal" | "borderless";
     title?: string;
@@ -38,4 +39,4 @@ export type SelectProps<V, T extends Item<V> = Item<V>> = {
     hasSearch?: boolean;
     searchPlaceholder?: string;
 };
-export declare const LakeSelect: <V, T extends Item<V> = Item<V>>({ ref, title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, disabledItems, renderItem, PopoverFooter, style, hasSearch, searchPlaceholder, }: SelectProps<V, T>) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSelect: <V, T extends Item<V> = Item<V>>({ ref, title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceMinWidth, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, disabledItems, renderItem, PopoverFooter, style, hasSearch, searchPlaceholder, }: SelectProps<V, T>) => import("react/jsx-runtime").JSX.Element;

package/src/components/LakeSelect.js

@@ -140,7 +140,7 @@ const styles = StyleSheet.create({
         left: 14,
     },
 });
-export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, disabledItems = [], renderItem, PopoverFooter, style, hasSearch = false, searchPlaceholder, }) => {
+export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceMinWidth = true, matchReferenceWidth = false, value, error, hideErrors = false, icon, onValueChange, disabledItems = [], renderItem, PopoverFooter, style, hasSearch = false, searchPlaceholder, }) => {
     var _a;
     const [filter, setFilter] = useState("");
     const [filterFocused, setFilterFocused] = useBoolean(false);
@@ -228,7 +228,7 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
                                                 styles.itemText,
                                                 styles.selectPlaceholder,
                                                 isSmall && styles.selectSmallPlaceholder,
-                                            ], children: placeholder !== null && placeholder !== void 0 ? 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 !== null && error !== void 0 ? 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: filteredItems, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: (event) => {
+                                            ], children: placeholder !== null && placeholder !== void 0 ? 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 !== null && error !== void 0 ? error : " " })), _jsxs(Popover, { role: "listbox", matchReferenceWidth: matchReferenceWidth, matchReferenceMinWidth: matchReferenceMinWidth, 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: filteredItems, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: (event) => {
                             var _a;
                             const { key } = event.nativeEvent;
                             if (key === "ArrowDown" || key === "ArrowUp") {

package/src/hooks/useContextualLayer.js

@@ -2,6 +2,7 @@ import { Option } from "@swan-io/boxed";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { match } from "ts-pattern";
 const MAX_OFFSET_FOR_CENTER_PLACEMENT = 100;
+const HORIZONTAL_SAFETY_MARGIN = 16;
 export const useContextualLayer = ({ placement, visible, matchReferenceWidth = false, matchReferenceMinWidth = false, referenceRef: externalReferenceRef, }) => {
     const referenceRef = useRef(null);
     const usedRef = externalReferenceRef !== null && externalReferenceRef !== void 0 ? externalReferenceRef : referenceRef;
@@ -51,10 +52,16 @@ export const useContextualLayer = ({ placement, visible, matchReferenceWidth = f
             height: "100vh",
             pointerEvents: "none",
         };
+        const maxWidth = match(inferedPlacement)
+            .with("left", () => viewportWidth - rect.left - HORIZONTAL_SAFETY_MARGIN)
+            .with("right", () => rect.right - HORIZONTAL_SAFETY_MARGIN)
+            .with("center", () => Math.min(availableSpaceBefore + width / 2, availableSpaceAfter + width / 2) * 2 - HORIZONTAL_SAFETY_MARGIN)
+            .exhaustive();
         const style = {
             ...verticalPosition,
             ...horizontalPosition,
             maxHeight,
+            maxWidth,
             ...(matchReferenceWidth === true ? { width } : undefined),
             ...(matchReferenceMinWidth === true ? { minWidth: width } : undefined),
             pointerEvents: "auto",