@tecsinapse/cortex-react 1.3.0-beta.4 → 1.3.0-beta.6

package/dist/cjs/components/Masonry.js

@@ -39,6 +39,7 @@ const Masonry = ({ children, columns }) => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      "data-testid": "masonry",
       className: "box-border flex w-full flex-row content-stretch justify-center"
     },
     renderColumns()

package/dist/cjs/components/Menubar/Dropdown.js

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var MenubarProvider = require('../../provider/MenubarProvider.js');
 require('../../provider/SnackbarProvider.js');
 
+const { dropdown } = menubar.menubar();
 const Dropdown = ({ children, ...rest }) => {
-  const { dropdown } = menubar.menubar();
   const [show] = MenubarProvider.useMenubar();
   return /* @__PURE__ */ React.createElement(
     "div",

package/dist/cjs/components/Menubar/ItemLink.js

@@ -8,7 +8,7 @@ const ItemLink = ({ href, children, classNameAnchor }) => {
     {
       href,
       target: "_blank",
-      rel: "noreferrer",
+      rel: "noopener noreferrer",
       className: classNameAnchor
     },
     children

package/dist/cjs/components/Menubar/MostUsedList.js

@@ -30,23 +30,23 @@ require('../../styles/groupButton.js');
 require('../../styles/progressBar.js');
 require('../Select/GroupedOptions.js');
 require('../Select/context.js');
-require('../Select/Popover.js');
+require('../Popover/Context.js');
 require('../Select/Trigger.js');
 require('../Tag.js');
 require('../TextArea.js');
 require('../Toggle.js');
 require('../Tooltip.js');
-require('../Popover/PopoverContext.js');
 var index = require('./index.js');
 
 const MostUsedList = ({ mostUsed }) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, (mostUsed ?? []).map((item, index$1) => {
     const { title, category, ...rest } = item;
-    if (index$1 > 3) return /* @__PURE__ */ React.createElement(React.Fragment, null);
+    if (index$1 > 3)
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: `${title}-${category}` });
     return /* @__PURE__ */ React.createElement(
       index.Menubar.MostUsedItem,
       {
-        key: title,
+        key: `${title}-${category}`,
         title,
         category,
         ...rest

package/dist/cjs/components/Popover/{PopoverContent.js → Content.js}

@@ -2,16 +2,19 @@
 
 var React = require('react');
 var clsx = require('clsx');
-var PopoverContext = require('./PopoverContext.js');
+var Context = require('./Context.js');
 
-const PopoverContent = ({ children, className }) => {
-  const { isOpen, x, y, strategy, floatingStyles, refs } = PopoverContext.usePopoverContext();
+const PopoverContent = ({
+  children,
+  className
+}) => {
+  const { isOpen, x, y, strategy, floatingStyles, refs } = Context.usePopoverContext();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: refs.setFloating,
       className: clsx(
-        "border border-gray-200 bg-black text-white p-4 rounded-md shadow-lg z-50",
+        "border border-gray-200 bg-black  p-4 rounded-md shadow-lg z-50",
         className
       ),
       style: {
@@ -25,4 +28,4 @@ const PopoverContent = ({ children, className }) => {
   ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
 };
 
-module.exports = PopoverContent;
+exports.PopoverContent = PopoverContent;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+
+const Context = React.createContext(void 0);
+const usePopoverContext = () => {
+  const context = React.useContext(Context);
+  if (!context) {
+    throw new Error("usePopoverContext must be used within a PopoverProvider");
+  }
+  return context;
+};
+
+exports.Context = Context;
+exports.usePopoverContext = usePopoverContext;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useFloatingLogic = require('../../hooks/useFloatingLogic.js');
+var Context = require('./Context.js');
+
+const PopoverProvider = ({
+  children,
+  placement,
+  trigger
+}) => {
+  const floatingLogic = useFloatingLogic.useFloatingLogic({ placement, trigger });
+  return /* @__PURE__ */ React.createElement(Context.Context.Provider, { value: { ...floatingLogic } }, children);
+};
+
+exports.PopoverProvider = PopoverProvider;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index.js');
+
+const PopoverRoot = ({
+  children,
+  placement,
+  trigger
+}) => {
+  return /* @__PURE__ */ React.createElement(index.Popover.Provider, { placement, trigger }, children);
+};
+
+exports.PopoverRoot = PopoverRoot;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var Context = require('./Context.js');
+
+const PopoverTrigger = ({ children }) => {
+  const { triggerProps } = Context.usePopoverContext();
+  return React.cloneElement(children, triggerProps);
+};
+
+exports.PopoverTrigger = PopoverTrigger;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+var Content = require('./Content.js');
+var Provider = require('./Provider.js');
+
+const Popover = {
+  Root: Root.PopoverRoot,
+  Trigger: Trigger.PopoverTrigger,
+  Content: Content.PopoverContent,
+  Provider: Provider.PopoverProvider
+};
+
+exports.Popover = Popover;

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

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
+require('@floating-ui/react');
+var Context = require('../Popover/Context.js');
+var context = require('./context.js');
+
+const Content = ({
+  children,
+  keyExtractor,
+  labelExtractor,
+  value
+}) => {
+  const { setIsOpen } = Context.usePopoverContext();
+  const ref = React.useRef(null);
+  useOutsideClickListener.useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children));
+};
+
+module.exports = Content;

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

@@ -4,6 +4,7 @@ var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var index = require('./index.js');
 var context = require('./context.js');
+var Context = require('../Popover/Context.js');
 
 const { groupedTitle, containerGrouped } = cortexCore.selectVariants();
 const SelectGroupedOptions = ({
@@ -11,11 +12,12 @@ const SelectGroupedOptions = ({
   groupedLabelExtractor,
   options
 }) => {
-  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const { keyExtractor } = React.useContext(context.SelectContext);
+  const { setIsOpen } = Context.usePopoverContext();
   const handleSelect = React.useCallback(
     (option) => {
       onSelect(option);
-      setOpen?.(false);
+      setIsOpen?.(false);
     },
     [onSelect]
   );

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

@@ -1,18 +1,20 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index.js');
 var context = require('./context.js');
+var index = require('./index.js');
+var Context = require('../Popover/Context.js');
 
 const SelectOptions = ({
   onSelect,
   options
 }) => {
-  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const { keyExtractor } = React.useContext(context.SelectContext);
+  const { setIsOpen } = Context.usePopoverContext();
   const handleSelect = React.useCallback(
     (option) => {
       onSelect(option);
-      setOpen?.(false);
+      setIsOpen?.(false);
     },
     [onSelect]
   );

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

@@ -1,13 +1,10 @@
 'use strict';
 
-var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
-var context = require('./context.js');
+var index = require('../Popover/index.js');
 
-const { dropdown } = cortexCore.selectVariants();
 const SelectPopover = ({ children }) => {
-  const { open } = React.useContext(context.SelectContext);
-  return /* @__PURE__ */ React.createElement("div", { className: dropdown({ open }), "data-testid": "select-popover" }, children);
+  return /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col" }, children);
 };
 
 exports.SelectPopover = SelectPopover;

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

@@ -1,12 +1,8 @@
 'use strict';
 
 var React = require('react');
-require('@internationalized/date');
-require('react-aria');
-require('react-stately');
-var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
-require('@floating-ui/react');
-var context = require('./context.js');
+var Content = require('./Content.js');
+var index = require('../Popover/index.js');
 
 const SelectRoot = ({
   children,
@@ -14,19 +10,15 @@ const SelectRoot = ({
   keyExtractor,
   labelExtractor
 }) => {
-  const [open, setOpen] = React.useState(false);
-  const ref = React.useRef(null);
-  useOutsideClickListener.useOutsideClickListener({
-    ref,
-    onClickOutside: () => setOpen?.(false)
-  });
-  return /* @__PURE__ */ React.createElement(
-    context.SelectContext.Provider,
+  return /* @__PURE__ */ React.createElement(index.Popover.Provider, null, /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(
+    Content,
     {
-      value: { value, open, setOpen, keyExtractor, labelExtractor }
+      keyExtractor,
+      labelExtractor,
+      value
     },
-    /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children)
-  );
+    children
+  )));
 };
 
 exports.SelectRoot = SelectRoot;

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

@@ -4,25 +4,25 @@ var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var io5 = require('react-icons/io5');
 var context = require('./context.js');
+var index = require('../Popover/index.js');
 
 const { button } = cortexCore.selectVariants();
 const SelectTrigger = ({ label, disabled }) => {
-  const { value, setOpen, labelExtractor, open } = React.useContext(context.SelectContext);
+  const { value, labelExtractor } = React.useContext(context.SelectContext);
   const placeholder = React.useMemo(
     () => value ? labelExtractor(value) : label,
     [label, value]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
     "button",
     {
       className: button({ disabled }),
-      onClick: () => setOpen?.(!open),
       disabled,
       role: "button"
     },
     /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
     /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
-  );
+  ));
 };
 
 exports.SelectTrigger = SelectTrigger;

package/dist/cjs/index.js

@@ -25,8 +25,8 @@ var TextArea = require('./components/TextArea.js');
 var TimeFieldInput = require('./components/TimeFieldInput.js');
 var Toggle = require('./components/Toggle.js');
 require('./components/Tooltip.js');
-var Popover = require('./components/Popover/Popover.js');
-var index$2 = require('./components/Menubar/index.js');
+var index$2 = require('./components/Popover/index.js');
+var index$3 = require('./components/Menubar/index.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');
@@ -72,8 +72,8 @@ exports.Tag = Tag.Tag;
 exports.TextArea = TextArea.TextArea;
 exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
 exports.Toggle = Toggle.Toggle;
-exports.Popover = Popover.Popover;
-exports.Menubar = index$2.Menubar;
+exports.Popover = index$2.Popover;
+exports.Menubar = index$3.Menubar;
 exports.useCalendar = useCalendar.useCalendar;
 exports.useCalendarCell = useCalendarCell.useCalendarCell;
 exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;

package/dist/cjs/provider/SnackbarProvider.js

@@ -31,17 +31,17 @@ require('../styles/groupButton.js');
 require('../styles/progressBar.js');
 require('../components/Select/GroupedOptions.js');
 require('../components/Select/context.js');
-require('../components/Select/Popover.js');
+require('../components/Popover/Context.js');
 require('../components/Select/Trigger.js');
 require('../components/Tag.js');
 require('../components/TextArea.js');
 require('../components/Toggle.js');
 require('../components/Tooltip.js');
-require('../components/Popover/PopoverContext.js');
 require('./MenubarProvider.js');
 require('../components/Menubar/Left.js');
 require('../styles/menubar.js');
 require('../components/Menubar/Right.js');
+require('../components/Menubar/Dropdown.js');
 require('../components/Menubar/MostUsed.js');
 require('../components/Menubar/MostUsedItem.js');
 require('../components/Menubar/Header.js');

package/dist/cjs/service/SnackbarSonner.js

@@ -31,18 +31,18 @@ require('../styles/groupButton.js');
 require('../styles/progressBar.js');
 require('../components/Select/GroupedOptions.js');
 require('../components/Select/context.js');
-require('../components/Select/Popover.js');
+require('../components/Popover/Context.js');
 require('../components/Select/Trigger.js');
 require('../components/Tag.js');
 require('../components/TextArea.js');
 require('../components/Toggle.js');
 require('../components/Tooltip.js');
-require('../components/Popover/PopoverContext.js');
 require('../provider/MenubarProvider.js');
 require('../provider/SnackbarProvider.js');
 require('../components/Menubar/Left.js');
 require('../styles/menubar.js');
 require('../components/Menubar/Right.js');
+require('../components/Menubar/Dropdown.js');
 require('../components/Menubar/MostUsed.js');
 require('../components/Menubar/MostUsedItem.js');
 require('../components/Menubar/Header.js');

package/dist/esm/components/Masonry.js

@@ -37,6 +37,7 @@ const Masonry = ({ children, columns }) => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      "data-testid": "masonry",
       className: "box-border flex w-full flex-row content-stretch justify-center"
     },
     renderColumns()

package/dist/esm/components/Menubar/Dropdown.js

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { useMenubar } from '../../provider/MenubarProvider.js';
 import '../../provider/SnackbarProvider.js';
 
+const { dropdown } = menubar();
 const Dropdown = ({ children, ...rest }) => {
-  const { dropdown } = menubar();
   const [show] = useMenubar();
   return /* @__PURE__ */ React.createElement(
     "div",

package/dist/esm/components/Menubar/ItemLink.js

@@ -6,7 +6,7 @@ const ItemLink = ({ href, children, classNameAnchor }) => {
     {
       href,
       target: "_blank",
-      rel: "noreferrer",
+      rel: "noopener noreferrer",
       className: classNameAnchor
     },
     children

package/dist/esm/components/Menubar/MostUsedList.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import 'clsx';
 import '@internationalized/date';
 import '../Badge.js';
@@ -28,23 +28,23 @@ import '../../styles/groupButton.js';
 import '../../styles/progressBar.js';
 import '../Select/GroupedOptions.js';
 import '../Select/context.js';
-import '../Select/Popover.js';
+import '../Popover/Context.js';
 import '../Select/Trigger.js';
 import '../Tag.js';
 import '../TextArea.js';
 import '../Toggle.js';
 import '../Tooltip.js';
-import '../Popover/PopoverContext.js';
 import { Menubar } from './index.js';
 
 const MostUsedList = ({ mostUsed }) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, (mostUsed ?? []).map((item, index) => {
     const { title, category, ...rest } = item;
-    if (index > 3) return /* @__PURE__ */ React.createElement(React.Fragment, null);
+    if (index > 3)
+      return /* @__PURE__ */ React.createElement(Fragment, { key: `${title}-${category}` });
     return /* @__PURE__ */ React.createElement(
       Menubar.MostUsedItem,
       {
-        key: title,
+        key: `${title}-${category}`,
         title,
         category,
         ...rest

package/dist/esm/components/Popover/{PopoverContent.js → Content.js}

@@ -1,15 +1,18 @@
 import React from 'react';
 import clsx from 'clsx';
-import { usePopoverContext } from './PopoverContext.js';
+import { usePopoverContext } from './Context.js';
 
-const PopoverContent = ({ children, className }) => {
+const PopoverContent = ({
+  children,
+  className
+}) => {
   const { isOpen, x, y, strategy, floatingStyles, refs } = usePopoverContext();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: refs.setFloating,
       className: clsx(
-        "border border-gray-200 bg-black text-white p-4 rounded-md shadow-lg z-50",
+        "border border-gray-200 bg-black  p-4 rounded-md shadow-lg z-50",
         className
       ),
       style: {
@@ -23,4 +26,4 @@ const PopoverContent = ({ children, className }) => {
   ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
 };
 
-export { PopoverContent as default };
+export { PopoverContent };

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

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const Context = createContext(void 0);
+const usePopoverContext = () => {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error("usePopoverContext must be used within a PopoverProvider");
+  }
+  return context;
+};
+
+export { Context, usePopoverContext };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useFloatingLogic } from '../../hooks/useFloatingLogic.js';
+import { Context } from './Context.js';
+
+const PopoverProvider = ({
+  children,
+  placement,
+  trigger
+}) => {
+  const floatingLogic = useFloatingLogic({ placement, trigger });
+  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { ...floatingLogic } }, children);
+};
+
+export { PopoverProvider };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Popover } from './index.js';
+
+const PopoverRoot = ({
+  children,
+  placement,
+  trigger
+}) => {
+  return /* @__PURE__ */ React.createElement(Popover.Provider, { placement, trigger }, children);
+};
+
+export { PopoverRoot };

package/dist/esm/components/Popover/{PopoverTrigger.js → Trigger.js}

@@ -1,9 +1,9 @@
 import React from 'react';
-import { usePopoverContext } from './PopoverContext.js';
+import { usePopoverContext } from './Context.js';
 
 const PopoverTrigger = ({ children }) => {
   const { triggerProps } = usePopoverContext();
   return React.cloneElement(children, triggerProps);
 };
 
-export { PopoverTrigger as default };
+export { PopoverTrigger };

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

@@ -0,0 +1,13 @@
+import { PopoverRoot } from './Root.js';
+import { PopoverTrigger } from './Trigger.js';
+import { PopoverContent } from './Content.js';
+import { PopoverProvider } from './Provider.js';
+
+const Popover = {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Content: PopoverContent,
+  Provider: PopoverProvider
+};
+
+export { Popover };

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

@@ -0,0 +1,25 @@
+import React, { useRef } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
+import '@floating-ui/react';
+import { usePopoverContext } from '../Popover/Context.js';
+import { SelectContext } from './context.js';
+
+const Content = ({
+  children,
+  keyExtractor,
+  labelExtractor,
+  value
+}) => {
+  const { setIsOpen } = usePopoverContext();
+  const ref = useRef(null);
+  useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children));
+};
+
+export { Content as default };

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

@@ -2,6 +2,7 @@ import { selectVariants } from '@tecsinapse/cortex-core';
 import React, { useContext, useCallback } from 'react';
 import { Select } from './index.js';
 import { SelectContext } from './context.js';
+import { usePopoverContext } from '../Popover/Context.js';
 
 const { groupedTitle, containerGrouped } = selectVariants();
 const SelectGroupedOptions = ({
@@ -9,11 +10,12 @@ const SelectGroupedOptions = ({
   groupedLabelExtractor,
   options
 }) => {
-  const { setOpen, keyExtractor } = useContext(SelectContext);
+  const { keyExtractor } = useContext(SelectContext);
+  const { setIsOpen } = usePopoverContext();
   const handleSelect = useCallback(
     (option) => {
       onSelect(option);
-      setOpen?.(false);
+      setIsOpen?.(false);
     },
     [onSelect]
   );

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

@@ -1,16 +1,18 @@
 import React, { useContext, useCallback } from 'react';
-import { Select } from './index.js';
 import { SelectContext } from './context.js';
+import { Select } from './index.js';
+import { usePopoverContext } from '../Popover/Context.js';
 
 const SelectOptions = ({
   onSelect,
   options
 }) => {
-  const { setOpen, keyExtractor } = useContext(SelectContext);
+  const { keyExtractor } = useContext(SelectContext);
+  const { setIsOpen } = usePopoverContext();
   const handleSelect = useCallback(
     (option) => {
       onSelect(option);
-      setOpen?.(false);
+      setIsOpen?.(false);
     },
     [onSelect]
   );

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

@@ -1,11 +1,8 @@
-import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext } from 'react';
-import { SelectContext } from './context.js';
+import React from 'react';
+import { Popover } from '../Popover/index.js';
 
-const { dropdown } = selectVariants();
 const SelectPopover = ({ children }) => {
-  const { open } = useContext(SelectContext);
-  return /* @__PURE__ */ React.createElement("div", { className: dropdown({ open }), "data-testid": "select-popover" }, children);
+  return /* @__PURE__ */ React.createElement(Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col" }, children);
 };
 
 export { SelectPopover };

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

@@ -1,10 +1,6 @@
-import React, { useState, useRef } from 'react';
-import '@internationalized/date';
-import 'react-aria';
-import 'react-stately';
-import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
-import '@floating-ui/react';
-import { SelectContext } from './context.js';
+import React from 'react';
+import Content from './Content.js';
+import { Popover } from '../Popover/index.js';
 
 const SelectRoot = ({
   children,
@@ -12,19 +8,15 @@ const SelectRoot = ({
   keyExtractor,
   labelExtractor
 }) => {
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  useOutsideClickListener({
-    ref,
-    onClickOutside: () => setOpen?.(false)
-  });
-  return /* @__PURE__ */ React.createElement(
-    SelectContext.Provider,
+  return /* @__PURE__ */ React.createElement(Popover.Provider, null, /* @__PURE__ */ React.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(
+    Content,
     {
-      value: { value, open, setOpen, keyExtractor, labelExtractor }
+      keyExtractor,
+      labelExtractor,
+      value
     },
-    /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children)
-  );
+    children
+  )));
 };
 
 export { SelectRoot };

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

@@ -2,25 +2,25 @@ import { selectVariants } from '@tecsinapse/cortex-core';
 import React, { useContext, useMemo } from 'react';
 import { IoChevronDownOutline } from 'react-icons/io5';
 import { SelectContext } from './context.js';
+import { Popover } from '../Popover/index.js';
 
 const { button } = selectVariants();
 const SelectTrigger = ({ label, disabled }) => {
-  const { value, setOpen, labelExtractor, open } = useContext(SelectContext);
+  const { value, labelExtractor } = useContext(SelectContext);
   const placeholder = useMemo(
     () => value ? labelExtractor(value) : label,
     [label, value]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Popover.Trigger, null, /* @__PURE__ */ React.createElement(
     "button",
     {
       className: button({ disabled }),
-      onClick: () => setOpen?.(!open),
       disabled,
       role: "button"
     },
     /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
     /* @__PURE__ */ React.createElement(IoChevronDownOutline, null)
-  );
+  ));
 };
 
 export { SelectTrigger };

package/dist/esm/index.js

@@ -23,7 +23,7 @@ export { TextArea } from './components/TextArea.js';
 export { TimeFieldInput } from './components/TimeFieldInput.js';
 export { Toggle } from './components/Toggle.js';
 import './components/Tooltip.js';
-export { Popover } from './components/Popover/Popover.js';
+export { Popover } from './components/Popover/index.js';
 export { Menubar } from './components/Menubar/index.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';

package/dist/esm/provider/SnackbarProvider.js

@@ -29,17 +29,17 @@ import '../styles/groupButton.js';
 import '../styles/progressBar.js';
 import '../components/Select/GroupedOptions.js';
 import '../components/Select/context.js';
-import '../components/Select/Popover.js';
+import '../components/Popover/Context.js';
 import '../components/Select/Trigger.js';
 import '../components/Tag.js';
 import '../components/TextArea.js';
 import '../components/Toggle.js';
 import '../components/Tooltip.js';
-import '../components/Popover/PopoverContext.js';
 import './MenubarProvider.js';
 import '../components/Menubar/Left.js';
 import '../styles/menubar.js';
 import '../components/Menubar/Right.js';
+import '../components/Menubar/Dropdown.js';
 import '../components/Menubar/MostUsed.js';
 import '../components/Menubar/MostUsedItem.js';
 import '../components/Menubar/Header.js';

package/dist/esm/service/SnackbarSonner.js

@@ -29,18 +29,18 @@ import '../styles/groupButton.js';
 import '../styles/progressBar.js';
 import '../components/Select/GroupedOptions.js';
 import '../components/Select/context.js';
-import '../components/Select/Popover.js';
+import '../components/Popover/Context.js';
 import '../components/Select/Trigger.js';
 import '../components/Tag.js';
 import '../components/TextArea.js';
 import '../components/Toggle.js';
 import '../components/Tooltip.js';
-import '../components/Popover/PopoverContext.js';
 import '../provider/MenubarProvider.js';
 import '../provider/SnackbarProvider.js';
 import '../components/Menubar/Left.js';
 import '../styles/menubar.js';
 import '../components/Menubar/Right.js';
+import '../components/Menubar/Dropdown.js';
 import '../components/Menubar/MostUsed.js';
 import '../components/Menubar/MostUsedItem.js';
 import '../components/Menubar/Header.js';

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface PopoverContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const PopoverContent: ({ children, className, }: PopoverContentProps) => JSX.Element;

package/dist/types/components/Popover/{PopoverContext.d.ts → Context.d.ts}

@@ -1,9 +1,10 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Placement } from '@floating-ui/react';
-interface PopoverContextProps {
+interface ContextProps {
     triggerProps?: any;
     refs?: any;
     isOpen?: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
     x?: number;
     y?: number;
     strategy?: 'absolute' | 'fixed';
@@ -12,11 +13,6 @@ interface PopoverContextProps {
     setPlacement?: React.Dispatch<React.SetStateAction<Placement | undefined>>;
     setTrigger?: React.Dispatch<React.SetStateAction<'hover' | 'click'>>;
 }
-export declare const usePopoverContext: () => PopoverContextProps;
-interface PopoverProviderProps {
-    children: ReactNode;
-    placement?: Placement;
-    trigger?: 'hover' | 'click';
-}
-export declare const PopoverProvider: ({ children, placement, trigger, }: PopoverProviderProps) => JSX.Element;
+export declare const Context: React.Context<ContextProps | undefined>;
+export declare const usePopoverContext: () => ContextProps;
 export {};

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { Placement } from '@floating-ui/react';
+export interface PopoverProviderProps {
+    children: ReactNode;
+    placement?: Placement;
+    trigger?: 'hover' | 'click';
+}
+export declare const PopoverProvider: ({ children, placement, trigger, }: PopoverProviderProps) => JSX.Element;

package/dist/types/components/Popover/{PopoverRoot.d.ts → Root.d.ts}

@@ -5,5 +5,4 @@ export interface PopoverRootProps {
     placement?: Placement;
     trigger?: 'hover' | 'click';
 }
-declare const PopoverRoot: ({ children, placement, trigger }: PopoverRootProps) => JSX.Element;
-export default PopoverRoot;
+export declare const PopoverRoot: ({ children, placement, trigger, }: PopoverRootProps) => JSX.Element;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface PopoverTriggerProps {
+    children: React.ReactElement;
+}
+export declare const PopoverTrigger: ({ children }: PopoverTriggerProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

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

@@ -1,3 +1,6 @@
-export { default as Root } from './PopoverRoot';
-export { default as Trigger } from './PopoverTrigger';
-export { default as Content } from './PopoverContent';
+export declare const Popover: {
+    Root: ({ children, placement, trigger, }: import("./Root").PopoverRootProps) => JSX.Element;
+    Trigger: ({ children }: import("./Trigger").PopoverTriggerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    Content: ({ children, className, }: import("./Content").PopoverContentProps) => JSX.Element;
+    Provider: ({ children, placement, trigger, }: import("./Provider").PopoverProviderProps) => JSX.Element;
+};

package/dist/types/components/Select/Content.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface ContentProps<T> {
+    children: ReactNode;
+    keyExtractor: (value: T) => string;
+    labelExtractor: (value: T) => string;
+    value?: T;
+}
+declare const Content: <T>({ children, keyExtractor, labelExtractor, value, }: ContentProps<T>) => JSX.Element;
+export default Content;

package/dist/types/components/Select/context.d.ts

@@ -1,8 +1,5 @@
-import { Dispatch, SetStateAction } from 'react';
 interface SelectContextProps<T> {
     value?: T;
-    open?: boolean;
-    setOpen?: Dispatch<SetStateAction<boolean>>;
     keyExtractor: (value: T) => string;
     labelExtractor: (value: T) => string;
 }

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

@@ -30,5 +30,5 @@ export * from './Skeleton';
 export * from './ProgressBar';
 export * from './GroupButton';
 export * from './Tooltip';
-export * from './Popover/Popover';
+export * from './Popover';
 export * from './Menubar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.3.0-beta.4",
+  "version": "1.3.0-beta.6",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -42,5 +42,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "46371f8a13504f67a2d25849d949b4063911f512"
+  "gitHead": "c45d44c53d32b39febf7f65f2b54692681d677c3"
 }

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

@@ -1,13 +0,0 @@
-'use strict';
-
-var PopoverRoot = require('./PopoverRoot.js');
-var PopoverTrigger = require('./PopoverTrigger.js');
-var PopoverContent = require('./PopoverContent.js');
-
-const Popover = {
-  Root: PopoverRoot,
-  Trigger: PopoverTrigger,
-  Content: PopoverContent
-};
-
-exports.Popover = Popover;

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

@@ -1,29 +0,0 @@
-'use strict';
-
-var React = require('react');
-require('@internationalized/date');
-require('react-aria');
-require('react-stately');
-var useFloatingLogic = require('../../hooks/useFloatingLogic.js');
-
-const PopoverContext = React.createContext(
-  void 0
-);
-const usePopoverContext = () => {
-  const context = React.useContext(PopoverContext);
-  if (!context) {
-    throw new Error("usePopoverContext must be used within a PopoverProvider");
-  }
-  return context;
-};
-const PopoverProvider = ({
-  children,
-  placement,
-  trigger
-}) => {
-  const floatingLogic = useFloatingLogic.useFloatingLogic({ placement, trigger });
-  return /* @__PURE__ */ React.createElement(PopoverContext.Provider, { value: { ...floatingLogic } }, children);
-};
-
-exports.PopoverProvider = PopoverProvider;
-exports.usePopoverContext = usePopoverContext;

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

@@ -1,10 +0,0 @@
-'use strict';
-
-var React = require('react');
-var PopoverContext = require('./PopoverContext.js');
-
-const PopoverRoot = ({ children, placement, trigger }) => {
-  return /* @__PURE__ */ React.createElement(PopoverContext.PopoverProvider, { placement, trigger }, children);
-};
-
-module.exports = PopoverRoot;

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

@@ -1,11 +0,0 @@
-'use strict';
-
-var React = require('react');
-var PopoverContext = require('./PopoverContext.js');
-
-const PopoverTrigger = ({ children }) => {
-  const { triggerProps } = PopoverContext.usePopoverContext();
-  return React.cloneElement(children, triggerProps);
-};
-
-module.exports = PopoverTrigger;

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

@@ -1,11 +0,0 @@
-import PopoverRoot from './PopoverRoot.js';
-import PopoverTrigger from './PopoverTrigger.js';
-import PopoverContent from './PopoverContent.js';
-
-const Popover = {
-  Root: PopoverRoot,
-  Trigger: PopoverTrigger,
-  Content: PopoverContent
-};
-
-export { Popover };

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

@@ -1,26 +0,0 @@
-import React, { createContext, useContext } from 'react';
-import '@internationalized/date';
-import 'react-aria';
-import 'react-stately';
-import { useFloatingLogic } from '../../hooks/useFloatingLogic.js';
-
-const PopoverContext = createContext(
-  void 0
-);
-const usePopoverContext = () => {
-  const context = useContext(PopoverContext);
-  if (!context) {
-    throw new Error("usePopoverContext must be used within a PopoverProvider");
-  }
-  return context;
-};
-const PopoverProvider = ({
-  children,
-  placement,
-  trigger
-}) => {
-  const floatingLogic = useFloatingLogic({ placement, trigger });
-  return /* @__PURE__ */ React.createElement(PopoverContext.Provider, { value: { ...floatingLogic } }, children);
-};
-
-export { PopoverProvider, usePopoverContext };

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

@@ -1,8 +0,0 @@
-import React from 'react';
-import { PopoverProvider } from './PopoverContext.js';
-
-const PopoverRoot = ({ children, placement, trigger }) => {
-  return /* @__PURE__ */ React.createElement(PopoverProvider, { placement, trigger }, children);
-};
-
-export { PopoverRoot as default };

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

@@ -1,5 +0,0 @@
-export declare const Popover: {
-    Root: ({ children, placement, trigger }: import("./PopoverRoot").PopoverRootProps) => JSX.Element;
-    Trigger: ({ children }: import("./PopoverTrigger").PopoverTriggerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    Content: ({ children, className }: import("./PopoverContent").PopoverContentProps) => JSX.Element;
-};

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

@@ -1,7 +0,0 @@
-import React from 'react';
-export interface PopoverContentProps {
-    children: React.ReactNode;
-    className?: string;
-}
-declare const PopoverContent: ({ children, className }: PopoverContentProps) => JSX.Element;
-export default PopoverContent;

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

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface PopoverTriggerProps {
-    children: React.ReactElement;
-}
-declare const PopoverTrigger: ({ children }: PopoverTriggerProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export default PopoverTrigger;