frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/Combobox/Combobox.vue

@@ -18,7 +18,7 @@ import {
   FocusScope,
 } from 'reka-ui'
 import OptionIcon from '../shared/selection/OptionIcon.vue'
-import '../shared/selection/popoverMotion.css'
+import PopoverPanel from '../shared/popover/PopoverPanel.vue'
 import ComboboxResults from './ComboboxResults.vue'
 import { usePopoverMotion } from '../../composables/usePopoverMotion'
 import { useInputLabeling } from '../../composables/useInputLabeling'
@@ -36,7 +36,7 @@ import type {
   ComboboxProps,
   ComboboxSelectableOption,
   ComboboxSlots,
-  ComboboxTriggerSlotProps,
+  ComboboxControlSlotProps,
 } from './types'
 import {
   buildCustomOptionContext,
@@ -111,10 +111,10 @@ const {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      props.description ||
-      hasError.value ||
-      slots.label ||
-      slots.description,
+    props.description ||
+    hasError.value ||
+    slots.label ||
+    slots.description,
   )
 })
 
@@ -248,24 +248,28 @@ function clearSelection() {
   emit('update:selectedOption', null)
 }
 
-function toggleOpen() {
+function handleTriggerClick() {
+  setOpen(!open.value)
+}
+
+function setOpen(value: boolean) {
   if (props.disabled) return
-  open.value = !open.value
+  open.value = value
 }
 
-// Shared shape for the #trigger, #prefix, and #suffix slots. `clearSelection`
-// and `toggleOpen` are exposed alongside the read-only fields so consumers
+// Shared shape for the #trigger, #prefix, #suffix, and #footer slots. `clearSelection`
+// and `setOpen` are exposed alongside the read-only fields so consumers
 // can wire clear / open affordances (e.g. a custom #trigger or an inline
 // button in #suffix) without hoisting into #trigger or managing the model
 // and open state themselves.
-const triggerSlotProps = computed<ComboboxTriggerSlotProps>(() => ({
+const controlSlotProps = computed<ComboboxControlSlotProps>(() => ({
   open: open.value,
   disabled: Boolean(props.disabled),
   query: typedQuery.value,
   selectedOption: selectedOption.value,
   displayValue: displayValue.value,
   clearSelection,
-  toggleOpen,
+  setOpen,
 }))
 
 function commitSelectableOption(value: string) {
@@ -371,7 +375,9 @@ function reset() {
 }
 
 function focus() {
-  const id = isButtonMode.value ? `${inputId.value}-search-input` : inputId.value
+  const id = isButtonMode.value
+    ? `${inputId.value}-search-input`
+    : inputId.value
   const el = document.getElementById(id) as HTMLInputElement | null
   el?.focus()
 }
@@ -428,7 +434,6 @@ defineSlots<ComboboxSlots>()
       :for-id="inputId"
       :label="label"
       :required="required"
-      class="text-p-sm font-medium text-ink-gray-7"
     >
       <template v-if="$slots.label" #default="slotProps">
         <slot name="label" v-bind="slotProps" />
@@ -442,27 +447,27 @@ defineSlots<ComboboxSlots>()
       there's no labeling, so bare usage keeps its flattened layout.
     -->
     <div :class="hasLabeling ? null : 'contents'">
-  <ComboboxRoot
-    ref="rootRef"
-    class="contents"
-    :model-value="internalModelValue"
-    :open="open"
-    :disabled="disabled"
-    :ignore-filter="true"
-    :open-on-focus="openOnFocus"
-    :open-on-click="openOnClick"
-    @update:modelValue="handleRootModelValueChange"
-    @update:open="handleRootOpenChange"
-  >
-    <!--
+      <ComboboxRoot
+        ref="rootRef"
+        class="contents"
+        :model-value="internalModelValue"
+        :open="open"
+        :disabled="disabled"
+        :ignore-filter="true"
+        :open-on-focus="openOnFocus"
+        :open-on-click="openOnClick"
+        @update:modelValue="handleRootModelValueChange"
+        @update:open="handleRootOpenChange"
+      >
+        <!--
       Two trigger modes, picked automatically:
         1. Default (`trigger="input"`): the trigger IS the search input.
         2. Button mode (`trigger="button"` or `#trigger` slot provided):
            caller's button — or the built-in auto-wired Button — opens the
            popover; the search input moves into the popover header.
     -->
-    <template v-if="isButtonMode">
-      <!--
+        <template v-if="isButtonMode">
+          <!--
         reka's `ComboboxTrigger` hardcodes `tabindex="-1"` — it assumes
         the ComboboxInput is the tab-stop and the trigger is just a
         mouse-clickable chevron. That's wrong for button mode where
@@ -474,18 +479,18 @@ defineSlots<ComboboxSlots>()
         to the child via `as-child` — this makes consumer-supplied
         `#trigger` elements "just work" without wiring handlers.
       -->
-      <ComboboxAnchor
-        as-child
-        @click="toggleOpen"
-        @pointerdown="markPointerDown"
-      >
-        <slot
-          v-if="$slots.trigger"
-          name="trigger"
-          v-bind="triggerSlotProps"
-        />
+          <ComboboxAnchor
+            as-child
+            @click="handleTriggerClick"
+            @pointerdown="markPointerDown"
+          >
+            <slot
+              v-if="$slots.trigger"
+              name="trigger"
+              v-bind="controlSlotProps"
+            />
 
-        <!--
+            <!--
           Rendered as a raw `<button>` (not the `<Button>` component) so
           the prefix / label / chevron are direct flex children and
           `justify-between` + label `flex-1` align cleanly. Wrapping in
@@ -493,30 +498,30 @@ defineSlots<ComboboxSlots>()
           `<span>`, which is content-sized and would center the label in
           `w-full` buttons.
         -->
-        <button
-          v-else
-          type="button"
-          :class="[
-            triggerClasses,
-            'justify-between',
-            disabled && 'cursor-not-allowed',
-            hasLabeling ? 'w-full' : null,
-            hasLabeling ? null : (attrs.class as any),
-          ]"
-          :style="hasLabeling ? null : (attrs.style as any)"
-          :disabled="disabled"
-          data-slot="trigger"
-          :data-state="open ? 'open' : 'closed'"
-          :data-variant="variant"
-          :data-size="size"
-          :data-invalid="hasError ? 'true' : undefined"
-          :data-required="required ? 'true' : undefined"
-          :id="inputId"
-          aria-haspopup="listbox"
-          :aria-expanded="open"
-          v-bind="inputAriaAttrs"
-        >
-          <!--
+            <button
+              v-else
+              type="button"
+              :class="[
+                triggerClasses,
+                'justify-between',
+                disabled && 'cursor-not-allowed',
+                hasLabeling ? 'w-full' : null,
+                hasLabeling ? null : (attrs.class as any),
+              ]"
+              :style="hasLabeling ? null : (attrs.style as any)"
+              :disabled="disabled"
+              data-slot="trigger"
+              :data-state="open ? 'open' : 'closed'"
+              :data-variant="variant"
+              :data-size="size"
+              :data-invalid="hasError ? 'true' : undefined"
+              :data-required="required ? 'true' : undefined"
+              :id="inputId"
+              aria-haspopup="listbox"
+              :aria-expanded="open"
+              v-bind="inputAriaAttrs"
+            >
+              <!--
             Prefix precedence on the trigger:
               1. selected + `#item-prefix` slot → reuse the list's per-item
                  prefix renderer so the trigger matches the dropdown row
@@ -525,135 +530,124 @@ defineSlots<ComboboxSlots>()
                  string / emoji / component).
               3. not selected + `#prefix` slot → user's placeholder affordance.
           -->
-          <template v-if="selectedOption && $slots['item-prefix']">
-            <slot
-              name="item-prefix"
-              v-bind="{
-                item: selectedOption,
-                query: '',
-                selected: true,
-              }"
-            />
-          </template>
-          <OptionIcon
-            v-else-if="selectedOption?.icon"
-            :icon="selectedOption.icon"
-          />
-          <slot
-            v-else-if="!selectedOption && $slots.prefix"
-            name="prefix"
-            v-bind="triggerSlotProps"
-          />
-
-          <span
+              <template v-if="selectedOption && $slots['item-prefix']">
+                <slot
+                  name="item-prefix"
+                  v-bind="{
+                    item: selectedOption,
+                    query: '',
+                    selected: true,
+                  }"
+                />
+              </template>
+              <OptionIcon
+                v-else-if="selectedOption?.icon"
+                :icon="selectedOption.icon"
+              />
+              <slot
+                v-else-if="!selectedOption && $slots.prefix"
+                name="prefix"
+                v-bind="controlSlotProps"
+              />
+
+              <span
+                :class="[
+                  'min-w-0 flex-1 truncate text-left font-normal',
+                  !selectedOption && 'text-ink-gray-4',
+                ]"
+              >
+                {{ selectedOption?.label ?? placeholder }}
+              </span>
+
+              <slot name="suffix" v-bind="controlSlotProps">
+                <span
+                  :class="[
+                    'lucide-chevron-down size-4 shrink-0 text-ink-gray-4 transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]',
+                    open && 'rotate-180',
+                  ]"
+                />
+              </slot>
+            </button>
+          </ComboboxAnchor>
+        </template>
+
+        <template v-else>
+          <ComboboxAnchor
+            data-slot="trigger"
+            :data-state="open ? 'open' : 'closed'"
+            :data-disabled="disabled ? '' : undefined"
+            :data-variant="variant"
+            :data-size="size"
+            :data-invalid="hasError ? 'true' : undefined"
+            :data-required="required ? 'true' : undefined"
             :class="[
