fds-vue-core 6.2.6 → 6.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "6.2.6",
+  "version": "6.2.7",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -39,23 +39,6 @@
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
   },
-  "scripts": {
-    "serve": "vite",
-    "build": "vite build && pnpm build:types && cp ./src/tokens.css ./dist/tokens.css && cp ./src/slot-styles.css ./dist/slot-styles.css && cp ./src/apply.css ./dist/apply.css && cp ./src/fonts.css ./dist/fonts.css && cp -r ./public/assets ./dist/assets && mkdir -p ./dist/assets/img/logos && cp -r ./src/assets/img/logos/* ./dist/assets/img/logos/",
-    "build:types": "pnpm exec fgd typecheck --project tsconfig.build.json",
-    "preview": "vite preview",
-    "lint": "pnpm exec fgd lint --fix .",
-    "lint:ts": "pnpm exec fgd typecheck --noEmit -p tsconfig.app.json",
-    "lint:all": "pnpm lint && pnpm lint:ts",
-    "format": "prettier --write src/",
-    "prepublishOnly": "pnpm build",
-    "storybook": "STORYBOOK=true storybook dev -p 6006",
-    "build-storybook": "STORYBOOK=true storybook build",
-    "yalc:publish": "pnpm build && yalc publish",
-    "yalc:push": "pnpm build && yalc push",
-    "serve:playground": "pnpm --dir playground-consumer dev",
-    "lint-check": "pnpm exec fgd lint ."
-  },
   "config": {
     "commitizen": {
       "path": "./scripts/cz/cz-adapter.cjs"
@@ -65,7 +48,7 @@
     "vue": "^3.5.25"
   },
   "dependencies": {
-    "axios": "1.15.1",
+    "axios": "1.15.2",
     "date-fns": "4.1.0",
     "imask": "7.6.1",
     "tailwindcss": "4.2.4"
@@ -82,13 +65,13 @@
     "@vitejs/plugin-vue": "6.0.6",
     "@vitest/browser": "3.2.4",
     "eslint-plugin-storybook": "10.1.10",
-    "fg-devkit": "1.5.1",
+    "fg-devkit": "1.6.1",
     "storybook": "10.2.12",
     "vite": "7.3.2",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-vue-devtools": "8.1.1",
     "vitest": "3.2.4",
-    "vue": "3.5.32"
+    "vue": "3.5.33"
   },
   "knip": {
     "ignoreBinaries": [
@@ -101,22 +84,20 @@
       "src/apply.css"
     ]
   },
-  "pnpm": {
-    "overrides": {
-      "follow-redirects@<=1.15.11": ">=1.16.0",
-      "lodash@<=4.17.23": ">=4.18.0",
-      "lodash@>=4.0.0 <=4.17.22": ">=4.17.23",
-      "lodash@>=4.0.0 <=4.17.23": ">=4.18.0",
-      "tmp@<=0.2.3": ">=0.2.4",
-      "minimatch@>=10.0.0 <10.2.3": ">=10.2.3"
-    },
-    "onlyBuiltDependencies": [
-      "@parcel/watcher",
-      "core-js-pure",
-      "esbuild",
-      "lefthook",
-      "vue-demi"
-    ]
-  },
-  "packageManager": "pnpm@10.17.1"
-}
+  "scripts": {
+    "serve": "vite",
+    "build": "vite build && pnpm build:types && cp ./src/tokens.css ./dist/tokens.css && cp ./src/slot-styles.css ./dist/slot-styles.css && cp ./src/apply.css ./dist/apply.css && cp ./src/fonts.css ./dist/fonts.css && cp -r ./public/assets ./dist/assets && mkdir -p ./dist/assets/img/logos && cp -r ./src/assets/img/logos/* ./dist/assets/img/logos/",
+    "build:types": "pnpm exec fgd typecheck --project tsconfig.build.json",
+    "preview": "vite preview",
+    "lint": "pnpm exec fgd lint --fix .",
+    "lint:ts": "pnpm exec fgd typecheck --noEmit -p tsconfig.app.json",
+    "lint:all": "pnpm lint && pnpm lint:ts",
+    "format": "prettier --write src/",
+    "storybook": "STORYBOOK=true storybook dev -p 6006",
+    "build-storybook": "STORYBOOK=true storybook build",
+    "yalc:publish": "pnpm build && yalc publish",
+    "yalc:push": "pnpm build && yalc push",
+    "serve:playground": "pnpm --dir playground-consumer dev",
+    "lint-check": "pnpm exec fgd lint ."
+  }
+}

