@bpmn-io/properties-panel 2.0.0 → 2.1.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { useContext, useRef, useEffect, useMemo, useCallback, useState, useLayoutEffect } from '../preact/hooks';
-import { isFunction, isArray, get, assign, set, sortBy, find, isNumber, debounce } from 'min-dash';
+import { isFunction, isArray, get, assign, set, sortBy, find, isString, isNumber, debounce } from 'min-dash';
 import { forwardRef } from '../preact/compat';
 import { jsx, jsxs } from '../preact/jsx-runtime';
 import classnames from 'classnames';
@@ -67,44 +67,18 @@ ExternalLinkIcon.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-var FeelRequiredIcon = function FeelRequiredIcon(props) {
-  return jsxs("svg", {
-    ...props,
-    children: [jsx("path", {
-      d: "M5.8 7.06V5.95h4.307v1.11H5.8Zm0 3.071v-1.11h4.307v1.11H5.8Z",
-      fill: "currentColor"
-    }), jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M8 3.268A4.732 4.732 0 1 0 12.732 8H14a6 6 0 1 1-6-6v1.268Z",
-      fill: "currentColor"
-    }), jsx("path", {
-      d: "m11.28 6.072-.832-.56 1.016-1.224L10 3.848l.312-.912 1.392.584L11.632 2h1.032l-.072 1.52 1.392-.584.312.912-1.464.44 1.008 1.224-.832.552-.864-1.296-.864 1.304Z",
-      fill: "currentColor"
-    })]
-  });
-};
-FeelRequiredIcon.defaultProps = {
-  viewBox: "0 0 16 16",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-var FeelOptionalIcon = function FeelOptionalIcon(props) {
-  return jsxs("svg", {
+var FeelIcon$1 = function FeelIcon(props) {
+  return jsx("svg", {
     ...props,
-    children: [jsx("path", {
-      d: "M5.845 7.04V5.93h4.307v1.11H5.845Zm0 3.07V9h4.307v1.11H5.845Z",
-      fill: "currentColor"
-    }), jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M3.286 8a4.714 4.714 0 1 0 9.428 0 4.714 4.714 0 0 0-9.428 0ZM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z",
-      fill: "currentColor"
-    })]
+    children: jsx("path", {
+      d: "M3.617 11.99c-.137.684-.392 1.19-.765 1.518-.362.328-.882.492-1.558.492H0l.309-1.579h1.264l1.515-7.64h-.912l.309-1.579h.911l.236-1.191c.137-.685.387-1.192.75-1.52C4.753.164 5.277 0 5.953 0h1.294L6.94 1.579H5.675l-.323 1.623h1.264l-.309 1.579H5.043l-1.426 7.208ZM5.605 11.021l3.029-4.155L7.28 3.202h2.073l.706 2.547h.176l1.691-2.547H14l-3.014 4.051 1.338 3.768H10.25l-.706-2.606H9.37L7.678 11.02H5.605Z",
+      fill: "currentcolor"
+    })
   });
 };
-FeelOptionalIcon.defaultProps = {
-  viewBox: "0 0 16 16",
+FeelIcon$1.defaultProps = {
+  width: "14",
+  height: "14",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
@@ -1509,14 +1483,13 @@ const noop$2 = () => {};
  */
 function FeelIcon(props) {
   const {
-    label,
     feel = false,
     active,
     disabled = false,
     onClick = noop$2
   } = props;
-  const feelRequiredLabel = ' must be a FEEL expression';
-  const feelOptionalLabel = ' can optionally be a FEEL expression';
+  const feelRequiredLabel = 'FEEL expression is mandatory';
+  const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`;
   const handleClick = e => {
     onClick(e);
 
@@ -1529,11 +1502,126 @@ function FeelIcon(props) {
     class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
     onClick: handleClick,
     disabled: feel === 'required' || disabled,
-    title: label + (feel === 'required' ? feelRequiredLabel : feelOptionalLabel),
-    children: feel === 'required' ? jsx(FeelRequiredIcon, {}) : jsx(FeelOptionalIcon, {})
+    title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
+    children: jsx(FeelIcon$1, {})
   });
 }
 
+function ToggleSwitch(props) {
+  const {
+    id,
+    label,
+    onInput,
+    value,
+    switcherLabel,
+    inline,
+    onFocus,
+    onBlur,
+    inputRef
+  } = props;
+  const [localValue, setLocalValue] = useState(value);
+  const handleInputCallback = async () => {
+    onInput(!value);
+  };
+  const handleInput = e => {
+    handleInputCallback();
+    setLocalValue(e.target.value);
+  };
+  useEffect(() => {
+    if (value === localValue) {
+      return;
+    }
+    setLocalValue(value);
+  }, [value]);
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-toggle-switch', {
+      inline
+    }),
+    children: [jsx("label", {
+      class: "bio-properties-panel-label",
+      for: prefixId$6(id),
+      children: label
+    }), jsxs("div", {
+      class: "bio-properties-panel-field-wrapper",
+      children: [jsxs("label", {
+        class: "bio-properties-panel-toggle-switch__switcher",
+        children: [jsx("input", {
+          ref: inputRef,
+          id: prefixId$6(id),
+          class: "bio-properties-panel-input",
+          type: "checkbox",
+          onFocus: onFocus,
+          onBlur: onBlur,
+          name: id,
+          onInput: handleInput,
+          checked: !!localValue
+        }), jsx("span", {
+          class: "bio-properties-panel-toggle-switch__slider"
+        })]
+      }), switcherLabel && jsx("p", {
+        class: "bio-properties-panel-toggle-switch__label",
+        children: switcherLabel
+      })]
+    })]
+  });
+}
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {String} props.switcherLabel
+ * @param {Boolean} props.inline
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function ToggleSwitchEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    label,
+    switcherLabel,
+    inline,
+    getValue,
+    setValue,
+    onFocus,
+    onBlur
+  } = props;
+  const value = getValue(element);
+  return jsxs("div", {
+    class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
+    "data-entry-id": id,
+    children: [jsx(ToggleSwitch, {
+      id: id,
+      label: label,
+      value: value,
+      onInput: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      switcherLabel: switcherLabel,
+      inline: inline
+    }), jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+function isEdited$7(node) {
+  return node && !!node.checked;
+}
+
+// helpers /////////////////
+
+function prefixId$6(id) {
+  return `bio-properties-panel-${id}`;
+}
+
 const noop$1 = () => {};
 function FeelTextfield(props) {
   const {
@@ -1552,8 +1640,8 @@ function FeelTextfield(props) {
   const [localValue, _setLocalValue] = useState(value);
   const editorRef = useShowEntryEvent(id);
   const containerRef = useRef();
-  const feelActive = localValue.startsWith('=') || feel === 'required';
-  const feelOnlyValue = localValue.startsWith('=') ? localValue.substring(1) : localValue;
+  const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
+  const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
   const [focus, _setFocus] = useState(undefined);
   const setFocus = (offset = 0) => {
     const hasFocus = containerRef.current.contains(document.activeElement);
@@ -1593,7 +1681,7 @@ function FeelTextfield(props) {
       return;
     }
     setLocalValue(newValue);
-    if (!feelActive && newValue.startsWith('=')) {
+    if (!feelActive && isString(newValue) && newValue.startsWith('=')) {
       // focus is behind `=` sign that will be removed
       setFocus(-1);
     }
@@ -1656,9 +1744,11 @@ function FeelTextfield(props) {
     };
   }, [containerRef, feelActive, handleFeelToggle, setFocus]);
   return jsxs("div", {
-    class: "bio-properties-panel-feel-entry",
+    class: classnames('bio-properties-panel-feel-entry', {
+      'feel-active': feelActive
+    }),
     children: [jsxs("label", {
-      for: prefixId$6(id),
+      for: prefixId$5(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
       children: [label, jsx(FeelIcon, {
@@ -1675,7 +1765,7 @@ function FeelTextfield(props) {
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsx(CodeEditor, {
-        id: prefixId$6(id),
+        id: prefixId$5(id),
         name: id,
         onInput: handleLocalInput,
         disabled: disabled,
@@ -1692,7 +1782,8 @@ function FeelTextfield(props) {
         ...props,
         onInput: handleLocalInput,
         contentAttributes: {
-          'id': prefixId$6(id)
+          'id': prefixId$5(id),
+          'aria-label': label
         },
         value: localValue,
         ref: editorRef
@@ -1729,7 +1820,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     }
   };
   return jsx("input", {
-    id: prefixId$6(id),
+    id: prefixId$5(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -1767,7 +1858,7 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     }
   };
   return jsx("textarea", {
-    id: prefixId$6(id),
+    id: prefixId$5(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -1782,6 +1873,78 @@ const OptionalFeelTextArea = forwardRef((props, ref) => {
     "data-gramm": "false"
   });
 });
+const OptionalFeelToggleSwitch = forwardRef((props, ref) => {
+  const {
+    id,
+    onInput,
+    value,
+    onFocus,
+    onBlur,
+    switcherLabel
+  } = 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
+  ref.current = {
+    focus: () => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+    }
+  };
+  return jsx(ToggleSwitch, {
+    id: id,
+    value: value,
+    inputRef: inputRef,
+    onInput: onInput,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    switcherLabel: switcherLabel
+  });
+});
+const OptionalFeelCheckbox = forwardRef((props, ref) => {
+  const {
+    id,
+    disabled,
+    onInput,
+    value,
+    onFocus,
+    onBlur
+  } = props;
+  const inputRef = useRef();
+  const handleChange = ({
+    target
+  }) => {
+    onInput(target.checked);
+  };
+
+  // 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: () => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+    }
+  };
+  return jsx("input", {
+    ref: inputRef,
+    id: prefixId$5(id),
+    name: id,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    type: "checkbox",
+    class: "bio-properties-panel-input",
+    onChange: handleChange,
+    checked: value,
+    disabled: disabled
+  });
+});
 
 /**
  * @param {Object} props
@@ -1916,6 +2079,60 @@ function FeelTextAreaEntry(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 {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 FeelToggleSwitchEntry(props) {
+  return jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-toggle-switch",
+    OptionalComponent: OptionalFeelToggleSwitch,
+    ...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 {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 FeelCheckboxEntry(props) {
+  return jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-checkbox",
+    OptionalComponent: OptionalFeelCheckbox,
+    ...props
+  });
+}
+
 /**
  * @param {Object} props
  * @param {Object} props.element
@@ -1944,13 +2161,19 @@ function FeelTemplatingEntry(props) {
     ...props
   });
 }
-function isEdited$7(node) {
-  return node && (!!node.value || node.classList.contains('edited'));
+function isEdited$6(node) {
+  if (!node) {
+    return false;
+  }
+  if (node.type === 'checkbox') {
+    return !!node.checked || node.classList.contains('edited');
+  }
+  return !!node.value || node.classList.contains('edited');
 }
 
 // helpers /////////////////
 
-function prefixId$6(id) {
+function prefixId$5(id) {
   return `bio-properties-panel-${id}`;
 }
 
@@ -2117,7 +2340,7 @@ function Templating(props) {
     })]
   });
 }
-function isEdited$6(node) {
+function isEdited$5(node) {
   return node && (!!node.value || node.classList.contains('edited'));
 }
 
@@ -2349,11 +2572,11 @@ function NumberField(props) {
   return jsxs("div", {
     class: "bio-properties-panel-numberfield",
     children: [jsx("label", {
-      for: prefixId$5(id),
+      for: prefixId$4(id),
       class: "bio-properties-panel-label",
       children: label
     }), jsx("input", {
-      id: prefixId$5(id),
+      id: prefixId$4(id),
       type: "number",
       name: id,
       spellCheck: "false",
@@ -2457,13 +2680,13 @@ function NumberFieldEntry(props) {
     })]
   });
 }
-function isEdited$5(node) {
+function isEdited$4(node) {
   return node && !!node.value;
 }
 
 // helpers /////////////////
 
-function prefixId$5(id) {
+function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
 }
 
@@ -2498,12 +2721,12 @@ function Select(props) {
   return jsxs("div", {
     class: "bio-properties-panel-select",
     children: [jsx("label", {
-      for: prefixId$4(id),
+      for: prefixId$3(id),
       class: "bio-properties-panel-label",
       children: label
     }), jsx("select", {
       ref: ref,
-      id: prefixId$4(id),
+      id: prefixId$3(id),
       name: id,
       class: "bio-properties-panel-input",
       onInput: handleChange,
@@ -2610,13 +2833,13 @@ function SelectEntry(props) {
     })]
   });
 }
-function isEdited$4(node) {
+function isEdited$3(node) {
   return node && !!node.value;
 }
 
 // helpers /////////////////
 
-function prefixId$4(id) {
+function prefixId$3(id) {
   return `bio-properties-panel-${id}`;
 }
 
@@ -2651,7 +2874,7 @@ function Simple(props) {
   return jsx("div", {
     class: "bio-properties-panel-simple",
     children: jsx("input", {
-      id: prefixId$3(id),
+      id: prefixId$2(id),
       type: "text",
       name: id,
       spellCheck: "false",
@@ -2666,13 +2889,13 @@ function Simple(props) {
     }, element)
   });
 }
-function isEdited$3(node) {
+function isEdited$2(node) {
   return node && !!node.value;
 }
 
 // helpers /////////////////
 
-function prefixId$3(id) {
+function prefixId$2(id) {
   return `bio-properties-panel-${id}`;
 }
 
@@ -2721,12 +2944,12 @@ function TextArea(props) {
   return jsxs("div", {
     class: "bio-properties-panel-textarea",
     children: [jsx("label", {
-      for: prefixId$2(id),
+      for: prefixId$1(id),
       class: "bio-properties-panel-label",
       children: label
     }), jsx("textarea", {
       ref: ref,
-      id: prefixId$2(id),
+      id: prefixId$1(id),
       name: id,
       spellCheck: "false",
       class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
@@ -2826,13 +3049,13 @@ function TextAreaEntry(props) {
     })]
   });
 }
-function isEdited$2(node) {
+function isEdited$1(node) {
   return node && !!node.value;
 }
 
 // helpers /////////////////
 
-function prefixId$2(id) {
+function prefixId$1(id) {
   return `bio-properties-panel-${id}`;
 }
 
@@ -2867,12 +3090,12 @@ function Textfield(props) {
   return jsxs("div", {
     class: "bio-properties-panel-textfield",
     children: [jsx("label", {
-      for: prefixId$1(id),
+      for: prefixId(id),
       class: "bio-properties-panel-label",
       children: label
     }), jsx("input", {
       ref: ref,
-      id: prefixId$1(id),
+      id: prefixId(id),
       type: "text",
       name: id,
       spellCheck: "false",
@@ -2964,115 +3187,8 @@ function TextfieldEntry(props) {
     })]
   });
 }
-function isEdited$1(node) {
-  return node && !!node.value;
-}
-
-// helpers /////////////////
-
-function prefixId$1(id) {
-  return `bio-properties-panel-${id}`;
-}
-
-function ToggleSwitch(props) {
-  const {
-    id,
-    label,
-    onInput,
-    value,
-    switcherLabel,
-    onFocus,
-    onBlur
-  } = props;
-  const [localValue, setLocalValue] = useState(value);
-  const handleInputCallback = async () => {
-    onInput(!value);
-  };
-  const handleInput = e => {
-    handleInputCallback();
-    setLocalValue(e.target.value);
-  };
-  useEffect(() => {
-    if (value === localValue) {
-      return;
-    }
-    setLocalValue(value);
-  }, [value]);
-  return jsxs("div", {
-    class: "bio-properties-panel-toggle-switch",
-    children: [jsx("label", {
-      class: "bio-properties-panel-label",
-      for: prefixId(id),
-      children: label
-    }), jsxs("div", {
-      class: "bio-properties-panel-field-wrapper",
-      children: [jsxs("label", {
-        class: "bio-properties-panel-toggle-switch__switcher",
-        children: [jsx("input", {
-          id: prefixId(id),
-          class: "bio-properties-panel-input",
-          type: "checkbox",
-          onFocus: onFocus,
-          onBlur: onBlur,
-          name: id,
-          onInput: handleInput,
-          checked: !!localValue
-        }), jsx("span", {
-          class: "bio-properties-panel-toggle-switch__slider"
-        })]
-      }), jsx("p", {
-        class: "bio-properties-panel-toggle-switch__label",
-        children: switcherLabel
-      })]
-    })]
-  });
-}
-
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.label
- * @param {String} props.switcherLabel
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- */
-function ToggleSwitchEntry(props) {
-  const {
-    element,
-    id,
-    description,
-    label,
-    switcherLabel,
-    getValue,
-    setValue,
-    onFocus,
-    onBlur
-  } = props;
-  const value = getValue(element);
-  return jsxs("div", {
-    class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
-    "data-entry-id": id,
-    children: [jsx(ToggleSwitch, {
-      id: id,
-      label: label,
-      value: value,
-      onInput: setValue,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      switcherLabel: switcherLabel
-    }), jsx(Description, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
 function isEdited(node) {
-  return node && !!node.checked;
+  return node && !!node.value;
 }
 
 // helpers /////////////////
@@ -3098,5 +3214,5 @@ var index = {
   debounceInput: ['factory', debounceInput]
 };
 
-export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelEntry, FeelOptionalIcon, FeelRequiredIcon, FeelTemplatingEntry, FeelTextAreaEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$8 as isCheckboxEntryEdited, isEdited$7 as isFeelEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$6 as isTemplatingEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useError, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver };
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$8 as isCheckboxEntryEdited, isEdited$6 as isFeelEntryEdited, isEdited$4 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$5 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$7 as isToggleSwitchEntryEdited, useDescriptionContext, useError, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver };
 //# sourceMappingURL=index.esm.js.map