@transferwise/components 0.0.0-experimental-991400c → 0.0.0-experimental-b7a6b24

package/build/types/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.js"],"names":[],"mappings":";AA8BA,gEAiGC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.js"],"names":[],"mappings":";AA8BA,gEAyFC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-991400c",
+  "version": "0.0.0-experimental-b7a6b24",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/alert/Alert.js

@@ -62,13 +62,6 @@ const Alert = (props) => {
     }
   }
 
-  function calculateAriaLive() {
-    if ([Sentiment.NEGATIVE, Sentiment.POSITIVE, Sentiment.WARNING].includes(mappedType)) {
-      return 'assertive';
-    }
-    return 'polite';
-  }
-
   const handleTouchStart = () => setShouldFire(true);
   const handleTouchMove = () => setShouldFire(false);
   const handleTouchEnd = (event) => {
@@ -87,7 +80,6 @@ const Alert = (props) => {
   return (
     <div
       role="alert"
-      aria-live={calculateAriaLive()}
       className={classNames('alert d-flex', `alert-${mappedType}`, className)}
       onTouchStart={handleTouchStart}
       onTouchEnd={handleTouchEnd}

package/src/alert/Alert.spec.js

@@ -277,15 +277,6 @@ describe('Alert', () => {
       expect(component).toHaveClass(classForType(Sentiment.WARNING));
       expect(screen.getByTestId('warning-icon')).toBeInTheDocument();
     });
-
-    it('renders warning alerts with aria-live assertive', () => {
-      component = getComponentWithType(Sentiment.WARNING);
-      expect(component).toHaveAttribute('aria-live', 'assertive');
-    });
-    it('renders neutral alerts with aria-live polite', () => {
-      component = getComponentWithType(Sentiment.NEUTRAL);
-      expect(component).toHaveAttribute('aria-live', 'polite');
-    });
   });
 
   describe('on touch devices', () => {

package/src/inputs/SelectInput.story.tsx

@@ -4,6 +4,8 @@ import { Flag } from '@wise/art';
 import { useState } from 'react';
 
 import { getMonthNames } from '../common/dateUtils';
+import Drawer from '../drawer';
+import Modal from '../modal';
 
 import { SelectInput, type SelectInputItem, SelectInputOptionContent } from './SelectInput';
 
@@ -262,3 +264,23 @@ export const Currencies: StoryObj<{
     },
   },
 };
+
+export const WithinDrawer: StoryObj<{
+  onChange: (value: Currency) => void;
+}> = {
+  ...Currencies,
+  decorators: [
+    (Story) => (
+      <Drawer open headerTitle="This is the title of the drawer">
+        <Story />
+      </Drawer>
+    ),
+  ],
+};
+
+export const WithinModal: StoryObj<{
+  onChange: (value: Currency) => void;
+}> = {
+  ...Currencies,
+  decorators: [(Story) => <Modal open body={<Story />} onClose={() => {}} />],
+};

package/src/inputs/_BottomSheet.less

@@ -1,6 +1,6 @@
 .np-bottom-sheet-v2-container {
   position: relative;
-  z-index: 50;
+  z-index: 1060;
 }
 
 .np-bottom-sheet-v2-backdrop-container {

package/src/inputs/_Popover.less

@@ -1,5 +1,5 @@
 .np-popover-v2-container {
-  z-index: 10;
+  z-index: 1060;
   display: flex;
   max-height: var(--max-height);
   width: var(--width);