@databiosphere/findable-ui 10.1.0 → 10.2.0

package/lib/components/Filter/components/Filter/filter.js

@@ -48,7 +48,7 @@ export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterD
         trackFilterOpened?.({ category: categoryView.key });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(FilterLabel, { count: categoryView.values.length, disabled: categoryView.isDisabled, label: categoryView.label, onClick: onOpenFilter }),
+        React.createElement(FilterLabel, { count: categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter }),
         React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
             isOpen && isFilterDrawer && (React.createElement(IconButton, { Icon: CloseRounded, onClick: onCloseFilters, size: "medium" })),
             React.createElement(FilterMenu, { categorySection: categorySection, categoryKey: categoryView.key, categoryLabel: categoryView.label, isFilterDrawer: isFilterDrawer, onFilter: onFilter, onCloseFilter: onCloseFilter, values: categoryView.values })),

package/lib/components/Filter/components/Filter/filter.styles.js

@@ -5,13 +5,14 @@ import { smokeLight, white } from "../../../../styles/common/mixins/colors";
 import { IconButton as DXIconButton } from "../../../common/IconButton/iconButton";
 export const FilterPopover = styled(Popover) `
   .MuiPaper-menu {
-    margin: 0;
+    margin: 4px 0;
   }
 
   ${mediaDesktopSmallDown} {
     .MuiPaper-root {
       background-color: ${smokeLight};
       height: 100%;
+      margin: 0;
       max-height: 100%;
       overflow: visible; // required; allows backdrop button to render outside of drawer container.
     }

package/lib/components/Filter/components/FilterLabel/filterLabel.d.ts

@@ -2,7 +2,8 @@ import { MouseEvent } from "react";
 export interface FilterLabelProps {
     count?: number;
     disabled?: boolean;
+    isOpen: boolean;
     label: string;
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const FilterLabel: ({ count, disabled, label, onClick, }: FilterLabelProps) => JSX.Element;
+export declare const FilterLabel: ({ count, disabled, isOpen, label, onClick, }: FilterLabelProps) => JSX.Element;

package/lib/components/Filter/components/FilterLabel/filterLabel.js

@@ -1,7 +1,7 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 import React from "react";
 import { FilterLabel as Label } from "./filterLabel.styles";
-export const FilterLabel = ({ count, disabled = false, label, onClick, }) => {
+export const FilterLabel = ({ count, disabled = false, isOpen, label, onClick, }) => {
     const filterLabel = count ? `${label}\xa0(${count})` : label; // When the count is present, a non-breaking space is used to prevent it from being on its own line
-    return (React.createElement(Label, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRoundedIcon, { fontSize: "small" }), fullWidth: true, onClick: onClick }, filterLabel));
+    return (React.createElement(Label, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRoundedIcon, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick }, filterLabel));
 };

package/lib/components/Filter/components/FilterLabel/filterLabel.stories.js

@@ -4,6 +4,7 @@ export default {
     argTypes: {
         count: { control: "number" },
         disabled: { control: "boolean" },
+        isOpen: { control: "boolean" },
         label: { control: "text" },
     },
     component: FilterLabel,
@@ -18,5 +19,6 @@ export const FilterLabelStory = FilterLabelTemplate.bind({});
 FilterLabelStory.args = {
     count: 123,
     disabled: false,
+    isOpen: false,
     label: "Label",
 };

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+interface Props {
+    isOpen: boolean;
+}
 export declare const FilterLabel: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
@@ -33,4 +36,5 @@ export declare const FilterLabel: import("@emotion/styled").StyledComponent<{
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
     theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+} & Props, {}, {}>;
+export {};

package/lib/components/Filter/components/FilterLabel/filterLabel.styles.js

@@ -1,16 +1,20 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Button } from "@mui/material";
 import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
-export const FilterLabel = styled(Button) `
+import { inkLight, smokeMain } from "../../../../styles/common/mixins/colors";
+export const FilterLabel = styled(Button, {
+    shouldForwardProp: (prop) => prop !== "isOpen",
+}) `
   font-weight: inherit;
   gap: 0;
   justify-content: space-between;
-  padding: 10px 16px;
+  padding: 10px 8px;
   text-transform: none;
   text-align: left;
 
   :hover {
-    background-color: transparent;
+    background-color: ${smokeMain};
   }
 
   &.Mui-disabled {
@@ -18,16 +22,27 @@ export const FilterLabel = styled(Button) `
   }
 
   & .MuiButton-endIcon {
+    color: ${inkLight};
     margin-right: -4px;
     transform: rotate(-90deg);
   }
 
   ${mediaDesktopSmallUp} {
-    padding: 6px 0;
+    padding: 6px 8px;
 
     & .MuiButton-endIcon {
-      margin-right: 0;
       transform: unset;
     }
   }
