@bpmn-io/properties-panel 3.15.0 → 3.16.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;
@@ -1149,17 +1146,33 @@ 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);
+
+  &.right {
+    padding-right: 6px;
+  }
+
+  &.top {
+    flex-direction: column;
+  }
 }
 
 .bio-properties-panel-tooltip-content {
@@ -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
 }

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 () => {
@@ -4317,5 +4319,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