@databiosphere/findable-ui 22.0.0 → 24.0.0

package/lib/components/DataDictionary/dataDictionary.styles.js

@@ -1,7 +1,20 @@
-import { styled } from "@mui/material";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
+export const grid = css `
+  column-gap: 24px;
+  display: grid;
+  grid-template-columns: 242px 1fr;
+`;
 export const View = styled("div") `
+  ${grid};
   flex: 1;
   margin: 0 auto;
-  max-width: calc(100vw - 48px);
-  padding: 24px 0;
+  max-width: min(calc(100vw - 48px), 1392px);
+  position: relative;
+
+  ${mediaTabletDown} {
+    grid-template-columns: 1fr;
+    max-width: calc(100vw - 32px);
+  }
 `;

package/lib/components/DataDictionary/hooks/UseDataDictionary/hook.js

@@ -1,5 +1,6 @@
+import { useMemo } from "react";
 import { useConfig } from "../../../../hooks/useConfig";
 export const useDataDictionary = () => {
     const { config: { dataDictionary: { classes = [] } = {} }, } = useConfig();
-    return { classes };
+    return useMemo(() => ({ classes }), [classes]);
 };

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/hook.d.ts

@@ -0,0 +1,2 @@
+import { UseLayoutSpacing } from "./types";
+export declare const useLayoutSpacing: () => UseLayoutSpacing;

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/hook.js

@@ -0,0 +1,10 @@
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
+export const useLayoutSpacing = () => {
+    const { dimensions } = useLayoutDimensions();
+    return {
+        spacing: {
+            bottom: dimensions.footer.height,
+            top: dimensions.header.height,
+        },
+    };
+};

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/types.d.ts

@@ -0,0 +1,7 @@
+export interface LayoutSpacing {
+    bottom: number;
+    top: number;
+}
+export interface UseLayoutSpacing {
+    spacing: LayoutSpacing;
+}

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/DataDictionary/types.d.ts

@@ -0,0 +1,9 @@
+import { ElementType } from "react";
+import { BaseComponentProps } from "../types";
+export interface DataDictionaryProps extends BaseComponentProps {
+    EntitiesLayout?: ElementType;
+    Outline?: ElementType;
+    OutlineLayout?: ElementType;
+    Title?: ElementType;
+    TitleLayout?: ElementType;
+}

package/lib/components/DataDictionary/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Error/error.js

@@ -2,8 +2,8 @@ import { Divider, Typography } from "@mui/material";
 import Link from "next/link";
 import React from "react";
 import { useExploreState } from "../../hooks/useExploreState";
-import { useLayoutState } from "../../hooks/useLayoutState";
 import { ExploreActionKind } from "../../providers/exploreState";
+import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
 import { ButtonPrimary } from "../common/Button/components/ButtonPrimary/buttonPrimary";
 import { AlertIcon } from "../common/CustomIcon/components/AlertIcon/alertIcon";
 import { Grid } from "../common/Grid/grid";
