@atlaskit/navigation-system 7.2.1 → 8.0.0

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

@@ -0,0 +1,55 @@
+/* themed-pressable.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["appearance", "shape", "isSelected", "isDisabled"];
+import "./themed-pressable.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef } from 'react';
+import { cx } from '@compiled/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Pressable } from '@atlaskit/primitives/compiled';
+import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
+var styles = {
+  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
+  rootT26Shape: "_2rko1qi0",
+  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
+  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
+  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
+};
+var shapeStyles = {
+  default: "_18zrutpp",
+  square: "_18zrze3t _1bsb5r7u _vwz4idpf"
+};
+var appearanceStyles = {
+  default: "_11q7pkxg _syaz1r31 _8l3maykr _f8pj1r31 _10531r31 _19lc1rps _30l31r31 _j6xtqtgh _9h8h1r31",
+  subtle: "_11q7pkxg _syaz1r31 _f8pj1r31 _10531r31 _19lc1rps _30l31r31 _j6xtqtgh _9h8h1r31",
+  primary: "_11q7esko _syaz15o7 _f8pj15o7 _105315o7 _19lcp6hf _30l315o7 _j6xt5sko _9h8h15o7"
+};
+
+/**
+ * Props shared by `ThemedPressable` and `ThemedAnchor`
+ */
+
+export var ThemedPressable = /*#__PURE__*/forwardRef(function ThemedPressable(_ref, ref) {
+  var _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'default' : _ref$shape,
+    isSelected = _ref.isSelected,
+    isDisabled = _ref.isDisabled,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var hasBorder = appearance === 'default' || isSelected;
+  return /*#__PURE__*/React.createElement(Pressable, _extends({}, getPrimitiveSpreadProps(props), {
+    ref: ref,
+    type: "button"
+    /**
+     * We are using some style values that are outside of the strict
+     * `@atlaskit/css` types.
+     */
+    // @ts-expect-error
+    // eslint-disable-next-line @compiled/no-suppress-xcss
+    ,
+    xcss: cx(styles.root, fg('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled),
+    isDisabled: isDisabled
+  }));
+});

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

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

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

@@ -0,0 +1,46 @@
+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 { useMemo } from 'react';
+import { useColorMode } from '@atlaskit/app-provider';
+import { getTokenValue } from '@atlaskit/tokens';
+import { parseHex } from './color-utils/formats/hex';
+import { useCustomTheme } from './use-custom-theme';
+function toRGBString(_ref) {
+  var r = _ref.r,
+    g = _ref.g,
+    b = _ref.b;
+  return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
+}
+/**
+ * React hook that computes the custom theme style for the top navigation bar.
+ *
+ * Determines whether a custom theme is enabled, computes the resulting style,
+ * and checks if the background color matches the default for the current color mode.
+ *
+ * @param theme Optional custom theme configuration object.
+ * @returns An object indicating if the custom theme is enabled, the computed style,
+ *          and a flag specifying if the default background color is used.
+ */
+export function useCustomThemeNew(theme) {
+  var value = useCustomTheme(theme);
+
+  /**
+   * We use the color mode to determine the default background color for the top nav.
+   * We need to use the hook because the user could change their color mode preference.
+   */
+  var colorMode = useColorMode();
+  var hasDefaultBackground = useMemo(function () {
+    if (!value.isEnabled) {
+      return true;
+    }
+    var defaultBackground = parseHex(getTokenValue('elevation.surface', colorMode === 'light' ? '#FFFFFF' : '#1F1F21'));
+    return defaultBackground ? value.style.backgroundColor === toRGBString(defaultBackground) : true;
+  }, [value, colorMode]);
+  if (value.isEnabled) {
+    return _objectSpread(_objectSpread({}, value), {}, {
+      hasDefaultBackground: hasDefaultBackground
+    });
+  }
+  return value;
+}

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

@@ -1,44 +1,5 @@
-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 { useMemo } from 'react';
-import { useColorMode } from '@atlaskit/app-provider';
-import { getTokenValue } from '@atlaskit/tokens';
-import { parseHex } from './color-utils/formats/hex';
 import { getCustomThemeStyles } from './get-custom-theme-styles';
-function toRGBString(_ref) {
-  var r = _ref.r,
-    g = _ref.g,
-    b = _ref.b;
-  return "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")");
-}
-
-// TODO: Fill in the hook {description}.
-/**
- * {description}.
- */
-export function useCustomThemeNew(theme) {
-  var value = useCustomTheme(theme);
-
-  /**
-   * We use the color mode to determine the default background color for the top nav.
-   * We need to use the hook because the user could change their color mode preference.
-   */
-  var colorMode = useColorMode();
-  var hasDefaultBackground = useMemo(function () {
-    if (!value.isEnabled) {
-      return true;
-    }
-    var defaultBackground = parseHex(getTokenValue('elevation.surface', colorMode === 'light' ? '#FFFFFF' : '#1F1F21'));
-    return defaultBackground ? value.style.backgroundColor === toRGBString(defaultBackground) : true;
-  }, [value, colorMode]);
-  if (value.isEnabled) {
-    return _objectSpread(_objectSpread({}, value), {}, {
-      hasDefaultBackground: hasDefaultBackground
-    });
-  }
-  return value;
-}
 /**
  * Processes the provided theme and returns theme styles if possible.
  */

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

@@ -7,30 +7,3 @@ export type SkipLinksContextData = {
  * 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: (
-/**
- * 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) => void;

package/dist/types/context/skip-links/use-skip-link-internal.d.ts

@@ -0,0 +1,10 @@
+import { type SkipLinkData } from './types';
+/**
+ * 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;

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

@@ -0,0 +1,18 @@
+/**
+ * Call `useSkipLink` to register a skip link for important elements on the page.
+ */
+export declare 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) => void;

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

@@ -0,0 +1 @@
+export declare const TopNavStartAttachRef: import('react').Context<(newVal: HTMLDivElement | null) => void>;

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

@@ -0,0 +1 @@
+export declare const TopNavStartElement: import('react').Context<HTMLDivElement | null>;

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

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

package/dist/types/entry-points/layout/skip-links.d.ts

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

package/dist/types/ui/page-layout/dangerously-hoist-css-var-to-document-root.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type MediaQuery } from '@atlaskit/primitives/responsive';
+export declare const DangerouslyHoistCssVarToDocumentRoot: ({ variableName, value, mediaQuery, responsiveValue, }: {
+    variableName: string;
+    value: string | number;
+    mediaQuery?: MediaQuery;
+    responsiveValue?: string | number;
+}) => React.JSX.Element;

package/dist/{types-ts4.5/ui/page-layout/hoist-utils.d.ts → types/ui/page-layout/hoist-css-var-to-local-grid.d.ts}

@@ -1,5 +1,4 @@
 import React from 'react';
-import { type MediaQuery } from '@atlaskit/primitives/responsive';
 /**
  * This is not ideal and shouldn't be used by anything outside of `<Banner>` and `<TopNav>`.
  *
@@ -12,13 +11,3 @@ export declare const HoistCssVarToLocalGrid: ({ variableName, value, }: {
     variableName: string;
     value: number;
 }) => React.JSX.Element;
-/**
- * Hoists CSS variables to the document root. This is support the legacy edge case of monolith pages being injected as a
- * sibling to the page layout, as opposed to within the `Main` slot.
- */
-export declare const DangerouslyHoistCssVarToDocumentRoot: ({ variableName, value, mediaQuery, responsiveValue, }: {
-    variableName: string;
-    value: string | number;
-    mediaQuery?: MediaQuery;
-    responsiveValue?: string | number;
-}) => React.JSX.Element;

package/dist/types/ui/page-layout/panel-splitter/get-pixel-width.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns the computed width of an element in pixels.
+ */
+export declare const getPixelWidth: (element: HTMLElement) => number;

package/dist/types/ui/page-layout/panel-splitter/get-width-from-drag-location.d.ts

@@ -0,0 +1,8 @@
+import type { DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare const getWidthFromDragLocation: ({ initialWidth, location, initialClientX, direction, position, }: {
+    initialWidth: number;
+    location: DragLocationHistory;
+    initialClientX: number;
+    direction: "ltr" | "rtl";
+    position: "start" | "end";
+}) => number;

package/dist/types/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.d.ts

@@ -0,0 +1,9 @@
+import type { ResizeBounds } from './types';
+export type PanelSplitterDragData = {
+    panelId: string | symbol | undefined;
+    initialWidth: number;
+    resizingWidth: string;
+    resizeBounds: ResizeBounds;
+    direction: 'ltr' | 'rtl';
+};
+export declare function isPanelSplitterDragData(data: Record<string | symbol, unknown>): data is PanelSplitterDragData;

package/dist/types/ui/page-layout/panel-splitter/on-double-click-context.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Context for the panel splitter's double click handler. Only internally exported.
+ *
+ * NOTE: This context is a temporary workaround to enable the `SideNavPanelSplitter` component
+ * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
+ * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context should be removed.
+ */
+export declare const OnDoubleClickContext: import('react').Context<(() => void) | undefined>;

package/dist/{types-ts4.5/ui/page-layout/panel-splitter/context.d.ts → types/ui/page-layout/panel-splitter/panel-splitter-context.d.ts}

@@ -62,11 +62,3 @@ export type PanelSplitterContextType = {
  * Context for the panel splitter. Only internally exported.
  */
 export declare const PanelSplitterContext: import('react').Context<PanelSplitterContextType | null>;
-/**
- * Context for the panel splitter's double click handler. Only internally exported.
- *
- * NOTE: This context is a temporary workaround to enable the `SideNavPanelSplitter` component
- * to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
- * Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context should be removed.
- */
-export declare const OnDoubleClickContext: import('react').Context<(() => void) | undefined>;

package/dist/types/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.d.ts

@@ -0,0 +1 @@
+export declare const panelSplitterDragDataSymbol: unique symbol;

package/dist/types/ui/page-layout/panel-splitter/panel-splitter.d.ts

@@ -4,7 +4,7 @@
  */
 import { type ReactNode } from 'react';
 import { type TooltipProps } from '@atlaskit/tooltip';
-import type { ResizeBounds, ResizeEndCallback, ResizeStartCallback } from './types';
+import type { ResizeEndCallback, ResizeStartCallback } from './types';
 export type PanelSplitterProps = {
     /**
      * The accessible label for the panel splitter. It is visually hidden, but is required for accessibility.
@@ -33,14 +33,6 @@ export type PanelSplitterProps = {
      */
     tooltipContent?: TooltipProps['content'];
 };
-type PanelSplitterDragData = {
-    panelId: string | symbol | undefined;
-    initialWidth: number;
-    resizingWidth: string;
-    resizeBounds: ResizeBounds;
-    direction: 'ltr' | 'rtl';
-};
-export declare function isPanelSplitterDragData(data: Record<string | symbol, unknown>): data is PanelSplitterDragData;
 /**
  * _PanelSplitter_
  *
@@ -58,4 +50,3 @@ export declare function isPanelSplitterDragData(data: Record<string | symbol, un
  * ```
  */
 export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, tooltipContent, }: PanelSplitterProps) => ReactNode;
-export {};

package/dist/types/ui/page-layout/panel-splitter/provider.d.ts

@@ -1,5 +1,5 @@
 import React, { type MutableRefObject } from 'react';
-import { type PanelSplitterContextType } from './context';
+import { type PanelSplitterContextType } from './panel-splitter-context';
 export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalRef' | 'position'> & {
     children: React.ReactNode;
     /**

package/dist/types/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.d.ts

@@ -1,13 +1,8 @@
-import React from 'react';
+import { type Context } from 'react';
 /**
- * Provider for the `IsSideNavShortcutEnabledContext`.
+ * Context for whether the side nav toggle shortcut is enabled.
+ *
+ * Used to share the `isSideNavShortcutEnabled` prop value from `Root` with other components,
+ * so the visual keyboard shortcut in tooltips can be conditionally displayed.
  */
-export declare function IsSideNavShortcutEnabledProvider({ children, isSideNavShortcutEnabled, }: {
-    children: React.ReactNode;
-    isSideNavShortcutEnabled: boolean;
-}): React.JSX.Element;
-/**
- * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
- * is shared through context.
- */
-export declare function useIsSideNavShortcutEnabled(): boolean;
+export declare const IsSideNavShortcutEnabledContext: Context<boolean>;

package/dist/types/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function IsSideNavShortcutEnabledProvider({ children, isSideNavShortcutEnabled, }: {
+    children: React.ReactNode;
+    isSideNavShortcutEnabled: boolean;
+}): React.JSX.Element;

package/dist/types/ui/page-layout/side-nav/set-side-nav-visibility-state.d.ts

@@ -0,0 +1,3 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import type { SideNavState } from './types';
+export declare const SetSideNavVisibilityState: import('react').Context<Dispatch<SetStateAction<SideNavState | null>>>;

package/dist/types/ui/page-layout/side-nav/side-nav-element-provider.d.ts

@@ -0,0 +1,4 @@
+import React, { type ReactNode } from 'react';
+export declare function SideNavElementProvider({ children }: {
+    children: ReactNode;
+}): React.JSX.Element;

package/dist/types/ui/page-layout/side-nav/side-nav-ref-context.d.ts

@@ -0,0 +1,2 @@
+import { type Context } from 'react';
+export declare const SideNavRefContext: Context<React.RefObject<HTMLDivElement>>;

package/dist/types/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.d.ts

@@ -0,0 +1 @@
+export declare const SideNavToggleButtonAttachRef: import('react').Context<(newVal: HTMLButtonElement | null) => void>;

package/dist/types/ui/page-layout/side-nav/side-nav-toggle-button-element.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Context for the side nav toggle button element.
+ * Used to power the side nav flyout by allowing the side nav to bind event listeners to the button element.
+ */
+export declare const SideNavToggleButtonElement: import('react').Context<HTMLButtonElement | null>;

package/dist/{types-ts4.5/ui/page-layout/side-nav/visibility-context.d.ts → types/ui/page-layout/side-nav/side-nav-visibility-state.d.ts}

@@ -1,11 +1,6 @@
-import { type Dispatch, type SetStateAction } from 'react';
 import type { SideNavState } from './types';
 /**
  * Context for the visibility of the side nav.
  * State is initialised as null. This is used when the value has not been set yet - which is important to know for SSR.
  */
 export declare const SideNavVisibilityState: import('react').Context<SideNavState | null>;
-/**
- * Sets the visibility of the side nav.
- */
-export declare const SetSideNavVisibilityState: import('react').Context<Dispatch<SetStateAction<SideNavState | null>>>;

package/dist/types/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns the value of the `isSideNavShortcutEnabled` prop from the `Root` component, which
+ * is shared through context.
+ */
+export declare function useIsSideNavShortcutEnabled(): boolean;

package/dist/{types-ts4.5/ui/page-layout/side-nav/element-context.d.ts → types/ui/page-layout/side-nav/use-side-nav-ref.d.ts}

@@ -1,7 +1,4 @@
-import React, { type ReactNode } from 'react';
-export declare function SideNavElementProvider({ children }: {
-    children: ReactNode;
-}): React.JSX.Element;
+import React from 'react';
 /**
  * Returns a ref for the side navigation that is accessible to other Page Layout slots.
  *

package/dist/types/ui/page-layout/top-nav/top-nav.d.ts

@@ -17,11 +17,10 @@ type TopNavProps = CommonSlotProps & {
      */
     height?: number;
     /**
-     * EXPERIMENTAL - DO NOT USE
-     *
-     * Feature is incomplete and API is subject to change at any time
+     * Custom theme for the top navigation. This is a port of Nav 3 functionality, and not recommended for new usage,
+     * as it does not align with our future vision.
      */
-    UNSAFE_theme?: CustomTheme;
+    customTheme?: CustomTheme;
 };
 /**
  * The top nav layout area. It will display at the top of the screen, below the banner if one is present.

package/dist/{types-ts4.5/ui/page-layout/id-utils.d.ts → types/ui/page-layout/use-layout-id.d.ts}

@@ -1,8 +1,3 @@
-/**
- * Returns a unique ID for use by layout elements and skip links.
- * You can use this for custom skip links.
- */
-export declare function useSkipLinkId(): string;
 /**
  * Returns an ID for use by the layout element and skip links.
  *

package/dist/types/ui/page-layout/use-skip-link-id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns a unique ID for use by layout elements and skip links.
+ * You can use this for custom skip links.
+ */
+export declare function useSkipLinkId(): string;

