@veeqo/ui 9.14.1 → 9.14.2

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.
@@ -35,7 +35,7 @@ const addPrefixToUrl = (url) => { var _a; return `${((_a = window.veeqoContext)
35
35
  */
36
36
  const createContextAwareUrl = (url) => {
37
37
  // Don't modify anchor URLs (they should be treated as absolute)
38
- if (isAnchorUrl(url) || !shouldAddPrefix() || !isRelativeUrl(url))
38
+ if (!url || isAnchorUrl(url) || !shouldAddPrefix() || !isRelativeUrl(url))
39
39
  return url;
40
40
  return addPrefixToUrl(url);
41
41
  };
@@ -1 +1 @@
1
- {"version":3,"file":"urlUtils.cjs","sources":["../../../../src/components/Anchor/utils/urlUtils.ts"],"sourcesContent":["/**\n * Utility functions for URL processing\n */\n\n/**\n * Checks if the URL should have a prefix added based on the current context\n * @returns {boolean} Whether a prefix should be added\n */\nexport const shouldAddPrefix = (): boolean =>\n !!(\n window.veeqoContext &&\n window.veeqoContext.vqHost !== 'standalone' &&\n window.veeqoContext.baseUrl\n );\n\n/**\n * Checks if a URL is relative (not starting with http://, https://, or //)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is relative\n */\nexport const isRelativeUrl = (url: string): boolean => !url.match(/^(https?:\\/\\/|\\/\\/)/);\n\n/**\n * Checks if a URL is an anchor link (starts with #)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is an anchor link\n */\nexport const isAnchorUrl = (url: string): boolean => url.startsWith('#');\n\n/**\n * Adds the appropriate prefix to a URL based on the current context\n * @param {string} url - The URL to add a prefix to\n * @returns {string} The URL with prefix added if needed\n */\nexport const addPrefixToUrl = (url: string): string =>\n `${window.veeqoContext?.baseUrl || ''}${url.startsWith('/') ? '' : '/'}${url}`;\n\n/**\n * Processes a URL by adding the appropriate prefix if needed\n * @param {string} url - The URL to process\n * @returns {string} The processed URL\n */\nexport const createContextAwareUrl = (url: string): string => {\n // Don't modify anchor URLs (they should be treated as absolute)\n if (isAnchorUrl(url) || !shouldAddPrefix() || !isRelativeUrl(url)) return url;\n\n return addPrefixToUrl(url);\n};\n"],"names":[],"mappings":";;AAAA;;AAEG;AAEH;;;AAGG;AACI,MAAM,eAAe,GAAG,MAC7B,CAAC,EACC,MAAM,CAAC,YAAY;AACnB,IAAA,MAAM,CAAC,YAAY,CAAC,MAAM,KAAK,YAAY;AAC3C,IAAA,MAAM,CAAC,YAAY,CAAC,OAAO;AAG/B;;;;AAIG;AACU,MAAA,aAAa,GAAG,CAAC,GAAW,KAAc,CAAC,GAAG,CAAC,KAAK,CAAC,qBAAqB;AAEvF;;;;AAIG;AACI,MAAM,WAAW,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,GAAG;AAEvE;;;;AAIG;AACU,MAAA,cAAc,GAAG,CAAC,GAAW,KAAY,EAAA,IAAA,EAAA,CAAA,CACpD,OAAA,CAAA,EAAG,CAAA,CAAA,EAAA,GAAA,MAAM,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,OAAO,KAAI,EAAE,CAAG,EAAA,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,CAAA,EAAG,GAAG,CAAE,CAAA,CAAA;AAEhF;;;;AAIG;AACU,MAAA,qBAAqB,GAAG,CAAC,GAAW,KAAY;;AAE3D,IAAA,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;AAAE,QAAA,OAAO,GAAG;AAE7E,IAAA,OAAO,cAAc,CAAC,GAAG,CAAC;AAC5B;;;;;;;;"}
1
+ {"version":3,"file":"urlUtils.cjs","sources":["../../../../src/components/Anchor/utils/urlUtils.ts"],"sourcesContent":["/**\n * Utility functions for URL processing\n */\n\n/**\n * Checks if the URL should have a prefix added based on the current context\n * @returns {boolean} Whether a prefix should be added\n */\nexport const shouldAddPrefix = (): boolean =>\n !!(\n window.veeqoContext &&\n window.veeqoContext.vqHost !== 'standalone' &&\n window.veeqoContext.baseUrl\n );\n\n/**\n * Checks if a URL is relative (not starting with http://, https://, or //)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is relative\n */\nexport const isRelativeUrl = (url: string): boolean => !url.match(/^(https?:\\/\\/|\\/\\/)/);\n\n/**\n * Checks if a URL is an anchor link (starts with #)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is an anchor link\n */\nexport const isAnchorUrl = (url: string): boolean => url.startsWith('#');\n\n/**\n * Adds the appropriate prefix to a URL based on the current context\n * @param {string} url - The URL to add a prefix to\n * @returns {string} The URL with prefix added if needed\n */\nexport const addPrefixToUrl = (url: string): string =>\n `${window.veeqoContext?.baseUrl || ''}${url.startsWith('/') ? '' : '/'}${url}`;\n\n/**\n * Processes a URL by adding the appropriate prefix if needed\n * @param {string} url - The URL to process\n * @returns {string} The processed URL\n */\nexport const createContextAwareUrl = (url: string | undefined): string | undefined => {\n // Don't modify anchor URLs (they should be treated as absolute)\n if (!url || isAnchorUrl(url) || !shouldAddPrefix() || !isRelativeUrl(url)) return url;\n\n return addPrefixToUrl(url);\n};\n"],"names":[],"mappings":";;AAAA;;AAEG;AAEH;;;AAGG;AACI,MAAM,eAAe,GAAG,MAC7B,CAAC,EACC,MAAM,CAAC,YAAY;AACnB,IAAA,MAAM,CAAC,YAAY,CAAC,MAAM,KAAK,YAAY;AAC3C,IAAA,MAAM,CAAC,YAAY,CAAC,OAAO;AAG/B;;;;AAIG;AACU,MAAA,aAAa,GAAG,CAAC,GAAW,KAAc,CAAC,GAAG,CAAC,KAAK,CAAC,qBAAqB;AAEvF;;;;AAIG;AACI,MAAM,WAAW,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,GAAG;AAEvE;;;;AAIG;AACU,MAAA,cAAc,GAAG,CAAC,GAAW,KAAY,EAAA,IAAA,EAAA,CAAA,CACpD,OAAA,CAAA,EAAG,CAAA,CAAA,EAAA,GAAA,MAAM,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,OAAO,KAAI,EAAE,CAAG,EAAA,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,CAAA,EAAG,GAAG,CAAE,CAAA,CAAA;AAEhF;;;;AAIG;AACU,MAAA,qBAAqB,GAAG,CAAC,GAAuB,KAAwB;;AAEnF,IAAA,IAAI,CAAC,GAAG,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;AAAE,QAAA,OAAO,GAAG;AAErF,IAAA,OAAO,cAAc,CAAC,GAAG,CAAC;AAC5B;;;;;;;;"}
@@ -29,4 +29,4 @@ export declare const addPrefixToUrl: (url: string) => string;
29
29
  * @param {string} url - The URL to process
30
30
  * @returns {string} The processed URL
31
31
  */
32
- export declare const createContextAwareUrl: (url: string) => string;
32
+ export declare const createContextAwareUrl: (url: string | undefined) => string | undefined;
@@ -33,7 +33,7 @@ const addPrefixToUrl = (url) => { var _a; return `${((_a = window.veeqoContext)
33
33
  */
34
34
  const createContextAwareUrl = (url) => {
35
35
  // Don't modify anchor URLs (they should be treated as absolute)
36
- if (isAnchorUrl(url) || !shouldAddPrefix() || !isRelativeUrl(url))
36
+ if (!url || isAnchorUrl(url) || !shouldAddPrefix() || !isRelativeUrl(url))
37
37
  return url;
38
38
  return addPrefixToUrl(url);
39
39
  };
@@ -1 +1 @@
1
- {"version":3,"file":"urlUtils.js","sources":["../../../../src/components/Anchor/utils/urlUtils.ts"],"sourcesContent":["/**\n * Utility functions for URL processing\n */\n\n/**\n * Checks if the URL should have a prefix added based on the current context\n * @returns {boolean} Whether a prefix should be added\n */\nexport const shouldAddPrefix = (): boolean =>\n !!(\n window.veeqoContext &&\n window.veeqoContext.vqHost !== 'standalone' &&\n window.veeqoContext.baseUrl\n );\n\n/**\n * Checks if a URL is relative (not starting with http://, https://, or //)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is relative\n */\nexport const isRelativeUrl = (url: string): boolean => !url.match(/^(https?:\\/\\/|\\/\\/)/);\n\n/**\n * Checks if a URL is an anchor link (starts with #)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is an anchor link\n */\nexport const isAnchorUrl = (url: string): boolean => url.startsWith('#');\n\n/**\n * Adds the appropriate prefix to a URL based on the current context\n * @param {string} url - The URL to add a prefix to\n * @returns {string} The URL with prefix added if needed\n */\nexport const addPrefixToUrl = (url: string): string =>\n `${window.veeqoContext?.baseUrl || ''}${url.startsWith('/') ? '' : '/'}${url}`;\n\n/**\n * Processes a URL by adding the appropriate prefix if needed\n * @param {string} url - The URL to process\n * @returns {string} The processed URL\n */\nexport const createContextAwareUrl = (url: string): string => {\n // Don't modify anchor URLs (they should be treated as absolute)\n if (isAnchorUrl(url) || !shouldAddPrefix() || !isRelativeUrl(url)) return url;\n\n return addPrefixToUrl(url);\n};\n"],"names":[],"mappings":"AAAA;;AAEG;AAEH;;;AAGG;AACI,MAAM,eAAe,GAAG,MAC7B,CAAC,EACC,MAAM,CAAC,YAAY;AACnB,IAAA,MAAM,CAAC,YAAY,CAAC,MAAM,KAAK,YAAY;AAC3C,IAAA,MAAM,CAAC,YAAY,CAAC,OAAO;AAG/B;;;;AAIG;AACU,MAAA,aAAa,GAAG,CAAC,GAAW,KAAc,CAAC,GAAG,CAAC,KAAK,CAAC,qBAAqB;AAEvF;;;;AAIG;AACI,MAAM,WAAW,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,GAAG;AAEvE;;;;AAIG;AACU,MAAA,cAAc,GAAG,CAAC,GAAW,KAAY,EAAA,IAAA,EAAA,CAAA,CACpD,OAAA,CAAA,EAAG,CAAA,CAAA,EAAA,GAAA,MAAM,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,OAAO,KAAI,EAAE,CAAG,EAAA,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,CAAA,EAAG,GAAG,CAAE,CAAA,CAAA;AAEhF;;;;AAIG;AACU,MAAA,qBAAqB,GAAG,CAAC,GAAW,KAAY;;AAE3D,IAAA,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;AAAE,QAAA,OAAO,GAAG;AAE7E,IAAA,OAAO,cAAc,CAAC,GAAG,CAAC;AAC5B;;;;"}
1
+ {"version":3,"file":"urlUtils.js","sources":["../../../../src/components/Anchor/utils/urlUtils.ts"],"sourcesContent":["/**\n * Utility functions for URL processing\n */\n\n/**\n * Checks if the URL should have a prefix added based on the current context\n * @returns {boolean} Whether a prefix should be added\n */\nexport const shouldAddPrefix = (): boolean =>\n !!(\n window.veeqoContext &&\n window.veeqoContext.vqHost !== 'standalone' &&\n window.veeqoContext.baseUrl\n );\n\n/**\n * Checks if a URL is relative (not starting with http://, https://, or //)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is relative\n */\nexport const isRelativeUrl = (url: string): boolean => !url.match(/^(https?:\\/\\/|\\/\\/)/);\n\n/**\n * Checks if a URL is an anchor link (starts with #)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is an anchor link\n */\nexport const isAnchorUrl = (url: string): boolean => url.startsWith('#');\n\n/**\n * Adds the appropriate prefix to a URL based on the current context\n * @param {string} url - The URL to add a prefix to\n * @returns {string} The URL with prefix added if needed\n */\nexport const addPrefixToUrl = (url: string): string =>\n `${window.veeqoContext?.baseUrl || ''}${url.startsWith('/') ? '' : '/'}${url}`;\n\n/**\n * Processes a URL by adding the appropriate prefix if needed\n * @param {string} url - The URL to process\n * @returns {string} The processed URL\n */\nexport const createContextAwareUrl = (url: string | undefined): string | undefined => {\n // Don't modify anchor URLs (they should be treated as absolute)\n if (!url || isAnchorUrl(url) || !shouldAddPrefix() || !isRelativeUrl(url)) return url;\n\n return addPrefixToUrl(url);\n};\n"],"names":[],"mappings":"AAAA;;AAEG;AAEH;;;AAGG;AACI,MAAM,eAAe,GAAG,MAC7B,CAAC,EACC,MAAM,CAAC,YAAY;AACnB,IAAA,MAAM,CAAC,YAAY,CAAC,MAAM,KAAK,YAAY;AAC3C,IAAA,MAAM,CAAC,YAAY,CAAC,OAAO;AAG/B;;;;AAIG;AACU,MAAA,aAAa,GAAG,CAAC,GAAW,KAAc,CAAC,GAAG,CAAC,KAAK,CAAC,qBAAqB;AAEvF;;;;AAIG;AACI,MAAM,WAAW,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,GAAG;AAEvE;;;;AAIG;AACU,MAAA,cAAc,GAAG,CAAC,GAAW,KAAY,EAAA,IAAA,EAAA,CAAA,CACpD,OAAA,CAAA,EAAG,CAAA,CAAA,EAAA,GAAA,MAAM,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,OAAO,KAAI,EAAE,CAAG,EAAA,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,CAAA,EAAG,GAAG,CAAE,CAAA,CAAA;AAEhF;;;;AAIG;AACU,MAAA,qBAAqB,GAAG,CAAC,GAAuB,KAAwB;;AAEnF,IAAA,IAAI,CAAC,GAAG,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;AAAE,QAAA,OAAO,GAAG;AAErF,IAAA,OAAO,cAAc,CAAC,GAAG,CAAC;AAC5B;;;;"}
@@ -7,6 +7,7 @@ var PlaceholderImage = require('./components/PlaceholderImage.cjs');
7
7
  var styled = require('./components/styled.cjs');
8
8
  var utils = require('./utils.cjs');
9
9
  var buildClassnames = require('../../utils/buildClassnames.cjs');
10
+ var urlUtils = require('../Anchor/utils/urlUtils.cjs');
10
11
 
11
12
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
12
13
 
@@ -15,6 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
16
  const Image = ({ src, alt = '', className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
16
17
  const classNames = utils.generateClassNames(className);
17
18
  const e2eClassNames = utils.generateClassNames(e2eClassName);
19
+ const contextAwareSrc = urlUtils.createContextAwareUrl(src);
18
20
  const [isPreviewOpen, setIsPreviewOpen] = React.useState(false);
19
21
  const [imageState, setImageState] = React.useState({ isLoaded: false, isError: false });
20
22
  const [referenceElement, setReferenceElement] = React__default.default.useState(null);
@@ -36,7 +38,7 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
36
38
  const onError = () => setImageState({ isLoaded: true, isError: true });
37
39
  const isImageHidden = !imageState.isLoaded || imageState.isError;
38
40
  return (React__default.default.createElement(styled.Container, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container, className]) },
39
- React__default.default.createElement(styled.CommonImage, { src: src, alt: alt, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.image, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.image]), width: width, height: height, onLoad: onLoad, onError: onError, previewEnabled: previewEnabled, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
41
+ React__default.default.createElement(styled.CommonImage, { src: contextAwareSrc, alt: alt, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.image, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.image]), width: width, height: height, onLoad: onLoad, onError: onError, previewEnabled: previewEnabled, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
40
42
  !disablePlaceholder &&
41
43
  isImageHidden &&
42
44
  (placeholder || (React__default.default.createElement(PlaceholderImage.PlaceholderImage, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.placeholder, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
@@ -45,7 +47,7 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
45
47
  classNames === null || classNames === undefined ? undefined : classNames.previewImageContainer,
46
48
  e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.previewImageContainer,
47
49
  ]) },
48
- React__default.default.createElement(styled.PreviewImage, { src: src, alt: "", width: previewWidth, height: previewHeight })), document.body)));
50
+ React__default.default.createElement(styled.PreviewImage, { src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
49
51
  };
50
52
 
51
53
  exports.Image = Image;
@@ -1 +1 @@
1
- {"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { Container, CommonImage, PreviewImageContainer, PreviewImage } from './components/styled';\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\ntype ImageProps = {\n src: string;\n alt?: string;\n className?: string;\n e2eClassName?: string;\n width?: string;\n height?: string;\n previewWidth?: string;\n previewHeight?: string;\n previewPlacement?: Placement;\n previewEnabled?: boolean;\n placeholder?: React.ReactNode;\n placeholderWidth?: string;\n placeholderHeight?: string;\n disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n src,\n alt = '',\n className,\n e2eClassName,\n width,\n height,\n previewWidth,\n previewHeight,\n previewPlacement = 'right',\n previewEnabled = false,\n placeholder,\n placeholderWidth,\n placeholderHeight,\n disablePlaceholder = false,\n}: ImageProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);\n const { styles, attributes } = usePopper(referenceElement, popperElement, {\n placement: previewPlacement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 12],\n },\n },\n ],\n });\n\n const openImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n [previewEnabled],\n );\n const closeImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n [previewEnabled],\n );\n\n const onLoad = () => setImageState({ isLoaded: true, isError: false });\n const onError = () => setImageState({ isLoaded: true, isError: true });\n\n const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n return (\n <Container\n className={buildClassnames([classNames?.container, e2eClassNames?.container, className])}\n >\n <CommonImage\n src={src}\n alt={alt}\n className={buildClassnames([classNames?.image, e2eClassNames?.image])}\n width={width}\n height={height}\n onLoad={onLoad}\n onError={onError}\n previewEnabled={previewEnabled}\n onMouseEnter={openImagePreview}\n onMouseLeave={closeImagePreview}\n style={isImageHidden ? { display: 'none' } : {}}\n ref={setReferenceElement}\n />\n {!disablePlaceholder &&\n isImageHidden &&\n (placeholder || (\n <PlaceholderImage\n className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n width={placeholderWidth || width}\n height={placeholderHeight || height}\n />\n ))}\n {isPreviewOpen &&\n createPortal(\n <PreviewImageContainer\n ref={setPopperElement}\n style={styles.popper}\n {...attributes.popper}\n className={buildClassnames([\n classNames?.previewImageContainer,\n e2eClassNames?.previewImageContainer,\n ])}\n >\n <PreviewImage src={src} alt=\"\" width={previewWidth} height={previewHeight} />\n </PreviewImageContainer>,\n document.body,\n )}\n </Container>\n );\n};\n"],"names":["generateClassNames","useState","React","usePopper","useCallback","Container","buildClassnames","CommonImage","PlaceholderImage","createPortal","PreviewImageContainer","PreviewImage"],"mappings":"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"}
1
+ {"version":3,"file":"Image.cjs","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { Container, CommonImage, PreviewImageContainer, PreviewImage } from './components/styled';\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\n\ntype ImageProps = {\n src: string;\n alt?: string;\n className?: string;\n e2eClassName?: string;\n width?: string;\n height?: string;\n previewWidth?: string;\n previewHeight?: string;\n previewPlacement?: Placement;\n previewEnabled?: boolean;\n placeholder?: React.ReactNode;\n placeholderWidth?: string;\n placeholderHeight?: string;\n disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n src,\n alt = '',\n className,\n e2eClassName,\n width,\n height,\n previewWidth,\n previewHeight,\n previewPlacement = 'right',\n previewEnabled = false,\n placeholder,\n placeholderWidth,\n placeholderHeight,\n disablePlaceholder = false,\n}: ImageProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n const contextAwareSrc = createContextAwareUrl(src);\n\n const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);\n const { styles, attributes } = usePopper(referenceElement, popperElement, {\n placement: previewPlacement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 12],\n },\n },\n ],\n });\n\n const openImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n [previewEnabled],\n );\n const closeImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n [previewEnabled],\n );\n\n const onLoad = () => setImageState({ isLoaded: true, isError: false });\n const onError = () => setImageState({ isLoaded: true, isError: true });\n\n const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n return (\n <Container\n className={buildClassnames([classNames?.container, e2eClassNames?.container, className])}\n >\n <CommonImage\n src={contextAwareSrc}\n alt={alt}\n className={buildClassnames([classNames?.image, e2eClassNames?.image])}\n width={width}\n height={height}\n onLoad={onLoad}\n onError={onError}\n previewEnabled={previewEnabled}\n onMouseEnter={openImagePreview}\n onMouseLeave={closeImagePreview}\n style={isImageHidden ? { display: 'none' } : {}}\n ref={setReferenceElement}\n />\n {!disablePlaceholder &&\n isImageHidden &&\n (placeholder || (\n <PlaceholderImage\n className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n width={placeholderWidth || width}\n height={placeholderHeight || height}\n />\n ))}\n {isPreviewOpen &&\n createPortal(\n <PreviewImageContainer\n ref={setPopperElement}\n style={styles.popper}\n {...attributes.popper}\n className={buildClassnames([\n classNames?.previewImageContainer,\n e2eClassNames?.previewImageContainer,\n ])}\n >\n <PreviewImage\n src={contextAwareSrc}\n alt=\"\"\n width={previewWidth}\n height={previewHeight}\n />\n </PreviewImageContainer>,\n document.body,\n )}\n </Container>\n );\n};\n"],"names":["generateClassNames","createContextAwareUrl","useState","React","usePopper","useCallback","Container","buildClassnames","CommonImage","PlaceholderImage","createPortal","PreviewImageContainer","PreviewImage"],"mappings":"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"}
@@ -5,10 +5,12 @@ import { PlaceholderImage } from './components/PlaceholderImage.js';
5
5
  import { Container, CommonImage, PreviewImageContainer, PreviewImage } from './components/styled.js';
