@bpmn-io/properties-panel 0.22.0 → 0.24.0

package/dist/index.esm.js

@@ -1183,7 +1183,9 @@ function Checkbox(props) {
     label,
     onChange,
     disabled,
-    value = false
+    value = false,
+    onFocus,
+    onBlur
   } = props;
   const [localValue, setLocalValue] = useState(value);
 
@@ -1212,6 +1214,8 @@ function Checkbox(props) {
       ref: ref,
       id: prefixId$7(id),
       name: id,
+      onFocus: onFocus,
+      onBlur: onBlur,
       type: "checkbox",
       class: "bio-properties-panel-input",
       onChange: handleChange,
@@ -1232,6 +1236,8 @@ function Checkbox(props) {
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  * @param {boolean} [props.disabled]
  */
 
@@ -1244,7 +1250,9 @@ function CheckboxEntry(props) {
     label,
     getValue,
     setValue,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -1256,6 +1264,8 @@ function CheckboxEntry(props) {
       id: id,
       label: label,
       onChange: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       value: value
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
@@ -1438,6 +1448,7 @@ function FeelTextfield(props) {
     feel,
     value = '',
     disabled = false,
+    variables,
     OptionalComponent = OptionalFeelInput
   } = props;
   const [localValue, _setLocalValue] = useState(value);
@@ -1448,7 +1459,7 @@ function FeelTextfield(props) {
   const [focus, _setFocus] = useState(undefined);
 
   const setFocus = (offset = 0) => {
-    const hasFocus = containerRef.current.contains(document.activeElement); // Keep carret position if it is already focused, otherwise focus at the end
+    const hasFocus = containerRef.current.contains(document.activeElement); // Keep caret position if it is already focused, otherwise focus at the end
 
     const position = hasFocus ? document.activeElement.selectionStart : Infinity;
 
@@ -1594,7 +1605,7 @@ function FeelTextfield(props) {
         },
         onLint: handleLint,
         value: feelOnlyValue,
-        variables: props.variables,
+        variables: variables,
         ref: editorRef
       }) : jsx(OptionalComponent, { ...props,
         onInput: handleLocalInput,
@@ -1610,7 +1621,9 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     id,
     disabled,
     onInput,
-    value
+    value,
+    onFocus,
+    onBlur
   } = props;
   const inputRef = useRef(); // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -1644,8 +1657,8 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     disabled: disabled,
     class: "bio-properties-panel-input",
     onInput: e => onInput(e.target.value),
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
+    onFocus: onFocus,
+    onBlur: onBlur,
     value: value || ''
   });
 });
@@ -1654,7 +1667,9 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     id,
     disabled,
     onInput,
-    value
+    value,
+    onFocus,
+    onBlur
   } = props;
   const inputRef = useRef(); // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -1681,8 +1696,8 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     disabled: disabled,
     class: "bio-properties-panel-input",
     onInput: e => onInput(e.target.value),
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
+    onFocus: onFocus,
+    onBlur: onBlur,
     value: value || ''
   });
 });
@@ -1711,7 +1726,11 @@ function FeelEntry(props) {
     getValue,
     setValue,
     validate,
-    show = noop
+    show = noop,
+    example,
+    variables,
+    onFocus,
+    onBlur
   } = props;
   const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const [validationError, setValidationError] = useState(null);
@@ -1751,7 +1770,7 @@ function FeelEntry(props) {
   }
 
   const temporaryError = useError(id);