package/dist/types/ui/top-nav-items/themed/button.d.ts

@@ -1,128 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-import { type IconButtonProps } from '@atlaskit/button/new';
-import { type AnchorProps, type PressableProps } from '@atlaskit/primitives/compiled';
-type ButtonAppearance = 'default' | 'primary' | 'subtle';
-interface CommonProps {
-    /**
-     * The button style variation.
-     */
-    appearance?: ButtonAppearance;
-    /**
-     * Whether the button is disabled.
-     */
-    isDisabled?: boolean;
-    /**
-     * Indicates that the button is selected.
-     */
-    isSelected?: boolean;
-}
-/**
- * Props from primitives that we explicitly ignore and remove from spread props,
- * because they apply styles.
- *
- * `css` / `className` are not here because primitives don't support them.
- *
- * See `packages/design-system/primitives/src/components/anchor.tsx` and `packages/design-system/primitives/src/components/pressable.tsx`
- * for where these are defined. These shouldn't change very often as the direction is `xcss` over individual props.
- */
-type IgnoredPrimitiveProps = 'style' | 'xcss' | 'backgroundColor' | 'padding' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd';
-/**
- * Props present in underlying primitives but we want to override,
- * so we don't want to inherit their definitions
- */
-type OverridenPrimitiveProps = 'aria-label' | 'children' | IgnoredPrimitiveProps;
-/**
- * Props that are common between link buttons.
- */
-interface LinkVariantCommonProps<RouterLinkConfig extends Record<string, any> = never> extends CommonProps, Omit<AnchorProps<RouterLinkConfig>, OverridenPrimitiveProps> {
-}
-/**
- * Props shared by `Button` and `IconButton`
- */
-interface ActionVariantCommonProps extends CommonProps, Omit<PressableProps, OverridenPrimitiveProps> {
-}
-export declare const themedButtonBackground = "--ds-top-bar-button-background";
-export declare const themedButtonBackgroundHovered = "--ds-top-bar-button-background-hovered";
-export declare const themedButtonBackgroundPressed = "--ds-top-bar-button-background-pressed";
-export declare const themedButtonBorder = "--ds-top-bar-button-border";
-export declare const themedButtonPrimaryText = "--ds-top-bar-button-primary-text";
-export declare const themedButtonPrimaryBackground = "--ds-top-bar-button-primary-background";
-export declare const themedButtonPrimaryBackgroundHovered = "--ds-top-bar-button-primary-background-hovered";
-export declare const themedButtonPrimaryBackgroundPressed = "--ds-top-bar-button-primary-background-pressed";
-export declare const themedButtonSelectedText = "--ds-top-bar-button-selected-text";
-export declare const themedButtonSelectedBackground = "--ds-top-bar-button-selected-background";
-export declare const themedButtonSelectedBackgroundHovered = "--ds-top-bar-button-selected-background-hovered";
-export declare const themedButtonSelectedBackgroundPressed = "--ds-top-bar-button-selected-background-pressed";
-export declare const themedButtonSelectedBorder = "--ds-top-bar-button-selected-border";
-export declare const themedButtonDisabledText = "--ds-top-bar-button-disabled-text";
-export declare const themedButtonDisabledBackground = "--ds-top-bar-button-disabled-background";
-/**
- * Props shared by `Button` and `LinkButton`
- */
-interface TextButtonCommonProps {
-    /**
-     * Places an icon within the button, before the button's text.
-     */
-    iconBefore?: IconButtonProps['icon'];
-    /**
-     * Text content to be rendered in the button.
-     */
-    children: React.ReactNode;
-}
-export interface ThemedButtonProps extends ActionVariantCommonProps, TextButtonCommonProps {
-}
-/**
- * __Themed button__
- *
- * A themed button for the top bar.
- */
-export declare const ThemedButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedButtonProps> & React.RefAttributes<HTMLButtonElement>>;
-export interface ThemedLinkButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, TextButtonCommonProps {
-}
-/**
- * __Themed link button__
- *
- * A themed link button for the top bar.
- */
-export declare const ThemedLinkButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
-/**
- * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
- */
-interface IconButtonCommonProps {
-    children?: never;
-    'aria-label'?: never;
-    /**
-     * Provide an accessible label, often used by screen readers.
-     */
-    label: React.ReactNode;
-    /**
-     * Places an icon within the button.
-     */
-    icon: IconButtonProps['icon'];
-    /**
-     * Props passed down to the Tooltip component.
-     */
-    tooltip?: IconButtonProps['tooltip'];
-}
-export interface ThemedIconButtonProps extends ActionVariantCommonProps, IconButtonCommonProps {
-}
-/**
- * __Themed icon button__
- *
- * A themed icon button for the top bar.
- */
-export declare const ThemedIconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedIconButtonProps> & React.RefAttributes<HTMLButtonElement>>;
-export interface ThemedLinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, IconButtonCommonProps {
-    href: string | RouterLinkConfig;
-}
-/**
- * __Themed link icon button__
- *
- * A themed link icon button for the top bar.
- */
-export declare const ThemedLinkIconButton: <RouterLinkConfig extends Record<string, any> = never>(props: ThemedLinkIconButtonProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+import { type ThemedButtonProps } from './themed-button';
+type IconButtonMigrationProps = {
+    isTooltipDisabled?: boolean;
+};
+export declare const Button: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types/ui/top-nav-items/themed/get-primitives-spread-props.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Props from primitives that we explicitly ignore and remove from spread props,
+ * because they apply styles.
+ *
+ * `css` / `className` are not here because primitives don't support them.
+ *
+ * See `packages/design-system/primitives/src/components/anchor.tsx` and `packages/design-system/primitives/src/components/pressable.tsx`
+ * for where these are defined. These shouldn't change very often as the direction is `xcss` over individual props.
+ */
+export type IgnoredPrimitiveProps = 'style' | 'xcss' | 'backgroundColor' | 'padding' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd';
+/**
+ * Returns the spread props to pass through to underlying primitive components.
+ *
+ * It removes the props which apply styles.
+ */
+export declare function getPrimitiveSpreadProps<Props extends Record<string, unknown>>({ style, xcss, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, ...props }: Props): Omit<Props, IgnoredPrimitiveProps>;

package/dist/types/ui/top-nav-items/themed/icon-button.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type ThemedIconButtonProps } from './themed-icon-button';
+type IconButtonMigrationProps = {
+    isTooltipDisabled?: boolean;
+};
+export declare const IconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedIconButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/ui/top-nav-items/themed/link-button.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type ThemedLinkButtonProps } from './themed-link-button';
+export declare const LinkButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedLinkButtonProps> & React.RefAttributes<HTMLAnchorElement>>;