@ledgerhq/react-ui 0.5.0 → 0.7.2

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.
Files changed (60) hide show
  1. package/components/asorted/Divider/index.d.ts +1 -1
  2. package/components/asorted/Icon/BoxedIcon.js +6 -2
  3. package/components/asorted/index.d.ts +1 -1
  4. package/components/asorted/index.js +1 -1
  5. package/components/cta/Button/index.d.ts +11 -8
  6. package/components/cta/Button/index.js +34 -23
  7. package/components/form/BaseInput/index.js +1 -1
  8. package/components/form/Dropdown/index.d.ts +3 -2
  9. package/components/form/Dropdown/index.js +9 -8
  10. package/components/form/DropdownGeneric/index.d.ts +42 -0
  11. package/components/form/DropdownGeneric/index.js +115 -0
  12. package/components/form/Radio/RadioElement.d.ts +3 -2
  13. package/components/form/Radio/RadioElement.js +72 -3
  14. package/components/form/Radio/index.d.ts +1 -1
  15. package/components/form/SelectInput/Control.d.ts +3 -9
  16. package/components/form/SelectInput/Control.js +2 -1
  17. package/components/form/SelectInput/DropdownIndicator.d.ts +3 -9
  18. package/components/form/SelectInput/IndicatorsContainer.d.ts +2 -5
  19. package/components/form/SelectInput/IndicatorsContainer.js +1 -1
  20. package/components/form/SelectInput/MenuList.d.ts +3 -9
  21. package/components/form/SelectInput/MenuList.js +2 -1
  22. package/components/form/SelectInput/Option.d.ts +6 -18
  23. package/components/form/SelectInput/ValueContainer.d.ts +5 -14
  24. package/components/form/SelectInput/ValueContainer.js +1 -1
  25. package/components/form/SelectInput/VirtualMenuList.d.ts +2 -5
  26. package/components/form/SelectInput/VirtualMenuList.js +2 -1
  27. package/components/form/SelectInput/index.d.ts +7 -16
  28. package/components/form/SelectInput/index.js +9 -1
  29. package/components/form/index.d.ts +1 -0
  30. package/components/form/index.js +1 -0
  31. package/components/layout/Drawer/index.d.ts +17 -2
  32. package/components/layout/Drawer/index.js +45 -36
  33. package/components/layout/Popin/index.d.ts +2 -1
  34. package/components/layout/Popin/index.js +10 -5
  35. package/components/loaders/InfiniteLoader/index.d.ts +8 -7
  36. package/components/loaders/InfiniteLoader/index.js +35 -9
  37. package/components/loaders/ProgressLoader/index.d.ts +22 -1
  38. package/components/loaders/ProgressLoader/index.js +10 -12
  39. package/components/message/Alert/index.d.ts +20 -11
  40. package/components/message/Alert/index.js +6 -7
  41. package/components/message/Log/index.d.ts +5 -2
  42. package/components/message/Log/index.js +3 -4
  43. package/components/navigation/FlowStepper/index.d.ts +77 -0
  44. package/components/navigation/FlowStepper/index.js +35 -0
  45. package/components/navigation/index.d.ts +1 -0
  46. package/components/navigation/index.js +1 -0
  47. package/components/navigation/progress/Stepper/index.d.ts +27 -10
  48. package/components/navigation/progress/Stepper/index.js +37 -18
  49. package/components/navigation/sideBar/SideBar/SideBar.js +9 -7
  50. package/index.d.ts +1 -1
  51. package/index.js +1 -1
  52. package/package.json +5 -5
  53. package/styles/InvertTheme.d.ts +4 -1
  54. package/styles/InvertTheme.js +5 -5
  55. package/styles/index.d.ts +1 -0
  56. package/styles/index.js +1 -0
  57. package/styles/theme.d.ts +1 -1
  58. package/styles/theme.js +7 -7
  59. package/components/loaders/InfiniteLoader/image.d.ts +0 -2
  60. package/components/loaders/InfiniteLoader/image.js +0 -1
@@ -35,22 +35,21 @@ const getColors = ({ theme, type }) => {
35
35
  };
36
36
  }
37
37
  };
