@ledgerhq/react-ui 0.38.0-nightly.0 → 0.38.0-nightly.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/pre-ldls/components/Search/Search.js +12 -2
- package/lib/cjs/pre-ldls/components/Search/Search.js.map +3 -3
- package/lib/pre-ldls/components/Search/Search.d.ts.map +1 -1
- package/lib/pre-ldls/components/Search/Search.js +12 -1
- package/lib/pre-ldls/components/Search/Search.js.map +1 -1
- package/package.json +1 -1
|
@@ -35,6 +35,16 @@ var import_react = __toESM(require("react"));
|
|
|
35
35
|
var import_assets = require("../../../assets");
|
|
36
36
|
var import_hooks = require("../../hooks");
|
|
37
37
|
var import__ = require("..");
|
|
38
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
39
|
+
var import_libs = require("../../libs");
|
|
40
|
+
const Wrapper = import_styled_components.default.div`
|
|
41
|
+
${(0, import_libs.withTokens)("colors-border-active-default", "radius-s")}
|
|
42
|
+
|
|
43
|
+
:focus-within {
|
|
44
|
+
box-shadow: inset 0 0 0 2px var(--colors-border-active-default);
|
|
45
|
+
}
|
|
46
|
+
border-radius: var(--radius-s, 8px);
|
|
47
|
+
`;
|
|
38
48
|
function Search({
|
|
39
49
|
onDebouncedChange,
|
|
40
50
|
debounceTime = 500,
|
|
@@ -73,7 +83,7 @@ function Search({
|
|
|
73
83
|
handleDebouncedChange == null ? void 0 : handleDebouncedChange(event);
|
|
74
84
|
};
|
|
75
85
|
}, [handleDebouncedChange, onChange]);
|
|
76
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
86
|
+
return /* @__PURE__ */ import_react.default.createElement(Wrapper, null, /* @__PURE__ */ import_react.default.createElement(
|
|
77
87
|
import__.Input,
|
|
78
88
|
{
|
|
79
89
|
...props,
|
|
@@ -81,6 +91,6 @@ function Search({
|
|
|
81
91
|
icon: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Search, { size: "S" }),
|
|
82
92
|
onChange: handleChange
|
|
83
93
|
}
|
|
84
|
-
);
|
|
94
|
+
));
|
|
85
95
|
}
|
|
86
96
|
//# sourceMappingURL=Search.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Search/Search.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { ChangeEvent, useEffect, useMemo, useRef } from \"react\";\nimport { Icons } from \"../../../assets\";\nimport { useDebouncedCallback } from \"../../hooks\";\nimport { Input } from \"..\";\n\ntype InputProps = React.ComponentProps<\"input\">;\ntype Props = Readonly<\n InputProps & {\n onDebouncedChange?: (current: string, prev: string) => void;\n debounceTime?: number;\n autoFocus?: boolean;\n }\n>;\n\nexport function Search({\n onDebouncedChange,\n debounceTime = 500,\n onChange,\n autoFocus = true,\n ...props\n}: Props) {\n const initialValue = props.value ?? props.defaultValue ?? \"\";\n const prevValue = useRef(String(initialValue));\n const searchInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoFocus && searchInputRef.current) {\n // Delay focus to prevent layout shifts\n setTimeout(() => {\n searchInputRef.current?.focus({ preventScroll: true });\n }, 0);\n }\n }, [autoFocus]);\n\n const handleDebouncedChange = useDebouncedCallback(\n useMemo(() => {\n if (!onDebouncedChange) return;\n return (event: ChangeEvent<HTMLInputElement>) => {\n const current = event.target.value;\n onDebouncedChange(current, prevValue.current);\n prevValue.current = current;\n };\n }, [onDebouncedChange]),\n debounceTime,\n );\n\n const handleChange = useMemo(() => {\n if (!handleDebouncedChange && !onChange) return;\n return (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n handleDebouncedChange?.(event);\n };\n }, [handleDebouncedChange, onChange]);\n\n return (\n <Input\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+D;AAC/D,oBAAsB;AACtB,mBAAqC;AACrC,eAAsB;
|
|
6
|
-
"names": ["React"]
|
|
4
|
+
"sourcesContent": ["import React, { ChangeEvent, useEffect, useMemo, useRef } from \"react\";\nimport { Icons } from \"../../../assets\";\nimport { useDebouncedCallback } from \"../../hooks\";\nimport { Input } from \"..\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\n\nconst Wrapper = styled.div`\n ${withTokens(\"colors-border-active-default\", \"radius-s\")}\n\n :focus-within {\n box-shadow: inset 0 0 0 2px var(--colors-border-active-default);\n }\n border-radius: var(--radius-s, 8px);\n`;\n\ntype InputProps = React.ComponentProps<\"input\">;\ntype Props = Readonly<\n InputProps & {\n onDebouncedChange?: (current: string, prev: string) => void;\n debounceTime?: number;\n autoFocus?: boolean;\n }\n>;\n\nexport function Search({\n onDebouncedChange,\n debounceTime = 500,\n onChange,\n autoFocus = true,\n ...props\n}: Props) {\n const initialValue = props.value ?? props.defaultValue ?? \"\";\n const prevValue = useRef(String(initialValue));\n const searchInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoFocus && searchInputRef.current) {\n // Delay focus to prevent layout shifts\n setTimeout(() => {\n searchInputRef.current?.focus({ preventScroll: true });\n }, 0);\n }\n }, [autoFocus]);\n\n const handleDebouncedChange = useDebouncedCallback(\n useMemo(() => {\n if (!onDebouncedChange) return;\n return (event: ChangeEvent<HTMLInputElement>) => {\n const current = event.target.value;\n onDebouncedChange(current, prevValue.current);\n prevValue.current = current;\n };\n }, [onDebouncedChange]),\n debounceTime,\n );\n\n const handleChange = useMemo(() => {\n if (!handleDebouncedChange && !onChange) return;\n return (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n handleDebouncedChange?.(event);\n };\n }, [handleDebouncedChange, onChange]);\n\n return (\n <Wrapper>\n <Input\n {...props}\n ref={searchInputRef}\n icon={<Icons.Search size=\"S\" />}\n onChange={handleChange}\n />\n </Wrapper>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+D;AAC/D,oBAAsB;AACtB,mBAAqC;AACrC,eAAsB;AACtB,+BAAmB;AACnB,kBAA2B;AAE3B,MAAM,UAAU,yBAAAA,QAAO;AAAA,QACnB,wBAAW,gCAAgC,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBnD,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAU;AACR,QAAM,eAAe,MAAM,SAAS,MAAM,gBAAgB;AAC1D,QAAM,gBAAY,qBAAO,OAAO,YAAY,CAAC;AAC7C,QAAM,qBAAiB,qBAAyB,IAAI;AAEpD,8BAAU,MAAM;AACd,QAAI,aAAa,eAAe,SAAS;AAEvC,iBAAW,MAAM;AAvCvB;AAwCQ,6BAAe,YAAf,mBAAwB,MAAM,EAAE,eAAe,KAAK;AAAA,MACtD,GAAG,CAAC;AAAA,IACN;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,4BAAwB;AAAA,QAC5B,sBAAQ,MAAM;AACZ,UAAI,CAAC;AAAmB;AACxB,aAAO,CAAC,UAAyC;AAC/C,cAAM,UAAU,MAAM,OAAO;AAC7B,0BAAkB,SAAS,UAAU,OAAO;AAC5C,kBAAU,UAAU;AAAA,MACtB;AAAA,IACF,GAAG,CAAC,iBAAiB,CAAC;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC,yBAAyB,CAAC;AAAU;AACzC,WAAO,CAAC,UAAyC;AAC/C,2CAAW;AACX,qEAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,uBAAuB,QAAQ,CAAC;AAEpC,SACE,6BAAAC,QAAA,cAAC,eACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,6BAAAA,QAAA,cAAC,oBAAM,QAAN,EAAa,MAAK,KAAI;AAAA,MAC7B,UAAU;AAAA;AAAA,EACZ,CACF;AAEJ;",
|
|
6
|
+
"names": ["styled", "React"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAgBvE,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAChD,KAAK,KAAK,GAAG,QAAQ,CACnB,UAAU,GAAG;IACX,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,iBAAiB,EACjB,YAAkB,EAClB,QAAQ,EACR,SAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,qBA4CP"}
|
|
@@ -2,6 +2,16 @@ import React, { useEffect, useMemo, useRef } from "react";
|
|
|
2
2
|
import { Icons } from "../../../assets";
|
|
3
3
|
import { useDebouncedCallback } from "../../hooks";
|
|
4
4
|
import { Input } from "..";
|
|
5
|
+
import styled from "styled-components";
|
|
6
|
+
import { withTokens } from "../../libs";
|
|
7
|
+
const Wrapper = styled.div `
|
|
8
|
+
${withTokens("colors-border-active-default", "radius-s")}
|
|
9
|
+
|
|
10
|
+
:focus-within {
|
|
11
|
+
box-shadow: inset 0 0 0 2px var(--colors-border-active-default);
|
|
12
|
+
}
|
|
13
|
+
border-radius: var(--radius-s, 8px);
|
|
14
|
+
`;
|
|
5
15
|
export function Search({ onDebouncedChange, debounceTime = 500, onChange, autoFocus = true, ...props }) {
|
|
6
16
|
const initialValue = props.value ?? props.defaultValue ?? "";
|
|
7
17
|
const prevValue = useRef(String(initialValue));
|
|
@@ -31,6 +41,7 @@ export function Search({ onDebouncedChange, debounceTime = 500, onChange, autoFo
|
|
|
31
41
|
handleDebouncedChange?.(event);
|
|
32
42
|
};
|
|
33
43
|
}, [handleDebouncedChange, onChange]);
|
|
34
|
-
return (React.createElement(
|
|
44
|
+
return (React.createElement(Wrapper, null,
|
|
45
|
+
React.createElement(Input, { ...props, ref: searchInputRef, icon: React.createElement(Icons.Search, { size: "S" }), onChange: handleChange })));
|
|
35
46
|
}
|
|
36
47
|
//# sourceMappingURL=Search.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAC3B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CAAC,8BAA8B,EAAE,UAAU,CAAC;;;;;;CAMzD,CAAC;AAWF,MAAM,UAAU,MAAM,CAAC,EACrB,iBAAiB,EACjB,YAAY,GAAG,GAAG,EAClB,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,GAAG,KAAK,EACF;IACN,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;IAC7D,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAC/C,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;YACxC,uCAAuC;YACvC,UAAU,CAAC,GAAG,EAAE;gBACd,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YACzD,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,qBAAqB,GAAG,oBAAoB,CAChD,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAC/B,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACnC,iBAAiB,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;YAC9C,SAAS,CAAC,OAAO,GAAG,OAAO,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,EACvB,YAAY,CACb,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,qBAAqB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAChD,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;YAClB,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,KAAK,OACA,KAAK,EACT,GAAG,EAAE,cAAc,EACnB,IAAI,EAAE,oBAAC,KAAK,CAAC,MAAM,IAAC,IAAI,EAAC,GAAG,GAAG,EAC/B,QAAQ,EAAE,YAAY,GACtB,CACM,CACX,CAAC;AACJ,CAAC"}
|