@databiosphere/findable-ui 6.0.0 → 8.0.0

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.styles.js

@@ -1,19 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderActions = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../../../../../theme/common/breakpoints");
-exports.HeaderActions = styled_1.default.div `
+import styled from "@emotion/styled";
+import { DESKTOP_SM } from "../../../../../../../../theme/common/breakpoints";
+export const HeaderActions = styled.div `
   align-items: center;
   display: flex;
   flex: 1;
   gap: 8px;
   justify-content: flex-end;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.DESKTOP_SM)} {
+  ${({ theme }) => theme.breakpoints.up(DESKTOP_SM)} {
     flex: none;
   }
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.js

@@ -1,41 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Authentication = void 0;
-const router_1 = require("next/router");
-const react_1 = __importStar(require("react"));
-const useAuthentication_1 = require("../../../../../../../../../../hooks/useAuthentication/useAuthentication");
-const authenticationMenu_1 = require("./components/AuthenticationMenu/authenticationMenu");
-const requestAuthentication_1 = require("./components/RequestAuthentication/requestAuthentication");
-const Authentication = ({ authenticationEnabled, closeMenu, }) => {
-    const { isAuthenticated, requestAuthentication, userProfile } = (0, useAuthentication_1.useAuthentication)();
-    const router = (0, router_1.useRouter)();
-    const onLogout = (0, react_1.useCallback)(() => {
+import { useRouter } from "next/router";
+import React, { useCallback } from "react";
+import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
+import { AuthenticationMenu } from "./components/AuthenticationMenu/authenticationMenu";
+import { RequestAuthentication } from "./components/RequestAuthentication/requestAuthentication";
+export const Authentication = ({ authenticationEnabled, closeMenu, }) => {
+    const { isAuthenticated, requestAuthentication, userProfile } = useAuthentication();
+    const router = useRouter();
+    const onLogout = useCallback(() => {
         location.href = router.basePath;
     }, [router]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, authenticationEnabled &&
-        (isAuthenticated && userProfile ? (react_1.default.createElement(authenticationMenu_1.AuthenticationMenu, { onLogout: onLogout, userProfile: userProfile })) : (react_1.default.createElement(requestAuthentication_1.RequestAuthentication, { closeMenu: closeMenu, requestAuthorization: requestAuthentication })))));
+    return (React.createElement(React.Fragment, null, authenticationEnabled &&
+        (isAuthenticated && userProfile ? (React.createElement(AuthenticationMenu, { onLogout: onLogout, userProfile: userProfile })) : (React.createElement(RequestAuthentication, { closeMenu: closeMenu, requestAuthorization: requestAuthentication })))));
 };
-exports.Authentication = Authentication;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.js

@@ -1,34 +1,8 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AuthenticationMenu = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const authenticationMenu_styles_1 = require("./authenticationMenu.styles");
-const AuthenticationMenu = ({ onLogout, userProfile, }) => {
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+import { MenuItem } from "@mui/material";
+import React, { useState } from "react";
+import { AuthenticationMenu as Menu, Avatar, UserIcon, UserNames, UserSummary, } from "./authenticationMenu.styles";
+export const AuthenticationMenu = ({ onLogout, userProfile, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const onOpenMenu = (event) => {
         setAnchorEl(event.currentTarget);
@@ -36,22 +10,21 @@ const AuthenticationMenu = ({ onLogout, userProfile, }) => {
     const onCloseMenu = () => {
         setAnchorEl(null);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(authenticationMenu_styles_1.UserIcon, { onClick: onOpenMenu },
-            react_1.default.createElement(authenticationMenu_styles_1.Avatar, { alt: `${userProfile.given_name} ${userProfile.family_name}`, src: userProfile.picture })),
-        react_1.default.createElement(authenticationMenu_styles_1.AuthenticationMenu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, autoFocus: false, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(UserIcon, { onClick: onOpenMenu },
+            React.createElement(Avatar, { alt: `${userProfile.given_name} ${userProfile.family_name}`, src: userProfile.picture })),
+        React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, autoFocus: false, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
                 horizontal: "right",
                 vertical: "top",
             } },
-            react_1.default.createElement(authenticationMenu_styles_1.UserSummary, null,
+            React.createElement(UserSummary, null,
                 "You are signed in as:",
-                react_1.default.createElement(authenticationMenu_styles_1.UserNames, { noWrap: true },
+                React.createElement(UserNames, { noWrap: true },
                     userProfile.given_name,
                     " ",
                     userProfile.family_name)),
-            react_1.default.createElement(material_1.MenuItem, { onClick: () => {
+            React.createElement(MenuItem, { onClick: () => {
                     onCloseMenu();
                     onLogout();
                 } }, "Logout"))));
 };
-exports.AuthenticationMenu = AuthenticationMenu;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.stories.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AuthenticationMenuStory = void 0;
-const react_1 = __importDefault(require("react"));
-const authenticationMenu_1 = require("./authenticationMenu");
-exports.default = {
+import React from "react";
+import { AuthenticationMenu } from "./authenticationMenu";
+export default {
     argTypes: {
         onLogout: {
             description: "Callback to be called when 'Logout' button is clicked",
@@ -15,12 +9,12 @@ exports.default = {
             description: "User profile with name and avatar",
         },
     },
-    component: authenticationMenu_1.AuthenticationMenu,
+    component: AuthenticationMenu,
     title: "Components/Navigation/AuthenticationMenu",
 };
-const AuthenticationMenuTemplate = (args) => react_1.default.createElement(authenticationMenu_1.AuthenticationMenu, Object.assign({}, args));
-exports.AuthenticationMenuStory = AuthenticationMenuTemplate.bind({});
-exports.AuthenticationMenuStory.args = {
+const AuthenticationMenuTemplate = (args) => React.createElement(AuthenticationMenu, { ...args });
+export const AuthenticationMenuStory = AuthenticationMenuTemplate.bind({});
+AuthenticationMenuStory.args = {
     userProfile: {
         email: "john@smith.com",
         email_verified: true,

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.js

@@ -1,18 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = exports.UserNames = exports.UserSummary = exports.UserIcon = exports.AuthenticationMenu = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-exports.AuthenticationMenu = (0, styled_1.default)(material_1.Menu) `
+import styled from "@emotion/styled";
+import { Avatar as MAvatar, IconButton as MIconButton, Menu as MMenu, MenuItem, Typography, } from "@mui/material";
+export const AuthenticationMenu = styled(MMenu) `
   margin: 4px 0;
 `;
-exports.UserIcon = (0, styled_1.default)(material_1.IconButton) `
+export const UserIcon = styled(MIconButton) `
   padding: 0;
 `;
-exports.UserSummary = (0, styled_1.default)(material_1.MenuItem) `
+export const UserSummary = styled(MenuItem) `
   display: block;
   cursor: inherit;
   border-bottom: 1px solid ${({ theme }) => theme.palette.smoke.main};
@@ -24,11 +18,11 @@ exports.UserSummary = (0, styled_1.default)(material_1.MenuItem) `
     background: inherit;
   }
 `;
-exports.UserNames = (0, styled_1.default)(material_1.Typography) `
+export const UserNames = styled(Typography) `
   font-weight: 500;
   max-width: 200px;
 `;
-exports.Avatar = (0, styled_1.default)(material_1.Avatar) `
+export const Avatar = styled(MAvatar) `
   height: 32px;
   width: 32px;
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.js

@@ -1,27 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
+import { IconButton as MIconButton } from "@mui/material";
+import React from "react";
+import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
+import { Button } from "./requestAuthentication.styles";
+export const RequestAuthentication = ({ closeMenu, requestAuthorization, }) => {
+    const { mdUp } = useBreakpoint();
+    return mdUp ? (React.createElement(Button, { onClick: requestAuthorization, startIcon: React.createElement(LoginRoundedIcon, null), variant: "nav" }, "Sign in")) : (React.createElement(MIconButton, { color: "ink", onClick: () => {
+            closeMenu();
+            requestAuthorization();
+        } },
+        React.createElement(LoginRoundedIcon, null)));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RequestAuthentication = void 0;
-const LoginRounded_1 = __importDefault(require("@mui/icons-material/LoginRounded"));
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const useBreakpointHelper_1 = require("../../../../../../../../../../../../hooks/useBreakpointHelper");
-const breakpoints_1 = require("../../../../../../../../../../../../theme/common/breakpoints");
-const constants_1 = require("../../../../../../../../common/constants");
-const requestAuthentication_styles_1 = require("./requestAuthentication.styles");
-const RequestAuthentication = ({ closeMenu, requestAuthorization, }) => {
-    const smDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP_SM);
-    const switchProps = constants_1.SWITCH_TRANSITION_PROPS;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Fade, Object.assign({ in: smDesktop }, switchProps),
-            react_1.default.createElement(requestAuthentication_styles_1.Button, { onClick: requestAuthorization, startIcon: react_1.default.createElement(LoginRounded_1.default, null), variant: "nav" }, "Sign in")),
-        react_1.default.createElement(material_1.Fade, Object.assign({ in: !smDesktop }, switchProps),
-            react_1.default.createElement(material_1.IconButton, { color: "ink", onClick: () => {
-                    closeMenu();
-                    requestAuthorization();
-                } },
-                react_1.default.createElement(LoginRounded_1.default, null)))));
-};
-exports.RequestAuthentication = RequestAuthentication;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.styles.js

@@ -1,15 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const fonts_1 = require("../../../../../../../../../../../../styles/common/mixins/fonts");
-exports.Button = (0, styled_1.default)(material_1.Button) `
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+import { textBody500 } from "../../../../../../../../../../../../styles/common/mixins/fonts";
+export const Button = styled(MButton) `
   & {
-    ${fonts_1.textBody500};
+    ${textBody500};
     padding: 6px 12px;
   }
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Content/components/Navigation/navigation.styles.js

@@ -1,13 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DrawerNavigation = exports.Navigation = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const fonts_1 = require("../../../../../../../../../../../../../../styles/common/mixins/fonts");
-const navigation_1 = require("../../../../../../../Navigation/navigation");
-exports.Navigation = (0, styled_1.default)(navigation_1.Navigation) `
+import styled from "@emotion/styled";
+import { textBody500, textBodyLarge500, } from "../../../../../../../../../../../../../../styles/common/mixins/fonts";
+import { Navigation as DXNavigation } from "../../../../../../../Navigation/navigation";
+export const Navigation = styled(DXNavigation) `
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -16,7 +10,7 @@ exports.Navigation = (0, styled_1.default)(navigation_1.Navigation) `
   justify-content: flex-start;
 
   .MuiButton-nav {
-    ${fonts_1.textBodyLarge500};
+    ${textBodyLarge500};
     justify-content: space-between;
     padding: 12px 24px;
 
@@ -25,11 +19,11 @@ exports.Navigation = (0, styled_1.default)(navigation_1.Navigation) `
     }
   }
 `;
-exports.DrawerNavigation = (0, styled_1.default)(exports.Navigation) `
+export const DrawerNavigation = styled(Navigation) `
   gap: 0;
 
   .MuiButton-nav {
-    ${fonts_1.textBody500};
+    ${textBody500};
     padding: 14px 24px;
   }
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Content/components/Socials/socials.styles.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Socials = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const socials_1 = require("../../../../../../../../../../../../../common/Socials/socials");
-exports.Socials = (0, styled_1.default)(socials_1.Socials) `
+import styled from "@emotion/styled";
+import { Socials as DXSocials } from "../../../../../../../../../../../../../common/Socials/socials";
+export const Socials = styled(DXSocials) `
   gap: 16px;
   padding: 8px 16px;
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.d.ts

@@ -1,11 +1,12 @@
 import { ReactNode } from "react";
+import { ComponentsConfig } from "../../../../../../../../../../../../config/entities";
 export interface DialogTitleProps {
     actions?: ReactNode;
-    Announcements?: ReactNode;
+    announcements?: ComponentsConfig;
     authenticationEnabled?: boolean;
-    Logo?: ReactNode;
+    logo?: ReactNode;
     onClose: () => void;
     searchEnabled?: boolean;
     searchURL?: string;
 }
-export declare const Toolbar: ({ actions, Announcements, authenticationEnabled, Logo, onClose, searchEnabled, searchURL, }: DialogTitleProps) => JSX.Element;
+export declare const Toolbar: ({ actions, announcements, authenticationEnabled, logo, onClose, searchEnabled, searchURL, }: DialogTitleProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.js

@@ -1,48 +1,19 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toolbar = void 0;
-const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const actions_1 = require("../../../../actions");
-const authentication_1 = require("../../../Authentication/authentication");
-const search_1 = require("../../../Search/search");
-const Toolbar = ({ actions, Announcements, authenticationEnabled, Logo, onClose, searchEnabled, searchURL, }) => {
-    return (react_1.default.createElement(react_1.Fragment, null,
-        Announcements,
-        react_1.default.createElement(material_1.Toolbar, null,
-            Logo,
-            react_1.default.createElement(actions_1.Actions, null,
-                react_1.default.createElement(search_1.Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
-                react_1.default.createElement(authentication_1.Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { IconButton, Toolbar as MToolbar } from "@mui/material";
+import React, { Fragment } from "react";
+import { Announcements } from "../../../../../../../Announcements/announcements";
+import { Actions } from "../../../../actions";
+import { Authentication } from "../../../Authentication/authentication";
+import { Search } from "../../../Search/search";
+export const Toolbar = ({ actions, announcements, authenticationEnabled, logo, onClose, searchEnabled, searchURL, }) => {
+    return (React.createElement(Fragment, null,
+        React.createElement(Announcements, { announcements: announcements }),
+        React.createElement(MToolbar, null,
+            logo,
+            React.createElement(Actions, null,
+                React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
+                React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
                 actions,
-                react_1.default.createElement(material_1.IconButton, { color: "ink", onClick: onClose },
-                    react_1.default.createElement(CloseRounded_1.default, null))))));
+                React.createElement(IconButton, { color: "ink", onClick: onClose },
+                    React.createElement(CloseRoundedIcon, null))))));
 };
-exports.Toolbar = Toolbar;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.js

@@ -1,64 +1,33 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Menu = void 0;
-const MenuRounded_1 = __importDefault(require("@mui/icons-material/MenuRounded"));
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const useBreakpointHelper_1 = require("../../../../../../../../../../hooks/useBreakpointHelper");
-const breakpoints_1 = require("../../../../../../../../../../theme/common/breakpoints");
-const constants_1 = require("../../../../../../common/constants");
-const utils_1 = require("../../../../../../common/utils");
-const header_styles_1 = require("../../../../../../header.styles");
-const content_styles_1 = require("../../../../content.styles");
-const slogan_1 = require("../../../Slogan/slogan");
-const navigation_styles_1 = require("./components/Content/components/Navigation/navigation.styles");
-const socials_styles_1 = require("./components/Content/components/Socials/socials.styles");
-const toolbar_1 = require("./components/Toolbar/toolbar");
-exports.Menu = (0, react_1.forwardRef)(function HeaderMenu({ closeMenu, headerProps, open, openMenu, style }, ref) {
-    const { navLinks, slogan, socialMedia } = headerProps;
-    const smDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP_SM);
-    const switchProps = constants_1.SWITCH_TRANSITION_PROPS;
-    // Set drawer open state to false on change of media breakpoint from mobile to "small desktop".
-    (0, react_1.useEffect)(() => {
-        if (smDesktop) {
-            closeMenu();
-        }
-    }, [closeMenu, smDesktop]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Fade, Object.assign({ in: !smDesktop }, switchProps),
-            react_1.default.createElement(material_1.IconButton, { color: "ink", onClick: openMenu, ref: ref, style: style },
-                react_1.default.createElement(MenuRounded_1.default, null))),
-        react_1.default.createElement(material_1.Dialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeMenu, open: open, PaperProps: { elevation: 0 }, TransitionComponent: material_1.Fade, transitionDuration: smDesktop ? 0 : 600, TransitionProps: { easing: "ease-out" } },
-            react_1.default.createElement(header_styles_1.AppBar, { component: "div", elevation: 0 },
-                react_1.default.createElement(toolbar_1.Toolbar, Object.assign({ onClose: closeMenu }, headerProps))),
-            react_1.default.createElement(content_styles_1.Content, null,
-                slogan && react_1.default.createElement(slogan_1.Slogan, { slogan: slogan }),
-                react_1.default.createElement(navigation_styles_1.Navigation, { closeAncestor: closeMenu, headerProps: headerProps, links: (0, utils_1.flattenNavigationLinks)(navLinks) }),
-                socialMedia && (react_1.default.createElement(socials_styles_1.Socials, { buttonSize: "xlarge", socials: socialMedia.socials }))))));
+import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
+import { Dialog as MDialog, Fade, IconButton } from "@mui/material";
+import React, { forwardRef, Fragment, useEffect } from "react";
+import { useBreakpoint } from "../../../../../../../../../../hooks/useBreakpoint";
+import { getMenuNavigationLinks } from "../../../../../../common/utils";
+import { AppBar } from "../../../../../../header.styles";
+import { Content } from "../../../../content.styles";
+import { Slogan } from "../../../Slogan/slogan";
+import { Navigation } from "./components/Content/components/Navigation/navigation.styles";
+import { Socials } from "./components/Content/components/Socials/socials.styles";
+import { Toolbar } from "./components/Toolbar/toolbar";
+export const Menu = forwardRef(function HeaderMenu({ closeMenu, headerProps, open, openMenu, style }, ref) {
+    const { navigation, slogan, socialMedia } = headerProps;
+    const { breakpoint, smDown } = useBreakpoint();
+    // Set drawer open state to false on change of media breakpoint from small desktop "md" and up.
+    useEffect(() => {
+        if (smDown)
+            return;
+        closeMenu();
+    }, [closeMenu, smDown]);
+    if (!smDown)
+        return null;
+    return (React.createElement(Fragment, null,
+        React.createElement(IconButton, { color: "ink", onClick: openMenu, ref: ref, style: style },
+            React.createElement(MenuRoundedIcon, null)),
+        React.createElement(MDialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeMenu, open: open, PaperProps: { elevation: 0 }, TransitionComponent: Fade, transitionDuration: smDown ? 600 : 0, TransitionProps: { easing: "ease-out" } },
+            React.createElement(AppBar, { component: "div", elevation: 0 },
+                React.createElement(Toolbar, { onClose: closeMenu, ...headerProps })),
+            React.createElement(Content, null,
+                slogan && React.createElement(Slogan, { slogan: slogan }),
+                React.createElement(Navigation, { closeAncestor: closeMenu, headerProps: headerProps, links: getMenuNavigationLinks(navigation, breakpoint) }),
+                socialMedia && (React.createElement(Socials, { buttonSize: "xlarge", socials: socialMedia.socials }))))));
 });

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.js

@@ -1,46 +1,17 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
-const react_1 = __importStar(require("react"));
-const buttonPrimary_1 = require("../../../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary");
-const searchIcon_1 = require("../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon");
-const searchBar_styles_1 = require("./searchBar.styles");
-function SearchBar({ closeMenu, closeSearch, searchOpen, searchURL, }) {
-    const inputRef = (0, react_1.useRef)(null);
-    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import React, { useRef, useState } from "react";
+import { ButtonPrimary } from "../../../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
+import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { ClearButton, SearchBar as SearchDialog, SearchForm, SearchInput, } from "./searchBar.styles";
+export default function SearchBar({ closeMenu, closeSearch, searchOpen, searchURL, }) {
+    const inputRef = useRef(null);
+    const [searchTerm, setSearchTerm] = useState("");
     /**
      * Clears search term and refocuses input.
      */
     const handleClear = () => {
-        var _a;
         setSearchTerm("");
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        inputRef.current?.focus();
     };
     /**
      * Callback fired when the search term is changed.
@@ -74,10 +45,9 @@ function SearchBar({ closeMenu, closeSearch, searchOpen, searchURL, }) {
             window.location.href = location.href;
         }
     };
-    return (react_1.default.createElement(searchBar_styles_1.SearchBar, { fullWidth: true, hideBackdrop: true, maxWidth: false, onClose: closeSearch, open: searchOpen, PaperProps: { variant: "searchbar" }, TransitionProps: { onExited: handleExited } },
-        react_1.default.createElement(searchBar_styles_1.SearchForm, { onSubmit: (e) => handleSubmit(e, searchTerm, searchURL) },
-            react_1.default.createElement(searchIcon_1.SearchIcon, { fontSize: "small" }),
-            react_1.default.createElement(searchBar_styles_1.SearchInput, { autoFocus: true, disableUnderline: true, endAdornment: searchTerm ? (react_1.default.createElement(searchBar_styles_1.ClearButton, { edge: "end", Icon: CloseRounded_1.default, onClick: handleClear, size: "small" })) : undefined, fullWidth: true, inputRef: inputRef, onChange: handleChange, placeholder: "Type in keywords...", value: searchTerm }),
-            react_1.default.createElement(buttonPrimary_1.ButtonPrimary, { type: "submit" }, "Search"))));
+    return (React.createElement(SearchDialog, { fullWidth: true, hideBackdrop: true, maxWidth: false, onClose: closeSearch, open: searchOpen, PaperProps: { variant: "searchbar" }, TransitionProps: { onExited: handleExited } },
+        React.createElement(SearchForm, { onSubmit: (e) => handleSubmit(e, searchTerm, searchURL) },
+            React.createElement(SearchIcon, { fontSize: "small" }),
+            React.createElement(SearchInput, { autoFocus: true, disableUnderline: true, endAdornment: searchTerm ? (React.createElement(ClearButton, { edge: "end", Icon: CloseRoundedIcon, onClick: handleClear, size: "small" })) : undefined, fullWidth: true, inputRef: inputRef, onChange: handleChange, placeholder: "Type in keywords...", value: searchTerm }),
+            React.createElement(ButtonPrimary, { type: "submit" }, "Search"))));
 }
-exports.default = SearchBar;