@channel.io/bezier-react 1.7.2 → 1.8.0

package/dist/cjs/components/ListItem/ListItem.styled.js

@@ -4,10 +4,10 @@ var DisabledOpacity = require('../../constants/DisabledOpacity.js');
 var ListItem_types = require('./ListItem.types.js');
 var utils = require('./utils.js');
 var Icon = require('../Icon/Icon.js');
-var index = require('../../foundation/Transition/index.js');
 var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
 var Mixins = require('../../foundation/Mixins.js');
 var Typography = require('../../foundation/Typography.js');
+var index = require('../../foundation/Transition/index.js');
 
 const getColorFromColorVariantWithDefaultValue = (variant, defaultValue) => {
   switch (variant) {

package/dist/cjs/components/Modals/Modal/Modal.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.types.js","sources":["../../../../../src/components/Modals/Modal/Modal.types.ts"],"sourcesContent":["import {\n  type BezierComponentProps,\n  type ChildrenProps,\n  type SideContentProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ModalTitleSize {\n  L = 'L',\n  M = 'M',\n}\n\ninterface ModalOptions {\n  /**\n   * The controlled open state of the modal.\n   * Must be used in conjunction with `onShow` and `onHide`.\n   */\n  show?: boolean\n\n  /**\n   * The open state of the modal when it is initially rendered.\n   * Use when you **do not need to control** its open state.\n   */\n  defaultShow?: boolean\n\n  /**\n   * Callback function to be called when the modal is opened.\n   * @default noop\n   */\n  onShow?: () => void\n\n  /**\n   * Callback function to be called when the modal is closed.\n   * @default noop\n   */\n  onHide?: () => void\n}\n\ninterface ModalContentOptions {\n  /**\n   * Specify a container element to portal the content into.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n\n  /**\n   * Show close icon button that closes the modal when clicked.\n   * @default false\n   */\n  showCloseIcon?: boolean\n\n  /**\n   * Width of the modal.\n   * @default 'max-content'\n   */\n  width?: React.CSSProperties['width']\n\n  /**\n   * Height of the modal.\n   * @default 'fit-content'\n   */\n  height?: React.CSSProperties['height']\n\n  /**\n   * z-index of the modal content.\n   * Rather than using this option, Please check modal is positioned in the proper stacking context.\n   * @default ZIndex.Modal\n   */\n  zIndex?: React.CSSProperties['zIndex']\n}\n\ninterface ModalHeaderOptions {\n  /**\n   * An accessible title to be announced when the modal is opened.\n   */\n  title: React.ReactNode\n\n  /**\n   * An accessible subtitle to be announced when the modal is opened.\n   */\n  subtitle?: React.ReactNode\n\n  /**\n   * An accessible description to be announced when the modal is opened.\n   */\n  description?: React.ReactNode\n\n  /**\n   * Size of the title\n   * @default ModalTitleSize.L\n   */\n  titleSize?: ModalTitleSize\n\n  /**\n   * Hides content from the screen in an accessible way.\n   * @default false\n   */\n  hidden?: boolean\n}\n\ntype ModalFooterSideContent = React.ReactNode\n\ninterface ModalFooterOptions extends\n  SideContentProps<ModalFooterSideContent, ModalFooterSideContent> {}\n\nexport interface ModalProps extends\n  ChildrenProps,\n  ModalOptions {}\n\nexport interface ModalContentProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  ModalContentOptions {}\n\nexport interface ModalHeaderProps extends\n  BezierComponentProps,\n  Omit<React.HTMLAttributes<HTMLElement>, keyof ModalHeaderOptions>,\n  ModalHeaderOptions {}\n\nexport interface ModalBodyProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface ModalFooterProps extends\n  BezierComponentProps,\n  React.HTMLAttributes<HTMLElement>,\n  ModalFooterOptions {}\n\nexport interface ModalTriggerProps extends\n  ChildrenProps<React.ReactElement> {}\n\nexport interface ModalCloseProps extends\n  ChildrenProps<React.ReactElement> {}\n\nexport interface ModalContentContextValue extends\n  Required<Pick<ModalContentOptions, 'showCloseIcon'>> {}\n"],"names":["ModalTitleSize"],"mappings":";;AAMYA,IAAAA,cAAc,0BAAdA,cAAc,EAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"Modal.types.js","sources":["../../../../../src/components/Modals/Modal/Modal.types.ts"],"sourcesContent":["import {\n  type BezierComponentProps,\n  type ChildrenProps,\n  type SideContentProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ModalTitleSize {\n  L = 'L',\n  M = 'M',\n}\n\ninterface ModalOptions {\n  /**\n   * The controlled open state of the modal.\n   * Must be used in conjunction with `onShow` and `onHide`.\n   */\n  show?: boolean\n\n  /**\n   * The open state of the modal when it is initially rendered.\n   * Use when you **do not need to control** its open state.\n   */\n  defaultShow?: boolean\n\n  /**\n   * Callback function to be called when the modal is opened.\n   * @default noop\n   */\n  onShow?: () => void\n\n  /**\n   * Callback function to be called when the modal is closed.\n   * @default noop\n   */\n  onHide?: () => void\n}\n\ninterface ModalContentOptions {\n  /**\n   * Specify a container element to portal the content into.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n\n  /**\n   * Show close icon button that closes the modal when clicked.\n   * @default false\n   */\n  showCloseIcon?: boolean\n\n  /**\n   * Width of the modal.\n   * @default 'max-content'\n   */\n  width?: React.CSSProperties['width']\n\n  /**\n   * Height of the modal.\n   * @default 'fit-content'\n   */\n  height?: React.CSSProperties['height']\n\n  /**\n   * z-index of the modal content.\n   * Rather than using this option, Please check modal is positioned in the proper stacking context.\n   * @default ZIndex.Modal\n   */\n  zIndex?: React.CSSProperties['zIndex']\n}\n\ninterface ModalHeaderOptions {\n  /**\n   * An accessible title to be announced when the modal is opened.\n   */\n  title: React.ReactNode\n\n  /**\n   * An accessible subtitle to be announced when the modal is opened.\n   */\n  subtitle?: React.ReactNode\n\n  /**\n   * An accessible description to be announced when the modal is opened.\n   */\n  description?: React.ReactNode\n\n  /**\n   * Size of the title\n   * @default ModalTitleSize.L\n   */\n  titleSize?: ModalTitleSize\n\n  /**\n   * Hides content from the screen in an accessible way.\n   * @default false\n   */\n  hidden?: boolean\n}\n\ntype ModalFooterSideContent = React.ReactNode\n\ninterface ModalFooterOptions extends\n  SideContentProps<ModalFooterSideContent, ModalFooterSideContent> {}\n\nexport interface ModalProps extends\n  ChildrenProps,\n  ModalOptions {}\n\nexport interface ModalContentProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  ModalContentOptions {}\n\nexport interface ModalHeaderProps extends\n  BezierComponentProps,\n  Omit<React.HTMLAttributes<HTMLElement>, keyof ModalHeaderOptions>,\n  ModalHeaderOptions {}\n\nexport interface ModalBodyProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface ModalFooterProps extends\n  BezierComponentProps,\n  React.HTMLAttributes<HTMLElement>,\n  ModalFooterOptions {}\n\nexport interface ModalTriggerProps extends\n  ChildrenProps<React.ReactElement> {}\n\nexport interface ModalCloseProps extends\n  ChildrenProps<React.ReactElement> {}\n\nexport interface ModalContentPropsContextValue extends\n  Required<Pick<ModalContentOptions, 'showCloseIcon'>> {}\n"],"names":["ModalTitleSize"],"mappings":";;AAMYA,IAAAA,cAAc,0BAAdA,cAAc,EAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAdA,cAAc,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/components/Modals/Modal/ModalAnimation.styled.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var index = require('../../../foundation/Transition/index.js');
 var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
 var styled = require('styled-components');
-var index = require('../../../foundation/Transition/index.js');
 
 const overlayStyles = {
   open: FoundationStyledComponent.css`

package/dist/cjs/components/Modals/Modal/ModalContent.js

@@ -3,9 +3,10 @@
 var React = require('react');
 var index = require('../../../node_modules/@radix-ui/react-dialog/dist/index.js');
 var ZIndex = require('../../../constants/ZIndex.js');
+var useMergeRefs = require('../../../hooks/useMergeRefs.js');
 var domUtils = require('../../../utils/domUtils.js');
 var typeUtils = require('../../../utils/typeUtils.js');
-var ModalContentContext = require('./ModalContentContext.js');
+var ModalContext = require('./ModalContext.js');
 var ModalHelpers = require('./ModalHelpers.js');
 var Modal_styled = require('./Modal.styled.js');
 
@@ -17,13 +18,17 @@ var Modal_styled = require('./Modal.styled.js');
 const ModalContent = /*#__PURE__*/React.forwardRef(function ModalContent({
   children,
   style,
-  container = domUtils.document.body,
+  container = domUtils.getRootElement(),
   showCloseIcon = false,
   width = 'max-content',
   height = 'fit-content',
   zIndex = ZIndex.ZIndex.Modal,
   ...rest
 }, forwardedRef) {
+  const [contentContainer, setContentContainer] = React.useState();
+  const contentRef = useMergeRefs.default(forwardedRef, React.useCallback(node => {
+    setContentContainer(node ?? undefined);
+  }, []));
   const overlayStyle = React.useMemo(() => ({
     '--bezier-modal-z-index': zIndex
   }), [zIndex]);
@@ -32,7 +37,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef(function ModalContent({
     '--bezier-modal-width': typeUtils.isNumber(width) ? `${width}px` : width,
     '--bezier-modal-height': typeUtils.isNumber(height) ? `${height}px` : height
   }), [style, width, height]);
-  const contextValue = React.useMemo(() => ({
+  const propsContextValue = React.useMemo(() => ({
     showCloseIcon
   }), [showCloseIcon]);
   return /*#__PURE__*/React.createElement(index.Portal, {
@@ -43,11 +48,13 @@ const ModalContent = /*#__PURE__*/React.forwardRef(function ModalContent({
     asChild: true
   }, /*#__PURE__*/React.createElement(Modal_styled.Content, Object.assign({
     "aria-modal": true,
-    ref: forwardedRef,
+    ref: contentRef,
     style: contentStyle
-  }, rest), /*#__PURE__*/React.createElement(Modal_styled.Section, null, /*#__PURE__*/React.createElement(ModalContentContext.ModalContentContextProvider, {
-    value: contextValue
-  }, children), showCloseIcon && /*#__PURE__*/React.createElement(ModalHelpers.ModalClose, null, /*#__PURE__*/React.createElement(Modal_styled.CloseIconButton, null)))))));
+  }, rest), /*#__PURE__*/React.createElement(Modal_styled.Section, null, /*#__PURE__*/React.createElement(ModalContext.ModalContainerContextProvider, {
+    value: contentContainer
+  }, /*#__PURE__*/React.createElement(ModalContext.ModalContentPropsContextProvider, {
+    value: propsContextValue
+  }, children)), showCloseIcon && /*#__PURE__*/React.createElement(ModalHelpers.ModalClose, null, /*#__PURE__*/React.createElement(Modal_styled.CloseIconButton, null)))))));
 });
 
 exports.ModalContent = ModalContent;

package/dist/cjs/components/Modals/Modal/ModalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","sources":["../../../../../src/components/Modals/Modal/ModalContent.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport { document } from '~/src/utils/domUtils'\nimport { isNumber } from '~/src/utils/typeUtils'\n\nimport {\n  type ModalContentContextValue,\n  type ModalContentProps,\n} from './Modal.types'\nimport { ModalContentContextProvider } from './ModalContentContext'\nimport { ModalClose } from './ModalHelpers'\n\nimport * as Styled from './Modal.styled'\n\n/**\n * `ModalContent` is a container of the modal content.\n * It creates a portal to render the modal content outside of the DOM tree\n * and renders overlay behind the modal content too.\n */\nexport const ModalContent = forwardRef(function ModalContent({\n  children,\n  style,\n  container = document.body,\n  showCloseIcon = false,\n  width = 'max-content',\n  height = 'fit-content',\n  zIndex = ZIndex.Modal,\n  ...rest\n}: ModalContentProps, forwardedRef: React.Ref<HTMLDivElement>) {\n  const overlayStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-z-index': ModalContentProps['zIndex']\n  } => ({\n    '--bezier-modal-z-index': zIndex,\n  }), [zIndex])\n\n  const contentStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-width': ModalContentProps['width']\n    '--bezier-modal-height': ModalContentProps['height']\n  } => ({\n    ...style,\n    '--bezier-modal-width': isNumber(width) ? `${width}px` : width,\n    '--bezier-modal-height': isNumber(height) ? `${height}px` : height,\n  }), [\n    style,\n    width,\n    height,\n  ])\n\n  const contextValue = useMemo((): ModalContentContextValue => ({\n    showCloseIcon,\n  }), [showCloseIcon])\n\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <Styled.DialogPrimitiveOverlay style={overlayStyle}>\n        <DialogPrimitive.Content asChild>\n          <Styled.Content\n            aria-modal\n            ref={forwardedRef}\n            style={contentStyle}\n            {...rest}\n          >\n            <Styled.Section>\n              <ModalContentContextProvider value={contextValue}>\n                { children }\n              </ModalContentContextProvider>\n\n              { /* NOTE: To prevent focusing first on the close button when opening the modal, place the close button behind. */ }\n              { showCloseIcon && (\n                <ModalClose>\n                  <Styled.CloseIconButton />\n                </ModalClose>\n              ) }\n            </Styled.Section>\n          </Styled.Content>\n        </DialogPrimitive.Content>\n      </Styled.DialogPrimitiveOverlay>\n    </DialogPrimitive.Portal>\n  )\n})\n"],"names":["ModalContent","forwardRef","children","style","container","document","body","showCloseIcon","width","height","zIndex","ZIndex","Modal","rest","forwardedRef","overlayStyle","useMemo","contentStyle","isNumber","contextValue","React","createElement","DialogPrimitive","Styled","asChild","Object","assign","ref","ModalContentContextProvider","value","ModalClose"],"mappings":";;;;;;;;;;;AAoBA;AACA;AACA;AACA;AACA;MACaA,YAAY,gBAAGC,gBAAU,CAAC,SAASD,YAAYA,CAAC;EAC3DE,QAAQ;EACRC,KAAK;EACLC,SAAS,GAAGC,iBAAQ,CAACC,IAAI;AACzBC,EAAAA,aAAa,GAAG,KAAK;AACrBC,EAAAA,KAAK,GAAG,aAAa;AACrBC,EAAAA,MAAM,GAAG,aAAa;EACtBC,MAAM,GAAGC,aAAM,CAACC,KAAK;EACrB,GAAGC,IAAAA;AACc,CAAC,EAAEC,YAAuC,EAAE;AAC7D,EAAA,MAAMC,YAAY,GAAGC,aAAO,CAAC,OAEvB;AACJ,IAAA,wBAAwB,EAAEN,MAAAA;AAC5B,GAAC,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC,CAAA;AAEb,EAAA,MAAMO,YAAY,GAAGD,aAAO,CAAC,OAGvB;AACJ,IAAA,GAAGb,KAAK;IACR,sBAAsB,EAAEe,kBAAQ,CAACV,KAAK,CAAC,GAAI,CAAEA,EAAAA,KAAM,CAAG,EAAA,CAAA,GAAGA,KAAK;IAC9D,uBAAuB,EAAEU,kBAAQ,CAACT,MAAM,CAAC,GAAI,CAAA,EAAEA,MAAO,CAAA,EAAA,CAAG,GAAGA,MAAAA;GAC7D,CAAC,EAAE,CACFN,KAAK,EACLK,KAAK,EACLC,MAAM,CACP,CAAC,CAAA;AAEF,EAAA,MAAMU,YAAY,GAAGH,aAAO,CAAC,OAAiC;AAC5DT,IAAAA,aAAAA;AACF,GAAC,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEpB,EAAA,oBACEa,KAAA,CAAAC,aAAA,CAACC,YAAsB,EAAA;AAAClB,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,eAC3CgB,KAAA,CAAAC,aAAA,CAACE,mCAA6B,EAAA;AAACpB,IAAAA,KAAK,EAAEY,YAAAA;AAAa,GAAA,eACjDK,KAAA,CAAAC,aAAA,CAACC,aAAuB,EAAA;IAACE,OAAO,EAAA,IAAA;GAC9BJ,eAAAA,KAAA,CAAAC,aAAA,CAACE,oBAAc,EAAAE,MAAA,CAAAC,MAAA,CAAA;IACb,YAAU,EAAA,IAAA;AACVC,IAAAA,GAAG,EAAEb,YAAa;AAClBX,IAAAA,KAAK,EAAEc,YAAAA;AAAa,GAAA,EAChBJ,IAAI,CAAA,eAERO,KAAA,CAAAC,aAAA,CAACE,oBAAc,EACbH,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACO,+CAA2B,EAAA;AAACC,IAAAA,KAAK,EAAEV,YAAAA;GAChCjB,EAAAA,QACyB,CAAC,EAG5BK,aAAa,iBACba,KAAA,CAAAC,aAAA,CAACS,uBAAU,EACTV,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACE,4BAAsB,EAAA,IAAE,CACf,CAEA,CACF,CACO,CACI,CACT,CAAC,CAAA;AAE7B,CAAC;;;;"}
+{"version":3,"file":"ModalContent.js","sources":["../../../../../src/components/Modals/Modal/ModalContent.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { getRootElement } from '~/src/utils/domUtils'\nimport { isNumber } from '~/src/utils/typeUtils'\n\nimport {\n  type ModalContentProps,\n  type ModalContentPropsContextValue,\n} from './Modal.types'\nimport {\n  ModalContainerContextProvider,\n  ModalContentPropsContextProvider,\n} from './ModalContext'\nimport { ModalClose } from './ModalHelpers'\n\nimport * as Styled from './Modal.styled'\n\n/**\n * `ModalContent` is a container of the modal content.\n * It creates a portal to render the modal content outside of the DOM tree\n * and renders overlay behind the modal content too.\n */\nexport const ModalContent = forwardRef(function ModalContent({\n  children,\n  style,\n  container = getRootElement(),\n  showCloseIcon = false,\n  width = 'max-content',\n  height = 'fit-content',\n  zIndex = ZIndex.Modal,\n  ...rest\n}: ModalContentProps, forwardedRef: React.Ref<HTMLDivElement>) {\n  const [contentContainer, setContentContainer] = useState<HTMLElement>()\n\n  const contentRef = useMergeRefs(\n    forwardedRef,\n    useCallback((node: HTMLElement | null) => {\n      setContentContainer(node ?? undefined)\n    }, []),\n  )\n\n  const overlayStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-z-index': ModalContentProps['zIndex']\n  } => ({\n    '--bezier-modal-z-index': zIndex,\n  }), [zIndex])\n\n  const contentStyle = useMemo((): React.CSSProperties & {\n    '--bezier-modal-width': ModalContentProps['width']\n    '--bezier-modal-height': ModalContentProps['height']\n  } => ({\n    ...style,\n    '--bezier-modal-width': isNumber(width) ? `${width}px` : width,\n    '--bezier-modal-height': isNumber(height) ? `${height}px` : height,\n  }), [\n    style,\n    width,\n    height,\n  ])\n\n  const propsContextValue = useMemo((): ModalContentPropsContextValue => ({\n    showCloseIcon,\n  }), [showCloseIcon])\n\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <Styled.DialogPrimitiveOverlay style={overlayStyle}>\n        <DialogPrimitive.Content asChild>\n          <Styled.Content\n            aria-modal\n            ref={contentRef}\n            style={contentStyle}\n            {...rest}\n          >\n            <Styled.Section>\n              <ModalContainerContextProvider value={contentContainer}>\n                <ModalContentPropsContextProvider value={propsContextValue}>\n                  { children }\n                </ModalContentPropsContextProvider>\n              </ModalContainerContextProvider>\n\n              { /* NOTE: To prevent focusing first on the close button when opening the modal, place the close button behind. */ }\n              { showCloseIcon && (\n                <ModalClose>\n                  <Styled.CloseIconButton />\n                </ModalClose>\n              ) }\n            </Styled.Section>\n          </Styled.Content>\n        </DialogPrimitive.Content>\n      </Styled.DialogPrimitiveOverlay>\n    </DialogPrimitive.Portal>\n  )\n})\n"],"names":["ModalContent","forwardRef","children","style","container","getRootElement","showCloseIcon","width","height","zIndex","ZIndex","Modal","rest","forwardedRef","contentContainer","setContentContainer","useState","contentRef","useMergeRefs","useCallback","node","undefined","overlayStyle","useMemo","contentStyle","isNumber","propsContextValue","React","createElement","DialogPrimitive","Styled","asChild","Object","assign","ref","ModalContainerContextProvider","value","ModalContentPropsContextProvider","ModalClose"],"mappings":";;;;;;;;;;;;AA0BA;AACA;AACA;AACA;AACA;MACaA,YAAY,gBAAGC,gBAAU,CAAC,SAASD,YAAYA,CAAC;EAC3DE,QAAQ;EACRC,KAAK;EACLC,SAAS,GAAGC,uBAAc,EAAE;AAC5BC,EAAAA,aAAa,GAAG,KAAK;AACrBC,EAAAA,KAAK,GAAG,aAAa;AACrBC,EAAAA,MAAM,GAAG,aAAa;EACtBC,MAAM,GAAGC,aAAM,CAACC,KAAK;EACrB,GAAGC,IAAAA;AACc,CAAC,EAAEC,YAAuC,EAAE;EAC7D,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGC,cAAQ,EAAe,CAAA;EAEvE,MAAMC,UAAU,GAAGC,oBAAY,CAC7BL,YAAY,EACZM,iBAAW,CAAEC,IAAwB,IAAK;AACxCL,IAAAA,mBAAmB,CAACK,IAAI,IAAIC,SAAS,CAAC,CAAA;GACvC,EAAE,EAAE,CACP,CAAC,CAAA;AAED,EAAA,MAAMC,YAAY,GAAGC,aAAO,CAAC,OAEvB;AACJ,IAAA,wBAAwB,EAAEd,MAAAA;AAC5B,GAAC,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC,CAAA;AAEb,EAAA,MAAMe,YAAY,GAAGD,aAAO,CAAC,OAGvB;AACJ,IAAA,GAAGpB,KAAK;IACR,sBAAsB,EAAEsB,kBAAQ,CAAClB,KAAK,CAAC,GAAI,CAAEA,EAAAA,KAAM,CAAG,EAAA,CAAA,GAAGA,KAAK;IAC9D,uBAAuB,EAAEkB,kBAAQ,CAACjB,MAAM,CAAC,GAAI,CAAA,EAAEA,MAAO,CAAA,EAAA,CAAG,GAAGA,MAAAA;GAC7D,CAAC,EAAE,CACFL,KAAK,EACLI,KAAK,EACLC,MAAM,CACP,CAAC,CAAA;AAEF,EAAA,MAAMkB,iBAAiB,GAAGH,aAAO,CAAC,OAAsC;AACtEjB,IAAAA,aAAAA;AACF,GAAC,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC,CAAA;AAEpB,EAAA,oBACEqB,KAAA,CAAAC,aAAA,CAACC,YAAsB,EAAA;AAACzB,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,eAC3CuB,KAAA,CAAAC,aAAA,CAACE,mCAA6B,EAAA;AAAC3B,IAAAA,KAAK,EAAEmB,YAAAA;AAAa,GAAA,eACjDK,KAAA,CAAAC,aAAA,CAACC,aAAuB,EAAA;IAACE,OAAO,EAAA,IAAA;GAC9BJ,eAAAA,KAAA,CAAAC,aAAA,CAACE,oBAAc,EAAAE,MAAA,CAAAC,MAAA,CAAA;IACb,YAAU,EAAA,IAAA;AACVC,IAAAA,GAAG,EAAEjB,UAAW;AAChBd,IAAAA,KAAK,EAAEqB,YAAAA;AAAa,GAAA,EAChBZ,IAAI,CAAA,eAERe,KAAA,CAAAC,aAAA,CAACE,oBAAc,EACbH,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACO,0CAA6B,EAAA;AAACC,IAAAA,KAAK,EAAEtB,gBAAAA;AAAiB,GAAA,eACrDa,KAAA,CAAAC,aAAA,CAACS,6CAAgC,EAAA;AAACD,IAAAA,KAAK,EAAEV,iBAAAA;GACrCxB,EAAAA,QAC8B,CACL,CAAC,EAG9BI,aAAa,iBACbqB,KAAA,CAAAC,aAAA,CAACU,uBAAU,EACTX,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACE,4BAAsB,EAAA,IAAE,CACf,CAEA,CACF,CACO,CACI,CACT,CAAC,CAAA;AAE7B,CAAC;;;;"}

package/dist/cjs/components/Modals/Modal/ModalContext.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var reactUtils = require('../../../utils/reactUtils.js');
+
+const [ModalContentPropsContextProvider, useModalContentPropsContext] = reactUtils.createContext({
+  showCloseIcon: false
+});
+const [ModalContainerContextProvider, useModalContainerContext] = reactUtils.createContext(undefined);
+
+exports.ModalContainerContextProvider = ModalContainerContextProvider;
+exports.ModalContentPropsContextProvider = ModalContentPropsContextProvider;
+exports.useModalContainerContext = useModalContainerContext;
+exports.useModalContentPropsContext = useModalContentPropsContext;
+//# sourceMappingURL=ModalContext.js.map

package/dist/cjs/components/Modals/Modal/ModalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.js","sources":["../../../../../src/components/Modals/Modal/ModalContext.ts"],"sourcesContent":["import { createContext } from '~/src/utils/reactUtils'\n\nimport { type ModalContentPropsContextValue } from './Modal.types'\n\nexport const [\n  ModalContentPropsContextProvider,\n  useModalContentPropsContext,\n] = createContext<ModalContentPropsContextValue>({\n  showCloseIcon: false,\n})\n\nexport const [\n  ModalContainerContextProvider,\n  useModalContainerContext,\n] = createContext<HTMLElement | undefined>(undefined)\n"],"names":["ModalContentPropsContextProvider","useModalContentPropsContext","createContext","showCloseIcon","ModalContainerContextProvider","useModalContainerContext","undefined"],"mappings":";;;;AAIO,MAAM,CACXA,gCAAgC,EAChCC,2BAA2B,CAC5B,GAAGC,wBAAa,CAAgC;AAC/CC,EAAAA,aAAa,EAAE,KAAA;AACjB,CAAC,EAAC;AAEK,MAAM,CACXC,6BAA6B,EAC7BC,wBAAwB,CACzB,GAAGH,wBAAa,CAA0BI,SAAS;;;;;;;"}

package/dist/cjs/components/Modals/Modal/ModalHeader.js

@@ -4,7 +4,7 @@ var React = require('react');
 var index = require('../../../node_modules/@radix-ui/react-dialog/dist/index.js');
 var Text = require('../../Text/Text.js');
 var Modal_types = require('./Modal.types.js');
-var ModalContentContext = require('./ModalContentContext.js');
+var ModalContext = require('./ModalContext.js');
 var Modal_styled = require('./Modal.styled.js');
 var VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
 var Typography = require('../../../foundation/Typography.js');
@@ -59,7 +59,7 @@ const ModalHeader = /*#__PURE__*/React.forwardRef(function ModalHeader({
 }, forwardedRef) {
   const {
     showCloseIcon
-  } = ModalContentContext.useModalContentContext();
+  } = ModalContext.useModalContentPropsContext();
   const hasTitleArea = title || showCloseIcon;
   const Hidden = hidden ? VisuallyHidden.VisuallyHidden : React.Fragment;
   return /*#__PURE__*/React.createElement(Hidden, null, /*#__PURE__*/React.createElement(Modal_styled.Header, Object.assign({

package/dist/cjs/components/Modals/Modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../../../src/components/Modals/Modal/ModalHeader.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { Typography } from '~/src/foundation'\n\nimport { Text } from '~/src/components/Text'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport {\n  type ModalHeaderProps,\n  ModalTitleSize,\n} from './Modal.types'\nimport { useModalContentContext } from './ModalContentContext'\n\nimport * as Styled from './Modal.styled'\n\nfunction getTitleTypo(size: ModalTitleSize) {\n  switch (size) {\n    case ModalTitleSize.L:\n      return Typography.Size24\n    case ModalTitleSize.M:\n      return Typography.Size16\n    default:\n      return Typography.Size16\n  }\n}\n\nfunction ModalHeaderTitle({\n  children,\n  size,\n  subtitle,\n}: React.PropsWithChildren<Pick<ModalHeaderProps, 'subtitle'> & { size: NonNullable<ModalHeaderProps['titleSize']> }>) {\n  const hasSubtitle = !!subtitle\n  const titleTypo = getTitleTypo(size)\n\n  return (\n    <DialogPrimitive.Title asChild>\n      { hasSubtitle\n        ? (\n          <Styled.HeadingGroup\n            role=\"group\"\n            aria-roledescription=\"Heading group\"\n          >\n            <Styled.Title typo={titleTypo}>\n              { children }\n            </Styled.Title>\n\n            <Text\n              aria-roledescription=\"subtitle\"\n              as=\"p\"\n              bold\n              color=\"txt-black-dark\"\n              typo={Typography.Size13}\n            >\n              { subtitle }\n            </Text>\n          </Styled.HeadingGroup>\n        )\n        : (\n          <Styled.Title typo={titleTypo}>\n            { children }\n          </Styled.Title>\n        ) }\n    </DialogPrimitive.Title>\n  )\n}\n\n/**\n * `ModalHeader` is a header of the modal content.\n * It renders the accessible title and description of the modal.\n * If you want to hide the title and description, use `hidden` prop.\n */\nexport const ModalHeader = forwardRef(function ModalHeader({\n  title,\n  subtitle,\n  description,\n  titleSize = ModalTitleSize.L,\n  hidden = false,\n  ...rest\n}: ModalHeaderProps, forwardedRef: React.Ref<HTMLElement>) {\n  const { showCloseIcon } = useModalContentContext()\n  const hasTitleArea = title || showCloseIcon\n  const Hidden = hidden ? VisuallyHidden : React.Fragment\n\n  return (\n    <Hidden>\n      <Styled.Header\n        ref={forwardedRef}\n        hidden={hidden}\n        {...rest}\n      >\n        { hasTitleArea && (\n          <Styled.TitleContainer>\n            { title && (\n              <ModalHeaderTitle\n                size={titleSize}\n                subtitle={subtitle}\n              >\n                { title }\n              </ModalHeaderTitle>\n            ) }\n\n            { showCloseIcon && (\n              <Styled.CloseIconButtonSpacer />\n            ) }\n          </Styled.TitleContainer>\n        ) }\n\n        { description && (\n          <DialogPrimitive.Description asChild>\n            <Text\n              as=\"p\"\n              color=\"txt-black-darkest\"\n              typo={Typography.Size15}\n            >\n              { description }\n            </Text>\n          </DialogPrimitive.Description>\n        ) }\n      </Styled.Header>\n    </Hidden>\n  )\n})\n"],"names":["getTitleTypo","size","ModalTitleSize","L","Typography","Size24","M","Size16","ModalHeaderTitle","children","subtitle","hasSubtitle","titleTypo","React","createElement","DialogPrimitive","asChild","Styled","role","typo","Text","as","bold","color","Size13","ModalHeader","forwardRef","title","description","titleSize","hidden","rest","forwardedRef","showCloseIcon","useModalContentContext","hasTitleArea","Hidden","VisuallyHidden","Fragment","Object","assign","ref","Size15"],"mappings":"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"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../../../src/components/Modals/Modal/ModalHeader.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\n\nimport { Typography } from '~/src/foundation'\n\nimport { Text } from '~/src/components/Text'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport {\n  type ModalHeaderProps,\n  ModalTitleSize,\n} from './Modal.types'\nimport { useModalContentPropsContext } from './ModalContext'\n\nimport * as Styled from './Modal.styled'\n\nfunction getTitleTypo(size: ModalTitleSize) {\n  switch (size) {\n    case ModalTitleSize.L:\n      return Typography.Size24\n    case ModalTitleSize.M:\n      return Typography.Size16\n    default:\n      return Typography.Size16\n  }\n}\n\nfunction ModalHeaderTitle({\n  children,\n  size,\n  subtitle,\n}: React.PropsWithChildren<Pick<ModalHeaderProps, 'subtitle'> & { size: NonNullable<ModalHeaderProps['titleSize']> }>) {\n  const hasSubtitle = !!subtitle\n  const titleTypo = getTitleTypo(size)\n\n  return (\n    <DialogPrimitive.Title asChild>\n      { hasSubtitle\n        ? (\n          <Styled.HeadingGroup\n            role=\"group\"\n            aria-roledescription=\"Heading group\"\n          >\n            <Styled.Title typo={titleTypo}>\n              { children }\n            </Styled.Title>\n\n            <Text\n              aria-roledescription=\"subtitle\"\n              as=\"p\"\n              bold\n              color=\"txt-black-dark\"\n              typo={Typography.Size13}\n            >\n              { subtitle }\n            </Text>\n          </Styled.HeadingGroup>\n        )\n        : (\n          <Styled.Title typo={titleTypo}>\n            { children }\n          </Styled.Title>\n        ) }\n    </DialogPrimitive.Title>\n  )\n}\n\n/**\n * `ModalHeader` is a header of the modal content.\n * It renders the accessible title and description of the modal.\n * If you want to hide the title and description, use `hidden` prop.\n */\nexport const ModalHeader = forwardRef(function ModalHeader({\n  title,\n  subtitle,\n  description,\n  titleSize = ModalTitleSize.L,\n  hidden = false,\n  ...rest\n}: ModalHeaderProps, forwardedRef: React.Ref<HTMLElement>) {\n  const { showCloseIcon } = useModalContentPropsContext()\n  const hasTitleArea = title || showCloseIcon\n  const Hidden = hidden ? VisuallyHidden : React.Fragment\n\n  return (\n    <Hidden>\n      <Styled.Header\n        ref={forwardedRef}\n        hidden={hidden}\n        {...rest}\n      >\n        { hasTitleArea && (\n          <Styled.TitleContainer>\n            { title && (\n              <ModalHeaderTitle\n                size={titleSize}\n                subtitle={subtitle}\n              >\n                { title }\n              </ModalHeaderTitle>\n            ) }\n\n            { showCloseIcon && (\n              <Styled.CloseIconButtonSpacer />\n            ) }\n          </Styled.TitleContainer>\n        ) }\n\n        { description && (\n          <DialogPrimitive.Description asChild>\n            <Text\n              as=\"p\"\n              color=\"txt-black-darkest\"\n              typo={Typography.Size15}\n            >\n              { description }\n            </Text>\n          </DialogPrimitive.Description>\n        ) }\n      </Styled.Header>\n    </Hidden>\n  )\n})\n"],"names":["getTitleTypo","size","ModalTitleSize","L","Typography","Size24","M","Size16","ModalHeaderTitle","children","subtitle","hasSubtitle","titleTypo","React","createElement","DialogPrimitive","asChild","Styled","role","typo","Text","as","bold","color","Size13","ModalHeader","forwardRef","title","description","titleSize","hidden","rest","forwardedRef","showCloseIcon","useModalContentPropsContext","hasTitleArea","Hidden","VisuallyHidden","Fragment","Object","assign","ref","Size15"],"mappings":"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"}

package/dist/cjs/components/Overlay/Overlay.js

@@ -10,6 +10,7 @@ var domUtils = require('../../utils/domUtils.js');
 var functionUtils = require('../../utils/functionUtils.js');
 var Overlay_types = require('./Overlay.types.js');
 var Overlay_styled = require('./Overlay.styled.js');
+var ModalContext = require('../Modals/Modal/ModalContext.js');
 
 const CONTAINER_TEST_ID = 'bezier-react-container';
 const WRAPPER_TEST_ID = 'bezier-react-wrapper';
@@ -25,7 +26,7 @@ function Overlay({
   style,
   containerClassName = '',
   containerStyle,
-  container,
+  container: givenContainer,
   target,
   position = Overlay_types.OverlayPosition.LeftCenter,
   marginX = 0,
@@ -38,9 +39,7 @@ function Overlay({
   onTransitionEnd = functionUtils.noop,
   ...rest
 }, forwardedRef) {
-  // NOTE: DOM render 가 필요한지 여부를 결정하는 state
   const [shouldRender, setShouldRender] = React.useState(false);
-  // NOTE: 화면에 실제 표현해야 하는지 여부를 결정하는 state
   const [shouldShow, setShouldShow] = React.useState(false);
   const containerRect = React.useRef(null);
   const targetRect = React.useRef(null);
@@ -48,26 +47,29 @@ function Overlay({
   const containerRef = React.useRef(null);
   const overlayRef = React.useRef(null);
   const mergedRef = useMergeRefs.default(overlayRef, forwardedRef);
+  const defaultContainer = domUtils.getRootElement();
+  const modalContainer = ModalContext.useModalContainerContext();
+  const hasContainer = Boolean(givenContainer || modalContainer);
+  const container = givenContainer ?? modalContainer ?? defaultContainer;
   const handleOverlayForceUpdate = React.useCallback(() => {
     forceUpdate();
   }, []);
   const handleContainerRect = React.useCallback(() => {
-    const containerElement = container || domUtils.getRootElement();
     const {
       width: containerWidth,
       height: containerHeight,
       top: containerTop,
       left: containerLeft
-    } = containerElement.getBoundingClientRect();
+    } = container.getBoundingClientRect();
     containerRect.current = {
       containerWidth,
       containerHeight,
       containerTop,
       containerLeft,
-      scrollTop: container ? container.scrollTop : 0,
-      scrollLeft: container ? container.scrollLeft : 0
+      scrollTop: hasContainer ? container.scrollTop : 0,
+      scrollLeft: hasContainer ? container.scrollLeft : 0
     };
-  }, [container]);
+  }, [container, hasContainer]);
   React.useLayoutEffect(function initContainerRect() {
     if (show) {
       handleContainerRect();
@@ -146,7 +148,7 @@ function Overlay({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   , [as, children, className, containerRect, handleTransitionEnd, keepInContainer, marginX, marginY, mergedRef, position, shouldShow, style, targetRect, testId, withTransition, dummy]);
   const overlay = React.useMemo(() => {
-    if (container) {
+    if (hasContainer) {
       return Content;
     }
     return /*#__PURE__*/React.createElement(Overlay_styled.DefaultContainer, {
@@ -158,7 +160,7 @@ function Overlay({
     }, /*#__PURE__*/React.createElement(Overlay_styled.DefaultWrapper, {
       "data-testid": wrapperTestId
     }, Content));
-  }, [container, containerClassName, show, containerStyle, containerTestId, wrapperTestId, Content]);
+  }, [hasContainer, containerClassName, show, containerStyle, containerTestId, wrapperTestId, Content]);
   React.useEffect(() => {
     handleOverlayForceUpdate();
   }, [children, handleOverlayForceUpdate]);
@@ -196,7 +198,7 @@ function Overlay({
   if (!shouldRender) {
     return null;
   }
-  return /*#__PURE__*/ReactDOM.createPortal(overlay, container || domUtils.getRootElement());
+  return /*#__PURE__*/ReactDOM.createPortal(overlay, container);
 }
 var Overlay$1 = /*#__PURE__*/React.forwardRef(Overlay);
 

package/dist/cjs/components/Overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react'\n\nimport ReactDOM from 'react-dom'\n\nimport useEventHandler from '~/src/hooks/useEventHandler'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport {\n  document,\n  getRootElement,\n  window,\n} from '~/src/utils/domUtils'\nimport { noop } from '~/src/utils/functionUtils'\n\nimport type OverlayProps from './Overlay.types'\nimport {\n  type ContainerRectAttr,\n  type TargetRectAttr,\n} from './Overlay.types'\nimport { OverlayPosition } from './Overlay.types'\n\nimport * as Styled from './Overlay.styled'\n\nexport const CONTAINER_TEST_ID = 'bezier-react-container'\nexport const WRAPPER_TEST_ID = 'bezier-react-wrapper'\nexport const OVERLAY_TEST_ID = 'bezier-react-overlay'\nexport const ESCAPE_KEY = 'Escape'\n\nfunction Overlay(\n  {\n    as,\n    containerTestId = CONTAINER_TEST_ID,\n    wrapperTestId = WRAPPER_TEST_ID,\n    testId = OVERLAY_TEST_ID,\n    show = false,\n    className = '',\n    style,\n    containerClassName = '',\n    containerStyle,\n    container,\n    target,\n    position = OverlayPosition.LeftCenter,\n    marginX = 0,\n    marginY = 0,\n    keepInContainer = false,\n    withTransition = false,\n    enableClickOutside = false,\n    children,\n    onHide = noop,\n    onTransitionEnd = noop,\n    ...rest\n  }: OverlayProps,\n  forwardedRef: Ref<HTMLDivElement>,\n) {\n  // NOTE: DOM render 가 필요한지 여부를 결정하는 state\n  const [shouldRender, setShouldRender] = useState(false)\n  // NOTE: 화면에 실제 표현해야 하는지 여부를 결정하는 state\n  const [shouldShow, setShouldShow] = useState(false)\n  const containerRect = useRef<ContainerRectAttr | null>(null)\n  const targetRect = useRef<TargetRectAttr | null>(null)\n\n  const [dummy, forceUpdate] = useReducer(x => !x, true)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const mergedRef = useMergeRefs<HTMLDivElement>(overlayRef, forwardedRef)\n\n  const handleOverlayForceUpdate = useCallback(() => {\n    forceUpdate()\n  }, [])\n\n  const handleContainerRect = useCallback(() => {\n    const containerElement = container || getRootElement()\n\n    const {\n      width: containerWidth,\n      height: containerHeight,\n      top: containerTop,\n      left: containerLeft,\n    } = containerElement.getBoundingClientRect()\n\n    containerRect.current = {\n      containerWidth,\n      containerHeight,\n      containerTop,\n      containerLeft,\n      scrollTop: container ? container.scrollTop : 0,\n      scrollLeft: container ? container.scrollLeft : 0,\n    }\n  }, [container])\n\n  useLayoutEffect(function initContainerRect() {\n    if (show) {\n      handleContainerRect()\n    }\n  }, [\n    show,\n    handleContainerRect,\n  ])\n\n  const handleTargetRect = useCallback(() => {\n    if (!target) {\n      return\n    }\n    const {\n      width: targetWidth,\n      height: targetHeight,\n      top: targetTop,\n      left: targetLeft,\n    } = target.getBoundingClientRect()\n    const { clientTop, clientLeft } = target\n\n    targetRect.current = {\n      targetWidth,\n      targetHeight,\n      targetTop,\n      targetLeft,\n      clientTop,\n      clientLeft,\n    }\n  }, [target])\n\n  useLayoutEffect(function initTargetRect() {\n    if (show) {\n      handleTargetRect()\n    }\n  }, [\n    show,\n    handleTargetRect,\n  ])\n\n  const handleTransitionEnd = useCallback<React.TransitionEventHandler<HTMLDivElement>>((event) => {\n    onTransitionEnd(event)\n    if (!show) {\n      setShouldRender(false)\n    }\n  }, [\n    show,\n    onTransitionEnd,\n  ])\n\n  const handleBlockMouseWheel = useCallback((event: HTMLElementEventMap['wheel']) => {\n    event.stopPropagation()\n  }, [])\n\n  const handleHideOverlay = useCallback((event: any) => {\n    if (!event.target?.closest(Styled.Overlay)) {\n      onHide()\n\n      if (!enableClickOutside) {\n        event.stopPropagation()\n      }\n    }\n  }, [\n    enableClickOutside,\n    onHide,\n  ])\n\n  const handleKeydown = useCallback((event: HTMLElementEventMap['keyup']) => {\n    if (event.key === ESCAPE_KEY) {\n      onHide()\n    }\n  }, [onHide])\n\n  useEventHandler(document, 'click', handleHideOverlay, show, true)\n  useEventHandler(document, 'keydown', handleKeydown, show)\n  useEventHandler(containerRef.current, 'wheel', handleBlockMouseWheel, show)\n\n  const Content = useMemo(() => (\n    <Styled.Overlay\n      as={as}\n      ref={mergedRef}\n      className={className}\n      show={shouldShow}\n      withTransition={withTransition}\n      style={style}\n      data-testid={testId}\n      containerRect={containerRect.current}\n      targetRect={targetRect.current}\n      overlay={overlayRef.current}\n      position={position}\n      marginX={marginX}\n      marginY={marginY}\n      keepInContainer={keepInContainer}\n      onTransitionEnd={handleTransitionEnd}\n      {...rest}\n    >\n      { children }\n    </Styled.Overlay>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  ), [\n    as,\n    children,\n    className,\n    containerRect,\n    handleTransitionEnd,\n    keepInContainer,\n    marginX,\n    marginY,\n    mergedRef,\n    position,\n    shouldShow,\n    style,\n    targetRect,\n    testId,\n    withTransition,\n    dummy,\n  ])\n\n  const overlay = useMemo(() => {\n    if (container) {\n      return Content\n    }\n\n    return (\n      <Styled.DefaultContainer\n        ref={containerRef}\n        className={containerClassName}\n        show={show}\n        style={containerStyle}\n        data-testid={containerTestId}\n      >\n        <Styled.DefaultWrapper data-testid={wrapperTestId}>\n          { Content }\n        </Styled.DefaultWrapper>\n      </Styled.DefaultContainer>\n    )\n  }, [\n    container,\n    containerClassName,\n    show,\n    containerStyle,\n    containerTestId,\n    wrapperTestId,\n    Content,\n  ])\n\n  useEffect(() => {\n    handleOverlayForceUpdate()\n  }, [\n    children,\n    handleOverlayForceUpdate,\n  ])\n\n  /**\n   * Case 1: show === true\n   * show -> shouldRender -> shouldShow\n   * shouldRender 를 true 로 설정하고, 직후에 shouldShow 를 true 로 설정하여 transition 유발\n   *\n   * Case 2: show === false\n   * show -> shouldShow -> (...) -> shouldRender\n   * shouldShow 를 false 로 설정하고, shouldRender 는 transition 필요 여부에 따라 다르게 결정함\n   *    Case 2-1: withTransition === true\n   *    shouldShow -> onTransitionEnd -> shouldRender\n   *    onTransitionEnd handler 를 이용해 transition 이 끝난 다음 shouldRender 를 false 로 설정\n   *    Case 2-2: withTransition === false\n   *    shouldShow && shouldRender\n   *    transition 을 기다릴 필요가 없으므로 바로 shouldRender 를 false 로 설정\n   */\n  useEffect(() => {\n    if (show) {\n      if (shouldRender) {\n        window.requestAnimationFrame(() => setShouldShow(true))\n      } else {\n        window.requestAnimationFrame(() => setShouldRender(true))\n      }\n    }\n\n    if (!show) {\n      window.requestAnimationFrame(() => setShouldShow(false))\n\n      if (!withTransition) {\n        window.requestAnimationFrame(() => setShouldRender(false))\n      }\n    }\n  }, [\n    show,\n    withTransition,\n    shouldRender,\n    shouldShow,\n  ])\n\n  if (!shouldRender) { return null }\n\n  return ReactDOM.createPortal(\n    overlay,\n    container || getRootElement(),\n  )\n}\n\nexport default forwardRef(Overlay)\n"],"names":["CONTAINER_TEST_ID","WRAPPER_TEST_ID","OVERLAY_TEST_ID","ESCAPE_KEY","Overlay","as","containerTestId","wrapperTestId","testId","show","className","style","containerClassName","containerStyle","container","target","position","OverlayPosition","LeftCenter","marginX","marginY","keepInContainer","withTransition","enableClickOutside","children","onHide","noop","onTransitionEnd","rest","forwardedRef","shouldRender","setShouldRender","useState","shouldShow","setShouldShow","containerRect","useRef","targetRect","dummy","forceUpdate","useReducer","x","containerRef","overlayRef","mergedRef","useMergeRefs","handleOverlayForceUpdate","useCallback","handleContainerRect","containerElement","getRootElement","width","containerWidth","height","containerHeight","top","containerTop","left","containerLeft","getBoundingClientRect","current","scrollTop","scrollLeft","useLayoutEffect","initContainerRect","handleTargetRect","targetWidth","targetHeight","targetTop","targetLeft","clientTop","clientLeft","initTargetRect","handleTransitionEnd","event","handleBlockMouseWheel","stopPropagation","handleHideOverlay","closest","Styled","handleKeydown","key","useEventHandler","document","Content","useMemo","React","createElement","Object","assign","ref","overlay","useEffect","window","requestAnimationFrame","ReactDOM","createPortal","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Overlay.js","sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react'\n\nimport ReactDOM from 'react-dom'\n\nimport useEventHandler from '~/src/hooks/useEventHandler'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport {\n  document,\n  getRootElement,\n  window,\n} from '~/src/utils/domUtils'\nimport { noop } from '~/src/utils/functionUtils'\n\nimport { useModalContainerContext } from '~/src/components/Modals'\n\nimport type OverlayProps from './Overlay.types'\nimport {\n  type ContainerRectAttr,\n  type TargetRectAttr,\n} from './Overlay.types'\nimport { OverlayPosition } from './Overlay.types'\n\nimport * as Styled from './Overlay.styled'\n\nexport const CONTAINER_TEST_ID = 'bezier-react-container'\nexport const WRAPPER_TEST_ID = 'bezier-react-wrapper'\nexport const OVERLAY_TEST_ID = 'bezier-react-overlay'\nexport const ESCAPE_KEY = 'Escape'\n\nfunction Overlay(\n  {\n    as,\n    containerTestId = CONTAINER_TEST_ID,\n    wrapperTestId = WRAPPER_TEST_ID,\n    testId = OVERLAY_TEST_ID,\n    show = false,\n    className = '',\n    style,\n    containerClassName = '',\n    containerStyle,\n    container: givenContainer,\n    target,\n    position = OverlayPosition.LeftCenter,\n    marginX = 0,\n    marginY = 0,\n    keepInContainer = false,\n    withTransition = false,\n    enableClickOutside = false,\n    children,\n    onHide = noop,\n    onTransitionEnd = noop,\n    ...rest\n  }: OverlayProps,\n  forwardedRef: Ref<HTMLDivElement>,\n) {\n  const [shouldRender, setShouldRender] = useState(false)\n  const [shouldShow, setShouldShow] = useState(false)\n\n  const containerRect = useRef<ContainerRectAttr | null>(null)\n  const targetRect = useRef<TargetRectAttr | null>(null)\n\n  const [dummy, forceUpdate] = useReducer(x => !x, true)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const mergedRef = useMergeRefs<HTMLDivElement>(overlayRef, forwardedRef)\n\n  const defaultContainer = getRootElement()\n  const modalContainer = useModalContainerContext()\n\n  const hasContainer = Boolean(givenContainer || modalContainer)\n  const container = givenContainer ?? modalContainer ?? defaultContainer\n\n  const handleOverlayForceUpdate = useCallback(() => {\n    forceUpdate()\n  }, [])\n\n  const handleContainerRect = useCallback(() => {\n    const {\n      width: containerWidth,\n      height: containerHeight,\n      top: containerTop,\n      left: containerLeft,\n    } = container.getBoundingClientRect()\n\n    containerRect.current = {\n      containerWidth,\n      containerHeight,\n      containerTop,\n      containerLeft,\n      scrollTop: hasContainer ? container.scrollTop : 0,\n      scrollLeft: hasContainer ? container.scrollLeft : 0,\n    }\n  }, [\n    container,\n    hasContainer,\n  ])\n\n  useLayoutEffect(function initContainerRect() {\n    if (show) {\n      handleContainerRect()\n    }\n  }, [\n    show,\n    handleContainerRect,\n  ])\n\n  const handleTargetRect = useCallback(() => {\n    if (!target) {\n      return\n    }\n    const {\n      width: targetWidth,\n      height: targetHeight,\n      top: targetTop,\n      left: targetLeft,\n    } = target.getBoundingClientRect()\n    const { clientTop, clientLeft } = target\n\n    targetRect.current = {\n      targetWidth,\n      targetHeight,\n      targetTop,\n      targetLeft,\n      clientTop,\n      clientLeft,\n    }\n  }, [target])\n\n  useLayoutEffect(function initTargetRect() {\n    if (show) {\n      handleTargetRect()\n    }\n  }, [\n    show,\n    handleTargetRect,\n  ])\n\n  const handleTransitionEnd = useCallback<React.TransitionEventHandler<HTMLDivElement>>((event) => {\n    onTransitionEnd(event)\n    if (!show) {\n      setShouldRender(false)\n    }\n  }, [\n    show,\n    onTransitionEnd,\n  ])\n\n  const handleBlockMouseWheel = useCallback((event: HTMLElementEventMap['wheel']) => {\n    event.stopPropagation()\n  }, [])\n\n  const handleHideOverlay = useCallback((event: any) => {\n    if (!event.target?.closest(Styled.Overlay)) {\n      onHide()\n\n      if (!enableClickOutside) {\n        event.stopPropagation()\n      }\n    }\n  }, [\n    enableClickOutside,\n    onHide,\n  ])\n\n  const handleKeydown = useCallback((event: HTMLElementEventMap['keyup']) => {\n    if (event.key === ESCAPE_KEY) {\n      onHide()\n    }\n  }, [onHide])\n\n  useEventHandler(document, 'click', handleHideOverlay, show, true)\n  useEventHandler(document, 'keydown', handleKeydown, show)\n  useEventHandler(containerRef.current, 'wheel', handleBlockMouseWheel, show)\n\n  const Content = useMemo(() => (\n    <Styled.Overlay\n      as={as}\n      ref={mergedRef}\n      className={className}\n      show={shouldShow}\n      withTransition={withTransition}\n      style={style}\n      data-testid={testId}\n      containerRect={containerRect.current}\n      targetRect={targetRect.current}\n      overlay={overlayRef.current}\n      position={position}\n      marginX={marginX}\n      marginY={marginY}\n      keepInContainer={keepInContainer}\n      onTransitionEnd={handleTransitionEnd}\n      {...rest}\n    >\n      { children }\n    </Styled.Overlay>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  ), [\n    as,\n    children,\n    className,\n    containerRect,\n    handleTransitionEnd,\n    keepInContainer,\n    marginX,\n    marginY,\n    mergedRef,\n    position,\n    shouldShow,\n    style,\n    targetRect,\n    testId,\n    withTransition,\n    dummy,\n  ])\n\n  const overlay = useMemo(() => {\n    if (hasContainer) {\n      return Content\n    }\n\n    return (\n      <Styled.DefaultContainer\n        ref={containerRef}\n        className={containerClassName}\n        show={show}\n        style={containerStyle}\n        data-testid={containerTestId}\n      >\n        <Styled.DefaultWrapper data-testid={wrapperTestId}>\n          { Content }\n        </Styled.DefaultWrapper>\n      </Styled.DefaultContainer>\n    )\n  }, [\n    hasContainer,\n    containerClassName,\n    show,\n    containerStyle,\n    containerTestId,\n    wrapperTestId,\n    Content,\n  ])\n\n  useEffect(() => {\n    handleOverlayForceUpdate()\n  }, [\n    children,\n    handleOverlayForceUpdate,\n  ])\n\n  /**\n   * Case 1: show === true\n   * show -> shouldRender -> shouldShow\n   * shouldRender 를 true 로 설정하고, 직후에 shouldShow 를 true 로 설정하여 transition 유발\n   *\n   * Case 2: show === false\n   * show -> shouldShow -> (...) -> shouldRender\n   * shouldShow 를 false 로 설정하고, shouldRender 는 transition 필요 여부에 따라 다르게 결정함\n   *    Case 2-1: withTransition === true\n   *    shouldShow -> onTransitionEnd -> shouldRender\n   *    onTransitionEnd handler 를 이용해 transition 이 끝난 다음 shouldRender 를 false 로 설정\n   *    Case 2-2: withTransition === false\n   *    shouldShow && shouldRender\n   *    transition 을 기다릴 필요가 없으므로 바로 shouldRender 를 false 로 설정\n   */\n  useEffect(() => {\n    if (show) {\n      if (shouldRender) {\n        window.requestAnimationFrame(() => setShouldShow(true))\n      } else {\n        window.requestAnimationFrame(() => setShouldRender(true))\n      }\n    }\n\n    if (!show) {\n      window.requestAnimationFrame(() => setShouldShow(false))\n\n      if (!withTransition) {\n        window.requestAnimationFrame(() => setShouldRender(false))\n      }\n    }\n  }, [\n    show,\n    withTransition,\n    shouldRender,\n    shouldShow,\n  ])\n\n  if (!shouldRender) { return null }\n\n  return ReactDOM.createPortal(\n    overlay,\n    container,\n  )\n}\n\nexport default forwardRef(Overlay)\n"],"names":["CONTAINER_TEST_ID","WRAPPER_TEST_ID","OVERLAY_TEST_ID","ESCAPE_KEY","Overlay","as","containerTestId","wrapperTestId","testId","show","className","style","containerClassName","containerStyle","container","givenContainer","target","position","OverlayPosition","LeftCenter","marginX","marginY","keepInContainer","withTransition","enableClickOutside","children","onHide","noop","onTransitionEnd","rest","forwardedRef","shouldRender","setShouldRender","useState","shouldShow","setShouldShow","containerRect","useRef","targetRect","dummy","forceUpdate","useReducer","x","containerRef","overlayRef","mergedRef","useMergeRefs","defaultContainer","getRootElement","modalContainer","useModalContainerContext","hasContainer","Boolean","handleOverlayForceUpdate","useCallback","handleContainerRect","width","containerWidth","height","containerHeight","top","containerTop","left","containerLeft","getBoundingClientRect","current","scrollTop","scrollLeft","useLayoutEffect","initContainerRect","handleTargetRect","targetWidth","targetHeight","targetTop","targetLeft","clientTop","clientLeft","initTargetRect","handleTransitionEnd","event","handleBlockMouseWheel","stopPropagation","handleHideOverlay","closest","Styled","handleKeydown","key","useEventHandler","document","Content","useMemo","React","createElement","Object","assign","ref","overlay","useEffect","window","requestAnimationFrame","ReactDOM","createPortal","forwardRef"],"mappings":"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"}

package/dist/cjs/components/Overlay/Overlay.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.types.js","sources":["../../../../src/components/Overlay/Overlay.types.ts"],"sourcesContent":["import type React from 'react'\n\nimport {\n  type AdditionalStylableProps,\n  type AdditionalTestIdProps,\n  type BezierComponentProps,\n  type ChildrenProps,\n} from '~/src/types/ComponentProps'\n\nexport interface ContainerRectAttr {\n  containerWidth: number\n  containerHeight: number\n  containerTop: number\n  containerLeft: number\n  scrollTop: number\n  scrollLeft: number\n}\n\nexport interface TargetRectAttr {\n  targetWidth: number\n  targetHeight: number\n  targetTop: number\n  targetLeft: number\n  clientTop: number\n  clientLeft: number\n}\n\nexport enum OverlayPosition {\n  TopCenter = 'topCenter',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  RightCenter = 'rightCenter',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n  BottomCenter = 'bottomCenter',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  LeftCenter = 'leftCenter',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n  InnerLeftTop = 'innerLeftTop',\n  InnerLeftBottom = 'innerLeftBottom',\n  InnerRightTop = 'innerRightTop',\n  InnerRightBottom = 'innerRightBottom',\n}\n\ninterface OverlayOptions {\n  show?: boolean\n  container?: HTMLElement | null\n  target?: HTMLElement | null\n  position?: OverlayPosition\n  marginX?: number\n  marginY?: number\n  keepInContainer?: boolean\n  withTransition?: boolean\n  enableClickOutside?: boolean\n  onHide?: () => void\n}\n\nexport default interface OverlayProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  AdditionalStylableProps<'container'>,\n  AdditionalTestIdProps<['container', 'wrapper']>,\n  OverlayOptions {}\n"],"names":["OverlayPosition"],"mappings":";;AA2BYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,iBAAA,CAAA,GAAA,iBAAA,CAAA;EAAfA,eAAe,CAAA,eAAA,CAAA,GAAA,eAAA,CAAA;EAAfA,eAAe,CAAA,kBAAA,CAAA,GAAA,kBAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"Overlay.types.js","sources":["../../../../src/components/Overlay/Overlay.types.ts"],"sourcesContent":["import type React from 'react'\n\nimport {\n  type AdditionalStylableProps,\n  type AdditionalTestIdProps,\n  type BezierComponentProps,\n  type ChildrenProps,\n} from '~/src/types/ComponentProps'\n\nexport interface ContainerRectAttr {\n  containerWidth: number\n  containerHeight: number\n  containerTop: number\n  containerLeft: number\n  scrollTop: number\n  scrollLeft: number\n}\n\nexport interface TargetRectAttr {\n  targetWidth: number\n  targetHeight: number\n  targetTop: number\n  targetLeft: number\n  clientTop: number\n  clientLeft: number\n}\n\nexport enum OverlayPosition {\n  TopCenter = 'topCenter',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  RightCenter = 'rightCenter',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n  BottomCenter = 'bottomCenter',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  LeftCenter = 'leftCenter',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n  InnerLeftTop = 'innerLeftTop',\n  InnerLeftBottom = 'innerLeftBottom',\n  InnerRightTop = 'innerRightTop',\n  InnerRightBottom = 'innerRightBottom',\n}\n\ninterface OverlayOptions {\n  show?: boolean\n  /**\n   * Specify a container element to portal the content into.\n   * @note When placed inside a `Modal`, default value is the container element of `Modal`.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n  target?: HTMLElement | null\n  position?: OverlayPosition\n  marginX?: number\n  marginY?: number\n  keepInContainer?: boolean\n  withTransition?: boolean\n  enableClickOutside?: boolean\n  onHide?: () => void\n}\n\nexport default interface OverlayProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  AdditionalStylableProps<'container'>,\n  AdditionalTestIdProps<['container', 'wrapper']>,\n  OverlayOptions {}\n"],"names":["OverlayPosition"],"mappings":";;AA2BYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,iBAAA,CAAA,GAAA,iBAAA,CAAA;EAAfA,eAAe,CAAA,eAAA,CAAA,GAAA,eAAA,CAAA;EAAfA,eAAe,CAAA,kBAAA,CAAA,GAAA,kBAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/components/Text/Text.styled.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
 var Mixins = require('../../foundation/Mixins.js');
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
 
 function getMargin({
   margintop,

package/dist/cjs/components/Toast/ToastProvider.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var ReactDOM = require('react-dom');
+var useIsMounted = require('../../hooks/useIsMounted.js');
 var domUtils = require('../../utils/domUtils.js');
 var Toast_types = require('./Toast.types.js');
 var ToastContainer = require('./ToastContainer.js');
@@ -18,6 +19,7 @@ function ToastProvider({
   autoDismissTimeout = 3000,
   children = []
 }) {
+  const isMounted = useIsMounted.default();
   const toastContextValue = useToastContextValues.default();
   const {
     leftToasts,
@@ -59,7 +61,7 @@ function ToastProvider({
   }))), [autoDismissTimeout, dismiss]);
   return /*#__PURE__*/React.createElement(ToastContext.ToastContextProvider, {
     value: toastContextValue
-  }, children, /*#__PURE__*/ReactDOM.createPortal([createContainer(Toast_types.ToastPlacement.BottomLeft, leftToasts), createContainer(Toast_types.ToastPlacement.BottomRight, rightToasts)], domUtils.getRootElement()));
+  }, children, isMounted && /*#__PURE__*/ReactDOM.createPortal([createContainer(Toast_types.ToastPlacement.BottomLeft, leftToasts), createContainer(Toast_types.ToastPlacement.BottomRight, rightToasts)], domUtils.getRootElement()));
 }
 
 exports.default = ToastProvider;

package/dist/cjs/components/Toast/ToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","sources":["../../../../src/components/Toast/ToastProvider.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\n\nimport { createPortal } from 'react-dom'\n\nimport {\n  TransitionDuration,\n  css,\n} from '~/src/foundation'\n\nimport { getRootElement } from '~/src/utils/domUtils'\n\nimport {\n  ToastPlacement,\n  type ToastProviderProps,\n  type ToastType,\n} from './Toast.types'\nimport ToastContainer from './ToastContainer'\nimport { ToastContextProvider } from './ToastContext'\nimport ToastController from './ToastController'\nimport ToastElement from './ToastElement'\nimport useToastProviderValues from './useToastContextValues'\n\nfunction ToastProvider({\n  autoDismissTimeout = 3000,\n  children = [],\n}: ToastProviderProps) {\n  const toastContextValue = useToastProviderValues()\n  const {\n    leftToasts,\n    rightToasts,\n    dismiss,\n  } = toastContextValue\n\n  const createContainer = useCallback((placement: ToastPlacement, toasts: ToastType[]) => (\n    <ToastContainer\n      key={placement}\n      placement={placement}\n    >\n      { toasts.map(({\n        autoDismiss,\n        content,\n        preset,\n        appearance,\n        icon,\n        actionContent,\n        onClick,\n        id,\n        onDismiss,\n        zIndex,\n        version,\n      }) => (\n        <ToastController\n          key={id}\n          placement={placement}\n          autoDismiss={autoDismiss ?? true}\n          transitionDuration={TransitionDuration.M}\n          actionContent={actionContent}\n          onClick={onClick}\n          autoDismissTimeout={autoDismissTimeout}\n          preset={preset}\n          appearance={appearance}\n          content={content}\n          icon={icon}\n          component={ToastElement}\n          onDismiss={() => dismiss(id, onDismiss)}\n          transform={css``}\n          zIndex={zIndex}\n          version={version}\n        />\n      )) }\n    </ToastContainer>\n  ), [\n    autoDismissTimeout,\n    dismiss,\n  ])\n\n  return (\n    <ToastContextProvider value={toastContextValue}>\n      { children }\n      { createPortal(\n        [\n          createContainer(ToastPlacement.BottomLeft, leftToasts),\n          createContainer(ToastPlacement.BottomRight, rightToasts),\n        ],\n        getRootElement(),\n      ) }\n    </ToastContextProvider>\n  )\n}\n\nexport default ToastProvider\n"],"names":["ToastProvider","autoDismissTimeout","children","toastContextValue","useToastProviderValues","leftToasts","rightToasts","dismiss","createContainer","useCallback","placement","toasts","React","createElement","ToastContainer","key","map","autoDismiss","content","preset","appearance","icon","actionContent","onClick","id","onDismiss","zIndex","version","ToastController","transitionDuration","TransitionDuration","M","component","ToastElement","transform","css","ToastContextProvider","value","createPortal","ToastPlacement","BottomLeft","BottomRight","getRootElement"],"mappings":";;;;;;;;;;;;;;;;AAsBA,SAASA,aAAaA,CAAC;AACrBC,EAAAA,kBAAkB,GAAG,IAAI;AACzBC,EAAAA,QAAQ,GAAG,EAAA;AACO,CAAC,EAAE;AACrB,EAAA,MAAMC,iBAAiB,GAAGC,6BAAsB,EAAE,CAAA;EAClD,MAAM;IACJC,UAAU;IACVC,WAAW;AACXC,IAAAA,OAAAA;AACF,GAAC,GAAGJ,iBAAiB,CAAA;AAErB,EAAA,MAAMK,eAAe,GAAGC,iBAAW,CAAC,CAACC,SAAyB,EAAEC,MAAmB,kBACjFC,KAAA,CAAAC,aAAA,CAACC,sBAAc,EAAA;AACbC,IAAAA,GAAG,EAAEL,SAAU;AACfA,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAEnBC,MAAM,CAACK,GAAG,CAAC,CAAC;IACZC,WAAW;IACXC,OAAO;IACPC,MAAM;IACNC,UAAU;IACVC,IAAI;IACJC,aAAa;IACbC,OAAO;IACPC,EAAE;IACFC,SAAS;IACTC,MAAM;AACNC,IAAAA,OAAAA;AACF,GAAC,kBACCf,KAAA,CAAAC,aAAA,CAACe,uBAAe,EAAA;AACdb,IAAAA,GAAG,EAAES,EAAG;AACRd,IAAAA,SAAS,EAAEA,SAAU;IACrBO,WAAW,EAAEA,WAAW,IAAI,IAAK;IACjCY,kBAAkB,EAAEC,wBAAkB,CAACC,CAAE;AACzCT,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,OAAO,EAAEA,OAAQ;AACjBtB,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCkB,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,UAAU,EAAEA,UAAW;AACvBF,IAAAA,OAAO,EAAEA,OAAQ;AACjBG,IAAAA,IAAI,EAAEA,IAAK;AACXW,IAAAA,SAAS,EAAEC,oBAAa;IACxBR,SAAS,EAAEA,MAAMlB,OAAO,CAACiB,EAAE,EAAEC,SAAS,CAAE;IACxCS,SAAS,EAAEC,6BAAI,CAAE,CAAA;AACjBT,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAAA;GACV,CACF,CACa,CACjB,EAAE,CACD1B,kBAAkB,EAClBM,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACuB,iCAAoB,EAAA;AAACC,IAAAA,KAAK,EAAElC,iBAAAA;AAAkB,GAAA,EAC3CD,QAAQ,eACRoC,qBAAY,CACZ,CACE9B,eAAe,CAAC+B,0BAAc,CAACC,UAAU,EAAEnC,UAAU,CAAC,EACtDG,eAAe,CAAC+B,0BAAc,CAACE,WAAW,EAAEnC,WAAW,CAAC,CACzD,EACDoC,uBAAc,EAChB,CACoB,CAAC,CAAA;AAE3B;;;;"}
+{"version":3,"file":"ToastProvider.js","sources":["../../../../src/components/Toast/ToastProvider.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\n\nimport { createPortal } from 'react-dom'\n\nimport {\n  TransitionDuration,\n  css,\n} from '~/src/foundation'\n\nimport useIsMounted from '~/src/hooks/useIsMounted'\nimport { getRootElement } from '~/src/utils/domUtils'\n\nimport {\n  ToastPlacement,\n  type ToastProviderProps,\n  type ToastType,\n} from './Toast.types'\nimport ToastContainer from './ToastContainer'\nimport { ToastContextProvider } from './ToastContext'\nimport ToastController from './ToastController'\nimport ToastElement from './ToastElement'\nimport useToastProviderValues from './useToastContextValues'\n\nfunction ToastProvider({\n  autoDismissTimeout = 3000,\n  children = [],\n}: ToastProviderProps) {\n  const isMounted = useIsMounted()\n\n  const toastContextValue = useToastProviderValues()\n  const {\n    leftToasts,\n    rightToasts,\n    dismiss,\n  } = toastContextValue\n\n  const createContainer = useCallback((placement: ToastPlacement, toasts: ToastType[]) => (\n    <ToastContainer\n      key={placement}\n      placement={placement}\n    >\n      { toasts.map(({\n        autoDismiss,\n        content,\n        preset,\n        appearance,\n        icon,\n        actionContent,\n        onClick,\n        id,\n        onDismiss,\n        zIndex,\n        version,\n      }) => (\n        <ToastController\n          key={id}\n          placement={placement}\n          autoDismiss={autoDismiss ?? true}\n          transitionDuration={TransitionDuration.M}\n          actionContent={actionContent}\n          onClick={onClick}\n          autoDismissTimeout={autoDismissTimeout}\n          preset={preset}\n          appearance={appearance}\n          content={content}\n          icon={icon}\n          component={ToastElement}\n          onDismiss={() => dismiss(id, onDismiss)}\n          transform={css``}\n          zIndex={zIndex}\n          version={version}\n        />\n      )) }\n    </ToastContainer>\n  ), [\n    autoDismissTimeout,\n    dismiss,\n  ])\n\n  return (\n    <ToastContextProvider value={toastContextValue}>\n      { children }\n      { isMounted && createPortal(\n        [\n          createContainer(ToastPlacement.BottomLeft, leftToasts),\n          createContainer(ToastPlacement.BottomRight, rightToasts),\n        ],\n        getRootElement(),\n      ) }\n    </ToastContextProvider>\n  )\n}\n\nexport default ToastProvider\n"],"names":["ToastProvider","autoDismissTimeout","children","isMounted","useIsMounted","toastContextValue","useToastProviderValues","leftToasts","rightToasts","dismiss","createContainer","useCallback","placement","toasts","React","createElement","ToastContainer","key","map","autoDismiss","content","preset","appearance","icon","actionContent","onClick","id","onDismiss","zIndex","version","ToastController","transitionDuration","TransitionDuration","M","component","ToastElement","transform","css","ToastContextProvider","value","createPortal","ToastPlacement","BottomLeft","BottomRight","getRootElement"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,SAASA,aAAaA,CAAC;AACrBC,EAAAA,kBAAkB,GAAG,IAAI;AACzBC,EAAAA,QAAQ,GAAG,EAAA;AACO,CAAC,EAAE;AACrB,EAAA,MAAMC,SAAS,GAAGC,oBAAY,EAAE,CAAA;AAEhC,EAAA,MAAMC,iBAAiB,GAAGC,6BAAsB,EAAE,CAAA;EAClD,MAAM;IACJC,UAAU;IACVC,WAAW;AACXC,IAAAA,OAAAA;AACF,GAAC,GAAGJ,iBAAiB,CAAA;AAErB,EAAA,MAAMK,eAAe,GAAGC,iBAAW,CAAC,CAACC,SAAyB,EAAEC,MAAmB,kBACjFC,KAAA,CAAAC,aAAA,CAACC,sBAAc,EAAA;AACbC,IAAAA,GAAG,EAAEL,SAAU;AACfA,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAEnBC,MAAM,CAACK,GAAG,CAAC,CAAC;IACZC,WAAW;IACXC,OAAO;IACPC,MAAM;IACNC,UAAU;IACVC,IAAI;IACJC,aAAa;IACbC,OAAO;IACPC,EAAE;IACFC,SAAS;IACTC,MAAM;AACNC,IAAAA,OAAAA;AACF,GAAC,kBACCf,KAAA,CAAAC,aAAA,CAACe,uBAAe,EAAA;AACdb,IAAAA,GAAG,EAAES,EAAG;AACRd,IAAAA,SAAS,EAAEA,SAAU;IACrBO,WAAW,EAAEA,WAAW,IAAI,IAAK;IACjCY,kBAAkB,EAAEC,wBAAkB,CAACC,CAAE;AACzCT,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,OAAO,EAAEA,OAAQ;AACjBxB,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCoB,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,UAAU,EAAEA,UAAW;AACvBF,IAAAA,OAAO,EAAEA,OAAQ;AACjBG,IAAAA,IAAI,EAAEA,IAAK;AACXW,IAAAA,SAAS,EAAEC,oBAAa;IACxBR,SAAS,EAAEA,MAAMlB,OAAO,CAACiB,EAAE,EAAEC,SAAS,CAAE;IACxCS,SAAS,EAAEC,6BAAI,CAAE,CAAA;AACjBT,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAAA;GACV,CACF,CACa,CACjB,EAAE,CACD5B,kBAAkB,EAClBQ,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACuB,iCAAoB,EAAA;AAACC,IAAAA,KAAK,EAAElC,iBAAAA;AAAkB,GAAA,EAC3CH,QAAQ,EACRC,SAAS,iBAAIqC,qBAAY,CACzB,CACE9B,eAAe,CAAC+B,0BAAc,CAACC,UAAU,EAAEnC,UAAU,CAAC,EACtDG,eAAe,CAAC+B,0BAAc,CAACE,WAAW,EAAEnC,WAAW,CAAC,CACzD,EACDoC,uBAAc,EAChB,CACoB,CAAC,CAAA;AAE3B;;;;"}

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -7,6 +7,7 @@ var reactUtils = require('../../utils/reactUtils.js');
 var typeUtils = require('../../utils/typeUtils.js');
 var Tooltip_types = require('./Tooltip.types.js');
 var Tooltip_styled = require('./Tooltip.styled.js');
+var ModalContext = require('../Modals/Modal/ModalContext.js');
 
 function getSideAndAlign(placement) {
   switch (placement) {
@@ -143,7 +144,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip({
   icon,
   placement = Tooltip_types.TooltipPosition.BottomCenter,
   offset = 4,
-  container = domUtils.document.body,
+  container: givenContainer,
   keepInContainer = true,
   allowHover,
   delayShow,
@@ -156,6 +157,9 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip({
     delayHide: globalDelayHide
   } = useTooltipGlobalContext('Tooltip');
   const delayHide = delayHideProp ?? globalDelayHide;
+  const defaultContainer = domUtils.getRootElement();
+  const modalContainer = ModalContext.useModalContainerContext();
+  const container = givenContainer ?? modalContainer ?? defaultContainer;
   React.useEffect(function cleanUpTimeout() {
     return function cleanUp() {
       if (timeoutRef.current) {

package/dist/cjs/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\n\nimport { document } from '~/src/utils/domUtils'\nimport { createContext } from '~/src/utils/reactUtils'\nimport { isBoolean } from '~/src/utils/typeUtils'\n\nimport {\n  TooltipPosition,\n  type TooltipProps,\n  type TooltipProviderProps,\n} from './Tooltip.types'\n\nimport * as Styled from './Tooltip.styled'\n\nfunction getSideAndAlign(\n  placement: TooltipPosition,\n): Pick<TooltipPrimitive.TooltipContentProps, 'side' | 'align'> {\n  switch (placement) {\n    case TooltipPosition.TopCenter:\n      return {\n        side: 'top',\n        align: 'center',\n      }\n    case TooltipPosition.TopLeft:\n      return {\n        side: 'top',\n        align: 'start',\n      }\n    case TooltipPosition.TopRight:\n      return {\n        side: 'top',\n        align: 'end',\n      }\n    case TooltipPosition.RightCenter:\n      return {\n        side: 'right',\n        align: 'center',\n      }\n    case TooltipPosition.RightTop:\n      return {\n        side: 'right',\n        align: 'start',\n      }\n    case TooltipPosition.RightBottom:\n      return {\n        side: 'right',\n        align: 'end',\n      }\n    case TooltipPosition.BottomCenter:\n      return {\n        side: 'bottom',\n        align: 'center',\n      }\n    case TooltipPosition.BottomLeft:\n      return {\n        side: 'bottom',\n        align: 'start',\n      }\n    case TooltipPosition.BottomRight:\n      return {\n        side: 'bottom',\n        align: 'end',\n      }\n    case TooltipPosition.LeftCenter:\n      return {\n        side: 'left',\n        align: 'center',\n      }\n    case TooltipPosition.LeftTop:\n      return {\n        side: 'left',\n        align: 'start',\n      }\n    case TooltipPosition.LeftBottom:\n      return {\n        side: 'left',\n        align: 'end',\n      }\n    default:\n      // NOTE: should not reach here\n      return {\n        side: undefined,\n        align: undefined,\n      }\n  }\n}\n\nconst [\n  /**\n   * NOTE: Custom context use because the radix-ui doesn't support `delayHide`.\n   */\n  TooltipGlobalContextProvider,\n  useTooltipGlobalContext,\n] = createContext<Required<Pick<TooltipProviderProps, 'delayHide'>> | null>(null, 'TooltipProvider')\n\n/**\n * `TooltipProvider` is used to globally provide props to child tooltips.\n *\n * @example\n *\n * ```tsx\n * <TooltipProvider allowHover delayShow={1000}>\n *   <Tooltip />\n * </TooltipProvider>\n * ```\n */\nexport function TooltipProvider({\n  children,\n  allowHover = false,\n  delayShow = 300,\n  delayHide = 0,\n  skipDelayShow = 500,\n}: TooltipProviderProps) {\n  const contextValue = useMemo(() => ({\n    delayHide,\n  }), [delayHide])\n\n  return (\n    <TooltipPrimitive.Provider\n      delayDuration={delayShow}\n      skipDelayDuration={skipDelayShow}\n      disableHoverableContent={!allowHover}\n    >\n      <TooltipGlobalContextProvider value={contextValue}>\n        { children }\n      </TooltipGlobalContextProvider>\n    </TooltipPrimitive.Provider>\n  )\n}\n\n/**\n * `Tooltip` is a component that shows additional information when the mouse hovers or the keyboard is focused.\n *\n * @example\n *\n * ```tsx\n * // Anatomy of the Tooltip\n * <TooltipProvider>\n *   <Tooltip />\n * </TooltipProvider>\n *\n * // Example of a Tooltip with a button\n * <Tooltip content=\"Ta-da!\">\n *   <button>Hover me</button>\n * </Tooltip>\n * ```\n */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip({\n  as,\n  children,\n  defaultShow,\n  onShow: onShowProp,\n  onHide: onHideProp,\n  disabled,\n  content,\n  description,\n  icon,\n  placement = TooltipPosition.BottomCenter,\n  offset = 4,\n  container = document.body,\n  keepInContainer = true,\n  allowHover,\n  delayShow,\n  delayHide: delayHideProp,\n  ...rest\n}, forwardedRef) {\n  const [show, setShow] = useState<boolean>(defaultShow ?? false)\n  const timeoutRef = useRef<NodeJS.Timeout>()\n  const { delayHide: globalDelayHide } = useTooltipGlobalContext('Tooltip')\n\n  const delayHide = delayHideProp ?? globalDelayHide\n\n  useEffect(function cleanUpTimeout() {\n    return function cleanUp() {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  const onShow = useCallback(() => {\n    setShow(true)\n    onShowProp?.()\n  }, [onShowProp])\n\n  const onHide = useCallback(() => {\n    setShow(false)\n    onHideProp?.()\n  }, [onHideProp])\n\n  const onOpenChange = useCallback((open: boolean) => {\n    if (disabled) { return }\n\n    if (open) {\n      onShow()\n      return\n    }\n\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current)\n      timeoutRef.current = undefined\n    }\n\n    if (delayHide > 0) {\n      timeoutRef.current = setTimeout(() => {\n        onHide()\n      }, delayHide)\n      return\n    }\n\n    onHide()\n  }, [\n    disabled,\n    delayHide,\n    onShow,\n    onHide,\n  ])\n\n  return (\n    <TooltipPrimitive.Root\n      open={show}\n      defaultOpen={defaultShow}\n      delayDuration={delayShow}\n      disableHoverableContent={isBoolean(allowHover) ? !allowHover : undefined}\n      onOpenChange={onOpenChange}\n    >\n      <TooltipPrimitive.Trigger asChild>\n        { children }\n      </TooltipPrimitive.Trigger>\n\n      <TooltipPrimitive.Portal container={container}>\n        <TooltipPrimitive.Content\n          {...rest}\n          {...getSideAndAlign(placement)}\n          asChild\n          ref={forwardedRef}\n          sideOffset={offset}\n          avoidCollisions={keepInContainer}\n          collisionPadding={8}\n          hideWhenDetached\n        >\n          <Styled.TooltipContent forwardedAs={as}>\n            <Styled.TextContainer>\n              <Styled.Content>\n                { content }\n              </Styled.Content>\n\n              { description && (\n                <Styled.Description>\n                  { description }\n                </Styled.Description>\n              ) }\n            </Styled.TextContainer>\n\n            { icon && (\n              <Styled.Icon source={icon} />\n            ) }\n          </Styled.TooltipContent>\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    </TooltipPrimitive.Root>\n  )\n})\n"],"names":["getSideAndAlign","placement","TooltipPosition","TopCenter","side","align","TopLeft","TopRight","RightCenter","RightTop","RightBottom","BottomCenter","BottomLeft","BottomRight","LeftCenter","LeftTop","LeftBottom","undefined","TooltipGlobalContextProvider","useTooltipGlobalContext","createContext","TooltipProvider","children","allowHover","delayShow","delayHide","skipDelayShow","contextValue","useMemo","React","createElement","TooltipPrimitive","delayDuration","skipDelayDuration","disableHoverableContent","value","Tooltip","forwardRef","as","defaultShow","onShow","onShowProp","onHide","onHideProp","disabled","content","description","icon","offset","container","document","body","keepInContainer","delayHideProp","rest","forwardedRef","show","setShow","useState","timeoutRef","useRef","globalDelayHide","useEffect","cleanUpTimeout","cleanUp","current","clearTimeout","useCallback","onOpenChange","open","setTimeout","defaultOpen","isBoolean","asChild","Object","assign","ref","sideOffset","avoidCollisions","collisionPadding","hideWhenDetached","Styled","forwardedAs","source"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\n\nimport { getRootElement } from '~/src/utils/domUtils'\nimport { createContext } from '~/src/utils/reactUtils'\nimport { isBoolean } from '~/src/utils/typeUtils'\n\nimport { useModalContainerContext } from '~/src/components/Modals'\n\nimport {\n  TooltipPosition,\n  type TooltipProps,\n  type TooltipProviderProps,\n} from './Tooltip.types'\n\nimport * as Styled from './Tooltip.styled'\n\nfunction getSideAndAlign(\n  placement: TooltipPosition,\n): Pick<TooltipPrimitive.TooltipContentProps, 'side' | 'align'> {\n  switch (placement) {\n    case TooltipPosition.TopCenter:\n      return {\n        side: 'top',\n        align: 'center',\n      }\n    case TooltipPosition.TopLeft:\n      return {\n        side: 'top',\n        align: 'start',\n      }\n    case TooltipPosition.TopRight:\n      return {\n        side: 'top',\n        align: 'end',\n      }\n    case TooltipPosition.RightCenter:\n      return {\n        side: 'right',\n        align: 'center',\n      }\n    case TooltipPosition.RightTop:\n      return {\n        side: 'right',\n        align: 'start',\n      }\n    case TooltipPosition.RightBottom:\n      return {\n        side: 'right',\n        align: 'end',\n      }\n    case TooltipPosition.BottomCenter:\n      return {\n        side: 'bottom',\n        align: 'center',\n      }\n    case TooltipPosition.BottomLeft:\n      return {\n        side: 'bottom',\n        align: 'start',\n      }\n    case TooltipPosition.BottomRight:\n      return {\n        side: 'bottom',\n        align: 'end',\n      }\n    case TooltipPosition.LeftCenter:\n      return {\n        side: 'left',\n        align: 'center',\n      }\n    case TooltipPosition.LeftTop:\n      return {\n        side: 'left',\n        align: 'start',\n      }\n    case TooltipPosition.LeftBottom:\n      return {\n        side: 'left',\n        align: 'end',\n      }\n    default:\n      // NOTE: should not reach here\n      return {\n        side: undefined,\n        align: undefined,\n      }\n  }\n}\n\nconst [\n  /**\n   * NOTE: Custom context use because the radix-ui doesn't support `delayHide`.\n   */\n  TooltipGlobalContextProvider,\n  useTooltipGlobalContext,\n] = createContext<Required<Pick<TooltipProviderProps, 'delayHide'>> | null>(null, 'TooltipProvider')\n\n/**\n * `TooltipProvider` is used to globally provide props to child tooltips.\n *\n * @example\n *\n * ```tsx\n * <TooltipProvider allowHover delayShow={1000}>\n *   <Tooltip />\n * </TooltipProvider>\n * ```\n */\nexport function TooltipProvider({\n  children,\n  allowHover = false,\n  delayShow = 300,\n  delayHide = 0,\n  skipDelayShow = 500,\n}: TooltipProviderProps) {\n  const contextValue = useMemo(() => ({\n    delayHide,\n  }), [delayHide])\n\n  return (\n    <TooltipPrimitive.Provider\n      delayDuration={delayShow}\n      skipDelayDuration={skipDelayShow}\n      disableHoverableContent={!allowHover}\n    >\n      <TooltipGlobalContextProvider value={contextValue}>\n        { children }\n      </TooltipGlobalContextProvider>\n    </TooltipPrimitive.Provider>\n  )\n}\n\n/**\n * `Tooltip` is a component that shows additional information when the mouse hovers or the keyboard is focused.\n *\n * @example\n *\n * ```tsx\n * // Anatomy of the Tooltip\n * <TooltipProvider>\n *   <Tooltip />\n * </TooltipProvider>\n *\n * // Example of a Tooltip with a button\n * <Tooltip content=\"Ta-da!\">\n *   <button>Hover me</button>\n * </Tooltip>\n * ```\n */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip({\n  as,\n  children,\n  defaultShow,\n  onShow: onShowProp,\n  onHide: onHideProp,\n  disabled,\n  content,\n  description,\n  icon,\n  placement = TooltipPosition.BottomCenter,\n  offset = 4,\n  container: givenContainer,\n  keepInContainer = true,\n  allowHover,\n  delayShow,\n  delayHide: delayHideProp,\n  ...rest\n}, forwardedRef) {\n  const [show, setShow] = useState<boolean>(defaultShow ?? false)\n  const timeoutRef = useRef<NodeJS.Timeout>()\n\n  const { delayHide: globalDelayHide } = useTooltipGlobalContext('Tooltip')\n  const delayHide = delayHideProp ?? globalDelayHide\n\n  const defaultContainer = getRootElement()\n  const modalContainer = useModalContainerContext()\n  const container = givenContainer ?? modalContainer ?? defaultContainer\n\n  useEffect(function cleanUpTimeout() {\n    return function cleanUp() {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  const onShow = useCallback(() => {\n    setShow(true)\n    onShowProp?.()\n  }, [onShowProp])\n\n  const onHide = useCallback(() => {\n    setShow(false)\n    onHideProp?.()\n  }, [onHideProp])\n\n  const onOpenChange = useCallback((open: boolean) => {\n    if (disabled) { return }\n\n    if (open) {\n      onShow()\n      return\n    }\n\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current)\n      timeoutRef.current = undefined\n    }\n\n    if (delayHide > 0) {\n      timeoutRef.current = setTimeout(() => {\n        onHide()\n      }, delayHide)\n      return\n    }\n\n    onHide()\n  }, [\n    disabled,\n    delayHide,\n    onShow,\n    onHide,\n  ])\n\n  return (\n    <TooltipPrimitive.Root\n      open={show}\n      defaultOpen={defaultShow}\n      delayDuration={delayShow}\n      disableHoverableContent={isBoolean(allowHover) ? !allowHover : undefined}\n      onOpenChange={onOpenChange}\n    >\n      <TooltipPrimitive.Trigger asChild>\n        { children }\n      </TooltipPrimitive.Trigger>\n\n      <TooltipPrimitive.Portal container={container}>\n        <TooltipPrimitive.Content\n          {...rest}\n          {...getSideAndAlign(placement)}\n          asChild\n          ref={forwardedRef}\n          sideOffset={offset}\n          avoidCollisions={keepInContainer}\n          collisionPadding={8}\n          hideWhenDetached\n        >\n          <Styled.TooltipContent forwardedAs={as}>\n            <Styled.TextContainer>\n              <Styled.Content>\n                { content }\n              </Styled.Content>\n\n              { description && (\n                <Styled.Description>\n                  { description }\n                </Styled.Description>\n              ) }\n            </Styled.TextContainer>\n\n            { icon && (\n              <Styled.Icon source={icon} />\n            ) }\n          </Styled.TooltipContent>\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    </TooltipPrimitive.Root>\n  )\n})\n"],"names":["getSideAndAlign","placement","TooltipPosition","TopCenter","side","align","TopLeft","TopRight","RightCenter","RightTop","RightBottom","BottomCenter","BottomLeft","BottomRight","LeftCenter","LeftTop","LeftBottom","undefined","TooltipGlobalContextProvider","useTooltipGlobalContext","createContext","TooltipProvider","children","allowHover","delayShow","delayHide","skipDelayShow","contextValue","useMemo","React","createElement","TooltipPrimitive","delayDuration","skipDelayDuration","disableHoverableContent","value","Tooltip","forwardRef","as","defaultShow","onShow","onShowProp","onHide","onHideProp","disabled","content","description","icon","offset","container","givenContainer","keepInContainer","delayHideProp","rest","forwardedRef","show","setShow","useState","timeoutRef","useRef","globalDelayHide","defaultContainer","getRootElement","modalContainer","useModalContainerContext","useEffect","cleanUpTimeout","cleanUp","current","clearTimeout","useCallback","onOpenChange","open","setTimeout","defaultOpen","isBoolean","asChild","Object","assign","ref","sideOffset","avoidCollisions","collisionPadding","hideWhenDetached","Styled","forwardedAs","source"],"mappings":"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"}

package/dist/cjs/components/Tooltip/Tooltip.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.types.js","sources":["../../../../src/components/Tooltip/Tooltip.types.ts"],"sourcesContent":["import { type BezierIcon } from '@channel.io/bezier-icons'\n\nimport {\n  type BezierComponentProps,\n  type ChildrenProps,\n  type ContentProps,\n  type DisableProps,\n} from '~/src/types/ComponentProps'\n\n/**\n * An enumeration that determines the position of `Tooltip`.\n */\nexport enum TooltipPosition {\n  TopCenter = 'topCenter',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  RightCenter = 'rightCenter',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n  BottomCenter = 'bottomCenter',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  LeftCenter = 'leftCenter',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n}\n\ninterface TooltipProviderOptions {\n  /**\n   * Keeps the content of the tooltip open on hover. Disabling this feature affects accessibility.\n   * @default false\n   */\n  allowHover?: boolean\n  /**\n   * The delay from when the mouse enters a tooltip trigger until the tooltip opens.\n   * @default 300\n   */\n  delayShow?: number\n  /**\n   * The delay from when the mouse leaves a tooltip content until the tooltip hides.\n   * @default 0\n   */\n  delayHide?: number\n  /**\n   * How much time a user has to enter another trigger without incurring a delay again.\n   * @default 500\n   */\n  skipDelayShow?: number\n}\n\ninterface TooltipOptions {\n  /**\n   * The open state of the tooltip when it is initially rendered.\n   */\n  defaultShow?: boolean\n  /**\n   * An element that sits below the tooltip content.\n   */\n  description?: React.ReactNode\n  /**\n   * A decorative icon that sits right of the tooltip content.\n   */\n  icon?: BezierIcon\n  /**\n   * Options to determine the location from the trigger.\n   * @default TooltipPosition.BottomCenter\n   */\n  placement?: TooltipPosition\n  /**\n   * The distance in pixels from the trigger.\n   * @default 4\n   */\n  offset?: number\n  /**\n   * Specify a container element to portal the content into.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n  /**\n   * When `true`, overrides the `position` of the tooltip\n   * to prevent collisions with boundary edges.\n   * @default true\n   */\n  keepInContainer?: boolean\n  /**\n   * Keeps the content of the tooltip open on hover. Disabling this feature affects accessibility.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default false\n   */\n  allowHover?: boolean\n  /**\n   * The delay from when the mouse enters a tooltip trigger until the tooltip opens.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default 300\n   */\n  delayShow?: number\n  /**\n   * The delay from when the mouse leaves a tooltip content until the tooltip hides.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default 0\n   */\n  delayHide?: number\n  /**\n   * Callback function to be called when the tooltip is opened.\n   */\n  onShow?: () => void\n  /**\n   * Callback function to be called when the tooltip is closed.\n   */\n  onHide?: () => void\n  /**\n   * Event handler called when the escape key is down.\n   * It can be prevented by calling `event.preventDefault`.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the component.\n   * It can be prevented by calling `event.preventDefault`.\n   */\n  onPointerDownOutside?: (event: CustomEvent<{ originalEvent: PointerEvent }>) => void\n}\n\nexport interface TooltipProviderProps extends\n  ChildrenProps,\n  TooltipProviderOptions {}\n\nexport interface TooltipProps extends\n  BezierComponentProps,\n  ChildrenProps<React.ReactElement>,\n  ContentProps,\n  DisableProps,\n  Omit<React.HTMLAttributes<HTMLDivElement>, keyof ContentProps | keyof ChildrenProps>,\n  TooltipOptions {}\n"],"names":["TooltipPosition"],"mappings":";;AASA;AACA;AACA;AACYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"Tooltip.types.js","sources":["../../../../src/components/Tooltip/Tooltip.types.ts"],"sourcesContent":["import { type BezierIcon } from '@channel.io/bezier-icons'\n\nimport {\n  type BezierComponentProps,\n  type ChildrenProps,\n  type ContentProps,\n  type DisableProps,\n} from '~/src/types/ComponentProps'\n\n/**\n * An enumeration that determines the position of `Tooltip`.\n */\nexport enum TooltipPosition {\n  TopCenter = 'topCenter',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  RightCenter = 'rightCenter',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n  BottomCenter = 'bottomCenter',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  LeftCenter = 'leftCenter',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n}\n\ninterface TooltipProviderOptions {\n  /**\n   * Keeps the content of the tooltip open on hover. Disabling this feature affects accessibility.\n   * @default false\n   */\n  allowHover?: boolean\n  /**\n   * The delay from when the mouse enters a tooltip trigger until the tooltip opens.\n   * @default 300\n   */\n  delayShow?: number\n  /**\n   * The delay from when the mouse leaves a tooltip content until the tooltip hides.\n   * @default 0\n   */\n  delayHide?: number\n  /**\n   * How much time a user has to enter another trigger without incurring a delay again.\n   * @default 500\n   */\n  skipDelayShow?: number\n}\n\ninterface TooltipOptions {\n  /**\n   * The open state of the tooltip when it is initially rendered.\n   */\n  defaultShow?: boolean\n  /**\n   * An element that sits below the tooltip content.\n   */\n  description?: React.ReactNode\n  /**\n   * A decorative icon that sits right of the tooltip content.\n   */\n  icon?: BezierIcon\n  /**\n   * Options to determine the location from the trigger.\n   * @default TooltipPosition.BottomCenter\n   */\n  placement?: TooltipPosition\n  /**\n   * The distance in pixels from the trigger.\n   * @default 4\n   */\n  offset?: number\n  /**\n   * Specify a container element to portal the content into.\n   * @note When placed inside a `Modal`, default value is the container element of `Modal`.\n   * @default document.body\n   */\n  container?: HTMLElement | null\n  /**\n   * When `true`, overrides the `position` of the tooltip\n   * to prevent collisions with boundary edges.\n   * @default true\n   */\n  keepInContainer?: boolean\n  /**\n   * Keeps the content of the tooltip open on hover. Disabling this feature affects accessibility.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default false\n   */\n  allowHover?: boolean\n  /**\n   * The delay from when the mouse enters a tooltip trigger until the tooltip opens.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default 300\n   */\n  delayShow?: number\n  /**\n   * The delay from when the mouse leaves a tooltip content until the tooltip hides.\n   * Inherits from the nearest `TooltipProvider`.\n   * @default 0\n   */\n  delayHide?: number\n  /**\n   * Callback function to be called when the tooltip is opened.\n   */\n  onShow?: () => void\n  /**\n   * Callback function to be called when the tooltip is closed.\n   */\n  onHide?: () => void\n  /**\n   * Event handler called when the escape key is down.\n   * It can be prevented by calling `event.preventDefault`.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n  /**\n   * Event handler called when a pointer event occurs outside the bounds of the component.\n   * It can be prevented by calling `event.preventDefault`.\n   */\n  onPointerDownOutside?: (event: CustomEvent<{ originalEvent: PointerEvent }>) => void\n}\n\nexport interface TooltipProviderProps extends\n  ChildrenProps,\n  TooltipProviderOptions {}\n\nexport interface TooltipProps extends\n  BezierComponentProps,\n  ChildrenProps<React.ReactElement>,\n  ContentProps,\n  DisableProps,\n  Omit<React.HTMLAttributes<HTMLDivElement>, keyof ContentProps | keyof ChildrenProps>,\n  TooltipOptions {}\n"],"names":["TooltipPosition"],"mappings":";;AASA;AACA;AACA;AACYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAfA,eAAe,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAAfA,eAAe,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/cjs/hooks/useIsMounted.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function useIsMounted() {
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  return isMounted;
+}
+
+exports.default = useIsMounted;
+//# sourceMappingURL=useIsMounted.js.map

package/dist/cjs/hooks/useIsMounted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMounted.js","sources":["../../../src/hooks/useIsMounted.ts"],"sourcesContent":["import {\n  useEffect,\n  useState,\n} from 'react'\n\nexport default function useIsMounted() {\n  const [isMounted, setIsMounted] = useState(false)\n\n  useEffect(() => {\n    setIsMounted(true)\n  }, [])\n\n  return isMounted\n}\n"],"names":["useIsMounted","isMounted","setIsMounted","useState","useEffect"],"mappings":";;;;;;AAKe,SAASA,YAAYA,GAAG;EACrC,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;AAEjDC,EAAAA,eAAS,CAAC,MAAM;IACdF,YAAY,CAAC,IAAI,CAAC,CAAA;GACnB,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,OAAOD,SAAS,CAAA;AAClB;;;;"}