@transferwise/components 0.0.0-experimental-c099750 → 0.0.0-experimental-ff22dc3

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 (28) hide show
  1. package/build/index.esm.js +106 -98
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +106 -98
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -1
  6. package/build/styles/instructionsList/InstructionsList.css +1 -1
  7. package/build/styles/main.css +1 -1
  8. package/build/types/index.d.ts +1 -1
  9. package/build/types/index.d.ts.map +1 -1
  10. package/build/types/inputs/SelectInput.d.ts +3 -4
  11. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  12. package/build/types/inputs/_BottomSheet.d.ts.map +1 -1
  13. package/build/types/inputs/_Popover.d.ts.map +1 -1
  14. package/build/types/instructionsList/InstructionsList.d.ts +10 -3
  15. package/build/types/instructionsList/InstructionsList.d.ts.map +1 -1
  16. package/package.json +4 -4
  17. package/src/index.ts +3 -0
  18. package/src/inputs/SelectInput.tsx +3 -3
  19. package/src/inputs/_BottomSheet.tsx +47 -37
  20. package/src/inputs/_Popover.tsx +30 -27
  21. package/src/instructionsList/InstructionList.story.tsx +39 -0
  22. package/src/instructionsList/InstructionsList.css +1 -1
  23. package/src/instructionsList/InstructionsList.less +3 -15
  24. package/src/instructionsList/InstructionsList.spec.tsx +35 -0
  25. package/src/instructionsList/InstructionsList.tsx +40 -25
  26. package/src/main.css +1 -1
  27. package/src/instructionsList/InstructionList.story.js +0 -27
  28. package/src/instructionsList/InstructionsList.spec.js +0 -29
package/build/index.js CHANGED
@@ -1540,7 +1540,6 @@ const FocusBoundary = ({
1540
1540
  })
1541
1541
  });
1542
1542
  };
1543
- var FocusBoundary$1 = FocusBoundary;
1544
1543
 
1545
1544
  function withNextPortalWrapper(Component) {
1546
1545
  return function (props) {
@@ -1682,7 +1681,7 @@ const Dimmer = ({
1682
1681
  onExited: onExited,
1683
1682
  children: /*#__PURE__*/jsxRuntime.jsx(DimmerContentWrapper, {
1684
1683
  scrollBody: !transparent,
1685
- children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary$1, {
1684
+ children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
1686
1685
  children: /*#__PURE__*/jsxRuntime.jsx("div", {
1687
1686
  ref: dimmerReference,
1688
1687
  className: classNames__default.default('dimmer', {
@@ -6445,43 +6444,47 @@ function BottomSheet({
6445
6444
  children: /*#__PURE__*/jsxRuntime.jsx("div", {
6446
6445
  className: "np-bottom-sheet-v2-backdrop"
6447
6446
  })
6448
- }), /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
6449
- context: context,
6450
- initialFocus: initialFocusRef,
6451
- children: /*#__PURE__*/jsxRuntime.jsx("div", {
6452
- className: "np-bottom-sheet-v2",
6453
- children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
6454
- className: "np-bottom-sheet-v2-content",
6455
- enter: "np-bottom-sheet-v2-content--enter",
6456
- enterFrom: "np-bottom-sheet-v2-content--enter-from",
6457
- leave: "np-bottom-sheet-v2-content--leave",
6458
- leaveTo: "np-bottom-sheet-v2-content--leave-to",
6459
- children: /*#__PURE__*/jsxRuntime.jsxs("div", {
6460
- // Force inner state invalidation on open
6461
- ref: refs.setFloating,
6462
- className: "np-bottom-sheet-v2-content-inner-container",
6463
- ...getFloatingProps(),
6464
- children: [/*#__PURE__*/jsxRuntime.jsx("div", {
6465
- className: "np-bottom-sheet-v2-header",
6466
- children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
6467
- size: exports.Size.SMALL,
6468
- onClick: () => {
6469
- onClose?.();
6470
- }
6471
- })
6472
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
6473
- className: classNames__default.default('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
6474
- 'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
6475
- }),
6476
- children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
6477
- className: "np-bottom-sheet-v2-title np-text-title-body",
6478
- children: title
6479
- }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
6480
- className: "np-bottom-sheet-v2-body np-text-body-default",
6481
- children: children
6447
+ }), /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
6448
+ children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
6449
+ context: context,
6450
+ initialFocus: initialFocusRef,
6451
+ guards: false,
6452
+ modal: false,
6453
+ children: /*#__PURE__*/jsxRuntime.jsx("div", {
6454
+ className: "np-bottom-sheet-v2",
6455
+ children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition.Child, {
6456
+ className: "np-bottom-sheet-v2-content",
6457
+ enter: "np-bottom-sheet-v2-content--enter",
6458
+ enterFrom: "np-bottom-sheet-v2-content--enter-from",
6459
+ leave: "np-bottom-sheet-v2-content--leave",
6460
+ leaveTo: "np-bottom-sheet-v2-content--leave-to",
6461
+ children: /*#__PURE__*/jsxRuntime.jsxs("div", {
6462
+ // Force inner state invalidation on open
6463
+ ref: refs.setFloating,
6464
+ className: "np-bottom-sheet-v2-content-inner-container",
6465
+ ...getFloatingProps(),
6466
+ children: [/*#__PURE__*/jsxRuntime.jsx("div", {
6467
+ className: "np-bottom-sheet-v2-header",
6468
+ children: /*#__PURE__*/jsxRuntime.jsx(CloseButton, {
6469
+ size: exports.Size.SMALL,
6470
+ onClick: () => {
6471
+ onClose?.();
6472
+ }
6473
+ })
6474
+ }), /*#__PURE__*/jsxRuntime.jsxs("div", {
6475
+ className: classNames__default.default('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
6476
+ 'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
6477
+ }),
6478
+ children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
6479
+ className: "np-bottom-sheet-v2-title np-text-title-body",
6480
+ children: title
6481
+ }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
6482
+ className: "np-bottom-sheet-v2-body np-text-body-default",
6483
+ children: children
6484
+ })]
6482
6485
  })]
6483
- })]
6484
- }, floatingKey)
6486
+ }, floatingKey)
6487
+ })
6485
6488
  })
6486
6489
  })
