@wix/editor-react-components 1.2658.0 → 1.2659.0

package/dist/site/components/Slideshow/PauseButton.d.ts

@@ -1,3 +1,4 @@
+import { Direction } from '@wix/editor-react-types';
 import { FC, RefObject } from 'react';
 type PauseButtonProps = {
     testId?: string;
@@ -6,6 +7,7 @@ type PauseButtonProps = {
     pauseAriaLabel?: string;
     resumeAriaLabel?: string;
     ariaControls?: string;
+    direction?: Direction;
     onPause?: () => void;
     onResume?: () => void;
     buttonRef?: RefObject<HTMLButtonElement>;

package/dist/site/components/Slideshow/Slideshow.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { Direction, A11y } from '@wix/editor-react-types';
-import { IndicatorMode } from './types';
+import { IndicatorMode, PauseButtonVisibility } from './types';
 import { ButtonProps } from '../Button/Button';
 import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps } from '../../../utils/functions/sdkFunctionCallbackProps';
 export type SlideIndicatorsElementProps = {
@@ -27,7 +27,9 @@ type SlideshowDataProps = SdkFunctionClickableProps & SdkFunctionMouseHoverProps
     activeSlide?: number;
     direction?: Direction;
     elementProps?: SlideshowElementProps;
+    /** @deprecated use pauseButtonVisibility instead */
     showPauseButton?: boolean;
+    pauseButtonVisibility?: PauseButtonVisibility;
     a11y?: A11y;
     onChange?: (event?: React.SyntheticEvent) => void;
     onPlay?: () => void;

package/dist/site/components/Slideshow/component.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { M as MOVEMENT_DIRECTION, A as AUTOPLAY_STATE, s as slideshowDataDefaults, a as semanticClassNames, b as ARIA_LABEL_NAMESPACE, S as SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT, D as DefaultTranslations, T as TranslationKeys } from "../chunks/Slideshow.semanticClassNames.js";
+import { M as MOVEMENT_DIRECTION, A as AUTOPLAY_STATE, P as PAUSE_BUTTON_VISIBILITY, s as slideshowDataDefaults, a as semanticClassNames, b as ARIA_LABEL_NAMESPACE, S as SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT, D as DefaultTranslations, T as TranslationKeys } from "../chunks/Slideshow.semanticClassNames.js";
 import { u as useHasDisplayedElement } from "../chunks/useHasDisplayedElement.js";
 import { B as Button } from "../chunks/Button.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
@@ -121,7 +121,21 @@ const useVisibilityProps = (props) => {
     return {};
   }, [props.isHidden, props.hidden]);
 };
+const getEffectivePauseButtonVisibility = ({
+  pauseButtonVisibility,
+  showPauseButton
+}) => {
+  if (pauseButtonVisibility) {
+    return pauseButtonVisibility;
+  }
+  if (showPauseButton !== void 0) {
+    return showPauseButton ? PAUSE_BUTTON_VISIBILITY.ALWAYS : PAUSE_BUTTON_VISIBILITY.NEVER;
+  }
+  return slideshowDataDefaults.pauseButtonVisibility;
+};
 const slideshowContainer = "slideshowContainer__HjS5a";
+const pauseButtonOnHover = "pauseButtonOnHover__pNnSH";
+const pauseButton = "pauseButton__Z1YBT";
 const slideshowWrapper = "slideshowWrapper__d5icE";
 const slide = "slide__r2Vp3";
 const active = "active__a4phe";
@@ -161,11 +175,12 @@ const modeMax5 = "modeMax5__lcwad";
 const distance1 = "distance1__dz5-d";
 const distance2 = "distance2__1bx8G";
 const indicatorButton = "indicatorButton__cC3tw";
