@wix/editor-react-components 1.2452.0 → 1.2453.0

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

@@ -395,7 +395,8 @@ const useChipOverflow = (ref, count) => {
 const DropdownChips = ({
   items,
   inputControl,
-  removeItemLabel
+  removeItemLabel,
+  chipClassName
 }) => {
   const chipsRef = useRef(null);
   const visible = useChipOverflow(chipsRef, items.length);
@@ -417,7 +418,8 @@ const DropdownChips = ({
               styles.chip,
               selectors.chip,
               formatClassNames(semanticClassNames.chip),
-              index === visible - 1 && styles.chipShrink
+              index === visible - 1 && styles.chipShrink,
+              chipClassName
             ),
             children: [
               /* @__PURE__ */ jsx("span", { className: styles.chipLabel, children: item.label }),
@@ -456,17 +458,21 @@ const DropdownTrigger = ({
   describedById,
   isInvalid,
   onFocus,
-  onBlur
+  onBlur,
+  elementProps
 }) => {
+  var _a, _b, _c, _d;
   const triggerClassName = clsx(
     styles.trigger,
     selectors.trigger,
-    formatClassNames(semanticClassNames.trigger)
+    formatClassNames(semanticClassNames.trigger),
+    (_a = elementProps == null ? void 0 : elementProps.trigger) == null ? void 0 : _a.className
   );
   const inputGroupClassName = clsx(
     styles.trigger,
     selectors.input,
-    formatClassNames(semanticClassNames.input)
+    formatClassNames(semanticClassNames.input),
+    (_b = elementProps == null ? void 0 : elementProps.input) == null ? void 0 : _b.className
   );
   const clearControl = clearable ? /* @__PURE__ */ jsx(
     Combobox.Clear,
@@ -474,7 +480,8 @@ const DropdownTrigger = ({
       className: clsx(
         styles.clear,
         selectors.clear,
-        formatClassNames(semanticClassNames.clear)
+        formatClassNames(semanticClassNames.clear),
+        (_c = elementProps == null ? void 0 : elementProps.clearButton) == null ? void 0 : _c.className
       ),
       "aria-label": clearLabel,
       "data-testid": TestIds.clear,
@@ -503,7 +510,8 @@ const DropdownTrigger = ({
         {
           items: selectedItems,
           inputControl,
-          removeItemLabel
+          removeItemLabel,
+          chipClassName: (_d = elementProps == null ? void 0 : elementProps.chip) == null ? void 0 : _d.className
         }
       ),
       clearControl
@@ -544,12 +552,20 @@ const DropdownList = ({
   isMultiple,
   hasInput,
   hasQuery,
-  popoverContainer
+  popoverContainer,
+  elementProps
 }) => {
+  var _a, _b;
+  const listClassName = clsx(
+    selectors.list,
+    formatClassNames(semanticClassNames.listbox),
+    (_a = elementProps == null ? void 0 : elementProps.list) == null ? void 0 : _a.className
+  );
   const optionClassName = clsx(
     styles.option,
     selectors.option,
-    formatClassNames(semanticClassNames.option)
+    formatClassNames(semanticClassNames.option),
+    (_b = elementProps == null ? void 0 : elementProps.option) == null ? void 0 : _b.className
   );
   const renderItem = (item) => /* @__PURE__ */ jsxs(Combobox.Item, { value: item, className: optionClassName, children: [
     item.label,
@@ -572,11 +588,7 @@ const DropdownList = ({
       /* @__PURE__ */ jsx(
         Combobox.List,
         {
-          className: clsx(
-            styles.inlineList,
-            selectors.list,
-            formatClassNames(semanticClassNames.listbox)
-          ),
+          className: clsx(styles.inlineList, listClassName),
           "data-testid": TestIds.listbox,
           style: isGrid ? gridStyle : void 0,
           children: listChildren
@@ -588,11 +600,7 @@ const DropdownList = ({
   return /* @__PURE__ */ jsx(Combobox.Portal, { container: popoverContainer ?? void 0, children: /* @__PURE__ */ jsx(Combobox.Positioner, { className: styles.positioner, sideOffset: 4, children: /* @__PURE__ */ jsxs(
     Combobox.Popup,
     {
-      className: clsx(
-        styles.popup,
-        selectors.list,
-        formatClassNames(semanticClassNames.listbox)
-      ),
+      className: clsx(styles.popup, listClassName),
       "data-testid": TestIds.listbox,
       children: [
         /* @__PURE__ */ jsx(
@@ -611,6 +619,7 @@ const DropdownList = ({
 const noop = () => {
 };
 function Dropdown(props) {
+  var _a;
   const environmentService = useService(EnvironmentDefinition);
   const { translate } = useService(
     TranslationsDefinition
@@ -634,7 +643,8 @@ function Dropdown(props) {
     onInput = noop,
     onFocus = noop,
     onBlur = noop,
-    wix
+    wix,
+    elementProps
   } = props;
   const label2 = props.label ?? defaultValues.label;
   const placeholder = props.placeholder ?? defaultValues.placeholder;
@@ -743,7 +753,8 @@ function Dropdown(props) {
       describedById: descriptionId,
       isInvalid,
       onFocus,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      elementProps
     }
   );
   const list2 = /* @__PURE__ */ jsx(
@@ -760,7 +771,8 @@ function Dropdown(props) {
       isMultiple,
       hasInput,
       hasQuery,
-      popoverContainer
+      popoverContainer,
+      elementProps
     }
   );
   const field = /* @__PURE__ */ jsxs(
@@ -802,7 +814,8 @@ function Dropdown(props) {
             className: clsx(
               styles.label,
               selectors.label,
-              formatClassNames(semanticClassNames.label)
+              formatClassNames(semanticClassNames.label),
+              (_a = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _a.className
             ),
             "data-testid": TestIds.label,
             children: [

package/dist/site/components/Dropdown/components/DropdownChips.d.ts

@@ -1,7 +1,8 @@
 import { default as React } from 'react';
 import { DropdownItem } from '../dropdownUtils';
-export declare const DropdownChips: ({ items, inputControl, removeItemLabel, }: {
+export declare const DropdownChips: ({ items, inputControl, removeItemLabel, chipClassName, }: {
     items: Array<DropdownItem>;
     inputControl: React.ReactNode;
     removeItemLabel: string;
+    chipClassName?: string;
 }) => React.ReactElement;

package/dist/site/components/Dropdown/components/DropdownList.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { DropdownItem } from '../dropdownUtils';
+import { DropdownElementProps } from '../Dropdown.types';
 type DropdownListProps = {
     optionItems: Array<DropdownItem>;
     filterItem: (item: DropdownItem, typed: string) => boolean;
@@ -13,6 +14,7 @@ type DropdownListProps = {
     hasInput: boolean;
     hasQuery: boolean;
     popoverContainer: HTMLDivElement | null;
+    elementProps?: DropdownElementProps;
 };
-export declare const DropdownList: ({ optionItems, filterItem, inputValue, limit, isGrid, isSearchable, columns, inline, isMultiple, hasInput, hasQuery, popoverContainer, }: DropdownListProps) => React.ReactElement;
+export declare const DropdownList: ({ optionItems, filterItem, inputValue, limit, isGrid, isSearchable, columns, inline, isMultiple, hasInput, hasQuery, popoverContainer, elementProps, }: DropdownListProps) => React.ReactElement;
 export {};

package/dist/site/components/Dropdown/components/DropdownTrigger.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { DropdownItem } from '../dropdownUtils';
+import { DropdownElementProps } from '../Dropdown.types';
 type DropdownTriggerProps = {
     isMultiple: boolean;
     isSearchable: boolean;
@@ -15,6 +16,7 @@ type DropdownTriggerProps = {
     isInvalid: boolean;
     onFocus: (event: React.FocusEvent) => void;
     onBlur: (event: React.FocusEvent) => void;
+    elementProps?: DropdownElementProps;
 };
-export declare const DropdownTrigger: ({ isMultiple, isSearchable, clearable, selectedLabel, selectedItems, placeholder, ariaLabel, labelId, clearLabel, removeItemLabel, describedById, isInvalid, onFocus, onBlur, }: DropdownTriggerProps) => React.ReactElement;
+export declare const DropdownTrigger: ({ isMultiple, isSearchable, clearable, selectedLabel, selectedItems, placeholder, ariaLabel, labelId, clearLabel, removeItemLabel, describedById, isInvalid, onFocus, onBlur, elementProps, }: DropdownTriggerProps) => React.ReactElement;
 export {};

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

@@ -10,7 +10,8 @@ const ResponsiveAppWidget = (props) => {
     containerProps,
     containerRootClassName = "",
     className = "",
-    shouldUseClassName
+    shouldUseClassName,
+    elementProps
   } = props;
   return /* @__PURE__ */ jsx(
     "div",
@@ -20,7 +21,7 @@ const ResponsiveAppWidget = (props) => {
         [className]: shouldUseClassName
       }),
       ...getDataAttributes(props),
-      children: /* @__PURE__ */ jsx(ResponsiveContainer, { ...containerProps, children })
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { ...containerProps, elementProps, children })
     }
   );
 };

package/dist/site/components/LegacyAppWidget/components/AppWidget.types.d.ts

@@ -1,5 +1,5 @@
 import { DefaultCompPlatformProps, DefaultContainerProps } from '../../../../types/vendored/editor-elements-types-thunderbolt';
-import { ResponsiveContainerPlatformProps } from '../../../../common/ResponsiveContainer/ResponsiveContainer.types';
+import { ContainerElementProps, ResponsiveContainerPlatformProps } from '../../../../common/ResponsiveContainer/ResponsiveContainer.types';
 type AppWidgetMapperProps = {
     shouldUseClassName: boolean;
 };
@@ -7,5 +7,7 @@ type ResponsiveAppWidgetPlatformProps = {
     containerProps: ResponsiveContainerPlatformProps;
     containerRootClassName?: string;
 };
-export type IResponsiveAppWidgetProps = DefaultCompPlatformProps & DefaultContainerProps & ResponsiveAppWidgetPlatformProps & AppWidgetMapperProps;
+export type IResponsiveAppWidgetProps = DefaultCompPlatformProps & DefaultContainerProps & ResponsiveAppWidgetPlatformProps & AppWidgetMapperProps & {
+    elementProps?: ContainerElementProps;
+};
 export {};

package/dist/site/components/LegacyContainer/component.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { IResponsiveBoxProps } from './components/Container.types';
+import { ContainerElementProps } from '../../../common/ResponsiveContainer/ResponsiveContainer.types';
 import { ResponsiveContainerProps } from '../../../types/vendored/mappers-legacy-service';
 export type LegacyContainerProps = {
     id: string;
@@ -8,6 +9,7 @@ export type LegacyContainerProps = {
     containerRootClassName: string;
     role?: IResponsiveBoxProps['role'];
     translations?: any;
+    elementProps?: ContainerElementProps;
 };
-declare const LegacyContainer: ({ id, className, containerProps, containerRootClassName, role, translations, children, }: React.PropsWithChildren<LegacyContainerProps>) => React.JSX.Element;
+declare const LegacyContainer: ({ id, className, containerProps, containerRootClassName, role, translations, elementProps, children, }: React.PropsWithChildren<LegacyContainerProps>) => React.JSX.Element;
 export default LegacyContainer;

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

@@ -22,6 +22,7 @@ const LegacyContainer = ({
   containerRootClassName,
   role,
   translations,
+  elementProps,
   children
 }) => /* @__PURE__ */ jsx(
   ResponsiveBox,
@@ -32,6 +33,7 @@ const LegacyContainer = ({
     containerRootClassName,
     role,
     translations,
+    elementProps,
     children: () => /* @__PURE__ */ jsx(ResponsiveContainer, { ...containerProps, children: () => children })
   }
 );

package/dist/site/components/LegacyContainer/components/Container.types.d.ts

@@ -1,6 +1,6 @@
 import { CorvidTypes, CorvidKeyboardEventHandler, IComponentEvent } from '../../../../types/vendored/editor-elements-types-corvid';
 import { DefaultContainerProps, DefaultCompPlatformProps } from '../../../../types/vendored/editor-elements-types-thunderbolt';
-import { ResponsiveContainerPlatformProps } from '../../../../common/ResponsiveContainer/ResponsiveContainer.types';
+import { ContainerElementProps, ResponsiveContainerPlatformProps } from '../../../../common/ResponsiveContainer/ResponsiveContainer.types';
 import { IElementPropsSDKActions } from '../../../../common/sdk/props-factories/elementPropsSDKFactory';
 import { IClickPropsSDKActions } from '../../../../common/sdk/props-factories/clickPropsSDKFactory';
 import { IFocusPropsSDKActions, IFocusPropsImperativeActions } from '../../../../common/sdk/props-factories/focusPropsSDKFactory';
@@ -59,6 +59,7 @@ export type IResponsiveBoxProps = DefaultCompPlatformProps & ContainerSDKActions
     ref?: React.Ref<IContainerImperativeActions>;
     observeChildListChange?: (id: string, target: HTMLElement) => void;
     shouldUseContainerLayoutClass?: boolean;
+    elementProps?: ContainerElementProps;
 };
 export type ISkinableContainerProps = IContainerProps & {
     classes: Record<string, string>;

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

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { DefaultContainerProps, DefaultCompPlatformProps } from '../../../types/vendored/editor-elements-types-thunderbolt';
 import { AriaProps } from '../../../types/vendored/editor-elements-types-a11y';
 import { IResponsiveBoxProps } from '../LegacyContainer/components/Container.types';
+import { ContainerElementProps } from '../../../common/ResponsiveContainer/ResponsiveContainer.types';
 interface RenderContainerProps {
     state: React.ReactNode;
 }
@@ -11,5 +12,6 @@ export type ILegacyMultiStateBoxProps = Omit<IResponsiveBoxProps, 'children' | '
     selectedStateId?: string;
     onChange?: (event: React.ChangeEvent) => void;
     renderContainer?: (props: RenderContainerProps) => React.ReactElement<any> | null;
+    elementProps?: ContainerElementProps;
 };
 export {};

package/dist/site/components/Line/manifestConfigs/shapeConfig.d.ts

@@ -1,10 +1,10 @@
 export type Edge = 'before' | 'after';
 export declare const getShapeConfig: (edge: Edge, displayName: string) => {
-    cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+    cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
     defaultValue: string;
     displayName: string;
     customEnum: {
-        cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+        cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
         options: {
             value: string;
             displayName: string;

package/dist/site/components/Line/manifestConfigs/typeConfig.d.ts

@@ -1,6 +1,6 @@
 export declare const newTypeConfig: {
     customEnum: {
-        cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+        cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
         options: {
             value: string;
             displayName: string;
@@ -12,5 +12,5 @@ export declare const newTypeConfig: {
     };
     displayName: string;
     defaultValue: string;
-    cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+    cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
 };

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

@@ -16943,6 +16943,7 @@ const isIOS = (win) => {
   return /iPad|iPhone|iPod/.test(platform) || platform === "MacIntel" && /Macintosh/.test(userAgent) && (((_c = win == null ? void 0 : win.navigator) == null ? void 0 : _c.maxTouchPoints) ?? 0) > 1;
 };
 const Lottie = (props) => {
+  var _a;
   const { translate } = useService(TranslationsDefinition);
   const translateByKey = translate(ARIA_LABEL_NAMESPACE);
   const t = (key2) => getTranslation(translateByKey, key2, TranslationKeys, DefaultTranslations);
@@ -16957,6 +16958,7 @@ const Lottie = (props) => {
     speed = rootDataDefaults.speed,
     showButtonOnHover: showButtonOnHover2 = rootDataDefaults.showButtonOnHover,
     allowClickToStop = rootDataDefaults.allowClickToStop,
+    elementProps,
     onClick,
     onDblClick,
     onMouseIn,
@@ -17048,7 +17050,8 @@ const Lottie = (props) => {
                 ...direction ? { direction } : {},
                 className: clsx(
                   semanticSelectors.playButton,
-                  styles.playButton
+                  styles.playButton,
+                  (_a = elementProps == null ? void 0 : elementProps.playButton) == null ? void 0 : _a.className
                 ),
                 a11y: {
                   ariaLabel: isPlaying ? t("pauseButton") : t("playButton"),

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

@@ -24,6 +24,12 @@ export interface LottieProps extends SdkFunctionClickableProps, SdkFunctionMouse
     showButtonOnHover?: string;
     /** Clicking the canvas pauses/resumes the animation. Default `true`. */
     allowClickToStop?: boolean;
+    /** Per-element className overrides keyed by manifest element name. */
+    elementProps?: {
+        playButton?: {
+            className?: string;
+        };
+    };
 }
 export interface UseLottieParams {
     animationUrl?: string;

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

@@ -11,13 +11,36 @@ export type MenuItemType = MenuItemData & {
     isContainerItem?: boolean;
     forceOpen?: boolean;
 };
+export type MenuDropdownItemsElementProps = {
+    item?: {
+        className?: string;
+    };
+    subItem?: {
+        className?: string;
+    };
+};
+export type MenuDropdownElementProps = {
+    className?: string;
+    elementProps?: MenuDropdownItemsElementProps;
+};
+export type MenuNavbarElementProps = {
+    item?: {
+        className?: string;
+    };
+    scrollButton?: {
+        className?: string;
+    };
+    dropdown?: MenuDropdownElementProps;
+};
+export type HamburgerMenuElementProps = {
+    hamburgerCloseButton?: ButtonProps;
+};
 export type HamburgerMenuProps = {
+    className?: string;
     isOpen?: boolean;
     content?: React.ReactNode;
     headerContent?: React.ReactNode;
-    elementProps?: {
-        hamburgerCloseButton?: ButtonProps;
-    };
+    elementProps?: HamburgerMenuElementProps;
 };
 export type MenuProps = SdkFunctionMouseHoverProps & {
     /** DOM `id` on the root `.menu`. */
@@ -37,10 +60,12 @@ export type MenuProps = SdkFunctionMouseHoverProps & {
     /** Props forwarded to nested elements. `navbar` carries the items and the navbar `a11y` bag; `hamburgerMenu` holds the dialog slots; `hamburgerOpenButton` is the open-button prop bag. */
     elementProps: {
         navbar?: {
+            className?: string;
             items?: Array<MenuItemType>;
             direction?: Direction;
             submenuDirection?: Direction;
             a11y?: A11y;
+            elementProps?: MenuNavbarElementProps;
         };
         hamburgerMenu?: HamburgerMenuProps;
         hamburgerOpenButton?: ButtonProps;
@@ -61,6 +86,8 @@ export type DropdownProps = (HorizontalDropdownProps | VerticalDropdownProps) &
     item: MenuItemType;
     isOpen?: boolean;
     menuOrientation: MenuOrientationType;
+    className?: string;
+    elementProps?: MenuDropdownItemsElementProps;
 };
 export type MenuStates = {
     hamburgerMenuOpen?: boolean;
@@ -111,6 +138,7 @@ export type IMenuContentProps = Partial<IMenuItemsPropsSDKActions> & {
     direction?: Direction;
     submenuDirection?: Direction;
     submenuToggleIdPrefix?: string;
+    menuElementProps?: MenuNavbarElementProps;
 };
 export type IMenuItemProps = Partial<IMenuItemsPropsSDKActions> & {
     item: PropsWithChildren<MenuItemData & {
@@ -123,6 +151,7 @@ export type IMenuItemProps = Partial<IMenuItemsPropsSDKActions> & {
     getAnimationPackage: () => MenuAnimationNameType;
     submenuDirection?: Direction;
     submenuToggleIdPrefix?: string;
+    menuElementProps?: MenuNavbarElementProps;
 } & Translations;
 export type ScrollControlsProps = {
     isScrollForwardButtonShown: boolean;
@@ -130,6 +159,7 @@ export type ScrollControlsProps = {
     scrollPageForward: () => void;
     scrollPageToBackward: () => void;
     previewState?: string;
+    scrollButtonClassName?: string;
 };
 export type ScrollButtonProps = {
     className?: string;