{
  "version": 3,
  "sources": ["../../../src/resizable-box/resize-tooltip/utils.ts"],
  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\nconst noop = () => {};\nexport const POSITIONS = {\n  bottom: 'bottom',\n  corner: 'corner'\n};\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param props\n * @param props.axis        Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize    Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position    Adjusts label value.\n * @param props.showPx      Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel({\n  axis,\n  fadeTimeout = 180,\n  onResize = noop,\n  position = POSITIONS.bottom,\n  showPx = false\n}) {\n  /*\n   * The width/height values derive from this special useResizeObserver hook.\n   * This custom hook uses the ResizeObserver API to listen for resize events.\n   */\n  const [resizeListener, sizes] = useResizeObserver();\n\n  /*\n   * Indicates if the x/y axis is preferred.\n   * If set, we will avoid resetting the moveX and moveY values.\n   * This will allow for the preferred axis values to persist in the label.\n   */\n  const isAxisControlled = !!axis;\n\n  /*\n   * The moveX and moveY values are used to track whether the label should\n   * display width, height, or width x height.\n   */\n  const [moveX, setMoveX] = useState(false);\n  const [moveY, setMoveY] = useState(false);\n\n  /*\n   * Cached dimension values to check for width/height updates from the\n   * sizes property from useResizeAware()\n   */\n  const {\n    width,\n    height\n  } = sizes;\n  const heightRef = useRef(height);\n  const widthRef = useRef(width);\n\n  /*\n   * This timeout is used with setMoveX and setMoveY to determine of\n   * both width and height values have changed at (roughly) the same time.\n   */\n  const moveTimeoutRef = useRef(undefined);\n  const debounceUnsetMoveXY = useCallback(() => {\n    const unsetMoveXY = () => {\n      /*\n       * If axis is controlled, we will avoid resetting the moveX and moveY values.\n       * This will allow for the preferred axis values to persist in the label.\n       */\n      if (isAxisControlled) {\n        return;\n      }\n      setMoveX(false);\n      setMoveY(false);\n    };\n    if (moveTimeoutRef.current) {\n      window.clearTimeout(moveTimeoutRef.current);\n    }\n    moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);\n  }, [fadeTimeout, isAxisControlled]);\n  useEffect(() => {\n    /*\n     * On the initial render of useResizeAware, the height and width values are\n     * null. They are calculated then set using via an internal useEffect hook.\n     */\n    const isRendered = width !== null || height !== null;\n    if (!isRendered) {\n      return;\n    }\n    const didWidthChange = width !== widthRef.current;\n    const didHeightChange = height !== heightRef.current;\n    if (!didWidthChange && !didHeightChange) {\n      return;\n    }\n\n    /*\n     * After the initial render, the useResizeAware will set the first\n     * width and height values. We'll sync those values with our\n     * width and height refs. However, we shouldn't render our Tooltip\n     * label on this first cycle.\n     */\n    if (width && !widthRef.current && height && !heightRef.current) {\n      widthRef.current = width;\n      heightRef.current = height;\n      return;\n    }\n\n    /*\n     * After the first cycle, we can track width and height changes.\n     */\n    if (didWidthChange) {\n      setMoveX(true);\n      widthRef.current = width;\n    }\n    if (didHeightChange) {\n      setMoveY(true);\n      heightRef.current = height;\n    }\n    onResize({\n      width,\n      height\n    });\n    debounceUnsetMoveXY();\n  }, [width, height, onResize, debounceUnsetMoveXY]);\n  const label = getSizeLabel({\n    axis,\n    height,\n    moveX,\n    moveY,\n    position,\n    showPx,\n    width\n  });\n  return {\n    label,\n    resizeListener\n  };\n}\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param props\n * @param props.axis     Only shows the label corresponding to the axis.\n * @param props.height   Height value.\n * @param props.moveX    Recent width (x axis) changes.\n * @param props.moveY    Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx   Whether to add `PX` to the label.\n * @param props.width    Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel({\n  axis,\n  height,\n  moveX = false,\n  moveY = false,\n  position = POSITIONS.bottom,\n  showPx = false,\n  width\n}) {\n  if (!moveX && !moveY) {\n    return undefined;\n  }\n\n  /*\n   * Corner position...\n   * We want the label to appear like width x height.\n   */\n  if (position === POSITIONS.corner) {\n    return `${width} x ${height}`;\n  }\n\n  /*\n   * Other POSITIONS...\n   * The label will combine both width x height values if both\n   * values have recently been changed.\n   *\n   * Otherwise, only width or height will be displayed.\n   * The `PX` unit will be added, if specified by the `showPx` prop.\n   */\n  const labelUnit = showPx ? ' px' : '';\n  if (axis) {\n    if (axis === 'x' && moveX) {\n      return `${width}${labelUnit}`;\n    }\n    if (axis === 'y' && moveY) {\n      return `${height}${labelUnit}`;\n    }\n  }\n  if (moveX && moveY) {\n    return `${width} x ${height}`;\n  }\n  if (moveX) {\n    return `${width}${labelUnit}`;\n  }\n  if (moveY) {\n    return `${height}${labelUnit}`;\n  }\n  return undefined;\n}"],
  "mappings": "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",
  "names": []
}