@swan-io/lake 7.3.3 → 7.4.0

package/package.json

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

package/src/components/FixedListViewCells.d.ts

@@ -28,6 +28,7 @@ export declare const SimpleTitleCell: ({ isHighlighted, text, tooltip, }: {
         onShow?: (() => void) | undefined;
         placement?: "left" | "right" | "center" | undefined;
         width?: number | undefined;
+        maxWidth?: number | undefined;
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
         disabled?: boolean | undefined;
@@ -55,6 +56,7 @@ export declare const CopyableRegularTextCell: ({ variant, text, textToCopy, copy
         onShow?: (() => void) | undefined;
         placement?: "left" | "right" | "center" | undefined;
         width?: number | undefined;
+        maxWidth?: number | undefined;
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
         disabled?: boolean | undefined;
@@ -86,6 +88,7 @@ export declare const LinkCell: ({ children, external, onPress, variant, tooltip,
         onShow?: (() => void) | undefined;
         placement?: "left" | "right" | "center" | undefined;
         width?: number | undefined;
+        maxWidth?: number | undefined;
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
         disabled?: boolean | undefined;

package/src/components/LakeText.d.ts

@@ -26,6 +26,7 @@ export declare const LakeText: import("react").ForwardRefExoticComponent<TextPro
         onShow?: (() => void) | undefined;
         placement?: "left" | "right" | "center" | undefined;
         width?: number | undefined;
+        maxWidth?: number | undefined;
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
         disabled?: boolean | undefined;

package/src/components/LakeTooltip.d.ts

@@ -10,6 +10,7 @@ type Props = {
     onShow?: () => void;
     placement?: "left" | "right" | "center";
     width?: number;
+    maxWidth?: number;
     togglableOnFocus?: boolean;
     containerStyle?: ViewProps["style"];
     disabled?: boolean;

package/src/components/LakeTooltip.js

@@ -50,7 +50,7 @@ export const LakeTooltip = forwardRef(({ content, children, ...rest }, forwarded
     }
     return (_jsx(Tooltip, { ref: forwardedRef, content: content, ...rest, children: children }));
 });
-const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenceWidth = false, hideArrow = false, onHide, onShow, placement, width, togglableOnFocus = false, containerStyle, disabled = false, }, forwardedRef) => {
+const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenceWidth = false, hideArrow = false, onHide, onShow, placement, width, maxWidth, togglableOnFocus = false, containerStyle, disabled = false, }, forwardedRef) => {
     const timeoutRef = useRef(0);
     const [visible, setVisible] = useState(false);
     const { referenceRef, position } = useContextualLayer({
@@ -117,7 +117,7 @@ const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenc
                                     .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 }], 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)
+                                    .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")

package/src/components/ProjectEnvTag.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { match } from "ts-pattern";
-import { Icon } from "./Icon";
 import { Tag } from "./Tag";
 export const ProjectEnvTag = (props) => {
     const isLive = props.projectEnv === "Live";
-    return (_jsx(Tag, { color: isLive ? "live" : "sandbox", children: match(props)
-            .with({ iconOnly: true, projectEnv: "Live" }, () => _jsx(Icon, { name: "live-regular", size: 20 }))
-            .with({ iconOnly: true, projectEnv: "Sandbox" }, () => (_jsx(Icon, { name: "beaker-regular", size: 20 })))
-            .with({ projectEnv: "Sandbox" }, { projectEnv: "Live" }, ({ projectEnv }) => projectEnv)
-            .exhaustive() }));
+    if (props.iconOnly === true) {
+        return (_jsx(Tag, { color: isLive ? "live" : "sandbox", icon: isLive ? "live-regular" : "beaker-regular" }));
+    }
+    return _jsx(Tag, { color: isLive ? "live" : "sandbox", children: props.projectEnv });
 };

package/src/components/Tag.d.ts

@@ -13,5 +13,5 @@ type Props = {
     style?: StyleProp<ViewStyle>;
     ariaLabel?: string;
 };
-export declare const Tag: ({ children, label, color, size, icon, iconSize, ariaLabel, onPressRemove, style, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ children, label, color, size, icon, ariaLabel, onPressRemove, style, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Tag.js

@@ -1,84 +1,82 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from "react";
-import { Pressable, StyleSheet, Text } from "react-native";
-import { colors, texts } from "../constants/design";
-import { isNotNullish, isNotNullishOrEmpty, isNullish } from "../utils/nullish";
+import { Pressable, StyleSheet, View } from "react-native";
+import { colors, radii, spacings } from "../constants/design";
+import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
-import { Space } from "./Space";
+import { LakeText } from "./LakeText";
 const styles = StyleSheet.create({
-    base: {
-        borderRadius: 4,
-        borderWidth: 1,
-        height: 28,
-        overflow: "hidden",
+    container: {
+        borderRadius: radii[4],
+        height: spacings[24],
+    },
+    border: {
+        ...StyleSheet.absoluteFillObject,
+        borderRadius: radii[4],
+        pointerEvents: "none",
     },
-    onlyIcon: {
-        height: 28,
-        padding: 0,
+    icon: {
+        aspectRatio: "1 / 1",
     },
     larger: {
-        height: 40,
+        height: spacings[40],
     },
     label: {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-        borderRightWidth: 0,
-        paddingHorizontal: 8,
-    },
-    withLabel: {
-        borderLeftWidth: 0,
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
+        paddingHorizontal: spacings[8],
+        alignSelf: "stretch",
     },
-    center: {
-        paddingHorizontal: 8,
+    contents: {
         flexGrow: 1,
         flexShrink: 1,
     },
     text: {
-        ...texts.smallMedium,
+        paddingHorizontal: spacings[8],
+        flexGrow: 1,
+        flexShrink: 1,
+        overflow: "hidden",
+    },
+    textWithIcon: {
+        paddingLeft: 0,
+    },
+    textContent: {
+        flexGrow: 1,
+        flexShrink: 1,
     },
     unselectable: {
         userSelect: "none",
     },
     dismiss: {
+        alignSelf: "stretch",
         justifyContent: "center",
-        height: "100%",
-        paddingHorizontal: 8,
-        borderLeftWidth: 1,
+        alignItems: "center",
+        aspectRatio: "1 / 1",
+        borderTopRightRadius: radii[4],
+        borderBottomRightRadius: radii[4],
+    },
+    dismissIcon: {
+        transform: "translateX(-0.5px)",
     },
 });
-export const Tag = ({ children, label, color = "gray", size = "small", icon, iconSize = 16, ariaLabel, onPressRemove, style, }) => {
-    const hasRemoveButton = isNotNullish(onPressRemove);
+export const Tag = ({ children, label, color = "gray", size = "small", icon, ariaLabel, onPressRemove, style, }) => {
     const hasLabel = isNotNullishOrEmpty(label);
-    const hasOnlyIcon = isNullish(children) && isNotNullish(icon);
     const { primary, ...variant } = colors[color];
     const tint50 = variant[50];
     const tint100 = variant[100];
     const tint200 = variant[200];
-    return (_jsxs(Box, { direction: "row", children: [hasLabel && (_jsx(Box, { alignItems: "center", direction: "row", style: [
-                    styles.base,
-                    styles.label,
-                    size === "large" && styles.larger,
-                    hasOnlyIcon && styles.onlyIcon,
-                    { backgroundColor: tint100, borderColor: tint200 },
-                ], children: _jsx(Text, { numberOfLines: 1, style: [styles.text, styles.unselectable, { color: primary }], children: label }) })), _jsxs(Box, { alignItems: "center", direction: "row", "aria-label": ariaLabel, style: [
-                    styles.base,
-                    size === "large" && styles.larger,
-                    hasOnlyIcon && styles.onlyIcon,
-                    { backgroundColor: tint50, borderColor: tint200 },
-                    hasLabel && styles.withLabel,
-                    style,
-                ], children: [_jsxs(Box, { direction: "row", alignItems: "center", style: [styles.center, hasOnlyIcon && styles.onlyIcon], children: [isNotNullish(icon) ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: primary, size: iconSize }), isNotNullish(children) && _jsx(Space, { width: 8 })] })) : null, isValidElement(children) ? (children) : (_jsx(Text, { numberOfLines: 1, style: [
-                                    styles.text,
-                                    {
-                                        color: primary,
-                                    },
-                                ], children: children }))] }), hasRemoveButton && (_jsx(Pressable, { role: "button", onPress: onPressRemove, style: ({ hovered, pressed }) => [
-                            styles.dismiss,
-                            { color: primary, borderColor: tint100 },
-                            hovered && { backgroundColor: tint100 },
-                            pressed && { backgroundColor: tint200 },
-                        ], children: _jsx(Icon, { name: "dismiss-regular", color: primary, size: 10 }) }))] })] }));
+    return (_jsxs(Box, { direction: "row", alignItems: "center", style: [
+            styles.container,
+            size === "large" && styles.larger,
+            { backgroundColor: tint50 },
+            style,
+        ], children: [hasLabel && (_jsx(Box, { alignItems: "center", direction: "row", style: [styles.label, { backgroundColor: tint100, borderColor: tint200 }], children: _jsx(LakeText, { numberOfLines: 1, variant: "smallMedium", style: styles.unselectable, color: primary, children: label }) })), _jsxs(Box, { alignItems: "center", direction: "row", "aria-label": ariaLabel, style: styles.contents, children: [isNotNullish(icon) ? (_jsx(Box, { style: [styles.icon, { width: size === "large" ? spacings[40] : spacings[24] }], alignItems: "center", justifyContent: "center", children: _jsx(Icon, { name: icon, color: primary, size: 16 }) })) : null, children != null ? (_jsx(Box, { direction: "row", alignItems: "center", style: [styles.text, isNotNullish(icon) ? styles.textWithIcon : null], children: isValidElement(children) ? (children) : (_jsx(LakeText, { numberOfLines: 1, variant: "smallMedium", color: primary, style: styles.textContent, children: children })) })) : null] }), onPressRemove != null ? (_jsx(Pressable, { role: "button", onPress: onPressRemove, style: ({ hovered, pressed }) => [
+                    styles.dismiss,
+                    {
+                        color: primary,
+                        width: size === "large" ? spacings[40] : spacings[24],
+                        boxShadow: `-1px 0 ${tint200}`,
+                    },
+                    hovered && { backgroundColor: tint100 },
+                    pressed && { backgroundColor: tint200 },
+                ], children: _jsx(Icon, { name: "dismiss-regular", color: primary, size: 14, style: styles.dismissIcon }) })) : null, _jsx(View, { style: [styles.border, { boxShadow: `inset 0 0 0 1px ${tint200}` }] })] }));
 };