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

package/src/select/useSelect.tsx

@@ -21,23 +21,16 @@
  * 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-call */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
 import { useDebounce } from "@react-fabric/core";
-import {
-  dedupe,
-  EMPTY_ARRAY,
-  groupBy,
-  isArray,
-  isString,
-  matchString,
-} from "@react-fabric/utilities";
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useReducer,
-  useRef,
-} from "react";
+import { compareValues, dedupe, EMPTY_ARRAY, groupBy, isArray, isString, matchString } from "@react-fabric/utilities";
+import { useCallback, useDeferredValue, useEffect, useMemo, useReducer, useRef } from "react";
+import type { SelectProps } from "../types";
 import { getSelectedValue, makeOption } from "./helpers";
 
 type StateActions =
@@ -64,6 +57,7 @@ interface State {
   open: boolean;
   loading: boolean;
   activeIndex: number | null;
+  activeItem: AnyObject;
   selectedIndex: number | null;
   value: AnyObject;
   // filter
@@ -72,37 +66,30 @@ interface State {
   items: AnyObject[];
 }
 
-export const useSelect = ({
-  options = EMPTY_ARRAY,
-  value,
-  autoComplete,
-  multiple = false,
-  allowCreate = false,
-  groupProperty = "",
-  valueProperty = "id",
-  labelProperty = "label",
-  createOption = makeOption,
-  matcher,
-  onQuery,
-  onChange,
-  onSelect,
-}: {
-  value?: AnyObject;
-  options?: AnyObject[];
-  multiple?: boolean;
-  allowCreate?: boolean;
-  groupProperty?: AnyObject;
-  valueProperty?: AnyObject;
-  labelProperty?: AnyObject;
-  autoComplete?: boolean;
-  matcher?: (item: AnyObject, query: string) => boolean;
-  createOption?: (query: string) => AnyObject;
-  onQuery?: (query: string) => AnyObject;
-  onSelect?: (item: AnyObject) => void;
-  onChange?: (value: AnyObject) => void;
-}) => {
+export function useSelect(
+  props: Omit<SelectProps<AnyObject>, "multiple"> & { multiple?: boolean; autoComplete?: boolean; alwaysOpen?: boolean },
+) {
+  const {
+    options = EMPTY_ARRAY,
+    value,
+    autoComplete,
+    alwaysOpen = false,
+    defaultOpen = false,
+    multiple = false,
+    allowCreate = false,
+    groupProperty = "",
+    valueProperty = "value",
+    labelProperty = "label",
+    sortProperty,
+    createOption = makeOption,
+    matcher,
+    onQuery,
+    onChange,
+    onSelect,
+  } = props;
+
   // value state
-  const emptyValue = useMemo(() => (multiple ? [] : ""), [multiple]);
+  const emptyValue = useMemo(() => (multiple ? ([] as string[]) : ""), [multiple]);
   const deferred = useDeferredValue(value ?? emptyValue);
 
   // list items
@@ -111,32 +98,28 @@ export const useSelect = ({
   const listContentRef = useRef<AnyObject[]>([]);
   const optionsRef = useRef<AnyObject[]>([]);
 
-  const macthOption = useCallback(
+  const matchOption = useCallback(
     (item: AnyObject, query: string) => {
-      return (
-        matcher?.(item, query) ??
-        matchString(item[labelProperty] ?? item, query)
-      );
+      return matcher?.(item, query) ?? matchString(item[labelProperty] ?? item, query);
     },
-    [matcher],
+    [labelProperty, matcher],
   );
 
   const fireChange = useCallback(
     (value: AnyObject) => {
       setTimeout(() => {
         onSelect?.(value ?? emptyValue);
+        // @ts-expect-error ignore
         onChange?.(getSelectedValue(value, emptyValue, valueProperty));
       }, 50);
     },
-    [emptyValue, onSelect, onChange],
+    [onSelect, emptyValue, onChange, valueProperty],
   );
 
   const [state, dispatch] = useReducer(
     (state: State, action: StateActions) => {
       if (action.type === "open") {
-        const index = state.items.indexOf(
-          state.multiple ? state.value[0] : state.value,
-        );
+        const index = state.items.indexOf(state.multiple ? state.value[0] : state.value);
         return {
           ...state,
           open: true,
@@ -144,20 +127,21 @@ export const useSelect = ({
         };
       }
       if (action.type === "close") {
-        return { ...state, activeIndex: null, open: false };
+        return { ...state, activeIndex: null, activeItem: null, open: false };
       }
       if (action.type === "active" && state.open) {
-        if (autoComplete && action.index !== null)
-          state.query = state.items[action.index];
-        return { ...state, activeIndex: action.index };
+        if (autoComplete && action.index !== null) state.query = state.items[action.index];
+        return {
+          ...state,
+          activeIndex: action.index,
+          activeItem: action.index !== null ? state.items[action.index] : null,
+        };
       }
       if (action.type === "setValue") {
         return {
           ...state,
           value: action.value,
-          selectedIndex: state.items.indexOf(
-            state.multiple ? action.value[0] : action.value,
-          ),
+          selectedIndex: state.items.indexOf(state.multiple ? action.value[0] : action.value),
         };
       }
       if (action.type === "changeValue") {
@@ -165,17 +149,17 @@ export const useSelect = ({
           ...state,
           value: state.emptyValue,
           activeIndex: null,
+          activeItem: null,
           selectedIndex: autoComplete
             ? state.multiple
-              ? action.value?.length
+              ? (action.value?.length as number)
               : 0
             : state.items.indexOf(action.value),
         };
         if (action.value !== undefined) {
           if (multiple) {
             const values = [];
-            if (isString(action.value))
-              values.push(...action.value.split(/,\s?/));
+            if (isString(action.value)) values.push(...action.value.split(/,\s?/));
             else values.push(action.value);
             newState.value = [...state.value];
             values.forEach((value: AnyObject) => {
@@ -187,7 +171,7 @@ export const useSelect = ({
             newState.value = action.value;
           }
         }
-        if (!state.multiple) newState.open = false;
+        if (!state.multiple) newState.open = alwaysOpen;
         fireChange(newState.value);
         return newState;
       }
@@ -223,6 +207,7 @@ export const useSelect = ({
         if (autoComplete && action.query !== undefined) {
           optionList = dedupe([action.query, ...optionList]);
         }
+        if (sortProperty) optionList = optionList.sort(compareValues("asc", sortProperty !== true ? sortProperty : undefined));
         const grouped = groupBy(optionList, groupProperty, "");
         if (action.open) newState.open = true;
         newState.items = [];
@@ -230,7 +215,7 @@ export const useSelect = ({
         if (allowCreate && action.query)
           newState.items.push({
             ___create___: true,
-            value: createOption(action.query),
+            value: action.query,
           });
         Object.entries(grouped).forEach(([key, list]) => {
           if (key) {
@@ -239,42 +224,40 @@ export const useSelect = ({
           newState.items.push(...list);
         });
         if (action.setActive) {
-          const index = newState.items.findIndex(
-            (opt: AnyObject) => !opt.___group___,
-          );
+          const index = newState.items.findIndex((opt: AnyObject) => !opt.___group___);
           newState.activeIndex = index >= 0 ? index : null;
+          newState.activeItem = index >= 0 ? newState.items[index] : null;
         } else {
           newState.activeIndex = null;
+          newState.activeItem = null;
         }
         listContentRef.current = newState.items;
         return newState;
       }
       return state;
     },
-    {
+    {},
+    () => ({
       multiple,
       emptyValue,
-      open: false,
+      open: alwaysOpen || defaultOpen,
       loading: false,
       activeIndex: null,
+      activeItem: null,
       selectedIndex: null,
       value: emptyValue,
       // filter
       query: undefined,
       // dropdown items
       items: [],
-    },
+    }),
   );
 
   useEffect(() => {
     if (!multiple) {
-      const newOption =
-        (allowCreate || autoComplete) && deferred
-          ? createOption(deferred)
-          : undefined;
-      const hasValue = options.find(
-        (opt: AnyObject) => (opt[valueProperty] ?? opt) === deferred,
-      );
+      // @ts-expect-error ignore
+      const newOption = (allowCreate || autoComplete) && deferred ? createOption(deferred) : undefined;
+      const hasValue = options.find((opt: AnyObject) => (opt[valueProperty] ?? opt) === deferred);
       optionsRef.current = options;
       // if current value missing in list inject it
       if (!hasValue && newOption) {
@@ -283,26 +266,19 @@ export const useSelect = ({
       dispatch({ type: "options", options: optionsRef.current });
       dispatch({
         type: "setValue",
-        value: hasValue ?? newOption ?? "",
+        value: hasValue ?? newOption ?? deferred,
       });
     }
     if (multiple) {
       optionsRef.current = [];
-      const value = (isArray(deferred) ? deferred : []).map(
-        (item: AnyObject) => {
-          const newOption =
-            (allowCreate || autoComplete) && item
-              ? createOption(item)
-              : undefined;
-          const hasValue = options.find(
-            (opt: AnyObject) => (opt[valueProperty] ?? opt) === deferred,
-          );
-          if (!hasValue && newOption) {
-            optionsRef.current.push(newOption);
-          }
-          return hasValue ?? newOption ?? "";
-        },
-      );
+      const value = (isArray(deferred) ? deferred : []).map((item: AnyObject) => {
+        const newOption = (allowCreate || autoComplete) && item ? createOption(item) : undefined;
+        const hasValue = options.find((opt: AnyObject) => (opt[valueProperty] ?? opt) === item);
+        if (!hasValue && newOption) {
+          optionsRef.current.push(newOption);
+        }
+        return hasValue ?? newOption ?? item;
+      });
       optionsRef.current = [...optionsRef.current, ...(options ?? [])];
       dispatch({ type: "options", options: optionsRef.current });
       dispatch({
@@ -310,17 +286,18 @@ export const useSelect = ({
         value,
       });
     }
-  }, [deferred, options, multiple, allowCreate, autoComplete, createOption]);
+  }, [deferred, options, multiple, allowCreate, autoComplete, createOption, valueProperty]);
 
   const fireQuery = useDebounce(
     (query: string) => {
       void Promise.resolve(onQuery?.(query)).then((options) => {
+        // @ts-expect-error ignore
         const newOptions = [...options];
         // if autocomplete inject other filtered options from history
         if (autoComplete) {
           newOptions.push(
             ...optionsRef.current.filter((opt: AnyObject) => {
-              return macthOption?.(opt, query);
+              return matchOption?.(opt, query);
             }),
           );
         }
@@ -334,6 +311,7 @@ export const useSelect = ({
       });
     },
     [onQuery],
+    300,
   );
 
   // handlers
@@ -352,38 +330,38 @@ export const useSelect = ({
           open: true,
           setActive: true,
           options: optionsRef.current.filter((opt: AnyObject) => {
-            return macthOption?.(opt, query);
+            return matchOption?.(opt, query);
           }),
         });
       }
     },
-    [macthOption, onQuery],
+    [fireQuery, matchOption, onQuery],
   );
 
-  const handleChange = useCallback((value?: AnyObject) => {
-    let values = value;
-    if (autoComplete && multiple && value) {
-      values = value.split(/,\s?/);
-    }
-    dispatch({
-      type: "changeValue",
-      value: value?.___create___ ? value.value : value,
-    });
-    if (value?.___create___) {
-      let val = [value.value];
-      if (multiple) {
-        val = value.value.split(/,\s?/);
+  const handleChange = useCallback(
+    (value?: AnyObject) => {
+      let values = value;
+      if (autoComplete && multiple && value) {
+        values = value.split(/,\s?/);
       }
-      optionsRef.current = [...optionsRef.current, ...val.map(createOption)];
-    }
-    if (autoComplete) {
-      optionsRef.current = dedupe([
-        ...(isArray(values) ? values : [values]),
-        ...optionsRef.current,
-      ]);
-    }
-    dispatch({ type: "options", options: optionsRef.current });
-  }, []);
+      dispatch({
+        type: "changeValue",
+        value: value?.___create___ ? value.value : value,
+      });
+      if (value?.___create___) {
+        let val = [value.value];
+        if (multiple) {
+          val = value.value.split(/,\s?/);
+        }
+        optionsRef.current = [...optionsRef.current, ...val.map(createOption)];
+      }
+      if (autoComplete) {
+        optionsRef.current = dedupe([...(isArray(values) ? values : [values]), ...optionsRef.current]);
+      }
+      dispatch({ type: "options", options: optionsRef.current });
+    },
+    [autoComplete, createOption, multiple],
+  );
 
   const handleRemove = useCallback((index?: number) => {
     dispatch({ type: "removeItem", index });
@@ -399,7 +377,11 @@ export const useSelect = ({
   }, []);
 
   const setActiveIndex = useCallback((index: number | null) => {
-    dispatch({ type: "active", index });
+    if (index && index > -1) dispatch({ type: "active", index });
+  }, []);
+
+  const clearActiveIndex = useCallback(() => {
+    dispatch({ type: "active", index: null });
   }, []);
 
   return {
@@ -410,11 +392,12 @@ export const useSelect = ({
     handleChange,
     handleRemove,
     handleQuery,
-    macthOption,
+    clearActiveIndex,
+    macthOption: matchOption,
     setActiveIndex,
     setOpen,
     setItemRef: (index: number, node: HTMLElement) => {
       listRef.current[index] = node;
     },
   };
-};
+}

package/src/types/index.ts

@@ -21,16 +21,19 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  type RefProp,
-  type TestProps,
-} from "@react-fabric/core/dist/types/types";
+import type { ChildNode, NestedKeys, RefProp, TestProps } from "@react-fabric/core/dist/types/types";
 
 export interface InputProps<V = string> extends TestProps {
+  name?: string;
+  autoFocus?: boolean;
   /**
    * value
    */
   value?: V;
+  /**
+   * default value
+   */
+  defaultValue?: V;
   /**
    * change handler
    */
@@ -46,57 +49,47 @@ export interface InputProps<V = string> extends TestProps {
   /**
    * on enter press callback
    */
-  onEnterPressed?: React.KeyboardEventHandler;
+  onEnterPressed?: React.KeyboardEventHandler<HTMLInputElement>;
 
+  placeholder?: string;
+
+  disabled?: boolean;
+  readOnly?: boolean;
   /**
-   * input name
+   * show clear button
    */
+  allowClear?: boolean;
+}
+
+export interface WrapperProps {
   name?: string;
   /**
    * input label
    */
   label?: string;
   /**
-   * input placeholder
+   * required
    */
-  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
   /**
    * append to label end
    */
-  appendLabel?: JSX.Element | string | number | boolean;
+  appendLabel?: React.ReactNode;
   /**
    *
    */
-  decorateStart?: JSX.Element | string | number | boolean;
+  decorateStart?: React.ReactNode;
   /**
    *
    */
-  decorateEnd?: JSX.Element | string | number | boolean;
+  decorateEnd?: React.ReactNode;
+  decorateEndShowWhenEmpty?: boolean;
+  decorateEndHideWhenEmpty?: boolean;
   /**
    * info label at bottom
    */
-  info?: string;
-
-  /**
-   * required
-   */
-  required?: boolean;
-  /**
-   * disabled input
-   */
-  disabled?: boolean;
-  /**
-   * read-only input
-   */
-  readOnly?: boolean;
-  /**
-   * auto focus when rendered
-   */
-  autoFocus?: boolean;
-  /**
-   * show clear button
-   */
-  allowClear?: boolean;
+  info?: React.ReactNode;
   /**
    * invalid value input
    */
@@ -105,7 +98,6 @@ export interface InputProps<V = string> extends TestProps {
    * error message
    */
   error?: string;
-
   /**
    * field width
    */
@@ -117,28 +109,46 @@ export interface InputProps<V = string> extends TestProps {
   /**
    * label width for inline
    */
-  labelWidth?: string;
+  labelWidth?: string | number;
+  /**
+   * remove the outline borders
+   */
+  borderless?: boolean;
 }
 
-export interface BaseSelectProps<T>
-  extends RefProp<HTMLInputElement>,
-    Omit<InputProps, "value" | "onChange"> {
+export interface BaseSelectProps<T extends AnyObject = string> {
+  /**
+   * open dropdown by default
+   */
+  defaultOpen?: boolean;
+  /**
+   * hide dropdown handle
+   */
+  hideHandle?: boolean;
   /**
    * list options
    */
-  options?: T[];
+  options: T[];
   /**
    * group by property name
    */
-  groupProperty?: keyof T;
+  groupProperty?: NestedKeys<T>;
   /**
    * label property name
    */
-  labelProperty?: keyof T;
+  labelProperty?: NestedKeys<T>;
+  /**
+   * value property name
+   */
+  valueProperty?: NestedKeys<T>;
   /**
    * value property name
    */
-  valueProperty?: keyof T;
+  infoProperty?: NestedKeys<T>;
+  /**
+   * value property name
+   */
+  sortProperty?: NestedKeys<T> | true;
   /**
    * searchable list
    */
@@ -147,6 +157,10 @@ export interface BaseSelectProps<T>
    * allow create item
    */
   allowCreate?: boolean;
+  /**
+   * empty list display
+   */
+  emptyDisplay?: ChildNode;
   /**
    * create new item object
    */
@@ -158,20 +172,22 @@ export interface BaseSelectProps<T>
   /**
    * item renderer
    */
-  renderer?: (option: T) => React.ReactNode;
+  renderer?: (option: T) => ChildNode;
   /**
    * item matcher
    */
   matcher?: (option: T, query: string) => boolean;
 }
 
-export type SelectProps<T> = BaseSelectProps<T> &
+type BaseSelectType<T> = BaseSelectProps<T> & Omit<InputProps, "value" | "onChange"> & WrapperProps & RefProp<HTMLInputElement>;
+
+export type SelectProps<T> = BaseSelectType<T> &
   (
     | {
         /**
          * is multiple selection
          */
-        multiple?: never | false;
+        multiple?: false;
         /**
          * selected value
          */
@@ -204,3 +220,18 @@ export type SelectProps<T> = BaseSelectProps<T> &
         onChange?: (value?: string[]) => void;
       }
   );
+
+export type DualSelectProps<T> = BaseSelectType<T> & {
+  /**
+   * selected value
+   */
+  value?: string[];
+  /**
+   * select handler
+   */
+  onSelect?: (option: T[]) => void;
+  /**
+   * change handler
+   */
+  onChange?: (value?: string[]) => void;
+};