Admin: Make s-popover component available

.changeset/wicked-singers-float.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': patch
+---
+
+Admin: Make s-popover component available
+Admin: Expose picker and resource picker APIs in the standard API for rendering extensions

packages/ui-extensions/src/surfaces/admin/api.ts

@@ -1,5 +1,6 @@
 export type {I18n, I18nTranslate} from '../../api';
 export type {StandardApi, Intents} from './api/standard/standard';
+export type {StandardRenderingExtensionApi} from './api/standard/standard-rendering';
 export type {Navigation} from './api/block/block';
 export type {
   CustomerSegmentTemplateApi,

packages/ui-extensions/src/surfaces/admin/api/action/action.ts

@@ -1,11 +1,9 @@
-import type {StandardApi} from '../standard/standard';
+import type {StandardRenderingExtensionApi} from '../standard/standard-rendering';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 import type {Data} from '../shared';
-import type {ResourcePickerApi} from '../resource-picker/resource-picker';
-import type {PickerApi} from '../picker/picker';
 
 export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
-  extends StandardApi<ExtensionTarget> {
+  extends StandardRenderingExtensionApi<ExtensionTarget> {
   /**
    * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay.
    */
@@ -15,14 +13,4 @@ export interface ActionExtensionApi<ExtensionTarget extends AnyExtensionTarget>
    * Information about the currently viewed or selected items.
    */
   data: Data;
-
-  /**
-   * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow.
-   */
-  resourcePicker: ResourcePickerApi;
-
-  /**
-   * Renders a custom [Picker](picker) dialog allowing users to select values from a list.
-   */
-  picker: PickerApi;
 }

packages/ui-extensions/src/surfaces/admin/api/block/block.ts

@@ -1,8 +1,6 @@
-import type {StandardApi} from '../standard/standard';
+import type {StandardRenderingExtensionApi} from '../standard/standard-rendering';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 import type {Data} from '../shared';
-import type {ResourcePickerApi} from '../resource-picker/resource-picker';
-import type {PickerApi} from '../picker/picker';
 
 export interface Navigation {
   /**
@@ -14,7 +12,7 @@ export interface Navigation {
 }
 
 export interface BlockExtensionApi<ExtensionTarget extends AnyExtensionTarget>
-  extends StandardApi<ExtensionTarget> {
+  extends StandardRenderingExtensionApi<ExtensionTarget> {
   /**
    * Information about the currently viewed or selected items.
    */
@@ -25,14 +23,4 @@ export interface BlockExtensionApi<ExtensionTarget extends AnyExtensionTarget>
    * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`).
    */
   navigation: Navigation;
-
-  /**
-   * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow.
-   */
-  resourcePicker: ResourcePickerApi;
-
-  /**
-   * Renders a custom [Picker](picker) dialog allowing users to select values from a list.
-   */
-  picker: PickerApi;
 }

packages/ui-extensions/src/surfaces/admin/api/checkout-rules/validation-settings.ts

@@ -1,12 +1,12 @@
-import type {StandardApi} from '../standard/standard';
+import type {StandardRenderingExtensionApi} from '../standard/standard-rendering';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 
 import {ApplyMetafieldChange} from './metafields';
 import {ValidationData} from './launch-options';
 
 export interface ValidationSettingsApi<
   ExtensionTarget extends AnyExtensionTarget,
-> extends StandardApi<ExtensionTarget> {
+> extends StandardRenderingExtensionApi<ExtensionTarget> {
   /**
    * Applies a change to the validation settings.
    */

packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts

@@ -1,11 +1,11 @@
-import type {StandardApi} from '../standard/standard';
+import type {StandardRenderingExtensionApi} from '../standard/standard-rendering';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 
 import {ApplyMetafieldsChange} from './metafields';
 import {Data} from './data';
 
 export interface OrderRoutingRuleApi<ExtensionTarget extends AnyExtensionTarget>
-  extends StandardApi<ExtensionTarget> {
+  extends StandardRenderingExtensionApi<ExtensionTarget> {
   applyMetafieldsChange: ApplyMetafieldsChange;
   data: Data;
 }

packages/ui-extensions/src/surfaces/admin/api/picker/picker.doc.ts

@@ -10,8 +10,6 @@ const data: ReferenceEntityTemplateSchema = {
   isVisualComponent: true,
   category: 'API',
   thumbnail: 'picker.png',
-  requires:
-    'an Admin [block](/docs/api/admin-extensions/unstable/extension-targets#block-locations), [action](/docs/api/admin-extensions/unstable/extension-targets#action-locations), or [print](/docs/api/admin-extensions/unstable/extension-targets#print-locations) extension.',
   defaultExample: {
     image: 'picker.png',
     codeblock: {

packages/ui-extensions/src/surfaces/admin/api/print-action/print-action.ts

@@ -1,24 +1,12 @@
-import type {StandardApi} from '../standard/standard';
+import {StandardRenderingExtensionApi} from '../standard/standard-rendering';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 import type {Data} from '../shared';
-import type {ResourcePickerApi} from '../resource-picker/resource-picker';
-import type {PickerApi} from '../picker/picker';
 
 export interface PrintActionExtensionApi<
   ExtensionTarget extends AnyExtensionTarget,
-> extends StandardApi<ExtensionTarget> {
+> extends StandardRenderingExtensionApi<ExtensionTarget> {
   /**
    * Information about the currently viewed or selected items.
    */
   data: Data;
-
-  /**
-   * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow.
-   */
-  resourcePicker: ResourcePickerApi;
-
-  /**
-   * Renders a custom [Picker](picker) dialog allowing users to select values from a list.
-   */
-  picker: PickerApi;
 }

packages/ui-extensions/src/surfaces/admin/api/resource-picker/resource-picker.doc.ts

@@ -11,8 +11,6 @@ const data: ReferenceEntityTemplateSchema = {
   isVisualComponent: true,
   category: 'API',
   thumbnail: 'resource-picker.png',
-  requires:
-    'an Admin [block](/docs/api/admin-extensions/unstable/extension-targets#block-locations), [action](/docs/api/admin-extensions/unstable/extension-targets#action-locations), or [print](/docs/api/admin-extensions/unstable/extension-targets#print-locations) extension.',
   defaultExample: {
     image: 'resource-picker.png',
     codeblock: {

packages/ui-extensions/src/surfaces/admin/api/standard/standard-rendering.ts

@@ -0,0 +1,18 @@
+import {PickerApi} from '../picker/picker';
+import {ResourcePickerApi} from '../resource-picker/resource-picker';
+import {StandardApi} from './standard';
+import {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
+
+export interface StandardRenderingExtensionApi<
+  ExtensionTarget extends AnyExtensionTarget,
+> extends StandardApi<ExtensionTarget> {
+  /**
+   * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow.
+   */
+  resourcePicker: ResourcePickerApi;
+
+  /**
+   * Renders a custom [Picker](picker) dialog allowing users to select values from a list.
+   */
+  picker: PickerApi;
+}

packages/ui-extensions/src/surfaces/admin/api/standard/standard.ts

@@ -3,6 +3,8 @@ import {ApiVersion} from '../../../../shared';
 import type {Storage} from './storage';
 import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
 import type {Intents} from '../intents/intents';
+import {ResourcePickerApi} from '../resource-picker/resource-picker';
+import {PickerApi} from '../picker/picker';
 
 export type {Intents} from '../intents/intents';
 
@@ -63,4 +65,14 @@ export interface StandardApi<ExtensionTarget extends AnyExtensionTarget> {
     query: string,
     options?: {variables?: Variables; version?: Omit<ApiVersion, '2023-04'>},
   ) => Promise<{data?: Data; errors?: GraphQLError[]}>;
+
+  /**
+   * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow.
+   */
+  resourcePicker: ResourcePickerApi;
+
+  /**
+   * Renders a custom [Picker](picker) dialog allowing users to select values from a list.
+   */
+  picker: PickerApi;
 }

packages/ui-extensions/src/surfaces/admin/components/StandardComponents.ts

@@ -33,6 +33,7 @@ export type StandardComponents =
   | 'OrderedList'
   | 'Paragraph'
   | 'PasswordField'
+  | 'Popover'
   | 'QueryContainer'
   | 'SearchField'
   | 'Section'