@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/node/lib/components/modals/ModalBase.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactTransitionGroup = require("react-transition-group");
+var _reactRemoveScroll = require("react-remove-scroll");
+var _useForkRef = _interopRequireDefault(require("../../helper/useForkRef.js"));
+var _LoadingIndicator = _interopRequireDefault(require("../loading-indicator/LoadingIndicator.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+const ModalBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isOpen,
+    isLoading,
+    onClose,
+    onCloseDone,
+    className,
+    children,
+    ...props
+  } = _ref;
+  const modalRef = (0, _react.useRef)(null);
+  const backdropRef = (0, _react.useRef)(null);
+  const mouseDownOnBackdropActive = (0, _react.useRef)(false);
+  const allRefs = (0, _useForkRef.default)(ref, modalRef);
+  const container = modalRef?.current?.ownerDocument || document;
+
+  // Handle Escape key to close modal
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = event => {
+      if (event.key === "Escape" && isOpen) {
+        onClose?.();
+      }
+    };
+    container.addEventListener("keydown", handleKeyDown);
+    return () => container.removeEventListener("keydown", handleKeyDown);
+  }, [onClose, isOpen, container]);
+
+  // Focus trap implementation
+  const handleTabKey = (0, _react.useCallback)(e => {
+    if (e.key === "Tab" && modalRef.current && isOpen) {
+      // Query for all focusable elements
+      const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      // If shift+tab and we're on the first element, move to the last
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement?.focus();
+      }
+      // If tab and we're on the last element, move to the first
+      else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement?.focus();
+      }
+    }
+  }, [isOpen]);
+
+  // Set up the focus trap listener
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      container.addEventListener("keydown", handleTabKey);
+
+      // Auto-focus first focusable element when modal opens
+      setTimeout(() => {
+        if (modalRef.current) {
+          const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+
+          // Focus the first input element, or the first focusable element if no input exists
+          const firstInput = Array.from(focusableElements).find(el => el.tagName.toLowerCase() === "input");
+          if (firstInput) {
+            firstInput.focus();
+          } else if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
+        }
+      }, 100);
+    }
+    return () => {
+      container.removeEventListener("keydown", handleTabKey);
+    };
+  }, [isOpen, handleTabKey, container]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+        classNames: "fr-modal-backdrop",
+        in: isOpen,
+        timeout: {
+          exit: 300
+        },
+        appear: true,
+        unmountOnExit: true,
+        nodeRef: backdropRef,
+        component: null,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: backdropRef,
+          className: "fr-modal-backdrop fwe-modal-backdrop"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+        classNames: "fr-modal",
+        in: isOpen && !isLoading,
+        onExited: onCloseDone,
+        timeout: {
+          exit: 300,
+          enter: 100
+        },
+        appear: true,
+        unmountOnExit: true,
+        nodeRef: modalRef,
+        component: null,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fr-modal-overlay-wrapper",
+          onClick: e => e.stopPropagation(),
+          onMouseDown: e => {
+            mouseDownOnBackdropActive.current = e.target === e.currentTarget;
+          },
+          onMouseUp: e => {
+            const closeModal = mouseDownOnBackdropActive.current && e.target === e.currentTarget;
+            mouseDownOnBackdropActive.current = false;
+            if (closeModal) {
+              onClose?.();
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRemoveScroll.RemoveScroll, {
+            ref: allRefs,
+            enabled: isOpen,
+            className: (0, _classnames.default)("fr-modal fwe-modal", className),
+            ...props,
+            children: children
+          })
+        })
+      }), isOpen && isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fr-modal-overlay-wrapper",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.default, {
+          size: "large"
+        })
+      })]
+    }), container.body)
+  });
+});
+var _default = exports.default = ModalBase;

package/node/lib/components/modals/ModalFooter.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ModalFooter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _classnames.default)("fwe-modal-footer", className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)("fwe-modal-buttons"),
+      children: children
+    })
+  });
+});
+var _default = exports.default = ModalFooter;

