@pega/cosmos-react-core 4.0.0-dev.19.3 → 4.0.0-dev.19.4
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/lib/components/AppShell/AppShell.js +1 -1
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/Boolean/BooleanDisplay.d.ts.map +1 -1
- package/lib/components/Boolean/BooleanDisplay.js +2 -1
- package/lib/components/Boolean/BooleanDisplay.js.map +1 -1
- package/lib/components/CreditCard/CreditCardDisplay.d.ts.map +1 -1
- package/lib/components/CreditCard/CreditCardDisplay.js +2 -1
- package/lib/components/CreditCard/CreditCardDisplay.js.map +1 -1
- package/lib/components/Currency/CurrencyDisplay.d.ts.map +1 -1
- package/lib/components/Currency/CurrencyDisplay.js +2 -1
- package/lib/components/Currency/CurrencyDisplay.js.map +1 -1
- package/lib/components/DateTime/DateTimeDisplay.d.ts.map +1 -1
- package/lib/components/DateTime/DateTimeDisplay.js +2 -1
- package/lib/components/DateTime/DateTimeDisplay.js.map +1 -1
- package/lib/components/DateTime/DurationDisplay.d.ts.map +1 -1
- package/lib/components/DateTime/DurationDisplay.js +2 -1
- package/lib/components/DateTime/DurationDisplay.js.map +1 -1
- package/lib/components/Email/EmailDisplay.d.ts.map +1 -1
- package/lib/components/Email/EmailDisplay.js +2 -1
- package/lib/components/Email/EmailDisplay.js.map +1 -1
- package/lib/components/FieldValueList/FieldValueList.d.ts.map +1 -1
- package/lib/components/FieldValueList/FieldValueList.js +2 -1
- package/lib/components/FieldValueList/FieldValueList.js.map +1 -1
- package/lib/components/File/FileDisplay.d.ts.map +1 -1
- package/lib/components/File/FileDisplay.js +2 -1
- package/lib/components/File/FileDisplay.js.map +1 -1
- package/lib/components/Lightbox/Lightbox.d.ts.map +1 -1
- package/lib/components/Lightbox/Lightbox.js +5 -2
- package/lib/components/Lightbox/Lightbox.js.map +1 -1
- package/lib/components/Lightbox/Lightbox.styles.d.ts.map +1 -1
- package/lib/components/Lightbox/Lightbox.styles.js +10 -5
- package/lib/components/Lightbox/Lightbox.styles.js.map +1 -1
- package/lib/components/Location/LocationDisplay.d.ts.map +1 -1
- package/lib/components/Location/LocationDisplay.js +2 -1
- package/lib/components/Location/LocationDisplay.js.map +1 -1
- package/lib/components/NoValue/NoValue.d.ts +3 -0
- package/lib/components/NoValue/NoValue.d.ts.map +1 -0
- package/lib/components/NoValue/NoValue.js +9 -0
- package/lib/components/NoValue/NoValue.js.map +1 -0
- package/lib/components/NoValue/index.d.ts +2 -0
- package/lib/components/NoValue/index.d.ts.map +1 -0
- package/lib/components/NoValue/index.js +2 -0
- package/lib/components/NoValue/index.js.map +1 -0
- package/lib/components/Number/NumberDisplay.d.ts.map +1 -1
- package/lib/components/Number/NumberDisplay.js +2 -1
- package/lib/components/Number/NumberDisplay.js.map +1 -1
- package/lib/components/Paragraph/ParagraphDisplay.d.ts.map +1 -1
- package/lib/components/Paragraph/ParagraphDisplay.js +2 -1
- package/lib/components/Paragraph/ParagraphDisplay.js.map +1 -1
- package/lib/components/Phone/PhoneDisplay.d.ts.map +1 -1
- package/lib/components/Phone/PhoneDisplay.js +2 -1
- package/lib/components/Phone/PhoneDisplay.js.map +1 -1
- package/lib/components/Popover/Popover.d.ts.map +1 -1
- package/lib/components/Popover/Popover.js +54 -9
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/URL/URLDisplay.d.ts.map +1 -1
- package/lib/components/URL/URLDisplay.js +2 -1
- package/lib/components/URL/URLDisplay.js.map +1 -1
- package/lib/hooks/useBreakpoint.d.ts.map +1 -1
- package/lib/hooks/useBreakpoint.js +3 -1
- package/lib/hooks/useBreakpoint.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +1 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +1 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +1 -0
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +1 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/theme/theme.d.ts +6 -0
- package/lib/theme/theme.d.ts.map +1 -1
- package/lib/theme/themeDefinition.json +4 -0
- package/lib/utils/getRelativeOffset.d.ts +7 -0
- package/lib/utils/getRelativeOffset.d.ts.map +1 -0
- package/lib/utils/getRelativeOffset.js +9 -0
- package/lib/utils/getRelativeOffset.js.map +1 -0
- package/lib/utils/index.d.ts +1 -0
- package/lib/utils/index.d.ts.map +1 -1
- package/lib/utils/index.js +1 -0
- package/lib/utils/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useRef, useState, forwardRef } from 'react';
|
|
3
|
+
import { createPortal } from 'react-dom';
|
|
3
4
|
import { cap } from '../../utils';
|
|
4
5
|
import Flex from '../Flex';
|
|
5
6
|
import MetaList from '../MetaList';
|
|
6
7
|
import Icon from '../Icon';
|
|
7
8
|
import Text from '../Text';
|
|
8
|
-
import { useConsolidatedRef, useDirection, useEvent, useFocusTrap, useI18n, useScrollToggle } from '../../hooks';
|
|
9
|
+
import { useConfiguration, useConsolidatedRef, useDirection, useEvent, useFocusTrap, useI18n, useScrollToggle } from '../../hooks';
|
|
9
10
|
import ErrorState from '../ErrorState';
|
|
10
11
|
import { StyledHeader, StyledCountTracker, StyledInfo, StyledActionButton, StyledPreviewRegion, StyledNavButton, StyledImageContainer, StyledImage, StyledLiveRegion, StyledLightbox } from './Lightbox.styles';
|
|
11
12
|
const Lightbox = forwardRef(({ items, defaultIndex = 0, cycle, onItemLoad, onItemError, onNavigate, onItemDownload, onAfterClose, ...restProps }, refArg) => {
|
|
12
13
|
const t = useI18n();
|
|
13
14
|
const { start, end } = useDirection();
|
|
15
|
+
const { portalTarget } = useConfiguration();
|
|
14
16
|
const [currentIndex, setCurrentIndex] = useState(defaultIndex);
|
|
15
17
|
const currentItem = items[currentIndex];
|
|
16
18
|
const { disableScroll, enableScroll } = useScrollToggle();
|
|
@@ -68,7 +70,7 @@ const Lightbox = forwardRef(({ items, defaultIndex = 0, cycle, onItemLoad, onIte
|
|
|
68
70
|
useEffect(() => {
|
|
69
71
|
lightboxRef.current?.focus();
|
|
70
72
|
}, []);
|
|
71
|
-
|
|
73
|
+
const content = (_jsxs(StyledLightbox, { ...restProps, tabIndex: -1, ref: lightboxRef, open: open, role: 'dialog', "aria-modal": 'true', container: { alignItems: 'start', justify: 'start', direction: 'column' }, alpha: 0.9, variant: 'dark', transitionSpeed: 'slow', onBeforeTransitionIn: disableScroll, onAfterTransitionOut: () => {
|
|
72
74
|
enableScroll();
|
|
73
75
|
onAfterClose?.();
|
|
74
76
|
}, children: [_jsxs(Flex, { as: StyledHeader, ref: headerRef, container: {
|
|
@@ -101,6 +103,7 @@ const Lightbox = forwardRef(({ items, defaultIndex = 0, cycle, onItemLoad, onIte
|
|
|
101
103
|
} })) }) }), items.length > 1 && (_jsx(StyledNavButton, { ref: nextButtonRef, variant: 'simple', "aria-label": t('pagination_next'), hidden: !cycle && currentIndex === items.length - 1, icon: true, onClick: () => {
|
|
102
104
|
navigate(1);
|
|
103
105
|
}, children: _jsx("span", { children: _jsx(Icon, { name: 'caret-right' }) }) }))] }), _jsx(StyledLiveRegion, { "aria-live": 'polite', "aria-label": liveText })] }));
|
|
106
|
+
return portalTarget ? createPortal(content, portalTarget) : content;
|
|
104
107
|
});
|
|
105
108
|
export default Lightbox;
|
|
106
109
|
//# sourceMappingURL=Lightbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n useEffect,\n useRef,\n Ref,\n useState,\n forwardRef,\n MouseEvent,\n SyntheticEvent\n} from 'react';\n\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\nimport Flex from '../Flex';\nimport MetaList from '../MetaList';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport {\n useConsolidatedRef,\n useDirection,\n useEvent,\n useFocusTrap,\n useI18n,\n useScrollToggle\n} from '../../hooks';\nimport ErrorState from '../ErrorState';\n\nimport {\n StyledHeader,\n StyledCountTracker,\n StyledInfo,\n StyledActionButton,\n StyledPreviewRegion,\n StyledNavButton,\n StyledImageContainer,\n StyledImage,\n StyledLiveRegion,\n StyledLightbox\n} from './Lightbox.styles';\nimport { LightboxProps } from './Lightbox.types';\n\nconst Lightbox: FunctionComponent<LightboxProps & ForwardProps> = forwardRef(\n (\n {\n items,\n defaultIndex = 0,\n cycle,\n onItemLoad,\n onItemError,\n onNavigate,\n onItemDownload,\n onAfterClose,\n ...restProps\n }: PropsWithoutRef<LightboxProps>,\n refArg: Ref<HTMLDivElement>\n ) => {\n const t = useI18n();\n const { start, end } = useDirection();\n const [currentIndex, setCurrentIndex] = useState(defaultIndex);\n const currentItem = items[currentIndex];\n const { disableScroll, enableScroll } = useScrollToggle();\n const lightboxRef = useConsolidatedRef(refArg);\n const headerRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const prevButtonRef = useRef<HTMLButtonElement>(null);\n const nextButtonRef = useRef<HTMLButtonElement>(null);\n const [open, setOpen] = useState(true);\n const imageRef = useConsolidatedRef(currentItem.ref);\n const [error, setError] = useState(false);\n const [liveText, setLiveText] = useState('');\n const countTrackerText = items.length > 1 ? t('x_of_y', [currentIndex + 1, items.length]) : '';\n\n const close = () => {\n setOpen(false);\n };\n\n const navigate = (direction: 1 | -1) => {\n if (direction === 1) {\n if (currentIndex < items.length - 1) {\n setCurrentIndex(cur => cur + 1);\n setError(false);\n } else if (cycle) {\n setCurrentIndex(0);\n setError(false);\n }\n } else if (currentIndex > 0) {\n setCurrentIndex(cur => cur - 1);\n setError(false);\n } else if (cycle) {\n setCurrentIndex(items.length - 1);\n setError(false);\n }\n };\n const keyDownHandler = (e: KeyboardEvent) => {\n if (e.repeat) return;\n\n if (e.key === 'Escape') {\n close();\n } else if (e.key === `Arrow${cap(end)}`) {\n navigate(1);\n } else if (e.key === `Arrow${cap(start)}`) {\n navigate(-1);\n }\n };\n\n useEvent('keydown', keyDownHandler);\n useFocusTrap(lightboxRef);\n\n useEffect(() => {\n setLiveText(\n `${currentItem.name}. ${countTrackerText ? `${countTrackerText}.` : ''} ${\n currentItem.description\n }.`\n );\n }, [currentItem.name, countTrackerText, currentItem.description]);\n\n useEffect(() => {\n lightboxRef.current?.focus();\n }, []);\n\n return (\n <StyledLightbox\n {...restProps}\n tabIndex={-1}\n ref={lightboxRef}\n open={open}\n role='dialog'\n aria-modal='true'\n container={{ alignItems: 'start', justify: 'start', direction: 'column' }}\n alpha={0.9}\n variant='dark'\n transitionSpeed='slow'\n onBeforeTransitionIn={disableScroll}\n onAfterTransitionOut={() => {\n enableScroll();\n onAfterClose?.();\n }}\n >\n <Flex\n as={StyledHeader}\n ref={headerRef}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 2\n }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n <StyledCountTracker aria-hidden='true'>{countTrackerText}</StyledCountTracker>\n\n <Flex\n as={StyledInfo}\n container={{\n wrap: 'wrap',\n alignItems: 'center',\n justify: 'center',\n colGap: 2,\n rowGap: 0.5\n }}\n >\n <Text variant='primary' as='h2'>\n {currentItem.name}\n </Text>\n {currentItem.metadata && <MetaList items={currentItem.metadata} />}\n </Flex>\n\n <Flex container>\n {onItemDownload && (\n <StyledActionButton\n variant='simple'\n aria-label={t('download')}\n icon\n onClick={() => onItemDownload(currentItem.id)}\n >\n <Icon name='download' />\n </StyledActionButton>\n )}\n <StyledActionButton\n variant='simple'\n ref={closeButtonRef}\n aria-label={t('close')}\n icon\n onClick={close}\n >\n <Icon name='times' />\n </StyledActionButton>\n </Flex>\n </Flex>\n\n <Flex\n container={{ justify: 'between' }}\n as={StyledPreviewRegion}\n item={{ grow: 1, shrink: 0 }}\n >\n {items.length > 1 && (\n <StyledNavButton\n ref={prevButtonRef}\n variant='simple'\n aria-label={t('pagination_prev')}\n hidden={!cycle && currentIndex === 0}\n icon\n onClick={() => {\n navigate(-1);\n }}\n >\n <span>\n <Icon name='caret-left' />\n </span>\n </StyledNavButton>\n )}\n\n <Flex item={{ grow: 1 }} as={StyledImageContainer}>\n <Flex\n container={{ alignItems: 'center' }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n {error ? (\n <ErrorState message={t('image_load_error')} />\n ) : (\n <StyledImage\n ref={imageRef}\n src={currentItem.src}\n alt={currentItem.description}\n onLoad={(e: SyntheticEvent<HTMLImageElement>) => {\n onItemLoad?.(currentItem.id, e);\n }}\n onError={(e: SyntheticEvent<HTMLImageElement>) => {\n onItemError?.(currentItem.id, e);\n setError(true);\n }}\n />\n )}\n </Flex>\n </Flex>\n\n {items.length > 1 && (\n <StyledNavButton\n ref={nextButtonRef}\n variant='simple'\n aria-label={t('pagination_next')}\n hidden={!cycle && currentIndex === items.length - 1}\n icon\n onClick={() => {\n navigate(1);\n }}\n >\n <span>\n <Icon name='caret-right' />\n </span>\n </StyledNavButton>\n )}\n </Flex>\n <StyledLiveRegion aria-live='polite' aria-label={liveText} />\n </StyledLightbox>\n );\n }\n);\n\nexport default Lightbox;\n"]}
|
|
1
|
+
{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n useEffect,\n useRef,\n Ref,\n useState,\n forwardRef,\n MouseEvent,\n SyntheticEvent\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\nimport Flex from '../Flex';\nimport MetaList from '../MetaList';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useDirection,\n useEvent,\n useFocusTrap,\n useI18n,\n useScrollToggle\n} from '../../hooks';\nimport ErrorState from '../ErrorState';\n\nimport {\n StyledHeader,\n StyledCountTracker,\n StyledInfo,\n StyledActionButton,\n StyledPreviewRegion,\n StyledNavButton,\n StyledImageContainer,\n StyledImage,\n StyledLiveRegion,\n StyledLightbox\n} from './Lightbox.styles';\nimport { LightboxProps } from './Lightbox.types';\n\nconst Lightbox: FunctionComponent<LightboxProps & ForwardProps> = forwardRef(\n (\n {\n items,\n defaultIndex = 0,\n cycle,\n onItemLoad,\n onItemError,\n onNavigate,\n onItemDownload,\n onAfterClose,\n ...restProps\n }: PropsWithoutRef<LightboxProps>,\n refArg: Ref<HTMLDivElement>\n ) => {\n const t = useI18n();\n const { start, end } = useDirection();\n const { portalTarget } = useConfiguration();\n const [currentIndex, setCurrentIndex] = useState(defaultIndex);\n const currentItem = items[currentIndex];\n const { disableScroll, enableScroll } = useScrollToggle();\n const lightboxRef = useConsolidatedRef(refArg);\n const headerRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const prevButtonRef = useRef<HTMLButtonElement>(null);\n const nextButtonRef = useRef<HTMLButtonElement>(null);\n const [open, setOpen] = useState(true);\n const imageRef = useConsolidatedRef(currentItem.ref);\n const [error, setError] = useState(false);\n const [liveText, setLiveText] = useState('');\n const countTrackerText = items.length > 1 ? t('x_of_y', [currentIndex + 1, items.length]) : '';\n\n const close = () => {\n setOpen(false);\n };\n\n const navigate = (direction: 1 | -1) => {\n if (direction === 1) {\n if (currentIndex < items.length - 1) {\n setCurrentIndex(cur => cur + 1);\n setError(false);\n } else if (cycle) {\n setCurrentIndex(0);\n setError(false);\n }\n } else if (currentIndex > 0) {\n setCurrentIndex(cur => cur - 1);\n setError(false);\n } else if (cycle) {\n setCurrentIndex(items.length - 1);\n setError(false);\n }\n };\n const keyDownHandler = (e: KeyboardEvent) => {\n if (e.repeat) return;\n\n if (e.key === 'Escape') {\n close();\n } else if (e.key === `Arrow${cap(end)}`) {\n navigate(1);\n } else if (e.key === `Arrow${cap(start)}`) {\n navigate(-1);\n }\n };\n\n useEvent('keydown', keyDownHandler);\n useFocusTrap(lightboxRef);\n\n useEffect(() => {\n setLiveText(\n `${currentItem.name}. ${countTrackerText ? `${countTrackerText}.` : ''} ${\n currentItem.description\n }.`\n );\n }, [currentItem.name, countTrackerText, currentItem.description]);\n\n useEffect(() => {\n lightboxRef.current?.focus();\n }, []);\n\n const content = (\n <StyledLightbox\n {...restProps}\n tabIndex={-1}\n ref={lightboxRef}\n open={open}\n role='dialog'\n aria-modal='true'\n container={{ alignItems: 'start', justify: 'start', direction: 'column' }}\n alpha={0.9}\n variant='dark'\n transitionSpeed='slow'\n onBeforeTransitionIn={disableScroll}\n onAfterTransitionOut={() => {\n enableScroll();\n onAfterClose?.();\n }}\n >\n <Flex\n as={StyledHeader}\n ref={headerRef}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 2\n }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n <StyledCountTracker aria-hidden='true'>{countTrackerText}</StyledCountTracker>\n\n <Flex\n as={StyledInfo}\n container={{\n wrap: 'wrap',\n alignItems: 'center',\n justify: 'center',\n colGap: 2,\n rowGap: 0.5\n }}\n >\n <Text variant='primary' as='h2'>\n {currentItem.name}\n </Text>\n {currentItem.metadata && <MetaList items={currentItem.metadata} />}\n </Flex>\n\n <Flex container>\n {onItemDownload && (\n <StyledActionButton\n variant='simple'\n aria-label={t('download')}\n icon\n onClick={() => onItemDownload(currentItem.id)}\n >\n <Icon name='download' />\n </StyledActionButton>\n )}\n <StyledActionButton\n variant='simple'\n ref={closeButtonRef}\n aria-label={t('close')}\n icon\n onClick={close}\n >\n <Icon name='times' />\n </StyledActionButton>\n </Flex>\n </Flex>\n\n <Flex\n container={{ justify: 'between' }}\n as={StyledPreviewRegion}\n item={{ grow: 1, shrink: 0 }}\n >\n {items.length > 1 && (\n <StyledNavButton\n ref={prevButtonRef}\n variant='simple'\n aria-label={t('pagination_prev')}\n hidden={!cycle && currentIndex === 0}\n icon\n onClick={() => {\n navigate(-1);\n }}\n >\n <span>\n <Icon name='caret-left' />\n </span>\n </StyledNavButton>\n )}\n\n <Flex item={{ grow: 1 }} as={StyledImageContainer}>\n <Flex\n container={{ alignItems: 'center' }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n {error ? (\n <ErrorState message={t('image_load_error')} />\n ) : (\n <StyledImage\n ref={imageRef}\n src={currentItem.src}\n alt={currentItem.description}\n onLoad={(e: SyntheticEvent<HTMLImageElement>) => {\n onItemLoad?.(currentItem.id, e);\n }}\n onError={(e: SyntheticEvent<HTMLImageElement>) => {\n onItemError?.(currentItem.id, e);\n setError(true);\n }}\n />\n )}\n </Flex>\n </Flex>\n\n {items.length > 1 && (\n <StyledNavButton\n ref={nextButtonRef}\n variant='simple'\n aria-label={t('pagination_next')}\n hidden={!cycle && currentIndex === items.length - 1}\n icon\n onClick={() => {\n navigate(1);\n }}\n >\n <span>\n <Icon name='caret-right' />\n </span>\n </StyledNavButton>\n )}\n </Flex>\n <StyledLiveRegion aria-live='polite' aria-label={liveText} />\n </StyledLightbox>\n );\n\n return portalTarget ? createPortal(content, portalTarget) : content;\n }\n);\n\nexport default Lightbox;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Lightbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,YAAY,4GAkBvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAY7B,CAAC;AAIH,eAAO,MAAM,UAAU,yGAKrB,CAAC;AAIH,eAAO,MAAM,eAAe,oNAgE1B,CAAC;AAIH,eAAO,MAAM,kBAAkB,qMAS7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAkB/B,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAG/B,CAAC;AAEF,eAAO,MAAM,WAAW,mMAKvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAE5B,CAAC;AAEF,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"Lightbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,YAAY,4GAkBvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAY7B,CAAC;AAIH,eAAO,MAAM,UAAU,yGAKrB,CAAC;AAIH,eAAO,MAAM,eAAe,oNAgE1B,CAAC;AAIH,eAAO,MAAM,kBAAkB,qMAS7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAkB/B,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAG/B,CAAC;AAEF,eAAO,MAAM,WAAW,mMAKvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAE5B,CAAC;AAEF,eAAO,MAAM,cAAc,yMAQzB,CAAC"}
|
|
@@ -158,9 +158,14 @@ export const StyledImage = styled(Image) `
|
|
|
158
158
|
export const StyledLiveRegion = styled.div `
|
|
159
159
|
${hideVisually}
|
|
160
160
|
`;
|
|
161
|
-
export const StyledLightbox = styled(Backdrop)
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
161
|
+
export const StyledLightbox = styled(Backdrop)(({ theme }) => {
|
|
162
|
+
return css `
|
|
163
|
+
z-index: ${theme.base['z-index'].max};
|
|
164
|
+
|
|
165
|
+
&:focus {
|
|
166
|
+
outline: none;
|
|
167
|
+
}
|
|
168
|
+
`;
|
|
169
|
+
});
|
|
170
|
+
StyledLightbox.defaultProps = defaultThemeProp;
|
|
166
171
|
//# sourceMappingURL=Lightbox.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Lightbox.styles.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Lightbox.styles.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport Image from '../Image';\nimport Button from '../Button';\nimport BareButton from '../Button/BareButton';\nimport { StyledIcon } from '../Icon';\nimport { StyledMetaList } from '../MetaList/MetaList';\nimport { StyledErrorState } from '../ErrorState';\nimport { StyledText } from '../Text';\nimport { useDirection } from '../../hooks';\nimport Backdrop from '../Backdrop';\n\nexport const StyledHeader = styled.header(({ theme }) => {\n const color: string | undefined = tryCatch(() =>\n rgba(theme.base.palette.light, theme.base.transparency['transparent-2'])\n );\n\n return css`\n position: relative;\n width: 100%;\n padding: ${theme.base.spacing};\n color: ${color};\n\n ${StyledMetaList} {\n justify-content: center;\n li {\n color: ${color};\n }\n }\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCountTracker = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n font-size: ${fontSize.xs};\n text-align: center;\n min-width: calc(2 * ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n min-width: calc(2 * ${theme.base['hit-area']['finger-min']});\n }\n `;\n});\n\nStyledCountTracker.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div(({ theme }) => {\n return css`\n color: ${theme.base.palette.light};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledNavButton = styled(BareButton)(({ theme }) => {\n const bg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.5));\n const hoverBg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.7));\n const { rtl } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block: 0;\n min-width: ${theme.base['hit-area']['mouse-min']};\n color: ${theme.base.palette['foreground-color']};\n box-shadow: none;\n border-radius: 0;\n\n @media (pointer: coarse) {\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n\n &[hidden] {\n display: none;\n }\n\n & > span {\n display: inline-block;\n background-color: ${bg};\n\n ${StyledIcon} {\n color: ${theme.base.palette.light};\n width: 2rem;\n height: 3rem;\n\n ${rtl &&\n css`\n transform: rotateZ(180deg);\n `}\n }\n }\n\n &:nth-of-type(1) {\n inset-inline-start: 0;\n text-align: start;\n & > span {\n border-start-end-radius: calc(${theme.base['border-radius']} / 2);\n border-end-end-radius: calc(${theme.base['border-radius']} / 2);\n }\n }\n\n &:nth-of-type(2) {\n inset-inline-end: 0;\n text-align: end;\n & > span {\n border-start-start-radius: calc(${theme.base['border-radius']} / 2);\n border-end-start-radius: calc(${theme.base['border-radius']} / 2);\n }\n }\n\n &:hover > span {\n background-color: ${hoverBg};\n }\n\n &:focus > span {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledNavButton.defaultProps = defaultThemeProp;\n\nexport const StyledActionButton = styled(Button)(({ theme }) => {\n return css`\n padding: ${theme.base.spacing};\n color: ${theme.base.palette.light};\n\n &:focus:enabled {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledActionButton.defaultProps = defaultThemeProp;\n\nexport const StyledImageContainer = styled.div(({ theme }) => {\n return css`\n position: relative;\n\n & > div {\n position: absolute;\n inset-block-start: 0;\n inset-block-end: calc(2 * ${theme.base.spacing});\n inset-inline: 0;\n }\n\n ${StyledErrorState} {\n margin: auto;\n & > ${StyledText} {\n color: ${theme.base.palette.light};\n }\n }\n `;\n});\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewRegion = styled.div`\n position: relative;\n width: 100%;\n`;\n\nexport const StyledImage = styled(Image)`\n display: block;\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n`;\n\nexport const StyledLiveRegion = styled.div`\n ${hideVisually}\n`;\n\nexport const StyledLightbox = styled(Backdrop)(({ theme }) => {\n return css`\n z-index: ${theme.base['z-index'].max};\n\n &:focus {\n outline: none;\n }\n `;\n});\n\nStyledLightbox.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocationDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Location/LocationDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"LocationDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Location/LocationDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAc,MAAM,OAAO,CAAC;AAIxF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKtD,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC;IACtC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAsD3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -2,12 +2,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { forwardRef, useContext } from 'react';
|
|
3
3
|
import Text from '../Text';
|
|
4
4
|
import Link from '../Link';
|
|
5
|
+
import NoValue from '../NoValue/NoValue';
|
|
5
6
|
import LocationView from './LocationView';
|
|
6
7
|
import MapsContext from './MapsContext';
|
|
7
8
|
const LocationDisplay = forwardRef(({ value = '', displayText, variant = 'text-map', height = '25rem', zoomLevel = 13, ...restProps }, ref) => {
|
|
8
9
|
const { name } = useContext(MapsContext);
|
|
9
10
|
const valueString = typeof value === 'string' ? value : `${value?.latitude}, ${value?.longitude}`;
|
|
10
|
-
return !value ? (_jsx(Text, { ref: ref, ...restProps, "aria-hidden": 'true', children: _jsx(
|
|
11
|
+
return !value ? (_jsx(Text, { ref: ref, ...restProps, "aria-hidden": 'true', children: _jsx(NoValue, {}) })) : (_jsxs(_Fragment, { children: [(variant === 'text' || variant === 'text-map') &&
|
|
11
12
|
(name === 'google' ? (_jsx(Link, { ref: ref, ...restProps, target: '_blank', rel: 'noopener noreferrer', href: `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(typeof value === 'string' ? value : `${value?.latitude}, ${value?.longitude}`)}`, children: displayText || valueString })) : (_jsx(Text, { ref: ref, ...restProps, children: displayText || valueString }))), (variant === 'text-map' || variant === 'map') && (_jsx(LocationView, { ...{
|
|
12
13
|
location: value,
|
|
13
14
|
centerMapOnChange: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocationDisplay.js","sourceRoot":"","sources":["../../../src/components/Location/LocationDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,UAAU,EAAE,MAAM,OAAO,CAAC;AAExF,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"LocationDisplay.js","sourceRoot":"","sources":["../../../src/components/Location/LocationDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,UAAU,EAAE,MAAM,OAAO,CAAC;AAExF,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,WAAW,MAAM,eAAe,CAAC;AA2BxC,MAAM,eAAe,GAA2D,UAAU,CACxF,CACE,EACE,KAAK,GAAG,EAAE,EACV,WAAW,EACX,OAAO,GAAG,UAAU,EACpB,MAAM,GAAG,OAAO,EAChB,SAAS,GAAG,EAAE,EACd,GAAG,SAAS,EAC0B,EACxC,GAAgC,EAChC,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEzC,MAAM,WAAW,GACf,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,QAAQ,KAAK,KAAK,EAAE,SAAS,EAAE,CAAC;IAEhF,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CACd,KAAC,IAAI,IAAC,GAAG,EAAE,GAA2B,KAAM,SAAS,iBAAc,MAAM,YACvE,KAAC,OAAO,KAAG,GACN,CACR,CAAC,CAAC,CAAC,CACF,8BACG,CAAC,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,UAAU,CAAC;gBAC7C,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACnB,KAAC,IAAI,IACH,GAAG,EAAE,GAA6B,KAC9B,SAAS,EACb,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAE,mDAAmD,kBAAkB,CACzE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,QAAQ,KAAK,KAAK,EAAE,SAAS,EAAE,CAC9E,EAAE,YAEF,WAAW,IAAI,WAAW,GACtB,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,WAAW,IAAI,WAAW,GACtB,CACR,CAAC,EACH,CAAC,OAAO,KAAK,UAAU,IAAI,OAAO,KAAK,KAAK,CAAC,IAAI,CAChD,KAAC,YAAY,OACP;oBACF,QAAQ,EAAE,KAAK;oBACf,iBAAiB,EAAE,IAAI;oBACvB,MAAM;oBACN,SAAS;iBACV,GACD,CACH,IACA,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useContext } from 'react';\n\nimport Text from '../Text';\nimport Link from '../Link';\nimport { BaseProps, ForwardProps } from '../../types';\nimport NoValue from '../NoValue/NoValue';\n\nimport LocationView from './LocationView';\nimport MapsContext from './MapsContext';\nimport { LatLng } from './types';\n\nexport interface LocationDisplayProps extends BaseProps {\n /** Location address or coordinates */\n value?: string | LatLng;\n /** The text to be displayed. */\n displayText?: string;\n /**\n * Controls styling of the field.\n * @default 'text-map'\n */\n variant?: 'text-map' | 'text' | 'map';\n /**\n * Height of the map container.\n * @default '25rem'\n */\n height?: string;\n /**\n * How much the map should zoom.\n * @default 13\n */\n zoomLevel?: number;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst LocationDisplay: FunctionComponent<LocationDisplayProps & ForwardProps> = forwardRef(\n (\n {\n value = '',\n displayText,\n variant = 'text-map',\n height = '25rem',\n zoomLevel = 13,\n ...restProps\n }: PropsWithoutRef<LocationDisplayProps>,\n ref: LocationDisplayProps['ref']\n ) => {\n const { name } = useContext(MapsContext);\n\n const valueString =\n typeof value === 'string' ? value : `${value?.latitude}, ${value?.longitude}`;\n\n return !value ? (\n <Text ref={ref as Ref<HTMLSpanElement>} {...restProps} aria-hidden='true'>\n <NoValue />\n </Text>\n ) : (\n <>\n {(variant === 'text' || variant === 'text-map') &&\n (name === 'google' ? (\n <Link\n ref={ref as Ref<HTMLAnchorElement>}\n {...restProps}\n target='_blank'\n rel='noopener noreferrer'\n href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(\n typeof value === 'string' ? value : `${value?.latitude}, ${value?.longitude}`\n )}`}\n >\n {displayText || valueString}\n </Link>\n ) : (\n <Text ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n {displayText || valueString}\n </Text>\n ))}\n {(variant === 'text-map' || variant === 'map') && (\n <LocationView\n {...{\n location: value,\n centerMapOnChange: true,\n height,\n zoomLevel\n }}\n />\n )}\n </>\n );\n }\n);\n\nexport default LocationDisplay;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NoValue.d.ts","sourceRoot":"","sources":["../../../src/components/NoValue/NoValue.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,OAAO,mBAQZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useI18n } from '../../hooks';
|
|
3
|
+
import VisuallyHiddenText from '../VisuallyHiddenText/VisuallyHiddenText';
|
|
4
|
+
const NoValue = () => {
|
|
5
|
+
const t = useI18n();
|
|
6
|
+
return (_jsxs("span", { children: [_jsx("span", { "aria-hidden": true, children: "\u2013\u2013" }), _jsx(VisuallyHiddenText, { children: t('no_value') })] }));
|
|
7
|
+
};
|
|
8
|
+
export default NoValue;
|
|
9
|
+
//# sourceMappingURL=NoValue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NoValue.js","sourceRoot":"","sources":["../../../src/components/NoValue/NoValue.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,kBAAkB,MAAM,0CAA0C,CAAC;AAE1E,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,2BACE,+DAAuC,EACvC,KAAC,kBAAkB,cAAE,CAAC,CAAC,UAAU,CAAC,GAAsB,IACnD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { useI18n } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText/VisuallyHiddenText';\n\nconst NoValue = () => {\n const t = useI18n();\n return (\n <span>\n <span aria-hidden>––</span>\n <VisuallyHiddenText>{t('no_value')}</VisuallyHiddenText>\n </span>\n );\n};\n\nexport default NoValue;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NoValue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NoValue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './NoValue';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM3E,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA+BvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { useConfiguration } from '../../hooks';
|
|
4
|
+
import NoValue from '../NoValue/NoValue';
|
|
4
5
|
import { getFraction, getFormattedValue } from './utils';
|
|
5
6
|
const NumberDisplay = forwardRef(({ value, unit = '', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true } = {}, ...restProps }, ref) => {
|
|
6
7
|
const { locale } = useConfiguration();
|
|
@@ -9,7 +10,7 @@ const NumberDisplay = forwardRef(({ value, unit = '', formattingOptions: { fract
|
|
|
9
10
|
useGrouping: groupSeparators,
|
|
10
11
|
maximumFractionDigits: fractionDigits,
|
|
11
12
|
minimumFractionDigits: fractionDigits
|
|
12
|
-
})) : (_jsx(
|
|
13
|
+
})) : (_jsx(NoValue, {})) }));
|
|
13
14
|
});
|
|
14
15
|
export default NumberDisplay;
|
|
15
16
|
//# sourceMappingURL=NumberDisplay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA8BzD,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACvB,GAAG,EAAE,EACN,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YAChD,QAAQ;YACR,WAAW,EAAE,eAAe;YAC5B,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;SACtC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConfiguration } from '../../hooks';\nimport NoValue from '../NoValue/NoValue';\n\nimport { getFraction, getFormattedValue } from './utils';\n\nexport interface NumberDisplayProps extends BaseProps, NoChildrenProp {\n /** Number value */\n value?: number | bigint;\n /** Unit to be included in the text, for example '%' */\n unit?: string;\n\n formattingOptions?: {\n /**\n * Value display notation.\n * @default 'standard'\n */\n notation?: 'standard' | 'compact';\n /**\n * Determines the fixed number of fraction digits. The value is rounded to the given precision.\n * Maximum is 20, default is value precision.\n * @default variable\n */\n fractionDigits?: number;\n /**\n * Determines whether group separators should be shown.\n * @default true\n */\n groupSeparators?: boolean;\n };\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLSpanElement>;\n}\n\nconst NumberDisplay: FunctionComponent<NumberDisplayProps & ForwardProps> = forwardRef(\n (\n {\n value,\n unit = '',\n formattingOptions: {\n fractionDigits = getFraction(String(value)).substring(1).length,\n notation,\n groupSeparators = true\n } = {},\n ...restProps\n }: PropsWithoutRef<NumberDisplayProps>,\n ref: NumberDisplayProps['ref']\n ) => {\n const { locale } = useConfiguration();\n\n return (\n <span ref={ref} {...restProps}>\n {value || value === 0 ? (\n getFormattedValue(value.toString(), locale, unit, {\n notation,\n useGrouping: groupSeparators,\n maximumFractionDigits: fractionDigits,\n minimumFractionDigits: fractionDigits\n })\n ) : (\n <NoValue />\n )}\n </span>\n );\n }\n);\n\nexport default NumberDisplay;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ParagraphDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/ParagraphDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"ParagraphDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/ParagraphDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGtD,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,oBAAoB,CAAC,CAAC;CACjC;AAMD,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAW7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
+
import NoValue from '../NoValue/NoValue';
|
|
4
5
|
const StyledParagraphDisplay = styled.p `
|
|
5
6
|
white-space: break-spaces;
|
|
6
7
|
`;
|
|
7
8
|
const ParagraphDisplay = forwardRef(({ value, ...restProps }, ref) => {
|
|
8
|
-
return (_jsx(StyledParagraphDisplay, { ref: ref, ...restProps, children: value !== undefined ? value : _jsx(
|
|
9
|
+
return (_jsx(StyledParagraphDisplay, { ref: ref, ...restProps, children: value !== undefined ? value : _jsx(NoValue, {}) }));
|
|
9
10
|
});
|
|
10
11
|
export default ParagraphDisplay;
|
|
11
12
|
//# sourceMappingURL=ParagraphDisplay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ParagraphDisplay.js","sourceRoot":"","sources":["../../../src/components/Paragraph/ParagraphDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"ParagraphDisplay.js","sourceRoot":"","sources":["../../../src/components/Paragraph/ParagraphDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AASzC,MAAM,sBAAsB,GAAG,MAAM,CAAC,CAAC,CAAA;;CAEtC,CAAC;AAEF,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EAAE,KAAK,EAAE,GAAG,SAAS,EAA0C,EAC/D,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,KAAC,sBAAsB,IAAC,GAAG,EAAE,GAAG,KAAM,SAAS,YAC5C,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GACnB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport NoValue from '../NoValue/NoValue';\n\nexport interface ParagraphDisplayProps extends BaseProps {\n /** Paragraph text */\n value?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLParagraphElement>;\n}\n\nconst StyledParagraphDisplay = styled.p`\n white-space: break-spaces;\n`;\n\nconst ParagraphDisplay: FunctionComponent<ParagraphDisplayProps & ForwardProps> = forwardRef(\n (\n { value, ...restProps }: PropsWithoutRef<ParagraphDisplayProps>,\n ref: ParagraphDisplayProps['ref']\n ) => {\n return (\n <StyledParagraphDisplay ref={ref} {...restProps}>\n {value !== undefined ? value : <NoValue />}\n </StyledParagraphDisplay>\n );\n }\n);\n\nexport default ParagraphDisplay;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM3E,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,cAAc;IAClE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,oCAAoC;IACpC,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA2BrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import Link from '../Link';
|
|
4
|
+
import NoValue from '../NoValue/NoValue';
|
|
4
5
|
import { formatPhone } from './utils';
|
|
5
6
|
const PhoneDisplay = forwardRef(({ value, displayText, variant = 'link', formattingOptions: { showCountryCode = true } = {}, ...restProps }, ref) => {
|
|
6
|
-
const displayValue = value ? (displayText || formatPhone(value || '', { nationalFormat: !showCountryCode }) || value) : (_jsx(
|
|
7
|
+
const displayValue = value ? (displayText || formatPhone(value || '', { nationalFormat: !showCountryCode }) || value) : (_jsx(NoValue, {}));
|
|
7
8
|
return variant === 'text' || !value ? (_jsx("span", { ref: ref, ...restProps, children: displayValue })) : (_jsx(Link, { ref: ref, ...restProps, href: `tel:${value}`, children: displayValue }));
|
|
8
9
|
});
|
|
9
10
|
export default PhoneDisplay;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneDisplay.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneDisplay.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAwBtC,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EACE,KAAK,EACL,WAAW,EACX,OAAO,GAAG,MAAM,EAChB,iBAAiB,EAAE,EAAE,eAAe,GAAG,IAAI,EAAE,GAAG,EAAE,EAClD,GAAG,SAAS,EACuB,EACrC,GAA6B,EAC7B,EAAE;IACF,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAC3B,WAAW,IAAI,WAAW,CAAC,KAAK,IAAI,EAAE,EAAE,EAAE,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,IAAI,KAAK,CACvF,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,KAAG,CACZ,CAAC;IAEF,OAAO,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACpC,eAAM,GAAG,EAAE,GAA2B,KAAM,SAAS,YAClD,YAAY,GACR,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE,YAC1E,YAAY,GACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\nimport NoValue from '../NoValue/NoValue';\n\nimport { formatPhone } from './utils';\n\nexport interface PhoneDisplayProps extends BaseProps, NoChildrenProp {\n /** Phone number, no 'tel:' scheme, '+18887342669' */\n value?: string;\n /** The text to be displayed. */\n displayText?: string;\n /**\n * Controls styling of the field.\n * @default 'link'\n */\n variant?: 'link' | 'text';\n /** Options to define formatting. */\n formattingOptions?: {\n /**\n * Display phone number with country calling code\n * @default true\n */\n showCountryCode?: boolean;\n };\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst PhoneDisplay: FunctionComponent<PhoneDisplayProps & ForwardProps> = forwardRef(\n (\n {\n value,\n displayText,\n variant = 'link',\n formattingOptions: { showCountryCode = true } = {},\n ...restProps\n }: PropsWithoutRef<PhoneDisplayProps>,\n ref: PhoneDisplayProps['ref']\n ) => {\n const displayValue = value ? (\n displayText || formatPhone(value || '', { nationalFormat: !showCountryCode }) || value\n ) : (\n <NoValue />\n );\n\n return variant === 'text' || !value ? (\n <span ref={ref as Ref<HTMLSpanElement>} {...restProps}>\n {displayValue}\n </span>\n ) : (\n <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={`tel:${value}`}>\n {displayValue}\n </Link>\n );\n }\n);\n\nexport default PhoneDisplay;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,GAAG,EAEH,YAAY,EAEZ,SAAS,
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,GAAG,EAEH,YAAY,EAEZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAStD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,YAAY,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,SAAS;IAChF,2IAA2I;IAC3I,MAAM,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yGAAyG;IACzG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAQD,QAAA,MAAM,OAAO,EAAE,CAAC,SAAS,SAAS,MAAM,GAAG,MAAM,EAC/C,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,GAAG,YAAY,KAC1C,YAAY,GAAG,IA+MnB,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useContext, useRef, useEffect, useMemo, useState } from 'react';
|
|
2
|
+
import { forwardRef, useContext, useRef, useEffect, useMemo, useState, useLayoutEffect } from 'react';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
4
|
import { usePopper } from 'react-popper';
|
|
5
5
|
import { useAfterInitialEffect, useConfiguration, useConsolidatedRef, useElement, useUID } from '../../hooks';
|
|
6
|
-
import { windowIsAvailable } from '../../utils';
|
|
6
|
+
import { getRelativeOffset, windowIsAvailable } from '../../utils';
|
|
7
7
|
import { PopoverManagerContext } from './PopoverContext';
|
|
8
8
|
import { StyledPopover, StyledPopoverArrow } from './Popover.styles';
|
|
9
9
|
import { placeAndContain } from './modifiers';
|
|
@@ -19,6 +19,7 @@ const Popover = forwardRef(({ show = true, portal = false, target, placement = '
|
|
|
19
19
|
const popperRef = useConsolidatedRef(ref, setPopperEl);
|
|
20
20
|
const arrowRef = useRef(null);
|
|
21
21
|
const forceUpdateRef = useRef();
|
|
22
|
+
const initialOffset = useRef(null);
|
|
22
23
|
const [showPopover, setShowPopover] = useState(show);
|
|
23
24
|
const timeout = useRef();
|
|
24
25
|
const uid = useUID();
|
|
@@ -73,23 +74,67 @@ const Popover = forwardRef(({ show = true, portal = false, target, placement = '
|
|
|
73
74
|
if (forceUpdate)
|
|
74
75
|
forceUpdateRef.current = forceUpdate;
|
|
75
76
|
useEffect(() => {
|
|
77
|
+
if (!popperRef.current && !(target instanceof Element))
|
|
78
|
+
return;
|
|
79
|
+
// Set of elements being observed since ResizeObserver always fires once when observe is called
|
|
80
|
+
const set = new Set();
|
|
76
81
|
const controller = new AbortController();
|
|
77
|
-
const observer = new ResizeObserver(
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
82
|
+
const observer = new ResizeObserver(entries => {
|
|
83
|
+
let updateQueued = false;
|
|
84
|
+
for (const { target: resizeTarget } of entries) {
|
|
85
|
+
if (!set.has(resizeTarget) && !updateQueued) {
|
|
86
|
+
updateQueued = true;
|
|
87
|
+
requestAnimationFrame(() => {
|
|
88
|
+
if (!controller.signal.aborted) {
|
|
89
|
+
forceUpdateRef.current?.();
|
|
90
|
+
}
|
|
91
|
+
});
|
|
81
92
|
}
|
|
82
|
-
|
|
93
|
+
set.delete(resizeTarget);
|
|
94
|
+
}
|
|
83
95
|
});
|
|
84
|
-
if (popperRef.current)
|
|
96
|
+
if (popperRef.current) {
|
|
97
|
+
set.add(popperRef.current);
|
|
85
98
|
observer.observe(popperRef.current);
|
|
86
|
-
|
|
99
|
+
}
|
|
100
|
+
if (target instanceof Element) {
|
|
101
|
+
set.add(target);
|
|
87
102
|
observer.observe(target);
|
|
103
|
+
}
|
|
88
104
|
return () => {
|
|
89
105
|
controller.abort();
|
|
106
|
+
set.clear();
|
|
90
107
|
observer.disconnect();
|
|
91
108
|
};
|
|
92
109
|
});
|
|
110
|
+
useLayoutEffect(() => {
|
|
111
|
+
if (target) {
|
|
112
|
+
initialOffset.current = getRelativeOffset(target, document.documentElement);
|
|
113
|
+
}
|
|
114
|
+
else {
|
|
115
|
+
initialOffset.current = null;
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
useEffect(() => {
|
|
119
|
+
if (!showPopover || target === null)
|
|
120
|
+
return;
|
|
121
|
+
let rafId;
|
|
122
|
+
const checkCoords = () => {
|
|
123
|
+
if (target && initialOffset.current) {
|
|
124
|
+
const newOffset = getRelativeOffset(target, document.documentElement);
|
|
125
|
+
if (initialOffset.current.x !== newOffset.x || initialOffset.current.y !== newOffset.y) {
|
|
126
|
+
forceUpdateRef.current?.();
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
rafId = requestAnimationFrame(checkCoords);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
rafId = requestAnimationFrame(checkCoords);
|
|
134
|
+
return () => {
|
|
135
|
+
cancelAnimationFrame(rafId);
|
|
136
|
+
};
|
|
137
|
+
});
|
|
93
138
|
useEffect(() => {
|
|
94
139
|
if (groupId && show)
|
|
95
140
|
setActive(uid, groupId);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useContext,\n PropsWithoutRef,\n Ref,\n CSSProperties,\n ReactElement,\n useRef,\n ReactNode,\n useEffect,\n useMemo,\n useState\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper, PopperProps } from 'react-popper';\nimport { VirtualElement } from '@popperjs/core';\nimport { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport {\n useAfterInitialEffect,\n useConfiguration,\n useConsolidatedRef,\n useElement,\n useUID\n} from '../../hooks';\nimport { windowIsAvailable } from '../../utils';\nimport { ConfigurationProps } from '../Configuration';\n\nimport { PopoverManagerContext } from './PopoverContext';\nimport { StyledPopover, StyledPopoverArrow } from './Popover.styles';\nimport { placeAndContain } from './modifiers';\n\nexport type Delay = 'none' | 'short' | 'long';\nexport interface PopoverProps<Modifiers extends string = string> extends BaseProps {\n /** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */\n target: Element | VirtualElement | null;\n /**\n * If true, the Popover will be visible.\n * @default true\n */\n show?: boolean;\n /**\n * If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default false\n */\n portal?: boolean | ConfigurationProps['portalTarget'];\n /**\n * Delay on showing the Popover.\n * @default 'none'\n */\n showDelay?: Delay;\n /**\n * Delay on hiding the Popover.\n * @default 'none'\n */\n hideDelay?: Delay;\n /**\n * [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)\n * @default 'bottom'\n */\n placement?: PopperProps<Modifiers>['placement'];\n /**\n * [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)\n * @default 'absolute'\n */\n strategy?: PopperProps<Modifiers>['strategy'];\n /**\n * [React Popper Modifiers](https://popper.js.org/react-popper/v2/render-props/#modifiers)\n * @default []\n */\n modifiers?: PopperProps<Modifiers>['modifiers'];\n /**\n * If true, an arrow will visually identify from which element the Popover is rendered.\n * @default false\n */\n arrow?: boolean;\n /** The group that the Popover belongs to. Popovers in the same group will be closed when others open. */\n groupId?: string;\n /**\n * If true, the Popover will be visibly hidden when its target leaves the viewport.\n * @default false\n */\n hideOnTargetHidden?: boolean;\n /** Callback that runs when the popover is hidden */\n onHide?: () => void;\n /** The content of the Popover. */\n children: ReactNode;\n /** The ref of the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst delays = {\n none: 0,\n short: 500,\n long: 1000\n};\n\nconst Popover: <Modifiers extends string = string>(\n props: PopoverProps<Modifiers> & ForwardProps\n) => ReactElement | null = forwardRef(\n (\n {\n show = true,\n portal = false,\n target,\n placement = 'bottom',\n strategy = 'fixed',\n style,\n modifiers = [],\n arrow = false,\n groupId,\n showDelay = 'none',\n hideDelay = 'none',\n hideOnTargetHidden = false,\n children,\n onHide,\n ...restProps\n }: PropsWithoutRef<PopoverProps> & { style?: CSSProperties },\n ref: PopoverProps['ref']\n ) => {\n const { portalTarget: configurationPortal } = useConfiguration();\n const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);\n const [, setPopperEl] = useElement<HTMLDivElement>();\n const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n const arrowRef = useRef<HTMLDivElement>(null);\n const forceUpdateRef = useRef<() => void>();\n const [showPopover, setShowPopover] = useState(show);\n const timeout = useRef<number>();\n const uid = useUID();\n\n const portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;\n\n const memoedModifiers = useMemo(() => {\n const flipEnabled = !!modifiers\n .slice()\n .reverse()\n .find(modifier => modifier.name === 'flip' && modifier.enabled !== undefined)?.enabled;\n\n return [\n {\n name: 'computeStyles',\n options: {\n gpuAcceleration: false\n }\n },\n {\n name: 'offset',\n options: {\n offset: [0, arrow ? 5.5 : 2]\n }\n },\n { name: 'hide', enabled: hideOnTargetHidden },\n { name: 'arrow', enabled: arrow, options: { element: arrowRef.current } },\n {\n name: 'preventOverflow',\n options: {\n tether: !modifiers.find(m => m.name === 'sameWidth'),\n padding: 16\n }\n },\n {\n ...placeAndContain,\n enabled: !flipEnabled\n },\n ...modifiers\n ];\n }, [arrow, hideOnTargetHidden, modifiers]);\n\n const offset = useMemo(() => {\n const offsetModifier = [...memoedModifiers]\n .reverse()\n .find(m => m.name === 'offset' && m.enabled !== false) as OffsetModifier | undefined;\n return Array.isArray(offsetModifier?.options?.offset)\n ? offsetModifier?.options?.offset[1] ?? 0\n : 0;\n }, [memoedModifiers]);\n\n const { styles, attributes, forceUpdate } = usePopper(target, popperRef.current, {\n placement,\n strategy,\n modifiers: memoedModifiers\n });\n\n if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n useEffect(() => {\n const controller = new AbortController();\n\n const observer = new ResizeObserver(() => {\n requestAnimationFrame(() => {\n if (!controller.signal.aborted) {\n forceUpdateRef.current?.();\n }\n });\n });\n\n if (popperRef.current) observer.observe(popperRef.current);\n if (target instanceof Element) observer.observe(target);\n\n return () => {\n controller.abort();\n observer.disconnect();\n };\n });\n\n useEffect(() => {\n if (groupId && show) setActive(uid, groupId);\n\n if (windowIsAvailable) {\n if (timeout.current) clearTimeout(timeout.current);\n timeout.current = window.setTimeout(() => {\n setShowPopover(show);\n }, delays[show ? showDelay : hideDelay]);\n } else {\n setShowPopover(show);\n }\n }, [show]);\n\n useEffect(() => {\n return () => clearTimeout(timeout.current);\n }, []);\n\n useAfterInitialEffect(() => {\n if (!showPopover) {\n onHide?.();\n }\n }, [showPopover]);\n\n useEffect(() => {\n if (groupId && popovers[groupId] && popovers[groupId] !== uid) {\n setShowPopover(false);\n }\n }, [groupId ? popovers[groupId] : undefined]);\n\n const content = (\n <StyledPopover\n {...restProps}\n offset={offset}\n ref={popperRef}\n style={{ ...style, ...styles.popper }}\n {...attributes.popper}\n >\n {arrow && <StyledPopoverArrow ref={arrowRef} style={{ ...styles.arrow }} />}\n {children}\n </StyledPopover>\n );\n\n if (!target || !showPopover || (groupId && !checkActive(uid, groupId))) return null;\n\n return portal && portalTarget ? createPortal(content, portalTarget) : content;\n }\n);\n\nexport default Popover;\n"]}
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useContext,\n PropsWithoutRef,\n Ref,\n CSSProperties,\n ReactElement,\n useRef,\n ReactNode,\n useEffect,\n useMemo,\n useState,\n useLayoutEffect\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper, PopperProps } from 'react-popper';\nimport { VirtualElement } from '@popperjs/core';\nimport { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport {\n useAfterInitialEffect,\n useConfiguration,\n useConsolidatedRef,\n useElement,\n useUID\n} from '../../hooks';\nimport { getRelativeOffset, windowIsAvailable } from '../../utils';\nimport { ConfigurationProps } from '../Configuration';\n\nimport { PopoverManagerContext } from './PopoverContext';\nimport { StyledPopover, StyledPopoverArrow } from './Popover.styles';\nimport { placeAndContain } from './modifiers';\n\nexport type Delay = 'none' | 'short' | 'long';\nexport interface PopoverProps<Modifiers extends string = string> extends BaseProps {\n /** The DOM element or [virtual element](https://popper.js.org/docs/v2/virtual-elements) that the Popover is positioned in reference to. */\n target: Element | VirtualElement | null;\n /**\n * If true, the Popover will be visible.\n * @default true\n */\n show?: boolean;\n /**\n * If true, the Popover will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default false\n */\n portal?: boolean | ConfigurationProps['portalTarget'];\n /**\n * Delay on showing the Popover.\n * @default 'none'\n */\n showDelay?: Delay;\n /**\n * Delay on hiding the Popover.\n * @default 'none'\n */\n hideDelay?: Delay;\n /**\n * [React Popper Placement](https://popper.js.org/react-popper/v2/render-props/#placement)\n * @default 'bottom'\n */\n placement?: PopperProps<Modifiers>['placement'];\n /**\n * [React Popper Strategy](https://popper.js.org/react-popper/v2/render-props/#strategy)\n * @default 'absolute'\n */\n strategy?: PopperProps<Modifiers>['strategy'];\n /**\n * [React Popper Modifiers](https://popper.js.org/react-popper/v2/render-props/#modifiers)\n * @default []\n */\n modifiers?: PopperProps<Modifiers>['modifiers'];\n /**\n * If true, an arrow will visually identify from which element the Popover is rendered.\n * @default false\n */\n arrow?: boolean;\n /** The group that the Popover belongs to. Popovers in the same group will be closed when others open. */\n groupId?: string;\n /**\n * If true, the Popover will be visibly hidden when its target leaves the viewport.\n * @default false\n */\n hideOnTargetHidden?: boolean;\n /** Callback that runs when the popover is hidden */\n onHide?: () => void;\n /** The content of the Popover. */\n children: ReactNode;\n /** The ref of the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst delays = {\n none: 0,\n short: 500,\n long: 1000\n};\n\nconst Popover: <Modifiers extends string = string>(\n props: PopoverProps<Modifiers> & ForwardProps\n) => ReactElement | null = forwardRef(\n (\n {\n show = true,\n portal = false,\n target,\n placement = 'bottom',\n strategy = 'fixed',\n style,\n modifiers = [],\n arrow = false,\n groupId,\n showDelay = 'none',\n hideDelay = 'none',\n hideOnTargetHidden = false,\n children,\n onHide,\n ...restProps\n }: PropsWithoutRef<PopoverProps> & { style?: CSSProperties },\n ref: PopoverProps['ref']\n ) => {\n const { portalTarget: configurationPortal } = useConfiguration();\n const { checkActive, setActive, popovers } = useContext(PopoverManagerContext);\n const [, setPopperEl] = useElement<HTMLDivElement>();\n const popperRef = useConsolidatedRef<HTMLDivElement>(ref, setPopperEl);\n const arrowRef = useRef<HTMLDivElement>(null);\n const forceUpdateRef = useRef<() => void>();\n const initialOffset = useRef<Pick<DOMRect, 'x' | 'y'> | null>(null);\n const [showPopover, setShowPopover] = useState(show);\n const timeout = useRef<number>();\n const uid = useUID();\n\n const portalTarget = typeof portal === 'boolean' ? configurationPortal : portal;\n\n const memoedModifiers = useMemo(() => {\n const flipEnabled = !!modifiers\n .slice()\n .reverse()\n .find(modifier => modifier.name === 'flip' && modifier.enabled !== undefined)?.enabled;\n\n return [\n {\n name: 'computeStyles',\n options: {\n gpuAcceleration: false\n }\n },\n {\n name: 'offset',\n options: {\n offset: [0, arrow ? 5.5 : 2]\n }\n },\n { name: 'hide', enabled: hideOnTargetHidden },\n { name: 'arrow', enabled: arrow, options: { element: arrowRef.current } },\n {\n name: 'preventOverflow',\n options: {\n tether: !modifiers.find(m => m.name === 'sameWidth'),\n padding: 16\n }\n },\n {\n ...placeAndContain,\n enabled: !flipEnabled\n },\n ...modifiers\n ];\n }, [arrow, hideOnTargetHidden, modifiers]);\n\n const offset = useMemo(() => {\n const offsetModifier = [...memoedModifiers]\n .reverse()\n .find(m => m.name === 'offset' && m.enabled !== false) as OffsetModifier | undefined;\n return Array.isArray(offsetModifier?.options?.offset)\n ? offsetModifier?.options?.offset[1] ?? 0\n : 0;\n }, [memoedModifiers]);\n\n const { styles, attributes, forceUpdate } = usePopper(target, popperRef.current, {\n placement,\n strategy,\n modifiers: memoedModifiers\n });\n\n if (forceUpdate) forceUpdateRef.current = forceUpdate;\n\n useEffect(() => {\n if (!popperRef.current && !(target instanceof Element)) return;\n\n // Set of elements being observed since ResizeObserver always fires once when observe is called\n const set = new Set<Element>();\n\n const controller = new AbortController();\n\n const observer = new ResizeObserver(entries => {\n let updateQueued = false;\n\n for (const { target: resizeTarget } of entries) {\n if (!set.has(resizeTarget) && !updateQueued) {\n updateQueued = true;\n\n requestAnimationFrame(() => {\n if (!controller.signal.aborted) {\n forceUpdateRef.current?.();\n }\n });\n }\n\n set.delete(resizeTarget);\n }\n });\n\n if (popperRef.current) {\n set.add(popperRef.current);\n observer.observe(popperRef.current);\n }\n if (target instanceof Element) {\n set.add(target);\n observer.observe(target);\n }\n\n return () => {\n controller.abort();\n set.clear();\n observer.disconnect();\n };\n });\n\n useLayoutEffect(() => {\n if (target) {\n initialOffset.current = getRelativeOffset(target, document.documentElement);\n } else {\n initialOffset.current = null;\n }\n });\n\n useEffect(() => {\n if (!showPopover || target === null) return;\n\n let rafId: ReturnType<typeof requestAnimationFrame>;\n\n const checkCoords = () => {\n if (target && initialOffset.current) {\n const newOffset = getRelativeOffset(target, document.documentElement);\n\n if (initialOffset.current.x !== newOffset.x || initialOffset.current.y !== newOffset.y) {\n forceUpdateRef.current?.();\n } else {\n rafId = requestAnimationFrame(checkCoords);\n }\n }\n };\n\n rafId = requestAnimationFrame(checkCoords);\n\n return () => {\n cancelAnimationFrame(rafId);\n };\n });\n\n useEffect(() => {\n if (groupId && show) setActive(uid, groupId);\n\n if (windowIsAvailable) {\n if (timeout.current) clearTimeout(timeout.current);\n timeout.current = window.setTimeout(() => {\n setShowPopover(show);\n }, delays[show ? showDelay : hideDelay]);\n } else {\n setShowPopover(show);\n }\n }, [show]);\n\n useEffect(() => {\n return () => clearTimeout(timeout.current);\n }, []);\n\n useAfterInitialEffect(() => {\n if (!showPopover) {\n onHide?.();\n }\n }, [showPopover]);\n\n useEffect(() => {\n if (groupId && popovers[groupId] && popovers[groupId] !== uid) {\n setShowPopover(false);\n }\n }, [groupId ? popovers[groupId] : undefined]);\n\n const content = (\n <StyledPopover\n {...restProps}\n offset={offset}\n ref={popperRef}\n style={{ ...style, ...styles.popper }}\n {...attributes.popper}\n >\n {arrow && <StyledPopoverArrow ref={arrowRef} style={{ ...styles.arrow }} />}\n {children}\n </StyledPopover>\n );\n\n if (!target || !showPopover || (groupId && !checkActive(uid, groupId))) return null;\n\n return portal && portalTarget ? createPortal(content, portalTarget) : content;\n }\n);\n\nexport default Popover;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"URLDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/URL/URLDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA8B,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"URLDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/URL/URLDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAA8B,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAItE,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IACrC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,eAAe,GAAG,gBAAgB,GAAG,cAAc,CAAC,CAAC;CACpF;AA4BD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA8BjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import Link from '../Link';
|
|
4
4
|
import QRCode from '../QRCode';
|
|
5
|
+
import NoValue from '../NoValue/NoValue';
|
|
5
6
|
/**
|
|
6
7
|
* Function gets the url as a string and converts it to a HTML markup with whitespace opportunity elements.
|
|
7
8
|
* It helps breaking a long url correctly to avoid parent container overflow issues
|
|
@@ -27,7 +28,7 @@ const generateUrlMarkup = (url) => {
|
|
|
27
28
|
}, []);
|
|
28
29
|
};
|
|
29
30
|
const URLDisplay = forwardRef(({ value, displayText, variant = 'link', ...restProps }, ref) => {
|
|
30
|
-
const displayValue = value ?
|
|
31
|
+
const displayValue = value ? displayText || generateUrlMarkup(value) : _jsx(NoValue, {});
|
|
31
32
|
if (variant === 'text' || !value) {
|
|
32
33
|
return (_jsx("span", { ref: ref, ...restProps, children: displayValue }));
|
|
33
34
|
}
|