@bpmn-io/form-js-editor 1.8.8 → 1.9.0

package/dist/index.es.js

@@ -9010,83 +9010,64 @@ function hasIntegerPathSegment(path) {
   return path.split('.').some(segment => /^\d+$/.test(segment));
 }
 
-function useService(type, strict) {
+const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
+function getPropertiesPanelHeaderProvider(options = {}) {
   const {
-    getService
-  } = useContext(FormPropertiesPanelContext);
-  return getService(type, strict);
-}
-
-/**
- * Retrieve list of variables from the form schema.
- *
- * @returns { string[] } list of variables used in form schema
- */
-function useVariables() {
-  const form = useService('formEditor');
-  const schema = form.getSchema();
-  return getSchemaVariables(schema);
+    getDocumentationRef,
+    formFields
+  } = options;
+  return {
+    getElementLabel: field => {
+      const {
+        type
+      } = field;
+      if (headerlessTypes.includes(type)) {
+        return '';
+      }
+      if (type === 'text') {
+        return textToLabel(field.text);
+      }
+      if (type === 'image') {
+        return field.alt;
+      }
+      if (type === 'default') {
+        return field.id;
+      }
+      return field.label;
+    },
+    getElementIcon: field => {
+      const {
+        type
+      } = field;
+      const fieldDefinition = formFields.get(type).config;
+      const Icon = fieldDefinition.icon || iconsByType(type);
+      if (Icon) {
+        return () => jsx(Icon, {
+          width: "36",
+          height: "36",
+          viewBox: "0 0 54 54"
+        });
+      } else if (fieldDefinition.iconUrl) {
+        return getPaletteIcon({
+          iconUrl: fieldDefinition.iconUrl,
+          label: fieldDefinition.label
+        });
+      }
+    },
+    getTypeLabel: field => {
+      const {
+        type
+      } = field;
+      if (type === 'default') {
+        return 'Form';
+      }
+      const fieldDefinition = formFields.get(type).config;
+      return fieldDefinition.label || type;
+    },
+    getDocumentationRef
+  };
 }
 
-const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
-const PropertiesPanelHeaderProvider = {
-  getElementLabel: field => {
-    const {
-      type
-    } = field;
-    if (headerlessTypes.includes(type)) {
-      return '';
-    }
-    if (type === 'text') {
-      return textToLabel(field.text);
-    }
-    if (type === 'image') {
-      return field.alt;
-    }
-    if (type === 'default') {
-      return field.id;
-    }
-    return field.label;
-  },
-  getElementIcon: field => {
-    const {
-      type
-    } = field;
-
-    // @Note: We know that we are inside the properties panel context,
-    // so we can savely use the hook here.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const fieldDefinition = useService('formFields').get(type).config;
-    const Icon = fieldDefinition.icon || iconsByType(type);
-    if (Icon) {
-      return () => jsx(Icon, {
-        width: "36",
-        height: "36",
-        viewBox: "0 0 54 54"
-      });
-    } else if (fieldDefinition.iconUrl) {
-      return getPaletteIcon({
-        iconUrl: fieldDefinition.iconUrl,
-        label: fieldDefinition.label
-      });
-    }
-  },
-  getTypeLabel: field => {
-    const {
-      type
-    } = field;
-    if (type === 'default') {
-      return 'Form';
-    }
-
-    // @Note: We know that we are inside the properties panel context,
-    // so we can savely use the hook here.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const fieldDefinition = useService('formFields').get(type).config;
-    return fieldDefinition.label || type;
-  }
-};
-
 /**
  * Provide placeholders for empty and multiple state.
  */
@@ -9103,6 +9084,7 @@ const PropertiesPanelPlaceholderProvider = {
   }
 };
 
+const EMPTY = {};
 function PropertiesPanel(props) {
   const {
     eventBus,
@@ -9112,7 +9094,7 @@ function PropertiesPanel(props) {
   const formEditor = injector.get('formEditor');
   const modeling = injector.get('modeling');
   const selectionModule = injector.get('selection');
-  const propertiesPanelConfig = injector.get('config.propertiesPanel') || {};
+  const propertiesPanelConfig = injector.get('config.propertiesPanel') || EMPTY;
   const {
     feelPopupContainer
   } = propertiesPanelConfig;
@@ -9166,6 +9148,11 @@ function PropertiesPanel(props) {
       return updater(groups);
     }, []);
   }, [providers, selectedFormField, editField]);
+  const formFields = getService('formFields');
+  const PropertiesPanelHeaderProvider = useMemo(() => getPropertiesPanelHeaderProvider({
+    getDocumentationRef: propertiesPanelConfig.getDocumentationRef,
+    formFields
+  }), [formFields, propertiesPanelConfig]);
   return jsx("div", {
     class: "fjs-properties-panel",
     "data-field": selectedFormField && selectedFormField.id,
@@ -9339,6 +9326,24 @@ function Action(props) {
   });
 }
 
+function useService(type, strict) {
+  const {
+    getService
+  } = useContext(FormPropertiesPanelContext);
+  return getService(type, strict);
+}
+
+/**
+ * Retrieve list of variables from the form schema.
+ *
+ * @returns { string[] } list of variables used in form schema
+ */
+function useVariables() {
+  const form = useService('formEditor');
+  const schema = form.getSchema();
+  return getSchemaVariables(schema);
+}
+
 function AltTextEntry(props) {
   const {
     editField,