@veeqo/ui 9.2.0 → 9.4.0

package/dist/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { MainSection, NonScrollableBody } from './components/styled';\nimport { ModalProps, hasFooterSlot, hasHeaderSlot } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { Stack } from '../Stack';\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    className,\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const onClose = () => {\n    modalRef.current?.close();\n    parentOnClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\">\n          <NonScrollableBody />\n          <Dialog\n            ref={modalRef}\n            onClose={onClose}\n            variant={variant}\n            aria-describedby=\"modal_title\"\n            className={className}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: onClose })}\n                />\n              )}\n\n              <MainSection\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                isScrollable={isContentOverflowing}\n                fullBleed={fullBleed}\n              >\n                {children}\n              </MainSection>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { useEffect, useRef, useState } from 'react';\nimport { AnimatePresence } from 'framer-motion';\n\nimport { MainSection, NonScrollableBody } from './components/styled';\nimport { ModalProps, hasFooterSlot, hasHeaderSlot } from './types';\nimport { Dialog } from './components/Dialog/Dialog';\n\nimport { useIsOverflowing } from '../../hooks/useIsOverflowing';\nimport { Button } from '../Button';\nimport { Card } from '../Card';\nimport { CardHeader } from '../CardHeader';\nimport { Stack } from '../Stack';\nimport { preventDefaultEventOnESC } from './utils';\n\nexport const Modal = (props: ModalProps) => {\n  const {\n    shouldShow,\n    showHeaderCloseButton = true,\n    preventClose = false,\n    fullBleed = false,\n    variant = 'base',\n    onClose: parentOnClose,\n    children,\n    className,\n  } = props;\n\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const [mainSectionRef, setMainSectionRef] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (shouldShow) {\n      modalRef.current?.removeAttribute('open'); // Allows for conditional rendering.\n      modalRef.current?.showModal();\n    }\n  }, [shouldShow]);\n\n  const { isOverflowing: isContentOverflowing, onScroll } = useIsOverflowing(mainSectionRef);\n\n  const onClose = () => {\n    modalRef.current?.close();\n    parentOnClose();\n  };\n\n  return (\n    <AnimatePresence>\n      {shouldShow && (\n        <div data-testid=\"dialog-wrapper\">\n          <NonScrollableBody />\n          <Dialog\n            ref={modalRef}\n            onClose={onClose}\n            onKeyDown={preventClose ? preventDefaultEventOnESC : undefined}\n            variant={variant}\n            aria-describedby=\"modal_title\"\n            className={className}\n          >\n            <Card.Surface>\n              {hasHeaderSlot(props) ? (\n                props.headerSlot\n              ) : (\n                <CardHeader\n                  id=\"modal_title\"\n                  headerVariant=\"headingLarge\"\n                  title={props.headerTitle}\n                  subtitle={props.headerSubtitle}\n                  {...(showHeaderCloseButton && { onClickClose: onClose })}\n                />\n              )}\n\n              <MainSection\n                onScroll={onScroll}\n                ref={setMainSectionRef}\n                isScrollable={isContentOverflowing}\n                fullBleed={fullBleed}\n              >\n                {children}\n              </MainSection>\n\n              {hasFooterSlot(props) && props.footerSlot}\n\n              {!hasFooterSlot(props) && (props.leftActions || props.rightActions) && (\n                <Card.Footer>\n                  <Stack direction=\"horizontal\" alignX={props.leftActions ? 'between' : 'end'}>\n                    {props.leftActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"start\"\n                        data-testid=\"left-actions-container\"\n                      >\n                        {props.leftActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                    {props.rightActions && (\n                      <Stack\n                        direction=\"horizontal\"\n                        alignX=\"end\"\n                        data-testid=\"right-actions-container\"\n                      >\n                        {props.rightActions.map(({ label, ...actionProps }) => (\n                          <Button key={label} type=\"button\" {...actionProps}>\n                            {label}\n                          </Button>\n                        ))}\n                      </Stack>\n                    )}\n                  </Stack>\n                </Card.Footer>\n              )}\n            </Card.Surface>\n          </Dialog>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { ButtonProps } from '../Button/types';\n\nexport type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';\n\n// Base Modal props shared by all variants.\ntype BaseModalProps = {\n  shouldShow: boolean;\n  showHeaderCloseButton?: boolean;\n  fullBleed?: boolean;\n  variant?: ModalVariants;\n  onClose: () => void;\n  children: React.ReactNode;\n  className?: string;\n};\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  footerSlot: React.ReactNode;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  headerTitle: string;\n  headerSubtitle?: string;\n};\n\nexport type Action = { label: string } & ButtonProps;\ntype DefaultFooterOptions = {\n  leftActions?: Action[];\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n"],"names":[],"mappings":";;AA6CA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;;;;;"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { ButtonProps } from '../Button/types';\n\nexport type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';\n\n// Base Modal props shared by all variants.\ntype BaseModalProps = {\n  shouldShow: boolean;\n  showHeaderCloseButton?: boolean;\n  preventClose?: boolean;\n  fullBleed?: boolean;\n  variant?: ModalVariants;\n  onClose: () => void;\n  children: React.ReactNode;\n  className?: string;\n};\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  footerSlot: React.ReactNode;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  headerTitle: string;\n  headerSubtitle?: string;\n};\n\nexport type Action = { label: string } & ButtonProps;\ntype DefaultFooterOptions = {\n  leftActions?: Action[];\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n"],"names":[],"mappings":";;AA8CA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;;;;;"}

package/dist/components/Modal/types.d.ts

