{
  "version": 3,
  "sources": ["../../../src/utils/hooks/use-animated-offset-rect.ts"],
  "sourcesContent": ["/* eslint-disable jsdoc/require-param */\n\n/**\n * WordPress dependencies\n */\nimport { useEvent } from '@wordpress/compose';\nimport { useLayoutEffect } from '@wordpress/element';\n/**\n * Internal dependencies\n */\n\nimport { useOnValueUpdate } from './use-on-value-update';\n\n/**\n * A utility used to animate something in a container component based on the \"offset\n * rect\" (position relative to the container and size) of a subelement. For example,\n * this is useful to render an indicator for the selected option of a component, and\n * to animate it when the selected option changes.\n *\n * Takes in a container element and the up-to-date \"offset rect\" of the target\n * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:\n *\n * - Adds CSS variables with rect information to the container, so that the indicator\n *   can be rendered and animated with them. These are kept up-to-date, enabling CSS\n *   transitions on change.\n * - Sets an attribute (`data-subelement-animated` by default) when the tracked\n *   element changes, so that the target (e.g. the indicator) can be animated to its\n *   new size and position.\n * - Removes the attribute when the animation is done.\n *\n * The need for the attribute is due to the fact that the rect might update in\n * situations other than when the tracked element changes, e.g. the tracked element\n * might be resized. In such cases, there is no need to animate the indicator, and\n * the change in size or position of the indicator needs to be reflected immediately.\n */\nexport function useAnimatedOffsetRect(\n/**\n * The container element.\n */\ncontainer,\n/**\n * The rect of the tracked element.\n */\nrect, {\n  prefix = 'subelement',\n  dataAttribute = `${prefix}-animated`,\n  transitionEndFilter = () => true,\n  roundRect = false\n} = {}) {\n  const setProperties = useEvent(() => {\n    Object.keys(rect).forEach(property => property !== 'element' && container?.style.setProperty(`--${prefix}-${property}`, String(roundRect ? Math.floor(rect[property]) : rect[property])));\n  });\n  useLayoutEffect(() => {\n    setProperties();\n  }, [rect, setProperties]);\n  useOnValueUpdate(rect.element, ({\n    previousValue\n  }) => {\n    // Only enable the animation when moving from one element to another.\n    if (rect.element && previousValue) {\n      container?.setAttribute(`data-${dataAttribute}`, '');\n    }\n  });\n  useLayoutEffect(() => {\n    function onTransitionEnd(event) {\n      if (transitionEndFilter(event)) {\n        container?.removeAttribute(`data-${dataAttribute}`);\n      }\n    }\n    container?.addEventListener('transitionend', onTransitionEnd);\n    return () => container?.removeEventListener('transitionend', onTransitionEnd);\n  }, [dataAttribute, container, transitionEndFilter]);\n}\n/* eslint-enable jsdoc/require-param */"],
  "mappings": ";AAKA,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAKhC,SAAS,wBAAwB;AAwB1B,SAAS,sBAIhB,WAIA,MAAM;AAAA,EACJ,SAAS;AAAA,EACT,gBAAgB,GAAG,MAAM;AAAA,EACzB,sBAAsB,MAAM;AAAA,EAC5B,YAAY;AACd,IAAI,CAAC,GAAG;AACN,QAAM,gBAAgB,SAAS,MAAM;AACnC,WAAO,KAAK,IAAI,EAAE,QAAQ,cAAY,aAAa,aAAa,WAAW,MAAM,YAAY,KAAK,MAAM,IAAI,QAAQ,IAAI,OAAO,YAAY,KAAK,MAAM,KAAK,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC;AAAA,EAC1L,CAAC;AACD,kBAAgB,MAAM;AACpB,kBAAc;AAAA,EAChB,GAAG,CAAC,MAAM,aAAa,CAAC;AACxB,mBAAiB,KAAK,SAAS,CAAC;AAAA,IAC9B;AAAA,EACF,MAAM;AAEJ,QAAI,KAAK,WAAW,eAAe;AACjC,iBAAW,aAAa,QAAQ,aAAa,IAAI,EAAE;AAAA,IACrD;AAAA,EACF,CAAC;AACD,kBAAgB,MAAM;AACpB,aAAS,gBAAgB,OAAO;AAC9B,UAAI,oBAAoB,KAAK,GAAG;AAC9B,mBAAW,gBAAgB,QAAQ,aAAa,EAAE;AAAA,MACpD;AAAA,IACF;AACA,eAAW,iBAAiB,iBAAiB,eAAe;AAC5D,WAAO,MAAM,WAAW,oBAAoB,iBAAiB,eAAe;AAAA,EAC9E,GAAG,CAAC,eAAe,WAAW,mBAAmB,CAAC;AACpD;",
  "names": []
}