frappe-ui 1.0.0-beta.72 → 1.0.0-beta.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.72",
+  "version": "1.0.0-beta.73",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"

package/src/components/DatePicker/DatePicker.vue

@@ -114,7 +114,9 @@ defineSlots<DatePickerSlots>()
 // ── Popover open state ───────────────────────────────────────────────────────
 
 const shellRef = ref<PickerShellExposed | null>(null)
-const isOpen = ref(false)
+// Seeded from the prop, so a parent that mounts the picker with `open` already
+// true gets an open panel. The watch below only sees later changes.
+const isOpen = ref(props.open === true)
 
 watch(
   () => props.open,

package/src/components/DatePicker/DateRangePicker.vue

@@ -122,7 +122,9 @@ defineSlots<DateRangePickerSlots>()
 // ── Popover open state ───────────────────────────────────────────────────────
 
 const shellRef = ref<PickerShellExposed | null>(null)
-const isOpen = ref(false)
+// Seeded from the prop, so a parent that mounts the picker with `open` already
+// true gets an open panel. The watch below only sees later changes.
+const isOpen = ref(props.open === true)
 
 watch(
   () => props.open,

package/src/components/DatePicker/DateTimePicker.vue

@@ -134,7 +134,9 @@ defineSlots<DateTimePickerSlots>()
 // ── Popover open state ───────────────────────────────────────────────────────
 
 const shellRef = ref<PickerShellExposed | null>(null)
-const isOpen = ref(false)
+// Seeded from the prop, so a parent that mounts the picker with `open` already
+// true gets an open panel. The watch below only sees later changes.
+const isOpen = ref(props.open === true)
 
 watch(
   () => props.open,

package/src/components/MultiSelect/MultiSelect.api.md

@@ -70,7 +70,7 @@
   },
   {
     name: 'loading',
-    description: 'Replaces the results with a loading state.',
+    description: 'Marks a fetch as in flight. With the search row showing, a spinner appears\nin it and the options you passed stay selectable; under `hide-search` a\nloading row replaces the results instead.',
     required: false,
     type: 'boolean',
     default: 'false'

package/src/components/MultiSelect/MultiSelect.md

@@ -37,7 +37,9 @@ Use `#search-prefix` and `#search-suffix` to add content around the popover's se
 <ComponentPreview name="MultiSelect-SearchSlots" />
 
 ## Server Search
-Fetch options from a server as the user types. Bind `v-model:query`, debounce the request, and feed the results back into `:options`. The `:loading` prop swaps the result body for a loading state. Four things to watch for: pass `:filterable="false"` so the client doesn't substring-filter what the server already matched, drop stale responses with a request id so a slower earlier query can't overwrite the latest results, merge currently-selected items into the options array so chips stay resolvable after the query narrows the list, and clear the query yourself when the popover opens — see the note below on who owns it.
+Fetch options from a server as the user types. Bind `v-model:query`, debounce the request, and feed the results back into `:options`. Four things to watch for: pass `:filterable="false"` so the client doesn't substring-filter what the server already matched, drop stale responses with a request id so a slower earlier query can't overwrite the latest results, merge currently-selected items into the options array so chips stay resolvable after the query narrows the list, and clear the query yourself when the popover opens — see the note below on who owns it.
+
+The `:loading` prop shows a spinner in the search row and leaves the options you passed rendering and selectable, so the user can go on picking from the previous results while the next ones arrive. Under `hide-search` there is no search row to put the spinner in, so a loading row replaces the results instead. Either way the empty state is suppressed while loading, so an in-flight fetch never reads as "No results". The popover carries a bare `data-loading` attribute while the fetch is open, so you can style the wait yourself.
 
 <ComponentPreview name="MultiSelect-AsyncOptions" />
 

package/src/components/MultiSelect/types.ts

@@ -90,7 +90,11 @@ export interface MultiSelectProps extends InputLabelingProps {
   /** Hides the in-popover search input. */
   hideSearch?: boolean
 
-  /** Replaces the results with a loading state. */
+  /**
+   * Marks a fetch as in flight. With the search row showing, a spinner appears
+   * in it and the options you passed stay selectable; under `hide-search` a
+   * loading row replaces the results instead.
+   */
   loading?: boolean
 
   /**

package/src/components/TabButtons/TabButtons.md

@@ -64,6 +64,33 @@ items.
 
 <ComponentPreview name="TabButtons-PrefixSuffix" />
 
+## Template ref
+
+`focus()` is the one method every focusable control in the library exposes. It
+moves focus to the selected option, or to the first enabled one when nothing is
+selected — the same tab a `Tab` press reaches, since the group is one tabstop.
+It takes the native `FocusOptions`, so `focus({ preventScroll: true })` moves
+focus without scrolling the tab into view.
+
+Disabled options are skipped. A group with no options, or with every option
+disabled, has nothing to focus and the call does nothing.
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+
+const view = useTemplateRef('view')
+
+function reset() {
+  view.value?.focus()
+}
+</script>
+
+<template>
+  <TabButtons ref="view" v-model="value" :options="options" />
+</template>
+```
+
 ## Styling a single tab
 
 Each tab exposes data-attribute hooks for styling:

package/src/components/TabButtons/TabButtons.vue

@@ -26,6 +26,7 @@ import type { BrowserTabBase } from '../shared/tabs/pillTypes'
 import type {
   TabButton,
   TabButtonsEmits,
+  TabButtonsExposed,
   TabButtonsProps,
   TabButtonsSlots,
   TabButtonValue,
@@ -147,15 +148,19 @@ const indicatorRect = ref<{
 // slides in on mount.
 const indicatorAnimated = ref(false)
 
+// The rendered tab itself — the `<button>`, `<a href>` or `<RouterLink>` that
+// takes focus and that the indicator measures. Not the track around it, and
+// not the `Pill` inside it.
+const TAB_BUTTON = '[data-slot="tab-button"]'
+const ACTIVE_TAB_BUTTON = `${TAB_BUTTON}[data-state="active"]`
+
 function measureIndicator() {
   const track = trackRef.value
   if (!track || !hasIndicator.value) {
     indicatorRect.value = null
     return
   }
-  const checked = track.querySelector<HTMLElement>(
-    '[data-slot="tab-button"][data-state="active"]',
-  )
+  const checked = track.querySelector<HTMLElement>(ACTIVE_TAB_BUTTON)
   if (!checked) {
     indicatorRect.value = null
     return
@@ -306,6 +311,24 @@ function tabElementProps(button: (typeof resolvedButtons.value)[number]) {
   }
   return { type: 'button' as const, disabled: button.disabled }
 }
+
+// INP-Q5: the group is one tabstop, so focus goes to the selected option, or
+// to the first enabled one when nothing is selected — where a Tab press lands.
+// A disabled option is skipped whichever form it renders as: `tabElement`
+// gives a disabled `route`/`href` option a real disabled `<button>`, which
+// cannot take focus at all. With nothing left to focus the call does nothing.
+defineExpose<TabButtonsExposed>({
+  focus: (options?: FocusOptions) => {
+    const track = trackRef.value
+    if (!track) return
+    const target =
+      track.querySelector<HTMLElement>(
+        `${ACTIVE_TAB_BUTTON}:not([data-disabled])`,
+      ) ??
+      track.querySelector<HTMLElement>(`${TAB_BUTTON}:not([data-disabled])`)
+    target?.focus(options)
+  },
+})
 </script>
 
 <template>

package/src/components/TabButtons/index.ts

@@ -3,6 +3,7 @@ export type {
   TabButton,
   TabButtonIcon,
   TabButtonsEmits,
+  TabButtonsExposed,
   TabButtonsProps,
   TabButtonsSlots,
   TabButtonValue,

package/src/components/TabButtons/types.ts

@@ -1,3 +1,4 @@
+import type { InputExposed } from '../../composables/inputTypes'
 import type { RouteDestination } from '../shared/route'
 import type {
   TabIcon,
@@ -48,6 +49,15 @@ export interface TabButtonsEmits {
   'update:modelValue': [value: TabButtonValue]
 }
 
+/**
+ * What a `<TabButtons>` template ref hands back. `focus()` moves focus to the
+ * selected option, or to the first enabled one when nothing is selected —
+ * the same element a `Tab` press reaches, since the group is one tabstop.
+ * A group with no options, or with every option disabled, has nothing to
+ * focus and the call does nothing.
+ */
+export interface TabButtonsExposed extends InputExposed {}
+
 export interface TabButtonsSlots {
   /** Slot before the tab button label. */
   prefix?: (props: {

package/src/components/Tabs/Tabs.vue

@@ -2,12 +2,15 @@
 import {
   computed,
   getCurrentInstance,
+  inject,
+  onUnmounted,
   provide,
   ref,
   shallowRef,
   watch,
 } from 'vue'
 import { TabsRoot } from 'reka-ui'
+import { routerKey } from 'vue-router'
 import TabList from './TabList.vue'
 import TabTrigger from './TabTrigger.vue'
 import TabPanel from './TabPanel.vue'
@@ -212,6 +215,38 @@ function triggerFor(value: TabValue) {
   return triggers.value.find((t) => t.value() === value)
 }
 
+// The override lasts until the route leaves the page the user clicked from.
+// Two things end it.
+//
+// A navigation that lands on a different path. That covers `/inbox` →
+// `/sent`, and `/inbox` → `/inbox/42` too, where the same tab stays matched
+// but the URL is a page the clicked tab does not stand for.
+//
+// A navigation that did not land — aborted by a guard, cancelled by a newer
+// one, or a duplicate of the current URL — leaves `failure` set and changed
+// nothing the user can see, so it must not throw away their click.
+//
+// `inject` rather than `useRouter`: Tabs is used with no router at all far
+// more often than with one, and `useRouter` warns when the injection is
+// missing.
+const router = inject(routerKey, null)
+if (router) {
+  const stopRouteReset = router.afterEach((to, from, failure) => {
+    if (failure) return
+    if (to.path !== from.path) routeOverride.value = null
+  })
+  onUnmounted(stopRouteReset)
+}
+
+// And a change in which tab the URL matches, whatever moved it. That includes
+// a change with no navigation behind it, which the hook above cannot see — a
+// trigger's `route` prop changing, or a routed trigger mounting that matches
+// the current URL. Both have always ended the click.
+//
+// What neither rule catches keeps the click: a query-only or hash-only write
+// that leaves the same tab matched. A panel that keeps its own state in the
+// URL — a page number, a filter — writes exactly that, and clearing there
+// would throw the user out of the panel they are standing in.
 watch(routeSelected, () => {
   routeOverride.value = null
 })

package/src/components/TimePicker/TimePicker.vue

@@ -97,7 +97,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import {
   PopoverAnchor,
   PopoverContent,
@@ -195,7 +195,9 @@ function onInteractOutside(event: Event) {
 }
 const uid = Math.random().toString(36).slice(2, 9)
 
-const isOpen = ref(false)
+// Seeded from the prop, so a parent that mounts the picker with `open` already
+// true gets an open panel. The watch below only sees later changes.
+const isOpen = ref(props.open === true)
 
 // Canonical 24-hour value (`HH:mm` or `HH:mm:ss`) — the source of truth.
 const canonicalValue = ref<string>(
@@ -522,16 +524,28 @@ function scrollOnOpen() {
   })
 }
 
+function onOpened() {
+  highlightIndex.value = -1
+  scrollOnOpen()
+}
+
 watch(isOpen, (open) => {
   emit('update:open', open)
   if (open) {
-    highlightIndex.value = -1
-    scrollOnOpen()
+    onOpened()
   } else {
     isTyping.value = false
   }
 })
 
+// A picker mounted with `open` already true never crosses the watch above, so
+// the open-time work — the highlight seed and the scroll to the current value —
+// runs here instead. No `update:open`: the parent is the one that asked for an
+// open panel.
+onMounted(() => {
+  if (isOpen.value) onOpened()
+})
+
 watch(
   () => props.open,
   (val) => {

package/src/components/shared/picker/PickerShell.vue

@@ -61,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import Popover from '../../Popover/Popover.vue'
 import { TextInput } from '../../TextInput'
 import { useReactiveSlots } from '../../../composables/useReactiveSlots'
@@ -92,9 +92,12 @@ const emit = defineEmits<{
   /** Signal that the parent should move keyboard focus into the popover
    *  content (e.g. into a calendar grid). Fired:
    *  - When the user presses ↓ on the trigger.
-   *  - When the popover opens with a custom trigger (no `TextInput` to type
-   *    into, so focus should jump straight into the content).
-   *  The default trigger keeps focus on the `TextInput` for typing. */
+   *  - When a gesture opens the popover and the trigger is a custom one (no
+   *    `TextInput` to type into, so focus should jump straight into the
+   *    content).
+   *  The default trigger keeps focus on the `TextInput` for typing. A shell
+   *  that is already open on its first render never fires this: nobody asked
+   *  for focus to move. */
   (e: 'requestFocus'): void
 }>()
 
@@ -174,19 +177,27 @@ const triggerSlotProps = computed<PickerShellTriggerSlotProps>(() => ({
 
 const hasCustomTrigger = computed(() => !!slots.trigger)
 
+// `moveFocus` is false on the mount path. Every other route into `onOpened`
+// follows a gesture, and a panel the user just opened should take focus; a
+// panel that is simply part of the first render follows no gesture, so moving
+// focus would take it from wherever the page put it.
+function onOpened(moveFocus = true) {
+  emit('open')
+  nextTick(() => {
+    panelId.value = popoverRef.value?.contentEl?.id || undefined
+  })
+  // Custom triggers (e.g. a button) have no typing context — once the
+  // popover is open the user wants to interact with the content. Signal
+  // the parent to move focus there. The default `TextInput` trigger
+  // keeps its focus so the user can type, and only the explicit ↓
+  // handler emits `requestFocus`.
+  if (moveFocus && hasCustomTrigger.value) emit('requestFocus')
+}
+
 watch(open, (val, prev) => {
   if (val === prev) return
   if (val) {
-    emit('open')
-    nextTick(() => {
-      panelId.value = popoverRef.value?.contentEl?.id || undefined
-    })
-    // Custom triggers (e.g. a button) have no typing context — once the
-    // popover is open the user wants to interact with the content. Signal
-    // the parent to move focus there. The default `TextInput` trigger
-    // keeps its focus so the user can type, and only the explicit ↓
-    // handler emits `requestFocus`.
-    if (hasCustomTrigger.value) emit('requestFocus')
+    onOpened()
   } else {
     // Restore focus to the trigger input if the popover content had focus
     // (Esc, date selection in auto-close mode). Click-outside leaves focus
@@ -202,6 +213,16 @@ watch(open, (val, prev) => {
   }
 })
 
+// A shell mounted with `open` already true never crosses the watch above, so
+// the open-time work — the panel id behind `aria-controls`, the parent's draft
+// initialization — runs here instead. No `update:open`: the parent is the one
+// that asked for an open panel. Focus stays put: the default trigger does not
+// take focus at mount either, because `:auto-focus="false"` cancels reka's
+// mount autofocus, and a page has no way to know the panel was coming.
+onMounted(() => {
+  if (open.value) onOpened(false)
+})
+
 defineExpose<PickerShellExposed>({
   open: () => setOpen(true),
   close,

package/src/molecules/list/List.vue

@@ -129,8 +129,13 @@ if (import.meta.env.DEV) {
   )
 }
 
+// Membership is asked once per rendered row and once per universe entry on
+// every select-all recompute, so scanning the `selection` array each time costs
+// rows x selection. The Set is rebuilt only when `selection` itself changes.
+const selectionSet = computed(() => new Set(selection.value))
+
 function isSelected(value: string) {
-  return selection.value.includes(value)
+  return selectionSet.value.has(value)
 }
 
 function toggleSelection(value: string) {
@@ -157,9 +162,11 @@ function setAllValues(values: string[]) {
 const selectAllState = computed<'none' | 'some' | 'all'>(() => {
   const universe = allValues.value
   if (!universe.length) return 'none'
-  const selectedCount = universe.filter((value) =>
-    selection.value.includes(value),
-  ).length
+  const selected = selectionSet.value
+  let selectedCount = 0
+  for (const value of universe) {
+    if (selected.has(value)) selectedCount++
+  }
   if (selectedCount === 0) return 'none'
   return selectedCount === universe.length ? 'all' : 'some'
 })

package/src/molecules/list/ListRows.vue

@@ -90,13 +90,19 @@ const { rows, wrapperProps, anchor } = useVirtualRows(
 // every row's value — even the virtualized ones that aren't mounted. Uses the
 // same `getItemValue` as the render `:key` and scoped `value` slot prop, so
 // row identity has one source.
-watch(
-  () => props.items,
-  (items) => {
-    context?.setAllValues(items.map((item, i) => getItemValue(item, i)))
-  },
-  { immediate: true },
+//
+// Deriving it through a computed keeps the two in step: the watcher then tracks
+// what identity is actually made of — the array's entries, the active `rowKey`,
+// and the item fields that key reads — so a push, a splice, a swapped entry, a
+// renamed id or a different `rowKey` all move the universe. Watching
+// `props.items` alone only sees the array swapped for another one, and an item
+// field nothing reads for identity stays untracked: this is not a deep watch.
+const itemValues = computed(() =>
+  props.items.map((item, i) => getItemValue(item, i)),
 )
+watch(itemValues, (values) => context?.setAllValues(values), {
+  immediate: true,
+})
 onBeforeUnmount(() => context?.setAllValues([]))
 
 function getItemValue(item: T, index: number) {