@dxos/react-ui-searchlist 0.8.4-main.f9ba587 → 0.8.4-main.fffef41

package/dist/lib/browser/index.mjs

@@ -1,23 +1,42 @@
-// src/components/SearchList.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import { CaretDown } from "@phosphor-icons/react";
+// src/components/Combobox/Combobox.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import { createContext } from "@radix-ui/react-context";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React2, { forwardRef as forwardRef2, useCallback } from "react";
+import { Button, Icon, Popover } from "@dxos/react-ui";
+import { useId } from "@dxos/react-ui";
+import { mx as mx2, staticPlaceholderText } from "@dxos/react-ui-theme";
+
+// src/components/SearchList/SearchList.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from "cmdk";
-import React, { forwardRef, useCallback } from "react";
-import { Button, useDensityContext, useElevationContext, useId, useThemeContext } from "@dxos/react-ui";
-import { getSize, mx, staticPlaceholderText } from "@dxos/react-ui-theme";
-var COMBOBOX_NAME = "Combobox";
-var COMBOBOX_TRIGGER_NAME = "ComboboxTrigger";
+import React, { forwardRef } from "react";
+import { useDensityContext, useElevationContext, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { mx } from "@dxos/react-ui-theme";
+
+// src/translations.ts
+var translationKey = "react-ui-searchlist";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "search.placeholder": "Search..."
+      }
+    }
+  }
+];
+
+// src/components/SearchList/SearchList.tsx
+var commandItem = "flex items-center overflow-hidden";
+var searchListItem = "plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected]:bg-hoverOverlay hover:bg-hoverOverlay";
 var SEARCHLIST_NAME = "SearchList";
 var SEARCHLIST_ITEM_NAME = "SearchListItem";
-var [ComboboxProvider, useComboboxContext] = createContext(COMBOBOX_NAME, {});
 var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
   var _effect = _useSignals();
   try {
     return /* @__PURE__ */ React.createElement(CommandRoot, {
       ...props,
-      className: mx("", classNames),
+      className: mx(classNames),
       ref: forwardedRef
     }, children);
   } finally {
@@ -25,15 +44,18 @@ var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...prop
   }
 });
 SearchListRoot.displayName = SEARCHLIST_NAME;
