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

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,
@@ -60,17 +74,21 @@ export const Textarea = ({
   disabled,
   required,
   placeholder,
+  defaultValue,
   autoFocus,
   rows = 5,
   maxRows = 12,
   variableRows,
+  expandable,
+  onBlur,
+  onFocus,
   onChange,
   onEnterPressed,
   ...rest
 }: TextareaProps) => {
   const [actualValue, setActualValue] = useState("");
   const [fixedRows, setFixedRows] = useState(rows);
-  const deferred = useDeferredValue(value);
+  const deferred = useDeferredValue(value ?? defaultValue);
   const wrapperRef = useRef(null);
 
   useEffect(() => {
@@ -79,11 +97,11 @@ export const Textarea = ({
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLTextAreaElement>) => {
-      const value = e?.target.value;
+      const value = e?.target.value ?? defaultValue;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
-    [onChange],
+    [onChange, defaultValue],
   );
 
   useEffect(() => {
@@ -95,20 +113,25 @@ 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}
     >
       <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"
+        className="appearance-none self-stretch bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 min-h-12 resize-none"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -120,10 +143,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 as any}
       />
     </InputWrapper>
   );

package/src/internal/ErrorIcon.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, Tooltip } from "@react-fabric/core";
+import { Icon, Tooltip } from "@react-fabric/core";
 import { isString } from "@react-fabric/utilities";
 import { useTranslation } from "react-i18next";
 
@@ -48,12 +48,12 @@ export const ErrorIcon = ({ error = "", invalid }: KeyValue) => {
               ) as string)
         }
         placement="bottom"
-        color="danger"
+        color="danger-200"
       >
         <Icon
           className="flex-content first:ms-2 self-center"
           color="danger"
-          icon={CoreIcons.alert}
+          icon="icon-[mdi--alert-circle-outline]"
         />
       </Tooltip>
     )

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,8 +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 { FloatingPortal } from "@floating-ui/react";
-import { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
@@ -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
@@ -72,9 +74,12 @@ export const InputWrapper = ({
 
   const handleClear = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
-      e.currentTarget.parentElement
-        ?.querySelector<HTMLElement>("input,textarea,button")
-        ?.focus();
+      const parent = e.currentTarget.parentElement?.querySelector(
+        "& > :not(.fabric-decorate)",
+      );
+      const el = (parent?.querySelector<HTMLElement>("input,textarea,button") ??
+        parent) as HTMLElement;
+      el?.focus();
       onClear?.();
     },
     [onClear],
@@ -82,9 +87,12 @@ export const InputWrapper = ({
 
   const doFocus = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
-      e.currentTarget.parentElement
-        ?.querySelector<HTMLElement>("input,textarea,button")
-        ?.focus();
+      const parent = e.currentTarget.parentElement?.querySelector(
+        "& > :not(.fabric-decorate)",
+      );
+      const el = (parent?.querySelector<HTMLElement>("input,textarea,button") ??
+        parent) as HTMLElement;
+      el?.focus();
     },
     [onClear],
   );
@@ -102,28 +110,32 @@ 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]"
+          ? "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)}
+      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",
           )}
@@ -135,11 +147,11 @@ export const InputWrapper = ({
       {children}
       {allowClear && showClear && (
         <Icon
-          icon={CoreIcons.close}
+          icon="icon-[mdi--close]"
           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,18 +160,36 @@ 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}
+          icon={
+            isExpanded
+              ? "icon-[mdi--arrow-collapse]"
+              : "icon-[mdi--arrow-expand]"
+          }
           className="hidden group-hover:block absolute top-0 end-0 bg-base hover:bg-tint-200 p-1 opacity-65 rounded-capped"
         />
       )}
@@ -170,17 +200,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-content" : "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

@@ -34,7 +34,7 @@ import {
   useListNavigation,
   useTypeahead,
 } from "@floating-ui/react";
-import { Chip, CoreIcons, Icon } from "@react-fabric/core";
+import { Chip, Icon } from "@react-fabric/core";
 import { isArray, isEmpty } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useCallback, useId, useLayoutEffect, useMemo, useRef } from "react";
@@ -61,6 +61,13 @@ type AutoCompleteProps = Omit<
   onInput?: (query: string) => void;
 };
 
