@wix/editor-react-components 1.2736.0 → 1.2737.0

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

@@ -1,41 +1,453 @@
-const CONTENT_MAX_LENGTH = 1e5;
-const manifestClasses = {
-  root: "markdown-block"
+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 defaultValues = {
-  theme: "light"
+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) {
+      const frameId = window.requestAnimationFrame(() => {
+        var _a;
+        (_a = afterAnimationInitRef.current) == null ? void 0 : _a.call(afterAnimationInitRef);
+        afterAnimationInitRef.current = null;
+      });
+      return () => window.cancelAnimationFrame(frameId);
+    }
+    if (isActivePhase) {
+      const timeoutId = setTimeout(() => {
+        var _a;
+        (_a = afterAnimationActiveRef.current) == null ? void 0 : _a.call(afterAnimationActiveRef);
+        afterAnimationActiveRef.current = null;
+      }, animationDuration);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [animationState.phase]);
+  return {
+    animationState,
+    initEnterAnimation,
+    initExitAnimation,
+    skipToEnterDone,
+    skipToExitDone
+  };
+};
+const MenuOrientation = {
+  Horizontal: "horizontal",
+  Vertical: "vertical"
+};
+const VerticalDropdownDisplay = {
+  AlwaysOpen: "alwaysOpen"
 };
