@bpmn-io/properties-panel 3.24.1 → 3.25.1

package/dist/assets/properties-panel.css

@@ -15,13 +15,14 @@
   --color-grey-0-0-22: hsl(0, 0%, 22%);
 
   --color-blue-205-100-35: hsl(205, 100%, 35%);
+  --color-blue-205-100-40: hsl(205, 100%, 40%);
+  --color-green-150-86-44: hsl(150, 86%, 44%);
   --color-blue-205-100-45: hsl(205, 100%, 45%);
   --color-blue-205-100-50: hsl(205, 100%, 50%);
-  --color-blue-205-100-85: hsl(205, 100%, 85%);
-  --color-blue-205-100-95: hsl(205, 100%, 95%);
   --color-blue-219-99-53: hsl(219, 99%, 53%);
   --color-blue-218-100-74: hsl(218, 100%, 74%);
-  --color-green-150-86-44: hsl(150, 86%, 44%);
+  --color-blue-205-100-85: hsl(205, 100%, 85%);
+  --color-blue-205-100-95: hsl(205, 100%, 95%);
 
   --color-red-360-100-40: hsl(360, 100%, 40%);
   --color-red-360-100-45: hsl(360, 100%, 45%);
@@ -78,6 +79,7 @@
 
   --input-focus-background-color: var(--color-blue-205-100-95);
   --input-focus-border-color: var(--color-blue-205-100-50);
+  --focus-outline-color: var(--color-blue-205-100-40);
 
   --input-error-background-color: var(--color-red-360-100-97);
   --input-error-border-color: var(--color-red-360-100-45);
@@ -299,6 +301,11 @@
   background: none;
 }
 
+.bio-properties-panel-group-header-button:focus {
+  outline-offset: 2px;
+  outline-color: var(--focus-outline-color);
+}
+
 .bio-properties-panel-group-header-buttons .bio-properties-panel-group-header-buttons:last-child {
   margin-right: 0;
 }
