@atlaskit/navigation-system 0.166.0

package/dist/es2019/ui/menu-section/menu-section-heading.compiled.css

@@ -0,0 +1,4 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}

package/dist/es2019/ui/menu-section/menu-section-heading.js

@@ -0,0 +1,23 @@
+/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./menu-section-heading.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useMenuSectionContext } from './menu-section-context';
+const styles = {
+  root: "_11c81vhk _1rjcu2gc _syaz131l _bozg12x7"
+};
+
+/**
+ * __MenuSectionHeading__
+ *
+ * The label for the menu section group.
+ */
+export const MenuSectionHeading = ({
+  children
+}) => {
+  const id = useMenuSectionContext();
+  return /*#__PURE__*/React.createElement("h2", {
+    id: `${id}-heading`,
+    className: ax([styles.root])
+  }, children);
+};

package/dist/es2019/ui/menu-section/menu-section.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useId } from '@atlaskit/ds-lib/use-id';
+import { MenuListItem } from '../menu-item/menu-list-item';
+import { MenuSectionContext } from './menu-section-context';
+/**
+ * __MenuSection__
+ *
+ * A composable component for grouping menu items, along with a heading (`MenuSectionHeading`) and a divider (`Divider`).
+ *
+ * Usage example:
+ * ```tsx
+ * <MenuSection>
+ *   <MenuSectionHeading>Section heading</MenuSectionHeading>
+ *   <MenuList>
+ *     <MenuItem>Item 1</MenuItem>
+ *     <MenuItem>Item 2</MenuItem>
+ *   </MenuList>
+ *   <Divider />
+ * </MenuSection>
+ * ```
+ */
+export const MenuSection = ({
+  children,
+  testId,
+  isMenuListItem = false
+}) => {
+  const id = useId();
+  const content = /*#__PURE__*/React.createElement(MenuSectionContext.Provider, {
+    value: id
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "group",
+    "aria-labelledby": `${id}-heading`
+  }, children));
+  if (isMenuListItem) {
+    return /*#__PURE__*/React.createElement(MenuListItem, {
+      testId: testId
+    }, content);
+  }
+
+  // Legacy. isMenuListItem should become default.
+  return content;
+};

package/dist/es2019/ui/page-layout/aside.compiled.css

@@ -0,0 +1,8 @@
+
+._nd5lns35{grid-area:aside}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._18m91wug{overflow-y:auto}
+._1reo1wug{overflow-x:auto}
+._4t3i1osq{height:100%}
+._kqswh2mm{position:relative}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:64rem){._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}._glte1kzp{width:var(--n_asdRsz,var(--n_asDw))}._ndwch9n0{justify-self:end}}

package/dist/es2019/ui/page-layout/aside.js

@@ -0,0 +1,145 @@
+/* aside.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./aside.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
+import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+import { fg } from '@atlaskit/platform-feature-flags';
+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 { 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 = {
+  min: '0px',
+  max: '50vw'
+};
+const asideWidthResizeBounds = {
+  min: '120px',
+  max: '50vw'
+};
+function getResizeBounds() {
+  return asideWidthResizeBounds;
+}
+const styles = {
+  root: "_nd5lns35 _vchhusvi _kqswh2mm _glte1kzp _ndwch9n0",
+  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8",
+  fullHeight: "_4t3i1osq"
+};
+
+/**
+ * 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,
+  isFixed: isFixedProp,
+  defaultWidth = 330,
+  label = 'Aside',
+  skipLinkLabel = label,
+  testId,
+  id: providedId
+}) {
+  const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
+  const id = useLayoutId({
+    providedId
+  });
+  const isFixed = fg('platform_dst_nav4_disable_is_fixed_prop') ? true : isFixedProp;
+
+  /**
+   * 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(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 && fg('platform_design_system_nav4_live_resizing_css_vars'),
+    panelId: asidePanelSplitterId,
+    cssVar: panelSplitterResizingVar
+  });
+  return /*#__PURE__*/React.createElement("aside", {
+    id: id,
+    "data-layout-slot": true,
+    "aria-label": label,
+    className: ax([styles.root, xcss])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
+    ,
+    style: {
+      [asideVar]: asideVariableWidth
+    },
+    "data-testid": testId,
+    ref: ref
+  }, dangerouslyHoistSlotSizes &&
+  /*#__PURE__*/
+  // ------ 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.
+  React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: UNSAFE_asideLayoutVar,
+    value: "0px",
+    mediaQuery: media.above.md,
+    responsiveValue: fg('platform_design_system_nav4_live_resizing_css_vars') ? `var(${panelSplitterResizingVar}, ${asideVariableWidth})` : asideVariableWidth
+  })
+  // ------ END UNSAFE STYLES ------
+  , /*#__PURE__*/React.createElement(PanelSplitterProvider, {
+    panelId: asidePanelSplitterId,
+    panelRef: ref,
+    panelWidth: width,
+    onCompleteResize: setWidth,
+    getResizeBounds: getResizeBounds,
+    resizingCssVar: panelSplitterResizingVar,
+    position: "start"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId ? `${testId}--inner` : undefined,
+    className: ax([styles.fullHeight, isFixed && styles.fixedContentArea])
+  }, children)));
+}

