@atlaskit/navigation-system 9.4.3 → 10.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/experimental/ribbon/package.json +1 -8
- package/fhs-rollout/package.json +1 -8
- package/layout/aside/package.json +1 -8
- package/layout/banner/package.json +1 -8
- package/layout/main/package.json +1 -8
- package/layout/panel/package.json +1 -8
- package/layout/panel-splitter/package.json +1 -8
- package/layout/root/package.json +1 -8
- package/layout/side-nav/package.json +1 -8
- package/layout/skip-links/package.json +1 -8
- package/layout/top-nav/package.json +1 -8
- package/legacy/css-variables/package.json +1 -8
- package/package.json +41 -49
- package/theming/color-utils/parse-hex/package.json +1 -8
- package/theming/color-utils/parse-hsl/package.json +1 -8
- package/theming/color-utils/parse-rgb/package.json +1 -8
- package/theming/color-utils/parse-user-color/package.json +1 -8
- package/theming/top-nav-button/package.json +1 -8
- package/theming/use-has-custom-theme/package.json +1 -8
- package/theming/use-legacy-search-theme/package.json +1 -8
- package/top-nav-items/create-button/package.json +1 -8
- package/top-nav-items/custom-title/package.json +1 -8
- package/top-nav-items/help/package.json +1 -8
- package/top-nav-items/log-in/package.json +1 -8
- package/top-nav-items/notifications/package.json +1 -8
- package/top-nav-items/package.json +1 -8
- package/top-nav-items/profile/package.json +1 -8
- package/top-nav-items/settings/package.json +1 -8
- package/dist/types-ts4.5/components/badge-container.d.ts +0 -32
- package/dist/types-ts4.5/components/list-item.d.ts +0 -27
- package/dist/types-ts4.5/components/list.d.ts +0 -28
- package/dist/types-ts4.5/components/skip-links/focus-element.d.ts +0 -4
- package/dist/types-ts4.5/components/skip-links/skip-link.d.ts +0 -19
- package/dist/types-ts4.5/components/skip-links/skip-links-container.d.ts +0 -18
- package/dist/types-ts4.5/components/skip-links/skip-links-popup.d.ts +0 -11
- package/dist/types-ts4.5/context/skip-links/skip-links-context.d.ts +0 -9
- package/dist/types-ts4.5/context/skip-links/skip-links-provider.d.ts +0 -13
- package/dist/types-ts4.5/context/skip-links/types.d.ts +0 -44
- package/dist/types-ts4.5/context/skip-links/use-skip-link-internal.d.ts +0 -10
- package/dist/types-ts4.5/context/skip-links/use-skip-link.d.ts +0 -18
- package/dist/types-ts4.5/context/top-nav-start/top-nav-start-attach-ref.d.ts +0 -1
- package/dist/types-ts4.5/context/top-nav-start/top-nav-start-context-provider.d.ts +0 -17
- package/dist/types-ts4.5/context/top-nav-start/top-nav-start-element.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/experimental/ribbon.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/fhs-rollout.d.ts +0 -3
- package/dist/types-ts4.5/entry-points/layout/aside.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/layout/banner.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/layout/main.d.ts +0 -3
- package/dist/types-ts4.5/entry-points/layout/panel-splitter.d.ts +0 -3
- package/dist/types-ts4.5/entry-points/layout/panel.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/layout/root.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/layout/side-nav.d.ts +0 -8
- package/dist/types-ts4.5/entry-points/layout/skip-links.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/layout/top-nav.d.ts +0 -4
- package/dist/types-ts4.5/entry-points/legacy/css-variables.d.ts +0 -12
- package/dist/types-ts4.5/entry-points/theming/color-utils/parse-hex.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/theming/color-utils/parse-hsl.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/theming/color-utils/parse-rgb.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/theming/color-utils/parse-user-color.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/theming/top-nav-button.d.ts +0 -4
- package/dist/types-ts4.5/entry-points/theming/use-has-custom-theme.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/theming/use-legacy-search-theme.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/top-nav-items/create-button.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/top-nav-items/custom-title.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/top-nav-items/help.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/top-nav-items/index.d.ts +0 -14
- package/dist/types-ts4.5/entry-points/top-nav-items/log-in.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/top-nav-items/notifications.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/top-nav-items/profile.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/top-nav-items/settings.d.ts +0 -1
- package/dist/types-ts4.5/index.d.ts +0 -34
- package/dist/types-ts4.5/ui/fhs-rollout/is-custom-is-fhs-enabled-context.d.ts +0 -7
- package/dist/types-ts4.5/ui/fhs-rollout/is-fhs-enabled-context.d.ts +0 -8
- package/dist/types-ts4.5/ui/fhs-rollout/is-fhs-enabled-provider.d.ts +0 -10
- package/dist/types-ts4.5/ui/fhs-rollout/types.d.ts +0 -1
- package/dist/types-ts4.5/ui/fhs-rollout/use-is-fhs-enabled.d.ts +0 -6
- package/dist/types-ts4.5/ui/page-layout/aside.d.ts +0 -29
- package/dist/types-ts4.5/ui/page-layout/banner.d.ts +0 -24
- package/dist/types-ts4.5/ui/page-layout/constants.d.ts +0 -50
- package/dist/types-ts4.5/ui/page-layout/dangerously-hoist-css-var-to-document-root.d.ts +0 -8
- package/dist/types-ts4.5/ui/page-layout/hoist-css-var-to-local-grid.d.ts +0 -13
- package/dist/types-ts4.5/ui/page-layout/hoist-slot-sizes-context.d.ts +0 -5
- package/dist/types-ts4.5/ui/page-layout/main/main-sticky-header.d.ts +0 -23
- package/dist/types-ts4.5/ui/page-layout/main/main.d.ts +0 -16
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/convert-resize-bound-to-pixels.d.ts +0 -7
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-percentage-within-pixel-bounds.d.ts +0 -18
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-pixel-width.d.ts +0 -4
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-width-from-drag-location.d.ts +0 -8
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.d.ts +0 -9
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/keyboard-resize-manager.d.ts +0 -15
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/on-double-click-context.d.ts +0 -8
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter-context.d.ts +0 -64
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.d.ts +0 -1
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter.d.ts +0 -52
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/provider.d.ts +0 -28
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/side-nav-panel-splitter.d.ts +0 -38
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/types.d.ts +0 -23
- package/dist/types-ts4.5/ui/page-layout/panel.d.ts +0 -40
- package/dist/types-ts4.5/ui/page-layout/ribbon.d.ts +0 -11
- package/dist/types-ts4.5/ui/page-layout/root.d.ts +0 -71
- package/dist/types-ts4.5/ui/page-layout/side-nav/flyout-close-delay-ms.d.ts +0 -5
- package/dist/types-ts4.5/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.d.ts +0 -8
- package/dist/types-ts4.5/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.d.ts +0 -5
- package/dist/types-ts4.5/ui/page-layout/side-nav/set-side-nav-visibility-state.d.ts +0 -3
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-content.d.ts +0 -24
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-element-provider.d.ts +0 -4
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-footer.d.ts +0 -19
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-header.d.ts +0 -14
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-ref-context.d.ts +0 -2
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.d.ts +0 -1
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-button-element.d.ts +0 -5
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-tooltip-keyboard-shortcut.d.ts +0 -6
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-visibility-state.d.ts +0 -6
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav.d.ts +0 -93
- package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button-provider.d.ts +0 -17
- package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button.d.ts +0 -52
- package/dist/types-ts4.5/ui/page-layout/side-nav/types.d.ts +0 -61
- package/dist/types-ts4.5/ui/page-layout/side-nav/use-expand-side-nav.d.ts +0 -16
- package/dist/types-ts4.5/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.d.ts +0 -5
- package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-ref.d.ts +0 -7
- package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.d.ts +0 -6
- package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-visibility-callbacks.d.ts +0 -16
- package/dist/types-ts4.5/ui/page-layout/side-nav/use-side-nav-visibility.d.ts +0 -20
- package/dist/types-ts4.5/ui/page-layout/side-nav/use-toggle-side-nav.d.ts +0 -16
- package/dist/types-ts4.5/ui/page-layout/side-nav/visibility-provider.d.ts +0 -8
- package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav-end.d.ts +0 -29
- package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav-middle.d.ts +0 -24
- package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav-start.d.ts +0 -32
- package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav.d.ts +0 -29
- package/dist/types-ts4.5/ui/page-layout/types.d.ts +0 -20
- package/dist/types-ts4.5/ui/page-layout/use-layout-id.d.ts +0 -12
- package/dist/types-ts4.5/ui/page-layout/use-resizing-width-css-var-on-root-element.d.ts +0 -9
- package/dist/types-ts4.5/ui/page-layout/use-safe-default-width.d.ts +0 -17
- package/dist/types-ts4.5/ui/page-layout/use-skip-link-id.d.ts +0 -5
- package/dist/types-ts4.5/ui/top-nav-items/app-switcher.d.ts +0 -32
- package/dist/types-ts4.5/ui/top-nav-items/chat-button.d.ts +0 -25
- package/dist/types-ts4.5/ui/top-nav-items/create-button.d.ts +0 -30
- package/dist/types-ts4.5/ui/top-nav-items/custom-title.d.ts +0 -23
- package/dist/types-ts4.5/ui/top-nav-items/end-item.d.ts +0 -80
- package/dist/types-ts4.5/ui/top-nav-items/help.d.ts +0 -19
- package/dist/types-ts4.5/ui/top-nav-items/icon-renderer.d.ts +0 -17
- package/dist/types-ts4.5/ui/top-nav-items/log-in.d.ts +0 -36
- package/dist/types-ts4.5/ui/top-nav-items/nav-logo/app-logo.d.ts +0 -37
- package/dist/types-ts4.5/ui/top-nav-items/nav-logo/custom-logo.d.ts +0 -36
- package/dist/types-ts4.5/ui/top-nav-items/nav-logo/logo-renderer.d.ts +0 -11
- package/dist/types-ts4.5/ui/top-nav-items/notifications.d.ts +0 -16
- package/dist/types-ts4.5/ui/top-nav-items/profile.d.ts +0 -15
- package/dist/types-ts4.5/ui/top-nav-items/search.d.ts +0 -38
- package/dist/types-ts4.5/ui/top-nav-items/settings.d.ts +0 -11
- package/dist/types-ts4.5/ui/top-nav-items/themed/button.d.ts +0 -7
- package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/formats/hex.d.ts +0 -9
- package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/formats/hsl.d.ts +0 -7
- package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/formats/rgb.d.ts +0 -7
- package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/index.d.ts +0 -21
- package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/parse-user-color.d.ts +0 -13
- package/dist/types-ts4.5/ui/top-nav-items/themed/color-utils/types.d.ts +0 -17
- package/dist/types-ts4.5/ui/top-nav-items/themed/get-custom-theme-styles.d.ts +0 -22
- package/dist/types-ts4.5/ui/top-nav-items/themed/get-primitives-spread-props.d.ts +0 -16
- package/dist/types-ts4.5/ui/top-nav-items/themed/has-custom-theme-context.d.ts +0 -8
- package/dist/types-ts4.5/ui/top-nav-items/themed/has-default-background-color-context.d.ts +0 -5
- package/dist/types-ts4.5/ui/top-nav-items/themed/icon-button.d.ts +0 -7
- package/dist/types-ts4.5/ui/top-nav-items/themed/link-button.d.ts +0 -3
- package/dist/types-ts4.5/ui/top-nav-items/themed/link-icon-button.d.ts +0 -7
- package/dist/types-ts4.5/ui/top-nav-items/themed/palette-rgba.d.ts +0 -14
- package/dist/types-ts4.5/ui/top-nav-items/themed/palette.d.ts +0 -42
- package/dist/types-ts4.5/ui/top-nav-items/themed/search.d.ts +0 -55
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-anchor.d.ts +0 -32
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-button.d.ts +0 -10
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-icon-button.d.ts +0 -10
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-link-button.d.ts +0 -16
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-link-icon-button.d.ts +0 -13
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-pressable.d.ts +0 -18
- package/dist/types-ts4.5/ui/top-nav-items/themed/types.d.ts +0 -54
- package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme-new.d.ts +0 -20
- package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme.d.ts +0 -12
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { ResizeBounds } from './types';
|
|
2
|
-
export type PanelSplitterDragData = {
|
|
3
|
-
panelId: string | symbol | undefined;
|
|
4
|
-
initialWidth: number;
|
|
5
|
-
resizingWidth: string;
|
|
6
|
-
resizeBounds: ResizeBounds;
|
|
7
|
-
direction: 'ltr' | 'rtl';
|
|
8
|
-
};
|
|
9
|
-
export declare function isPanelSplitterDragData(data: Record<string | symbol, unknown>): data is PanelSplitterDragData;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { ResizeEndCallback, ResizeStartCallback } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Returns an instance of a state machine manager for keyboard resizing.
|
|
4
|
-
* It handles calling the `onResizeStart` and `onResizeEnd` callbacks appropriately, as the user "starts" and "finishes" resizing
|
|
5
|
-
* using the keyboard, to prevent calling them on every keydown.
|
|
6
|
-
*
|
|
7
|
-
* - `onResizeStart` is called immediately when the user starts resizing
|
|
8
|
-
* - `onResizeEnd` is called after a wait time when the user stops resizing.
|
|
9
|
-
*/
|
|
10
|
-
export declare function createKeyboardResizeManager({ onResizeStart, onResizeEnd, }: {
|
|
11
|
-
onResizeStart: ResizeStartCallback;
|
|
12
|
-
onResizeEnd: ResizeEndCallback;
|
|
13
|
-
}): {
|
|
14
|
-
onResize: ({ initialWidth, finalWidth }: Parameters<ResizeEndCallback>[0]) => void;
|
|
15
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Context for the panel splitter's double click handler. Only internally exported.
|
|
3
|
-
*
|
|
4
|
-
* NOTE: This context is a temporary workaround to enable the `SideNavPanelSplitter` component
|
|
5
|
-
* to collapse the side nav on double click, without exposing the `onDoubleClick` prop on `PanelSplitter`.
|
|
6
|
-
* Once `PanelSplitter` supports an `onDoubleClick` prop directly, this context should be removed.
|
|
7
|
-
*/
|
|
8
|
-
export declare const OnDoubleClickContext: import('react').Context<(() => void) | undefined>;
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { type MutableRefObject } from 'react';
|
|
2
|
-
import type { TooltipProps } from '@atlaskit/tooltip';
|
|
3
|
-
import { type ResizeBounds } from './types';
|
|
4
|
-
export type PanelSplitterContextType = {
|
|
5
|
-
/**
|
|
6
|
-
* An optional identifier for the panel splitter, which is attached to the `pragmatic-drag-and-drop` drag data.
|
|
7
|
-
*/
|
|
8
|
-
panelId?: symbol;
|
|
9
|
-
/**
|
|
10
|
-
* A ref to the page layout element that will be resized by the splitter.
|
|
11
|
-
*/
|
|
12
|
-
panelRef: MutableRefObject<HTMLDivElement | null>;
|
|
13
|
-
/**
|
|
14
|
-
* The "saved" width of the panel element. Used to calculate the new width of the panel when dragging.
|
|
15
|
-
*/
|
|
16
|
-
panelWidth: number;
|
|
17
|
-
/**
|
|
18
|
-
* Called when the user finishes resizing the panel. It should update the width of the panel element.
|
|
19
|
-
*/
|
|
20
|
-
onCompleteResize: (newWidth: number) => void;
|
|
21
|
-
/**
|
|
22
|
-
* The minimum and maximum bounds for resizing the panel.
|
|
23
|
-
* The bounds can be provided as `px` or `vw` values.
|
|
24
|
-
*/
|
|
25
|
-
getResizeBounds: () => ResizeBounds;
|
|
26
|
-
/**
|
|
27
|
-
* A ref to the portal element where the panel splitter will be rendered.
|
|
28
|
-
* If not provided, it will be internally set by the PanelSplitterProvider.
|
|
29
|
-
*
|
|
30
|
-
* This prop is useful for:
|
|
31
|
-
* - Rendering the panel splitter outside of an overflow container.
|
|
32
|
-
* - Positioning the panel splitter outside the resizing panel.
|
|
33
|
-
*/
|
|
34
|
-
portalRef: MutableRefObject<HTMLDivElement | null>;
|
|
35
|
-
/**
|
|
36
|
-
* The CSS variable that will be set on the panel element to temporarily resize it while dragging the splitter
|
|
37
|
-
*/
|
|
38
|
-
resizingCssVar: string;
|
|
39
|
-
/**
|
|
40
|
-
* The side of the panel/element that the splitter element is positioned on. Uses logical values to support right-to-left languages.
|
|
41
|
-
*
|
|
42
|
-
* Defaults to `start`.
|
|
43
|
-
*
|
|
44
|
-
* For left-to-right languages, `start` is the left side and `end` is the right side.
|
|
45
|
-
*/
|
|
46
|
-
position: 'start' | 'end';
|
|
47
|
-
/**
|
|
48
|
-
* Whether the panel splitter is enabled and should be rendered.
|
|
49
|
-
*
|
|
50
|
-
* Defaults to `true`.
|
|
51
|
-
* If `false`, the panel splitter will not be rendered.
|
|
52
|
-
*/
|
|
53
|
-
isEnabled?: boolean;
|
|
54
|
-
/**
|
|
55
|
-
* The keyboard shortcut to display in the tooltip.
|
|
56
|
-
*
|
|
57
|
-
* Note this does not handle the keyboard shortcut functionality, it only displays the shortcut in the tooltip.
|
|
58
|
-
*/
|
|
59
|
-
shortcut?: TooltipProps['shortcut'];
|
|
60
|
-
};
|
|
61
|
-
/**
|
|
62
|
-
* Context for the panel splitter. Only internally exported.
|
|
63
|
-
*/
|
|
64
|
-
export declare const PanelSplitterContext: import('react').Context<PanelSplitterContextType | null>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const panelSplitterDragDataSymbol: unique symbol;
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type ReactNode } from 'react';
|
|
6
|
-
import { type TooltipProps } from '@atlaskit/tooltip';
|
|
7
|
-
import type { ResizeEndCallback, ResizeStartCallback } from './types';
|
|
8
|
-
export type PanelSplitterProps = {
|
|
9
|
-
/**
|
|
10
|
-
* The accessible label for the panel splitter. It is visually hidden, but is required for accessibility.
|
|
11
|
-
*/
|
|
12
|
-
label: React.ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* Called when the user begins resizing the panel.
|
|
15
|
-
* Intended for analytics.
|
|
16
|
-
*/
|
|
17
|
-
onResizeStart?: ResizeStartCallback;
|
|
18
|
-
/**
|
|
19
|
-
* Called when the user finishes resizing the panel.
|
|
20
|
-
*/
|
|
21
|
-
onResizeEnd?: ResizeEndCallback;
|
|
22
|
-
/**
|
|
23
|
-
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
24
|
-
*/
|
|
25
|
-
testId?: string;
|
|
26
|
-
/**
|
|
27
|
-
* Displays a tooltip with the provided content.
|
|
28
|
-
*
|
|
29
|
-
* The `tooltipContent` will not be announced by screen readers because it pertains to the draggable element, which lacks keyboard functionality.
|
|
30
|
-
* Use the `label` prop to provide accessible information about the panel splitter.
|
|
31
|
-
*
|
|
32
|
-
* Only used if `useIsFhsEnabled` is true.
|
|
33
|
-
*/
|
|
34
|
-
tooltipContent?: TooltipProps['content'];
|
|
35
|
-
};
|
|
36
|
-
/**
|
|
37
|
-
* _PanelSplitter_
|
|
38
|
-
*
|
|
39
|
-
* A component that allows the user to resize a layout area.
|
|
40
|
-
* It can be used within layout areas like `Panel`, and `Aside`.
|
|
41
|
-
* For the `SideNav`, use the `SideNavPanelSplitter` component instead, as it provides additional functionality
|
|
42
|
-
* such as double clicking to collapse the side nav.
|
|
43
|
-
*
|
|
44
|
-
* Example usage:
|
|
45
|
-
* ```tsx
|
|
46
|
-
* <Aside>
|
|
47
|
-
* <!-- other side nav content -->
|
|
48
|
-
* <PanelSplitter label="Resize Side Nav" />
|
|
49
|
-
* </Aside>
|
|
50
|
-
* ```
|
|
51
|
-
*/
|
|
52
|
-
export declare const PanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, tooltipContent, }: PanelSplitterProps) => ReactNode;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React, { type MutableRefObject } from 'react';
|
|
2
|
-
import { type PanelSplitterContextType } from './panel-splitter-context';
|
|
3
|
-
export type PanelSplitterProviderProps = Omit<PanelSplitterContextType, 'portalRef' | 'position'> & {
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
/**
|
|
6
|
-
* The side of the panel/element that the splitter element is positioned on. Uses logical values to support right-to-left languages.
|
|
7
|
-
*
|
|
8
|
-
* Defaults to `start`.
|
|
9
|
-
*
|
|
10
|
-
* For left-to-right languages, `start` is the left side and `end` is the right side.
|
|
11
|
-
*/
|
|
12
|
-
position?: 'start' | 'end';
|
|
13
|
-
/**
|
|
14
|
-
* A ref to the portal element where the panel splitter will be rendered.
|
|
15
|
-
* If not provided, it will be internally set by the PanelSplitterProvider.
|
|
16
|
-
*
|
|
17
|
-
* This prop is useful for:
|
|
18
|
-
* - Rendering the panel splitter outside of an overflow container.
|
|
19
|
-
* - Positioning the panel splitter outside the resizing panel.
|
|
20
|
-
*/
|
|
21
|
-
portalRef?: MutableRefObject<HTMLDivElement | null>;
|
|
22
|
-
};
|
|
23
|
-
/**
|
|
24
|
-
* Provides the context required for the panel splitter to work within a page layout slot.
|
|
25
|
-
*
|
|
26
|
-
* Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
|
|
27
|
-
*/
|
|
28
|
-
export declare const PanelSplitterProvider: ({ panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, panelRef, portalRef: providedPortalRef, position, isEnabled, shortcut, children, }: PanelSplitterProviderProps) => React.JSX.Element;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
import { type PanelSplitterProps } from './panel-splitter';
|
|
3
|
-
type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick' | 'tooltipContent'> & {
|
|
4
|
-
/**
|
|
5
|
-
* Whether the side nav should collapse on double click.
|
|
6
|
-
*
|
|
7
|
-
* If not provided, it will default to `true`.
|
|
8
|
-
*/
|
|
9
|
-
shouldCollapseOnDoubleClick?: boolean;
|
|
10
|
-
/**
|
|
11
|
-
* Displays a tooltip with the provided content. It is expected to be a string that explains the double click to collapse interaction.
|
|
12
|
-
*
|
|
13
|
-
* It will only be displayed if the `shouldCollapseOnDoubleClick` prop is `true`, or not provided (as it defaults to `true`).
|
|
14
|
-
*
|
|
15
|
-
* The `tooltipContent` will not be announced by screen readers because it pertains to the draggable element, which lacks keyboard functionality.
|
|
16
|
-
* Use the `label` prop to provide accessible information about the panel splitter.
|
|
17
|
-
*
|
|
18
|
-
* If the `isSideNavShortcutEnabled` prop is enabled on `<Root />`, the built-in keyboard shortcut will be displayed with the tooltip.
|
|
19
|
-
*
|
|
20
|
-
* Only used if `useIsFhsEnabled` is true.
|
|
21
|
-
*/
|
|
22
|
-
tooltipContent?: PanelSplitterProps['tooltipContent'];
|
|
23
|
-
};
|
|
24
|
-
/**
|
|
25
|
-
* _SideNavPanelSplitter_
|
|
26
|
-
*
|
|
27
|
-
* A component that allows the user to resize or collapse the side nav.
|
|
28
|
-
* It must be used within the `SideNav` layout area.
|
|
29
|
-
*
|
|
30
|
-
* Example usage:
|
|
31
|
-
* ```tsx
|
|
32
|
-
* <SideNav>
|
|
33
|
-
* <SideNavPanelSplitter label="Double click to collapse" />
|
|
34
|
-
* </SideNav>
|
|
35
|
-
* ```
|
|
36
|
-
*/
|
|
37
|
-
export declare const SideNavPanelSplitter: ({ label, onResizeStart, onResizeEnd, testId, shouldCollapseOnDoubleClick, tooltipContent, }: SideNavPanelSplitterProps) => ReactNode;
|
|
38
|
-
export {};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Called when the user begins resizing the panel.
|
|
3
|
-
* Intended for analytics.
|
|
4
|
-
*/
|
|
5
|
-
export type ResizeStartCallback = ({ initialWidth }: {
|
|
6
|
-
initialWidth: number;
|
|
7
|
-
}) => void;
|
|
8
|
-
/**
|
|
9
|
-
* Called when the user finishes resizing the panel.
|
|
10
|
-
*/
|
|
11
|
-
export type ResizeEndCallback = ({ initialWidth, finalWidth, }: {
|
|
12
|
-
initialWidth: number;
|
|
13
|
-
finalWidth: number;
|
|
14
|
-
}) => void;
|
|
15
|
-
export type ResizeBound = `${number}px` | `${number}vw`;
|
|
16
|
-
export type ResizeBounds = {
|
|
17
|
-
min: ResizeBound;
|
|
18
|
-
max: ResizeBound;
|
|
19
|
-
};
|
|
20
|
-
export type PixelResizeBounds = {
|
|
21
|
-
min: number;
|
|
22
|
-
max: number;
|
|
23
|
-
};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import type { StrictXCSSProp } from '@atlaskit/css';
|
|
2
|
-
import type { CommonSlotProps } from './types';
|
|
3
|
-
/**
|
|
4
|
-
* The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
|
|
5
|
-
*
|
|
6
|
-
* On small viewports (below 64rem, or 1024px), the Panel slot will become an overlay.
|
|
7
|
-
*
|
|
8
|
-
* You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
|
|
9
|
-
*/
|
|
10
|
-
export declare function Panel({ children, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, }: CommonSlotProps & {
|
|
11
|
-
/**
|
|
12
|
-
* The content of the layout area.
|
|
13
|
-
*/
|
|
14
|
-
children: React.ReactNode;
|
|
15
|
-
/**
|
|
16
|
-
* The accessible name of the slot, announced by screen readers.
|
|
17
|
-
*/
|
|
18
|
-
label?: string;
|
|
19
|
-
/**
|
|
20
|
-
* The default width of the layout area.
|
|
21
|
-
*
|
|
22
|
-
* It should be an integer between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
|
|
23
|
-
*
|
|
24
|
-
* This value is also used as the minimum resizing width, except when the `defaultWidth` is greater then `400px`,
|
|
25
|
-
* in which case `400px` will be used as the minimum resizing width instead.
|
|
26
|
-
*/
|
|
27
|
-
defaultWidth?: number;
|
|
28
|
-
/**
|
|
29
|
-
* Bounded style overrides.
|
|
30
|
-
*/
|
|
31
|
-
xcss?: StrictXCSSProp<'backgroundColor', never>;
|
|
32
|
-
/**
|
|
33
|
-
* Whether or not the slot has its own border. On small screens this becomes a shadow.
|
|
34
|
-
*
|
|
35
|
-
* Defaults to true. Will be removed in the future (and disabling the border will not be supported).
|
|
36
|
-
*
|
|
37
|
-
* @deprecated
|
|
38
|
-
*/
|
|
39
|
-
hasBorder?: boolean;
|
|
40
|
-
}): JSX.Element;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import type { CommonSlotProps } from './types';
|
|
6
|
-
type RibbonProps = CommonSlotProps & {
|
|
7
|
-
width: string | number;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
};
|
|
10
|
-
export declare function UNSAFE_Ribbon({ children, testId, id: providedId, width, }: RibbonProps): JSX.Element | null;
|
|
11
|
-
export {};
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import type { StrictXCSSProp } from '@atlaskit/css';
|
|
7
|
-
export declare const gridRootId = "unsafe-design-system-page-layout-root";
|
|
8
|
-
/**
|
|
9
|
-
* The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
|
|
10
|
-
* @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
|
|
11
|
-
*/
|
|
12
|
-
export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes, skipLinksLabel, skipLinksTriggerLabel, testId, defaultSideNavCollapsed, isSideNavShortcutEnabled, }: {
|
|
13
|
-
/**
|
|
14
|
-
* For rendering the layout areas, e.g. TopNav, SideNav, Main.
|
|
15
|
-
* They should be rendered as immediate children.
|
|
16
|
-
*/
|
|
17
|
-
children: React.ReactNode;
|
|
18
|
-
/**
|
|
19
|
-
* Bounded style overrides.
|
|
20
|
-
*/
|
|
21
|
-
xcss?: StrictXCSSProp<'backgroundColor', never>;
|
|
22
|
-
/**
|
|
23
|
-
* **Note: This prop is only supported for legacy purposes in Jira and Confluence,
|
|
24
|
-
* and is subject to be removed without notice in the future.**
|
|
25
|
-
*
|
|
26
|
-
* Whether to dangerously hoist the layout slot sizes to the document root element,
|
|
27
|
-
* to support some legacy use cases. Do not use this prop for new code.
|
|
28
|
-
*/
|
|
29
|
-
UNSAFE_dangerouslyHoistSlotSizes?: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* The header text for the skip links container element.
|
|
32
|
-
*/
|
|
33
|
-
skipLinksLabel?: string;
|
|
34
|
-
/**
|
|
35
|
-
* The label for the skip links button that opens the skip links popup.
|
|
36
|
-
*/
|
|
37
|
-
skipLinksTriggerLabel?: string;
|
|
38
|
-
/**
|
|
39
|
-
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
40
|
-
*/
|
|
41
|
-
testId?: string;
|
|
42
|
-
/**
|
|
43
|
-
* Whether the side nav should be collapsed by default __on desktop screens__.
|
|
44
|
-
*
|
|
45
|
-
* It is always collapsed by default for mobile screens.
|
|
46
|
-
*
|
|
47
|
-
* This value is used when the side nav is first mounted, but you should continuously update your
|
|
48
|
-
* persisted state using the `onCollapse` and `onExpand` callbacks, to ensure it is up to date
|
|
49
|
-
* when the app is reloaded.
|
|
50
|
-
*
|
|
51
|
-
* __Note:__ When provided, the `defaultCollapsed` props on `SideNav` and `SideNavToggleButton` will be ignored.
|
|
52
|
-
*/
|
|
53
|
-
defaultSideNavCollapsed?: boolean;
|
|
54
|
-
/**
|
|
55
|
-
* Controls whether the side nav toggle shortcut is enabled. This will be used to bind the keyboard event listener,
|
|
56
|
-
* and to display the keyboard shortcuts in the appropriate tooltips (`SideNavToggleButton`, `SideNavPanelSplitter`).
|
|
57
|
-
*
|
|
58
|
-
* The shortcut key is `Ctrl` + `[`.
|
|
59
|
-
*
|
|
60
|
-
* The shortcut is not enabled by default.
|
|
61
|
-
*
|
|
62
|
-
* The shortcut will also be ignored if there are any open ADS modal dialogs (`@atlaskit/modal-dialog`).
|
|
63
|
-
*
|
|
64
|
-
* `SideNav` has another prop `canToggleWithShortcut()` that can be used to run additional checks after the shortcut
|
|
65
|
-
* is pressed, before the SideNav is toggled. You can use this to conditionally disable the shortcut based on your
|
|
66
|
-
* your own custom checks, e.g. if there is a legacy dialog open.
|
|
67
|
-
*
|
|
68
|
-
* Note: The built-in keyboard shortcut is behind `useIsFhsEnabled`.
|
|
69
|
-
*/
|
|
70
|
-
isSideNavShortcutEnabled?: boolean;
|
|
71
|
-
}): JSX.Element;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { type Context } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Context for whether the side nav toggle shortcut is enabled.
|
|
4
|
-
*
|
|
5
|
-
* Used to share the `isSideNavShortcutEnabled` prop value from `Root` with other components,
|
|
6
|
-
* so the visual keyboard shortcut in tooltips can be conditionally displayed.
|
|
7
|
-
*/
|
|
8
|
-
export declare const IsSideNavShortcutEnabledContext: Context<boolean>;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React, { type ReactNode } from 'react';
|
|
6
|
-
/**
|
|
7
|
-
* The main content of the side nav, filling up the middle section. It acts as a scroll container.
|
|
8
|
-
*
|
|
9
|
-
* It will grow to take up the available space in the side nav — this is used to push the footer to the
|
|
10
|
-
* bottom of the side nav.
|
|
11
|
-
*/
|
|
12
|
-
export declare const SideNavBody: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
-
type SideNavContentProps = {
|
|
14
|
-
/**
|
|
15
|
-
* The content of the layout area.
|
|
16
|
-
* Should contain side nav menu items.
|
|
17
|
-
*/
|
|
18
|
-
children: ReactNode;
|
|
19
|
-
/**
|
|
20
|
-
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
21
|
-
*/
|
|
22
|
-
testId?: string;
|
|
23
|
-
};
|
|
24
|
-
export {};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import type { ReactNode } from 'react';
|
|
6
|
-
import { type StrictXCSSProp } from '@atlaskit/css';
|
|
7
|
-
/**
|
|
8
|
-
* The bottom part of the side nav.
|
|
9
|
-
*/
|
|
10
|
-
export declare const SideNavFooter: ({ children, xcss, }: {
|
|
11
|
-
/**
|
|
12
|
-
* The content of the layout area.
|
|
13
|
-
*/
|
|
14
|
-
children: ReactNode;
|
|
15
|
-
/**
|
|
16
|
-
* Bounded style overrides.
|
|
17
|
-
*/
|
|
18
|
-
xcss?: StrictXCSSProp<'backgroundColor', never>;
|
|
19
|
-
}) => JSX.Element;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import type { ReactNode } from 'react';
|
|
6
|
-
/**
|
|
7
|
-
* The top part of the side nav.
|
|
8
|
-
*/
|
|
9
|
-
export declare const SideNavHeader: ({ children, }: {
|
|
10
|
-
/**
|
|
11
|
-
* The content of the layout area.
|
|
12
|
-
*/
|
|
13
|
-
children: ReactNode;
|
|
14
|
-
}) => JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const SideNavToggleButtonAttachRef: import('react').Context<(newVal: HTMLButtonElement | null) => void>;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Context for the side nav toggle button element.
|
|
3
|
-
* Used to power the side nav flyout by allowing the side nav to bind event listeners to the button element.
|
|
4
|
-
*/
|
|
5
|
-
export declare const SideNavToggleButtonElement: import('react').Context<HTMLButtonElement | null>;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { SideNavState } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Context for the visibility of the side nav.
|
|
4
|
-
* State is initialised as null. This is used when the value has not been set yet - which is important to know for SSR.
|
|
5
|
-
*/
|
|
6
|
-
export declare const SideNavVisibilityState: import('react').Context<SideNavState | null>;
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
* @jsxFrag
|
|
5
|
-
*/
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import type { CommonSlotProps } from '../types';
|
|
8
|
-
import { type VisibilityCallback } from './use-side-nav-visibility-callbacks';
|
|
9
|
-
type SideNavProps = CommonSlotProps & {
|
|
10
|
-
/**
|
|
11
|
-
* The content of the layout area.
|
|
12
|
-
* Should include side nav layout areas as required: `SideNavHeader`, `SideNavBody`, `SideNavFooter`.
|
|
13
|
-
* Within these, you can use side nav menu items.
|
|
14
|
-
*/
|
|
15
|
-
children: React.ReactNode;
|
|
16
|
-
/**
|
|
17
|
-
* The accessible name of the slot, announced by screen readers.
|
|
18
|
-
*/
|
|
19
|
-
label?: string;
|
|
20
|
-
/**
|
|
21
|
-
* @deprecated
|
|
22
|
-
*
|
|
23
|
-
* This prop is being replaced by `defaultSideNavCollapsed` on the `Root` element,
|
|
24
|
-
* and will be removed in the future.
|
|
25
|
-
*
|
|
26
|
-
* ---
|
|
27
|
-
*
|
|
28
|
-
* Whether the side nav should be collapsed by default __on desktop screens__.
|
|
29
|
-
*
|
|
30
|
-
* It is always collapsed by default for mobile screens.
|
|
31
|
-
*
|
|
32
|
-
* This value is used when the side nav is first mounted, but you should continuously update your
|
|
33
|
-
* persisted state using the `onCollapse` and `onExpand` callbacks, to ensure it is up to date
|
|
34
|
-
* when the app is reloaded.
|
|
35
|
-
*
|
|
36
|
-
* __Note:__ If using this prop, ensure that it is also provided to the `SideNavToggleButton`.
|
|
37
|
-
* This is to ensure the state is in sync before post-SSR hydration.
|
|
38
|
-
*/
|
|
39
|
-
defaultCollapsed?: boolean;
|
|
40
|
-
/**
|
|
41
|
-
* The default width of the side nav layout area.
|
|
42
|
-
*
|
|
43
|
-
* It should be an integer between the resize bounds - the minimum is 240px and the maximum is 50% of the viewport width.
|
|
44
|
-
*
|
|
45
|
-
* It is only used when the side nav is first mounted, but you should continuously update your
|
|
46
|
-
* persisted state using the `onResizeEnd` callback of `PanelSplitter`, to ensure it is up to date
|
|
47
|
-
* when the app is reloaded.
|
|
48
|
-
*/
|
|
49
|
-
defaultWidth?: number;
|
|
50
|
-
/**
|
|
51
|
-
* Called when the side nav is expanded.
|
|
52
|
-
*/
|
|
53
|
-
onExpand?: VisibilityCallback;
|
|
54
|
-
/**
|
|
55
|
-
* Called when the side nav is collapsed.
|
|
56
|
-
*/
|
|
57
|
-
onCollapse?: VisibilityCallback;
|
|
58
|
-
/**
|
|
59
|
-
* Called when the side nav begins peeking / flyout.
|
|
60
|
-
*/
|
|
61
|
-
onPeekStart?: () => void;
|
|
62
|
-
/**
|
|
63
|
-
* Called when the side nav stops peeking / flyout.
|
|
64
|
-
*/
|
|
65
|
-
onPeekEnd?: (args: {
|
|
66
|
-
trigger: 'mouse-leave' | 'side-nav-expand';
|
|
67
|
-
}) => void;
|
|
68
|
-
/**
|
|
69
|
-
* Whether the side nav should be toggled in response to the built-in keyboard shortcut. Use this callback to
|
|
70
|
-
* conditionally disable the shortcut based on your own custom checks, e.g. if there is a legacy dialog open.
|
|
71
|
-
*
|
|
72
|
-
* This prop will do nothing if `isSideNavShortcutEnabled` on Root is not set to `true`, as the keyboard event
|
|
73
|
-
* listener is only binded if `isSideNavShortcutEnabled` is `true`.
|
|
74
|
-
*
|
|
75
|
-
* The shortcut key is `Ctrl` + `[`.
|
|
76
|
-
*
|
|
77
|
-
* Note: The built-in keyboard shortcut is behind `useIsFhsEnabled`.
|
|
78
|
-
*/
|
|
79
|
-
canToggleWithShortcut?: () => boolean;
|
|
80
|
-
};
|
|
81
|
-
export declare const onPeekStartDelayMs = 500;
|
|
82
|
-
/**
|
|
83
|
-
* The side navigation layout area. It will show on the left (inline start) of the screen.
|
|
84
|
-
*
|
|
85
|
-
* Use the side nav area components (`SideNavHeader`, `SideNavBody`, `SideNavFooter`) to position
|
|
86
|
-
* content within areas of the side nav.
|
|
87
|
-
*
|
|
88
|
-
* You can optionally render a `PanelSplitter` as a child to make the side navigation slot resizable.
|
|
89
|
-
*/
|
|
90
|
-
export declare function SideNav({ children, defaultCollapsed, defaultWidth, testId, label, // Default value is defined in `SideNavInternal`
|
|
91
|
-
skipLinkLabel, // Default value is defined in `SideNavInternal`
|
|
92
|
-
onExpand, onCollapse, onPeekStart, onPeekEnd, canToggleWithShortcut, id, }: SideNavProps): JSX.Element;
|
|
93
|
-
export {};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Provider for the side nav toggle button contexts.
|
|
4
|
-
*
|
|
5
|
-
* We are using a [ref callback](https://react.dev/reference/react-dom/components/common#ref-callback) along with a state
|
|
6
|
-
* for storing the button element once it has mounted, so that the side nav can bind event listeners to the button
|
|
7
|
-
* once it is mounted.
|
|
8
|
-
*
|
|
9
|
-
* Otherwise, the side nav can be mounted before the button (e.g. if the button is lazy loaded), which would prevent the
|
|
10
|
-
* event listeners from being set up.
|
|
11
|
-
*
|
|
12
|
-
* State is required as opposed to just a ref so that the effects in the side nav can react the element actually being mounted,
|
|
13
|
-
* as ref values cannot be added as effect dependencies.
|
|
14
|
-
*/
|
|
15
|
-
export declare const SideNavToggleButtonProvider: ({ children, }: {
|
|
16
|
-
children: React.ReactNode;
|
|
17
|
-
}) => React.JSX.Element;
|