@transferwise/components 46.45.0 → 46.46.1

package/build/inputs/InputGroup.mjs

@@ -0,0 +1,105 @@
+import classNames from 'classnames';
+import { useState, useMemo, useContext, useRef, createContext } from 'react';
+import { useResizeObserver } from '../common/hooks/useResizeObserver.mjs';
+import { cssValueWithUnit } from '../utilities/cssValueWithUnit.mjs';
+import { FieldLabelIdContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from './contexts.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const InputPaddingStartContext = /*#__PURE__*/createContext([undefined, () => {}]);
+const InputPaddingEndContext = /*#__PURE__*/createContext([undefined, () => {}]);
+function useInputPaddings() {
+  const [paddingStart] = useContext(InputPaddingStartContext);
+  const [paddingEnd] = useContext(InputPaddingEndContext);
+  return {
+    paddingInlineStart: paddingStart,
+    paddingInlineEnd: paddingEnd
+  };
+}
+function inputPaddingInitialState({
+  initialContentWidth,
+  padding = inputAddonDefaultPadding
+} = {}) {
+  return () => initialContentWidth != null ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(inputAddonContentWidthAddendByPadding[padding])})` : undefined;
+}
+function InputGroup({
+  addonStart,
+  addonEnd,
+  disabled,
+  className,
+  children
+}) {
+  const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
+  const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
+  return /*#__PURE__*/jsx(InputPaddingStartContext.Provider, {
+    value: useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
+    children: /*#__PURE__*/jsx(InputPaddingEndContext.Provider, {
+      value: useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
+      children: /*#__PURE__*/jsxs("fieldset", {
+        disabled: disabled,
+        className: classNames(className, 'np-input-group'),
+        children: [addonStart != null ? /*#__PURE__*/jsx(InputAddon, {
+          placement: "start",
+          ...addonStart
+        }) : null, children, addonEnd != null ? /*#__PURE__*/jsx(InputAddon, {
+          placement: "end",
+          ...addonEnd
+        }) : null]
+      })
+    })
+  });
+}
+const inputAddonContentWidthAddendByPadding = {
+  none: 0,
+  sm: '1rem',
+  md: '1.5rem'
+};
+const inputAddonDefaultPadding = 'md';
+function InputAddon({
+  placement,
+  content,
+  interactive,
+  padding = inputAddonDefaultPadding
+}) {
+  const [, setInputPadding] = useContext(placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext);
+  const ref = useRef(null);
+  useResizeObserver(ref, entry => {
+    // TODO: Remove fallback once most browsers support `borderBoxSize`
+    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;
+    if (inlineSize != null) {
+      setInputPadding(inlineSize);
+    } else {
+      const targetStyle = getComputedStyle(entry.target);
+      setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
+    }
+  });
+  return (
+    /*#__PURE__*/
+    /* Prevent nested controls from being labeled redundantly */
+    jsx(FieldLabelIdContextProvider, {
+      value: undefined,
+      children: /*#__PURE__*/jsx(InputIdContextProvider, {
+        value: undefined,
+        children: /*#__PURE__*/jsx(InputDescribedByProvider, {
+          value: undefined,
+          children: /*#__PURE__*/jsx(InputInvalidProvider, {
+            value: undefined,
+            children: /*#__PURE__*/jsx("span", {
+              ref: ref,
+              className: classNames('np-input-addon', {
+                'np-input-addon--placement-start': placement === 'start',
+                'np-input-addon--placement-end': placement === 'end'
+              }, interactive && 'np-input-addon--interactive', {
+                'np-input-addon--padding-sm': padding === 'sm',
+                'np-input-addon--padding-md': padding === 'md'
+              }),
+              children: content
+            })
+          })
+        })
+      })
+    })
+  );
+}
+
+export { InputGroup, useInputPaddings };
+//# sourceMappingURL=InputGroup.mjs.map

package/build/inputs/InputGroup.mjs.map

@@ -0,0 +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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"}

package/build/inputs/SearchInput.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var icons = require('@transferwise/icons');
+var React = require('react');
+var Input = require('./Input.js');
+var InputGroup = require('./InputGroup.js');
+var jsxRuntime = require('react/jsx-runtime');
+var size = require('../common/propsValues/size.js');
+
+const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
+  shape = 'pill',
+  size: size$1 = size.Size.MEDIUM,
+  disabled,
+  className,
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(InputGroup.InputGroup, {
+    addonStart: {
+      content: /*#__PURE__*/jsxRuntime.jsx(icons.Search, {
+        size: size$1 === size.Size.SMALL ? 16 : 24
+      }),
+      initialContentWidth: size$1 === size.Size.SMALL ? 16 : 24
+    },
+    disabled: disabled,
+    className: className,
+    children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+      ref: ref,
+      role: "searchbox",
+      inputMode: "search",
+      shape: shape,
+      size: size$1,
+      ...restProps
+    })
+  });
+});
+
+exports.SearchInput = SearchInput;
+//# sourceMappingURL=SearchInput.js.map

package/build/inputs/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../src/inputs/SearchInput.tsx"],"sourcesContent":["import { Search } from '@transferwise/icons';\nimport { forwardRef } from 'react';\n\nimport { Size } from '../common';\nimport { Merge } from '../utils';\n\nimport { Input } from './Input';\nimport { InputGroup } from './InputGroup';\n\nexport interface SearchInputProps\n  extends Merge<\n    React.ComponentPropsWithRef<'input'>,\n    {\n      size?: Size.SMALL | Size.MEDIUM;\n      shape?: 'rectangle' | 'pill';\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const SearchInput = forwardRef(function SearchInput(\n  { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,\n  ref: React.ForwardedRef<HTMLInputElement | null>,\n) {\n  return (\n    <InputGroup\n      addonStart={{\n        content: <Search size={size === Size.SMALL ? 16 : 24} />,\n        initialContentWidth: size === Size.SMALL ? 16 : 24,\n      }}\n      disabled={disabled}\n      className={className}\n    >\n      <Input\n        ref={ref}\n        role=\"searchbox\"\n        inputMode=\"search\"\n        shape={shape}\n        size={size}\n        {...restProps}\n      />\n    </InputGroup>\n  );\n});\n"],"names":["SearchInput","forwardRef","shape","size","Size","MEDIUM","disabled","className","restProps","ref","_jsx","InputGroup","addonStart","content","Search","SMALL","initialContentWidth","children","Input","role","inputMode"],"mappings":";;;;;;;;;MAmBaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AAAEE,EAAAA,KAAK,GAAG,MAAM;QAAEC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC,SAAAA;AAA6B,CAAA,EAC3FC,GAAgD,EAAA;EAEhD,oBACEC,cAAA,CAACC,qBAAU,EAAA;AACTC,IAAAA,UAAU,EAAE;MACVC,OAAO,eAAEH,cAAA,CAACI,YAAM,EAAA;QAACX,IAAI,EAAEA,MAAI,KAAKC,SAAI,CAACW,KAAK,GAAG,EAAE,GAAG,EAAA;AAAG,OAAG,CAAA;MACxDC,mBAAmB,EAAEb,MAAI,KAAKC,SAAI,CAACW,KAAK,GAAG,EAAE,GAAG,EAAA;KAChD;AACFT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,SAAS,EAAEA,SAAU;IAAAU,QAAA,eAErBP,cAAA,CAACQ,WAAK,EAAA;AACJT,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAC,WAAW;AAChBC,MAAAA,SAAS,EAAC,QAAQ;AAClBlB,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,MAAK;MAAA,GACPK,SAAAA;KAER,CAAA;AAAA,GAAY,CAAC,CAAA;AAEjB,CAAC;;;;"}

package/build/inputs/SearchInput.mjs

@@ -0,0 +1,36 @@
+import { Search } from '@transferwise/icons';
+import { forwardRef } from 'react';
+import { Input } from './Input.mjs';
+import { InputGroup } from './InputGroup.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Size } from '../common/propsValues/size.mjs';
+
+const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
+  shape = 'pill',
+  size = Size.MEDIUM,
+  disabled,
+  className,
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/jsx(InputGroup, {
+    addonStart: {
+      content: /*#__PURE__*/jsx(Search, {
+        size: size === Size.SMALL ? 16 : 24
+      }),
+      initialContentWidth: size === Size.SMALL ? 16 : 24
+    },
+    disabled: disabled,
+    className: className,
+    children: /*#__PURE__*/jsx(Input, {
+      ref: ref,
+      role: "searchbox",
+      inputMode: "search",
+      shape: shape,
+      size: size,
+      ...restProps
+    })
+  });
+});
+
+export { SearchInput };
+//# sourceMappingURL=SearchInput.mjs.map

package/build/inputs/SearchInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.mjs","sources":["../../src/inputs/SearchInput.tsx"],"sourcesContent":["import { Search } from '@transferwise/icons';\nimport { forwardRef } from 'react';\n\nimport { Size } from '../common';\nimport { Merge } from '../utils';\n\nimport { Input } from './Input';\nimport { InputGroup } from './InputGroup';\n\nexport interface SearchInputProps\n  extends Merge<\n    React.ComponentPropsWithRef<'input'>,\n    {\n      size?: Size.SMALL | Size.MEDIUM;\n      shape?: 'rectangle' | 'pill';\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const SearchInput = forwardRef(function SearchInput(\n  { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,\n  ref: React.ForwardedRef<HTMLInputElement | null>,\n) {\n  return (\n    <InputGroup\n      addonStart={{\n        content: <Search size={size === Size.SMALL ? 16 : 24} />,\n        initialContentWidth: size === Size.SMALL ? 16 : 24,\n      }}\n      disabled={disabled}\n      className={className}\n    >\n      <Input\n        ref={ref}\n        role=\"searchbox\"\n        inputMode=\"search\"\n        shape={shape}\n        size={size}\n        {...restProps}\n      />\n    </InputGroup>\n  );\n});\n"],"names":["SearchInput","forwardRef","shape","size","Size","MEDIUM","disabled","className","restProps","ref","_jsx","InputGroup","addonStart","content","Search","SMALL","initialContentWidth","children","Input","role","inputMode"],"mappings":";;;;;;;MAmBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AAAEE,EAAAA,KAAK,GAAG,MAAM;EAAEC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAAEC,QAAQ;EAAEC,SAAS;EAAE,GAAGC,SAAAA;AAA6B,CAAA,EAC3FC,GAAgD,EAAA;EAEhD,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTC,IAAAA,UAAU,EAAE;MACVC,OAAO,eAAEH,GAAA,CAACI,MAAM,EAAA;QAACX,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACW,KAAK,GAAG,EAAE,GAAG,EAAA;AAAG,OAAG,CAAA;MACxDC,mBAAmB,EAAEb,IAAI,KAAKC,IAAI,CAACW,KAAK,GAAG,EAAE,GAAG,EAAA;KAChD;AACFT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,SAAS,EAAEA,SAAU;IAAAU,QAAA,eAErBP,GAAA,CAACQ,KAAK,EAAA;AACJT,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAC,WAAW;AAChBC,MAAAA,SAAS,EAAC,QAAQ;AAClBlB,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;MAAA,GACPK,SAAAA;KAER,CAAA;AAAA,GAAY,CAAC,CAAA;AAEjB,CAAC;;;;"}