@databiosphere/findable-ui 22.0.0 → 23.0.0

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/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/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"> & {
     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));
 };

package/lib/components/Login/components/Section/components/Warning/warning.js

@@ -1,9 +1,8 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import { COLOR } from "../../../../../../styles/common/mui/typography";
-import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 export const Warning = ({ children, className, ...props /* Mui TypographyOwnProps */ }) => {
     if (!children)
         return null;
-    return (React.createElement(Typography, { className: className, color: COLOR.INK_LIGHT, mt: 6, variant: TEXT_BODY_SMALL_400, ...props }, children));
+    return (React.createElement(Typography, { className: className, color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, mt: 6, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400, ...props }, children));
 };

package/lib/components/Table/components/TableCell/components/RowPositionCell/constants.js

@@ -1,5 +1,5 @@
-import { VARIANT } from "../../../../../../styles/common/mui/typography";
+import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 export const TYPOGRAPHY_PROPS = {
     sx: { marginRight: -2, paddingLeft: 2 },
-    variant: VARIANT.INHERIT,
+    variant: MUI_TYPOGRAPHY_PROPS.VARIANT.INHERIT,
 };

package/lib/components/common/AnchorLink/anchorLink.d.ts

@@ -1,3 +1,9 @@
+/**
+ * An anchor link component that provides deep linking functionality.
+ * @important The parent element must have `position: relative` CSS property
+ * to ensure proper positioning of the anchor link icon, and hover pseudo-class
+ * to change opacity of the icon.
+ */
 interface AnchorLinkProps {
     anchorLink: string;
     className?: string;

package/lib/components/common/LoginDialog/constants.js

@@ -1,15 +1,15 @@
 import { FONT_SIZE } from "../../../styles/common/mui/icon";
-import { COLOR, VARIANT } from "../../../styles/common/mui/typography";
+import { TYPOGRAPHY_PROPS } from "../../../styles/common/mui/typography";
 export const DIALOG_CONTENT_TEXT_PROPS = {
-    color: COLOR.INK_LIGHT,
+    color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
     component: "div",
-    variant: VARIANT.TEXT_BODY_400,
+    variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400,
 };
 export const DIALOG_PROPS = {
     PaperProps: { elevation: 0 },
 };
 export const DIALOG_TITLE_PROPS = {
-    variant: VARIANT.TEXT_HEADING_SMALL,
+    variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL,
 };
 export const ICON_BUTTON_PROPS = {
     color: "inkLight",

package/lib/providers/layoutDimensions/constants.d.ts

@@ -0,0 +1,2 @@
+import { LayoutDimensions } from "./types";
+export declare const DEFAULT_LAYOUT_DIMENSIONS: LayoutDimensions;

package/lib/providers/layoutDimensions/constants.js

@@ -0,0 +1,4 @@
+export const DEFAULT_LAYOUT_DIMENSIONS = {
+    footer: { height: 0 },
+    header: { height: 0 },
+};

package/lib/providers/layoutDimensions/context.d.ts

@@ -0,0 +1,2 @@
+import { LayoutDimensionsContextProps } from "./types";
+export declare const LayoutDimensionsContext: import("react").Context<LayoutDimensionsContextProps>;

package/lib/providers/layoutDimensions/context.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import { DEFAULT_LAYOUT_DIMENSIONS } from "./constants";
+export const LayoutDimensionsContext = createContext({
+    dimensions: DEFAULT_LAYOUT_DIMENSIONS,
+    footerRef: null,
+    headerRef: null,
+});

package/lib/providers/layoutDimensions/hook.d.ts

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

package/lib/providers/layoutDimensions/hook.js

@@ -0,0 +1,5 @@
+import { useContext } from "react";
+import { LayoutDimensionsContext } from "./context";
+export const useLayoutDimensions = () => {
+    return useContext(LayoutDimensionsContext);
+};

package/lib/providers/layoutDimensions/provider.d.ts

@@ -0,0 +1,2 @@
+import { LayoutDimensionsProviderProps } from "./types";
+export declare const LayoutDimensionsProvider: ({ children, }: LayoutDimensionsProviderProps) => JSX.Element;

package/lib/providers/layoutDimensions/provider.js

@@ -0,0 +1,14 @@
+import React, { useRef } from "react";
+import { getBorderBoxSizeHeight, useResizeObserver, } from "../../hooks/useResizeObserver";
+import { LayoutDimensionsContext } from "./context";
+export const LayoutDimensionsProvider = ({ children, }) => {
+    const footerRef = useRef(null);
+    const headerRef = useRef(null);
+    const footerRect = useResizeObserver(footerRef, getBorderBoxSizeHeight);
+    const headerRect = useResizeObserver(headerRef, getBorderBoxSizeHeight);
+    const dimensions = {
+        footer: { height: footerRect?.height ?? 0 },
+        header: { height: headerRect?.height ?? 0 },
+    };
+    return (React.createElement(LayoutDimensionsContext.Provider, { value: { dimensions, footerRef, headerRef } }, children));
+};

package/lib/providers/layoutDimensions/types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode, RefObject } from "react";
+import { ElementRect } from "../../hooks/useResizeObserver";
+export interface LayoutDimensions {
+    footer: Pick<ElementRect, "height">;
+    header: Pick<ElementRect, "height">;
+}
+export interface LayoutDimensionsContextProps {
+    dimensions: LayoutDimensions;
+    footerRef: RefObject<HTMLElement> | null;
+    headerRef: RefObject<HTMLElement> | null;
+}
+export interface LayoutDimensionsProviderProps {
+    children: ReactNode | ReactNode[];
+}

package/lib/providers/layoutDimensions/types.js

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

package/lib/styles/common/mui/tab.d.ts

@@ -0,0 +1,7 @@
+import { TabProps } from "@mui/material";
+type TabPropsOptions = {
+    ICON_POSITION: typeof ICON_POSITION;
+};
+declare const ICON_POSITION: Record<string, TabProps["iconPosition"]>;
+export declare const TAB_PROPS: TabPropsOptions;
+export {};

package/lib/styles/common/mui/tab.js

@@ -0,0 +1,9 @@
+const ICON_POSITION = {
+    BOTTOM: "bottom",
+    END: "end",
+    START: "start",
+    TOP: "top",
+};
+export const TAB_PROPS = {
+    ICON_POSITION,
+};

package/lib/styles/common/mui/tabs.d.ts

@@ -0,0 +1,9 @@
+import { TabsProps } from "@mui/material";
+type TabsPropsOptions = {
+    INDICATOR_COLOR: typeof INDICATOR_COLOR;
+    ORIENTATION: typeof ORIENTATION;
+};
+declare const INDICATOR_COLOR: Record<string, TabsProps["indicatorColor"]>;
+declare const ORIENTATION: Record<string, TabsProps["orientation"]>;
+export declare const TABS_PROPS: TabsPropsOptions;
+export {};