@dxos/react-ui-searchlist 0.8.4-main.28f8d3d → 0.8.4-main.2c6827d

package/dist/lib/browser/index.mjs

@@ -1,22 +1,42 @@
-// src/components/SearchList.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+// 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, Icon, useDensityContext, useElevationContext, useId, useThemeContext } from "@dxos/react-ui";
-import { 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 {
@@ -24,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,
@@ -72,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 {
@@ -96,64 +108,6 @@ 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();
-  try {
-    const modalId = useId(COMBOBOX_NAME, propsModalId);
-    const [open = false, onOpenChange] = useControllableState({
-      prop: propsOpen,
-      onChange: propsOnOpenChange,
-      defaultProp: defaultOpen
-    });
-    const [value = "", onValueChange] = useControllableState({
-      prop: propsValue,
-      onChange: propsOnValueChange,
-      defaultProp: defaultValue
-    });
-    return /* @__PURE__ */ React.createElement(ComboboxProvider, {
-      isCombobox: true,
-      modalId,
-      open,
-      onOpenChange,
-      value,
-      onValueChange,
-      placeholder
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-ComboboxRoot.displayName = COMBOBOX_NAME;
-var ComboboxTrigger = /* @__PURE__ */ forwardRef(({ children, onClick, ...props }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    const { modalId, open, onOpenChange, placeholder, value } = useComboboxContext(COMBOBOX_TRIGGER_NAME);
-    const handleClick = useCallback((event) => {
-      onClick?.(event);
-      onOpenChange?.(true);
-    }, [
-      onClick,
-      onOpenChange
-    ]);
-    return /* @__PURE__ */ React.createElement(Button, {
-      ...props,
-      role: "combobox",
-      "aria-expanded": open,
-      "aria-controls": modalId,
-      "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(Icon, {
-      icon: "ph--caret-down--bold",
-      size: 3
-    })));
-  } finally {
-    _effect.f();
-  }
-});
-ComboboxTrigger.displayName = COMBOBOX_TRIGGER_NAME;
 var SearchList = {
   Root: SearchListRoot,
   Input: SearchListInput,
@@ -161,43 +115,48 @@ var SearchList = {
   Empty: SearchListEmpty,
   Item: SearchListItem
 };
-var Combobox = {
-  Root: ComboboxRoot,
-  Trigger: ComboboxTrigger,
-  useComboboxContext
-};
 
-// src/composites/PopoverCombobox.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-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 }) => {
+// 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 [open, onOpenChange] = useControllableState2({
+    const modalId = useId(COMBOBOX_NAME, propsModalId);
+    const [open = false, onOpenChange] = useControllableState({
       prop: propsOpen,
       onChange: propsOnOpenChange,
       defaultProp: defaultOpen
     });
-    return /* @__PURE__ */ React2.createElement(Combobox.Root, {
+    const [value = "", onValueChange] = useControllableState({
+      prop: propsValue,
+      onChange: propsOnValueChange,
+      defaultProp: defaultValue
+    });
+    return /* @__PURE__ */ React2.createElement(Popover.Root, {
       open,
       onOpenChange,
-      ...props
-    }, /* @__PURE__ */ React2.createElement(Popover.Root, {
+      modal
+    }, /* @__PURE__ */ React2.createElement(ComboboxProvider, {
+      isCombobox: true,
+      modalId,
+      placeholder,
       open,
       onOpenChange,
-      modal
+      value,
+      onValueChange
     }, 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 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 } = Combobox.useComboboxContext(POPOVER_COMBOBOX_CONTENT_NAME);
+    const { modalId } = useComboboxContext(COMBOBOX_CONTENT_NAME);
     return /* @__PURE__ */ React2.createElement(Popover.Content, {
       side,
       sideOffset,
@@ -216,40 +175,62 @@ var PopoverComboboxContent = /* @__PURE__ */ forwardRef2(({ side = "bottom", col
       onFocusOutside,
       onInteractOutside,
       forceMount,
-      classNames,
+      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(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(SearchList.Root, {
+    }, /* @__PURE__ */ React2.createElement(SearchList.Root, {
       ...props,
       classNames: "contents density-fine",
       role: "none"
-    }, children)));
+    }, children));
   } finally {
     _effect.f();
   }
 });
-PopoverComboboxContent.displayName = POPOVER_COMBOBOX_CONTENT_NAME;
-var PopoverComboboxTrigger = /* @__PURE__ */ forwardRef2((props, forwardedRef) => {
+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) => {
+      onClick?.(event);
+      onOpenChange?.(true);
+    }, [
+      onClick,
+      onOpenChange
+    ]);
     return /* @__PURE__ */ React2.createElement(Popover.Trigger, {
       asChild: true
-    }, /* @__PURE__ */ React2.createElement(Combobox.Trigger, {
+    }, /* @__PURE__ */ React2.createElement(Button, {
       ...props,
+      role: "combobox",
+      "aria-expanded": open,
+      "aria-controls": modalId,
+      "aria-haspopup": "dialog",
+      onClick: handleClick,
       ref: forwardedRef
-    }));
+    }, 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();
   }
 });
-var PopoverComboboxVirtualTrigger = Popover.VirtualTrigger;
-var PopoverComboboxInput = /* @__PURE__ */ forwardRef2(({ classNames, ...props }, forwardedRef) => {
+ComboboxTrigger.displayName = COMBOBOX_TRIGGER_NAME;
+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 is-[calc(100%-2*var(--dx-cardSpacingChrome))]",
+        "mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]",
         classNames
       ],
       ref: forwardedRef
@@ -258,63 +239,201 @@ var PopoverComboboxInput = /* @__PURE__ */ forwardRef2(({ classNames, ...props }
     _effect.f();
   }
 });
-var PopoverComboboxList = /* @__PURE__ */ forwardRef2(({ constrainInline, constrainBlock, ...props }, forwardedRef) => {
+var ComboboxList = /* @__PURE__ */ forwardRef2(({ classNames, ...props }, forwardedRef) => {
   var _effect = _useSignals2();
   try {
-    return /* @__PURE__ */ React2.createElement(Popover.Viewport, {
-      constrainInline,
-      constrainBlock
-    }, /* @__PURE__ */ React2.createElement(SearchList.Content, {
+    return /* @__PURE__ */ React2.createElement(SearchList.Content, {
       ...props,
+      classNames: [
+        "min-bs-0 overflow-y-auto plb-cardSpacingChrome",
+        classNames
+      ],
       ref: forwardedRef
-    }));
+    });
   } finally {
     _effect.f();
   }
 });
-var PopoverComboboxItem = /* @__PURE__ */ forwardRef2(({ classNames, ...props }, forwardedRef) => {
+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();
   }
 });
-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
+ComboboxItem.displayName = COMBOBOX_ITEM_NAME;
+var ComboboxArrow = Popover.Arrow;
+var ComboboxEmpty = SearchList.Empty;
+var Combobox = {
+  Root: ComboboxRoot,
+  Content: ComboboxContent,
+  Trigger: ComboboxTrigger,
+  VirtualTrigger: ComboboxVirtualTrigger,
+  Input: ComboboxInput,
+  List: ComboboxList,
+  Item: ComboboxItem,
+  Arrow: ComboboxArrow,
+  Empty: ComboboxEmpty
 };
 
-// src/translations.ts
-var translationKey = "react-ui-searchlist";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {}
-    }
+// 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 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 { __listboxScope, children, classNames, value: propsValue, defaultValue, onValueChange, autoFocus, ...rootProps } = props;
+    const arrowGroup = useArrowNavigationGroup({
+      axis: "vertical"
+    });
+    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();
   }
-];
+});
+ListboxRoot.displayName = LISTBOX_NAME;
+var ListboxOption = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
+  var _effect = _useSignals3();
+  try {
+    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
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
+ListboxOption.displayName = LISTBOX_OPTION_NAME;
+var ListboxOptionLabel = /* @__PURE__ */ forwardRef3(({ children, classNames, ...rootProps }, forwardedRef) => {
+  var _effect = _useSignals3();
+  try {
+    return /* @__PURE__ */ React3.createElement("span", {
+      ...rootProps,
+      className: mx3("grow truncate", classNames),
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+ListboxOptionLabel.displayName = LISTBOX_OPTION_LABEL_NAME;
+var ListboxOptionIndicator = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
+  var _effect = _useSignals3();
+  try {
+    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();
+  }
+});
+ListboxOptionIndicator.displayName = LISTBOX_OPTION_INDICATOR_NAME;
+var Listbox = {
+  Root: ListboxRoot,
+  Option: ListboxOption,
+  OptionLabel: ListboxOptionLabel,
+  OptionIndicator: ListboxOptionIndicator
+};
 export {
   Combobox,
-  PopoverCombobox,
+  Listbox,
   SearchList,
+  commandItem,
+  createListboxScope,
+  searchListItem,
   translationKey,
-  translations
+  translations,
+  useListboxContext
 };
 //# sourceMappingURL=index.mjs.map