-              'min-w-0 flex-1 truncate text-left font-normal',
-              !selectedOption && 'text-ink-gray-4',
+              triggerClasses,
+              hasLabeling ? 'w-full' : null,
+              hasLabeling ? null : (attrs.class as any),
             ]"
+            :style="hasLabeling ? null : (attrs.style as any)"
+            @pointerdown="markPointerDown"
           >
-            {{ selectedOption?.label ?? placeholder }}
-          </span>
-
-          <slot
-            name="suffix"
-            v-bind="triggerSlotProps"
-          >
-            <span
-              :class="[
-                'lucide-chevron-down size-4 shrink-0 text-ink-gray-4 transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]',
-                open && 'rotate-180',
-              ]"
-            />
-          </slot>
-        </button>
-      </ComboboxAnchor>
-    </template>
-
-    <template v-else>
-      <ComboboxAnchor
-        data-slot="trigger"
-        :data-state="open ? 'open' : 'closed'"
-        :data-disabled="disabled ? '' : undefined"
-        :data-variant="variant"
-        :data-size="size"
-        :data-invalid="hasError ? 'true' : undefined"
-        :data-required="required ? 'true' : undefined"
-        :class="[
-          triggerClasses,
-          hasLabeling ? 'w-full' : null,
-          hasLabeling ? null : (attrs.class as any),
-        ]"
-        :style="hasLabeling ? null : (attrs.style as any)"
-        @pointerdown="markPointerDown"
-      >
-        <!--
+            <!--
           Prefix precedence matches button mode: selected option's
           `#item-prefix` → selected option's icon auto-render →
           user's `#prefix` slot.
         -->
