@atlaskit/navigation-system 0.166.0

package/dist/esm/ui/top-nav-items/themed/get-custom-theme-styles.js

@@ -0,0 +1,106 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { themedLogoIcon, themedLogoText } from '../nav-logo';
+import { themedButtonBackground, themedButtonBackgroundHovered, themedButtonBackgroundPressed, themedButtonBorder, themedButtonDisabledBackground, themedButtonDisabledText, themedButtonPrimaryBackground, themedButtonPrimaryBackgroundHovered, themedButtonPrimaryBackgroundPressed, themedButtonPrimaryText, themedButtonSelectedBackground, themedButtonSelectedBackgroundHovered, themedButtonSelectedBackgroundPressed, themedButtonSelectedBorder, themedButtonSelectedText } from './button';
+import { getColorMode, getTextColor, isLight, simpleAlphaComposite } from './color-utils';
+import { parseHex } from './color-utils/formats/hex';
+import { palette, paletteRgba } from './palette';
+import { themedSearchBorder, themedSearchBorderFocused } from './search';
+
+/**
+ * Expects colors to be passed as `RGB` objects.
+ *
+ * Allows `string` for hex strings only, for backwards compatibility.
+ * This will likely be removed in the future.
+ *
+ * Allows `null` for ergonomic reasons, because our color parsing utilities can return
+ * `null` if they cannot parse a color string.
+ */
+
+function toRGBString(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b;
+  return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
+}
+function toRGBAString(_ref2) {
+  var r = _ref2.r,
+    g = _ref2.g,
+    b = _ref2.b,
+    a = _ref2.a;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")");
+}
+// Using raw hex codes because custom colors break out of the tokens model
+// We will need to invert the colors based on backgroundColor independently of the app's color mode (dark/light)
+// Values here are not final
+var buttonStyles = {
+  light: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, themedButtonBackground, 'transparent'), themedButtonBackgroundHovered, palette.Neutral200A), themedButtonBackgroundPressed, palette.Neutral300A), themedButtonBorder, palette.Neutral300A), themedButtonSelectedBackground, palette.Neutral300A), themedButtonSelectedBackgroundHovered, palette.Neutral400A), themedButtonSelectedBackgroundPressed, palette.Neutral500A), themedButtonDisabledText, palette.Neutral400A), themedButtonDisabledBackground, palette.Neutral100A),
+  dark: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, themedButtonBackground, 'transparent'), themedButtonBackgroundHovered, palette.DarkNeutral200A), themedButtonBackgroundPressed, palette.DarkNeutral300A), themedButtonBorder, palette.DarkNeutral300A), themedButtonSelectedBackground, palette.DarkNeutral300A), themedButtonSelectedBackgroundHovered, palette.DarkNeutral400A), themedButtonSelectedBackgroundPressed, palette.DarkNeutral500A), themedButtonDisabledText, palette.DarkNeutral400A), themedButtonDisabledBackground, palette.DarkNeutral100A)
+};
+var logoStyles = {
+  light: _defineProperty(_defineProperty({}, themedLogoIcon, palette.DarkNeutral0), themedLogoText, palette.DarkNeutral0),
+  dark: _defineProperty(_defineProperty({}, themedLogoIcon, palette.Neutral0), themedLogoText, palette.Neutral0)
+};
+
+/**
+ * Provides a `style` prop value for the `TopNav` that defines required CSS variables.
+ *
+ * If a provided `backgroundColor` or `highlightColor` cannot be parsed,
+ * then `null` will be returned.
+ */
+export function getCustomThemeStyles(_ref3) {
+  var backgroundColor = _ref3.backgroundColor,
+    highlightColor = _ref3.highlightColor;
+  var backgroundRgb = typeof backgroundColor === 'string' ? parseHex(backgroundColor) : backgroundColor;
+  var highlightRgb = typeof highlightColor === 'string' ? parseHex(highlightColor) : highlightColor;
+  if (!backgroundRgb || !highlightRgb) {
+    return null;
+  }
+  var textColor = getTextColor(backgroundRgb);
+  var colorMode = getColorMode(backgroundRgb);
+  var highlightTextColor = getTextColor(highlightRgb);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    backgroundColor: toRGBString(backgroundRgb),
+    color: textColor.hex
+  }, buttonStyles[colorMode]), logoStyles[colorMode]), getSelectedStyles({
+    backgroundColor: backgroundRgb,
+    colorMode: colorMode
+  })), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, themedSearchBorder, toRGBAString(_objectSpread(_objectSpread({}, textColor.rgb), {}, {
+    a: 0.5
+  }))), themedSearchBorderFocused, toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
+    a: 0.8
+  }))), themedButtonPrimaryBackground, toRGBString(highlightRgb)), themedButtonPrimaryBackgroundHovered, toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
+    a: 0.8
+  }))), themedButtonPrimaryBackgroundPressed, toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
+    a: 0.65
+  }))), themedButtonPrimaryText, highlightTextColor.hex));
+}
+
+/**
+ * Precomputed RGBA values for the selected backgrounds
+ */
+var selectedBackgroundRGBA = {
+  light: paletteRgba.Neutral300A,
+  dark: paletteRgba.DarkNeutral300A
+};
+function getSelectedStyles(_ref4) {
+  var backgroundColor = _ref4.backgroundColor,
+    colorMode = _ref4.colorMode;
+  /**
+   * The background color of the selected button in its default state.
+   *
+   * We are referring to this as a foreground color because it is semi-transparent,
+   * so is not the actual color displayed when the button is on top of a background color.
+   */
+  var foregroundColor = selectedBackgroundRGBA[colorMode];
+
+  /**
+   * The blended color seen when the selected background is over the top bar.
+   */
+  var blendedBackground = simpleAlphaComposite({
+    background: backgroundColor,
+    foreground: foregroundColor
+  });
+  return _defineProperty(_defineProperty({}, themedButtonSelectedText, getTextColor(blendedBackground).hex), themedButtonSelectedBorder, isLight(blendedBackground) ? palette.Neutral1100 : palette.DarkNeutral1100);
+}

