@transferwise/components 45.17.1 → 45.18.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/build/index.esm.js +339 -293
- package/build/index.esm.js.map +1 -1
- package/build/index.js +339 -292
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/inputs/SelectInput.css +1 -1
- package/build/styles/instructionsList/InstructionsList.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/stepper/Stepper.css +1 -1
- package/build/styles/tooltip/Tooltip.css +1 -1
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/common/polymorphicWithOverrides/PolymorphicWithOverrides.d.ts +13 -0
- package/build/types/common/polymorphicWithOverrides/PolymorphicWithOverrides.d.ts.map +1 -0
- package/build/types/index.d.ts +1 -1
- package/build/types/index.d.ts.map +1 -1
- package/build/types/inputs/SelectInput.d.ts +16 -6
- package/build/types/inputs/SelectInput.d.ts.map +1 -1
- package/build/types/instructionsList/InstructionsList.d.ts +10 -3
- package/build/types/instructionsList/InstructionsList.d.ts.map +1 -1
- package/build/types/processIndicator/ProcessIndicator.d.ts +1 -1
- package/build/types/tooltip/Tooltip.d.ts +2 -1
- package/build/types/tooltip/Tooltip.d.ts.map +1 -1
- package/package.json +4 -3
- package/src/button/Button.story.tsx +6 -0
- package/src/button/Button.tsx +6 -1
- package/src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx +19 -0
- package/src/index.ts +3 -0
- package/src/inputs/SelectInput.css +1 -1
- package/src/inputs/SelectInput.less +8 -2
- package/src/inputs/SelectInput.story.tsx +52 -5
- package/src/inputs/SelectInput.tsx +165 -104
- package/src/inputs/_Popover.less +1 -1
- package/src/instructionsList/InstructionList.story.tsx +39 -0
- package/src/instructionsList/InstructionsList.css +1 -1
- package/src/instructionsList/InstructionsList.less +3 -15
- package/src/instructionsList/InstructionsList.spec.tsx +35 -0
- package/src/instructionsList/InstructionsList.tsx +40 -25
- package/src/main.css +1 -1
- package/src/processIndicator/ProcessIndicator.js +2 -2
- package/src/stepper/Stepper.css +1 -1
- package/src/stepper/Stepper.less +1 -1
- package/src/tooltip/Tooltip.css +1 -1
- package/src/tooltip/Tooltip.less +13 -0
- package/src/tooltip/Tooltip.spec.tsx +97 -29
- package/src/tooltip/Tooltip.tsx +24 -31
- package/src/tooltip/__snapshots__/Tooltip.spec.tsx.snap +31 -0
- package/src/instructionsList/InstructionList.story.js +0 -27
- package/src/instructionsList/InstructionsList.spec.js +0 -29
|
@@ -1 +1 @@
|
|
|
1
|
-
.tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left;margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}
|
|
1
|
+
.tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:inline-block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left;margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tw-tooltip-container{display:inline-block}.tw-tooltip-container .tooltip{-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:visible}.tw-tooltip-container .tooltip:not(.in){animation:tw-tooltip-disappear;animation-delay:.15s;animation-duration:0s;animation-fill-mode:both;pointer-events:none}@keyframes tw-tooltip-disappear{0%{visibility:visible}to{visibility:hidden}}.np-tooltip{z-index:1070}.np-panel[data-popper-placement^=right]>.np-panel__content.tooltip-inner .np-panel__arrow{left:-7px}.np-panel[data-popper-placement^=left]>.np-panel__content.tooltip-inner .np-panel__arrow{right:-7px}
|
|
1
|
+
.tw-tooltip-container{display:inline-block}.tw-tooltip-container .tooltip{-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:visible}.tw-tooltip-container .tooltip:not(.in){animation:tw-tooltip-disappear;animation-delay:.15s;animation-duration:0s;animation-fill-mode:both;pointer-events:none}@keyframes tw-tooltip-disappear{0%{visibility:visible}to{visibility:hidden}}.np-tooltip{z-index:1070}.np-tooltip,.np-tooltip .tooltip-inner{visibility:hidden}.np-tooltip--open,.np-tooltip--open .tooltip-inner{visibility:initial}.np-panel[data-popper-placement^=right]>.np-panel__content.tooltip-inner .np-panel__arrow{left:-7px}.np-panel[data-popper-placement^=left]>.np-panel__content.tooltip-inner .np-panel__arrow{right:-7px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAG5F,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACV,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAG5F,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACV,MAAM,WAAW,CAAC;AAOnB,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,CAAC;IACvF,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAAG;IACtD,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,oBAAoB,CAAC,iBAAiB,CAAC,GACvC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG;IACxB,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,WAAW,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAExE,QAAA,MAAM,MAAM,uGA4EX,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface PolymorphicWithOverridesProps {
|
|
3
|
+
__overrides: {
|
|
4
|
+
as: React.ElementType;
|
|
5
|
+
[key: string]: unknown;
|
|
6
|
+
};
|
|
7
|
+
[key: string]: unknown;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* For overcoming the limitations of third-party components with an `as` prop.
|
|
11
|
+
*/
|
|
12
|
+
export declare const PolymorphicWithOverrides: import("react").ForwardRefExoticComponent<Omit<PolymorphicWithOverridesProps, "ref"> & import("react").RefAttributes<Element>>;
|
|
13
|
+
//# sourceMappingURL=PolymorphicWithOverrides.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PolymorphicWithOverrides.d.ts","sourceRoot":"","sources":["../../../../src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,6BAA6B;IAC5C,WAAW,EAAE;QACX,EAAE,EAAE,KAAK,CAAC,WAAW,CAAC;QACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,gIAKnC,CAAC"}
|
package/build/types/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
export type { InputProps } from './inputs/Input';
|
|
5
5
|
export type { InputGroupProps } from './inputs/InputGroup';
|
|
6
6
|
export type { SearchInputProps } from './inputs/SearchInput';
|
|
7
|
-
export type { SelectInputItem, SelectInputOptionContentProps, SelectInputProps, } from './inputs/SelectInput';
|
|
7
|
+
export type { SelectInputGroupItem, SelectInputItem, SelectInputOptionContentProps, SelectInputOptionItem, SelectInputProps, SelectInputSeparatorItem, } from './inputs/SelectInput';
|
|
8
8
|
export type { TextAreaProps } from './inputs/TextArea';
|
|
9
9
|
export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
|
|
10
10
|
export type { ModalProps } from './modal';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EACV,eAAe,EACf,6BAA6B,EAC7B,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
interface SelectInputOptionItem<T = string> {
|
|
2
|
+
export interface SelectInputOptionItem<T = string> {
|
|
3
3
|
type: 'option';
|
|
4
4
|
value: T;
|
|
5
5
|
filterMatchers?: readonly string[];
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
}
|
|
8
|
-
interface SelectInputGroupItem<T = string> {
|
|
8
|
+
export interface SelectInputGroupItem<T = string> {
|
|
9
9
|
type: 'group';
|
|
10
10
|
label: string;
|
|
11
11
|
options: readonly SelectInputOptionItem<T>[];
|
|
12
12
|
}
|
|
13
|
-
interface SelectInputSeparatorItem {
|
|
13
|
+
export interface SelectInputSeparatorItem {
|
|
14
14
|
type: 'separator';
|
|
15
15
|
}
|
|
16
16
|
export type SelectInputItem<T = string> = SelectInputOptionItem<T> | SelectInputGroupItem<T> | SelectInputSeparatorItem;
|
|
@@ -20,8 +20,15 @@ export interface SelectInputProps<T = string> {
|
|
|
20
20
|
items: readonly SelectInputItem<NonNullable<T>>[];
|
|
21
21
|
defaultValue?: T;
|
|
22
22
|
value?: T;
|
|
23
|
-
renderValue?: (value: NonNullable<T>, compact: boolean) => React.ReactNode;
|
|
24
23
|
compareValues?: (keyof NonNullable<T> & string) | ((a: T | undefined, b: T | undefined) => boolean);
|
|
24
|
+
renderValue?: (value: NonNullable<T>, withinTrigger: boolean) => React.ReactNode;
|
|
25
|
+
renderTrigger?: (args: {
|
|
26
|
+
content: React.ReactNode;
|
|
27
|
+
placeholderShown: boolean;
|
|
28
|
+
clear: (() => void) | undefined;
|
|
29
|
+
disabled: boolean;
|
|
30
|
+
className: string | undefined;
|
|
31
|
+
}) => React.ReactNode;
|
|
25
32
|
filterable?: boolean;
|
|
26
33
|
filterPlaceholder?: string;
|
|
27
34
|
disabled?: boolean;
|
|
@@ -29,7 +36,11 @@ export interface SelectInputProps<T = string> {
|
|
|
29
36
|
onChange?: (value: T) => void;
|
|
30
37
|
onClear?: () => void;
|
|
31
38
|
}
|
|
32
|
-
export declare function SelectInput<T>({ name, placeholder, items, defaultValue, value: controlledValue, renderValue,
|
|
39
|
+
export declare function SelectInput<T = string>({ name, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderTrigger, filterable, filterPlaceholder, disabled, className, onChange, onClear, }: SelectInputProps<T>): import("react").JSX.Element;
|
|
40
|
+
export type SelectInputTriggerButtonProps<T extends React.ComponentType | 'button' = 'button'> = {
|
|
41
|
+
as?: T;
|
|
42
|
+
} & React.ComponentPropsWithoutRef<T>;
|
|
43
|
+
export declare function SelectInputTriggerButton<T extends React.ComponentType | 'button' = 'button'>({ as, ...restProps }: SelectInputTriggerButtonProps<T>): import("react").JSX.Element;
|
|
33
44
|
export interface SelectInputOptionContentProps {
|
|
34
45
|
title: string;
|
|
35
46
|
note?: string;
|
|
@@ -37,5 +48,4 @@ export interface SelectInputOptionContentProps {
|
|
|
37
48
|
icon?: React.ReactNode;
|
|
38
49
|
}
|
|
39
50
|
export declare function SelectInputOptionContent({ title, note, description, icon, }: SelectInputOptionContentProps): import("react").JSX.Element;
|
|
40
|
-
export {};
|
|
41
51
|
//# sourceMappingURL=SelectInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":";AAgDA,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,MAAM;IAC/C,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,CAAC,CAAC;IACT,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,MAAM;IAC9C,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;CAC9C;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAClC,qBAAqB,CAAC,CAAC,CAAC,GACxB,oBAAoB,CAAC,CAAC,CAAC,GACvB,wBAAwB,CAAC;AAuC7B,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,KAAK,EAAE,SAAS,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,aAAa,CAAC,EACV,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAC/B,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,CAAC,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,gBAAgB,EAAE,OAAO,CAAC;QAC1B,KAAK,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;QAChC,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;KAC/B,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAqDD,wBAAgB,WAAW,CAAC,CAAC,GAAG,MAAM,EAAE,EACtC,IAAI,EACJ,WAAW,EACX,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAA4B,EAC5B,aAAoC,EACpC,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BAsFrB;AAED,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,KAAK,CAAC,aAAa,GAAG,QAAQ,GAAG,QAAQ,IAAI;IAC/F,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAEtC,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,KAAK,CAAC,aAAa,GAAG,QAAQ,GAAG,QAAQ,EAAE,EAC5F,EAAkB,EAClB,GAAG,SAAS,EACb,EAAE,6BAA6B,CAAC,CAAC,CAAC,+BAWlC;AAwQD,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,IAAI,EACJ,WAAW,EACX,IAAI,GACL,EAAE,6BAA6B,+BA4C/B"}
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { CommonProps } from '../common';
|
|
3
|
-
type
|
|
3
|
+
type InstructionNode = {
|
|
4
|
+
content: ReactNode;
|
|
5
|
+
['aria-label']: string;
|
|
6
|
+
};
|
|
7
|
+
type Props = CommonProps & ({
|
|
4
8
|
dos?: ReactNode[];
|
|
5
9
|
donts?: ReactNode[];
|
|
6
|
-
}
|
|
7
|
-
|
|
10
|
+
} | {
|
|
11
|
+
dos?: InstructionNode[];
|
|
12
|
+
donts?: InstructionNode[];
|
|
13
|
+
});
|
|
14
|
+
declare const InstructionsList: ({ dos, donts }: Props) => import("react").JSX.Element;
|
|
8
15
|
export default InstructionsList;
|
|
9
16
|
//# sourceMappingURL=InstructionsList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAc,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,KAAK,GAAG,WAAW,GACtB,CACI;IACE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,GACD;IACE,GAAG,CAAC,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B,CACJ,CAAC;AAEJ,QAAA,MAAM,gBAAgB,mBAAoB,KAAK,gCAe9C,CAAC;AAsBF,eAAe,gBAAgB,CAAC"}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
|
|
3
3
|
export type ProcessIndicatorStatus = "processing" | "failed" | "succeeded" | "hidden";
|
|
4
4
|
|
|
5
|
-
export type ProcessIndicatorSize = "xs" | "sm" | "xl";
|
|
5
|
+
export type ProcessIndicatorSize = "xxs" | "xs" | "sm" | "xl";
|
|
6
6
|
|
|
7
7
|
export interface ProcessIndicatorProps {
|
|
8
8
|
status?: ProcessIndicatorStatus;
|
|
@@ -4,7 +4,8 @@ import { PositionBottom, PositionLeft, PositionRight, PositionTop } from '../com
|
|
|
4
4
|
type Props = PropsWithChildren<{
|
|
5
5
|
position?: PositionTop | PositionRight | PositionBottom | PositionLeft;
|
|
6
6
|
label: ReactNode;
|
|
7
|
+
id?: string;
|
|
7
8
|
}> & CommonProps;
|
|
8
|
-
declare const Tooltip: ({ position, children, label, className, }: Props) => ReactElement;
|
|
9
|
+
declare const Tooltip: ({ position, children, label, id, className, }: Props) => ReactElement;
|
|
9
10
|
export default Tooltip;
|
|
10
11
|
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,EAKL,SAAS,EACT,YAAY,EACZ,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,WAAW,EAAY,MAAM,WAAW,CAAC;AAClD,OAAO,EACL,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,EACZ,MAAM,gCAAgC,CAAC;AAExC,KAAK,KAAK,GAAG,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IACvE,KAAK,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,GACA,WAAW,CAAC;AAEd,QAAA,MAAM,OAAO,kDAMV,KAAK,KAAG,YAsFV,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "45.
|
|
3
|
+
"version": "45.18.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -78,12 +78,12 @@
|
|
|
78
78
|
"rollup": "^3.28.1",
|
|
79
79
|
"storybook": "^7.4.5",
|
|
80
80
|
"@transferwise/less-config": "3.0.6",
|
|
81
|
-
"@transferwise/neptune-css": "14.6.
|
|
81
|
+
"@transferwise/neptune-css": "14.6.2",
|
|
82
82
|
"@wise/components-theming": "0.8.4"
|
|
83
83
|
},
|
|
84
84
|
"peerDependencies": {
|
|
85
85
|
"@transferwise/icons": "^3.7.0",
|
|
86
|
-
"@transferwise/neptune-css": "^14.6.
|
|
86
|
+
"@transferwise/neptune-css": "^14.6.2",
|
|
87
87
|
"@wise/art": "^2.7.0",
|
|
88
88
|
"@wise/components-theming": "^0.8.4",
|
|
89
89
|
"currency-flags": "^4.0.2",
|
|
@@ -117,6 +117,7 @@
|
|
|
117
117
|
"lodash.difference": "^4.5.0",
|
|
118
118
|
"lodash.throttle": "^4.1.1",
|
|
119
119
|
"lodash.topairs": "^4.3.0",
|
|
120
|
+
"merge-props": "^6.0.0",
|
|
120
121
|
"prop-types": "^15.7.2",
|
|
121
122
|
"react-merge-refs": "^1.1.0",
|
|
122
123
|
"react-popper": "^2.2.4",
|
|
@@ -74,6 +74,12 @@ export const Variants = storyConfig<Story>(
|
|
|
74
74
|
<Button {...args} priority={Priority.SECONDARY} disabled />
|
|
75
75
|
<Button {...args} priority={Priority.TERTIARY} disabled />
|
|
76
76
|
</div>
|
|
77
|
+
<div className="m-b-2">
|
|
78
|
+
<div className="title-4 m-b-1">Loading</div>
|
|
79
|
+
<Button {...args} priority={Priority.PRIMARY} loading />
|
|
80
|
+
<Button {...args} priority={Priority.SECONDARY} loading />
|
|
81
|
+
<Button {...args} priority={Priority.TERTIARY} loading />
|
|
82
|
+
</div>
|
|
77
83
|
</>
|
|
78
84
|
);
|
|
79
85
|
},
|
package/src/button/Button.tsx
CHANGED
|
@@ -18,6 +18,7 @@ import {
|
|
|
18
18
|
SizeLarge,
|
|
19
19
|
LinkProps,
|
|
20
20
|
} from '../common';
|
|
21
|
+
import ProcessIndicator from '../processIndicator';
|
|
21
22
|
|
|
22
23
|
import messages from './Button.messages';
|
|
23
24
|
import { typeClassMap, priorityClassMap } from './classMap';
|
|
@@ -101,6 +102,10 @@ const Button = forwardRef<ButtonReferenceType, Props>(
|
|
|
101
102
|
className,
|
|
102
103
|
);
|
|
103
104
|
|
|
105
|
+
function processIndicatorSize(): string {
|
|
106
|
+
return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';
|
|
107
|
+
}
|
|
108
|
+
|
|
104
109
|
const Element = (component as ElementType) ?? 'button';
|
|
105
110
|
let props;
|
|
106
111
|
|
|
@@ -124,7 +129,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
|
|
|
124
129
|
aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : undefined}
|
|
125
130
|
>
|
|
126
131
|
{children}
|
|
127
|
-
{loading && <
|
|
132
|
+
{loading && <ProcessIndicator size={processIndicatorSize()} className="btn-loader" />}
|
|
128
133
|
</Element>
|
|
129
134
|
);
|
|
130
135
|
},
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface PolymorphicWithOverridesProps {
|
|
4
|
+
__overrides: {
|
|
5
|
+
as: React.ElementType;
|
|
6
|
+
[key: string]: unknown;
|
|
7
|
+
};
|
|
8
|
+
[key: string]: unknown;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* For overcoming the limitations of third-party components with an `as` prop.
|
|
13
|
+
*/
|
|
14
|
+
export const PolymorphicWithOverrides = forwardRef(function PolymorphicWithOverrides(
|
|
15
|
+
{ __overrides: { as: Element, ...restOverrides }, ...restProps }: PolymorphicWithOverridesProps,
|
|
16
|
+
ref: React.ForwardedRef<Element>,
|
|
17
|
+
) {
|
|
18
|
+
return <Element ref={ref} {...restProps} {...restOverrides} />;
|
|
19
|
+
});
|
package/src/index.ts
CHANGED
|
@@ -5,9 +5,12 @@ export type { InputProps } from './inputs/Input';
|
|
|
5
5
|
export type { InputGroupProps } from './inputs/InputGroup';
|
|
6
6
|
export type { SearchInputProps } from './inputs/SearchInput';
|
|
7
7
|
export type {
|
|
8
|
+
SelectInputGroupItem,
|
|
8
9
|
SelectInputItem,
|
|
9
10
|
SelectInputOptionContentProps,
|
|
11
|
+
SelectInputOptionItem,
|
|
10
12
|
SelectInputProps,
|
|
13
|
+
SelectInputSeparatorItem,
|
|
11
14
|
} from './inputs/SelectInput';
|
|
12
15
|
export type { TextAreaProps } from './inputs/TextArea';
|
|
13
16
|
export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width
|
|
1
|
+
.np-bottom-sheet-v2-container{position:relative;z-index:1060}.np-bottom-sheet-v2-backdrop-container--enter,.np-bottom-sheet-v2-backdrop-container--leave{transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out}.np-bottom-sheet-v2-backdrop-container--enter-from,.np-bottom-sheet-v2-backdrop-container--leave-to{opacity:0}.np-bottom-sheet-v2-backdrop{background-color:#37517e;background-color:var(--color-content-primary);inset:0;opacity:.4;position:fixed}.np-bottom-sheet-v2{display:flex;flex-direction:column;inset:0;justify-content:flex-end;padding-left:8px;padding-left:var(--size-8);padding-right:8px;padding-right:var(--size-8);padding-top:64px;padding-top:var(--size-64);position:fixed}.np-bottom-sheet-v2-content{max-height:100%}.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-duration:.3s;transition-property:transform;transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter,.np-bottom-sheet-v2-content--leave{transition-property:opacity}}@media (prefers-reduced-motion:no-preference){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.np-bottom-sheet-v2-content--enter-from,.np-bottom-sheet-v2-content--leave-to{opacity:0}}.np-bottom-sheet-v2-content-inner-container{background-color:#fff;background-color:var(--color-background-elevated);border-top-left-radius:32px;border-top-right-radius:32px;box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;height:100%}.np-bottom-sheet-v2-content-inner-container:focus{outline:none}.np-bottom-sheet-v2-header{align-self:flex-end;padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-content-inner{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;padding-top:0;row-gap:8px;row-gap:var(--size-8)}.np-bottom-sheet-v2-content-inner--has-title{grid-template-rows:auto 1fr}.np-bottom-sheet-v2-content-inner--padding-md{padding:16px;padding:var(--size-16)}.np-bottom-sheet-v2-title{color:#37517e;color:var(--color-content-primary)}.np-bottom-sheet-v2-body{color:#5d7079;color:var(--color-content-secondary)}.np-button-input{align-content:center;border-radius:10px;border-radius:var(--size-10);display:inline-grid;grid-auto-columns:minmax(0,1fr);text-align:start}.np-popover-v2-container{background-color:#fff;background-color:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 0 40px rgba(69,71,69,.2);display:flex;flex-direction:column;max-height:var(--max-height);min-width:20rem;width:var(--width);z-index:1060}.np-popover-v2-container:focus{outline:none}.np-popover-v2{display:grid;grid-template-rows:repeat(1,minmax(0,1fr));overflow-y:auto;row-gap:8px;row-gap:var(--size-8)}.np-popover-v2--has-title{grid-template-rows:auto 1fr}.np-popover-v2--padding-md{padding:16px;padding:var(--size-16)}.np-popover-v2-title{color:#37517e;color:var(--color-content-primary)}.np-popover-v2-content{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-placeholder{color:#768e9c;color:var(--color-content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-options-container{display:flex;flex-direction:column;height:100%}.np-select-input-options-container:focus{outline:none}@media (min-width:576px){.np-select-input-options-container{max-height:28rem}}.np-select-input-query-container{display:flex;flex-direction:column;padding:8px;padding:var(--size-8);padding-top:0}@media (min-width:576px){.np-select-input-query-container{padding-top:8px;padding-top:var(--size-8)}}.np-select-input-listbox-container{height:var(--initial-height);overflow-y:auto;position:relative;scroll-padding-bottom:8px;scroll-padding-bottom:var(--size-8);scroll-padding-top:8px;scroll-padding-top:var(--size-8)}@media (min-width:576px){.np-select-input-listbox-container{height:auto}}.np-select-input-listbox-container--has-group{scroll-padding-top:32px;scroll-padding-top:var(--size-32)}.np-select-input-listbox{padding:8px;padding:var(--size-8)}.np-select-input-listbox:focus{outline:none}.np-select-input-separator-item{border-top-width:1px;margin:8px;margin:var(--size-8)}.np-select-input-group-item--without-needle:first-child{margin-top:-8px;margin-top:calc(var(--size-8)*-1)}.np-select-input-group-item-header{background-color:#fff;background-color:var(--color-background-elevated);color:#5d7079;color:var(--color-content-secondary);padding:8px 16px 4px;padding:var(--size-8) var(--size-16) var(--size-4);position:sticky;top:0;z-index:10}.np-select-input-option-container{align-items:center;border-radius:10px;border-radius:var(--radius-small);color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex;padding:12px 16px;padding:var(--size-12) var(--size-16)}.np-select-input-option-container--selected{box-shadow:inset 0 0 0 1px #c9cbce;box-shadow:inset 0 0 0 1px var(--color-interactive-secondary)}.np-select-input-option-container--active{background-color:var(--color-background-screen-hover)}.np-select-input-option-container--disabled{opacity:.45}.np-select-input-option-check{color:var(--color-interactive-primary)}.np-select-input-option-check--not-selected{visibility:hidden}.np-select-input-option{flex:1}.np-select-input-option-content-container{align-items:center;color:#37517e;color:var(--color-content-primary);-moz-column-gap:8px;column-gap:8px;-moz-column-gap:var(--size-8);column-gap:var(--size-8);display:flex}.np-select-input-option-content-icon{display:flex}.np-select-input-option-content-icon--not-within-trigger{align-self:flex-start}.np-select-input-option-content-text{display:flex;flex:1;flex-direction:column;overflow:hidden}.np-select-input-option-content-text-secondary{color:#5d7079;color:var(--color-content-secondary)}.np-select-input-option-content-text-within-trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-select-input-option-content-text-line-1>:not([hidden])~:not([hidden]){margin-left:8px;margin-left:var(--size-8);margin-right:8px;margin-right:var(--size-8)}.np-select-input-addon-container{align-items:center;display:inline-flex;pointer-events:none}.np-select-input-addon{align-items:center;background:none;border-radius:.125rem;border-width:0;display:inline-flex;height:32px;height:var(--size-32);justify-content:center;width:32px;width:var(--size-32)}.np-select-input-addon--interactive{color:#c9cbce;color:var(--color-interactive-secondary);pointer-events:auto}.np-select-input-addon--interactive:hover{color:#b5b7ba;color:var(--color-interactive-secondary-hover)}.np-select-input-addon--interactive:focus{outline:none}.np-select-input-addon--interactive:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-select-input-addon-separator{border-inline-start-width:1px;height:24px;height:var(--size-24)}
|
|
@@ -93,6 +93,10 @@
|
|
|
93
93
|
padding: var(--size-12) var(--size-16);
|
|
94
94
|
color: var(--color-content-primary);
|
|
95
95
|
|
|
96
|
+
&--selected {
|
|
97
|
+
box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
|
|
98
|
+
}
|
|
99
|
+
|
|
96
100
|
&--active {
|
|
97
101
|
background-color: var(--color-background-screen-hover);
|
|
98
102
|
}
|
|
@@ -103,6 +107,8 @@
|
|
|
103
107
|
}
|
|
104
108
|
|
|
105
109
|
.np-select-input-option-check {
|
|
110
|
+
color: var(--color-interactive-primary);
|
|
111
|
+
|
|
106
112
|
&--not-selected {
|
|
107
113
|
visibility: hidden;
|
|
108
114
|
}
|
|
@@ -122,7 +128,7 @@
|
|
|
122
128
|
.np-select-input-option-content-icon {
|
|
123
129
|
display: flex;
|
|
124
130
|
|
|
125
|
-
&--not-
|
|
131
|
+
&--not-within-trigger {
|
|
126
132
|
align-self: flex-start;
|
|
127
133
|
}
|
|
128
134
|
}
|
|
@@ -138,7 +144,7 @@
|
|
|
138
144
|
color: var(--color-content-secondary);
|
|
139
145
|
}
|
|
140
146
|
|
|
141
|
-
.np-select-input-option-content-text-
|
|
147
|
+
.np-select-input-option-content-text-within-trigger {
|
|
142
148
|
overflow: hidden;
|
|
143
149
|
text-overflow: ellipsis;
|
|
144
150
|
white-space: nowrap;
|
|
@@ -1,13 +1,20 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { Calendar } from '@transferwise/icons';
|
|
2
|
+
import { Calendar, ChevronDown } from '@transferwise/icons';
|
|
3
3
|
import { Flag } from '@wise/art';
|
|
4
|
+
import classNames from 'classnames';
|
|
4
5
|
import { useState } from 'react';
|
|
5
6
|
|
|
6
7
|
import { getMonthNames } from '../common/dateUtils';
|
|
7
8
|
import Drawer from '../drawer';
|
|
8
9
|
import Modal from '../modal';
|
|
10
|
+
import { within, userEvent } from '../test-utils';
|
|
9
11
|
|
|
10
|
-
import {
|
|
12
|
+
import {
|
|
13
|
+
SelectInput,
|
|
14
|
+
type SelectInputItem,
|
|
15
|
+
SelectInputOptionContent,
|
|
16
|
+
SelectInputTriggerButton,
|
|
17
|
+
} from './SelectInput';
|
|
11
18
|
|
|
12
19
|
export default {
|
|
13
20
|
component: SelectInput,
|
|
@@ -78,11 +85,11 @@ export const Basic: StoryObj<{
|
|
|
78
85
|
])
|
|
79
86
|
.slice(0, -1)}
|
|
80
87
|
value={selectedMonth}
|
|
81
|
-
renderValue={(month,
|
|
88
|
+
renderValue={(month, withinTrigger) => (
|
|
82
89
|
<SelectInputOptionContent
|
|
83
90
|
title={month.name}
|
|
84
91
|
note="Note"
|
|
85
|
-
description={
|
|
92
|
+
description={withinTrigger ? undefined : `Month #${month.id}`}
|
|
86
93
|
icon={<Calendar size={24} />}
|
|
87
94
|
/>
|
|
88
95
|
)}
|
|
@@ -137,7 +144,7 @@ export const Months: StoryObj<{
|
|
|
137
144
|
onClear: () => void;
|
|
138
145
|
}> = {
|
|
139
146
|
render: function Story({ onChange, onClear }) {
|
|
140
|
-
const [selectedMonth, setSelectedMonth] = useState<Month | null>(
|
|
147
|
+
const [selectedMonth, setSelectedMonth] = useState<Month | null>(months[0]);
|
|
141
148
|
|
|
142
149
|
return (
|
|
143
150
|
<div className="d-flex flex-column">
|
|
@@ -171,6 +178,11 @@ export const Months: StoryObj<{
|
|
|
171
178
|
},
|
|
172
179
|
};
|
|
173
180
|
|
|
181
|
+
Months.play = ({ canvasElement }) => {
|
|
182
|
+
const canvas = within(canvasElement);
|
|
183
|
+
userEvent.click(canvas.getByText('January'));
|
|
184
|
+
};
|
|
185
|
+
|
|
174
186
|
interface Currency {
|
|
175
187
|
code: string;
|
|
176
188
|
name: string;
|
|
@@ -265,6 +277,41 @@ export const Currencies: StoryObj<{
|
|
|
265
277
|
},
|
|
266
278
|
};
|
|
267
279
|
|
|
280
|
+
export const CustomTrigger: StoryObj = {
|
|
281
|
+
render: function Story() {
|
|
282
|
+
return (
|
|
283
|
+
<div>
|
|
284
|
+
<SelectInput
|
|
285
|
+
placeholder="Month"
|
|
286
|
+
items={months.map((month) => ({
|
|
287
|
+
type: 'option',
|
|
288
|
+
value: month,
|
|
289
|
+
}))}
|
|
290
|
+
renderValue={(month, withinTrigger) =>
|
|
291
|
+
withinTrigger ? month.name : <SelectInputOptionContent title={month.name} />
|
|
292
|
+
}
|
|
293
|
+
renderTrigger={({ content, className }) => (
|
|
294
|
+
<SelectInputTriggerButton
|
|
295
|
+
className={classNames(
|
|
296
|
+
className,
|
|
297
|
+
'btn-unstyled np-text-link-large align-items-center',
|
|
298
|
+
)}
|
|
299
|
+
style={{ display: 'inline-flex', columnGap: '0.25rem' }}
|
|
300
|
+
>
|
|
301
|
+
{content}
|
|
302
|
+
<ChevronDown size={16} />
|
|
303
|
+
</SelectInputTriggerButton>
|
|
304
|
+
)}
|
|
305
|
+
/>
|
|
306
|
+
</div>
|
|
307
|
+
);
|
|
308
|
+
},
|
|
309
|
+
play: ({ canvasElement }) => {
|
|
310
|
+
const triggerButton = within(canvasElement).getByRole('button');
|
|
311
|
+
userEvent.click(triggerButton);
|
|
312
|
+
},
|
|
313
|
+
};
|
|
314
|
+
|
|
268
315
|
export const WithinDrawer: StoryObj<{
|
|
269
316
|
onChange: (value: Currency) => void;
|
|
270
317
|
}> = {
|