@tecsinapse/cortex-react 1.5.3 → 1.5.4

package/dist/cjs/components/DatePicker/Content.js

@@ -1,21 +1,9 @@
 'use strict';
 
 var React = require('react');
-require('@internationalized/date');
-require('react-aria');
-require('react-stately');
-require('@floating-ui/react');
-require('currency.js');
-var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
-var Context = require('../Popover/Context.js');
 
 const Content = ({ children }) => {
-  const { setIsOpen } = Context.usePopoverContext();
   const ref = React.useRef(null);
-  useOutsideClickListener.useOutsideClickListener({
-    ref,
-    onClickOutside: () => setIsOpen(false)
-  });
   return /* @__PURE__ */ React.createElement("div", { ref }, children);
 };
 

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

@@ -3,16 +3,27 @@
 var clsx = require('clsx');
 var React = require('react');
 var Context = require('./Context.js');
+var react = require('@floating-ui/react');
 
 const PopoverContent = ({
   children,
   className
 }) => {
-  const { isOpen, x, y, strategy, floatingStyles, refs } = Context.usePopoverContext();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(
+  const {
+    isOpen,
+    x,
+    y,
+    strategy,
+    floatingStyles,
+    refs,
+    getFloatingProps,
+    context
+  } = Context.usePopoverContext();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen && /* @__PURE__ */ React.createElement(react.FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: refs.setFloating,
+      ...getFloatingProps(),
       className: clsx(
         "border border-gray-200 bg-black p-[0px] rounded-md shadow-lg z-popover",
         className
@@ -25,7 +36,7 @@ const PopoverContent = ({
       }
     },
     children
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  )));
 };
 
 exports.PopoverContent = PopoverContent;

package/dist/cjs/components/Select/Content.js

@@ -2,21 +2,9 @@
 
 var clsx = require('clsx');
 var React = require('react');
-require('@internationalized/date');
-require('react-aria');
-require('react-stately');
-require('@floating-ui/react');
-require('currency.js');
-var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
-var Context = require('../Popover/Context.js');
 
 const Content = ({ children, className }) => {
-  const { setIsOpen } = Context.usePopoverContext();
   const ref = React.useRef(null);
-  useOutsideClickListener.useOutsideClickListener({
-    ref,
-    onClickOutside: () => setIsOpen(false)
-  });
   return /* @__PURE__ */ React.createElement("div", { className: clsx("w-full relative", className), ref }, children);
 };
 

package/dist/cjs/hooks/useFloatingLogic.js

