@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.
Files changed (23) hide show
  1. package/build/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.js +44 -33
  2. package/build/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.js.map +1 -1
  3. package/build/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.mjs +45 -34
  4. package/build/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.mjs.map +1 -1
  5. package/build/main.css +0 -13
  6. package/build/styles/inputs/SelectInput/SelectInput.css +0 -13
  7. package/build/styles/main.css +0 -13
  8. package/build/types/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.d.ts.map +1 -1
  9. package/package.json +3 -3
  10. package/src/inputs/SelectInput/DefaultTrigger/SelectInputDefaultTrigger.tsx +52 -39
  11. package/src/inputs/SelectInput/SelectInput.css +0 -13
  12. package/src/inputs/SelectInput/SelectInput.less +0 -7
  13. package/src/main.css +0 -13
  14. package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.js +0 -26
  15. package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.js.map +0 -1
  16. package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.mjs +0 -24
  17. package/build/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.mjs.map +0 -1
  18. package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.d.ts +0 -5
  19. package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.d.ts.map +0 -1
  20. package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/index.d.ts +0 -2
  21. package/build/types/inputs/SelectInput/DefaultTrigger/ClearButton/index.d.ts.map +0 -1
  22. package/src/inputs/SelectInput/DefaultTrigger/ClearButton/SelectInputClearButton.tsx +0 -25
  23. 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 SelectInputClearButton = require('./ClearButton/SelectInputClearButton.js');
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
- }) => /*#__PURE__*/jsxRuntime.jsx(InputGroup.InputGroup, {
19
- addonEnd: {
20
- content: /*#__PURE__*/jsxRuntime.jsxs("span", {
21
- className: clsx.clsx('np-select-input-addon-container', disabled && 'disabled'),
22
- children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
23
- children: [/*#__PURE__*/jsxRuntime.jsx(SelectInputClearButton.SelectInputClearButton, {
24
- onClick: event => {
25
- event.preventDefault();
26
- clear();
27
- }
28
- }), /*#__PURE__*/jsxRuntime.jsx("span", {
29
- className: "np-select-input-addon-separator"
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
- }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
32
- className: "np-select-input-addon",
33
- children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
34
- size: 16
35
- })
36
- })]
37
- }),
38
- initialContentWidth: 24 + 4,
39
- padding: 'sm'
40
- },
41
- disabled: disabled,
42
- className: className,
43
- children: /*#__PURE__*/jsxRuntime.jsx(SelectInputTriggerButton.SelectInputTriggerButton, {
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 { SelectInputClearButton } from './ClearButton';\n\nexport const SelectInputDefaultTrigger = (({\n content,\n placeholderShown,\n clear,\n disabled,\n size,\n className,\n}) => (\n <InputGroup\n addonEnd={{\n content: (\n <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>\n {clear != null && !placeholderShown ? (\n <>\n <SelectInputClearButton\n onClick={(event) => {\n event.preventDefault();\n clear();\n }}\n />\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)) satisfies SelectInputProps['renderTrigger'];\n"],"names":["SelectInputDefaultTrigger","content","placeholderShown","clear","disabled","size","className","_jsx","InputGroup","addonEnd","_jsxs","clsx","children","_Fragment","SelectInputClearButton","onClick","event","preventDefault","ChevronDown","initialContentWidth","padding","SelectInputTriggerButton","as","ButtonInput"],"mappings":";;;;;;;;;;AASO,MAAMA,yBAAyB,GAAIA,CAAC;EACzCC,OAAO;EACPC,gBAAgB;EAChBC,KAAK;EACLC,QAAQ;EACRC,IAAI;AACJC,EAAAA;AAAS,CACV,kBACCC,cAAA,CAACC,qBAAU,EAAA;AACTC,EAAAA,QAAQ,EAAE;AACRR,IAAAA,OAAO,eACLS,eAAA,CAAA,MAAA,EAAA;MAAMJ,SAAS,EAAEK,SAAI,CAAC,iCAAiC,EAAEP,QAAQ,IAAI,UAAU,CAAE;MAAAQ,QAAA,EAAA,CAC9ET,KAAK,IAAI,IAAI,IAAI,CAACD,gBAAgB,gBACjCQ,eAAA,CAAAG,mBAAA,EAAA;QAAAD,QAAA,EAAA,cACEL,cAAA,CAACO,6CAAsB,EAAA;UACrBC,OAAO,EAAGC,KAAK,IAAI;YACjBA,KAAK,CAACC,cAAc,EAAE;AACtBd,YAAAA,KAAK,EAAE;AACT,UAAA;SAAE,CAEJ,eAAAI,cAAA,CAAA,MAAA,EAAA;AAAMD,UAAAA,SAAS,EAAC;AAAiC,SAAA,CACnD;AAAA,OAAA,CAAG,GACD,IAAI,eAERC,cAAA,CAAA,MAAA,EAAA;AAAMD,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCL,cAAA,CAACW,iBAAW,EAAA;AAACb,UAAAA,IAAI,EAAE;SAAG;AACxB,OAAM,CACR;AAAA,KAAM,CACP;IACDc,mBAAmB,EAAE,EAAE,GAAG,CAAC;AAC3BC,IAAAA,OAAO,EAAE;GACT;AACFhB,EAAAA,QAAQ,EAAEA,QAAS;AACnBE,EAAAA,SAAS,EAAEA,SAAU;EAAAM,QAAA,eAErBL,cAAA,CAACc,iDAAwB,EAAA;AAACC,IAAAA,EAAE,EAAEC,wBAAY;AAAClB,IAAAA,IAAI,EAAEA,IAAK;AAAAO,IAAAA,QAAA,eACpDL,cAAA,CAAA,MAAA,EAAA;MACED,SAAS,EAAEK,SAAI,CACb,yBAAyB,EACzBT,gBAAgB,IAAI,6BAA6B,CACjD;AAAAU,MAAAA,QAAA,EAEDX;KACG;GACkB;AAC5B,CAAY;;;;"}
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 { SelectInputClearButton } from './ClearButton/SelectInputClearButton.mjs';
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
- }) => /*#__PURE__*/jsx(InputGroup, {
17
- addonEnd: {
18
- content: /*#__PURE__*/jsxs("span", {
19
- className: clsx('np-select-input-addon-container', disabled && 'disabled'),
20
- children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxs(Fragment, {
21
- children: [/*#__PURE__*/jsx(SelectInputClearButton, {
22
- onClick: event => {
23
- event.preventDefault();
24
- clear();
25
- }
26
- }), /*#__PURE__*/jsx("span", {
27
- className: "np-select-input-addon-separator"
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
- }) : null, /*#__PURE__*/jsx("span", {
30
- className: "np-select-input-addon",
31
- children: /*#__PURE__*/jsx(ChevronDown, {
32
- size: 16
33
- })
34
- })]
35
- }),
36
- initialContentWidth: 24 + 4,
37
- padding: 'sm'
38
- },
39
- disabled: disabled,
40
- className: className,
41
- children: /*#__PURE__*/jsx(SelectInputTriggerButton, {
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 { SelectInputClearButton } from './ClearButton';\n\nexport const SelectInputDefaultTrigger = (({\n content,\n placeholderShown,\n clear,\n disabled,\n size,\n className,\n}) => (\n <InputGroup\n addonEnd={{\n content: (\n <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>\n {clear != null && !placeholderShown ? (\n <>\n <SelectInputClearButton\n onClick={(event) => {\n event.preventDefault();\n clear();\n }}\n />\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)) satisfies SelectInputProps['renderTrigger'];\n"],"names":["SelectInputDefaultTrigger","content","placeholderShown","clear","disabled","size","className","_jsx","InputGroup","addonEnd","_jsxs","clsx","children","_Fragment","SelectInputClearButton","onClick","event","preventDefault","ChevronDown","initialContentWidth","padding","SelectInputTriggerButton","as","ButtonInput"],"mappings":";;;;;;;;AASO,MAAMA,yBAAyB,GAAIA,CAAC;EACzCC,OAAO;EACPC,gBAAgB;EAChBC,KAAK;EACLC,QAAQ;EACRC,IAAI;AACJC,EAAAA;AAAS,CACV,kBACCC,GAAA,CAACC,UAAU,EAAA;AACTC,EAAAA,QAAQ,EAAE;AACRR,IAAAA,OAAO,eACLS,IAAA,CAAA,MAAA,EAAA;MAAMJ,SAAS,EAAEK,IAAI,CAAC,iCAAiC,EAAEP,QAAQ,IAAI,UAAU,CAAE;MAAAQ,QAAA,EAAA,CAC9ET,KAAK,IAAI,IAAI,IAAI,CAACD,gBAAgB,gBACjCQ,IAAA,CAAAG,QAAA,EAAA;QAAAD,QAAA,EAAA,cACEL,GAAA,CAACO,sBAAsB,EAAA;UACrBC,OAAO,EAAGC,KAAK,IAAI;YACjBA,KAAK,CAACC,cAAc,EAAE;AACtBd,YAAAA,KAAK,EAAE;AACT,UAAA;SAAE,CAEJ,eAAAI,GAAA,CAAA,MAAA,EAAA;AAAMD,UAAAA,SAAS,EAAC;AAAiC,SAAA,CACnD;AAAA,OAAA,CAAG,GACD,IAAI,eAERC,GAAA,CAAA,MAAA,EAAA;AAAMD,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCL,GAAA,CAACW,WAAW,EAAA;AAACb,UAAAA,IAAI,EAAE;SAAG;AACxB,OAAM,CACR;AAAA,KAAM,CACP;IACDc,mBAAmB,EAAE,EAAE,GAAG,CAAC;AAC3BC,IAAAA,OAAO,EAAE;GACT;AACFhB,EAAAA,QAAQ,EAAEA,QAAS;AACnBE,EAAAA,SAAS,EAAEA,SAAU;EAAAM,QAAA,eAErBL,GAAA,CAACc,wBAAwB,EAAA;AAACC,IAAAA,EAAE,EAAEC,WAAY;AAAClB,IAAAA,IAAI,EAAEA,IAAK;AAAAO,IAAAA,QAAA,eACpDL,GAAA,CAAA,MAAA,EAAA;MACED,SAAS,EAAEK,IAAI,CACb,yBAAyB,EACzBT,gBAAgB,IAAI,6BAA6B,CACjD;AAAAU,MAAAA,QAAA,EAEDX;KACG;GACkB;AAC5B,CAAY;;;;"}
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
  }
@@ -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":"AASA,eAAO,MAAM,yBAAyB;;;;;;;iCA8CQ,CAAC"}
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-ebe1b52",
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
- "@wise/wds-configs": "0.0.0",
90
+ "@transferwise/neptune-css": "14.26.1",
91
91
  "@wise/components-theming": "1.10.1",
92
- "@transferwise/neptune-css": "14.26.1"
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 { SelectInputClearButton } from './ClearButton';
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
- <InputGroup
19
- addonEnd={{
20
- content: (
21
- <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>
22
- {clear != null && !placeholderShown ? (
23
- <>
24
- <SelectInputClearButton
25
- onClick={(event) => {
26
- event.preventDefault();
27
- clear();
28
- }}
29
- />
30
- <span className="np-select-input-addon-separator" />
31
- </>
32
- ) : null}
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
- <span className="np-select-input-addon">
35
- <ChevronDown size={16} />
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
- initialContentWidth: 24 + 4,
40
- padding: 'sm',
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
  }
@@ -29,12 +29,5 @@
29
29
 
30
30
  &--interactive {
31
31
  pointer-events: auto;
32
- color: var(--color-interactive-secondary);
33
-
34
- &:hover {
35
- color: var(--color-interactive-secondary-hover);
36
- }
37
-
38
- .focus-ring();
39
32
  }
40
33
  }
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;;;;"}
@@ -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
@@ -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,2 +0,0 @@
1
- export { SelectInputClearButton } from './SelectInputClearButton';
2
- //# sourceMappingURL=index.d.ts.map
@@ -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';