@choice-ui/react 1.4.2 → 1.4.3

package/dist/components/command/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { default as react__default, HTMLProps, ReactNode } from 'react';
-import { InputProps } from '../../input/src';
+import { TextFieldProps } from '../../text-field/src';
 import { KbdKey } from '../../kbd/src';
 import { ScrollAreaProps } from '../../scroll-area/src';
 import * as _choice_ui_tabs from '../../tabs/src';
@@ -15,7 +15,7 @@ interface CommandGroupProps extends HTMLProps<HTMLDivElement> {
     value?: string;
 }
 
-interface CommandInputProps extends Omit<InputProps, "value" | "onChange" | "type"> {
+interface CommandInputProps extends Omit<TextFieldProps, "value" | "onChange" | "type"> {
     onChange?: (search: string) => void;
     prefixElement?: ReactNode;
     suffixElement?: ReactNode;

package/dist/components/command/src/components/command-input.d.ts

@@ -1,6 +1,6 @@
-import { InputProps } from '../../../input/src';
+import { TextFieldProps } from '../../../text-field/src';
 import { ReactNode } from 'react';
-export interface CommandInputProps extends Omit<InputProps, "value" | "onChange" | "type"> {
+export interface CommandInputProps extends Omit<TextFieldProps, "value" | "onChange" | "type"> {
     onChange?: (search: string) => void;
     prefixElement?: ReactNode;
     suffixElement?: ReactNode;

package/dist/components/command/src/components/command-input.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Input } from "../../../input/dist/index.js";
+import { TextField } from "../../../text-field/dist/index.js";
 import { forwardRef, useEffect } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { commandInputTv } from "../tv.js";
@@ -25,33 +25,34 @@ const CommandInput = forwardRef((props, ref) => {
     onChange == null ? void 0 : onChange(value2);
   });
   const tv = commandInputTv({ size: context.size });
-  return /* @__PURE__ */ jsxs("div", { className: tcx(tv.root({ className })), children: [
-    prefixElement,
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        ref,
-        ...rest,
-        className: tcx(tv.input({ className })),
-        variant: props.variant || context.variant,
-        "data-command-input": "",
-        autoComplete: "off",
-        autoCorrect: "off",
-        spellCheck: false,
-        "aria-autocomplete": "list",
-        role: "combobox",
-        "aria-expanded": true,
-        "aria-controls": context.listId,
-        "aria-labelledby": context.labelId,
-        "aria-activedescendant": selectedItemId,
-        id: context.inputId,
-        type: "text",
-        value: isControlled ? value : search,
-        onChange: handleChange
-      }
-    ),
-    suffixElement
-  ] });
+  return /* @__PURE__ */ jsxs(
+    TextField,
+    {
+      ref,
+      ...rest,
+      className: tcx(tv.input({ className })),
+      size: "large",
+      variant: props.variant || context.variant,
+      "data-command-input": "",
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: false,
+      "aria-autocomplete": "list",
+      role: "combobox",
+      "aria-expanded": true,
+      "aria-controls": context.listId,
+      "aria-labelledby": context.labelId,
+      "aria-activedescendant": selectedItemId,
+      id: context.inputId,
+      type: "text",
+      value: isControlled ? value : search,
+      onChange: handleChange,
+      children: [
+        prefixElement && /* @__PURE__ */ jsx(TextField.Prefix, { children: prefixElement }),
+        suffixElement && /* @__PURE__ */ jsx(TextField.Suffix, { children: suffixElement })
+      ]
+    }
+  );
 });
 CommandInput.displayName = "CommandInput";
 export {

package/dist/components/command/src/tv.d.ts

@@ -43,39 +43,30 @@ export declare const commandTv: import('tailwind-variants').TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 export declare const commandInputTv: import('tailwind-variants').TVReturnType<{
     size: {
-        default: {
-            input: string;
-        };
+        default: {};
         large: {
             input: string;
         };
     };
 }, {
-    root: string;
     input: string;
 }, undefined, {
     size: {
-        default: {
-            input: string;
-        };
+        default: {};
         large: {
             input: string;
         };
     };
 }, {
-    root: string;
     input: string;
 }, import('tailwind-variants').TVReturnType<{
     size: {
-        default: {
-            input: string;
-        };
+        default: {};
         large: {
             input: string;
         };
     };
 }, {
-    root: string;
     input: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const commandListTv: import('tailwind-variants').TVReturnType<{

package/dist/components/command/src/tv.js

@@ -19,16 +19,13 @@ const commandTv = tcv({
 });
 const commandInputTv = tcv({
   slots: {
-    root: "m-2 flex items-center",
-    input: "w-full rounded-lg"
+    input: "m-2"
   },
   variants: {
     size: {
-      default: {
-        input: "text-body-medium h-8 px-2"
-      },
+      default: {},
       large: {
-        input: "leading-lg tracking-lg h-10 px-4 text-body-large"
+        input: "leading-lg tracking-lg px-4 text-body-large"
       }
     }
   },

package/dist/components/comments/src/comment-item/tv.d.ts

@@ -4,8 +4,8 @@ export declare const CommentItemTv: import('tailwind-variants').TVReturnType<{
             meta?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             date?: import('tailwind-merge').ClassNameValue;
-            name?: import('tailwind-merge').ClassNameValue;
             root?: import('tailwind-merge').ClassNameValue;
+            name?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             actionMenu?: import('tailwind-merge').ClassNameValue;
         };
@@ -16,8 +16,8 @@ export declare const CommentItemTv: import('tailwind-variants').TVReturnType<{
             meta?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             date?: import('tailwind-merge').ClassNameValue;
-            name?: import('tailwind-merge').ClassNameValue;
             root?: import('tailwind-merge').ClassNameValue;
+            name?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             actionMenu?: import('tailwind-merge').ClassNameValue;
         };
@@ -36,8 +36,8 @@ export declare const CommentItemTv: import('tailwind-variants').TVReturnType<{
             meta?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             date?: import('tailwind-merge').ClassNameValue;
-            name?: import('tailwind-merge').ClassNameValue;
             root?: import('tailwind-merge').ClassNameValue;
+            name?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             actionMenu?: import('tailwind-merge').ClassNameValue;
         };

package/dist/components/popover/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ModalHeaderProps, ModalContent, ModalFooter } from '../../modal/src';
-import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
+import { FloatingFocusManagerProps, OffsetOptions, Placement, UseTransitionStylesProps } from '@floating-ui/react';
 import { default as react__default } from 'react';
 import * as react from 'react';
 
@@ -23,14 +23,10 @@ interface PopoverProps {
     };
     draggable?: boolean;
     focusManagerProps?: Partial<FloatingFocusManagerProps>;
-    /**
-     * @deprecated use focusManagerProps.initialFocus instead
-     */
-    initialFocus?: number | react__default.MutableRefObject<HTMLElement | null>;
     interactions?: "hover" | "click" | "focus" | "none";
     matchTriggerWidth?: boolean;
     maxWidth?: number;
-    offset?: number;
+    offset?: OffsetOptions;
     onOpenChange?: (isOpen: boolean) => void;
     open?: boolean;
     outsidePressIgnore?: string | string[] | boolean;
@@ -44,6 +40,7 @@ interface PopoverProps {
      */
     root?: HTMLElement | null;
     triggerRef?: react__default.RefObject<HTMLElement>;
+    transitionStylesProps?: UseTransitionStylesProps;
 }
 declare const DragPopover: react__default.NamedExoticComponent<PopoverProps>;
 interface PopoverComponent extends react__default.FC<PopoverProps> {

package/dist/components/popover/dist/index.js

@@ -1,6 +1,6 @@
-import { Slot } from "../../slot/dist/index.js";
 import { ModalFooter, ModalContent, ModalHeader, Modal } from "../../modal/dist/index.js";
-import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, FloatingNode, FloatingFocusManager, FloatingPortal, offset, flip, shift, size, useFloating, autoUpdate, useHover, safePolygon, useClick, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
+import { Slot } from "../../slot/dist/index.js";
+import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, FloatingNode, FloatingFocusManager, FloatingPortal, offset, flip, shift, size, useFloating, autoUpdate, useTransitionStyles, useHover, safePolygon, useClick, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
 import { memo, forwardRef, useId, useRef, useEffect, useMemo, useCallback, createContext, useContext, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEventCallback } from "usehooks-ts";
@@ -202,7 +202,7 @@ function useFloatingPopover({
   defaultOpen,
   onOpenChange,
   placement = "bottom",
-  offset: offsetDistance = 8,
+  offset: offsetDistance = { mainAxis: 8, crossAxis: 0 },
   interactions = "click",
   outsidePressIgnore,
   delay,
@@ -215,7 +215,10 @@ function useFloatingPopover({
   rememberPosition = false,
   autoSize = true,
   maxWidth: maxWidthValue = 320,
-  matchTriggerWidth = false
+  matchTriggerWidth = false,
+  transitionStylesProps = {
+    duration: 0
+  }
 }) {
   const [isClosing, setIsClosing] = useState(false);
   const positionRef = useRef({ x: 0, y: 0 });
@@ -275,6 +278,7 @@ function useFloatingPopover({
     middleware,
     whileElementsMounted: autoUpdate$1 ? autoUpdate : void 0
   });
+  const { isMounted, styles } = useTransitionStyles(context, transitionStylesProps);
   useEffect(() => {
     if (innerOpen && isPositioned && x !== null && y !== null) {
       positionRef.current = { x, y };
@@ -387,7 +391,9 @@ function useFloatingPopover({
     getStyles,
     handleClose,
     handleTriggerRef,
-    isClosing
+    isClosing,
+    isMounted,
+    styles
   };
 }
 var PORTAL_ROOT_ID = "floating-popover-root";
@@ -399,7 +405,7 @@ var DragPopover = memo(function DragPopover2({
   draggable = false,
   placement = "bottom",
   interactions = "click",
-  offset: offsetDistance = DEFAULT_OFFSET,
+  offset: offsetDistance = { mainAxis: DEFAULT_OFFSET, crossAxis: 0 },
   open,
   onOpenChange,
   defaultOpen,
@@ -407,7 +413,6 @@ var DragPopover = memo(function DragPopover2({
   closeOnEscape = true,
   contentRef,
   delay,
-  initialFocus,
   focusManagerProps = {
     returnFocus: true,
     guards: false,
@@ -419,7 +424,8 @@ var DragPopover = memo(function DragPopover2({
   autoSize = true,
   rememberPosition = false,
   maxWidth,
-  matchTriggerWidth = false
+  matchTriggerWidth = false,
+  transitionStylesProps
 }) {
   const titleId = useId();
   const descriptionId = useId();
@@ -454,7 +460,8 @@ var DragPopover = memo(function DragPopover2({
     closeOnEscape,
     rememberPosition,
     resetDragState,
-    resetPosition
+    resetPosition,
+    transitionStylesProps
   });
   useEffect(() => {
     if (externalTriggerRef) {
@@ -464,6 +471,15 @@ var DragPopover = memo(function DragPopover2({
   const combinedStyles = useMemo(() => {
     return floating.getStyles(dragState.position, dragState.isDragging);
   }, [floating, dragState.position, dragState.isDragging]);
+  const transitionStyles = useMemo(() => {
+    if (draggable && dragState.isDragging) {
+      return { ...floating.styles, transition: "none" };
+    }
+    if (floating.styles.transition) {
+      return { ...floating.styles, transition: floating.styles.transition };
+    }
+    return floating.styles;
+  }, [floating.styles, draggable, dragState.isDragging]);
   const handleFloatingRef = useCallback(
     (node) => {
       floating.refs.setFloating(node);
@@ -534,7 +550,6 @@ var DragPopover = memo(function DragPopover2({
       externalTriggerRef,
       draggable,
       handleDragStart
-      // titleId, descriptionId, dragContentRef 是稳定的，移除
     ]
   );
   return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: /* @__PURE__ */ jsxs(PopoverContext.Provider, { value: contextValue, children: [
@@ -542,7 +557,6 @@ var DragPopover = memo(function DragPopover2({
     /* @__PURE__ */ jsx(
       FloatingFocusManager,
       {
-        initialFocus,
         ...focusManagerProps,
         context: floating.context,
         children: /* @__PURE__ */ jsx(
@@ -550,7 +564,7 @@ var DragPopover = memo(function DragPopover2({
           {
             id: portalId,
             root,
-            children: floating.innerOpen && /* @__PURE__ */ jsxs(
+            children: floating.innerOpen && floating.isMounted && /* @__PURE__ */ jsx("div", { style: transitionStyles, children: /* @__PURE__ */ jsxs(
               Modal,
               {
                 ref: handleFloatingRef,
@@ -571,7 +585,7 @@ var DragPopover = memo(function DragPopover2({
                   footerContent
                 ]
               }
-            )
+            ) })
           }
         )
       }

package/dist/components/popover/src/hooks/use-floating-popover.d.ts

@@ -1,4 +1,4 @@
-import { FloatingContext, Placement, ReferenceType } from '@floating-ui/react';
+import { FloatingContext, OffsetOptions, Placement, ReferenceType, UseTransitionStylesProps } from '@floating-ui/react';
 import { RefObject } from 'react';
 interface UseFloatingPopoverReturn {
     context: FloatingContext;
@@ -12,6 +12,7 @@ interface UseFloatingPopoverReturn {
     handleTriggerRef: (triggerRef: RefObject<HTMLElement | null>) => void;
     innerOpen: boolean;
     isClosing: boolean;
+    isMounted: boolean;
     positionReady: boolean;
     refs: {
         floating: React.MutableRefObject<HTMLElement | null>;
@@ -26,6 +27,7 @@ interface UseFloatingPopoverReturn {
     }>;
     x: number | null;
     y: number | null;
+    styles: React.CSSProperties;
 }
 interface UseFloatingPopoverParams {
     autoSize?: boolean;
@@ -41,7 +43,7 @@ interface UseFloatingPopoverParams {
     matchTriggerWidth?: boolean;
     maxWidth?: number;
     nodeId: string | undefined;
-    offset?: number;
+    offset?: OffsetOptions;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
     outsidePressIgnore?: string | string[] | boolean;
@@ -49,6 +51,7 @@ interface UseFloatingPopoverParams {
     rememberPosition?: boolean;
     resetDragState: () => void;
     resetPosition: () => void;
+    transitionStylesProps?: UseTransitionStylesProps;
 }
-export declare function useFloatingPopover({ open, defaultOpen, onOpenChange, placement, offset: offsetDistance, interactions, outsidePressIgnore, delay, autoUpdate, closeOnEscape, draggable, nodeId, resetDragState, resetPosition, rememberPosition, autoSize, maxWidth: maxWidthValue, matchTriggerWidth, }: UseFloatingPopoverParams): UseFloatingPopoverReturn;
+export declare function useFloatingPopover({ open, defaultOpen, onOpenChange, placement, offset: offsetDistance, interactions, outsidePressIgnore, delay, autoUpdate, closeOnEscape, draggable, nodeId, resetDragState, resetPosition, rememberPosition, autoSize, maxWidth: maxWidthValue, matchTriggerWidth, transitionStylesProps, }: UseFloatingPopoverParams): UseFloatingPopoverReturn;
 export {};

package/dist/components/popover/src/hooks/use-floating-popover.js

@@ -1,4 +1,4 @@
-import { offset, flip, shift, size, useFloating, autoUpdate, useHover, safePolygon, useClick, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
+import { offset, flip, shift, size, useFloating, autoUpdate, useTransitionStyles, useHover, safePolygon, useClick, useFocus, useDismiss, useRole, useInteractions } from "@floating-ui/react";
 import { useState, useRef, useMemo, useEffect, useCallback } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { useMergedValue } from "../../../../shared/hooks/use-merged-value/use-merged-value.js";
@@ -7,7 +7,7 @@ function useFloatingPopover({
   defaultOpen,
   onOpenChange,
   placement = "bottom",
-  offset: offsetDistance = 8,
+  offset: offsetDistance = { mainAxis: 8, crossAxis: 0 },
   interactions = "click",
   outsidePressIgnore,
   delay,
@@ -20,7 +20,10 @@ function useFloatingPopover({
   rememberPosition = false,
   autoSize = true,
   maxWidth: maxWidthValue = 320,
-  matchTriggerWidth = false
+  matchTriggerWidth = false,
+  transitionStylesProps = {
+    duration: 0
+  }
 }) {
   const [isClosing, setIsClosing] = useState(false);
   const positionRef = useRef({ x: 0, y: 0 });
@@ -80,6 +83,7 @@ function useFloatingPopover({
     middleware,
     whileElementsMounted: autoUpdate$1 ? autoUpdate : void 0
   });
+  const { isMounted, styles } = useTransitionStyles(context, transitionStylesProps);
   useEffect(() => {
     if (innerOpen && isPositioned && x !== null && y !== null) {
       positionRef.current = { x, y };
@@ -192,7 +196,9 @@ function useFloatingPopover({
     getStyles,
     handleClose,
     handleTriggerRef,
-    isClosing
+    isClosing,
+    isMounted,
+    styles
   };
 }
 export {

package/dist/components/popover/src/popover.d.ts

@@ -1,5 +1,5 @@
 import { ModalContent, ModalFooter } from '../../modal/src';
-import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
+import { FloatingFocusManagerProps, OffsetOptions, Placement, UseTransitionStylesProps } from '@floating-ui/react';
 import { default as React } from 'react';
 import { PopoverHeader, PopoverTrigger } from './components';
 export interface PopoverProps {
@@ -16,14 +16,10 @@ export interface PopoverProps {
     };
     draggable?: boolean;
     focusManagerProps?: Partial<FloatingFocusManagerProps>;
-    /**
-     * @deprecated use focusManagerProps.initialFocus instead
-     */
-    initialFocus?: number | React.MutableRefObject<HTMLElement | null>;
     interactions?: "hover" | "click" | "focus" | "none";
     matchTriggerWidth?: boolean;
     maxWidth?: number;
-    offset?: number;
+    offset?: OffsetOptions;
     onOpenChange?: (isOpen: boolean) => void;
     open?: boolean;
     outsidePressIgnore?: string | string[] | boolean;
@@ -37,6 +33,7 @@ export interface PopoverProps {
      */
     root?: HTMLElement | null;
     triggerRef?: React.RefObject<HTMLElement>;
+    transitionStylesProps?: UseTransitionStylesProps;
 }
 export declare const DragPopover: React.NamedExoticComponent<PopoverProps>;
 interface PopoverComponent extends React.FC<PopoverProps> {

package/dist/components/popover/src/popover.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Slot } from "../../slot/dist/index.js";
 import { Modal, ModalFooter, ModalContent } from "../../modal/dist/index.js";
+import { Slot } from "../../slot/dist/index.js";
 import { useFloatingNodeId, FloatingNode, FloatingFocusManager, FloatingPortal, useFloatingParentNodeId, FloatingTree } from "@floating-ui/react";
 import { memo, useId, useRef, useEffect, useMemo, useCallback } from "react";
 import { PopoverContext } from "./popover-context.js";
@@ -20,7 +20,7 @@ const DragPopover = memo(function DragPopover2({
   draggable = false,
   placement = "bottom",
   interactions = "click",
-  offset: offsetDistance = DEFAULT_OFFSET,
+  offset: offsetDistance = { mainAxis: DEFAULT_OFFSET, crossAxis: 0 },
   open,
   onOpenChange,
   defaultOpen,
@@ -28,7 +28,6 @@ const DragPopover = memo(function DragPopover2({
   closeOnEscape = true,
   contentRef,
   delay,
-  initialFocus,
   focusManagerProps = {
     returnFocus: true,
     guards: false,
@@ -40,7 +39,8 @@ const DragPopover = memo(function DragPopover2({
   autoSize = true,
   rememberPosition = false,
   maxWidth,
-  matchTriggerWidth = false
+  matchTriggerWidth = false,
+  transitionStylesProps
 }) {
   const titleId = useId();
   const descriptionId = useId();
@@ -75,7 +75,8 @@ const DragPopover = memo(function DragPopover2({
     closeOnEscape,
     rememberPosition,
     resetDragState,
-    resetPosition
+    resetPosition,
+    transitionStylesProps
   });
   useEffect(() => {
     if (externalTriggerRef) {
@@ -85,6 +86,15 @@ const DragPopover = memo(function DragPopover2({
   const combinedStyles = useMemo(() => {
     return floating.getStyles(dragState.position, dragState.isDragging);
   }, [floating, dragState.position, dragState.isDragging]);
+  const transitionStyles = useMemo(() => {
+    if (draggable && dragState.isDragging) {
+      return { ...floating.styles, transition: "none" };
+    }
+    if (floating.styles.transition) {
+      return { ...floating.styles, transition: floating.styles.transition };
+    }
+    return floating.styles;
+  }, [floating.styles, draggable, dragState.isDragging]);
   const handleFloatingRef = useCallback(
     (node) => {
       floating.refs.setFloating(node);
@@ -155,7 +165,6 @@ const DragPopover = memo(function DragPopover2({
       externalTriggerRef,
       draggable,
       handleDragStart
-      // titleId, descriptionId, dragContentRef 是稳定的，移除
     ]
   );
   return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: /* @__PURE__ */ jsxs(PopoverContext.Provider, { value: contextValue, children: [
@@ -163,7 +172,6 @@ const DragPopover = memo(function DragPopover2({
     /* @__PURE__ */ jsx(
       FloatingFocusManager,
       {
-        initialFocus,
         ...focusManagerProps,
         context: floating.context,
         children: /* @__PURE__ */ jsx(
@@ -171,7 +179,7 @@ const DragPopover = memo(function DragPopover2({
           {
             id: portalId,
             root,
-            children: floating.innerOpen && /* @__PURE__ */ jsxs(
+            children: floating.innerOpen && floating.isMounted && /* @__PURE__ */ jsx("div", { style: transitionStyles, children: /* @__PURE__ */ jsxs(
               Modal,
               {
                 ref: handleFloatingRef,
@@ -192,7 +200,7 @@ const DragPopover = memo(function DragPopover2({
                   footerContent
                 ]
               }
-            )
+            ) })
           }
         )
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",