+/**
+ * AutoComplete component for selecting or entering values with history suggestions.
+ * It supports multiple selections, history suggestions, and custom styling.
+ *
+ * @param {AutoCompleteProps} props - The properties for the AutoComplete component.
+ * @returns {JSX.Element} The rendered AutoComplete component.
+ */
 export const AutoComplete = ({
   ref,
   name,
@@ -80,6 +87,7 @@ export const AutoComplete = ({
   onInput,
   onFocus,
   onBlur,
+  onQuery,
   onEnterPressed,
   ...rest
 }: AutoCompleteProps) => {
@@ -104,6 +112,7 @@ export const AutoComplete = ({
     multiple,
     onChange,
     onSelect,
+    onQuery,
   });
 
   const dropdownKey = useId();
@@ -181,7 +190,7 @@ export const AutoComplete = ({
             return false;
           } else {
             onEnterPressed?.(evt);
-            submitRef.current?.click();
+            setOpen(false);
           }
         } else if (evt.key === "Backspace") {
           !state.query && multiple && handleRemove();
@@ -267,7 +276,7 @@ export const AutoComplete = ({
       required={required}
       error={error}
       wrapperRef={refs.setReference}
-      className={!multiple && expandOnEdit && state.open ? "!z-[99]" : ""}
+      className={!multiple && expandOnEdit && state.open ? "z-99!" : ""}
       floatingExpand={!multiple && expandOnEdit && state.open}
       {...rest}
     >
@@ -291,7 +300,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",
@@ -312,11 +323,10 @@ export const AutoComplete = ({
       </div>
       {state.loading && (
         <Icon
-          animate="spin"
           className={classNames(
             "flex-content p-2 z-0 order-9 text-muted pointer-events-none",
           )}
-          icon={CoreIcons.spinner}
+          icon="icon-[svg-spinners--eclipse]"
         />
       )}
       {state.open && !state.loading && (
@@ -328,7 +338,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

@@ -21,8 +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, ButtonGroup, CoreIcons } from "@react-fabric/core";
-import { type RefProp } from "@react-fabric/core/dist/types/types";
+import {
+  DndContext,
+  DragOverlay,
+  useDraggable,
+  useDroppable,
+} from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import { Button, ButtonGroup } from "@react-fabric/core";
+import {
+  type NestedKeys,
+  type ReactElement,
+  type RefProp,
+} from "@react-fabric/core/dist/types/types";
+import { mergeRefs } from "@react-fabric/utilities";
 import {
   useCallback,
   useDeferredValue,
@@ -32,14 +44,6 @@ import {
 } from "react";
 import { Field, type FieldProps } from "../input/Field";
 import { List } from "./List";
-import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
-import {
-  DndContext,
-  DragOverlay,
-  useDraggable,
-  useDroppable,
-} from "@dnd-kit/core";
-import { mergeRefs } from "@react-fabric/utilities";
 
 export interface DualListProps<T>
   extends Omit<FieldProps, "children">,
@@ -59,29 +63,45 @@ export interface DualListProps<T>
   /**
    * group by property name
    */
-  groupProperty?: keyof T;
+  groupProperty?: NestedKeys<T>;
   /**
    * label property name
    */
-  labelProperty?: keyof T;
+  labelProperty?: NestedKeys<T>;
   /**
    * value property name
    */
-  valueProperty?: keyof T;
+  valueProperty?: NestedKeys<T>;
+  /**
+   * empty list display
+   */
+  emptyDisplay?: ReactElement;
   /**
    * item renderer
    */
-  renderer?: (option: T) => React.ReactNode;
+  renderer?: (option: T) => ReactElement;
   /**
    * change handler
    */
   onChange?: (value?: string[]) => void;
 }
 
+/**
+ * DualList component allows users to select items from two lists.
+ * It displays two lists side by side, one for unselected items and one for selected items.
+ * Users can move items between the lists using buttons or drag-and-drop functionality.
+ * It supports multiple selections and provides options for grouping, labeling, and rendering items.
+ * It also includes features for handling empty states and custom rendering of items.
+ * This component is useful for scenarios where users need to manage selections from a larger set of options, such as in forms or settings.
+ *
+ * @param {DualListProps<T>} props - The properties for the DualList component.
+ * @returns {JSX.Element} The rendered DualList component.
+ */
 export const DualList = <T extends AnyObject = string>({
   ref,
   value,
   options,
+  emptyDisplay,
   groupProperty,
   height = "18rem",
   labelProperty = "label" as AnyObject,
@@ -210,6 +230,7 @@ export const DualList = <T extends AnyObject = string>({
             error={error}
             height={height}
             options={leftOptions}
+            emptyDisplay={emptyDisplay}
             groupProperty={groupProperty}
             labelProperty={labelProperty}
             valueProperty={valueProperty}
@@ -222,39 +243,35 @@ export const DualList = <T extends AnyObject = string>({
         <div className="self-center mx-2">
           <ButtonGroup vertical className="outline overflow-hidden bg-base">
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll to top"
               onClick={moveAllLeft}
-              icon={CoreIcons.chevronsLeft}
+              icon={{ icon: "icon-[mdi--chevron-double-left]", rtlFlip: true }}
               disabled={!rightOptions.length}
             />
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll up"
               onClick={moveRightSelected}
-              icon={CoreIcons.chevronLeft}
+              icon={{ icon: "icon-[mdi--chevron-left]", rtlFlip: true }}
               disabled={!rightSelected.length}
             />
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll down"
               onClick={moveLeftSelected}
-              icon={CoreIcons.chevronRight}
+              icon={{ icon: "icon-[mdi--chevron-right]", rtlFlip: true }}
               disabled={!leftSelected.length}
             />
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll to bottom"
               onClick={moveAllRight}
-              icon={CoreIcons.chevronsRight}
+              icon={{ icon: "icon-[mdi--chevron-double-right]", rtlFlip: true }}
               disabled={!leftOptions.length}
             />
           </ButtonGroup>
@@ -268,6 +285,7 @@ export const DualList = <T extends AnyObject = string>({
             allowClear
             height={height}
             options={rightOptions}
+            emptyDisplay={emptyDisplay}
             groupProperty={groupProperty}
             labelProperty={labelProperty}
             valueProperty={valueProperty}