@ltht-react/menu 2.0.171 → 2.0.173

package/lib/molecules/action-menu-option.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ActionMenuOption as IActionMenuOption } from './action-menu';
+interface Props extends IActionMenuOption {
+    idPrefix: string;
+    index: number;
+}
+declare const ActionMenuOption: FC<Props>;
+export default ActionMenuOption;

package/lib/molecules/action-menu-option.js

@@ -0,0 +1,129 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var icon_1 = __importDefault(require("@ltht-react/icon"));
+var utils_1 = require("@ltht-react/utils");
+var hooks_1 = require("@ltht-react/hooks");
+var menu_1 = require("./menu");
+// Utility function to generate consistent IDs
+var generateActionId = function (idPrefix, text, index) {
+    var textId = (0, utils_1.stringToHtmlId)(text);
+    return "".concat(idPrefix, "action-menu-item-").concat(textId, "-").concat(index);
+};
+// Memoized icon renderer to prevent unnecessary re-renders
+var IconRenderer = (0, react_1.memo)(function (_a) {
+    var icon = _a.icon;
+    if (!icon)
+        return null;
+    return (0, jsx_runtime_1.jsx)(icon_1.default, __assign({}, icon));
+});
+IconRenderer.displayName = 'IconRenderer';
+var ActionMenuOption = function (_a) {
+    var idPrefix = _a.idPrefix, index = _a.index, text = _a.text, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, actions = _a.actions, _b = _a.exitFullScreenOnClick, exitFullScreenOnClick = _b === void 0 ? false : _b, clickHandler = _a.clickHandler, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c, rest = __rest(_a, ["idPrefix", "index", "text", "leftIcon", "rightIcon", "actions", "exitFullScreenOnClick", "clickHandler", "onClick", "disabled"]);
+    var _d = (0, hooks_1.useFullScreen)(), isFullscreen = _d.isFullscreen, exitFullScreen = _d.exitFullScreen;
+    // Memoize the action ID to prevent recalculation on every render
+    var actionMenuItemId = (0, react_1.useMemo)(function () { return generateActionId(idPrefix, text, index); }, [idPrefix, text, index]);
+    // Memoize icons to prevent unnecessary re-renders
+    var leftIconElement = (0, react_1.useMemo)(function () { return (0, jsx_runtime_1.jsx)(IconRenderer, { icon: leftIcon }); }, [leftIcon]);
+    var rightIconElement = (0, react_1.useMemo)(function () { return (0, jsx_runtime_1.jsx)(IconRenderer, { icon: rightIcon }); }, [rightIcon]);
+    var handleOnClick = (0, react_1.useCallback)(function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (disabled) {
+                        e.preventDefault();
+                        return [2 /*return*/];
+                    }
+                    if (!clickHandler && !onClick) {
+                        return [2 /*return*/];
+                    }
+                    if (!(exitFullScreenOnClick && isFullscreen)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, exitFullScreen()];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    // Execute the appropriate handler
+                    if (clickHandler) {
+                        clickHandler();
+                    }
+                    else if (onClick) {
+                        onClick(e);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [disabled, clickHandler, onClick, exitFullScreenOnClick, isFullscreen, exitFullScreen]);
+    // Determine if this is a submenu (has actions)
+    var isSubmenu = actions && actions.length > 0;
+    // Common props for both Menu and MenuItem
+    var commonProps = (0, react_1.useMemo)(function () { return (__assign({ id: actionMenuItemId, 'data-testid': actionMenuItemId, label: text, leftIcon: leftIconElement, rightIcon: rightIconElement, disabled: disabled }, rest)); }, [actionMenuItemId, text, leftIconElement, rightIconElement, disabled, rest]);
+    if (isSubmenu) {
+        return ((0, jsx_runtime_1.jsx)(menu_1.Menu, __assign({}, commonProps, { "aria-label": "".concat(text, " submenu"), "aria-expanded": "false", children: actions.map(function (action, actionIndex) { return ((0, jsx_runtime_1.jsx)(ActionMenuOption, __assign({ idPrefix: "".concat(actionMenuItemId, "_"), index: actionIndex }, action), "".concat(actionMenuItemId, "_menu_item_").concat(actionIndex))); }) })));
+    }
+    return (0, jsx_runtime_1.jsx)(menu_1.MenuItem, __assign({}, commonProps, { onClick: handleOnClick, "aria-label": text }));
+};
+exports.default = ActionMenuOption;
+//# sourceMappingURL=action-menu-option.js.map

package/lib/molecules/action-menu-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-menu-option.js","sourceRoot":"","sources":["../../src/molecules/action-menu-option.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAkE;AAClE,0DAAkD;AAClD,2CAAkD;AAClD,2CAAiD;AAEjD,+BAAuC;AAOvC,8CAA8C;AAC9C,IAAM,gBAAgB,GAAG,UAAC,QAAgB,EAAE,IAAY,EAAE,KAAa;IACrE,IAAM,MAAM,GAAG,IAAA,sBAAc,EAAC,IAAI,CAAC,CAAA;IACnC,OAAO,UAAG,QAAQ,8BAAoB,MAAM,cAAI,KAAK,CAAE,CAAA;AACzD,CAAC,CAAA;AAED,2DAA2D;AAC3D,IAAM,YAAY,GAAG,IAAA,YAAI,EAAuB,UAAC,EAAQ;QAAN,IAAI,UAAA;IACrD,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IACtB,OAAO,uBAAC,cAAI,eAAK,IAAI,EAAI,CAAA;AAC3B,CAAC,CAAC,CAAA;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,IAAM,gBAAgB,GAAc,UAAC,EAYpC;IAXC,IAAA,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,OAAO,aAAA,EACP,6BAA6B,EAA7B,qBAAqB,mBAAG,KAAK,KAAA,EAC7B,YAAY,kBAAA,EACZ,OAAO,aAAA,EACP,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EACb,IAAI,cAX4B,iIAYpC,CADQ;IAED,IAAA,KAAmC,IAAA,qBAAa,GAAE,EAAhD,YAAY,kBAAA,EAAE,cAAc,oBAAoB,CAAA;IAExD,iEAAiE;IACjE,IAAM,gBAAgB,GAAG,IAAA,eAAO,EAAC,cAAM,OAAA,gBAAgB,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,EAAvC,CAAuC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;IAExG,kDAAkD;IAClD,IAAM,eAAe,GAAG,IAAA,eAAO,EAAC,cAAM,OAAA,uBAAC,YAAY,IAAC,IAAI,EAAE,QAAQ,GAAI,EAAhC,CAAgC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEnF,IAAM,gBAAgB,GAAG,IAAA,eAAO,EAAC,cAAM,OAAA,uBAAC,YAAY,IAAC,IAAI,EAAE,SAAS,GAAI,EAAjC,CAAiC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEtF,IAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,UAAO,CAAgC;;;;oBACrC,IAAI,QAAQ,EAAE,CAAC;wBACb,CAAC,CAAC,cAAc,EAAE,CAAA;wBAClB,sBAAM;oBACR,CAAC;oBAED,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,EAAE,CAAC;wBAC9B,sBAAM;oBACR,CAAC;yBAEG,CAAA,qBAAqB,IAAI,YAAY,CAAA,EAArC,wBAAqC;oBACvC,qBAAM,cAAc,EAAE,EAAA;;oBAAtB,SAAsB,CAAA;;;oBAGxB,kCAAkC;oBAClC,IAAI,YAAY,EAAE,CAAC;wBACjB,YAAY,EAAE,CAAA;oBAChB,CAAC;yBAAM,IAAI,OAAO,EAAE,CAAC;wBACnB,OAAO,CAAC,CAAC,CAAC,CAAA;oBACZ,CAAC;;;;SACF,EACD,CAAC,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,cAAc,CAAC,CACvF,CAAA;IAED,+CAA+C;IAC/C,IAAM,SAAS,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAA;IAE/C,0CAA0C;IAC1C,IAAM,WAAW,GAAG,IAAA,eAAO,EACzB,cAAM,OAAA,YACJ,EAAE,EAAE,gBAAgB,EACpB,aAAa,EAAE,gBAAgB,EAC/B,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,UAAA,IACL,IAAI,EACP,EARI,CAQJ,EACF,CAAC,gBAAgB,EAAE,IAAI,EAAE,eAAe,EAAE,gBAAgB,EAAE,QAAQ,EAAE,IAAI,CAAC,CAC5E,CAAA;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,uBAAC,WAAI,eAAK,WAAW,kBAAc,UAAG,IAAI,aAAU,mBAAgB,OAAO,YACxE,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,WAAW,IAAK,OAAA,CACpC,uBAAC,gBAAgB,aAEf,QAAQ,EAAE,UAAG,gBAAgB,MAAG,EAChC,KAAK,EAAE,WAAW,IACd,MAAM,GAHL,UAAG,gBAAgB,wBAAc,WAAW,CAAE,CAInD,CACH,EAPqC,CAOrC,CAAC,IACG,CACR,CAAA;IACH,CAAC;IAED,OAAO,uBAAC,eAAQ,eAAK,WAAW,IAAE,OAAO,EAAE,aAAa,gBAAc,IAAI,IAAI,CAAA;AAChF,CAAC,CAAA;AAED,kBAAe,gBAAgB,CAAA"}

package/lib/molecules/action-menu.d.ts

@@ -1,10 +1,11 @@
 import { FC, HTMLAttributes } from 'react';
 import { IconProps } from '@ltht-react/icon';
 import { ButtonProps } from '@ltht-react/button';
-interface IProps extends HTMLAttributes<HTMLButtonElement> {
+interface IProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<HTMLButtonElement> {
     actions: ActionMenuOption[];
     menuButtonOptions?: IconButtonMenuProps | ButtonMenuProps;
     disabled?: boolean;
+    root?: React.MutableRefObject<T | null>;
 }
 interface IconButtonMenuProps {
     type: 'icon';
@@ -23,6 +24,7 @@ export interface ActionMenuOption extends HTMLAttributes<HTMLButtonElement> {
     leftIcon?: IconProps;
     rightIcon?: IconProps;
     disabled?: boolean;
+    exitFullScreenOnClick?: boolean;
     actions?: ActionMenuOption[];
 }
 export declare const DefaultTrigger: IconButtonMenuProps;

package/lib/molecules/action-menu.js

@@ -27,9 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultTrigger = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var icon_1 = __importDefault(require("@ltht-react/icon"));
-var utils_1 = require("@ltht-react/utils");
 var menu_1 = require("./menu");
+var action_menu_option_1 = __importDefault(require("./action-menu-option"));
 exports.DefaultTrigger = {
     type: 'icon',
     iconProps: {
@@ -40,16 +39,7 @@ exports.DefaultTrigger = {
 var ActionMenu = function (_a) {
     var _b = _a.id, id = _b === void 0 ? 'action-menu-button' : _b, actions = _a.actions, disabled = _a.disabled, _c = _a.menuButtonOptions, menuButtonOptions = _c === void 0 ? __assign(__assign({}, exports.DefaultTrigger), { disabled: disabled }) : _c, rest = __rest(_a, ["id", "actions", "disabled", "menuButtonOptions"]);
     var menuItemIdPrefix = id ? "".concat(id, "-") : '';
-    return ((0, jsx_runtime_1.jsx)(menu_1.Menu, __assign({ rootTrigger: menuButtonOptions, "data-testid": id }, rest, { children: actions.map(function (action, index) { return renderAction(menuItemIdPrefix, action, index); }) })));
-};
-var renderAction = function (idPrefix, _a, index) {
-    var text = _a.text, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, clickHandler = _a.clickHandler, onClick = _a.onClick, actions = _a.actions, rest = __rest(_a, ["text", "leftIcon", "rightIcon", "clickHandler", "onClick", "actions"]);
-    var textId = (0, utils_1.stringToHtmlId)(text);
-    var actionMenuItemId = "".concat(idPrefix, "action-menu-item-").concat(textId, "-").concat(index);
-    if (!!(actions === null || actions === void 0 ? void 0 : actions.length) && actions.length > 0) {
-        return ((0, jsx_runtime_1.jsx)(menu_1.Menu, __assign({ id: actionMenuItemId, "data-testid": actionMenuItemId, label: text, leftIcon: leftIcon ? (0, jsx_runtime_1.jsx)(icon_1.default, __assign({}, leftIcon)) : null, rightIcon: rightIcon ? (0, jsx_runtime_1.jsx)(icon_1.default, __assign({}, rightIcon)) : null }, rest, { children: actions.map(function (action, index) { return renderAction(actionMenuItemId, action, index); }) }), actionMenuItemId));
-    }
-    return ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, __assign({ id: actionMenuItemId, "data-testid": actionMenuItemId, label: text, leftIcon: leftIcon ? (0, jsx_runtime_1.jsx)(icon_1.default, __assign({}, leftIcon)) : null, rightIcon: rightIcon ? (0, jsx_runtime_1.jsx)(icon_1.default, __assign({}, rightIcon)) : null, onClick: clickHandler !== null && clickHandler !== void 0 ? clickHandler : onClick }, rest), actionMenuItemId));
+    return ((0, jsx_runtime_1.jsx)(menu_1.Menu, __assign({ rootTrigger: menuButtonOptions, "data-testid": id }, rest, { children: actions.map(function (action, index) { return ((0, jsx_runtime_1.jsx)(action_menu_option_1.default, __assign({ idPrefix: menuItemIdPrefix, index: index }, action), "".concat(menuItemIdPrefix, "_menu_item_").concat(index))); }) })));
 };
 exports.default = ActionMenu;
 //# sourceMappingURL=action-menu.js.map

package/lib/molecules/action-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-menu.js","sourceRoot":"","sources":["../../src/molecules/action-menu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,0DAAkD;AAClD,2CAAkD;AAGlD,+BAAuC;AA8B1B,QAAA,cAAc,GAAwB;IACjD,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE;QACT,IAAI,EAAE,mBAAmB;QACzB,IAAI,EAAE,OAAO;KACd;CACF,CAAA;AAED,IAAM,UAAU,GAAe,UAAC,EAM/B;IALC,IAAA,UAAyB,EAAzB,EAAE,mBAAG,oBAAoB,KAAA,EACzB,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,yBAAmD,EAAnD,iBAAiB,yCAAQ,sBAAc,KAAE,QAAQ,UAAA,QAAE,EAChD,IAAI,cALuB,kDAM/B,CADQ;IAEP,IAAM,gBAAgB,GAAG,EAAE,CAAC,CAAC,CAAC,UAAG,EAAE,MAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAE3C,OAAO,CACL,uBAAC,WAAI,aAAC,WAAW,EAAE,iBAAiB,iBAAe,EAAE,IAAM,IAAI,cAC5D,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,IAAK,OAAA,YAAY,CAAC,gBAAgB,EAAE,MAAM,EAAE,KAAK,CAAC,EAA7C,CAA6C,CAAC,IACzE,CACR,CAAA;AACH,CAAC,CAAA;AAED,IAAM,YAAY,GAAG,UACnB,QAAgB,EAChB,EAAwF,EACxF,KAAa;IADX,IAAA,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,OAAO,aAAA,EAAE,OAAO,aAAA,EAAK,IAAI,cAApE,uEAAsE,CAAF;IAGpE,IAAM,MAAM,GAAG,IAAA,sBAAc,EAAC,IAAI,CAAC,CAAA;IACnC,IAAM,gBAAgB,GAAG,UAAG,QAAQ,8BAAoB,MAAM,cAAI,KAAK,CAAE,CAAA;IAEzE,IAAI,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAA,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC5C,OAAO,CACL,uBAAC,WAAI,aAEH,EAAE,EAAE,gBAAgB,iBACP,gBAAgB,EAC7B,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,uBAAC,cAAI,eAAK,QAAQ,EAAI,CAAC,CAAC,CAAC,IAAI,EAClD,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,uBAAC,cAAI,eAAK,SAAS,EAAI,CAAC,CAAC,CAAC,IAAI,IACjD,IAAI,cAEP,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,IAAK,OAAA,YAAY,CAAC,gBAAgB,EAAE,MAAM,EAAE,KAAK,CAAC,EAA7C,CAA6C,CAAC,KARzE,gBAAgB,CAShB,CACR,CAAA;IACH,CAAC;IAED,OAAO,CACL,uBAAC,eAAQ,aAEP,EAAE,EAAE,gBAAgB,iBACP,gBAAgB,EAC7B,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,uBAAC,cAAI,eAAK,QAAQ,EAAI,CAAC,CAAC,CAAC,IAAI,EAClD,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,uBAAC,cAAI,eAAK,SAAS,EAAI,CAAC,CAAC,CAAC,IAAI,EACrD,OAAO,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,OAAO,IAC5B,IAAI,GAPH,gBAAgB,CAQrB,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,UAAU,CAAA"}
+{"version":3,"file":"action-menu.js","sourceRoot":"","sources":["../../src/molecules/action-menu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,+BAA6B;AAC7B,4EAA6C;AAgChC,QAAA,cAAc,GAAwB;IACjD,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE;QACT,IAAI,EAAE,mBAAmB;QACzB,IAAI,EAAE,OAAO;KACd;CACF,CAAA;AAED,IAAM,UAAU,GAAe,UAAC,EAM/B;IALC,IAAA,UAAyB,EAAzB,EAAE,mBAAG,oBAAoB,KAAA,EACzB,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,yBAAmD,EAAnD,iBAAiB,yCAAQ,sBAAc,KAAE,QAAQ,UAAA,QAAE,EAChD,IAAI,cALuB,kDAM/B,CADQ;IAEP,IAAM,gBAAgB,GAAG,EAAE,CAAC,CAAC,CAAC,UAAG,EAAE,MAAG,CAAC,CAAC,CAAC,EAAE,CAAA;IAE3C,OAAO,CACL,uBAAC,WAAI,aAAC,WAAW,EAAE,iBAAiB,iBAAe,EAAE,IAAM,IAAI,cAC5D,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,IAAK,OAAA,CAC9B,uBAAC,4BAAU,aAET,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,KAAK,IACR,MAAM,GAHL,UAAG,gBAAgB,wBAAc,KAAK,CAAE,CAI7C,CACH,EAP+B,CAO/B,CAAC,IACG,CACR,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/menu",
-  "version": "2.0.171",
+  "version": "2.0.173",
   "description": "ltht-react styled Menu component.",
   "author": "LTHT",
   "homepage": "",
@@ -29,11 +29,12 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@floating-ui/react": "^0.27.15",
-    "@ltht-react/button": "^2.0.171",
-    "@ltht-react/icon": "^2.0.171",
-    "@ltht-react/styles": "^2.0.171",
-    "@ltht-react/utils": "^2.0.171",
+    "@ltht-react/button": "^2.0.173",
+    "@ltht-react/hooks": "^2.0.173",
+    "@ltht-react/icon": "^2.0.173",
+    "@ltht-react/styles": "^2.0.173",
+    "@ltht-react/utils": "^2.0.173",
     "react": "^18.2.0"
   },
-  "gitHead": "13fe4e114f4d2c06abb58682d94a4ebe6801945e"
+  "gitHead": "ae3f8693ad59993242b1268375fe95ae3db4640a"
 }

package/src/molecules/action-menu-option.tsx

@@ -0,0 +1,110 @@
+import { useMemo, MouseEvent, memo, FC, useCallback } from 'react'
+import Icon, { IconProps } from '@ltht-react/icon'
+import { stringToHtmlId } from '@ltht-react/utils'
+import { useFullScreen } from '@ltht-react/hooks'
+import { ActionMenuOption as IActionMenuOption } from './action-menu'
+import { Menu, MenuItem } from './menu'
+
+interface Props extends IActionMenuOption {
+  idPrefix: string
+  index: number
+}
+
+// Utility function to generate consistent IDs
+const generateActionId = (idPrefix: string, text: string, index: number): string => {
+  const textId = stringToHtmlId(text)
+  return `${idPrefix}action-menu-item-${textId}-${index}`
+}
+
+// Memoized icon renderer to prevent unnecessary re-renders
+const IconRenderer = memo<{ icon?: IconProps }>(({ icon }) => {
+  if (!icon) return null
+  return <Icon {...icon} />
+})
+
+IconRenderer.displayName = 'IconRenderer'
+
+const ActionMenuOption: FC<Props> = ({
+  idPrefix,
+  index,
+  text,
+  leftIcon,
+  rightIcon,
+  actions,
+  exitFullScreenOnClick = false,
+  clickHandler,
+  onClick,
+  disabled = false,
+  ...rest
+}) => {
+  const { isFullscreen, exitFullScreen } = useFullScreen()
+
+  // Memoize the action ID to prevent recalculation on every render
+  const actionMenuItemId = useMemo(() => generateActionId(idPrefix, text, index), [idPrefix, text, index])
+
+  // Memoize icons to prevent unnecessary re-renders
+  const leftIconElement = useMemo(() => <IconRenderer icon={leftIcon} />, [leftIcon])
+
+  const rightIconElement = useMemo(() => <IconRenderer icon={rightIcon} />, [rightIcon])
+
+  const handleOnClick = useCallback(
+    async (e: MouseEvent<HTMLButtonElement>) => {
+      if (disabled) {
+        e.preventDefault()
+        return
+      }
+
+      if (!clickHandler && !onClick) {
+        return
+      }
+
+      if (exitFullScreenOnClick && isFullscreen) {
+        await exitFullScreen()
+      }
+
+      // Execute the appropriate handler
+      if (clickHandler) {
+        clickHandler()
+      } else if (onClick) {
+        onClick(e)
+      }
+    },
+    [disabled, clickHandler, onClick, exitFullScreenOnClick, isFullscreen, exitFullScreen]
+  )
+
+  // Determine if this is a submenu (has actions)
+  const isSubmenu = actions && actions.length > 0
+
+  // Common props for both Menu and MenuItem
+  const commonProps = useMemo(
+    () => ({
+      id: actionMenuItemId,
+      'data-testid': actionMenuItemId,
+      label: text,
+      leftIcon: leftIconElement,
+      rightIcon: rightIconElement,
+      disabled,
+      ...rest,
+    }),
+    [actionMenuItemId, text, leftIconElement, rightIconElement, disabled, rest]
+  )
+
+  if (isSubmenu) {
+    return (
+      <Menu {...commonProps} aria-label={`${text} submenu`} aria-expanded="false">
+        {actions.map((action, actionIndex) => (
+          <ActionMenuOption
+            key={`${actionMenuItemId}_menu_item_${actionIndex}`}
+            idPrefix={`${actionMenuItemId}_`}
+            index={actionIndex}
+            {...action}
+          />
+        ))}
+      </Menu>
+    )
+  }
+
+  return <MenuItem {...commonProps} onClick={handleOnClick} aria-label={text} />
+}
+
+export default ActionMenuOption

package/src/molecules/action-menu.tsx

@@ -1,14 +1,15 @@
-import { FC, HTMLAttributes, ReactNode } from 'react'
-import Icon, { IconProps } from '@ltht-react/icon'
-import { stringToHtmlId } from '@ltht-react/utils'
+import { FC, HTMLAttributes } from 'react'
+import { IconProps } from '@ltht-react/icon'
 import { ButtonProps } from '@ltht-react/button'
 
-import { Menu, MenuItem } from './menu'
+import { Menu } from './menu'
+import MenuOption from './action-menu-option'
 
-interface IProps extends HTMLAttributes<HTMLButtonElement> {
+interface IProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<HTMLButtonElement> {
   actions: ActionMenuOption[]
   menuButtonOptions?: IconButtonMenuProps | ButtonMenuProps
   disabled?: boolean
+  root?: React.MutableRefObject<T | null>
 }
 
 interface IconButtonMenuProps {
@@ -30,6 +31,7 @@ export interface ActionMenuOption extends HTMLAttributes<HTMLButtonElement> {
   leftIcon?: IconProps
   rightIcon?: IconProps
   disabled?: boolean
+  exitFullScreenOnClick?: boolean
   actions?: ActionMenuOption[]
 }
 
@@ -52,47 +54,16 @@ const ActionMenu: FC<IProps> = ({
 
   return (
     <Menu rootTrigger={menuButtonOptions} data-testid={id} {...rest}>
-      {actions.map((action, index) => renderAction(menuItemIdPrefix, action, index))}
+      {actions.map((action, index) => (
+        <MenuOption
+          key={`${menuItemIdPrefix}_menu_item_${index}`}
+          idPrefix={menuItemIdPrefix}
+          index={index}
+          {...action}
+        />
+      ))}
     </Menu>
   )
 }
 
-const renderAction = (
-  idPrefix: string,
-  { text, leftIcon, rightIcon, clickHandler, onClick, actions, ...rest }: ActionMenuOption,
-  index: number
-): ReactNode => {
-  const textId = stringToHtmlId(text)
-  const actionMenuItemId = `${idPrefix}action-menu-item-${textId}-${index}`
-
-  if (!!actions?.length && actions.length > 0) {
-    return (
-      <Menu
-        key={actionMenuItemId}
-        id={actionMenuItemId}
-        data-testid={actionMenuItemId}
-        label={text}
-        leftIcon={leftIcon ? <Icon {...leftIcon} /> : null}
-        rightIcon={rightIcon ? <Icon {...rightIcon} /> : null}
-        {...rest}
-      >
-        {actions.map((action, index) => renderAction(actionMenuItemId, action, index))}
-      </Menu>
-    )
-  }
-
-  return (
-    <MenuItem
-      key={actionMenuItemId}
-      id={actionMenuItemId}
-      data-testid={actionMenuItemId}
-      label={text}
-      leftIcon={leftIcon ? <Icon {...leftIcon} /> : null}
-      rightIcon={rightIcon ? <Icon {...rightIcon} /> : null}
-      onClick={clickHandler ?? onClick}
-      {...rest}
-    />
-  )
-}
-
 export default ActionMenu