@swan-io/lake 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "engines": {
     "node": ">=14.0.0",
     "yarn": "^1.20.0"
@@ -27,7 +27,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.7",
-    "@swan-io/boxed": "^1.0.1",
+    "@swan-io/boxed": "^1.0.2",
     "@swan-io/chicane": "^1.3.4",
     "dayjs": "^1.11.7",
     "polished": "^4.2.2",

package/src/components/FixedListViewCells.js

@@ -108,9 +108,7 @@ export const SimpleHeaderCell = ({ text, sort, justifyContent = "flex-start", on
 export const ColorPatchCell = ({ isHovered, alternativeText, color, }) => {
     return isHovered ? (_jsx(View, { style: [styles.colorPatch, { backgroundColor: colors[color].primary }], children: isNotNullish(alternativeText) ? (_jsx(LakeText, { style: styles.alternativeText, children: alternativeText })) : null })) : null;
 };
-export const SimpleTitleCell = ({ isHighlighted = false, text, }) => (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { numberOfLines: 1, color: colors.gray[900], variant: "medium", ...(isHighlighted && {
-            color: colors.current.primary,
-        }), children: text }) }));
+export const SimpleTitleCell = ({ isHighlighted = false, text, }) => (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { numberOfLines: 1, color: isHighlighted ? colors.current.primary : colors.gray[900], style: styles.regularText, variant: "medium", children: text }) }));
 export const SimpleRegularTextCell = ({ variant = "regular", text, textAlign = "left", }) => {
     return (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { align: textAlign, color: colors.gray[900], style: styles.regularText, variant: variant, children: text }) }));
 };

package/src/components/LakeTooltip.d.ts

@@ -12,6 +12,7 @@ type Props = {
     width?: number;
     togglableOnFocus?: boolean;
     containerStyle?: ViewStyle;
+    disabled?: boolean;
 };
 type TooltipRef = {
     show: () => void;

package/src/components/LakeTooltip.js

@@ -5,7 +5,7 @@ import { usePopper } from "react-popper";
 import { match } from "ts-pattern";
 import { colors, shadows } from "../constants/design";
 import { useHover } from "../hooks/useHover";
-import { isNullish } from "../utils/nullish";
+import { isNotNullish } from "../utils/nullish";
 import { getRootElement, matchReferenceWidthModifier } from "../utils/popper";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
 });
 const isReactText = (node) => ["string", "number"].includes(typeof node);
 const MAX_WIDTH = "calc(100vw - 20px)";
