@react-fabric/form 1.0.0-beta.47 → 1.0.0-beta.48

package/src/input/Search.tsx

@@ -28,14 +28,13 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useRef,
   useState,
   type ChangeEvent,
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
   /**
@@ -87,10 +86,7 @@ export const Search = ({
     250,
   );
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(handleSearch),
-    [handleSearch],
-  );
+  const handleEnterPressed = useHandleEnter(handleSearch);
 
   useEffect(() => {
     setActualValue(deferred ?? "");
@@ -103,8 +99,8 @@ export const Search = ({
       setActualValue(value ?? "");
       onChange?.(value ?? null);
 
-      // value was cleared so force fire onSearch
-      if (searchOnChange) {
+      // when e is undefined value was cleared so force fire onSearch
+      if (!e || searchOnChange) {
         handleSearch();
       }
     },

package/src/input/Textarea.tsx

@@ -32,7 +32,7 @@ import {
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface TextareaProps
   extends InputProps,
@@ -102,6 +102,10 @@ export const Textarea = ({
     }
   }, [actualValue, variableRows, rows, maxRows]);
 
+  const handleEnterPressed = useHandleEnter(onEnterPressed, {
+    preventDefault: !!onEnterPressed,
+  });
+
   return (
     <InputWrapper
       showClear={!!actualValue && !disabled && !readOnly}
@@ -133,9 +137,7 @@ export const Textarea = ({
         onBlur={onBlur}
         onFocus={onFocus}
         onChange={handleChange}
-        onKeyDown={handleEnter(onEnterPressed, {
-          preventDefault: !!onEnterPressed,
-        })}
+        onKeyDown={handleEnterPressed}
       />
     </InputWrapper>
   );

package/src/internal/FieldWrapper.tsx

@@ -22,6 +22,7 @@
  */
 
 import classNames from "classnames";
+import { ErrorIcon } from "./ErrorIcon";
 
 export const FieldWrapper = ({
   label,
@@ -35,6 +36,8 @@ export const FieldWrapper = ({
   children,
   listing,
   className,
+  invalid,
+  error,
   "data-inner": isInner,
 }: KeyValue) => {
   return (
@@ -72,6 +75,7 @@ export const FieldWrapper = ({
               ✽
             </span>
           )}
+          <ErrorIcon invalid={invalid} error={error} />
           <div className="flex-1" />
           {appendLabel && <span className="flex-content">{appendLabel}</span>}
         </div>

package/src/select/AutoComplete.tsx

@@ -293,6 +293,7 @@ export const AutoComplete = ({
           data-testid={name}
           name={name}
           size={1}
+          ref={ref}
           onInput={onInput}
           autoFocus={autoFocus}
           rows={!multiple && expandOnEdit && state.open ? 5 : 1}

package/src/select/List.tsx

@@ -53,6 +53,7 @@ export const List = <T extends AnyObject = string>({
   groupProperty,
   labelProperty,
   valueProperty,
+  sortProperty,
   multiple,
   allowCreate,
   searchable,
@@ -100,6 +101,7 @@ export const List = <T extends AnyObject = string>({
     groupProperty,
     labelProperty,
     valueProperty,
+    sortProperty,
     allowCreate,
     createOption,
     matcher,

package/src/select/Select.tsx

@@ -61,6 +61,7 @@ export const Select = <T extends AnyObject = string>({
   groupProperty,
   labelProperty = "label" as AnyObject,
   valueProperty = "id" as AnyObject,
+  sortProperty,
   multiple,
   searchable,
   allowCreate,
@@ -93,6 +94,7 @@ export const Select = <T extends AnyObject = string>({
     groupProperty,
     labelProperty,
     valueProperty,
+    sortProperty,
     allowCreate,
     createOption,
     matcher,

package/src/select/useSelect.tsx

@@ -83,6 +83,7 @@ export const useSelect = ({
   groupProperty = "",
   valueProperty = "id",
   labelProperty = "label",
+  sortProperty,
   createOption = makeOption,
   matcher,
   onQuery,
@@ -97,6 +98,7 @@ export const useSelect = ({
   groupProperty?: AnyObject;
   valueProperty?: AnyObject;
   labelProperty?: AnyObject;
+  sortProperty?: AnyObject;
   autoComplete?: boolean;
   matcher?: (item: AnyObject, query: string) => boolean;
   createOption?: (query: string) => AnyObject;
@@ -226,7 +228,8 @@ export const useSelect = ({
         if (autoComplete && action.query !== undefined) {
           optionList = dedupe([action.query, ...optionList]);
         }
-        optionList = optionList.sort(compareValues("asc", labelProperty));
+        if (sortProperty)
+          optionList = optionList.sort(compareValues("asc", sortProperty));
         const grouped = groupBy(optionList, groupProperty, "");
         if (action.open) newState.open = true;
         newState.items = [];

package/src/types/index.ts

@@ -150,6 +150,10 @@ export interface BaseSelectProps<T extends AnyObject = string> {
    * value property name
    */
   valueProperty?: keyof T;
+  /**
+   * value property name
+   */
+  sortProperty?: keyof T | true;
   /**
    * searchable list
    */

package/src/types/schema.ts

@@ -29,6 +29,7 @@ export enum DATA_TYPES {
   COLOR = "color",
   BOOL = "bool",
   DATE = "date",
+  DATETIME = "datetime",
   STRING = "string",
   NUMBER = "number",
   RANGE = "range",
@@ -84,8 +85,7 @@ export interface RangeSchema extends BaseSchema {
 }
 
 export interface DateSchema extends BaseSchema {
-  datatype: DATA_TYPES.DATE;
-  type?: "date" | "datetime";
+  datatype: DATA_TYPES.DATE | DATA_TYPES.DATETIME;
   min?: DateLike;
   max?: DateLike;
 }

package/src/utils/eventHandlers.ts

@@ -23,19 +23,25 @@
 
 /* istanbul ignore file */
 
-import { debounce } from "@react-fabric/utilities";
+import { useFloatingTree } from "@floating-ui/react";
+import { useDebounce } from "@react-fabric/core";
 import { type KeyboardEvent, type MouseEvent } from "react";
 
 /** ***************** common handler for enter press *******************/
-export const handleEnter = (
+export const useHandleEnter = (
   callback?: (e: KeyboardEvent) => void,
   {
     stopPropagation = false,
     preventDefault = false,
   }: { stopPropagation?: boolean; preventDefault?: boolean } = {},
 ) => {
-  const cbHandle = debounce(callback ?? (() => undefined), 100);
+  const cbHandle = useDebounce(callback ?? (() => undefined), [callback], 100);
+  const tree = useFloatingTree();
   return (e: KeyboardEvent) => {
+    // prevent propagation of event if input within dropdown (work around for floating-ui typeahead)
+    if (tree && e.key !== "Escape") {
+      e?.stopPropagation();
+    }
     if (
       !e.shiftKey &&
       !e.altKey &&