@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/context/skip-links/skip-links-context.tsx

@@ -1,74 +0,0 @@
-import { createContext, useContext, useEffect } from 'react';
-
-import noop from '@atlaskit/ds-lib/noop';
-
-import { type SkipLinkData } from './types';
-
-export type SkipLinksContextData = {
-	registerSkipLink: (skipLinkData: SkipLinkData) => void;
-	unregisterSkipLink: (id: string | undefined) => void;
-};
-
-/**
- * Provides a way to register and unregister skip links
- */
-export const SkipLinksContext = createContext<SkipLinksContextData>({
-	registerSkipLink: noop,
-	unregisterSkipLink: noop,
-});
-
-const useSkipLinks = () => useContext(SkipLinksContext);
-
-/**
- * Internal-only hook for registering skip links.
- *
- * `useSkipLink` is the public API wrapper of this.
- *
- * This private version exists for us to support `onBeforeNavigate` for the side nav use case,
- * where we might need to expand it before moving focus, without having to support `onBeforeNavigate` publicly.
- */
-export const useSkipLinkInternal = ({
-	id,
-	label,
-	listIndex,
-	onBeforeNavigate,
-	isHidden,
-}: SkipLinkData) => {
-	const { registerSkipLink, unregisterSkipLink } = useSkipLinks();
-	useEffect(() => {
-		if (isHidden) {
-			/**
-			 * Skip links are hidden for slots with 0 height or width.
-			 * They should not be registered.
-			 */
-			return;
-		}
-
-		registerSkipLink({ id, label, listIndex, onBeforeNavigate, isHidden });
-		return () => {
-			unregisterSkipLink(id);
-		};
-	}, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
-};
-
-/**
- * Call `useSkipLink` to register a skip link for important elements on the page.
- */
-export const useSkipLink = (
-	/**
-	 * The unique ID for the skip link.
-	 * You can use the `useSkipLinkId` hook to generate a unique ID.
-	 */
-	id: string,
-	/**
-	 * The label for the skip link.
-	 */
-	label: string,
-	/**
-	 * You can optionally set the position of the skip link in the list of skip links.
-	 * Positions are zero-indexed.
-	 */
-	listIndex?: number,
-) => {
-	useSkipLinkInternal({ id, label, listIndex });
-};

package/src/context/skip-links/skip-links-data-context.tsx

@@ -1,41 +0,0 @@
-import { createContext, useContext, useMemo } from 'react';
-
-import { type SkipLinkData } from './types';
-
-/**
- * Provides a way to store skip links
- */
-export const SkipLinksDataContext = createContext<SkipLinkData[]>([]);
-
-const assignIndex = (num: number, arr: number[]): number => {
-	if (!arr.includes(num)) {
-		return num;
-	}
-	return assignIndex(num + 1, arr);
-};
-
-const sortSkipLinks = (arr: SkipLinkData[]) => {
-	const customLinks = arr.filter((link: SkipLinkData) => Number.isInteger(link.listIndex));
-	if (customLinks.length === 0) {
-		return arr;
-	}
-	const usedIndexes = customLinks.map((a) => a.listIndex) as number[];
-	const regularLinksWithIdx = arr
-		.filter((link) => link.listIndex === undefined)
-		.map((link, idx) => {
-			const listIndex = assignIndex(idx, usedIndexes);
-			usedIndexes.push(listIndex);
-			return {
-				...link,
-				listIndex,
-			};
-		});
-	return [...customLinks, ...regularLinksWithIdx].sort((a, b) => a.listIndex! - b.listIndex!);
-};
-
-export const useSortedSkipLinks = () => {
-	const skipLinksData = useContext(SkipLinksDataContext);
-	return useMemo(() => {
-		return sortSkipLinks(skipLinksData);
-	}, [skipLinksData]);
-};

package/src/context/skip-links/skip-links-provider.tsx

@@ -1,74 +0,0 @@
-import React, { type FC, type ReactNode, useCallback, useMemo, useState } from 'react';
-
-import { SkipLinksContext, type SkipLinksContextData } from './skip-links-context';
-import { SkipLinksDataContext } from './skip-links-data-context';
-import { type SkipLinkData } from './types';
-
-const getByDomOrderSortFunction = () => {
-	const layoutSlots = Array.from(document.querySelectorAll(`[data-layout-slot]`));
-	return (a: SkipLinkData, b: SkipLinkData) => {
-		const indexA = a.listIndex ?? layoutSlots.indexOf(document.getElementById(a.id)!);
-		const indexB = b.listIndex ?? layoutSlots.indexOf(document.getElementById(b.id)!);
-
-		/**
-		 * If they are tied it is because one (or both) is
-		 * a custom skiplink with a set index.
-		 *
-		 * Give the custom skiplink priority.
-		 */
-		if (indexA === indexB) {
-			if (a.listIndex !== undefined) {
-				return -1;
-			} else {
-				return 1;
-			}
-		}
-
-		return indexA - indexB;
-	};
-};
-
-/**
- * Provides a way to store and use skip links by combining SkipLinksContext and SkipLinksDataContext
- */
-export const SkipLinksProvider: FC<{ children: ReactNode }> = ({ children }) => {
-	const [links, setLinks] = useState<SkipLinkData[]>([]);
-	const registerSkipLink = useCallback((skipLinkData: SkipLinkData) => {
-		// Don't add duplicate skip links
-		setLinks((oldLinks) => {
-			if (oldLinks.some(({ id }) => id === skipLinkData.id)) {
-				if (process.env.NODE_ENV !== 'production') {
-					// eslint-disable-next-line no-console
-					console.warn(
-						`\
-Tried registering duplicate skip link for ID '${skipLinkData.id}'.
-
-If you're trying to override a slot skip link label, then use the \`skipLinkLabel\` prop instead.
-
-This error will not be shown in production, and the duplicate skip link will be ignored.`,
-					);
-				}
-				return oldLinks;
-			}
-			return [...oldLinks, skipLinkData].sort(getByDomOrderSortFunction());
-		});
-	}, []);
-
-	const unregisterSkipLink = useCallback((id: string | undefined) => {
-		setLinks((links) => links.filter((link) => link.id !== id));
-	}, []);
-
-	const contextValue = useMemo(() => {
-		const data: SkipLinksContextData = {
-			registerSkipLink,
-			unregisterSkipLink,
-		};
-		return data;
-	}, [registerSkipLink, unregisterSkipLink]);
-
-	return (
-		<SkipLinksContext.Provider value={contextValue}>
-			<SkipLinksDataContext.Provider value={links}>{children}</SkipLinksDataContext.Provider>
-		</SkipLinksContext.Provider>
-	);
-};

package/src/context/skip-links/types.tsx

@@ -1,29 +0,0 @@
-export type SkipLinkData = {
-	/**
-	 * id for the element that will be skipped to
-	 */
-	id: string;
-	/**
-	 * Text for the link that will appear in the skip link menu
-	 */
-	label: string;
-	/**
-	 * Desired position in the skip link menu
-	 */
-	listIndex?: number;
-
-	/**
-	 * Called when a user clicks on the skip link,
-	 * immediately before focus is moved to the associated element.
-	 *
-	 * This can be used to update state, such as to show a hidden element.
-	 */
-	onBeforeNavigate?: () => void;
-
-	/**
-	 * Used to hide skip links for slots with 0 height or width.s
-	 *
-	 * We can remove this once products conditionally render slots correctly.
-	 */
-	isHidden?: boolean;
-};

package/src/context/top-nav-start/top-nav-start-context-provider.tsx

@@ -1,26 +0,0 @@
-import React, { useState } from 'react';
-
-import { TopNavStartAttachRef, TopNavStartElement } from './top-nav-start-context';
-
-/**
- * Provider for the TopNavStart container element contexts.
- *
- * We are using a [ref callback](https://react.dev/reference/react-dom/components/common#ref-callback) along with a state
- * for storing the element once it has mounted, so that the side nav can bind event listeners to the element
- * once it is mounted.
- *
- * Otherwise, the side nav can be mounted before the element (e.g. if the element is lazy loaded), which would prevent the
- * event listeners from being set up.
- *
- * State is required as opposed to just a ref so that the effects in the side nav can react to the element actually being mounted,
- * as ref values cannot be added as effect dependencies.
- */
-export const TopNavStartProvider = ({ children }: { children: React.ReactNode }) => {
-	const [element, setElement] = useState<HTMLDivElement | null>(null);
-
-	return (
-		<TopNavStartElement.Provider value={element}>
-			<TopNavStartAttachRef.Provider value={setElement}>{children}</TopNavStartAttachRef.Provider>
-		</TopNavStartElement.Provider>
-	);
-};

package/src/context/top-nav-start/top-nav-start-context.tsx

@@ -1,21 +0,0 @@
-import { createContext } from 'react';
-
-import __noop from '@atlaskit/ds-lib/noop';
-
-/**
- * Context for the TopNavStart container element
- * Used to power the side nav flyout by allowing the side nav to bind event listeners to the element, so we can
- * keep the flyout open while the user mouses from the top bar to the side nav.
- */
-export const TopNavStartElement = createContext<HTMLDivElement | null>(null);
-
-/**
- * Context for the callback ref used to respond to the TopNavStart element ref being attached. It is used to update the
- * `TopNavStartElement` state so consumers can react to the ref being attached.
- *
- * e.g. Once the TopNavStart element has been mounted, the side nav can bind mouse event listeners to it.
- *
- * A callback ref is needed because the side nav can be mounted before elements in the top bar (e.g. if the element is lazy loaded),
- * which happens in Jira and Confluence), which would prevent the event listeners from being set up.
- */
-export const TopNavStartAttachRef = createContext<(newVal: HTMLDivElement | null) => void>(__noop);

package/src/entry-points/experimental/color-utils/parse-hex.tsx

@@ -1 +0,0 @@
-export { parseHex } from '../../../ui/top-nav-items/themed/color-utils/formats/hex';

package/src/entry-points/experimental/color-utils/parse-hsl.tsx

@@ -1 +0,0 @@
-export { parseHsl } from '../../../ui/top-nav-items/themed/color-utils/formats/hsl';

package/src/entry-points/experimental/color-utils/parse-rgb.tsx

@@ -1 +0,0 @@
-export { parseRgb } from '../../../ui/top-nav-items/themed/color-utils/formats/rgb';

package/src/entry-points/experimental/color-utils/parse-user-color.tsx

@@ -1 +0,0 @@
-export { parseUserColor } from '../../../ui/top-nav-items/themed/color-utils/parse-user-color';

package/src/entry-points/experimental/top-nav-button.tsx

@@ -1,6 +0,0 @@
-export {
-	Button as TopNavButton,
-	LinkButton as TopNavLinkButton,
-	IconButton as TopNavIconButton,
-	LinkIconButton as TopNavLinkIconButton,
-} from '../../ui/top-nav-items/themed/migration';

package/src/entry-points/experimental/use-has-custom-theme.tsx

@@ -1 +0,0 @@
-export { useHasCustomTheme } from '../../ui/top-nav-items/themed/has-custom-theme-context';

package/src/entry-points/experimental/use-legacy-search-theme.tsx

@@ -1 +0,0 @@
-export { useLegacySearchTheme } from '../../ui/top-nav-items/themed/search';

package/src/entry-points/layout/aside.tsx

@@ -1 +0,0 @@
-export { Aside } from '../../ui/page-layout/aside';

package/src/entry-points/layout/banner.tsx

@@ -1 +0,0 @@
-export { Banner } from '../../ui/page-layout/banner';

package/src/entry-points/layout/main.tsx

@@ -1,7 +0,0 @@
-export { Main } from '../../ui/page-layout/main/main';
-export { MainStickyHeader } from '../../ui/page-layout/main/main-sticky-header';
-export {
-	UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY,
-	UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY,
-	UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY,
-} from '../../ui/page-layout/constants';

package/src/entry-points/layout/panel-splitter.tsx

@@ -1,3 +0,0 @@
-export { PanelSplitter } from '../../ui/page-layout/panel-splitter/panel-splitter';
-export { PanelSplitterProvider } from '../../ui/page-layout/panel-splitter/provider';
-export type { ResizeBounds } from '../../ui/page-layout/panel-splitter/types';

package/src/entry-points/layout/panel.tsx

@@ -1 +0,0 @@
-export { Panel } from '../../ui/page-layout/panel';

package/src/entry-points/layout/root.tsx

@@ -1 +0,0 @@
-export { Root } from '../../ui/page-layout/root';

package/src/entry-points/layout/side-nav.tsx

@@ -1,7 +0,0 @@
-export { SideNav } from '../../ui/page-layout/side-nav/side-nav';
-export { SideNavHeader } from '../../ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from '../../ui/page-layout/side-nav/side-nav-content';
-export { SideNavFooter } from '../../ui/page-layout/side-nav/side-nav-footer';
-export { SideNavToggleButton } from '../../ui/page-layout/side-nav/toggle-button';
-export { useToggleSideNav } from '../../ui/page-layout/side-nav/use-toggle-side-nav';
-export { useExpandSideNav } from '../../ui/page-layout/side-nav/use-expand-side-nav';

package/src/entry-points/layout/skip-links.tsx

@@ -1,2 +0,0 @@
-export { useSkipLinkId } from '../../ui/page-layout/id-utils';
-export { useSkipLink } from '../../context/skip-links/skip-links-context';

package/src/entry-points/layout/top-nav.tsx

@@ -1,4 +0,0 @@
-export { TopNav } from '../../ui/page-layout/top-nav/top-nav';
-export { TopNavStart } from '../../ui/page-layout/top-nav/top-nav-start';
-export { TopNavMiddle } from '../../ui/page-layout/top-nav/top-nav-middle';
-export { TopNavEnd } from '../../ui/page-layout/top-nav/top-nav-end';

package/src/entry-points/side-nav-items/button-menu-item.tsx

@@ -1,3 +0,0 @@
-export { ButtonMenuItem, type ButtonMenuItemProps } from '../../ui/menu-item/button-menu-item';
-export { COLLAPSE_ELEM_BEFORE } from '../../ui/menu-item/menu-item-signals';
-export type { MenuItemOnClick } from '../../ui/menu-item/types';

package/src/entry-points/side-nav-items/container-avatar.tsx

@@ -1 +0,0 @@
-export { ContainerAvatar, type ContainerAvatarProps } from '../../ui/menu-item/container-avatar';

package/src/entry-points/side-nav-items/drag-and-drop/drag-preview.tsx

@@ -1 +0,0 @@
-export { DragPreview } from '../../../ui/menu-item/drag-and-drop/drag-preview';

package/src/entry-points/side-nav-items/drag-and-drop/drop-indicator.tsx

@@ -1,5 +0,0 @@
-export {
-	DropIndicator,
-	type Instruction,
-	type Operation,
-} from '../../../ui/menu-item/drag-and-drop/drop-indicator';

package/src/entry-points/side-nav-items/drag-and-drop/group-drop-indicator.tsx

@@ -1 +0,0 @@
-export { GroupDropIndicator } from '../../../ui/menu-item/drag-and-drop/group-drop-indicator';

package/src/entry-points/side-nav-items/drag-and-drop/hitbox.tsx

@@ -1,7 +0,0 @@
-export {
-	attachInstruction,
-	extractInstruction,
-	type Availability,
-	type Operation,
-	type Instruction,
-} from '../../../ui/menu-item/drag-and-drop/hitbox';

package/src/entry-points/side-nav-items/drag-and-drop/use-menu-item-drag-and-drop.tsx

@@ -1,4 +0,0 @@
-export {
-	useMenuItemDragAndDrop,
-	type TMenuItemDragAndDropState,
-} from '../../../ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop';

package/src/entry-points/side-nav-items/expandable-menu-item.tsx

@@ -1,13 +0,0 @@
-export {
-	ExpandableMenuItem,
-	type ExpandableMenuItemProps,
-} from '../../ui/menu-item/expandable-menu-item/expandable-menu-item';
-export {
-	ExpandableMenuItemTrigger,
-	type ExpandableMenuItemTriggerProps,
-} from '../../ui/menu-item/expandable-menu-item/expandable-menu-item-trigger';
-export {
-	ExpandableMenuItemContent,
-	type ExpandableMenuItemContentProps,
-} from '../../ui/menu-item/expandable-menu-item/expandable-menu-item-content';
-export { useIsExpanded } from '../../ui/menu-item/expandable-menu-item/expandable-menu-item-context';

package/src/entry-points/side-nav-items/flyout-menu-item.tsx

@@ -1,13 +0,0 @@
-export {
-	FlyoutMenuItem,
-	type FlyoutMenuItemProps,
-} from '../../ui/menu-item/flyout-menu-item/flyout-menu-item';
-export {
-	FlyoutMenuItemContent,
-	type FlyoutMenuItemContentProps,
-} from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-content';
-export {
-	FlyoutMenuItemTrigger,
-	type FlyoutMenuItemTriggerProps,
-} from '../../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';
-export { COLLAPSE_ELEM_BEFORE } from '../../ui/menu-item/menu-item-signals';

package/src/entry-points/side-nav-items/link-menu-item.tsx

@@ -1,3 +0,0 @@
-export { LinkMenuItem, type LinkMenuItemProps } from '../../ui/menu-item/link-menu-item';
-export { COLLAPSE_ELEM_BEFORE } from '../../ui/menu-item/menu-item-signals';
-export type { MenuItemOnClick } from '../../ui/menu-item/types';

package/src/entry-points/side-nav-items/menu-list-item.tsx

@@ -1 +0,0 @@
-export { MenuListItem } from '../../ui/menu-item/menu-list-item';

package/src/entry-points/side-nav-items/menu-list.tsx

@@ -1 +0,0 @@
-export { MenuList } from '../../ui/menu-item/menu-list';

package/src/entry-points/side-nav-items/menu-section.tsx

@@ -1,3 +0,0 @@
-export { MenuSection } from '../../ui/menu-section/menu-section';
-export { MenuSectionHeading } from '../../ui/menu-section/menu-section-heading';
-export { Divider } from '../../ui/menu-section/divider';

package/src/entry-points/side-nav-items/top-level-spacer.tsx

@@ -1 +0,0 @@
-export { TopLevelSpacer } from '../../ui/menu-item/top-level-spacer';

package/src/entry-points/top-nav-items/create-button.tsx

@@ -1 +0,0 @@
-export { CreateButton } from '../../ui/top-nav-items/create-button';

package/src/entry-points/top-nav-items/custom-title.tsx

@@ -1 +0,0 @@
-export { CustomTitle } from '../../ui/top-nav-items/custom-title';

package/src/entry-points/top-nav-items/help.tsx

@@ -1 +0,0 @@
-export { Help } from '../../ui/top-nav-items/help';

package/src/entry-points/top-nav-items/index.tsx

@@ -1,14 +0,0 @@
-export { AppSwitcher } from '../../ui/top-nav-items/app-switcher';
-export { CustomLogo } from '../../ui/top-nav-items/nav-logo/custom-logo';
-export { AppLogo } from '../../ui/top-nav-items/nav-logo/app-logo';
-export { Search } from '../../ui/top-nav-items/search';
-export { ChatButton } from '../../ui/top-nav-items/chat-button';
-export { EndItem } from '../../ui/top-nav-items/end-item';
-export { Notifications } from '../../ui/top-nav-items/notifications';
-export { CreateButton } from '../../ui/top-nav-items/create-button';
-export { Help } from '../../ui/top-nav-items/help';
-export { Profile } from '../../ui/top-nav-items/profile';
-export { Settings } from '../../ui/top-nav-items/settings';
-export { LogIn } from '../../ui/top-nav-items/log-in';
-export { CustomTitle } from '../../ui/top-nav-items/custom-title';
-export { MenuListItem } from '../../ui/menu-item/menu-list-item';

package/src/entry-points/top-nav-items/log-in.tsx

@@ -1 +0,0 @@
-export { LogIn } from '../../ui/top-nav-items/log-in';

package/src/entry-points/top-nav-items/notifications.tsx

@@ -1 +0,0 @@
-export { Notifications } from '../../ui/top-nav-items/notifications';

package/src/entry-points/top-nav-items/profile.tsx

@@ -1 +0,0 @@
-export { Profile } from '../../ui/top-nav-items/profile';

package/src/entry-points/top-nav-items/settings.tsx

@@ -1 +0,0 @@
-export { Settings } from '../../ui/top-nav-items/settings';

package/src/index.tsx

@@ -1,74 +0,0 @@
-export {
-	ExpandableMenuItem,
-	type ExpandableMenuItemProps,
-} from './ui/menu-item/expandable-menu-item/expandable-menu-item';
-export {
-	ExpandableMenuItemTrigger,
-	type ExpandableMenuItemTriggerProps,
-} from './ui/menu-item/expandable-menu-item/expandable-menu-item-trigger';
-export {
-	ExpandableMenuItemContent,
-	type ExpandableMenuItemContentProps,
-} from './ui/menu-item/expandable-menu-item/expandable-menu-item-content';
-export { useIsExpanded } from './ui/menu-item/expandable-menu-item/expandable-menu-item-context';
-
-export {
-	FlyoutMenuItem,
-	type FlyoutMenuItemProps,
-} from './ui/menu-item/flyout-menu-item/flyout-menu-item';
-export {
-	FlyoutMenuItemContent,
-	type FlyoutMenuItemContentProps,
-} from './ui/menu-item/flyout-menu-item/flyout-menu-item-content';
-export {
-	FlyoutMenuItemTrigger,
-	type FlyoutMenuItemTriggerProps,
-} from './ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';
-
-export { ButtonMenuItem, type ButtonMenuItemProps } from './ui/menu-item/button-menu-item';
-export { LinkMenuItem, type LinkMenuItemProps } from './ui/menu-item/link-menu-item';
-export { COLLAPSE_ELEM_BEFORE } from './ui/menu-item/menu-item-signals';
-export { MenuListItem } from './ui/menu-item/menu-list-item';
-export { ContainerAvatar, type ContainerAvatarProps } from './ui/menu-item/container-avatar';
-export { MenuList } from './ui/menu-item/menu-list';
-export { TopLevelSpacer } from './ui/menu-item/top-level-spacer';
-
-export { MenuSection } from './ui/menu-section/menu-section';
-export { MenuSectionHeading } from './ui/menu-section/menu-section-heading';
-export { Divider } from './ui/menu-section/divider';
-
-export { Aside } from './ui/page-layout/aside';
-export { Banner } from './ui/page-layout/banner';
-export { Main } from './ui/page-layout/main/main';
-export { Panel } from './ui/page-layout/panel';
-export { Root } from './ui/page-layout/root';
-export { SideNav } from './ui/page-layout/side-nav/side-nav';
-export { TopNav } from './ui/page-layout/top-nav/top-nav';
-export { MainStickyHeader } from './ui/page-layout/main/main-sticky-header';
-export {
-	SideNavToggleButton,
-	type SideNavVisibilityChangeAnalyticsAttributes,
-} from './ui/page-layout/side-nav/toggle-button';
-export { useToggleSideNav } from './ui/page-layout/side-nav/use-toggle-side-nav';
-export { SideNavHeader } from './ui/page-layout/side-nav/side-nav-header';
-export { SideNavContent } from './ui/page-layout/side-nav/side-nav-content';
-export { SideNavFooter } from './ui/page-layout/side-nav/side-nav-footer';
-export { PanelSplitter } from './ui/page-layout/panel-splitter/panel-splitter';
-export { PanelSplitterProvider } from './ui/page-layout/panel-splitter/provider';
-export type { ResizeBounds } from './ui/page-layout/panel-splitter/types';
-
-export { TopNavStart } from './ui/page-layout/top-nav/top-nav-start';
-export { AppSwitcher } from './ui/top-nav-items/app-switcher';
-export { CustomLogo } from './ui/top-nav-items/nav-logo/custom-logo';
-export { AppLogo } from './ui/top-nav-items/nav-logo/app-logo';
-export { TopNavMiddle } from './ui/page-layout/top-nav/top-nav-middle';
-export { Search } from './ui/top-nav-items/search';
-export { ChatButton } from './ui/top-nav-items/chat-button';
-export { TopNavEnd } from './ui/page-layout/top-nav/top-nav-end';
-export { EndItem } from './ui/top-nav-items/end-item';
-export { CreateButton } from './ui/top-nav-items/create-button';
-export { Help } from './ui/top-nav-items/help';
-export { Notifications } from './ui/top-nav-items/notifications';
-export { Profile } from './ui/top-nav-items/profile';
-export { Settings } from './ui/top-nav-items/settings';
-export { LogIn } from './ui/top-nav-items/log-in';