@transferwise/components 0.0.0-experimental-497bd2d → 0.0.0-experimental-ea80215
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/inputs/SelectInput.js +100 -36
- package/build/inputs/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput.mjs +102 -38
- package/build/inputs/SelectInput.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 +18 -0
- package/build/styles/dateLookup/dateTrigger/DateTrigger.css +8 -0
- package/build/styles/inputs/SelectInput.css +10 -0
- package/build/styles/main.css +18 -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/inputs/SelectInput.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/package.json +6 -5
- 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 -81
- package/src/field/Field.tests.story.tsx +33 -0
- package/src/field/Field.tsx +4 -10
- 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.css +10 -0
- package/src/inputs/SelectInput.less +12 -0
- package/src/inputs/SelectInput.spec.tsx +1 -1
- package/src/inputs/SelectInput.story.tsx +20 -0
- package/src/inputs/SelectInput.tsx +139 -46
- package/src/label/Label.story.tsx +21 -37
- package/src/label/Label.tsx +2 -43
- package/src/main.css +18 -0
- 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
|
@@ -11,17 +11,14 @@ 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();
|
|
@@ -45,11 +42,7 @@ const Field = ({
|
|
|
45
42
|
children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(Label.Label, {
|
|
46
43
|
id: labelId,
|
|
47
44
|
htmlFor: inputId,
|
|
48
|
-
children: [
|
|
49
|
-
children: label
|
|
50
|
-
}), description && /*#__PURE__*/jsxRuntime.jsx(Label.Label.Description, {
|
|
51
|
-
children: description
|
|
52
|
-
}), children]
|
|
45
|
+
children: [label, children]
|
|
53
46
|
}) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
|
|
54
47
|
type: sentiment$1,
|
|
55
48
|
id: descriptionId,
|
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
|
@@ -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 { 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...",
|
|
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -6,6 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var mergeProps = require('merge-props');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var reactIntl = require('react-intl');
|
|
9
|
+
var virtua = require('virtua');
|
|
9
10
|
var useEffectEvent = require('../common/hooks/useEffectEvent.js');
|
|
10
11
|
var useScreenSize = require('../common/hooks/useScreenSize.js');
|
|
11
12
|
var PolymorphicWithOverrides = require('../common/polymorphicWithOverrides/PolymorphicWithOverrides.js');
|
|
@@ -24,6 +25,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
24
25
|
|
|
25
26
|
var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
|
|
26
27
|
|
|
28
|
+
const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
|
|
27
29
|
function searchableString(value) {
|
|
28
30
|
return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
|
|
29
31
|
}
|
|
@@ -36,8 +38,6 @@ function inferSearchableStrings(value) {
|
|
|
36
38
|
}
|
|
37
39
|
return [];
|
|
38
40
|
}
|
|
39
|
-
const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
|
|
40
|
-
const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/React.createContext(false);
|
|
41
41
|
function dedupeSelectInputOptionItem(item, existingValues) {
|
|
42
42
|
if (!existingValues.has(item.value)) {
|
|
43
43
|
existingValues.add(item.value);
|
|
@@ -48,6 +48,11 @@ function dedupeSelectInputOptionItem(item, existingValues) {
|
|
|
48
48
|
value: undefined
|
|
49
49
|
};
|
|
50
50
|
}
|
|
51
|
+
/**
|
|
52
|
+
* Sets the `value` of duplicate option items to `undefined`, hiding them when
|
|
53
|
+
* rendered. Indexes are kept intact within groups to preserve the active item
|
|
54
|
+
* between filter changes when possible.
|
|
55
|
+
*/
|
|
51
56
|
function dedupeSelectInputItems(items) {
|
|
52
57
|
const existingValues = new Set();
|
|
53
58
|
return items.map(item => {
|
|
@@ -67,19 +72,19 @@ function dedupeSelectInputItems(items) {
|
|
|
67
72
|
return item;
|
|
68
73
|
});
|
|
69
74
|
}
|
|
70
|
-
function
|
|
75
|
+
function selectInputOptionItemIncludesNeedle(item, needle) {
|
|
71
76
|
return inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle));
|
|
72
77
|
}
|
|
73
|
-
function filterSelectInputItems(items,
|
|
78
|
+
function filterSelectInputItems(items, predicate) {
|
|
74
79
|
return items.filter(item => {
|
|
75
80
|
switch (item.type) {
|
|
76
81
|
case 'option':
|
|
77
82
|
{
|
|
78
|
-
return
|
|
83
|
+
return predicate(item);
|
|
79
84
|
}
|
|
80
85
|
case 'group':
|
|
81
86
|
{
|
|
82
|
-
return item.options.some(option =>
|
|
87
|
+
return item.options.some(option => predicate(option));
|
|
83
88
|
}
|
|
84
89
|
}
|
|
85
90
|
return false;
|
|
@@ -180,12 +185,15 @@ function SelectInput({
|
|
|
180
185
|
}
|
|
181
186
|
}, [handleClose, open]);
|
|
182
187
|
const [filterQuery, _setFilterQuery] = React.useState('');
|
|
188
|
+
const deferredFilterQuery = React.useDeferredValue(filterQuery);
|
|
183
189
|
const setFilterQuery = useEffectEvent.useEffectEvent(query => {
|
|
184
190
|
_setFilterQuery(query);
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
191
|
+
if (query !== filterQuery) {
|
|
192
|
+
onFilterChange({
|
|
193
|
+
query,
|
|
194
|
+
queryNormalized: query ? searchableString(query) : null
|
|
195
|
+
});
|
|
196
|
+
}
|
|
189
197
|
});
|
|
190
198
|
const triggerRef = React.useRef(null);
|
|
191
199
|
const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
|
|
@@ -197,10 +205,7 @@ function SelectInput({
|
|
|
197
205
|
name: name,
|
|
198
206
|
multiple: multiple,
|
|
199
207
|
defaultValue: defaultValue,
|
|
200
|
-
value: controlledValue
|
|
201
|
-
// TODO: Remove assertion when upgrading TypeScript to v5
|
|
202
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
203
|
-
,
|
|
208
|
+
value: controlledValue,
|
|
204
209
|
by: compareValues,
|
|
205
210
|
disabled: disabled,
|
|
206
211
|
onChange: value => {
|
|
@@ -265,9 +270,7 @@ function SelectInput({
|
|
|
265
270
|
setOpen(false);
|
|
266
271
|
},
|
|
267
272
|
onCloseEnd: () => {
|
|
268
|
-
|
|
269
|
-
setFilterQuery('');
|
|
270
|
-
}
|
|
273
|
+
setFilterQuery('');
|
|
271
274
|
},
|
|
272
275
|
children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
|
|
273
276
|
items: items,
|
|
@@ -277,13 +280,14 @@ function SelectInput({
|
|
|
277
280
|
filterPlaceholder: filterPlaceholder,
|
|
278
281
|
searchInputRef: searchInputRef,
|
|
279
282
|
listboxRef: listboxRef,
|
|
280
|
-
filterQuery:
|
|
283
|
+
filterQuery: deferredFilterQuery,
|
|
281
284
|
onFilterChange: setFilterQuery
|
|
282
285
|
})
|
|
283
286
|
});
|
|
284
287
|
}
|
|
285
288
|
});
|
|
286
289
|
}
|
|
290
|
+
const SelectInputTriggerButtonPropsContext = /*#__PURE__*/React.createContext({});
|
|
287
291
|
function SelectInputTriggerButton({
|
|
288
292
|
as = 'button',
|
|
289
293
|
...restProps
|
|
@@ -361,7 +365,37 @@ function SelectInputOptions({
|
|
|
361
365
|
}
|
|
362
366
|
return undefined;
|
|
363
367
|
}, [filterQuery, filterable]);
|
|
364
|
-
|
|
368
|
+
React.useEffect(() => {
|
|
369
|
+
if (needle) {
|
|
370
|
+
// Ensure having an active option while filtering
|
|
371
|
+
requestAnimationFrame(() => {
|
|
372
|
+
if (controllerRef.current != null && !controllerRef.current.hasAttribute('aria-activedescendant')) {
|
|
373
|
+
// Activate first option via synthetic key press
|
|
374
|
+
controllerRef.current.dispatchEvent(new KeyboardEvent('keydown', {
|
|
375
|
+
key: 'Home',
|
|
376
|
+
bubbles: true
|
|
377
|
+
}));
|
|
378
|
+
}
|
|
379
|
+
});
|
|
380
|
+
}
|
|
381
|
+
}, [controllerRef, needle]);
|
|
382
|
+
const filteredItems = needle != null ? filterSelectInputItems(dedupeSelectInputItems(items), item => selectInputOptionItemIncludesNeedle(item, needle)) : items;
|
|
383
|
+
const resultsEmpty = needle != null && filteredItems.length === 0;
|
|
384
|
+
const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;
|
|
385
|
+
// Items shown once shall be kept mounted until the needle changes, otherwise
|
|
386
|
+
// the scroll position may jump around inadvertently. Pattern adopted from:
|
|
387
|
+
// https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
|
|
388
|
+
const [mountedIndexes, setMountedIndexes] = React.useState([]);
|
|
389
|
+
React.useEffect(() => {
|
|
390
|
+
// Ensure the 'End' key works as intended by keeping the last item mounted
|
|
391
|
+
setMountedIndexes(prevMountedIndexes => {
|
|
392
|
+
const indexes = new Set(prevMountedIndexes);
|
|
393
|
+
indexes.add(filteredItems.length - 1);
|
|
394
|
+
return [...indexes]; // Sorting is redundant by nature here
|
|
395
|
+
});
|
|
396
|
+
}, [needle,
|
|
397
|
+
// Needed as `filteredItems.length` may be equal between two updates
|
|
398
|
+
filteredItems.length]);
|
|
365
399
|
const listboxContainerRef = React.useRef(null);
|
|
366
400
|
React.useEffect(() => {
|
|
367
401
|
if (listboxContainerRef.current != null) {
|
|
@@ -371,6 +405,16 @@ function SelectInputOptions({
|
|
|
371
405
|
const showStatus = resultsEmpty;
|
|
372
406
|
const statusId = React.useId();
|
|
373
407
|
const listboxId = React.useId();
|
|
408
|
+
const getItemNode = index => {
|
|
409
|
+
const item = filteredItems[index];
|
|
410
|
+
return /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
|
|
411
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
412
|
+
, {
|
|
413
|
+
item: item,
|
|
414
|
+
renderValue: renderValue,
|
|
415
|
+
needle: needle
|
|
416
|
+
}, index);
|
|
417
|
+
};
|
|
374
418
|
return /*#__PURE__*/jsxRuntime.jsxs(react.Listbox.Options, {
|
|
375
419
|
as: SelectInputOptionsContainer,
|
|
376
420
|
static: true,
|
|
@@ -381,13 +425,6 @@ function SelectInputOptions({
|
|
|
381
425
|
controllerRef.current.setAttribute('aria-activedescendant', value);
|
|
382
426
|
} else {
|
|
383
427
|
controllerRef.current.removeAttribute('aria-activedescendant');
|
|
384
|
-
if (filterQuery) {
|
|
385
|
-
// Ensure having an active option while filtering
|
|
386
|
-
controllerRef.current.dispatchEvent(new KeyboardEvent('keydown', {
|
|
387
|
-
key: 'Home',
|
|
388
|
-
bubbles: true
|
|
389
|
-
}));
|
|
390
|
-
}
|
|
391
428
|
}
|
|
392
429
|
}
|
|
393
430
|
},
|
|
@@ -397,7 +434,7 @@ function SelectInputOptions({
|
|
|
397
434
|
ref: searchInputRef,
|
|
398
435
|
shape: "rectangle",
|
|
399
436
|
placeholder: filterPlaceholder,
|
|
400
|
-
|
|
437
|
+
defaultValue: filterQuery,
|
|
401
438
|
"aria-controls": listboxId,
|
|
402
439
|
"aria-describedby": showStatus ? statusId : undefined,
|
|
403
440
|
onKeyDown: event => {
|
|
@@ -408,13 +445,18 @@ function SelectInputOptions({
|
|
|
408
445
|
}
|
|
409
446
|
},
|
|
410
447
|
onChange: event => {
|
|
448
|
+
// Free up resources and ensure not to go out of bounds when the
|
|
449
|
+
// resulting item count is less than before
|
|
450
|
+
setMountedIndexes([]);
|
|
411
451
|
onFilterChange(event.currentTarget.value);
|
|
412
452
|
}
|
|
413
453
|
})
|
|
414
454
|
}) : null, /*#__PURE__*/jsxRuntime.jsxs("section", {
|
|
415
455
|
ref: listboxContainerRef,
|
|
416
456
|
tabIndex: -1,
|
|
417
|
-
className: clsx.clsx('np-select-input-listbox-container',
|
|
457
|
+
className: clsx.clsx('np-select-input-listbox-container', virtualized && 'np-select-input-listbox-container--virtualized', needle == null &&
|
|
458
|
+
// Groups aren't shown when filtering
|
|
459
|
+
items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
|
|
418
460
|
children: [resultsEmpty ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
419
461
|
id: statusId,
|
|
420
462
|
className: "np-select-input-options-status",
|
|
@@ -429,13 +471,28 @@ function SelectInputOptions({
|
|
|
429
471
|
"aria-orientation": "vertical",
|
|
430
472
|
tabIndex: 0,
|
|
431
473
|
className: "np-select-input-listbox",
|
|
432
|
-
children:
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
474
|
+
children: !virtualized ? filteredItems.map((_, index) => getItemNode(index)) : /*#__PURE__*/jsxRuntime.jsx(virtua.Virtualizer, {
|
|
475
|
+
count: filteredItems.length,
|
|
476
|
+
keepMounted: mountedIndexes,
|
|
477
|
+
scrollRef: listboxRef // `VList` doesn't expose this
|
|
478
|
+
,
|
|
479
|
+
onRangeChange: (startIndex, endIndex) => {
|
|
480
|
+
setMountedIndexes(prevMountedIndexes => {
|
|
481
|
+
const indexes = new Set(prevMountedIndexes);
|
|
482
|
+
for (let index = startIndex; index <= endIndex; index += 1) {
|
|
483
|
+
indexes.add(index);
|
|
484
|
+
}
|
|
485
|
+
return [...indexes].sort((a, b) => a - b);
|
|
486
|
+
});
|
|
487
|
+
},
|
|
488
|
+
children: index => /*#__PURE__*/jsxRuntime.jsx(SelectInputItemsCountContext.Provider, {
|
|
489
|
+
value: filteredItems.length,
|
|
490
|
+
children: /*#__PURE__*/jsxRuntime.jsx(SelectInputItemPositionContext.Provider, {
|
|
491
|
+
value: index + 1,
|
|
492
|
+
children: getItemNode(index)
|
|
493
|
+
})
|
|
494
|
+
})
|
|
495
|
+
}, needle)
|
|
439
496
|
}), renderFooter != null ? /*#__PURE__*/jsxRuntime.jsx("footer", {
|
|
440
497
|
className: "np-select-input-footer",
|
|
441
498
|
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
@@ -463,7 +520,7 @@ function SelectInputItemView({
|
|
|
463
520
|
switch (item.type) {
|
|
464
521
|
case 'option':
|
|
465
522
|
{
|
|
466
|
-
if (item.value != null && (needle == null ||
|
|
523
|
+
if (item.value != null && (needle == null || selectInputOptionItemIncludesNeedle(item, needle))) {
|
|
467
524
|
return /*#__PURE__*/jsxRuntime.jsx(SelectInputOption, {
|
|
468
525
|
value: item.value,
|
|
469
526
|
disabled: item.disabled,
|
|
@@ -521,14 +578,20 @@ function SelectInputGroupItemView({
|
|
|
521
578
|
})
|
|
522
579
|
);
|
|
523
580
|
}
|
|
581
|
+
const SelectInputItemsCountContext = /*#__PURE__*/React.createContext(undefined);
|
|
582
|
+
const SelectInputItemPositionContext = /*#__PURE__*/React.createContext(undefined);
|
|
524
583
|
function SelectInputOption({
|
|
525
584
|
value,
|
|
526
585
|
disabled,
|
|
527
586
|
children
|
|
528
587
|
}) {
|
|
588
|
+
const itemsCount = React.useContext(SelectInputItemsCountContext);
|
|
589
|
+
const itemPosition = React.useContext(SelectInputItemPositionContext);
|
|
529
590
|
return /*#__PURE__*/jsxRuntime.jsx(react.Listbox.Option, {
|
|
530
591
|
as: "div",
|
|
531
592
|
value: value,
|
|
593
|
+
"aria-setsize": itemsCount,
|
|
594
|
+
"aria-posinset": itemPosition,
|
|
532
595
|
disabled: disabled,
|
|
533
596
|
className: ({
|
|
534
597
|
active,
|
|
@@ -547,6 +610,7 @@ function SelectInputOption({
|
|
|
547
610
|
})
|
|
548
611
|
});
|
|
549
612
|
}
|
|
613
|
+
const SelectInputOptionContentWithinTriggerContext = /*#__PURE__*/React.createContext(false);
|
|
550
614
|
function SelectInputOptionContent({
|
|
551
615
|
title,
|
|
552
616
|
note,
|