@lumx/react 2.2.5 → 2.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/esm/_internal/AutocompleteMultiple.js.map +1 -1
  2. package/esm/_internal/DatePickerField.js.map +1 -1
  3. package/esm/_internal/Icon2.js +5 -2
  4. package/esm/_internal/Icon2.js.map +1 -1
  5. package/esm/_internal/Lightbox2.js +6 -4
  6. package/esm/_internal/Lightbox2.js.map +1 -1
  7. package/esm/_internal/List2.js.map +1 -1
  8. package/esm/_internal/Notification2.js +2 -1
  9. package/esm/_internal/Notification2.js.map +1 -1
  10. package/esm/_internal/SelectMultiple.js.map +1 -1
  11. package/esm/_internal/SlideshowControls.js +234 -94
  12. package/esm/_internal/SlideshowControls.js.map +1 -1
  13. package/esm/_internal/Thumbnail2.js +1 -1
  14. package/esm/_internal/Thumbnail2.js.map +1 -1
  15. package/esm/_internal/Tooltip2.js +110 -113
  16. package/esm/_internal/Tooltip2.js.map +1 -1
  17. package/esm/_internal/autocomplete.js +0 -1
  18. package/esm/_internal/autocomplete.js.map +1 -1
  19. package/esm/_internal/button.js +0 -1
  20. package/esm/_internal/button.js.map +1 -1
  21. package/esm/_internal/constants.js.map +1 -1
  22. package/esm/_internal/date-picker.js +0 -1
  23. package/esm/_internal/date-picker.js.map +1 -1
  24. package/esm/_internal/expansion-panel.js +0 -1
  25. package/esm/_internal/expansion-panel.js.map +1 -1
  26. package/esm/_internal/getRootClassName.js +19 -1
  27. package/esm/_internal/getRootClassName.js.map +1 -1
  28. package/esm/_internal/lightbox.js +0 -1
  29. package/esm/_internal/lightbox.js.map +1 -1
  30. package/esm/_internal/mergeRefs.js.map +1 -1
  31. package/esm/_internal/select.js +0 -1
  32. package/esm/_internal/select.js.map +1 -1
  33. package/esm/_internal/side-navigation.js +0 -1
  34. package/esm/_internal/side-navigation.js.map +1 -1
  35. package/esm/_internal/slideshow.js +1 -1
  36. package/esm/_internal/text-field.js +0 -1
  37. package/esm/_internal/text-field.js.map +1 -1
  38. package/esm/_internal/tooltip.js +0 -1
  39. package/esm/_internal/tooltip.js.map +1 -1
  40. package/esm/_internal/useRovingTabIndex.js.map +1 -1
  41. package/esm/index.js +1 -1
  42. package/package.json +4 -4
  43. package/src/components/alert-dialog/AlertDialog.test.tsx +1 -0
  44. package/src/components/autocomplete/AutocompleteMultiple.tsx +3 -1
  45. package/src/components/button/__snapshots__/IconButton.test.tsx.snap +0 -5
  46. package/src/components/icon/Icon.tsx +6 -2
  47. package/src/components/image-block/ImageBlock.stories.tsx +1 -2
  48. package/src/components/lightbox/Lightbox.stories.tsx +1 -0
  49. package/src/components/lightbox/Lightbox.tsx +5 -3
  50. package/src/components/notification/Notification.tsx +1 -0
  51. package/src/components/select/SelectMultiple.tsx +0 -1
  52. package/src/components/slideshow/Slideshow.stories.tsx +1 -1
  53. package/src/components/slideshow/Slideshow.tsx +76 -112
  54. package/src/components/slideshow/SlideshowControls.stories.tsx +18 -12
  55. package/src/components/slideshow/SlideshowControls.tsx +11 -7
  56. package/src/components/slideshow/SlideshowItem.tsx +4 -1
  57. package/src/components/slideshow/__snapshots__/Slideshow.test.tsx.snap +52 -17
  58. package/src/components/tabs/state.ts +0 -1
  59. package/src/components/thumbnail/Thumbnail.stories.tsx +25 -1
  60. package/src/components/thumbnail/Thumbnail.test.tsx +9 -1
  61. package/src/components/thumbnail/Thumbnail.tsx +3 -0
  62. package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +26 -0
  63. package/src/components/tooltip/Tooltip.tsx +1 -2
  64. package/src/components/tooltip/useTooltipOpen.tsx +90 -91
  65. package/src/constants.ts +7 -1
  66. package/src/hooks/useFocusWithin.ts +33 -0
  67. package/src/hooks/useSlideshowControls.ts +213 -0
  68. package/src/utils/browserDoesNotSupportHover.test.js +24 -0
  69. package/src/utils/browserDoesNotSupportHover.ts +2 -0
  70. package/src/utils/index.tsx +0 -2
  71. package/src/utils/mergeRefs.ts +1 -1
  72. package/types.d.ts +62 -8
  73. package/src/utils/htmlDecode.ts +0 -13
@@ -264,7 +264,7 @@ var Thumbnail = forwardRef(function (props, ref) {
264
264
  prefix: "".concat(CLASSNAME, "__image"),
265
265
  isLoading: isLoading,
266
266
  hasDefinedSize: Boolean((imgProps === null || imgProps === void 0 ? void 0 : imgProps.height) && imgProps.width)
267
- })),
267
+ }), imgProps === null || imgProps === void 0 ? void 0 : imgProps.className),
268
268
  crossOrigin: crossOrigin,
269
269
  src: image,
270
270
  alt: alt,
