@bpmn-io/properties-panel 0.13.2 → 0.14.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useRef, useMemo, useState, useCallback } from '../preact/hooks';
-import { isFunction, get, assign, set, sortBy, find, isNumber, debounce } from 'min-dash';
+import { isFunction, isArray, get, assign, set, sortBy, find, isNumber, debounce } from 'min-dash';
 import classnames from 'classnames';
 import '../preact/compat';
 import { jsx, jsxs } from '../preact/jsx-runtime';
@@ -166,19 +166,19 @@ const DescriptionContext = createContext({
   getDescriptionForId: () => {}
 });
 
-/**
- * @typedef {Function} <propertiesPanel.showEntry> callback
- *
- * @example
- *
- * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
- *   // ...
- * });
- *
- * @param {Object} context
- * @param {boolean} [context.focus]
- *
- * @returns void
+/**
+ * @typedef {Function} <propertiesPanel.showEntry> callback
+ *
+ * @example
+ *
+ * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+ *   // ...
+ * });
+ *
+ * @param {Object} context
+ * @param {boolean} [context.focus]
+ *
+ * @returns void
  */
 const EventContext = createContext({
   eventBus: null
@@ -191,20 +191,20 @@ const LayoutContext = createContext({
   setLayoutForKey: () => {}
 });
 
-/**
- * Accesses the global DescriptionContext and returns a description for a given id and element.
- *
- * @example
- * ```jsx
- * function TextField(props) {
- *   const description = useDescriptionContext('input1', element);
- * }
- * ```
- *
- * @param {string} id
- * @param {djs.model.Base} element
- *
- * @returns {string}
+/**
+ * Accesses the global DescriptionContext and returns a description for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const description = useDescriptionContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {object} element
+ *
+ * @returns {string}
  */
 
 function useDescriptionContext(id, element) {
@@ -215,14 +215,14 @@ function useDescriptionContext(id, element) {
 }
 
 const DEFAULT_PRIORITY = 1000;
-/**
- * Subscribe to an event.
- *
- * @param {string} event
- * @param {Function} callback
- * @param {number} [priority]
- *
- * @returns {import('preact').Ref}
+/**
+ * Subscribe to an event.
+ *
+ * @param {string} event
+ * @param {Function} callback
+ * @param {number} [priority]
+ *
+ * @returns {import('preact').Ref}
  */
 
 function useEvent(event, callback, priority = DEFAULT_PRIORITY) {
@@ -240,11 +240,11 @@ function useEvent(event, callback, priority = DEFAULT_PRIORITY) {
 }
 
 const HIGH_PRIORITY = 10000;
-/**
- * Buffer events and re-fire during passive effect phase.
- *
- * @param {string[]} bufferedEvents
- * @param {Object} [eventBus]
+/**
+ * Buffer events and re-fire during passive effect phase.
+ *
+ * @param {string[]} bufferedEvents
+ * @param {Object} [eventBus]
  */
 
 function useEventBuffer(bufferedEvents, eventBus) {
@@ -293,24 +293,24 @@ function useEventBuffer(bufferedEvents, eventBus) {
 }
 
 const KEY_LENGTH = 6;
-/**
- * Create a persistent key factory for plain objects without id.
- *
- * @example
- * ```jsx
- * function List({ objects }) {
- *   const getKey = useKeyFactory();
- *   return (<ol>{
- *     objects.map(obj => {
- *       const key = getKey(obj);
- *       return <li key={key}>obj.name</li>
- *     })
- *   }</ol>);
- * }
- * ```
- *
- * @param {any[]} dependencies
- * @returns {(element: object) => string}
+/**
+ * Create a persistent key factory for plain objects without id.
+ *
+ * @example
+ * ```jsx
+ * function List({ objects }) {
+ *   const getKey = useKeyFactory();
+ *   return (<ol>{
+ *     objects.map(obj => {
+ *       const key = getKey(obj);
+ *       return <li key={key}>obj.name</li>
+ *     })
+ *   }</ol>);
+ * }
+ * ```
+ *
+ * @param {any[]} dependencies
+ * @returns {(element: object) => string}
  */
 
 function useKeyFactory(dependencies = []) {
@@ -330,20 +330,20 @@ function useKeyFactory(dependencies = []) {
   return getKey;
 }
 
-/**
- * Creates a state that persists in the global LayoutContext.
- *
- * @example
- * ```jsx
- * function Group(props) {
- *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
- * }
- * ```
- *
- * @param {(string|number)[]} path
- * @param {any} [defaultValue]
- *
- * @returns {[ any, Function ]}
+/**
+ * Creates a state that persists in the global LayoutContext.
+ *
+ * @example
+ * ```jsx
+ * function Group(props) {
+ *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+ * }
+ * ```
+ *
+ * @param {(string|number)[]} path
+ * @param {any} [defaultValue]
+ *
+ * @returns {[ any, Function ]}
  */
 
 function useLayoutState(path, defaultValue) {
@@ -364,11 +364,11 @@ function useLayoutState(path, defaultValue) {
   return [value, setState];
 }
 
-/**
- * @pinussilvestrus: we need to introduce our own hook to persist the previous
- * state on updates.
- *
- * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+/**
+ * @pinussilvestrus: we need to introduce our own hook to persist the previous
+ * state on updates.
+ *
+ * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
  */
 
 function usePrevious(value) {
@@ -379,12 +379,12 @@ function usePrevious(value) {
   return ref.current;
 }
 
-/**
- * Subscribe to `propertiesPanel.showEntry`.
- *
- * @param {Function} show
- *
- * @returns {import('preact').Ref}
+/**
+ * Subscribe to `propertiesPanel.showEntry`.
+ *
+ * @param {Function} show
+ *
+ * @returns {import('preact').Ref}
  */
 
 function useShowEntryEvent(show) {
@@ -421,14 +421,14 @@ function useShowEntryEvent(show) {
   return ref;
 }
 
-/**
- * Subscribe to `propertiesPanel.showError`. On `propertiesPanel.showError` set
- * temporary error. Fire `propertiesPanel.showEntry` for temporary error to be
- * visible. Unset error on `propertiesPanel.updated`.
- *
- * @param {Function} show
- *
- * @returns {import('preact').Ref}
+/**
+ * Subscribe to `propertiesPanel.showError`. On `propertiesPanel.showError` set
+ * temporary error. Fire `propertiesPanel.showEntry` for temporary error to be
+ * visible. Unset error on `propertiesPanel.updated`.
+ *
+ * @param {Function} show
+ *
+ * @returns {import('preact').Ref}
  */
 
 function useShowErrorEvent(show) {
@@ -453,6 +453,57 @@ function useShowErrorEvent(show) {
   return temporaryError;
 }
 
+/**
+ * @callback setSticky
+ * @param {boolean} value
+ */
+
+/**
+ * Use IntersectionObserver to identify when DOM element is in sticky mode.
+ * If sticky is observered setSticky(true) will be called.
+ * If sticky mode is left, setSticky(false) will be called.
+ *
+ *
+ * @param {Object} ref
+ * @param {string} scrollContainerSelector
+ * @param {setSticky} setSticky
+ */
+
+function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
+  useEffect(() => {
+    // return early if IntersectionObserver is not available
+    if (!IntersectionObserver) {
+      return;
+    }
+
+    let observer;
+
+    if (ref.current) {
+      const scrollContainer = query(scrollContainerSelector);
+      observer = new IntersectionObserver(entries => {
+        if (entries[0].intersectionRatio < 1) {
+          setSticky(true);
+        } else if (entries[0].intersectionRatio === 1) {
+          setSticky(false);
+        }
+      }, {
+        root: scrollContainer,
+        rootMargin: '0px 0px 999999% 0px',
+        // Use bottom margin to avoid stickyness when scrolling out to bottom
+        threshold: [1]
+      });
+      observer.observe(ref.current);
+    } // Unobserve if unmounted
+
+
+    return () => {
+      if (ref.current && observer) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [ref]);
+}
+
 function Group(props) {
   const {
     element,
@@ -461,12 +512,14 @@ function Group(props) {
     label,
     shouldOpen = false
   } = props;
+  const groupRef = useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
 
   const toggleOpen = () => setOpen(!open);
 
-  const [edited, setEdited] = useState(false); // set edited state depending on all entries
+  const [edited, setEdited] = useState(false);
+  const [sticky, setSticky] = useState(false); // set edited state depending on all entries
 
   useEffect(() => {
     const hasOneEditedEntry = entries.find(entry => {
@@ -484,15 +537,18 @@ function Group(props) {
       return isEdited(inputNode);
     });
     setEdited(hasOneEditedEntry);
-  }, [entries]);
+  }, [entries]); // set css class when group is sticky to top
+
+  useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
   const propertiesPanelContext = { ...useContext(LayoutContext),
     onShow
   };
   return jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
+    ref: groupRef,
     children: [jsxs("div", {
-      class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : ''),
+      class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: toggleOpen,
       children: [jsx("div", {
         title: label,
@@ -534,77 +590,111 @@ function DataMarker() {
   });
 }
 
+/**
+ * @typedef { {
+ *  text: (element: object) => string,
+ *  icon?: (element: Object) => import('preact').Component
+ * } } PlaceholderDefinition
+ *
+ * @param { PlaceholderDefinition } props
+ */
+function Placeholder(props) {
+  const {
+    text,
+    icon: Icon
+  } = props;
+  return jsx("div", {
+    class: "bio-properties-panel open",
+    children: jsxs("section", {
+      class: "bio-properties-panel-placeholder",
+      children: [Icon && jsx(Icon, {
+        class: "bio-properties-panel-placeholder-icon"
+      }), jsx("p", {
+        class: "bio-properties-panel-placeholder-text",
+        children: text
+      })]
+    })
+  });
+}
+
 const DEFAULT_LAYOUT = {
   open: true
 };
 const DEFAULT_DESCRIPTION = {};
 const bufferedEvents = ['propertiesPanel.showEntry', 'propertiesPanel.showError'];
-/**
- * @typedef { {
- *    component: import('preact').Component,
- *    id: String,
- *    isEdited?: Function
- * } } EntryDefinition
- *
- * @typedef { {
- *    autoFocusEntry: String,
- *    autoOpen?: Boolean,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    remove: (event: MouseEvent) => void
- * } } ListItemDefinition
- *
- * @typedef { {
- *    add: (event: MouseEvent) => void,
- *    component: import('preact').Component,
- *    element: Object,
- *    id: String,
- *    items: Array<ListItemDefinition>,
- *    label: String,
- *    shouldSort?: Boolean,
- *    shouldOpen?: Boolean
- * } } ListGroupDefinition
- *
- * @typedef { {
- *    component?: import('preact').Component,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    shouldOpen?: Boolean
- * } } GroupDefinition
- *
- *  @typedef { {
- *    [id: String]: GetDescriptionFunction
- * } } DescriptionConfig
- *
- * @callback { {
- * @param {string} id
- * @param {djs.model.base} element
- * @returns {string}
- * } } GetDescriptionFunction
- *
+/**
+ * @typedef { {
+ *    component: import('preact').Component,
+ *    id: String,
+ *    isEdited?: Function
+ * } } EntryDefinition
+ *
+ * @typedef { {
+ *    autoFocusEntry: String,
+ *    autoOpen?: Boolean,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    remove: (event: MouseEvent) => void
+ * } } ListItemDefinition
+ *
+ * @typedef { {
+ *    add: (event: MouseEvent) => void,
+ *    component: import('preact').Component,
+ *    element: Object,
+ *    id: String,
+ *    items: Array<ListItemDefinition>,
+ *    label: String,
+ *    shouldSort?: Boolean,
+ *    shouldOpen?: Boolean
+ * } } ListGroupDefinition
+ *
+ * @typedef { {
+ *    component?: import('preact').Component,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    shouldOpen?: Boolean
+ * } } GroupDefinition
+ *
+ *  @typedef { {
+ *    [id: String]: GetDescriptionFunction
+ * } } DescriptionConfig
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
+ * @typedef { {
+ *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+ *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+ * } } PlaceholderProvider
+ *
  */
 
-/**
- * A basic properties panel component. Describes *how* content will be rendered, accepts
- * data from implementor to describe *what* will be rendered.
- *
- * @param {Object} props
- * @param {Object} props.element
- * @param {import('./components/Header').HeaderProvider} props.headerProvider
- * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
- * @param {Object} [props.layoutConfig]
- * @param {Function} [props.layoutChanged]
- * @param {DescriptionConfig} [props.descriptionConfig]
- * @param {Function} [props.descriptionLoaded]
- * @param {Object} [props.eventBus]
+/**
+ * A basic properties panel component. Describes *how* content will be rendered, accepts
+ * data from implementor to describe *what* will be rendered.
+ *
+ * @param {Object} props
+ * @param {Object|Array} props.element
+ * @param {import('./components/Header').HeaderProvider} props.headerProvider
+ * @param {PlaceholderProvider} [props.placeholderProvider]
+ * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+ * @param {Object} [props.layoutConfig]
+ * @param {Function} [props.layoutChanged]
+ * @param {DescriptionConfig} [props.descriptionConfig]
+ * @param {Function} [props.descriptionLoaded]
+ * @param {Object} [props.eventBus]
  */
 
 function PropertiesPanel(props) {
   const {
     element,
     headerProvider,
+    placeholderProvider,
     groups,
     layoutConfig = {},
     layoutChanged,
@@ -657,12 +747,16 @@ function PropertiesPanel(props) {
   };
   const propertiesPanelContext = {
     element
-  };
+  }; // empty state
 
-  if (!element) {
-    return jsx("div", {
-      class: "bio-properties-panel-placeholder",
-      children: "Select an element to edit its properties."
+  if (placeholderProvider && !element) {
+    return jsx(Placeholder, { ...placeholderProvider.getEmpty()
+    });
+  } // multiple state
+
+
+  if (placeholderProvider && isArray(element)) {
+    return jsx(Placeholder, { ...placeholderProvider.getMultiple()
     });
   }
 
@@ -779,17 +873,17 @@ function MenuItem({
     children: item.entry
   });
 }
-/**
- *
- * @param {Array<null | Element>} ignoredElements
- * @param {Function} callback
+/**
+ *
+ * @param {Array<null | Element>} ignoredElements
+ * @param {Function} callback
  */
 
 
 function useGlobalClick(ignoredElements, callback) {
   useEffect(() => {
-    /**
-     * @param {MouseEvent} event
+    /**
+     * @param {MouseEvent} event
      */
     function listener(event) {
       if (ignoredElements.some(element => element && element.contains(event.target))) {
@@ -919,8 +1013,8 @@ function ListItem(props) {
 }
 
 const noop$3 = () => {};
-/**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
 
 
@@ -934,7 +1028,9 @@ function ListGroup(props) {
     shouldOpen = true,
     shouldSort = true
   } = props;
+  const groupRef = useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+  const [sticky, setSticky] = useState(false);
   const onShow = useCallback(() => setOpen(true), [setOpen]);
   const [ordering, setOrdering] = useState([]);
   const [newItemAdded, setNewItemAdded] = useState(false);
@@ -1005,7 +1101,9 @@ function ListGroup(props) {
       });
       setOrdering(keep);
     }
-  }, [items, shouldHandleEffects]);
+  }, [items, shouldHandleEffects]); // set css class when group is sticky to top
+
+  useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
 
   const toggleOpen = () => setOpen(!open);
 
@@ -1016,8 +1114,9 @@ function ListGroup(props) {
   return jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
+    ref: groupRef,
     children: [jsxs("div", {
-      class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : ''),
+      class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
       onClick: hasItems ? toggleOpen : noop$3,
       children: [jsx("div", {
         title: label,
@@ -1073,8 +1172,8 @@ function ListGroup(props) {
   });
 } // helpers ////////////////////
 
-/**
- * Sorts given items alphanumeric by label
+/**
+ * Sorts given items alphanumeric by label
  */
 
 function sortItems(items) {
@@ -1143,15 +1242,15 @@ function Checkbox(props) {
     })]
   });
 }
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {boolean} [props.disabled]
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {boolean} [props.disabled]
  */
 
 
@@ -1224,8 +1323,8 @@ function List(props) {
       setOpen(false);
     }
   }, [open, hasItems]);
-  /**
-   * @param {MouseEvent} event
+  /**
+   * @param {MouseEvent} event
    */
 
   function addItem(event) {
@@ -1335,14 +1434,14 @@ function ItemsList(props) {
     })
   });
 }
-/**
- * Place new items in the beginning of the list and sort the rest with provided function.
- *
- * @template Item
- * @param {Item[]} currentItems
- * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items
- * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook
- * @returns {Item[]}
+/**
+ * Place new items in the beginning of the list and sort the rest with provided function.
+ *
+ * @template Item
+ * @param {Item[]} currentItems
+ * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items
+ * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook
+ * @returns {Item[]}
  */
 
 
@@ -1428,19 +1527,19 @@ function NumberField(props) {
     })]
   });
 }
-/**
- * @param {Object} props
- * @param {Boolean} props.debounce
- * @param {String} props.description
- * @param {Boolean} props.disabled
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {String} props.label
- * @param {String} props.max
- * @param {String} props.min
- * @param {Function} props.setValue
- * @param {String} props.step
+/**
+ * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
+ * @param {Object} props.element
+ * @param {Function} props.getValue
+ * @param {String} props.id
+ * @param {String} props.label
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {Function} props.setValue
+ * @param {String} props.step
  */
 
 
@@ -1488,21 +1587,21 @@ function prefixId$5(id) {
 }
 
 const noop$1 = () => {};
-/**
- * @typedef { { value: string, label: string, disabled: boolean } } Option
+/**
+ * @typedef { { value: string, label: string, disabled: boolean } } Option
  */
 
-/**
- * Provides basic select input.
- *
- * @param {object} props
- * @param {string} props.id
- * @param {string[]} props.path
- * @param {string} props.label
- * @param {Function} props.onChange
- * @param {Array<Option>} [props.options]
- * @param {string} props.value
- * @param {boolean} [props.disabled]
+/**
+ * Provides basic select input.
+ *
+ * @param {object} props
+ * @param {string} props.id
+ * @param {string[]} props.path
+ * @param {string} props.label
+ * @param {Function} props.onChange
+ * @param {Array<Option>} [props.options]
+ * @param {string} props.value
+ * @param {boolean} [props.disabled]
  */
 
 
@@ -1548,16 +1647,16 @@ function Select(props) {
     })]
   });
 }
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} [props.description]
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.getOptions
- * @param {boolean} [props.disabled]
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} [props.description]
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.getOptions
+ * @param {boolean} [props.disabled]
  */
 
 
@@ -1702,18 +1801,18 @@ function TextArea(props) {
     })]
   });
 }
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} props.description
- * @param {boolean} props.debounce
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {number} props.rows
- * @param {boolean} props.monospace
- * @param {boolean} [props.disabled]
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} props.description
+ * @param {boolean} props.debounce
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {number} props.rows
+ * @param {boolean} props.monospace
+ * @param {boolean} [props.disabled]
  */
 
 
