@atlaskit/navigation-system 0.166.0

package/dist/es2019/ui/page-layout/panel-splitter/keyboard-resize-manager.js

@@ -0,0 +1,79 @@
+/**
+ * The debounce time for the PanelSplitter resize callback functions.
+ *
+ * - For `onResizeStart`, it will call the callback immediately, but not
+ * again until the user stops resizing and this wait time has passed.
+ * - For `onResizeEnd`, it will call the callback only after this time has
+ * passed since the last resize event.
+ */
+const resizeCallbackDebounceTimeMs = 500;
+
+/**
+ * Returns an instance of a state machine manager for keyboard resizing.
+ * It handles calling the `onResizeStart` and `onResizeEnd` callbacks appropriately, as the user "starts" and "finishes" resizing
+ * using the keyboard, to prevent calling them on every keydown.
+ *
+ * - `onResizeStart` is called immediately when the user starts resizing
+ * - `onResizeEnd` is called after a wait time when the user stops resizing.
+ */
+export function createKeyboardResizeManager({
+  onResizeStart,
+  onResizeEnd
+}) {
+  let resizingState = {
+    type: 'idle'
+  };
+
+  /**
+   * Starts a timer to reset the state to idle and call `onResizeEnd` after a wait time.
+   */
+  function startResizeEndTimer({
+    initialWidth,
+    finalWidth
+  }) {
+    const markResizeAsEndedTimeout = setTimeout(() => {
+      onResizeEnd({
+        initialWidth,
+        finalWidth
+      });
+      resizingState = {
+        type: 'idle'
+      };
+    }, resizeCallbackDebounceTimeMs);
+    resizingState = {
+      type: 'resizing',
+      initialWidth,
+      abort() {
+        clearTimeout(markResizeAsEndedTimeout);
+      }
+    };
+  }
+  function onResize({
+    initialWidth,
+    finalWidth
+  }) {
+    if (resizingState.type === 'idle') {
+      // If the state was idle, this counts as a resize start event.
+      onResizeStart({
+        initialWidth
+      });
+      startResizeEndTimer({
+        initialWidth,
+        finalWidth
+      });
+      return;
+    }
+    if (resizingState.type === 'resizing') {
+      // If the state was already resizing, clear the existing timeout and start a new one.
+      resizingState.abort();
+      startResizeEndTimer({
+        initialWidth: resizingState.initialWidth,
+        finalWidth
+      });
+      return;
+    }
+  }
+  return {
+    onResize
+  };
+}

package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.compiled.css

@@ -0,0 +1,34 @@
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._152tidpf{inset-block-start:0}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1bsbjfq9{width:var(--ds-border-width-indicator,3px)}
+._1bsbl52n{width:17px}
+._1e021v6z{inset-inline-start:7px}
+._1e02zeo2{inset-inline-start:-9px}
+._1e0c1ule{display:block}
+._1e0cglyw{display:none}
+._1lww5cps{transition-delay:0ms}
+._1oec1yx9{transition-duration:.1s}
+._1pbykb7n{z-index:1}
+._1qu2glyw{outline-style:none}
+._4t3i1osq{height:100%}
+._bfhk1j28{background-color:transparent}
+._bfhk1r31{background-color:currentColor}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._k8m01ylx{transition-property:color}
+._kqswstnw{position:absolute}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._rjxpftgi{inset-inline-end:8px}
+._syaz1j28{color:transparent}
+._syaz1kw7{color:inherit}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._u7coidpf{inset-block-end:0}
+._1cg4fnf5:focus-within, ._le1bfnf5:hover{transition-duration:.2s}
+._1dr21ylx:focus-within, ._1s5z1ylx:hover{transition-property:color}
+._vp7gaqb7:focus-within, ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
+._1gavfnf5:hover{transition-delay:.2s}
+._d0aluf7j:hover{cursor:ew-resize}
+._1gglglyw:active{transition:none}
+._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}
+@media (min-width:48rem){._181n1ule{display:block}}

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

