@transferwise/components 0.0.0-experimental-757f102 → 0.0.0-experimental-035b608

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/build/inputs/InputGroup.js +1 -10
  2. package/build/inputs/InputGroup.js.map +1 -1
  3. package/build/inputs/InputGroup.mjs +1 -10
  4. package/build/inputs/InputGroup.mjs.map +1 -1
  5. package/build/main.css +5 -9
  6. package/build/styles/inputs/InputGroup.css +2 -8
  7. package/build/styles/inputs/SelectInput.css +2 -0
  8. package/build/styles/main.css +5 -9
  9. package/build/styles/phoneNumberInput/PhoneNumberInput.css +1 -1
  10. package/package.json +1 -1
  11. package/src/inputs/InputGroup.css +2 -8
  12. package/src/inputs/InputGroup.less +2 -12
  13. package/src/inputs/InputGroup.story.tsx +0 -27
  14. package/src/inputs/InputGroup.tsx +0 -10
  15. package/src/inputs/SelectInput.css +2 -0
  16. package/src/inputs/SelectInput.less +2 -0
  17. package/src/main.css +5 -9
  18. package/src/phoneNumberInput/PhoneNumberInput.css +1 -1
  19. package/src/phoneNumberInput/PhoneNumberInput.less +2 -3
package/build/inputs/InputGroup.js CHANGED
@@ -74,15 +74,6 @@ function InputAddon({
74
74
  setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
75
75
  }
76
76
  });
77
- const isAvatarView = node => {
78
- if (!node || typeof node !== 'object') return false;
79
- const {
80
- type
81
- } = node;
82
- if (!type || typeof type !== 'function' && typeof type !== 'object') return false;
83
- return type.displayName === 'AvatarView' || type.name === 'AvatarView';
84
- };
85
- const hasAvatarView = Array.isArray(content) ? content.some(isAvatarView) : isAvatarView(content);
86
77
  return /*#__PURE__*/ /* Prevent nested controls from being labeled redundantly */jsxRuntime.jsx(contexts.FieldLabelContextProvider, {
87
78
  value: undefined,
88
79
  children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
@@ -99,7 +90,7 @@ function InputAddon({
99
90
  }, interactive && 'np-input-addon--interactive', {
100
91
  'np-input-addon--padding-sm': padding === 'sm',
101
92
  'np-input-addon--padding-md': padding === 'md'
102
- }, hasAvatarView && 'np-input-addon--avatar'),
93
+ }),
103
94
  children: content
104
95
  })
105
96
  })
package/build/inputs/InputGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\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={clsx(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 const isAvatarView = (node: unknown): boolean => {\n if (!node || typeof node !== 'object') return false;\n const { type } = node as { type?: { displayName?: string; name?: string } };\n if (!type || (typeof type !== 'function' && typeof type !== 'object')) return false;\n return type.displayName === 'AvatarView' || type.name === 'AvatarView';\n };\n\n const hasAvatarView = Array.isArray(content) ? content.some(isAvatarView) : isAvatarView(content);\n\n return (\n /* Prevent nested controls from being labeled redundantly */\n <FieldLabelContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={clsx(\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 hasAvatarView && 'np-input-addon--avatar',\n )}\n >\n {content}\n </span>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\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","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","isAvatarView","node","type","displayName","name","hasAvatarView","Array","isArray","some","FieldLabelContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}
1
+ {"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\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={clsx(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 <FieldLabelContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={clsx(\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 </FieldLabelContextProvider>\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","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}
package/build/inputs/InputGroup.mjs CHANGED
@@ -72,15 +72,6 @@ function InputAddon({
72
72
  setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
73
73
  }
74
74
  });
75
- const isAvatarView = node => {
76
- if (!node || typeof node !== 'object') return false;
77
- const {
78
- type
79
- } = node;
80
- if (!type || typeof type !== 'function' && typeof type !== 'object') return false;
81
- return type.displayName === 'AvatarView' || type.name === 'AvatarView';
82
- };
83
- const hasAvatarView = Array.isArray(content) ? content.some(isAvatarView) : isAvatarView(content);
84
75
  return /*#__PURE__*/ /* Prevent nested controls from being labeled redundantly */jsx(FieldLabelContextProvider, {
85
76
  value: undefined,
86
77
  children: /*#__PURE__*/jsx(InputIdContextProvider, {
@@ -97,7 +88,7 @@ function InputAddon({
97
88
  }, interactive && 'np-input-addon--interactive', {
98
89
  'np-input-addon--padding-sm': padding === 'sm',
99
90
  'np-input-addon--padding-md': padding === 'md'
100
- }, hasAvatarView && 'np-input-addon--avatar'),
91
+ }),
101
92
  children: content
102
93
  })
103
94
  })