package/dist/esm/ui/top-nav-items/themed/has-custom-theme-context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Context to let components know if a custom theme is being applied.
+ */
+export var HasCustomThemeContext = /*#__PURE__*/createContext(false);
+
+/**
+ * Returns whether a custom theme is being applied.
+ */
+export function useHasCustomTheme() {
+  return useContext(HasCustomThemeContext);
+}

package/dist/esm/ui/top-nav-items/themed/migration.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import AkButton, { IconButton as AkIconButton, LinkButton as AkLinkButton, LinkIconButton as AkLinkIconButton } from '@atlaskit/button/new';
+import { ThemedButton, ThemedIconButton, ThemedLinkButton, ThemedLinkIconButton } from './button';
+import { useHasCustomTheme } from './has-custom-theme-context';
+// Explicitly typed to use only the themed button API,
+// which is a subset of the normal button API
+var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var hasCustomTheme = useHasCustomTheme();
+  var Component = hasCustomTheme ? ThemedIconButton : AkIconButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});
+
+// Explicitly typed to use only the themed button API,
+// which is a subset of the normal button API
+var LinkIconButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var hasCustomTheme = useHasCustomTheme();
+  var Component = hasCustomTheme ? ThemedLinkIconButton : AkLinkIconButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});
+
+// Explicitly typed to use only the themed button API,
+// which is a subset of the normal button API
+var Button = /*#__PURE__*/forwardRef(function (props, ref) {
+  var hasCustomTheme = useHasCustomTheme();
+  var Component = hasCustomTheme ? ThemedButton : AkButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});
+
+// Explicitly typed to use only the themed button API,
+// which is a subset of the normal button API
+var LinkButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var hasCustomTheme = useHasCustomTheme();
+  var Component = hasCustomTheme ? ThemedLinkButton : AkLinkButton;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props));
+});
+export { IconButton, Button, LinkIconButton, LinkButton };

package/dist/esm/ui/top-nav-items/themed/palette.js