6
6
  import { generateClassNames } from './utils.js';
7
7
  import { buildClassnames } from '../../utils/buildClassnames.js';
8
+ import { createContextAwareUrl } from '../Anchor/utils/urlUtils.js';
8
9
 
9
10
  const Image = ({ src, alt = '', className, e2eClassName, width, height, previewWidth, previewHeight, previewPlacement = 'right', previewEnabled = false, placeholder, placeholderWidth, placeholderHeight, disablePlaceholder = false, }) => {
10
11
  const classNames = generateClassNames(className);
11
12
  const e2eClassNames = generateClassNames(e2eClassName);
13
+ const contextAwareSrc = createContextAwareUrl(src);
12
14
  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
13
15
  const [imageState, setImageState] = useState({ isLoaded: false, isError: false });
14
16
  const [referenceElement, setReferenceElement] = React__default.useState(null);
@@ -30,7 +32,7 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
30
32
  const onError = () => setImageState({ isLoaded: true, isError: true });
31
33
  const isImageHidden = !imageState.isLoaded || imageState.isError;
32
34
  return (React__default.createElement(Container, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container, className]) },
33
- React__default.createElement(CommonImage, { src: src, alt: alt, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.image, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.image]), width: width, height: height, onLoad: onLoad, onError: onError, previewEnabled: previewEnabled, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
35
+ React__default.createElement(CommonImage, { src: contextAwareSrc, alt: alt, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.image, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.image]), width: width, height: height, onLoad: onLoad, onError: onError, previewEnabled: previewEnabled, onMouseEnter: openImagePreview, onMouseLeave: closeImagePreview, style: isImageHidden ? { display: 'none' } : {}, ref: setReferenceElement }),
34
36
  !disablePlaceholder &&
