@bpmn-io/properties-panel 3.35.1 → 3.36.1

package/dist/assets/properties-panel.css

@@ -1532,3 +1532,9 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feel-popup .cm-gutters .cm-lineNumbers .cm-gutterElement {
   text-align: center;
 }
+
+/* Checkbox Group */
+.bio-properties-panel-checkbox-group .bio-properties-panel-checkbox-group-entries > .bio-properties-panel-entry {
+  margin: 0;
+  padding: 0;
+}

package/dist/index.esm.js

@@ -1028,9 +1028,11 @@ function PropertiesPanel(props) {
     return get(layout, key, defaultValue);
   };
   const setLayoutForKey = (key, config) => {
-    const newLayout = assign({}, layout);
-    set(newLayout, key, config);
-    setLayout(newLayout);
+    setLayout(prevLayout => {
+      const newLayout = assign({}, prevLayout);
+      set(newLayout, key, config);
+      return newLayout;
+    });
   };
   const layoutContext = {
     layout,
@@ -1687,6 +1689,73 @@ function prefixId$8(id) {
   return `bio-properties-panel-${id}`;
 }
 
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {Array<{label: String, value: *}>} props.options
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {String} [props.description]
+ * @param {string|import('preact').Component} [props.tooltip]
+ * @param {boolean} [props.disabled]
+ * @param {Function} [props.onFocus]
+ * @param {Function} [props.onBlur]
+ */
+function CheckboxGroup(props) {
+  const {
+    element,
+    id,
+    label,
+    description,
+    tooltip,
+    options = [],
+    getValue,
+    setValue,
+    disabled,
+    onFocus,
+    onBlur
+  } = props;
+  const value = getValue(element) || [];
+  const handleOptionChange = (optionValue, checked) => {
+    const newValue = checked ? [...value, optionValue] : value.filter(v => v !== optionValue);
+    setValue(newValue);
+  };
+  return jsxs("div", {
+    class: "bio-properties-panel-entry bio-properties-panel-checkbox-group",
+    "data-entry-id": id,
+    children: [jsx("div", {
+      class: "bio-properties-panel-group-header",
+      children: jsx("p", {
+        class: "bio-properties-panel-label",
+        children: jsx(TooltipWrapper, {
+          value: tooltip,
+          forId: id,
+          element: element,
+          children: label
+        })
+      })
+    }), jsx("div", {
+      class: "bio-properties-panel-checkbox-group-entries",
+      children: options.map(option => jsx(CheckboxEntry, {
+        id: `${id}-${option.value}`,
+        label: option.label,
+        setValue: checked => handleOptionChange(option.value, checked),
+        getValue: () => value.includes(option.value),
+        disabled: disabled,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        element: element
+      }, option.value))
+    }), jsx(Description, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+
 /**
  * Button to open popups.
  *
@@ -4692,5 +4761,5 @@ var index = {
   feelPopupRenderer: ['type', FeelPopupRenderer]
 };
 
-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, FeelLanguageContext, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, LaunchIcon, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, OpenPopupIcon, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, TooltipWrapper as TooltipEntry, isEdited$8 as isCheckboxEntryEdited, isEdited$5 as isFeelEntryEdited, isEdited$6 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$7 as isToggleSwitchEntryEdited, useDebounce, useDescriptionContext, useElementVisible, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
+export { ArrowIcon, CheckboxEntry, CheckboxGroup, CloseIcon, CollapsibleEntry, CreateIcon, index$1 as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon$1 as FeelIcon, FeelLanguageContext, FeelNumberEntry, index as FeelPopupModule, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, LaunchIcon, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, OpenPopupIcon, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, TooltipWrapper as TooltipEntry, isEdited$8 as isCheckboxEntryEdited, isEdited$5 as isFeelEntryEdited, isEdited$6 as isNumberFieldEntryEdited, isEdited$3 as isSelectEntryEdited, isEdited$2 as isSimpleEntryEdited, isEdited$4 as isTemplatingEntryEdited, isEdited$1 as isTextAreaEntryEdited, isEdited as isTextFieldEntryEdited, isEdited$7 as isToggleSwitchEntryEdited, useDebounce, useDescriptionContext, useElementVisible, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
 //# sourceMappingURL=index.esm.js.map