@@ -0,0 +1,62 @@
+/**
+ * Copied from the brand refresh palette.
+ *
+ * Ideally we'd codegen this but the brand refresh palette isn't exposed
+ * through public API and we shouldn't use the private API of another package.
+ */
+export var palette = {
+  'DarkNeutral-100': '#111213',
+  'DarkNeutral-100A': '#01040475',
+  DarkNeutral0: '#18191A',
+  DarkNeutral100: '#1F1F21',
+  DarkNeutral100A: '#BDBDBD0A',
+  DarkNeutral200: '#242528',
+  DarkNeutral200A: '#CECED912',
+  DarkNeutral250: '#2B2C2F',
+  DarkNeutral250A: '#D9DAE71A',
+  DarkNeutral300: '#303134',
+  DarkNeutral300A: '#E3E4F21F',
+  DarkNeutral350: '#3D3F43',
+  DarkNeutral350A: '#E8EDFD2E',
+  DarkNeutral400: '#4B4D51',
+  DarkNeutral400A: '#E5E9F640',
+  DarkNeutral500: '#63666B',
+  DarkNeutral500A: '#E9F0FB5C',
+  DarkNeutral600: '#7E8188',
+  DarkNeutral700: '#96999E',
+  DarkNeutral800: '#A9ABAF',
+  DarkNeutral900: '#BFC1C4',
+  DarkNeutral1000: '#CECFD2',
+  DarkNeutral1100: '#E2E3E4',
+  Neutral0: '#FFFFFF',
+  Neutral100: '#F8F8F8',
+  Neutral100A: '#17171708',
+  Neutral200: '#F0F1F2',
+  Neutral200A: '#0515240F',
+  Neutral300: '#DDDEE1',
+  Neutral300A: '#0B120E24',
+  Neutral400: '#B7B9BE',
+  Neutral400A: '#080F214A',
+  Neutral500: '#8C8F97',
+  Neutral500A: '#050C1F75',
+  Neutral600: '#7D818A',
+  Neutral700: '#6B6E76',
+  Neutral800: '#505258',
+  Neutral900: '#3B3D42',
+  Neutral1000: '#292A2E',
+  Neutral1100: '#1E1F21'
+};
+export var paletteRgba = {
+  DarkNeutral300A: {
+    r: 0xe3,
+    g: 0xe4,
+    b: 0xf2,
+    a: 0x1f / 255
+  },
+  Neutral300A: {
+    r: 0x0b,
+    g: 0x12,
+    b: 0x0e,
+    a: 0x24 / 255
+  }
+};

package/dist/esm/ui/top-nav-items/themed/search.js

@@ -0,0 +1,64 @@
+import { themedButtonBackgroundHovered } from './button';
+import { useHasCustomTheme } from './has-custom-theme-context';
+export var themedSearchBorder = '--ds-top-bar-search-border';
+export var themedSearchBorderFocused = '--ds-top-bar-search-border-focused';
+
+/**
+ * Theme object intended for use with Search Platform components while transitioning to nav4.
+ *
+ * This is for backwards compatibility with the legacy theming API that was designed for nav3.
+ *
+ * As nav4 matures we will ideally evolve the theming solution inside Search Platform,
+ * at which point this legacy theme object will not be needed.
+ */
+var legacySearchTheme = {
+  default: {
+    backgroundColor: 'transparent',
+    color: 'currentColor',
+    borderColor: "var(".concat(themedSearchBorder, ")")
+  },
+  focus: {
+    /**
+     * When expanded the input ignores the custom theme,
+     * except for its border which is derived from the highlight color.
+     */
+    color: "var(--ds-text, #172B4D)",
+    backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)",
+    borderColor: "var(".concat(themedSearchBorderFocused, ")"),
+    boxShadow: "inset 0px 0px 0px 1px var(".concat(themedSearchBorderFocused, ")")
+  },
+  hover: {
+    /**
+     * This is not actually used for the search bar input (at least by the Search Platform components).
+     *
+     * Instead it's used as the hover background color for a close button when on mobile.
+     */
+    backgroundColor: "var(".concat(themedButtonBackgroundHovered, ")")
+  }
+};
+
+/**
+ * We are just using the inferred type instead of declaring it as `SearchCSS` (the type `@atlassian/search-dialog` expects)
+ *
+ * Importing the type from `@atlassian/search-dialog` means we have to declare it as a full dependency,
+ * rather than a dev dependency. Even though it's type-only, this is how local consumption is setup.
+ *
+ * This was failing typechecking in Post Office, presumably due to different versions of `@emotion/styled`.
+ * It is also a code smell having an unnecessary dependency.
+ *
+ * We still have indirect type safety from our example + product integrations, so a PR that breaks the types won't be able to merge.
+ */
+
+/**
+ * Provides the `theme` value for Search Platform components.
+ *
+ * This may be a `SearchCSS` object or undefined,
+ * depending on if the top bar is using custom theming.
+ */
+export function useLegacySearchTheme() {
+  var hasCustomTheme = useHasCustomTheme();
+  if (hasCustomTheme) {
+    return legacySearchTheme;
+  }
+  return undefined;
+}

