@wix/editor-react-components 1.2349.0 → 1.2351.0

package/dist/site/components/RadioButtons/constants.d.ts

@@ -0,0 +1,108 @@
+export declare const DisplayNames: {
+    root: {
+        elementDisplayName: string;
+        data: {
+            options: string;
+            option: string;
+            optionLabel: string;
+            optionValue: string;
+            optionDisabled: string;
+            value: string;
+            firstSelectedByDefault: string;
+            firstSelectedByDefaultNone: string;
+            firstSelectedByDefaultFirst: string;
+            label: string;
+            tooltip: string;
+            required: string;
+            readOnly: string;
+            disabled: string;
+        };
+        cssCustomProperties: {
+            orientation: string;
+            radiosSpacing: string;
+            labelSpacing: string;
+            radioTextSpacing: string;
+            alignment: string;
+            labelAlignment: string;
+        };
+    };
+    radio: {
+        elementDisplayName: string;
+        cssCustomProperties: {
+            unselectedBackgroundColor: string;
+            unselectedBorderColor: string;
+            selectedBackgroundColor: string;
+            selectedBorderColor: string;
+            dotColor: string;
+            size: string;
+        };
+    };
+    optionLabel: {
+        elementDisplayName: string;
+    };
+    groupLabel: {
+        elementDisplayName: string;
+    };
+};
+export declare const DesignStates: {
+    readonly radio: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "radio-buttons__radio--hover";
+        };
+        readonly focus: {
+            readonly displayName: "Focus";
+            readonly className: "radio-buttons__radio--focus";
+        };
+        readonly disabled: {
+            readonly displayName: "Disabled";
+            readonly className: "radio-buttons__radio--disabled";
+        };
+        readonly invalid: {
+            readonly displayName: "Invalid";
+            readonly className: "radio-buttons__radio--invalid";
+        };
+    };
+};
+export type RadioButtonsDefaultSelection = 'none' | 'first';
+export type RadioButtonsOption = {
+    value?: string;
+    label: string;
+    disabled?: boolean;
+};
+export declare const defaultOptions: ReadonlyArray<RadioButtonsOption>;
+export declare const defaultValues: {
+    readonly label: "Label";
+    readonly tooltip: "";
+    readonly firstSelectedByDefault: "none";
+    readonly required: false;
+    readonly readOnly: false;
+    readonly disabled: false;
+};
+export declare const TestIds: {
+    readonly root: "radio-buttons-root";
+    readonly group: "radio-buttons-group";
+    readonly legend: "radio-buttons-legend";
+    readonly requiredIndicator: "radio-buttons-required-indicator";
+    readonly tooltipButton: "radio-buttons-tooltip-button";
+    readonly option: "radio-buttons-option";
+    readonly control: "radio-buttons-control";
+    readonly indicator: "radio-buttons-indicator";
+    readonly optionLabel: "radio-buttons-option-label";
+};
+export declare const selectors: {
+    readonly root: "radio-buttons";
+    readonly radio: "radio-buttons__radio";
+    readonly indicator: "radio-buttons__indicator";
+    readonly label: "radio-buttons__label";
+    readonly groupLabel: "radio-buttons__group-label";
+};
+export declare const semanticClassNames: {
+    readonly root: "radio-buttons";
+    readonly groupLabel: "radio-buttons__group-label";
+    readonly requiredIndicator: "radio-buttons__required-indicator";
+    readonly option: "radio-buttons__option";
+    readonly radio: "radio-buttons__radio";
+    readonly indicator: "radio-buttons__indicator";
+    readonly label: "radio-buttons__label";
+};

package/dist/site/components/RadioButtons/css.css

