@bpmn-io/form-js-editor 1.13.2 → 1.14.1-alpha.0

package/dist/assets/form-js-editor.css

@@ -857,13 +857,14 @@
   --color-grey-225-10-97: hsl(225, 10%, 97%);
   --color-grey-0-0-22: hsl(0, 0%, 22%);
   --color-blue-205-100-35: hsl(205, 100%, 35%);
+  --color-blue-205-100-40: hsl(205, 100%, 40%);
+  --color-green-150-86-44: hsl(150, 86%, 44%);
   --color-blue-205-100-45: hsl(205, 100%, 45%);
   --color-blue-205-100-50: hsl(205, 100%, 50%);
-  --color-blue-205-100-85: hsl(205, 100%, 85%);
-  --color-blue-205-100-95: hsl(205, 100%, 95%);
   --color-blue-219-99-53: hsl(219, 99%, 53%);
   --color-blue-218-100-74: hsl(218, 100%, 74%);
-  --color-green-150-86-44: hsl(150, 86%, 44%);
+  --color-blue-205-100-85: hsl(205, 100%, 85%);
+  --color-blue-205-100-95: hsl(205, 100%, 95%);
   --color-red-360-100-40: hsl(360, 100%, 40%);
   --color-red-360-100-45: hsl(360, 100%, 45%);
   --color-red-360-100-92: hsl(360, 100%, 92%);
@@ -906,6 +907,7 @@
   --input-border-color: var(--color-grey-225-10-75);
   --input-focus-background-color: var(--color-blue-205-100-95);
   --input-focus-border-color: var(--color-blue-205-100-50);
+  --focus-outline-color: var(--color-blue-205-100-40);
   --input-error-background-color: var(--color-red-360-100-97);
   --input-error-border-color: var(--color-red-360-100-45);
   --input-error-focus-border-color: var(--color-red-360-100-45);
@@ -1115,6 +1117,11 @@
   background: none;
 }
 
+.bio-properties-panel-group-header-button:focus {
+  outline-offset: 2px;
+  outline-color: var(--focus-outline-color);
+}
+
 .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
   margin-right: 0;
 }
@@ -1352,8 +1359,9 @@ select.bio-properties-panel-input {
 }
 
 .bio-properties-panel-input[type=checkbox]:focus {
-  outline: 2px solid var(--input-focus-border-color);
-  outline-offset: 0;
+  outline: auto;
+  outline-color: var(--focus-outline-color);
+  outline-offset: 2px;
 }
 
 .bio-properties-panel-checkbox > .bio-properties-panel-label {

package/dist/assets/properties-panel.css

@@ -15,13 +15,14 @@
   --color-grey-0-0-22: hsl(0, 0%, 22%);
 
   --color-blue-205-100-35: hsl(205, 100%, 35%);
+  --color-blue-205-100-40: hsl(205, 100%, 40%);
+  --color-green-150-86-44: hsl(150, 86%, 44%);
   --color-blue-205-100-45: hsl(205, 100%, 45%);
   --color-blue-205-100-50: hsl(205, 100%, 50%);
-  --color-blue-205-100-85: hsl(205, 100%, 85%);
-  --color-blue-205-100-95: hsl(205, 100%, 95%);
   --color-blue-219-99-53: hsl(219, 99%, 53%);
   --color-blue-218-100-74: hsl(218, 100%, 74%);
-  --color-green-150-86-44: hsl(150, 86%, 44%);
+  --color-blue-205-100-85: hsl(205, 100%, 85%);
+  --color-blue-205-100-95: hsl(205, 100%, 95%);
 
   --color-red-360-100-40: hsl(360, 100%, 40%);
   --color-red-360-100-45: hsl(360, 100%, 45%);
@@ -78,6 +79,7 @@
 
   --input-focus-background-color: var(--color-blue-205-100-95);
   --input-focus-border-color: var(--color-blue-205-100-50);
+  --focus-outline-color: var(--color-blue-205-100-40);
 
   --input-error-background-color: var(--color-red-360-100-97);
   --input-error-border-color: var(--color-red-360-100-45);
@@ -299,6 +301,11 @@
   background: none;
 }
 
+.bio-properties-panel-group-header-button:focus {
+  outline-offset: 2px;
+  outline-color: var(--focus-outline-color);
+}
+
 .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
   margin-right: 0;
 }
@@ -537,8 +544,9 @@ select.bio-properties-panel-input {
 }
 
 .bio-properties-panel-input[type="checkbox"]:focus {
-  outline: 2px solid var(--input-focus-border-color);
-  outline-offset: 0;
+  outline: auto;
+  outline-color: var(--focus-outline-color);
+  outline-offset: 2px;
 }
 
 .bio-properties-panel-checkbox > .bio-properties-panel-label {

package/dist/index.cjs

@@ -1618,10 +1618,10 @@ function Palette(props) {
             return jsxRuntime.jsx(PaletteEntry, {
               getPaletteIcon: getPaletteIcon,
               ...entry
-            });
+            }, entry.type);
           })
         })]
-      })), groups.length == 0 && jsxRuntime.jsx("div", {
+      }, id)), groups.length == 0 && jsxRuntime.jsx("div", {
         class: "fjs-palette-no-entries",
         children: "No components found."
       })]
@@ -1698,15 +1698,17 @@ function getPaletteIcon(entry) {
   } = entry;
   let Icon;
   if (iconUrl) {
-    Icon = () => jsxRuntime.jsx("img", {
-      class: "fjs-field-icon-image",
-      width: 36,
-      style: {
-        margin: 'auto'
-      },
-      alt: label,
-      src: formJsViewer.sanitizeImageSource(iconUrl)
-    });
+    Icon = function Icon() {
+      return jsxRuntime.jsx("img", {
+        class: "fjs-field-icon-image",
+        width: 36,
+        style: {
+          margin: 'auto'
+        },
+        alt: label,
+        src: formJsViewer.sanitizeImageSource(iconUrl)
+      });
+    };
   } else {
     Icon = icon || formJsViewer.iconsByType(type);
   }
