@wix/editor-react-components 1.2153.0

package/dist/site/components/Lottie/component.preview.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { default as Lottie } from './component';
+import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
+export default function LottiePreview(props: React.ComponentProps<typeof Lottie>): React.JSX.Element;
+export declare const resolveManifestOverrides: ResolveManifestOverrides;

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { LottieProps, LottiePlayerAnyRendererProps } from '../types';
+export declare const LottieAnimation: React.FC<LottiePlayerAnyRendererProps & {
+    a11y?: LottieProps['a11y'];
+}>;

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

@@ -0,0 +1,78 @@
+export declare const implementationLibrary: "lottie-react";
+export declare const semanticSelectors: {
+    readonly root: "lottie";
+    readonly playButton: "playButton";
+};
+export declare const ariaLabels: {
+    readonly playButton: "Play animation";
+    readonly pauseButton: "Pause animation";
+};
+export declare const DisplayNames: {
+    readonly root: {
+        readonly elementDisplayName: "Lottie";
+        readonly data: {
+            readonly animationUrl: "Animation URL";
+            readonly loop: "Plays in a loop";
+            readonly speed: "Speed";
+            readonly showButtonOnHover: "Show play/pause button";
+            readonly allowClickToStop: "Click to stop animation";
+        };
+    };
+    readonly playButton: {
+        readonly elementDisplayName: "Play button";
+    };
+};
+export declare const rootDataDefaults: {
+    readonly loop: true;
+    readonly speed: 1;
+    readonly showButtonOnHover: "always";
+    readonly allowClickToStop: true;
+};
+export declare const showButtonOnHoverDefaults: {
+    always: {
+        value: string;
+        displayName: string;
+    };
+    onHover: {
+        value: string;
+        displayName: string;
+    };
+};
+export declare const editorOverrides: {
+    readonly showButtonOnHover: "always";
+    readonly allowClickToStop: false;
+};
+export declare const displayPropertyToObserve: string[];
+export declare const testIds: {
+    readonly animationClickWrapper: "lottie-animation-click-wrapper";
+};
+export declare const borderDefaultValue: "0px none rgba(0, 0, 0, 1)";
+export declare const playButtonDefaults: {
+    readonly insetInlineEnd: "5px";
+    readonly insetBlockEnd: "5px";
+};
+export declare const initialSize: {
+    readonly width: 280;
+    readonly height: 280;
+};
+export declare const speedConstraints: {
+    readonly min: "0.5";
+    readonly max: "5.0";
+    readonly multiplier: "0.5";
+};
+export declare const playIconSvg: {
+    uri: string;
+    viewBox: string;
+    contentBox: string;
+    colors: {};
+    contentType: "shape";
+    svgContent: string;
+};
+export declare const pauseIconSvg: {
+    uri: string;
+    viewBox: string;
+    contentBox: string;
+    colors: {};
+    contentType: "shape";
+    svgContent: string;
+};

package/dist/site/components/Lottie/css.css

