@choice-ui/react 1.6.6 → 1.6.7

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

@@ -41,6 +41,11 @@ interface PopoverProps extends Omit<React__default.HTMLAttributes<HTMLElement>,
      */
     root?: HTMLElement | null;
     triggerRef?: React__default.RefObject<HTMLElement>;
+    /**
+     * CSS selector string to find the trigger element in the DOM.
+     * Alternative to triggerRef for cases where you want to use a selector instead of a ref.
+     */
+    triggerSelector?: string;
 }
 interface PopoverComponent extends React__default.FC<PopoverProps> {
     Content: typeof ModalContent;

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

@@ -221,7 +221,8 @@ function useFloatingPopover({
   matchTriggerWidth = false,
   transitionStylesProps = {
     duration: 0
-  }
+  },
+  triggerSelector
 }) {
   const [isClosing, setIsClosing] = useState(false);
   const positionRef = useRef({ x: 0, y: 0 });
@@ -385,6 +386,22 @@ function useFloatingPopover({
     },
     [refs]
   );
+  const isOpenRef = useRef(innerOpen);
+  isOpenRef.current = innerOpen;
+  useEffect(() => {
+    if (!triggerSelector) return;
+    const element = document.querySelector(triggerSelector);
+    if (!element) return;
+    refs.setReference(element);
+    const handleClick = (e) => {
+      e.preventDefault();
+      handleOpenChange(!isOpenRef.current);
+    };
+    element.addEventListener("click", handleClick);
+    return () => {
+      element.removeEventListener("click", handleClick);
+    };
+  }, [triggerSelector, refs, handleOpenChange]);
   return {
     refs,
     triggerRefs,
@@ -409,6 +426,7 @@ var DragPopover = memo(function DragPopover2({
   className,
   children,
   triggerRef: externalTriggerRef,
+  triggerSelector,
   draggable = false,
   placement = "bottom",
   interactions = "click",
@@ -467,7 +485,8 @@ var DragPopover = memo(function DragPopover2({
     closeOnEscape,
     rememberPosition,
     resetDragState,
-    resetPosition
+    resetPosition,
+    triggerSelector
   });
   useEffect(() => {
     if (externalTriggerRef) {

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

@@ -50,6 +50,7 @@ interface UseFloatingPopoverParams {
     resetDragState: () => void;
     resetPosition: () => void;
     transitionStylesProps?: UseTransitionStylesProps;
+    triggerSelector?: string;
 }
-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 declare function useFloatingPopover({ open, defaultOpen, onOpenChange, placement, offset: offsetDistance, interactions, outsidePressIgnore, delay, autoUpdate, closeOnEscape, draggable, nodeId, resetDragState, resetPosition, rememberPosition, autoSize, maxWidth: maxWidthValue, matchTriggerWidth, transitionStylesProps, triggerSelector, }: UseFloatingPopoverParams): UseFloatingPopoverReturn;
 export {};

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

@@ -23,7 +23,8 @@ function useFloatingPopover({
   matchTriggerWidth = false,
   transitionStylesProps = {
     duration: 0
-  }
+  },
+  triggerSelector
 }) {
   const [isClosing, setIsClosing] = useState(false);
   const positionRef = useRef({ x: 0, y: 0 });
@@ -187,6 +188,22 @@ function useFloatingPopover({
     },
     [refs]
   );
+  const isOpenRef = useRef(innerOpen);
+  isOpenRef.current = innerOpen;
+  useEffect(() => {
+    if (!triggerSelector) return;
+    const element = document.querySelector(triggerSelector);
+    if (!element) return;
+    refs.setReference(element);
+    const handleClick = (e) => {
+      e.preventDefault();
+      handleOpenChange(!isOpenRef.current);
+    };
+    element.addEventListener("click", handleClick);
+    return () => {
+      element.removeEventListener("click", handleClick);
+    };
+  }, [triggerSelector, refs, handleOpenChange]);
   return {
     refs,
     triggerRefs,

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

@@ -34,6 +34,11 @@ export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLElement>, "t
      */
     root?: HTMLElement | null;
     triggerRef?: React.RefObject<HTMLElement>;
+    /**
+     * CSS selector string to find the trigger element in the DOM.
+     * Alternative to triggerRef for cases where you want to use a selector instead of a ref.
+     */
+    triggerSelector?: string;
 }
 export declare const DragPopover: React.NamedExoticComponent<PopoverProps>;
 interface PopoverComponent extends React.FC<PopoverProps> {

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

@@ -18,6 +18,7 @@ const DragPopover = memo(function DragPopover2({
   className,
   children,
   triggerRef: externalTriggerRef,
+  triggerSelector,
   draggable = false,
   placement = "bottom",
   interactions = "click",
@@ -76,7 +77,8 @@ const DragPopover = memo(function DragPopover2({
     closeOnEscape,
     rememberPosition,
     resetDragState,
-    resetPosition
+    resetPosition,
+    triggerSelector
   });
   useEffect(() => {
     if (externalTriggerRef) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",
@@ -60,7 +60,7 @@
     "remark-math": "^6.0.0",
     "harden-react-markdown": "^1.0.4",
     "shiki": "^3.9.2",
-    "@choice-ui/design-tokens": "0.2.12"
+    "@choice-ui/design-tokens": "0.2.13"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",