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

package/dist/form-playground.umd.js

@@ -82382,81 +82382,63 @@
   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
-    } = F$1(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 () => e(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 () => e(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.
@@ -82473,6 +82455,7 @@
       };
     }
   };
+  const EMPTY = {};
   function PropertiesPanel(props) {
     const {
       eventBus,
@@ -82482,7 +82465,7 @@
     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;
@@ -82536,6 +82519,11 @@
         return updater(groups);
       }, []);
     }, [providers, selectedFormField, editField]);
+    const formFields = getService('formFields');
+    const PropertiesPanelHeaderProvider = d(() => getPropertiesPanelHeaderProvider({
+      getDocumentationRef: propertiesPanelConfig.getDocumentationRef,
+      formFields
+    }), [formFields, propertiesPanelConfig]);
     return e("div", {
       class: "fjs-properties-panel",
       "data-field": selectedFormField && selectedFormField.id,
@@ -82706,6 +82694,23 @@
       setValue
     });
   }
+  function useService(type, strict) {
+    const {
+      getService
+    } = F$1(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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-playground",
-  "version": "1.8.8",
+  "version": "1.9.0",
   "description": "A form-js playground",
   "files": [
     "dist"
@@ -45,7 +45,7 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/form-js-editor": "^1.8.8",
+    "@bpmn-io/form-js-editor": "^1.9.0",
     "@bpmn-io/form-js-viewer": "^1.8.8",
     "@codemirror/autocomplete": "^6.16.0",
     "@codemirror/commands": "^6.5.0",
@@ -71,5 +71,5 @@
     "rollup-plugin-css-only": "^4.5.2",
     "style-loader": "^4.0.0"
   },
-  "gitHead": "7549b6d3423ae88e877510bb0c8ac27ab8d07758"
+  "gitHead": "12f4d5ecd109d90e9203006097918daed1199d91"
 }