@@ -0,0 +1,181 @@
+.root__4SkBh {
+  box-sizing: border-box;
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.fieldset__2OxuS {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--labelSpacing, 16px);
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.labelRow__xKUgE {
+  display: flex;
+  align-items: center;
+  justify-content: var(--labelAlignment, flex-start);
+  gap: 6px;
+}
+
+.groupLabel__7aJZW {
+  width: fit-content;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.tooltipButton__qejF7 {
+  flex: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.65;
+}
+.tooltipButton__qejF7:hover, .tooltipButton__qejF7:focus-visible {
+  opacity: 1;
+}
+.tooltipButton__qejF7:focus-visible {
+  outline: none;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px #116dff;
+}
+.tooltipButton__qejF7 svg {
+  width: 16px;
+  height: 16px;
+}
+
+.tooltip__syq4d {
+  max-width: 220px;
+  padding: 6px 10px;
+  font: var(--wst-paragraph-2-font, normal normal normal 12px/1.4em madefor-text, sans-serif);
+  color: var(--wst-primary-background-color, #fff);
+  background: var(--wst-paragraph-2-color, #2b2b2b);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+}
+
+.group__M3q8w {
+  display: flex;
+  flex-direction: var(--orientation, column);
+  flex-wrap: wrap;
+  align-self: stretch;
+  align-items: var(--alignment, flex-start);
+  justify-content: var(--alignment, flex-start);
+  column-gap: var(--radiosSpacing, 6px);
+  row-gap: var(--radiosSpacing, 6px);
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.option__hEAm9 {
+  display: inline-flex;
+  align-items: center;
+  column-gap: var(--radioTextSpacing, 13px);
+}
+
+.control__w6l6- {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--radioSize, 16px);
+  height: var(--radioSize, 16px);
+  margin: 0;
+  padding: 0;
+  border-style: solid;
+  border-width: var(--borderWidth, 1px);
+  border-color: var(--radio-border);
+  border-radius: 50%;
+  background-color: var(--radio-bg);
+  cursor: pointer;
+  transition: background-color 0.2s linear, border-color 0.2s linear;
+  --radio-bg: var(--unselectedBackgroundColor, #fff);
+  --radio-border: var(
+    --unselectedBorderColor,
+    color-mix(in srgb, #000 60%, transparent)
+  );
+}
+.control__w6l6-:hover, .control__w6l6-:focus-within {
+  outline: none;
+}
+.control__w6l6-[data-disabled] {
+  cursor: default;
+  pointer-events: none;
+}
+
+.control__w6l6-:hover,
+.control__w6l6-:focus-within,
+.control__w6l6-.radio-buttons__radio--hover,
+.control__w6l6-.radio-buttons__radio--focus {
+  --radio-border: var(--unselectedBorderColor, #000);
+}
+
+.control__w6l6-[data-checked] {
+  --radio-bg: var(--selectedBackgroundColor, #fff);
+  --radio-border: var(--selectedBorderColor, #116dff);
+}
+
+.control__w6l6-[data-invalid],
+.control__w6l6-.radio-buttons__radio--invalid {
+  --radio-border: var(--unselectedBorderColor, #e62214);
+}
+
+.control__w6l6-[data-disabled],
+.control__w6l6-.radio-buttons__radio--disabled {
+  opacity: 0.55;
+}
+
+.indicator__m9-hW {
+  box-sizing: border-box;
+  width: calc(var(--radioSize, 16px) * 0.5);
+  height: calc(var(--radioSize, 16px) * 0.5);
+  border-radius: 50%;
+  background-color: var(--dotColor, #116dff);
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 0.2s linear, opacity 0.2s linear, background-color 0.2s linear;
+}
+
+.indicator__m9-hW[data-checked] {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.label__bJi-o {
+  cursor: pointer;
+  margin-bottom: 0;
+}.radio-buttons {
+  --radiosSpacing: 6px;
+  --labelSpacing: 16px;
+  --radioTextSpacing: 13px;
+}
+.requiredIndicator__j5mIH {
+  display: inline-block;
+  width: 0.6em;
+  height: 0.6em;
+  margin-inline-start: 0.2em;
+  vertical-align: super;
+  color: inherit;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}
+.presetWrapper__J1yzj {
+  display: contents;
+}

package/dist/site/components/RadioButtons/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as RadioButtons } from './component';

package/dist/site/components/RadioButtons/index.js

@@ -0,0 +1,6 @@
+'use client';
+
+import RadioButtons from './component.js';
+
+export { RadioButtons };
+export default RadioButtons;

package/dist/site/components/RadioButtons/manifest.d.ts

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;

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

@@ -0,0 +1,284 @@
+import { E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { D as DesignStates, c as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants24.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: "01a3965d-95d7-49e2-903a-3a496de97054",
+  type: "wixEditorElements.RadioButtons__DEV__v3",
+  description: "A group of radio buttons where visitors pick a single option. Options can be set in the editor or fed by a connected data source, and the selected value can be bound to a text field.",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 240
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.content
+      }
+    }
+  },
+  editorElement: {
+    selector: getSelector(selectors.root),
+    displayName: DisplayNames.root.elementDisplayName,
+    archetype: Archetype.RadioGroup,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
+      disableStretching: true,
+      disablePositioning: false
+    },
+    actions: {
+      manageItems: {
+        displayName: DisplayNames.root.data.options,
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.data,
+          data: {
+            dataItemKey: "options"
+          }
+        }
+      }
+    },
+    data: {
+      options: {
+        dataType: DATA.DATA_TYPE.arrayItems,
+        displayName: DisplayNames.root.data.options,
+        [DATA.DATA_TYPE.arrayItems]: {
+          data: {
+            items: {
+              label: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: DisplayNames.root.data.optionLabel
+              },
+              value: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: DisplayNames.root.data.optionValue
+              },
+              disabled: {
+                dataType: DATA.DATA_TYPE.booleanValue,
+                displayName: DisplayNames.root.data.optionDisabled,
+                defaultValue: false
+              }
+            }
+          }
+        }
+      },
+      value: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.value
+      },
+      firstSelectedByDefault: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: DisplayNames.root.data.firstSelectedByDefault,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            {
+              value: "none",
+              displayName: DisplayNames.root.data.firstSelectedByDefaultNone
+            },
+            {
+              value: "first",
+              displayName: DisplayNames.root.data.firstSelectedByDefaultFirst
+            }
+          ]
+        },
+        defaultValue: defaultValues.firstSelectedByDefault
+      },
+      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
+      },
+      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
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
+      },
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      ...manifestChangeable(),
+      ...manifestFocusable()
+    },
+    displayGroups: {
+      optionsGroup: {
+        displayName: DisplayNames.root.data.options,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.listItem,
+        listItem: {
+          arrayItems: "options",
+          label: "label"
+        }
+      }
+    },
+    cssCustomProperties: {
+      orientation: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.flexDirection,
+        displayName: DisplayNames.root.cssCustomProperties.orientation,
+        defaultValue: "column"
+      },
+      radiosSpacing: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+        displayName: DisplayNames.root.cssCustomProperties.radiosSpacing,
+        defaultValue: "6px"
+      },
+      labelSpacing: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+        displayName: DisplayNames.root.cssCustomProperties.labelSpacing,
+        defaultValue: "16px"
+      },
+      radioTextSpacing: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.columnGap,
+        displayName: DisplayNames.root.cssCustomProperties.radioTextSpacing,
+        defaultValue: "13px"
+      },
+      alignment: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent,
+        displayName: DisplayNames.root.cssCustomProperties.alignment
+      },
+      labelAlignment: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent,
+        displayName: DisplayNames.root.cssCustomProperties.labelAlignment
+      }
+    },
+    elements: {
+      radio: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.radio.elementDisplayName,
+          selector: getSelector(selectors.radio),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssProperties: {
+            boxShadow: {},
+            borderWidth: {}
+          },
+          cssCustomProperties: {
+            unselectedBackgroundColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
+              displayName: DisplayNames.radio.cssCustomProperties.unselectedBackgroundColor
+            },
+            unselectedBorderColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
+              displayName: DisplayNames.radio.cssCustomProperties.unselectedBorderColor
+            },
+            selectedBackgroundColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
+              displayName: DisplayNames.radio.cssCustomProperties.selectedBackgroundColor
+            },
+            selectedBorderColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
+              displayName: DisplayNames.radio.cssCustomProperties.selectedBorderColor
+            },
+            dotColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
+              displayName: DisplayNames.radio.cssCustomProperties.dotColor
+            },
+            radioSize: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.width,
+              displayName: DisplayNames.radio.cssCustomProperties.size,
+              defaultValue: "16px"
+            }
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.radio.hover.displayName,
+              className: DesignStates.radio.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            focus: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.radio.focus.displayName,
+              className: DesignStates.radio.focus.className,
+              pseudoClass: NativeStateType.focus
+            }),
+            disabled: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.radio.disabled.displayName,
+              className: DesignStates.radio.disabled.className,
+              pseudoClass: NativeStateType.disabled,
+              props: { disabled: true }
+            }),
+            invalid: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.radio.invalid.displayName,
+              className: DesignStates.radio.invalid.className,
+              pseudoClass: NativeStateType.invalid
+            })
+          }
+        }
+      },
+      optionLabel: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.optionLabel.elementDisplayName,
+          selector: getSelector(selectors.label),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssProperties: {
+            color: {},
+            font: {}
+          }
+        }
+      },
+      groupLabel: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.groupLabel.elementDisplayName,
+          selector: getSelector(selectors.groupLabel),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssProperties: {
+            color: {},
+            font: {}
+          }
+        }
+      }
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/RadioButtons/component.tsx",
+      dependencies: {
+        serviceDependencies: ["@wix/viewer-service-environment"]
+      }
+    },
+    editor: {
+      componentUrl: "./site/components/RadioButtons/component.preview.tsx"
+    }
+  },
+  moduleConfiguration: {
+    package: { name: "@wix/editor-react-components", version: "^1.0.0" },
+    component: { path: "site/components/RadioButtons" }
+  }
+};
+export {
+  manifest as default
+};