@transferwise/components 0.0.0-experimental-6a46f89 → 0.0.0-experimental-94246de
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 +8 -36
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +9 -37
- package/build/field/Field.mjs.map +1 -1
- package/build/i18n/en.json +1 -1
- package/build/i18n/en.json.js +1 -1
- package/build/i18n/en.json.mjs +1 -1
- package/build/inlineAlert/InlineAlert.js +6 -13
- package/build/inlineAlert/InlineAlert.js.map +1 -1
- package/build/inlineAlert/InlineAlert.mjs +6 -13
- package/build/inlineAlert/InlineAlert.mjs.map +1 -1
- package/build/label/Label.js +4 -35
- package/build/label/Label.js.map +1 -1
- package/build/label/Label.mjs +5 -36
- package/build/label/Label.mjs.map +1 -1
- package/build/main.css +14 -4
- package/build/styles/dateLookup/dateTrigger/DateTrigger.css +8 -0
- package/build/styles/main.css +14 -4
- package/build/styles/upload/Upload.css +6 -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/inlineAlert/InlineAlert.d.ts +0 -9
- package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
- package/build/types/label/Label.d.ts +2 -22
- package/build/types/label/Label.d.ts.map +1 -1
- package/build/types/upload/Upload.d.ts +1 -0
- package/build/types/upload/Upload.d.ts.map +1 -1
- package/build/types/upload/Upload.messages.d.ts +4 -0
- package/build/types/upload/Upload.messages.d.ts.map +1 -1
- package/build/types/upload/steps/completeStep/completeStep.d.ts +1 -3
- package/build/types/upload/steps/completeStep/completeStep.d.ts.map +1 -1
- package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts +1 -0
- package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts.map +1 -1
- package/build/upload/Upload.js +26 -12
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.messages.js +3 -0
- package/build/upload/Upload.messages.js.map +1 -1
- package/build/upload/Upload.messages.mjs +3 -0
- package/build/upload/Upload.messages.mjs.map +1 -1
- package/build/upload/Upload.mjs +26 -12
- package/build/upload/Upload.mjs.map +1 -1
- package/build/upload/steps/completeStep/completeStep.js +15 -30
- package/build/upload/steps/completeStep/completeStep.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs +16 -31
- package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js +56 -32
- package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +56 -32
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
- package/package.json +3 -3
- package/src/dateInput/DateInput.tests.story.tsx +41 -6
- 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 +5 -41
- package/src/field/Field.story.tsx +7 -105
- package/src/field/Field.tests.story.tsx +33 -0
- package/src/field/Field.tsx +10 -34
- package/src/i18n/en.json +1 -1
- package/src/index.ts +1 -1
- package/src/inlineAlert/InlineAlert.story.tsx +72 -7
- package/src/inlineAlert/InlineAlert.tsx +3 -14
- package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.js +10 -5
- 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.spec.tsx +5 -53
- package/src/label/Label.story.tsx +25 -33
- package/src/label/Label.tsx +3 -48
- package/src/main.css +14 -4
- package/src/main.less +0 -1
- package/src/moneyInput/MoneyInput.story.tsx +11 -11
- 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/src/switch/Switch.story.tsx +21 -19
- package/src/upload/Upload.css +6 -0
- package/src/upload/Upload.less +5 -0
- package/src/upload/Upload.messages.ts +4 -0
- package/src/upload/Upload.spec.js +8 -7
- package/src/upload/Upload.story.tsx +1 -0
- package/src/upload/Upload.tsx +39 -20
- package/src/upload/steps/completeStep/completeStep.spec.js +0 -9
- package/src/upload/steps/completeStep/completeStep.tsx +14 -29
- package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js +12 -0
- package/src/upload/steps/uploadImageStep/uploadImageStep.tsx +43 -24
- package/build/label/Label.messages.js +0 -12
- package/build/label/Label.messages.js.map +0 -1
- package/build/label/Label.messages.mjs +0 -10
- package/build/label/Label.messages.mjs.map +0 -1
- package/build/styles/field/Field.css +0 -4
- package/build/types/label/Label.messages.d.ts +0 -8
- 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/field/Field.css +0 -4
- package/src/field/Field.less +0 -5
- package/src/label/Label.messages.tsx +0 -8
- 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
|
@@ -11,69 +11,41 @@ var sentiment = require('../common/propsValues/sentiment.js');
|
|
|
11
11
|
const Field = ({
|
|
12
12
|
id,
|
|
13
13
|
label,
|
|
14
|
-
required = false,
|
|
15
14
|
message: propMessage,
|
|
16
|
-
hint,
|
|
17
|
-
description = hint,
|
|
18
15
|
sentiment: propType = sentiment.Sentiment.NEUTRAL,
|
|
19
16
|
className,
|
|
20
17
|
children,
|
|
21
18
|
...props
|
|
22
19
|
}) => {
|
|
23
20
|
const sentiment$1 = props.error ? sentiment.Sentiment.NEGATIVE : propType;
|
|
24
|
-
const message =
|
|
21
|
+
const message = props.error || props.hint || propMessage;
|
|
25
22
|
const hasError = sentiment$1 === sentiment.Sentiment.NEGATIVE;
|
|
26
23
|
const labelId = React.useId();
|
|
27
24
|
const fallbackInputId = React.useId();
|
|
28
25
|
const inputId = id !== null ? id ?? fallbackInputId : undefined;
|
|
29
|
-
const messageId = React.useId();
|
|
30
26
|
const descriptionId = React.useId();
|
|
31
|
-
/**
|
|
32
|
-
* form control can have multiple messages to describe it,
|
|
33
|
-
* e.g the description underneath the label and inline alert
|
|
34
|
-
*/
|
|
35
|
-
function ariaDescribedbyByIds() {
|
|
36
|
-
const messageIds = [];
|
|
37
|
-
if (description) {
|
|
38
|
-
messageIds.push(descriptionId);
|
|
39
|
-
}
|
|
40
|
-
if (message) {
|
|
41
|
-
messageIds.push(messageId);
|
|
42
|
-
}
|
|
43
|
-
return messageIds.length > 0 ? messageIds.join(' ') : undefined;
|
|
44
|
-
}
|
|
45
27
|
return /*#__PURE__*/jsxRuntime.jsx(contexts.FieldLabelIdContextProvider, {
|
|
46
28
|
value: labelId,
|
|
47
29
|
children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
|
|
48
30
|
value: inputId,
|
|
49
31
|
children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputDescribedByProvider, {
|
|
50
|
-
value:
|
|
32
|
+
value: message ? descriptionId : undefined,
|
|
51
33
|
children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
|
|
52
34
|
value: hasError,
|
|
53
35
|
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
54
|
-
className: clsx.clsx('
|
|
36
|
+
className: clsx.clsx('form-group d-block', {
|
|
55
37
|
'has-success': sentiment$1 === sentiment.Sentiment.POSITIVE,
|
|
56
38
|
'has-warning': sentiment$1 === sentiment.Sentiment.WARNING,
|
|
57
39
|
'has-error': hasError,
|
|
58
40
|
'has-info': sentiment$1 === sentiment.Sentiment.NEUTRAL
|
|
59
41
|
}, className),
|
|
60
|
-
children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
children: required ? label : /*#__PURE__*/jsxRuntime.jsx(Label.Label.Optional, {
|
|
65
|
-
children: label
|
|
66
|
-
})
|
|
67
|
-
}), /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
|
|
68
|
-
id: descriptionId,
|
|
69
|
-
children: description
|
|
70
|
-
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
71
|
-
className: "np-field-control",
|
|
72
|
-
children: children
|
|
73
|
-
})]
|
|
42
|
+
children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(Label.Label, {
|
|
43
|
+
id: labelId,
|
|
44
|
+
htmlFor: inputId,
|
|
45
|
+
children: [label, children]
|
|
74
46
|
}) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
|
|
75
47
|
type: sentiment$1,
|
|
76
|
-
id:
|
|
48
|
+
id: descriptionId,
|
|
77
49
|
children: message
|
|
78
50
|
})]
|
|
79
51
|
})
|
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 } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n id?: string | null;\n /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n label?: React.ReactNode;\n
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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={clsx(\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","clsx","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,GAAIA,EAAE,IAAIiB,eAAe,GAAIE,SAAS,CAAA;AAEjE,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,SAAI,CACb,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
|
@@ -3,75 +3,47 @@ import { useId } from 'react';
|
|
|
3
3
|
import InlineAlert from '../inlineAlert/InlineAlert.mjs';
|
|
4
4
|
import { FieldLabelIdContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
|
|
5
5
|
import { Label } from '../label/Label.mjs';
|
|
6
|
-
import { jsx, jsxs
|
|
6
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
7
|
import { Sentiment } from '../common/propsValues/sentiment.mjs';
|
|
8
8
|
|
|
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();
|
|
26
23
|
const inputId = id !== null ? id ?? fallbackInputId : undefined;
|
|
27
|
-
const messageId = useId();
|
|
28
24
|
const descriptionId = useId();
|
|
29
|
-
/**
|
|
30
|
-
* form control can have multiple messages to describe it,
|
|
31
|
-
* e.g the description underneath the label and inline alert
|
|
32
|
-
*/
|
|
33
|
-
function ariaDescribedbyByIds() {
|
|
34
|
-
const messageIds = [];
|
|
35
|
-
if (description) {
|
|
36
|
-
messageIds.push(descriptionId);
|
|
37
|
-
}
|
|
38
|
-
if (message) {
|
|
39
|
-
messageIds.push(messageId);
|
|
40
|
-
}
|
|
41
|
-
return messageIds.length > 0 ? messageIds.join(' ') : undefined;
|
|
42
|
-
}
|
|
43
25
|
return /*#__PURE__*/jsx(FieldLabelIdContextProvider, {
|
|
44
26
|
value: labelId,
|
|
45
27
|
children: /*#__PURE__*/jsx(InputIdContextProvider, {
|
|
46
28
|
value: inputId,
|
|
47
29
|
children: /*#__PURE__*/jsx(InputDescribedByProvider, {
|
|
48
|
-
value:
|
|
30
|
+
value: message ? descriptionId : undefined,
|
|
49
31
|
children: /*#__PURE__*/jsx(InputInvalidProvider, {
|
|
50
32
|
value: hasError,
|
|
51
33
|
children: /*#__PURE__*/jsxs("div", {
|
|
52
|
-
className: clsx('
|
|
34
|
+
className: clsx('form-group d-block', {
|
|
53
35
|
'has-success': sentiment === Sentiment.POSITIVE,
|
|
54
36
|
'has-warning': sentiment === Sentiment.WARNING,
|
|
55
37
|
'has-error': hasError,
|
|
56
38
|
'has-info': sentiment === Sentiment.NEUTRAL
|
|
57
39
|
}, className),
|
|
58
|
-
children: [label != null ? /*#__PURE__*/jsxs(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
children: required ? label : /*#__PURE__*/jsx(Label.Optional, {
|
|
63
|
-
children: label
|
|
64
|
-
})
|
|
65
|
-
}), /*#__PURE__*/jsx(Label.Description, {
|
|
66
|
-
id: descriptionId,
|
|
67
|
-
children: description
|
|
68
|
-
}), /*#__PURE__*/jsx("div", {
|
|
69
|
-
className: "np-field-control",
|
|
70
|
-
children: children
|
|
71
|
-
})]
|
|
40
|
+
children: [label != null ? /*#__PURE__*/jsxs(Label, {
|
|
41
|
+
id: labelId,
|
|
42
|
+
htmlFor: inputId,
|
|
43
|
+
children: [label, children]
|
|
72
44
|
}) : children, message && /*#__PURE__*/jsx(InlineAlert, {
|
|
73
45
|
type: sentiment,
|
|
74
|
-
id:
|
|
46
|
+
id: descriptionId,
|
|
75
47
|
children: message
|
|
76
48
|
})]
|
|
77
49
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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';\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
|
|
1
|
+
{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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={clsx(\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","clsx","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,GAAIA,EAAE,IAAIiB,eAAe,GAAIE,SAAS,CAAA;AAEjE,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,IAAI,CACb,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...",
|
|
@@ -36,6 +35,7 @@
|
|
|
36
35
|
"neptune.Upload.csWrongTypeMessage": "File type not supported. Please try again with a different file",
|
|
37
36
|
"neptune.Upload.psButtonText": "Cancel",
|
|
38
37
|
"neptune.Upload.psProcessingText": "Uploading...",
|
|
38
|
+
"neptune.Upload.retry": "Retry",
|
|
39
39
|
"neptune.Upload.usButtonText": "Or select a file",
|
|
40
40
|
"neptune.Upload.usDropMessage": "Drop file to start upload",
|
|
41
41
|
"neptune.Upload.usPlaceholder": "Drag and drop a file less than {maxSize}MB",
|
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...",
|
|
@@ -38,6 +37,7 @@ var en = {
|
|
|
38
37
|
"neptune.Upload.csWrongTypeMessage": "File type not supported. Please try again with a different file",
|
|
39
38
|
"neptune.Upload.psButtonText": "Cancel",
|
|
40
39
|
"neptune.Upload.psProcessingText": "Uploading...",
|
|
40
|
+
"neptune.Upload.retry": "Retry",
|
|
41
41
|
"neptune.Upload.usButtonText": "Or select a file",
|
|
42
42
|
"neptune.Upload.usDropMessage": "Drop file to start upload",
|
|
43
43
|
"neptune.Upload.usPlaceholder": "Drag and drop a file less than {maxSize}MB",
|
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...",
|
|
@@ -36,6 +35,7 @@ var en = {
|
|
|
36
35
|
"neptune.Upload.csWrongTypeMessage": "File type not supported. Please try again with a different file",
|
|
37
36
|
"neptune.Upload.psButtonText": "Cancel",
|
|
38
37
|
"neptune.Upload.psProcessingText": "Uploading...",
|
|
38
|
+
"neptune.Upload.retry": "Retry",
|
|
39
39
|
"neptune.Upload.usButtonText": "Or select a file",
|
|
40
40
|
"neptune.Upload.usDropMessage": "Drop file to start upload",
|
|
41
41
|
"neptune.Upload.usPlaceholder": "Drag and drop a file less than {maxSize}MB",
|
|
@@ -2,35 +2,28 @@
|
|
|
2
2
|
|
|
3
3
|
var clsx = require('clsx');
|
|
4
4
|
var StatusIcon = require('../statusIcon/StatusIcon.js');
|
|
5
|
-
var Body = require('../body/Body.js');
|
|
6
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
6
|
var sentiment = require('../common/propsValues/sentiment.js');
|
|
8
7
|
var size = require('../common/propsValues/size.js');
|
|
9
8
|
|
|
10
9
|
const iconTypes = new Set([sentiment.Sentiment.NEGATIVE, sentiment.Sentiment.ERROR, sentiment.Sentiment.POSITIVE, sentiment.Sentiment.SUCCESS, sentiment.Sentiment.WARNING]);
|
|
11
|
-
/**
|
|
12
|
-
* Avoid using `<InlineAlert>` component directly
|
|
13
|
-
* it's for edge cases when `<Field />` isn't suitable for some reasons.
|
|
14
|
-
*
|
|
15
|
-
* Example:
|
|
16
|
-
* ```
|
|
17
|
-
* <Field sentiment={..} message={..}>..</Field>
|
|
18
|
-
* ```
|
|
19
|
-
*/
|
|
20
10
|
function InlineAlert({
|
|
21
11
|
id,
|
|
22
12
|
type = 'neutral',
|
|
23
13
|
className,
|
|
24
14
|
children
|
|
25
15
|
}) {
|
|
26
|
-
return /*#__PURE__*/jsxRuntime.jsxs(
|
|
16
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
27
17
|
role: "alert",
|
|
28
18
|
id: id,
|
|
29
|
-
className: clsx.clsx('alert alert-detach', `alert-${type === sentiment.Sentiment.NEGATIVE || type === sentiment.Sentiment.ERROR ? 'danger' : type}`,
|
|
19
|
+
className: clsx.clsx('alert alert-detach', `alert-${type === sentiment.Sentiment.NEGATIVE || type === sentiment.Sentiment.ERROR ? 'danger' : type}`, className),
|
|
30
20
|
children: [iconTypes.has(type) && /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
|
|
31
21
|
sentiment: type,
|
|
32
22
|
size: size.Size.SMALL
|
|
33
|
-
}),
|
|
23
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
24
|
+
className: "np-text-body-default",
|
|
25
|
+
children: children
|
|
26
|
+
})]
|
|
34
27
|
});
|
|
35
28
|
}
|
|
36
29
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\
|
|
1
|
+
{"version":3,"file":"InlineAlert.js","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\nexport default function InlineAlert({\n id,\n type = 'neutral',\n className,\n children,\n}: InlineAlertProps) {\n return (\n <div\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n className,\n )}\n >\n {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n <div className=\"np-text-body-default\">{children}</div>\n </div>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;;;AAaA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,mBAAS,CAACC,QAAQ,EAClBD,mBAAS,CAACE,KAAK,EACfF,mBAAS,CAACG,QAAQ,EAClBH,mBAAS,CAACI,OAAO,EACjBJ,mBAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEsB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;AACjB,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AACZL,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEI,SAAI,CACb,oBAAoB,EACpB,SAASL,IAAI,KAAKR,mBAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,mBAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpFC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACgB,GAAG,CAACN,IAAI,CAAC,iBAAIO,cAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAET,IAAK;MAACU,IAAI,EAAEC,SAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,cAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,sBAAsB;AAAAC,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACvD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1,34 +1,27 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import StatusIcon from '../statusIcon/StatusIcon.mjs';
|
|
3
|
-
import Body from '../body/Body.mjs';
|
|
4
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
4
|
import { Sentiment } from '../common/propsValues/sentiment.mjs';
|
|
6
5
|
import { Size } from '../common/propsValues/size.mjs';
|
|
7
6
|
|
|
8
7
|
const iconTypes = new Set([Sentiment.NEGATIVE, Sentiment.ERROR, Sentiment.POSITIVE, Sentiment.SUCCESS, Sentiment.WARNING]);
|
|
9
|
-
/**
|
|
10
|
-
* Avoid using `<InlineAlert>` component directly
|
|
11
|
-
* it's for edge cases when `<Field />` isn't suitable for some reasons.
|
|
12
|
-
*
|
|
13
|
-
* Example:
|
|
14
|
-
* ```
|
|
15
|
-
* <Field sentiment={..} message={..}>..</Field>
|
|
16
|
-
* ```
|
|
17
|
-
*/
|
|
18
8
|
function InlineAlert({
|
|
19
9
|
id,
|
|
20
10
|
type = 'neutral',
|
|
21
11
|
className,
|
|
22
12
|
children
|
|
23
13
|
}) {
|
|
24
|
-
return /*#__PURE__*/jsxs(
|
|
14
|
+
return /*#__PURE__*/jsxs("div", {
|
|
25
15
|
role: "alert",
|
|
26
16
|
id: id,
|
|
27
|
-
className: clsx('alert alert-detach', `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,
|
|
17
|
+
className: clsx('alert alert-detach', `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`, className),
|
|
28
18
|
children: [iconTypes.has(type) && /*#__PURE__*/jsx(StatusIcon, {
|
|
29
19
|
sentiment: type,
|
|
30
20
|
size: Size.SMALL
|
|
31
|
-
}),
|
|
21
|
+
}), /*#__PURE__*/jsx("div", {
|
|
22
|
+
className: "np-text-body-default",
|
|
23
|
+
children: children
|
|
24
|
+
})]
|
|
32
25
|
});
|
|
33
26
|
}
|
|
34
27
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\
|
|
1
|
+
{"version":3,"file":"InlineAlert.mjs","sources":["../../src/inlineAlert/InlineAlert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\n\nexport interface InlineAlertProps {\n id?: string;\n type?: `${Sentiment}`;\n className?: string;\n children: ReactNode;\n}\n\nconst iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([\n Sentiment.NEGATIVE,\n Sentiment.ERROR,\n Sentiment.POSITIVE,\n Sentiment.SUCCESS,\n Sentiment.WARNING,\n]);\n\nexport default function InlineAlert({\n id,\n type = 'neutral',\n className,\n children,\n}: InlineAlertProps) {\n return (\n <div\n role=\"alert\"\n id={id}\n className={clsx(\n 'alert alert-detach',\n `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,\n className,\n )}\n >\n {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}\n <div className=\"np-text-body-default\">{children}</div>\n </div>\n );\n}\n"],"names":["iconTypes","Set","Sentiment","NEGATIVE","ERROR","POSITIVE","SUCCESS","WARNING","InlineAlert","id","type","className","children","_jsxs","role","clsx","has","_jsx","StatusIcon","sentiment","size","Size","SMALL"],"mappings":";;;;;;AAaA,MAAMA,SAAS,GAAG,IAAIC,GAAG,CAAwC,CAC/DC,SAAS,CAACC,QAAQ,EAClBD,SAAS,CAACE,KAAK,EACfF,SAAS,CAACG,QAAQ,EAClBH,SAAS,CAACI,OAAO,EACjBJ,SAAS,CAACK,OAAO,CAClB,CAAC,CAAA;AAEsB,SAAAC,WAAWA,CAAC;EAClCC,EAAE;AACFC,EAAAA,IAAI,GAAG,SAAS;EAChBC,SAAS;AACTC,EAAAA,QAAAA;AACiB,CAAA,EAAA;AACjB,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AACZL,IAAAA,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEI,IAAI,CACb,oBAAoB,EACpB,SAASL,IAAI,KAAKR,SAAS,CAACC,QAAQ,IAAIO,IAAI,KAAKR,SAAS,CAACE,KAAK,GAAG,QAAQ,GAAGM,IAAI,CAAA,CAAE,EACpFC,SAAS,CACT;IAAAC,QAAA,EAAA,CAEDZ,SAAS,CAACgB,GAAG,CAACN,IAAI,CAAC,iBAAIO,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAET,IAAK;MAACU,IAAI,EAAEC,IAAI,CAACC,KAAAA;KAAM,CAAG,eACzEL,GAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,sBAAsB;AAAAC,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACvD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
|
package/build/label/Label.js
CHANGED
|
@@ -1,52 +1,21 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var clsx = require('clsx');
|
|
4
|
-
var Label_messages = require('./Label.messages.js');
|
|
5
|
-
var reactIntl = require('react-intl');
|
|
6
|
-
var Body = require('../body/Body.js');
|
|
7
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
5
|
|
|
9
6
|
const Label = ({
|
|
10
|
-
|
|
11
|
-
children,
|
|
7
|
+
id,
|
|
12
8
|
htmlFor,
|
|
13
|
-
|
|
9
|
+
className,
|
|
10
|
+
children
|
|
14
11
|
}) => {
|
|
15
12
|
return /*#__PURE__*/jsxRuntime.jsx("label", {
|
|
16
13
|
id: id,
|
|
17
14
|
htmlFor: htmlFor,
|
|
18
|
-
className: clsx.clsx('
|
|
15
|
+
className: clsx.clsx('control-label d-flex flex-column gap-y-1 m-b-0', className),
|
|
19
16
|
children: children
|
|
20
17
|
});
|
|
21
18
|
};
|
|
22
|
-
// eslint-disable-next-line functional/immutable-data
|
|
23
|
-
Label.Optional = function Optional({
|
|
24
|
-
children,
|
|
25
|
-
className
|
|
26
|
-
}) {
|
|
27
|
-
const {
|
|
28
|
-
formatMessage
|
|
29
|
-
} = reactIntl.useIntl();
|
|
30
|
-
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
31
|
-
children: [children, /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
32
|
-
as: "span",
|
|
33
|
-
className: clsx.clsx('text-secondary', 'm-l-1', className),
|
|
34
|
-
children: formatMessage(Label_messages.optionalLabel)
|
|
35
|
-
})]
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
// eslint-disable-next-line functional/immutable-data
|
|
39
|
-
Label.Description = function Description({
|
|
40
|
-
id,
|
|
41
|
-
children,
|
|
42
|
-
className
|
|
43
|
-
}) {
|
|
44
|
-
return children ? /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
45
|
-
id: id,
|
|
46
|
-
className: clsx.clsx('text-secondary', className),
|
|
47
|
-
children: children
|
|
48
|
-
}) : null;
|
|
49
|
-
};
|
|
50
19
|
|
|
51
20
|
exports.Label = Label;
|
|
52
21
|
//# 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 { clsx } from 'clsx';\
|
|
1
|
+
{"version":3,"file":"Label.js","sources":["../../src/label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\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={clsx('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","clsx"],"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,SAAI,CAAC,gDAAgD,EAAEH,SAAS,CAAE;AAAAC,IAAAA,QAAA,EAE5EA,QAAAA;AAAQ,GACJ,CAAC,CAAA;AAEZ;;;;"}
|