@react-fabric/form 1.0.0-beta.6 → 1.0.0-beta.60

package/src/select/Options.tsx

@@ -23,7 +23,7 @@
 
 import { EmptyContent } from "@react-fabric/core";
 import classNames from "classnames";
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement } from "react";
 import { Trans } from "react-i18next";
 
 export const Options = ({
@@ -34,6 +34,7 @@ export const Options = ({
   className,
   itemRef,
   empty,
+  info,
   valueProperty = "id",
   labelProperty = "label",
   itemProps,
@@ -41,6 +42,7 @@ export const Options = ({
   ...rest
 }: {
   ref: AnyObject;
+  info?: AnyObject;
   itemRef: AnyObject;
   style?: AnyObject;
   items: AnyObject[];
@@ -50,34 +52,53 @@ export const Options = ({
   valueProperty?: AnyObject;
   labelProperty?: AnyObject;
   itemProps: (item: AnyObject) => AnyObject;
-  children: (item: AnyObject, label: string) => ReactNode;
+  children: (item: AnyObject, label: string) => React.ReactNode;
 } & KeyValue) => {
   return (
     <div
       ref={ref}
-      className={classNames(
-        "bg-base select-none overflow-x-hidden overflow-y-auto",
-        className,
-      )}
+      className={classNames("bg-base select-none flex flex-col", className)}
       style={style}
       {...rest}
     >
-      {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={classNames("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-base 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={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",
+                )}
+                {...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"
@@ -86,36 +107,19 @@ export const Options = ({
               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",
+                "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)}
             >
-              <Trans
-                i18nKey="form:select.createOption"
-                values={{ query: item.value }}
-                components={[<strong key="t0">query</strong>]}
-              />
+              {children(item, 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>
   );
 };

package/src/select/Select.tsx

@@ -44,6 +44,14 @@ import { type SelectProps } from "../types";
 import { Options } from "./Options";
 import { useSelect } from "./useSelect";
 
+/**
+ * Select component for selecting items from a dropdown list.
+ * It supports single and multiple selections, searching, creating new options,
+ * and custom rendering of options.
+ *
+ * @param {SelectProps<T>} props - The properties for the Select component.
+ * @returns {JSX.Element} The rendered Select component.
+ */
 export const Select = <T extends AnyObject = string>({
   ref,
   name,
@@ -56,12 +64,17 @@ export const Select = <T extends AnyObject = string>({
   autoFocus,
   error,
   options,
+  defaultOpen,
+  hideHandle,
   groupProperty,
   labelProperty = "label" as AnyObject,
   valueProperty = "id" as AnyObject,
+  sortProperty,
+  infoProperty,
   multiple,
   searchable,
   allowCreate,
+  emptyDisplay,
   createOption,
   matcher,
   renderer,
@@ -86,9 +99,11 @@ export const Select = <T extends AnyObject = string>({
     value,
     options,
     multiple,
+    defaultOpen,
     groupProperty,
     labelProperty,
     valueProperty,
+    sortProperty,
     allowCreate,
     createOption,
     matcher,
@@ -172,6 +187,9 @@ export const Select = <T extends AnyObject = string>({
             return false;
           } else if (state.query) {
             handleQuery("");
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
           } else {
             onEnterPressed?.(evt);
           }
@@ -263,7 +281,7 @@ export const Select = <T extends AnyObject = string>({
       required={required}
       error={error}
       wrapperRef={refs.setReference}
-      className={state.open ? "!z-[99]" : ""}
+      className={state.open ? "z-99!" : ""}
       {...rest}
     >
       <div
@@ -290,7 +308,7 @@ export const Select = <T extends AnyObject = string>({
           ref={ref}
           autoFocus={autoFocus}
           className={classNames(
-            "appearance-none bg-transparent outline-none border-none ring-0 flex-1",
+            "appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer",
             disabled && "cursor-not-allowed pointer-events-none",
             multiple && "min-w-24",
           )}
@@ -298,7 +316,7 @@ export const Select = <T extends AnyObject = string>({
           onChange={(evt) => handleQuery(evt.target.value)}
         />
       </div>
-      {!state.loading && (
+      {!state.loading && !hideHandle && (
         <Icon
           className={classNames(
             "flex-content p-2 z-0 order-9 text-muted cursor-pointer self-stretch flex items-center h-auto",
@@ -327,7 +345,7 @@ export const Select = <T extends AnyObject = string>({
           >
             <Options
               ref={refs.setFloating}
-              className="outline shadow-lg max-h-[40vh] z-[var(--z-popover)]"
+              className="outline shadow-lg max-h-[40vh] z-(--z-popover)"
               style={{
                 width: refs.reference.current?.getBoundingClientRect().width,
                 ...floatingStyles,
@@ -339,8 +357,10 @@ export const Select = <T extends AnyObject = string>({
               labelProperty={labelProperty}
               itemRef={setItemRef}
               itemProps={makeItemProps}
+              empty={emptyDisplay}
+              info={state.activeItem?.[infoProperty ?? "info"]}
             >
-              {(item, label) => renderer?.(item) ?? label}
+              {async (item, label) => await (renderer?.(item) ?? label)}
             </Options>
           </FloatingFocusManager>
         </FloatingPortal>

package/src/select/useSelect.tsx

@@ -23,6 +23,7 @@
 
 import { useDebounce } from "@react-fabric/core";
 import {
+  compareValues,
   dedupe,
   EMPTY_ARRAY,
   groupBy,
@@ -64,6 +65,7 @@ interface State {
   open: boolean;
   loading: boolean;
   activeIndex: number | null;
+  activeItem: AnyObject;
   selectedIndex: number | null;
   value: AnyObject;
   // filter
@@ -76,11 +78,14 @@ export const useSelect = ({
   options = EMPTY_ARRAY,
   value,
   autoComplete,
+  alwaysOpen = false,
+  defaultOpen = false,
   multiple = false,
   allowCreate = false,
   groupProperty = "",
   valueProperty = "id",
   labelProperty = "label",
+  sortProperty,
   createOption = makeOption,
   matcher,
   onQuery,
@@ -90,10 +95,13 @@ export const useSelect = ({
   value?: AnyObject;
   options?: AnyObject[];
   multiple?: boolean;
+  alwaysOpen?: boolean;
+  defaultOpen?: boolean;
   allowCreate?: boolean;
   groupProperty?: AnyObject;
   valueProperty?: AnyObject;
   labelProperty?: AnyObject;
+  sortProperty?: AnyObject;
   autoComplete?: boolean;
   matcher?: (item: AnyObject, query: string) => boolean;
   createOption?: (query: string) => AnyObject;
@@ -144,12 +152,16 @@ 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 };
+        return {
+          ...state,
+          activeIndex: action.index,
+          activeItem: state.items[action.index ?? -1],
+        };
       }
       if (action.type === "setValue") {
         return {
@@ -165,6 +177,7 @@ export const useSelect = ({
           ...state,
           value: state.emptyValue,
           activeIndex: null,
+          activeItem: null,
           selectedIndex: autoComplete
             ? state.multiple
               ? action.value?.length
@@ -187,7 +200,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 +236,8 @@ export const useSelect = ({
         if (autoComplete && action.query !== undefined) {
           optionList = dedupe([action.query, ...optionList]);
         }
+        if (sortProperty)
+          optionList = optionList.sort(compareValues("asc", sortProperty));
         const grouped = groupBy(optionList, groupProperty, "");
         if (action.open) newState.open = true;
         newState.items = [];
@@ -230,7 +245,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) {
@@ -254,9 +269,10 @@ export const useSelect = ({
     {
       multiple,
       emptyValue,
-      open: false,
+      open: alwaysOpen || defaultOpen,
       loading: false,
       activeIndex: null,
+      activeItem: null,
       selectedIndex: null,
       value: emptyValue,
       // filter
@@ -283,7 +299,7 @@ export const useSelect = ({
       dispatch({ type: "options", options: optionsRef.current });
       dispatch({
         type: "setValue",
-        value: hasValue ?? newOption ?? "",
+        value: hasValue ?? newOption ?? deferred,
       });
     }
     if (multiple) {
@@ -295,12 +311,12 @@ export const useSelect = ({
               ? createOption(item)
               : undefined;
           const hasValue = options.find(
-            (opt: AnyObject) => (opt[valueProperty] ?? opt) === deferred,
+            (opt: AnyObject) => (opt[valueProperty] ?? opt) === item,
           );
           if (!hasValue && newOption) {
             optionsRef.current.push(newOption);
           }
-          return hasValue ?? newOption ?? "";
+          return hasValue ?? newOption ?? item;
         },
       );
       optionsRef.current = [...optionsRef.current, ...(options ?? [])];
@@ -334,6 +350,7 @@ export const useSelect = ({
       });
     },
     [onQuery],
+    300,
   );
 
   // handlers
@@ -399,7 +416,7 @@ export const useSelect = ({
   }, []);
 
   const setActiveIndex = useCallback((index: number | null) => {
-    dispatch({ type: "active", index });
+    index && index > -1 && dispatch({ type: "active", index });
   }, []);
 
   return {

package/src/types/index.ts

@@ -25,16 +25,21 @@ import {
   type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
+import { type ReactElement } from "react";
 
 export interface InputProps<V = string> extends TestProps {
   /**
    * value
    */
-  value?: V;
+  value?: V | null;
+  /**
+   * default value
+   */
+  defaultValue?: V | null;
   /**
    * change handler
    */
-  onChange?: (value?: V) => void;
+  onChange?: (value: V | null) => void;
   /**
    * on focus event handler
    */
@@ -72,11 +77,15 @@ export interface InputProps<V = string> extends TestProps {
    *
    */
   decorateEnd?: JSX.Element | string | number | boolean;
+  decorateEndShowWhenEmpty?: boolean;
+  decorateEndHideWhenEmpty?: boolean;
   /**
    * info label at bottom
    */
   info?: string;
 
+  monospace?: boolean;
+
   /**
    * required
    */
@@ -120,9 +129,15 @@ export interface InputProps<V = string> extends TestProps {
   labelWidth?: string;
 }
 
-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
    */
@@ -139,6 +154,14 @@ export interface BaseSelectProps<T>
    * value property name
    */
   valueProperty?: keyof T;
+  /**
+   * value property name
+   */
+  infoProperty?: keyof T;
+  /**
+   * value property name
+   */
+  sortProperty?: keyof T | true;
   /**
    * searchable list
    */
@@ -147,6 +170,10 @@ export interface BaseSelectProps<T>
    * allow create item
    */
   allowCreate?: boolean;
+  /**
+   * empty list display
+   */
+  emptyDisplay?: ReactElement;
   /**
    * create new item object
    */
@@ -165,7 +192,11 @@ export interface BaseSelectProps<T>
   matcher?: (option: T, query: string) => boolean;
 }
 
-export type SelectProps<T> = BaseSelectProps<T> &
+type BaseSelectType<T> = BaseSelectProps<T> &
+  RefProp<HTMLInputElement> &
+  Omit<InputProps, "value" | "onChange">;
+
+export type SelectProps<T> = BaseSelectType<T> &
   (
     | {
         /**

package/src/types/schema.ts

@@ -21,80 +21,135 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-interface BaseSchemaDef {
+import { type Elements } from "@react-fabric/core/dist/types/types";
+import { type DateLike } from "@react-fabric/date";
+
+export enum DATA_TYPES {
+  TEXT = "text",
+  COLOR = "color",
+  BOOL = "bool",
+  DATE = "date",
+  DATETIME = "datetime",
+  STRING = "string",
+  NUMBER = "number",
+  RANGE = "range",
+  FILE = "file",
+  AVATAR = "avatar",
+  SCHEMA = "schema",
+}
+
+export const SCHEMA_CUSTOM_LIST = "--CUSTOM--";
+
+interface SingleValue {
+  multiple?: false;
+  minItems?: never;
+  maxItems?: never;
+}
+
+interface MultipleValue {
+  multiple: true;
+  minItems?: number;
+  maxItems?: number;
+}
+
+export type ValueType = SingleValue | MultipleValue;
+
+interface BaseSchema {
   id: string;
   label: string;
   datatype: string;
   required?: boolean;
-  multiple?: boolean;
-  defaultValue?: AnyObject;
 }
 
-interface SchemaDef extends BaseSchemaDef {
-  datatype: "text" | "color";
+export interface DefaultSchema extends BaseSchema {
+  datatype: DATA_TYPES.TEXT | DATA_TYPES.COLOR;
 }
 
-interface BooleanSchema extends BaseSchemaDef {
-  datatype: "boolean";
-  defaultValue?: boolean;
+export interface BooleanSchema extends BaseSchema {
+  datatype: DATA_TYPES.BOOL;
 }
 
-interface StringSchema extends BaseSchemaDef {
-  datatype: "string";
-  options?: string[];
+export interface StringSchema extends BaseSchema {
+  datatype: DATA_TYPES.STRING;
   regex?: string;
-  identifierType?: string;
+  options?: string[];
+  optionList?: string;
+  allowCustom?: boolean;
 }
 
-interface RangeSchema extends BaseSchemaDef {
-  datatype: "range";
+export interface RangeSchema extends BaseSchema {
+  datatype: DATA_TYPES.RANGE;
   min?: number;
   max?: number;
   step?: number;
-  defaultValue?: [number, number];
 }
 
-interface NumberSchema extends BaseSchemaDef {
-  datatype: "number";
-  min?: number;
-  max?: number;
-  step?: number;
-  defaultValue?: number;
+export interface DateSchema extends BaseSchema {
+  datatype: DATA_TYPES.DATE | DATA_TYPES.DATETIME;
+  min?: DateLike;
+  max?: DateLike;
 }
 
-interface DecimalSchema extends BaseSchemaDef {
-  datatype: "decimal";
+export interface NumberSchema extends BaseSchema {
+  datatype: DATA_TYPES.NUMBER;
   min?: number;
   max?: number;
   step?: number;
-  defaultValue?: number;
 }
 
-export interface FileSchema extends BaseSchemaDef {
-  datatype: "file";
+export interface FileSchema extends BaseSchema {
+  datatype: DATA_TYPES.FILE;
   accept?: string;
 }
 
-export interface AvatarSchema extends BaseSchemaDef {
-  datatype: "avatar";
+export interface AvatarSchema extends BaseSchema {
+  datatype: DATA_TYPES.AVATAR;
   multiple?: false;
 }
 
 export type SchemaType =
-  | SchemaDef
-  | BooleanSchema
-  | StringSchema
-  | RangeSchema
-  | NumberSchema
-  | DecimalSchema
-  | FileSchema
-  | AvatarSchema;
-
-export interface ChildSchema extends BaseSchemaDef {
-  datatype: "schema";
+  | (DefaultSchema & ValueType)
+  | (BooleanSchema & ValueType)
+  | (StringSchema & ValueType)
+  | (RangeSchema & ValueType)
+  | (DateSchema & ValueType)
+  | (NumberSchema & ValueType)
+  | (FileSchema & ValueType)
+  | (AvatarSchema & ValueType);
+
+export interface ChildSchema extends BaseSchema {
+  datatype: DATA_TYPES.SCHEMA;
   inline?: boolean;
   schema: SchemaType[];
-  defaultValue?: never;
 }
 
-export type FormSchema = SchemaType | ChildSchema;
+export type SchemaDef = SchemaType | (ChildSchema & ValueType);
+export type FormSchema = SchemaDef[];
+
+export interface SchemaEditorProps {
+  /**
+   * default form schema
+   */
+  schemaDef: FormSchema;
+  /**
+   * is dynamic schema (allow add/remove)
+   */
+  dynamic?: boolean;
+  /**
+   * acceptable list of data types
+   */
+  acceptableTypes?: DATA_TYPES[];
+
+  /**
+   * available option lists in application
+   */
+  optionLists?: string[];
+
+  /**
+   * footer actions
+   */
+  children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
+
+  onChange?: (schema: FormSchema) => void;
+  onSubmit?: (schema: FormSchema) => void;
+}

package/src/utils/eventHandlers.ts

@@ -23,19 +23,29 @@
 
 /* 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);
-  return (e: KeyboardEvent) => {
+  const cbHandle = useDebounce(callback ?? (() => undefined), [callback], 100);
+  const tree = useFloatingTree();
+  return (e: KeyboardEvent<HTMLInputElement>) => {
+    // prevent propagation of event if input within dropdown (work around for floating-ui typeahead)
+    if (tree && e.key !== "Escape") {
+      e?.stopPropagation();
+    }
+    // blur input on escape key press
+    if (e.key === "Escape") {
+      e.currentTarget.blur();
+    }
     if (
       !e.shiftKey &&
       !e.altKey &&