-        <template v-if="selectedOption && $slots['item-prefix']">
-          <slot
-            name="item-prefix"
-            v-bind="{ item: selectedOption, query: '', selected: true }"
-          />
+            <template v-if="selectedOption && $slots['item-prefix']">
+              <slot
+                name="item-prefix"
+                v-bind="{ item: selectedOption, query: '', selected: true }"
+              />
+            </template>
+            <OptionIcon
+              v-else-if="selectedOption?.icon"
+              :icon="selectedOption.icon"
+            />
+            <slot v-else name="prefix" v-bind="controlSlotProps" />
+
+            <ComboboxInput
+              :id="inputId"
+              v-bind="{ ...inputAttrs, ...inputAriaAttrs }"
+              data-slot="input"
+              :data-variant="variant"
+              :data-size="size"
+              :value="query"
+              :disabled="disabled"
+              :placeholder="placeholder"
+              :class="resolvedInputClasses"
+              @input="handleInputChange"
+              @focus="emit('focus', $event)"
+              @blur="emit('blur', $event)"
+              @keydown.enter="handleInputEnter"
+            />
+
+            <slot name="suffix" v-bind="controlSlotProps">
+              <ComboboxTrigger
+                :disabled="disabled"
+                data-slot="chevron"
+                class="inline-flex shrink-0 items-center justify-center text-ink-gray-4 outline-none transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] data-[state=open]:rotate-180"
+              >
+                <span class="lucide-chevron-down size-4 text-ink-gray-6" />
+              </ComboboxTrigger>
+            </slot>
+          </ComboboxAnchor>
         </template>
