@citizenplane/pimp 10.9.2 → 10.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.9.2",
+  "version": "10.9.3",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpMultiselect.vue

@@ -1,17 +1,26 @@
 <template>
   <div class="cpMultiselect">
-    <base-input-label v-if="label" class="cpMultiselect__label" :is-invalid :required>
+    <base-input-label
+      v-if="label"
+      :id="labelId"
+      class="cpMultiselect__label"
+      :for="multiselectId"
+      :is-invalid
+      :required
+    >
       {{ label }}
     </base-input-label>
     <auto-complete
       ref="multiselect"
       v-model="selectModel"
       :append-to
+      :aria-labelledby="ariaLabelledby"
       auto-option-focus
       :data-key="trackBy"
       :disabled
       :force-selection
       :input-class
+      :input-id="multiselectId"
       :invalid="isInvalid"
       :multiple
       :name
@@ -24,6 +33,8 @@
       @click="handleClick"
       @complete="handleSearch"
       @hide="handleOverlayHidden"
+      @keydown.arrow-down="handleArrowKeys"
+      @keydown.arrow-up="handleArrowKeys"
       @keydown.enter="toggleDropdown"
       @keydown.esc.stop
       @show="handleOverlayShown"
@@ -61,12 +72,18 @@
           v-else
           class="cpMultiselect__toggle"
           :disabled="disabled"
+          tabindex="-1"
           type="button"
           @click.stop="handleDropdownIconClick"
         >
           <cp-icon class="cpMultiselect__dropdownIcon" :class="chevronDynamicClass" type="chevron-down" />
         </button>
-        <base-select-clear-button v-if="displayClearButton" class="cpMultiselect__clear" @click="handleClear" />
+        <base-select-clear-button
+          v-if="displayClearButton"
+          class="cpMultiselect__clear"
+          tabindex="-1"
+          @click="handleClear"
+        />
       </template>
     </auto-complete>
     <transition-expand mode="out-in">
@@ -80,7 +97,7 @@
 <script setup lang="ts">
 import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
 import AutoComplete from 'primevue/autocomplete'
-import { ref, computed, onMounted, useSlots } from 'vue'
+import { ref, computed, onMounted, useSlots, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import BaseSelectClearButton from '@/components/BaseSelectClearButton.vue'
@@ -138,14 +155,20 @@ const emit = defineEmits<Emits>()
 
 const slots = useSlots()
 
+const multiselectId = useId()
+const labelId = useId()
+
+const ariaLabelledby = computed(() => (props.label ? labelId : undefined))
+
 const selectModel = computed({
   get() {
     return props.modelValue
   },
-  set(value) {
+  set(value: string | object | string[] | null) {
     if (typeof value === 'string') {
       return
     }
+
     emit('update:modelValue', value)
   },
 })
@@ -167,13 +190,21 @@ const passThroughConfig = computed(() => ({
   loader: { class: 'cpMultiselect__hidden' },
 }))
 
-const multiselect = ref<InstanceType<typeof AutoComplete> | null>(null)
+type ExtendedAutoComplete = InstanceType<typeof AutoComplete> & {
+  $el: HTMLElement
+  alignOverlay: () => void
+  hide: () => void
+  overlay: HTMLElement
+  overlayVisible: boolean
+  show: () => void
+}
+
+const multiselect = ref<ExtendedAutoComplete | null>(null)
 
 const searchQuery = ref('')
 
 const typeahead = computed(() => !props.withoutTypeahead)
 
-// @ts-expect-error 'overlayVisible' does not exist on type instance of AutoComplete
 const isDropdownOpen = computed(() => multiselect.value?.overlayVisible)
 
 const chevronDynamicClass = computed(() => {
@@ -202,11 +233,10 @@ const handleValueChange = (newValue: string | object) => {
 
 const getInputElement = () => {
   if (!multiselect.value) return null
-  // @ts-expect-error '$el' does not exist on type instance of AutoComplete
   return multiselect.value.$el?.querySelector('input') || null
 }
 
-const selectInputContent = () => {
+const selectInputElement = () => {
   const inputElement = getInputElement()
   if (inputElement) inputElement.select()
 }
@@ -215,13 +245,13 @@ const focusAndSelectInput = () => {
   const inputElement = getInputElement()
   if (inputElement) {
     inputElement.focus()
-    inputElement.select()
+    selectInputElement()
   }
 }
 
 const handleClick = () => {
   toggleDropdown()
-  selectInputContent()
+  selectInputElement()
 }
 
 const handleDropdownIconClick = () => {
@@ -229,12 +259,15 @@ const handleDropdownIconClick = () => {
   focusAndSelectInput()
 }
 
+const handleArrowKeys = () => {
+  if (isDropdownOpen.value) return
+  return toggleDropdown()
+}
+
 const toggleDropdown = () => {
   if (isDropdownOpen.value) {
-    // @ts-expect-error 'hide' does not exist on type instance of AutoComplete
     multiselect.value?.hide()
   } else {
-    // @ts-expect-error 'show' does not exist on type instance of AutoComplete
     multiselect.value?.show()
   }
 }
@@ -245,23 +278,17 @@ const handleUpdateModelValue = (value: Record<string, unknown> | string[] | null
 }
 
 const overrideAlignOverlay = () => {
-  if (multiselect.value) {
-    // @ts-expect-error 'alignOverlay' does not exist on type instance of AutoComplete
-    multiselect.value.alignOverlay = alignOverlay
-  }
+  if (!multiselect.value) return
+  multiselect.value.alignOverlay = alignOverlay
 }
 
 const alignOverlay = () => {
-  // @ts-expect-error 'el' does not exist on type instance of AutoComplete
   const target = multiselect.value?.$el
 
-  // @ts-expect-error 'overlay' does not exist on type instance of AutoComplete
   if (!multiselect.value?.overlay || !target) return
 
-  // @ts-expect-error 'overlay' does not exist on type instance of AutoComplete
   multiselect.value.overlay.style.width = `${getOuterWidth(target)}px`
 
-  // @ts-expect-error 'overlay' does not exist on type instance of AutoComplete
   absolutePosition(multiselect.value.overlay, target)
 }
 
@@ -470,7 +497,7 @@ onMounted(() => overrideAlignOverlay())
       color: var(--cp-foreground-primary);
     }
 
-    &[data-p-selected='true'] {
+    &[data-p-selected='true']:not([data-p-focused='true']) {
       background: var(--cp-background-accent-primary);
     }