DEVREL-2721: Set selected variant

src/components/PermissionsMap.tsx

@@ -57,6 +57,7 @@ export const permissionsMap: PermissionsMap = {
     getVariants: { permissions: ['canAccessCanvas'] },
     getSelectedVariant: { permissions: ['canAccessCanvas'] },
     enterComponent: { permissions: ['canModifyComponents'] },
+    setSelectedVariant: { permissions: ['canModifyComponents'] },
     openCanvas: { permissions: ['canModifyComponents'] },
     selectComponent: { permissions: ['canModifyComponents'] },
     exitComponent: { permissions: ['canAccessCanvas'] },

src/designer-extension-typings/components.d.ts

@@ -1,3 +1,12 @@
+interface SetSelectedVariantByName {
+  name: string;
+}
+interface SetSelectedVariantById {
+  id: string;
+}
+
+type SetSelectedVariantOptions = SetSelectedVariantByName | SetSelectedVariantById;
+
 interface Component {
   readonly [brand]: 'Component';
 
@@ -70,6 +79,24 @@ interface Component {
    * ```
    */
   getSelectedVariant(): Promise<Variant>;
+  /**
+   * Selects the specified variant of a selected component when the component canvas is open.
+   * @returns A promise that resolves when the specified variant is selected.
+   * @example
+   * ```typescript
+   * interface SetSelectedVariantByName {
+   *   name: string;
+   * }
+   * interface SetSelectedVariantById {
+   *   id: string;
+   * }
+   *
+   * type SetSelectedVariantOptions = SetSelectedVariantByName | SetSelectedVariantById;
+   *
+   * setSelectedVariant(options: SetSelectedVariantOptions | string): Promise<void>;
+   * ```
+   */
+  setSelectedVariant(options: SetSelectedVariantOptions | string): Promise<void>;
   getRootElement(): Promise<null | AnyElement>;
 }
 

src/examples/components.ts

@@ -109,6 +109,13 @@ export const Components = {
     */
   },
 
+  setSelectedVariant: async () => {
+    const heroComponent = await webflow.getComponentByName('Hero');
+    if (heroComponent) {
+      await heroComponent.setSelectedVariant({ id: 'base' });
+    }
+  },
+
   createComponent: async () => {
     // Get selected element
     const rootElement = await webflow.getSelectedElement()