@wix/editor-react-components 1.2762.0 → 1.2763.0

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

@@ -1,111 +1,40 @@
+const FULL_PROGRESS = 100;
+const NO_PROGRESS = 0;
 const DisplayNames = {
   root: {
-    elementDisplayName: "Radio Buttons",
-    data: {
-      options: "Options",
-      optionLabel: "Label",
-      optionValue: "Value",
-      optionDisabled: "Disabled",
-      value: "Selected value",
-      firstSelectedByDefault: "Default selection",
-      firstSelectedByDefaultNone: "None",
-      firstSelectedByDefaultFirst: "First Item",
-      label: "Label",
-      tooltip: "Tooltip",
-      required: "Required",
-      readOnly: "Read only",
-      disabled: "Disabled"
-    },
-    cssCustomProperties: {
-      orientation: "Orientation",
-      radiosSpacing: "Space between radio buttons",
-      labelSpacing: "Space between field and field title",
-      radioTextSpacing: "Space between radio button and text",
-      alignment: "Alignment",
-      labelAlignment: "Label alignment"
-    }
-  },
-  radio: {
-    elementDisplayName: "Radio button",
-    cssCustomProperties: {
-      unselectedBackgroundColor: "Unselected background color",
-      unselectedBorderColor: "Unselected border color",
-      selectedBackgroundColor: "Selected background color",
-      selectedBorderColor: "Selected border color",
-      dotColor: "Dot color",
-      size: "Radio button size"
-    }
+    displayName: "Progress Bar"
   },
-  optionLabel: {
-    elementDisplayName: "Option label"
+  label: {
+    displayName: "Label"
   },
-  groupLabel: {
-    elementDisplayName: "Group label"
-  }
-};
-const DesignStates = {
-  radio: {
-    hover: { displayName: "Hover", className: "radio-buttons__radio--hover" },
-    focus: { displayName: "Focus", className: "radio-buttons__radio--focus" },
-    disabled: {
-      displayName: "Disabled",
-      className: "radio-buttons__radio--disabled"
+  bar: {
+    displayName: "ProgressBar",
+    cssCustomProperties: {
+      barBackgroundColor: "Background color",
+      barForegroundColor: "Bar color"
+    },
+    cssProperties: {
+      barHeight: "Bar width"
     },
-    invalid: {
-      displayName: "Invalid",
-      className: "radio-buttons__radio--invalid"
+    displayGroups: {
+      cornersGroup: "Corner radius"
     }
+  },
+  data: {
+    targetValue: "Max value",
+    label: "Label"
   }
 };
-const defaultOptions = [
-  { value: "option-1", label: "Option 1", disabled: false },
-  { value: "option-2", label: "Option 2", disabled: false },
-  { value: "option-3", label: "Option 3", disabled: false }
-];
-const defaultValues = {
-  label: "Label",
-  tooltip: "",
-  firstSelectedByDefault: "none",
-  required: false,
-  readOnly: false,
-  disabled: false
-};
-const VALUE_MISSING_MESSAGE = "This field is required";
-const TestIds = {
-  root: "radio-buttons-root",
-  group: "radio-buttons-group",
-  legend: "radio-buttons-legend",
-  requiredIndicator: "radio-buttons-required-indicator",
-  tooltipButton: "radio-buttons-tooltip-button",
-  option: "radio-buttons-option",
-  control: "radio-buttons-control",
-  indicator: "radio-buttons-indicator",
-  optionLabel: "radio-buttons-option-label",
-  errorMessage: "radio-buttons-error-message"
-};
-const selectors = {
-  root: "radio-buttons",
-  radio: "radio-buttons__radio",
-  indicator: "radio-buttons__indicator",
-  label: "radio-buttons__label",
-  groupLabel: "radio-buttons__group-label"
-};
-const semanticClassNames = {
-  groupLabel: "radio-buttons__group-label",
-  requiredIndicator: "radio-buttons__required-indicator",
-  option: "radio-buttons__option",
-  radio: "radio-buttons__radio",
-  indicator: "radio-buttons__indicator",
-  label: "radio-buttons__label",
-  errorMessage: "radio-buttons__error-message"
-};
+var TestIDs = /* @__PURE__ */ ((TestIDs2) => {
+  TestIDs2["container"] = "progressbar-container";
+  TestIDs2["background"] = "progressbar-background";
+  TestIDs2["foreground"] = "progressbar-foreground";
+  TestIDs2["label"] = "progressbar-label";
+  return TestIDs2;
+})(TestIDs || {});
 export {
-  DesignStates as D,
-  TestIds as T,
-  VALUE_MISSING_MESSAGE as V,
-  defaultOptions as a,
-  semanticClassNames as b,
-  DisplayNames as c,
-  defaultValues as d,
-  selectors as s
+  DisplayNames as D,
+  FULL_PROGRESS as F,
+  NO_PROGRESS as N,
+  TestIDs as T
 };

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

@@ -1,40 +1,22 @@
-const FULL_PROGRESS = 100;
-const NO_PROGRESS = 0;
-const DisplayNames = {
-  root: {
-    displayName: "Progress Bar"
-  },
-  label: {
-    displayName: "Label"
-  },
-  bar: {
-    displayName: "ProgressBar",
-    cssCustomProperties: {
-      barBackgroundColor: "Background color",
-      barForegroundColor: "Bar color"
-    },
-    cssProperties: {
-      barHeight: "Bar width"
-    },
-    displayGroups: {
-      cornersGroup: "Corner radius"
-    }
-  },
+const selectors = {
+  root: "multi-state-box",
+  stateContainer: "state-container"
+};
+const DISPLAY_NAMES = {
+  component: "Multi-State Box",
+  data: {
+    states: "State",
+    activeStateName: "Active state",
+    stateName: "State name"
+  }
+};
+const DESCRIPTIONS = {
   data: {
-    targetValue: "Max value",
-    label: "Label"
+    activeStateName: "To trigger states from CMS or code, use the connect icon to bind this property"
   }
 };
-var TestIDs = /* @__PURE__ */ ((TestIDs2) => {
-  TestIDs2["container"] = "progressbar-container";
-  TestIDs2["background"] = "progressbar-background";
-  TestIDs2["foreground"] = "progressbar-foreground";
-  TestIDs2["label"] = "progressbar-label";
-  return TestIDs2;
-})(TestIDs || {});
 export {
-  DisplayNames as D,
-  FULL_PROGRESS as F,
-  NO_PROGRESS as N,
-  TestIDs as T
+  DESCRIPTIONS as D,
+  DISPLAY_NAMES as a,
+  selectors as s
 };

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

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