@tecsinapse/cortex-react 1.7.5 → 1.7.6

package/dist/cjs/components/Popover/Provider.js

@@ -13,9 +13,10 @@ var Context = require('./Context.js');
 const PopoverProvider = ({
   children,
   placement,
-  trigger
+  trigger,
+  ...props
 }) => {
-  const floatingLogic = useFloatingElement.useFloatingElement({ placement, trigger });
+  const floatingLogic = useFloatingElement.useFloatingElement({ placement, trigger, ...props });
   return /* @__PURE__ */ React.createElement(Context.Context.Provider, { value: { ...floatingLogic } }, children);
 };
 

package/dist/cjs/components/Popover/Root.js

@@ -6,9 +6,10 @@ var Provider = require('./Provider.js');
 const PopoverRoot = ({
   children,
   placement,
-  trigger
+  trigger,
+  ...props
 }) => {
-  return /* @__PURE__ */ React.createElement(Provider.PopoverProvider, { placement, trigger }, children);
+  return /* @__PURE__ */ React.createElement(Provider.PopoverProvider, { placement, trigger, ...props }, children);
 };
 
 exports.PopoverRoot = PopoverRoot;

package/dist/cjs/hooks/useFloatingElement.js

@@ -7,15 +7,18 @@ const useFloatingElement = ({
   placement,
   trigger,
   delay,
-  arrowRef
+  arrowRef,
+  controlled,
+  isOpen,
+  setIsOpen
 }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [openUncontrolled, onOpenChangeUncontrolled] = React.useState(false);
   const { x, y, strategy, refs, update, context, floatingStyles } = react.useFloating(
     {
       placement,
       whileElementsMounted: react.autoUpdate,
-      open: isOpen,
-      onOpenChange: setIsOpen,
+      open: controlled ? isOpen : openUncontrolled,
+      onOpenChange: controlled ? setIsOpen : onOpenChangeUncontrolled,
       middleware: [
         react.offset(10),
         react.flip({
@@ -38,15 +41,16 @@ const useFloatingElement = ({
     hover
   ]);
   React.useEffect(() => {
-    if (isOpen) update();
-  }, [isOpen, update]);
+    if (controlled && isOpen) update();
+    else if (openUncontrolled) update();
+  }, [openUncontrolled, update, isOpen]);
   const triggerProps = {
     ref: refs.setReference,
     ...getReferenceProps()
   };
   return {
-    isOpen,
-    setIsOpen,
+    isOpen: controlled ? isOpen : openUncontrolled,
+    setIsOpen: controlled ? setIsOpen : onOpenChangeUncontrolled,
     x,
     y,
     strategy,

package/dist/esm/components/Popover/Provider.js

@@ -11,9 +11,10 @@ import { Context } from './Context.js';
 const PopoverProvider = ({
   children,
   placement,
-  trigger
+  trigger,
+  ...props
 }) => {
-  const floatingLogic = useFloatingElement({ placement, trigger });
+  const floatingLogic = useFloatingElement({ placement, trigger, ...props });
   return /* @__PURE__ */ React__default.createElement(Context.Provider, { value: { ...floatingLogic } }, children);
 };
 

package/dist/esm/components/Popover/Root.js

@@ -4,9 +4,10 @@ import { PopoverProvider } from './Provider.js';
 const PopoverRoot = ({
   children,
   placement,
-  trigger
+  trigger,
+  ...props
 }) => {
-  return /* @__PURE__ */ React__default.createElement(PopoverProvider, { placement, trigger }, children);
+  return /* @__PURE__ */ React__default.createElement(PopoverProvider, { placement, trigger, ...props }, children);
 };
 
 export { PopoverRoot };

package/dist/esm/hooks/useFloatingElement.js

@@ -5,15 +5,18 @@ const useFloatingElement = ({
   placement,
   trigger,
   delay,
-  arrowRef
+  arrowRef,
+  controlled,
+  isOpen,
+  setIsOpen
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [openUncontrolled, onOpenChangeUncontrolled] = useState(false);
   const { x, y, strategy, refs, update, context, floatingStyles } = useFloating(
     {
       placement,
       whileElementsMounted: autoUpdate,
-      open: isOpen,
-      onOpenChange: setIsOpen,
+      open: controlled ? isOpen : openUncontrolled,
+      onOpenChange: controlled ? setIsOpen : onOpenChangeUncontrolled,
       middleware: [
         offset(10),
         flip({
@@ -36,15 +39,16 @@ const useFloatingElement = ({
     hover
   ]);
   useEffect(() => {
-    if (isOpen) update();
-  }, [isOpen, update]);
+    if (controlled && isOpen) update();
+    else if (openUncontrolled) update();
+  }, [openUncontrolled, update, isOpen]);
   const triggerProps = {
     ref: refs.setReference,
     ...getReferenceProps()
   };
   return {
-    isOpen,
-    setIsOpen,
+    isOpen: controlled ? isOpen : openUncontrolled,
+    setIsOpen: controlled ? setIsOpen : onOpenChangeUncontrolled,
     x,
     y,
     strategy,

package/dist/types/components/Popover/Provider.d.ts

@@ -1,8 +1,17 @@
 import { Placement } from '@floating-ui/react';
-import { ReactNode } from 'react';
-export interface PopoverProviderProps {
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+export interface ControlledProps {
+    controlled: true;
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+}
+export interface UncontrolledProviderProps {
     children: ReactNode;
     placement?: Placement;
     trigger?: 'hover' | 'click';
+    controlled?: false;
+}
+export interface ControlledPopoverProviderProps extends Omit<UncontrolledProviderProps, 'controlled'>, ControlledProps {
 }
-export declare const PopoverProvider: ({ children, placement, trigger, }: PopoverProviderProps) => JSX.Element;
+export type PopoverProviderProps = UncontrolledProviderProps | ControlledPopoverProviderProps;
+export declare const PopoverProvider: ({ children, placement, trigger, ...props }: PopoverProviderProps) => JSX.Element;

package/dist/types/components/Popover/Root.d.ts

@@ -1,8 +1,13 @@
 import React from 'react';
 import { Placement } from '@floating-ui/react';
-export interface PopoverRootProps {
+import { ControlledProps } from './Provider';
+export interface UncontrolledPopoverProps {
     children: React.ReactNode;
     placement?: Placement;
     trigger?: 'hover' | 'click';
+    controlled?: false;
 }
-export declare const PopoverRoot: ({ children, placement, trigger, }: PopoverRootProps) => JSX.Element;
+export interface ControlledPopoverProps extends Omit<UncontrolledPopoverProps, 'controlled'>, ControlledProps {
+}
+export type PopoverRootProps = UncontrolledPopoverProps | ControlledPopoverProps;
+export declare const PopoverRoot: ({ children, placement, trigger, ...props }: PopoverRootProps) => JSX.Element;

package/dist/types/components/Popover/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const Popover: {
-    Root: ({ children, placement, trigger, }: import("./Root").PopoverRootProps) => JSX.Element;
+    Root: ({ children, placement, trigger, ...props }: import("./Root").PopoverRootProps) => JSX.Element;
     Trigger: ({ children }: import("./Trigger").PopoverTriggerProps) => import("react").FunctionComponentElement<any>;
     Content: ({ children, className, }: import("./Content").PopoverContentProps) => JSX.Element;
-    Provider: ({ children, placement, trigger, }: import("./Provider").PopoverProviderProps) => JSX.Element;
+    Provider: ({ children, placement, trigger, ...props }: import("./Provider").PopoverProviderProps) => JSX.Element;
 };

package/dist/types/hooks/useFloatingElement.d.ts

@@ -1,18 +1,21 @@
 import { Placement } from '@floating-ui/react';
-import { RefObject } from 'react';
+import { Dispatch, RefObject, SetStateAction } from 'react';
 export type Delay = number | {
     open?: number;
     close?: number;
 };
-interface FloatingElementProps {
+export interface FloatingElementProps {
     placement?: Placement;
     trigger?: 'hover' | 'click';
     delay?: Delay;
     arrowRef?: RefObject<SVGSVGElement>;
+    controlled?: boolean;
+    isOpen?: boolean;
+    setIsOpen?: Dispatch<SetStateAction<boolean>> | undefined;
 }
-export declare const useFloatingElement: ({ placement, trigger, delay, arrowRef, }: FloatingElementProps) => {
+export declare const useFloatingElement: ({ placement, trigger, delay, arrowRef, controlled, isOpen, setIsOpen, }: FloatingElementProps) => {
     isOpen: boolean;
-    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
     x: number;
     y: number;
     strategy: import("@floating-ui/utils").Strategy;
@@ -47,4 +50,3 @@ export declare const useFloatingElement: ({ placement, trigger, delay, arrowRef,
     getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
 };
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -48,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "35af1bb9152d1f2824748e14e1d68f6a6ee4e889"
+  "gitHead": "47608580c72ce679a690ab44f7cc33c916f26df8"
 }