@transferwise/components 46.46.0 → 46.46.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/inputs/InputGroup.js +42 -46
- package/build/inputs/InputGroup.js.map +1 -1
- package/build/inputs/InputGroup.mjs +43 -47
- package/build/inputs/InputGroup.mjs.map +1 -1
- package/build/types/inputs/InputGroup.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/inputs/InputGroup.spec.tsx +6 -1
- package/src/inputs/InputGroup.tsx +39 -45
- package/src/inputs/SearchInput.spec.tsx +1 -1
- package/src/inputs/SelectInput.spec.tsx +1 -1
|
@@ -34,45 +34,25 @@ function InputGroup({
|
|
|
34
34
|
className,
|
|
35
35
|
children
|
|
36
36
|
}) {
|
|
37
|
-
const inputAttributes = contexts.useInputAttributes({
|
|
38
|
-
nonLabelable: true
|
|
39
|
-
});
|
|
40
37
|
const [paddingStart, setPaddingStart] = React.useState(inputPaddingInitialState(addonStart));
|
|
41
38
|
const [paddingEnd, setPaddingEnd] = React.useState(inputPaddingInitialState(addonEnd));
|
|
42
|
-
return (
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
children: /*#__PURE__*/jsxRuntime.jsx(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
value: React.useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
|
|
57
|
-
children: /*#__PURE__*/jsxRuntime.jsxs("fieldset", {
|
|
58
|
-
...inputAttributes,
|
|
59
|
-
disabled: disabled,
|
|
60
|
-
className: classNames__default.default(className, 'np-input-group'),
|
|
61
|
-
children: [addonStart != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
|
|
62
|
-
placement: "start",
|
|
63
|
-
...addonStart
|
|
64
|
-
}) : null, children, addonEnd != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
|
|
65
|
-
placement: "end",
|
|
66
|
-
...addonEnd
|
|
67
|
-
}) : null]
|
|
68
|
-
})
|
|
69
|
-
})
|
|
70
|
-
})
|
|
71
|
-
})
|
|
72
|
-
})
|
|
39
|
+
return /*#__PURE__*/jsxRuntime.jsx(InputPaddingStartContext.Provider, {
|
|
40
|
+
value: React.useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
|
|
41
|
+
children: /*#__PURE__*/jsxRuntime.jsx(InputPaddingEndContext.Provider, {
|
|
42
|
+
value: React.useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
|
|
43
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("fieldset", {
|
|
44
|
+
disabled: disabled,
|
|
45
|
+
className: classNames__default.default(className, 'np-input-group'),
|
|
46
|
+
children: [addonStart != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
|
|
47
|
+
placement: "start",
|
|
48
|
+
...addonStart
|
|
49
|
+
}) : null, children, addonEnd != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
|
|
50
|
+
placement: "end",
|
|
51
|
+
...addonEnd
|
|
52
|
+
}) : null]
|
|
73
53
|
})
|
|
74
54
|
})
|
|
75
|
-
);
|
|
55
|
+
});
|
|
76
56
|
}
|
|
77
57
|
const inputAddonContentWidthAddendByPadding = {
|
|
78
58
|
none: 0,
|
|
@@ -98,17 +78,33 @@ function InputAddon({
|
|
|
98
78
|
setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
|
|
99
79
|
}
|
|
100
80
|
});
|
|
101
|
-
return
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
81
|
+
return (
|
|
82
|
+
/*#__PURE__*/
|
|
83
|
+
/* Prevent nested controls from being labeled redundantly */
|
|
84
|
+
jsxRuntime.jsx(contexts.FieldLabelIdContextProvider, {
|
|
85
|
+
value: undefined,
|
|
86
|
+
children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
|
|
87
|
+
value: undefined,
|
|
88
|
+
children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputDescribedByProvider, {
|
|
89
|
+
value: undefined,
|
|
90
|
+
children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
|
|
91
|
+
value: undefined,
|
|
92
|
+
children: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
93
|
+
ref: ref,
|
|
94
|
+
className: classNames__default.default('np-input-addon', {
|
|
95
|
+
'np-input-addon--placement-start': placement === 'start',
|
|
96
|
+
'np-input-addon--placement-end': placement === 'end'
|
|
97
|
+
}, interactive && 'np-input-addon--interactive', {
|
|
98
|
+
'np-input-addon--padding-sm': padding === 'sm',
|
|
99
|
+
'np-input-addon--padding-md': padding === 'md'
|
|
100
|
+
}),
|
|
101
|
+
children: content
|
|
102
|
+
})
|
|
103
|
+
})
|
|
104
|
+
})
|
|
105
|
+
})
|
|
106
|
+
})
|
|
107
|
+
);
|
|
112
108
|
}
|
|
113
109
|
|
|
114
110
|
exports.InputGroup = InputGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n number | string | undefined,\n React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n const [paddingStart] = useContext(InputPaddingStartContext);\n const [paddingEnd] = useContext(InputPaddingEndContext);\n\n return {\n paddingInlineStart: paddingStart,\n paddingInlineEnd: paddingEnd,\n } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n content: React.ReactNode;\n initialContentWidth?: number | string;\n interactive?: boolean;\n padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n addonStart?: InputGroupAddon;\n addonEnd?: InputGroupAddon;\n disabled?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n initialContentWidth,\n padding = inputAddonDefaultPadding,\n}: Pick<\n InputGroupAddon,\n 'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n return () =>\n initialContentWidth != null\n ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n inputAddonContentWidthAddendByPadding[padding],\n )})`\n : undefined;\n}\n\nexport function InputGroup({\n addonStart,\n addonEnd,\n disabled,\n className,\n children,\n}: InputGroupProps) {\n const
|
|
1
|
+
{"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n number | string | undefined,\n React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n const [paddingStart] = useContext(InputPaddingStartContext);\n const [paddingEnd] = useContext(InputPaddingEndContext);\n\n return {\n paddingInlineStart: paddingStart,\n paddingInlineEnd: paddingEnd,\n } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n content: React.ReactNode;\n initialContentWidth?: number | string;\n interactive?: boolean;\n padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n addonStart?: InputGroupAddon;\n addonEnd?: InputGroupAddon;\n disabled?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n initialContentWidth,\n padding = inputAddonDefaultPadding,\n}: Pick<\n InputGroupAddon,\n 'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n return () =>\n initialContentWidth != null\n ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n inputAddonContentWidthAddendByPadding[padding],\n )})`\n : undefined;\n}\n\nexport function InputGroup({\n addonStart,\n addonEnd,\n disabled,\n className,\n children,\n}: InputGroupProps) {\n const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n return (\n <InputPaddingStartContext.Provider\n value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n >\n <InputPaddingEndContext.Provider\n value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n >\n <fieldset disabled={disabled} className={classNames(className, 'np-input-group')}>\n {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n {children}\n {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n </fieldset>\n </InputPaddingEndContext.Provider>\n </InputPaddingStartContext.Provider>\n );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n none: 0,\n sm: '1rem',\n md: '1.5rem',\n} satisfies {\n [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n placement,\n content,\n interactive,\n padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n const [, setInputPadding] = useContext(\n placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n );\n\n const ref = useRef<HTMLSpanElement>(null);\n useResizeObserver(ref, (entry) => {\n // TODO: Remove fallback once most browsers support `borderBoxSize`\n const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n if (inlineSize != null) {\n setInputPadding(inlineSize);\n } else {\n const targetStyle = getComputedStyle(entry.target);\n setInputPadding(\n entry.contentRect.width +\n Number.parseFloat(targetStyle.paddingInlineStart) +\n Number.parseFloat(targetStyle.paddingInlineEnd),\n );\n }\n });\n\n return (\n /* Prevent nested controls from being labeled redundantly */\n <FieldLabelIdContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={classNames(\n 'np-input-addon',\n {\n 'np-input-addon--placement-start': placement === 'start',\n 'np-input-addon--placement-end': placement === 'end',\n },\n interactive && 'np-input-addon--interactive',\n {\n 'np-input-addon--padding-sm': padding === 'sm',\n 'np-input-addon--padding-md': padding === 'md',\n },\n )}\n >\n {content}\n </span>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelIdContextProvider>\n );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","classNames","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import classNames from 'classnames';
|
|
|
2
2
|
import { useState, useMemo, useContext, useRef, createContext } from 'react';
|
|
3
3
|
import { useResizeObserver } from '../common/hooks/useResizeObserver.mjs';
|
|
4
4
|
import { cssValueWithUnit } from '../utilities/cssValueWithUnit.mjs';
|
|
5
|
-
import {
|
|
5
|
+
import { FieldLabelIdContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from './contexts.mjs';
|
|
6
6
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
8
|
const InputPaddingStartContext = /*#__PURE__*/createContext([undefined, () => {}]);
|
|
@@ -28,45 +28,25 @@ function InputGroup({
|
|
|
28
28
|
className,
|
|
29
29
|
children
|
|
30
30
|
}) {
|
|
31
|
-
const inputAttributes = useInputAttributes({
|
|
32
|
-
nonLabelable: true
|
|
33
|
-
});
|
|
34
31
|
const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
|
|
35
32
|
const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
|
|
36
|
-
return (
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
children: /*#__PURE__*/jsx(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
value: useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
|
|
51
|
-
children: /*#__PURE__*/jsxs("fieldset", {
|
|
52
|
-
...inputAttributes,
|
|
53
|
-
disabled: disabled,
|
|
54
|
-
className: classNames(className, 'np-input-group'),
|
|
55
|
-
children: [addonStart != null ? /*#__PURE__*/jsx(InputAddon, {
|
|
56
|
-
placement: "start",
|
|
57
|
-
...addonStart
|
|
58
|
-
}) : null, children, addonEnd != null ? /*#__PURE__*/jsx(InputAddon, {
|
|
59
|
-
placement: "end",
|
|
60
|
-
...addonEnd
|
|
61
|
-
}) : null]
|
|
62
|
-
})
|
|
63
|
-
})
|
|
64
|
-
})
|
|
65
|
-
})
|
|
66
|
-
})
|
|
33
|
+
return /*#__PURE__*/jsx(InputPaddingStartContext.Provider, {
|
|
34
|
+
value: useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
|
|
35
|
+
children: /*#__PURE__*/jsx(InputPaddingEndContext.Provider, {
|
|
36
|
+
value: useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
|
|
37
|
+
children: /*#__PURE__*/jsxs("fieldset", {
|
|
38
|
+
disabled: disabled,
|
|
39
|
+
className: classNames(className, 'np-input-group'),
|
|
40
|
+
children: [addonStart != null ? /*#__PURE__*/jsx(InputAddon, {
|
|
41
|
+
placement: "start",
|
|
42
|
+
...addonStart
|
|
43
|
+
}) : null, children, addonEnd != null ? /*#__PURE__*/jsx(InputAddon, {
|
|
44
|
+
placement: "end",
|
|
45
|
+
...addonEnd
|
|
46
|
+
}) : null]
|
|
67
47
|
})
|
|
68
48
|
})
|
|
69
|
-
);
|
|
49
|
+
});
|
|
70
50
|
}
|
|
71
51
|
const inputAddonContentWidthAddendByPadding = {
|
|
72
52
|
none: 0,
|
|
@@ -92,17 +72,33 @@ function InputAddon({
|
|
|
92
72
|
setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
|
|
93
73
|
}
|
|
94
74
|
});
|
|
95
|
-
return
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
75
|
+
return (
|
|
76
|
+
/*#__PURE__*/
|
|
77
|
+
/* Prevent nested controls from being labeled redundantly */
|
|
78
|
+
jsx(FieldLabelIdContextProvider, {
|
|
79
|
+
value: undefined,
|
|
80
|
+
children: /*#__PURE__*/jsx(InputIdContextProvider, {
|
|
81
|
+
value: undefined,
|
|
82
|
+
children: /*#__PURE__*/jsx(InputDescribedByProvider, {
|
|
83
|
+
value: undefined,
|
|
84
|
+
children: /*#__PURE__*/jsx(InputInvalidProvider, {
|
|
85
|
+
value: undefined,
|
|
86
|
+
children: /*#__PURE__*/jsx("span", {
|
|
87
|
+
ref: ref,
|
|
88
|
+
className: classNames('np-input-addon', {
|
|
89
|
+
'np-input-addon--placement-start': placement === 'start',
|
|
90
|
+
'np-input-addon--placement-end': placement === 'end'
|
|
91
|
+
}, interactive && 'np-input-addon--interactive', {
|
|
92
|
+
'np-input-addon--padding-sm': padding === 'sm',
|
|
93
|
+
'np-input-addon--padding-md': padding === 'md'
|
|
94
|
+
}),
|
|
95
|
+
children: content
|
|
96
|
+
})
|
|
97
|
+
})
|
|
98
|
+
})
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
);
|
|
106
102
|
}
|
|
107
103
|
|
|
108
104
|
export { InputGroup, useInputPaddings };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n number | string | undefined,\n React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n const [paddingStart] = useContext(InputPaddingStartContext);\n const [paddingEnd] = useContext(InputPaddingEndContext);\n\n return {\n paddingInlineStart: paddingStart,\n paddingInlineEnd: paddingEnd,\n } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n content: React.ReactNode;\n initialContentWidth?: number | string;\n interactive?: boolean;\n padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n addonStart?: InputGroupAddon;\n addonEnd?: InputGroupAddon;\n disabled?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n initialContentWidth,\n padding = inputAddonDefaultPadding,\n}: Pick<\n InputGroupAddon,\n 'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n return () =>\n initialContentWidth != null\n ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n inputAddonContentWidthAddendByPadding[padding],\n )})`\n : undefined;\n}\n\nexport function InputGroup({\n addonStart,\n addonEnd,\n disabled,\n className,\n children,\n}: InputGroupProps) {\n const
|
|
1
|
+
{"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n useInputAttributes,\n} from './contexts';\n\ntype InputPaddingContextType = [\n number | string | undefined,\n React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n const [paddingStart] = useContext(InputPaddingStartContext);\n const [paddingEnd] = useContext(InputPaddingEndContext);\n\n return {\n paddingInlineStart: paddingStart,\n paddingInlineEnd: paddingEnd,\n } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n content: React.ReactNode;\n initialContentWidth?: number | string;\n interactive?: boolean;\n padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n addonStart?: InputGroupAddon;\n addonEnd?: InputGroupAddon;\n disabled?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n initialContentWidth,\n padding = inputAddonDefaultPadding,\n}: Pick<\n InputGroupAddon,\n 'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n return () =>\n initialContentWidth != null\n ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n inputAddonContentWidthAddendByPadding[padding],\n )})`\n : undefined;\n}\n\nexport function InputGroup({\n addonStart,\n addonEnd,\n disabled,\n className,\n children,\n}: InputGroupProps) {\n const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n return (\n <InputPaddingStartContext.Provider\n value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n >\n <InputPaddingEndContext.Provider\n value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n >\n <fieldset disabled={disabled} className={classNames(className, 'np-input-group')}>\n {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n {children}\n {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n </fieldset>\n </InputPaddingEndContext.Provider>\n </InputPaddingStartContext.Provider>\n );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n none: 0,\n sm: '1rem',\n md: '1.5rem',\n} satisfies {\n [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n placement,\n content,\n interactive,\n padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n const [, setInputPadding] = useContext(\n placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n );\n\n const ref = useRef<HTMLSpanElement>(null);\n useResizeObserver(ref, (entry) => {\n // TODO: Remove fallback once most browsers support `borderBoxSize`\n const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n if (inlineSize != null) {\n setInputPadding(inlineSize);\n } else {\n const targetStyle = getComputedStyle(entry.target);\n setInputPadding(\n entry.contentRect.width +\n Number.parseFloat(targetStyle.paddingInlineStart) +\n Number.parseFloat(targetStyle.paddingInlineEnd),\n );\n }\n });\n\n return (\n /* Prevent nested controls from being labeled redundantly */\n <FieldLabelIdContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={classNames(\n 'np-input-addon',\n {\n 'np-input-addon--placement-start': placement === 'start',\n 'np-input-addon--placement-end': placement === 'end',\n },\n interactive && 'np-input-addon--interactive',\n {\n 'np-input-addon--padding-sm': padding === 'sm',\n 'np-input-addon--padding-md': padding === 'md',\n },\n )}\n >\n {content}\n </span>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelIdContextProvider>\n );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","classNames","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelIdContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,gBAAgB;;;EAQ/B;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiBD,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+
|
|
1
|
+
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,gBAAgB;;;EAQ/B;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiBD,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAmBjB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.46.
|
|
3
|
+
"version": "46.46.1",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -93,9 +93,9 @@
|
|
|
93
93
|
"rollup": "^4.17.2",
|
|
94
94
|
"rollup-preserve-directives": "^1.1.1",
|
|
95
95
|
"storybook": "^8.1.10",
|
|
96
|
-
"@transferwise/less-config": "3.1.0",
|
|
97
96
|
"@transferwise/neptune-css": "14.12.0",
|
|
98
|
-
"@wise/components-theming": "1.4.0"
|
|
97
|
+
"@wise/components-theming": "1.4.0",
|
|
98
|
+
"@transferwise/less-config": "3.1.0"
|
|
99
99
|
},
|
|
100
100
|
"peerDependencies": {
|
|
101
101
|
"@transferwise/icons": "^3.7.0",
|
|
@@ -4,6 +4,7 @@ import { Field } from '../field/Field';
|
|
|
4
4
|
import { mockResizeObserver, render, screen } from '../test-utils';
|
|
5
5
|
import { Input } from './Input';
|
|
6
6
|
import { InputGroup } from './InputGroup';
|
|
7
|
+
import Button from '../button';
|
|
7
8
|
|
|
8
9
|
mockResizeObserver();
|
|
9
10
|
|
|
@@ -16,11 +17,15 @@ describe('InputGroup', () => {
|
|
|
16
17
|
content: <Search size={24} />,
|
|
17
18
|
initialContentWidth: 24,
|
|
18
19
|
}}
|
|
20
|
+
addonEnd={{
|
|
21
|
+
content: <Button>Go</Button>,
|
|
22
|
+
interactive: true,
|
|
23
|
+
}}
|
|
19
24
|
>
|
|
20
25
|
<Input />
|
|
21
26
|
</InputGroup>
|
|
22
27
|
</Field>,
|
|
23
28
|
);
|
|
24
|
-
expect(screen.
|
|
29
|
+
expect(screen.getByLabelText('Search…')).toHaveRole('textbox');
|
|
25
30
|
});
|
|
26
31
|
});
|
|
@@ -67,38 +67,23 @@ export function InputGroup({
|
|
|
67
67
|
className,
|
|
68
68
|
children,
|
|
69
69
|
}: InputGroupProps) {
|
|
70
|
-
const inputAttributes = useInputAttributes({ nonLabelable: true });
|
|
71
|
-
|
|
72
70
|
const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
|
|
73
71
|
const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
|
|
74
72
|
|
|
75
73
|
return (
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
disabled={disabled}
|
|
90
|
-
className={classNames(className, 'np-input-group')}
|
|
91
|
-
>
|
|
92
|
-
{addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
|
|
93
|
-
{children}
|
|
94
|
-
{addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
|
|
95
|
-
</fieldset>
|
|
96
|
-
</InputPaddingEndContext.Provider>
|
|
97
|
-
</InputPaddingStartContext.Provider>
|
|
98
|
-
</InputInvalidProvider>
|
|
99
|
-
</InputDescribedByProvider>
|
|
100
|
-
</InputIdContextProvider>
|
|
101
|
-
</FieldLabelIdContextProvider>
|
|
74
|
+
<InputPaddingStartContext.Provider
|
|
75
|
+
value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}
|
|
76
|
+
>
|
|
77
|
+
<InputPaddingEndContext.Provider
|
|
78
|
+
value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
|
|
79
|
+
>
|
|
80
|
+
<fieldset disabled={disabled} className={classNames(className, 'np-input-group')}>
|
|
81
|
+
{addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
|
|
82
|
+
{children}
|
|
83
|
+
{addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
|
|
84
|
+
</fieldset>
|
|
85
|
+
</InputPaddingEndContext.Provider>
|
|
86
|
+
</InputPaddingStartContext.Provider>
|
|
102
87
|
);
|
|
103
88
|
}
|
|
104
89
|
|
|
@@ -143,22 +128,31 @@ function InputAddon({
|
|
|
143
128
|
});
|
|
144
129
|
|
|
145
130
|
return (
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
131
|
+
/* Prevent nested controls from being labeled redundantly */
|
|
132
|
+
<FieldLabelIdContextProvider value={undefined}>
|
|
133
|
+
<InputIdContextProvider value={undefined}>
|
|
134
|
+
<InputDescribedByProvider value={undefined}>
|
|
135
|
+
<InputInvalidProvider value={undefined}>
|
|
136
|
+
<span
|
|
137
|
+
ref={ref}
|
|
138
|
+
className={classNames(
|
|
139
|
+
'np-input-addon',
|
|
140
|
+
{
|
|
141
|
+
'np-input-addon--placement-start': placement === 'start',
|
|
142
|
+
'np-input-addon--placement-end': placement === 'end',
|
|
143
|
+
},
|
|
144
|
+
interactive && 'np-input-addon--interactive',
|
|
145
|
+
{
|
|
146
|
+
'np-input-addon--padding-sm': padding === 'sm',
|
|
147
|
+
'np-input-addon--padding-md': padding === 'md',
|
|
148
|
+
},
|
|
149
|
+
)}
|
|
150
|
+
>
|
|
151
|
+
{content}
|
|
152
|
+
</span>
|
|
153
|
+
</InputInvalidProvider>
|
|
154
|
+
</InputDescribedByProvider>
|
|
155
|
+
</InputIdContextProvider>
|
|
156
|
+
</FieldLabelIdContextProvider>
|
|
163
157
|
);
|
|
164
158
|
}
|
|
@@ -214,6 +214,6 @@ describe('SelectInput', () => {
|
|
|
214
214
|
<SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
|
|
215
215
|
</Field>,
|
|
216
216
|
);
|
|
217
|
-
expect(screen.
|
|
217
|
+
expect(screen.getByLabelText('Currency')).toHaveAttribute('aria-haspopup');
|
|
218
218
|
});
|
|
219
219
|
});
|