@@ -13,6 +13,8 @@ const useFloatingLogic = ({
     {
       placement,
       whileElementsMounted: react.autoUpdate,
+      open: isOpen,
+      onOpenChange: setIsOpen,
       middleware: [
         react.offset(10),
         react.flip({
@@ -24,6 +26,14 @@ const useFloatingLogic = ({
       ]
     }
   );
+  const click = react.useClick(context);
+  const dismiss = react.useDismiss(context);
+  const role = react.useRole(context);
+  const { getReferenceProps, getFloatingProps } = react.useInteractions([
+    click,
+    dismiss,
+    role
+  ]);
   React.useEffect(() => {
     if (isOpen) update();
   }, [isOpen, update]);
@@ -35,7 +45,8 @@ const useFloatingLogic = ({
     },
     ...trigger === "click" && {
       onClick: () => setIsOpen((prev) => !prev)
-    }
+    },
+    ...getReferenceProps()
   };
   return {
     isOpen,
@@ -46,7 +57,9 @@ const useFloatingLogic = ({
     refs,
     context,
     floatingStyles,
-    triggerProps
+    triggerProps,
+    getReferenceProps,
+    getFloatingProps
   };
 };
 

package/dist/esm/components/DatePicker/Content.js

@@ -1,19 +1,7 @@
 import React__default, { useRef } from 'react';
-import '@internationalized/date';
-import 'react-aria';
-import 'react-stately';
-import '@floating-ui/react';
-import 'currency.js';
-import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
-import { usePopoverContext } from '../Popover/Context.js';
 
 const Content = ({ children }) => {
-  const { setIsOpen } = usePopoverContext();
   const ref = useRef(null);
-  useOutsideClickListener({
-    ref,
-    onClickOutside: () => setIsOpen(false)
-  });
   return /* @__PURE__ */ React__default.createElement("div", { ref }, children);
 };
 

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

@@ -1,16 +1,27 @@
 import clsx from 'clsx';
 import React__default from 'react';
 import { usePopoverContext } from './Context.js';
+import { FloatingFocusManager } from '@floating-ui/react';
 
 const PopoverContent = ({
   children,
   className
 }) => {
-  const { isOpen, x, y, strategy, floatingStyles, refs } = usePopoverContext();
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isOpen ? /* @__PURE__ */ React__default.createElement(
+  const {
+    isOpen,
+    x,
+    y,
+    strategy,
+    floatingStyles,
+    refs,
+    getFloatingProps,
+    context
+  } = usePopoverContext();
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isOpen && /* @__PURE__ */ React__default.createElement(FloatingFocusManager, { context, modal: true }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       ref: refs.setFloating,
+      ...getFloatingProps(),
       className: clsx(
         "border border-gray-200 bg-black p-[0px] rounded-md shadow-lg z-popover",
         className
@@ -23,7 +34,7 @@ const PopoverContent = ({
       }
     },
     children
-  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+  )));
 };
 
 export { PopoverContent };

package/dist/esm/components/Select/Content.js

@@ -1,20 +1,8 @@
 import clsx from 'clsx';
 import React__default, { useRef } from 'react';
-import '@internationalized/date';
-import 'react-aria';
-import 'react-stately';
-import '@floating-ui/react';
-import 'currency.js';
-import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
-import { usePopoverContext } from '../Popover/Context.js';
 
 const Content = ({ children, className }) => {
-  const { setIsOpen } = usePopoverContext();
   const ref = useRef(null);
-  useOutsideClickListener({
-    ref,
-    onClickOutside: () => setIsOpen(false)
-  });
   return /* @__PURE__ */ React__default.createElement("div", { className: clsx("w-full relative", className), ref }, children);
 };
 

package/dist/esm/hooks/useFloatingLogic.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useFloating, autoUpdate, offset, flip, shift, arrow } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, flip, shift, arrow, useClick, useDismiss, useRole, useInteractions } from '@floating-ui/react';
 
 const useFloatingLogic = ({
   placement,
@@ -11,6 +11,8 @@ const useFloatingLogic = ({
     {
       placement,
       whileElementsMounted: autoUpdate,
+      open: isOpen,
+      onOpenChange: setIsOpen,
       middleware: [
         offset(10),
         flip({
@@ -22,6 +24,14 @@ const useFloatingLogic = ({
       ]
     }
   );
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    click,
+    dismiss,
+    role
+  ]);
   useEffect(() => {
     if (isOpen) update();
   }, [isOpen, update]);
@@ -33,7 +43,8 @@ const useFloatingLogic = ({
     },
     ...trigger === "click" && {
       onClick: () => setIsOpen((prev) => !prev)
-    }
+    },
+    ...getReferenceProps()
   };
   return {
     isOpen,
@@ -44,7 +55,9 @@ const useFloatingLogic = ({
     refs,
     context,
     floatingStyles,
-    triggerProps
+    triggerProps,
+    getReferenceProps,
+    getFloatingProps
   };
 };
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Placement } from '@floating-ui/react';
+import { FloatingContext, Placement, UseInteractionsReturn } from '@floating-ui/react';
 interface ContextProps {
     triggerProps?: any;
     refs?: any;
@@ -12,6 +12,9 @@ interface ContextProps {
     placement?: Placement;
     setPlacement?: React.Dispatch<React.SetStateAction<Placement | undefined>>;
     setTrigger?: React.Dispatch<React.SetStateAction<'hover' | 'click'>>;
+    getReferenceProps: UseInteractionsReturn['getReferenceProps'];
+    getFloatingProps: UseInteractionsReturn['getFloatingProps'];
+    context: FloatingContext;
 }
 export declare const Context: React.Context<ContextProps | undefined>;
 export declare const usePopoverContext: () => ContextProps;

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

@@ -42,5 +42,7 @@ export declare const useFloatingLogic: ({ placement, trigger, arrowRef, }: Float
         onMouseLeave?: (() => void) | undefined;
         ref: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
     };
+    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.5.3",
+  "version": "1.5.4",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -45,5 +45,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "86b8794105cbdf611c6f54784f028cb73f5947b3"
+  "gitHead": "331072b5da891409d0d7bd89df4a86e4d77dd8b8"
 }