@beweco/aurora-ui 0.1.58 → 0.1.60

package/dist/index.cjs.js

@@ -2108,16 +2108,13 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
             document.activeElement.blur();
         }
     }, [onSelect]);
-    // Renders a sub-item (text-only, hierarchy line, pill selected state).
-    // Estilos de selección aplicados por isSelected en classNames (no solo por CSS externo) para que
-    // funcionen igual con el paquete publicado en npm: evita que el CSS de la app pise o que el
-    // build no incluya la regla .menu-nav-list__sub-item[data-menu-subitem-selected="true"].
+    // Renders a sub-item (text-only, hierarchy line). Estilos de selección vía clase .selected en Menu.scss.
     var renderSubItem = React.useCallback(function (item, parentKey) {
         var _a;
         item.href; var itemProps = __rest(item, ["href"]);
         var isSelected = item.key === selectedKey;
         return (React.createElement(react.ListboxItem, __assign({}, itemProps, { key: item.key, textValue: item.title, title: item.title, startContent: null, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, "aria-selected": isSelected, "data-menu-subitem-selected": isSelected ? "true" : "false", classNames: {
-                base: react.cn("min-h-9 rounded-large px-3 py-2 menu-nav-list__sub-item", "text-default-500 data-[hover=true]:text-default-700", "data-[selected=true]:bg-default-100 data-[selected=true]:text-foreground data-[selected=true]:font-semibold", isSelected && "bg-primary-100 font-semibold text-primary"),
+                base: react.cn("min-h-9 rounded-large px-3 py-2 menu-nav-list__sub-item", "text-default-500 data-[hover=true]:text-default-700", isSelected && "selected"),
             }, onPress: function () { return handleItemPress(item); } })));
     }, [handleItemPress, selectedKey]);
     // Renders the item displayed inside the Popover when the menu is collapsed.
@@ -2266,6 +2263,63 @@ var MenuComponent = React.memo(function Menu(_a) {
         (_a = menuItems.onSelect) === null || _a === void 0 ? void 0 : _a.call(menuItems, key, href, "bottomBar");
     }, [onOpenSidebarChange, menuItems.onSelect]);
     var showBottomBar = (mobileBottomBarGroupKey && bottomBarItems.length > 0) || showNativeMenu;
