@lumx/react 3.20.1-alpha.30 → 3.20.1-alpha.32
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-4b67daa8.js → Button-1b7d3b79.js} +9 -8
- package/_internal/Button-1b7d3b79.js.map +1 -0
- package/_internal/ButtonRoot-a70baf82.js.map +1 -1
- package/_internal/{Chip-70af04b4.js → Chip-8fbedc93.js} +10 -7
- package/_internal/Chip-8fbedc93.js.map +1 -0
- package/_internal/{ClickAwayProvider-1204f237.js → ClickAwayProvider-7093ba23.js} +2 -2
- package/_internal/ClickAwayProvider-7093ba23.js.map +1 -0
- package/_internal/{IconButton-8d61f5be.js → IconButton-e11b5e74.js} +3 -3
- package/_internal/{IconButton-8d61f5be.js.map → IconButton-e11b5e74.js.map} +1 -1
- package/_internal/{ImageCaption-db44ec9e.js → ImageCaption-6f2f4131.js} +3 -3
- package/_internal/{ImageCaption-db44ec9e.js.map → ImageCaption-6f2f4131.js.map} +1 -1
- package/_internal/{List-c75646f2.js → List-4e95288a.js} +9 -7
- package/_internal/List-4e95288a.js.map +1 -0
- package/_internal/{PopoverDialog-35b2d87d.js → PopoverDialog-d85ff977.js} +10 -11
- package/_internal/PopoverDialog-d85ff977.js.map +1 -0
- package/_internal/{Slides-ce641b5f.js → Slides-68a7d0e6.js} +13 -9
- package/_internal/Slides-68a7d0e6.js.map +1 -0
- package/_internal/{Thumbnail-02bd6869.js → Thumbnail-22bbea7e.js} +4 -3
- package/_internal/Thumbnail-22bbea7e.js.map +1 -0
- package/_internal/check-circle-de24f857.js +4 -0
- package/_internal/check-circle-de24f857.js.map +1 -0
- package/_internal/chevron-right-827b804a.js +6 -0
- package/_internal/chevron-right-827b804a.js.map +1 -0
- package/_internal/chevron-up-0b9c76cb.js +6 -0
- package/_internal/chevron-up-0b9c76cb.js.map +1 -0
- package/_internal/close-circle-ef5d1aac.js +4 -0
- package/_internal/close-circle-ef5d1aac.js.map +1 -0
- package/_internal/close-eaf6c45a.js +4 -0
- package/_internal/close-eaf6c45a.js.map +1 -0
- package/_internal/components/{alert-dialog-a24330ed.js → alert-dialog-5326cf04.js} +6 -8
- package/_internal/components/alert-dialog-5326cf04.js.map +1 -0
- package/_internal/components/{autocomplete-70749e51.js → autocomplete-7d9581e8.js} +7 -7
- package/_internal/components/autocomplete-7d9581e8.js.map +1 -0
- package/_internal/components/{avatar-ed9f4869.js → avatar-52bb217f.js} +2 -2
- package/_internal/components/{avatar-ed9f4869.js.map → avatar-52bb217f.js.map} +1 -1
- package/_internal/components/{button-9f710830.js → button-c4127e86.js} +3 -3
- package/_internal/components/{button-9f710830.js.map → button-c4127e86.js.map} +1 -1
- package/_internal/components/{checkbox-8ab51ef9.js → checkbox-f7751583.js} +6 -4
- package/_internal/components/checkbox-f7751583.js.map +1 -0
- package/_internal/components/{chip-19e40755.js → chip-1ed080fb.js} +2 -2
- package/_internal/components/{chip-19e40755.js.map → chip-1ed080fb.js.map} +1 -1
- package/_internal/components/{comment-block-bb6a0603.js → comment-block-343e1922.js} +3 -3
- package/_internal/components/{comment-block-bb6a0603.js.map → comment-block-343e1922.js.map} +1 -1
- package/_internal/components/date-picker-b6b3dc77.js +2 -0
- package/_internal/components/date-picker-b6b3dc77.js.map +1 -0
- package/_internal/components/{dialog-30336ccb.js → dialog-d0e090b1.js} +6 -6
- package/_internal/components/dialog-d0e090b1.js.map +1 -0
- package/_internal/components/{drag-handle-ba2e7e67.js → drag-handle-eec23fc2.js} +4 -3
- package/_internal/components/drag-handle-eec23fc2.js.map +1 -0
- package/_internal/components/{dropdown-d18122d7.js → dropdown-25170b7c.js} +4 -4
- package/_internal/components/{dropdown-d18122d7.js.map → dropdown-25170b7c.js.map} +1 -1
- package/_internal/components/{expansion-panel-0b263437.js → expansion-panel-df812318.js} +9 -10
- package/_internal/components/expansion-panel-df812318.js.map +1 -0
- package/_internal/components/{flag-8f9a498a.js → flag-c8d690bc.js} +3 -3
- package/_internal/components/{flag-8f9a498a.js.map → flag-c8d690bc.js.map} +1 -1
- package/_internal/components/{flex-box-15be92f6.js → flex-box-4eeba972.js} +2 -2
- package/_internal/components/flex-box-4eeba972.js.map +1 -0
- package/_internal/components/{generic-block-5d843f1e.js → generic-block-964b2724.js} +11 -14
- package/_internal/components/generic-block-964b2724.js.map +1 -0
- package/_internal/components/{grid-column-85e305e7.js → grid-column-99652545.js} +3 -2
- package/_internal/components/grid-column-99652545.js.map +1 -0
- package/_internal/components/{heading-7bfafd7d.js → heading-6cc0f178.js} +2 -2
- package/_internal/components/{heading-7bfafd7d.js.map → heading-6cc0f178.js.map} +1 -1
- package/_internal/components/icon-9cf785b1.js +2 -0
- package/_internal/components/icon-9cf785b1.js.map +1 -0
- package/_internal/components/{image-block-3479abda.js → image-block-4f3fe64c.js} +3 -3
- package/_internal/components/{image-block-3479abda.js.map → image-block-4f3fe64c.js.map} +1 -1
- package/_internal/components/{image-lightbox-1d7ca133.js → image-lightbox-7b172571.js} +12 -10
- package/_internal/components/image-lightbox-7b172571.js.map +1 -0
- package/_internal/components/{lightbox-c5f9afd0.js → lightbox-10ff28f9.js} +6 -6
- package/_internal/components/lightbox-10ff28f9.js.map +1 -0
- package/_internal/components/{link-43ee103e.js → link-9d1bd2f6.js} +3 -3
- package/_internal/components/{link-43ee103e.js.map → link-9d1bd2f6.js.map} +1 -1
- package/_internal/components/{link-preview-db0ee2d6.js → link-preview-9525e97f.js} +3 -3
- package/_internal/components/{link-preview-db0ee2d6.js.map → link-preview-9525e97f.js.map} +1 -1
- package/_internal/components/{list-2f256244.js → list-c8c7a6eb.js} +2 -2
- package/_internal/components/{list-2f256244.js.map → list-c8c7a6eb.js.map} +1 -1
- package/_internal/components/{message-f7674e0e.js → message-edd6a28a.js} +6 -8
- package/_internal/components/message-edd6a28a.js.map +1 -0
- package/_internal/components/{mosaic-3effd0cf.js → mosaic-c8084ee8.js} +4 -3
- package/_internal/components/mosaic-c8084ee8.js.map +1 -0
- package/_internal/components/{navigation-3a5dc270.js → navigation-c9121998.js} +6 -7
- package/_internal/components/{navigation-3a5dc270.js.map → navigation-c9121998.js.map} +1 -1
- package/_internal/components/{notification-098c5600.js → notification-97a8a04a.js} +9 -8
- package/_internal/components/notification-97a8a04a.js.map +1 -0
- package/_internal/components/popover-f93484cd.js +3 -0
- package/_internal/components/popover-f93484cd.js.map +1 -0
- package/_internal/components/{post-block-69797e4d.js → post-block-7e63c4f4.js} +12 -12
- package/_internal/components/post-block-7e63c4f4.js.map +1 -0
- package/_internal/components/{progress-tracker-e0981fcc.js → progress-tracker-c9758d83.js} +7 -6
- package/_internal/components/progress-tracker-c9758d83.js.map +1 -0
- package/_internal/components/{select-64bc72a0.js → select-bea40e77.js} +15 -14
- package/_internal/components/select-bea40e77.js.map +1 -0
- package/_internal/components/{side-navigation-c610c689.js → side-navigation-385825d4.js} +7 -7
- package/_internal/components/side-navigation-385825d4.js.map +1 -0
- package/_internal/components/{slideshow-d8a943a7.js → slideshow-e0880d40.js} +3 -3
- package/_internal/components/{slideshow-d8a943a7.js.map → slideshow-e0880d40.js.map} +1 -1
- package/_internal/components/{switch-25b65051.js → switch-24fea8d7.js} +3 -2
- package/_internal/components/switch-24fea8d7.js.map +1 -0
- package/_internal/components/{table-ec20c66c.js → table-834af792.js} +6 -4
- package/_internal/components/table-834af792.js.map +1 -0
- package/_internal/components/{tabs-89c055bd.js → tabs-bebfe959.js} +3 -3
- package/_internal/components/{tabs-89c055bd.js.map → tabs-bebfe959.js.map} +1 -1
- package/_internal/components/text-9074f440.js +2 -0
- package/_internal/components/text-9074f440.js.map +1 -0
- package/_internal/components/{text-field-8f13957e.js → text-field-8597b7f7.js} +7 -7
- package/_internal/components/text-field-8597b7f7.js.map +1 -0
- package/_internal/components/{thumbnail-1255957f.js → thumbnail-4928bba2.js} +2 -2
- package/_internal/components/{thumbnail-1255957f.js.map → thumbnail-4928bba2.js.map} +1 -1
- package/_internal/components/{tooltip-dcb43bbe.js → tooltip-21018736.js} +2 -2
- package/_internal/components/{tooltip-dcb43bbe.js.map → tooltip-21018736.js.map} +1 -1
- package/_internal/components/{uploader-7ef4db39.js → uploader-2e1b080e.js} +2 -2
- package/_internal/components/{uploader-7ef4db39.js.map → uploader-2e1b080e.js.map} +1 -1
- package/_internal/components/{user-block-24d97650.js → user-block-5fd51607.js} +12 -11
- package/_internal/components/user-block-5fd51607.js.map +1 -0
- package/_internal/{index-25c9e8c2.js → index-77f213b1.js} +2 -2
- package/_internal/{index-25c9e8c2.js.map → index-77f213b1.js.map} +1 -1
- package/_internal/{index-25d2a45e.js → index-aa6d1d90.js} +4 -4
- package/_internal/{index-25d2a45e.js.map → index-aa6d1d90.js.map} +1 -1
- package/_internal/{components/icon-ee15673b.js → index-d3e86bd8.js} +6 -5
- package/_internal/index-d3e86bd8.js.map +1 -0
- package/_internal/information-49bbeed3.js +6 -0
- package/_internal/information-49bbeed3.js.map +1 -0
- package/_internal/{isComponent-b9762ff1.js → isComponent-78df9309.js} +5 -3
- package/_internal/isComponent-78df9309.js.map +1 -0
- package/_internal/partitionMulti-4daccdd5.js +25 -0
- package/_internal/partitionMulti-4daccdd5.js.map +1 -0
- package/_internal/{useCallbackOnEscape-b956a85d.js → useCallbackOnEscape-ea4d9eb4.js} +4 -6
- package/_internal/useCallbackOnEscape-ea4d9eb4.js.map +1 -0
- package/_internal/{useFocusTrap-2dbae79e.js → useFocusTrap-c3c6378b.js} +2 -2
- package/_internal/{useFocusTrap-2dbae79e.js.map → useFocusTrap-c3c6378b.js.map} +1 -1
- package/_internal/{wrapChildrenIconWithSpaces-50d705e6.js → wrapChildrenIconWithSpaces-fb85a743.js} +2 -2
- package/_internal/{wrapChildrenIconWithSpaces-50d705e6.js.map → wrapChildrenIconWithSpaces-fb85a743.js.map} +1 -1
- package/index.d.ts +15 -4
- package/index.js +49 -49
- package/package.json +3 -3
- package/utils/index.js +1 -1
- package/_internal/Button-4b67daa8.js.map +0 -1
- package/_internal/Chip-70af04b4.js.map +0 -1
- package/_internal/ClickAwayProvider-1204f237.js.map +0 -1
- package/_internal/List-c75646f2.js.map +0 -1
- package/_internal/PopoverDialog-35b2d87d.js.map +0 -1
- package/_internal/Slides-ce641b5f.js.map +0 -1
- package/_internal/Thumbnail-02bd6869.js.map +0 -1
- package/_internal/components/alert-dialog-a24330ed.js.map +0 -1
- package/_internal/components/autocomplete-70749e51.js.map +0 -1
- package/_internal/components/checkbox-8ab51ef9.js.map +0 -1
- package/_internal/components/date-picker-e4209b01.js +0 -2
- package/_internal/components/date-picker-e4209b01.js.map +0 -1
- package/_internal/components/dialog-30336ccb.js.map +0 -1
- package/_internal/components/drag-handle-ba2e7e67.js.map +0 -1
- package/_internal/components/expansion-panel-0b263437.js.map +0 -1
- package/_internal/components/flex-box-15be92f6.js.map +0 -1
- package/_internal/components/generic-block-5d843f1e.js.map +0 -1
- package/_internal/components/grid-column-85e305e7.js.map +0 -1
- package/_internal/components/icon-ee15673b.js.map +0 -1
- package/_internal/components/image-lightbox-1d7ca133.js.map +0 -1
- package/_internal/components/lightbox-c5f9afd0.js.map +0 -1
- package/_internal/components/message-f7674e0e.js.map +0 -1
- package/_internal/components/mosaic-3effd0cf.js.map +0 -1
- package/_internal/components/notification-098c5600.js.map +0 -1
- package/_internal/components/popover-dfcddda4.js +0 -3
- package/_internal/components/popover-dfcddda4.js.map +0 -1
- package/_internal/components/post-block-69797e4d.js.map +0 -1
- package/_internal/components/progress-tracker-e0981fcc.js.map +0 -1
- package/_internal/components/select-64bc72a0.js.map +0 -1
- package/_internal/components/side-navigation-c610c689.js.map +0 -1
- package/_internal/components/switch-25b65051.js.map +0 -1
- package/_internal/components/table-ec20c66c.js.map +0 -1
- package/_internal/components/text-d04d0f1b.js +0 -2
- package/_internal/components/text-d04d0f1b.js.map +0 -1
- package/_internal/components/text-field-8f13957e.js.map +0 -1
- package/_internal/components/user-block-24d97650.js.map +0 -1
- package/_internal/isComponent-b9762ff1.js.map +0 -1
- package/_internal/useCallbackOnEscape-b956a85d.js.map +0 -1
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { useRef, useEffect } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import { mdiClose } from '@lumx/icons/esm/close';
|
|
4
3
|
import { D as DOCUMENT } from '../constants-d0e3f49e.js';
|
|
5
4
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
6
|
-
import { u as useFocusTrap } from '../useFocusTrap-
|
|
5
|
+
import { u as useFocusTrap } from '../useFocusTrap-c3c6378b.js';
|
|
7
6
|
import { u as useDisableBodyScroll } from '../useDisableBodyScroll-36bd7352.js';
|
|
8
|
-
import { C as ClickAwayProvider } from '../ClickAwayProvider-
|
|
7
|
+
import { C as ClickAwayProvider } from '../ClickAwayProvider-7093ba23.js';
|
|
9
8
|
import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
10
|
-
import { u as useCallbackOnEscape } from '../useCallbackOnEscape-
|
|
9
|
+
import { u as useCallbackOnEscape } from '../useCallbackOnEscape-ea4d9eb4.js';
|
|
11
10
|
import { u as useTransitionVisibility } from '../useTransitionVisibility-321fdbfa.js';
|
|
12
11
|
import { T as ThemeProvider } from '../ThemeContext-3181f000.js';
|
|
13
12
|
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
14
13
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
15
14
|
import { P as Portal } from '../Portal-3f86608e.js';
|
|
16
|
-
import { I as IconButton } from '../IconButton-
|
|
15
|
+
import { I as IconButton } from '../IconButton-e11b5e74.js';
|
|
16
|
+
import { m as mdiClose } from '../close-eaf6c45a.js';
|
|
17
17
|
import { H as HeadingLevelProvider } from '../HeadingLevelProvider-ebdcb0c7.js';
|
|
18
18
|
import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
|
|
19
19
|
|
|
@@ -153,4 +153,4 @@ Lightbox.displayName = COMPONENT_NAME;
|
|
|
153
153
|
Lightbox.className = CLASSNAME;
|
|
154
154
|
|
|
155
155
|
export { Lightbox };
|
|
156
|
-
//# sourceMappingURL=lightbox-
|
|
156
|
+
//# sourceMappingURL=lightbox-10ff28f9.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lightbox-10ff28f9.js","sources":["../../../src/components/lightbox/Lightbox.tsx"],"sourcesContent":["import { RefObject, useRef, useEffect, AriaAttributes } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\nimport { HeadingLevelProvider, IconButton, IconButtonProps } from '@lumx/react';\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\n\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';\nimport { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { Portal } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface LightboxProps extends GenericProps, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\n /** Props to pass to the close button (minus those already set by the Lightbox props). */\n closeButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n /** Whether the component is open or not. */\n isOpen?: boolean;\n /** Reference to the element that triggered modal opening to set focus on. */\n parentElement: RefObject<any>;\n /** Reference to the element that should get the focus when the lightbox opens. By default, the close button or the lightbox itself will take focus. */\n focusElement?: RefObject<HTMLElement>;\n /** Whether to keep the dialog open on clickaway or escape press. */\n preventAutoClose?: boolean;\n /** Z-axis position. */\n zIndex?: number;\n /** On close callback. */\n onClose?(): void;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Lightbox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Lightbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) => {\n const {\n 'aria-labelledby': propAriaLabelledBy,\n ariaLabelledBy = propAriaLabelledBy,\n 'aria-label': propAriaLabel,\n ariaLabel = propAriaLabel,\n children,\n className,\n closeButtonProps,\n isOpen,\n onClose,\n parentElement,\n focusElement,\n preventAutoClose,\n theme,\n zIndex,\n ...forwardedProps\n } = props;\n if (!DOCUMENT) {\n // Can't render in SSR.\n return null;\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const childrenRef = useRef<any>(null);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const wrapperRef = useRef<HTMLDivElement>(null);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useDisableBodyScroll(isOpen && wrapperRef.current);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);\n\n // Handle focus trap.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useFocusTrap(\n // Focus trap zone\n isOpen && wrapperRef.current,\n // Focus element (fallback on close button and then on the dialog)\n focusElement?.current || closeButtonRef.current || wrapperRef.current,\n );\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const previousOpen = useRef(isOpen);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n if (isOpen !== previousOpen.current) {\n previousOpen.current = isOpen;\n\n // Focus the parent element on close.\n if (!isOpen && parentElement && parentElement.current) {\n parentElement.current.focus();\n }\n }\n }, [isOpen, parentElement]);\n\n // Close lightbox on escape key pressed.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useCallbackOnEscape(onClose);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const clickAwayRefs = useRef([wrapperRef]);\n\n if (!isOpen && !isVisible) return null;\n\n return (\n <Portal>\n <div\n ref={mergeRefs(ref, wrapperRef)}\n {...forwardedProps}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-modal=\"true\"\n role=\"dialog\"\n tabIndex={-1}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n isHidden: !isOpen,\n isShown: isOpen || isVisible,\n theme,\n }),\n )}\n style={{ zIndex }}\n >\n {closeButtonProps && (\n <div className={`${CLASSNAME}__close`}>\n <IconButton\n {...closeButtonProps}\n ref={closeButtonRef}\n emphasis=\"low\"\n hasBackground\n icon={mdiClose}\n theme=\"dark\"\n type=\"button\"\n onClick={onClose}\n />\n </div>\n )}\n <HeadingLevelProvider level={2}>\n <ThemeProvider value={undefined}>\n <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>\n <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role=\"presentation\">\n {children}\n </div>\n </ClickAwayProvider>\n </ThemeProvider>\n </HeadingLevelProvider>\n </div>\n </Portal>\n );\n});\nLightbox.displayName = COMPONENT_NAME;\nLightbox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","Lightbox","forwardRef","props","ref","propAriaLabelledBy","ariaLabelledBy","propAriaLabel","ariaLabel","children","className","closeButtonProps","isOpen","onClose","parentElement","focusElement","preventAutoClose","theme","zIndex","forwardedProps","DOCUMENT","childrenRef","useRef","wrapperRef","closeButtonRef","useDisableBodyScroll","current","isVisible","useTransitionVisibility","DIALOG_TRANSITION_DURATION","useFocusTrap","previousOpen","useEffect","focus","useCallbackOnEscape","clickAwayRefs","_jsx","Portal","_jsxs","mergeRefs","role","tabIndex","classNames","handleBasicClasses","prefix","isHidden","isShown","style","IconButton","emphasis","hasBackground","icon","mdiClose","type","onClick","HeadingLevelProvider","level","ThemeProvider","value","undefined","ClickAwayProvider","callback","childrenRefs","displayName"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
2
|
import { getRootClassName, resolveColorWithVariants, handleBasicClasses, getTypographyClassName } from '@lumx/core/js/utils/className';
|
|
3
3
|
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
4
|
-
import { w as wrapChildrenIconWithSpaces } from '../wrapChildrenIconWithSpaces-
|
|
4
|
+
import { w as wrapChildrenIconWithSpaces } from '../wrapChildrenIconWithSpaces-fb85a743.js';
|
|
5
5
|
import { R as RawClickable } from '../RawClickable-2c2b6a89.js';
|
|
6
6
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
7
7
|
import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
|
|
8
|
-
import { Icon } from '
|
|
8
|
+
import { I as Icon } from '../index-d3e86bd8.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Component display name.
|
|
@@ -70,4 +70,4 @@ Link.displayName = COMPONENT_NAME;
|
|
|
70
70
|
Link.className = CLASSNAME;
|
|
71
71
|
|
|
72
72
|
export { Link };
|
|
73
|
-
//# sourceMappingURL=link-
|
|
73
|
+
//# sourceMappingURL=link-9d1bd2f6.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-
|
|
1
|
+
{"version":3,"file":"link-9d1bd2f6.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ColorVariant, ColorWithVariants, Icon, Typography } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport {\n getRootClassName,\n getTypographyClassName,\n handleBasicClasses,\n resolveColorWithVariants,\n} from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\n\ntype HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface LinkProps extends GenericProps, HasAriaDisabled {\n /** Color variant. */\n color?: ColorWithVariants;\n /** Lightened or darkened variant of the selected icon color. */\n colorVariant?: ColorVariant;\n /** Link href. */\n href?: HTMLAnchorProps['href'];\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /**\n * Left icon (SVG path).\n * @deprecated Instead, simply nest `<Icon />` in the children\n */\n leftIcon?: string;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n /**\n * Right icon (SVG path).\n * @deprecated Instead, simply nest `<Icon />` in the children\n */\n rightIcon?: string;\n /** Link target. */\n target?: HTMLAnchorProps['target'];\n /** Typography variant. */\n typography?: Typography;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Link';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Link component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n children,\n className,\n color: propColor,\n colorVariant: propColorVariant,\n leftIcon,\n rightIcon,\n typography,\n linkAs,\n ...forwardedProps\n } = otherProps;\n const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);\n\n return (\n <RawClickable\n ref={ref as any}\n as={linkAs || (forwardedProps.href ? 'a' : 'button')}\n {...forwardedProps}\n {...disabledStateProps}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),\n typography && getTypographyClassName(typography),\n )}\n >\n {wrapChildrenIconWithSpaces(\n <>\n {leftIcon && <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} />}\n {children && <span className={`${CLASSNAME}__content`}>{children}</span>}\n {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}\n </>,\n )}\n </RawClickable>\n );\n});\nLink.displayName = COMPONENT_NAME;\nLink.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","Link","forwardRef","props","ref","disabledStateProps","otherProps","useDisableStateProps","children","className","color","propColor","colorVariant","propColorVariant","leftIcon","rightIcon","typography","linkAs","forwardedProps","resolveColorWithVariants","_jsx","RawClickable","as","href","classNames","handleBasicClasses","prefix","hasTypography","getTypographyClassName","wrapChildrenIconWithSpaces","_jsxs","_Fragment","Icon","icon","displayName"],"mappings":";;;;;;;;;AAkDA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,MAAM,CAAA;;AAE7B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,IAAI,GAAGC,UAAU,CAAmD,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC7F,MAAM;IAAEC,kBAAkB;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,oBAAoB,CAACJ,KAAK,CAAC,CAAA;EACtE,MAAM;IACFK,QAAQ;IACRC,SAAS;AACTC,IAAAA,KAAK,EAAEC,SAAS;AAChBC,IAAAA,YAAY,EAAEC,gBAAgB;IAC9BC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,MAAM;IACN,GAAGC,cAAAA;AACP,GAAC,GAAGZ,UAAU,CAAA;EACd,MAAM,CAACI,KAAK,EAAEE,YAAY,CAAC,GAAGO,wBAAwB,CAACR,SAAS,EAAEE,gBAAgB,CAAC,CAAA;EAEnF,oBACIO,GAAA,CAACC,YAAY,EAAA;AACTjB,IAAAA,GAAG,EAAEA,GAAW;IAChBkB,EAAE,EAAEL,MAAM,KAAKC,cAAc,CAACK,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAE;AAAA,IAAA,GACjDL,cAAc;AAAA,IAAA,GACdb,kBAAkB;AACtBI,IAAAA,SAAS,EAAEe,UAAU,CACjBf,SAAS,EACTgB,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE3B,SAAS;MAAEW,KAAK;MAAEE,YAAY;MAAEe,aAAa,EAAE,CAAC,CAACX,UAAAA;KAAY,CAAC,EAC3FA,UAAU,IAAIY,sBAAsB,CAACZ,UAAU,CACnD,CAAE;AAAAR,IAAAA,QAAA,EAEDqB,0BAA0B,cACvBC,IAAA,CAAAC,QAAA,EAAA;AAAAvB,MAAAA,QAAA,EACKM,CAAAA,QAAQ,iBAAIM,GAAA,CAACY,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEnB,QAAS;QAACL,SAAS,EAAE,GAAGV,SAAS,CAAA,WAAA,CAAA;AAAc,OAAE,CAAC,EAC1ES,QAAQ,iBAAIY,GAAA,CAAA,MAAA,EAAA;QAAMX,SAAS,EAAE,CAAGV,EAAAA,SAAS,CAAY,SAAA,CAAA;AAAAS,QAAAA,QAAA,EAAEA,QAAAA;AAAQ,OAAO,CAAC,EACvEO,SAAS,iBAAIK,GAAA,CAACY,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAElB,SAAU;QAACN,SAAS,EAAE,GAAGV,SAAS,CAAA,YAAA,CAAA;AAAe,OAAE,CAAC,CAAA;AAAA,KAChF,CACN,CAAA;AAAC,GACS,CAAC,CAAA;AAEvB,CAAC,EAAC;AACFE,IAAI,CAACiC,WAAW,GAAGpC,cAAc,CAAA;AACjCG,IAAI,CAACQ,SAAS,GAAGV,SAAS;;;;"}
|
|
@@ -3,9 +3,9 @@ import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/classN
|
|
|
3
3
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
4
4
|
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
5
5
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
6
|
-
import { Link } from './link-
|
|
6
|
+
import { Link } from './link-9d1bd2f6.js';
|
|
7
7
|
import { Size, Theme, AspectRatio, ColorPalette, ColorVariant } from '@lumx/core/js/constants';
|
|
8
|
-
import { T as Thumbnail } from '../Thumbnail-
|
|
8
|
+
import { T as Thumbnail } from '../Thumbnail-22bbea7e.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Component display name.
|
|
@@ -115,4 +115,4 @@ LinkPreview.className = CLASSNAME;
|
|
|
115
115
|
LinkPreview.defaultProps = DEFAULT_PROPS;
|
|
116
116
|
|
|
117
117
|
export { LinkPreview };
|
|
118
|
-
//# sourceMappingURL=link-preview-
|
|
118
|
+
//# sourceMappingURL=link-preview-9525e97f.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-preview-
|
|
1
|
+
{"version":3,"file":"link-preview-9525e97f.js","sources":["../../../src/components/link-preview/LinkPreview.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport {\n AspectRatio,\n ColorPalette,\n ColorVariant,\n Link,\n LinkProps,\n Size,\n Theme,\n Thumbnail,\n ThumbnailProps,\n} from '@lumx/react';\n\nimport { GenericProps, HeadingElement, 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 * Defines the props of the component.\n */\nexport interface LinkPreviewProps extends GenericProps, HasTheme {\n /** Description. */\n description?: string;\n /** Link URL. */\n link: string;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n /** Props to pass to the link (minus those already set by the LinkPreview props). */\n linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;\n /** Size variant. */\n size?: Extract<Size, 'regular' | 'big'>;\n /** Thumbnail for the link preview. */\n thumbnailProps?: ThumbnailProps;\n /** Title. */\n title?: string;\n /** Customize the title heading tag. */\n titleHeading?: HeadingElement;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'LinkPreview';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS = {\n size: Size.regular,\n titleHeading: 'h2',\n} as const;\n\n/**\n * LinkPreview component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const LinkPreview = forwardRef<LinkPreviewProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n className,\n description,\n link,\n linkAs,\n linkProps,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n thumbnailProps,\n title,\n titleHeading = DEFAULT_PROPS.titleHeading,\n ...forwardedProps\n } = props;\n // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).\n const TitleHeading = titleHeading as HeadingElement;\n\n return (\n <article\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n size: size === Size.big && thumbnailProps ? Size.big : Size.regular,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__wrapper`}>\n {thumbnailProps && (\n <div className={`${CLASSNAME}__thumbnail`}>\n <Thumbnail\n {...thumbnailProps}\n linkAs={linkAs}\n linkProps={{\n ...linkProps,\n href: link,\n target: '_blank',\n // Avoid redundant links in focus order\n tabIndex: -1,\n }}\n aspectRatio={AspectRatio.free}\n fillHeight\n />\n </div>\n )}\n\n <div className={`${CLASSNAME}__container`}>\n {title && (\n <TitleHeading className={`${CLASSNAME}__title`}>\n <Link\n {...linkProps}\n linkAs={linkAs}\n target=\"_blank\"\n href={link}\n color={theme === Theme.light ? ColorPalette.dark : ColorPalette.light}\n colorVariant={ColorVariant.N}\n >\n {title}\n </Link>\n </TitleHeading>\n )}\n\n {description && <p className={`${CLASSNAME}__description`}>{description}</p>}\n\n <div className={`${CLASSNAME}__link`}>\n <Link\n {...linkProps}\n linkAs={linkAs}\n className={classNames(`${CLASSNAME}__link`, linkProps?.className)}\n target=\"_blank\"\n href={link}\n color={theme === Theme.light ? ColorPalette.primary : ColorPalette.light}\n colorVariant={ColorVariant.N}\n // Avoid redundant links in focus order\n tabIndex={title ? '-1' : undefined}\n >\n {link}\n </Link>\n </div>\n </div>\n </div>\n </article>\n );\n});\n\nLinkPreview.displayName = COMPONENT_NAME;\nLinkPreview.className = CLASSNAME;\nLinkPreview.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","regular","titleHeading","LinkPreview","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","description","link","linkAs","linkProps","theme","thumbnailProps","title","forwardedProps","TitleHeading","_jsx","classNames","handleBasicClasses","prefix","big","children","_jsxs","Thumbnail","href","target","tabIndex","aspectRatio","AspectRatio","free","fillHeight","Link","color","ColorPalette","dark","colorVariant","ColorVariant","N","primary","undefined","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { L as List, a as ListItem, i as isClickable } from '../List-
|
|
1
|
+
export { L as List, a as ListItem, i as isClickable } from '../List-4e95288a.js';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { getRootClassName } from '@lumx/core/js/utils/className';
|
|
4
4
|
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
@@ -69,4 +69,4 @@ ListSubheader.displayName = COMPONENT_NAME;
|
|
|
69
69
|
ListSubheader.className = CLASSNAME;
|
|
70
70
|
|
|
71
71
|
export { ListDivider, ListSubheader };
|
|
72
|
-
//# sourceMappingURL=list-
|
|
72
|
+
//# sourceMappingURL=list-c8c7a6eb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-
|
|
1
|
+
{"version":3,"file":"list-c8c7a6eb.js","sources":["../../../src/components/list/ListDivider.tsx","../../../src/components/list/ListSubheader.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 type ListDividerProps = GenericProps;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ListDivider';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * ListDivider component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const ListDivider = forwardRef<ListDividerProps, HTMLLIElement>((props, ref) => {\n const { className, ...forwardedProps } = props;\n\n return <li ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)} />;\n});\nListDivider.displayName = COMPONENT_NAME;\nListDivider.className = CLASSNAME;\n","import { ReactNode } from 'react';\n\nimport 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 ListSubheaderProps extends GenericProps {\n /** Content. */\n children: string | ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ListSubheader';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * ListSubheader component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const ListSubheader = forwardRef<ListSubheaderProps, HTMLLIElement>((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <li ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n {children}\n </li>\n );\n});\nListSubheader.displayName = COMPONENT_NAME;\nListSubheader.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","ListDivider","forwardRef","props","ref","className","forwardedProps","_jsx","classNames","displayName","ListSubheader","children"],"mappings":";;;;;;AAWA;AACA;AACA;AACA,MAAMA,gBAAc,GAAG,aAAa,CAAA;;AAEpC;AACA;AACA;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,WAAW,GAAGC,UAAU,CAAkC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACnF,MAAM;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGH,KAAK,CAAA;AAE9C,EAAA,oBAAOI,GAAA,CAAA,IAAA,EAAA;AAAIH,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKE,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEN,WAAS,CAAA;AAAE,GAAE,CAAC,CAAA;AAC5F,CAAC,EAAC;AACFE,WAAW,CAACQ,WAAW,GAAGX,gBAAc,CAAA;AACxCG,WAAW,CAACI,SAAS,GAAGN,WAAS;;AClBjC;AACA;AACA;AACA,MAAMD,cAAc,GAAG,eAAe,CAAA;;AAEtC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMY,aAAa,GAAGR,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACvF,MAAM;IAAEO,QAAQ;IAAEN,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGH,KAAK,CAAA;AAExD,EAAA,oBACII,GAAA,CAAA,IAAA,EAAA;AAAIH,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKE,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEN,SAAS,CAAE;AAAAY,IAAAA,QAAA,EACzEA,QAAAA;AAAQ,GACT,CAAC,CAAA;AAEb,CAAC,EAAC;AACFD,aAAa,CAACD,WAAW,GAAGX,cAAc,CAAA;AAC1CY,aAAa,CAACL,SAAS,GAAGN,SAAS;;;;"}
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import { mdiAlert } from '@lumx/icons/esm/alert';
|
|
3
|
-
import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';
|
|
4
|
-
import { mdiCheckCircle } from '@lumx/icons/esm/check-circle';
|
|
5
|
-
import { mdiClose } from '@lumx/icons/esm/close';
|
|
6
|
-
import { mdiInformation } from '@lumx/icons/esm/information';
|
|
7
2
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
8
3
|
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
9
4
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
10
5
|
import { Kind, ColorPalette, Size, Emphasis } from '@lumx/core/js/constants';
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
6
|
+
import { m as mdiAlert, a as mdiInformation } from '../information-49bbeed3.js';
|
|
7
|
+
import { m as mdiCheckCircle } from '../check-circle-de24f857.js';
|
|
8
|
+
import { m as mdiAlertCircle, I as Icon } from '../index-d3e86bd8.js';
|
|
9
|
+
import { I as IconButton } from '../IconButton-e11b5e74.js';
|
|
10
|
+
import { m as mdiClose } from '../close-eaf6c45a.js';
|
|
13
11
|
|
|
14
12
|
/**
|
|
15
13
|
* Component display name.
|
|
@@ -98,4 +96,4 @@ Message.displayName = COMPONENT_NAME;
|
|
|
98
96
|
Message.className = CLASSNAME;
|
|
99
97
|
|
|
100
98
|
export { Message };
|
|
101
|
-
//# sourceMappingURL=message-
|
|
99
|
+
//# sourceMappingURL=message-edd6a28a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"message-edd6a28a.js","sources":["../../../src/components/message/Message.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';\nimport { ColorPalette, Emphasis, Icon, IconButton, Kind, Size } 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 MessageProps extends GenericProps {\n /** Content. */\n children?: ReactNode;\n /** Whether the message has a background or not. */\n hasBackground?: boolean;\n /** Message variant. */\n kind?: Kind;\n /** Message custom icon SVG path. */\n icon?: string;\n /**\n * Displays a close button.\n *\n * NB: only available if `kind === 'info' && hasBackground === true`\n */\n closeButtonProps?: {\n /** The callback called when the button is clicked */\n onClick: () => void;\n /** The label of the close button. */\n label: string;\n };\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Message';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\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 * Message component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Message = forwardRef<MessageProps, HTMLDivElement>((props, ref) => {\n const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ...forwardedProps } = props;\n const { color, icon } = CONFIG[kind as Kind] || {};\n const { onClick, label: closeButtonLabel } = closeButtonProps || {};\n const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;\n\n return (\n <div\n ref={ref}\n className={classNames(\n className,\n handleBasicClasses({\n color,\n hasBackground,\n prefix: CLASSNAME,\n }),\n )}\n {...forwardedProps}\n >\n {(customIcon || icon) && (\n <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} color={color} />\n )}\n <div className={`${CLASSNAME}__text`}>{children}</div>\n {isCloseButtonDisplayed && (\n <IconButton\n className={`${CLASSNAME}__close-button`}\n icon={mdiClose}\n onClick={onClick}\n label={closeButtonLabel}\n emphasis={Emphasis.low}\n />\n )}\n </div>\n );\n});\n\nMessage.displayName = COMPONENT_NAME;\nMessage.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","Message","forwardRef","props","ref","children","className","hasBackground","kind","customIcon","closeButtonProps","forwardedProps","onClick","label","closeButtonLabel","isCloseButtonDisplayed","_jsxs","classNames","handleBasicClasses","prefix","_jsx","Icon","size","Size","xs","IconButton","mdiClose","emphasis","Emphasis","low","displayName"],"mappings":"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"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
+
import take from 'lodash/take';
|
|
3
4
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
4
5
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
5
6
|
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
6
7
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
8
|
import { Theme, Alignment, AspectRatio } from '@lumx/core/js/constants';
|
|
8
|
-
import { T as Thumbnail } from '../Thumbnail-
|
|
9
|
+
import { T as Thumbnail } from '../Thumbnail-22bbea7e.js';
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* Component display name.
|
|
@@ -59,7 +60,7 @@ const Mosaic = forwardRef((props, ref) => {
|
|
|
59
60
|
}),
|
|
60
61
|
children: /*#__PURE__*/jsx("div", {
|
|
61
62
|
className: `${CLASSNAME}__wrapper`,
|
|
62
|
-
children: thumbnails
|
|
63
|
+
children: take(thumbnails, 4).map((thumbnail, index) => {
|
|
63
64
|
const {
|
|
64
65
|
image,
|
|
65
66
|
onClick,
|
|
@@ -92,4 +93,4 @@ Mosaic.className = CLASSNAME;
|
|
|
92
93
|
Mosaic.defaultProps = DEFAULT_PROPS;
|
|
93
94
|
|
|
94
95
|
export { Mosaic };
|
|
95
|
-
//# sourceMappingURL=mosaic-
|
|
96
|
+
//# sourceMappingURL=mosaic-c8084ee8.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mosaic-c8084ee8.js","sources":["../../../src/components/mosaic/Mosaic.tsx"],"sourcesContent":["import { MouseEventHandler, useMemo } from 'react';\n\nimport classNames from 'classnames';\nimport take from 'lodash/take';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\nimport { GenericProps, HasTheme } 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 MosaicProps extends GenericProps, HasTheme {\n /** Thumbnails. */\n thumbnails: ThumbnailProps[];\n /** On image click callback. */\n onImageClick?(index: number): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Mosaic';\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<MosaicProps> = {};\n\n/**\n * Mosaic component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Mosaic = forwardRef<MosaicProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const { className, theme = defaultTheme, thumbnails, onImageClick, ...forwardedProps } = props;\n const handleImageClick = useMemo(() => {\n if (!onImageClick) return undefined;\n\n return (index: number, onClick?: MouseEventHandler): MouseEventHandler =>\n (event) => {\n onClick?.(event);\n onImageClick?.(index);\n };\n }, [onImageClick]);\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {\n [`${CLASSNAME}--has-1-thumbnail`]: thumbnails?.length === 1,\n [`${CLASSNAME}--has-2-thumbnails`]: thumbnails?.length === 2,\n [`${CLASSNAME}--has-3-thumbnails`]: thumbnails?.length === 3,\n [`${CLASSNAME}--has-4-thumbnails`]: thumbnails?.length >= 4,\n })}\n >\n <div className={`${CLASSNAME}__wrapper`}>\n {take(thumbnails, 4).map((thumbnail: any, index: number) => {\n const { image, onClick, align, ...thumbnailProps } = thumbnail;\n\n return (\n <div key={index} className={`${CLASSNAME}__thumbnail`}>\n <Thumbnail\n {...thumbnailProps}\n align={align || Alignment.left}\n image={image}\n theme={theme}\n aspectRatio={AspectRatio.free}\n fillHeight\n onClick={handleImageClick?.(index, onClick) || onClick}\n />\n\n {thumbnails.length > 4 && index === 3 && (\n <div className={`${CLASSNAME}__overlay`}>\n <span>+{thumbnails.length - 4}</span>\n </div>\n )}\n </div>\n );\n })}\n </div>\n </div>\n );\n});\nMosaic.displayName = COMPONENT_NAME;\nMosaic.className = CLASSNAME;\nMosaic.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Mosaic","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","theme","thumbnails","onImageClick","forwardedProps","handleImageClick","useMemo","undefined","index","onClick","event","_jsx","classNames","handleBasicClasses","prefix","length","children","take","map","thumbnail","image","align","thumbnailProps","_jsxs","Thumbnail","Alignment","left","aspectRatio","AspectRatio","free","fillHeight","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -3,17 +3,16 @@ import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/classN
|
|
|
3
3
|
import { u as useTheme, T as ThemeProvider } from '../ThemeContext-3181f000.js';
|
|
4
4
|
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
5
5
|
import { createContext, useState, useRef, useContext } from 'react';
|
|
6
|
-
import { mdiChevronDown } from '@lumx/icons/esm/chevron-down';
|
|
7
|
-
import { mdiChevronUp } from '@lumx/icons/esm/chevron-up';
|
|
8
6
|
import { u as useId } from '../useId-3a1facc0.js';
|
|
9
7
|
import { f as forwardRefPolymorphic, R as RawClickable } from '../RawClickable-2c2b6a89.js';
|
|
10
|
-
import { u as useOverflowTooltipLabel, T as Text } from '../index-
|
|
8
|
+
import { u as useOverflowTooltipLabel, T as Text } from '../index-77f213b1.js';
|
|
11
9
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
12
|
-
import { Tooltip } from './tooltip-
|
|
10
|
+
import { Tooltip } from './tooltip-21018736.js';
|
|
13
11
|
import { P as Placement } from '../constants-43721918.js';
|
|
14
|
-
import { Icon } from '
|
|
12
|
+
import { I as Icon } from '../index-d3e86bd8.js';
|
|
15
13
|
import { Size, Orientation, Theme } from '@lumx/core/js/constants';
|
|
16
|
-
import { P as Popover } from '../index-
|
|
14
|
+
import { P as Popover } from '../index-aa6d1d90.js';
|
|
15
|
+
import { m as mdiChevronUp, a as mdiChevronDown } from '../chevron-up-0b9c76cb.js';
|
|
17
16
|
|
|
18
17
|
/**
|
|
19
18
|
* Component display name.
|
|
@@ -224,4 +223,4 @@ Navigation.Section = NavigationSection;
|
|
|
224
223
|
Navigation.Item = NavigationItem;
|
|
225
224
|
|
|
226
225
|
export { Navigation };
|
|
227
|
-
//# sourceMappingURL=navigation-
|
|
226
|
+
//# sourceMappingURL=navigation-c9121998.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-3a5dc270.js","sources":["../../../src/components/navigation/NavigationItem.tsx","../../../src/components/navigation/context.tsx","../../../src/components/navigation/NavigationSection.tsx","../../../src/components/navigation/Navigation.tsx"],"sourcesContent":["import { ElementType, ReactNode } from 'react';\nimport { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';\nimport classNames from 'classnames';\nimport { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\n\ntype BaseNavigationItemProps = {\n /** Icon (SVG path). */\n icon?: string;\n /** Label content. */\n label: ReactNode;\n /** Mark as the current page link */\n isCurrentPage?: boolean;\n};\n\n/**\n * Navigation item props\n */\nexport type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<E> &\n HasTheme &\n HasClassName &\n BaseNavigationItemProps &\n HasRequiredLinkHref<E>;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'NavigationItem';\n\n/**\n * Component default class name and class prefix.\n */\nexport const CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const NavigationItem = Object.assign(\n forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {\n const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;\n const theme = useTheme();\n const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);\n\n return (\n <li\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <Tooltip label={tooltipLabel} placement={Placement.TOP}>\n <RawClickable\n as={Element}\n className={handleBasicClasses({\n prefix: `${CLASSNAME}__link`,\n isSelected: isCurrentPage,\n })}\n ref={ref as React.Ref<any>}\n aria-current={isCurrentPage ? 'page' : undefined}\n {...forwardedProps}\n >\n {icon ? (\n <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} theme={theme} />\n ) : null}\n\n <Text as=\"span\" truncate className={`${CLASSNAME}__label`} ref={labelRef}>\n {label}\n </Text>\n </RawClickable>\n </Tooltip>\n </li>\n );\n }),\n {\n displayName: COMPONENT_NAME,\n className: CLASSNAME,\n },\n);\n","import { createContext } from 'react';\n\nimport { Orientation } from '@lumx/core/js/constants';\n\nexport const NavigationContext = createContext<{ orientation?: Orientation } | undefined>({\n orientation: Orientation.vertical,\n});\n","import { useRef, useState, useContext } from 'react';\n\nimport { mdiChevronDown } from '@lumx/icons/esm/chevron-down';\nimport { mdiChevronUp } from '@lumx/icons/esm/chevron-up';\nimport { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';\nimport classNames from 'classnames';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { HasClassName } from '@lumx/react/utils/type';\nimport { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\nimport { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';\nimport { NavigationContext } from './context';\n\nexport interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, HasClassName {\n /** Items inside the section */\n children: React.ReactNode;\n /** Icon (SVG path). */\n icon?: string;\n /** Label content. */\n label: string | React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'NavigationSection';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElement>((props, ref) => {\n const { children, className, label, icon, ...forwardedProps } = props;\n const [isOpen, setIsOpen] = useState(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const sectionId = useId();\n const { orientation } = useContext(NavigationContext) || {};\n const theme = useTheme();\n const isDropdown = orientation === Orientation.horizontal;\n return (\n <li\n className={classNames(\n className,\n CLASSNAME,\n ITEM_CLASSNAME,\n handleBasicClasses({\n prefix: ITEM_CLASSNAME,\n theme,\n }),\n )}\n ref={ref}\n >\n <RawClickable<'button'>\n as=\"button\"\n {...forwardedProps}\n aria-controls={sectionId}\n aria-expanded={isOpen}\n className={classNames(`${ITEM_CLASSNAME}__link`)}\n ref={buttonRef}\n onClick={(event) => {\n setIsOpen(!isOpen);\n event.stopPropagation();\n }}\n >\n {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}\n\n <Text as=\"span\" truncate className={`${ITEM_CLASSNAME}__label`} ref={ref}>\n {label}\n </Text>\n <Icon\n className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}\n icon={isOpen ? mdiChevronUp : mdiChevronDown}\n />\n </RawClickable>\n {isOpen &&\n (isDropdown ? (\n <Popover\n anchorRef={buttonRef}\n isOpen={isOpen}\n placement={Placement.BOTTOM_START}\n usePortal={false}\n closeOnClickAway\n closeOnEscape\n onClick={() => setIsOpen(false)}\n onClose={() => setIsOpen(false)}\n zIndex={996}\n >\n <ThemeProvider value={Theme.light}>\n <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>\n <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>\n {children}\n </NavigationContext.Provider>\n </ul>\n </ThemeProvider>\n </Popover>\n ) : (\n <ul className={`${CLASSNAME}__drawer`} id={sectionId}>\n {children}\n </ul>\n ))}\n </li>\n );\n});\nNavigationSection.displayName = COMPONENT_NAME;\nNavigationSection.className = CLASSNAME;\n","import classNames from 'classnames';\n\nimport { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { Orientation, Theme } from '@lumx/react';\nimport { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { NavigationSection } from './NavigationSection';\nimport { NavigationItem } from './NavigationItem';\nimport { NavigationContext } from './context';\n\nexport type NavigationProps = React.ComponentProps<'nav'> &\n HasClassName &\n HasTheme & {\n /** Content of the navigation. These components should be of type NavigationItem to be rendered */\n children?: React.ReactNode;\n orientation?: Orientation;\n } & HasAriaLabelOrLabelledBy;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Navigation';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props\n */\nconst DEFAULT_PROPS = {\n orientation: Orientation.vertical,\n};\n\ntype SubComponents = {\n Section: typeof NavigationSection;\n Item: typeof NavigationItem;\n};\n\nexport const Navigation = forwardRef<NavigationProps, HTMLElement, SubComponents>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n children,\n className,\n theme = defaultTheme,\n orientation = DEFAULT_PROPS.orientation,\n ...forwardedProps\n } = props;\n return (\n <ThemeProvider value={theme}>\n <nav\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n theme,\n orientation,\n }),\n )}\n ref={ref}\n {...forwardedProps}\n >\n <NavigationContext.Provider value={{ orientation }}>\n <ul className={`${CLASSNAME}__list`}>{children}</ul>\n </NavigationContext.Provider>\n </nav>\n </ThemeProvider>\n );\n});\nNavigation.displayName = COMPONENT_NAME;\nNavigation.className = CLASSNAME;\nNavigation.defaultProps = DEFAULT_PROPS;\n\n// Sub components\nNavigation.Section = NavigationSection;\nNavigation.Item = NavigationItem;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","NavigationItem","Object","assign","forwardRefPolymorphic","props","ref","className","icon","label","isCurrentPage","as","Element","forwardedProps","theme","useTheme","tooltipLabel","labelRef","useOverflowTooltipLabel","_jsx","classNames","handleBasicClasses","prefix","children","Tooltip","placement","Placement","TOP","_jsxs","RawClickable","isSelected","undefined","Icon","size","Size","xs","Text","truncate","displayName","NavigationContext","createContext","orientation","Orientation","vertical","NavigationSection","forwardRef","isOpen","setIsOpen","useState","buttonRef","useRef","sectionId","useId","useContext","isDropdown","horizontal","ITEM_CLASSNAME","onClick","event","stopPropagation","mdiChevronUp","mdiChevronDown","Popover","anchorRef","BOTTOM_START","usePortal","closeOnClickAway","closeOnEscape","onClose","zIndex","ThemeProvider","value","Theme","light","id","Provider","DEFAULT_PROPS","Navigation","defaultTheme","defaultProps","Section","Item"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"navigation-c9121998.js","sources":["../../../src/components/navigation/NavigationItem.tsx","../../../src/components/navigation/context.tsx","../../../src/components/navigation/NavigationSection.tsx","../../../src/components/navigation/Navigation.tsx"],"sourcesContent":["import { ElementType, ReactNode } from 'react';\nimport { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';\nimport classNames from 'classnames';\nimport { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\n\ntype BaseNavigationItemProps = {\n /** Icon (SVG path). */\n icon?: string;\n /** Label content. */\n label: ReactNode;\n /** Mark as the current page link */\n isCurrentPage?: boolean;\n};\n\n/**\n * Navigation item props\n */\nexport type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<E> &\n HasTheme &\n HasClassName &\n BaseNavigationItemProps &\n HasRequiredLinkHref<E>;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'NavigationItem';\n\n/**\n * Component default class name and class prefix.\n */\nexport const CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const NavigationItem = Object.assign(\n forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {\n const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;\n const theme = useTheme();\n const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);\n\n return (\n <li\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <Tooltip label={tooltipLabel} placement={Placement.TOP}>\n <RawClickable\n as={Element}\n className={handleBasicClasses({\n prefix: `${CLASSNAME}__link`,\n isSelected: isCurrentPage,\n })}\n ref={ref as React.Ref<any>}\n aria-current={isCurrentPage ? 'page' : undefined}\n {...forwardedProps}\n >\n {icon ? (\n <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} theme={theme} />\n ) : null}\n\n <Text as=\"span\" truncate className={`${CLASSNAME}__label`} ref={labelRef}>\n {label}\n </Text>\n </RawClickable>\n </Tooltip>\n </li>\n );\n }),\n {\n displayName: COMPONENT_NAME,\n className: CLASSNAME,\n },\n);\n","import { createContext } from 'react';\n\nimport { Orientation } from '@lumx/core/js/constants';\n\nexport const NavigationContext = createContext<{ orientation?: Orientation } | undefined>({\n orientation: Orientation.vertical,\n});\n","import { useRef, useState, useContext } from 'react';\n\nimport { mdiChevronDown, mdiChevronUp } from '@lumx/icons';\nimport { Icon, Size, Text, Orientation, Popover, Placement, Theme } from '@lumx/react';\nimport classNames from 'classnames';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { HasClassName } from '@lumx/react/utils/type';\nimport { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\nimport { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';\nimport { NavigationContext } from './context';\n\nexport interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, HasClassName {\n /** Items inside the section */\n children: React.ReactNode;\n /** Icon (SVG path). */\n icon?: string;\n /** Label content. */\n label: string | React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'NavigationSection';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElement>((props, ref) => {\n const { children, className, label, icon, ...forwardedProps } = props;\n const [isOpen, setIsOpen] = useState(false);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const sectionId = useId();\n const { orientation } = useContext(NavigationContext) || {};\n const theme = useTheme();\n const isDropdown = orientation === Orientation.horizontal;\n return (\n <li\n className={classNames(\n className,\n CLASSNAME,\n ITEM_CLASSNAME,\n handleBasicClasses({\n prefix: ITEM_CLASSNAME,\n theme,\n }),\n )}\n ref={ref}\n >\n <RawClickable<'button'>\n as=\"button\"\n {...forwardedProps}\n aria-controls={sectionId}\n aria-expanded={isOpen}\n className={classNames(`${ITEM_CLASSNAME}__link`)}\n ref={buttonRef}\n onClick={(event) => {\n setIsOpen(!isOpen);\n event.stopPropagation();\n }}\n >\n {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}\n\n <Text as=\"span\" truncate className={`${ITEM_CLASSNAME}__label`} ref={ref}>\n {label}\n </Text>\n <Icon\n className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}\n icon={isOpen ? mdiChevronUp : mdiChevronDown}\n />\n </RawClickable>\n {isOpen &&\n (isDropdown ? (\n <Popover\n anchorRef={buttonRef}\n isOpen={isOpen}\n placement={Placement.BOTTOM_START}\n usePortal={false}\n closeOnClickAway\n closeOnEscape\n onClick={() => setIsOpen(false)}\n onClose={() => setIsOpen(false)}\n zIndex={996}\n >\n <ThemeProvider value={Theme.light}>\n <ul className={`${CLASSNAME}__drawer--popover`} id={sectionId}>\n <NavigationContext.Provider value={{ orientation: Orientation.vertical }}>\n {children}\n </NavigationContext.Provider>\n </ul>\n </ThemeProvider>\n </Popover>\n ) : (\n <ul className={`${CLASSNAME}__drawer`} id={sectionId}>\n {children}\n </ul>\n ))}\n </li>\n );\n});\nNavigationSection.displayName = COMPONENT_NAME;\nNavigationSection.className = CLASSNAME;\n","import classNames from 'classnames';\n\nimport { HasAriaLabelOrLabelledBy, HasClassName, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { Orientation, Theme } from '@lumx/react';\nimport { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { NavigationSection } from './NavigationSection';\nimport { NavigationItem } from './NavigationItem';\nimport { NavigationContext } from './context';\n\nexport type NavigationProps = React.ComponentProps<'nav'> &\n HasClassName &\n HasTheme & {\n /** Content of the navigation. These components should be of type NavigationItem to be rendered */\n children?: React.ReactNode;\n orientation?: Orientation;\n } & HasAriaLabelOrLabelledBy;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Navigation';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props\n */\nconst DEFAULT_PROPS = {\n orientation: Orientation.vertical,\n};\n\ntype SubComponents = {\n Section: typeof NavigationSection;\n Item: typeof NavigationItem;\n};\n\nexport const Navigation = forwardRef<NavigationProps, HTMLElement, SubComponents>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n children,\n className,\n theme = defaultTheme,\n orientation = DEFAULT_PROPS.orientation,\n ...forwardedProps\n } = props;\n return (\n <ThemeProvider value={theme}>\n <nav\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n theme,\n orientation,\n }),\n )}\n ref={ref}\n {...forwardedProps}\n >\n <NavigationContext.Provider value={{ orientation }}>\n <ul className={`${CLASSNAME}__list`}>{children}</ul>\n </NavigationContext.Provider>\n </nav>\n </ThemeProvider>\n );\n});\nNavigation.displayName = COMPONENT_NAME;\nNavigation.className = CLASSNAME;\nNavigation.defaultProps = DEFAULT_PROPS;\n\n// Sub components\nNavigation.Section = NavigationSection;\nNavigation.Item = NavigationItem;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","NavigationItem","Object","assign","forwardRefPolymorphic","props","ref","className","icon","label","isCurrentPage","as","Element","forwardedProps","theme","useTheme","tooltipLabel","labelRef","useOverflowTooltipLabel","_jsx","classNames","handleBasicClasses","prefix","children","Tooltip","placement","Placement","TOP","_jsxs","RawClickable","isSelected","undefined","Icon","size","Size","xs","Text","truncate","displayName","NavigationContext","createContext","orientation","Orientation","vertical","NavigationSection","forwardRef","isOpen","setIsOpen","useState","buttonRef","useRef","sectionId","useId","useContext","isDropdown","horizontal","ITEM_CLASSNAME","onClick","event","stopPropagation","mdiChevronUp","mdiChevronDown","Popover","anchorRef","BOTTOM_START","usePortal","closeOnClickAway","closeOnEscape","onClose","zIndex","ThemeProvider","value","Theme","light","id","Provider","DEFAULT_PROPS","Navigation","defaultTheme","defaultProps","Section","Item"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { useRef } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
+
import isFunction from 'lodash/isFunction';
|
|
3
4
|
import { D as DOCUMENT } from '../constants-d0e3f49e.js';
|
|
4
|
-
import { mdiAlert } from '
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { mdiInformation } from '@lumx/icons/esm/information';
|
|
5
|
+
import { m as mdiAlert, a as mdiInformation } from '../information-49bbeed3.js';
|
|
6
|
+
import { m as mdiCheckCircle } from '../check-circle-de24f857.js';
|
|
7
|
+
import { m as mdiAlertCircle, I as Icon } from '../index-d3e86bd8.js';
|
|
8
8
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
9
9
|
import { u as useTransitionVisibility } from '../useTransitionVisibility-321fdbfa.js';
|
|
10
10
|
import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
@@ -13,8 +13,7 @@ import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
|
13
13
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
14
14
|
import { P as Portal } from '../Portal-3f86608e.js';
|
|
15
15
|
import { Theme, Size, Emphasis, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
|
|
16
|
-
import {
|
|
17
|
-
import { a as Button } from '../Button-4b67daa8.js';
|
|
16
|
+
import { a as Button } from '../Button-1b7d3b79.js';
|
|
18
17
|
|
|
19
18
|
/**
|
|
20
19
|
* Notification icon and colors according to their type.
|
|
@@ -92,7 +91,9 @@ const Notification = forwardRef((props, ref) => {
|
|
|
92
91
|
const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
|
|
93
92
|
const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
|
|
94
93
|
const handleCallback = evt => {
|
|
95
|
-
onActionClick
|
|
94
|
+
if (isFunction(onActionClick)) {
|
|
95
|
+
onActionClick();
|
|
96
|
+
}
|
|
96
97
|
evt.stopPropagation();
|
|
97
98
|
};
|
|
98
99
|
if (!type || !isVisible) {
|
|
@@ -143,4 +144,4 @@ Notification.className = CLASSNAME;
|
|
|
143
144
|
Notification.defaultProps = DEFAULT_PROPS;
|
|
144
145
|
|
|
145
146
|
export { Notification };
|
|
146
|
-
//# sourceMappingURL=notification-
|
|
147
|
+
//# sourceMappingURL=notification-97a8a04a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"notification-97a8a04a.js","sources":["../../../src/components/notification/constants.ts","../../../src/components/notification/Notification.tsx"],"sourcesContent":["import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';\n\n/**\n * Notification delay before hiding.\n */\nexport const HIDE_DELAY = 6000;\n\n/**\n * Notification icon and colors according to their type.\n */\nexport const NOTIFICATION_CONFIGURATION = {\n error: {\n color: 'red',\n icon: mdiAlert,\n },\n info: {\n color: 'blue',\n icon: mdiInformation,\n },\n success: {\n color: 'green',\n icon: mdiCheckCircle,\n },\n warning: {\n color: 'yellow',\n icon: mdiAlertCircle,\n },\n};\n","import { useRef } from 'react';\n\nimport classNames from 'classnames';\nimport isFunction from 'lodash/isFunction';\n\nimport { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';\nimport { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';\nimport { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';\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 { Portal } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface NotificationProps extends GenericProps, HasTheme {\n /** Action button label. */\n actionLabel?: string;\n /** Content. */\n content?: React.ReactNode;\n /** Whether the component is open or not. */\n isOpen?: boolean;\n /** Notification type. */\n type?: Kind;\n /** Z-axis position. */\n zIndex?: number;\n /** On action button click callback. */\n onActionClick?(): void;\n /** On click callback. */\n onClick?(): void;\n /** Whether the notification should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */\n usePortal?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Notification';\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<NotificationProps> = {\n zIndex: 9999,\n usePortal: true,\n};\n\n/* eslint-disable react-hooks/rules-of-hooks, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n/**\n * Notification component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Notification = forwardRef<NotificationProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n actionLabel,\n className,\n content,\n isOpen,\n onActionClick,\n onClick,\n theme = defaultTheme,\n type,\n zIndex = DEFAULT_PROPS.zIndex,\n usePortal = DEFAULT_PROPS.usePortal,\n style,\n ...forwardedProps\n } = props;\n if (!DOCUMENT) {\n // Can't render in SSR.\n return null;\n }\n const { color, icon } = NOTIFICATION_CONFIGURATION[type as Kind] || {};\n const rootRef = useRef<HTMLDivElement>(null);\n const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);\n const hasAction: boolean = Boolean(onActionClick) && Boolean(actionLabel);\n\n const handleCallback = (evt: React.MouseEvent) => {\n if (isFunction(onActionClick)) {\n onActionClick();\n }\n evt.stopPropagation();\n };\n\n if (!type || !isVisible) {\n return null;\n }\n\n return (\n <Portal enabled={usePortal}>\n {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n <div\n ref={mergeRefs(ref, rootRef)}\n role=\"alert\"\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n color,\n hasAction,\n isHidden: !isOpen,\n prefix: CLASSNAME,\n }),\n )}\n onClick={onClick}\n style={{ ...style, zIndex }}\n >\n <div className={`${CLASSNAME}__icon`}>\n <Icon icon={icon} size={Size.s} />\n </div>\n <div className={`${CLASSNAME}__content`}>{content}</div>\n {hasAction && (\n <div className={`${CLASSNAME}__action`}>\n <Button emphasis={Emphasis.medium} theme={theme} onClick={handleCallback}>\n <span>{actionLabel}</span>\n </Button>\n </div>\n )}\n </div>\n </Portal>\n );\n});\nNotification.displayName = COMPONENT_NAME;\nNotification.className = CLASSNAME;\nNotification.defaultProps = DEFAULT_PROPS;\n"],"names":["NOTIFICATION_CONFIGURATION","error","color","icon","mdiAlert","info","mdiInformation","success","mdiCheckCircle","warning","mdiAlertCircle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","zIndex","usePortal","Notification","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actionLabel","className","content","isOpen","onActionClick","onClick","theme","type","style","forwardedProps","DOCUMENT","rootRef","useRef","isVisible","useTransitionVisibility","NOTIFICATION_TRANSITION_DURATION","hasAction","Boolean","handleCallback","evt","isFunction","stopPropagation","_jsx","Portal","enabled","children","_jsxs","mergeRefs","role","classNames","handleBasicClasses","isHidden","prefix","Icon","size","Size","s","Button","emphasis","Emphasis","medium","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover-f93484cd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
+
import isObject from 'lodash/isObject';
|
|
2
3
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
4
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
4
5
|
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
5
6
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
-
import { ThumbnailVariant } from './thumbnail-
|
|
7
|
+
import { ThumbnailVariant } from './thumbnail-4928bba2.js';
|
|
7
8
|
import { Orientation, Theme } from '@lumx/core/js/constants';
|
|
8
|
-
import { T as Thumbnail } from '../Thumbnail-
|
|
9
|
+
import { T as Thumbnail } from '../Thumbnail-22bbea7e.js';
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* Component display name.
|
|
@@ -48,13 +49,6 @@ const PostBlock = forwardRef((props, ref) => {
|
|
|
48
49
|
title,
|
|
49
50
|
...forwardedProps
|
|
50
51
|
} = props;
|
|
51
|
-
|
|
52
|
-
// Display text as string or HTML
|
|
53
|
-
const textContent = typeof text === 'string' ? {
|
|
54
|
-
children: text
|
|
55
|
-
} : {
|
|
56
|
-
dangerouslySetInnerHTML: text
|
|
57
|
-
};
|
|
58
52
|
return /*#__PURE__*/jsxs("div", {
|
|
59
53
|
ref: ref,
|
|
60
54
|
className: classNames(className, handleBasicClasses({
|
|
@@ -83,9 +77,15 @@ const PostBlock = forwardRef((props, ref) => {
|
|
|
83
77
|
}), meta && /*#__PURE__*/jsx("span", {
|
|
84
78
|
className: `${CLASSNAME}__meta`,
|
|
85
79
|
children: meta
|
|
86
|
-
}),
|
|
80
|
+
}), isObject(text) && text.__html ?
|
|
81
|
+
/*#__PURE__*/
|
|
82
|
+
// eslint-disable-next-line react/no-danger
|
|
83
|
+
jsx("p", {
|
|
84
|
+
dangerouslySetInnerHTML: text,
|
|
85
|
+
className: `${CLASSNAME}__text`
|
|
86
|
+
}) : /*#__PURE__*/jsx("p", {
|
|
87
87
|
className: `${CLASSNAME}__text`,
|
|
88
|
-
|
|
88
|
+
children: text
|
|
89
89
|
}), attachments && /*#__PURE__*/jsx("div", {
|
|
90
90
|
className: `${CLASSNAME}__attachments`,
|
|
91
91
|
children: attachments
|
|
@@ -107,4 +107,4 @@ PostBlock.className = CLASSNAME;
|
|
|
107
107
|
PostBlock.defaultProps = DEFAULT_PROPS;
|
|
108
108
|
|
|
109
109
|
export { PostBlock };
|
|
110
|
-
//# sourceMappingURL=post-block-
|
|
110
|
+
//# sourceMappingURL=post-block-7e63c4f4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"post-block-7e63c4f4.js","sources":["../../../src/components/post-block/PostBlock.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isObject from 'lodash/isObject';\n\nimport { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';\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 * Defines the props of the component.\n */\nexport interface PostBlockProps extends GenericProps, HasTheme {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Attachment content. */\n attachments?: ReactNode;\n /** Author content. */\n author?: ReactNode;\n /** Metadata content. */\n meta?: ReactNode;\n /** Orientation. */\n orientation?: Orientation;\n /** Tag content. */\n tags?: ReactNode;\n /** Content (string, or sanitized html). */\n text?: string | { __html: string };\n /** Thumbnail. */\n thumbnailProps?: ThumbnailProps;\n /** Title. */\n title: string;\n /** On click callback. */\n onClick?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'PostBlock';\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<PostBlockProps> = {\n orientation: Orientation.horizontal,\n};\n\n/**\n * PostBlock component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n actions,\n attachments,\n author,\n className,\n meta,\n onClick,\n orientation = DEFAULT_PROPS.orientation,\n tags,\n text,\n theme = defaultTheme,\n thumbnailProps,\n title,\n ...forwardedProps\n } = props;\n\n return (\n <div\n ref={ref}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, orientation, theme }))}\n {...forwardedProps}\n >\n {thumbnailProps && (\n <div className={`${CLASSNAME}__thumbnail`}>\n <Thumbnail {...thumbnailProps} theme={theme} variant={ThumbnailVariant.rounded} />\n </div>\n )}\n <div className={`${CLASSNAME}__wrapper`}>\n {author && <div className={`${CLASSNAME}__author`}>{author}</div>}\n\n {title && (\n <button type=\"button\" className={`${CLASSNAME}__title`} onClick={onClick}>\n {title}\n </button>\n )}\n\n {meta && <span className={`${CLASSNAME}__meta`}>{meta}</span>}\n\n {isObject(text) && text.__html ? (\n // eslint-disable-next-line react/no-danger\n <p dangerouslySetInnerHTML={text} className={`${CLASSNAME}__text`} />\n ) : (\n <p className={`${CLASSNAME}__text`}>{text}</p>\n )}\n\n {attachments && <div className={`${CLASSNAME}__attachments`}>{attachments}</div>}\n {(tags || actions) && (\n <div className={`${CLASSNAME}__toolbar`}>\n {tags && <div className={`${CLASSNAME}__tags`}>{tags}</div>}\n {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n </div>\n )}\n </div>\n </div>\n );\n});\nPostBlock.displayName = COMPONENT_NAME;\nPostBlock.className = CLASSNAME;\nPostBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","PostBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","attachments","author","className","meta","onClick","tags","text","theme","thumbnailProps","title","forwardedProps","_jsxs","classNames","handleBasicClasses","prefix","children","_jsx","Thumbnail","variant","ThumbnailVariant","rounded","type","isObject","__html","dangerouslySetInnerHTML","displayName","defaultProps"],"mappings":"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"}
|