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

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/{Range.tsx → RangeSlider.tsx}

@@ -97,7 +97,7 @@ export interface RangeProps
 /**
  * Number Range input
  */
-export const Range = ({
+export const RangeSlider = ({
   error,
   name,
   value,
@@ -141,7 +141,7 @@ export const Range = ({
   const handleChange = useCallback(
     (val: [number, number]) => {
       setActualValue(val ?? [min, max]);
-      onChange?.(val ?? undefined);
+      onChange?.(val ?? null);
     },
     [onChange, min, max],
   );
@@ -190,7 +190,7 @@ export const Range = ({
     >
       <div
         className={classNames(
-          "flex-auto order-3 flex items-center select-none z-0",
+          "flex-1 order-3 flex items-center select-none z-0",
           vertical && "flex-col w-8",
           invalid ? "text-danger-500" : "text-primary-600",
         )}
@@ -201,7 +201,7 @@ export const Range = ({
         <div
           ref={rangerInstance.trackElRef}
           className={classNames(
-            "flex-auto relative flex items-center",
+            "flex-1 relative flex items-center",
             vertical ? "my-2 w-8" : "mx-2 h-8",
           )}
           style={{ height: vertical ? height : undefined }}

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> {
   /**
@@ -46,6 +45,10 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
    * search on value change
    */
   searchOnChange?: boolean;
+  /**
+   * hide search action handle
+   */
+  hideHandle?: boolean;
   /**
    * search handler
    */
@@ -63,10 +66,11 @@ export const Search = ({
   searching,
   placeholder,
   autoFocus,
+  hideHandle,
   allowClear = true,
-  searchOnChange = true,
-  decorateEnd,
-  decorateStart,
+  searchOnChange = false,
+  onBlur,
+  onFocus,
   onSearch,
   onChange,
   onEnterPressed,
@@ -82,10 +86,7 @@ export const Search = ({
     250,
   );
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(handleSearch),
-    [handleSearch],
-  );
+  const handleEnterPressed = useHandleEnter(handleSearch);
 
   useEffect(() => {
     setActualValue(deferred ?? "");
@@ -96,10 +97,10 @@ export const Search = ({
       const value = e?.target.value;
       refValue.current = value ?? "";
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      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();
       }
     },
@@ -108,21 +109,19 @@ export const Search = ({
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      showClear={!!actualValue && !disabled && !readOnly}
       onClear={handleChange}
       allowClear={allowClear}
       invalid={invalid}
       readOnly={readOnly}
       disabled={disabled}
       required={required}
-      decorateStart={decorateStart}
-      decorateEnd={
+      actionButton={
         <Fragment>
-          {decorateEnd}
           {searching && (
             <Icon className="p-2" icon={CoreIcons.spinner} animate="spin" />
           )}
-          {!searching && (
+          {!searching && !hideHandle && (
             <Button
               tabIndex={-1}
               variant="link"
@@ -137,7 +136,7 @@ export const Search = ({
       {...rest}
     >
       <input
-        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -150,8 +149,10 @@ export const Search = ({
         type="search"
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />

package/src/input/Slider.tsx

@@ -146,7 +146,7 @@ export const Slider = ({
     (value: number) => {
       const val = useInfinity && value === max ? Infinity : value;
       setActualValue(val ?? 0);
-      onChange?.(val ?? undefined);
+      onChange?.(val ?? null);
     },
     [onChange, max, useInfinity],
   );
@@ -194,7 +194,7 @@ export const Slider = ({
     >
       <div
         className={classNames(
-          "flex-auto order-3 flex items-center select-none relative z-0",
+          "flex-1 order-3 flex items-center select-none relative z-0",
           vertical && "flex-col w-8",
           invalid ? "text-danger-500" : "text-primary-600",
         )}
@@ -205,7 +205,7 @@ export const Slider = ({
         <div
           ref={rangerInstance.trackElRef}
           className={classNames(
-            "flex-auto relative flex items-center",
+            "flex-1 relative flex items-center",
             vertical ? "my-2 w-8" : "mx-2 h-8",
           )}
           style={{ height: vertical ? height : undefined }}

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,7 +97,13 @@ export const Switch = ({
   width,
   color,
   name,
+  onLabel,
+  offLabel,
+  onLabelColor,
+  offLabelColor,
   defaultColor,
+  // @ts-expect-error ignore
+  required,
   onChange,
   ...rest
 }: SwitchProps) => {
@@ -125,7 +138,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,14 +167,37 @@ 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 && (
-        <span className="flex-initial leading-5 truncate">{label}</span>
+        <span className="flex-initial leading-tight truncate">{label}</span>
       )}
     </label>
   );

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,
@@ -49,6 +49,10 @@ export interface TextareaProps
    * increment rows on value change
    */
   variableRows?: boolean;
+  /**
+   * expandable textarea
+   */
+  expandable?: boolean;
 }
 
 export const Textarea = ({
@@ -64,6 +68,9 @@ export const Textarea = ({
   rows = 5,
   maxRows = 12,
   variableRows,
+  expandable,
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
@@ -81,7 +88,7 @@ export const Textarea = ({
     (e?: ChangeEvent<HTMLTextAreaElement>) => {
       const value = e?.target.value;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
     [onChange],
   );
@@ -95,15 +102,20 @@ export const Textarea = ({
     }
   }, [actualValue, variableRows, rows, maxRows]);
 
+  const handleEnterPressed = useHandleEnter(onEnterPressed, {
+    preventDefault: !!onEnterPressed,
+  });
+
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      showClear={!!actualValue && !disabled && !readOnly}
       onClear={handleChange}
       invalid={invalid}
       readOnly={readOnly}
       disabled={disabled}
       required={required}
       wrapperRef={wrapperRef}
+      textareaExpandable={expandable}
       textarea
       {...rest}
     >
@@ -120,10 +132,12 @@ export const Textarea = ({
         name={name}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
-        onKeyDown={handleEnter(onEnterPressed)}
+        onKeyDown={handleEnterPressed}
       />
     </InputWrapper>
   );

package/src/internal/ErrorIcon.tsx

@@ -48,7 +48,7 @@ export const ErrorIcon = ({ error = "", invalid }: KeyValue) => {
               ) as string)
         }
         placement="bottom"
-        color="danger"
+        color="danger-200"
       >
         <Icon
           className="flex-content first:ms-2 self-center"

package/src/internal/FieldWrapper.tsx

@@ -22,7 +22,7 @@
  */
 
 import classNames from "classnames";
-import classes from "./Field.module.css";
+import { ErrorIcon } from "./ErrorIcon";
 
 export const FieldWrapper = ({
   label,
@@ -36,21 +36,23 @@ export const FieldWrapper = ({
   children,
   listing,
   className,
+  invalid,
+  error,
   "data-inner": isInner,
 }: KeyValue) => {
   return (
     <div
       className={classNames(
-        classes.fieldWrapper,
+        "fabric-fieldWrapper",
         className,
         inline ? "flex flex-nowrap gap-1" : "block",
       )}
       data-ref="fieldWrapper"
       style={{ width, flexBasis: width }}
     >
-      {!isInner && (
+      {!isInner && label && (
         <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 +75,8 @@ export const FieldWrapper = ({
               ✽
             </span>
           )}
+          <ErrorIcon invalid={invalid} error={error} />
+          <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";
@@ -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

@@ -80,6 +80,7 @@ export const AutoComplete = ({
   onInput,
   onFocus,
   onBlur,
+  onQuery,
   onEnterPressed,
   ...rest
 }: AutoCompleteProps) => {
@@ -104,6 +105,7 @@ export const AutoComplete = ({
     multiple,
     onChange,
     onSelect,
+    onQuery,
   });
 
   const dropdownKey = useId();
@@ -291,7 +293,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 +332,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
    */
@@ -82,6 +87,7 @@ export const DualList = <T extends AnyObject = string>({
   ref,
   value,
   options,
+  emptyDisplay,
   groupProperty,
   height = "18rem",
   labelProperty = "label" as AnyObject,
@@ -210,6 +216,7 @@ export const DualList = <T extends AnyObject = string>({
             error={error}
             height={height}
             options={leftOptions}
+            emptyDisplay={emptyDisplay}
             groupProperty={groupProperty}
             labelProperty={labelProperty}
             valueProperty={valueProperty}
@@ -268,6 +275,7 @@ export const DualList = <T extends AnyObject = string>({
             allowClear
             height={height}
             options={rightOptions}
+            emptyDisplay={emptyDisplay}
             groupProperty={groupProperty}
             labelProperty={labelProperty}
             valueProperty={valueProperty}