@tecsinapse/cortex-react 1.13.0-beta.0 → 1.13.0-beta.2

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

@@ -11,10 +11,11 @@ require('react-dropzone');
 require('uuid');
 require('@floating-ui/react');
 require('currency.js');
+var CategoriesContext = require('../../provider/CategoriesContext.js');
 
 const Categories = ({ children }) => {
   const { width } = useDimensions.useDimensions();
-  return /* @__PURE__ */ React.createElement(Masonry, { columns: width <= 640 ? 2 : 4 }, children);
+  return /* @__PURE__ */ React.createElement(CategoriesContext.CategoriesProvider, null, /* @__PURE__ */ React.createElement(Masonry, { columns: width <= 640 ? 2 : 4 }, children));
 };
 
 module.exports = Categories;

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

@@ -28,6 +28,8 @@ const DropdownRoot = ({
           {
             key: prop.title,
             ...rest,
+            parentCategoryTitle: item.title,
+            title,
             subItems: items ?? [],
             renderSubItems: ({ title: title2, ...rest2 }) => {
               return /* @__PURE__ */ React.createElement(SubItem, { key: title2, ...rest2 }, title2);

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

@@ -16,6 +16,7 @@ var useMenubar = require('../../provider/useMenubar.js');
 var menubar = require('../../styles/menubar.js');
 var IconControlSubItem = require('./IconControlSubItem.js');
 var ItemLink = require('./ItemLink.js');
+var CategoriesContext = require('../../provider/CategoriesContext.js');
 
 const { container, textBehavior } = menubar.item();
 const Item = ({
@@ -24,21 +25,24 @@ const Item = ({
   renderSubItems,
   className,
   anchorProps,
+  title,
+  parentCategoryTitle,
   ...rest
 }) => {
-  const [showSubItem, setShowSubItem] = React.useState(false);
   const hasSubItems = (subItems ?? []).length > 0;
   const [, setShow] = useMenubar.useMenubar();
+  const { expandedMenus, toggleSubmenu } = CategoriesContext.useCategories();
+  const isExpanded = expandedMenus[parentCategoryTitle] === title;
   const handleClickItemMenubar = React.useCallback(
     (e) => {
       if (hasSubItems) {
         e.stopPropagation();
-        setShowSubItem((prev) => !prev);
+        toggleSubmenu(parentCategoryTitle, title);
       } else {
         setShow(false);
       }
     },
-    []
+    [hasSubItems, parentCategoryTitle, title, toggleSubmenu, setShow]
   );
   return /* @__PURE__ */ React.createElement(ItemLink, { anchorProps }, /* @__PURE__ */ React.createElement(
     "div",
@@ -52,8 +56,14 @@ const Item = ({
       )
     },
     children,
-    hasSubItems ? /* @__PURE__ */ React.createElement(IconControlSubItem, { show: showSubItem, setShow: setShowSubItem }) : /* @__PURE__ */ React.createElement(React.Fragment, null)
-  ), showSubItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+    hasSubItems ? /* @__PURE__ */ React.createElement(
+      IconControlSubItem,
+      {
+        show: isExpanded,
+        setShow: () => toggleSubmenu(parentCategoryTitle, title)
+      }
+    ) : null
+  ), isExpanded ? /* @__PURE__ */ React.createElement(React.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : null);
 };
 
 module.exports = Item;

package/dist/cjs/hooks/useFileUpload.js

@@ -30,7 +30,7 @@ const useFileUpload = ({
   const onDrop = async (acceptedFiles) => {
     let toProcess = acceptedFiles;
     if (preventDuplicates) {
-      const found = acceptedFiles.filter(
+      const found = (acceptedFiles ?? []).filter(
         (file) => files.some((existing) => existing.file.name === file.name)
       );
       if (found.length > 0) {

package/dist/cjs/provider/CategoriesContext.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+
+const CategoriesContext = React.createContext(null);
+const CategoriesProvider = ({ children }) => {
+  const [expandedMenus, setExpandedMenus] = React.useState({});
+  const toggleSubmenu = (categoryId, submenuId) => {
+    setExpandedMenus((prev) => {
+      return {
+        ...prev,
+        [categoryId]: prev[categoryId] === submenuId ? null : submenuId
+      };
+    });
+  };
+  return /* @__PURE__ */ React.createElement(CategoriesContext.Provider, { value: { expandedMenus, toggleSubmenu } }, children);
+};
+const useCategories = () => {
+  const context = React.useContext(CategoriesContext);
+  if (!context) {
+    throw new Error("useCategories must be used within CategoriesProvider");
+  }
+  return context;
+};
+
+exports.CategoriesProvider = CategoriesProvider;
+exports.useCategories = useCategories;

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

@@ -9,10 +9,11 @@ import 'react-dropzone';
 import 'uuid';
 import '@floating-ui/react';
 import 'currency.js';
+import { CategoriesProvider } from '../../provider/CategoriesContext.js';
 
 const Categories = ({ children }) => {
   const { width } = useDimensions();
-  return /* @__PURE__ */ React__default.createElement(Masonry, { columns: width <= 640 ? 2 : 4 }, children);
+  return /* @__PURE__ */ React__default.createElement(CategoriesProvider, null, /* @__PURE__ */ React__default.createElement(Masonry, { columns: width <= 640 ? 2 : 4 }, children));
 };
 
 export { Categories as default };

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

@@ -26,6 +26,8 @@ const DropdownRoot = ({
           {
             key: prop.title,
             ...rest,
+            parentCategoryTitle: item.title,
+            title,
             subItems: items ?? [],
             renderSubItems: ({ title: title2, ...rest2 }) => {
               return /* @__PURE__ */ React__default.createElement(SubItem, { key: title2, ...rest2 }, title2);

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React__default, { useState, useCallback } from 'react';
+import React__default, { useCallback } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
@@ -14,6 +14,7 @@ import { useMenubar } from '../../provider/useMenubar.js';
 import { item } from '../../styles/menubar.js';
 import IconControlSubItem from './IconControlSubItem.js';
 import ItemLink from './ItemLink.js';
+import { useCategories } from '../../provider/CategoriesContext.js';
 
 const { container, textBehavior } = item();
 const Item = ({
@@ -22,21 +23,24 @@ const Item = ({
   renderSubItems,
   className,
   anchorProps,
+  title,
+  parentCategoryTitle,
   ...rest
 }) => {
-  const [showSubItem, setShowSubItem] = useState(false);
   const hasSubItems = (subItems ?? []).length > 0;
   const [, setShow] = useMenubar();
+  const { expandedMenus, toggleSubmenu } = useCategories();
+  const isExpanded = expandedMenus[parentCategoryTitle] === title;
   const handleClickItemMenubar = useCallback(
     (e) => {
       if (hasSubItems) {
         e.stopPropagation();
-        setShowSubItem((prev) => !prev);
+        toggleSubmenu(parentCategoryTitle, title);
       } else {
         setShow(false);
       }
     },
-    []
+    [hasSubItems, parentCategoryTitle, title, toggleSubmenu, setShow]
   );
   return /* @__PURE__ */ React__default.createElement(ItemLink, { anchorProps }, /* @__PURE__ */ React__default.createElement(
     "div",
@@ -50,8 +54,14 @@ const Item = ({
       )
     },
     children,
-    hasSubItems ? /* @__PURE__ */ React__default.createElement(IconControlSubItem, { show: showSubItem, setShow: setShowSubItem }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)
-  ), showSubItem ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+    hasSubItems ? /* @__PURE__ */ React__default.createElement(
+      IconControlSubItem,
+      {
+        show: isExpanded,
+        setShow: () => toggleSubmenu(parentCategoryTitle, title)
+      }
+    ) : null
+  ), isExpanded ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : null);
 };
 
 export { Item as default };

package/dist/esm/hooks/useFileUpload.js

@@ -28,7 +28,7 @@ const useFileUpload = ({
   const onDrop = async (acceptedFiles) => {
     let toProcess = acceptedFiles;
     if (preventDuplicates) {
-      const found = acceptedFiles.filter(
+      const found = (acceptedFiles ?? []).filter(
         (file) => files.some((existing) => existing.file.name === file.name)
       );
       if (found.length > 0) {

package/dist/esm/provider/CategoriesContext.js

@@ -0,0 +1,24 @@
+import React__default, { createContext, useState, useContext } from 'react';
+
+const CategoriesContext = createContext(null);
+const CategoriesProvider = ({ children }) => {
+  const [expandedMenus, setExpandedMenus] = useState({});
+  const toggleSubmenu = (categoryId, submenuId) => {
+    setExpandedMenus((prev) => {
+      return {
+        ...prev,
+        [categoryId]: prev[categoryId] === submenuId ? null : submenuId
+      };
+    });
+  };
+  return /* @__PURE__ */ React__default.createElement(CategoriesContext.Provider, { value: { expandedMenus, toggleSubmenu } }, children);
+};
+const useCategories = () => {
+  const context = useContext(CategoriesContext);
+  if (!context) {
+    throw new Error("useCategories must be used within CategoriesProvider");
+  }
+  return context;
+};
+
+export { CategoriesProvider, useCategories };

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ItemProps } from './types';
-declare const Item: <T>({ children, subItems, renderSubItems, className, anchorProps, ...rest }: ItemProps<T>) => React.JSX.Element;
+declare const Item: <T>({ children, subItems, renderSubItems, className, anchorProps, title, parentCategoryTitle, ...rest }: ItemProps<T>) => React.JSX.Element;
 export default Item;

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

@@ -9,7 +9,7 @@ export declare const Menubar: {
     MostUsedItem: ({ title, category, anchorProps, ...rest }: import("./types").MostUsedItemProps) => import("react").JSX.Element;
     Category: <T>({ title, options, render }: import("./types").CategoryType<T>) => import("react").JSX.Element;
     Categories: ({ children }: import("./types").DefaultProps) => import("react").JSX.Element;
-    Item: <T>({ children, subItems, renderSubItems, className, anchorProps, ...rest }: import("./types").ItemProps<T>) => import("react").JSX.Element;
+    Item: <T>({ children, subItems, renderSubItems, className, anchorProps, title, parentCategoryTitle, ...rest }: import("./types").ItemProps<T>) => import("react").JSX.Element;
     SubItem: ({ children, anchorProps, className, ...rest }: import("./types").SubItemProps) => import("react").JSX.Element;
     DropdownRoot: ({ mostUsed, options, labelMostUsed, }: import("./types").DropdownRootProps) => import("react").JSX.Element;
 };

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

@@ -54,4 +54,6 @@ export interface ItemProps<T> extends DefaultProps {
     subItems?: T[];
     renderSubItems?: (prop: T) => React.ReactNode;
     anchorProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    parentCategoryTitle: string;
+    title: string;
 }

package/dist/types/provider/CategoriesContext.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+interface ExpandedMenusState {
+    [categoryId: string]: string | null;
+}
+interface CategoriesContextProps {
+    expandedMenus: ExpandedMenusState;
+    toggleSubmenu: (categoryId: string, submenuId: string) => void;
+}
+export declare const CategoriesProvider: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export declare const useCategories: () => CategoriesContextProps;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.13.0-beta.0",
+  "version": "1.13.0-beta.2",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -47,5 +47,5 @@
     "react-icons": ">=5.2.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "4c78af21cd3462adefd432f41e940d06968eed45"
+  "gitHead": "fbc8fbb201623bae4e5c1b31d85bae1d52c6fe54"
 }