@bpmn-io/properties-panel 3.22.1 → 3.22.3

package/dist/index.js

@@ -712,6 +712,24 @@ function useStaticCallback(callback) {
   return hooks.useCallback((...args) => callbackRef.current(...args), []);
 }
 
+function useElementVisible(element) {
+  const [visible, setVisible] = hooks.useState(!!element && !!element.clientHeight);
+  hooks.useLayoutEffect(() => {
+    if (!element) return;
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      requestAnimationFrame(() => {
+        const newVisible = !!entry.contentRect.height;
+        if (newVisible !== visible) {
+          setVisible(newVisible);
+        }
+      });
+    });
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
+  }, [element, visible]);
+  return visible;
+}
+
 function Group(props) {
   const {
     element,
@@ -3992,6 +4010,7 @@ function TextArea(props) {
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
+  const visible = useElementVisible(ref.current);
   const handleInputCallback = hooks.useMemo(() => {
     return debounce(target => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
@@ -4002,7 +4021,10 @@ function TextArea(props) {
   };
   hooks.useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
-  });
+  }, []);
+  hooks.useLayoutEffect(() => {
+    visible && autoResize && resizeToContents(ref.current);
+  }, [visible]);
   hooks.useEffect(() => {
     if (value === localValue) {
       return;
@@ -4382,6 +4404,7 @@ exports.isTextAreaEntryEdited = isEdited$1;
 exports.isTextFieldEntryEdited = isEdited;
 exports.isToggleSwitchEntryEdited = isEdited$8;
 exports.useDescriptionContext = useDescriptionContext;
+exports.useElementVisible = useElementVisible;
 exports.useError = useError;
 exports.useErrors = useErrors;
 exports.useEvent = useEvent;