npm - @chayns-components/core - Versions diffs - 5.5.41 → 5.5.45 - Mend

@chayns-components/core 5.5.41 → 5.5.45

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.

Files changed (27) hide show

package/AGENTS.md CHANGED Viewed

@@ -2532,6 +2532,27 @@ import { GridImage } from '@chayns-components/core';
 />
 ```
+#### One Image
+```tsx
+<GridImage
+    images={['https://tsimg.cloud/77896-21884/8aee1a304297729a4542b97325940a656a3da8f2.png']}
+    size={250}
+/>
+```
+#### Two Images
+```tsx
+<GridImage
+    images={[
+            'https://tsimg.cloud/77896-21884/8aee1a304297729a4542b97325940a656a3da8f2.png',
+            'https://tsimg.cloud/77896-21884/54a117f35e5fb57520e64471461af5491c0eff06.png',
+        ]}
+    size={250}
+/>
+```
 ### Props
 | name | type | required | description |
@@ -5854,7 +5875,7 @@ import { Button, Truncation } from '@chayns-components/core';
 ```tsx
 <Truncation
-    collapsedHeight={100}
+    collapsedHeight={125}
 >
     {
         <div>
@@ -5879,7 +5900,7 @@ import { Button, Truncation } from '@chayns-components/core';
 ```tsx
 <Truncation
-    collapsedHeight={100}
+    collapsedHeight={125}
 >
     {
         <>
@@ -5912,7 +5933,7 @@ import { Button, Truncation } from '@chayns-components/core';
 ```tsx
 <Truncation
-    collapsedHeight={100}
+    collapsedHeight={125}
 >
     {
         <div>
@@ -5937,7 +5958,7 @@ import { Button, Truncation } from '@chayns-components/core';
 ```tsx
 <Truncation
-    collapsedHeight={100}
+    collapsedHeight={125}
 >
     {<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>}
 </Truncation>
@@ -5947,7 +5968,7 @@ import { Button, Truncation } from '@chayns-components/core';
 ```tsx
 <Truncation
-    collapsedHeight={100}
+    collapsedHeight={125}
 >
     {
         <p>

package/lib/cjs/components/grid-image/GridImage.js CHANGED Viewed

@@ -43,7 +43,7 @@ const GridImage = ({
   const handleLeftImageLoaded = (0, _react.useCallback)(() => setHasLoadedLeftImage(true), []);
   const handleTopRightImageLoaded = (0, _react.useCallback)(() => setHasLoadedTopRightImage(true), []);
   const handleBottomRightImageLoaded = (0, _react.useCallback)(() => setHasLoadedBottomRightImage(true), []);
-  const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
+  const isGridImageHidden = !hasLoadedLeftImage || images.length > 1 && !hasLoadedTopRightImage || images.length > 2 && !hasLoadedBottomRightImage;
   return /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridImage, {
     ref: gridImageRef,
     $background: background,
@@ -53,7 +53,23 @@ const GridImage = ({
     onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
     tabIndex: isKeyboardFocusable ? 0 : -1,
     role: isClickable ? 'button' : undefined
-  }, /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridLeftImage, {
+  }, images.length === 1 && /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridSingleImage, {
+    $isHidden: isGridImageHidden,
+    onLoad: handleLeftImageLoaded,
+    src: images[0]
+  }), images.length === 2 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridTwoImage, {
+    $isHidden: isGridImageHidden,
+    $isLeft: true,
+    $size: size,
+    onLoad: handleLeftImageLoaded,
+    src: images[0]
+  }), /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridTwoImage, {
+    $isHidden: isGridImageHidden,
+    $isLeft: false,
+    $size: size,
+    onLoad: handleTopRightImageLoaded,
+    src: images[1]
+  })), images.length > 2 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridImage.StyledGridLeftImage, {
     $isHidden: isGridImageHidden,
     onLoad: handleLeftImageLoaded,
     $size: size,
@@ -67,7 +83,7 @@ const GridImage = ({
     $isHidden: isGridImageHidden,
     onLoad: handleBottomRightImageLoaded,
     src: images[2]
-  }));
+  })));
 };
 GridImage.displayName = 'GridImage';
 var _default = exports.default = GridImage;

package/lib/cjs/components/grid-image/GridImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_useFocusRingPortal","_useKeyboardFocusHighlighting","_ColorSchemeProvider","_GridImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","useRef","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","handleKeyDown","useCallback","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","StyledGridImage","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","StyledGridLeftImage","$isHidden","onLoad","src","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /*\n The background color of the image.\n /\n background?: CSSProperties['background'];\n /\n The images to be displayed in the `GridImage`. Only the first three images are displayed.\n /\n images: string[];\n /\n Function to be executed when the images are clicked.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n /\n shouldShowRoundImage?: boolean;\n /\n The size of the `GridImage` in pixels, which is set as both width and height.\n /\n size: number;\n /\n Enables keyboard-only focus highlighting for clickable GridImage instances.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n shouldEnableKeyboardHighlighting,\n}) => {\n const gridImageRef = useRef<HTMLDivElement>(null);\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n useFocusRingPortal(gridImageRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n });\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage \|\| !hasLoadedTopRightImage \|\| !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage\n ref={gridImageRef}\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $size={size}\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n >\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_useFocusRingPortal","_useKeyboardFocusHighlighting","_ColorSchemeProvider","_GridImage","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","useRef","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","handleKeyDown","useCallback","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","length","createElement","StyledGridImage","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","StyledGridSingleImage","$isHidden","onLoad","src","Fragment","StyledGridTwoImage","$isLeft","StyledGridLeftImage","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridSingleImage,\n StyledGridTopRightImage,\n StyledGridTwoImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /*\n The background color of the image.\n /\n background?: CSSProperties['background'];\n /\n The images to be displayed in the `GridImage`. Only the first three images are displayed.\n /\n images: string[];\n /\n Function to be executed when the images are clicked.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n /\n shouldShowRoundImage?: boolean;\n /\n The size of the `GridImage` in pixels, which is set as both width and height.\n /\n size: number;\n /\n Enables keyboard-only focus highlighting for clickable GridImage instances.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n shouldEnableKeyboardHighlighting,\n}) => {\n const gridImageRef = useRef<HTMLDivElement>(null);\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n useFocusRingPortal(gridImageRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n });\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage \|\|\n (images.length > 1 && !hasLoadedTopRightImage) \|\|\n (images.length > 2 && !hasLoadedBottomRightImage);\n\n return (\n <StyledGridImage\n ref={gridImageRef}\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $size={size}\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n >\n {images.length === 1 && (\n <StyledGridSingleImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n src={images[0]}\n />\n )}\n {images.length === 2 && (\n <>\n <StyledGridTwoImage\n $isHidden={isGridImageHidden}\n $isLeft\n $size={size}\n onLoad={handleLeftImageLoaded}\n src={images[0]}\n />\n <StyledGridTwoImage\n $isHidden={isGridImageHidden}\n $isLeft={false}\n $size={size}\n onLoad={handleTopRightImageLoaded}\n src={images[1]}\n />\n </>\n )}\n {images.length > 2 && (\n <>\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </>\n )}\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/grid-image/GridImage.styles.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledGridTopRightImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
+exports.StyledGridTwoImage = exports.StyledGridTopRightImage = exports.StyledGridSingleImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
@@ -32,6 +32,40 @@ const StyledGridImage = exports.StyledGridImage = _styledComponents.default.div`
         outline: none;
     }
 `;
+const StyledGridSingleImage = exports.StyledGridSingleImage = _styledComponents.default.img`
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    position: absolute;
+    top: 0;
+    transition: opacity 0.4s ease;
+    width: 100%;
+`;
+const StyledGridTwoImage = exports.StyledGridTwoImage = _styledComponents.default.img`
+    border-right: ${({
+  $isLeft,
+  $size
+}) => $isLeft ? `${$size / 40}px solid white` : undefined};
+    box-sizing: border-box;
+    height: 100%;
+    left: ${({
+  $isLeft
+}) => $isLeft ? 0 : undefined};
+    object-fit: cover;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    position: absolute;
+    right: ${({
+  $isLeft
+}) => $isLeft ? undefined : 0};
+    top: 0;
+    transition: opacity 0.4s ease;
+    width: 50%;
+`;
 const StyledGridLeftImage = exports.StyledGridLeftImage = _styledComponents.default.img`
     border-right: ${({
   $size

package/lib/cjs/components/grid-image/GridImage.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledGridImage","exports","styled","div","$background","theme","$shouldShowRoundImage","undefined","$size","~~StyledGridLeftImage~~","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowRoundImage?: boolean;\n $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background: ${({ $background, theme }: StyledGridImageProps) =>\n $background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ $size }) => $size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ $size }) => $size}px;\n flex: 0 0 auto;\n\n &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledGridLeftImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ $size }) => $size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ $size }) => $size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAgD,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASzC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;~~AAOM~~,MAAMC,~~mBAAmB~~,GAAAR,OAAA,CAAAQ,~~mBAAA~~,GAAGP,yBAAM,CAACQ,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOM,~~MAAMC~~,uBAAuB,~~GAAAX~~,OAAA,~~CAAAW~~,uBAAA,~~GAAGV~~,yBAAM,CAACQ,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,~~MAAME~~,0BAA0B,~~GAAAZ~~,OAAA,~~CAAAY~~,0BAAA,~~GAAGX~~,yBAAM,CAACQ,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledGridImage","exports","styled","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridSingleImage","img","$isHidden","StyledGridTwoImage","$isLeft","StyledGridLeftImage","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowRoundImage?: boolean;\n $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background: ${({ $background, theme }: StyledGridImageProps) =>\n $background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ $size }) => $size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ $size }) => $size}px;\n flex: 0 0 auto;\n\n &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledGridSingleImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridSingleImage = styled.img<StyledGridSingleImageProps>`\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 100%;\n`;\n\ntype StyledGridTwoImageProps = {\n $isHidden: boolean;\n $isLeft: boolean;\n $size: number;\n};\n\nexport const StyledGridTwoImage = styled.img<StyledGridTwoImageProps>`\n border-right: ${({ $isLeft, $size }) => ($isLeft ? `${$size / 40}px solid white` : undefined)};\n box-sizing: border-box;\n height: 100%;\n left: ${({ $isLeft }) => ($isLeft ? 0 : undefined)};\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: ${({ $isLeft }) => ($isLeft ? undefined : 0)};\n top: 0;\n transition: opacity 0.4s ease;\n width: 50%;\n`;\n\ntype StyledGridLeftImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ $size }) => $size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ $size }) => $size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAgD,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASzC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,qBAAqB,GAAAR,OAAA,CAAAQ,qBAAA,GAAGP,yBAAM,CAACQ,GAA+B;AAC3E;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAMC,kBAAkB,GAAAX,OAAA,CAAAW,kBAAA,GAAGV,yBAAM,CAACQ,GAA4B;AACrE,oBAAoB,CAAC;EAAEG,OAAO;EAAEL;AAAM,CAAC,KAAMK,OAAO,GAAG,GAAGL,KAAK,GAAG,EAAE,gBAAgB,GAAGD,SAAU;AACjG;AACA;AACA,YAAY,CAAC;EAAEM;AAAQ,CAAC,KAAMA,OAAO,GAAG,CAAC,GAAGN,SAAU;AACtD;AACA,eAAe,CAAC;EAAEI;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA,aAAa,CAAC;EAAEE;AAAQ,CAAC,KAAMA,OAAO,GAAGN,SAAS,GAAG,CAAE;AACvD;AACA;AACA;AACA,CAAC;AAOM,MAAMO,mBAAmB,GAAAb,OAAA,CAAAa,mBAAA,GAAGZ,yBAAM,CAACQ,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOM,MAAMI,uBAAuB,GAAAd,OAAA,CAAAc,uBAAA,GAAGb,yBAAM,CAACQ,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMK,0BAA0B,GAAAf,OAAA,CAAAe,0BAAA,GAAGd,yBAAM,CAACQ,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/grid-image/GridImage.test.js ADDED Viewed

@@ -0,0 +1,27 @@
+"use strict";
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _vitest = require("vitest");
+var _GridImage = _interopRequireDefault(require("./GridImage"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+(0, _vitest.describe)('GridImage', () => {
+  (0, _vitest.it)('renders one image without additional grid images', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_GridImage.default, {
+      images: ['one.jpg'],
+      size: 100
+    }));
+    (0, _vitest.expect)(_react.screen.getAllByRole('img')).toHaveLength(1);
+    (0, _vitest.expect)(_react.screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');
+  });
+  (0, _vitest.it)('renders two images side by side without a third grid image', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_GridImage.default, {
+      images: ['one.jpg', 'two.jpg'],
+      size: 100
+    }));
+    (0, _vitest.expect)(_react.screen.getAllByRole('img')).toHaveLength(2);
+    (0, _vitest.expect)(_react.screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');
+    (0, _vitest.expect)(_react.screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');
+  });
+});
+//# sourceMappingURL=GridImage.test.js.map

package/lib/cjs/components/grid-image/GridImage.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GridImage.test.js","names":["_react","require","_react2","_interopRequireDefault","_vitest","_GridImage","e","__esModule","default","describe","it","render","createElement","images","size","expect","screen","getAllByRole","toHaveLength","getByRole","toHaveAttribute"],"sources":["../../../../src/components/grid-image/GridImage.test.tsx"],"sourcesContent":["import { render, screen } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it } from 'vitest';\nimport GridImage from './GridImage';\n\ndescribe('GridImage', () => {\n it('renders one image without additional grid images', () => {\n render(<GridImage images={['one.jpg']} size={100} />);\n\n expect(screen.getAllByRole('img')).toHaveLength(1);\n expect(screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');\n });\n\n it('renders two images side by side without a third grid image', () => {\n render(<GridImage images={['one.jpg', 'two.jpg']} size={100} />);\n\n expect(screen.getAllByRole('img')).toHaveLength(2);\n expect(screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');\n expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');\n });\n});\n"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAF,sBAAA,CAAAF,OAAA;AAAoC,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEpC,IAAAG,gBAAQ,EAAC,WAAW,EAAE,MAAM;EACxB,IAAAC,UAAE,EAAC,kDAAkD,EAAE,MAAM;IACzD,IAAAC,aAAM,eAACT,OAAA,CAAAM,OAAA,CAAAI,aAAA,CAACP,UAAA,CAAAG,OAAS;MAACK,MAAM,EAAE,CAAC,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAErD,IAAAC,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClD,IAAAH,cAAM,EAACC,aAAM,CAACG,SAAS,CAAC,KAAK,CAAC,CAAC,CAACC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EACrE,CAAC,CAAC;EAEF,IAAAV,UAAE,EAAC,4DAA4D,EAAE,MAAM;IACnE,IAAAC,aAAM,eAACT,OAAA,CAAAM,OAAA,CAAAI,aAAA,CAACP,UAAA,CAAAG,OAAS;MAACK,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAEhE,IAAAC,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClD,IAAAH,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;IACvE,IAAAL,cAAM,EAACC,aAAM,CAACC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EAC3E,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/lib/cjs/components/truncation/Truncation.js CHANGED Viewed

@@ -14,6 +14,16 @@ var _Truncation = require("./Truncation.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
+const getHeightAtLineBoundary = (element, height, contentHeight) => {
+  const elementTop = element.getBoundingClientRect().top;
+  const targetBottom = elementTop + height;
+  const range = element.ownerDocument.createRange();
+  range.selectNodeContents(element);
+  const lineRects = typeof range.getClientRects === 'function' ? Array.from(range.getClientRects()) : [];
+  const lineBottom = lineRects.map(rect => rect.bottom).filter(bottom => bottom >= targetBottom).sort((first, second) => first - second)[0];
+  range.detach();
+  return lineBottom === undefined ? Math.min(contentHeight, height) : Math.min(contentHeight, lineBottom - elementTop);
+};
 const Truncation = ({
   collapsedHeight = 150,
   clampPosition = _truncation.ClampPosition.Right,
@@ -30,6 +40,7 @@ const Truncation = ({
   const pendingObservedHeight = (0, _react.useRef)(0);
   const [internalIsOpen, setInternalIsOpen] = (0, _react.useState)(Boolean(isOpen));
   const [contentHeight, setContentHeight] = (0, _react.useState)(0);
+  const [collapsedContentHeight, setCollapsedContentHeight] = (0, _react.useState)(collapsedHeight);
   (0, _react.useEffect)(() => {
     if (typeof isOpen === 'boolean') {
       setInternalIsOpen(isOpen);
@@ -55,7 +66,9 @@ const Truncation = ({
         if (!contentRef.current) {
           return;
         }
-        setContentHeight(Math.max(pendingObservedHeight.current, contentRef.current.scrollHeight, contentRef.current.getBoundingClientRect().height));
+        const measuredContentHeight = Math.max(pendingObservedHeight.current, contentRef.current.scrollHeight, contentRef.current.getBoundingClientRect().height);
+        setContentHeight(measuredContentHeight);
+        setCollapsedContentHeight(getHeightAtLineBoundary(contentRef.current, collapsedHeight, measuredContentHeight));
         pendingObservedHeight.current = 0;
       });
     };
@@ -75,7 +88,7 @@ const Truncation = ({
         window.cancelAnimationFrame(frame);
       }
     };
-  }, [children]);
+  }, [children, collapsedHeight]);
   const handleClampClick = (0, _react.useCallback)(event => {
     setInternalIsOpen(current => {
       onChange === null || onChange === void 0 || onChange(event, !current);
@@ -94,8 +107,7 @@ const Truncation = ({
   const internalLessLabel = lessLabel ?? /*#__PURE__*/_react.default.createElement(_textstrings.Translation, {
     textString: _textStrings.default.components.truncation.less
   });
