@bpmn-io/properties-panel 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -6,10 +6,22 @@ All notable changes to [`@bpmn-io/properties-panel`](https://github.com/bpmn-io/
 
 ___Note:__ Yet to be released changes appear here._
 
+## 0.16.0
+
+* `FEAT`: set errors through context ([#160](https://github.com/bpmn-io/properties-panel/pull/160))
+* `FEAT`: useShowEntryEvent hook uses ID ([#160](https://github.com/bpmn-io/properties-panel/pull/160))
+* `FEAT`: useEvent hook subscribes immediately ([#160](https://github.com/bpmn-io/properties-panel/pull/160))
+* `FEAT`: add focus and error to text area ([#160](https://github.com/bpmn-io/properties-panel/pull/160))
+
+### BREAKING CHANGES
+
+* useShowEntryEvent hook uses ID instead of callback
+* useShowErrorEvent hook removed, add errors through context instead
+
 ## 0.15.0
 
 * `FEAT`: pass props to `List` entries ([#157](https://github.com/bpmn-io/properties-panel/pull/157))
-* `FIX`: correct curser jumping on update ([#146](https://github.com/bpmn-io/properties-panel/issues/146))
+* `FIX`: correct cursor jumping on update ([#146](https://github.com/bpmn-io/properties-panel/issues/146))
 * `CHORE`: use controlled inputs ([#155](https://github.com/bpmn-io/properties-panel/issues/155))
 
 ## 0.14.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useMemo, useState, useCallback } from '../preact/hooks';
+import { useContext, useRef, useEffect, useMemo, useState, useCallback } from '../preact/hooks';
 import { isFunction, isArray, get, assign, set, sortBy, find, isNumber, debounce } from 'min-dash';
 import classnames from 'classnames';
 import '../preact/compat';
@@ -166,6 +166,10 @@ const DescriptionContext = createContext({
   getDescriptionForId: () => {}
 });
 
+const ErrorsContext = createContext({
+  errors: {}
+});
+
 /**
  * @typedef {Function} <propertiesPanel.showEntry> callback
  *
@@ -214,29 +218,48 @@ function useDescriptionContext(id, element) {
   return getDescriptionForId(id, element);
 }
 
-const DEFAULT_PRIORITY = 1000;
+function useError(id) {
+  const {
+    errors
+  } = 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
-  } = useContext(EventContext);
+function useEvent(event, callback, eventBus) {
+  const eventContext = useContext(EventContext);
+
+  if (!eventBus) {
+    ({
+      eventBus
+    } = eventContext);
+  }
+
+  const didMount = useRef(false); // (1) subscribe immediately
+
+  if (eventBus && !didMount.current) {
+    eventBus.on(event, callback);
+  } // (2) update subscription after inputs changed
+
+
   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;
@@ -382,30 +405,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
   } = useContext(LayoutContext);
   const ref = useRef();
-  const [focus, setFocus] = useState(false);
+  const focus = useRef(false);
   const onShowEntry = useCallback(event => {
-    if (show(event)) {
-      if (isFunction(onShow)) {
-        onShow();
-      }
+    if (event.id === id) {
+      onShow();
 
-      if (event.focus && !focus) {
-        setFocus(true);
+      if (!focus.current) {
+        focus.current = true;
       }
     }
-  }, [show]);
+  }, [id]);
   useEffect(() => {
-    if (focus && ref.current) {
+    if (focus.current && ref.current) {
       if (isFunction(ref.current.focus)) {
         ref.current.focus();
       }
@@ -414,45 +435,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
-  } = useContext(EventContext);
-  const [temporaryError, setTemporaryError] = useState(null);
-  const onPropertiesPanelUpdated = useCallback(() => setTemporaryError(null), []);
-  useEvent('propertiesPanel.updated', onPropertiesPanelUpdated);
-  const onShowError = 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
@@ -621,7 +610,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,
@@ -742,6 +731,16 @@ function PropertiesPanel(props) {
     getDescriptionForId
   };
   useEventBuffer(bufferedEvents, eventBus);
+  const [errors, setErrors] = useState({});
+
+  const onSetErrors = ({
+    errors
+  }) => setErrors(errors);
+
+  useEvent('propertiesPanel.setErrors', onSetErrors, eventBus);
+  const errorsContext = {
+    errors
+  };
   const eventContext = {
     eventBus
   };
@@ -762,30 +761,33 @@ function PropertiesPanel(props) {
 
   return jsx(LayoutContext.Provider, {
     value: propertiesPanelContext,
-    children: jsx(DescriptionContext.Provider, {
-      value: descriptionContext,
-      children: jsx(LayoutContext.Provider, {
-        value: layoutContext,
-        children: jsx(EventContext.Provider, {
-          value: eventContext,
-          children: jsxs("div", {
-            class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
-            children: [jsx(Header, {
-              element: element,
-              headerProvider: headerProvider
-            }), jsx("div", {
-              class: "bio-properties-panel-scroll-container",
-              children: groups.map(group => {
-                const {
-                  component: Component = Group,
-                  id
-                } = group;
-                return createElement(Component, { ...group,
-                  key: id,
-                  element: element
-                });
-              })
-            })]
+    children: jsx(ErrorsContext.Provider, {
+      value: errorsContext,
+      children: jsx(DescriptionContext.Provider, {
+        value: descriptionContext,
+        children: jsx(LayoutContext.Provider, {
+          value: layoutContext,
+          children: jsx(EventContext.Provider, {
+            value: eventContext,
+            children: jsxs("div", {
+              class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
+              children: [jsx(Header, {
+                element: element,
+                headerProvider: headerProvider
+              }), jsx("div", {
+                class: "bio-properties-panel-scroll-container",
+                children: groups.map(group => {
+                  const {
+                    component: Component = Group,
+                    id
+                  } = group;
+                  return createElement(Component, { ...group,
+                    key: id,
+                    element: element
+                  });
+                })
+              })]
+            })
           })
         })
       })
@@ -1012,7 +1014,7 @@ function ListItem(props) {
   });
 }
 
-const noop$3 = () => {};
+const noop = () => {};
 /**
  * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
@@ -1117,7 +1119,7 @@ function ListGroup(props) {
     ref: groupRef,
     children: [jsxs("div", {
       class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
-      onClick: hasItems ? toggleOpen : noop$3,
+      onClick: hasItems ? toggleOpen : noop,
       children: [jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
@@ -1205,16 +1207,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] = useState(value);
 
@@ -1236,7 +1235,7 @@ function Checkbox(props) {
 
     setLocalValue(value);
   }, [value]);
-  const ref = useShowEntryEvent(show);
+  const ref = useShowEntryEvent(id);
   return jsxs("div", {
     class: "bio-properties-panel-checkbox",
     children: [jsx("input", {
@@ -1275,11 +1274,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 jsxs("div", {
     class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
     "data-entry-id": id,
@@ -1288,7 +1286,6 @@ function CheckboxEntry(props) {
       id: id,
       label: label,
       onChange: setValue,
-      show: show,
       value: value
     }), error && jsx("div", {
       class: "bio-properties-panel-error",
@@ -1615,25 +1612,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,
@@ -1641,10 +1619,9 @@ function Select(props) {
     onChange,
     options = [],
     value,
-    disabled,
-    show = noop$1
+    disabled
   } = props;
-  const ref = useShowEntryEvent(show);
+  const ref = useShowEntryEvent(id);
   const [localValue, setLocalValue] = useState(value);
 
   const handleChangeCallback = ({
@@ -1711,12 +1688,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 jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -1726,8 +1702,7 @@ function SelectEntry(props) {
       value: value,
       onChange: setValue,
       options: options,
-      disabled: disabled,
-      show: show
+      disabled: disabled
     }), error && jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -1830,6 +1805,7 @@ function TextArea(props) {
     monospace
   } = props;
   const [localValue, setLocalValue] = useState(value);
+  const ref = useShowEntryEvent(id);
   const handleInputCallback = useMemo(() => {
     return debounce(({
       target
@@ -1858,6 +1834,7 @@ function TextArea(props) {
         label: label
       })]
     }), jsx("textarea", {
+      ref: ref,
       id: prefixId$2(id),
       name: id,
       spellCheck: "false",
@@ -1901,6 +1878,7 @@ function TextAreaEntry(props) {
     disabled
   } = props;
   const value = getValue(element);
+  const error = useError(id);
   return jsxs("div", {
     class: "bio-properties-panel-entry",
     "data-entry-id": id,
@@ -1914,6 +1892,9 @@ function TextAreaEntry(props) {
       monospace: monospace,
       feel: feel,
       disabled: disabled
+    }), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
     }), jsx(Description, {
       forId: id,
       element: element,
@@ -1929,8 +1910,6 @@ function prefixId$2(id) {
   return `bio-properties-panel-${id}`;
 }
 
-const noop = () => {};
-
 function Textfield(props) {
   const {
     debounce,
@@ -1939,11 +1918,10 @@ function Textfield(props) {
     label,
     onInput,
     feel = false,
-    value = '',
-    show = noop
+    value = ''
   } = props;
   const [localValue, setLocalValue] = useState(value || '');
-  const ref = useShowEntryEvent(show);
+  const ref = useShowEntryEvent(id);
   const handleInputCallback = useMemo(() => {
     return debounce(({
       target
@@ -2012,17 +1990,17 @@ function TextfieldEntry(props) {
     label,
     getValue,
     setValue,
-    validate,
-    show = noop
+    validate
   } = props;
   const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
-  const [validationError, setValidationError] = useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = useState(null);
   let value = getValue(element);
   const previousValue = usePrevious(value);
   useEffect(() => {
     if (isFunction(validate)) {
       const newValidationError = validate(value) || null;
-      setValidationError(newValidationError);
+      setLocalError(newValidationError);
     }
   }, [value]);
 
@@ -2039,15 +2017,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 jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -2058,7 +2035,6 @@ function TextfieldEntry(props) {
       id: id,
       label: label,
       onInput: onInput,
-      show: show,
       value: value
     }), error && jsx("div", {
       class: "bio-properties-panel-error",
@@ -2195,5 +2171,5 @@ var index = {
   debounceInput: ['factory', debounceInput]
 };
 
-export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, EventContext, ExternalLinkIcon, FeelOptionalIcon, FeelRequiredIcon, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$6 as isCheckboxEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useEvent, useEventBuffer, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useShowErrorEvent, useStickyIntersectionObserver };
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelOptionalIcon, FeelRequiredIcon, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$6 as isCheckboxEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useError, useEvent, useEventBuffer, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStickyIntersectionObserver };
 //# sourceMappingURL=index.esm.js.map