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

package/src/components/Select/Select.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, useAttrs, useSlots } from 'vue'
-import { usePopoverMotion } from '../../composables/usePopoverMotion'
 import { useInputLabeling } from '../../composables/useInputLabeling'
 import { useEmptyValueMapping } from '../shared/selection/useEmptyValueMapping'
 import type {
@@ -30,10 +29,11 @@ import {
   SelectViewport,
 } from 'reka-ui'
 import OptionIcon from '../shared/selection/OptionIcon.vue'
-import '../shared/selection/popoverMotion.css'
+import PopoverPanel from '../shared/popover/PopoverPanel.vue'
 import {
   EMPTY_VALUE_PREFIX,
   inputFontSizeClasses,
+  itemClasses,
   itemRootSizeClasses,
   toItemListSize,
   triggerBaseClasses,
@@ -78,18 +78,15 @@ const {
 const hasLabeling = computed(() => {
   return Boolean(
     props.label ||
-      props.description ||
-      hasError.value ||
-      slots.label ||
-      slots.description,
+    props.description ||
+    hasError.value ||
+    slots.label ||
+    slots.description,
   )
 })
 
 const formAttrKeys = ['name', 'autocomplete'] as const
 
-const { motion: contentMotion, onPointerDown: markPointerDown } =
-  usePopoverMotion(open)
-
 const rootAttrs = computed(() => {
   const out: Record<string, unknown> = Object.fromEntries(
     formAttrKeys.filter((key) => key in attrs).map((key) => [key, attrs[key]]),
@@ -210,12 +207,11 @@ const displayValue = computed(() => {
   return selectedOption.value?.label || ''
 })
 
-const selectSizingText = computed(() => {
-  return [
-    props.placeholder,
-    ...selectOptions.value.map((option) => option.label),
-  ].join('\n')
-})
+// Text the hidden sizer reserves trigger width for: the current value (or
+// placeholder when unselected). The trigger hugs the selection, so the
+// item-aligned dropdown — anchored over the trigger — expands outward to fit
+// longer options (Linear-style). Trigger width shifts as the value changes.
+const selectSizingText = computed(() => displayValue.value || props.placeholder)
 
 function getOptionSlotName(option: SelectNormalizedOption) {
   return option.slot ? `item-${option.slot}` : undefined
@@ -240,60 +236,57 @@ defineSlots<SelectSlots>()
       :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" />
       </template>
     </InputLabel>
     <SelectRoot v-model="internalModel" v-model:open="open" v-bind="rootAttrs">
-    <SelectTrigger
-      :id="inputId"
-      data-slot="trigger"
-      v-bind="triggerAttrs"
-      :class="[
-        triggerClasses,
-        hasLabeling ? 'w-full' : null,
-        hasLabeling ? null : (attrs.class as any),
-      ]"
-      :style="hasLabeling ? null : (attrs.style as any)"
-      :disabled="disabled"
-      :aria-invalid="hasError || undefined"
-      :aria-errormessage="hasError ? errorMessageId : undefined"
-      :aria-describedby="describedBy"
-      :aria-required="required || undefined"
-      :data-invalid="hasError ? 'true' : undefined"
-      :data-required="required ? 'true' : undefined"
-      @pointerdown="markPointerDown"
-    >
-      <template v-if="$slots.trigger">
-        <slot
-          name="trigger"
-          v-bind="triggerSlotProps"
-        />
-        <div
-          data-slot="trigger-value"
-          :class="[
-            'pointer-events-none absolute inset-0 flex items-center overflow-hidden',
-            triggerContentPadding,
-          ]"
-          aria-hidden="true"
-        >
-          <SelectValue
-            :placeholder="placeholder"
-            class="max-w-full truncate opacity-0"
-            :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
+      <SelectTrigger
+        :id="inputId"
+        data-slot="trigger"
+        v-bind="triggerAttrs"
+        :class="[
+          triggerClasses,
+          hasLabeling ? 'w-full' : null,
+          hasLabeling ? null : (attrs.class as any),
+        ]"
+        :style="hasLabeling ? null : (attrs.style as any)"
+        :disabled="disabled"
+        :aria-invalid="hasError || undefined"
+        :aria-errormessage="hasError ? errorMessageId : undefined"
+        :aria-describedby="describedBy"
+        :aria-required="required || undefined"
+        :data-invalid="hasError ? 'true' : undefined"
+        :data-required="required ? 'true' : undefined"
+      >
+        <template v-if="$slots.trigger">
+          <slot name="trigger" v-bind="triggerSlotProps" />
+          <div
+            data-slot="trigger-value"
+            :class="[
+              'pointer-events-none absolute inset-0 flex items-center overflow-hidden',
+              triggerContentPadding,
+            ]"
+            aria-hidden="true"
           >
-            <template v-if="selectedOption">
-              {{
-                showPlaceholderForSelected ? placeholder : selectedOption.label
-              }}
-            </template>
-          </SelectValue>
-        </div>
-      </template>
-      <template v-else>
-        <!--
+            <SelectValue
+              :placeholder="placeholder"
+              class="max-w-full truncate opacity-0"
+              :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
+            >
+              <template v-if="selectedOption">
+                {{
+                  showPlaceholderForSelected
+                    ? placeholder
+                    : selectedOption.label
+                }}
+              </template>
+            </SelectValue>
+          </div>
+        </template>
+        <template v-else>
+          <!--
           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
@@ -302,87 +295,87 @@ defineSlots<SelectSlots>()
                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, option: selectedOption }"
-          />
-        </template>
-        <OptionIcon
-          v-else-if="selectedOption?.icon"
-          :icon="selectedOption.icon"
-        />
-        <slot
-          v-else
-          name="prefix"
-          v-bind="triggerSlotProps"
-        />
-
-        <div class="grid min-w-0 text-left truncate">
-          <SelectValue
-            :placeholder="placeholder"
-            class="col-start-1 row-start-1 max-w-full truncate"
-            :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
-          >
-            <template v-if="selectedOption">
-              {{
-                showPlaceholderForSelected ? placeholder : selectedOption.label
-              }}
-            </template>
-          </SelectValue>
-          <span
-            aria-hidden="true"
-            class="select-trigger-sizer col-start-1 row-start-1"
-            :data-width-text="selectSizingText"
+          <template v-if="selectedOption && slots['item-prefix']">
+            <slot
+              name="item-prefix"
+              v-bind="{ item: selectedOption, option: selectedOption }"
+            />
+          </template>
+          <OptionIcon
+            v-else-if="selectedOption?.icon"
+            :icon="selectedOption.icon"
           />
-        </div>
+          <slot v-else name="prefix" v-bind="triggerSlotProps" />
 
-        <slot
-          name="suffix"
-          v-bind="triggerSlotProps"
-        >
-          <span class="lucide-chevron-down ml-auto size-4 shrink-0 text-ink-gray-4" />
-        </slot>
-      </template>
-    </SelectTrigger>
-
-    <SelectPortal>
-      <SelectContent
-        data-slot="content"
-        data-selection
-        class="z-[100] origin-[var(--reka-select-content-transform-origin)]"
-      >
-        <div
-          data-slot="content-body"
-          :data-motion="contentMotion"
-          class="flex flex-col overflow-hidden rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 will-change-[opacity,transform] origin-[var(--reka-select-content-transform-origin)]"
-        >
-          <SelectViewport class="flex min-h-0 flex-col p-1">
-            <div
-              v-if="!selectOptions.length"
-              data-slot="empty"
-              class="px-2 py-1.5 text-base text-ink-gray-5"
+          <div class="grid min-w-0 text-left truncate">
+            <SelectValue
+              :placeholder="placeholder"
+              class="col-start-1 row-start-1 max-w-full truncate"
+              :class="{ 'text-ink-gray-4': showPlaceholderForSelected }"
             >
-              <slot name="empty">{{ emptyText }}</slot>
-            </div>
+              <template v-if="selectedOption">
+                {{
+                  showPlaceholderForSelected
+                    ? placeholder
+                    : selectedOption.label
+                }}
+              </template>
+            </SelectValue>
+            <span
+              aria-hidden="true"
+              class="select-trigger-sizer col-start-1 row-start-1"
+              :data-width-text="selectSizingText"
+            />
+          </div>
+
+          <slot name="suffix" v-bind="triggerSlotProps">
+            <span
+              class="lucide-chevron-down ml-auto size-4 shrink-0 text-ink-gray-4"
+            />
+          </slot>
+        </template>
+      </SelectTrigger>
 
-            <template v-else>
-              <SelectItem
-                v-for="(internalOption, index) in internalOptions"
-                :key="getOptionKey(internalOption.option, index)"
-                :disabled="internalOption.option.disabled"
-                :value="internalOption.internalValue"
-                data-slot="item"
-                :class="itemRootClasses"
-                class="select-none rounded border-0 text-base text-ink-gray-9 data-[disabled]:text-ink-gray-4 data-[highlighted]:bg-surface-gray-2 data-[state=checked]:bg-surface-gray-3 data-[highlighted]:data-[state=checked]:bg-surface-gray-4"
+      <SelectPortal>
+        <SelectContent
+          data-slot="content"
+          class="z-[100] origin-[var(--reka-select-content-transform-origin)]"
+        >
+          <!--
+          `instant` (no scale-from-trigger enter, no exit) rather than the
+          animated rhythm: the menu is anchored item-aligned *over* the
+          trigger, so a scale/translate entrance reads as a glitch. The ~80ms
+          opacity fade `instant` keeps masks reka's 1-frame position-settle.
+        -->
+          <PopoverPanel
+            motion="instant"
+            class="flex flex-col origin-[var(--reka-select-content-transform-origin)]"
+          >
+            <SelectViewport class="flex min-h-0 flex-col p-1">
+              <div
+                v-if="!selectOptions.length"
+                data-slot="empty"
+                class="px-2 py-1.5 text-base text-ink-gray-5"
               >
-                <ItemListRow
-                  :size="itemSize"
-                  :selected="internalOption.option.value === model"
+                <slot name="empty">{{ emptyText }}</slot>
+              </div>
+
+              <template v-else>
+                <SelectItem
+                  v-for="(internalOption, index) in internalOptions"
+                  :key="getOptionKey(internalOption.option, index)"
                   :disabled="internalOption.option.disabled"
+                  :value="internalOption.internalValue"
+                  data-slot="item"
+                  :class="[itemClasses, itemRootClasses]"
                 >
-                  <template #prefix>
-                    <!--
+                  <ItemListRow
+                    :size="itemSize"
+                    :selected="internalOption.option.value === model"
+                    :disabled="internalOption.option.disabled"
+                  >
+                    <template #prefix>
+                      <!--
                       v-if chain (not unconditional slot + v-if icon) so that
                       with neither a consumer `#item-prefix` slot nor an
                       `option.icon`, the prefix template renders only
@@ -397,82 +390,94 @@ defineSlots<SelectSlots>()
                       through the Tailwind plugin; component values render
                       directly.
                     -->
-                    <slot
-                      v-if="slots['item-prefix']"
-                      name="item-prefix"
-                      v-bind="{ item: internalOption.option, option: internalOption.option }"
-                    />
-                    <OptionIcon
-                      v-else-if="internalOption.option.icon"
-                      :icon="internalOption.option.icon"
-                    />
-                  </template>
-
-                  <template #label>
-                    <!--
+                      <slot
+                        v-if="slots['item-prefix']"
+                        name="item-prefix"
+                        v-bind="{
+                          item: internalOption.option,
+                          option: internalOption.option,
+                        }"
+                      />
+                      <OptionIcon
+                        v-else-if="internalOption.option.icon"
+                        :icon="internalOption.option.icon"
+                      />
+                    </template>
+
+                    <template #label>
+                      <!--
                       SelectItemText must wrap the visible label so reka's
                       item-aligned positioning uses the on-screen label rect.
                       Previously rendered as `sr-only`, which gave a 1x1 rect
                       and mis-anchored the popup (prefix not covered).
                     -->
-                    <SelectItemText as="div" class="min-w-0">
-                      <slot
-                        v-if="
-                          getOptionSlotName(internalOption.option) &&
-                          slots[getOptionSlotName(internalOption.option)!]
-                        "
-                        :name="getOptionSlotName(internalOption.option)!"
-                        v-bind="{ item: internalOption.option, option: internalOption.option }"
-                      />
-                      <slot
-                        v-else
-                        name="item-label"
-                        v-bind="{ item: internalOption.option, option: internalOption.option }"
-                      >
+                      <SelectItemText as="div" class="min-w-0">
                         <slot
-                          name="option"
-                          v-bind="{ item: internalOption.option, option: internalOption.option }"
+                          v-if="
+                            getOptionSlotName(internalOption.option) &&
+                            slots[getOptionSlotName(internalOption.option)!]
+                          "
+                          :name="getOptionSlotName(internalOption.option)!"
+                          v-bind="{
+                            item: internalOption.option,
+                            option: internalOption.option,
+                          }"
+                        />
+                        <slot
+                          v-else
+                          name="item-label"
+                          v-bind="{
+                            item: internalOption.option,
+                            option: internalOption.option,
+                          }"
                         >