38
- const StyledAlertContainer = styled(Flex).attrs(() => ({
39
- padding: 6,
40
- })) `
38
+ const StyledAlertContainer = styled(Flex) `
41
39
  border-radius: ${(p) => `${p.theme.radii[1]}px`};
42
40
  align-items: center;
43
41
  `;
44
- export default function Alert({ type = "info", title, showIcon = true, renderContent, }) {
42
+ export default function Alert({ type = "info", title, showIcon = true, renderContent, renderRight, containerProps, }) {
45
43
  const theme = useTheme();
46
44
  const { color, background } = getColors({ theme, type });
47
45
  const textProps = {
48
46
  variant: "paragraph",
49
47
  fontWeight: "medium",
50
48
  };
51
- return (React.createElement(StyledAlertContainer, { color: color, backgroundColor: background },
49
+ return (React.createElement(StyledAlertContainer, Object.assign({ color: color, backgroundColor: background, padding: 6 }, containerProps),
52
50
  showIcon && !!icons[type] && React.createElement(StyledIconContainer, null, icons[type]),
53
- React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start", rowGap: "6px" },
51
+ React.createElement(Flex, { flexDirection: "column", flex: 1, alignItems: "flex-start", rowGap: "6px" },
54
52
  title && (React.createElement(Text, Object.assign({}, textProps, { color: "inherit" }), title)),
55
- renderContent && renderContent({ color, textProps }))));
53
+ renderContent && renderContent({ color, textProps })),
54
+ React.createElement(Flex, null, renderRight && renderRight({ color, textProps }))));
56
55
  }
@@ -1,6 +1,9 @@
1
1
  import React from "react";
2
+ import { TextProps } from "../../asorted/Text";
2
3
  import { FlexBoxProps } from "../../layout/Flex";
3
- export declare type Props = React.PropsWithChildren<FlexBoxProps>;
4
- declare function Log({ children, ...props }: Props): JSX.Element;
4
+ export declare type Props = React.PropsWithChildren<FlexBoxProps & {
5
+ extraTextProps?: TextProps;
6
+ }>;
7
+ declare function Log({ children, extraTextProps, ...props }: Props): JSX.Element;
5
8
  declare const _default: React.MemoExoticComponent<typeof Log>;
6
9
  export default _default;
@@ -19,7 +19,6 @@ const Container = styled(FlexBox) `
19
19
  flex-wrap: wrap;
20
20
  align-items: stretch;
21
21
  min-height: ${(p) => p.theme.space[12]}px;
22
- color: ${(p) => p.theme.colors.neutral.c100};
23
22
  `;
24
23
  const TextContainer = styled(FlexBox).attrs(() => ({
25
24
  flex: "1",
@@ -31,11 +30,11 @@ const TextContainer = styled(FlexBox).attrs(() => ({
31
30
  }
32
31
  `;
