wip

packages/bbui/src/Tooltip/Context.svelte

@@ -158,6 +158,8 @@
     border-radius: 5px;
     box-sizing: border-box;
     border: 1px solid var(--grey-4);
+    opacity: 0;
+    pointer-events: none;
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
   }

packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte

@@ -96,8 +96,6 @@
   const onOptionMouseleave = (e, option) => {
     updateTooltip(e, null);
   }
-
-  $: console.log(schema)
 </script>
 
 <Multiselect

packages/client/src/components/Component.svelte

@@ -273,9 +273,8 @@
     staticSettings = instanceSettings.staticSettings
     dynamicSettings = instanceSettings.dynamicSettings
 
-    console.log(settingsDefinition, settingsDefinitionMap);
     // Check if we have any missing required settings
-    missingRequiredSettings = Object.values(settingsDefinitionMap).filter(setting => {
+    missingRequiredSettings = settingsDefinition.filter(setting => {
       let empty = instance[setting.key] == null || instance[setting.key] === ""
       let missing = setting.required && empty
 
@@ -284,22 +283,32 @@
         const dependsOnKey = setting.dependsOn.setting || setting.dependsOn
         const dependsOnValue = setting.dependsOn.value
         const realDependentValue = instance[dependsOnKey]
-        let foo = false && instance._component === "@budibase/standard-components/chartblock" && setting.type === "multifield"
+
+        const sectionDependsOnKey = setting.sectionDependsOn?.setting || setting.sectionDependsOn
+        const sectionDependsOnValue = setting.sectionDependsOn?.value
+        const sectionRealDependentValue = instance[sectionDependsOnKey]
+
+
+        let foo =  instance._component === "@budibase/standard-components/chartblock" && setting.type === "multifield"
+        if (dependsOnValue == null && realDependentValue == null) {
+          return false
+        }
+        if (dependsOnValue != null && dependsOnValue !== realDependentValue) {
+          return false
+        }
+
+        if (sectionDependsOnValue == null && sectionRealDependentValue == null) {
+          return false
+        }
+        if (sectionDependsOnValue != null && sectionDependsOnValue !== sectionRealDependentValue) {
+          return false
+        }
         if (foo) {
           console.log(setting)
           console.log(instance);
-        }
-        if (dependsOnValue === undefined && realDependentValue) {
-          if (foo) console.log("in 0");
-          return missing
-        }
-        if (dependsOnValue == null && realDependentValue == null) {
-          if (foo) console.log("in 1");
-          return false
-        }
-        if (dependsOnValue !== realDependentValue) {
-          if (foo) console.log("in 2");
-          return false
+          console.log(dependsOnValue);
+          console.log(realDependentValue);
+          console.log("")
         }
       }
 

packages/client/src/utils/componentProps.js

@@ -101,14 +101,14 @@ export const propsUseBinding = (props, bindingKey) => {
 /**
  * Gets the definition of this component's settings from the manifest
  */
-export const getSettingsDefinition = definition => {
+export const getSettingsDefinition = (definition) => {
   if (!definition) {
     return []
   }
   let settings = []
   definition.settings?.forEach(setting => {
     if (setting.section) {
-      settings = settings.concat(setting.settings || [])
+      settings = settings.concat((setting.settings || [])?.map(childSetting => ({ ...childSetting, sectionDependsOn: setting.dependsOn })))
     } else {
       settings.push(setting)
     }