package/build/inputs/InputGroup.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\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={clsx(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 const isAvatarView = (node: unknown): boolean => {\n if (!node || typeof node !== 'object') return false;\n const { type } = node as { type?: { displayName?: string; name?: string } };\n if (!type || (typeof type !== 'function' && typeof type !== 'object')) return false;\n return type.displayName === 'AvatarView' || type.name === 'AvatarView';\n };\n\n const hasAvatarView = Array.isArray(content) ? content.some(isAvatarView) : isAvatarView(content);\n\n return (\n /* Prevent nested controls from being labeled redundantly */\n <FieldLabelContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={clsx(\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 hasAvatarView && 'np-input-addon--avatar',\n )}\n >\n {content}\n </span>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\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","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","isAvatarView","node","type","displayName","name","hasAvatarView","Array","isArray","some","FieldLabelContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}
1
+ {"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\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={clsx(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 <FieldLabelContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={clsx(\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 </FieldLabelContextProvider>\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","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}
package/build/main.css CHANGED
@@ -3802,9 +3802,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3802
3802
  grid-column-start: 1;
3803
3803
  grid-row-start: 1;
3804
3804
  }
3805
- .np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
3806
- padding-left: 48px;
3807
- }
3808
3805
  .np-input-addon {
3809
3806
  pointer-events: none;
3810
3807
  z-index: 10;
@@ -3816,17 +3813,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3816
3813
  transition-timing-function: ease-out;
3817
3814
  transition-duration: 150ms;
3818
3815
  }
3819
- .np-input-addon.np-input-addon--avatar > .np-avatar-view {
3820
- margin-right: 8px;
3821
- }
3822
3816
  .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
3823
3817
  opacity: 0.45;
3824
3818
  mix-blend-mode: luminosity;
3825
3819
  }
3826
- .np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
3820
+ .np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
3827
3821
  color: var(--color-interactive-primary);
3828
3822
  }
3829
- .np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
3823
+ .np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
3830
3824
  color: #b5b7ba;
3831
3825
  color: var(--color-interactive-secondary-hover);
3832
3826
  }
@@ -4021,6 +4015,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
4021
4015
  overflow: hidden;
4022
4016
  text-overflow: ellipsis;
4023
4017
  white-space: nowrap;
4018
+ padding: 1px;
4019
+ margin: -1px;
4024
4020
  }
4025
4021
  .np-select-input-placeholder {
4026
4022
  color: #768e9c;
@@ -5105,7 +5101,7 @@ html:not([dir="rtl"]) .np-navigation-option {
5105
5101
  margin-left: initial;
5106
5102
  }
5107
5103
  .tw-telephone__country-select {
5108
- flex-basis: 132px;
5104
+ flex-basis: 120px;
5109
5105
  flex-shrink: 0;
5110
5106
  }
5111
5107
  .tw-telephone__country-select .np-input-group {
package/build/styles/inputs/InputGroup.css CHANGED
@@ -10,9 +10,6 @@
10
10
  grid-column-start: 1;
11
11
  grid-row-start: 1;
12
12
  }
13
- .np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
14
- padding-left: 48px;
15
- }
16
13
  .np-input-addon {
17
14
  pointer-events: none;
18
15
  z-index: 10;
@@ -24,17 +21,14 @@
24
21
  transition-timing-function: ease-out;
25
22
  transition-duration: 150ms;
26
23
  }