33
32
  function Log(_a) {
34
- var { children } = _a, props = __rest(_a, ["children"]);
35
- return (React.createElement(Container, Object.assign({}, props),
33
+ var { children, extraTextProps } = _a, props = __rest(_a, ["children", "extraTextProps"]);
34
+ return (React.createElement(Container, Object.assign({ color: "neutral.c100" }, props),
36
35
  React.createElement(BracketLeft, null),
37
36
  React.createElement(TextContainer, { flex: "1", alignItems: "center", justifyContent: "center" },
38
- React.createElement(Text, { variant: "h3", textTransform: "uppercase", textAlign: "center" }, children)),
37
+ React.createElement(Text, Object.assign({ variant: "h3", textTransform: "uppercase", textAlign: "center", color: "inherit" }, extraTextProps), children)),
39
38
  React.createElement(BracketRight, null)));
40
39
  }
41
40
  export default memo(Log);
@@ -0,0 +1,77 @@
1
+ import React from "react";
2
+ import { Props as StepperProps } from "../progress/Stepper";
3
+ import { FlexBoxProps as FlexProps } from "../../layout/Flex";
4
+ export declare type StepProps = {
5
+ /**
6
+ * The label of the step.
7
+ */
8
+ label: string;
9
+ /**
10
+ * A specific index, can be used to explicitely order steps.
11
+ */
12
+ index?: number;
13
+ /**
14
+ * Hides the step from the progress stepper.
15
+ */
16
+ hidden?: boolean;
17
+ /**
18
+ * The step contents.
19
+ */
20
+ children: React.ReactNode;
21
+ };
22
+ interface InnerProps {
23
+ /**
24
+ * The active index.
25
+ */
26
+ activeIndex: number;
27
+ /**
28
+ * The total number of steps.
29
+ */
30
+ stepsLength: number;
31
+ }
32
+ export interface Props<ExtraProps> {
33
+ /**
34
+ * The index of the active step.
35
+ */
36
+ activeIndex: number;
37
+ /**
38
+ * An optional header displayed above the stepper.
39
+ */
40
+ header?: (props: InnerProps & ExtraProps) => React.ReactNode;
41
+ /**
42
+ * An optional footer displayed below the body.
43
+ */
44
+ footer?: (props: InnerProps & ExtraProps) => React.ReactNode;
45
+ /**
46
+ * Extra props that are passed to the header and footer render functions.
47
+ */
48
+ extraProps?: ExtraProps;
49
+ /**
50
+ * Extra props that are passed to the container `Flex` element.
51
+ */
52
+ extraContainerProps?: FlexProps;
53
+ /**
54
+ * Extra props that are passed to the stepper component.
55
+ */
56
+ extraStepperProps?: Partial<StepperProps>;
57
+ /**
58
+ * Extra props that are passed to the stepper `Flex` wrapper.
59
+ */
60
+ extraStepperContainerProps?: FlexProps;
61
+ /**
62
+ * Custom rendering function to wrap children.
63
+ */
64
+ renderChildren?: (args: {
65
+ children: React.ReactNode;
66
+ }) => React.ReactNode;
67
+ /**
68
+ /**
69
+ * A list of children representing each step of the flow.
70
+ */
71
+ children: React.ReactElement<StepProps> | React.ReactElement<StepProps>[];
72
+ }
73
+ declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }: Props<ExtraProps>): JSX.Element;
74
+ declare namespace FlowStepper {
75
+ var Step: ({ children }: StepProps) => JSX.Element;
76
+ }
77
+ export default FlowStepper;
@@ -0,0 +1,35 @@
1
+ import React from "react";
2
+ import { isElement } from "react-is";
3
+ import Flex from "../../layout/Flex";
4
+ import { Stepper } from "..";
5
+ function FlowStepper({ activeIndex, header, footer, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }) {
6
+ const { steps, innerContents } = React.Children.toArray(children).reduce((acc, child, idx) => {
7
+ var _a;
8
+ const index = (_a = (isElement(child) && child.props.index)) !== null && _a !== void 0 ? _a : idx;
9
+ const label = isElement(child) && child.props.label;
10
+ const hidden = isElement(child) && child.props.hidden;
11
+ if (label && !hidden) {
12
+ acc.steps[index] = label;
13
+ }
14
+ if (index === activeIndex) {
15
+ acc.innerContents = child;
16
+ }
17
+ return acc;
18
+ }, {
19
+ steps: [],
20
+ innerContents: null,
21
+ });
22
+ return (React.createElement(Flex, Object.assign({ flex: 1, flexDirection: "column" }, extraContainerProps),
23
+ header &&
24
+ header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length })),
25
+ React.createElement(Flex, Object.assign({ my: 8, justifyContent: "center" }, extraStepperContainerProps),
26
+ React.createElement(Stepper, Object.assign({ activeIndex: activeIndex, steps: steps, flex: 1 }, extraStepperProps))),
27
+ React.createElement(Flex, { flex: 1, flexDirection: "column", position: "relative" }, renderChildren ? renderChildren({ children: innerContents }) : innerContents),
28
+ footer &&
29
+ footer(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length }))));
30
+ }
31
+ function Step({ children }) {
32
+ return React.createElement(React.Fragment, null, children);
33
+ }
34
+ FlowStepper.Step = Step;
35
+ export default FlowStepper;
@@ -3,3 +3,4 @@ export { default as Breadcrumb } from "./Breadcrumb";
3
3
  export { default as Header } from "./Header";
4
4
  export * from "./progress";
5
5
  export { default as SideBar } from "./sideBar/SideBar";
6
+ export { default as FlowStepper } from "./FlowStepper";
@@ -3,3 +3,4 @@ export { default as Breadcrumb } from "./Breadcrumb";
3
3
  export { default as Header } from "./Header";