6487
6490
  })]
@@ -6574,36 +6577,40 @@ function Popover({
6574
6577
  theme: theme,
6575
6578
  screenMode: screenMode,
6576
6579
  isNotRootProvider: true,
6577
- children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
6578
- context: context,
6579
- children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition, {
6580
- show: open,
6581
- leave: "transition-opacity",
6582
- leaveTo: "opacity-0",
6583
- beforeEnter: () => {
6584
- setFloatingKey(prev => prev + 1);
6585
- },
6586
- children: /*#__PURE__*/jsxRuntime.jsx("div", {
6587
- // Force inner state invalidation on open
6588
- ref: refs.setFloating,
6589
- className: "np-popover-v2-container"
6590
- // eslint-disable-next-line react/forbid-dom-props
6591
- ,
6592
- style: floatingStyles,
6593
- ...getFloatingProps(),
6594
- children: /*#__PURE__*/jsxRuntime.jsxs("div", {
6595
- className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
6596
- 'np-popover-v2--padding-md': padding === 'md'
6597
- }),
6598
- children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
6599
- className: "np-popover-v2-title np-text-title-body",
6600
- children: title
6601
- }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
6602
- className: "np-popover-v2-content np-text-body-default",
6603
- children: children
6604
- })]
6605
- })
6606
- }, floatingKey)
6580
+ children: /*#__PURE__*/jsxRuntime.jsx(react$1.Transition, {
6581
+ show: open,
6582
+ leave: "transition-opacity",
6583
+ leaveTo: "opacity-0",
6584
+ beforeEnter: () => {
6585
+ setFloatingKey(prev => prev + 1);
6586
+ },
6587
+ children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
6588
+ children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
6589
+ context: context,
6590
+ guards: false,
6591
+ modal: false,
6592
+ children: /*#__PURE__*/jsxRuntime.jsx("div", {
6593
+ // Force inner state invalidation on open
6594
+ ref: refs.setFloating,
6595
+ className: "np-popover-v2-container"
6596
+ // eslint-disable-next-line react/forbid-dom-props
6597
+ ,
6598
+ style: floatingStyles,
6599
+ ...getFloatingProps(),
6600
+ children: /*#__PURE__*/jsxRuntime.jsxs("div", {
6601
+ className: classNames__default.default('np-popover-v2', title && 'np-popover-v2--has-title', {
6602
+ 'np-popover-v2--padding-md': padding === 'md'
6603
+ }),
6604
+ children: [title ? /*#__PURE__*/jsxRuntime.jsx("h2", {
6605
+ className: "np-popover-v2-title np-text-title-body",
6606
+ children: title
6607
+ }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
6608
+ className: "np-popover-v2-content np-text-body-default",
6609
+ children: children
6610
+ })]
6611
+ })
6612
+ }, floatingKey)
6613
+ })
6607
6614
  })