package/dist/esm/ui/top-nav-items/themed/use-custom-theme.js

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { getCustomThemeStyles } from './get-custom-theme-styles';
+/**
+ * Processes the provided theme and returns theme styles if possible.
+ */
+export function useCustomTheme(theme) {
+  var value = useMemo(function () {
+    if (!(theme !== null && theme !== void 0 && theme.backgroundColor) || !(theme !== null && theme !== void 0 && theme.highlightColor)) {
+      return {
+        isEnabled: false
+      };
+    }
+
+    /**
+     * Re-creating the `theme` object from it's pieces.
+     *
+     * _Technically_ we could just use `theme`, but that would involve an eslint opt out
+     * as we would be leveraging a value (`theme`) not in the dependency array.
+     *
+     * The current approach is the most correct™️ and avoids foot guns.
+     * We are only using values in the effect that are defined in the dependency array 🙌
+     */
+    var value = {
+      backgroundColor: theme.backgroundColor,
+      highlightColor: theme.highlightColor
+    };
+    var style = getCustomThemeStyles(value);
+    if (!style) {
+      // Either the `backgroundColor` or `highlightColor` could not be parsed
+      return {
+        isEnabled: false
+      };
+    }
+    return {
+      isEnabled: true,
+      style: style
+    };
+  },
+  // Using individual properties as keys for improved memoization.
+  // Now this effect will only run if the values change rather than
+  // the reference to the object (which might be new on every call)
+  [theme === null || theme === void 0 ? void 0 : theme.backgroundColor, theme === null || theme === void 0 ? void 0 : theme.highlightColor]);
+  return value;
+}

package/dist/types/components/badge-container.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { ComponentType, ReactNode } from 'react';
+type BadgeContainerProps = {
+    id: string;
+    badge: ComponentType;
+    /**
+     * The children to render inside the container that the badge overlays.
+     */
+    children: ReactNode;
+    /**
+     * Can be used to disable the default `listitem` role.
+     *
+     * As `BadgeContainer` is used internally to wrap `EndItem`, this prop is used to respect
+     * the `isListItem` prop value set in `EndItem`.
+     *
+     * See the prop description in `EndItem` for more information.
+     *
+     * @default true
+     */
+    isListItem?: boolean;
+};
+/**
+ * __Badge container__
+ *
+ * Adds a badge to the top right corner of the child element.
+ * Example of usage is showing the number of notifications in the top navigation bar.
+ */
+export declare const BadgeContainer: ({ children, id: badgeId, badge: Badge, isListItem, }: BadgeContainerProps) => JSX.Element;
+export {};

package/dist/types/components/forward-ref-with-generic.d.ts

@@ -0,0 +1,4 @@
+/**
+ * An alias for `forwardRef` with enhanced typing to preserve generic prop types.
+ */
+export declare const forwardRefWithGeneric: <ElementType, Props = {}>(render: (props: Props, ref: React.Ref<ElementType>) => React.ReactElement | null) => (props: Props & React.RefAttributes<ElementType>) => React.ReactElement | null;

package/dist/types/components/list-item.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import type { StrictXCSSProp } from '@atlaskit/css';
+type ListItemProps = {
+    /**
+     * The contents of the list item.
+     */
+    children: ReactNode;
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Bounded style overrides.
+     */
+    xcss?: StrictXCSSProp<'display' | 'scrollMarginInline', never>;
+};
+/**
+ * __List item__
+ *
+ * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
+ */
+export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/list.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type XCSSProp } from '@compiled/react';
+export type ListProps = {
+    /**
+     * The contents of the list. Should contain list items.
+     */
+    children: ReactNode;
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Bounded style overrides.
+     */
+    xcss?: XCSSProp<'alignItems' | 'display' | 'gap' | 'paddingInlineStart' | 'padding', never>;
+};
+/**
+ * __List__
+ *
+ * A an element with the role of `list` for semantically grouping list items.
+ *
+ * This is the internal primitive used by other external components in the navigation system.
+ */
+export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/skip-links/skip-link.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import type { SkipLinkData } from '../../context/skip-links/types';
+/**
+ * A link that moves current tab position to a different element
+ *
+ * This component is rendered internally and is not exported publicly.
+ */
+export declare const SkipLink: ({ id, children, onBeforeNavigate, }: {
+    id: string;
+    children: ReactNode;
+    onBeforeNavigate?: SkipLinkData['onBeforeNavigate'];
+}) => JSX.Element;