4
4
  export * from "./progress";
5
5
  export { default as SideBar } from "./sideBar/SideBar";
6
+ export { default as FlowStepper } from "./FlowStepper";
@@ -1,10 +1,21 @@
1
1
  import React from "react";
2
2
  import { BorderProps, ColorProps, SpaceProps } from "styled-system";
3
- export interface Props {
3
+ import { FlexBoxProps } from "../../../layout/Flex";
4
+ /**
5
+ * The state of a progress bar step.
6
+ */
7
+ export declare type StepState = "pending" | "current" | "completed" | "errored" | "disabled";
8
+ declare type LabelType = string | React.ComponentType<{
9
+ state: StepState;
10
+ }>;
11
+ export interface Props extends FlexBoxProps {
4
12
  /**
5
13
  * An array of labels that will determine the progress bar steps.
14
+ * A label is either a string or a component that will be rendered with the
15
+ * prop `state: "pending" | "current" | "completed" | "errored"`.
16
+ * A styled StepText component is exported to allow easy styling of such a custom label.
6
17
  */
7
- steps: string[];
18
+ steps: LabelType[];
8
19
  /**
9
20
  * Index of the active step, starting at zero and defaulting to 0 if omitted.
10
21
  */
@@ -13,20 +24,22 @@ export interface Props {
13
24
  * If true the current step is considered as a failure.
14
25
  */
15
26
  errored?: boolean;
27
+ /**
28
+ * Steps with indexes contained inside the array will be shown as disabled.
29
+ */
30
+ disabledIndexes?: number[];
16
31
  }
17
- /**
18
- * The state of a progress bar step.
19
- */
20
- declare type StepState = "pending" | "current" | "completed" | "errored";
21
32
  export declare type StepProps = {
22
33
  /**
23
34
  * State of the step.
24
35
  */
25
36
  state: StepState;
26
37
  /**
27
- * The label to display.
38
+ * The label to display. To display more than text, this can be a component that will be rendered with the
39
+ * prop `state: "pending" | "current" | "completed" | "errored" | "disabled"`.
40
+ * A styled StepText component is exported to allow easy styling of such a custom Label
28
41
  */
29
- label: string;
42
+ label: LabelType;
30
43
  /**
31
44
  * If true, hides the left "separator" bar that bridges the gap between the wider separator and the item.
32
45
  */
@@ -48,9 +61,13 @@ export declare const Item: {
48
61
  backgroundColor: string;
49
62
  } & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "backgroundColor">;
50
63
  Completed: () => JSX.Element;
64
+ Disabled: () => JSX.Element;
51
65
  Errored: () => JSX.Element;
52
66
  };
67
+ export declare const StepText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../../asorted/Text").TextProps & {
68
+ state: StepState;
69
+ }, keyof import("../../../asorted/Text").TextProps>;
53
70
  export declare const Step: React.NamedExoticComponent<StepProps>;
54
- declare function ProgressSteps({ steps, activeIndex, errored }: Props): JSX.Element;
55
- declare const _default: React.MemoExoticComponent<typeof ProgressSteps>;
71
+ declare function Stepper({ steps, activeIndex, errored, disabledIndexes, ...extraProps }: Props): JSX.Element;
72
+ declare const _default: React.MemoExoticComponent<typeof Stepper>;
56
73
  export default _default;
@@ -1,8 +1,18 @@
1
- import React, { memo } from "react";
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import React, { memo, Fragment } from "react";
2
13
  import styled from "styled-components";
3
14
  import { border, color, space } from "styled-system";
4
- import CheckAlone from "@ledgerhq/icons-ui/react/CheckAloneMedium";
5
- import CloseMedium from "@ledgerhq/icons-ui/react/CloseMedium";
15
+ import { Icons } from "../../../../index";
6
16
  import Text from "../../../asorted/Text";
7
17
  import Flex from "../../../layout/Flex";
8
18
  export const Item = {
@@ -39,15 +49,19 @@ export const Item = {
39
49
  border-radius: ${(p) => p.theme.space[2]}px;
40
50
  ${color}
41
51
  `,
42
- Completed: () => React.createElement(CheckAlone, { size: 16 }),
43
- Errored: () => React.createElement(CloseMedium, { size: 16 }),
52
+ Completed: () => React.createElement(Icons.CheckAloneMedium, { size: 16 }),
53
+ Disabled: () => React.createElement(Icons.CloseMedium, { size: 16 }),
54
+ Errored: () => React.createElement(Icons.CloseMedium, { size: 16 }),
44
55
  };
45
- const StepText = styled(Text) `
56
+ export const StepText = styled(Text) `
46
57
  color: ${(p) => {
47
- if (p.errored) {
58
+ if (p.state === "errored") {
48
59
  return p.theme.colors.error.c100;
49
60
  }
50
- if (p.inactive) {
61
+ if (p.state === "disabled") {
62
+ return p.theme.colors.neutral.c50;
63
+ }
64
+ if (p.state === "pending") {
51
65
  return p.theme.colors.neutral.c70;
52
66
  }
53
67
  return p.theme.colors.neutral.c100;
@@ -74,19 +88,23 @@ const stepContentsByState = {
74
88
  React.createElement(Item.Completed, null))),
75
89
  errored: (React.createElement(Item.Container, { color: "error.c100", backgroundColor: "warning.c30", borderRadius: "8px" },
76
90
  React.createElement(Item.Errored, null))),
91
+ disabled: (React.createElement(Item.Container, { color: "neutral.c50" },
92
+ React.createElement(Item.Disabled, null))),
77
93
  };
78
- export const Step = memo(function Step({ state, label, hideLeftSeparator, nextState, }) {
94
+ export const Step = memo(function Step({ state, label: Label, hideLeftSeparator, nextState, }) {
79
95
  const inactive = state === "pending";
80
- const nextInactive = nextState === "pending";
81
- const errored = state === "errored";
96
+ const nextInactive = state === "pending";
82
97
  return (React.createElement(Flex, { flexDirection: "column", alignItems: "center" },
83
98
  React.createElement(Item.Spacer, { mb: 5 },
84
99
  (!hideLeftSeparator && React.createElement(Separator.Item, { inactive: inactive, position: "left" })) || (React.createElement(Flex, { flex: "1" })),
85
100
  stepContentsByState[state],
86
101
  (nextState && React.createElement(Separator.Item, { inactive: nextInactive, position: "right" })) || (React.createElement(Flex, { flex: "1" }))),
87
- React.createElement(StepText, { inactive: inactive, errored: errored, variant: "small" }, label)));
102
+ typeof Label === "string" ? (React.createElement(StepText, { state: state, variant: "small" }, Label)) : (React.createElement(Label, { state: state }))));
88
103
  });
89
- function getState(activeIndex, index, errored) {
104
+ function getState(activeIndex, index, errored, disabled) {
105
+ if (disabled) {
106
+ return "disabled";
107
+ }
90
108
  if (activeIndex < index) {
91
109
  return "pending";
92
110
  }
@@ -95,13 +113,14 @@ function getState(activeIndex, index, errored) {
95
113
  }
96
114
  return "completed";
97
115
  }
98
- function ProgressSteps({ steps, activeIndex = 0, errored }) {
99
- return (React.createElement(Flex, { flexWrap: "nowrap", justifyContent: "space-between" }, steps.map((step, idx) => {
100
- const state = getState(activeIndex, idx, errored);
116
+ function Stepper(_a) {
117
+ var { steps, activeIndex = 0, errored, disabledIndexes } = _a, extraProps = __rest(_a, ["steps", "activeIndex", "errored", "disabledIndexes"]);
118
+ return (React.createElement(Flex, Object.assign({ flexWrap: "nowrap", justifyContent: "space-between" }, extraProps), steps.map((step, idx) => {
119
+ const state = getState(activeIndex, idx, errored, disabledIndexes === null || disabledIndexes === void 0 ? void 0 : disabledIndexes.includes(idx));
101
120
  const nextState = idx < steps.length - 1 ? getState(activeIndex, idx + 1) : undefined;
102
- return (React.createElement(React.Fragment, null,
121
+ return (React.createElement(Fragment, { key: idx },
103
122
  idx > 0 && React.createElement(Separator.Step, { inactive: state === "pending" }),
104
123
  React.createElement(Step, { label: step, state: state, nextState: nextState, hideLeftSeparator: idx === 0 })));
105
124
  })));
106
125
  }
107
- export default memo(ProgressSteps);
126
+ export default memo(Stepper);
@@ -11,24 +11,26 @@ const Nav = styled(Flex) `
11
11
  padding: ${(p) => `${p.theme.space[19]}px ${p.theme.space[5]}px 0`};
12
12
  row-gap: 1.5rem;
13
13
  height: 100vh;
14
- max-width: 14.875rem;
14
+ width: 14.875rem;
15
15
  color: ${(props) => props.theme.colors.neutral.c100};
16
16
  border-right: 1px solid ${(props) => props.theme.colors.neutral.c40};
17
17
  background-color: ${(props) => props.theme.colors.background.main};
18
- transition: max-width 200ms;
19
- will-change: max-width;
18
+ transition: width 200ms;
19
+ will-change: width;
20
+ flex-shrink: 0;
21
+ z-index: ${(p) => p.theme.zIndexes[2]};
20
22
 
21
23
  &.nav-enter {
22
- max-width: ${(p) => p.theme.space[19]}px;
24
+ width: ${(p) => p.theme.space[19]}px;
23
25
  }
24
26
  &.nav-enter-done {
25
- max-width: 14.875rem;
27
+ width: 14.875rem;
26
28
  }
27
29
  &.nav-exit {
28
- max-width: 14.875rem;
30
+ width: 14.875rem;
29
31
  }
30
32
  &.nav-exit-done {
31
- max-width: ${(p) => `${p.theme.space[19]}px`};
33
+ width: ${(p) => `${p.theme.space[19]}px`};
32
34
  }
33
35
  `;
34
36
  const TransparentMouseZone = styled.div `
package/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export * from "./components";
2
2
  export * from "./assets";
3
- export { StyleProvider } from "./styles";
3
+ export { StyleProvider, InvertTheme } from "./styles";
package/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  export * from "./components";
2
2
  export * from "./assets";
3
- export { StyleProvider } from "./styles";
3
+ export { StyleProvider, InvertTheme } from "./styles";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ledgerhq/react-ui",
3
3
  "description": "Ledger Live - Desktop UI",
4
- "version": "0.5.0",
4
+ "version": "0.7.2",
5
5
  "author": "Ledger Live Team <team-live@ledger.fr>",
6
6
  "repository": "https://github.com/LedgerHQ/ui",
7
7
  "license": "MIT",
@@ -27,13 +27,13 @@
27
27
  "index.js"
28
28
  ],
29
29
  "dependencies": {
30
- "@ledgerhq/icons-ui": "^0.2.0",
31
- "@ledgerhq/ui-shared": "^0.1.3",
30
+ "@floating-ui/react-dom": "^0.4.0",
31
+ "@ledgerhq/icons-ui": "^0.2.2",
32
+ "@ledgerhq/ui-shared": "^0.1.5",
32
33
  "@tippyjs/react": "^4.2.6",
33
34
  "@types/color": "^3.0.2",
34
35
  "@types/react": "~17.0.37",
35
36
  "@types/react-dom": "^17.0.11",
36
- "@types/react-select": "^4.0.18",
37
37
  "@types/react-transition-group": "^4.4.2",
38
38
  "@types/react-window": "^1.8.5",
39
39
  "@types/styled-components": "^5.1.14",
@@ -44,7 +44,7 @@
44
44
  "moment": "^2.29.1",
45
45
  "react-chartjs-2": "^3.0.5",
46
46
  "react-is": "^17.0.2",
47
- "react-select": "^3.2.0",
47
+ "react-select": "^5.2.1",
48
48
  "react-transition-group": "^4.4.2",
49
49
  "react-window": "^1.8.6",
50
50
  "styled-system": "^5.1.5"
@@ -1,2 +1,5 @@
1
1
  import React from "react";
2
- export declare const InvertTheme: ({ children }: React.PropsWithChildren<unknown>) => React.ReactElement;
2
+ export declare type Props = {
3
+ if?: boolean;
4
+ };
5
+ export declare const InvertTheme: ({ if: condition, children, }: React.PropsWithChildren<Props>) => React.ReactElement;
@@ -2,9 +2,9 @@ import React, { useMemo } from "react";
2
2
  import { ThemeProvider, useTheme } from "styled-components";
3
3
  import { defaultTheme } from ".";
4
4
  import { palettes } from "@ledgerhq/ui-shared";
5
- export const InvertTheme = ({ children }) => {
6
- const { theme } = useTheme();
7
- const revertTheme = theme === "light" ? "dark" : "light";
8
- const newTheme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, defaultTheme.colors), { palette: palettes[revertTheme] }), theme: revertTheme })), [revertTheme]);
9
- return React.createElement(ThemeProvider, { theme: newTheme }, children);
5
+ export const InvertTheme = ({ if: condition, children, }) => {
6
+ const theme = useTheme();
7
+ const revertTheme = theme.theme === "light" ? "dark" : "light";
8
+ const newTheme = useMemo(() => (Object.assign(Object.assign({}, defaultTheme), { colors: Object.assign(Object.assign({}, palettes[revertTheme]), { palette: palettes[revertTheme] }), theme: revertTheme })), [revertTheme]);
9
+ return React.createElement(ThemeProvider, { theme: condition ? newTheme : theme }, children);
10
10
  };
