@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.
Files changed (69) hide show
  1. package/build/index.js +170 -192
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +164 -186
  4. package/build/index.mjs.map +1 -1
  5. package/build/types/accordion/AccordionItem/AccordionItem.d.ts.map +1 -1
  6. package/build/types/common/hooks/useMedia.d.ts.map +1 -1
  7. package/build/types/common/panel/Panel.d.ts.map +1 -1
  8. package/build/types/common/responsivePanel/ResponsivePanel.d.ts.map +1 -1
  9. package/build/types/dimmer/Dimmer.d.ts +1 -11
  10. package/build/types/dimmer/Dimmer.d.ts.map +1 -1
  11. package/build/types/drawer/Drawer.d.ts +4 -4
  12. package/build/types/index.d.ts +3 -2
  13. package/build/types/index.d.ts.map +1 -1
  14. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  15. package/build/types/modal/Modal.d.ts.map +1 -1
  16. package/build/types/processIndicator/ProcessIndicator.d.ts +36 -19
  17. package/build/types/processIndicator/ProcessIndicator.d.ts.map +1 -1
  18. package/build/types/processIndicator/index.d.ts +2 -2
  19. package/build/types/processIndicator/index.d.ts.map +1 -1
  20. package/build/types/promoCard/PromoCard.d.ts.map +1 -1
  21. package/build/types/select/searchBox/SearchBox.d.ts +1 -1
  22. package/build/types/snackbar/Snackbar.d.ts +0 -1
  23. package/build/types/snackbar/Snackbar.d.ts.map +1 -1
  24. package/build/types/test-utils/wait.d.ts +2 -0
  25. package/build/types/test-utils/wait.d.ts.map +1 -0
  26. package/build/types/tooltip/Tooltip.d.ts +1 -1
  27. package/build/types/tooltip/Tooltip.d.ts.map +1 -1
  28. package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
  29. package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map +1 -1
  30. package/package.json +11 -15
  31. package/src/accordion/AccordionItem/AccordionItem.tsx +2 -4
  32. package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -3
  33. package/src/button/Button.tsx +1 -1
  34. package/src/common/hooks/useConditionalListener/useConditionalListener.spec.js +1 -1
  35. package/src/common/hooks/useHasIntersected/useHasIntersected.spec.js +3 -3
  36. package/src/common/hooks/useMedia.spec.ts +1 -1
  37. package/src/common/hooks/useMedia.ts +1 -2
  38. package/src/common/panel/Panel.tsx +90 -92
  39. package/src/common/responsivePanel/ResponsivePanel.tsx +34 -38
  40. package/src/dateLookup/DateLookup.rtl.spec.tsx +181 -5
  41. package/src/dateLookup/DateLookup.testingLibrary.spec.js +171 -124
  42. package/src/drawer/Drawer.js +3 -3
  43. package/src/field/Field.tsx +3 -3
  44. package/src/index.ts +3 -2
  45. package/src/inputs/SelectInput.story.tsx +3 -2
  46. package/src/inputs/SelectInput.tsx +10 -2
  47. package/src/modal/Modal.tsx +1 -2
  48. package/src/processIndicator/ProcessIndicator.rtl.spec.tsx +45 -0
  49. package/src/processIndicator/ProcessIndicator.tsx +110 -0
  50. package/src/promoCard/PromoCard.tsx +1 -2
  51. package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap +0 -1
  52. package/src/snackbar/Snackbar.spec.js +8 -2
  53. package/src/snackbar/Snackbar.story.tsx +3 -1
  54. package/src/snackbar/Snackbar.tsx +1 -1
  55. package/src/tabs/Tabs.spec.js +46 -27
  56. package/src/test-utils/index.js +5 -7
  57. package/src/test-utils/jest.setup.js +9 -3
  58. package/src/test-utils/wait.ts +7 -0
  59. package/src/tooltip/Tooltip.tsx +44 -46
  60. package/src/tooltip/__snapshots__/Tooltip.spec.tsx.snap +2 -2
  61. package/src/upload/Upload.spec.js +34 -13
  62. package/src/uploadInput/UploadInput.spec.tsx +21 -23
  63. package/src/uploadInput/uploadItem/UploadItem.tsx +1 -3
  64. package/src/withDisplayFormat/WithDisplayFormat.spec.js +63 -32
  65. package/src/withDisplayFormat/WithDisplayFormat.tsx +4 -6
  66. package/src/dateLookup/DateLookup.keyboardEvents.spec.js +0 -180
  67. package/src/processIndicator/ProcessIndicator.js +0 -117
  68. package/src/processIndicator/ProcessIndicator.spec.js +0 -101
  69. /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, ArrowLeft, AlertCircle, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
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 statusFromState = this.state.status;
1272
- const sizeFromState = this.state.size;
1273
- const statusFromProps = this.props.status;
1274
- const sizeFromProps = this.props.size;
1275
- if (statusFromState !== statusFromProps) {
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: statusFromProps
1278
- }, this.runCallBack(statusFromProps));
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 (sizeFromState !== sizeFromProps) {
1293
+ if (currentSize !== targetSize) {
1281
1294
  this.setState({
1282
- size: sizeFromProps
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[this.state.size],
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$1, {
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['className']),
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__*/jsx(Fragment, {
5235
- children: /*#__PURE__*/jsxs("span", {
5236
- ref: anchorReference,
5237
- className: "tw-tooltip-container",
5238
- onMouseOver: () => setOpen(true),
5239
- onFocus: () => setOpen(true),
5240
- onMouseOut: () => setOpen(false),
5241
- onBlur: () => setOpen(false),
5242
- children: [children ? /*#__PURE__*/cloneElement(children, {
5243
- 'aria-describedby': `${tooltipId}-tooltip`
5244
- }) : null, /*#__PURE__*/jsx("div", {
5245
- // @ts-expect-error
5246
- ref: setPopperElement,
5247
- className: classNames('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
5248
- // eslint-disable-next-line react/forbid-dom-props
5249
- ,
5250
- style: {
5251
- ...styles.popper
5252
- },
5253
- ...attributes.popper,
5254
- "aria-hidden": !open,
5255
- role: "tooltip",
5256
- id: `${tooltipId}-tooltip`,
5257
- children: /*#__PURE__*/jsxs("div", {
5258
- className: "np-panel__content tooltip-inner",
5259
- children: [label, /*#__PURE__*/jsx("div", {
5260
- // @ts-expect-error
5261
- ref: setArrowElement,
5262
- className: classNames('np-panel__arrow')
5263
- // eslint-disable-next-line react/forbid-dom-props
5264
- ,
5265
- style: styles.arrow
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
- if (triggerEvent) {
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$1, {
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$1, {
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$1, {
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' && error.message || error || formatMessage(MESSAGES.uploadingFailed);
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$1 as 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 };
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