-var SearchListInput = /* @__PURE__ */ forwardRef(({ children, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+var SearchListInput = /* @__PURE__ */ forwardRef(({ classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
   var _effect = _useSignals();
   try {
+    const { t } = useTranslation(translationKey);
+    const placeholder = props.placeholder ?? t("search.placeholder");
     const { hasIosKeyboard } = useThemeContext();
     const { tx } = useThemeContext();
     const density = useDensityContext(propsDensity);
     const elevation = useElevationContext(propsElevation);
     return /* @__PURE__ */ React.createElement(CommandInput, {
       ...props,
+      placeholder,
       className: tx("input.input", "input", {
         variant,
         disabled: props.disabled,
@@ -73,23 +95,12 @@ var SearchListEmpty = /* @__PURE__ */ forwardRef(({ children, classNames, ...pro
     _effect.f();
   }
 });
-var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, onSelect, ...props }, forwardedRef) => {
+var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
   var _effect = _useSignals();
   try {
-    const { onValueChange, onOpenChange } = useComboboxContext(SEARCHLIST_ITEM_NAME);
-    const handleSelect = useCallback((nextValue) => {
-      onValueChange?.(nextValue);
-      onOpenChange?.(false);
-      onSelect?.(nextValue);
-    }, [
-      onValueChange,
-      onOpenChange,
-      onSelect
-    ]);
     return /* @__PURE__ */ React.createElement(CommandItem, {
       ...props,
-      onSelect: handleSelect,
-      className: mx("p-1 rounded select-none cursor-pointer data-[selected]:bg-hoverOverlay", classNames),
+      className: mx(searchListItem, classNames),
       ref: forwardedRef
     }, children);
   } finally {
@@ -97,8 +108,22 @@ var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, onSelec
   }
 });
 SearchListItem.displayName = SEARCHLIST_ITEM_NAME;
-var ComboboxRoot = ({ modalId: propsModalId, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, value: propsValue, defaultValue, onValueChange: propsOnValueChange, placeholder, children }) => {
-  var _effect = _useSignals();
+var SearchList = {
+  Root: SearchListRoot,
+  Input: SearchListInput,
+  Content: SearchListContent,
+  Empty: SearchListEmpty,
+  Item: SearchListItem
+};
+
+// src/components/Combobox/Combobox.tsx
+var COMBOBOX_NAME = "Combobox";
+var COMBOBOX_CONTENT_NAME = "ComboboxContent";
+var COMBOBOX_ITEM_NAME = "ComboboxItem";
+var COMBOBOX_TRIGGER_NAME = "ComboboxTrigger";
+var [ComboboxProvider, useComboboxContext] = createContext(COMBOBOX_NAME, {});
+var ComboboxRoot = ({ modal, modalId: propsModalId, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, value: propsValue, defaultValue, onValueChange: propsOnValueChange, placeholder, children }) => {
+  var _effect = _useSignals2();
   try {
     const modalId = useId(COMBOBOX_NAME, propsModalId);
     const [open = false, onOpenChange] = useControllableState({
@@ -111,22 +136,63 @@ var ComboboxRoot = ({ modalId: propsModalId, open: propsOpen, defaultOpen, onOpe
       onChange: propsOnValueChange,
       defaultProp: defaultValue
     });
-    return /* @__PURE__ */ React.createElement(ComboboxProvider, {
+    return /* @__PURE__ */ React2.createElement(Popover.Root, {
+      open,
+      onOpenChange,
+      modal
+    }, /* @__PURE__ */ React2.createElement(ComboboxProvider, {
       isCombobox: true,
       modalId,
+      placeholder,
       open,
       onOpenChange,
       value,
-      onValueChange,
-      placeholder
-    }, children);
+      onValueChange
+    }, children));
   } finally {
     _effect.f();
   }
 };
-ComboboxRoot.displayName = COMBOBOX_NAME;
-var ComboboxTrigger = /* @__PURE__ */ forwardRef(({ children, onClick, ...props }, forwardedRef) => {
-  var _effect = _useSignals();
+var ComboboxContent = /* @__PURE__ */ forwardRef2(({ side = "bottom", collisionPadding = 48, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, arrowPadding, sticky, hideWhenDetached, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, forceMount, children, classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals2();
+  try {
+    const { modalId } = useComboboxContext(COMBOBOX_CONTENT_NAME);
+    return /* @__PURE__ */ React2.createElement(Popover.Content, {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      avoidCollisions,
+      collisionBoundary,
+      collisionPadding,
+      arrowPadding,
+      sticky,
+      hideWhenDetached,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      forceMount,
+      classNames: [
+        "is-[--radix-popover-trigger-width] max-bs-[--radix-popover-content-available-height] grid grid-rows-[min-content_1fr]",
+        classNames
+      ],
+      id: modalId,
+      ref: forwardedRef
+    }, /* @__PURE__ */ React2.createElement(SearchList.Root, {
+      ...props,
+      classNames: "contents density-fine",
+      role: "none"
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
+ComboboxContent.displayName = COMBOBOX_CONTENT_NAME;
+var ComboboxTrigger = /* @__PURE__ */ forwardRef2(({ children, onClick, ...props }, forwardedRef) => {
+  var _effect = _useSignals2();
   try {
     const { modalId, open, onOpenChange, placeholder, value } = useComboboxContext(COMBOBOX_TRIGGER_NAME);
     const handleClick = useCallback((event) => {
@@ -136,7 +202,9 @@ var ComboboxTrigger = /* @__PURE__ */ forwardRef(({ children, onClick, ...props
       onClick,
       onOpenChange
     ]);
-    return /* @__PURE__ */ React.createElement(Button, {
+    return /* @__PURE__ */ React2.createElement(Popover.Trigger, {
+      asChild: true
+    }, /* @__PURE__ */ React2.createElement(Button, {
       ...props,
       role: "combobox",
       "aria-expanded": open,
@@ -144,150 +212,228 @@ var ComboboxTrigger = /* @__PURE__ */ forwardRef(({ children, onClick, ...props
       "aria-haspopup": "dialog",
       onClick: handleClick,
       ref: forwardedRef
-    }, children ?? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
-      className: mx("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
-    }, value || placeholder), /* @__PURE__ */ React.createElement(CaretDown, {
-      weight: "bold",
-      className: getSize(3)
-    })));
+    }, children ?? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", {
+      className: mx2("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
+    }, value || placeholder), /* @__PURE__ */ React2.createElement(Icon, {
+      icon: "ph--caret-down--bold",
+      size: 3
+    }))));
   } finally {
     _effect.f();
   }
 });
 ComboboxTrigger.displayName = COMBOBOX_TRIGGER_NAME;
-var SearchList = {
-  Root: SearchListRoot,
-  Input: SearchListInput,
-  Content: SearchListContent,
-  Empty: SearchListEmpty,
-  Item: SearchListItem
-};
+var ComboboxVirtualTrigger = Popover.VirtualTrigger;
+var ComboboxInput = /* @__PURE__ */ forwardRef2(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals2();
+  try {
+    return /* @__PURE__ */ React2.createElement(SearchList.Input, {
+      ...props,
+      classNames: [
+        "mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]",
+        classNames
+      ],
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ComboboxList = /* @__PURE__ */ forwardRef2(({ classNames, ...props }, forwardedRef) => {
+  var _effect = _useSignals2();
+  try {
+    return /* @__PURE__ */ React2.createElement(SearchList.Content, {
+      ...props,
+      classNames: [
+        "min-bs-0 overflow-y-auto plb-cardSpacingChrome",
+        classNames
+      ],
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var ComboboxItem = /* @__PURE__ */ forwardRef2(({ classNames, onSelect, ...props }, forwardedRef) => {
+  var _effect = _useSignals2();
+  try {
+    const { onValueChange, onOpenChange } = useComboboxContext(COMBOBOX_ITEM_NAME);
+    const handleSelect = useCallback((nextValue) => {
+      onSelect?.(nextValue);
+      onValueChange?.(nextValue);
+      onOpenChange?.(false);
+    }, [
+      onSelect,
+      onValueChange,
+      onOpenChange
+    ]);
+    return /* @__PURE__ */ React2.createElement(SearchList.Item, {
+      ...props,
+      classNames: [
+        "mli-cardSpacingChrome pli-cardSpacingChrome",
+        classNames
+      ],
+      onSelect: handleSelect,
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+ComboboxItem.displayName = COMBOBOX_ITEM_NAME;
+var ComboboxArrow = Popover.Arrow;
+var ComboboxEmpty = SearchList.Empty;
 var Combobox = {
   Root: ComboboxRoot,
+  Content: ComboboxContent,
   Trigger: ComboboxTrigger,
-  useComboboxContext
+  VirtualTrigger: ComboboxVirtualTrigger,
+  Input: ComboboxInput,
+  List: ComboboxList,
+  Item: ComboboxItem,
+  Arrow: ComboboxArrow,
+  Empty: ComboboxEmpty
 };
 
-// src/composites/PopoverCombobox.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+// src/components/Listbox/Listbox.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import { useArrowNavigationGroup } from "@fluentui/react-tabster";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { createContextScope } from "@radix-ui/react-context";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React2, { forwardRef as forwardRef2 } from "react";
-import { Popover } from "@dxos/react-ui";
-var PopoverComboboxRoot = ({ modal, children, open: propsOpen, onOpenChange: propsOnOpenChange, defaultOpen, ...props }) => {
-  var _effect = _useSignals2();
+import React3, { forwardRef as forwardRef3, useCallback as useCallback2, useEffect, useRef } from "react";
+import { Icon as Icon2 } from "@dxos/react-ui";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var LISTBOX_NAME = "Listbox";
+var LISTBOX_OPTION_NAME = "ListboxOption";
+var LISTBOX_OPTION_LABEL_NAME = "ListboxOptionLabel";
+var LISTBOX_OPTION_INDICATOR_NAME = "ListboxOptionIndicator";
+var [createListboxContext, createListboxScope] = createContextScope(LISTBOX_NAME, []);
+var [createListboxOptionContext, createListboxOptionScope] = createContextScope(LISTBOX_OPTION_NAME, [
+  createListboxScope
+]);
+var [ListboxProvider, useListboxContext] = createListboxContext(LISTBOX_NAME);
+var [ListboxOptionProvider, useListboxOptionContext] = createListboxOptionContext(LISTBOX_OPTION_NAME);
+var ListboxRoot = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
+  var _effect = _useSignals3();
   try {
-    const [open, onOpenChange] = useControllableState2({
-      prop: propsOpen,
-      onChange: propsOnOpenChange,
-      defaultProp: defaultOpen
+    const { __listboxScope, children, classNames, value: propsValue, defaultValue, onValueChange, autoFocus, ...rootProps } = props;
+    const arrowGroup = useArrowNavigationGroup({
+      axis: "vertical"
     });
-    return /* @__PURE__ */ React2.createElement(Combobox.Root, {
-      open,
-      onOpenChange,
-      ...props
-    }, /* @__PURE__ */ React2.createElement(Popover.Root, {
-      open,
-      onOpenChange,
-      modal
+    const ref = useRef(null);
+    const rootRef = useComposedRefs(ref, forwardedRef);
+    const [selectedValue, setSelectedValue] = useControllableState2({
+      prop: propsValue,
+      defaultProp: defaultValue,
+      onChange: onValueChange
+    });
+    const handleValueChange = (value) => {
+      setSelectedValue(value);
+    };
+    useEffect(() => {
+      ref.current?.querySelector('[aria-selected="true"]')?.focus();
+    }, [
+      autoFocus
+    ]);
+    return /* @__PURE__ */ React3.createElement(ListboxProvider, {
+      scope: __listboxScope,
+      selectedValue,
+      onValueChange: handleValueChange
+    }, /* @__PURE__ */ React3.createElement("ul", {
+      role: "listbox",
+      ...rootProps,
+      className: mx3("is-full p-cardSpacingChrome", classNames),
+      ref: rootRef,
+      ...arrowGroup
     }, children));
   } finally {
     _effect.f();
   }
-};
-var POPOVER_COMBOBOX_CONTENT_NAME = "PopoverComboboxContent";
-var PopoverComboboxContent = /* @__PURE__ */ forwardRef2(({ side = "bottom", collisionPadding = 48, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, arrowPadding, sticky, hideWhenDetached, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, forceMount, children, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals2();
+});
+ListboxRoot.displayName = LISTBOX_NAME;
+var ListboxOption = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
+  var _effect = _useSignals3();
   try {
-    const { modalId } = Combobox.useComboboxContext(POPOVER_COMBOBOX_CONTENT_NAME);
-    return /* @__PURE__ */ React2.createElement(Popover.Content, {
-      side,
-      sideOffset,
-      align,
-      alignOffset,
-      avoidCollisions,
-      collisionBoundary,
-      collisionPadding,
-      arrowPadding,
-      sticky,
-      hideWhenDetached,
-      onOpenAutoFocus,
-      onCloseAutoFocus,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      forceMount,
-      classNames,
-      id: modalId,
+    const { __listboxScope, children, classNames, value, ...rootProps } = props;
+    const { selectedValue, onValueChange } = useListboxContext(LISTBOX_OPTION_NAME, __listboxScope);
+    const isSelected = selectedValue === value;
+    const handleSelect = useCallback2(() => {
+      onValueChange(value);
+    }, [
+      value,
+      onValueChange
+    ]);
+    return /* @__PURE__ */ React3.createElement(ListboxOptionProvider, {
+      scope: __listboxScope,
+      value,
+      isSelected
+    }, /* @__PURE__ */ React3.createElement("li", {
+      role: "option",
+      ...rootProps,
+      "aria-selected": isSelected,
+      tabIndex: 0,
+      className: mx3("dx-focus-ring", commandItem, searchListItem, classNames),
+      onClick: handleSelect,
+      onKeyDown: ({ key }) => {
+        if ([
+          "Enter",
+          " "
+        ].includes(key)) {
+          handleSelect();
+        }
+      },
       ref: forwardedRef
-    }, /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(SearchList.Root, {
-      ...props,
-      classNames: "contents",
-      role: "none"
-    }, children)));
+    }, children));
   } finally {
     _effect.f();
   }
 });
-PopoverComboboxContent.displayName = POPOVER_COMBOBOX_CONTENT_NAME;
-var PopoverComboboxTrigger = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
-  var _effect = _useSignals2();
+ListboxOption.displayName = LISTBOX_OPTION_NAME;
+var ListboxOptionLabel = /* @__PURE__ */ forwardRef3(({ children, classNames, ...rootProps }, forwardedRef) => {
+  var _effect = _useSignals3();
   try {
-    return /* @__PURE__ */ React2.createElement(Popover.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React2.createElement(Combobox.Trigger, {
-      ...props,
+    return /* @__PURE__ */ React3.createElement("span", {
+      ...rootProps,
+      className: mx3("grow truncate", classNames),
       ref: forwardedRef
-    }));
+    }, children);
   } finally {
     _effect.f();
   }
 });
-var PopoverComboboxVirtualTrigger = Popover.VirtualTrigger;
-var PopoverComboboxInput = SearchList.Input;
-var PopoverComboboxList = /* @__PURE__ */ forwardRef2(({ constrainInline, constrainBlock, ...props }, forwardedRef) => {
-  var _effect = _useSignals2();
+ListboxOptionLabel.displayName = LISTBOX_OPTION_LABEL_NAME;
+var ListboxOptionIndicator = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
+  var _effect = _useSignals3();
   try {
-    return /* @__PURE__ */ React2.createElement(Popover.Viewport, {
-      constrainInline,
-      constrainBlock
-    }, /* @__PURE__ */ React2.createElement(SearchList.Content, {
-      ...props,
+    const { __listboxOptionScope, classNames, ...rootProps } = props;
+    const { isSelected } = useListboxOptionContext(LISTBOX_OPTION_INDICATOR_NAME, __listboxOptionScope);
+    return /* @__PURE__ */ React3.createElement(Icon2, {
+      icon: "ph--check--regular",
+      ...rootProps,
+      classNames: mx3(!isSelected && "invisible", classNames),
       ref: forwardedRef
-    }));
+    });
   } finally {
     _effect.f();
   }
 });
-var PopoverComboboxItem = SearchList.Item;
-var PopoverComboboxArrow = Popover.Arrow;
-var PopoverComboboxEmpty = SearchList.Empty;
-var PopoverCombobox = {
-  Root: PopoverComboboxRoot,
-  Content: PopoverComboboxContent,
-  Trigger: PopoverComboboxTrigger,
-  VirtualTrigger: PopoverComboboxVirtualTrigger,
-  Input: PopoverComboboxInput,
-  List: PopoverComboboxList,
-  Item: PopoverComboboxItem,
-  Arrow: PopoverComboboxArrow,
-  Empty: PopoverComboboxEmpty
+ListboxOptionIndicator.displayName = LISTBOX_OPTION_INDICATOR_NAME;
+var Listbox = {
+  Root: ListboxRoot,
+  Option: ListboxOption,
+  OptionLabel: ListboxOptionLabel,
+  OptionIndicator: ListboxOptionIndicator
 };
-
-// src/translations.ts
-var translationKey = "react-ui-searchlist";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {}
-    }
-  }
-];
 export {
   Combobox,
-  PopoverCombobox,
+  Listbox,
   SearchList,
+  commandItem,
+  createListboxScope,
+  searchListItem,
   translationKey,
-  translations
+  translations,
+  useListboxContext
 };
 //# sourceMappingURL=index.mjs.map