@transferwise/components 0.0.0-experimental-497bd2d → 0.0.0-experimental-333df2c
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 +86 -34
- package/build/inputs/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput.mjs +88 -36
- 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 +5 -4
- 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 +116 -37
- 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
|
}
|
|
@@ -48,6 +50,11 @@ function dedupeSelectInputOptionItem(item, existingValues) {
|
|
|
48
50
|
value: undefined
|
|
49
51
|
};
|
|
50
52
|
}
|
|
53
|
+
/**
|
|
54
|
+
* Sets the `value` of duplicate option items to `undefined`, hiding them when
|
|
55
|
+
* rendered. Indexes are kept intact within groups to preserve the active item
|
|
56
|
+
* between filter changes when possible.
|
|
57
|
+
*/
|
|
51
58
|
function dedupeSelectInputItems(items) {
|
|
52
59
|
const existingValues = new Set();
|
|
53
60
|
return items.map(item => {
|
|
@@ -67,19 +74,19 @@ function dedupeSelectInputItems(items) {
|
|
|
67
74
|
return item;
|
|
68
75
|
});
|
|
69
76
|
}
|
|
70
|
-
function
|
|
77
|
+
function selectInputOptionItemIncludesNeedle(item, needle) {
|
|
71
78
|
return inferSearchableStrings(item.filterMatchers ?? item.value).some(haystack => haystack.includes(needle));
|
|
72
79
|
}
|
|
73
|
-
function filterSelectInputItems(items,
|
|
80
|
+
function filterSelectInputItems(items, predicate) {
|
|
74
81
|
return items.filter(item => {
|
|
75
82
|
switch (item.type) {
|
|
76
83
|
case 'option':
|
|
77
84
|
{
|
|
78
|
-
return
|
|
85
|
+
return predicate(item);
|
|
79
86
|
}
|
|
80
87
|
case 'group':
|
|
81
88
|
{
|
|
82
|
-
return item.options.some(option =>
|
|
89
|
+
return item.options.some(option => predicate(option));
|
|
83
90
|
}
|
|
84
91
|
}
|
|
85
92
|
return false;
|
|
@@ -180,12 +187,15 @@ function SelectInput({
|
|
|
180
187
|
}
|
|
181
188
|
}, [handleClose, open]);
|
|
182
189
|
const [filterQuery, _setFilterQuery] = React.useState('');
|
|
190
|
+
const deferredFilterQuery = React.useDeferredValue(filterQuery);
|
|
183
191
|
const setFilterQuery = useEffectEvent.useEffectEvent(query => {
|
|
184
192
|
_setFilterQuery(query);
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
193
|
+
if (query !== filterQuery) {
|
|
194
|
+
onFilterChange({
|
|
195
|
+
query,
|
|
196
|
+
queryNormalized: query ? searchableString(query) : null
|
|
197
|
+
});
|
|
198
|
+
}
|
|
189
199
|
});
|
|
190
200
|
const triggerRef = React.useRef(null);
|
|
191
201
|
const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
|
|
@@ -197,10 +207,7 @@ function SelectInput({
|
|
|
197
207
|
name: name,
|
|
198
208
|
multiple: multiple,
|
|
199
209
|
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
|
-
,
|
|
210
|
+
value: controlledValue,
|
|
204
211
|
by: compareValues,
|
|
205
212
|
disabled: disabled,
|
|
206
213
|
onChange: value => {
|
|
@@ -265,9 +272,7 @@ function SelectInput({
|
|
|
265
272
|
setOpen(false);
|
|
266
273
|
},
|
|
267
274
|
onCloseEnd: () => {
|
|
268
|
-
|
|
269
|
-
setFilterQuery('');
|
|
270
|
-
}
|
|
275
|
+
setFilterQuery('');
|
|
271
276
|
},
|
|
272
277
|
children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
|
|
273
278
|
items: items,
|
|
@@ -277,7 +282,7 @@ function SelectInput({
|
|
|
277
282
|
filterPlaceholder: filterPlaceholder,
|
|
278
283
|
searchInputRef: searchInputRef,
|
|
279
284
|
listboxRef: listboxRef,
|
|
280
|
-
filterQuery:
|
|
285
|
+
filterQuery: deferredFilterQuery,
|
|
281
286
|
onFilterChange: setFilterQuery
|
|
282
287
|
})
|
|
283
288
|
});
|
|
@@ -361,7 +366,37 @@ function SelectInputOptions({
|
|
|
361
366
|
}
|
|
362
367
|
return undefined;
|
|
363
368
|
}, [filterQuery, filterable]);
|
|
364
|
-
|
|
369
|
+
React.useEffect(() => {
|
|
370
|
+
if (needle) {
|
|
371
|
+
// Ensure having an active option while filtering
|
|
372
|
+
requestAnimationFrame(() => {
|
|
373
|
+
if (controllerRef.current != null && !controllerRef.current.hasAttribute('aria-activedescendant')) {
|
|
374
|
+
// Activate first option via synthetic key press
|
|
375
|
+
controllerRef.current.dispatchEvent(new KeyboardEvent('keydown', {
|
|
376
|
+
key: 'Home',
|
|
377
|
+
bubbles: true
|
|
378
|
+
}));
|
|
379
|
+
}
|
|
380
|
+
});
|
|
381
|
+
}
|
|
382
|
+
}, [controllerRef, needle]);
|
|
383
|
+
const filteredItems = needle != null ? filterSelectInputItems(dedupeSelectInputItems(items), item => selectInputOptionItemIncludesNeedle(item, needle)) : items;
|
|
384
|
+
const resultsEmpty = needle != null && filteredItems.length === 0;
|
|
385
|
+
const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;
|
|
386
|
+
// Items shown once shall be kept mounted until the needle changes, otherwise
|
|
387
|
+
// the scroll position may jump around inadvertently. Pattern adopted from:
|
|
388
|
+
// https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
|
|
389
|
+
const [mountedIndexes, setMountedIndexes] = React.useState([]);
|
|
390
|
+
React.useEffect(() => {
|
|
391
|
+
// Ensure the 'End' key works as intended by keeping the last item mounted
|
|
392
|
+
setMountedIndexes(prevMountedIndexes => {
|
|
393
|
+
const indexes = new Set(prevMountedIndexes);
|
|
394
|
+
indexes.add(filteredItems.length - 1);
|
|
395
|
+
return [...indexes]; // Sorting is redundant by nature here
|
|
396
|
+
});
|
|
397
|
+
}, [needle,
|
|
398
|
+
// Needed as `filteredItems.length` may be equal between two updates
|
|
399
|
+
filteredItems.length]);
|
|
365
400
|
const listboxContainerRef = React.useRef(null);
|
|
366
401
|
React.useEffect(() => {
|
|
367
402
|
if (listboxContainerRef.current != null) {
|
|
@@ -371,6 +406,16 @@ function SelectInputOptions({
|
|
|
371
406
|
const showStatus = resultsEmpty;
|
|
372
407
|
const statusId = React.useId();
|
|
373
408
|
const listboxId = React.useId();
|
|
409
|
+
const getItemNode = index => {
|
|
410
|
+
const item = filteredItems[index];
|
|
411
|
+
return /*#__PURE__*/jsxRuntime.jsx(SelectInputItemView
|
|
412
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
413
|
+
, {
|
|
414
|
+
item: item,
|
|
415
|
+
renderValue: renderValue,
|
|
416
|
+
needle: needle
|
|
417
|
+
}, index);
|
|
418
|
+
};
|
|
374
419
|
return /*#__PURE__*/jsxRuntime.jsxs(react.Listbox.Options, {
|
|
375
420
|
as: SelectInputOptionsContainer,
|
|
376
421
|
static: true,
|
|
@@ -381,13 +426,6 @@ function SelectInputOptions({
|
|
|
381
426
|
controllerRef.current.setAttribute('aria-activedescendant', value);
|
|
382
427
|
} else {
|
|
383
428
|
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
429
|
}
|
|
392
430
|
}
|
|
393
431
|
},
|
|
@@ -397,7 +435,7 @@ function SelectInputOptions({
|
|
|
397
435
|
ref: searchInputRef,
|
|
398
436
|
shape: "rectangle",
|
|
399
437
|
placeholder: filterPlaceholder,
|
|
400
|
-
|
|
438
|
+
defaultValue: filterQuery,
|
|
401
439
|
"aria-controls": listboxId,
|
|
402
440
|
"aria-describedby": showStatus ? statusId : undefined,
|
|
403
441
|
onKeyDown: event => {
|
|
@@ -408,13 +446,18 @@ function SelectInputOptions({
|
|
|
408
446
|
}
|
|
409
447
|
},
|
|
410
448
|
onChange: event => {
|
|
449
|
+
// Free up resources and ensure not to go out of bounds when the
|
|
450
|
+
// resulting item count is less than before
|
|
451
|
+
setMountedIndexes([]);
|
|
411
452
|
onFilterChange(event.currentTarget.value);
|
|
412
453
|
}
|
|
413
454
|
})
|
|
414
455
|
}) : null, /*#__PURE__*/jsxRuntime.jsxs("section", {
|
|
415
456
|
ref: listboxContainerRef,
|
|
416
457
|
tabIndex: -1,
|
|
417
|
-
className: clsx.clsx('np-select-input-listbox-container',
|
|
458
|
+
className: clsx.clsx('np-select-input-listbox-container', virtualized && 'np-select-input-listbox-container--virtualized', needle == null &&
|
|
459
|
+
// Groups aren't shown when filtering
|
|
460
|
+
items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
|
|
418
461
|
children: [resultsEmpty ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
419
462
|
id: statusId,
|
|
420
463
|
className: "np-select-input-options-status",
|
|
@@ -429,13 +472,22 @@ function SelectInputOptions({
|
|
|
429
472
|
"aria-orientation": "vertical",
|
|
430
473
|
tabIndex: 0,
|
|
431
474
|
className: "np-select-input-listbox",
|
|
432
|
-
children:
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
475
|
+
children: !virtualized ? filteredItems.map((_, index) => getItemNode(index)) : /*#__PURE__*/jsxRuntime.jsx(virtua.Virtualizer, {
|
|
476
|
+
count: filteredItems.length,
|
|
477
|
+
keepMounted: mountedIndexes,
|
|
478
|
+
scrollRef: listboxRef // `VList` doesn't expose this
|
|
479
|
+
,
|
|
480
|
+
onRangeChange: (startIndex, endIndex) => {
|
|
481
|
+
setMountedIndexes(prevMountedIndexes => {
|
|
482
|
+
const indexes = new Set(prevMountedIndexes);
|
|
483
|
+
for (let index = startIndex; index <= endIndex; index += 1) {
|
|
484
|
+
indexes.add(index);
|
|
485
|
+
}
|
|
486
|
+
return [...indexes].sort((a, b) => a - b);
|
|
487
|
+
});
|
|
488
|
+
},
|
|
489
|
+
children: index => getItemNode(index)
|
|
490
|
+
}, needle)
|
|
439
491
|
}), renderFooter != null ? /*#__PURE__*/jsxRuntime.jsx("footer", {
|
|
440
492
|
className: "np-select-input-footer",
|
|
441
493
|
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
@@ -463,7 +515,7 @@ function SelectInputItemView({
|
|
|
463
515
|
switch (item.type) {
|
|
464
516
|
case 'option':
|
|
465
517
|
{
|
|
466
|
-
if (item.value != null && (needle == null ||
|
|
518
|
+
if (item.value != null && (needle == null || selectInputOptionItemIncludesNeedle(item, needle))) {
|
|
467
519
|
return /*#__PURE__*/jsxRuntime.jsx(SelectInputOption, {
|
|
468
520
|
value: item.value,
|
|
469
521
|
disabled: item.disabled,
|