@lumx/react 2.2.20-alpha.xss.datatable → 2.2.21

package/esm/_internal/Lightbox2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox2.js","sources":["../../../src/components/lightbox/Lightbox.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { createPortal } from 'react-dom';\n\nimport { mdiClose } from '@lumx/icons';\nimport { ColorPalette, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';\nimport { DOCUMENT } from '@lumx/react/constants';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\n\nconst LIGHTBOX_TRANSITION_DURATION = 400;\n\n/**\n * Defines the props of the component.\n */\nexport interface LightboxProps extends GenericProps {\n    /** Props to pass to the close button (minus those already set by the Lightbox props). */\n    closeButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the element that triggered modal opening to set focus on. */\n    parentElement: RefObject<any>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** On close callback. */\n    onClose?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Lightbox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Lightbox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        ariaLabel,\n        children,\n        className,\n        closeButtonProps,\n        isOpen,\n        onClose,\n        parentElement,\n        preventAutoClose,\n        theme,\n        zIndex,\n        ...forwardedProps\n    } = props;\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const childrenRef = useRef<any>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && wrapperRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useDelayedVisibility(!!isOpen, LIGHTBOX_TRANSITION_DURATION);\n\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(wrapperRef.current, childrenRef.current?.firstChild);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = useRef(isOpen);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n        if (isOpen !== previousOpen.current) {\n            previousOpen.current = isOpen;\n\n            // Focus the parent element on close.\n            if (!isOpen && parentElement && parentElement.current) {\n                parentElement.current.focus();\n            }\n        }\n    }, [isOpen, parentElement]);\n\n    // Close lightbox on escape key pressed.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    if (!isOpen && !isVisible) return null;\n\n    return createPortal(\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n        <div\n            ref={mergeRefs(ref, wrapperRef)}\n            {...forwardedProps}\n            aria-label={ariaLabel}\n            aria-modal=\"true\"\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    isHidden: !isOpen,\n                    isShown: isOpen || isVisible,\n                    theme,\n                }),\n            )}\n            style={{ zIndex }}\n        >\n            {closeButtonProps && (\n                <IconButton\n                    {...closeButtonProps}\n                    className={`${CLASSNAME}__close`}\n                    color={ColorPalette.light}\n                    emphasis={Emphasis.low}\n                    icon={mdiClose}\n                    theme={theme}\n                    type=\"button\"\n                    onClick={onClose}\n                />\n            )}\n            <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>\n                <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role=\"presentation\">\n                    {children}\n                </div>\n            </ClickAwayProvider>\n        </div>,\n        document.body,\n    );\n});\nLightbox.displayName = COMPONENT_NAME;\nLightbox.className = CLASSNAME;\n"],"names":["LIGHTBOX_TRANSITION_DURATION","COMPONENT_NAME","CLASSNAME","getRootClassName","Lightbox","forwardRef","props","ref","ariaLabel","children","className","closeButtonProps","isOpen","onClose","parentElement","preventAutoClose","theme","zIndex","forwardedProps","DOCUMENT","childrenRef","useRef","wrapperRef","useDisableBodyScroll","current","isVisible","useDelayedVisibility","useFocusTrap","firstChild","previousOpen","useEffect","focus","useCallbackOnEscape","clickAwayRefs","createPortal","mergeRefs","classNames","handleBasicClasses","prefix","isHidden","isShown","ColorPalette","light","Emphasis","low","mdiClose","document","body","displayName"],"mappings":"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"}
+{"version":3,"file":"Lightbox2.js","sources":["../../../src/components/lightbox/Lightbox.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { createPortal } from 'react-dom';\n\nimport { mdiClose } from '@lumx/icons';\nimport { ColorPalette, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';\nimport { DOCUMENT } from '@lumx/react/constants';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\n\nconst LIGHTBOX_TRANSITION_DURATION = 400;\n\n/**\n * Defines the props of the component.\n */\nexport interface LightboxProps extends GenericProps {\n    /** Props to pass to the close button (minus those already set by the Lightbox props). */\n    closeButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the element that triggered modal opening to set focus on. */\n    parentElement: RefObject<any>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** On close callback. */\n    onClose?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Lightbox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Lightbox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        ariaLabel,\n        children,\n        className,\n        closeButtonProps,\n        isOpen,\n        onClose,\n        parentElement,\n        preventAutoClose,\n        theme,\n        zIndex,\n        ...forwardedProps\n    } = props;\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const childrenRef = useRef<any>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && wrapperRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useDelayedVisibility(!!isOpen, LIGHTBOX_TRANSITION_DURATION);\n\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(isOpen && wrapperRef.current, childrenRef.current?.firstChild);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = useRef(isOpen);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n        if (isOpen !== previousOpen.current) {\n            previousOpen.current = isOpen;\n\n            // Focus the parent element on close.\n            if (!isOpen && parentElement && parentElement.current) {\n                parentElement.current.focus();\n            }\n        }\n    }, [isOpen, parentElement]);\n\n    // Close lightbox on escape key pressed.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    if (!isOpen && !isVisible) return null;\n\n    return createPortal(\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n        <div\n            ref={mergeRefs(ref, wrapperRef)}\n            {...forwardedProps}\n            aria-label={ariaLabel}\n            aria-modal=\"true\"\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    isHidden: !isOpen,\n                    isShown: isOpen || isVisible,\n                    theme,\n                }),\n            )}\n            style={{ zIndex }}\n        >\n            {closeButtonProps && (\n                <IconButton\n                    {...closeButtonProps}\n                    className={`${CLASSNAME}__close`}\n                    color={ColorPalette.light}\n                    emphasis={Emphasis.low}\n                    icon={mdiClose}\n                    theme={theme}\n                    type=\"button\"\n                    onClick={onClose}\n                />\n            )}\n            <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>\n                <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role=\"presentation\">\n                    {children}\n                </div>\n            </ClickAwayProvider>\n        </div>,\n        document.body,\n    );\n});\nLightbox.displayName = COMPONENT_NAME;\nLightbox.className = CLASSNAME;\n"],"names":["LIGHTBOX_TRANSITION_DURATION","COMPONENT_NAME","CLASSNAME","getRootClassName","Lightbox","forwardRef","props","ref","ariaLabel","children","className","closeButtonProps","isOpen","onClose","parentElement","preventAutoClose","theme","zIndex","forwardedProps","DOCUMENT","childrenRef","useRef","wrapperRef","useDisableBodyScroll","current","isVisible","useDelayedVisibility","useFocusTrap","firstChild","previousOpen","useEffect","focus","useCallbackOnEscape","clickAwayRefs","createPortal","mergeRefs","classNames","handleBasicClasses","prefix","isHidden","isShown","ColorPalette","light","Emphasis","low","mdiClose","document","body","displayName"],"mappings":"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"}

package/esm/_internal/LinkPreview.js

@@ -1,6 +1,6 @@
-import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { b as _objectWithoutProperties, c as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
 import { AspectRatio, Theme, ColorPalette, ColorVariant, Size } from './components.js';
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
 import { L as Link } from './Link2.js';
 import { T as Thumbnail } from './Thumbnail2.js';
@@ -24,7 +24,8 @@ var CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 var DEFAULT_PROPS = {
   size: Size.regular,
-  theme: Theme.light
+  theme: Theme.light,
+  titleHeading: 'h2'
 };
 /**
  * LinkPreview component.
@@ -38,18 +39,18 @@ var LinkPreview = forwardRef(function (props, ref) {
   var className = props.className,
       description = props.description,
       link = props.link,
+      linkAs = props.linkAs,
       linkProps = props.linkProps,
       size = props.size,
       theme = props.theme,
       thumbnailProps = props.thumbnailProps,
       title = props.title,
-      forwardedProps = _objectWithoutProperties(props, ["className", "description", "link", "linkProps", "size", "theme", "thumbnailProps", "title"]); //TODO: a11y
+      titleHeading = props.titleHeading,
+      forwardedProps = _objectWithoutProperties(props, ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"]); // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
 
 
-  var goToUrl = useCallback(function () {
-    return window.open(link, '_blank');
-  }, [link]);
-  return React.createElement("div", _extends({
+  var TitleHeading = titleHeading;
+  return React.createElement("article", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
@@ -62,15 +63,21 @@ var LinkPreview = forwardRef(function (props, ref) {
   }, thumbnailProps && React.createElement("div", {
     className: "".concat(CLASSNAME, "__thumbnail")
   }, React.createElement(Thumbnail, _extends({}, thumbnailProps, {
-    onClick: goToUrl,
-    role: "link",
+    linkAs: linkAs,
+    linkProps: _objectSpread2({}, linkProps, {
+      href: link,
+      target: '_blank',
+      // Avoid redundant links in focus order
+      tabIndex: -1
+    }),
     aspectRatio: AspectRatio.free,
     fillHeight: true
   }))), React.createElement("div", {
     className: "".concat(CLASSNAME, "__container")
-  }, title && React.createElement("div", {
+  }, title && React.createElement(TitleHeading, {
     className: "".concat(CLASSNAME, "__title")
   }, React.createElement(Link, _extends({}, linkProps, {
+    linkAs: linkAs,
     target: "_blank",
     href: link,
     color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
@@ -80,11 +87,14 @@ var LinkPreview = forwardRef(function (props, ref) {
   }, description), React.createElement("div", {
     className: "".concat(CLASSNAME, "__link")
   }, React.createElement(Link, _extends({}, linkProps, {
+    linkAs: linkAs,
     className: classnames("".concat(CLASSNAME, "__link"), linkProps === null || linkProps === void 0 ? void 0 : linkProps.className),
     target: "_blank",
     href: link,
     color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
-    colorVariant: ColorVariant.N
+    colorVariant: ColorVariant.N // Avoid redundant links in focus order
+    ,
+    tabIndex: title ? '-1' : undefined
   }), link)))));
 });
 LinkPreview.displayName = COMPONENT_NAME;

package/esm/_internal/LinkPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkPreview.js","sources":["../../../src/components/link-preview/LinkPreview.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n    AspectRatio,\n    ColorPalette,\n    ColorVariant,\n    Link,\n    LinkProps,\n    Size,\n    Theme,\n    Thumbnail,\n    ThumbnailProps,\n} from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface LinkPreviewProps extends GenericProps {\n    /** Description (either a string, or sanitized html). */\n    description?: string | { __html: string };\n    /** Link URL. */\n    link: string;\n    /** Props to pass to the link (minus those already set by the LinkPreview props). */\n    linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;\n    /** Size variant. */\n    size?: Extract<Size, 'regular' | 'big'>;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Thumbnail for the link preview. */\n    thumbnailProps?: ThumbnailProps;\n    /** Title. */\n    title?: string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'LinkPreview';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<LinkPreviewProps> = {\n    size: Size.regular,\n    theme: Theme.light,\n};\n\n/**\n * LinkPreview component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { className, description, link, linkProps, size, theme, thumbnailProps, title, ...forwardedProps } = props;\n\n    //TODO: a11y\n    const goToUrl = useCallback(() => window.open(link, '_blank'), [link]);\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    size: size === Size.big && thumbnailProps ? Size.big : Size.regular,\n                    theme,\n                }),\n            )}\n        >\n            <div className={`${CLASSNAME}__wrapper`}>\n                {thumbnailProps && (\n                    <div className={`${CLASSNAME}__thumbnail`}>\n                        <Thumbnail\n                            {...thumbnailProps}\n                            onClick={goToUrl}\n                            role=\"link\"\n                            aspectRatio={AspectRatio.free}\n                            fillHeight\n                        />\n                    </div>\n                )}\n\n                <div className={`${CLASSNAME}__container`}>\n                    {title && (\n                        <div className={`${CLASSNAME}__title`}>\n                            <Link\n                                {...linkProps}\n                                target=\"_blank\"\n                                href={link}\n                                color={theme === Theme.light ? ColorPalette.dark : ColorPalette.light}\n                                colorVariant={ColorVariant.N}\n                            >\n                                {title}\n                            </Link>\n                        </div>\n                    )}\n                    {description && <p className={`${CLASSNAME}__description`}>{description}</p>}\n\n                    <div className={`${CLASSNAME}__link`}>\n                        <Link\n                            {...linkProps}\n                            className={classNames(`${CLASSNAME}__link`, linkProps?.className)}\n                            target=\"_blank\"\n                            href={link}\n                            color={theme === Theme.light ? ColorPalette.primary : ColorPalette.light}\n                            colorVariant={ColorVariant.N}\n                        >\n                            {link}\n                        </Link>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n});\n\nLinkPreview.displayName = COMPONENT_NAME;\nLinkPreview.className = CLASSNAME;\nLinkPreview.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","regular","theme","Theme","light","LinkPreview","forwardRef","props","ref","className","description","link","linkProps","thumbnailProps","title","forwardedProps","goToUrl","useCallback","window","open","classNames","handleBasicClasses","prefix","big","AspectRatio","free","ColorPalette","dark","ColorVariant","N","primary","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"LinkPreview.js","sources":["../../../src/components/link-preview/LinkPreview.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n    AspectRatio,\n    ColorPalette,\n    ColorVariant,\n    Link,\n    LinkProps,\n    Size,\n    Theme,\n    Thumbnail,\n    ThumbnailProps,\n} from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, HeadingElement } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface LinkPreviewProps extends GenericProps {\n    /** Description. */\n    description?: string;\n    /** Link URL. */\n    link: string;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Props to pass to the link (minus those already set by the LinkPreview props). */\n    linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;\n    /** Size variant. */\n    size?: Extract<Size, 'regular' | 'big'>;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Thumbnail for the link preview. */\n    thumbnailProps?: ThumbnailProps;\n    /** Title. */\n    title?: string;\n    /** Customize the title heading tag. */\n    titleHeading?: HeadingElement;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'LinkPreview';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS = {\n    size: Size.regular,\n    theme: Theme.light,\n    titleHeading: 'h2',\n} as const;\n\n/**\n * LinkPreview component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        className,\n        description,\n        link,\n        linkAs,\n        linkProps,\n        size,\n        theme,\n        thumbnailProps,\n        title,\n        titleHeading,\n        ...forwardedProps\n    } = props;\n    // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).\n    const TitleHeading = titleHeading as HeadingElement;\n\n    return (\n        <article\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    size: size === Size.big && thumbnailProps ? Size.big : Size.regular,\n                    theme,\n                }),\n            )}\n        >\n            <div className={`${CLASSNAME}__wrapper`}>\n                {thumbnailProps && (\n                    <div className={`${CLASSNAME}__thumbnail`}>\n                        <Thumbnail\n                            {...thumbnailProps}\n                            linkAs={linkAs}\n                            linkProps={{\n                                ...linkProps,\n                                href: link,\n                                target: '_blank',\n                                // Avoid redundant links in focus order\n                                tabIndex: -1,\n                            }}\n                            aspectRatio={AspectRatio.free}\n                            fillHeight\n                        />\n                    </div>\n                )}\n\n                <div className={`${CLASSNAME}__container`}>\n                    {title && (\n                        <TitleHeading className={`${CLASSNAME}__title`}>\n                            <Link\n                                {...linkProps}\n                                linkAs={linkAs}\n                                target=\"_blank\"\n                                href={link}\n                                color={theme === Theme.light ? ColorPalette.dark : ColorPalette.light}\n                                colorVariant={ColorVariant.N}\n                            >\n                                {title}\n                            </Link>\n                        </TitleHeading>\n                    )}\n\n                    {description && <p className={`${CLASSNAME}__description`}>{description}</p>}\n\n                    <div className={`${CLASSNAME}__link`}>\n                        <Link\n                            {...linkProps}\n                            linkAs={linkAs}\n                            className={classNames(`${CLASSNAME}__link`, linkProps?.className)}\n                            target=\"_blank\"\n                            href={link}\n                            color={theme === Theme.light ? ColorPalette.primary : ColorPalette.light}\n                            colorVariant={ColorVariant.N}\n                            // Avoid redundant links in focus order\n                            tabIndex={title ? '-1' : undefined}\n                        >\n                            {link}\n                        </Link>\n                    </div>\n                </div>\n            </div>\n        </article>\n    );\n});\n\nLinkPreview.displayName = COMPONENT_NAME;\nLinkPreview.className = CLASSNAME;\nLinkPreview.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","regular","theme","Theme","light","titleHeading","LinkPreview","forwardRef","props","ref","className","description","link","linkAs","linkProps","thumbnailProps","title","forwardedProps","TitleHeading","classNames","handleBasicClasses","prefix","big","href","target","tabIndex","AspectRatio","free","ColorPalette","dark","ColorVariant","N","primary","undefined","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/Popover2.js

@@ -1,10 +1,10 @@
 import { d as _slicedToArray, b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
-import React, { useState, useEffect, useLayoutEffect, useRef, useMemo, forwardRef } from 'react';
+import React, { useState, useEffect, useLayoutEffect, useRef, useMemo, forwardRef, useCallback } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
 import { D as DOCUMENT, W as WINDOW } from './constants.js';
 import { m as mergeRefs } from './mergeRefs.js';
+import { g as getFirstAndLastFocusable, u as useCallbackOnEscape, C as ClickAwayProvider } from './ClickAwayProvider.js';
 import { createPortal } from 'react-dom';
-import { u as useCallbackOnEscape, C as ClickAwayProvider } from './ClickAwayProvider.js';
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -2295,13 +2295,14 @@ var Popover = forwardRef(function (props, ref) {
       isOpen = props.isOpen,
       offset = props.offset,
       onClose = props.onClose,
+      parentElement = props.parentElement,
       placement = props.placement,
       style = props.style,
       usePortal = props.usePortal,
       zIndex = props.zIndex,
       _props$focusAnchorOnC = props.focusAnchorOnClose,
       focusAnchorOnClose = _props$focusAnchorOnC === void 0 ? true : _props$focusAnchorOnC,
-      forwardedProps = _objectWithoutProperties(props, ["anchorRef", "boundaryRef", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "fitToAnchorWidth", "fitWithinViewportHeight", "focusElement", "hasArrow", "isOpen", "offset", "onClose", "placement", "style", "usePortal", "zIndex", "focusAnchorOnClose"]); // eslint-disable-next-line react-hooks/rules-of-hooks
+      forwardedProps = _objectWithoutProperties(props, ["anchorRef", "boundaryRef", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "fitToAnchorWidth", "fitWithinViewportHeight", "focusElement", "hasArrow", "isOpen", "offset", "onClose", "parentElement", "placement", "style", "usePortal", "zIndex", "focusAnchorOnClose"]); // eslint-disable-next-line react-hooks/rules-of-hooks
 
 
   var _useState = useState(),
@@ -2335,8 +2336,9 @@ var Popover = forwardRef(function (props, ref) {
     }
   });
   /** Action on close */
+  // eslint-disable-next-line react-hooks/rules-of-hooks
 
-  var handleClose = function handleClose() {
+  var handleClose = useCallback(function () {
     if (!onClose) {
       return;
     }
@@ -2348,14 +2350,25 @@ var Popover = forwardRef(function (props, ref) {
 
 
     if (isFocusedWithin.current && focusAnchorOnClose) {
-      var _anchorRef$current;
+      if (parentElement === null || parentElement === void 0 ? void 0 : parentElement.current) {
+        parentElement === null || parentElement === void 0 ? void 0 : parentElement.current.focus();
+      }
+
+      var firstFocusable = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && getFirstAndLastFocusable(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current).first;
+
+      if (firstFocusable) {
+        // Focus the first focusable element in anchor.
+        firstFocusable.focus();
+      } else {
+        var _anchorRef$current;
 
-      (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.focus();
+        // Fallback on the anchor element.
+        anchorRef === null || anchorRef === void 0 ? void 0 : (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.focus();
+      }
     }
 
     onClose();
-  };
-
+  }, [anchorRef, focusAnchorOnClose, onClose, parentElement]);
   var modifiers = [];
   var actualOffset = [(_ref5 = offset === null || offset === void 0 ? void 0 : offset.along) !== null && _ref5 !== void 0 ? _ref5 : 0, ((_ref6 = offset === null || offset === void 0 ? void 0 : offset.away) !== null && _ref6 !== void 0 ? _ref6 : 0) + (hasArrow ? ARROW_SIZE : 0)];
   modifiers.push({