@digitaldefiance/express-suite-react-components 4.23.1 → 4.23.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/package.json +1 -1
  2. package/src/components/DropdownMenu.d.ts +4 -0
  3. package/src/components/DropdownMenu.d.ts.map +1 -1
  4. package/src/components/DropdownMenu.js +13 -7
  5. package/src/components/TopMenu.d.ts +4 -0
  6. package/src/components/TopMenu.d.ts.map +1 -1
  7. package/src/components/TopMenu.js +1 -1
  8. package/src/interfaces/IMenuConfig.d.ts +4 -0
  9. package/src/interfaces/IMenuConfig.d.ts.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digitaldefiance/express-suite-react-components",
3
- "version": "4.23.1",
3
+ "version": "4.23.2",
4
4
  "homepage": "https://github.com/Digital-Defiance/react-components",
5
5
  "description": "React MUI components for Digital Defiance Express Suite",
6
6
  "repository": {
package/src/components/DropdownMenu.d.ts CHANGED
@@ -3,6 +3,10 @@ import { MenuType } from '../types/MenuType';
3
3
  interface DropdownMenuProps {
4
4
  menuType: MenuType;
5
5
  menuIcon: ReactElement;
6
+ /** When true, the entire icon button is hidden if there are no menu options. Defaults to false. */
7
+ hideWhenEmpty?: boolean;
8
+ /** Optional callback invoked when the icon button is clicked. When provided alongside menu options, the action fires first and the dropdown still opens. When there are no menu options, only the action fires. */
9
+ action?: () => void;
6
10
  }
7
11
  export declare const DropdownMenu: FC<DropdownMenuProps>;
8
12
  export default DropdownMenu;
package/src/components/DropdownMenu.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/DropdownMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAc,YAAY,EAAyB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI7C,UAAU,iBAAiB;IACzB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA8E9C,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/DropdownMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAc,YAAY,EAAyB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI7C,UAAU,iBAAiB;IACzB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;IACvB,mGAAmG;IACnG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mNAAmN;IACnN,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAsF9C,CAAC;AAEF,eAAe,YAAY,CAAC"}
package/src/components/DropdownMenu.js CHANGED
@@ -6,7 +6,7 @@ const material_1 = require("@mui/material");
6
6
  const react_1 = require("react");
7
7
  const react_router_dom_1 = require("react-router-dom");
8
8
  const MenuContext_1 = require("../contexts/MenuContext");
9
- const DropdownMenu = ({ menuType, menuIcon }) => {
9
+ const DropdownMenu = ({ menuType, menuIcon, hideWhenEmpty = false, action }) => {
10
10
  const { getMenuOptions } = (0, MenuContext_1.useMenu)();
11
11
  const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
12
12
  const navigate = (0, react_router_dom_1.useNavigate)();
@@ -30,14 +30,20 @@ const DropdownMenu = ({ menuType, menuIcon }) => {
30
30
  }
31
31
  handleClose(); // Call handleClose after handling the click
32
32
  }, [navigate, handleClose]);
33
- const handleClick = (0, react_1.useCallback)((event) => {
34
- setAnchorEl(event.currentTarget);
35
- }, []);
36
33
  const menuItems = getMenuOptions(menuType, false);
37
- if (menuItems.length === 0) {
34
+ const hasItems = menuItems.length > 0;
35
+ const handleClick = (0, react_1.useCallback)((event) => {
36
+ if (action) {
37
+ action();
38
+ }
39
+ if (hasItems) {
40
+ setAnchorEl(event.currentTarget);
41
+ }
42
+ }, [action, hasItems]);
43
+ if (!hasItems && hideWhenEmpty) {
38
44
  return null;
39
45
  }
40
- return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { color: "inherit", onClick: handleClick, children: menuIcon }), (0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, TransitionComponent: material_1.Fade, sx: {
46
+ return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { color: "inherit", onClick: (hasItems || action) ? handleClick : undefined, children: menuIcon }), hasItems && ((0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, TransitionComponent: material_1.Fade, sx: {
41
47
  '& .MuiPopover-paper': {
42
48
  opacity: 0.5,
43
49
  overflow: 'visible',
@@ -51,7 +57,7 @@ const DropdownMenu = ({ menuType, menuIcon }) => {
51
57
  height: 24,
52
58
  },
53
59
  ...option.additionalSx
54
- }, children: [option.icon, option.label] }, option.id))) })] }));
60
+ }, children: [option.icon, option.label] }, option.id))) }))] }));
55
61
  };
56
62
  exports.DropdownMenu = DropdownMenu;
57
63
  exports.default = exports.DropdownMenu;
package/src/components/TopMenu.d.ts CHANGED
@@ -15,6 +15,10 @@ export interface AdditionalDropdownMenu {
15
15
  menuType: MenuType;
16
16
  menuIcon: ReactElement;
17
17
  priority?: number;
18
+ /** Optional callback invoked when the icon button is clicked. */
19
+ action?: () => void;
20
+ /** When true, the menu icon is hidden if there are no sub-options. Defaults to false. */
21
+ hideWhenEmpty?: boolean;
18
22
  }