@@ -1 +1 @@
1
- {"version":3,"file":"Thumbnail2.js","sources":["../../../src/components/thumbnail/useImageLoad.ts","../../../src/components/thumbnail/useFocusPointStyle.tsx","../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';\n\nfunction getState(img: HTMLImageElement | null | undefined, event?: Event) {\n // Error event occurred or image loaded empty.\n if (event?.type === 'error' || (img?.complete && (img?.naturalWidth === 0 || img?.naturalHeight === 0))) {\n return 'hasError';\n }\n // Image is undefined or incomplete.\n if (!img || !img.complete) {\n return 'isLoading';\n }\n // Else loaded.\n return 'isLoaded';\n}\n\nexport function useImageLoad(imageURL: string, imgRef?: HTMLImageElement): LoadingState {\n const [state, setState] = useState<LoadingState>(getState(imgRef));\n\n // Update state when changing image URL or DOM reference.\n useEffect(() => {\n setState(getState(imgRef));\n }, [imageURL, imgRef]);\n\n // Listen to `load` and `error` event on image\n useEffect(() => {\n const img = imgRef;\n if (!img) return undefined;\n const update = (event?: Event) => setState(getState(img, event));\n img.addEventListener('load', update);\n img.addEventListener('error', update);\n return () => {\n img.removeEventListener('load', update);\n img.removeEventListener('error', update);\n };\n }, [imgRef, imgRef?.src]);\n\n return state;\n}\n","import { CSSProperties, useEffect, useMemo, useState } from 'react';\nimport { AspectRatio } from '@lumx/react/components';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\n\n// Calculate shift to center the focus point in the container.\nfunction shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {\n const scaledSize = imageSize / scale;\n const scaledFocusHeight = focusPoint * scaledSize;\n const startFocus = scaledFocusHeight - containerSize / 2;\n const shift = startFocus / (scaledSize - containerSize);\n return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);\n}\n\ntype Size = { width: number; height: number };\n\n// Compute CSS properties to apply the focus point.\nexport const useFocusPointStyle = (\n { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,\n element: HTMLImageElement | undefined,\n isLoaded: boolean,\n): CSSProperties => {\n // Get natural image size from imgProps or img element.\n const imageSize: Size | undefined = useMemo(() => {\n // Focus point is not applicable => exit early\n if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;\n if (typeof width === 'number' && typeof height === 'number') return { width, height };\n if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };\n return undefined;\n }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);\n\n // Get container size (dependant on imageSize).\n const [containerSize, setContainerSize] = useState<Size | undefined>(undefined);\n useEffect(\n function updateContainerSize() {\n const cWidth = element?.offsetWidth;\n const cHeight = element?.offsetHeight;\n if (cWidth && cHeight) {\n // Update only if needed.\n setContainerSize((oldContainerSize) =>\n oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight\n ? oldContainerSize\n : { width: cWidth, height: cHeight },\n );\n } else if (imageSize) {\n // Wait for a render (in case the container size is dependent on the image size).\n requestAnimationFrame(updateContainerSize);\n }\n },\n [element?.offsetHeight, element?.offsetWidth, imageSize],\n );\n\n // Compute style.\n const [style, setStyle] = useState<CSSProperties>({});\n useEffect(() => {\n // Focus point is not applicable => exit early\n if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) {\n return;\n }\n if (!element || !imageSize) {\n // Focus point can be computed but now right now (image size unknown).\n setStyle({ visibility: 'hidden' });\n return;\n }\n if (!containerSize) {\n // Missing container size abort focus point compute.\n setStyle({});\n return;\n }\n\n const heightScale = imageSize.height / containerSize.height;\n const widthScale = imageSize.width / containerSize.width;\n const scale = Math.min(widthScale, heightScale);\n\n // Focus Y relative to the top (instead of the center)\n const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;\n const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerSize.height);\n\n // Focus X relative to the left (instead of the center)\n const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;\n const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerSize.width);\n\n const objectPosition = `${x}% ${y}%`;\n\n // Update only if needed.\n setStyle((oldStyle) => (oldStyle.objectPosition === objectPosition ? oldStyle : { objectPosition }));\n }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n return style;\n};\n","import React, {\n CSSProperties,\n forwardRef,\n ImgHTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n Ref,\n useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { mdiImageBroken } from '@lumx/icons';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';\n\ntype ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ThumbnailProps extends GenericProps {\n /** Alignment of the thumbnail in it's parent (requires flex parent). */\n align?: HorizontalAlignment;\n /** Image alternative text. */\n alt: string;\n /** Image aspect ratio. */\n aspectRatio?: AspectRatio;\n /** Badge. */\n badge?: ReactElement;\n /** Image cross origin resource policy. */\n crossOrigin?: ImgHTMLProps['crossOrigin'];\n /** Fallback icon (SVG path) or react node when image fails to load. */\n fallback?: string | ReactNode;\n /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */\n fillHeight?: boolean;\n /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */\n focusPoint?: FocusPoint;\n /** Image URL. */\n image: string;\n /** Props to inject into the native <img> element. */\n imgProps?: ImgHTMLProps;\n /** Reference to the native <img> element. */\n imgRef?: Ref<HTMLImageElement>;\n /** Set to true to force the display of the loading skeleton. */\n isLoading?: boolean;\n /** Size variant of the component. */\n size?: ThumbnailSize;\n /** Image loading mode. */\n loading?: ImgHTMLProps['loading'];\n /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /** On key press callback. */\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Variant of the component. */\n variant?: ThumbnailVariant;\n /** Props to pass to the link wrapping the thumbnail. */\n linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Thumbnail';\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<ThumbnailProps> = {\n fallback: mdiImageBroken,\n loading: 'lazy',\n theme: Theme.light,\n};\n\n/**\n * Thumbnail component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {\n const {\n align,\n alt,\n aspectRatio = AspectRatio.original,\n badge,\n className,\n crossOrigin,\n fallback,\n fillHeight,\n focusPoint,\n image,\n imgProps,\n imgRef: propImgRef,\n isLoading: isLoadingProp,\n loading,\n size,\n theme,\n variant,\n linkProps,\n linkAs,\n ...forwardedProps\n } = props;\n const [imgElement, setImgElement] = useState<HTMLImageElement>();\n\n // Image loading state.\n const loadingState = useImageLoad(image, imgElement);\n const isLoaded = loadingState === 'isLoaded';\n const isLoading = isLoadingProp || loadingState === 'isLoading';\n const hasError = loadingState === 'hasError';\n\n // Focus point.\n const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);\n\n const hasIconErrorFallback = hasError && typeof fallback === 'string';\n const hasCustomErrorFallback = hasError && !hasIconErrorFallback;\n const imageErrorStyle: CSSProperties = {};\n if (hasIconErrorFallback) {\n // Keep the image layout on icon fallback.\n imageErrorStyle.visibility = 'hidden';\n } else if (hasCustomErrorFallback) {\n // Remove the image on custom fallback.\n imageErrorStyle.display = 'none';\n }\n\n const isLink = Boolean(linkProps?.href || linkAs);\n const isButton = !!forwardedProps.onClick;\n const isClickable = isButton || isLink;\n\n let Wrapper: any = 'div';\n const wrapperProps = { ...forwardedProps };\n if (isLink) {\n Wrapper = linkAs || 'a';\n Object.assign(wrapperProps, linkProps);\n } else if (isButton) {\n Wrapper = 'button';\n wrapperProps.type = forwardedProps.type || 'button';\n wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;\n }\n\n return (\n <Wrapper\n {...wrapperProps}\n ref={ref}\n className={classNames(\n linkProps?.className,\n className,\n handleBasicClasses({\n align,\n aspectRatio,\n prefix: CLASSNAME,\n size,\n theme,\n variant,\n isClickable,\n hasError,\n hasIconErrorFallback,\n hasCustomErrorFallback,\n isLoading,\n hasBadge: !!badge,\n }),\n fillHeight && `${CLASSNAME}--fill-height`,\n )}\n >\n <div className={`${CLASSNAME}__background`}>\n <img\n {...imgProps}\n style={{\n ...imgProps?.style,\n ...imageErrorStyle,\n ...focusPointStyle,\n }}\n ref={mergeRefs(setImgElement, propImgRef)}\n className={classNames(\n handleBasicClasses({\n prefix: `${CLASSNAME}__image`,\n isLoading,\n hasDefinedSize: Boolean(imgProps?.height && imgProps.width),\n }),\n )}\n crossOrigin={crossOrigin}\n src={image}\n alt={alt}\n loading={loading}\n />\n {!isLoading && hasError && (\n <div className={`${CLASSNAME}__fallback`}>\n {hasIconErrorFallback ? (\n <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n ) : (\n fallback\n )}\n </div>\n )}\n </div>\n {badge &&\n React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}\n </Wrapper>\n );\n});\nThumbnail.displayName = COMPONENT_NAME;\nThumbnail.className = CLASSNAME;\nThumbnail.defaultProps = DEFAULT_PROPS;\n"],"names":["getState","img","event","type","complete","naturalWidth","naturalHeight","useImageLoad","imageURL","imgRef","useState","state","setState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","element","isLoaded","image","aspectRatio","imgProps","width","height","useMemo","AspectRatio","original","x","y","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","setStyle","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","oldStyle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","theme","Theme","light","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","mergeRefs","hasDefinedSize","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"Thumbnail2.js","sources":["../../../src/components/thumbnail/useImageLoad.ts","../../../src/components/thumbnail/useFocusPointStyle.tsx","../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';\n\nfunction getState(img: HTMLImageElement | null | undefined, event?: Event) {\n // Error event occurred or image loaded empty.\n if (event?.type === 'error' || (img?.complete && (img?.naturalWidth === 0 || img?.naturalHeight === 0))) {\n return 'hasError';\n }\n // Image is undefined or incomplete.\n if (!img || !img.complete) {\n return 'isLoading';\n }\n // Else loaded.\n return 'isLoaded';\n}\n\nexport function useImageLoad(imageURL: string, imgRef?: HTMLImageElement): LoadingState {\n const [state, setState] = useState<LoadingState>(getState(imgRef));\n\n // Update state when changing image URL or DOM reference.\n useEffect(() => {\n setState(getState(imgRef));\n }, [imageURL, imgRef]);\n\n // Listen to `load` and `error` event on image\n useEffect(() => {\n const img = imgRef;\n if (!img) return undefined;\n const update = (event?: Event) => setState(getState(img, event));\n img.addEventListener('load', update);\n img.addEventListener('error', update);\n return () => {\n img.removeEventListener('load', update);\n img.removeEventListener('error', update);\n };\n }, [imgRef, imgRef?.src]);\n\n return state;\n}\n","import { CSSProperties, useEffect, useMemo, useState } from 'react';\nimport { AspectRatio } from '@lumx/react/components';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\n\n// Calculate shift to center the focus point in the container.\nfunction shiftPosition(scale: number, focusPoint: number, imageSize: number, containerSize: number) {\n const scaledSize = imageSize / scale;\n const scaledFocusHeight = focusPoint * scaledSize;\n const startFocus = scaledFocusHeight - containerSize / 2;\n const shift = startFocus / (scaledSize - containerSize);\n return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);\n}\n\ntype Size = { width: number; height: number };\n\n// Compute CSS properties to apply the focus point.\nexport const useFocusPointStyle = (\n { image, aspectRatio, focusPoint, imgProps: { width, height } = {} }: ThumbnailProps,\n element: HTMLImageElement | undefined,\n isLoaded: boolean,\n): CSSProperties => {\n // Get natural image size from imgProps or img element.\n const imageSize: Size | undefined = useMemo(() => {\n // Focus point is not applicable => exit early\n if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) return undefined;\n if (typeof width === 'number' && typeof height === 'number') return { width, height };\n if (element && isLoaded) return { width: element.naturalWidth, height: element.naturalHeight };\n return undefined;\n }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);\n\n // Get container size (dependant on imageSize).\n const [containerSize, setContainerSize] = useState<Size | undefined>(undefined);\n useEffect(\n function updateContainerSize() {\n const cWidth = element?.offsetWidth;\n const cHeight = element?.offsetHeight;\n if (cWidth && cHeight) {\n // Update only if needed.\n setContainerSize((oldContainerSize) =>\n oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight\n ? oldContainerSize\n : { width: cWidth, height: cHeight },\n );\n } else if (imageSize) {\n // Wait for a render (in case the container size is dependent on the image size).\n requestAnimationFrame(updateContainerSize);\n }\n },\n [element?.offsetHeight, element?.offsetWidth, imageSize],\n );\n\n // Compute style.\n const [style, setStyle] = useState<CSSProperties>({});\n useEffect(() => {\n // Focus point is not applicable => exit early\n if (!image || aspectRatio === AspectRatio.original || (!focusPoint?.x && !focusPoint?.y)) {\n return;\n }\n if (!element || !imageSize) {\n // Focus point can be computed but now right now (image size unknown).\n setStyle({ visibility: 'hidden' });\n return;\n }\n if (!containerSize) {\n // Missing container size abort focus point compute.\n setStyle({});\n return;\n }\n\n const heightScale = imageSize.height / containerSize.height;\n const widthScale = imageSize.width / containerSize.width;\n const scale = Math.min(widthScale, heightScale);\n\n // Focus Y relative to the top (instead of the center)\n const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;\n const y = shiftPosition(scale, focusPointFromTop, imageSize.height, containerSize.height);\n\n // Focus X relative to the left (instead of the center)\n const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;\n const x = shiftPosition(scale, focusPointFromLeft, imageSize.width, containerSize.width);\n\n const objectPosition = `${x}% ${y}%`;\n\n // Update only if needed.\n setStyle((oldStyle) => (oldStyle.objectPosition === objectPosition ? oldStyle : { objectPosition }));\n }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n return style;\n};\n","import React, {\n CSSProperties,\n forwardRef,\n ImgHTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n Ref,\n useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { mdiImageBroken } from '@lumx/icons';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';\n\ntype ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ThumbnailProps extends GenericProps {\n /** Alignment of the thumbnail in it's parent (requires flex parent). */\n align?: HorizontalAlignment;\n /** Image alternative text. */\n alt: string;\n /** Image aspect ratio. */\n aspectRatio?: AspectRatio;\n /** Badge. */\n badge?: ReactElement;\n /** Image cross origin resource policy. */\n crossOrigin?: ImgHTMLProps['crossOrigin'];\n /** Fallback icon (SVG path) or react node when image fails to load. */\n fallback?: string | ReactNode;\n /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */\n fillHeight?: boolean;\n /** Apply relative vertical and horizontal shift (from -1 to 1) on the image position inside the thumbnail. */\n focusPoint?: FocusPoint;\n /** Image URL. */\n image: string;\n /** Props to inject into the native <img> element. */\n imgProps?: ImgHTMLProps;\n /** Reference to the native <img> element. */\n imgRef?: Ref<HTMLImageElement>;\n /** Set to true to force the display of the loading skeleton. */\n isLoading?: boolean;\n /** Size variant of the component. */\n size?: ThumbnailSize;\n /** Image loading mode. */\n loading?: ImgHTMLProps['loading'];\n /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /** On key press callback. */\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Variant of the component. */\n variant?: ThumbnailVariant;\n /** Props to pass to the link wrapping the thumbnail. */\n linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Thumbnail';\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<ThumbnailProps> = {\n fallback: mdiImageBroken,\n loading: 'lazy',\n theme: Theme.light,\n};\n\n/**\n * Thumbnail component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {\n const {\n align,\n alt,\n aspectRatio = AspectRatio.original,\n badge,\n className,\n crossOrigin,\n fallback,\n fillHeight,\n // `focusPoint` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n focusPoint,\n image,\n imgProps,\n imgRef: propImgRef,\n isLoading: isLoadingProp,\n loading,\n size,\n theme,\n variant,\n linkProps,\n linkAs,\n ...forwardedProps\n } = props;\n const [imgElement, setImgElement] = useState<HTMLImageElement>();\n\n // Image loading state.\n const loadingState = useImageLoad(image, imgElement);\n const isLoaded = loadingState === 'isLoaded';\n const isLoading = isLoadingProp || loadingState === 'isLoading';\n const hasError = loadingState === 'hasError';\n\n // Focus point.\n const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);\n\n const hasIconErrorFallback = hasError && typeof fallback === 'string';\n const hasCustomErrorFallback = hasError && !hasIconErrorFallback;\n const imageErrorStyle: CSSProperties = {};\n if (hasIconErrorFallback) {\n // Keep the image layout on icon fallback.\n imageErrorStyle.visibility = 'hidden';\n } else if (hasCustomErrorFallback) {\n // Remove the image on custom fallback.\n imageErrorStyle.display = 'none';\n }\n\n const isLink = Boolean(linkProps?.href || linkAs);\n const isButton = !!forwardedProps.onClick;\n const isClickable = isButton || isLink;\n\n let Wrapper: any = 'div';\n const wrapperProps = { ...forwardedProps };\n if (isLink) {\n Wrapper = linkAs || 'a';\n Object.assign(wrapperProps, linkProps);\n } else if (isButton) {\n Wrapper = 'button';\n wrapperProps.type = forwardedProps.type || 'button';\n wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;\n }\n\n return (\n <Wrapper\n {...wrapperProps}\n ref={ref}\n className={classNames(\n linkProps?.className,\n className,\n handleBasicClasses({\n align,\n aspectRatio,\n prefix: CLASSNAME,\n size,\n theme,\n variant,\n isClickable,\n hasError,\n hasIconErrorFallback,\n hasCustomErrorFallback,\n isLoading,\n hasBadge: !!badge,\n }),\n fillHeight && `${CLASSNAME}--fill-height`,\n )}\n >\n <div className={`${CLASSNAME}__background`}>\n <img\n {...imgProps}\n style={{\n ...imgProps?.style,\n ...imageErrorStyle,\n ...focusPointStyle,\n }}\n ref={mergeRefs(setImgElement, propImgRef)}\n className={classNames(\n handleBasicClasses({\n prefix: `${CLASSNAME}__image`,\n isLoading,\n hasDefinedSize: Boolean(imgProps?.height && imgProps.width),\n }),\n imgProps?.className,\n )}\n crossOrigin={crossOrigin}\n src={image}\n alt={alt}\n loading={loading}\n />\n {!isLoading && hasError && (\n <div className={`${CLASSNAME}__fallback`}>\n {hasIconErrorFallback ? (\n <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n ) : (\n fallback\n )}\n </div>\n )}\n </div>\n {badge &&\n React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}\n </Wrapper>\n );\n});\nThumbnail.displayName = COMPONENT_NAME;\nThumbnail.className = CLASSNAME;\nThumbnail.defaultProps = DEFAULT_PROPS;\n"],"names":["getState","img","event","type","complete","naturalWidth","naturalHeight","useImageLoad","imageURL","imgRef","useState","state","setState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","element","isLoaded","image","aspectRatio","imgProps","width","height","useMemo","AspectRatio","original","x","y","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","setStyle","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","oldStyle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","mdiImageBroken","loading","theme","Theme","light","Thumbnail","forwardRef","props","ref","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoadingProp","isLoading","size","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isButton","onClick","isClickable","Wrapper","wrapperProps","Object","assign","classNames","handleBasicClasses","prefix","hasBadge","mergeRefs","hasDefinedSize","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}
@@ -1,14 +1,12 @@
1
1
  import { _ as _objectSpread2, c as _extends, d as _slicedToArray, b as _objectWithoutProperties } from './_rollupPluginBabelHelpers.js';
2
- import React, { useMemo, cloneElement, useRef, useState, useEffect, forwardRef } from 'react';
3
- import { f as onEscapePressed, g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
2
+ import React, { useMemo, cloneElement, useState, useEffect, forwardRef } from 'react';
3
+ import { f as onEscapePressed, T as TOOLTIP_LONG_PRESS_DELAY, i as TOOLTIP_HOVER_DELAY, g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
4
4
  import { u as uid } from '../index2.js';
5
5
  import { D as DOCUMENT } from './constants.js';
6
6
  import get from 'lodash/get';
7
7
  import { b as usePopper, P as Placement } from './Popover2.js';
8
8
  import { m as mergeRefs } from './mergeRefs.js';
9
9
  import { createPortal } from 'react-dom';
10
- import pull from 'lodash/pull';
11
- import debounce from 'lodash/debounce';
12
10
 
13
11
  /**
14
12
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
@@ -42,37 +40,121 @@ var useInjectTooltipRef = function useInjectTooltipRef(children, setAnchorElemen
42
40
  }, [isOpen, id, children, setAnchorElement]);
43
41
  };
44
42
 
43
+ /** Return true if the browser does not support pointer hover */
44
+ var browserDoesNotSupportHover = function browserDoesNotSupportHover() {
45
+ var _window$matchMedia, _window;
46
+
47
+ return !!((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, '(hover: none)').matches);
48
+ };
49
+
45
50
  /**
46
- * This singleton handle a global `mouseover` event listener on the `document` in order to toggle tooltips when
47
- * entering and leaving their anchor element.
51
+ * Hook controlling tooltip visibility using mouse hover the anchor and delay.
52
+ *
53
+ * @param delay Delay in millisecond to display the tooltip.
54
+ * @param anchorElement Tooltip anchor element.
55
+ * @return whether or not to show the tooltip.
48
56
  */
49
- var tooltipMouseToggle = function () {
50
- /** List of tooltips to toggle on anchor enter/leave. */
51
- var tooltips;
52
- /** Global listener added on the document. */
53
57
 
54
- var globalListener;
58
+ function useTooltipOpen(delay, anchorElement) {
59
+ var _useState = useState(false),
60
+ _useState2 = _slicedToArray(_useState, 2),
61
+ isOpen = _useState2[0],
62
+ setIsOpen = _useState2[1];
63
+
64
+ useEffect(function () {
65
+ if (!anchorElement) {
66
+ return undefined;
67
+ }
68
+
69
+ var timer;
70
+ var openStartTime;
71
+ var shouldOpen; // Run timer to defer updating the isOpen state.
55
72
 
56
- function addGlobalListener() {
57
- if (globalListener) return;
58
- globalListener = debounce(function (evt) {
59
- if (!tooltips || !evt.target) return;
73
+ var deferUpdate = function deferUpdate(duration) {
74
+ if (timer) clearTimeout(timer);
75
+ timer = setTimeout(function () {
76
+ setIsOpen(!!shouldOpen);
77
+ }, duration);
78
+ };
79
+
80
+ var hoverNotSupported = browserDoesNotSupportHover();
81
+ var hasTouch = 'ontouchstart' in window; // Adapt open/close delay
82
+
83
+ var openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);
84
+ var closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close; // Open (or/and cancel closing) of tooltip.
85
+
86
+ var open = function open() {
87
+ if (shouldOpen && !timer) return;
88
+ shouldOpen = true;
89
+ openStartTime = Date.now();
90
+ deferUpdate(openDelay);
91
+ }; // Close or cancel opening of tooltip
92
+
93
+
94
+ var close = function close() {
95
+ var overrideDelay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : closeDelay;
96
+ if (!shouldOpen && !timer) return;
97
+ shouldOpen = false;
98
+ deferUpdate(overrideDelay);
99
+ };
100
+
101
+ var closeImmediately = function closeImmediately() {
102
+ return close(0);
103
+ };
104
+ /**
105
+ * Handle touchend event
106
+ * If `touchend` comes before the open delay => cancel tooltip (close immediate).
107
+ * Else if `touchend` comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
108
+ */
109
+
110
+
111
+ var touchEnd = function touchEnd(evt) {
112
+ if (!openStartTime) return;
113
+
114
+ if (Date.now() - openStartTime >= openDelay) {
115
+ // Tooltip take priority, event prevented.
116
+ evt.stopPropagation();
117
+ evt.preventDefault();
118
+ anchorElement.focus(); // Close with delay.
119
+
120
+ close();
121
+ } else {
122
+ // Close immediately.
123
+ closeImmediately();
124
+ }
125
+ }; // Adapt event to browsers with or without `hover` support.
126
+
127
+
128
+ var events = hoverNotSupported ? [[anchorElement, hasTouch ? 'touchstart' : 'mousedown', open], [anchorElement, hasTouch ? 'touchend' : 'mouseup', touchEnd]] : [[anchorElement, 'mouseenter', open], [anchorElement, 'mouseleave', close], [anchorElement, 'mouseup', closeImmediately]]; // Events always applied no matter the browser:.
129
+
130
+ events.push( // Open on focus.
131
+ [anchorElement, 'focusin', open], // Close on lost focus.
132
+ [anchorElement, 'focusout', closeImmediately], // Close on ESC keydown
133
+ [anchorElement, 'keydown', onEscapePressed(closeImmediately)]); // Attach events
134
+
135
+ for (var _i = 0, _events = events; _i < _events.length; _i++) {
136
+ var _events$_i = _slicedToArray(_events[_i], 3),
137
+ node = _events$_i[0],
138
+ eventType = _events$_i[1],
139
+ evenHandler = _events$_i[2];
140
+
141
+ node.addEventListener(eventType, evenHandler);
142
+ }
143
+
144
+ return function () {
145
+ // Detach events.
60
146
  var _iteratorNormalCompletion = true;
61
147
  var _didIteratorError = false;
62
148
  var _iteratorError = undefined;
63
149
 
64
150
  try {
65
- for (var _iterator = tooltips[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
66
- var _step$value = _step.value,
67
- open = _step$value.open,
68
- close = _step$value.close,
69
- anchorElement = _step$value.anchorElement;
70
-
71
- if (anchorElement.contains(evt.target)) {
72
- open();
73
- } else {
74
- close();
75
- }
151
+ for (var _iterator = events[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
152
+ var _step$value = _slicedToArray(_step.value, 3),
153
+ node = _step$value[0],
154
+ eventType = _step$value[1],
155
+ evenHandler = _step$value[2];
156
+
157
+ node.removeEventListener(eventType, evenHandler);
76
158
  }
77
159
  } catch (err) {
78
160
  _didIteratorError = true;
@@ -88,94 +170,10 @@ var tooltipMouseToggle = function () {
88
170
  }
89
171
  }
90
172
  }
91
- }, 10);
92
- document.addEventListener('mouseover', globalListener);
93
- }
94
-
95
- function removeGlobalListener() {
96
- if (!globalListener) return;
97
- document.removeEventListener('mouseover', globalListener);
98
- globalListener = undefined;
99
- }
100
-
101
- return {
102
- addTooltip: function addTooltip(tooltip) {
103
- if (!tooltips) {
104
- tooltips = [];
105
- addGlobalListener();
106
- }
107
-
108
- tooltips.push(tooltip);
109
- },
110
- removeTooltip: function removeTooltip(actions) {
111
- if (!tooltips) return;
112
- pull(tooltips, actions);
113
173
 
114
- if (tooltips.length === 0) {
115
- removeGlobalListener();
116
- tooltips = undefined;
117
- }
118
- }
119
- };
120
- }();
121
- /**
122
- * Hook controlling tooltip visibility using mouse hover the anchor and delay.
123
- *
124
- * @param delay Delay in millisecond to display the tooltip.
125
- * @param anchorElement Tooltip anchor element.
126
- * @return whether or not to show the tooltip.
127
- */
128
-
129
-
130
- function useTooltipOpen(delay, anchorElement) {
131
- var timer = useRef();
132
- var shouldOpen = useRef(false);
133
-
134
- var _useState = useState(false),
135
- _useState2 = _slicedToArray(_useState, 2),
136
- isOpen = _useState2[0],
137
- setIsOpen = _useState2[1];
138
-
139
- useEffect(function () {
140
- if (!anchorElement) {
141
- return undefined;
142
- }
143
-
144
- var tooltip = {
145
- anchorElement: anchorElement,
146
- open: function open() {
147
- if (!shouldOpen.current) {
148
- shouldOpen.current = true;
149
- timer.current = setTimeout(function () {
150
- setIsOpen(shouldOpen.current);
151
- }, delay);
152
- }
153
- },
154
- close: function close() {
155
- if (timer.current) {
156
- clearTimeout(timer.current);
157
- timer.current = undefined;
158
- }
159
-
160
- if (shouldOpen.current) {
161
- shouldOpen.current = false;
162
- setIsOpen(shouldOpen.current);
163
- }
164
- }
165
- };
166
- var keydown = onEscapePressed(tooltip.close);
167
- tooltipMouseToggle.addTooltip(tooltip);
168
- anchorElement.addEventListener('focusin', tooltip.open);
169
- anchorElement.addEventListener('focusout', tooltip.close);
170
- anchorElement.addEventListener('keydown', keydown);
171
- return function () {
172
- tooltipMouseToggle.removeTooltip(tooltip);
173
- anchorElement.removeEventListener('focusin', tooltip.open);
174
- anchorElement.removeEventListener('focusout', tooltip.close);
175
- anchorElement.removeEventListener('keydown', keydown);
176
- tooltip.close();
174
+ closeImmediately();
177
175
  };
178
- }, [anchorElement, delay, timer, shouldOpen]);
176
+ }, [anchorElement, delay]);
179
177
  return isOpen;
180
178
  }
181
179
 
@@ -195,7 +193,6 @@ var CLASSNAME = getRootClassName(COMPONENT_NAME);
195
193
  */
196
194
 
197
195
  var DEFAULT_PROPS = {
198
- delay: 500,
199
196
  placement: Placement.BOTTOM
200
197
  };
201
198
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip2.js","sources":["../../../src/components/tooltip/useInjectTooltipRef.tsx","../../../src/components/tooltip/useTooltipOpen.tsx","../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport get from 'lodash/get';\nimport React, { cloneElement, ReactNode, useMemo } from 'react';\n\n/**\n * Add ref and ARIA attribute(s) in tooltip children or wrapped children.\n * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)\n * will be wrapped in a <span>.\n *\n * @param children Original tooltip anchor.\n * @param setAnchorElement Set tooltip anchor element.\n * @param isOpen Whether the tooltip is open or not.\n * @param id Tooltip id.\n * @return tooltip anchor.\n */\nexport const useInjectTooltipRef = (\n children: ReactNode,\n setAnchorElement: (e: HTMLDivElement) => void,\n isOpen: boolean,\n id: string,\n): ReactNode => {\n return useMemo(() => {\n const ariaProps = { 'aria-describedby': isOpen ? id : undefined };\n if (\n children &&\n get(children, '$$typeof') &&\n get(children, 'props.disabled') !== true &&\n get(children, 'props.isDisabled') !== true\n ) {\n const element = children as any;\n\n return cloneElement(element, {\n ...element.props,\n ...ariaProps,\n ref: mergeRefs(element.ref, setAnchorElement),\n });\n }\n return (\n <div className=\"lumx-tooltip-anchor-wrapper\" ref={setAnchorElement} {...ariaProps}>\n {children}\n </div>\n );\n }, [isOpen, id, children, setAnchorElement]);\n};\n","import { Callback, onEscapePressed } from '@lumx/react/utils';\nimport { useEffect, useRef, useState } from 'react';\nimport pull from 'lodash/pull';\nimport debounce from 'lodash/debounce';\n\ntype Tooltip = { open: Callback; close: Callback; anchorElement: HTMLElement };\n\n/**\n * This singleton handle a global `mouseover` event listener on the `document` in order to toggle tooltips when\n * entering and leaving their anchor element.\n */\nconst tooltipMouseToggle = (() => {\n /** List of tooltips to toggle on anchor enter/leave. */\n let tooltips: Array<Tooltip> | undefined;\n\n /** Global listener added on the document. */\n let globalListener: undefined | ((evt: MouseEvent) => void);\n\n function addGlobalListener() {\n if (globalListener) return;\n globalListener = debounce((evt) => {\n if (!tooltips || !evt.target) return;\n for (const { open, close, anchorElement } of tooltips) {\n if (anchorElement.contains(evt.target as any)) {\n open();\n } else {\n close();\n }\n }\n }, 10);\n document.addEventListener('mouseover', globalListener);\n }\n\n function removeGlobalListener() {\n if (!globalListener) return;\n document.removeEventListener('mouseover', globalListener);\n globalListener = undefined;\n }\n\n return {\n addTooltip(tooltip: Tooltip) {\n if (!tooltips) {\n tooltips = [];\n addGlobalListener();\n }\n tooltips.push(tooltip);\n },\n removeTooltip(actions: Tooltip) {\n if (!tooltips) return;\n pull(tooltips, actions);\n if (tooltips.length === 0) {\n removeGlobalListener();\n tooltips = undefined;\n }\n },\n };\n})();\n\n/**\n * Hook controlling tooltip visibility using mouse hover the anchor and delay.\n *\n * @param delay Delay in millisecond to display the tooltip.\n * @param anchorElement Tooltip anchor element.\n * @return whether or not to show the tooltip.\n */\nexport function useTooltipOpen(delay: number, anchorElement: HTMLElement | null): boolean {\n const timer = useRef<number>();\n const shouldOpen = useRef<boolean>(false);\n const [isOpen, setIsOpen] = useState(false);\n\n useEffect(() => {\n if (!anchorElement) {\n return undefined;\n }\n const tooltip: Tooltip = {\n anchorElement,\n open() {\n if (!shouldOpen.current) {\n shouldOpen.current = true;\n timer.current = setTimeout(() => {\n setIsOpen(shouldOpen.current);\n }, delay) as any;\n }\n },\n close() {\n if (timer.current) {\n clearTimeout(timer.current);\n timer.current = undefined;\n }\n if (shouldOpen.current) {\n shouldOpen.current = false;\n setIsOpen(shouldOpen.current);\n }\n },\n };\n const keydown = onEscapePressed(tooltip.close);\n\n tooltipMouseToggle.addTooltip(tooltip);\n anchorElement.addEventListener('focusin', tooltip.open);\n anchorElement.addEventListener('focusout', tooltip.close);\n anchorElement.addEventListener('keydown', keydown);\n return () => {\n tooltipMouseToggle.removeTooltip(tooltip);\n anchorElement.removeEventListener('focusin', tooltip.open);\n anchorElement.removeEventListener('focusout', tooltip.close);\n anchorElement.removeEventListener('keydown', keydown);\n tooltip.close();\n };\n }, [anchorElement, delay, timer, shouldOpen]);\n\n return isOpen;\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { forwardRef, ReactNode, useMemo, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { uid } from 'uid';\n\nimport classNames from 'classnames';\n\nimport { Placement } from '@lumx/react/components/popover/Popover';\n\nimport { DOCUMENT } from '@lumx/react/constants';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useInjectTooltipRef } from './useInjectTooltipRef';\nimport { useTooltipOpen } from './useTooltipOpen';\n\n/** Position of the tooltip relative to the anchor element. */\nexport type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TooltipProps extends GenericProps {\n /** Anchor (element on which we activate the tooltip). */\n children: ReactNode;\n /** Delay (in ms) before closing the tooltip. */\n delay?: number;\n /** Whether the tooltip is displayed even without the mouse hovering the anchor. */\n forceOpen?: boolean;\n /** Label text. */\n label?: string | null | false;\n /** Placement of the tooltip relative to the anchor. */\n placement?: TooltipPlacement;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tooltip';\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<TooltipProps> = {\n delay: 500,\n placement: Placement.BOTTOM,\n};\n\n/**\n * Arrow size (in pixel).\n */\nconst ARROW_SIZE = 8;\n\n/**\n * Tooltip component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {\n if (!DOCUMENT) {\n // Can't render in SSR.\n return null;\n }\n const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;\n if (!label) {\n return <>{children}</>;\n }\n\n const id = useMemo(() => `tooltip-${uid()}`, []);\n\n const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);\n const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);\n const { styles, attributes } = usePopper(anchorElement, popperElement, {\n placement,\n modifiers: [\n {\n name: 'offset',\n options: { offset: [0, ARROW_SIZE] },\n },\n ],\n });\n\n const position = attributes?.popper?.['data-popper-placement'] ?? placement;\n const isOpen = useTooltipOpen(delay as number, anchorElement) || forceOpen;\n const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);\n\n return (\n <>\n {wrappedChildren}\n {isOpen &&\n createPortal(\n <div\n ref={mergeRefs(ref, setPopperElement)}\n {...forwardedProps}\n id={id}\n role=\"tooltip\"\n aria-label={label}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, position }))}\n style={styles.popper}\n {...attributes.popper}\n >\n <div className={`${CLASSNAME}__arrow`} />\n <div className={`${CLASSNAME}__inner`}>\n {label.indexOf('\\n') !== -1\n ? label.split('\\n').map((sentence: string) => <p key={sentence}>{sentence}</p>)\n : label}\n </div>\n </div>,\n document.body,\n )}\n </>\n );\n});\nTooltip.displayName = COMPONENT_NAME;\nTooltip.className = CLASSNAME;\nTooltip.defaultProps = DEFAULT_PROPS;\n"],"names":["useInjectTooltipRef","children","setAnchorElement","isOpen","id","useMemo","ariaProps","undefined","get","element","cloneElement","props","ref","mergeRefs","tooltipMouseToggle","tooltips","globalListener","addGlobalListener","debounce","evt","target","open","close","anchorElement","contains","document","addEventListener","removeGlobalListener","removeEventListener","addTooltip","tooltip","push","removeTooltip","actions","pull","length","useTooltipOpen","delay","timer","useRef","shouldOpen","useState","setIsOpen","useEffect","current","setTimeout","clearTimeout","keydown","onEscapePressed","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","placement","Placement","BOTTOM","ARROW_SIZE","Tooltip","forwardRef","DOCUMENT","label","className","forceOpen","forwardedProps","uid","popperElement","setPopperElement","usePopper","modifiers","name","options","offset","styles","attributes","position","popper","wrappedChildren","createPortal","classNames","handleBasicClasses","prefix","indexOf","split","map","sentence","body","displayName","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"Tooltip2.js","sources":["../../../src/components/tooltip/useInjectTooltipRef.tsx","../../../src/utils/browserDoesNotSupportHover.ts","../../../src/components/tooltip/useTooltipOpen.tsx","../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport get from 'lodash/get';\nimport React, { cloneElement, ReactNode, useMemo } from 'react';\n\n/**\n * Add ref and ARIA attribute(s) in tooltip children or wrapped children.\n * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)\n * will be wrapped in a <span>.\n *\n * @param children Original tooltip anchor.\n * @param setAnchorElement Set tooltip anchor element.\n * @param isOpen Whether the tooltip is open or not.\n * @param id Tooltip id.\n * @return tooltip anchor.\n */\nexport const useInjectTooltipRef = (\n children: ReactNode,\n setAnchorElement: (e: HTMLDivElement) => void,\n isOpen: boolean,\n id: string,\n): ReactNode => {\n return useMemo(() => {\n const ariaProps = { 'aria-describedby': isOpen ? id : undefined };\n if (\n children &&\n get(children, '$$typeof') &&\n get(children, 'props.disabled') !== true &&\n get(children, 'props.isDisabled') !== true\n ) {\n const element = children as any;\n\n return cloneElement(element, {\n ...element.props,\n ...ariaProps,\n ref: mergeRefs(element.ref, setAnchorElement),\n });\n }\n return (\n <div className=\"lumx-tooltip-anchor-wrapper\" ref={setAnchorElement} {...ariaProps}>\n {children}\n </div>\n );\n }, [isOpen, id, children, setAnchorElement]);\n};\n","/** Return true if the browser does not support pointer hover */\nexport const browserDoesNotSupportHover = (): boolean => !!window.matchMedia?.('(hover: none)').matches;\n","import { onEscapePressed } from '@lumx/react/utils';\nimport { useEffect, useState } from 'react';\nimport { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';\nimport { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';\n\n/**\n * Hook controlling tooltip visibility using mouse hover the anchor and delay.\n *\n * @param delay Delay in millisecond to display the tooltip.\n * @param anchorElement Tooltip anchor element.\n * @return whether or not to show the tooltip.\n */\nexport function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null): boolean {\n const [isOpen, setIsOpen] = useState(false);\n\n useEffect(() => {\n if (!anchorElement) {\n return undefined;\n }\n let timer: number | undefined;\n let openStartTime: number | undefined;\n let shouldOpen: boolean | undefined;\n\n // Run timer to defer updating the isOpen state.\n const deferUpdate = (duration: number) => {\n if (timer) clearTimeout(timer);\n timer = setTimeout(() => {\n setIsOpen(!!shouldOpen);\n }, duration) as any;\n };\n\n const hoverNotSupported = browserDoesNotSupportHover();\n const hasTouch = 'ontouchstart' in window;\n\n // Adapt open/close delay\n const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);\n const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;\n\n // Open (or/and cancel closing) of tooltip.\n const open = () => {\n if (shouldOpen && !timer) return;\n shouldOpen = true;\n openStartTime = Date.now();\n deferUpdate(openDelay);\n };\n\n // Close or cancel opening of tooltip\n const close = (overrideDelay = closeDelay) => {\n if (!shouldOpen && !timer) return;\n shouldOpen = false;\n deferUpdate(overrideDelay);\n };\n const closeImmediately = () => close(0);\n\n /**\n * Handle touchend event\n * If `touchend` comes before the open delay => cancel tooltip (close immediate).\n * Else if `touchend` comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.\n */\n const touchEnd = (evt: Event) => {\n if (!openStartTime) return;\n if (Date.now() - openStartTime >= openDelay) {\n // Tooltip take priority, event prevented.\n evt.stopPropagation();\n evt.preventDefault();\n anchorElement.focus();\n // Close with delay.\n close();\n } else {\n // Close immediately.\n closeImmediately();\n }\n };\n\n // Adapt event to browsers with or without `hover` support.\n const events: Array<[Node, Event['type'], any]> = hoverNotSupported\n ? [\n [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],\n [anchorElement, hasTouch ? 'touchend' : 'mouseup', touchEnd],\n ]\n : [\n [anchorElement, 'mouseenter', open],\n [anchorElement, 'mouseleave', close],\n [anchorElement, 'mouseup', closeImmediately],\n ];\n\n // Events always applied no matter the browser:.\n events.push(\n // Open on focus.\n [anchorElement, 'focusin', open],\n // Close on lost focus.\n [anchorElement, 'focusout', closeImmediately],\n // Close on ESC keydown\n [anchorElement, 'keydown', onEscapePressed(closeImmediately)],\n );\n\n // Attach events\n for (const [node, eventType, evenHandler] of events) {\n node.addEventListener(eventType, evenHandler);\n }\n return () => {\n // Detach events.\n for (const [node, eventType, evenHandler] of events) {\n node.removeEventListener(eventType, evenHandler);\n }\n closeImmediately();\n };\n }, [anchorElement, delay]);\n\n return isOpen;\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { forwardRef, ReactNode, useMemo, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { uid } from 'uid';\n\nimport classNames from 'classnames';\n\nimport { Placement } from '@lumx/react/components/popover/Popover';\n\nimport { DOCUMENT } from '@lumx/react/constants';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useInjectTooltipRef } from './useInjectTooltipRef';\nimport { useTooltipOpen } from './useTooltipOpen';\n\n/** Position of the tooltip relative to the anchor element. */\nexport type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TooltipProps extends GenericProps {\n /** Anchor (element on which we activate the tooltip). */\n children: ReactNode;\n /** Delay (in ms) before closing the tooltip. */\n delay?: number;\n /** Whether the tooltip is displayed even without the mouse hovering the anchor. */\n forceOpen?: boolean;\n /** Label text. */\n label?: string | null | false;\n /** Placement of the tooltip relative to the anchor. */\n placement?: TooltipPlacement;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tooltip';\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<TooltipProps> = {\n placement: Placement.BOTTOM,\n};\n\n/**\n * Arrow size (in pixel).\n */\nconst ARROW_SIZE = 8;\n\n/**\n * Tooltip component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {\n if (!DOCUMENT) {\n // Can't render in SSR.\n return null;\n }\n const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;\n if (!label) {\n return <>{children}</>;\n }\n\n const id = useMemo(() => `tooltip-${uid()}`, []);\n\n const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);\n const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);\n const { styles, attributes } = usePopper(anchorElement, popperElement, {\n placement,\n modifiers: [\n {\n name: 'offset',\n options: { offset: [0, ARROW_SIZE] },\n },\n ],\n });\n\n const position = attributes?.popper?.['data-popper-placement'] ?? placement;\n const isOpen = useTooltipOpen(delay, anchorElement) || forceOpen;\n const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);\n\n return (\n <>\n {wrappedChildren}\n {isOpen &&\n createPortal(\n <div\n ref={mergeRefs(ref, setPopperElement)}\n {...forwardedProps}\n id={id}\n role=\"tooltip\"\n aria-label={label}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, position }))}\n style={styles.popper}\n {...attributes.popper}\n >\n <div className={`${CLASSNAME}__arrow`} />\n <div className={`${CLASSNAME}__inner`}>\n {label.indexOf('\\n') !== -1\n ? label.split('\\n').map((sentence: string) => <p key={sentence}>{sentence}</p>)\n : label}\n </div>\n </div>,\n document.body,\n )}\n </>\n );\n});\nTooltip.displayName = COMPONENT_NAME;\nTooltip.className = CLASSNAME;\nTooltip.defaultProps = DEFAULT_PROPS;\n"],"names":["useInjectTooltipRef","children","setAnchorElement","isOpen","id","useMemo","ariaProps","undefined","get","element","cloneElement","props","ref","mergeRefs","browserDoesNotSupportHover","window","matchMedia","matches","useTooltipOpen","delay","anchorElement","useState","setIsOpen","useEffect","timer","openStartTime","shouldOpen","deferUpdate","duration","clearTimeout","setTimeout","hoverNotSupported","hasTouch","openDelay","TOOLTIP_LONG_PRESS_DELAY","open","TOOLTIP_HOVER_DELAY","closeDelay","close","Date","now","overrideDelay","closeImmediately","touchEnd","evt","stopPropagation","preventDefault","focus","events","push","onEscapePressed","node","eventType","evenHandler","addEventListener","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","placement","Placement","BOTTOM","ARROW_SIZE","Tooltip","forwardRef","DOCUMENT","label","className","forceOpen","forwardedProps","uid","popperElement","setPopperElement","usePopper","modifiers","name","options","offset","styles","attributes","position","popper","wrappedChildren","createPortal","classNames","handleBasicClasses","prefix","indexOf","split","map","sentence","document","body","displayName","defaultProps"],"mappings":"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"}
@@ -28,5 +28,4 @@ import './InputHelper.js';
28
28
  import './InputLabel.js';
29
29
  import './TextField.js';
30
30
  import './Tooltip2.js';
31
- import 'lodash/debounce';
32
31
  //# sourceMappingURL=autocomplete.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"autocomplete.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"autocomplete.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -21,5 +21,4 @@ import 'react-dom';
21
21
  import './ClickAwayProvider.js';
22
22
  import 'lodash/pull';
23
23
  import './Tooltip2.js';
24
- import 'lodash/debounce';
25
24
  //# sourceMappingURL=button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sources":["../../../src/constants.ts"],"sourcesContent":["export { CSS_PREFIX, DIALOG_TRANSITION_DURATION, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';\n\n/**\n * Optional global `window` instance (not defined when running SSR).\n */\nexport const WINDOW = typeof window !== `undefined` ? window : undefined;\n\n/**\n * Optional global `document` instance (not defined when running SSR).\n */\nexport const DOCUMENT = typeof document !== `undefined` ? document : undefined;\n"],"names":["WINDOW","window","undefined","DOCUMENT","document"],"mappings":"AAEA;;;;IAGaA,MAAM,GAAG,OAAOC,MAAP,mBAAgCA,MAAhC,GAAyCC;AAE/D;;;;IAGaC,QAAQ,GAAG,OAAOC,QAAP,mBAAkCA,QAAlC,GAA6CF;;;;"}
1
+ {"version":3,"file":"constants.js","sources":["../../../src/constants.ts"],"sourcesContent":["export {\n CSS_PREFIX,\n DIALOG_TRANSITION_DURATION,\n NOTIFICATION_TRANSITION_DURATION,\n TOOLTIP_HOVER_DELAY,\n TOOLTIP_LONG_PRESS_DELAY,\n} from '@lumx/core/js/constants';\n\n/**\n * Optional global `window` instance (not defined when running SSR).\n */\nexport const WINDOW = typeof window !== `undefined` ? window : undefined;\n\n/**\n * Optional global `document` instance (not defined when running SSR).\n */\nexport const DOCUMENT = typeof document !== `undefined` ? document : undefined;\n"],"names":["WINDOW","window","undefined","DOCUMENT","document"],"mappings":"AAQA;;;;IAGaA,MAAM,GAAG,OAAOC,MAAP,mBAAgCA,MAAhC,GAAyCC;AAE/D;;;;IAGaC,QAAQ,GAAG,OAAOC,QAAP,mBAAkCA,QAAlC,GAA6CF;;;;"}
@@ -28,5 +28,4 @@ import './InputLabel.js';
28
28
  import './TextField.js';
29
29
  import './Toolbar2.js';
30
30
  import './Tooltip2.js';
31
- import 'lodash/debounce';
32
31
  //# sourceMappingURL=date-picker.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"date-picker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"date-picker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -29,5 +29,4 @@ import 'lodash/pull';
29
29
  import './DragHandle.js';
30
30
  export { E as ExpansionPanel } from './ExpansionPanel.js';
31
31
  import './Tooltip2.js';
32
- import 'lodash/debounce';
33
32
  //# sourceMappingURL=expansion-panel.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"expansion-panel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"expansion-panel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -301,6 +301,24 @@ var CSS_PREFIX = 'lumx';
301
301
 
302
302
  var DIALOG_TRANSITION_DURATION = 400;
303
303
  var NOTIFICATION_TRANSITION_DURATION = 200;
304
+ /**
305
+ * Delay on hover after which we open or close the tooltip.
306
+ * Only applies to devices supporting pointer hover.
307
+ */
308
+
309
+ var TOOLTIP_HOVER_DELAY = {
310
+ open: 500,
311
+ close: 0
312
+ };
313
+ /**
314
+ * Delay on long press after which we open or close the tooltip.
315
+ * Only applies to devices not supporting pointer hover.
316
+ */
317
+
318
+ var TOOLTIP_LONG_PRESS_DELAY = {
319
+ open: 250,
320
+ close: 3000
321
+ };
304
322
 
305
323
  var LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
306
324
  /**
@@ -324,5 +342,5 @@ function getRootClassName(componentName, subComponent) {
324
342
  return formattedClassName;
325
343
  }
326
344
 
327
- export { CSS_PREFIX as C, DIALOG_TRANSITION_DURATION as D, NOTIFICATION_TRANSITION_DURATION as N, getBasicClass as a, onButtonPressed as b, classnames as c, createCommonjsModule as d, detectHorizontalSwipe as e, onEscapePressed as f, getRootClassName as g, handleBasicClasses as h, onEnterPressed as o };
345
+ export { CSS_PREFIX as C, DIALOG_TRANSITION_DURATION as D, NOTIFICATION_TRANSITION_DURATION as N, TOOLTIP_LONG_PRESS_DELAY as T, getBasicClass as a, onButtonPressed as b, classnames as c, createCommonjsModule as d, detectHorizontalSwipe as e, onEscapePressed as f, getRootClassName as g, handleBasicClasses as h, TOOLTIP_HOVER_DELAY as i, onEnterPressed as o };
328
346
  //# sourceMappingURL=getRootClassName.js.map