@bpmn-io/properties-panel 3.33.0 → 3.33.2

package/assets/properties-panel.css

@@ -1,4 +1,4 @@
 /**
  * Compatibility with @bpmn-io/properties-panel < v3.4.0
  */
-@import '../dist/assets/properties-panel.css'
+@import '../dist/assets/properties-panel.css';

package/dist/assets/properties-panel.css

@@ -1467,7 +1467,7 @@ textarea.bio-properties-panel-input {
   top: 0;
   right: 0;
   line-height: 1;
-  padding: 2px 4px;
+  padding: 3px 4px;
   margin: 3px;
   display: none;
   background: none;
@@ -1476,6 +1476,12 @@ textarea.bio-properties-panel-input {
   cursor: pointer;
 }
 
+.bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup svg,
+.bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup svg {
+  width: 16px;
+  height: 16px;
+}
+
 .bio-properties-panel-feelers-editor-container:hover .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feel-container:hover .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feelers-editor-container:focus-within .bio-properties-panel-open-feel-popup,

package/dist/index.esm.js

@@ -141,22 +141,16 @@ LaunchIcon.defaultProps = {
   viewBox: "0 0 32 32"
 };
 var OpenPopupIcon = function OpenPopupIcon(props) {
-  return jsxs("svg", {
+  return jsx("svg", {
     ...props,
-    children: [jsx("path", {
-      fill: "currentColor",
-      d: "M28 4H10a2.006 2.006 0 0 0-2 2v14a2.006 2.006 0 0 0 2 2h18a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2Zm0 16H10V6h18Z"
-    }), jsx("path", {
-      fill: "currentColor",
-      d: "M18 26H4V16h2v-2H4a2.006 2.006 0 0 0-2 2v10a2.006 2.006 0 0 0 2 2h14a2.006 2.006 0 0 0 2-2v-2h-2Z"
-    })]
+    children: jsx("path", {
+      d: "M6 15v-1H2.7L7 9.7 6.3 9 2 13.3V10H1v5zm4-14v1h3.3L9 6.3l.7.7L14 2.7V6h1V1z"
+    })
   });
 };
 OpenPopupIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16",
-  viewBox: "0 0 32 32"
+  viewBox: "0 0 16 16"
 };
 
 function Header(props) {
@@ -2206,7 +2200,7 @@ function FeelTextfield(props) {
     element,
     label,
     hostLanguage,
-    onInput,
+    onInput: commitValue,
     onBlur,
     onError,
     placeholder,
@@ -2222,6 +2216,12 @@ function FeelTextfield(props) {
   const [localValue, setLocalValue] = useState(value);
   const editorRef = useShowEntryEvent(id);
   const containerRef = useRef();
+  const onInput = useCallback(newValue => {
+    // we don't commit empty FEEL expressions,
+    // but instead serialize them as <undefined>
+    const newModelValue = newValue === '' || newValue === '=' ? undefined : newValue;
+    commitValue(newModelValue);
+  }, [commitValue]);
   const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
   const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
   const feelLanguageContext = useContext(FeelLanguageContext);
@@ -2241,13 +2241,7 @@ function FeelTextfield(props) {
   /**
    * @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);
-  };
+  const handleInput = useDebounce(onInput, debounce);
   const handleFeelToggle = useStaticCallback(() => {
     if (feel === 'required') {
       return;
@@ -3438,7 +3432,7 @@ function TextArea(props) {
     id,
     label,
     debounce,
-    onInput,
+    onInput: commitValue,
     value = '',
     disabled,
     monospace,
@@ -3451,16 +3445,16 @@ function TextArea(props) {
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const ref = useShowEntryEvent(id);
+  const onInput = useCallback(newValue => {
+    const newModelValue = newValue === '' ? undefined : newValue;
+    commitValue(newModelValue);
+  }, [commitValue]);
   const visible = useElementVisible(ref.current);
 
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = useDebounce(onInput, debounce);
-  const handleInput = newValue => {
-    const newModelValue = newValue === '' ? undefined : newValue;
-    handleInputCallback(newModelValue);
-  };
+  const handleInput = useDebounce(onInput, debounce);
   const handleLocalInput = e => {
     autoResize && resizeToContents(e.target);
     if (e.target.value === localValue) {
@@ -3619,7 +3613,7 @@ function Textfield(props) {
     disabled = false,
     id,
     label,
-    onInput,
+    onInput: commitValue,
     onFocus,
     onBlur,
     placeholder,
@@ -3628,11 +3622,15 @@ function Textfield(props) {
   } = props;
   const [localValue, setLocalValue] = useState(value || '');
   const ref = useShowEntryEvent(id);
+  const onInput = useCallback(newValue => {
+    const newModelValue = newValue === '' ? undefined : newValue;
+    commitValue(newModelValue);
+  }, [commitValue]);
 
   /**
    * @type { import('min-dash').DebouncedFunction }
    */
-  const handleInputCallback = useDebounce(onInput, debounce);
+  const handleInput = useDebounce(onInput, debounce);
   const handleOnBlur = e => {
     const trimmedValue = e.target.value.trim();
 
@@ -3642,10 +3640,6 @@ function Textfield(props) {
       onBlur(e);
     }
   };
-  const handleInput = newValue => {
-    const newModelValue = newValue === '' ? undefined : newValue;
-    handleInputCallback(newModelValue);
-  };
   const handleLocalInput = e => {
     if (e.target.value === localValue) {
       return;