package/styles/index.d.ts CHANGED
@@ -2,5 +2,6 @@ export { default as defaultTheme } from "./theme";
2
2
  export * from "./helpers";
3
3
  export * from "./global";
4
4
  export * from "./StyleProvider";
5
+ export { InvertTheme } from "./InvertTheme";
5
6
  export type { ThemeNames, ColorPalette } from "@ledgerhq/ui-shared";
6
7
  export { palettes } from "@ledgerhq/ui-shared";
package/styles/index.js CHANGED
@@ -2,4 +2,5 @@ export { default as defaultTheme } from "./theme";
2
2
  export * from "./helpers";
3
3
  export * from "./global";
4
4
  export * from "./StyleProvider";
5
+ export { InvertTheme } from "./InvertTheme";
5
6
  export { palettes } from "@ledgerhq/ui-shared";
package/styles/theme.d.ts CHANGED
@@ -45,7 +45,7 @@ export declare const fontFamilies: {
45
45
  };
46
46
  };
47
47
  };
48
- declare const transition: (properties?: string[]) => FlattenSimpleInterpolation;
48
+ declare const transition: (properties?: string[], duration?: string, easing?: string) => FlattenSimpleInterpolation;
49
49
  declare const animations: {
50
50
  fadeIn: () => FlattenSimpleInterpolation;
51
51
  fadeOut: () => FlattenSimpleInterpolation;
package/styles/theme.js CHANGED
@@ -76,14 +76,14 @@ export const fontFamilies = {
76
76
  },
77
77
  },