@@ -1726,9 +1728,9 @@ const InjectedRendersRoot = () => {
   return jsxRuntime.jsx(preact.Fragment, {
     children: injectedRenderers.map(({
       Renderer
-    }) => jsxRuntime.jsx(Renderer, {
+    }, index) => jsxRuntime.jsx(Renderer, {
       ...injectedProps
-    }))
+    }, index))
   });
 };
 
@@ -9074,11 +9076,13 @@ function getPropertiesPanelHeaderProvider(options = {}) {
       const fieldDefinition = formFields.get(type).config;
       const Icon = fieldDefinition.icon || formJsViewer.iconsByType(type);
       if (Icon) {
-        return () => jsxRuntime.jsx(Icon, {
-          width: "36",
-          height: "36",
-          viewBox: "0 0 54 54"
-        });
+        return function IconComponent() {
+          return jsxRuntime.jsx(Icon, {
+            width: "36",
+            height: "36",
+            viewBox: "0 0 54 54"
+          });
+        };
       } else if (fieldDefinition.iconUrl) {
         return getPaletteIcon({
           iconUrl: fieldDefinition.iconUrl,
@@ -9444,7 +9448,7 @@ function Columns(props) {
     editField,
     id
   } = props;
-  const debounce = useService('debounce');
+  useService('debounce');
   const formLayoutValidator = useService('formLayoutValidator');
   const validate = hooks.useCallback(value => {
     return formLayoutValidator.validateField(field, value ? parseInt(value) : null);
@@ -9470,7 +9474,6 @@ function Columns(props) {
     ...asArray(16).filter(i => i >= MIN_COLUMNS).map(asOption)];
   };
   return SelectEntry({
-    debounce,
     element: field,
     id,
     label: 'Columns',
@@ -10576,8 +10579,7 @@ function IFrameHeightEntry(props) {
   })];
 }
 
-const HTTPS_PATTERN = /^(https):\/\/*/i; // eslint-disable-line no-useless-escape
-
+const HTTPS_PATTERN = /^(https):\/\/*/i;
 function IFrameUrlEntry(props) {
   const {
     editField,
@@ -10638,6 +10640,7 @@ function getTooltip$1() {
       children: ["Not all external sources can be displayed in the iFrame. Read more about it in the", ' ', jsxRuntime.jsx("a", {
         target: "_blank",
         href: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options",
+        rel: "noreferrer",
         children: "X-FRAME-OPTIONS documentation"
       }), "."]
     })]
@@ -10753,6 +10756,7 @@ const description$4 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["Supports markdown and templating.", ' ', jsxRuntime.jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
     target: "_blank",
+    rel: "noreferrer",
     children: "Learn more"
   })]
 });
@@ -10809,6 +10813,7 @@ const description$3 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', jsxRuntime.jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
     target: "_blank",
+    rel: "noreferrer",
     children: "Learn more"
   })]
 });
@@ -11948,7 +11953,6 @@ function RepeatableEntry(props) {
       path: ['nonCollapsedItems'],
       label: 'Number of non-collapsing items',
       min: 1,
-      defaultValue: 5,
       props
     });
     entries.push(nonCollapseItemsEntry);
@@ -12673,6 +12677,7 @@ const description$2 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["A comma-separated list of", ' ', jsxRuntime.jsx("a", {
     href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
     target: "_blank",
+    rel: "noreferrer",
     children: "file type specifiers"
   })]
 });
@@ -12844,9 +12849,9 @@ function EndpointKey(props) {
     }), jsxRuntime.jsxs("p", {
       children: ["The string must contain ", jsxRuntime.jsx("code", {
         children: '{ documentId }'
-      }), ", which will be replaced with the document ID from the document's reference."]
+      }), ", which will be replaced with the document ID from the document\u2018s reference."]
     }), jsxRuntime.jsx("p", {
-      children: "If you're using the Camunda Tasklist, this variable is automatically added to the context for you."
+      children: "If you\u2018re using the Camunda Tasklist, this variable is automatically added to the context for you."
     }), jsxRuntime.jsxs("p", {
       children: ["For more details, see the", ' ', jsxRuntime.jsx("a", {
         href: "https://docs.camunda.io/docs/next/components/modeler/forms/form-element-library/forms-element-library-document-preview/",
@@ -12989,13 +12994,9 @@ function GeneralGroup(field, editField, getService) {
     editField
   }), ...TextEntry({
     field,
-    editField,
-    getService
-  }), ...HtmlEntry({
+    editField}), ...HtmlEntry({
     field,
-    editField,
-    getService
-  }), ...IFrameUrlEntry({
+    editField}), ...IFrameUrlEntry({
     field,
     editField
   }), ...IFrameHeightEntry({
@@ -13317,12 +13318,11 @@ function ValidationType(props) {
     id,
     onChange
   } = props;
-  const debounce = useService('debounce');
+  useService('debounce');
   const setValue = validationType => {
     onChange('validationType')(validationType || undefined);
   };
   return SelectEntry({
-    debounce,
     element: field,
     getValue: getValue('validationType'),
     id,
@@ -13598,6 +13598,7 @@ function getTooltip() {
       children: ["Allow the iframe to access more functionality of your browser, details regarding the various options can be found in the", ' ', jsxRuntime.jsx("a", {
         target: "_blank",
         href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",
+        rel: "noreferrer",
         children: "MDN iFrame documentation."
       })]
     })