frappe-ui 1.0.0-beta.13 → 1.0.0-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.15",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": [

package/src/components/CodeEditor/CodeEditor.cy.ts

@@ -75,8 +75,12 @@ describe('CodeEditor', () => {
     cy.mount(CodeEditor, {
       props: { modelValue: 'frozen', disabled: true },
     }).then(({ wrapper }) => {
+      // `setProps` is synchronous JS, so it must be wrapped in `cy.then` to join
+      // the command queue *after* the first assertion — otherwise it flips the
+      // prop before that assertion runs and the initial `false` state is never
+      // observed (the flake this guards against).
       cy.get('.cm-content').should('have.attr', 'contenteditable', 'false')
-      wrapper.setProps({ disabled: false })
+      cy.then(() => wrapper.setProps({ disabled: false }))
       cy.get('.cm-content').should('have.attr', 'contenteditable', 'true')
     })
   })

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'
@@ -637,7 +637,6 @@ defineSlots<ComboboxSlots>()
         <ComboboxPortal :to="portalTo">
           <ComboboxContent
             data-slot="content"
-            data-selection
             :data-variant="variant"
             :data-size="size"
             :class="[
@@ -675,10 +674,9 @@ defineSlots<ComboboxSlots>()
               @mount-auto-focus="handleFocusScopeMountAutoFocus"
               @unmount-auto-focus.prevent
             >
-              <div
-                data-slot="content-body"
-                :data-motion="contentMotion"
-                class="overflow-hidden rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5"
+              <PopoverPanel
+                :motion="contentMotion"
+                class="origin-[var(--reka-combobox-content-transform-origin)]"
               >
                 <div
                   v-if="isButtonMode"
@@ -718,7 +716,7 @@ defineSlots<ComboboxSlots>()
                 <div v-if="$slots.footer" data-slot="footer">
                   <slot name="footer" v-bind="controlSlotProps" />
                 </div>
-              </div>
+              </PopoverPanel>
             </FocusScope>
           </ComboboxContent>
         </ComboboxPortal>
@@ -741,10 +739,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/DatePicker/DatePicker.vue

@@ -120,11 +120,9 @@ const emit = defineEmits<DatePickerEmits>()
 
 const slots = defineSlots<DatePickerSlots>()
 
-const POPOVER_CLASSES =
-  'rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5'
-const contentClass = computed(() =>
-  slots.actions ? `w-fit ${POPOVER_CLASSES}` : `w-56 ${POPOVER_CLASSES}`,
-)
+// Layout only — the elevated shell (rounded/bg/shadow/ring) is owned by
+// PopoverPanel inside PickerShell.
+const contentClass = computed(() => (slots.actions ? 'w-fit' : 'w-56'))
 
 // Cast strips @deprecated markers so internal back-compat reads don't trigger TS6385.
 const dp = props as unknown as LegacyDatePickerProps

package/src/components/DatePicker/DateRangePicker.vue

@@ -21,7 +21,7 @@
     :readonly="inputReadonly"
     :input-class="dp.inputClass"
     :display-label="displayLabel"
-    content-class="w-fit rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5"
+    content-class="w-fit"
     @blur="commitInput()"
     @enter="commitInput(true)"
     @open="onShellOpen"

package/src/components/DatePicker/DateTimePicker.vue

@@ -137,11 +137,9 @@ const emit = defineEmits<DateTimePickerEmits>()
 
 const slots = defineSlots<DateTimePickerSlots>()
 
-const POPOVER_CLASSES =
-  'rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5'
-const contentClass = computed(() =>
-  slots.actions ? `w-fit ${POPOVER_CLASSES}` : `w-56 ${POPOVER_CLASSES}`,
-)
+// Layout only — the elevated shell (rounded/bg/shadow/ring) is owned by
+// PopoverPanel inside PickerShell.
+const contentClass = computed(() => (slots.actions ? 'w-fit' : 'w-56'))
 
 const dp = props as unknown as LegacyDatePickerProps
 

package/src/components/HoverCard/HoverCard.api.md

@@ -0,0 +1,101 @@
+<!-- Auto Generated by scripts/propsgen.ts -->
+<script setup>
+  import PropsTable from '@/components/Docs/PropsTable.vue'
+  import SlotsTable from '@/components/Docs/SlotsTable.vue'
+  import EmitsTable from '@/components/Docs/EmitsTable.vue'
+
+  const propsData = [
+  {
+    name: 'side',
+    description: 'Side of the trigger the card is placed on.',
+    required: false,
+    type: '"bottom" | "top" | "right" | "left"',
+    default: '"bottom"'
+  },
+  {
+    name: 'align',
+    description: 'Alignment of the card relative to the trigger.',
+    required: false,
+    type: '"start" | "center" | "end"',
+    default: '"start"'
+  },
+  {
+    name: 'offset',
+    description: 'Distance in pixels between the card and the trigger.',
+    required: false,
+    type: 'number',
+    default: '4'
+  },
+  {
+    name: 'portalTo',
+    description: 'Where the card is teleported to in the DOM.',
+    required: false,
+    type: 'string | HTMLElement',
+    default: '"body"'
+  },
+  {
+    name: 'collisionPadding',
+    description: 'Padding (in pixels) kept between the card and the viewport edges when\nrepositioning to avoid collisions.',
+    required: false,
+    type: 'number',
+    default: '10'
+  },
+  {
+    name: 'hoverDelay',
+    description: 'Delay (in seconds) from when the pointer enters the trigger until the card\nopens. Matches the Tooltip convention of using seconds.',
+    required: false,
+    type: 'number',
+    default: '0.3'
+  },
+  {
+    name: 'leaveDelay',
+    description: 'Delay (in seconds) from when the pointer leaves the trigger or card until\nthe card closes.',
+    required: false,
+    type: 'number',
+    default: '0.3'
+  },
+  {
+    name: 'arrow',
+    description: 'Render a small arrow pointing at the trigger. Styled to match the panel\nsurface.',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'open',
+    description: '',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'trigger',
+    description: 'Trigger element. Rendered as-child so hover/focus a11y is auto-wired.',
+    type: '{ open: boolean; }'
+  },
+  {
+    name: 'default',
+    description: 'Card contents, rendered inside the standard PopoverPanel shell.',
+    type: 'any'
+  }
+]
+
+  const emitsData = [
+  {
+    name: 'update:open',
+    description: 'Fired when the open state changes.',
+    type: 'unknown[]'
+  }
+]
+</script>
+## API Reference
+
+<PropsTable name="HoverCard" :data="propsData"/> 
+
+<SlotsTable :data="slotsData"/> 
+
+<EmitsTable :data="emitsData"/> 
+

package/src/components/HoverCard/HoverCard.cy.ts

@@ -0,0 +1,103 @@
+import { defineComponent, h, ref } from 'vue'
+import HoverCard from './HoverCard.vue'
+import Button from '../Button/Button.vue'
+
+const Slots = {
+  trigger: () => h(Button, { 'data-cy': 'trigger' }, () => 'Hover me'),
+  default: () => h('div', { 'data-cy': 'content' }, 'Card content'),
+}
+
+describe('HoverCard', () => {
+  it('opens on hover after the hoverDelay and renders inside the panel shell', () => {
+    cy.clock()
+    cy.mount(HoverCard, {
+      slots: Slots,
+      props: { hoverDelay: 0.5, leaveDelay: 0.3 },
+    })
+
+    cy.get('[data-slot="content"]').should('not.exist')
+    cy.get('[data-cy="trigger"]').trigger('pointerenter')
+
+    // Still closed before the delay elapses.
+    cy.get('[data-slot="content"]').should('not.exist')
+    cy.tick(500)
+
+    cy.get('[data-slot="content"]').should('exist')
+    cy.get('[data-slot="content"]')
+      .find('[data-slot="content-body"]')
+      .find('[data-cy="content"]')
+      .should('have.text', 'Card content')
+  })
+
+  it('closes when the open model is set back to false', () => {
+    // reka owns the leave-delay timing internally; here we verify the wrapper's
+    // two-way open binding tears the card down when the parent closes it.
+    const Harness = defineComponent({
+      setup() {
+        const open = ref(false)
+        return () =>
+          h('div', [
+            h(
+              Button,
+              {
+                'data-cy': 'toggle',
+                onClick: () => (open.value = !open.value),
+              },
+              () => 'Toggle',
+            ),
+            h(
+              HoverCard,
+              {
+                open: open.value,
+                'onUpdate:open': (value: boolean) => (open.value = value),
+                hoverDelay: 0,
+              },
+              Slots,
+            ),
+          ])
+      },
+    })
+
+    cy.mount(Harness)
+    cy.get('[data-cy="toggle"]').click()
+    cy.get('[data-slot="content"]').should('exist')
+    cy.get('[data-cy="toggle"]').click()
+    cy.get('[data-slot="content"]').should('not.exist')
+  })
+
+  it('positions the card via side + align', () => {
+    cy.clock()
+    cy.mount(HoverCard, {
+      slots: Slots,
+      props: { hoverDelay: 0, side: 'right', align: 'end' },
+    })
+
+    cy.get('[data-cy="trigger"]').trigger('pointerenter')
+    cy.tick(0)
+    cy.get('[data-slot="content"]')
+      .should('have.attr', 'data-side', 'right')
+      .and('have.attr', 'data-align', 'end')
+  })
+
+  it('renders an arrow when arrow is set', () => {
+    cy.clock()
+    cy.mount(HoverCard, { slots: Slots, props: { hoverDelay: 0, arrow: true } })
+
+    cy.get('[data-cy="trigger"]').trigger('pointerenter')
+    cy.tick(0)
+    cy.get('[data-slot="content"]').find('[data-slot="arrow"]').should('exist')
+  })
+
+  it('always uses animated motion for hover opens', () => {
+    cy.clock()
+    cy.mount(HoverCard, { slots: Slots, props: { hoverDelay: 0 } })
+
+    cy.get('[data-cy="trigger"]').trigger('pointerenter')
+    cy.tick(0)
+    cy.get('[data-slot="content-body"]').should(
+      'have.attr',
+      'data-motion',
+      'animated',
+    )
+  })
+})

package/src/components/HoverCard/HoverCard.md

@@ -0,0 +1,52 @@
+# HoverCard
+
+Shows a floating panel when the pointer rests on (or the keyboard focuses) a
+trigger — for profile previews, link previews, and other sighted-only context.
+Built on [reka-ui](https://reka-ui.com/)'s `HoverCard` primitives.
+
+Use `HoverCard` for hover-driven panels and [`Popover`](./popover) for
+click-driven ones. For short text hints prefer [`Tooltip`](./tooltip) instead.
+
+## Example
+
+`#trigger` is rendered as-child, so hover and focus a11y are wired
+automatically. `#default` renders inside the standard panel shell.
+
+<ComponentPreview name="HoverCard-Example" />
+
+## Delays
+
+`hoverDelay` and `leaveDelay` are in **seconds** (consistent with `Tooltip`).
+`hoverDelay` is how long the pointer must rest before the card opens;
+`leaveDelay` is how long after the pointer leaves before it closes.
+
+<ComponentPreview name="HoverCard-Delays" />
+
+## Arrow
+
+Set `arrow` to render a small arrow pointing at the trigger, styled to match the
+panel surface.
+
+<ComponentPreview name="HoverCard-Arrow" />
+
+## Styling
+
+Like `Popover`, the card owns its panel shell and exposes the same stable
+`data-slot` hooks — `[data-slot="content"]` for the portaled content and
+`[data-slot="content-body"]` for the shell that owns the visuals. There are no
+class-injection props.
+
+## Motion
+
+A hover open always uses the animated scale-from-trigger entrance (180ms in /
+140ms out), and `prefers-reduced-motion` is respected. No configuration is
+required.
+
+## Notes
+
+- `HoverCard` is for sighted-only enhancement — don't put essential actions or
+  information that can only be reached by hovering.
+- The card stays open while the pointer is over either the trigger or the card,
+  so users can move into it to interact.
+
+<!-- @include: ./HoverCard.api.md -->

package/src/components/HoverCard/HoverCard.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import {
+  HoverCardArrow,
+  HoverCardContent,
+  HoverCardPortal,
+  HoverCardRoot,
+  HoverCardTrigger,
+} from 'reka-ui'
+import { computed } from 'vue'
+import PopoverPanel from '../shared/popover/PopoverPanel.vue'
+import type { HoverCardProps } from './types'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<HoverCardProps>(), {
+  side: 'bottom',
+  align: 'start',
+  offset: 4,
+  portalTo: 'body',
+  collisionPadding: 10,
+  hoverDelay: 0.3,
+  leaveDelay: 0.3,
+  arrow: false,
+})
+
+const open = defineModel<boolean>('open', { default: false })
+
+// reka HoverCard delays are in milliseconds; the public API uses seconds to
+// stay consistent with Tooltip.
+const openDelay = computed(() => props.hoverDelay * 1000)
+const closeDelay = computed(() => props.leaveDelay * 1000)
+
+defineExpose({
+  open: () => {
+    open.value = true
+  },
+  close: () => {
+    open.value = false
+  },
+})
+
+defineSlots<{
+  /** Trigger element. Rendered as-child so hover/focus a11y is auto-wired. */
+  trigger?: (props: { open: boolean }) => any
+  /** Card contents, rendered inside the standard PopoverPanel shell. */
+  default?: () => any
+}>()
+</script>
+
+<template>
+  <HoverCardRoot
+    v-model:open="open"
+    :open-delay="openDelay"
+    :close-delay="closeDelay"
+  >
+    <HoverCardTrigger as-child>
+      <slot name="trigger" :open="open" />
+    </HoverCardTrigger>
+    <HoverCardPortal :to="portalTo">
+      <HoverCardContent
+        data-slot="content"
+        class="z-[100]"
+        :side="side"
+        :align="align"
+        :side-offset="offset"
+        :collision-padding="collisionPadding"
+        v-bind="$attrs"
+      >
+        <!--
+          Hover opens always want the scale-from-trigger entrance, so motion is
+          fixed to 'animated' rather than driven by usePopoverMotion (which keys
+          on pointerdown and would classify a hover open as 'instant'). The
+          panel relies on the ancestor HoverCardContent's data-state for motion.
+        -->
+        <PopoverPanel
+          motion="animated"
+          class="origin-[var(--reka-hover-card-content-transform-origin)]"
+        >
+          <slot />
+        </PopoverPanel>
+        <HoverCardArrow
+          v-if="arrow"
+          data-slot="arrow"
+          class="fill-surface-elevation-2"
+        />
+      </HoverCardContent>
+    </HoverCardPortal>
+  </HoverCardRoot>
+</template>

package/src/components/HoverCard/index.ts

@@ -0,0 +1,2 @@
+export { default as HoverCard } from './HoverCard.vue'
+export type { HoverCardProps } from './types'

package/src/components/HoverCard/stories/Arrow.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Avatar, HoverCard } from 'frappe-ui'
+</script>
+
+<template>
+  <HoverCard side="top" arrow>
+    <template #trigger>
+      <a href="#" class="text-ink-gray-9 underline underline-offset-2">
+        @jane
+      </a>
+    </template>
+    <template #default>
+      <div class="flex w-64 gap-3 p-3">
+        <Avatar
+          label="Jane Doe"
+          image="https://avatars.githubusercontent.com/u/499550?v=4"
+          size="2xl"
+        />
+        <div>
+          <p class="text-p-base font-medium text-ink-gray-9">Jane Doe</p>
+          <p class="mt-1 text-p-sm text-ink-gray-6">
+            Designer. Likes hover cards.
+          </p>
+        </div>
+      </div>
+    </template>
+  </HoverCard>
+</template>