@@ -0,0 +1,187 @@
+.root__qcSXu {
+  box-sizing: border-box;
+}
+
+.lottieContainer__2ucBB {
+  position: relative;
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+.animation__x5-6f {
+  block-size: 100%;
+  inline-size: 100%;
+  overflow: clip;
+}
+
+.playButton__ZMl1V {
+  position: absolute;
+  inset-inline-end: 5px;
+  inset-block-end: 5px;
+}
+
+.showButtonOnHover__Kp2RB .playButton__ZMl1V {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.showButtonOnHover__Kp2RB:hover .playButton__ZMl1V,
+.showButtonOnHover__Kp2RB:has(:focus-visible) .playButton__ZMl1V {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.animationClickWrapper__4IAuO {
+  height: 100%;
+  cursor: pointer;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}
+.rootDirection__PPhdq {
+  direction: var(--btn-direction);
+}
+
+.root__IB9QF {
+  --display: flex;
+  display: var(--display);
+  cursor: pointer;
+  min-width: var(--btn-min-width);
+  min-height: 10px;
+  box-sizing: border-box;
+  touch-action: manipulation;
+  flex-basis: auto;
+  flex-direction: var(--container-flex-direction, row);
+  justify-content: var(--container-justify-content, var(--content-horizontal-alignment, center));
+  align-items: var(--container-align-items, center);
+  outline: none;
+}
+.root__IB9QF:hover, .root__IB9QF.active__lpoVO, .root__IB9QF.button--hover {
+  transition-property: border-left, border-inline-start, border-right, border-inline-end, border-top, border-bottom, border-color, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, background, background-color, box-shadow, padding-left, padding-inline-start, padding-right, padding-inline-end, padding-top, padding-bottom, color, fill, width, height, transform, letter-spacing, line-height, text-decoration-line, text-align, text-transform, text-shadow;
+  transition-duration: 0.4s;
+  transition-timing-function: ease;
+}
+@media (forced-colors: active) {
+  .root__IB9QF:not(:disabled):not(.button--disabled) {
+    outline: 2px solid ButtonText;
+    outline-offset: 0px;
+  }
+  .root__IB9QF:not(:disabled):not(.button--disabled):hover, .root__IB9QF:not(:disabled):not(.button--disabled).active__lpoVO, .root__IB9QF:not(:disabled):not(.button--disabled).button--hover, .root__IB9QF:not(:disabled):not(.button--disabled)[aria-pressed=true], .root__IB9QF:not(:disabled):not(.button--disabled)[aria-selected=true], .root__IB9QF:not(:disabled):not(.button--disabled)[data-preview=selected] {
+    outline: 3px solid Highlight;
+    outline-offset: 1px;
+  }
+  .root__IB9QF:not(:disabled):not(.button--disabled):focus, .root__IB9QF:not(:disabled):not(.button--disabled):focus-visible {
+    outline: 3px solid Highlight;
+    outline-offset: 1px;
+  }
+}
+.root__IB9QF:disabled, .root__IB9QF.button--disabled {
+  cursor: not-allowed;
+}
+
+.root__IB9QF.isMaxContent__lXOal {
+  height: max-content;
+  min-width: max-content;
+}
+.root__IB9QF.isMaxContent__lXOal.isWrapText__4sl7H {
+  min-width: 10px;
+}
+
+.root__IB9QF.isWrapText__4sl7H {
+  white-space: pre-line;
+}
+.root__IB9QF.isWrapText__4sl7H .label__EtLji {
+  white-space: pre-line;
+}
+
+.link__0rDnC {
+  text-decoration: none;
+  box-sizing: border-box;
+  color: black;
+  cursor: pointer;
+}
+.link__0rDnC:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.label__EtLji {
+  text-shadow: var(--text-shadow);
+  text-overflow: var(--label-text-overflow);
+  white-space: var(--label-white-space);
+  min-width: 1.8em;
+  max-width: 100%;
+  transition: inherit;
+  direction: var(--direction);
+}
+
+.icon__ZzsS5 {
+  min-width: 1px;
+  transition: inherit;
+  flex-shrink: 0;
+  width: var(--size);
+  height: var(--size);
+  order: var(--icon-order, 0);
+  fill: var(--icon-color);
+  transform: rotate(var(--icon-rotation));
+}
+
+.root__IB9QF:hover .label__EtLji,
+.root__IB9QF[data-preview=hover] .label__EtLji,
+.root__IB9QF.button--hover .label__EtLji,
+.label__EtLji.button__label--hover {
+  text-shadow: var(--hover-text-outline, var(--text-outline)), var(--hover-text-shadow, var(--text-shadow));
+  direction: var(--hover-direction, var(--direction));
+}
+
+.root__IB9QF:hover .icon__ZzsS5,
+.root__IB9QF[data-preview=hover] .icon__ZzsS5,
+.root__IB9QF.button--hover .icon__ZzsS5 {
+  width: var(--hover-icon-size, var(--size));
+  height: var(--hover-icon-size, var(--size));
+  fill: var(--hover-icon-color, var(--icon-color));
+  transform: rotate(var(--hover-icon-rotation, var(--icon-rotation)));
+}
+
+.root__IB9QF:disabled .label__EtLji,
+.root__IB9QF [data-preview=disabled] .label__EtLji,
+.root__IB9QF.button--disabled .label__EtLji,
+.label__EtLji.button__label--disabled {
+  text-shadow: var(--disabled-text-outline, var(--text-outline)), var(--disabled-text-shadow, var(--text-shadow));
+  direction: var(--disabled-direction, var(--direction));
+}
+
+.root__IB9QF:disabled .icon__ZzsS5,
+.root__IB9QF [data-preview=disabled] .icon__ZzsS5,
+.root__IB9QF.button--disabled .icon__ZzsS5 {
+  width: var(--disabled-icon-size, var(--size));
+  height: var(--disabled-icon-size, var(--size));
+  fill: var(--disabled-icon-color, var(--icon-color));
+  transform: rotate(var(--disabled-icon-rotation, var(--icon-rotation)));
+}
+
+.button__i8gkO {
+  min-width: min-content !important;
+}
+.presetWrapper__J1yzj {
+  display: contents;
+}
+.animatedIcon__3o5ii {
+  --size: 16px;
+  --fill: #000000;
+  --rotation: 0deg;
+}
+.animatedIcon__3o5ii {
+  display: block;
+  width: inherit;
+  height: inherit;
+  width: var(--size);
+  height: var(--size);
+}
+.animatedIcon__3o5ii svg {
+  width: var(--size);
+  height: var(--size);
+  display: block;
+  fill: var(--fill);
+  transform: rotate(var(--rotation));
+}

package/dist/site/components/Lottie/hooks/useLottie.d.ts

@@ -0,0 +1,19 @@
+import { LottieRefCurrentProps } from 'lottie-react';
+import { UseLottieParams } from '../types';
+export declare function useLottie({ animationUrl, autoplay, speed, }: UseLottieParams): {
+    containerRef: import('react').RefObject<HTMLDivElement>;
+    lottieRef: import('react').MutableRefObject<LottieRefCurrentProps | null>;
+    animationData: unknown;
+    isPlaying: boolean;
+    isPlayButtonHidden: boolean;
+    effectiveAutoplay: boolean;
+    renderer: "canvas" | "svg";
+    rendererSettings: {
+        clearCanvas: boolean;
+        dpr: number;
+    } | undefined;
+    handleAnimationLoaded: () => void;
+    handleComplete: () => void;
+    handlePause: () => void;
+    handleResume: () => void;
+};

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

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as Lottie } from './component';

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

@@ -0,0 +1,6 @@
+'use client';
+
+import Lottie from './component.js';
+
+export { Lottie };
+export default Lottie;

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

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;

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

@@ -0,0 +1,192 @@
+import { b as DISPLAY_GROUPS, E as ELEMENTS, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { g as getSelector } from "../chunks/manifest.js";
+import { e as speedConstraints, f as playButtonDefaults, D as DisplayNames, r as rootDataDefaults, c as showButtonOnHoverDefaults, g as borderDefaultValue, i as initialSize, s as semanticSelectors } from "../chunks/constants24.js";
+import { m as manifestFocusable, a as manifestMouseHover, b as manifestClickable } from "../chunks/manifestSdkMixins.js";
+const manifest = {
+  id: "13165477-8205-4050-b078-424a1479159e",
+  type: "wixEditorElements.Lottie",
+  description: "A component that displays and plays Lottie animations (JSON-based vector animations) with configurable playback, looping, speed, and optional on-stage play/pause control.",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: initialSize.width
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: initialSize.height
+      },
+      preserveAspectRatio: true
+    }
+  },
+  editorElement: {
+    selector: getSelector(semanticSelectors.root),
+    displayName: DisplayNames.root.elementDisplayName,
+    archetype: Archetype.AnimatedGraphic,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.aspectRatio,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.none,
+      disableStretching: false,
+      disablePositioning: false
+    },
+    cssProperties: {
+      background: {},
+      borderInlineStart: { defaultValue: borderDefaultValue },
+      borderInlineEnd: { defaultValue: borderDefaultValue },
+      borderTop: { defaultValue: borderDefaultValue },
+      borderBottom: { defaultValue: borderDefaultValue },
+      borderStartStartRadius: {},
+      borderStartEndRadius: {},
+      borderEndStartRadius: {},
+      borderEndEndRadius: {},
+      boxShadow: {},
+      paddingTop: {},
+      paddingBottom: {},
+      paddingInlineStart: {},
+      paddingInlineEnd: {}
+    },
+    data: {
+      animationUrl: {
+        dataType: DATA.DATA_TYPE.webUrl,
+        displayName: DisplayNames.root.data.animationUrl
+      },
+      loop: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.loop,
+        defaultValue: rootDataDefaults.loop
+      },
+      speed: {
+        dataType: DATA.DATA_TYPE.number,
+        displayName: DisplayNames.root.data.speed,
+        defaultValue: rootDataDefaults.speed,
+        [DATA.DATA_TYPE.number]: speedConstraints
+      },
+      showButtonOnHover: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: DisplayNames.root.data.showButtonOnHover,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            {
+              value: showButtonOnHoverDefaults.always.value,
+              displayName: showButtonOnHoverDefaults.always.displayName
+            },
+            {
+              value: showButtonOnHoverDefaults.onHover.value,
+              displayName: showButtonOnHoverDefaults.onHover.displayName
+            }
+          ]
+        },
+        defaultValue: rootDataDefaults.showButtonOnHover
+      },
+      allowClickToStop: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.allowClickToStop,
+        defaultValue: rootDataDefaults.allowClickToStop
+      },
+      decorative: {
+        dataType: DATA.DATA_TYPE.booleanValue
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [
+            DATA.A11Y_ATTRIBUTES.ariaLabel,
+            DATA.A11Y_ATTRIBUTES.ariaHidden
+          ]
+        }
+      },
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      ...manifestClickable(),
+      ...manifestMouseHover(),
+      ...manifestFocusable()
+    },
+    elements: {
+      playButton: {
+        elementType: ELEMENTS.ELEMENT_TYPE.refElement,
+        refElement: {
+          selector: getSelector(semanticSelectors.playButton),
+          type: "wixEditorElements.Button",
+          displayName: DisplayNames.playButton.elementDisplayName,
+          behaviors: {
+            selectable: false
+          },
+          displayFilters: {
+            elements: {
+              hide: ["label"]
+            },
+            data: {
+              hide: ["a11y", "link", "label", "iconCollapsed", "direction"]
+            },
+            cssProperties: {
+              hide: ["rowGap", "columnGap"]
+            },
+            cssCustomProperties: {
+              hide: ["icon-position", "content-horizontal-alignment"]
+            }
+          },
+          data: {
+            a11y: { disableEditing: true },
+            link: { disableEditing: true },
+            label: { disableEditing: true },
+            iconCollapsed: { disableEditing: true },
+            direction: { disableEditing: true }
+          },
+          cssProperties: {
+            insetInlineEnd: { defaultValue: playButtonDefaults.insetInlineEnd },
+            insetBlockEnd: { defaultValue: playButtonDefaults.insetBlockEnd },
+            rowGap: { disableEditing: true },
+            columnGap: { disableEditing: true }
+          },
+          cssCustomProperties: {
+            "icon-position": { disableEditing: true },
+            "content-horizontal-alignment": { disableEditing: true }
+          }
+        }
+      }
+    },
+    displayFilters: {
+      data: {
+        hide: ["decorative"]
+      }
+    },
+    displayGroups: {
+      settingsData: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: [
+            "animationUrl",
+            "speed",
+            "loop",
+            "showButtonOnHover",
+            "allowClickToStop"
+          ]
+        }
+      }
+    },
+    helpArticle: {
+      kbId: "c5e47f78-195d-4c4f-823c-db6f57c65874"
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/Lottie/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/Lottie",
+      serviceDependencies: ["@wix/viewer-service-environment"],
+      dependencies: {
+        serviceDependencies: ["@wix/viewer-service-environment"],
+        componentDependencies: [
+          "@wix/editor-react-components/Button",
+          "@wix/editor-react-components/AnimatedIcon"
+        ]
+      }
+    },
+    editor: {
+      componentUrl: "./site/components/Lottie/component.preview.tsx"
+    }
+  }
+};
+export {
+  manifest as default
+};

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

