@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
197 lines (195 loc) • 10.9 kB
JavaScript
/* local-panel-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./local-panel-surface.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { useCallback, useContext, useMemo, useRef } from 'react';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import { useLayoutEffect } from '@atlaskit/ds-lib/use-layout-effect';
import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
import { useMotion } from '@atlaskit/motion/entering/use-motion';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { localPanelWidthVar } from './constants';
import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
import { PanelSplitter } from './panel-splitter/panel-splitter';
import { PanelSplitterProvider } from './panel-splitter/provider';
var localPanelVar = '--p_lclPnlW';
var panelSplitterResizingVar = '--p_lclPnlRsz';
var localPanelSplitterId = Symbol('LocalPanel PanelSplitter');
// Compiled preserves the existing container-relative widths and discrete motion styles.
/* eslint-disable @compiled/shorthand-property-sorting -- Content motion overrides only the animation delay. */
var styles = {
panelWrapper: "_nd5l1gzg _kqsw1if8 _bfhk1bhr _vchhusvi _4t3ieqxy _152tidpf _10fph9n0 _1bsb13q4",
managedInline: "_nd5l1c6w _bfhkvuon _152tidpf _1bsb1c5w",
unmeasured: "_nd5l32aw _191wbqna _1bsb1cku _bfhk1g1j _16qs1dhr",
managedOverlay: "_nd5l1gzg _bfhk1bhr _1bsb1c5w",
panelScrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
border: "_191wglyw _16qs130s",
managedInlineBorder: "_191wia51 _16qsglyw",
entering: "_k1af1nn1 _10t81ia4 _xrrp147i _1wsa1ign _1vrh1a5r _1kmh1n9t _105abamb",
exiting: "_k1af14vv _bq641n9t _105aeydr",
contentEntering: "_y44v1mph",
contentExiting: "_y44vf1qi",
contentChangeContainer: "_4t3i1osq"
};
var contentEnteringDelayStyles = {
root: "_ju25dn4k"
};
/* eslint-enable @compiled/shorthand-property-sorting */
var PanelContentMotion = function PanelContentMotion(_ref) {
var children = _ref.children;
var _useMotion = useMotion(),
state = _useMotion.state,
ref = _useMotion.ref;
return /*#__PURE__*/React.createElement("div", {
ref: ref,
className: ax([styles.contentChangeContainer, state === 'entering' && styles.contentEntering, state === 'exiting' && styles.contentExiting])
}, children);
};
/**
* Internal surface for PanelLayout. The host supplies content; navigation owns its geometry.
*/
export function LocalPanelSurface(_ref2) {
var _managedSizing$mode, _managedSizing$width;
var children = _ref2.children,
contentKey = _ref2.contentKey,
label = _ref2.label,
resizeLabel = _ref2.resizeLabel,
defaultWidth = _ref2.defaultWidth,
minWidth = _ref2.minWidth,
maxWidth = _ref2.maxWidth,
testId = _ref2.testId,
layoutRef = _ref2.layoutRef,
managedSizing = _ref2.managedSizing,
getManagedResizeBounds = _ref2.getManagedResizeBounds,
prepareResize = _ref2.prepareResize,
onManagedResizeStart = _ref2.onManagedResizeStart,
onManagedResize = _ref2.onManagedResize,
onManagedResizeEnd = _ref2.onManagedResizeEnd,
onWidthChange = _ref2.onWidthChange,
onResizeEnd = _ref2.onResizeEnd;
var ref = useRef(null);
var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
useLayoutEffect(function () {
var panel = ref.current;
if (!dangerouslyHoistSlotSizes || !panel) {
return;
}
// Container-relative CSS owns the initial width, before the sizing runtime loads.
// Publish geometry directly for external controls; never feed it into saved preferences.
var previousWidth;
var publishWidth = function publishWidth(width) {
if (width !== previousWidth) {
previousWidth = width;
panel.ownerDocument.documentElement.style.setProperty(localPanelWidthVar, "".concat(width, "px"));
}
};
publishWidth(panel.getBoundingClientRect().width);
var observer = new ResizeObserver(function (_ref3) {
var _entry$borderBoxSize$, _entry$borderBoxSize;
var _ref4 = _slicedToArray(_ref3, 1),
entry = _ref4[0];
publishWidth((_entry$borderBoxSize$ = (_entry$borderBoxSize = entry.borderBoxSize) === null || _entry$borderBoxSize === void 0 || (_entry$borderBoxSize = _entry$borderBoxSize[0]) === null || _entry$borderBoxSize === void 0 ? void 0 : _entry$borderBoxSize.inlineSize) !== null && _entry$borderBoxSize$ !== void 0 ? _entry$borderBoxSize$ : panel.getBoundingClientRect().width);
});
observer.observe(panel, {
box: 'border-box'
});
return function () {
observer.disconnect();
panel.ownerDocument.documentElement.style.removeProperty(localPanelWidthVar);
};
}, [dangerouslyHoistSlotSizes]);
var scrollRef = useRef(null);
useLayoutEffect(function () {
if (scrollRef.current) {
scrollRef.current.scrollTop = 0;
}
}, [contentKey]);
var _useMotion2 = useMotion(),
state = _useMotion2.state,
motionRef = _useMotion2.ref;
var isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
var isContentMotionEnabled = fg('platform-dst-motion-uplift-panel-content');
var mergedRef = useMemo(function () {
return isMotionUpliftEnabled ? mergeRefs([ref, motionRef]) : ref;
}, [isMotionUpliftEnabled, motionRef]);
var mode = (_managedSizing$mode = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) !== null && _managedSizing$mode !== void 0 ? _managedSizing$mode : 'overlay';
var managedMode = useStableRef(managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode);
// Resize preparation can load the coordinator after the interaction starts.
// Read its latest mode instead of the pre-load callback's captured fallback.
var getMode = useCallback(function () {
if (managedMode.current) {
return managedMode.current;
}
return ref.current && getComputedStyle(ref.current).gridArea.split('/')[0].trim() === 'panel' ? 'inline' : 'overlay';
}, [managedMode]);
var dragMode = useRef('overlay');
var completedResizeModeRef = useRef(mode);
var renderedWidth = (_managedSizing$width = managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.width) !== null && _managedSizing$width !== void 0 ? _managedSizing$width : Math.max(minWidth, Math.min(defaultWidth, maxWidth !== null && maxWidth !== void 0 ? maxWidth : Infinity));
// Before the first measurement, CSS caps the surface to its containing region.
// Resize preparation waits for the coordinator to resolve the same bounds for both inputs.
var getResizeBounds = useCallback(function () {
var _getManagedResizeBoun;
return (_getManagedResizeBoun = getManagedResizeBounds()) !== null && _getManagedResizeBoun !== void 0 ? _getManagedResizeBoun : {
min: '0px',
max: '0px'
};
}, [getManagedResizeBounds]);
var onCompleteResize = useCallback(function (width) {
// Keyboard analytics are debounced; retain the mode that produced this width,
// rather than the layout mode when the delayed callback eventually runs.
var mode = getMode();
completedResizeModeRef.current = mode;
onManagedResizeEnd(mode, width);
onWidthChange(width);
}, [getMode, onManagedResizeEnd, onWidthChange]);
var onResizeStartInternal = useCallback(function () {
dragMode.current = getMode();
onManagedResizeStart(dragMode.current);
}, [getMode, onManagedResizeStart]);
var onResizeInternal = useCallback(function (width) {
return onManagedResize(dragMode.current, width);
}, [onManagedResize]);
var handleResizeEnd = useCallback(function (event) {
return onResizeEnd(_objectSpread(_objectSpread({}, event), {}, {
mode: completedResizeModeRef.current
}));
}, [onResizeEnd]);
return /*#__PURE__*/React.createElement("section", {
"aria-label": label,
"data-testid": testId,
"data-layout-with-panel-slot": "",
style: _defineProperty({}, localPanelVar, "".concat(renderedWidth, "px")),
ref: mergedRef,
className: ax([isMotionUpliftEnabled && state === 'entering' && styles.entering, isMotionUpliftEnabled && state === 'exiting' && styles.exiting, styles.panelWrapper, styles.border, !managedSizing && styles.unmeasured, (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'inline' && styles.managedInline, (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'overlay' && styles.managedOverlay, (managedSizing === null || managedSizing === void 0 ? void 0 : managedSizing.mode) === 'inline' && styles.managedInlineBorder])
}, /*#__PURE__*/React.createElement(PanelSplitterProvider, {
panelId: localPanelSplitterId,
panelRef: ref,
resizingElementRef: layoutRef,
panelWidth: renderedWidth,
onCompleteResize: onCompleteResize,
prepareResize: prepareResize,
onResizeStartInternal: onResizeStartInternal,
onResizeInternal: onResizeInternal,
getResizeBounds: getResizeBounds,
isEnabled: managedSizing !== undefined || prepareResize !== undefined,
resizingCssVar: panelSplitterResizingVar,
position: "start"
}, /*#__PURE__*/React.createElement("div", {
ref: scrollRef,
"data-testid": testId && "".concat(testId, "--scroll-container"),
className: ax([styles.panelScrollContainer, state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'entering' && contentEnteringDelayStyles.root, state === 'exiting' && styles.contentExiting])
}, isContentMotionEnabled && contentKey !== undefined ? /*#__PURE__*/React.createElement(ExitingPersistence, {
exitThenEnter: true
}, /*#__PURE__*/React.createElement(PanelContentMotion, {
key: contentKey
}, children)) : children, /*#__PURE__*/React.createElement(PanelSplitter, {
label: resizeLabel,
testId: testId && "".concat(testId, "--splitter"),
onResizeEnd: handleResizeEnd
}))));
}