+
+  ${(props) => props.isOpen &&
+    css `
+      background-color: ${smokeMain(props)};
+
+      ${mediaDesktopSmallUp(props)} {
+        & .MuiButton-endIcon {
+          transform: rotate(180deg);
+        }
+      }
+    `};
 `;

package/lib/components/Filter/components/FilterTags/filterTags.styles.js

@@ -1,17 +1,12 @@
 import styled from "@emotion/styled";
-import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
 export const FilterTags = styled.span `
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  margin-bottom: 8px;
-  padding: 0 16px;
+  margin: 4px 0 8px;
+  padding: 0 8px;
 
   &:last-child {
     margin-bottom: 0;
   }
-
-  ${mediaDesktopSmallUp} {
-    padding: 0;
-  }
 `;

package/lib/components/Filter/components/Filters/filters.js

@@ -1,5 +1,5 @@
 import { Divider } from "@mui/material";
-import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { useWindowResize } from "../../../../hooks/useWindowResize";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
@@ -39,11 +39,10 @@ export const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFi
     const { height: windowHeight } = useWindowResize();
     const filterListRef = useRef(null);
     const [height, setHeight] = useState(0);
-    const isLabeled = useMemo(() => isCategoryViewsLabeled(categoryFilters), [categoryFilters]);
     useEffect(() => {
         setHeight(calculateListHeight(windowHeight, filterListRef.current));
     }, [windowHeight]);
-    return (React.createElement(FilterList, { disabled: disabled, height: height, isBaseStyle: !isLabeled, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
+    return (React.createElement(FilterList, { disabled: disabled, height: height, ref: filterListRef }, categoryFilters.map(({ categoryViews, label }, i) => (React.createElement(Fragment, { key: i },
         i !== 0 && React.createElement(Divider, null),
         label && React.createElement(CategoryViewsLabel, null, label),
         categoryViews.map((categoryView) => (React.createElement(Filter, { key: categoryView.key, categorySection: label, categoryView: categoryView, closeAncestor: closeAncestor, isFilterDrawer: isFilterDrawer, onFilter: onFilter, trackFilterOpened: trackFilterOpened, tags: renderFilterTags(categoryView, onFilter) }))))))));
@@ -57,11 +56,3 @@ export const Filters = ({ categoryFilters, closeAncestor, disabled = false, onFi
 function calculateListHeight(windowHeight, filterListEl) {
     return windowHeight - (filterListEl?.getBoundingClientRect()?.top ?? 0);
 }
-/**
- * Returns true if any category views are labelled.
- * @param categoryFilters - Category filters.
- * @returns true if any category views are labelled.
- */
-function isCategoryViewsLabeled(categoryFilters) {
-    return categoryFilters.some(({ label }) => label);
-}

package/lib/components/Filter/components/Filters/filters.styles.d.ts

@@ -2,7 +2,6 @@
 interface Props {
     disabled: boolean;
     height: number;
-    isBaseStyle: boolean;
 }
 export declare const Filters: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/lib/components/Filter/components/Filters/filters.styles.js

@@ -2,16 +2,14 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints";
 import { inkLight, inkMain } from "../../../../styles/common/mixins/colors";
-import { textBody400, textBody500, } from "../../../../styles/common/mixins/fonts";
-export const Filters = styled("div", {
-    shouldForwardProp: (prop) => prop !== "height" && prop !== "isBaseStyle",
-}) `
-  ${(props) => (props.isBaseStyle ? textBody500(props) : textBody400(props))};
-  color: ${(props) => (props.isBaseStyle ? inkMain(props) : inkLight(props))};
+import { textBody500, textUppercase500, } from "../../../../styles/common/mixins/fonts";
+export const Filters = styled("div") `
+  ${textBody500};
+  color: ${inkMain};
   height: ${({ height }) => height}px;
   margin: 8px 0;
   overflow: auto;
-  padding: 0 0 8px;
+  padding: 0 8px 8px;
 
   // Filters are globally "disabled".
   ${({ disabled }) => disabled &&
@@ -20,21 +18,17 @@ export const Filters = styled("div", {
     `};
 
   .MuiDivider-root {
-    margin: 8px 0;
+    margin: 8px;
   }
 
   ${mediaDesktopSmallUp} {
     height: unset;
     overflow: unset;
-    padding: 0 12px 0 16px;
+    padding: 0 8px;
   }
 `;
 export const CategoryViewsLabel = styled("div") `