@@ -0,0 +1,37 @@
+import { A11y, Direction } from '@wix/editor-react-types';
+import { LottieComponentProps } from 'lottie-react';
+import { RendererType, CanvasRendererConfig, SVGRendererConfig } from 'lottie-web';
+import { default as React } from 'react';
+import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+export interface LottieProps extends SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps {
+    /** DOM `id` on the root element. */
+    id?: string;
+    /** Appended to the root. Use this for visual overrides on the wrapper (border, padding, background). */
+    className?: string;
+    /** Sets the `dir` attribute on the root. Defaults to the language direction reported by the environment service. */
+    direction?: Direction;
+    /** ARIA bag. Supports `ariaLabel` and `ariaHidden`. */
+    a11y?: A11y;
+    /** Public URL to a Lottie JSON file. The component fetches it at render time. CORS-safe URLs only. */
+    animationUrl?: string;
+    /** When `false` the animation plays once and freezes on the last frame. Default `true`. */
+    loop?: boolean;
+    /** When `false` the animation does not start automatically. Default `true`. Suppressed under `prefers-reduced-motion: reduce`. */
+    autoplay?: boolean;
+    /** Playback rate multiplier. Manifest constrains to `[0.5, 5]`. Default `1`. */
+    speed?: number;
+    /** `'always'` keeps the play/pause button visible; `'onHover'` fades it in on hover/focus. Default `'always'`. */
+    showButtonOnHover?: string;
+    /** Clicking the canvas pauses/resumes the animation. Default `true`. */
+    allowClickToStop?: boolean;
+}
+export interface UseLottieParams {
+    animationUrl?: string;
+    autoplay?: boolean;
+    speed?: number;
+}
+export type LottiePlayerAnyRendererProps = Omit<LottieComponentProps, 'renderer' | 'rendererSettings'> & {
+    renderer?: RendererType;
+    rendererSettings?: SVGRendererConfig | CanvasRendererConfig;
+};
+export type TypedLottiePlayerType = React.ComponentType<LottiePlayerAnyRendererProps>;

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

