@bpmn-io/properties-panel 1.7.0 → 1.8.1

package/dist/index.js

@@ -403,6 +403,10 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
     if (ref.current) {
       const scrollContainer = minDom.query(scrollContainerSelector);
       observer = new Observer(entries => {
+        // The ScrollContainer is unmounted, do not update sticky state
+        if (scrollContainer.scrollHeight === 0) {
+          return;
+        }
         entries.forEach(entry => {
           if (entry.intersectionRatio < 1) {
             setSticky(true);
@@ -649,7 +653,7 @@ function PropertiesPanel(props) {
   const [layout, setLayout] = hooks.useState(createLayout(layoutConfig));
 
   // react to external changes in the layout config
-  useUpdateEffect(() => {
+  useUpdateLayoutEffect(() => {
     const newLayout = createLayout(layoutConfig);
     setLayout(newLayout);
   }, [layoutConfig]);
@@ -770,14 +774,14 @@ function createDescriptionContext(overrides = {}) {
 // hooks //////////////////
 
 /**
- * This hook behaves like useEffect, but does not trigger on the first render.
+ * This hook behaves like useLayoutEffect, but does not trigger on the first render.
  *
  * @param {Function} effect
  * @param {Array} deps
  */
-function useUpdateEffect(effect, deps) {
+function useUpdateLayoutEffect(effect, deps) {
   const isMounted = hooks.useRef(false);
-  hooks.useEffect(() => {
+  hooks.useLayoutEffect(() => {
     if (isMounted.current) {
       return effect();
     } else {
@@ -2750,6 +2754,7 @@ function TextArea(props) {
  * @param {Function} props.onBlur
  * @param {number} props.rows
  * @param {boolean} props.monospace
+ * @param {Function} [props.validate]
  * @param {boolean} [props.disabled]
  */
 function TextAreaEntry(props) {
@@ -2764,12 +2769,38 @@ function TextAreaEntry(props) {
     rows,
     monospace,
     disabled,
+    validate,
     onFocus,
     onBlur,
     autoResize
   } = props;
-  const value = getValue(element);
-  const error = useError(id);
+  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = hooks.useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  hooks.useEffect(() => {
+    if (minDash.isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (minDash.isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+    setLocalError(newValidationError);
+  };
+  if (previousValue === value && localError) {
+    value = cachedInvalidValue;
+  }
+  const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -2777,7 +2808,7 @@ function TextAreaEntry(props) {
       id: id,
       label: label,
       value: value,
-      onInput: setValue,
+      onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
       rows: rows,