@policystudio/policy-studio-ui-vue 1.2.0-access.78 → 1.2.0-access.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.2.0-access.78",
+  "version": "1.2.0-access.79",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/components/accordion/PsAccordionItem.vue

@@ -54,7 +54,7 @@
 <script setup>
 import { getParentVueComponentByName } from '../../util/GeneralFunctions.js'
 import { useCollapseAnimation } from '../../../dist/composables/useCollapseAnimation.js'
-import { ref, computed, getCurrentInstance  } from 'vue'
+import { ref, computed, getCurrentInstance, onBeforeUnmount  } from 'vue'
 
 const { beforeEnter, enter, afterEnter, beforeLeave, leave } = useCollapseAnimation()
 
@@ -154,11 +154,40 @@ const toggle = () => {
   _toggle()
 }
 
-const onHeaderFocusIn = (e) => emit('header-focusin', e)
+let focusOutTimer = null
+let suppressFocusIn = false
+
+onBeforeUnmount(() => {
+  clearTimeout(focusOutTimer)
+})
+
+const onHeaderFocusIn = (e) => {
+  if (suppressFocusIn) return
+  if (e.relatedTarget && e.currentTarget.contains(e.relatedTarget)) return
+  if (focusOutTimer) {
+    clearTimeout(focusOutTimer)
+    focusOutTimer = null
+    return
+  }
+  emit('header-focusin', e)
+}
 
 const onHeaderFocusOut = (e) => {
   if (!e.currentTarget.contains(e.relatedTarget)) {
-    emit('header-focusout', e)
+    const wrapper = e.currentTarget
+    clearTimeout(focusOutTimer)
+    focusOutTimer = setTimeout(() => {
+      focusOutTimer = null
+      const activeEl = document.activeElement
+      if (!wrapper.contains(activeEl)) {
+        suppressFocusIn = true
+        emit('header-focusout', e)
+        if (activeEl && document.activeElement !== activeEl && activeEl.isConnected) {
+          activeEl.focus()
+        }
+        suppressFocusIn = false
+      }
+    }, 0)
   }
 }
 

package/src/components/controls/PsSwitch.vue

@@ -4,7 +4,7 @@
     :class="[getComponentClass, { disabled: disabled }]"
     @click="change()"
     @keydown.enter.stop="change()"
-    tabindex="0"
+    :tabindex="tabindex"
   >
     <span
       class="psui-el-switch-button"
@@ -47,6 +47,10 @@ const props = defineProps({
     default: 'big',
     validator: (value) => ['small', 'big'].includes(value),
   },
+  tabindex: {
+    type: [Number, String],
+    default: 0,
+  },
 })
 
 const getToggleClass = computed(() => {

package/src/components/ui/PsIcon.vue

@@ -2,7 +2,7 @@
   <div
     class="psui-general-icon"
     :style="{ display: display }"
-    tabindex="0"
+    :tabindex="tabindex"
     v-bind="$attrs"
     @click="emit('click', $event)"
     @keydown="emit('keydown',$event)"
@@ -132,6 +132,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  tabindex: {
+    type: [Number, String],
+    default: 0,
+  },
 })
 
 const finishedImageLoad = ref(false)