@wix/editor-react-components 1.2327.0 → 1.2329.0

package/dist/site/components/Checkbox/manifest.js

@@ -0,0 +1,209 @@
+import { E as ELEMENTS, N as NativeStateType, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { D as DesignStates, b as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants36.js";
+import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
+import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
+import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+const manifest = {
+  id: "fcdba628-aba7-4d3d-9eac-deeef69fe3fe",
+  type: "wixEditorElements.Checkbox__DEV__v3",
+  description: "A single checkbox input with label",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 142
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.content
+      }
+    }
+  },
+  editorElement: {
+    selector: getSelector(selectors.root),
+    displayName: DisplayNames.root.elementDisplayName,
+    archetype: Archetype.Checkbox,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
+      disableStretching: true,
+      disablePositioning: false
+    },
+    data: {
+      label: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.label,
+        defaultValue: defaultValues.label
+      },
+      tooltip: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.tooltip,
+        defaultValue: defaultValues.tooltip
+      },
+      checked: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.checked,
+        defaultValue: defaultValues.checked
+      },
+      defaultChecked: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.defaultChecked,
+        defaultValue: defaultValues.defaultChecked
+      },
+      required: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.required,
+        defaultValue: defaultValues.required
+      },
+      readOnly: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.readOnly,
+        defaultValue: defaultValues.readOnly
+      },
+      disabled: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.disabled,
+        defaultValue: defaultValues.disabled
+      },
+      indeterminate: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.indeterminate,
+        defaultValue: defaultValues.indeterminate
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
+      },
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      ...manifestChangeable(),
+      ...manifestFocusable()
+    },
+    cssCustomProperties: {
+      gap: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.columnGap,
+        displayName: DisplayNames.root.cssCustomProperties.gap,
+        defaultValue: "8px"
+      },
+      alignment: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent,
+        displayName: DisplayNames.root.cssCustomProperties.alignment
+      }
+    },
+    elements: {
+      indicator: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.indicator.elementDisplayName,
+          selector: getSelector(selectors.indicator),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssProperties: {
+            borderRadius: {
+              defaultValue: "2px"
+            },
+            boxShadow: {}
+          },
+          cssCustomProperties: {
+            backgroundColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
+              displayName: DisplayNames.indicator.cssCustomProperties.backgroundColor
+            },
+            borderColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
+              displayName: DisplayNames.indicator.cssCustomProperties.borderColor
+            },
+            borderWidth: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
+              displayName: DisplayNames.indicator.cssCustomProperties.borderWidth,
+              defaultValue: "1px"
+            },
+            checkmarkColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.fill,
+              displayName: DisplayNames.indicator.cssCustomProperties.checkmarkColor
+            },
+            checkboxSize: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.width,
+              displayName: DisplayNames.indicator.cssCustomProperties.size,
+              defaultValue: "16px"
+            }
+          },
+          displayGroups: {
+            borderGroup: {
+              displayName: DisplayNames.indicator.displayGroups.borderGroup,
+              groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
+              border: {
+                color: "borderColor",
+                width: "borderWidth"
+              }
+            }
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.indicator.hover.displayName,
+              className: DesignStates.indicator.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            focus: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.indicator.focus.displayName,
+              className: DesignStates.indicator.focus.className,
+              pseudoClass: NativeStateType.focus
+            }),
+            disabled: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.indicator.disabled.displayName,
+              className: DesignStates.indicator.disabled.className,
+              pseudoClass: NativeStateType.disabled,
+              props: { disabled: true }
+            }),
+            invalid: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.indicator.invalid.displayName,
+              className: DesignStates.indicator.invalid.className,
+              pseudoClass: NativeStateType.invalid
+            })
+          }
+        }
+      },
+      label: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.label.elementDisplayName,
+          selector: getSelector(selectors.label),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssProperties: {
+            color: {},
+            font: {}
+          }
+        }
+      }
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/Checkbox/component.tsx",
+      dependencies: {
+        serviceDependencies: ["@wix/viewer-service-environment"]
+      }
+    },
+    editor: {
+      componentUrl: "./site/components/Checkbox/component.preview.tsx"
+    }
+  },
+  moduleConfiguration: {
+    package: { name: "@wix/editor-react-components", version: "^1.0.0" },
+    component: { path: "site/components/Checkbox" }
+  }
+};
+export {
+  manifest as default
+};

package/dist/site/components/CheckboxGroup/component.js

