@react-fabric/form 1.0.0-beta.61 → 1.0.0-beta.63

package/src/select/List.tsx

@@ -30,7 +30,7 @@ import {
   useTypeahead,
 } from "@floating-ui/react";
 import { Chip } from "@react-fabric/core";
-import { isArray, isEmpty } from "@react-fabric/utilities";
+import { getByPath, isArray, isEmpty } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { Fragment, useCallback, useId, useLayoutEffect, useMemo } from "react";
 import { FieldWrapper } from "../internal/FieldWrapper";
@@ -45,7 +45,7 @@ import { useSelect } from "./useSelect";
  * and custom rendering of options.
  *
  * @param {SelectProps<T>} props - The properties for the List component.
- * @returns {JSX.Element} The rendered List component.
+ * @returns {React.ReactElement} The rendered List component.
  */
 export const List = <T extends AnyObject = string>({
   ref,
@@ -59,8 +59,8 @@ export const List = <T extends AnyObject = string>({
   options,
   height,
   groupProperty,
-  labelProperty,
-  valueProperty,
+  labelProperty = "label" as AnyObject,
+  valueProperty = "value" as AnyObject,
   infoProperty,
   sortProperty,
   multiple,
@@ -88,37 +88,25 @@ export const List = <T extends AnyObject = string>({
   height?: string | number;
 }) => {
   const Wrapper = useMemo(() => (isInner ? Fragment : FieldWrapper), [isInner]);
-  const wrapperProps = useMemo(
-    () => (isInner ? {} : { ...rest }),
-    [isInner, rest],
-  );
+  const wrapperProps = useMemo(() => (isInner ? {} : { ...rest }), [isInner, rest]);
 
-  const {
-    state,
-    listRef,
-    listContentRef,
-    macthOption,
-    handleChange,
-    handleRemove,
-    handleQuery,
-    setItemRef,
-    setActiveIndex,
-  } = useSelect({
-    value,
-    options,
-    multiple,
-    alwaysOpen: true,
-    groupProperty,
-    labelProperty,
-    valueProperty,
-    sortProperty,
-    allowCreate,
-    createOption,
-    matcher,
-    onChange,
-    onSelect,
-    onQuery,
-  });
+  const { state, listRef, listContentRef, macthOption, handleChange, handleRemove, handleQuery, setItemRef, setActiveIndex } =
+    useSelect({
+      value,
+      options,
+      multiple,
+      alwaysOpen: true,
+      groupProperty,
+      labelProperty,
+      valueProperty,
+      sortProperty,
+      allowCreate,
+      createOption,
+      matcher,
+      onChange,
+      onSelect,
+      onQuery,
+    });
 
   const dropdownKey = useId();
 
@@ -152,9 +140,7 @@ export const List = <T extends AnyObject = string>({
     },
   });
 
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
-    [navigation, typeahead],
-  );
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([navigation, typeahead]);
 
   const referenceProps = useMemo(() => {
     const props: AnyObject = getReferenceProps();
@@ -162,9 +148,7 @@ export const List = <T extends AnyObject = string>({
     return {
       ...props,
       onBlur(evt: React.FocusEvent) {
-        if (
-          evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)
-        ) {
+        if (evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)) {
           refs.domReference.current?.querySelector("input")?.focus();
           return;
         }
@@ -183,10 +167,7 @@ export const List = <T extends AnyObject = string>({
         } else if (evt.key === "Backspace") {
           !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 ?? 0);
           }
           setTimeout(() => {
@@ -195,14 +176,7 @@ export const List = <T extends AnyObject = string>({
         }
       },
     };
-  }, [
-    getReferenceProps,
-    onEnterPressed,
-    handleQuery,
-    refs,
-    state.query,
-    state.activeIndex,
-  ]);
+  }, [getReferenceProps, onEnterPressed, handleQuery, refs, state.query, state.activeIndex]);
 
   const floatingProps = useMemo(() => {
     return getFloatingProps({
@@ -212,9 +186,7 @@ export const List = <T extends AnyObject = string>({
 
   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,
@@ -236,11 +208,7 @@ export const List = <T extends AnyObject = string>({
         </Chip>
       ));
     } else if (!isEmpty(state.value) && !state.query) {
-      return (
-        <span>
-          {renderer?.(state.value) ?? state.value[labelProperty] ?? state.value}
-        </span>
-      );
+      return <span>{renderer?.(state.value) ?? state.value[labelProperty] ?? state.value}</span>;
     }
   }, [state.value, state.query, placeholder, renderer]);
 
@@ -275,9 +243,7 @@ export const List = <T extends AnyObject = string>({
             multiple ? "flex-wrap" : "flex-nowrap overflow-hidden",
           )}
           {...referenceProps}
-          onMouseUp={(e) =>
-            e.currentTarget.querySelector<HTMLElement>("input")?.focus()
-          }
+          onMouseUp={(e) => e.currentTarget.querySelector<HTMLElement>("input")?.focus()}
         >
           {!hideSelected && displayValue}
           <input
@@ -300,11 +266,7 @@ export const List = <T extends AnyObject = string>({
           />
         </div>
       </InputWrapper>
-      <FloatingFocusManager
-        context={context}
-        initialFocus={-1}
-        visuallyHiddenDismiss
-      >
+      <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss closeOnFocusOut>
         <Options
           ref={refs.setFloating}
           className={classNames(
@@ -322,7 +284,7 @@ export const List = <T extends AnyObject = string>({
           itemRef={setItemRef}
           itemProps={makeItemProps}
           empty={emptyDisplay}
-          info={state.activeItem?.[infoProperty ?? "info"]}
+          info={getByPath(state.activeItem, infoProperty ?? "info")}
         >
           {(item, label) => renderer?.(item) ?? label}
         </Options>

package/src/select/Options.tsx

@@ -23,6 +23,7 @@
 
 import { EmptyContent } from "@react-fabric/core";
 import { type ReactElement } from "@react-fabric/core/dist/types/types";
+import { getByPath } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { Trans } from "react-i18next";
 
@@ -57,7 +58,7 @@ export const Options = ({
   return (
     <div
       ref={ref}
-      className={classNames("bg-base select-none flex flex-col", className)}
+      className={classNames("bg-default select-none flex flex-col", className)}
       style={style}
       {...rest}
     >
@@ -71,7 +72,7 @@ export const Options = ({
             return (
               <p
                 key={index}
-                className="px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t"
+                className="px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-default border-t"
               >
                 {item.label}
               </p>
@@ -112,7 +113,7 @@ export const Options = ({
               )}
               {...itemProps(item)}
             >
-              {children(item, item[labelProperty] ?? item)}
+              {children(item, getByPath(item, labelProperty) ?? `${item}`)}
             </div>
           );
         })}

package/src/select/Select.tsx

@@ -36,7 +36,7 @@ import {
   useTypeahead,
 } from "@floating-ui/react";
 import { Chip, Icon } from "@react-fabric/core";
-import { isArray, isEmpty } from "@react-fabric/utilities";
+import { getByPath, isArray, isEmpty } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useCallback, useId, useLayoutEffect, useMemo } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
@@ -50,7 +50,7 @@ import { useSelect } from "./useSelect";
  * and custom rendering of options.
  *
  * @param {SelectProps<T>} props - The properties for the Select component.
- * @returns {JSX.Element} The rendered Select component.
+ * @returns {React.ReactElement} The rendered Select component.
  */
 export const Select = <T extends AnyObject = string>({
   ref,
@@ -68,7 +68,7 @@ export const Select = <T extends AnyObject = string>({
   hideHandle,
   groupProperty,
   labelProperty = "label" as AnyObject,
-  valueProperty = "id" as AnyObject,
+  valueProperty = "value" as AnyObject,
   sortProperty,
   infoProperty,
   multiple,
@@ -152,16 +152,16 @@ export const Select = <T extends AnyObject = string>({
     onMatch(index) {
       state.open && setActiveIndex(index);
 
-      !searchable &&
-        !multiple &&
-        !state.open &&
-        handleChange(listContentRef.current[index]);
+      !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();
@@ -169,9 +169,7 @@ export const Select = <T extends AnyObject = string>({
     return {
       ...props,
       onBlur(evt: React.FocusEvent) {
-        if (
-          evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)
-        ) {
+        if (evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)) {
           refs.domReference.current?.querySelector("input")?.focus();
           return;
         }
@@ -198,10 +196,7 @@ export const Select = <T extends AnyObject = string>({
         } else if (evt.key === "Backspace") {
           !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(() => {
@@ -210,14 +205,7 @@ export const Select = <T extends AnyObject = string>({
         }
       },
     };
-  }, [
-    getReferenceProps,
-    onEnterPressed,
-    handleQuery,
-    refs,
-    state.query,
-    state.activeIndex,
-  ]);
+  }, [getReferenceProps, onEnterPressed, handleQuery, refs, state.query, state.activeIndex]);
 
   const floatingProps = useMemo(() => {
     return getFloatingProps({
@@ -227,9 +215,7 @@ export const Select = <T extends AnyObject = string>({
 
   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() {
@@ -292,9 +278,7 @@ export const Select = <T extends AnyObject = string>({
           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
@@ -329,19 +313,13 @@ export const Select = <T extends AnyObject = string>({
       )}
       {state.loading && (
         <Icon
-          className={classNames(
-            "flex-content p-2 z-0 order-9 text-muted pointer-events-none",
-          )}
+          className={classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none")}
           icon="icon-[svg-spinners--eclipse]"
         />
       )}
       {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-(--z-popover)"
@@ -357,7 +335,7 @@ export const Select = <T extends AnyObject = string>({
               itemRef={setItemRef}
               itemProps={makeItemProps}
               empty={emptyDisplay}
-              info={state.activeItem?.[infoProperty ?? "info"]}
+              info={getByPath(state.activeItem, infoProperty ?? "info")}
             >
               {(item, label) => renderer?.(item) ?? label}
             </Options>

package/src/select/useSelect.tsx

@@ -22,23 +22,8 @@
  */
 
 import { useDebounce } from "@react-fabric/core";
-import {
-  compareValues,
-  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 { getSelectedValue, makeOption } from "./helpers";
 
 type StateActions =
@@ -121,10 +106,7 @@ export const useSelect = ({
 
   const macthOption = useCallback(
     (item: AnyObject, query: string) => {
-      return (
-        matcher?.(item, query) ??
-        matchString(item[labelProperty] ?? item, query)
-      );
+      return matcher?.(item, query) ?? matchString(item[labelProperty] ?? item, query);
     },
     [matcher],
   );
@@ -142,9 +124,7 @@ export const useSelect = ({
   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,
@@ -155,8 +135,7 @@ export const useSelect = ({
         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];
+        if (autoComplete && action.index !== null) state.query = state.items[action.index];
         return {
           ...state,
           activeIndex: action.index,
@@ -167,9 +146,7 @@ export const useSelect = ({
         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") {
@@ -178,17 +155,12 @@ export const useSelect = ({
           value: state.emptyValue,
           activeIndex: null,
           activeItem: null,
-          selectedIndex: autoComplete
-            ? state.multiple
-              ? action.value?.length
-              : 0
-            : state.items.indexOf(action.value),
+          selectedIndex: autoComplete ? (state.multiple ? action.value?.length : 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) => {
@@ -236,8 +208,7 @@ export const useSelect = ({
         if (autoComplete && action.query !== undefined) {
           optionList = dedupe([action.query, ...optionList]);
         }
-        if (sortProperty)
-          optionList = optionList.sort(compareValues("asc", sortProperty));
+        if (sortProperty) optionList = optionList.sort(compareValues("asc", sortProperty));
         const grouped = groupBy(optionList, groupProperty, "");
         if (action.open) newState.open = true;
         newState.items = [];
@@ -254,9 +225,7 @@ 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;
         } else {
           newState.activeIndex = null;
@@ -266,7 +235,8 @@ export const useSelect = ({
       }
       return state;
     },
-    {
+    {},
+    () => ({
       multiple,
       emptyValue,
       open: alwaysOpen || defaultOpen,
@@ -279,18 +249,13 @@ export const useSelect = ({
       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,
-      );
+      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) {
@@ -304,21 +269,14 @@ export const useSelect = ({
     }
     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) === item,
-          );
-          if (!hasValue && newOption) {
-            optionsRef.current.push(newOption);
-          }
-          return hasValue ?? newOption ?? item;
-        },
-      );
+      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({
@@ -394,10 +352,7 @@ export const useSelect = ({
       optionsRef.current = [...optionsRef.current, ...val.map(createOption)];
     }
     if (autoComplete) {
-      optionsRef.current = dedupe([
-        ...(isArray(values) ? values : [values]),
-        ...optionsRef.current,
-      ]);
+      optionsRef.current = dedupe([...(isArray(values) ? values : [values]), ...optionsRef.current]);
     }
     dispatch({ type: "options", options: optionsRef.current });
   }, []);

package/src/types/index.ts

@@ -69,15 +69,15 @@ export interface InputProps<V = string> extends TestProps {
   /**
    * append to label end
    */
-  appendLabel?: JSX.Element | string | number | boolean;
+  appendLabel?: React.ReactElement | string | number | boolean;
   /**
    *
    */
-  decorateStart?: JSX.Element | string | number | boolean;
+  decorateStart?: React.ReactElement | string | number | boolean;
   /**
    *
    */
-  decorateEnd?: JSX.Element | string | number | boolean;
+  decorateEnd?: React.ReactElement | string | number | boolean;
   decorateEndShowWhenEmpty?: boolean;
   decorateEndHideWhenEmpty?: boolean;
   /**

package/src/types/schema.ts

@@ -148,7 +148,7 @@ export interface SchemaEditorProps {
   /**
    * footer actions
    */
-  children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
+  children?: Elements<React.ReactElement> | Array<Elements<React.ReactElement>>;
 
   onChange?: (schema: FormSchema) => void;
   onSubmit?: (schema: FormSchema) => void;