@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
206 lines (203 loc) • 12.3 kB
JavaScript
/* local-panel-surface.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LocalPanelSurface = LocalPanelSurface;
require("./local-panel-surface.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _useLayoutEffect = require("@atlaskit/ds-lib/use-layout-effect");
var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
var _useMotion3 = require("@atlaskit/motion/entering/use-motion");
var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _constants = require("./constants");
var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
var _panelSplitter = require("./panel-splitter/panel-splitter");
var _provider = require("./panel-splitter/provider");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2.default)(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; }
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 = (0, _useMotion3.useMotion)(),
state = _useMotion.state,
ref = _useMotion.ref;
return /*#__PURE__*/React.createElement("div", {
ref: ref,
className: (0, _runtime.ax)([styles.contentChangeContainer, state === 'entering' && styles.contentEntering, state === 'exiting' && styles.contentExiting])
}, children);
};
/**
* Internal surface for PanelLayout. The host supplies content; navigation owns its geometry.
*/
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 = (0, _react.useRef)(null);
var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
(0, _useLayoutEffect.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(_constants.localPanelWidthVar, "".concat(width, "px"));
}
};
publishWidth(panel.getBoundingClientRect().width);
var observer = new ResizeObserver(function (_ref3) {
var _entry$borderBoxSize$, _entry$borderBoxSize;
var _ref4 = (0, _slicedToArray2.default)(_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(_constants.localPanelWidthVar);
};
}, [dangerouslyHoistSlotSizes]);
var scrollRef = (0, _react.useRef)(null);
(0, _useLayoutEffect.useLayoutEffect)(function () {
if (scrollRef.current) {
scrollRef.current.scrollTop = 0;
}
}, [contentKey]);
var _useMotion2 = (0, _useMotion3.useMotion)(),
state = _useMotion2.state,
motionRef = _useMotion2.ref;
var isMotionUpliftEnabled = (0, _fg.fg)('platform-dst-motion-uplift-panel');
var isContentMotionEnabled = (0, _fg.fg)('platform-dst-motion-uplift-panel-content');
var mergedRef = (0, _react.useMemo)(function () {
return isMotionUpliftEnabled ? (0, _mergeRefs.default)([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 = (0, _useStableRef.default)(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 = (0, _react.useCallback)(function () {
if (managedMode.current) {
return managedMode.current;
}
return ref.current && getComputedStyle(ref.current).gridArea.split('/')[0].trim() === 'panel' ? 'inline' : 'overlay';
}, [managedMode]);
var dragMode = (0, _react.useRef)('overlay');
var completedResizeModeRef = (0, _react.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 = (0, _react.useCallback)(function () {
var _getManagedResizeBoun;
return (_getManagedResizeBoun = getManagedResizeBounds()) !== null && _getManagedResizeBoun !== void 0 ? _getManagedResizeBoun : {
min: '0px',
max: '0px'
};
}, [getManagedResizeBounds]);
var onCompleteResize = (0, _react.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 = (0, _react.useCallback)(function () {
dragMode.current = getMode();
onManagedResizeStart(dragMode.current);
}, [getMode, onManagedResizeStart]);
var onResizeInternal = (0, _react.useCallback)(function (width) {
return onManagedResize(dragMode.current, width);
}, [onManagedResize]);
var handleResizeEnd = (0, _react.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: (0, _defineProperty2.default)({}, localPanelVar, "".concat(renderedWidth, "px")),
ref: mergedRef,
className: (0, _runtime.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(_provider.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: (0, _runtime.ax)([styles.panelScrollContainer, state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'entering' && contentEnteringDelayStyles.root, state === 'exiting' && styles.contentExiting])
}, isContentMotionEnabled && contentKey !== undefined ? /*#__PURE__*/React.createElement(_exitingPersistence.default, {
exitThenEnter: true
}, /*#__PURE__*/React.createElement(PanelContentMotion, {
key: contentKey
}, children)) : children, /*#__PURE__*/React.createElement(_panelSplitter.PanelSplitter, {
label: resizeLabel,
testId: testId && "".concat(testId, "--splitter"),
onResizeEnd: handleResizeEnd
}))));
}