@dxos/react-ui-searchlist 0.8.3 → 0.8.4-main.1068cf700f

package/src/components/Listbox/Listbox.tsx

@@ -0,0 +1,214 @@
+//
+// 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/ui-theme';
+
+const commandItem = 'flex items-center overflow-hidden';
+
+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',
+            'plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected=true]:bg-hoverOverlay hover:bg-hoverOverlay',
+            commandItem,
+            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';