@bpmn-io/properties-panel 0.22.0 → 0.24.0

package/dist/index.js

@@ -1192,7 +1192,9 @@ function Checkbox(props) {
     label,
     onChange,
     disabled,
-    value = false
+    value = false,
+    onFocus,
+    onBlur
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
 
@@ -1221,6 +1223,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,
@@ -1241,6 +1245,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]
  */
 
@@ -1253,7 +1259,9 @@ function CheckboxEntry(props) {
     label,
     getValue,
     setValue,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -1265,6 +1273,8 @@ function CheckboxEntry(props) {
       id: id,
       label: label,
       onChange: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       value: value
     }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
@@ -1447,6 +1457,7 @@ function FeelTextfield(props) {
     feel,
     value = '',
     disabled = false,
+    variables,
     OptionalComponent = OptionalFeelInput
   } = props;
   const [localValue, _setLocalValue] = hooks.useState(value);
@@ -1457,7 +1468,7 @@ function FeelTextfield(props) {
   const [focus, _setFocus] = hooks.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;
 
@@ -1603,7 +1614,7 @@ function FeelTextfield(props) {
         },
         onLint: handleLint,
         value: feelOnlyValue,
-        variables: props.variables,
+        variables: variables,
         ref: editorRef
       }) : jsxRuntime.jsx(OptionalComponent, { ...props,
         onInput: handleLocalInput,
@@ -1619,7 +1630,9 @@ const OptionalFeelInput = compat.forwardRef((props, ref) => {
     id,
     disabled,
     onInput,
-    value
+    value,
+    onFocus,
+    onBlur
   } = props;
   const inputRef = hooks.useRef(); // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -1653,8 +1666,8 @@ const OptionalFeelInput = compat.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 || ''
   });
 });
@@ -1663,7 +1676,9 @@ const OptionalFeelTextArea = compat.forwardRef((props, ref) => {
     id,
     disabled,
     onInput,
-    value
+    value,
+    onFocus,
+    onBlur
   } = props;
   const inputRef = hooks.useRef(); // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -1690,8 +1705,8 @@ const OptionalFeelTextArea = compat.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 || ''
   });
 });
@@ -1720,7 +1735,11 @@ function FeelEntry(props) {
     getValue,
     setValue,
     validate,
-    show = noop
+    show = noop,
+    example,
+    variables,
+    onFocus,
+    onBlur
   } = props;
   const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const [validationError, setValidationError] = hooks.useState(null);
@@ -1760,7 +1779,7 @@ function FeelEntry(props) {
   }
 
   const temporaryError = useError(id);
-  const error = temporaryError || validationError || localError;
+  const error = localError || temporaryError || validationError;
   return jsxRuntime.jsxs("div", {
     class: classnames__default["default"](props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -1772,10 +1791,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 && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
@@ -1797,6 +1818,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
  */
 
@@ -2013,7 +2036,9 @@ function NumberField(props) {
     min,
     onInput,
     step,
-    value = ''
+    value = '',
+    onFocus,
+    onBlur
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const handleInputCallback = hooks.useMemo(() => {
@@ -2058,6 +2083,8 @@ function NumberField(props) {
       max: max,
       min: min,
       onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
       step: step,
       value: localValue
     })]
@@ -2075,6 +2102,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
  */
 
@@ -2091,7 +2120,9 @@ function NumberFieldEntry(props) {
     max,
     min,
     setValue,
-    step
+    step,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   return jsxRuntime.jsxs("div", {
@@ -2103,6 +2134,8 @@ function NumberFieldEntry(props) {
       id: id,
       label: label,
       onInput: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       max: max,
       min: min,
       step: step,
@@ -2129,7 +2162,9 @@ function Select(props) {
     onChange,
     options = [],
     value,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = props;
   const ref = useShowEntryEvent(id);
   const [localValue, setLocalValue] = hooks.useState(value);
@@ -2164,6 +2199,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) => {
@@ -2184,6 +2221,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]
  */
@@ -2198,7 +2237,9 @@ function SelectEntry(props) {
     getValue,
     setValue,
     getOptions,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   const options = getOptions(element);
@@ -2211,6 +2252,8 @@ function SelectEntry(props) {
       label: label,
       value: value,
       onChange: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       options: options,
       disabled: disabled
     }, element), error && jsxRuntime.jsx("div", {
@@ -2297,7 +2340,9 @@ function TextArea(props) {
     onInput,
     value = '',
     disabled,
-    monospace
+    monospace,
+    onFocus,
+    onBlur
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
@@ -2332,8 +2377,8 @@ function TextArea(props) {
       spellCheck: "false",
       class: classnames__default["default"]('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
@@ -2349,6 +2394,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]
@@ -2366,7 +2413,9 @@ function TextAreaEntry(props) {
     setValue,
     rows,
     monospace,
-    disabled
+    disabled,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -2378,6 +2427,8 @@ function TextAreaEntry(props) {
       label: label,
       value: value,
       onInput: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       rows: rows,
       debounce: debounce,
       monospace: monospace,
@@ -2407,6 +2458,8 @@ function Textfield(props) {
     id,
     label,
     onInput,
+    onFocus,
+    onBlur,
     value = ''
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value || '');
@@ -2445,8 +2498,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
     })]
   });
@@ -2461,6 +2514,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
  */
 
@@ -2475,7 +2530,9 @@ function TextfieldEntry(props) {
     label,
     getValue,
     setValue,
-    validate
+    validate,
+    onFocus,
+    onBlur
   } = props;
   const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const globalError = useError(id);
@@ -2519,6 +2576,8 @@ function TextfieldEntry(props) {
       id: id,
       label: label,
       onInput: onInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
       value: value
     }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
@@ -2544,7 +2603,9 @@ function ToggleSwitch(props) {
     label,
     onInput,
     value,
-    switcherLabel
+    switcherLabel,
+    onFocus,
+    onBlur
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
 
@@ -2578,9 +2639,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
         }), jsxRuntime.jsx("span", {
           class: "bio-properties-panel-toggle-switch__slider"
         })]
@@ -2600,6 +2663,8 @@ function ToggleSwitch(props) {
  * @param {String} props.switcherLabel
  * @param {Function} props.getValue
  * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
  */
 
 
@@ -2611,7 +2676,9 @@ function ToggleSwitchEntry(props) {
     label,
     switcherLabel,
     getValue,
-    setValue
+    setValue,
+    onFocus,
+    onBlur
   } = props;
   const value = getValue(element);
   return jsxRuntime.jsxs("div", {
@@ -2622,6 +2689,8 @@ function ToggleSwitchEntry(props) {
       label: label,
       value: value,
       onInput: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
       switcherLabel: switcherLabel
     }), jsxRuntime.jsx(Description, {
       forId: id,