@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.esm.js CHANGED
@@ -1506,7 +1506,6 @@ const FocusBoundary = ({
1506
1506
  })
1507
1507
  });
1508
1508
  };
1509
- var FocusBoundary$1 = FocusBoundary;
1510
1509
 
1511
1510
  function withNextPortalWrapper(Component) {
1512
1511
  return function (props) {
@@ -1648,7 +1647,7 @@ const Dimmer = ({
1648
1647
  onExited: onExited,
1649
1648
  children: /*#__PURE__*/jsx(DimmerContentWrapper, {
1650
1649
  scrollBody: !transparent,
1651
- children: /*#__PURE__*/jsx(FocusBoundary$1, {
1650
+ children: /*#__PURE__*/jsx(FocusBoundary, {
1652
1651
  children: /*#__PURE__*/jsx("div", {
1653
1652
  ref: dimmerReference,
1654
1653
  className: classNames('dimmer', {
@@ -6411,43 +6410,47 @@ function BottomSheet({
6411
6410
  children: /*#__PURE__*/jsx("div", {
6412
6411
  className: "np-bottom-sheet-v2-backdrop"
6413
6412
  })
6414
- }), /*#__PURE__*/jsx(FloatingFocusManager, {
6415
- context: context,
6416
- initialFocus: initialFocusRef,
6417
- children: /*#__PURE__*/jsx("div", {
6418
- className: "np-bottom-sheet-v2",
6419
- children: /*#__PURE__*/jsx(Transition.Child, {
6420
- className: "np-bottom-sheet-v2-content",
6421
- enter: "np-bottom-sheet-v2-content--enter",
6422
- enterFrom: "np-bottom-sheet-v2-content--enter-from",
6423
- leave: "np-bottom-sheet-v2-content--leave",
6424
- leaveTo: "np-bottom-sheet-v2-content--leave-to",
6425
- children: /*#__PURE__*/jsxs("div", {
6426
- // Force inner state invalidation on open
6427
- ref: refs.setFloating,
6428
- className: "np-bottom-sheet-v2-content-inner-container",
6429
- ...getFloatingProps(),
6430
- children: [/*#__PURE__*/jsx("div", {
6431
- className: "np-bottom-sheet-v2-header",
6432
- children: /*#__PURE__*/jsx(CloseButton, {
6433
- size: Size.SMALL,
6434
- onClick: () => {
6435
- onClose?.();
6436
- }
6437
- })
6438
- }), /*#__PURE__*/jsxs("div", {
6439
- className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
6440
- 'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
6441
- }),
6442
- children: [title ? /*#__PURE__*/jsx("h2", {
6443
- className: "np-bottom-sheet-v2-title np-text-title-body",
6444
- children: title
6445
- }) : null, /*#__PURE__*/jsx("div", {
6446
- className: "np-bottom-sheet-v2-body np-text-body-default",
6447
- children: children
6413
+ }), /*#__PURE__*/jsx(FocusBoundary, {
6414
+ children: /*#__PURE__*/jsx(FloatingFocusManager, {
6415
+ context: context,
6416
+ initialFocus: initialFocusRef,
6417
+ guards: false,
6418
+ modal: false,
6419
+ children: /*#__PURE__*/jsx("div", {
6420
+ className: "np-bottom-sheet-v2",
6421
+ children: /*#__PURE__*/jsx(Transition.Child, {
6422
+ className: "np-bottom-sheet-v2-content",
6423
+ enter: "np-bottom-sheet-v2-content--enter",
6424
+ enterFrom: "np-bottom-sheet-v2-content--enter-from",
6425
+ leave: "np-bottom-sheet-v2-content--leave",
6426
+ leaveTo: "np-bottom-sheet-v2-content--leave-to",
6427
+ children: /*#__PURE__*/jsxs("div", {
6428
+ // Force inner state invalidation on open
6429
+ ref: refs.setFloating,
6430
+ className: "np-bottom-sheet-v2-content-inner-container",
6431
+ ...getFloatingProps(),
6432
+ children: [/*#__PURE__*/jsx("div", {
6433
+ className: "np-bottom-sheet-v2-header",
6434
+ children: /*#__PURE__*/jsx(CloseButton, {
6435
+ size: Size.SMALL,
6436
+ onClick: () => {
6437
+ onClose?.();
6438
+ }
6439
+ })
6440
+ }), /*#__PURE__*/jsxs("div", {
6441
+ className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
6442
+ 'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
6443
+ }),
6444
+ children: [title ? /*#__PURE__*/jsx("h2", {
6445
+ className: "np-bottom-sheet-v2-title np-text-title-body",
6446
+ children: title
6447
+ }) : null, /*#__PURE__*/jsx("div", {
6448
+ className: "np-bottom-sheet-v2-body np-text-body-default",
6449
+ children: children
6450
+ })]
6448
6451
  })]
6449
- })]
6450
- }, floatingKey)
6452
+ }, floatingKey)
6453
+ })
6451
6454
  })
6452
6455
  })
6453
6456
  })]
@@ -6540,36 +6543,40 @@ function Popover({
6540
6543
  theme: theme,
6541
6544
  screenMode: screenMode,
6542
6545
  isNotRootProvider: true,
6543
- children: /*#__PURE__*/jsx(FloatingFocusManager, {
6544
- context: context,
6545
- children: /*#__PURE__*/jsx(Transition, {
6546
- show: open,
6547
- leave: "transition-opacity",
6548
- leaveTo: "opacity-0",
6549
- beforeEnter: () => {
6550
- setFloatingKey(prev => prev + 1);
6551
- },
6552
- children: /*#__PURE__*/jsx("div", {
6553
- // Force inner state invalidation on open
6554
- ref: refs.setFloating,
6555
- className: "np-popover-v2-container"
6556
- // eslint-disable-next-line react/forbid-dom-props
6557
- ,
6558
- style: floatingStyles,
6559
- ...getFloatingProps(),
6560
- children: /*#__PURE__*/jsxs("div", {
6561
- className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
6562
- 'np-popover-v2--padding-md': padding === 'md'
6563
- }),
6564
- children: [title ? /*#__PURE__*/jsx("h2", {
6565
- className: "np-popover-v2-title np-text-title-body",
6566
- children: title
6567
- }) : null, /*#__PURE__*/jsx("div", {
6568
- className: "np-popover-v2-content np-text-body-default",
6569
- children: children
6570
- })]
6571
- })
6572
- }, floatingKey)
6546
+ children: /*#__PURE__*/jsx(Transition, {
6547
+ show: open,
6548
+ leave: "transition-opacity",
6549
+ leaveTo: "opacity-0",
6550
+ beforeEnter: () => {
6551
+ setFloatingKey(prev => prev + 1);
6552
+ },
6553
+ children: /*#__PURE__*/jsx(FocusBoundary, {
6554
+ children: /*#__PURE__*/jsx(FloatingFocusManager, {
6555
+ context: context,
6556
+ guards: false,
6557
+ modal: false,
6558
+ children: /*#__PURE__*/jsx("div", {
6559
+ // Force inner state invalidation on open
6560
+ ref: refs.setFloating,
6561
+ className: "np-popover-v2-container"
6562
+ // eslint-disable-next-line react/forbid-dom-props
6563
+ ,
6564
+ style: floatingStyles,
6565
+ ...getFloatingProps(),
6566
+ children: /*#__PURE__*/jsxs("div", {
6567
+ className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
6568
+ 'np-popover-v2--padding-md': padding === 'md'
6569
+ }),
6570
+ children: [title ? /*#__PURE__*/jsx("h2", {
6571
+ className: "np-popover-v2-title np-text-title-body",
6572
+ children: title
6573
+ }) : null, /*#__PURE__*/jsx("div", {
6574
+ className: "np-popover-v2-content np-text-body-default",
6575
+ children: children
6576
+ })]
6577
+ })
6578
+ }, floatingKey)
6579
+ })
6573
6580
  })
6574
6581
  })
6575
6582
  })
@@ -7455,47 +7462,48 @@ InputWithDisplayFormat.propTypes = {
7455
7462
  };
7456
7463
  var InputWithDisplayFormat$1 = InputWithDisplayFormat;
7457
7464
 
7458
- const InstructionsList = props => {
7459
- const {
7460
- isModern
7461
- } = useTheme();
7462
- const {
7463
- dos,
7464
- donts
7465
- } = props;
7466
- const DontIcon = isModern ? CrossCircleFill : CrossCircle;
7467
- const DoIcon = isModern ? CheckCircleFill : CheckCircle;
7465
+ const InstructionsList = ({
7466
+ dos,
7467
+ donts
7468
+ }) => {
7468
7469
  return /*#__PURE__*/jsxs("div", {
7469
7470
  className: "tw-instructions",
7470
7471
  children: [dos && dos.map((doThis, index) =>
7471
7472
  /*#__PURE__*/
7472
7473
  // eslint-disable-next-line react/no-array-index-key
7473
- jsxs("div", {
7474
- className: "instruction",
7475
- children: [/*#__PURE__*/jsx(DoIcon, {
7476
- size: 24,
7477
- className: "do"
7478
- }), /*#__PURE__*/jsx(Body, {
7479
- className: "text-primary",
7480
- type: Typography.BODY_LARGE,
7481
- children: doThis
7482
- })]
7474
+ jsx(Instruction, {
7475
+ item: doThis,
7476
+ type: "do"
7483
7477
  }, index)), donts && donts.map((dont, index) =>
7484
7478
  /*#__PURE__*/
7485
7479
  // eslint-disable-next-line react/no-array-index-key
7486
- jsxs("div", {
7487
- className: "instruction",
7488
- children: [/*#__PURE__*/jsx(DontIcon, {
7489
- size: 24,
7490
- className: "dont"
7491
- }), /*#__PURE__*/jsx(Body, {
7492
- className: "text-primary",
7493
- type: Typography.BODY_LARGE,
7494
- children: dont
7495
- })]
7480
+ jsx(Instruction, {
7481
+ item: dont,
7482
+ type: "dont"
7496
7483
  }, index))]
7497
7484
  });
7498
7485
  };
7486
+ function Instruction({
7487
+ item,
7488
+ type
7489
+ }) {
7490
+ const isInstructionNode = typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
7491
+ return /*#__PURE__*/jsxs("div", {
7492
+ className: "instruction",
7493
+ "aria-label": isInstructionNode ? item['aria-label'] : undefined,
7494
+ children: [type === 'do' ? /*#__PURE__*/jsx(CheckCircleFill, {
7495
+ size: 24,
7496
+ className: type
7497
+ }) : /*#__PURE__*/jsx(CrossCircleFill, {
7498
+ size: 24,
7499
+ className: type
7500
+ }), /*#__PURE__*/jsx(Body, {
7501
+ className: "text-primary",
7502
+ type: Typography.BODY_LARGE,
7503
+ children: isInstructionNode ? item.content : item
7504
+ })]
7505
+ });
7506
+ }
7499
7507
  var InstructionsList$1 = InstructionsList;
7500
7508
 
7501
7509
  const Loader = ({