-        <OptionIcon
-          v-else-if="selectedOption?.icon"
-          :icon="selectedOption.icon"
-        />
-        <slot
-          v-else
-          name="prefix"
-          v-bind="triggerSlotProps"
-        />
-
-        <ComboboxInput
-          :id="inputId"
-          v-bind="{ ...inputAttrs, ...inputAriaAttrs }"
-          data-slot="input"
-          :data-variant="variant"
-          :data-size="size"
-          :value="query"
-          :disabled="disabled"
-          :placeholder="placeholder"
-          :class="resolvedInputClasses"
-          @input="handleInputChange"
-          @focus="emit('focus', $event)"
-          @blur="emit('blur', $event)"
-          @keydown.enter="handleInputEnter"
-        />
-
-        <slot
-          name="suffix"
-          v-bind="triggerSlotProps"
-        >
-          <ComboboxTrigger
-            :disabled="disabled"
-            data-slot="chevron"
-            class="inline-flex shrink-0 items-center justify-center text-ink-gray-4 outline-none transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] data-[state=open]:rotate-180"
+
+        <ComboboxPortal :to="portalTo">
+          <ComboboxContent
+            data-slot="content"
+            :data-variant="variant"
+            :data-size="size"
+            :class="[
+              'z-[100]',
+              !isButtonMode && 'min-w-[--reka-combobox-trigger-width]',
+            ]"
+            position="popper"
+            :side="side"
+            :align="resolvedAlign"
+            :side-offset="offset"
           >
-            <span class="lucide-chevron-down size-4 text-ink-gray-6" />
-          </ComboboxTrigger>
-        </slot>
-      </ComboboxAnchor>
-    </template>
-
-    <ComboboxPortal :to="portalTo">
-      <ComboboxContent
-        data-slot="content"
-        data-selection
-        :data-variant="variant"
-        :data-size="size"
-        :class="[
-          'z-[100]',
-          !isButtonMode && 'min-w-[--reka-combobox-trigger-width]',
-        ]"
-        position="popper"
-        :side="side"
-        :align="resolvedAlign"
-        :side-offset="offset"
-      >
-        <!--
+            <!--
           Why FocusScope lives here (inside ComboboxContent) and not around it:
 
           ComboboxContent is a <Presence> wrapper — it renders null when the
@@ -674,66 +668,58 @@ defineSlots<ComboboxSlots>()
           once the dialog trap is paused. In input mode we prevent it so the
           trigger input keeps focus while the list opens.
         -->
-        <FocusScope
-          as-child
-          @mount-auto-focus="handleFocusScopeMountAutoFocus"
-          @unmount-auto-focus.prevent
-        >
-          <div
-            data-slot="content-body"
-            :data-motion="contentMotion"
-            class="overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
-          >
-            <div
-              v-if="isButtonMode"
-              data-slot="content-search"
-              class="flex items-center gap-2 border-b border-outline-gray-1 px-3"
+            <FocusScope
+              as-child
+              @mount-auto-focus="handleFocusScopeMountAutoFocus"
+              @unmount-auto-focus.prevent
             >
-              <ComboboxInput
-                :id="`${inputId}-search-input`"
-                v-bind="inputAttrs"
-                data-slot="input"
-                :value="query"
-                :disabled="disabled"
-                :placeholder="placeholder"
-                class="min-w-0 flex-1 px-0 border-0 bg-transparent py-2 text-base text-ink-gray-8 outline-none placeholder:text-ink-gray-4 focus:ring-0"
-                @input="handleInputChange"
-                @focus="emit('focus', $event)"
-                @blur="emit('blur', $event)"
-                @keydown.enter="handleInputEnter"
-              />
-            </div>
-
-            <ComboboxResults
-              :groups="filteredGroups"
-              :size="size"
-              :query="typedQuery"
-              :model="model ?? null"
-              :loading="loading"
-              :empty-text="emptyText"
-              :show-create-option="showCreateOption"
-              :show-empty="showEmpty"
-              :slot-fns="slots"
-              :all-selectable-options="allSelectableOptions"
-              @select-custom="handleCustomItemSelect"
-              @select-create="handleCreateOptionSelect"
-            />
-
-            <div v-if="$slots.footer" data-slot="footer">
-              <slot
-                name="footer"
-                v-bind="{
-                  query: typedQuery,
-                  selectedOption,
-                  clearSelection,
-                }"
-              />
-            </div>
-          </div>
-        </FocusScope>
-      </ComboboxContent>
-    </ComboboxPortal>
-  </ComboboxRoot>
+              <PopoverPanel
+                :motion="contentMotion"
+                class="origin-[var(--reka-combobox-content-transform-origin)]"
+              >
+                <div
+                  v-if="isButtonMode"
+                  data-slot="content-search"
+                  class="flex items-center gap-2 border-b border-outline-gray-1 px-3"
+                >
+                  <ComboboxInput
+                    :id="`${inputId}-search-input`"
+                    v-bind="inputAttrs"
+                    data-slot="input"
+                    :value="query"
+                    :disabled="disabled"
+                    :placeholder="placeholder"
+                    class="min-w-0 flex-1 px-0 border-0 bg-transparent py-2 text-base text-ink-gray-8 outline-none placeholder:text-ink-gray-4 focus:ring-0"
+                    @input="handleInputChange"
+                    @focus="emit('focus', $event)"
+                    @blur="emit('blur', $event)"
+                    @keydown.enter="handleInputEnter"
+                  />
+                </div>
+
+                <ComboboxResults
+                  :groups="filteredGroups"
+                  :size="size"
+                  :query="typedQuery"
+                  :model="model ?? null"
+                  :loading="loading"
+                  :empty-text="emptyText"
+                  :show-create-option="showCreateOption"
+                  :show-empty="showEmpty"
+                  :slot-fns="slots"
+                  :all-selectable-options="allSelectableOptions"
+                  @select-custom="handleCustomItemSelect"
+                  @select-create="handleCreateOptionSelect"
+                />
+
+                <div v-if="$slots.footer" data-slot="footer">
+                  <slot name="footer" v-bind="controlSlotProps" />
+                </div>
+              </PopoverPanel>
+            </FocusScope>
+          </ComboboxContent>
+        </ComboboxPortal>
+      </ComboboxRoot>
     </div>
     <InputDescription
       v-if="showDescription || $slots.description"
