commits' author was amended

.eslintignore

@@ -1,3 +1,3 @@
-dist
-node_modules
-types
+dist
+node_modules
+types

lerna.json

@@ -1,4 +1,4 @@
 {
-  "version": "1.8.7",
+  "version": "1.9.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

packages/form-js-carbon-styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-carbon-styles",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "Custom carbon styles for form-js",
   "scripts": {
     "all": "run-s test",
@@ -18,7 +18,7 @@
     "url": "https://github.com/bpmn-io"
   },
   "devDependencies": {
-    "@bpmn-io/form-js-viewer": "^1.8.7",
+    "@bpmn-io/form-js-viewer": "^1.8.8",
     "@carbon/elements": "^11.44.0",
     "styled-components": "^6.1.8"
   },

packages/form-js-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-editor",
-  "version": "1.8.7",
+  "version": "1.9.0",
   "description": "Edit forms - powered by bpmn.io",
   "exports": {
     ".": {
@@ -48,8 +48,8 @@
   },
   "dependencies": {
     "@bpmn-io/draggle": "^4.0.0",
-    "@bpmn-io/form-js-viewer": "^1.8.7",
-    "@bpmn-io/properties-panel": "^3.20.0",
+    "@bpmn-io/form-js-viewer": "^1.8.8",
+    "@bpmn-io/properties-panel": "^3.20.1",
     "array-move": "^3.0.1",
     "big.js": "^6.2.1",
     "ids": "^1.0.5",

packages/form-js-editor/src/features/properties-panel/PropertiesPanel.js

@@ -6,16 +6,18 @@ import { reduce, isArray } from 'min-dash';
 
 import { FormPropertiesPanelContext } from './context';
 
-import { PropertiesPanelHeaderProvider } from './PropertiesPanelHeaderProvider';
+import { getPropertiesPanelHeaderProvider } from './PropertiesPanelHeaderProvider';
 import { PropertiesPanelPlaceholderProvider } from './PropertiesPanelPlaceholderProvider';
 
+const EMPTY = {};
+
 export function PropertiesPanel(props) {
   const { eventBus, getProviders, injector } = 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;
 
@@ -83,6 +85,17 @@ export function PropertiesPanel(props) {
     );
   }, [providers, selectedFormField, editField]);
 
+  const formFields = getService('formFields');
+
+  const PropertiesPanelHeaderProvider = useMemo(
+    () =>
+      getPropertiesPanelHeaderProvider({
+        getDocumentationRef: propertiesPanelConfig.getDocumentationRef,
+        formFields,
+      }),
+    [formFields, propertiesPanelConfig],
+  );
+
   return (
     <div
       class="fjs-properties-panel"

packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js

@@ -1,65 +1,50 @@
 import { textToLabel } from './Util';
-
 import { iconsByType } from '../../render/components/icons';
-
 import { getPaletteIcon } from '../palette/components/Palette';
 
-import { useService } from './hooks';
-
 const headerlessTypes = ['spacer', 'separator', 'expression', 'html'];
 
-export 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 () => <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;
-  },
-};
+export function getPropertiesPanelHeaderProvider(options = {}) {
+  const { 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 () => <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,
+  };
+}

packages/form-js-editor/src/features/properties-panel/PropertiesProvider.js

@@ -10,6 +10,7 @@ import {
   TableHeaderGroups,
   LayoutGroup,
   SecurityAttributesGroup,
+  StyleGroup,
 } from './groups';
 
 import { hasEntryConfigured } from './Util';
@@ -51,12 +52,13 @@ export class PropertiesProvider {
       if (!field) {
         return groups;
       }
-
+      
       const getService = (type, strict = true) => this._injector.get(type, strict);
 
       groups = [
         ...groups,
         GeneralGroup(field, editField, getService),
+        StyleGroup(field, editField),
         ...OptionsGroups(field, editField, getService),
         ...TableHeaderGroups(field, editField),
         SecurityAttributesGroup(field, editField),
@@ -69,9 +71,10 @@ export class PropertiesProvider {
         CustomPropertiesGroup(field, editField),
       ].filter((group) => group != null);
 
+
       this._filterVisibleEntries(groups, field, getService);
 
-      // contract: if a group has no entries or items, it should not be displayed at all
+
       return groups.filter((group) => {
         return group.items || (group.entries && group.entries.length);
       });

packages/form-js-editor/src/features/properties-panel/entries/DirectionEntry.js

@@ -0,0 +1,61 @@
+import { get } from 'min-dash';
+import { useService } from '../hooks';
+import { SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
+import { useDirection } from '../../../../../form-js-viewer/src/render/context/DirectionContext';
+
+export function DirectionEntry(props) {
+  const { editField, field } = props;
+
+  const entries = [
+    {
+      id: 'direction',
+      component: Direction,
+      editField,
+      field,
+      isEdited: isSelectEntryEdited,
+      isDefaultVisible: (field) => field.type === 'default',
+    },
+  ];
+
+  return entries;
+}
+
+function Direction(props) {
+  const { editField, field, id } = props;
+  const { setDirection } = useDirection(); // Get the context
+
+  const debounce = useService('debounce');
+
+  const path = ['direction'];
+
+  const getValue = () => {
+    const value = get(field, path, 'ltr');
+    return value;
+  };
+
+  const setValue = (value) => {
+    setDirection(value); // Update context
+    return editField(field, path, value || 'ltr');
+  };
+
+  const getOptions = () => [
+    {
+      label: 'Left to Right',
+      value: 'ltr',
+    },
+    {
+      label: 'Right to Left',
+      value: 'rtl',
+    },
+  ];
+
+  return SelectEntry({
+    debounce,
+    element: field,
+    getValue,
+    id: 'direction',
+    label: 'Direction',
+    setValue,
+    getOptions,
+  });
+}

packages/form-js-editor/src/features/properties-panel/entries/index.js

@@ -39,3 +39,4 @@ export { RowCountEntry } from './RowCountEntry';
 export { HeadersSourceSelectEntry } from './HeadersSourceSelectEntry';
 export { ColumnsExpressionEntry } from './ColumnsExpressionEntry';
 export { StaticColumnsSourceEntry } from './StaticColumnsSourceEntry';
+export { DirectionEntry } from './DirectionEntry';

packages/form-js-editor/src/features/properties-panel/groups/StyleGroup.js

@@ -0,0 +1,15 @@
+import { DirectionEntry } from '../entries/DirectionEntry';
+
+export function StyleGroup(field, editField, getService) {
+  const entries = [...DirectionEntry({ field, editField, getService })];
+
+  if (entries.length === 0) {
+    return null;
+  }
+
+  return {
+    id: 'style',
+    label: 'Style',
+    entries,
+  };
+}

packages/form-js-editor/src/features/properties-panel/groups/index.js

@@ -9,3 +9,5 @@ export { LayoutGroup } from './LayoutGroup';
 export { SecurityAttributesGroup } from './SecurityAttributesGroup';
 export { ConditionGroup } from './ConditionGroup';
 export { TableHeaderGroups } from './TableHeaderGroups';
+export { StyleGroup } from './StyleGroup';
+

packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanelHeaderProvider.spec.js

@@ -2,7 +2,7 @@ import { cleanup, render } from '@testing-library/preact/pure';
 
 import { FormFields } from '@bpmn-io/form-js-viewer';
 
-import { PropertiesPanelHeaderProvider } from '../../../../src/features/properties-panel/PropertiesPanelHeaderProvider';
+import { getPropertiesPanelHeaderProvider } from '../../../../src/features/properties-panel/PropertiesPanelHeaderProvider';
 
 import { MockPropertiesPanelContext, TestPropertiesPanel } from './helper';
 
@@ -50,6 +50,22 @@ describe('PropertiesPanelHeaderProvider', function () {
     expect(label.innerText).to.eql(field.label);
   });
 
+  it('should render documentation link', function () {
+    // given
+    const field = { type: 'textfield' };
+
+    const getDocumentationRef = () => 'https://example.com/';
+
+    // when
+    const { container } = renderHeader({ field, getDocumentationRef });
+
+    // then
+    const documentationLink = container.querySelector('.bio-properties-panel-header-link');
+
+    expect(documentationLink).to.exist;
+    expect(documentationLink.href).to.eql(getDocumentationRef());
+  });
+
   describe('extension support', function () {
     it('should render type label from config', function () {
       // given
@@ -130,7 +146,7 @@ describe('PropertiesPanelHeaderProvider', function () {
 
 // helpers /////////
 
-function renderHeader({ services, ...restOptions }) {
+function renderHeader({ services = {}, getDocumentationRef, ...restOptions }) {
   const defaultField = { type: 'textfield' };
 
   const options = {
@@ -140,7 +156,13 @@ function renderHeader({ services, ...restOptions }) {
 
   return render(
     <MockPropertiesPanelContext options={options} services={services}>
-      <TestPropertiesPanel field={options.field} headerProvider={PropertiesPanelHeaderProvider} />
+      <TestPropertiesPanel
+        field={options.field}
+        headerProvider={getPropertiesPanelHeaderProvider({
+          formFields: services.formFields || new FormFields(),
+          getDocumentationRef,
+        })}
+      />
     </MockPropertiesPanelContext>,
   );
 }

packages/form-js-integration/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-integration",
-  "version": "1.8.7",
+  "version": "1.9.0",
   "description": "A set of form-js integration testing resources",
   "private": true,
   "scripts": {
@@ -17,6 +17,6 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/form-js": "^1.8.7"
+    "@bpmn-io/form-js": "^1.9.0"
   }
 }