@wix/editor-react-components 1.2809.0 → 1.2811.0

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

@@ -50,13 +50,13 @@ export declare const DisplayNames: {
                     hoverToPreview: string;
                     error: string;
                     generatingAnimation: string;
-                    emptyStateTitle: string;
                     sectionHelper: string;
                     sectionHelperLink: string;
                 };
                 displayName: string;
                 panel: {
                     chooseIcon: string;
+                    preview: string;
                     replaceIcon: string;
                     AnimatedIconCreationButton: string;
                     duration: string;

package/dist/site/components/AnimatedIcon/panels/AnimatedIconPanelWrapper.d.ts

@@ -1,4 +1,8 @@
 import { default as React } from 'react';
 import { AnimatedSvgRef, AnimatedSvgEditorProps } from '../types';
-declare const AnimatedIconPanelWrapper: React.ForwardRefExoticComponent<AnimatedSvgEditorProps & React.RefAttributes<AnimatedSvgRef>>;
+interface AnimatedIconPanelWrapperProps extends AnimatedSvgEditorProps {
+    /** Rendered icon size in px */
+    size?: number;
+}
+declare const AnimatedIconPanelWrapper: React.ForwardRefExoticComponent<AnimatedIconPanelWrapperProps & React.RefAttributes<AnimatedSvgRef>>;
 export default AnimatedIconPanelWrapper;

package/dist/site/components/AnimatedIcon/panels/IconCreationPanel/IconSelector.d.ts

@@ -4,7 +4,7 @@ interface IconSelectorProps {
     label: string;
     svgData: SvgData | null;
     onUpdateImage: () => void;
-    span?: number;
+    className?: string;
     dataHook?: string;
 }
 declare const IconSelector: React.FC<IconSelectorProps>;

package/dist/site/components/AnimatedIcon/panels/components/DurationSection.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { Translations } from '../translations/consts';
 interface DurationSectionProps {
-    isAnimated: boolean;
     animationDuration: number;
     onDurationChange: (newDuration: number) => Promise<void>;
     translations: Translations;

package/dist/site/components/AnimatedIcon/panels/components/IconPreviewBox.d.ts

@@ -0,0 +1,16 @@
+import { default as React, ReactNode } from 'react';
+interface IconPreviewBoxProps {
+    svgId?: string | null;
+    duration: number;
+    iconSize?: number;
+    height?: string;
+    /** When provided, an empty box renders as an "add" affordance that calls this */
+    onAddIcon?: () => void;
+    addIconInfo?: string;
+    /** Custom content (e.g. a loader) rendered instead of the icon */
+    children?: ReactNode;
+    placeholderDataHook?: string;
+    dataHook?: string;
+}
+declare const IconPreviewBox: React.FC<IconPreviewBoxProps>;
+export default IconPreviewBox;

package/dist/site/components/AnimatedIcon/panels/components/SvgDisplaySection.d.ts

@@ -4,7 +4,9 @@ import { Translations } from '../translations/consts';
 interface SvgDisplaySectionProps {
     currentSvg: SvgData | null;
     animationDuration: number;
+    isAnimated: boolean;
     onChooseIcon: () => Promise<void>;
+    onCreateIcon: () => void;
     translations: Translations;
     dataHook?: string;
 }

package/dist/site/components/AnimatedIcon/panels/constants.d.ts

@@ -12,8 +12,14 @@ export declare const DURATION_CONSTANTS: {
     readonly MIN_DURATION: 0;
     readonly MAX_DURATION: 2;
 };
+export declare const DURATION_UNIT = "s";
 export declare const UI_CONSTANTS: {
     readonly BACKGROUND_COLOR: "var(--wds-add-item-fill, #F8F6F6)";
-    readonly BORDER_RADIUS: "8px";
-    readonly NUMBER_INPUT_WIDTH: "80px";
+    readonly SLOT_BORDER_RADIUS: "var(--wds-add-item-border-radius, 12px)";
+    readonly NUMBER_INPUT_WIDTH: "72px";
+    readonly PREVIEW_BOX_HEIGHT: "130px";
+    readonly CREATION_PREVIEW_BOX_HEIGHT: "130px";
+    readonly ICON_SELECTOR_HEIGHT: "75px";
+    readonly PREVIEW_ICON_SIZE: 70;
+    readonly SELECTOR_ICON_SIZE: 38;
 };

package/dist/site/components/AnimatedIcon/panels/dataHooks.d.ts

@@ -2,7 +2,7 @@ export declare const CUSTOMIZE_ICON_PANEL_DATA_HOOKS: {
     PANEL: string;
     ICON_TYPE_SECTION: string;
     SVG_DISPLAY_SECTION: string;
-    CREATE_ANIMATED_SECTION: string;
+    PREVIEW_BOX: string;
     DURATION_SECTION: string;
     TRIGGER_SECTION: string;
     CHOOSE_ICON_BUTTON: string;
@@ -12,7 +12,10 @@ export declare const CUSTOMIZE_ICON_PANEL_DATA_HOOKS: {
     TRIGGER_TOGGLE: string;
     CREATION_PANEL: string;
     CREATION_BACK: string;
+    CREATION_INSTRUCTION: string;
     CREATION_START_ICON: string;
     CREATION_END_ICON: string;
     CREATION_PREVIEW: string;
+    CREATION_PREVIEW_BOX: string;
+    CREATION_PREVIEW_PLACEHOLDER: string;
 };

package/dist/site/components/AnimatedIcon/panels/svgDataUrl.d.ts

@@ -0,0 +1,16 @@
+/** Reads the resolved WDS primary text color at `element`, falling back to black. */
+export declare const readThemeTextColor: (element: Element | null) => string;
+interface ThemedSvgOptions {
+    /** Square canvas the image is drawn on, in px */
+    canvasSize: number;
+    /** Rendered icon size, centered on the canvas, in px */
+    iconSize: number;
+    /** Fill applied to paths that do not set their own */
+    color: string;
+}
+/**
+ * Wraps an SVG document in a square canvas so an `<img>` (e.g. WDS ImageViewer)
+ * shows it centered at a fixed size and in the panel's text color.
+ */
+export declare const buildThemedSvgDataUrl: (svgText: string, { canvasSize, iconSize, color }: ThemedSvgOptions) => string;
+export {};

package/dist/site/components/AnimatedIcon/panels/translations/consts.d.ts

@@ -3,17 +3,17 @@ export declare const TranslationKeys: {
     readonly iconTypeAnimatedOption: "custompanel_animatedicon_icon_type_toggle_animated_label";
     readonly iconTypeStaticOption: "custompanel_animatedicon_icon_type_toggle_static_label";
     readonly iconTypeTooltip: "custompanel_animatedicon_icon_type_tooltip_description";
-    readonly createCta: "custompanel_animatedicon_image_viewer_create_cta";
+    readonly createIconCta: "custompanel_animatedicon_create_icon_cta";
     readonly replaceCta: "custompanel_animatedicon_image_viewer_replace_cta";
     readonly chooseIcon: "custompanel_animatedicon_image_viewer_field_label";
+    readonly previewLabel: "custompanel_animatedicon_preview_field_label";
     readonly durationLabel: "custompanel_animatedicon_border_radius_duration_label";
-    readonly durationSuffix: "custompanel_animatedicon_borderRadius_input_suffix_label";
     readonly previewTooltip: "custompanel_animatedicon_sidePanel_field_preview_tooltip";
     readonly loaderMessage: "custompanel_animatedicon_loader_message_text";
     readonly sectionHelperDescription: "custompanel_animatedicon_sectionHelper_description";
     readonly sectionHelperLink: "custompanel_animatedicon_sectionHelper_description_link";
     readonly endIconLabel: "custompanel_animatedicon_sidePanel_endIcon_label";
-    readonly sidePanelTitle: "custompanel_animatedicon_sidePanel_title";
+    readonly creationInstruction: "custompanel_animatedicon_statusMessage_helperText";
     readonly startIconLabel: "custompanel_animatedicon_sidePanel_startIcon_label";
     readonly triggerFieldLabel: "custompanel_animatedicon_trigger_field_label";
     readonly triggerHoverOption: "custompanel_animatedicon_trigger_toggle_hover_label";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2809.0",
+  "version": "1.2811.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -224,5 +224,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "94fef56746e0501edab5639a63a467e87bb9e7f1f9e5cdf69dad4a9f"
+  "falconPackageHash": "574fd382c33bdfef46af28d46fcc4d940e7d61bde589c8f104930f0d"
 }

package/dist/site/components/AnimatedIcon/panels/IconCreationPanel/Title.d.ts

@@ -1,7 +0,0 @@
-import { default as React } from 'react';
-import { Translations } from '../translations/consts';
-interface TitleProps {
-    translations: Translations;
-}
-declare const Title: React.FC<TitleProps>;
-export default Title;

package/dist/site/components/AnimatedIcon/panels/components/AnimatedIconCreationSection.d.ts

@@ -1,10 +0,0 @@
-import { default as React } from 'react';
-import { Translations } from '../translations/consts';
-interface AnimatedIconCreationSectionProps {
-    onAnimatedIcon: () => void;
-    isAnimated: boolean;
-    translations: Translations;
-    dataHook?: string;
-}
-declare const AnimatedIconCreationSection: React.FC<AnimatedIconCreationSectionProps>;
-export default AnimatedIconCreationSection;