@@ -17,7 +17,7 @@ const ErrorMessage = ({ detail, title, }) => (React.createElement(Content, null,
         React.createElement(ErrorCode, null, detail))));
 export const Error = ({ errorMessage, onReset, requestUrlMessage, rootPath, }) => {
     const { exploreDispatch } = useExploreState();
-    const { layoutState: { headerHeight }, } = useLayoutState();
+    const { dimensions } = useLayoutDimensions();
     const handleToHomePageClicked = () => {
         onReset?.();
         exploreDispatch({
@@ -25,7 +25,7 @@ export const Error = ({ errorMessage, onReset, requestUrlMessage, rootPath, }) =
             type: ExploreActionKind.ResetState,
         });
     };
-    return (React.createElement(ErrorLayout, { offset: headerHeight },
+    return (React.createElement(ErrorLayout, { offset: dimensions.header.height },
         React.createElement(CustomError, null,
             React.createElement(ErrorSection, null,
                 React.createElement(StatusIcon, { priority: PRIORITY.HIGH, StatusIcon: AlertIcon }),

package/lib/components/Export/components/ExportForm/exportForm.styles.d.ts

@@ -2,12 +2,12 @@ import { ThemeProps } from "../../../../theme/theme";
 export declare const margin: ({ theme }: ThemeProps) => import("@emotion/react").SerializedStyles;
 export declare const FormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "fullWidth" | "hiddenLabel" | "focused"> & {
+}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "focused" | "fullWidth" | "hiddenLabel"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const TableFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "fullWidth" | "hiddenLabel" | "focused"> & {
+}, "style" | "className" | "classes" | "color" | "children" | "margin" | "sx" | "variant" | "error" | "disabled" | "required" | "size" | "focused" | "fullWidth" | "hiddenLabel"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const GridPaper: import("@emotion/styled").StyledComponent<{

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

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const FilterLabel: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export {};

package/lib/components/Filter/components/SearchAllFilters/searchAllFilters.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect, useRef, useState, } from "react";
-import { BODY, SIDEBAR_POSITIONER } from "../../../../common/selectors";
+import { SELECTOR } from "../../../../common/selectors";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
 import { SearchCloseButton } from "../SearchAllFiltersSearch/components/SearchCloseButton/searchCloseButton";
@@ -35,8 +35,8 @@ export const SearchAllFilters = ({ categoryViews, drawerOpen = false, onFilter,
     const handleBackgroundScroll = (overflowStyle) => {
         if (desktopSmUp) {
             setElementsOverflowStyle([
-                document.querySelector(BODY),
-                document.getElementById(SIDEBAR_POSITIONER),
+                document.querySelector(SELECTOR.BODY),
+                document.getElementById(SELECTOR.SIDEBAR_POSITIONER),
             ], overflowStyle);
         }
     };

package/lib/components/Index/index.js

@@ -1,11 +1,10 @@
 import React from "react";
-import { useLayoutState } from "../../hooks/useLayoutState";
+import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
 import { Hero } from "./components/Hero/hero";
 import { Index as IndexLayout } from "./index.styles";
 export const Index = ({ className, List, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
-    const { layoutState } = useLayoutState();
-    const { headerHeight } = layoutState;
-    return (React.createElement(IndexLayout, { className: className, marginTop: headerHeight },
+    const { dimensions } = useLayoutDimensions();
+    return (React.createElement(IndexLayout, { className: className, marginTop: dimensions.header.height },
         React.createElement(Hero, { SideBarButton: SideBarButton, Summaries: Summaries, title: title }),
         SubTitleHero,
         Tabs,

package/lib/components/Layout/components/ContentLayout/contentLayout.js

@@ -1,18 +1,18 @@
 import { useRouter } from "next/router";
 import React from "react";
-import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { Content, ContentGrid, ContentLayout as Layout, Navigation, NavigationGrid, Outline, OutlineGrid, Positioner, } from "./contentLayout.styles";
 export const ContentLayout = ({ className, content, layoutStyle, navigation, outline, }) => {
     const { asPath } = useRouter();
-    const { layoutState: { headerHeight }, } = useLayoutState();
+    const { dimensions } = useLayoutDimensions();
     return (React.createElement(Layout, { className: className, hasNavigation: Boolean(navigation), panelColor: layoutStyle?.content },
-        navigation && (React.createElement(NavigationGrid, { headerHeight: headerHeight, panelColor: layoutStyle?.navigation },
-            React.createElement(Positioner, { headerHeight: headerHeight },
+        navigation && (React.createElement(NavigationGrid, { headerHeight: dimensions.header.height, panelColor: layoutStyle?.navigation },
+            React.createElement(Positioner, { headerHeight: dimensions.header.height },
                 React.createElement(Navigation, null, navigation)))),
-        React.createElement(ContentGrid, { headerHeight: headerHeight, panelColor: layoutStyle?.content },
+        React.createElement(ContentGrid, { headerHeight: dimensions.header.height, panelColor: layoutStyle?.content },
             React.createElement(Content, null, content)),
-        outline && (React.createElement(OutlineGrid, { key: getOutlineKey(asPath), headerHeight: headerHeight, panelColor: layoutStyle?.outline },
-            React.createElement(Positioner, { headerHeight: headerHeight },
+        outline && (React.createElement(OutlineGrid, { key: getOutlineKey(asPath), headerHeight: dimensions.header.height, panelColor: layoutStyle?.outline },
+            React.createElement(Positioner, { headerHeight: dimensions.header.height },
                 React.createElement(Outline, null, outline))))));
 };
 /**

package/lib/components/Layout/components/Footer/footer.js

@@ -1,11 +1,14 @@
 import { Toolbar } from "@mui/material";
 import React from "react";
+import { SELECTOR } from "../../../../common/selectors";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { ANCHOR_TARGET } from "../../../Links/common/entities";
 import { isNodeBoolean } from "../../../utils";
 import { VersionInfo } from "./components/VersionInfo/versionInfo";
 import { AppBar, Link, Links, Socials } from "./footer.styles";
 export const Footer = ({ Branding, className, navLinks, socials, versionInfo, }) => {
-    return (React.createElement(AppBar, { className: className, color: "inherit", component: "footer", variant: "footer" },
+    const { footerRef } = useLayoutDimensions();
+    return (React.createElement(AppBar, { className: className, color: "inherit", component: "footer", id: SELECTOR.FOOTER, ref: footerRef, variant: "footer" },
         React.createElement(Toolbar, { variant: "dense" },
             Branding,
             (navLinks || socials || versionInfo) && (React.createElement(Links, null,

package/lib/components/Layout/components/Footer/footer.styles.js

@@ -7,6 +7,7 @@ import { Socials as DXSocials } from "../../../common/Socials/socials";
 import { Link as DXLink } from "../../../Links/components/Link/link";
 export const AppBar = styled(MAppBar) `
   padding: 16px 0;
+  z-index: 1; /* required for outline or navigation overflow */
 
   .MuiToolbar-root {
     align-items: flex-start;

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

@@ -18,6 +18,6 @@ export declare const UserNames: import("@emotion/styled").StyledComponent<import
 }, {}, {}>;
 export declare const StyledAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "slotProps" | "slots" | "imgProps"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "slots" | "slotProps" | "imgProps"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -1,5 +1,5 @@
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -1,5 +1,5 @@
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/header.js

@@ -1,6 +1,8 @@
 import { Fade, Toolbar } from "@mui/material";
 import { usePathname } from "next/navigation";
 import React from "react";
+import { SELECTOR } from "../../../../common/selectors";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { APP_BAR_PROPS, FADE_TRANSITION_PROPS, TOOLBAR_PROPS, } from "./common/constants";
 import { Announcements } from "./components/Announcements/announcements";
 import { Actions } from "./components/Content/components/Actions/actions";
@@ -15,12 +17,11 @@ import { Socials } from "./components/Content/components/Socials/socials.styles"
 import { AppBar, Center, Left, Right } from "./header.styles";
 import { useHeaderNavigation } from "./hooks/useHeaderNavigation";
 import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
-import { useMeasureHeader } from "./hooks/useMeasureHeader";
 import { useMenu } from "./hooks/useMenu";
 export const Header = ({ ...headerProps }) => {
     const { navigation } = useHeaderNavigation(headerProps);
     const { isIn } = useHeaderVisibility({ ...headerProps, navigation });
-    const { headerRef } = useMeasureHeader();
+    const { headerRef } = useLayoutDimensions();
     const { onClose, onOpen, open } = useMenu();
     const pathname = usePathname() ?? "";
     const { actions, announcements, authenticationEnabled, className, logo, searchEnabled, searchURL, slogan, socialMedia, } = headerProps;
@@ -29,7 +30,7 @@ export const Header = ({ ...headerProps }) => {
         headerProps: { ...headerProps, navigation },
         pathname,
     };
-    return (React.createElement(AppBar, { ...APP_BAR_PROPS, ref: headerRef, className: className },
+    return (React.createElement(AppBar, { ...APP_BAR_PROPS, className: className, id: SELECTOR.HEADER, ref: headerRef },
         React.createElement(Announcements, { announcements: announcements }),
         React.createElement(Toolbar, { ...TOOLBAR_PROPS },
             React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isLeftGroupIn },

package/lib/components/Layout/components/Main/main.js

@@ -1,8 +1,7 @@
 import React from "react";
-import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { MainWithOffset } from "./main.styles";
 export const Main = ({ children, className }) => {
-    const { layoutState } = useLayoutState();
-    const { headerHeight } = layoutState;
-    return (React.createElement(MainWithOffset, { className: className, offset: headerHeight }, children));
+    const { dimensions } = useLayoutDimensions();
+    return (React.createElement(MainWithOffset, { className: className, offset: dimensions.header.height }, children));
 };

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.d.ts

@@ -1,6 +1,2 @@
-import { TabProps as MTabProps } from "@mui/material";
-export interface ContentsTabProps extends Omit<MTabProps, "value"> {
-    className?: string;
-    value: string;
-}
+import { ContentsTabProps } from "./types";
 export declare const ContentsTab: ({ className, value, ...props }: ContentsTabProps) => JSX.Element;

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.js

@@ -1,6 +1,8 @@
 import React from "react";
+import { FONT_SIZE } from "../../../../../../styles/common/mui/icon";
+import { TAB_PROPS } from "../../../../../../styles/common/mui/tab";
 import { Segment } from "../../../../../common/CustomIcon/components/Segment/segment";
-import { Tab } from "./contentsTab.styles";
-export const ContentsTab = ({ className, value, ...props /* Spread props to allow for Mui Tab specific prop overrides. */ }) => {
-    return (React.createElement(Tab, { className: className, label: "Contents", icon: React.createElement(Segment, { fontSize: "small" }), iconPosition: "start", value: value, ...props }));
+import { StyledTab } from "./contentsTab.styles";
+export const ContentsTab = ({ className, value, ...props /* MuiTabProps. */ }) => {
+    return (React.createElement(StyledTab, { className: className, label: "Contents", icon: React.createElement(Segment, { fontSize: FONT_SIZE.SMALL }), iconPosition: TAB_PROPS.ICON_POSITION.START, value: value, ...props }));
 };

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const Tab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledTab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "icon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "wrapped" | "iconPosition"> & {
     theme?: import("@emotion/react").Theme;

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.js

@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
-import { Tab as MTab } from "@mui/material";
+import { Tab } from "@mui/material";
 import { inkLight } from "../../../../../../styles/common/mixins/colors";
 import { textUppercase500 } from "../../../../../../styles/common/mixins/fonts";
 import { tab } from "../../outline.styles";
-export const Tab = styled(MTab) `
+export const StyledTab = styled(Tab) `
   ${tab};
 
   && {

package/lib/components/Layout/components/Outline/components/ContentsTab/types.d.ts

@@ -0,0 +1,5 @@
+import { TabProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../types";
+export interface ContentsTabProps extends BaseComponentProps, Omit<TabProps, "value"> {
+    value: string;
+}

package/lib/components/Layout/components/Outline/components/ContentsTab/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Layout/components/Outline/hooks/UseHash/hook.d.ts

@@ -0,0 +1,11 @@
+import { UseHash } from "./types";
+/**
+ * Hook to get the current URL hash without the leading '#' character.
+ *
+ * @description
+ * Extracts the hash from window.location.hash and removes the leading '#'.
+ * Returns empty string when running in SSR environment.
+ *
+ * @returns Object containing the hash without leading '#', or empty string if SSR.
+ */
+export declare function useHash(): UseHash;

package/lib/components/Layout/components/Outline/hooks/UseHash/hook.js

@@ -0,0 +1,16 @@
+import { isSSR } from "../../../../../../utils/ssr";
+/**
+ * Hook to get the current URL hash without the leading '#' character.
+ *
+ * @description
+ * Extracts the hash from window.location.hash and removes the leading '#'.
+ * Returns empty string when running in SSR environment.
+ *
+ * @returns Object containing the hash without leading '#', or empty string if SSR.
+ */
+export function useHash() {
+    if (isSSR())
+        return { hash: "" };
+    const { hash } = window.location;
+    return { hash: hash.replace(/^#/, "") };
+}

package/lib/components/Layout/components/Outline/hooks/UseHash/types.d.ts

@@ -0,0 +1,3 @@
+export interface UseHash {
+    hash: string;
+}

package/lib/components/Layout/components/Outline/hooks/UseHash/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Layout/components/Outline/hooks/UseTabs/constants.d.ts

@@ -0,0 +1,2 @@
+import { TabProps } from "@mui/material";
+export declare const DEFAULT_TAB_VALUE: TabProps["value"];

package/lib/components/Layout/components/Outline/hooks/UseTabs/hook.d.ts

@@ -0,0 +1,3 @@
+import { TabsProps } from "@mui/material";
+import { OutlineItem } from "../../types";
+export declare function useTabs(outline: OutlineItem[]): Pick<TabsProps, "indicatorColor" | "onChange" | "orientation" | "value">;

package/lib/components/Layout/components/Outline/hooks/UseTabs/hook.js

@@ -0,0 +1,24 @@
+import Router from "next/router";
+import { useCallback, useEffect, useState } from "react";
+import { TABS_PROPS } from "../../../../../../styles/common/mui/tabs";
+import { useHash } from "../UseHash/hook";
+import { DEFAULT_TAB_VALUE } from "./constants";
+import { getNextValue } from "./utils";
+export function useTabs(outline) {
+    const [value, setValue] = useState(DEFAULT_TAB_VALUE);
+    const { hash } = useHash();
+    const onChange = useCallback((_event, hash) => {
+        Router.push({ hash });
+    }, []);
+    useEffect(() => {
+        setValue(getNextValue(hash, outline));
+    }, [hash, outline]);
+    return {
+        indicatorColor: value
+            ? TABS_PROPS.INDICATOR_COLOR.PRIMARY
+            : TABS_PROPS.INDICATOR_COLOR.TRANSPARENT,
+        onChange,
+        orientation: TABS_PROPS.ORIENTATION.VERTICAL,
+        value,
+    };
+}

package/lib/components/Layout/components/Outline/hooks/UseTabs/utils.d.ts

@@ -0,0 +1,9 @@
+import { TabsProps } from "@mui/material";
+import { OutlineItem } from "../../types";
+/**
+ * Returns the tab value for navigation.
+ * @param hash - The current hash from the URL.
+ * @param outlineItems - Outline items.
+ * @returns The item's hash if found and enabled, otherwise returns the default tab value.
+ */
+export declare function getNextValue(hash: string, outlineItems: OutlineItem[]): TabsProps["value"];

package/lib/components/Layout/components/Outline/hooks/UseTabs/utils.js

@@ -0,0 +1,13 @@
+import { DEFAULT_TAB_VALUE } from "./constants";
+/**
+ * Returns the tab value for navigation.
+ * @param hash - The current hash from the URL.
+ * @param outlineItems - Outline items.
+ * @returns The item's hash if found and enabled, otherwise returns the default tab value.
+ */
+export function getNextValue(hash, outlineItems) {
+    const item = outlineItems.find((item) => item.hash === hash);
+    if (!item || item.disabled)
+        return DEFAULT_TAB_VALUE;
+    return item.hash;
+}

package/lib/components/Layout/components/Outline/outline.d.ts

@@ -1,13 +1,2 @@
-import { ElementType } from "react";
-import { ContentsTabProps } from "./components/ContentsTab/contentsTab";
-export interface OutlineItem {
-    depth: number;
-    hash: string;
-    value: string;
-}
-export interface OutlineProps {
-    className?: string;
-    Contents: ElementType<ContentsTabProps>;
-    outline: OutlineItem[];
-}
-export declare const Outline: ({ className, Contents, outline, ...props }: OutlineProps) => JSX.Element;
+import { OutlineProps } from "./types";
+export declare const Outline: ({ className, Contents, outline, ...props }: OutlineProps) => JSX.Element | null;

package/lib/components/Layout/components/Outline/outline.js

@@ -1,34 +1,10 @@
-import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
-import { DEFAULT_TAB_VALUE } from "./common/constants";
-import { Tab, Tabs } from "./outline.styles";
-export const Outline = ({ className, Contents, outline, ...props /* Spread props to allow for Mui Tabs specific prop overrides. */ }) => {
-    const { asPath, push } = useRouter();
-    const [activeTab, setActiveTab] = useState("");
-    // Callback fired when selected tab value changes.
-    const handleChange = (_event, tabValue) => {
-        push(`#${tabValue}`);
-    };
-    // Update active tab when path changes.
-    useEffect(() => {
-        setActiveTab(getActiveTab(outline, asPath));
-    }, [asPath, outline]);
-    return (React.createElement(Tabs, { className: className, indicatorColor: activeTab ? "primary" : "transparent", onChange: handleChange, orientation: "vertical", value: activeTab, ...props },
+import React from "react";
+import { DEFAULT_TAB_VALUE } from "./hooks/UseTabs/constants";
+import { useTabs } from "./hooks/UseTabs/hook";
+import { StyledTab, StyledTabs } from "./outline.styles";
+export const Outline = ({ className, Contents, outline, ...props /* MuiTabsProps */ }) => {
+    const { indicatorColor, onChange, orientation, value } = useTabs(outline);
+    return (React.createElement(StyledTabs, { className: className, indicatorColor: indicatorColor, onChange: onChange, orientation: orientation, value: value, ...props },
         React.createElement(Contents, { value: DEFAULT_TAB_VALUE }),
-        outline.map(({ depth, hash, value }) => (React.createElement(Tab, { key: hash, depth: depth, label: value, value: hash })))));
+        outline.map(({ depth, disabled, hash, value }) => (React.createElement(StyledTab, { depth: depth, disabled: disabled, key: hash, label: value, value: hash })))));
 };
-/**
- * Initializes active tab.
- * @param outline - Outline items.
- * @param asPath - Current path.
- * @returns active tab.
- */
-function getActiveTab(outline, asPath) {
-    if (asPath.includes("#")) {
-        const hashLink = asPath.split("#")[1];
-        if (outline.some(({ hash }) => hash === hashLink)) {
-            return hashLink;
-        }
-    }
-    return DEFAULT_TAB_VALUE;
-}

package/lib/components/Layout/components/Outline/outline.styles.d.ts

@@ -3,12 +3,12 @@ interface Props extends TabProps {
     depth: number;
 }
 export declare const tab: import("@emotion/react").SerializedStyles;
-export declare const Tabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "style" | "className" | "classes" | "aria-label" | "aria-labelledby" | "children" | "onChange" | "sx" | "variant" | "orientation" | "value" | "action" | "slotProps" | "slots" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
+}, "style" | "className" | "classes" | "aria-label" | "aria-labelledby" | "children" | "onChange" | "sx" | "variant" | "orientation" | "value" | "action" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const Tab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledTab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "icon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "wrapped" | "iconPosition"> & {
     theme?: import("@emotion/react").Theme;

package/lib/components/Layout/components/Outline/outline.styles.js

@@ -15,7 +15,7 @@ export const tab = css `
     text-decoration: none;
   }
 `;
-export const Tabs = styled(MTabs) `
+export const StyledTabs = styled(MTabs) `
   align-self: flex-start;
   box-shadow: inset 1px 0 ${smokeMain};
   margin: 0;
@@ -36,7 +36,7 @@ export const Tabs = styled(MTabs) `
     width: 3px;
   }
 `;
-export const Tab = styled(MTab, {
+export const StyledTab = styled(MTab, {
     shouldForwardProp: (prop) => prop !== "depth",
 }) `
   ${tab};

package/lib/components/Layout/components/Outline/types.d.ts

@@ -0,0 +1,14 @@
+import { TabsProps } from "@mui/material";
+import { ElementType } from "react";
+import { BaseComponentProps } from "../../../types";
+import { ContentsTabProps } from "./components/ContentsTab/types";
+export interface OutlineItem {
+    depth: number;
+    disabled?: boolean;
+    hash: string;
+    value: string;
+}
+export interface OutlineProps extends BaseComponentProps, TabsProps {
+    Contents: ElementType<ContentsTabProps>;
+    outline: OutlineItem[];
+}

package/lib/components/Layout/components/Outline/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { SIDEBAR_POSITIONER } from "../../../../../../common/selectors";
-import { useLayoutState } from "../../../../../../hooks/useLayoutState";
+import { SELECTOR } from "../../../../../../common/selectors";
+import { useLayoutDimensions } from "../../../../../../providers/layoutDimensions/hook";
 import { SidebarPositioner as Positioner } from "./sidebarPositioner.styles";
 export const SidebarPositioner = ({ children, }) => {
-    const { layoutState: { headerHeight }, } = useLayoutState();
-    return (React.createElement(Positioner, { headerHeight: headerHeight, id: SIDEBAR_POSITIONER }, children));
+    const { dimensions } = useLayoutDimensions();
+    return (React.createElement(Positioner, { headerHeight: dimensions.header.height, id: SELECTOR.SIDEBAR_POSITIONER }, children));
 };