@react-fabric/form 1.0.0-beta.3 → 1.0.0-beta.30

package/src/input/RadioGroup.tsx

@@ -21,11 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { cloneChildren } from "@react-fabric/core";
 import {
-  type CssProp,
   type ChildrenProp,
+  type CssProp,
 } from "@react-fabric/core/dist/types/types";
-import { Children, cloneElement } from "react";
+import { cloneElement } from "react";
 import { FieldWrapper } from "../internal/FieldWrapper";
 import { type Radio } from "./Radio";
 
@@ -42,6 +43,23 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
    * field info
    */
   info?: string;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+  /**
+   * inline label and input
+   */
+  inline?: boolean;
+  /**
+   * label width for inline
+   */
+  labelWidth?: string;
+  /**
+   * label width for inline
+   */
+  optionWidth?: string;
   /**
    * field name
    */
@@ -60,14 +78,19 @@ export const RadioGroup = ({
   children,
   name,
   className,
+  optionWidth,
   onChange,
   ...rest
 }: RadioGroupProps) => {
   return (
     <FieldWrapper {...rest}>
       <div className={className}>
-        {Children.map(children, (child) =>
-          cloneElement(child as AnyObject, { name, onChange }),
+        {cloneChildren(children, (child: AnyObject) =>
+          cloneElement(child, {
+            name,
+            onChange,
+            width: optionWidth,
+          }),
         )}
       </div>
     </FieldWrapper>

package/src/input/Search.tsx

@@ -150,7 +150,7 @@ export const Search = ({
         type="search"
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}

package/src/input/Switch.tsx

@@ -27,6 +27,7 @@ import {
 } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import {
+  Fragment,
   useCallback,
   useDeferredValue,
   useEffect,
@@ -34,7 +35,7 @@ import {
   type ChangeEvent,
 } from "react";
 import { ErrorIcon } from "../internal/ErrorIcon";
-import { getBgClass, getColor } from "../utils";
+import { getBgClass, getColor, getColorClass } from "../utils";
 
 export interface SwitchProps extends RefProp<HTMLInputElement> {
   /**
@@ -71,13 +72,19 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
   /**
    * cutom Switch icon
    */
-  color?: ColorType;
+  color?: string | ColorType;
   /**
    * cutom Switch icon
    */
-  defaultColor?: ColorType;
+  defaultColor?: string | ColorType;
 
   name?: string;
+
+  onLabel?: string;
+  onLabelColor?: string | ColorType;
+
+  offLabel?: string;
+  offLabelColor?: string | ColorType;
 }
 
 export const Switch = ({
@@ -90,6 +97,10 @@ export const Switch = ({
   width,
   color,
   name,
+  onLabel,
+  offLabel,
+  onLabelColor,
+  offLabelColor,
   defaultColor,
   onChange,
   ...rest
@@ -125,7 +136,7 @@ export const Switch = ({
           actualValue && getBgClass(color ? `${color}-500` : "primary-500"),
           !actualValue &&
             (defaultColor ? getBgClass(`${defaultColor}-500`) : "bg-tint-200"),
-          "relative flex h-6 w-10 cursor-pointer rounded-full p-1 transition-colors duration-200 ease-in-out",
+          "relative grid grid-cols-2 items-center h-6 min-w-10 cursor-pointer rounded-full p-1 transition-colors duration-200 ease-in-out",
         )}
         style={{
           backgroundColor: actualValue
@@ -154,10 +165,33 @@ export const Switch = ({
           aria-hidden="true"
           className={classNames(
             !disabled && "shadow-sm",
-            actualValue ? "translate-x-4" : "translate-x-0",
-            "pointer-events-none inline-block size-4 rounded-full bg-white ring-0 transition duration-200 ease-in-out",
+            actualValue ? "translate-x-[100%]" : "translate-x-0",
+            "pointer-events-none inline-block h-4 start-1 absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out",
           )}
+          style={{
+            width: "calc(50% - 0.25rem)",
+          }}
         />
+        {(!!onLabel || !!offLabel) && (
+          <Fragment>
+            <span
+              className={`whitespace-nowrap text-xs px-1 ${getColorClass(onLabelColor ?? "white")}`}
+              style={{
+                color: getColor(onLabelColor),
+              }}
+            >
+              {onLabel ?? " "}
+            </span>
+            <span
+              className={`whitespace-nowrap text-xs px-1 ${getColorClass(offLabelColor ?? "base")}`}
+              style={{
+                color: getColor(offLabelColor),
+              }}
+            >
+              {offLabel ?? " "}
+            </span>
+          </Fragment>
+        )}
       </div>
       <ErrorIcon invalid={invalid} error={error} />
       {label && (

package/src/input/Textarea.tsx

@@ -49,6 +49,10 @@ export interface TextareaProps
    * increment rows on value change
    */
   variableRows?: boolean;
+  /**
+   * expandable textarea
+   */
+  expandable?: boolean;
 }
 
 export const Textarea = ({
@@ -64,6 +68,7 @@ export const Textarea = ({
   rows = 5,
   maxRows = 12,
   variableRows,
+  expandable,
   onChange,
   onEnterPressed,
   ...rest
@@ -104,6 +109,7 @@ export const Textarea = ({
       disabled={disabled}
       required={required}
       wrapperRef={wrapperRef}
+      textareaExpandable={expandable}
       textarea
       {...rest}
     >
@@ -120,10 +126,12 @@ export const Textarea = ({
         name={name}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
         onChange={handleChange}
-        onKeyDown={handleEnter(onEnterPressed)}
+        onKeyDown={handleEnter(onEnterPressed, {
+          preventDefault: !!onEnterPressed,
+        })}
       />
     </InputWrapper>
   );

package/src/internal/FieldWrapper.tsx

@@ -50,7 +50,7 @@ export const FieldWrapper = ({
     >
       {!isInner && (
         <div
-          className="flex flex-nowrap flex-content gap-1 py-0.5 px-2"
+          className="flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2"
           style={{ width: inline ? labelWidth : undefined }}
         >
           <label
@@ -73,6 +73,7 @@ export const FieldWrapper = ({
               ✽
             </span>
           )}
+          <div className="flex-1" />
           {appendLabel && <span className="flex-content">{appendLabel}</span>}
         </div>
       )}

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";
@@ -50,6 +49,7 @@ export const InputWrapper = ({
   noOutline,
   noBorder,
   textarea = false,
+  textareaExpandable = false,
   "data-inner": isInner,
   "data-open": isOpen,
   // expand autocomplete
@@ -117,7 +117,11 @@ 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
@@ -156,7 +160,7 @@ export const InputWrapper = ({
           {decorateEnd}
         </div>
       )}
-      {textarea && (
+      {textareaExpandable && (
         <Icon
           onClick={() => setExpanded(!isExpanded)}
           icon={isExpanded ? CoreIcons.arrowCollapse : CoreIcons.arrowExpand}
@@ -173,14 +177,7 @@ export const InputWrapper = ({
         className="flex-1 relative min-h-8"
         style={{ width, flexBasis: width }}
       >
-        {!isExpanded && el}
-        {isExpanded && (
-          <FloatingPortal
-            root={elRef.current?.closest<HTMLElement>(".theme-base")}
-          >
-            {el}
-          </FloatingPortal>
-        )}
+        {el}
       </div>
     </Wrapper>
   );

package/src/select/List.tsx

@@ -32,7 +32,7 @@ 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";
@@ -55,6 +55,7 @@ export const List = <T extends AnyObject = string>({
   valueProperty,
   multiple,
   allowCreate,
+  searchable,
   createOption,
   matcher,
   renderer,
@@ -166,9 +167,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 +229,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 +253,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 +302,12 @@ export const List = <T extends AnyObject = string>({
           {...floatingProps}
           items={state.items}
           active={state.activeIndex}
+          valueProperty={valueProperty}
+          labelProperty={labelProperty}
           itemRef={setItemRef}
           itemProps={makeItemProps}
         >
-          {(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

@@ -172,6 +172,9 @@ export const Select = <T extends AnyObject = string>({
             return false;
           } else if (state.query) {
             handleQuery("");
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
           } else {
             onEnterPressed?.(evt);
           }
@@ -273,6 +276,7 @@ export const Select = <T extends AnyObject = string>({
           "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()
         }
@@ -294,7 +298,6 @@ export const Select = <T extends AnyObject = string>({
             multiple && "min-w-24",
           )}
           placeholder={isEmpty(state.value) ? placeholder : ""}
-          {...referenceProps}
           onChange={(evt) => handleQuery(evt.target.value)}
         />
       </div>

package/src/select/useSelect.tsx

@@ -23,10 +23,12 @@
 
 import { useDebounce } from "@react-fabric/core";
 import {
+  compareValues,
   dedupe,
   EMPTY_ARRAY,
   groupBy,
   isArray,
+  isString,
   matchString,
 } from "@react-fabric/utilities";
 import {
@@ -173,9 +175,9 @@ export const useSelect = ({
         if (action.value !== undefined) {
           if (multiple) {
             const values = [];
-            if (action.value && autoComplete)
+            if (isString(action.value))
               values.push(...action.value.split(/,\s?/));
-            else if (action.value) values.push(action.value);
+            else values.push(action.value);
             newState.value = [...state.value];
             values.forEach((value: AnyObject) => {
               newState.value = newState.value.includes?.(value)
@@ -222,6 +224,7 @@ export const useSelect = ({
         if (autoComplete && action.query !== undefined) {
           optionList = dedupe([action.query, ...optionList]);
         }
+        optionList = optionList.sort(compareValues("asc", labelProperty));
         const grouped = groupBy(optionList, groupProperty, "");
         if (action.open) newState.open = true;
         newState.items = [];
@@ -229,7 +232,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) {
@@ -282,24 +285,26 @@ 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 = (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({
@@ -367,7 +372,11 @@ export const useSelect = ({
       value: value?.___create___ ? value.value : value,
     });
     if (value?.___create___) {
-      optionsRef.current = [...optionsRef.current, createOption(value.value)];
+      let val = [value.value];
+      if (multiple) {
+        val = value.value.split(/,\s?/);
+      }
+      optionsRef.current = [...optionsRef.current, ...val.map(createOption)];
     }
     if (autoComplete) {
       optionsRef.current = dedupe([

package/src/types/index.ts

@@ -21,9 +21,12 @@
  * 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";
 
-export interface InputProps<V = string> {
+export interface InputProps<V = string> extends TestProps {
   /**
    * value
    */