@@ -1,34 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c as clsx } from "../chunks/clsx.js";
 import { a as Fieldset, T as Tooltip, b as CheckboxGroup_CheckboxGroup_CheckboxGroup, c as Checkbox } from "../chunks/index10.js";
-import * as React from "react";
+import "react";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
+import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as defaultValues, a as defaultOptions, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants35.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
-const Asterisk = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 7 7", fill: "currentColor", width: size || "7", height: size || "7", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M1.809 7 1 6.397 2.74 3.94 0 3.026l.31-.974L3 2.948V0h1v2.976l2.69-.924.31.975-2.719.934L6 6.397 5.19 7 3.503 4.609 1.809 7Z" }));
-Asterisk.displayName = "Asterisk";
-var Asterisk_default = Asterisk;
-const requiredIndicator = "requiredIndicator__j5mIH";
-const styles$1 = {
-  requiredIndicator
-};
-const RequiredIndicator = ({
-  className,
-  "data-testid": dataTestId
-}) => /* @__PURE__ */ jsx(
-  Asterisk_default,
-  {
-    className: clsx(styles$1.requiredIndicator, className),
-    "data-testid": dataTestId,
-    "aria-hidden": "true",
-    focusable: "false"
-  }
-);
 const root = "root__raraS";
 const fieldset = "fieldset__pDERL";
 const labelRow = "labelRow__CTw2X";

package/dist/site/components/CheckboxGroup/css.css