@@ -752,10 +738,10 @@ defineSlots<ComboboxSlots>()
   outline: none !important;
 }
 
-/* Component-specific transform-origin; the rest of the motion lives in
-   shared/selection/popoverMotion.css. */
-[data-slot='content-body'][data-motion='animated'] {
-  transform-origin: var(--reka-combobox-content-transform-origin);
+/* Block clicks while the panel plays its exit animation (the shell + open/close
+   motion now come from PopoverPanel; only this component-specific rule remains). */
+[data-slot='content'][data-state='closed'] {
+  pointer-events: none;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/Combobox/ComboboxResults.vue

@@ -176,7 +176,7 @@ function handleSelect(item: NormalizedItem, event: Event) {
             <ComboboxLabel
               v-if="group.group && !group.hideLabel"
               data-slot="group-label"
-              class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-4"
+              class="flex h-7 items-center px-2 text-sm-medium text-ink-gray-4"
             >
               <component
                 :is="ItemSlotRender"

package/src/components/Combobox/stories/Clearable.vue

@@ -34,10 +34,10 @@ const values = reactive<Record<string, string>>({
 })
 
 const colourSwatch: Record<string, string> = {
-  gray: 'bg-surface-gray-5',
+  gray: 'bg-surface-gray-8',
   blue: 'bg-surface-blue-3',
   green: 'bg-surface-green-3',
-  red: 'bg-surface-red-5',
+  red: 'bg-surface-red-7',
 }
 
 const sizeDot: Record<string, string> = {

package/src/components/Combobox/stories/CreateNew.vue

@@ -67,7 +67,7 @@ function getBgClass(item: { label: string }) {
         />
         <span
           v-if="item.key === 'create'"
-          class="rounded-sm bg-surface-gray-5 lucide-tag"
+          class="rounded-sm bg-surface-gray-8 lucide-tag"
         />
       </template>
       <template #item-create="{ query }">

package/src/components/Combobox/stories/Footer.vue

@@ -41,12 +41,13 @@ const countries = [
       open-on-focus
       class="w-64"
     >
-      <template #footer="{ query, selectedOption, clearSelection }">
+      <template #footer="{ query, selectedOption, clearSelection, setOpen }">
         <div
           class="flex items-center justify-between border-t border-outline-gray-1 px-3 py-2 text-sm text-ink-gray-5"
         >
           <span v-if="query">
-            Searching “<span class="text-ink-gray-7">{{ query }}</span>”
+            Searching “<span class="text-ink-gray-7">{{ query }}</span
+            >”
           </span>
           <span v-else>{{ countries.length }} countries</span>
           <button
@@ -56,6 +57,13 @@ const countries = [
           >
             Clear
           </button>
+          <button
+            v-else
+            class="text-ink-gray-7 hover:text-ink-gray-8"
+            @click="setOpen(false)"
+          >
+            Close
+          </button>
         </div>
       </template>
     </Combobox>

package/src/components/Combobox/stories/InDialog.vue

@@ -43,7 +43,7 @@ const emojis = [
 
   <Dialog v-model="open">
     <template #body-title>
-      <h3 class="text-2xl font-semibold text-ink-gray-9">
+      <h3 class="text-3xl-semibold text-ink-gray-9">
         Combobox inside Dialog
       </h3>
     </template>