@bpmn-io/properties-panel 3.2.0 → 3.2.1

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import { useContext, useRef, useEffect as useEffect$1, useMemo, useCallback, useState as useState$1, useLayoutEffect } from '../preact/hooks';
+import { useContext, useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect } from '../preact/hooks';
 import { isFunction, isArray, get, assign, set, sortBy, find, isString, isNumber, debounce } from 'min-dash';
-import { useState, useEffect, forwardRef } from '../preact/compat';
+import { createPortal, forwardRef } from '../preact/compat';
 import { jsx, jsxs } from '../preact/jsx-runtime';
 import { createContext, createElement } from '../preact';
 import classnames from 'classnames';
@@ -212,7 +212,8 @@ function TooltipWrapper(props) {
 function Tooltip(props) {
   const {
     forId,
-    value
+    value,
+    parent
   } = props;
   const [visible, setShow] = useState(false);
   let timeout = null;
@@ -263,25 +264,17 @@ function Tooltip(props) {
         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]);
-  return jsxs("div", {
-    class: "bio-properties-panel-tooltip-wrapper",
-    tabIndex: "0",
-    ref: wrapperRef,
-    onMouseEnter: showTooltip,
-    onMouseLeave: () => clearTimeout(timeout),
-    onFocus: showTooltip,
-    onKeyDown: hideTooltipViaEscape,
-    onMouseDown: e => {
-      e.preventDefault();
-    },
-    children: [props.children, visible ? jsxs("div", {
+  const renderTooltip = () => {
+    return jsxs("div", {
       class: "bio-properties-panel-tooltip",
       role: "tooltip",
       id: "bio-properties-panel-tooltip",
@@ -295,7 +288,20 @@ function Tooltip(props) {
       }), jsx("div", {
         class: "bio-properties-panel-tooltip-arrow"
       })]
-    }) : null]
+    });
+  };
+  return jsxs("div", {
+    class: "bio-properties-panel-tooltip-wrapper",
+    tabIndex: "0",
+    ref: wrapperRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: () => clearTimeout(timeout),
+    onFocus: showTooltip,
+    onKeyDown: hideTooltipViaEscape,
+    onMouseDown: e => {
+      e.preventDefault();
+    },
+    children: [props.children, visible ? parent ? createPortal(renderTooltip(), parent.current) : renderTooltip() : null]
   });
 }
 
@@ -378,7 +384,7 @@ function useEvent(event, callback, eventBus) {
   }
 
   // (2) update subscription after inputs changed
