@wix/editor-react-components 1.2153.0

package/dist/site/components/Menu/sdkUtils/errors.d.ts

@@ -0,0 +1,36 @@
+import { messages } from '../../../../common/sdk/messages';
+declare class NilAssignmentError extends Error {
+    constructor(params: Parameters<typeof messages.nilAssignmentMessage>[0]);
+}
+declare class UnsupportedLinkTypeError extends Error {
+    constructor(params: Parameters<typeof messages.unsupportedLinkType>[0]);
+}
+export declare class InvalidLabelError extends NilAssignmentError {
+    constructor(index: number);
+}
+export declare class InvalidIdPatternError extends Error {
+    constructor({ index, label, id, }: {
+        index: number;
+        label: string;
+        id: string;
+    });
+}
+export declare class NonUniqueIdError extends Error {
+    constructor({ id }: {
+        id: string;
+    });
+}
+export declare class InvalidTargetError extends Error {
+    constructor({ index, label, target, }: {
+        index: number;
+        label: string;
+        target: string;
+    });
+}
+export declare class InvalidMenuDepthError extends Error {
+    constructor(maxLevels: number, labelValue: string);
+}
+export declare class LinkTypeError extends UnsupportedLinkTypeError {
+    constructor(wrongValue: string, index: number);
+}
+export {};

package/dist/site/components/Menu/sdkUtils/menuUtils.d.ts

@@ -0,0 +1,17 @@
+import { LinkProps } from '../../../../types/vendored/editor-elements-definitions';
+import { LinkUtils } from '../../../../types/vendored/link-utils';
+export type PageList = Record<string, {
+    title: string;
+}>;
+export declare const isPageUrl: (url: string) => boolean;
+export declare const isExternalPage: (url: string) => boolean;
+export declare const getLink: ({ link, target, linkUtils, }: {
+    link?: string | undefined;
+    target?: string | undefined;
+    linkUtils: LinkUtils;
+}) => LinkProps;
+export declare const getLabel: ({ link, label, pageList, }: {
+    link?: string | undefined;
+    label?: string | undefined;
+    pageList: PageList;
+}) => string | undefined;

package/dist/site/components/Menu/sdkUtils/transformers.d.ts

@@ -0,0 +1,3 @@
+import { DeprecatedMenuDataItem, MenuDataItem } from '../../../../types/vendored/editor-elements-definitions';
+export declare const transformPropDataToSdkData: (menuDataItem: DeprecatedMenuDataItem) => MenuDataItem;
+export declare const transformSdkDataToPropData: (sdkMenuItem: MenuDataItem) => DeprecatedMenuDataItem;

package/dist/site/components/Menu/sdkUtils/validators/validateMenuItemsDepth.d.ts

@@ -0,0 +1,2 @@
+import { MenuDataItem } from '../../../../../types/vendored/editor-elements-definitions';
+export declare const validateMenuItemsDepth: (maxLevels: number) => (value: Array<MenuDataItem>) => boolean;

package/dist/site/components/Menu/sdkUtils/validators/validateMenuItemsId.d.ts

@@ -0,0 +1,2 @@
+import { MenuDataItem } from '../../../../../types/vendored/editor-elements-definitions';
+export declare const validateMenuItemsId: (menuItems?: Array<MenuDataItem>) => boolean;

package/dist/site/components/Menu/sdkUtils/validators/validateMenuItemsTarget.d.ts

@@ -0,0 +1,2 @@
+import { MenuDataItem } from '../../../../../types/vendored/editor-elements-definitions';
+export declare const validateMenuItemsTarget: (value: Array<MenuDataItem>) => boolean;

package/dist/site/components/Menu/semanticClassNames.d.ts

