@wix/editor-react-components 1.2349.0 → 1.2350.0

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

@@ -1,37 +1,107 @@
-const FULL_PROGRESS = 100;
-const NO_PROGRESS = 0;
 const DisplayNames = {
   root: {
-    displayName: "Progress Bar"
-  },
-  label: {
-    displayName: "Label"
+    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"
+    }
   },
-  bar: {
-    displayName: "ProgressBar",
+  radio: {
+    elementDisplayName: "Radio button",
     cssCustomProperties: {
-      barBackgroundColor: "Background color",
-      barForegroundColor: "Bar color"
-    },
-    cssProperties: {
-      barHeight: "Bar width"
+      unselectedBackgroundColor: "Unselected background color",
+      unselectedBorderColor: "Unselected border color",
+      selectedBackgroundColor: "Selected background color",
+      selectedBorderColor: "Selected border color",
+      dotColor: "Dot color",
+      size: "Radio button size"
     }
   },
-  data: {
-    targetValue: "Max value",
-    label: "Label"
+  optionLabel: {
+    elementDisplayName: "Option 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"
+    },
+    invalid: {
+      displayName: "Invalid",
+      className: "radio-buttons__radio--invalid"
+    }
   }
 };
-var TestIDs = /* @__PURE__ */ ((TestIDs2) => {
-  TestIDs2["container"] = "progressbar-container";
-  TestIDs2["background"] = "progressbar-background";
-  TestIDs2["foreground"] = "progressbar-foreground";
-  TestIDs2["label"] = "progressbar-label";
-  return TestIDs2;
-})(TestIDs || {});
+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 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"
+};
+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"
+};
 export {
-  DisplayNames as D,
-  FULL_PROGRESS as F,
-  NO_PROGRESS as N,
-  TestIDs as T
+  DesignStates as D,
+  TestIds as T,
+  defaultOptions as a,
+  semanticClassNames as b,
+  DisplayNames as c,
+  defaultValues as d,
+  selectors as s
 };

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

@@ -1,22 +1,37 @@
-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 = {
+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"
+    }
+  },
   data: {
-    activeStateName: "To trigger states from CMS or code, use the connect icon to bind this property"
+    targetValue: "Max value",
+    label: "Label"
   }
 };
+var TestIDs = /* @__PURE__ */ ((TestIDs2) => {
+  TestIDs2["container"] = "progressbar-container";
+  TestIDs2["background"] = "progressbar-background";
+  TestIDs2["foreground"] = "progressbar-foreground";
+  TestIDs2["label"] = "progressbar-label";
+  return TestIDs2;
+})(TestIDs || {});
 export {
-  DESCRIPTIONS as D,
-  DISPLAY_NAMES as a,
-  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,423 +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 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: "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",
-  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"
+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
 };