@transferwise/components 0.0.0-experimental-e3593b2 → 0.0.0-experimental-a33db42
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/dateLookup/dateTrigger/DateTrigger.js +4 -8
- package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.mjs +4 -8
- package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
- package/build/field/Field.js +2 -9
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +2 -9
- package/build/field/Field.mjs.map +1 -1
- package/build/i18n/en.json +1 -3
- package/build/i18n/en.json.js +1 -3
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +1 -3
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/label/Label.js +1 -29
- package/build/label/Label.js.map +1 -1
- package/build/label/Label.mjs +2 -30
- package/build/label/Label.mjs.map +1 -1
- package/build/main.css +8 -0
- package/build/moneyInput/MoneyInput.js +11 -29
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.mjs +11 -29
- package/build/moneyInput/MoneyInput.mjs.map +1 -1
- package/build/styles/dateLookup/dateTrigger/DateTrigger.css +8 -0
- package/build/styles/main.css +8 -0
- package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
- package/build/types/field/Field.d.ts +2 -4
- package/build/types/field/Field.d.ts.map +1 -1
- package/build/types/index.d.ts +1 -1
- package/build/types/index.d.ts.map +1 -1
- package/build/types/label/Label.d.ts +1 -10
- package/build/types/label/Label.d.ts.map +1 -1
- package/build/types/moneyInput/MoneyInput.d.ts +0 -1
- package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/dateInput/DateInput.tests.story.tsx +32 -8
- package/src/dateLookup/DateLookup.rtl.spec.tsx +1 -1
- package/src/dateLookup/dateTrigger/DateTrigger.css +8 -0
- package/src/dateLookup/dateTrigger/DateTrigger.less +8 -0
- package/src/dateLookup/dateTrigger/DateTrigger.spec.js +1 -1
- package/src/dateLookup/dateTrigger/DateTrigger.tsx +4 -9
- package/src/field/Field.spec.tsx +3 -3
- package/src/field/Field.story.tsx +3 -40
- package/src/field/Field.tests.story.tsx +33 -0
- package/src/field/Field.tsx +6 -12
- package/src/i18n/en.json +1 -3
- package/src/index.ts +1 -1
- package/src/inlineAlert/InlineAlert.story.tsx +21 -8
- package/src/inputs/InputGroup.spec.tsx +1 -1
- package/src/inputs/SearchInput.spec.tsx +1 -1
- package/src/inputs/SelectInput.spec.tsx +1 -1
- package/src/label/Label.story.tsx +21 -37
- package/src/label/Label.tsx +2 -44
- package/src/main.css +8 -0
- package/src/moneyInput/MoneyInput.story.tsx +0 -34
- package/src/moneyInput/MoneyInput.tsx +0 -21
- package/src/radioGroup/RadioGroup.rtl.spec.tsx +1 -1
- package/src/select/Select.rtl.spec.tsx +1 -1
- package/src/switch/Switch.spec.tsx +1 -1
- package/build/label/Label.messages.js +0 -15
- package/build/label/Label.messages.js.map +0 -1
- package/build/label/Label.messages.mjs +0 -13
- package/build/label/Label.messages.mjs.map +0 -1
- package/build/types/label/Label.messages.d.ts +0 -12
- package/build/types/label/Label.messages.d.ts.map +0 -1
- package/build/types/label/index.d.ts +0 -3
- package/build/types/label/index.d.ts.map +0 -1
- package/src/label/Label.messages.tsx +0 -12
- package/src/label/index.ts +0 -2
|
@@ -7,9 +7,7 @@ var CloseButton = require('../../common/closeButton/CloseButton.js');
|
|
|
7
7
|
var DateTrigger_messages = require('./DateTrigger.messages.js');
|
|
8
8
|
var React = require('react');
|
|
9
9
|
var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
|
|
10
|
-
var Body = require('../../body/Body.js');
|
|
11
10
|
var jsxRuntime = require('react/jsx-runtime');
|
|
12
|
-
var typography = require('../../common/propsValues/typography.js');
|
|
13
11
|
var position = require('../../common/propsValues/position.js');
|
|
14
12
|
var size = require('../../common/propsValues/size.js');
|
|
15
13
|
|
|
@@ -37,13 +35,11 @@ const DateTrigger = ({
|
|
|
37
35
|
disabled: disabled,
|
|
38
36
|
type: "button",
|
|
39
37
|
onClick: onClick,
|
|
40
|
-
children: [label && /*#__PURE__*/jsxRuntime.jsx(
|
|
41
|
-
|
|
42
|
-
className: "np-date-trigger-label m-r-1",
|
|
38
|
+
children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
39
|
+
className: "control-label small m-r-1",
|
|
43
40
|
children: label
|
|
44
|
-
}), selectedDate ? /*#__PURE__*/jsxRuntime.jsx(
|
|
45
|
-
|
|
46
|
-
type: typography.Typography.BODY_LARGE,
|
|
41
|
+
}), selectedDate ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
42
|
+
className: "font-weight-normal",
|
|
47
43
|
children: formatting.formatDate(selectedDate, locale, {
|
|
48
44
|
day: 'numeric',
|
|
49
45
|
month: monthFormat,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge
|
|
1
|
+
{"version":3,"file":"DateTrigger.js","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\ninterface DateTriggerProps {\n selectedDate: Date | null;\n size: SizeSmall | SizeMedium | SizeLarge;\n placeholder: string;\n label: string;\n monthFormat: 'short' | 'long';\n disabled: boolean;\n onClick: () => void;\n onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n monthFormat,\n disabled,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <>\n <button\n aria-haspopup=\"dialog\"\n aria-expanded={overlayId != null}\n aria-controls={overlayId}\n className={`btn btn-${size} btn-input np-date-trigger`}\n disabled={disabled}\n type=\"button\"\n onClick={onClick}\n >\n {label && <span className=\"control-label small m-r-1\">{label}</span>}\n {selectedDate ? (\n <span className=\"font-weight-normal\">\n {formatDate(selectedDate, locale, {\n day: 'numeric',\n month: monthFormat,\n year: 'numeric',\n })}\n </span>\n ) : (\n <span\n className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n visible-md-inline visible-lg-inline visible-xl-inline\"\n >\n {placeholder}\n </span>\n )}\n {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n </button>\n {onClear ? (\n <>\n <div className=\"clearfix\" />\n <span className=\"input-group-addon\">\n <CloseButton\n className={`clear-btn clear-btn--${size}`}\n aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n size={Size.SMALL}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n event.preventDefault();\n onClear();\n }}\n />\n </span>\n </>\n ) : null}\n </>\n );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","onClick","onClear","locale","formatMessage","useIntl","overlayId","useContext","OverlayIdContext","_jsxs","_Fragment","children","className","type","_jsx","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":";;;;;;;;;;;;;AAsBMA,MAAAA,WAAW,GAA+BA,CAAC;EAC/CC,YAAY;QACZC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,WAAW;EACXC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,OAAO;AACPC,EAAAA,OAAAA;AACD,CAAA,KAAI;EACH,MAAM;IAAEC,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAE3C,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,eAAA,CAAA,QAAA,EAAA;AACE,MAAA,eAAA,EAAc,QAAQ;MACtB,eAAeH,EAAAA,SAAS,IAAI,IAAK;AACjC,MAAA,eAAA,EAAeA,SAAU;MACzBM,SAAS,EAAE,CAAWlB,QAAAA,EAAAA,MAAI,CAA6B,0BAAA,CAAA;AACvDM,MAAAA,QAAQ,EAAEA,QAAS;AACnBa,MAAAA,IAAI,EAAC,QAAQ;AACbZ,MAAAA,OAAO,EAAEA,OAAQ;MAAAU,QAAA,EAAA,CAEhBb,KAAK,iBAAIgB,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,2BAA2B;AAAAD,QAAAA,QAAA,EAAEb,KAAAA;AAAK,OAAO,CAAC,EACnEL,YAAY,gBACXqB,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,oBAAoB;AAAAD,QAAAA,QAAA,EACjCI,qBAAU,CAACtB,YAAY,EAAEU,MAAM,EAAE;AAChCa,UAAAA,GAAG,EAAE,SAAS;AACdC,UAAAA,KAAK,EAAElB,WAAW;AAClBmB,UAAAA,IAAI,EAAE,SAAA;SACP,CAAA;OACG,CAAC,gBAEPJ,cAAA,CAAA,MAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,oHACuD;AAAAD,QAAAA,QAAA,EAEhEd,WAAAA;AAAW,OACR,CACP,EACA,CAACK,OAAO,gBAAGY,cAAA,CAACK,OAAO,EAAA;QAACC,WAAW,EAAEC,iBAAQ,CAACC,MAAO;AAACtB,QAAAA,QAAQ,EAAEA,QAAAA;OAAS,CAAG,GAAG,IAAI,CAAA;AAAA,KAC1E,CACR,EAACE,OAAO,gBACNO,eAAA,CAAAC,mBAAA,EAAA;AAAAC,MAAAA,QAAA,gBACEG,cAAA,CAAA,KAAA,EAAA;AAAKF,QAAAA,SAAS,EAAC,UAAA;OACf,CAAA,eAAAE,cAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,mBAAmB;QAAAD,QAAA,eACjCG,cAAA,CAACS,uBAAW,EAAA;UACVX,SAAS,EAAE,CAAwBlB,qBAAAA,EAAAA,MAAI,CAAG,CAAA;UAC1C,YAAY,EAAA,CAAA,EAAGU,aAAa,CAACoB,oBAAQ,CAACC,SAAS,CAAC,CAAI3B,CAAAA,EAAAA,KAAK,CAAG,CAAA;UAC5DJ,IAAI,EAAEC,SAAI,CAAC+B,KAAM;UACjBzB,OAAO,EAAG0B,KAA0C,IAAI;YACtDA,KAAK,CAACC,eAAe,EAAE,CAAA;YACvBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtB3B,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SAEJ,CAAA;AAAA,OAAM,CACR,CAAA;KAAA,CAAG,GACD,IAAI,CAAA;AAAA,GACV,CAAG,CAAA;AAEP;;;;"}
|
|
@@ -5,9 +5,7 @@ import { CloseButton } from '../../common/closeButton/CloseButton.mjs';
|
|
|
5
5
|
import dateTriggerMessages from './DateTrigger.messages.mjs';
|
|
6
6
|
import { useContext } from 'react';
|
|
7
7
|
import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
|
|
8
|
-
import Body from '../../body/Body.mjs';
|
|
9
8
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
10
|
-
import { Typography } from '../../common/propsValues/typography.mjs';
|
|
11
9
|
import { Position } from '../../common/propsValues/position.mjs';
|
|
12
10
|
import { Size } from '../../common/propsValues/size.mjs';
|
|
13
11
|
|
|
@@ -35,13 +33,11 @@ const DateTrigger = ({
|
|
|
35
33
|
disabled: disabled,
|
|
36
34
|
type: "button",
|
|
37
35
|
onClick: onClick,
|
|
38
|
-
children: [label && /*#__PURE__*/jsx(
|
|
39
|
-
|
|
40
|
-
className: "np-date-trigger-label m-r-1",
|
|
36
|
+
children: [label && /*#__PURE__*/jsx("span", {
|
|
37
|
+
className: "control-label small m-r-1",
|
|
41
38
|
children: label
|
|
42
|
-
}), selectedDate ? /*#__PURE__*/jsx(
|
|
43
|
-
|
|
44
|
-
type: Typography.BODY_LARGE,
|
|
39
|
+
}), selectedDate ? /*#__PURE__*/jsx("span", {
|
|
40
|
+
className: "font-weight-normal",
|
|
45
41
|
children: formatDate(selectedDate, locale, {
|
|
46
42
|
day: 'numeric',
|
|
47
43
|
month: monthFormat,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge
|
|
1
|
+
{"version":3,"file":"DateTrigger.mjs","sources":["../../../src/dateLookup/dateTrigger/DateTrigger.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport Chevron from '../../chevron';\nimport { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';\nimport { CloseButton } from '../../common/closeButton/CloseButton';\n\nimport messages from './DateTrigger.messages';\nimport { useContext } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\n\ninterface DateTriggerProps {\n selectedDate: Date | null;\n size: SizeSmall | SizeMedium | SizeLarge;\n placeholder: string;\n label: string;\n monthFormat: 'short' | 'long';\n disabled: boolean;\n onClick: () => void;\n onClear?: () => void;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n monthFormat,\n disabled,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <>\n <button\n aria-haspopup=\"dialog\"\n aria-expanded={overlayId != null}\n aria-controls={overlayId}\n className={`btn btn-${size} btn-input np-date-trigger`}\n disabled={disabled}\n type=\"button\"\n onClick={onClick}\n >\n {label && <span className=\"control-label small m-r-1\">{label}</span>}\n {selectedDate ? (\n <span className=\"font-weight-normal\">\n {formatDate(selectedDate, locale, {\n day: 'numeric',\n month: monthFormat,\n year: 'numeric',\n })}\n </span>\n ) : (\n <span\n className=\"form-control-placeholder visible-xs-inline visible-sm-inline\n visible-md-inline visible-lg-inline visible-xl-inline\"\n >\n {placeholder}\n </span>\n )}\n {!onClear ? <Chevron orientation={Position.BOTTOM} disabled={disabled} /> : null}\n </button>\n {onClear ? (\n <>\n <div className=\"clearfix\" />\n <span className=\"input-group-addon\">\n <CloseButton\n className={`clear-btn clear-btn--${size}`}\n aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n size={Size.SMALL}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n event.preventDefault();\n onClear();\n }}\n />\n </span>\n </>\n ) : null}\n </>\n );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","onClick","onClear","locale","formatMessage","useIntl","overlayId","useContext","OverlayIdContext","_jsxs","_Fragment","children","className","type","_jsx","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","CloseButton","messages","ariaLabel","SMALL","event","stopPropagation","preventDefault"],"mappings":";;;;;;;;;;;AAsBMA,MAAAA,WAAW,GAA+BA,CAAC;EAC/CC,YAAY;EACZC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,WAAW;EACXC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,OAAO;AACPC,EAAAA,OAAAA;AACD,CAAA,KAAI;EACH,MAAM;IAAEC,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AAE3C,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEF,IAAA,CAAA,QAAA,EAAA;AACE,MAAA,eAAA,EAAc,QAAQ;MACtB,eAAeH,EAAAA,SAAS,IAAI,IAAK;AACjC,MAAA,eAAA,EAAeA,SAAU;MACzBM,SAAS,EAAE,CAAWlB,QAAAA,EAAAA,IAAI,CAA6B,0BAAA,CAAA;AACvDM,MAAAA,QAAQ,EAAEA,QAAS;AACnBa,MAAAA,IAAI,EAAC,QAAQ;AACbZ,MAAAA,OAAO,EAAEA,OAAQ;MAAAU,QAAA,EAAA,CAEhBb,KAAK,iBAAIgB,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,2BAA2B;AAAAD,QAAAA,QAAA,EAAEb,KAAAA;AAAK,OAAO,CAAC,EACnEL,YAAY,gBACXqB,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,oBAAoB;AAAAD,QAAAA,QAAA,EACjCI,UAAU,CAACtB,YAAY,EAAEU,MAAM,EAAE;AAChCa,UAAAA,GAAG,EAAE,SAAS;AACdC,UAAAA,KAAK,EAAElB,WAAW;AAClBmB,UAAAA,IAAI,EAAE,SAAA;SACP,CAAA;OACG,CAAC,gBAEPJ,GAAA,CAAA,MAAA,EAAA;AACEF,QAAAA,SAAS,EAAC,oHACuD;AAAAD,QAAAA,QAAA,EAEhEd,WAAAA;AAAW,OACR,CACP,EACA,CAACK,OAAO,gBAAGY,GAAA,CAACK,OAAO,EAAA;QAACC,WAAW,EAAEC,QAAQ,CAACC,MAAO;AAACtB,QAAAA,QAAQ,EAAEA,QAAAA;OAAS,CAAG,GAAG,IAAI,CAAA;AAAA,KAC1E,CACR,EAACE,OAAO,gBACNO,IAAA,CAAAC,QAAA,EAAA;AAAAC,MAAAA,QAAA,gBACEG,GAAA,CAAA,KAAA,EAAA;AAAKF,QAAAA,SAAS,EAAC,UAAA;OACf,CAAA,eAAAE,GAAA,CAAA,MAAA,EAAA;AAAMF,QAAAA,SAAS,EAAC,mBAAmB;QAAAD,QAAA,eACjCG,GAAA,CAACS,WAAW,EAAA;UACVX,SAAS,EAAE,CAAwBlB,qBAAAA,EAAAA,IAAI,CAAG,CAAA;UAC1C,YAAY,EAAA,CAAA,EAAGU,aAAa,CAACoB,mBAAQ,CAACC,SAAS,CAAC,CAAI3B,CAAAA,EAAAA,KAAK,CAAG,CAAA;UAC5DJ,IAAI,EAAEC,IAAI,CAAC+B,KAAM;UACjBzB,OAAO,EAAG0B,KAA0C,IAAI;YACtDA,KAAK,CAACC,eAAe,EAAE,CAAA;YACvBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtB3B,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SAEJ,CAAA;AAAA,OAAM,CACR,CAAA;KAAA,CAAG,GACD,IAAI,CAAA;AAAA,GACV,CAAG,CAAA;AAEP;;;;"}
|
package/build/field/Field.js
CHANGED
|
@@ -15,17 +15,14 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
|
15
15
|
const Field = ({
|
|
16
16
|
id,
|
|
17
17
|
label,
|
|
18
|
-
required = false,
|
|
19
18
|
message: propMessage,
|
|
20
|
-
hint,
|
|
21
|
-
description = hint,
|
|
22
19
|
sentiment: propType = sentiment.Sentiment.NEUTRAL,
|
|
23
20
|
className,
|
|
24
21
|
children,
|
|
25
22
|
...props
|
|
26
23
|
}) => {
|
|
27
24
|
const sentiment$1 = props.error ? sentiment.Sentiment.NEGATIVE : propType;
|
|
28
|
-
const message =
|
|
25
|
+
const message = props.error || props.hint || propMessage;
|
|
29
26
|
const hasError = sentiment$1 === sentiment.Sentiment.NEGATIVE;
|
|
30
27
|
const labelId = React.useId();
|
|
31
28
|
const fallbackInputId = React.useId();
|
|
@@ -49,11 +46,7 @@ const Field = ({
|
|
|
49
46
|
children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(Label.Label, {
|
|
50
47
|
id: labelId,
|
|
51
48
|
htmlFor: inputId,
|
|
52
|
-
children: [
|
|
53
|
-
children: label
|
|
54
|
-
}), description && /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
|
|
55
|
-
children: description
|
|
56
|
-
}), children]
|
|
49
|
+
children: [label, children]
|
|
57
50
|
}) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
|
|
58
51
|
type: sentiment$1,
|
|
59
52
|
id: descriptionId,
|
package/build/field/Field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label/Label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n id?: string | null;\n /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n label?: React.ReactNode;\n /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n error?: React.ReactNode;\n sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n message: propMessage,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = props.error || props.hint || propMessage;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? id ?? fallbackInputId : undefined;\n\n const descriptionId = useId();\n\n return (\n <FieldLabelIdContextProvider value={labelId}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={message ? descriptionId : undefined}>\n <InputInvalidProvider value={hasError}>\n <div\n className={classNames(\n 'form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <Label id={labelId} htmlFor={inputId}>\n {label}\n {children}\n </Label>\n ) : (\n children\n )}\n\n {message && (\n <InlineAlert type={sentiment} id={descriptionId}>\n {message}\n </InlineAlert>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelIdContextProvider>\n );\n};\n"],"names":["Field","id","label","message","propMessage","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","classNames","POSITIVE","WARNING","Label","htmlFor","InlineAlert","type"],"mappings":";;;;;;;;;;;;;;AA4BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,mBAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,WAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,mBAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;EAC7D,MAAMH,OAAO,GAAGQ,KAAK,CAACC,KAAK,IAAID,KAAK,CAACG,IAAI,IAAIV,WAAW,CAAA;AACxD,EAAA,MAAMW,QAAQ,GAAGV,WAAS,KAAKE,mBAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAMG,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,WAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGlB,EAAE,KAAK,IAAI,GAAGA,EAAE,IAAIiB,eAAe,GAAGE,SAAS,CAAA;AAE/D,EAAA,MAAMC,aAAa,GAAGJ,WAAK,EAAE,CAAA;EAE7B,oBACEK,cAAA,CAACC,oCAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAN,QAAA,eAC1CY,cAAA,CAACG,+BAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAT,QAAA,eACrCY,cAAA,CAACI,iCAAwB,EAAA;AAACF,QAAAA,KAAK,EAAErB,OAAO,GAAGkB,aAAa,GAAGD,SAAU;QAAAV,QAAA,eACnEY,cAAA,CAACK,6BAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAL,UAAAA,QAAA,eACpCkB,eAAA,CAAA,KAAA,EAAA;AACEnB,YAAAA,SAAS,EAAEoB,2BAAU,CACnB,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAExB,WAAS,KAAKE,mBAAS,CAACuB,QAAQ;AAC/C,cAAA,aAAa,EAAEzB,WAAS,KAAKE,mBAAS,CAACwB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAEV,WAAS,KAAKE,mBAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDR,KAAK,IAAI,IAAI,gBACZ0B,eAAA,CAACI,WAAK,EAAA;AAAC/B,cAAAA,EAAE,EAAEe,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAT,QAAA,EAAA,CAClCR,KAAK,EACLQ,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAP,OAAO,iBACNmB,cAAA,CAACY,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE9B,WAAU;AAACJ,cAAAA,EAAE,EAAEoB,aAAc;AAAAX,cAAAA,QAAA,EAC7CP,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}
|
package/build/field/Field.mjs
CHANGED
|
@@ -9,17 +9,14 @@ import { Sentiment } from '../common/propsValues/sentiment.mjs';
|
|
|
9
9
|
const Field = ({
|
|
10
10
|
id,
|
|
11
11
|
label,
|
|
12
|
-
required = false,
|
|
13
12
|
message: propMessage,
|
|
14
|
-
hint,
|
|
15
|
-
description = hint,
|
|
16
13
|
sentiment: propType = Sentiment.NEUTRAL,
|
|
17
14
|
className,
|
|
18
15
|
children,
|
|
19
16
|
...props
|
|
20
17
|
}) => {
|
|
21
18
|
const sentiment = props.error ? Sentiment.NEGATIVE : propType;
|
|
22
|
-
const message =
|
|
19
|
+
const message = props.error || props.hint || propMessage;
|
|
23
20
|
const hasError = sentiment === Sentiment.NEGATIVE;
|
|
24
21
|
const labelId = useId();
|
|
25
22
|
const fallbackInputId = useId();
|
|
@@ -43,11 +40,7 @@ const Field = ({
|
|
|
43
40
|
children: [label != null ? /*#__PURE__*/jsxs(Label, {
|
|
44
41
|
id: labelId,
|
|
45
42
|
htmlFor: inputId,
|
|
46
|
-
children: [
|
|
47
|
-
children: label
|
|
48
|
-
}), description && /*#__PURE__*/jsx(Label.Description, {
|
|
49
|
-
children: description
|
|
50
|
-
}), children]
|
|
43
|
+
children: [label, children]
|
|
51
44
|
}) : children, message && /*#__PURE__*/jsx(InlineAlert, {
|
|
52
45
|
type: sentiment,
|
|
53
46
|
id: descriptionId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {
|
|
1
|
+
{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label/Label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n id?: string | null;\n /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n label?: React.ReactNode;\n /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n error?: React.ReactNode;\n sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n message: propMessage,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = props.error || props.hint || propMessage;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? id ?? fallbackInputId : undefined;\n\n const descriptionId = useId();\n\n return (\n <FieldLabelIdContextProvider value={labelId}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={message ? descriptionId : undefined}>\n <InputInvalidProvider value={hasError}>\n <div\n className={classNames(\n 'form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <Label id={labelId} htmlFor={inputId}>\n {label}\n {children}\n </Label>\n ) : (\n children\n )}\n\n {message && (\n <InlineAlert type={sentiment} id={descriptionId}>\n {message}\n </InlineAlert>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelIdContextProvider>\n );\n};\n"],"names":["Field","id","label","message","propMessage","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","classNames","POSITIVE","WARNING","Label","htmlFor","InlineAlert","type"],"mappings":";;;;;;;;AA4BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,SAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,SAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,SAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;EAC7D,MAAMH,OAAO,GAAGQ,KAAK,CAACC,KAAK,IAAID,KAAK,CAACG,IAAI,IAAIV,WAAW,CAAA;AACxD,EAAA,MAAMW,QAAQ,GAAGV,SAAS,KAAKE,SAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAMG,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,KAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGlB,EAAE,KAAK,IAAI,GAAGA,EAAE,IAAIiB,eAAe,GAAGE,SAAS,CAAA;AAE/D,EAAA,MAAMC,aAAa,GAAGJ,KAAK,EAAE,CAAA;EAE7B,oBACEK,GAAA,CAACC,2BAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAN,QAAA,eAC1CY,GAAA,CAACG,sBAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAT,QAAA,eACrCY,GAAA,CAACI,wBAAwB,EAAA;AAACF,QAAAA,KAAK,EAAErB,OAAO,GAAGkB,aAAa,GAAGD,SAAU;QAAAV,QAAA,eACnEY,GAAA,CAACK,oBAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAL,UAAAA,QAAA,eACpCkB,IAAA,CAAA,KAAA,EAAA;AACEnB,YAAAA,SAAS,EAAEoB,UAAU,CACnB,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAExB,SAAS,KAAKE,SAAS,CAACuB,QAAQ;AAC/C,cAAA,aAAa,EAAEzB,SAAS,KAAKE,SAAS,CAACwB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAEV,SAAS,KAAKE,SAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDR,KAAK,IAAI,IAAI,gBACZ0B,IAAA,CAACI,KAAK,EAAA;AAAC/B,cAAAA,EAAE,EAAEe,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAT,QAAA,EAAA,CAClCR,KAAK,EACLQ,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAP,OAAO,iBACNmB,GAAA,CAACY,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE9B,SAAU;AAACJ,cAAAA,EAAE,EAAEoB,aAAc;AAAAX,cAAAA,QAAA,EAC7CP,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}
|
package/build/i18n/en.json
CHANGED
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
"neptune.DateLookup.year": "year",
|
|
19
19
|
"neptune.FlowNavigation.back": "back to previous step",
|
|
20
20
|
"neptune.Info.ariaLabel": "More information",
|
|
21
|
-
"neptune.Label.optional": "(Optional)",
|
|
22
21
|
"neptune.Link.opensInNewTab": "(opens in new tab)",
|
|
23
22
|
"neptune.MoneyInput.Select.placeholder": "Select an option...",
|
|
24
23
|
"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
|
|
@@ -56,6 +55,5 @@
|
|
|
56
55
|
"neptune.UploadItem.uploaded": "Uploaded",
|
|
57
56
|
"neptune.UploadItem.uploadedFile": "Uploaded file",
|
|
58
57
|
"neptune.UploadItem.uploading": "Uploading...",
|
|
59
|
-
"neptune.UploadItem.uploadingFailed": "Uploading failed"
|
|
60
|
-
"neptune.aria.Label.optional": "This field is optional"
|
|
58
|
+
"neptune.UploadItem.uploadingFailed": "Uploading failed"
|
|
61
59
|
}
|
package/build/i18n/en.json.js
CHANGED
|
@@ -20,7 +20,6 @@ var en = {
|
|
|
20
20
|
"neptune.DateLookup.year": "year",
|
|
21
21
|
"neptune.FlowNavigation.back": "back to previous step",
|
|
22
22
|
"neptune.Info.ariaLabel": "More information",
|
|
23
|
-
"neptune.Label.optional": "(Optional)",
|
|
24
23
|
"neptune.Link.opensInNewTab": "(opens in new tab)",
|
|
25
24
|
"neptune.MoneyInput.Select.placeholder": "Select an option...",
|
|
26
25
|
"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
|
|
@@ -58,8 +57,7 @@ var en = {
|
|
|
58
57
|
"neptune.UploadItem.uploaded": "Uploaded",
|
|
59
58
|
"neptune.UploadItem.uploadedFile": "Uploaded file",
|
|
60
59
|
"neptune.UploadItem.uploading": "Uploading...",
|
|
61
|
-
"neptune.UploadItem.uploadingFailed": "Uploading failed"
|
|
62
|
-
"neptune.aria.Label.optional": "This field is optional"
|
|
60
|
+
"neptune.UploadItem.uploadingFailed": "Uploading failed"
|
|
63
61
|
};
|
|
64
62
|
|
|
65
63
|
module.exports = en;
|
|
@@ -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
|
@@ -18,7 +18,6 @@ var en = {
|
|
|
18
18
|
"neptune.DateLookup.year": "year",
|
|
19
19
|
"neptune.FlowNavigation.back": "back to previous step",
|
|
20
20
|
"neptune.Info.ariaLabel": "More information",
|
|
21
|
-
"neptune.Label.optional": "(Optional)",
|
|
22
21
|
"neptune.Link.opensInNewTab": "(opens in new tab)",
|
|
23
22
|
"neptune.MoneyInput.Select.placeholder": "Select an option...",
|
|
24
23
|
"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
|
|
@@ -56,8 +55,7 @@ var en = {
|
|
|
56
55
|
"neptune.UploadItem.uploaded": "Uploaded",
|
|
57
56
|
"neptune.UploadItem.uploadedFile": "Uploaded file",
|
|
58
57
|
"neptune.UploadItem.uploading": "Uploading...",
|
|
59
|
-
"neptune.UploadItem.uploadingFailed": "Uploading failed"
|
|
60
|
-
"neptune.aria.Label.optional": "This field is optional"
|
|
58
|
+
"neptune.UploadItem.uploadingFailed": "Uploading failed"
|
|
61
59
|
};
|
|
62
60
|
|
|
63
61
|
export { en as default };
|
|
@@ -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/label/Label.js
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var classNames = require('classnames');
|
|
4
|
-
var Body = require('../body/Body.js');
|
|
5
|
-
var reactIntl = require('react-intl');
|
|
6
|
-
var Label_messages = require('./Label.messages.js');
|
|
7
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
5
|
|
|
9
6
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -19,35 +16,10 @@ const Label = ({
|
|
|
19
16
|
return /*#__PURE__*/jsxRuntime.jsx("label", {
|
|
20
17
|
id: id,
|
|
21
18
|
htmlFor: htmlFor,
|
|
22
|
-
className: classNames__default.default('d-flex
|
|
19
|
+
className: classNames__default.default('control-label d-flex flex-column gap-y-1 m-b-0', className),
|
|
23
20
|
children: children
|
|
24
21
|
});
|
|
25
22
|
};
|
|
26
|
-
const Optional = ({
|
|
27
|
-
children,
|
|
28
|
-
className
|
|
29
|
-
}) => {
|
|
30
|
-
const {
|
|
31
|
-
formatMessage
|
|
32
|
-
} = reactIntl.useIntl();
|
|
33
|
-
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
34
|
-
children: [children, /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
35
|
-
as: "span",
|
|
36
|
-
"aria-label": formatMessage(Label_messages.optionalAriaLabel),
|
|
37
|
-
className: classNames__default.default('text-secondary', 'm-l-1', className),
|
|
38
|
-
children: formatMessage(Label_messages.optionalLabel)
|
|
39
|
-
})]
|
|
40
|
-
});
|
|
41
|
-
};
|
|
42
|
-
const Description = ({
|
|
43
|
-
children,
|
|
44
|
-
className
|
|
45
|
-
}) => children ? /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
46
|
-
className: classNames__default.default('text-secondary', 'm-b-1', className),
|
|
47
|
-
children: children
|
|
48
|
-
}) : null;
|
|
49
|
-
Label.Optional = Optional;
|
|
50
|
-
Label.Description = Description;
|
|
51
23
|
|
|
52
24
|
exports.Label = Label;
|
|
53
25
|
//# sourceMappingURL=Label.js.map
|
package/build/label/Label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sources":["../../src/label/Label.tsx"],"sourcesContent":["import classNames from 'classnames';\
|
|
1
|
+
{"version":3,"file":"Label.js","sources":["../../src/label/Label.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Label = ({ id, htmlFor, className, children }: LabelProps) => {\n return (\n <label\n id={id}\n htmlFor={htmlFor}\n className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}\n >\n {children}\n </label>\n );\n};\n"],"names":["Label","id","htmlFor","className","children","_jsx","classNames"],"mappings":";;;;;;;;;AASO,MAAMA,KAAK,GAAGA,CAAC;EAAEC,EAAE;EAAEC,OAAO;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAQ,CAAc,KAAI;AACxE,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACEJ,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEG,2BAAU,CAAC,gDAAgD,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAElFA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ;;;;"}
|
package/build/label/Label.mjs
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import
|
|
3
|
-
import { useIntl } from 'react-intl';
|
|
4
|
-
import messages from './Label.messages.mjs';
|
|
5
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
3
|
|
|
7
4
|
const Label = ({
|
|
8
5
|
id,
|
|
@@ -13,35 +10,10 @@ const Label = ({
|
|
|
13
10
|
return /*#__PURE__*/jsx("label", {
|
|
14
11
|
id: id,
|
|
15
12
|
htmlFor: htmlFor,
|
|
16
|
-
className: classNames('d-flex
|
|
13
|
+
className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
|
|
17
14
|
children: children
|
|
18
15
|
});
|
|
19
16
|
};
|
|
20
|
-
const Optional = ({
|
|
21
|
-
children,
|
|
22
|
-
className
|
|
23
|
-
}) => {
|
|
24
|
-
const {
|
|
25
|
-
formatMessage
|
|
26
|
-
} = useIntl();
|
|
27
|
-
return /*#__PURE__*/jsxs("div", {
|
|
28
|
-
children: [children, /*#__PURE__*/jsx(Body, {
|
|
29
|
-
as: "span",
|
|
30
|
-
"aria-label": formatMessage(messages.optionalAriaLabel),
|
|
31
|
-
className: classNames('text-secondary', 'm-l-1', className),
|
|
32
|
-
children: formatMessage(messages.optionalLabel)
|
|
33
|
-
})]
|
|
34
|
-
});
|
|
35
|
-
};
|
|
36
|
-
const Description = ({
|
|
37
|
-
children,
|
|
38
|
-
className
|
|
39
|
-
}) => children ? /*#__PURE__*/jsx(Body, {
|
|
40
|
-
className: classNames('text-secondary', 'm-b-1', className),
|
|
41
|
-
children: children
|
|
42
|
-
}) : null;
|
|
43
|
-
Label.Optional = Optional;
|
|
44
|
-
Label.Description = Description;
|
|
45
17
|
|
|
46
18
|
export { Label };
|
|
47
19
|
//# sourceMappingURL=Label.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.mjs","sources":["../../src/label/Label.tsx"],"sourcesContent":["import classNames from 'classnames';\
|
|
1
|
+
{"version":3,"file":"Label.mjs","sources":["../../src/label/Label.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nexport type LabelProps = {\n id?: string;\n htmlFor?: string;\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Label = ({ id, htmlFor, className, children }: LabelProps) => {\n return (\n <label\n id={id}\n htmlFor={htmlFor}\n className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}\n >\n {children}\n </label>\n );\n};\n"],"names":["Label","id","htmlFor","className","children","_jsx","classNames"],"mappings":";;;AASO,MAAMA,KAAK,GAAGA,CAAC;EAAEC,EAAE;EAAEC,OAAO;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAQ,CAAc,KAAI;AACxE,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACEJ,IAAAA,EAAE,EAAEA,EAAG;AACPC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEG,UAAU,CAAC,gDAAgD,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAElFA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ;;;;"}
|
package/build/main.css
CHANGED
|
@@ -1719,10 +1719,18 @@ button.np-option {
|
|
|
1719
1719
|
white-space: nowrap;
|
|
1720
1720
|
width: 100%;
|
|
1721
1721
|
}
|
|
1722
|
+
.np-date-trigger .control-label {
|
|
1723
|
+
font-weight: 400;
|
|
1724
|
+
font-weight: var(--font-weight-regular);
|
|
1725
|
+
}
|
|
1722
1726
|
.np-theme-personal .np-date-trigger {
|
|
1723
1727
|
padding-left: 16px;
|
|
1724
1728
|
padding-left: var(--size-16);
|
|
1725
1729
|
}
|
|
1730
|
+
.np-theme-personal .np-date-trigger .control-label + span {
|
|
1731
|
+
font-weight: 400;
|
|
1732
|
+
font-weight: var(--font-weight-regular);
|
|
1733
|
+
}
|
|
1726
1734
|
.clear-btn {
|
|
1727
1735
|
transition: color 0.15s ease-in-out;
|
|
1728
1736
|
color: #c9cbce;
|
|
@@ -24,23 +24,15 @@ const isNumberOrNull = v => neptuneValidation.isNumber(v) || neptuneValidation.i
|
|
|
24
24
|
const formatAmountIfSet = ({
|
|
25
25
|
amount,
|
|
26
26
|
currency,
|
|
27
|
-
locale
|
|
28
|
-
maxLengthOverride
|
|
27
|
+
locale
|
|
29
28
|
}) => {
|
|
30
|
-
if (maxLengthOverride) {
|
|
31
|
-
return amount != null ? String(amount) : '';
|
|
32
|
-
}
|
|
33
29
|
return typeof amount === 'number' ? formatting.formatAmount(amount, currency, locale) : '';
|
|
34
30
|
};
|
|
35
31
|
const parseNumber = ({
|
|
36
32
|
amount,
|
|
37
33
|
currency,
|
|
38
|
-
locale
|
|
39
|
-
maxLengthOverride
|
|
34
|
+
locale
|
|
40
35
|
}) => {
|
|
41
|
-
if (maxLengthOverride && amount.length > maxLengthOverride) {
|
|
42
|
-
return 0;
|
|
43
|
-
}
|
|
44
36
|
return currencyFormatting.parseAmount(amount, currency, locale);
|
|
45
37
|
};
|
|
46
38
|
const allowedInputKeys = new Set(['Backspace', 'Delete', ',', '.', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Enter', 'Escape', 'Tab']);
|
|
@@ -58,8 +50,7 @@ class MoneyInput extends React.Component {
|
|
|
58
50
|
formattedAmount: formatAmountIfSet({
|
|
59
51
|
amount: props.amount,
|
|
60
52
|
currency: props.selectedCurrency.currency,
|
|
61
|
-
locale: props.intl.locale
|
|
62
|
-
maxLengthOverride: props.maxLengthOverride
|
|
53
|
+
locale: props.intl.locale
|
|
63
54
|
}),
|
|
64
55
|
locale: props.intl.locale
|
|
65
56
|
};
|
|
@@ -73,8 +64,7 @@ class MoneyInput extends React.Component {
|
|
|
73
64
|
formattedAmount: formatAmountIfSet({
|
|
74
65
|
amount: nextProps.amount,
|
|
75
66
|
currency: nextProps.selectedCurrency.currency,
|
|
76
|
-
locale: nextProps.intl.locale
|
|
77
|
-
maxLengthOverride: nextProps.maxLengthOverride
|
|
67
|
+
locale: nextProps.intl.locale
|
|
78
68
|
})
|
|
79
69
|
});
|
|
80
70
|
}
|
|
@@ -101,16 +91,14 @@ class MoneyInput extends React.Component {
|
|
|
101
91
|
const parsed = neptuneValidation.isEmpty(paste) ? null : parseNumber({
|
|
102
92
|
amount: paste,
|
|
103
93
|
currency: this.props.selectedCurrency.currency,
|
|
104
|
-
locale
|
|
105
|
-
maxLengthOverride: this.props.maxLengthOverride
|
|
94
|
+
locale
|
|
106
95
|
});
|
|
107
96
|
if (isNumberOrNull(parsed)) {
|
|
108
97
|
this.setState({
|
|
109
98
|
formattedAmount: formatAmountIfSet({
|
|
110
99
|
amount: parsed,
|
|
111
100
|
currency: this.props.selectedCurrency.currency,
|
|
112
|
-
locale
|
|
113
|
-
maxLengthOverride: this.props.maxLengthOverride
|
|
101
|
+
locale
|
|
114
102
|
})
|
|
115
103
|
});
|
|
116
104
|
this.props.onAmountChange?.(parsed);
|
|
@@ -127,8 +115,7 @@ class MoneyInput extends React.Component {
|
|
|
127
115
|
const parsed = neptuneValidation.isEmpty(value) ? null : parseNumber({
|
|
128
116
|
amount: value,
|
|
129
117
|
currency: this.props.selectedCurrency.currency,
|
|
130
|
-
locale: this.state.locale
|
|
131
|
-
maxLengthOverride: this.props.maxLengthOverride
|
|
118
|
+
locale: this.state.locale
|
|
132
119
|
});
|
|
133
120
|
if (isNumberOrNull(parsed)) {
|
|
134
121
|
this.props.onAmountChange?.(parsed);
|
|
@@ -168,8 +155,7 @@ class MoneyInput extends React.Component {
|
|
|
168
155
|
const parsed = parseNumber({
|
|
169
156
|
amount: previousState.formattedAmount,
|
|
170
157
|
currency: this.props.selectedCurrency.currency,
|
|
171
|
-
locale: previousState.locale
|
|
172
|
-
maxLengthOverride: this.props.maxLengthOverride
|
|
158
|
+
locale: previousState.locale
|
|
173
159
|
});
|
|
174
160
|
if (!isNumberOrNull(parsed)) {
|
|
175
161
|
return {
|
|
@@ -180,8 +166,7 @@ class MoneyInput extends React.Component {
|
|
|
180
166
|
formattedAmount: formatAmountIfSet({
|
|
181
167
|
amount: parsed,
|
|
182
168
|
currency: this.props.selectedCurrency.currency,
|
|
183
|
-
locale: previousState.locale
|
|
184
|
-
maxLengthOverride: this.props.maxLengthOverride
|
|
169
|
+
locale: previousState.locale
|
|
185
170
|
})
|
|
186
171
|
};
|
|
187
172
|
});
|
|
@@ -213,8 +198,7 @@ class MoneyInput extends React.Component {
|
|
|
213
198
|
onCurrencyChange,
|
|
214
199
|
size,
|
|
215
200
|
addon,
|
|
216
|
-
selectProps
|
|
217
|
-
maxLengthOverride
|
|
201
|
+
selectProps
|
|
218
202
|
} = this.props;
|
|
219
203
|
const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];
|
|
220
204
|
const selectOptions = this.getSelectOptions();
|
|
@@ -246,12 +230,10 @@ class MoneyInput extends React.Component {
|
|
|
246
230
|
value: this.state.formattedAmount,
|
|
247
231
|
inputMode: "decimal",
|
|
248
232
|
disabled: disabled,
|
|
249
|
-
maxLength: maxLengthOverride,
|
|
250
233
|
placeholder: formatAmountIfSet({
|
|
251
234
|
amount: this.props.placeholder,
|
|
252
235
|
currency: this.props.selectedCurrency.currency,
|
|
253
|
-
locale: this.state.locale
|
|
254
|
-
maxLengthOverride: this.props.maxLengthOverride
|
|
236
|
+
locale: this.state.locale
|
|
255
237
|
}),
|
|
256
238
|
autoComplete: "off",
|
|
257
239
|
onKeyDown: this.handleKeyDown,
|