@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/cjs/Carousel/index.cjs

@@ -26,20 +26,47 @@ __export(Carousel_exports, {
 });
 module.exports = __toCommonJS(Carousel_exports);
 var import_react = require("react");
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../shared/i18n.cjs");
 var import_react2 = require("@phosphor-icons/react");
 var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_DotIndicator = require("../DotIndicator/index.cjs");
 var import_useDirection = require("../hooks/useDirection.cjs");
+var import_t = require("../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const ARROW_RING_STYLE_ID = "mp-carousel-arrow-ring";
+function ensureCarouselArrowRing() {
+  if (!import_tamagui.isWeb || typeof document === "undefined") return;
+  if (document.getElementById(ARROW_RING_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = ARROW_RING_STYLE_ID;
+  tag.textContent = `.mp-carousel-arrow:focus,
+.mp-carousel-arrow:focus-visible {
+  outline: none !important;
+}
+.mp-carousel-arrow:focus-visible .mp-carousel-arrow-visual {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
+  outline-offset: 2px !important;
+}`;
+  document.head.appendChild(tag);
+}
+function isTypingTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable;
+}
 const CarouselContainer = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "Carousel",
   position: "relative",
   width: "100%",
   overflow: "hidden"
 });
+const CarouselStage = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "CarouselStage",
+  position: "relative",
+  width: "100%"
+});
 const CarouselSlide = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "CarouselSlide",
   flexShrink: 0
