@wix/editor-react-components 1.2768.0 → 1.2770.0

package/dist/site/components/AccordionComponent/AccordionItem.d.ts

@@ -7,6 +7,7 @@ export interface AccordionItemProps {
     isOpen?: boolean;
     titleHtmlTag?: string;
     elementProps?: AccordionElementProps;
+    triggerRef?: React.Ref<HTMLButtonElement>;
 }
 declare const AccordionItem: React.FC<AccordionItemProps>;
 export default AccordionItem;

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

@@ -1,12 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useRef, useEffect, useMemo, useState, useCallback } from "react";
+import React__default, { useRef, useEffect, useMemo, useState, useCallback, useLayoutEffect } from "react";
 import "react-dom";
 import { c as clsx } from "../chunks/clsx.js";
 import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
 import { D as DesignStates, a as DEFAULT_PROPS } from "../chunks/constants43.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import { r as require_baseGetTag, d as require_root, b as require_Symbol, c as requireIsArray, a as requireIsObjectLike, e as require_freeGlobal } from "../chunks/isObjectLike.js";
+import { useService } from "@wix/services-manager-react";
+import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { g as getWixBannerHeight } from "../chunks/getWixBannerHeight.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 var isObject_1;
 var hasRequiredIsObject;
@@ -2515,7 +2518,7 @@ const styles = {
 };
 const AccordionItem = (props) => {
   var _a, _b, _c, _d, _e;
-  const { item, isOpen, titleHtmlTag, elementProps } = props;
+  const { item, isOpen, titleHtmlTag, elementProps, triggerRef } = props;
   const { animatedIcon: animatedIconProps } = elementProps ?? {};
   const animatedIconRef = useRef(null);
   const isInitialRender = useRef(true);
@@ -2548,6 +2551,7 @@ const AccordionItem = (props) => {
         /* @__PURE__ */ jsx(Header, { asChild: true, children: /* @__PURE__ */ jsx(HeaderTag, { children: /* @__PURE__ */ jsxs(
           Trigger2,
           {
+            ref: triggerRef,
             className: clsx(
               "item-title",
               styles["accordion-header"],
@@ -2687,6 +2691,51 @@ function useAccordionState(items, defaultOpen = "none", allowMultipleOpen = fals
     handleValueChange
   };
 }
+function useScrollToClickedItem(openedItems, onValueChange) {
+  const itemTriggersRef = useRef([]);
+  const itemTriggerRefCallbacksRef = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const clickedItemIdRef = useRef(void 0);
+  const { reducedMotion } = useService(EnvironmentDefinition);
+  useLayoutEffect(() => {
+    const clickedItemId = clickedItemIdRef.current;
+    clickedItemIdRef.current = void 0;
+    if (clickedItemId === void 0) {
+      return;
+    }
+    const clickedItemTrigger = itemTriggersRef.current[parseInt(clickedItemId, 10)];
+    if (!clickedItemTrigger) {
+      return;
+    }
+    const isTriggerHiddenAboveViewport = clickedItemTrigger.getBoundingClientRect().top < getWixBannerHeight();
+    if (isTriggerHiddenAboveViewport) {
+      clickedItemTrigger.scrollIntoView({
+        block: "start",
+        behavior: reducedMotion ? "instant" : "smooth"
+      });
+    }
+  }, [openedItems, reducedMotion]);
+  const handleClickValueChange = useCallback(
+    (value) => {
+      clickedItemIdRef.current = normalizeAccordionValue(value).find(
+        (id) => !openedItems.includes(id)
+      );
+      onValueChange(value);
+    },
+    [openedItems, onValueChange]
+  );
+  const getItemTriggerRef = useCallback((index) => {
+    const refCallbacks = itemTriggerRefCallbacksRef.current;
+    if (!refCallbacks.has(index)) {
+      refCallbacks.set(index, (element) => {
+        itemTriggersRef.current[index] = element;
+      });
+    }
+    return refCallbacks.get(index);
+  }, []);
+  return { handleClickValueChange, getItemTriggerRef };
+}
 const AccordionContainer = (props) => {
   var _a, _b;
   const {
@@ -2715,6 +2764,10 @@ const AccordionContainer = (props) => {
     activeItem,
     previewItemContent
   );
+  const { handleClickValueChange, getItemTriggerRef } = useScrollToClickedItem(
+    openedItems,
+    handleValueChange
+  );
   const isMultipleMode = shouldUseMultipleMode(allowMultipleOpen, defaultOpen);
   const conditionalProps = isMultipleMode ? {
     type: "multiple",
@@ -2730,7 +2783,8 @@ const AccordionContainer = (props) => {
       item: { ...item, id: index.toString() },
       isOpen: openedItems.includes(index.toString()),
       titleHtmlTag,
-      elementProps
+      elementProps,
+      triggerRef: getItemTriggerRef(index)
     },
     index
   ));
@@ -2755,7 +2809,7 @@ const AccordionContainer = (props) => {
       children: /* @__PURE__ */ jsx(
         Root2,
         {
-          onValueChange: handleValueChange,
+          onValueChange: handleClickValueChange,
           ...conditionalProps,
           className: styles["accordion-root"],
           children: accordionChildren

package/dist/site/components/AccordionComponent/css.css

@@ -18,6 +18,7 @@
   justify-content: space-between;
   text-align: start;
   border-color: #000000;
+  scroll-margin-top: var(--wix-ads-height, 0px);
 }
 .accordion-header__eNiKz:hover .accordion-item-label__w-z9o, .accordion-header__eNiKz[data-state=open] .accordion-item-label__w-z9o, .accordion-header__eNiKz.accordion-component__item-title--hover .accordion-item-label__w-z9o, .accordion-header__eNiKz.accordion-component__item-title--selected .accordion-item-label__w-z9o {
   text-decoration: underline;

package/dist/site/components/AccordionComponent/hooks.d.ts

@@ -1,5 +1,10 @@
+import { RefCallback } from 'react';
 import { AccordionItem, AccordionContainerProps } from './types';
 export declare function useAccordionState(items: Array<AccordionItem>, defaultOpen?: AccordionContainerProps['defaultOpen'], allowMultipleOpen?: boolean, activeItem?: number, previewItemContent?: boolean): {
     openedItems: string[];
     handleValueChange: (value: Array<string> | string) => void;
 };
+export declare function useScrollToClickedItem(openedItems: Array<string>, onValueChange: (value: Array<string> | string) => void): {
+    handleClickValueChange: (value: Array<string> | string) => void;
+    getItemTriggerRef: (index: number) => RefCallback<HTMLElement> | undefined;
+};

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

@@ -354,11 +354,15 @@ const manifest = {
       componentUrl: "./site/components/AccordionComponent/component.tsx",
       moduleSpecifier: "@wix/editor-react-components/AccordionComponent",
       dependencies: {
-        componentDependencies: ["@wix/editor-react-components/AnimatedIcon"]
+        componentDependencies: ["@wix/editor-react-components/AnimatedIcon"],
+        serviceDependencies: ["@wix/viewer-service-environment"]
       }
     },
     editor: {
-      componentUrl: "./site/components/AccordionComponent/component.preview.tsx"
+      componentUrl: "./site/components/AccordionComponent/component.preview.tsx",
+      dependencies: {
+        serviceDependencies: ["@wix/viewer-service-environment"]
+      }
     }
   },
   moduleConfiguration: {

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

@@ -9,8 +9,8 @@ import Image3 from "../Image3/component.js";
 import { A as ARIA_LABELS, s as selectors, d as dataDefaults } from "../chunks/constants42.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";
-import { m as $48a7d519b337145d$export$4eaf04e54aa8eed6, n as $fe16bffc7a557bf0$export$7f54fc3180508a52, l as $d447af545b77c9f1$export$f21a1ffae260145a, f as $23f2114a1b82827e$export$e58f029f0fbfdb29, S as $0beb20c9744a2065$export$8467354a121f1b9f, R as $8f5a2122b0992be3$export$8397ddfc504fdb9a, e as $bbaa08b3cd72f041$export$9d1611c77c2fe928, t as $1969ac565cfec8d0$export$de79e2c695e052f3, U as $8296dad1a4c5e0dc$export$8f71654801c2f7cd, c as $d1116acdf220c2da$export$4c014de7c8940b4c, d as $3274bf1495747a7b$export$5add1d006293d136, b as $3e6197669829fe11$export$40bfa8c7b0832715, g as $01b77f81d0f07f68$export$75b6ee27786ba447, A as $e969f22b6713ca4a$export$ae780daf29e6d456, z as $0c4a58759813079a$export$4e328f61c538687f, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../chunks/Group.js";
+import { c as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, d as $64fa3d84918910a7$export$4d86445c2cf5e3, e as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, b as $64fa3d84918910a7$export$2881499e37b75b9a, g as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../chunks/filterDOMProps.js";
+import { r as $48a7d519b337145d$export$4eaf04e54aa8eed6, s as $fe16bffc7a557bf0$export$7f54fc3180508a52, q as $d447af545b77c9f1$export$f21a1ffae260145a, k as $23f2114a1b82827e$export$e58f029f0fbfdb29, S as $0beb20c9744a2065$export$8467354a121f1b9f, R as $8f5a2122b0992be3$export$8397ddfc504fdb9a, a as $bbaa08b3cd72f041$export$9d1611c77c2fe928, y as $1969ac565cfec8d0$export$de79e2c695e052f3, U as $8296dad1a4c5e0dc$export$8f71654801c2f7cd, c as $d1116acdf220c2da$export$4c014de7c8940b4c, j as $3274bf1495747a7b$export$5add1d006293d136, i as $3e6197669829fe11$export$40bfa8c7b0832715, l as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $e969f22b6713ca4a$export$ae780daf29e6d456, E as $0c4a58759813079a$export$4e328f61c538687f, g as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../chunks/Group.js";
 import { a as $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7 } from "../chunks/I18nProvider.js";
 import { $ as $ea3928288112382f$export$439d29a4e110a164 } from "../chunks/VisuallyHidden.js";
 function $1dfdc54e7eb53ba0$export$36da96379f79f245(props) {

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React__default, { useContext, useState, useRef, useMemo, cloneElement, forwardRef, createContext, useCallback, isValidElement, useEffect } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { p as $f39a9eba43920ace$export$8dc98ba7eadeaa56, i as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, $ as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, b as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, n as $3ef42575df84b30b$export$9d1611c77c2fe928, c as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../chunks/filterDOMProps.js";
+import { p as $f39a9eba43920ace$export$8dc98ba7eadeaa56, j as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, c as $64fa3d84918910a7$export$29f1550f4b0d4415, e as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, n as $3ef42575df84b30b$export$9d1611c77c2fe928, g as $64fa3d84918910a7$export$fabf2dc03a41866e, d as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../chunks/filterDOMProps.js";
 import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1 } from "../chunks/useLocalizedStringFormatter.js";
 import { createPortal } from "react-dom";
 import { useService } from "@wix/services-manager-react";

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

@@ -1,30 +1,14 @@
-import { DateValue } from 'react-aria-components';
 import { A11y, Direction } from '@wix/editor-react-types';
-import { SdkFunctionChangeableProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
-import { FieldValidationProps } from '../../../utils/validation/types';
-/** Single date or a start–end range. */
-export type DatePickerSelectionMode = 'single' | 'range';
-/** Smallest editable time unit (React Aria `granularity`). */
-export type DatePickerGranularity = 'day' | 'hour' | 'minute';
-/** A resolved start–end range for the range calendar (or `null` when unset). */
-export type DateRangeValue = {
-    start: DateValue;
-    end: DateValue;
-} | null;
-/**
- * One blocked span. `from`/`to` are ISO `YYYY-MM-DD` strings (inclusive); a single
- * blocked day sets both to the same date. Comes from the `unavailableDates`
- * arrayItems data.
- */
-export type UnavailableDateRange = {
-    from?: string;
-    to?: string;
-};
+/** A `localDate` data value: an ISO `YYYY-MM-DD` calendar date with no time or zone. */
+export type LocalDate = string;
 export type DatePickerElementProps = {
     label?: {
         className?: string;
     };
-    description?: {
+    helperText?: {
+        className?: string;
+    };
+    errorMessage?: {
         className?: string;
     };
     dateInput?: {
@@ -36,79 +20,39 @@ export type DatePickerElementProps = {
     popover?: {
         className?: string;
     };
-    calendar?: {
+    calendarHeader?: {
         className?: string;
     };
-    calendarDay?: {
+    weekdays?: {
         className?: string;
     };
-    today?: {
+    dates?: {
         className?: string;
     };
 };
-export type DatePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & FieldValidationProps<string> & {
-    /** Fires with the selected ISO date string (range mode: the start date). */
-    onChange?: (value: string) => void;
-    /** Range mode: fires with the selected end date as an ISO string. */
-    onEndChange?: (value: string) => void;
+export type DatePickerProps = {
     /** DOM `id` on the root `.datePicker` wrapper. */
     id: string;
     /** Appended to the root `.datePicker`. Use this for CSS-variable and per-element overrides. */
     className: string;
-    /** Single date or a start–end range. */
-    selectionMode: DatePickerSelectionMode;
-    /**
-     * Smallest editable unit. `day` is date-only; `hour`/`minute` add time
-     * segments and make the value an ISO datetime (local wall-clock, no zone).
-     */
-    granularity?: DatePickerGranularity;
-    /**
-     * The selected date as an ISO string — `YYYY-MM-DD`, or `YYYY-MM-DDTHH:MM`
-     * with time granularity (range mode: the start date). The empty string means
-     * no date is selected.
-     */
-    value: string;
-    /**
-     * Range mode only: the end date as an ISO string (`YYYY-MM-DD`, or
-     * `YYYY-MM-DDTHH:MM` with time granularity).
-     */
-    endValue?: string;
-    /** Uncontrolled initial selected date (ISO string). Used only when `value` is not provided. */
-    defaultValue?: string;
-    /** Uncontrolled initial range end date (ISO string). Used only when `endValue` is not provided (range mode). */
-    defaultEndValue?: string;
+    /** The selected date. `undefined` (or an unparseable string) means no date is selected. */
+    value?: LocalDate;
+    /** Fires with the date the visitor picked, or `undefined` when they cleared it. */
+    onValueChange?: (value: LocalDate | undefined) => void;
     /** Optional text label rendered above the field. */
-    label: string;
+    label?: string;
     /** Site-facing helper text rendered under the field. */
-    description?: string;
-    /** Hint text revealed from an info icon next to the label. */
-    tooltip?: string;
-    /** Earliest selectable date as an ISO `YYYY-MM-DD` string. */
-    minDate?: string;
-    /** Latest selectable date as an ISO `YYYY-MM-DD` string. */
-    maxDate?: string;
-    /**
-     * Spans that can't be selected — a list of `{ from, to }` ISO date ranges
-     * (inclusive); a single blocked day sets `from` and `to` to the same date.
-     * Set via data binding / Velo, not the Settings panel.
-     */
-    unavailableDates?: Array<UnavailableDateRange>;
-    /** When `false`, dates before today can't be selected (clamps min to today). */
-    allowPastDates?: boolean;
-    /** When `false`, dates after today can't be selected (clamps max to today). */
-    allowFutureDates?: boolean;
-    /** Marks the field required for form submission. */
-    required?: boolean;
+    helperText?: string;
+    /** A non-empty message switches the field into the error state and is shown under it. */
+    errorMessage?: string;
     /** Shows the date but blocks editing. */
     readOnly?: boolean;
-    /** Renders a clear (✕) control that empties the value. */
-    clearable?: boolean;
     /** Disables interaction with the date picker. */
-    isDisabled?: boolean;
+    disabled?: boolean;
     /** Writing direction applied to the root. */
     direction?: Direction;
     /**
-     * Editor-only: forces the calendar popover open so the Popover/Calendar/Today
+     * Editor-only: forces the calendar popover open so the Popover/Dates
      * design parts are editable on the canvas. Set by the manifest `visibleState`.
      */
     previewCalendarOpen?: boolean;