@atlaskit/editor-plugin-block-controls/dist/cjs/ui/visibility-container.js

Block controls plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.VisibilityContainer = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _hooks = require("@atlaskit/editor-common/hooks");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _primitives = require("@atlaskit/primitives");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
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); }
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports

// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss

var RIGHT_CONTROL_HIDE_DELAY_MS = 150;
var baseStyles = (0, _primitives.xcss)({
  transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
});
var visibleStyles = (0, _primitives.xcss)({
  opacity: 1,
  visibility: 'visible'
});
var hiddenStyles = (0, _primitives.xcss)({
  opacity: 0,
  visibility: 'hidden'
});
var baseStylesCSS = (0, _react2.css)((0, _defineProperty2.default)({
  transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
  opacity: 0,
  visibility: 'hidden'
}));
var visibleStylesCSS = (0, _react2.css)({
  opacity: 1,
  visibility: 'visible'
});
var hiddenStylesCSS = (0, _react2.css)({
  opacity: 0,
  visibility: 'hidden'
});
var VisibilityContainer = exports.VisibilityContainer = function VisibilityContainer(_ref) {
  var api = _ref.api,
    children = _ref.children,
    controlSide = _ref.controlSide,
    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut;
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent'], function (states) {
      var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$blockControls4;
      return {
        isTypeAheadOpen: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isOpen,
        isEditing: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.isEditing,
        isMouseOut: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isMouseOut,
        hoverSide: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.hoverSide,
        editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
        userIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent,
        rightSideControlsEnabled: (_states$blockControls4 = states.blockControlsState) === null || _states$blockControls4 === void 0 ? void 0 : _states$blockControls4.rightSideControlsEnabled
      };
    }),
    isTypeAheadOpen = _useSharedPluginState.isTypeAheadOpen,
    isEditing = _useSharedPluginState.isEditing,
    isMouseOut = _useSharedPluginState.isMouseOut,
    hoverSide = _useSharedPluginState.hoverSide,
    editorViewMode = _useSharedPluginState.editorViewMode,
    userIntent = _useSharedPluginState.userIntent,
    rightSideControlsEnabled = _useSharedPluginState.rightSideControlsEnabled;
  var isViewMode = editorViewMode === 'view';
  // rightSideControlsEnabled is the single source of truth (confluence_remix_button_right_side_block_fg from preset)
  var shouldRestrictBySide = rightSideControlsEnabled && controlSide !== undefined && !isViewMode;
  // Only restrict by side when hoverSide is known (after mousemove). When undefined, show both
  // controls so drag handle is visible on load and for keyboard-only users.
  var sideHidden = shouldRestrictBySide && hoverSide !== undefined ? hoverSide !== controlSide : false;
  // In view mode with right-side controls, we delay hiding on isMouseOut (see below) so the right-edge
  // button stays visible when the user moves from the block toward the button (e.g. in edit/live
  // pages), avoiding flicker as the mouse crosses boundaries.
  var hideOnMouseOut = isMouseOut;
  // When forceVisibleOnMouseOut is true (e.g. drag handle focused via keyboard Shift+Ctrl+H),
  // override the mouse-out condition so the control stays visible regardless of mouse position.
  var shouldHideWhenMouseOut = forceVisibleOnMouseOut ? false : hideOnMouseOut;
  var shouldHideImmediate = isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' || sideHidden;

  // Delay hiding the right control in view mode to reduce flickering when moving from block
  // toward the right-edge button (avoids rapid show/hide as mouse crosses boundaries).
  var isRightControlViewMode = isViewMode && rightSideControlsEnabled && controlSide === 'right';
  // When in right-control view mode, we delay hiding so start visible; useEffect will update after delay
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    delayedShouldHide = _useState2[0],
    setDelayedShouldHide = _useState2[1];
  var hideTimeoutRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(function () {
    if (!isRightControlViewMode) {
      return;
    }
    if (!shouldHideImmediate) {
      if (hideTimeoutRef.current) {
        clearTimeout(hideTimeoutRef.current);
        hideTimeoutRef.current = null;
      }
      setDelayedShouldHide(false);
      return;
    }
    hideTimeoutRef.current = setTimeout(function () {
      hideTimeoutRef.current = null;
      setDelayedShouldHide(true);
    }, RIGHT_CONTROL_HIDE_DELAY_MS);
    return function () {
      if (hideTimeoutRef.current) {
        clearTimeout(hideTimeoutRef.current);
      }
    };
  }, [shouldHideImmediate, isRightControlViewMode]);
  var shouldHide = isRightControlViewMode ? delayedShouldHide : shouldHideImmediate;
  if ((0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
    exposure: true
  })) {
    return (0, _react2.jsx)("div", {
      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
    }, children);
  }

  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
  return (0, _react2.jsx)(_primitives.Box, {
    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
  }, children);
};