@transferwise/components 0.0.0-experimental-8d46704 → 0.0.0-experimental-c8ab32e

package/build/field/Field.js

@@ -15,15 +15,20 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 const Field = ({
   id,
   label,
+  required = false,
   message: propMessage,
+  description: propDescription,
   sentiment: propType = sentiment.Sentiment.NEUTRAL,
   className,
   children,
   ...props
 }) => {
   const sentiment$1 = props.error ? sentiment.Sentiment.NEGATIVE : propType;
-  const message = props.error || props.hint || propMessage;
+  const message = propMessage || props.error || props.hint;
   const hasError = sentiment$1 === sentiment.Sentiment.NEGATIVE;
+  const hasInfo = sentiment$1 === sentiment.Sentiment.NEUTRAL && (!!props.hint || !!message);
+  const description = propDescription || hasInfo && (props.hint || message);
+  console.log('hasInfo', hasInfo, 'description', description);
   const labelId = React.useId();
   const fallbackInputId = React.useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -41,13 +46,17 @@ const Field = ({
               'has-success': sentiment$1 === sentiment.Sentiment.POSITIVE,
               'has-warning': sentiment$1 === sentiment.Sentiment.WARNING,
               'has-error': hasError,
-              'has-info': sentiment$1 === sentiment.Sentiment.NEUTRAL
+              'has-info': hasInfo
             }, className),
             children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(Label.Label, {
               id: labelId,
               htmlFor: inputId,
-              children: [label, children]
-            }) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
+              children: [required ? label : /*#__PURE__*/jsxRuntime.jsx(Label.Label.Optional, {
+                children: label
+              }), description && /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
+                children: description
+              }), children]
+            }) : children, message && !hasInfo && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
               type: sentiment$1,
               id: descriptionId,
               children: message