-                          <div class="truncate">
-                            {{ internalOption.option.label }}
-                          </div>
-                          <div
-                            v-if="internalOption.option.description"
-                            class="truncate text-p-sm text-ink-gray-5"
+                          <slot
+                            name="option"
+                            v-bind="{
+                              item: internalOption.option,
+                              option: internalOption.option,
+                            }"
                           >
-                            {{ internalOption.option.description }}
-                          </div>
+                            <div class="truncate">
+                              {{ internalOption.option.label }}
+                            </div>
+                            <div
+                              v-if="internalOption.option.description"
+                              class="truncate text-p-sm text-ink-gray-5"
+                            >
+                              {{ internalOption.option.description }}
+                            </div>
+                          </slot>
                         </slot>
-                      </slot>
-                    </SelectItemText>
-                  </template>
-
-                  <template #suffix>
-                    <slot
-                      name="item-suffix"
-                      v-bind="{ item: internalOption.option, option: internalOption.option }"
-                    />
-                    <SelectItemIndicator
-                      class="ml-1 inline-flex items-center justify-center"
-                    >
-                      <span class="lucide-check size-4 text-ink-gray-6" />
-                    </SelectItemIndicator>
-                  </template>
-                </ItemListRow>
-              </SelectItem>
-            </template>
-          </SelectViewport>
-
-          <div v-if="$slots.footer" data-slot="footer">
-            <slot
-              name="footer"
-              v-bind="{ selectedOption, clearSelection }"
-            />
-          </div>
-        </div>
-      </SelectContent>
-    </SelectPortal>
-  </SelectRoot>
+                      </SelectItemText>
+                    </template>
+
+                    <template #suffix>
+                      <slot
+                        name="item-suffix"
+                        v-bind="{
+                          item: internalOption.option,
+                          option: internalOption.option,
+                        }"
+                      />
+                      <SelectItemIndicator
+                        class="ml-1 inline-flex items-center justify-center"
+                      >
+                        <span class="lucide-check size-4 text-ink-gray-6" />
+                      </SelectItemIndicator>
+                    </template>
+                  </ItemListRow>
+                </SelectItem>
+              </template>
+            </SelectViewport>
+
+            <div v-if="$slots.footer" data-slot="footer">
+              <slot name="footer" v-bind="{ selectedOption, clearSelection }" />
+            </div>
+          </PopoverPanel>
+        </SelectContent>
+      </SelectPortal>
+    </SelectRoot>
     <InputDescription
       v-if="showDescription || $slots.description"
       :id="descriptionId"
