@transferwise/components 0.0.0-experimental-70cb6d1 → 0.0.0-experimental-8bfed24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/field/Field.js +5 -4
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +5 -4
- package/build/field/Field.mjs.map +1 -1
- package/build/i18n/en.json +2 -0
- package/build/i18n/en.json.js +2 -0
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +2 -0
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/index.js +2 -0
- package/build/index.js.map +1 -1
- package/build/index.mjs +1 -0
- package/build/index.mjs.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.js +5 -4
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +5 -4
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
- package/build/main.css +107 -51
- package/build/moneyInput/MoneyInput.js +12 -28
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.mjs +14 -30
- package/build/moneyInput/MoneyInput.mjs.map +1 -1
- package/build/moneyInput/currencyFormatting.js +2 -8
- package/build/moneyInput/currencyFormatting.js.map +1 -1
- package/build/moneyInput/currencyFormatting.mjs +4 -5
- package/build/moneyInput/currencyFormatting.mjs.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.js +8 -40
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs +8 -40
- package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
- package/build/prompt/CriticalBanner/CriticalBanner.js +145 -0
- package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -0
- package/build/prompt/CriticalBanner/CriticalBanner.mjs +143 -0
- package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -0
- package/build/prompt/CriticalBanner/helpers.js +29 -0
- package/build/prompt/CriticalBanner/helpers.js.map +1 -0
- package/build/prompt/CriticalBanner/helpers.mjs +26 -0
- package/build/prompt/CriticalBanner/helpers.mjs.map +1 -0
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.js +2 -0
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs +2 -0
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
- package/build/prompt/common/Expander/Expander.js +47 -0
- package/build/prompt/common/Expander/Expander.js.map +1 -0
- package/build/prompt/common/Expander/Expander.messages.js +17 -0
- package/build/prompt/common/Expander/Expander.messages.js.map +1 -0
- package/build/prompt/common/Expander/Expander.messages.mjs +13 -0
- package/build/prompt/common/Expander/Expander.messages.mjs.map +1 -0
- package/build/prompt/common/Expander/Expander.mjs +44 -0
- package/build/prompt/common/Expander/Expander.mjs.map +1 -0
- package/build/prompt/helpers/promptMedia.js +52 -0
- package/build/prompt/helpers/promptMedia.js.map +1 -0
- package/build/prompt/helpers/promptMedia.mjs +50 -0
- package/build/prompt/helpers/promptMedia.mjs.map +1 -0
- package/build/styles/css/neptune.css +22 -22
- package/build/styles/less/neptune-tokens.less +4 -4
- package/build/styles/main.css +107 -51
- package/build/styles/prompt/CriticalBanner/CriticalBanner.css +39 -0
- package/build/styles/prompt/common/Expander/Expander.css +8 -0
- package/build/styles/props/neptune-tokens.css +2 -2
- package/build/styles/styles/less/neptune.css +22 -22
- package/build/typeahead/Typeahead.js +5 -4
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.mjs +5 -4
- package/build/typeahead/Typeahead.mjs.map +1 -1
- package/build/types/index.d.ts +2 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/moneyInput/MoneyInput.d.ts +0 -6
- package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
- package/build/types/moneyInput/currencyFormatting.d.ts +3 -4
- package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +2 -11
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
- package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts +40 -0
- package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -0
- package/build/types/prompt/CriticalBanner/helpers.d.ts +18 -0
- package/build/types/prompt/CriticalBanner/helpers.d.ts.map +1 -0
- package/build/types/prompt/CriticalBanner/index.d.ts +3 -0
- package/build/types/prompt/CriticalBanner/index.d.ts.map +1 -0
- package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +8 -3
- package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -1
- package/build/types/prompt/common/Expander/Expander.d.ts +20 -0
- package/build/types/prompt/common/Expander/Expander.d.ts.map +1 -0
- package/build/types/prompt/common/Expander/Expander.messages.d.ts +14 -0
- package/build/types/prompt/common/Expander/Expander.messages.d.ts.map +1 -0
- package/build/types/prompt/helpers/promptMedia.d.ts +22 -0
- package/build/types/prompt/helpers/promptMedia.d.ts.map +1 -0
- package/build/types/prompt/index.d.ts +2 -0
- package/build/types/prompt/index.d.ts.map +1 -1
- package/build/types/test-utils/index.d.ts +4 -0
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/package.json +16 -16
- package/src/i18n/en.json +2 -0
- package/src/index.ts +2 -2
- package/src/main.css +107 -51
- package/src/main.less +3 -1
- package/src/moneyInput/MoneyInput.story.tsx +1 -10
- package/src/moneyInput/MoneyInput.test.story.tsx +1 -141
- package/src/moneyInput/MoneyInput.test.tsx +0 -45
- package/src/moneyInput/MoneyInput.tsx +3 -27
- package/src/moneyInput/currencyFormatting.ts +5 -11
- package/src/prompt/ActionPrompt/ActionPrompt.tsx +9 -62
- package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +131 -0
- package/src/prompt/CriticalBanner/CriticalBanner.css +39 -0
- package/src/prompt/CriticalBanner/CriticalBanner.less +45 -0
- package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +645 -0
- package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +304 -0
- package/src/prompt/CriticalBanner/CriticalBanner.tsx +185 -0
- package/src/prompt/CriticalBanner/helpers.ts +39 -0
- package/src/prompt/CriticalBanner/index.ts +2 -0
- package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +9 -2
- package/src/prompt/common/Expander/Expander.css +8 -0
- package/src/prompt/common/Expander/Expander.less +9 -0
- package/src/prompt/common/Expander/Expander.messages.ts +14 -0
- package/src/prompt/common/Expander/Expander.test.tsx +167 -0
- package/src/prompt/common/Expander/Expander.tsx +83 -0
- package/src/prompt/helpers/promptMedia.tsx +79 -0
- package/src/prompt/index.ts +4 -0
- package/src/sentimentSurface/SentimentSurface.story.tsx +43 -17
- package/src/styles/less/neptune.css +22 -22
package/build/field/Field.js
CHANGED
|
@@ -26,17 +26,18 @@ require('react-intl');
|
|
|
26
26
|
require('../common/closeButton/CloseButton.messages.js');
|
|
27
27
|
var jsxRuntime = require('react/jsx-runtime');
|
|
28
28
|
var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
|
|
29
|
-
require('../statusIcon/StatusIcon.js');
|
|
30
29
|
require('../body/Body.js');
|
|
31
30
|
require('../button/Button.resolver.js');
|
|
31
|
+
require('../sentimentSurface/SentimentSurface.js');
|
|
32
|
+
require('../primitives/PrimitiveButton/PrimitiveButton.js');
|
|
33
|
+
require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
|
|
32
34
|
require('../badge/Badge.js');
|
|
33
35
|
require('@wise/art');
|
|
36
|
+
require('../statusIcon/StatusIcon.js');
|
|
34
37
|
require('@transferwise/neptune-validation');
|
|
35
38
|
require('../provider/direction/DirectionProvider.js');
|
|
36
|
-
require('../sentimentSurface/SentimentSurface.js');
|
|
37
|
-
require('../primitives/PrimitiveButton/PrimitiveButton.js');
|
|
38
|
-
require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
|
|
39
39
|
require('../link/Link.messages.js');
|
|
40
|
+
require('../prompt/common/Expander/Expander.messages.js');
|
|
40
41
|
var contexts = require('../inputs/contexts.js');
|
|
41
42
|
var Label = require('../label/Label.js');
|
|
42
43
|
|
package/build/field/Field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\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 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\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 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 <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 && (\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 </div>\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","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\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 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\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 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 <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 && (\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 </div>\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","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
|
package/build/field/Field.mjs
CHANGED
|
@@ -24,17 +24,18 @@ import 'react-intl';
|
|
|
24
24
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
25
25
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
26
26
|
import { InlinePrompt } from '../prompt/InlinePrompt/InlinePrompt.mjs';
|
|
27
|
-
import '../statusIcon/StatusIcon.mjs';
|
|
28
27
|
import '../body/Body.mjs';
|
|
29
28
|
import '../button/Button.resolver.mjs';
|
|
29
|
+
import '../sentimentSurface/SentimentSurface.mjs';
|
|
30
|
+
import '../primitives/PrimitiveButton/PrimitiveButton.mjs';
|
|
31
|
+
import '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
|
|
30
32
|
import '../badge/Badge.mjs';
|
|
31
33
|
import '@wise/art';
|
|
34
|
+
import '../statusIcon/StatusIcon.mjs';
|
|
32
35
|
import '@transferwise/neptune-validation';
|
|
33
36
|
import '../provider/direction/DirectionProvider.mjs';
|
|
34
|
-
import '../sentimentSurface/SentimentSurface.mjs';
|
|
35
|
-
import '../primitives/PrimitiveButton/PrimitiveButton.mjs';
|
|
36
|
-
import '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
|
|
37
37
|
import '../link/Link.messages.mjs';
|
|
38
|
+
import '../prompt/common/Expander/Expander.messages.mjs';
|
|
38
39
|
import { FieldLabelContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
|
|
39
40
|
import { Label as LabelNamespace } from '../label/Label.mjs';
|
|
40
41
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\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 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\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 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 <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 && (\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 </div>\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","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\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 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\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 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 <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 && (\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 </div>\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","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
|
package/build/i18n/en.json
CHANGED
|
@@ -16,6 +16,8 @@
|
|
|
16
16
|
"neptune.DateLookup.selected": "selected",
|
|
17
17
|
"neptune.DateLookup.twentyYears": "20 years",
|
|
18
18
|
"neptune.DateLookup.year": "year",
|
|
19
|
+
"neptune.Expander.collapseAriaLabel": "Collapse",
|
|
20
|
+
"neptune.Expander.expandAriaLabel": "Expand",
|
|
19
21
|
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
|
|
20
22
|
"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
|
|
21
23
|
"neptune.FlowNavigation.back": "back to previous step",
|
package/build/i18n/en.json.js
CHANGED
|
@@ -20,6 +20,8 @@ var en = {
|
|
|
20
20
|
"neptune.DateLookup.selected": "selected",
|
|
21
21
|
"neptune.DateLookup.twentyYears": "20 years",
|
|
22
22
|
"neptune.DateLookup.year": "year",
|
|
23
|
+
"neptune.Expander.collapseAriaLabel": "Collapse",
|
|
24
|
+
"neptune.Expander.expandAriaLabel": "Expand",
|
|
23
25
|
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
|
|
24
26
|
"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
|
|
25
27
|
"neptune.FlowNavigation.back": "back to previous step",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/en.json.mjs
CHANGED
|
@@ -16,6 +16,8 @@ var en = {
|
|
|
16
16
|
"neptune.DateLookup.selected": "selected",
|
|
17
17
|
"neptune.DateLookup.twentyYears": "20 years",
|
|
18
18
|
"neptune.DateLookup.year": "year",
|
|
19
|
+
"neptune.Expander.collapseAriaLabel": "Collapse",
|
|
20
|
+
"neptune.Expander.expandAriaLabel": "Expand",
|
|
19
21
|
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
|
|
20
22
|
"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
|
|
21
23
|
"neptune.FlowNavigation.back": "back to previous step",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.js
CHANGED
|
@@ -54,6 +54,7 @@ var InlineAlert = require('./inlineAlert/InlineAlert.js');
|
|
|
54
54
|
var InlinePrompt = require('./prompt/InlinePrompt/InlinePrompt.js');
|
|
55
55
|
var ActionPrompt = require('./prompt/ActionPrompt/ActionPrompt.js');
|
|
56
56
|
var InfoPrompt = require('./prompt/InfoPrompt/InfoPrompt.js');
|
|
57
|
+
var CriticalBanner = require('./prompt/CriticalBanner/CriticalBanner.js');
|
|
57
58
|
var InputWithDisplayFormat = require('./inputWithDisplayFormat/InputWithDisplayFormat.js');
|
|
58
59
|
var Input = require('./inputs/Input.js');
|
|
59
60
|
var InputGroup = require('./inputs/InputGroup.js');
|
|
@@ -221,6 +222,7 @@ exports.InlineAlert = InlineAlert.default;
|
|
|
221
222
|
exports.InlinePrompt = InlinePrompt.InlinePrompt;
|
|
222
223
|
exports.ActionPrompt = ActionPrompt.ActionPrompt;
|
|
223
224
|
exports.InfoPrompt = InfoPrompt.InfoPrompt;
|
|
225
|
+
exports.CriticalBanner = CriticalBanner.CriticalBanner;
|
|
224
226
|
exports.InputWithDisplayFormat = InputWithDisplayFormat.default;
|
|
225
227
|
exports.Input = Input.Input;
|
|
226
228
|
exports.InputGroup = InputGroup.InputGroup;
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.mjs
CHANGED
|
@@ -52,6 +52,7 @@ export { default as InlineAlert } from './inlineAlert/InlineAlert.mjs';
|
|
|
52
52
|
export { InlinePrompt } from './prompt/InlinePrompt/InlinePrompt.mjs';
|
|
53
53
|
export { ActionPrompt } from './prompt/ActionPrompt/ActionPrompt.mjs';
|
|
54
54
|
export { InfoPrompt } from './prompt/InfoPrompt/InfoPrompt.mjs';
|
|
55
|
+
export { CriticalBanner } from './prompt/CriticalBanner/CriticalBanner.mjs';
|
|
55
56
|
export { default as InputWithDisplayFormat } from './inputWithDisplayFormat/InputWithDisplayFormat.mjs';
|
|
56
57
|
export { Input } from './inputs/Input.mjs';
|
|
57
58
|
export { InputGroup } from './inputs/InputGroup.mjs';
|
package/build/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -27,17 +27,18 @@ require('../../common/closeButton/CloseButton.messages.js');
|
|
|
27
27
|
var jsxRuntime = require('react/jsx-runtime');
|
|
28
28
|
var ListItemContext = require('../ListItemContext.js');
|
|
29
29
|
var InlinePrompt = require('../../prompt/InlinePrompt/InlinePrompt.js');
|
|
30
|
-
require('../../statusIcon/StatusIcon.js');
|
|
31
30
|
require('../../body/Body.js');
|
|
32
31
|
require('../../button/Button.resolver.js');
|
|
32
|
+
require('../../sentimentSurface/SentimentSurface.js');
|
|
33
|
+
require('../../primitives/PrimitiveButton/PrimitiveButton.js');
|
|
34
|
+
require('../../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
|
|
33
35
|
require('../../badge/Badge.js');
|
|
34
36
|
require('@wise/art');
|
|
37
|
+
require('../../statusIcon/StatusIcon.js');
|
|
35
38
|
require('@transferwise/neptune-validation');
|
|
36
39
|
require('../../provider/direction/DirectionProvider.js');
|
|
37
|
-
require('../../sentimentSurface/SentimentSurface.js');
|
|
38
|
-
require('../../primitives/PrimitiveButton/PrimitiveButton.js');
|
|
39
|
-
require('../../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
|
|
40
40
|
require('../../link/Link.messages.js');
|
|
41
|
+
require('../../prompt/common/Expander/Expander.messages.js');
|
|
41
42
|
|
|
42
43
|
const Prompt = ({
|
|
43
44
|
sentiment: sentiment$1 = sentiment.Sentiment.NEUTRAL,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n InlinePromptProps,\n 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n media,\n loading,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n media={media}\n loading={loading}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n InlinePromptProps,\n 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n media,\n loading,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n media={media}\n loading={loading}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,WAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -25,17 +25,18 @@ import '../../common/closeButton/CloseButton.messages.mjs';
|
|
|
25
25
|
import { jsx } from 'react/jsx-runtime';
|
|
26
26
|
import { ListItemContext } from '../ListItemContext.mjs';
|
|
27
27
|
import { InlinePrompt } from '../../prompt/InlinePrompt/InlinePrompt.mjs';
|
|
28
|
-
import '../../statusIcon/StatusIcon.mjs';
|
|
29
28
|
import '../../body/Body.mjs';
|
|
30
29
|
import '../../button/Button.resolver.mjs';
|
|
30
|
+
import '../../sentimentSurface/SentimentSurface.mjs';
|
|
31
|
+
import '../../primitives/PrimitiveButton/PrimitiveButton.mjs';
|
|
32
|
+
import '../../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
|
|
31
33
|
import '../../badge/Badge.mjs';
|
|
32
34
|
import '@wise/art';
|
|
35
|
+
import '../../statusIcon/StatusIcon.mjs';
|
|
33
36
|
import '@transferwise/neptune-validation';
|
|
34
37
|
import '../../provider/direction/DirectionProvider.mjs';
|
|
35
|
-
import '../../sentimentSurface/SentimentSurface.mjs';
|
|
36
|
-
import '../../primitives/PrimitiveButton/PrimitiveButton.mjs';
|
|
37
|
-
import '../../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
|
|
38
38
|
import '../../link/Link.messages.mjs';
|
|
39
|
+
import '../../prompt/common/Expander/Expander.messages.mjs';
|
|
39
40
|
|
|
40
41
|
const Prompt = ({
|
|
41
42
|
sentiment = Sentiment.NEUTRAL,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n InlinePromptProps,\n 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n media,\n loading,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n media={media}\n loading={loading}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<\n InlinePromptProps,\n 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n media,\n loading,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n media={media}\n loading={loading}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACflB,IAAAA,SAAS,EAAEA,SAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
|
package/build/main.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -142,8 +142,8 @@
|
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
/**
|
|
145
|
-
* Do not edit directly
|
|
146
|
-
* Generated on
|
|
145
|
+
* Do not edit directly
|
|
146
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
147
147
|
*/
|
|
148
148
|
|
|
149
149
|
.np-theme-personal {
|
|
@@ -391,8 +391,8 @@
|
|
|
391
391
|
}
|
|
392
392
|
|
|
393
393
|
/**
|
|
394
|
-
* Do not edit directly
|
|
395
|
-
* Generated on
|
|
394
|
+
* Do not edit directly
|
|
395
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
396
396
|
*/
|
|
397
397
|
|
|
398
398
|
.np-theme-personal--forest-green {
|
|
@@ -640,8 +640,8 @@
|
|
|
640
640
|
}
|
|
641
641
|
|
|
642
642
|
/**
|
|
643
|
-
* Do not edit directly
|
|
644
|
-
* Generated on
|
|
643
|
+
* Do not edit directly
|
|
644
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
645
645
|
*/
|
|
646
646
|
|
|
647
647
|
.np-theme-personal--bright-green {
|
|
@@ -889,8 +889,8 @@
|
|
|
889
889
|
}
|
|
890
890
|
|
|
891
891
|
/**
|
|
892
|
-
* Do not edit directly
|
|
893
|
-
* Generated on
|
|
892
|
+
* Do not edit directly
|
|
893
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
894
894
|
*/
|
|
895
895
|
|
|
896
896
|
.np-theme-personal--dark {
|
|
@@ -1138,8 +1138,8 @@
|
|
|
1138
1138
|
}
|
|
1139
1139
|
|
|
1140
1140
|
/**
|
|
1141
|
-
* Do not edit directly
|
|
1142
|
-
* Generated on
|
|
1141
|
+
* Do not edit directly
|
|
1142
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
1143
1143
|
*/
|
|
1144
1144
|
|
|
1145
1145
|
.np-theme-platform {
|
|
@@ -1321,8 +1321,8 @@
|
|
|
1321
1321
|
}
|
|
1322
1322
|
|
|
1323
1323
|
/**
|
|
1324
|
-
* Do not edit directly
|
|
1325
|
-
* Generated on
|
|
1324
|
+
* Do not edit directly
|
|
1325
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
1326
1326
|
*/
|
|
1327
1327
|
|
|
1328
1328
|
.np-theme-platform--forest-green {
|
|
@@ -1504,8 +1504,8 @@
|
|
|
1504
1504
|
}
|
|
1505
1505
|
|
|
1506
1506
|
/**
|
|
1507
|
-
* Do not edit directly
|
|
1508
|
-
* Generated on
|
|
1507
|
+
* Do not edit directly
|
|
1508
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
1509
1509
|
*/
|
|
1510
1510
|
|
|
1511
1511
|
.np-theme-business {
|
|
@@ -1688,8 +1688,8 @@
|
|
|
1688
1688
|
}
|
|
1689
1689
|
|
|
1690
1690
|
/**
|
|
1691
|
-
* Do not edit directly
|
|
1692
|
-
* Generated on
|
|
1691
|
+
* Do not edit directly
|
|
1692
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
1693
1693
|
*/
|
|
1694
1694
|
|
|
1695
1695
|
.np-theme-business--dark {
|
|
@@ -1872,8 +1872,8 @@
|
|
|
1872
1872
|
}
|
|
1873
1873
|
|
|
1874
1874
|
/**
|
|
1875
|
-
* Do not edit directly
|
|
1876
|
-
* Generated on
|
|
1875
|
+
* Do not edit directly
|
|
1876
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
1877
1877
|
*/
|
|
1878
1878
|
|
|
1879
1879
|
.np-theme-business--forest-green {
|
|
@@ -2056,8 +2056,8 @@
|
|
|
2056
2056
|
}
|
|
2057
2057
|
|
|
2058
2058
|
/**
|
|
2059
|
-
* Do not edit directly
|
|
2060
|
-
* Generated on
|
|
2059
|
+
* Do not edit directly
|
|
2060
|
+
* Generated on Wed, 07 Jan 2026 11:56:15 GMT
|
|
2061
2061
|
*/
|
|
2062
2062
|
|
|
2063
2063
|
.np-theme-business--bright-green {
|
|
@@ -32176,6 +32176,91 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
32176
32176
|
padding: 0;
|
|
32177
32177
|
}
|
|
32178
32178
|
|
|
32179
|
+
.wds-action-prompt {
|
|
32180
|
+
--Prompt-padding: var(--size-16);
|
|
32181
|
+
--Prompt-actions-gap: var(--size-8);
|
|
32182
|
+
--Prompt-gap: var(--size-10) var(--size-16);
|
|
32183
|
+
--Prompt-border-radius: var(--radius-large);
|
|
32184
|
+
}
|
|
32185
|
+
|
|
32186
|
+
.wds-action-prompt--media-image {
|
|
32187
|
+
width: 48px;
|
|
32188
|
+
width: var(--size-48);
|
|
32189
|
+
height: 48px;
|
|
32190
|
+
height: var(--size-48);
|
|
32191
|
+
-o-object-fit: contain;
|
|
32192
|
+
object-fit: contain;
|
|
32193
|
+
}
|
|
32194
|
+
|
|
32195
|
+
@media (max-width: 767px) {
|
|
32196
|
+
.wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
|
|
32197
|
+
flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
|
|
32198
|
+
min-width: -moz-fit-content;
|
|
32199
|
+
min-width: fit-content;
|
|
32200
|
+
}
|
|
32201
|
+
}
|
|
32202
|
+
|
|
32203
|
+
.wds-action-prompt__content {
|
|
32204
|
+
max-width: calc(48px * 10);
|
|
32205
|
+
max-width: calc(var(--size-48) * 10);
|
|
32206
|
+
}
|
|
32207
|
+
|
|
32208
|
+
.wds-critical-banner {
|
|
32209
|
+
--Prompt-padding: var(--size-16);
|
|
32210
|
+
--Prompt-actions-gap: var(--size-8);
|
|
32211
|
+
--Prompt-gap: var(--size-10) var(--size-16);
|
|
32212
|
+
--Prompt-border-radius: 0;
|
|
32213
|
+
}
|
|
32214
|
+
|
|
32215
|
+
.wds-critical-banner--media-image {
|
|
32216
|
+
width: 48px;
|
|
32217
|
+
width: var(--size-48);
|
|
32218
|
+
height: 48px;
|
|
32219
|
+
height: var(--size-48);
|
|
32220
|
+
-o-object-fit: contain;
|
|
32221
|
+
object-fit: contain;
|
|
32222
|
+
}
|
|
32223
|
+
|
|
32224
|
+
@media (max-width: 767px) {
|
|
32225
|
+
.wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
|
|
32226
|
+
flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
|
|
32227
|
+
min-width: -moz-fit-content;
|
|
32228
|
+
min-width: fit-content;
|
|
32229
|
+
}
|
|
32230
|
+
}
|
|
32231
|
+
|
|
32232
|
+
.wds-critical-banner__description--collapsed {
|
|
32233
|
+
display: -webkit-box;
|
|
32234
|
+
-webkit-line-clamp: 2;
|
|
32235
|
+
-webkit-box-orient: vertical;
|
|
32236
|
+
overflow: hidden;
|
|
32237
|
+
}
|
|
32238
|
+
|
|
32239
|
+
.wds-critical-banner .wds-prompt__content-wrapper {
|
|
32240
|
+
grid-template-columns: auto 1fr auto;
|
|
32241
|
+
align-items: flex-start;
|
|
32242
|
+
}
|
|
32243
|
+
|
|
32244
|
+
.wds-critical-banner__text-wrapper {
|
|
32245
|
+
min-width: 0;
|
|
32246
|
+
}
|
|
32247
|
+
|
|
32248
|
+
@media (max-width: 767px) {
|
|
32249
|
+
.wds-critical-banner .wds-prompt__actions-wrapper {
|
|
32250
|
+
grid-column: span 3;
|
|
32251
|
+
}
|
|
32252
|
+
}
|
|
32253
|
+
|
|
32254
|
+
.wds-expander-toggle {
|
|
32255
|
+
align-self: flex-start;
|
|
32256
|
+
flex-shrink: 0;
|
|
32257
|
+
transition: transform 0.2s ease-in-out;
|
|
32258
|
+
}
|
|
32259
|
+
|
|
32260
|
+
.wds-expander-toggle--collapsed {
|
|
32261
|
+
transform: rotate(180deg);
|
|
32262
|
+
}
|
|
32263
|
+
|
|
32179
32264
|
.wds-radio-group .np-radio:last-child label {
|
|
32180
32265
|
margin-bottom: 0;
|
|
32181
32266
|
}
|
|
@@ -34600,32 +34685,3 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
34600
34685
|
.np-list-item__action {
|
|
34601
34686
|
flex-shrink: 0;
|
|
34602
34687
|
}
|
|
34603
|
-
|
|
34604
|
-
.wds-action-prompt {
|
|
34605
|
-
--Prompt-padding: var(--size-16);
|
|
34606
|
-
--Prompt-actions-gap: var(--size-8);
|
|
34607
|
-
--Prompt-gap: var(--size-10) var(--size-16);
|
|
34608
|
-
--Prompt-border-radius: var(--radius-large);
|
|
34609
|
-
}
|
|
34610
|
-
|
|
34611
|
-
.wds-action-prompt--media-image {
|
|
34612
|
-
width: 48px;
|
|
34613
|
-
width: var(--size-48);
|
|
34614
|
-
height: 48px;
|
|
34615
|
-
height: var(--size-48);
|
|
34616
|
-
-o-object-fit: contain;
|
|
34617
|
-
object-fit: contain;
|
|
34618
|
-
}
|
|
34619
|
-
|
|
34620
|
-
@media (max-width: 767px) {
|
|
34621
|
-
.wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
|
|
34622
|
-
flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
|
|
34623
|
-
min-width: -moz-fit-content;
|
|
34624
|
-
min-width: fit-content;
|
|
34625
|
-
}
|
|
34626
|
-
}
|
|
34627
|
-
|
|
34628
|
-
.wds-action-prompt__content {
|
|
34629
|
-
max-width: calc(48px * 10);
|
|
34630
|
-
max-width: calc(var(--size-48) * 10);
|
|
34631
|
-
}
|
|
@@ -50,24 +50,16 @@ const isNumberOrNull = v => neptuneValidation.isNumber(v) || neptuneValidation.i
|
|
|
50
50
|
const formatAmountIfSet = ({
|
|
51
51
|
amount,
|
|
52
52
|
currency,
|
|
53
|
-
locale
|
|
54
|
-
decimals
|
|
53
|
+
locale
|
|
55
54
|
}) => {
|
|
56
|
-
|
|
57
|
-
return '';
|
|
58
|
-
}
|
|
59
|
-
if (decimals != null && currencyFormatting.getCurrencyDecimals(currency) !== 0) {
|
|
60
|
-
return formatting.formatNumber(amount, locale, decimals);
|
|
61
|
-
}
|
|
62
|
-
return formatting.formatAmount(amount, currency, locale);
|
|
55
|
+
return typeof amount === 'number' ? formatting.formatAmount(amount, currency, locale) : '';
|
|
63
56
|
};
|
|
64
57
|
const parseNumber = ({
|
|
65
58
|
amount,
|
|
66
59
|
currency,
|
|
67
|
-
locale
|
|
68
|
-
decimals
|
|
60
|
+
locale
|
|
69
61
|
}) => {
|
|
70
|
-
return currencyFormatting.parseAmount(amount, currency, locale
|
|
62
|
+
return currencyFormatting.parseAmount(amount, currency, locale);
|
|
71
63
|
};
|
|
72
64
|
const allowedInputKeys = new Set(['Backspace', 'Delete', ',', '.', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Enter', 'Escape', 'Tab']);
|
|
73
65
|
class MoneyInput extends React.Component {
|
|
@@ -84,8 +76,7 @@ class MoneyInput extends React.Component {
|
|
|
84
76
|
formattedAmount: formatAmountIfSet({
|
|
85
77
|
amount: props.amount,
|
|
86
78
|
currency: props.selectedCurrency.currency,
|
|
87
|
-
locale: props.intl.locale
|
|
88
|
-
decimals: props.decimals
|
|
79
|
+
locale: props.intl.locale
|
|
89
80
|
}),
|
|
90
81
|
locale: props.intl.locale
|
|
91
82
|
};
|
|
@@ -99,8 +90,7 @@ class MoneyInput extends React.Component {
|
|
|
99
90
|
formattedAmount: formatAmountIfSet({
|
|
100
91
|
amount: nextProps.amount,
|
|
101
92
|
currency: nextProps.selectedCurrency.currency,
|
|
102
|
-
locale: nextProps.intl.locale
|
|
103
|
-
decimals: nextProps.decimals
|
|
93
|
+
locale: nextProps.intl.locale
|
|
104
94
|
})
|
|
105
95
|
});
|
|
106
96
|
}
|
|
@@ -127,16 +117,14 @@ class MoneyInput extends React.Component {
|
|
|
127
117
|
const parsed = neptuneValidation.isEmpty(paste) ? null : parseNumber({
|
|
128
118
|
amount: paste,
|
|
129
119
|
currency: this.props.selectedCurrency.currency,
|
|
130
|
-
locale
|
|
131
|
-
decimals: this.props.decimals
|
|
120
|
+
locale
|
|
132
121
|
});
|
|
133
122
|
if (isNumberOrNull(parsed)) {
|
|
134
123
|
this.setState({
|
|
135
124
|
formattedAmount: formatAmountIfSet({
|
|
136
125
|
amount: parsed,
|
|
137
126
|
currency: this.props.selectedCurrency.currency,
|
|
138
|
-
locale
|
|
139
|
-
decimals: this.props.decimals
|
|
127
|
+
locale
|
|
140
128
|
})
|
|
141
129
|
});
|
|
142
130
|
this.props.onAmountChange?.(parsed);
|
|
@@ -153,8 +141,7 @@ class MoneyInput extends React.Component {
|
|
|
153
141
|
const parsed = neptuneValidation.isEmpty(value) ? null : parseNumber({
|
|
154
142
|
amount: value,
|
|
155
143
|
currency: this.props.selectedCurrency.currency,
|
|
156
|
-
locale: this.state.locale
|
|
157
|
-
decimals: this.props.decimals
|
|
144
|
+
locale: this.state.locale
|
|
158
145
|
});
|
|
159
146
|
if (isNumberOrNull(parsed)) {
|
|
160
147
|
this.props.onAmountChange?.(parsed);
|
|
@@ -194,8 +181,7 @@ class MoneyInput extends React.Component {
|
|
|
194
181
|
const parsed = parseNumber({
|
|
195
182
|
amount: previousState.formattedAmount,
|
|
196
183
|
currency: this.props.selectedCurrency.currency,
|
|
197
|
-
locale: previousState.locale
|
|
198
|
-
decimals: this.props.decimals
|
|
184
|
+
locale: previousState.locale
|
|
199
185
|
});
|
|
200
186
|
if (!isNumberOrNull(parsed)) {
|
|
201
187
|
return {
|
|
@@ -206,8 +192,7 @@ class MoneyInput extends React.Component {
|
|
|
206
192
|
formattedAmount: formatAmountIfSet({
|
|
207
193
|
amount: parsed,
|
|
208
194
|
currency: this.props.selectedCurrency.currency,
|
|
209
|
-
locale: previousState.locale
|
|
210
|
-
decimals: this.props.decimals
|
|
195
|
+
locale: previousState.locale
|
|
211
196
|
})
|
|
212
197
|
};
|
|
213
198
|
});
|
|
@@ -272,8 +257,7 @@ class MoneyInput extends React.Component {
|
|
|
272
257
|
placeholder: formatAmountIfSet({
|
|
273
258
|
amount: this.props.placeholder,
|
|
274
259
|
currency: this.props.selectedCurrency.currency,
|
|
275
|
-
locale: this.state.locale
|
|
276
|
-
decimals: this.props.decimals
|
|
260
|
+
locale: this.state.locale
|
|
277
261
|
}),
|
|
278
262
|
autoComplete: "off",
|
|
279
263
|
"aria-describedby": selectedCurrencyElementId,
|