package/dist/types/components/skip-links/skip-links-container.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+/**
+ * A container element for the skip links
+ * The default label will be used when the `skipLinksLabel` attribute is not
+ * provided or the attribute is an empty string. If a string comprised only of
+ * spaces is provided, the skip link heading element will be removed, but the
+ * default label will still be used in `title` attribute of the skip links
+ * themselves.
+ */
+export declare const SkipLinksContainer: ({ label, testId }: {
+    label: string;
+    testId?: string | undefined;
+}) => JSX.Element | null;

package/dist/types/context/skip-links/skip-links-context.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+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 declare const SkipLinksContext: import("react").Context<SkipLinksContextData>;
+/**
+ * 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 declare const useSkipLinkInternal: ({ id, label, listIndex, onBeforeNavigate, isHidden, }: SkipLinkData) => void;
+/**
+ * Call `useSkipLink` to register a skip link for important elements on the page.
+ */
+export declare const useSkipLink: (id: string, label: string, listIndex?: number) => void;

package/dist/types/context/skip-links/skip-links-data-context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type SkipLinkData } from './types';
+/**
+ * Provides a way to store skip links
+ */
+export declare const SkipLinksDataContext: import("react").Context<SkipLinkData[]>;
+export declare const useSortedSkipLinks: () => SkipLinkData[];

package/dist/types/context/skip-links/skip-links-provider.d.ts

@@ -0,0 +1,7 @@
+import { type FC, type ReactNode } from 'react';
+/**
+ * Provides a way to store and use skip links by combining SkipLinksContext and SkipLinksDataContext
+ */
+export declare const SkipLinksProvider: FC<{
+    children: ReactNode;
+}>;

package/dist/types/context/skip-links/types.d.ts

@@ -0,0 +1,27 @@
+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/dist/types/context/top-nav-start/top-nav-start-context-provider.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * 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 declare const TopNavStartProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/types/context/top-nav-start/top-nav-start-context.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/**
+ * 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 declare const TopNavStartElement: import("react").Context<HTMLDivElement | 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 declare const TopNavStartAttachRef: import("react").Context<(newVal: HTMLDivElement | null) => void>;

package/dist/types/entry-points/experimental/color-utils/parse-hex.d.ts

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

package/dist/types/entry-points/experimental/color-utils/parse-hsl.d.ts

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

package/dist/types/entry-points/experimental/color-utils/parse-rgb.d.ts

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

package/dist/types/entry-points/experimental/color-utils/parse-user-color.d.ts

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

package/dist/types/entry-points/experimental/top-nav-button.d.ts

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

package/dist/types/entry-points/experimental/use-has-custom-theme.d.ts

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

package/dist/types/entry-points/experimental/use-legacy-search-theme.d.ts

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

package/dist/types/entry-points/layout/aside.d.ts

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

package/dist/types/entry-points/layout/banner.d.ts

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

package/dist/types/entry-points/layout/main.d.ts

@@ -0,0 +1,3 @@
+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/dist/types/entry-points/layout/panel-splitter.d.ts

@@ -0,0 +1,3 @@
+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/dist/types/entry-points/layout/panel.d.ts

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

package/dist/types/entry-points/layout/root.d.ts

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

package/dist/types/entry-points/layout/side-nav.d.ts

@@ -0,0 +1,7 @@
+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/dist/types/entry-points/layout/skip-links.d.ts

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

package/dist/types/entry-points/layout/top-nav.d.ts

@@ -0,0 +1,4 @@
+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/dist/types/entry-points/side-nav-items/button-menu-item.d.ts

@@ -0,0 +1,3 @@
+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';