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

package/src/select/Select.tsx

@@ -35,42 +35,51 @@ import {
   useListNavigation,
   useTypeahead,
 } from "@floating-ui/react";
-import { Chip, CoreIcons, Icon } from "@react-fabric/core";
-import { isArray, isEmpty } from "@react-fabric/utilities";
-import classNames from "classnames";
+import { Chip, Icon } from "@react-fabric/core";
+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 type { SelectProps } from "../types";
+import { getWrapperProps } from "../utils";
 import { Options } from "./Options";
 import { useSelect } from "./useSelect";
 
-export const Select = <T extends AnyObject = string>({
-  ref,
-  name,
-  value,
-  invalid,
-  readOnly,
-  disabled,
-  required,
-  placeholder,
-  autoFocus,
-  error,
-  options,
-  groupProperty,
-  labelProperty = "label" as AnyObject,
-  valueProperty = "id" as AnyObject,
-  multiple,
-  searchable,
-  allowCreate,
-  createOption,
-  matcher,
-  renderer,
-  onQuery,
-  onChange,
-  onSelect,
-  onEnterPressed,
-  ...rest
-}: SelectProps<T>) => {
+/**
+ * Select component for selecting items from a dropdown list.
+ * It supports single and multiple selections, searching, creating new options,
+ * and custom rendering of options.
+ */
+export function Select<T extends AnyObject = string>(props: SelectProps<T>) {
+  const {
+    ref,
+    name,
+    value,
+    invalid,
+    readOnly,
+    disabled,
+    placeholder,
+    autoFocus,
+    options,
+    defaultOpen,
+    hideHandle,
+    groupProperty,
+    labelProperty = "label",
+    valueProperty = "value",
+    sortProperty,
+    infoProperty,
+    multiple,
+    searchable,
+    allowClear,
+    allowCreate,
+    emptyDisplay,
+    createOption,
+    matcher,
+    renderer,
+    onQuery,
+    onChange,
+    onSelect,
+    onEnterPressed,
+  } = props;
   const {
     state,
     listRef,
@@ -86,9 +95,11 @@ export const Select = <T extends AnyObject = string>({
     value,
     options,
     multiple,
+    defaultOpen,
     groupProperty,
     labelProperty,
     valueProperty,
+    sortProperty,
     allowCreate,
     createOption,
     matcher,
@@ -97,12 +108,12 @@ export const Select = <T extends AnyObject = string>({
     onQuery,
   });
 
-  const dropdownKey = useId();
+  const dropdownKeyId = useId();
 
-  const { context, floatingStyles, refs } = useFloating({
+  const { context, floatingStyles, refs, placement } = useFloating({
     open: state.open,
-    onOpenChange: (open, evt, reason) => {
-      !open && (listRef.current = []);
+    onOpenChange: (open) => {
+      if (!open) listRef.current = [];
       setOpen(open);
     },
     strategy: "fixed",
@@ -135,35 +146,33 @@ export const Select = <T extends AnyObject = string>({
       return list.find((item) => macthOption(item, typedString));
     },
     onMatch(index) {
-      state.open && setActiveIndex(index);
+      if (state.open) setActiveIndex(index);
 
-      !searchable &&
-        !multiple &&
-        !state.open &&
-        handleChange(listContentRef.current[index]);
+      if (!searchable && !multiple && !state.open) handleChange(listContentRef.current[index]);
     },
   });
 
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
-    [dismiss, searchable ? undefined : click, navigation, typeahead],
-  );
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    dismiss,
+    searchable ? undefined : click,
+    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("");
-        setOpen(false);
+        // setOpen(false);
       },
-      onKeyDown(evt: React.KeyboardEvent) {
+      onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>) {
         if (evt.key === "Enter") {
           if (state.activeIndex !== null) {
             handleChange(listContentRef.current[state.activeIndex]);
@@ -172,111 +181,146 @@ export const Select = <T extends AnyObject = string>({
             return false;
           } else if (state.query) {
             handleQuery("");
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
           } else {
             onEnterPressed?.(evt);
           }
         } else if (evt.key === "Tab" && state.activeIndex !== null) {
           handleChange(listContentRef.current[state.activeIndex]);
         } else if (evt.key === "Backspace") {
-          !state.query && handleRemove();
+          if (!state.query) handleRemove();
         } else if (!searchable || ["ArrowUp", "ArrowDown"].includes(evt.key)) {
-          if (
-            ["ArrowUp", "ArrowDown"].includes(evt.key) &&
-            state.activeIndex === null
-          ) {
+          if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
             setActiveIndex(state.selectedIndex);
           }
           setTimeout(() => {
+            // @ts-expect-error ignore
             props.onKeyDown?.(evt);
           }, 50);
         }
       },
-    };
+    } as KeyValue;
   }, [
     getReferenceProps,
-    onEnterPressed,
+    dropdownKeyId,
     handleQuery,
-    refs,
-    state.query,
+    refs.domReference,
     state.activeIndex,
+    state.query,
+    state.selectedIndex,
+    searchable,
+    handleChange,
+    listContentRef,
+    onEnterPressed,
+    handleRemove,
+    setActiveIndex,
   ]);
 
   const floatingProps = useMemo(() => {
     return getFloatingProps({
-      "data-select-dropdown": dropdownKey,
-    } as AnyObject);
-  }, [getFloatingProps]);
+      // @ts-expect-error ignore
+      "data-select-dropdown": dropdownKeyId,
+    });
+  }, [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({
+        // @ts-expect-error ignore
         "data-selected": selected ? true : undefined,
         onClick() {
           handleChange(item);
         },
-      } as AnyObject);
+      });
     },
     [getItemProps, handleChange, state.value],
   );
 
   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 className="self-center pointer-events-none select-none">
