@dxos/react-ui-searchlist 0.8.4-main.84f28bd → 0.8.4-main.ae835ea

package/src/components/Listbox/Listbox.tsx

@@ -0,0 +1,209 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { type Scope, createContextScope } from '@radix-ui/react-context';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { type ComponentPropsWithRef, forwardRef, useCallback, useEffect, useRef } from 'react';
+
+import { Icon, type IconProps, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { commandItem, searchListItem } from '../SearchList';
+
+const LISTBOX_NAME = 'Listbox';
+const LISTBOX_OPTION_NAME = 'ListboxOption';
+const LISTBOX_OPTION_LABEL_NAME = 'ListboxOptionLabel';
+const LISTBOX_OPTION_INDICATOR_NAME = 'ListboxOptionIndicator';
+
+//
+// Context
+//
+
+type ListboxScopedProps<P> = P & { __listboxScope?: Scope };
+type ListboxOptionScopedProps<P> = P & { __listboxOptionScope?: Scope };
+
+type ListboxOptionProps = ThemedClassName<ComponentPropsWithRef<'li'>> & {
+  value: string;
+};
+
+const [createListboxContext, createListboxScope] = createContextScope(LISTBOX_NAME, []);
+const [createListboxOptionContext, createListboxOptionScope] = createContextScope(LISTBOX_OPTION_NAME, [
+  createListboxScope,
+]);
+
+type ListboxContextValue = {
+  selectedValue: string | undefined;
+  onValueChange: (value: string) => void;
+};
+
+type ListboxOptionContextValue = {
+  value: string;
+  isSelected: boolean;
+};
+
+const [ListboxProvider, useListboxContext] = createListboxContext<ListboxContextValue>(LISTBOX_NAME);
+const [ListboxOptionProvider, useListboxOptionContext] =
+  createListboxOptionContext<ListboxOptionContextValue>(LISTBOX_OPTION_NAME);
+
+//
+// Root
+//
+
+type ListboxRootProps = ThemedClassName<ComponentPropsWithRef<'ul'>> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  autoFocus?: boolean;
+};
+
+// TODO(thure): Note that this overlaps significantly with the the `SelectableListbox` story of `List.tsx` in `react-ui`,
+//  making this an exemplar of `List` specifying standard `role="listbox"` interactivity, though it is here because it
+//  coheres with SearchList’s styles and norms. This can be promoted to `react-ui`, but doing so should involve clearing
+//  the technical- and design-debt in its `List` component.
+const ListboxRoot = forwardRef<HTMLUListElement, ListboxRootProps>(
+  (props: ListboxScopedProps<ListboxRootProps>, forwardedRef) => {
+    const {
+      __listboxScope,
+      children,
+      classNames,
+      value: propsValue,
+      defaultValue,
+      onValueChange,
+      autoFocus,
+      ...rootProps
+    } = props;
+
+    const arrowGroup = useArrowNavigationGroup({ axis: 'vertical' });
+    const ref = useRef<HTMLUListElement | null>(null);
+    const rootRef = useComposedRefs<HTMLUListElement>(ref, forwardedRef);
+
+    const [selectedValue, setSelectedValue] = useControllableState({
+      prop: propsValue,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+
+    const handleValueChange = (value: string) => {
+      setSelectedValue(value);
+    };
+
+    useEffect(() => {
+      // Autofocus the selected option on mount using querySelector
+      (ref.current?.querySelector('[aria-selected="true"]') as HTMLLIElement)?.focus();
+    }, [autoFocus]);
+
+    return (
+      <ListboxProvider scope={__listboxScope} selectedValue={selectedValue} onValueChange={handleValueChange}>
+        <ul
+          role='listbox'
+          {...rootProps}
+          className={mx('is-full p-cardSpacingChrome', classNames)}
+          ref={rootRef}
+          {...arrowGroup}
+        >
+          {children}
+        </ul>
+      </ListboxProvider>
+    );
+  },
+);
+
+ListboxRoot.displayName = LISTBOX_NAME;
+
+//
+// Option
+//
+
+const ListboxOption = forwardRef<HTMLLIElement, ListboxOptionProps>(
+  (props: ListboxScopedProps<ListboxOptionProps>, forwardedRef) => {
+    const { __listboxScope, children, classNames, value, ...rootProps } = props;
+    const { selectedValue, onValueChange } = useListboxContext(LISTBOX_OPTION_NAME, __listboxScope);
+
+    const isSelected = selectedValue === value;
+
+    const handleSelect = useCallback(() => {
+      onValueChange(value);
+    }, [value, onValueChange]);
+
+    return (
+      <ListboxOptionProvider scope={__listboxScope} value={value} isSelected={isSelected}>
+        <li
+          role='option'
+          {...rootProps}
+          aria-selected={isSelected}
+          tabIndex={0}
+          className={mx('dx-focus-ring', commandItem, searchListItem, classNames)}
+          onClick={handleSelect}
+          onKeyDown={({ key }) => {
+            if (['Enter', ' '].includes(key)) {
+              handleSelect();
+            }
+          }}
+          ref={forwardedRef}
+        >
+          {children}
+        </li>
+      </ListboxOptionProvider>
+    );
+  },
+);
+
+ListboxOption.displayName = LISTBOX_OPTION_NAME;
+
+//
+// OptionLabel
+//
+
+const ListboxOptionLabel = forwardRef<HTMLDivElement, ThemedClassName<ComponentPropsWithRef<'div'>>>(
+  ({ children, classNames, ...rootProps }, forwardedRef) => {
+    return (
+      <span {...rootProps} className={mx('grow truncate', classNames)} ref={forwardedRef}>
+        {children}
+      </span>
+    );
+  },
+);
+
+ListboxOptionLabel.displayName = LISTBOX_OPTION_LABEL_NAME;
+
+type ListboxOptionIndicatorProps = Omit<IconProps, 'icon'> & Partial<Pick<IconProps, 'icon'>>;
+
+//
+// OptionIndicator
+//
+
+const ListboxOptionIndicator = forwardRef<SVGSVGElement, ListboxOptionIndicatorProps>(
+  (props: ListboxOptionScopedProps<ListboxOptionIndicatorProps>, forwardedRef) => {
+    const { __listboxOptionScope, classNames, ...rootProps } = props;
+    const { isSelected } = useListboxOptionContext(LISTBOX_OPTION_INDICATOR_NAME, __listboxOptionScope);
+
+    return (
+      <Icon
+        icon='ph--check--regular'
+        {...rootProps}
+        classNames={mx(!isSelected && 'invisible', classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+ListboxOptionIndicator.displayName = LISTBOX_OPTION_INDICATOR_NAME;
+
+//
+// Listbox
+//
+
+export const Listbox = {
+  Root: ListboxRoot,
+  Option: ListboxOption,
+  OptionLabel: ListboxOptionLabel,
+  OptionIndicator: ListboxOptionIndicator,
+};
+
+export { createListboxScope, useListboxContext };
+
+export type { ListboxRootProps, ListboxOptionProps, ListboxScopedProps };

package/src/components/Listbox/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './Listbox';

package/src/components/SearchList/SearchList.stories.tsx

@@ -0,0 +1,64 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+import { SearchList } from './SearchList';
+
+faker.seed(1234);
+
+type StoryItems = Record<string, string>;
+
+const defaultItems: StoryItems = faker.helpers
+  .uniqueArray(faker.commerce.productName, 16)
+  .sort()
+  .reduce((acc: StoryItems, label) => {
+    acc[faker.string.uuid()] = label;
+    return acc;
+  }, {});
+
+type StoryProps = {
+  items: StoryItems;
+};
+
+const DefaultStory = ({ items = defaultItems }: StoryProps) => {
+  return (
+    <SearchList.Root filter={(value, search) => (items[value].toLowerCase().includes(search.toLowerCase()) ? 1 : 0)}>
+      <SearchList.Input />
+      <SearchList.Content>
+        {Object.entries(items).map(([value, label]) => (
+          <SearchList.Item
+            key={value}
+            value={value}
+            onSelect={(value) => console.log('[SearchList.Item.onSelect]', value)}
+          >
+            {label}
+          </SearchList.Item>
+        ))}
+      </SearchList.Content>
+    </SearchList.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-searchlist/SearchList',
+  component: SearchList.Root as any,
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ container: 'column', classNames: 'p-2' })],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/SearchList/SearchList.tsx

@@ -0,0 +1,163 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from 'cmdk';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import {
+  type TextInputProps,
+  type ThemedClassName,
+  useDensityContext,
+  useElevationContext,
+  useThemeContext,
+  useTranslation,
+} from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { translationKey } from '../../translations';
+
+const commandItem = 'flex items-center overflow-hidden';
+const searchListItem =
+  'plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected]:bg-hoverOverlay hover:bg-hoverOverlay';
+
+const SEARCHLIST_NAME = 'SearchList';
+const SEARCHLIST_ITEM_NAME = 'SearchListItem';
+
+//
+// Root
+//
+
+type SearchListVariant = 'list' | 'menu' | 'listbox';
+
+type SearchListRootProps = ThemedClassName<ComponentPropsWithRef<typeof CommandRoot>> & {
+  variant?: SearchListVariant;
+};
+
+const SearchListRoot = forwardRef<HTMLDivElement, SearchListRootProps>(
+  ({ children, classNames, ...props }, forwardedRef) => {
+    return (
+      <CommandRoot {...props} className={mx(classNames)} ref={forwardedRef}>
+        {children}
+      </CommandRoot>
+    );
+  },
+);
+
+SearchListRoot.displayName = SEARCHLIST_NAME;
+
+//
+// Input
+//
+
+type CommandInputPrimitiveProps = ComponentPropsWithRef<typeof CommandInput>;
+
+// TODO: Harmonize with other inputs’ `onChange` prop.
+type SearchListInputProps = Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'> &
+  Pick<CommandInputPrimitiveProps, 'value' | 'defaultValue' | 'onValueChange'>;
+
+const SearchListInput = forwardRef<HTMLInputElement, SearchListInputProps>(
+  ({ classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    const placeholder = props.placeholder ?? t('search.placeholder');
+
+    // TODO(thure): Keep this in-sync with `TextInput`, or submit a PR for `cmdk` to support `asChild` so we don’t have to.
+    const { hasIosKeyboard } = useThemeContext();
+    const { tx } = useThemeContext();
+    const density = useDensityContext(propsDensity);
+    const elevation = useElevationContext(propsElevation);
+
+    return (
+      <CommandInput
+        {...props}
+        placeholder={placeholder}
+        className={tx(
+          'input.input',
+          'input',
+          {
+            variant,
+            disabled: props.disabled,
+            density,
+            elevation,
+          },
+          'mbe-cardSpacingBlock',
+          classNames,
+        )}
+        {...(props.autoFocus && !hasIosKeyboard && { autoFocus: true })}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+//
+// Content
+//
+
+type SearchListContentProps = ThemedClassName<ComponentPropsWithRef<typeof CommandList>>;
+
+const SearchListContent = forwardRef<HTMLDivElement, SearchListContentProps>(
+  ({ children, classNames, ...props }, forwardedRef) => {
+    return (
+      <CommandList {...props} className={mx(classNames)} ref={forwardedRef}>
+        {children}
+      </CommandList>
+    );
+  },
+);
+
+//
+// Empty
+//
+
+type SearchListEmptyProps = ThemedClassName<ComponentPropsWithRef<typeof CommandEmpty>>;
+
+const SearchListEmpty = forwardRef<HTMLDivElement, SearchListEmptyProps>(
+  ({ children, classNames, ...props }, forwardedRef) => {
+    return (
+      <CommandEmpty {...props} className={mx(classNames)} ref={forwardedRef}>
+        {children}
+      </CommandEmpty>
+    );
+  },
+);
+
+//
+// Item
+//
+
+type SearchListItemProps = ThemedClassName<ComponentPropsWithRef<typeof CommandItem>>;
+
+const SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(
+  ({ children, classNames, ...props }, forwardedRef) => {
+    return (
+      <CommandItem {...props} className={mx(searchListItem, classNames)} ref={forwardedRef}>
+        {children}
+      </CommandItem>
+    );
+  },
+);
+
+SearchListItem.displayName = SEARCHLIST_ITEM_NAME;
+
+//
+// SearchList
+//
+
+export const SearchList = {
+  Root: SearchListRoot,
+  Input: SearchListInput,
+  Content: SearchListContent,
+  Empty: SearchListEmpty,
+  Item: SearchListItem,
+};
+
+export type {
+  SearchListRootProps,
+  SearchListInputProps,
+  SearchListContentProps,
+  SearchListEmptyProps,
+  SearchListItemProps,
+};
+
+export { commandItem, searchListItem };

package/src/components/SearchList/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './SearchList';

package/src/components/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './Combobox';
+export * from './Listbox';
 export * from './SearchList';

package/src/index.ts

@@ -3,5 +3,4 @@
 //
 
 export * from './components';
-export * from './composites';
 export * from './translations';

package/src/translations.ts

@@ -9,7 +9,9 @@ export const translationKey = 'react-ui-searchlist';
 export const translations = [
   {
     'en-US': {
-      [translationKey]: {},
+      [translationKey]: {
+        'search.placeholder': 'Search...',
+      },
     },
   },
 ] as const satisfies Resource[];

package/dist/types/src/components/SearchList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SearchList.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchList.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AACzF,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,KAAK,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAE3G,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,eAAe,EAKrB,MAAM,gBAAgB,CAAC;AAGxB,KAAK,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAErD,KAAK,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC,GAAG;IACtF,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,UAAU,EAAE,IAAI,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AASF,KAAK,iBAAiB,GAAG,iBAAiB,CACxC,OAAO,CAAC,oBAAoB,GAAG;IAAE,WAAW,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CACpG,CAAC;AAcF,KAAK,0BAA0B,GAAG,qBAAqB,CAAC,OAAO,YAAY,CAAC,CAAC;AAG7E,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,GACrF,IAAI,CAAC,0BAA0B,EAAE,OAAO,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;AAgC/E,KAAK,sBAAsB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC;AAYzF,KAAK,oBAAoB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;AAYxF,KAAK,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC;AAmEtF,KAAK,oBAAoB,GAAG,WAAW,CAAC;AAuCxC,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;+LA5ElB,iBAAiB;;;;;CAgFnB,CAAC;AAEF,YAAY,EACV,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,GACrB,CAAC"}

package/dist/types/src/components/SearchList.stories.d.ts

@@ -1,15 +0,0 @@
-import '@dxos-theme';
-import React from 'react';
-type StoryItems = Record<string, string>;
-declare const _default: {
-    title: string;
-    component: React.FC<{
-        items: StoryItems;
-    }>;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default _default;
-export declare const Default: {
-    args: {};
-};
-//# sourceMappingURL=SearchList.stories.d.ts.map

package/dist/types/src/components/SearchList.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SearchList.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/SearchList.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAkB,MAAM,OAAO,CAAC;AAOvC,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;;;eAUN,UAAU;;;;AAe7C,wBAIE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

package/dist/types/src/composites/PopoverCombobox.d.ts

@@ -1,32 +0,0 @@
-import React from 'react';
-import { type PopoverArrowProps, type PopoverContentProps, type PopoverViewportProps, type PopoverVirtualTriggerProps } from '@dxos/react-ui';
-import { type ComboboxRootProps, type ComboboxTriggerProps, type SearchListContentProps, type SearchListEmptyProps, type SearchListInputProps, type SearchListItemProps, type SearchListRootProps } from '../components';
-type PopoverComboboxRootProps = ComboboxRootProps & {
-    modal?: boolean;
-};
-type PopoverComboboxContentProps = SearchListRootProps & PopoverContentProps;
-type PopoverComboboxTriggerProps = ComboboxTriggerProps;
-type PopoverComboboxVirtualTriggerProps = PopoverVirtualTriggerProps;
-type PopoverComboboxInputProps = SearchListInputProps;
-type PopoverComboboxListProps = SearchListContentProps & Pick<PopoverViewportProps, 'constrainBlock' | 'constrainInline'>;
-type PopoverComboboxItemProps = SearchListItemProps;
-type PopoverComboboxArrowProps = PopoverArrowProps;
-type PopoverComboboxEmptyProps = SearchListEmptyProps;
-export declare const PopoverCombobox: {
-    Root: ({ modal, children, open: propsOpen, onOpenChange: propsOnOpenChange, defaultOpen, ...props }: PopoverComboboxRootProps) => React.JSX.Element;
-    Content: React.ForwardRefExoticComponent<Omit<PopoverComboboxContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Trigger: React.ForwardRefExoticComponent<Omit<import("@dxos/react-ui").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    VirtualTrigger: {
-        (props: PopoverVirtualTriggerProps & {
-            __scopePopover?: import("@radix-ui/react-context").Scope;
-        }): React.JSX.Element;
-        displayName: string;
-    };
-    Input: React.ForwardRefExoticComponent<Omit<SearchListInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-    List: React.ForwardRefExoticComponent<Omit<PopoverComboboxListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<SearchListItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Arrow: React.ForwardRefExoticComponent<PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
-    Empty: React.ForwardRefExoticComponent<Omit<SearchListEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-};
-export type { PopoverComboboxRootProps, PopoverComboboxContentProps, PopoverComboboxTriggerProps, PopoverComboboxVirtualTriggerProps, PopoverComboboxInputProps, PopoverComboboxListProps, PopoverComboboxItemProps, PopoverComboboxArrowProps, PopoverComboboxEmptyProps, };
-//# sourceMappingURL=PopoverCombobox.d.ts.map

package/dist/types/src/composites/PopoverCombobox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PopoverCombobox.d.ts","sourceRoot":"","sources":["../../../../src/composites/PopoverCombobox.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAChC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAEzB,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,eAAe,CAAC;AAEvB,KAAK,wBAAwB,GAAG,iBAAiB,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAwBxE,KAAK,2BAA2B,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAqE7E,KAAK,2BAA2B,GAAG,oBAAoB,CAAC;AAUxD,KAAK,kCAAkC,GAAG,0BAA0B,CAAC;AAIrE,KAAK,yBAAyB,GAAG,oBAAoB,CAAC;AAItD,KAAK,wBAAwB,GAAG,sBAAsB,GACpD,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,iBAAiB,CAAC,CAAC;AAYnE,KAAK,wBAAwB,GAAG,mBAAmB,CAAC;AAIpD,KAAK,yBAAyB,GAAG,iBAAiB,CAAC;AAInD,KAAK,yBAAyB,GAAG,oBAAoB,CAAC;AAItD,eAAO,MAAM,eAAe;yGA/HzB,wBAAwB;;;;;;;;;;;;;;CAyI1B,CAAC;AAEF,YAAY,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,2BAA2B,EAC3B,kCAAkC,EAClC,yBAAyB,EACzB,wBAAwB,EACxB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,GAC1B,CAAC"}

package/dist/types/src/composites/PopoverCombobox.stories.d.ts

@@ -1,28 +0,0 @@
-import '@dxos-theme';
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: {
-        Root: ({ modal, children, open: propsOpen, onOpenChange: propsOnOpenChange, defaultOpen, ...props }: import("./PopoverCombobox").PopoverComboboxRootProps) => React.JSX.Element;
-        Content: React.ForwardRefExoticComponent<Omit<import("./PopoverCombobox").PopoverComboboxContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-        Trigger: React.ForwardRefExoticComponent<Omit<import("@dxos/react-ui").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-        VirtualTrigger: {
-            (props: import("@dxos/react-ui").PopoverVirtualTriggerProps & {
-                __scopePopover?: import("@radix-ui/react-context").Scope;
-            }): React.JSX.Element;
-            displayName: string;
-        };
-        Input: React.ForwardRefExoticComponent<Omit<import("..").SearchListInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-        List: React.ForwardRefExoticComponent<Omit<import("./PopoverCombobox").PopoverComboboxListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-        Item: React.ForwardRefExoticComponent<Omit<import("..").SearchListItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-        Arrow: React.ForwardRefExoticComponent<import("@dxos/react-ui").PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
-        Empty: React.ForwardRefExoticComponent<Omit<import("..").SearchListEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    };
-    render: () => React.JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default _default;
-export declare const Default: {
-    args: {};
-};
-//# sourceMappingURL=PopoverCombobox.stories.d.ts.map

package/dist/types/src/composites/PopoverCombobox.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PopoverCombobox.stories.d.ts","sourceRoot":"","sources":["../../../../src/composites/PopoverCombobox.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;AA4B1B,wBAKE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

package/dist/types/src/composites/index.d.ts

@@ -1,2 +0,0 @@
-export * from './PopoverCombobox';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/composites/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/composites/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC"}

package/src/components/SearchList.stories.tsx

@@ -1,47 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React, { type FC } from 'react';
-
-import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { SearchList } from './SearchList';
-
-type StoryItems = Record<string, string>;
-
-const defaultItems: StoryItems = faker.helpers
-  .uniqueArray(faker.commerce.productName, 16)
-  .sort()
-  .reduce((acc: StoryItems, label) => {
-    acc[faker.string.uuid()] = label;
-    return acc;
-  }, {});
-
-const SearchListStory: FC<{ items: StoryItems }> = ({ items = defaultItems }) => {
-  return (
-    <SearchList.Root filter={(value, search) => (items[value].includes(search) ? 1 : 0)}>
-      <SearchList.Input placeholder='Search...' />
-      <SearchList.Content>
-        {Object.entries(items).map(([value, label]) => (
-          <SearchList.Item key={value} value={value} onSelect={(value) => console.log('[item select]', value)}>
-            {label}
-          </SearchList.Item>
-        ))}
-      </SearchList.Content>
-    </SearchList.Root>
-  );
-};
-
-export default {
-  title: 'ui/react-ui-searchlist/SearchList',
-  component: SearchListStory,
-  decorators: [withTheme],
-};
-
-export const Default = {
-  args: {},
-};