"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useBlockProps = useBlockProps;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _blocks = require("@wordpress/blocks");
var _compose = require("@wordpress/compose");
var _warning = _interopRequireDefault(require("@wordpress/warning"));
var _useMovingAnimation = _interopRequireDefault(require("../../use-moving-animation"));
var _privateBlockContext = require("../private-block-context");
var _useFocusFirstElement = require("./use-focus-first-element");
var _useIsHovered = require("./use-is-hovered");
var _context = require("../../block-edit/context");
var _useFocusHandler = require("./use-focus-handler");
var _useSelectedBlockEventHandlers = require("./use-selected-block-event-handlers");
var _useNavModeExit = require("./use-nav-mode-exit");
var _useZoomOutModeExit = require("./use-zoom-out-mode-exit");
var _useBlockRefs = require("./use-block-refs");
var _useIntersectionObserver = require("./use-intersection-observer");
var _useScrollIntoView = require("./use-scroll-into-view");
var _useFlashEditableBlocks = require("../../use-flash-editable-blocks");
var _useBindingsAttributes = require("../../../hooks/use-bindings-attributes");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * This hook is used to lightly mark an element as a block element. The element
 * should be the outermost element of a block. Call this hook and pass the
 * returned props to the element to mark as a block. If you define a ref for the
 * element, it is important to pass the ref to this hook, which the hook in turn
 * will pass to the component through the props it returns. Optionally, you can
 * also pass any other props through this hook, and they will be merged and
 * returned.
 *
 * Use of this hook on the outermost element of a block is required if using API >= v2.
 *
 * @example
 * ```js
 * import { useBlockProps } from '@wordpress/block-editor';
 *
 * export default function Edit() {
 *
 *   const blockProps = useBlockProps( {
 *     className: 'my-custom-class',
 *     style: {
 *       color: '#222222',
 *       backgroundColor: '#eeeeee'
 *     }
 *   } )
 *
 *   return (
 *	    <div { ...blockProps }>
 *
 *     </div>
 *   )
 * }
 *
 * ```
 *
 *
 * @param {Object}  props                    Optional. Props to pass to the element. Must contain
 *                                           the ref if one is defined.
 * @param {Object}  options                  Options for internal use only.
 * @param {boolean} options.__unstableIsHtml
 *
 * @return {Object} Props to pass to the element to mark as a block.
 */
function useBlockProps(props = {}, {
  __unstableIsHtml
} = {}) {
  const {
    clientId,
    className,
    wrapperProps = {},
    isAligned,
    index,
    mode,
    name,
    blockApiVersion,
    blockTitle,
    isSelected,
    isSubtreeDisabled,
    hasOverlay,
    initialPosition,
    blockEditingMode,
    isHighlighted,
    isMultiSelected,
    isPartiallySelected,
    isReusable,
    isDragging,
    hasChildSelected,
    isBlockMovingMode,
    canInsertMovingBlock,
    isEditingDisabled,
    hasEditableOutline,
    isTemporarilyEditingAsBlocks,
    defaultClassName,
    templateLock
  } = (0, _element.useContext)(_privateBlockContext.PrivateBlockContext);

  // translators: %s: Type of block (i.e. Text, Image etc)
  const blockLabel = (0, _i18n.sprintf)((0, _i18n.__)('Block: %s'), blockTitle);
  const htmlSuffix = mode === 'html' && !__unstableIsHtml ? '-visual' : '';
  const mergedRefs = (0, _compose.useMergeRefs)([props.ref, (0, _useFocusFirstElement.useFocusFirstElement)({
    clientId,
    initialPosition
  }), (0, _useBlockRefs.useBlockRefProvider)(clientId), (0, _useFocusHandler.useFocusHandler)(clientId), (0, _useSelectedBlockEventHandlers.useEventHandlers)({
    clientId,
    isSelected
  }), (0, _useNavModeExit.useNavModeExit)(clientId), (0, _useZoomOutModeExit.useZoomOutModeExit)(), (0, _useIsHovered.useIsHovered)({
    clientId
  }), (0, _useIntersectionObserver.useIntersectionObserver)(), (0, _useMovingAnimation.default)({
    triggerAnimationOnChange: index,
    clientId
  }), (0, _compose.useDisabled)({
    isDisabled: !hasOverlay
  }), (0, _useFlashEditableBlocks.useFlashEditableBlocks)({
    clientId,
    isEnabled: name === 'core/block' || templateLock === 'contentOnly'
  }), (0, _useScrollIntoView.useScrollIntoView)({
    isSelected
  })]);
  const blockEditContext = (0, _context.useBlockEditContext)();
  const hasBlockBindings = !!blockEditContext[_context.blockBindingsKey];
  const bindingsStyle = hasBlockBindings && (0, _useBindingsAttributes.canBindBlock)(name) ? {
    '--wp-admin-theme-color': 'var(--wp-block-synced-color)',
    '--wp-admin-theme-color--rgb': 'var(--wp-block-synced-color--rgb)'
  } : {};

  // Ensures it warns only inside the `edit` implementation for the block.
  if (blockApiVersion < 2 && clientId === blockEditContext.clientId) {
    globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)(`Block type "${name}" must support API version 2 or higher to work correctly with "useBlockProps" method.`) : void 0;
  }
  let hasNegativeMargin = false;
  if (wrapperProps?.style?.marginTop?.charAt(0) === '-' || wrapperProps?.style?.marginBottom?.charAt(0) === '-' || wrapperProps?.style?.marginLeft?.charAt(0) === '-' || wrapperProps?.style?.marginRight?.charAt(0) === '-') {
    hasNegativeMargin = true;
  }
  return {
    tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
    ...wrapperProps,
    ...props,
    ref: mergedRefs,
    id: `block-${clientId}${htmlSuffix}`,
    role: 'document',
    'aria-label': blockLabel,
    'data-block': clientId,
    'data-type': name,
    'data-title': blockTitle,
    inert: isSubtreeDisabled ? 'true' : undefined,
    className: (0, _clsx.default)('block-editor-block-list__block', {
      // The wp-block className is important for editor styles.
      'wp-block': !isAligned,
      'has-block-overlay': hasOverlay,
      'is-selected': isSelected,
      'is-highlighted': isHighlighted,
      'is-multi-selected': isMultiSelected,
      'is-partially-selected': isPartiallySelected,
      'is-reusable': isReusable,
      'is-dragging': isDragging,
      'has-child-selected': hasChildSelected,
      'is-block-moving-mode': isBlockMovingMode,
      'can-insert-moving-block': canInsertMovingBlock,
      'is-editing-disabled': isEditingDisabled,
      'has-editable-outline': hasEditableOutline,
      'has-negative-margin': hasNegativeMargin,
      'is-content-locked-temporarily-editing-as-blocks': isTemporarilyEditingAsBlocks
    }, className, props.className, wrapperProps.className, defaultClassName),
    style: {
      ...wrapperProps.style,
      ...props.style,
      ...bindingsStyle
    }
  };
}

/**
 * Call within a save function to get the props for the block wrapper.
 *
 * @param {Object} props Optional. Props to pass to the element.
 */
useBlockProps.save = _blocks.__unstableGetBlockProps;
//# sourceMappingURL=index.js.map