@wix/editor-react-components 1.2452.0 → 1.2453.0

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

@@ -40,7 +40,7 @@ const styles = {
 const noop = () => {
 };
 function RadioButtonsComponent(props) {
-  var _a;
+  var _a, _b;
   const environmentService = useService(EnvironmentDefinition);
   const {
     id,
@@ -56,7 +56,8 @@ function RadioButtonsComponent(props) {
     showValidityIndication,
     onValidate,
     onValidityChange,
-    wix
+    wix,
+    elementProps
   } = props;
   const sourceOptions = Array.isArray(props.options) && props.options.length ? props.options : defaultOptions;
   const options = sourceOptions.filter((option2) => !!option2).map((option2) => ({
@@ -127,7 +128,8 @@ function RadioButtonsComponent(props) {
               className: clsx(
                 styles.groupLabel,
                 selectors.groupLabel,
-                formatClassNames(semanticClassNames.groupLabel)
+                formatClassNames(semanticClassNames.groupLabel),
+                (_b = elementProps == null ? void 0 : elementProps.groupLabel) == null ? void 0 : _b.className
               ),
               "data-testid": TestIds.legend,
               children: [
@@ -173,58 +175,63 @@ function RadioButtonsComponent(props) {
             "data-testid": TestIds.group,
             onFocus,
             onBlur: handleBlur,
-            children: options.map((option2, index) => /* @__PURE__ */ jsxs(
-              "label",
-              {
-                className: clsx(
-                  styles.option,
-                  formatClassNames(semanticClassNames.option)
-                ),
-                "data-testid": TestIds.option,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Radio.Root,
-                    {
-                      value: option2.value,
-                      readOnly,
-                      disabled: disabled || !!option2.disabled,
-                      "data-invalid": isInvalid || void 0,
-                      className: clsx(
-                        styles.control,
-                        selectors.radio,
-                        formatClassNames(semanticClassNames.radio)
-                      ),
-                      "data-testid": TestIds.control,
-                      children: /* @__PURE__ */ jsx(
-                        Radio.Indicator,
-                        {
-                          keepMounted: true,
-                          className: clsx(
-                            styles.indicator,
-                            selectors.indicator,
-                            formatClassNames(semanticClassNames.indicator)
-                          ),
-                          "data-testid": TestIds.indicator
-                        }
-                      )
-                    }
+            children: options.map((option2, index) => {
+              var _a2, _b2;
+              return /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: clsx(
+                    styles.option,
+                    formatClassNames(semanticClassNames.option)
                   ),
-                  option2.label && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: clsx(
-                        styles.label,
-                        selectors.label,
-                        formatClassNames(semanticClassNames.label)
-                      ),
-                      "data-testid": TestIds.optionLabel,
-                      children: option2.label
-                    }
-                  )
-                ]
-              },
-              option2.value || index
-            ))
+                  "data-testid": TestIds.option,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Radio.Root,
+                      {
+                        value: option2.value,
+                        readOnly,
+                        disabled: disabled || !!option2.disabled,
+                        "data-invalid": isInvalid || void 0,
+                        className: clsx(
+                          styles.control,
+                          selectors.radio,
+                          formatClassNames(semanticClassNames.radio),
+                          (_a2 = elementProps == null ? void 0 : elementProps.radio) == null ? void 0 : _a2.className
+                        ),
+                        "data-testid": TestIds.control,
+                        children: /* @__PURE__ */ jsx(
+                          Radio.Indicator,
+                          {
+                            keepMounted: true,
+                            className: clsx(
+                              styles.indicator,
+                              selectors.indicator,
+                              formatClassNames(semanticClassNames.indicator)
+                            ),
+                            "data-testid": TestIds.indicator
+                          }
+                        )
+                      }
+                    ),
+                    option2.label && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: clsx(
+                          styles.label,
+                          selectors.label,
+                          formatClassNames(semanticClassNames.label),
+                          (_b2 = elementProps == null ? void 0 : elementProps.optionLabel) == null ? void 0 : _b2.className
+                        ),
+                        "data-testid": TestIds.optionLabel,
+                        children: option2.label
+                      }
+                    )
+                  ]
+                },
+                option2.value || index
+              );
+            })
           }
         ),
         isInvalid && validity.validationMessage && /* @__PURE__ */ jsxs(

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

@@ -2,6 +2,17 @@ import { VectorArt, A11y, Direction } from '@wix/editor-react-types';
 import { ReactNode } from 'react';
 import { PagesToShare } from './constants';
 import { SdkFunctionMouseHoverProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+export type ShareButtonElementProps = {
+    button?: {
+        className?: string;
+    };
+    label?: {
+        className?: string;
+    };
+    icon?: {
+        className?: string;
+    };
+};
 export type ShareButtonsProps = Partial<any> & SdkFunctionMouseHoverProps & {
     onClick?: () => void;
     icon?: VectorArt;
@@ -10,6 +21,7 @@ export type ShareButtonsProps = Partial<any> & SdkFunctionMouseHoverProps & {
     direction?: Direction;
     a11y?: A11y;
     pageToShare?: PagesToShare;
+    elementProps?: ShareButtonElementProps;
 };
 export type IShareButtonProps = {
     id: string;
@@ -24,6 +36,7 @@ export type IShareButtonProps = {
     displayIcon?: boolean;
     isHidden?: boolean;
     translations?: Record<string, string | undefined>;
+    elementProps?: ShareButtonElementProps;
 };
 export type IShareButtonIconProps = {
     svg: string;

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

@@ -297,8 +297,20 @@ const ShareButton = ({
   label: label2,
   illustration,
   url = "",
-  translations
+  translations,
+  elementProps
 }) => {
+  var _a, _b, _c;
+  const iconClassName = clsx(
+    shareButtonStyles.icon,
+    "icon",
+    (_a = elementProps == null ? void 0 : elementProps.icon) == null ? void 0 : _a.className
+  );
+  const labelClassName = clsx(
+    shareButtonStyles.label,
+    "label",
+    (_b = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _b.className
+  );
   const platformIdWithFallback = getPlatformIdWithFallback(platformId, value);
   const translatedCopyLinkLabel = translations == null ? void 0 : translations[label2];
   const buttonLabel = platformIdWithFallback === platformIds.copyButton && translatedCopyLinkLabel ? translatedCopyLinkLabel : label2;
@@ -315,11 +327,11 @@ const ShareButton = ({
       shareButtonIcon: /* @__PURE__ */ jsx(
         ShareButtonIcon,
         {
-          className: clsx(shareButtonStyles.icon, "icon"),
+          className: iconClassName,
           svg: (illustration == null ? void 0 : illustration.svgId) ?? ""
         }
       ),
-      labelNode: /* @__PURE__ */ jsx("span", { className: clsx(shareButtonStyles.label, "label"), children: buttonLabel })
+      labelNode: /* @__PURE__ */ jsx("span", { className: labelClassName, children: buttonLabel })
     }
   ) : /* @__PURE__ */ jsxs(
     "a",
@@ -328,7 +340,8 @@ const ShareButton = ({
       className: clsx(
         shareButtonStyles.root,
         HAS_CUSTOM_FOCUS_CLASSNAME,
-        "button"
+        "button",
+        (_c = elementProps == null ? void 0 : elementProps.button) == null ? void 0 : _c.className
       ),
       target: "popup",
       href: url,
@@ -343,11 +356,11 @@ const ShareButton = ({
         /* @__PURE__ */ jsx(
           ShareButtonIcon,
           {
-            className: clsx(shareButtonStyles.icon, "icon"),
+            className: iconClassName,
             svg: (illustration == null ? void 0 : illustration.svgId) ?? ""
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: clsx(shareButtonStyles.label, "label"), children: buttonLabel })
+        /* @__PURE__ */ jsx("span", { className: labelClassName, children: buttonLabel })
       ]
     }
   ) });
@@ -442,7 +455,8 @@ const ShareButtons = (props) => {
                     getShareUrlPrefix(visibleButtons[0]),
                     shareUrl
                   ),
-                  translations: memoizedProps.translations
+                  translations: memoizedProps.translations,
+                  elementProps: props.elementProps
                 }
               ) : (
                 // eslint-disable-next-line jsx-a11y/no-redundant-roles
@@ -464,7 +478,8 @@ const ShareButtons = (props) => {
                           {
                             ...button,
                             url: getFullShareUrl(getShareUrlPrefix(button), shareUrl),
-                            translations: memoizedProps.translations
+                            translations: memoizedProps.translations,
+                            elementProps: props.elementProps
                           }
                         )
                       },

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

@@ -152,5 +152,5 @@ export declare const DefaultButtons: {
     isDefault: boolean;
 }[];
 export declare const DisplayConfig: {
-    displayValues: import('@wix/ambassador-devcenter-v1-component-type-data/types').DisplayValueEnumDisplayValue[];
+    displayValues: import('@wix/component-protocol/schema').DisplayValueEnumDisplayValue[];
 };

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

@@ -1,14 +1,11 @@
 import { default as React } from 'react';
 import { Direction } from '@wix/editor-react-types';
-import { IndicatorMode } from './types';
+import { SlideIndicatorsElementProps } from './Slideshow';
 type SlideIndicatorsProps = {
     numberOfSlides: number;
     onSlideClick: (index: number, skipTransition?: boolean) => void;
     activeSlideIndex: number;
-    slideIndicatorsProps?: {
-        indicatorMode: IndicatorMode;
-        direction?: Direction;
-    };
+    slideIndicatorsProps?: SlideIndicatorsElementProps;
     parentDirection?: Direction;
     siteDirection?: Direction;
 };

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

@@ -3,6 +3,15 @@ import { Direction, A11y } from '@wix/editor-react-types';
 import { IndicatorMode } from './types';
 import { ButtonProps } from '../Button/Button';
 import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+export type SlideIndicatorsElementProps = {
+    indicatorMode: IndicatorMode;
+    direction?: Direction;
+    className?: string;
+};
+export type SlideshowElementProps = {
+    slideIndicators?: SlideIndicatorsElementProps;
+    navigationButtons?: Partial<ButtonProps>;
+};
 type SlideshowDataProps = SdkFunctionClickableProps & SdkFunctionMouseHoverProps & {
     autoplay?: boolean;
     autoplayDelay?: number;
@@ -17,13 +26,7 @@ type SlideshowDataProps = SdkFunctionClickableProps & SdkFunctionMouseHoverProps
     }>;
     activeSlide?: number;
     direction?: Direction;
-    elementProps?: {
-        slideIndicators?: {
-            indicatorMode: IndicatorMode;
-            direction?: Direction;
-        };
-        navigationButtons?: Partial<ButtonProps>;
-    };
+    elementProps?: SlideshowElementProps;
     showPauseButton?: boolean;
     a11y?: A11y;
     onChange?: (event?: React.SyntheticEvent) => void;

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

@@ -231,11 +231,15 @@ const NavigationButtons = ({
   nextButtonLabel = slideshowDataDefaults.nextButtonLabel,
   prevButtonLabel = slideshowDataDefaults.prevButtonLabel
 }) => {
-  var _a;
-  const direction = navigationButtonsProps == null ? void 0 : navigationButtonsProps.direction;
+  var _a, _b;
+  const {
+    className: navButtonsClassName,
+    direction,
+    a11y,
+    ...restNavButtonsProps
+  } = navigationButtonsProps || {};
   const isRTL = (direction || parentDirection || siteDirection) === "rtl";
-  const animatedIcon = (_a = navigationButtonsProps == null ? void 0 : navigationButtonsProps.elementProps) == null ? void 0 : _a.animatedIcon;
-  if (!(animatedIcon == null ? void 0 : animatedIcon.svg)) {
+  if (!((_b = (_a = restNavButtonsProps.elementProps) == null ? void 0 : _a.animatedIcon) == null ? void 0 : _b.svg)) {
     return null;
   }
   return /* @__PURE__ */ jsxs(
@@ -255,10 +259,11 @@ const NavigationButtons = ({
             className: clsx(
               styles.button,
               styles.prev,
-              semanticClassNames.navigationButtons
+              semanticClassNames.navigationButtons,
+              navButtonsClassName
             ),
             disabled: prevDisabled,
-            ...navigationButtonsProps,
+            ...restNavButtonsProps,
             label: prevButtonLabel || void 0,
             labelContent: prevButtonLabel ? /* @__PURE__ */ jsx(
               LabelWithSizer,
@@ -268,7 +273,7 @@ const NavigationButtons = ({
               }
             ) : void 0,
             a11y: {
-              ...navigationButtonsProps == null ? void 0 : navigationButtonsProps.a11y,
+              ...a11y,
               ariaLabel: prevButtonLabel || slideshowDataDefaults.prevButtonLabel
             }
           }
@@ -279,10 +284,11 @@ const NavigationButtons = ({
             onClick: onNextClick,
             className: clsx(
               styles.button,
-              semanticClassNames.navigationButtons
+              semanticClassNames.navigationButtons,
+              navButtonsClassName
             ),
             disabled: nextDisabled,
-            ...navigationButtonsProps,
+            ...restNavButtonsProps,
             label: nextButtonLabel || void 0,
             labelContent: nextButtonLabel ? /* @__PURE__ */ jsx(
               LabelWithSizer,
@@ -292,7 +298,7 @@ const NavigationButtons = ({
               }
             ) : void 0,
             a11y: {
-              ...navigationButtonsProps == null ? void 0 : navigationButtonsProps.a11y,
+              ...a11y,
               ariaLabel: nextButtonLabel || slideshowDataDefaults.nextButtonLabel
             }
           }
@@ -395,7 +401,11 @@ const SlideIndicators = ({
   parentDirection,
   siteDirection
 }) => {
-  const { indicatorMode = "max-5", direction } = slideIndicatorsProps || {};
+  const {
+    indicatorMode = "max-5",
+    direction,
+    className
+  } = slideIndicatorsProps || {};
   const isRTL = (direction || parentDirection || siteDirection) === "rtl";
   const { indicators, handleArrowNavigation, registerButtonRef } = useSlideIndicators({
     numberOfSlides,
@@ -416,7 +426,8 @@ const SlideIndicators = ({
           [styles.modeAll]: indicatorMode === "all",
           [styles.modeMax5]: indicatorMode === "max-5"
         },
-        semanticClassNames.pagination
+        semanticClassNames.pagination,
+        className
       ),
       ...direction && { dir: direction },
       children: indicators.map(({ slideIndex, distanceFromActiveSlide }) => {

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

@@ -2,11 +2,20 @@ import { default as React } from 'react';
 import { Direction } from '@wix/editor-react-types';
 import { TransitionType, TransitionDirection } from './constants';
 import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+export type TabsElementProps = {
+    tabContent?: {
+        className?: string;
+    };
+    scrollButton?: {
+        className?: string;
+    };
+};
 type TabsViewerProps = {
     /** DOM `id` on the root `<div>`. */
     id: string;
     /** Appended to the root. Use this for CSS-variable and per-element overrides. */
     className?: string;
+    elementProps?: TabsElementProps;
 };
 type TabsDataProps = SdkFunctionClickableProps & SdkFunctionMouseHoverProps & SdkFunctionFocusableProps & {
     /** Animation applied when switching tabs. Default `'none'`. */

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

@@ -297,7 +297,8 @@ const ScrollButton = ({
   direction,
   onClick,
   isVisible,
-  isRTL
+  isRTL,
+  className
 }) => /* @__PURE__ */ jsx(
   "button",
   {
@@ -306,10 +307,15 @@ const ScrollButton = ({
     onClick,
     "aria-hidden": !isVisible,
     "aria-label": direction === "forward" ? "Scroll forward" : "Scroll backward",
-    className: clsx(styles.button, classes.scrollButton, {
-      [styles.visible]: isVisible,
-      HAS_CUSTOM_FOCUS_CLASSNAME
-    }),
+    className: clsx(
+      styles.button,
+      classes.scrollButton,
+      {
+        [styles.visible]: isVisible,
+        HAS_CUSTOM_FOCUS_CLASSNAME
+      },
+      className
+    ),
     "data-direction": direction,
     tabIndex: isVisible ? 0 : -1,
     children: /* @__PURE__ */ jsx("span", { className: clsx(styles.icon, { [styles.rtl]: isRTL }), children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 12", children: /* @__PURE__ */ jsx("path", { d: ARROW_PATHS[direction] }) }) })
@@ -320,7 +326,8 @@ const ScrollControls = ({
   isScrollForwardButtonVisible,
   onScrollBackward,
   onScrollForward,
-  direction
+  direction,
+  scrollButtonProps
 }) => {
   const isRTL = direction === "rtl";
   return /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
@@ -330,7 +337,8 @@ const ScrollControls = ({
         direction: "backward",
         onClick: onScrollBackward,
         isVisible: isScrollBackwardButtonVisible,
-        isRTL
+        isRTL,
+        className: scrollButtonProps == null ? void 0 : scrollButtonProps.className
       }
     ),
     /* @__PURE__ */ jsx(
@@ -339,15 +347,18 @@ const ScrollControls = ({
         direction: "forward",
         onClick: onScrollForward,
         isVisible: isScrollForwardButtonVisible,
-        isRTL
+        isRTL,
+        className: scrollButtonProps == null ? void 0 : scrollButtonProps.className
       }
     )
   ] });
 };
 const Tabs = (props) => {
+  var _a;
   const {
     id,
     className,
+    elementProps,
     tabs: tabs2,
     activeTab = 0,
     transitionType = "none",
@@ -478,7 +489,8 @@ const Tabs = (props) => {
                       onScrollForward: handleScrollForward,
                       isScrollBackwardButtonVisible,
                       isScrollForwardButtonVisible,
-                      direction
+                      direction,
+                      scrollButtonProps: elementProps == null ? void 0 : elementProps.scrollButton
                     }
                   )
                 ]
@@ -491,7 +503,8 @@ const Tabs = (props) => {
           {
             className: clsx(
               styles$1["tab-content"],
-              classes.tabContentContainer
+              classes.tabContentContainer,
+              (_a = elementProps == null ? void 0 : elementProps.tabContent) == null ? void 0 : _a.className
             ),
             children: tabs2 == null ? void 0 : tabs2.map((tab, index) => {
               const { tabId, panelId } = a11yIds[index];

package/dist/site/components/Tabs/components/ScrollControls/ScrollControls.d.ts

@@ -6,6 +6,9 @@ type ScrollControlsProps = {
     onScrollBackward: () => void;
     onScrollForward: () => void;
     direction?: Direction;
+    scrollButtonProps?: {
+        className?: string;
+    };
 };
 export declare const ScrollControls: React.FC<ScrollControlsProps>;
 export {};

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

@@ -12,13 +12,16 @@ type TestCompProps = {
     elementProps?: {
         title?: {
             text?: string;
+            className?: string;
         };
         description?: {
             text?: string;
+            className?: string;
         };
         image?: {
             src?: string;
             alt?: string;
+            className?: string;
         };
     };
     a11y?: A11y;

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

@@ -38,7 +38,7 @@ const styles = {
   functionBtn
 };
 const TestComp = (props) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f;
   const {
     id,
     className,
@@ -118,16 +118,46 @@ const TestComp = (props) => {
       onFocus,
       onBlur,
       children: [
-        /* @__PURE__ */ jsx("h3", { className: clsx(styles.title, "card-title"), children: ((_a = elementProps.title) == null ? void 0 : _a.text) || "Test Component" }),
-        /* @__PURE__ */ jsx("p", { className: clsx(styles.description, "card-description"), children: ((_b = elementProps.description) == null ? void 0 : _b.text) || "Edit the settings to see values change" }),
-        ((_c = elementProps.image) == null ? void 0 : _c.src) && /* @__PURE__ */ jsx("div", { className: clsx(styles.imageWrapper, "card-image"), children: /* @__PURE__ */ jsx(
-          "img",
+        /* @__PURE__ */ jsx(
+          "h3",
           {
-            className: styles.image,
-            src: elementProps.image.src,
-            alt: elementProps.image.alt ?? "Card Image"
+            className: clsx(
+              styles.title,
+              "card-title",
+              (_a = elementProps.title) == null ? void 0 : _a.className
+            ),
+            children: ((_b = elementProps.title) == null ? void 0 : _b.text) || "Test Component"
           }
-        ) }),
+        ),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: clsx(
+              styles.description,
+              "card-description",
+              (_c = elementProps.description) == null ? void 0 : _c.className
+            ),
+            children: ((_d = elementProps.description) == null ? void 0 : _d.text) || "Edit the settings to see values change"
+          }
+        ),
+        ((_e = elementProps.image) == null ? void 0 : _e.src) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              styles.imageWrapper,
+              "card-image",
+              (_f = elementProps.image) == null ? void 0 : _f.className
+            ),
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                className: styles.image,
+                src: elementProps.image.src,
+                alt: elementProps.image.alt ?? "Card Image"
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: styles.settingsSection, children: [
           /* @__PURE__ */ jsx("h4", { className: styles.sectionTitle, children: "Settings Panel Values" }),
           /* @__PURE__ */ jsx(ValueRow, { label: "isEnabled (boolean)", value: String(isEnabled) }),

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

@@ -1,6 +1,17 @@
 import { A11y, Direction } from '@wix/editor-react-types';
 import { SdkFunctionChangeableProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
 import { FieldValidationProps } from '../../../utils/validation/types';
+export type TextBoxElementProps = {
+    input?: {
+        className?: string;
+    };
+    label?: {
+        className?: string;
+    };
+    description?: {
+        className?: string;
+    };
+};
 export type TextBoxProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & FieldValidationProps<string> & {
     id: string;
     className: string;
@@ -18,6 +29,7 @@ export type TextBoxProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFun
     maxLength?: number | null;
     direction?: Direction;
     a11y?: A11y;
+    elementProps?: TextBoxElementProps;
     wix?: {
         presetsWrapperProps?: Record<string, unknown>;
     };