+    // Drag-to-scroll: clic sostenido + arrastre en el área de scroll del menú
+    var scrollContainerRef = React.useRef(null);
+    var dragStateRef = React.useRef({ startY: 0, startScrollTop: 0, isDragging: false, prevClientY: 0 });
+    var _h = React.useState(false); _h[0]; var setIsDraggingScroll = _h[1];
+    var handleScrollAreaMouseMove = React.useCallback(function (e) {
+        var el = scrollContainerRef.current;
+        if (!el)
+            return;
+        var state = dragStateRef.current;
+        var dy = e.clientY - state.startY;
+        if (!state.isDragging && Math.abs(dy) > 5) {
+            state.isDragging = true;
+            state.prevClientY = e.clientY;
+            setIsDraggingScroll(true);
+        }
+        if (state.isDragging) {
+            el.scrollTop += state.prevClientY - e.clientY;
+            state.prevClientY = e.clientY;
+        }
+    }, []);
+    var handleScrollAreaMouseUp = React.useCallback(function () {
+        var wasDragging = dragStateRef.current.isDragging;
+        document.removeEventListener("mousemove", handleScrollAreaMouseMove);
+        document.removeEventListener("mouseup", handleScrollAreaMouseUp);
+        dragStateRef.current.isDragging = false;
+        setIsDraggingScroll(false);
+        if (wasDragging) {
+            var preventClick_1 = function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                document.removeEventListener("click", preventClick_1, true);
+            };
+            document.addEventListener("click", preventClick_1, true);
+            setTimeout(function () { return document.removeEventListener("click", preventClick_1, true); }, 50);
+        }
+    }, [handleScrollAreaMouseMove]);
+    React.useCallback(function (e) {
+        if (e.button !== 0)
+            return;
+        var el = scrollContainerRef.current;
+        if (!el)
+            return;
+        dragStateRef.current = {
+            startY: e.clientY,
+            startScrollTop: el.scrollTop,
+            isDragging: false,
+            prevClientY: e.clientY,
+        };
+        document.addEventListener("mousemove", handleScrollAreaMouseMove);
+        document.addEventListener("mouseup", handleScrollAreaMouseUp);
+    }, [handleScrollAreaMouseMove, handleScrollAreaMouseUp]);
+    React.useEffect(function () {
+        return function () {
+            document.removeEventListener("mousemove", handleScrollAreaMouseMove);
+            document.removeEventListener("mouseup", handleScrollAreaMouseUp);
+        };
+    }, [handleScrollAreaMouseMove, handleScrollAreaMouseUp]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showBottomBar && (jsxRuntime.jsx(MenuMobileBottomBar, { items: bottomBarItems, selectedKey: selectedKey, onSelect: handleBottomBarSelect, onMenuPress: handleSidebarOpen, menuLabel: t.menuLabel, navAriaLabel: t.mobileNavAriaLabel, forceVisible: showNativeMenu && bottomBarItems.length === 0 })), jsxRuntime.jsx("button", { type: "button", "aria-label": t.closeSidebarAriaLabel, className: "menu-overlay ".concat(isOpenSidebar ? "menu-overlay--open" : ""), onClick: handleSidebarClose, tabIndex: isOpenSidebar ? 0 : -1 }), jsxRuntime.jsx("div", { className: "container__menu ".concat(isCollapsed
                     ? "container__menu--collapsed"
                     : "container__menu--expanded", " ").concat(isOpenSidebar ? "container__menu--mobile-open" : ""), "aria-hidden": !isOpenSidebar, children: jsxRuntime.jsxs("div", { className: "content__menu", children: [jsxRuntime.jsxs("div", { className: "content__menu--header", style: {

package/dist/index.esm.js

@@ -2109,16 +2109,13 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
             document.activeElement.blur();
         }
     }, [onSelect]);
-    // Renders a sub-item (text-only, hierarchy line, pill selected state).
-    // Estilos de selección aplicados por isSelected en classNames (no solo por CSS externo) para que
-    // funcionen igual con el paquete publicado en npm: evita que el CSS de la app pise o que el
-    // build no incluya la regla .menu-nav-list__sub-item[data-menu-subitem-selected="true"].
+    // Renders a sub-item (text-only, hierarchy line). Estilos de selección vía clase .selected en Menu.scss.
     var renderSubItem = React.useCallback(function (item, parentKey) {
         var _a;
         item.href; var itemProps = __rest(item, ["href"]);
         var isSelected = item.key === selectedKey;
         return (createElement(ListboxItem, __assign({}, itemProps, { key: item.key, textValue: item.title, title: item.title, startContent: null, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, "aria-selected": isSelected, "data-menu-subitem-selected": isSelected ? "true" : "false", classNames: {
-                base: cn("min-h-9 rounded-large px-3 py-2 menu-nav-list__sub-item", "text-default-500 data-[hover=true]:text-default-700", "data-[selected=true]:bg-default-100 data-[selected=true]:text-foreground data-[selected=true]:font-semibold", isSelected && "bg-primary-100 font-semibold text-primary"),
+                base: cn("min-h-9 rounded-large px-3 py-2 menu-nav-list__sub-item", "text-default-500 data-[hover=true]:text-default-700", isSelected && "selected"),
             }, onPress: function () { return handleItemPress(item); } })));
     }, [handleItemPress, selectedKey]);
     // Renders the item displayed inside the Popover when the menu is collapsed.
@@ -2267,6 +2264,63 @@ var MenuComponent = React.memo(function Menu(_a) {
         (_a = menuItems.onSelect) === null || _a === void 0 ? void 0 : _a.call(menuItems, key, href, "bottomBar");
     }, [onOpenSidebarChange, menuItems.onSelect]);
     var showBottomBar = (mobileBottomBarGroupKey && bottomBarItems.length > 0) || showNativeMenu;
+    // Drag-to-scroll: clic sostenido + arrastre en el área de scroll del menú
+    var scrollContainerRef = useRef(null);
+    var dragStateRef = useRef({ startY: 0, startScrollTop: 0, isDragging: false, prevClientY: 0 });
+    var _h = React.useState(false); _h[0]; var setIsDraggingScroll = _h[1];
+    var handleScrollAreaMouseMove = useCallback(function (e) {
+        var el = scrollContainerRef.current;
+        if (!el)
+            return;
+        var state = dragStateRef.current;
+        var dy = e.clientY - state.startY;
+        if (!state.isDragging && Math.abs(dy) > 5) {
+            state.isDragging = true;
+            state.prevClientY = e.clientY;
+            setIsDraggingScroll(true);
+        }
+        if (state.isDragging) {
+            el.scrollTop += state.prevClientY - e.clientY;
+            state.prevClientY = e.clientY;
+        }
+    }, []);
+    var handleScrollAreaMouseUp = useCallback(function () {
+        var wasDragging = dragStateRef.current.isDragging;
+        document.removeEventListener("mousemove", handleScrollAreaMouseMove);
+        document.removeEventListener("mouseup", handleScrollAreaMouseUp);
+        dragStateRef.current.isDragging = false;
+        setIsDraggingScroll(false);
+        if (wasDragging) {
+            var preventClick_1 = function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                document.removeEventListener("click", preventClick_1, true);
+            };
+            document.addEventListener("click", preventClick_1, true);
+            setTimeout(function () { return document.removeEventListener("click", preventClick_1, true); }, 50);
+        }
+    }, [handleScrollAreaMouseMove]);
+    useCallback(function (e) {
+        if (e.button !== 0)
+            return;
+        var el = scrollContainerRef.current;
+        if (!el)
+            return;
+        dragStateRef.current = {
+            startY: e.clientY,
+            startScrollTop: el.scrollTop,
+            isDragging: false,
+            prevClientY: e.clientY,
+        };
+        document.addEventListener("mousemove", handleScrollAreaMouseMove);
+        document.addEventListener("mouseup", handleScrollAreaMouseUp);
+    }, [handleScrollAreaMouseMove, handleScrollAreaMouseUp]);
+    useEffect(function () {
+        return function () {
+            document.removeEventListener("mousemove", handleScrollAreaMouseMove);
+            document.removeEventListener("mouseup", handleScrollAreaMouseUp);
+        };
+    }, [handleScrollAreaMouseMove, handleScrollAreaMouseUp]);
     return (jsxs(Fragment, { children: [showBottomBar && (jsx(MenuMobileBottomBar, { items: bottomBarItems, selectedKey: selectedKey, onSelect: handleBottomBarSelect, onMenuPress: handleSidebarOpen, menuLabel: t.menuLabel, navAriaLabel: t.mobileNavAriaLabel, forceVisible: showNativeMenu && bottomBarItems.length === 0 })), jsx("button", { type: "button", "aria-label": t.closeSidebarAriaLabel, className: "menu-overlay ".concat(isOpenSidebar ? "menu-overlay--open" : ""), onClick: handleSidebarClose, tabIndex: isOpenSidebar ? 0 : -1 }), jsx("div", { className: "container__menu ".concat(isCollapsed
                     ? "container__menu--collapsed"
                     : "container__menu--expanded", " ").concat(isOpenSidebar ? "container__menu--mobile-open" : ""), "aria-hidden": !isOpenSidebar, children: jsxs("div", { className: "content__menu", children: [jsxs("div", { className: "content__menu--header", style: {

package/dist/types/components/menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,aAAa,CAAC;AAIrB,OAAO,KAAK,EACX,kBAAkB,EAElB,MAAM,cAAc,CAAC;AActB;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsPtD,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,aAAa,CAAC;AAIrB,OAAO,KAAK,EACX,kBAAkB,EAElB,MAAM,cAAc,CAAC;AActB;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0TtD,CAAC"}

package/dist/types/components/menu/_internal/menu-nav-list/MenuNavList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuNavList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/menu/_internal/menu-nav-list/MenuNavList.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,WAAW,mGA6ZvB,CAAC"}
+{"version":3,"file":"MenuNavList.d.ts","sourceRoot":"","sources":["../../../../../../src/components/menu/_internal/menu-nav-list/MenuNavList.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,WAAW,mGAyZvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@beweco/aurora-ui",
-	"version": "0.1.58",
+	"version": "0.1.60",
 	"description": "Bewe Aurora UI Component Library",
 	"main": "./dist/index.cjs.js",
 	"module": "./dist/index.esm.js",

package/dist/types/components/menu/sidebar-items.d.ts

@@ -1,3 +0,0 @@
-import { type MenuNavListItem } from "./_internal/menu-nav-list/MenuNavList.types";
-export declare const SIDEBAR_MENU_ITEMS: MenuNavListItem[];
-//# sourceMappingURL=sidebar-items.d.ts.map

package/dist/types/components/menu/sidebar-items.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar-items.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/sidebar-items.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEN,KAAK,eAAe,EACpB,MAAM,6CAA6C,CAAC;AAErD,eAAO,MAAM,kBAAkB,EAAE,eAAe,EAwH/C,CAAC"}