@worksafevictoria/wcl7.5 1.17.1 → 1.18.0-beta.2

package/src/components/SubComponents/FormInstance/services/logic-parser.js

@@ -1,10 +1,10 @@
 import {
   convertStringWithDotNotationToObject,
   generateUniqueId,
-  isEmpty
+  isEmpty,
 } from '../models/form-utils'
 
-export function parseElementStates(webformElement) {
+export function parseElementStates(webformElement, elementInstance) {
   const states = webformElement['#states'] || {}
   let logicList = []
   Object.keys(states)
@@ -21,9 +21,13 @@ export function parseElementStates(webformElement) {
       const state = states[sourceKey]
       let conditonal = `result = (`
       if (Array.isArray(state)) {
-        state.forEach((rule) => (conditonal += ruleToString(rule, conditonal)))
+        // Pass instance to ruleToString
+        state.forEach((rule) => {
+          return (conditonal += ruleToString(rule, elementInstance, conditonal))
+        })
       } else {
-        conditonal += ruleToString(state, conditonal)
+        // Pass instance to ruleToString
+        conditonal += ruleToString(state, elementInstance, conditonal)
       }
       conditonal += ')'
       logic.trigger.javascript = conditonal
@@ -54,10 +58,14 @@ function getLogicBasedOnCondition(elementCondition) {
   return null
 }
 
-function ruleToString(rule) {
+function ruleToString(rule, elementInstance) {
   if (typeof rule === 'object') {
     const conditions = Object.keys(rule).reduce((items, ruleKey) => {
-      const condition = ruleItemToString(rule[ruleKey], ruleKey)
+      const condition = ruleItemToString(
+        rule[ruleKey],
+        ruleKey,
+        elementInstance,
+      )
       if (!isEmpty(condition)) {
         items.push(condition)
       }
@@ -74,18 +82,45 @@ function ruleToString(rule) {
   return ''
 }
 
-function ruleItemToString(ruleItem, itemKey) {
-  const fieldName = itemKey.split(' ')[1] || itemKey.split(' ')[0]
-  const formElementID = fieldName?.match(/"([^']+)"/)[1]
+function ruleItemToString(ruleItem, itemKey, elementInstance) {
+  // Regex 1: Matches standard selectors (name="foo"). Captures 'foo'.
+  const standardMatch = itemKey.match(/name="([^"]+)"/)
+  // Regex 2: Matches array selectors (name="foo[bar]"). Captures 'foo' and 'bar'.
+  const arrayMatch = itemKey.match(/name="([^"]+)\[([^\]]+)\]"/)
+
+  let formComponentID = null // The Formio component key (e.g., 'checkboxes')
+  let checkboxOptionKey = null // The specific option key (e.g., 'foo bar')
+
+  if (arrayMatch && arrayMatch[1] && arrayMatch[2]) {
+    // Array Notation found (e.g., name="checkboxes[foo bar]")
+    formComponentID = arrayMatch[1]
+    checkboxOptionKey = arrayMatch[2]
+  } else if (standardMatch && standardMatch[1]) {
+    // Standard Notation found (e.g., name="foobar")
+    formComponentID = standardMatch[1]
+  }
+
+  // ... (rest of the function)
+
+  // Now pass BOTH keys to getTrigger for array-based lookups
   const conditions = Object.keys(ruleItem)
     .map((elementProp) =>
-      formElementID ? getTrigger(formElementID, ruleItem, elementProp) : null
+      formComponentID
+        ? getTrigger(
+            formComponentID,
+            ruleItem,
+            elementProp,
+            checkboxOptionKey,
+            elementInstance,
+          )
+        : null,
     )
     .filter((trigger) => !!trigger)
     .reduce((triggers, trigger) => {
       triggers.push(trigger)
       return triggers
     }, [])
+
   return conditions.join('')
 }
 
@@ -95,7 +130,7 @@ function createNewLogic(actionName, actionValue) {
     convertStringWithDotNotationToObject(
       defaultProps,
       actionName,
-      !!!actionValue
+      !!!actionValue,
     )
   } else {
     defaultProps[actionName] = !!!actionValue
@@ -104,7 +139,7 @@ function createNewLogic(actionName, actionValue) {
     name: generateUniqueId(),
     trigger: {
       type: 'javascript',
-      javascript: ''
+      javascript: '',
     },
     defaultProps,
     actions: [
@@ -114,20 +149,48 @@ function createNewLogic(actionName, actionValue) {
         property: {
           label: generateUniqueId(),
           value: actionName,
-          type: 'boolean'
+          type: 'boolean',
         },
-        state: actionValue
-      }
-    ]
+        state: actionValue,
+      },
+    ],
   }
 }
 
-function getTrigger(formElementID, ruleItem, prop) {
+function getTrigger(
+  formComponentID,
+  ruleItem,
+  prop,
+  checkboxOptionKey = null,
+  elementInstance,
+) {
   if (ruleItem.hasOwnProperty(prop)) {
     const value = ruleItem[prop] ?? ''
+
+    let variable = `data.{${formComponentID}}`
+
+    try {
+      if (elementInstance && Array.isArray(elementInstance.tree)) {
+        const path = findPathInTree(elementInstance.tree, formComponentID)
+        if (path && path.length > 0) {
+          variable = buildDataAccessor(path, 'data')
+        }
+      }
+    } catch (e) {
+      let variable = `data.{${formComponentID}}`
+    }
+
     let valueDelimeter = typeof value === 'string' ? "'" : ''
     let expression = `${valueDelimeter}${value}${valueDelimeter}`
-    let variable = `data.{${formElementID}}`
+
+    if (checkboxOptionKey && prop === 'checked' && value === true) {
+      return `(${variable}['${checkboxOptionKey}']===true)`
+    }
+
+    if (checkboxOptionKey && prop === 'unchecked' && value === true) {
+      return `(!(${variable}['${checkboxOptionKey}']===true))`
+    }
+
     if (typeof value !== 'object' && prop === 'value') {
       return `${variable} === ${expression}`
     } else if (typeof value === 'object' && prop === 'value') {
@@ -171,3 +234,44 @@ function getTrigger(formElementID, ruleItem, prop) {
   }
   return null
 }
+
+function findPathInTree(tree, targetKey) {
+  if (!Array.isArray(tree) || !targetKey) return null
+
+  function dfs(nodes, path) {
+    for (const node of nodes) {
+      if (!node) continue
+      const nodeKey = node.key
+      const newPath =
+        nodeKey && node.type !== 'webform_wizard_page'
+          ? path.concat(nodeKey)
+          : path
+      if (nodeKey === targetKey) return newPath
+      if (Array.isArray(node.children) && node.children.length > 0) {
+        const found = dfs(node.children, newPath)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  return dfs(tree, [])
+}
+
+function isIdentifier(key) {
+  return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(String(key))
+}
+
+function buildDataAccessor(pathArray, rootName = 'data') {
+  if (!Array.isArray(pathArray) || pathArray.length === 0) return rootName
+  const parts = []
+  for (const key of pathArray) {
+    if (isIdentifier(key)) {
+      parts.push('.' + key)
+    } else {
+      const escaped = String(key).replace(/'/g, "\\'")
+      parts.push(`['${escaped}']`)
+    }
+  }
+  return rootName + parts.join('')
+}

package/src/components/SubComponents/FormInstance/services/registry-factory.js

@@ -44,197 +44,197 @@ import { UnknownFormElement } from '../models/overrides/unknown'
 import { URLFormElement } from '../models/overrides/url'
 
 export class RegisterFactory {
-  static getFormIOElement(webformElement, formSettingsMeta, parent) {
+  static getFormIOElement(webformElement, formSettingsMeta, parent, tree) {
     const matchingElements = [
       {
         isApplicable: (webformElement, type) =>
           type === 'textfield' &&
           webformElement['#input_mask']?.includes(`'alias': 'currency`),
-        factory: CurrencyFormElement
+        factory: CurrencyFormElement,
       },
       {
         isApplicable: (webformElement, type) =>
           type === 'email' ||
           webformElement['#input_mask']?.includes(`'alias': 'email`),
-        factory: EmailFormElement
+        factory: EmailFormElement,
       },
       {
         isApplicable: 'tel',
-        factory: PhoneNumberFormElement
+        factory: PhoneNumberFormElement,
       },
       {
         isApplicable: 'select',
-        factory: SelectFormElement
+        factory: SelectFormElement,
       },
       {
         isApplicable: [
           'webform_select_other',
           'webform_checkboxes_other',
-          'webform_radios_other'
+          'webform_radios_other',
         ],
-        factory: OptionsOtherFormElement
+        factory: OptionsOtherFormElement,
       },
       {
         isApplicable: 'radios',
-        factory: RadioFormElement
+        factory: RadioFormElement,
       },
       {
         isApplicable: ['datelist'],
-        factory: DateListFormElement
+        factory: DateListFormElement,
       },
       {
         isApplicable: ['date', 'datetime'],
-        factory: DateFormElement
+        factory: DateFormElement,
       },
       {
         isApplicable: 'webform_time',
-        factory: TimeFormElement
+        factory: TimeFormElement,
       },
       {
         isApplicable: 'number',
-        factory: NumberFormElement
+        factory: NumberFormElement,
       },
       {
         isApplicable: 'range',
-        factory: RangeFormElement
+        factory: RangeFormElement,
       },
       {
         isApplicable: 'webform_likert',
-        factory: LikertFormElement
+        factory: LikertFormElement,
       },
       {
         isApplicable: 'tableselect',
-        factory: TableSelectFormElement
+        factory: TableSelectFormElement,
       },
       {
         isApplicable: 'webform_multiple',
-        factory: MultipleFormElement
+        factory: MultipleFormElement,
       },
       {
         isApplicable: 'webform_custom_composite',
-        factory: CustomCompositeFormElement
+        factory: CustomCompositeFormElement,
       },
       {
         isApplicable: 'webform_signature',
-        factory: SignatureFormElement
+        factory: SignatureFormElement,
       },
       {
         isApplicable: ['webform_message'],
-        factory: MessageFormElement
+        factory: MessageFormElement,
       },
       {
         isApplicable: [
           'webform_markup',
           'processed_text',
           'webform_horizontal_rule',
-          'label'
+          'label',
         ],
-        factory: MarkupFormElement
+        factory: MarkupFormElement,
       },
       {
         isApplicable: ['managed_file'],
-        factory: FileFormElement
+        factory: FileFormElement,
       },
       {
         isApplicable: ['textformat'],
-        factory: TextFormatFormElement
+        factory: TextFormatFormElement,
       },
       {
         isApplicable: 'url',
-        factory: URLFormElement
+        factory: URLFormElement,
       },
       {
         isApplicable: ['checkbox', 'webform_same'],
-        factory: CheckboxFormElement
+        factory: CheckboxFormElement,
       },
       {
         isApplicable: ['checkboxes'],
-        factory: CheckboxesFormElement
+        factory: CheckboxesFormElement,
       },
       {
         isApplicable: 'webform_autocomplete',
-        factory: AutoCompleteFormElement
+        factory: AutoCompleteFormElement,
       },
       {
         isApplicable: 'webform_more',
-        factory: MoreTextFormElement
+        factory: MoreTextFormElement,
       },
       {
         isApplicable: ['hidden'],
-        factory: HiddenFormElement
+        factory: HiddenFormElement,
       },
       {
         isApplicable: 'webform_address',
-        factory: AddresseFormElement
+        factory: AddresseFormElement,
       },
       {
         isApplicable: ['textfield'],
-        factory: TextFormElement
+        factory: TextFormElement,
       },
       {
         isApplicable: ['value', 'textarea'],
-        factory: TextAreaFormElement
+        factory: TextAreaFormElement,
       },
       {
         isApplicable: 'webform_rating',
-        factory: RatingFormElement
+        factory: RatingFormElement,
       },
       // Matt testing
       {
         isApplicable: 'webform_testing',
-        factory: TestingFormElement
+        factory: TestingFormElement,
       },
 
       // end Matt testing
       {
         isApplicable: 'webform_scale',
-        factory: ScaleFormElement
+        factory: ScaleFormElement,
       },
       {
         isApplicable: 'webform_actions',
-        factory: SubmitFormElement
+        factory: SubmitFormElement,
       },
       {
         isApplicable: (webformElement) =>
           webformElement['#webform_plugin_id'] === 'webform_wizard_page',
-        factory: PageFormElement
+        factory: PageFormElement,
       },
       {
         isApplicable: 'details',
-        factory: DetailFormElement
+        factory: DetailFormElement,
       },
       {
         isApplicable: 'container',
-        factory: ContainerFormElement
+        factory: ContainerFormElement,
       },
       {
         isApplicable: 'webform_table',
-        factory: TableFormElement
+        factory: TableFormElement,
       },
       {
         isApplicable: 'webform_table_row',
-        factory: TableRowFormElement
+        factory: TableRowFormElement,
       },
       {
         isApplicable: 'item',
-        factory: TwigFormElement
+        factory: TwigFormElement,
       },
       {
         isApplicable: ['fieldset', 'webform_section'],
-        factory: SectionFormElement
+        factory: SectionFormElement,
       },
       {
         isApplicable: 'webform_flexbox',
-        factory: FlexboxFormElement
+        factory: FlexboxFormElement,
       },
       {
         isApplicable: 'webform_email_confirm',
-        factory: EmailConfirmFormElement
+        factory: EmailConfirmFormElement,
       },
       {
         isApplicable: 'webform_codemirror',
-        factory: CodeFormElement
-      }
+        factory: CodeFormElement,
+      },
     ]
 
     const matchingElement = matchingElements.find((item) => {
@@ -252,7 +252,7 @@ export class RegisterFactory {
     const ElementFactory = matchingElement?.factory
     const moreElement = RegisterFactory.getMoreTextInstance(
       webformElement,
-      parent
+      parent,
     )
     const elementInstance = matchingElement
       ? new ElementFactory(webformElement, parent, moreElement)
@@ -263,6 +263,8 @@ export class RegisterFactory {
     }
 
     elementInstance.setFormSettingsMeta(formSettingsMeta)
+    // Set the tree for logic parsing
+    elementInstance.tree = tree
     return elementInstance
   }
 
@@ -274,9 +276,9 @@ export class RegisterFactory {
           ...webFormElement,
           '#type': 'webform_more',
           '#webform_id': 'webform_more' + webFormElement['#webform_id'],
-          '#webform_key': 'webform_more' + webFormElement['#webform_key']
+          '#webform_key': 'webform_more' + webFormElement['#webform_key'],
         },
-        parent
+        parent,
       )
     }
     return moreElement

package/src/components/SubComponents/FormInstance/stories/mocks/checkboxesother.json

@@ -184,14 +184,5 @@
     "#ajax_processed": false,
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#weight": 0.001,
-  "#processed": false,
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/emailconfirm.json

@@ -97,14 +97,5 @@
     },
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#weight": 0.001,
-  "#processed": false,
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/jahd.json

@@ -1351,9 +1351,5 @@
     "#title_display": "before",
     "#description_display": "after",
     "#id": "edit-enter-details"
-  },
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#id": "kitchen_sink_formio_v1"
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/quad.json

@@ -241,9 +241,5 @@
     "#title_display": "before",
     "#description_display": "after",
     "#id": "edit-results"
-  },
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#id": "edit-elements"
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/radiosother.json

@@ -164,13 +164,5 @@
     "#ajax_processed": false,
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#processed": false,
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/sameas.json

@@ -58,9 +58,5 @@
     "#name": "samea",
     "#value": 0,
     "#checked": false
-  },
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#id": "edit-elements"
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/selectother.json

@@ -102,14 +102,5 @@
     "#ajax_processed": false,
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#weight": 0.001,
-  "#processed": false,
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/styles.json

@@ -73,9 +73,5 @@
     "#id": "edit-element-without-styles",
     "#name": "element_without_styles",
     "#value": ""
-  },
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#id": "edit-elements"
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/table-select.json

@@ -454,19 +454,5 @@
     },
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#parents": ["elements"],
-  "#array_parents": ["elements"],
-  "#weight": 0.001,
-  "#processed": false,
-  "#required": false,
-  "#attributes": {
-    "data-drupal-selector": "edit-elements"
-  },
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/token.json

@@ -252,9 +252,5 @@
         "#name": "tokens"
       }
     }
-  },
-  "#required": false,
-  "#title_display": "before",
-  "#description_display": "after",
-  "#id": "edit-elements"
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/twig.json

@@ -138,17 +138,5 @@
     },
     "#sorted": true,
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#weight": 0.001,
-  "#processed": false,
-  "#required": false,
-  "#attributes": {
-    "data-drupal-selector": "edit-elements"
-  },
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }

package/src/components/SubComponents/FormInstance/stories/mocks/wizard.json

@@ -337,17 +337,5 @@
     },
     "#theme": "webform_actions",
     "#after_build_done": true
-  },
-  "#tree": false,
-  "#weight": 0.002,
-  "#processed": false,
-  "#required": false,
-  "#attributes": {
-    "data-drupal-selector": "edit-elements"
-  },
-  "#title_display": "before",
-  "#description_display": "after",
-  "#errors": null,
-  "#id": "edit-elements",
-  "#sorted": true
+  }
 }