-export const LakeTooltip = memo(forwardRef(({ children, content, describedBy, matchReferenceWidth = false, hideArrow = false, onHide, onShow, placement, width, togglableOnFocus = false, containerStyle, }, forwardedRef) => {
+export const LakeTooltip = memo(forwardRef(({ children, content, describedBy, matchReferenceWidth = false, hideArrow = false, onHide, onShow, placement, width, togglableOnFocus = false, containerStyle, disabled = false, }, forwardedRef) => {
     const referenceRef = useRef(null);
     const rootElement = getRootElement(referenceRef.current);
     const [popperElement, setPopperElement] = useState(null);
@@ -157,7 +157,7 @@ export const LakeTooltip = memo(forwardRef(({ children, content, describedBy, ma
         void update?.();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [content]);
-    return (_jsxs(_Fragment, { children: [_jsx(View, { ref: referenceRef, style: containerStyle, children: children }), isNullish(rootElement) || !visible ? null : (_jsx(Portal, { container: rootElement, children: _jsx("div", { ref: setPopperElement, style: { ...popperStyles.popper, maxWidth: MAX_WIDTH }, ...attributes.popper, role: "tooltip", "aria-describedby": describedBy, children: _jsxs(View, { style: [
+    return (_jsxs(_Fragment, { children: [_jsx(View, { ref: referenceRef, style: containerStyle, children: children }), isNotNullish(rootElement) && visible && !disabled && (_jsx(Portal, { container: rootElement, children: _jsx("div", { ref: setPopperElement, style: { ...popperStyles.popper, maxWidth: MAX_WIDTH }, ...attributes.popper, role: "tooltip", "aria-describedby": describedBy, children: _jsxs(View, { style: [
                             styles.base,
                             state?.placement === "top" && styles.baseTop,
                             state?.placement === "bottom" && styles.baseBottom,

package/src/components/QuickActions.d.ts

@@ -9,6 +9,8 @@ export type QuickAction = {
 };
 type Props = {
     actions: QuickAction[];
+    tooltipDisabled?: boolean;
+    tooltipText?: string;
 };
-export declare const QuickActions: ({ actions }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const QuickActions: ({ actions, tooltipDisabled, tooltipText }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/QuickActions.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
 import { colors, spacings } from "../constants/design";
+import { isNullishOrEmpty } from "../utils/nullish";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
+import { LakeTooltip } from "./LakeTooltip";
 import { Pressable } from "./Pressable";
 import { Space } from "./Space";
 const styles = StyleSheet.create({
@@ -24,15 +26,21 @@ const styles = StyleSheet.create({
         paddingHorizontal: spacings[12],
         flexBasis: "30%",
     },
+    disabled: {
+        alignItems: "center",
+        paddingHorizontal: spacings[12],
+        flexBasis: "30%",
+        opacity: 0.4,
+    },
     label: {
         lineHeight: 16,
     },
 });
-export const QuickActions = ({ actions }) => {
-    return (_jsx(View, { style: styles.container, children: actions.map((action, index) => (_jsxs(Pressable, { onPress: action.onPress, style: styles.action, disabled: action.isLoading === true, children: [_jsx(View, { style: [
-                        styles.icon,
-                        action.backgroundColor != null
-                            ? { backgroundColor: action.backgroundColor, borderColor: action.backgroundColor }
-                            : null,
-                    ], children: action.isLoading === true ? (_jsx(ActivityIndicator, { color: action.color ?? colors.gray[300], size: 16 })) : (_jsx(Icon, { name: action.icon, size: 16, color: action.color ?? colors.gray[300] })) }), _jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", align: "center", style: styles.label, children: action.label })] }, index))) }));
+export const QuickActions = ({ actions, tooltipDisabled = false, tooltipText }) => {
+    return (_jsx(View, { style: styles.container, children: actions.map((action, index) => (_jsx(LakeTooltip, { content: tooltipText, placement: "top", disabled: tooltipDisabled || isNullishOrEmpty(tooltipText), children: _jsxs(Pressable, { onPress: action.onPress, style: tooltipDisabled ? styles.action : styles.disabled, disabled: action.isLoading === true || !tooltipDisabled, children: [_jsx(View, { style: [
+                            styles.icon,
+                            action.backgroundColor != null
+                                ? { backgroundColor: action.backgroundColor, borderColor: action.backgroundColor }
+                                : null,
+                        ], children: action.isLoading === true ? (_jsx(ActivityIndicator, { color: action.color ?? colors.gray[300], size: 16 })) : (_jsx(Icon, { name: action.icon, size: 16, color: action.color ?? colors.gray[300] })) }), _jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", align: "center", style: styles.label, children: action.label })] }, index) }, index))) }));
 };

package/src/utils/__tests__/rifm.test.js

@@ -20,15 +20,15 @@ test('it respects accept: "alpha" param', async () => {
         return (_jsx(Rifm, { ...props, value: value, onChange: setValue, children: ({ value, onChange }) => _jsx("input", { type: "text", value: value, onChange: onChange }) }));
     };
     const utils = render(_jsx(Test, {}));
-    const input = await utils.findByRole("textbox");
+    const input = (await utils.findByRole("textbox"));
     typeInInput(input, "test");
-    expect(input).toHaveValue("te st/");
+    expect(input.value).toBe("te st/");
     clearInput(input);
     typeInInput(input, "1234");
-    expect(input).toHaveValue("");
+    expect(input.value).toBe("");
     clearInput(input);
     typeInInput(input, "te34");
-    expect(input).toHaveValue("te ");
+    expect(input.value).toBe("te ");
     clearInput(input);
 });
 test('it respects accept: "numeric" param', async () => {
@@ -42,15 +42,15 @@ test('it respects accept: "numeric" param', async () => {
         return (_jsx(Rifm, { ...props, value: value, onChange: setValue, children: ({ value, onChange }) => _jsx("input", { type: "text", value: value, onChange: onChange }) }));
     };
     const utils = render(_jsx(Test, {}));
-    const input = await utils.findByRole("textbox");
+    const input = (await utils.findByRole("textbox"));
     typeInInput(input, "test");
-    expect(input).toHaveValue("");
+    expect(input.value).toBe("");
     clearInput(input);
     typeInInput(input, "1234");
-    expect(input).toHaveValue("12 34/");
+    expect(input.value).toBe("12 34/");
     clearInput(input);
     typeInInput(input, "te34");
-    expect(input).toHaveValue("34 ");
+    expect(input.value).toBe("34 ");
     clearInput(input);
 });
 test('it respects accept: "alphanumeric" param', async () => {
@@ -64,18 +64,18 @@ test('it respects accept: "alphanumeric" param', async () => {
         return (_jsx(Rifm, { ...props, value: value, onChange: setValue, children: ({ value, onChange }) => _jsx("input", { type: "text", value: value, onChange: onChange }) }));
     };
     const utils = render(_jsx(Test, {}));
-    const input = await utils.findByRole("textbox");
+    const input = (await utils.findByRole("textbox"));
     typeInInput(input, "test");
-    expect(input).toHaveValue("te st/");
+    expect(input.value).toBe("te st/");
     clearInput(input);
     typeInInput(input, "1234");
-    expect(input).toHaveValue("12 34/");
+    expect(input.value).toBe("12 34/");
     clearInput(input);
     typeInInput(input, "te34");
-    expect(input).toHaveValue("te 34/");
+    expect(input.value).toBe("te 34/");
     clearInput(input);
     typeInInput(input, "t__4");
-    expect(input).toHaveValue("t4 ");
+    expect(input.value).toBe("t4 ");
     clearInput(input);
 });
 test("it appends characters at given indexes", async () => {
@@ -89,15 +89,15 @@ test("it appends characters at given indexes", async () => {
         return (_jsx(Rifm, { ...props, value: value, onChange: setValue, children: ({ value, onChange }) => _jsx("input", { type: "text", value: value, onChange: onChange }) }));
     };
     const utils = render(_jsx(Test, {}));
-    const input = await utils.findByRole("textbox");
+    const input = (await utils.findByRole("textbox"));
     typeInInput(input, "12");
-    expect(input).toHaveValue("12 ");
+    expect(input.value).toBe("12 ");
     clearInput(input);
     typeInInput(input, "1234");
-    expect(input).toHaveValue("12 34/");
+    expect(input.value).toBe("12 34/");
     clearInput(input);
     typeInInput(input, "123456");
-    expect(input).toHaveValue("12 34/56");
+    expect(input.value).toBe("12 34/56");
     clearInput(input);
 });
 test("it truncates the formatted text to the maximum length", async () => {
@@ -111,14 +111,14 @@ test("it truncates the formatted text to the maximum length", async () => {
         return (_jsx(Rifm, { ...props, value: value, onChange: setValue, children: ({ value, onChange }) => _jsx("input", { type: "text", value: value, onChange: onChange }) }));
     };
     const utils = render(_jsx(Test, {}));
-    const input = await utils.findByRole("textbox");
+    const input = (await utils.findByRole("textbox"));
     typeInInput(input, "1234");
-    expect(input).toHaveValue("12 34/");
+    expect(input.value).toBe("12 34/");
     clearInput(input);
     typeInInput(input, "123456");
-    expect(input).toHaveValue("12 34/56");
+    expect(input.value).toBe("12 34/56");
     clearInput(input);
     typeInInput(input, "12345678");
-    expect(input).toHaveValue("12 34/56");
+    expect(input.value).toBe("12 34/56");
     clearInput(input);
 });