@transferwise/components 46.61.0 → 46.61.1
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/chips/Chips.js +4 -5
- package/build/chips/Chips.js.map +1 -1
- package/build/chips/Chips.mjs +4 -5
- package/build/chips/Chips.mjs.map +1 -1
- package/build/types/chips/Chips.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/chips/Chips.spec.tsx +1 -1
- package/src/chips/Chips.tsx +2 -3
- package/src/chips/__snapshots__/Chips.spec.tsx.snap +5 -4
package/build/chips/Chips.js
CHANGED
|
@@ -29,6 +29,8 @@ const Chips = ({
|
|
|
29
29
|
children: chips.map(chip => {
|
|
30
30
|
const chipSelected = isSelected(chip.value);
|
|
31
31
|
return /*#__PURE__*/jsxRuntime.jsx(Chip, {
|
|
32
|
+
role: !multiple ? 'radio' : 'checkbox',
|
|
33
|
+
"aria-checked": chipSelected,
|
|
32
34
|
value: chip.value,
|
|
33
35
|
label: chip.label,
|
|
34
36
|
closeButton: {
|
|
@@ -41,13 +43,10 @@ const Chips = ({
|
|
|
41
43
|
'p-r-1': multiple && chipSelected
|
|
42
44
|
}),
|
|
43
45
|
...(multiple && chipSelected ? {
|
|
44
|
-
onRemove: () => handleOnChange(chip.value, chipSelected)
|
|
45
|
-
'aria-label': chip.label
|
|
46
|
+
onRemove: () => handleOnChange(chip.value, chipSelected)
|
|
46
47
|
} : {
|
|
47
48
|
onClick: () => handleOnChange(chip.value, chipSelected),
|
|
48
|
-
onKeyPress: () => handleOnChange(chip.value, chipSelected)
|
|
49
|
-
role: !multiple ? 'radio' : undefined,
|
|
50
|
-
'aria-checked': chipSelected
|
|
49
|
+
onKeyPress: () => handleOnChange(chip.value, chipSelected)
|
|
51
50
|
})
|
|
52
51
|
}, chip.value);
|
|
53
52
|
})
|
package/build/chips/Chips.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chips.js","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n value: ChipValue;\n label: string;\n};\n\nexport type ChipsProps = CommonProps &\n AriaLabelProperty & {\n /** List of chips with string labels and string/number values */\n chips: readonly Chip[];\n /** Callback which is invoked when a chip is selected or deselected */\n onChange: ({\n isEnabled,\n selectedValue,\n }: {\n isEnabled: boolean;\n selectedValue: ChipValue;\n }) => void;\n /** Used to manage which chips are selected */\n selected: ChipValue | readonly ChipValue[];\n /** Used to activate multi-selection */\n multiple?: boolean;\n };\n\nconst Chips = ({\n chips,\n onChange,\n selected,\n 'aria-label': ariaLabel,\n className,\n multiple,\n}: ChipsProps) => {\n const intl = useIntl();\n\n const isSelected = (value: ChipValue) =>\n Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n };\n\n return (\n <div\n className={clsx('np-chips d-flex', className)}\n aria-label={ariaLabel}\n role={!multiple ? 'radiogroup' : undefined}\n >\n {chips.map((chip) => {\n const chipSelected = isSelected(chip.value);\n return (\n <Chip\n key={chip.value}\n value={chip.value}\n label={chip.label}\n closeButton={{\n 'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n }}\n className={clsx('text-xs-nowrap', {\n 'np-chip--selected': chipSelected,\n 'p-r-1': multiple && chipSelected,\n })}\n {...(multiple && chipSelected\n ? {\n onRemove: () => handleOnChange(chip.value, chipSelected),\n
|
|
1
|
+
{"version":3,"file":"Chips.js","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n value: ChipValue;\n label: string;\n};\n\nexport type ChipsProps = CommonProps &\n AriaLabelProperty & {\n /** List of chips with string labels and string/number values */\n chips: readonly Chip[];\n /** Callback which is invoked when a chip is selected or deselected */\n onChange: ({\n isEnabled,\n selectedValue,\n }: {\n isEnabled: boolean;\n selectedValue: ChipValue;\n }) => void;\n /** Used to manage which chips are selected */\n selected: ChipValue | readonly ChipValue[];\n /** Used to activate multi-selection */\n multiple?: boolean;\n };\n\nconst Chips = ({\n chips,\n onChange,\n selected,\n 'aria-label': ariaLabel,\n className,\n multiple,\n}: ChipsProps) => {\n const intl = useIntl();\n\n const isSelected = (value: ChipValue) =>\n Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n };\n\n return (\n <div\n className={clsx('np-chips d-flex', className)}\n aria-label={ariaLabel}\n role={!multiple ? 'radiogroup' : undefined}\n >\n {chips.map((chip) => {\n const chipSelected = isSelected(chip.value);\n return (\n <Chip\n key={chip.value}\n role={!multiple ? 'radio' : 'checkbox'}\n aria-checked={chipSelected}\n value={chip.value}\n label={chip.label}\n closeButton={{\n 'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n }}\n className={clsx('text-xs-nowrap', {\n 'np-chip--selected': chipSelected,\n 'p-r-1': multiple && chipSelected,\n })}\n {...(multiple && chipSelected\n ? {\n onRemove: () => handleOnChange(chip.value, chipSelected),\n }\n : {\n onClick: () => handleOnChange(chip.value, chipSelected),\n onKeyPress: () => handleOnChange(chip.value, chipSelected),\n })}\n />\n );\n })}\n </div>\n );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","clsx","role","undefined","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;AAED,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,SAAI,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AAC9C,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAGe,SAAU;AAAAC,IAAAA,QAAA,EAE1CrB,KAAK,CAACsB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGhB,UAAU,CAACe,IAAI,CAACd,KAAK,CAAC,CAAA;MAC3C,oBACEQ,cAAA,CAACQ,IAAI,EAAA;AAEHN,QAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAG,UAAW;AACvC,QAAA,cAAA,EAAcmB,YAAa;QAC3Bf,KAAK,EAAEc,IAAI,CAACd,KAAM;QAClBiB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAErB,IAAI,CAACsB,aAAa,CAACC,cAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,SAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEM,YAAY;UACjC,OAAO,EAAEnB,QAAQ,IAAImB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACEnB,QAAQ,IAAImB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMlB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAA;AACxD,SAAA,GACD;UACEQ,OAAO,EAAEA,MAAMnB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMpB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAA;SAC1D,CAAA;OAnBAD,EAAAA,IAAI,CAACd,KAoBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}
|
package/build/chips/Chips.mjs
CHANGED
|
@@ -27,6 +27,8 @@ const Chips = ({
|
|
|
27
27
|
children: chips.map(chip => {
|
|
28
28
|
const chipSelected = isSelected(chip.value);
|
|
29
29
|
return /*#__PURE__*/jsx(Chip, {
|
|
30
|
+
role: !multiple ? 'radio' : 'checkbox',
|
|
31
|
+
"aria-checked": chipSelected,
|
|
30
32
|
value: chip.value,
|
|
31
33
|
label: chip.label,
|
|
32
34
|
closeButton: {
|
|
@@ -39,13 +41,10 @@ const Chips = ({
|
|
|
39
41
|
'p-r-1': multiple && chipSelected
|
|
40
42
|
}),
|
|
41
43
|
...(multiple && chipSelected ? {
|
|
42
|
-
onRemove: () => handleOnChange(chip.value, chipSelected)
|
|
43
|
-
'aria-label': chip.label
|
|
44
|
+
onRemove: () => handleOnChange(chip.value, chipSelected)
|
|
44
45
|
} : {
|
|
45
46
|
onClick: () => handleOnChange(chip.value, chipSelected),
|
|
46
|
-
onKeyPress: () => handleOnChange(chip.value, chipSelected)
|
|
47
|
-
role: !multiple ? 'radio' : undefined,
|
|
48
|
-
'aria-checked': chipSelected
|
|
47
|
+
onKeyPress: () => handleOnChange(chip.value, chipSelected)
|
|
49
48
|
})
|
|
50
49
|
}, chip.value);
|
|
51
50
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chips.mjs","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n value: ChipValue;\n label: string;\n};\n\nexport type ChipsProps = CommonProps &\n AriaLabelProperty & {\n /** List of chips with string labels and string/number values */\n chips: readonly Chip[];\n /** Callback which is invoked when a chip is selected or deselected */\n onChange: ({\n isEnabled,\n selectedValue,\n }: {\n isEnabled: boolean;\n selectedValue: ChipValue;\n }) => void;\n /** Used to manage which chips are selected */\n selected: ChipValue | readonly ChipValue[];\n /** Used to activate multi-selection */\n multiple?: boolean;\n };\n\nconst Chips = ({\n chips,\n onChange,\n selected,\n 'aria-label': ariaLabel,\n className,\n multiple,\n}: ChipsProps) => {\n const intl = useIntl();\n\n const isSelected = (value: ChipValue) =>\n Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n };\n\n return (\n <div\n className={clsx('np-chips d-flex', className)}\n aria-label={ariaLabel}\n role={!multiple ? 'radiogroup' : undefined}\n >\n {chips.map((chip) => {\n const chipSelected = isSelected(chip.value);\n return (\n <Chip\n key={chip.value}\n value={chip.value}\n label={chip.label}\n closeButton={{\n 'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n }}\n className={clsx('text-xs-nowrap', {\n 'np-chip--selected': chipSelected,\n 'p-r-1': multiple && chipSelected,\n })}\n {...(multiple && chipSelected\n ? {\n onRemove: () => handleOnChange(chip.value, chipSelected),\n
|
|
1
|
+
{"version":3,"file":"Chips.mjs","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n value: ChipValue;\n label: string;\n};\n\nexport type ChipsProps = CommonProps &\n AriaLabelProperty & {\n /** List of chips with string labels and string/number values */\n chips: readonly Chip[];\n /** Callback which is invoked when a chip is selected or deselected */\n onChange: ({\n isEnabled,\n selectedValue,\n }: {\n isEnabled: boolean;\n selectedValue: ChipValue;\n }) => void;\n /** Used to manage which chips are selected */\n selected: ChipValue | readonly ChipValue[];\n /** Used to activate multi-selection */\n multiple?: boolean;\n };\n\nconst Chips = ({\n chips,\n onChange,\n selected,\n 'aria-label': ariaLabel,\n className,\n multiple,\n}: ChipsProps) => {\n const intl = useIntl();\n\n const isSelected = (value: ChipValue) =>\n Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n };\n\n return (\n <div\n className={clsx('np-chips d-flex', className)}\n aria-label={ariaLabel}\n role={!multiple ? 'radiogroup' : undefined}\n >\n {chips.map((chip) => {\n const chipSelected = isSelected(chip.value);\n return (\n <Chip\n key={chip.value}\n role={!multiple ? 'radio' : 'checkbox'}\n aria-checked={chipSelected}\n value={chip.value}\n label={chip.label}\n closeButton={{\n 'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n }}\n className={clsx('text-xs-nowrap', {\n 'np-chip--selected': chipSelected,\n 'p-r-1': multiple && chipSelected,\n })}\n {...(multiple && chipSelected\n ? {\n onRemove: () => handleOnChange(chip.value, chipSelected),\n }\n : {\n onClick: () => handleOnChange(chip.value, chipSelected),\n onKeyPress: () => handleOnChange(chip.value, chipSelected),\n })}\n />\n );\n })}\n </div>\n );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","clsx","role","undefined","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;AAED,EAAA,oBACEG,GAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,IAAI,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AAC9C,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAGe,SAAU;AAAAC,IAAAA,QAAA,EAE1CrB,KAAK,CAACsB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGhB,UAAU,CAACe,IAAI,CAACd,KAAK,CAAC,CAAA;MAC3C,oBACEQ,GAAA,CAACQ,IAAI,EAAA;AAEHN,QAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAG,UAAW;AACvC,QAAA,cAAA,EAAcmB,YAAa;QAC3Bf,KAAK,EAAEc,IAAI,CAACd,KAAM;QAClBiB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAErB,IAAI,CAACsB,aAAa,CAACC,QAAQ,CAAC1B,SAAS,EAAE;YAAE2B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFtB,QAAAA,SAAS,EAAEc,IAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEM,YAAY;UACjC,OAAO,EAAEnB,QAAQ,IAAImB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACEnB,QAAQ,IAAImB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMlB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAA;AACxD,SAAA,GACD;UACEQ,OAAO,EAAEA,MAAMnB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMpB,cAAc,CAACU,IAAI,CAACd,KAAK,EAAEe,YAAY,CAAA;SAC1D,CAAA;OAnBAD,EAAAA,IAAI,CAACd,KAoBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/chips/Chips.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAK3D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,iBAAiB,GAAG;IAClB,gEAAgE;IAChE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,aAAa,GACd,EAAE;QACD,SAAS,EAAE,OAAO,CAAC;QACnB,aAAa,EAAE,SAAS,CAAC;KAC1B,KAAK,IAAI,CAAC;IACX,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,GAAG,SAAS,SAAS,EAAE,CAAC;IAC3C,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,QAAA,MAAM,KAAK,iFAOR,UAAU,
|
|
1
|
+
{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/chips/Chips.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAK3D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,iBAAiB,GAAG;IAClB,gEAAgE;IAChE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,aAAa,GACd,EAAE;QACD,SAAS,EAAE,OAAO,CAAC;QACnB,aAAa,EAAE,SAAS,CAAC;KAC1B,KAAK,IAAI,CAAC;IACX,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,GAAG,SAAS,SAAS,EAAE,CAAC;IAC3C,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,QAAA,MAAM,KAAK,iFAOR,UAAU,gCA6CZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.61.
|
|
3
|
+
"version": "46.61.1",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -92,9 +92,9 @@
|
|
|
92
92
|
"rollup": "^4.18.1",
|
|
93
93
|
"rollup-preserve-directives": "^1.1.1",
|
|
94
94
|
"storybook": "^8.2.2",
|
|
95
|
-
"@transferwise/less-config": "3.1.0",
|
|
96
95
|
"@transferwise/neptune-css": "14.14.0",
|
|
97
|
-
"@wise/components-theming": "1.6.0"
|
|
96
|
+
"@wise/components-theming": "1.6.0",
|
|
97
|
+
"@transferwise/less-config": "3.1.0"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"@transferwise/icons": "^3.7.0",
|
package/src/chips/Chips.spec.tsx
CHANGED
|
@@ -85,7 +85,7 @@ describe('Chips', () => {
|
|
|
85
85
|
|
|
86
86
|
it(`will pass previous state, updated state, and cleared value on clear`, () => {
|
|
87
87
|
render(<Chips {...filterProps} />);
|
|
88
|
-
fireEvent.click(screen.
|
|
88
|
+
fireEvent.click(screen.getByRole('button', { name: 'Clear Payments' }));
|
|
89
89
|
expect(filterProps.onChange).toHaveBeenCalledWith({
|
|
90
90
|
selectedValue: 'payments',
|
|
91
91
|
isEnabled: false,
|
package/src/chips/Chips.tsx
CHANGED
|
@@ -59,6 +59,8 @@ const Chips = ({
|
|
|
59
59
|
return (
|
|
60
60
|
<Chip
|
|
61
61
|
key={chip.value}
|
|
62
|
+
role={!multiple ? 'radio' : 'checkbox'}
|
|
63
|
+
aria-checked={chipSelected}
|
|
62
64
|
value={chip.value}
|
|
63
65
|
label={chip.label}
|
|
64
66
|
closeButton={{
|
|
@@ -71,13 +73,10 @@ const Chips = ({
|
|
|
71
73
|
{...(multiple && chipSelected
|
|
72
74
|
? {
|
|
73
75
|
onRemove: () => handleOnChange(chip.value, chipSelected),
|
|
74
|
-
'aria-label': chip.label,
|
|
75
76
|
}
|
|
76
77
|
: {
|
|
77
78
|
onClick: () => handleOnChange(chip.value, chipSelected),
|
|
78
79
|
onKeyPress: () => handleOnChange(chip.value, chipSelected),
|
|
79
|
-
role: !multiple ? 'radio' : undefined,
|
|
80
|
-
'aria-checked': chipSelected,
|
|
81
80
|
})}
|
|
82
81
|
/>
|
|
83
82
|
);
|
|
@@ -72,7 +72,7 @@ exports[`Chips Filter Chips renders as expected 1`] = `
|
|
|
72
72
|
<div
|
|
73
73
|
aria-checked="false"
|
|
74
74
|
class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
|
|
75
|
-
role="
|
|
75
|
+
role="checkbox"
|
|
76
76
|
tabindex="0"
|
|
77
77
|
>
|
|
78
78
|
<span
|
|
@@ -85,7 +85,7 @@ exports[`Chips Filter Chips renders as expected 1`] = `
|
|
|
85
85
|
<div
|
|
86
86
|
aria-checked="false"
|
|
87
87
|
class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
|
|
88
|
-
role="
|
|
88
|
+
role="checkbox"
|
|
89
89
|
tabindex="0"
|
|
90
90
|
>
|
|
91
91
|
<span
|
|
@@ -98,7 +98,7 @@ exports[`Chips Filter Chips renders as expected 1`] = `
|
|
|
98
98
|
<div
|
|
99
99
|
aria-checked="false"
|
|
100
100
|
class="np-chip d-flex align-items-center justify-content-between text-xs-nowrap"
|
|
101
|
-
role="
|
|
101
|
+
role="checkbox"
|
|
102
102
|
tabindex="0"
|
|
103
103
|
>
|
|
104
104
|
<span
|
|
@@ -109,8 +109,9 @@ exports[`Chips Filter Chips renders as expected 1`] = `
|
|
|
109
109
|
</span>
|
|
110
110
|
</div>
|
|
111
111
|
<div
|
|
112
|
-
aria-
|
|
112
|
+
aria-checked="true"
|
|
113
113
|
class="np-chip d-flex align-items-center justify-content-between np-chip--removable text-xs-nowrap np-chip--selected p-r-1"
|
|
114
|
+
role="checkbox"
|
|
114
115
|
tabindex="-1"
|
|
115
116
|
>
|
|
116
117
|
<span
|