@@ -485,6 +490,15 @@ defineSlots<SelectSlots>()
 </template>
 
 <style scoped>
+/*
+ * Block interaction with the content while it plays its exit animation.
+ * PopoverPanel's motion CSS owns the animation; this pointer-events guard
+ * lived on the old `[data-selection]` content element and is preserved here.
+ */
+[data-slot='content'][data-state='closed'] {
+  pointer-events: none;
+}
+
 [data-highlighted],
 [data-state='checked'] {
   outline: none !important;

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

@@ -44,9 +44,10 @@ const options = [
       class="grid divide-y divide-outline-gray-2 md:grid-cols-2 md:divide-x md:divide-y-0"
     >
       <div class="pb-8 md:pr-8">
-        <div class="text-sm font-medium text-ink-gray-7">Auto width</div>
+        <div class="text-sm-medium text-ink-gray-7">Auto width</div>
         <div class="mt-1 text-p-sm text-ink-gray-5">
-          Matches the widest option by default, closer to a native select.
+          Hugs the selected value; the dropdown expands outward to fit longer
+          options.
         </div>
 
         <div class="mt-4">
@@ -66,7 +67,7 @@ const options = [
       </div>
 
       <div class="pb-8 md:pl-8">
-        <div class="text-sm font-medium text-ink-gray-7">Full width</div>
+        <div class="text-sm-medium text-ink-gray-7">Full width</div>
         <div class="mt-1 text-p-sm text-ink-gray-5">
           Opt in with
           <code class="text-sm text-ink-gray-7">class="w-full"</code>

package/src/components/Select/stories/States.vue

@@ -27,7 +27,7 @@ const sortOptions = [
 
 <template>
   <div class="w-full max-w-md py-4">
-    <div class="text-sm font-medium text-ink-gray-7">Disabled label option</div>
+    <div class="text-sm-medium text-ink-gray-7">Disabled label option</div>
     <div class="mt-1 text-p-sm text-ink-gray-5">
       Common sorting pattern where a disabled first option keeps an empty string
       value without breaking the select.

package/src/components/Select/stories/TriggerSlots.vue

@@ -34,7 +34,7 @@ const options = [
     class="grid w-full max-w-4xl divide-y divide-outline-gray-2 md:grid-cols-2 md:divide-x md:divide-y-0"
   >
     <div class="py-4 md:pr-8">
-      <div class="text-sm font-medium text-ink-gray-7">Prefix and suffix</div>
+      <div class="text-sm-medium text-ink-gray-7">Prefix and suffix</div>
       <div class="mt-1 text-p-sm text-ink-gray-5">
         Use the default trigger shell when you only need light customization.
       </div>
@@ -60,7 +60,7 @@ const options = [
     </div>
 
     <div class="py-4 md:pl-8">
-      <div class="text-sm font-medium text-ink-gray-7">Custom trigger</div>
+      <div class="text-sm-medium text-ink-gray-7">Custom trigger</div>
       <div class="mt-1 text-p-sm text-ink-gray-5">
         Replace the trigger content entirely when you need richer layout.
       </div>

package/src/components/Select/utils.ts

@@ -2,6 +2,7 @@ import type { SelectionSize, SelectionVariant } from '../shared/selection/utils'
 
 export {
   inputFontSizeClasses,
+  itemClasses,
   itemRootSizeClasses,
   toItemListSize,
   triggerSizeClasses,
@@ -48,9 +49,9 @@ export function triggerVariantClasses(
 
   return {
     subtle:
-      'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-gray-modals hover:bg-surface-gray-3',
+      'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-elevation-2 hover:bg-surface-gray-3',
     outline:
-      'border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3',
+      'border border-outline-gray-2 bg-surface-base hover:border-outline-gray-3',
     ghost:
       'border border-transparent bg-transparent hover:bg-surface-gray-3 focus:bg-surface-gray-3',
   }[variant]
@@ -62,4 +63,4 @@ export function triggerVariantClasses(
  * which is why Select doesn't reuse the shared base string.
  */
 export const triggerBaseClasses =
-  'relative inline-flex items-center gap-2 text-left outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-visible:ring-2 data-[state=open]:ring-2 ring-outline-gray-3 text-ink-gray-7 data-[placeholder]:text-ink-gray-4 data-[disabled]:text-ink-gray-4'
+  'relative inline-flex items-center gap-2 text-left transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] data-[state=open]:outline-none text-ink-gray-7 data-[placeholder]:text-ink-gray-4 data-[disabled]:text-ink-gray-4'

package/src/components/SettingsDialog/SettingsBody.vue

@@ -0,0 +1,23 @@
+<template>
+  <!-- Scrolling region of a panel (auto-hide overlay scrollbar). -->
+  <ScrollArea
+    ref="scrollArea"
+    class="min-h-0 flex-1"
+    viewport-class="px-[4.4rem] pb-16"
+  >
+    <slot />
+  </ScrollArea>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ScrollArea } from '../ScrollArea'
+
+const scrollArea = ref<InstanceType<typeof ScrollArea>>()
+
+// Forward the scroll viewport element so a panel body can be virtualized while
+// keeping this component's styled scrollbar (see ScrollArea.viewportElement).
+defineExpose({
+  viewportElement: computed(() => scrollArea.value?.viewportElement ?? null),
+})
+</script>

package/src/components/SettingsDialog/SettingsContent.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="flex min-h-0 flex-1 justify-stretch">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts"></script>