@@ -1804,17 +1903,17 @@ function Textfield(props) {
     })]
   });
 }
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.validate
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.validate
  */
 
 
@@ -1935,15 +2034,15 @@ function ToggleSwitch(props) {
     })]
   });
 }
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.label
- * @param {String} props.switcherLabel
- * @param {Function} props.getValue
- * @param {Function} props.setValue
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {String} props.switcherLabel
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
  */
 
 
@@ -1999,5 +2098,5 @@ var index = {
   debounceInput: ['factory', debounceInput]
 };
 
-export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, EventContext, ExternalLinkIcon, FeelOptionalIcon, FeelRequiredIcon, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$6 as isCheckboxEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useEvent, useEventBuffer, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useShowErrorEvent };
+export { ArrowIcon, CheckboxEntry, CollapsibleEntry, CreateIcon, index as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DropdownButton, EventContext, ExternalLinkIcon, FeelOptionalIcon, FeelRequiredIcon, Group, Header, HeaderButton, LayoutContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, Placeholder, PropertiesPanel, LayoutContext as PropertiesPanelContext, SelectEntry, Simple as SimpleEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, isEdited$6 as isCheckboxEntryEdited, isEdited$5 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$3 as isSimpleEntryEdited, isEdited$2 as isTextAreaEntryEdited, isEdited$1 as isTextFieldEntryEdited, isEdited as isToggleSwitchEntryEdited, useDescriptionContext, useEvent, useEventBuffer, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useShowErrorEvent, useStickyIntersectionObserver };
 //# sourceMappingURL=index.esm.js.map