@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/ui/page-layout/aside.tsx

@@ -1,210 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type CSSProperties, useContext, useEffect, useRef, useState } from 'react';
-
-import { cssMap, jsx } from '@compiled/react';
-
-import type { StrictXCSSProp } from '@atlaskit/css';
-import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
-import { media } from '@atlaskit/primitives/responsive';
-
-import { useSkipLinkInternal } from '../../context/skip-links/skip-links-context';
-
-import {
-	asidePanelSplitterId,
-	asideVar,
-	contentHeightWhenFixed,
-	contentInsetBlockStart,
-	UNSAFE_asideLayoutVar,
-} from './constants';
-import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
-import { DangerouslyHoistCssVarToDocumentRoot } from './hoist-utils';
-import { useLayoutId } from './id-utils';
-import { PanelSplitterProvider } from './panel-splitter/provider';
-import type { ResizeBounds } from './panel-splitter/types';
-import type { CommonSlotProps } from './types';
-import { useResizingWidthCssVarOnRootElement } from './use-resizing-width-css-var-on-root-element';
-
-const panelSplitterResizingVar = '--n_asdRsz';
-/**
- * The bounds for Aside and Panel are purposely set to support the current usage in Jira.
- *
- * Jira sets the slot's width to `0px` when there is no active content to display in it.
- *   - This means the min width needs to support `0px`.
- * The Conversation Assistant component in Jira (rendered in a nav3 RightSidebar, or a nav4 Aside) has a custom resizing
- * implementation, which has a maximum width of `50vw`.
- *   - This means the max width needs to support `50vw`.
- *
- * This is not the final implementation and will be updated once Jira's usage has been fixed.
- * Ticket to track this is: https://jplat.atlassian.net/browse/BLU-3951
- *
- * We're using two different bounds for each slot here, to support the `0px` min width when programatically set using the
- * `defaultWidth` prop, and another one that is used when resizing the slots which has a sensible min width.
- */
-const asideWidthSlotBounds: ResizeBounds = { min: '0px', max: '50vw' };
-const asideWidthResizeBounds: ResizeBounds = { min: '120px', max: '50vw' };
-
-function getResizeBounds() {
-	return asideWidthResizeBounds;
-}
-
-const styles = cssMap({
-	root: {
-		gridArea: 'aside',
-		boxSizing: 'border-box',
-		position: 'relative',
-		'@media (min-width: 64rem)': {
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-			width: `var(${panelSplitterResizingVar}, var(${asideVar}))`,
-			justifySelf: 'end',
-		},
-	},
-	inner: {
-		// This sets the sticky point to be just below top bar + banner. It's needed to ensure the stick
-		// point is exactly where this element is rendered to with no wiggle room. Unfortunately the CSS
-		// spec for sticky doesn't support "stick to where I'm initially rendered" so we need to tell it.
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-		insetBlockStart: contentInsetBlockStart,
-		overflow: 'auto',
-		// We want the direct child of the "aside" grid item to also take up the full height of the grid item.
-		// An example use case is for consumers to add a border that takes up the full height of the aside slot.
-		height: '100%',
-		'@media (min-width: 64rem)': {
-			// Height is set so it takes up all of the available viewport space minus top bar + banner.
-			// This is only set on larger viewports meaning stickiness only occurs on them.
-			// On small viewports it is not sticky.
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-			height: contentHeightWhenFixed,
-			position: 'sticky',
-		},
-	},
-});
-
-/**
- * The Aside is rendered to the right (inline end) of the Main area.
- *
- * You can optionally render a `PanelSplitter` as a child to make the aside area resizable.
- */
-export function Aside({
-	children,
-	xcss,
-	defaultWidth = 330,
-	label = 'Aside',
-	skipLinkLabel = label,
-	testId,
-	id: providedId,
-}: CommonSlotProps & {
-	/**
-	 * The content of the layout area.
-	 */
-	children: React.ReactNode;
-	/**
-	 * The accessible name of the slot, announced by screen readers.
-	 */
-	label?: string;
-	/**
-	 * Bounded style overrides.
-	 */
-	xcss?: StrictXCSSProp<'backgroundColor', never>;
-	/**
-	 * The default width of the layout area.
-	 *
-	 * It should be between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.
-	 */
-	defaultWidth?: number;
-}) {
-	const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
-	const id = useLayoutId({ providedId });
-
-	/**
-	 * Don't show the skip link if the slot has 0 width.
-	 *
-	 * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
-	 */
-	useSkipLinkInternal({
-		id,
-		label: skipLinkLabel,
-		isHidden: defaultWidth === 0,
-	});
-	const ref = useRef<HTMLDivElement | null>(null);
-	const [width, setWidth] = useState(defaultWidth);
-	// Used to track the previous value of the `defaultWidth` prop, for logging dev warnings when it changes.
-	const previousWidthProp = usePreviousValue(defaultWidth);
-
-	/**
-	 * Updates the width state based on changes to `defaultWidth`.
-	 * This is temporary and needed to support the current usage in Jira, and will be removed once it is no longer needed.
-	 * https://jplat.atlassian.net/browse/BLU-3951
-	 */
-	useEffect(() => {
-		setWidth(defaultWidth);
-	}, [defaultWidth]);
-
-	// Putting the warning in a separate effect to avoid adding `previousWidthProp` as an effect dependency when updating width.
-	useEffect(() => {
-		if (process.env.NODE_ENV !== 'production') {
-			if (previousWidthProp !== undefined && defaultWidth !== previousWidthProp) {
-				// eslint-disable-next-line no-console
-				console.warn(
-					'Page Layout warning\n\n',
-					'The value of the `defaultWidth` prop on the `Aside` layout slot component has changed. This should not be changed after the component has been mounted.\n\n',
-					'In the future, changes to the `defaultWidth` prop will not be respected. It is only supported as a stopgap to enable migration from Nav3 to Nav4.\n\n',
-				);
-			}
-		}
-	}, [defaultWidth, previousWidthProp]);
-
-	const asideVariableWidth = `clamp(${asideWidthSlotBounds.min}, ${width}px, ${asideWidthSlotBounds.max})`;
-
-	useResizingWidthCssVarOnRootElement({
-		isEnabled: dangerouslyHoistSlotSizes,
-		panelId: asidePanelSplitterId,
-		cssVar: panelSplitterResizingVar,
-	});
-
-	return (
-		<aside
-			id={id}
-			data-layout-slot
-			aria-label={label}
-			css={styles.root}
-			className={xcss}
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
-			style={{ [asideVar]: asideVariableWidth } as CSSProperties}
-			data-testid={testId}
-			ref={ref}
-		>
-			{dangerouslyHoistSlotSizes && (
-				// ------ START UNSAFE STYLES ------
-				// These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
-				// When they aren't needed anymore we can delete them wholesale.
-				<DangerouslyHoistCssVarToDocumentRoot
-					variableName={UNSAFE_asideLayoutVar}
-					value="0px"
-					mediaQuery={media.above.md}
-					responsiveValue={`var(${panelSplitterResizingVar}, ${asideVariableWidth})`}
-				/>
-				// ------ END UNSAFE STYLES ------
-			)}
-			<PanelSplitterProvider
-				panelId={asidePanelSplitterId}
-				panelRef={ref}
-				panelWidth={width}
-				onCompleteResize={setWidth}
-				getResizeBounds={getResizeBounds}
-				resizingCssVar={panelSplitterResizingVar}
-				position="start"
-			>
-				{/**
-				 * Fixed styles are added here rather than on the `aside` container element, so that the panel splitter
-				 * component can overflow out of the `Aside` container, to increase the interactive grab area
-				 */}
-				<div css={styles.inner} data-testid={testId ? `${testId}--inner` : undefined}>
-					{children}
-				</div>
-			</PanelSplitterProvider>
-		</aside>
-	);
-}

