@wix/editor-react-components 1.2328.0 → 1.2329.0

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

@@ -8,7 +8,7 @@ import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import { a as requireEq, d as requireIsFunction, r as requireIsObject, e as requireIsLength, c as require_isIndex, b as requireIsArrayLike } from "../chunks/isArrayLike.js";
 import { c as require_root, r as require_Symbol, a as require_baseGetTag, b as requireIsObjectLike, d as require_freeGlobal } from "../chunks/isObjectLike.js";
 import { r as requireIsArray } from "../chunks/isArray.js";
-import { D as DEFAULT_PROPS } from "../chunks/constants38.js";
+import { D as DEFAULT_PROPS } from "../chunks/constants39.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 var _overArg;
 var hasRequired_overArg;

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

@@ -1,5 +1,5 @@
 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-JPMZBG44.js";
-import { a as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants38.js";
+import { a as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants39.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";

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

@@ -7,7 +7,7 @@ import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import Image3 from "../Image3/component.js";
-import { A as ARIA_LABELS, s as selectors, d as dataDefaults } from "../chunks/constants37.js";
+import { A as ARIA_LABELS, s as selectors, d as dataDefaults } from "../chunks/constants38.js";
 import { c as commonjsGlobal } from "../chunks/_commonjsHelpers.js";
 import { g as $cbf007e418543821$export$b0d6fa1ab32e3295, h as $cbf007e418543821$export$16a4697467175487, a as $1dfb119a85e764e5$export$cc77c4ff7e8673c5, c as $240e9101ba2842f5$export$7d15b64cf5a3a4c4, i as $240e9101ba2842f5$export$cb6e0bb50bc19463, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Button.js";
 import { b as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$4d86445c2cf5e3, g as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, h as $64fa3d84918910a7$export$2881499e37b75b9a, c as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../chunks/filterDOMProps.js";

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

@@ -1,6 +1,6 @@
 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-JPMZBG44.js";
 import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
-import { D as DesignStates, a as DisplayNames, s as selectors, b as borderDefaultValue } from "../chunks/constants37.js";
+import { D as DesignStates, a as DisplayNames, s as selectors, b as borderDefaultValue } from "../chunks/constants38.js";
 import manifest$1 from "../Image3/manifest.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";

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

@@ -6,7 +6,7 @@ import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1 } from "../chunks/useLoc
 import { createPortal } from "react-dom";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
-import { s as semanticClassNames } from "../chunks/constants36.js";
+import { s as semanticClassNames } from "../chunks/constants37.js";
 import { A as AnimatedIcon } from "../chunks/AnimatedIcon.js";
 import { useService } from "@wix/services-manager-react";
 import { d as defineService } from "../chunks/index7.js";

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

@@ -1,7 +1,7 @@
 import { L as LAYOUT, a as ACTIONS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, E as ELEMENTS, N as NativeStateType, D as DATA, A as Archetype } from "../chunks/chunk-JPMZBG44.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 { D as DesignStates, a as DisplayNames, h as homepageModeValues, d as defaultStateValues, b as separatorValues, c as componentMetadata, s as semanticClassNames } from "../chunks/constants36.js";
+import { D as DesignStates, a as DisplayNames, h as homepageModeValues, d as defaultStateValues, b as separatorValues, c as componentMetadata, s as semanticClassNames } from "../chunks/constants37.js";
 import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: componentMetadata.id,

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { CheckboxProps } from './Checkbox.types';
+export default function CheckboxComponent(props: CheckboxProps): React.JSX.Element;

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

@@ -0,0 +1,20 @@
+import { A11y, Direction } from '@wix/editor-react-types';
+import { SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+export type CheckboxProps = SdkFunctionFocusableProps & {
+    id: string;
+    className: string;
+    label: string;
+    tooltip?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean) => void;
+    direction?: Direction;
+    a11y?: A11y;
+    wix?: {
+        presetsWrapperProps?: Record<string, unknown>;
+    };
+};

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

@@ -0,0 +1,2 @@
+import { default as Checkbox } from './Checkbox';
+export default Checkbox;

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

@@ -0,0 +1,166 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c as clsx } from "../chunks/clsx.js";
+import { F as Field, c as Checkbox, T as Tooltip } from "../chunks/index10.js";
+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, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants36.js";
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
+const root = "root__0DpH8";
+const field = "field__R0D8f";
+const item = "item__EzhwB";
+const control = "control__7-RJh";
+const indicator = "indicator__dzBy2";
+const checkmark = "checkmark__SY2jU";
+const label = "label__Y3ciV";
+const tooltipButton = "tooltipButton__EXd4N";
+const tooltip = "tooltip__Eudyd";
+const styles = {
+  root,
+  field,
+  item,
+  control,
+  indicator,
+  checkmark,
+  label,
+  tooltipButton,
+  tooltip
+};
+const noop = () => {
+};
+function CheckboxComponent(props) {
+  const environmentService = useService(EnvironmentDefinition);
+  const {
+    id,
+    className = "",
+    label: label2 = defaultValues.label,
+    tooltip: tooltip2 = defaultValues.tooltip,
+    defaultChecked = defaultValues.defaultChecked,
+    readOnly = defaultValues.readOnly,
+    required = defaultValues.required,
+    disabled = defaultValues.disabled,
+    indeterminate = defaultValues.indeterminate,
+    direction,
+    a11y,
+    onChange = noop,
+    onFocus = noop,
+    onBlur = noop,
+    wix
+  } = props;
+  const isControlled = props.checked !== void 0;
+  const ariaLabel = !label2 ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
+  const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
+  const rootClassName = clsx(
+    className,
+    styles.root,
+    selectors.root,
+    !direction && directionStyles.fallbackDirection
+  );
+  return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      ...getDataAttributes(props),
+      className: rootClassName,
+      dir: direction,
+      lang: environmentService.language,
+      "data-testid": TestIds.root,
+      children: /* @__PURE__ */ jsx(Field.Root, { className: styles.field, children: /* @__PURE__ */ jsxs(
+        Field.Item,
+        {
+          className: clsx(
+            styles.item,
+            formatClassNames(semanticClassNames.root)
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox.Root,
+              {
+                ...isControlled ? { checked: props.checked } : { defaultChecked },
+                onCheckedChange: (checked) => onChange(checked),
+                required,
+                readOnly,
+                disabled,
+                indeterminate,
+                className: clsx(
+                  styles.control,
+                  formatClassNames(semanticClassNames.control)
+                ),
+                "data-testid": TestIds.control,
+                "aria-label": ariaLabel,
+                onFocus,
+                onBlur,
+                children: /* @__PURE__ */ jsx(
+                  Checkbox.Indicator,
+                  {
+                    keepMounted: true,
+                    className: clsx(
+                      styles.indicator,
+                      selectors.indicator,
+                      formatClassNames(semanticClassNames.indicator)
+                    ),
+                    "data-testid": TestIds.indicator,
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        className: styles.checkmark,
+                        viewBox: "0 0 16 16",
+                        "aria-hidden": "true",
+                        focusable: "false",
+                        children: /* @__PURE__ */ jsx("path", { d: "M6.667 11.333 3.333 8l1.18-1.18 2.154 2.146 4.82-4.819 1.18 1.187z" })
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            label2 && /* @__PURE__ */ jsxs(
+              Field.Label,
+              {
+                className: clsx(
+                  styles.label,
+                  selectors.label,
+                  formatClassNames(semanticClassNames.label)
+                ),
+                "data-testid": TestIds.label,
+                children: [
+                  label2,
+                  required && /* @__PURE__ */ jsx(
+                    RequiredIndicator,
+                    {
+                      className: formatClassNames(
+                        semanticClassNames.requiredIndicator
+                      ),
+                      "data-testid": TestIds.requiredIndicator
+                    }
+                  )
+                ]
+              }
+            ),
+            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" })
+                }
+              ),
+              /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip.Popup, { className: styles.tooltip, children: tooltip2 }) }) })
+            ] }) })
+          ]
+        }
+      ) })
+    }
+  ) });
+}
+export {
+  CheckboxComponent as default
+};

