@worksafevictoria/wcl7.5 1.17.0-beta.10 → 1.17.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.17.0-beta.10",
+  "version": "1.17.0-beta.11",
   "description": "WorkSafe Victoria Component Library - GitHub Actions Migration Test",
   "main": "src/index.js",
   "license": "MIT",

package/src/components/SubComponents/FormInstance/models/base-form-element.js

@@ -54,7 +54,7 @@ export class BaseFormElement {
   getLabelPosition() {
     return this.getPosition(
       this.webformElement['#_title_display'] ??
-        this.webformElement['#title_display']
+        this.webformElement['#title_display'],
     )
   }
 
@@ -160,7 +160,7 @@ export class BaseFormElement {
       label: getStyle(this.webformElement['#label_attributes']),
       wrapper: getStyle(this.webformElement['#wrapper_attributes']),
       element: getStyle(this.webformElement['#attributes']),
-      additional: this.getAdditionalStyles(this.getCustomClass())
+      additional: this.getAdditionalStyles(this.getCustomClass()),
     }
     const hasOverride = Object.values(style).some((attr) => !this.isEmpty(attr))
     return hasOverride ? style : undefined
@@ -251,7 +251,8 @@ export class BaseFormElement {
     if (this.isEmpty(this.webformElement['#states'])) {
       return undefined
     } else {
-      return parseElementStates(this.webformElement)
+      // NEW: Pass the current instance (`this`) to the parser.
+      return parseElementStates(this.webformElement, this)
     }
   }
 

package/src/components/SubComponents/FormInstance/services/form-render-parser.js

@@ -3,6 +3,39 @@ import { converFormIOElementToJSON } from './convert-form-element'
 import { updateConditionWithFormReferences } from './logic-linker'
 import { RegisterFactory } from './registry-factory'
 
+function extractWebformKeys(webformObject) {
+  const result = []
+
+  const isElement = (obj) => obj && typeof obj === 'object' && obj['#type']
+
+  const extract = (obj) => {
+    if (!obj || typeof obj !== 'object') return null
+
+    const type = obj['#type']
+
+    const key = obj['#webform_key'] || null
+    const node = key ? { key, children: [], type } : null
+
+    for (const [childKey, val] of Object.entries(obj)) {
+      if (childKey.startsWith('#')) continue
+      if (isElement(val)) {
+        const childNode = extract(val)
+        if (childNode && node) node.children.push(childNode)
+        else if (childNode) return childNode
+      }
+    }
+
+    return node
+  }
+
+  for (const [topKey, val] of Object.entries(webformObject)) {
+    if (typeof val === 'object' && val['#type']) {
+      const topNode = extract(val)
+      if (topNode) result.push(topNode)
+    }
+  }
+  return result
+}
 export class FormRenderParser {
   initialise(contentApiUrl, isPreview) {
     this.formSettingsMeta = { contentApiUrl }
@@ -17,14 +50,16 @@ export class FormRenderParser {
     const formlogicList = []
     try {
       webform = this.preProcessWebForm(webform)
+      const pathTree = extractWebformKeys(webform)
       const formiodefinition = {
         id: webform['#id'],
         components: this.parseFormContainerComponents(
           webform,
           webFormElementTree,
           null,
-          formlogicList
-        )
+          formlogicList,
+          pathTree,
+        ),
       }
 
       options.breadcrumbSettings = { clickable: false }
@@ -35,14 +70,12 @@ export class FormRenderParser {
 
       formiodefinition.display = this.getDisplay(webFormElementTree)
       if (this.isPreview) {
-        console.log('drupal webform', webform)
-        console.log('formio definition', formiodefinition)
       }
       return {
         definition: formiodefinition,
         tree: webFormElementTree,
         options,
-        css
+        css,
       }
     } catch (e) {
       console.error(e)
@@ -54,7 +87,8 @@ export class FormRenderParser {
     container,
     webFormElementTree,
     parent,
-    formlogicList
+    formlogicList,
+    tree,
   ) => {
     return Object.keys(container)
       .filter((i) => !i.startsWith('#'))
@@ -63,11 +97,12 @@ export class FormRenderParser {
         return RegisterFactory.getFormIOElement(
           webFormElement,
           this.formSettingsMeta,
-          parent
+          parent,
+          tree,
         )
       })
       .filter(
-        (formIOElement) => !!formIOElement && formIOElement.isRenderable()
+        (formIOElement) => !!formIOElement && formIOElement.isRenderable(),
       )
       .map((formIOElement) => {
         // nested form logic
@@ -78,11 +113,11 @@ export class FormRenderParser {
               subContainer,
               webFormElementTree,
               formIOElement,
-              formlogicList
-            )
+              formlogicList,
+              tree,
+            ),
           )
         }
-
         return formIOElement
       })
       .map((formIOElement) => {
@@ -90,7 +125,7 @@ export class FormRenderParser {
         webFormElementTree[formIOElement.getKey()] = formIOElement
         const formioElementJSON = converFormIOElementToJSON(
           formIOElement,
-          formlogicList
+          formlogicList,
         ).json
         formIOElement.setFormIOdefinitionForElement(formioElementJSON)
         return formioElementJSON
@@ -103,7 +138,7 @@ export class FormRenderParser {
       webform.actions = {
         '#type': 'webform_actions',
         '#webform_id': 'form--actions',
-        '#webform_key': 'actions'
+        '#webform_key': 'actions',
       }
     }
     return webform
@@ -115,8 +150,8 @@ export class FormRenderParser {
         updateConditionWithFormReferences(
           logic,
           sourceElement,
-          webFormElementTree
-        )
+          webFormElementTree,
+        ),
       )
     })
   }
@@ -146,7 +181,7 @@ export class FormRenderParser {
 
   getDisplay(webFormElementTree) {
     const pageKeys = Object.keys(webFormElementTree).filter((elementKey) =>
-      webFormElementTree[elementKey].isPageComponent()
+      webFormElementTree[elementKey].isPageComponent(),
     )
     if (pageKeys.length > 0) {
       return 'wizard'

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

@@ -4,7 +4,7 @@ import {
   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,7 +82,7 @@ function ruleToString(rule) {
   return ''
 }
 
-function ruleItemToString(ruleItem, itemKey) {
+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'.
@@ -98,7 +106,13 @@ function ruleItemToString(ruleItem, itemKey) {
   const conditions = Object.keys(ruleItem)
     .map((elementProp) =>
       formComponentID
-        ? getTrigger(formComponentID, ruleItem, elementProp, checkboxOptionKey)
+        ? getTrigger(
+            formComponentID,
+            ruleItem,
+            elementProp,
+            checkboxOptionKey,
+            elementInstance,
+          )
         : null,
     )
     .filter((trigger) => !!trigger)
@@ -143,12 +157,29 @@ function createNewLogic(actionName, actionValue) {
   }
 }
 
-function getTrigger(formComponentID, ruleItem, prop, checkboxOptionKey = null) {
+function getTrigger(
+  formComponentID,
+  ruleItem,
+  prop,
+  checkboxOptionKey = null,
+  elementInstance,
+) {
   if (ruleItem.hasOwnProperty(prop)) {
     const value = ruleItem[prop] ?? ''
 
     let variable = `data.{${formComponentID}}`
-    console.log('🚀 ~ getTrigger ~ variable:', variable)
+
+    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}`
 
@@ -203,3 +234,44 @@ function getTrigger(formComponentID, ruleItem, prop, checkboxOptionKey = null) {
   }
   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"
+  }
 }