package/src/ui/page-layout/banner.tsx

@@ -1,91 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useContext } from 'react';
-
-import { cssMap, jsx } from '@compiled/react';
-
-import type { StrictXCSSProp } from '@atlaskit/css';
-
-import { useSkipLinkInternal } from '../../context/skip-links/skip-links-context';
-
-import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
-import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
-import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from './hoist-utils';
-import { useLayoutId } from './id-utils';
-import type { CommonSlotProps } from './types';
-
-const styles = cssMap({
-	root: {
-		gridArea: 'banner',
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-		height: `var(${bannerMountedVar})`,
-		insetBlockStart: 0,
-		position: 'sticky',
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-		zIndex: localSlotLayers.banner,
-		overflow: 'hidden',
-	},
-});
-
-/**
- * The banner layout area. It will always be displayed at the top of the screen.
- *
- * Should be used to render a `Banner` component from `@atlaskit/banner`.
- */
-export function Banner({
-	children,
-	xcss,
-	// 48px has been chosen to align with the height of the Banner component from `@atlaskit/banner`.
-	height = 48,
-	skipLinkLabel = 'Banner',
-	testId,
-	id: providedId,
-}: CommonSlotProps & {
-	/**
-	 * The content of the layout area.
-	 * Should include a Banner component from `@atlaskit/banner`.
-	 */
-	children: React.ReactNode;
-	/**
-	 * Bounded style overrides.
-	 */
-	xcss?: StrictXCSSProp<'backgroundColor', never>;
-	/**
-	 * The height of the layout area.
-	 *
-	 * Defaults to 48px.
-	 */
-	height?: number;
-}) {
-	const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
-	const id = useLayoutId({ providedId });
-
-	/**
-	 * Don't show the skip link if the slot has 0 height.
-	 */
-	useSkipLinkInternal({
-		id,
-		label: skipLinkLabel,
-		isHidden: height === 0,
-	});
-
-	return (
-		/**
-		 * Intentionally not using `role="banner"` because each page should only have one `banner` landmark,
-		 * and the top bar is more suitable as the `banner` landmark.
-		 */
-		<div id={id} data-layout-slot css={styles.root} className={xcss} data-testid={testId}>
-			<HoistCssVarToLocalGrid variableName={bannerMountedVar} value={height} />
-			{dangerouslyHoistSlotSizes && (
-				// ------ START UNSAFE STYLES ------
-				// These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
-				// When they aren't needed anymore we can delete them wholesale.
-				<DangerouslyHoistCssVarToDocumentRoot variableName={UNSAFE_bannerVar} value={height} />
-				// ------ END UNSAFE STYLES ------
-			)}
-			{children}
-		</div>
-	);
-}