@@ -0,0 +1,318 @@
+/* panel-splitter.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./panel-splitter.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import { createPortal } from 'react-dom';
+import invariant from 'tiny-invariant';
+import { useId } from '@atlaskit/ds-lib/use-id';
+import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
+import { useOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { PanelSplitterContext } from './context';
+import { convertResizeBoundToPixels } from './convert-resize-bound-to-pixels';
+import { getPercentageWithinPixelBounds } from './get-percentage-within-pixel-bounds';
+import { getPixelWidth, getWidthFromDragLocation } from './get-width';
+import { createKeyboardResizeManager } from './keyboard-resize-manager';
+import { useTextDirection } from './use-text-direction';
+const containerStyles = {
+  root: "_12ji1r31 _1qu2glyw _12y31o36 _1e0cglyw _kqswstnw _u7coidpf _152tidpf _1pbykb7n _181n1ule",
+  positionEnd: "_rjxpftgi",
+  positionStart: "_1e02zeo2"
+};
+const grabAreaStyles = {
+  root: "_1bsbl52n _4t3i1osq _kqswstnw _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7gaqb7 _30l3aqb7 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h16c2"
+};
+const lineStyles = {
+  root: "_kqswstnw _1e0c1ule _1bsbjfq9 _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
+};
+const panelSplitterDragDataSymbol = Symbol('panel-splitter-drag-data');
+function signPanelSplitterDragData(data) {
+  return {
+    ...data,
+    [panelSplitterDragDataSymbol]: true
+  };
+}
+export function isPanelSplitterDragData(data) {
+  return data[panelSplitterDragDataSymbol] === true;
+}
+const PortaledPanelSplitter = ({
+  label,
+  onResizeStart,
+  onResizeEnd,
+  testId
+}) => {
+  const splitterRef = useRef(null);
+  const panelSplitterContext = useContext(PanelSplitterContext);
+  invariant(panelSplitterContext, 'Panel splitter context must be set');
+  const {
+    panelId,
+    panelWidth,
+    onCompleteResize,
+    getResizeBounds,
+    panelRef,
+    resizingCssVar,
+    portalRef,
+    position,
+    isEnabled
+  } = panelSplitterContext;
+  invariant(portalRef.current, 'Portal ref must be set');
+  const direction = useTextDirection(portalRef.current);
+  const labelId = useId();
+  // Separate state used for the input range width to remove the UI's dependency on the "persisted" layout state value being updated
+  const [rangeInputValue, setRangeInputValue] = useState(panelWidth);
+
+  /**
+   * We are using state to store the resize bounds _converted into pixel units_, so that we can update them when the window is resized.
+   * Otherwise they can become out of sync with the actual viewport size, and cause a broken experience (inaccurate width percentage)
+   * when the user tries to resize using the keyboard.
+   */
+  const [rangeInputBounds, setRangeInputBounds] = useState({
+    // Using placeholder values here for the initial render. These will be calculated and updated when the range input is focused.
+    min: 200,
+    max: 500
+  });
+  const openLayerObserver = useOpenLayerObserver();
+  useEffect(() => {
+    if (!isEnabled) {
+      return;
+    }
+    const splitter = splitterRef.current;
+    invariant(splitter, 'Splitter ref must be set');
+    return combine(blockDraggingToIFrames({
+      element: splitter
+    }), draggable({
+      element: splitter,
+      onGenerateDragPreview: ({
+        nativeSetDragImage
+      }) => {
+        // We will be moving the line to indicate a drag. We can disable the native drag preview
+        disableNativeDragPreview({
+          nativeSetDragImage
+        });
+        // We don't want any native drop animation for when the user does not drop on a drop target. We want the drag to finish immediately
+        preventUnhandled.start();
+      },
+      getInitialData() {
+        invariant(panelRef.current, 'Panel ref must be set');
+        const initialWidth = getPixelWidth(panelRef.current);
+
+        /**
+         * The drag calculations require the actual computed width of the element
+         * For example, if the panel has loaded with a width of 2000px, but the max bound is 1000px and is visually 1000px (due to the CSS `clamp()`),
+         * the drag calculations should use the actual width of 1000px, not the width in state of 2000px.
+         */
+        return signPanelSplitterDragData({
+          panelId,
+          initialWidth,
+          resizingWidth: `${initialWidth}px`,
+          resizeBounds: getResizeBounds()
+        });
+      },
+      onDragStart({
+        source
+      }) {
+        invariant(isPanelSplitterDragData(source.data));
+        onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart({
+          initialWidth: source.data.initialWidth
+        });
+
+        // Close any open layers when the user starts resizing
+        openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
+      },
+      onDrag({
+        location,
+        source
+      }) {
+        var _panelRef$current;
+        invariant(isPanelSplitterDragData(source.data));
+        const {
+          initialWidth,
+          resizeBounds
+        } = source.data;
+
+        /**
+         * How wide the element would be if there were no width constraints,
+         * based on the pointer's position.
+         */
+        const targetWidth = getWidthFromDragLocation({
+          initialWidth,
+          location,
+          direction,
+          position
+        });
+        const resizingWidth = `clamp(${resizeBounds.min}, ${targetWidth}px, ${resizeBounds.max})`;
+        (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.style.setProperty(resizingCssVar, resizingWidth);
+        source.data.resizingWidth = resizingWidth;
+      },
+      onDrop({
+        source
+      }) {
+        invariant(isPanelSplitterDragData(source.data));
+        preventUnhandled.stop();
+        invariant(panelRef.current, 'Panel ref must be set');
+        invariant(isPanelSplitterDragData(source.data));
+        const finalWidth = getPixelWidth(panelRef.current);
+        onCompleteResize(finalWidth);
+        onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
+          initialWidth: source.data.initialWidth,
+          finalWidth
+        });
+        panelRef.current.style.removeProperty(resizingCssVar);
+      }
+    }));
+  }, [onCompleteResize, onResizeStart, onResizeEnd, panelRef, resizingCssVar, panelWidth, direction, position, isEnabled, openLayerObserver, panelId, getResizeBounds]);
+  const onResizeStartStableRef = useStableRef(onResizeStart);
+  const onResizeEndStableRef = useStableRef(onResizeEnd);
+  const [keyboardResizeManager] = useState(() => createKeyboardResizeManager({
+    onResizeStart: (...args) => {
+      var _onResizeStartStableR;
+      // Close any open layers when the user starts resizing with keyboard
+      openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
+      (_onResizeStartStableR = onResizeStartStableRef.current) === null || _onResizeStartStableR === void 0 ? void 0 : _onResizeStartStableR.call(onResizeStartStableRef, ...args);
+    },
+    onResizeEnd: (...args) => {
+      var _onResizeEndStableRef;
+      return (_onResizeEndStableRef = onResizeEndStableRef.current) === null || _onResizeEndStableRef === void 0 ? void 0 : _onResizeEndStableRef.call(onResizeEndStableRef, ...args);
+    }
+  }));
+  const handleSliderInputChange = useCallback(event => {
+    const value = parseInt(event.target.value);
+    setRangeInputValue(value);
+
+    /**
+     * We are intentionally _not_ debouncing `onCompleteResize` as we want it to be called anytime the user changes the range input value.
+     * It is an internal-only callback - it's provided by `PanelSplitterProvider`, and used by layout slots to update their layout width state.
+     */
+    onCompleteResize(value);
+    keyboardResizeManager.onResize({
+      initialWidth: panelWidth,
+      finalWidth: value
+    });
+  }, [onCompleteResize, panelWidth, keyboardResizeManager]);
+  const resizeEventListenerCleanupFn = useRef(null);
+  const handleSliderFocus = useCallback(() => {
+    var _resizeEventListenerC;
+    /**
+     * We are only updating the range input's properties when the element is focused, as a performance optimisation.
+     * It isn't necessary to recalculate these values until the element is going to be used.
+     */
+
+    // Clean up any left over listeners in case `focus` was triggered again without `blur`.
+    (_resizeEventListenerC = resizeEventListenerCleanupFn.current) === null || _resizeEventListenerC === void 0 ? void 0 : _resizeEventListenerC.call(resizeEventListenerCleanupFn);
+
+    // Update the range input value to match the current panel width.
+    setRangeInputValue(panelWidth);
+    const resizeBounds = getResizeBounds();
+
+    // Update the range input bounds to ensure they are accurate (in case the viewport was previously resized)
+    setRangeInputBounds({
+      min: convertResizeBoundToPixels(resizeBounds.min),
+      max: convertResizeBoundToPixels(resizeBounds.max)
+    });
+
+    /**
+     * _While the slider element is focused_, add a window resize event listener to update the range input bounds
+     * when the window is resized. This is needed to ensure the min and max widths accurately reflect the viewport
+     * size - in case they are provided in vw units.
+     *
+     * This listener is cleaned up when the element is blurred.
+     */
+    resizeEventListenerCleanupFn.current = bind(window, {
+      type: 'resize',
+      listener: function updateState() {
+        const resizeBounds = getResizeBounds();
+        setRangeInputBounds({
+          min: convertResizeBoundToPixels(resizeBounds.min),
+          max: convertResizeBoundToPixels(resizeBounds.max)
+        });
+      }
+    });
+  }, [panelWidth, getResizeBounds]);
+  const handleSliderBlur = useCallback(() => {
+    var _resizeEventListenerC2;
+    // Remove the resize event listener when the range input is blurred.
+    (_resizeEventListenerC2 = resizeEventListenerCleanupFn.current) === null || _resizeEventListenerC2 === void 0 ? void 0 : _resizeEventListenerC2.call(resizeEventListenerCleanupFn);
+  }, []);
+  useEffect(() => {
+    return function cleanup() {
+      var _resizeEventListenerC3;
+      // Cleanup the resize event listener when the component is unmounted.
+      (_resizeEventListenerC3 = resizeEventListenerCleanupFn.current) === null || _resizeEventListenerC3 === void 0 ? void 0 : _resizeEventListenerC3.call(resizeEventListenerCleanupFn);
+    };
+  }, []);
+  const ariaValueText = useMemo(() => `${getPercentageWithinPixelBounds({
+    currentWidth: rangeInputValue,
+    resizeBounds: rangeInputBounds
+  })}% width`, [rangeInputValue, rangeInputBounds]);
+  if (!isEnabled) {
+    return null;
+  }
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId ? `${testId}-container` : undefined,
+    className: ax([containerStyles.root, position === 'start' && containerStyles.positionStart, position === 'end' && containerStyles.positionEnd])
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: splitterRef,
+    "data-testid": testId,
+    className: ax([grabAreaStyles.root])
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    value: rangeInputValue,
+    step: 20,
+    min: rangeInputBounds.min,
+    max: rangeInputBounds.max,
+    "aria-valuetext": ariaValueText,
+    "aria-labelledby": labelId,
+    onChange: handleSliderInputChange,
+    onFocus: handleSliderFocus,
+    onBlur: handleSliderBlur
+  }), /*#__PURE__*/React.createElement("span", {
+    id: labelId
+  }, label)), /*#__PURE__*/React.createElement("span", {
+    className: ax([lineStyles.root])
+  }))), portalRef.current);
+};
+
+// Ensures that the component is only rendered on a client. Uses a `useEffect`, which is not run on servers.
+const ClientOnly = ({
+  children
+}) => {
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  return /*#__PURE__*/React.createElement(Fragment, null, hasMounted ? children : null);
+};
+
+/**
+ * _PanelSplitter_
+ *
+ * A component that allows the user to resize a layout area.
+ * It can be used within layout areas like `SideNav`, `Panel`, and `Aside`. The layout area component should
+ * provide the context for it using `<PanelSplitterProvider>`.
+ *
+ * Example usage in products:
+ * ```tsx
+ * <SideNav>
+ *   {/* other side nav content *}
+ *   <PanelSplitter label="Resize Side Nav" />
+ * </SideNav>
+ * ```
+ */
+export const PanelSplitter = ({
+  label,
+  onResizeStart,
+  onResizeEnd,
+  testId
+}) => /*#__PURE__*/React.createElement(ClientOnly, null, /*#__PURE__*/React.createElement(PortaledPanelSplitter, {
+  label: label,
+  onResizeStart: onResizeStart,
+  onResizeEnd: onResizeEnd,
+  testId: testId
+}));

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