@@ -4,6 +4,7 @@ export type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';
 type BaseModalProps = {
     shouldShow: boolean;
     showHeaderCloseButton?: boolean;
+    preventClose?: boolean;
     fullBleed?: boolean;
     variant?: ModalVariants;
     onClose: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { ButtonProps } from '../Button/types';\n\nexport type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';\n\n// Base Modal props shared by all variants.\ntype BaseModalProps = {\n  shouldShow: boolean;\n  showHeaderCloseButton?: boolean;\n  fullBleed?: boolean;\n  variant?: ModalVariants;\n  onClose: () => void;\n  children: React.ReactNode;\n  className?: string;\n};\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  footerSlot: React.ReactNode;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  headerTitle: string;\n  headerSubtitle?: string;\n};\n\nexport type Action = { label: string } & ButtonProps;\ntype DefaultFooterOptions = {\n  leftActions?: Action[];\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n"],"names":[],"mappings":"AA6CA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { ButtonProps } from '../Button/types';\n\nexport type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';\n\n// Base Modal props shared by all variants.\ntype BaseModalProps = {\n  shouldShow: boolean;\n  showHeaderCloseButton?: boolean;\n  preventClose?: boolean;\n  fullBleed?: boolean;\n  variant?: ModalVariants;\n  onClose: () => void;\n  children: React.ReactNode;\n  className?: string;\n};\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  footerSlot: React.ReactNode;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  headerTitle: string;\n  headerSubtitle?: string;\n};\n\nexport type Action = { label: string } & ButtonProps;\ntype DefaultFooterOptions = {\n  leftActions?: Action[];\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n"],"names":[],"mappings":"AA8CA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;;;;"}

package/dist/components/Modal/utils.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+const preventDefaultEventOnESC = (e) => {
+    if (e.key === 'Escape')
+        e.preventDefault();
+};
+
+exports.preventDefaultEventOnESC = preventDefaultEventOnESC;
+//# sourceMappingURL=utils.cjs.map

package/dist/components/Modal/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/Modal/utils.ts"],"sourcesContent":["export const preventDefaultEventOnESC = (e: React.KeyboardEvent<HTMLElement>) => {\n  if (e.key === 'Escape') e.preventDefault();\n};\n"],"names":[],"mappings":";;AAAa,MAAA,wBAAwB,GAAG,CAAC,CAAmC,KAAI;AAC9E,IAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;QAAE,CAAC,CAAC,cAAc,EAAE;AAC5C;;;;"}

package/dist/components/Modal/utils.d.ts

@@ -0,0 +1 @@
+export declare const preventDefaultEventOnESC: (e: React.KeyboardEvent<HTMLElement>) => void;

package/dist/components/Modal/utils.js

@@ -0,0 +1,7 @@
+const preventDefaultEventOnESC = (e) => {
+    if (e.key === 'Escape')
+        e.preventDefault();
+};
+
+export { preventDefaultEventOnESC };
+//# sourceMappingURL=utils.js.map

package/dist/components/Modal/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/Modal/utils.ts"],"sourcesContent":["export const preventDefaultEventOnESC = (e: React.KeyboardEvent<HTMLElement>) => {\n  if (e.key === 'Escape') e.preventDefault();\n};\n"],"names":[],"mappings":"AAAa,MAAA,wBAAwB,GAAG,CAAC,CAAmC,KAAI;AAC9E,IAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;QAAE,CAAC,CAAC,cAAc,EAAE;AAC5C;;;;"}

package/dist/components/Popover/Popover.cjs

@@ -15,7 +15,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var ResizeObserver__default = /*#__PURE__*/_interopDefaultCompat(ResizeObserver);
 
-/* eslint-disable consistent-return */
 const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, ...dialogProps }) => {
     // Set up PopperJS
     const [popperElement, setPopperElement] = React.useState(null);
@@ -39,19 +38,23 @@ const Popover = ({ id: passedId, children, zIndex = index.theme.layers.popup, pl
      */
     React.useEffect(() => {
         if (!update || !popperElement)
-            return;
+            return undefined;
         const resizeObserver = new ResizeObserver__default.default(update);
         resizeObserver.observe(popperElement);
-        return () => resizeObserver.disconnect();
+        return () => {
+            resizeObserver.disconnect();
+        };
     }, [update, popperElement]);
     /**
      * When window is resized, force popper update
      */
     React.useEffect(() => {
         if (!update)
-            return;
+            return undefined;
         window.addEventListener('resize', update);
-        return () => window.removeEventListener('resize', update);
+        return () => {
+            window.removeEventListener('resize', update);
+        };
     }, [update]);
     return (React__default.default.createElement(Portal.Portal, { rootElementRef: rootElementRef },
         !removeBackdrop && (React__default.default.createElement(styled.Backdrop, { onClick: onClose, zIndex: zIndex, "data-testid": "popover-backdrop" })),

package/dist/components/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/* eslint-disable consistent-return */\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { PopoverDialog, Backdrop } from './styled';\nimport { generateId } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\n\nexport const Popover = ({\n  id: passedId,\n  children,\n  zIndex = theme.layers.popup,\n  placement = 'bottom',\n  anchorElement,\n  rootElementRef,\n  onShouldClose,\n  style,\n  disableFocusLock,\n  removeBackdrop = false,\n  useAnchorWidth,\n  ignoreAriaWarnings,\n  ...dialogProps\n}: PopoverProps) => {\n  // Set up PopperJS\n  const [popperElement, setPopperElement] = useState<HTMLDialogElement | null>(null);\n  const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n  // Setup popover id to use passed, or generate its' own.\n  const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n  // Check and update aria for anchor, only works once this has rendered for the first time though.\n  useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n  const onClose = () => {\n    anchorElement?.focus();\n    onShouldClose?.();\n  };\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose,\n    disableFocusLock,\n  });\n\n  /**\n   * When content size is changed, force popper update\n   */\n  useEffect(() => {\n    if (!update || !popperElement) return;\n    const resizeObserver = new ResizeObserver(update);\n    resizeObserver.observe(popperElement);\n\n    return () => resizeObserver.disconnect();\n  }, [update, popperElement]);\n\n  /**\n   * When window is resized, force popper update\n   */\n  useEffect(() => {\n    if (!update) return;\n    window.addEventListener('resize', update);\n\n    return () => window.removeEventListener('resize', update);\n  }, [update]);\n\n  return (\n    <Portal rootElementRef={rootElementRef}>\n      {!removeBackdrop && (\n        <Backdrop onClick={onClose} zIndex={zIndex} data-testid=\"popover-backdrop\" />\n      )}\n      <PopoverDialog\n        open\n        id={id}\n        zIndex={zIndex}\n        ref={setPopperElement}\n        style={{\n          ...styles.popper,\n          ...style,\n          ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n        }}\n        onKeyDown={handleKeyDown}\n        {...attributes.popper}\n        {...dialogProps}\n      >\n        {children}\n      </PopoverDialog>\n    </Portal>\n  );\n};\n"],"names":["theme","useState","usePopper","useMemo","generateId","useUpdateAriaAnchor","useHandleFocus","useEffect","ResizeObserver","React","Portal","Backdrop","PopoverDialog"],"mappings":";;;;;;;;;;;;;;;;;AAAA;MAaa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAGA,WAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGC,cAAQ,CAA2B,IAAI,CAAC;AAClF,IAAA,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAGC,qBAAS,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,CAAC;;AAG7F,IAAA,MAAM,EAAE,GAAGC,aAAO,CAAC,MAAM,QAAQ,IAAIC,qBAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvEC,uCAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,EAAI;AACnB,KAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAGC,6BAAc,CAAC;QACvC,aAAa;QACb,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACHC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa;YAAE;AAC/B,QAAA,MAAM,cAAc,GAAG,IAAIC,+BAAc,CAAC,MAAM,CAAC;AACjD,QAAA,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC;AAErC,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE;AAC1C,KAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE3B;;AAEG;IACHD,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;YAAE;AACb,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC;QAEzC,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC3D,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,QACEE,sBAAC,CAAA,aAAA,CAAAC,aAAM,EAAC,EAAA,cAAc,EAAE,cAAc,EAAA;AACnC,QAAA,CAAC,cAAc,KACdD,sBAAC,CAAA,aAAA,CAAAE,eAAQ,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAc,aAAA,EAAA,kBAAkB,GAAG,CAC9E;AACD,QAAAF,sBAAA,CAAA,aAAA,CAACG,oBAAa,EACZ,EAAA,IAAI,EACJ,IAAA,EAAA,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE;gBACL,GAAG,MAAM,CAAC,MAAM;AAChB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;AACpE,aAAA,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,UAAU,CAAC,MAAM,EACjB,GAAA,WAAW,EAEd,EAAA,QAAQ,CACK,CACT;AAEb;;;;"}
+{"version":3,"file":"Popover.cjs","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { PopoverDialog, Backdrop } from './styled';\nimport { generateId } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\n\nexport const Popover = ({\n  id: passedId,\n  children,\n  zIndex = theme.layers.popup,\n  placement = 'bottom',\n  anchorElement,\n  rootElementRef,\n  onShouldClose,\n  style,\n  disableFocusLock,\n  removeBackdrop = false,\n  useAnchorWidth,\n  ignoreAriaWarnings,\n  ...dialogProps\n}: PopoverProps) => {\n  // Set up PopperJS\n  const [popperElement, setPopperElement] = useState<HTMLDialogElement | null>(null);\n  const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n  // Setup popover id to use passed, or generate its' own.\n  const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n  // Check and update aria for anchor, only works once this has rendered for the first time though.\n  useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n  const onClose = () => {\n    anchorElement?.focus();\n    onShouldClose?.();\n  };\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose,\n    disableFocusLock,\n  });\n\n  /**\n   * When content size is changed, force popper update\n   */\n  useEffect(() => {\n    if (!update || !popperElement) return undefined;\n    const resizeObserver = new ResizeObserver(update);\n    resizeObserver.observe(popperElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [update, popperElement]);\n\n  /**\n   * When window is resized, force popper update\n   */\n  useEffect(() => {\n    if (!update) return undefined;\n    window.addEventListener('resize', update);\n\n    return () => {\n      window.removeEventListener('resize', update);\n    };\n  }, [update]);\n\n  return (\n    <Portal rootElementRef={rootElementRef}>\n      {!removeBackdrop && (\n        <Backdrop onClick={onClose} zIndex={zIndex} data-testid=\"popover-backdrop\" />\n      )}\n      <PopoverDialog\n        open\n        id={id}\n        zIndex={zIndex}\n        ref={setPopperElement}\n        style={{\n          ...styles.popper,\n          ...style,\n          ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n        }}\n        onKeyDown={handleKeyDown}\n        {...attributes.popper}\n        {...dialogProps}\n      >\n        {children}\n      </PopoverDialog>\n    </Portal>\n  );\n};\n"],"names":["theme","useState","usePopper","useMemo","generateId","useUpdateAriaAnchor","useHandleFocus","useEffect","ResizeObserver","React","Portal","Backdrop","PopoverDialog"],"mappings":"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"}

package/dist/components/Popover/Popover.js

@@ -8,7 +8,6 @@ import { generateId } from '../../utils/generateId.js';
 import { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor.js';
 import { useHandleFocus } from './hooks/useHandleFocus.js';
 
-/* eslint-disable consistent-return */
 const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placement = 'bottom', anchorElement, rootElementRef, onShouldClose, style, disableFocusLock, removeBackdrop = false, useAnchorWidth, ignoreAriaWarnings, ...dialogProps }) => {
     // Set up PopperJS
     const [popperElement, setPopperElement] = useState(null);
@@ -32,19 +31,23 @@ const Popover = ({ id: passedId, children, zIndex = theme.layers.popup, placemen
      */
     useEffect(() => {
         if (!update || !popperElement)
-            return;
+            return undefined;
         const resizeObserver = new ResizeObserver(update);
         resizeObserver.observe(popperElement);
-        return () => resizeObserver.disconnect();
+        return () => {
+            resizeObserver.disconnect();
+        };
     }, [update, popperElement]);
     /**
      * When window is resized, force popper update
      */
     useEffect(() => {
         if (!update)
-            return;
+            return undefined;
         window.addEventListener('resize', update);
-        return () => window.removeEventListener('resize', update);
+        return () => {
+            window.removeEventListener('resize', update);
+        };
     }, [update]);
     return (React.createElement(Portal, { rootElementRef: rootElementRef },
         !removeBackdrop && (React.createElement(Backdrop, { onClick: onClose, zIndex: zIndex, "data-testid": "popover-backdrop" })),

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/* eslint-disable consistent-return */\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { PopoverDialog, Backdrop } from './styled';\nimport { generateId } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\n\nexport const Popover = ({\n  id: passedId,\n  children,\n  zIndex = theme.layers.popup,\n  placement = 'bottom',\n  anchorElement,\n  rootElementRef,\n  onShouldClose,\n  style,\n  disableFocusLock,\n  removeBackdrop = false,\n  useAnchorWidth,\n  ignoreAriaWarnings,\n  ...dialogProps\n}: PopoverProps) => {\n  // Set up PopperJS\n  const [popperElement, setPopperElement] = useState<HTMLDialogElement | null>(null);\n  const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n  // Setup popover id to use passed, or generate its' own.\n  const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n  // Check and update aria for anchor, only works once this has rendered for the first time though.\n  useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n  const onClose = () => {\n    anchorElement?.focus();\n    onShouldClose?.();\n  };\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose,\n    disableFocusLock,\n  });\n\n  /**\n   * When content size is changed, force popper update\n   */\n  useEffect(() => {\n    if (!update || !popperElement) return;\n    const resizeObserver = new ResizeObserver(update);\n    resizeObserver.observe(popperElement);\n\n    return () => resizeObserver.disconnect();\n  }, [update, popperElement]);\n\n  /**\n   * When window is resized, force popper update\n   */\n  useEffect(() => {\n    if (!update) return;\n    window.addEventListener('resize', update);\n\n    return () => window.removeEventListener('resize', update);\n  }, [update]);\n\n  return (\n    <Portal rootElementRef={rootElementRef}>\n      {!removeBackdrop && (\n        <Backdrop onClick={onClose} zIndex={zIndex} data-testid=\"popover-backdrop\" />\n      )}\n      <PopoverDialog\n        open\n        id={id}\n        zIndex={zIndex}\n        ref={setPopperElement}\n        style={{\n          ...styles.popper,\n          ...style,\n          ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n        }}\n        onKeyDown={handleKeyDown}\n        {...attributes.popper}\n        {...dialogProps}\n      >\n        {children}\n      </PopoverDialog>\n    </Portal>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAAA;MAaa,OAAO,GAAG,CAAC,EACtB,EAAE,EAAE,QAAQ,EACZ,QAAQ,EACR,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC3B,SAAS,GAAG,QAAQ,EACpB,aAAa,EACb,cAAc,EACd,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,cAAc,GAAG,KAAK,EACtB,cAAc,EACd,kBAAkB,EAClB,GAAG,WAAW,EACD,KAAI;;IAEjB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC;AAClF,IAAA,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,SAAS,EAAE,CAAC;;AAG7F,IAAA,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,QAAQ,IAAI,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;;IAGvE,mBAAmB,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC;IAEzE,MAAM,OAAO,GAAG,MAAK;AACnB,QAAA,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,KAAK,EAAE;AACtB,QAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,EAAI;AACnB,KAAC;AAED,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,cAAc,CAAC;QACvC,aAAa;QACb,aAAa;QACb,OAAO;QACP,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,aAAa;YAAE;AAC/B,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAM,CAAC;AACjD,QAAA,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC;AAErC,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE;AAC1C,KAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAE3B;;AAEG;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;YAAE;AACb,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC;QAEzC,OAAO,MAAM,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC;AAC3D,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,MAAM,EAAC,EAAA,cAAc,EAAE,cAAc,EAAA;AACnC,QAAA,CAAC,cAAc,KACd,KAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAc,aAAA,EAAA,kBAAkB,GAAG,CAC9E;AACD,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EACZ,EAAA,IAAI,EACJ,IAAA,EAAA,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE;gBACL,GAAG,MAAM,CAAC,MAAM;AAChB,gBAAA,GAAG,KAAK;gBACR,IAAI,cAAc,GAAG,EAAE,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,WAAW,EAAE,GAAG,EAAE,CAAC;AACpE,aAAA,EACD,SAAS,EAAE,aAAa,EAAA,GACpB,UAAU,CAAC,MAAM,EACjB,GAAA,WAAW,EAEd,EAAA,QAAQ,CACK,CACT;AAEb;;;;"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport { usePopper } from 'react-popper';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { Portal } from '../Portal';\nimport { theme } from '../../theme';\nimport { PopoverDialog, Backdrop } from './styled';\nimport { generateId } from '../../utils';\nimport { useUpdateAriaAnchor } from './hooks/useUpdateAriaAnchor';\nimport { PopoverProps } from './types';\nimport { useHandleFocus } from './hooks/useHandleFocus';\n\nexport const Popover = ({\n  id: passedId,\n  children,\n  zIndex = theme.layers.popup,\n  placement = 'bottom',\n  anchorElement,\n  rootElementRef,\n  onShouldClose,\n  style,\n  disableFocusLock,\n  removeBackdrop = false,\n  useAnchorWidth,\n  ignoreAriaWarnings,\n  ...dialogProps\n}: PopoverProps) => {\n  // Set up PopperJS\n  const [popperElement, setPopperElement] = useState<HTMLDialogElement | null>(null);\n  const { styles, attributes, update } = usePopper(anchorElement, popperElement, { placement });\n\n  // Setup popover id to use passed, or generate its' own.\n  const id = useMemo(() => passedId || generateId('popover'), [passedId]);\n\n  // Check and update aria for anchor, only works once this has rendered for the first time though.\n  useUpdateAriaAnchor({ anchorElement, popoverId: id, ignoreAriaWarnings });\n\n  const onClose = () => {\n    anchorElement?.focus();\n    onShouldClose?.();\n  };\n\n  const { handleKeyDown } = useHandleFocus({\n    popperElement,\n    anchorElement,\n    onClose,\n    disableFocusLock,\n  });\n\n  /**\n   * When content size is changed, force popper update\n   */\n  useEffect(() => {\n    if (!update || !popperElement) return undefined;\n    const resizeObserver = new ResizeObserver(update);\n    resizeObserver.observe(popperElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [update, popperElement]);\n\n  /**\n   * When window is resized, force popper update\n   */\n  useEffect(() => {\n    if (!update) return undefined;\n    window.addEventListener('resize', update);\n\n    return () => {\n      window.removeEventListener('resize', update);\n    };\n  }, [update]);\n\n  return (\n    <Portal rootElementRef={rootElementRef}>\n      {!removeBackdrop && (\n        <Backdrop onClick={onClose} zIndex={zIndex} data-testid=\"popover-backdrop\" />\n      )}\n      <PopoverDialog\n        open\n        id={id}\n        zIndex={zIndex}\n        ref={setPopperElement}\n        style={{\n          ...styles.popper,\n          ...style,\n          ...(useAnchorWidth ? { minWidth: anchorElement?.clientWidth } : {}),\n        }}\n        onKeyDown={handleKeyDown}\n        {...attributes.popper}\n        {...dialogProps}\n      >\n        {children}\n      </PopoverDialog>\n    </Portal>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Portal/Portal.cjs

@@ -1,51 +1,34 @@
 'use strict';
 
 var React = require('react');
-var ReactDOM = require('react-dom');
-var generateId = require('../../utils/generateId.cjs');
+var reactDom = require('react-dom');
+require('../../hooks/useFocusVisible.cjs');
+var useId = require('../../hooks/useId.cjs');
+var utils = require('./utils.cjs');
 
 /**
  * The portal component renders content on the document `body` unless `rootElementRef` is passed.
  */
-class Portal extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.id = generateId.generateId('portal');
-        this.portalNode = null;
-        this.state = {
-            isMounted: false,
-        };
-    }
-    componentDidMount() {
-        const { rootElementRef } = this.props;
-        this.portalNode = document.createElement('div');
-        this.portalNode.setAttribute('id', `portal-${this.id}`);
-        this.portalNode.style.cssText = 'position: absolute; top: 0; left: 0;';
-        if (rootElementRef) {
-            rootElementRef === null || rootElementRef === undefined ? undefined : rootElementRef.appendChild(this.portalNode);
-        }
-        else {
-            document.body.appendChild(this.portalNode);
-        }
-        this.setState({ isMounted: true });
-    }
-    componentWillUnmount() {
-        if (this.portalNode) {
-            const { rootElementRef } = this.props;
-            if (rootElementRef) {
-                rootElementRef.removeChild(this.portalNode);
-            }
-            else {
-                document.body.removeChild(this.portalNode);
+const Portal = ({ children, rootElementRef }) => {
+    const [isMounted, setIsMounted] = React.useState(false);
+    const [portalNode, setPortalNode] = React.useState(null);
+    const id = useId.useId({ prefix: 'portal' });
+    React.useEffect(() => {
+        const element = document.createElement('div');
+        element.id = `portal-${id}`;
+        element.style.cssText = 'position: absolute; top: 0; left: 0;';
+        const attachTo = rootElementRef || utils.getLastOpenDialog() || document.body;
+        attachTo.appendChild(element);
+        setPortalNode(element);
+        setIsMounted(true);
+        return () => {
+            if (document.contains(attachTo) && attachTo.contains(element)) {
+                attachTo.removeChild(element);
             }
-        }
-    }
-    render() {
-        const { children } = this.props;
-        const { isMounted } = this.state;
-        return this.portalNode && isMounted ? ReactDOM.createPortal(children, this.portalNode) : null;
-    }
-}
+        };
+    }, [id, rootElementRef]);
+    return portalNode && isMounted ? reactDom.createPortal(children, portalNode) : null;
+};
 
 exports.Portal = Portal;
 //# sourceMappingURL=Portal.cjs.map

package/dist/components/Portal/Portal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.cjs","sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { PureComponent, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { generateId } from '../../utils/generateId';\n\ntype PortalProps = {\n  children: ReactNode;\n  rootElementRef?: HTMLElement;\n};\n\ntype PortalState = {\n  isMounted: boolean;\n};\n\n/**\n * The portal component renders content on the document `body` unless `rootElementRef` is passed.\n */\nexport class Portal extends PureComponent<PortalProps, PortalState> {\n  id = generateId('portal');\n\n  portalNode: HTMLElement | null = null;\n\n  constructor(props: PortalProps) {\n    super(props);\n    this.state = {\n      isMounted: false,\n    };\n  }\n\n  componentDidMount() {\n    const { rootElementRef } = this.props;\n\n    this.portalNode = document.createElement('div');\n    this.portalNode.setAttribute('id', `portal-${this.id}`);\n    this.portalNode.style.cssText = 'position: absolute; top: 0; left: 0;';\n\n    if (rootElementRef) {\n      rootElementRef?.appendChild(this.portalNode);\n    } else {\n      document.body.appendChild(this.portalNode);\n    }\n\n    this.setState({ isMounted: true });\n  }\n\n  componentWillUnmount() {\n    if (this.portalNode) {\n      const { rootElementRef } = this.props;\n      if (rootElementRef) {\n        rootElementRef.removeChild(this.portalNode);\n      } else {\n        document.body.removeChild(this.portalNode);\n      }\n    }\n  }\n\n  render(): React.ReactPortal | null {\n    const { children } = this.props;\n    const { isMounted } = this.state;\n\n    return this.portalNode && isMounted ? createPortal(children, this.portalNode) : null;\n  }\n}\n"],"names":["PureComponent","generateId","createPortal"],"mappings":";;;;;;AAaA;;AAEG;AACG,MAAO,MAAO,SAAQA,mBAAuC,CAAA;AAKjE,IAAA,WAAA,CAAY,KAAkB,EAAA;QAC5B,KAAK,CAAC,KAAK,CAAC;AALd,QAAA,IAAA,CAAA,EAAE,GAAGC,qBAAU,CAAC,QAAQ,CAAC;QAEzB,IAAU,CAAA,UAAA,GAAuB,IAAI;QAInC,IAAI,CAAC,KAAK,GAAG;AACX,YAAA,SAAS,EAAE,KAAK;SACjB;;IAGH,iBAAiB,GAAA;AACf,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK;QAErC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC/C,QAAA,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;QACvD,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,sCAAsC;AAEtE,QAAA,IAAI,cAAc,EAAE;YAClB,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,SAAA,GAAA,SAAA,GAAd,cAAc,CAAE,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AAC7C;AAAM,aAAA;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AAC3C;QAED,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGpC,oBAAoB,GAAA;QAClB,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK;AACrC,YAAA,IAAI,cAAc,EAAE;AAClB,gBAAA,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AAC5C;AAAM,iBAAA;gBACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AAC3C;AACF;;IAGH,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;AAC/B,QAAA,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK;QAEhC,OAAO,IAAI,CAAC,UAAU,IAAI,SAAS,GAAGC,qBAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI;;AAEvF;;;;"}
+{"version":3,"file":"Portal.cjs","sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useEffect, useState, ReactNode, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useId } from '../../hooks';\nimport { getLastOpenDialog } from './utils';\n\ntype PortalProps = {\n  children: ReactNode;\n  rootElementRef?: HTMLElement;\n};\n\n/**\n * The portal component renders content on the document `body` unless `rootElementRef` is passed.\n */\nexport const Portal: FC<PortalProps> = ({ children, rootElementRef }: PortalProps) => {\n  const [isMounted, setIsMounted] = useState(false);\n  const [portalNode, setPortalNode] = useState<HTMLElement | null>(null);\n  const id = useId({ prefix: 'portal' });\n\n  useEffect(() => {\n    const element = document.createElement('div');\n    element.id = `portal-${id}`;\n    element.style.cssText = 'position: absolute; top: 0; left: 0;';\n\n    const attachTo = rootElementRef || getLastOpenDialog() || document.body;\n    attachTo.appendChild(element);\n\n    setPortalNode(element);\n    setIsMounted(true);\n\n    return () => {\n      if (document.contains(attachTo) && attachTo.contains(element)) {\n        attachTo.removeChild(element);\n      }\n    };\n  }, [id, rootElementRef]);\n\n  return portalNode && isMounted ? createPortal(children, portalNode) : null;\n};\n"],"names":["useState","useId","useEffect","getLastOpenDialog","createPortal"],"mappings":";;;;;;;;AAUA;;AAEG;AACU,MAAA,MAAM,GAAoB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAe,KAAI;IACnF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IACjD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAqB,IAAI,CAAC;IACtE,MAAM,EAAE,GAAGC,WAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;IAEtCC,eAAS,CAAC,MAAK;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,OAAO,CAAC,EAAE,GAAG,CAAU,OAAA,EAAA,EAAE,EAAE;AAC3B,QAAA,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,sCAAsC;QAE9D,MAAM,QAAQ,GAAG,cAAc,IAAIC,uBAAiB,EAAE,IAAI,QAAQ,CAAC,IAAI;AACvE,QAAA,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;QAE7B,aAAa,CAAC,OAAO,CAAC;QACtB,YAAY,CAAC,IAAI,CAAC;AAElB,QAAA,OAAO,MAAK;AACV,YAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;AAC7D,gBAAA,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;AAC9B;AACH,SAAC;AACH,KAAC,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC;AAExB,IAAA,OAAO,UAAU,IAAI,SAAS,GAAGC,qBAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,IAAI;AAC5E;;;;"}

package/dist/components/Portal/Portal.d.ts

@@ -1,20 +1,10 @@
-import { PureComponent, ReactNode } from 'react';
+import { ReactNode, FC } from 'react';
 type PortalProps = {
     children: ReactNode;
     rootElementRef?: HTMLElement;
 };
-type PortalState = {
-    isMounted: boolean;
-};
 /**
  * The portal component renders content on the document `body` unless `rootElementRef` is passed.
  */
-export declare class Portal extends PureComponent<PortalProps, PortalState> {
-    id: string;
-    portalNode: HTMLElement | null;
-    constructor(props: PortalProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.ReactPortal | null;
-}
+export declare const Portal: FC<PortalProps>;
 export {};

package/dist/components/Portal/Portal.js

@@ -1,49 +1,32 @@
-import { PureComponent } from 'react';
+import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { generateId } from '../../utils/generateId.js';
+import '../../hooks/useFocusVisible.js';
+import { useId } from '../../hooks/useId.js';
+import { getLastOpenDialog } from './utils.js';
 
 /**
  * The portal component renders content on the document `body` unless `rootElementRef` is passed.
  */
-class Portal extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.id = generateId('portal');
-        this.portalNode = null;
-        this.state = {
-            isMounted: false,
-        };
-    }
-    componentDidMount() {
-        const { rootElementRef } = this.props;
-        this.portalNode = document.createElement('div');
-        this.portalNode.setAttribute('id', `portal-${this.id}`);
-        this.portalNode.style.cssText = 'position: absolute; top: 0; left: 0;';
-        if (rootElementRef) {
-            rootElementRef === null || rootElementRef === undefined ? undefined : rootElementRef.appendChild(this.portalNode);
-        }
-        else {
-            document.body.appendChild(this.portalNode);
-        }
-        this.setState({ isMounted: true });
-    }
-    componentWillUnmount() {
-        if (this.portalNode) {
-            const { rootElementRef } = this.props;
-            if (rootElementRef) {
-                rootElementRef.removeChild(this.portalNode);
-            }
-            else {
-                document.body.removeChild(this.portalNode);
+const Portal = ({ children, rootElementRef }) => {
+    const [isMounted, setIsMounted] = useState(false);
+    const [portalNode, setPortalNode] = useState(null);
+    const id = useId({ prefix: 'portal' });
+    useEffect(() => {
+        const element = document.createElement('div');
+        element.id = `portal-${id}`;
+        element.style.cssText = 'position: absolute; top: 0; left: 0;';
+        const attachTo = rootElementRef || getLastOpenDialog() || document.body;
+        attachTo.appendChild(element);
+        setPortalNode(element);
+        setIsMounted(true);
+        return () => {
+            if (document.contains(attachTo) && attachTo.contains(element)) {
+                attachTo.removeChild(element);
             }
-        }
-    }
-    render() {
-        const { children } = this.props;
-        const { isMounted } = this.state;
-        return this.portalNode && isMounted ? createPortal(children, this.portalNode) : null;
-    }
-}
+        };
+    }, [id, rootElementRef]);
+    return portalNode && isMounted ? createPortal(children, portalNode) : null;
+};
 
 export { Portal };
 //# sourceMappingURL=Portal.js.map

package/dist/components/Portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { PureComponent, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { generateId } from '../../utils/generateId';\n\ntype PortalProps = {\n  children: ReactNode;\n  rootElementRef?: HTMLElement;\n};\n\ntype PortalState = {\n  isMounted: boolean;\n};\n\n/**\n * The portal component renders content on the document `body` unless `rootElementRef` is passed.\n */\nexport class Portal extends PureComponent<PortalProps, PortalState> {\n  id = generateId('portal');\n\n  portalNode: HTMLElement | null = null;\n\n  constructor(props: PortalProps) {\n    super(props);\n    this.state = {\n      isMounted: false,\n    };\n  }\n\n  componentDidMount() {\n    const { rootElementRef } = this.props;\n\n    this.portalNode = document.createElement('div');\n    this.portalNode.setAttribute('id', `portal-${this.id}`);\n    this.portalNode.style.cssText = 'position: absolute; top: 0; left: 0;';\n\n    if (rootElementRef) {\n      rootElementRef?.appendChild(this.portalNode);\n    } else {\n      document.body.appendChild(this.portalNode);\n    }\n\n    this.setState({ isMounted: true });\n  }\n\n  componentWillUnmount() {\n    if (this.portalNode) {\n      const { rootElementRef } = this.props;\n      if (rootElementRef) {\n        rootElementRef.removeChild(this.portalNode);\n      } else {\n        document.body.removeChild(this.portalNode);\n      }\n    }\n  }\n\n  render(): React.ReactPortal | null {\n    const { children } = this.props;\n    const { isMounted } = this.state;\n\n    return this.portalNode && isMounted ? createPortal(children, this.portalNode) : null;\n  }\n}\n"],"names":[],"mappings":";;;;AAaA;;AAEG;AACG,MAAO,MAAO,SAAQ,aAAuC,CAAA;AAKjE,IAAA,WAAA,CAAY,KAAkB,EAAA;QAC5B,KAAK,CAAC,KAAK,CAAC;AALd,QAAA,IAAA,CAAA,EAAE,GAAG,UAAU,CAAC,QAAQ,CAAC;QAEzB,IAAU,CAAA,UAAA,GAAuB,IAAI;QAInC,IAAI,CAAC,KAAK,GAAG;AACX,YAAA,SAAS,EAAE,KAAK;SACjB;;IAGH,iBAAiB,GAAA;AACf,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK;QAErC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC/C,QAAA,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,EAAE,CAAA,CAAE,CAAC;QACvD,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,sCAAsC;AAEtE,QAAA,IAAI,cAAc,EAAE;YAClB,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,SAAA,GAAA,SAAA,GAAd,cAAc,CAAE,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AAC7C;AAAM,aAAA;YACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AAC3C;QAED,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGpC,oBAAoB,GAAA;QAClB,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK;AACrC,YAAA,IAAI,cAAc,EAAE;AAClB,gBAAA,cAAc,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AAC5C;AAAM,iBAAA;gBACL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AAC3C;AACF;;IAGH,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK;AAC/B,QAAA,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK;QAEhC,OAAO,IAAI,CAAC,UAAU,IAAI,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI;;AAEvF;;;;"}
+{"version":3,"file":"Portal.js","sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useEffect, useState, ReactNode, FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useId } from '../../hooks';\nimport { getLastOpenDialog } from './utils';\n\ntype PortalProps = {\n  children: ReactNode;\n  rootElementRef?: HTMLElement;\n};\n\n/**\n * The portal component renders content on the document `body` unless `rootElementRef` is passed.\n */\nexport const Portal: FC<PortalProps> = ({ children, rootElementRef }: PortalProps) => {\n  const [isMounted, setIsMounted] = useState(false);\n  const [portalNode, setPortalNode] = useState<HTMLElement | null>(null);\n  const id = useId({ prefix: 'portal' });\n\n  useEffect(() => {\n    const element = document.createElement('div');\n    element.id = `portal-${id}`;\n    element.style.cssText = 'position: absolute; top: 0; left: 0;';\n\n    const attachTo = rootElementRef || getLastOpenDialog() || document.body;\n    attachTo.appendChild(element);\n\n    setPortalNode(element);\n    setIsMounted(true);\n\n    return () => {\n      if (document.contains(attachTo) && attachTo.contains(element)) {\n        attachTo.removeChild(element);\n      }\n    };\n  }, [id, rootElementRef]);\n\n  return portalNode && isMounted ? createPortal(children, portalNode) : null;\n};\n"],"names":[],"mappings":";;;;;;AAUA;;AAEG;AACU,MAAA,MAAM,GAAoB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAe,KAAI;IACnF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACjD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC;IACtE,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;IAEtC,SAAS,CAAC,MAAK;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,OAAO,CAAC,EAAE,GAAG,CAAU,OAAA,EAAA,EAAE,EAAE;AAC3B,QAAA,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,sCAAsC;QAE9D,MAAM,QAAQ,GAAG,cAAc,IAAI,iBAAiB,EAAE,IAAI,QAAQ,CAAC,IAAI;AACvE,QAAA,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;QAE7B,aAAa,CAAC,OAAO,CAAC;QACtB,YAAY,CAAC,IAAI,CAAC;AAElB,QAAA,OAAO,MAAK;AACV,YAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;AAC7D,gBAAA,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;AAC9B;AACH,SAAC;AACH,KAAC,EAAE,CAAC,EAAE,EAAE,cAAc,CAAC,CAAC;AAExB,IAAA,OAAO,UAAU,IAAI,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,IAAI;AAC5E;;;;"}

package/dist/components/Portal/utils.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const getLastOpenDialog = () => {
+    const dialogs = document.querySelectorAll('dialog[open]');
+    if (dialogs.length === 0)
+        return null;
+    return dialogs[dialogs.length - 1];
+};
+
+exports.getLastOpenDialog = getLastOpenDialog;
+//# sourceMappingURL=utils.cjs.map

package/dist/components/Portal/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/Portal/utils.ts"],"sourcesContent":["export const getLastOpenDialog = () => {\n  const dialogs = document.querySelectorAll('dialog[open]');\n  if (dialogs.length === 0) return null;\n\n  return dialogs[dialogs.length - 1];\n};\n"],"names":[],"mappings":";;AAAO,MAAM,iBAAiB,GAAG,MAAK;IACpC,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC;AACzD,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;IAErC,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;AACpC;;;;"}

package/dist/components/Portal/utils.d.ts

@@ -0,0 +1 @@
+export declare const getLastOpenDialog: () => Element | null;

package/dist/components/Portal/utils.js

@@ -0,0 +1,9 @@
+const getLastOpenDialog = () => {
+    const dialogs = document.querySelectorAll('dialog[open]');
+    if (dialogs.length === 0)
+        return null;
+    return dialogs[dialogs.length - 1];
+};
+
+export { getLastOpenDialog };
+//# sourceMappingURL=utils.js.map

package/dist/components/Portal/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/Portal/utils.ts"],"sourcesContent":["export const getLastOpenDialog = () => {\n  const dialogs = document.querySelectorAll('dialog[open]');\n  if (dialogs.length === 0) return null;\n\n  return dialogs[dialogs.length - 1];\n};\n"],"names":[],"mappings":"AAAO,MAAM,iBAAiB,GAAG,MAAK;IACpC,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,cAAc,CAAC;AACzD,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,IAAI;IAErC,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;AACpC;;;;"}

package/dist/components/ToastsLayout/ToastsLayout.cjs

@@ -2,7 +2,7 @@
 
 var reactTransitionGroup = require('react-transition-group');
 var React = require('react');
-var ReactDOM = require('react-dom');
+var reactDom = require('react-dom');
 var styled = require('./components/styled.cjs');
 var Toast = require('./components/Toast.cjs');
 
@@ -15,7 +15,7 @@ const ToastsLayout = ({ className, e2eClassName, toasts, minWidth = '50vw', max
         if (max && toasts.length > max)
             onClose(toasts[0].key);
     }, [toasts, max, onClose]);
-    return ReactDOM.createPortal(React__default.default.createElement(styled.ToastsLayoutContainer, { direction: "vertical", alignX: "center", spacing: 4 },
+    return reactDom.createPortal(React__default.default.createElement(styled.ToastsLayoutContainer, { direction: "vertical", alignX: "center", spacing: 4 },
         React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null }, [...toasts].reverse().map((toast, index) => (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: toast.key, timeout: 500, classNames: "veeqo-components-toast" },
             React__default.default.createElement(Toast.Toast, { className: className, e2eClassName: e2eClassName, minWidth: minWidth, last: index === toasts.length - 1, onClose: () => onClose(toast.key), ...toast })))))), document.body);
 };

package/dist/components/Tooltip/Tooltip.cjs

@@ -1,14 +1,13 @@
 'use strict';
 
 var React = require('react');
-var ReactDOM = require('react-dom');
 var styled = require('./components/styled.cjs');
 var TooltipPopover = require('./components/TooltipPopover.cjs');
+var Portal = require('../Portal/Portal.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
 
 const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
     const [shouldShow, setShouldShow] = React.useState(initialShouldShow);
@@ -26,9 +25,10 @@ const Tooltip = ({ children, text, content, config, reversed = false, className,
         return children;
     const show = () => setShouldShow(true);
     const hide = () => setShouldShow(false);
-    const tooltipMarkup = shouldShow && hasContent && (React__default.default.createElement(TooltipPopover.TooltipPopover, { classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content }));
+    const tooltipContent = (React__default.default.createElement(TooltipPopover.TooltipPopover, { classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content }));
+    const tooltipMarkup = useReactPortal ? React__default.default.createElement(Portal.Portal, null, tooltipContent) : tooltipContent;
     return (React__default.default.createElement(styled.Container, { className: classNames.container },
-        useReactPortal ? ReactDOM__default.default.createPortal(tooltipMarkup, document.body) : tooltipMarkup,
+        shouldShow && tooltipMarkup,
         React__default.default.createElement(styled.Hoverable, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { TooltipProps } from './types';\n\nimport { Container, Hoverable } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const hasText = text ? text.trim().length > 0 : false;\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasContent = !!(content || hasText);\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  const tooltipMarkup = shouldShow && hasContent && (\n    <TooltipPopover\n      classNames={classNames}\n      hoverableElement={hoverableElement}\n      config={config}\n      reversed={reversed}\n      withTriangle={withTriangle}\n      text={text}\n      content={content}\n    />\n  );\n\n  return (\n    <Container className={classNames.container}>\n      {useReactPortal ? ReactDOM.createPortal(tooltipMarkup, document.body) : tooltipMarkup}\n      <Hoverable\n        ref={setHoverableElement}\n        className={classNames.hoverable}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </Hoverable>\n    </Container>\n  );\n};\n"],"names":["useState","React","TooltipPopover","Container","ReactDOM","Hoverable"],"mappings":";;;;;;;;;;;;AAQO,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;AAErD,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAY,UAAA,CAAA;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAM,IAAA,CAAA;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAW,SAAA,CAAA;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAY,UAAA,CAAA;KACjD;IAED,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AACzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,MAAM,aAAa,GAAG,UAAU,IAAI,UAAU,KAC5CC,sBAAA,CAAA,aAAA,CAACC,6BAAc,EAAA,EACb,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACH;IAED,QACED,qCAACE,gBAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AACvC,QAAA,cAAc,GAAGC,yBAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,aAAa;QACrFH,sBAAC,CAAA,aAAA,CAAAI,gBAAS,EACR,EAAA,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { TooltipProps } from './types';\nimport { Container, Hoverable } from './components/styled';\nimport { TooltipPopover } from './components/TooltipPopover';\nimport { Portal } from '../Portal';\n\nexport const Tooltip = ({\n  children,\n  text,\n  content,\n  config,\n  reversed = false,\n  className,\n  withTriangle,\n  initialShouldShow = false,\n  useReactPortal = true,\n}: TooltipProps): JSX.Element | null => {\n  const [shouldShow, setShouldShow] = useState(initialShouldShow);\n  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);\n\n  const hasText = text ? text.trim().length > 0 : false;\n\n  const classNames = {\n    container: className && `${className} ${className}-container`,\n    tip: className && `${className}-tip`,\n    wrap: className && `${className}-wrap`,\n    triangle: className && `${className}-triangle`,\n    hoverable: className && `${className}-hoverable`,\n  };\n\n  const hasContent = !!(content || hasText);\n  if (!hasContent) return children;\n\n  const show = () => setShouldShow(true);\n  const hide = () => setShouldShow(false);\n\n  const tooltipContent = (\n    <TooltipPopover\n      classNames={classNames}\n      hoverableElement={hoverableElement}\n      config={config}\n      reversed={reversed}\n      withTriangle={withTriangle}\n      text={text}\n      content={content}\n    />\n  );\n\n  const tooltipMarkup = useReactPortal ? <Portal>{tooltipContent}</Portal> : tooltipContent;\n\n  return (\n    <Container className={classNames.container}>\n      {shouldShow && tooltipMarkup}\n      <Hoverable\n        ref={setHoverableElement}\n        className={classNames.hoverable}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n      >\n        {children}\n      </Hoverable>\n    </Container>\n  );\n};\n"],"names":["useState","React","TooltipPopover","Portal","Container","Hoverable"],"mappings":";;;;;;;;;;;AAMO,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,IAAI,GACR,KAAwB;IACrC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,iBAAiB,CAAC;IAC/D,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;AAErF,IAAA,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK;AAErD,IAAA,MAAM,UAAU,GAAG;AACjB,QAAA,SAAS,EAAE,SAAS,IAAI,GAAG,SAAS,CAAA,CAAA,EAAI,SAAS,CAAY,UAAA,CAAA;AAC7D,QAAA,GAAG,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAM,IAAA,CAAA;AACpC,QAAA,IAAI,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA;AACtC,QAAA,QAAQ,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAW,SAAA,CAAA;AAC9C,QAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAY,UAAA,CAAA;KACjD;IAED,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC;AACzC,IAAA,IAAI,CAAC,UAAU;AAAE,QAAA,OAAO,QAAQ;IAEhC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,KAAK,CAAC;AAEvC,IAAA,MAAM,cAAc,IAClBC,sBAAA,CAAA,aAAA,CAACC,6BAAc,EACb,EAAA,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAAA,CAChB,CACH;AAED,IAAA,MAAM,aAAa,GAAG,cAAc,GAAGD,sBAAA,CAAA,aAAA,CAACE,aAAM,EAAA,IAAA,EAAE,cAAc,CAAU,GAAG,cAAc;IAEzF,QACEF,qCAACG,gBAAS,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAA;AACvC,QAAA,UAAU,IAAI,aAAa;QAC5BH,sBAAC,CAAA,aAAA,CAAAI,gBAAS,EACR,EAAA,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI,IAEjB,QAAQ,CACC,CACF;AAEhB;;;;"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
 import { Container, Hoverable } from './components/styled.js';
 import { TooltipPopover } from './components/TooltipPopover.js';
+import { Portal } from '../Portal/Portal.js';
 
 const Tooltip = ({ children, text, content, config, reversed = false, className, withTriangle, initialShouldShow = false, useReactPortal = true, }) => {
     const [shouldShow, setShouldShow] = useState(initialShouldShow);
@@ -19,9 +19,10 @@ const Tooltip = ({ children, text, content, config, reversed = false, className,
         return children;
     const show = () => setShouldShow(true);
     const hide = () => setShouldShow(false);
-    const tooltipMarkup = shouldShow && hasContent && (React.createElement(TooltipPopover, { classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content }));
+    const tooltipContent = (React.createElement(TooltipPopover, { classNames: classNames, hoverableElement: hoverableElement, config: config, reversed: reversed, withTriangle: withTriangle, text: text, content: content }));
+    const tooltipMarkup = useReactPortal ? React.createElement(Portal, null, tooltipContent) : tooltipContent;
     return (React.createElement(Container, { className: classNames.container },
-        useReactPortal ? ReactDOM.createPortal(tooltipMarkup, document.body) : tooltipMarkup,
+        shouldShow && tooltipMarkup,
         React.createElement(Hoverable, { ref: setHoverableElement, className: classNames.hoverable, onMouseEnter: show, onMouseLeave: hide }, children)));
 };