@bpmn-io/form-js-editor 1.14.0 → 1.15.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import Ids from 'ids';
-import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, ExpressionField, DocumentPreview, FormFields, sanitizeImageSource, getAncestryList, FormContext, FormRenderContext, FormComponent, getScrollContainer, Importer, PathRegistry, FormLayouter, FieldFactory, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, SECURITY_ATTRIBUTES_DEFINITIONS, createFormContainer, createInjector, MarkdownRendererModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, ExpressionField, DocumentPreview, FormFields, sanitizeImageSource, getAncestryList, FormContext, FormRenderContext, FormComponent, getScrollContainer, FieldFactory, FormLayouter, PathRegistry, Importer, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, TIME_USE24H_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_INTERVAL_PATH, TIME_SERIALISING_FORMAT_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISING_FORMATS, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, SECURITY_ATTRIBUTES_DEFINITIONS, createFormContainer, createInjector, MarkdownRendererModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, isString, uniqueBy, isObject, get, isDefined, set as set$1, reduce, without, isNil, has } from 'min-dash';
 import classnames from 'classnames';
@@ -5578,7 +5578,7 @@ function TooltipWrapper(props) {
   return jsx(Tooltip, {
     ...props,
     value: value,
-    forId: prefixId$9(forId)
+    forId: `bio-properties-panel-${forId}`
   });
 }
 function Tooltip(props) {
@@ -5589,71 +5589,52 @@ function Tooltip(props) {
     direction = 'right',
     position
   } = props;
-  const [visible, setShow] = useState(false);
-  const [focusedViaKeyboard, setFocusedViaKeyboard] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  // Tooltip will be shown after SHOW_DELAY ms from hovering over the source element.
+  const SHOW_DELAY = 200;
   let timeout = null;
   const wrapperRef = useRef(null);
   const tooltipRef = useRef(null);
-  const showTooltip = async event => {
-    const show = () => setShow(true);
-    if (!visible && !timeout) {
-      if (event instanceof MouseEvent) {
-        timeout = setTimeout(show, 200);
-      } else {
-        show();
-        setFocusedViaKeyboard(true);
-      }
+  const show = (_, delay) => {
+    if (visible) return;
+    if (delay) {
+      timeout = setTimeout(() => {
+        setVisible(true);
+      }, SHOW_DELAY);
+    } else {
+      setVisible(true);
     }
   };
-  const hideTooltip = () => {
-    setShow(false);
-    setFocusedViaKeyboard(false);
-  };
-  const hideTooltipViaEscape = e => {
-    e.code === 'Escape' && hideTooltip();
+  const hide = () => {
+    clearTimeout(timeout);
+    setVisible(false);
   };
-  const isTooltipHovered = ({
-    x,
-    y
+  const handleMouseLeave = ({
+    relatedTarget
   }) => {
-    const tooltip = tooltipRef.current;
-    const wrapper = wrapperRef.current;
-    return tooltip && (inBounds(x, y, wrapper.getBoundingClientRect()) || inBounds(x, y, tooltip.getBoundingClientRect()));
+    // Don't hide the tooltip when moving mouse between the wrapper and the tooltip.
+    if (relatedTarget === wrapperRef.current || relatedTarget === tooltipRef.current || relatedTarget?.parentElement === tooltipRef.current) {
+      return;
+    }
+    hide();
   };
-  useEffect(() => {
+  const handleFocusOut = e => {
     const {
-      current
-    } = wrapperRef;
-    if (!current) {
+      target
+    } = e;
+
+    // Don't hide the tooltip if the wrapper or the tooltip itself is clicked.
+    const isHovered = target.matches(':hover') || tooltipRef.current?.matches(':hover');
+    if (target === wrapperRef.current && isHovered) {
+      e.stopPropagation();
       return;
     }
-    const hideHoveredTooltip = e => {
-      const isFocused = document.activeElement === wrapperRef.current || document.activeElement.closest('.bio-properties-panel-tooltip');
-      if (visible && !isTooltipHovered({
-        x: e.x,
-        y: e.y
-      }) && !(isFocused && focusedViaKeyboard)) {
-        hideTooltip();
-      }
-    };
-    const hideFocusedTooltip = e => {
-      const {
-        relatedTarget
-      } = e;
-      const isTooltipChild = el => !!el.closest('.bio-properties-panel-tooltip');
-      if (visible && !isHovered(wrapperRef.current) && relatedTarget && !isTooltipChild(relatedTarget)) {
-        hideTooltip();
-      }
-    };
-    document.addEventListener('wheel', hideHoveredTooltip);
-    document.addEventListener('focusout', hideFocusedTooltip);
-    document.addEventListener('mousemove', hideHoveredTooltip);
-    return () => {
-      document.removeEventListener('wheel', hideHoveredTooltip);
-      document.removeEventListener('mousemove', hideHoveredTooltip);
-      document.removeEventListener('focusout', hideFocusedTooltip);
-    };
-  }, [wrapperRef.current, visible, focusedViaKeyboard]);
+    hide();
+  };
+  const hideTooltipViaEscape = e => {
+    e.code === 'Escape' && hide();
+  };
   const renderTooltip = () => {
     return jsxs("div", {
       class: `bio-properties-panel-tooltip ${direction}`,
@@ -5663,6 +5644,7 @@ function Tooltip(props) {
       style: position || getTooltipPosition(wrapperRef.current),
       ref: tooltipRef,
       onClick: e => e.stopPropagation(),
+      onMouseLeave: handleMouseLeave,
       children: [jsx("div", {
         class: "bio-properties-panel-tooltip-content",
         children: value
@@ -5675,39 +5657,23 @@ function Tooltip(props) {
     class: "bio-properties-panel-tooltip-wrapper",
     tabIndex: "0",
     ref: wrapperRef,
-    onMouseEnter: showTooltip,
-    onMouseLeave: () => {
-      clearTimeout(timeout);
-      timeout = null;
-    },
-    onFocus: showTooltip,
+    onMouseEnter: e => show(e, true),
+    onMouseLeave: handleMouseLeave,
+    onFocus: show,
+    onBlur: handleFocusOut,
     onKeyDown: hideTooltipViaEscape,
     children: [props.children, visible ? parent ? createPortal(renderTooltip(), parent.current) : renderTooltip() : null]
   });
 }
 
 // helper
-function inBounds(x, y, bounds) {
-  const {
-    top,
-    right,
-    bottom,
-    left
-  } = bounds;
-  return x >= left && x <= right && y >= top && y <= bottom;
-}
+
 function getTooltipPosition(refElement) {
   const refPosition = refElement.getBoundingClientRect();
   const right = `calc(100% - ${refPosition.x}px)`;
   const top = `${refPosition.top - 10}px`;
   return `right: ${right}; top: ${top};`;
 }
-function isHovered(element) {
-  return element.matches(':hover');
-}
-function prefixId$9(id) {
-  return `bio-properties-panel-${id}`;
-}
 
 /**
  * Accesses the global DescriptionContext and returns a description for a given id and element.
@@ -7230,6 +7196,7 @@ function FeelTextfieldComponent(props) {
     label,
     hostLanguage,
     onInput,
+    onBlur,
     onError,
     placeholder,
     feel,
@@ -7295,6 +7262,12 @@ function FeelTextfieldComponent(props) {
       setFocus(-1);
     }
   };
+  const handleOnBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+    setLocalValue(e.target.value.trim());
+  };
   const handleLint = useStaticCallback((lint = []) => {
     const syntaxError = lint.some(report => report.type === 'Syntax Error');
     if (syntaxError) {
@@ -7416,6 +7389,7 @@ function FeelTextfieldComponent(props) {
         ...props,
         popupOpen: popuOpen,
         onInput: handleLocalInput,
+        onBlur: handleOnBlur,
         contentAttributes: {
           'id': prefixId$5(id),
           'aria-label': label
@@ -8714,6 +8688,12 @@ function TextArea(props) {
     autoResize && resizeToContents(e.target);
     setLocalValue(e.target.value);
   };
+  const handleOnBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+    setLocalValue(e.target.value.trim());
+  };
   useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
   }, []);
@@ -8745,7 +8725,7 @@ function TextArea(props) {
       class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
       onInput: handleInput,
       onFocus: onFocus,
-      onBlur: onBlur,
+      onBlur: handleOnBlur,
       placeholder: placeholder,
       rows: rows,
       value: localValue,
@@ -8863,6 +8843,12 @@ function Textfield(props) {
   const handleInputCallback = useMemo(() => {
     return debounce(target => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
+  const handleOnBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+    setLocalValue(e.target.value.trim());
+  };
   const handleInput = e => {
     handleInputCallback(e.target);
     setLocalValue(e.target.value);
@@ -8895,7 +8881,7 @@ function Textfield(props) {
       class: "bio-properties-panel-input",
       onInput: handleInput,
       onFocus: onFocus,
-      onBlur: onBlur,
+      onBlur: handleOnBlur,
       placeholder: placeholder,
       value: localValue
     })]
@@ -9428,7 +9414,7 @@ function Columns(props) {
     editField,
     id
   } = props;
-  const debounce = useService('debounce');
+  useService('debounce');
   const formLayoutValidator = useService('formLayoutValidator');
   const validate = useCallback(value => {
     return formLayoutValidator.validateField(field, value ? parseInt(value) : null);
@@ -9454,7 +9440,6 @@ function Columns(props) {
     ...asArray(16).filter(i => i >= MIN_COLUMNS).map(asOption)];
   };
   return SelectEntry({
-    debounce,
     element: field,
     id,
     label: 'Columns',
@@ -10530,7 +10515,7 @@ function Height(props) {
     id,
     getValue,
     setValue,
-    validate: validate$a
+    validate: validate$9
   });
 }
 
@@ -10540,7 +10525,7 @@ function Height(props) {
  * @param {number|void} value
  * @returns {string|null}
  */
-const validate$a = value => {
+const validate$9 = value => {
   if (typeof value !== 'number') {
     return 'A number is required.';
   }
@@ -10604,7 +10589,7 @@ function Url(props) {
     setValue,
     singleLine: true,
     tooltip: getTooltip$1(),
-    validate: validate$9,
+    validate: validate$8,
     variables
   });
 }
@@ -10632,7 +10617,7 @@ function getTooltip$1() {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$9 = value => {
+const validate$8 = value => {
   if (!value || value.startsWith('=')) {
     return;
   }
@@ -10723,7 +10708,7 @@ function Text(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$4,
+    description: description$3,
     element: field,
     getValue,
     id,
@@ -10733,7 +10718,7 @@ function Text(props) {
     variables
   });
 }
-const description$4 = jsxs(Fragment$1, {
+const description$3 = jsxs(Fragment$1, {
   children: ["Supports markdown and templating.", ' ', jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
     target: "_blank",
@@ -10776,13 +10761,13 @@ function Content(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$3,
+    description: description$2,
     element: field,
     getValue,
     id,
     label: 'Content',
     hostLanguage: 'html',
-    validate: validate$8,
+    validate: validate$7,
     setValue,
     variables
   });
@@ -10790,7 +10775,7 @@ function Content(props) {
 
 // helpers //////////
 
-const description$3 = jsxs(Fragment$1, {
+const description$2 = jsxs(Fragment$1, {
   children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
     target: "_blank",
@@ -10803,7 +10788,7 @@ const description$3 = jsxs(Fragment$1, {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$8 = value => {
+const validate$7 = value => {
   // allow empty state
   if (typeof value !== 'string' || value === '') {
     return null;
@@ -11642,7 +11627,7 @@ function InputValuesKey(props) {
     id,
     label: 'Input values key',
     setValue,
-    validate: validate$7
+    validate: validate$6
   });
 }
 
@@ -11652,7 +11637,7 @@ function InputValuesKey(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$7 = value => {
+const validate$6 = value => {
   if (typeof value !== 'string' || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -11678,7 +11663,14 @@ function StaticOptionsSourceEntry(props) {
     editField(field, OPTIONS_SOURCES_PATHS[OPTIONS_SOURCES.STATIC], arrayAdd(values, values.length, entry));
   };
   const removeEntry = entry => {
-    editField(field, OPTIONS_SOURCES_PATHS[OPTIONS_SOURCES.STATIC], without(values, entry));
+    if (field.defaultValue === entry.value) {
+      editField(field, {
+        values: without(values, entry),
+        defaultValue: undefined
+      });
+    } else {
+      editField(field, OPTIONS_SOURCES_PATHS[OPTIONS_SOURCES.STATIC], without(values, entry));
+    }
   };
   const validateFactory = (key, getValue) => {
     return value => {
@@ -11934,7 +11926,6 @@ function RepeatableEntry(props) {
       path: ['nonCollapsedItems'],
       label: 'Number of non-collapsing items',
       min: 1,
-      defaultValue: 5,
       props
     });
     entries.push(nonCollapseItemsEntry);
@@ -12095,7 +12086,7 @@ function Source(props) {
     setValue,
     singleLine: true,
     variables,
-    validate: validate$6
+    validate: validate$5
   });
 }
 
@@ -12105,7 +12096,7 @@ function Source(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$6 = value => {
+const validate$5 = value => {
   if (!isString(value) || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12209,7 +12200,7 @@ function RowCount(props) {
     id,
     getValue,
     setValue,
-    validate: validate$5
+    validate: validate$4
   });
 }
 
@@ -12219,7 +12210,7 @@ function RowCount(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$5 = value => {
+const validate$4 = value => {
   if (isNil(value)) {
     return null;
   }
@@ -12393,7 +12384,7 @@ function ColumnsExpression(props) {
     setValue,
     singleLine: true,
     variables,
-    validate: validate$4
+    validate: validate$3
   });
 }
 
@@ -12403,7 +12394,7 @@ function ColumnsExpression(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$4 = value => {
+const validate$3 = value => {
   if (!isString(value) || value.length === 0 || value === '=') {
     return 'Must not be empty.';
   }
@@ -12501,7 +12492,7 @@ function Key(props) {
     id,
     label: 'Key',
     setValue,
-    validate: validate$3
+    validate: validate$2
   });
 }
 
@@ -12511,7 +12502,7 @@ function Key(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-function validate$3(value) {
+function validate$2(value) {
   if (!isString(value) || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12649,13 +12640,13 @@ function Accept(props) {
     singleLine: true,
     setValue,
     variables,
-    description: description$2
+    description: description$1
   });
 }
 
 // helpers //////////
 
-const description$2 = jsxs(Fragment$1, {
+const description$1 = jsxs(Fragment$1, {
   children: ["A comma-separated list of", ' ', jsx("a", {
     href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
     target: "_blank",
@@ -12776,85 +12767,6 @@ function DocumentsDataSource(props) {
     setValue,
     variables,
     tooltip,
-    validate: validate$2
-  });
-}
-
-// helpers //////////
-
-/**
- * @param {string|undefined} value
- * @returns {string|null}
- */
-const validate$2 = value => {
-  if (typeof value !== 'string' || value.length === 0) {
-    return 'The document data source is required.';
-  }
-};
-
-function EndpointKeyEntry(props) {
-  const {
-    editField,
-    field
-  } = props;
-  const entries = [];
-  entries.push({
-    id: 'endpointKey',
-    component: EndpointKey,
-    editField: editField,
-    field: field,
-    isEdited: isEdited$6,
-    isDefaultVisible: field => field.type === 'documentPreview'
-  });
-  return entries;
-}
-function EndpointKey(props) {
-  const {
-    editField,
-    field,
-    id
-  } = props;
-  const debounce = useService('debounce');
-  const variables = useVariables().map(name => ({
-    name
-  }));
-  const path = ['endpointKey'];
-  const getValue = () => {
-    return get(field, path, '');
-  };
-  const setValue = value => {
-    return editField(field, path, value);
-  };
-  const tooltip = jsxs("div", {
-    children: [jsx("p", {
-      children: "Enter a context key that generates a string with the API endpoint to download a document."
-    }), jsxs("p", {
-      children: ["The string must contain ", jsx("code", {
-        children: '{ documentId }'
-      }), ", which will be replaced with the document ID from the document\u2018s reference."]
-    }), jsx("p", {
-      children: "If you\u2018re using the Camunda Tasklist, this variable is automatically added to the context for you."
-    }), jsxs("p", {
-      children: ["For more details, see the", ' ', jsx("a", {
-        href: "https://docs.camunda.io/docs/next/components/modeler/forms/form-element-library/forms-element-library-document-preview/",
-        rel: "noopener noreferrer",
-        target: "_blank",
-        children: "Camunda documentation"
-      })]
-    })]
-  });
-  return FeelTemplatingEntry({
-    debounce,
-    element: field,
-    getValue,
-    id,
-    label: 'Document URL',
-    feel: 'required',
-    singleLine: true,
-    setValue,
-    variables,
-    description: description$1,
-    tooltip,
     validate: validate$1
   });
 }
@@ -12867,12 +12779,9 @@ function EndpointKey(props) {
  */
 const validate$1 = value => {
   if (typeof value !== 'string' || value.length === 0) {
-    return 'The document reference is required.';
+    return 'The document data source is required.';
   }
 };
-const description$1 = jsx(Fragment$1, {
-  children: "Define an API URL for downloading a document"
-});
 
 function MaxHeightEntry(props) {
   const {
@@ -12976,13 +12885,9 @@ function GeneralGroup(field, editField, getService) {
     editField
   }), ...TextEntry({
     field,
-    editField,
-    getService
-  }), ...HtmlEntry({
+    editField}), ...HtmlEntry({
     field,
-    editField,
-    getService
-  }), ...IFrameUrlEntry({
+    editField}), ...IFrameUrlEntry({
     field,
     editField
   }), ...IFrameHeightEntry({
@@ -13304,12 +13209,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,
@@ -13659,21 +13563,6 @@ const TOOLTIP_TEXT = `"List of items" defines a constant, predefined set of form
 "Expression" defines options that are populated from a FEEL expression.
 `;
 
-function DownloadSettings(field, editField) {
-  const entries = [...EndpointKeyEntry({
-    field,
-    editField
-  })];
-  if (!entries.length) {
-    return null;
-  }
-  return {
-    id: 'downloadSettings',
-    label: 'Download settings',
-    entries
-  };
-}
-
 class PropertiesProvider {
   constructor(propertiesPanel, injector) {
     this._injector = injector;
@@ -13709,7 +13598,7 @@ class PropertiesProvider {
         return groups;
       }
       const getService = (type, strict = true) => this._injector.get(type, strict);
-      groups = [...groups, GeneralGroup(field, editField, getService), DownloadSettings(field, editField), ...OptionsGroups(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
+      groups = [...groups, GeneralGroup(field, editField, getService), ...OptionsGroups(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), 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