@@ -58,6 +85,7 @@ const ArrowButton = (0, import_tamagui.styled)(import_tamagui.View, {
   backgroundColor: "transparent",
   cursor: "pointer",
   opacity: 0.9,
+  outlineWidth: 0,
   hoverStyle: {
     opacity: 1,
     scale: 1.05
@@ -65,10 +93,15 @@ const ArrowButton = (0, import_tamagui.styled)(import_tamagui.View, {
   pressStyle: {
     scale: 0.95
   },
+  focusStyle: {
+    outlineWidth: 0
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0
+  },
   variants: {
     disabled: {
       true: {
-        opacity: 0.3,
         cursor: "not-allowed"
       }
     }
@@ -76,12 +109,8 @@ const ArrowButton = (0, import_tamagui.styled)(import_tamagui.View, {
 });
 const ArrowVisual = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "CarouselArrowVisual",
-  backgroundColor: "$background",
   alignItems: "center",
-  justifyContent: "center",
-  shadowColor: "$shadowColor",
-  shadowRadius: 8,
-  shadowOpacity: 0.15
+  justifyContent: "center"
 });
 const DotsWrapper = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "CarouselDotsWrapper",
@@ -100,32 +129,40 @@ function Carousel({
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const {
     knobProps,
-    control
+    disabledState
   } = (0, import_theme.useResolvedKnobs)();
+  ensureCarouselArrowRing();
   const gap = gapProp ?? knobProps.gap.gap;
   const gapPx = typeof gap === "number" ? gap : (0, import_tamagui.getTokens)().space?.[gap]?.val ?? 0;
-  const arrowSize = (0, import_tamagui.getTokens)().size?.[knobProps.sizeToken]?.val ?? 40;
-  const arrowGlyphSize = Math.round(arrowSize / 2);
+  const arrowRecipe = (0, import_theme.sizeRecipeForToken)(knobProps.sizeToken, {
+    touch: (0, import_theme.isTouchSurface)()
+  });
+  const arrowSize = arrowRecipe.height;
+  const arrowGlyphSize = arrowRecipe.iconSize;
   const arrowRadius = knobProps.pointy ? 0 : 1e3;
   const arrowTargetSize = Math.max(arrowSize, import_theme.MIN_PRESS_TARGET);
   const arrowEdgeInset = Math.max(0, 8 - Math.round((arrowTargetSize - arrowSize) / 2));
+  const arrowHitSlop = (0, import_theme.pressTargetHitSlop)(arrowSize);
   const [activeIndex, setActiveIndex] = (0, import_react.useState)(initialSlide);
   const trackRef = (0, import_react.useRef)(null);
+  const hoverPauseRef = (0, import_react.useRef)(false);
+  const rootRef = (0, import_react.useRef)(null);
   const slideCount = import_react.Children.count(children);
   const [slideWidth, setSlideWidth] = (0, import_react.useState)(0);
   const autoPlayRef = (0, import_react.useRef)(null);
+  const animateSnaps = Boolean(knobProps.transition);
   const scrollToSlide = (0, import_react.useCallback)(index => {
     if (!trackRef.current) return;
     if (index < 0 || index >= slideCount) return;
     const offset = index * (slideWidth + gapPx);
     trackRef.current.scrollTo({
       x: offset,
-      animated: true
+      animated: animateSnaps
     });
-  }, [slideCount, slideWidth, gapPx]);
+  }, [slideCount, slideWidth, gapPx, animateSnaps]);
   const goToSlide = (0, import_react.useCallback)(index => {
     let targetIndex = index;
     if (loop) {
@@ -150,8 +187,14 @@ function Carousel({
     }
   }, [activeIndex, slideCount, onSlideChange, slideWidth, gapPx]);
   (0, import_react.useEffect)(() => {
-    if (autoPlay > 0) {
+    if (autoPlay > 0 && animateSnaps) {
       autoPlayRef.current = setInterval(() => {
+        if (hoverPauseRef.current) return;
+        const root = rootRef.current;
+        if (import_tamagui.isWeb && typeof document !== "undefined" && root) {
+          const active = document.activeElement;
+          if (active && root.contains(active)) return;
+        }
         goNext();
       }, autoPlay);
       return () => {
@@ -160,7 +203,7 @@ function Carousel({
         }
       };
     }
-  }, [autoPlay, goNext]);
+  }, [autoPlay, goNext, animateSnaps]);
   const activeIndexRef = (0, import_react.useRef)(activeIndex);
   activeIndexRef.current = activeIndex;
   (0, import_react.useEffect)(() => {
@@ -178,109 +221,145 @@ function Carousel({
   const nextSide = isRTL ? "left" : "right";
   const PrevGlyph = isRTL ? import_react2.CaretRightIcon : import_react2.CaretLeftIcon;
   const NextGlyph = isRTL ? import_react2.CaretLeftIcon : import_react2.CaretRightIcon;
+  const handleRegionKeyDown = (0, import_react.useCallback)(e => {
+    if (isTypingTarget(e.target)) return;
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      goPrev();
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      goNext();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      goToSlide(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      goToSlide(slideCount - 1);
+    }
+  }, [goPrev, goNext, goToSlide, slideCount]);
+  const renderArrow = (side, physicalSide, enabled, label, Glyph, onPress) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowButton, {
+    ...{
+      [physicalSide]: arrowEdgeInset
+    },
+    className: "mp-carousel-arrow",
+    disabled: !enabled,
+    ...(0, import_theme.pressTargetStyle)(),
+    width: arrowTargetSize,
+    height: arrowTargetSize,
+    hitSlop: arrowHitSlop,
+    ...(knobProps.transition ? {
+      transition: knobProps.transition
+    } : {}),
+    ...(!enabled ? disabledState.chromeKnobProps : void 0),
+    onPress: enabled ? onPress : void 0,
+    role: "button",
+    "aria-label": label,
+    "aria-disabled": !enabled || void 0,
+    tabIndex: enabled ? 0 : -1,
+    onKeyDown: e => {
+      if ((e.key === "Enter" || e.key === " ") && enabled) {
+        e.preventDefault();
+        onPress();
+      }
+    },
+    ...{
+      "data-carousel-arrow": side
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowVisual, {
+      className: "mp-carousel-arrow-visual",
+      width: arrowSize,
+      height: arrowSize,
+      ...knobProps.surface,
+      ...{
+        elevation: knobProps.elevation
+      },
+      borderRadius: arrowRadius,
+      ...(knobProps.transition ? {
+        transition: knobProps.transition
+      } : {}),
+      ...{
+        "data-carousel-arrow-visual": side
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Glyph, {
+        size: arrowGlyphSize
+      })
+    })
+  });
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(CarouselContainer, {
-      ...knobProps.containerRadius,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-        ref: trackRef,
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        style: {
-          scrollSnapType: "x mandatory"
-        },
-        onScroll: handleScroll,
-        scrollEventThrottle: 16,
-        onLayout: e => setSlideWidth(e.nativeEvent.layout.width),
-        ...{
-          dataSet: {
-            carouselTrack: "true"
-          }
-        },
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-          gap,
-          children: import_react.Children.map(children, (child, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(CarouselSlide, {
-            width: slideWidth > 0 ? slideWidth : void 0,
-            style: {
-              scrollSnapAlign: "start"
-            },
-            ...{
-              "data-carousel-slide": index
-            },
-            children: child
-          }, index))
-        })
-      }), showArrows && slideCount > 1 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowButton, {
-          ...{
-            [prevSide]: arrowEdgeInset
-          },
-          disabled: !canGoPrev,
-          width: arrowTargetSize,
-          height: arrowTargetSize,
-          ...(knobProps.transition ? {
-            transition: knobProps.transition
-          } : {}),
-          onPress: canGoPrev ? goPrev : void 0,
-          role: "button",
-          "aria-label": t("Previous slide"),
-          "aria-disabled": !canGoPrev || void 0,
-          tabIndex: canGoPrev ? 0 : -1,
-          focusVisibleStyle: {
-            ...control.focusVisibleKnobProps
-          },
-          onKeyDown: e => {
-            if ((e.key === "Enter" || e.key === " ") && canGoPrev) {
-              e.preventDefault();
-              goPrev();
-            }
+    ref: rootRef,
+    role: "region",
+    "aria-roledescription": "carousel",
+    "aria-label": t("Carousel"),
+    onKeyDown: handleRegionKeyDown,
+    ...{
+      onHoverIn: () => {
+        hoverPauseRef.current = true;
+      },
+      onHoverOut: () => {
+        hoverPauseRef.current = false;
+      }
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(CarouselStage, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(CarouselContainer, {
+        ...knobProps.containerRadius,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+          ref: trackRef,
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          style: {
+            scrollSnapType: "x mandatory",
+            // Defeat inherited `scroll-behavior: smooth` when the knob is off.
+            ...(!animateSnaps ? {
+              scrollBehavior: "auto"
+            } : {})
           },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowVisual, {
-            width: arrowSize,
-            height: arrowSize,
-            borderRadius: arrowRadius,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(PrevGlyph, {
-              size: arrowGlyphSize
-            })
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowButton, {
-          ...{
-            [nextSide]: arrowEdgeInset
+          onScroll: handleScroll,
+          scrollEventThrottle: 16,
+          onLayout: e => setSlideWidth(e.nativeEvent.layout.width),
+          tabIndex: -1,
+          outlineWidth: 0,
+          outlineStyle: "none",
+          focusStyle: {
+            outlineWidth: 0,
+            outlineStyle: "none"
           },
-          disabled: !canGoNext,
-          width: arrowTargetSize,
-          height: arrowTargetSize,
-          ...(knobProps.transition ? {
-            transition: knobProps.transition
-          } : {}),
-          onPress: canGoNext ? goNext : void 0,
-          role: "button",
-          "aria-label": t("Next slide"),
-          "aria-disabled": !canGoNext || void 0,
-          tabIndex: canGoNext ? 0 : -1,
           focusVisibleStyle: {
-            ...control.focusVisibleKnobProps
+            outlineWidth: 0,
+            outlineStyle: "none"
           },
-          onKeyDown: e => {
-            if ((e.key === "Enter" || e.key === " ") && canGoNext) {
-              e.preventDefault();
-              goNext();
+          ...{
+            dataSet: {
+              carouselTrack: "true"
             }
           },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ArrowVisual, {
-            width: arrowSize,
-            height: arrowSize,
-            borderRadius: arrowRadius,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(NextGlyph, {
-              size: arrowGlyphSize
-            })
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            gap,
+            children: import_react.Children.map(children, (child, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(CarouselSlide, {
+              width: slideWidth > 0 ? slideWidth : void 0,
+              style: {
+                scrollSnapAlign: "start"
+              },
+              "aria-roledescription": "slide",
+              "aria-label": (0, import_t.withInterp)(t("Slide {{number}} of {{total}}"), {
+                number: index + 1,
+                total: slideCount
+              }),
+              ...{
+                "data-carousel-slide": index
+              },
+              children: child
+            }, index))
           })
-        })]
+        })
+      }), showArrows && slideCount > 1 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [renderArrow("prev", prevSide, canGoPrev, t("Previous slide"), PrevGlyph, goPrev), renderArrow("next", nextSide, canGoNext, t("Next slide"), NextGlyph, goNext)]
       })]
     }), showDots && slideCount > 1 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(DotsWrapper, {
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DotIndicator.DotIndicator, {
         total: slideCount,
         activeIndex,
-        onChange: goToSlide
+        onChange: goToSlide,
+        transition: knobProps.transition
       })
     })]
   });