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

package/src/select/DualList.tsx

@@ -28,11 +28,14 @@ import {
   useDroppable,
 } from "@dnd-kit/core";
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
-import { Button, ButtonGroup, CoreIcons } from "@react-fabric/core";
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { mergeRefs } from "@react-fabric/utilities";
+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,
   useEffect,
@@ -60,15 +63,15 @@ 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
    */
@@ -76,7 +79,7 @@ export interface DualListProps<T>
   /**
    * item renderer
    */
-  renderer?: (option: T) => React.ReactNode;
+  renderer?: (option: T) => ReactElement;
   /**
    * change handler
    */
@@ -244,7 +247,7 @@ export const DualList = <T extends AnyObject = string>({
               variant="link"
               aria-label="scroll to top"
               onClick={moveAllLeft}
-              icon={{ icon: CoreIcons.chevronsLeft, rtlFlip: true }}
+              icon={{ icon: "icon-[mdi--chevron-double-left]", rtlFlip: true }}
               disabled={!rightOptions.length}
             />
             <Button
@@ -252,7 +255,7 @@ export const DualList = <T extends AnyObject = string>({
               variant="link"
               aria-label="scroll up"
               onClick={moveRightSelected}
-              icon={{ icon: CoreIcons.chevronLeft, rtlFlip: true }}
+              icon={{ icon: "icon-[mdi--chevron-left]", rtlFlip: true }}
               disabled={!rightSelected.length}
             />
             <Button
@@ -260,7 +263,7 @@ export const DualList = <T extends AnyObject = string>({
               variant="link"
               aria-label="scroll down"
               onClick={moveLeftSelected}
-              icon={{ icon: CoreIcons.chevronRight, rtlFlip: true }}
+              icon={{ icon: "icon-[mdi--chevron-right]", rtlFlip: true }}
               disabled={!leftSelected.length}
             />
             <Button
@@ -268,7 +271,7 @@ export const DualList = <T extends AnyObject = string>({
               variant="link"
               aria-label="scroll to bottom"
               onClick={moveAllRight}
-              icon={{ icon: CoreIcons.chevronsRight, rtlFlip: true }}
+              icon={{ icon: "icon-[mdi--chevron-double-right]", rtlFlip: true }}
               disabled={!leftOptions.length}
             />
           </ButtonGroup>

package/src/select/List.tsx

@@ -324,7 +324,7 @@ export const List = <T extends AnyObject = string>({
           empty={emptyDisplay}
           info={state.activeItem?.[infoProperty ?? "info"]}
         >
-          {async (item, label) => await (renderer?.(item) ?? label)}
+          {(item, label) => renderer?.(item) ?? label}
         </Options>
       </FloatingFocusManager>
     </Wrapper>

package/src/select/Options.tsx

@@ -22,8 +22,8 @@
  */
 
 import { EmptyContent } from "@react-fabric/core";
+import { type ReactElement } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
-import { type ReactElement } from "react";
 import { Trans } from "react-i18next";
 
 export const Options = ({

package/src/select/Select.tsx

@@ -35,7 +35,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 } from "react";
@@ -249,7 +249,7 @@ export const Select = <T extends AnyObject = string>({
       ));
     } else if (!isEmpty(state.value) && !state.query) {
       return (
-        <span className="self-center pointer-events-none select-none">
+        <span className="self-center pointer-events-none select-none truncate leading-tight">
           {renderer?.(state.value) ?? state.value[labelProperty] ?? state.value}
         </span>
       );
@@ -310,7 +310,7 @@ export const Select = <T extends AnyObject = string>({
           className={classNames(
             "appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer",
             disabled && "cursor-not-allowed pointer-events-none",
-            multiple && "min-w-24",
+            multiple ? "min-w-24" : "min-w-2",
           )}
           placeholder={isEmpty(state.value) ? placeholder : ""}
           onChange={(evt) => handleQuery(evt.target.value)}
@@ -324,16 +324,15 @@ export const Select = <T extends AnyObject = string>({
             disabled && "pointer-events-none",
           )}
           onClick={() => !disabled && openDropdown()}
-          icon={CoreIcons.chevronDown}
+          icon="icon-[mdi--chevron-down]"
         />
       )}
       {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 && (
@@ -360,7 +359,7 @@ export const Select = <T extends AnyObject = string>({
               empty={emptyDisplay}
               info={state.activeItem?.[infoProperty ?? "info"]}
             >
-              {async (item, label) => await (renderer?.(item) ?? label)}
+              {(item, label) => renderer?.(item) ?? label}
             </Options>
           </FloatingFocusManager>
         </FloatingPortal>

package/src/types/index.ts

@@ -22,10 +22,11 @@
  */
 
 import {
+  type NestedKeys,
+  type ReactElement,
   type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
-import { type ReactElement } from "react";
 
 export interface InputProps<V = string> extends TestProps {
   /**
@@ -145,23 +146,23 @@ export interface BaseSelectProps<T extends AnyObject = string> {
   /**
    * 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>;
   /**
    * value property name
    */
-  infoProperty?: keyof T;
+  infoProperty?: NestedKeys<T>;
   /**
    * value property name
    */
-  sortProperty?: keyof T | true;
+  sortProperty?: NestedKeys<T> | true;
   /**
    * searchable list
    */
@@ -185,7 +186,7 @@ export interface BaseSelectProps<T extends AnyObject = string> {
   /**
    * item renderer
    */
-  renderer?: (option: T) => React.ReactNode;
+  renderer?: (option: T) => ReactElement;
   /**
    * item matcher
    */