package/src/ui/page-layout/constants.tsx

@@ -1,56 +0,0 @@
-/**
- * These variables are shared across the different page layout slots.
- * This violates the [UI styling standard](https://atlassian.design/components/eslint-plugin-ui-styling-standard/no-imported-style-values/usage).
- * We have chosen to ignore this rule to prevent duplicating them across the different slots, and to provide a high level view of them and how they relate.
- */
-
-// These are "compressed" to discourage usage.
-export const sideNavVar = '--n_sNvw';
-export const asideVar = '--n_asDw';
-export const panelVar = '--n_pnlW';
-export const bannerMountedVar = '--n_bnrM';
-export const topNavMountedVar = '--n_tNvM';
-
-/**
- * Captures the current width of the side navigation, at all times, including during resizing.
- *
- * The standard `sideNavVar` only captures the 'committed' width, not the resizing width.
- */
-export const sideNavLiveWidthVar = '--n_sNvlw';
-
-export const sideNavPanelSplitterId = Symbol('SideNav PanelSplitter');
-export const asidePanelSplitterId = Symbol('Aside PanelSplitter');
-export const panelPanelSplitterId = Symbol('Panel PanelSplitter');
-
-// We aren't using template literals here because Compiled can't compiled them in platform ATM.
-export const contentHeightWhenFixed = `calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))`;
-export const contentInsetBlockStart = `calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))`;
-
-// We define variables as they can change their size depending on the viewport width. That isn't needed for
-// general grid item slots because, well, they just take up the size of the grid item! In this instance since
-// the UNSAFE absolutely positioned sibling isn't on the grid it needs extra layout information.
-// Note: THESE ARE THE SAME VALUES AS THE LEGACY PAGE LAYOUT.
-// WHEN WE ELIMINATE USAGE OF THOSE VARIABLES THESE CAN BE RENAMED TO BE HASHED.
-export const UNSAFE_topNavVar = '--topNavigationHeight';
-export const UNSAFE_bannerVar = '--bannerHeight';
-export const UNSAFE_sideNavLayoutVar = '--leftSidebarWidth';
-export const UNSAFE_asideLayoutVar = '--rightSidebarWidth';
-export const UNSAFE_panelLayoutVar = '--rightPanelWidth';
-
-// The following UNSAFE variables are used to absolutely position elements that aren't a child of page layout.
-// Known use cases: Legacy pages rendered inside Confluence and Jira.
-export const UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY = `calc(var(${UNSAFE_bannerVar}, 0px) + var(${UNSAFE_topNavVar}, 0px))`;
-export const UNSAFE_MAIN_INLINE_START_FOR_LEGACY_PAGES_ONLY = `var(${UNSAFE_sideNavLayoutVar}, 0px)`;
-export const UNSAFE_MAIN_INLINE_END_FOR_LEGACY_PAGES_ONLY = `calc(var(${UNSAFE_asideLayoutVar}, 0px) + var(${UNSAFE_panelLayoutVar}, 0px))`;
-
-/**
- * We define the z-indexes here so each page slot can be locally layered against each other.
- * For globally defined values such as flag, modal, etc, we can continue to
- * rely on accessing them through global means.
- */
-export const localSlotLayers = {
-	topBar: 4,
-	banner: 4,
-	sideNav: 2,
-	panelSmallViewports: 1,
-};