-const TRANSLATIONS_NAMESPACE = "ariaLabels";
-const TranslationKeys = {
-  scrollerAriaLabel: "markdownBlock_aria_label_content"
+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 DefaultTranslations = {
-  scrollerAriaLabel: "Markdown content"
+const DropdownAnimationName = {
+  None: DISABLED_ANIMATION_NAME,
+  RevealFromTop: "revealFromTop",
+  FadeIn: "fadeIn"
+};
+const HamburgerMenuAnimationName = {
+  None: DISABLED_ANIMATION_NAME,
+  RevealFromRight: "revealFromRight",
+  FadeIn: "fadeIn"
 };
 const DisplayNames = {
   root: {
-    elementDisplayName: "Markdown Block",
-    data: {
-      content: "Content",
-      theme: {
-        displayName: "Theme",
-        options: {
-          light: "Light",
-          dark: "Dark",
-          sepia: "Sepia",
-          prism: "Prism",
-          brand: "Site brand"
-        }
+    elementDisplayName: "Menu",
+    actions: {
+      manageMenu: "Manage Menu",
+      design: "Design",
+      settings: "Settings"
+    },
+    customActions: {
+      format: {
+        displayName: "Change layout"
+      },
+      animatedIcon: {
+        displayName: "Customize Icon"
+      },
+      hamburgerAnimatedIcon: {
+        displayName: "Customize Menu 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 items and chevrons"
+    },
+    cssCustomProperties: {
+      "item-icon-size": "Size",
+      "item-icon-gap": "Space between items and icons"
+    },
+    displayGroups: {
+      iconGroup: "Icons"
+    },
+    states: {
+      hover: "Hover",
+      selected: "Selected"
+    }
+  },
+  itemLabel: {
+    elementDisplayName: "Item's text"
+  },
+  itemIcon: {
+    elementDisplayName: "Item's icon"
+  },
+  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",
+      cornersGroup: "Corner radius"
+    }
+  },
+  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"
+    }
+  },
+  hamburgerMenu: {
+    elementDisplayName: "Hamburger menu",
+    displayGroups: {
+      cornersGroup: "Corner radius"
+    },
+    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 menuBuiltInActions = {
+  elements: "elements"
+};
+const MENU_ANIMATED_ICON_SPEC = "sp.erc.menuAnimatedIcon";
+const selectors = {
+  menu: "menu",
+  navbar: "navbar",
+  item: "item",
+  dropdown: "dropdown",
+  dropdownItem: "dropdown-item",
+  dropdownSubItem: "dropdown-sub-item",
+  scrollButton: "scroll-button",
+  animatedIcon: "animated-icon",
+  itemIcon: "item-icon",
+  itemLabel: "item-label",
+  hamburgerMenu: "hamburger-menu",
+  hamburgerMenuContent: "hamburger-menu-content",
+  hamburgerMenuHeaderContent: "hamburger-menu-header-content",
+  hamburgerMenuOpenButton: "hamburger-open-button",
+  hamburgerMenuCloseButton: "hamburger-close-button"
+};
+const elementKeys = {
+  navbar: "navbar",
+  hamburgerMenu: "hamburgerMenu",
+  hamburgerOpenButton: "hamburgerOpenButton",
+  hamburgerCloseButton: "hamburgerCloseButton",
+  item: "item",
+  subItem: "subItem",
+  scrollButton: "scrollButton",
+  dropdown: "dropdown",
+  animatedIcon: "animatedIcon",
+  itemLabel: "itemLabel"
+};
+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"
+    }
+  },
+  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 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 {
-  CONTENT_MAX_LENGTH as C,
-  DefaultTranslations as D,
-  TranslationKeys as T,
-  TRANSLATIONS_NAMESPACE as a,
-  DisplayNames as b,
-  defaultValues as d,
-  manifestClasses as m
+  AnimationPhase as A,
+  DropdownAnimationName as D,
+  HamburgerMenuAnimationName as H,
+  MenuAnimationName as M,
+  VerticalDropdownDisplay as V,
+  MenuOrientation as a,
+  MenuParts as b,
+  DesignStates as c,
+  defaultTranslations as d,
+  ARIA_LABEL_NAMESPACE as e,
+  DisplayNames as f,
+  DropdownAnchorPositions as g,
+  DropdownAppliedStyleProperties as h,
+  elementKeys as i,
+  MENU_ANIMATED_ICON_SPEC as j,
+  states as k,
+  menuBuiltInActions as m,
+  presets as p,
+  selectors as s,
+  translationsKeys as t,
+  useAnimationState as u
 };

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

@@ -1,93 +1,41 @@
-const semanticSelectors = {
-  root: "lottie",
-  playButton: "playButton"
+const CONTENT_MAX_LENGTH = 1e5;
+const manifestClasses = {
+  root: "markdown-block"
 };
-const ARIA_LABEL_NAMESPACE = "ariaLabels";
+const defaultValues = {
+  theme: "light"
+};
+const TRANSLATIONS_NAMESPACE = "ariaLabels";
 const TranslationKeys = {
-  playButton: "lottie_aria_label_play",
-  pauseButton: "lottie_aria_label_pause"
+  scrollerAriaLabel: "markdownBlock_aria_label_content"
 };
 const DefaultTranslations = {
-  playButton: "Play animation",
-  pauseButton: "Pause animation"
+  scrollerAriaLabel: "Markdown content"
 };
 const DisplayNames = {
   root: {
-    elementDisplayName: "Lottie",
+    elementDisplayName: "Markdown Block",
     data: {
-      animationUrl: "Animation URL",
-      loop: "Plays in a loop",
-      speed: "Speed",
-      showButtonOnHover: "Show play/pause button",
-      allowClickToStop: "Click to stop animation"
+      content: "Content",
+      theme: {
+        displayName: "Theme",
+        options: {
+          light: "Light",
+          dark: "Dark",
+          sepia: "Sepia",
+          prism: "Prism",
+          brand: "Site brand"
+        }
+      }
     }
-  },
-  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 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 {
-  ARIA_LABEL_NAMESPACE as A,
+  CONTENT_MAX_LENGTH as C,
   DefaultTranslations as D,
   TranslationKeys as T,
-  playIconSvg as a,
-  showButtonOnHoverDefaults as b,
-  speedConstraints as c,
-  playButtonDefaults as d,
-  DisplayNames as e,
-  borderDefaultValue as f,
-  initialSize as i,
-  pauseIconSvg as p,
-  rootDataDefaults as r,
-  semanticSelectors as s,
-  testIds as t
+  TRANSLATIONS_NAMESPACE as a,
+  DisplayNames as b,
+  defaultValues as d,
+  manifestClasses as m
 };