@transferwise/components 0.0.0-experimental-bfa3811 → 0.0.0-experimental-db49ba8
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/Chip/Chip.js +4 -11
- package/build/Chips/Chip/Chip.js.map +1 -1
- package/build/Chips/Chip/Chip.mjs +4 -11
- package/build/Chips/Chip/Chip.mjs.map +1 -1
- package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js +1 -0
- package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js.map +1 -1
- package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs +1 -0
- package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs.map +1 -1
- package/build/FlowNavigation/FlowNavigation.js +2 -1
- package/build/FlowNavigation/FlowNavigation.js.map +1 -1
- package/build/FlowNavigation/FlowNavigation.mjs +2 -1
- package/build/FlowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/Typeahead/Typeahead.js +4 -17
- package/build/Typeahead/Typeahead.js.map +1 -1
- package/build/Typeahead/Typeahead.mjs +4 -17
- package/build/Typeahead/Typeahead.mjs.map +1 -1
- package/build/Typeahead/TypeaheadInput/TypeaheadInput.js +0 -2
- package/build/Typeahead/TypeaheadInput/TypeaheadInput.js.map +1 -1
- package/build/Typeahead/TypeaheadInput/TypeaheadInput.mjs +0 -2
- package/build/Typeahead/TypeaheadInput/TypeaheadInput.mjs.map +1 -1
- package/build/main.css +7 -3
- package/build/styles/FlowNavigation/AnimatedLabel/AnimatedLabel.css +1 -0
- package/build/styles/FlowNavigation/FlowNavigation.css +6 -0
- package/build/styles/Typeahead/Typeahead.css +0 -3
- package/build/styles/main.css +7 -3
- package/build/types/Chips/Chip/Chip.d.ts +1 -3
- package/build/types/Chips/Chip/Chip.d.ts.map +1 -1
- package/build/types/FlowNavigation/AnimatedLabel/AnimatedLabel.d.ts.map +1 -1
- package/build/types/Typeahead/Typeahead.d.ts +0 -2
- package/build/types/Typeahead/Typeahead.d.ts.map +1 -1
- package/build/types/Typeahead/TypeaheadInput/TypeaheadInput.d.ts +1 -1
- package/build/types/Typeahead/TypeaheadInput/TypeaheadInput.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/Chips/Chip/Chip.tsx +3 -11
- package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.css +1 -0
- package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.less +1 -0
- package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx +5 -0
- package/src/FlowNavigation/FlowNavigation.css +6 -0
- package/src/FlowNavigation/FlowNavigation.less +7 -0
- package/src/FlowNavigation/FlowNavigation.tsx +2 -2
- package/src/FlowNavigation/_stories/FlowNavigation.test.story.tsx +25 -0
- package/src/Typeahead/Typeahead.css +0 -3
- package/src/Typeahead/Typeahead.less +0 -4
- package/src/Typeahead/Typeahead.test.tsx +0 -73
- package/src/Typeahead/Typeahead.tsx +3 -18
- package/src/Typeahead/TypeaheadInput/TypeaheadInput.tsx +1 -6
- package/src/Typeahead/_stories/Typeahead.story.tsx +0 -1
- package/src/Typeahead/_stories/Typeahead.test.story.tsx +0 -41
- package/src/main.css +7 -3
- package/src/Chips/Chip/Chip.test.tsx +0 -34
package/build/Chips/Chip/Chip.js
CHANGED
|
@@ -34,7 +34,6 @@ const Chip = ({
|
|
|
34
34
|
onRemove,
|
|
35
35
|
onClick,
|
|
36
36
|
onKeyPress,
|
|
37
|
-
disabled = false,
|
|
38
37
|
className = undefined,
|
|
39
38
|
'aria-label': ariaLabel,
|
|
40
39
|
'aria-checked': ariaChecked,
|
|
@@ -42,10 +41,8 @@ const Chip = ({
|
|
|
42
41
|
closeButton
|
|
43
42
|
}) => {
|
|
44
43
|
const isActionable = onClick || onKeyPress;
|
|
45
|
-
const isInteractive = isActionable && !disabled;
|
|
46
44
|
const defaultRole = isActionable ? 'button' : undefined;
|
|
47
|
-
const
|
|
48
|
-
const tabIndex = isInteractive ? 0 : -1;
|
|
45
|
+
const tabIndex = isActionable ? 0 : -1;
|
|
49
46
|
const closeButtonReference = React.useRef(null);
|
|
50
47
|
const previousCloseButtonShown = React.useRef(undefined);
|
|
51
48
|
React.useEffect(() => {
|
|
@@ -55,15 +52,12 @@ const Chip = ({
|
|
|
55
52
|
previousCloseButtonShown.current = closeButtonReference.current != null;
|
|
56
53
|
}, [onRemove]);
|
|
57
54
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
58
|
-
role:
|
|
55
|
+
role: role ?? defaultRole,
|
|
59
56
|
tabIndex: tabIndex,
|
|
60
57
|
"aria-label": ariaLabel,
|
|
61
58
|
"aria-checked": ariaChecked,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
disabled
|
|
65
|
-
}, className),
|
|
66
|
-
...(isInteractive && {
|
|
59
|
+
className: clsx.clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
|
|
60
|
+
...(isActionable && {
|
|
67
61
|
onClick,
|
|
68
62
|
onKeyPress
|
|
69
63
|
}),
|
|
@@ -77,7 +71,6 @@ const Chip = ({
|
|
|
77
71
|
"aria-label": closeButton?.['aria-label'],
|
|
78
72
|
size: "sm",
|
|
79
73
|
filled: true,
|
|
80
|
-
isDisabled: disabled,
|
|
81
74
|
onClick: onRemove
|
|
82
75
|
}) : null]
|
|
83
76
|
}, value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n value?: T;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n value?: T;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: ChipProps<T>) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className=\"btn-unstyled\"\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,eAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,cAAA,CAACC,YAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;"}
|
|
@@ -30,7 +30,6 @@ const Chip = ({
|
|
|
30
30
|
onRemove,
|
|
31
31
|
onClick,
|
|
32
32
|
onKeyPress,
|
|
33
|
-
disabled = false,
|
|
34
33
|
className = undefined,
|
|
35
34
|
'aria-label': ariaLabel,
|
|
36
35
|
'aria-checked': ariaChecked,
|
|
@@ -38,10 +37,8 @@ const Chip = ({
|
|
|
38
37
|
closeButton
|
|
39
38
|
}) => {
|
|
40
39
|
const isActionable = onClick || onKeyPress;
|
|
41
|
-
const isInteractive = isActionable && !disabled;
|
|
42
40
|
const defaultRole = isActionable ? 'button' : undefined;
|
|
43
|
-
const
|
|
44
|
-
const tabIndex = isInteractive ? 0 : -1;
|
|
41
|
+
const tabIndex = isActionable ? 0 : -1;
|
|
45
42
|
const closeButtonReference = useRef(null);
|
|
46
43
|
const previousCloseButtonShown = useRef(undefined);
|
|
47
44
|
useEffect(() => {
|
|
@@ -51,15 +48,12 @@ const Chip = ({
|
|
|
51
48
|
previousCloseButtonShown.current = closeButtonReference.current != null;
|
|
52
49
|
}, [onRemove]);
|
|
53
50
|
return /*#__PURE__*/jsxs("div", {
|
|
54
|
-
role:
|
|
51
|
+
role: role ?? defaultRole,
|
|
55
52
|
tabIndex: tabIndex,
|
|
56
53
|
"aria-label": ariaLabel,
|
|
57
54
|
"aria-checked": ariaChecked,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
disabled
|
|
61
|
-
}, className),
|
|
62
|
-
...(isInteractive && {
|
|
55
|
+
className: clsx('np-chip', 'd-flex', 'align-items-center', 'justify-content-between', onRemove ? 'np-chip--removable' : '', className),
|
|
56
|
+
...(isActionable && {
|
|
63
57
|
onClick,
|
|
64
58
|
onKeyPress
|
|
65
59
|
}),
|
|
@@ -73,7 +67,6 @@ const Chip = ({
|
|
|
73
67
|
"aria-label": closeButton?.['aria-label'],
|
|
74
68
|
size: "sm",
|
|
75
69
|
filled: true,
|
|
76
|
-
isDisabled: disabled,
|
|
77
70
|
onClick: onRemove
|
|
78
71
|
}) : null]
|
|
79
72
|
}, value);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.mjs","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n value?: T;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n
|
|
1
|
+
{"version":3,"file":"Chip.mjs","sources":["../../../src/Chips/Chip/Chip.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../../Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../../common';\nimport { CloseButton } from '../../common/CloseButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type ChipProps<T extends ChipValue = ChipValue> = {\n value?: T;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = <T extends ChipValue = ChipValue>({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: ChipProps<T>) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className=\"btn-unstyled\"\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAI,GAAGA,CAAkC;EAC7CC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA;AAAW,CACE,KAAI;AACjB,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;AAEtC,EAAA,MAAMG,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBT,SAAS,CAAC;AACvEW,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE;AACvC,IAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI;AACzE,EAAA,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;AAEd,EAAA,oBACEkB,IAAA,CAAA,KAAA,EAAA;IAEEX,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEgB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBnB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA;KAAY,CAAA;IAAAkB,QAAA,EAAA,cAE5CC,GAAA,CAACC,IAAI,EAAA;MAAC,aAAA,EAAa,CAAC,CAACtB,QAAS;MAACuB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DtB;AAAK,KACF,CACN,EAACE,QAAQ,gBACPqB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,cAAc;MACxB,YAAA,EAAYK,WAAW,GAAG,YAAY,CAAE;AACxCoB,MAAAA,IAAI,EAAC,IAAI;MACTC,MAAM,EAAA,IAAA;AACN5B,MAAAA,OAAO,EAAED;KAAS,CAClB,GACA,IAAI;AAAA,GAAA,EA3BHD,KA4BF,CAAC;AAEV;;"}
|
|
@@ -35,6 +35,7 @@ const AnimatedLabel = ({
|
|
|
35
35
|
"aria-haspopup": "menu",
|
|
36
36
|
"aria-controls": overlayId,
|
|
37
37
|
"aria-expanded": showSteps,
|
|
38
|
+
title: typeof steps[activeLabel]?.label === 'string' ? steps[activeLabel].label : undefined,
|
|
38
39
|
className: clsx.clsx('np-animated-label', 'btn-unstyled', 'np-text-body-large-bold', className),
|
|
39
40
|
onClick: () => setShowSteps(true),
|
|
40
41
|
children: steps.map(({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedLabel.js","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' || event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","
|
|
1
|
+
{"version":3,"file":"AnimatedLabel.js","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n title={\n typeof steps[activeLabel]?.label === 'string'\n ? steps[activeLabel].label\n : undefined\n }\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' || event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","title","label","undefined","clsx","map","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;AAAEC,EAAAA;AAAK,CAAsB,KAAI;AAC9E,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;EACvB,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAEjD,SAASC,gBAAgBA,CAACC,OAAwB,EAAA;AAChD,IAAA,OAAO,MAAK;MACVH,YAAY,CAAC,KAAK,CAAC;AACnBG,MAAAA,OAAO,IAAI;IACb,CAAC;AACH,EAAA;EAEA,oBACEC,cAAA,CAACC,mCAAiB,EAAA;AAACC,IAAAA,IAAI,EAAEP,SAAU;AAAAQ,IAAAA,QAAA,eACjCH,cAAA,CAACI,kCAAgB,CAACC,QAAQ,EAAA;MAAAF,QAAA,EACtBG,SAAS,IAAI;QACb,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAL,UAAAA,QAAA,gBACEH,cAAA,CAAA,QAAA,EAAA;AACES,YAAAA,IAAI,EAAC,QAAQ;AACbC,YAAAA,EAAE,EAAEjB,OAAQ;AACZ,YAAA,eAAA,EAAc,MAAM;AACpB,YAAA,eAAA,EAAea,SAAU;AACzB,YAAA,eAAA,EAAeX,SAAU;AACzBgB,YAAAA,KAAK,EACH,OAAOnB,KAAK,CAACF,WAAW,CAAC,EAAEsB,KAAK,KAAK,QAAQ,GACzCpB,KAAK,CAACF,WAAW,CAAC,CAACsB,KAAK,GACxBC,SACL;YACDtB,SAAS,EAAEuB,SAAI,CACb,mBAAmB,EACnB,cAAc,EACd,yBAAyB,EACzBvB,SAAS,CACT;AACFQ,YAAAA,OAAO,EAAEA,MAAMH,YAAY,CAAC,IAAI,CAAE;AAAAO,YAAAA,QAAA,EAEjCX,KAAK,CAACuB,GAAG,CAAC,CAAC;AAAEH,cAAAA;aAAO,EAAEI,KAAK,KAAI;AAC9B,cAAA,MAAMC,aAAa,GAAG3B,WAAW,KAAK0B,KAAK;AAC3C,cAAA,MAAME,aAAa,GAAGF,KAAK,GAAG,CAAC;AAC/B,cAAA,oBACET,eAAA,CAAA,KAAA,EAAA;AAEE,gBAAA,aAAA,EAAa,CAACU,aAAc;gBAC5B1B,SAAS,EAAEuB,SAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE;AACvE,kBAAA,yCAAyC,EAAEG;AAC5C,iBAAA,CAAE;gBAAAd,QAAA,EAAA,CAEFS,KAAK,EAAE,GAAA,eAAAZ,cAAA,CAACmB,iBAAW,EAAA,EAAA,CACtB;AAAA,eAAA,EAPOD,aAOF,CAAC;YAEV,CAAC;AAAC,WACI,CACR,eAAAlB,cAAA,CAACoB,mBAAW,EAAA;AACVC,YAAAA,IAAI,EAAC,MAAM;AACX,YAAA,iBAAA,EAAiB5B,OAAQ;AACzBS,YAAAA,IAAI,EAAEP,SAAU;AAChB2B,YAAAA,OAAO,EAAEA,MAAM1B,YAAY,CAAC,KAAK,CAAE;YAAAO,QAAA,eAEnCH,cAAA,CAACuB,YAAI,EAAA;AAAChC,cAAAA,SAAS,EAAC,aAAa;cAAAY,QAAA,EAC1BX,KAAK,CAACuB,GAAG,CAAC,CAACS,IAAI,EAAER,KAAK,KAAI;AACzB,gBAAA,MAAMC,aAAa,GAAG3B,WAAW,KAAK0B,KAAK;AAC3C,gBAAA,MAAMS,UAAU,GAAGnC,WAAW,GAAG0B,KAAK;AACtC,gBAAA,MAAMU,MAAM,GAAG,CAAA,KAAA,EAAQV,KAAK,CAAA,CAAE;gBAC9B,oBACEhB,cAAA,CAAC2B,cAAM,EAAA;AAELjB,kBAAAA,EAAE,EAAEgB,MAAO;AACXE,kBAAAA,EAAE,EAAC,IAAI;AACPP,kBAAAA,IAAI,EAAC,UAAU;AACfQ,kBAAAA,QAAQ,EAAE,KAAM;kBAChBtC,SAAS,EAAEuB,SAAI,CAAC,0BAA0B,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AACrEgB,oBAAAA,SAAS,EAAE,CAACL;AACb,mBAAA,CAAE;kBACHd,KAAK,EAAEa,IAAI,CAACZ,KAAM;kBAClBmB,OAAO,EAAEP,IAAI,CAACQ,UAAW;AACzBC,kBAAAA,MAAM,EAAEhB,aAAa,gBAAGjB,cAAA,CAACkC,WAAK,EAAA;AAACC,oBAAAA,IAAI,EAAE;oBAAM,GAAG,IAAK;AACnD,kBAAA,cAAA,EAAclB,aAAa,GAAG,MAAM,GAAG,KAAM;AAC7C,kBAAA,eAAA,EAAeQ,UAAW;AAC1BW,kBAAAA,QAAQ,EAAEX,UAAW;kBACrBY,kBAAkB,EAAA,IAAA;kBAAA,IACb,CAACZ,UAAU,IAAI;AAClBa,oBAAAA,QAAQ,EAAE,CAAC;AACXvC,oBAAAA,OAAO,EAAED,gBAAgB,CAAC0B,IAAI,CAACzB,OAAO,CAAC;oBACvCwC,SAAS,EAAGC,KAAK,IAAI;sBACnBA,KAAK,CAACC,cAAc,EAAE;sBACtB,IAAID,KAAK,CAACE,IAAI,KAAK,OAAO,IAAIF,KAAK,CAACE,IAAI,KAAK,OAAO,EAAE;AACpD5C,wBAAAA,gBAAgB,CAAC0B,IAAI,CAACzB,OAAO,CAAC,EAAE;AAClC,sBAAA;AACF,oBAAA;mBACD;AAAA,iBAAA,EAxBI2B,MAwBF,CACH;cAEN,CAAC;aACG;AACR,WAAa,CACf;AAAA,SAAA,CAAG;AAEP,MAAA;KACyB;AAC7B,GAAmB,CAAC;AAExB;;"}
|
|
@@ -31,6 +31,7 @@ const AnimatedLabel = ({
|
|
|
31
31
|
"aria-haspopup": "menu",
|
|
32
32
|
"aria-controls": overlayId,
|
|
33
33
|
"aria-expanded": showSteps,
|
|
34
|
+
title: typeof steps[activeLabel]?.label === 'string' ? steps[activeLabel].label : undefined,
|
|
34
35
|
className: clsx('np-animated-label', 'btn-unstyled', 'np-text-body-large-bold', className),
|
|
35
36
|
onClick: () => setShowSteps(true),
|
|
36
37
|
children: steps.map(({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' || event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","
|
|
1
|
+
{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n title={\n typeof steps[activeLabel]?.label === 'string'\n ? steps[activeLabel].label\n : undefined\n }\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' || event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","title","label","undefined","clsx","map","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":";;;;;;;;;AAgBA,MAAMA,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;AAAEC,EAAAA;AAAK,CAAsB,KAAI;AAC9E,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;EACvB,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEjD,SAASC,gBAAgBA,CAACC,OAAwB,EAAA;AAChD,IAAA,OAAO,MAAK;MACVH,YAAY,CAAC,KAAK,CAAC;AACnBG,MAAAA,OAAO,IAAI;IACb,CAAC;AACH,EAAA;EAEA,oBACEC,GAAA,CAACC,iBAAiB,EAAA;AAACC,IAAAA,IAAI,EAAEP,SAAU;AAAAQ,IAAAA,QAAA,eACjCH,GAAA,CAACI,gBAAgB,CAACC,QAAQ,EAAA;MAAAF,QAAA,EACtBG,SAAS,IAAI;QACb,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAL,UAAAA,QAAA,gBACEH,GAAA,CAAA,QAAA,EAAA;AACES,YAAAA,IAAI,EAAC,QAAQ;AACbC,YAAAA,EAAE,EAAEjB,OAAQ;AACZ,YAAA,eAAA,EAAc,MAAM;AACpB,YAAA,eAAA,EAAea,SAAU;AACzB,YAAA,eAAA,EAAeX,SAAU;AACzBgB,YAAAA,KAAK,EACH,OAAOnB,KAAK,CAACF,WAAW,CAAC,EAAEsB,KAAK,KAAK,QAAQ,GACzCpB,KAAK,CAACF,WAAW,CAAC,CAACsB,KAAK,GACxBC,SACL;YACDtB,SAAS,EAAEuB,IAAI,CACb,mBAAmB,EACnB,cAAc,EACd,yBAAyB,EACzBvB,SAAS,CACT;AACFQ,YAAAA,OAAO,EAAEA,MAAMH,YAAY,CAAC,IAAI,CAAE;AAAAO,YAAAA,QAAA,EAEjCX,KAAK,CAACuB,GAAG,CAAC,CAAC;AAAEH,cAAAA;aAAO,EAAEI,KAAK,KAAI;AAC9B,cAAA,MAAMC,aAAa,GAAG3B,WAAW,KAAK0B,KAAK;AAC3C,cAAA,MAAME,aAAa,GAAGF,KAAK,GAAG,CAAC;AAC/B,cAAA,oBACET,IAAA,CAAA,KAAA,EAAA;AAEE,gBAAA,aAAA,EAAa,CAACU,aAAc;gBAC5B1B,SAAS,EAAEuB,IAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE;AACvE,kBAAA,yCAAyC,EAAEG;AAC5C,iBAAA,CAAE;gBAAAd,QAAA,EAAA,CAEFS,KAAK,EAAE,GAAA,eAAAZ,GAAA,CAACmB,WAAW,EAAA,EAAA,CACtB;AAAA,eAAA,EAPOD,aAOF,CAAC;YAEV,CAAC;AAAC,WACI,CACR,eAAAlB,GAAA,CAACoB,WAAW,EAAA;AACVC,YAAAA,IAAI,EAAC,MAAM;AACX,YAAA,iBAAA,EAAiB5B,OAAQ;AACzBS,YAAAA,IAAI,EAAEP,SAAU;AAChB2B,YAAAA,OAAO,EAAEA,MAAM1B,YAAY,CAAC,KAAK,CAAE;YAAAO,QAAA,eAEnCH,GAAA,CAACuB,IAAI,EAAA;AAAChC,cAAAA,SAAS,EAAC,aAAa;cAAAY,QAAA,EAC1BX,KAAK,CAACuB,GAAG,CAAC,CAACS,IAAI,EAAER,KAAK,KAAI;AACzB,gBAAA,MAAMC,aAAa,GAAG3B,WAAW,KAAK0B,KAAK;AAC3C,gBAAA,MAAMS,UAAU,GAAGnC,WAAW,GAAG0B,KAAK;AACtC,gBAAA,MAAMU,MAAM,GAAG,CAAA,KAAA,EAAQV,KAAK,CAAA,CAAE;gBAC9B,oBACEhB,GAAA,CAAC2B,MAAM,EAAA;AAELjB,kBAAAA,EAAE,EAAEgB,MAAO;AACXE,kBAAAA,EAAE,EAAC,IAAI;AACPP,kBAAAA,IAAI,EAAC,UAAU;AACfQ,kBAAAA,QAAQ,EAAE,KAAM;kBAChBtC,SAAS,EAAEuB,IAAI,CAAC,0BAA0B,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AACrEgB,oBAAAA,SAAS,EAAE,CAACL;AACb,mBAAA,CAAE;kBACHd,KAAK,EAAEa,IAAI,CAACZ,KAAM;kBAClBmB,OAAO,EAAEP,IAAI,CAACQ,UAAW;AACzBC,kBAAAA,MAAM,EAAEhB,aAAa,gBAAGjB,GAAA,CAACkC,KAAK,EAAA;AAACC,oBAAAA,IAAI,EAAE;oBAAM,GAAG,IAAK;AACnD,kBAAA,cAAA,EAAclB,aAAa,GAAG,MAAM,GAAG,KAAM;AAC7C,kBAAA,eAAA,EAAeQ,UAAW;AAC1BW,kBAAAA,QAAQ,EAAEX,UAAW;kBACrBY,kBAAkB,EAAA,IAAA;kBAAA,IACb,CAACZ,UAAU,IAAI;AAClBa,oBAAAA,QAAQ,EAAE,CAAC;AACXvC,oBAAAA,OAAO,EAAED,gBAAgB,CAAC0B,IAAI,CAACzB,OAAO,CAAC;oBACvCwC,SAAS,EAAGC,KAAK,IAAI;sBACnBA,KAAK,CAACC,cAAc,EAAE;sBACtB,IAAID,KAAK,CAACE,IAAI,KAAK,OAAO,IAAIF,KAAK,CAACE,IAAI,KAAK,OAAO,EAAE;AACpD5C,wBAAAA,gBAAgB,CAAC0B,IAAI,CAACzB,OAAO,CAAC,EAAE;AAClC,sBAAA;AACF,oBAAA;mBACD;AAAA,iBAAA,EAxBI2B,MAwBF,CACH;cAEN,CAAC;aACG;AACR,WAAa,CACf;AAAA,SAAA,CAAG;AAEP,MAAA;KACyB;AAC7B,GAAmB,CAAC;AAExB;;"}
|
|
@@ -78,7 +78,8 @@ const FlowNavigation = ({
|
|
|
78
78
|
'np-flow-navigation--sm': screenSm,
|
|
79
79
|
'np-flow-navigation--lg': screenLg
|
|
80
80
|
}),
|
|
81
|
-
leftContent: /*#__PURE__*/jsxRuntime.jsxs(
|
|
81
|
+
leftContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
82
|
+
className: "np-flow-navigation__left",
|
|
82
83
|
children: [!screenSm && displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
|
|
83
84
|
size: 40,
|
|
84
85
|
priority: "tertiary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowNavigation.js","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /** Optional critical banner data, to be displayed above the flow navigation. */\n banner?: CriticalBannerProps | null;\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n banner = null,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n
|
|
1
|
+
{"version":3,"file":"FlowNavigation.js","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /** Optional critical banner data, to be displayed above the flow navigation. */\n banner?: CriticalBannerProps | null;\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n banner = null,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <div className=\"np-flow-navigation__left\">\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && hasSteps && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </div>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && hasSteps ? (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n ) : null\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n );\n\n return (\n <>\n {banner && <CriticalBanner {...banner} />}\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n 'np-flow-navigation--no-steps': !hasSteps || done,\n })}\n >\n {flowHeaderContent}\n </Container>\n </>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","banner","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","_Fragment","CriticalBanner","Container"],"mappings":"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"}
|
|
@@ -74,7 +74,8 @@ const FlowNavigation = ({
|
|
|
74
74
|
'np-flow-navigation--sm': screenSm,
|
|
75
75
|
'np-flow-navigation--lg': screenLg
|
|
76
76
|
}),
|
|
77
|
-
leftContent: /*#__PURE__*/jsxs(
|
|
77
|
+
leftContent: /*#__PURE__*/jsxs("div", {
|
|
78
|
+
className: "np-flow-navigation__left",
|
|
78
79
|
children: [!screenSm && displayGoBack ? /*#__PURE__*/jsx(IconButton, {
|
|
79
80
|
size: 40,
|
|
80
81
|
priority: "tertiary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /** Optional critical banner data, to be displayed above the flow navigation. */\n banner?: CriticalBannerProps | null;\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n banner = null,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n
|
|
1
|
+
{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /** Optional critical banner data, to be displayed above the flow navigation. */\n banner?: CriticalBannerProps | null;\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n banner = null,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <div className=\"np-flow-navigation__left\">\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && hasSteps && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </div>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && hasSteps ? (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n ) : null\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n );\n\n return (\n <>\n {banner && <CriticalBanner {...banner} />}\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n 'np-flow-navigation--no-steps': !hasSteps || done,\n })}\n >\n {flowHeaderContent}\n </Container>\n </>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","banner","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","_Fragment","CriticalBanner","Container"],"mappings":"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"}
|
|
@@ -67,7 +67,6 @@ class Typeahead extends React.Component {
|
|
|
67
67
|
autoFocus: false,
|
|
68
68
|
chipSeparators: [],
|
|
69
69
|
clearable: true,
|
|
70
|
-
disabled: false,
|
|
71
70
|
initialValue: [],
|
|
72
71
|
inputAutoComplete: 'new-password',
|
|
73
72
|
minQueryLength: DEFAULT_MIN_QUERY_LENGTH,
|
|
@@ -118,11 +117,6 @@ class Typeahead extends React.Component {
|
|
|
118
117
|
});
|
|
119
118
|
}
|
|
120
119
|
}
|
|
121
|
-
componentDidUpdate(previousProps) {
|
|
122
|
-
if (this.props.disabled && !previousProps.disabled) {
|
|
123
|
-
this.hideMenu();
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
120
|
componentWillUnmount() {
|
|
127
121
|
this.handleSearchDebounced.cancel();
|
|
128
122
|
}
|
|
@@ -378,9 +372,6 @@ class Typeahead extends React.Component {
|
|
|
378
372
|
}
|
|
379
373
|
};
|
|
380
374
|
renderChip = (option, idx) => {
|
|
381
|
-
const {
|
|
382
|
-
disabled
|
|
383
|
-
} = this.props;
|
|
384
375
|
const valid = this.props.validateChip?.(option);
|
|
385
376
|
return /*#__PURE__*/jsxRuntime.jsx(Chip.default, {
|
|
386
377
|
label: option.label,
|
|
@@ -388,8 +379,7 @@ class Typeahead extends React.Component {
|
|
|
388
379
|
'has-error': !valid,
|
|
389
380
|
'np-chip--valid': valid
|
|
390
381
|
}),
|
|
391
|
-
|
|
392
|
-
onRemove: disabled ? undefined : () => this.removeChip(option)
|
|
382
|
+
onRemove: () => this.removeChip(option)
|
|
393
383
|
}, idx);
|
|
394
384
|
};
|
|
395
385
|
renderMenu = ({
|
|
@@ -447,7 +437,6 @@ class Typeahead extends React.Component {
|
|
|
447
437
|
addon,
|
|
448
438
|
name,
|
|
449
439
|
clearable,
|
|
450
|
-
disabled,
|
|
451
440
|
allowNew,
|
|
452
441
|
footer,
|
|
453
442
|
showSuggestions,
|
|
@@ -467,8 +456,8 @@ class Typeahead extends React.Component {
|
|
|
467
456
|
optionsShown,
|
|
468
457
|
keyboardFocusedOptionIndex
|
|
469
458
|
} = this.state;
|
|
470
|
-
const clearButton =
|
|
471
|
-
const dropdownOpen =
|
|
459
|
+
const clearButton = clearable && (query || selected.length > 0);
|
|
460
|
+
const dropdownOpen = optionsShown && showSuggestions && query.length >= minQueryLength;
|
|
472
461
|
const menu = this.renderMenu({
|
|
473
462
|
footer,
|
|
474
463
|
options,
|
|
@@ -514,15 +503,13 @@ class Typeahead extends React.Component {
|
|
|
514
503
|
}),
|
|
515
504
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
516
505
|
className: clsx.clsx(`input-group input-group-${size}`, {
|
|
517
|
-
'input-group--has-error': hasError
|
|
518
|
-
disabled
|
|
506
|
+
'input-group--has-error': hasError
|
|
519
507
|
}),
|
|
520
508
|
children: [addon && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
521
509
|
className: "input-group-addon input-group-addon--search",
|
|
522
510
|
children: addon
|
|
523
511
|
}), /*#__PURE__*/jsxRuntime.jsx(TypeaheadInput.default, {
|
|
524
512
|
autoFocus,
|
|
525
|
-
disabled,
|
|
526
513
|
multiple,
|
|
527
514
|
dropdownOpen,
|
|
528
515
|
placeholder,
|