-  const collapsedContentHeight = Math.min(contentHeight || collapsedHeight, collapsedHeight);
-  const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : collapsedContentHeight;
+  const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : Math.min(contentHeight || collapsedHeight, collapsedContentHeight);
   return /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncation, {
     className: "beta-chayns-truncation"
   }, /*#__PURE__*/_react.default.createElement(_Truncation.StyledMotionTruncationContent, {

package/lib/cjs/components/truncation/Truncation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Truncation.js","names":["_textstrings","require","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_useFocusRingPortal","_useKeyboardFocusHighlighting","_truncation","_Truncation","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","Truncation","collapsedHeight","clampPosition","ClampPosition","Right","isOpen","lessLabel","moreLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","contentRef","useRef","clampRef","pendingObservedHeight","internalIsOpen","setInternalIsOpen","useState","Boolean","contentHeight","setContentHeight","hasOverflow","useFocusRingPortal","isEnabled","current","frame","updateContentHeight","entries","_entries$","Math","max","contentRect","height","undefined","requestAnimationFrame","scrollHeight","getBoundingClientRect","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","characterData","childList","subtree","disconnect","cancelAnimationFrame","handleClampClick","useCallback","event","handleClampKeyDown","key","preventDefault","currentTarget","click","internalMoreLabel","createElement","Translation","textString","textStrings","components","truncation","more","internalLessLabel","less","collapsedContentHeight","min","targetHeight","StyledTruncation","className","StyledMotionTruncationContent","animate","initial","transition","type","duration","StyledTruncationContent","ref","StyledTruncationClampWrapper","$position","TextStringProviderSSR","libraries","id","StyledTruncationClampFocusWrapper","StyledTruncationClamp","onClick","onKeyDown","role","tabIndex","_default","exports"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import { TextStringProviderSSR, Translation } from '@chayns/textstrings';\nimport React, {\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { ClampPosition } from '../../types/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampFocusWrapper,\n StyledTruncationClampWrapper,\n StyledTruncationContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n /*\n The elements that should be expanding or collapsing.\n /\n children: ReactElement;\n /\n The position of the clamp.\n /\n clampPosition?: ClampPosition;\n /\n The height of the children element in its collapsed state.\n /\n collapsedHeight?: number;\n /\n If set to true, the content is exposed.\n /\n isOpen?: boolean;\n /\n A text that should be displayed if the content is expanded.\n /\n lessLabel?: string;\n /\n A text that should be displayed if the content is collapsed.\n /\n moreLabel?: string;\n /\n Function to be executed when the component is expanding or collapsing.\n /\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n lessLabel,\n moreLabel,\n onChange,\n children,\n shouldEnableKeyboardHighlighting,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n const contentRef = useRef<HTMLDivElement>(null);\n const clampRef = useRef<HTMLAnchorElement>(null);\n const pendingObservedHeight = useRef(0);\n const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));\n const [contentHeight, setContentHeight] = useState(0);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n }\n }, [isOpen]);\n\n const hasOverflow = contentHeight > collapsedHeight;\n\n useFocusRingPortal(clampRef, {\n isEnabled: shouldShowKeyboardHighlighting && hasOverflow,\n });\n\n useIsomorphicLayoutEffect(() => {\n if (!contentRef.current) {\n return () => {};\n }\n\n let frame: number \| undefined;\n const updateContentHeight = (entries?: ResizeObserverEntry[]) => {\n pendingObservedHeight.current = Math.max(\n pendingObservedHeight.current,\n entries?.[0]?.contentRect.height ?? 0,\n );\n\n if (frame !== undefined) {\n return;\n }\n\n frame = window.requestAnimationFrame(() => {\n frame = undefined;\n\n if (!contentRef.current) {\n return;\n }\n\n setContentHeight(\n Math.max(\n pendingObservedHeight.current,\n contentRef.current.scrollHeight,\n contentRef.current.getBoundingClientRect().height,\n ),\n );\n pendingObservedHeight.current = 0;\n });\n };\n\n const resizeObserver = new ResizeObserver((entries) => updateContentHeight(entries));\n const mutationObserver = new MutationObserver(() => updateContentHeight());\n\n resizeObserver.observe(contentRef.current);\n mutationObserver.observe(contentRef.current, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n updateContentHeight();\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n\n if (frame !== undefined) {\n window.cancelAnimationFrame(frame);\n }\n };\n }, [children]);\n\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n onChange?.(event, !current);\n return !current;\n });\n },\n [onChange],\n );\n\n const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.currentTarget.click();\n }\n }, []);\n\n const internalMoreLabel = moreLabel ?? (\n <Translation textString={textStrings.components.truncation.more} />\n );\n const internalLessLabel = lessLabel ?? (\n <Translation textString={textStrings.components.truncation.less} />\n );\n const collapsedContentHeight = Math.min(contentHeight \|\| collapsedHeight, collapsedHeight);\n const targetHeight = internalIsOpen ? contentHeight \|\| collapsedHeight : collapsedContentHeight;\n\n return (\n <StyledTruncation className=\"beta-chayns-truncation\">\n <StyledMotionTruncationContent\n animate={{ height: targetHeight }}\n initial={false}\n transition={{ type: 'tween', duration: 0.2 }}\n >\n <StyledTruncationContent ref={contentRef}>{children}</StyledTruncationContent>\n </StyledMotionTruncationContent>\n {hasOverflow && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextStringProviderSSR libraries=\"chayns-components-v5-core\" id=\"truncation\">\n <StyledTruncationClampFocusWrapper>\n <StyledTruncationClamp\n ref={clampRef}\n onClick={handleClampClick}\n onKeyDown={handleClampKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampFocusWrapper>\n </TextStringProviderSSR>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Truncation.js","names":["_textstrings","require","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_useFocusRingPortal","_useKeyboardFocusHighlighting","_truncation","_Truncation","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","getHeightAtLineBoundary","element","height","contentHeight","elementTop","getBoundingClientRect","top","targetBottom","range","ownerDocument","createRange","selectNodeContents","lineRects","getClientRects","Array","from","lineBottom","map","rect","bottom","filter","sort","first","second","detach","undefined","Math","min","Truncation","collapsedHeight","clampPosition","ClampPosition","Right","isOpen","lessLabel","moreLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","contentRef","useRef","clampRef","pendingObservedHeight","internalIsOpen","setInternalIsOpen","useState","Boolean","setContentHeight","collapsedContentHeight","setCollapsedContentHeight","hasOverflow","useFocusRingPortal","isEnabled","current","frame","updateContentHeight","entries","_entries$","max","contentRect","requestAnimationFrame","measuredContentHeight","scrollHeight","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","characterData","childList","subtree","disconnect","cancelAnimationFrame","handleClampClick","useCallback","event","handleClampKeyDown","key","preventDefault","currentTarget","click","internalMoreLabel","createElement","Translation","textString","textStrings","components","truncation","more","internalLessLabel","less","targetHeight","StyledTruncation","className","StyledMotionTruncationContent","animate","initial","transition","type","duration","StyledTruncationContent","ref","StyledTruncationClampWrapper","$position","TextStringProviderSSR","libraries","id","StyledTruncationClampFocusWrapper","StyledTruncationClamp","onClick","onKeyDown","role","tabIndex","_default","exports"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import { TextStringProviderSSR, Translation } from '@chayns/textstrings';\nimport React, {\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { ClampPosition } from '../../types/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampFocusWrapper,\n StyledTruncationClampWrapper,\n StyledTruncationContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n /*\n The elements that should be expanding or collapsing.\n /\n children: ReactElement;\n /\n The position of the clamp.\n /\n clampPosition?: ClampPosition;\n /\n The height of the children element in its collapsed state.\n /\n collapsedHeight?: number;\n /\n If set to true, the content is exposed.\n /\n isOpen?: boolean;\n /\n A text that should be displayed if the content is expanded.\n /\n lessLabel?: string;\n /\n A text that should be displayed if the content is collapsed.\n /\n moreLabel?: string;\n /\n Function to be executed when the component is expanding or collapsing.\n /\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst getHeightAtLineBoundary = (element: HTMLElement, height: number, contentHeight: number) => {\n const elementTop = element.getBoundingClientRect().top;\n const targetBottom = elementTop + height;\n const range = element.ownerDocument.createRange();\n\n range.selectNodeContents(element);\n\n const lineRects =\n typeof range.getClientRects === 'function' ? Array.from(range.getClientRects()) : [];\n const lineBottom = lineRects\n .map((rect) => rect.bottom)\n .filter((bottom) => bottom >= targetBottom)\n .sort((first, second) => first - second)[0];\n\n range.detach();\n\n return lineBottom === undefined\n ? Math.min(contentHeight, height)\n : Math.min(contentHeight, lineBottom - elementTop);\n};\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n lessLabel,\n moreLabel,\n onChange,\n children,\n shouldEnableKeyboardHighlighting,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n const contentRef = useRef<HTMLDivElement>(null);\n const clampRef = useRef<HTMLAnchorElement>(null);\n const pendingObservedHeight = useRef(0);\n const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));\n const [contentHeight, setContentHeight] = useState(0);\n const [collapsedContentHeight, setCollapsedContentHeight] = useState(collapsedHeight);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n }\n }, [isOpen]);\n\n const hasOverflow = contentHeight > collapsedHeight;\n\n useFocusRingPortal(clampRef, {\n isEnabled: shouldShowKeyboardHighlighting && hasOverflow,\n });\n\n useIsomorphicLayoutEffect(() => {\n if (!contentRef.current) {\n return () => {};\n }\n\n let frame: number \| undefined;\n const updateContentHeight = (entries?: ResizeObserverEntry[]) => {\n pendingObservedHeight.current = Math.max(\n pendingObservedHeight.current,\n entries?.[0]?.contentRect.height ?? 0,\n );\n\n if (frame !== undefined) {\n return;\n }\n\n frame = window.requestAnimationFrame(() => {\n frame = undefined;\n\n if (!contentRef.current) {\n return;\n }\n\n const measuredContentHeight = Math.max(\n pendingObservedHeight.current,\n contentRef.current.scrollHeight,\n contentRef.current.getBoundingClientRect().height,\n );\n\n setContentHeight(measuredContentHeight);\n setCollapsedContentHeight(\n getHeightAtLineBoundary(\n contentRef.current,\n collapsedHeight,\n measuredContentHeight,\n ),\n );\n pendingObservedHeight.current = 0;\n });\n };\n\n const resizeObserver = new ResizeObserver((entries) => updateContentHeight(entries));\n const mutationObserver = new MutationObserver(() => updateContentHeight());\n\n resizeObserver.observe(contentRef.current);\n mutationObserver.observe(contentRef.current, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n updateContentHeight();\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n\n if (frame !== undefined) {\n window.cancelAnimationFrame(frame);\n }\n };\n }, [children, collapsedHeight]);\n\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n onChange?.(event, !current);\n return !current;\n });\n },\n [onChange],\n );\n\n const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.currentTarget.click();\n }\n }, []);\n\n const internalMoreLabel = moreLabel ?? (\n <Translation textString={textStrings.components.truncation.more} />\n );\n const internalLessLabel = lessLabel ?? (\n <Translation textString={textStrings.components.truncation.less} />\n );\n const targetHeight = internalIsOpen\n ? contentHeight \|\| collapsedHeight\n : Math.min(contentHeight \|\| collapsedHeight, collapsedContentHeight);\n\n return (\n <StyledTruncation className=\"beta-chayns-truncation\">\n <StyledMotionTruncationContent\n animate={{ height: targetHeight }}\n initial={false}\n transition={{ type: 'tween', duration: 0.2 }}\n >\n <StyledTruncationContent ref={contentRef}>{children}</StyledTruncationContent>\n </StyledMotionTruncationContent>\n {hasOverflow && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextStringProviderSSR libraries=\"chayns-components-v5-core\" id=\"truncation\">\n <StyledTruncationClampFocusWrapper>\n <StyledTruncationClamp\n ref={clampRef}\n onClick={handleClampClick}\n onKeyDown={handleClampKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampFocusWrapper>\n </TextStringProviderSSR>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/truncation/Truncation.test.js CHANGED Viewed

@@ -9,6 +9,9 @@ _vitest.vi.mock('@chayns/textstrings', () => ({
   Translation: () => 'Mehr anzeigen',
   TextStringProvider: ({
     children
+  }) => children,
+  TextStringProviderSSR: ({
+    children
   }) => children
 }));
 const resizeObserverCallbacks = [];

package/lib/cjs/components/truncation/Truncation.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Truncation.test.js","names":["_react","require","_react2","_interopRequireDefault","_vitest","_Truncation","e","__esModule","default","vi","mock","Translation","TextStringProvider","children","resizeObserverCallbacks","ResizeObserverMock","constructor","callback","push","disconnect","observe","unobserve","stubGlobal","triggerResize","height","forEach","contentRect","afterEach","length","describe","it","render","createElement","collapsedHeight","waitFor","expect","screen","getByRole","name","toBeInTheDocument","queryByRole","not"],"sources":["../../../../src/components/truncation/Truncation.test.tsx"],"sourcesContent":["import { render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport Truncation from './Truncation';\n\nvi.mock('@chayns/textstrings', () => ({\n Translation: () => 'Mehr anzeigen',\n TextStringProvider: ({ children }: { children: React.ReactNode }) => children,\n}));\n\ntype ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;\n\nconst resizeObserverCallbacks: ResizeObserverCallback[] = [];\n\nclass ResizeObserverMock {\n constructor(callback: ResizeObserverCallback) {\n resizeObserverCallbacks.push(callback);\n }\n\n disconnect() {}\n\n observe() {}\n\n unobserve() {}\n}\n\nvi.stubGlobal('ResizeObserver', ResizeObserverMock);\n\nconst triggerResize = (height: number) => {\n resizeObserverCallbacks.forEach((callback) => {\n callback([\n {\n contentRect: { height } as DOMRectReadOnly,\n } as ResizeObserverEntry,\n ]);\n });\n};\n\nafterEach(() => {\n resizeObserverCallbacks.length = 0;\n});\n\ndescribe('Truncation', () => {\n it('shows the more action when content exceeds the collapsed height', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Long content</div>\n </Truncation>,\n );\n\n triggerResize(240);\n\n await waitFor(() => {\n expect(screen.getByRole('button', { name: 'Mehr anzeigen' })).toBeInTheDocument();\n });\n });\n\n it('keeps short content expanded without a more action', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Short content</div>\n </Truncation>,\n );\n\n triggerResize(64);\n\n await waitFor(() => {\n expect(screen.queryByRole('button', { name: 'Mehr anzeigen' })).not.toBeInTheDocument();\n });\n });\n});\n"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAF,sBAAA,CAAAF,OAAA;AAAsC,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtCG,UAAE,CAACC,IAAI,CAAC,qBAAqB,EAAE,OAAO;EAClCC,WAAW,EAAEA,CAAA,KAAM,eAAe;EAClCC,kBAAkB,EAAEA,CAAC;IAAEC;EAAwC,CAAC,KAAKA;~~AACzE~~,CAAC,CAAC,CAAC;AAIH,~~MAAMC~~,uBAAiD,GAAG,EAAE;AAE5D,MAAMC,kBAAkB,CAAC;EACrBC,WAAWA,CAACC,QAAgC,EAAE;IAC1CH,uBAAuB,CAACI,IAAI,CAACD,QAAQ,CAAC;EAC1C;EAEAE,UAAUA,CAAA,EAAG,CAAC;EAEdC,OAAOA,CAAA,EAAG,CAAC;EAEXC,SAASA,CAAA,EAAG,CAAC;AACjB;~~AAEAZ~~,UAAE,~~CAACa~~,UAAU,CAAC,gBAAgB,EAAEP,kBAAkB,CAAC;AAEnD,MAAMQ,aAAa,GAAIC,MAAc,IAAK;EACtCV,uBAAuB,CAACW,OAAO,CAAER,QAAQ,IAAK;IAC1CA,QAAQ,CAAC,CACL;MACIS,WAAW,EAAE;QAAEF;MAAO;IAC1B,CAAC,CACJ,CAAC;EACN,CAAC,CAAC;AACN,CAAC;AAED,IAAAG,iBAAS,EAAC,MAAM;EACZb,uBAAuB,CAACc,MAAM,GAAG,CAAC;AACtC,CAAC,CAAC;AAEF,IAAAC,gBAAQ,EAAC,YAAY,EAAE,MAAM;EACzB,IAAAC,UAAE,EAAC,iEAAiE,EAAE,YAAY;IAC9E,IAAAC,aAAM,~~eACF7B~~,OAAA,CAAAM,OAAA,~~CAAAwB~~,aAAA,~~CAAC3B~~,WAAA,CAAAG,OAAU;~~MAACyB~~,eAAe,EAAE;IAAI,~~gBAC7B/B~~,OAAA,CAAAM,OAAA,~~CAAAwB~~,aAAA,cAAK,cAAiB,CACd,CAChB,CAAC;IAEDT,aAAa,CAAC,GAAG,CAAC;IAElB,MAAM,IAAAW,cAAO,EAAC,MAAM;MAChB,IAAAC,cAAM,EAACC,aAAM,CAACC,SAAS,CAAC,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IACrF,CAAC,CAAC;EACN,CAAC,CAAC;EAEF,IAAAT,UAAE,EAAC,oDAAoD,EAAE,YAAY;IACjE,IAAAC,aAAM,~~eACF7B~~,OAAA,CAAAM,OAAA,~~CAAAwB~~,aAAA,~~CAAC3B~~,WAAA,CAAAG,OAAU;~~MAACyB~~,eAAe,EAAE;IAAI,~~gBAC7B/B~~,OAAA,CAAAM,OAAA,~~CAAAwB~~,aAAA,cAAK,eAAkB,CACf,CAChB,CAAC;IAEDT,aAAa,CAAC,EAAE,CAAC;IAEjB,MAAM,IAAAW,cAAO,EAAC,MAAM;MAChB,IAAAC,cAAM,EAACC,aAAM,CAACI,WAAW,CAAC,QAAQ,EAAE;QAAEF,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACG,GAAG,CAACF,iBAAiB,CAAC,CAAC;IAC3F,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Truncation.test.js","names":["_react","require","_react2","_interopRequireDefault","_vitest","_Truncation","e","__esModule","default","vi","mock","Translation","TextStringProvider","children","TextStringProviderSSR","resizeObserverCallbacks","ResizeObserverMock","constructor","callback","push","disconnect","observe","unobserve","stubGlobal","triggerResize","height","forEach","contentRect","afterEach","length","describe","it","render","createElement","collapsedHeight","waitFor","expect","screen","getByRole","name","toBeInTheDocument","queryByRole","not"],"sources":["../../../../src/components/truncation/Truncation.test.tsx"],"sourcesContent":["import { render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport Truncation from './Truncation';\n\nvi.mock('@chayns/textstrings', () => ({\n Translation: () => 'Mehr anzeigen',\n TextStringProvider: ({ children }: { children: React.ReactNode }) => children,\n TextStringProviderSSR: ({ children }: { children: React.ReactNode }) => children,\n}));\n\ntype ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;\n\nconst resizeObserverCallbacks: ResizeObserverCallback[] = [];\n\nclass ResizeObserverMock {\n constructor(callback: ResizeObserverCallback) {\n resizeObserverCallbacks.push(callback);\n }\n\n disconnect() {}\n\n observe() {}\n\n unobserve() {}\n}\n\nvi.stubGlobal('ResizeObserver', ResizeObserverMock);\n\nconst triggerResize = (height: number) => {\n resizeObserverCallbacks.forEach((callback) => {\n callback([\n {\n contentRect: { height } as DOMRectReadOnly,\n } as ResizeObserverEntry,\n ]);\n });\n};\n\nafterEach(() => {\n resizeObserverCallbacks.length = 0;\n});\n\ndescribe('Truncation', () => {\n it('shows the more action when content exceeds the collapsed height', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Long content</div>\n </Truncation>,\n );\n\n triggerResize(240);\n\n await waitFor(() => {\n expect(screen.getByRole('button', { name: 'Mehr anzeigen' })).toBeInTheDocument();\n });\n });\n\n it('keeps short content expanded without a more action', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Short content</div>\n </Truncation>,\n );\n\n triggerResize(64);\n\n await waitFor(() => {\n expect(screen.queryByRole('button', { name: 'Mehr anzeigen' })).not.toBeInTheDocument();\n });\n });\n});\n"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAF,sBAAA,CAAAF,OAAA;AAAsC,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtCG,UAAE,CAACC,IAAI,CAAC,qBAAqB,EAAE,OAAO;EAClCC,WAAW,EAAEA,CAAA,KAAM,eAAe;EAClCC,kBAAkB,EAAEA,CAAC;IAAEC;EAAwC,CAAC,KAAKA,QAAQ;EAC7EC,qBAAqB,EAAEA,CAAC;IAAED;EAAwC,CAAC,KAAKA;AAC5E,CAAC,CAAC,CAAC;AAIH,MAAME,uBAAiD,GAAG,EAAE;AAE5D,MAAMC,kBAAkB,CAAC;EACrBC,WAAWA,CAACC,QAAgC,EAAE;IAC1CH,uBAAuB,CAACI,IAAI,CAACD,QAAQ,CAAC;EAC1C;EAEAE,UAAUA,CAAA,EAAG,CAAC;EAEdC,OAAOA,CAAA,EAAG,CAAC;EAEXC,SAASA,CAAA,EAAG,CAAC;AACjB;AAEAb,UAAE,CAACc,UAAU,CAAC,gBAAgB,EAAEP,kBAAkB,CAAC;AAEnD,MAAMQ,aAAa,GAAIC,MAAc,IAAK;EACtCV,uBAAuB,CAACW,OAAO,CAAER,QAAQ,IAAK;IAC1CA,QAAQ,CAAC,CACL;MACIS,WAAW,EAAE;QAAEF;MAAO;IAC1B,CAAC,CACJ,CAAC;EACN,CAAC,CAAC;AACN,CAAC;AAED,IAAAG,iBAAS,EAAC,MAAM;EACZb,uBAAuB,CAACc,MAAM,GAAG,CAAC;AACtC,CAAC,CAAC;AAEF,IAAAC,gBAAQ,EAAC,YAAY,EAAE,MAAM;EACzB,IAAAC,UAAE,EAAC,iEAAiE,EAAE,YAAY;IAC9E,IAAAC,aAAM,eACF9B,OAAA,CAAAM,OAAA,CAAAyB,aAAA,CAAC5B,WAAA,CAAAG,OAAU;MAAC0B,eAAe,EAAE;IAAI,gBAC7BhC,OAAA,CAAAM,OAAA,CAAAyB,aAAA,cAAK,cAAiB,CACd,CAChB,CAAC;IAEDT,aAAa,CAAC,GAAG,CAAC;IAElB,MAAM,IAAAW,cAAO,EAAC,MAAM;MAChB,IAAAC,cAAM,EAACC,aAAM,CAACC,SAAS,CAAC,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IACrF,CAAC,CAAC;EACN,CAAC,CAAC;EAEF,IAAAT,UAAE,EAAC,oDAAoD,EAAE,YAAY;IACjE,IAAAC,aAAM,eACF9B,OAAA,CAAAM,OAAA,CAAAyB,aAAA,CAAC5B,WAAA,CAAAG,OAAU;MAAC0B,eAAe,EAAE;IAAI,gBAC7BhC,OAAA,CAAAM,OAAA,CAAAyB,aAAA,cAAK,eAAkB,CACf,CAChB,CAAC;IAEDT,aAAa,CAAC,EAAE,CAAC;IAEjB,MAAM,IAAAW,cAAO,EAAC,MAAM;MAChB,IAAAC,cAAM,EAACC,aAAM,CAACI,WAAW,CAAC,QAAQ,EAAE;QAAEF,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACG,GAAG,CAACF,iBAAiB,CAAC,CAAC;IAC3F,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/lib/cjs/utils/uploadFile.js CHANGED Viewed

@@ -12,7 +12,7 @@ const uploadFile = async ({
   shouldUploadImageToSite
 }) => {
   var _fileToUpload$file, _fileToUpload$file2;
-  if (!fileToUpload || fileToUpload.state !== 'none') {
+  if (!fileToUpload || fileToUpload.state !== undefined && fileToUpload.state !== 'none') {
     return;
   }
   if ((_fileToUpload$file = fileToUpload.file) !== null && _fileToUpload$file !== void 0 && _fileToUpload$file.type.includes('video/')) {

package/lib/cjs/utils/uploadFile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"uploadFile.js","names":["_post","require","_post2","uploadFile","fileToUpload","callback","shouldUploadImageToSite","_fileToUpload$file","_fileToUpload$file2","state","file","type","includes","uploadedVideo","postVideo","id","toString","uploadedImage","postImage","_uploadedImage$meta","_uploadedImage$meta2","_uploadedImage$meta3","_uploadedImage$meta4","url","base","key","meta","ratio","width","height","Number","~~undefined","~~exports"],"sources":["../../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n fileToUpload: InternalFileItem;\n callback: (UploadedFile: Video \| Image) => void;\n shouldUploadImageToSite?: boolean;\n}\n\nexport const uploadFile = async ({\n fileToUpload,\n callback,\n shouldUploadImageToSite,\n}: UploadFilesOptions): Promise<void> => {\n if (!fileToUpload \|\| fileToUpload.state !== 'none') {\n return;\n }\n\n if (fileToUpload.file?.type.includes('video/')) {\n const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n if (uploadedVideo) {\n callback({\n ...uploadedVideo,\n id: uploadedVideo.id.toString(),\n });\n }\n }\n\n if (fileToUpload.file?.type.includes('image/')) {\n const uploadedImage = await postImage({ file: fileToUpload.file, shouldUploadImageToSite });\n\n if (uploadedImage) {\n callback({\n url: `${uploadedImage.base}/${uploadedImage.key}`,\n id: uploadedImage.key,\n meta: uploadedImage.meta,\n ratio:\n uploadedImage.meta?.width && uploadedImage.meta?.height\n ? Number(uploadedImage.meta?.width) / Number(uploadedImage.meta?.height)\n : undefined,\n });\n }\n }\n};\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AASO,MAAME,UAAU,GAAG,MAAAA,CAAO;EAC7BC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAoB;EAAA,IAAAC,kBAAA,EAAAC,mBAAA;EACrC,IAAI,CAACJ,YAAY,~~IAAIA~~,YAAY,CAACK,KAAK,KAAK,~~MAAM~~,EAAE;~~IAChD~~;EACJ;EAEA,KAAAF,kBAAA,GAAIH,YAAY,~~CAACM~~,IAAI,~~cAAAH~~,kBAAA,eAAjBA,kBAAA,~~CAAmBI~~,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,MAAM,IAAAC,gBAAS,EAAC;MAAEJ,IAAI,~~EAAEN~~,YAAY,~~CAACM~~;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;~~MACfR~~,QAAQ,CAAC;QACL,~~GAAGQ~~,aAAa;QAChBE,EAAE,EAAEF,aAAa,CAACE,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,~~KAAAR~~,mBAAA,GAAIJ,YAAY,~~CAACM~~,IAAI,~~cAAAF~~,mBAAA,eAAjBA,mBAAA,~~CAAmBG~~,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMK,aAAa,GAAG,MAAM,IAAAC,eAAS,EAAC;MAAER,IAAI,~~EAAEN~~,YAAY,~~CAACM~~,IAAI;~~MAAEJ~~;IAAwB,CAAC,CAAC;IAE3F,~~IAAIW~~,aAAa,EAAE;MAAA,IAAAE,mBAAA,EAAAC,oBAAA,EAAAC,oBAAA,EAAAC,oBAAA;~~MACfjB~~,QAAQ,CAAC;~~QACLkB~~,GAAG,EAAE,GAAGN,aAAa,CAACO,IAAI,IAAIP,aAAa,CAACQ,GAAG,EAAE;QACjDV,EAAE,EAAEE,aAAa,CAACQ,GAAG;QACrBC,IAAI,EAAET,aAAa,CAACS,IAAI;QACxBC,KAAK,EACD,CAAAR,mBAAA,GAAAF,aAAa,CAACS,IAAI,cAAAP,mBAAA,eAAlBA,mBAAA,CAAoBS,KAAK,KAAAR,oBAAA,GAAIH,aAAa,CAACS,IAAI,cAAAN,oBAAA,eAAlBA,oBAAA,CAAoBS,MAAM,GACjDC,MAAM,EAAAT,oBAAA,GAACJ,aAAa,CAACS,IAAI,cAAAL,oBAAA,uBAAlBA,oBAAA,CAAoBO,KAAK,CAAC,GAAGE,MAAM,EAAAR,oBAAA,GAACL,aAAa,CAACS,IAAI,cAAAJ,oBAAA,uBAAlBA,oBAAA,CAAoBO,MAAM,CAAC,~~GACtEE~~;MACd,CAAC,CAAC;IACN;EACJ;AACJ,CAAC;~~AAACC~~,OAAA,CAAA7B,UAAA,GAAAA,UAAA","ignoreList":[]}
1	+ {"version":3,"file":"uploadFile.js","names":["_post","require","_post2","uploadFile","fileToUpload","callback","shouldUploadImageToSite","_fileToUpload$file","_fileToUpload$file2","state","undefined","file","type","includes","uploadedVideo","postVideo","id","toString","uploadedImage","postImage","_uploadedImage$meta","_uploadedImage$meta2","_uploadedImage$meta3","_uploadedImage$meta4","url","base","key","meta","ratio","width","height","Number","exports"],"sources":["../../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n fileToUpload: InternalFileItem;\n callback: (UploadedFile: Video \| Image) => void;\n shouldUploadImageToSite?: boolean;\n}\n\nexport const uploadFile = async ({\n fileToUpload,\n callback,\n shouldUploadImageToSite,\n}: UploadFilesOptions): Promise<void> => {\n if (!fileToUpload \|\| (fileToUpload.state !== undefined && fileToUpload.state !== 'none')) {\n return;\n }\n\n if (fileToUpload.file?.type.includes('video/')) {\n const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n if (uploadedVideo) {\n callback({\n ...uploadedVideo,\n id: uploadedVideo.id.toString(),\n });\n }\n }\n\n if (fileToUpload.file?.type.includes('image/')) {\n const uploadedImage = await postImage({ file: fileToUpload.file, shouldUploadImageToSite });\n\n if (uploadedImage) {\n callback({\n url: `${uploadedImage.base}/${uploadedImage.key}`,\n id: uploadedImage.key,\n meta: uploadedImage.meta,\n ratio:\n uploadedImage.meta?.width && uploadedImage.meta?.height\n ? Number(uploadedImage.meta?.width) / Number(uploadedImage.meta?.height)\n : undefined,\n });\n }\n }\n};\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AASO,MAAME,UAAU,GAAG,MAAAA,CAAO;EAC7BC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAoB;EAAA,IAAAC,kBAAA,EAAAC,mBAAA;EACrC,IAAI,CAACJ,YAAY,IAAKA,YAAY,CAACK,KAAK,KAAKC,SAAS,IAAIN,YAAY,CAACK,KAAK,KAAK,MAAO,EAAE;IACtF;EACJ;EAEA,KAAAF,kBAAA,GAAIH,YAAY,CAACO,IAAI,cAAAJ,kBAAA,eAAjBA,kBAAA,CAAmBK,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,MAAM,IAAAC,gBAAS,EAAC;MAAEJ,IAAI,EAAEP,YAAY,CAACO;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;MACfT,QAAQ,CAAC;QACL,GAAGS,aAAa;QAChBE,EAAE,EAAEF,aAAa,CAACE,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,KAAAT,mBAAA,GAAIJ,YAAY,CAACO,IAAI,cAAAH,mBAAA,eAAjBA,mBAAA,CAAmBI,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMK,aAAa,GAAG,MAAM,IAAAC,eAAS,EAAC;MAAER,IAAI,EAAEP,YAAY,CAACO,IAAI;MAAEL;IAAwB,CAAC,CAAC;IAE3F,IAAIY,aAAa,EAAE;MAAA,IAAAE,mBAAA,EAAAC,oBAAA,EAAAC,oBAAA,EAAAC,oBAAA;MACflB,QAAQ,CAAC;QACLmB,GAAG,EAAE,GAAGN,aAAa,CAACO,IAAI,IAAIP,aAAa,CAACQ,GAAG,EAAE;QACjDV,EAAE,EAAEE,aAAa,CAACQ,GAAG;QACrBC,IAAI,EAAET,aAAa,CAACS,IAAI;QACxBC,KAAK,EACD,CAAAR,mBAAA,GAAAF,aAAa,CAACS,IAAI,cAAAP,mBAAA,eAAlBA,mBAAA,CAAoBS,KAAK,KAAAR,oBAAA,GAAIH,aAAa,CAACS,IAAI,cAAAN,oBAAA,eAAlBA,oBAAA,CAAoBS,MAAM,GACjDC,MAAM,EAAAT,oBAAA,GAACJ,aAAa,CAACS,IAAI,cAAAL,oBAAA,uBAAlBA,oBAAA,CAAoBO,KAAK,CAAC,GAAGE,MAAM,EAAAR,oBAAA,GAACL,aAAa,CAACS,IAAI,cAAAJ,oBAAA,uBAAlBA,oBAAA,CAAoBO,MAAM,CAAC,GACtEpB;MACd,CAAC,CAAC;IACN;EACJ;AACJ,CAAC;AAACsB,OAAA,CAAA7B,UAAA,GAAAA,UAAA","ignoreList":[]}

package/lib/esm/components/grid-image/GridImage.js CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
-import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridTopRightImage } from './GridImage.styles';
+import { StyledGridBottomRightImage, StyledGridImage, StyledGridLeftImage, StyledGridSingleImage, StyledGridTopRightImage, StyledGridTwoImage } from './GridImage.styles';
 const GridImage = ({
   background,
   images,
@@ -36,7 +36,7 @@ const GridImage = ({
   const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);
   const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);
   const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);
-  const isGridImageHidden = !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;
+  const isGridImageHidden = !hasLoadedLeftImage || images.length > 1 && !hasLoadedTopRightImage || images.length > 2 && !hasLoadedBottomRightImage;
   return /*#__PURE__*/React.createElement(StyledGridImage, {
     ref: gridImageRef,
     $background: background,
@@ -46,7 +46,23 @@ const GridImage = ({
     onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
     tabIndex: isKeyboardFocusable ? 0 : -1,
     role: isClickable ? 'button' : undefined
-  }, /*#__PURE__*/React.createElement(StyledGridLeftImage, {
+  }, images.length === 1 && /*#__PURE__*/React.createElement(StyledGridSingleImage, {
+    $isHidden: isGridImageHidden,
+    onLoad: handleLeftImageLoaded,
+    src: images[0]
+  }), images.length === 2 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledGridTwoImage, {
+    $isHidden: isGridImageHidden,
+    $isLeft: true,
+    $size: size,
+    onLoad: handleLeftImageLoaded,
+    src: images[0]
+  }), /*#__PURE__*/React.createElement(StyledGridTwoImage, {
+    $isHidden: isGridImageHidden,
+    $isLeft: false,
+    $size: size,
+    onLoad: handleTopRightImageLoaded,
+    src: images[1]
+  })), images.length > 2 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledGridLeftImage, {
     $isHidden: isGridImageHidden,
     onLoad: handleLeftImageLoaded,
     $size: size,
@@ -60,7 +76,7 @@ const GridImage = ({
     $isHidden: isGridImageHidden,
     onLoad: handleBottomRightImageLoaded,
     src: images[2]
-  }));
+  })));
 };
 GridImage.displayName = 'GridImage';
 export default GridImage;

package/lib/esm/components/grid-image/GridImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridImage.js","names":["React","useCallback","useRef","useState","useFocusRingPortal","useKeyboardFocusHighlighting","useColorScheme","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridTopRightImage","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","colorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","isEnabled","shape","handleKeyDown","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","$isHidden","onLoad","src","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /*\n The background color of the image.\n /\n background?: CSSProperties['background'];\n /\n The images to be displayed in the `GridImage`. Only the first three images are displayed.\n /\n images: string[];\n /\n Function to be executed when the images are clicked.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n /\n shouldShowRoundImage?: boolean;\n /\n The size of the `GridImage` in pixels, which is set as both width and height.\n /\n size: number;\n /\n Enables keyboard-only focus highlighting for clickable GridImage instances.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n shouldEnableKeyboardHighlighting,\n}) => {\n const gridImageRef = useRef<HTMLDivElement>(null);\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n useFocusRingPortal(gridImageRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n });\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage \|\| !hasLoadedTopRightImage \|\| !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage\n ref={gridImageRef}\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $size={size}\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n >\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"GridImage.js","names":["React","useCallback","useRef","useState","useFocusRingPortal","useKeyboardFocusHighlighting","useColorScheme","StyledGridBottomRightImage","StyledGridImage","StyledGridLeftImage","StyledGridSingleImage","StyledGridTopRightImage","StyledGridTwoImage","GridImage","background","images","shouldShowRoundImage","size","onClick","shouldEnableKeyboardHighlighting","gridImageRef","colorScheme","shouldEnableKeyboardHighlightingEffective","hasLoadedLeftImage","setHasLoadedLeftImage","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","isClickable","isKeyboardFocusable","shouldShowKeyboardHighlighting","isEnabled","shape","handleKeyDown","event","key","preventDefault","handleLeftImageLoaded","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","length","createElement","ref","$background","$shouldShowRoundImage","$size","undefined","onKeyDown","tabIndex","role","$isHidden","onLoad","src","Fragment","$isLeft","displayName"],"sources":["../../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n KeyboardEventHandler,\n MouseEventHandler,\n MouseEvent,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridSingleImage,\n StyledGridTopRightImage,\n StyledGridTwoImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /*\n The background color of the image.\n /\n background?: CSSProperties['background'];\n /\n The images to be displayed in the `GridImage`. Only the first three images are displayed.\n /\n images: string[];\n /\n Function to be executed when the images are clicked.\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Images of users should always be displayed in a round shape. Therefore, this property can be set to true.\n /\n shouldShowRoundImage?: boolean;\n /\n The size of the `GridImage` in pixels, which is set as both width and height.\n /\n size: number;\n /\n Enables keyboard-only focus highlighting for clickable GridImage instances.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst GridImage: FC<GridImageProps> = ({\n background,\n images,\n shouldShowRoundImage,\n size,\n onClick,\n shouldEnableKeyboardHighlighting,\n}) => {\n const gridImageRef = useRef<HTMLDivElement>(null);\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const isClickable = typeof onClick === 'function';\n const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(isKeyboardFocusable);\n useFocusRingPortal(gridImageRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: shouldShowRoundImage ? 'circle' : 'rectangle',\n });\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isClickable) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n }\n },\n [isClickable, onClick],\n );\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage \|\|\n (images.length > 1 && !hasLoadedTopRightImage) \|\|\n (images.length > 2 && !hasLoadedBottomRightImage);\n\n return (\n <StyledGridImage\n ref={gridImageRef}\n $background={background}\n $shouldShowRoundImage={shouldShowRoundImage}\n $size={size}\n onClick={isClickable ? onClick : undefined}\n onKeyDown={isKeyboardFocusable ? handleKeyDown : undefined}\n tabIndex={isKeyboardFocusable ? 0 : -1}\n role={isClickable ? 'button' : undefined}\n >\n {images.length === 1 && (\n <StyledGridSingleImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n src={images[0]}\n />\n )}\n {images.length === 2 && (\n <>\n <StyledGridTwoImage\n $isHidden={isGridImageHidden}\n $isLeft\n $size={size}\n onLoad={handleLeftImageLoaded}\n src={images[0]}\n />\n <StyledGridTwoImage\n $isHidden={isGridImageHidden}\n $isLeft={false}\n $size={size}\n onLoad={handleTopRightImageLoaded}\n src={images[1]}\n />\n </>\n )}\n {images.length > 2 && (\n <>\n <StyledGridLeftImage\n $isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n $size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n $size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n $isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </>\n )}\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/grid-image/GridImage.styles.js CHANGED Viewed

@@ -25,6 +25,40 @@ export const StyledGridImage = styled.div`
         outline: none;
     }
 `;
+export const StyledGridSingleImage = styled.img`
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    position: absolute;
+    top: 0;
+    transition: opacity 0.4s ease;
+    width: 100%;
+`;
+export const StyledGridTwoImage = styled.img`
+    border-right: ${({
+  $isLeft,
+  $size
+}) => $isLeft ? `${$size / 40}px solid white` : undefined};
+    box-sizing: border-box;
+    height: 100%;
+    left: ${({
+  $isLeft
+}) => $isLeft ? 0 : undefined};
+    object-fit: cover;
+    opacity: ${({
+  $isHidden
+}) => $isHidden ? 0 : 1};
+    position: absolute;
+    right: ${({
+  $isLeft
+}) => $isLeft ? undefined : 0};
+    top: 0;
+    transition: opacity 0.4s ease;
+    width: 50%;
+`;
 export const StyledGridLeftImage = styled.img`
     border-right: ${({
   $size

package/lib/esm/components/grid-image/GridImage.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridImage.styles.js","names":["styled","StyledGridImage","div","$background","theme","$shouldShowRoundImage","undefined","$size","~~StyledGridLeftImage~~","img","$isHidden","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowRoundImage?: boolean;\n $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background: ${({ $background, theme }: StyledGridImageProps) =>\n $background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ $size }) => $size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ $size }) => $size}px;\n flex: 0 0 auto;\n\n &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledGridLeftImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ $size }) => $size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ $size }) => $size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAe,mBAAmB;AAS/C,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;~~AAOD~~,OAAO,MAAMC,~~mBAAmB~~,GAAGR,MAAM,CAACS,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,~~MAAMC~~,uBAAuB,~~GAAGX~~,MAAM,CAACS,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,~~MAAME~~,0BAA0B,~~GAAGZ~~,MAAM,CAACS,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"GridImage.styles.js","names":["styled","StyledGridImage","div","$background","theme","$shouldShowRoundImage","undefined","$size","StyledGridSingleImage","img","$isHidden","StyledGridTwoImage","$isLeft","StyledGridLeftImage","StyledGridTopRightImage","StyledGridBottomRightImage"],"sources":["../../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowRoundImage?: boolean;\n $size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background: ${({ $background, theme }: StyledGridImageProps) =>\n $background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ $size }) => $size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ $size }) => $size}px;\n flex: 0 0 auto;\n\n &:focus-visible {\n outline: none;\n }\n`;\n\ntype StyledGridSingleImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridSingleImage = styled.img<StyledGridSingleImageProps>`\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 100%;\n`;\n\ntype StyledGridTwoImageProps = {\n $isHidden: boolean;\n $isLeft: boolean;\n $size: number;\n};\n\nexport const StyledGridTwoImage = styled.img<StyledGridTwoImageProps>`\n border-right: ${({ $isLeft, $size }) => ($isLeft ? `${$size / 40}px solid white` : undefined)};\n box-sizing: border-box;\n height: 100%;\n left: ${({ $isLeft }) => ($isLeft ? 0 : undefined)};\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: ${({ $isLeft }) => ($isLeft ? undefined : 0)};\n top: 0;\n transition: opacity 0.4s ease;\n width: 50%;\n`;\n\ntype StyledGridLeftImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ $size }) => $size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n $isHidden: boolean;\n $size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ $size }) => $size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n $isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAe,mBAAmB;AAS/C,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAyB;AAC/D,kBAAkB,CAAC;EAAEC,WAAW;EAAEC;AAA4B,CAAC,KACvDD,WAAW,IAAI,QAAQC,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE,qBAAqB,CAAC;EAAEC;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAGC,SAAU;AAC/F,iCAAiC,CAAC;EAAEF;AAA4B,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACtF,cAAc,CAAC;EAAEG;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,qBAAqB,GAAGR,MAAM,CAACS,GAA+B;AAC3E;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,kBAAkB,GAAGX,MAAM,CAACS,GAA4B;AACrE,oBAAoB,CAAC;EAAEG,OAAO;EAAEL;AAAM,CAAC,KAAMK,OAAO,GAAG,GAAGL,KAAK,GAAG,EAAE,gBAAgB,GAAGD,SAAU;AACjG;AACA;AACA,YAAY,CAAC;EAAEM;AAAQ,CAAC,KAAMA,OAAO,GAAG,CAAC,GAAGN,SAAU;AACtD;AACA,eAAe,CAAC;EAAEI;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA,aAAa,CAAC;EAAEE;AAAQ,CAAC,KAAMA,OAAO,GAAGN,SAAS,GAAG,CAAE;AACvD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMO,mBAAmB,GAAGb,MAAM,CAACS,GAA6B;AACvE,oBAAoB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC7C;AACA;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMI,uBAAuB,GAAGd,MAAM,CAACS,GAAiC;AAC/E,qBAAqB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,GAAG,EAAE;AAC9C;AACA;AACA,eAAe,CAAC;EAAEG;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMK,0BAA0B,GAAGf,MAAM,CAACS,GAAoC;AACrF;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/grid-image/GridImage.test.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import GridImage from './GridImage';
+describe('GridImage', () => {
+  it('renders one image without additional grid images', () => {
+    render(/*#__PURE__*/React.createElement(GridImage, {
+      images: ['one.jpg'],
+      size: 100
+    }));
+    expect(screen.getAllByRole('img')).toHaveLength(1);
+    expect(screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');
+  });
+  it('renders two images side by side without a third grid image', () => {
+    render(/*#__PURE__*/React.createElement(GridImage, {
+      images: ['one.jpg', 'two.jpg'],
+      size: 100
+    }));
+    expect(screen.getAllByRole('img')).toHaveLength(2);
+    expect(screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');
+    expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');
+  });
+});
+//# sourceMappingURL=GridImage.test.js.map

