@bpmn-io/form-js-playground 1.7.1 → 1.7.2

package/dist/form-playground.umd.js

@@ -53323,20 +53323,59 @@
     }, [conditionChecker, condition, expressionContextInfo]);
   }
 
-  // parses the options data from the provided form field and form data
-  function getOptionsData(formField, formData) {
+  /**
+   * Returns the options data for the provided if they can be simply determined, ignoring expression defined options.
+   *
+   * @param {object} formField
+   * @param {object} formData
+   */
+  function getSimpleOptionsData(formField, formData) {
     const {
+      valuesExpression: optionsExpression,
       valuesKey: optionsKey,
       values: staticOptions
     } = formField;
+    if (optionsExpression) {
+      return null;
+    }
     return optionsKey ? get$1(formData, [optionsKey]) : staticOptions;
   }
 
-  // transforms the provided options into a normalized format, trimming invalid options
+  /**
+   * Normalizes the provided options data to a format that can be used by the select components.
+   * If the options data is not valid, it is filtered out.
+   *
+   * @param {any[]} optionsData
+   *
+   * @returns {object[]}
+   */
   function normalizeOptionsData(optionsData) {
     return optionsData.filter(_isAllowedValue).map(_normalizeOption).filter(o => !isNil$1(o));
   }
 
+  /**
+   * Creates an options object with default values if no options are provided.
+   *
+   * @param {object} options
+   *
+   * @returns {object}
+   */
+  function createEmptyOptions(options = {}) {
+    const defaults = {};
+
+    // provide default options if valuesKey and valuesExpression are not set
+    if (!options.valuesKey && !options.valuesExpression) {
+      defaults.values = [{
+        label: 'Value',
+        value: 'value'
+      }];
+    }
+    return {
+      ...defaults,
+      ...options
+    };
+  }
+
   /**
    * Converts the provided option to a normalized format.
    * If the option is not valid, null is returned.
@@ -53387,21 +53426,6 @@
     }
     return _isAllowedPrimitive(value);
   }
-  function createEmptyOptions(options = {}) {
-    const defaults = {};
-
-    // provide default options if valuesKey and valuesExpression are not set
-    if (!options.valuesKey && !options.valuesExpression) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
-    }
-    return {
-      ...defaults,
-      ...options
-    };
-  }
 
   /**
    * Evaluate a string reactively based on the expressionLanguage and form data.
@@ -53421,29 +53445,20 @@
       return value;
     }, [expressionLanguage, expressionContextInfo, value]);
   }
-  function usePrevious$1(value, defaultValue = null) {
-    const ref = s$1(defaultValue);
-    y(() => ref.current = value, [value]);
-    return ref.current;
-  }
 
   /**
    * A custom hook to manage state changes with deep comparison.
    *
-   * @param {any} value - The current value to manage.
-   * @param {any} defaultValue - The initial default value for the state.
-   * @returns {any} - Returns the current state.
+   * @template T
+   * @param {T} value - The current value to manage.
+   * @returns {T} - Returns the current state.
    */
-  function useDeepCompareState(value, defaultValue) {
-    const [state, setState] = l$1(defaultValue);
-    const previous = usePrevious$1(value, defaultValue);
-    const changed = !isEqual$1(previous, value);
-    y(() => {
-      if (changed) {
-        setState(value);
-      }
-    }, [changed, value]);
-    return state;
+  function useDeepCompareMemoize(value) {
+    const ref = s$1();
+    if (!isEqual$1(value, ref.current)) {
+      ref.current = value;
+    }
+    return ref.current;
   }
 
   /**
@@ -53473,15 +53488,10 @@
       valuesKey: optionsKey,
       values: staticOptions
     } = field;
-    const [optionsGetter, setOptionsGetter] = l$1({
-      options: [],
-      error: undefined,
-      loadState: LOAD_STATES.LOADING
-    });
     const initialData = useService$2('form')._getState().initialData;
     const expressionEvaluation = useExpressionEvaluation(optionsExpression);
-    const evaluatedOptions = useDeepCompareState(expressionEvaluation || [], []);
-    y(() => {
+    const evaluatedOptions = useDeepCompareMemoize(expressionEvaluation || []);
+    const optionsGetter = d(() => {
       let options = [];
 
       // dynamic options
@@ -53496,18 +53506,16 @@
         options = Array.isArray(staticOptions) ? staticOptions : [];
 
         // expression
-      } else if (optionsExpression) {
-        if (evaluatedOptions && Array.isArray(evaluatedOptions)) {
-          options = evaluatedOptions;
-        }
+      } else if (optionsExpression && evaluatedOptions && Array.isArray(evaluatedOptions)) {
+        options = evaluatedOptions;
+
+        // error case
       } else {
-        setOptionsGetter(buildErrorState('No options source defined in the form definition'));
-        return;
+        return buildErrorState('No options source defined in the form definition');
       }
 
       // normalize data to support primitives and partially defined objects
-      options = normalizeOptionsData(options);
-      setOptionsGetter(buildLoadedState(options));
+      return buildLoadedState(normalizeOptionsData(options));
     }, [optionsKey, staticOptions, initialData, optionsExpression, evaluatedOptions]);
     return optionsGetter;
   }
@@ -53552,14 +53560,14 @@
     };
   };
 
-  /**
-   * A custom hook to build up security attributes from form configuration.
-   *
-   * @param {Object} security - The security configuration.
-   * @returns {Array} - Returns a tuple with sandbox and allow attributes.
+  /**
+   * A custom hook to build up security attributes from form configuration.
+   *
+   * @param {Object} security - The security configuration.
+   * @returns {Array} - Returns a tuple with sandbox and allow attributes.
    */
   function useSecurityAttributesMap(security) {
-    const securityMemoized = useDeepCompareState(security);
+    const securityMemoized = useDeepCompareMemoize(security);
     const sandbox = d(() => SECURITY_ATTRIBUTES_DEFINITIONS.filter(({
       attribute
     }) => attribute === SANDBOX_ATTRIBUTE).filter(({
@@ -53729,6 +53737,11 @@
     }
     return readonly || false;
   }
+  function usePrevious$1(value, defaultValue = null) {
+    const ref = s$1(defaultValue);
+    y(() => ref.current = value, [value]);
+    return ref.current;
+  }
   function useFlushDebounce(func) {
     const timeoutRef = s$1(null);
     const lastArgsRef = s$1(null);
@@ -53991,8 +54004,16 @@
       data,
       value
     } = options;
+    const {
+      valuesExpression: optionsExpression
+    } = formField;
     try {
-      const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
+      // if options are expression evaluated, we don't need to sanitize the value against the options
+      // and defer to the field's internal validation
+      if (optionsExpression) {
+        return value;
+      }
+      const validValues = normalizeOptionsData(getSimpleOptionsData(formField, data)).map(v => v.value);
       return hasEqualValue(value, validValues) ? value : null;
     } catch (error) {
       // use default value in case of formatting error
@@ -54006,8 +54027,16 @@
       data,
       value
     } = options;
+    const {
+      valuesExpression: optionsExpression
+    } = formField;
     try {
-      const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
+      // if options are expression evaluated, we don't need to sanitize the values against the options
+      // and defer to the field's internal validation
+      if (optionsExpression) {
+        return value;
+      }
+      const validValues = normalizeOptionsData(getSimpleOptionsData(formField, data)).map(v => v.value);
       return value.filter(v => hasEqualValue(v, validValues));
     } catch (error) {
       // use default value in case of formatting error
@@ -54093,7 +54122,7 @@
       onChange,
       values
     } = props;
-    const memoizedValues = useDeepCompareState(values, []);
+    const memoizedValues = useDeepCompareMemoize(values || []);
 
     // ensures that the values are always a subset of the possible options
     y(() => {
@@ -54783,7 +54812,7 @@
     const [forceFocusCalendar, setForceFocusCalendar] = l$1(false);
 
     // ensures we render based on date value instead of reference
-    const date = useDeepCompareState(dateObject, null);
+    const date = useDeepCompareMemoize(dateObject);
 
     // shorts the date value back to the source
     y(() => {
@@ -56487,8 +56516,8 @@
               'fjs-readonly': readonly
             }),
             children: [e("button", {
-              class: "fjs-number-arrow-up",
               type: "button",
+              class: "fjs-number-arrow-up",
               "aria-label": "Increment",
               onClick: () => increment(),
               tabIndex: -1,
@@ -56496,8 +56525,8 @@
             }), e("div", {
               class: "fjs-number-arrow-separator"
             }), e("button", {
-              class: "fjs-number-arrow-down",
               type: "button",
+              class: "fjs-number-arrow-down",
               "aria-label": "Decrement",
               onClick: () => decrement(),
               tabIndex: -1,
@@ -57171,7 +57200,7 @@
     } = useOptionsAsync(field);
 
     // ensures we render based on array content instead of reference
-    const values = useDeepCompareState(value || [], []);
+    const values = useDeepCompareMemoize(value || []);
     useCleanupMultiSelectValue({
       field,
       loadState,
@@ -59566,18 +59595,18 @@
           'fjs-remove-allowed': repeaterField.allowAddRemove
         }),
         children: [showAdd ? e("button", {
+          type: "button",
           readOnly: readonly,
           disabled: disabled || readonly,
           class: "fjs-repeat-render-add",
-          type: "button",
           ref: addButtonRef,
           onClick: onAddItem,
           children: e(d$1, {
             children: [e(AddSvg, {}), " ", 'Add new']
           })
         }) : null, collapseEnabled ? e("button", {
-          class: "fjs-repeat-render-collapse",
           type: "button",
+          class: "fjs-repeat-render-collapse",
           onClick: toggle,
           children: isCollapsed ? e(d$1, {
             children: [e(ExpandSvg, {}), " ", `Expand all (${values.length})`]
@@ -59651,8 +59680,8 @@
           })
         })
       }), e("button", {
-        class: "fjs-repeat-row-remove",
         type: "button",
+        class: "fjs-repeat-row-remove",
         "aria-label": `Remove list item ${index + 1}`,
         onClick: () => onDeleteItem(index),
         children: e("div", {
@@ -67729,6 +67758,7 @@
       }
     };
     return e("button", {
+      type: "button",
       class: "fjs-palette-field fjs-drag-copy fjs-no-drop",
       "data-field-type": type,
       title: `Create ${getIndefiniteArticle(type)} ${label} element`,
@@ -67820,6 +67850,7 @@
           value: searchTerm,
           onInput: handleInput
         }), searchTerm && e("button", {
+          type: "button",
           title: "Clear content",
           class: "fjs-palette-search-clear",
           onClick: handleClear,
@@ -68564,6 +68595,7 @@
         field: field
       }), e(ContextPad, {
         children: selection.isSelected(field) && field.type !== 'default' ? e("button", {
+          type: "button",
           title: getRemoveButtonTitle(field, formFields),
           class: "fjs-context-pad-item",
           onClick: onRemove,
@@ -75988,7 +76020,7 @@
       getValue,
       id,
       label: 'Disabled',
-      tooltip: 'Field cannot be edited by the end-user, and the data is not submitted.',
+      tooltip: 'Field cannot be edited by the end-user, and the data is not submitted. Takes precedence over read only.',
       inline: true,
       setValue
     });
@@ -77835,15 +77867,20 @@
       editField,
       field
     } = props;
+    const {
+      disabled
+    } = field;
     const entries = [];
-    entries.push({
-      id: 'readonly',
-      component: Readonly,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$6,
-      isDefaultVisible: field => INPUTS.includes(field.type)
-    });
+    if (!disabled) {
+      entries.push({
+        id: 'readonly',
+        component: Readonly,
+        editField: editField,
+        field: field,
+        isEdited: isEdited$6,
+        isDefaultVisible: field => INPUTS.includes(field.type)
+      });
+    }
     return entries;
   }
   function Readonly(props) {
@@ -79707,6 +79744,7 @@
         }), e("div", {
           class: "fjs-pgl-modal-footer",
           children: e("button", {
+            type: "button",
             class: "fjs-pgl-button fjs-pgl-button-default",
             onClick: props.onClose,
             children: "Close"
@@ -81685,6 +81723,7 @@
           name: "Form Definition",
           children: [displayActions && e(Section.HeaderItem, {
             children: e("button", {
+              type: "button",
               class: "fjs-pgl-button",
               title: "Download form definition",
               onClick: handleDownload,
@@ -81692,6 +81731,7 @@
             })
           }), displayActions && e(Section.HeaderItem, {
             children: e("button", {
+              type: "button",
               class: "fjs-pgl-button",
               onClick: showEmbedModal,
               children: "Embed"

package/dist/index.cjs

@@ -49,6 +49,7 @@ function Modal(props) {
       }), jsxRuntime.jsx("div", {
         class: "fjs-pgl-modal-footer",
         children: jsxRuntime.jsx("button", {
+          type: "button",
           class: "fjs-pgl-button fjs-pgl-button-default",
           onClick: props.onClose,
           children: "Close"
@@ -499,6 +500,7 @@ function PlaygroundRoot(props) {
         name: "Form Definition",
         children: [displayActions && jsxRuntime.jsx(Section.HeaderItem, {
           children: jsxRuntime.jsx("button", {
+            type: "button",
             class: "fjs-pgl-button",
             title: "Download form definition",
             onClick: handleDownload,
@@ -506,6 +508,7 @@ function PlaygroundRoot(props) {
           })
         }), displayActions && jsxRuntime.jsx(Section.HeaderItem, {
           children: jsxRuntime.jsx("button", {
+            type: "button",
             class: "fjs-pgl-button",
             onClick: showEmbedModal,
             children: "Embed"