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

package/src/input/Password.tsx

@@ -21,21 +21,20 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, CoreIcons, Tooltip } from "@react-fabric/core";
+import { Button, Tooltip } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useState,
   type ChangeEvent,
 } from "react";
 import { useTranslation } from "react-i18next";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
   /**
@@ -48,6 +47,12 @@ export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
   strength?: number;
 }
 
+/**
+ * Password input component with optional strength meter and toggle visibility.
+ *
+ * @param {PasswordProps} props - The properties for the Password component.
+ * @returns {JSX.Element} The rendered Password input component.
+ */
 export const Password = ({
   ref,
   value,
@@ -58,8 +63,11 @@ export const Password = ({
   disabled,
   required,
   placeholder,
+  defaultValue,
   autoFocus,
   showToggle,
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
@@ -68,12 +76,9 @@ export const Password = ({
   const [show, setShow] = useState(false);
 
   const [actualValue, setActualValue] = useState("");
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred ?? "");
@@ -81,24 +86,25 @@ export const Password = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {
-      const value = e?.target.value;
+      const value = e?.target.value ?? defaultValue;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
-    [onChange],
+    [onChange, defaultValue],
   );
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      showClear={!!actualValue && !disabled && !readOnly}
       onClear={handleChange}
       invalid={invalid}
       readOnly={readOnly}
       disabled={disabled}
       required={required}
       {...rest}
-      decorateEnd={
-        showToggle && (
+      actionButton={
+        showToggle &&
+        actualValue && (
           <Tooltip
             color="warning"
             content={t(show ? "password.hide" : "password.show")}
@@ -108,7 +114,9 @@ export const Password = ({
               color="warning"
               variant="link"
               aria-label={t(show ? "password.hide" : "password.show")}
-              icon={show ? CoreIcons.eyeOff : CoreIcons.eye}
+              icon={
+                show ? "icon-[mdi--eye-off-outline]" : "icon-[mdi--eye-outline]"
+              }
               onClick={() => setShow(!show)}
             />
           </Tooltip>
@@ -116,7 +124,7 @@ export const Password = ({
       }
     >
       <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}
@@ -129,8 +137,10 @@ export const Password = ({
         type={show ? "text" : "password"}
         ref={ref}
         autoComplete="off"
-        {...{ autoFocus }}
+        autoFocus={autoFocus}
         value={actualValue}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />
@@ -138,7 +148,7 @@ export const Password = ({
         <div
           className={classNames(
             "absolute bottom-px h-[3px] inset-x-0 after:block after:h-full after:bg-dimmed",
-            "ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-danger-500 via-marigold-500 to-jade-500",
+            "ltr:bg-linear-to-r rtl:bg-linear-to-l from-danger-500 via-marigold-500 to-jade-500",
           )}
           style={{
             paddingInlineStart: `${strength > 1 ? 100 : strength * 100}%`,

package/src/input/Radio.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import { useCallback, useMemo, type ChangeEvent } from "react";
@@ -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,
@@ -84,10 +93,10 @@ export const Radio = ({
   ...rest
 }: RadioProps) => {
   const iconOn = useMemo(
-    () => iconChecked ?? icon ?? CoreIcons.radioOn,
+    () => iconChecked ?? icon ?? "icon-[mdi--radiobox-marked]",
     [icon, iconChecked],
   );
-  const iconOff = useMemo(() => icon ?? CoreIcons.radioOff, [icon]);
+  const iconOff = useMemo(() => icon ?? "icon-[mdi--radiobox-blank]", [icon]);
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {
@@ -104,7 +113,7 @@ export const Radio = ({
         disabled
           ? "opacity-50 cursor-not-allowed"
           : "hover:opacity-100 cursor-pointer",
-        "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-[:focus-visible]:ring-1",
+        "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-focus-visible:ring-1",
       )}
       style={{ width }}
     >
@@ -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 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";
 
@@ -73,6 +74,14 @@ 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,
@@ -84,8 +93,8 @@ export const RadioGroup = ({
   return (
     <FieldWrapper {...rest}>
       <div className={className}>
-        {Children.map(children, (child) =>
-          cloneElement(child as AnyObject, {
+        {cloneChildren(children, (child: AnyObject) =>
+          cloneElement(child, {
             name,
             onChange,
             width: optionWidth,

package/src/input/{Range.tsx → RangeSlider.tsx}

@@ -38,7 +38,7 @@ import { type InputProps } from "../types";
 export interface RangeProps
   extends Omit<
     InputProps<[number, number]>,
-    "placeholder" | "allowClear" | "children"
+    "placeholder" | "allowClear" | "children" | "defaultValue"
   > {
   /**
    * min value
@@ -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 }}
@@ -210,7 +218,7 @@ export const Range = ({
             <div
               key={key}
               className={classNames(
-                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1",
+                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-0 z-1",
                 vertical && "left-1/2 -ml-0.5",
               )}
               style={styles}
@@ -256,8 +264,8 @@ export const Range = ({
                         : "top-1/2 -translate-y-1/2",
                       !vertical &&
                         (key === 0
-                          ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0"
-                          : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0"),
+                          ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-0.5 rtl:before:-translate-x-0.5 before:end-0"
+                          : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0"),
                     )}
                     data-align={key === 0 ? "start" : "end"}
                     style={valueStyles}

package/src/input/Search.tsx

@@ -21,21 +21,20 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, CoreIcons, Icon, useDebounce } from "@react-fabric/core";
+import { Button, Icon, useDebounce } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import {
   Fragment,
   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,
@@ -62,18 +74,20 @@ export const Search = ({
   required,
   searching,
   placeholder,
+  defaultValue,
   autoFocus,
+  hideHandle,
   allowClear = true,
-  searchOnChange = true,
-  decorateEnd,
-  decorateStart,
+  searchOnChange = false,
+  onBlur,
+  onFocus,
   onSearch,
   onChange,
   onEnterPressed,
   ...rest
 }: SearchProps) => {
   const [actualValue, setActualValue] = useState("");
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
 
   const refValue = useRef("");
   const handleSearch = useDebounce(
@@ -82,10 +96,7 @@ export const Search = ({
     250,
   );
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(handleSearch),
-    [handleSearch],
-  );
+  const handleEnterPressed = useHandleEnter(handleSearch);
 
   useEffect(() => {
     setActualValue(deferred ?? "");
@@ -93,42 +104,40 @@ export const Search = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {
-      const value = e?.target.value;
+      const value = e?.target.value ?? defaultValue;
       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();
       }
     },
-    [onChange, searchOnChange, handleSearch],
+    [onChange, searchOnChange, handleSearch, defaultValue],
   );
 
   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" />
+            <Icon className="p-2" icon="icon-[svg-spinners--eclipse]" />
           )}
-          {!searching && (
+          {!searching && !hideHandle && (
             <Button
               tabIndex={-1}
               variant="link"
               aria-label="search"
               disabled={!actualValue}
-              icon={CoreIcons.search}
+              icon="icon-[mdi--magnify]"
               onClick={handleSearch}
             />
           )}
@@ -137,7 +146,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 +159,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

@@ -36,7 +36,10 @@ import { useRanger } from "../ranger";
 import { type InputProps } from "../types";
 
 export interface SliderProps
-  extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children"> {
+  extends Omit<
+    InputProps<number>,
+    "placeholder" | "allowClear" | "children" | "defaultValue"
+  > {
   /**
    * min value
    */
@@ -96,7 +99,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 +155,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 +203,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,8 +214,8 @@ export const Slider = ({
         <div
           ref={rangerInstance.trackElRef}
           className={classNames(
-            "flex-auto relative flex items-center",
-            vertical ? "my-2 w-8" : "mx-2 h-8",
+            "relative flex items-center",
+            vertical ? "my-2 w-8" : "flex-1 mx-2 h-8",
           )}
           style={{ height: vertical ? height : undefined }}
         >
@@ -214,7 +223,7 @@ export const Slider = ({
             <div
               key={key}
               className={classNames(
-                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1",
+                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-0 z-1",
                 vertical && "left-1/2 -ml-0.5",
               )}
               style={styles}
@@ -253,15 +262,15 @@ export const Slider = ({
                 {displayValue && (
                   <div
                     className={classNames(
-                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap",
+                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-5 whitespace-nowrap pointer-events-none",
                       "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45",
                       vertical
-                        ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2"
+                        ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0"
                         : "top-1/2 -translate-y-1/2",
                       !vertical &&
                         (percentage > 50
-                          ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0"
-                          : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0"),
+                          ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-0.5 rtl:before:-translate-x-0.5 before:end-0"
+                          : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0"),
                     )}
                     data-align={percentage > 50 ? "start" : "end"}
                     style={valueStyles}

package/src/input/Switch.tsx

@@ -87,6 +87,15 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
   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,
@@ -102,6 +111,8 @@ export const Switch = ({
   onLabelColor,
   offLabelColor,
   defaultColor,
+  // @ts-expect-error ignore
+  required,
   onChange,
   ...rest
 }: SwitchProps) => {
@@ -127,7 +138,7 @@ export const Switch = ({
         disabled
           ? "opacity-50 cursor-not-allowed"
           : "hover:opacity-100 cursor-pointer",
-        "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-[:focus-visible]:ring-1",
+        "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-focus-visible:ring-1",
       )}
       style={{ width }}
     >
@@ -136,7 +147,7 @@ export const Switch = ({
           actualValue && getBgClass(color ? `${color}-500` : "primary-500"),
           !actualValue &&
             (defaultColor ? getBgClass(`${defaultColor}-500`) : "bg-tint-200"),
-          "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",
+          "relative grid grid-cols-2 items-center h-[1.5em] min-w-[2.5em] cursor-pointer rounded-full p-[0.25em] transition-colors duration-200 ease-in-out",
         )}
         style={{
           backgroundColor: actualValue
@@ -165,11 +176,11 @@ export const Switch = ({
           aria-hidden="true"
           className={classNames(
             !disabled && "shadow-sm",
-            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",
+            actualValue ? "translate-x-full" : "translate-x-0",
+            "pointer-events-none inline-block h-[1em] start-[0.25em] absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out",
           )}
           style={{
-            width: "calc(50% - 0.25rem)",
+            width: "calc(50% - 0.25em)",
           }}
         />
         {(!!onLabel || !!offLabel) && (
@@ -195,7 +206,7 @@ export const Switch = ({
       </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>
   );