@bpmn-io/properties-panel 3.15.0 → 3.17.0

package/dist/assets/properties-panel.css

@@ -1,7 +1,8 @@
 /**
  * Theming
  */
-.bio-properties-panel {
+ .bio-properties-panel,
+ .djs-parent {
   --color-grey-225-10-15: hsl(225, 10%, 15%);
   --color-grey-225-10-35: hsl(225, 10%, 35%);
   --color-grey-225-10-55: hsl(225, 10%, 55%);
@@ -26,11 +27,13 @@
   --color-red-360-100-45: hsl(360, 100%, 45%);
   --color-red-360-100-92: hsl(360, 100%, 92%);
   --color-red-360-100-97: hsl(360, 100%, 97%);
-
   --color-white: white;
   --color-black: black;
   --color-transparent: transparent;
 
+}
+
+.bio-properties-panel {
   --text-base-color: var(--color-grey-225-10-15);
   --text-error-color: var(--color-red-360-100-45);
   --link-color: var(--color-blue-205-100-50);
@@ -118,12 +121,6 @@
 
   --feelers-select-color:  var(--color-blue-205-100-85);
 
-  --tooltip-underline-color: var(--color-blue-219-99-53);
-  --tooltip-background-color: var(--color-grey-0-0-22);
-  --tooltip-link: var(--color-blue-218-100-74);
-  --tooltip-code-background-color: var(--color-grey-225-10-97);
-  --tooltip-code-border-color: var(--color-grey-225-10-85);
-  
   --text-size-base: 14px;
   --text-size-small: 13px;
   --text-size-smallest: 12px;
@@ -1116,7 +1113,7 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
-  resize: vertical;
+  resize: none;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -1149,19 +1146,35 @@ textarea.bio-properties-panel-input {
   text-decoration-style: dotted;
   text-underline-offset: 2px;
   font: inherit;
+  display: flex;
+  justify-content: center;
+  width: fit-content;
 }
 
 .bio-properties-panel-tooltip {
+  --tooltip-underline-color: var(--color-blue-219-99-53);
+  --tooltip-background-color: var(--color-grey-0-0-22);
+  --tooltip-link: var(--color-blue-218-100-74);
+  --tooltip-code-background-color: var(--color-grey-225-10-97);
+  --tooltip-code-border-color: var(--color-grey-225-10-85);
+
   display: flex;
   color: var(--color-white, white);
   position: fixed;
   z-index: 1000;
-  padding-right: 6px;
   max-width: 300px;
   font-size: var(--text-size-small);
   font-family: var(--font-family);
 }
 
+.bio-properties-panel-tooltip.right {
+  padding-right: 6px;
+}
+
+.bio-properties-panel-tooltip.top {
+  flex-direction: column;
+}
+
 .bio-properties-panel-tooltip-content {
   background-color: var(--tooltip-background-color);
   padding: 16px;
@@ -1207,6 +1220,12 @@ textarea.bio-properties-panel-input {
   margin-top: 16px;
 }
 
+.bio-properties-panel-tooltip.top .bio-properties-panel-tooltip-arrow {
+  margin-top: -3px;
+  margin-left: calc(50% - 2.5px);
+  transform: rotate(90deg);
+}
+
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor__open-popup-placeholder,
 .bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder {
   display: none;
@@ -1277,6 +1296,8 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
   padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__header {
@@ -1361,6 +1382,10 @@ textarea.bio-properties-panel-input {
   min-width: 100%;
 }
 
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-scroller {
+  overflow: auto !important;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container {
   width: 100%;
   display: flex;
@@ -1378,7 +1403,6 @@ textarea.bio-properties-panel-input {
   width: 100%;
   resize: none;
   padding: 0;
-  margin-left: -12px;
   overflow: hidden;
   overflow-y: auto
 }
@@ -1390,9 +1414,12 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
   position: absolute;
-  display: none;
+  top: 0;
   right: 0;
-  bottom: -1px;
+  line-height: 1;
+  padding: 2px 4px;
+  margin: 3px;
+  display: none;
   background: none;
   border: none;
   color: var(--feel-open-popup-color);

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 import { query, domify } from 'min-dom';
 import { FeelersEditor } from 'feelers';
 import FeelEditor from '@bpmn-io/feel-editor';
-import { lineNumbers } from '@codemirror/view';
+import { lineNumbers, EditorView } from '@codemirror/view';
 import * as focusTrap from 'focus-trap';
 
 var ArrowIcon = function ArrowIcon(props) {
@@ -284,7 +284,9 @@ function Tooltip(props) {
   const {
     forId,
     value,
-    parent
+    parent,
+    direction = 'right',
+    position
   } = props;
   const [visible, setShow] = useState(false);
   const [focusedViaKeyboard, setFocusedViaKeyboard] = useState(false);
@@ -353,11 +355,11 @@ function Tooltip(props) {
   }, [wrapperRef.current, visible, focusedViaKeyboard]);
   const renderTooltip = () => {
     return jsxs("div", {
-      class: "bio-properties-panel-tooltip",
+      class: `bio-properties-panel-tooltip ${direction}`,
       role: "tooltip",
       id: "bio-properties-panel-tooltip",
       "aria-labelledby": forId,
-      style: getTooltipPosition(wrapperRef.current),
+      style: position || getTooltipPosition(wrapperRef.current),
       ref: tooltipRef,
       onClick: e => e.stopPropagation(),
       children: [jsx("div", {
@@ -1010,7 +1012,7 @@ const CodeEditor = forwardRef((props, ref) => {
       tooltipContainer: tooltipContainer,
       value: localValue,
       variables: variables,
-      extensions: [...(enableGutters ? [lineNumbers()] : [])]
+      extensions: [...(enableGutters ? [lineNumbers()] : []), EditorView.lineWrapping]
     });
     setEditor(editor);
     return () => {
@@ -1268,6 +1270,7 @@ function PopupComponent(props, globalRef) {
     }
     return () => focusTrapRef.current && focusTrapRef.current.deactivate();
   }, [popupRef]);
+  useEvent('propertiesPanel.detach', onClose);
   return createPortal(jsx("div", {
     "aria-label": title,
     tabIndex: -1,
@@ -1447,7 +1450,13 @@ function FEELPopupRoot(props) {
     setSourceElement(_sourceElement);
     emit('open');
   };
-  const handleClose = () => {
+  const handleClose = (event = {}) => {
+    const {
+      id
+    } = event;
+    if (id && id !== source) {
+      return;
+    }
     setOpen(false);
     setSource(null);
   };
@@ -1616,7 +1625,7 @@ function FeelPopupComponent(props) {
     }), jsx(Popup.Footer, {
       children: jsx("button", {
         type: "button",
-        onClick: onClose,
+        onClick: () => onClose(),
         title: "Close pop-up editor",
         class: "bio-properties-panel-feel-popup__close-btn",
         children: "Close"
@@ -1878,7 +1887,7 @@ function NumberFieldEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -1924,7 +1933,7 @@ function prefixId$6(id) {
 }
 
 const noop$2 = () => {};
-function FeelTextfield(props) {
+function FeelTextfieldComponent(props) {
   const {
     debounce,
     id,
@@ -2126,6 +2135,7 @@ function FeelTextfield(props) {
     })]
   });
 }
+const FeelTextfield = withAutoClosePopup(FeelTextfieldComponent);
 const OptionalFeelInput = forwardRef((props, ref) => {
   const {
     id,
@@ -2378,7 +2388,7 @@ function FeelEntry(props) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -2604,6 +2614,27 @@ function getPopupTitle(element, label) {
   }
   return `${popupTitle}${label}`;
 }
+function withAutoClosePopup(Component) {
+  return function (props) {
+    const {
+      id
+    } = props;
+    const {
+      close
+    } = useContext(FeelPopupContext);
+    const closePopup = useStaticCallback(close);
+    useEffect(() => {
+      return () => {
+        closePopup({
+          id
+        });
+      };
+    }, []);
+    return jsx(Component, {
+      ...props
+    });
+  };
+}
 
 const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
@@ -3444,7 +3475,7 @@ function TemplatingEntry(props) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = useStaticCallback(newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -3866,7 +3897,7 @@ function SelectEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onChange = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -4075,7 +4106,7 @@ function TextAreaEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -4215,7 +4246,7 @@ function TextfieldEntry(props) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
     }
-  }, [value]);
+  }, [value, validate]);
   const onInput = newValue => {
     let newValidationError = null;
     if (isFunction(validate)) {
@@ -4317,5 +4348,5 @@ var index = {
   feelPopup: ['type', FeelPopupModule]
 };
 
-export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index$1 as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, HelpIcon, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, Popup, PopupIcon, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, isEdited$5 as isCheckboxEntryEdited, isEdited$6 as isFeelEntryEdited, isEdited$7 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$8 as isToggleSwitchEntryEdited, useDescriptionContext, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index$1 as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, HelpIcon, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, Popup, PopupIcon, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, TooltipWrapper as TooltipEntry, isEdited$5 as isCheckboxEntryEdited, isEdited$6 as isFeelEntryEdited, isEdited$7 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$8 as isToggleSwitchEntryEdited, useDescriptionContext, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
 //# sourceMappingURL=index.esm.js.map