@ledgerhq/native-ui 0.39.0-nightly.2 → 0.39.0-nightly.3

package/lib/pre-ldls/components/Search/Search.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { TextInputProps } from "react-native";
+type Props = Readonly<TextInputProps & {
+    onDebouncedChange?: (current: string, prev: string) => void;
+    debounceTime?: number;
+}>;
+export declare function Search({ onDebouncedChange, debounceTime, onChange, ...props }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=Search.d.ts.map

package/lib/pre-ldls/components/Search/Search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAkD,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9F,KAAK,KAAK,GAAG,QAAQ,CACnB,cAAc,GAAG;IACf,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,iBAAiB,EAAE,YAAkB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,qBAyB1F"}

package/lib/pre-ldls/components/Search/Search.js

@@ -0,0 +1,26 @@
+import React, { useMemo, useRef } from "react";
+import { Icons } from "../../../assets";
+import { useDebouncedCallback } from "../../hooks";
+import { Input } from "..";
+export function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }) {
+    const initialValue = props.value ?? props.defaultValue ?? "";
+    const prevValue = useRef(String(initialValue));
+    const handleDebouncedChange = useDebouncedCallback(useMemo(() => {
+        if (!onDebouncedChange)
+            return;
+        return (e) => {
+            const current = e.nativeEvent.text;
+            onDebouncedChange(current, prevValue.current);
+            prevValue.current = current;
+        };
+    }, [onDebouncedChange]), debounceTime);
+    const handleChange = useMemo(() => {
+        if (!handleDebouncedChange && !onChange)
+            return;
+        return (e) => {
+            onChange?.(e);
+            handleDebouncedChange?.(e);
+        };
+    }, [handleDebouncedChange, onChange]);
+    return React.createElement(Input, { ...props, icon: Icons.Search, onChange: handleChange });
+}

package/lib/pre-ldls/components/Search/Search.stories.d.ts

@@ -0,0 +1,8 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { Search } from "./Search";
+declare const meta: Meta<typeof Search>;
+export default meta;
+type Story = StoryObj<typeof Search>;
+export declare const Default: Story;
+export declare const WithInteraction: Story;
+//# sourceMappingURL=Search.stories.d.ts.map

package/lib/pre-ldls/components/Search/Search.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.stories.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAOlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAGjC,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC"}

package/lib/pre-ldls/components/Search/Search.stories.js

@@ -0,0 +1,29 @@
+import { Search } from "./Search";
+import { expect, jest } from "@storybook/jest";
+import { within, userEvent } from "@storybook/testing-library";
+const onDebouncedChange = jest.fn();
+const onChange = jest.fn();
+const meta = {
+    component: Search,
+    title: "PreLdls/Components/Search",
+    tags: ["autodocs"],
+    args: {
+        debounceTime: 500,
+        placeholder: "Search",
+        onDebouncedChange,
+        onChange,
+    },
+};
+export default meta;
+export const Default = {};
+// Interaction Testing
+export const WithInteraction = {
+    args: {},
+    controls: { expanded: true },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const input = canvas.getByRole("textbox");
+        await userEvent.type(input, "Write something");
+        await expect(input).toHaveValue("Write something");
+    },
+};

package/lib/pre-ldls/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useDebouncedCallback";
+//# sourceMappingURL=index.d.ts.map

package/lib/pre-ldls/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/lib/pre-ldls/hooks/index.js

@@ -0,0 +1 @@
+export * from "./useDebouncedCallback";

package/lib/pre-ldls/hooks/useDebouncedCallback.d.ts

@@ -0,0 +1,2 @@
+export declare function useDebouncedCallback<T extends unknown[]>(callback: ((...args: T) => void) | undefined, delay?: number): ((...args: T) => void) | undefined;
+//# sourceMappingURL=useDebouncedCallback.d.ts.map

package/lib/pre-ldls/hooks/useDebouncedCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedCallback.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/hooks/useDebouncedCallback.ts"],"names":[],"mappings":"AAEA,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,OAAO,EAAE,EACtD,QAAQ,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,EAC5C,KAAK,CAAC,EAAE,MAAM,cAEuD,CAAC,KAAK,IAAI,cAehF"}

package/lib/pre-ldls/hooks/useDebouncedCallback.js

@@ -0,0 +1,15 @@
+import { useEffect, useRef, useState } from "react";
+export function useDebouncedCallback(callback, delay) {
+    const [debouncedCallback, setDebouncedCallback] = useState();
+    const timeout = useRef();
+    useEffect(() => {
+        if (!callback)
+            return setDebouncedCallback(undefined);
+        setDebouncedCallback(() => (...args) => {
+            clearTimeout(timeout.current);
+            timeout.current = setTimeout(() => callback(...args), delay);
+        });
+        return () => clearTimeout(timeout.current);
+    }, [callback, delay]);
+    return debouncedCallback;
+}

package/lib/pre-ldls/hooks/useDebouncedCallback.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { jest } from "@storybook/jest";
+declare const meta: Meta<typeof Template>;
+export default meta;
+type TemplateProps = {
+    delay: number;
+    callback1: typeof jest.fn;
+    callback2: typeof jest.fn;
+};
+declare function Template({ callback1, callback2, delay }: TemplateProps): React.JSX.Element;
+export declare const Default: StoryObj<typeof Template>;
+export declare const WithInteraction: StoryObj<typeof Template>;
+//# sourceMappingURL=useDebouncedCallback.stories.d.ts.map

package/lib/pre-ldls/hooks/useDebouncedCallback.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedCallback.stories.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/hooks/useDebouncedCallback.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAU,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAM/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAS/B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,IAAI,CAAC,EAAE,CAAC;IAC1B,SAAS,EAAE,OAAO,IAAI,CAAC,EAAE,CAAC;CAC3B,CAAC;AACF,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,aAAa,qBAoB/D;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAAM,CAAC;AAErD,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAUrD,CAAC"}

package/lib/pre-ldls/hooks/useDebouncedCallback.stories.js

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { useDebouncedCallback } from ".";
+import { expect, jest } from "@storybook/jest";
+import { within, userEvent } from "@storybook/testing-library";
+const callback1 = jest.fn();
+const callback2 = jest.fn();
+const meta = {
+    component: Template,
+    title: "PreLdls/Hooks/useDebouncedCallback",
+    tags: ["!autodocs"],
+    args: {
+        delay: 1000,
+        callback1,
+        callback2,
+    },
+};
+export default meta;
+function Template({ callback1, callback2, delay }) {
+    const [callback, setCallback] = useState(() => callback1);
+    const debouncedCallback = useDebouncedCallback(callback, delay);
+    const [value, setValue] = useState("");
+    return (React.createElement("div", null,
+        React.createElement("input", { type: "text", value: value, onChange: (event) => {
+                const value = event.target.value;
+                setValue(value);
+                debouncedCallback?.(value);
+            } }),
+        React.createElement("button", { onClick: () => setCallback(() => callback1) }, "Use Callback 1"),
+        React.createElement("button", { onClick: () => setCallback(() => callback2) }, "Use Callback 2")));
+}
+export const Default = {};
+export const WithInteraction = {
+    args: {},
+    controls: { expanded: true },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const input = canvas.getByRole("textbox");
+        await userEvent.type(input, "Write something");
+        await expect(input).toHaveValue("Write something");
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.39.0-nightly.2",
+  "version": "0.39.0-nightly.3",
   "description": "Ledger Live - Mobile UI",
   "repository": {
     "type": "git",