-  useEffect$1(() => {
+  useEffect(() => {
     if (eventBus && didMount.current) {
       eventBus.on(event, callback);
     }
@@ -461,7 +467,7 @@ function useLayoutState(path, defaultValue) {
 
 function usePrevious(value) {
   const ref = useRef();
-  useEffect$1(() => {
+  useEffect(() => {
     ref.current = value;
   });
   return ref.current;
@@ -488,7 +494,7 @@ function useShowEntryEvent(id) {
       }
     }
   }, [id]);
-  useEffect$1(() => {
+  useEffect(() => {
     if (focus.current && ref.current) {
       if (isFunction(ref.current.focus)) {
         ref.current.focus();
@@ -519,19 +525,19 @@ function useShowEntryEvent(id) {
  * @param {setSticky} setSticky
  */
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
-  const [scrollContainer, setScrollContainer] = useState$1(query(scrollContainerSelector));
+  const [scrollContainer, setScrollContainer] = useState(query(scrollContainerSelector));
   const updateScrollContainer = useCallback(() => {
     const newScrollContainer = query(scrollContainerSelector);
     if (newScrollContainer !== scrollContainer) {
       setScrollContainer(newScrollContainer);
     }
   }, [scrollContainerSelector, scrollContainer]);
-  useEffect$1(() => {
+  useEffect(() => {
     updateScrollContainer();
   }, [updateScrollContainer]);
   useEvent('propertiesPanel.attach', updateScrollContainer);
   useEvent('propertiesPanel.detach', updateScrollContainer);
-  useEffect$1(() => {
+  useEffect(() => {
     const Observer = IntersectionObserver;
 
     // return early if IntersectionObserver is not available
@@ -602,11 +608,11 @@ function Group(props) {
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
   const toggleOpen = () => setOpen(!open);
-  const [edited, setEdited] = useState$1(false);
-  const [sticky, setSticky] = useState$1(false);
+  const [edited, setEdited] = useState(false);
+  const [sticky, setSticky] = useState(false);
 
   // set edited state depending on all entries
-  useEffect$1(() => {
+  useEffect(() => {
     const hasOneEditedEntry = entries.find(entry => {
       const {
         id,
@@ -646,6 +652,7 @@ function Group(props) {
           value: props.tooltip,
           forId: 'group-' + id,
           element: element,
+          parent: groupRef,
           children: label
         })
       }), jsxs("div", {
@@ -826,14 +833,14 @@ function PropertiesPanel(props) {
   } = props;
 
   // set-up layout context
-  const [layout, setLayout] = useState$1(createLayout(layoutConfig));
+  const [layout, setLayout] = useState(createLayout(layoutConfig));
 
   // react to external changes in the layout config
   useUpdateLayoutEffect(() => {
     const newLayout = createLayout(layoutConfig);
     setLayout(newLayout);
   }, [layoutConfig]);
-  useEffect$1(() => {
+  useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
     }
@@ -855,7 +862,7 @@ function PropertiesPanel(props) {
 
   // set-up description context
   const description = useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
-  useEffect$1(() => {
+  useEffect(() => {
     if (typeof descriptionLoaded === 'function') {
       descriptionLoaded(description);
     }
@@ -870,7 +877,7 @@ function PropertiesPanel(props) {
 
   // set-up tooltip context
   const tooltip = useMemo(() => createTooltipContext(tooltipConfig), [tooltipConfig]);
-  useEffect$1(() => {
+  useEffect(() => {
     if (typeof tooltipLoaded === 'function') {
       tooltipLoaded(tooltip);
     }
@@ -882,7 +889,7 @@ function PropertiesPanel(props) {
     tooltip,
     getTooltipForId
   };
-  const [errors, setErrors] = useState$1({});
+  const [errors, setErrors] = useState({});
   const onSetErrors = ({
     errors
   }) => setErrors(errors);
@@ -998,7 +1005,7 @@ function DropdownButton(props) {
   } = props;
   const dropdownRef = useRef(null);
   const menuRef = useRef(null);
-  const [open, setOpen] = useState$1(false);
+  const [open, setOpen] = useState(false);
   const close = () => setOpen(false);
   function onDropdownToggle(event) {
     if (menuRef.current && menuRef.current.contains(event.target)) {
@@ -1057,7 +1064,7 @@ function MenuItem({
  * @param {Function} callback
  */
 function useGlobalClick(ignoredElements, callback) {
-  useEffect$1(() => {
+  useEffect(() => {
     /**
      * @param {MouseEvent} event
      */
@@ -1100,7 +1107,7 @@ function CollapsibleEntry(props) {
     open: shouldOpen,
     remove
   } = props;
-  const [open, setOpen] = useState$1(shouldOpen);
+  const [open, setOpen] = useState(shouldOpen);
   const toggleOpen = () => setOpen(!open);
   const {
     onShow
@@ -1166,7 +1173,7 @@ function ListItem(props) {
   } = props;
 
   // focus specified entry on auto open
-  useEffect$1(() => {
+  useEffect(() => {
     if (autoOpen && autoFocusEntry) {
       const entry = query(`[data-entry-id="${autoFocusEntry}"]`);
       const focusableInput = query('.bio-properties-panel-input', entry);
@@ -1205,13 +1212,13 @@ function ListGroup(props) {
   } = props;
   const groupRef = useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
-  const [sticky, setSticky] = useState$1(false);
+  const [sticky, setSticky] = useState(false);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
-  const [ordering, setOrdering] = useState$1([]);
-  const [newItemAdded, setNewItemAdded] = useState$1(false);
+  const [ordering, setOrdering] = useState([]);
+  const [newItemAdded, setNewItemAdded] = useState(false);
 
   // Flag to mark that add button was clicked in the last render cycle
-  const [addTriggered, setAddTriggered] = useState$1(false);
+  const [addTriggered, setAddTriggered] = useState(false);
   const prevItems = usePrevious(items);
   const prevElement = usePrevious(element);
   const elementChanged = element !== prevElement;
@@ -1225,14 +1232,14 @@ function ListGroup(props) {
   // keep ordering in sync to items - and open changes
 
   // (0) set initial ordering from given items
-  useEffect$1(() => {
+  useEffect(() => {
     if (!prevItems || !shouldSort) {
       setOrdering(createOrdering(items));
     }
   }, [items, element]);
 
   // (1) items were added
-  useEffect$1(() => {
+  useEffect(() => {
     // reset addTriggered flag
     setAddTriggered(false);
     if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
@@ -1273,14 +1280,14 @@ function ListGroup(props) {
   }, [items, open, shouldHandleEffects, addTriggered]);
 
   // (2) sort items on open if shouldSort is set
-  useEffect$1(() => {
+  useEffect(() => {
     if (shouldSort && open && !newItemAdded) {
       setOrdering(createOrdering(sortItems(items)));
     }
   }, [open, shouldSort]);
 
   // (3) items were deleted
-  useEffect$1(() => {
+  useEffect(() => {
     if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
       let keep = [];
       ordering.forEach(o => {
@@ -1330,6 +1337,7 @@ function ListGroup(props) {
           value: props.tooltip,
           forId: 'group-' + id,
           element: element,
+          parent: groupRef,
           children: label
         })
       }), jsxs("div", {
@@ -1425,7 +1433,7 @@ function Checkbox(props) {
     onBlur,
     tooltip
   } = props;
-  const [localValue, setLocalValue] = useState$1(value);
+  const [localValue, setLocalValue] = useState(value);
   const handleChangeCallback = ({
     target
   }) => {
@@ -1435,7 +1443,7 @@ function Checkbox(props) {
     handleChangeCallback(e);
     setLocalValue(e.target.value);
   };
-  useEffect$1(() => {
+  useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -1530,7 +1538,7 @@ function prefixId$7(id) {
 }
 
 const useBufferedFocus$1 = function (editor, ref) {
-  const [buffer, setBuffer] = useState$1(undefined);
+  const [buffer, setBuffer] = useState(undefined);
   ref.current = useMemo(() => ({
     focus: offset => {
       if (editor) {
@@ -1543,7 +1551,7 @@ const useBufferedFocus$1 = function (editor, ref) {
       }
     }
   }), [editor]);
-  useEffect$1(() => {
+  useEffect(() => {
     if (typeof buffer !== 'undefined' && editor) {
       editor.focus(buffer);
       setBuffer(false);
@@ -1563,14 +1571,14 @@ const CodeEditor$1 = forwardRef((props, ref) => {
     singleLine = false
   } = props;
   const inputRef = useRef();
-  const [editor, setEditor] = useState$1();
-  const [localValue, setLocalValue] = useState$1(value || '');
+  const [editor, setEditor] = useState();
+  const [localValue, setLocalValue] = useState(value || '');
   useBufferedFocus$1(editor, ref);
   const handleInput = useStaticCallback(newValue => {
     onInput(newValue);
     setLocalValue(newValue);
   });
-  useEffect$1(() => {
+  useEffect(() => {
     let editor;
     editor = new FeelersEditor({
       container: inputRef.current,
@@ -1590,7 +1598,7 @@ const CodeEditor$1 = forwardRef((props, ref) => {
       setEditor(null);
     };
   }, []);
-  useEffect$1(() => {
+  useEffect(() => {
     if (!editor) {
       return;
     }
@@ -1612,7 +1620,7 @@ const CodeEditor$1 = forwardRef((props, ref) => {
 });
 
 const useBufferedFocus = function (editor, ref) {
-  const [buffer, setBuffer] = useState$1(undefined);
+  const [buffer, setBuffer] = useState(undefined);
   ref.current = useMemo(() => ({
     focus: offset => {
       if (editor) {
@@ -1625,7 +1633,7 @@ const useBufferedFocus = function (editor, ref) {
       }
     }
   }), [editor]);
-  useEffect$1(() => {
+  useEffect(() => {
     if (typeof buffer !== 'undefined' && editor) {
       editor.focus(buffer);
       setBuffer(false);
@@ -1643,14 +1651,14 @@ const CodeEditor = forwardRef((props, ref) => {
     variables
   } = props;
   const inputRef = useRef();
-  const [editor, setEditor] = useState$1();
-  const [localValue, setLocalValue] = useState$1(value || '');
+  const [editor, setEditor] = useState();
+  const [localValue, setLocalValue] = useState(value || '');
   useBufferedFocus(editor, ref);
   const handleInput = useStaticCallback(newValue => {
     onInput(newValue);
     setLocalValue(newValue);
   });
-  useEffect$1(() => {
+  useEffect(() => {
     let editor;
 
     /* Trigger FEEL toggle when
@@ -1684,7 +1692,7 @@ const CodeEditor = forwardRef((props, ref) => {
       setEditor(null);
     };
   }, []);
-  useEffect$1(() => {
+  useEffect(() => {
     if (!editor) {
       return;
     }
@@ -1694,7 +1702,7 @@ const CodeEditor = forwardRef((props, ref) => {
     editor.setValue(value);
     setLocalValue(value);
   }, [value]);
-  useEffect$1(() => {
+  useEffect(() => {
     if (!editor) {
       return;
     }
@@ -1773,7 +1781,7 @@ function ToggleSwitch(props) {
     inputRef,
     tooltip
   } = props;
-  const [localValue, setLocalValue] = useState$1(value);
+  const [localValue, setLocalValue] = useState(value);
   const handleInputCallback = async () => {
     onInput(!value);
   };
@@ -1781,7 +1789,7 @@ function ToggleSwitch(props) {
     handleInputCallback();
     setLocalValue(e.target.value);
   };
-  useEffect$1(() => {
+  useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -1901,7 +1909,7 @@ function NumberField(props) {
     onFocus,
     onBlur
   } = props;
-  const [localValue, setLocalValue] = useState$1(value);
+  const [localValue, setLocalValue] = useState(value);
   const handleInputCallback = useMemo(() => {
     return debounce(event => {
       const {
@@ -1917,7 +1925,7 @@ function NumberField(props) {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-  useEffect$1(() => {
+  useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -1984,9 +1992,9 @@ function NumberFieldEntry(props) {
     validate
   } = props;
   const globalError = useError(id);
-  const [localError, setLocalError] = useState$1(null);
+  const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  useEffect$1(() => {
+  useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
@@ -2052,12 +2060,12 @@ function FeelTextfield(props) {
     OptionalComponent = OptionalFeelInput,
     tooltip
   } = props;
-  const [localValue, _setLocalValue] = useState$1(value);
+  const [localValue, _setLocalValue] = useState(value);
   const editorRef = useShowEntryEvent(id);
   const containerRef = useRef();
   const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
   const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
-  const [focus, _setFocus] = useState$1(undefined);
+  const [focus, _setFocus] = useState(undefined);
   const setFocus = (offset = 0) => {
     const hasFocus = containerRef.current.contains(document.activeElement);
 
@@ -2110,13 +2118,13 @@ function FeelTextfield(props) {
     const message = `${error.source}: ${error.message}`;
     onError(message);
   });
-  useEffect$1(() => {
+  useEffect(() => {
     if (typeof focus !== 'undefined') {
       editorRef.current.focus(focus);
       _setFocus(undefined);
     }
   }, [focus]);
-  useEffect$1(() => {
+  useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -2130,7 +2138,7 @@ function FeelTextfield(props) {
   }, [value]);
 
   // copy-paste integration
-  useEffect$1(() => {
+  useEffect(() => {
     const copyHandler = event => {
       if (!feelActive) {
         return;
@@ -2455,10 +2463,10 @@ function FeelEntry(props) {
     onBlur,
     tooltip
   } = props;
-  const [validationError, setValidationError] = useState$1(null);
-  const [localError, setLocalError] = useState$1(null);
+  const [validationError, setValidationError] = useState(null);
+  const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  useEffect$1(() => {
+  useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
@@ -2701,10 +2709,10 @@ function TemplatingEntry(props) {
     validate,
     show = noop
   } = props;
-  const [validationError, setValidationError] = useState$1(null);
-  const [localError, setLocalError] = useState$1(null);
+  const [validationError, setValidationError] = useState(null);
+  const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  useEffect$1(() => {
+  useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
@@ -2761,10 +2769,10 @@ function Templating(props) {
     disabled = false,
     tooltipContainer
   } = props;
-  const [localValue, setLocalValue] = useState$1(value);
+  const [localValue, setLocalValue] = useState(value);
   const editorRef = useShowEntryEvent(id);
   const containerRef = useRef();
-  const [focus, _setFocus] = useState$1(undefined);
+  const [focus, _setFocus] = useState(undefined);
   const setFocus = (offset = 0) => {
     const hasFocus = containerRef.current.contains(document.activeElement);
 
@@ -2789,13 +2797,13 @@ function Templating(props) {
     const message = `${error.source}: ${error.message}`;
     onError(message);
   });
-  useEffect$1(() => {
+  useEffect(() => {
     if (typeof focus !== 'undefined') {
       editorRef.current.focus(focus);
       _setFocus(undefined);
     }
   }, [focus]);
-  useEffect$1(() => {
+  useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -2850,7 +2858,7 @@ function List(props) {
     compareFn,
     ...restProps
   } = props;
-  const [open, setOpen] = useState$1(!!shouldOpen);
+  const [open, setOpen] = useState(!!shouldOpen);
   const hasItems = !!items.length;
   const toggleOpen = () => hasItems && setOpen(!open);
   const opening = !usePrevious(open) && open;
@@ -2858,7 +2866,7 @@ function List(props) {
   const shouldReset = opening || elementChanged;
   const sortedItems = useSortedItems(items, compareFn, shouldReset);
   const newItems = useNewItems(items, elementChanged);
-  useEffect$1(() => {
+  useEffect(() => {
     if (open && !hasItems) {
       setOpen(false);
     }
@@ -2933,7 +2941,7 @@ function ItemsList(props) {
   } = props;
   const getKey = useKeyFactory();
   const newItem = newItems[0];
-  useEffect$1(() => {
+  useEffect(() => {
     if (newItem && autoFocusEntry) {
       // (0) select the parent entry (containing all list items)
       const entry = query(`[data-entry-id="${id}"]`);
@@ -3032,7 +3040,7 @@ function Select(props) {
     tooltip
   } = props;
   const ref = useShowEntryEvent(id);
-  const [localValue, setLocalValue] = useState$1(value);
+  const [localValue, setLocalValue] = useState(value);
   const handleChangeCallback = ({
     target
   }) => {
@@ -3042,7 +3050,7 @@ function Select(props) {
     handleChangeCallback(e);
     setLocalValue(e.target.value);
   };
-  useEffect$1(() => {
+  useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -3122,9 +3130,9 @@ function SelectEntry(props) {
   } = props;
   const options = getOptions(element);
   const globalError = useError(id);
-  const [localError, setLocalError] = useState$1(null);
+  const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  useEffect$1(() => {
+  useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
@@ -3185,7 +3193,7 @@ function Simple(props) {
     setValue
   } = props;
   const value = getValue(element);
-  const [localValue, setLocalValue] = useState$1(value);
+  const [localValue, setLocalValue] = useState(value);
   const handleInputCallback = useMemo(() => {
     return debounce(({
       target
@@ -3195,7 +3203,7 @@ function Simple(props) {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-  useEffect$1(() => {
+  useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -3251,7 +3259,7 @@ function TextArea(props) {
     rows = autoResize ? 1 : 2,
     tooltip
   } = props;
-  const [localValue, setLocalValue] = useState$1(value);
+  const [localValue, setLocalValue] = useState(value);
   const ref = useShowEntryEvent(id);
   const handleInputCallback = useMemo(() => {
     return debounce(({
@@ -3266,7 +3274,7 @@ function TextArea(props) {
   useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
   }, []);
-  useEffect$1(() => {
+  useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -3335,9 +3343,9 @@ function TextAreaEntry(props) {
     tooltip
   } = props;
   const globalError = useError(id);
-  const [localError, setLocalError] = useState$1(null);
+  const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  useEffect$1(() => {
+  useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
@@ -3401,7 +3409,7 @@ function Textfield(props) {
     value = '',
     tooltip
   } = props;
-  const [localValue, setLocalValue] = useState$1(value || '');
+  const [localValue, setLocalValue] = useState(value || '');
   const ref = useShowEntryEvent(id);
   const handleInputCallback = useMemo(() => {
     return debounce(({
@@ -3412,7 +3420,7 @@ function Textfield(props) {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-  useEffect$1(() => {
+  useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -3477,9 +3485,9 @@ function TextfieldEntry(props) {
     tooltip
   } = props;
   const globalError = useError(id);
-  const [localError, setLocalError] = useState$1(null);
+  const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  useEffect$1(() => {
+  useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);