@marimo-team/islands 0.18.5-dev181 → 0.18.5-dev183

package/dist/main.js

@@ -94118,10 +94118,11 @@ ${c}
     render(e) {
       return (0, import_jsx_runtime.jsx)(LazySlidesComponent$1, {
         ...e.data,
+        wrapAround: true,
         children: e.children
       });
     }
-  }, LazySlidesComponent$1 = import_react.lazy(() => import("./slides-component-BNbVrOMb.js"));
+  }, LazySlidesComponent$1 = import_react.lazy(() => import("./slides-component-CJJp5XN4.js"));
   const DownloadPlugin = createPlugin("marimo-download").withData(object$1({
     data: string$2(),
     disabled: boolean$2().default(false),
@@ -100562,7 +100563,7 @@ Defaulting to \`null\`.`;
       cells: []
     })
   };
-  var import_compiler_runtime$8 = require_compiler_runtime(), LazySlidesComponent = import_react.lazy(() => import("./slides-component-BNbVrOMb.js"));
+  var import_compiler_runtime$8 = require_compiler_runtime(), LazySlidesComponent = import_react.lazy(() => import("./slides-component-CJJp5XN4.js"));
   const SlidesLayoutRenderer = (e) => {
     let r = (0, import_compiler_runtime$8.c)(11), { cells: c, mode: d } = e, f = d === "read", h;
     if (r[0] !== c || r[1] !== d) {
@@ -101060,7 +101061,7 @@ Defaulting to \`null\`.`;
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.18.5-dev181"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.18.5-dev183"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/dist/{slides-component-BNbVrOMb.js → slides-component-CJJp5XN4.js}

@@ -2960,71 +2960,79 @@ var SwiperSlide = /* @__PURE__ */ (0, import_react.forwardRef)(function(t2, d) {
 });
 SwiperSlide.displayName = "SwiperSlide";
 var import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), slides_component_default = (t2) => {
-  let d = (0, import_compiler_runtime.c)(26), { className: f, children: g, height: b, forceKeyboardNavigation: x } = t2, S = x === void 0 ? false : x, C = import_react.useRef(null), [w, T] = import_react.useState(false), { hasFullscreen: E } = useIframeCapabilities(), D;
-  d[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (D = () => {
+  let d = (0, import_compiler_runtime.c)(30), { className: f, children: g, height: b, forceKeyboardNavigation: x, wrapAround: S } = t2, C = x === void 0 ? false : x, w = S === void 0 ? false : S, T = import_react.useRef(null), [E, D] = import_react.useState(false), { hasFullscreen: O } = useIframeCapabilities(), k;
+  d[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (k = () => {
     var _a, _b;
-    document.fullscreenElement ? (_a = C.current) == null ? void 0 : _a.swiper.keyboard.enable() : (_b = C.current) == null ? void 0 : _b.swiper.keyboard.disable(), T(!!document.fullscreenElement);
-  }, d[0] = D) : D = d[0], useEventListener(document, "fullscreenchange", D);
-  let O;
-  d[1] === w ? O = d[2] : (O = [w], d[1] = w, d[2] = O), (0, import_react.useEffect)(_temp2, O);
-  let k;
-  d[3] === f ? k = d[4] : (k = cn("relative w-full border rounded bg-background mo-slides-theme prose-slides", f), d[3] = f, d[4] = k);
-  let A = w ? "100%" : b || "550px", j;
-  d[5] === A ? j = d[6] : (j = { height: A }, d[5] = A, d[6] = j);
-  let M, N;
-  d[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (M = [
+    document.fullscreenElement ? (_a = T.current) == null ? void 0 : _a.swiper.keyboard.enable() : (_b = T.current) == null ? void 0 : _b.swiper.keyboard.disable(), D(!!document.fullscreenElement);
+  }, d[0] = k) : k = d[0], useEventListener(document, "fullscreenchange", k);
+  let A;
+  d[1] === E ? A = d[2] : (A = [E], d[1] = E, d[2] = A), (0, import_react.useEffect)(_temp2, A);
+  let j;
+  d[3] === w ? j = d[4] : (j = w ? [
+    Keyboard,
+    Pagination,
+    Zoom,
+    Navigation
+  ] : [
     Virtual,
     Keyboard,
     Pagination,
     Zoom,
     Navigation
-  ], N = { maxRatio: 5 }, d[7] = M, d[8] = N) : (M = d[7], N = d[8]);
-  let P = w || S, F;
-  d[9] === P ? F = d[10] : (F = { enabled: P }, d[9] = P, d[10] = F);
+  ], d[3] = w, d[4] = j);
+  let M = j, N;
+  d[5] === f ? N = d[6] : (N = cn("relative w-full border rounded bg-background mo-slides-theme prose-slides", f), d[5] = f, d[6] = N);
+  let P = E ? "100%" : b || "550px", F;
+  d[7] === P ? F = d[8] : (F = { height: P }, d[7] = P, d[8] = F);
   let I;
-  d[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (I = { clickable: true }, d[11] = I) : I = d[11];
-  let L;
-  if (d[12] !== g || d[13] !== w) {
+  d[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (I = { maxRatio: 5 }, d[9] = I) : I = d[9];
+  let L = E || C, R;
+  d[10] === L ? R = d[11] : (R = { enabled: L }, d[10] = L, d[11] = R);
+  let z;
+  d[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (z = { clickable: true }, d[12] = z) : z = d[12];
+  let B = !w, V;
+  if (d[13] !== g || d[14] !== E) {
     let t3;
-    d[15] === w ? t3 = d[16] : (t3 = (t4, d2) => t4 == null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwiperSlide, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    d[16] === E ? t3 = d[17] : (t3 = (t4, d2) => t4 == null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwiperSlide, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
       onKeyDown: _temp3,
-      className: cn("h-full w-full flex box-border overflow-y-auto overflow-x-hidden", w ? "p-20" : "p-6 pb-12"),
+      className: cn("h-full w-full flex box-border overflow-y-auto overflow-x-hidden", E ? "p-20" : "p-6 pb-12"),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
         className: "mo-slide-content",
         children: t4
       })
-    }) }, d2), d[15] = w, d[16] = t3), L = import_react.Children.map(g, t3), d[12] = g, d[13] = w, d[14] = L;
-  } else L = d[14];
-  let R;
-  d[17] !== E || d[18] !== w ? (R = E && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+    }) }, d2), d[16] = E, d[17] = t3), V = import_react.Children.map(g, t3), d[13] = g, d[14] = E, d[15] = V;
+  } else V = d[15];
+  let H;
+  d[18] !== O || d[19] !== E ? (H = O && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
     variant: "link",
     size: "sm",
     "data-testid": "marimo-plugin-slides-fullscreen",
     onClick: async () => {
-      if (!C.current) return;
-      let t3 = C.current;
-      document.fullscreenElement ? (await document.exitFullscreen(), T(false)) : (await t3.requestFullscreen(), T(true));
+      if (!T.current) return;
+      let t3 = T.current;
+      document.fullscreenElement ? (await document.exitFullscreen(), D(false)) : (await t3.requestFullscreen(), D(true));
     },
     className: "absolute bottom-0 right-0 z-10 mx-1 mb-0",
-    children: w ? "Exit Fullscreen" : "Fullscreen"
-  }), d[17] = E, d[18] = w, d[19] = R) : R = d[19];
-  let z;
-  return d[20] !== F || d[21] !== L || d[22] !== R || d[23] !== k || d[24] !== j ? (z = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Swiper, {
-    ref: C,
-    className: k,
+    children: E ? "Exit Fullscreen" : "Fullscreen"
+  }), d[18] = O, d[19] = E, d[20] = H) : H = d[20];
+  let U;
+  return d[21] !== M || d[22] !== R || d[23] !== B || d[24] !== V || d[25] !== H || d[26] !== N || d[27] !== F || d[28] !== w ? (U = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Swiper, {
+    ref: T,
+    className: N,
     spaceBetween: 50,
-    style: j,
+    style: F,
     slidesPerView: 1,
     modules: M,
-    zoom: N,
+    zoom: I,
     simulateTouch: false,
-    keyboard: F,
+    keyboard: R,
     navigation: true,
-    pagination: I,
-    virtual: true,
+    pagination: z,
+    virtual: B,
     speed: 1,
-    children: [L, R]
-  }), d[20] = F, d[21] = L, d[22] = R, d[23] = k, d[24] = j, d[25] = z) : z = d[25], z;
+    loop: w,
+    children: [V, H]
+  }), d[21] = M, d[22] = R, d[23] = B, d[24] = V, d[25] = H, d[26] = N, d[27] = F, d[28] = w, d[29] = U) : U = d[29], U;
 };
 function _temp() {
   window.dispatchEvent(new Event("resize"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.18.5-dev181",
+  "version": "0.18.5-dev183",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/slides/slides-component.tsx

@@ -21,6 +21,7 @@ interface SlidesComponentProps {
   forceKeyboardNavigation?: boolean;
   index?: string | null;
   height?: string | number | null;
+  wrapAround?: boolean;
 }
 
 const SlidesComponent = ({
@@ -28,6 +29,7 @@ const SlidesComponent = ({
   children,
   height,
   forceKeyboardNavigation = false,
+  wrapAround = false,
 }: PropsWithChildren<SlidesComponentProps>): JSX.Element => {
   const el = React.useRef<SwiperRef>(null);
   const [isFullscreen, setIsFullscreen] = React.useState(false);
@@ -48,6 +50,10 @@ const SlidesComponent = ({
     });
   }, [isFullscreen]);
 
+  const modules = wrapAround // virtual is incompatible with loop
+    ? [Keyboard, Pagination, Zoom, Navigation]
+    : [Virtual, Keyboard, Pagination, Zoom, Navigation];
+
   return (
     <Swiper
       ref={el}
@@ -60,7 +66,7 @@ const SlidesComponent = ({
         height: isFullscreen ? "100%" : height || "550px",
       }}
       slidesPerView={1}
-      modules={[Virtual, Keyboard, Pagination, Zoom, Navigation]}
+      modules={modules}
       zoom={{
         maxRatio: 5,
       }}
@@ -74,10 +80,11 @@ const SlidesComponent = ({
       pagination={{
         clickable: true,
       }}
-      virtual={true}
+      virtual={!wrapAround} // virtual is incompatible with loop, turn off if loop is on
       // Instant swipes, which make sequences of slides
       // that overlay content more legible
       speed={1}
+      loop={wrapAround}
     >
       {React.Children.map(children, (child, index) => {
         if (child == null) {

package/src/plugins/layout/carousel/CarouselPlugin.tsx

@@ -36,7 +36,7 @@ export class CarouselPlugin implements IStatelessPlugin<Data> {
 
   render(props: IStatelessPluginProps<Data>): JSX.Element {
     return (
-      <LazySlidesComponent {...props.data}>
+      <LazySlidesComponent {...props.data} wrapAround={true}>
         {props.children}
       </LazySlidesComponent>
     );