-const pauseButton = "pauseButton__Z1YBT";
 const controlsWrapper = "controlsWrapper__Hm0pN";
 const controlsWrapperContent = "controlsWrapperContent__4zh-j";
 const styles = {
   slideshowContainer,
+  pauseButtonOnHover,
+  pauseButton,
   slideshowWrapper,
   slide,
   active,
@@ -212,7 +227,6 @@ const styles = {
   distance1,
   distance2,
   indicatorButton,
-  pauseButton,
   controlsWrapper,
   controlsWrapperContent
 };
@@ -502,6 +516,7 @@ const PauseButton = ({
   pauseAriaLabel,
   resumeAriaLabel,
   ariaControls,
+  direction,
   onPause = () => {
   },
   onResume = () => {
@@ -521,6 +536,7 @@ const PauseButton = ({
       type: "button",
       "aria-label": isPaused ? resumeAriaLabel : pauseAriaLabel,
       "aria-controls": ariaControls,
+      ...direction && { dir: direction },
       onClick: handleStateChange,
       children: isPaused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {})
     }
@@ -549,7 +565,8 @@ const Slideshow = (props) => {
     isHidden,
     hidden,
     direction,
-    showPauseButton = slideshowDataDefaults.showPauseButton,
+    showPauseButton,
+    pauseButtonVisibility,
     rawAutoplay = true,
     a11y,
     nextButtonLabel,
@@ -589,7 +606,11 @@ const Slideshow = (props) => {
   useEffect(() => {
     setIsPaused(reducedMotion);
   }, [reducedMotion]);
-  const shouldShowPauseButton = rawAutoplay && (showPauseButton || autoplay && forcePauseButton);
+  const effectivePauseButtonVisibility = getEffectivePauseButtonVisibility({
+    pauseButtonVisibility,
+    showPauseButton
+  });
+  const shouldShowPauseButton = rawAutoplay && (effectivePauseButtonVisibility !== PAUSE_BUTTON_VISIBILITY.NEVER || autoplay && forcePauseButton);
   const {
     activeSlideIndex,
     lastActiveSlideIndex,
@@ -692,7 +713,8 @@ const Slideshow = (props) => {
             className,
             styles.slideshowContainer,
             semanticClassNames.root,
-            directionStyles.fallbackDirection
+            directionStyles.fallbackDirection,
+            effectivePauseButtonVisibility === PAUSE_BUTTON_VISIBILITY.ON_HOVER && !forcePauseButton && styles.pauseButtonOnHover
           ),
           onFocus: pauseOnHover && autoplay ? handleFocusEnter : void 0,
           onBlur: pauseOnHover && autoplay ? handleFocusLeave : void 0,
@@ -788,7 +810,8 @@ const Slideshow = (props) => {
                 pauseAriaLabel: t("pauseButton"),
                 resumeAriaLabel: t("playButton"),
                 className: semanticClassNames.pauseButton,
-                ariaControls: id
+                ariaControls: id,
+                direction
               }
             )
           ]

package/dist/site/components/Slideshow/constants.d.ts

@@ -1,3 +1,8 @@
+export declare const PAUSE_BUTTON_VISIBILITY: {
+    readonly ALWAYS: "always";
+    readonly ON_HOVER: "onHover";
+    readonly NEVER: "never";
+};
 export declare const DisplayNames: {
     readonly root: {
         readonly elementDisplayName: "Slideshow";
@@ -19,6 +24,7 @@ export declare const DisplayNames: {
             readonly slides: "Slide";
             readonly activeSlide: "Active slide";
             readonly showPauseButton: "Show pause & play button";
+            readonly pauseButtonVisibility: "Show pause & play button";
             readonly nextButtonLabel: "Next navigation button text";
             readonly prevButtonLabel: "Previous navigation button text";
         };
@@ -35,6 +41,7 @@ export declare const DisplayNames: {
             readonly 'navigation-buttons-alignment': "Navigation button alignment";
             readonly 'slide-indicators-position': "Slide indicator position";
             readonly 'controls-padding': "Padding";
+            readonly 'pause-button-position': "Pause & play button position";
         };
     };
     readonly transitionType: {
@@ -109,6 +116,21 @@ export declare const DisplayNames: {
             readonly all: "All";
         };
     };
+    readonly pauseButtonVisibility: {
+        readonly options: {
+            readonly always: "Always";
+            readonly onHover: "On hover";
+            readonly never: "Never";
+        };
+    };
+    readonly pauseButtonPosition: {
+        readonly options: {
+            readonly topStart: "Top start";
+            readonly topEnd: "Top end";
+            readonly bottomStart: "Bottom start";
+            readonly bottomEnd: "Bottom end";
+        };
+    };
 };
 export declare const slideshowDataDefaults: {
     readonly autoplay: true;
@@ -120,6 +142,7 @@ export declare const slideshowDataDefaults: {
     readonly activeSlide: 0;
     readonly transitionDuration: 0;
     readonly showPauseButton: true;
+    readonly pauseButtonVisibility: "always";
     readonly nextButtonLabel: "Next";
     readonly prevButtonLabel: "Previous";
 };
@@ -148,6 +171,7 @@ export declare const slideshowCssCustomPropertiesDefaults: {
     readonly 'navigation-buttons-alignment': "center";
     readonly 'slide-indicators-position': "end";
     readonly 'controls-padding': "0px";
+    readonly 'pause-button-position': "bottom-end";
 };
 export declare const orientationFields: readonly ["orientation"];
 export declare const navigationButtonsPositionFields: readonly ["navigation-buttons-position-together-horizontal", "navigation-buttons-position-together-vertical", "navigation-buttons-position-separated-horizontal", "navigation-buttons-position-separated-vertical"];

package/dist/site/components/Slideshow/css.css

@@ -1,5 +1,10 @@
-@charset "UTF-8";.slideshowContainer__HjS5a {
+@charset "UTF-8";@property --pause-button-position {
+  syntax: "*";
+  inherits: false;
+}
+.slideshowContainer__HjS5a {
   --display: grid;
+  container-name: slideshow;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   overflow: hidden;
@@ -9,6 +14,15 @@
   opacity: 1;
 }
 
+.pauseButtonOnHover__pNnSH .pauseButton__Z1YBT {
+  opacity: 0;
+  pointer-events: none;
+}
+.pauseButtonOnHover__pNnSH:hover .pauseButton__Z1YBT, .pauseButtonOnHover__pNnSH:has(:focus-visible) .pauseButton__Z1YBT {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .slideshowWrapper__d5icE {
   grid-area: 1/1;
   position: relative;
@@ -436,6 +450,38 @@
   outline-offset: 1px;
 }
 
+@container slideshow style(--pause-button-position: top-start) {
+  .pauseButton__Z1YBT {
+    inset-block-start: 0;
+    inset-block-end: auto;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+  }
+}
+@container slideshow style(--pause-button-position: top-end) {
+  .pauseButton__Z1YBT {
+    inset-block-start: 0;
+    inset-block-end: auto;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+}
+@container slideshow style(--pause-button-position: bottom-start) {
+  .pauseButton__Z1YBT {
+    inset-block-start: auto;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+  }
+}
+@container slideshow style(--pause-button-position: bottom-end) {
+  .pauseButton__Z1YBT {
+    inset-block-start: auto;
+    inset-block-end: 0;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+}
 .controlsWrapper__Hm0pN {
   height: 100%;
   width: 100%;

package/dist/site/components/Slideshow/manifest.js

@@ -305,7 +305,28 @@ const manifest = {
       showPauseButton: {
         dataType: DATA.DATA_TYPE.booleanValue,
         displayName: DisplayNames.root.data.showPauseButton,
-        defaultValue: slideshowDataDefaults.showPauseButton
+        defaultValue: slideshowDataDefaults.showPauseButton,
+        deprecated: true
+      },
+      pauseButtonVisibility: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: DisplayNames.root.data.pauseButtonVisibility,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            {
+              value: "always",
+              displayName: DisplayNames.pauseButtonVisibility.options.always
+            },
+            {
+              value: "onHover",
+              displayName: DisplayNames.pauseButtonVisibility.options.onHover
+            },
+            {
+              value: "never",
+              displayName: DisplayNames.pauseButtonVisibility.options.never
+            }
+          ]
+        }
       },
       nextButtonLabel: {
         dataType: DATA.DATA_TYPE.text,
@@ -331,7 +352,7 @@ const manifest = {
             "loop",
             "autoplayDelay",
             "pauseOnHover",
-            "showPauseButton",
+            "pauseButtonVisibility",
             "transitionType",
             "transitionDirection",
             "slides",
@@ -982,6 +1003,32 @@ const manifest = {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.padding,
         displayName: DisplayNames.root.cssCustomProperties["controls-padding"],
         defaultValue: slideshowCssCustomPropertiesDefaults["controls-padding"]
+      },
+      "pause-button-position": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
+        displayName: DisplayNames.root.cssCustomProperties["pause-button-position"],
+        defaultValue: slideshowCssCustomPropertiesDefaults["pause-button-position"],
+        customEnum: {
+          cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
+          options: [
+            {
+              value: "top-start",
+              displayName: DisplayNames.pauseButtonPosition.options.topStart
+            },
+            {
+              value: "top-end",
+              displayName: DisplayNames.pauseButtonPosition.options.topEnd
+            },
+            {
+              value: "bottom-start",
+              displayName: DisplayNames.pauseButtonPosition.options.bottomStart
+            },
+            {
+              value: "bottom-end",
+              displayName: DisplayNames.pauseButtonPosition.options.bottomEnd
+            }
+          ]
+        }
       }
     },
     interactions: {

package/dist/site/components/Slideshow/types.d.ts

@@ -1,4 +1,5 @@
-import { AUTOPLAY_STATE, MOVEMENT_DIRECTION } from './constants';
+import { AUTOPLAY_STATE, MOVEMENT_DIRECTION, PAUSE_BUTTON_VISIBILITY } from './constants';
 export type AutoplayState = (typeof AUTOPLAY_STATE)[keyof typeof AUTOPLAY_STATE];
 export type MovementDirection = (typeof MOVEMENT_DIRECTION)[keyof typeof MOVEMENT_DIRECTION];
+export type PauseButtonVisibility = (typeof PAUSE_BUTTON_VISIBILITY)[keyof typeof PAUSE_BUTTON_VISIBILITY];
 export type IndicatorMode = 'max-5' | 'all';

package/dist/site/components/Slideshow/utils.d.ts

@@ -0,0 +1,5 @@
+import { PauseButtonVisibility } from './types';
+export declare const getEffectivePauseButtonVisibility: ({ pauseButtonVisibility, showPauseButton, }: {
+    pauseButtonVisibility?: PauseButtonVisibility;
+    showPauseButton?: boolean;
+}) => PauseButtonVisibility;

package/dist/site/components/chunks/Slideshow.semanticClassNames.js

@@ -1,3 +1,8 @@
+const PAUSE_BUTTON_VISIBILITY = {
+  ALWAYS: "always",
+  ON_HOVER: "onHover",
+  NEVER: "never"
+};
 const DisplayNames = {
   root: {
     elementDisplayName: "Slideshow",
@@ -19,6 +24,7 @@ const DisplayNames = {
       slides: "Slide",
       activeSlide: "Active slide",
       showPauseButton: "Show pause & play button",
+      pauseButtonVisibility: "Show pause & play button",
       nextButtonLabel: "Next navigation button text",
       prevButtonLabel: "Previous navigation button text"
     },
@@ -33,7 +39,8 @@ const DisplayNames = {
       "navigation-buttons-arrangement": "Navigation button arrangement",
       "navigation-buttons-alignment": "Navigation button alignment",
       "slide-indicators-position": "Slide indicator position",
-      "controls-padding": "Padding"
+      "controls-padding": "Padding",
+      "pause-button-position": "Pause & play button position"
     }
   },
   transitionType: {
@@ -104,6 +111,21 @@ const DisplayNames = {
       max5: "Max 5",
       all: "All"
     }
+  },
+  pauseButtonVisibility: {
+    options: {
+      always: "Always",
+      onHover: "On hover",
+      never: "Never"
+    }
+  },
+  pauseButtonPosition: {
+    options: {
+      topStart: "Top start",
+      topEnd: "Top end",
+      bottomStart: "Bottom start",
+      bottomEnd: "Bottom end"
+    }
   }
 };
 const slideshowDataDefaults = {
@@ -116,6 +138,7 @@ const slideshowDataDefaults = {
   activeSlide: 0,
   transitionDuration: 0,
   showPauseButton: true,
+  pauseButtonVisibility: PAUSE_BUTTON_VISIBILITY.ALWAYS,
   nextButtonLabel: "Next",
   prevButtonLabel: "Previous"
 };
@@ -131,7 +154,8 @@ const slideshowCssCustomPropertiesDefaults = {
   "icon-placement-vertical": "vertically-stacked",
   "navigation-buttons-arrangement": "separated",
   "navigation-buttons-alignment": "center",
-  "controls-padding": "0px"
+  "controls-padding": "0px",
+  "pause-button-position": "bottom-end"
 };
 const ARIA_LABEL_NAMESPACE = "slideshow";
 const TranslationKeys = {
@@ -164,6 +188,7 @@ export {
   AUTOPLAY_STATE as A,
   DefaultTranslations as D,
   MOVEMENT_DIRECTION as M,
+  PAUSE_BUTTON_VISIBILITY as P,
   SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT as S,
   TranslationKeys as T,
   semanticClassNames as a,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2658.0",
+  "version": "1.2659.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -199,5 +199,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "fb02b2c92875285518068d32b57be3735d55d0b85eeb224debe146ae"
+  "falconPackageHash": "964231dc10030a3fc76168e59d496d03e79fe1c2659f0d491ee25860"
 }