@bpmn-io/properties-panel 0.15.0 → 0.16.0

package/dist/index.js

@@ -174,6 +174,10 @@ const DescriptionContext = preact.createContext({
   getDescriptionForId: () => {}
 });
 
+const ErrorsContext = preact.createContext({
+  errors: {}
+});
+
 /**
  * @typedef {Function} <propertiesPanel.showEntry> callback
  *
@@ -222,29 +226,48 @@ function useDescriptionContext(id, element) {
   return getDescriptionForId(id, element);
 }
 
-const DEFAULT_PRIORITY = 1000;
+function useError(id) {
+  const {
+    errors
+  } = hooks.useContext(ErrorsContext);
+  return errors[id];
+}
+
 /**
- * Subscribe to an event.
+ * Subscribe to an event immediately. Update subscription after inputs changed.
  *
  * @param {string} event
  * @param {Function} callback
- * @param {number} [priority]
- *
- * @returns {import('preact').Ref}
  */
 
-function useEvent(event, callback, priority = DEFAULT_PRIORITY) {
-  const {
-    eventBus
-  } = hooks.useContext(EventContext);
+function useEvent(event, callback, eventBus) {
+  const eventContext = hooks.useContext(EventContext);
+
+  if (!eventBus) {
+    ({
+      eventBus
+    } = eventContext);
+  }
+
+  const didMount = hooks.useRef(false); // (1) subscribe immediately
+
+  if (eventBus && !didMount.current) {
+    eventBus.on(event, callback);
+  } // (2) update subscription after inputs changed
+
+
   hooks.useEffect(() => {
-    if (!eventBus) {
-      return;
+    if (eventBus && didMount.current) {
+      eventBus.on(event, callback);
     }
 
-    eventBus.on(event, priority, callback);
-    return () => eventBus.off(event, callback);
-  }, [callback, event, eventBus, priority]);
+    didMount.current = true;
+    return () => {
+      if (eventBus) {
+        eventBus.off(event, callback);
+      }
+    };
+  }, [callback, event, eventBus]);
 }
 
 const HIGH_PRIORITY = 10000;
