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

package/src/input/Textarea.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 { type RefProp } from "@react-fabric/core/dist/types/types";
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useRef,
-  useState,
-  type ChangeEvent,
-} from "react";
+import { useControlledValue } from "@react-fabric/core";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import type { KeyboardEventHandler } from "react";
+import { useCallback, useEffect, useId, useRef, useState } 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 TextareaProps
-  extends InputProps,
-    RefProp<HTMLTextAreaElement> {
+export interface TextareaProps extends InputProps, WrapperProps, RefProp<HTMLTextAreaElement> {
   /**
    * textarae rows
    */
@@ -49,66 +42,84 @@ export interface TextareaProps
    * increment rows on value change
    */
   variableRows?: boolean;
+  /**
+   * expandable textarea
+   */
+  expandable?: boolean;
 }
 
-export const Textarea = ({
-  ref,
-  value,
-  name,
-  invalid,
-  readOnly,
-  disabled,
-  required,
-  placeholder,
-  autoFocus,
-  rows = 5,
-  maxRows = 12,
-  variableRows,
-  onChange,
-  onEnterPressed,
-  ...rest
-}: TextareaProps) => {
-  const [actualValue, setActualValue] = useState("");
-  const [fixedRows, setFixedRows] = useState(rows);
-  const deferred = useDeferredValue(value);
-  const wrapperRef = useRef(null);
+/**
+ * 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.
+ */
+export function Textarea(props: TextareaProps) {
+  const {
+    value,
+    defaultValue,
+    onEnterPressed,
+    onChange,
+    onBlur,
+    onFocus,
+    disabled,
+    readOnly,
+    invalid,
+    rows = 5,
+    maxRows = 12,
+    placeholder,
+    name,
+    autoFocus,
+    expandable,
+    variableRows,
+    allowClear,
+    ref,
+  } = props;
+
+  const id = useId();
+  const { currentValue, updateValue } = useControlledValue(value, defaultValue);
 
-  useEffect(() => {
-    setActualValue(deferred ?? "");
-  }, [deferred]);
+  const [fixedRows, setFixedRows] = useState(() => rows);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   const handleChange = useCallback(
-    (e?: ChangeEvent<HTMLTextAreaElement>) => {
-      const value = e?.target.value;
-      setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+    (e?: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const value = e?.target.value ?? defaultValue;
+      updateValue(value);
+      onChange?.(value);
     },
-    [onChange],
+    [defaultValue, updateValue, onChange],
   );
 
   useEffect(() => {
     if (variableRows) {
-      const lines = actualValue?.split("\n").length ?? 1;
+      const lines = currentValue?.split("\n").length ?? 1;
+      // eslint-disable-next-line @eslint-react/set-state-in-effect
       setFixedRows(Math.max(rows, Math.min(maxRows, lines)));
-    } else {
-      setFixedRows(rows);
     }
-  }, [actualValue, variableRows, rows, maxRows]);
+  }, [currentValue, variableRows, rows, maxRows]);
+
+  const handleEnterPressed = useHandleEnter<HTMLTextAreaElement>(
+    onEnterPressed as unknown as KeyboardEventHandler<HTMLTextAreaElement>,
+    {
+      preventDefault: !!onEnterPressed,
+    },
+  );
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
-      onClear={handleChange}
-      invalid={invalid}
-      readOnly={readOnly}
-      disabled={disabled}
-      required={required}
-      wrapperRef={wrapperRef}
+      id={id}
       textarea
-      {...rest}
+      textareaExpandable={expandable}
+      showClear={allowClear && (currentValue ?? "") !== (defaultValue ?? "") && !disabled && !readOnly}
+      onClear={handleChange}
+      ref={wrapperRef}
+      {...getWrapperProps(props)}
     >
       <textarea
-        className="appearance-none self-stretch bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 min-h-20 resize-none"
+        id={id}
+        className="appearance-none self-stretch bg-transparent py-1 px-4 not-first:ps-2 not-last:pe-2 flex-1 border-none outline-none ring-0 min-h-12 resize-none"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -121,10 +132,12 @@ export const Textarea = ({
         ref={ref}
         autoComplete="off"
         {...{ autoFocus }}
-        value={actualValue}
+        value={currentValue ?? ""}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
-        onKeyDown={handleEnter(onEnterPressed)}
+        onKeyDown={handleEnterPressed}
       />
     </InputWrapper>
   );
-};
+}

package/src/internal/ErrorIcon.tsx

@@ -21,41 +21,42 @@
  * 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, Tooltip } from "@react-fabric/core";
