@bpmn-io/properties-panel 3.28.2 → 3.29.0

package/dist/assets/properties-panel.css

@@ -819,13 +819,20 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-list-entry-header {
-  position: relative;
+  position: sticky;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
   height: 32px;
 }
 
+.bio-properties-panel-list-entry-header.sticky {
+  background-color: var(--color-white);
+  border-bottom: 1px solid var(--sticky-group-bottom-border-color);
+  top: 32px;
+  z-index: 9;
+}
+
 /* Nested list dot */
 .bio-properties-panel-list-entry::before {
   content: "";

package/dist/index.esm.js

@@ -2143,6 +2143,50 @@ function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
 
+function TextInput({
+  debounce,
+  element,
+  id,
+  getValue,
+  onBlur,
+  setValue,
+  validate,
+  Component,
+  ...props
+}) {
+  const modelValue = getValue(element);
+  const setModelValue = useCallback((newValue, error) => {
+    if (isFunction(validate)) {
+      error = validate(newValue) || null;
+    }
+    setValue(newValue, error);
+  }, [setValue, validate]);
+  const debouncedSetValue = useDebounce(setModelValue, debounce);
+  const handleInput = useCallback(newValue => {
+    if (newValue !== modelValue) {
+      debouncedSetValue(newValue);
+    }
+  }, [modelValue, debouncedSetValue]);
+  const handleBlur = useCallback(value => {
+    const newValue = value.trim?.() || value;
+    if (newValue !== modelValue) {
+      setModelValue(newValue);
+    }
+    if (isFunction(onBlur)) {
+      onBlur(newValue);
+    }
+  }, [modelValue, setModelValue]);
+  return jsx(Component, {
+    ...props,
+    debounce: debounce,
+    element: element,
+    id: id,
+    onInput: handleInput,
+    onBlur: handleBlur,
+    value: modelValue
+  });
+}
+
 const noop$2 = () => {};
 
 /**
@@ -2171,7 +2215,6 @@ const noop$2 = () => {};
  */
 function FeelTextfield(props) {
   const {
-    debounce,
     id,
     element,
     label,
@@ -2206,16 +2249,11 @@ function FeelTextfield(props) {
     const position = hasFocus ? document.activeElement.selectionStart : Infinity;
     _setFocus(position + offset);
   };
-
-  /**
-   * @type { import('min-dash').DebouncedFunction }
-   */
-  const handleInputCallback = useDebounce(onInput, debounce);
   const handleInput = newValue => {
     // we don't commit empty FEEL expressions,
     // but instead serialize them as <undefined>
     const newModelValue = newValue === '' || newValue === '=' ? undefined : newValue;
-    handleInputCallback(newModelValue);
+    onInput(newModelValue);
   };
   const handleFeelToggle = useStaticCallback(() => {
     if (feel === 'required') {
@@ -2243,14 +2281,8 @@ function FeelTextfield(props) {
       setFocus(-1);
     }
   };
-  const handleOnBlur = e => {
-    const trimmedValue = e.target.value.trim();
-
-    // trim and commit on blur
-    onInput(trimmedValue);
-    if (onBlur) {
-      onBlur(e);
-    }
+  const handleOnBlur = () => {
+    onBlur?.(localValue);
   };
   const handleLint = useStaticCallback((lint = []) => {
     const syntaxError = lint.some(report => report.type === 'Syntax Error');
@@ -2647,46 +2679,28 @@ function FeelEntry(props) {
     placeholder,
     tooltip
   } = props;
-  const [validationError, setValidationError] = useState(null);
   const [localError, setLocalError] = useState(null);
-  let value = getValue(element);
-  useEffect(() => {
-    if (isFunction(validate)) {
-      const newValidationError = validate(value) || null;
-      setValidationError(newValidationError);
-    }
-  }, [value, validate]);
-  const onInput = useCallback(newValue => {
-    const value = getValue(element);
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
-
-    // don't create multiple commandStack entries for the same value
-    if (newValue !== value) {
-      setValue(newValue, newValidationError);
-    }
-    setValidationError(newValidationError);
-  }, [element, getValue, setValue, validate]);
-  const onError = useCallback(err => {
-    setLocalError(err);
-  }, []);
+  const value = getValue(element);
+  const validationError = validate?.(value) || null;
   const temporaryError = useError(id);
   const error = temporaryError || localError || validationError;
   return jsxs("div", {
     class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [createElement$1(FeelTextfield, {
+    children: [createElement$1(TextInput, {
       ...props,
+      Component: FeelTextfield,
+      element: element,
+      getValue: getValue,
       debounce: debounce,
+      setValue: setValue,
+      validate: validate,
       disabled: disabled,
       feel: feel,
       id: id,
       key: element,
       label: label,
-      onInput: onInput,
-      onError: onError,
+      onError: setLocalError,
       onFocus: onFocus,
       onBlur: onBlur,
       placeholder: placeholder,
@@ -3044,7 +3058,9 @@ function List(props) {
     autoFocusEntry,
     ...restProps
   } = props;
+  const entryRef = useRef(null);
   const [open, setOpen] = useState(!!shouldOpen);
+  const [sticky, setSticky] = useState(false);
   const hasItems = !!items.length;
   const toggleOpen = () => hasItems && setOpen(!open);
   const elementChanged = usePrevious(element) !== element;
@@ -3065,11 +3081,15 @@ function List(props) {
       setOpen(true);
     }
   }
+
+  // set css class when entry is sticky to top
+  useStickyIntersectionObserver(entryRef, 'div.bio-properties-panel-scroll-container', setSticky);
   return jsxs("div", {
     "data-entry-id": id,
     class: classnames('bio-properties-panel-entry', 'bio-properties-panel-list-entry', hasItems ? '' : 'empty', open ? 'open' : ''),
+    ref: entryRef,
     children: [jsxs("div", {
-      class: "bio-properties-panel-list-entry-header",
+      class: classnames('bio-properties-panel-list-entry-header', sticky && open ? 'sticky' : ''),
       onClick: toggleOpen,
       children: [jsx("div", {
         title: label,
@@ -3428,14 +3448,8 @@ function TextArea(props) {
     setLocalValue(e.target.value);
     handleInput(e.target.value);
   };
-  const handleOnBlur = e => {
-    const trimmedValue = e.target.value.trim();
-
-    // trim and commit on blur
-    onInput(trimmedValue);
-    if (onBlur) {
-      onBlur(e);
-    }
+  const handleOnBlur = () => {
+    onBlur?.(localValue);
   };
   useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
@@ -3513,35 +3527,21 @@ function TextAreaEntry(props) {
     autoResize,
     tooltip
   } = props;
+  const value = getValue(element);
   const globalError = useError(id);
-  const [localError, setLocalError] = useState(null);
-  let value = getValue(element);
-  useEffect(() => {
-    if (isFunction(validate)) {
-      const newValidationError = validate(value) || null;
-      setLocalError(newValidationError);
-    }
-  }, [value, validate]);
-  const onInput = useCallback(newValue => {
-    const value = getValue(element);
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
-    if (newValue !== value) {
-      setValue(newValue, newValidationError);
-    }
-    setLocalError(newValidationError);
-  }, [element, getValue, setValue, validate]);
+  const localError = validate?.(value) || null;
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsx(TextArea, {
+    children: [jsx(TextInput, {
+      Component: TextArea,
+      getValue: getValue,
+      setValue: setValue,
+      validate: validate,
       id: id,
       label: label,
       value: value,
-      onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
       rows: rows,
@@ -3574,7 +3574,6 @@ function prefixId$2(id) {
 
 function Textfield(props) {
   const {
-    debounce,
     disabled = false,
     id,
     label,
@@ -3587,23 +3586,12 @@ function Textfield(props) {
   } = props;
   const [localValue, setLocalValue] = useState(value || '');
   const ref = useShowEntryEvent(id);
-
-  /**
-   * @type { import('min-dash').DebouncedFunction }
-   */
-  const handleInputCallback = useDebounce(onInput, debounce);
-  const handleOnBlur = e => {
-    const trimmedValue = e.target.value.trim();
-
-    // trim and commit on blur
-    onInput(trimmedValue);
-    if (onBlur) {
-      onBlur(e);
-    }
+  const handleOnBlur = () => {
+    onBlur?.(localValue);
   };
   const handleInput = newValue => {
     const newModelValue = newValue === '' ? undefined : newValue;
-    handleInputCallback(newModelValue);
+    onInput(newModelValue);
   };
   const handleLocalInput = e => {
     if (e.target.value === localValue) {
@@ -3678,39 +3666,25 @@ function TextfieldEntry(props) {
     placeholder,
     tooltip
   } = props;
+  const value = getValue(element);
   const globalError = useError(id);
-  const [localError, setLocalError] = useState(null);
-  let value = getValue(element);
-  useEffect(() => {
-    if (isFunction(validate)) {
-      const newValidationError = validate(value) || null;
-      setLocalError(newValidationError);
-    }
-  }, [value, validate]);
-  const onInput = useCallback(newValue => {
-    const value = getValue(element);
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
-    if (newValue !== value) {
-      setValue(newValue, newValidationError);
-    }
-    setLocalError(newValidationError);
-  }, [element, getValue, setValue, validate]);
+  const localError = validate?.(value) || null;
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsx(Textfield, {
+    children: [jsx(TextInput, {
+      Component: Textfield,
       debounce: debounce,
       disabled: disabled,
+      getValue: getValue,
       id: id,
       label: label,
-      onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
       placeholder: placeholder,
+      setValue: setValue,
+      validate: validate,
       value: value,
       tooltip: tooltip,
       element: element
@@ -3734,7 +3708,7 @@ function prefixId$1(id) {
   return `bio-properties-panel-${id}`;
 }
 
-const DEFAULT_DEBOUNCE_TIME = 300;
+const DEFAULT_DEBOUNCE_TIME = 600;
 
 /**
  * Creates a debounced version of a function, delaying its execution based on `debounceDelay`.