@wix/editor-react-components 1.2768.0 → 1.2769.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/Menu/component.js

@@ -11,6 +11,7 @@ import { g as getItemDepthSelector, r as rootItemDepthLevel, s as subItemDepthLe
 import { d as debounce } from "../chunks/performanceUtils.js";
 import { L as Link } from "../chunks/Link.js";
 import { i as isEmptyObject, a as getDataAttributes } from "../chunks/dataUtils.js";
+import { g as getWixBannerHeight } from "../chunks/getWixBannerHeight.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
@@ -1050,10 +1051,6 @@ const toBoxShadowLayers = (shadow) => {
   }
   return layers.length ? { layers } : void 0;
 };
-const getWixBannerHeight = () => {
-  const cssVarHeight = window.getComputedStyle(document.documentElement).getPropertyValue("--wix-ads-height");
-  return Number.parseInt(cssVarHeight, 10) || 0;
-};
 const getLeftForItemAnchor = ({ align, itemEl, dropdownEl }) => {
   switch (align) {
     case "start":

package/dist/site/components/Menu/components/MenuContent/MenuItem/updateDropdownDomStyles.d.ts

@@ -1,4 +1,3 @@
-export declare const getWixBannerHeight: () => number;
 export declare const calculateShadowMargin: (dropdownEl: HTMLElement) => number;
 export declare const updateDropdownDomStyles: (itemEl: HTMLElement | null, wasHiddenBefore?: boolean) => void;
 export declare const resetDropdownDomStyles: (itemEl?: HTMLElement) => void;

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

@@ -0,0 +1,7 @@
+const getWixBannerHeight = () => {
+  const cssVarHeight = window.getComputedStyle(document.documentElement).getPropertyValue("--wix-ads-height");
+  return Number.parseInt(cssVarHeight, 10) || 0;
+};
+export {
+  getWixBannerHeight as g
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2768.0",
+  "version": "1.2769.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -121,7 +121,7 @@
     "@wix/component-protocol": "^1.253.0",
     "@wix/components-infra": "^1.0.0",
     "@wix/design-system": "^1.297.0",
-    "@wix/design-system-illustrations": "^2.37.2",
+    "@wix/design-system-illustrations": "^2.40.1",
     "@wix/editor": "^1.726.0",
     "@wix/editor-elements-scripts": "^1.0.0",
     "@wix/editor-elements-test-utils": "^1.0.0",
@@ -222,5 +222,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "afbba857ef069859ac2a1e7d19bad5e7364a541ca416e236d8c54e4c"
+  "falconPackageHash": "5f1e5a2e8246711fdb37f09376220b4ba9ba5f1657a69cef283203ea"
 }