@tecsinapse/cortex-react 1.7.4 → 1.7.5-beta.1

package/dist/cjs/components/Breadcrumbs/BreadcrumbItem.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var clsx = require('clsx');
 var React = require('react');
 var md = require('react-icons/md');
 
@@ -12,7 +13,10 @@ const BreadcrumbItem = ({
   return /* @__PURE__ */ React.createElement(Component, { ...componentProps, key: title }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-mili items-center" }, /* @__PURE__ */ React.createElement(
     "p",
     {
-      className: isLast ? "text-secondary-medium" : "text-secondary-xdark"
+      className: clsx(
+        "no-underline",
+        isLast ? "text-secondary-medium cursor-default" : "text-secondary-xdark cursor-pointer"
+      )
     },
     title
   ), !isLast ? /* @__PURE__ */ React.createElement(

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

@@ -2,9 +2,18 @@
 
 var React = require('react');
 var Masonry = require('../Masonry.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('currency.js');
+require('react-dropzone');
+require('uuid');
+var useDimensions = require('../../hooks/useDimensions.js');
 
 const Categories = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(Masonry, { columns: 4 }, children);
+  const { width } = useDimensions.useDimensions();
+  return /* @__PURE__ */ React.createElement(Masonry, { columns: width < 640 ? 2 : 4 }, children);
 };
 
 module.exports = Categories;

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

@@ -2,9 +2,19 @@
 
 var React = require('react');
 var menubar = require('../../styles/menubar.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('currency.js');
+require('react-dropzone');
+require('uuid');
+var useDimensions = require('../../hooks/useDimensions.js');
 
 const { container, label: labelClass, containerList } = menubar.mostUsed();
 const MostUsed = ({ label, children, ...rest }) => {
+  const { width } = useDimensions.useDimensions();
+  if (width <= 640) return /* @__PURE__ */ React.createElement(React.Fragment, null);
   return /* @__PURE__ */ React.createElement("div", { className: container(), "data-testid": "most-used-menubar", ...rest }, /* @__PURE__ */ React.createElement("p", { className: labelClass() }, label), /* @__PURE__ */ React.createElement("div", { className: containerList() }, children));
 };
 

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

@@ -2,9 +2,19 @@
 
 var React = require('react');
 var menubar = require('../../styles/menubar.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+require('currency.js');
+require('react-dropzone');
+require('uuid');
+var useDimensions = require('../../hooks/useDimensions.js');
 
 const { right } = menubar.menubar();
 const Right = ({ children, ...rest }) => {
+  const { width } = useDimensions.useDimensions();
+  if (width <= 640) return /* @__PURE__ */ React.createElement(React.Fragment, null);
   return /* @__PURE__ */ React.createElement("div", { className: right(), "data-testid": "header-right-menubar", ...rest }, children);
 };
 

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

@@ -21,7 +21,7 @@ const Search = (props) => {
     index.Input.Search,
     {
       ...props,
-      className: clsx("mr-tera flex-1", menubar.animate({ show }))
+      className: clsx("flex-1", menubar.animate({ show }))
     }
   );
 };

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/useDimensions.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+
+const getWindowDimensions = () => {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+};
+const useDimensions = () => {
+  const [windowDimensions, setWindowDimensions] = React.useState(
+    getWindowDimensions()
+  );
+  React.useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowDimensions;
+};
+
+exports.useDimensions = useDimensions;

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

@@ -54,6 +54,7 @@ var useSelectGroupedOptions = require('./hooks/useSelectGroupedOptions.js');
 var useSelectOptions = require('./hooks/useSelectOptions.js');
 var useStringMask = require('./hooks/useStringMask.js');
 var useFileUpload = require('./hooks/useFileUpload.js');
+var useDimensions = require('./hooks/useDimensions.js');
 var SnackbarSonner = require('./service/SnackbarSonner.js');
 var MenubarProvider = require('./provider/MenubarProvider.js');
 var SnackbarProvider = require('./provider/SnackbarProvider.js');
@@ -131,6 +132,7 @@ exports.getMask = useStringMask.getMask;
 exports.mergeMask = useStringMask.mergeMask;
 exports.useStringMask = useStringMask.useStringMask;
 exports.useFileUpload = useFileUpload.useFileUpload;
+exports.useDimensions = useDimensions.useDimensions;
 exports.SnackbarSonner = SnackbarSonner.SnackbarSonner;
 exports.MenubarProvider = MenubarProvider.MenubarProvider;
 exports.SnackbarProvider = SnackbarProvider.SnackbarProvider;

package/dist/esm/components/Breadcrumbs/BreadcrumbItem.js

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React__default from 'react';
 import { MdOutlineKeyboardDoubleArrowRight } from 'react-icons/md';
 
@@ -10,7 +11,10 @@ const BreadcrumbItem = ({
   return /* @__PURE__ */ React__default.createElement(Component, { ...componentProps, key: title }, /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-x-mili items-center" }, /* @__PURE__ */ React__default.createElement(
     "p",
     {
-      className: isLast ? "text-secondary-medium" : "text-secondary-xdark"
+      className: clsx(
+        "no-underline",
+        isLast ? "text-secondary-medium cursor-default" : "text-secondary-xdark cursor-pointer"
+      )
     },
     title
   ), !isLast ? /* @__PURE__ */ React__default.createElement(

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

@@ -1,8 +1,17 @@
 import React__default from 'react';
 import Masonry from '../Masonry.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import 'currency.js';
+import 'react-dropzone';
+import 'uuid';
+import { useDimensions } from '../../hooks/useDimensions.js';
 
 const Categories = ({ children }) => {
-  return /* @__PURE__ */ React__default.createElement(Masonry, { columns: 4 }, children);
+  const { width } = useDimensions();
+  return /* @__PURE__ */ React__default.createElement(Masonry, { columns: width < 640 ? 2 : 4 }, children);
 };
 
 export { Categories as default };

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

@@ -1,8 +1,18 @@
 import React__default from 'react';
 import { mostUsed } from '../../styles/menubar.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import 'currency.js';
+import 'react-dropzone';
+import 'uuid';
+import { useDimensions } from '../../hooks/useDimensions.js';
 
 const { container, label: labelClass, containerList } = mostUsed();
 const MostUsed = ({ label, children, ...rest }) => {
+  const { width } = useDimensions();
+  if (width <= 640) return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
   return /* @__PURE__ */ React__default.createElement("div", { className: container(), "data-testid": "most-used-menubar", ...rest }, /* @__PURE__ */ React__default.createElement("p", { className: labelClass() }, label), /* @__PURE__ */ React__default.createElement("div", { className: containerList() }, children));
 };
 

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

@@ -1,8 +1,18 @@
 import React__default from 'react';
 import { menubar } from '../../styles/menubar.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import 'currency.js';
+import 'react-dropzone';
+import 'uuid';
+import { useDimensions } from '../../hooks/useDimensions.js';
 
 const { right } = menubar();
 const Right = ({ children, ...rest }) => {
+  const { width } = useDimensions();
+  if (width <= 640) return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
   return /* @__PURE__ */ React__default.createElement("div", { className: right(), "data-testid": "header-right-menubar", ...rest }, children);
 };
 

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

@@ -19,7 +19,7 @@ const Search = (props) => {
     Input.Search,
     {
       ...props,
-      className: clsx("mr-tera flex-1", animate({ show }))
+      className: clsx("flex-1", animate({ show }))
     }
   );
 };

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/useDimensions.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+const getWindowDimensions = () => {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+};
+const useDimensions = () => {
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions()
+  );
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowDimensions;
+};
+
+export { useDimensions };

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

@@ -52,6 +52,7 @@ export { useSelectGroupedOptions } from './hooks/useSelectGroupedOptions.js';
 export { useSelectOptions } from './hooks/useSelectOptions.js';
 export { getMask, mergeMask, useStringMask } from './hooks/useStringMask.js';
 export { useFileUpload } from './hooks/useFileUpload.js';
+export { useDimensions } from './hooks/useDimensions.js';
 export { SnackbarSonner } from './service/SnackbarSonner.js';
 export { MenubarProvider } from './provider/MenubarProvider.js';
 export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';

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

@@ -12,3 +12,4 @@ export * from './useSelectGroupedOptions';
 export * from './useSelectOptions';
 export * from './useStringMask';
 export * from './useFileUpload';
+export * from './useDimensions';

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

@@ -0,0 +1,4 @@
+export declare const useDimensions: () => {
+    width: number;
+    height: number;
+};

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.4",
+  "version": "1.7.5-beta.1",
   "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.4.2",
+    "@tecsinapse/cortex-core": "0.4.3-beta.1",
     "clsx": "*",
     "currency.js": "~2.0.4",
     "react-aria": "^3.33.1",
@@ -48,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "c17ef22696e26fa1477418d359ad242d47ddb72c"
+  "gitHead": "76a1626a6e69d8eddbb38da1e2ce9997b62cfbe8"
 }