@databiosphere/findable-ui 22.0.0 → 23.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "22.0.0"
+  ".": "23.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [23.0.0](https://github.com/DataBiosphere/findable-ui/compare/v22.0.0...v23.0.0) (2025-03-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* create data dictionary left-hand navigation component and add dictionary layout ([#337](https://github.com/DataBiosphere/findable-ui/issues/337)) (#338)
+* layoutdimensions provider and remove layout state provider ([#348](https://github.com/DataBiosphere/findable-ui/issues/348)) (#349)
+* refactor outline component with new hook handling state and disabled outline item ([#346](https://github.com/DataBiosphere/findable-ui/issues/346)) (#347)
+* refactor selectors into an enum and add ids to header and footer ([#341](https://github.com/DataBiosphere/findable-ui/issues/341)) (#343)
+* refactor typography constants ([#339](https://github.com/DataBiosphere/findable-ui/issues/339)) (#340)
+
+### Features
+
+* create a new provider that returns header and footer dimensions ([#344](https://github.com/DataBiosphere/findable-ui/issues/344)) ([#345](https://github.com/DataBiosphere/findable-ui/issues/345)) ([7800842](https://github.com/DataBiosphere/findable-ui/commit/7800842b43b6e2edae926dcc26c842ccb592c407))
+* create data dictionary left-hand navigation component and add dictionary layout ([#337](https://github.com/DataBiosphere/findable-ui/issues/337)) ([#338](https://github.com/DataBiosphere/findable-ui/issues/338)) ([94115b3](https://github.com/DataBiosphere/findable-ui/commit/94115b3a308f150bdeba9a9e374a9dcc510f3405))
+
+
+### Bug Fixes
+
+* layoutdimensions provider and remove layout state provider ([#348](https://github.com/DataBiosphere/findable-ui/issues/348)) ([#349](https://github.com/DataBiosphere/findable-ui/issues/349)) ([77deafe](https://github.com/DataBiosphere/findable-ui/commit/77deafe915d5a6fe42667a404d2b1f062f67cabb))
+
+
+### Code Refactoring
+
+* refactor outline component with new hook handling state and disabled outline item ([#346](https://github.com/DataBiosphere/findable-ui/issues/346)) ([#347](https://github.com/DataBiosphere/findable-ui/issues/347)) ([0d8fdba](https://github.com/DataBiosphere/findable-ui/commit/0d8fdba669c47e61d5e524274b237eed55998fd6))
+* refactor selectors into an enum and add ids to header and footer ([#341](https://github.com/DataBiosphere/findable-ui/issues/341)) ([#343](https://github.com/DataBiosphere/findable-ui/issues/343)) ([71b7444](https://github.com/DataBiosphere/findable-ui/commit/71b74449330ce507f22939d7bdaf0f92af985de8))
+* refactor typography constants ([#339](https://github.com/DataBiosphere/findable-ui/issues/339)) ([#340](https://github.com/DataBiosphere/findable-ui/issues/340)) ([a5632b5](https://github.com/DataBiosphere/findable-ui/commit/a5632b50d852323a0002eae7b0524378728ff081))
+
 ## [22.0.0](https://github.com/DataBiosphere/findable-ui/compare/v21.4.0...v22.0.0) (2025-03-14)
 
 

package/lib/common/selectors.d.ts

@@ -1,2 +1,6 @@
-export declare const BODY = "body";
-export declare const SIDEBAR_POSITIONER = "sidebar-positioner";
+export declare enum SELECTOR {
+    BODY = "body",
+    FOOTER = "footer",
+    HEADER = "header",
+    SIDEBAR_POSITIONER = "sidebar-positioner"
+}

package/lib/common/selectors.js

@@ -1,2 +1,7 @@
-export const BODY = "body";
-export const SIDEBAR_POSITIONER = "sidebar-positioner";
+export var SELECTOR;
+(function (SELECTOR) {
+    SELECTOR["BODY"] = "body";
+    SELECTOR["FOOTER"] = "footer";
+    SELECTOR["HEADER"] = "header";
+    SELECTOR["SIDEBAR_POSITIONER"] = "sidebar-positioner";
+})(SELECTOR || (SELECTOR = {}));

package/lib/components/DataDictionary/components/Entities/constants.d.ts

@@ -1,2 +1,3 @@
 import { Grid2Props } from "@mui/material";
+export declare const ENTITIES_ROW_GAP = 8;
 export declare const GRID2_PROPS: Grid2Props;

package/lib/components/DataDictionary/components/Entities/constants.js

@@ -1,6 +1,7 @@
+export const ENTITIES_ROW_GAP = 8;
 export const GRID2_PROPS = {
     container: true,
     direction: "column",
     flexWrap: "nowrap",
-    rowGap: 8,
+    rowGap: ENTITIES_ROW_GAP,
 };

package/lib/components/DataDictionary/components/Entities/entities.d.ts

@@ -1,2 +1,2 @@
 import { ClassesProps } from "./types";
-export declare const Entities: ({ classes }: ClassesProps) => JSX.Element;
+export declare const Entities: ({ classes, spacing }: ClassesProps) => JSX.Element;

package/lib/components/DataDictionary/components/Entities/entities.js

@@ -2,6 +2,6 @@ import { Grid2 } from "@mui/material";
 import React from "react";
 import { Entity } from "../Entity/entity";
 import { GRID2_PROPS } from "./constants";
-export const Entities = ({ classes }) => {
-    return (React.createElement(Grid2, { ...GRID2_PROPS }, classes.map((classData) => (React.createElement(Entity, { key: classData.key, class: classData })))));
+export const Entities = ({ classes, spacing }) => {
+    return (React.createElement(Grid2, { ...GRID2_PROPS }, classes.map((classData) => (React.createElement(Entity, { key: classData.key, class: classData, spacing: spacing })))));
 };

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

@@ -1,4 +1,6 @@
 import { Class } from "../../../../common/entities";
+import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 export interface ClassesProps {
     classes: Class[];
+    spacing?: LayoutSpacing;
 }

package/lib/components/DataDictionary/components/Entity/entity.d.ts

@@ -1,2 +1,2 @@
 import { EntityProps } from "./types";
-export declare const Entity: ({ class: classData }: EntityProps) => JSX.Element;
+export declare const Entity: ({ class: classData, spacing, }: EntityProps) => JSX.Element;

package/lib/components/DataDictionary/components/Entity/entity.js

@@ -1,14 +1,19 @@
 import { Grid2, Typography } from "@mui/material";
 import React from "react";
-import { COLOR, VARIANT } from "../../../../styles/common/mui/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../styles/common/mui/typography";
+import { AnchorLink } from "../../../common/AnchorLink/anchorLink";
 import { useTable } from "../Table/hook";
 import { Table } from "../Table/table";
 import { GRID2_PROPS } from "./constants";
-export const Entity = ({ class: classData }) => {
+import { StyledTypography } from "./entity.styles";
+export const Entity = ({ class: classData, spacing, }) => {
     const table = useTable(classData.attributes);
     return (React.createElement(Grid2, { ...GRID2_PROPS, rowGap: 4 },
         React.createElement(Grid2, { ...GRID2_PROPS, rowGap: 1 },
-            React.createElement(Typography, { component: "h3", variant: VARIANT.TEXT_HEADING_SMALL }, classData.label),
-            React.createElement(Typography, { color: COLOR.INK_LIGHT, component: "div", variant: VARIANT.TEXT_BODY_400_2_LINES }, classData.description)),
+            React.createElement(StyledTypography, { component: "h3", id: classData.key, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL, ...spacing },
+                classData.label,
+                " ",
+                React.createElement(AnchorLink, { anchorLink: classData.key })),
+            React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, component: "div", variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES }, classData.description)),
         React.createElement(Table, { table: table })));
 };

package/lib/components/DataDictionary/components/Entity/entity.styles.d.ts

@@ -0,0 +1,2 @@
+import { Typography } from "@mui/material";
+export declare const StyledTypography: typeof Typography;

package/lib/components/DataDictionary/components/Entity/entity.styles.js

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+import { Typography } from "@mui/material";
+import { ENTITIES_ROW_GAP } from "../Entities/constants";
+export const StyledTypography = styled(Typography) `
+  scroll-margin-top: ${({ top = 0 }) => top + ENTITIES_ROW_GAP}px;
+
+  &:hover a {
+    opacity: 1;
+  }
+`;

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

@@ -1,4 +1,6 @@
 import { Class } from "../../../../common/entities";
+import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 export interface EntityProps {
     class: Class;
+    spacing?: LayoutSpacing;
 }

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.d.ts

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

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { Layout } from "./entitiesLayout.styles";
+export const EntitiesLayout = ({ children, ...props }) => {
+    return React.createElement(Layout, { ...props }, children);
+};

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.d.ts

@@ -0,0 +1,5 @@
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export declare const Layout: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+} & LayoutSpacing, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.js

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LAYOUT_SPACING } from "../../constants";
+const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
+const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
+const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
+export const Layout = styled("div") `
+  grid-column: 2;
+  grid-row: 1;
+  padding-bottom: ${PB}px;
+  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
+  z-index: 1; /* not required, but helpful in that the entities are always on top */
+
+  ${mediaTabletDown} {
+    grid-column: 1;
+    grid-row: auto;
+    padding-top: ${PT}px;
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export interface EntitiesLayoutProps extends LayoutSpacing {
+    children: ReactNode;
+}

package/lib/components/DataDictionary/components/Layout/components/EntitiesLayout/types.js

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

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.d.ts

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

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { Layout, LayoutScroller } from "./outlineLayout.styles";
+export const OutlineLayout = ({ children, ...props }) => {
+    return (React.createElement(Layout, { ...props },
+        React.createElement(LayoutScroller, null, children)));
+};

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.d.ts

@@ -0,0 +1,9 @@
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export declare const Layout: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+} & LayoutSpacing, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LayoutScroller: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.js

@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { LAYOUT_SPACING } from "../../constants";
+const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
+const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
+const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
+export const Layout = styled("div") `
+  grid-column: 1;
+  grid-row: 1;
+  margin-bottom: ${({ bottom }) => -bottom}px; /* required; prevents sticky element from scrolling when footer scrolls into viewport */
+  max-height: 100vh;
+  overflow: hidden;
+  padding-bottom: ${({ bottom }) => bottom}px; /* footer height */
+  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
+  position: sticky;
+  top: 0;
+
+  ${mediaTabletDown} {
+    display: none;
+  }
+`;
+export const LayoutScroller = styled("div") `
+  height: 100%;
+  overflow: auto;
+  padding-bottom: ${PB}px;
+`;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export interface OutlineLayoutProps extends LayoutSpacing {
+    children: ReactNode;
+}

package/lib/components/DataDictionary/components/Layout/components/OutlineLayout/types.js

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

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.d.ts

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

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { Layout } from "./titleLayout.styles";
+export const TitleLayout = ({ children, ...props }) => {
+    return React.createElement(Layout, { ...props }, children);
+};

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.d.ts

@@ -0,0 +1,5 @@
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export declare const Layout: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+} & LayoutSpacing, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.js

@@ -0,0 +1,16 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+export const Layout = styled("div") `
+  grid-column: 1 / -1;
+  grid-row: 1;
+  height: fit-content;
+  padding-top: ${({ top }) => top}px; /* header height */
+  position: sticky;
+  top: 0;
+
+  ${mediaTabletDown} {
+    grid-column: 1;
+    grid-row: auto;
+    position: relative;
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
+export interface TitleLayoutProps extends LayoutSpacing {
+    children: ReactNode;
+}

package/lib/components/DataDictionary/components/Layout/components/TitleLayout/types.js

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

package/lib/components/DataDictionary/components/Layout/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const LAYOUT_SPACING: {
+    CONTENT_PADDING_BOTTOM: number;
+    CONTENT_PADDING_TOP: number;
+    TITLE_HEIGHT: number;
+};

package/lib/components/DataDictionary/components/Layout/constants.js

@@ -0,0 +1,5 @@
+export const LAYOUT_SPACING = {
+    CONTENT_PADDING_BOTTOM: 24,
+    CONTENT_PADDING_TOP: 16,
+    TITLE_HEIGHT: 74,
+};

package/lib/components/DataDictionary/components/Outline/components/ContentsTab/constants.d.ts

@@ -0,0 +1,2 @@
+import { ContentsTabProps } from "../../../../../Layout/components/Outline/components/ContentsTab/types";
+export declare const TAB_PROPS: ContentsTabProps;

package/lib/components/DataDictionary/components/Outline/components/ContentsTab/constants.js

@@ -0,0 +1,5 @@
+export const TAB_PROPS = {
+    icon: undefined,
+    label: "Entity Type",
+    value: "",
+};

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

@@ -0,0 +1 @@
+export declare const ContentsTab: () => JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { TAB_PROPS } from "./constants";
+import { StyledContentsTab } from "./contentsTab.styles";
+export const ContentsTab = () => {
+    return React.createElement(StyledContentsTab, { ...TAB_PROPS });
+};

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

@@ -0,0 +1,3 @@
+export declare const StyledContentsTab: import("@emotion/styled").StyledComponent<import("../../../../../Layout/components/Outline/components/ContentsTab/types").ContentsTabProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+import { ContentsTab } from "../../../../../Layout/components/Outline/components/ContentsTab/contentsTab";
+export const StyledContentsTab = styled(ContentsTab) `
+  & {
+    padding: 8px 24px;
+  }
+`;

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

@@ -0,0 +1,2 @@
+import { OutlineProps } from "./types";
+export declare const Outline: ({ outline, ...props }: OutlineProps) => JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContentsTab } from "./components/ContentsTab/contentsTab";
+import { StyledOutline } from "./outline.styles";
+export const Outline = ({ outline, ...props /* MuiTabsProps */ }) => {
+    return React.createElement(StyledOutline, { Contents: ContentsTab, outline: outline, ...props });
+};

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

@@ -0,0 +1,3 @@
+export declare const StyledOutline: import("@emotion/styled").StyledComponent<import("../../../Layout/components/Outline/types").OutlineProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { inkLight, inkMain, smokeDark, } from "../../../../styles/common/mixins/colors";
+import { Outline } from "../../../Layout/components/Outline/outline";
+export const StyledOutline = styled(Outline) `
+  &.MuiTabs-root {
+    .MuiTab-root {
+      color: ${inkLight};
+
+      &.Mui-selected {
+        color: ${inkMain};
+      }
+
+      &.Mui-disabled {
+        color: ${smokeDark};
+        opacity: 1;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { TabsProps } from "@mui/material";
+import { OutlineItem } from "../../../Layout/components/Outline/types";
+export interface OutlineProps extends TabsProps {
+    outline: OutlineItem[];
+}

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

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

package/lib/components/DataDictionary/components/Outline/utils.d.ts

@@ -0,0 +1,8 @@
+import { Class } from "../../../../common/entities";
+import { OutlineItem } from "../../../Layout/components/Outline/types";
+/**
+ * Returns outline items from classes.
+ * @param classes - Class entities.
+ * @returns Outline items.
+ */
+export declare function buildClassesOutline(classes: Class[]): OutlineItem[];

package/lib/components/DataDictionary/components/Outline/utils.js

@@ -0,0 +1,15 @@
+/**
+ * Returns outline items from classes.
+ * @param classes - Class entities.
+ * @returns Outline items.
+ */
+export function buildClassesOutline(classes) {
+    return classes.map(({ key, name }) => {
+        return {
+            depth: 2,
+            disabled: false,
+            hash: key,
+            value: name,
+        };
+    });
+}

package/lib/components/DataDictionary/components/Table/components/BasicCell/basicCell.js

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import { VARIANT } from "../../../../../../styles/common/mui/typography";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
 export const BasicCell = ({ getValue }) => {
-    return React.createElement(Typography, { variant: VARIANT.INHERIT }, getValue());
+    return (React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.INHERIT }, getValue()));
 };

package/lib/components/DataDictionary/components/Title/title.d.ts

@@ -0,0 +1,2 @@
+import { TitleProps } from "../../../common/Title/title";
+export declare const Title: ({ title, ...props }: TitleProps) => JSX.Element;

package/lib/components/DataDictionary/components/Title/title.js

@@ -0,0 +1,3 @@
+import React from "react";
+import { StyledTitle } from "./title.styles";
+export const Title = ({ title = "Data Dictionary", ...props }) => React.createElement(StyledTitle, { title: title, ...props });

package/lib/components/DataDictionary/components/Title/title.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledTitle: import("@emotion/styled").StyledComponent<import("../../../common/Title/title").TitleProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/DataDictionary/components/Title/title.styles.js

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
+import { Title } from "../../../common/Title/title";
+export const StyledTitle = styled(Title) `
+  & {
+    font-size: 34px;
+    grid-column: 1 / -1;
+    letter-spacing: normal;
+    line-height: 42px;
+    margin: 24px 0 8px;
+
+    ${mediaTabletDown} {
+      font-size: 26px;
+      line-height: 34px;
+    }
+  }
+`;

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

@@ -1,2 +1,2 @@
-import { BaseComponentProps } from "../types";
-export declare const DataDictionary: ({ className, }: BaseComponentProps) => JSX.Element;
+import { DataDictionaryProps } from "./types";
+export declare const DataDictionary: ({ className, EntitiesLayout, Outline, OutlineLayout, Title, TitleLayout, }: DataDictionaryProps) => JSX.Element;

package/lib/components/DataDictionary/dataDictionary.js

@@ -1,9 +1,23 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Entities } from "./components/Entities/entities";
+import { EntitiesLayout as DefaultEntitiesLayout } from "./components/Layout/components/EntitiesLayout/entitiesLayout";
+import { OutlineLayout as DefaultOutlineLayout } from "./components/Layout/components/OutlineLayout/outlineLayout";
+import { TitleLayout as DefaultTitleLayout } from "./components/Layout/components/TitleLayout/titleLayout";
+import { Outline as DefaultOutline } from "./components/Outline/outline";
+import { buildClassesOutline } from "./components/Outline/utils";
+import { Title as DefaultTitle } from "./components/Title/title";
 import { View } from "./dataDictionary.styles";
 import { useDataDictionary } from "./hooks/UseDataDictionary/hook";
-export const DataDictionary = ({ className, }) => {
+import { useLayoutSpacing } from "./hooks/UseLayoutSpacing/hook";
+export const DataDictionary = ({ className, EntitiesLayout = DefaultEntitiesLayout, Outline = DefaultOutline, OutlineLayout = DefaultOutlineLayout, Title = DefaultTitle, TitleLayout = DefaultTitleLayout, }) => {
     const { classes } = useDataDictionary();
+    const { spacing } = useLayoutSpacing();
+    const outline = useMemo(() => buildClassesOutline(classes), [classes]);
     return (React.createElement(View, { className: className },
-        React.createElement(Entities, { classes: classes })));
+        React.createElement(TitleLayout, { ...spacing },
+            React.createElement(Title, null)),
+        React.createElement(OutlineLayout, { ...spacing },
+            React.createElement(Outline, { outline: outline })),
+        React.createElement(EntitiesLayout, { ...spacing },
+            React.createElement(Entities, { classes: classes, spacing: spacing }))));
 };

package/lib/components/DataDictionary/dataDictionary.styles.d.ts

@@ -1 +1,5 @@
-export declare const View: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const grid: import("@emotion/react").SerializedStyles;
+export declare const View: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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 {};