package/src/ui/page-layout/hoist-slot-sizes-context.tsx

@@ -1,7 +0,0 @@
-import { createContext } from 'react';
-
-/**
- * Context for whether the slot sizes are to be hoisted to the document root.
- * It is set by consumers using a prop on the page layout `Root` element.
- */
-export const DangerouslyHoistSlotSizes = createContext(false);

package/src/ui/page-layout/hoist-utils.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-
-import { type MediaQuery } from '@atlaskit/primitives/responsive';
-
-import { gridRootId } from './root';
-
-/**
- * This is not ideal and shouldn't be used by anything outside of `<Banner>` and `<TopNav>`.
- *
- * This makes the other page layout elements aware that the banner and top bar have been mounted, provides them
- * with their heights. This is needed to power the stick points of page layout elements like SideNav and Panel.
- *
- * We should clean this up once we have a better solution, such as moving the size props for banner and top bar into `Root`.
- */
-export const HoistCssVarToLocalGrid = ({
-	variableName,
-	value,
-}: {
-	variableName: string;
-	value: number;
-	// Using a global style is required for SSR, as we can't use React hooks
-	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
-}) => <style>{`#${gridRootId} { ${variableName}: ${value}px }`}</style>;
-
-const getCssStringValue = (value: string | number): string =>
-	typeof value === 'number' ? `${value}px` : value;
-
-/**
- * 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 const DangerouslyHoistCssVarToDocumentRoot = ({
-	variableName,
-	value,
-	mediaQuery,
-	responsiveValue,
-}: {
-	variableName: string;
-	value: string | number;
-	mediaQuery?: MediaQuery;
-	responsiveValue?: string | number;
-}) => {
-	/**
-	 * Note don't put multiple variables in multiple lines. eg
-	 * <style>
-	 *   {css1}
-	 *   {css2}
-	 * </style>
-	 *
-	 * React will insert an empty HTML comment in between the text in SSR.
-	 * This is not a valid tag and will break the page.
-	 * <style>foo<!-- -->bar</style>
-	 */
-	let style = `:root { ${variableName}: ${getCssStringValue(value)} }`;
-	if (mediaQuery && responsiveValue) {
-		style += ` ${mediaQuery} { :root { ${variableName}: ${getCssStringValue(responsiveValue)} } }`;
-	}
-
-	return (
-		// Using a global style is required for SSR, as we can't use React hooks
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
-		<style>{style}</style>
-	);
-};

package/src/ui/page-layout/id-utils.tsx

