@databiosphere/findable-ui 21.4.0 → 23.0.0

package/lib/components/Layout/components/BackPage/backPageView.stories.d.ts

@@ -1,5 +1,31 @@
-import { ComponentMeta } from "@storybook/react";
-import { BackPageView } from "./backPageView";
-declare const _default: ComponentMeta<typeof BackPageView>;
-export default _default;
-export declare const BackPageViewStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./backPageView").BackPageViewProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        isDetailOverview: {
+            control: "boolean";
+        };
+        mainColumn: {
+            table: {
+                disable: true;
+            };
+        };
+        sideColumn: {
+            table: {
+                disable: true;
+            };
+        };
+        top: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+    component: ({ isDetailOverview, mainColumn, sideColumn, Tabs, top, }: import("./backPageView").BackPageViewProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const BackPageViewStory: Story;

package/lib/components/Layout/components/BackPage/backPageView.stories.js

@@ -1,15 +1,23 @@
 import React from "react";
+import { CollaboratingOrganizations } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations";
 import { CollaboratingOrganizationsStory } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
+import { Contacts } from "../../../Project/components/Contacts/contacts";
 import { ContactsStory } from "../../../Project/components/Contacts/contacts.stories";
+import { Contributors } from "../../../Project/components/Contributors/contributors";
 import { ContributorsStory } from "../../../Project/components/Contributors/contributors.stories";
+import { DataCurators } from "../../../Project/components/DataCurators/dataCurators";
 import { DataCuratorsStory } from "../../../Project/components/DataCurators/dataCurators.stories";
-import { DataReleasePolicyStory } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy.stories";
+import { DataReleasePolicy } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy";
+import { Description } from "../../../Project/components/Description/description";
 import { DescriptionStory } from "../../../Project/components/Description/description.stories";
+import { Details } from "../../../Project/components/Details/details";
 import { DetailsStory } from "../../../Project/components/Details/details.stories";
+import { Publications } from "../../../Project/components/Publications/publications";
 import { PublicationsStory } from "../../../Project/components/Publications/publications.stories";
+import { SupplementaryLinks } from "../../../Project/components/SupplementaryLinks/supplementaryLinks";
 import { SupplementaryLinksStory } from "../../../Project/components/SupplementaryLinks/supplementaryLinks.stories";
 import { BackPageView } from "./backPageView";
-export default {
+const meta = {
     argTypes: {
         isDetailOverview: { control: "boolean" },
         mainColumn: { table: { disable: true } },
@@ -22,20 +30,21 @@ export default {
     },
     title: "Views/BackPage",
 };
-const BackPageViewTemplate = (args) => (React.createElement(BackPageView, { ...args }));
-export const BackPageViewStory = BackPageViewTemplate.bind({});
-BackPageViewStory.args = {
-    isDetailOverview: true,
-    mainColumn: (React.createElement(React.Fragment, null,
-        React.createElement(DescriptionStory, { projectDescription: DescriptionStory.args?.projectDescription || "None" }),
-        React.createElement(ContactsStory, { ...ContactsStory.args }),
-        React.createElement(PublicationsStory, { ...PublicationsStory.args }),
-        React.createElement(ContributorsStory, { ...ContributorsStory.args }),
-        React.createElement(CollaboratingOrganizationsStory, { ...CollaboratingOrganizationsStory.args }),
-        React.createElement(DataCuratorsStory, { ...DataCuratorsStory.args }),
-        React.createElement(SupplementaryLinksStory, { ...SupplementaryLinksStory.args }),
-        React.createElement(DataReleasePolicyStory, null))),
-    sideColumn: (React.createElement(React.Fragment, null,
-        React.createElement(DetailsStory, { title: DetailsStory.args?.title ?? "", keyValuePairs: DetailsStory.args?.keyValuePairs }))),
-    top: React.createElement(React.Fragment, null),
+export default meta;
+export const BackPageViewStory = {
+    args: {
+        isDetailOverview: true,
+        mainColumn: (React.createElement(React.Fragment, null,
+            React.createElement(Description, { projectDescription: DescriptionStory.args?.projectDescription || "None" }),
+            React.createElement(Contacts, { ...ContactsStory.args }),
+            React.createElement(Publications, { ...PublicationsStory.args }),
+            React.createElement(Contributors, { ...ContributorsStory.args }),
+            React.createElement(CollaboratingOrganizations, { ...CollaboratingOrganizationsStory.args }),
+            React.createElement(DataCurators, { ...DataCuratorsStory.args }),
+            React.createElement(SupplementaryLinks, { ...SupplementaryLinksStory.args }),
+            React.createElement(DataReleasePolicy, null))),
+        sideColumn: (React.createElement(React.Fragment, null,
+            React.createElement(Details, { ...DetailsStory.args }))),
+        top: React.createElement(React.Fragment, null),
+    },
 };

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.stories.d.ts

@@ -1,6 +1,27 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react";
 import { Footer } from "./footer";
-declare const _default: Meta<typeof Footer>;
-export default _default;
+declare const meta: {
+    argTypes: {
+        Branding: {
+            control: {
+                disabled: boolean;
+            };
+        };
+        navLinks: {
+            control: "object";
+        };
+        socials: {
+            control: {
+                disabled: boolean;
+            };
+        };
+    };
+    component: ({ Branding, className, navLinks, socials, versionInfo, }: import("./footer").FooterProps) => JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
 type Story = StoryObj<typeof Footer>;
 export declare const FooterStory: Story;

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

@@ -7,10 +7,10 @@ import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
 import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
 import { Logo } from "../Header/components/Content/components/Logo/logo";
 import { Footer } from "./footer";
-export default {
+const meta = {
     argTypes: {
         Branding: { control: { disabled: true } },
-        navLinks: { control: "array" },
+        navLinks: { control: "object" },
         socials: { control: { disabled: true } },
     },
     component: Footer,
@@ -19,9 +19,10 @@ export default {
     },
     title: "Components/Layout/Footer",
 };
+export default meta;
 export const FooterStory = {
     args: {
-        Branding: React.createElement(Logo, { alt: "logo", height: 24, link: "/", src: logo }),
+        Branding: React.createElement(Logo, { alt: "logo", height: 24, link: "/", src: logo.src }),
         navLinks: [
             {
                 label: "Help",

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/Header/header.stories.js

@@ -25,7 +25,7 @@ const url = "/";
 export const HeaderStory = {
     args: {
         authenticationEnabled: false,
-        logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo }),
+        logo: React.createElement(Logo, { alt: "Logo", height: 40, link: "/", src: logo.src }),
         navigation: [
             undefined,
             [

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/SidebarLabel/sidebarLabel.stories.d.ts

@@ -1,5 +1,13 @@
-import { ComponentMeta } from "@storybook/react";
-import { SidebarLabel } from "./sidebarLabel";
-declare const _default: ComponentMeta<typeof SidebarLabel>;
-export default _default;
-export declare const SidebarLabelStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./sidebarLabel").SidebarLabelProps>;
+import { StoryObj } from "@storybook/react";
+declare const meta: {
+    argTypes: {
+        label: {
+            control: "text";
+        };
+    };
+    component: ({ label }: import("./sidebarLabel").SidebarLabelProps) => JSX.Element;
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SidebarLabelStory: Story;

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.stories.js

@@ -1,14 +1,14 @@
-import React from "react";
 import { SidebarLabel } from "./sidebarLabel";
-export default {
+const meta = {
     argTypes: {
         label: { control: "text" },
     },
     component: SidebarLabel,
     title: "Components/Label",
 };
-const SidebarLabelTemplate = (args) => (React.createElement(SidebarLabel, { ...args }));
-export const SidebarLabelStory = SidebarLabelTemplate.bind({});
-SidebarLabelStory.args = {
-    label: "Filter",
+export default meta;
+export const SidebarLabelStory = {
+    args: {
+        label: "Filter",
+    },
 };

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/Layout/components/Sidebar/sidebar.stories.js

@@ -1,3 +1,4 @@
+import { fn } from "@storybook/test";
 import React from "react";
 import { Sidebar } from "./sidebar";
 export default {
@@ -34,5 +35,6 @@ export const TemporaryOpenSidebarStory = {
     args: {
         children: React.createElement("div", null),
         drawerOpen: true,
+        onDrawerClose: fn(),
     },
 };