@@ -0,0 +1,36 @@
+import React, { Fragment, useMemo, useRef } from 'react';
+import { PanelSplitterContext } from './context';
+/**
+ * Provides the context required for the panel splitter to work within a page layout slot.
+ *
+ * Should be used in the layout area components, e.g. SideNav, Aside etc, as opposed to products.
+ */
+export const PanelSplitterProvider = ({
+  panelId,
+  panelWidth,
+  onCompleteResize,
+  getResizeBounds,
+  resizingCssVar,
+  panelRef,
+  position = 'end',
+  isEnabled = true,
+  children
+}) => {
+  const portalRef = useRef(null);
+  const context = useMemo(() => ({
+    panelId,
+    panelWidth,
+    onCompleteResize,
+    getResizeBounds,
+    portalRef,
+    resizingCssVar,
+    position,
+    panelRef,
+    isEnabled
+  }), [panelId, panelWidth, onCompleteResize, getResizeBounds, resizingCssVar, position, panelRef, isEnabled]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PanelSplitterContext.Provider, {
+    value: context
+  }, children), /*#__PURE__*/React.createElement("div", {
+    ref: portalRef
+  }));
+};

package/dist/es2019/ui/page-layout/panel-splitter/use-text-direction.js

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+
+/**
+ * Returns the direction of the element's text.
+ *
+ * Because any element within the hierarchy can have the [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
+ * set, we can't simply check the attribute on one element, the root document element or the current element's parent.
+ *
+ * Instead, we are using the [CSS `direction` property](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) to determine the
+ * current computed direction value.
+ */
+export const useTextDirection = element => useMemo(() => {
+  const {
+    direction
+  } = window.getComputedStyle(element);
+  return direction === 'rtl' ? 'rtl' : 'ltr';
+}, [element]);

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

@@ -0,0 +1,19 @@
+
+._nd5l1b6c{grid-area:main/aside/aside/aside}
+._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
+._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
+._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._18m91wug{overflow-y:auto}
+._1bsb1adv{width:min(90%,365px)}
+._1bsb1dxx{width:min(90%,var(--minWidth))}
+._1e0cglyw{display:none}
+._1pbykb7n{z-index:1}
+._1reo1wug{overflow-x:auto}
+._4t3i1osq{height:100%}
+._4t3ieqxy{height:calc(100vh - var(--n_bnrM, 0px) - var(--n_tNvM, 0px))}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._kqsw1if8{position:sticky}
+._vchhusvi{box-sizing:border-box}
+@media (min-width:48rem){._14b54rrg{width:var(--n_pnlRsz,var(--n_pnlW))}}
+@media (min-width:64rem){._1w6ezgxb{border-inline-start:1px solid var(--ds-border,#091e4224)}._scbpglyw{box-shadow:none}._4ap3vuon{background-color:var(--ds-surface,#fff)}}
+@media (min-width:90rem){._1dhy1c6w{grid-area:panel}._9sns1wug{z-index:auto}}