@wix/editor-react-components 1.2153.0

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

@@ -0,0 +1,485 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { useState, useEffect, useRef, useMemo, createElement } from "react";
+import { c as clsx } from "../chunks/clsx.js";
+import { d as definitionExports } from "../chunks/index5.js";
+import { d as definitionExports$1 } from "../chunks/index11.js";
+import { useService } from "@wix/services-manager-react";
+import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { d as directionStyles } from "../chunks/direction.module.js";
+import { v as valueToPlatformId, C as COPY_CONFIRMATION_TIMEOUT, p as platformIds, H as HAS_CUSTOM_FOCUS_CLASSNAME, T as TOOLTIP_SUCCESS_TEXT, a as TOOLTIP_FAILED_TEXT, l as linkCopiedFailedTranslationKey, b as linkCopiedTranslationKey, s as sharerData, t as translationKeys, P as PagesToShare, D as DefaultValues, n as noButtonsErrorMessage, d as dataHooks, c as defaultRootAriaLabel, e as TestIds, f as TranslationKeys, g as shareUrlPrefixes } from "../chunks/constants19.js";
+import { r as removeAriaPrefix } from "../chunks/a11y.js";
+import { p as parseSvg } from "../chunks/parseSvg.js";
+const BASE_MEDIA_URL = "https://static.wixstatic.com/shapes";
+function isBuilderVectorArt(illustration) {
+  return Boolean(illustration == null ? void 0 : illustration.uri);
+}
+function isSVGItem(illustration) {
+  return Boolean(illustration == null ? void 0 : illustration.svgId);
+}
+function isVectorArtWithContent(illustration) {
+  return Boolean(illustration == null ? void 0 : illustration.svgContent);
+}
+function isSVGContent(svgId) {
+  return svgId.startsWith("<?xml") || svgId.startsWith("<svg");
+}
+function getIllustrationImageUrl(uri) {
+  return `${BASE_MEDIA_URL}/${uri}`;
+}
+function convertIllustrationForComponentView(illustration) {
+  if (!illustration) {
+    return void 0;
+  }
+  if (isVectorArtWithContent(illustration)) {
+    return illustration.svgContent;
+  }
+  if (isBuilderVectorArt(illustration) && !isSVGContent(illustration.uri)) {
+    const imageUrl = getIllustrationImageUrl(
+      illustration.uri
+    );
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><image href="${imageUrl}" width="100" height="100"/></svg>`;
+  }
+  if (isSVGItem(illustration) && isSVGContent(illustration.svgId)) {
+    return illustration.svgId;
+  }
+  return void 0;
+}
+function getPlatformIdWithFallback(platformId, value) {
+  return platformId ? platformId : valueToPlatformId[value];
+}
+function getFullShareUrl(shareUrlPrefix, pageUrl) {
+  return shareUrlPrefix + encodeURI(pageUrl);
+}
+const a11yBlackList = ["aria-id", "aria-metadata", "aria-type"];
+function filteredA11y(a11y, blacklist) {
+  return Object.entries(a11y).reduce((acc, [key, value]) => {
+    if (!blacklist.includes(key)) {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+}
+function getAccessibilityAttributes(attributes) {
+  const {
+    role,
+    tabIndex,
+    tabindex,
+    screenReader,
+    lang,
+    ariaAttributes = {}
+  } = attributes;
+  const prefixedAriaAttributes = Object.entries(
+    ariaAttributes
+  ).reduce((prev, [key, value]) => {
+    return { ...prev, [`aria-${key}`.toLowerCase()]: value };
+  }, {});
+  return {
+    role,
+    tabIndex: tabIndex ?? tabindex,
+    screenReader,
+    ariaAttributes: filteredA11y(
+      prefixedAriaAttributes,
+      a11yBlackList
+    ),
+    lang
+  };
+}
+function getAccessibilityAttributesSpread(attributes) {
+  const a11yProps = getAccessibilityAttributes(attributes);
+  return {
+    ...a11yProps.ariaAttributes,
+    tabIndex: a11yProps.tabIndex,
+    screenReader: a11yProps.screenReader,
+    lang: a11yProps.lang,
+    role: a11yProps.role
+  };
+}
+function mapButtonsForComponentView(buttons) {
+  return buttons.map((button) => {
+    const svgContent = convertIllustrationForComponentView(button.illustration);
+    if (svgContent) {
+      return {
+        ...button,
+        illustration: { svgId: svgContent }
+      };
+    }
+    return button;
+  });
+}
+const ShareButtonIcon = ({
+  svg,
+  className
+}) => /* @__PURE__ */ jsx("span", { className, "aria-hidden": true, children: svg ? parseSvg(svg) : null });
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+    if (!getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    }
+  }
+  return getRandomValues(rnds8);
+}
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+}
+const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = {
+  randomUUID
+};
+function v4(options, buf, offset) {
+  if (native.randomUUID && true && !options) {
+    return native.randomUUID();
+  }
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)();
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  return unsafeStringify(rnds);
+}
+function useTooltipPosition({
+  arrowSize,
+  tooltipRef
+}) {
+  const [tooltipTopPosition, setTooltipTopPosition] = useState(0);
+  useEffect(() => {
+    if (tooltipRef.current && tooltipRef.current.clientHeight > 0) {
+      setTooltipTopPosition(tooltipRef.current.clientHeight + arrowSize);
+    }
+  }, [tooltipRef, arrowSize]);
+  return { tooltipTopPosition };
+}
+const tooltipWrapper = "tooltipWrapper__ARB6y";
+const tooltip = "tooltip__smt-R";
+const tooltipArrow = "tooltipArrow__tpprG";
+const classes = {
+  tooltipWrapper,
+  tooltip,
+  tooltipArrow
+};
+const ARROW_SIZE = 10;
+const Tooltip = ({
+  tooltipId,
+  children,
+  dataTestId,
+  iconComponent: IconComponent
+}) => {
+  const tooltipRef = useRef(null);
+  const { tooltipTopPosition } = useTooltipPosition({
+    arrowSize: ARROW_SIZE,
+    tooltipRef
+  });
+  return /* @__PURE__ */ jsxs("div", { id: tooltipId, className: classes.tooltipWrapper, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "tooltip",
+        className: classes.tooltip,
+        style: { top: `-${tooltipTopPosition}px` },
+        ref: tooltipRef,
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ jsx("span", { children }),
+          /* @__PURE__ */ jsx("span", { className: classes.tooltipArrow })
+        ]
+      }
+    ),
+    IconComponent && /* @__PURE__ */ jsx(IconComponent, {})
+  ] });
+};
+const root = "root__jXw1V";
+const icon = "icon__-7Z8j";
+const checkmark = "checkmark__NLI3R";
+const label = "label__hsu2V";
+const showTooltip = "showTooltip__6NoHZ";
+const visuallyHidden = "visuallyHidden__-qkir";
+const shareButtonStyles = {
+  root,
+  icon,
+  checkmark,
+  label,
+  showTooltip,
+  visuallyHidden
+};
+const Checkmark = () => {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7.40011 5.68606", children: /* @__PURE__ */ jsx("path", { d: "M2.55016,5.68606c-.01709,0-.03369-.001-.05078-.002a.7.7,0,0,1-.51758-.28955L.1317,2.82326a.7.7,0,1,1,1.13672-.81738l1.36133,1.8916L6.19713.2134A.69995.69995,0,0,1,7.203,1.187L3.05309,5.47268A.7.7,0,0,1,2.55016,5.68606Z" }) });
+};
+const CopyButtonIcon = ({
+  labelNode
+}) => {
+  return /* @__PURE__ */ jsxs("span", { className: clsx(shareButtonStyles.root), children: [
+    /* @__PURE__ */ jsx("span", { className: clsx(shareButtonStyles.checkmark, "icon"), children: /* @__PURE__ */ jsx(Checkmark, {}) }),
+    labelNode
+  ] });
+};
+const CopyButtonWrapper = ({
+  id,
+  shareButtonIcon,
+  labelNode,
+  url,
+  ariaLabel,
+  tooltipTexts
+}) => {
+  const [tooltipText, setTooltipText] = React__default.useState("");
+  const tooltipId = v4();
+  const _onClick = async () => {
+    try {
+      await navigator.clipboard.writeText(decodeURI(url));
+      setTooltipText((tooltipTexts == null ? void 0 : tooltipTexts.linkCopiedText) ?? TOOLTIP_SUCCESS_TEXT);
+    } catch {
+      setTooltipText((tooltipTexts == null ? void 0 : tooltipTexts.linkCopiedFailedText) ?? TOOLTIP_FAILED_TEXT);
+    }
+  };
+  React__default.useEffect(() => {
+    if (!tooltipText) {
+      return;
+    }
+    const timeout = setTimeout(() => {
+      setTooltipText("");
+    }, COPY_CONFIRMATION_TIMEOUT);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [tooltipText]);
+  const className = clsx(
+    shareButtonStyles.root,
+    shareButtonStyles.showTooltip,
+    shareButtonStyles.container,
+    "button"
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tooltipText && /* @__PURE__ */ jsx("div", { className, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        tooltipId,
+        dataTestId: "copy-link-tooltip",
+        iconComponent: () => /* @__PURE__ */ jsx(CopyButtonIcon, { labelNode }),
+        children: tooltipText
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id,
+        className: clsx(
+          className,
+          HAS_CUSTOM_FOCUS_CLASSNAME,
+          tooltipText && shareButtonStyles.visuallyHidden
+        ),
+        "data-testid": platformIds.copyButton,
+        onClick: _onClick,
+        "aria-label": ariaLabel,
+        children: [
+          shareButtonIcon,
+          labelNode
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        className: shareButtonStyles.visuallyHidden,
+        children: tooltipText
+      }
+    )
+  ] });
+};
+const ShareButton = ({
+  id,
+  platformId,
+  value,
+  label: label2,
+  illustration,
+  url = "",
+  translations
+}) => {
+  const platformIdWithFallback = getPlatformIdWithFallback(platformId, value);
+  const translatedCopyLinkLabel = translations == null ? void 0 : translations[label2];
+  const buttonLabel = platformIdWithFallback === platformIds.copyButton && translatedCopyLinkLabel ? translatedCopyLinkLabel : label2;
+  return /* @__PURE__ */ jsx(Fragment, { children: platformId === platformIds.copyButton ? /* @__PURE__ */ jsx(
+    CopyButtonWrapper,
+    {
+      id,
+      url,
+      ariaLabel: buttonLabel,
+      tooltipTexts: {
+        linkCopiedText: translations == null ? void 0 : translations[linkCopiedTranslationKey],
+        linkCopiedFailedText: translations == null ? void 0 : translations[linkCopiedFailedTranslationKey]
+      },
+      shareButtonIcon: /* @__PURE__ */ jsx(
+        ShareButtonIcon,
+        {
+          className: clsx(shareButtonStyles.icon, "icon"),
+          svg: (illustration == null ? void 0 : illustration.svgId) ?? ""
+        }
+      ),
+      labelNode: /* @__PURE__ */ jsx("span", { className: clsx(shareButtonStyles.label, "label"), children: buttonLabel })
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "a",
+    {
+      id,
+      className: clsx(
+        shareButtonStyles.root,
+        HAS_CUSTOM_FOCUS_CLASSNAME,
+        "button"
+      ),
+      target: "popup",
+      href: url,
+      onClick: (event) => {
+        event.preventDefault();
+        window.open(url, sharerData.name, sharerData.params);
+      },
+      rel: "noreferrer",
+      "data-testid": platformId,
+      "aria-label": buttonLabel,
+      children: [
+        /* @__PURE__ */ jsx(
+          ShareButtonIcon,
+          {
+            className: clsx(shareButtonStyles.icon, "icon"),
+            svg: (illustration == null ? void 0 : illustration.svgId) ?? ""
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: clsx(shareButtonStyles.label, "label"), children: buttonLabel })
+      ]
+    }
+  ) });
+};
+const container = "container__KvqWe";
+const item = "item__S2NHx";
+const shareButtonsStyles = {
+  container,
+  item
+};
+const ShareButtons = (props) => {
+  var _a;
+  const { translate } = useService(definitionExports.TranslationsDefinition);
+  const { getCurrentUrl, getExternalBaseUrl } = useService(definitionExports$1.UrlDefinition);
+  const memoizedProps = useMemo(() => {
+    const translations = translationKeys.reduce(
+      (acc, key) => {
+        acc[key] = translate("ShareButtons")(key);
+        return acc;
+      },
+      {}
+    );
+    translations.ShareButtons_AriaLabel = translate("ariaLabels")(
+      "ShareButtons_AriaLabel"
+    );
+    const buttonsFromProps = props.buttons || [];
+    const buttons2 = mapButtonsForComponentView(
+      buttonsFromProps.length ? buttonsFromProps : []
+    );
+    const shareUrlByPage = {
+      [PagesToShare.home]: getExternalBaseUrl(),
+      [PagesToShare.current]: getCurrentUrl()
+    };
+    const a11y2 = removeAriaPrefix(props.a11y ?? {});
+    return {
+      id: props.id || "",
+      buttons: buttons2,
+      a11y: a11y2,
+      translations,
+      shareUrl: shareUrlByPage[props.pageToShare || DefaultValues.pageToShare],
+      onMouseEnter: props.onMouseIn,
+      onMouseLeave: props.onMouseOut,
+      className: clsx(
+        props.className,
+        "share-buttons",
+        !props.direction && directionStyles.fallbackDirection
+      )
+    };
+  }, [props, translate, getExternalBaseUrl, getCurrentUrl]);
+  const { id, className, buttons, shareUrl, a11y } = memoizedProps;
+  if (buttons.length === 0) {
+    console.error(noButtonsErrorMessage);
+  }
+  const getShareUrlPrefix = (button) => {
+    const platformIdWithFallback = getPlatformIdWithFallback(
+      button.platformId,
+      button.value
+    );
+    return shareUrlPrefixes[platformIdWithFallback] ?? button.value;
+  };
+  const visibleButtons = buttons.filter(
+    (btn) => !btn.isHidden
+  );
+  const isSingleButtonMode = visibleButtons.length === 1;
+  const presetsWrapperProps = ((_a = props.wix) == null ? void 0 : _a.presetsWrapperProps) || {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      dir: props.direction,
+      className: presetWrapperStyles.presetWrapper,
+      "data-hook": dataHooks.presetWrapper,
+      ...presetsWrapperProps,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          id,
+          className,
+          ...isSingleButtonMode ? getAccessibilityAttributesSpread({ ariaAttributes: a11y }) : {},
+          lang: props.lang,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: shareButtonsStyles.root,
+              onMouseEnter: memoizedProps.onMouseEnter,
+              onMouseLeave: memoizedProps.onMouseLeave,
+              children: isSingleButtonMode ? /* @__PURE__ */ createElement(
+                ShareButton,
+                {
+                  ...visibleButtons[0],
+                  key: `item_${visibleButtons[0].id}`,
+                  url: getFullShareUrl(
+                    getShareUrlPrefix(visibleButtons[0]),
+                    shareUrl
+                  ),
+                  translations: memoizedProps.translations
+                }
+              ) : (
+                // eslint-disable-next-line jsx-a11y/no-redundant-roles
+                /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    id: `items_${id}`,
+                    className: shareButtonsStyles.container,
+                    "data-testid": TestIds.buttonsContainer,
+                    "aria-label": memoizedProps.translations[TranslationKeys.ariaLabel] || defaultRootAriaLabel,
+                    ...getAccessibilityAttributesSpread({ ariaAttributes: a11y }),
+                    role: "list",
+                    children: visibleButtons.map((button) => /* @__PURE__ */ jsx(
+                      "li",
+                      {
+                        className: shareButtonsStyles.item,
+                        children: /* @__PURE__ */ jsx(
+                          ShareButton,
+                          {
+                            ...button,
+                            url: getFullShareUrl(getShareUrlPrefix(button), shareUrl),
+                            translations: memoizedProps.translations
+                          }
+                        )
+                      },
+                      `item_${button.id}`
+                    ))
+                  }
+                )
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  ShareButtons as default
+};

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

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

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

@@ -0,0 +1,156 @@
+export declare enum PagesToShare {
+    home = "home",
+    current = "current"
+}
+export declare const componentName = "ShareButtons";
+export declare const shareButtonsBaseId: string;
+export declare const platformIds: {
+    [key: string]: string;
+};
+export declare const valueToPlatformId: {
+    [key: string]: string;
+};
+export declare const shareUrlPrefixes: {
+    [key: string]: string;
+};
+export declare const noButtonsErrorMessage = "ShareButtons: `buttons` prop must contain at least one button.";
+export declare const defaultRootAriaLabel = "Share Buttons";
+export declare const sharerData: {
+    name: string;
+    params: string;
+};
+export declare const COPY_CONFIRMATION_TIMEOUT = 5000;
+export declare const TOOLTIP_SUCCESS_TEXT = "Link Copied";
+export declare const TOOLTIP_FAILED_TEXT = "Failed to copy link";
+export declare const linkCopiedTranslationKey = "wixui_ShareButtons_toast_link_copied";
+export declare const linkCopiedFailedTranslationKey = "wixui_ShareButtons_toast_link_copied_failed";
+export declare const HAS_CUSTOM_FOCUS_CLASSNAME = "has-custom-focus";
+export declare const TestIds: {
+    buttonsContainer: string;
+    buttonElement: string;
+    copyLinkTooltip: string;
+};
+export declare const TranslationKeys: {
+    ariaLabel: string;
+};
+export declare const translationKeys: string[];
+export declare const dataHooks: {
+    presetWrapper: string;
+    shareButtonsSkin: string;
+};
+export declare const DisplayNames: {
+    readonly elementDisplayName: "Share Buttons";
+    readonly presets: {
+        readonly horizontal: "Horizontal";
+        readonly vertical: "Vertical";
+    };
+    readonly cssCustomProperties: {
+        readonly 'buttons-alignment': "Buttons Layout";
+        readonly 'buttons-spacing': "Space between buttons";
+        readonly 'rows-spacing': "Space between rows";
+        readonly 'button-width': "Button width";
+    };
+    readonly data: {
+        readonly pageToShare: "What page is shared?";
+        readonly buttons: {
+            readonly displayName: "Buttons";
+            readonly items: {
+                readonly label: "Label";
+                readonly description: "Description";
+                readonly value: "Value";
+                readonly disabled: "Disabled";
+                readonly isDefault: "Is Default";
+                readonly unavailable: "Unavailable";
+                readonly platformId: "Platform ID";
+                readonly illustration: "Illustration";
+                readonly isHidden: "Is Hidden";
+            };
+        };
+    };
+    readonly button: {
+        readonly elementDisplayName: "Buttons";
+        readonly cssCustomProperties: {
+            readonly 'icon-text-spacing': "Space between text and icons";
+            readonly 'icon-position': "Icon position";
+        };
+    };
+    readonly label: {
+        readonly elementDisplayName: "Text";
+    };
+    readonly icon: {
+        readonly elementDisplayName: "Icons";
+        readonly cssCustomProperties: {
+            readonly 'icon-size': "Size";
+        };
+    };
+    readonly customActions: {
+        readonly format: {
+            readonly displayName: "Change Orientation";
+        };
+        readonly manage: {
+            readonly displayName: "Manage Share Buttons";
+            readonly buttonActions: {
+                readonly replaceIcon: "Replace icon";
+                readonly rename: "Rename";
+                readonly hide: "Hide";
+            };
+        };
+    };
+};
+export declare const DesignStates: {
+    readonly root: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "share-buttons--hover";
+        };
+    };
+};
+export declare const DefaultValues: {
+    readonly buttonsSpacing: "10px";
+    readonly rowsSpacing: "10px";
+    readonly align: "center";
+    readonly buttonWidth: "fit-content";
+    readonly iconTextSpacing: "10px";
+    readonly iconPosition: "row";
+    readonly contentAlignment: "start";
+    readonly pageToShare: PagesToShare.home;
+    readonly defaultSvg: {
+        readonly type: "Builder.VectorArt";
+        readonly uri: "defaultSvg";
+    };
+    readonly horizontalPresetWidth: 400;
+};
+export declare const ButtonWidthOptions: {
+    value: string;
+    displayName: string;
+}[];
+export declare const IconPositionOptions: {
+    value: string;
+    displayName: string;
+    appliedStyles: {
+        property: string;
+        value: string;
+    }[];
+}[];
+export declare const PageToShareOptions: {
+    value: PagesToShare;
+    displayName: string;
+}[];
+export declare const DefaultButtons: {
+    unavailable: boolean;
+    label: string;
+    description: string;
+    isHidden: boolean;
+    platformId: string;
+    illustration: {
+        type: "Builder.VectorArt";
+        uri: string;
+    };
+    disabled: boolean;
+    type: "IShareButton";
+    value: string;
+    isDefault: boolean;
+}[];
+export declare const DisplayConfig: {
+    displayValues: import('@wix/ambassador-devcenter-v1-component-type-data/types').DisplayValueEnumDisplayValue[];
+};