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

package/src/input/DateInput.tsx

@@ -77,7 +77,7 @@ export interface DateProps
  * The component supports both date and datetime types, with appropriate formatting.
  *
  * @param {DateProps} props - The properties for the DateInput component.
- * @returns {JSX.Element} - The rendered DateInput component.
+ * @returns {React.ReactElement} - The rendered DateInput component.
  */
 export const DateInput = ({
   ref,
@@ -236,7 +236,7 @@ export const DateInput = ({
             zIndex: "var(--z-popover)",
             ...floatingStyles,
           }}
-          className="shadow-lg bg-base ring-1 ring-tint-100"
+          className="shadow-lg bg-default ring-1 ring-tint-100"
           data-ref="dropdownBody"
           {...getFloatingProps()}
         >
@@ -251,7 +251,7 @@ export const DateInput = ({
             ref={arrowRef}
             context={context}
             strokeWidth={0.5}
-            className="fill-base stroke-muted"
+            className="fill-default stroke-muted"
           />
         </div>
       )}

package/src/input/Field.tsx

@@ -38,7 +38,7 @@ export interface FieldProps extends ChildrenProp, CssProp {
   /**
    * append to label end
    */
-  appendLabel?: JSX.Element | string | number | boolean;
+  appendLabel?: React.ReactElement | string | number | boolean;
   /**
    * info label at bottom
    */
@@ -90,7 +90,7 @@ export const Field = ({
         className={classNames(
           "fabric-fieldGroup",
           !plain && !noOutline && "outline",
-          !plain && "bg-base",
+          !plain && "bg-default",
           plain && "flex-wrap",
           "flex-1 rounded",
           !vertical && "flex",

package/src/input/File.tsx

@@ -82,7 +82,7 @@ const FileExists = (prop: AnyObject) => {
  * It handles file changes, invalid states, and read-only or disabled states.
  *
  * @param {FileInputProps} props - The properties for the FileInput component.
- * @returns {JSX.Element} - The rendered FileInput component.
+ * @returns {React.ReactElement} - The rendered FileInput component.
  */
 export const FileInput = ({
   ref,

package/src/input/Hidden.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 { Fragment, useEffect } from "react";
+import { Fragment } from "react";
 import { ErrorIcon } from "../internal/ErrorIcon";
 
 interface Props {
@@ -30,17 +30,9 @@ interface Props {
    */
   name?: string;
   /**
-   * hidden value will fire change for form update
+   * hidden input value
    */
-  hiddenValue?: AnyObject;
-  /**
-   * default avatar image
-   */
-  defaultValue?: string;
-  /**
-   * form onChange handler
-   */
-  onChange?: (value: AnyObject) => void;
+  value?: AnyObject;
 }
 
 /**
@@ -49,31 +41,19 @@ interface Props {
  * This is useful for cases where you need to update the form state without user interaction.
  *
  * @param {Object} props - Component properties.
- * @returns {JSX.Element} The rendered hidden input field and error icon.
+ * @returns {React.ReactElement} The rendered hidden input field and error icon.
  */
 export const HiddenInput = ({
-  hiddenValue,
-  defaultValue,
-  onChange,
   // @ts-expect-error ignore
-  // eslint-disable-next-line react/prop-types
   invalid,
   // @ts-expect-error ignore
-  // eslint-disable-next-line react/prop-types
   error,
-  // @ts-expect-error ignore
-  // eslint-disable-next-line react/prop-types
   value = "",
   name,
 }: Props) => {
-  useEffect(() => {
-    setTimeout(() => {
-      onChange?.(hiddenValue ?? defaultValue);
-    }, 50);
-  }, [hiddenValue, defaultValue]);
   return (
     <Fragment>
-      <input type="hidden" onChange={onChange} value={value} name={name} />
+      <input type="hidden" value={value} name={name} />
       <ErrorIcon invalid={invalid} error={error} />
     </Fragment>
   );

package/src/input/Input.tsx

@@ -47,7 +47,7 @@ export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
  * The component uses a wrapper to handle the clear button and styling, and it supports deferred value updates to optimize performance.
  *
  * @param {TextInputProps} props - The properties for the text input component.
- * @returns {JSX.Element} - A JSX element representing the text input field.
+ * @returns {React.ReactElement} - A JSX element representing the text input field.
  */
 export const Input = ({
   ref,

package/src/input/Number.tsx

@@ -56,7 +56,7 @@ export interface NumberProps
  * It also includes a clear button to reset the input value.
  *
  * @param {NumberProps} props - The properties for the Number input component.
- * @returns {JSX.Element} The rendered Number input component.
+ * @returns {React.ReactElement} The rendered Number input component.
  */
 export const Number = ({
   ref,

package/src/input/Password.tsx

@@ -51,7 +51,7 @@ export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
  * 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.
+ * @returns {React.ReactElement} The rendered Password input component.
  */
 export const Password = ({
   ref,

package/src/input/Radio.tsx

@@ -31,7 +31,7 @@ export interface RadioProps extends RefProp<HTMLInputElement> {
   /**
    * radio label
    */
-  label?: JSX.Element | string;
+  label?: React.ReactElement | string;
   /**
    * value
    */
@@ -76,7 +76,7 @@ export interface RadioProps extends RefProp<HTMLInputElement> {
  * 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.
+ * @returns {React.ReactElement} The rendered Radio input component.
  */
 export const Radio = ({
   ref,

package/src/input/RadioGroup.tsx

@@ -26,6 +26,7 @@ import {
   type ChildrenProp,
   type CssProp,
 } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
 import { cloneElement } from "react";
 import { FieldWrapper } from "../internal/FieldWrapper";
 import { type Radio } from "./Radio";
@@ -38,7 +39,7 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
   /**
    * append to label end
    */
-  appendLabel?: JSX.Element | string | number | boolean;
+  appendLabel?: React.ReactElement | string | number | boolean;
   /**
    * field info
    */
@@ -68,6 +69,10 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
    * vertical orientation
    */
   vertical?: boolean;
+  /**
+   * value
+   */
+  value?: string | number;
   /**
    * change handler
    */
@@ -80,22 +85,25 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
  * 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.
+ * @returns {React.ReactElement} The rendered RadioGroup component.
  */
 export const RadioGroup = ({
   children,
   name,
   className,
   optionWidth,
+  vertical,
+  value,
   onChange,
   ...rest
 }: RadioGroupProps) => {
   return (
     <FieldWrapper {...rest}>
-      <div className={className}>
+      <div className={classNames(className, vertical && "flex flex-col gap-1")}>
         {cloneChildren(children, (child: AnyObject) =>
           cloneElement(child, {
             name,
+            checked: child.props.value === value,
             onChange,
             width: optionWidth,
           }),

package/src/input/RangeSlider.tsx

@@ -103,7 +103,7 @@ export interface RangeProps
  * 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.
+ * @returns {React.ReactElement} The rendered RangeSlider component.
  */
 export const RangeSlider = ({
   error,

package/src/input/Search.tsx

@@ -62,7 +62,7 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
  * 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.
+ * @returns {React.ReactElement} The rendered Search input component.
  */
 export const Search = ({
   ref,

package/src/input/Slider.tsx

@@ -105,7 +105,7 @@ export interface SliderProps
  * 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.
+ * @returns {React.ReactElement} The rendered Slider component.
  */
 export const Slider = ({
   error,

package/src/input/Switch.tsx

@@ -41,7 +41,7 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
   /**
    * Switch label
    */
-  label?: JSX.Element | string;
+  label?: React.ReactElement | string;
   /**
    * checked
    */
@@ -94,7 +94,7 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
  * 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.
+ * @returns {React.ReactElement} The rendered Switch input component.
  */
 export const Switch = ({
   ref,
@@ -137,8 +137,8 @@ export const Switch = ({
         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",
+          : "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 }}
     >
@@ -147,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-[1.5em] min-w-[2.5em] cursor-pointer rounded-full p-[0.25em] transition-colors duration-200 ease-in-out",
+          "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
@@ -157,7 +157,7 @@ export const Switch = ({
       >
         <input
           className={classNames(
-            "appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0",
+            "appearance-none absolute opacity-0 inset-0 bg-transparent border-none cursor-[inherit] outline-none ring-0",
           )}
           aria-invalid={invalid}
           aria-disabled={disabled}

package/src/input/Textarea.tsx

@@ -63,7 +63,7 @@ export interface TextareaProps
  * 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.
+ * @returns {React.ReactElement} The rendered Textarea component.
  */
 export const Textarea = ({
   ref,

package/src/internal/InputWrapper.tsx

@@ -152,7 +152,6 @@ export const InputWrapper = ({
           className={classNames(
             "text-tint-500 hover:text-tint-700 p-1 z-1 flex-content",
             "fabric-inputClear",
-            textarea && "self-start mt-1 me-1",
           )}
         />
       )}
@@ -190,7 +189,7 @@ export const InputWrapper = ({
               ? "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"
+          className="hidden group-hover:block absolute top-0 inset-e-0 bg-default hover:bg-tint-200 p-1 opacity-65 rounded-capped"
         />
       )}
     </div>

package/src/select/AutoComplete.tsx

@@ -43,10 +43,7 @@ import { type SelectProps } from "../types";
 import { Options } from "./Options";
 import { useSelect } from "./useSelect";
 
-type AutoCompleteProps = Omit<
-  SelectProps<string>,
-  "options" | "allowCreate" | "createOption"
-> & {
+type AutoCompleteProps = Omit<SelectProps<string>, "options" | "allowCreate" | "createOption"> & {
   /**
    * auto-complete history
    */
@@ -66,7 +63,7 @@ type AutoCompleteProps = Omit<
  * 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.
+ * @returns {React.ReactElement} The rendered AutoComplete component.
  */
 export const AutoComplete = ({
   ref,
@@ -156,9 +153,7 @@ export const AutoComplete = ({
     },
   });
 
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
-    [dismiss, navigation, typeahead],
-  );
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([dismiss, navigation, typeahead]);
 
   const referenceProps = useMemo(() => {
     const props: AnyObject = getReferenceProps();
@@ -167,9 +162,7 @@ export const AutoComplete = ({
       ...props,
       onFocus,
       onBlur(evt: React.FocusEvent) {
-        if (
-          evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)
-        ) {
+        if (evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)) {
           refs.domReference.current?.querySelector("input")?.focus();
           return;
         }
@@ -195,10 +188,7 @@ export const AutoComplete = ({
         } else if (evt.key === "Backspace") {
           !state.query && multiple && handleRemove();
         } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
-          if (
-            ["ArrowUp", "ArrowDown"].includes(evt.key) &&
-            state.activeIndex === null
-          ) {
+          if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
             setActiveIndex(state.selectedIndex);
           }
           setTimeout(() => {
@@ -207,17 +197,7 @@ export const AutoComplete = ({
         }
       },
     };
-  }, [
-    getReferenceProps,
-    onEnterPressed,
-    handleQuery,
-    onFocus,
-    onBlur,
-    multiple,
-    refs,
-    state.query,
-    state.activeIndex,
-  ]);
+  }, [getReferenceProps, onEnterPressed, handleQuery, onFocus, onBlur, multiple, refs, state.query, state.activeIndex]);
 
   const floatingProps = useMemo(() => {
     return getFloatingProps({
@@ -227,9 +207,7 @@ export const AutoComplete = ({
 
   const makeItemProps = useCallback(
     (item: AnyObject) => {
-      const selected = isArray(state.value)
-        ? state.value?.includes?.(item)
-        : state.value === item;
+      const selected = isArray(state.value) ? state.value?.includes?.(item) : state.value === item;
       return getItemProps({
         "data-selected": selected ? true : undefined,
         onClick() {
@@ -287,9 +265,7 @@ export const AutoComplete = ({
           "group flex-1 py-1 px-2 truncate text-start flex gap-1 relative min-h-5 justify-start",
           multiple ? "flex-wrap" : "flex-nowrap overflow-hidden",
         )}
-        onMouseUp={(e) =>
-          e.currentTarget.querySelector<HTMLElement>("input")?.focus()
-        }
+        onMouseUp={(e) => e.currentTarget.querySelector<HTMLElement>("input")?.focus()}
       >
         {displayValue}
         <textarea
@@ -314,28 +290,17 @@ export const AutoComplete = ({
           {...referenceProps}
           onChange={(evt) => handleQuery(evt.target.value)}
         />
-        <button
-          type="submit"
-          ref={submitRef}
-          tabIndex={-1}
-          className="opacity-0 absolute"
-        />
+        <button type="submit" ref={submitRef} tabIndex={-1} className="opacity-0 absolute" />
       </div>
       {state.loading && (
         <Icon
-          className={classNames(
-            "flex-content p-2 z-0 order-9 text-muted pointer-events-none",
-          )}
+          className={classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none")}
           icon="icon-[svg-spinners--eclipse]"
         />
       )}
       {state.open && !state.loading && (
-        <FloatingPortal>
-          <FloatingFocusManager
-            context={context}
-            initialFocus={-1}
-            visuallyHiddenDismiss
-          >
+        <FloatingPortal root={refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
+          <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss closeOnFocusOut>
             <Options
               ref={refs.setFloating}
               className="outline shadow-lg max-h-[40vh] z-(--z-popover)"
@@ -348,11 +313,7 @@ export const AutoComplete = ({
               active={state.activeIndex}
               itemRef={setItemRef}
               itemProps={makeItemProps}
-              empty={
-                <div className="text-muted text-sm px-2 py-1">
-                  No history available
-                </div>
-              }
+              empty={<div className="text-muted text-sm px-2 py-1">No history available</div>}
             >
               {(item) => item}
             </Options>

package/src/select/DualList.tsx

@@ -95,7 +95,7 @@ export interface DualListProps<T>
  * 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.
+ * @returns {React.ReactElement} The rendered DualList component.
  */
 export const DualList = <T extends AnyObject = string>({
   ref,
@@ -105,7 +105,7 @@ export const DualList = <T extends AnyObject = string>({
   groupProperty,
   height = "18rem",
   labelProperty = "label" as AnyObject,
-  valueProperty = "id" as AnyObject,
+  valueProperty = "value" as AnyObject,
   renderer,
   onChange,
   // @ts-expect-error ignore
@@ -241,7 +241,7 @@ export const DualList = <T extends AnyObject = string>({
           />
         </div>
         <div className="self-center mx-2">
-          <ButtonGroup vertical className="outline overflow-hidden bg-base">
+          <ButtonGroup vertical className="outline overflow-hidden bg-default">
             <Button
               size="sm"
               variant="link"