@opengeni/react 6.1.0 → 7.0.0-canary.35625901699001

package/dist/{chunk-PEI6RANI.js → chunk-VR4Z73EU.js}

@@ -37,6 +37,9 @@ var MAX_ZOOM = 4;
 var RAIL_ITEM_HEIGHT = 116;
 var RAIL_OVERSCAN = 3;
 var DEFAULT_RAIL_HEIGHT = 640;
+var MOBILE_RAIL_ITEM_HEIGHT = 44;
+var MOBILE_RAIL_OVERSCAN = 3;
+var DEFAULT_MOBILE_LIST_HEIGHT = 264;
 var DEFAULT_VIEWPORT = { width: 960, height: 640 };
 var SPATIAL_TILE = 256;
 var MAX_SPATIAL_BUCKETS_PER_OBJECT = 1024;
@@ -87,6 +90,14 @@ function PresentationProjectionEditor({
     }
   );
 }
+function nextSlideIndexFromKey(key, activeIndex, length) {
+  if (length === 0) return null;
+  if (key === "ArrowDown") return Math.min(length - 1, activeIndex + 1);
+  if (key === "ArrowUp") return Math.max(0, activeIndex - 1);
+  if (key === "Home") return 0;
+  if (key === "End") return length - 1;
+  return null;
+}
 function PresentationEditorCore({
   presentation,
   revision,
@@ -125,6 +136,11 @@ function PresentationEditorCore({
     scrollTop: 0,
     height: DEFAULT_RAIL_HEIGHT
   });
+  const [mobileSelectorOpen, setMobileSelectorOpen] = useState(false);
+  const [mobileRail, setMobileRail] = useState({
+    scrollTop: 0,
+    height: DEFAULT_MOBILE_LIST_HEIGHT
+  });
   const [viewport, setViewport] = useState({
     scrollLeft: 0,
     scrollTop: 0,
@@ -137,6 +153,9 @@ function PresentationEditorCore({
   const [textDraft, setTextDraft] = useState("");
   const [paintEpoch, setPaintEpoch] = useState(0);
   const railRef = useRef(null);
+  const mobileSelectorTriggerRef = useRef(null);
+  const mobileSelectorPanelRef = useRef(null);
+  const mobileRailRef = useRef(null);
   const viewportRef = useRef(null);
   const stageRef = useRef(null);
   const canvasRef = useRef(null);
@@ -150,6 +169,7 @@ function PresentationEditorCore({
   const commandVersionsRef = useRef(/* @__PURE__ */ new Map());
   const pendingSlideIdRef = useRef(null);
   const pendingObjectIdRef = useRef(null);
+  const mobileRailScrollOnOpenRef = useRef(0);
   const domId = useId().replaceAll(":", "");
   const selectionProxyId = `${domId}-presentation-selection`;
   const instructionsId = `${domId}-presentation-instructions`;
@@ -208,6 +228,44 @@ function PresentationEditorCore({
     observer.observe(element);
     return () => observer.disconnect();
   }, []);
+  useLayoutEffect(() => {
+    if (!mobileSelectorOpen) return;
+    const element = mobileRailRef.current;
+    if (!element) return;
+    element.scrollTop = mobileRailScrollOnOpenRef.current;
+    element.focus();
+    const measure = () => setMobileRail((current) => ({
+      scrollTop: element.scrollTop,
+      height: element.clientHeight || current.height
+    }));
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [mobileSelectorOpen]);
+  useEffect(() => {
+    if (!mobileSelectorOpen) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (mobileSelectorTriggerRef.current?.contains(target)) return;
+      if (mobileSelectorPanelRef.current?.contains(target)) return;
+      setMobileSelectorOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      setMobileSelectorOpen(false);
+      mobileSelectorTriggerRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [mobileSelectorOpen]);
   useLayoutEffect(() => {
     const element = viewportRef.current;
     if (!element) return;
@@ -623,6 +681,32 @@ function PresentationEditorCore({
     },
     [activeIndex, activeSlide, selectSlide, slides]
   );
+  const toggleMobileSlideSelector = useCallback(() => {
+    setMobileSelectorOpen((open) => {
+      if (open) return false;
+      const index = Math.max(0, activeIndex);
+      const height = DEFAULT_MOBILE_LIST_HEIGHT;
+      const maxScroll = Math.max(0, slides.length * MOBILE_RAIL_ITEM_HEIGHT - height);
+      const scrollTop = Math.max(
+        0,
+        Math.min(
+          maxScroll,
+          index * MOBILE_RAIL_ITEM_HEIGHT - height / 2 + MOBILE_RAIL_ITEM_HEIGHT / 2
+        )
+      );
+      mobileRailScrollOnOpenRef.current = scrollTop;
+      setMobileRail({ scrollTop, height });
+      return true;
+    });
+  }, [activeIndex, slides.length]);
+  const chooseMobileSlide = useCallback(
+    (slide, index) => {
+      if (slide !== activeSlide) selectSlide(slide, index);
+      setMobileSelectorOpen(false);
+      mobileSelectorTriggerRef.current?.focus();
+    },
+    [activeSlide, selectSlide]
+  );
   const handleCanvasKeyDown = useCallback(
     (event) => {
       if (event.metaKey || event.ctrlKey) {
@@ -784,6 +868,15 @@ function PresentationEditorCore({
     slides.length,
     Math.ceil((rail.scrollTop + rail.height) / RAIL_ITEM_HEIGHT) + RAIL_OVERSCAN
   );
+  const mobileRailStart = Math.max(
+    0,
+    Math.floor(mobileRail.scrollTop / MOBILE_RAIL_ITEM_HEIGHT) - MOBILE_RAIL_OVERSCAN
+  );
+  const mobileRailEnd = Math.min(
+    slides.length,
+    Math.ceil((mobileRail.scrollTop + mobileRail.height) / MOBILE_RAIL_ITEM_HEIGHT) + MOBILE_RAIL_OVERSCAN
+  );
+  const slideCountLabel = activeIndex >= 0 ? `${activeIndex + 1} / ${slides.length}` : `0 / ${slides.length}`;
   const stageWidth = presentation.slideSize.width * zoom;
   const stageHeight = presentation.slideSize.height * zoom;
   return /* @__PURE__ */ jsxs(
@@ -815,7 +908,23 @@ function PresentationEditorCore({
                     children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { className: "min-w-16 shrink-0 text-center text-og-xs tabular-nums text-og-fg-muted", children: activeIndex >= 0 ? `${activeIndex + 1} / ${slides.length}` : `0 / ${slides.length}` }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: mobileSelectorTriggerRef,
+                    type: "button",
+                    "aria-label": "Choose slide",
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": mobileSelectorOpen,
+                    "aria-controls": mobileSelectorOpen ? `${domId}-mobile-slides` : void 0,
+                    disabled: slides.length === 0,
+                    "data-og-mobile-slide-selector": true,
+                    onClick: toggleMobileSlideSelector,
+                    className: "inline-flex min-h-11 min-w-16 shrink-0 items-center justify-center rounded-og-sm px-2 text-og-xs tabular-nums text-og-fg-muted hover:bg-og-surface-3 hover:text-og-fg disabled:opacity-35 sm:hidden",
+                    children: /* @__PURE__ */ jsx("span", { children: slideCountLabel })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "hidden min-w-16 shrink-0 text-center text-og-xs tabular-nums text-og-fg-muted sm:inline", children: slideCountLabel }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -920,7 +1029,7 @@ function PresentationEditorCore({
           }
         ),
         /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: commandFailure?.message ?? (pendingCommands > 0 ? "Saving presentation changes" : "") }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -943,12 +1052,7 @@ function PresentationEditorCore({
                 }));
               },
               onKeyDown: (event) => {
-                if (slides.length === 0) return;
-                let nextIndex = null;
-                if (event.key === "ArrowDown") nextIndex = Math.min(slides.length - 1, activeIndex + 1);
-                else if (event.key === "ArrowUp") nextIndex = Math.max(0, activeIndex - 1);
-                else if (event.key === "Home") nextIndex = 0;
-                else if (event.key === "End") nextIndex = slides.length - 1;
+                const nextIndex = nextSlideIndexFromKey(event.key, activeIndex, slides.length);
                 if (nextIndex === null) return;
                 event.preventDefault();
                 const next = slides[nextIndex];
@@ -1001,6 +1105,96 @@ function PresentationEditorCore({
               }) })
             }
           ),
+          mobileSelectorOpen ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: mobileSelectorPanelRef,
+              className: "absolute left-2 top-2 z-40 max-w-56 overflow-hidden rounded-og-md border border-og-border bg-og-surface-1 shadow-og-md sm:hidden",
+              style: { width: "calc(100% - 1rem)" },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: mobileRailRef,
+                  id: `${domId}-mobile-slides`,
+                  role: "listbox",
+                  tabIndex: 0,
+                  "aria-label": "Slides",
+                  "aria-orientation": "vertical",
+                  "aria-activedescendant": activeSlide && activeIndex >= mobileRailStart && activeIndex < mobileRailEnd ? `${domId}-mobile-slide-${safeDomId(activeSlide.id)}` : void 0,
+                  className: "max-h-72 overflow-y-auto outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent",
+                  "data-og-mobile-slide-list": true,
+                  "data-og-window-start": mobileRailStart,
+                  "data-og-window-end": mobileRailEnd,
+                  onScroll: (event) => {
+                    const scrollTop = event.currentTarget.scrollTop;
+                    const height = event.currentTarget.clientHeight;
+                    setMobileRail((current) => ({
+                      scrollTop,
+                      height: height || current.height
+                    }));
+                  },
+                  onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                      event.preventDefault();
+                      setMobileSelectorOpen(false);
+                      mobileSelectorTriggerRef.current?.focus();
+                      return;
+                    }
+                    const nextIndex = nextSlideIndexFromKey(event.key, activeIndex, slides.length);
+                    if (nextIndex === null) return;
+                    event.preventDefault();
+                    const next = slides[nextIndex];
+                    if (!next) return;
+                    if (next !== activeSlide) selectSlide(next, nextIndex);
+                    const list = event.currentTarget;
+                    const top = nextIndex * MOBILE_RAIL_ITEM_HEIGHT;
+                    const bottom = top + MOBILE_RAIL_ITEM_HEIGHT;
+                    if (top < list.scrollTop) list.scrollTop = top;
+                    else if (bottom > list.scrollTop + list.clientHeight) {
+                      list.scrollTop = bottom - list.clientHeight;
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "relative w-full",
+                      style: { height: slides.length * MOBILE_RAIL_ITEM_HEIGHT },
+                      children: slides.slice(mobileRailStart, mobileRailEnd).map((slide, offset) => {
+                        const index = mobileRailStart + offset;
+                        const active = slide === activeSlide;
+                        return /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            id: `${domId}-mobile-slide-${safeDomId(slide.id)}`,
+                            type: "button",
+                            role: "option",
+                            tabIndex: -1,
+                            "aria-selected": active,
+                            "aria-label": `Slide ${index + 1}${slide.title ? `: ${slide.title}` : ""}`,
+                            onClick: () => chooseMobileSlide(slide, index),
+                            className: cn(
+                              "absolute left-0 flex min-h-11 w-full items-center gap-2 px-2 text-left",
+                              active ? "bg-og-surface-3 text-og-fg" : "text-og-fg-muted hover:bg-og-surface-3/70"
+                            ),
+                            style: {
+                              top: index * MOBILE_RAIL_ITEM_HEIGHT,
+                              height: MOBILE_RAIL_ITEM_HEIGHT
+                            },
+                            "data-og-mobile-slide-index": index,
+                            children: [
+                              /* @__PURE__ */ jsx("span", { className: "w-7 shrink-0 text-right text-og-xs tabular-nums text-og-fg-subtle", children: index + 1 }),
+                              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-og-sm", children: slide.title || `Slide ${index + 1}` })
+                            ]
+                          },
+                          slide.id
+                        );
+                      })
+                    }
+                  )
+                }
+              )
+            }
+          ) : null,
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -3231,4 +3425,4 @@ export {
   PresentationProjectionArtifactSurface,
   EditablePresentationArtifactSurface
 };
-//# sourceMappingURL=chunk-PEI6RANI.js.map
+//# sourceMappingURL=chunk-VR4Z73EU.js.map