@react-fabric/form 1.0.0-beta.44 → 1.0.0-beta.46

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/DualList.tsx

@@ -24,6 +24,7 @@
 import { Button, ButtonGroup, CoreIcons } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import {
+  type ReactElement,
   useCallback,
   useDeferredValue,
   useEffect,
@@ -68,6 +69,10 @@ export interface DualListProps<T>
    * value property name
    */
   valueProperty?: keyof T;
+  /**
+   * empty list display
+   */
+  emptyDisplay?: ReactElement;
   /**
    * item renderer
    */
@@ -82,6 +87,7 @@ export const DualList = <T extends AnyObject = string>({
   ref,
   value,
   options,
+  emptyDisplay,
   groupProperty,
   height = "18rem",
   labelProperty = "label" as AnyObject,
@@ -210,6 +216,7 @@ export const DualList = <T extends AnyObject = string>({
             error={error}
             height={height}
             options={leftOptions}
+            emptyDisplay={emptyDisplay}
             groupProperty={groupProperty}
             labelProperty={labelProperty}
             valueProperty={valueProperty}
@@ -268,6 +275,7 @@ export const DualList = <T extends AnyObject = string>({
             allowClear
             height={height}
             options={rightOptions}
+            emptyDisplay={emptyDisplay}
             groupProperty={groupProperty}
             labelProperty={labelProperty}
             valueProperty={valueProperty}

package/src/select/List.tsx

@@ -63,6 +63,7 @@ export const List = <T extends AnyObject = string>({
   onChange,
   onSelect,
   onEnterPressed,
+  emptyDisplay,
   invalid,
   error,
   allowClear,
@@ -308,6 +309,7 @@ export const List = <T extends AnyObject = string>({
           labelProperty={labelProperty}
           itemRef={setItemRef}
           itemProps={makeItemProps}
+          empty={emptyDisplay}
         >
           {(item, label) => renderer?.(item) ?? label}
         </Options>

package/src/select/Select.tsx

@@ -64,6 +64,7 @@ export const Select = <T extends AnyObject = string>({
   multiple,
   searchable,
   allowCreate,
+  emptyDisplay,
   createOption,
   matcher,
   renderer,
@@ -345,6 +346,7 @@ export const Select = <T extends AnyObject = string>({
               labelProperty={labelProperty}
               itemRef={setItemRef}
               itemProps={makeItemProps}
+              empty={emptyDisplay}
             >
               {(item, label) => renderer?.(item) ?? label}
             </Options>

package/src/select/useSelect.tsx

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

package/src/types/index.ts

@@ -25,6 +25,7 @@ import {
   type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
+import { type ReactElement } from "react";
 
 export interface InputProps<V = string> extends TestProps {
   /**
@@ -79,6 +80,8 @@ export interface InputProps<V = string> extends TestProps {
    */
   info?: string;
 
+  monospace?: boolean;
+
   /**
    * required
    */
@@ -155,6 +158,10 @@ export interface BaseSelectProps<T extends AnyObject = string> {
    * allow create item
    */
   allowCreate?: boolean;
+  /**
+   * empty list display
+   */
+  emptyDisplay?: ReactElement;
   /**
    * create new item object
    */