@@ -0,0 +1,141 @@
+import { default as React, PropsWithChildren } from 'react';
+import { MenuOrientationType, MenuAnimationNameType, DropdownAnimationNameType, Translations } from './constants';
+import { MenuItemProps as MenuItemData, ActiveAnchor } from '../../../types/vendored/editor-elements-definitions';
+import { IMenuItemSDKAction, IMenuItemsPropsSDKActions } from '../../../common/sdk/props-factories/menuItemsPropsSDKFactory';
+import { A11y, Direction } from '@wix/editor-react-types';
+import { ButtonProps } from '../Button/Button';
+import { SdkFunctionMouseHoverProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+import { AnimationState } from './components/MenuContent/MenuItem/useAnimationState';
+export type MenuItemType = MenuItemData & {
+    container?: React.ReactNode;
+    isContainerItem?: boolean;
+    forceOpen?: boolean;
+};
+export type HamburgerMenuProps = {
+    isOpen?: boolean;
+    content?: React.ReactNode;
+    headerContent?: React.ReactNode;
+    elementProps?: {
+        hamburgerCloseButton?: ButtonProps;
+    };
+};
+export type MenuProps = SdkFunctionMouseHoverProps & {
+    /** DOM `id` on the root `.menu`. */
+    id: string;
+    /** Appended to the root `.menu`. Use this for CSS-variable and per-element overrides. */
+    className: string;
+    /** Fires when a menu item is clicked. */
+    onItemClick?: IMenuItemSDKAction;
+    /** Fires on item double-click. */
+    onItemDblClick?: IMenuItemSDKAction;
+    /** Fires on item `mouseenter`. */
+    onItemMouseIn?: IMenuItemSDKAction;
+    /** Fires on item `mouseleave`. */
+    onItemMouseOut?: IMenuItemSDKAction;
+    /** Hover/selection animation defined in `animations.module.scss`. React-only (no manifest entry). */
+    animationName: 'none' | 'calm' | 'underline' | 'bullet' | 'circle' | 'wash' | 'wave' | undefined;
+    /** 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?: {
+            items?: Array<MenuItemType>;
+            direction?: Direction;
+            submenuDirection?: Direction;
+            a11y?: A11y;
+        };
+        hamburgerMenu?: HamburgerMenuProps;
+        hamburgerOpenButton?: ButtonProps;
+    };
+    wix?: {
+        presetsWrapperProps?: Record<string, any>;
+    };
+};
+export type NavbarProps = MenuProps['elementProps']['navbar'] & {
+    id: string;
+    className?: string;
+    onItemClick?: IMenuItemSDKAction;
+    onItemDblClick?: IMenuItemSDKAction;
+    onItemMouseIn?: IMenuItemSDKAction;
+    onItemMouseOut?: IMenuItemSDKAction;
+};
+export type DropdownProps = (HorizontalDropdownProps | VerticalDropdownProps) & {
+    item: MenuItemType;
+    isOpen?: boolean;
+    menuOrientation: MenuOrientationType;
+};
+export type MenuStates = {
+    hamburgerMenuOpen?: boolean;
+    dropdownOpen?: boolean;
+};
+export type { MenuItemData, ActiveAnchor };
+export type MenuItemProps = MenuItemData;
+export type MenuItemWithChildren = MenuItemData & {
+    children?: React.ReactNode;
+};
+export type MenuPreviewStateMap = {
+    item?: string;
+    'scroll-button'?: string;
+    'dropdown-menu-item'?: string;
+    'dropdown-menu-sub-item'?: string;
+};
+export type HorizontalDropdownProps = {
+    onEscKeyDown: () => void;
+    item: MenuItemProps;
+    currentItem?: MenuItemProps;
+    dropdownAnimationState: AnimationState<DropdownAnimationNameType>;
+    direction?: Direction;
+    onItemClick?: IMenuItemSDKAction;
+    onItemMouseIn?: IMenuItemSDKAction;
+    onItemMouseOut?: IMenuItemSDKAction;
+    onItemDblClick?: IMenuItemSDKAction;
+};
+export type VerticalDropdownProps = {
+    isOpen: boolean;
+    onEscKeyDown: () => void;
+    item: MenuItemProps & {
+        forceOpen?: boolean;
+    };
+    currentItem?: MenuItemProps;
+    partToPreviewStateMap?: MenuPreviewStateMap;
+    dropdownAnimationState: AnimationState<DropdownAnimationNameType>;
+    direction?: Direction;
+    onItemClick?: IMenuItemSDKAction;
+    onItemMouseIn?: IMenuItemSDKAction;
+    onItemMouseOut?: IMenuItemSDKAction;
+    onItemDblClick?: IMenuItemSDKAction;
+};
+export type IMenuContentProps = Partial<IMenuItemsPropsSDKActions> & {
+    id?: string;
+    className?: string;
+    navbarClassName?: string;
+    directionClassName?: string;
+    direction?: Direction;
+    submenuDirection?: Direction;
+    submenuToggleIdPrefix?: string;
+};
+export type IMenuItemProps = Partial<IMenuItemsPropsSDKActions> & {
+    item: PropsWithChildren<MenuItemData & {
+        forceOpen?: boolean;
+        isContainerItem?: boolean;
+    }>;
+    partToPreviewStateMap?: MenuPreviewStateMap;
+    focusOnMenuItem?: (element: HTMLElement) => void;
+    currentItem?: MenuItemProps;
+    getAnimationPackage: () => MenuAnimationNameType;
+    submenuDirection?: Direction;
+    submenuToggleIdPrefix?: string;
+} & Translations;
+export type ScrollControlsProps = {
+    isScrollForwardButtonShown: boolean;
+    isScrollBackwardButtonShown: boolean;
+    scrollPageForward: () => void;
+    scrollPageToBackward: () => void;
+    previewState?: string;
+};
+export type ScrollButtonProps = {
+    className?: string;
+    onClick: (ev: React.MouseEvent) => void;
+    direction: 'backward' | 'forward';
+    isHidden: boolean;
+    previewState?: string;
+    dataPart?: string;
+};