@react-fabric/form 1.0.0-beta.9 → 1.0.2

package/src/select/List.tsx

@@ -30,54 +30,57 @@ import {
   useTypeahead,
 } from "@floating-ui/react";
 import { Chip } from "@react-fabric/core";
-import { isArray, isEmpty } from "@react-fabric/utilities";
-import classNames from "classnames";
-import { Fragment, useCallback, useId, useMemo } from "react";
-import { FieldWrapper } from "../internal/FieldWrapper";
+import { cn, getByPath, isArray, isEmpty } from "@react-fabric/utilities";
+import { useCallback, useId, useLayoutEffect, useMemo } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type SelectProps } from "../types";
+import { getWrapperProps } from "../utils";
 import { Options } from "./Options";
 import { useSelect } from "./useSelect";
 
-export const List = <T extends AnyObject = string>({
-  ref,
-  name,
-  value,
-  readOnly,
-  disabled,
-  required,
-  placeholder,
-  autoFocus,
-  options,
-  height,
-  groupProperty,
-  labelProperty,
-  valueProperty,
-  multiple,
-  allowCreate,
-  createOption,
-  matcher,
-  renderer,
-  onQuery,
-  onChange,
-  onSelect,
-  onEnterPressed,
-  invalid,
-  error,
-  allowClear,
-  decorateStart,
-  decorateEnd,
-  // @ts-expect-error ignore
-  "data-inner": isInner,
-  // @ts-expect-error ignore
-  "data-hide-selected": hideSelected,
-  ...rest
-}: SelectProps<T> & { height?: string | number }) => {
-  const Wrapper = useMemo(() => (isInner ? Fragment : FieldWrapper), [isInner]);
-  const wrapperProps = useMemo(
-    () => (isInner ? {} : { ...rest }),
-    [isInner, rest],
-  );
+/**
+ * List component for selecting items from a list.
+ * It supports single and multiple selections, searching, creating new options,
+ * and custom rendering of options.
+ */
+export function List<T extends AnyObject = string>(
+  props: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
+    height?: string | number;
+  },
+) {
+  const {
+    ref,
+    name,
+    value,
+    readOnly,
+    disabled,
+    placeholder,
+    autoFocus,
+    options,
+    height,
+    groupProperty,
+    labelProperty = "label",
+    valueProperty = "value",
+    infoProperty,
+    sortProperty,
+    multiple,
+    allowCreate,
+    allowClear,
+    searchable,
+    createOption,
+    matcher,
+    renderer,
+    onQuery,
+    onChange,
+    onSelect,
+    onEnterPressed,
+    emptyDisplay,
+    invalid,
+    // @ts-expect-error ignore
+    "data-inner": isInner,
+    // @ts-expect-error ignore
+    "data-hide-selected": hideSelected,
+  } = props;
 
   const {
     state,
@@ -88,14 +91,17 @@ export const List = <T extends AnyObject = string>({
     handleRemove,
     handleQuery,
     setItemRef,
+    clearActiveIndex,
     setActiveIndex,
   } = useSelect({
     value,
     options,
     multiple,
+    alwaysOpen: true,
     groupProperty,
     labelProperty,
     valueProperty,
+    sortProperty,
     allowCreate,
     createOption,
     matcher,
@@ -104,7 +110,7 @@ export const List = <T extends AnyObject = string>({
     onQuery,
   });
 
-  const dropdownKey = useId();
+  const dropdownKeyId = useId();
 
   const { context, refs } = useFloating({
     open: true,
@@ -132,29 +138,25 @@ export const List = <T extends AnyObject = string>({
       return list.find((item) => macthOption(item, typedString));
     },
     onMatch(index) {
-      state.open && setActiveIndex(index);
+      if (state.open) setActiveIndex(index);
     },
   });
 
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
-    [navigation, typeahead],
-  );
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([navigation, typeahead]);
 
   const referenceProps = useMemo(() => {
-    const props: AnyObject = getReferenceProps();
+    const props = getReferenceProps();
 
     return {
       ...props,
       onBlur(evt: React.FocusEvent) {
-        if (
-          evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)
-        ) {
+        if (evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKeyId}"]`)) {
           refs.domReference.current?.querySelector("input")?.focus();
           return;
         }
         handleQuery("");
       },
-      onKeyDown(evt: React.KeyboardEvent) {
+      onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>) {
         if (evt.key === "Enter") {
           if (state.activeIndex !== null) {
             handleChange(listContentRef.current[state.activeIndex]);
@@ -165,44 +167,50 @@ export const List = <T extends AnyObject = string>({
             onEnterPressed?.(evt);
           }
         } else if (evt.key === "Backspace") {
-          !state.query && handleRemove();
-        } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
-          if (state.activeIndex === null) {
-            setActiveIndex(state.selectedIndex);
+          if (!state.query) handleRemove();
+        } else if (!searchable || ["ArrowUp", "ArrowDown"].includes(evt.key)) {
+          if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
+            setActiveIndex(state.selectedIndex ?? 0);
           }
           setTimeout(() => {
+            // @ts-expect-error ignore
             props.onKeyDown?.(evt);
           }, 50);
         }
       },
-    };
+    } as KeyValue;
   }, [
     getReferenceProps,
-    onEnterPressed,
+    dropdownKeyId,
     handleQuery,
-    refs,
-    state.query,
+    refs.domReference,
+    searchable,
     state.activeIndex,
+    state.query,
+    state.selectedIndex,
+    handleChange,
+    listContentRef,
+    onEnterPressed,
+    handleRemove,
+    setActiveIndex,
   ]);
 
   const floatingProps = useMemo(() => {
     return getFloatingProps({
-      "data-select-dropdown": dropdownKey,
-    } as AnyObject);
-  }, [getFloatingProps]);
+      "data-select-dropdown": dropdownKeyId,
+    } as KeyValue);
+  }, [dropdownKeyId, getFloatingProps]);
 
   const makeItemProps = useCallback(
     (item: AnyObject) => {
-      const selected = isArray(state.value)
-        ? state.value?.includes?.(item)
-        : state.value === item;
+      const selected = isArray(state.value) ? state.value?.includes?.(item) : state.value === item;
       return {
         ...getItemProps({
           "data-selected": selected ? true : undefined,
           onClick() {
             handleChange(item);
           },
-        } as AnyObject),
+        } as KeyValue),
         "aria-hidden": undefined,
       };
     },