package/dist/site/components/Checkbox/component.preview.d.ts

@@ -0,0 +1,4 @@
+import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
+import { default as Checkbox } from './Checkbox';
+export default Checkbox;
+export declare const resolveManifestOverrides: ResolveManifestOverrides;

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

@@ -0,0 +1,85 @@
+export declare const DisplayNames: {
+    root: {
+        elementDisplayName: string;
+        data: {
+            checked: string;
+            defaultChecked: string;
+            required: string;
+            readOnly: string;
+            disabled: string;
+            indeterminate: string;
+            label: string;
+            tooltip: string;
+        };
+        cssCustomProperties: {
+            gap: string;
+            alignment: string;
+        };
+    };
+    indicator: {
+        elementDisplayName: string;
+        cssCustomProperties: {
+            backgroundColor: string;
+            borderColor: string;
+            borderWidth: string;
+            checkmarkColor: string;
+            size: string;
+        };
+        displayGroups: {
+            borderGroup: string;
+        };
+    };
+    label: {
+        elementDisplayName: string;
+    };
+};
+export declare const DesignStates: {
+    readonly indicator: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "checkbox__indicator--hover";
+        };
+        readonly focus: {
+            readonly displayName: "Focus";
+            readonly className: "checkbox__indicator--focus";
+        };
+        readonly disabled: {
+            readonly displayName: "Disabled";
+            readonly className: "checkbox__indicator--disabled";
+        };
+        readonly invalid: {
+            readonly displayName: "Invalid";
+            readonly className: "checkbox__indicator--invalid";
+        };
+    };
+};
+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 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";
+};
+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";
+};