package/src/components/HoverCard/stories/Delays.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { Button, HoverCard } from 'frappe-ui'
+</script>
+
+<template>
+  <HoverCard :hover-delay="0.1" :leave-delay="0.5">
+    <template #trigger>
+      <Button>Hover me</Button>
+    </template>
+    <template #default>
+      <div class="p-3 text-p-sm text-ink-gray-7">
+        Opens after 0.1s, closes 0.5s after the pointer leaves.
+      </div>
+    </template>
+  </HoverCard>
+</template>

package/src/components/HoverCard/stories/Example.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Avatar, HoverCard } from 'frappe-ui'
+</script>
+
+<template>
+  <HoverCard>
+    <template #trigger>
+      <a href="#" class="text-ink-gray-9 underline underline-offset-2">
+        @jane
+      </a>
+    </template>
+    <template #default>
+      <div class="flex w-64 gap-3 p-3">
+        <Avatar
+          label="Jane Doe"
+          image="https://avatars.githubusercontent.com/u/499550?v=4"
+          size="2xl"
+        />
+        <div>
+          <p class="text-p-base font-medium text-ink-gray-9">Jane Doe</p>
+          <p class="mt-1 text-p-sm text-ink-gray-6">
+            Designer. Likes hover cards.
+          </p>
+        </div>
+      </div>
+    </template>
+  </HoverCard>
+</template>