@@ -1,33 +0,0 @@
-import { useId } from '@atlaskit/ds-lib/use-id';
-
-// Exposing a hook as a convenience for consumers, so they don't need to import
-// from ds-lib themselves.
-/**
- * Returns a unique ID for use by layout elements and skip links.
- * You can use this for custom skip links.
- */
-export function useSkipLinkId(): string {
-	const uniqueId = useId();
-
-	return uniqueId;
-}
-
-/**
- * Returns an ID for use by the layout element and skip links.
- *
- * If the consumer has already provided an ID, it will be used instead.
- * Otherwise, a unique ID will be returned.
- */
-export function useLayoutId({
-	providedId,
-}: {
-	/**
-	 * The ID provided by the consumer. If provided, it will be used instead.
-	 */
-	providedId?: string;
-} = {}): string {
-	const uniqueId = useSkipLinkId();
-	const id = providedId ? providedId : uniqueId;
-
-	return id;
-}

package/src/ui/page-layout/main/main-sticky-header.tsx

@@ -1,45 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-
-import { cssMap, jsx } from '@compiled/react';
-
-import type { StrictXCSSProp } from '@atlaskit/css';
-
-const stickyHeaderStyles = cssMap({
-	root: {
-		position: 'sticky',
-		zIndex: 1,
-		insetBlockStart: 0,
-	},
-});
-
-/**
- * The sticky header of the main layout area.
- */
-export function MainStickyHeader({
-	children,
-	xcss,
-	testId,
-}: {
-	/**
-	 * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
-	 */
-	testId?: string;
-	/**
-	 * The content of the layout area.
-	 */
-	children?: React.ReactNode;
-	/**
-	 * Bounded style overrides.
-	 */
-	xcss?: StrictXCSSProp<'backgroundColor', never>;
-}) {
-	return (
-		<div data-testid={testId} className={xcss} css={stickyHeaderStyles.root}>
-			{children}
-		</div>
-	);
-}

package/src/ui/page-layout/main/main.tsx

@@ -1,93 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- * @jsxFrag
- */
-import { Fragment } from 'react';
-
-import { cssMap, jsx } from '@compiled/react';
-
-import type { StrictXCSSProp } from '@atlaskit/css';
-import { fg } from '@atlaskit/platform-feature-flags';
-
-import { useSkipLink } from '../../../context/skip-links/skip-links-context';
-import { contentHeightWhenFixed, contentInsetBlockStart } from '../constants';
-import { useLayoutId } from '../id-utils';
-import type { CommonSlotProps } from '../types';
-
-const mainElementStyles = cssMap({
-	root: {
-		gridArea: 'main',
-		isolation: 'isolate',
-		// This sets the sticky point to be just below top bar + banner. It's needed to ensure the stick
-		// point is exactly where this element is rendered to with no wiggle room. Unfortunately the CSS
-		// spec for sticky doesn't support "stick to where I'm initially rendered" so we need to tell it.
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-		insetBlockStart: contentInsetBlockStart,
-		overflow: 'auto',
-		'@media (min-width: 64rem)': {
-			isolation: 'auto',
-			// Height is set so it takes up all of the available viewport space minus top bar + banner.
-			// This is only set on larger viewports meaning stickiness only occurs on them.
-			// On small viewports it is not sticky.
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-			height: contentHeightWhenFixed,
-			position: 'sticky',
-		},
-	},
-	containPaint: {
-		// Clips children that go outside of the slot.
-		// This is effectively already the case due to Main having the lowest z-index of the slots + having its own stacking context.
-		contain: 'paint',
-	},
-});
-
-/**
- * Use the Main area for the main page content. It has a fluid width and will expand to fill available space.
- */
-export function Main({
-	children,
-	xcss,
-	skipLinkLabel = 'Main Content',
-	testId,
-	id: providedId,
-}: CommonSlotProps & {
-	/**
-	 * The content of the layout area.
-	 * This is where you should put the main content of your page.
-	 */
-	children: React.ReactNode;
-	/**
-	 * Bounded style overrides.
-	 */
-	xcss?: StrictXCSSProp<'backgroundColor', never>;
-}) {
-	const id = useLayoutId({ providedId });
-
-	useSkipLink(id, skipLinkLabel);
-
-	return (
-		<Fragment>
-			<div
-				id={id}
-				data-layout-slot
-				className={xcss}
-				role="main"
-				css={[
-					mainElementStyles.root,
-					/**
-					 * When enabled the Main slot will:
-					 *
-					 * - clip any children that extend outside (effectively what happened before anyway due to z-indexing)
-					 * - become the containing block for absolute and fixed position descendants
-					 * - act as the boundary for popups, so they will flip and shift to stay inside of Main
-					 */
-					fg('platform_dst_nav4_layering_in_main_slot_fixes') && mainElementStyles.containPaint,
-				]}
-				data-testid={testId}
-			>
-				{children}
-			</div>
-		</Fragment>
-	);
-}

