@bpmn-io/properties-panel 2.2.0 → 3.0.0

package/assets/properties-panel.css

@@ -99,11 +99,13 @@
   --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
   --dropdown-separator-background-color: var(--color-grey-225-10-75);
 
-  --feel-background-color: var(--color-grey-225-10-95);
+  --feel-background-color: transparent;
   --feel-active-color: var(--color-blue-205-100-45);
   --feel-inactive-color: var(--color-grey-225-10-35);
-  --feel-hover-background-color: var(--color-grey-225-10-90);
-  --feel-active-background-color: var(--color-grey-225-10-95);
+  --feel-hover-color: var(--color-grey-225-10-15);
+  --feel-hover-background-color: var(--color-grey-225-10-97);
+  --feel-active-background-color: transparent;
+  --feel-required-color: var(--color-grey-225-10-55);
 
   --feel-indicator-background-color: var(--color-grey-225-10-90);
 
@@ -990,7 +992,7 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-feel-icon {
   display: inline-flex;
-  height: 22px;
+  height: 18px;
   width: 22px;
   vertical-align: text-bottom;
   padding: 0;
@@ -1005,7 +1007,6 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-feel-icon.optional {
   cursor: pointer;
-
   background: var(--feel-background-color);
 }
 
@@ -1017,6 +1018,10 @@ textarea.bio-properties-panel-input {
   background: var(--feel-hover-background-color);
 }
 
+.bio-properties-panel-feel-icon:hover svg * {
+  fill: var(--feel-hover-color);
+}
+
 .bio-properties-panel-feel-icon.active {
   background: var(--feel-active-background-color);
 }
@@ -1034,7 +1039,7 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-icon.required.active svg * {
-  fill: var(--feel-inactive-color);
+  fill: var(--feel-required-color);
 }
 
 .bio-properties-panel-feel-editor-container {

package/dist/index.esm.js

@@ -1720,11 +1720,9 @@ function NumberFieldEntry(props) {
     onBlur,
     validate
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -1736,16 +1734,9 @@ function NumberFieldEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -2193,11 +2184,9 @@ function FeelEntry(props) {
     onFocus,
     onBlur
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const [validationError, setValidationError] = useState(null);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -2209,22 +2198,16 @@ function FeelEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      // don't create multiple commandStack entries for the same value
-      if (newValue !== value) {
-        setValue(newValue);
-      }
+
+    // don't create multiple commandStack entries for the same value
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
     }
     setValidationError(newValidationError);
   });
   const onError = useCallback(err => {
     setLocalError(err);
   }, []);
-  if (previousValue === value && validationError) {
-    value = cachedInvalidValue;
-  }
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
   return jsxs("div", {
@@ -2446,11 +2429,9 @@ function TemplatingEntry(props) {
     validate,
     show = noop
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const [validationError, setValidationError] = useState(null);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -2462,22 +2443,16 @@ function TemplatingEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      // don't create multiple commandStack entries for the same value
-      if (newValue !== value) {
-        setValue(newValue);
-      }
+
+    // don't create multiple commandStack entries for the same value
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
     }
     setValidationError(newValidationError);
   });
   const onError = useCallback(err => {
     setLocalError(err);
   }, []);
-  if (previousValue === value && validationError) {
-    value = cachedInvalidValue;
-  }
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
   return jsxs("div", {
@@ -2866,11 +2841,9 @@ function SelectEntry(props) {
     validate
   } = props;
   const options = getOptions(element);
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -2882,16 +2855,9 @@ function SelectEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -3079,11 +3045,9 @@ function TextAreaEntry(props) {
     onBlur,
     autoResize
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -3095,16 +3059,9 @@ function TextAreaEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -3220,11 +3177,9 @@ function TextfieldEntry(props) {
     onFocus,
     onBlur
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -3236,16 +3191,9 @@ function TextfieldEntry(props) {
     if (isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),