@wix/editor-react-components 1.2349.0 → 1.2350.0

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

@@ -1,88 +1,423 @@
-const semanticSelectors = {
-  root: "lottie",
-  playButton: "playButton"
+import { useRef, useState, useEffect } from "react";
+const DISABLED_ANIMATION_NAME = "none";
+const AnimationPhase = {
+  Enter: "enter",
+  EnterActive: "enterActive",
+  EnterDone: "enterDone",
+  Exit: "exit",
+  ExitActive: "exitActive",
+  ExitDone: "exitDone"
 };
-const ariaLabels = {
-  playButton: "Play animation",
-  pauseButton: "Pause animation"
+const useAnimationState = (animationConfigMap, initialAnimationState) => {
+  const afterAnimationInitRef = useRef(null);
+  const afterAnimationActiveRef = useRef(null);
+  const [animationState, setAnimationState] = useState(initialAnimationState);
+  const abortAnimationCallbacks = () => {
+    afterAnimationInitRef.current = null;
+    afterAnimationActiveRef.current = null;
+  };
+  const initEnterAnimation = (animationName, onAnimationDone) => {
+    abortAnimationCallbacks();
+    if (animationName === DISABLED_ANIMATION_NAME) {
+      return onAnimationDone == null ? void 0 : onAnimationDone();
+    }
+    setAnimationState({
+      name: animationName,
+      phase: AnimationPhase.Enter
+    });
+    afterAnimationInitRef.current = () => {
+      setAnimationState({
+        name: animationName,
+        phase: AnimationPhase.EnterActive
+      });
+    };
+    afterAnimationActiveRef.current = () => {
+      setAnimationState({
+        name: animationName,
+        phase: AnimationPhase.EnterDone
+      });
+      onAnimationDone == null ? void 0 : onAnimationDone();
+    };
+  };
+  const skipToEnterDone = (animationName) => {
+    abortAnimationCallbacks();
+    if (animationName === DISABLED_ANIMATION_NAME) {
+      return;
+    }
+    setAnimationState({
+      name: animationName,
+      phase: AnimationPhase.EnterDone
+    });
+  };
+  const skipToExitDone = (animationName) => {
+    abortAnimationCallbacks();
+    if (animationName === DISABLED_ANIMATION_NAME) {
+      return;
+    }
+    setAnimationState({
+      name: animationName,
+      phase: AnimationPhase.ExitDone
+    });
+  };
+  const initExitAnimation = (animationName, onAnimationDone) => {
+    abortAnimationCallbacks();
+    if (animationName === DISABLED_ANIMATION_NAME) {
+      return onAnimationDone == null ? void 0 : onAnimationDone();
+    }
+    setAnimationState({
+      name: animationName,
+      phase: AnimationPhase.Exit
+    });
+    afterAnimationInitRef.current = () => {
+      setAnimationState({
+        name: animationName,
+        phase: AnimationPhase.ExitActive
+      });
+    };
+    afterAnimationActiveRef.current = () => {
+      setAnimationState({
+        name: animationName,
+        phase: AnimationPhase.ExitDone
+      });
+      onAnimationDone == null ? void 0 : onAnimationDone();
+    };
+  };
+  useEffect(() => {
+    const { name } = animationState;
+    const { duration: animationDuration } = animationConfigMap[name];
+    const isInitPhase = animationState.phase === AnimationPhase.Enter || animationState.phase === AnimationPhase.Exit;
+    const isActivePhase = animationState.phase === AnimationPhase.EnterActive || animationState.phase === AnimationPhase.ExitActive;
+    if (isInitPhase) {
+      window.requestAnimationFrame(() => {
+        var _a;
+        (_a = afterAnimationInitRef.current) == null ? void 0 : _a.call(afterAnimationInitRef);
+        afterAnimationInitRef.current = null;
+      });
+    } else if (isActivePhase) {
+      setTimeout(() => {
+        var _a;
+        (_a = afterAnimationActiveRef.current) == null ? void 0 : _a.call(afterAnimationActiveRef);
+        afterAnimationActiveRef.current = null;
+      }, animationDuration);
+    }
+  }, [animationState.phase]);
+  return {
+    animationState,
+    initEnterAnimation,
+    initExitAnimation,
+    skipToEnterDone,
+    skipToExitDone
+  };
+};
+const MenuOrientation = {
+  Horizontal: "horizontal",
+  Vertical: "vertical"
+};
+const VerticalDropdownDisplay = {
+  AlwaysOpen: "alwaysOpen"
+};
+const MenuAnimationName = {
+  None: DISABLED_ANIMATION_NAME,
+  Calm: "calm",
+  Underline: "underline",
+  Wash: "wash",
+  Bullet: "bullet",
+  Wave: "wave",
+  Bounce: "bounce",
+  Tint: "tint",
+  TextWash: "textWash",
+  Wobble: "wobble",
+  Brackets: "brackets",
+  Float: "float",
+  Shape: "shape",
+  Expand: "expand",
+  Circle: "circle",
+  Shadow: "shadow",
+  LineRise: "lineRise",
+  Overline: "overline",
+  CenterLine: "centerLine",
+  Skew: "skew",
+  Point: "point",
+  Blur: "blur"
+};
+const DropdownAnimationName = {
+  None: DISABLED_ANIMATION_NAME,
+  RevealFromTop: "revealFromTop",
+  FadeIn: "fadeIn"
+};
+const HamburgerMenuAnimationName = {
+  None: DISABLED_ANIMATION_NAME,
+  RevealFromRight: "revealFromRight",
+  FadeIn: "fadeIn"
 };
 const DisplayNames = {
   root: {
-    elementDisplayName: "Lottie",
-    data: {
-      animationUrl: "Animation URL",
-      loop: "Plays in a loop",
-      speed: "Speed",
-      showButtonOnHover: "Show play/pause button",
-      allowClickToStop: "Click to stop animation"
+    elementDisplayName: "Menu",
+    actions: {
+      manageMenu: "Manage Menu",
+      design: "Design",
+      settings: "Settings"
+    },
+    customActions: {
+      format: {
+        displayName: "Change Format"
+      },
+      animatedIcon: {
+        displayName: "Customize Icon"
+      }
+    },
+    presets: {
+      horizontalScrollNavbar: "Horizontal Scroll Navigation Bar",
+      horizontalHugNavbar: "Horizontal Hug Navigation Bar",
+      verticalNavbar: "Vertical Navigation Bar",
+      hamburgerMenu: "Hamburger menu"
+    },
+    states: {
+      hamburgerDialog: "Hamburger menu",
+      dropdown: "Dropdown"
+    }
+  },
+  navbar: {
+    elementDisplayName: "Menu bar",
+    displayGroups: {
+      dividerBorderGroup: "Dividers"
+    },
+    cssCustomProperties: {
+      "vertical-dropdown-display": "Items display",
+      "items-width": "Item width",
+      "container-align": "Item alignment",
+      "menu-items-row-gap": "Space between menu items",
+      "menu-items-column-gap": "Space between menu items"
+    },
+    actions: {
+      manageMenu: "Manage Menu"
+    },
+    options: {
+      alwaysOpen: "Open",
+      expandCollapse: "Closed",
+      fitToText: "Fit to text",
+      fillMenu: "Fill menu"
+    }
+  },
+  item: {
+    elementDisplayName: "Menu items",
+    cssProperties: {
+      justifyContent: "Text alignment",
+      background: "Background",
+      columnGap: "Space between menu items and icons",
+      "item-icon-size": "Size"
+    },
+    displayGroups: {
+      iconGroup: "Icons"
+    },
+    states: {
+      hover: "Hover",
+      selected: "Selected"
+    }
+  },
+  dropdown: {
+    elementDisplayName: "Dropdowns",
+    cssCustomProperties: {
+      anchor: "Dropdown width",
+      align: "Dropdown position",
+      "items-width": "Item width",
+      "columns-number": "Number of columns",
+      "space-above": "Space above dropdowns",
+      "horizontal-margin": "Dropdown margin",
+      "item-position": "Dropdown box position"
+    },
+    options: {
+      menuItem: "Fit to items",
+      menuStretched: "Fit to menu",
+      screen: "Stretch to page",
+      start: "Start",
+      center: "Middle",
+      end: "End",
+      fitToText: "Fit to text",
+      fillDropdown: "Fill dropdowns",
+      afterItems: "After items",
+      beforeItems: "Before items",
+      aboveItems: "Above items",
+      belowItems: "Below items"
+    },
+    displayGroups: {
+      gapGroup: "Space between items"
+    }
+  },
+  dropdownItem: {
+    elementDisplayName: "Dropdown items"
+  },
+  dropdownSubItem: {
+    elementDisplayName: "Dropdown sub-items"
+  },
+  scrollButton: {
+    elementDisplayName: "Scroll button",
+    cssProperties: {
+      background: "Background"
+    },
+    cssCustomProperties: {
+      "scroll-button-icon-size": "Size"
+    },
+    displayGroups: {
+      scrollButtonGroup: "Icon"
     }
   },
-  playButton: {
-    elementDisplayName: "Play button"
+  hamburgerMenu: {
+    elementDisplayName: "Hamburger menu",
+    cssCustomProperties: {
+      "hamburger-wrapper-width": "Width",
+      "wrapper-position": "Position",
+      "menu-position": "Menu Position",
+      "close-button-position": "Close button position",
+      "overlay-background": "Overlay Background"
+    },
+    options: {
+      third: "Third of page",
+      twoThirds: "Two thirds of page",
+      half: "Half page",
+      full: "Full page",
+      start: "Start",
+      middle: "Middle",
+      end: "End",
+      top: "Top",
+      bottom: "Bottom"
+    }
+  },
+  hamburgerOpenButton: {
+    elementDisplayName: "Hamburger button"
+  },
+  hamburgerCloseButton: {
+    elementDisplayName: "Close Button"
   }
 };
-const rootDataDefaults = {
-  loop: true,
-  speed: 1,
-  showButtonOnHover: "always",
-  allowClickToStop: true
+const selectors = {
+  menu: "menu",
+  navbar: "navbar",
+  item: "item",
+  dropdown: "dropdown",
+  dropdownItem: "dropdown-item",
+  dropdownSubItem: "dropdown-sub-item",
+  scrollButton: "scroll-button",
+  hamburgerMenu: "hamburger-menu",
+  hamburgerMenuContent: "hamburger-menu-content",
+  hamburgerMenuHeaderContent: "hamburger-menu-header-content",
+  hamburgerMenuOpenButton: "hamburger-open-button",
+  hamburgerMenuCloseButton: "hamburger-close-button"
 };
-const showButtonOnHoverDefaults = {
-  always: {
-    value: "always",
-    displayName: "Always"
+const elementKeys = {
+  navbar: "navbar",
+  hamburgerMenu: "hamburgerMenu",
+  hamburgerOpenButton: "hamburgerOpenButton",
+  hamburgerCloseButton: "hamburgerCloseButton",
+  item: "item",
+  subItem: "subItem",
+  scrollButton: "scrollButton",
+  dropdown: "dropdown"
+};
+const presets = {
+  horizontalScrollNavbar: "horizontalScrollNavbar",
+  horizontalHugNavbar: "horizontalHugNavbar",
+  verticalNavbar: "verticalNavbar",
+  hamburgerMenu: "hamburgerMenu"
+};
+const states = {
+  dropdown: "dropdown",
+  hamburgerDialog: "hamburgerDialog",
+  hamburgerDialogDropdown: "hamburgerDialogDropdown"
+};
+const DesignStates = {
+  item: {
+    hover: {
+      displayName: DisplayNames.item.states.hover,
+      className: "menu__item--hover"
+    },
+    selected: {
+      displayName: DisplayNames.item.states.selected,
+      className: "menu__item--selected"
+    }
   },
-  onHover: {
-    value: "onHover",
-    displayName: "On hover"
+  dropdownItem: {
+    hover: {
+      displayName: "Hover",
+      className: "menu__dropdown-item--hover"
+    },
+    selected: {
+      displayName: "Selected",
+      className: "menu__dropdown-item--selected"
+    }
+  },
+  dropdownSubItem: {
+    hover: {
+      displayName: "Hover",
+      className: "menu__dropdown-sub-item--hover"
+    },
+    selected: {
+      displayName: "Selected",
+      className: "menu__dropdown-sub-item--selected"
+    }
+  },
+  scrollButton: {
+    hover: {
+      displayName: "Hover",
+      className: "menu__scroll-button--hover"
+    }
   }
 };
-const displayPropertyToObserve = ["display"];
-const testIds = {
-  animationClickWrapper: "lottie-animation-click-wrapper"
-};
-const borderDefaultValue = "0px none rgba(0, 0, 0, 1)";
-const playButtonDefaults = {
-  insetInlineEnd: "5px",
-  insetBlockEnd: "5px"
-};
-const initialSize = {
-  width: 280,
-  height: 280
-};
-const speedConstraints = {
-  min: "0.5",
-  max: "5.0",
-  multiplier: "0.5"
-};
-const playIconSvg = {
-  uri: "",
-  viewBox: "0 0 24 24",
-  contentBox: "0 0 24 24",
-  colors: {},
-  contentType: "shape",
-  svgContent: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 4.00142V19.0034C7 19.7884 7.864 20.2674 8.53 19.8514L20.537 12.3504C21.164 11.9584 21.164 11.0464 20.537 10.6544L8.53 3.15342C7.864 2.73742 7 3.21642 7 4.00142Z"/></svg>'
-};
-const pauseIconSvg = {
-  uri: "",
-  viewBox: "0 0 24 24",
-  contentBox: "0 0 24 24",
-  colors: {},
-  contentType: "shape",
-  svgContent: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="5" y="3" width="5" height="17" rx="1"/><rect x="14" y="3" width="5" height="17" rx="1"/></svg>'
+const DropdownAppliedStyleProperties = {
+  anchor: "--wix-menu-dropdown-anchor"
+};
+const DropdownAnchorPositions = {
+  menuItem: "0",
+  menuStretched: "1",
+  screen: "2"
+};
+const ARIA_LABEL_NAMESPACE = "ariaLabels";
+const translationsKeys = {
+  menuNavAriaLabel: "dropDownMenu_AriaLabel_TopLevel_SiteNavigation",
+  dropdownButtonAriaLabel: "menu_dropdown_chevron_button_aria_label",
+  hamburgerOpenButtonAriaLabel: "menu_hamburger_open_button_aria_label",
+  hamburgerCloseButtonAriaLabel: "menu_hamburger_close_button_aria_label"
+};
+const defaultTranslations = {
+  menuNavAriaLabel: "Site",
+  dropdownButtonAriaLabel: "More pages",
+  hamburgerOpenButtonAriaLabel: "Menu",
+  hamburgerCloseButtonAriaLabel: "Close Menu"
+};
+const MenuParts = {
+  Navbar: "navbar",
+  DropdownContainer: "dropdown-container",
+  DropdownButton: "dropdown-button",
+  DropdownIcon: "dropdown-icon",
+  Label: "label",
+  DropdownItem: "dropdown-item",
+  DropdownItemLabel: "dropdown-item-label",
+  DropdownSubItem: "dropdown-subitem",
+  DropdownSubItemLabel: "dropdown-subitem-label",
+  MenuItem: "menu-item",
+  MenuItemContent: "menu-item-content",
+  MenuItemLink: "menu-item-link",
+  ScrollBackwardButton: "scroll-backward-button",
+  ScrollForwardButton: "scroll-forward-button"
 };
 export {
-  DisplayNames as D,
-  ariaLabels as a,
-  playIconSvg as b,
-  showButtonOnHoverDefaults as c,
-  displayPropertyToObserve as d,
-  speedConstraints as e,
-  playButtonDefaults as f,
-  borderDefaultValue as g,
-  initialSize as i,
-  pauseIconSvg as p,
-  rootDataDefaults as r,
-  semanticSelectors as s,
-  testIds as t
+  AnimationPhase as A,
+  DropdownAnimationName as D,
+  HamburgerMenuAnimationName as H,
+  MenuAnimationName as M,
+  VerticalDropdownDisplay as V,
+  MenuOrientation as a,
+  MenuParts as b,
+  ARIA_LABEL_NAMESPACE as c,
+  defaultTranslations as d,
+  DesignStates as e,
+  DisplayNames as f,
+  DropdownAnchorPositions as g,
+  DropdownAppliedStyleProperties as h,
+  elementKeys as i,
+  states as j,
+  presets as p,
+  selectors as s,
+  translationsKeys as t,
+  useAnimationState as u
 };

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

@@ -1,23 +1,88 @@
+const semanticSelectors = {
+  root: "lottie",
+  playButton: "playButton"
+};
+const ariaLabels = {
+  playButton: "Play animation",
+  pauseButton: "Pause animation"
+};
 const DisplayNames = {
   root: {
-    elementDisplayName: "Logo",
-    actions: {
-      settings: "Settings"
-    },
-    customActions: {
-      customizeLogo: "Customize Logo"
-    },
+    elementDisplayName: "Lottie",
     data: {
-      image: {
-        displayName: "Logo Image"
-      }
+      animationUrl: "Animation URL",
+      loop: "Plays in a loop",
+      speed: "Speed",
+      showButtonOnHover: "Show play/pause button",
+      allowClickToStop: "Click to stop animation"
     }
+  },
+  playButton: {
+    elementDisplayName: "Play button"
+  }
+};
+const rootDataDefaults = {
+  loop: true,
+  speed: 1,
+  showButtonOnHover: "always",
+  allowClickToStop: true
+};
+const showButtonOnHoverDefaults = {
+  always: {
+    value: "always",
+    displayName: "Always"
+  },
+  onHover: {
+    value: "onHover",
+    displayName: "On hover"
   }
 };
-const defaultLogoUrl = "https://static.parastorage.com/services/santa-resources/dist/editor/addPanelData/sections/logo/logoDefault.v2.png";
-const DEFAULT_LOGO_SIZE = 80;
+const displayPropertyToObserve = ["display"];
+const testIds = {
+  animationClickWrapper: "lottie-animation-click-wrapper"
+};
+const borderDefaultValue = "0px none rgba(0, 0, 0, 1)";
+const playButtonDefaults = {
+  insetInlineEnd: "5px",
+  insetBlockEnd: "5px"
+};
+const initialSize = {
+  width: 280,
+  height: 280
+};
+const speedConstraints = {
+  min: "0.5",
+  max: "5.0",
+  multiplier: "0.5"
+};
+const playIconSvg = {
+  uri: "",
+  viewBox: "0 0 24 24",
+  contentBox: "0 0 24 24",
+  colors: {},
+  contentType: "shape",
+  svgContent: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 4.00142V19.0034C7 19.7884 7.864 20.2674 8.53 19.8514L20.537 12.3504C21.164 11.9584 21.164 11.0464 20.537 10.6544L8.53 3.15342C7.864 2.73742 7 3.21642 7 4.00142Z"/></svg>'
+};
+const pauseIconSvg = {
+  uri: "",
+  viewBox: "0 0 24 24",
+  contentBox: "0 0 24 24",
+  colors: {},
+  contentType: "shape",
+  svgContent: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="5" y="3" width="5" height="17" rx="1"/><rect x="14" y="3" width="5" height="17" rx="1"/></svg>'
+};
 export {
-  DEFAULT_LOGO_SIZE as D,
-  DisplayNames as a,
-  defaultLogoUrl as d
+  DisplayNames as D,
+  ariaLabels as a,
+  playIconSvg as b,
+  showButtonOnHoverDefaults as c,
+  displayPropertyToObserve as d,
+  speedConstraints as e,
+  playButtonDefaults as f,
+  borderDefaultValue as g,
+  initialSize as i,
+  pauseIconSvg as p,
+  rootDataDefaults as r,
+  semanticSelectors as s,
+  testIds as t
 };

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

@@ -1,54 +1,23 @@
-const presets = {
-  horizontal: "horizontal",
-  vertical: "vertical"
-};
 const DisplayNames = {
   root: {
-    elementDisplayName: "Social Bar",
-    presets: {
-      horizontal: "Horizontal",
-      vertical: "Vertical"
-    },
-    cssCustomProperties: {
-      "item-size": "Size",
-      "row-gap": "Vertical space between icons",
-      "column-gap": "Horizontal space between icons",
-      "justify-content": "Alignment"
-    },
-    data: {
-      items: "Social",
-      icon: "Icon",
-      link: "Links to"
-    },
+    elementDisplayName: "Logo",
     actions: {
-      manageItems: "Manage Social Bar"
+      settings: "Settings"
     },
     customActions: {
-      orientation: "Change Orientation"
+      customizeLogo: "Customize Logo"
     },
-    displayGroups: {
-      gapGroup: {
-        displayName: "Space between icons"
-      },
-      iconsGroup: {
-        displayName: "Icons"
+    data: {
+      image: {
+        displayName: "Logo Image"
       }
     }
   }
 };
-const DesignStates = {
-  root: {
-    hover: { displayName: "Hover", className: "link-bar--hover" }
-  }
-};
-const ARIA_LABEL_NAMESPACE = "ariaLabels";
-const ARIA_LABEL_KEY = "LinkBar_AriaLabel_SocialBarContainer";
-const ARIA_LABEL_DEFAULT = "Social Bar";
+const defaultLogoUrl = "https://static.parastorage.com/services/santa-resources/dist/editor/addPanelData/sections/logo/logoDefault.v2.png";
+const DEFAULT_LOGO_SIZE = 80;
 export {
-  ARIA_LABEL_NAMESPACE as A,
-  DesignStates as D,
-  ARIA_LABEL_KEY as a,
-  ARIA_LABEL_DEFAULT as b,
-  DisplayNames as c,
-  presets as p
+  DEFAULT_LOGO_SIZE as D,
+  DisplayNames as a,
+  defaultLogoUrl as d
 };