@@ -1,11 +1,4 @@
-.requiredIndicator__j5mIH {
-  display: inline-block;
-  width: 0.7em;
-  height: 0.7em;
-  margin-inline-start: 0.4em;
-  vertical-align: baseline;
-  color: inherit;
-}.root__raraS {
+.root__raraS {
   box-sizing: border-box;
   display: inline-flex;
   max-width: 100%;
@@ -204,6 +197,14 @@
 .checkbox-group__indicator {
   border-radius: 2px;
 }
+.requiredIndicator__j5mIH {
+  display: inline-block;
+  width: 0.7em;
+  height: 0.7em;
+  margin-inline-start: 0.4em;
+  vertical-align: baseline;
+  color: inherit;
+}
 .fallbackDirection__HeRgn:not([dir]) {
   direction: var(--wix-opt-in-direction);
 }

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

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "./clsx.js";
+import * as React from "react";
+const Asterisk = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 7 7", fill: "currentColor", width: size || "7", height: size || "7", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M1.809 7 1 6.397 2.74 3.94 0 3.026l.31-.974L3 2.948V0h1v2.976l2.69-.924.31.975-2.719.934L6 6.397 5.19 7 3.503 4.609 1.809 7Z" }));
+Asterisk.displayName = "Asterisk";
+var Asterisk_default = Asterisk;
+const requiredIndicator = "requiredIndicator__j5mIH";
+const styles = {
+  requiredIndicator
+};
+const RequiredIndicator = ({
+  className,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsx(
+  Asterisk_default,
+  {
+    className: clsx(styles.requiredIndicator, className),
+    "data-testid": dataTestId,
+    "aria-hidden": "true",
+    focusable: "false"
+  }
+);
+export {
+  RequiredIndicator as R
+};

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

@@ -1,87 +1,87 @@
-const semanticClassNames = {
-  root: "breadcrumbs",
-  itemLabel: "breadcrumbs-item-label",
-  separator: "breadcrumbs-separator",
-  animatedHomeIcon: "animated-icon"
-};
 const DisplayNames = {
   root: {
-    elementDisplayName: "Breadcrumbs",
-    customActions: {
-      replaceHomeIcon: "Customize Icon"
+    elementDisplayName: "Checkbox",
+    data: {
+      checked: "Checked",
+      defaultChecked: "Checked by default",
+      required: "Required",
+      readOnly: "Read only",
+      disabled: "Disabled",
+      indeterminate: "Indeterminate",
+      label: "Label",
+      tooltip: "Tooltip"
+    },
+    cssCustomProperties: {
+      gap: "Spacing",
+      alignment: "Alignment"
     }
   },
-  item: {
-    elementDisplayName: "Items"
-  },
-  separator: {
-    elementDisplayName: "Separators"
-  },
-  homeIcon: {
-    elementDisplayName: "Home"
-  },
-  data: {
-    separator: "Separator",
-    displayHomepageAs: "Display homepage as",
-    horizontalSpacing: "Space between items",
-    verticalSpacing: "Space between rows",
-    alignment: "Alignment",
-    separatorOptions: {
-      slash: "Forward slash",
-      arrow: "Arrow"
-    },
-    homepageModeOptions: {
-      text: "Text",
-      icon: "Icon"
+  indicator: {
+    elementDisplayName: "Indicator",
+    cssCustomProperties: {
+      backgroundColor: "Background color",
+      borderColor: "Border color",
+      borderWidth: "Border width",
+      checkmarkColor: "Checkmark color",
+      size: "Checkbox size"
     },
-    defaultState: "Default state",
-    defaultStateOptions: {
-      fullTrail: "Full trail",
-      hideHomepage: "Hide homepage",
-      hideCurrentPage: "Hide current page"
-    },
-    overflowItems: "Overflow items",
-    overflowItemsOptions: {
-      wrap: "Wrap",
-      collapse: "Collapse (with ellipses)"
-    },
-    beforeEllipsis: "Items before ellipses",
-    afterEllipsis: "Items after ellipses"
+    displayGroups: {
+      borderGroup: "Border"
+    }
+  },
+  label: {
+    elementDisplayName: "Label"
   }
 };
 const DesignStates = {
-  item: {
-    hover: { displayName: "Hover", className: "breadcrumbs__item--hover" },
-    selected: {
-      displayName: "Selected",
-      className: "breadcrumbs__item--selected"
+  indicator: {
+    hover: { displayName: "Hover", className: "checkbox__indicator--hover" },
+    focus: { displayName: "Focus", className: "checkbox__indicator--focus" },
+    disabled: {
+      displayName: "Disabled",
+      className: "checkbox__indicator--disabled"
+    },
+    invalid: {
+      displayName: "Invalid",
+      className: "checkbox__indicator--invalid"
     }
   }
 };
-const componentMetadata = {
-  id: "992fd74f-46fe-4cc3-b803-d70f75a11fbc",
-  type: "wixEditorElements.Breadcrumbs",
-  description: "A navigation component that displays the user's location within a site's hierarchy as a trail of links, allowing navigation back to any ancestor page."
+const defaultValues = {
+  label: "Label",
+  checked: false,
+  defaultChecked: false,
+  required: false,
+  readOnly: false,
+  disabled: false,
+  indeterminate: false,
+  tooltip: ""
 };
-const separatorValues = {
-  slash: "slash",
-  arrow: "arrow"
+const TestIds = {
+  root: "checkbox-root",
+  control: "checkbox-control",
+  indicator: "checkbox-indicator",
+  label: "checkbox-label",
+  requiredIndicator: "checkbox-required-indicator",
+  tooltipButton: "checkbox-tooltip-button"
 };
-const homepageModeValues = {
-  text: "text",
-  icon: "icon"
+const selectors = {
+  root: "checkbox",
+  indicator: "checkbox__indicator",
+  label: "checkbox__label"
 };
-const defaultStateValues = {
-  fullTrail: "fullTrail",
-  hideHomepage: "hideHomepage",
-  hideCurrentPage: "hideCurrentPage"
+const semanticClassNames = {
+  root: "checkbox",
+  control: "checkbox__control",
+  indicator: "checkbox__indicator",
+  label: "checkbox__label",
+  requiredIndicator: "checkbox__required-indicator"
 };
 export {
   DesignStates as D,
-  DisplayNames as a,
-  separatorValues as b,
-  componentMetadata as c,
-  defaultStateValues as d,
-  homepageModeValues as h,
-  semanticClassNames as s
+  TestIds as T,
+  semanticClassNames as a,
+  DisplayNames as b,
+  defaultValues as d,
+  selectors as s
 };

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

@@ -1,91 +1,87 @@
-const selectors = {
-  root: "audioPlayer",
-  controls: "controls",
-  playButton: "playButton",
-  playIcon: "playIcon",
-  progressBar: "progressBar",
-  progressTrack: "progressTrack",
-  volumeControls: "volumeControls",
-  muteButton: "muteButton",
-  volumeSlider: "volumeSlider",
-  volumeTrack: "volumeTrack",
-  timeDisplay: "timeDisplay",
-  audioTitle: "audioTitle",
-  title: "title",
-  artistName: "artistName",
-  coverMedia: "coverMedia"
-};
-const dataDefaults = {
-  loop: false,
-  volume: 100
-};
-const borderDefaultValue = "0px none rgba(0, 0, 0, 1)";
-const ARIA_LABELS = {
-  playButton: "Play",
-  pauseButton: "Pause",
-  muteButton: "Mute",
-  unmuteButton: "Unmute",
-  progressBar: "Seek",
-  volumeSlider: "Volume",
-  volumeControls: "Volume controls"
-};
-const DesignStates = {
-  controls: {
-    hover: {
-      displayName: "Hover",
-      className: "audio-player__controls--hover"
-    }
-  }
+const semanticClassNames = {
+  root: "breadcrumbs",
+  itemLabel: "breadcrumbs-item-label",
+  separator: "breadcrumbs-separator",
+  animatedHomeIcon: "animated-icon"
 };
 const DisplayNames = {
   root: {
-    displayName: "Audio Player",
-    cssProperties: {
-      color: "Background color"
-    },
-    cssCustomProperties: {
-      "content-horizontal-alignment": "Alignment",
-      "vertical-spacing": "Vertical spacing",
-      "audio-title-gap": "Space between track details"
+    elementDisplayName: "Breadcrumbs",
+    customActions: {
+      replaceHomeIcon: "Customize Icon"
     }
   },
-  controls: {
-    displayName: "Playback controls",
-    cssCustomProperties: {
-      "progress-fill-color": "Progress bar color",
-      "volume-control-color": "Volume control color",
-      "time-display-color": "Time display",
-      "play-icon-color": "Play icon color",
-      "play-icon-size": "Play icon size"
-    },
-    displayGroups: {
-      fillColors: "Fill colors",
-      icon: "Icon"
-    }
+  item: {
+    elementDisplayName: "Items"
   },
-  elements: {
-    coverMedia: "Cover art",
-    audioTitle: "Audio title",
-    artistName: "Artist name",
-    progressBar: "Progress bar",
-    timeDisplay: "Time display",
-    volumeControls: "Volume control"
+  separator: {
+    elementDisplayName: "Separators"
   },
-  data: {
-    coverImage: "Image",
-    displayMode: "Display mode",
-    loop: "Plays in a loop",
-    volume: "Volume"
+  homeIcon: {
+    elementDisplayName: "Home"
   },
-  displayGroups: {
-    playbackOptions: "Playback"
+  data: {
+    separator: "Separator",
+    displayHomepageAs: "Display homepage as",
+    horizontalSpacing: "Space between items",
+    verticalSpacing: "Space between rows",
+    alignment: "Alignment",
+    separatorOptions: {
+      slash: "Forward slash",
+      arrow: "Arrow"
+    },
+    homepageModeOptions: {
+      text: "Text",
+      icon: "Icon"
+    },
+    defaultState: "Default state",
+    defaultStateOptions: {
+      fullTrail: "Full trail",
+      hideHomepage: "Hide homepage",
+      hideCurrentPage: "Hide current page"
+    },
+    overflowItems: "Overflow items",
+    overflowItemsOptions: {
+      wrap: "Wrap",
+      collapse: "Collapse (with ellipses)"
+    },
+    beforeEllipsis: "Items before ellipses",
+    afterEllipsis: "Items after ellipses"
+  }
+};
+const DesignStates = {
+  item: {
+    hover: { displayName: "Hover", className: "breadcrumbs__item--hover" },
+    selected: {
+      displayName: "Selected",
+      className: "breadcrumbs__item--selected"
+    }
   }
 };
+const componentMetadata = {
+  id: "992fd74f-46fe-4cc3-b803-d70f75a11fbc",
+  type: "wixEditorElements.Breadcrumbs",
+  description: "A navigation component that displays the user's location within a site's hierarchy as a trail of links, allowing navigation back to any ancestor page."
+};
+const separatorValues = {
+  slash: "slash",
+  arrow: "arrow"
+};
+const homepageModeValues = {
+  text: "text",
+  icon: "icon"
+};
+const defaultStateValues = {
+  fullTrail: "fullTrail",
+  hideHomepage: "hideHomepage",
+  hideCurrentPage: "hideCurrentPage"
+};
 export {
-  ARIA_LABELS as A,
   DesignStates as D,
   DisplayNames as a,
-  borderDefaultValue as b,
-  dataDefaults as d,
-  selectors as s
+  separatorValues as b,
+  componentMetadata as c,
+  defaultStateValues as d,
+  homepageModeValues as h,
+  semanticClassNames as s
 };