@festo-ui/react 9.0.0-dev.723 → 9.0.0-dev.724

package/dist/components/modals/image-gallery/ImageGallery.css

@@ -788,3 +788,13 @@
   }
 }
 
+.fr-image-gallery-item-contain {
+  padding: 8px;
+  object-fit: contain !important;
+}
+
+.fr-image-gallery-item-thumb-contain {
+  padding: 2px;
+  object-fit: contain !important;
+}
+

package/dist/components/modals/image-gallery/ImageGallery.d.ts

@@ -1,12 +1,12 @@
 import './ImageGallery.scss';
 import { type ComponentPropsWithoutRef } from 'react';
 import { type ModalBaseProps } from '../ModalBase';
-import { type ImageGalleryItemData, type ImageGalleryItemDataBase } from './internal/BaseGallery';
+import { type ImageGalleryItemData } from './internal/BaseGallery';
 export interface ImageGalleryProps extends ComponentPropsWithoutRef<'div'>, ModalBaseProps {
     /** Index number of initial slide. */
     startIndex: number;
     images?: ImageGalleryItemData[];
-    thumbnailImages?: ImageGalleryItemDataBase[];
+    thumbnailImages?: ImageGalleryItemData[];
     /** Whether to show pagination controls. Can also accept a number in case images are passed as children */
     pagination?: boolean | number;
     showScaleButton?: boolean;

package/dist/components/modals/image-gallery/ImageGallery.js

@@ -62,9 +62,9 @@ const ImageGallery = /*#__PURE__*/ forwardRef(({ isOpen, startIndex, images, thu
                             onSlideChanged: handleChange,
                             children: children
                         }),
-                        images && true === descriptiveContent ? /*#__PURE__*/ jsx(ImageGalleryContent, {
-                            imageContent: images?.[currentIndex - 1]?.content
-                        }) : null,
+                        images && hasDescriptiveContent && /*#__PURE__*/ jsx(ImageGalleryContent, {
+                            imageContent: images?.[currentIndex - 1]?.imageContent
+                        }),
                         'function' == typeof descriptiveContent ? descriptiveContent?.(currentIndex - 1) : null
                     ]
                 })

package/dist/components/modals/image-gallery/ImageGallery.stories.helper.js

@@ -105,7 +105,7 @@ const ImageGallery_stories_helper_images = [
         alt: 'Asset10',
         imageContent: {
             title: 'Asset 10',
-            body: "Asset 1\xdf description"
+            body: "Asset 10 description"
         }
     }
 ];

package/dist/components/modals/image-gallery/ImageGallerySwiper.d.ts

@@ -1,7 +1,8 @@
+import type { ImageGalleryItemData } from './internal/BaseGallery';
 interface ImageGallerySwiperProps {
-    children: React.ReactNode;
+    readonly images?: ImageGalleryItemData[];
 }
