diff --git a/package.json b/package.json
index 7df68fa2a38..fb831d8329e 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.16.7",
"@hypothesis/frontend-build": "^3.0.0",
- "@hypothesis/frontend-shared": "^7.13.0",
+ "@hypothesis/frontend-shared": "^7.14.0",
"@hypothesis/frontend-testing": "^1.2.0",
"@npmcli/arborist": "^7.0.0",
"@octokit/rest": "^21.0.0",
diff --git a/src/sidebar/components/ShareDialog/ExportAnnotations.tsx b/src/sidebar/components/ShareDialog/ExportAnnotations.tsx
index d9d3fec23d9..85d63586b4a 100644
--- a/src/sidebar/components/ShareDialog/ExportAnnotations.tsx
+++ b/src/sidebar/components/ShareDialog/ExportAnnotations.tsx
@@ -3,8 +3,8 @@ import {
CardActions,
Link,
Input,
- SelectNext,
CopyIcon,
+ Select,
} from '@hypothesis/frontend-shared';
import { useCallback, useId, useMemo, useState } from 'preact/hooks';
@@ -279,7 +279,7 @@ function ExportAnnotations({
-
-
+
-
+
{userList.map(userInfo => (
-
+
-
+
))}
-
+
-
{exportFormats.map(exportFormat => (
-
@@ -345,9 +342,9 @@ function ExportAnnotations({
{exportFormat.description}
-
+
))}
-
+
diff --git a/src/sidebar/components/ShareDialog/ImportAnnotations.tsx b/src/sidebar/components/ShareDialog/ImportAnnotations.tsx
index 595863c146a..ae7fa5b0c1c 100644
--- a/src/sidebar/components/ShareDialog/ImportAnnotations.tsx
+++ b/src/sidebar/components/ShareDialog/ImportAnnotations.tsx
@@ -1,9 +1,4 @@
-import {
- Button,
- CardActions,
- Link,
- SelectNext,
-} from '@hypothesis/frontend-shared';
+import { Button, CardActions, Link, Select } from '@hypothesis/frontend-shared';
import { useCallback, useEffect, useId, useMemo, useState } from 'preact/hooks';
import type { APIAnnotationData } from '../../../types/api';
@@ -163,11 +158,9 @@ function ImportAnnotations({
-
- setSelectedUserId(newValue?.userid ?? null)
- }
+ onChange={newValue => setSelectedUserId(newValue?.userid ?? null)}
buttonId={userSelectId}
buttonContent={
selectedUser ? (
@@ -178,11 +171,11 @@ function ImportAnnotations({
}
>
{userList.map(userInfo => (
-
+
-
+
))}
-
+
>
)}
{error && (
diff --git a/src/sidebar/components/ShareDialog/UserAnnotationsListItem.tsx b/src/sidebar/components/ShareDialog/UserAnnotationsListItem.tsx
index 597da241d75..7df44ee281a 100644
--- a/src/sidebar/components/ShareDialog/UserAnnotationsListItem.tsx
+++ b/src/sidebar/components/ShareDialog/UserAnnotationsListItem.tsx
@@ -5,7 +5,7 @@ export type UserAnnotationsListItemProps = {
};
/**
- * UserAnnotations representation to use inside `SelectNext.Option`.
+ * UserAnnotations representation to use inside `Select.Option`.
*/
export function UserAnnotationsListItem({
userAnnotations,
diff --git a/src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js b/src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js
index 1660ff5944a..fe0903c57b6 100644
--- a/src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js
+++ b/src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js
@@ -1,4 +1,4 @@
-import { SelectNext } from '@hypothesis/frontend-shared';
+import { Select } from '@hypothesis/frontend-shared';
import {
checkAccessibility,
mockImportedComponents,
@@ -99,14 +99,11 @@ describe('ExportAnnotations', () => {
$imports.$restore();
});
- const waitForTestId = async (wrapper, testId) =>
- waitForElement(wrapper, `[data-testid="${testId}"]`);
+ const waitForSelect = (wrapper, testId) =>
+ waitForElement(wrapper, `Select[data-testid="${testId}"]`);
const selectExportFormat = async (wrapper, format) => {
- const select = await waitForElement(
- wrapper,
- '[data-testid="export-format-select"]',
- );
+ const select = await waitForSelect(wrapper, 'export-format-select');
select.props().onChange({ value: format });
wrapper.update();
};
@@ -211,8 +208,8 @@ describe('ExportAnnotations', () => {
const wrapper = createComponent();
- const userList = await waitForTestId(wrapper, 'user-select');
- const users = userList.find(SelectNext.Option);
+ const userList = await waitForSelect(wrapper, 'user-select');
+ const users = userList.find(Select.Option);
assert.equal(users.length, userEntries.length);
for (const [i, entry] of userEntries.entries()) {
@@ -254,7 +251,7 @@ describe('ExportAnnotations', () => {
wrapper,
'[data-testid="export-format-select"]',
);
- const options = select.find(SelectNext.Option);
+ const options = select.find(Select.Option);
const optionText = (index, type) =>
options.at(index).find(`[data-testid="format-${type}"]`).text();
@@ -284,8 +281,7 @@ describe('ExportAnnotations', () => {
].forEach(([format, expectedTitle]) => {
it('displays format short title if defined', async () => {
const wrapper = createComponent();
- const getSelect = () =>
- waitForElement(wrapper, '[data-testid="export-format-select"]');
+ const getSelect = () => waitForSelect(wrapper, 'export-format-select');
const selectBefore = await getSelect();
selectBefore.props().onChange(format);
@@ -386,7 +382,7 @@ describe('ExportAnnotations', () => {
const wrapper = createComponent();
// Select the user whose annotations we want to export
- const userList = await waitForTestId(wrapper, 'user-select');
+ const userList = await waitForSelect(wrapper, 'user-select');
act(() => {
userList.prop('onChange')('acct:john@example.com');
});
@@ -598,7 +594,7 @@ describe('ExportAnnotations', () => {
it('should pass a11y checks', async () => {
const wrapper = createComponent();
- const select = await waitForTestId(wrapper, 'user-select');
+ const select = await waitForSelect(wrapper, 'user-select');
await checkAccessibility({
content: () => wrapper,
diff --git a/src/sidebar/components/ShareDialog/test/ImportAnnotations-test.js b/src/sidebar/components/ShareDialog/test/ImportAnnotations-test.js
index add4fbcce1d..5bf9f2dbd29 100644
--- a/src/sidebar/components/ShareDialog/test/ImportAnnotations-test.js
+++ b/src/sidebar/components/ShareDialog/test/ImportAnnotations-test.js
@@ -1,4 +1,4 @@
-import { SelectNext } from '@hypothesis/frontend-shared';
+import { Select } from '@hypothesis/frontend-shared';
import {
checkAccessibility,
waitFor,
@@ -106,7 +106,7 @@ describe('ImportAnnotations', () => {
},
];
selectFile(wrapper, annotations);
- const userList = await waitForElement(wrapper, SelectNext);
+ const userList = await waitForElement(wrapper, Select);
assert.ok(userList.prop('value')); // Current user should be auto-selected
// Import button should be disabled since we don't have the things we need
@@ -200,8 +200,8 @@ describe('ImportAnnotations', () => {
selectFile(wrapper, annotations);
- const userList = await waitForElement(wrapper, SelectNext);
- const users = userList.find(SelectNext.Option);
+ const userList = await waitForElement(wrapper, Select);
+ const users = userList.find(Select.Option);
assert.equal(users.length, userEntries.length);
@@ -241,7 +241,7 @@ describe('ImportAnnotations', () => {
];
selectFile(wrapper, annotations);
- const userList = await waitForElement(wrapper, SelectNext);
+ const userList = await waitForElement(wrapper, Select);
assert.equal(userList.props().value.userid, 'acct:john@example.com');
});
@@ -259,7 +259,7 @@ describe('ImportAnnotations', () => {
];
selectFile(wrapper, annotations);
- const userList = await waitForElement(wrapper, SelectNext);
+ const userList = await waitForElement(wrapper, Select);
assert.equal(userList.prop('value'), null);
});
@@ -297,9 +297,9 @@ describe('ImportAnnotations', () => {
selectFile(wrapper, annotations);
- const userList = await waitForElement(wrapper, SelectNext);
+ const userList = await waitForElement(wrapper, Select);
const option = userList
- .find(SelectNext.Option)
+ .find(Select.Option)
.filterWhere(
option => option.prop('value').userid === 'acct:brian@example.com',
)
diff --git a/yarn.lock b/yarn.lock
index 7348c95ebff..6a7c5782643 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2713,15 +2713,15 @@ __metadata:
languageName: node
linkType: hard
-"@hypothesis/frontend-shared@npm:^7.13.0":
- version: 7.13.0
- resolution: "@hypothesis/frontend-shared@npm:7.13.0"
+"@hypothesis/frontend-shared@npm:^7.14.0":
+ version: 7.14.0
+ resolution: "@hypothesis/frontend-shared@npm:7.14.0"
dependencies:
highlight.js: ^11.6.0
wouter-preact: ^3.0.0
peerDependencies:
preact: ^10.4.0
- checksum: 7beba12e9cb0de55a4f78a152abb6770fbc161cea4b9cefdc4e9bb88adb7fe96cd05940b13c7cd007836b5fd60872b4d8f330ea9716fbcb554f8c578bbb29f1f
+ checksum: e5a21a08d4e23b9ca412320b03ddab07bc849a0962d608af7758c4c71aed5e9748fa9ae57ec0cf74f7deaa42a01d9960f11a1681b96b116503f53317e9f368e8
languageName: node
linkType: hard
@@ -8746,7 +8746,7 @@ __metadata:
"@babel/preset-react": ^7.0.0
"@babel/preset-typescript": ^7.16.7
"@hypothesis/frontend-build": ^3.0.0
- "@hypothesis/frontend-shared": ^7.13.0
+ "@hypothesis/frontend-shared": ^7.14.0
"@hypothesis/frontend-testing": ^1.2.0
"@npmcli/arborist": ^7.0.0
"@octokit/rest": ^21.0.0