package/src/components/HoverCard/types.ts

@@ -0,0 +1,47 @@
+import { type HoverCardContentProps, type HoverCardPortalProps } from 'reka-ui'
+
+export interface HoverCardProps {
+  /**
+   * Side of the trigger the card is placed on.
+   */
+  side?: HoverCardContentProps['side']
+
+  /**
+   * Alignment of the card relative to the trigger.
+   */
+  align?: HoverCardContentProps['align']
+
+  /**
+   * Distance in pixels between the card and the trigger.
+   */
+  offset?: number
+
+  /**
+   * Where the card is teleported to in the DOM.
+   */
+  portalTo?: HoverCardPortalProps['to']
+
+  /**
+   * Padding (in pixels) kept between the card and the viewport edges when
+   * repositioning to avoid collisions.
+   */
+  collisionPadding?: number
+
+  /**
+   * Delay (in seconds) from when the pointer enters the trigger until the card
+   * opens. Matches the Tooltip convention of using seconds.
+   */
+  hoverDelay?: number
+
+  /**
+   * Delay (in seconds) from when the pointer leaves the trigger or card until
+   * the card closes.
+   */
+  leaveDelay?: number
+
+  /**
+   * Render a small arrow pointing at the trigger. Styled to match the panel
+   * surface.
+   */
+  arrow?: boolean
+}