-  ${textBody500};
-  color: ${inkMain};
-  padding: 8px 16px;
-
-  ${mediaDesktopSmallUp} {
-    padding: 8px 0;
-  }
+  ${textUppercase500};
+  color: ${inkLight};
+  padding: 8px;
 `;

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

@@ -1,13 +1,8 @@
 import styled from "@emotion/styled";
-import { DESKTOP_SM } from "../../../../../../../../theme/common/breakpoints";
 export const HeaderActions = styled.div `
   align-items: center;
   display: flex;
-  flex: 1;
+  flex: none;
   gap: 8px;
-  justify-content: flex-end;
-
-  ${({ theme }) => theme.breakpoints.up(DESKTOP_SM)} {
-    flex: none;
-  }
+  justify-content: inherit;
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.d.ts

@@ -1,6 +1,20 @@
-/// <reference types="react" />
+import { ButtonProps as MButtonProps, IconButtonProps as MIconButtonProps } from "@mui/material";
+import { ElementType } from "react";
 export interface AuthenticationProps {
     authenticationEnabled?: boolean;
+    Button: ElementType<MButtonProps> | ElementType<MIconButtonProps>;
     closeMenu: () => void;
 }
-export declare const Authentication: ({ authenticationEnabled, closeMenu, }: AuthenticationProps) => JSX.Element;
+export declare const Authentication: ({ authenticationEnabled, Button, closeMenu, }: AuthenticationProps) => JSX.Element | null;
+/**
+ * Renders authentication button.
+ * @param props - Button props.
+ * @returns button.
+ */
+export declare function renderButton(props: MButtonProps): JSX.Element;
+/**
+ * Renders authentication icon button.
+ * @param props - Button props.
+ * @returns icon button.
+ */
+export declare function renderIconButton(props: MIconButtonProps): JSX.Element;

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