27
- .np-input-addon.np-input-addon--avatar > .np-avatar-view {
28
- margin-right: 8px;
29
- }
30
24
  .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
31
25
  opacity: 0.45;
32
26
  mix-blend-mode: luminosity;
33
27
  }
34
- .np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
28
+ .np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
35
29
  color: var(--color-interactive-primary);
36
30
  }
37
- .np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
31
+ .np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
38
32
  color: #b5b7ba;
39
33
  color: var(--color-interactive-secondary-hover);
40
34
  }
package/build/styles/inputs/SelectInput.css CHANGED
@@ -160,6 +160,8 @@
160
160
  overflow: hidden;
161
161
  text-overflow: ellipsis;
162
162
  white-space: nowrap;
163
+ padding: 1px;
164
+ margin: -1px;
163
165
  }
164
166
  .np-select-input-placeholder {
165
167
  color: #768e9c;
package/build/styles/main.css CHANGED
@@ -3802,9 +3802,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3802
3802
  grid-column-start: 1;
3803
3803
  grid-row-start: 1;
3804
3804
  }
3805
- .np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
3806
- padding-left: 48px;
3807
- }
3808
3805
  .np-input-addon {
3809
3806
  pointer-events: none;
3810
3807
  z-index: 10;
@@ -3816,17 +3813,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3816
3813
  transition-timing-function: ease-out;
3817
3814
  transition-duration: 150ms;
3818
3815
  }
3819
- .np-input-addon.np-input-addon--avatar > .np-avatar-view {
3820
- margin-right: 8px;
3821
- }
3822
3816
  .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
3823
3817
  opacity: 0.45;
3824
3818
  mix-blend-mode: luminosity;
3825
3819
  }
3826
- .np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
3820
+ .np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
3827
3821
  color: var(--color-interactive-primary);
3828
3822
  }
3829
- .np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
3823
+ .np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
3830
3824
  color: #b5b7ba;
3831
3825
  color: var(--color-interactive-secondary-hover);
3832
3826
  }
@@ -4021,6 +4015,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
4021
4015
  overflow: hidden;
4022
4016
  text-overflow: ellipsis;
4023
4017
  white-space: nowrap;
4018
+ padding: 1px;
4019
+ margin: -1px;
4024
4020
  }
4025
4021
  .np-select-input-placeholder {
4026
4022
  color: #768e9c;
@@ -5105,7 +5101,7 @@ html:not([dir="rtl"]) .np-navigation-option {
5105
5101
  margin-left: initial;
5106
5102
  }
5107
5103
  .tw-telephone__country-select {
5108
- flex-basis: 132px;
5104
+ flex-basis: 120px;
5109
5105
  flex-shrink: 0;
5110
5106
  }
5111
5107
  .tw-telephone__country-select .np-input-group {
package/build/styles/phoneNumberInput/PhoneNumberInput.css CHANGED
@@ -12,7 +12,7 @@
12
12
  margin-left: initial;
13
13
  }
14
14
  .tw-telephone__country-select {
15
- flex-basis: 132px;
15
+ flex-basis: 120px;
16
16
  flex-shrink: 0;
17
17
  }
18
18
  .tw-telephone__country-select .np-input-group {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-757f102",
3
+ "version": "0.0.0-experimental-035b608",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/inputs/InputGroup.css CHANGED
@@ -10,9 +10,6 @@
10
10
  grid-column-start: 1;
11
11
  grid-row-start: 1;
12
12
  }
13
- .np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
14
- padding-left: 48px;
15
- }
16
13
  .np-input-addon {
17
14
  pointer-events: none;
18
15
  z-index: 10;
@@ -24,17 +21,14 @@
24
21
  transition-timing-function: ease-out;
25
22
  transition-duration: 150ms;
26
23
  }
27
- .np-input-addon.np-input-addon--avatar > .np-avatar-view {
28
- margin-right: 8px;
29
- }
30
24
  .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
31
25
  opacity: 0.45;
