@transferwise/components 0.0.0-experimental-8d248e3 → 0.0.0-experimental-0b6896b

package/build/types/select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;;;;;;;;;;;;;;;;;;;;;gCAieC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;;;;;;;;;;;;;;;;;;;;;gCAmeC"}

package/build/types/select/searchBox/SearchBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/select/searchBox/SearchBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAUxD,QAAA,MAAM,SAAS;;;;oJAwCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../../src/select/searchBox/SearchBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAUxD,QAAA,MAAM,SAAS;;;;oJA0Cd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-8d248e3",
+  "version": "0.0.0-experimental-0b6896b",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -78,8 +78,8 @@
     "rollup": "^3.28.1",
     "storybook": "^7.4.5",
     "@transferwise/less-config": "3.0.6",
-    "@wise/components-theming": "0.8.4",
-    "@transferwise/neptune-css": "14.6.1"
+    "@transferwise/neptune-css": "14.6.1",
+    "@wise/components-theming": "0.8.4"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/dateInput/DateInput.story.tsx

@@ -16,9 +16,6 @@ export default {
       buttonProps: {
         'aria-label': 'Select month',
       },
-      dropdownProps: {
-        'aria-label': 'Month options',
-      },
     },
   },
   tags: ['autodocs'],

package/src/moneyInput/MoneyInput.story.tsx

@@ -19,9 +19,6 @@ export default {
       buttonProps: {
         'aria-label': 'Select currency',
       },
-      dropdownProps: {
-        'aria-label': 'Currency options',
-      },
     },
   },
   tags: ['autodocs'],

package/src/phoneNumberInput/PhoneNumberInput.story.js

@@ -15,9 +15,6 @@ export const Basic = () => {
     buttonProps: {
       'aria-label': 'Select country code',
     },
-    dropdownProps: {
-      'aria-label': 'Country code options',
-    },
   });
 
   return (

package/src/select/Select.js

@@ -333,6 +333,8 @@ export default function Select({
         ref={optionsListReference}
         id={listboxId}
         role="listbox"
+        aria-orientation="vertical"
+        aria-activedescendant={getUniqueIdForOption(id, selected)}
         tabIndex="-1"
         className={dropdownClass}
         {...dropdownProps}

package/src/select/Select.story.js

@@ -41,12 +41,6 @@ export const Basic = () => {
   return (
     <Select
       id={id}
-      buttonProps={{
-        'aria-label': 'Basic button',
-      }}
-      dropdownProps={{
-        'aria-label': 'Options for basic button',
-      }}
       size={size}
       classNames={`${hasError ? 'has-error' : ''}`}
       placeholder={placeholder}

package/src/select/searchBox/SearchBox.spec.js

@@ -1,11 +1,7 @@
-import '@testing-library/jest-dom';
-
-import { render } from '../../test-utils';
+import { render, screen } from '../../test-utils';
 
 import SearchBox from '.';
 
-jest.mock('react-transition-group/Transition', () => jest.fn('placeholder'));
-
 describe('SearchBox', () => {
   const props = {
     classNames: {},
@@ -17,8 +13,8 @@ describe('SearchBox', () => {
   };
 
   it('renders', () => {
-    const { container } = render(<SearchBox {...props} />);
+    render(<SearchBox {...props} />);
 
-    expect(container).toMatchSnapshot();
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
   });
 });

package/src/select/searchBox/SearchBox.tsx

@@ -37,6 +37,8 @@ const SearchBox = forwardRef<HTMLInputElement, Props>(
             <Input
               ref={reference}
               id={id}
+              role="searchbox"
+              inputMode="search"
               className={classnames(style('np-select-filter'))}
               placeholder={placeholder}
               value={value}

package/src/select/searchBox/__snapshots__/SearchBox.spec.js.snap

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SearchBox renders 1`] = `
-<div>
-  <li
-    class="border-bottom"
-  >
-    <a
-      class="np-select-filter-link p-a-0"
-    >
-      <div
-        class="input-group"
-      >
-        <span
-          class="input-group-addon input-group-addon--search"
-        >
-          <span
-            aria-hidden="true"
-            class="tw-icon tw-icon-search tw-icon tw-icon-search"
-            data-testid="search-icon"
-            role="presentation"
-          >
-            <svg
-              fill="currentColor"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-            >
-              <path
-                d="m20.786 19.543-4.029-4.029c1.072-1.328 1.672-3 1.672-4.8C18.429 6.471 14.957 3 10.714 3S3 6.471 3 10.714s3.471 7.715 7.714 7.715c1.8 0 3.472-.643 4.8-1.672l4.029 4.029 1.243-1.243Zm-10.029-2.829c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6Z"
-              />
-            </svg>
-          </span>
-        </span>
-        <input
-          class="np-select-filter form-control np-form-control np-form-control--size-auto np-text-body-large np-input np-input--shape-rectangle"
-          placeholder="placeholder"
-          spellcheck="false"
-          value="value"
-        />
-      </div>
-    </a>
-  </li>
-</div>
-`;