@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.
Files changed (76) hide show
  1. package/build/index.js +170 -193
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +163 -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/dateLookup/DateLookup.d.ts +5 -6
  10. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  11. package/build/types/dimmer/Dimmer.d.ts +1 -11
  12. package/build/types/dimmer/Dimmer.d.ts.map +1 -1
  13. package/build/types/drawer/Drawer.d.ts +4 -4
  14. package/build/types/index.d.ts +3 -2
  15. package/build/types/index.d.ts.map +1 -1
  16. package/build/types/inputWithDisplayFormat/InputWithDisplayFormat.d.ts +2 -1
  17. package/build/types/inputWithDisplayFormat/InputWithDisplayFormat.d.ts.map +1 -1
  18. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  19. package/build/types/inputs/contexts.d.ts +2 -2
  20. package/build/types/inputs/contexts.d.ts.map +1 -1
  21. package/build/types/modal/Modal.d.ts.map +1 -1
  22. package/build/types/processIndicator/ProcessIndicator.d.ts +36 -19
  23. package/build/types/processIndicator/ProcessIndicator.d.ts.map +1 -1
  24. package/build/types/processIndicator/index.d.ts +2 -2
  25. package/build/types/processIndicator/index.d.ts.map +1 -1
  26. package/build/types/promoCard/PromoCard.d.ts.map +1 -1
  27. package/build/types/select/searchBox/SearchBox.d.ts +1 -1
  28. package/build/types/textareaWithDisplayFormat/TextareaWithDisplayFormat.d.ts +2 -1
  29. package/build/types/textareaWithDisplayFormat/TextareaWithDisplayFormat.d.ts.map +1 -1
  30. package/build/types/tooltip/Tooltip.d.ts +1 -1
  31. package/build/types/tooltip/Tooltip.d.ts.map +1 -1
  32. package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
  33. package/build/types/withDisplayFormat/WithDisplayFormat.d.ts +14 -14
  34. package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map +1 -1
  35. package/package.json +7 -11
  36. package/src/accordion/AccordionItem/AccordionItem.tsx +2 -4
  37. package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -3
  38. package/src/button/Button.tsx +1 -1
  39. package/src/common/hooks/useConditionalListener/useConditionalListener.spec.js +1 -1
  40. package/src/common/hooks/useHasIntersected/useHasIntersected.spec.js +3 -3
  41. package/src/common/hooks/useMedia.spec.ts +1 -1
  42. package/src/common/hooks/useMedia.ts +1 -2
  43. package/src/common/panel/Panel.tsx +90 -92
  44. package/src/common/responsivePanel/ResponsivePanel.tsx +34 -38
  45. package/src/dateLookup/DateLookup.rtl.spec.tsx +181 -5
  46. package/src/dateLookup/DateLookup.testingLibrary.spec.js +171 -124
  47. package/src/dateLookup/DateLookup.tsx +9 -14
  48. package/src/drawer/Drawer.js +3 -3
  49. package/src/field/Field.tsx +3 -3
  50. package/src/index.ts +3 -2
  51. package/src/inputWithDisplayFormat/InputWithDisplayFormat.tsx +2 -1
  52. package/src/inputs/SelectInput.story.tsx +1 -0
  53. package/src/inputs/SelectInput.tsx +10 -2
  54. package/src/inputs/contexts.tsx +4 -4
  55. package/src/modal/Modal.tsx +1 -2
  56. package/src/processIndicator/ProcessIndicator.rtl.spec.tsx +45 -0
  57. package/src/processIndicator/ProcessIndicator.tsx +110 -0
  58. package/src/promoCard/PromoCard.tsx +1 -2
  59. package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap +0 -1
  60. package/src/snackbar/Snackbar.spec.js +4 -1
  61. package/src/tabs/Tabs.spec.js +46 -27
  62. package/src/test-utils/index.js +5 -7
  63. package/src/test-utils/jest.setup.js +9 -3
  64. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.tsx +2 -1
  65. package/src/tooltip/Tooltip.tsx +44 -46
  66. package/src/tooltip/__snapshots__/Tooltip.spec.tsx.snap +2 -2
  67. package/src/upload/Upload.spec.js +34 -13
  68. package/src/uploadInput/UploadInput.spec.tsx +21 -23
  69. package/src/uploadInput/uploadItem/UploadItem.tsx +1 -3
  70. package/src/utilities/logActionRequired.js +1 -1
  71. package/src/withDisplayFormat/WithDisplayFormat.spec.js +63 -32
  72. package/src/withDisplayFormat/WithDisplayFormat.tsx +28 -28
  73. package/src/dateLookup/DateLookup.keyboardEvents.spec.js +0 -180
  74. package/src/processIndicator/ProcessIndicator.js +0 -117
  75. package/src/processIndicator/ProcessIndicator.spec.js +0 -101
  76. /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, ArrowLeft, AlertCircle, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, 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, 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 (['development', 'test'].includes(process?.env?.NODE_ENV)) {
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 statusFromState = this.state.status;
1259
- const sizeFromState = this.state.size;
1260
- const statusFromProps = this.props.status;
1261
- const sizeFromProps = this.props.size;
1262
- if (statusFromState !== statusFromProps) {
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: statusFromProps
1265
- }, this.runCallBack(statusFromProps));
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 (sizeFromState !== sizeFromProps) {
1279
+ if (currentSize !== targetSize) {
1268
1280
  this.setState({
1269
- size: sizeFromProps
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[this.state.size],
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$1, {
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['className']),
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__*/jsx(Fragment, {
4688
- children: /*#__PURE__*/jsxs("span", {
4689
- ref: anchorReference,
4690
- className: "tw-tooltip-container",
4691
- onMouseOver: () => setOpen(true),
4692
- onFocus: () => setOpen(true),
4693
- onMouseOut: () => setOpen(false),
4694
- onBlur: () => setOpen(false),
4695
- children: [children ? /*#__PURE__*/cloneElement(children, {
4696
- 'aria-describedby': `${tooltipId}-tooltip`
4697
- }) : null, /*#__PURE__*/jsx("div", {
4698
- // @ts-expect-error
4699
- ref: setPopperElement,
4700
- className: classNames('np-tooltip', 'np-panel', open ? `np-panel--open np-tooltip--open` : null, className)
4701
- // eslint-disable-next-line react/forbid-dom-props
4702
- ,
4703
- style: {
4704
- ...styles.popper
4705
- },
4706
- ...attributes.popper,
4707
- "aria-hidden": !open,
4708
- role: "tooltip",
4709
- id: `${tooltipId}-tooltip`,
4710
- children: /*#__PURE__*/jsxs("div", {
4711
- className: "np-panel__content tooltip-inner",
4712
- children: [label, /*#__PURE__*/jsx("div", {
4713
- // @ts-expect-error
4714
- ref: setArrowElement,
4715
- className: classNames('np-panel__arrow')
4716
- // eslint-disable-next-line react/forbid-dom-props
4717
- ,
4718
- style: styles.arrow
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
- if (triggerEvent) {
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$1, {
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$1, {
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$1, {
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' && error.message || error || formatMessage(MESSAGES.uploadingFailed);
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$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, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
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