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

package/src/input/Radio.tsx

@@ -69,6 +69,15 @@ export interface RadioProps extends RefProp<HTMLInputElement> {
   iconChecked?: string;
 }
 
+/**
+ * Radio input component with custom icons and label.
+ *
+ * This component renders a radio button with an optional label and custom icons for checked and unchecked states.
+ * It supports disabled and invalid states, and allows for custom width.
+ *
+ * @param {RadioProps} props - The properties for the Radio component.
+ * @returns {JSX.Element} The rendered Radio input component.
+ */
 export const Radio = ({
   ref,
   name,
@@ -126,7 +135,7 @@ export const Radio = ({
       <Icon
         className={classNames(
           "p-0.5 hidden peer-checked:inline-block",
-          icon && !iconChecked && "bg-primary-500 text-white",
+          icon && !iconChecked && "bg-primary-500 text-white!",
         )}
         color={invalid ? "danger" : "primary"}
         size="1.25em"
@@ -139,7 +148,7 @@ export const Radio = ({
         icon={iconOff}
       />
       {label && (
-        <span className="flex-initial leading-none truncate">{label}</span>
+        <span className="flex-initial leading-tight truncate">{label}</span>
       )}
     </label>
   );

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
    */
@@ -56,18 +74,31 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
   onChange?: (value: AnyObject) => void;
 }
 
+/**
+ * RadioGroup component for rendering a group of radio buttons.
+ * It allows for customization of the label, options, and layout.
+ * The component supports inline and vertical orientations, and can handle change events.
+ *
+ * @param {RadioGroupProps} props - The properties for the RadioGroup component.
+ * @returns {JSX.Element} The rendered RadioGroup component.
+ */
 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}

@@ -95,9 +95,17 @@ export interface RangeProps
 }
 
 /**
- * Number Range input
+ * RangeSlider component for rendering a range slider input.
+ * It supports vertical orientation, custom colors, step increments,
+ * min/max values, and display of labels and value tooltips.
+ * The component uses the Ranger library for handling the slider functionality.
+ * It also provides error handling and supports disabled and read-only states.
+ * The component is designed to be flexible and customizable, allowing for various configurations.
+ *
+ * @param {RangeProps} props - The properties for the RangeSlider component.
+ * @returns {JSX.Element} The rendered RangeSlider component.
  */
-export const Range = ({
+export const RangeSlider = ({
   error,
   name,
   value,
@@ -141,7 +149,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 +198,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 +209,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,12 +45,25 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
    * search on value change
    */
   searchOnChange?: boolean;
+  /**
+   * hide search action handle
+   */
+  hideHandle?: boolean;
   /**
    * search handler
    */
   onSearch?: (query?: string) => void;
 }
 
+/**
+ * Search input component with optional searching state and search handler.
+ * This component allows users to input search queries and trigger a search action.
+ * It supports features like searching on value change, showing a search handle,
+ * and handling search actions with a debounce mechanism.
+ *
+ * @param {SearchProps} props - The properties for the Search component.
+ * @returns {JSX.Element} The rendered Search input component.
+ */
 export const Search = ({
   ref,
   value,
@@ -63,10 +75,11 @@ export const Search = ({
   searching,
   placeholder,
   autoFocus,
+  hideHandle,
   allowClear = true,
-  searchOnChange = true,
-  decorateEnd,
-  decorateStart,
+  searchOnChange = false,
+  onBlur,
+  onFocus,
   onSearch,
   onChange,
   onEnterPressed,
@@ -82,10 +95,7 @@ export const Search = ({
     250,
   );
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(handleSearch),
-    [handleSearch],
-  );
+  const handleEnterPressed = useHandleEnter(handleSearch);
 
   useEffect(() => {
     setActualValue(deferred ?? "");
@@ -96,10 +106,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 +118,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 +145,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 +158,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

@@ -96,7 +96,13 @@ export interface SliderProps
 }
 
 /**
- * Number slider input
+ * Slider component for rendering a slider input with labels and value display.
+ * It supports vertical orientation, custom min/max labels, and step ranges.
+ * The component handles value changes, displays tooltips, and integrates with ranger for slider functionality.
+ * It also supports deferred value updates for smoother interactions.
+ *
+ * @param {SliderProps} props - The properties for the Slider component.
+ * @returns {JSX.Element} The rendered Slider component.
  */
 export const Slider = ({
   error,
@@ -146,7 +152,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 +200,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 +211,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,15 +72,30 @@ 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;
 }
 
+/**
+ * Switch input component with custom labels and colors.
+ * This component renders a switch input with optional labels for the "on" and "off" states,
+ * and allows for custom colors for the switch background and labels.
+ * It supports disabled and invalid states, and handles change events.
+ *
+ * @param {SwitchProps} props - The properties for the Switch component.
+ * @returns {JSX.Element} The rendered Switch input component.
+ */
 export const Switch = ({
   ref,
   label,
@@ -90,7 +106,13 @@ export const Switch = ({
   width,
   color,
   name,
+  onLabel,
+  offLabel,
+  onLabelColor,
+  offLabelColor,
   defaultColor,
+  // @ts-expect-error ignore
+  required,
   onChange,
   ...rest
 }: SwitchProps) => {
@@ -125,7 +147,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 +176,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,8 +49,22 @@ export interface TextareaProps
    * increment rows on value change
    */
   variableRows?: boolean;
+  /**
+   * expandable textarea
+   */
+  expandable?: boolean;
 }
 
+/**
+ * Textarea component that allows users to input multi-line text.
+ * It supports features like variable row count, expandable behavior,
+ * and handling of focus, blur, and change events.
+ * This component is designed to be flexible and user-friendly,
+ * providing a clear interface for text input with optional validation and accessibility features.
+ *
+ * @param {TextareaProps} props - The properties for the Textarea component.
+ * @returns {JSX.Element} The rendered Textarea component.
+ */
 export const Textarea = ({
   ref,
   value,
@@ -64,6 +78,9 @@ export const Textarea = ({
   rows = 5,
   maxRows = 12,
   variableRows,
+  expandable,
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
@@ -81,7 +98,7 @@ export const Textarea = ({
     (e?: ChangeEvent<HTMLTextAreaElement>) => {
       const value = e?.target.value;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
     [onChange],
   );
@@ -95,15 +112,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 +142,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>
       )}