@dataloop-ai/components 0.17.91 → 0.17.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.91",
+  "version": "0.17.93",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -394,10 +394,18 @@ export default defineComponent({
         modelValue(value: string) {
             const target = this.$refs['input'] as HTMLInputElement
             value = value?.replaceAll(' ', ' ') ?? ''
-            if (!this.isTyping) target.innerHTML = value
+            /*
+             * I commented out this line because it was blocking arrow navigation
+             * */
+            // if (!this.isTyping) target.innerHTML = value
+            target.innerHTML = value
             updateEditor(this.styleModel)
             this.setMenuOffset(isEligibleToChange(target, this.expanded))
-            if (!this.isTyping) setCaret(target)
+            /*
+             * I commented out this line because it was blocking arrow navigation
+             * */
+            // if (!this.isTyping) setCaret(target)
+            setCaret(target)
             if (!this.expanded) {
                 this.isOverflow =
                     isEllipsisActive(this.$refs['input'] as Element) ||

package/src/demos/DlDropdownButtonDemo.vue

@@ -286,7 +286,6 @@
                     :label="arrowNavigationLabel"
                     main-button-style="width: 150px;"
                     :overflow="true"
-                    disabled
                     :no-wrap="true"
                     tooltip="Tooltip message"
                     :arrow-nav-items="listItems"

package/src/demos/DlMenuDemo.vue

@@ -524,6 +524,8 @@ import {
 import { defineComponent, onMounted, ref, watch } from 'vue-demi'
 import { useArrowNavigation } from '../hooks/use-arrow-navigation'
 
+type ItemType = Record<string, any> | string
+
 export default defineComponent({
     name: 'DlMenuDemo',
     components: {
@@ -537,7 +539,7 @@ export default defineComponent({
     setup() {
         const showing = ref(false)
         const isMenuOpen = ref(false)
-        const arrowNavigationLabel = ref('Arrow Navigation Label')
+        const arrowNavigationLabel = ref<ItemType>('Arrow Navigation Label')
 
         const listItems = ref([
             'New tab',
@@ -560,7 +562,7 @@ export default defineComponent({
             isMenuOpen
         )
 
-        watch(selectedItem, (value: string) => {
+        watch(selectedItem, (value: ItemType | string) => {
             arrowNavigationLabel.value = value
         })
 

package/src/demos/DlTooltipDemo.vue

@@ -156,8 +156,10 @@ export default defineComponent({
 <style>
 #TestID {
     border: 1px solid red;
+    background-color: blue;
 }
 .TestID {
     border: 1px solid red;
+    background-color: blue;
 }
 </style>

package/src/hooks/use-arrow-navigation.ts

@@ -1,41 +1,84 @@
-import { ref, onMounted, onBeforeUnmount } from 'vue-demi'
+import { ref, isRef, onMounted, onBeforeUnmount, computed } from 'vue-demi'
+
+type ItemType = Record<string, any> | string
 
 export function useArrowNavigation(items: any, isOpen: any) {
-    const selectedItem = ref(null)
-    const highlightedIndex = ref(-1)
+    const selectItem = ref<ItemType | null>(null)
+    const highlightIndex = ref<number>(-1)
+
+    const itemsData = computed(() => (isRef(items) ? items.value : items))
+    const isMenuOpen = computed(() => (isRef(isOpen) ? isOpen.value : isOpen))
 
-    const handleArrowUp = () => {
-        if (highlightedIndex.value > 0) {
-            highlightedIndex.value--
+    const selectedItem = computed({
+        get: () => selectItem.value,
+        set: (value: ItemType) => {
+            selectItem.value = value
         }
-    }
-    const handleArrowDown = () => {
-        if (highlightedIndex.value < items.value.length - 1) {
-            highlightedIndex.value++
+    })
+    const highlightedIndex = computed({
+        get: () => highlightIndex.value,
+        set: (value: number) => {
+            highlightIndex.value = value
         }
+    })
+
+    const itemsLength = computed<number>(() => itemsData.value.length)
+
+    const decrementHighlightedIndex = (): void => {
+        highlightedIndex.value -= 1
     }
-    const handleEnter = () => {
-        if (
+    const incrementHighlightedIndex = (): void => {
+        highlightedIndex.value += 1
+    }
+    const resetHighlightedIndex = (): void => {
+        highlightedIndex.value = -1
+    }
+
+    const isEligibleToHandleEnter = computed<boolean>(() => {
+        return (
             highlightedIndex.value >= 0 &&
-            highlightedIndex.value < items.value.length
-        ) {
-            selectedItem.value = items.value[highlightedIndex.value]
-            resetNavigation()
+            highlightedIndex.value < itemsLength.value
+        )
+    })
+    const isEligibleToIncrementHighlightedIndex = computed<boolean>(() => {
+        return highlightedIndex.value < itemsLength.value - 1
+    })
+    const isEligibleToDecrementHighlightedIndex = computed<boolean>(() => {
+        return highlightedIndex.value > 0
+    })
+    const isNotEligibleToHandleArrows = computed<boolean>(() => {
+        return !itemsLength.value || !isMenuOpen.value
+    })
+
+    const handleArrowUp = (event: KeyboardEvent) => {
+        event.preventDefault()
+        if (isEligibleToDecrementHighlightedIndex.value) {
+            decrementHighlightedIndex()
         }
     }
-    const resetNavigation = () => {
-        highlightedIndex.value = -1
+    const handleArrowDown = (event: KeyboardEvent) => {
+        event.preventDefault()
+        if (isEligibleToIncrementHighlightedIndex.value) {
+            incrementHighlightedIndex()
+        }
     }
+    const handleEnter = () => {
+        if (isEligibleToHandleEnter.value) {
+            selectedItem.value = itemsData.value[highlightedIndex.value]
+            resetHighlightedIndex()
+        }
+    }
+
     const navigateList = (event: KeyboardEvent) => {
-        if (!items.value?.length || !isOpen.value) {
+        if (isNotEligibleToHandleArrows.value) {
             return
         }
         switch (event.key) {
             case 'ArrowUp':
-                handleArrowUp()
+                handleArrowUp(event)
                 break
             case 'ArrowDown':
-                handleArrowDown()
+                handleArrowDown(event)
                 break
             case 'Enter':
                 handleEnter()

package/src/hooks/use-portal.ts

@@ -59,11 +59,7 @@ export default function (
 
         if (portalIsActive.value === false) {
             if (onGlobalDialog === false && portalEl.value === null) {
-                portalEl.value = createGlobalNode(parentId)
-                portalEl.value.className =
-                    portalEl.value.className + (parentClass || '')
-                portalEl.value.style.cssText =
-                    portalEl.value.style.cssText + (parentStyle || '')
+                portalEl.value = createGlobalNode()
             }
 
             portalIsActive.value = true