@@ -0,0 +1,20 @@
+export declare const menuSemanticClassNames: {
+    readonly root: "menu";
+    readonly item: "menu__item";
+    readonly itemLabel: "menu__item-label";
+    readonly scrollButton: "menu__scroll-button";
+    readonly scrollButtonIcon: "menu__scroll-button-icon";
+    readonly itemIcon: "menu__item-icon";
+};
+export declare const shmSemanticClassNames: {
+    readonly root: "horizontal-menu";
+    readonly menuItemWrapper: "horizontal-menu__item";
+    readonly menuItemLabel: "horizontal-menu__item-label";
+};
+export declare const dropdownSemanticClassNames: {
+    readonly root: "dropdown-menu";
+    readonly dropdownItem: "dropdown-menu__item";
+    readonly dropdownItemLabel: "dropdown-menu__item-label";
+    readonly dropdownSubItem: "dropdown-menu__subitem";
+    readonly dropdownSubItemLabel: "dropdown-menu__subitem-label";
+};

package/dist/site/components/Menu/utils.d.ts

@@ -0,0 +1,21 @@
+import { IMenuItemsPropsSDK } from '../../../common/sdk/props-factories/menuItemsPropsSDKFactory';
+import { PageList } from './sdkUtils/menuUtils';
+import { LinkUtils } from '../../../types/vendored/link-utils';
+import { MenuDataItem } from '../../../types/vendored/editor-elements-definitions';
+import { MenuItemType } from './Menu.types';
+export declare const validators: ((value: MenuDataItem[]) => boolean)[];
+export declare const validateMenuItems: (menuItems: Array<MenuDataItem>) => boolean;
+export declare const createMenuDataItem: (menuDataItem: IMenuItemsPropsSDK['menuItems'][number], index: number, linkUtils: LinkUtils, pageList: PageList) => IMenuItemsPropsSDK['menuItems'][number];
+/**
+ * Calculate the index of the dropdown to open based on priority:
+ * 1. Dropdown with most sub-items (item.items[].items)
+ * 2. Dropdown with most items (item.items)
+ * 3. First dropdown
+ * @param items - Array of menu items
+ * @returns Index of the dropdown to open, or -1 if no dropdown exists
+ */
+export declare const calculateDropdownIndexToOpen: (items?: Array<MenuItemType>) => number;
+export declare const rootItemDepthLevel = 0;
+export declare const subItemDepthLevel = 1;
+export declare const subSubItemDepthLevel = 2;
+export declare const getItemDepthSelector: (depth: number) => string;

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { MultiStateBoxProps } from './types';
+declare const MultiStateBox: React.FC<MultiStateBoxProps>;
+export default MultiStateBox;

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

@@ -0,0 +1,103 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { c as clsx } from "../chunks/clsx.js";
+import { s as selectors } from "../chunks/constants22.js";
+const root = "root__zTlgX";
+const state = "state__BCzGt";
+const styles = {
+  root,
+  state,
+  "is-active": "is-active__8ZJqC"
+};
+function clampIndex(index, length) {
+  if (length === 0) {
+    return 0;
+  }
+  return Math.min(Math.max(0, index), length - 1);
+}
+function getActiveStateIndex(states, activeStateIndex, activeStateName) {
+  if (activeStateName !== void 0) {
+    const indexFromName = states.findIndex(
+      (state2) => state2.name === activeStateName
+    );
+    if (indexFromName >= 0) {
+      return indexFromName;
+    }
+  }
+  if (activeStateIndex !== void 0) {
+    return clampIndex(activeStateIndex, states.length);
+  }
+  return 0;
+}
+function getStateKeys(states) {
+  const occurrences = /* @__PURE__ */ new Map();
+  return states.map((state2, index) => {
+    var _a;
+    const name = (_a = state2.name) == null ? void 0 : _a.trim();
+    if (!name) {
+      return `state-${index}`;
+    }
+    const occurrence = (occurrences.get(name) ?? 0) + 1;
+    occurrences.set(name, occurrence);
+    return `${name}__${occurrence}`;
+  });
+}
+const MultiStateBox = (props) => {
+  const {
+    id,
+    className,
+    states = [],
+    activeStateIndex,
+    activeStateName,
+    onChange,
+    onClick,
+    onDblClick,
+    onMouseIn,
+    onMouseOut,
+    onFocus,
+    onBlur
+  } = props;
+  const activeIndex = getActiveStateIndex(
+    states,
+    activeStateIndex,
+    activeStateName
+  );
+  const stateKeys = getStateKeys(states);
+  const prevActiveIndexRef = useRef(activeIndex);
+  useEffect(() => {
+    if (prevActiveIndexRef.current !== activeIndex) {
+      prevActiveIndexRef.current = activeIndex;
+      onChange == null ? void 0 : onChange();
+    }
+  }, [activeIndex, onChange]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      onClick,
+      onDoubleClick: onDblClick,
+      onMouseEnter: onMouseIn,
+      onMouseLeave: onMouseOut,
+      onFocus,
+      onBlur,
+      className: clsx(selectors.root, styles.root, className),
+      children: states.map((state2, index) => {
+        const isActive = index === activeIndex;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(selectors.stateContainer, styles.state, {
+              [styles["is-active"]]: isActive
+            }),
+            ...!isActive && { inert: "" },
+            children: state2.content
+          },
+          stateKeys[index]
+        );
+      })
+    }
+  );
+};
+export {
+  MultiStateBox as default
+};

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

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

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

