@sitecore-feaas/clientside 0.3.11-alpha.2 → 0.3.13

package/src/ui/FEAASExternal.tsx

@@ -4,7 +4,13 @@ import { FEAASElement, WebComponent } from '../components/FEAASElement.js'
 import { ReactJSX, ReactModules } from '../components/FEAASReactElement.js'
 import { kebabCase, reverseKebabCase } from '../utils/string.js'
 import { Component, FEAASComponentProps } from './react.js'
-import type { ExternalComponent, ExternalComponentOptions, JSONSchema, UISchema } from '@sitecore-feaas/sdk'
+import type {
+  ExternalComponent,
+  ExternalComponentOptions,
+  JSONSchema,
+  ObjectSchema,
+  UISchema
+} from '@sitecore-feaas/sdk'
 
 /** Checks if title exists in a property and if not, it generates it from (kebab-cased) property key */
 const addTitles = (properties: { [key: string]: any }) =>
@@ -203,7 +209,7 @@ export default class FEAASExternal extends FEAASElement<FEAASExternalProps, Reac
       )
     const id = options.name
     const { thumbnail, group, ui: uiSchema, ...schemaOptions } = options
-    const schema = { ...schemaOptions, type: 'object' } as JSONSchema
+    const schema = { ...schemaOptions, type: 'object' } as ObjectSchema
     FEAASExternal.registered[id] = {
       component,
       name: id,

package/src/ui/FEAASPicker.tsx

@@ -48,6 +48,8 @@ export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPick
     const datasources = useSDK('datasources')
     const rules = useLibrary('stylesheet.styles')
     const component = components.find((c) => c.id == context?.getAttribute('component'))
+    const componentName = context?.getAttribute('data-external-id')
+    const externalComponent = useSDK('externalComponents').find((c) => c.name == componentName)
     var settings = context?.getAttribute('data')
     if (settings) {
       try {
@@ -62,15 +64,18 @@ export class FEAASPicker extends FEAASElement<FEAASPickerProps, typeof FEAASPick
         themeContext={context}
         placeholder={placeholder}
         component={component}
+        externalComponent={externalComponent}
         datasource={datasource}
         data={settings}
         versionId={context?.getAttribute('version')}
-        mode={mode || (component ? 'component' : null)}
+        mode={mode || (component ? 'component' : componentName ? 'external' : null)}
         setAttribute={(context, attribute, value) => {
           if (attribute == 'data' && value) value = JSON.stringify(value)
           this.props.setAttribute(context, attribute, value)
           forceRender()
         }}
+        getAttribute={(c, property) => context?.getAttribute(property)}
+        dialog={dialog}
         context={context}
         variant={variant}
         onModeChange={(mode, dialog) => {