@wix/editor-react-components 1.2452.0 → 1.2453.0

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

@@ -34,6 +34,7 @@ const styles = {
 const noop = () => {
 };
 function TextBoxComponent(props) {
+  var _a, _b, _c;
   const environmentService = useService(EnvironmentDefinition);
   const {
     id,
@@ -56,7 +57,8 @@ function TextBoxComponent(props) {
     onBlur = noop,
     onValidate,
     onValidityChange,
-    wix
+    wix,
+    elementProps
   } = props;
   const isControlled = props.value !== void 0;
   const defaultValue = props.defaultValue ?? defaultValues.defaultValue;
@@ -137,7 +139,8 @@ function TextBoxComponent(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: [
@@ -175,7 +178,8 @@ function TextBoxComponent(props) {
                 className: clsx(
                   styles.input,
                   selectors.input,
-                  formatClassNames(semanticClassNames.input)
+                  formatClassNames(semanticClassNames.input),
+                  (_b = elementProps == null ? void 0 : elementProps.input) == null ? void 0 : _b.className
                 ),
                 ...isControlled ? { value: props.value } : { defaultValue },
                 onValueChange: handleValueChange,
@@ -196,7 +200,8 @@ function TextBoxComponent(props) {
                 className: clsx(
                   styles.description,
                   selectors.description,
-                  formatClassNames(semanticClassNames.description)
+                  formatClassNames(semanticClassNames.description),
+                  (_c = elementProps == null ? void 0 : elementProps.description) == null ? void 0 : _c.className
                 ),
                 "data-testid": TestIds.description,
                 children: description2

package/dist/site/components/TextEffectsShared/manifestBase.d.ts

@@ -1,26 +1,26 @@
 export declare const textEffectsInstallation: {
     initialSize: {
         width: {
-            sizingType: import('@wix/ambassador-devcenter-v1-component-type-data/types').SizingType;
+            sizingType: import('@wix/component-protocol/schema').SizingType;
         };
         height: {
-            sizingType: import('@wix/ambassador-devcenter-v1-component-type-data/types').SizingType;
+            sizingType: import('@wix/component-protocol/schema').SizingType;
         };
     };
 };
 export declare const textEffectsLayout: {
-    resizeDirection: import('@wix/ambassador-devcenter-v1-component-type-data/types').ResizeDirection;
-    contentResizeDirection: import('@wix/ambassador-devcenter-v1-component-type-data/types').ContentResizeDirection;
+    resizeDirection: import('@wix/component-protocol/schema').ResizeDirection;
+    contentResizeDirection: import('@wix/component-protocol/schema').ContentResizeDirection;
     disableStretching: boolean;
     disablePositioning: boolean;
 };
 export declare const textEffectsCommonData: {
     direction: {
-        dataType: import('@wix/ambassador-devcenter-v1-component-type-data/types').DataType;
+        dataType: import('@wix/component-protocol/schema').DataType;
     };
     patternScope: {
         displayName: string;
-        dataType: import('@wix/ambassador-devcenter-v1-component-type-data/types').DataType;
+        dataType: import('@wix/component-protocol/schema').DataType;
         textEnum: {
             options: ({
                 value: "none";
@@ -36,9 +36,9 @@ export declare const textEffectsCommonData: {
         defaultValue: "none";
     };
     a11y: {
-        dataType: import('@wix/ambassador-devcenter-v1-component-type-data/types').DataType;
+        dataType: import('@wix/component-protocol/schema').DataType;
         a11y: {
-            attributes: import('@wix/ambassador-devcenter-v1-component-type-data/types').A11yAttributes[];
+            attributes: import('@wix/component-protocol/schema').A11yAttributes[];
         };
     };
 };
@@ -58,12 +58,12 @@ export declare const textEffectsBaseCssProperties: {
     textTransform: {};
 };
 export declare const textEffectsInteractions: {
-    triggers: import('@wix/ambassador-devcenter-v1-component-type-data/types').InteractionsTrigger[];
+    triggers: import('@wix/component-protocol/schema').InteractionsTrigger[];
 };
 export declare const textEffectsPatternCssCustomProperties: {
     'rotation-pattern-intensity': {
         displayName: string;
-        cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+        cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
         number: {
             min: string;
             max: string;
@@ -71,7 +71,7 @@ export declare const textEffectsPatternCssCustomProperties: {
     };
     'offset-pattern-intensity': {
         displayName: string;
-        cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+        cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
         number: {
             min: string;
             max: string;
@@ -79,9 +79,9 @@ export declare const textEffectsPatternCssCustomProperties: {
     };
     'pattern-preset': {
         displayName: string;
-        cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+        cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
         customEnum: {
-            cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+            cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
             options: ({
                 value: "Fridge Magnet" | "Wave" | "Bounce";
                 displayName: "Fridge Magnet" | "Wave" | "Bounce";
@@ -93,9 +93,9 @@ export declare const textEffectsPatternCssCustomProperties: {
     };
     'is-capitalize': {
         displayName: string;
-        cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+        cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
         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/TimePicker/TimePicker.types.d.ts

@@ -8,6 +8,20 @@ export type TranslationKey = keyof typeof TranslationKeys;
 export type TimePickerGranularity = 'hour' | 'minute' | 'second';
 /** `auto` defers to the locale; `12`/`24` force the hour cycle. */
 export type TimePickerHourCycle = 'auto' | '12' | '24';
+export type TimePickerElementProps = {
+    label?: {
+        className?: string;
+    };
+    timeInput?: {
+        className?: string;
+    };
+    description?: {
+        className?: string;
+    };
+    segment?: {
+        className?: string;
+    };
+};
 export type TimePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & FieldValidationProps<string> & {
     /** Fires with the selected ISO time string (`HH:MM[:SS]`), or `''` when cleared. */
     onChange?: (value: string) => void;
@@ -58,4 +72,6 @@ export type TimePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & Sdk
         /** Spread on the preset wrapper. */
         presetsWrapperProps?: Record<string, unknown>;
     };
+    /** Per-element className overrides injected by the platform. */
+    elementProps?: TimePickerElementProps;
 };

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

@@ -12,7 +12,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { g as getTranslation } from "../chunks/getTranslation.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { E as EMPTY_VALUE, T as TestIds, s as selectors, a as TRANSLATIONS_NAMESPACE, d as defaultValues, V as VALUE_MISSING_MESSAGE, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
+import { E as EMPTY_VALUE, s as selectors, T as TestIds, a as TRANSLATIONS_NAMESPACE, d as defaultValues, V as VALUE_MISSING_MESSAGE, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
@@ -100,29 +100,37 @@ const useTimeConstraints = (params) => {
     [minTimeStr, maxTimeStr]
   );
 };
-const renderSegments = (segment2) => /* @__PURE__ */ jsx(
-  $40825cdb76e74f70$export$336ab7fa954c4b5f,
-  {
-    segment: segment2,
-    className: clsx(styles.segment, selectors.segment)
-  }
-);
 const TimePickerField = ({
-  clearButton: clearButton2
-}) => /* @__PURE__ */ jsxs(
-  $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
-  {
-    className: clsx(styles.group, selectors.group),
-    "data-testid": TestIds.group,
-    children: [
-      /* @__PURE__ */ jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: styles.field, "data-testid": TestIds.field, children: renderSegments }),
-      clearButton2
-    ]
-  }
-);
+  clearButton: clearButton2,
+  elementProps
+}) => {
+  var _a, _b;
+  const segmentClassName = clsx(
+    styles.segment,
+    selectors.segment,
+    (_a = elementProps == null ? void 0 : elementProps.segment) == null ? void 0 : _a.className
+  );
+  const renderSegments = (seg) => /* @__PURE__ */ jsx($40825cdb76e74f70$export$336ab7fa954c4b5f, { segment: seg, className: segmentClassName });
+  return /* @__PURE__ */ jsxs(
+    $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
+    {
+      className: clsx(
+        styles.group,
+        selectors.group,
+        (_b = elementProps == null ? void 0 : elementProps.timeInput) == null ? void 0 : _b.className
+      ),
+      "data-testid": TestIds.group,
+      children: [
+        /* @__PURE__ */ jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: styles.field, "data-testid": TestIds.field, children: renderSegments }),
+        clearButton2
+      ]
+    }
+  );
+};
 const noop = () => {
 };
 function TimePicker(props) {
+  var _a, _b;
   const environmentService = useService(EnvironmentDefinition);
   const { translate } = useService(TranslationsDefinition);
   const translateByKey = translate(TRANSLATIONS_NAMESPACE);
@@ -144,7 +152,8 @@ function TimePicker(props) {
     showValidityIndication,
     onValidate,
     onValidityChange,
-    wix
+    wix,
+    elementProps
   } = props;
   const label2 = readString(props.label);
   const description2 = readString(props.description);
@@ -237,16 +246,26 @@ function TimePicker(props) {
               onBlur: handleBlur,
               children: [
                 label2 || tooltip2 ? /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
-                  label2 ? /* @__PURE__ */ jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: clsx(styles.label, selectors.label), children: [
-                    label2,
-                    isRequired && /* @__PURE__ */ jsx(
-                      RequiredIndicator,
-                      {
-                        className: selectors.requiredIndicator,
-                        "data-testid": TestIds.requiredIndicator
-                      }
-                    )
-                  ] }) : null,
+                  label2 ? /* @__PURE__ */ jsxs(
+                    $01b77f81d0f07f68$export$b04be29aa201d4f5,
+                    {
+                      className: clsx(
+                        styles.label,
+                        selectors.label,
+                        (_a = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _a.className
+                      ),
+                      children: [
+                        label2,
+                        isRequired && /* @__PURE__ */ jsx(
+                          RequiredIndicator,
+                          {
+                            className: selectors.requiredIndicator,
+                            "data-testid": TestIds.requiredIndicator
+                          }
+                        )
+                      ]
+                    }
+                  ) : null,
                   tooltip2 ? /* @__PURE__ */ jsxs($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, children: [
                     /* @__PURE__ */ jsx(
                       $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
@@ -268,14 +287,21 @@ function TimePicker(props) {
                     )
                   ] }) : null
                 ] }) : null,
-                /* @__PURE__ */ jsx(TimePickerField, { clearButton: clearButton2 }),
+                /* @__PURE__ */ jsx(
+                  TimePickerField,
+                  {
+                    clearButton: clearButton2,
+                    elementProps
+                  }
+                ),
                 description2 ? /* @__PURE__ */ jsx(
                   $514c0188e459b4c0$export$5f1af8db9871e1d6,
                   {
                     slot: "description",
                     className: clsx(
                       styles.description,
-                      selectors.description
+                      selectors.description,
+                      (_b = elementProps == null ? void 0 : elementProps.description) == null ? void 0 : _b.className
                     ),
                     children: description2
                   }

package/dist/site/components/TimePicker/components/TimePickerField.d.ts

@@ -1,4 +1,6 @@
 import { default as React } from 'react';
-export declare const TimePickerField: ({ clearButton, }: {
+import { TimePickerElementProps } from '../TimePicker.types';
+export declare const TimePickerField: ({ clearButton, elementProps, }: {
     clearButton: React.ReactNode;
+    elementProps?: TimePickerElementProps;
 }) => React.JSX.Element;

package/dist/site/components/TransparentVideo/useTransparentVideo.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
 import { TransparentVideoProps, VideoEndType } from './TransparentVideo.types';
 export declare function useTransparentVideo(props: TransparentVideoProps): {
-    a11y: Pick<typeof import('@wix/ambassador-devcenter-v1-component-type-data/types').A11yAttributes, "ariaLabel"> | undefined;
+    a11y: Pick<typeof import('@wix/component-protocol/schema').A11yAttributes, "ariaLabel"> | undefined;
     className: string | undefined;
     canvasRef: import('react').RefObject<HTMLCanvasElement>;
     isMuted: boolean;

package/dist/site/components/chunks/Button.js

@@ -25,13 +25,13 @@ const styles = {
   button
 };
 const AnimatedButtonIcon = forwardRef(
-  ({ svg, duration }, ref) => /* @__PURE__ */ jsx(
+  ({ svg, duration, className }, ref) => /* @__PURE__ */ jsx(
     AnimatedIconWithReducedMotion,
     {
       id: "animated-icon",
       duration,
       svg,
-      className: clsx("animated-icon", styles.icon),
+      className: clsx("animated-icon", styles.icon, className),
       ref
     }
   )
@@ -197,6 +197,7 @@ function useButtonA11y({
   return a11yAttr;
 }
 const Button = (props) => {
+  var _a;
   const {
     id,
     link: link2,
@@ -254,7 +255,8 @@ const Button = (props) => {
   const labelClassName = clsx(
     "label",
     styles.label,
-    formatClassNames(semanticClassNames.buttonLabel)
+    formatClassNames(semanticClassNames.buttonLabel),
+    (_a = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _a.className
   );
   const linkClassName = styles.link;
   const { isLink, eventHandlers } = useButtonEventHandlers({
@@ -287,7 +289,8 @@ const Button = (props) => {
       {
         ref: iconAnimatedRef,
         svg: animatedIconProps == null ? void 0 : animatedIconProps.svg,
-        duration: animatedIconProps == null ? void 0 : animatedIconProps.duration
+        duration: animatedIconProps == null ? void 0 : animatedIconProps.duration,
+        className: animatedIconProps == null ? void 0 : animatedIconProps.className
       }
     )
   ] });

package/dist/site/components/chunks/ResponsiveBox.js

@@ -22,6 +22,7 @@ const styles = {
   "css-background": "css-background__Ttjm0"
 };
 const ResponsiveBox = (props, ref) => {
+  var _a;
   const {
     id,
     className,
@@ -45,7 +46,8 @@ const ResponsiveBox = (props, ref) => {
     observeChildListChange,
     containerProps,
     shouldUseContainerLayoutClass,
-    lang
+    lang,
+    elementProps
   } = props;
   const {
     "aria-label-interactions": ariaLabelInteractions,
@@ -65,12 +67,12 @@ const ResponsiveBox = (props, ref) => {
   React.useImperativeHandle(ref, () => {
     return {
       focus: () => {
-        var _a;
-        (_a = rootElementRef.current) == null ? void 0 : _a.focus();
+        var _a2;
+        (_a2 = rootElementRef.current) == null ? void 0 : _a2.focus();
       },
       blur: () => {
-        var _a;
-        (_a = rootElementRef.current) == null ? void 0 : _a.blur();
+        var _a2;
+        (_a2 = rootElementRef.current) == null ? void 0 : _a2.blur();
       }
     };
   });
@@ -135,7 +137,8 @@ const ResponsiveBox = (props, ref) => {
                   // workaround so the viewer finds the class and doesn't throw; doesn't affect layout
                   shouldUseContainerLayoutClass
                 )
-              }
+              },
+              (_a = elementProps == null ? void 0 : elementProps.innerBox) == null ? void 0 : _a.className
             )
           }
         ),

package/dist/site/components/chunks/ResponsiveContainer.js

@@ -33,8 +33,10 @@ const ResponsiveContainer = ({
   ariaLive,
   ariaAttributes,
   tabIndex: tabIndexFromProps,
-  tagName = "div"
+  tagName = "div",
+  elementProps
 }, ref) => {
+  var _a;
   const hasOverflowWrapper = !shouldOmitWrapperLayers && hasOverflow;
   let tabIndexWithOverflow = -1;
   if (hasScrollOverflow && tabIndexFromProps !== void 0) {
@@ -51,7 +53,11 @@ const ResponsiveContainer = ({
     ) : reactChildren,
     [hasOverflowWrapper, overlowWrapperClassName, extraRootClass]
   );
-  const classes = hasOverflow ? containerLayoutClassName : clsx(containerLayoutClassName, extraRootClass);
+  const classes = clsx(
+    containerLayoutClassName,
+    !hasOverflow && extraRootClass,
+    (_a = elementProps == null ? void 0 : elementProps.innerBox) == null ? void 0 : _a.className
+  );
   const childProps = {
     ref,
     "data-testid": TestIds.content,

package/dist/site/components/chunks/types.impl.js

@@ -144,7 +144,6 @@ var BackOfficeHostingPlatforms;
   BackOfficeHostingPlatforms2["PAYMENTS_BO"] = "PAYMENTS_BO";
   BackOfficeHostingPlatforms2["SYMPHONY"] = "SYMPHONY";
   BackOfficeHostingPlatforms2["BMR"] = "BMR";
-  BackOfficeHostingPlatforms2["WIXEL_DASHBOARD"] = "WIXEL_DASHBOARD";
 })(BackOfficeHostingPlatforms || (BackOfficeHostingPlatforms = {}));
 var BackOfficeScriptAssetType;
 (function(BackOfficeScriptAssetType2) {
@@ -430,23 +429,6 @@ var AuthType;
   AuthType2["OAUTH2"] = "OAUTH2";
   AuthType2["API_KEY"] = "API_KEY";
 })(AuthType || (AuthType = {}));
-var DispatchHttpMethod;
-(function(DispatchHttpMethod2) {
-  DispatchHttpMethod2["UNKNOWN_DISPATCH_HTTP_METHOD"] = "UNKNOWN_DISPATCH_HTTP_METHOD";
-  DispatchHttpMethod2["GET"] = "GET";
-  DispatchHttpMethod2["POST"] = "POST";
-  DispatchHttpMethod2["PUT"] = "PUT";
-  DispatchHttpMethod2["PATCH"] = "PATCH";
-  DispatchHttpMethod2["DELETE"] = "DELETE";
-  DispatchHttpMethod2["HEAD"] = "HEAD";
-  DispatchHttpMethod2["OPTIONS"] = "OPTIONS";
-})(DispatchHttpMethod || (DispatchHttpMethod = {}));
-var IdentityHttpMethod;
-(function(IdentityHttpMethod2) {
-  IdentityHttpMethod2["UNKNOWN_IDENTITY_HTTP_METHOD"] = "UNKNOWN_IDENTITY_HTTP_METHOD";
-  IdentityHttpMethod2["GET"] = "GET";
-  IdentityHttpMethod2["POST"] = "POST";
-})(IdentityHttpMethod || (IdentityHttpMethod = {}));
 var ScopeSeparator;
 (function(ScopeSeparator2) {
   ScopeSeparator2["UNKNOWN_SCOPE_SEPARATOR"] = "UNKNOWN_SCOPE_SEPARATOR";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2452.0",
+  "version": "1.2453.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -77,12 +77,12 @@
     "@radix-ui/react-accordion": "^1.2.11",
     "@vimeo/player": "^2.20.1",
     "@vis.gl/react-google-maps": "^1.5.2",
-    "@wix/ambassador-devcenter-v1-component-type-data": "^1.0.436",
+    "@wix/ambassador-devcenter-v1-component-type-data": "^1.0.472",
     "@wix/design-system-illustrations": "^2.19.0",
     "@wix/sdk": "^1.21.13",
     "@wix/services-manager-react": "^0.1.27",
     "@wix/site-service-rendering-context": "^1.0.1",
-    "@wix/site-ui": "1.196.0",
+    "@wix/site-ui": "1.197.0",
     "@wix/video": "^1.85.0",
     "@wix/viewer-service-consent-policy": "^1.0.100",
     "@wix/web-bi-logger": "^2.1.29",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "5a60416677dc8eb77021e7939aadb441fd45b1251585f4a3215ddae7"
+  "falconPackageHash": "bdef7128379bb6419472f9b30875a25413dd4626add5516e096c0b7a"
 }