@lumx/react 3.20.1-alpha.27 → 3.20.1-alpha.28
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/{Button-2b55a913.js → Button-5a87fee9.js} +5 -5
- package/_internal/{Button-2b55a913.js.map → Button-5a87fee9.js.map} +1 -1
- package/_internal/{ButtonRoot-823f3e9c.js → ButtonRoot-bf682215.js} +2 -2
- package/_internal/{ButtonRoot-823f3e9c.js.map → ButtonRoot-bf682215.js.map} +1 -1
- package/_internal/{Chip-e1e85810.js → Chip-8d0aae06.js} +2 -2
- package/_internal/{Chip-e1e85810.js.map → Chip-8d0aae06.js.map} +1 -1
- package/_internal/{IconButton-be160cb0.js → IconButton-351389b0.js} +5 -5
- package/_internal/{IconButton-be160cb0.js.map → IconButton-351389b0.js.map} +1 -1
- package/_internal/{ImageCaption-fcf5720c.js → ImageCaption-4109b433.js} +4 -4
- package/_internal/{ImageCaption-fcf5720c.js.map → ImageCaption-4109b433.js.map} +1 -1
- package/_internal/{List-dbf4297f.js → List-b7882a99.js} +241 -215
- package/_internal/{List-dbf4297f.js.map → List-b7882a99.js.map} +1 -1
- package/_internal/{PopoverDialog-193a0918.js → PopoverDialog-2e7b9ed5.js} +10 -10
- package/_internal/{PopoverDialog-193a0918.js.map → PopoverDialog-2e7b9ed5.js.map} +1 -1
- package/_internal/{Slides-2d267d8c.js → Slides-83646e84.js} +3 -3
- package/_internal/{Slides-2d267d8c.js.map → Slides-83646e84.js.map} +1 -1
- package/_internal/{Thumbnail-0872250e.js → Thumbnail-741501a5.js} +3 -3
- package/_internal/{Thumbnail-0872250e.js.map → Thumbnail-741501a5.js.map} +1 -1
- package/_internal/components/{alert-dialog-a6ed922b.js → alert-dialog-5df4f133.js} +6 -6
- package/_internal/components/{alert-dialog-a6ed922b.js.map → alert-dialog-5df4f133.js.map} +1 -1
- package/_internal/components/{autocomplete-c97b7698.js → autocomplete-824c779e.js} +7 -7
- package/_internal/components/{autocomplete-c97b7698.js.map → autocomplete-824c779e.js.map} +1 -1
- package/_internal/components/{avatar-d2214a61.js → avatar-69b66f01.js} +3 -3
- package/_internal/components/{avatar-d2214a61.js.map → avatar-69b66f01.js.map} +1 -1
- package/_internal/components/{badge-8390e590.js → badge-63cd3b1c.js} +2 -2
- package/_internal/components/{badge-8390e590.js.map → badge-63cd3b1c.js.map} +1 -1
- package/_internal/components/{button-b05f8f0c.js → button-eebd4e00.js} +4 -4
- package/_internal/components/{button-b05f8f0c.js.map → button-eebd4e00.js.map} +1 -1
- package/_internal/components/{checkbox-346834f8.js → checkbox-54943a02.js} +5 -5
- package/_internal/components/{checkbox-346834f8.js.map → checkbox-54943a02.js.map} +1 -1
- package/_internal/components/{chip-e3a6330f.js → chip-9ad6b318.js} +3 -3
- package/_internal/components/{chip-e3a6330f.js.map → chip-9ad6b318.js.map} +1 -1
- package/_internal/components/{comment-block-b1acc69f.js → comment-block-55a4ab3c.js} +4 -4
- package/_internal/components/{comment-block-b1acc69f.js.map → comment-block-55a4ab3c.js.map} +1 -1
- package/_internal/components/date-picker-a824a3ae.js +2 -0
- package/_internal/components/date-picker-a824a3ae.js.map +1 -0
- package/_internal/components/{dialog-785646aa.js → dialog-5e6320b8.js} +4 -4
- package/_internal/components/{dialog-785646aa.js.map → dialog-5e6320b8.js.map} +1 -1
- package/_internal/components/{divider-116af6b9.js → divider-bdf11ba3.js} +2 -2
- package/_internal/components/{divider-116af6b9.js.map → divider-bdf11ba3.js.map} +1 -1
- package/_internal/components/{drag-handle-6b073866.js → drag-handle-45912fd3.js} +3 -3
- package/_internal/components/{drag-handle-6b073866.js.map → drag-handle-45912fd3.js.map} +1 -1
- package/_internal/components/{dropdown-c0c0cfe8.js → dropdown-0216211d.js} +5 -5
- package/_internal/components/{dropdown-c0c0cfe8.js.map → dropdown-0216211d.js.map} +1 -1
- package/_internal/components/{expansion-panel-1de1d1ff.js → expansion-panel-3ce73c6b.js} +4 -4
- package/_internal/components/{expansion-panel-1de1d1ff.js.map → expansion-panel-3ce73c6b.js.map} +1 -1
- package/_internal/components/{flag-7c9d3abf.js → flag-1b177f78.js} +4 -4
- package/_internal/components/{flag-7c9d3abf.js.map → flag-1b177f78.js.map} +1 -1
- package/_internal/components/{flex-box-10423fa5.js → flex-box-93b97715.js} +2 -2
- package/_internal/components/{flex-box-10423fa5.js.map → flex-box-93b97715.js.map} +1 -1
- package/_internal/components/{generic-block-b79f163a.js → generic-block-925f7c5b.js} +3 -3
- package/_internal/components/{generic-block-b79f163a.js.map → generic-block-925f7c5b.js.map} +1 -1
- package/_internal/components/{grid-6f1b5a41.js → grid-95fd1493.js} +2 -2
- package/_internal/components/{grid-6f1b5a41.js.map → grid-95fd1493.js.map} +1 -1
- package/_internal/components/{grid-column-ee504283.js → grid-column-43f28cfb.js} +2 -2
- package/_internal/components/{grid-column-ee504283.js.map → grid-column-43f28cfb.js.map} +1 -1
- package/_internal/components/{heading-d4c66a34.js → heading-45d6e78e.js} +3 -3
- package/_internal/components/{heading-d4c66a34.js.map → heading-45d6e78e.js.map} +1 -1
- package/_internal/components/icon-79195151.js +2 -0
- package/_internal/components/icon-79195151.js.map +1 -0
- package/_internal/components/{image-block-762eb669.js → image-block-aba6d2db.js} +4 -4
- package/_internal/components/{image-block-762eb669.js.map → image-block-aba6d2db.js.map} +1 -1
- package/_internal/components/{image-lightbox-10fef304.js → image-lightbox-8b8e77c2.js} +8 -8
- package/_internal/components/{image-lightbox-10fef304.js.map → image-lightbox-8b8e77c2.js.map} +1 -1
- package/_internal/components/{inline-list-e6f19a98.js → inline-list-dfb9fd34.js} +2 -2
- package/_internal/components/{inline-list-e6f19a98.js.map → inline-list-dfb9fd34.js.map} +1 -1
- package/_internal/components/{input-helper-64153099.js → input-helper-c8a0078b.js} +2 -2
- package/_internal/components/{input-helper-64153099.js.map → input-helper-c8a0078b.js.map} +1 -1
- package/_internal/components/{input-label-2feb0bb0.js → input-label-9711398b.js} +2 -2
- package/_internal/components/{input-label-2feb0bb0.js.map → input-label-9711398b.js.map} +1 -1
- package/_internal/components/{lightbox-dcc9a7a0.js → lightbox-894abe64.js} +4 -4
- package/_internal/components/{lightbox-dcc9a7a0.js.map → lightbox-894abe64.js.map} +1 -1
- package/_internal/components/{link-f9421eab.js → link-e70e64ed.js} +4 -4
- package/_internal/components/{link-f9421eab.js.map → link-e70e64ed.js.map} +1 -1
- package/_internal/components/{link-preview-5c7e3878.js → link-preview-e56f3570.js} +4 -4
- package/_internal/components/{link-preview-5c7e3878.js.map → link-preview-e56f3570.js.map} +1 -1
- package/_internal/components/{list-f29e54b7.js → list-59b7ce56.js} +3 -3
- package/_internal/components/{list-f29e54b7.js.map → list-59b7ce56.js.map} +1 -1
- package/_internal/components/{message-aa3e3f76.js → message-a255dfd3.js} +4 -4
- package/_internal/components/{message-aa3e3f76.js.map → message-a255dfd3.js.map} +1 -1
- package/_internal/components/{mosaic-b4b35fa7.js → mosaic-192f2270.js} +4 -4
- package/_internal/components/mosaic-192f2270.js.map +1 -0
- package/_internal/components/{navigation-8357dbe6.js → navigation-dfe8aac0.js} +7 -7
- package/_internal/components/{navigation-8357dbe6.js.map → navigation-dfe8aac0.js.map} +1 -1
- package/_internal/components/{notification-ec4cf95f.js → notification-10f289b5.js} +4 -4
- package/_internal/components/{notification-ec4cf95f.js.map → notification-10f289b5.js.map} +1 -1
- package/_internal/components/popover-6c7f745b.js +3 -0
- package/_internal/components/popover-6c7f745b.js.map +1 -0
- package/_internal/components/{post-block-bb3d3cbf.js → post-block-f7dcc6e9.js} +4 -4
- package/_internal/components/{post-block-bb3d3cbf.js.map → post-block-f7dcc6e9.js.map} +1 -1
- package/_internal/components/{progress-f39c3fa2.js → progress-7a05fb0c.js} +2 -2
- package/_internal/components/{progress-f39c3fa2.js.map → progress-7a05fb0c.js.map} +1 -1
- package/_internal/components/{progress-tracker-997931ac.js → progress-tracker-48876add.js} +5 -5
- package/_internal/components/{progress-tracker-997931ac.js.map → progress-tracker-48876add.js.map} +1 -1
- package/_internal/components/{radio-button-559a4863.js → radio-button-07cf45e9.js} +4 -4
- package/_internal/components/{radio-button-559a4863.js.map → radio-button-07cf45e9.js.map} +1 -1
- package/_internal/components/{select-8295a416.js → select-8b54a444.js} +9 -9
- package/_internal/components/{select-8295a416.js.map → select-8b54a444.js.map} +1 -1
- package/_internal/components/{side-navigation-40ee8bda.js → side-navigation-7eeed3b4.js} +4 -4
- package/_internal/components/{side-navigation-40ee8bda.js.map → side-navigation-7eeed3b4.js.map} +1 -1
- package/_internal/components/{skeleton-c66516ee.js → skeleton-a4e84085.js} +2 -2
- package/_internal/components/{skeleton-c66516ee.js.map → skeleton-a4e84085.js.map} +1 -1
- package/_internal/components/{slider-efbfbc45.js → slider-5d64b470.js} +4 -4
- package/_internal/components/{slider-efbfbc45.js.map → slider-5d64b470.js.map} +1 -1
- package/_internal/components/{slideshow-c5faf531.js → slideshow-bce65cf6.js} +4 -4
- package/_internal/components/{slideshow-c5faf531.js.map → slideshow-bce65cf6.js.map} +1 -1
- package/_internal/components/{switch-a26a5a72.js → switch-7ae55d89.js} +4 -4
- package/_internal/components/{switch-a26a5a72.js.map → switch-7ae55d89.js.map} +1 -1
- package/_internal/components/{table-c43ec4a5.js → table-5bdf4aec.js} +3 -3
- package/_internal/components/{table-c43ec4a5.js.map → table-5bdf4aec.js.map} +1 -1
- package/_internal/components/{tabs-4037fe57.js → tabs-2ad54592.js} +4 -4
- package/_internal/components/{tabs-4037fe57.js.map → tabs-2ad54592.js.map} +1 -1
- package/_internal/components/text-09c81111.js +2 -0
- package/_internal/components/text-09c81111.js.map +1 -0
- package/_internal/components/{text-field-82adaeb4.js → text-field-3e1030f0.js} +6 -6
- package/_internal/components/{text-field-82adaeb4.js.map → text-field-3e1030f0.js.map} +1 -1
- package/_internal/components/{thumbnail-f1784929.js → thumbnail-1c5828b9.js} +2 -2
- package/_internal/components/{thumbnail-f1784929.js.map → thumbnail-1c5828b9.js.map} +1 -1
- package/_internal/components/{toolbar-a43533a2.js → toolbar-0d14efb7.js} +2 -2
- package/_internal/components/{toolbar-a43533a2.js.map → toolbar-0d14efb7.js.map} +1 -1
- package/_internal/components/{tooltip-aa48ddda.js → tooltip-31181a24.js} +3 -3
- package/_internal/components/{tooltip-aa48ddda.js.map → tooltip-31181a24.js.map} +1 -1
- package/_internal/components/{uploader-7bc3adaa.js → uploader-845b2412.js} +3 -3
- package/_internal/components/{uploader-7bc3adaa.js.map → uploader-845b2412.js.map} +1 -1
- package/_internal/components/{user-block-fc03f01a.js → user-block-91c30797.js} +4 -4
- package/_internal/components/{user-block-fc03f01a.js.map → user-block-91c30797.js.map} +1 -1
- package/_internal/{constants-b9e57936.js → constants-9b714e31.js} +145 -133
- package/_internal/{constants-b9e57936.js.map → constants-9b714e31.js.map} +1 -1
- package/_internal/forwardRef-d0e90329.js +82 -0
- package/_internal/{forwardRef-15f62847.js.map → forwardRef-d0e90329.js.map} +1 -1
- package/_internal/{index-8e7fecb5.js → index-68e1b0af.js} +4 -4
- package/_internal/{index-8e7fecb5.js.map → index-68e1b0af.js.map} +1 -1
- package/_internal/{index-192f8ada.js → index-745f94ee.js} +2 -2
- package/_internal/{index-192f8ada.js.map → index-745f94ee.js.map} +1 -1
- package/_internal/{index-b06353f2.js → index-ab520e78.js} +3 -3
- package/_internal/{index-b06353f2.js.map → index-ab520e78.js.map} +1 -1
- package/_internal/{wrapChildrenIconWithSpaces-f1e91251.js → wrapChildrenIconWithSpaces-e6038f72.js} +2 -2
- package/_internal/{wrapChildrenIconWithSpaces-f1e91251.js.map → wrapChildrenIconWithSpaces-e6038f72.js.map} +1 -1
- package/index.js +61 -61
- package/package.json +7 -13
- package/_internal/components/date-picker-582c4925.js +0 -2
- package/_internal/components/date-picker-582c4925.js.map +0 -1
- package/_internal/components/icon-7c79ab42.js +0 -2
- package/_internal/components/icon-7c79ab42.js.map +0 -1
- package/_internal/components/mosaic-b4b35fa7.js.map +0 -1
- package/_internal/components/popover-a674dd8d.js +0 -3
- package/_internal/components/popover-a674dd8d.js.map +0 -1
- package/_internal/components/text-851c62f8.js +0 -2
- package/_internal/components/text-851c62f8.js.map +0 -1
- package/_internal/forwardRef-15f62847.js +0 -70
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnail-0872250e.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 = /*#__PURE__*/ '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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"}
|
|
1
|
+
{"version":3,"file":"Thumbnail-741501a5.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 = /*#__PURE__*/ '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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"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
3
3
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
4
4
|
import { u as useId } from '../useId-3a1facc0.js';
|
|
5
5
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
6
6
|
import { m as mdiAlert, a as mdiInformation } from '../information-49bbeed3.js';
|
|
7
7
|
import { m as mdiCheckCircle } from '../check-circle-de24f857.js';
|
|
8
|
-
import { m as mdiAlertCircle, I as Icon } from '../index-
|
|
9
|
-
import { Dialog } from './dialog-
|
|
10
|
-
import { Toolbar } from './toolbar-
|
|
11
|
-
import { a as Button } from '../Button-
|
|
8
|
+
import { m as mdiAlertCircle, I as Icon } from '../index-745f94ee.js';
|
|
9
|
+
import { Dialog } from './dialog-5e6320b8.js';
|
|
10
|
+
import { Toolbar } from './toolbar-0d14efb7.js';
|
|
11
|
+
import { a as Button } from '../Button-5a87fee9.js';
|
|
12
12
|
import { Kind, ColorPalette, Size, Emphasis } from '@lumx/core/js/constants';
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -160,4 +160,4 @@ AlertDialog.className = CLASSNAME;
|
|
|
160
160
|
AlertDialog.defaultProps = DEFAULT_PROPS;
|
|
161
161
|
|
|
162
162
|
export { AlertDialog };
|
|
163
|
-
//# sourceMappingURL=alert-dialog-
|
|
163
|
+
//# sourceMappingURL=alert-dialog-5df4f133.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog-a6ed922b.js","sources":["../../../src/components/alert-dialog/AlertDialog.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n DialogProps,\n Dialog,\n Button,\n Emphasis,\n ColorPalette,\n Icon,\n Size,\n Kind,\n Toolbar,\n ButtonProps,\n} from '@lumx/react';\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {\n /** Message variant. */\n kind?: Kind;\n /** Dialog title. */\n title?: string;\n /** Props forwarded to the confirm button */\n confirmProps: ButtonProps & {\n onClick(): void;\n label: string;\n };\n /**\n * Props forwarded to the cancel button.\n * Will not render a cancel button if undefined.\n */\n cancelProps?: ButtonProps & {\n onClick(): void;\n label: string;\n };\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },\n [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AlertDialog';\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<DialogProps> = {\n size: Size.tiny,\n kind: Kind.info,\n};\n\n/**\n * AlertDialog component.\n *\n * An alert dialog is a modal dialog that interrupts the user's workflow to\n * communicate an important message and acquire a response.\n *\n * It should not have a complex content.\n * Children of this component should only be strings, paragraphs or links.\n */\nexport const AlertDialog = forwardRef<AlertDialogProps, HTMLDivElement>((props, ref) => {\n const {\n id,\n title,\n className,\n cancelProps,\n confirmProps,\n kind = DEFAULT_PROPS.kind,\n size = DEFAULT_PROPS.size,\n dialogProps,\n children,\n ...forwardedProps\n } = props;\n\n const cancelButtonRef = React.useRef(null);\n const confirmationButtonRef = React.useRef(null);\n const { color, icon } = CONFIG[kind as Kind] || {};\n\n // Define a unique ID to target title and description for aria attributes.\n const generatedId = useId();\n const uniqueId = id || generatedId;\n const titleId = `${uniqueId}-title`;\n const descriptionId = `${uniqueId}-description`;\n\n // If content is a string, set in a paragraph.\n const DescriptionElement = typeof children === 'string' ? 'p' : 'div';\n\n const { label: confirmLabel, onClick: confirmOnClick, ...forwardedConfirmProps } = confirmProps;\n const { label: cancelLabel, onClick: cancelOnClick, ...forwardedCancelProps } = cancelProps || {};\n\n return (\n <Dialog\n ref={ref}\n focusElement={cancelProps ? cancelButtonRef : confirmationButtonRef}\n size={size}\n dialogProps={{\n id: uniqueId,\n role: 'alertdialog',\n 'aria-labelledby': titleId,\n 'aria-describedby': descriptionId,\n ...dialogProps,\n }}\n className={classNames(\n className,\n handleBasicClasses({\n kind,\n prefix: CLASSNAME,\n }),\n )}\n {...forwardedProps}\n >\n <header>\n <Toolbar\n className=\"lumx-spacing-margin-horizontal\"\n before={<Icon icon={icon} size={Size.s} color={color} />}\n label={\n <h2 id={titleId} className=\"lumx-typography-title\">\n {title}\n </h2>\n }\n />\n </header>\n\n {children && (\n <DescriptionElement\n id={descriptionId}\n className=\"lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge\"\n >\n {children}\n </DescriptionElement>\n )}\n\n <footer>\n <Toolbar\n className=\"lumx-spacing-margin-horizontal\"\n after={\n <>\n {cancelProps && (\n <Button\n {...forwardedCancelProps}\n ref={cancelButtonRef}\n emphasis={Emphasis.medium}\n onClick={cancelOnClick}\n >\n {cancelLabel}\n </Button>\n )}\n <Button\n {...forwardedConfirmProps}\n ref={confirmationButtonRef}\n color={color}\n className=\"lumx-spacing-margin-left-regular\"\n onClick={confirmOnClick}\n >\n {confirmLabel}\n </Button>\n </>\n }\n />\n </footer>\n </Dialog>\n );\n});\n\nAlertDialog.displayName = COMPONENT_NAME;\nAlertDialog.className = CLASSNAME;\nAlertDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","tiny","kind","AlertDialog","forwardRef","props","ref","id","title","className","cancelProps","confirmProps","dialogProps","children","forwardedProps","cancelButtonRef","React","useRef","confirmationButtonRef","generatedId","useId","uniqueId","titleId","descriptionId","DescriptionElement","label","confirmLabel","onClick","confirmOnClick","forwardedConfirmProps","cancelLabel","cancelOnClick","forwardedCancelProps","_jsxs","Dialog","focusElement","role","classNames","handleBasicClasses","prefix","_jsx","Toolbar","before","Icon","s","after","_Fragment","Button","emphasis","Emphasis","medium","displayName","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"alert-dialog-5df4f133.js","sources":["../../../src/components/alert-dialog/AlertDialog.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n DialogProps,\n Dialog,\n Button,\n Emphasis,\n ColorPalette,\n Icon,\n Size,\n Kind,\n Toolbar,\n ButtonProps,\n} from '@lumx/react';\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {\n /** Message variant. */\n kind?: Kind;\n /** Dialog title. */\n title?: string;\n /** Props forwarded to the confirm button */\n confirmProps: ButtonProps & {\n onClick(): void;\n label: string;\n };\n /**\n * Props forwarded to the cancel button.\n * Will not render a cancel button if undefined.\n */\n cancelProps?: ButtonProps & {\n onClick(): void;\n label: string;\n };\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },\n [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AlertDialog';\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<DialogProps> = {\n size: Size.tiny,\n kind: Kind.info,\n};\n\n/**\n * AlertDialog component.\n *\n * An alert dialog is a modal dialog that interrupts the user's workflow to\n * communicate an important message and acquire a response.\n *\n * It should not have a complex content.\n * Children of this component should only be strings, paragraphs or links.\n */\nexport const AlertDialog = forwardRef<AlertDialogProps, HTMLDivElement>((props, ref) => {\n const {\n id,\n title,\n className,\n cancelProps,\n confirmProps,\n kind = DEFAULT_PROPS.kind,\n size = DEFAULT_PROPS.size,\n dialogProps,\n children,\n ...forwardedProps\n } = props;\n\n const cancelButtonRef = React.useRef(null);\n const confirmationButtonRef = React.useRef(null);\n const { color, icon } = CONFIG[kind as Kind] || {};\n\n // Define a unique ID to target title and description for aria attributes.\n const generatedId = useId();\n const uniqueId = id || generatedId;\n const titleId = `${uniqueId}-title`;\n const descriptionId = `${uniqueId}-description`;\n\n // If content is a string, set in a paragraph.\n const DescriptionElement = typeof children === 'string' ? 'p' : 'div';\n\n const { label: confirmLabel, onClick: confirmOnClick, ...forwardedConfirmProps } = confirmProps;\n const { label: cancelLabel, onClick: cancelOnClick, ...forwardedCancelProps } = cancelProps || {};\n\n return (\n <Dialog\n ref={ref}\n focusElement={cancelProps ? cancelButtonRef : confirmationButtonRef}\n size={size}\n dialogProps={{\n id: uniqueId,\n role: 'alertdialog',\n 'aria-labelledby': titleId,\n 'aria-describedby': descriptionId,\n ...dialogProps,\n }}\n className={classNames(\n className,\n handleBasicClasses({\n kind,\n prefix: CLASSNAME,\n }),\n )}\n {...forwardedProps}\n >\n <header>\n <Toolbar\n className=\"lumx-spacing-margin-horizontal\"\n before={<Icon icon={icon} size={Size.s} color={color} />}\n label={\n <h2 id={titleId} className=\"lumx-typography-title\">\n {title}\n </h2>\n }\n />\n </header>\n\n {children && (\n <DescriptionElement\n id={descriptionId}\n className=\"lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge\"\n >\n {children}\n </DescriptionElement>\n )}\n\n <footer>\n <Toolbar\n className=\"lumx-spacing-margin-horizontal\"\n after={\n <>\n {cancelProps && (\n <Button\n {...forwardedCancelProps}\n ref={cancelButtonRef}\n emphasis={Emphasis.medium}\n onClick={cancelOnClick}\n >\n {cancelLabel}\n </Button>\n )}\n <Button\n {...forwardedConfirmProps}\n ref={confirmationButtonRef}\n color={color}\n className=\"lumx-spacing-margin-left-regular\"\n onClick={confirmOnClick}\n >\n {confirmLabel}\n </Button>\n </>\n }\n />\n </footer>\n </Dialog>\n );\n});\n\nAlertDialog.displayName = COMPONENT_NAME;\nAlertDialog.className = CLASSNAME;\nAlertDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","tiny","kind","AlertDialog","forwardRef","props","ref","id","title","className","cancelProps","confirmProps","dialogProps","children","forwardedProps","cancelButtonRef","React","useRef","confirmationButtonRef","generatedId","useId","uniqueId","titleId","descriptionId","DescriptionElement","label","confirmLabel","onClick","confirmOnClick","forwardedConfirmProps","cancelLabel","cancelOnClick","forwardedCancelProps","_jsxs","Dialog","focusElement","role","classNames","handleBasicClasses","prefix","_jsx","Toolbar","before","Icon","s","after","_Fragment","Button","emphasis","Emphasis","medium","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { useRef } from 'react';
|
|
2
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
3
3
|
import { getRootClassName } from '@lumx/core/js/utils/className';
|
|
4
|
-
import { u as useFocus } from '../index-
|
|
4
|
+
import { u as useFocus } from '../index-68e1b0af.js';
|
|
5
5
|
import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
6
6
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
7
7
|
import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
|
|
8
8
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
9
|
-
import { TextField } from './text-field-
|
|
10
|
-
import { Dropdown } from './dropdown-
|
|
11
|
-
import { C as Chip } from '../Chip-
|
|
9
|
+
import { TextField } from './text-field-3e1030f0.js';
|
|
10
|
+
import { Dropdown } from './dropdown-0216211d.js';
|
|
11
|
+
import { C as Chip } from '../Chip-8d0aae06.js';
|
|
12
12
|
import { m as mdiClose } from '../close-eaf6c45a.js';
|
|
13
|
-
import { I as Icon } from '../index-
|
|
13
|
+
import { I as Icon } from '../index-745f94ee.js';
|
|
14
14
|
import { Size } from '@lumx/core/js/constants';
|
|
15
15
|
|
|
16
16
|
/**
|
|
@@ -258,4 +258,4 @@ AutocompleteMultiple.className = CLASSNAME;
|
|
|
258
258
|
AutocompleteMultiple.defaultProps = DEFAULT_PROPS;
|
|
259
259
|
|
|
260
260
|
export { Autocomplete, AutocompleteMultiple };
|
|
261
|
-
//# sourceMappingURL=autocomplete-
|
|
261
|
+
//# sourceMappingURL=autocomplete-824c779e.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete-c97b7698.js","sources":["../../../src/components/autocomplete/Autocomplete.tsx","../../../src/components/autocomplete/AutocompleteMultiple.tsx"],"sourcesContent":["import { ReactNode, SyntheticEvent, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteProps extends GenericProps, HasTheme {\n /**\n * Whether the suggestions list should display anchored to the input or to the wrapper.\n * @see {@link DropdownProps#anchorToInput}\n */\n anchorToInput?: boolean;\n /**\n * Props to pass to the clear button (minus those already set by the TextField props).\n * If not specified, the button won't be displayed.\n * @see {@link TextFieldProps#clearButtonProps}\n */\n clearButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n /**\n * Reference to the <input> or <textarea> element.\n * @see {@link TextFieldProps#inputRef}\n */\n inputRef?: TextFieldProps['inputRef'];\n /**\n * The offset that will be applied to the Dropdown position.\n * @see {@link DropdownProps#offset}\n */\n offset?: Offset;\n /**\n * The preferred Dropdown location against the anchor element.\n * @see {@link DropdownProps#placement}\n */\n placement?: Placement;\n /**\n * Manage dropdown width:\n * - `maxWidth`: dropdown not bigger than anchor\n * - `minWidth` or `true`: dropdown not smaller than anchor\n * - `width`: dropdown equal to the anchor.\n * @see {@link DropdownProps#fitToAnchorWidth}\n */\n fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];\n /**\n * The error related to the component.\n * @see {@link TextFieldProps#error}\n */\n error?: string | ReactNode;\n /**\n * Whether the text field is displayed with error style or not.\n * @see {@link TextFieldProps#hasError}\n */\n hasError?: boolean;\n /**\n * Whether the text box should be focused upon closing the suggestions or not.\n */\n shouldFocusOnClose?: boolean;\n /**\n * The helper message of the text field.\n * @see {@link TextFieldProps#helper}\n */\n helper?: string;\n /**\n * The icon of the text field (SVG path).\n * @see {@link TextFieldProps#icon}\n */\n icon?: string;\n /**\n * Whether the component is disabled or not.\n * @see {@link TextFieldProps#isDisabled}\n */\n isDisabled?: boolean;\n /**\n * Whether the component is required or not.\n * @see {@link TextFieldProps#isRequired}\n */\n isRequired?: boolean;\n /**\n * Whether the text field is displayed with valid style or not.\n * @see {@link TextFieldProps#isValid}\n */\n isValid?: boolean;\n /**\n * The label of the text field displayed in a label tag.\n * @see {@link TextFieldProps#label}\n */\n label?: string;\n /**\n * The placeholder message of the text field.\n * @see {@link TextFieldProps#placeholder}\n */\n placeholder?: string;\n /** List of suggestions to display during autocomplete. */\n children: React.ReactNode;\n /**\n * The list of chips to be displayed before the text field input.\n */\n chips?: React.ReactNode;\n /**\n * The value of the text field.\n * @see {@link TextFieldProps#value}\n */\n value: string;\n /**\n * Whether the suggestions from the autocomplete should be displayed or not.\n * @see {@link DropdownProps#isOpen}\n */\n isOpen: boolean;\n /**\n * The native input name property.\n * @see {@link TextFieldProps#name}\n */\n name?: string;\n /**\n * Whether a click in the Autocomplete dropdown would close it or not.\n * @see {@link DropdownProps#closeOnClick}\n */\n closeOnClick?: boolean;\n /**\n * Whether a click anywhere out of the Autocomplete would close it or not.\n * @see {@link DropdownProps#closeOnClickAway}\n */\n closeOnClickAway?: boolean;\n /**\n * Whether an escape key press would close the Autocomplete or not.\n * @see {@link DropdownProps#closeOnEscape}\n */\n closeOnEscape?: boolean;\n /**\n * Whether the focus should go back on the anchor when dropdown closes and focus is within.\n * @see {@link DropdownProps#focusAnchorOnClose}\n */\n focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];\n /**\n * The function called on blur.\n * @see {@link TextFieldProps#onBlur}\n */\n onBlur?(event: React.FocusEvent): void;\n /**\n * On change callback.\n * @see {@link TextFieldProps#onChange}\n */\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n /**\n * The function called on close.\n * @see {@link DropdownProps#onClose}\n */\n onClose?(): void;\n /**\n * The function called on focus.\n * @see {@link TextFieldProps#onFocus}\n */\n onFocus?(event: React.FocusEvent): void;\n /**\n * The function called when the bottom of the dropdown is reached.\n * @see {@link DropdownProps#onInfiniteScroll}\n */\n onInfiniteScroll?(): void;\n /**\n * Props forwarded to the underlying TextField component.\n * Only the props not managed by the Autocomplete can be set.\n * @see {@link TextFieldProps}\n */\n textFieldProps?: Partial<TextFieldProps>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Autocomplete';\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<AutocompleteProps> = {\n anchorToInput: false,\n closeOnClick: false,\n closeOnClickAway: true,\n closeOnEscape: true,\n shouldFocusOnClose: false,\n};\n\n/**\n * Autocomplete component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput = DEFAULT_PROPS.anchorToInput,\n children,\n chips,\n className,\n closeOnClick = DEFAULT_PROPS.closeOnClick,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n error,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClose,\n onFocus,\n onInfiniteScroll,\n placeholder,\n placement,\n shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose,\n theme = defaultTheme,\n value,\n textFieldProps = {},\n focusAnchorOnClose,\n ...forwardedProps\n } = otherProps;\n const inputAnchorRef = useRef<HTMLElement>(null);\n const textFieldRef = useRef(null);\n useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n <TextField\n {...textFieldProps}\n chips={chips}\n error={error}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}\n clearButtonProps={clearButtonProps}\n {...disabledStateProps}\n isRequired={isRequired}\n isValid={isValid}\n label={label}\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n placeholder={placeholder}\n textFieldRef={textFieldRef}\n theme={theme}\n value={value}\n />\n <Dropdown\n anchorRef={anchorToInput ? inputAnchorRef : textFieldRef}\n closeOnClick={closeOnClick}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n focusAnchorOnClose={focusAnchorOnClose}\n fitToAnchorWidth={fitToAnchorWidth}\n isOpen={isOpen}\n offset={offset}\n onClose={onClose}\n onInfiniteScroll={onInfiniteScroll}\n placement={placement}\n shouldFocusOnOpen={false}\n theme={theme}\n >\n {children}\n </Dropdown>\n </div>\n );\n});\nAutocomplete.displayName = COMPONENT_NAME;\nAutocomplete.className = CLASSNAME;\nAutocomplete.defaultProps = DEFAULT_PROPS;\n","import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\n\nimport { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteMultipleProps extends AutocompleteProps {\n /** Selected values. */\n values: any[];\n /** Alignment of the chips in the autocomplete. */\n chipsAlignment?: HorizontalAlignment;\n /** Selected value render function. Default: Renders the value inside of a Chip. */\n selectedChipRender(\n choice: any,\n index: number,\n onClear?: (event: React.MouseEvent, choice: any) => void,\n isDisabled?: boolean,\n ): ReactNode | string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AutocompleteMultiple';\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<AutocompleteMultipleProps> = {\n closeOnClickAway: true,\n closeOnEscape: true,\n selectedChipRender(choice, index, onClear, isDisabled) {\n const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);\n return (\n <Chip\n key={index}\n after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}\n isDisabled={isDisabled}\n size={Size.s}\n onAfterClick={onClick}\n onClick={onClick}\n >\n {choice}\n </Chip>\n );\n },\n values: [],\n};\n\n/**\n * AutocompleteMultiple component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput,\n children,\n // `chipsAlignment` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n chipsAlignment,\n className,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClear,\n onClose,\n onFocus,\n onInfiniteScroll,\n onKeyDown,\n placeholder,\n placement,\n selectedChipRender = DEFAULT_PROPS.selectedChipRender,\n shouldFocusOnClose,\n theme = defaultTheme,\n type,\n value,\n values = DEFAULT_PROPS.values,\n ...forwardedProps\n } = otherProps;\n\n return (\n <Autocomplete\n ref={ref}\n {...forwardedProps}\n anchorToInput={anchorToInput}\n className={classNames(className, CLASSNAME)}\n name={name}\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n shouldFocusOnClose={shouldFocusOnClose}\n onFocus={onFocus}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={inputRef}\n chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}\n {...disabledStateProps}\n isRequired={isRequired}\n clearButtonProps={clearButtonProps}\n isValid={isValid}\n label={label}\n placeholder={placeholder}\n theme={theme}\n type={type}\n isOpen={isOpen}\n closeOnClick={false}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n onClose={onClose}\n offset={offset}\n placement={placement}\n fitToAnchorWidth={fitToAnchorWidth}\n onInfiniteScroll={onInfiniteScroll}\n >\n {children}\n </Autocomplete>\n );\n});\nAutocompleteMultiple.displayName = COMPONENT_NAME;\nAutocompleteMultiple.className = CLASSNAME;\nAutocompleteMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","anchorToInput","closeOnClick","closeOnClickAway","closeOnEscape","shouldFocusOnClose","Autocomplete","forwardRef","props","ref","defaultTheme","useTheme","disabledStateProps","otherProps","useDisableStateProps","children","chips","className","error","fitToAnchorWidth","hasError","helper","icon","inputRef","clearButtonProps","isRequired","isOpen","isValid","label","name","offset","onBlur","onChange","onClose","onFocus","onInfiniteScroll","placeholder","placement","theme","value","textFieldProps","focusAnchorOnClose","forwardedProps","inputAnchorRef","useRef","textFieldRef","useFocus","current","_jsxs","classNames","_jsx","TextField","mergeRefs","Dropdown","anchorRef","shouldFocusOnOpen","displayName","defaultProps","selectedChipRender","choice","index","onClear","isDisabled","onClick","event","Chip","after","Icon","mdiClose","size","Size","xxs","s","onAfterClick","values","AutocompleteMultiple","chipsAlignment","onKeyDown","type","map","chip"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"autocomplete-824c779e.js","sources":["../../../src/components/autocomplete/Autocomplete.tsx","../../../src/components/autocomplete/AutocompleteMultiple.tsx"],"sourcesContent":["import { ReactNode, SyntheticEvent, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteProps extends GenericProps, HasTheme {\n /**\n * Whether the suggestions list should display anchored to the input or to the wrapper.\n * @see {@link DropdownProps#anchorToInput}\n */\n anchorToInput?: boolean;\n /**\n * Props to pass to the clear button (minus those already set by the TextField props).\n * If not specified, the button won't be displayed.\n * @see {@link TextFieldProps#clearButtonProps}\n */\n clearButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n /**\n * Reference to the <input> or <textarea> element.\n * @see {@link TextFieldProps#inputRef}\n */\n inputRef?: TextFieldProps['inputRef'];\n /**\n * The offset that will be applied to the Dropdown position.\n * @see {@link DropdownProps#offset}\n */\n offset?: Offset;\n /**\n * The preferred Dropdown location against the anchor element.\n * @see {@link DropdownProps#placement}\n */\n placement?: Placement;\n /**\n * Manage dropdown width:\n * - `maxWidth`: dropdown not bigger than anchor\n * - `minWidth` or `true`: dropdown not smaller than anchor\n * - `width`: dropdown equal to the anchor.\n * @see {@link DropdownProps#fitToAnchorWidth}\n */\n fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];\n /**\n * The error related to the component.\n * @see {@link TextFieldProps#error}\n */\n error?: string | ReactNode;\n /**\n * Whether the text field is displayed with error style or not.\n * @see {@link TextFieldProps#hasError}\n */\n hasError?: boolean;\n /**\n * Whether the text box should be focused upon closing the suggestions or not.\n */\n shouldFocusOnClose?: boolean;\n /**\n * The helper message of the text field.\n * @see {@link TextFieldProps#helper}\n */\n helper?: string;\n /**\n * The icon of the text field (SVG path).\n * @see {@link TextFieldProps#icon}\n */\n icon?: string;\n /**\n * Whether the component is disabled or not.\n * @see {@link TextFieldProps#isDisabled}\n */\n isDisabled?: boolean;\n /**\n * Whether the component is required or not.\n * @see {@link TextFieldProps#isRequired}\n */\n isRequired?: boolean;\n /**\n * Whether the text field is displayed with valid style or not.\n * @see {@link TextFieldProps#isValid}\n */\n isValid?: boolean;\n /**\n * The label of the text field displayed in a label tag.\n * @see {@link TextFieldProps#label}\n */\n label?: string;\n /**\n * The placeholder message of the text field.\n * @see {@link TextFieldProps#placeholder}\n */\n placeholder?: string;\n /** List of suggestions to display during autocomplete. */\n children: React.ReactNode;\n /**\n * The list of chips to be displayed before the text field input.\n */\n chips?: React.ReactNode;\n /**\n * The value of the text field.\n * @see {@link TextFieldProps#value}\n */\n value: string;\n /**\n * Whether the suggestions from the autocomplete should be displayed or not.\n * @see {@link DropdownProps#isOpen}\n */\n isOpen: boolean;\n /**\n * The native input name property.\n * @see {@link TextFieldProps#name}\n */\n name?: string;\n /**\n * Whether a click in the Autocomplete dropdown would close it or not.\n * @see {@link DropdownProps#closeOnClick}\n */\n closeOnClick?: boolean;\n /**\n * Whether a click anywhere out of the Autocomplete would close it or not.\n * @see {@link DropdownProps#closeOnClickAway}\n */\n closeOnClickAway?: boolean;\n /**\n * Whether an escape key press would close the Autocomplete or not.\n * @see {@link DropdownProps#closeOnEscape}\n */\n closeOnEscape?: boolean;\n /**\n * Whether the focus should go back on the anchor when dropdown closes and focus is within.\n * @see {@link DropdownProps#focusAnchorOnClose}\n */\n focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];\n /**\n * The function called on blur.\n * @see {@link TextFieldProps#onBlur}\n */\n onBlur?(event: React.FocusEvent): void;\n /**\n * On change callback.\n * @see {@link TextFieldProps#onChange}\n */\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n /**\n * The function called on close.\n * @see {@link DropdownProps#onClose}\n */\n onClose?(): void;\n /**\n * The function called on focus.\n * @see {@link TextFieldProps#onFocus}\n */\n onFocus?(event: React.FocusEvent): void;\n /**\n * The function called when the bottom of the dropdown is reached.\n * @see {@link DropdownProps#onInfiniteScroll}\n */\n onInfiniteScroll?(): void;\n /**\n * Props forwarded to the underlying TextField component.\n * Only the props not managed by the Autocomplete can be set.\n * @see {@link TextFieldProps}\n */\n textFieldProps?: Partial<TextFieldProps>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Autocomplete';\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<AutocompleteProps> = {\n anchorToInput: false,\n closeOnClick: false,\n closeOnClickAway: true,\n closeOnEscape: true,\n shouldFocusOnClose: false,\n};\n\n/**\n * Autocomplete component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput = DEFAULT_PROPS.anchorToInput,\n children,\n chips,\n className,\n closeOnClick = DEFAULT_PROPS.closeOnClick,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n error,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClose,\n onFocus,\n onInfiniteScroll,\n placeholder,\n placement,\n shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose,\n theme = defaultTheme,\n value,\n textFieldProps = {},\n focusAnchorOnClose,\n ...forwardedProps\n } = otherProps;\n const inputAnchorRef = useRef<HTMLElement>(null);\n const textFieldRef = useRef(null);\n useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n <TextField\n {...textFieldProps}\n chips={chips}\n error={error}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}\n clearButtonProps={clearButtonProps}\n {...disabledStateProps}\n isRequired={isRequired}\n isValid={isValid}\n label={label}\n name={name}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n placeholder={placeholder}\n textFieldRef={textFieldRef}\n theme={theme}\n value={value}\n />\n <Dropdown\n anchorRef={anchorToInput ? inputAnchorRef : textFieldRef}\n closeOnClick={closeOnClick}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n focusAnchorOnClose={focusAnchorOnClose}\n fitToAnchorWidth={fitToAnchorWidth}\n isOpen={isOpen}\n offset={offset}\n onClose={onClose}\n onInfiniteScroll={onInfiniteScroll}\n placement={placement}\n shouldFocusOnOpen={false}\n theme={theme}\n >\n {children}\n </Dropdown>\n </div>\n );\n});\nAutocomplete.displayName = COMPONENT_NAME;\nAutocomplete.className = CLASSNAME;\nAutocomplete.defaultProps = DEFAULT_PROPS;\n","import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\n\nimport { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteMultipleProps extends AutocompleteProps {\n /** Selected values. */\n values: any[];\n /** Alignment of the chips in the autocomplete. */\n chipsAlignment?: HorizontalAlignment;\n /** Selected value render function. Default: Renders the value inside of a Chip. */\n selectedChipRender(\n choice: any,\n index: number,\n onClear?: (event: React.MouseEvent, choice: any) => void,\n isDisabled?: boolean,\n ): ReactNode | string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AutocompleteMultiple';\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<AutocompleteMultipleProps> = {\n closeOnClickAway: true,\n closeOnEscape: true,\n selectedChipRender(choice, index, onClear, isDisabled) {\n const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);\n return (\n <Chip\n key={index}\n after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}\n isDisabled={isDisabled}\n size={Size.s}\n onAfterClick={onClick}\n onClick={onClick}\n >\n {choice}\n </Chip>\n );\n },\n values: [],\n};\n\n/**\n * AutocompleteMultiple component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput,\n children,\n // `chipsAlignment` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n chipsAlignment,\n className,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClear,\n onClose,\n onFocus,\n onInfiniteScroll,\n onKeyDown,\n placeholder,\n placement,\n selectedChipRender = DEFAULT_PROPS.selectedChipRender,\n shouldFocusOnClose,\n theme = defaultTheme,\n type,\n value,\n values = DEFAULT_PROPS.values,\n ...forwardedProps\n } = otherProps;\n\n return (\n <Autocomplete\n ref={ref}\n {...forwardedProps}\n anchorToInput={anchorToInput}\n className={classNames(className, CLASSNAME)}\n name={name}\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n shouldFocusOnClose={shouldFocusOnClose}\n onFocus={onFocus}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={inputRef}\n chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}\n {...disabledStateProps}\n isRequired={isRequired}\n clearButtonProps={clearButtonProps}\n isValid={isValid}\n label={label}\n placeholder={placeholder}\n theme={theme}\n type={type}\n isOpen={isOpen}\n closeOnClick={false}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n onClose={onClose}\n offset={offset}\n placement={placement}\n fitToAnchorWidth={fitToAnchorWidth}\n onInfiniteScroll={onInfiniteScroll}\n >\n {children}\n </Autocomplete>\n );\n});\nAutocompleteMultiple.displayName = COMPONENT_NAME;\nAutocompleteMultiple.className = CLASSNAME;\nAutocompleteMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","anchorToInput","closeOnClick","closeOnClickAway","closeOnEscape","shouldFocusOnClose","Autocomplete","forwardRef","props","ref","defaultTheme","useTheme","disabledStateProps","otherProps","useDisableStateProps","children","chips","className","error","fitToAnchorWidth","hasError","helper","icon","inputRef","clearButtonProps","isRequired","isOpen","isValid","label","name","offset","onBlur","onChange","onClose","onFocus","onInfiniteScroll","placeholder","placement","theme","value","textFieldProps","focusAnchorOnClose","forwardedProps","inputAnchorRef","useRef","textFieldRef","useFocus","current","_jsxs","classNames","_jsx","TextField","mergeRefs","Dropdown","anchorRef","shouldFocusOnOpen","displayName","defaultProps","selectedChipRender","choice","index","onClear","isDisabled","onClick","event","Chip","after","Icon","mdiClose","size","Size","xxs","s","onAfterClick","values","AutocompleteMultiple","chipsAlignment","onKeyDown","type","map","chip"],"mappings":";;;;;;;;;;;;;;;AAiLA;AACA;AACA;AACA,MAAMA,gBAAc,GAAG,cAAc,CAAA;;AAErC;AACA;AACA;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,eAAyC,GAAG;AAC9CC,EAAAA,aAAa,EAAE,KAAK;AACpBC,EAAAA,YAAY,EAAE,KAAK;AACnBC,EAAAA,gBAAgB,EAAE,IAAI;AACtBC,EAAAA,aAAa,EAAE,IAAI;AACnBC,EAAAA,kBAAkB,EAAE,KAAA;AACxB,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,YAAY,GAAGC,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;AACtF,EAAA,MAAMC,YAAY,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IAAEC,kBAAkB;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,oBAAoB,CAACN,KAAK,CAAC,CAAA;EACtE,MAAM;IACFP,aAAa,GAAGD,eAAa,CAACC,aAAa;IAC3Cc,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTf,YAAY,GAAGF,eAAa,CAACE,YAAY;IACzCC,gBAAgB,GAAGH,eAAa,CAACG,gBAAgB;IACjDC,aAAa,GAAGJ,eAAa,CAACI,aAAa;IAC3Cc,KAAK;IACLC,gBAAgB;IAChBC,QAAQ;IACRC,MAAM;IACNC,IAAI;IACJC,QAAQ;IACRC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,OAAO;IACPC,gBAAgB;IAChBC,WAAW;IACXC,SAAS;IACThC,kBAAkB,GAAGL,eAAa,CAACK,kBAAkB;AACrDiC,IAAAA,KAAK,GAAG5B,YAAY;IACpB6B,KAAK;IACLC,cAAc,GAAG,EAAE;IACnBC,kBAAkB;IAClB,GAAGC,cAAAA;AACP,GAAC,GAAG7B,UAAU,CAAA;AACd,EAAA,MAAM8B,cAAc,GAAGC,MAAM,CAAc,IAAI,CAAC,CAAA;AAChD,EAAA,MAAMC,YAAY,GAAGD,MAAM,CAAC,IAAI,CAAC,CAAA;EACjCE,QAAQ,CAACH,cAAc,CAACI,OAAO,EAAE,CAACrB,MAAM,IAAIrB,kBAAkB,CAAC,CAAA;AAE/D,EAAA,oBACI2C,IAAA,CAAA,KAAA,EAAA;AAAKvC,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKiC,cAAc;AAAEzB,IAAAA,SAAS,EAAEgC,UAAU,CAAChC,SAAS,EAAEnB,WAAS,CAAE;IAAAiB,QAAA,EAAA,cAC3EmC,GAAA,CAACC,SAAS,EAAA;AAAA,MAAA,GACFX,cAAc;AAClBxB,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,MAAM,EAAEA,MAAO;AACfC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,QAAQ,EAAE6B,SAAS,CAACT,cAAc,EAAuCpB,QAAQ,CAAE;AACnFC,MAAAA,gBAAgB,EAAEA,gBAAiB;AAAA,MAAA,GAC/BZ,kBAAkB;AACtBa,MAAAA,UAAU,EAAEA,UAAW;AACvBE,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;AACXE,MAAAA,MAAM,EAAEA,MAAO;AACfC,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,WAAW,EAAEA,WAAY;AACzBS,MAAAA,YAAY,EAAEA,YAAa;AAC3BP,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAChB,CAAC,eACFW,GAAA,CAACG,QAAQ,EAAA;AACLC,MAAAA,SAAS,EAAErD,aAAa,GAAG0C,cAAc,GAAGE,YAAa;AACzD3C,MAAAA,YAAY,EAAEA,YAAa;AAC3BC,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCC,MAAAA,aAAa,EAAEA,aAAc;AAC7BqC,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCtB,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCO,MAAAA,MAAM,EAAEA,MAAO;AACfI,MAAAA,MAAM,EAAEA,MAAO;AACfG,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCE,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,iBAAiB,EAAE,KAAM;AACzBjB,MAAAA,KAAK,EAAEA,KAAM;AAAAvB,MAAAA,QAAA,EAEZA,QAAAA;AAAQ,KACH,CAAC,CAAA;AAAA,GACV,CAAC,CAAA;AAEd,CAAC,EAAC;AACFT,YAAY,CAACkD,WAAW,GAAG3D,gBAAc,CAAA;AACzCS,YAAY,CAACW,SAAS,GAAGnB,WAAS,CAAA;AAClCQ,YAAY,CAACmD,YAAY,GAAGzD,eAAa;;ACvQzC;AACA;AACA;AACA,MAAMH,cAAc,GAAG,sBAAsB,CAAA;;AAE7C;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAiD,GAAG;AACtDG,EAAAA,gBAAgB,EAAE,IAAI;AACtBC,EAAAA,aAAa,EAAE,IAAI;EACnBsD,kBAAkBA,CAACC,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,EAAE;IACnD,MAAMC,OAAO,GAAIC,KAAuB,IAAKH,OAAO,IAAIA,OAAO,CAACG,KAAK,EAAEL,MAAM,CAAC,CAAA;IAC9E,oBACIT,GAAA,CAACe,IAAI,EAAA;AAEDC,MAAAA,KAAK,EAAEL,OAAO,iBAAIX,GAAA,CAACiB,IAAI,EAAA;AAAC7C,QAAAA,IAAI,EAAE8C,QAAS;QAACC,IAAI,EAAEC,IAAI,CAACC,GAAAA;AAAI,OAAE,CAAE;AAC3DT,MAAAA,UAAU,EAAEA,UAAW;MACvBO,IAAI,EAAEC,IAAI,CAACE,CAAE;AACbC,MAAAA,YAAY,EAAEV,OAAQ;AACtBA,MAAAA,OAAO,EAAEA,OAAQ;AAAAhD,MAAAA,QAAA,EAEhB4C,MAAAA;AAAM,KAAA,EAPFC,KAQH,CAAC,CAAA;GAEd;AACDc,EAAAA,MAAM,EAAE,EAAA;AACZ,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,oBAAoB,GAAGpE,UAAU,CAA4C,CAACC,KAAK,EAAEC,GAAG,KAAK;AACtG,EAAA,MAAMC,YAAY,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IAAEC,kBAAkB;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,oBAAoB,CAACN,KAAK,CAAC,CAAA;EACtE,MAAM;IACFP,aAAa;IACbc,QAAQ;AACR;AACA;IACA6D,cAAc;IACd3D,SAAS;IACTd,gBAAgB,GAAGH,aAAa,CAACG,gBAAgB;IACjDC,aAAa,GAAGJ,aAAa,CAACI,aAAa;IAC3Ce,gBAAgB;IAChBC,QAAQ;IACRC,MAAM;IACNC,IAAI;IACJC,QAAQ;IACRC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,MAAM;IACNC,QAAQ;IACR6B,OAAO;IACP5B,OAAO;IACPC,OAAO;IACPC,gBAAgB;IAChB0C,SAAS;IACTzC,WAAW;IACXC,SAAS;IACTqB,kBAAkB,GAAG1D,aAAa,CAAC0D,kBAAkB;IACrDrD,kBAAkB;AAClBiC,IAAAA,KAAK,GAAG5B,YAAY;IACpBoE,IAAI;IACJvC,KAAK;IACLmC,MAAM,GAAG1E,aAAa,CAAC0E,MAAM;IAC7B,GAAGhC,cAAAA;AACP,GAAC,GAAG7B,UAAU,CAAA;EAEd,oBACIqC,GAAA,CAAC5C,YAAY,EAAA;AACTG,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLiC,cAAc;AAClBzC,IAAAA,aAAa,EAAEA,aAAc;AAC7BgB,IAAAA,SAAS,EAAEgC,UAAU,CAAChC,SAAS,EAAEnB,SAAS,CAAE;AAC5C+B,IAAAA,IAAI,EAAEA,IAAK;AACXU,IAAAA,KAAK,EAAEA,KAAM;AACbP,IAAAA,QAAQ,EAAEA,QAAS;AACnB6C,IAAAA,SAAS,EAAEA,SAAU;AACrB9C,IAAAA,MAAM,EAAEA,MAAO;AACf1B,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvC6B,IAAAA,OAAO,EAAEA,OAAQ;AACjBd,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;IACnBP,KAAK,EAAE0D,MAAM,IAAIA,MAAM,CAACK,GAAG,CAAC,CAACC,IAAS,EAAEpB,KAAa,KAAKF,kBAAkB,GAAGsB,IAAI,EAAEpB,KAAK,EAAEC,OAAO,CAAC,CAAE;AAAA,IAAA,GAClGjD,kBAAkB;AACtBa,IAAAA,UAAU,EAAEA,UAAW;AACvBD,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,KAAK,EAAEA,KAAM;AACbQ,IAAAA,WAAW,EAAEA,WAAY;AACzBE,IAAAA,KAAK,EAAEA,KAAM;AACbwC,IAAAA,IAAI,EAAEA,IAAK;AACXpD,IAAAA,MAAM,EAAEA,MAAO;AACfxB,IAAAA,YAAY,EAAE,KAAM;AACpBC,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCC,IAAAA,aAAa,EAAEA,aAAc;AAC7B6B,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,MAAM,EAAEA,MAAO;AACfO,IAAAA,SAAS,EAAEA,SAAU;AACrBlB,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCgB,IAAAA,gBAAgB,EAAEA,gBAAiB;AAAApB,IAAAA,QAAA,EAElCA,QAAAA;AAAQ,GACC,CAAC,CAAA;AAEvB,CAAC,EAAC;AACF4D,oBAAoB,CAACnB,WAAW,GAAG3D,cAAc,CAAA;AACjD8E,oBAAoB,CAAC1D,SAAS,GAAGnB,SAAS,CAAA;AAC1C6E,oBAAoB,CAAClB,YAAY,GAAGzD,aAAa;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
1
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
2
2
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
3
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
4
4
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
-
import { T as Thumbnail } from '../Thumbnail-
|
|
5
|
+
import { T as Thumbnail } from '../Thumbnail-741501a5.js';
|
|
6
6
|
import { Size, Theme, AspectRatio } from '@lumx/core/js/constants';
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -80,4 +80,4 @@ Avatar.className = CLASSNAME;
|
|
|
80
80
|
Avatar.defaultProps = DEFAULT_PROPS;
|
|
81
81
|
|
|
82
82
|
export { Avatar };
|
|
83
|
-
//# sourceMappingURL=avatar-
|
|
83
|
+
//# sourceMappingURL=avatar-69b66f01.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar-
|
|
1
|
+
{"version":3,"file":"avatar-69b66f01.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps, HasTheme {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Image alternative text. */\n alt: string;\n /** Badge. */\n badge?: ReactElement;\n /** Image URL. */\n image: string;\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 /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /** On key press callback. */\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n /** Size variant. */\n size?: AvatarSize;\n /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n thumbnailProps?: Omit<\n ThumbnailProps,\n 'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\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<AvatarProps> = {\n size: Size.m,\n};\n\n/**\n * Avatar component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Avatar = forwardRef<AvatarProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n actions,\n alt,\n badge,\n className,\n image,\n linkProps,\n linkAs,\n onClick,\n onKeyPress,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n thumbnailProps,\n ...forwardedProps\n } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n >\n <Thumbnail\n linkProps={linkProps}\n linkAs={linkAs}\n className={`${CLASSNAME}__thumbnail`}\n onClick={onClick}\n onKeyPress={onKeyPress}\n {...thumbnailProps}\n aspectRatio={AspectRatio.square}\n size={size}\n image={image}\n alt={alt}\n theme={theme}\n />\n {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n </div>\n );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","Avatar","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","alt","badge","className","image","linkProps","linkAs","onClick","onKeyPress","theme","thumbnailProps","forwardedProps","_jsxs","classNames","handleBasicClasses","prefix","children","_jsx","Thumbnail","aspectRatio","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;;AA6CA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAmC,GAAG;EACxCC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,MAAM,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1E,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,OAAO;IACPC,GAAG;IACHC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,UAAU;IACVnB,IAAI,GAAGD,aAAa,CAACC,IAAI;AACzBoB,IAAAA,KAAK,GAAGb,YAAY;IACpBc,cAAc;IACd,GAAGC,cAAAA;AACP,GAAC,GAAGjB,KAAK,CAAA;AAET,EAAA,oBACIkB,IAAA,CAAA,KAAA,EAAA;AACIjB,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLgB,cAAc;AAClBR,IAAAA,SAAS,EAAEU,UAAU,CAACV,SAAS,EAAEW,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE7B,SAAS;MAAEG,IAAI;AAAEoB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;IAAAO,QAAA,EAAA,cAEzFC,GAAA,CAACC,SAAS,EAAA;AACNb,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,MAAM,EAAEA,MAAO;MACfH,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAc,WAAA,CAAA;AACrCqB,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,UAAU,EAAEA,UAAW;AAAA,MAAA,GACnBE,cAAc;MAClBS,WAAW,EAAEC,WAAW,CAACC,MAAO;AAChChC,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAChB,CAAC,EACDT,OAAO,iBAAIiB,GAAA,CAAA,KAAA,EAAA;MAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAY,SAAA,CAAA;AAAA8B,MAAAA,QAAA,EAAEhB,OAAAA;AAAO,KAAM,CAAC,EACnEE,KAAK,iBAAIe,GAAA,CAAA,KAAA,EAAA;MAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAU,OAAA,CAAA;AAAA8B,MAAAA,QAAA,EAAEd,KAAAA;AAAK,KAAM,CAAC,CAAA;AAAA,GAC7D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFV,MAAM,CAAC8B,WAAW,GAAGrC,cAAc,CAAA;AACnCO,MAAM,CAACW,SAAS,GAAGjB,SAAS,CAAA;AAC5BM,MAAM,CAAC+B,YAAY,GAAGnC,aAAa;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
1
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
2
2
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import { ColorPalette } from '@lumx/core/js/constants';
|
|
@@ -78,4 +78,4 @@ BadgeWrapper.displayName = 'BadgeWrapper';
|
|
|
78
78
|
BadgeWrapper.className = CLASSNAME;
|
|
79
79
|
|
|
80
80
|
export { Badge, BadgeWrapper };
|
|
81
|
-
//# sourceMappingURL=badge-
|
|
81
|
+
//# sourceMappingURL=badge-63cd3b1c.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge-
|
|
1
|
+
{"version":3,"file":"badge-63cd3b1c.js","sources":["../../../src/components/badge/Badge.tsx","../../../src/components/badge/BadgeWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ColorPalette } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface BadgeProps extends GenericProps {\n /** Badge content. */\n children?: ReactNode;\n /** Color variant. */\n color?: ColorPalette;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Badge';\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<BadgeProps> = {\n color: ColorPalette.primary,\n};\n\n/**\n * Badge component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Badge = forwardRef<BadgeProps, HTMLDivElement>((props, ref) => {\n const { children, className, color = DEFAULT_PROPS.color, ...forwardedProps } = props;\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color }))}\n >\n {children}\n </div>\n );\n});\nBadge.displayName = COMPONENT_NAME;\nBadge.className = CLASSNAME;\nBadge.defaultProps = DEFAULT_PROPS;\n","import { ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface BadgeWrapperProps extends GenericProps {\n /** Badge. */\n badge: ReactElement;\n /** Node to display the badge on */\n children: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'BadgeWrapper';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const BadgeWrapper = forwardRef<BadgeWrapperProps, HTMLDivElement>((props, ref) => {\n const { badge, children, className, ...forwardedProps } = props;\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n {children}\n {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n </div>\n );\n});\nBadgeWrapper.displayName = 'BadgeWrapper';\nBadgeWrapper.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","color","ColorPalette","primary","Badge","forwardRef","props","ref","children","className","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","displayName","defaultProps","BadgeWrapper","badge","_jsxs"],"mappings":";;;;;AAmBA;AACA;AACA;AACA,MAAMA,gBAAc,GAAG,OAAO,CAAA;;AAE9B;AACA;AACA;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAkC,GAAG;EACvCC,KAAK,EAAEC,YAAY,CAACC,OAAAA;AACxB,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,GAAGC,UAAU,CAA6B,CAACC,KAAK,EAAEC,GAAG,KAAK;EACxE,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAER,KAAK,GAAGD,aAAa,CAACC,KAAK;IAAE,GAAGS,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AACrF,EAAA,oBACIK,GAAA,CAAA,KAAA,EAAA;AACIJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLG,cAAc;AAClBD,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEI,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEhB,WAAS;AAAEG,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;AAAAO,IAAAA,QAAA,EAElFA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,EAAC;AACFJ,KAAK,CAACW,WAAW,GAAGlB,gBAAc,CAAA;AAClCO,KAAK,CAACK,SAAS,GAAGX,WAAS,CAAA;AAC3BM,KAAK,CAACY,YAAY,GAAGhB,aAAa;;AC1ClC;AACA;AACA;AACA,MAAMH,cAAc,GAAG,cAAc,CAAA;;AAErC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;AAE3C,MAAMoB,YAAY,GAAGZ,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;IAAEW,KAAK;IAAEV,QAAQ;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AAE/D,EAAA,oBACIa,IAAA,CAAA,KAAA,EAAA;AAAKZ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKG,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEX,SAAS,CAAE;AAAAU,IAAAA,QAAA,EAC1EA,CAAAA,QAAQ,EACRU,KAAK,iBAAIP,GAAA,CAAA,KAAA,EAAA;MAAKF,SAAS,EAAE,CAAGX,EAAAA,SAAS,CAAU,OAAA,CAAA;AAAAU,MAAAA,QAAA,EAAEU,KAAAA;AAAK,KAAM,CAAC,CAAA;AAAA,GAC7D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFD,YAAY,CAACF,WAAW,GAAG,cAAc,CAAA;AACzCE,YAAY,CAACR,SAAS,GAAGX,SAAS;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { a as Button, B as ButtonEmphasis } from '../Button-
|
|
2
|
-
export { I as IconButton } from '../IconButton-
|
|
3
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
1
|
+
export { a as Button, B as ButtonEmphasis } from '../Button-5a87fee9.js';
|
|
2
|
+
export { I as IconButton } from '../IconButton-351389b0.js';
|
|
3
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
4
4
|
import { getRootClassName } from '@lumx/core/js/utils/className';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
@@ -44,4 +44,4 @@ ButtonGroup.className = CLASSNAME;
|
|
|
44
44
|
ButtonGroup.defaultProps = DEFAULT_PROPS;
|
|
45
45
|
|
|
46
46
|
export { ButtonGroup };
|
|
47
|
-
//# sourceMappingURL=button-
|
|
47
|
+
//# sourceMappingURL=button-eebd4e00.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-
|
|
1
|
+
{"version":3,"file":"button-eebd4e00.js","sources":["../../../src/components/button/ButtonGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component\n */\nexport interface ButtonGroupProps extends GenericProps {\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ButtonGroup';\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<ButtonGroupProps> = {};\n\n/**\n * ButtonGroup component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const ButtonGroup = forwardRef<ButtonGroupProps, HTMLDivElement>((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n {children}\n </div>\n );\n});\nButtonGroup.displayName = COMPONENT_NAME;\nButtonGroup.className = CLASSNAME;\nButtonGroup.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","ButtonGroup","forwardRef","props","ref","children","className","forwardedProps","_jsx","classNames","displayName","defaultProps"],"mappings":";;;;;;AAgBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,aAAa,CAAA;;AAEpC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAwC,GAAG,EAAE,CAAA;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,WAAW,GAAGC,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AAExD,EAAA,oBACIK,GAAA,CAAA,KAAA,EAAA;AAAKJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKG,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAER,SAAS,CAAE;AAAAO,IAAAA,QAAA,EAC1EA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,EAAC;AACFJ,WAAW,CAACS,WAAW,GAAGb,cAAc,CAAA;AACxCI,WAAW,CAACK,SAAS,GAAGR,SAAS,CAAA;AACjCG,WAAW,CAACU,YAAY,GAAGX,aAAa;;;;"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
3
3
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
4
4
|
import { u as useId } from '../useId-3a1facc0.js';
|
|
5
5
|
import { u as useMergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
6
6
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
7
7
|
import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
|
|
8
8
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
9
|
-
import { InputLabel } from './input-label-
|
|
10
|
-
import { InputHelper } from './input-helper-
|
|
9
|
+
import { InputLabel } from './input-label-9711398b.js';
|
|
10
|
+
import { InputHelper } from './input-helper-c8a0078b.js';
|
|
11
11
|
import { Theme } from '@lumx/core/js/constants';
|
|
12
|
-
import { I as Icon } from '../index-
|
|
12
|
+
import { I as Icon } from '../index-745f94ee.js';
|
|
13
13
|
|
|
14
14
|
const mdiCheck = 'M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';
|
|
15
15
|
|
|
@@ -140,4 +140,4 @@ Checkbox.className = CLASSNAME;
|
|
|
140
140
|
Checkbox.defaultProps = DEFAULT_PROPS;
|
|
141
141
|
|
|
142
142
|
export { Checkbox };
|
|
143
|
-
//# sourceMappingURL=checkbox-
|
|
143
|
+
//# sourceMappingURL=checkbox-54943a02.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-346834f8.js","sources":["../../../../lumx-icons/dist/esm/check.js","../../../../lumx-icons/dist/esm/minus.js","../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["export const mdiCheck = /*#__PURE__*/ 'M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';","export const mdiMinus = /*#__PURE__*/ 'M19 13H5v-2h14z';","import React, { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiCheck, mdiMinus } from '@lumx/icons';\n\nimport { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\n\n/**\n * Intermediate state of checkbox.\n */\nconst INTERMEDIATE_STATE = 'intermediate';\n\n/**\n * Defines the props of the component.\n */\nexport interface CheckboxProps extends GenericProps, HasTheme, HasAriaDisabled {\n /** Helper text. */\n helper?: string;\n /** Native input id property. */\n id?: string;\n /** Native input ref. */\n inputRef?: React.Ref<HTMLInputElement>;\n /** Whether it is checked or not or intermediate. */\n isChecked?: boolean | 'intermediate';\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label text. */\n label?: ReactNode;\n /** Native input name property. */\n name?: string;\n /** Native input value property. */\n value?: string;\n /** optional props for input */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Checkbox';\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<CheckboxProps> = {};\n\n/**\n * Checkbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Checkbox = forwardRef<CheckboxProps, HTMLDivElement>((props, ref) => {\n const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n checked,\n className,\n helper,\n id,\n inputRef,\n isChecked = checked,\n label,\n name,\n onChange,\n theme = defaultTheme,\n value,\n inputProps = {},\n ...forwardedProps\n } = otherProps;\n const localInputRef = React.useRef<HTMLInputElement>(null);\n const generatedInputId = useId();\n const inputId = id || generatedInputId;\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n const intermediateState = isChecked === INTERMEDIATE_STATE;\n\n React.useEffect(() => {\n const input = localInputRef.current;\n if (input) input.indeterminate = intermediateState;\n }, [intermediateState]);\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n // Whether state is intermediate class name will \"-checked\"\n isChecked: intermediateState ? true : isChecked,\n isDisabled: isAnyDisabled,\n isUnchecked: !isChecked,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n ref={useMergeRefs(inputRef, localInputRef)}\n type=\"checkbox\"\n id={inputId}\n className={`${CLASSNAME}__input-native`}\n {...disabledStateProps}\n name={name}\n value={value}\n checked={isChecked}\n onChange={handleChange}\n aria-describedby={helper ? `${inputId}-helper` : undefined}\n aria-checked={intermediateState ? 'mixed' : Boolean(isChecked)}\n readOnly={inputProps.readOnly || disabledStateProps['aria-disabled']}\n {...inputProps}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n\n <div className={`${CLASSNAME}__input-indicator`}>\n <Icon icon={intermediateState ? mdiMinus : mdiCheck} />\n </div>\n </div>\n </div>\n\n <div className={`${CLASSNAME}__content`}>\n {label && (\n <InputLabel htmlFor={inputId} className={`${CLASSNAME}__label`} theme={theme}>\n {label}\n </InputLabel>\n )}\n {helper && (\n <InputHelper id={`${inputId}-helper`} className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n </div>\n </div>\n );\n});\nCheckbox.displayName = COMPONENT_NAME;\nCheckbox.className = CLASSNAME;\nCheckbox.defaultProps = DEFAULT_PROPS;\n"],"names":["mdiCheck","mdiMinus","INTERMEDIATE_STATE","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Checkbox","forwardRef","props","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","checked","className","helper","id","inputRef","isChecked","label","name","onChange","theme","value","inputProps","forwardedProps","localInputRef","React","useRef","generatedInputId","useId","inputId","handleChange","event","intermediateState","useEffect","input","current","indeterminate","_jsxs","classNames","handleBasicClasses","isDisabled","isUnchecked","prefix","children","_jsx","useMergeRefs","type","undefined","Boolean","readOnly","Icon","icon","InputLabel","htmlFor","InputHelper","displayName","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"checkbox-54943a02.js","sources":["../../../../lumx-icons/dist/esm/check.js","../../../../lumx-icons/dist/esm/minus.js","../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["export const mdiCheck = /*#__PURE__*/ 'M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';","export const mdiMinus = /*#__PURE__*/ 'M19 13H5v-2h14z';","import React, { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiCheck, mdiMinus } from '@lumx/icons';\n\nimport { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\n\n/**\n * Intermediate state of checkbox.\n */\nconst INTERMEDIATE_STATE = 'intermediate';\n\n/**\n * Defines the props of the component.\n */\nexport interface CheckboxProps extends GenericProps, HasTheme, HasAriaDisabled {\n /** Helper text. */\n helper?: string;\n /** Native input id property. */\n id?: string;\n /** Native input ref. */\n inputRef?: React.Ref<HTMLInputElement>;\n /** Whether it is checked or not or intermediate. */\n isChecked?: boolean | 'intermediate';\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label text. */\n label?: ReactNode;\n /** Native input name property. */\n name?: string;\n /** Native input value property. */\n value?: string;\n /** optional props for input */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Checkbox';\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<CheckboxProps> = {};\n\n/**\n * Checkbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Checkbox = forwardRef<CheckboxProps, HTMLDivElement>((props, ref) => {\n const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n checked,\n className,\n helper,\n id,\n inputRef,\n isChecked = checked,\n label,\n name,\n onChange,\n theme = defaultTheme,\n value,\n inputProps = {},\n ...forwardedProps\n } = otherProps;\n const localInputRef = React.useRef<HTMLInputElement>(null);\n const generatedInputId = useId();\n const inputId = id || generatedInputId;\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n const intermediateState = isChecked === INTERMEDIATE_STATE;\n\n React.useEffect(() => {\n const input = localInputRef.current;\n if (input) input.indeterminate = intermediateState;\n }, [intermediateState]);\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n // Whether state is intermediate class name will \"-checked\"\n isChecked: intermediateState ? true : isChecked,\n isDisabled: isAnyDisabled,\n isUnchecked: !isChecked,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n ref={useMergeRefs(inputRef, localInputRef)}\n type=\"checkbox\"\n id={inputId}\n className={`${CLASSNAME}__input-native`}\n {...disabledStateProps}\n name={name}\n value={value}\n checked={isChecked}\n onChange={handleChange}\n aria-describedby={helper ? `${inputId}-helper` : undefined}\n aria-checked={intermediateState ? 'mixed' : Boolean(isChecked)}\n readOnly={inputProps.readOnly || disabledStateProps['aria-disabled']}\n {...inputProps}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n\n <div className={`${CLASSNAME}__input-indicator`}>\n <Icon icon={intermediateState ? mdiMinus : mdiCheck} />\n </div>\n </div>\n </div>\n\n <div className={`${CLASSNAME}__content`}>\n {label && (\n <InputLabel htmlFor={inputId} className={`${CLASSNAME}__label`} theme={theme}>\n {label}\n </InputLabel>\n )}\n {helper && (\n <InputHelper id={`${inputId}-helper`} className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n </div>\n </div>\n );\n});\nCheckbox.displayName = COMPONENT_NAME;\nCheckbox.className = CLASSNAME;\nCheckbox.defaultProps = DEFAULT_PROPS;\n"],"names":["mdiCheck","mdiMinus","INTERMEDIATE_STATE","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Checkbox","forwardRef","props","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","checked","className","helper","id","inputRef","isChecked","label","name","onChange","theme","value","inputProps","forwardedProps","localInputRef","React","useRef","generatedInputId","useId","inputId","handleChange","event","intermediateState","useEffect","input","current","indeterminate","_jsxs","classNames","handleBasicClasses","isDisabled","isUnchecked","prefix","children","_jsx","useMergeRefs","type","undefined","Boolean","readOnly","Icon","icon","InputLabel","htmlFor","InputHelper","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { C as Chip } from '../Chip-
|
|
2
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
1
|
+
export { C as Chip } from '../Chip-8d0aae06.js';
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
3
3
|
import { getRootClassName } from '@lumx/core/js/utils/className';
|
|
4
4
|
import { useState } from 'react';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
@@ -99,4 +99,4 @@ const ChipGroup = Object.assign(InternalChipGroup, {
|
|
|
99
99
|
});
|
|
100
100
|
|
|
101
101
|
export { ChipGroup };
|
|
102
|
-
//# sourceMappingURL=chip-
|
|
102
|
+
//# sourceMappingURL=chip-9ad6b318.js.map
|