@@ -1,14 +1,37 @@
+import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
+import { IconButton as MIconButton, } from "@mui/material";
 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, }) => {
+import { StyledButton } from "./components/Button/button.styles";
+export const Authentication = ({ authenticationEnabled, Button, closeMenu, }) => {
     const { isAuthenticated, requestAuthentication, userProfile } = useAuthentication();
     const router = useRouter();
     const onLogout = useCallback(() => {
         location.href = router.basePath;
     }, [router]);
-    return (React.createElement(React.Fragment, null, authenticationEnabled &&
-        (isAuthenticated && userProfile ? (React.createElement(AuthenticationMenu, { onLogout: onLogout, userProfile: userProfile })) : (React.createElement(RequestAuthentication, { closeMenu: closeMenu, requestAuthorization: requestAuthentication })))));
+    if (!authenticationEnabled)
+        return null;
+    return (React.createElement(React.Fragment, null, isAuthenticated && userProfile ? (React.createElement(AuthenticationMenu, { onLogout: onLogout, userProfile: userProfile })) : (React.createElement(Button, { onClick: () => {
+            requestAuthentication();
+            closeMenu();
+        } }))));
 };
+/**
+ * Renders authentication button.
+ * @param props - Button props.
+ * @returns button.
+ */
+export function renderButton(props) {
+    return (React.createElement(StyledButton, { startIcon: React.createElement(LoginRoundedIcon, null), variant: "nav", ...props }, "Sign in"));
+}
+/**
+ * Renders authentication icon button.
+ * @param props - Button props.
+ * @returns icon button.
+ */
+export function renderIconButton(props) {
+    return (React.createElement(MIconButton, { color: "ink", ...props },
+        React.createElement(LoginRoundedIcon, null)));
+}

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const StyledButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "large" | "medium" | "small" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | "backNav" | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.js

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+export const StyledButton = styled(MButton) `
+  &.MuiButton-nav {
+    padding: 6px 12px;
+  }
+`;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/common/constants.d.ts

@@ -0,0 +1,2 @@
+import { DialogProps as MDialogProps } from "@mui/material";
+export declare const DIALOG_PROPS: Partial<MDialogProps>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/common/constants.js

@@ -0,0 +1,7 @@
+export const DIALOG_PROPS = {
+    PaperProps: { elevation: 0 },
+    TransitionProps: { easing: "ease-out" },
+    fullScreen: true,
+    hideBackdrop: true,
+    keepMounted: false,
+};

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

@@ -4,8 +4,8 @@ import React, { Fragment } from "react";
 import { Left, Right } from "../../../../../../../../header.styles";
 import { Announcements } from "../../../../../../../Announcements/announcements";
 import { Actions } from "../../../../actions";
-import { Authentication } from "../../../Authentication/authentication";
-import { Search } from "../../../Search/search";
+import { Authentication, renderIconButton as renderAuthenticationIconButton, } from "../../../Authentication/authentication";
+import { renderIconButton as renderSearchIconButton, Search, } from "../../../Search/search";
 export const Toolbar = ({ actions, announcements, authenticationEnabled, logo, onClose, searchEnabled, searchURL, }) => {
     return (React.createElement(Fragment, null,
         React.createElement(Announcements, { announcements: announcements }),
@@ -13,8 +13,8 @@ export const Toolbar = ({ actions, announcements, authenticationEnabled, logo, o
             React.createElement(Left, null, logo),
             React.createElement(Right, null,
                 React.createElement(Actions, null,
-                    React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
-                    React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
+                    React.createElement(Search, { Button: renderSearchIconButton, closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
+                    React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, Button: renderAuthenticationIconButton, closeMenu: onClose }),
                     actions,
                     React.createElement(IconButton, { color: "ink", onClick: onClose },
                         React.createElement(CloseRoundedIcon, null)))))));

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

@@ -3,6 +3,7 @@ import { HeaderProps } from "../../../../../../header";
 export interface MenuProps {
     closeMenu: () => void;
     headerProps: HeaderProps;
+    isMenuIn: boolean;
     open: boolean;
     openMenu: () => void;
     pathname?: string;

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

@@ -1,33 +1,32 @@
 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 { DIALOG_PROPS } from "./common/constants";
 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, pathname, style }, ref) {
+export const Menu = forwardRef(function HeaderMenu({ closeMenu, headerProps, isMenuIn, open, openMenu, pathname, style, }, ref) {
     const { navigation, slogan, socialMedia } = headerProps;
-    const { smDown } = useBreakpoint();
     // Set drawer open state to false on change of media breakpoint from small desktop "md" and up.
     useEffect(() => {
-        if (smDown)
+        if (isMenuIn)
             return;
         closeMenu();
-    }, [closeMenu, smDown]);
-    if (!smDown)
+    }, [closeMenu, isMenuIn]);
+    if (!isMenuIn)
         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(MDialog, { ...DIALOG_PROPS, onClose: closeMenu, open: open, TransitionComponent: Fade, transitionDuration: isMenuIn ? 600 : 0 },
             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), pathname: pathname }),
+                React.createElement(Navigation, { closeAncestor: closeMenu, headerProps: headerProps, isMenuIn: isMenuIn, links: getMenuNavigationLinks(navigation), pathname: pathname }),
                 socialMedia && (React.createElement(Socials, { buttonSize: "xlarge", socials: socialMedia.socials }))))));
 });

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/Button/button.styles.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export declare const StyledButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "large" | "medium" | "small" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | "backNav" | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/Button/button.styles.js

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+export const StyledButton = styled(MButton) `
+  &.MuiButton-nav {
+    padding: 6px 12px;
+  }
+`;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/search.d.ts

@@ -1,7 +1,21 @@
-/// <reference types="react" />
+import { ButtonProps as MButtonProps, IconButtonProps as MIconButtonProps } from "@mui/material";
+import { ElementType } from "react";
 export interface SearchProps {
+    Button: ElementType<MButtonProps> | ElementType<MIconButtonProps>;
     closeMenu: () => void;
     searchEnabled?: boolean;
     searchURL?: string;
 }
-export declare const Search: ({ closeMenu, searchEnabled, searchURL, }: SearchProps) => JSX.Element;
+export declare const Search: ({ Button, closeMenu, searchEnabled, searchURL, }: SearchProps) => JSX.Element | null;
+/**
+ * Renders search button.
+ * @param props - Button props.
+ * @returns button.
+ */
+export declare function renderButton(props: MButtonProps): JSX.Element;
+/**
+ * Renders search icon button.
+ * @param props - Button props.
+ * @returns icon button.
+ */
+export declare function renderIconButton(props: MIconButtonProps): JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/search.js

@@ -1,9 +1,30 @@
+import { IconButton as MIconButton, } from "@mui/material";
 import React, { useState } from "react";
+import { SearchIcon } from "../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { StyledButton } from "./components/Button/button.styles";
 import SearchBar from "./components/SearchBar/searchBar";