78
78
  };
79
- const animationLength = "0.33s";
79
+ const animationDuration = "0.33s";
80
80
  const easings = {
81
81
  outQuadratic: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
82
82
  };
83
- const transition = (properties = ["all"]) => css `
83
+ const transition = (properties = ["all"], duration = animationDuration, easing = easings.outQuadratic) => css `
84
84
  transition-property: ${properties.join(",")};
85
- transition-duration: ${animationLength};
86
- transition-timing-function: ${easings.outQuadratic};
85
+ transition-duration: ${duration};
86
+ transition-timing-function: ${easing};
87
87
  `;
88
88
  const fadeIn = keyframes `
89
89
  0% {
@@ -123,16 +123,16 @@ const fadeInUp = keyframes `
123
123
  `;
124
124
  const animations = {
125
125
  fadeIn: () => css `
126
- ${fadeIn} ${animationLength} ${easings.outQuadratic} forwards
126
+ ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards
127
127
  `,
128
128
  fadeOut: () => css `
129
- ${fadeOut} ${animationLength} ${easings.outQuadratic} forwards
129
+ ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards
130
130
  `,
131
131
  fadeInGrowX: () => css `
132
132
  ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards
133
133
  `,
134
134
  fadeInUp: () => css `
135
- ${fadeInUp} ${animationLength} ${easings.outQuadratic} forwards
135
+ ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards
136
136
  `,
137
137
  };
138
138
  const overflow = {
@@ -1,2 +0,0 @@
1
- declare const _default: "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";
2
- export default _default;
@@ -1 +0,0 @@
1
- export default "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";