19
23
  export interface TopMenuProps {
20
24
  Logo: React.ReactNode;
package/src/components/TopMenu.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TopMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/TopMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIX,MAAM,iCAAiC,CAAC;AAUzC,OAAO,KAAK,EAAE,EAAe,EAAE,EAAE,YAAY,EAAiC,MAAM,OAAO,CAAC;AAK5F,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE;YACX,QAAQ,EAAE,MAAM,CAAC;YACjB,SAAS,EAAE,MAAM,CAAC;YAClB,MAAM,EAAE,MAAM,CAAC;YACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAC;IAChD,mIAAmI;IACnI,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAmHpC,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"TopMenu.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/components/TopMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIX,MAAM,iCAAiC,CAAC;AAUzC,OAAO,KAAK,EAAE,EAAe,EAAE,EAAE,YAAY,EAAiC,MAAM,OAAO,CAAC;AAK5F,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE;YACX,QAAQ,EAAE,MAAM,CAAC;YACjB,SAAS,EAAE,MAAM,CAAC;YAClB,MAAM,EAAE,MAAM,CAAC;YACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yFAAyF;IACzF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAC;IAChD,mIAAmI;IACnI,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAqHpC,CAAC;AAEF,eAAe,OAAO,CAAC"}
package/src/components/TopMenu.js CHANGED
@@ -44,7 +44,7 @@ const TopMenu = ({ Logo, additionalMenus, actions, constants, showTitle }) => {
44
44
  marginRight: 2,
45
45
  display: 'flex',
46
46
  alignItems: 'center',
47
- }, children: Logo }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", sx: { flexGrow: 1 }, children: (showTitle !== false) ? siteTitle : '\u00A0' }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: [isAuthenticated ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/dashboard", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Dashboard) }), allMenus.map((menu, index) => menu.isUserMenu ? ((0, jsx_runtime_1.jsx)(UserMenu_1.UserMenu, {}, `user-menu`)) : ((0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu, { menuType: menu.menuType, menuIcon: menu.menuIcon }, `menu-${index}`)))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/login", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_LoginButton) }), (0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/register", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.RegisterButton) })] })), isAuthenticated && actions, (0, jsx_runtime_1.jsx)(UserLanguageSelector_1.UserLanguageSelector, {})] })] }), (0, jsx_runtime_1.jsx)(SideMenu_1.SideMenu, { isOpen: isSideMenuOpen, onClose: handleCloseSideMenu })] }));
47
+ }, children: Logo }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", sx: { flexGrow: 1 }, children: (showTitle !== false) ? siteTitle : '\u00A0' }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: [isAuthenticated ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/dashboard", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Common_Dashboard) }), allMenus.map((menu, index) => menu.isUserMenu ? ((0, jsx_runtime_1.jsx)(UserMenu_1.UserMenu, {}, `user-menu`)) : ((0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu, { menuType: menu.menuType, menuIcon: menu.menuIcon, action: menu.action, hideWhenEmpty: menu.hideWhenEmpty }, `menu-${index}`)))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/login", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.Login_LoginButton) }), (0, jsx_runtime_1.jsx)(material_1.Button, { color: "inherit", component: react_router_dom_1.Link, to: "/register", children: tComponent(suite_core_lib_1.SuiteCoreComponentId, suite_core_lib_1.SuiteCoreStringKey.RegisterButton) })] })), isAuthenticated && actions, (0, jsx_runtime_1.jsx)(UserLanguageSelector_1.UserLanguageSelector, {})] })] }), (0, jsx_runtime_1.jsx)(SideMenu_1.SideMenu, { isOpen: isSideMenuOpen, onClose: handleCloseSideMenu })] }));
48
48
  };
49
49
  exports.TopMenu = TopMenu;
50
50
  exports.default = exports.TopMenu;
package/src/interfaces/IMenuConfig.d.ts CHANGED
@@ -7,5 +7,9 @@ export interface IMenuConfig {
7
7
  priority?: number;
8
8
  options: IMenuOption[];
9
9
  isUserMenu?: boolean;
10
+ /** Optional callback invoked when the icon button is clicked. */
11
+ action?: () => void;
12
+ /** When true, the menu icon is hidden if there are no sub-options. Defaults to false. */
13
+ hideWhenEmpty?: boolean;
10
14
  }
11
15
  //# sourceMappingURL=IMenuConfig.d.ts.map
package/src/interfaces/IMenuConfig.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IMenuConfig.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/interfaces/IMenuConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
1
+ {"version":3,"file":"IMenuConfig.d.ts","sourceRoot":"","sources":["../../../../../packages/digitaldefiance-express-suite-react-components/src/interfaces/IMenuConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yFAAyF;IACzF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}