@transferwise/components 46.34.0 → 46.35.0
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/index.js +170 -192
- package/build/index.js.map +1 -1
- package/build/index.mjs +164 -186
- package/build/index.mjs.map +1 -1
- package/build/types/accordion/AccordionItem/AccordionItem.d.ts.map +1 -1
- package/build/types/common/hooks/useMedia.d.ts.map +1 -1
- package/build/types/common/panel/Panel.d.ts.map +1 -1
- package/build/types/common/responsivePanel/ResponsivePanel.d.ts.map +1 -1
- package/build/types/dimmer/Dimmer.d.ts +1 -11
- package/build/types/dimmer/Dimmer.d.ts.map +1 -1
- package/build/types/drawer/Drawer.d.ts +4 -4
- package/build/types/index.d.ts +3 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/inputs/SelectInput.d.ts.map +1 -1
- package/build/types/modal/Modal.d.ts.map +1 -1
- package/build/types/processIndicator/ProcessIndicator.d.ts +36 -19
- package/build/types/processIndicator/ProcessIndicator.d.ts.map +1 -1
- package/build/types/processIndicator/index.d.ts +2 -2
- package/build/types/processIndicator/index.d.ts.map +1 -1
- package/build/types/promoCard/PromoCard.d.ts.map +1 -1
- package/build/types/select/searchBox/SearchBox.d.ts +1 -1
- package/build/types/snackbar/Snackbar.d.ts +0 -1
- package/build/types/snackbar/Snackbar.d.ts.map +1 -1
- package/build/types/test-utils/wait.d.ts +2 -0
- package/build/types/test-utils/wait.d.ts.map +1 -0
- package/build/types/tooltip/Tooltip.d.ts +1 -1
- package/build/types/tooltip/Tooltip.d.ts.map +1 -1
- package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
- package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map +1 -1
- package/package.json +11 -15
- package/src/accordion/AccordionItem/AccordionItem.tsx +2 -4
- package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -3
- package/src/button/Button.tsx +1 -1
- package/src/common/hooks/useConditionalListener/useConditionalListener.spec.js +1 -1
- package/src/common/hooks/useHasIntersected/useHasIntersected.spec.js +3 -3
- package/src/common/hooks/useMedia.spec.ts +1 -1
- package/src/common/hooks/useMedia.ts +1 -2
- package/src/common/panel/Panel.tsx +90 -92
- package/src/common/responsivePanel/ResponsivePanel.tsx +34 -38
- package/src/dateLookup/DateLookup.rtl.spec.tsx +181 -5
- package/src/dateLookup/DateLookup.testingLibrary.spec.js +171 -124
- package/src/drawer/Drawer.js +3 -3
- package/src/field/Field.tsx +3 -3
- package/src/index.ts +3 -2
- package/src/inputs/SelectInput.story.tsx +3 -2
- package/src/inputs/SelectInput.tsx +10 -2
- package/src/modal/Modal.tsx +1 -2
- package/src/processIndicator/ProcessIndicator.rtl.spec.tsx +45 -0
- package/src/processIndicator/ProcessIndicator.tsx +110 -0
- package/src/promoCard/PromoCard.tsx +1 -2
- package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap +0 -1
- package/src/snackbar/Snackbar.spec.js +8 -2
- package/src/snackbar/Snackbar.story.tsx +3 -1
- package/src/snackbar/Snackbar.tsx +1 -1
- package/src/tabs/Tabs.spec.js +46 -27
- package/src/test-utils/index.js +5 -7
- package/src/test-utils/jest.setup.js +9 -3
- package/src/test-utils/wait.ts +7 -0
- package/src/tooltip/Tooltip.tsx +44 -46
- package/src/tooltip/__snapshots__/Tooltip.spec.tsx.snap +2 -2
- package/src/upload/Upload.spec.js +34 -13
- package/src/uploadInput/UploadInput.spec.tsx +21 -23
- package/src/uploadInput/uploadItem/UploadItem.tsx +1 -3
- package/src/withDisplayFormat/WithDisplayFormat.spec.js +63 -32
- package/src/withDisplayFormat/WithDisplayFormat.tsx +4 -6
- package/src/dateLookup/DateLookup.keyboardEvents.spec.js +0 -180
- package/src/processIndicator/ProcessIndicator.js +0 -117
- package/src/processIndicator/ProcessIndicator.spec.js +0 -101
- /package/src/processIndicator/{index.js → index.ts} +0 -0
package/build/index.mjs
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import React__default, { forwardRef, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
|
|
3
|
-
import { useId } from '@radix-ui/react-id';
|
|
2
|
+
import React__default, { forwardRef, useId, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useSyncExternalStore, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
|
|
4
3
|
import classNames from 'classnames';
|
|
5
4
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
6
|
-
import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill,
|
|
5
|
+
import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
|
|
7
6
|
import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
|
|
8
7
|
import PropTypes from 'prop-types';
|
|
9
8
|
import commonmark from 'commonmark';
|
|
@@ -11,7 +10,6 @@ import { useTheme, ThemeProvider } from '@wise/components-theming';
|
|
|
11
10
|
import { CSSTransition } from 'react-transition-group';
|
|
12
11
|
import { FocusScope } from '@react-aria/focus';
|
|
13
12
|
import { createPortal } from 'react-dom';
|
|
14
|
-
import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
|
|
15
13
|
import { isUndefined, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
|
|
16
14
|
import { formatDate, formatMoney, formatAmount } from '@transferwise/formatting';
|
|
17
15
|
import { Transition, Listbox } from '@headlessui/react';
|
|
@@ -20,6 +18,7 @@ import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, Floa
|
|
|
20
18
|
import { usePreventScroll } from '@react-aria/overlays';
|
|
21
19
|
import { usePopper } from 'react-popper';
|
|
22
20
|
import { Flag, Illustration } from '@wise/art';
|
|
21
|
+
import { useId as useId$1 } from '@radix-ui/react-id';
|
|
23
22
|
import clamp$2 from 'lodash.clamp';
|
|
24
23
|
import debounce from 'lodash.debounce';
|
|
25
24
|
import requiredIf from 'react-required-if';
|
|
@@ -1251,68 +1250,67 @@ const radius = {
|
|
|
1251
1250
|
};
|
|
1252
1251
|
const ANIMATION_DURATION_IN_MS = 1500;
|
|
1253
1252
|
class ProcessIndicator extends Component {
|
|
1253
|
+
static defaultProps = {
|
|
1254
|
+
status: 'processing',
|
|
1255
|
+
size: 'sm'
|
|
1256
|
+
};
|
|
1257
|
+
interval = 0;
|
|
1258
|
+
timeout = 0;
|
|
1254
1259
|
constructor(props) {
|
|
1255
1260
|
super(props);
|
|
1256
1261
|
this.state = {
|
|
1257
1262
|
status: props.status,
|
|
1258
1263
|
size: props.size
|
|
1259
1264
|
};
|
|
1260
|
-
this.interval = null;
|
|
1261
|
-
this.timeout = null;
|
|
1262
1265
|
}
|
|
1263
|
-
|
|
1264
1266
|
/**
|
|
1265
1267
|
* Create interval for animation duration (1500ms)
|
|
1266
1268
|
* Update state only at the end of every interval
|
|
1267
1269
|
* (end of animation loop) if props changed before end of animation
|
|
1268
1270
|
*/
|
|
1269
1271
|
componentDidMount() {
|
|
1270
|
-
this.interval = setInterval(() => {
|
|
1271
|
-
const
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1272
|
+
this.interval = window.setInterval(() => {
|
|
1273
|
+
const {
|
|
1274
|
+
status: targetStatus,
|
|
1275
|
+
size: targetSize,
|
|
1276
|
+
onAnimationCompleted
|
|
1277
|
+
} = this.props;
|
|
1278
|
+
const {
|
|
1279
|
+
status: currentStatus,
|
|
1280
|
+
size: currentSize
|
|
1281
|
+
} = this.state;
|
|
1282
|
+
if (currentStatus !== targetStatus) {
|
|
1276
1283
|
this.setState({
|
|
1277
|
-
status:
|
|
1278
|
-
},
|
|
1284
|
+
status: targetStatus
|
|
1285
|
+
}, () => {
|
|
1286
|
+
if (onAnimationCompleted) {
|
|
1287
|
+
this.timeout = window.setTimeout(() => {
|
|
1288
|
+
onAnimationCompleted(targetStatus);
|
|
1289
|
+
}, ANIMATION_DURATION_IN_MS);
|
|
1290
|
+
}
|
|
1291
|
+
});
|
|
1279
1292
|
}
|
|
1280
|
-
if (
|
|
1293
|
+
if (currentSize !== targetSize) {
|
|
1281
1294
|
this.setState({
|
|
1282
|
-
size:
|
|
1295
|
+
size: targetSize
|
|
1283
1296
|
});
|
|
1284
1297
|
}
|
|
1285
1298
|
}, ANIMATION_DURATION_IN_MS);
|
|
1286
1299
|
}
|
|
1287
|
-
|
|
1288
1300
|
/**
|
|
1289
1301
|
* Only trigger render if comopnent's state got
|
|
1290
1302
|
* updated from interval callback
|
|
1291
|
-
*
|
|
1292
|
-
* @param nextProps
|
|
1293
|
-
* @param nextState
|
|
1294
1303
|
*/
|
|
1295
1304
|
shouldComponentUpdate(nextProps, nextState) {
|
|
1296
1305
|
const isSameStatus = nextProps.status === nextState.status;
|
|
1297
1306
|
const isSameSize = nextProps.size === nextState.size;
|
|
1298
1307
|
return isSameStatus && isSameSize;
|
|
1299
1308
|
}
|
|
1300
|
-
|
|
1301
1309
|
// Clear interval before destroying component
|
|
1302
1310
|
componentWillUnmount() {
|
|
1303
|
-
clearInterval(this.interval);
|
|
1304
|
-
clearTimeout(this.timeout);
|
|
1311
|
+
window.clearInterval(this.interval);
|
|
1312
|
+
window.clearTimeout(this.timeout);
|
|
1305
1313
|
}
|
|
1306
|
-
runCallBack = statusFromProps => {
|
|
1307
|
-
const {
|
|
1308
|
-
onAnimationCompleted
|
|
1309
|
-
} = this.props;
|
|
1310
|
-
if (onAnimationCompleted) {
|
|
1311
|
-
this.timeouts = setTimeout(() => {
|
|
1312
|
-
onAnimationCompleted(statusFromProps);
|
|
1313
|
-
}, ANIMATION_DURATION_IN_MS);
|
|
1314
|
-
}
|
|
1315
|
-
};
|
|
1316
1314
|
render() {
|
|
1317
1315
|
const {
|
|
1318
1316
|
className,
|
|
@@ -1343,28 +1341,13 @@ class ProcessIndicator extends Component {
|
|
|
1343
1341
|
className: "process-circle",
|
|
1344
1342
|
cx: "50%",
|
|
1345
1343
|
cy: "50%",
|
|
1346
|
-
r: radius[
|
|
1344
|
+
r: radius[size],
|
|
1347
1345
|
fillOpacity: "0.0"
|
|
1348
1346
|
})
|
|
1349
1347
|
})]
|
|
1350
1348
|
});
|
|
1351
1349
|
}
|
|
1352
1350
|
}
|
|
1353
|
-
ProcessIndicator.propTypes = {
|
|
1354
|
-
status: PropTypes.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
|
|
1355
|
-
size: PropTypes.oneOf(['xxs', 'xs', 'sm', 'xl']),
|
|
1356
|
-
onAnimationCompleted: PropTypes.func,
|
|
1357
|
-
className: PropTypes.string,
|
|
1358
|
-
'data-testid': PropTypes.string
|
|
1359
|
-
};
|
|
1360
|
-
ProcessIndicator.defaultProps = {
|
|
1361
|
-
status: Status.PROCESSING,
|
|
1362
|
-
size: Size.SMALL,
|
|
1363
|
-
onAnimationCompleted: null,
|
|
1364
|
-
className: undefined,
|
|
1365
|
-
'data-testid': null
|
|
1366
|
-
};
|
|
1367
|
-
var ProcessIndicator$1 = ProcessIndicator;
|
|
1368
1351
|
|
|
1369
1352
|
var messages$b = defineMessages({
|
|
1370
1353
|
loadingAriaLabel: {
|
|
@@ -1486,7 +1469,7 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
1486
1469
|
...props,
|
|
1487
1470
|
"aria-live": loading ? 'polite' : 'off',
|
|
1488
1471
|
"aria-label": loading ? intl.formatMessage(messages$b.loadingAriaLabel) : rest['aria-label'],
|
|
1489
|
-
children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator
|
|
1472
|
+
children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator, {
|
|
1490
1473
|
size: processIndicatorSize(),
|
|
1491
1474
|
className: "btn-loader"
|
|
1492
1475
|
})]
|
|
@@ -1637,7 +1620,6 @@ const useHasIntersected = ({
|
|
|
1637
1620
|
return [hasIntersected];
|
|
1638
1621
|
};
|
|
1639
1622
|
|
|
1640
|
-
// eslint-disable-next-line import/extensions
|
|
1641
1623
|
function useMedia(query) {
|
|
1642
1624
|
return useSyncExternalStore(onStoreChange => {
|
|
1643
1625
|
const mediaQueryList = window.matchMedia(query);
|
|
@@ -2849,12 +2831,12 @@ Drawer.propTypes = {
|
|
|
2849
2831
|
footerContent: PropTypes.node,
|
|
2850
2832
|
/** The content to appear in the drawer header. */
|
|
2851
2833
|
headerTitle: PropTypes.node,
|
|
2852
|
-
/** The action to perform on close click. */
|
|
2853
|
-
onClose: PropTypes.func,
|
|
2854
2834
|
/** The status of Drawer either open or not. */
|
|
2855
2835
|
open: PropTypes.bool,
|
|
2856
2836
|
/** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
|
|
2857
|
-
position: PropTypes.oneOf(['left', 'right', 'bottom'])
|
|
2837
|
+
position: PropTypes.oneOf(['left', 'right', 'bottom']),
|
|
2838
|
+
/** The action to perform on close click. */
|
|
2839
|
+
onClose: PropTypes.func
|
|
2858
2840
|
};
|
|
2859
2841
|
Drawer.defaultProps = {
|
|
2860
2842
|
children: null,
|
|
@@ -3529,7 +3511,7 @@ const fallbackPlacements = {
|
|
|
3529
3511
|
[Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
|
|
3530
3512
|
[Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM]
|
|
3531
3513
|
};
|
|
3532
|
-
const Panel = /*#__PURE__*/forwardRef(({
|
|
3514
|
+
const Panel = /*#__PURE__*/forwardRef(function Panel({
|
|
3533
3515
|
arrow = false,
|
|
3534
3516
|
flip = true,
|
|
3535
3517
|
altAxis = false,
|
|
@@ -3540,7 +3522,7 @@ const Panel = /*#__PURE__*/forwardRef(({
|
|
|
3540
3522
|
anchorRef,
|
|
3541
3523
|
anchorWidth = false,
|
|
3542
3524
|
...rest
|
|
3543
|
-
}, reference)
|
|
3525
|
+
}, reference) {
|
|
3544
3526
|
const [arrowElement, setArrowElement] = useState(null);
|
|
3545
3527
|
const [popperElement, setPopperElement] = useState(null);
|
|
3546
3528
|
const modifiers = [];
|
|
@@ -3618,7 +3600,7 @@ const Panel = /*#__PURE__*/forwardRef(({
|
|
|
3618
3600
|
...attributes.popper,
|
|
3619
3601
|
className: classNames('np-panel', {
|
|
3620
3602
|
'np-panel--open': open
|
|
3621
|
-
}, rest
|
|
3603
|
+
}, rest.className),
|
|
3622
3604
|
children: /*#__PURE__*/jsxs("div", {
|
|
3623
3605
|
ref: reference
|
|
3624
3606
|
/* eslint-disable-next-line react/forbid-dom-props */,
|
|
@@ -3637,7 +3619,7 @@ const Panel = /*#__PURE__*/forwardRef(({
|
|
|
3637
3619
|
});
|
|
3638
3620
|
var Panel$1 = Panel;
|
|
3639
3621
|
|
|
3640
|
-
const ResponsivePanel = /*#__PURE__*/forwardRef(({
|
|
3622
|
+
const ResponsivePanel = /*#__PURE__*/forwardRef(function ResponsivePanel({
|
|
3641
3623
|
anchorRef,
|
|
3642
3624
|
arrow = false,
|
|
3643
3625
|
flip = true,
|
|
@@ -3646,7 +3628,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(({
|
|
|
3646
3628
|
onClose,
|
|
3647
3629
|
open = false,
|
|
3648
3630
|
position = Position.BOTTOM
|
|
3649
|
-
}, reference)
|
|
3631
|
+
}, reference) {
|
|
3650
3632
|
const {
|
|
3651
3633
|
isMobile
|
|
3652
3634
|
} = useLayout();
|
|
@@ -4985,6 +4967,84 @@ const Emphasis = ({
|
|
|
4985
4967
|
}) : null;
|
|
4986
4968
|
};
|
|
4987
4969
|
|
|
4970
|
+
function InlineAlert({
|
|
4971
|
+
id,
|
|
4972
|
+
type = 'neutral',
|
|
4973
|
+
className,
|
|
4974
|
+
children
|
|
4975
|
+
}) {
|
|
4976
|
+
const danger = type === 'negative' || type === 'error';
|
|
4977
|
+
return /*#__PURE__*/jsxs("div", {
|
|
4978
|
+
role: "alert",
|
|
4979
|
+
id: id,
|
|
4980
|
+
className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
|
|
4981
|
+
children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
|
|
4982
|
+
children: children
|
|
4983
|
+
})]
|
|
4984
|
+
});
|
|
4985
|
+
}
|
|
4986
|
+
|
|
4987
|
+
const Label = ({
|
|
4988
|
+
id,
|
|
4989
|
+
htmlFor,
|
|
4990
|
+
className,
|
|
4991
|
+
children
|
|
4992
|
+
}) => {
|
|
4993
|
+
return /*#__PURE__*/jsx("label", {
|
|
4994
|
+
id: id,
|
|
4995
|
+
htmlFor: htmlFor,
|
|
4996
|
+
className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
|
|
4997
|
+
children: children
|
|
4998
|
+
});
|
|
4999
|
+
};
|
|
5000
|
+
|
|
5001
|
+
const Field = ({
|
|
5002
|
+
id,
|
|
5003
|
+
label,
|
|
5004
|
+
hint,
|
|
5005
|
+
error,
|
|
5006
|
+
className,
|
|
5007
|
+
children
|
|
5008
|
+
}) => {
|
|
5009
|
+
const hasError = Boolean(error);
|
|
5010
|
+
const hasHint = Boolean(hint) && !hasError;
|
|
5011
|
+
const labelId = useId();
|
|
5012
|
+
const fallbackInputId = useId();
|
|
5013
|
+
const inputId = id !== null ? id ?? fallbackInputId : undefined;
|
|
5014
|
+
const descriptionId = useId();
|
|
5015
|
+
return /*#__PURE__*/jsx(FieldLabelIdContextProvider, {
|
|
5016
|
+
value: labelId,
|
|
5017
|
+
children: /*#__PURE__*/jsx(InputIdContextProvider, {
|
|
5018
|
+
value: inputId,
|
|
5019
|
+
children: /*#__PURE__*/jsx(InputDescribedByProvider, {
|
|
5020
|
+
value: hasError || hasHint ? descriptionId : undefined,
|
|
5021
|
+
children: /*#__PURE__*/jsx(InputInvalidProvider, {
|
|
5022
|
+
value: hasError,
|
|
5023
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
5024
|
+
className: classNames('form-group d-block', {
|
|
5025
|
+
'has-error': hasError,
|
|
5026
|
+
'has-info': hasHint
|
|
5027
|
+
}, className),
|
|
5028
|
+
children: [/*#__PURE__*/jsxs(Label, {
|
|
5029
|
+
id: labelId,
|
|
5030
|
+
htmlFor: inputId,
|
|
5031
|
+
children: [label, children]
|
|
5032
|
+
}), hasHint && /*#__PURE__*/jsx(InlineAlert, {
|
|
5033
|
+
type: Sentiment.NEUTRAL,
|
|
5034
|
+
id: descriptionId,
|
|
5035
|
+
children: hint
|
|
5036
|
+
}), hasError && /*#__PURE__*/jsx(InlineAlert, {
|
|
5037
|
+
type: Sentiment.NEGATIVE,
|
|
5038
|
+
id: descriptionId,
|
|
5039
|
+
children: error
|
|
5040
|
+
})]
|
|
5041
|
+
})
|
|
5042
|
+
})
|
|
5043
|
+
})
|
|
5044
|
+
})
|
|
5045
|
+
});
|
|
5046
|
+
};
|
|
5047
|
+
|
|
4988
5048
|
const FlowHeader = /*#__PURE__*/React.forwardRef(({
|
|
4989
5049
|
bottomContent,
|
|
4990
5050
|
className,
|
|
@@ -5231,42 +5291,40 @@ const Tooltip = ({
|
|
|
5231
5291
|
forceUpdate();
|
|
5232
5292
|
}
|
|
5233
5293
|
}, [open]);
|
|
5234
|
-
return /*#__PURE__*/
|
|
5235
|
-
|
|
5236
|
-
|
|
5237
|
-
|
|
5238
|
-
|
|
5239
|
-
|
|
5240
|
-
|
|
5241
|
-
|
|
5242
|
-
|
|
5243
|
-
|
|
5244
|
-
|
|
5245
|
-
|
|
5246
|
-
|
|
5247
|
-
|
|
5248
|
-
|
|
5249
|
-
|
|
5250
|
-
|
|
5251
|
-
|
|
5252
|
-
|
|
5253
|
-
|
|
5254
|
-
|
|
5255
|
-
|
|
5256
|
-
|
|
5257
|
-
|
|
5258
|
-
|
|
5259
|
-
|
|
5260
|
-
|
|
5261
|
-
|
|
5262
|
-
|
|
5263
|
-
|
|
5264
|
-
|
|
5265
|
-
|
|
5266
|
-
|
|
5267
|
-
|
|
5268
|
-
})]
|
|
5269
|
-
})
|
|
5294
|
+
return /*#__PURE__*/jsxs("span", {
|
|
5295
|
+
ref: anchorReference,
|
|
5296
|
+
className: "tw-tooltip-container",
|
|
5297
|
+
onMouseOver: () => setOpen(true),
|
|
5298
|
+
onFocus: () => setOpen(true),
|
|
5299
|
+
onMouseOut: () => setOpen(false),
|
|
5300
|
+
onBlur: () => setOpen(false),
|
|
5301
|
+
children: [children ? /*#__PURE__*/cloneElement(children, {
|
|
5302
|
+
'aria-describedby': `${tooltipId}-tooltip`
|
|
5303
|
+
}) : null, /*#__PURE__*/jsx("div", {
|
|
5304
|
+
// @ts-expect-error
|
|
5305
|
+
ref: setPopperElement,
|
|
5306
|
+
className: classNames('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
|
|
5307
|
+
// eslint-disable-next-line react/forbid-dom-props
|
|
5308
|
+
,
|
|
5309
|
+
style: {
|
|
5310
|
+
...styles.popper
|
|
5311
|
+
},
|
|
5312
|
+
...attributes.popper,
|
|
5313
|
+
"aria-hidden": !open,
|
|
5314
|
+
role: "tooltip",
|
|
5315
|
+
id: `${tooltipId}-tooltip`,
|
|
5316
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
5317
|
+
className: "np-panel__content tooltip-inner",
|
|
5318
|
+
children: [label, /*#__PURE__*/jsx("div", {
|
|
5319
|
+
// @ts-expect-error
|
|
5320
|
+
ref: setArrowElement,
|
|
5321
|
+
className: classNames('np-panel__arrow')
|
|
5322
|
+
// eslint-disable-next-line react/forbid-dom-props
|
|
5323
|
+
,
|
|
5324
|
+
style: styles.arrow
|
|
5325
|
+
})]
|
|
5326
|
+
})
|
|
5327
|
+
})]
|
|
5270
5328
|
});
|
|
5271
5329
|
};
|
|
5272
5330
|
|
|
@@ -5464,84 +5522,6 @@ const FlowNavigation = ({
|
|
|
5464
5522
|
});
|
|
5465
5523
|
};
|
|
5466
5524
|
|
|
5467
|
-
function InlineAlert({
|
|
5468
|
-
id,
|
|
5469
|
-
type = 'neutral',
|
|
5470
|
-
className,
|
|
5471
|
-
children
|
|
5472
|
-
}) {
|
|
5473
|
-
const danger = type === 'negative' || type === 'error';
|
|
5474
|
-
return /*#__PURE__*/jsxs("div", {
|
|
5475
|
-
role: "alert",
|
|
5476
|
-
id: id,
|
|
5477
|
-
className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
|
|
5478
|
-
children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
|
|
5479
|
-
children: children
|
|
5480
|
-
})]
|
|
5481
|
-
});
|
|
5482
|
-
}
|
|
5483
|
-
|
|
5484
|
-
const Label = ({
|
|
5485
|
-
id,
|
|
5486
|
-
htmlFor,
|
|
5487
|
-
className,
|
|
5488
|
-
children
|
|
5489
|
-
}) => {
|
|
5490
|
-
return /*#__PURE__*/jsx("label", {
|
|
5491
|
-
id: id,
|
|
5492
|
-
htmlFor: htmlFor,
|
|
5493
|
-
className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
|
|
5494
|
-
children: children
|
|
5495
|
-
});
|
|
5496
|
-
};
|
|
5497
|
-
|
|
5498
|
-
const Field = ({
|
|
5499
|
-
id,
|
|
5500
|
-
label,
|
|
5501
|
-
hint,
|
|
5502
|
-
error,
|
|
5503
|
-
className,
|
|
5504
|
-
children
|
|
5505
|
-
}) => {
|
|
5506
|
-
const hasError = Boolean(error);
|
|
5507
|
-
const hasHint = Boolean(hint) && !hasError;
|
|
5508
|
-
const labelId = useId();
|
|
5509
|
-
const fallbackInputId = useId(); // TODO: Use `React.useId()` when react>=18
|
|
5510
|
-
const inputId = id !== null ? id ?? fallbackInputId : undefined;
|
|
5511
|
-
const descriptionId = useId(); // TODO: Use `React.useId()` when react>=18
|
|
5512
|
-
return /*#__PURE__*/jsx(FieldLabelIdContextProvider, {
|
|
5513
|
-
value: labelId,
|
|
5514
|
-
children: /*#__PURE__*/jsx(InputIdContextProvider, {
|
|
5515
|
-
value: inputId,
|
|
5516
|
-
children: /*#__PURE__*/jsx(InputDescribedByProvider, {
|
|
5517
|
-
value: hasError || hasHint ? descriptionId : undefined,
|
|
5518
|
-
children: /*#__PURE__*/jsx(InputInvalidProvider, {
|
|
5519
|
-
value: hasError,
|
|
5520
|
-
children: /*#__PURE__*/jsxs("div", {
|
|
5521
|
-
className: classNames('form-group d-block', {
|
|
5522
|
-
'has-error': hasError,
|
|
5523
|
-
'has-info': hasHint
|
|
5524
|
-
}, className),
|
|
5525
|
-
children: [/*#__PURE__*/jsxs(Label, {
|
|
5526
|
-
id: labelId,
|
|
5527
|
-
htmlFor: inputId,
|
|
5528
|
-
children: [label, children]
|
|
5529
|
-
}), hasHint && /*#__PURE__*/jsx(InlineAlert, {
|
|
5530
|
-
type: Sentiment.NEUTRAL,
|
|
5531
|
-
id: descriptionId,
|
|
5532
|
-
children: hint
|
|
5533
|
-
}), hasError && /*#__PURE__*/jsx(InlineAlert, {
|
|
5534
|
-
type: Sentiment.NEGATIVE,
|
|
5535
|
-
id: descriptionId,
|
|
5536
|
-
children: error
|
|
5537
|
-
})]
|
|
5538
|
-
})
|
|
5539
|
-
})
|
|
5540
|
-
})
|
|
5541
|
-
})
|
|
5542
|
-
});
|
|
5543
|
-
};
|
|
5544
|
-
|
|
5545
5525
|
const HeaderAction = ({
|
|
5546
5526
|
action
|
|
5547
5527
|
}) => {
|
|
@@ -6151,10 +6131,9 @@ class WithDisplayFormat extends Component {
|
|
|
6151
6131
|
return 'Backspace';
|
|
6152
6132
|
}
|
|
6153
6133
|
return triggerEvent.key;
|
|
6154
|
-
} else {
|
|
6155
|
-
// triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
|
|
6156
|
-
return 'Paste';
|
|
6157
6134
|
}
|
|
6135
|
+
// triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
|
|
6136
|
+
return 'Paste';
|
|
6158
6137
|
};
|
|
6159
6138
|
resetEvent = () => {
|
|
6160
6139
|
this.setState({
|
|
@@ -6307,11 +6286,10 @@ class WithDisplayFormat extends Component {
|
|
|
6307
6286
|
selectionEnd,
|
|
6308
6287
|
pastedLength
|
|
6309
6288
|
} = this.state;
|
|
6289
|
+
const target = triggerEvent?.currentTarget;
|
|
6310
6290
|
const cursorPosition = getCursorPositionAfterActionStroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
|
|
6311
6291
|
setTimeout(() => {
|
|
6312
|
-
|
|
6313
|
-
triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
|
|
6314
|
-
}
|
|
6292
|
+
target?.setSelectionRange(cursorPosition, cursorPosition);
|
|
6315
6293
|
this.setState({
|
|
6316
6294
|
selectionStart: cursorPosition,
|
|
6317
6295
|
selectionEnd: cursorPosition
|
|
@@ -10142,7 +10120,7 @@ function Select({
|
|
|
10142
10120
|
}, [defaultOptions, search, searchValue]);
|
|
10143
10121
|
const selectableOptions = useMemo(() => options.filter(isActionableOption), [options]);
|
|
10144
10122
|
const focusedOption = selectableOptions[keyboardFocusedOptionIndex];
|
|
10145
|
-
const fallbackButtonId = useId();
|
|
10123
|
+
const fallbackButtonId = useId$1();
|
|
10146
10124
|
const computedId = id || inputAttributes.id || fallbackButtonId;
|
|
10147
10125
|
const listboxId = `${computedId}-listbox`;
|
|
10148
10126
|
const searchBoxId = `${computedId}-searchbox`;
|
|
@@ -12604,7 +12582,7 @@ const ProcessingStep = props => {
|
|
|
12604
12582
|
"aria-hidden": isComplete,
|
|
12605
12583
|
children: /*#__PURE__*/jsxs("div", {
|
|
12606
12584
|
className: "droppable-card-content",
|
|
12607
|
-
children: [/*#__PURE__*/jsx(ProcessIndicator
|
|
12585
|
+
children: [/*#__PURE__*/jsx(ProcessIndicator, {
|
|
12608
12586
|
size: Size.Small,
|
|
12609
12587
|
status: processStatus,
|
|
12610
12588
|
onAnimationCompleted: status => onAnimationCompleted(status)
|
|
@@ -13427,7 +13405,7 @@ const UploadItem = ({
|
|
|
13427
13405
|
switch (status) {
|
|
13428
13406
|
case Status.PROCESSING:
|
|
13429
13407
|
case Status.PENDING:
|
|
13430
|
-
processIndicator = /*#__PURE__*/jsx(ProcessIndicator
|
|
13408
|
+
processIndicator = /*#__PURE__*/jsx(ProcessIndicator, {
|
|
13431
13409
|
size: Size.EXTRA_SMALL,
|
|
13432
13410
|
status: Status.PROCESSING
|
|
13433
13411
|
});
|
|
@@ -13438,7 +13416,7 @@ const UploadItem = ({
|
|
|
13438
13416
|
processIndicator = isModern ? /*#__PURE__*/jsx(StatusIcon, {
|
|
13439
13417
|
size: Size.SMALL,
|
|
13440
13418
|
sentiment: Sentiment.POSITIVE
|
|
13441
|
-
}) : /*#__PURE__*/jsx(ProcessIndicator
|
|
13419
|
+
}) : /*#__PURE__*/jsx(ProcessIndicator, {
|
|
13442
13420
|
size: Size.EXTRA_SMALL,
|
|
13443
13421
|
status: Status.SUCCEEDED
|
|
13444
13422
|
});
|
|
@@ -13453,7 +13431,7 @@ const UploadItem = ({
|
|
|
13453
13431
|
children: processIndicator
|
|
13454
13432
|
}); // Scale down ProcessIndicator to be 20px*20px to match `icons`
|
|
13455
13433
|
};
|
|
13456
|
-
const getErrorMessage = () => typeof error === 'object'
|
|
13434
|
+
const getErrorMessage = () => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
|
|
13457
13435
|
const getDescription = () => {
|
|
13458
13436
|
if (error || status === Status.FAILED) {
|
|
13459
13437
|
return /*#__PURE__*/jsx(Body, {
|
|
@@ -14790,5 +14768,5 @@ const translations = {
|
|
|
14790
14768
|
'zh-HK': zhHK
|
|
14791
14769
|
};
|
|
14792
14770
|
|
|
14793
|
-
export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$2 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$1 as Card, Carousel, Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator
|
|
14771
|
+
export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$2 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$1 as Card, Carousel, Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCardGroup$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead$1 as Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
|
|
14794
14772
|
//# sourceMappingURL=index.mjs.map
|