package/lib/esm/components/grid-image/GridImage.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GridImage.test.js","names":["render","screen","React","describe","expect","it","GridImage","createElement","images","size","getAllByRole","toHaveLength","getByRole","toHaveAttribute"],"sources":["../../../../src/components/grid-image/GridImage.test.tsx"],"sourcesContent":["import { render, screen } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it } from 'vitest';\nimport GridImage from './GridImage';\n\ndescribe('GridImage', () => {\n it('renders one image without additional grid images', () => {\n render(<GridImage images={['one.jpg']} size={100} />);\n\n expect(screen.getAllByRole('img')).toHaveLength(1);\n expect(screen.getByRole('img')).toHaveAttribute('src', 'one.jpg');\n });\n\n it('renders two images side by side without a third grid image', () => {\n render(<GridImage images={['one.jpg', 'two.jpg']} size={100} />);\n\n expect(screen.getAllByRole('img')).toHaveLength(2);\n expect(screen.getAllByRole('img')[0]).toHaveAttribute('src', 'one.jpg');\n expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'two.jpg');\n });\n});\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,MAAM,QAAQ,wBAAwB;AACvD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,QAAQ,QAAQ;AAC7C,OAAOC,SAAS,MAAM,aAAa;AAEnCH,QAAQ,CAAC,WAAW,EAAE,MAAM;EACxBE,EAAE,CAAC,kDAAkD,EAAE,MAAM;IACzDL,MAAM,cAACE,KAAA,CAAAK,aAAA,CAACD,SAAS;MAACE,MAAM,EAAE,CAAC,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAErDL,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClDP,MAAM,CAACH,MAAM,CAACW,SAAS,CAAC,KAAK,CAAC,CAAC,CAACC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EACrE,CAAC,CAAC;EAEFR,EAAE,CAAC,4DAA4D,EAAE,MAAM;IACnEL,MAAM,cAACE,KAAA,CAAAK,aAAA,CAACD,SAAS;MAACE,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,CAAE;MAACC,IAAI,EAAE;IAAI,CAAE,CAAC,CAAC;IAEhEL,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAACC,YAAY,CAAC,CAAC,CAAC;IAClDP,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;IACvET,MAAM,CAACH,MAAM,CAACS,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAACG,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC;EAC3E,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/lib/esm/components/truncation/Truncation.js CHANGED Viewed