-import { isString } from "@react-fabric/utilities";
+import { Icon, Tooltip } from "@react-fabric/core";
+import { isObject, isString } from "@react-fabric/utilities";
 import { useTranslation } from "react-i18next";
 
-export const ErrorIcon = ({ error = "", invalid }: KeyValue) => {
+interface ErrorObject {
+  key: string;
+  values: Record<string, string>;
+}
+
+export function ErrorIcon({ error = "", invalid }: { error?: string | KeyValue; invalid?: boolean }) {
   const { t } = useTranslation();
 
   return (
-    invalid && (
+    invalid &&
+    error && (
       <Tooltip
         content={
-          isString(error)
-            ? `${error}`
-            : (t(
-                error?.key,
-                error.values
+          isObject<ErrorObject>(error)
+            ? t(
+                error.key,
+                isObject(error.values)
                   ? {
-                      ...error?.values,
-                      label: t(
-                        error.values?.label ?? "form:badkey",
-                        error.values?.path,
-                      ),
+                      ...error.values,
+                      label: t(error.values.label ?? "form:badkey", error.values.path),
                     }
                   : {},
-              ) as string)
+              )
+            : isString(error)
+              ? error
+              : ""
         }
         placement="bottom"
         color="danger"
       >
-        <Icon
-          className="flex-content first:ms-2 self-center"
-          color="danger"
-          icon={CoreIcons.alert}
-        />
+        <Icon className="flex-content first:ms-2 self-center" color="danger" icon="icon-[mdi--alert-circle-outline]" />
       </Tooltip>
     )
   );
-};
+}

package/src/internal/FieldWrapper.tsx

@@ -21,44 +21,56 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import classNames from "classnames";
-import classes from "./Field.module.css";
+import type { CssProp } from "@react-fabric/core/dist/types/types";
+import { cn } from "@react-fabric/utilities";
+import type { ReactNode } from "react";
+import type { WrapperProps } from "../types";
+import { ErrorIcon } from "./ErrorIcon";
 
-export const FieldWrapper = ({
+export interface FieldProps extends CssProp, WrapperProps {
+  id?: string;
+  children: ReactNode;
+  showError?: boolean;
+  listing?: ReactNode;
+}
+
+export function FieldWrapper({
+  id,
+  name,
   label,
   appendLabel,
   width,
   labelWidth = 192,
   inline,
   info,
-  disabled,
   required,
   children,
   listing,
-  className,
-  "data-inner": isInner,
-}: KeyValue) => {
+  invalid,
+  disabled,
+  error,
+  showError,
+}: FieldProps) {
   return (
     <div
-      className={classNames(
-        classes.fieldWrapper,
-        className,
-        inline ? "flex flex-nowrap gap-1" : "block",
+      className={cn(
+        "fabric-fieldWrapper peer group relative",
+        width ? "flex-content" : "flex-1",
+        inline ? "flex flex-nowrap" : "flex flex-col",
       )}
       data-ref="fieldWrapper"
+      data-testid={`field_${name}`}
       style={{ width, flexBasis: width }}
     >
-      {!isInner && (
+      {label && (
         <div
-          className="flex flex-nowrap flex-content gap-1 py-0.5 px-2"
+          className="fabric-fieldLabel flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2"
           style={{ width: inline ? labelWidth : undefined }}
         >
           <label
             role="none"
-            className={classNames(
-              "flex-initial truncate text-sm",
-              disabled && "text-muted",
-            )}
+            htmlFor={id}
+            className={cn("flex-initial truncate text-sm", disabled && "text-muted")}
             onClick={(e) =>
               e.currentTarget
                 .closest<HTMLElement>('[data-ref="fieldWrapper"]')
@@ -68,11 +80,9 @@ export const FieldWrapper = ({
           >
             {label}
           </label>
-          {required && (
-            <span className="text-danger-500 select-none flex-content text-[10px]">
-              ✽
-            </span>
-          )}
+          {required && <span className="text-danger-500 select-none self-center flex-content text-[10px]">✽</span>}
+          {showError && <ErrorIcon invalid={invalid} error={error} />}
+          <div className="flex-1" />
           {appendLabel && <span className="flex-content">{appendLabel}</span>}
         </div>
       )}
@@ -81,4 +91,4 @@ export const FieldWrapper = ({
       {info && <div className="text-sm text-muted flex-content">{info}</div>}
     </div>
   );
-};
+}

package/src/internal/InputWrapper.tsx

@@ -21,167 +21,156 @@
  * 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";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type MouseEvent,
-} from "react";
-import { Fragment } from "react/jsx-runtime";
+import { Icon } from "@react-fabric/core";
+import type { CssProp } from "@react-fabric/core/dist/types/types";
+import { cn, isString, mergeRefs } from "@react-fabric/utilities";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState, type MouseEvent } from "react";
+import type { WrapperProps } from "../types";
 import { ErrorIcon } from "./ErrorIcon";
-import classes from "./Field.module.css";
 import { FieldWrapper } from "./FieldWrapper";
 
-export const InputWrapper = ({
-  invalid,
-  error,
-  allowClear,
-  showClear,
-  decorateStart,
-  decorateEnd,
-  children,
-  onClear,
-  noOutline,
-  noBorder,
-  textarea = false,
-  "data-inner": isInner,
-  "data-open": isOpen,
-  // expand autocomplete
-  floatingExpand,
-  wrapperRef,
-  width,
-  ...rest
-}: KeyValue) => {
-  const elRef = useRef<HTMLDivElement>(null);
-  const [isExpanded, setExpanded] = useState(false);
+export interface InputWrapperProps extends CssProp, WrapperProps {
+  id?: string;
+  children: ReactNode;
+  showClear?: boolean;
+  onClear?: () => void;
+  textarea?: boolean;
+  hasStepper?: boolean;
+  actionButton?: ReactNode;
+  textareaExpandable?: boolean;
+  isOpen?: boolean;
+  focusRing?: boolean;
+  floatingExpand?: boolean;
+  listing?: ReactNode;
+  ref?: React.Ref<HTMLDivElement | null>;
+}
 
-  const Wrapper = useMemo(
-    () => (isInner || !rest.label ? Fragment : FieldWrapper),
-    [isInner, rest.label],
-  );
-  const wrapperProps = useMemo(
-    () => (isInner || !rest.label ? {} : { ...rest, width }),
-    [isInner, rest, width],
-  );
+export function InputWrapper(props: InputWrapperProps) {
+  const {
+    invalid,
+    error,
+    showClear,
+    decorateStart,
+    decorateEnd,
+    decorateEndShowWhenEmpty,
+    decorateEndHideWhenEmpty,
+    children,
+    isOpen,
+    className,
+    focusRing,
+    onClear,
+    borderless,
+    hasStepper,
+    actionButton,
+    textarea = false,
+    textareaExpandable = false,
+    // expand autocomplete
+    floatingExpand,
+    ref,
+  } = props;
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const handleClear = useCallback(
-    (e: MouseEvent<HTMLDivElement>) => {
-      e.currentTarget.parentElement
-        ?.querySelector<HTMLElement>("input,textarea,button")
-        ?.focus();
+    (e: MouseEvent<HTMLButtonElement>) => {
+      const parent = e.currentTarget.parentElement?.querySelector("& > :not(.fabric-decorate)");
+      const el = (parent?.querySelector<HTMLElement>("input,textarea,button") ?? parent) as HTMLElement;
+      el?.focus();
       onClear?.();
     },
     [onClear],
   );
 
-  const doFocus = useCallback(
-    (e: MouseEvent<HTMLDivElement>) => {
-      e.currentTarget.parentElement
-        ?.querySelector<HTMLElement>("input,textarea,button")
-        ?.focus();
-    },
-    [onClear],
-  );
+  const doFocus = useCallback((e: MouseEvent<HTMLDivElement>) => {
+    const parent = e.currentTarget.parentElement?.querySelector("& > :not(.fabric-decorate)");
+    const el = (parent?.querySelector<HTMLElement>("input,textarea,button") ?? parent) as HTMLElement;
+    el?.focus();
+  }, []);
 
   useEffect(() => {
-    isExpanded &&
-      setTimeout(
-        () => wrapperRef?.current?.querySelector("textarea")?.focus(),
-        50,
-      );
-  }, [isExpanded]);
-
-  const el = (
-    <div
-      role="none"
-      ref={wrapperRef}
-      className={classNames(
-        classes.inputWrapper,
-        invalid && classes.invalidWrapper,
-        !noOutline &&
-          !noBorder &&
-          "bg-[var(--fabric-input)] outline overflow-hidden",
-        "flex flex-nowrap items-center",
-        textarea ? "rounded-capped group" : "rounded",
-        isExpanded
-          ? "fixed inset-4 z-[99]"
-          : floatingExpand
-            ? "absolute inset-x-0"
-            : "relative",
-        !noOutline &&
-          "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto",
-      )}
-      onKeyDown={(e) => e.key === "Escape" && setExpanded(false)}
-    >
-      {decorateStart && (
-        <div
-          onClickCapture={doFocus}
-          className={classNames(
-            classes.decorate,
-            "text-muted leading-none flex-content",
-            isString(decorateStart) && "px-1",
-          )}
-        >
-          {decorateStart}
-        </div>
-      )}
-      <ErrorIcon invalid={invalid} error={error} />
-      {children}
-      {allowClear && showClear && (
-        <Icon
-          icon={CoreIcons.close}
-          onClick={handleClear}
-          className={classNames(
-            "text-tint-500 hover:text-tint-700 p-1 z-1 flex-content",
-            classes.inputClear,
-            textarea && "self-start mt-1 me-1",
-          )}
-        />
-      )}
-      {decorateEnd && (
-        <div
-          onClickCapture={doFocus}
-          className={classNames(
-            classes.decorate,
-            "text-muted leading-none flex-content",
-            isString(decorateEnd) && "px-1",
-          )}
-        >
-          {decorateEnd}
-        </div>
-      )}
-      {textarea && (
-        <Icon
-          onClick={() => setExpanded(!isExpanded)}
-          icon={isExpanded ? CoreIcons.arrowCollapse : CoreIcons.arrowExpand}
-          className="hidden group-hover:block absolute top-0 end-0 bg-base hover:bg-tint-200 p-1 opacity-65 rounded-capped"
-        />
-      )}
-    </div>
-  );
+    if (isExpanded) {
+      const tmr = setTimeout(() => wrapperRef?.current?.querySelector("textarea")?.focus(), 50);
+      return () => {
+        clearTimeout(tmr);
+      };
+    }
+  }, [isExpanded, wrapperRef]);
 
   return (
-    <Wrapper {...wrapperProps}>
+    <FieldWrapper {...props}>
       <div
-        ref={elRef}
-        className="flex-1 relative min-h-8"
-        style={{ width, flexBasis: width }}
+        role="none"
+        ref={mergeRefs(ref, wrapperRef)}
+        className={cn(
+          "fabric-inputWrapper",
+          invalid && "fabric-invalidWrapper",
+          !borderless && "outline",
+          textarea ? "rounded-capped" : "rounded",
+          className,
+          "flex flex-1 flex-nowrap items-center bg-(--fabric-input)",
+          isExpanded ? "fixed inset-4 z-99" : floatingExpand ? "absolute inset-x-0" : "relative",
+          focusRing
+            ? "focus-within:ring ring-primary-500"
+            : "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto",
+          isOpen && "outline-primary-500",
+        )}
+        onKeyDown={(e) => e.key === "Escape" && isExpanded && (setIsExpanded(false), e.stopPropagation())}
       >
-        {!isExpanded && el}
-        {isExpanded && (
-          <FloatingPortal
-            root={elRef.current?.closest<HTMLElement>(".theme-base")}
+        {decorateStart && (
+          <div
+            onClickCapture={doFocus}
+            className={cn("fabric-decorate", "text-muted leading-none flex-content", isString(decorateStart) && "px-1")}
+          >
+            {decorateStart}
+          </div>
+        )}
+        <ErrorIcon invalid={invalid} error={error} />
+        {children}
+        {showClear && (
+          <button
+            type="button"
+            className={cn("size-fit leading-0 cursor-pointer", hasStepper && "relative -ms-12")}
+            onClick={handleClear}
+          >
+            <Icon
+              icon="icon-[mdi--close]"
+              className={cn("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", "fabric-inputClear")}
+            />
+          </button>
+        )}
+        {decorateEnd && (
+          <div
+            onClickCapture={doFocus}
+            className={cn(
+              "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>
+        )}
+        {actionButton && (
+          <div onClickCapture={doFocus} className={cn("fabric-decorate", "text-muted leading-none flex-content")}>
+            {actionButton}
+          </div>
+        )}
+        {textareaExpandable && (
+          <button
+            type="button"
+            className="size-fit cursor-pointer leading-0 absolute top-0 inset-e-0"
+            onClick={() => setIsExpanded(!isExpanded)}
           >
-            {el}
-          </FloatingPortal>
+            <Icon
+              icon={isExpanded ? "icon-[mdi--arrow-collapse]" : "icon-[mdi--arrow-expand]"}
+              className="hidden group-hover:block bg-default hover:bg-tint-200 p-1 opacity-65 rounded-capped"
+            />
+          </button>
         )}
       </div>
-    </Wrapper>
+    </FieldWrapper>
   );
-};
+}