-import { SearchButton } from "./components/SearchButton/searchButton";
-export const Search = ({ closeMenu, searchEnabled, searchURL, }) => {
+export const Search = ({ Button, closeMenu, searchEnabled, searchURL, }) => {
     const [searchOpen, setSearchOpen] = useState(false);
+    if (!searchEnabled)
+        return null;
     return (React.createElement(React.Fragment, null,
-        searchEnabled && (React.createElement(SearchButton, { openSearch: () => setSearchOpen(true) })),
+        React.createElement(Button, { onClick: () => setSearchOpen(true) }),
         React.createElement(SearchBar, { closeMenu: closeMenu, closeSearch: () => setSearchOpen(false), searchOpen: searchOpen, searchURL: searchURL })));
 };
+/**
+ * Renders search button.
+ * @param props - Button props.
+ * @returns button.
+ */
+export function renderButton(props) {
+    return (React.createElement(StyledButton, { startIcon: React.createElement(SearchIcon, null), variant: "nav", ...props }, "Search"));
+}
+/**
+ * Renders search icon button.
+ * @param props - Button props.
+ * @returns icon button.
+ */
+export function renderIconButton(props) {
+    return (React.createElement(MIconButton, { color: "ink", ...props },
+        React.createElement(SearchIcon, { fontSize: "medium" })));
+}

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/common/constants.d.ts

@@ -0,0 +1,2 @@
+import { DialogProps as MDialogProps } from "@mui/material";
+export declare const DIALOG_PROPS: Partial<MDialogProps>;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/common/constants.js

@@ -0,0 +1,7 @@
+export const DIALOG_PROPS = {
+    PaperProps: { elevation: 0 },
+    fullScreen: true,
+    hideBackdrop: true,
+    keepMounted: false,
+    transitionDuration: 300,
+};

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.d.ts

@@ -4,9 +4,10 @@ import { MenuItem } from "../NavigationMenuItems/navigationMenuItems";
 export interface NavigationDrawerProps {
     closeAncestor?: () => void;
     headerProps?: HeaderProps;
+    isMenuIn: boolean;
     isSelected?: boolean;
     menuItems: MenuItem[];
     menuLabel: ReactNode;
     pathname?: string;
 }
-export declare const NavigationDrawer: ({ closeAncestor, headerProps, isSelected, menuItems, menuLabel, pathname, }: NavigationDrawerProps) => JSX.Element;
+export declare const NavigationDrawer: ({ closeAncestor, headerProps, isMenuIn, isSelected, menuItems, menuLabel, pathname, }: NavigationDrawerProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.js

@@ -6,9 +6,10 @@ import { useDialog } from "../../../../../../../../../common/Dialog/hooks/useDia
 import { AppBar } from "../../../../../../header.styles";
 import { DrawerNavigation as Navigation } from "../../../Actions/components/Menu/components/Content/components/Navigation/navigation.styles";
 import { Toolbar } from "../../../Actions/components/Menu/components/Toolbar/toolbar";
+import { DIALOG_PROPS } from "./common/constants";
 import { Slide } from "./components/Slide/slide";
 import { Button as BackButton, Content, Dialog, } from "./navigationDrawer.styles";
-export const NavigationDrawer = ({ closeAncestor, headerProps, isSelected = false, menuItems, menuLabel, pathname, }) => {
+export const NavigationDrawer = ({ closeAncestor, headerProps, isMenuIn, isSelected = false, menuItems, menuLabel, pathname, }) => {
     const { onClose, onOpen, open } = useDialog();
     const closeDrawers = useCallback(() => {
         onClose();
@@ -16,10 +17,10 @@ export const NavigationDrawer = ({ closeAncestor, headerProps, isSelected = fals
     }, [closeAncestor, onClose]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Button, { EndIcon: ArrowDropDownRoundedIcon, onClick: onOpen, variant: isSelected ? "activeNav" : "nav" }, menuLabel),
-        React.createElement(Dialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeDrawers, open: open, PaperProps: { elevation: 0 }, TransitionComponent: Slide, transitionDuration: 300 },
+        React.createElement(Dialog, { ...DIALOG_PROPS, onClose: closeDrawers, open: open, TransitionComponent: Slide },
             React.createElement(AppBar, { component: "div", elevation: 1 },
                 React.createElement(Toolbar, { onClose: closeDrawers, ...headerProps })),
             React.createElement(Content, null,
                 React.createElement(BackButton, { fullWidth: true, onClick: onClose, StartIcon: BackArrowIcon, variant: "backNav" }, menuLabel),
-                React.createElement(Navigation, { closeAncestor: closeDrawers, headerProps: headerProps, links: menuItems, pathname: pathname })))));
+                React.createElement(Navigation, { closeAncestor: closeDrawers, headerProps: headerProps, isMenuIn: isMenuIn, links: menuItems, pathname: pathname })))));
 };