@wordpress/components/build-module/higher-order/with-fallback-styles/index.mjs

UI components for WordPress.

// packages/components/src/higher-order/with-fallback-styles/index.tsx
import fastDeepEqual from "fast-deep-equal/es6/index.js";
import { useState, useRef } from "@wordpress/element";
import { createHigherOrderComponent, useIsomorphicLayoutEffect } from "@wordpress/compose";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var with_fallback_styles_default = (mapNodeToProps) => createHigherOrderComponent((WrappedComponent) => {
  return function WithFallbackStyles(props) {
    const [fallbackStyles, setFallbackStyles] = useState(void 0);
    const nodeRef = useRef(null);
    useIsomorphicLayoutEffect(() => {
      const node = props.node ?? nodeRef.current;
      const grabStylesCompleted = !!fallbackStyles && Object.values(fallbackStyles).every(Boolean);
      if (node && !grabStylesCompleted) {
        const newFallbackStyles = mapNodeToProps(node, props);
        if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {
          setFallbackStyles(newFallbackStyles);
        }
      }
    });
    const wrappedComponent = /* @__PURE__ */ _jsx(WrappedComponent, {
      ...props,
      ...fallbackStyles
    });
    return props.node ? wrappedComponent : /* @__PURE__ */ _jsxs("div", {
      ref: nodeRef,
      children: [" ", wrappedComponent, " "]
    });
  };
}, "withFallbackStyles");
export {
  with_fallback_styles_default as default
};
//# sourceMappingURL=index.mjs.map