@tecsinapse/cortex-react 1.5.3 → 1.5.4-beta.0

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/Menubar/Header.js

@@ -17,7 +17,7 @@ const Header = ({ children, className, ...rest }) => {
       "data-testid": "header-menubar",
       ...rest
     },
-    /* @__PURE__ */ React.createElement(Button.Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, /* @__PURE__ */ React.createElement(io5.IoMenu, { size: 16 })),
+    /* @__PURE__ */ React.createElement(Button.Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, show ? /* @__PURE__ */ React.createElement(io5.IoCloseOutline, { size: 16 }) : /* @__PURE__ */ React.createElement(io5.IoMenu, { size: 16 })),
     children
   );
 };

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

@@ -2,9 +2,10 @@
 
 var React = require('react');
 var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('../../provider/SnackbarProvider.js');
 
-const Root = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React.createElement(MenubarProvider.MenubarProvider, null, /* @__PURE__ */ React.createElement("div", { ...rest }, children));
+const Root = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(MenubarProvider.MenubarProvider, null, children);
 };
 
 module.exports = Root;

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: false }, /* @__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/Popover/Trigger.js

@@ -5,7 +5,8 @@ var Context = require('./Context.js');
 
 const PopoverTrigger = ({ children }) => {
   const { triggerProps } = Context.usePopoverContext();
-  return utils.cloneWithProps(children, triggerProps);
+  const isDisabled = children.props?.disabled;
+  return utils.cloneWithProps(children, isDisabled ? {} : triggerProps);
 };
 
 exports.PopoverTrigger = PopoverTrigger;

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/components/Select/Trigger.js

@@ -21,16 +21,7 @@ const SelectTrigger = ({
       return multiLabelSelected ? multiLabelSelected(value.length) : `${value.length} items selected`;
     return labelExtractor(value);
   }, [label, value]);
-  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: button({ disabled, className: "bg-white" }),
-      disabled,
-      role: "button"
-    },
-    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, _placeholder),
-    /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
-  ));
+  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement("button", { className: button(), disabled, role: "button" }, /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, _placeholder), /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)));
 };
 
 exports.SelectTrigger = SelectTrigger;

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/cjs/index.js

@@ -38,6 +38,14 @@ var TimeField = require('./components/TimeField/TimeField.js');
 var TimeFieldInput = require('./components/TimeField/TimeFieldInput.js');
 var Toggle = require('./components/Toggle.js');
 var Tooltip = require('./components/Tooltip.js');
+require('react');
+require('clsx');
+require('./styles/menubar.js');
+require('./components/Menubar/Dropdown.js');
+require('./components/Menubar/Item.js');
+require('./components/Menubar/MostUsed.js');
+require('./components/Menubar/MostUsedItem.js');
+require('./components/Menubar/SubItem.js');
 var useCalendar = require('./hooks/useCalendar.js');
 var useCalendarCell = require('./hooks/useCalendarCell.js');
 var useCalendarGrid = require('./hooks/useCalendarGrid.js');

package/dist/cjs/provider/MenubarProvider.js

@@ -1,6 +1,12 @@
 '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');
 
 const MenubarContext = React.createContext({
   show: false,
@@ -8,7 +14,15 @@ const MenubarContext = React.createContext({
 });
 const MenubarProvider = ({ children }) => {
   const [show, setShow] = React.useState(false);
-  return /* @__PURE__ */ React.createElement(MenubarContext.Provider, { value: { show, setShow } }, children);
+  const ref = React.useRef(null);
+  const onClickOutside = React.useCallback(() => {
+    setShow(false);
+  }, []);
+  useOutsideClickListener.useOutsideClickListener({
+    ref,
+    onClickOutside
+  });
+  return /* @__PURE__ */ React.createElement(MenubarContext.Provider, { value: { show, setShow } }, /* @__PURE__ */ React.createElement("div", { ref }, children));
 };
 const useMenubar = () => {
   const context = React.useContext(MenubarContext);

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/Menubar/Header.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { IoMenu } from 'react-icons/io5';
+import { IoCloseOutline, IoMenu } from 'react-icons/io5';
 import { useMenubar } from '../../provider/MenubarProvider.js';
 import '../../provider/SnackbarProvider.js';
 import { menubar } from '../../styles/menubar.js';
@@ -15,7 +15,7 @@ const Header = ({ children, className, ...rest }) => {
       "data-testid": "header-menubar",
       ...rest
     },
-    /* @__PURE__ */ React__default.createElement(Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, /* @__PURE__ */ React__default.createElement(IoMenu, { size: 16 })),
+    /* @__PURE__ */ React__default.createElement(Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, show ? /* @__PURE__ */ React__default.createElement(IoCloseOutline, { size: 16 }) : /* @__PURE__ */ React__default.createElement(IoMenu, { size: 16 })),
     children
   );
 };

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

@@ -1,8 +1,9 @@
 import React__default from 'react';
 import { MenubarProvider } from '../../provider/MenubarProvider.js';
+import '../../provider/SnackbarProvider.js';
 
