@transferwise/components 0.0.0-experimental-b20133d → 0.0.0-experimental-21d2352

package/build/field/Field.js

@@ -125,7 +125,7 @@ const Field = ({
                   children: children
                 })]
               }) : children, (message || textareaCharacterCount) && /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "np-field-footer",
+                className: "np-field-validation",
                 children: [message && /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
                   sentiment: sentiment$1,
                   id: messageId,

package/build/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useCallback, useId, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport { Sentiment } from '../common';\nimport messages from './Field.messages';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  TextareaCharacterCountProvider,\n  type TextareaCharacterCountState,\n  FieldLabelContextProvider,\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  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const { formatMessage } = useIntl();\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\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 messageId = useId();\n  const descriptionId = useId();\n  const counterId = useId();\n\n  const [textareaCharacterCount, setTextareaCharacterCount] =\n    useState<TextareaCharacterCountState>(null);\n  const handleTextareaCharacterCount = useCallback(\n    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),\n    [],\n  );\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    if (textareaCharacterCount) {\n      messageIds.push(counterId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>\n              <div\n                className={clsx(\n                  'np-field 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                  <>\n                    <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                      {required ? label : <Label.Optional>{label}</Label.Optional>}\n                    </Label>\n                    <Label.Description id={descriptionId}>{description}</Label.Description>\n                    <div className=\"np-field-control\">{children}</div>\n                  </>\n                ) : (\n                  children\n                )}\n\n                {(message || textareaCharacterCount) && (\n                  <div className=\"np-field-footer\">\n                    {message && (\n                      <InlinePrompt\n                        sentiment={sentiment}\n                        id={messageId}\n                        mediaLabel={messageIconLabel}\n                        className=\"np-field__prompt\"\n                        loading={messageLoading}\n                        width=\"full\"\n                      >\n                        {message}\n                      </InlinePrompt>\n                    )}\n                    {textareaCharacterCount && (\n                      <Body\n                        as=\"span\"\n                        id={counterId}\n                        role=\"status\"\n                        aria-live={\n                          textareaCharacterCount.current >= textareaCharacterCount.max * 0.8\n                            ? 'polite'\n                            : 'off'\n                        }\n                        aria-atomic=\"true\"\n                        aria-label={formatMessage(messages.characterCount, {\n                          current: textareaCharacterCount.current,\n                          max: textareaCharacterCount.max,\n                        })}\n                        className=\"np-field-counter\"\n                      >\n                        {textareaCharacterCount.current}/{textareaCharacterCount.max}\n                      </Body>\n                    )}\n                  </div>\n                )}\n              </div>\n            </TextareaCharacterCountProvider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","formatMessage","useIntl","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","counterId","textareaCharacterCount","setTextareaCharacterCount","useState","handleTextareaCharacterCount","useCallback","state","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","TextareaCharacterCountProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width","Body","as","role","current","max","messages","characterCount"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useCallback, useId, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport { Sentiment } from '../common';\nimport messages from './Field.messages';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  TextareaCharacterCountProvider,\n  type TextareaCharacterCountState,\n  FieldLabelContextProvider,\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  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const { formatMessage } = useIntl();\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\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 messageId = useId();\n  const descriptionId = useId();\n  const counterId = useId();\n\n  const [textareaCharacterCount, setTextareaCharacterCount] =\n    useState<TextareaCharacterCountState>(null);\n  const handleTextareaCharacterCount = useCallback(\n    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),\n    [],\n  );\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    if (textareaCharacterCount) {\n      messageIds.push(counterId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>\n              <div\n                className={clsx(\n                  'np-field 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                  <>\n                    <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                      {required ? label : <Label.Optional>{label}</Label.Optional>}\n                    </Label>\n                    <Label.Description id={descriptionId}>{description}</Label.Description>\n                    <div className=\"np-field-control\">{children}</div>\n                  </>\n                ) : (\n                  children\n                )}\n\n                {(message || textareaCharacterCount) && (\n                  <div className=\"np-field-validation\">\n                    {message && (\n                      <InlinePrompt\n                        sentiment={sentiment}\n                        id={messageId}\n                        mediaLabel={messageIconLabel}\n                        className=\"np-field__prompt\"\n                        loading={messageLoading}\n                        width=\"full\"\n                      >\n                        {message}\n                      </InlinePrompt>\n                    )}\n                    {textareaCharacterCount && (\n                      <Body\n                        as=\"span\"\n                        id={counterId}\n                        role=\"status\"\n                        aria-live={\n                          textareaCharacterCount.current >= textareaCharacterCount.max * 0.8\n                            ? 'polite'\n                            : 'off'\n                        }\n                        aria-atomic=\"true\"\n                        aria-label={formatMessage(messages.characterCount, {\n                          current: textareaCharacterCount.current,\n                          max: textareaCharacterCount.max,\n                        })}\n                        className=\"np-field-counter\"\n                      >\n                        {textareaCharacterCount.current}/{textareaCharacterCount.max}\n                      </Body>\n                    )}\n                  </div>\n                )}\n              </div>\n            </TextareaCharacterCountProvider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","formatMessage","useIntl","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","counterId","textareaCharacterCount","setTextareaCharacterCount","useState","handleTextareaCharacterCount","useCallback","state","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","TextareaCharacterCountProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width","Body","as","role","current","max","messages","characterCount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,OAAO,EAAEC,WAAW;EACpBC,gBAAgB;EAChBC,cAAc;EACdC,IAAI;AACJC,EAAAA,WAAW,GAAGD,IAAI;AAClBE,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,mBAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAK,CACG,KAAI;EACf,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;AACnC,EAAA,MAAMC,QAAQ,GAAGC,YAAM,CAAmB,IAAI,CAAC;EAC/C,MAAMV,WAAS,GAAGM,KAAK,CAACK,KAAK,GAAGT,mBAAS,CAACU,QAAQ,GAAGX,QAAQ;AAC7D,EAAA,MAAMP,OAAO,GAAGC,WAAW,IAAIW,KAAK,CAACK,KAAK;AAC1C,EAAA,MAAME,QAAQ,GAAGb,WAAS,KAAKE,mBAAS,CAACU,QAAQ;AAEjD,EAAA,MAAME,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,eAAe,GAAGD,WAAK,EAAE;EAC/B,MAAME,OAAO,GAAG1B,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAIyB,eAAe,GAAIE,SAAS;AAEjE,EAAA,MAAMC,SAAS,GAAGJ,WAAK,EAAE;AACzB,EAAA,MAAMK,aAAa,GAAGL,WAAK,EAAE;AAC7B,EAAA,MAAMM,SAAS,GAAGN,WAAK,EAAE;EAEzB,MAAM,CAACO,sBAAsB,EAAEC,yBAAyB,CAAC,GACvDC,cAAQ,CAA8B,IAAI,CAAC;AAC7C,EAAA,MAAMC,4BAA4B,GAAGC,iBAAW,CAC7CC,KAAkC,IAAKJ,yBAAyB,CAACI,KAAK,CAAC,EACxE,EAAE,CACH;AAED;;;AAGG;EACH,SAASC,oBAAoBA,GAAA;IAC3B,MAAMC,UAAU,GAAG,EAAE;AACrB,IAAA,IAAI9B,WAAW,EAAE;AACf8B,MAAAA,UAAU,CAACC,IAAI,CAACV,aAAa,CAAC;AAChC,IAAA;AACA,IAAA,IAAI1B,OAAO,EAAE;AACXmC,MAAAA,UAAU,CAACC,IAAI,CAACX,SAAS,CAAC;AAC5B,IAAA;AACA,IAAA,IAAIG,sBAAsB,EAAE;AAC1BO,MAAAA,UAAU,CAACC,IAAI,CAACT,SAAS,CAAC;AAC5B,IAAA;AACA,IAAA,OAAOQ,UAAU,CAACE,MAAM,GAAG,CAAC,GAAGF,UAAU,CAACG,IAAI,CAAC,GAAG,CAAC,GAAGd,SAAS;AACjE,EAAA;EAEA,oBACEe,cAAA,CAACC,kCAAyB,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAE5C,MAAAA,EAAE,EAAEuB,OAAO;AAAEsB,MAAAA,GAAG,EAAE3B;KAAW;IAAAJ,QAAA,eAC/D4B,cAAA,CAACI,+BAAsB,EAAA;AAACF,MAAAA,KAAK,EAAElB,OAAQ;MAAAZ,QAAA,eACrC4B,cAAA,CAACK,iCAAwB,EAAA;QAACH,KAAK,EAAEP,oBAAoB,EAAG;QAAAvB,QAAA,eACtD4B,cAAA,CAACM,6BAAoB,EAAA;AAACJ,UAAAA,KAAK,EAAEtB,QAAS;UAAAR,QAAA,eACpC4B,cAAA,CAACO,uCAA8B,EAAA;AAACL,YAAAA,KAAK,EAAEV,4BAA6B;AAAApB,YAAAA,QAAA,eAClEoC,eAAA,CAAA,KAAA,EAAA;AACErC,cAAAA,SAAS,EAAEsC,SAAI,CACb,6BAA6B,EAC7B;AACE,gBAAA,aAAa,EAAE1C,WAAS,KAAKE,mBAAS,CAACyC,QAAQ;AAC/C,gBAAA,aAAa,EAAE3C,WAAS,KAAKE,mBAAS,CAAC0C,OAAO;AAC9C,gBAAA,WAAW,EAAE/B,QAAQ;AACrB,gBAAA,UAAU,EAAEb,WAAS,KAAKE,mBAAS,CAACC;eACrC,EACDC,SAAS,CACT;AAAAC,cAAAA,QAAA,GAEDb,KAAK,IAAI,IAAI,gBACZiD,eAAA,CAAAI,mBAAA,EAAA;gBAAAxC,QAAA,EAAA,cACE4B,cAAA,CAACa,WAAK,EAAA;AAACV,kBAAAA,GAAG,EAAE3B,QAAS;AAAClB,kBAAAA,EAAE,EAAEuB,OAAQ;AAACiC,kBAAAA,OAAO,EAAE9B,OAAQ;kBAAAZ,QAAA,EACjDZ,QAAQ,GAAGD,KAAK,gBAAGyC,cAAA,CAACa,WAAK,CAACE,QAAQ,EAAA;AAAA3C,oBAAAA,QAAA,EAAEb;mBAAsB;AAAC,iBACvD,CACP,eAAAyC,cAAA,CAACa,WAAK,CAACG,WAAW,EAAA;AAAC1D,kBAAAA,EAAE,EAAE6B,aAAc;AAAAf,kBAAAA,QAAA,EAAEN;iBAA+B,CACtE,eAAAkC,cAAA,CAAA,KAAA,EAAA;AAAK7B,kBAAAA,SAAS,EAAC,kBAAkB;AAAAC,kBAAAA,QAAA,EAAEA;AAAQ,iBAAM,CACnD;eAAA,CAAG,GAEHA,QACD,EAEA,CAACX,OAAO,IAAI4B,sBAAsB,kBACjCmB,eAAA,CAAA,KAAA,EAAA;AAAKrC,gBAAAA,SAAS,EAAC,qBAAqB;AAAAC,gBAAAA,QAAA,EAAA,CACjCX,OAAO,iBACNuC,cAAA,CAACiB,yBAAY,EAAA;AACXlD,kBAAAA,SAAS,EAAEA,WAAU;AACrBT,kBAAAA,EAAE,EAAE4B,SAAU;AACdgC,kBAAAA,UAAU,EAAEvD,gBAAiB;AAC7BQ,kBAAAA,SAAS,EAAC,kBAAkB;AAC5BgD,kBAAAA,OAAO,EAAEvD,cAAe;AACxBwD,kBAAAA,KAAK,EAAC,MAAM;AAAAhD,kBAAAA,QAAA,EAEXX;AAAO,iBACI,CACf,EACA4B,sBAAsB,iBACrBmB,eAAA,CAACa,YAAI,EAAA;AACHC,kBAAAA,EAAE,EAAC,MAAM;AACThE,kBAAAA,EAAE,EAAE8B,SAAU;AACdmC,kBAAAA,IAAI,EAAC,QAAQ;AACb,kBAAA,WAAA,EACElC,sBAAsB,CAACmC,OAAO,IAAInC,sBAAsB,CAACoC,GAAG,GAAG,GAAG,GAC9D,QAAQ,GACR,KACL;AACD,kBAAA,aAAA,EAAY,MAAM;AAClB,kBAAA,YAAA,EAAYnD,aAAa,CAACoD,sBAAQ,CAACC,cAAc,EAAE;oBACjDH,OAAO,EAAEnC,sBAAsB,CAACmC,OAAO;oBACvCC,GAAG,EAAEpC,sBAAsB,CAACoC;AAC7B,mBAAA,CAAE;AACHtD,kBAAAA,SAAS,EAAC,kBAAkB;kBAAAC,QAAA,EAAA,CAE3BiB,sBAAsB,CAACmC,OAAO,EAAC,GAAC,EAACnC,sBAAsB,CAACoC,GAAG;AAAA,iBACxD,CACP;AAAA,eACE,CACN;aACE;WACyB;SACZ;OACE;KACJ;AAC1B,GAA2B,CAAC;AAEhC;;;;"}

package/build/field/Field.mjs

@@ -123,7 +123,7 @@ const Field = ({
                   children: children
                 })]
               }) : children, (message || textareaCharacterCount) && /*#__PURE__*/jsxs("div", {
-                className: "np-field-footer",
+                className: "np-field-validation",
                 children: [message && /*#__PURE__*/jsx(InlinePrompt, {
                   sentiment: sentiment,
                   id: messageId,

package/build/field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useCallback, useId, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport { Sentiment } from '../common';\nimport messages from './Field.messages';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  TextareaCharacterCountProvider,\n  type TextareaCharacterCountState,\n  FieldLabelContextProvider,\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  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const { formatMessage } = useIntl();\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\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 messageId = useId();\n  const descriptionId = useId();\n  const counterId = useId();\n\n  const [textareaCharacterCount, setTextareaCharacterCount] =\n    useState<TextareaCharacterCountState>(null);\n  const handleTextareaCharacterCount = useCallback(\n    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),\n    [],\n  );\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    if (textareaCharacterCount) {\n      messageIds.push(counterId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>\n              <div\n                className={clsx(\n                  'np-field 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                  <>\n                    <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                      {required ? label : <Label.Optional>{label}</Label.Optional>}\n                    </Label>\n                    <Label.Description id={descriptionId}>{description}</Label.Description>\n                    <div className=\"np-field-control\">{children}</div>\n                  </>\n                ) : (\n                  children\n                )}\n\n                {(message || textareaCharacterCount) && (\n                  <div className=\"np-field-footer\">\n                    {message && (\n                      <InlinePrompt\n                        sentiment={sentiment}\n                        id={messageId}\n                        mediaLabel={messageIconLabel}\n                        className=\"np-field__prompt\"\n                        loading={messageLoading}\n                        width=\"full\"\n                      >\n                        {message}\n                      </InlinePrompt>\n                    )}\n                    {textareaCharacterCount && (\n                      <Body\n                        as=\"span\"\n                        id={counterId}\n                        role=\"status\"\n                        aria-live={\n                          textareaCharacterCount.current >= textareaCharacterCount.max * 0.8\n                            ? 'polite'\n                            : 'off'\n                        }\n                        aria-atomic=\"true\"\n                        aria-label={formatMessage(messages.characterCount, {\n                          current: textareaCharacterCount.current,\n                          max: textareaCharacterCount.max,\n                        })}\n                        className=\"np-field-counter\"\n                      >\n                        {textareaCharacterCount.current}/{textareaCharacterCount.max}\n                      </Body>\n                    )}\n                  </div>\n                )}\n              </div>\n            </TextareaCharacterCountProvider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","formatMessage","useIntl","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","counterId","textareaCharacterCount","setTextareaCharacterCount","useState","handleTextareaCharacterCount","useCallback","state","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","TextareaCharacterCountProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width","Body","as","role","current","max","messages","characterCount"],"mappings":"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"}
+{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useCallback, useId, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport { Sentiment } from '../common';\nimport messages from './Field.messages';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  TextareaCharacterCountProvider,\n  type TextareaCharacterCountState,\n  FieldLabelContextProvider,\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  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const { formatMessage } = useIntl();\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\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 messageId = useId();\n  const descriptionId = useId();\n  const counterId = useId();\n\n  const [textareaCharacterCount, setTextareaCharacterCount] =\n    useState<TextareaCharacterCountState>(null);\n  const handleTextareaCharacterCount = useCallback(\n    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),\n    [],\n  );\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    if (textareaCharacterCount) {\n      messageIds.push(counterId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>\n              <div\n                className={clsx(\n                  'np-field 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                  <>\n                    <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                      {required ? label : <Label.Optional>{label}</Label.Optional>}\n                    </Label>\n                    <Label.Description id={descriptionId}>{description}</Label.Description>\n                    <div className=\"np-field-control\">{children}</div>\n                  </>\n                ) : (\n                  children\n                )}\n\n                {(message || textareaCharacterCount) && (\n                  <div className=\"np-field-validation\">\n                    {message && (\n                      <InlinePrompt\n                        sentiment={sentiment}\n                        id={messageId}\n                        mediaLabel={messageIconLabel}\n                        className=\"np-field__prompt\"\n                        loading={messageLoading}\n                        width=\"full\"\n                      >\n                        {message}\n                      </InlinePrompt>\n                    )}\n                    {textareaCharacterCount && (\n                      <Body\n                        as=\"span\"\n                        id={counterId}\n                        role=\"status\"\n                        aria-live={\n                          textareaCharacterCount.current >= textareaCharacterCount.max * 0.8\n                            ? 'polite'\n                            : 'off'\n                        }\n                        aria-atomic=\"true\"\n                        aria-label={formatMessage(messages.characterCount, {\n                          current: textareaCharacterCount.current,\n                          max: textareaCharacterCount.max,\n                        })}\n                        className=\"np-field-counter\"\n                      >\n                        {textareaCharacterCount.current}/{textareaCharacterCount.max}\n                      </Body>\n                    )}\n                  </div>\n                )}\n              </div>\n            </TextareaCharacterCountProvider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","formatMessage","useIntl","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","counterId","textareaCharacterCount","setTextareaCharacterCount","useState","handleTextareaCharacterCount","useCallback","state","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","TextareaCharacterCountProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width","Body","as","role","current","max","messages","characterCount"],"mappings":"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"}

package/build/main.css

@@ -30193,8 +30193,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
 
-.np-field-control,
-.np-field-footer {
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
+
+.np-field-validation {
   display: flex;
   align-items: flex-start;
   margin-top: 4px;

package/build/styles/field/Field.css

@@ -1,5 +1,8 @@
-.np-field-control,
-.np-field-footer {
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
+.np-field-validation {
   display: flex;
   align-items: flex-start;
   margin-top: 4px;

package/build/styles/main.css

@@ -30193,8 +30193,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
 
-.np-field-control,
-.np-field-footer {
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
+
+.np-field-validation {
   display: flex;
   align-items: flex-start;
   margin-top: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-b20133d",
+  "version": "0.0.0-experimental-21d2352",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/field/Field.css

@@ -1,5 +1,8 @@
-.np-field-control,
-.np-field-footer {
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
+.np-field-validation {
   display: flex;
   align-items: flex-start;
   margin-top: 4px;

package/src/field/Field.less

@@ -1,6 +1,9 @@
 .np-field {
-  &-control,
-  &-footer {
+  &-control {
+    margin-top: var(--size-4);
+  }
+
+  &-validation {
     display: flex;
     align-items: flex-start;
     margin-top: var(--size-4);

package/src/field/Field.tsx

@@ -130,7 +130,7 @@ export const Field = ({
                 )}
 
                 {(message || textareaCharacterCount) && (
-                  <div className="np-field-footer">
+                  <div className="np-field-validation">
                     {message && (
                       <InlinePrompt
                         sentiment={sentiment}

package/src/main.css

@@ -30193,8 +30193,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize) var(--wds-list-item-spotlight-strokeDashSize);
 }
 
-.np-field-control,
-.np-field-footer {
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
+
+.np-field-validation {
   display: flex;
   align-items: flex-start;
   margin-top: 4px;