@ledgerhq/react-ui 0.37.0-nightly.3 → 0.37.0
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/components/form/Radio/RadioElement.js +1 -1
- package/lib/cjs/components/form/Radio/RadioElement.js.map +2 -2
- package/lib/cjs/components/tabs/Chip/index.js +0 -3
- package/lib/cjs/components/tabs/Chip/index.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Search/Search.js +2 -22
- package/lib/cjs/pre-ldls/components/Search/Search.js.map +2 -2
- package/lib/components/form/Radio/RadioElement.d.ts.map +1 -1
- package/lib/components/form/Radio/RadioElement.js +2 -1
- package/lib/components/form/Radio/RadioElement.js.map +1 -1
- package/lib/components/tabs/Chip/index.d.ts.map +1 -1
- package/lib/components/tabs/Chip/index.js +1 -4
- package/lib/components/tabs/Chip/index.js.map +1 -1
- package/lib/pre-ldls/components/Search/Search.d.ts +1 -2
- package/lib/pre-ldls/components/Search/Search.d.ts.map +1 -1
- package/lib/pre-ldls/components/Search/Search.js +3 -9
- package/lib/pre-ldls/components/Search/Search.js.map +1 -1
- package/package.json +3 -3
|
@@ -196,7 +196,7 @@ const Element = ({
|
|
|
196
196
|
const context = (0, import_react.useContext)(import_index.RadioContext);
|
|
197
197
|
if (context === void 0)
|
|
198
198
|
throw new Error("RadioElement must be used within a RadioProvider");
|
|
199
|
-
const isChecked = (0, import_react.useMemo)(() => context.currentValue
|
|
199
|
+
const isChecked = (0, import_react.useMemo)(() => context.currentValue === value, [context.currentValue]);
|
|
200
200
|
const handleChange = (event) => {
|
|
201
201
|
context.onChange(event.target.value);
|
|
202
202
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Radio/RadioElement.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n color: var(--ledger-ui-checkbox-color, ${p => p.theme.colors.neutral.c100});\n width: 266px;\n`;\n\nconst Input = styled.input`\n --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c50};\n --ledger-ui-checkbox-size: 1.25rem;\n\n position: relative;\n appearance: none;\n width: var(--ledger-ui-checkbox-size);\n height: var(--ledger-ui-checkbox-size);\n flex-shrink: 0;\n border-radius: ${p => `${p.theme.radii[1]}px`};\n border: 1px solid var(--ledger-ui-checkbox-color);\n cursor: pointer;\n\n &:checked::before {\n position: absolute;\n display: block;\n content: \" \";\n background-color: var(--ledger-ui-checkbox-color);\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n border-radius: 2px;\n width: calc(var(--ledger-ui-checkbox-size) / 2);\n height: calc(var(--ledger-ui-checkbox-size) / 2);\n }\n\n &[data-variant=\"default\"] {\n :hover {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c90};\n }\n :active {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c100};\n }\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c80};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.primary.c60, 0.48)};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c90};\n }\n :active,\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.neutral.c60, 0.48)};\n }\n }\n\n &[data-variant=\"success\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.success.c50};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.success.c50, 0.48)};\n }\n }\n\n &[data-variant=\"error\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.error.c50};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.error.c50, 0.48)};\n }\n }\n\n &[data-variant]:disabled {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c40};\n cursor: unset;\n background-color: ${p => p.theme.colors.neutral.c30};\n }\n`;\n\nconst outlinedCSS = css`\n padding: 20px;\n border: 1px solid ${p => p.theme.colors.neutral.c50};\n border-radius: ${p => p.theme.radii[2]}px;\n &[data-variant=\"default\"] {\n :hover {\n border-color: ${p => p.theme.colors.primary.c90};\n }\n &[data-checked] :active {\n border-color: ${p => p.theme.colors.primary.c100};\n }\n :focus {\n border-color: ${p => p.theme.colors.primary.c80};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n border-color: ${p => p.theme.colors.neutral.c90};\n }\n &[data-checked],\n :active :focus {\n border-color: ${p => p.theme.colors.neutral.c100};\n }\n }\n\n &[data-variant=\"success\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${p => p.theme.colors.success.c50};\n }\n :hover {\n border-color: ${p => p.theme.colors.success.c50};\n }\n }\n\n &[data-variant=\"error\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${p => p.theme.colors.error.c50};\n }\n :hover {\n border-color: ${p => p.theme.colors.error.c50};\n }\n }\n\n &[data-variant]:disabled {\n border-color: ${p => p.theme.colors.neutral.c40};\n cursor: unset;\n }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n outlined?: boolean;\n}>`\n display: inline-flex;\n column-gap: 0.75rem;\n align-items: center;\n cursor: pointer;\n &[data-variant]:disabled {\n cursor: unset;\n }\n ${p => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n variant?: \"default\" | \"main\" | \"success\" | \"error\";\n label: string;\n outlined?: boolean;\n};\n\nconst Element = ({\n label,\n value,\n disabled,\n outlined,\n variant = \"default\",\n ...props\n}: RadioElementProps): JSX.Element => {\n const context = useContext(RadioContext);\n if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n const isChecked = useMemo(() => context.currentValue
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React, { InputHTMLAttributes, useContext, useMemo } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport { rgba } from \"../../../styles/helpers\";\nimport Text from \"../../asorted/Text\";\nimport { RadioContext } from \"./index\";\n\nconst Label = styled(Text)`\n color: var(--ledger-ui-checkbox-color, ${p => p.theme.colors.neutral.c100});\n width: 266px;\n`;\n\nconst Input = styled.input`\n --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c50};\n --ledger-ui-checkbox-size: 1.25rem;\n\n position: relative;\n appearance: none;\n width: var(--ledger-ui-checkbox-size);\n height: var(--ledger-ui-checkbox-size);\n flex-shrink: 0;\n border-radius: ${p => `${p.theme.radii[1]}px`};\n border: 1px solid var(--ledger-ui-checkbox-color);\n cursor: pointer;\n\n &:checked::before {\n position: absolute;\n display: block;\n content: \" \";\n background-color: var(--ledger-ui-checkbox-color);\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n border-radius: 2px;\n width: calc(var(--ledger-ui-checkbox-size) / 2);\n height: calc(var(--ledger-ui-checkbox-size) / 2);\n }\n\n &[data-variant=\"default\"] {\n :hover {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c90};\n }\n :active {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c100};\n }\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.primary.c80};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.primary.c60, 0.48)};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c90};\n }\n :active,\n :checked,\n :focus {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c100};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.neutral.c60, 0.48)};\n }\n }\n\n &[data-variant=\"success\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.success.c50};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.success.c50, 0.48)};\n }\n }\n\n &[data-variant=\"error\"] {\n :hover,\n :checked:not([disabled]),\n :checked:not([disabled]) + ${Label}, :focus {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.error.c50};\n }\n :focus {\n box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.error.c50, 0.48)};\n }\n }\n\n &[data-variant]:disabled {\n --ledger-ui-checkbox-color: ${p => p.theme.colors.neutral.c40};\n cursor: unset;\n background-color: ${p => p.theme.colors.neutral.c30};\n }\n`;\n\nconst outlinedCSS = css`\n padding: 20px;\n border: 1px solid ${p => p.theme.colors.neutral.c50};\n border-radius: ${p => p.theme.radii[2]}px;\n &[data-variant=\"default\"] {\n :hover {\n border-color: ${p => p.theme.colors.primary.c90};\n }\n &[data-checked] :active {\n border-color: ${p => p.theme.colors.primary.c100};\n }\n :focus {\n border-color: ${p => p.theme.colors.primary.c80};\n }\n }\n\n &[data-variant=\"main\"] {\n :hover {\n border-color: ${p => p.theme.colors.neutral.c90};\n }\n &[data-checked],\n :active :focus {\n border-color: ${p => p.theme.colors.neutral.c100};\n }\n }\n\n &[data-variant=\"success\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${p => p.theme.colors.success.c50};\n }\n :hover {\n border-color: ${p => p.theme.colors.success.c50};\n }\n }\n\n &[data-variant=\"error\"] {\n &[data-checked]:not([disabled]) {\n border-color: ${p => p.theme.colors.error.c50};\n }\n :hover {\n border-color: ${p => p.theme.colors.error.c50};\n }\n }\n\n &[data-variant]:disabled {\n border-color: ${p => p.theme.colors.neutral.c40};\n cursor: unset;\n }\n`;\n\nconst RadioElement = styled.label.attrs({ tabIndex: -1 })<{\n outlined?: boolean;\n}>`\n display: inline-flex;\n column-gap: 0.75rem;\n align-items: center;\n cursor: pointer;\n &[data-variant]:disabled {\n cursor: unset;\n }\n ${p => p.outlined && outlinedCSS}\n`;\n\ntype InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\" | \"name\">;\n\nexport type RadioElementProps = InputAttributes & {\n variant?: \"default\" | \"main\" | \"success\" | \"error\";\n label: string;\n outlined?: boolean;\n};\n\nconst Element = ({\n label,\n value,\n disabled,\n outlined,\n variant = \"default\",\n ...props\n}: RadioElementProps): JSX.Element => {\n const context = useContext(RadioContext);\n if (context === undefined) throw new Error(\"RadioElement must be used within a RadioProvider\");\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n context.onChange(event.target.value);\n };\n\n return (\n <RadioElement\n data-variant={variant}\n {...(isChecked ? { \"data-checked\": true } : {})}\n outlined={outlined}\n >\n <Input\n type=\"radio\"\n data-variant={variant}\n checked={isChecked}\n disabled={disabled}\n onChange={handleChange}\n value={value}\n name={context.name}\n {...props}\n />\n <Label variant=\"paragraph\">{label}</Label>\n </RadioElement>\n );\n};\n\nElement.displayName = \"Radio.Element\"; // For easy identification in the React devtools & in storybook\nElement.Label = Label;\n\nexport default Element;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["styled", "Text", "React"]
|
|
7
7
|
}
|
|
@@ -56,9 +56,6 @@ const Item = (0, import_styled_components.default)(import_Flex.default).attrs({
|
|
|
56
56
|
`;
|
|
57
57
|
function BarTabs({ children, onTabChange, initialActiveIndex }) {
|
|
58
58
|
const [activeIndex, setActiveIndex] = (0, import_react.useState)(initialActiveIndex);
|
|
59
|
-
(0, import_react.useEffect)(() => {
|
|
60
|
-
setActiveIndex(initialActiveIndex);
|
|
61
|
-
}, [initialActiveIndex]);
|
|
62
59
|
return /* @__PURE__ */ import_react.default.createElement(Container, null, import_react.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ import_react.default.createElement(
|
|
63
60
|
Item,
|
|
64
61
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/tabs/Chip/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport Flex from \"../../layout/Flex\";\n\nexport type Props = React.PropsWithChildren<{\n /**\n * An optional callback that will be called when the active tab changes.\n */\n onTabChange?: (activeIndex: number) => void;\n /**\n * The tab index to mark as active when rendering for the first time.\n * If omitted, then initially no tabs will be selected.\n */\n initialActiveIndex?: number;\n}>;\ntype ItemProps = {\n active: boolean;\n};\n\nconst Container = styled(Flex).attrs({\n justifyContent: \"space-between\",\n flex: 1,\n columnGap: 1,\n})`\n border: 1px solid ${p => p.theme.colors.opacityDefault.c10};\n border-radius: 12px;\n padding: 4px;\n`;\n\nconst Item = styled(Flex).attrs({\n flex: 1,\n justifyContent: \"center\",\n alignItems: \"center\",\n})<ItemProps>`\n cursor: pointer;\n padding: 8px 12px 8px 12px;\n border-radius: 10px;\n color: ${p => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c50)};\n background-color: ${p => (p.active ? p.theme.colors.opacityDefault.c10 : \"unset\")};\n`;\n\nexport default function BarTabs({ children, onTabChange, initialActiveIndex }: Props): JSX.Element {\n const [activeIndex, setActiveIndex] = useState(initialActiveIndex);\n return (\n <Container>\n {React.Children.toArray(children).map((child, index) => (\n <Item\n key={index}\n active={index === activeIndex}\n onClick={() => {\n setActiveIndex(index);\n onTabChange && onTabChange(index);\n }}\n >\n {child}\n </Item>\n ))}\n </Container>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,kBAAiB;AAiBjB,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EACnC,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAAA,sBACqB,OAAK,EAAE,MAAM,OAAO,eAAe,GAAG;AAAA;AAAA;AAAA;AAK5D,MAAM,WAAO,yBAAAD,SAAO,YAAAC,OAAI,EAAE,MAAM;AAAA,EAC9B,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,YAAY;AACd,CAAC;AAAA;AAAA;AAAA;AAAA,WAIU,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ,GAAI;AAAA,sBAC/D,OAAM,EAAE,SAAS,EAAE,MAAM,OAAO,eAAe,MAAM,OAAQ;AAAA;AAGpE,SAAR,QAAyB,EAAE,UAAU,aAAa,mBAAmB,GAAuB;AACjG,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,kBAAkB;AACjE,SACE,6BAAAC,QAAA,cAAC,iBACE,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,OAAO,UAC5C,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,QAAQ,UAAU;AAAA,MAClB,SAAS,MAAM;AACb,uBAAe,KAAK;AACpB,uBAAe,YAAY,KAAK;AAAA,MAClC;AAAA;AAAA,IAEC;AAAA,EACH,CACD,CACH;AAEJ;",
|
|
6
6
|
"names": ["styled", "Flex", "React"]
|
|
7
7
|
}
|
|
@@ -35,21 +35,9 @@ 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
|
-
function Search({
|
|
39
|
-
onDebouncedChange,
|
|
40
|
-
debounceTime = 500,
|
|
41
|
-
onChange,
|
|
42
|
-
autoFocus = true,
|
|
43
|
-
...props
|
|
44
|
-
}) {
|
|
38
|
+
function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }) {
|
|
45
39
|
const initialValue = props.value ?? props.defaultValue ?? "";
|
|
46
40
|
const prevValue = (0, import_react.useRef)(String(initialValue));
|
|
47
|
-
const searchInputRef = (0, import_react.useRef)(null);
|
|
48
|
-
(0, import_react.useEffect)(() => {
|
|
49
|
-
if (autoFocus && searchInputRef.current) {
|
|
50
|
-
searchInputRef.current.focus();
|
|
51
|
-
}
|
|
52
|
-
}, [autoFocus]);
|
|
53
41
|
const handleDebouncedChange = (0, import_hooks.useDebouncedCallback)(
|
|
54
42
|
(0, import_react.useMemo)(() => {
|
|
55
43
|
if (!onDebouncedChange)
|
|
@@ -70,14 +58,6 @@ function Search({
|
|
|
70
58
|
handleDebouncedChange == null ? void 0 : handleDebouncedChange(event);
|
|
71
59
|
};
|
|
72
60
|
}, [handleDebouncedChange, onChange]);
|
|
73
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
74
|
-
import__.Input,
|
|
75
|
-
{
|
|
76
|
-
...props,
|
|
77
|
-
ref: searchInputRef,
|
|
78
|
-
icon: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Search, { size: "S" }),
|
|
79
|
-
onChange: handleChange
|
|
80
|
-
}
|
|
81
|
-
);
|
|
61
|
+
return /* @__PURE__ */ import_react.default.createElement(import__.Input, { ...props, icon: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Search, { size: "S" }), onChange: handleChange });
|
|
82
62
|
}
|
|
83
63
|
//# 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,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { ChangeEvent, 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 }\n>;\n\nexport function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }: Props) {\n const initialValue = props.value ?? props.defaultValue ?? \"\";\n const prevValue = useRef(String(initialValue));\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 <Input {...props} icon={<Icons.Search size=\"S\" />} onChange={handleChange} />;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoD;AACpD,oBAAsB;AACtB,mBAAqC;AACrC,eAAsB;AAUf,SAAS,OAAO,EAAE,mBAAmB,eAAe,KAAK,UAAU,GAAG,MAAM,GAAU;AAC3F,QAAM,eAAe,MAAM,SAAS,MAAM,gBAAgB;AAC1D,QAAM,gBAAY,qBAAO,OAAO,YAAY,CAAC;AAE7C,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,SAAO,6BAAAA,QAAA,cAAC,kBAAO,GAAG,OAAO,MAAM,6BAAAA,QAAA,cAAC,oBAAM,QAAN,EAAa,MAAK,KAAI,GAAI,UAAU,cAAc;AACpF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioElement.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAuB,MAAM,OAAO,CAAC;AAkKxE,KAAK,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAEjG,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG;IAChD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,OAAO;8DAOV,iBAAiB,GAAG,WAAW;;;
|
|
1
|
+
{"version":3,"file":"RadioElement.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAuB,MAAM,OAAO,CAAC;AAkKxE,KAAK,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAEjG,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG;IAChD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,OAAO;8DAOV,iBAAiB,GAAG,WAAW;;;CA8BjC,CAAC;AAKF,eAAe,OAAO,CAAC"}
|
|
@@ -156,7 +156,8 @@ const Element = ({ label, value, disabled, outlined, variant = "default", ...pro
|
|
|
156
156
|
const context = useContext(RadioContext);
|
|
157
157
|
if (context === undefined)
|
|
158
158
|
throw new Error("RadioElement must be used within a RadioProvider");
|
|
159
|
-
|
|
159
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
160
|
+
const isChecked = useMemo(() => context.currentValue === value, [context.currentValue]);
|
|
160
161
|
const handleChange = (event) => {
|
|
161
162
|
context.onChange(event.target.value);
|
|
162
163
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioElement.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC1C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC,CAAC;AA2BH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkBjG"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import Flex from "../../layout/Flex";
|
|
4
4
|
const Container = styled(Flex).attrs({
|
|
@@ -23,9 +23,6 @@ const Item = styled(Flex).attrs({
|
|
|
23
23
|
`;
|
|
24
24
|
export default function BarTabs({ children, onTabChange, initialActiveIndex }) {
|
|
25
25
|
const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
setActiveIndex(initialActiveIndex);
|
|
28
|
-
}, [initialActiveIndex]);
|
|
29
26
|
return (React.createElement(Container, null, React.Children.toArray(children).map((child, index) => (React.createElement(Item, { key: index, active: index === activeIndex, onClick: () => {
|
|
30
27
|
setActiveIndex(index);
|
|
31
28
|
onTabChange && onTabChange(index);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/tabs/Chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAiBrC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IACnC,cAAc,EAAE,eAAe;IAC/B,IAAI,EAAE,CAAC;IACP,SAAS,EAAE,CAAC;CACb,CAAC,CAAA;sBACoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;CAG3D,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;IAC9B,IAAI,EAAE,CAAC;IACP,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAW;;;;WAIF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;sBAC/D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;CAClF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAS;IAClF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACnE,OAAO,CACL,oBAAC,SAAS,QACP,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACtD,oBAAC,IAAI,IACH,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,KAAK,KAAK,WAAW,EAC7B,OAAO,EAAE,GAAG,EAAE;YACZ,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,IAEA,KAAK,CACD,CACR,CAAC,CACQ,CACb,CAAC;AACJ,CAAC"}
|
|
@@ -3,8 +3,7 @@ type InputProps = React.ComponentProps<"input">;
|
|
|
3
3
|
type Props = Readonly<InputProps & {
|
|
4
4
|
onDebouncedChange?: (current: string, prev: string) => void;
|
|
5
5
|
debounceTime?: number;
|
|
6
|
-
autoFocus?: boolean;
|
|
7
6
|
}>;
|
|
8
|
-
export declare function Search({ onDebouncedChange, debounceTime, onChange,
|
|
7
|
+
export declare function Search({ onDebouncedChange, debounceTime, onChange, ...props }: Props): React.JSX.Element;
|
|
9
8
|
export {};
|
|
10
9
|
//# sourceMappingURL=Search.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,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;CACvB,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,iBAAiB,EAAE,YAAkB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,qBAyB1F"}
|
|
@@ -1,16 +1,10 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useMemo, useRef } from "react";
|
|
2
2
|
import { Icons } from "../../../assets";
|
|
3
3
|
import { useDebouncedCallback } from "../../hooks";
|
|
4
4
|
import { Input } from "..";
|
|
5
|
-
export function Search({ onDebouncedChange, debounceTime = 500, onChange,
|
|
5
|
+
export function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }) {
|
|
6
6
|
const initialValue = props.value ?? props.defaultValue ?? "";
|
|
7
7
|
const prevValue = useRef(String(initialValue));
|
|
8
|
-
const searchInputRef = useRef(null);
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
if (autoFocus && searchInputRef.current) {
|
|
11
|
-
searchInputRef.current.focus();
|
|
12
|
-
}
|
|
13
|
-
}, [autoFocus]);
|
|
14
8
|
const handleDebouncedChange = useDebouncedCallback(useMemo(() => {
|
|
15
9
|
if (!onDebouncedChange)
|
|
16
10
|
return;
|
|
@@ -28,6 +22,6 @@ export function Search({ onDebouncedChange, debounceTime = 500, onChange, autoFo
|
|
|
28
22
|
handleDebouncedChange?.(event);
|
|
29
23
|
};
|
|
30
24
|
}, [handleDebouncedChange, onChange]);
|
|
31
|
-
return
|
|
25
|
+
return React.createElement(Input, { ...props, icon: React.createElement(Icons.Search, { size: "S" }), onChange: handleChange });
|
|
32
26
|
}
|
|
33
27
|
//# 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,
|
|
1
|
+
{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAU3B,MAAM,UAAU,MAAM,CAAC,EAAE,iBAAiB,EAAE,YAAY,GAAG,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAS;IACzF,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;IAE/C,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,oBAAC,KAAK,OAAK,KAAK,EAAE,IAAI,EAAE,oBAAC,KAAK,CAAC,MAAM,IAAC,IAAI,EAAC,GAAG,GAAG,EAAE,QAAQ,EAAE,YAAY,GAAI,CAAC;AACvF,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.37.0
|
|
3
|
+
"version": "0.37.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -75,9 +75,9 @@
|
|
|
75
75
|
"react-transition-group": "^4.4.2",
|
|
76
76
|
"react-window": "^1.8.6",
|
|
77
77
|
"styled-system": "^5.1.5",
|
|
78
|
-
"@ledgerhq/crypto-icons-ui": "^1.
|
|
78
|
+
"@ledgerhq/crypto-icons-ui": "^1.18.0",
|
|
79
79
|
"@ledgerhq/icons-ui": "^0.13.0",
|
|
80
|
-
"@ledgerhq/ui-shared": "^0.4.0
|
|
80
|
+
"@ledgerhq/ui-shared": "^0.4.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
83
|
"react": ">=17.0.2",
|