32
26
  mix-blend-mode: luminosity;
33
27
  }
34
- .np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
28
+ .np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
35
29
  color: var(--color-interactive-primary);
36
30
  }
37
- .np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
31
+ .np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
38
32
  color: #b5b7ba;
39
33
  color: var(--color-interactive-secondary-hover);
40
34
  }
package/src/inputs/InputGroup.less CHANGED
@@ -10,19 +10,9 @@
10
10
 
11
11
  /* Prevent unwanted `group-hover/input` triggers */
12
12
  border-radius: var(--radius-full);
13
-
14
- // Avatar input addon specific styles
15
- .np-input-addon--avatar
16
- + fieldset
17
- .form-control.np-form-control.np-form-control--size-md.np-button-input {
18
- padding-left: 48px;
19
- }
20
13
  }
21
14
 
22
15
  .np-input-addon {
23
- &.np-input-addon--avatar > .np-avatar-view {
24
- margin-right: 8px;
25
- }
26
16
  pointer-events: none;
27
17
  z-index: 10;
28
18
  display: inline-flex;
@@ -37,11 +27,11 @@
37
27
  mix-blend-mode: luminosity;
38
28
  }
39
29
 
40
- .np-input-group:has(> :is(input, button, select):focus-visible) & {
30
+ .np-input-group:has(>:is(input,button,select):focus-visible) & {
41
31
  color: var(--color-interactive-primary);
42
32
  }
43
33
 
44
- .np-input-group:has(> :is(input, button, select):hover) & {
34
+ .np-input-group:has(>:is(input,button,select):hover) & {
45
35
  color: var(--color-interactive-secondary-hover);
46
36
  }
47
37
 
package/src/inputs/InputGroup.story.tsx CHANGED
@@ -6,10 +6,7 @@ import { Button } from '..';
6
6
  import { Field } from '../field/Field';
7
7
 
8
8
  import { Input } from './Input';
9
- import { Flag } from '@wise/art';
10
9
  import { InputGroup } from './InputGroup';
11
- import AvatarView from '../avatarView';
12
- import PhoneNumberInput from '../phoneNumberInput';
13
10
 
14
11
  export default {
15
12
  component: InputGroup,
@@ -84,27 +81,3 @@ function InputGroupWithSuffix(args: NonNullable<Story['args']>) {
84
81
  </InputGroup>
85
82
  );
86
83
  }
87
-
88
- export const PhoneNumberWithPrefix: Story = {
89
- render: (args) => <PhoneNumberInputGroupWithPrefix {...args} />,
90
- args: {
91
- disabled: false,
92
- },
93
- };
94
-
95
- function PhoneNumberInputGroupWithPrefix(args: NonNullable<Story['args']>) {
96
- return (
97
- <InputGroup
98
- {...args}
99
- addonStart={{
100
- content: (
101
- <AvatarView size={24}>
102
- <Flag code="gbp" />
103
- </AvatarView>
104
- ),
105
- }}
106
- >
107
- <PhoneNumberInput onChange={() => {}} />
108
- </InputGroup>
109
- );
110
- }
package/src/inputs/InputGroup.tsx CHANGED
@@ -126,15 +126,6 @@ function InputAddon({
126
126
  }
127
127
  });
128
128
 
129
- const isAvatarView = (node: unknown): boolean => {
130
- if (!node || typeof node !== 'object') return false;
131
- const { type } = node as { type?: { displayName?: string; name?: string } };
132
- if (!type || (typeof type !== 'function' && typeof type !== 'object')) return false;
133
- return type.displayName === 'AvatarView' || type.name === 'AvatarView';
134
- };
135
-
136
- const hasAvatarView = Array.isArray(content) ? content.some(isAvatarView) : isAvatarView(content);
137
-
138
129
  return (
139
130
  /* Prevent nested controls from being labeled redundantly */
140
131
  <FieldLabelContextProvider value={undefined}>
@@ -154,7 +145,6 @@ function InputAddon({
154
145
  'np-input-addon--padding-sm': padding === 'sm',
155
146
  'np-input-addon--padding-md': padding === 'md',
156
147
  },
157
- hasAvatarView && 'np-input-addon--avatar',
158
148
  )}
159
149
  >
160
150
  {content}
package/src/inputs/SelectInput.css CHANGED
@@ -160,6 +160,8 @@
160
160
  overflow: hidden;
161
161
  text-overflow: ellipsis;
162
162
  white-space: nowrap;
163
+ padding: 1px;
164
+ margin: -1px;
163
165
  }