package/build/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label/Label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  message: propMessage,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = props.error || props.hint || propMessage;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? id ?? fallbackInputId : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={classNames(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {label}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","message","propMessage","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","classNames","POSITIVE","WARNING","Label","htmlFor","InlineAlert","type"],"mappings":";;;;;;;;;;;;;;AA4BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,mBAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,WAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,mBAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;EAC7D,MAAMH,OAAO,GAAGQ,KAAK,CAACC,KAAK,IAAID,KAAK,CAACG,IAAI,IAAIV,WAAW,CAAA;AACxD,EAAA,MAAMW,QAAQ,GAAGV,WAAS,KAAKE,mBAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAMG,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,WAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGlB,EAAE,KAAK,IAAI,GAAGA,EAAE,IAAIiB,eAAe,GAAGE,SAAS,CAAA;AAE/D,EAAA,MAAMC,aAAa,GAAGJ,WAAK,EAAE,CAAA;EAE7B,oBACEK,cAAA,CAACC,oCAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAN,QAAA,eAC1CY,cAAA,CAACG,+BAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAT,QAAA,eACrCY,cAAA,CAACI,iCAAwB,EAAA;AAACF,QAAAA,KAAK,EAAErB,OAAO,GAAGkB,aAAa,GAAGD,SAAU;QAAAV,QAAA,eACnEY,cAAA,CAACK,6BAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAL,UAAAA,QAAA,eACpCkB,eAAA,CAAA,KAAA,EAAA;AACEnB,YAAAA,SAAS,EAAEoB,2BAAU,CACnB,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAExB,WAAS,KAAKE,mBAAS,CAACuB,QAAQ;AAC/C,cAAA,aAAa,EAAEzB,WAAS,KAAKE,mBAAS,CAACwB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAEV,WAAS,KAAKE,mBAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDR,KAAK,IAAI,IAAI,gBACZ0B,eAAA,CAACI,WAAK,EAAA;AAAC/B,cAAAA,EAAE,EAAEe,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAT,QAAA,EAAA,CAClCR,KAAK,EACLQ,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAP,OAAO,iBACNmB,cAAA,CAACY,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE9B,WAAU;AAACJ,cAAAA,EAAE,EAAEoB,aAAc;AAAAX,cAAAA,QAAA,EAC7CP,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}
+{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode, useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = false,\n  message: propMessage,\n  description: propDescription,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error || props.hint;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n  const hasInfo: boolean = sentiment === Sentiment.NEUTRAL && (!!props.hint || !!message);\n  const description: ReactNode = propDescription || (hasInfo && (props.hint || message));\n\n  console.log('hasInfo', hasInfo, 'description', description);\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={classNames(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': hasInfo,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  {description && <Label.Description>{description}</Label.Description>}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && !hasInfo && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","description","propDescription","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","hasInfo","console","log","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","classNames","POSITIVE","WARNING","Label","htmlFor","Optional","Description","InlineAlert","type"],"mappings":"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"}

package/build/field/Field.mjs

@@ -9,15 +9,20 @@ import { Sentiment } from '../common/propsValues/sentiment.mjs';
 const Field = ({
   id,
   label,
+  required = false,
   message: propMessage,
+  description: propDescription,
   sentiment: propType = Sentiment.NEUTRAL,
   className,
   children,
   ...props
 }) => {
   const sentiment = props.error ? Sentiment.NEGATIVE : propType;
-  const message = props.error || props.hint || propMessage;
+  const message = propMessage || props.error || props.hint;
   const hasError = sentiment === Sentiment.NEGATIVE;
+  const hasInfo = sentiment === Sentiment.NEUTRAL && (!!props.hint || !!message);
+  const description = propDescription || hasInfo && (props.hint || message);
+  console.log('hasInfo', hasInfo, 'description', description);
   const labelId = useId();
   const fallbackInputId = useId();
   const inputId = id !== null ? id ?? fallbackInputId : undefined;
@@ -35,13 +40,17 @@ const Field = ({
               'has-success': sentiment === Sentiment.POSITIVE,
               'has-warning': sentiment === Sentiment.WARNING,
               'has-error': hasError,
-              'has-info': sentiment === Sentiment.NEUTRAL
+              'has-info': hasInfo
             }, className),
             children: [label != null ? /*#__PURE__*/jsxs(Label, {
               id: labelId,
               htmlFor: inputId,
-              children: [label, children]
-            }) : children, message && /*#__PURE__*/jsx(InlineAlert, {
+              children: [required ? label : /*#__PURE__*/jsx(Label.Optional, {
+                children: label
+              }), description && /*#__PURE__*/jsx(Label.Description, {
+                children: description
+              }), children]
+            }) : children, message && !hasInfo && /*#__PURE__*/jsx(InlineAlert, {
               type: sentiment,
               id: descriptionId,
               children: message

package/build/field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label/Label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  message: propMessage,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = props.error || props.hint || propMessage;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? id ?? fallbackInputId : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={classNames(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {label}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","message","propMessage","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","classNames","POSITIVE","WARNING","Label","htmlFor","InlineAlert","type"],"mappings":";;;;;;;;AA4BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,SAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,SAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,SAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;EAC7D,MAAMH,OAAO,GAAGQ,KAAK,CAACC,KAAK,IAAID,KAAK,CAACG,IAAI,IAAIV,WAAW,CAAA;AACxD,EAAA,MAAMW,QAAQ,GAAGV,SAAS,KAAKE,SAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAMG,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,KAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGlB,EAAE,KAAK,IAAI,GAAGA,EAAE,IAAIiB,eAAe,GAAGE,SAAS,CAAA;AAE/D,EAAA,MAAMC,aAAa,GAAGJ,KAAK,EAAE,CAAA;EAE7B,oBACEK,GAAA,CAACC,2BAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAN,QAAA,eAC1CY,GAAA,CAACG,sBAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAT,QAAA,eACrCY,GAAA,CAACI,wBAAwB,EAAA;AAACF,QAAAA,KAAK,EAAErB,OAAO,GAAGkB,aAAa,GAAGD,SAAU;QAAAV,QAAA,eACnEY,GAAA,CAACK,oBAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAL,UAAAA,QAAA,eACpCkB,IAAA,CAAA,KAAA,EAAA;AACEnB,YAAAA,SAAS,EAAEoB,UAAU,CACnB,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAExB,SAAS,KAAKE,SAAS,CAACuB,QAAQ;AAC/C,cAAA,aAAa,EAAEzB,SAAS,KAAKE,SAAS,CAACwB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAEV,SAAS,KAAKE,SAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDR,KAAK,IAAI,IAAI,gBACZ0B,IAAA,CAACI,KAAK,EAAA;AAAC/B,cAAAA,EAAE,EAAEe,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAT,QAAA,EAAA,CAClCR,KAAK,EACLQ,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAP,OAAO,iBACNmB,GAAA,CAACY,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE9B,SAAU;AAACJ,cAAAA,EAAE,EAAEoB,aAAc;AAAAX,cAAAA,QAAA,EAC7CP,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}
+{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode, useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = false,\n  message: propMessage,\n  description: propDescription,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error || props.hint;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n  const hasInfo: boolean = sentiment === Sentiment.NEUTRAL && (!!props.hint || !!message);\n  const description: ReactNode = propDescription || (hasInfo && (props.hint || message));\n\n  console.log('hasInfo', hasInfo, 'description', description);\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={classNames(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': hasInfo,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  {description && <Label.Description>{description}</Label.Description>}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && !hasInfo && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","description","propDescription","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","hasInfo","console","log","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","classNames","POSITIVE","WARNING","Label","htmlFor","Optional","Description","InlineAlert","type"],"mappings":"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"}

package/build/i18n/en.json

@@ -18,6 +18,7 @@
   "neptune.DateLookup.year": "year",
   "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Info.ariaLabel": "More information",
+  "neptune.Label.optional": "(Optional)",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -55,5 +56,6 @@
   "neptune.UploadItem.uploaded": "Uploaded",
   "neptune.UploadItem.uploadedFile": "Uploaded file",
   "neptune.UploadItem.uploading": "Uploading...",
-  "neptune.UploadItem.uploadingFailed": "Uploading failed"
+  "neptune.UploadItem.uploadingFailed": "Uploading failed",
+  "neptune.aria.Label.optional": "This field is optional"
 }

package/build/i18n/en.json.js

@@ -20,6 +20,7 @@ var en = {
 	"neptune.DateLookup.year": "year",
 	"neptune.FlowNavigation.back": "back to previous step",
 	"neptune.Info.ariaLabel": "More information",
+	"neptune.Label.optional": "(Optional)",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -57,7 +58,8 @@ var en = {
 	"neptune.UploadItem.uploaded": "Uploaded",
 	"neptune.UploadItem.uploadedFile": "Uploaded file",
 	"neptune.UploadItem.uploading": "Uploading...",
-	"neptune.UploadItem.uploadingFailed": "Uploading failed"
+	"neptune.UploadItem.uploadingFailed": "Uploading failed",
+	"neptune.aria.Label.optional": "This field is optional"
 };
 
 module.exports = en;

package/build/i18n/en.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/en.json.mjs

@@ -18,6 +18,7 @@ var en = {
 	"neptune.DateLookup.year": "year",
 	"neptune.FlowNavigation.back": "back to previous step",
 	"neptune.Info.ariaLabel": "More information",
+	"neptune.Label.optional": "(Optional)",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
@@ -55,7 +56,8 @@ var en = {
 	"neptune.UploadItem.uploaded": "Uploaded",
 	"neptune.UploadItem.uploadedFile": "Uploaded file",
 	"neptune.UploadItem.uploading": "Uploading...",
-	"neptune.UploadItem.uploadingFailed": "Uploading failed"
+	"neptune.UploadItem.uploadingFailed": "Uploading failed",
+	"neptune.aria.Label.optional": "This field is optional"
 };
 
 export { en as default };

package/build/i18n/en.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/inputs/SelectInput.js

@@ -6,7 +6,6 @@ var classNames = require('classnames');
 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');
@@ -26,7 +25,6 @@ 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();
 }
@@ -70,19 +68,19 @@ function dedupeSelectInputItems(items) {
     return item;
   });
 }
-function selectInputOptionItemIncludesNeedle(item, needle) {
+function filterSelectInputOptionItem(item, needle) {
   return inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle));
 }
-function filterSelectInputItems(items, predicate) {
+function filterSelectInputItems(items, needle) {
   return items.filter(item => {
     switch (item.type) {
       case 'option':
         {
-          return predicate(item);
+          return filterSelectInputOptionItem(item, needle);
         }
       case 'group':
         {
-          return item.options.some(option => predicate(option));
+          return item.options.some(option => filterSelectInputOptionItem(option, needle));
         }
     }
     return false;
@@ -183,15 +181,12 @@ function SelectInput({
     }
   }, [handleClose, open]);
   const [filterQuery, _setFilterQuery] = React.useState('');
-  const deferredFilterQuery = React.useDeferredValue(filterQuery);
   const setFilterQuery = useEffectEvent.useEffectEvent(query => {
     _setFilterQuery(query);
-    if (query !== filterQuery) {
-      onFilterChange({
-        query,
-        queryNormalized: query ? searchableString(query) : null
-      });
-    }
+    onFilterChange({
+      query,
+      queryNormalized: query ? searchableString(query) : null
+    });
   });
   const triggerRef = React.useRef(null);
   const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
@@ -203,7 +198,10 @@ function SelectInput({
     name: name,
     multiple: multiple,
     defaultValue: defaultValue,
-    value: controlledValue,
+    value: controlledValue
+    // TODO: Remove assertion when upgrading TypeScript to v5
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    ,
     by: compareValues,
     disabled: disabled,
     onChange: value => {
@@ -268,7 +266,9 @@ function SelectInput({
           setOpen(false);
         },
         onCloseEnd: () => {
-          setFilterQuery('');
+          if (filterQuery !== '') {
+            setFilterQuery('');
+          }
         },
         children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
           items: items,
@@ -278,8 +278,7 @@ function SelectInput({
           filterPlaceholder: filterPlaceholder,
           searchInputRef: searchInputRef,
           listboxRef: listboxRef,
-          value: value,
-          filterQuery: deferredFilterQuery,
+          filterQuery: filterQuery,
           onFilterChange: setFilterQuery
         })
       });
@@ -352,7 +351,6 @@ function SelectInputOptions({
   filterPlaceholder,
   searchInputRef,
   listboxRef,
-  value,
   filterQuery,
   onFilterChange
 }) {
@@ -364,8 +362,7 @@ function SelectInputOptions({
     }
     return undefined;
   }, [filterQuery, filterable]);
-  const filteredItems = needle != null ? filterSelectInputItems(items, item => selectInputOptionItemIncludesNeedle(item, needle)) : items;
-  const resultsEmpty = needle != null && filteredItems.length === 0;
+  const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
   const listboxContainerRef = React.useRef(null);
   React.useEffect(() => {
     if (listboxContainerRef.current != null) {
@@ -375,22 +372,6 @@ function SelectInputOptions({
   const showStatus = resultsEmpty;
   const statusId = React.useId();
   const listboxId = React.useId();
-  const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;
-  const values = React.useMemo(() => new Set(Array.isArray(value) ? value : [value]), [value]);
-  const listboxProps = {
-    id: listboxId,
-    role: 'listbox',
-    '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))
-  };
   return /*#__PURE__*/jsxRuntime.jsxs(react.Listbox.Options, {
     as: SelectInputOptionsContainer,
     static: true,
@@ -417,7 +398,7 @@ function SelectInputOptions({
         ref: searchInputRef,
         shape: "rectangle",
         placeholder: filterPlaceholder,
-        defaultValue: filterQuery,
+        value: filterQuery,
         "aria-controls": listboxId,
         "aria-describedby": showStatus ? statusId : undefined,
         onKeyDown: event => {
@@ -434,7 +415,7 @@ function SelectInputOptions({
     }) : null, /*#__PURE__*/jsxRuntime.jsxs("section", {
       ref: listboxContainerRef,
       tabIndex: -1,
-      className: classNames__default.default('np-select-input-listbox-container', virtualized && 'np-select-input-listbox-container--virtualized', needle == null && items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
+      className: classNames__default.default('np-select-input-listbox-container', 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",
@@ -442,19 +423,20 @@ function SelectInputOptions({
           size: 16,
           className: "np-select-input-options-status-icon"
         }), intl.formatMessage(SelectInput_messages.noResultsFound)]
-      }) : null, !virtualized ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
         ref: listboxRef,
-        ...listboxProps
-      }) : /*#__PURE__*/React.createElement(virtua.VList, {
-        ...listboxProps,
-        key: needle,
-        keepMounted: (() => {
-          let index = 0;
-          return filterSelectInputItems(filteredItems, item => values.has(item.value)).map(item => {
-            index = filteredItems.indexOf(item, index + 1);
-            return index;
-          });
-        })()
+        id: listboxId,
+        role: "listbox",
+        "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))
       }), renderFooter != null ? /*#__PURE__*/jsxRuntime.jsx("footer", {
         className: "np-select-input-footer",
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -482,7 +464,7 @@ function SelectInputItemView({
   switch (item.type) {
     case 'option':
       {
-        if (item.value != null && (needle == null || selectInputOptionItemIncludesNeedle(item, needle))) {
+        if (item.value != null && (needle == null || filterSelectInputOptionItem(item, needle))) {
           return /*#__PURE__*/jsxRuntime.jsx(SelectInputOption, {
             value: item.value,
             disabled: item.disabled,