@transferwise/components 0.0.0-experimental-3fa5a2b → 0.0.0-experimental-47ae02a
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 -193
- package/build/index.js.map +1 -1
- package/build/index.mjs +163 -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/dateLookup/DateLookup.d.ts +5 -6
- package/build/types/dateLookup/DateLookup.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/inputWithDisplayFormat/InputWithDisplayFormat.d.ts +2 -1
- package/build/types/inputWithDisplayFormat/InputWithDisplayFormat.d.ts.map +1 -1
- package/build/types/inputs/SelectInput.d.ts.map +1 -1
- package/build/types/inputs/contexts.d.ts +2 -2
- package/build/types/inputs/contexts.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/textareaWithDisplayFormat/TextareaWithDisplayFormat.d.ts +2 -1
- package/build/types/textareaWithDisplayFormat/TextareaWithDisplayFormat.d.ts.map +1 -1
- 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 +14 -14
- package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map +1 -1
- package/package.json +7 -11
- 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/dateLookup/DateLookup.tsx +9 -14
- package/src/drawer/Drawer.js +3 -3
- package/src/field/Field.tsx +3 -3
- package/src/index.ts +3 -2
- package/src/inputWithDisplayFormat/InputWithDisplayFormat.tsx +2 -1
- package/src/inputs/SelectInput.story.tsx +1 -0
- package/src/inputs/SelectInput.tsx +10 -2
- package/src/inputs/contexts.tsx +4 -4
- 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 +4 -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/textareaWithDisplayFormat/TextareaWithDisplayFormat.tsx +2 -1
- 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/utilities/logActionRequired.js +1 -1
- package/src/withDisplayFormat/WithDisplayFormat.spec.js +63 -32
- package/src/withDisplayFormat/WithDisplayFormat.tsx +28 -28
- 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, useCallback, createContext, useContext, 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, useCallback, createContext, useContext, useSyncExternalStore, 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, AlertCircleFill,
|
|
5
|
+
import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, AlertCircleFill, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, 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';
|
|
@@ -796,7 +794,7 @@ function Title({
|
|
|
796
794
|
}
|
|
797
795
|
|
|
798
796
|
function logActionRequired(message) {
|
|
799
|
-
if (
|
|
797
|
+
if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
|
|
800
798
|
// eslint-disable-next-line no-console
|
|
801
799
|
console.warn(message);
|
|
802
800
|
}
|
|
@@ -1238,68 +1236,67 @@ const radius = {
|
|
|
1238
1236
|
};
|
|
1239
1237
|
const ANIMATION_DURATION_IN_MS = 1500;
|
|
1240
1238
|
class ProcessIndicator extends Component {
|
|
1239
|
+
static defaultProps = {
|
|
1240
|
+
status: 'processing',
|
|
1241
|
+
size: 'sm'
|
|
1242
|
+
};
|
|
1243
|
+
interval = 0;
|
|
1244
|
+
timeout = 0;
|
|
1241
1245
|
constructor(props) {
|
|
1242
1246
|
super(props);
|
|
1243
1247
|
this.state = {
|
|
1244
1248
|
status: props.status,
|
|
1245
1249
|
size: props.size
|
|
1246
1250
|
};
|
|
1247
|
-
this.interval = null;
|
|
1248
|
-
this.timeout = null;
|
|
1249
1251
|
}
|
|
1250
|
-
|
|
1251
1252
|
/**
|
|
1252
1253
|
* Create interval for animation duration (1500ms)
|
|
1253
1254
|
* Update state only at the end of every interval
|
|
1254
1255
|
* (end of animation loop) if props changed before end of animation
|
|
1255
1256
|
*/
|
|
1256
1257
|
componentDidMount() {
|
|
1257
|
-
this.interval = setInterval(() => {
|
|
1258
|
-
const
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1258
|
+
this.interval = window.setInterval(() => {
|
|
1259
|
+
const {
|
|
1260
|
+
status: targetStatus,
|
|
1261
|
+
size: targetSize,
|
|
1262
|
+
onAnimationCompleted
|
|
1263
|
+
} = this.props;
|
|
1264
|
+
const {
|
|
1265
|
+
status: currentStatus,
|
|
1266
|
+
size: currentSize
|
|
1267
|
+
} = this.state;
|
|
1268
|
+
if (currentStatus !== targetStatus) {
|
|
1263
1269
|
this.setState({
|
|
1264
|
-
status:
|
|
1265
|
-
},
|
|
1270
|
+
status: targetStatus
|
|
1271
|
+
}, () => {
|
|
1272
|
+
if (onAnimationCompleted) {
|
|
1273
|
+
this.timeout = window.setTimeout(() => {
|
|
1274
|
+
onAnimationCompleted(targetStatus);
|
|
1275
|
+
}, ANIMATION_DURATION_IN_MS);
|
|
1276
|
+
}
|
|
1277
|
+
});
|
|
1266
1278
|
}
|
|
1267
|
-
if (
|
|
1279
|
+
if (currentSize !== targetSize) {
|
|
1268
1280
|
this.setState({
|
|
1269
|
-
size:
|
|
1281
|
+
size: targetSize
|
|
1270
1282
|
});
|
|
1271
1283
|
}
|
|
1272
1284
|
}, ANIMATION_DURATION_IN_MS);
|
|
1273
1285
|
}
|
|
1274
|
-
|
|
1275
1286
|
/**
|
|
1276
1287
|
* Only trigger render if comopnent's state got
|
|
1277
1288
|
* updated from interval callback
|
|
1278
|
-
*
|
|
1279
|
-
* @param nextProps
|
|
1280
|
-
* @param nextState
|
|
1281
1289
|
*/
|
|
1282
1290
|
shouldComponentUpdate(nextProps, nextState) {
|
|
1283
1291
|
const isSameStatus = nextProps.status === nextState.status;
|
|
1284
1292
|
const isSameSize = nextProps.size === nextState.size;
|
|
1285
1293
|
return isSameStatus && isSameSize;
|
|
1286
1294
|
}
|
|
1287
|
-
|
|
1288
1295
|
// Clear interval before destroying component
|
|
1289
1296
|
componentWillUnmount() {
|
|
1290
|
-
clearInterval(this.interval);
|
|
1291
|
-
clearTimeout(this.timeout);
|
|
1297
|
+
window.clearInterval(this.interval);
|
|
1298
|
+
window.clearTimeout(this.timeout);
|
|
1292
1299
|
}
|
|
1293
|
-
runCallBack = statusFromProps => {
|
|
1294
|
-
const {
|
|
1295
|
-
onAnimationCompleted
|
|
1296
|
-
} = this.props;
|
|
1297
|
-
if (onAnimationCompleted) {
|
|
1298
|
-
this.timeouts = setTimeout(() => {
|
|
1299
|
-
onAnimationCompleted(statusFromProps);
|
|
1300
|
-
}, ANIMATION_DURATION_IN_MS);
|
|
1301
|
-
}
|
|
1302
|
-
};
|
|
1303
1300
|
render() {
|
|
1304
1301
|
const {
|
|
1305
1302
|
className,
|
|
@@ -1330,28 +1327,13 @@ class ProcessIndicator extends Component {
|
|
|
1330
1327
|
className: "process-circle",
|
|
1331
1328
|
cx: "50%",
|
|
1332
1329
|
cy: "50%",
|
|
1333
|
-
r: radius[
|
|
1330
|
+
r: radius[size],
|
|
1334
1331
|
fillOpacity: "0.0"
|
|
1335
1332
|
})
|
|
1336
1333
|
})]
|
|
1337
1334
|
});
|
|
1338
1335
|
}
|
|
1339
1336
|
}
|
|
1340
|
-
ProcessIndicator.propTypes = {
|
|
1341
|
-
status: PropTypes.oneOf(['processing', 'failed', 'succeeded', 'hidden']),
|
|
1342
|
-
size: PropTypes.oneOf(['xxs', 'xs', 'sm', 'xl']),
|
|
1343
|
-
onAnimationCompleted: PropTypes.func,
|
|
1344
|
-
className: PropTypes.string,
|
|
1345
|
-
'data-testid': PropTypes.string
|
|
1346
|
-
};
|
|
1347
|
-
ProcessIndicator.defaultProps = {
|
|
1348
|
-
status: Status.PROCESSING,
|
|
1349
|
-
size: Size.SMALL,
|
|
1350
|
-
onAnimationCompleted: null,
|
|
1351
|
-
className: undefined,
|
|
1352
|
-
'data-testid': null
|
|
1353
|
-
};
|
|
1354
|
-
var ProcessIndicator$1 = ProcessIndicator;
|
|
1355
1337
|
|
|
1356
1338
|
var messages$b = defineMessages({
|
|
1357
1339
|
loadingAriaLabel: {
|
|
@@ -1473,7 +1455,7 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
1473
1455
|
...props,
|
|
1474
1456
|
"aria-live": loading ? 'polite' : 'off',
|
|
1475
1457
|
"aria-label": loading ? intl.formatMessage(messages$b.loadingAriaLabel) : rest['aria-label'],
|
|
1476
|
-
children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator
|
|
1458
|
+
children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator, {
|
|
1477
1459
|
size: processIndicatorSize(),
|
|
1478
1460
|
className: "btn-loader"
|
|
1479
1461
|
})]
|
|
@@ -2133,7 +2115,6 @@ const useHasIntersected = ({
|
|
|
2133
2115
|
return [hasIntersected];
|
|
2134
2116
|
};
|
|
2135
2117
|
|
|
2136
|
-
// eslint-disable-next-line import/extensions
|
|
2137
2118
|
function useMedia(query) {
|
|
2138
2119
|
return useSyncExternalStore(onStoreChange => {
|
|
2139
2120
|
const mediaQueryList = window.matchMedia(query);
|
|
@@ -2255,12 +2236,12 @@ Drawer.propTypes = {
|
|
|
2255
2236
|
footerContent: PropTypes.node,
|
|
2256
2237
|
/** The content to appear in the drawer header. */
|
|
2257
2238
|
headerTitle: PropTypes.node,
|
|
2258
|
-
/** The action to perform on close click. */
|
|
2259
|
-
onClose: PropTypes.func,
|
|
2260
2239
|
/** The status of Drawer either open or not. */
|
|
2261
2240
|
open: PropTypes.bool,
|
|
2262
2241
|
/** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
|
|
2263
|
-
position: PropTypes.oneOf(['left', 'right', 'bottom'])
|
|
2242
|
+
position: PropTypes.oneOf(['left', 'right', 'bottom']),
|
|
2243
|
+
/** The action to perform on close click. */
|
|
2244
|
+
onClose: PropTypes.func
|
|
2264
2245
|
};
|
|
2265
2246
|
Drawer.defaultProps = {
|
|
2266
2247
|
children: null,
|
|
@@ -2968,7 +2949,7 @@ const fallbackPlacements = {
|
|
|
2968
2949
|
[Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
|
|
2969
2950
|
[Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM]
|
|
2970
2951
|
};
|
|
2971
|
-
const Panel = /*#__PURE__*/forwardRef(({
|
|
2952
|
+
const Panel = /*#__PURE__*/forwardRef(function Panel({
|
|
2972
2953
|
arrow = false,
|
|
2973
2954
|
flip = true,
|
|
2974
2955
|
altAxis = false,
|
|
@@ -2979,7 +2960,7 @@ const Panel = /*#__PURE__*/forwardRef(({
|
|
|
2979
2960
|
anchorRef,
|
|
2980
2961
|
anchorWidth = false,
|
|
2981
2962
|
...rest
|
|
2982
|
-
}, reference)
|
|
2963
|
+
}, reference) {
|
|
2983
2964
|
const [arrowElement, setArrowElement] = useState(null);
|
|
2984
2965
|
const [popperElement, setPopperElement] = useState(null);
|
|
2985
2966
|
const modifiers = [];
|
|
@@ -3057,7 +3038,7 @@ const Panel = /*#__PURE__*/forwardRef(({
|
|
|
3057
3038
|
...attributes.popper,
|
|
3058
3039
|
className: classNames('np-panel', {
|
|
3059
3040
|
'np-panel--open': open
|
|
3060
|
-
}, rest
|
|
3041
|
+
}, rest.className),
|
|
3061
3042
|
children: /*#__PURE__*/jsxs("div", {
|
|
3062
3043
|
ref: reference
|
|
3063
3044
|
/* eslint-disable-next-line react/forbid-dom-props */,
|
|
@@ -3076,7 +3057,7 @@ const Panel = /*#__PURE__*/forwardRef(({
|
|
|
3076
3057
|
});
|
|
3077
3058
|
var Panel$1 = Panel;
|
|
3078
3059
|
|
|
3079
|
-
const ResponsivePanel = /*#__PURE__*/forwardRef(({
|
|
3060
|
+
const ResponsivePanel = /*#__PURE__*/forwardRef(function ResponsivePanel({
|
|
3080
3061
|
anchorRef,
|
|
3081
3062
|
arrow = false,
|
|
3082
3063
|
flip = true,
|
|
@@ -3085,7 +3066,7 @@ const ResponsivePanel = /*#__PURE__*/forwardRef(({
|
|
|
3085
3066
|
onClose,
|
|
3086
3067
|
open = false,
|
|
3087
3068
|
position = Position.BOTTOM
|
|
3088
|
-
}, reference)
|
|
3069
|
+
}, reference) {
|
|
3089
3070
|
const {
|
|
3090
3071
|
isMobile
|
|
3091
3072
|
} = useLayout();
|
|
@@ -4438,6 +4419,84 @@ const Emphasis = ({
|
|
|
4438
4419
|
}) : null;
|
|
4439
4420
|
};
|
|
4440
4421
|
|
|
4422
|
+
function InlineAlert({
|
|
4423
|
+
id,
|
|
4424
|
+
type = 'neutral',
|
|
4425
|
+
className,
|
|
4426
|
+
children
|
|
4427
|
+
}) {
|
|
4428
|
+
const danger = type === 'negative' || type === 'error';
|
|
4429
|
+
return /*#__PURE__*/jsxs("div", {
|
|
4430
|
+
role: "alert",
|
|
4431
|
+
id: id,
|
|
4432
|
+
className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
|
|
4433
|
+
children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
|
|
4434
|
+
children: children
|
|
4435
|
+
})]
|
|
4436
|
+
});
|
|
4437
|
+
}
|
|
4438
|
+
|
|
4439
|
+
const Label = ({
|
|
4440
|
+
id,
|
|
4441
|
+
htmlFor,
|
|
4442
|
+
className,
|
|
4443
|
+
children
|
|
4444
|
+
}) => {
|
|
4445
|
+
return /*#__PURE__*/jsx("label", {
|
|
4446
|
+
id: id,
|
|
4447
|
+
htmlFor: htmlFor,
|
|
4448
|
+
className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
|
|
4449
|
+
children: children
|
|
4450
|
+
});
|
|
4451
|
+
};
|
|
4452
|
+
|
|
4453
|
+
const Field = ({
|
|
4454
|
+
id,
|
|
4455
|
+
label,
|
|
4456
|
+
hint,
|
|
4457
|
+
error,
|
|
4458
|
+
className,
|
|
4459
|
+
children
|
|
4460
|
+
}) => {
|
|
4461
|
+
const hasError = Boolean(error);
|
|
4462
|
+
const hasHint = Boolean(hint) && !hasError;
|
|
4463
|
+
const labelId = useId();
|
|
4464
|
+
const fallbackInputId = useId();
|
|
4465
|
+
const inputId = id !== null ? id ?? fallbackInputId : undefined;
|
|
4466
|
+
const descriptionId = useId();
|
|
4467
|
+
return /*#__PURE__*/jsx(FieldLabelIdContextProvider, {
|
|
4468
|
+
value: labelId,
|
|
4469
|
+
children: /*#__PURE__*/jsx(InputIdContextProvider, {
|
|
4470
|
+
value: inputId,
|
|
4471
|
+
children: /*#__PURE__*/jsx(InputDescribedByProvider, {
|
|
4472
|
+
value: hasError || hasHint ? descriptionId : undefined,
|
|
4473
|
+
children: /*#__PURE__*/jsx(InputInvalidProvider, {
|
|
4474
|
+
value: hasError,
|
|
4475
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
4476
|
+
className: classNames('form-group d-block', {
|
|
4477
|
+
'has-error': hasError,
|
|
4478
|
+
'has-info': hasHint
|
|
4479
|
+
}, className),
|
|
4480
|
+
children: [/*#__PURE__*/jsxs(Label, {
|
|
4481
|
+
id: labelId,
|
|
4482
|
+
htmlFor: inputId,
|
|
4483
|
+
children: [label, children]
|
|
4484
|
+
}), hasHint && /*#__PURE__*/jsx(InlineAlert, {
|
|
4485
|
+
type: Sentiment.NEUTRAL,
|
|
4486
|
+
id: descriptionId,
|
|
4487
|
+
children: hint
|
|
4488
|
+
}), hasError && /*#__PURE__*/jsx(InlineAlert, {
|
|
4489
|
+
type: Sentiment.NEGATIVE,
|
|
4490
|
+
id: descriptionId,
|
|
4491
|
+
children: error
|
|
4492
|
+
})]
|
|
4493
|
+
})
|
|
4494
|
+
})
|
|
4495
|
+
})
|
|
4496
|
+
})
|
|
4497
|
+
});
|
|
4498
|
+
};
|
|
4499
|
+
|
|
4441
4500
|
const FlowHeader = /*#__PURE__*/React.forwardRef(({
|
|
4442
4501
|
bottomContent,
|
|
4443
4502
|
className,
|
|
@@ -4684,42 +4743,40 @@ const Tooltip = ({
|
|
|
4684
4743
|
forceUpdate();
|
|
4685
4744
|
}
|
|
4686
4745
|
}, [open]);
|
|
4687
|
-
return /*#__PURE__*/
|
|
4688
|
-
|
|
4689
|
-
|
|
4690
|
-
|
|
4691
|
-
|
|
4692
|
-
|
|
4693
|
-
|
|
4694
|
-
|
|
4695
|
-
|
|
4696
|
-
|
|
4697
|
-
|
|
4698
|
-
|
|
4699
|
-
|
|
4700
|
-
|
|
4701
|
-
|
|
4702
|
-
|
|
4703
|
-
|
|
4704
|
-
|
|
4705
|
-
|
|
4706
|
-
|
|
4707
|
-
|
|
4708
|
-
|
|
4709
|
-
|
|
4710
|
-
|
|
4711
|
-
|
|
4712
|
-
|
|
4713
|
-
|
|
4714
|
-
|
|
4715
|
-
|
|
4716
|
-
|
|
4717
|
-
|
|
4718
|
-
|
|
4719
|
-
|
|
4720
|
-
|
|
4721
|
-
})]
|
|
4722
|
-
})
|
|
4746
|
+
return /*#__PURE__*/jsxs("span", {
|
|
4747
|
+
ref: anchorReference,
|
|
4748
|
+
className: "tw-tooltip-container",
|
|
4749
|
+
onMouseOver: () => setOpen(true),
|
|
4750
|
+
onFocus: () => setOpen(true),
|
|
4751
|
+
onMouseOut: () => setOpen(false),
|
|
4752
|
+
onBlur: () => setOpen(false),
|
|
4753
|
+
children: [children ? /*#__PURE__*/cloneElement(children, {
|
|
4754
|
+
'aria-describedby': `${tooltipId}-tooltip`
|
|
4755
|
+
}) : null, /*#__PURE__*/jsx("div", {
|
|
4756
|
+
// @ts-expect-error
|
|
4757
|
+
ref: setPopperElement,
|
|
4758
|
+
className: classNames('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
|
|
4759
|
+
// eslint-disable-next-line react/forbid-dom-props
|
|
4760
|
+
,
|
|
4761
|
+
style: {
|
|
4762
|
+
...styles.popper
|
|
4763
|
+
},
|
|
4764
|
+
...attributes.popper,
|
|
4765
|
+
"aria-hidden": !open,
|
|
4766
|
+
role: "tooltip",
|
|
4767
|
+
id: `${tooltipId}-tooltip`,
|
|
4768
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
4769
|
+
className: "np-panel__content tooltip-inner",
|
|
4770
|
+
children: [label, /*#__PURE__*/jsx("div", {
|
|
4771
|
+
// @ts-expect-error
|
|
4772
|
+
ref: setArrowElement,
|
|
4773
|
+
className: classNames('np-panel__arrow')
|
|
4774
|
+
// eslint-disable-next-line react/forbid-dom-props
|
|
4775
|
+
,
|
|
4776
|
+
style: styles.arrow
|
|
4777
|
+
})]
|
|
4778
|
+
})
|
|
4779
|
+
})]
|
|
4723
4780
|
});
|
|
4724
4781
|
};
|
|
4725
4782
|
|
|
@@ -4917,84 +4974,6 @@ const FlowNavigation = ({
|
|
|
4917
4974
|
});
|
|
4918
4975
|
};
|
|
4919
4976
|
|
|
4920
|
-
function InlineAlert({
|
|
4921
|
-
id,
|
|
4922
|
-
type = 'neutral',
|
|
4923
|
-
className,
|
|
4924
|
-
children
|
|
4925
|
-
}) {
|
|
4926
|
-
const danger = type === 'negative' || type === 'error';
|
|
4927
|
-
return /*#__PURE__*/jsxs("div", {
|
|
4928
|
-
role: "alert",
|
|
4929
|
-
id: id,
|
|
4930
|
-
className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
|
|
4931
|
-
children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
|
|
4932
|
-
children: children
|
|
4933
|
-
})]
|
|
4934
|
-
});
|
|
4935
|
-
}
|
|
4936
|
-
|
|
4937
|
-
const Label = ({
|
|
4938
|
-
id,
|
|
4939
|
-
htmlFor,
|
|
4940
|
-
className,
|
|
4941
|
-
children
|
|
4942
|
-
}) => {
|
|
4943
|
-
return /*#__PURE__*/jsx("label", {
|
|
4944
|
-
id: id,
|
|
4945
|
-
htmlFor: htmlFor,
|
|
4946
|
-
className: classNames('control-label d-flex flex-column gap-y-1 m-b-0', className),
|
|
4947
|
-
children: children
|
|
4948
|
-
});
|
|
4949
|
-
};
|
|
4950
|
-
|
|
4951
|
-
const Field = ({
|
|
4952
|
-
id,
|
|
4953
|
-
label,
|
|
4954
|
-
hint,
|
|
4955
|
-
error,
|
|
4956
|
-
className,
|
|
4957
|
-
children
|
|
4958
|
-
}) => {
|
|
4959
|
-
const hasError = Boolean(error);
|
|
4960
|
-
const hasHint = Boolean(hint) && !hasError;
|
|
4961
|
-
const labelId = useId();
|
|
4962
|
-
const fallbackInputId = useId(); // TODO: Use `React.useId()` when react>=18
|
|
4963
|
-
const inputId = id !== null ? id ?? fallbackInputId : undefined;
|
|
4964
|
-
const descriptionId = useId(); // TODO: Use `React.useId()` when react>=18
|
|
4965
|
-
return /*#__PURE__*/jsx(FieldLabelIdContextProvider, {
|
|
4966
|
-
value: labelId,
|
|
4967
|
-
children: /*#__PURE__*/jsx(InputIdContextProvider, {
|
|
4968
|
-
value: inputId,
|
|
4969
|
-
children: /*#__PURE__*/jsx(InputDescribedByProvider, {
|
|
4970
|
-
value: hasError || hasHint ? descriptionId : undefined,
|
|
4971
|
-
children: /*#__PURE__*/jsx(InputInvalidProvider, {
|
|
4972
|
-
value: hasError,
|
|
4973
|
-
children: /*#__PURE__*/jsxs("div", {
|
|
4974
|
-
className: classNames('form-group d-block', {
|
|
4975
|
-
'has-error': hasError,
|
|
4976
|
-
'has-info': hasHint
|
|
4977
|
-
}, className),
|
|
4978
|
-
children: [/*#__PURE__*/jsxs(Label, {
|
|
4979
|
-
id: labelId,
|
|
4980
|
-
htmlFor: inputId,
|
|
4981
|
-
children: [label, children]
|
|
4982
|
-
}), hasHint && /*#__PURE__*/jsx(InlineAlert, {
|
|
4983
|
-
type: Sentiment.NEUTRAL,
|
|
4984
|
-
id: descriptionId,
|
|
4985
|
-
children: hint
|
|
4986
|
-
}), hasError && /*#__PURE__*/jsx(InlineAlert, {
|
|
4987
|
-
type: Sentiment.NEGATIVE,
|
|
4988
|
-
id: descriptionId,
|
|
4989
|
-
children: error
|
|
4990
|
-
})]
|
|
4991
|
-
})
|
|
4992
|
-
})
|
|
4993
|
-
})
|
|
4994
|
-
})
|
|
4995
|
-
});
|
|
4996
|
-
};
|
|
4997
|
-
|
|
4998
4977
|
const HeaderAction = ({
|
|
4999
4978
|
action
|
|
5000
4979
|
}) => {
|
|
@@ -5643,10 +5622,9 @@ class WithDisplayFormat extends Component {
|
|
|
5643
5622
|
return 'Backspace';
|
|
5644
5623
|
}
|
|
5645
5624
|
return triggerEvent.key;
|
|
5646
|
-
} else {
|
|
5647
|
-
// triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
|
|
5648
|
-
return 'Paste';
|
|
5649
5625
|
}
|
|
5626
|
+
// triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
|
|
5627
|
+
return 'Paste';
|
|
5650
5628
|
};
|
|
5651
5629
|
resetEvent = () => {
|
|
5652
5630
|
this.setState({
|
|
@@ -5799,11 +5777,10 @@ class WithDisplayFormat extends Component {
|
|
|
5799
5777
|
selectionEnd,
|
|
5800
5778
|
pastedLength
|
|
5801
5779
|
} = this.state;
|
|
5780
|
+
const target = triggerEvent?.currentTarget;
|
|
5802
5781
|
const cursorPosition = getCursorPositionAfterActionStroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
|
|
5803
5782
|
setTimeout(() => {
|
|
5804
|
-
|
|
5805
|
-
triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
|
|
5806
|
-
}
|
|
5783
|
+
target?.setSelectionRange(cursorPosition, cursorPosition);
|
|
5807
5784
|
this.setState({
|
|
5808
5785
|
selectionStart: cursorPosition,
|
|
5809
5786
|
selectionEnd: cursorPosition
|
|
@@ -12298,7 +12275,7 @@ const ProcessingStep = props => {
|
|
|
12298
12275
|
"aria-hidden": isComplete,
|
|
12299
12276
|
children: /*#__PURE__*/jsxs("div", {
|
|
12300
12277
|
className: "droppable-card-content",
|
|
12301
|
-
children: [/*#__PURE__*/jsx(ProcessIndicator
|
|
12278
|
+
children: [/*#__PURE__*/jsx(ProcessIndicator, {
|
|
12302
12279
|
size: Size.Small,
|
|
12303
12280
|
status: processStatus,
|
|
12304
12281
|
onAnimationCompleted: status => onAnimationCompleted(status)
|
|
@@ -13121,7 +13098,7 @@ const UploadItem = ({
|
|
|
13121
13098
|
switch (status) {
|
|
13122
13099
|
case Status.PROCESSING:
|
|
13123
13100
|
case Status.PENDING:
|
|
13124
|
-
processIndicator = /*#__PURE__*/jsx(ProcessIndicator
|
|
13101
|
+
processIndicator = /*#__PURE__*/jsx(ProcessIndicator, {
|
|
13125
13102
|
size: Size.EXTRA_SMALL,
|
|
13126
13103
|
status: Status.PROCESSING
|
|
13127
13104
|
});
|
|
@@ -13132,7 +13109,7 @@ const UploadItem = ({
|
|
|
13132
13109
|
processIndicator = isModern ? /*#__PURE__*/jsx(StatusIcon, {
|
|
13133
13110
|
size: Size.SMALL,
|
|
13134
13111
|
sentiment: Sentiment.POSITIVE
|
|
13135
|
-
}) : /*#__PURE__*/jsx(ProcessIndicator
|
|
13112
|
+
}) : /*#__PURE__*/jsx(ProcessIndicator, {
|
|
13136
13113
|
size: Size.EXTRA_SMALL,
|
|
13137
13114
|
status: Status.SUCCEEDED
|
|
13138
13115
|
});
|
|
@@ -13147,7 +13124,7 @@ const UploadItem = ({
|
|
|
13147
13124
|
children: processIndicator
|
|
13148
13125
|
}); // Scale down ProcessIndicator to be 20px*20px to match `icons`
|
|
13149
13126
|
};
|
|
13150
|
-
const getErrorMessage = () => typeof error === 'object'
|
|
13127
|
+
const getErrorMessage = () => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
|
|
13151
13128
|
const getDescription = () => {
|
|
13152
13129
|
if (error || status === Status.FAILED) {
|
|
13153
13130
|
return /*#__PURE__*/jsx(Body, {
|
|
@@ -14484,5 +14461,5 @@ const translations = {
|
|
|
14484
14461
|
'zh-HK': zhHK
|
|
14485
14462
|
};
|
|
14486
14463
|
|
|
14487
|
-
export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, 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
|
|
14464
|
+
export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, 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, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
|
|
14488
14465
|
//# sourceMappingURL=index.mjs.map
|