-  const error = temporaryError || validationError || localError;
+  const error = localError || temporaryError || validationError;
   return jsxs("div", {
     class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -1763,10 +1782,12 @@ function FeelEntry(props) {
       label: label,
       onInput: onInput,
       onError: onError,
-      example: props.example,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      example: example,
       show: show,
       value: value,
-      variables: props.variables,
+      variables: variables,
       OptionalComponent: props.OptionalComponent
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
@@ -1788,6 +1809,8 @@ function FeelEntry(props) {
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  * @param {Function} props.validate
  */
 
@@ -2004,7 +2027,9 @@ function NumberField(props) {
     min,
     onInput,
     step,
-    value = ''
+    value = '',
+    onFocus,
+    onBlur
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const handleInputCallback = useMemo(() => {
@@ -2049,6 +2074,8 @@ function NumberField(props) {
       max: max,
       min: min,
       onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
       step: step,
       value: localValue
     })]
@@ -2066,6 +2093,8 @@ function NumberField(props) {
  * @param {String} props.max
  * @param {String} props.min
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  * @param {String} props.step
  */
 
@@ -2082,7 +2111,9 @@ function NumberFieldEntry(props) {
     max,
     min,
     setValue,
-    step
+    step,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   return jsxs("div", {
@@ -2094,6 +2125,8 @@ function NumberFieldEntry(props) {
       id: id,
       label: label,
       onInput: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       max: max,
       min: min,
       step: step,
@@ -2120,7 +2153,9 @@ function Select(props) {
     onChange,
     options = [],
     value,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = props;
   const ref = useShowEntryEvent(id);
   const [localValue, setLocalValue] = useState(value);
@@ -2155,6 +2190,8 @@ function Select(props) {
       name: id,
       class: "bio-properties-panel-input",
       onInput: handleChange,
+      onFocus: onFocus,
+      onBlur: onBlur,
       value: localValue,
       disabled: disabled,
       children: options.map((option, idx) => {
@@ -2175,6 +2212,8 @@ function Select(props) {
  * @param {string} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  * @param {Function} props.getOptions
  * @param {boolean} [props.disabled]
  */
@@ -2189,7 +2228,9 @@ function SelectEntry(props) {
     getValue,
     setValue,
     getOptions,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   const options = getOptions(element);
@@ -2202,6 +2243,8 @@ function SelectEntry(props) {
       label: label,
       value: value,
       onChange: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       options: options,
       disabled: disabled
     }, element), error && jsx("div", {
@@ -2288,7 +2331,9 @@ function TextArea(props) {
     onInput,
     value = '',
     disabled,
-    monospace
+    monospace,
+    onFocus,
+    onBlur
   } = props;
   const [localValue, setLocalValue] = useState(value);
   const ref = useShowEntryEvent(id);
@@ -2323,8 +2368,8 @@ function TextArea(props) {
       spellCheck: "false",
       class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
       onInput: handleInput,
-      onFocus: props.onFocus,
-      onBlur: props.onBlur,
+      onFocus: onFocus,
+      onBlur: onBlur,
       rows: rows,
       value: localValue,
       disabled: disabled
@@ -2340,6 +2385,8 @@ function TextArea(props) {
  * @param {string} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  * @param {number} props.rows
  * @param {boolean} props.monospace
  * @param {boolean} [props.disabled]
@@ -2357,7 +2404,9 @@ function TextAreaEntry(props) {
     setValue,
     rows,
     monospace,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -2369,6 +2418,8 @@ function TextAreaEntry(props) {
       label: label,
       value: value,
       onInput: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       rows: rows,
       debounce: debounce,
       monospace: monospace,
@@ -2398,6 +2449,8 @@ function Textfield(props) {
     id,
     label,
     onInput,
+    onFocus,
+    onBlur,
     value = ''
   } = props;
   const [localValue, setLocalValue] = useState(value || '');
@@ -2436,8 +2489,8 @@ function Textfield(props) {
       disabled: disabled,
       class: "bio-properties-panel-input",
       onInput: handleInput,
-      onFocus: props.onFocus,
-      onBlur: props.onBlur,
+      onFocus: onFocus,
+      onBlur: onBlur,
       value: localValue
     })]
   });
@@ -2452,6 +2505,8 @@ function Textfield(props) {
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  * @param {Function} props.validate
  */
 
@@ -2466,7 +2521,9 @@ function TextfieldEntry(props) {
     label,
     getValue,
     setValue,
-    validate
+    validate,
+    onFocus,
+    onBlur
   } = props;
   const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
   const globalError = useError(id);
@@ -2510,6 +2567,8 @@ function TextfieldEntry(props) {
       id: id,
       label: label,
       onInput: onInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
       value: value
     }, element), error && jsx("div", {
       class: "bio-properties-panel-error",
@@ -2535,7 +2594,9 @@ function ToggleSwitch(props) {
     label,
     onInput,
     value,
-    switcherLabel
+    switcherLabel,
+    onFocus,
+    onBlur
   } = props;
   const [localValue, setLocalValue] = useState(value);
 
@@ -2569,9 +2630,11 @@ function ToggleSwitch(props) {
           id: prefixId(id),
           class: "bio-properties-panel-input",
           type: "checkbox",
+          onFocus: onFocus,
+          onBlur: onBlur,
           name: id,
           onInput: handleInput,
-          checked: localValue
+          checked: !!localValue
         }), jsx("span", {
           class: "bio-properties-panel-toggle-switch__slider"
         })]
@@ -2591,6 +2654,8 @@ function ToggleSwitch(props) {
  * @param {String} props.switcherLabel
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 
 
@@ -2602,7 +2667,9 @@ function ToggleSwitchEntry(props) {
     label,
     switcherLabel,
     getValue,
-    setValue
+    setValue,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   return jsxs("div", {
@@ -2613,6 +2680,8 @@ function ToggleSwitchEntry(props) {
       label: label,
       value: value,
       onInput: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       switcherLabel: switcherLabel
     }), jsx(Description, {
       forId: id,