package/node/lib/components/modals/Prompt.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Prompt;
+var _react = _interopRequireWildcard(require("react"));
+var _TextInput = _interopRequireDefault(require("../../forms/text-input/TextInput.js"));
+var _Modal = _interopRequireDefault(require("./Modal.js"));
+var _ModalFooter = _interopRequireDefault(require("./ModalFooter.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function Prompt(_ref) {
+  let {
+    title,
+    subtitle,
+    hint,
+    label,
+    value,
+    onChange,
+    onOk,
+    onCancel,
+    cancel,
+    ok,
+    ...props
+  } = _ref;
+  const [innerValue, setInnerValue] = (0, _react.useState)(value);
+  (0, _react.useEffect)(() => {
+    setInnerValue(value);
+  }, [value]);
+  function handleChange(e) {
+    setInnerValue(e.target.value);
+    if (onChange) {
+      onChange(e);
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    head: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        className: "fwe-modal-h2",
+        children: subtitle
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+        className: "fwe-modal-h1",
+        children: title
+      })]
+    }),
+    body: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
+      onChange: handleChange,
+      label: label,
+      hint: hint,
+      value: innerValue,
+      autoFocus: true
+    }),
+    ...props,
+    children: (cancel || ok) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalFooter.default, {
+      children: [cancel && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        "aria-label": "Cancel",
+        className: "fwe-btn fwe-btn-lg",
+        onClick: onCancel,
+        children: cancel
+      }), ok && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        "aria-label": "Ok",
+        className: "fwe-btn fwe-btn-hero fwe-btn-lg",
+        onClick: () => onOk(innerValue),
+        children: ok
+      })]
+    })
+  });
+}

package/node/lib/components/modals/image-gallery/ImageGallery.helper.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getClasses = (thumbnailImages, descriptiveContent, className) => {
+  const base = "fwe-modal-image-gallery";
+  const thumbnail = `${base}--with-thumbnails`;
+  const container = `${base}--with-container`;
+  return (0, _classnames.default)(base, {
+    [thumbnail]: [thumbnailImages],
+    [container]: descriptiveContent
+  }, className);
+};
+var _default = exports.default = getClasses;

