@transferwise/components 46.111.0 → 46.111.1
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/common/panel/Panel.js +1 -0
- package/build/common/panel/Panel.js.map +1 -1
- package/build/common/panel/Panel.mjs +1 -0
- package/build/common/panel/Panel.mjs.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.js +6 -1
- package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.mjs +6 -1
- package/build/common/responsivePanel/ResponsivePanel.mjs.map +1 -1
- package/build/dateInput/DateInput.js +46 -24
- package/build/dateInput/DateInput.js.map +1 -1
- package/build/dateInput/DateInput.mjs +48 -26
- package/build/dateInput/DateInput.mjs.map +1 -1
- package/build/dateLookup/DateLookup.js +5 -2
- package/build/dateLookup/DateLookup.js.map +1 -1
- package/build/dateLookup/DateLookup.mjs +5 -2
- package/build/dateLookup/DateLookup.mjs.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.js +2 -0
- package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.mjs +2 -0
- package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
- package/build/field/Field.js +7 -2
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +13 -8
- package/build/field/Field.mjs.map +1 -1
- package/build/inputs/InputGroup.js +1 -1
- package/build/inputs/InputGroup.js.map +1 -1
- package/build/inputs/InputGroup.mjs +2 -2
- package/build/inputs/InputGroup.mjs.map +1 -1
- package/build/inputs/SelectInput.js +13 -3
- package/build/inputs/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput.mjs +13 -3
- package/build/inputs/SelectInput.mjs.map +1 -1
- package/build/inputs/contexts.js +8 -4
- package/build/inputs/contexts.js.map +1 -1
- package/build/inputs/contexts.mjs +7 -4
- package/build/inputs/contexts.mjs.map +1 -1
- package/build/label/Label.js +14 -8
- package/build/label/Label.js.map +1 -1
- package/build/label/Label.mjs +14 -8
- package/build/label/Label.mjs.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.js +1 -1
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
- package/build/main.css +163 -153
- package/build/moneyInput/MoneyInput.js +6 -5
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.mjs +6 -5
- package/build/moneyInput/MoneyInput.mjs.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js +25 -3
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs +27 -5
- package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
- package/build/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.js +23 -23
- package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -0
- package/build/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.mjs +23 -23
- package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -0
- package/build/styles/inputs/Input.css +5 -0
- package/build/styles/inputs/TextArea.css +5 -0
- package/build/styles/listItem/ListItem.css +5 -153
- package/build/styles/listItem/Prompt/ListItemPrompt.css +0 -153
- package/build/styles/main.css +163 -153
- package/build/types/common/panel/Panel.d.ts +2 -0
- package/build/types/common/panel/Panel.d.ts.map +1 -1
- package/build/types/common/responsivePanel/ResponsivePanel.d.ts +1 -0
- package/build/types/common/responsivePanel/ResponsivePanel.d.ts.map +1 -1
- package/build/types/dateInput/DateInput.d.ts +2 -2
- package/build/types/dateInput/DateInput.d.ts.map +1 -1
- package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
- package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts +1 -0
- package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
- package/build/types/field/Field.d.ts.map +1 -1
- package/build/types/inputs/InputGroup.d.ts.map +1 -1
- package/build/types/inputs/SelectInput.d.ts +8 -1
- package/build/types/inputs/SelectInput.d.ts.map +1 -1
- package/build/types/inputs/contexts.d.ts +6 -1
- package/build/types/inputs/contexts.d.ts.map +1 -1
- package/build/types/label/Label.d.ts +5 -15
- package/build/types/label/Label.d.ts.map +1 -1
- package/build/types/listItem/Prompt/ListItemPrompt.d.ts +1 -1
- package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
- package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
- package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
- package/build/types/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.d.ts +1 -1
- package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -0
- package/build/types/prompt/InlinePrompt/index.d.ts.map +1 -0
- package/build/types/prompt/index.d.ts +3 -0
- package/build/types/prompt/index.d.ts.map +1 -0
- package/package.json +2 -2
- package/src/DisabledComponents.story.tsx +156 -0
- package/src/common/panel/Panel.tsx +2 -0
- package/src/common/responsivePanel/ResponsivePanel.tsx +7 -1
- package/src/dateInput/DateInput.spec.tsx +45 -7
- package/src/dateInput/DateInput.story.tsx +2 -0
- package/src/dateInput/DateInput.tsx +65 -30
- package/src/dateLookup/DateLookup.spec.tsx +16 -0
- package/src/dateLookup/DateLookup.tsx +6 -3
- package/src/dateLookup/dateTrigger/DateTrigger.tsx +3 -0
- package/src/field/Field.tsx +6 -5
- package/src/inputs/Input.css +5 -0
- package/src/inputs/InputGroup.tsx +3 -4
- package/src/inputs/SelectInput.story.tsx +7 -0
- package/src/inputs/SelectInput.tsx +29 -4
- package/src/inputs/TextArea.css +5 -0
- package/src/inputs/_common.less +5 -0
- package/src/inputs/contexts.tsx +12 -3
- package/src/label/Label.tsx +26 -20
- package/src/listItem/ListItem.css +5 -153
- package/src/listItem/ListItem.less +5 -0
- package/src/listItem/Prompt/ListItemPrompt.css +0 -153
- package/src/listItem/Prompt/ListItemPrompt.less +0 -2
- package/src/listItem/Prompt/ListItemPrompt.tsx +1 -1
- package/src/main.css +163 -153
- package/src/main.less +1 -0
- package/src/moneyInput/MoneyInput.spec.tsx +16 -1
- package/src/moneyInput/MoneyInput.tsx +7 -6
- package/src/phoneNumberInput/PhoneNumberInput.spec.tsx +32 -0
- package/src/phoneNumberInput/PhoneNumberInput.tsx +32 -11
- package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.spec.tsx +2 -2
- package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.tsx +4 -4
- package/src/prompt/index.ts +6 -0
- package/build/listItem/Prompt/InlinePrompt/InlinePrompt.js.map +0 -1
- package/build/listItem/Prompt/InlinePrompt/InlinePrompt.mjs.map +0 -1
- package/build/types/listItem/Prompt/InlinePrompt/InlinePrompt.d.ts.map +0 -1
- package/build/types/listItem/Prompt/InlinePrompt/index.d.ts.map +0 -1
- /package/build/styles/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.css +0 -0
- /package/build/types/{listItem/Prompt → prompt}/InlinePrompt/index.d.ts +0 -0
- /package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.css +0 -0
- /package/src/{listItem/Prompt → prompt}/InlinePrompt/InlinePrompt.less +0 -0
- /package/src/{listItem/Prompt → prompt}/InlinePrompt/index.ts +0 -0
|
@@ -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, Typography } from '../../common';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\nimport IconButton from '../../iconButton';\nimport { Cross } from '@transferwise/icons';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\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 ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n const valueIdPrefix = useId();\n const overlayId = useContext(OverlayIdContext);\n const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n return (\n <>\n <button\n aria-haspopup=\"dialog\"\n aria-expanded={overlayId != null}\n aria-controls={overlayId}\n aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n className={`btn btn-${size} btn-input np-date-trigger`}\n disabled={disabled}\n type=\"button\"\n onClick={onClick}\n >\n {label && (\n <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n {label}\n </Body>\n )}\n {selectedDate ? (\n <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n {formatDate(selectedDate, locale, {\n day: 'numeric',\n month: monthFormat,\n year: 'numeric',\n })}\n </Body>\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 id={ariaLabelIds[2]}\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 <IconButton\n size={32}\n priority=\"minimal\"\n className={`clear-btn clear-btn--${size}`}\n aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n onClear();\n }}\n >\n <Cross />\n </IconButton>\n </span>\n </>\n ) : null}\n </>\n );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","
|
|
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, Typography } from '../../common';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\nimport IconButton from '../../iconButton';\nimport { Cross } from '@transferwise/icons';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\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 id?: string;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n id,\n monthFormat,\n disabled,\n ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n const valueIdPrefix = useId();\n const overlayId = useContext(OverlayIdContext);\n const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n return (\n <>\n <button\n id={id}\n aria-haspopup=\"dialog\"\n aria-expanded={overlayId != null}\n aria-controls={overlayId}\n aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n className={`btn btn-${size} btn-input np-date-trigger`}\n disabled={disabled}\n type=\"button\"\n onClick={onClick}\n >\n {label && (\n <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n {label}\n </Body>\n )}\n {selectedDate ? (\n <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n {formatDate(selectedDate, locale, {\n day: 'numeric',\n month: monthFormat,\n year: 'numeric',\n })}\n </Body>\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 id={ariaLabelIds[2]}\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 <IconButton\n size={32}\n priority=\"minimal\"\n className={`clear-btn clear-btn--${size}`}\n aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n onClear();\n }}\n >\n <Cross />\n </IconButton>\n </span>\n </>\n ) : null}\n </>\n );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","id","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","IconButton","priority","messages","ariaLabel","event","stopPropagation","preventDefault","Cross"],"mappings":"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"}
|
|
@@ -35,6 +35,7 @@ const DateTrigger = ({
|
|
|
35
35
|
size = Size.MEDIUM,
|
|
36
36
|
placeholder,
|
|
37
37
|
label,
|
|
38
|
+
id,
|
|
38
39
|
monthFormat,
|
|
39
40
|
disabled,
|
|
40
41
|
ariaLabelledBy,
|
|
@@ -50,6 +51,7 @@ const DateTrigger = ({
|
|
|
50
51
|
const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];
|
|
51
52
|
return /*#__PURE__*/jsxs(Fragment, {
|
|
52
53
|
children: [/*#__PURE__*/jsxs("button", {
|
|
54
|
+
id: id,
|
|
53
55
|
"aria-haspopup": "dialog",
|
|
54
56
|
"aria-expanded": overlayId != null,
|
|
55
57
|
"aria-controls": overlayId,
|
|
@@ -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, Typography } from '../../common';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\nimport IconButton from '../../iconButton';\nimport { Cross } from '@transferwise/icons';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\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 ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n const valueIdPrefix = useId();\n const overlayId = useContext(OverlayIdContext);\n const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n return (\n <>\n <button\n aria-haspopup=\"dialog\"\n aria-expanded={overlayId != null}\n aria-controls={overlayId}\n aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n className={`btn btn-${size} btn-input np-date-trigger`}\n disabled={disabled}\n type=\"button\"\n onClick={onClick}\n >\n {label && (\n <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n {label}\n </Body>\n )}\n {selectedDate ? (\n <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n {formatDate(selectedDate, locale, {\n day: 'numeric',\n month: monthFormat,\n year: 'numeric',\n })}\n </Body>\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 id={ariaLabelIds[2]}\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 <IconButton\n size={32}\n priority=\"minimal\"\n className={`clear-btn clear-btn--${size}`}\n aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n onClear();\n }}\n >\n <Cross />\n </IconButton>\n </span>\n </>\n ) : null}\n </>\n );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","
|
|
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, Typography } from '../../common';\n\nimport messages from './DateTrigger.messages';\nimport { useContext, useId } from 'react';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport Body from '../../body';\nimport IconButton from '../../iconButton';\nimport { Cross } from '@transferwise/icons';\n\ninterface DateTriggerProps {\n ariaLabelledBy?: string;\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 id?: string;\n}\n\nconst DateTrigger: React.FC<DateTriggerProps> = ({\n selectedDate,\n size = Size.MEDIUM,\n placeholder,\n label,\n id,\n monthFormat,\n disabled,\n ariaLabelledBy,\n onClick,\n onClear,\n}) => {\n const { locale, formatMessage } = useIntl();\n const valueIdPrefix = useId();\n const overlayId = useContext(OverlayIdContext);\n const ariaLabelIds = [ariaLabelledBy, `${valueIdPrefix}:prefix`, `${valueIdPrefix}:value`];\n\n return (\n <>\n <button\n id={id}\n aria-haspopup=\"dialog\"\n aria-expanded={overlayId != null}\n aria-controls={overlayId}\n aria-labelledby={ariaLabelIds.filter(Boolean).join(' ')}\n className={`btn btn-${size} btn-input np-date-trigger`}\n disabled={disabled}\n type=\"button\"\n onClick={onClick}\n >\n {label && (\n <Body as=\"span\" className=\"np-date-trigger-label m-r-1\" id={ariaLabelIds[1]}>\n {label}\n </Body>\n )}\n {selectedDate ? (\n <Body as=\"span\" type={Typography.BODY_LARGE} id={ariaLabelIds[2]}>\n {formatDate(selectedDate, locale, {\n day: 'numeric',\n month: monthFormat,\n year: 'numeric',\n })}\n </Body>\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 id={ariaLabelIds[2]}\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 <IconButton\n size={32}\n priority=\"minimal\"\n className={`clear-btn clear-btn--${size}`}\n aria-label={`${formatMessage(messages.ariaLabel)} ${label}`}\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n onClear();\n }}\n >\n <Cross />\n </IconButton>\n </span>\n </>\n ) : null}\n </>\n );\n};\n\nexport default DateTrigger;\n"],"names":["DateTrigger","selectedDate","size","Size","MEDIUM","placeholder","label","id","monthFormat","disabled","ariaLabelledBy","onClick","onClear","locale","formatMessage","useIntl","valueIdPrefix","useId","overlayId","useContext","OverlayIdContext","ariaLabelIds","_jsxs","_Fragment","children","filter","Boolean","join","className","type","_jsx","Body","as","Typography","BODY_LARGE","formatDate","day","month","year","Chevron","orientation","Position","BOTTOM","IconButton","priority","messages","ariaLabel","event","stopPropagation","preventDefault","Cross"],"mappings":"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"}
|
package/build/field/Field.js
CHANGED
|
@@ -42,6 +42,7 @@ const Field = ({
|
|
|
42
42
|
children,
|
|
43
43
|
...props
|
|
44
44
|
}) => {
|
|
45
|
+
const labelRef = React.useRef(null);
|
|
45
46
|
const sentiment$1 = props.error ? sentiment.Sentiment.NEGATIVE : propType;
|
|
46
47
|
const message = propMessage || props.error;
|
|
47
48
|
const hasError = sentiment$1 === sentiment.Sentiment.NEGATIVE;
|
|
@@ -64,8 +65,11 @@ const Field = ({
|
|
|
64
65
|
}
|
|
65
66
|
return messageIds.length > 0 ? messageIds.join(' ') : undefined;
|
|
66
67
|
}
|
|
67
|
-
return /*#__PURE__*/jsxRuntime.jsx(contexts.
|
|
68
|
-
value:
|
|
68
|
+
return /*#__PURE__*/jsxRuntime.jsx(contexts.FieldLabelContextProvider, {
|
|
69
|
+
value: {
|
|
70
|
+
id: labelId,
|
|
71
|
+
ref: labelRef
|
|
72
|
+
},
|
|
69
73
|
children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
|
|
70
74
|
value: inputId,
|
|
71
75
|
children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputDescribedByProvider, {
|
|
@@ -81,6 +85,7 @@ const Field = ({
|
|
|
81
85
|
}, className),
|
|
82
86
|
children: [label != null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
83
87
|
children: [/*#__PURE__*/jsxRuntime.jsx(Label.Label, {
|
|
88
|
+
ref: labelRef,
|
|
84
89
|
id: labelId,
|
|
85
90
|
htmlFor: inputId,
|
|
86
91
|
children: required ? label : /*#__PURE__*/jsxRuntime.jsx(Label.Label.Optional, {
|
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
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n id?: string | null;\n /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n label?: React.ReactNode;\n required?: boolean;\n /** @deprecated use `description` prop instead */\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /**\n * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n messageIconLabel?: string;\n description?: 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 required = true,\n message: propMessage,\n messageIconLabel,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage || props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /**\n * form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>\n {message}\n </InlineAlert>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlineAlert","type","iconLabel"],"mappings":"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"}
|
package/build/field/Field.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
|
-
import { useId } from 'react';
|
|
2
|
+
import { useRef, useId } from 'react';
|
|
3
3
|
import '../common/theme.mjs';
|
|
4
4
|
import '../common/direction.mjs';
|
|
5
5
|
import '../common/propsValues/control.mjs';
|
|
@@ -24,8 +24,8 @@ import 'react-intl';
|
|
|
24
24
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
25
25
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
26
26
|
import InlineAlert from '../inlineAlert/InlineAlert.mjs';
|
|
27
|
-
import {
|
|
28
|
-
import { Label } from '../label/Label.mjs';
|
|
27
|
+
import { FieldLabelContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
|
|
28
|
+
import { Label as LabelNamespace } from '../label/Label.mjs';
|
|
29
29
|
|
|
30
30
|
const Field = ({
|
|
31
31
|
id,
|
|
@@ -40,6 +40,7 @@ const Field = ({
|
|
|
40
40
|
children,
|
|
41
41
|
...props
|
|
42
42
|
}) => {
|
|
43
|
+
const labelRef = useRef(null);
|
|
43
44
|
const sentiment = props.error ? Sentiment.NEGATIVE : propType;
|
|
44
45
|
const message = propMessage || props.error;
|
|
45
46
|
const hasError = sentiment === Sentiment.NEGATIVE;
|
|
@@ -62,8 +63,11 @@ const Field = ({
|
|
|
62
63
|
}
|
|
63
64
|
return messageIds.length > 0 ? messageIds.join(' ') : undefined;
|
|
64
65
|
}
|
|
65
|
-
return /*#__PURE__*/jsx(
|
|
66
|
-
value:
|
|
66
|
+
return /*#__PURE__*/jsx(FieldLabelContextProvider, {
|
|
67
|
+
value: {
|
|
68
|
+
id: labelId,
|
|
69
|
+
ref: labelRef
|
|
70
|
+
},
|
|
67
71
|
children: /*#__PURE__*/jsx(InputIdContextProvider, {
|
|
68
72
|
value: inputId,
|
|
69
73
|
children: /*#__PURE__*/jsx(InputDescribedByProvider, {
|
|
@@ -78,13 +82,14 @@ const Field = ({
|
|
|
78
82
|
'has-info': sentiment === Sentiment.NEUTRAL
|
|
79
83
|
}, className),
|
|
80
84
|
children: [label != null ? /*#__PURE__*/jsxs(Fragment, {
|
|
81
|
-
children: [/*#__PURE__*/jsx(
|
|
85
|
+
children: [/*#__PURE__*/jsx(LabelNamespace, {
|
|
86
|
+
ref: labelRef,
|
|
82
87
|
id: labelId,
|
|
83
88
|
htmlFor: inputId,
|
|
84
|
-
children: required ? label : /*#__PURE__*/jsx(
|
|
89
|
+
children: required ? label : /*#__PURE__*/jsx(LabelNamespace.Optional, {
|
|
85
90
|
children: label
|
|
86
91
|
})
|
|
87
|
-
}), /*#__PURE__*/jsx(
|
|
92
|
+
}), /*#__PURE__*/jsx(LabelNamespace.Description, {
|
|
88
93
|
id: descriptionId,
|
|
89
94
|
children: description
|
|
90
95
|
}), /*#__PURE__*/jsx("div", {
|
|
@@ -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
|
|
1
|
+
{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n id?: string | null;\n /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n label?: React.ReactNode;\n required?: boolean;\n /** @deprecated use `description` prop instead */\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /**\n * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n messageIconLabel?: string;\n description?: 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 required = true,\n message: propMessage,\n messageIconLabel,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage || props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /**\n * form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>\n {message}\n </InlineAlert>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlineAlert","type","iconLabel"],"mappings":"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"}
|
|
@@ -74,7 +74,7 @@ function InputAddon({
|
|
|
74
74
|
setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
|
|
75
75
|
}
|
|
76
76
|
});
|
|
77
|
-
return /*#__PURE__*/ /* Prevent nested controls from being labeled redundantly */jsxRuntime.jsx(contexts.
|
|
77
|
+
return /*#__PURE__*/ /* Prevent nested controls from being labeled redundantly */jsxRuntime.jsx(contexts.FieldLabelContextProvider, {
|
|
78
78
|
value: undefined,
|
|
79
79
|
children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputIdContextProvider, {
|
|
80
80
|
value: undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n
|
|
1
|
+
{"version":3,"file":"InputGroup.js","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from './contexts';\n\ntype InputPaddingContextType = [\n number | string | undefined,\n React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n const [paddingStart] = useContext(InputPaddingStartContext);\n const [paddingEnd] = useContext(InputPaddingEndContext);\n\n return {\n paddingInlineStart: paddingStart,\n paddingInlineEnd: paddingEnd,\n } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n content: React.ReactNode;\n initialContentWidth?: number | string;\n interactive?: boolean;\n padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n addonStart?: InputGroupAddon;\n addonEnd?: InputGroupAddon;\n disabled?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n initialContentWidth,\n padding = inputAddonDefaultPadding,\n}: Pick<\n InputGroupAddon,\n 'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n return () =>\n initialContentWidth != null\n ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n inputAddonContentWidthAddendByPadding[padding],\n )})`\n : undefined;\n}\n\nexport function InputGroup({\n addonStart,\n addonEnd,\n disabled,\n className,\n children,\n}: InputGroupProps) {\n const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n return (\n <InputPaddingStartContext.Provider\n value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n >\n <InputPaddingEndContext.Provider\n value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n >\n <fieldset disabled={disabled} className={clsx(className, 'np-input-group')}>\n {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n {children}\n {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n </fieldset>\n </InputPaddingEndContext.Provider>\n </InputPaddingStartContext.Provider>\n );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n none: 0,\n sm: '1rem',\n md: '1.5rem',\n} satisfies {\n [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n placement,\n content,\n interactive,\n padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n const [, setInputPadding] = useContext(\n placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n );\n\n const ref = useRef<HTMLSpanElement>(null);\n useResizeObserver(ref, (entry) => {\n // TODO: Remove fallback once most browsers support `borderBoxSize`\n const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n if (inlineSize != null) {\n setInputPadding(inlineSize);\n } else {\n const targetStyle = getComputedStyle(entry.target);\n setInputPadding(\n entry.contentRect.width +\n Number.parseFloat(targetStyle.paddingInlineStart) +\n Number.parseFloat(targetStyle.paddingInlineEnd),\n );\n }\n });\n\n return (\n /* Prevent nested controls from being labeled redundantly */\n <FieldLabelContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={clsx(\n 'np-input-addon',\n {\n 'np-input-addon--placement-start': placement === 'start',\n 'np-input-addon--placement-end': placement === 'end',\n },\n interactive && 'np-input-addon--interactive',\n {\n 'np-input-addon--padding-sm': padding === 'sm',\n 'np-input-addon--padding-md': padding === 'md',\n },\n )}\n >\n {content}\n </span>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":";;;;;;;;;AAiBA,MAAMA,wBAAwB,gBAAGC,mBAAa,CAA0B,CAACC,SAAS,EAAE,MAAK,CAAE,CAAC,CAAC,CAAC;AAE9F,MAAMC,sBAAsB,gBAAGF,mBAAa,CAA0B,CAACC,SAAS,EAAE,MAAK,CAAE,CAAC,CAAC,CAAC;SAE5EE,gBAAgBA,GAAA;AAC9B,EAAA,MAAM,CAACC,YAAY,CAAC,GAAGC,gBAAU,CAACN,wBAAwB,CAAC;AAC3D,EAAA,MAAM,CAACO,UAAU,CAAC,GAAGD,gBAAU,CAACH,sBAAsB,CAAC;EAEvD,OAAO;AACLK,IAAAA,kBAAkB,EAAEH,YAAY;AAChCI,IAAAA,gBAAgB,EAAEF;GACW;AACjC;AAiBA,SAASG,wBAAwBA,CAAC;EAChCC,mBAAmB;AACnBC,EAAAA,OAAO,GAAGC;AAAwB,CAAA,GAIhC,EAAE,EAAA;EACJ,OAAO,MACLF,mBAAmB,IAAI,IAAI,GACvB,CAAA,KAAA,EAAQG,iCAAgB,CAACH,mBAAmB,CAAC,MAAMG,iCAAgB,CACjEC,qCAAqC,CAACH,OAAO,CAAC,CAC/C,CAAA,CAAA,CAAG,GACJV,SAAS;AACjB;AAEM,SAAUc,UAAUA,CAAC;EACzBC,UAAU;EACVC,QAAQ;EACRC,QAAQ;EACRC,SAAS;AACTC,EAAAA;AAAQ,CACQ,EAAA;AAChB,EAAA,MAAM,CAAChB,YAAY,EAAEiB,eAAe,CAAC,GAAGC,cAAQ,CAACb,wBAAwB,CAACO,UAAU,CAAC,CAAC;AACtF,EAAA,MAAM,CAACV,UAAU,EAAEiB,aAAa,CAAC,GAAGD,cAAQ,CAACb,wBAAwB,CAACQ,QAAQ,CAAC,CAAC;AAEhF,EAAA,oBACEO,cAAA,CAACzB,wBAAwB,CAAC0B,QAAQ,EAAA;AAChCC,IAAAA,KAAK,EAAEC,aAAO,CAAC,MAAM,CAACvB,YAAY,EAAEiB,eAAe,CAAC,EAAE,CAACjB,YAAY,CAAC,CAAE;AAAAgB,IAAAA,QAAA,eAEtEI,cAAA,CAACtB,sBAAsB,CAACuB,QAAQ,EAAA;AAC9BC,MAAAA,KAAK,EAAEC,aAAO,CAAC,MAAM,CAACrB,UAAU,EAAEiB,aAAa,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAE;AAAAc,MAAAA,QAAA,eAEhEQ,eAAA,CAAA,UAAA,EAAA;AAAUV,QAAAA,QAAQ,EAAEA,QAAS;AAACC,QAAAA,SAAS,EAAEU,SAAI,CAACV,SAAS,EAAE,gBAAgB,CAAE;AAAAC,QAAAA,QAAA,GACxEJ,UAAU,IAAI,IAAI,gBAAGQ,cAAA,CAACM,UAAU,EAAA;AAACC,UAAAA,SAAS,EAAC,OAAO;UAAA,GAAKf;AAAU,UAAI,GAAG,IAAI,EAC5EI,QAAQ,EACRH,QAAQ,IAAI,IAAI,gBAAGO,cAAA,CAACM,UAAU,EAAA;AAACC,UAAAA,SAAS,EAAC,KAAK;UAAA,GAAKd;UAAY,GAAG,IAAI;OAC/D;KACqB;AACnC,GAAmC,CAAC;AAExC;AAMA,MAAMH,qCAAqC,GAAG;AAC5CkB,EAAAA,IAAI,EAAE,CAAC;AACPC,EAAAA,EAAE,EAAE,MAAM;AACVC,EAAAA,EAAE,EAAE;CAGL;AAED,MAAMtB,wBAAwB,GAAG,IAAyC;AAE1E,SAASkB,UAAUA,CAAC;EAClBC,SAAS;EACTI,OAAO;EACPC,WAAW;AACXzB,EAAAA,OAAO,GAAGC;AAAwB,CAClB,EAAA;AAChB,EAAA,MAAM,GAAGyB,eAAe,CAAC,GAAGhC,gBAAU,CACpC0B,SAAS,KAAK,OAAO,GAAGhC,wBAAwB,GAAGG,sBAAsB,CAC1E;AAED,EAAA,MAAMoC,GAAG,GAAGC,YAAM,CAAkB,IAAI,CAAC;AACzCC,EAAAA,mCAAiB,CAACF,GAAG,EAAGG,KAAK,IAAI;AAC/B;IACA,MAAMC,UAAU,GAAGD,KAAK,CAACE,aAAa,GAAG,CAAC,CAAC,EAAED,UAAU;IACvD,IAAIA,UAAU,IAAI,IAAI,EAAE;MACtBL,eAAe,CAACK,UAAU,CAAC;AAC7B,IAAA,CAAC,MAAM;AACL,MAAA,MAAME,WAAW,GAAGC,gBAAgB,CAACJ,KAAK,CAACK,MAAM,CAAC;MAClDT,eAAe,CACbI,KAAK,CAACM,WAAW,CAACC,KAAK,GACrBC,MAAM,CAACC,UAAU,CAACN,WAAW,CAACrC,kBAAkB,CAAC,GACjD0C,MAAM,CAACC,UAAU,CAACN,WAAW,CAACpC,gBAAgB,CAAC,CAClD;AACH,IAAA;AACF,EAAA,CAAC,CAAC;EAEF,iFAEEgB,cAAA,CAAC2B,kCAAyB,EAAA;AAACzB,IAAAA,KAAK,EAAEzB,SAAU;IAAAmB,QAAA,eAC1CI,cAAA,CAAC4B,+BAAsB,EAAA;AAAC1B,MAAAA,KAAK,EAAEzB,SAAU;MAAAmB,QAAA,eACvCI,cAAA,CAAC6B,iCAAwB,EAAA;AAAC3B,QAAAA,KAAK,EAAEzB,SAAU;QAAAmB,QAAA,eACzCI,cAAA,CAAC8B,6BAAoB,EAAA;AAAC5B,UAAAA,KAAK,EAAEzB,SAAU;AAAAmB,UAAAA,QAAA,eACrCI,cAAA,CAAA,MAAA,EAAA;AACEc,YAAAA,GAAG,EAAEA,GAAI;AACTnB,YAAAA,SAAS,EAAEU,SAAI,CACb,gBAAgB,EAChB;cACE,iCAAiC,EAAEE,SAAS,KAAK,OAAO;cACxD,+BAA+B,EAAEA,SAAS,KAAK;aAChD,EACDK,WAAW,IAAI,6BAA6B,EAC5C;cACE,4BAA4B,EAAEzB,OAAO,KAAK,IAAI;cAC9C,4BAA4B,EAAEA,OAAO,KAAK;AAC3C,aAAA,CACD;AAAAS,YAAAA,QAAA,EAEDe;WACG;SACc;OACE;KACJ;AAC1B,GAA2B,CAAC;AAEhC;;;;;"}
|
|
@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
|
|
|
2
2
|
import { useContext, createContext, useState, useMemo, useRef } from 'react';
|
|
3
3
|
import { useResizeObserver } from '../common/hooks/useResizeObserver.mjs';
|
|
4
4
|
import { cssValueWithUnit } from '../utilities/cssValueWithUnit.mjs';
|
|
5
|
-
import {
|
|
5
|
+
import { FieldLabelContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from './contexts.mjs';
|
|
6
6
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
8
|
const InputPaddingStartContext = /*#__PURE__*/createContext([undefined, () => {}]);
|
|
@@ -72,7 +72,7 @@ function InputAddon({
|
|
|
72
72
|
setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
|
|
73
73
|
}
|
|
74
74
|
});
|
|
75
|
-
return /*#__PURE__*/ /* Prevent nested controls from being labeled redundantly */jsx(
|
|
75
|
+
return /*#__PURE__*/ /* Prevent nested controls from being labeled redundantly */jsx(FieldLabelContextProvider, {
|
|
76
76
|
value: undefined,
|
|
77
77
|
children: /*#__PURE__*/jsx(InputIdContextProvider, {
|
|
78
78
|
value: undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n
|
|
1
|
+
{"version":3,"file":"InputGroup.mjs","sources":["../../src/inputs/InputGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createContext, useContext, useMemo, useRef, useState } from 'react';\n\nimport { useResizeObserver } from '../common/hooks/useResizeObserver';\nimport { cssValueWithUnit } from '../utilities/cssValueWithUnit';\nimport {\n FieldLabelContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from './contexts';\n\ntype InputPaddingContextType = [\n number | string | undefined,\n React.Dispatch<React.SetStateAction<number | string | undefined>>,\n];\n\nconst InputPaddingStartContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nconst InputPaddingEndContext = createContext<InputPaddingContextType>([undefined, () => {}]);\n\nexport function useInputPaddings() {\n const [paddingStart] = useContext(InputPaddingStartContext);\n const [paddingEnd] = useContext(InputPaddingEndContext);\n\n return {\n paddingInlineStart: paddingStart,\n paddingInlineEnd: paddingEnd,\n } satisfies React.CSSProperties;\n}\n\ninterface InputGroupAddon {\n content: React.ReactNode;\n initialContentWidth?: number | string;\n interactive?: boolean;\n padding?: 'none' | 'sm' | 'md';\n}\n\nexport interface InputGroupProps {\n addonStart?: InputGroupAddon;\n addonEnd?: InputGroupAddon;\n disabled?: boolean;\n className?: string;\n children?: React.ReactNode;\n}\n\nfunction inputPaddingInitialState({\n initialContentWidth,\n padding = inputAddonDefaultPadding,\n}: Pick<\n InputGroupAddon,\n 'initialContentWidth' | 'padding'\n> = {}): () => InputPaddingContextType[0] {\n return () =>\n initialContentWidth != null\n ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(\n inputAddonContentWidthAddendByPadding[padding],\n )})`\n : undefined;\n}\n\nexport function InputGroup({\n addonStart,\n addonEnd,\n disabled,\n className,\n children,\n}: InputGroupProps) {\n const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));\n const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));\n\n return (\n <InputPaddingStartContext.Provider\n value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}\n >\n <InputPaddingEndContext.Provider\n value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}\n >\n <fieldset disabled={disabled} className={clsx(className, 'np-input-group')}>\n {addonStart != null ? <InputAddon placement=\"start\" {...addonStart} /> : null}\n {children}\n {addonEnd != null ? <InputAddon placement=\"end\" {...addonEnd} /> : null}\n </fieldset>\n </InputPaddingEndContext.Provider>\n </InputPaddingStartContext.Provider>\n );\n}\n\ninterface InputAddonProps extends Omit<InputGroupAddon, 'initialContentWidth'> {\n placement: 'start' | 'end';\n}\n\nconst inputAddonContentWidthAddendByPadding = {\n none: 0,\n sm: '1rem',\n md: '1.5rem',\n} satisfies {\n [key in NonNullable<InputAddonProps['padding']>]: InputPaddingContextType[0];\n};\n\nconst inputAddonDefaultPadding = 'md' satisfies InputAddonProps['padding'];\n\nfunction InputAddon({\n placement,\n content,\n interactive,\n padding = inputAddonDefaultPadding,\n}: InputAddonProps) {\n const [, setInputPadding] = useContext(\n placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext,\n );\n\n const ref = useRef<HTMLSpanElement>(null);\n useResizeObserver(ref, (entry) => {\n // TODO: Remove fallback once most browsers support `borderBoxSize`\n const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;\n if (inlineSize != null) {\n setInputPadding(inlineSize);\n } else {\n const targetStyle = getComputedStyle(entry.target);\n setInputPadding(\n entry.contentRect.width +\n Number.parseFloat(targetStyle.paddingInlineStart) +\n Number.parseFloat(targetStyle.paddingInlineEnd),\n );\n }\n });\n\n return (\n /* Prevent nested controls from being labeled redundantly */\n <FieldLabelContextProvider value={undefined}>\n <InputIdContextProvider value={undefined}>\n <InputDescribedByProvider value={undefined}>\n <InputInvalidProvider value={undefined}>\n <span\n ref={ref}\n className={clsx(\n 'np-input-addon',\n {\n 'np-input-addon--placement-start': placement === 'start',\n 'np-input-addon--placement-end': placement === 'end',\n },\n interactive && 'np-input-addon--interactive',\n {\n 'np-input-addon--padding-sm': padding === 'sm',\n 'np-input-addon--padding-md': padding === 'md',\n },\n )}\n >\n {content}\n </span>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelContextProvider>\n );\n}\n"],"names":["InputPaddingStartContext","createContext","undefined","InputPaddingEndContext","useInputPaddings","paddingStart","useContext","paddingEnd","paddingInlineStart","paddingInlineEnd","inputPaddingInitialState","initialContentWidth","padding","inputAddonDefaultPadding","cssValueWithUnit","inputAddonContentWidthAddendByPadding","InputGroup","addonStart","addonEnd","disabled","className","children","setPaddingStart","useState","setPaddingEnd","_jsx","Provider","value","useMemo","_jsxs","clsx","InputAddon","placement","none","sm","md","content","interactive","setInputPadding","ref","useRef","useResizeObserver","entry","inlineSize","borderBoxSize","targetStyle","getComputedStyle","target","contentRect","width","Number","parseFloat","FieldLabelContextProvider","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider"],"mappings":"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"}
|
|
@@ -151,6 +151,7 @@ function SelectInputClearButton({
|
|
|
151
151
|
const noop = () => {};
|
|
152
152
|
function SelectInput({
|
|
153
153
|
id: idProp,
|
|
154
|
+
parentId,
|
|
154
155
|
name,
|
|
155
156
|
multiple,
|
|
156
157
|
placeholder,
|
|
@@ -167,6 +168,7 @@ function SelectInput({
|
|
|
167
168
|
size = 'md',
|
|
168
169
|
className,
|
|
169
170
|
UNSAFE_triggerButtonProps,
|
|
171
|
+
triggerRef: externalTriggerRef,
|
|
170
172
|
onFilterChange = noop,
|
|
171
173
|
onChange,
|
|
172
174
|
onOpen,
|
|
@@ -203,7 +205,7 @@ function SelectInput({
|
|
|
203
205
|
});
|
|
204
206
|
}
|
|
205
207
|
});
|
|
206
|
-
const
|
|
208
|
+
const internalTriggerRef = React.useRef(null);
|
|
207
209
|
const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
|
|
208
210
|
const OptionsOverlay = screenSm ? _Popover.Popover : _BottomSheet.BottomSheet;
|
|
209
211
|
const searchInputRef = React.useRef(null);
|
|
@@ -260,7 +262,12 @@ function SelectInput({
|
|
|
260
262
|
value: {
|
|
261
263
|
ref: node => {
|
|
262
264
|
ref(node);
|
|
263
|
-
|
|
265
|
+
if (externalTriggerRef) {
|
|
266
|
+
// eslint-disable-next-line no-param-reassign
|
|
267
|
+
externalTriggerRef.current = node;
|
|
268
|
+
} else {
|
|
269
|
+
internalTriggerRef.current = node;
|
|
270
|
+
}
|
|
264
271
|
},
|
|
265
272
|
...inputAttributes,
|
|
266
273
|
...UNSAFE_triggerButtonProps,
|
|
@@ -284,7 +291,7 @@ function SelectInput({
|
|
|
284
291
|
placeholderShown,
|
|
285
292
|
clear: onClear != null ? () => {
|
|
286
293
|
onClear();
|
|
287
|
-
|
|
294
|
+
(externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({
|
|
288
295
|
preventScroll: true
|
|
289
296
|
});
|
|
290
297
|
} : undefined,
|
|
@@ -304,6 +311,7 @@ function SelectInput({
|
|
|
304
311
|
},
|
|
305
312
|
children: /*#__PURE__*/jsxRuntime.jsx(SelectInputOptions, {
|
|
306
313
|
id: id ? `${id}Search` : undefined,
|
|
314
|
+
parentId: parentId,
|
|
307
315
|
items: items,
|
|
308
316
|
renderValue: renderValue,
|
|
309
317
|
renderFooter: renderFooter,
|
|
@@ -381,6 +389,7 @@ const SelectInputOptionsContainer = /*#__PURE__*/React.forwardRef(function Selec
|
|
|
381
389
|
});
|
|
382
390
|
function SelectInputOptions({
|
|
383
391
|
id,
|
|
392
|
+
parentId,
|
|
384
393
|
items,
|
|
385
394
|
renderValue = String,
|
|
386
395
|
renderFooter,
|
|
@@ -504,6 +513,7 @@ function SelectInputOptions({
|
|
|
504
513
|
className: clsx.clsx('np-select-input-listbox-container', virtualized && 'np-select-input-listbox-container--virtualized', needle == null &&
|
|
505
514
|
// Groups aren't shown when filtering
|
|
506
515
|
items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
|
|
516
|
+
"data-wds-parent": parentId ?? undefined,
|
|
507
517
|
children: [resultsEmpty ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
508
518
|
id: statusId,
|
|
509
519
|
className: "np-select-input-options-status",
|