@transferwise/components 0.0.0-experimental-02eda23 → 0.0.0-experimental-32cf8db
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 +135 -81
- package/build/index.esm.js.map +1 -1
- package/build/index.js +136 -81
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/dateLookup/DateLookup.css +1 -1
- package/build/styles/inputs/SelectInput.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/types/common/polymorphicWithOverrides/PolymorphicWithOverrides.d.ts +10 -0
- package/build/types/common/polymorphicWithOverrides/PolymorphicWithOverrides.d.ts.map +1 -0
- package/build/types/inputs/SelectInput.d.ts +13 -2
- package/build/types/inputs/SelectInput.d.ts.map +1 -1
- package/package.json +5 -4
- package/src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx +16 -0
- package/src/dateLookup/DateLookup.css +1 -1
- package/src/dateLookup/DateLookup.less +4 -4
- package/src/dateLookup/dateHeader/DateHeader.js +1 -1
- package/src/inputs/SelectInput.css +1 -1
- package/src/inputs/SelectInput.less +2 -2
- package/src/inputs/SelectInput.story.tsx +45 -4
- package/src/inputs/SelectInput.tsx +153 -96
- package/src/inputs/_Popover.less +1 -1
- package/src/main.css +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
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
|
+
export declare const PolymorphicWithOverrides: import("react").ForwardRefExoticComponent<Omit<PolymorphicWithOverridesProps, "ref"> & import("react").RefAttributes<Element>>;
|
|
10
|
+
//# 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,eAAO,MAAM,wBAAwB,gIAKnC,CAAC"}
|
|
@@ -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;
|
|
@@ -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":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-32cf8db",
|
|
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
|
-
"@
|
|
82
|
-
"@
|
|
81
|
+
"@wise/components-theming": "0.8.4",
|
|
82
|
+
"@transferwise/neptune-css": "0.0.0-experimental-32cf8db"
|
|
83
83
|
},
|
|
84
84
|
"peerDependencies": {
|
|
85
85
|
"@transferwise/icons": "^3.7.0",
|
|
86
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
86
|
+
"@transferwise/neptune-css": "0.0.0-experimental-32cf8db",
|
|
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",
|
|
@@ -0,0 +1,16 @@
|
|
|
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
|
+
export const PolymorphicWithOverrides = forwardRef(function PolymorphicWithOverrides(
|
|
12
|
+
{ __overrides: { as: Element, ...restOverrides }, ...restProps }: PolymorphicWithOverridesProps,
|
|
13
|
+
ref: React.ForwardedRef<Element>,
|
|
14
|
+
) {
|
|
15
|
+
return <Element ref={ref} {...restProps} {...restOverrides} />;
|
|
16
|
+
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tw-date-lookup-calendar abbr{text-decoration:none}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-
|
|
1
|
+
.tw-date-lookup-menu{width:400px}.tw-date-lookup-calendar{min-width:300px;table-layout:fixed;text-align:center}.tw-date-lookup-calendar>tbody>tr>td{padding:4px;padding:var(--size-4)}.tw-date-lookup-calendar>tbody>tr>td button{background-color:transparent;border:transparent;border-radius:10px;border-radius:var(--radius-small);color:#0097c7;color:var(--color-content-accent);font-weight:600;font-weight:var(--font-weight-semi-bold);padding:4px 0;padding:var(--size-4) 0;width:100%}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active{background-color:#0081ba;background-color:var(--color-interactive-accent-active);color:#fff}.tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover);color:#fff}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled).active,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td button:not(.disabled,:disabled):hover{color:var(--color-interactive-control)}.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+6) button,.np-theme-personal .tw-date-lookup-calendar>tbody>tr>td:nth-child(7n+7) button,.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+6),.np-theme-personal .tw-date-lookup-calendar>thead>tr>th:nth-child(7n+7){color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tw-date-lookup-calendar abbr{text-decoration:none}.np-theme-personal .tw-date-lookup-calendar{background-color:inherit}.tw-date-lookup-header-current{font-weight:800;font-weight:var(--font-weight-bold)}.np-theme-personal .tw-date-lookup-menu .table-bordered,.np-theme-personal.tw-date-lookup-menu .table-bordered{border:none}.np-theme-personal .tw-date-lookup-menu thead,.np-theme-personal.tw-date-lookup-menu thead{background-color:unset}.np-theme-personal .tw-date-lookup-menu td,.np-theme-personal.tw-date-lookup-menu td{border:none}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current{color:#37517e;color:var(--color-content-primary)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option{align-items:center;color:#37517e;color:var(--color-content-primary);display:inline-flex;height:32px;height:var(--size-32);justify-content:center;line-height:32px;line-height:var(--size-32)}.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-day-option.active,.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-day-option.active{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-interactive-primary)}
|
|
@@ -63,6 +63,10 @@
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
+
.tw-date-lookup-header-current {
|
|
67
|
+
font-weight: var(--font-weight-bold);
|
|
68
|
+
}
|
|
69
|
+
|
|
66
70
|
.np-theme-personal {
|
|
67
71
|
&.tw-date-lookup-menu,
|
|
68
72
|
.tw-date-lookup-menu {
|
|
@@ -80,10 +84,6 @@
|
|
|
80
84
|
|
|
81
85
|
.tw-date-lookup-header-current {
|
|
82
86
|
color: var(--color-content-primary);
|
|
83
|
-
|
|
84
|
-
h4 {
|
|
85
|
-
font-weight: var(--font-weight-bold);
|
|
86
|
-
}
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
.tw-date-lookup-day-option {
|
|
@@ -33,7 +33,7 @@ const DateHeader = ({ label, onLabelClick, onPreviousClick, onNextClick, dateMod
|
|
|
33
33
|
aria-label={intl.formatMessage(messages.goTo20YearView)}
|
|
34
34
|
onClick={onLabelClick}
|
|
35
35
|
>
|
|
36
|
-
|
|
36
|
+
{label}
|
|
37
37
|
</button>
|
|
38
38
|
)}
|
|
39
39
|
<div className="pull-right-single-direction">
|
|
@@ -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)}
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
.np-select-input-option-content-icon {
|
|
129
129
|
display: flex;
|
|
130
130
|
|
|
131
|
-
&--not-
|
|
131
|
+
&--not-within-trigger {
|
|
132
132
|
align-self: flex-start;
|
|
133
133
|
}
|
|
134
134
|
}
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
color: var(--color-content-secondary);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
-
.np-select-input-option-content-text-
|
|
147
|
+
.np-select-input-option-content-text-within-trigger {
|
|
148
148
|
overflow: hidden;
|
|
149
149
|
text-overflow: ellipsis;
|
|
150
150
|
white-space: nowrap;
|
|
@@ -1,6 +1,7 @@
|
|
|
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';
|
|
@@ -8,7 +9,12 @@ import Drawer from '../drawer';
|
|
|
8
9
|
import Modal from '../modal';
|
|
9
10
|
import { within, userEvent } from '../test-utils';
|
|
10
11
|
|
|
11
|
-
import {
|
|
12
|
+
import {
|
|
13
|
+
SelectInput,
|
|
14
|
+
type SelectInputItem,
|
|
15
|
+
SelectInputOptionContent,
|
|
16
|
+
SelectInputTriggerButton,
|
|
17
|
+
} from './SelectInput';
|
|
12
18
|
|
|
13
19
|
export default {
|
|
14
20
|
component: SelectInput,
|
|
@@ -79,11 +85,11 @@ export const Basic: StoryObj<{
|
|
|
79
85
|
])
|
|
80
86
|
.slice(0, -1)}
|
|
81
87
|
value={selectedMonth}
|
|
82
|
-
renderValue={(month,
|
|
88
|
+
renderValue={(month, withinTrigger) => (
|
|
83
89
|
<SelectInputOptionContent
|
|
84
90
|
title={month.name}
|
|
85
91
|
note="Note"
|
|
86
|
-
description={
|
|
92
|
+
description={withinTrigger ? undefined : `Month #${month.id}`}
|
|
87
93
|
icon={<Calendar size={24} />}
|
|
88
94
|
/>
|
|
89
95
|
)}
|
|
@@ -271,6 +277,41 @@ export const Currencies: StoryObj<{
|
|
|
271
277
|
},
|
|
272
278
|
};
|
|
273
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
|
+
|
|
274
315
|
export const WithinDrawer: StoryObj<{
|
|
275
316
|
onChange: (value: Currency) => void;
|
|
276
317
|
}> = {
|