@@ -390,30 +413,28 @@ function usePrevious(value) {
 /**
  * Subscribe to `propertiesPanel.showEntry`.
  *
- * @param {Function} show
+ * @param {string} id
  *
  * @returns {import('preact').Ref}
  */
 
-function useShowEntryEvent(show) {
+function useShowEntryEvent(id) {
   const {
     onShow
   } = hooks.useContext(LayoutContext);
   const ref = hooks.useRef();
-  const [focus, setFocus] = hooks.useState(false);
+  const focus = hooks.useRef(false);
   const onShowEntry = hooks.useCallback(event => {
-    if (show(event)) {
-      if (minDash.isFunction(onShow)) {
-        onShow();
-      }
+    if (event.id === id) {
+      onShow();
 
-      if (event.focus && !focus) {
-        setFocus(true);
+      if (!focus.current) {
+        focus.current = true;
       }
     }
-  }, [show]);
+  }, [id]);
   hooks.useEffect(() => {
-    if (focus && ref.current) {
+    if (focus.current && ref.current) {
       if (minDash.isFunction(ref.current.focus)) {
         ref.current.focus();
       }
@@ -422,45 +443,13 @@ function useShowEntryEvent(show) {
         ref.current.select();
       }
 
-      setFocus(false);
+      focus.current = false;
     }
-  }, [focus]);
+  });
   useEvent('propertiesPanel.showEntry', onShowEntry);
   return ref;
 }
 
-/**
- * Subscribe to `propertiesPanel.showError`. On `propertiesPanel.showError` set
- * temporary error. Fire `propertiesPanel.showEntry` for temporary error to be
- * visible. Unset error on `propertiesPanel.updated`.
- *
- * @param {Function} show
- *
- * @returns {import('preact').Ref}
- */
-
-function useShowErrorEvent(show) {
-  const {
-    eventBus
-  } = hooks.useContext(EventContext);
-  const [temporaryError, setTemporaryError] = hooks.useState(null);
-  const onPropertiesPanelUpdated = hooks.useCallback(() => setTemporaryError(null), []);
-  useEvent('propertiesPanel.updated', onPropertiesPanelUpdated);
-  const onShowError = hooks.useCallback(event => {
-    setTemporaryError(null);
-
-    if (show(event)) {
-      if (eventBus) {
-        eventBus.fire('propertiesPanel.showEntry', event);
-      }
-
-      setTemporaryError(event.message);
-    }
-  }, [show]);
-  useEvent('propertiesPanel.showError', onShowError);
-  return temporaryError;
-}
-
 /**
  * @callback setSticky
  * @param {boolean} value
@@ -629,7 +618,7 @@ const DEFAULT_LAYOUT = {
   open: true
 };
 const DEFAULT_DESCRIPTION = {};
-const bufferedEvents = ['propertiesPanel.showEntry', 'propertiesPanel.showError'];
+const bufferedEvents = ['propertiesPanel.showEntry', 'propertiesPanel.setErrors'];
 /**
  * @typedef { {
  *    component: import('preact').Component,
@@ -750,6 +739,16 @@ function PropertiesPanel(props) {
     getDescriptionForId
   };
   useEventBuffer(bufferedEvents, eventBus);
+  const [errors, setErrors] = hooks.useState({});
+
+  const onSetErrors = ({
+    errors
+  }) => setErrors(errors);
+
+  useEvent('propertiesPanel.setErrors', onSetErrors, eventBus);
+  const errorsContext = {
+    errors
+  };
   const eventContext = {
     eventBus
   };
@@ -770,30 +769,33 @@ function PropertiesPanel(props) {
 
   return jsxRuntime.jsx(LayoutContext.Provider, {
     value: propertiesPanelContext,
-    children: jsxRuntime.jsx(DescriptionContext.Provider, {
-      value: descriptionContext,
-      children: jsxRuntime.jsx(LayoutContext.Provider, {
-        value: layoutContext,
-        children: jsxRuntime.jsx(EventContext.Provider, {
-          value: eventContext,
-          children: jsxRuntime.jsxs("div", {
-            class: classnames__default["default"]('bio-properties-panel', layout.open ? 'open' : ''),
-            children: [jsxRuntime.jsx(Header, {
-              element: element,
-              headerProvider: headerProvider
-            }), jsxRuntime.jsx("div", {
-              class: "bio-properties-panel-scroll-container",
-              children: groups.map(group => {
-                const {
-                  component: Component = Group,
-                  id
-                } = group;
-                return preact.createElement(Component, { ...group,
-                  key: id,
-                  element: element
-                });
-              })
-            })]
+    children: jsxRuntime.jsx(ErrorsContext.Provider, {
+      value: errorsContext,
+      children: jsxRuntime.jsx(DescriptionContext.Provider, {
+        value: descriptionContext,
+        children: jsxRuntime.jsx(LayoutContext.Provider, {
+          value: layoutContext,
+          children: jsxRuntime.jsx(EventContext.Provider, {
+            value: eventContext,
+            children: jsxRuntime.jsxs("div", {
+              class: classnames__default["default"]('bio-properties-panel', layout.open ? 'open' : ''),
+              children: [jsxRuntime.jsx(Header, {
+                element: element,
+                headerProvider: headerProvider
+              }), jsxRuntime.jsx("div", {
+                class: "bio-properties-panel-scroll-container",
+                children: groups.map(group => {
+                  const {
+                    component: Component = Group,
+                    id
+                  } = group;
+                  return preact.createElement(Component, { ...group,
+                    key: id,
+                    element: element
+                  });
+                })
+              })]
+            })
           })
         })
       })
@@ -1020,7 +1022,7 @@ function ListItem(props) {
   });
 }
 
-const noop$3 = () => {};
+const noop = () => {};
 /**
  * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
@@ -1125,7 +1127,7 @@ function ListGroup(props) {
     ref: groupRef,
     children: [jsxRuntime.jsxs("div", {
       class: classnames__default["default"]('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
-      onClick: hasItems ? toggleOpen : noop$3,
+      onClick: hasItems ? toggleOpen : noop,
       children: [jsxRuntime.jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
@@ -1213,16 +1215,13 @@ function Description(props) {
   }
 }
 
-const noop$2 = () => {};
-
 function Checkbox(props) {
   const {
     id,
     label,
     onChange,
     disabled,
-    value = false,
-    show = noop$2
+    value = false
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
 
@@ -1244,7 +1243,7 @@ function Checkbox(props) {
 
     setLocalValue(value);
   }, [value]);
-  const ref = useShowEntryEvent(show);
+  const ref = useShowEntryEvent(id);
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-checkbox",
     children: [jsxRuntime.jsx("input", {
@@ -1283,11 +1282,10 @@ function CheckboxEntry(props) {
     label,
     getValue,
     setValue,
-    disabled,
-    show = noop$2
+    disabled
   } = props;
   const value = getValue(element);
-  const error = useShowErrorEvent(show);
+  const error = useError(id);
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
     "data-entry-id": id,
@@ -1296,7 +1294,6 @@ function CheckboxEntry(props) {
       id: id,
       label: label,
       onChange: setValue,
-      show: show,
       value: value
     }), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
@@ -1623,25 +1620,6 @@ function prefixId$5(id) {
   return `bio-properties-panel-${id}`;
 }
 
-const noop$1 = () => {};
-/**
- * @typedef { { value: string, label: string, disabled: boolean } } Option
- */
-
-/**
- * Provides basic select input.
- *
- * @param {object} props
- * @param {string} props.id
- * @param {string[]} props.path
- * @param {string} props.label
- * @param {Function} props.onChange
- * @param {Array<Option>} [props.options]
- * @param {string} props.value
- * @param {boolean} [props.disabled]
- */
-
-
 function Select(props) {
   const {
     id,
@@ -1649,10 +1627,9 @@ function Select(props) {
     onChange,
     options = [],
     value,
-    disabled,
-    show = noop$1
+    disabled
   } = props;
-  const ref = useShowEntryEvent(show);
+  const ref = useShowEntryEvent(id);
   const [localValue, setLocalValue] = hooks.useState(value);
 
   const handleChangeCallback = ({
@@ -1719,12 +1696,11 @@ function SelectEntry(props) {
     getValue,
     setValue,
     getOptions,
-    disabled,
-    show = noop$1
+    disabled
   } = props;
   const value = getValue(element);
   const options = getOptions(element);
-  const error = useShowErrorEvent(show);
+  const error = useError(id);
   return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -1734,8 +1710,7 @@ function SelectEntry(props) {
       value: value,
       onChange: setValue,
       options: options,
-      disabled: disabled,
-      show: show
+      disabled: disabled
     }), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -1838,6 +1813,7 @@ function TextArea(props) {
     monospace
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
+  const ref = useShowEntryEvent(id);
   const handleInputCallback = hooks.useMemo(() => {
     return debounce(({
       target
@@ -1866,6 +1842,7 @@ function TextArea(props) {
         label: label
       })]
     }), jsxRuntime.jsx("textarea", {
+      ref: ref,
       id: prefixId$2(id),
       name: id,
       spellCheck: "false",
@@ -1909,6 +1886,7 @@ function TextAreaEntry(props) {
     disabled
   } = props;
   const value = getValue(element);
+  const error = useError(id);
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-entry",
     "data-entry-id": id,
@@ -1922,6 +1900,9 @@ function TextAreaEntry(props) {
       monospace: monospace,
       feel: feel,
       disabled: disabled
+    }), error && jsxRuntime.jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
     }), jsxRuntime.jsx(Description, {
       forId: id,
       element: element,
@@ -1937,8 +1918,6 @@ function prefixId$2(id) {
   return `bio-properties-panel-${id}`;
 }
 
-const noop = () => {};
-
 function Textfield(props) {
   const {
     debounce,
@@ -1947,11 +1926,10 @@ function Textfield(props) {
     label,
     onInput,
     feel = false,
-    value = '',
-    show = noop
+    value = ''
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value || '');
-  const ref = useShowEntryEvent(show);
+  const ref = useShowEntryEvent(id);
   const handleInputCallback = hooks.useMemo(() => {
     return debounce(({
       target
@@ -2020,17 +1998,17 @@ function TextfieldEntry(props) {
     label,
     getValue,
     setValue,
-    validate,
-    show = noop
+    validate
   } = props;
   const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
-  const [validationError, setValidationError] = 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;
-      setValidationError(newValidationError);
+      setLocalError(newValidationError);
     }
   }, [value]);
 
@@ -2047,15 +2025,14 @@ function TextfieldEntry(props) {
       setValue(newValue);
     }
 
-    setValidationError(newValidationError);
+    setLocalError(newValidationError);
   };
 
-  if (previousValue === value && validationError) {
+  if (previousValue === value && localError) {
     value = cachedInvalidValue;
   }
 
-  const temporaryError = useShowErrorEvent(show);
-  const error = temporaryError || validationError;
+  const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -2066,7 +2043,6 @@ function TextfieldEntry(props) {
       id: id,
       label: label,
       onInput: onInput,
-      show: show,
       value: value
     }), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
@@ -2212,6 +2188,7 @@ exports.DeleteIcon = DeleteIcon;
 exports.DescriptionContext = DescriptionContext;
 exports.DescriptionEntry = Description;
 exports.DropdownButton = DropdownButton;
+exports.ErrorsContext = ErrorsContext;
 exports.EventContext = EventContext;
 exports.ExternalLinkIcon = ExternalLinkIcon;
 exports.FeelOptionalIcon = FeelOptionalIcon;
@@ -2240,12 +2217,12 @@ exports.isTextAreaEntryEdited = isEdited$2;
 exports.isTextFieldEntryEdited = isEdited$1;
 exports.isToggleSwitchEntryEdited = isEdited;
 exports.useDescriptionContext = useDescriptionContext;
+exports.useError = useError;
 exports.useEvent = useEvent;
 exports.useEventBuffer = useEventBuffer;
 exports.useKeyFactory = useKeyFactory;
 exports.useLayoutState = useLayoutState;
 exports.usePrevious = usePrevious;
 exports.useShowEntryEvent = useShowEntryEvent;
-exports.useShowErrorEvent = useShowErrorEvent;
 exports.useStickyIntersectionObserver = useStickyIntersectionObserver;
 //# sourceMappingURL=index.js.map