@wix/editor-react-components 1.2153.0

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

@@ -0,0 +1,532 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo, useRef, useLayoutEffect } from "react";
+import { c as clsx } from "../chunks/clsx.js";
+import { O as OVERFLOW_BEHAVIOR, c as classes } from "../chunks/constants16.js";
+import { d as debounce } from "../chunks/performanceUtils.js";
+import { useService } from "@wix/services-manager-react";
+import { d as definitionExports } from "../chunks/index2.js";
+import { H as HAS_CUSTOM_FOCUS_CLASSNAME } from "../chunks/a11y.js";
+const tabs = "tabs__xLDfA";
+const tabMenu = "tab-menu__LMnG9";
+const tabMenuItemsWrapper = "tab-menu-items-wrapper__dvJqZ";
+const tabMenuItems = "tab-menu-items__eqjW5";
+const menuItem = "menu-item__BJ1CW";
+const isActive = "is-active__tEw9F";
+const tabContent = "tab-content__IB3Kn";
+const tabContentItem = "tab-content-item__7WLdI";
+const isPrevious = "is-previous__BxrT5";
+const transitionTypeSlide = "transition-type-slide__kkpIQ";
+const enter = "enter__t-a57";
+const transitionDirectionDown = "transition-direction-down__mbhvZ";
+const tabSlideInFromTop = "tabSlideInFromTop__bXsVe";
+const exit = "exit__CMHqX";
+const tabSlideOutToBottom = "tabSlideOutToBottom__G8b19";
+const transitionDirectionUp = "transition-direction-up__2jG96";
+const tabSlideInFromBottom = "tabSlideInFromBottom__ksDzH";
+const tabSlideOutToTop = "tabSlideOutToTop__Ju38M";
+const transitionTypeCrossFade = "transition-type-cross-fade__avCEA";
+const tabFadeIn = "tabFadeIn__k5aCF";
+const tabFadeOut = "tabFadeOut__hBpbB";
+const styles$1 = {
+  tabs,
+  "tab-menu": "tab-menu__LMnG9",
+  tabMenu,
+  "tab-menu-items-wrapper": "tab-menu-items-wrapper__dvJqZ",
+  tabMenuItemsWrapper,
+  "tab-menu-items": "tab-menu-items__eqjW5",
+  tabMenuItems,
+  "menu-item": "menu-item__BJ1CW",
+  menuItem,
+  "is-active": "is-active__tEw9F",
+  isActive,
+  "tab-content": "tab-content__IB3Kn",
+  tabContent,
+  "tab-content-item": "tab-content-item__7WLdI",
+  tabContentItem,
+  "is-previous": "is-previous__BxrT5",
+  isPrevious,
+  "transition-type-slide": "transition-type-slide__kkpIQ",
+  transitionTypeSlide,
+  enter,
+  "transition-direction-down": "transition-direction-down__mbhvZ",
+  transitionDirectionDown,
+  tabSlideInFromTop,
+  exit,
+  tabSlideOutToBottom,
+  "transition-direction-up": "transition-direction-up__2jG96",
+  transitionDirectionUp,
+  tabSlideInFromBottom,
+  tabSlideOutToTop,
+  "transition-type-cross-fade": "transition-type-cross-fade__avCEA",
+  transitionTypeCrossFade,
+  tabFadeIn,
+  tabFadeOut
+};
+const slugify = (value) => {
+  const slug = value.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/-+/g, "-");
+  return slug || "tab";
+};
+const createTabsA11yIds = (componentId, tabs2) => {
+  const counts = /* @__PURE__ */ new Map();
+  return tabs2.map((tab) => {
+    const base = slugify(tab.name ?? "");
+    const next = (counts.get(base) ?? 0) + 1;
+    counts.set(base, next);
+    const unique = next === 1 ? base : `${base}-${next}`;
+    const tabId = `tab-${componentId}-${unique}`;
+    const panelId = `tabpanel-${componentId}-${unique}`;
+    return { tabId, panelId };
+  });
+};
+const useOverflowBehavior = (ref, tabsCount) => {
+  const [isScrollEnabled, setIsScrollEnabled] = useState(true);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const updateOverflowBehavior = () => {
+      const flexWrap = window.getComputedStyle(element).flexWrap;
+      setIsScrollEnabled(flexWrap !== OVERFLOW_BEHAVIOR.WRAP);
+    };
+    updateOverflowBehavior();
+    const observer = new ResizeObserver(updateOverflowBehavior);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref, tabsCount]);
+  return isScrollEnabled;
+};
+const getTargetIndex = ({
+  index,
+  direction,
+  tabsCount,
+  isNext
+}) => {
+  const step = isNext === (direction === "rtl") ? -1 : 1;
+  return (index + step + tabsCount) % tabsCount;
+};
+const useTabsKeyboardNavigation = ({
+  activeTab,
+  a11yIds,
+  direction = "ltr"
+}) => {
+  const [currentTab, setCurrentTab] = useState(activeTab);
+  useEffect(() => {
+    setCurrentTab(activeTab);
+  }, [activeTab]);
+  const handleTabClick = useCallback((index) => {
+    setCurrentTab(index);
+  }, []);
+  const handleKeyDown = useCallback(
+    (e, index) => {
+      let targetIndex = index;
+      const tabsCount = a11yIds.length;
+      switch (e.key) {
+        case "ArrowRight":
+          targetIndex = getTargetIndex({
+            index,
+            direction,
+            tabsCount,
+            isNext: true
+          });
+          break;
+        case "ArrowLeft":
+          targetIndex = getTargetIndex({
+            index,
+            direction,
+            tabsCount,
+            isNext: false
+          });
+          break;
+        case "Home":
+          targetIndex = 0;
+          break;
+        case "End":
+          targetIndex = tabsCount - 1;
+          break;
+        default:
+          return;
+      }
+      setCurrentTab(targetIndex);
+      const tabElement = document.getElementById(
+        a11yIds[targetIndex].tabId ?? ""
+      );
+      tabElement == null ? void 0 : tabElement.focus();
+    },
+    [a11yIds, direction]
+  );
+  const getTabIndex = useCallback(
+    (index) => {
+      return index === currentTab ? 0 : -1;
+    },
+    [currentTab]
+  );
+  return {
+    currentTab,
+    handleTabClick,
+    handleKeyDown,
+    getTabIndex
+  };
+};
+const SCROLL_AMOUNT = 250;
+const MINIMAL_IMPORTANT_SCROLL_DISTANCE = 15;
+const scrollTabs = (container, direction, scrollDirection) => {
+  const isRTL = direction === "rtl";
+  const isMovingLeft = scrollDirection === "forward" ? isRTL : !isRTL;
+  const scrollDelta = isMovingLeft ? -SCROLL_AMOUNT : SCROLL_AMOUNT;
+  container.scrollTo({
+    left: container.scrollLeft + scrollDelta,
+    top: 0,
+    behavior: "smooth"
+  });
+};
+const DEBOUNCE_DURATION = 100;
+const useTabsScroll = ({
+  containerRef,
+  isScrollEnabled,
+  direction,
+  tabsCount
+}) => {
+  const [isScrollable, setIsScrollable] = useState(false);
+  const [isScrollBackwardButtonVisible, setIsScrollBackwardButtonVisible] = useState(false);
+  const [isScrollForwardButtonVisible, setIsScrollForwardButtonVisible] = useState(false);
+  const updateScrollState = useMemo(
+    () => debounce(() => {
+      const { current: container } = containerRef;
+      if (!container || !isScrollEnabled) {
+        setIsScrollable(false);
+        setIsScrollBackwardButtonVisible(false);
+        setIsScrollForwardButtonVisible(false);
+        return;
+      }
+      const { scrollWidth, clientWidth } = container;
+      const scrollLeft = Math.abs(container.scrollLeft);
+      const isScrollableNow = clientWidth < scrollWidth;
+      setIsScrollable(isScrollableNow);
+      setIsScrollBackwardButtonVisible(
+        isScrollableNow && scrollLeft > MINIMAL_IMPORTANT_SCROLL_DISTANCE
+      );
+      setIsScrollForwardButtonVisible(
+        isScrollableNow && scrollLeft < scrollWidth - clientWidth - MINIMAL_IMPORTANT_SCROLL_DISTANCE
+      );
+    }, DEBOUNCE_DURATION),
+    [isScrollEnabled, containerRef]
+  );
+  const handleScrollBackward = useCallback(() => {
+    if (containerRef.current && isScrollEnabled && isScrollable) {
+      scrollTabs(containerRef.current, direction, "backward");
+    }
+  }, [isScrollEnabled, isScrollable, containerRef, direction]);
+  const handleScrollForward = useCallback(() => {
+    if (containerRef.current && isScrollEnabled && isScrollable) {
+      scrollTabs(containerRef.current, direction, "forward");
+    }
+  }, [isScrollEnabled, isScrollable, containerRef, direction]);
+  const handleOnScroll = useCallback(() => {
+    if (!isScrollEnabled) {
+      return;
+    }
+    updateScrollState();
+  }, [updateScrollState, isScrollEnabled]);
+  useEffect(() => {
+    if (!isScrollEnabled) {
+      return () => updateScrollState.cancel();
+    }
+    updateScrollState();
+    const element = containerRef.current;
+    if (!element) {
+      return () => updateScrollState.cancel();
+    }
+    const observer = new ResizeObserver(() => updateScrollState());
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      updateScrollState.cancel();
+    };
+  }, [containerRef, updateScrollState, isScrollEnabled, tabsCount]);
+  const isScrollControlsVisible = isScrollBackwardButtonVisible || isScrollForwardButtonVisible;
+  return {
+    handleOnScroll,
+    handleScrollForward,
+    handleScrollBackward,
+    isScrollBackwardButtonVisible,
+    isScrollForwardButtonVisible,
+    isScrollControlsVisible
+  };
+};
+const useTabsTransition = ({
+  currentTab,
+  transitionType
+}) => {
+  const previousActiveTabRef = useRef(currentTab);
+  const [previousActiveTabIndex, setPreviousActiveTabIndex] = useState(-1);
+  useLayoutEffect(() => {
+    if (previousActiveTabRef.current !== currentTab) {
+      setPreviousActiveTabIndex(previousActiveTabRef.current);
+      previousActiveTabRef.current = currentTab;
+    }
+  }, [currentTab]);
+  const shouldAnimate = transitionType !== "none" && previousActiveTabIndex !== -1;
+  return {
+    previousActiveTabIndex,
+    shouldAnimate
+  };
+};
+const useResolvedDirection = (direction) => {
+  const environmentService = useService(definitionExports.EnvironmentDefinition);
+  const siteDirection = environmentService.getLanguageDirection();
+  return direction || siteDirection;
+};
+const root = "root__GdmsB";
+const button = "button__jChBM";
+const visible = "visible__KAlr1";
+const icon = "icon__VvYXo";
+const rtl = "rtl__vk6Rv";
+const styles = {
+  root,
+  button,
+  visible,
+  icon,
+  rtl
+};
+const ARROW_PATHS = {
+  forward: "M6 6L.8 0 0 .7 4.7 6 0 11.3l.8.7z",
+  backward: "M0 6L5.2 0 6 .7 1.3 6 6 11.3 5.2 12z"
+};
+const ScrollButton = ({
+  direction,
+  onClick,
+  isVisible,
+  isRTL
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    onMouseDown: (event) => event.preventDefault(),
+    onClick,
+    "aria-hidden": !isVisible,
+    "aria-label": direction === "forward" ? "Scroll forward" : "Scroll backward",
+    className: clsx(styles.button, classes.scrollButton, {
+      [styles.visible]: isVisible,
+      HAS_CUSTOM_FOCUS_CLASSNAME
+    }),
+    "data-direction": direction,
+    tabIndex: isVisible ? 0 : -1,
+    children: /* @__PURE__ */ jsx("span", { className: clsx(styles.icon, { [styles.rtl]: isRTL }), children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 12", children: /* @__PURE__ */ jsx("path", { d: ARROW_PATHS[direction] }) }) })
+  }
+);
+const ScrollControls = ({
+  isScrollBackwardButtonVisible,
+  isScrollForwardButtonVisible,
+  onScrollBackward,
+  onScrollForward,
+  direction
+}) => {
+  const isRTL = direction === "rtl";
+  return /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsx(
+      ScrollButton,
+      {
+        direction: "backward",
+        onClick: onScrollBackward,
+        isVisible: isScrollBackwardButtonVisible,
+        isRTL
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollButton,
+      {
+        direction: "forward",
+        onClick: onScrollForward,
+        isVisible: isScrollForwardButtonVisible,
+        isRTL
+      }
+    )
+  ] });
+};
+const Tabs = (props) => {
+  const {
+    id,
+    className,
+    tabs: tabs2,
+    activeTab = 0,
+    transitionType = "none",
+    transitionDuration = 0.3,
+    transitionDirection = "down",
+    direction,
+    onChange,
+    onTabItemClicked,
+    onClick,
+    onDblClick,
+    onMouseIn,
+    onMouseOut,
+    onFocus,
+    onBlur
+  } = props;
+  const effectiveDirection = useResolvedDirection(direction);
+  const a11yIds = useMemo(() => createTabsA11yIds(id, tabs2 || []), [id, tabs2]);
+  const menuWrapperRef = useRef(null);
+  const menuItemsRef = useRef(null);
+  const isScrollEnabled = useOverflowBehavior(menuItemsRef, (tabs2 == null ? void 0 : tabs2.length) || 0);
+  const { currentTab, handleTabClick, handleKeyDown, getTabIndex } = useTabsKeyboardNavigation({
+    activeTab,
+    a11yIds,
+    direction: effectiveDirection
+  });
+  const {
+    handleOnScroll,
+    handleScrollForward,
+    handleScrollBackward,
+    isScrollBackwardButtonVisible,
+    isScrollForwardButtonVisible,
+    isScrollControlsVisible
+  } = useTabsScroll({
+    containerRef: menuWrapperRef,
+    isScrollEnabled,
+    direction: effectiveDirection,
+    tabsCount: (tabs2 == null ? void 0 : tabs2.length) || 0
+  });
+  const { previousActiveTabIndex, shouldAnimate } = useTabsTransition({
+    currentTab,
+    transitionType
+  });
+  const prevTabRef = useRef(currentTab);
+  useEffect(() => {
+    if (prevTabRef.current !== currentTab) {
+      prevTabRef.current = currentTab;
+      onChange == null ? void 0 : onChange();
+    }
+  }, [currentTab, onChange]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: clsx(styles$1.tabs, classes.tabs, className),
+      style: {
+        "--transition-duration": `${transitionDuration}s`
+      },
+      onClick,
+      onDoubleClick: onDblClick,
+      onMouseEnter: onMouseIn,
+      onMouseLeave: onMouseOut,
+      onFocus,
+      onBlur,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(styles$1["tab-menu"], classes.tabMenu),
+            dir: effectiveDirection,
+            children: /* @__PURE__ */ jsxs(
+              "nav",
+              {
+                className: clsx(
+                  styles$1["tab-menu-items-wrapper"],
+                  classes.tabMenuItemsWrapper
+                ),
+                ref: menuWrapperRef,
+                ...isScrollEnabled && {
+                  onScroll: handleOnScroll
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: clsx(
+                        styles$1["tab-menu-items"],
+                        classes.tabMenuItems
+                      ),
+                      role: "tablist",
+                      ref: menuItemsRef,
+                      children: tabs2 == null ? void 0 : tabs2.map((tab, index) => {
+                        const { tabId, panelId } = a11yIds[index];
+                        const isActive2 = index === currentTab;
+                        return /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            role: "tab",
+                            id: tabId,
+                            "aria-selected": isActive2,
+                            "aria-controls": panelId,
+                            tabIndex: getTabIndex(index),
+                            className: clsx(
+                              styles$1["menu-item"],
+                              classes.menuItem,
+                              HAS_CUSTOM_FOCUS_CLASSNAME,
+                              {
+                                [styles$1["is-active"]]: isActive2
+                              }
+                            ),
+                            onMouseDown: (event) => event.preventDefault(),
+                            onClick: () => {
+                              handleTabClick(index);
+                              onTabItemClicked == null ? void 0 : onTabItemClicked();
+                            },
+                            onKeyDown: (e) => handleKeyDown(e, index),
+                            children: tab.name
+                          },
+                          tabId
+                        );
+                      })
+                    }
+                  ),
+                  isScrollEnabled && isScrollControlsVisible && /* @__PURE__ */ jsx(
+                    ScrollControls,
+                    {
+                      onScrollBackward: handleScrollBackward,
+                      onScrollForward: handleScrollForward,
+                      isScrollBackwardButtonVisible,
+                      isScrollForwardButtonVisible,
+                      direction
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              styles$1["tab-content"],
+              classes.tabContentContainer
+            ),
+            children: tabs2 == null ? void 0 : tabs2.map((tab, index) => {
+              const { tabId, panelId } = a11yIds[index];
+              const isActive2 = index === currentTab;
+              const isPrevious2 = index === previousActiveTabIndex;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "tabpanel",
+                  id: panelId,
+                  "aria-labelledby": tabId,
+                  className: clsx(
+                    styles$1["tab-content-item"],
+                    styles$1[`transition-type-${transitionType}`],
+                    classes.tabContentItem,
+                    transitionType === "slide" && styles$1[`transition-direction-${transitionDirection}`],
+                    {
+                      [styles$1["is-active"]]: isActive2,
+                      [styles$1["is-previous"]]: shouldAnimate && isPrevious2,
+                      [styles$1.enter]: shouldAnimate && isActive2,
+                      [styles$1.exit]: shouldAnimate && isPrevious2
+                    }
+                  ),
+                  ...index !== currentTab && { inert: "" },
+                  children: tab.content
+                },
+                panelId
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Tabs as default
+};

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { EditorElement } from '@wix/component-protocol/schema';
+import { default as Tabs } from './component';
+export default function TabsPreview(props: React.ComponentProps<typeof Tabs>): React.JSX.Element;
+export declare const resolveManifestOverrides: (content: any) => Partial<EditorElement> | undefined;

package/dist/site/components/Tabs/components/ScrollControls/ScrollControls.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Direction } from '@wix/editor-react-types';
+type ScrollControlsProps = {
+    isScrollBackwardButtonVisible: boolean;
+    isScrollForwardButtonVisible: boolean;
+    onScrollBackward: () => void;
+    onScrollForward: () => void;
+    direction?: Direction;
+};
+export declare const ScrollControls: React.FC<ScrollControlsProps>;
+export {};

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

@@ -0,0 +1,28 @@
+export declare const classes: {
+    tabs: string;
+    tabMenu: string;
+    tabMenuItemsWrapper: string;
+    tabMenuItems: string;
+    menuItem: string;
+    scrollButton: string;
+    tabContentContainer: string;
+    tabContentItem: string;
+};
+export type TransitionType = 'none' | 'slide' | 'cross-fade';
+export type TransitionDirection = 'up' | 'down';
+export declare const OVERFLOW_BEHAVIOR: {
+    readonly SCROLL: "nowrap";
+    readonly WRAP: "wrap";
+};
+export declare const DesignStates: {
+    readonly root: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "tabs--hover";
+        };
+        readonly disabled: {
+            readonly displayName: "Disabled";
+            readonly className: "tabs--disabled";
+        };
+    };
+};