-export declare function ImageGallerySwiper({ children }: ImageGallerySwiperProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageGallerySwiper({ images }: ImageGallerySwiperProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ImageGallerySwiper {
     var displayName: string;
 }

package/dist/components/modals/image-gallery/ImageGallerySwiper.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
 import { useContext } from "react";
 import { Navigation, Thumbs } from "swiper/modules";
-import { Swiper } from "swiper/react";
+import { Swiper, SwiperSlide } from "swiper/react";
 import { ImageGalleryContext } from "./ImageGalleryContext.js";
-function ImageGallerySwiper({ children }) {
+function ImageGallerySwiper({ images }) {
     const { thumbsSwiper, startIndex, onSlideChanged } = useContext(ImageGalleryContext);
     return /*#__PURE__*/ jsx(Swiper, {
         initialSlide: startIndex,
@@ -22,7 +23,16 @@ function ImageGallerySwiper({ children }) {
         className: "gallery-swiper fwe-image-gallery",
         spaceBetween: 0,
         onSlideChange: (slider)=>onSlideChanged?.(slider.activeIndex),
-        children: children
+        children: images?.map(({ containMode, alt, imageContent, ...image })=>/*#__PURE__*/ jsx(SwiperSlide, {
+                zoom: containMode,
+                children: /*#__PURE__*/ jsx("img", {
+                    ...image,
+                    className: classnames(image.className, {
+                        'fr-image-gallery-item-contain': containMode
+                    }),
+                    alt: alt
+                })
+            }, image.src))
     });
 }
 ImageGallerySwiper.displayName = 'Swiper';

package/dist/components/modals/image-gallery/ImageGalleryThumbsSwiper.d.ts

@@ -1,5 +1,6 @@
+import type { ImageGalleryItemData } from './internal/BaseGallery';
 interface ImageGalleryThumbsSwiperProps {
-    children: React.ReactNode;
+    readonly images?: ImageGalleryItemData[];
 }
-export declare function ImageGalleryThumbsSwiper({ children, }: ImageGalleryThumbsSwiperProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageGalleryThumbsSwiper({ images, }: ImageGalleryThumbsSwiperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/modals/image-gallery/ImageGalleryThumbsSwiper.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
 import { useContext } from "react";
 import { Thumbs } from "swiper/modules";
-import { Swiper } from "swiper/react";
+import { Swiper, SwiperSlide } from "swiper/react";
 import { ImageGalleryContext, SwiperContext } from "./ImageGalleryContext.js";
-function ImageGalleryThumbsSwiper({ children }) {
+function ImageGalleryThumbsSwiper({ images }) {
     const { setThumbsSwiper } = useContext(ImageGalleryContext);
     return /*#__PURE__*/ jsx(SwiperContext.Provider, {
         value: "thumbs",
@@ -16,7 +17,16 @@ function ImageGalleryThumbsSwiper({ children }) {
             ],
             watchSlidesProgress: true,
             onSwiper: setThumbsSwiper,
-            children: children
+            children: images?.map(({ containMode, alt, imageContent, ...image })=>/*#__PURE__*/ jsx(SwiperSlide, {
+                    zoom: containMode,
+                    children: /*#__PURE__*/ jsx("img", {
+                        ...image,
+                        className: classnames(image.className, {
+                            'fr-image-gallery-item-thumb-contain': containMode
+                        }),
+                        alt: alt
+                    })
+                }, image.src))
         })
     });
 }

package/dist/components/modals/image-gallery/internal/BaseGallery.d.ts

@@ -1,15 +1,13 @@
 import { type ComponentPropsWithoutRef } from 'react';
 import type { ClassNamePropsWithChildren } from '../../../../utils/types';
 import type { ImageDescriptiveContent } from '../ImageGalleryContent';
-export interface ImageGalleryItemDataBase extends ComponentPropsWithoutRef<'img'>, Record<string, unknown> {
-    containMode?: boolean;
-}
 export type ImageGalleryItemData = {
-    content?: ImageDescriptiveContent;
-} & ImageGalleryItemDataBase;
+    imageContent?: ImageDescriptiveContent;
+    containMode?: boolean;
+} & ComponentPropsWithoutRef<'img'> & Record<string, unknown>;
 interface BaseGalleryProps extends ClassNamePropsWithChildren {
     readonly images?: ImageGalleryItemData[];
-    readonly thumbnailImages?: ImageGalleryItemDataBase[];
+    readonly thumbnailImages?: ImageGalleryItemData[];
     readonly onSlideChanged?: (value: number) => void;
     readonly startIndex?: number;
 }

package/dist/components/modals/image-gallery/internal/BaseGallery.js

@@ -3,7 +3,6 @@ import { useMemo, useState } from "react";
 import { ImageGalleryContext } from "../ImageGalleryContext.js";
 import { ImageGallerySwiper } from "../ImageGallerySwiper.js";
 import { ImageGalleryThumbsSwiper } from "../ImageGalleryThumbsSwiper.js";
-import { ImageGalleryItem } from "../image-gallery-item/ImageGalleryItem.js";
 function BaseGallery({ images, thumbnailImages, onSlideChanged, startIndex, children }) {
     const [thumbsSwiper, setThumbsSwiper] = useState(null);
     const contextValue = useMemo(()=>({
@@ -23,24 +22,10 @@ function BaseGallery({ images, thumbnailImages, onSlideChanged, startIndex, chil
             children: children || /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsx(ImageGallerySwiper, {
-                        children: images?.map(({ containMode, alt, content, ...image })=>/*#__PURE__*/ jsx(ImageGalleryItem, {
-                                containMode: containMode,
-                                children: /*#__PURE__*/ jsx("img", {
-                                    ...image,
-                                    className: image.className,
-                                    alt: alt
-                                })
-                            }, image.src))
+                        images: images
                     }),
                     thumbnailImages && /*#__PURE__*/ jsx(ImageGalleryThumbsSwiper, {
-                        children: thumbnailImages.map(({ containMode, alt, content, ...image })=>/*#__PURE__*/ jsx(ImageGalleryItem, {
-                                containMode: containMode,
-                                children: /*#__PURE__*/ jsx("img", {
-                                    ...image,
-                                    className: image.className,
-                                    alt: alt
-                                })
-                            }, image.src))
+                        images: thumbnailImages
                     })
                 ]
             })

package/dist/index.d.ts

@@ -23,7 +23,6 @@ export { ImageGallery } from './components/modals/image-gallery/ImageGallery';
 export { ImageGalleryContent } from './components/modals/image-gallery/ImageGalleryContent';
 export { ImageGallerySwiper } from './components/modals/image-gallery/ImageGallerySwiper';
 export { ImageGalleryThumbsSwiper } from './components/modals/image-gallery/ImageGalleryThumbsSwiper';
-export { ImageGalleryItem } from './components/modals/image-gallery/image-gallery-item/ImageGalleryItem';
 export { ModalBase, type ModalBaseProps, } from './components/modals/ModalBase';
 export { Prompt, type PromptProps } from './components/modals/Prompt';
 export { Pagination, type PaginationProps, PaginationType, } from './components/pagination/Pagination';

package/dist/index.js

@@ -23,7 +23,6 @@ import { ImageGallery } from "./components/modals/image-gallery/ImageGallery.js"
 import { ImageGalleryContent } from "./components/modals/image-gallery/ImageGalleryContent.js";
 import { ImageGallerySwiper } from "./components/modals/image-gallery/ImageGallerySwiper.js";
 import { ImageGalleryThumbsSwiper } from "./components/modals/image-gallery/ImageGalleryThumbsSwiper.js";
-import { ImageGalleryItem } from "./components/modals/image-gallery/image-gallery-item/ImageGalleryItem.js";
 import { ModalBase } from "./components/modals/ModalBase.js";
 import { Prompt } from "./components/modals/Prompt.js";
 import { Pagination, PaginationType } from "./components/pagination/Pagination.js";
@@ -57,4 +56,4 @@ import { Switch } from "./forms/switch/Switch.js";
 import { TextArea } from "./forms/text-area/TextArea.js";
 import { TextInput } from "./forms/text-input/TextInput.js";
 import { TimePicker } from "./forms/time-picker/TimePicker.js";
-export { Accordion, AccordionHeader, AccordionItem, AccordionItemBody, AccordionItemHeader, AlertModal, Breadcrumb, Button, Card, CardBody, CardHeader, CardNotification, Checkbox, Chip, ChipContainer, ChipType, ConfirmModal, CustomModal, ImageGallery, ImageGalleryContent, ImageGalleryItem, ImageGallerySwiper, ImageGalleryThumbsSwiper, LinkButton, LoadingIndicator, MobileFlyout, MobileFlyoutItem, MobileFlyoutPage, ModalBase, Pagination, PaginationType, Popover, PopoverMenu, PopoverMenuContext, PopoverMenuItem, Progress, Prompt, RadioButton, RadioGroup, SearchInput, SearchSuggestion, Segment, SegmentControl, Select, SelectOption, Slider, Snackbar, SnackbarProvider, StepHorizontal, StepVertical, StepperHorizontal, StepperVertical, Switch, TabPane, TableHeaderCell, Tabs, TextArea, TextInput, TimePicker, Tooltip, addSnackbar, useSnackbar };
+export { Accordion, AccordionHeader, AccordionItem, AccordionItemBody, AccordionItemHeader, AlertModal, Breadcrumb, Button, Card, CardBody, CardHeader, CardNotification, Checkbox, Chip, ChipContainer, ChipType, ConfirmModal, CustomModal, ImageGallery, ImageGalleryContent, ImageGallerySwiper, ImageGalleryThumbsSwiper, LinkButton, LoadingIndicator, MobileFlyout, MobileFlyoutItem, MobileFlyoutPage, ModalBase, Pagination, PaginationType, Popover, PopoverMenu, PopoverMenuContext, PopoverMenuItem, Progress, Prompt, RadioButton, RadioGroup, SearchInput, SearchSuggestion, Segment, SegmentControl, Select, SelectOption, Slider, Snackbar, SnackbarProvider, StepHorizontal, StepVertical, StepperHorizontal, StepperVertical, Switch, TabPane, TableHeaderCell, Tabs, TextArea, TextInput, TimePicker, Tooltip, addSnackbar, useSnackbar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "9.0.0-dev.723",
+  "version": "9.0.0-dev.724",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",

package/dist/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.css

@@ -1,10 +0,0 @@
-.fwe-image-gallery .fr-image-gallery-item--contain img {
-  object-fit: contain;
-  padding: 24px;
-}
-
-.fwe-image-gallery-thumbs.swiper .fr-image-gallery-item--contain img {
-  object-fit: contain;
-  padding: 4px;
-}
-

package/dist/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.d.ts

@@ -1,11 +0,0 @@
-import { type SwiperSlideProps } from 'swiper/react';
-import './ImageGalleryItem.scss';
-interface ImageGalleryItemProps extends SwiperSlideProps {
-    children: React.ReactNode;
-    containMode?: boolean;
-}
-export declare function ImageGalleryItem({ children, containMode, className, ...props }: ImageGalleryItemProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ImageGalleryItem {
-    var displayName: string;
-}
-export {};

package/dist/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.js

@@ -1,24 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { SwiperSlide } from "swiper/react";
-import "./ImageGalleryItem.css";
-import { useContext } from "react";
-import { SwiperContext } from "../ImageGalleryContext.js";
-function ImageGalleryItem({ children, containMode, className, ...props }) {
-    const swiperType = useContext(SwiperContext);
-    const isThumbsSwiper = 'thumbs' === swiperType;
-    return /*#__PURE__*/ jsx(SwiperSlide, {
-        ...props,
-        className: classnames(className, {
-            'fr-image-gallery-item--contain': containMode && isThumbsSwiper
-        }),
-        children: isThumbsSwiper ? children : /*#__PURE__*/ jsx("div", {
-            className: classnames('swiper-zoom-container', {
-                'fr-image-gallery-item--contain': containMode
-            }),
-            children: children
-        })
-    });
-}
-ImageGalleryItem.displayName = 'SwiperSlide';
-export { ImageGalleryItem };