{"version":3,"file":"DialogOverlap.cjs","sources":["../../../src/components/Dialog/DialogOverlap.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { Center } from '../Layout'\n\ntype Props = PropsWithChildren<\n  {\n    isOpen: boolean\n    as?: ComponentProps<typeof Center>['as']\n  } & ComponentProps<'div'>\n>\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-fixed shr-inset-0 shr-z-overlap-base',\n    '[&.shr-dialog-transition-enter]:shr-opacity-0',\n    '[&.shr-dialog-transition-enter-active]:shr-transition-opacity',\n    '[&.shr-dialog-transition-enter-active]:shr-duration-300',\n    '[&.shr-dialog-transition-enter-active]:shr-ease-in-out',\n    // enter と enter-active は同時に付与されるので、enter-active を強める\n    '[&&.shr-dialog-transition-enter-active]:shr-opacity-100',\n    '[&.shr-dialog-transition-exit]:shr-opacity-100',\n    '[&.shr-dialog-transition-exit-active]:shr-transition-opacity',\n    '[&.shr-dialog-transition-exit-active]:shr-duration-300',\n    '[&.shr-dialog-transition-exit-active]:shr-ease-in-out',\n    // exit と exit-active は同時に付与されるので、exit-active を強める\n    '[&&.shr-dialog-transition-exit-active]:shr-opacity-0',\n  ],\n})\n\nexport const DialogOverlap: FC<Props> = ({ isOpen, className, children, as }) => {\n  const [childrenBuffer, setChildrenBuffer] = useState<ReactNode>(null)\n  const nodeRef = useRef<HTMLDivElement>(null)\n\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  useEffect(() => {\n    if (isOpen) {\n      setChildrenBuffer(children)\n    }\n  }, [isOpen, children])\n\n  return (\n    <CSSTransition\n      nodeRef={nodeRef}\n      in={isOpen}\n      timeout={300}\n      unmountOnExit\n      classNames=\"shr-dialog-transition\"\n    >\n      <Center ref={nodeRef} verticalCentering className={actualClassName} as={as}>\n        {isOpen ? children : childrenBuffer}\n      </Center>\n    </CSSTransition>\n  )\n}\n"],"names":["tv","useState","useRef","useMemo","useEffect","_jsx","Center"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,0CAA0C;QAC1C,+CAA+C;QAC/C,+DAA+D;QAC/D,yDAAyD;QACzD,wDAAwD;;QAExD,yDAAyD;QACzD,gDAAgD;QAChD,8DAA8D;QAC9D,wDAAwD;QACxD,uDAAuD;;QAEvD,sDAAsD;AACvD,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,aAAa,GAAc,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAI;IAC9E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAY,IAAI,CAAC;AACrE,IAAA,MAAM,OAAO,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAE5C,IAAA,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAM,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAErFC,eAAS,CAAC,MAAK;QACb,IAAI,MAAM,EAAE;YACV,iBAAiB,CAAC,QAAQ,CAAC;QAC7B;AACF,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAEtB,QACEC,eAAC,aAAa,EAAA,EACZ,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,GAAG,EACZ,aAAa,EAAA,IAAA,EACb,UAAU,EAAC,uBAAuB,EAAA,QAAA,EAElCA,cAAA,CAACC,sCAAM,EAAA,EAAC,GAAG,EAAE,OAAO,EAAE,iBAAiB,EAAA,IAAA,EAAC,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,EAAE,EAAA,QAAA,EACvE,MAAM,GAAG,QAAQ,GAAG,cAAc,EAAA,CAC5B,EAAA,CACK;AAEpB;;;;"}