@bpmn-io/form-js-viewer 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/index.cjs

@@ -44,26 +44,26 @@ const getFlavouredFeelVariableNames = (feelString, feelFlavour, options = {}) =>
   }(simpleExpressionTree);
 };
 
-/**
- * Get the variable name at the specified index in a given path expression.
- *
- * @param {Object} root - The root node of the path expression tree.
- * @param {number} index - The index of the variable name to retrieve.
- * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
+/**
+ * Get the variable name at the specified index in a given path expression.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @param {number} index - The index of the variable name to retrieve.
+ * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
  */
 const _getVariableNameAtPathIndex = (root, index) => {
   const accessors = _deconstructPathExpression(root);
   return accessors[index] || null;
 };
 
-/**
- * Extracts the variables which are required of the external context for a given path expression.
- * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
- *
- * @param {Object} node - The root node of the path expression tree.
- * @param {number} initialDepth - The depth at which the root node is located in the outer context.
- * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
- * @returns {Set} - A set containing the extracted variable names.
+/**
+ * Extracts the variables which are required of the external context for a given path expression.
+ * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
+ *
+ * @param {Object} node - The root node of the path expression tree.
+ * @param {number} initialDepth - The depth at which the root node is located in the outer context.
+ * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
+ * @returns {Set} - A set containing the extracted variable names.
  */
 const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) => {
   // depth info represents the previous (initialised as null) and current depth of the current accessor in the path expression
@@ -109,11 +109,11 @@ const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) =
   return new Set(extractedVariables);
 };
 
