@transferwise/components 0.0.0-experimental-ebe1b52 → 0.0.0-experimental-d42306a
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/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.js +44 -33
- package/build/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.js.map +1 -1
- package/build/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.mjs +45 -34
- package/build/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.mjs.map +1 -1
- package/build/main.css +0 -13
- package/build/styles/inputs/SelectInput/SelectInput.css +0 -13
- package/build/styles/main.css +0 -13
- package/build/types/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.tsx +52 -39
- package/src/inputs/SelectInput/SelectInput.css +0 -13
- package/src/inputs/SelectInput/SelectInput.less +0 -7
- package/src/main.css +0 -13
- package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.js +0 -26
- package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.js.map +0 -1
- package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.mjs +0 -24
- package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.mjs.map +0 -1
- package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.d.ts +0 -5
- package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.d.ts.map +0 -1
- package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/index.d.ts +0 -2
- package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/index.d.ts.map +0 -1
- package/src/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.tsx +0 -25
- package/src/inputs/SelectInput/DefaultTrigger/ClearButton/index.ts +0 -1
|
@@ -5,7 +5,9 @@ var clsx = require('clsx');
|
|
|
5
5
|
var _ButtonInput = require('../../_ButtonInput.js');
|
|
6
6
|
var InputGroup = require('../../InputGroup.js');
|
|
7
7
|
var SelectInputTriggerButton = require('../TriggerButton/SelectInputTriggerButton.js');
|
|
8
|
-
var
|
|
8
|
+
var IconButton = require('../../../iconButton/IconButton.js');
|
|
9
|
+
var reactIntl = require('react-intl');
|
|
10
|
+
var DateTrigger_messages = require('../../../dateLookup/dateTrigger/DateTrigger.messages.js');
|
|
9
11
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
12
|
|
|
11
13
|
const SelectInputDefaultTrigger = ({
|
|
@@ -15,40 +17,49 @@ const SelectInputDefaultTrigger = ({
|
|
|
15
17
|
disabled,
|
|
16
18
|
size,
|
|
17
19
|
className
|
|
18
|
-
}) =>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
}) => {
|
|
21
|
+
const intl = reactIntl.useIntl();
|
|
22
|
+
return /*#__PURE__*/jsxRuntime.jsx(InputGroup.InputGroup, {
|
|
23
|
+
addonEnd: {
|
|
24
|
+
content: /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
25
|
+
className: clsx.clsx('np-select-input-addon-container', disabled && 'disabled'),
|
|
26
|
+
children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
27
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
|
|
28
|
+
size: 24,
|
|
29
|
+
priority: "minimal",
|
|
30
|
+
type: "default",
|
|
31
|
+
className: "np-select-input-addon--interactive",
|
|
32
|
+
"aria-label": intl.formatMessage(DateTrigger_messages.default.ariaLabel),
|
|
33
|
+
onClick: event => {
|
|
34
|
+
event.preventDefault();
|
|
35
|
+
clear();
|
|
36
|
+
},
|
|
37
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {})
|
|
38
|
+
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
39
|
+
className: "np-select-input-addon-separator"
|
|
40
|
+
})]
|
|
41
|
+
}) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
42
|
+
className: "np-select-input-addon",
|
|
43
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
|
|
44
|
+
size: 16
|
|
45
|
+
})
|
|
30
46
|
})]
|
|
31
|
-
})
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
as: _ButtonInput.ButtonInput,
|
|
45
|
-
size: size,
|
|
46
|
-
children: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
47
|
-
className: clsx.clsx('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
|
|
48
|
-
children: content
|
|
47
|
+
}),
|
|
48
|
+
initialContentWidth: 24 + 4,
|
|
49
|
+
padding: 'sm'
|
|
50
|
+
},
|
|
51
|
+
disabled: disabled,
|
|
52
|
+
className: className,
|
|
53
|
+
children: /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButton.SelectInputTriggerButton, {
|
|
54
|
+
as: _ButtonInput.ButtonInput,
|
|
55
|
+
size: size,
|
|
56
|
+
children: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
57
|
+
className: clsx.clsx('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
|
|
58
|
+
children: content
|
|
59
|
+
})
|
|
49
60
|
})
|
|
50
|
-
})
|
|
51
|
-
}
|
|
61
|
+
});
|
|
62
|
+
};
|
|
52
63
|
|
|
53
64
|
exports.SelectInputDefaultTrigger = SelectInputDefaultTrigger;
|
|
54
65
|
//# sourceMappingURL=SelectInputDefaultTrigger.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInputDefaultTrigger.js","sources":["../../../../src/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { ButtonInput } from '../../_ButtonInput';\nimport { InputGroup } from '../../InputGroup';\nimport { SelectInputTriggerButton } from '../TriggerButton';\nimport type { SelectInputProps } from '../SelectInput.types';\nimport {
|
|
1
|
+
{"version":3,"file":"SelectInputDefaultTrigger.js","sources":["../../../../src/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.tsx"],"sourcesContent":["import { ChevronDown, Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { ButtonInput } from '../../_ButtonInput';\nimport { InputGroup } from '../../InputGroup';\nimport { SelectInputTriggerButton } from '../TriggerButton';\nimport type { SelectInputProps } from '../SelectInput.types';\nimport IconButton from '../../../iconButton';\nimport { useIntl } from 'react-intl';\n\nimport dateTriggerMessages from '../../../dateLookup/dateTrigger/DateTrigger.messages';\n\nexport const SelectInputDefaultTrigger = (({\n content,\n placeholderShown,\n clear,\n disabled,\n size,\n className,\n}) => {\n const intl = useIntl();\n return (\n <InputGroup\n addonEnd={{\n content: (\n <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>\n {clear != null && !placeholderShown ? (\n <>\n <IconButton\n size={24}\n priority=\"minimal\"\n type=\"default\"\n className=\"np-select-input-addon--interactive\"\n aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}\n onClick={(event) => {\n event.preventDefault();\n clear();\n }}\n >\n <Cross />\n </IconButton>\n <span className=\"np-select-input-addon-separator\" />\n </>\n ) : null}\n\n <span className=\"np-select-input-addon\">\n <ChevronDown size={16} />\n </span>\n </span>\n ),\n initialContentWidth: 24 + 4,\n padding: 'sm',\n }}\n disabled={disabled}\n className={className}\n >\n <SelectInputTriggerButton as={ButtonInput} size={size}>\n <span\n className={clsx(\n 'np-select-input-content',\n placeholderShown && 'np-select-input-placeholder',\n )}\n >\n {content}\n </span>\n </SelectInputTriggerButton>\n </InputGroup>\n )\n}) satisfies SelectInputProps['renderTrigger'];\n"],"names":["SelectInputDefaultTrigger","content","placeholderShown","clear","disabled","size","className","intl","useIntl","_jsx","InputGroup","addonEnd","_jsxs","clsx","children","_Fragment","IconButton","priority","type","formatMessage","dateTriggerMessages","ariaLabel","onClick","event","preventDefault","Cross","ChevronDown","initialContentWidth","padding","SelectInputTriggerButton","as","ButtonInput"],"mappings":";;;;;;;;;;;;AAYO,MAAMA,yBAAyB,GAAIA,CAAC;EACzCC,OAAO;EACPC,gBAAgB;EAChBC,KAAK;EACLC,QAAQ;EACRC,IAAI;AACJC,EAAAA;AAAS,CACV,KAAI;AACH,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtB,oBACEC,cAAA,CAACC,qBAAU,EAAA;AACTC,IAAAA,QAAQ,EAAE;AACRV,MAAAA,OAAO,eACLW,eAAA,CAAA,MAAA,EAAA;QAAMN,SAAS,EAAEO,SAAI,CAAC,iCAAiC,EAAET,QAAQ,IAAI,UAAU,CAAE;QAAAU,QAAA,EAAA,CAC9EX,KAAK,IAAI,IAAI,IAAI,CAACD,gBAAgB,gBACjCU,eAAA,CAAAG,mBAAA,EAAA;UAAAD,QAAA,EAAA,cACEL,cAAA,CAACO,kBAAU,EAAA;AACTX,YAAAA,IAAI,EAAE,EAAG;AACTY,YAAAA,QAAQ,EAAC,SAAS;AAClBC,YAAAA,IAAI,EAAC,SAAS;AACdZ,YAAAA,SAAS,EAAC,oCAAoC;AAC9C,YAAA,YAAA,EAAYC,IAAI,CAACY,aAAa,CAACC,4BAAmB,CAACC,SAAS,CAAE;YAC9DC,OAAO,EAAGC,KAAK,IAAI;cACjBA,KAAK,CAACC,cAAc,EAAE;AACtBrB,cAAAA,KAAK,EAAE;YACT,CAAE;AAAAW,YAAAA,QAAA,eAEFL,cAAA,CAACgB,WAAK,EAAA,EAAA;WACI,CACZ,eAAAhB,cAAA,CAAA,MAAA,EAAA;AAAMH,YAAAA,SAAS,EAAC;AAAiC,WAAA,CACnD;AAAA,SAAA,CAAG,GACD,IAAI,eAERG,cAAA,CAAA,MAAA,EAAA;AAAMH,UAAAA,SAAS,EAAC,uBAAuB;UAAAQ,QAAA,eACrCL,cAAA,CAACiB,iBAAW,EAAA;AAACrB,YAAAA,IAAI,EAAE;WAAG;AACxB,SAAM,CACR;AAAA,OAAM,CACP;MACDsB,mBAAmB,EAAE,EAAE,GAAG,CAAC;AAC3BC,MAAAA,OAAO,EAAE;KACT;AACFxB,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,SAAS,EAAEA,SAAU;IAAAQ,QAAA,eAErBL,cAAA,CAACoB,iDAAwB,EAAA;AAACC,MAAAA,EAAE,EAAEC,wBAAY;AAAC1B,MAAAA,IAAI,EAAEA,IAAK;AAAAS,MAAAA,QAAA,eACpDL,cAAA,CAAA,MAAA,EAAA;QACEH,SAAS,EAAEO,SAAI,CACb,yBAAyB,EACzBX,gBAAgB,IAAI,6BAA6B,CACjD;AAAAY,QAAAA,QAAA,EAEDb;OACG;KACkB;AAC5B,GAAY,CAAC;AAEjB;;;;"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { ChevronDown } from '@transferwise/icons';
|
|
1
|
+
import { Cross, ChevronDown } from '@transferwise/icons';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { ButtonInput } from '../../_ButtonInput.mjs';
|
|
4
4
|
import { InputGroup } from '../../InputGroup.mjs';
|
|
5
5
|
import { SelectInputTriggerButton } from '../TriggerButton/SelectInputTriggerButton.mjs';
|
|
6
|
-
import
|
|
6
|
+
import IconButton from '../../../iconButton/IconButton.mjs';
|
|
7
|
+
import { useIntl } from 'react-intl';
|
|
8
|
+
import messages from '../../../dateLookup/dateTrigger/DateTrigger.messages.mjs';
|
|
7
9
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
8
10
|
|
|
9
11
|
const SelectInputDefaultTrigger = ({
|
|
@@ -13,40 +15,49 @@ const SelectInputDefaultTrigger = ({
|
|
|
13
15
|
disabled,
|
|
14
16
|
size,
|
|
15
17
|
className
|
|
16
|
-
}) =>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
18
|
+
}) => {
|
|
19
|
+
const intl = useIntl();
|
|
20
|
+
return /*#__PURE__*/jsx(InputGroup, {
|
|
21
|
+
addonEnd: {
|
|
22
|
+
content: /*#__PURE__*/jsxs("span", {
|
|
23
|
+
className: clsx('np-select-input-addon-container', disabled && 'disabled'),
|
|
24
|
+
children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxs(Fragment, {
|
|
25
|
+
children: [/*#__PURE__*/jsx(IconButton, {
|
|
26
|
+
size: 24,
|
|
27
|
+
priority: "minimal",
|
|
28
|
+
type: "default",
|
|
29
|
+
className: "np-select-input-addon--interactive",
|
|
30
|
+
"aria-label": intl.formatMessage(messages.ariaLabel),
|
|
31
|
+
onClick: event => {
|
|
32
|
+
event.preventDefault();
|
|
33
|
+
clear();
|
|
34
|
+
},
|
|
35
|
+
children: /*#__PURE__*/jsx(Cross, {})
|
|
36
|
+
}), /*#__PURE__*/jsx("span", {
|
|
37
|
+
className: "np-select-input-addon-separator"
|
|
38
|
+
})]
|
|
39
|
+
}) : null, /*#__PURE__*/jsx("span", {
|
|
40
|
+
className: "np-select-input-addon",
|
|
41
|
+
children: /*#__PURE__*/jsx(ChevronDown, {
|
|
42
|
+
size: 16
|
|
43
|
+
})
|
|
28
44
|
})]
|
|
29
|
-
})
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
as: ButtonInput,
|
|
43
|
-
size: size,
|
|
44
|
-
children: /*#__PURE__*/jsx("span", {
|
|
45
|
-
className: clsx('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
|
|
46
|
-
children: content
|
|
45
|
+
}),
|
|
46
|
+
initialContentWidth: 24 + 4,
|
|
47
|
+
padding: 'sm'
|
|
48
|
+
},
|
|
49
|
+
disabled: disabled,
|
|
50
|
+
className: className,
|
|
51
|
+
children: /*#__PURE__*/jsx(SelectInputTriggerButton, {
|
|
52
|
+
as: ButtonInput,
|
|
53
|
+
size: size,
|
|
54
|
+
children: /*#__PURE__*/jsx("span", {
|
|
55
|
+
className: clsx('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
|
|
56
|
+
children: content
|
|
57
|
+
})
|
|
47
58
|
})
|
|
48
|
-
})
|
|
49
|
-
}
|
|
59
|
+
});
|
|
60
|
+
};
|
|
50
61
|
|
|
51
62
|
export { SelectInputDefaultTrigger };
|
|
52
63
|
//# sourceMappingURL=SelectInputDefaultTrigger.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInputDefaultTrigger.mjs","sources":["../../../../src/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { ButtonInput } from '../../_ButtonInput';\nimport { InputGroup } from '../../InputGroup';\nimport { SelectInputTriggerButton } from '../TriggerButton';\nimport type { SelectInputProps } from '../SelectInput.types';\nimport {
|
|
1
|
+
{"version":3,"file":"SelectInputDefaultTrigger.mjs","sources":["../../../../src/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.tsx"],"sourcesContent":["import { ChevronDown, Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { ButtonInput } from '../../_ButtonInput';\nimport { InputGroup } from '../../InputGroup';\nimport { SelectInputTriggerButton } from '../TriggerButton';\nimport type { SelectInputProps } from '../SelectInput.types';\nimport IconButton from '../../../iconButton';\nimport { useIntl } from 'react-intl';\n\nimport dateTriggerMessages from '../../../dateLookup/dateTrigger/DateTrigger.messages';\n\nexport const SelectInputDefaultTrigger = (({\n content,\n placeholderShown,\n clear,\n disabled,\n size,\n className,\n}) => {\n const intl = useIntl();\n return (\n <InputGroup\n addonEnd={{\n content: (\n <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>\n {clear != null && !placeholderShown ? (\n <>\n <IconButton\n size={24}\n priority=\"minimal\"\n type=\"default\"\n className=\"np-select-input-addon--interactive\"\n aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}\n onClick={(event) => {\n event.preventDefault();\n clear();\n }}\n >\n <Cross />\n </IconButton>\n <span className=\"np-select-input-addon-separator\" />\n </>\n ) : null}\n\n <span className=\"np-select-input-addon\">\n <ChevronDown size={16} />\n </span>\n </span>\n ),\n initialContentWidth: 24 + 4,\n padding: 'sm',\n }}\n disabled={disabled}\n className={className}\n >\n <SelectInputTriggerButton as={ButtonInput} size={size}>\n <span\n className={clsx(\n 'np-select-input-content',\n placeholderShown && 'np-select-input-placeholder',\n )}\n >\n {content}\n </span>\n </SelectInputTriggerButton>\n </InputGroup>\n )\n}) satisfies SelectInputProps['renderTrigger'];\n"],"names":["SelectInputDefaultTrigger","content","placeholderShown","clear","disabled","size","className","intl","useIntl","_jsx","InputGroup","addonEnd","_jsxs","clsx","children","_Fragment","IconButton","priority","type","formatMessage","dateTriggerMessages","ariaLabel","onClick","event","preventDefault","Cross","ChevronDown","initialContentWidth","padding","SelectInputTriggerButton","as","ButtonInput"],"mappings":";;;;;;;;;;AAYO,MAAMA,yBAAyB,GAAIA,CAAC;EACzCC,OAAO;EACPC,gBAAgB;EAChBC,KAAK;EACLC,QAAQ;EACRC,IAAI;AACJC,EAAAA;AAAS,CACV,KAAI;AACH,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtB,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTC,IAAAA,QAAQ,EAAE;AACRV,MAAAA,OAAO,eACLW,IAAA,CAAA,MAAA,EAAA;QAAMN,SAAS,EAAEO,IAAI,CAAC,iCAAiC,EAAET,QAAQ,IAAI,UAAU,CAAE;QAAAU,QAAA,EAAA,CAC9EX,KAAK,IAAI,IAAI,IAAI,CAACD,gBAAgB,gBACjCU,IAAA,CAAAG,QAAA,EAAA;UAAAD,QAAA,EAAA,cACEL,GAAA,CAACO,UAAU,EAAA;AACTX,YAAAA,IAAI,EAAE,EAAG;AACTY,YAAAA,QAAQ,EAAC,SAAS;AAClBC,YAAAA,IAAI,EAAC,SAAS;AACdZ,YAAAA,SAAS,EAAC,oCAAoC;AAC9C,YAAA,YAAA,EAAYC,IAAI,CAACY,aAAa,CAACC,QAAmB,CAACC,SAAS,CAAE;YAC9DC,OAAO,EAAGC,KAAK,IAAI;cACjBA,KAAK,CAACC,cAAc,EAAE;AACtBrB,cAAAA,KAAK,EAAE;YACT,CAAE;AAAAW,YAAAA,QAAA,eAEFL,GAAA,CAACgB,KAAK,EAAA,EAAA;WACI,CACZ,eAAAhB,GAAA,CAAA,MAAA,EAAA;AAAMH,YAAAA,SAAS,EAAC;AAAiC,WAAA,CACnD;AAAA,SAAA,CAAG,GACD,IAAI,eAERG,GAAA,CAAA,MAAA,EAAA;AAAMH,UAAAA,SAAS,EAAC,uBAAuB;UAAAQ,QAAA,eACrCL,GAAA,CAACiB,WAAW,EAAA;AAACrB,YAAAA,IAAI,EAAE;WAAG;AACxB,SAAM,CACR;AAAA,OAAM,CACP;MACDsB,mBAAmB,EAAE,EAAE,GAAG,CAAC;AAC3BC,MAAAA,OAAO,EAAE;KACT;AACFxB,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,SAAS,EAAEA,SAAU;IAAAQ,QAAA,eAErBL,GAAA,CAACoB,wBAAwB,EAAA;AAACC,MAAAA,EAAE,EAAEC,WAAY;AAAC1B,MAAAA,IAAI,EAAEA,IAAK;AAAAS,MAAAA,QAAA,eACpDL,GAAA,CAAA,MAAA,EAAA;QACEH,SAAS,EAAEO,IAAI,CACb,yBAAyB,EACzBX,gBAAgB,IAAI,6BAA6B,CACjD;AAAAY,QAAAA,QAAA,EAEDb;OACG;KACkB;AAC5B,GAAY,CAAC;AAEjB;;;;"}
|
package/build/main.css
CHANGED
|
@@ -4184,19 +4184,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
4184
4184
|
}
|
|
4185
4185
|
.np-select-input-addon--interactive {
|
|
4186
4186
|
pointer-events: auto;
|
|
4187
|
-
color: #c9cbce;
|
|
4188
|
-
color: var(--color-interactive-secondary);
|
|
4189
|
-
}
|
|
4190
|
-
.np-select-input-addon--interactive:hover {
|
|
4191
|
-
color: #b5b7ba;
|
|
4192
|
-
color: var(--color-interactive-secondary-hover);
|
|
4193
|
-
}
|
|
4194
|
-
.np-select-input-addon--interactive:focus {
|
|
4195
|
-
outline: none;
|
|
4196
|
-
}
|
|
4197
|
-
.np-select-input-addon--interactive:focus-visible {
|
|
4198
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
4199
|
-
outline-offset: var(--ring-outline-offset);
|
|
4200
4187
|
}
|
|
4201
4188
|
.np-text-area {
|
|
4202
4189
|
min-height: 72px;
|
|
@@ -356,17 +356,4 @@
|
|
|
356
356
|
}
|
|
357
357
|
.np-select-input-addon--interactive {
|
|
358
358
|
pointer-events: auto;
|
|
359
|
-
color: #c9cbce;
|
|
360
|
-
color: var(--color-interactive-secondary);
|
|
361
|
-
}
|
|
362
|
-
.np-select-input-addon--interactive:hover {
|
|
363
|
-
color: #b5b7ba;
|
|
364
|
-
color: var(--color-interactive-secondary-hover);
|
|
365
|
-
}
|
|
366
|
-
.np-select-input-addon--interactive:focus {
|
|
367
|
-
outline: none;
|
|
368
|
-
}
|
|
369
|
-
.np-select-input-addon--interactive:focus-visible {
|
|
370
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
371
|
-
outline-offset: var(--ring-outline-offset);
|
|
372
359
|
}
|
package/build/styles/main.css
CHANGED
|
@@ -4184,19 +4184,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
4184
4184
|
}
|
|
4185
4185
|
.np-select-input-addon--interactive {
|
|
4186
4186
|
pointer-events: auto;
|
|
4187
|
-
color: #c9cbce;
|
|
4188
|
-
color: var(--color-interactive-secondary);
|
|
4189
|
-
}
|
|
4190
|
-
.np-select-input-addon--interactive:hover {
|
|
4191
|
-
color: #b5b7ba;
|
|
4192
|
-
color: var(--color-interactive-secondary-hover);
|
|
4193
|
-
}
|
|
4194
|
-
.np-select-input-addon--interactive:focus {
|
|
4195
|
-
outline: none;
|
|
4196
|
-
}
|
|
4197
|
-
.np-select-input-addon--interactive:focus-visible {
|
|
4198
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
4199
|
-
outline-offset: var(--ring-outline-offset);
|
|
4200
4187
|
}
|
|
4201
4188
|
.np-text-area {
|
|
4202
4189
|
min-height: 72px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInputDefaultTrigger.d.ts","sourceRoot":"","sources":["../../../../../src/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SelectInputDefaultTrigger.d.ts","sourceRoot":"","sources":["../../../../../src/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,yBAAyB;;;;;;;iCAwDQ,CAAC"}
|
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-d42306a",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -87,9 +87,9 @@
|
|
|
87
87
|
"storybook-addon-tag-badges": "^3.0.4",
|
|
88
88
|
"storybook-addon-test-codegen": "^3.0.1",
|
|
89
89
|
"@transferwise/less-config": "3.1.2",
|
|
90
|
-
"@
|
|
90
|
+
"@transferwise/neptune-css": "14.26.1",
|
|
91
91
|
"@wise/components-theming": "1.10.1",
|
|
92
|
-
"@
|
|
92
|
+
"@wise/wds-configs": "0.0.0"
|
|
93
93
|
},
|
|
94
94
|
"peerDependencies": {
|
|
95
95
|
"@transferwise/icons": "^3 || ^4",
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
import { ChevronDown } from '@transferwise/icons';
|
|
1
|
+
import { ChevronDown, Cross } from '@transferwise/icons';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
|
|
4
4
|
import { ButtonInput } from '../../_ButtonInput';
|
|
5
5
|
import { InputGroup } from '../../InputGroup';
|
|
6
6
|
import { SelectInputTriggerButton } from '../TriggerButton';
|
|
7
7
|
import type { SelectInputProps } from '../SelectInput.types';
|
|
8
|
-
import
|
|
8
|
+
import IconButton from '../../../iconButton';
|
|
9
|
+
import { useIntl } from 'react-intl';
|
|
10
|
+
|
|
11
|
+
import dateTriggerMessages from '../../../dateLookup/dateTrigger/DateTrigger.messages';
|
|
9
12
|
|
|
10
13
|
export const SelectInputDefaultTrigger = (({
|
|
11
14
|
content,
|
|
@@ -14,43 +17,53 @@ export const SelectInputDefaultTrigger = (({
|
|
|
14
17
|
disabled,
|
|
15
18
|
size,
|
|
16
19
|
className,
|
|
17
|
-
}) =>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
20
|
+
}) => {
|
|
21
|
+
const intl = useIntl();
|
|
22
|
+
return (
|
|
23
|
+
<InputGroup
|
|
24
|
+
addonEnd={{
|
|
25
|
+
content: (
|
|
26
|
+
<span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>
|
|
27
|
+
{clear != null && !placeholderShown ? (
|
|
28
|
+
<>
|
|
29
|
+
<IconButton
|
|
30
|
+
size={24}
|
|
31
|
+
priority="minimal"
|
|
32
|
+
type="default"
|
|
33
|
+
className="np-select-input-addon--interactive"
|
|
34
|
+
aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}
|
|
35
|
+
onClick={(event) => {
|
|
36
|
+
event.preventDefault();
|
|
37
|
+
clear();
|
|
38
|
+
}}
|
|
39
|
+
>
|
|
40
|
+
<Cross />
|
|
41
|
+
</IconButton>
|
|
42
|
+
<span className="np-select-input-addon-separator" />
|
|
43
|
+
</>
|
|
44
|
+
) : null}
|
|
33
45
|
|
|
34
|
-
|
|
35
|
-
|
|
46
|
+
<span className="np-select-input-addon">
|
|
47
|
+
<ChevronDown size={16} />
|
|
48
|
+
</span>
|
|
36
49
|
</span>
|
|
50
|
+
),
|
|
51
|
+
initialContentWidth: 24 + 4,
|
|
52
|
+
padding: 'sm',
|
|
53
|
+
}}
|
|
54
|
+
disabled={disabled}
|
|
55
|
+
className={className}
|
|
56
|
+
>
|
|
57
|
+
<SelectInputTriggerButton as={ButtonInput} size={size}>
|
|
58
|
+
<span
|
|
59
|
+
className={clsx(
|
|
60
|
+
'np-select-input-content',
|
|
61
|
+
placeholderShown && 'np-select-input-placeholder',
|
|
62
|
+
)}
|
|
63
|
+
>
|
|
64
|
+
{content}
|
|
37
65
|
</span>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
disabled={disabled}
|
|
43
|
-
className={className}
|
|
44
|
-
>
|
|
45
|
-
<SelectInputTriggerButton as={ButtonInput} size={size}>
|
|
46
|
-
<span
|
|
47
|
-
className={clsx(
|
|
48
|
-
'np-select-input-content',
|
|
49
|
-
placeholderShown && 'np-select-input-placeholder',
|
|
50
|
-
)}
|
|
51
|
-
>
|
|
52
|
-
{content}
|
|
53
|
-
</span>
|
|
54
|
-
</SelectInputTriggerButton>
|
|
55
|
-
</InputGroup>
|
|
56
|
-
)) satisfies SelectInputProps['renderTrigger'];
|
|
66
|
+
</SelectInputTriggerButton>
|
|
67
|
+
</InputGroup>
|
|
68
|
+
)
|
|
69
|
+
}) satisfies SelectInputProps['renderTrigger'];
|
|
@@ -356,17 +356,4 @@
|
|
|
356
356
|
}
|
|
357
357
|
.np-select-input-addon--interactive {
|
|
358
358
|
pointer-events: auto;
|
|
359
|
-
color: #c9cbce;
|
|
360
|
-
color: var(--color-interactive-secondary);
|
|
361
|
-
}
|
|
362
|
-
.np-select-input-addon--interactive:hover {
|
|
363
|
-
color: #b5b7ba;
|
|
364
|
-
color: var(--color-interactive-secondary-hover);
|
|
365
|
-
}
|
|
366
|
-
.np-select-input-addon--interactive:focus {
|
|
367
|
-
outline: none;
|
|
368
|
-
}
|
|
369
|
-
.np-select-input-addon--interactive:focus-visible {
|
|
370
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
371
|
-
outline-offset: var(--ring-outline-offset);
|
|
372
359
|
}
|
package/src/main.css
CHANGED
|
@@ -4184,19 +4184,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
4184
4184
|
}
|
|
4185
4185
|
.np-select-input-addon--interactive {
|
|
4186
4186
|
pointer-events: auto;
|
|
4187
|
-
color: #c9cbce;
|
|
4188
|
-
color: var(--color-interactive-secondary);
|
|
4189
|
-
}
|
|
4190
|
-
.np-select-input-addon--interactive:hover {
|
|
4191
|
-
color: #b5b7ba;
|
|
4192
|
-
color: var(--color-interactive-secondary-hover);
|
|
4193
|
-
}
|
|
4194
|
-
.np-select-input-addon--interactive:focus {
|
|
4195
|
-
outline: none;
|
|
4196
|
-
}
|
|
4197
|
-
.np-select-input-addon--interactive:focus-visible {
|
|
4198
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
4199
|
-
outline-offset: var(--ring-outline-offset);
|
|
4200
4187
|
}
|
|
4201
4188
|
.np-text-area {
|
|
4202
4189
|
min-height: 72px;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var icons = require('@transferwise/icons');
|
|
4
|
-
var clsx = require('clsx');
|
|
5
|
-
var reactIntl = require('react-intl');
|
|
6
|
-
var DateTrigger_messages = require('../../../../dateLookup/dateTrigger/DateTrigger.messages.js');
|
|
7
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
-
|
|
9
|
-
function SelectInputClearButton({
|
|
10
|
-
className,
|
|
11
|
-
onClick
|
|
12
|
-
}) {
|
|
13
|
-
const intl = reactIntl.useIntl();
|
|
14
|
-
return /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
15
|
-
type: "button",
|
|
16
|
-
"aria-label": intl.formatMessage(DateTrigger_messages.default.ariaLabel),
|
|
17
|
-
className: clsx.clsx(className, 'np-select-input-addon np-select-input-addon--interactive'),
|
|
18
|
-
onClick: onClick,
|
|
19
|
-
children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {
|
|
20
|
-
size: 16
|
|
21
|
-
})
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
exports.SelectInputClearButton = SelectInputClearButton;
|
|
26
|
-
//# sourceMappingURL=SelectInputClearButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInputClearButton.js","sources":["../../../../../src/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport dateTriggerMessages from '../../../../dateLookup/dateTrigger/DateTrigger.messages';\n\ninterface SelectInputClearButtonProps extends Pick<\n React.ComponentPropsWithoutRef<'button'>,\n 'className' | 'onClick'\n> {}\n\nexport function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {\n const intl = useIntl();\n\n return (\n <button\n type=\"button\"\n aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}\n className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}\n onClick={onClick}\n >\n <Cross size={16} />\n </button>\n );\n}\n"],"names":["SelectInputClearButton","className","onClick","intl","useIntl","_jsx","type","formatMessage","dateTriggerMessages","ariaLabel","clsx","children","Cross","size"],"mappings":";;;;;;;;SAWgBA,sBAAsBA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAO,CAA+B,EAAA;AACxF,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtB,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYH,IAAI,CAACI,aAAa,CAACC,4BAAmB,CAACC,SAAS,CAAE;AAC9DR,IAAAA,SAAS,EAAES,SAAI,CAACT,SAAS,EAAE,0DAA0D,CAAE;AACvFC,IAAAA,OAAO,EAAEA,OAAQ;IAAAS,QAAA,eAEjBN,cAAA,CAACO,WAAK,EAAA;AAACC,MAAAA,IAAI,EAAE;KAAG;AAClB,GAAQ,CAAC;AAEb;;;;"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { Cross } from '@transferwise/icons';
|
|
2
|
-
import { clsx } from 'clsx';
|
|
3
|
-
import { useIntl } from 'react-intl';
|
|
4
|
-
import messages from '../../../../dateLookup/dateTrigger/DateTrigger.messages.mjs';
|
|
5
|
-
import { jsx } from 'react/jsx-runtime';
|
|
6
|
-
|
|
7
|
-
function SelectInputClearButton({
|
|
8
|
-
className,
|
|
9
|
-
onClick
|
|
10
|
-
}) {
|
|
11
|
-
const intl = useIntl();
|
|
12
|
-
return /*#__PURE__*/jsx("button", {
|
|
13
|
-
type: "button",
|
|
14
|
-
"aria-label": intl.formatMessage(messages.ariaLabel),
|
|
15
|
-
className: clsx(className, 'np-select-input-addon np-select-input-addon--interactive'),
|
|
16
|
-
onClick: onClick,
|
|
17
|
-
children: /*#__PURE__*/jsx(Cross, {
|
|
18
|
-
size: 16
|
|
19
|
-
})
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export { SelectInputClearButton };
|
|
24
|
-
//# sourceMappingURL=SelectInputClearButton.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInputClearButton.mjs","sources":["../../../../../src/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport dateTriggerMessages from '../../../../dateLookup/dateTrigger/DateTrigger.messages';\n\ninterface SelectInputClearButtonProps extends Pick<\n React.ComponentPropsWithoutRef<'button'>,\n 'className' | 'onClick'\n> {}\n\nexport function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {\n const intl = useIntl();\n\n return (\n <button\n type=\"button\"\n aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}\n className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}\n onClick={onClick}\n >\n <Cross size={16} />\n </button>\n );\n}\n"],"names":["SelectInputClearButton","className","onClick","intl","useIntl","_jsx","type","formatMessage","dateTriggerMessages","ariaLabel","clsx","children","Cross","size"],"mappings":";;;;;;SAWgBA,sBAAsBA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAO,CAA+B,EAAA;AACxF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtB,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAYH,IAAI,CAACI,aAAa,CAACC,QAAmB,CAACC,SAAS,CAAE;AAC9DR,IAAAA,SAAS,EAAES,IAAI,CAACT,SAAS,EAAE,0DAA0D,CAAE;AACvFC,IAAAA,OAAO,EAAEA,OAAQ;IAAAS,QAAA,eAEjBN,GAAA,CAACO,KAAK,EAAA;AAACC,MAAAA,IAAI,EAAE;KAAG;AAClB,GAAQ,CAAC;AAEb;;;;"}
|
package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
interface SelectInputClearButtonProps extends Pick<React.ComponentPropsWithoutRef<'button'>, 'className' | 'onClick'> {
|
|
2
|
-
}
|
|
3
|
-
export declare function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps): import("react").JSX.Element;
|
|
4
|
-
export {};
|
|
5
|
-
//# sourceMappingURL=SelectInputClearButton.d.ts.map
|
package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInputClearButton.d.ts","sourceRoot":"","sources":["../../../../../../src/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.tsx"],"names":[],"mappings":"AAMA,UAAU,2BAA4B,SAAQ,IAAI,CAChD,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EACxC,WAAW,GAAG,SAAS,CACxB;CAAG;AAEJ,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,2BAA2B,+BAazF"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/inputs/SelectInput/DefaultTrigger/ClearButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { Cross } from '@transferwise/icons';
|
|
2
|
-
import { clsx } from 'clsx';
|
|
3
|
-
import { useIntl } from 'react-intl';
|
|
4
|
-
|
|
5
|
-
import dateTriggerMessages from '../../../../dateLookup/dateTrigger/DateTrigger.messages';
|
|
6
|
-
|
|
7
|
-
interface SelectInputClearButtonProps extends Pick<
|
|
8
|
-
React.ComponentPropsWithoutRef<'button'>,
|
|
9
|
-
'className' | 'onClick'
|
|
10
|
-
> {}
|
|
11
|
-
|
|
12
|
-
export function SelectInputClearButton({ className, onClick }: SelectInputClearButtonProps) {
|
|
13
|
-
const intl = useIntl();
|
|
14
|
-
|
|
15
|
-
return (
|
|
16
|
-
<button
|
|
17
|
-
type="button"
|
|
18
|
-
aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}
|
|
19
|
-
className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}
|
|
20
|
-
onClick={onClick}
|
|
21
|
-
>
|
|
22
|
-
<Cross size={16} />
|
|
23
|
-
</button>
|
|
24
|
-
);
|
|
25
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { SelectInputClearButton } from './SelectInputClearButton';
|