@bpmn-io/properties-panel 3.13.0 → 3.15.0

package/dist/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var hooks = require('../preact/hooks');
 var minDash = require('min-dash');
 var compat = require('../preact/compat');
@@ -14,10 +12,7 @@ var FeelEditor = require('@bpmn-io/feel-editor');
 var view = require('@codemirror/view');
 var focusTrap = require('focus-trap');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -30,13 +25,11 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var FeelEditor__default = /*#__PURE__*/_interopDefaultLegacy(FeelEditor);
-var focusTrap__namespace = /*#__PURE__*/_interopNamespace(focusTrap);
+var focusTrap__namespace = /*#__PURE__*/_interopNamespaceDefault(focusTrap);
 
 var ArrowIcon = function ArrowIcon(props) {
   return jsxRuntime.jsx("svg", {
@@ -162,6 +155,24 @@ HelpIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 32 32"
 };
+var PopupIcon = function PopupIcon(props) {
+  return jsxRuntime.jsxs("svg", {
+    ...props,
+    children: [jsxRuntime.jsx("path", {
+      fill: "currentColor",
+      d: "M28 4H10a2.006 2.006 0 0 0-2 2v14a2.006 2.006 0 0 0 2 2h18a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2Zm0 16H10V6h18Z"
+    }), jsxRuntime.jsx("path", {
+      fill: "currentColor",
+      d: "M18 26H4V16h2v-2H4a2.006 2.006 0 0 0-2 2v10a2.006 2.006 0 0 0 2 2h14a2.006 2.006 0 0 0 2-2v-2h-2Z"
+    })]
+  });
+};
+PopupIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 32 32"
+};
 
 function Header(props) {
   const {
@@ -235,6 +246,7 @@ const ErrorsContext = preact.createContext({
  *
  * @returns void
  */
+
 const EventContext = preact.createContext({
   eventBus: null
 });
@@ -734,7 +746,7 @@ function Group(props) {
     "data-group-id": 'group-' + id,
     ref: groupRef,
     children: [jsxRuntime.jsxs("div", {
-      class: classnames__default["default"]('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
+      class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: toggleOpen,
       children: [jsxRuntime.jsx("div", {
         title: props.tooltip ? null : label,
@@ -762,7 +774,7 @@ function Group(props) {
         })]
       })]
     }), jsxRuntime.jsx("div", {
-      class: classnames__default["default"]('bio-properties-panel-group-entries', open ? 'open' : ''),
+      class: classnames('bio-properties-panel-group-entries', open ? 'open' : ''),
       children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
         children: entries.map(entry => {
@@ -926,13 +938,13 @@ const CodeEditor$1 = compat.forwardRef((props, ref) => {
     ref.current.focus();
   };
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-feelers-editor-container', popupOpen ? 'popupOpen' : null),
+    class: classnames('bio-properties-panel-feelers-editor-container', popupOpen ? 'popupOpen' : null),
     children: [jsxRuntime.jsx("div", {
       class: "bio-properties-panel-feelers-editor__open-popup-placeholder",
       children: "Opened in editor"
     }), jsxRuntime.jsx("div", {
       name: props.name,
-      class: classnames__default["default"]('bio-properties-panel-feelers-editor bio-properties-panel-input', localValue ? 'edited' : null, disabled ? 'disabled' : null),
+      class: classnames('bio-properties-panel-feelers-editor bio-properties-panel-input', localValue ? 'edited' : null, disabled ? 'disabled' : null),
       ref: inputRef,
       onClick: handleClick
     }), jsxRuntime.jsx("button", {
@@ -1011,7 +1023,7 @@ const CodeEditor = compat.forwardRef((props, ref) => {
         onFeelToggle();
       }
     };
-    editor = new FeelEditor__default["default"]({
+    editor = new FeelEditor({
       container: inputRef.current,
       onChange: handleInput,
       onKeyDown: onKeyDown,
@@ -1048,13 +1060,13 @@ const CodeEditor = compat.forwardRef((props, ref) => {
     ref.current.focus();
   };
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null, popupOpen ? 'popupOpen' : null),
+    class: classnames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null, popupOpen ? 'popupOpen' : null),
     children: [jsxRuntime.jsx("div", {
       class: "bio-properties-panel-feel-editor__open-popup-placeholder",
       children: "Opened in editor"
     }), jsxRuntime.jsx("div", {
       name: props.name,
-      class: classnames__default["default"]('bio-properties-panel-input', localValue ? 'edited' : null),
+      class: classnames('bio-properties-panel-input', localValue ? 'edited' : null),
       ref: inputRef,
       onClick: handleClick
     }), jsxRuntime.jsx("button", {
@@ -1062,7 +1074,7 @@ const CodeEditor = compat.forwardRef((props, ref) => {
       title: "Open pop-up editor",
       class: "bio-properties-panel-open-feel-popup",
       onClick: () => onPopupOpen(),
-      children: jsxRuntime.jsx(ExternalLinkIcon, {})
+      children: jsxRuntime.jsx(PopupIcon, {})
     })]
   });
 });
@@ -1106,7 +1118,7 @@ function FeelIcon(props) {
   };
   return jsxRuntime.jsx("button", {
     type: "button",
-    class: classnames__default["default"]('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
+    class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
     onClick: handleClick,
     disabled: feel === 'required' || disabled,
     title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
@@ -1283,7 +1295,7 @@ function PopupComponent(props, globalRef) {
     ref: popupRef,
     onKeyDown: handleKeydown,
     role: "dialog",
-    class: classnames__default["default"]('bio-properties-panel-popup', className),
+    class: classnames('bio-properties-panel-popup', className),
     style: style,
     children: props.children
   }), containerNode || document.body);
@@ -1352,7 +1364,7 @@ function Title(props) {
     emit('dragend');
   };
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-popup__header', draggable && 'draggable', className),
+    class: classnames('bio-properties-panel-popup__header', draggable && 'draggable', className),
     ref: titleRef,
     draggable: draggable,
     onDragStart: onMoveStart,
@@ -1379,7 +1391,7 @@ function Body(props) {
     ...rest
   } = props;
   return jsxRuntime.jsx("div", {
-    class: classnames__default["default"]('bio-properties-panel-popup__body', className),
+    class: classnames('bio-properties-panel-popup__body', className),
     ...rest,
     children: children
   });
@@ -1391,7 +1403,7 @@ function Footer(props) {
     ...rest
   } = props;
   return jsxRuntime.jsx("div", {
-    class: classnames__default["default"]('bio-properties-panel-popup__footer', className),
+    class: classnames('bio-properties-panel-popup__footer', className),
     ...rest,
     children: props.children
   });
@@ -1688,7 +1700,7 @@ function ToggleSwitch(props) {
     setLocalValue(value);
   }, [value]);
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-toggle-switch', {
+    class: classnames('bio-properties-panel-toggle-switch', {
       inline
     }),
     children: [jsxRuntime.jsx("label", {
@@ -1803,18 +1815,14 @@ function NumberField(props) {
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const handleInputCallback = hooks.useMemo(() => {
-    return debounce(event => {
-      const {
-        validity,
-        value
-      } = event.target;
-      if (validity.valid) {
-        onInput(value ? parseFloat(value) : undefined);
+    return debounce(target => {
+      if (target.validity.valid) {
+        onInput(target.value ? parseFloat(target.value) : undefined);
       }
     });
   }, [onInput, debounce]);
   const handleInput = e => {
-    handleInputCallback(e);
+    handleInputCallback(e.target);
     setLocalValue(e.target.value);
   };
   hooks.useEffect(() => {
@@ -1902,7 +1910,7 @@ function NumberFieldEntry(props) {
   };
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.jsx(NumberField, {
       debounce: debounce,
@@ -2082,7 +2090,7 @@ function FeelTextfield(props) {
     };
   }, [containerRef, feelActive, handleFeelToggle, setFocus]);
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-feel-entry', {
+    class: classnames('bio-properties-panel-feel-entry', {
       'feel-active': feelActive
     }),
     children: [jsxRuntime.jsxs("label", {
@@ -2410,7 +2418,7 @@ function FeelEntry(props) {
   const temporaryError = useError(id);
   const error = temporaryError || localError || validationError;
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"](props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [preact.createElement(FeelTextfield, {
       ...props,
@@ -2912,7 +2920,7 @@ function DropdownButton(props) {
   }
   useGlobalClick([dropdownRef.current], () => close());
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-dropdown-button', {
+    class: classnames('bio-properties-panel-dropdown-button', {
       open
     }, className),
     onClick: onDropdownToggle,
@@ -2986,7 +2994,7 @@ function HeaderButton(props) {
     type: "button",
     ...otherProps,
     onClick: onClick,
-    class: classnames__default["default"]('bio-properties-panel-group-header-button', classname),
+    class: classnames('bio-properties-panel-group-header-button', classname),
     children: children
   });
 }
@@ -3019,13 +3027,13 @@ function CollapsibleEntry(props) {
   const placeholderLabel = '<empty>';
   return jsxRuntime.jsxs("div", {
     "data-entry-id": id,
-    class: classnames__default["default"]('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
+    class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
     children: [jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-collapsible-entry-header",
       onClick: toggleOpen,
       children: [jsxRuntime.jsx("div", {
         title: label || placeholderLabel,
-        class: classnames__default["default"]('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
+        class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
         children: label || placeholderLabel
       }), jsxRuntime.jsx("button", {
         type: "button",
@@ -3042,7 +3050,7 @@ function CollapsibleEntry(props) {
         children: jsxRuntime.jsx(DeleteIcon, {})
       }) : null]
     }), jsxRuntime.jsx("div", {
-      class: classnames__default["default"]('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
+      class: classnames('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
       children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
         children: entries.map(entry => {
@@ -3223,7 +3231,7 @@ function ListGroup(props) {
     "data-group-id": 'group-' + id,
     ref: groupRef,
     children: [jsxRuntime.jsxs("div", {
-      class: classnames__default["default"]('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
+      class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: hasItems ? toggleOpen : noop$1,
       children: [jsxRuntime.jsx("div", {
         title: props.tooltip ? null : label,
@@ -3249,7 +3257,7 @@ function ListGroup(props) {
           }) : null]
         }) : null, hasItems ? jsxRuntime.jsx("div", {
           title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
-          class: classnames__default["default"]('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
+          class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
           children: items.length
         }) : null, hasItems ? jsxRuntime.jsx("button", {
           type: "button",
@@ -3261,7 +3269,7 @@ function ListGroup(props) {
         }) : null]
       })]
     }), jsxRuntime.jsx("div", {
-      class: classnames__default["default"]('bio-properties-panel-list', open && hasItems ? 'open' : ''),
+      class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
       children: jsxRuntime.jsx(LayoutContext.Provider, {
         value: propertiesPanelContext,
         children: ordering.map((o, index) => {
@@ -3476,7 +3484,7 @@ function TemplatingEntry(props) {
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.jsx(Templating, {
       debounce: debounce,
@@ -3624,13 +3632,13 @@ function List(props) {
   }
   return jsxRuntime.jsxs("div", {
     "data-entry-id": id,
-    class: classnames__default["default"]('bio-properties-panel-entry', 'bio-properties-panel-list-entry', hasItems ? '' : 'empty', open ? 'open' : ''),
+    class: classnames('bio-properties-panel-entry', 'bio-properties-panel-list-entry', hasItems ? '' : 'empty', open ? 'open' : ''),
     children: [jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-list-entry-header",
       onClick: toggleOpen,
       children: [jsxRuntime.jsx("div", {
         title: label,
-        class: classnames__default["default"]('bio-properties-panel-list-entry-header-title', open && 'open'),
+        class: classnames('bio-properties-panel-list-entry-header-title', open && 'open'),
         children: label
       }), jsxRuntime.jsxs("div", {
         class: "bio-properties-panel-list-entry-header-buttons",
@@ -3703,7 +3711,7 @@ function ItemsList(props) {
     }
   }, [newItem, autoFocusEntry, id]);
   return jsxRuntime.jsx("ol", {
-    class: classnames__default["default"]('bio-properties-panel-list-entry-items', open ? 'open' : ''),
+    class: classnames('bio-properties-panel-list-entry-items', open ? 'open' : ''),
     children: items.map((item, index) => {
       const key = getKey(item);
       return jsxRuntime.jsxs("li", {
@@ -3890,7 +3898,7 @@ function SelectEntry(props) {
   };
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.jsx(Select, {
       id: id,
@@ -3937,12 +3945,10 @@ function Simple(props) {
   const value = getValue(element);
   const [localValue, setLocalValue] = hooks.useState(value);
   const handleInputCallback = hooks.useMemo(() => {
-    return debounce(({
-      target
-    }) => setValue(target.value.length ? target.value : undefined));
+    return debounce(target => setValue(target.value.length ? target.value : undefined));
   }, [setValue, debounce]);
   const handleInput = e => {
-    handleInputCallback(e);
+    handleInputCallback(e.target);
     setLocalValue(e.target.value);
   };
   hooks.useEffect(() => {
@@ -4004,12 +4010,10 @@ function TextArea(props) {
   const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
   const handleInputCallback = hooks.useMemo(() => {
-    return debounce(({
-      target
-    }) => onInput(target.value.length ? target.value : undefined));
+    return debounce(target => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
   const handleInput = e => {
-    handleInputCallback(e);
+    handleInputCallback(e.target);
     autoResize && resizeToContents(e.target);
     setLocalValue(e.target.value);
   };
@@ -4038,7 +4042,7 @@ function TextArea(props) {
       id: prefixId$1(id),
       name: id,
       spellCheck: "false",
-      class: classnames__default["default"]('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
+      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -4103,7 +4107,7 @@ function TextAreaEntry(props) {
   };
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.jsx(TextArea, {
       id: id,
@@ -4154,12 +4158,10 @@ function Textfield(props) {
   const [localValue, setLocalValue] = hooks.useState(value || '');
   const ref = useShowEntryEvent(id);
   const handleInputCallback = hooks.useMemo(() => {
-    return debounce(({
-      target
-    }) => onInput(target.value.length ? target.value : undefined));
+    return debounce(target => onInput(target.value.length ? target.value : undefined));
   }, [onInput, debounce]);
   const handleInput = e => {
-    handleInputCallback(e);
+    handleInputCallback(e.target);
     setLocalValue(e.target.value);
   };
   hooks.useEffect(() => {
@@ -4245,7 +4247,7 @@ function TextfieldEntry(props) {
   };
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
-    class: classnames__default["default"]('bio-properties-panel-entry', error ? 'has-error' : ''),
+    class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
     children: [jsxRuntime.jsx(Textfield, {
       debounce: debounce,
@@ -4368,6 +4370,7 @@ exports.ListItem = ListItem;
 exports.NumberFieldEntry = NumberFieldEntry;
 exports.Placeholder = Placeholder;
 exports.Popup = Popup;
+exports.PopupIcon = PopupIcon;
 exports.PropertiesPanel = PropertiesPanel;
 exports.PropertiesPanelContext = LayoutContext;
 exports.SelectEntry = SelectEntry;