-const Root = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React__default.createElement(MenubarProvider, null, /* @__PURE__ */ React__default.createElement("div", { ...rest }, children));
+const Root = ({ children }) => {
+  return /* @__PURE__ */ React__default.createElement(MenubarProvider, null, children);
 };
 
 export { Root as default };

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: false }, /* @__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/Popover/Trigger.js

@@ -3,7 +3,8 @@ import { usePopoverContext } from './Context.js';
 
 const PopoverTrigger = ({ children }) => {
   const { triggerProps } = usePopoverContext();
-  return cloneWithProps(children, triggerProps);
+  const isDisabled = children.props?.disabled;
+  return cloneWithProps(children, isDisabled ? {} : triggerProps);
 };
 
 export { PopoverTrigger };

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/components/Select/Trigger.js

@@ -19,16 +19,7 @@ const SelectTrigger = ({
       return multiLabelSelected ? multiLabelSelected(value.length) : `${value.length} items selected`;
     return labelExtractor(value);
   }, [label, value]);
-  return /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
-    "button",
-    {
-      className: button({ disabled, className: "bg-white" }),
-      disabled,
-      role: "button"
-    },
-    /* @__PURE__ */ React__default.createElement("span", { "data-testid": "select-placeholder" }, _placeholder),
-    /* @__PURE__ */ React__default.createElement(IoChevronDownOutline, null)
-  ));
+  return /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement("button", { className: button(), disabled, role: "button" }, /* @__PURE__ */ React__default.createElement("span", { "data-testid": "select-placeholder" }, _placeholder), /* @__PURE__ */ React__default.createElement(IoChevronDownOutline, null)));
 };
 
 export { SelectTrigger };

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/esm/index.js

@@ -36,6 +36,14 @@ export { TimeField } from './components/TimeField/TimeField.js';
 export { TimeFieldInput } from './components/TimeField/TimeFieldInput.js';
 export { Toggle } from './components/Toggle.js';
 export { Tooltip } from './components/Tooltip.js';
+import 'react';
+import 'clsx';
+import './styles/menubar.js';
+import './components/Menubar/Dropdown.js';
+import './components/Menubar/Item.js';
+import './components/Menubar/MostUsed.js';
+import './components/Menubar/MostUsedItem.js';
+import './components/Menubar/SubItem.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';
 export { useCalendarGrid } from './hooks/useCalendarGrid.js';

package/dist/esm/provider/MenubarProvider.js

@@ -1,4 +1,10 @@
-import React__default, { createContext, useContext } from 'react';
+import React__default, { createContext, useRef, useCallback, useContext } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import 'currency.js';
+import { useOutsideClickListener } from '../hooks/useOutsideClickListener.js';
 
 const MenubarContext = createContext({
   show: false,
@@ -6,7 +12,15 @@ const MenubarContext = createContext({
 });
 const MenubarProvider = ({ children }) => {
   const [show, setShow] = React__default.useState(false);
-  return /* @__PURE__ */ React__default.createElement(MenubarContext.Provider, { value: { show, setShow } }, children);
+  const ref = useRef(null);
+  const onClickOutside = useCallback(() => {
+    setShow(false);
+  }, []);
+  useOutsideClickListener({
+    ref,
+    onClickOutside
+  });
+  return /* @__PURE__ */ React__default.createElement(MenubarContext.Provider, { value: { show, setShow } }, /* @__PURE__ */ React__default.createElement("div", { ref }, children));
 };
 const useMenubar = () => {
   const context = useContext(MenubarContext);

package/dist/types/components/Menubar/DropdownRoot.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { DefaultProps } from './interface';
 import { MostUsedItemProps } from './MostUsedItem';
-interface MenuItem extends DefaultProps {
+export interface MenuItem extends DefaultProps {
     title: string;
     items?: MenuItem[];
 }
-interface MenuCategory {
+export interface MenuCategory {
     title: string;
     items: MenuItem[];
 }

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

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-export interface RootProps extends React.HTMLAttributes<HTMLDivElement> {
+import { ReactNode } from 'react';
+export interface RootProps {
     children?: ReactNode;
 }
-declare const Root: ({ children, ...rest }: RootProps) => JSX.Element;
+declare const Root: ({ children }: RootProps) => JSX.Element;
 export default Root;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const Menubar: {
-    Root: ({ children, ...rest }: import("./Root").RootProps) => JSX.Element;
+    Root: ({ children }: import("./Root").RootProps) => JSX.Element;
     Header: ({ children, className, ...rest }: import("./Header").HeaderProps) => JSX.Element;
     HeaderLeft: ({ children, ...rest }: import("./interface").DefaultProps) => JSX.Element;
     Search: (props: import("..").InputSearchProps) => JSX.Element;

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/components/index.d.ts

@@ -28,3 +28,4 @@ export * from './TextArea';
 export * from './TimeField';
 export * from './Toggle';
 export * from './Tooltip';
+export * from './Menubar/DropdownRoot';

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-beta.0",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "*",
-    "@tecsinapse/cortex-core": "0.3.2",
+    "@tecsinapse/cortex-core": "0.3.3-beta.0",
     "clsx": "*",
     "react-aria": "^3.33.1",
     "react-icons": "^5.2.1",
@@ -45,5 +45,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "86b8794105cbdf611c6f54784f028cb73f5947b3"
+  "gitHead": "4c158be7dcd2d5609a2a84b59189c1d74ca5f04c"
 }