@@ -537,8 +544,9 @@ select.bio-properties-panel-input {
 }
 
 .bio-properties-panel-input[type="checkbox"]:focus {
-  outline: 2px solid var(--input-focus-border-color);
-  outline-offset: 0;
+  outline: auto;
+  outline-color: var(--focus-outline-color);
+  outline-offset: 2px;
 }
 
 .bio-properties-panel-checkbox > .bio-properties-panel-label {
@@ -1397,10 +1405,14 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-popup__title-link {
-  margin-left: auto; 
+  margin-left: 8px; 
   display: flex;
 }
 
+.bio-properties-panel-feel-popup__title-link:first-of-type {
+  margin-left: auto;
+}
+
 .bio-properties-panel-feel-popup__title-link svg {
   width: var(--popup-header-line-height);
   height: var(--popup-header-line-height);

package/dist/index.esm.js

@@ -24,6 +24,21 @@ ArrowIcon.defaultProps = {
   width: "16",
   height: "16"
 };
+var CloseIcon = function CloseIcon(props) {
+  return jsx("svg", {
+    ...props,
+    children: jsx("path", {
+      fillRule: "evenodd",
+      d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+      fill: "currentColor"
+    })
+  });
+};
+CloseIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16"
+};
 var CreateIcon = function CreateIcon(props) {
   return jsx("svg", {
     ...props,
@@ -111,26 +126,17 @@ FeelIcon$1.defaultProps = {
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-var HelpIcon = function HelpIcon(props) {
+var LaunchIcon = function LaunchIcon(props) {
   return jsxs("svg", {
     ...props,
     children: [jsx("path", {
-      d: "M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2Zm0 26a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z"
-    }), jsx("circle", {
-      cx: "16",
-      cy: "23.5",
-      r: "1.5"
+      d: "M26 28H6a2.003 2.003 0 0 1-2-2V6a2.003 2.003 0 0 1 2-2h10v2H6v20h20V16h2v10a2.003 2.003 0 0 1-2 2Z"
     }), jsx("path", {
-      d: "M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9Z"
-    }), jsx("path", {
-      style: {
-        fill: "none"
-      },
-      d: "M0 0h32v32H0z"
+      d: "M20 2v2h6.586L18 12.586 19.414 14 28 5.414V12h2V2H20z"
     })]
   });
 };
-HelpIcon.defaultProps = {
+LaunchIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 32 32"
 };
@@ -152,21 +158,6 @@ PopupIcon.defaultProps = {
   height: "16",
   viewBox: "0 0 32 32"
 };
-var CloseIcon = function CloseIcon(props) {
-  return jsx("svg", {
-    ...props,
-    children: jsx("path", {
-      fillRule: "evenodd",
-      d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
-      fill: "currentColor"
-    })
-  });
-};
-CloseIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
-};
 
 function Header(props) {
   const {
@@ -206,7 +197,7 @@ function Header(props) {
     }), jsx("div", {
       class: "bio-properties-panel-header-actions",
       children: documentationRef ? jsx("a", {
-        rel: "noopener",
+        rel: "noreferrer",
         class: "bio-properties-panel-header-link",
         href: documentationRef,
         title: "Open documentation",
@@ -1477,7 +1468,8 @@ function FEELPopupRoot(props) {
       on() {},
       off() {}
     },
-    popupContainer
+    popupContainer,
+    getPopupLinks = () => []
   } = props;
   const prevElement = usePrevious(element);
   const [popupConfig, setPopupConfig] = useState({});
@@ -1552,6 +1544,7 @@ function FEELPopupRoot(props) {
     children: [open && jsx(FeelPopupComponent, {
       onClose: handleClose,
       container: popupContainer,
+      getLinks: getPopupLinks,
       sourceElement: sourceElement,
       emit: emit,
       ...popupConfig
@@ -1561,6 +1554,7 @@ function FEELPopupRoot(props) {
 function FeelPopupComponent(props) {
   const {
     container,
+    getLinks,
     id,
     hostLanguage,
     onInput,
@@ -1630,24 +1624,24 @@ function FeelPopupComponent(props) {
     height: FEEL_POPUP_HEIGHT,
     width: FEEL_POPUP_WIDTH,
     ref: popupRef,
-    children: [jsxs(Popup.Title, {
+    children: [jsx(Popup.Title, {
       title: title,
       emit: emit,
       showCloseButton: true,
       closeButtonTooltip: "Save and close",
       onClose: onClose,
       draggable: true,
-      children: [type === 'feel' && jsxs("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
-        target: "_blank",
-        class: "bio-properties-panel-feel-popup__title-link",
-        children: ["Learn FEEL expressions", jsx(HelpIcon, {})]
-      }), type === 'feelers' && jsxs("a", {
-        href: "https://docs.camunda.io/docs/components/modeler/forms/configuration/forms-config-templating-syntax/",
-        target: "_blank",
-        class: "bio-properties-panel-feel-popup__title-link",
-        children: ["Learn templating", jsx(HelpIcon, {})]
-      })]
+      children: jsx(Fragment, {
+        children: getLinks(type).map((link, index) => {
+          return jsxs("a", {
+            rel: "noreferrer",
+            href: link.href,
+            target: "_blank",
+            class: "bio-properties-panel-feel-popup__title-link",
+            children: [link.title, jsx(LaunchIcon, {})]
+          }, index);
+        })
+      })
     }), jsx(Popup.Body, {
       children: jsxs("div", {
         onKeyDownCapture: onKeyDownCapture,
@@ -2776,6 +2770,7 @@ const DEFAULT_TOOLTIP = {};
  * @param {TooltipConfig} [props.tooltipConfig]
  * @param {Function} [props.tooltipLoaded]
  * @param {HTMLElement} [props.feelPopupContainer]
+ * @param {Function} [props.getFeelPopupLinks]
  * @param {Object} [props.eventBus]
  */
 function PropertiesPanel(props) {
@@ -2791,6 +2786,7 @@ function PropertiesPanel(props) {
     tooltipConfig,
     tooltipLoaded,
     feelPopupContainer,
+    getFeelPopupLinks,
     eventBus
   } = props;
 
@@ -2895,6 +2891,7 @@ function PropertiesPanel(props) {
                 element: element,
                 eventBus: eventBus,
                 popupContainer: feelPopupContainer,
+                getPopupLinks: getFeelPopupLinks,
                 children: jsxs("div", {
                   class: "bio-properties-panel",
                   children: [jsx(Header, {
@@ -4330,5 +4327,5 @@ var index = {
   feelPopup: ['type', FeelPopupModule]
 };
 
-export { ArrowIcon, CheckboxEntry, CloseIcon, 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, useElementVisible, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
+export { ArrowIcon, CheckboxEntry, CloseIcon, 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, LaunchIcon, 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, useElementVisible, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
 //# sourceMappingURL=index.esm.js.map