@transferwise/components 46.50.1 → 46.52.0

package/build/inputs/Input.js

@@ -1,16 +1,12 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var _common = require('./_common.js');
 var contexts = require('./contexts.js');
 var InputGroup = require('./InputGroup.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const Input = /*#__PURE__*/React.forwardRef(function Input({
   size = 'auto',
   shape = 'rectangle',
@@ -21,7 +17,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
   const inputPaddings = InputGroup.useInputPaddings();
   return /*#__PURE__*/jsxRuntime.jsx("input", {
     ref: reference,
-    className: classNames__default.default(className, _common.inputClassNameBase({
+    className: clsx.clsx(className, _common.inputClassNameBase({
       size
     }), 'np-input', {
       'np-input--shape-rectangle': shape === 'rectangle',

package/build/inputs/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n  extends Merge<\n    React.ComponentPropsWithRef<'input'>,\n    {\n      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n      shape?: 'rectangle' | 'pill';\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const Input = forwardRef(function Input(\n  { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n  reference: React.ForwardedRef<HTMLInputElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <input\n      ref={reference}\n      className={classNames(className, inputClassNameBase({ size }), 'np-input', {\n        'np-input--shape-rectangle': shape === 'rectangle',\n        'np-input--shape-pill': shape === 'pill',\n      })}\n      // eslint-disable-next-line react/forbid-dom-props\n      style={inputPaddings}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","classNames","inputClassNameBase","style"],"mappings":";;;;;;;;;;;;;MAmBaA,KAAK,gBAAGC,gBAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC,SAAAA;AAAuB,CAAA,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAC5C,EAAA,MAAMC,aAAa,GAAGC,2BAAgB,EAAE,CAAA;AAExC,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,2BAAU,CAACT,SAAS,EAAEU,0BAAkB,CAAC;AAAEZ,MAAAA,IAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACzE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK,MAAA;KACnC,CAAA;AACD;AAAA;AACAY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"Input.js","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n  extends Merge<\n    React.ComponentPropsWithRef<'input'>,\n    {\n      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n      shape?: 'rectangle' | 'pill';\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const Input = forwardRef(function Input(\n  { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n  reference: React.ForwardedRef<HTMLInputElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <input\n      ref={reference}\n      className={clsx(className, inputClassNameBase({ size }), 'np-input', {\n        'np-input--shape-rectangle': shape === 'rectangle',\n        'np-input--shape-pill': shape === 'pill',\n      })}\n      // eslint-disable-next-line react/forbid-dom-props\n      style={inputPaddings}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","clsx","inputClassNameBase","style"],"mappings":";;;;;;;;;MAmBaA,KAAK,gBAAGC,gBAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC,SAAAA;AAAuB,CAAA,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAC5C,EAAA,MAAMC,aAAa,GAAGC,2BAAgB,EAAE,CAAA;AAExC,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,SAAI,CAACT,SAAS,EAAEU,0BAAkB,CAAC;AAAEZ,MAAAA,IAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACnE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK,MAAA;KACnC,CAAA;AACD;AAAA;AACAY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}

package/build/inputs/Input.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { inputClassNameBase } from './_common.mjs';
 import { useInputAttributes } from './contexts.mjs';
@@ -15,7 +15,7 @@ const Input = /*#__PURE__*/forwardRef(function Input({
   const inputPaddings = useInputPaddings();
   return /*#__PURE__*/jsx("input", {
     ref: reference,
-    className: classNames(className, inputClassNameBase({
+    className: clsx(className, inputClassNameBase({
       size
     }), 'np-input', {
       'np-input--shape-rectangle': shape === 'rectangle',

package/build/inputs/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n  extends Merge<\n    React.ComponentPropsWithRef<'input'>,\n    {\n      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n      shape?: 'rectangle' | 'pill';\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const Input = forwardRef(function Input(\n  { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n  reference: React.ForwardedRef<HTMLInputElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <input\n      ref={reference}\n      className={classNames(className, inputClassNameBase({ size }), 'np-input', {\n        'np-input--shape-rectangle': shape === 'rectangle',\n        'np-input--shape-pill': shape === 'pill',\n      })}\n      // eslint-disable-next-line react/forbid-dom-props\n      style={inputPaddings}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","classNames","inputClassNameBase","style"],"mappings":";;;;;;;MAmBaA,KAAK,gBAAGC,UAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC,SAAAA;AAAuB,CAAA,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAC5C,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE,CAAA;AAExC,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,UAAU,CAACT,SAAS,EAAEU,kBAAkB,CAAC;AAAEZ,MAAAA,IAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACzE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK,MAAA;KACnC,CAAA;AACD;AAAA;AACAY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}
+{"version":3,"file":"Input.mjs","sources":["../../src/inputs/Input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\nimport { useInputPaddings } from './InputGroup';\n\nexport interface InputProps\n  extends Merge<\n    React.ComponentPropsWithRef<'input'>,\n    {\n      size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;\n      shape?: 'rectangle' | 'pill';\n      'aria-invalid'?: boolean;\n    }\n  > {}\n\nexport const Input = forwardRef(function Input(\n  { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,\n  reference: React.ForwardedRef<HTMLInputElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n  const inputPaddings = useInputPaddings();\n\n  return (\n    <input\n      ref={reference}\n      className={clsx(className, inputClassNameBase({ size }), 'np-input', {\n        'np-input--shape-rectangle': shape === 'rectangle',\n        'np-input--shape-pill': shape === 'pill',\n      })}\n      // eslint-disable-next-line react/forbid-dom-props\n      style={inputPaddings}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["Input","forwardRef","size","shape","className","restProps","reference","inputAttributes","useInputAttributes","inputPaddings","useInputPaddings","_jsx","ref","clsx","inputClassNameBase","style"],"mappings":";;;;;;;MAmBaA,KAAK,gBAAGC,UAAU,CAAC,SAASD,KAAKA,CAC5C;AAAEE,EAAAA,IAAI,GAAG,MAAM;AAAEC,EAAAA,KAAK,GAAG,WAAW;EAAEC,SAAS;EAAE,GAAGC,SAAAA;AAAuB,CAAA,EAC3EC,SAAsD,EAAA;AAEtD,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE,CAAA;AAC5C,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE,CAAA;AAExC,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,GAAG,EAAEN,SAAU;AACfF,IAAAA,SAAS,EAAES,IAAI,CAACT,SAAS,EAAEU,kBAAkB,CAAC;AAAEZ,MAAAA,IAAAA;KAAM,CAAC,EAAE,UAAU,EAAE;MACnE,2BAA2B,EAAEC,KAAK,KAAK,WAAW;MAClD,sBAAsB,EAAEA,KAAK,KAAK,MAAA;KACnC,CAAA;AACD;AAAA;AACAY,IAAAA,KAAK,EAAEN,aAAc;AAAA,IAAA,GACjBF,eAAe;IAAA,GACfF,SAAAA;AAAS,GAAC,CACd,CAAA;AAEN,CAAC;;;;"}

package/build/inputs/InputGroup.js

@@ -1,16 +1,12 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var useResizeObserver = require('../common/hooks/useResizeObserver.js');
 var cssValueWithUnit = require('../utilities/cssValueWithUnit.js');
 var contexts = require('./contexts.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const InputPaddingStartContext = /*#__PURE__*/React.createContext([undefined, () => {}]);
 const InputPaddingEndContext = /*#__PURE__*/React.createContext([undefined, () => {}]);
 function useInputPaddings() {
@@ -42,7 +38,7 @@ function InputGroup({
       value: React.useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
       children: /*#__PURE__*/jsxRuntime.jsxs("fieldset", {
         disabled: disabled,
-        className: classNames__default.default(className, 'np-input-group'),
+        className: clsx.clsx(className, 'np-input-group'),
         children: [addonStart != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
           placement: "start",
           ...addonStart
@@ -91,7 +87,7 @@ function InputAddon({
             value: undefined,
             children: /*#__PURE__*/jsxRuntime.jsx("span", {
               ref: ref,
-              className: classNames__default.default('np-input-addon', {
+              className: clsx.clsx('np-input-addon', {
                 'np-input-addon--placement-start': placement === 'start',
                 'np-input-addon--placement-end': placement === 'end'
               }, interactive && 'np-input-addon--interactive', {

package/build/inputs/InputGroup.js.map

@@ -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 [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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"}
+{"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  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={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    <FieldLabelIdContextProvider 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    </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","clsx","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/InputGroup.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useState, useMemo, useContext, useRef, createContext } from 'react';
 import { useResizeObserver } from '../common/hooks/useResizeObserver.mjs';
 import { cssValueWithUnit } from '../utilities/cssValueWithUnit.mjs';
@@ -36,7 +36,7 @@ function InputGroup({
       value: useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
       children: /*#__PURE__*/jsxs("fieldset", {
         disabled: disabled,
-        className: classNames(className, 'np-input-group'),
+        className: clsx(className, 'np-input-group'),
         children: [addonStart != null ? /*#__PURE__*/jsx(InputAddon, {
           placement: "start",
           ...addonStart
@@ -85,7 +85,7 @@ function InputAddon({
             value: undefined,
             children: /*#__PURE__*/jsx("span", {
               ref: ref,
-              className: classNames('np-input-addon', {
+              className: clsx('np-input-addon', {
                 'np-input-addon--placement-start': placement === 'start',
                 'np-input-addon--placement-end': placement === 'end'
               }, interactive && 'np-input-addon--interactive', {

package/build/inputs/InputGroup.mjs.map

@@ -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 [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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"}
+{"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  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={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    <FieldLabelIdContextProvider 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    </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","clsx","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":";;;;;;;AAkBA,MAAMA,wBAAwB,gBAAGC,aAAa,CAA0B,CAACC,SAAS,EAAE,MAAK,EAAG,CAAC,CAAC,CAAA;AAE9F,MAAMC,sBAAsB,gBAAGF,aAAa,CAA0B,CAACC,SAAS,EAAE,MAAK,EAAG,CAAC,CAAC,CAAA;SAE5EE,gBAAgBA,GAAA;AAC9B,EAAA,MAAM,CAACC,YAAY,CAAC,GAAGC,UAAU,CAACN,wBAAwB,CAAC,CAAA;AAC3D,EAAA,MAAM,CAACO,UAAU,CAAC,GAAGD,UAAU,CAACH,sBAAsB,CAAC,CAAA;EAEvD,OAAO;AACLK,IAAAA,kBAAkB,EAAEH,YAAY;AAChCI,IAAAA,gBAAgB,EAAEF,UAAAA;GACW,CAAA;AACjC,CAAA;AAiBA,SAASG,wBAAwBA,CAAC;EAChCC,mBAAmB;AACnBC,EAAAA,OAAO,GAAGC,wBAAAA;AAAwB,CAAA,GAIhC,EAAE,EAAA;EACJ,OAAO,MACLF,mBAAmB,IAAI,IAAI,GACvB,CAAQG,KAAAA,EAAAA,gBAAgB,CAACH,mBAAmB,CAAC,MAAMG,gBAAgB,CACjEC,qCAAqC,CAACH,OAAO,CAAC,CAC/C,CAAA,CAAA,CAAG,GACJV,SAAS,CAAA;AACjB,CAAA;AAEgB,SAAAc,UAAUA,CAAC;EACzBC,UAAU;EACVC,QAAQ;EACRC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAAA;AACgB,CAAA,EAAA;AAChB,EAAA,MAAM,CAAChB,YAAY,EAAEiB,eAAe,CAAC,GAAGC,QAAQ,CAACb,wBAAwB,CAACO,UAAU,CAAC,CAAC,CAAA;AACtF,EAAA,MAAM,CAACV,UAAU,EAAEiB,aAAa,CAAC,GAAGD,QAAQ,CAACb,wBAAwB,CAACQ,QAAQ,CAAC,CAAC,CAAA;AAEhF,EAAA,oBACEO,GAAA,CAACzB,wBAAwB,CAAC0B,QAAQ,EAAA;AAChCC,IAAAA,KAAK,EAAEC,OAAO,CAAC,MAAM,CAACvB,YAAY,EAAEiB,eAAe,CAAC,EAAE,CAACjB,YAAY,CAAC,CAAE;AAAAgB,IAAAA,QAAA,eAEtEI,GAAA,CAACtB,sBAAsB,CAACuB,QAAQ,EAAA;AAC9BC,MAAAA,KAAK,EAAEC,OAAO,CAAC,MAAM,CAACrB,UAAU,EAAEiB,aAAa,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAE;AAAAc,MAAAA,QAAA,eAEhEQ,IAAA,CAAA,UAAA,EAAA;AAAUV,QAAAA,QAAQ,EAAEA,QAAS;AAACC,QAAAA,SAAS,EAAEU,IAAI,CAACV,SAAS,EAAE,gBAAgB,CAAE;AAAAC,QAAAA,QAAA,GACxEJ,UAAU,IAAI,IAAI,gBAAGQ,GAAA,CAACM,UAAU,EAAA;AAACC,UAAAA,SAAS,EAAC,OAAO;UAAA,GAAKf,UAAAA;AAAU,UAAI,GAAG,IAAI,EAC5EI,QAAQ,EACRH,QAAQ,IAAI,IAAI,gBAAGO,GAAA,CAACM,UAAU,EAAA;AAACC,UAAAA,SAAS,EAAC,KAAK;UAAA,GAAKd,QAAAA;UAAY,GAAG,IAAI,CAAA;OAC/D,CAAA;KACqB,CAAA;AACnC,GAAmC,CAAC,CAAA;AAExC,CAAA;AAMA,MAAMH,qCAAqC,GAAG;AAC5CkB,EAAAA,IAAI,EAAE,CAAC;AACPC,EAAAA,EAAE,EAAE,MAAM;AACVC,EAAAA,EAAE,EAAE,QAAA;CAGL,CAAA;AAED,MAAMtB,wBAAwB,GAAG,IAAyC,CAAA;AAE1E,SAASkB,UAAUA,CAAC;EAClBC,SAAS;EACTI,OAAO;EACPC,WAAW;AACXzB,EAAAA,OAAO,GAAGC,wBAAAA;AACM,CAAA,EAAA;AAChB,EAAA,MAAM,GAAGyB,eAAe,CAAC,GAAGhC,UAAU,CACpC0B,SAAS,KAAK,OAAO,GAAGhC,wBAAwB,GAAGG,sBAAsB,CAC1E,CAAA;AAED,EAAA,MAAMoC,GAAG,GAAGC,MAAM,CAAkB,IAAI,CAAC,CAAA;AACzCC,EAAAA,iBAAiB,CAACF,GAAG,EAAGG,KAAK,IAAI;AAC/B;IACA,MAAMC,UAAU,GAAGD,KAAK,CAACE,aAAa,GAAG,CAAC,CAAC,EAAED,UAAU,CAAA;IACvD,IAAIA,UAAU,IAAI,IAAI,EAAE;MACtBL,eAAe,CAACK,UAAU,CAAC,CAAA;AAC7B,KAAC,MAAM;AACL,MAAA,MAAME,WAAW,GAAGC,gBAAgB,CAACJ,KAAK,CAACK,MAAM,CAAC,CAAA;MAClDT,eAAe,CACbI,KAAK,CAACM,WAAW,CAACC,KAAK,GACrBC,MAAM,CAACC,UAAU,CAACN,WAAW,CAACrC,kBAAkB,CAAC,GACjD0C,MAAM,CAACC,UAAU,CAACN,WAAW,CAACpC,gBAAgB,CAAC,CAClD,CAAA;AACH,KAAA;AACF,GAAC,CAAC,CAAA;AAEF,EAAA;AAAA;AACE;AACAgB,IAAAA,GAAA,CAAC2B,2BAA2B,EAAA;AAACzB,MAAAA,KAAK,EAAEzB,SAAU;MAAAmB,QAAA,eAC5CI,GAAA,CAAC4B,sBAAsB,EAAA;AAAC1B,QAAAA,KAAK,EAAEzB,SAAU;QAAAmB,QAAA,eACvCI,GAAA,CAAC6B,wBAAwB,EAAA;AAAC3B,UAAAA,KAAK,EAAEzB,SAAU;UAAAmB,QAAA,eACzCI,GAAA,CAAC8B,oBAAoB,EAAA;AAAC5B,YAAAA,KAAK,EAAEzB,SAAU;AAAAmB,YAAAA,QAAA,eACrCI,GAAA,CAAA,MAAA,EAAA;AACEc,cAAAA,GAAG,EAAEA,GAAI;AACTnB,cAAAA,SAAS,EAAEU,IAAI,CACb,gBAAgB,EAChB;gBACE,iCAAiC,EAAEE,SAAS,KAAK,OAAO;gBACxD,+BAA+B,EAAEA,SAAS,KAAK,KAAA;eAChD,EACDK,WAAW,IAAI,6BAA6B,EAC5C;gBACE,4BAA4B,EAAEzB,OAAO,KAAK,IAAI;gBAC9C,4BAA4B,EAAEA,OAAO,KAAK,IAAA;AAC3C,eAAA,CACD;AAAAS,cAAAA,QAAA,EAEDe,OAAAA;aACG,CAAA;WACc,CAAA;SACE,CAAA;OACJ,CAAA;KACG,CAAA;AAAC,IAAA;AAElC;;;;"}

package/build/inputs/SelectInput.js

@@ -2,10 +2,11 @@
 
 var react = require('@headlessui/react');
 var icons = require('@transferwise/icons');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var mergeProps = require('merge-props');
 var React = require('react');
 var reactIntl = require('react-intl');
+var virtua = require('virtua');
 var useEffectEvent = require('../common/hooks/useEffectEvent.js');
 var useScreenSize = require('../common/hooks/useScreenSize.js');
 var PolymorphicWithOverrides = require('../common/polymorphicWithOverrides/PolymorphicWithOverrides.js');
@@ -22,9 +23,9 @@ var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
 
+const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
 function searchableString(value) {
   return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
 }
@@ -37,8 +38,6 @@ function inferSearchableStrings(value) {
   }
   return [];
 }
-const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
-const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/React.createContext(false);
 function dedupeSelectInputOptionItem(item, existingValues) {
   if (!existingValues.has(item.value)) {
     existingValues.add(item.value);
@@ -49,6 +48,11 @@ function dedupeSelectInputOptionItem(item, existingValues) {
     value: undefined
   };
 }
+/**
+ * Sets the `value` of duplicate option items to `undefined`, hiding them when
+ * rendered. Indexes are kept intact within groups to preserve the active item
+ * between filter changes when possible.
+ */
 function dedupeSelectInputItems(items) {
   const existingValues = new Set();
   return items.map(item => {
@@ -68,19 +72,19 @@ function dedupeSelectInputItems(items) {
     return item;
   });
 }
-function filterSelectInputOptionItem(item, needle) {
+function selectInputOptionItemIncludesNeedle(item, needle) {
   return inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle));
 }
-function filterSelectInputItems(items, needle) {
+function filterSelectInputItems(items, predicate) {
   return items.filter(item => {
     switch (item.type) {
       case 'option':
         {
-          return filterSelectInputOptionItem(item, needle);
+          return predicate(item);
         }
       case 'group':
         {
-          return item.options.some(option => filterSelectInputOptionItem(option, needle));
+          return item.options.some(option => predicate(option));
         }
     }
     return false;
@@ -96,7 +100,7 @@ const defaultRenderTrigger = ({
 }) => /*#__PURE__*/jsxRuntime.jsx(InputGroup.InputGroup, {
   addonEnd: {
     content: /*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: classNames__default.default('np-select-input-addon-container', disabled && 'disabled'),
+      className: clsx.clsx('np-select-input-addon-container', disabled && 'disabled'),
       children: [clear != null && !placeholderShown ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx(SelectInputClearButton, {
           onClick: event => {
@@ -122,7 +126,7 @@ const defaultRenderTrigger = ({
     as: _ButtonInput.ButtonInput,
     size: size,
     children: /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: classNames__default.default('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
+      className: clsx.clsx('np-select-input-content', placeholderShown && 'np-select-input-placeholder'),
       children: content
     })
   })
@@ -135,7 +139,7 @@ function SelectInputClearButton({
   return /*#__PURE__*/jsxRuntime.jsx("button", {
     type: "button",
     "aria-label": intl.formatMessage(DateTrigger_messages.ariaLabel),
-    className: classNames__default.default(className, 'np-select-input-addon np-select-input-addon--interactive'),
+    className: clsx.clsx(className, 'np-select-input-addon np-select-input-addon--interactive'),
     onClick: onClick,
     children: /*#__PURE__*/jsxRuntime.jsx(icons.Cross, {
       size: 16
@@ -181,12 +185,15 @@ function SelectInput({
     }
   }, [handleClose, open]);
   const [filterQuery, _setFilterQuery] = React.useState('');
+  const deferredFilterQuery = React.useDeferredValue(filterQuery);
   const setFilterQuery = useEffectEvent.useEffectEvent(query => {
     _setFilterQuery(query);
-    onFilterChange({
-      query,
-      queryNormalized: query ? searchableString(query) : null
-    });
+    if (query !== filterQuery) {
+      onFilterChange({
+        query,
+        queryNormalized: query ? searchableString(query) : null
+      });
+    }
   });
   const triggerRef = React.useRef(null);
   const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
@@ -198,10 +205,7 @@ function SelectInput({
     name: name,
     multiple: multiple,
     defaultValue: defaultValue,
-    value: controlledValue
-    // TODO: Remove assertion when upgrading TypeScript to v5
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    ,
+    value: controlledValue,
     by: compareValues,
     disabled: disabled,
     onChange: value => {
@@ -266,9 +270,7 @@ function SelectInput({
           setOpen(false);
         },
         onCloseEnd: () => {
-          if (filterQuery !== '') {
-            setFilterQuery('');
-          }
+          setFilterQuery('');
         },
         children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
           items: items,
@@ -278,13 +280,14 @@ function SelectInput({
           filterPlaceholder: filterPlaceholder,
           searchInputRef: searchInputRef,
           listboxRef: listboxRef,
-          filterQuery: filterQuery,
+          filterQuery: deferredFilterQuery,
           onFilterChange: setFilterQuery
         })
       });
     }
   });
 }
+const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
 function SelectInputTriggerButton({
   as = 'button',
   ...restProps
@@ -362,7 +365,40 @@ function SelectInputOptions({
     }
     return undefined;
   }, [filterQuery, filterable]);
-  const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
+  React.useEffect(() => {
+    if (needle) {
+      // Ensure having an active option while filtering.
+      // Without `requestAnimationFrame` upon which React depends for scheduling
+      // updates, the active status would only show for a split second and then
+      // disappear inadvertently.
+      requestAnimationFrame(() => {
+        if (controllerRef.current != null && !controllerRef.current.hasAttribute('aria-activedescendant')) {
+          // Activate first option via synthetic key press
+          controllerRef.current.dispatchEvent(new KeyboardEvent('keydown', {
+            key: 'Home',
+            bubbles: true
+          }));
+        }
+      });
+    }
+  }, [controllerRef, needle]);
+  const filteredItems = needle != null ? filterSelectInputItems(dedupeSelectInputItems(items), item => selectInputOptionItemIncludesNeedle(item, needle)) : items;
+  const resultsEmpty = needle != null && filteredItems.length === 0;
+  const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;
+  // Items shown once shall be kept mounted until the needle changes, otherwise
+  // the scroll position may jump around inadvertently. Pattern adopted from:
+  // https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
+  const [mountedIndexes, setMountedIndexes] = React.useState([]);
+  React.useEffect(() => {
+    // Ensure the 'End' key works as intended by keeping the last item mounted
+    setMountedIndexes(prevMountedIndexes => {
+      const indexes = new Set(prevMountedIndexes);
+      indexes.add(filteredItems.length - 1);
+      return [...indexes]; // Sorting is redundant by nature here
+    });
+  }, [needle,
+  // Needed as `filteredItems.length` may be equal between two updates
+  filteredItems.length]);
   const listboxContainerRef = React.useRef(null);
   React.useEffect(() => {
     if (listboxContainerRef.current != null) {
@@ -372,6 +408,16 @@ function SelectInputOptions({
   const showStatus = resultsEmpty;
   const statusId = React.useId();
   const listboxId = React.useId();
+  const getItemNode = index => {
+    const item = filteredItems[index];
+    return /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      item: item,
+      renderValue: renderValue,
+      needle: needle
+    }, index);
+  };
   return /*#__PURE__*/jsxRuntime.jsxs(react.Listbox.Options, {
     as: SelectInputOptionsContainer,
     static: true,
@@ -382,13 +428,6 @@ function SelectInputOptions({
           controllerRef.current.setAttribute('aria-activedescendant', value);
         } else {
           controllerRef.current.removeAttribute('aria-activedescendant');
-          if (filterQuery) {
-            // Ensure having an active option while filtering
-            controllerRef.current.dispatchEvent(new KeyboardEvent('keydown', {
-              key: 'Home',
-              bubbles: true
-            }));
-          }
         }
       }
     },
@@ -398,7 +437,7 @@ function SelectInputOptions({
         ref: searchInputRef,
         shape: "rectangle",
         placeholder: filterPlaceholder,
-        value: filterQuery,
+        defaultValue: filterQuery,
         "aria-controls": listboxId,
         "aria-describedby": showStatus ? statusId : undefined,
         onKeyDown: event => {
@@ -409,13 +448,18 @@ function SelectInputOptions({
           }
         },
         onChange: event => {
+          // Free up resources and ensure not to go out of bounds when the
+          // resulting item count is less than before
+          setMountedIndexes([]);
           onFilterChange(event.currentTarget.value);
         }
       })
     }) : null, /*#__PURE__*/jsxRuntime.jsxs("section", {
       ref: listboxContainerRef,
       tabIndex: -1,
-      className: classNames__default.default('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
+      className: clsx.clsx('np-select-input-listbox-container', virtualized && 'np-select-input-listbox-container--virtualized', needle == null &&
+      // Groups aren't shown when filtering
+      items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
       children: [resultsEmpty ? /*#__PURE__*/jsxRuntime.jsxs("div", {
         id: statusId,
         className: "np-select-input-options-status",
@@ -430,13 +474,32 @@ function SelectInputOptions({
         "aria-orientation": "vertical",
         tabIndex: 0,
         className: "np-select-input-listbox",
-        children: (needle != null ? dedupeSelectInputItems(items) : items).map((item, index) => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
-        // eslint-disable-next-line react/no-array-index-key
-        , {
-          item: item,
-          renderValue: renderValue,
-          needle: needle
-        }, index))
+        children: !virtualized ? filteredItems.map((_, index) => getItemNode(index)) : /*#__PURE__*/jsxRuntime.jsx(virtua.Virtualizer, {
+          count: filteredItems.length,
+          keepMounted: mountedIndexes,
+          scrollRef: listboxRef // `VList` doesn't expose this
+          ,
+          onRangeChange: (startIndex, endIndex) => {
+            setMountedIndexes(prevMountedIndexes => {
+              const indexes = new Set(prevMountedIndexes);
+              for (let index = startIndex; index <= endIndex; index += 1) {
+                indexes.add(index);
+              }
+              return [...indexes].sort((a, b) => a - b);
+            });
+          },
+          children: index =>
+          /*#__PURE__*/
+          // The position of each item can't be inferred by browsers when
+          // virtualizing, as some of the items may not be in the DOM
+          jsxRuntime.jsx(SelectInputItemsCountContext.Provider, {
+            value: filteredItems.length,
+            children: /*#__PURE__*/jsxRuntime.jsx(SelectInputItemPositionContext.Provider, {
+              value: index + 1,
+              children: getItemNode(index)
+            })
+          })
+        }, needle)
       }), renderFooter != null ? /*#__PURE__*/jsxRuntime.jsx("footer", {
         className: "np-select-input-footer",
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -464,7 +527,7 @@ function SelectInputItemView({
   switch (item.type) {
     case 'option':
       {
-        if (item.value != null && (needle == null || filterSelectInputOptionItem(item, needle))) {
+        if (item.value != null && (needle == null || selectInputOptionItemIncludesNeedle(item, needle))) {
           return /*#__PURE__*/jsxRuntime.jsx(SelectInputOption, {
             value: item.value,
             disabled: item.disabled,
@@ -506,7 +569,7 @@ function SelectInputGroupItemView({
     jsxRuntime.jsxs("section", {
       role: "group",
       "aria-labelledby": headerId,
-      className: classNames__default.default(needle === null && 'np-select-input-group-item--without-needle'),
+      className: clsx.clsx(needle === null && 'np-select-input-group-item--without-needle'),
       children: [needle == null ? /*#__PURE__*/jsxRuntime.jsx("header", {
         id: headerId,
         role: "none",
@@ -522,19 +585,25 @@ function SelectInputGroupItemView({
     })
   );
 }
+const SelectInputItemsCountContext = /*#__PURE__*/React.createContext(undefined);
+const SelectInputItemPositionContext = /*#__PURE__*/React.createContext(undefined);
 function SelectInputOption({
   value,
   disabled,
   children
 }) {
+  const itemsCount = React.useContext(SelectInputItemsCountContext);
+  const itemPosition = React.useContext(SelectInputItemPositionContext);
   return /*#__PURE__*/jsxRuntime.jsx(react.Listbox.Option, {
     as: "div",
     value: value,
+    "aria-setsize": itemsCount,
+    "aria-posinset": itemPosition,
     disabled: disabled,
     className: ({
       active,
       disabled: uiDisabled
-    }) => classNames__default.default('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
+    }) => clsx.clsx('np-select-input-option-container np-text-body-large', active && 'np-select-input-option-container--active', uiDisabled && 'np-select-input-option-container--disabled'),
     children: ({
       selected
     }) => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -543,11 +612,12 @@ function SelectInputOption({
         children: children
       }), /*#__PURE__*/jsxRuntime.jsx(icons.Check, {
         size: 16,
-        className: classNames__default.default('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
+        className: clsx.clsx('np-select-input-option-check', !selected && 'np-select-input-option-check--not-selected')
       })]
     })
   });
 }
+const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/React.createContext(false);
 function SelectInputOptionContent({
   title,
   note,
@@ -556,14 +626,14 @@ function SelectInputOptionContent({
 }) {
   const withinTrigger = React.useContext(SelectInputOptionContentWithinTriggerContext);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames__default.default('np-select-input-option-content-container', (note || description) && 'np-text-body-large'),
+    className: clsx.clsx('np-select-input-option-content-container', (note || description) && 'np-text-body-large'),
     children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames__default.default('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
+      className: clsx.clsx('np-select-input-option-content-icon', !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger'),
       children: icon
     }) : null, /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "np-select-input-option-content-text",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames__default.default('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
+        className: clsx.clsx('np-select-input-option-content-text-line-1', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
           className: "np-select-input-option-content-text-primary d-inline",
           children: title
@@ -572,7 +642,7 @@ function SelectInputOptionContent({
           children: note
         }) : null]
       }), description ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames__default.default('np-select-input-option-content-text-secondary np-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
+        className: clsx.clsx('np-select-input-option-content-text-secondary np-text-body-default', withinTrigger && 'np-select-input-option-content-text-within-trigger'),
         children: description
       }) : null]
     })]