@@ -6,6 +6,16 @@ import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighli
 import { ClampPosition } from '../../types/truncation';
 import { StyledMotionTruncationContent, StyledTruncation, StyledTruncationClamp, StyledTruncationClampFocusWrapper, StyledTruncationClampWrapper, StyledTruncationContent } from './Truncation.styles';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const getHeightAtLineBoundary = (element, height, contentHeight) => {
+  const elementTop = element.getBoundingClientRect().top;
+  const targetBottom = elementTop + height;
+  const range = element.ownerDocument.createRange();
+  range.selectNodeContents(element);
+  const lineRects = typeof range.getClientRects === 'function' ? Array.from(range.getClientRects()) : [];
+  const lineBottom = lineRects.map(rect => rect.bottom).filter(bottom => bottom >= targetBottom).sort((first, second) => first - second)[0];
+  range.detach();
+  return lineBottom === undefined ? Math.min(contentHeight, height) : Math.min(contentHeight, lineBottom - elementTop);
+};
 const Truncation = ({
   collapsedHeight = 150,
   clampPosition = ClampPosition.Right,
@@ -22,6 +32,7 @@ const Truncation = ({
   const pendingObservedHeight = useRef(0);
   const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));
   const [contentHeight, setContentHeight] = useState(0);
+  const [collapsedContentHeight, setCollapsedContentHeight] = useState(collapsedHeight);
   useEffect(() => {
     if (typeof isOpen === 'boolean') {
       setInternalIsOpen(isOpen);
@@ -46,7 +57,9 @@ const Truncation = ({
         if (!contentRef.current) {
           return;
         }
-        setContentHeight(Math.max(pendingObservedHeight.current, contentRef.current.scrollHeight, contentRef.current.getBoundingClientRect().height));
+        const measuredContentHeight = Math.max(pendingObservedHeight.current, contentRef.current.scrollHeight, contentRef.current.getBoundingClientRect().height);
+        setContentHeight(measuredContentHeight);
+        setCollapsedContentHeight(getHeightAtLineBoundary(contentRef.current, collapsedHeight, measuredContentHeight));
         pendingObservedHeight.current = 0;
       });
     };
@@ -66,7 +79,7 @@ const Truncation = ({
         window.cancelAnimationFrame(frame);
       }
     };
-  }, [children]);
+  }, [children, collapsedHeight]);
   const handleClampClick = useCallback(event => {
     setInternalIsOpen(current => {
       onChange?.(event, !current);
@@ -85,8 +98,7 @@ const Truncation = ({
   const internalLessLabel = lessLabel ?? /*#__PURE__*/React.createElement(Translation, {
     textString: textStrings.components.truncation.less
   });
-  const collapsedContentHeight = Math.min(contentHeight || collapsedHeight, collapsedHeight);
-  const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : collapsedContentHeight;
+  const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : Math.min(contentHeight || collapsedHeight, collapsedContentHeight);
   return /*#__PURE__*/React.createElement(StyledTruncation, {
     className: "beta-chayns-truncation"
   }, /*#__PURE__*/React.createElement(StyledMotionTruncationContent, {

package/lib/esm/components/truncation/Truncation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Truncation.js","names":["TextStringProviderSSR","Translation","React","useCallback","useEffect","useLayoutEffect","useRef","useState","textStrings","useFocusRingPortal","useKeyboardFocusHighlighting","ClampPosition","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampFocusWrapper","StyledTruncationClampWrapper","StyledTruncationContent","useIsomorphicLayoutEffect","window","Truncation","collapsedHeight","clampPosition","Right","isOpen","lessLabel","moreLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","contentRef","clampRef","pendingObservedHeight","internalIsOpen","setInternalIsOpen","Boolean","contentHeight","setContentHeight","hasOverflow","isEnabled","current","frame","updateContentHeight","entries","Math","max","contentRect","height","undefined","requestAnimationFrame","scrollHeight","getBoundingClientRect","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","characterData","childList","subtree","disconnect","cancelAnimationFrame","handleClampClick","event","handleClampKeyDown","key","preventDefault","currentTarget","click","internalMoreLabel","createElement","textString","components","truncation","more","internalLessLabel","less","collapsedContentHeight","min","targetHeight","className","animate","initial","transition","type","duration","ref","$position","libraries","id","onClick","onKeyDown","role","tabIndex"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import { TextStringProviderSSR, Translation } from '@chayns/textstrings';\nimport React, {\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { ClampPosition } from '../../types/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampFocusWrapper,\n StyledTruncationClampWrapper,\n StyledTruncationContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n /*\n The elements that should be expanding or collapsing.\n /\n children: ReactElement;\n /\n The position of the clamp.\n /\n clampPosition?: ClampPosition;\n /\n The height of the children element in its collapsed state.\n /\n collapsedHeight?: number;\n /\n If set to true, the content is exposed.\n /\n isOpen?: boolean;\n /\n A text that should be displayed if the content is expanded.\n /\n lessLabel?: string;\n /\n A text that should be displayed if the content is collapsed.\n /\n moreLabel?: string;\n /\n Function to be executed when the component is expanding or collapsing.\n /\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n lessLabel,\n moreLabel,\n onChange,\n children,\n shouldEnableKeyboardHighlighting,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n const contentRef = useRef<HTMLDivElement>(null);\n const clampRef = useRef<HTMLAnchorElement>(null);\n const pendingObservedHeight = useRef(0);\n const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));\n const [contentHeight, setContentHeight] = useState(0);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n }\n }, [isOpen]);\n\n const hasOverflow = contentHeight > collapsedHeight;\n\n useFocusRingPortal(clampRef, {\n isEnabled: shouldShowKeyboardHighlighting && hasOverflow,\n });\n\n useIsomorphicLayoutEffect(() => {\n if (!contentRef.current) {\n return () => {};\n }\n\n let frame: number \| undefined;\n const updateContentHeight = (entries?: ResizeObserverEntry[]) => {\n pendingObservedHeight.current = Math.max(\n pendingObservedHeight.current,\n entries?.[0]?.contentRect.height ?? 0,\n );\n\n if (frame !== undefined) {\n return;\n }\n\n frame = window.requestAnimationFrame(() => {\n frame = undefined;\n\n if (!contentRef.current) {\n return;\n }\n\n setContentHeight(\n Math.max(\n pendingObservedHeight.current,\n contentRef.current.scrollHeight,\n contentRef.current.getBoundingClientRect().height,\n ),\n );\n pendingObservedHeight.current = 0;\n });\n };\n\n const resizeObserver = new ResizeObserver((entries) => updateContentHeight(entries));\n const mutationObserver = new MutationObserver(() => updateContentHeight());\n\n resizeObserver.observe(contentRef.current);\n mutationObserver.observe(contentRef.current, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n updateContentHeight();\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n\n if (frame !== undefined) {\n window.cancelAnimationFrame(frame);\n }\n };\n }, [children]);\n\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n onChange?.(event, !current);\n return !current;\n });\n },\n [onChange],\n );\n\n const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.currentTarget.click();\n }\n }, []);\n\n const internalMoreLabel = moreLabel ?? (\n <Translation textString={textStrings.components.truncation.more} />\n );\n const internalLessLabel = lessLabel ?? (\n <Translation textString={textStrings.components.truncation.less} />\n );\n const collapsedContentHeight = Math.min(contentHeight \|\| collapsedHeight, collapsedHeight);\n const targetHeight = internalIsOpen ? contentHeight \|\| collapsedHeight : collapsedContentHeight;\n\n return (\n <StyledTruncation className=\"beta-chayns-truncation\">\n <StyledMotionTruncationContent\n animate={{ height: targetHeight }}\n initial={false}\n transition={{ type: 'tween', duration: 0.2 }}\n >\n <StyledTruncationContent ref={contentRef}>{children}</StyledTruncationContent>\n </StyledMotionTruncationContent>\n {hasOverflow && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextStringProviderSSR libraries=\"chayns-components-v5-core\" id=\"truncation\">\n <StyledTruncationClampFocusWrapper>\n <StyledTruncationClamp\n ref={clampRef}\n onClick={handleClampClick}\n onKeyDown={handleClampKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampFocusWrapper>\n </TextStringProviderSSR>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Truncation.js","names":["TextStringProviderSSR","Translation","React","useCallback","useEffect","useLayoutEffect","useRef","useState","textStrings","useFocusRingPortal","useKeyboardFocusHighlighting","ClampPosition","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampFocusWrapper","StyledTruncationClampWrapper","StyledTruncationContent","useIsomorphicLayoutEffect","window","getHeightAtLineBoundary","element","height","contentHeight","elementTop","getBoundingClientRect","top","targetBottom","range","ownerDocument","createRange","selectNodeContents","lineRects","getClientRects","Array","from","lineBottom","map","rect","bottom","filter","sort","first","second","detach","undefined","Math","min","Truncation","collapsedHeight","clampPosition","Right","isOpen","lessLabel","moreLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","contentRef","clampRef","pendingObservedHeight","internalIsOpen","setInternalIsOpen","Boolean","setContentHeight","collapsedContentHeight","setCollapsedContentHeight","hasOverflow","isEnabled","current","frame","updateContentHeight","entries","max","contentRect","requestAnimationFrame","measuredContentHeight","scrollHeight","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","characterData","childList","subtree","disconnect","cancelAnimationFrame","handleClampClick","event","handleClampKeyDown","key","preventDefault","currentTarget","click","internalMoreLabel","createElement","textString","components","truncation","more","internalLessLabel","less","targetHeight","className","animate","initial","transition","type","duration","ref","$position","libraries","id","onClick","onKeyDown","role","tabIndex"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import { TextStringProviderSSR, Translation } from '@chayns/textstrings';\nimport React, {\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { ClampPosition } from '../../types/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampFocusWrapper,\n StyledTruncationClampWrapper,\n StyledTruncationContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n /*\n The elements that should be expanding or collapsing.\n /\n children: ReactElement;\n /\n The position of the clamp.\n /\n clampPosition?: ClampPosition;\n /\n The height of the children element in its collapsed state.\n /\n collapsedHeight?: number;\n /\n If set to true, the content is exposed.\n /\n isOpen?: boolean;\n /\n A text that should be displayed if the content is expanded.\n /\n lessLabel?: string;\n /\n A text that should be displayed if the content is collapsed.\n /\n moreLabel?: string;\n /\n Function to be executed when the component is expanding or collapsing.\n /\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst getHeightAtLineBoundary = (element: HTMLElement, height: number, contentHeight: number) => {\n const elementTop = element.getBoundingClientRect().top;\n const targetBottom = elementTop + height;\n const range = element.ownerDocument.createRange();\n\n range.selectNodeContents(element);\n\n const lineRects =\n typeof range.getClientRects === 'function' ? Array.from(range.getClientRects()) : [];\n const lineBottom = lineRects\n .map((rect) => rect.bottom)\n .filter((bottom) => bottom >= targetBottom)\n .sort((first, second) => first - second)[0];\n\n range.detach();\n\n return lineBottom === undefined\n ? Math.min(contentHeight, height)\n : Math.min(contentHeight, lineBottom - elementTop);\n};\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n lessLabel,\n moreLabel,\n onChange,\n children,\n shouldEnableKeyboardHighlighting,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n const contentRef = useRef<HTMLDivElement>(null);\n const clampRef = useRef<HTMLAnchorElement>(null);\n const pendingObservedHeight = useRef(0);\n const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));\n const [contentHeight, setContentHeight] = useState(0);\n const [collapsedContentHeight, setCollapsedContentHeight] = useState(collapsedHeight);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n }\n }, [isOpen]);\n\n const hasOverflow = contentHeight > collapsedHeight;\n\n useFocusRingPortal(clampRef, {\n isEnabled: shouldShowKeyboardHighlighting && hasOverflow,\n });\n\n useIsomorphicLayoutEffect(() => {\n if (!contentRef.current) {\n return () => {};\n }\n\n let frame: number \| undefined;\n const updateContentHeight = (entries?: ResizeObserverEntry[]) => {\n pendingObservedHeight.current = Math.max(\n pendingObservedHeight.current,\n entries?.[0]?.contentRect.height ?? 0,\n );\n\n if (frame !== undefined) {\n return;\n }\n\n frame = window.requestAnimationFrame(() => {\n frame = undefined;\n\n if (!contentRef.current) {\n return;\n }\n\n const measuredContentHeight = Math.max(\n pendingObservedHeight.current,\n contentRef.current.scrollHeight,\n contentRef.current.getBoundingClientRect().height,\n );\n\n setContentHeight(measuredContentHeight);\n setCollapsedContentHeight(\n getHeightAtLineBoundary(\n contentRef.current,\n collapsedHeight,\n measuredContentHeight,\n ),\n );\n pendingObservedHeight.current = 0;\n });\n };\n\n const resizeObserver = new ResizeObserver((entries) => updateContentHeight(entries));\n const mutationObserver = new MutationObserver(() => updateContentHeight());\n\n resizeObserver.observe(contentRef.current);\n mutationObserver.observe(contentRef.current, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n updateContentHeight();\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n\n if (frame !== undefined) {\n window.cancelAnimationFrame(frame);\n }\n };\n }, [children, collapsedHeight]);\n\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n onChange?.(event, !current);\n return !current;\n });\n },\n [onChange],\n );\n\n const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.currentTarget.click();\n }\n }, []);\n\n const internalMoreLabel = moreLabel ?? (\n <Translation textString={textStrings.components.truncation.more} />\n );\n const internalLessLabel = lessLabel ?? (\n <Translation textString={textStrings.components.truncation.less} />\n );\n const targetHeight = internalIsOpen\n ? contentHeight \|\| collapsedHeight\n : Math.min(contentHeight \|\| collapsedHeight, collapsedContentHeight);\n\n return (\n <StyledTruncation className=\"beta-chayns-truncation\">\n <StyledMotionTruncationContent\n animate={{ height: targetHeight }}\n initial={false}\n transition={{ type: 'tween', duration: 0.2 }}\n >\n <StyledTruncationContent ref={contentRef}>{children}</StyledTruncationContent>\n </StyledMotionTruncationContent>\n {hasOverflow && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextStringProviderSSR libraries=\"chayns-components-v5-core\" id=\"truncation\">\n <StyledTruncationClampFocusWrapper>\n <StyledTruncationClamp\n ref={clampRef}\n onClick={handleClampClick}\n onKeyDown={handleClampKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampFocusWrapper>\n </TextStringProviderSSR>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/truncation/Truncation.test.js CHANGED Viewed

@@ -6,6 +6,9 @@ vi.mock('@chayns/textstrings', () => ({
   Translation: () => 'Mehr anzeigen',
   TextStringProvider: ({
     children
+  }) => children,
+  TextStringProviderSSR: ({
+    children
   }) => children
 }));
 const resizeObserverCallbacks = [];

package/lib/esm/components/truncation/Truncation.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Truncation.test.js","names":["render","screen","waitFor","React","afterEach","describe","expect","it","vi","Truncation","mock","Translation","TextStringProvider","children","resizeObserverCallbacks","ResizeObserverMock","constructor","callback","push","disconnect","observe","unobserve","stubGlobal","triggerResize","height","forEach","contentRect","length","createElement","collapsedHeight","getByRole","name","toBeInTheDocument","queryByRole","not"],"sources":["../../../../src/components/truncation/Truncation.test.tsx"],"sourcesContent":["import { render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport Truncation from './Truncation';\n\nvi.mock('@chayns/textstrings', () => ({\n Translation: () => 'Mehr anzeigen',\n TextStringProvider: ({ children }: { children: React.ReactNode }) => children,\n}));\n\ntype ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;\n\nconst resizeObserverCallbacks: ResizeObserverCallback[] = [];\n\nclass ResizeObserverMock {\n constructor(callback: ResizeObserverCallback) {\n resizeObserverCallbacks.push(callback);\n }\n\n disconnect() {}\n\n observe() {}\n\n unobserve() {}\n}\n\nvi.stubGlobal('ResizeObserver', ResizeObserverMock);\n\nconst triggerResize = (height: number) => {\n resizeObserverCallbacks.forEach((callback) => {\n callback([\n {\n contentRect: { height } as DOMRectReadOnly,\n } as ResizeObserverEntry,\n ]);\n });\n};\n\nafterEach(() => {\n resizeObserverCallbacks.length = 0;\n});\n\ndescribe('Truncation', () => {\n it('shows the more action when content exceeds the collapsed height', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Long content</div>\n </Truncation>,\n );\n\n triggerResize(240);\n\n await waitFor(() => {\n expect(screen.getByRole('button', { name: 'Mehr anzeigen' })).toBeInTheDocument();\n });\n });\n\n it('keeps short content expanded without a more action', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Short content</div>\n </Truncation>,\n );\n\n triggerResize(64);\n\n await waitFor(() => {\n expect(screen.queryByRole('button', { name: 'Mehr anzeigen' })).not.toBeInTheDocument();\n });\n });\n});\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,MAAM,EAAEC,OAAO,QAAQ,wBAAwB;AAChE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,EAAEC,EAAE,QAAQ,QAAQ;AAC5D,OAAOC,UAAU,MAAM,cAAc;AAErCD,EAAE,CAACE,IAAI,CAAC,qBAAqB,EAAE,OAAO;EAClCC,WAAW,EAAEA,CAAA,KAAM,eAAe;EAClCC,kBAAkB,EAAEA,CAAC;IAAEC;EAAwC,CAAC,KAAKA;~~AACzE~~,CAAC,CAAC,CAAC;AAIH,~~MAAMC~~,uBAAiD,GAAG,EAAE;AAE5D,MAAMC,kBAAkB,CAAC;EACrBC,WAAWA,CAACC,QAAgC,EAAE;IAC1CH,uBAAuB,CAACI,IAAI,CAACD,QAAQ,CAAC;EAC1C;EAEAE,UAAUA,CAAA,EAAG,CAAC;EAEdC,OAAOA,CAAA,EAAG,CAAC;EAEXC,SAASA,CAAA,EAAG,CAAC;AACjB;~~AAEAb~~,EAAE,~~CAACc~~,UAAU,CAAC,gBAAgB,EAAEP,kBAAkB,CAAC;AAEnD,MAAMQ,aAAa,GAAIC,MAAc,IAAK;EACtCV,uBAAuB,CAACW,OAAO,CAAER,QAAQ,IAAK;IAC1CA,QAAQ,CAAC,CACL;MACIS,WAAW,EAAE;QAAEF;MAAO;IAC1B,CAAC,CACJ,CAAC;EACN,CAAC,CAAC;AACN,CAAC;~~AAEDpB~~,SAAS,CAAC,MAAM;~~EACZU~~,uBAAuB,CAACa,MAAM,GAAG,CAAC;AACtC,CAAC,CAAC;~~AAEFtB~~,QAAQ,CAAC,YAAY,EAAE,MAAM;EACzBE,EAAE,CAAC,iEAAiE,EAAE,YAAY;IAC9EP,MAAM,cACFG,KAAA,~~CAAAyB~~,aAAA,~~CAACnB~~,UAAU;~~MAACoB~~,eAAe,EAAE;IAAI,~~gBAC7B1B~~,KAAA,~~CAAAyB~~,aAAA,cAAK,cAAiB,CACd,CAChB,CAAC;IAEDL,aAAa,CAAC,GAAG,CAAC;IAElB,~~MAAMrB~~,OAAO,CAAC,MAAM;MAChBI,MAAM,CAACL,MAAM,~~CAAC6B~~,SAAS,CAAC,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IACrF,CAAC,CAAC;EACN,CAAC,CAAC;~~EAEFzB~~,EAAE,CAAC,oDAAoD,EAAE,YAAY;IACjEP,MAAM,cACFG,KAAA,~~CAAAyB~~,aAAA,~~CAACnB~~,UAAU;~~MAACoB~~,eAAe,EAAE;IAAI,~~gBAC7B1B~~,KAAA,~~CAAAyB~~,aAAA,cAAK,eAAkB,CACf,CAChB,CAAC;IAEDL,aAAa,CAAC,EAAE,CAAC;IAEjB,~~MAAMrB~~,OAAO,CAAC,MAAM;MAChBI,MAAM,CAACL,MAAM,~~CAACgC~~,WAAW,CAAC,QAAQ,EAAE;QAAEF,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACG,GAAG,CAACF,iBAAiB,CAAC,CAAC;IAC3F,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Truncation.test.js","names":["render","screen","waitFor","React","afterEach","describe","expect","it","vi","Truncation","mock","Translation","TextStringProvider","children","TextStringProviderSSR","resizeObserverCallbacks","ResizeObserverMock","constructor","callback","push","disconnect","observe","unobserve","stubGlobal","triggerResize","height","forEach","contentRect","length","createElement","collapsedHeight","getByRole","name","toBeInTheDocument","queryByRole","not"],"sources":["../../../../src/components/truncation/Truncation.test.tsx"],"sourcesContent":["import { render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport Truncation from './Truncation';\n\nvi.mock('@chayns/textstrings', () => ({\n Translation: () => 'Mehr anzeigen',\n TextStringProvider: ({ children }: { children: React.ReactNode }) => children,\n TextStringProviderSSR: ({ children }: { children: React.ReactNode }) => children,\n}));\n\ntype ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;\n\nconst resizeObserverCallbacks: ResizeObserverCallback[] = [];\n\nclass ResizeObserverMock {\n constructor(callback: ResizeObserverCallback) {\n resizeObserverCallbacks.push(callback);\n }\n\n disconnect() {}\n\n observe() {}\n\n unobserve() {}\n}\n\nvi.stubGlobal('ResizeObserver', ResizeObserverMock);\n\nconst triggerResize = (height: number) => {\n resizeObserverCallbacks.forEach((callback) => {\n callback([\n {\n contentRect: { height } as DOMRectReadOnly,\n } as ResizeObserverEntry,\n ]);\n });\n};\n\nafterEach(() => {\n resizeObserverCallbacks.length = 0;\n});\n\ndescribe('Truncation', () => {\n it('shows the more action when content exceeds the collapsed height', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Long content</div>\n </Truncation>,\n );\n\n triggerResize(240);\n\n await waitFor(() => {\n expect(screen.getByRole('button', { name: 'Mehr anzeigen' })).toBeInTheDocument();\n });\n });\n\n it('keeps short content expanded without a more action', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Short content</div>\n </Truncation>,\n );\n\n triggerResize(64);\n\n await waitFor(() => {\n expect(screen.queryByRole('button', { name: 'Mehr anzeigen' })).not.toBeInTheDocument();\n });\n });\n});\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,MAAM,EAAEC,OAAO,QAAQ,wBAAwB;AAChE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,EAAEC,EAAE,QAAQ,QAAQ;AAC5D,OAAOC,UAAU,MAAM,cAAc;AAErCD,EAAE,CAACE,IAAI,CAAC,qBAAqB,EAAE,OAAO;EAClCC,WAAW,EAAEA,CAAA,KAAM,eAAe;EAClCC,kBAAkB,EAAEA,CAAC;IAAEC;EAAwC,CAAC,KAAKA,QAAQ;EAC7EC,qBAAqB,EAAEA,CAAC;IAAED;EAAwC,CAAC,KAAKA;AAC5E,CAAC,CAAC,CAAC;AAIH,MAAME,uBAAiD,GAAG,EAAE;AAE5D,MAAMC,kBAAkB,CAAC;EACrBC,WAAWA,CAACC,QAAgC,EAAE;IAC1CH,uBAAuB,CAACI,IAAI,CAACD,QAAQ,CAAC;EAC1C;EAEAE,UAAUA,CAAA,EAAG,CAAC;EAEdC,OAAOA,CAAA,EAAG,CAAC;EAEXC,SAASA,CAAA,EAAG,CAAC;AACjB;AAEAd,EAAE,CAACe,UAAU,CAAC,gBAAgB,EAAEP,kBAAkB,CAAC;AAEnD,MAAMQ,aAAa,GAAIC,MAAc,IAAK;EACtCV,uBAAuB,CAACW,OAAO,CAAER,QAAQ,IAAK;IAC1CA,QAAQ,CAAC,CACL;MACIS,WAAW,EAAE;QAAEF;MAAO;IAC1B,CAAC,CACJ,CAAC;EACN,CAAC,CAAC;AACN,CAAC;AAEDrB,SAAS,CAAC,MAAM;EACZW,uBAAuB,CAACa,MAAM,GAAG,CAAC;AACtC,CAAC,CAAC;AAEFvB,QAAQ,CAAC,YAAY,EAAE,MAAM;EACzBE,EAAE,CAAC,iEAAiE,EAAE,YAAY;IAC9EP,MAAM,cACFG,KAAA,CAAA0B,aAAA,CAACpB,UAAU;MAACqB,eAAe,EAAE;IAAI,gBAC7B3B,KAAA,CAAA0B,aAAA,cAAK,cAAiB,CACd,CAChB,CAAC;IAEDL,aAAa,CAAC,GAAG,CAAC;IAElB,MAAMtB,OAAO,CAAC,MAAM;MAChBI,MAAM,CAACL,MAAM,CAAC8B,SAAS,CAAC,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IACrF,CAAC,CAAC;EACN,CAAC,CAAC;EAEF1B,EAAE,CAAC,oDAAoD,EAAE,YAAY;IACjEP,MAAM,cACFG,KAAA,CAAA0B,aAAA,CAACpB,UAAU;MAACqB,eAAe,EAAE;IAAI,gBAC7B3B,KAAA,CAAA0B,aAAA,cAAK,eAAkB,CACf,CAChB,CAAC;IAEDL,aAAa,CAAC,EAAE,CAAC;IAEjB,MAAMtB,OAAO,CAAC,MAAM;MAChBI,MAAM,CAACL,MAAM,CAACiC,WAAW,CAAC,QAAQ,EAAE;QAAEF,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACG,GAAG,CAACF,iBAAiB,CAAC,CAAC;IAC3F,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/lib/esm/utils/uploadFile.js CHANGED Viewed

@@ -5,7 +5,7 @@ export const uploadFile = async ({
   callback,
   shouldUploadImageToSite
 }) => {
-  if (!fileToUpload || fileToUpload.state !== 'none') {
+  if (!fileToUpload || fileToUpload.state !== undefined && fileToUpload.state !== 'none') {
     return;
   }
   if (fileToUpload.file?.type.includes('video/')) {

package/lib/esm/utils/uploadFile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"uploadFile.js","names":["postImage","postVideo","uploadFile","fileToUpload","callback","shouldUploadImageToSite","state","file","type","includes","uploadedVideo","id","toString","uploadedImage","url","base","key","meta","ratio","width","height","Number"~~,"undefined"~~],"sources":["../../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n fileToUpload: InternalFileItem;\n callback: (UploadedFile: Video \| Image) => void;\n shouldUploadImageToSite?: boolean;\n}\n\nexport const uploadFile = async ({\n fileToUpload,\n callback,\n shouldUploadImageToSite,\n}: UploadFilesOptions): Promise<void> => {\n if (!fileToUpload \|\| fileToUpload.state !== 'none') {\n return;\n }\n\n if (fileToUpload.file?.type.includes('video/')) {\n const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n if (uploadedVideo) {\n callback({\n ...uploadedVideo,\n id: uploadedVideo.id.toString(),\n });\n }\n }\n\n if (fileToUpload.file?.type.includes('image/')) {\n const uploadedImage = await postImage({ file: fileToUpload.file, shouldUploadImageToSite });\n\n if (uploadedImage) {\n callback({\n url: `${uploadedImage.base}/${uploadedImage.key}`,\n id: uploadedImage.key,\n meta: uploadedImage.meta,\n ratio:\n uploadedImage.meta?.width && uploadedImage.meta?.height\n ? Number(uploadedImage.meta?.width) / Number(uploadedImage.meta?.height)\n : undefined,\n });\n }\n }\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,mBAAmB;AAC7C,SAASC,SAAS,QAAQ,mBAAmB;AAS7C,OAAO,MAAMC,UAAU,GAAG,MAAAA,CAAO;EAC7BC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAoB;EACrC,IAAI,CAACF,YAAY,~~IAAIA~~,YAAY,CAACG,KAAK,KAAK,~~MAAM~~,EAAE;~~IAChD~~;EACJ;EAEA,IAAIH,YAAY,~~CAACI~~,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,~~MAAMT~~,SAAS,CAAC;~~MAAEM~~,IAAI,~~EAAEJ~~,YAAY,~~CAACI~~;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;~~MACfN~~,QAAQ,CAAC;QACL,~~GAAGM~~,aAAa;QAChBC,EAAE,EAAED,aAAa,CAACC,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,~~IAAIT~~,YAAY,~~CAACI~~,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMI,aAAa,GAAG,~~MAAMb~~,SAAS,CAAC;~~MAAEO~~,IAAI,~~EAAEJ~~,YAAY,~~CAACI~~,IAAI;~~MAAEF~~;IAAwB,CAAC,CAAC;IAE3F,~~IAAIQ~~,aAAa,EAAE;~~MACfT~~,QAAQ,CAAC;~~QACLU~~,GAAG,EAAE,GAAGD,aAAa,CAACE,IAAI,IAAIF,aAAa,CAACG,GAAG,EAAE;QACjDL,EAAE,EAAEE,aAAa,CAACG,GAAG;QACrBC,IAAI,EAAEJ,aAAa,CAACI,IAAI;QACxBC,KAAK,EACDL,aAAa,CAACI,IAAI,EAAEE,KAAK,IAAIN,aAAa,CAACI,IAAI,EAAEG,MAAM,GACjDC,MAAM,CAACR,aAAa,CAACI,IAAI,EAAEE,KAAK,CAAC,GAAGE,MAAM,CAACR,aAAa,CAACI,IAAI,EAAEG,MAAM,CAAC,~~GACtEE~~;MACd,CAAC,CAAC;IACN;EACJ;AACJ,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"uploadFile.js","names":["postImage","postVideo","uploadFile","fileToUpload","callback","shouldUploadImageToSite","state","undefined","file","type","includes","uploadedVideo","id","toString","uploadedImage","url","base","key","meta","ratio","width","height","Number"],"sources":["../../../src/utils/uploadFile.ts"],"sourcesContent":["import { postImage } from '../api/image/post';\nimport { postVideo } from '../api/video/post';\nimport type { Image, InternalFileItem, Video } from '../types/file';\n\ninterface UploadFilesOptions {\n fileToUpload: InternalFileItem;\n callback: (UploadedFile: Video \| Image) => void;\n shouldUploadImageToSite?: boolean;\n}\n\nexport const uploadFile = async ({\n fileToUpload,\n callback,\n shouldUploadImageToSite,\n}: UploadFilesOptions): Promise<void> => {\n if (!fileToUpload \|\| (fileToUpload.state !== undefined && fileToUpload.state !== 'none')) {\n return;\n }\n\n if (fileToUpload.file?.type.includes('video/')) {\n const uploadedVideo = await postVideo({ file: fileToUpload.file });\n\n if (uploadedVideo) {\n callback({\n ...uploadedVideo,\n id: uploadedVideo.id.toString(),\n });\n }\n }\n\n if (fileToUpload.file?.type.includes('image/')) {\n const uploadedImage = await postImage({ file: fileToUpload.file, shouldUploadImageToSite });\n\n if (uploadedImage) {\n callback({\n url: `${uploadedImage.base}/${uploadedImage.key}`,\n id: uploadedImage.key,\n meta: uploadedImage.meta,\n ratio:\n uploadedImage.meta?.width && uploadedImage.meta?.height\n ? Number(uploadedImage.meta?.width) / Number(uploadedImage.meta?.height)\n : undefined,\n });\n }\n }\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,mBAAmB;AAC7C,SAASC,SAAS,QAAQ,mBAAmB;AAS7C,OAAO,MAAMC,UAAU,GAAG,MAAAA,CAAO;EAC7BC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAoB;EACrC,IAAI,CAACF,YAAY,IAAKA,YAAY,CAACG,KAAK,KAAKC,SAAS,IAAIJ,YAAY,CAACG,KAAK,KAAK,MAAO,EAAE;IACtF;EACJ;EAEA,IAAIH,YAAY,CAACK,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMC,aAAa,GAAG,MAAMV,SAAS,CAAC;MAAEO,IAAI,EAAEL,YAAY,CAACK;IAAK,CAAC,CAAC;IAElE,IAAIG,aAAa,EAAE;MACfP,QAAQ,CAAC;QACL,GAAGO,aAAa;QAChBC,EAAE,EAAED,aAAa,CAACC,EAAE,CAACC,QAAQ,CAAC;MAClC,CAAC,CAAC;IACN;EACJ;EAEA,IAAIV,YAAY,CAACK,IAAI,EAAEC,IAAI,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAC5C,MAAMI,aAAa,GAAG,MAAMd,SAAS,CAAC;MAAEQ,IAAI,EAAEL,YAAY,CAACK,IAAI;MAAEH;IAAwB,CAAC,CAAC;IAE3F,IAAIS,aAAa,EAAE;MACfV,QAAQ,CAAC;QACLW,GAAG,EAAE,GAAGD,aAAa,CAACE,IAAI,IAAIF,aAAa,CAACG,GAAG,EAAE;QACjDL,EAAE,EAAEE,aAAa,CAACG,GAAG;QACrBC,IAAI,EAAEJ,aAAa,CAACI,IAAI;QACxBC,KAAK,EACDL,aAAa,CAACI,IAAI,EAAEE,KAAK,IAAIN,aAAa,CAACI,IAAI,EAAEG,MAAM,GACjDC,MAAM,CAACR,aAAa,CAACI,IAAI,EAAEE,KAAK,CAAC,GAAGE,MAAM,CAACR,aAAa,CAACI,IAAI,EAAEG,MAAM,CAAC,GACtEd;MACd,CAAC,CAAC;IACN;EACJ;AACJ,CAAC","ignoreList":[]}

package/lib/types/components/grid-image/GridImage.styles.d.ts CHANGED Viewed

@@ -12,6 +12,16 @@ export declare const StyledGridImage: import("styled-components/dist/types").ISt
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
+type StyledGridSingleImageProps = {
+    $isHidden: boolean;
+};
+export declare const StyledGridSingleImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$isHidden"> & StyledGridSingleImageProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$isHidden"> & StyledGridSingleImageProps, never>>> & string;
+type StyledGridTwoImageProps = {
+    $isHidden: boolean;
+    $isLeft: boolean;
+    $size: number;
+};
+export declare const StyledGridTwoImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, keyof StyledGridTwoImageProps> & StyledGridTwoImageProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, keyof StyledGridTwoImageProps> & StyledGridTwoImageProps, never>>> & string;
 type StyledGridLeftImageProps = {
     $isHidden: boolean;
     $size: number;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.5.41",
+    "version": "5.5.45",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -93,5 +93,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "fc3d589835b668db40cc14ed59307d4cca80e9da"
+    "gitHead": "2fdb77365e5c584e61610bf190ab9c36a5e588ad"
 }