tdesign-react/cjs/hooks/usePopper.js

TDesign Component for React

/**
 * tdesign v1.16.2
 * (c) 2025 tdesign
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var toConsumableArray = require('../_chunks/dep-a7fe58de.js');
var slicedToArray = require('../_chunks/dep-5cb0d66d.js');
var React = require('react');
var ReactDOM = require('react-dom');
var isEqual = require('react-fast-compare');
var core = require('@popperjs/core');
var hooks_useLayoutEffect = require('./useLayoutEffect.js');
require('../_chunks/dep-737b8bd8.js');
require('../_chunks/dep-e0735b5f.js');
require('../_chunks/dep-b304bc94.js');
require('../_chunks/dep-4ce0670e.js');
require('../_chunks/dep-b325182b.js');
require('../_chunks/dep-bdafd287.js');
require('../_chunks/dep-3448f35f.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);

var EMPTY_MODIFIERS = [];
var fromEntries = function fromEntries(entries) {
  return entries.reduce(function (acc, _ref) {
    var _ref2 = slicedToArray._slicedToArray(_ref, 2),
      key = _ref2[0],
      value = _ref2[1];
    acc[key] = value;
    return acc;
  }, {});
};
var usePopper = function usePopper(referenceElement, popperElement) {
  var _popperInstanceRef$cu, _popperInstanceRef$cu2, _popperInstanceRef$cu3, _popperInstanceRef$cu4, _popperInstanceRef$cu5;
  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  var prevOptions = React.useRef(null);
  var optionsWithDefaults = {
    onFirstUpdate: options.onFirstUpdate,
    placement: options.placement || "bottom",
    strategy: options.strategy || "absolute",
    modifiers: options.modifiers || EMPTY_MODIFIERS
  };
  var _useState = React.useState({
      styles: {
        popper: {
          position: optionsWithDefaults.strategy,
          left: "0",
          top: "0"
        },
        arrow: {
          position: "absolute"
        }
      },
      attributes: {}
    }),
    _useState2 = slicedToArray._slicedToArray(_useState, 2),
    state = _useState2[0],
    setState = _useState2[1];
  var updateStateModifier = React.useMemo(function () {
    return {
      name: "updateState",
      enabled: true,
      phase: "write",
      fn: function fn(_ref3) {
        var state2 = _ref3.state;
        var elements = Object.keys(state2.elements);
        ReactDOM.flushSync(function () {
          setState({
            styles: fromEntries(elements.map(function (element) {
              return [element, state2.styles[element] || {}];
            })),
            attributes: fromEntries(elements.map(function (element) {
              return [element, state2.attributes[element]];
            }))
          });
        });
      },
      requires: ["computeStyles"]
    };
  }, []);
  var popperOptions = React.useMemo(function () {
    var newOptions = {
      onFirstUpdate: optionsWithDefaults.onFirstUpdate,
      placement: optionsWithDefaults.placement,
      strategy: optionsWithDefaults.strategy,
      modifiers: [].concat(toConsumableArray._toConsumableArray(optionsWithDefaults.modifiers), [updateStateModifier, {
        name: "applyStyles",
        enabled: false
      }])
    };
    if (isEqual__default["default"](prevOptions.current, newOptions)) {
      return prevOptions.current || newOptions;
    }
    prevOptions.current = newOptions;
    return newOptions;
  }, [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]);
  var popperInstanceRef = React.useRef(null);
  hooks_useLayoutEffect["default"](function () {
    if (popperInstanceRef.current) {
      popperInstanceRef.current.setOptions(popperOptions);
    }
  }, [popperOptions]);
  hooks_useLayoutEffect["default"](function () {
    if (referenceElement == null || popperElement == null) {
      return;
    }
    var createPopper = options.createPopper || core.createPopper;
    var popperInstance = createPopper(referenceElement, popperElement, popperOptions);
    popperInstanceRef.current = popperInstance;
    return function () {
      popperInstance.destroy();
      popperInstanceRef.current = null;
    };
  }, [referenceElement, popperElement, options.createPopper]);
  return {
    attributes: state.attributes,
    styles: state.styles,
    state: (_popperInstanceRef$cu = popperInstanceRef.current) === null || _popperInstanceRef$cu === void 0 ? void 0 : _popperInstanceRef$cu.state,
    destroy: (_popperInstanceRef$cu2 = popperInstanceRef.current) === null || _popperInstanceRef$cu2 === void 0 ? void 0 : _popperInstanceRef$cu2.destroy,
    forceUpdate: (_popperInstanceRef$cu3 = popperInstanceRef.current) === null || _popperInstanceRef$cu3 === void 0 ? void 0 : _popperInstanceRef$cu3.forceUpdate,
    update: (_popperInstanceRef$cu4 = popperInstanceRef.current) === null || _popperInstanceRef$cu4 === void 0 ? void 0 : _popperInstanceRef$cu4.update,
    setOptions: (_popperInstanceRef$cu5 = popperInstanceRef.current) === null || _popperInstanceRef$cu5 === void 0 ? void 0 : _popperInstanceRef$cu5.setOptions
  };
};

exports["default"] = usePopper;
//# sourceMappingURL=usePopper.js.map