-/**
- * Deconstructs a path expression tree into an array of components.
- *
- * @param {Object} root - The root node of the path expression tree.
- * @returns {Array<string>} An array of components in the path expression, in the correct order.
+/**
+ * Deconstructs a path expression tree into an array of components.
+ *
+ * @param {Object} root - The root node of the path expression tree.
+ * @returns {Array<string>} An array of components in the path expression, in the correct order.
  */
 const _deconstructPathExpression = root => {
   let node = root;
@@ -132,13 +132,13 @@ const _deconstructPathExpression = root => {
   return parts.reverse();
 };
 
-/**
- * Builds a simplified feel structure tree from the given parse tree and feel string.
- * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
- *
- * @param {Object} parseTree - The parse tree generated by a parser.
- * @param {string} feelString - The feel string used for parsing.
- * @returns {Object} The simplified feel structure tree.
+/**
+ * Builds a simplified feel structure tree from the given parse tree and feel string.
+ * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
+ *
+ * @param {Object} parseTree - The parse tree generated by a parser.
+ * @param {string} feelString - The feel string used for parsing.
+ * @returns {Object} The simplified feel structure tree.
  */
 const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
   const stack = [{
@@ -169,25 +169,25 @@ class FeelExpressionLanguage {
     this._eventBus = eventBus;
   }
 
-  /**
-   * Determines if the given value is a FEEL expression.
-   *
-   * @param {any} value
-   * @returns {boolean}
-   *
+  /**
+   * Determines if the given value is a FEEL expression.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
    */
   isExpression(value) {
     return minDash.isString(value) && value.startsWith('=');
   }
 
-  /**
-   * Retrieve variable names from a given FEEL expression.
-   *
-   * @param {string} expression
-   * @param {object} [options]
-   * @param {string} [options.type]
-   *
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from a given FEEL expression.
+   *
+   * @param {string} expression
+   * @param {object} [options]
+   * @param {string} [options.type]
+   *
+   * @returns {string[]}
    */
   getVariableNames(expression, options = {}) {
     const {
@@ -202,13 +202,13 @@ class FeelExpressionLanguage {
     return getFlavouredFeelVariableNames(expression, type);
   }
 
-  /**
-   * Evaluate an expression.
-   *
-   * @param {string} expression
-   * @param {import('../../types').Data} [data]
-   *
-   * @returns {any}
+  /**
+   * Evaluate an expression.
+   *
+   * @param {string} expression
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {any}
    */
   evaluate(expression, data = {}) {
     if (!expression) {
@@ -233,23 +233,23 @@ FeelExpressionLanguage.$inject = ['eventBus'];
 class FeelersTemplating {
   constructor() {}
 
-  /**
-   * Determines if the given value is a feelers template.
-   *
-   * @param {any} value
-   * @returns {boolean}
-   *
+  /**
+   * Determines if the given value is a feelers template.
+   *
+   * @param {any} value
+   * @returns {boolean}
+   *
    */
   isTemplate(value) {
     return minDash.isString(value) && (value.startsWith('=') || /{{.*?}}/.test(value));
   }
 
-  /**
-   * Retrieve variable names from a given feelers template.
-   *
-   * @param {string} template
-   *
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from a given feelers template.
+   *
+   * @param {string} template
+   *
+   * @returns {string[]}
    */
   getVariableNames(template) {
     if (!this.isTemplate(template)) {
@@ -275,17 +275,17 @@ class FeelersTemplating {
     }, []);
   }
 
-  /**
-   * Evaluate a template.
-   *
-   * @param {string} template
-   * @param {Object<string, any>} context
-   * @param {Object} options
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
-   * @returns
+  /**
+   * Evaluate a template.
+   *
+   * @param {string} template
+   * @param {Object<string, any>} context
+   * @param {Object} options
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
+   * @returns
    */
   evaluate(template, context = {}, options = {}) {
     const {
@@ -300,22 +300,22 @@ class FeelersTemplating {
     });
   }
 
-  /**
-  * @typedef {Object} ExpressionWithDepth
-  * @property {number} depth - The depth of the expression in the syntax tree.
-  * @property {string} expression - The extracted expression
+  /**
+  * @typedef {Object} ExpressionWithDepth
+  * @property {number} depth - The depth of the expression in the syntax tree.
+  * @property {string} expression - The extracted expression
   */
 
-  /**
-  * Extracts all feel expressions in the template along with their depth in the syntax tree.
-  * The depth is incremented for child expressions of loops to account for context drilling.
-  * @name extractExpressionsWithDepth
-  * @param {string} template - A feelers template string.
-  * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
-  *
-  * @example
-  * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
-  * const extractedExpressions = _extractExpressionsWithDepth(template);
+  /**
+  * Extracts all feel expressions in the template along with their depth in the syntax tree.
+  * The depth is incremented for child expressions of loops to account for context drilling.
+   * @name extractExpressionsWithDepth
+  * @param {string} template - A feelers template string.
+  * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
+  *
+  * @example
+  * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
+  * const extractedExpressions = _extractExpressionsWithDepth(template);
   */
   _extractExpressionsWithDepth(template) {
     // build simplified feelers syntax tree
@@ -346,9 +346,9 @@ class FeelersTemplating {
 }
 FeelersTemplating.$inject = [];
 
-/**
- * @typedef {object} Condition
- * @property {string} [hide]
+/**
+ * @typedef {object} Condition
+ * @property {string} [hide]
  */
 
 class ConditionChecker {
@@ -357,11 +357,11 @@ class ConditionChecker {
     this._eventBus = eventBus;
   }
 
-  /**
-   * For given data, remove properties based on condition.
-   *
-   * @param {Object<string, any>} properties
-   * @param {Object<string, any>} data
+  /**
+   * For given data, remove properties based on condition.
+   *
+   * @param {Object<string, any>} properties
+   * @param {Object<string, any>} data
    */
   applyConditions(properties, data = {}) {
     const conditions = this._getConditions();
@@ -380,13 +380,13 @@ class ConditionChecker {
     return newProperties;
   }
 
-  /**
-   * Check if given condition is met. Returns null for invalid/missing conditions.
-   *
-   * @param {string} condition
-   * @param {import('../../types').Data} [data]
-   *
-   * @returns {boolean|null}
+  /**
+   * Check if given condition is met. Returns null for invalid/missing conditions.
+   *
+   * @param {string} condition
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {boolean|null}
    */
   check(condition, data = {}) {
     if (!condition) {
@@ -407,12 +407,12 @@ class ConditionChecker {
     }
   }
 
-  /**
-   * Check if hide condition is met.
-   *
-   * @param {Condition} condition
-   * @param {Object<string, any>} data
-   * @returns {boolean}
+  /**
+   * Check if hide condition is met.
+   *
+   * @param {Condition} condition
+   * @param {Object<string, any>} data
+   * @returns {boolean}
    */
   _checkHideCondition(condition, data) {
     if (!condition.hide) {
@@ -454,12 +454,12 @@ class MarkdownRenderer {
     this._converter = new showdown.Converter();
   }
 
-  /**
-   * Render markdown to HTML.
-   *
-   * @param {string} markdown - The markdown to render
-   *
-   * @returns {string} HTML
+  /**
+   * Render markdown to HTML.
+   *
+   * @param {string} markdown - The markdown to render
+   *
+   * @returns {string} HTML
    */
   render(markdown) {
     return this._converter.makeHtml(markdown);
@@ -1115,23 +1115,23 @@ class FormFieldRegistry {
 }
 FormFieldRegistry.$inject = ['eventBus'];
 
-/**
- * @typedef { { id: String, components: Array<String> } } FormRow
- * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
+/**
+ * @typedef { { id: String, components: Array<String> } } FormRow
+ * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
  */
 
-/**
- * Maintains the Form layout in a given structure, for example
- *
- *  [
- *    {
- *      formFieldId: 'FormField_1',
- *      rows: [
- *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
- *      ]
- *    }
- *  ]
- *
+/**
+ * Maintains the Form layout in a given structure, for example
+ *
+ *  [
+ *    {
+ *      formFieldId: 'FormField_1',
+ *      rows: [
+ *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+ *      ]
+ *    }
+ *  ]
+ *
  */
 class FormLayouter {
   constructor(eventBus) {
@@ -1141,8 +1141,8 @@ class FormLayouter {
     this._eventBus = eventBus;
   }
 
-  /**
-   * @param {FormRow} row
+  /**
+   * @param {FormRow} row
    */
   addRow(formFieldId, row) {
     let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
@@ -1156,18 +1156,18 @@ class FormLayouter {
     rowsPerComponent.rows.push(row);
   }
 
-  /**
-   * @param {String} id
-   * @returns {FormRow}
+  /**
+   * @param {String} id
+   * @returns {FormRow}
    */
   getRow(id) {
     const rows = allRows(this._rows);
     return rows.find(r => r.id === id);
   }
 
-  /**
-   * @param {any} formField
-   * @returns {FormRow}
+  /**
+   * @param {any} formField
+   * @returns {FormRow}
    */
   getRowForField(formField) {
     return allRows(this._rows).find(r => {
@@ -1178,9 +1178,9 @@ class FormLayouter {
     });
   }
 
-  /**
-   * @param {String} formFieldId
-   * @returns { Array<FormRow> }
+  /**
+   * @param {String} formFieldId
+   * @returns { Array<FormRow> }
    */
   getRows(formFieldId) {
     const rowsForField = this._rows.find(r => formFieldId === r.formFieldId);
@@ -1190,15 +1190,15 @@ class FormLayouter {
     return rowsForField.rows;
   }
 
-  /**
-   * @returns {string}
+  /**
+   * @returns {string}
    */
   nextRowId() {
     return this._ids.nextPrefixed('Row_');
   }
 
-  /**
-   * @param {any} formField
+  /**
+   * @param {any} formField
    */
   calculateLayout(formField) {
     const {
@@ -1252,9 +1252,9 @@ function groupByRow(components, ids) {
   });
 }
 
-/**
- * @param {Array<FormRows>} formRows
- * @returns {Array<FormRow>}
+/**
+ * @param {Array<FormRows>} formRows
+ * @returns {Array<FormRow>}
  */
 function allRows(formRows) {
   return minDash.flatten(formRows.map(c => c.rows));
@@ -1331,10 +1331,10 @@ function createInjector(bootstrapModules) {
   return injector;
 }
 
-/**
- * @param {string?} prefix
- *
- * @returns Element
+/**
+ * @param {string?} prefix
+ *
+ * @returns Element
  */
 function createFormContainer(prefix = 'fjs') {
   const container = document.createElement('div');
@@ -1380,22 +1380,22 @@ function generateIdForType(type) {
   return `${type}${generateIndexForType(type)}`;
 }
 
-/**
- * @template T
- * @param {T} data
- * @param {(this: any, key: string, value: any) => any} [replacer]
- * @return {T}
+/**
+ * @template T
+ * @param {T} data
+ * @param {(this: any, key: string, value: any) => any} [replacer]
+ * @return {T}
  */
 function clone(data, replacer) {
   return JSON.parse(JSON.stringify(data, replacer));
 }
 
-/**
- * Parse the schema for input variables a form might make use of
- *
- * @param {any} schema
- *
- * @return {string[]}
+/**
+ * Parse the schema for input variables a form might make use of
+ *
+ * @param {any} schema
+ *
+ * @return {string[]}
  */
 function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null), templating = new FeelersTemplating()) {
   if (!schema.components) {
@@ -1447,11 +1447,11 @@ function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLangu
 }
 
 class Importer {
-  /**
-   * @constructor
-   * @param { import('../core').FormFieldRegistry } formFieldRegistry
-   * @param { import('../render/FormFields').default } formFields
-   * @param { import('../core').FormLayouter } formLayouter
+  /**
+   * @constructor
+   * @param { import('../core').FormFieldRegistry } formFieldRegistry
+   * @param { import('../render/FormFields').default } formFields
+   * @param { import('../core').FormLayouter } formLayouter
    */
   constructor(formFieldRegistry, formFields, formLayouter) {
     this._formFieldRegistry = formFieldRegistry;
@@ -1459,15 +1459,15 @@ class Importer {
     this._formLayouter = formLayouter;
   }
 
-  /**
-   * Import schema adding `id`, `_parent` and `_path`
-   * information to each field and adding it to the
-   * form field registry.
-   *
-   * @param {any} schema
-   * @param {any} [data]
-   *
-   * @return { { warnings: Array<any>, schema: any, data: any } }
+  /**
+   * Import schema adding `id`, `_parent` and `_path`
+   * information to each field and adding it to the
+   * form field registry.
+   *
+   * @param {any} schema
+   * @param {any} [data]
+   *
+   * @return { { warnings: Array<any>, schema: any, data: any } }
    */
   importSchema(schema, data = {}) {
     // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
@@ -1488,11 +1488,11 @@ class Importer {
     }
   }
 
-  /**
-   * @param {any} formField
-   * @param {string} [parentId]
-   *
-   * @return {any} importedField
+  /**
+   * @param {any} formField
+   * @param {string} [parentId]
+   *
+   * @return {any} importedField
    */
   importFormField(formField, parentId) {
     const {
@@ -1543,10 +1543,10 @@ class Importer {
     });
   }
 
-  /**
-   * @param {Object} data
-   *
-   * @return {Object} initializedData
+  /**
+   * @param {Object} data
+   *
+   * @return {Object} initializedData
    */
   initializeFieldValues(data) {
     return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -1684,11 +1684,11 @@ const FormRenderContext = preact.createContext({
 });
 var FormRenderContext$1 = FormRenderContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const FormContext = preact.createContext({
@@ -1704,10 +1704,10 @@ function useService(type, strict) {
   return getService(type, strict);
 }
 
-/**
- * Returns the conditionally filtered data of a form reactively.
- * Memoised to minimize re-renders
- *
+/**
+ * Returns the conditionally filtered data of a form reactively.
+ * Memoised to minimize re-renders
+ *
  */
 function useFilteredFormData() {
   const {
@@ -1724,12 +1724,12 @@ function useFilteredFormData() {
   }, [conditionChecker, data, initialData]);
 }
 
-/**
- * Evaluate if condition is met reactively based on the conditionChecker and form data.
- *
- * @param {string | undefined} condition
- *
- * @returns {boolean} true if condition is met or no condition or condition checker exists
+/**
+ * Evaluate if condition is met reactively based on the conditionChecker and form data.
+ *
+ * @param {string | undefined} condition
+ *
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
  */
 function useCondition(condition) {
   const conditionChecker = useService('conditionChecker', false);
@@ -1739,13 +1739,13 @@ function useCondition(condition) {
   }, [conditionChecker, condition, filteredData]);
 }
 
-/**
- * Evaluate a string reactively based on the expressionLanguage and form data.
- * If the string is not an expression, it is returned as is.
- * Memoised to minimize re-renders.
- *
- * @param {string} value
- *
+/**
+ * Evaluate a string reactively based on the expressionLanguage and form data.
+ * If the string is not an expression, it is returned as is.
+ * Memoised to minimize re-renders.
+ *
+ * @param {string} value
+ *
  */
 function useExpressionEvaluation(value) {
   const formData = useFilteredFormData();
@@ -1774,16 +1774,16 @@ function useKeyDownAction(targetKey, action, listenerElement = window) {
   });
 }
 
-/**
- * Retrieve readonly value of a form field, given it can be an
- * expression optionally or configured globally.
- *
- * @typedef { import('../../types').FormProperties } FormProperties
- *
- * @param {any} formField
- * @param {FormProperties} properties
- *
- * @returns {boolean}
+/**
+ * Retrieve readonly value of a form field, given it can be an
+ * expression optionally or configured globally.
+ *
+ * @typedef { import('../../types').FormProperties } FormProperties
+ *
+ * @param {any} formField
+ * @param {FormProperties} properties
+ *
+ * @returns {boolean}
  */
 function useReadonly(formField, properties = {}) {
   const expressionLanguage = useService('expressionLanguage');
@@ -1801,16 +1801,16 @@ function useReadonly(formField, properties = {}) {
   return readonly || false;
 }
 
-/**
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
- * Memoised to minimize re-renders
- *
- * @param {string} value
- * @param {Object} options
- * @param {boolean} [options.debug = false]
- * @param {boolean} [options.strict = false]
- * @param {Function} [options.buildDebugString]
- *
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} options
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
  */
 function useTemplateEvaluation(value, options) {
   const filteredData = useFilteredFormData();
@@ -1823,17 +1823,17 @@ function useTemplateEvaluation(value, options) {
   }, [filteredData, templating, value, options]);
 }
 
-/**
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
- * If the string contains multiple lines, only the first line is returned.
- * Memoised to minimize re-renders
- *
- * @param {string} value
- * @param {Object} [options]
- * @param {boolean} [options.debug = false]
- * @param {boolean} [options.strict = false]
- * @param {Function} [options.buildDebugString]
- *
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * If the string contains multiple lines, only the first line is returned.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} [options]
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
  */
 function useSingleLineTemplateEvaluation(value, options = {}) {
   const evaluatedTemplate = useTemplateEvaluation(value, options);
@@ -2020,8 +2020,8 @@ function _isValueSomething(value) {
   return value || value === 0 || value === false;
 }
 
-/**
- * @enum { String }
+/**
+ * @enum { String }
  */
 const LOAD_STATES = {
   LOADING: 'loading',
@@ -2029,17 +2029,17 @@ const LOAD_STATES = {
   ERROR: 'error'
 };
 
-/**
- * @typedef {Object} ValuesGetter
- * @property {Object[]} values - The values data
- * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+/**
+ * @typedef {Object} ValuesGetter
+ * @property {Object[]} values - The values data
+ * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
  */
 
-/**
- * A hook to load values for single and multiselect components.
- *
- * @param {Object} field - The form field to handle values for
- * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+/**
+ * A hook to load values for single and multiselect components.
+ *
+ * @param {Object} field - The form field to handle values for
+ * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
  */
 function useValuesAsync (field) {
   const {
@@ -2517,8 +2517,8 @@ var CalendarIcon = (({
 
 function InputAdorner(props) {
   const {
-    pre = null,
-    post = null,
+    pre,
+    post,
     rootRef,
     inputRef,
     children,
@@ -2535,14 +2535,14 @@ function InputAdorner(props) {
       'hasErrors': hasErrors
     }),
     ref: rootRef,
-    children: [pre !== null && jsxRuntime.jsxs("span", {
+    children: [pre && jsxRuntime.jsxs("span", {
       class: "fjs-input-adornment border-right border-radius-left",
       onClick: onAdornmentClick,
       children: [" ", minDash.isString(pre) ? jsxRuntime.jsx("span", {
         class: "fjs-input-adornment-text",
         children: pre
       }) : pre, " "]
-    }), children, post !== null && jsxRuntime.jsxs("span", {
+    }), children, post && jsxRuntime.jsxs("span", {
       class: "fjs-input-adornment border-left border-radius-right",
       onClick: onAdornmentClick,
       children: [" ", minDash.isString(post) ? jsxRuntime.jsx("span", {
@@ -2823,9 +2823,16 @@ function Timepicker(props) {
     time,
     setTime
   } = props;
+  const safeTimeInterval = hooks.useMemo(() => {
+    const allowedIntervals = [1, 5, 10, 15, 30, 60];
+    if (allowedIntervals.includes(timeInterval)) {
+      return timeInterval;
+    }
+    return 15;
+  }, [timeInterval]);
   const timeInputRef = hooks.useRef();
   const [dropdownIsOpen, setDropdownIsOpen] = hooks.useState(false);
-  const useDropdown = hooks.useMemo(() => timeInterval !== 1, [timeInterval]);
+  const useDropdown = hooks.useMemo(() => safeTimeInterval !== 1, [safeTimeInterval]);
   const [rawValue, setRawValue] = hooks.useState('');
 
   // populates values from source
@@ -2834,12 +2841,12 @@ function Timepicker(props) {
       setRawValue('');
       return;
     }
-    const intervalAdjustedTime = time - time % timeInterval;
+    const intervalAdjustedTime = time - time % safeTimeInterval;
     setRawValue(formatTime(use24h, intervalAdjustedTime));
     if (intervalAdjustedTime != time) {
       setTime(intervalAdjustedTime);
     }
-  }, [time, setTime, use24h, timeInterval]);
+  }, [time, setTime, use24h, safeTimeInterval]);
   const propagateRawToMinute = hooks.useCallback(newRawValue => {
     const localRawValue = newRawValue || rawValue;
 
@@ -2858,34 +2865,34 @@ function Timepicker(props) {
     }
 
     // Enforce the minutes to match the timeInterval
-    const correctedMinutes = minutes - minutes % timeInterval;
+    const correctedMinutes = minutes - minutes % safeTimeInterval;
 
     // Enforce the raw text to be formatted properly
     setRawValue(formatTime(use24h, correctedMinutes));
     setTime(correctedMinutes);
-  }, [rawValue, timeInterval, use24h, setTime]);
+  }, [rawValue, safeTimeInterval, use24h, setTime]);
   const timeOptions = hooks.useMemo(() => {
     const minutesInDay = 24 * 60;
-    const intervalCount = Math.floor(minutesInDay / timeInterval);
-    return [...Array(intervalCount).keys()].map(intervalIndex => formatTime(use24h, intervalIndex * timeInterval));
-  }, [timeInterval, use24h]);
+    const intervalCount = Math.floor(minutesInDay / safeTimeInterval);
+    return [...Array(intervalCount).keys()].map(intervalIndex => formatTime(use24h, intervalIndex * safeTimeInterval));
+  }, [safeTimeInterval, use24h]);
   const initialFocusIndex = hooks.useMemo(() => {
     // if there are no options, there will not be any focusing
-    if (!timeOptions || !timeInterval) return null;
+    if (!timeOptions || !safeTimeInterval) return null;
 
     // if there is a set minute value, we focus it in the dropdown
-    if (time) return time / timeInterval;
+    if (time) return time / safeTimeInterval;
     const cacheTime = parseInputTime(rawValue);
 
     // if there is a valid value in the input cache, we try and focus close to it
     if (cacheTime) {
-      const flooredCacheTime = cacheTime - cacheTime % timeInterval;
-      return flooredCacheTime / timeInterval;
+      const flooredCacheTime = cacheTime - cacheTime % safeTimeInterval;
+      return flooredCacheTime / safeTimeInterval;
     }
 
     // If there is no set value, simply focus the middle of the dropdown (12:00)
     return Math.floor(timeOptions.length / 2);
-  }, [rawValue, time, timeInterval, timeOptions]);
+  }, [rawValue, time, safeTimeInterval, timeOptions]);
   const onInputKeyDown = e => {
     switch (e.key) {
       case 'ArrowUp':
@@ -3154,10 +3161,10 @@ Datetime.config = {
   }
 };
 
-/**
- * This file must not be changed or exchanged.
- *
- * @see http://bpmn.io/license for more information.
+/**
+ * This file must not be changed or exchanged.
+ *
+ * @see http://bpmn.io/license for more information.
  */
 function Logo() {
   return jsxRuntime.jsxs("svg", {
@@ -3289,11 +3296,11 @@ const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u
 
 const FORM_ELEMENT = document.createElement('form');
 
-/**
- * Sanitize a HTML string and return the cleaned, safe version.
- *
- * @param {string} html
- * @return {string}
+/**
+ * Sanitize a HTML string and return the cleaned, safe version.
+ *
+ * @param {string} html
+ * @return {string}
  */
 
 // see https://github.com/developit/snarkdown/issues/70
@@ -3311,29 +3318,29 @@ function sanitizeHTML(html) {
   }
 }
 
-/**
- * Sanitizes an image source to ensure we only allow for data URI and links
- * that start with http(s).
- *
- * Note: Most browsers anyway do not support script execution in <img> elements.
- *
- * @param {string} src
- * @returns {string}
+/**
+ * Sanitizes an image source to ensure we only allow for data URI and links
+ * that start with http(s).
+ *
+ * Note: Most browsers anyway do not support script execution in <img> elements.
+ *
+ * @param {string} src
+ * @returns {string}
  */
 function sanitizeImageSource(src) {
   const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
   return valid ? src : '';
 }
 
-/**
- * Recursively sanitize a HTML node, potentially
- * removing it, its children or attributes.
- *
- * Inspired by https://github.com/developit/snarkdown/issues/70
- * and https://github.com/cure53/DOMPurify. Simplified
- * for our use-case.
- *
- * @param {Element} node
+/**
+ * Recursively sanitize a HTML node, potentially
+ * removing it, its children or attributes.
+ *
+ * Inspired by https://github.com/developit/snarkdown/issues/70
+ * and https://github.com/cure53/DOMPurify. Simplified
+ * for our use-case.
+ *
+ * @param {Element} node
  */
 function sanitizeNode(node) {
   // allow text nodes
@@ -3377,13 +3384,13 @@ function sanitizeNode(node) {
   }
 }
 
-/**
- * Validates attributes for validity.
- *
- * @param {string} lcTag
- * @param {string} lcName
- * @param {string} value
- * @return {boolean}
+/**
+ * Validates attributes for validity.
+ *
+ * @param {string} lcTag
+ * @param {string} lcName
+ * @param {string} value
+ * @return {boolean}
  */
 function isValidAttribute(lcTag, lcName, value) {
   // disallow most attributes based on whitelist