@wix/editor-react-components 1.2836.0 → 1.2838.0

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

@@ -1,6 +1,6 @@
 import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, a as ACTIONS, E as ELEMENTS, N as NativeStateType, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT, D as DesignStates } from "../chunks/constants44.js";
-import { a as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
+import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const options = [
   {
     value: "Start",

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

@@ -1,5 +1,5 @@
 import { b as DISPLAY_GROUPS, N as NativeStateType, C as CSS_PROPERTIES, E as ELEMENTS, D as DATA, I as INTERACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
-import { c as manifestMouseHover, f as manifestMediaProgress, e as manifestPlayable } from "../chunks/manifestSdkMixins.js";
+import { d as manifestMouseHover, g as manifestMediaProgress, f as manifestPlayable } from "../chunks/manifestSdkMixins.js";
 import { D as DisplayNames, a as DesignStates, s as selectors, b as borderDefaultValue } from "../chunks/constants43.js";
 import manifest$1 from "../Image3/manifest.js";
 const controlsConfig = {

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

@@ -2,7 +2,7 @@ import { L as LAYOUT, a as ACTIONS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, E
 import { g as getTranslationResources } from "../chunks/translationResources.js";
 import { g as getSelector } from "../chunks/manifest.js";
 import { a as DisplayNames, h as homepageModeValues, b as defaultStateValues, e as separatorValues, D as DesignStates, c as componentMetadata, s as semanticClassNames } from "../chunks/constants41.js";
-import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
+import { d as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: componentMetadata.id,
   type: componentMetadata.type,

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

@@ -1,6 +1,6 @@
 import { a as ACTIONS, E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, I as INTERACTIONS, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { D as DesignStates, b as DisplayNames, c as DEFAULT_ICON_POSITION, C as COMPONENT_TYPE } from "../chunks/constants21.js";
-import { a as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
+import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const displayConfig = {
   displayValues: ["none", "block"]
 };

package/dist/site/components/Checkbox/Checkbox.types.d.ts

@@ -1,20 +1,17 @@
 import { A11y, Direction } from '@wix/editor-react-types';
-import { SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
-import { FieldValidationProps } from '../../../utils/validation/types';
-export type CheckboxProps = SdkFunctionFocusableProps & FieldValidationProps<boolean> & {
+import { SdkFunctionFocusableProps, SdkFunctionKeyboardProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+export type CheckboxProps = SdkFunctionFocusableProps<HTMLElement> & SdkFunctionKeyboardProps<HTMLElement> & {
     id: string;
     className: string;
-    label: string;
-    tooltip?: string;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    required?: boolean;
+    label?: string;
+    errorMessage?: string;
     readOnly?: boolean;
     disabled?: boolean;
-    indeterminate?: boolean;
-    onChange?: (checked: boolean) => void;
-    direction?: Direction;
+    checked?: boolean;
     a11y?: A11y;
+    direction?: Direction;
+    onCheckedChange?: (checked: boolean) => void;
+    previewError?: boolean;
     elementProps?: {
         indicator?: {
             className?: string;
@@ -22,6 +19,9 @@ export type CheckboxProps = SdkFunctionFocusableProps & FieldValidationProps<boo
         label?: {
             className?: string;
         };
+        errorMessage?: {
+            className?: string;
+        };
     };
     wix?: {
         presetsWrapperProps?: Record<string, unknown>;

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

@@ -1,91 +1,59 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { F as Field, e as Checkbox } from "../chunks/index13.js";
+import "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { F as Field, e as Checkbox, T as Tooltip } from "../chunks/index13.js";
-import { u as useCurrentLanguage } from "../chunks/useCurrentLanguage.js";
-import { f as formatClassNames } from "../chunks/classNames.js";
-import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { u as useValidatedField, R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/useValidatedField.js";
+import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
-import { d as defaultValues, s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE, a as semanticClassNames } from "../chunks/constants40.js";
+import { a as getDataAttributes } from "../chunks/dataUtils.js";
+import { u as useCurrentLanguage } from "../chunks/useCurrentLanguage.js";
+import { d as defaultValues, s as selectors, T as TestIds, D as DesignStates, E as ERROR_MESSAGE_PREVIEW_TEXT } from "../chunks/constants40.js";
 const root = "root__0DpH8";
 const field = "field__R0D8f";
 const item = "item__EzhwB";
-const control = "control__7-RJh";
 const indicator = "indicator__dzBy2";
+const checkmarkWrapper = "checkmarkWrapper__DXeX5";
 const checkmark = "checkmark__SY2jU";
 const label = "label__Y3ciV";
 const errorMessage = "errorMessage__PtMqM";
-const tooltipButton = "tooltipButton__EXd4N";
-const tooltip = "tooltip__Eudyd";
 const styles = {
   root,
   field,
   item,
-  control,
   indicator,
+  checkmarkWrapper,
   checkmark,
   label,
-  errorMessage,
-  tooltipButton,
-  tooltip
-};
-const noop = () => {
+  errorMessage
 };
 function CheckboxComponent(props) {
-  var _a, _b;
+  var _a, _b, _c;
   const { language } = useCurrentLanguage();
   const {
     id,
     className = "",
     label: label2 = defaultValues.label,
-    tooltip: tooltip2 = defaultValues.tooltip,
-    defaultChecked = defaultValues.defaultChecked,
+    errorMessage: errorMessage2,
     readOnly = defaultValues.readOnly,
-    required = defaultValues.required,
     disabled = defaultValues.disabled,
-    indeterminate = defaultValues.indeterminate,
-    direction,
+    checked = false,
     a11y,
-    onChange = noop,
-    onFocus = noop,
-    onBlur = noop,
-    fieldValidity,
-    showValidityIndication,
-    onValidate,
-    onValidityChange,
+    direction,
+    onCheckedChange,
+    onKeyDown,
+    onKeyUp,
+    onFocus,
+    onBlur,
+    previewError,
     wix,
     elementProps
   } = props;
-  const isControlled = props.checked !== void 0;
-  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
-  const checked = isControlled ? Boolean(props.checked) : uncontrolledChecked;
-  const intrinsic = required && !checked && !disabled && !readOnly ? { valid: false, validationMessage: VALUE_MISSING_MESSAGE } : { valid: true, validationMessage: "" };
-  const {
-    validity,
-    showValidityIndication: showIndication,
-    handleBlur: handleValidationBlur
-  } = useValidatedField({
-    value: checked,
-    intrinsic,
-    fieldValidity,
-    showValidityIndication,
-    onValidate,
-    onValidityChange
-  });
-  const isInvalid = showIndication && !validity.valid;
   const handleCheckedChange = (next) => {
-    if (!isControlled) {
-      setUncontrolledChecked(next);
-    }
-    onChange(next);
-  };
-  const handleBlur = (event) => {
-    onBlur(event);
-    handleValidationBlur();
+    onCheckedChange == null ? void 0 : onCheckedChange(next);
   };
+  const hasError = typeof errorMessage2 !== "undefined" && errorMessage2 !== "";
+  const inErrorState = hasError || Boolean(previewError);
+  const errorMessageId = inErrorState ? `${id}-error-message` : void 0;
   const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || void 0;
   const customAccessibleNameId = label2 && ariaLabel ? `${id}-accessible-name` : void 0;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
@@ -104,51 +72,53 @@ function CheckboxComponent(props) {
       dir: direction,
       lang: language,
       "data-testid": TestIds.root,
-      children: /* @__PURE__ */ jsxs(Field.Root, { className: styles.field, invalid: isInvalid, children: [
-        /* @__PURE__ */ jsxs(
-          Field.Item,
-          {
-            className: clsx(
-              styles.item,
-              formatClassNames(semanticClassNames.root)
-            ),
-            children: [
+      children: /* @__PURE__ */ jsxs(
+        Field.Root,
+        {
+          className: styles.field,
+          invalid: inErrorState,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsxs(Field.Item, { className: styles.item, children: [
               customAccessibleNameId && /* @__PURE__ */ jsx(
                 "span",
                 {
                   id: customAccessibleNameId,
                   className: accessibilityStyles.visuallyHidden,
+                  "aria-hidden": "true",
+                  "data-testid": TestIds.accessibleName,
                   children: ariaLabel
                 }
               ),
               /* @__PURE__ */ jsx(
                 Checkbox.Root,
                 {
-                  ...isControlled ? { checked: props.checked } : { defaultChecked },
+                  nativeButton: true,
+                  render: /* @__PURE__ */ jsx("button", { type: "button" }),
+                  checked,
                   onCheckedChange: handleCheckedChange,
-                  required,
                   readOnly,
                   disabled,
-                  indeterminate,
                   className: clsx(
-                    styles.control,
-                    formatClassNames(semanticClassNames.control)
+                    styles.indicator,
+                    selectors.indicator,
+                    (_a = elementProps == null ? void 0 : elementProps.indicator) == null ? void 0 : _a.className,
+                    inErrorState ? DesignStates.indicator.error.className : void 0
                   ),
                   "data-testid": TestIds.control,
                   "aria-label": ariaLabel,
                   "aria-labelledby": customAccessibleNameId,
+                  "aria-describedby": errorMessageId,
+                  "aria-invalid": inErrorState || void 0,
+                  onKeyDown,
+                  onKeyUp,
                   onFocus,
-                  onBlur: handleBlur,
+                  onBlur,
                   children: /* @__PURE__ */ jsx(
                     Checkbox.Indicator,
                     {
                       keepMounted: true,
-                      className: clsx(
-                        styles.indicator,
-                        selectors.indicator,
-                        formatClassNames(semanticClassNames.indicator),
-                        (_a = elementProps == null ? void 0 : elementProps.indicator) == null ? void 0 : _a.className
-                      ),
+                      className: styles.checkmarkWrapper,
                       "data-testid": TestIds.indicator,
                       children: /* @__PURE__ */ jsx(
                         "svg",
@@ -164,59 +134,37 @@ function CheckboxComponent(props) {
                   )
                 }
               ),
-              label2 && /* @__PURE__ */ jsxs(
+              label2 && /* @__PURE__ */ jsx(
                 Field.Label,
                 {
                   className: clsx(
                     styles.label,
                     selectors.label,
-                    formatClassNames(semanticClassNames.label),
                     (_b = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _b.className
                   ),
                   "data-testid": TestIds.label,
-                  children: [
-                    label2,
-                    required && /* @__PURE__ */ jsx(
-                      RequiredIndicator,
-                      {
-                        className: formatClassNames(
-                          semanticClassNames.requiredIndicator
-                        ),
-                        "data-testid": TestIds.requiredIndicator
-                      }
-                    )
-                  ]
+                  children: label2
                 }
-              ),
-              tooltip2 && /* @__PURE__ */ jsx(Tooltip.Provider, { delay: 0, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
-                /* @__PURE__ */ jsx(
-                  Tooltip.Trigger,
-                  {
-                    type: "button",
-                    className: styles.tooltipButton,
-                    "data-testid": TestIds.tooltipButton,
-                    "aria-label": tooltip2,
-                    children: /* @__PURE__ */ jsx(InfoCircleSmall_default, { "aria-hidden": "true" })
-                  }
+              )
+            ] }),
+            inErrorState && /* @__PURE__ */ jsx(
+              Field.Error,
+              {
+                match: true,
+                role: "alert",
+                className: clsx(
+                  styles.errorMessage,
+                  selectors.errorMessage,
+                  (_c = elementProps == null ? void 0 : elementProps.errorMessage) == null ? void 0 : _c.className
                 ),
-                /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip.Popup, { className: styles.tooltip, children: tooltip2 }) }) })
-              ] }) })
-            ]
-          }
-        ),
-        isInvalid && validity.validationMessage && /* @__PURE__ */ jsx(
-          Field.Error,
-          {
-            match: true,
-            className: clsx(
-              styles.errorMessage,
-              formatClassNames(semanticClassNames.errorMessage)
-            ),
-            "data-testid": TestIds.errorMessage,
-            children: validity.validationMessage
-          }
-        )
-      ] })
+                "data-testid": TestIds.errorMessage,
+                id: errorMessageId,
+                children: errorMessage2 || ERROR_MESSAGE_PREVIEW_TEXT
+              }
+            )
+          ]
+        }
+      )
     }
   ) });
 }

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

@@ -1,19 +1,23 @@
+export declare const TEXT_PROP_STATIC_VALUE_MAX_LENGTH = 400;
 export declare const DisplayNames: {
     root: {
         elementDisplayName: string;
         data: {
             checked: string;
-            defaultChecked: string;
-            required: string;
             readOnly: string;
             disabled: string;
-            indeterminate: string;
             label: string;
-            tooltip: string;
+            errorMessage: string;
+        };
+        descriptions: {
+            checked: string;
+            errorMessage: string;
         };
         cssCustomProperties: {
             gap: string;
-            alignment: string;
+        };
+        presets: {
+            baseCheckbox: string;
         };
     };
     indicator: {
@@ -23,14 +27,16 @@ export declare const DisplayNames: {
             uncheckedBorderColor: string;
             checkedBackgroundColor: string;
             checkedBorderColor: string;
-            borderWidth: string;
             checkmarkColor: string;
-            size: string;
+            checkboxSize: string;
         };
     };
     label: {
         elementDisplayName: string;
     };
+    errorMessage: {
+        elementDisplayName: string;
+    };
 };
 export declare const DesignStates: {
     readonly indicator: {
@@ -46,42 +52,33 @@ export declare const DesignStates: {
             readonly displayName: "Disabled";
             readonly className: "checkbox__indicator--disabled";
         };
-        readonly invalid: {
-            readonly displayName: "Invalid";
-            readonly className: "checkbox__indicator--invalid";
+        readonly error: {
+            readonly displayName: "Error";
+            readonly className: "checkbox__indicator--error";
         };
     };
 };
+export declare const FunctionalStateKeys: {
+    readonly previewError: "previewError";
+};
+export declare const ERROR_MESSAGE_PREVIEW_TEXT = "Error message";
 export declare const defaultValues: {
     readonly label: "Label";
     readonly checked: false;
-    readonly defaultChecked: false;
-    readonly required: false;
     readonly readOnly: false;
     readonly disabled: false;
-    readonly indeterminate: false;
-    readonly tooltip: "";
 };
-export declare const VALUE_MISSING_MESSAGE = "This field is required";
 export declare const TestIds: {
     readonly root: "checkbox-root";
     readonly control: "checkbox-control";
     readonly indicator: "checkbox-indicator";
     readonly label: "checkbox-label";
-    readonly requiredIndicator: "checkbox-required-indicator";
-    readonly tooltipButton: "checkbox-tooltip-button";
     readonly errorMessage: "checkbox-error-message";
+    readonly accessibleName: "checkbox-accessible-name";
 };
 export declare const selectors: {
     readonly root: "checkbox";
     readonly indicator: "checkbox__indicator";
     readonly label: "checkbox__label";
-};
-export declare const semanticClassNames: {
-    readonly root: "checkbox";
-    readonly control: "checkbox__control";
-    readonly indicator: "checkbox__indicator";
-    readonly label: "checkbox__label";
-    readonly requiredIndicator: "checkbox__required-indicator";
     readonly errorMessage: "checkbox__error-message";
 };