35
37
  isImageHidden &&
36
38
  (placeholder || (React__default.createElement(PlaceholderImage, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.placeholder, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.placeholder]), width: placeholderWidth || width, height: placeholderHeight || height }))),
@@ -39,7 +41,7 @@ const Image = ({ src, alt = '', className, e2eClassName, width, height, previewW
39
41
  classNames === null || classNames === undefined ? undefined : classNames.previewImageContainer,
40
42
  e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.previewImageContainer,
41
43
  ]) },
42
- React__default.createElement(PreviewImage, { src: src, alt: "", width: previewWidth, height: previewHeight })), document.body)));
44
+ React__default.createElement(PreviewImage, { src: contextAwareSrc, alt: "", width: previewWidth, height: previewHeight })), document.body)));
43
45
  };
44
46
 
45
47
  export { Image };
@@ -1 +1 @@
1
- {"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { Container, CommonImage, PreviewImageContainer, PreviewImage } from './components/styled';\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\ntype ImageProps = {\n src: string;\n alt?: string;\n className?: string;\n e2eClassName?: string;\n width?: string;\n height?: string;\n previewWidth?: string;\n previewHeight?: string;\n previewPlacement?: Placement;\n previewEnabled?: boolean;\n placeholder?: React.ReactNode;\n placeholderWidth?: string;\n placeholderHeight?: string;\n disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n src,\n alt = '',\n className,\n e2eClassName,\n width,\n height,\n previewWidth,\n previewHeight,\n previewPlacement = 'right',\n previewEnabled = false,\n placeholder,\n placeholderWidth,\n placeholderHeight,\n disablePlaceholder = false,\n}: ImageProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n\n const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);\n const { styles, attributes } = usePopper(referenceElement, popperElement, {\n placement: previewPlacement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 12],\n },\n },\n ],\n });\n\n const openImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n [previewEnabled],\n );\n const closeImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n [previewEnabled],\n );\n\n const onLoad = () => setImageState({ isLoaded: true, isError: false });\n const onError = () => setImageState({ isLoaded: true, isError: true });\n\n const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n return (\n <Container\n className={buildClassnames([classNames?.container, e2eClassNames?.container, className])}\n >\n <CommonImage\n src={src}\n alt={alt}\n className={buildClassnames([classNames?.image, e2eClassNames?.image])}\n width={width}\n height={height}\n onLoad={onLoad}\n onError={onError}\n previewEnabled={previewEnabled}\n onMouseEnter={openImagePreview}\n onMouseLeave={closeImagePreview}\n style={isImageHidden ? { display: 'none' } : {}}\n ref={setReferenceElement}\n />\n {!disablePlaceholder &&\n isImageHidden &&\n (placeholder || (\n <PlaceholderImage\n className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n width={placeholderWidth || width}\n height={placeholderHeight || height}\n />\n ))}\n {isPreviewOpen &&\n createPortal(\n <PreviewImageContainer\n ref={setPopperElement}\n style={styles.popper}\n {...attributes.popper}\n className={buildClassnames([\n classNames?.previewImageContainer,\n e2eClassNames?.previewImageContainer,\n ])}\n >\n <PreviewImage src={src} alt=\"\" width={previewWidth} height={previewHeight} />\n </PreviewImageContainer>,\n document.body,\n )}\n </Container>\n );\n};\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\nimport { PlaceholderImage } from './components/PlaceholderImage';\n\nimport { Container, CommonImage, PreviewImageContainer, PreviewImage } from './components/styled';\nimport { generateClassNames } from './utils';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { createContextAwareUrl } from '../Anchor/utils/urlUtils';\n\ntype ImageProps = {\n src: string;\n alt?: string;\n className?: string;\n e2eClassName?: string;\n width?: string;\n height?: string;\n previewWidth?: string;\n previewHeight?: string;\n previewPlacement?: Placement;\n previewEnabled?: boolean;\n placeholder?: React.ReactNode;\n placeholderWidth?: string;\n placeholderHeight?: string;\n disablePlaceholder?: boolean;\n};\n\nexport const Image = ({\n src,\n alt = '',\n className,\n e2eClassName,\n width,\n height,\n previewWidth,\n previewHeight,\n previewPlacement = 'right',\n previewEnabled = false,\n placeholder,\n placeholderWidth,\n placeholderHeight,\n disablePlaceholder = false,\n}: ImageProps) => {\n const classNames = generateClassNames(className);\n const e2eClassNames = generateClassNames(e2eClassName);\n const contextAwareSrc = createContextAwareUrl(src);\n\n const [isPreviewOpen, setIsPreviewOpen] = useState(false);\n const [imageState, setImageState] = useState({ isLoaded: false, isError: false });\n\n const [referenceElement, setReferenceElement] = React.useState<HTMLImageElement | null>(null);\n const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);\n const { styles, attributes } = usePopper(referenceElement, popperElement, {\n placement: previewPlacement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 12],\n },\n },\n ],\n });\n\n const openImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(true) : {}),\n [previewEnabled],\n );\n const closeImagePreview = useCallback(\n () => (previewEnabled ? setIsPreviewOpen(false) : {}),\n [previewEnabled],\n );\n\n const onLoad = () => setImageState({ isLoaded: true, isError: false });\n const onError = () => setImageState({ isLoaded: true, isError: true });\n\n const isImageHidden = !imageState.isLoaded || imageState.isError;\n\n return (\n <Container\n className={buildClassnames([classNames?.container, e2eClassNames?.container, className])}\n >\n <CommonImage\n src={contextAwareSrc}\n alt={alt}\n className={buildClassnames([classNames?.image, e2eClassNames?.image])}\n width={width}\n height={height}\n onLoad={onLoad}\n onError={onError}\n previewEnabled={previewEnabled}\n onMouseEnter={openImagePreview}\n onMouseLeave={closeImagePreview}\n style={isImageHidden ? { display: 'none' } : {}}\n ref={setReferenceElement}\n />\n {!disablePlaceholder &&\n isImageHidden &&\n (placeholder || (\n <PlaceholderImage\n className={buildClassnames([classNames?.placeholder, e2eClassNames?.placeholder])}\n width={placeholderWidth || width}\n height={placeholderHeight || height}\n />\n ))}\n {isPreviewOpen &&\n createPortal(\n <PreviewImageContainer\n ref={setPopperElement}\n style={styles.popper}\n {...attributes.popper}\n className={buildClassnames([\n classNames?.previewImageContainer,\n e2eClassNames?.previewImageContainer,\n ])}\n >\n <PreviewImage\n src={contextAwareSrc}\n alt=\"\"\n width={previewWidth}\n height={previewHeight}\n />\n </PreviewImageContainer>,\n document.body,\n )}\n </Container>\n );\n};\n"],"names":["React"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veeqo/ui",
3
- "version": "9.14.1",
3
+ "version": "9.14.2",
4
4
  "description": "New optimised component library for Veeqo.",
5
5
  "author": "Robert Wealthall",
6
6
  "license": "ISC",