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

package/src/internal/InputWrapper.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 } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
@@ -147,7 +147,7 @@ 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",
@@ -185,7 +185,11 @@ export const InputWrapper = ({
       {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"
         />
       )}
@@ -198,7 +202,7 @@ export const InputWrapper = ({
         ref={elRef}
         className={classNames(
           "relative min-h-8 flex flex-col flex-nowrap",
-          width ? "flex-auto" : "flex-1",
+          width ? "flex-content" : "flex-1",
         )}
         style={{ width, flexBasis: width }}
       >

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";
@@ -323,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 && (

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
    */
@@ -102,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
@@ -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

@@ -59,8 +59,8 @@ export const List = <T extends AnyObject = string>({
   options,
   height,
   groupProperty,
-  labelProperty,
-  valueProperty,
+  labelProperty = "label" as AnyObject,
+  valueProperty = "value" as AnyObject,
   infoProperty,
   sortProperty,
   multiple,
@@ -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";
@@ -68,7 +68,7 @@ export const Select = <T extends AnyObject = string>({
   hideHandle,
   groupProperty,
   labelProperty = "label" as AnyObject,
-  valueProperty = "id" as AnyObject,
+  valueProperty = "value" as AnyObject,
   sortProperty,
   infoProperty,
   multiple,
@@ -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
    */