@wix/editor-react-components 1.2279.0 → 1.2280.0

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

@@ -1,408 +1,22 @@
-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 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 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
-  };
-};
-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: "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"
-    }
-  },
-  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 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 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"
-    }
-  },
-  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"
-    }
+  root: "multi-state-box",
+  stateContainer: "state-container"
+};
+const DISPLAY_NAMES = {
+  component: "Multi-State Box",
+  data: {
+    states: "State",
+    activeStateName: "Active state",
+    stateName: "State name"
   }
 };
-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"
-};
-const defaultTranslations = {
-  menuNavAriaLabel: "Site",
-  dropdownButtonAriaLabel: "More pages"
-};
-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"
+const DESCRIPTIONS = {
+  data: {
+    activeStateName: "To trigger states from CMS or code, use the connect icon to bind this property"
+  }
 };
 export {
-  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
+  DESCRIPTIONS as D,
+  DISPLAY_NAMES as a,
+  selectors as s
 };