@@ -0,0 +1,17 @@
+export declare const selectors: {
+    readonly root: "multi-state-box";
+    readonly stateContainer: "state-container";
+};
+export declare const DISPLAY_NAMES: {
+    readonly component: "Multi-State Box";
+    readonly data: {
+        readonly states: "State";
+        readonly activeStateName: "Active state";
+        readonly stateName: "State name";
+    };
+};
+export declare const DESCRIPTIONS: {
+    readonly data: {
+        readonly activeStateName: "To trigger states from CMS or code, use the connect icon to bind this property";
+    };
+};

package/dist/site/components/MultiStateBox/css.css

@@ -0,0 +1,13 @@
+.root__zTlgX {
+  --display: grid;
+  box-sizing: border-box;
+}
+
+.state__BCzGt {
+  grid-area: 1/1;
+  display: grid;
+  opacity: 0;
+}
+.state__BCzGt.is-active__8ZJqC {
+  opacity: 1;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,123 @@
+import { b as DISPLAY_GROUPS, a as ACTIONS, D as DATA, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { D as DESCRIPTIONS, a as DISPLAY_NAMES, s as selectors } from "../chunks/constants22.js";
+import { m as manifestFocusable, a as manifestMouseHover, b as manifestClickable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { g as getSelector } from "../chunks/manifest.js";
+const manifest = {
+  id: "45b0e187-ebc8-4ab6-9ce3-f370aa55e86b",
+  type: "wixEditorElements.MultiStateBox__DEV__v6",
+  description: "A component that holds multiple states (each state is a container), displaying only one state at a time",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 600
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.content
+      }
+    }
+  },
+  editorElement: {
+    selector: getSelector(selectors.root),
+    displayName: DISPLAY_NAMES.component,
+    archetype: Archetype.Container,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+      disableRotation: true,
+      contentFill: {
+        dataItemKey: "states.content"
+      }
+    },
+    data: {
+      states: {
+        dataType: DATA.DATA_TYPE.arrayItems,
+        displayName: DISPLAY_NAMES.data.states,
+        [DATA.DATA_TYPE.arrayItems]: {
+          data: {
+            items: {
+              name: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: DISPLAY_NAMES.data.stateName
+              },
+              content: {
+                dataType: DATA.DATA_TYPE.container,
+                [DATA.DATA_TYPE.container]: {
+                  selector: getSelector(selectors.stateContainer),
+                  containerType: ContainerType.simple,
+                  simple: {
+                    behaviors: {
+                      selectable: false
+                    },
+                    layout: {
+                      resizeDirection: LAYOUT.RESIZE_DIRECTION.none
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+      activeStateIndex: {
+        dataType: DATA.DATA_TYPE.number,
+        defaultValue: 0
+      },
+      activeStateName: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DISPLAY_NAMES.data.activeStateName,
+        description: DESCRIPTIONS.data.activeStateName
+      },
+      ...manifestChangeable(),
+      ...manifestClickable(),
+      ...manifestMouseHover(),
+      ...manifestFocusable()
+    },
+    actions: {
+      manageItems: {
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.data,
+          data: {
+            dataItemKey: "states"
+          }
+        }
+      },
+      container: {
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.data,
+          data: {
+            dataItemKey: "states.content"
+          }
+        }
+      }
+    },
+    displayGroups: {
+      states: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+        arrayItems: {
+          arrayItems: "states",
+          selectedItemIndex: "activeStateIndex"
+        }
+      }
+    },
+    displayFilters: {
+      data: {
+        hide: ["activeStateIndex"]
+      }
+    }
+  },
+  resources: {
+    editor: {
+      componentUrl: "./site/components/MultiStateBox/component.preview.tsx",
+      dependencies: {
+        serviceDependencies: ["@wix/viewer-service-environment"]
+      }
+    },
+    client: {
+      componentUrl: "./site/components/MultiStateBox/component.tsx"
+    }
+  }
+};
+export {
+  manifest as default
+};

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

@@ -0,0 +1,13 @@
+import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+export interface MultiStateBoxItem {
+    name: string;
+    content: React.ReactNode;
+}
+export interface MultiStateBoxProps extends SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps {
+    id?: string;
+    className?: string;
+    states: ReadonlyArray<MultiStateBoxItem>;
+    activeStateIndex?: number;
+    activeStateName?: string;
+    onChange?: () => void;
+}

package/dist/site/components/MultiStateBox/utils.d.ts

@@ -0,0 +1,3 @@
+import { MultiStateBoxItem } from './types';
+export declare function getActiveStateIndex(states: ReadonlyArray<MultiStateBoxItem>, activeStateIndex: number | undefined, activeStateName: string | undefined): number;
+export declare function getStateKeys(states: ReadonlyArray<MultiStateBoxItem>): Array<string>;

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { A11y, Direction } from '@wix/editor-react-types';
+export type ProgressBarProps = {
+    id: string;
+    className: string;
+    value: number;
+    label?: string;
+    a11y?: A11y;
+    targetValue?: number;
+    elementProps?: {
+        bar?: {
+            direction?: Direction;
+        };
+        label?: {
+            direction?: Direction;
+        };
+    };
+};
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

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

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

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

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { c as clsx } from "../chunks/clsx.js";
+import { g as getAccessibilityAttributesSpread, r as removeAriaPrefix } from "../chunks/a11y.js";
+import { F as FULL_PROGRESS, N as NO_PROGRESS, T as TestIDs } from "../chunks/constants21.js";
+import { d as directionStyles } from "../chunks/direction.module.js";
+import { g as getProgressValue } from "../chunks/utils.js";
+const progressbar = "progressbar__A8aSK";
+const barContainer = "barContainer__oNMgY";
+const label = "label__tasBy";
+const barBackground = "barBackground__JaIkc";
+const barForeground = "barForeground__EM4hL";
+const styles = {
+  progressbar,
+  barContainer,
+  label,
+  barBackground,
+  barForeground
+};
+const ProgressBar = (props) => {
+  var _a, _b;
+  const {
+    id,
+    className,
+    label: label2,
+    value,
+    targetValue,
+    elementProps,
+    a11y = {}
+  } = props;
+  const progressValue = getProgressValue(value, targetValue);
+  const a11yProps = getAccessibilityAttributesSpread({
+    ariaAttributes: removeAriaPrefix(a11y ?? {})
+  });
+  const ariaAttributes = useMemo(() => {
+    const baseAttributes = {
+      "aria-valuenow": progressValue,
+      "aria-valuemin": NO_PROGRESS,
+      "aria-valuemax": targetValue ?? FULL_PROGRESS,
+      "aria-valuetext": `${progressValue}%`
+    };
+    if (label2 && id && !a11yProps["aria-label"] && !a11yProps["aria-labelledby"]) {
+      baseAttributes["aria-labelledby"] = `label_${id}`;
+    }
+    return baseAttributes;
+  }, [progressValue, targetValue, label2, id, a11yProps]);
+  const barDirection = (_a = elementProps == null ? void 0 : elementProps.bar) == null ? void 0 : _a.direction;
+  const labelDirection = (_b = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _b.direction;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      ...a11yProps,
+      ...ariaAttributes,
+      role: a11yProps.role ?? "progressbar",
+      className: clsx(className, "progressbar", styles.progressbar),
+      children: [
+        !!label2 && /* @__PURE__ */ jsx(
+          "label",
+          {
+            ...labelDirection && { dir: labelDirection },
+            "data-testid": TestIDs.label,
+            id: `label_${id}`,
+            className: clsx(styles.label, "label"),
+            children: label2
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-testid": TestIDs.container,
+            ...barDirection && { dir: barDirection },
+            className: clsx(
+              "barContainer",
+              styles.barContainer,
+              directionStyles.fallbackDirection
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": TestIDs.background,
+                  className: styles.barBackground
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": TestIDs.foreground,
+                  className: styles.barForeground,
+                  style: { width: `${progressValue}%` }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ProgressBar as default
+};

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

@@ -0,0 +1,30 @@
+export declare const FULL_PROGRESS = 100;
+export declare const NO_PROGRESS = 0;
+export declare const DisplayNames: {
+    root: {
+        displayName: string;
+    };
+    label: {
+        displayName: string;
+    };
+    bar: {
+        displayName: string;
+        cssCustomProperties: {
+            barBackgroundColor: string;
+            barForegroundColor: string;
+        };
+        cssProperties: {
+            barHeight: string;
+        };
+    };
+    data: {
+        targetValue: string;
+        label: string;
+    };
+};
+export declare enum TestIDs {
+    container = "progressbar-container",
+    background = "progressbar-background",
+    foreground = "progressbar-foreground",
+    label = "progressbar-label"
+}

package/dist/site/components/ProgressBar/css.css

@@ -0,0 +1,43 @@
+.progressbar__A8aSK {
+  --barBorderWidth: 0px;
+  --barBorderStartStartRadius: 0px;
+  --barBorderStartEndRadius: 0px;
+  --barBorderEndStartRadius: 0px;
+  --barBorderEndEndRadius: 0px;
+}
+.progressbar__A8aSK .barContainer__oNMgY {
+  position: relative;
+  overflow: hidden;
+  border-start-start-radius: var(--barBorderStartStartRadius);
+  border-start-end-radius: var(--barBorderStartEndRadius);
+  border-end-start-radius: var(--barBorderEndStartRadius);
+  border-end-end-radius: var(--barBorderEndEndRadius);
+  border-width: var(--barBorderWidth);
+}
+.progressbar__A8aSK .label__tasBy {
+  display: block;
+}
+.progressbar__A8aSK .barBackground__JaIkc,
+.progressbar__A8aSK .barForeground__EM4hL {
+  position: absolute;
+  top: 0;
+  border-start-start-radius: max(0px, var(--barBorderStartStartRadius) - var(--barBorderWidth));
+  border-start-end-radius: max(0px, var(--barBorderStartEndRadius) - var(--barBorderWidth));
+  border-end-start-radius: max(0px, var(--barBorderEndStartRadius) - var(--barBorderWidth));
+  border-end-end-radius: max(0px, var(--barBorderEndEndRadius) - var(--barBorderWidth));
+  height: 100%;
+}
+.progressbar__A8aSK .barBackground__JaIkc {
+  background-color: var(--barBackgroundColor);
+  width: 100%;
+  left: 0;
+}
+.progressbar__A8aSK .barForeground__EM4hL {
+  background-color: var(--barForegroundColor);
+  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition-duration: 300ms;
+  inset-inline-start: 0;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}

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

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

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

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

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

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