package/node/lib/components/modals/image-gallery/ImageGallery.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _ModalBase = _interopRequireDefault(require("../ModalBase.js"));
+var _BaseGallery = _interopRequireDefault(require("./internal/BaseGallery.js"));
+var _ImageGalleryContent = _interopRequireDefault(require("./ImageGalleryContent.js"));
+var _ImageGalleryPagination = _interopRequireDefault(require("./internal/ImageGalleryPagination.js"));
+var _ImageGalleryHelper = _interopRequireDefault(require("./ImageGallery.helper.js"));
+var _ImageGalleryContainer = _interopRequireDefault(require("./internal/ImageGalleryContainer.js"));
+var _CloseButton = _interopRequireDefault(require("./internal/CloseButton.js"));
+var _ScaleButton = _interopRequireDefault(require("./internal/ScaleButton.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function getLength(pagination, images) {
+  let length = 0;
+  if (typeof pagination === "number") {
+    length = pagination;
+  } else if (pagination === true && images?.length) {
+    length = images.length;
+  }
+  return length;
+}
+const ImageGallery = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isOpen,
+    startIndex,
+    images,
+    thumbnailImages,
+    descriptiveContent,
+    children,
+    className,
+    pagination,
+    showScaleButton,
+    onClose,
+    onSlideChanged,
+    onScaleChange,
+    ...props
+  } = _ref;
+  const [currentIndex, setCurrentIndex] = (0, _react.useState)(startIndex + 1);
+  function handleChange(index) {
+    setCurrentIndex(index + 1);
+    onSlideChanged?.(index);
+  }
+  function handleClose() {
+    setCurrentIndex(startIndex + 1);
+    onClose?.();
+  }
+  const hasDescriptiveContent = Boolean(descriptiveContent);
+  const classes = (0, _ImageGalleryHelper.default)(thumbnailImages, hasDescriptiveContent, className);
+  const length = getLength(pagination, images);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalBase.default, {
+    onClose: handleClose,
+    className: classes,
+    ...props,
+    isOpen: isOpen,
+    ref: ref,
+    children: isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fwe-image-gallery-header",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryPagination.default, {
+          currentIndex: currentIndex,
+          length: length
+        }), showScaleButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScaleButton.default, {
+          onScaleChange: onScaleChange
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_CloseButton.default, {
+          showScaleButton: showScaleButton,
+          onClose: onClose
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ImageGalleryContainer.default, {
+        descriptiveContent: hasDescriptiveContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseGallery.default, {
+          startIndex: startIndex,
+          images: images,
+          thumbnailImages: thumbnailImages,
+          onSlideChanged: handleChange,
+          children: children
+        }), images && descriptiveContent === true ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryContent.default, {
+          imageContent: images?.[currentIndex - 1]?.content
+        }) : null, typeof descriptiveContent === "function" ? descriptiveContent?.(currentIndex - 1) : null]
+      })]
+    })
+  });
+});
+var _default = exports.default = ImageGallery;

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

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _gallery01Webp = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-01.webp.js"));
+var _gallery02Webp = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-02.webp.js"));
+var _gallery03Webp = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-03.webp.js"));
+var _gallery04Webp = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-04.webp.js"));
+var _gallery05Webp = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-05.webp.js"));
+var _gallery06Webp = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-06.webp.js"));
+var _gallery07Webp = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-07.webp.js"));
+var _gallery08Webp = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-08.webp.js"));
+var _gallery09Webp = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-09.webp.js"));
+var _gallery10Webp = _interopRequireDefault(require("../../../../../../web-essentials/stories/assets/gallery-10.webp.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable import/no-relative-packages */
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+// @ts-ignore
+
+const images = [{
+  src: _gallery01Webp.default,
+  alt: "Asset1",
+  imageContent: {
+    title: "Asset 1",
+    body: "Asset 1 description"
+  }
+}, {
+  src: _gallery02Webp.default,
+  alt: "Asset2",
+  containMode: true,
+  imageContent: {
+    title: "Asset 2",
+    body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Asset 2 description with some html inside."
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: "bullet point 1"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          children: "bullet point 2"
+        })]
+      })]
+    })
+  }
+}, {
+  src: _gallery03Webp.default,
+  alt: "Asset3",
+  containMode: true,
+  imageContent: {
+    title: "Asset 3",
+    body: "Asset 3 description"
+  }
+}, {
+  src: _gallery04Webp.default,
+  alt: "Asset4",
+  imageContent: {
+    title: "Asset 4",
+    body: "Asset 4 description"
+  }
+}, {
+  src: _gallery05Webp.default,
+  alt: "Asset5",
+  imageContent: {
+    title: "Asset 5",
+    body: "Asset 5 description"
+  }
+}, {
+  src: _gallery06Webp.default,
+  alt: "Asset6",
+  imageContent: {
+    title: "Asset 6",
+    body: "Asset 6 description"
+  }
+}, {
+  src: _gallery07Webp.default,
+  alt: "Asset7",
+  imageContent: {
+    title: "Asset 7",
+    body: "Asset 7 description"
+  }
+}, {
+  src: _gallery08Webp.default,
+  alt: "Asset8",
+  imageContent: {
+    title: "Asset 8",
+    body: "Asset 8 description"
+  }
+}, {
+  src: _gallery09Webp.default,
+  alt: "Asset9",
+  imageContent: {
+    title: "Asset 9",
+    body: "Asset 9 description"
+  }
+}, {
+  src: _gallery10Webp.default,
+  alt: "Asset10",
+  imageContent: {
+    title: "Asset 10",
+    body: "Asset 1ß description"
+  }
+}];
+var _default = exports.default = images;