@@ -211,64 +219,85 @@ export const List = <T extends AnyObject = string>({
 
   const displayValue = useMemo(() => {
     if (isArray(state.value)) {
-      return state.value.map((item: AnyObject, index) => (
+      return state.value.map((item: T, index) => (
+        // eslint-disable-next-line @eslint-react/no-array-index-key
         <Chip key={index} onRemove={() => handleRemove(index)}>
+          {/* @ts-expect-error ignore */}
           {renderer?.(item) ?? item[labelProperty] ?? item}
         </Chip>
       ));
     } else if (!isEmpty(state.value) && !state.query) {
       return (
-        <span>
-          {renderer?.(state.value) ?? state.value[labelProperty] ?? state.value}
+        <span className="self-center pointer-events-none select-none truncate leading-tight">
+          {/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */}
+          {renderer?.(state.value as T) ?? state.value[labelProperty] ?? state.value}
         </span>
       );
     }
-  }, [state.value, state.query, placeholder, renderer]);
+  }, [state.value, state.query, renderer, labelProperty, handleRemove]);
+
+  useLayoutEffect(() => {
+    if (state.open) {
+      const tmr = setTimeout(() => {
+        if (state.selectedIndex)
+          listRef.current[state.selectedIndex]?.scrollIntoView({
+            block: "nearest",
+          });
+      }, 100);
+      return () => {
+        clearTimeout(tmr);
+      };
+    }
+  }, [listRef, state.open, state.selectedIndex]);
 
   return (
-    <Wrapper {...wrapperProps}>
+    <>
       <InputWrapper
-        showClear={!isEmpty(state.value)}
+        showClear={allowClear && !isEmpty(state.value)}
         onClear={handleChange}
-        invalid={invalid}
-        readOnly={readOnly}
-        disabled={disabled}
-        required={required}
-        error={error}
-        className="z-1 rounded-b-none"
-        data-inner={true}
-        wrapperRef={refs.setReference}
+        ref={(el) => refs.setReference(el)}
+        className="z-1 rounded-capped rounded-b-none outline"
+        {...getWrapperProps(props)}
+        borderless={!!isInner}
       >
         <div
+          role="none"
           data-select-display="true"
-          className="group flex-1 py-1 px-2 truncate text-start flex gap-1 flex-wrap"
+          className={cn(
+            "group flex-1 py-1 px-2 truncate text-start flex gap-1 relative min-h-5 justify-start",
+            multiple ? "flex-wrap" : "flex-nowrap overflow-hidden",
+          )}
+          {...referenceProps}
+          onMouseUp={(e) => e.currentTarget.querySelector<HTMLElement>("input")?.focus()}
         >
           {!hideSelected && displayValue}
           <input
+            readOnly={!searchable || readOnly}
             disabled={disabled}
             value={state.query ?? ""}
             aria-invalid={invalid}
             data-testid={name}
             name={name}
-            className={classNames(
+            size={1}
+            ref={ref}
+            autoComplete="off"
+            {...{ autoFocus }}
+            className={cn(
               "appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24",
               disabled && "cursor-not-allowed pointer-events-none",
+              multiple && "min-w-24",
             )}
-            placeholder={isEmpty(state.value) ? placeholder : ""}
-            {...referenceProps}
+            placeholder={!hideSelected && !isEmpty(state.value) ? "" : placeholder}
             onChange={(evt) => handleQuery(evt.target.value)}
           />
         </div>
       </InputWrapper>
-      <FloatingFocusManager
-        context={context}
-        initialFocus={-1}
-        visuallyHiddenDismiss
-      >
+      <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss closeOnFocusOut>
         <Options
-          ref={refs.setFloating}
-          className={classNames(
-            "max-h-96 z-0 rounded-capped rounded-t-none outline",
+          ref={(el) => refs.setFloating(el)}
+          onMouseOut={() => clearActiveIndex()}
+          className={cn(
+            "max-h-96 z-0 rounded-capped! rounded-t-none! outline peer-focus-within:outline-primary-500",
             disabled && "pointer-events-none opacity-65",
           )}
           style={{
@@ -277,12 +306,16 @@ export const List = <T extends AnyObject = string>({
           {...floatingProps}
           items={state.items}
           active={state.activeIndex}
+          valueProperty={valueProperty}
+          labelProperty={labelProperty}
           itemRef={setItemRef}
           itemProps={makeItemProps}
+          empty={emptyDisplay}
+          info={getByPath(state.activeItem as KeyValue, infoProperty ?? "info")}
         >
-          {(item) => renderer?.(item) ?? item[labelProperty] ?? item}
+          {(item, label) => renderer?.(item as T) ?? label}
         </Options>
       </FloatingFocusManager>
-    </Wrapper>
+    </>
   );
-};
+}

package/src/select/Options.tsx

@@ -21,12 +21,18 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @eslint-react/no-array-index-key */
+
 import { EmptyContent } from "@react-fabric/core";
-import classNames from "classnames";
-import { type ReactElement, type ReactNode } from "react";
+import { cn, getByPath } from "@react-fabric/utilities";
 import { Trans } from "react-i18next";
 
-export const Options = ({
+export function Options({
   ref,
   style,
   items,
@@ -34,50 +40,65 @@ export const Options = ({
   className,
   itemRef,
   empty,
-  valueProperty = "id",
+  info,
   labelProperty = "label",
   itemProps,
   children,
-  ...rest
+  onMouseOut,
 }: {
-  ref: AnyObject;
+  ref: React.Ref<HTMLDivElement | null>;
+  info?: AnyObject;
   itemRef: AnyObject;
-  style?: AnyObject;
+  style?: React.CSSProperties;
   items: AnyObject[];
   active: number | null;
   className?: string;
-  empty?: ReactElement;
+  empty?: React.ReactNode;
   valueProperty?: AnyObject;
   labelProperty?: AnyObject;
+  onMouseOut?: () => void;
   itemProps: (item: AnyObject) => AnyObject;
-  children: (item: AnyObject, label: string) => ReactNode;
-} & KeyValue) => {
+  children: (item: AnyObject, label: string) => React.ReactNode;
+}) {
   return (
     <div
       ref={ref}
-      className={classNames(
-        "bg-base select-none overflow-x-hidden overflow-y-auto",
-        className,
-      )}
+      className={cn("bg-default select-none flex flex-col overflow-hidden", className)}
       style={style}
-      {...rest}
+      onMouseLeave={onMouseOut}
     >
-      {items.length === 0 &&
-        (empty ?? (
-          <EmptyContent message={<Trans i18nKey="form:select.emptyList" />} />
-        ))}
-      {items.map((item, index) => {
-        if (item.___group___)
-          return (
-            <p
-              key={index}
-              className="px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t"
-            >
-              {item.label}
-            </p>
-          );
+      <div className={cn("overflow-x-hidden overflow-y-auto flex-1")}>
+        {items.length === 0 && (empty ?? <EmptyContent message={<Trans i18nKey="form:select.emptyList" />} />)}
+        {items.map((item, index) => {
+          if (item.___group___)
+            return (
+              <p key={index} className="px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-default border-t">
+                {item.label}
+              </p>
+            );
+
+          if (item.___create___)
+            return (
+              <div
+                role="none"
+                key={index}
+                tabIndex={active === index ? 0 : -1}
+                ref={(el: AnyObject) => itemRef(index, el)}
+                data-active={active === index ? true : undefined}
+                className={cn(
+                  "block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none",
+                  "data-active:bg-primary-200 data-selected:bg-primary-600 data-selected:text-white data-active:data-selected:underline",
+                )}
+                {...itemProps(item)}
+              >
+                <Trans
+                  i18nKey="form:select.createOption"
+                  values={{ query: item.value ?? item }}
+                  components={[<strong key="t0">query</strong>]}
+                />
+              </div>
+            );
 
-        if (item.___create___)
           return (
             <div
               role="none"
@@ -85,37 +106,18 @@ export const Options = ({
               tabIndex={active === index ? 0 : -1}
               ref={(el: AnyObject) => itemRef(index, el)}
               data-active={active === index ? true : undefined}
-              className={classNames(
-                "block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none",
-                "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline",
+              className={cn(
+                "block text-start truncate px-2 py-1 leading-normal cursor-pointer",
+                "active:bg-primary-200 data-active:bg-primary-200 data-selected:bg-primary-600 data-selected:text-white data-active:data-selected:underline",
               )}
               {...itemProps(item)}
             >
-              <Trans
-                i18nKey="form:select.createOption"
-                values={{ query: item.value }}
-                components={[<strong key="t0">query</strong>]}
-              />
+              {children(item, getByPath(item, labelProperty) ?? `${item}`)}
             </div>
           );
-
-        return (
-          <div
-            role="none"
-            key={index}
-            tabIndex={active === index ? 0 : -1}
-            ref={(el: AnyObject) => itemRef(index, el)}
-            data-active={active === index ? true : undefined}
-            className={classNames(
-              "block text-start truncate px-2 py-1 leading-normal cursor-pointer",
-              "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline",
-            )}
-            {...itemProps(item)}
-          >
-            {children(item, item[labelProperty] ?? item)}
-          </div>
-        );
-      })}
+        })}
+      </div>
+      {info && <div className="px-2 py-1 text-sm bg-dimmed text-muted">{info}</div>}
     </div>
   );
-};
+}