Add picker API

[MitchLillie]

Background

Resolves https://github.com/Shopify/app-ui/issues/1575

Related https://github.com/Shopify/shopify-dev/pull/49753, https://github.com/Shopify/extensibility/pull/178

Adds the imperative picker() API to UI Extensions to open the generic picker.

The API is used like this:

const {picker} = useApi();

const pickerInstance = await picker({
  heading: 'Select an item',
  headers: [{content: 'Main heading'}],
  items: [
    {
      id: '1',
      heading: 'Item 1',
    },
    {
      id: '2',
      heading: 'Item 2',
    },
  ],
});

const selected = await picker.selected;

This matches the API provided to App Bridge in https://github.com/Shopify/extensibility/pull/178.

🎩

1. Setup a local extension following these instructions or by running shopify app generate extension
2. Update your extension's dependencies to the latest snapshots on this PR:

"@shopify/ui-extensions": "0.0.0-snapshot-20241115174631",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20241115174631"

3. In your extension code, add thw following example:

const {picker} = useApi();

const pickerInstance = await picker({
  heading: 'Select an item',
  headers: [{content: 'Main heading'}],
  items: [
    {
      id: '1',
      heading: 'Item 1',
    },
    {
      id: '2',
      heading: 'Item 2',
    },
  ],
});

const selected = await picker.selected;

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[MitchLillie]

/snapit

[shopify-github-actions-access]

🫰✨ Thanks @MitchLillie! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/ui-extensions": "0.0.0-snapshot-20240926213211",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20240926213211"

[MitchLillie]

/snapit

[shopify-github-actions-access]

🫰✨ Thanks @MitchLillie! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/ui-extensions": "0.0.0-snapshot-20241021162735",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20241021162735"

[MitchLillie]

/snapit

[shopify-github-actions-access]

🫰✨ Thanks @MitchLillie! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/ui-extensions": "0.0.0-snapshot-20241022151631",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20241022151631"

[charlesdobson]

/snapit

[shopify-github-actions-access]

🫰✨ Thanks @charlesdobson! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/data-extensions": "0.0.0-snapshot-20241112220206",
"@shopify/ui-extensions": "0.0.0-snapshot-20241112220206",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20241112220206"

[MitchLillie]

/snapit

[shopify-github-actions-access]

🫰✨ Thanks @MitchLillie! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/data-extensions": "0.0.0-snapshot-20241115174631",
"@shopify/ui-extensions": "0.0.0-snapshot-20241115174631",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20241115174631"

[charlesdobson]

/snapit

[shopify-github-actions-access]

🫰✨ Thanks @charlesdobson! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/data-extensions": "0.0.0-snapshot-20241119031327",
"@shopify/ui-extensions": "0.0.0-snapshot-20241119031327",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20241119031327"