Type other indicator files

packages/client/src/components/preview/HoverIndicator.svelte

@@ -43,9 +43,11 @@
   })
 </script>
 
-<IndicatorSet
-  componentId={$dndIsDragging ? null : componentId}
-  color="var(--spectrum-global-color-static-blue-200)"
-  zIndex={selected ? 890 : 910}
-  allowResizeAnchors
-/>
+{#if !$dndIsDragging && componentId}
+  <IndicatorSet
+    {componentId}
+    color="var(--spectrum-global-color-static-blue-200)"
+    zIndex={selected ? 890 : 910}
+    allowResizeAnchors
+  />
+{/if}}

packages/client/src/components/preview/Indicator.svelte

@@ -1,20 +1,20 @@
-<script>
+<script lang="ts">
   import { Icon } from "@budibase/bbui"
   import { GridDragModes } from "utils/grid"
 
-  export let top
-  export let left
-  export let width
-  export let height
-  export let text
-  export let icon
-  export let color
-  export let zIndex
-  export let componentId
+  export let top: number
+  export let left: number
+  export let width: number
+  export let height: number
+  export let text: string | undefined
+  export let icon: string | undefined
+  export let color: string
+  export let zIndex: number
+  export let componentId: string
   export let line = false
   export let alignRight = false
   export let showResizeAnchors = false
-  export let background = null
+  export let background: string | undefined
   export let animate = false
 
   const AnchorSides = [

packages/client/src/components/preview/IndicatorSet.svelte

@@ -4,8 +4,8 @@
   import { builderStore } from "stores"
   import { memo, Utils } from "@budibase/frontend-core"
 
-  export let componentId: string | undefined = undefined
-  export let color: string | undefined = undefined
+  export let componentId: string
+  export let color: string
   export let zIndex: number = 900
   export let prefix: string | undefined = undefined
   export let allowResizeAnchors: boolean = false
@@ -26,8 +26,8 @@
 
   interface IndicatorSetState {
     // Cached props
-    componentId?: string
-    color?: string
+    componentId: string
+    color: string
     zIndex: number
     prefix?: string
     allowResizeAnchors: boolean
@@ -118,10 +118,6 @@
     }
 
     // Sanity check
-    if (!componentId) {
-      state = defaultState()
-      return
-    }
     let elements = getElements(componentId)
     if (!elements.length) {
       state = defaultState()
@@ -235,8 +231,8 @@
     left={indicator.left}
     width={indicator.width}
     height={indicator.height}
-    text={idx === 0 ? state.text : null}
-    icon={idx === 0 ? state.icon : null}
+    text={idx === 0 ? state.text : undefined}
+    icon={idx === 0 ? state.icon : undefined}
     showResizeAnchors={state.allowResizeAnchors && state.insideGrid}
     color={state.error ? errorColor : state.color}
     componentId={state.componentId}

packages/client/src/components/preview/SelectionIndicator.svelte

@@ -7,9 +7,11 @@
     : "var(--spectrum-global-color-static-blue-600)"
 </script>
 
-<IndicatorSet
-  componentId={$dndIsDragging ? null : $builderStore.selectedComponentId}
-  {color}
-  zIndex={900}
-  allowResizeAnchors
-/>
+{#if !$dndIsDragging && $builderStore.selectedComponentId}
+  <IndicatorSet
+    componentId={$builderStore.selectedComponentId}
+    {color}
+    zIndex={900}
+    allowResizeAnchors
+  />
+{/if}