6608
6615
  })
6609
6616
  })
@@ -7489,47 +7496,48 @@ InputWithDisplayFormat.propTypes = {
7489
7496
  };
7490
7497
  var InputWithDisplayFormat$1 = InputWithDisplayFormat;
7491
7498
 
7492
- const InstructionsList = props => {
7493
- const {
7494
- isModern
7495
- } = componentsTheming.useTheme();
7496
- const {
7497
- dos,
7498
- donts
7499
- } = props;
7500
- const DontIcon = isModern ? icons.CrossCircleFill : icons.CrossCircle;
7501
- const DoIcon = isModern ? icons.CheckCircleFill : icons.CheckCircle;
7499
+ const InstructionsList = ({
7500
+ dos,
7501
+ donts
7502
+ }) => {
7502
7503
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
7503
7504
  className: "tw-instructions",
7504
7505
  children: [dos && dos.map((doThis, index) =>
7505
7506
  /*#__PURE__*/
7506
7507
  // eslint-disable-next-line react/no-array-index-key
7507
- jsxRuntime.jsxs("div", {
7508
- className: "instruction",
7509
- children: [/*#__PURE__*/jsxRuntime.jsx(DoIcon, {
7510
- size: 24,
7511
- className: "do"
7512
- }), /*#__PURE__*/jsxRuntime.jsx(Body, {
7513
- className: "text-primary",
7514
- type: exports.Typography.BODY_LARGE,
7515
- children: doThis
7516
- })]
7508
+ jsxRuntime.jsx(Instruction, {
7509
+ item: doThis,
7510
+ type: "do"
7517
7511
  }, index)), donts && donts.map((dont, index) =>
7518
7512
  /*#__PURE__*/
7519
7513
  // eslint-disable-next-line react/no-array-index-key
7520
- jsxRuntime.jsxs("div", {
7521
- className: "instruction",
7522
- children: [/*#__PURE__*/jsxRuntime.jsx(DontIcon, {
7523
- size: 24,
7524
- className: "dont"
7525
- }), /*#__PURE__*/jsxRuntime.jsx(Body, {
7526
- className: "text-primary",
7527
- type: exports.Typography.BODY_LARGE,
7528
- children: dont
7529
- })]
7514
+ jsxRuntime.jsx(Instruction, {
7515
+ item: dont,
7516
+ type: "dont"
7530
7517
  }, index))]
7531
7518
  });
7532
7519
  };
7520
+ function Instruction({
7521
+ item,
7522
+ type
7523
+ }) {
7524
+ const isInstructionNode = typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
7525
+ return /*#__PURE__*/jsxRuntime.jsxs("div", {
7526
+ className: "instruction",
7527
+ "aria-label": isInstructionNode ? item['aria-label'] : undefined,
7528
+ children: [type === 'do' ? /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircleFill, {
7529
+ size: 24,
7530
+ className: type
7531
+ }) : /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {
7532
+ size: 24,
7533
+ className: type
7534
+ }), /*#__PURE__*/jsxRuntime.jsx(Body, {
7535
+ className: "text-primary",
7536
+ type: exports.Typography.BODY_LARGE,
7537
+ children: isInstructionNode ? item.content : item
7538
+ })]
7539
+ });
7540
+ }
7533
7541
  var InstructionsList$1 = InstructionsList;
7534
7542
 
7535
7543
  const Loader = ({