package/dist/site/components/Checkbox/css.css

@@ -0,0 +1,183 @@
+.root__0DpH8 {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+.field__R0D8f {
+  display: flex;
+}
+
+.item__EzhwB {
+  display: inline-flex;
+  align-items: center;
+  column-gap: var(--gap, 8px);
+  justify-content: var(--alignment, flex-start);
+}
+
+.control__7-RJh {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.control__7-RJh:hover, .control__7-RJh:focus-within {
+  outline: none;
+}
+.control__7-RJh[data-disabled] {
+  cursor: default;
+  pointer-events: none;
+}
+
+.control__7-RJh:focus-visible .indicator__dzBy2,
+.control__7-RJh:has(:focus-visible) .indicator__dzBy2,
+.indicator__dzBy2.checkbox__indicator--focus {
+  outline: 2px solid #116dff;
+  outline-offset: 2px;
+}
+
+.indicator__dzBy2 {
+  box-sizing: content-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--checkboxSize, 16px);
+  height: var(--checkboxSize, 16px);
+  border-style: solid;
+  border-color: var(--indicator-border);
+  border-width: var(--borderWidth, 1px);
+  background-color: var(--indicator-bg);
+  transition: background-color 0.2s linear, border-color 0.2s linear;
+  --indicator-bg: var(--backgroundColor, #fff);
+  --indicator-border: var(
+    --borderColor,
+    color-mix(in srgb, #000 60%, transparent)
+  );
+}
+
+.control__7-RJh:hover .indicator__dzBy2,
+.control__7-RJh:focus-within .indicator__dzBy2,
+.indicator__dzBy2.checkbox__indicator--hover {
+  --indicator-border: var(--borderColor, #000);
+}
+
+.control__7-RJh[data-checked] .indicator__dzBy2,
+.control__7-RJh[data-indeterminate] .indicator__dzBy2,
+.indicator__dzBy2.checkbox__indicator--indeterminate {
+  --indicator-bg: var(--backgroundColor, #116dff);
+  --indicator-border: var(--borderColor, var(--backgroundColor, #116dff));
+}
+
+.control__7-RJh[data-disabled] .indicator__dzBy2,
+.indicator__dzBy2.checkbox__indicator--disabled {
+  opacity: 0.55;
+}
+
+.control__7-RJh[data-invalid] .indicator__dzBy2,
+.indicator__dzBy2.checkbox__indicator--invalid {
+  --indicator-border: var(--borderColor, #e62214);
+}
+
+.checkmark__SY2jU {
+  width: 70%;
+  height: 70%;
+}
+.checkmark__SY2jU path {
+  fill: transparent;
+  transition: fill 0.2s linear;
+}
+
+.control__7-RJh[data-checked] .checkmark__SY2jU path {
+  fill: var(--checkmarkColor, #fff);
+}
+
+/* Indeterminate: hide the tick and draw a centered dash instead. */
+.control__7-RJh[data-indeterminate] .checkmark__SY2jU,
+.indicator__dzBy2.checkbox__indicator--indeterminate .checkmark__SY2jU {
+  display: none;
+}
+
+.control__7-RJh[data-indeterminate] .indicator__dzBy2::after,
+.indicator__dzBy2.checkbox__indicator--indeterminate::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 60%;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--checkmarkColor, #fff);
+}
+
+.label__Y3ciV {
+  cursor: pointer;
+  margin-bottom: 0;
+}
+
+.tooltipButton__EXd4N {
+  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__EXd4N:hover, .tooltipButton__EXd4N:focus-visible {
+  opacity: 1;
+}
+.tooltipButton__EXd4N:focus-visible {
+  outline: none;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px #116dff;
+}
+.tooltipButton__EXd4N svg {
+  width: 16px;
+  height: 16px;
+}
+
+.tooltip__Eudyd {
+  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);
+}.checkbox {
+  --gap: 8px;
+}
+
+.checkbox__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);
+}
+.presetWrapper__J1yzj {
+  display: contents;
+}

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

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

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

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

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

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