@dxos/react-ui-searchlist 0.8.4-main.b97322e → 0.8.4-main.dedc0f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-searchlist",
-  "version": "0.8.4-main.b97322e",
+  "version": "0.8.4-main.dedc0f3",
   "description": "A themed ⌘K-style combobox component, triggered by a button (or keyboard shortcut), where values are queried only within the invoked modal.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -34,17 +35,17 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.b97322e",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/storybook-utils": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "vite": "7.1.1",
+    "@dxos/random": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/storybook-utils": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui": "0.8.4-main.dedc0f3"
   },
   "publishConfig": {
     "access": "public"

package/src/components/SearchList.stories.tsx

@@ -4,7 +4,8 @@
 
 import '@dxos-theme';
 
-import React, { type FC } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/storybook-utils';
@@ -21,7 +22,11 @@ const defaultItems: StoryItems = faker.helpers
     return acc;
   }, {});
 
-const SearchListStory: FC<{ items: StoryItems }> = ({ items = defaultItems }) => {
+type StoryProps = {
+  items: StoryItems;
+};
+
+const DefaultStory = ({ items = defaultItems }: StoryProps) => {
   return (
     <SearchList.Root filter={(value, search) => (items[value].includes(search) ? 1 : 0)}>
       <SearchList.Input placeholder='Search...' />
@@ -36,12 +41,17 @@ const SearchListStory: FC<{ items: StoryItems }> = ({ items = defaultItems }) =>
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-searchlist/SearchList',
-  component: SearchListStory,
+  component: SearchList.Root as any,
+  render: DefaultStory,
   decorators: [withTheme],
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };

package/src/components/SearchList.tsx

@@ -5,7 +5,7 @@
 import { createContext } from '@radix-ui/react-context';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from 'cmdk';
-import React, { type ComponentPropsWithRef, forwardRef, type PropsWithChildren, useCallback } from 'react';
+import React, { type ComponentPropsWithRef, type PropsWithChildren, forwardRef, useCallback } from 'react';
 
 import {
   Button,
@@ -136,7 +136,10 @@ const SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(
       <CommandItem
         {...props}
         onSelect={handleSelect}
-        className={mx('p-1 rounded select-none cursor-pointer data-[selected]:bg-hoverOverlay', classNames)}
+        className={mx(
+          'p-1 pis-2 pie-2 rounded-sm select-none cursor-pointer data-[selected]:bg-hoverOverlay',
+          classNames,
+        )}
         ref={forwardedRef}
       >
         {children}

package/src/composites/PopoverCombobox.stories.tsx

@@ -4,6 +4,7 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
@@ -32,13 +33,17 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-searchlist/PopoverCombobox',
-  component: PopoverCombobox,
+  component: PopoverCombobox.Root as any,
   render: DefaultStory,
   decorators: [withTheme],
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };

package/src/composites/PopoverCombobox.tsx

@@ -9,7 +9,6 @@ import {
   Popover,
   type PopoverArrowProps,
   type PopoverContentProps,
-  type PopoverViewportProps,
   type PopoverVirtualTriggerProps,
 } from '@dxos/react-ui';
 
@@ -100,16 +99,17 @@ const PopoverComboboxContent = forwardRef<HTMLDivElement, PopoverComboboxContent
           onFocusOutside,
           onInteractOutside,
           forceMount,
-          classNames,
         }}
+        classNames={[
+          'is-[--radix-popover-trigger-width] max-bs-[--radix-popover-content-available-height] grid grid-rows-[min-content_1fr] overflow-hidden',
+          classNames,
+        ]}
         id={modalId}
         ref={forwardedRef}
       >
-        <Popover.Viewport>
-          <SearchList.Root {...props} classNames='contents density-fine' role='none'>
-            {children}
-          </SearchList.Root>
-        </Popover.Viewport>
+        <SearchList.Root {...props} classNames='contents density-fine' role='none'>
+          {children}
+        </SearchList.Root>
       </Popover.Content>
     );
   },
@@ -139,7 +139,7 @@ const PopoverComboboxInput = forwardRef<HTMLInputElement, PopoverComboboxInputPr
       <SearchList.Input
         {...props}
         classNames={[
-          'mli-cardSpacingChrome mbs-cardSpacingChrome is-[calc(100%-2*var(--dx-cardSpacingChrome))]',
+          'mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]',
           classNames,
         ]}
         ref={forwardedRef}
@@ -148,15 +148,16 @@ const PopoverComboboxInput = forwardRef<HTMLInputElement, PopoverComboboxInputPr
   },
 );
 
-type PopoverComboboxListProps = SearchListContentProps &
-  Pick<PopoverViewportProps, 'constrainBlock' | 'constrainInline'>;
+type PopoverComboboxListProps = SearchListContentProps;
 
 const PopoverComboboxList = forwardRef<HTMLDivElement, PopoverComboboxListProps>(
-  ({ constrainInline, constrainBlock, ...props }, forwardedRef) => {
+  ({ classNames, ...props }, forwardedRef) => {
     return (
-      <Popover.Viewport {...{ constrainInline, constrainBlock }}>
-        <SearchList.Content {...props} ref={forwardedRef} />
-      </Popover.Viewport>
+      <SearchList.Content
+        {...props}
+        classNames={['min-bs-0 overflow-y-auto plb-cardSpacingChrome', classNames]}
+        ref={forwardedRef}
+      />
     );
   },
 );