@react-fabric/form 1.0.0-beta.5 → 1.0.0-beta.52

package/src/internal/InputWrapper.tsx

@@ -21,7 +21,6 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { FloatingPortal } from "@floating-ui/react";
 import { CoreIcons, Icon } from "@react-fabric/core";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
@@ -35,7 +34,6 @@ import {
 } from "react";
 import { Fragment } from "react/jsx-runtime";
 import { ErrorIcon } from "./ErrorIcon";
-import classes from "./Field.module.css";
 import { FieldWrapper } from "./FieldWrapper";
 
 export const InputWrapper = ({
@@ -45,11 +43,15 @@ export const InputWrapper = ({
   showClear,
   decorateStart,
   decorateEnd,
+  decorateEndShowWhenEmpty,
+  decorateEndHideWhenEmpty,
   children,
   onClear,
   noOutline,
   noBorder,
+  actionButton,
   textarea = false,
+  textareaExpandable = false,
   "data-inner": isInner,
   "data-open": isOpen,
   // expand autocomplete
@@ -102,12 +104,12 @@ export const InputWrapper = ({
       role="none"
       ref={wrapperRef}
       className={classNames(
-        classes.inputWrapper,
-        invalid && classes.invalidWrapper,
+        "fabric-inputWrapper",
+        invalid && "fabric-invalidWrapper",
         !noOutline &&
           !noBorder &&
-          "bg-[var(--fabric-input)] outline overflow-hidden",
-        "flex flex-nowrap items-center",
+          "bg-(--fabric-input) outline overflow-hidden",
+        "flex flex-nowrap items-center flex-1",
         textarea ? "rounded-capped group" : "rounded",
         isExpanded
           ? "fixed inset-4 z-[99]"
@@ -117,13 +119,17 @@ export const InputWrapper = ({
         !noOutline &&
           "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto",
       )}
-      onKeyDown={(e) => e.key === "Escape" && setExpanded(false)}
+      onKeyDown={(e) =>
+        e.key === "Escape" &&
+        isExpanded &&
+        (setExpanded(false), e.stopPropagation())
+      }
     >
       {decorateStart && (
         <div
           onClickCapture={doFocus}
           className={classNames(
-            classes.decorate,
+            "fabric-decorate",
             "text-muted leading-none flex-content",
             isString(decorateStart) && "px-1",
           )}
@@ -139,7 +145,7 @@ export const InputWrapper = ({
           onClick={handleClear}
           className={classNames(
             "text-tint-500 hover:text-tint-700 p-1 z-1 flex-content",
-            classes.inputClear,
+            "fabric-inputClear",
             textarea && "self-start mt-1 me-1",
           )}
         />
@@ -148,15 +154,29 @@ export const InputWrapper = ({
         <div
           onClickCapture={doFocus}
           className={classNames(
-            classes.decorate,
+            "fabric-decorate",
             "text-muted leading-none flex-content",
             isString(decorateEnd) && "px-1",
+            decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden",
+            decorateEndShowWhenEmpty &&
+              "hidden peer-placeholder-shown:inline-block",
           )}
         >
           {decorateEnd}
         </div>
       )}
-      {textarea && (
+      {actionButton && (
+        <div
+          onClickCapture={doFocus}
+          className={classNames(
+            "fabric-decorate",
+            "text-muted leading-none flex-content",
+          )}
+        >
+          {actionButton}
+        </div>
+      )}
+      {textareaExpandable && (
         <Icon
           onClick={() => setExpanded(!isExpanded)}
           icon={isExpanded ? CoreIcons.arrowCollapse : CoreIcons.arrowExpand}
@@ -170,17 +190,13 @@ export const InputWrapper = ({
     <Wrapper {...wrapperProps}>
       <div
         ref={elRef}
-        className="flex-1 relative min-h-8"
+        className={classNames(
+          "relative min-h-8 flex flex-col flex-nowrap",
+          width ? "flex-auto" : "flex-1",
+        )}
         style={{ width, flexBasis: width }}
       >
-        {!isExpanded && el}
-        {isExpanded && (
-          <FloatingPortal
-            root={elRef.current?.closest<HTMLElement>(".theme-base")}
-          >
-            {el}
-          </FloatingPortal>
-        )}
+        {el}
       </div>
     </Wrapper>
   );

package/src/select/AutoComplete.tsx

@@ -61,6 +61,13 @@ type AutoCompleteProps = Omit<
   onInput?: (query: string) => void;
 };
 
+/**
+ * AutoComplete component for selecting or entering values with history suggestions.
+ * It supports multiple selections, history suggestions, and custom styling.
+ *
+ * @param {AutoCompleteProps} props - The properties for the AutoComplete component.
+ * @returns {JSX.Element} The rendered AutoComplete component.
+ */
 export const AutoComplete = ({
   ref,
   name,
@@ -80,6 +87,7 @@ export const AutoComplete = ({
   onInput,
   onFocus,
   onBlur,
+  onQuery,
   onEnterPressed,
   ...rest
 }: AutoCompleteProps) => {
@@ -104,6 +112,7 @@ export const AutoComplete = ({
     multiple,
     onChange,
     onSelect,
+    onQuery,
   });
 
   const dropdownKey = useId();
@@ -291,7 +300,9 @@ export const AutoComplete = ({
           data-testid={name}
           name={name}
           size={1}
+          ref={ref}
           onInput={onInput}
+          autoFocus={autoFocus}
           rows={!multiple && expandOnEdit && state.open ? 5 : 1}
           className={classNames(
             "appearance-none bg-transparent outline-none border-none ring-0 flex-1 resize-none",
@@ -328,7 +339,7 @@ export const AutoComplete = ({
           >
             <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,

package/src/select/DualList.tsx

@@ -24,6 +24,7 @@
 import { Button, ButtonGroup, CoreIcons } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import {
+  type ReactElement,
   useCallback,
   useDeferredValue,
   useEffect,
@@ -68,6 +69,10 @@ export interface DualListProps<T>
    * value property name
    */
   valueProperty?: keyof T;
+  /**
+   * empty list display
+   */
+  emptyDisplay?: ReactElement;
   /**
    * item renderer
    */
@@ -78,10 +83,22 @@ export interface DualListProps<T>
   onChange?: (value?: string[]) => void;
 }
 
+/**
+ * DualList component allows users to select items from two lists.
+ * It displays two lists side by side, one for unselected items and one for selected items.
+ * Users can move items between the lists using buttons or drag-and-drop functionality.
+ * It supports multiple selections and provides options for grouping, labeling, and rendering items.
+ * It also includes features for handling empty states and custom rendering of items.
+ * This component is useful for scenarios where users need to manage selections from a larger set of options, such as in forms or settings.
+ *
+ * @param {DualListProps<T>} props - The properties for the DualList component.
+ * @returns {JSX.Element} The rendered DualList component.
+ */
 export const DualList = <T extends AnyObject = string>({
   ref,
   value,
   options,
+  emptyDisplay,
   groupProperty,
   height = "18rem",
   labelProperty = "label" as AnyObject,
@@ -210,6 +227,7 @@ export const DualList = <T extends AnyObject = string>({
             error={error}
             height={height}
             options={leftOptions}
+            emptyDisplay={emptyDisplay}
             groupProperty={groupProperty}
             labelProperty={labelProperty}
             valueProperty={valueProperty}
@@ -268,6 +286,7 @@ export const DualList = <T extends AnyObject = string>({
             allowClear
             height={height}
             options={rightOptions}
+            emptyDisplay={emptyDisplay}
             groupProperty={groupProperty}
             labelProperty={labelProperty}
             valueProperty={valueProperty}

package/src/select/List.tsx

@@ -32,13 +32,21 @@ import {
 import { Chip } from "@react-fabric/core";
 import { isArray, isEmpty } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Fragment, useCallback, useId, useMemo } from "react";
+import { Fragment, useCallback, useId, useLayoutEffect, useMemo } from "react";
 import { FieldWrapper } from "../internal/FieldWrapper";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type SelectProps } from "../types";
 import { Options } from "./Options";
 import { useSelect } from "./useSelect";
 
+/**
+ * List component for selecting items from a list.
+ * It supports single and multiple selections, searching, creating new options,
+ * and custom rendering of options.
+ *
+ * @param {SelectProps<T>} props - The properties for the List component.
+ * @returns {JSX.Element} The rendered List component.
+ */
 export const List = <T extends AnyObject = string>({
   ref,
   name,
@@ -53,8 +61,10 @@ export const List = <T extends AnyObject = string>({
   groupProperty,
   labelProperty,
   valueProperty,
+  sortProperty,
   multiple,
   allowCreate,
+  searchable,
   createOption,
   matcher,
   renderer,
@@ -62,6 +72,7 @@ export const List = <T extends AnyObject = string>({
   onChange,
   onSelect,
   onEnterPressed,
+  emptyDisplay,
   invalid,
   error,
   allowClear,
@@ -72,7 +83,9 @@ export const List = <T extends AnyObject = string>({
   // @ts-expect-error ignore
   "data-hide-selected": hideSelected,
   ...rest
-}: SelectProps<T> & { height?: string | number }) => {
+}: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
+  height?: string | number;
+}) => {
   const Wrapper = useMemo(() => (isInner ? Fragment : FieldWrapper), [isInner]);
   const wrapperProps = useMemo(
     () => (isInner ? {} : { ...rest }),
@@ -96,6 +109,7 @@ export const List = <T extends AnyObject = string>({
     groupProperty,
     labelProperty,
     valueProperty,
+    sortProperty,
     allowCreate,
     createOption,
     matcher,
@@ -166,9 +180,12 @@ export const List = <T extends AnyObject = string>({
           }
         } else if (evt.key === "Backspace") {
           !state.query && handleRemove();
-        } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
-          if (state.activeIndex === null) {
-            setActiveIndex(state.selectedIndex);
+        } else if (!searchable || ["ArrowUp", "ArrowDown"].includes(evt.key)) {
+          if (
+            ["ArrowUp", "ArrowDown"].includes(evt.key) &&
+            state.activeIndex === null
+          ) {
+            setActiveIndex(state.selectedIndex ?? 0);
           }
           setTimeout(() => {
             props.onKeyDown?.(evt);
@@ -225,6 +242,15 @@ export const List = <T extends AnyObject = string>({
     }
   }, [state.value, state.query, placeholder, renderer]);
 
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      state.selectedIndex &&
+        listRef.current[state.selectedIndex]?.scrollIntoView({
+          block: "center",
+        });
+    }, 100);
+  }, [state.selectedIndex]);
+
   return (
     <Wrapper {...wrapperProps}>
       <InputWrapper
@@ -240,22 +266,34 @@ export const List = <T extends AnyObject = string>({
         wrapperRef={refs.setReference}
       >
         <div
+          role="none"
           data-select-display="true"
-          className="group flex-1 py-1 px-2 truncate text-start flex gap-1 flex-wrap"
+          className={classNames(
+            "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()
+          }
         >
           {!hideSelected && displayValue}
           <input
+            readOnly={!searchable || readOnly}
             disabled={disabled}
             value={state.query ?? ""}
             aria-invalid={invalid}
             data-testid={name}
             name={name}
+            size={1}
+            ref={ref}
+            autoFocus={autoFocus}
             className={classNames(
               "appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24",
               disabled && "cursor-not-allowed pointer-events-none",
+              multiple && "min-w-24",
             )}
             placeholder={isEmpty(state.value) ? placeholder : ""}
-            {...referenceProps}
             onChange={(evt) => handleQuery(evt.target.value)}
           />
         </div>
@@ -277,10 +315,13 @@ export const List = <T extends AnyObject = string>({
           {...floatingProps}
           items={state.items}
           active={state.activeIndex}
+          valueProperty={valueProperty}
+          labelProperty={labelProperty}
           itemRef={setItemRef}
           itemProps={makeItemProps}
+          empty={emptyDisplay}
         >
-          {(item) => renderer?.(item) ?? item[labelProperty] ?? item}
+          {(item, label) => renderer?.(item) ?? label}
         </Options>
       </FloatingFocusManager>
     </Wrapper>

package/src/select/Options.tsx

@@ -93,7 +93,7 @@ export const Options = ({
             >
               <Trans
                 i18nKey="form:select.createOption"
-                values={{ query: item.value }}
+                values={{ query: item.value ?? item }}
                 components={[<strong key="t0">query</strong>]}
               />
             </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,16 @@ export const Select = <T extends AnyObject = string>({
   autoFocus,
   error,
   options,
+  defaultOpen,
+  hideHandle,
   groupProperty,
   labelProperty = "label" as AnyObject,
   valueProperty = "id" as AnyObject,
+  sortProperty,
   multiple,
   searchable,
   allowCreate,
+  emptyDisplay,
   createOption,
   matcher,
   renderer,
@@ -86,9 +98,11 @@ export const Select = <T extends AnyObject = string>({
     value,
     options,
     multiple,
+    defaultOpen,
     groupProperty,
     labelProperty,
     valueProperty,
+    sortProperty,
     allowCreate,
     createOption,
     matcher,
@@ -172,6 +186,9 @@ export const Select = <T extends AnyObject = string>({
             return false;
           } else if (state.query) {
             handleQuery("");
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
           } else {
             onEnterPressed?.(evt);
           }
@@ -290,7 +307,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 +315,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 +344,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,6 +356,7 @@ export const Select = <T extends AnyObject = string>({
               labelProperty={labelProperty}
               itemRef={setItemRef}
               itemProps={makeItemProps}
+              empty={emptyDisplay}
             >
               {(item, label) => renderer?.(item) ?? label}
             </Options>

package/src/select/useSelect.tsx

@@ -23,6 +23,7 @@
 
 import { useDebounce } from "@react-fabric/core";
 import {
+  compareValues,
   dedupe,
   EMPTY_ARRAY,
   groupBy,
@@ -75,12 +76,14 @@ interface State {
 export const useSelect = ({
   options = EMPTY_ARRAY,
   value,
+  defaultOpen = false,
   autoComplete,
   multiple = false,
   allowCreate = false,
   groupProperty = "",
   valueProperty = "id",
   labelProperty = "label",
+  sortProperty,
   createOption = makeOption,
   matcher,
   onQuery,
@@ -90,10 +93,12 @@ export const useSelect = ({
   value?: AnyObject;
   options?: AnyObject[];
   multiple?: 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;
@@ -223,6 +228,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 +237,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,7 +261,7 @@ export const useSelect = ({
     {
       multiple,
       emptyValue,
-      open: false,
+      open: defaultOpen,
       loading: false,
       activeIndex: null,
       selectedIndex: null,
@@ -283,7 +290,7 @@ export const useSelect = ({
       dispatch({ type: "options", options: optionsRef.current });
       dispatch({
         type: "setValue",
-        value: hasValue ?? newOption ?? "",
+        value: hasValue ?? newOption ?? deferred,
       });
     }
     if (multiple) {
@@ -295,12 +302,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 +341,7 @@ export const useSelect = ({
       });
     },
     [onQuery],
+    300,
   );
 
   // handlers

package/src/types/index.ts

@@ -21,17 +21,21 @@
  * 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 } from "@react-fabric/core/dist/types/types";
+import {
+  type RefProp,
+  type TestProps,
+} from "@react-fabric/core/dist/types/types";
+import { type ReactElement } from "react";
 
-export interface InputProps<V = string> {
+export interface InputProps<V = string> extends TestProps {
   /**
    * value
    */
-  value?: V;
+  value?: V | null;
   /**
    * change handler
    */
-  onChange?: (value?: V) => void;
+  onChange?: (value: V | null) => void;
   /**
    * on focus event handler
    */
@@ -69,11 +73,15 @@ export interface InputProps<V = string> {
    *
    */
   decorateEnd?: JSX.Element | string | number | boolean;
+  decorateEndShowWhenEmpty?: boolean;
+  decorateEndHideWhenEmpty?: boolean;
   /**
    * info label at bottom
    */
   info?: string;
 
+  monospace?: boolean;
+
   /**
    * required
    */
@@ -117,9 +125,15 @@ export interface InputProps<V = string> {
   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
    */
@@ -136,6 +150,10 @@ export interface BaseSelectProps<T>
    * value property name
    */
   valueProperty?: keyof T;
+  /**
+   * value property name
+   */
+  sortProperty?: keyof T | true;
   /**
    * searchable list
    */
@@ -144,6 +162,10 @@ export interface BaseSelectProps<T>
    * allow create item
    */
   allowCreate?: boolean;
+  /**
+   * empty list display
+   */
+  emptyDisplay?: ReactElement;
   /**
    * create new item object
    */
@@ -162,7 +184,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> &
   (
     | {
         /**