@react-fabric/form 1.0.0-beta.9 → 1.0.2

package/src/input/Search.tsx

@@ -21,23 +21,14 @@
  * 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 { type RefProp } from "@react-fabric/core/dist/types/types";
-import {
-  Fragment,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ChangeEvent,
-} from "react";
+import { Button, Icon, useControlledValue, useDebounce } from "@react-fabric/core";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import { Fragment, useCallback, useId, useRef } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
-import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import type { InputProps, WrapperProps } from "../types";
+import { getWrapperProps, useHandleEnter } from "../utils";
 
-export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
+export interface SearchProps extends InputProps, WrapperProps, RefProp<HTMLInputElement> {
   /**
    * is searching
    */
@@ -46,98 +37,92 @@ 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;
 }
 
-export const Search = ({
-  ref,
-  value,
-  name,
-  invalid,
-  readOnly,
-  disabled,
-  required,
-  searching,
-  placeholder,
-  autoFocus,
-  allowClear = true,
-  searchOnChange = true,
-  decorateEnd,
-  decorateStart,
-  onSearch,
-  onChange,
-  onEnterPressed,
-  ...rest
-}: SearchProps) => {
-  const [actualValue, setActualValue] = useState("");
-  const deferred = useDeferredValue(value);
+/**
+ * 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.
+ */
+export function Search(props: SearchProps) {
+  const {
+    value,
+    defaultValue,
+    onSearch,
+    onChange,
+    onBlur,
+    onFocus,
+    hideHandle,
+    disabled,
+    readOnly,
+    invalid,
+    searching,
+    searchOnChange,
+    placeholder,
+    name,
+    autoFocus,
+    allowClear,
+    ref,
+  } = props;
 
-  const refValue = useRef("");
-  const handleSearch = useDebounce(
-    () => onSearch?.(refValue.current),
-    [onSearch],
-    250,
-  );
+  const id = useId();
+  const { currentValue, updateValue } = useControlledValue(value, defaultValue);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(handleSearch),
-    [handleSearch],
-  );
+  const valueRef = useRef("");
+  const handleSearch = useDebounce(() => onSearch?.(valueRef.current), [onSearch], 250);
 
-  useEffect(() => {
-    setActualValue(deferred ?? "");
-  }, [deferred]);
+  const handleEnterPressed = useHandleEnter(handleSearch);
 
   const handleChange = useCallback(
-    (e?: ChangeEvent<HTMLInputElement>) => {
-      const value = e?.target.value;
-      refValue.current = value ?? "";
-      setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+    (e?: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e?.target.value ?? defaultValue;
+      valueRef.current = value ?? "";
+      updateValue(value);
+      onChange?.(value);
 
-      // 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],
+    [defaultValue, updateValue, onChange, searchOnChange, handleSearch],
   );
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      id={id}
+      showClear={allowClear && (currentValue ?? "") !== (defaultValue ?? "") && !disabled && !readOnly}
       onClear={handleChange}
-      allowClear={allowClear}
-      invalid={invalid}
-      readOnly={readOnly}
-      disabled={disabled}
-      required={required}
-      decorateStart={decorateStart}
-      decorateEnd={
+      hasStepper
+      {...getWrapperProps(props)}
+      actionButton={
         <Fragment>
-          {decorateEnd}
-          {searching && (
-            <Icon className="p-2" icon={CoreIcons.spinner} animate="spin" />
-          )}
-          {!searching && (
+          {searching && <Icon className="p-2" icon="icon-[svg-spinners--eclipse]" />}
+          {!searching && !hideHandle && (
             <Button
               tabIndex={-1}
               variant="link"
               aria-label="search"
-              disabled={!actualValue}
-              icon={CoreIcons.search}
+              disabled={!currentValue}
+              icon="icon-[mdi--magnify]"
               onClick={handleSearch}
             />
           )}
         </Fragment>
       }
-      {...rest}
     >
       <input
-        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        id={id}
+        className="appearance-none bg-transparent py-1 px-4 not-first:ps-2 not-last:pe-2 flex-1 border-none outline-none ring-0 peer"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -151,10 +136,12 @@ export const Search = ({
         ref={ref}
         autoComplete="off"
         {...{ autoFocus }}
-        value={actualValue}
+        value={currentValue ?? ""}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />
     </InputWrapper>
   );
-};
+}

package/src/input/Slider.tsx

@@ -21,22 +21,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Format } from "@react-fabric/utilities";
-import classNames from "classnames";
-import {
-  Fragment,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { Format, cn } from "@react-fabric/utilities";
+import { Fragment, useCallback, useDeferredValue, useEffect, useMemo, useState } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { useRanger } from "../ranger";
-import { type InputProps } from "../types";
+import type { InputProps, WrapperProps } from "../types";
+import { getWrapperProps } from "../utils";
 
 export interface SliderProps
-  extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children"> {
+  extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children" | "defaultValue">, WrapperProps {
   /**
    * min value
    */
@@ -72,11 +65,11 @@ export interface SliderProps
   /**
    * custom min label
    */
-  minLabel?: string;
+  minLabel?: string | React.ReactElement;
   /**
    * custom max label
    */
-  maxLabel?: string;
+  maxLabel?: string | React.ReactElement;
   /**
    * step ranges
    */
@@ -96,36 +89,32 @@ 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.
  */
-export const Slider = ({
-  error,
-  name,
-  value,
-  step = 1,
-  min = 0,
-  max = 100,
-  height = 192,
-  color,
-  vertical,
-  showLabels,
-  showValue,
-  minLabel,
-  maxLabel,
-  ranges,
-  useInfinity,
-  format,
-  invalid,
-  autoFocus,
-  disabled,
-  readOnly,
-  onBlur,
-  onChange,
-  onEnterPressed,
-  onFocus,
-  onSlide,
-  ...rest
-}: SliderProps) => {
+export function Slider(props: SliderProps) {
+  const {
+    value,
+    showLabels,
+    showValue,
+    onChange,
+    onSlide,
+    ranges,
+    useInfinity,
+    invalid,
+    step = 1,
+    min = 0,
+    max = 100,
+    height = 192,
+    vertical,
+    minLabel,
+    maxLabel,
+    format,
+    color,
+  } = props;
+
   const [actualValue, setActualValue] = useState<number>(0);
   const [displayValue, setDisplayValue] = useState(false);
   const deferred = useDeferredValue(value);
@@ -134,11 +123,12 @@ export const Slider = ({
   const maxValue = useMemo(() => ranges?.slice(-1)[0] ?? max, [max, ranges]);
 
   useEffect(() => {
-    setActualValue(
-      useInfinity && deferred === Infinity ? max : deferred ?? min,
-    );
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    setActualValue(useInfinity && deferred === Infinity ? max : (deferred ?? min));
   }, [deferred, min, max, useInfinity]);
+
   useEffect(() => {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setDisplayValue(!!showValue);
   }, [showValue]);
 
@@ -146,7 +136,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],
   );
@@ -183,18 +173,10 @@ export const Slider = ({
   });
 
   return (
-    <InputWrapper
-      {...rest}
-      noOutline
-      error={error}
-      invalid={invalid}
-      isDisabled={disabled}
-      isReadOnly={readOnly}
-      canClear={!!actualValue}
-    >
+    <InputWrapper {...getWrapperProps(props)} borderless focusRing>
       <div
-        className={classNames(
-          "flex-auto order-3 flex items-center select-none relative z-0",
+        className={cn(
+          "flex-1 order-3 flex items-center select-none relative z-0",
           vertical && "flex-col w-8",
           invalid ? "text-danger-500" : "text-primary-600",
         )}
@@ -204,17 +186,14 @@ export const Slider = ({
         {showLabels && (vertical ? maxDisplay : minDisplay)}
         <div
           ref={rangerInstance.trackElRef}
-          className={classNames(
-            "flex-auto relative flex items-center",
-            vertical ? "my-2 w-8" : "mx-2 h-8",
-          )}
+          className={cn("relative flex items-center", vertical ? "my-2 w-8" : "flex-1 mx-2 h-8")}
           style={{ height: vertical ? height : undefined }}
         >
-          {rangerInstance.ticks.map(({ value, key, styles }) => (
+          {rangerInstance.ticks.map(({ key, styles }) => (
             <div
               key={key}
-              className={classNames(
-                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1",
+              className={cn(
+                "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}
@@ -223,60 +202,52 @@ export const Slider = ({
           {rangerInstance.segments.map(({ key, styles, active }) => (
             <div
               key={key}
-              className={classNames(
+              className={cn(
                 "absolute",
-                active
-                  ? "bg-current z-1 opacity-90"
-                  : "bg-invert opacity-5 z-0",
-                vertical
-                  ? "-bottom-1 left-1/2 -translate-x-1/2"
-                  : "top-1/2 -translate-y-1/2",
+                active ? "bg-current z-1 opacity-90" : "bg-invert opacity-5 z-0",
+                vertical ? "-bottom-1 left-1/2 -translate-x-1/2" : "top-1/2 -translate-y-1/2",
                 !vertical && (active ? "h-1" : "h-0.5"),
                 vertical && (active ? "w-1" : "w-0.5"),
               )}
               style={styles}
             />
           ))}
-          {rangerInstance.handles.map(
-            ({ key, value, props, styles, percentage, valueStyles }) => (
-              <Fragment key={key}>
-                <button
-                  type="button"
-                  className={classNames(
-                    "bg-current cursor-pointer appearance-none h-3 w-3 rounded-full z-3 absolute",
-                    "focus:ring-2 focus:ring-offset-2",
-                    vertical && "left-1/2 -ml-1.5",
-                  )}
-                  {...props}
-                  style={styles}
-                />
-                {displayValue && (
-                  <div
-                    className={classNames(
-                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap",
-                      "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"
-                        : "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"),
-                    )}
-                    data-align={percentage > 50 ? "start" : "end"}
-                    style={valueStyles}
-                  >
-                    {value === Infinity || (useInfinity && value === max)
-                      ? maxLabel ?? "∞"
-                      : Format.number(value, format)}
-                  </div>
+          {rangerInstance.handles.map(({ key, value, props, styles, percentage, valueStyles }) => (
+            <Fragment key={key}>
+              <button
+                type="button"
+                className={cn(
+                  "bg-current cursor-pointer appearance-none h-3 w-3 rounded-full z-3 absolute",
+                  "focus:ring-2 focus:ring-offset-2",
+                  vertical && "left-1/2 -ml-1.5",
                 )}
-              </Fragment>
-            ),
-          )}
+                {...props}
+                style={styles}
+              />
+              {displayValue && (
+                <div
+                  className={cn(
+                    "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
+                      ? "inset-e-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:inset-s-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.5 rtl:before:-translate-x-0.5 before:inset-e-0"
+                        : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:inset-s-0"),
+                  )}
+                  data-align={percentage > 50 ? "start" : "end"}
+                  style={valueStyles}
+                >
+                  {value === Infinity || (useInfinity && value === max) ? (maxLabel ?? "∞") : Format.number(value, format)}
+                </div>
+              )}
+            </Fragment>
+          ))}
         </div>
         {showLabels && (vertical ? minDisplay : maxDisplay)}
       </div>
     </InputWrapper>
   );
-};
+}

package/src/input/Switch.tsx

@@ -21,19 +21,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  type ColorType,
-  type RefProp,
-} from "@react-fabric/core/dist/types/types";
-import classNames from "classnames";
-import {
-  Fragment,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useState,
-  type ChangeEvent,
-} from "react";
+import { useControlledValue } from "@react-fabric/core";
+import type { ColorUnion, RefProp } from "@react-fabric/core/dist/types/types";
+import { cn } from "@react-fabric/utilities";
+import { Fragment, useCallback } from "react";
 import { ErrorIcon } from "../internal/ErrorIcon";
 import { getBgClass, getColor, getColorClass } from "../utils";
 
@@ -41,7 +32,7 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
   /**
    * Switch label
    */
-  label?: JSX.Element | string;
+  label?: React.ReactElement | string;
   /**
    * checked
    */
@@ -72,22 +63,28 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
   /**
    * cutom Switch icon
    */
-  color?: string | ColorType;
+  color?: ColorUnion;
   /**
    * cutom Switch icon
    */
-  defaultColor?: string | ColorType;
+  defaultColor?: ColorUnion;
 
   name?: string;
 
   onLabel?: string;
-  onLabelColor?: string | ColorType;
+  onLabelColor?: ColorUnion;
 
   offLabel?: string;
-  offLabelColor?: string | ColorType;
+  offLabelColor?: ColorUnion;
 }
 
-export const Switch = ({
+/**
+ * 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.
+ */
+export function Switch({
   ref,
   label,
   checked,
@@ -104,72 +101,63 @@ export const Switch = ({
   defaultColor,
   onChange,
   ...rest
-}: SwitchProps) => {
-  const [actualValue, setActualValue] = useState(false);
-  const deferred = useDeferredValue(!!checked);
-
-  useEffect(() => {
-    setActualValue(deferred);
-  }, [deferred]);
+}: SwitchProps) {
+  const { currentValue, updateValue } = useControlledValue(!!checked, false);
 
   const handleChange = useCallback(
-    (e?: ChangeEvent<HTMLInputElement>) => {
-      setActualValue(e?.target.checked ?? false);
+    (e?: React.ChangeEvent<HTMLInputElement>) => {
+      updateValue(e?.target.checked ?? false);
       onChange?.(e?.target.checked ?? false);
     },
-    [onChange],
+    [onChange, updateValue],
   );
 
   return (
     <label
-      className={classNames(
+      className={cn(
         invalid ? "ring-danger-500" : "ring-primary-500",
-        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",
+        disabled ? "opacity-50 cursor-not-allowed" : "opacity-85 hover:opacity-100 cursor-pointer",
+        "inline-flex gap-1 py-1 items-center relative rounded ring-offset-2 has-focus-visible:ring-1",
       )}
       style={{ width }}
     >
       <div
-        className={classNames(
-          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",
+        className={cn(
+          currentValue && getBgClass(color ? `${color}-500` : "primary-500"),
+          !currentValue && (defaultColor ? getBgClass(`${defaultColor}-500`) : "bg-tint-200"),
+          "relative grid grid-cols-2 items-center h-[1.5em] min-w-[2.5em] rounded-full p-[0.25em] transition-colors duration-200 ease-in-out",
         )}
         style={{
-          backgroundColor: actualValue
-            ? getColor(color)
-            : getColor(defaultColor),
+          backgroundColor: currentValue ? getColor(color) : getColor(defaultColor),
         }}
       >
         <input
-          className={classNames(
-            "appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0",
+          className={cn(
+            "appearance-none absolute opacity-0 inset-0 bg-transparent border-none cursor-[inherit] outline-none ring-0",
           )}
           aria-invalid={invalid}
           aria-disabled={disabled}
           disabled={disabled}
           aria-errormessage={error}
           type="checkbox"
+          name={name}
           ref={ref}
           size={1}
           tabIndex={0}
           autoComplete="off"
-          checked={actualValue}
+          checked={!!currentValue}
           onChange={handleChange}
           {...rest}
         />
         <span
           aria-hidden="true"
-          className={classNames(
+          className={cn(
             !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",
+            currentValue ? "translate-x-full" : "translate-x-0",
+            "pointer-events-none inline-block h-[1em] inset-s-[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) && (
@@ -194,9 +182,7 @@ export const Switch = ({
         )}
       </div>
       <ErrorIcon invalid={invalid} error={error} />
-      {label && (
-        <span className="flex-initial leading-5 truncate">{label}</span>
-      )}
+      {label && <span className="flex-initial leading-tight truncate">{label}</span>}
     </label>
   );
-};
+}