-          {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]);
 
   const openDropdown = useCallback(() => {
     setOpen(true);
     refs.domReference.current?.querySelector("input")?.focus();
-  }, []);
+  }, [refs.domReference, setOpen]);
 
   useLayoutEffect(() => {
-    state.open &&
-      setTimeout(() => {
-        state.selectedIndex &&
+    if (state.open) {
+      const tmr = setTimeout(() => {
+        if (state.selectedIndex)
           listRef.current[state.selectedIndex]?.scrollIntoView({
-            block: "center",
+            block: "nearest",
           });
       }, 100);
-  }, [state.open]);
+      return () => {
+        clearTimeout(tmr);
+      };
+    }
+  }, [listRef, state.open, state.selectedIndex]);
 
   return (
     <InputWrapper
-      showClear={!isEmpty(state.value)}
+      showClear={allowClear && !isEmpty(state.value)}
       onClear={handleChange}
-      invalid={invalid}
-      readOnly={readOnly}
-      disabled={disabled}
-      required={required}
-      error={error}
-      wrapperRef={refs.setReference}
-      className={state.open ? "!z-[99]" : ""}
-      {...rest}
+      isOpen={state.open}
+      ref={(el) => refs.setReference(el)}
+      className={cn(
+        state.open ? "z-99!" : "",
+        "rounded-capped",
+        state.open && (placement === "top" ? "rounded-t-none" : "rounded-b-none"),
+      )}
+      {...getWrapperProps(props)}
+      actionButton={
+        <>
+          {!state.loading && !hideHandle && (
+            <button type="button" className="size-fit leading-0 cursor-pointer" onClick={() => !disabled && openDropdown()}>
+              <Icon
+                className={cn(
+                  "flex-content py-2 z-0 order-9 text-muted cursor-pointer self-stretch flex items-center h-auto",
+                  state.open && "-scale-y-100 pointer-events-none",
+                  disabled && "pointer-events-none",
+                )}
+                icon="icon-[mdi--chevron-down]"
+              />
+            </button>
+          )}
+          {state.loading && (
+            <Icon
+              className={cn("flex-content p-2 z-0 order-9 text-muted pointer-events-none")}
+              icon="icon-[svg-spinners--eclipse]"
+            />
+          )}
+        </>
+      }
     >
       <div
         role="none"
         data-select-display="true"
-        className={classNames(
+        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()
-        }
+        onMouseUp={(e) => e.currentTarget.querySelector<HTMLElement>("input")?.focus()}
       >
         {displayValue}
         <input
@@ -288,46 +332,26 @@ export const Select = <T extends AnyObject = string>({
           name={name}
           size={1}
           ref={ref}
-          autoFocus={autoFocus}
-          className={classNames(
-            "appearance-none bg-transparent outline-none border-none ring-0 flex-1",
+          autoComplete="off"
+          {...{ autoFocus }}
+          className={cn(
+            "appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer",
             disabled && "cursor-not-allowed pointer-events-none",
-            multiple && "min-w-24",
+            multiple ? "min-w-24" : "min-w-2",
           )}
           placeholder={isEmpty(state.value) ? placeholder : ""}
           onChange={(evt) => handleQuery(evt.target.value)}
         />
       </div>
-      {!state.loading && (
-        <Icon
-          className={classNames(
-            "flex-content p-2 z-0 order-9 text-muted cursor-pointer self-stretch flex items-center h-auto",
-            state.open && "-scale-y-100 pointer-events-none",
-            disabled && "pointer-events-none",
-          )}
-          onClick={() => !disabled && openDropdown()}
-          icon={CoreIcons.chevronDown}
-        />
-      )}
-      {state.loading && (
-        <Icon
-          animate="spin"
-          className={classNames(
-            "flex-content p-2 z-0 order-9 text-muted pointer-events-none",
-          )}
-          icon={CoreIcons.spinner}
-        />
-      )}
       {state.open && !state.loading && (
-        <FloatingPortal>
-          <FloatingFocusManager
-            context={context}
-            initialFocus={-1}
-            visuallyHiddenDismiss
-          >
+        <FloatingPortal root={refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
+          <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss closeOnFocusOut>
             <Options
-              ref={refs.setFloating}
-              className="outline shadow-lg max-h-[40vh] z-[var(--z-popover)]"
+              ref={(el) => refs.setFloating(el)}
+              className={cn(
+                "outline rounded-capped shadow-lg max-h-[40vh] z-(--z-popover)",
+                state.open && (placement === "top" ? "rounded-b-none" : "rounded-t-none"),
+              )}
               style={{
                 width: refs.reference.current?.getBoundingClientRect().width,
                 ...floatingStyles,
@@ -339,12 +363,14 @@ export const Select = <T extends AnyObject = string>({
               labelProperty={labelProperty}
               itemRef={setItemRef}
               itemProps={makeItemProps}
+              empty={emptyDisplay}
+              info={getByPath(state.activeItem as KeyValue, infoProperty ?? "info")}
             >
-              {(item, label) => renderer?.(item) ?? label}
+              {(item, label) => renderer?.(item as T) ?? label}
             </Options>
           </FloatingFocusManager>
         </FloatingPortal>
       )}
     </InputWrapper>
   );
-};
+}

package/src/select/helpers.ts

@@ -21,16 +21,21 @@
  * 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-return */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
 import { isArray } from "@react-fabric/utilities";
 
-export const makeOption = (query: string) => query;
+export function makeOption(query: string) {
+  return query;
+}
 
-export const getSelectedValue = (
+export function getSelectedValue(
   value: AnyObject,
-  emptyValue: AnyObject,
-  valueProperty: AnyObject = "",
-) => {
+  emptyValue: string | string[],
+  valueProperty: string = "",
+): string | string[] {
   return isArray(value)
-    ? value.map((val: AnyObject) => val[valueProperty] ?? val)
-    : value?.[valueProperty] ?? value ?? emptyValue;
-};
+    ? value.map((val) => val[valueProperty] ?? val).filter(Boolean)
+    : (value?.[valueProperty] ?? value ?? emptyValue);
+}