package/dist/es2019/ui/page-layout/banner.compiled.css

@@ -0,0 +1,7 @@
+
+._nd5ldkfm{grid-area:banner}._152tidpf{inset-block-start:0}
+._18m915vq{overflow-y:hidden}
+._1pbyegat{z-index:4}
+._1reo15vq{overflow-x:hidden}
+._4t3iutvi{height:var(--n_bnrM)}
+._kqsw1if8{position:sticky}

package/dist/es2019/ui/page-layout/banner.js

@@ -0,0 +1,62 @@
+/* banner.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./banner.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+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';
+const styles = {
+  root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat"
+};
+
+/**
+ * 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 = fg('platform_dst_nav4_banner_default_height') ? 48 : 64,
+  skipLinkLabel = 'Banner',
+  testId,
+  id: providedId
+}) {
+  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 /*#__PURE__*/React.createElement("div", {
+    id: id,
+    "data-layout-slot": true,
+    className: ax([styles.root, xcss]),
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
+    variableName: bannerMountedVar,
+    value: height
+  }), dangerouslyHoistSlotSizes &&
+  /*#__PURE__*/
+  // ------ 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.
+  React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
+    variableName: UNSAFE_bannerVar,
+    value: height
+  })
+  // ------ END UNSAFE STYLES ------
+  , children);
+}

package/dist/es2019/ui/page-layout/constants.js

@@ -0,0 +1,55 @@
+/**
+ * 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/dist/es2019/ui/page-layout/hoist-slot-sizes-context.js

@@ -0,0 +1,7 @@
+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 = /*#__PURE__*/createContext(false);

package/dist/es2019/ui/page-layout/hoist-utils.js

@@ -0,0 +1,49 @@
+import React from 'react';
+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
+}) => /*#__PURE__*/React.createElement("style", null, `#${gridRootId} { ${variableName}: ${value}px }`);
+const getCssStringValue = value => 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
+}) => {
+  /**
+   * 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 (
+    /*#__PURE__*/
+    // 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
+    React.createElement("style", null, style)
+  );
+};

package/dist/es2019/ui/page-layout/id-utils.js

@@ -0,0 +1,26 @@
+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() {
+  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
+} = {}) {
+  const uniqueId = useSkipLinkId();
+  const id = providedId ? providedId : uniqueId;
+  return id;
+}

package/dist/es2019/ui/page-layout/main/main-sticky-context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+/**
+ * Context for whether the main slot is sticky.
+ */
+export const MainStickyContext = /*#__PURE__*/createContext(false);

package/dist/es2019/ui/page-layout/main/main-sticky-header.compiled.css

@@ -0,0 +1,4 @@
+._152tidpf{inset-block-start:0}
+._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._1pbykb7n{z-index:1}
+._kqsw1if8{position:sticky}

package/dist/es2019/ui/page-layout/main/main-sticky-header.js

@@ -0,0 +1,26 @@
+/* main-sticky-header.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./main-sticky-header.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useContext } from 'react';
+import { MainStickyContext } from './main-sticky-context';
+const contentInsetBlockStart = `calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))`;
+const stickyHeaderStyles = {
+  root: "_kqsw1if8 _1pbykb7n",
+  stickyInMain: "_152tidpf",
+  stickyInBody: "_152timx3"
+};
+
+/**
+ * The sticky header of the main layout area.
+ */
+export function MainStickyHeader({
+  children,
+  xcss,
+  testId
+}) {
+  const isMainFixed = useContext(MainStickyContext);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax([stickyHeaderStyles.root, isMainFixed && stickyHeaderStyles.stickyInMain, !isMainFixed && stickyHeaderStyles.stickyInBody, xcss])
+  }, children);
+}

