@react-fabric/form 1.0.0-beta.45 → 1.0.0-beta.47

package/src/input/Field.tsx

@@ -90,6 +90,7 @@ export const Field = ({
           "flex-1 rounded",
           !vertical && "flex",
         )}
+        data-vertical={!!vertical}
       >
         {cloneChildren(children, (child: AnyObject) =>
           cloneElement(child, {

package/src/input/File.tsx

@@ -151,7 +151,7 @@ export const FileInput = ({
 
   return (
     <InputWrapper
-      showClear={!isEmpty(actualValue)}
+      showClear={!isEmpty(actualValue) && !disabled && !readOnly}
       onClear={handleChange}
       invalid={invalid}
       readOnly={readOnly}

package/src/input/Input.tsx

@@ -33,6 +33,7 @@ import {
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
 import { handleEnter } from "../utils";
+import classNames from "classnames";
 
 export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
   /**
@@ -52,6 +53,7 @@ export const Input = ({
   placeholder,
   autoFocus,
   error,
+  monospace,
   type = "text",
   onBlur,
   onFocus,
@@ -82,7 +84,7 @@ export const Input = ({
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      showClear={!!actualValue && !disabled && !readOnly}
       onClear={handleChange}
       invalid={invalid}
       readOnly={readOnly}
@@ -92,7 +94,10 @@ export const Input = ({
       {...rest}
     >
       <input
-        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer"
+        className={classNames(
+          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
+          monospace && "font-mono text-sm",
+        )}
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}

package/src/input/Number.tsx

@@ -93,7 +93,7 @@ export const Number = ({
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      showClear={!!actualValue && !disabled && !readOnly}
       onClear={handleChange}
       invalid={invalid}
       readOnly={readOnly}

package/src/input/Password.tsx

@@ -92,7 +92,7 @@ export const Password = ({
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      showClear={!!actualValue && !disabled && !readOnly}
       onClear={handleChange}
       invalid={invalid}
       readOnly={readOnly}

package/src/input/RangeSlider.tsx

@@ -190,7 +190,7 @@ export const RangeSlider = ({
     >
       <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 +201,7 @@ export const RangeSlider = ({
         <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 }}

package/src/input/Search.tsx

@@ -113,7 +113,7 @@ export const Search = ({
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      showClear={!!actualValue && !disabled && !readOnly}
       onClear={handleChange}
       allowClear={allowClear}
       invalid={invalid}

package/src/input/Slider.tsx

@@ -194,7 +194,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,7 +205,7 @@ export const Slider = ({
         <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 }}

package/src/input/Textarea.tsx

@@ -104,7 +104,7 @@ export const Textarea = ({
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      showClear={!!actualValue && !disabled && !readOnly}
       onClear={handleChange}
       invalid={invalid}
       readOnly={readOnly}

package/src/internal/InputWrapper.tsx

@@ -108,7 +108,7 @@ export const InputWrapper = ({
         invalid && "fabric-invalidWrapper",
         !noOutline &&
           !noBorder &&
-          "bg-(--fabric-input) outline -outline-offset-1 overflow-hidden",
+          "bg-(--fabric-input) outline overflow-hidden",
         "flex flex-nowrap items-center flex-1",
         textarea ? "rounded-capped group" : "rounded",
         isExpanded
@@ -117,7 +117,7 @@ export const InputWrapper = ({
             ? "absolute inset-x-0"
             : "relative",
         !noOutline &&
-          "after:absolute after:bottom-0 after:h-[2px] after:bg-primary-500 after:mx-auto",
+          "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto",
       )}
       onKeyDown={(e) =>
         e.key === "Escape" &&
@@ -190,7 +190,10 @@ export const InputWrapper = ({
     <Wrapper {...wrapperProps}>
       <div
         ref={elRef}
-        className="flex-1 relative min-h-8 flex flex-col flex-nowrap"
+        className={classNames(
+          "relative min-h-8 flex flex-col flex-nowrap",
+          width ? "flex-auto" : "flex-1",
+        )}
         style={{ width, flexBasis: width }}
       >
         {el}

package/src/select/useSelect.tsx

@@ -338,6 +338,7 @@ export const useSelect = ({
       });
     },
     [onQuery],
+    300,
   );
 
   // handlers

package/src/types/index.ts

@@ -80,6 +80,8 @@ export interface InputProps<V = string> extends TestProps {
    */
   info?: string;
 
+  monospace?: boolean;
+
   /**
    * required
    */