package/src/ui/page-layout/panel-splitter/context.tsx

@@ -1,60 +0,0 @@
-import { createContext, type MutableRefObject } from 'react';
-
-import { type ResizeBounds } from './types';
-
-// Disabling the rule to allow for `Type` suffix, to differentiate from the Context object.
-// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
-export type PanelSplitterContextType = {
-	/**
-	 * An optional identifier for the panel splitter, which is attached to the `pragmatic-drag-and-drop` drag data.
-	 */
-	panelId?: symbol;
-	/**
-	 * A ref to the page layout element that will be resized by the splitter.
-	 */
-	panelRef: MutableRefObject<HTMLDivElement | null>;
-	/**
-	 * The "saved" width of the panel element. Used to calculate the new width of the panel when dragging.
-	 */
-	panelWidth: number;
-	/**
-	 * Called when the user finishes resizing the panel. It should update the width of the panel element.
-	 */
-	onCompleteResize: (newWidth: number) => void;
-	/**
-	 * The minimum and maximum bounds for resizing the panel.
-	 * The bounds can be provided as `px` or `vw` values.
-	 */
-	getResizeBounds: () => ResizeBounds;
-	/**
-	 * A ref to the portal element where the panel splitter will be rendered.
-	 * Internally set by the PanelSplitterProvider.
-	 * Used to render the panel splitter outside of an overflow container.
-	 */
-	portalRef: MutableRefObject<HTMLDivElement | null>;
-	/**
-	 * The CSS variable that will be set on the panel element to temporarily resize it while dragging the splitter
-	 */
-	resizingCssVar: string;
-	/**
-	 * The side of the panel/element that the splitter element is positioned on. Uses logical values to support right-to-left languages.
-	 *
-	 * Defaults to `start`.
-	 *
-	 * For left-to-right languages, `start` is the left side and `end` is the right side.
-	 */
-	position: 'start' | 'end';
-
-	/**
-	 * Whether the panel splitter is enabled and should be rendered.
-	 *
-	 * Defaults to `true`.
-	 * If `false`, the panel splitter will not be rendered.
-	 */
-	isEnabled?: boolean;
-};
-
-/**
- * Context for the panel splitter. Only internally exported.
- */
-export const PanelSplitterContext = createContext<PanelSplitterContextType | null>(null);

package/src/ui/page-layout/panel-splitter/convert-resize-bound-to-pixels.tsx

@@ -1,20 +0,0 @@
-import type { ResizeBound } from './types';
-
-/**
- * Resize bounds can either be provided in `vw` or `px` units. This function will convert the value into pixels.
- *
- * It accesses the `window` object to get the viewport width, so should only be used in the browser.
- */
-export function convertResizeBoundToPixels(resizeBound: ResizeBound): number {
-	if (resizeBound.endsWith('vw')) {
-		// Max width was provided in `vw` units, so is relative to the viewport width.
-		// e.g. 50vw = 50% of the viewport width.
-		// `parseInt` will remove the `vw` suffix.
-		const maxWidthFraction = parseInt(resizeBound) / 100;
-		return Math.floor(window.innerWidth * maxWidthFraction);
-	}
-
-	// Max width was provided in `px` units, so we can parse it directly.
-	// `parseInt` will remove the `px` suffix.
-	return Math.floor(parseInt(resizeBound));
-}