package/dist/es2019/ui/page-layout/main/main.compiled.css

@@ -0,0 +1,6 @@
+
+._nd5l1gzg{grid-area:main}._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._18m91wug{overflow-y:auto}
+._19121cl4{isolation:isolate}
+._1reo1wug{overflow-x:auto}
+@media (min-width:64rem){._165teqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}._13wn1if8{position:sticky}._qwfh1wug{isolation:auto}}

package/dist/es2019/ui/page-layout/main/main.js

@@ -0,0 +1,41 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./main.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment } from 'react';
+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 { MainStickyContext } from './main-sticky-context';
+const mainElementStyles = {
+  root: "_nd5l1gzg _19121cl4 _qwfh1wug",
+  fixedContentArea: "_1reo1wug _18m91wug _152timx3 _165teqxy _13wn1if8"
+};
+
+/**
+ * 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,
+  isFixed: isFixedProp,
+  xcss,
+  skipLinkLabel = 'Main Content',
+  testId,
+  id: providedId
+}) {
+  const id = useLayoutId({
+    providedId
+  });
+  const isFixed = fg('platform_dst_nav4_disable_is_fixed_prop') ? true : isFixedProp;
+  useSkipLink(id, skipLinkLabel);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    "data-layout-slot": true,
+    className: ax([mainElementStyles.root, isFixed && mainElementStyles.fixedContentArea, xcss]),
+    role: "main",
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(MainStickyContext.Provider, {
+    value: Boolean(isFixed)
+  }, children)));
+}

package/dist/es2019/ui/page-layout/panel-splitter/context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+// Disabling the rule to allow for `Type` suffix, to differentiate from the Context object.
+// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
+
+/**
+ * Context for the panel splitter. Only internally exported.
+ */
+export const PanelSplitterContext = /*#__PURE__*/createContext(null);

package/dist/es2019/ui/page-layout/panel-splitter/convert-resize-bound-to-pixels.js

@@ -0,0 +1,18 @@
+/**
+ * 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) {
+  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));
+}

package/dist/es2019/ui/page-layout/panel-splitter/get-percentage-within-pixel-bounds.js

@@ -0,0 +1,27 @@
+/**
+ * Returns the percentage of the current width within the resize bounds.
+ * It expects the resize bounds to already have been converted into numeric values, in pixel units.
+ *
+ * The return value is clamped between 0 and 100. This is to prevent the screen reader text (aria-valuetext)
+ * from announcing an out-of-bounds percentage when the user is resizing the viewport.
+ *
+ * Examples:
+ * - if the current width is 200px, and the resize bounds are 100px and 300px,
+ * the percentage is 50%, and the function will return the number 50.
+ * - if the current value is 400, and the resize bounds are 100 and 300, the
+ * "percentage" is 100% and the function will return the number 100.
+ */
+export function getPercentageWithinPixelBounds({
+  currentWidth,
+  resizeBounds
+}) {
+  const resizeRange = resizeBounds.max - resizeBounds.min;
+  const widthAsPercentage = (currentWidth - resizeBounds.min) / resizeRange * 100;
+  if (widthAsPercentage < 0) {
+    return 0;
+  }
+  if (widthAsPercentage > 100) {
+    return 100;
+  }
+  return Math.floor(widthAsPercentage);
+}

package/dist/es2019/ui/page-layout/panel-splitter/get-width.js

@@ -0,0 +1,27 @@
+export const getWidthFromDragLocation = ({
+  initialWidth,
+  location,
+  direction,
+  position
+}) => {
+  const diffX = location.current.input.clientX - location.initial.input.clientX;
+  // Resize line is positioned at the inline-end (right) of the element.
+  // If the direction is left-to-right, the width will increase when the mouse is moved to the right, and vice versa.
+  if (position === 'end') {
+    return direction === 'ltr' ? initialWidth + diffX : initialWidth - diffX;
+  }
+
+  // Resize line is positioned at the inline-start (left) of the element.
+  // If the direction is left-to-right, the width will decrease when the mouse is moved to the right, and vice versa.
+  return direction === 'ltr' ? initialWidth - diffX : initialWidth + diffX;
+};
+
+/**
+ * Returns the computed width of an element in pixels.
+ */
+export const getPixelWidth = element => {
+  const {
+    width
+  } = window.getComputedStyle(element);
+  return parseInt(width);
+};