package/node/lib/components/modals/image-gallery/ImageGalleryContent.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ImageGalleryContent;
+var _jsxRuntime = require("react/jsx-runtime");
+function ImageGalleryContent(_ref) {
+  let {
+    imageContent
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: imageContent && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-image-gallery-content",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: imageContent.title
+      }), imageContent.body]
+    })
+  });
+}

package/node/lib/components/modals/image-gallery/ImageGalleryContext.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SwiperContext = void 0;
+var _react = require("react");
+const ImageGalleryContext = /*#__PURE__*/(0, _react.createContext)({});
+const SwiperContext = exports.SwiperContext = /*#__PURE__*/(0, _react.createContext)("gallery");
+var _default = exports.default = ImageGalleryContext;

package/node/lib/components/modals/image-gallery/ImageGallerySwiper.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ImageGallerySwiper;
+var _react = require("swiper/react");
+var _swiper = require("swiper");
+var _react2 = require("react");
+var _ImageGalleryContext = _interopRequireDefault(require("./ImageGalleryContext.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ImageGallerySwiper(_ref) {
+  let {
+    children
+  } = _ref;
+  const {
+    thumbsSwiper,
+    startIndex,
+    onSlideChanged
+  } = (0, _react2.useContext)(_ImageGalleryContext.default);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Swiper, {
+    initialSlide: startIndex,
+    thumbs: {
+      swiper: thumbsSwiper
+    },
+    modules: [_swiper.Thumbs, _swiper.Navigation],
+    navigation: {
+      nextEl: ".fwe-navigate-btn-up",
+      prevEl: ".fwe-navigate-btn-down"
+    },
+    zoom: true,
+    className: "gallery-swiper fwe-image-gallery",
+    spaceBetween: 0,
+    onSlideChange: slider => onSlideChanged?.(slider.activeIndex),
+    children: children
+  });
+}
+ImageGallerySwiper.displayName = "Swiper";

package/node/lib/components/modals/image-gallery/ImageGalleryThumbsSwiper.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ImageGalleryThumbsSwiper;
+var _react = require("react");
+var _swiper = require("swiper");
+var _react2 = require("swiper/react");
+var _ImageGalleryContext = _interopRequireWildcard(require("./ImageGalleryContext.js"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ImageGalleryThumbsSwiper(_ref) {
+  let {
+    children
+  } = _ref;
+  const {
+    setThumbsSwiper
+  } = (0, _react.useContext)(_ImageGalleryContext.default);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageGalleryContext.SwiperContext.Provider, {
+    value: "thumbs",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Swiper, {
+      freeMode: true,
+      slidesPerView: "auto",
+      className: "thumbs-swiper fwe-image-gallery-thumbs",
+      modules: [_swiper.Thumbs],
+      watchSlidesProgress: true,
+      onSwiper: setThumbsSwiper,
+      children: children
+    })
+  });
+}

package/node/lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ImageGalleryItem;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("swiper/react");
+var _react2 = require("react");
+var _ImageGalleryContext = require("../ImageGalleryContext.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ImageGalleryItem(_ref) {
+  let {
+    children,
+    containMode,
+    className,
+    ...props
+  } = _ref;
+  const swiperType = (0, _react2.useContext)(_ImageGalleryContext.SwiperContext);
+  const isThumbsSwiper = swiperType === "thumbs";
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.SwiperSlide, {
+    ...props,
+    className: (0, _classnames.default)(className, {
+      "fr-image-gallery-item--contain": containMode && isThumbsSwiper
+    }),
+    children: isThumbsSwiper ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)("swiper-zoom-container", {
+        "fr-image-gallery-item--contain": containMode
+      }),
+      children: children
+    })
+  });
+}
+ImageGalleryItem.displayName = "SwiperSlide";