package/src/components/FdsSearchSelectPro/FdsSearchSelectPro.vue

@@ -71,6 +71,7 @@ const emit = defineEmits<{
 
 const dropdownVisible = ref(false)
 const searchTerm = ref('')
+const bypassSearchFilter = ref(false)
 const selectedItem = ref<Record<string, unknown> | null>(null)
 const selectedItems = ref<Array<Record<string, unknown>>>([...(props.initialSelectedItems ?? [])])
 const showSelectedOnly = ref(false)
@@ -105,6 +106,7 @@ const {
   props,
   searchFields,
   searchTerm,
+  bypassSearchFilter,
   showSelectedOnly,
   selectedItems,
   isMultiple,
@@ -240,6 +242,7 @@ const listWrapperStyle = computed(() => {
 })
 
 const handleClear = () => {
+  bypassSearchFilter.value = false
   searchTerm.value = ''
   selectedItem.value = null
   selectedItems.value = []
@@ -350,6 +353,7 @@ const handleInput = (e: Event) => {
   const target = e.target as HTMLInputElement
   const { value } = target
 
+  bypassSearchFilter.value = false
   searchTerm.value = value
   dropdownVisible.value = true
   if (!isMultiple.value) {
@@ -532,9 +536,9 @@ const handleSingleSelection = (item: Record<string, unknown>) => {
   selectItem(item)
   dropdownVisible.value = false
 
-  // Focus input after a short delay to prevent dropdown from reopening
+  // Blur input after selection so next interaction starts from a clean focus state.
   setTimeout(() => {
-    focusInput()
+    handleBlurInput()
   }, 100)
 }
 
@@ -591,14 +595,19 @@ const handleDropdownScroll = (event: Event) => {
 
 const handleInputFocus = () => {
   inputHasFocus.value = true
-  // Only open dropdown if an item hasn't been selected and there are items to show
-  if ((isMultiple.value || !selectedItem.value) && displayedItems.value.length > 0) {
+  if (!isMultiple.value && !!selectedItem.value) {
+    bypassSearchFilter.value = true
+    filterAndPaginate()
+  }
+  // Open dropdown on focus whenever there are items to show.
+  if (displayedItems.value.length > 0) {
     dropdownVisible.value = true
   }
 }
 
 const handleInputBlur = () => {
   inputHasFocus.value = false
+  bypassSearchFilter.value = false
 }
 
 const handleListKeyDown = (e: KeyboardEvent) => {
@@ -831,7 +840,7 @@ defineExpose<{
               v-if="multiple && showSelectedToggle && selectedItems.length > 0"
               :label="`${selectedToggleLabel} (${selectedItems.length})`"
               :checked="showSelectedOnly"
-              :disableFocusOutline="true"
+              :disablePseudoStates="true"
               @change="handleToggleSelectedOnly"
             />
           </div>
@@ -855,14 +864,19 @@ defineExpose<{
                 :style="optionPaddingStyle(item)"
                 v-html="handleMatchingString(item)"
               ></div>
-              <div v-else :class="[labelClasses, listItemClasses]" :style="optionPaddingStyle(item)">
+              <div
+                v-else
+                @click="() => handleMultipleSelectionChange(item)"
+                :class="[labelClasses, listItemClasses]"
+                :style="optionPaddingStyle(item)"
+              >
                 <FdsCheckbox
                   v-if="multiple"
                   :id="`search-select-radio-${index}`"
                   :name="`search-select-checkbox-group-${inputId}`"
                   :checked="isItemSelected(item)"
                   :tabindex="-1"
-                  :disableFocusOutline="true"
+                  :disablePseudoStates="true"
                   class="mb-0!"
                   @change="() => handleMultipleSelectionChange(item)"
                 >
@@ -875,7 +889,7 @@ defineExpose<{
                   :value="index"
                   :checked="!!selectedItem && getItemIdentifier(selectedItem) === getItemIdentifier(item)"
                   :tabindex="-1"
-                  :disableFocusOutline="true"
+                  :disablePseudoStates="true"
                   class="mb-0!"
                   @change="() => handleSingleSelection(item)"
                   @keydown.enter="(e) => handleClick(e, item)"

package/src/components/FdsSearchSelectPro/useSearchSelectProItems.ts

@@ -7,6 +7,7 @@ interface UseSearchSelectProItemsArgs {
   props: FdsSearchSelectProProps
   searchFields: ComputedRef<string[]>
   searchTerm: Ref<string>
+  bypassSearchFilter: Ref<boolean>
   showSelectedOnly: Ref<boolean>
   selectedItems: Ref<SearchSelectItem[]>
   isMultiple: ComputedRef<boolean>
@@ -17,6 +18,7 @@ export const useSearchSelectProItems = ({
   props,
   searchFields,
   searchTerm,
+  bypassSearchFilter,
   showSelectedOnly,
   selectedItems,
   isMultiple,
@@ -255,6 +257,7 @@ export const useSearchSelectProItems = ({
   }
 
   const matchesSearchTerm = (item: SearchSelectItem): boolean => {
+    if (bypassSearchFilter.value) return true
     if (!searchTerm.value) return true
 
     const searchValue = isPid.value ? searchTerm.value.replace(/\D/g, '') : searchTerm.value
@@ -274,6 +277,7 @@ export const useSearchSelectProItems = ({
   }
 
   const matchesDividerSearchTerm = (item: SearchSelectItem): boolean => {
+    if (bypassSearchFilter.value) return false
     if (!isDividerItem(item) || !searchTerm.value) return false
 
     const searchValue = isPid.value ? searchTerm.value.replace(/\D/g, '') : searchTerm.value
@@ -288,7 +292,7 @@ export const useSearchSelectProItems = ({
   }
 
   const filterWithDividerGroups = (sourceData: SearchSelectItem[]): SearchSelectItem[] => {
-    if (!searchTerm.value) return sourceData
+    if (bypassSearchFilter.value || !searchTerm.value) return sourceData
 
     const matched: SearchSelectItem[] = []
     let currentDivider: SearchSelectItem | null = null
@@ -360,7 +364,10 @@ export const useSearchSelectProItems = ({
       displayedItems.value = effectiveLimit !== null ? matchedArray.slice(0, effectiveLimit) : matchedArray
     }
 
-    onTotal(matchingItems.value.length)
+    const totalMatchingCount = matchingItems.value.filter(
+      (item) => props.dividerSelectable || !isDividerItem(item),
+    ).length
+    onTotal(totalMatchingCount)
   }
 
   const resetVisibleItemsLimit = () => {

package/src/components/Form/FdsCheckbox/FdsCheckbox.vue

@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<FdsCheckboxProps>(), {
   class: undefined,
   dataTestid: undefined,
   inputClass: undefined,
-  disableFocusOutline: false,
+  disablePseudoStates: false,
 })
 
 const emit = defineEmits<{
@@ -71,15 +71,19 @@ const externalClass = computed(() => props.class ?? attrs.class)
 const wrapperClasses = computed(() => ['block relative flex items-center mb-2 last:mb-0'])
 const innerWrapperClasses = computed(() => [
   'flex p-0.5 items-start rounded-md',
-  'hover:bg-blue_t-100 active:bg-blue_t-200',
-  !props.disableFocusOutline &&
-    '[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500',
+  !props.disablePseudoStates && 'hover:bg-blue_t-100 active:bg-blue_t-200',
+  props.disablePseudoStates
+    ? '[&:has(:focus)]:outline-none [&:has(:focus-visible)]:outline-none'
+    : '[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500',
   props.disabled && 'hover:bg-transparent active:bg-transparent',
 ])
 
 const inputClasses = computed(() => [
   'rounded-md transition-colors duration-200 accent-blue-500 m-[3px]',
-  'peer z-2 bg-white min-w-[18px] min-h-[18px] focus-visible:outline-none',
+  'peer z-2 bg-white min-w-[18px] min-h-[18px]',
+  props.disablePseudoStates
+    ? 'focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0'
+    : 'focus-visible:outline-none',
   props.disabled && 'cursor-not-allowed',
   props.inputClass,
 ])

package/src/components/Form/FdsCheckbox/types.ts

@@ -15,8 +15,8 @@ export interface FdsCheckboxProps {
   name?: string
   dataTestid?: string
   inputClass?: string | Record<string, boolean> | Array<string | Record<string, boolean>>
-  // Disable focus outline - Example: Use when checkbox is inside a list that has a focus outline
-  disableFocusOutline?: boolean
+  // Disable pseudo states (hover, active, focus, focus-visible)
+  disablePseudoStates?: boolean
   // Override event handlers with correct types
   onInput?: ((value: boolean) => void) | Array<(value: boolean) => void>
   onChange?: ((value: boolean) => void) | Array<(value: boolean) => void>

package/src/components/Form/FdsRadio/FdsRadio.vue

@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<FdsRadioProps>(), {
   class: undefined,
   dataTestid: undefined,
   inputClass: undefined,
-  disableFocusOutline: false,
+  disablePseudoStates: false,
 })
 
 const emit = defineEmits<{
@@ -104,14 +104,18 @@ function handleChange(e: Event) {
 const wrapperClasses = computed(() => ['block relative flex items-center mb-2 last:mb-0'])
 const innerWrapperClasses = computed(() => [
   'flex p-0.5 items-start rounded-l-xl rounded-r-md',
-  'hover:bg-blue_t-100 active:bg-blue_t-200',
-  !props.disableFocusOutline &&
-    '[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500',
+  !props.disablePseudoStates && 'hover:bg-blue_t-100 active:bg-blue_t-200',
+  props.disablePseudoStates
+    ? '[&:has(:focus)]:outline-none [&:has(:focus-visible)]:outline-none'
+    : '[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500',
   props.disabled && 'hover:bg-transparent active:bg-transparent',
 ])
 
 const inputClasses = computed(() => [
-  'peer z-2 bg-white min-w-[20px] min-h-[20px] focus-visible:outline-none rounded-full accent-blue-500',
+  'peer z-2 bg-white min-w-[20px] min-h-[20px] rounded-full accent-blue-500',
+  props.disablePseudoStates
+    ? 'focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0'
+    : 'focus-visible:outline-none',
   props.disabled && 'cursor-not-allowed',
   props.inputClass,
 ])

package/src/components/Form/FdsRadio/types.ts

@@ -14,8 +14,8 @@ export interface FdsRadioProps {
   tabindex?: number | string
   autofocus?: boolean
   inputClass?: string | Record<string, boolean> | Array<string | Record<string, boolean>>
-  // Disable focus outline - Example: Use when radio is inside a list that has a focus outline
-  disableFocusOutline?: boolean
+  // Disable pseudo states (hover, active, focus, focus-visible)
+  disablePseudoStates?: boolean
   // Override event handlers with correct types
   onInput?:
     | ((value: string | number | boolean | null) => void)