@lumx/react 3.20.1-alpha.11 → 3.20.1-alpha.12
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.
- package/_internal/{8fcceef3.js → 0420e67b.js} +13 -14
- package/_internal/{8fcceef3.js.map → 0420e67b.js.map} +1 -1
- package/_internal/{7b214f74.js → 0a490b07.js} +29 -24
- package/_internal/{7b214f74.js.map → 0a490b07.js.map} +1 -1
- package/_internal/{4d92e13b.js → 0be1006e.js} +25 -25
- package/_internal/{4d92e13b.js.map → 0be1006e.js.map} +1 -1
- package/_internal/{dd0a245d.js → 0d1a078c.js} +44 -42
- package/_internal/{dd0a245d.js.map → 0d1a078c.js.map} +1 -1
- package/_internal/{1eab656b.js → 15eab19b.js} +25 -25
- package/_internal/{1eab656b.js.map → 15eab19b.js.map} +1 -1
- package/_internal/{87bada02.js → 179a84d1.js} +64 -67
- package/_internal/{87bada02.js.map → 179a84d1.js.map} +1 -1
- package/_internal/{4c5a7b63.js → 193521fa.js} +11 -12
- package/_internal/{4c5a7b63.js.map → 193521fa.js.map} +1 -1
- package/_internal/{f57d4eb8.js → 1a90ea3d.js} +15 -17
- package/_internal/{f57d4eb8.js.map → 1a90ea3d.js.map} +1 -1
- package/_internal/1deba7d7.js +224 -0
- package/_internal/{2d6bde7d.js.map → 1deba7d7.js.map} +1 -1
- package/_internal/{2938a251.js → 1ea72630.js} +16 -17
- package/_internal/{2938a251.js.map → 1ea72630.js.map} +1 -1
- package/_internal/21b83d16.js +137 -0
- package/_internal/{5ba8fae8.js.map → 21b83d16.js.map} +1 -1
- package/_internal/297bed8f.js +457 -0
- package/_internal/{e53b5a39.js.map → 297bed8f.js.map} +1 -1
- package/_internal/{432c85a7.js → 2c2b6a89.js} +9 -7
- package/_internal/{432c85a7.js.map → 2c2b6a89.js.map} +1 -1
- package/_internal/{bba7d4c4.js → 2f1716fa.js} +75 -63
- package/_internal/{bba7d4c4.js.map → 2f1716fa.js.map} +1 -1
- package/_internal/{2c7942af.js → 2f6c7f84.js} +16 -21
- package/_internal/{2c7942af.js.map → 2f6c7f84.js.map} +1 -1
- package/_internal/{64046d7a.js → 329b5f12.js} +10 -12
- package/_internal/{64046d7a.js.map → 329b5f12.js.map} +1 -1
- package/_internal/332e9844.js +2 -0
- package/_internal/332e9844.js.map +1 -0
- package/_internal/{85d992d2.js → 34c59f5b.js} +101 -98
- package/_internal/{85d992d2.js.map → 34c59f5b.js.map} +1 -1
- package/_internal/{30f4c83c.js → 370bdaed.js} +7 -5
- package/_internal/{30f4c83c.js.map → 370bdaed.js.map} +1 -1
- package/_internal/{7c4f4643.js → 37b007a4.js} +2 -2
- package/_internal/{7c4f4643.js.map → 37b007a4.js.map} +1 -1
- package/_internal/{07e0bd90.js → 3a4e4636.js} +51 -36
- package/_internal/{07e0bd90.js.map → 3a4e4636.js.map} +1 -1
- package/_internal/{3683d267.js → 3e653144.js} +8 -11
- package/_internal/{3683d267.js.map → 3e653144.js.map} +1 -1
- package/_internal/{c43d098b.js → 3f86608e.js} +5 -2
- package/_internal/{c43d098b.js.map → 3f86608e.js.map} +1 -1
- package/_internal/{b3bfbe72.js → 478b5c92.js} +2 -2
- package/_internal/{b3bfbe72.js.map → 478b5c92.js.map} +1 -1
- package/_internal/4962be5b.js +121 -0
- package/_internal/{70cf341b.js.map → 4962be5b.js.map} +1 -1
- package/_internal/{407735b4.js → 4cd870a5.js} +2 -2
- package/_internal/{407735b4.js.map → 4cd870a5.js.map} +1 -1
- package/_internal/{e4613195.js → 501f2f9f.js} +8 -9
- package/_internal/{e4613195.js.map → 501f2f9f.js.map} +1 -1
- package/_internal/5e7b90e2.js +2 -0
- package/_internal/5e7b90e2.js.map +1 -0
- package/_internal/{18334f0d.js → 5ec059fe.js} +48 -43
- package/_internal/{18334f0d.js.map → 5ec059fe.js.map} +1 -1
- package/_internal/{fc47f2da.js → 5f8f9454.js} +10 -12
- package/_internal/{fc47f2da.js.map → 5f8f9454.js.map} +1 -1
- package/_internal/{3f3de25e.js → 5fe09341.js} +3 -3
- package/_internal/{3f3de25e.js.map → 5fe09341.js.map} +1 -1
- package/_internal/{714809cc.js → 628468c4.js} +47 -46
- package/_internal/{714809cc.js.map → 628468c4.js.map} +1 -1
- package/_internal/{d3321a86.js → 6589b796.js} +2 -12
- package/_internal/{d3321a86.js.map → 6589b796.js.map} +1 -1
- package/_internal/{2368cb68.js → 65f91970.js} +43 -43
- package/_internal/{2368cb68.js.map → 65f91970.js.map} +1 -1
- package/_internal/66f691d3.js +74 -0
- package/_internal/{1921f348.js.map → 66f691d3.js.map} +1 -1
- package/_internal/{bdd41804.js → 68c10f98.js} +50 -41
- package/_internal/{bdd41804.js.map → 68c10f98.js.map} +1 -1
- package/_internal/{9cfa3e10.js → 690ca33e.js} +36 -35
- package/_internal/{9cfa3e10.js.map → 690ca33e.js.map} +1 -1
- package/_internal/6ca04271.js +108 -0
- package/_internal/{a67f26a8.js.map → 6ca04271.js.map} +1 -1
- package/_internal/{cdc3efab.js → 6da19518.js} +24 -32
- package/_internal/{cdc3efab.js.map → 6da19518.js.map} +1 -1
- package/_internal/{bcce6ceb.js → 7093ba23.js} +6 -4
- package/_internal/{bcce6ceb.js.map → 7093ba23.js.map} +1 -1
- package/_internal/{bc4cb4c0.js → 74a4a214.js} +29 -33
- package/_internal/{bc4cb4c0.js.map → 74a4a214.js.map} +1 -1
- package/_internal/{95a2e851.js → 76be70dd.js} +3 -3
- package/_internal/{95a2e851.js.map → 76be70dd.js.map} +1 -1
- package/_internal/{60f8e509.js → 7f54e947.js} +114 -101
- package/_internal/{60f8e509.js.map → 7f54e947.js.map} +1 -1
- package/_internal/{72407886.js → 84dfe68f.js} +50 -44
- package/_internal/{72407886.js.map → 84dfe68f.js.map} +1 -1
- package/_internal/{e2440593.js → 85e3a5ca.js} +32 -35
- package/_internal/{e2440593.js.map → 85e3a5ca.js.map} +1 -1
- package/_internal/{742d4906.js → 86aa4aa4.js} +60 -54
- package/_internal/{742d4906.js.map → 86aa4aa4.js.map} +1 -1
- package/_internal/{4e1dde79.js → 8ab42752.js} +25 -26
- package/_internal/{4e1dde79.js.map → 8ab42752.js.map} +1 -1
- package/_internal/{0f4b35b2.js → 95cfd814.js} +14 -20
- package/_internal/{0f4b35b2.js.map → 95cfd814.js.map} +1 -1
- package/_internal/{d6b3a3c0.js → 9a4dfad0.js} +48 -39
- package/_internal/{d6b3a3c0.js.map → 9a4dfad0.js.map} +1 -1
- package/_internal/{80e5c950.js → 9c9df5f2.js} +19 -19
- package/_internal/{80e5c950.js.map → 9c9df5f2.js.map} +1 -1
- package/_internal/{21aeb1c7.js → 9d1336a1.js} +6 -6
- package/_internal/{21aeb1c7.js.map → 9d1336a1.js.map} +1 -1
- package/_internal/{ee64ab0d.js → 9fdc715b.js} +37 -34
- package/_internal/{ee64ab0d.js.map → 9fdc715b.js.map} +1 -1
- package/_internal/a003602b.js +116 -0
- package/_internal/{32698205.js.map → a003602b.js.map} +1 -1
- package/_internal/{baa0a23b.js → a34639bd.js} +31 -29
- package/_internal/{baa0a23b.js.map → a34639bd.js.map} +1 -1
- package/_internal/{cb036703.js → a84f4981.js} +35 -26
- package/_internal/{cb036703.js.map → a84f4981.js.map} +1 -1
- package/_internal/{9210e2f3.js → b0a7a999.js} +10 -12
- package/_internal/{9210e2f3.js.map → b0a7a999.js.map} +1 -1
- package/_internal/{3646abc3.js → b0b2e33d.js} +117 -104
- package/_internal/{3646abc3.js.map → b0b2e33d.js.map} +1 -1
- package/_internal/{1aaa0341.js → b1af5979.js} +168 -160
- package/_internal/{1aaa0341.js.map → b1af5979.js.map} +1 -1
- package/_internal/{21cf275f.js → b477da26.js} +63 -57
- package/_internal/{21cf275f.js.map → b477da26.js.map} +1 -1
- package/_internal/{60923026.js → b8667090.js} +2 -2
- package/_internal/{60923026.js.map → b8667090.js.map} +1 -1
- package/_internal/{1e4b7ad5.js → bae266a9.js} +19 -18
- package/_internal/{1e4b7ad5.js.map → bae266a9.js.map} +1 -1
- package/_internal/{9d8130ae.js → be6da9b0.js} +69 -74
- package/_internal/{9d8130ae.js.map → be6da9b0.js.map} +1 -1
- package/_internal/{9452daf7.js → c0414b89.js} +10 -12
- package/_internal/{9452daf7.js.map → c0414b89.js.map} +1 -1
- package/_internal/{e566d502.js → c2388b10.js} +21 -17
- package/_internal/{e566d502.js.map → c2388b10.js.map} +1 -1
- package/_internal/{9cf0d217.js → c459a04d.js} +55 -54
- package/_internal/{9cf0d217.js.map → c459a04d.js.map} +1 -1
- package/_internal/c6ca7494.js +2 -0
- package/_internal/c6ca7494.js.map +1 -0
- package/_internal/{01bc8fcf.js → cdddaed8.js} +20 -18
- package/_internal/{01bc8fcf.js.map → cdddaed8.js.map} +1 -1
- package/_internal/{0361b7fb.js → d45e3f16.js} +2 -2
- package/_internal/{0361b7fb.js.map → d45e3f16.js.map} +1 -1
- package/_internal/{d66c4375.js → d5f316cb.js} +2 -2
- package/_internal/{d66c4375.js.map → d5f316cb.js.map} +1 -1
- package/_internal/{0a31e895.js → db4fdc7b.js} +63 -57
- package/_internal/{0a31e895.js.map → db4fdc7b.js.map} +1 -1
- package/_internal/dbe0cf24.js +75 -0
- package/_internal/{803945f7.js.map → dbe0cf24.js.map} +1 -1
- package/_internal/{4ceaf17c.js → e2afb13f.js} +2 -2
- package/_internal/{4ceaf17c.js.map → e2afb13f.js.map} +1 -1
- package/_internal/{b925072d.js → e52f0d3f.js} +37 -34
- package/_internal/{b925072d.js.map → e52f0d3f.js.map} +1 -1
- package/_internal/{aa8c5d9b.js → e6dd117e.js} +2 -2
- package/_internal/{aa8c5d9b.js.map → e6dd117e.js.map} +1 -1
- package/_internal/{077b7bef.js → ea04260d.js} +6 -6
- package/_internal/{077b7bef.js.map → ea04260d.js.map} +1 -1
- package/_internal/{77eb8ef3.js → eaa8b1d8.js} +39 -38
- package/_internal/{77eb8ef3.js.map → eaa8b1d8.js.map} +1 -1
- package/_internal/{aafcf80e.js → edab29ce.js} +61 -65
- package/_internal/{aafcf80e.js.map → edab29ce.js.map} +1 -1
- package/_internal/{38b3ecf3.js → f0900583.js} +54 -45
- package/_internal/{38b3ecf3.js.map → f0900583.js.map} +1 -1
- package/_internal/{881714a1.js → f23cdf84.js} +45 -51
- package/_internal/{881714a1.js.map → f23cdf84.js.map} +1 -1
- package/_internal/f52e979e.js +3 -0
- package/_internal/f52e979e.js.map +1 -0
- package/_internal/{1ce667fb.js → f5508d3d.js} +53 -51
- package/_internal/{1ce667fb.js.map → f5508d3d.js.map} +1 -1
- package/_internal/{43262bfe.js → f93fe83e.js} +11 -13
- package/_internal/{43262bfe.js.map → f93fe83e.js.map} +1 -1
- package/index.js +63 -63
- package/package.json +3 -11
- package/utils/index.js +3 -3
- package/_internal/1921f348.js +0 -72
- package/_internal/286fc728.js +0 -2
- package/_internal/286fc728.js.map +0 -1
- package/_internal/2d6bde7d.js +0 -209
- package/_internal/32698205.js +0 -107
- package/_internal/5ba8fae8.js +0 -120
- package/_internal/70cf341b.js +0 -117
- package/_internal/803945f7.js +0 -65
- package/_internal/a67f26a8.js +0 -98
- package/_internal/ac3bc511.js +0 -2
- package/_internal/ac3bc511.js.map +0 -1
- package/_internal/cc995526.js +0 -2
- package/_internal/cc995526.js.map +0 -1
- package/_internal/e2122a37.js +0 -3
- package/_internal/e2122a37.js.map +0 -1
- package/_internal/e53b5a39.js +0 -407
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"714809cc.js","sources":["../../../lumx-icons/dist/esm/image-broken.js","../../src/components/thumbnail/useImageLoad.ts","../../src/components/thumbnail/useFocusPointStyle.tsx","../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["export const mdiImageBroken = 'M19 3a2 2 0 0 1 2 2v6h-2v2h-2v2h-2v2h-2v2h-2v2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 12v4a2 2 0 0 1-2 2h-4v-2h2v-2h2v-2zm-2-6.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H11v-1h2v-2h2v-2h2V9h2z';","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 has no source.\n if (event?.type === 'error' || (img?.complete && !img.getAttribute('src'))) {\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/core/js/constants';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\nimport { RectSize } from '@lumx/react/utils/type';\n\n// Calculate shift to center the focus point in the container.\nexport function shiftPosition({\n scale,\n focusPoint,\n imageSize,\n containerSize,\n}: {\n scale: number;\n focusPoint: number;\n imageSize: number;\n containerSize: number;\n}) {\n const scaledSize = imageSize / scale;\n if (scaledSize === containerSize) return 0;\n\n const scaledFocusHeight = focusPoint * scaledSize;\n const startFocus = scaledFocusHeight - containerSize / 2;\n const shift = startFocus / (scaledSize - containerSize);\n\n return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);\n}\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: RectSize | 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<RectSize | 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: CSSProperties = useMemo(() => {\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 return { visibility: 'hidden' };\n }\n if (!containerSize || !imageSize.height || !imageSize.width) {\n // Missing container or image size abort focus point compute.\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({\n scale,\n focusPoint: focusPointFromTop,\n imageSize: imageSize.height,\n containerSize: containerSize.height,\n });\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({\n scale,\n focusPoint: focusPointFromLeft,\n imageSize: imageSize.width,\n containerSize: containerSize.width,\n });\n\n const objectPosition = `${x}% ${y}%`;\n\n return { objectPosition };\n }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n return style;\n};\n","import React, {\n CSSProperties,\n ImgHTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n Ref,\n useState,\n} from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';\nimport { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mdiImageBroken } from '@lumx/icons';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\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, HasTheme {\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 | Falsy;\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 /** Set how the image should fit when its aspect ratio is constrained */\n objectFit?: ThumbnailObjectFit;\n /** Size variant of the component. */\n size?: ThumbnailSize;\n /** Image loading mode. */\n loading?: ImgHTMLProps['loading'];\n /** Ref of an existing placeholder image to display while loading. */\n loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;\n /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /** On key press callback. */\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\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};\n\n/**\n * Thumbnail component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {\n const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n align,\n alt,\n aspectRatio = AspectRatio.original,\n badge,\n className,\n crossOrigin,\n fallback = DEFAULT_PROPS.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 objectFit,\n loading = DEFAULT_PROPS.loading,\n loadingPlaceholderImageRef,\n size,\n theme = defaultTheme,\n variant,\n linkProps,\n linkAs,\n ...forwardedProps\n } = otherProps;\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 isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);\n\n const Wrapper: any = isClickable ? RawClickable : 'div';\n const wrapperProps = { ...forwardedProps };\n if (isClickable) {\n Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? 'a' : 'button') }, disabledStateProps);\n if (isLink) {\n Object.assign(wrapperProps, linkProps);\n } else {\n wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;\n }\n }\n\n // If we have a loading placeholder image that is really loaded (complete)\n const loadingPlaceholderImage =\n (isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current) ||\n undefined;\n\n // Set loading placeholder image as background\n const loadingStyle = loadingPlaceholderImage\n ? { backgroundImage: `url(${loadingPlaceholderImage.src})` }\n : undefined;\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 objectFit,\n hasBadge: !!badge,\n }),\n fillHeight && `${CLASSNAME}--fill-height`,\n )}\n >\n <span className={`${CLASSNAME}__background`}>\n <img\n // Use placeholder image size\n width={loadingPlaceholderImage?.naturalWidth}\n height={loadingPlaceholderImage?.naturalHeight}\n {...imgProps}\n style={{\n // Reserve space while loading (when possible)\n width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,\n ...imgProps?.style,\n ...imageErrorStyle,\n ...focusPointStyle,\n ...loadingStyle,\n }}\n ref={useMergeRefs(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 <span className={`${CLASSNAME}__fallback`}>\n {hasIconErrorFallback ? (\n <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n ) : (\n fallback\n )}\n </span>\n )}\n </span>\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":["mdiImageBroken","getState","img","event","type","complete","getAttribute","useImageLoad","imageURL","imgRef","state","setState","useState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","image","aspectRatio","imgProps","width","height","element","isLoaded","useMemo","AspectRatio","original","x","y","naturalWidth","naturalHeight","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","loading","Thumbnail","forwardRef","props","ref","isAnyDisabled","otherProps","disabledStateProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoading","isLoadingProp","objectFit","loadingPlaceholderImageRef","size","theme","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isClickable","onClick","Wrapper","RawClickable","wrapperProps","Object","assign","as","loadingPlaceholderImage","current","loadingStyle","backgroundImage","React","createElement","_extends","classNames","handleBasicClasses","prefix","hasBadge","useMergeRefs","hasDefinedSize","Icon","icon","Size","xxs","cloneElement","displayName","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"628468c4.js","sources":["../../../lumx-icons/dist/esm/image-broken.js","../../src/components/thumbnail/useImageLoad.ts","../../src/components/thumbnail/useFocusPointStyle.tsx","../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["export const mdiImageBroken = 'M19 3a2 2 0 0 1 2 2v6h-2v2h-2v2h-2v2h-2v2h-2v2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 12v4a2 2 0 0 1-2 2h-4v-2h2v-2h2v-2zm-2-6.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H11v-1h2v-2h2v-2h2V9h2z';","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 has no source.\n if (event?.type === 'error' || (img?.complete && !img.getAttribute('src'))) {\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/core/js/constants';\nimport { ThumbnailProps } from '@lumx/react/components/thumbnail/Thumbnail';\nimport { RectSize } from '@lumx/react/utils/type';\n\n// Calculate shift to center the focus point in the container.\nexport function shiftPosition({\n scale,\n focusPoint,\n imageSize,\n containerSize,\n}: {\n scale: number;\n focusPoint: number;\n imageSize: number;\n containerSize: number;\n}) {\n const scaledSize = imageSize / scale;\n if (scaledSize === containerSize) return 0;\n\n const scaledFocusHeight = focusPoint * scaledSize;\n const startFocus = scaledFocusHeight - containerSize / 2;\n const shift = startFocus / (scaledSize - containerSize);\n\n return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);\n}\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: RectSize | 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<RectSize | 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: CSSProperties = useMemo(() => {\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 return { visibility: 'hidden' };\n }\n if (!containerSize || !imageSize.height || !imageSize.width) {\n // Missing container or image size abort focus point compute.\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({\n scale,\n focusPoint: focusPointFromTop,\n imageSize: imageSize.height,\n containerSize: containerSize.height,\n });\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({\n scale,\n focusPoint: focusPointFromLeft,\n imageSize: imageSize.width,\n containerSize: containerSize.width,\n });\n\n const objectPosition = `${x}% ${y}%`;\n\n return { objectPosition };\n }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);\n\n return style;\n};\n","import React, {\n CSSProperties,\n ImgHTMLAttributes,\n KeyboardEventHandler,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n Ref,\n useState,\n} from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';\nimport { Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mdiImageBroken } from '@lumx/icons';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';\nimport { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\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, HasTheme {\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 | Falsy;\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 /** Set how the image should fit when its aspect ratio is constrained */\n objectFit?: ThumbnailObjectFit;\n /** Size variant of the component. */\n size?: ThumbnailSize;\n /** Image loading mode. */\n loading?: ImgHTMLProps['loading'];\n /** Ref of an existing placeholder image to display while loading. */\n loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;\n /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /** On key press callback. */\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\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};\n\n/**\n * Thumbnail component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {\n const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n align,\n alt,\n aspectRatio = AspectRatio.original,\n badge,\n className,\n crossOrigin,\n fallback = DEFAULT_PROPS.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 objectFit,\n loading = DEFAULT_PROPS.loading,\n loadingPlaceholderImageRef,\n size,\n theme = defaultTheme,\n variant,\n linkProps,\n linkAs,\n ...forwardedProps\n } = otherProps;\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 isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);\n\n const Wrapper: any = isClickable ? RawClickable : 'div';\n const wrapperProps = { ...forwardedProps };\n if (isClickable) {\n Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? 'a' : 'button') }, disabledStateProps);\n if (isLink) {\n Object.assign(wrapperProps, linkProps);\n } else {\n wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;\n }\n }\n\n // If we have a loading placeholder image that is really loaded (complete)\n const loadingPlaceholderImage =\n (isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current) ||\n undefined;\n\n // Set loading placeholder image as background\n const loadingStyle = loadingPlaceholderImage\n ? { backgroundImage: `url(${loadingPlaceholderImage.src})` }\n : undefined;\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 objectFit,\n hasBadge: !!badge,\n }),\n fillHeight && `${CLASSNAME}--fill-height`,\n )}\n >\n <span className={`${CLASSNAME}__background`}>\n <img\n // Use placeholder image size\n width={loadingPlaceholderImage?.naturalWidth}\n height={loadingPlaceholderImage?.naturalHeight}\n {...imgProps}\n style={{\n // Reserve space while loading (when possible)\n width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,\n ...imgProps?.style,\n ...imageErrorStyle,\n ...focusPointStyle,\n ...loadingStyle,\n }}\n ref={useMergeRefs(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 <span className={`${CLASSNAME}__fallback`}>\n {hasIconErrorFallback ? (\n <Icon icon={fallback as string} size={Size.xxs} theme={theme} />\n ) : (\n fallback\n )}\n </span>\n )}\n </span>\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":["mdiImageBroken","getState","img","event","type","complete","getAttribute","useImageLoad","imageURL","imgRef","state","setState","useState","useEffect","undefined","update","addEventListener","removeEventListener","src","shiftPosition","scale","focusPoint","imageSize","containerSize","scaledSize","scaledFocusHeight","startFocus","shift","Math","floor","max","min","useFocusPointStyle","image","aspectRatio","imgProps","width","height","element","isLoaded","useMemo","AspectRatio","original","x","y","naturalWidth","naturalHeight","setContainerSize","updateContainerSize","cWidth","offsetWidth","cHeight","offsetHeight","oldContainerSize","requestAnimationFrame","style","visibility","heightScale","widthScale","focusPointFromTop","abs","focusPointFromLeft","objectPosition","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","fallback","loading","Thumbnail","forwardRef","props","ref","isAnyDisabled","otherProps","disabledStateProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","align","alt","badge","className","crossOrigin","fillHeight","propImgRef","isLoading","isLoadingProp","objectFit","loadingPlaceholderImageRef","size","theme","variant","linkProps","linkAs","forwardedProps","imgElement","setImgElement","loadingState","hasError","focusPointStyle","hasIconErrorFallback","hasCustomErrorFallback","imageErrorStyle","display","isLink","Boolean","href","isClickable","onClick","Wrapper","RawClickable","wrapperProps","Object","assign","as","loadingPlaceholderImage","current","loadingStyle","backgroundImage","_jsxs","classNames","handleBasicClasses","prefix","hasBadge","children","_jsx","useMergeRefs","hasDefinedSize","Icon","icon","Size","xxs","React","cloneElement","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -189,16 +189,6 @@ const ColorVariant = {
|
|
|
189
189
|
|
|
190
190
|
/** ColorPalette with all possible color variant combination */
|
|
191
191
|
|
|
192
|
-
function _extends() {
|
|
193
|
-
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
194
|
-
for (var e = 1; e < arguments.length; e++) {
|
|
195
|
-
var t = arguments[e];
|
|
196
|
-
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
197
|
-
}
|
|
198
|
-
return n;
|
|
199
|
-
}, _extends.apply(null, arguments);
|
|
200
|
-
}
|
|
201
|
-
|
|
202
192
|
var classnames = {exports: {}};
|
|
203
193
|
|
|
204
194
|
/*!
|
|
@@ -286,5 +276,5 @@ function getRootClassName(componentName, subComponent) {
|
|
|
286
276
|
*/
|
|
287
277
|
const forwardRef = React__default.forwardRef;
|
|
288
278
|
|
|
289
|
-
export { Alignment as A, CSS_PREFIX as C, DIALOG_TRANSITION_DURATION as D, EXPANSION_PANEL_TRANSITION_DURATION as E, Kind as K, NOTIFICATION_TRANSITION_DURATION as N, Orientation as O, SLIDESHOW_TRANSITION_DURATION as S, TOOLTIP_HOVER_DELAY as T, WhiteSpace as W,
|
|
290
|
-
//# sourceMappingURL=
|
|
279
|
+
export { Alignment as A, CSS_PREFIX as C, DIALOG_TRANSITION_DURATION as D, EXPANSION_PANEL_TRANSITION_DURATION as E, Kind as K, NOTIFICATION_TRANSITION_DURATION as N, Orientation as O, SLIDESHOW_TRANSITION_DURATION as S, TOOLTIP_HOVER_DELAY as T, WhiteSpace as W, TOOLTIP_LONG_PRESS_DELAY as a, Theme as b, Size as c, Emphasis as d, TypographyInterface as e, TypographyTitleCustom as f, TypographyCustom as g, Typography as h, AspectRatio as i, ColorPalette as j, ColorVariant as k, classNames as l, getRootClassName as m, forwardRef as n };
|
|
280
|
+
//# sourceMappingURL=6589b796.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"d3321a86.js","sources":["../../../lumx-core/src/js/constants/index.ts","../../../../node_modules/classnames/index.js","../../../lumx-core/src/js/utils/className/getRootClassName.ts","../../src/utils/react/forwardRef.ts"],"sourcesContent":["import { ValueOf } from '../types/ValueOf';\n/**\n * The prefix to use for the CSS classes.\n */\nexport const CSS_PREFIX = 'lumx';\n\n/**\n * Key codes.\n */\nexport * from './keycodes';\n\n/**\n * Animation duration constants. Take into consideration that if you change one of these variables,\n * you need to update their scss counterpart as well\n */\nexport const DIALOG_TRANSITION_DURATION = 400;\nexport const EXPANSION_PANEL_TRANSITION_DURATION = 400;\nexport const NOTIFICATION_TRANSITION_DURATION = 200;\nexport const SLIDESHOW_TRANSITION_DURATION = 5000;\n\n/**\n * Delay on hover after which we open or close the tooltip.\n * Only applies to devices supporting pointer hover.\n */\nexport const TOOLTIP_HOVER_DELAY = {\n open: 500,\n close: 500,\n};\n\n/**\n * Delay on long press after which we open or close the tooltip.\n * Only applies to devices not supporting pointer hover.\n */\nexport const TOOLTIP_LONG_PRESS_DELAY = {\n open: 250,\n close: 3000,\n};\n\n/**\n * Alignments.\n */\nexport const Alignment = {\n bottom: 'bottom',\n center: 'center',\n end: 'end',\n left: 'left',\n right: 'right',\n spaceAround: 'space-around',\n spaceBetween: 'space-between',\n spaceEvenly: 'space-evenly',\n start: 'start',\n top: 'top',\n} as const;\nexport type Alignment = ValueOf<typeof Alignment>;\nexport type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;\nexport type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;\n\nexport const Theme = {\n light: 'light',\n dark: 'dark',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;\n\nexport const Size = {\n xxs: 'xxs',\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'l',\n xl: 'xl',\n xxl: 'xxl',\n tiny: 'tiny',\n regular: 'regular',\n medium: 'medium',\n big: 'big',\n huge: 'huge',\n} as const;\nexport type Size = ValueOf<typeof Size>;\nexport type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\nexport const Orientation = {\n horizontal: 'horizontal',\n vertical: 'vertical',\n} as const;\nexport type Orientation = ValueOf<typeof Orientation>;\n\nexport const Emphasis = {\n low: 'low',\n medium: 'medium',\n high: 'high',\n} as const;\nexport type Emphasis = ValueOf<typeof Emphasis>;\n\n/**\n * List of typographies that can't be customized.\n */\nexport const TypographyInterface = {\n overline: 'overline',\n caption: 'caption',\n body1: 'body1',\n body2: 'body2',\n subtitle1: 'subtitle1',\n subtitle2: 'subtitle2',\n title: 'title',\n headline: 'headline',\n display1: 'display1',\n} as const;\nexport type TypographyInterface = ValueOf<typeof TypographyInterface>;\n\n/**\n * List of title typographies that can be customized (via CSS variables).\n */\nexport const TypographyTitleCustom = {\n title1: 'custom-title1',\n title2: 'custom-title2',\n title3: 'custom-title3',\n title4: 'custom-title4',\n title5: 'custom-title5',\n title6: 'custom-title6',\n} as const;\nexport type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;\n\n/**\n * List of typographies that can be customized (via CSS variables).\n */\nexport const TypographyCustom = {\n ...TypographyTitleCustom,\n intro: 'custom-intro',\n 'body-large': 'custom-body-large',\n body: 'custom-body',\n quote: 'custom-quote',\n 'publish-info': 'custom-publish-info',\n button: 'custom-button',\n} as const;\nexport type TypographyCustom = ValueOf<typeof TypographyCustom>;\n\n/**\n * List of all typographies.\n */\nexport const Typography = {\n ...TypographyInterface,\n custom: TypographyCustom,\n} as const;\nexport type Typography = TypographyInterface | TypographyCustom;\n\n/**\n * All available aspect ratios.\n */\nexport const AspectRatio = {\n /** Intrinsic content ratio. */\n original: 'original',\n /** Ratio 3:1 */\n panoramic: 'panoramic',\n /** Ratio 16:9 */\n wide: 'wide',\n /** Ratio 3:2 */\n horizontal: 'horizontal',\n /** Ratio 3:2 */\n vertical: 'vertical',\n /** Ratio 1:1 */\n square: 'square',\n /** Ratio constrained by the parent. */\n free: 'free',\n} as const;\nexport type AspectRatio = ValueOf<typeof AspectRatio>;\n\n/**\n * Semantic info about the purpose of the component\n */\nexport const Kind = {\n info: 'info',\n success: 'success',\n warning: 'warning',\n error: 'error',\n} as const;\nexport type Kind = ValueOf<typeof Kind>;\n\n/**\n * All available white-space values\n * */\nexport const WhiteSpace = {\n normal: 'normal',\n nowrap: 'nowrap',\n pre: 'pre',\n 'pre-wrap': 'pre-wrap',\n 'pre-line': 'pre-line',\n 'break-spaces': 'break-spaces',\n};\nexport type WhiteSpace = ValueOf<typeof WhiteSpace>;\n\n/**\n * See SCSS variable $lumx-color-palette\n */\nexport const ColorPalette = {\n primary: 'primary',\n secondary: 'secondary',\n blue: 'blue',\n dark: 'dark',\n green: 'green',\n yellow: 'yellow',\n red: 'red',\n light: 'light',\n grey: 'grey',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette | string;\n\n/**\n * See SCSS variable $lumx-color-variants\n */\nexport const ColorVariant = {\n D1: 'D1',\n D2: 'D2',\n L1: 'L1',\n L2: 'L2',\n L3: 'L3',\n L4: 'L4',\n L5: 'L5',\n L6: 'L6',\n N: 'N',\n} as const;\nexport type ColorVariant = ValueOf<typeof ColorVariant>;\n\n/** ColorPalette with all possible color variant combination */\nexport type ColorWithVariants =\n | ColorPalette\n | Exclude<\n `${ColorPalette}-${ColorVariant}`,\n // No dark variant for light and dark\n `light-D${number}` | `dark-D${number}`\n >;\n","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import kebabCase from 'lodash/kebabCase';\n\nimport { CSS_PREFIX } from '../../constants';\n\n// See https://regex101.com/r/YjS1uI/3\nconst LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;\n\n/**\n * Get the name of the root CSS class of a component based on its name.\n *\n * @param componentName The name of the component. This name should contains the component prefix and be\n * written in PascalCase.\n * @param subComponent Whether the current component is a sub component, if true, define the class according\n * to BEM standards.\n * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in\n * lower-snake-case.\n */\nexport function getRootClassName(componentName: string, subComponent?: boolean): string {\n const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;\n\n if (subComponent) {\n return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');\n }\n return formattedClassName;\n}\n","import React, { type ReactNode, type ForwardedRef } from 'react';\nimport type { Comp } from '../type';\n\ntype ForwardRef = <P, T = HTMLElement, A = unknown>(\n render: (props: P, ref: ForwardedRef<T>) => ReactNode,\n) => Comp<P, T> & A;\n\n/**\n * React.forwardRef but re-typed to attach some custom metadata on our components.\n */\nexport const forwardRef = React.forwardRef as ForwardRef;\n"],"names":["CSS_PREFIX","DIALOG_TRANSITION_DURATION","EXPANSION_PANEL_TRANSITION_DURATION","NOTIFICATION_TRANSITION_DURATION","SLIDESHOW_TRANSITION_DURATION","TOOLTIP_HOVER_DELAY","open","close","TOOLTIP_LONG_PRESS_DELAY","Alignment","bottom","center","end","left","right","spaceAround","spaceBetween","spaceEvenly","start","top","Theme","light","dark","Size","xxs","xs","s","m","l","xl","xxl","tiny","regular","medium","big","huge","Orientation","horizontal","vertical","Emphasis","low","high","TypographyInterface","overline","caption","body1","body2","subtitle1","subtitle2","title","headline","display1","TypographyTitleCustom","title1","title2","title3","title4","title5","title6","TypographyCustom","intro","body","quote","button","Typography","custom","AspectRatio","original","panoramic","wide","square","free","Kind","info","success","warning","error","WhiteSpace","normal","nowrap","pre","ColorPalette","primary","secondary","blue","green","yellow","red","grey","ColorVariant","D1","D2","L1","L2","L3","L4","L5","L6","N","LAST_PART_CLASSNAME","getRootClassName","componentName","subComponent","formattedClassName","kebabCase","replace","forwardRef","React"],"mappings":"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","x_google_ignoreList":[1]}
|
|
1
|
+
{"version":3,"file":"6589b796.js","sources":["../../../lumx-core/src/js/constants/index.ts","../../../../node_modules/classnames/index.js","../../../lumx-core/src/js/utils/className/getRootClassName.ts","../../src/utils/react/forwardRef.ts"],"sourcesContent":["import { ValueOf } from '../types/ValueOf';\n/**\n * The prefix to use for the CSS classes.\n */\nexport const CSS_PREFIX = 'lumx';\n\n/**\n * Key codes.\n */\nexport * from './keycodes';\n\n/**\n * Animation duration constants. Take into consideration that if you change one of these variables,\n * you need to update their scss counterpart as well\n */\nexport const DIALOG_TRANSITION_DURATION = 400;\nexport const EXPANSION_PANEL_TRANSITION_DURATION = 400;\nexport const NOTIFICATION_TRANSITION_DURATION = 200;\nexport const SLIDESHOW_TRANSITION_DURATION = 5000;\n\n/**\n * Delay on hover after which we open or close the tooltip.\n * Only applies to devices supporting pointer hover.\n */\nexport const TOOLTIP_HOVER_DELAY = {\n open: 500,\n close: 500,\n};\n\n/**\n * Delay on long press after which we open or close the tooltip.\n * Only applies to devices not supporting pointer hover.\n */\nexport const TOOLTIP_LONG_PRESS_DELAY = {\n open: 250,\n close: 3000,\n};\n\n/**\n * Alignments.\n */\nexport const Alignment = {\n bottom: 'bottom',\n center: 'center',\n end: 'end',\n left: 'left',\n right: 'right',\n spaceAround: 'space-around',\n spaceBetween: 'space-between',\n spaceEvenly: 'space-evenly',\n start: 'start',\n top: 'top',\n} as const;\nexport type Alignment = ValueOf<typeof Alignment>;\nexport type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;\nexport type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;\n\nexport const Theme = {\n light: 'light',\n dark: 'dark',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;\n\nexport const Size = {\n xxs: 'xxs',\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'l',\n xl: 'xl',\n xxl: 'xxl',\n tiny: 'tiny',\n regular: 'regular',\n medium: 'medium',\n big: 'big',\n huge: 'huge',\n} as const;\nexport type Size = ValueOf<typeof Size>;\nexport type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\nexport const Orientation = {\n horizontal: 'horizontal',\n vertical: 'vertical',\n} as const;\nexport type Orientation = ValueOf<typeof Orientation>;\n\nexport const Emphasis = {\n low: 'low',\n medium: 'medium',\n high: 'high',\n} as const;\nexport type Emphasis = ValueOf<typeof Emphasis>;\n\n/**\n * List of typographies that can't be customized.\n */\nexport const TypographyInterface = {\n overline: 'overline',\n caption: 'caption',\n body1: 'body1',\n body2: 'body2',\n subtitle1: 'subtitle1',\n subtitle2: 'subtitle2',\n title: 'title',\n headline: 'headline',\n display1: 'display1',\n} as const;\nexport type TypographyInterface = ValueOf<typeof TypographyInterface>;\n\n/**\n * List of title typographies that can be customized (via CSS variables).\n */\nexport const TypographyTitleCustom = {\n title1: 'custom-title1',\n title2: 'custom-title2',\n title3: 'custom-title3',\n title4: 'custom-title4',\n title5: 'custom-title5',\n title6: 'custom-title6',\n} as const;\nexport type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;\n\n/**\n * List of typographies that can be customized (via CSS variables).\n */\nexport const TypographyCustom = {\n ...TypographyTitleCustom,\n intro: 'custom-intro',\n 'body-large': 'custom-body-large',\n body: 'custom-body',\n quote: 'custom-quote',\n 'publish-info': 'custom-publish-info',\n button: 'custom-button',\n} as const;\nexport type TypographyCustom = ValueOf<typeof TypographyCustom>;\n\n/**\n * List of all typographies.\n */\nexport const Typography = {\n ...TypographyInterface,\n custom: TypographyCustom,\n} as const;\nexport type Typography = TypographyInterface | TypographyCustom;\n\n/**\n * All available aspect ratios.\n */\nexport const AspectRatio = {\n /** Intrinsic content ratio. */\n original: 'original',\n /** Ratio 3:1 */\n panoramic: 'panoramic',\n /** Ratio 16:9 */\n wide: 'wide',\n /** Ratio 3:2 */\n horizontal: 'horizontal',\n /** Ratio 3:2 */\n vertical: 'vertical',\n /** Ratio 1:1 */\n square: 'square',\n /** Ratio constrained by the parent. */\n free: 'free',\n} as const;\nexport type AspectRatio = ValueOf<typeof AspectRatio>;\n\n/**\n * Semantic info about the purpose of the component\n */\nexport const Kind = {\n info: 'info',\n success: 'success',\n warning: 'warning',\n error: 'error',\n} as const;\nexport type Kind = ValueOf<typeof Kind>;\n\n/**\n * All available white-space values\n * */\nexport const WhiteSpace = {\n normal: 'normal',\n nowrap: 'nowrap',\n pre: 'pre',\n 'pre-wrap': 'pre-wrap',\n 'pre-line': 'pre-line',\n 'break-spaces': 'break-spaces',\n};\nexport type WhiteSpace = ValueOf<typeof WhiteSpace>;\n\n/**\n * See SCSS variable $lumx-color-palette\n */\nexport const ColorPalette = {\n primary: 'primary',\n secondary: 'secondary',\n blue: 'blue',\n dark: 'dark',\n green: 'green',\n yellow: 'yellow',\n red: 'red',\n light: 'light',\n grey: 'grey',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette | string;\n\n/**\n * See SCSS variable $lumx-color-variants\n */\nexport const ColorVariant = {\n D1: 'D1',\n D2: 'D2',\n L1: 'L1',\n L2: 'L2',\n L3: 'L3',\n L4: 'L4',\n L5: 'L5',\n L6: 'L6',\n N: 'N',\n} as const;\nexport type ColorVariant = ValueOf<typeof ColorVariant>;\n\n/** ColorPalette with all possible color variant combination */\nexport type ColorWithVariants =\n | ColorPalette\n | Exclude<\n `${ColorPalette}-${ColorVariant}`,\n // No dark variant for light and dark\n `light-D${number}` | `dark-D${number}`\n >;\n","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import kebabCase from 'lodash/kebabCase';\n\nimport { CSS_PREFIX } from '../../constants';\n\n// See https://regex101.com/r/YjS1uI/3\nconst LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;\n\n/**\n * Get the name of the root CSS class of a component based on its name.\n *\n * @param componentName The name of the component. This name should contains the component prefix and be\n * written in PascalCase.\n * @param subComponent Whether the current component is a sub component, if true, define the class according\n * to BEM standards.\n * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in\n * lower-snake-case.\n */\nexport function getRootClassName(componentName: string, subComponent?: boolean): string {\n const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;\n\n if (subComponent) {\n return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');\n }\n return formattedClassName;\n}\n","import React, { type ReactNode, type ForwardedRef } from 'react';\nimport type { Comp } from '../type';\n\ntype ForwardRef = <P, T = HTMLElement, A = unknown>(\n render: (props: P, ref: ForwardedRef<T>) => ReactNode,\n) => Comp<P, T> & A;\n\n/**\n * React.forwardRef but re-typed to attach some custom metadata on our components.\n */\nexport const forwardRef = React.forwardRef as ForwardRef;\n"],"names":["CSS_PREFIX","DIALOG_TRANSITION_DURATION","EXPANSION_PANEL_TRANSITION_DURATION","NOTIFICATION_TRANSITION_DURATION","SLIDESHOW_TRANSITION_DURATION","TOOLTIP_HOVER_DELAY","open","close","TOOLTIP_LONG_PRESS_DELAY","Alignment","bottom","center","end","left","right","spaceAround","spaceBetween","spaceEvenly","start","top","Theme","light","dark","Size","xxs","xs","s","m","l","xl","xxl","tiny","regular","medium","big","huge","Orientation","horizontal","vertical","Emphasis","low","high","TypographyInterface","overline","caption","body1","body2","subtitle1","subtitle2","title","headline","display1","TypographyTitleCustom","title1","title2","title3","title4","title5","title6","TypographyCustom","intro","body","quote","button","Typography","custom","AspectRatio","original","panoramic","wide","square","free","Kind","info","success","warning","error","WhiteSpace","normal","nowrap","pre","ColorPalette","primary","secondary","blue","green","yellow","red","grey","ColorVariant","D1","D2","L1","L2","L3","L4","L5","L6","N","LAST_PART_CLASSNAME","getRootClassName","componentName","subComponent","formattedClassName","kebabCase","replace","forwardRef","React"],"mappings":"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","x_google_ignoreList":[1]}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import ReactDOM from 'react-dom';
|
|
2
2
|
import React__default, { useReducer, useEffect, useCallback } from 'react';
|
|
3
3
|
import { I as INIT_STATE, r as reducer, T as TabProviderContext, a as useTabProviderContext } from './825ac334.js';
|
|
4
|
-
import {
|
|
5
|
-
import './
|
|
6
|
-
import
|
|
4
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
|
+
import { A as Alignment, n as forwardRef, b as Theme, l as classNames, C as CSS_PREFIX, c as Size } from './6589b796.js';
|
|
6
|
+
import './478b5c92.js';
|
|
7
|
+
import { h as handleBasicClasses } from './e2afb13f.js';
|
|
7
8
|
import { m as mergeRefs } from './f0d7d6ea.js';
|
|
8
9
|
import { u as useTheme } from './3181f000.js';
|
|
9
10
|
import { u as useRovingTabIndex } from './7daf0f24.js';
|
|
10
|
-
import { u as useDisableStateProps } from './
|
|
11
|
-
import { I as Icon } from './
|
|
12
|
-
import { T as Text } from './
|
|
11
|
+
import { u as useDisableStateProps } from './b8667090.js';
|
|
12
|
+
import { I as Icon } from './8ab42752.js';
|
|
13
|
+
import { T as Text } from './0420e67b.js';
|
|
13
14
|
|
|
14
15
|
const DEFAULT_PROPS$3 = {
|
|
15
16
|
isLazy: INIT_STATE.isLazy,
|
|
@@ -62,9 +63,10 @@ const TabProvider = props => {
|
|
|
62
63
|
},
|
|
63
64
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
64
65
|
[onChange, state.activeTabIndex]);
|
|
65
|
-
return /*#__PURE__*/
|
|
66
|
-
value: [state, dispatch]
|
|
67
|
-
|
|
66
|
+
return /*#__PURE__*/jsx(TabProviderContext.Provider, {
|
|
67
|
+
value: [state, dispatch],
|
|
68
|
+
children: children
|
|
69
|
+
});
|
|
68
70
|
};
|
|
69
71
|
TabProvider.defaultProps = DEFAULT_PROPS$3;
|
|
70
72
|
|
|
@@ -123,29 +125,27 @@ const TabList = forwardRef((props, ref) => {
|
|
|
123
125
|
keepTabIndex: false,
|
|
124
126
|
extraDependencies: [children]
|
|
125
127
|
});
|
|
126
|
-
return /*#__PURE__*/
|
|
127
|
-
ref: mergeRefs(ref, tabListRef)
|
|
128
|
-
|
|
128
|
+
return /*#__PURE__*/jsx("div", {
|
|
129
|
+
ref: mergeRefs(ref, tabListRef),
|
|
130
|
+
...forwardedProps,
|
|
129
131
|
className: classNames(className, handleBasicClasses({
|
|
130
132
|
prefix: CLASSNAME$2,
|
|
131
133
|
layout,
|
|
132
134
|
position,
|
|
133
135
|
theme
|
|
134
|
-
}))
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
136
|
+
})),
|
|
137
|
+
children: /*#__PURE__*/jsx("div", {
|
|
138
|
+
className: `${CLASSNAME$2}__links`,
|
|
139
|
+
role: "tablist",
|
|
140
|
+
"aria-label": ariaLabel,
|
|
141
|
+
children: children
|
|
142
|
+
})
|
|
143
|
+
});
|
|
140
144
|
});
|
|
141
145
|
TabList.displayName = COMPONENT_NAME$2;
|
|
142
146
|
TabList.className = CLASSNAME$2;
|
|
143
147
|
TabList.defaultProps = DEFAULT_PROPS$2;
|
|
144
148
|
|
|
145
|
-
/**
|
|
146
|
-
* Defines the props of the component.
|
|
147
|
-
*/
|
|
148
|
-
|
|
149
149
|
/**
|
|
150
150
|
* Component display name.
|
|
151
151
|
*/
|
|
@@ -208,9 +208,9 @@ const Tab = forwardRef((props, ref) => {
|
|
|
208
208
|
}
|
|
209
209
|
changeToCurrentTab();
|
|
210
210
|
}, [changeToCurrentTab, isAnyDisabled, onKeyPress]);
|
|
211
|
-
return /*#__PURE__*/
|
|
212
|
-
ref: ref
|
|
213
|
-
|
|
211
|
+
return /*#__PURE__*/jsxs("button", {
|
|
212
|
+
ref: ref,
|
|
213
|
+
...forwardedProps,
|
|
214
214
|
type: "button",
|
|
215
215
|
id: state?.tabId,
|
|
216
216
|
className: classNames(className, handleBasicClasses({
|
|
@@ -225,23 +225,22 @@ const Tab = forwardRef((props, ref) => {
|
|
|
225
225
|
tabIndex: isActive ? 0 : tabIndex,
|
|
226
226
|
"aria-disabled": isAnyDisabled,
|
|
227
227
|
"aria-selected": isActive,
|
|
228
|
-
"aria-controls": state?.tabPanelId
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
228
|
+
"aria-controls": state?.tabPanelId,
|
|
229
|
+
children: [icon && /*#__PURE__*/jsx(Icon, {
|
|
230
|
+
icon: icon,
|
|
231
|
+
size: Size.xs,
|
|
232
|
+
...iconProps
|
|
233
|
+
}), label && /*#__PURE__*/jsx(Text, {
|
|
234
|
+
as: "span",
|
|
235
|
+
truncate: true,
|
|
236
|
+
children: label
|
|
237
|
+
})]
|
|
238
|
+
});
|
|
236
239
|
});
|
|
237
240
|
Tab.displayName = COMPONENT_NAME$1;
|
|
238
241
|
Tab.className = CLASSNAME$1;
|
|
239
242
|
Tab.defaultProps = DEFAULT_PROPS$1;
|
|
240
243
|
|
|
241
|
-
/**
|
|
242
|
-
* Defines the props of the component.
|
|
243
|
-
*/
|
|
244
|
-
|
|
245
244
|
/**
|
|
246
245
|
* Component display name.
|
|
247
246
|
*/
|
|
@@ -276,9 +275,9 @@ const TabPanel = forwardRef((props, ref) => {
|
|
|
276
275
|
} = props;
|
|
277
276
|
const state = useTabProviderContext('tabPanel', id);
|
|
278
277
|
const isActive = propIsActive || state?.isActive;
|
|
279
|
-
return /*#__PURE__*/
|
|
280
|
-
ref: ref
|
|
281
|
-
|
|
278
|
+
return /*#__PURE__*/jsx("div", {
|
|
279
|
+
ref: ref,
|
|
280
|
+
...forwardedProps,
|
|
282
281
|
id: state?.tabPanelId,
|
|
283
282
|
className: classNames(className, handleBasicClasses({
|
|
284
283
|
prefix: CLASSNAME,
|
|
@@ -286,12 +285,13 @@ const TabPanel = forwardRef((props, ref) => {
|
|
|
286
285
|
})),
|
|
287
286
|
role: "tabpanel",
|
|
288
287
|
tabIndex: isActive ? 0 : -1,
|
|
289
|
-
"aria-labelledby": state?.tabId
|
|
290
|
-
|
|
288
|
+
"aria-labelledby": state?.tabId,
|
|
289
|
+
children: (!state?.isLazy || isActive) && children
|
|
290
|
+
});
|
|
291
291
|
});
|
|
292
292
|
TabPanel.displayName = COMPONENT_NAME;
|
|
293
293
|
TabPanel.className = CLASSNAME;
|
|
294
294
|
TabPanel.defaultProps = DEFAULT_PROPS;
|
|
295
295
|
|
|
296
296
|
export { Tab, TabList, TabListLayout, TabPanel, TabProvider };
|
|
297
|
-
//# sourceMappingURL=
|
|
297
|
+
//# sourceMappingURL=65f91970.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"2368cb68.js","sources":["../../src/components/tabs/TabProvider.tsx","../../src/components/tabs/TabList.tsx","../../src/components/tabs/Tab.tsx","../../src/components/tabs/TabPanel.tsx"],"sourcesContent":["import ReactDOM from 'react-dom';\nimport { ReactNode, useEffect, useReducer } from 'react';\nimport { INIT_STATE, TabProviderContext, reducer } from './state';\n\nexport interface TabProviderProps {\n /** Active tab index. */\n activeTabIndex?: number;\n /** Tab provider children. */\n children: ReactNode;\n /** Tab panel children should not render if the tab panel is hidden. */\n isLazy?: boolean;\n /** Activate tabs on focus. */\n shouldActivateOnFocus?: boolean;\n\n /** Tab change callback. */\n onChange?(index: number): void;\n}\n\nconst DEFAULT_PROPS: Partial<TabProviderProps> = {\n isLazy: INIT_STATE.isLazy,\n shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus,\n};\n\n/**\n * This component provides a context in which tabs can be defined and linked to their tab panel.\n *\n * It does not produce any markup so you can wrap it around any React elements and then split the TabList and TabPanel\n * components in the react tree.\n *\n * @param props React component props.\n * @return React element.\n */\nexport const TabProvider: React.FC<TabProviderProps> = (props) => {\n const { children, onChange, ...propState } = props;\n const [state, dispatch] = useReducer(reducer, INIT_STATE);\n\n // On prop state change => dispatch update.\n useEffect(\n () => {\n dispatch({ type: 'update', payload: { ...DEFAULT_PROPS, ...propState } });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [dispatch, ...Object.values(propState)],\n );\n\n // On active tab index state change => send update to the onChange.\n useEffect(\n () => {\n if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) {\n return;\n }\n\n // Escape rendering/useEffect context\n queueMicrotask(() => {\n // Wait for React to commit last state changes (avoid looping state update)\n ReactDOM.flushSync(() => {\n onChange(state.activeTabIndex);\n });\n });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [onChange, state.activeTabIndex],\n );\n\n return <TabProviderContext.Provider value={[state, dispatch]}>{children}</TabProviderContext.Provider>;\n};\nTabProvider.defaultProps = DEFAULT_PROPS;\n","import React, { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Alignment, Theme } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\n\nexport enum TabListLayout {\n clustered = 'clustered',\n fixed = 'fixed',\n}\n\n/**\n * Defines the props of the component.\n */\nexport interface TabListProps extends GenericProps, HasTheme {\n /** ARIA label (purpose of the set of tabs). */\n ['aria-label']: string;\n /** Tab list. */\n children: ReactNode;\n /** Layout of the tabs in the list. */\n layout?: TabListLayout;\n /** Position of the tabs in the list (requires 'clustered' layout). */\n position?: Alignment;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TabList';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tabs`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabListProps> = {\n layout: TabListLayout.fixed,\n position: Alignment.left,\n};\n\n/**\n * TabList component.\n *\n * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TabList = forwardRef<TabListProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n 'aria-label': ariaLabel,\n children,\n className,\n layout = DEFAULT_PROPS.layout,\n position = DEFAULT_PROPS.position,\n theme = defaultTheme,\n ...forwardedProps\n } = props;\n const tabListRef = React.useRef(null);\n useRovingTabIndex({\n parentRef: tabListRef,\n elementSelector: '[role=\"tab\"]',\n keepTabIndex: false,\n extraDependencies: [children],\n });\n\n return (\n <div\n ref={mergeRefs(ref, tabListRef)}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, layout, position, theme }))}\n >\n <div className={`${CLASSNAME}__links`} role=\"tablist\" aria-label={ariaLabel}>\n {children}\n </div>\n </div>\n );\n});\nTabList.displayName = COMPONENT_NAME;\nTabList.className = CLASSNAME;\nTabList.defaultProps = DEFAULT_PROPS;\n","import { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Icon, IconProps, Size, Text } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { useTabProviderContext } from './state';\n\n/**\n * Defines the props of the component.\n */\nexport interface TabProps extends GenericProps {\n /** Children are not supported. */\n children?: never;\n /** Icon (SVG path). */\n icon?: IconProps['icon'];\n /** Icon component properties. */\n iconProps?: Omit<IconProps, 'icon'>;\n /** Native id property. */\n id?: string;\n /** Whether the tab is active or not. */\n isActive?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label content. */\n label: string | ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tab';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tabs__link`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabProps> = {};\n\n/**\n * Tab component.\n *\n * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Tab = forwardRef<TabProps, HTMLButtonElement>((props, ref) => {\n const { isAnyDisabled, otherProps } = useDisableStateProps(props);\n const {\n className,\n icon,\n iconProps = {},\n id,\n isActive: propIsActive,\n label,\n onFocus,\n onKeyPress,\n tabIndex = -1,\n ...forwardedProps\n } = otherProps;\n const state = useTabProviderContext('tab', id);\n const isActive = propIsActive || state?.isActive;\n\n const changeToCurrentTab = useCallback(() => {\n if (isAnyDisabled) {\n return;\n }\n state?.changeToTab();\n }, [isAnyDisabled, state]);\n\n const handleFocus: FocusEventHandler = useCallback(\n (event) => {\n onFocus?.(event);\n if (state?.shouldActivateOnFocus) {\n changeToCurrentTab();\n }\n },\n [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus],\n );\n\n const handleKeyPress: KeyboardEventHandler = useCallback(\n (event) => {\n onKeyPress?.(event);\n if (event.key !== 'Enter' || isAnyDisabled) {\n return;\n }\n changeToCurrentTab();\n },\n [changeToCurrentTab, isAnyDisabled, onKeyPress],\n );\n\n return (\n <button\n ref={ref}\n {...forwardedProps}\n type=\"button\"\n id={state?.tabId}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, isActive, isDisabled: isAnyDisabled }),\n )}\n onClick={changeToCurrentTab}\n onKeyPress={handleKeyPress}\n onFocus={handleFocus}\n role=\"tab\"\n tabIndex={isActive ? 0 : tabIndex}\n aria-disabled={isAnyDisabled}\n aria-selected={isActive}\n aria-controls={state?.tabPanelId}\n >\n {icon && <Icon icon={icon} size={Size.xs} {...iconProps} />}\n {label && (\n <Text as=\"span\" truncate>\n {label}\n </Text>\n )}\n </button>\n );\n});\nTab.displayName = COMPONENT_NAME;\nTab.className = CLASSNAME;\nTab.defaultProps = DEFAULT_PROPS;\n","import classNames from 'classnames';\n\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTabProviderContext } from '@lumx/react/components/tabs/state';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\n\n/**\n * Defines the props of the component.\n */\nexport interface TabPanelProps extends GenericProps {\n /** Native id property */\n id?: string;\n /** Whether the tab is active or not. */\n isActive?: boolean;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TabPanel';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tab-panel`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabPanelProps> = {};\n\n/**\n * TabPanel component.\n *\n * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TabPanel = forwardRef<TabPanelProps, HTMLDivElement>((props, ref) => {\n const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;\n\n const state = useTabProviderContext('tabPanel', id);\n const isActive = propIsActive || state?.isActive;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n id={state?.tabPanelId}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}\n role=\"tabpanel\"\n tabIndex={isActive ? 0 : -1}\n aria-labelledby={state?.tabId}\n >\n {(!state?.isLazy || isActive) && children}\n </div>\n );\n});\nTabPanel.displayName = COMPONENT_NAME;\nTabPanel.className = CLASSNAME;\nTabPanel.defaultProps = DEFAULT_PROPS;\n"],"names":["DEFAULT_PROPS","isLazy","INIT_STATE","shouldActivateOnFocus","TabProvider","props","children","onChange","propState","state","dispatch","useReducer","reducer","useEffect","type","payload","Object","values","activeTabIndex","queueMicrotask","ReactDOM","flushSync","React","createElement","TabProviderContext","Provider","value","defaultProps","TabListLayout","COMPONENT_NAME","CLASSNAME","CSS_PREFIX","layout","fixed","position","Alignment","left","TabList","forwardRef","ref","defaultTheme","useTheme","Theme","light","ariaLabel","className","theme","forwardedProps","tabListRef","useRef","useRovingTabIndex","parentRef","elementSelector","keepTabIndex","extraDependencies","_extends","mergeRefs","classNames","handleBasicClasses","prefix","role","displayName","Tab","isAnyDisabled","otherProps","useDisableStateProps","icon","iconProps","id","isActive","propIsActive","label","onFocus","onKeyPress","tabIndex","useTabProviderContext","changeToCurrentTab","useCallback","changeToTab","handleFocus","event","handleKeyPress","key","tabId","isDisabled","onClick","tabPanelId","Icon","size","Size","xs","Text","as","truncate","TabPanel"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"65f91970.js","sources":["../../src/components/tabs/TabProvider.tsx","../../src/components/tabs/TabList.tsx","../../src/components/tabs/Tab.tsx","../../src/components/tabs/TabPanel.tsx"],"sourcesContent":["import ReactDOM from 'react-dom';\nimport { ReactNode, useEffect, useReducer } from 'react';\nimport { INIT_STATE, TabProviderContext, reducer } from './state';\n\nexport interface TabProviderProps {\n /** Active tab index. */\n activeTabIndex?: number;\n /** Tab provider children. */\n children: ReactNode;\n /** Tab panel children should not render if the tab panel is hidden. */\n isLazy?: boolean;\n /** Activate tabs on focus. */\n shouldActivateOnFocus?: boolean;\n\n /** Tab change callback. */\n onChange?(index: number): void;\n}\n\nconst DEFAULT_PROPS: Partial<TabProviderProps> = {\n isLazy: INIT_STATE.isLazy,\n shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus,\n};\n\n/**\n * This component provides a context in which tabs can be defined and linked to their tab panel.\n *\n * It does not produce any markup so you can wrap it around any React elements and then split the TabList and TabPanel\n * components in the react tree.\n *\n * @param props React component props.\n * @return React element.\n */\nexport const TabProvider: React.FC<TabProviderProps> = (props) => {\n const { children, onChange, ...propState } = props;\n const [state, dispatch] = useReducer(reducer, INIT_STATE);\n\n // On prop state change => dispatch update.\n useEffect(\n () => {\n dispatch({ type: 'update', payload: { ...DEFAULT_PROPS, ...propState } });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [dispatch, ...Object.values(propState)],\n );\n\n // On active tab index state change => send update to the onChange.\n useEffect(\n () => {\n if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) {\n return;\n }\n\n // Escape rendering/useEffect context\n queueMicrotask(() => {\n // Wait for React to commit last state changes (avoid looping state update)\n ReactDOM.flushSync(() => {\n onChange(state.activeTabIndex);\n });\n });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [onChange, state.activeTabIndex],\n );\n\n return <TabProviderContext.Provider value={[state, dispatch]}>{children}</TabProviderContext.Provider>;\n};\nTabProvider.defaultProps = DEFAULT_PROPS;\n","import React, { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Alignment, Theme } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\n\nexport enum TabListLayout {\n clustered = 'clustered',\n fixed = 'fixed',\n}\n\n/**\n * Defines the props of the component.\n */\nexport interface TabListProps extends GenericProps, HasTheme {\n /** ARIA label (purpose of the set of tabs). */\n ['aria-label']: string;\n /** Tab list. */\n children: ReactNode;\n /** Layout of the tabs in the list. */\n layout?: TabListLayout;\n /** Position of the tabs in the list (requires 'clustered' layout). */\n position?: Alignment;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TabList';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tabs`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabListProps> = {\n layout: TabListLayout.fixed,\n position: Alignment.left,\n};\n\n/**\n * TabList component.\n *\n * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TabList = forwardRef<TabListProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n 'aria-label': ariaLabel,\n children,\n className,\n layout = DEFAULT_PROPS.layout,\n position = DEFAULT_PROPS.position,\n theme = defaultTheme,\n ...forwardedProps\n } = props;\n const tabListRef = React.useRef(null);\n useRovingTabIndex({\n parentRef: tabListRef,\n elementSelector: '[role=\"tab\"]',\n keepTabIndex: false,\n extraDependencies: [children],\n });\n\n return (\n <div\n ref={mergeRefs(ref, tabListRef)}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, layout, position, theme }))}\n >\n <div className={`${CLASSNAME}__links`} role=\"tablist\" aria-label={ariaLabel}>\n {children}\n </div>\n </div>\n );\n});\nTabList.displayName = COMPONENT_NAME;\nTabList.className = CLASSNAME;\nTabList.defaultProps = DEFAULT_PROPS;\n","import { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Icon, IconProps, Size, Text } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { useTabProviderContext } from './state';\n\n/**\n * Defines the props of the component.\n */\nexport interface TabProps extends GenericProps {\n /** Children are not supported. */\n children?: never;\n /** Icon (SVG path). */\n icon?: IconProps['icon'];\n /** Icon component properties. */\n iconProps?: Omit<IconProps, 'icon'>;\n /** Native id property. */\n id?: string;\n /** Whether the tab is active or not. */\n isActive?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label content. */\n label: string | ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tab';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tabs__link`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabProps> = {};\n\n/**\n * Tab component.\n *\n * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Tab = forwardRef<TabProps, HTMLButtonElement>((props, ref) => {\n const { isAnyDisabled, otherProps } = useDisableStateProps(props);\n const {\n className,\n icon,\n iconProps = {},\n id,\n isActive: propIsActive,\n label,\n onFocus,\n onKeyPress,\n tabIndex = -1,\n ...forwardedProps\n } = otherProps;\n const state = useTabProviderContext('tab', id);\n const isActive = propIsActive || state?.isActive;\n\n const changeToCurrentTab = useCallback(() => {\n if (isAnyDisabled) {\n return;\n }\n state?.changeToTab();\n }, [isAnyDisabled, state]);\n\n const handleFocus: FocusEventHandler = useCallback(\n (event) => {\n onFocus?.(event);\n if (state?.shouldActivateOnFocus) {\n changeToCurrentTab();\n }\n },\n [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus],\n );\n\n const handleKeyPress: KeyboardEventHandler = useCallback(\n (event) => {\n onKeyPress?.(event);\n if (event.key !== 'Enter' || isAnyDisabled) {\n return;\n }\n changeToCurrentTab();\n },\n [changeToCurrentTab, isAnyDisabled, onKeyPress],\n );\n\n return (\n <button\n ref={ref}\n {...forwardedProps}\n type=\"button\"\n id={state?.tabId}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, isActive, isDisabled: isAnyDisabled }),\n )}\n onClick={changeToCurrentTab}\n onKeyPress={handleKeyPress}\n onFocus={handleFocus}\n role=\"tab\"\n tabIndex={isActive ? 0 : tabIndex}\n aria-disabled={isAnyDisabled}\n aria-selected={isActive}\n aria-controls={state?.tabPanelId}\n >\n {icon && <Icon icon={icon} size={Size.xs} {...iconProps} />}\n {label && (\n <Text as=\"span\" truncate>\n {label}\n </Text>\n )}\n </button>\n );\n});\nTab.displayName = COMPONENT_NAME;\nTab.className = CLASSNAME;\nTab.defaultProps = DEFAULT_PROPS;\n","import classNames from 'classnames';\n\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTabProviderContext } from '@lumx/react/components/tabs/state';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\n\n/**\n * Defines the props of the component.\n */\nexport interface TabPanelProps extends GenericProps {\n /** Native id property */\n id?: string;\n /** Whether the tab is active or not. */\n isActive?: boolean;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TabPanel';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tab-panel`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabPanelProps> = {};\n\n/**\n * TabPanel component.\n *\n * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TabPanel = forwardRef<TabPanelProps, HTMLDivElement>((props, ref) => {\n const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;\n\n const state = useTabProviderContext('tabPanel', id);\n const isActive = propIsActive || state?.isActive;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n id={state?.tabPanelId}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}\n role=\"tabpanel\"\n tabIndex={isActive ? 0 : -1}\n aria-labelledby={state?.tabId}\n >\n {(!state?.isLazy || isActive) && children}\n </div>\n );\n});\nTabPanel.displayName = COMPONENT_NAME;\nTabPanel.className = CLASSNAME;\nTabPanel.defaultProps = DEFAULT_PROPS;\n"],"names":["DEFAULT_PROPS","isLazy","INIT_STATE","shouldActivateOnFocus","TabProvider","props","children","onChange","propState","state","dispatch","useReducer","reducer","useEffect","type","payload","Object","values","activeTabIndex","queueMicrotask","ReactDOM","flushSync","_jsx","TabProviderContext","Provider","value","defaultProps","TabListLayout","COMPONENT_NAME","CLASSNAME","CSS_PREFIX","layout","fixed","position","Alignment","left","TabList","forwardRef","ref","defaultTheme","useTheme","Theme","light","ariaLabel","className","theme","forwardedProps","tabListRef","React","useRef","useRovingTabIndex","parentRef","elementSelector","keepTabIndex","extraDependencies","mergeRefs","classNames","handleBasicClasses","prefix","role","displayName","Tab","isAnyDisabled","otherProps","useDisableStateProps","icon","iconProps","id","isActive","propIsActive","label","onFocus","onKeyPress","tabIndex","useTabProviderContext","changeToCurrentTab","useCallback","changeToTab","handleFocus","event","handleKeyPress","key","_jsxs","tabId","isDisabled","onClick","tabPanelId","Icon","size","Size","xs","Text","as","truncate","TabPanel"],"mappings":"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"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { m as getRootClassName, n as forwardRef, l as classNames } from './6589b796.js';
|
|
2
|
+
import { h as handleBasicClasses } from './e2afb13f.js';
|
|
3
|
+
import { g as getTypographyClassName } from './d0dd1815.js';
|
|
4
|
+
import { r as resolveColorWithVariants } from './7b221b05.js';
|
|
5
|
+
import { w as wrapChildrenIconWithSpaces } from './37b007a4.js';
|
|
6
|
+
import { R as RawClickable } from './2c2b6a89.js';
|
|
7
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
8
|
+
import { u as useDisableStateProps } from './b8667090.js';
|
|
9
|
+
import { I as Icon } from './8ab42752.js';
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Component display name.
|
|
13
|
+
*/
|
|
14
|
+
const COMPONENT_NAME = 'Link';
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Component default class name and class prefix.
|
|
18
|
+
*/
|
|
19
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Link component.
|
|
23
|
+
*
|
|
24
|
+
* @param props Component props.
|
|
25
|
+
* @param ref Component ref.
|
|
26
|
+
* @return React element.
|
|
27
|
+
*/
|
|
28
|
+
const Link = forwardRef((props, ref) => {
|
|
29
|
+
const {
|
|
30
|
+
disabledStateProps,
|
|
31
|
+
otherProps
|
|
32
|
+
} = useDisableStateProps(props);
|
|
33
|
+
const {
|
|
34
|
+
children,
|
|
35
|
+
className,
|
|
36
|
+
color: propColor,
|
|
37
|
+
colorVariant: propColorVariant,
|
|
38
|
+
leftIcon,
|
|
39
|
+
rightIcon,
|
|
40
|
+
typography,
|
|
41
|
+
linkAs,
|
|
42
|
+
...forwardedProps
|
|
43
|
+
} = otherProps;
|
|
44
|
+
const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
|
|
45
|
+
return /*#__PURE__*/jsx(RawClickable, {
|
|
46
|
+
ref: ref,
|
|
47
|
+
as: linkAs || (forwardedProps.href ? 'a' : 'button'),
|
|
48
|
+
...forwardedProps,
|
|
49
|
+
...disabledStateProps,
|
|
50
|
+
className: classNames(className, handleBasicClasses({
|
|
51
|
+
prefix: CLASSNAME,
|
|
52
|
+
color,
|
|
53
|
+
colorVariant,
|
|
54
|
+
hasTypography: !!typography
|
|
55
|
+
}), typography && getTypographyClassName(typography)),
|
|
56
|
+
children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
|
|
57
|
+
children: [leftIcon && /*#__PURE__*/jsx(Icon, {
|
|
58
|
+
icon: leftIcon,
|
|
59
|
+
className: `${CLASSNAME}__left-icon`
|
|
60
|
+
}), children && /*#__PURE__*/jsx("span", {
|
|
61
|
+
className: `${CLASSNAME}__content`,
|
|
62
|
+
children: children
|
|
63
|
+
}), rightIcon && /*#__PURE__*/jsx(Icon, {
|
|
64
|
+
icon: rightIcon,
|
|
65
|
+
className: `${CLASSNAME}__right-icon`
|
|
66
|
+
})]
|
|
67
|
+
}))
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
Link.displayName = COMPONENT_NAME;
|
|
71
|
+
Link.className = CLASSNAME;
|
|
72
|
+
|
|
73
|
+
export { Link };
|
|
74
|
+
//# sourceMappingURL=66f691d3.js.map
|