{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-popper-container/index.ts"],"sourcesContent":["import { computed, onBeforeMount } from 'vue'\nimport { isClient } from '@element-plus/utils'\nimport { useGetDerivedNamespace } from '../use-namespace'\nimport { useIdInjection } from '../use-id'\n\nexport const usePopperContainerId = () => {\n  const namespace = useGetDerivedNamespace()\n  const idInjection = useIdInjection()\n\n  const id = computed(() => {\n    return `${namespace.value}-popper-container-${idInjection.prefix}`\n  })\n  const selector = computed(() => `#${id.value}`)\n\n  return {\n    id,\n    selector,\n  }\n}\n\nconst createContainer = (id: string) => {\n  const container = document.createElement('div')\n  container.id = id\n  document.body.appendChild(container)\n  return container\n}\n\nexport const usePopperContainer = () => {\n  const { id, selector } = usePopperContainerId()\n  onBeforeMount(() => {\n    if (!isClient) return\n\n    // This is for bypassing the error that when under testing env, we often encounter\n    // document.body.innerHTML = '' situation\n    // for this we need to disable the caching since it's not really needed\n    if (\n      process.env.NODE_ENV === 'test' ||\n      !document.body.querySelector(selector.value)\n    ) {\n      createContainer(id.value)\n    }\n  })\n\n  return {\n    id,\n    selector,\n  }\n}\n"],"mappings":";;;;;;AAKA,MAAa,6BAA6B;CACxC,MAAM,YAAY,wBAAwB;CAC1C,MAAM,cAAc,gBAAgB;CAEpC,MAAM,KAAK,eAAe;AACxB,SAAO,GAAG,UAAU,MAAM,oBAAoB,YAAY;GAC1D;AAGF,QAAO;EACL;EACA,UAJe,eAAe,IAAI,GAAG,QAAQ;EAK9C;;AAGH,MAAM,mBAAmB,OAAe;CACtC,MAAM,YAAY,SAAS,cAAc,MAAM;AAC/C,WAAU,KAAK;AACf,UAAS,KAAK,YAAY,UAAU;AACpC,QAAO;;AAGT,MAAa,2BAA2B;CACtC,MAAM,EAAE,IAAI,aAAa,sBAAsB;AAC/C,qBAAoB;AAClB,MAAI,CAAC,SAAU;AAKf,MAEE,CAAC,SAAS,KAAK,cAAc,SAAS,MAAM,CAE5C,iBAAgB,GAAG,MAAM;GAE3B;AAEF,QAAO;EACL;EACA;EACD"}