@bpmn-io/properties-panel 2.1.0 → 2.2.0

package/dist/index.js

@@ -1631,6 +1631,166 @@ function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
 
+function NumberField(props) {
+  const {
+    debounce,
+    disabled,
+    displayLabel = true,
+    id,
+    inputRef,
+    label,
+    max,
+    min,
+    onInput,
+    step,
+    value = '',
+    onFocus,
+    onBlur
+  } = props;
+  const [localValue, setLocalValue] = hooks.useState(value);
+  const handleInputCallback = hooks.useMemo(() => {
+    return debounce(event => {
+      const {
+        validity,
+        value
+      } = event.target;
+      if (validity.valid) {
+        onInput(value ? parseFloat(value) : undefined);
+      }
+    });
+  }, [onInput, debounce]);
+  const handleInput = e => {
+    handleInputCallback(e);
+    setLocalValue(e.target.value);
+  };
+  hooks.useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+    setLocalValue(value);
+  }, [value]);
+  return jsxRuntime.jsxs("div", {
+    class: "bio-properties-panel-numberfield",
+    children: [displayLabel && jsxRuntime.jsx("label", {
+      for: prefixId$5(id),
+      class: "bio-properties-panel-label",
+      children: label
+    }), jsxRuntime.jsx("input", {
+      id: prefixId$5(id),
+      ref: inputRef,
+      type: "number",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      max: max,
+      min: min,
+      onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      step: step,
+      value: localValue
+    })]
+  });
+}
+
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {String} props.step
+ * @param {Function} props.validate
+ */
+function NumberFieldEntry(props) {
+  const {
+    debounce,
+    description,
+    disabled,
+    element,
+    getValue,
+    id,
+    label,
+    max,
+    min,
+    setValue,
+    step,
+    onFocus,
+    onBlur,
+    validate
+  } = props;
+  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = hooks.useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  hooks.useEffect(() => {
+    if (minDash.isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onInput = newValue => {
+    let newValidationError = null;
+    if (minDash.isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+    setLocalError(newValidationError);
+  };
+  if (previousValue === value && localError) {
+    value = cachedInvalidValue;
+  }
+  const error = globalError || localError;
+  return jsxRuntime.jsxs("div", {
+    class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [jsxRuntime.jsx(NumberField, {
+      debounce: debounce,
+      disabled: disabled,
+      id: id,
+      label: label,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onInput: onInput,
+      max: max,
+      min: min,
+      step: step,
+      value: value
+    }, element), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsxRuntime.jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$6(node) {
+  return node && !!node.value;
+}
+
+// helpers /////////////////
+
+function prefixId$5(id) {
+  return `bio-properties-panel-${id}`;
+}
+
 const noop$1 = () => {};
 function FeelTextfield(props) {
   const {
@@ -1757,7 +1917,7 @@ function FeelTextfield(props) {
       'feel-active': feelActive
     }),
     children: [jsxRuntime.jsxs("label", {
-      for: prefixId$5(id),
+      for: prefixId$4(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
       children: [label, jsxRuntime.jsx(FeelIcon, {
@@ -1774,7 +1934,7 @@ function FeelTextfield(props) {
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsxRuntime.jsx(CodeEditor, {
-        id: prefixId$5(id),
+        id: prefixId$4(id),
         name: id,
         onInput: handleLocalInput,
         disabled: disabled,
@@ -1791,7 +1951,7 @@ function FeelTextfield(props) {
         ...props,
         onInput: handleLocalInput,
         contentAttributes: {
-          'id': prefixId$5(id),
+          'id': prefixId$4(id),
           'aria-label': label
         },
         value: localValue,
@@ -1829,7 +1989,7 @@ const OptionalFeelInput = compat.forwardRef((props, ref) => {
     }
   };
   return jsxRuntime.jsx("input", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -1843,6 +2003,53 @@ const OptionalFeelInput = compat.forwardRef((props, ref) => {
     value: value || ''
   });
 });
+const OptionalFeelNumberField = compat.forwardRef((props, ref) => {
+  const {
+    id,
+    debounce,
+    disabled,
+    onInput,
+    value,
+    min,
+    max,
+    step,
+    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
+  ref.current = {
+    focus: position => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+      if (typeof position === 'number' && position !== Infinity) {
+        if (position > value.length) {
+          position = value.length;
+        }
+        input.setSelectionRange(position, position);
+      }
+    }
+  };
+  return jsxRuntime.jsx(NumberField, {
+    id: id,
+    debounce: debounce,
+    disabled: disabled,
+    displayLabel: false,
+    inputRef: inputRef,
+    max: max,
+    min: min,
+    onInput: onInput,
+    step: step,
+    value: value,
+    onFocus: onFocus,
+    onBlur: onBlur
+  });
+});
 const OptionalFeelTextArea = compat.forwardRef((props, ref) => {
   const {
     id,
@@ -1867,7 +2074,7 @@ const OptionalFeelTextArea = compat.forwardRef((props, ref) => {
     }
   };
   return jsxRuntime.jsx("textarea", {
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -1943,7 +2150,7 @@ const OptionalFeelCheckbox = compat.forwardRef((props, ref) => {
   };
   return jsxRuntime.jsx("input", {
     ref: inputRef,
-    id: prefixId$5(id),
+    id: prefixId$4(id),
     name: id,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -2032,11 +2239,13 @@ function FeelEntry(props) {
   return jsxRuntime.jsxs("div", {
     class: classnames__default["default"](props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
-    children: [jsxRuntime.jsx(FeelTextfield, {
+    children: [preact.createElement(FeelTextfield, {
+      ...props,
       debounce: debounce,
       disabled: disabled,
       feel: feel,
       id: id,
+      key: element,
       label: label,
       onInput: onInput,
       onError: onError,
@@ -2050,7 +2259,7 @@ function FeelEntry(props) {
       variables: variables,
       tooltipContainer: tooltipContainer,
       OptionalComponent: props.OptionalComponent
-    }, element), error && jsxRuntime.jsx("div", {
+    }), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
     }), jsxRuntime.jsx(Description, {
@@ -2061,6 +2270,36 @@ function FeelEntry(props) {
   });
 }
 
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {String} props.step
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function FeelNumberEntry(props) {
+  return jsxRuntime.jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-number",
+    OptionalComponent: OptionalFeelNumberField,
+    ...props
+  });
+}
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -2170,7 +2409,7 @@ function FeelTemplatingEntry(props) {
     ...props
   });
 }
-function isEdited$6(node) {
+function isEdited$5(node) {
   if (!node) {
     return false;
   }
@@ -2182,7 +2421,7 @@ function isEdited$6(node) {
 
 // helpers /////////////////
 
-function prefixId$5(id) {
+function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
 }
 
@@ -2349,7 +2588,7 @@ function Templating(props) {
     })]
   });
 }
-function isEdited$5(node) {
+function isEdited$4(node) {
   return node && (!!node.value || node.classList.contains('edited'));
 }
 
@@ -2542,163 +2781,6 @@ function useNewItems(items = [], shouldReset) {
   return previousItems ? items.filter(item => !previousItems.includes(item)) : [];
 }
 
-function NumberField(props) {
-  const {
-    debounce,
-    disabled,
-    id,
-    label,
-    max,
-    min,
-    onInput,
-    step,
-    value = '',
-    onFocus,
-    onBlur
-  } = props;
-  const [localValue, setLocalValue] = hooks.useState(value);
-  const handleInputCallback = hooks.useMemo(() => {
-    return debounce(event => {
-      const {
-        validity,
-        value
-      } = event.target;
-      if (validity.valid) {
-        onInput(value ? parseFloat(value) : undefined);
-      }
-    });
-  }, [onInput, debounce]);
-  const handleInput = e => {
-    handleInputCallback(e);
-    setLocalValue(e.target.value);
-  };
-  hooks.useEffect(() => {
-    if (value === localValue) {
-      return;
-    }
-    setLocalValue(value);
-  }, [value]);
-  return jsxRuntime.jsxs("div", {
-    class: "bio-properties-panel-numberfield",
-    children: [jsxRuntime.jsx("label", {
-      for: prefixId$4(id),
-      class: "bio-properties-panel-label",
-      children: label
-    }), jsxRuntime.jsx("input", {
-      id: prefixId$4(id),
-      type: "number",
-      name: id,
-      spellCheck: "false",
-      autoComplete: "off",
-      disabled: disabled,
-      class: "bio-properties-panel-input",
-      max: max,
-      min: min,
-      onInput: handleInput,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      step: step,
-      value: localValue
-    })]
-  });
-}
-
-/**
- * @param {Object} props
- * @param {Boolean} props.debounce
- * @param {String} props.description
- * @param {Boolean} props.disabled
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {String} props.label
- * @param {String} props.max
- * @param {String} props.min
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {String} props.step
- * @param {Function} props.validate
- */
-function NumberFieldEntry(props) {
-  const {
-    debounce,
-    description,
-    disabled,
-    element,
-    getValue,
-    id,
-    label,
-    max,
-    min,
-    setValue,
-    step,
-    onFocus,
-    onBlur,
-    validate
-  } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
-  const globalError = useError(id);
-  const [localError, setLocalError] = hooks.useState(null);
-  let value = getValue(element);
-  const previousValue = usePrevious(value);
-  hooks.useEffect(() => {
-    if (minDash.isFunction(validate)) {
-      const newValidationError = validate(value) || null;
-      setLocalError(newValidationError);
-    }
-  }, [value]);
-  const onInput = newValue => {
-    let newValidationError = null;
-    if (minDash.isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
-    setLocalError(newValidationError);
-  };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
-  const error = globalError || localError;
-  return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
-    "data-entry-id": id,
-    children: [jsxRuntime.jsx(NumberField, {
-      debounce: debounce,
-      disabled: disabled,
-      id: id,
-      label: label,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onInput: onInput,
-      max: max,
-      min: min,
-      step: step,
-      value: value
-    }, element), error && jsxRuntime.jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
-    }), jsxRuntime.jsx(Description, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
-function isEdited$4(node) {
-  return node && !!node.value;
-}
-
-// helpers /////////////////
-
-function prefixId$4(id) {
-  return `bio-properties-panel-${id}`;
-}
-
 function Select(props) {
   const {
     id,
@@ -3238,6 +3320,7 @@ exports.ExternalLinkIcon = ExternalLinkIcon;
 exports.FeelCheckboxEntry = FeelCheckboxEntry;
 exports.FeelEntry = FeelEntry;
 exports.FeelIcon = FeelIcon$1;
+exports.FeelNumberEntry = FeelNumberEntry;
 exports.FeelTemplatingEntry = FeelTemplatingEntry;
 exports.FeelTextAreaEntry = FeelTextAreaEntry;
 exports.FeelToggleSwitchEntry = FeelToggleSwitchEntry;
@@ -3259,11 +3342,11 @@ exports.TextAreaEntry = TextAreaEntry;
 exports.TextFieldEntry = TextfieldEntry;
 exports.ToggleSwitchEntry = ToggleSwitchEntry;
 exports.isCheckboxEntryEdited = isEdited$8;
-exports.isFeelEntryEdited = isEdited$6;
-exports.isNumberFieldEntryEdited = isEdited$4;
+exports.isFeelEntryEdited = isEdited$5;
+exports.isNumberFieldEntryEdited = isEdited$6;
 exports.isSelectEntryEdited = isEdited$3;
 exports.isSimpleEntryEdited = isEdited$2;
-exports.isTemplatingEntryEdited = isEdited$5;
+exports.isTemplatingEntryEdited = isEdited$4;
 exports.isTextAreaEntryEdited = isEdited$1;
 exports.isTextFieldEntryEdited = isEdited;
 exports.isToggleSwitchEntryEdited = isEdited$7;