164
166
  .np-select-input-placeholder {
165
167
  color: #768e9c;
package/src/inputs/SelectInput.less CHANGED
@@ -7,6 +7,8 @@
7
7
  overflow: hidden;
8
8
  text-overflow: ellipsis;
9
9
  white-space: nowrap;
10
+ padding: 1px;
11
+ margin: -1px;
10
12
  }
11
13
 
12
14
  .np-select-input-placeholder {
package/src/main.css CHANGED
@@ -3802,9 +3802,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3802
3802
  grid-column-start: 1;
3803
3803
  grid-row-start: 1;
3804
3804
  }
3805
- .np-input-group .np-input-addon--avatar + fieldset .form-control.np-form-control.np-form-control--size-md.np-button-input {
3806
- padding-left: 48px;
3807
- }
3808
3805
  .np-input-addon {
3809
3806
  pointer-events: none;
3810
3807
  z-index: 10;
@@ -3816,17 +3813,14 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
3816
3813
  transition-timing-function: ease-out;
3817
3814
  transition-duration: 150ms;
3818
3815
  }
3819
- .np-input-addon.np-input-addon--avatar > .np-avatar-view {
3820
- margin-right: 8px;
3821
- }
3822
3816
  .np-input-group:disabled .np-input-addon:not(.np-input-addon--interactive) {
3823
3817
  opacity: 0.45;
3824
3818
  mix-blend-mode: luminosity;
3825
3819
  }
3826
- .np-input-group:has( > :is(input, button, select):focus-visible) .np-input-addon {
3820
+ .np-input-group:has( > :is(input,button,select):focus-visible) .np-input-addon {
3827
3821
  color: var(--color-interactive-primary);
3828
3822
  }
3829
- .np-input-group:has( > :is(input, button, select):hover) .np-input-addon {
3823
+ .np-input-group:has( > :is(input,button,select):hover) .np-input-addon {
3830
3824
  color: #b5b7ba;
3831
3825
  color: var(--color-interactive-secondary-hover);
3832
3826
  }
@@ -4021,6 +4015,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
4021
4015
  overflow: hidden;
4022
4016
  text-overflow: ellipsis;
4023
4017
  white-space: nowrap;
4018
+ padding: 1px;
4019
+ margin: -1px;
4024
4020
  }
4025
4021
  .np-select-input-placeholder {
4026
4022
  color: #768e9c;
@@ -5105,7 +5101,7 @@ html:not([dir="rtl"]) .np-navigation-option {
5105
5101
  margin-left: initial;
5106
5102
  }
5107
5103
  .tw-telephone__country-select {
5108
- flex-basis: 132px;
5104
+ flex-basis: 120px;
5109
5105
  flex-shrink: 0;
5110
5106
  }
5111
5107
  .tw-telephone__country-select .np-input-group {
package/src/phoneNumberInput/PhoneNumberInput.css CHANGED
@@ -12,7 +12,7 @@
12
12
  margin-left: initial;
13
13
  }
14
14
  .tw-telephone__country-select {
15
- flex-basis: 132px;
15
+ flex-basis: 120px;
16
16
  flex-shrink: 0;
17
17
  }
18
18
  .tw-telephone__country-select .np-input-group {
package/src/phoneNumberInput/PhoneNumberInput.less CHANGED
@@ -1,7 +1,6 @@
1
- @import (reference)
2
- "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
1
+ @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
3
2
 
4
- @four-digit-country-code-width: 132px;
3
+ @four-digit-country-code-width: 120px;
5
4
 
6
5
  .tw-telephone {
7
6
  display: flex;