@wix/editor-react-components 1.2424.0 → 1.2426.0

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

@@ -1,6 +1,6 @@
 import { GoogleMapDataProp } from '../../../types/vendored/thunderbolt-components';
 import { MAP_STYLE_KEYS } from './consts';
-import { VectorArt, Link } from '@wix/editor-react-types';
+import { A11y, VectorArt, Link } from '@wix/editor-react-types';
 import { SdkFunctionMouseHoverProps } from '../../../utils/functions/sdkFunctionCallbackProps';
 import { ConsentPolicyWrapperTranslationsValues } from '../../../common/components/ConsentPolicyWrapper/ConsentPolicyWrapper.types';
 export type Location = {
@@ -98,9 +98,9 @@ export type GoogleMapBaseProps = GoogleMapEventHandlers & {
     className?: string;
     skin?: GoogleMapSkin;
     customClassNames?: Array<string>;
+    a11y?: A11y;
     translations: GoogleMapTranslations;
     lang?: string;
-    language?: string;
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     mapData: GoogleMapMapData;

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

@@ -4,13 +4,16 @@ import React__default, { forwardRef, useState, useCallback, useMemo, useImperati
 import { c as clsx } from "../chunks/clsx.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
+import { e as getTabIndexAttribute, f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { createPortal } from "react-dom";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
-import { G as GOOGLE_MAPS_DIRECTIONS_BASE_URL, M as MIN_ZOOM, a as MAX_ZOOM, T as TestIds, D as DEFAULT_ZOOM, b as MAP_IDS, c as MAP_TYPES, A as API_KEY, d as DEFAULT_LOCATION, C as COMPANY_NAME_DEFAULT, e as COMPANY_NAME_KEY, f as COMPONENT_NAME_DEFAULT, g as COMPONENT_NAME_KEY } from "../chunks/consts.js";
+import { G as GOOGLE_MAPS_DIRECTIONS_BASE_URL, M as MIN_ZOOM, a as MAX_ZOOM, T as TestIds, D as DEFAULT_ZOOM, b as MAP_IDS, c as MAP_TYPES, A as API_KEY, d as DEFAULT_LOCATION, e as DefaultTranslations, f as TranslationKeys, g as TRANSLATIONS_NAMESPACES, C as COMPANY_NAME_DEFAULT, h as COMPANY_NAME_KEY, i as COMPONENT_NAME_DEFAULT, j as COMPONENT_NAME_KEY } from "../chunks/consts.js";
 import { p as parse } from "../chunks/index5.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { u as useConsentPolicyProps, C as ConsentPolicyWrapper } from "../chunks/useConsentPolicyProps.js";
+import { T as TranslationsDefinition } from "../chunks/index6.js";
+import { g as getTranslation } from "../chunks/getTranslation.js";
 const mapContainer = "mapContainer__E0LTn";
 const style = {
   mapContainer
@@ -22,6 +25,7 @@ const GoogleMapReact = forwardRef((props, forwardedRef) => {
     className,
     skin,
     customClassNames = [],
+    a11y,
     translations,
     lang,
     onMouseEnter,
@@ -30,6 +34,12 @@ const GoogleMapReact = forwardRef((props, forwardedRef) => {
   } = props;
   const [isMapReady, setIsMapReady] = useState(false);
   const handleMapTilesLoaded = useCallback(() => setIsMapReady(true), []);
+  const { tabIndex, ariaLabel, ...restA11y } = a11y || {};
+  const a11yAttributes = {
+    ...convertA11yKeysToHtmlFormat(restA11y),
+    ...getTabIndexAttribute(a11y),
+    "aria-label": ariaLabel || translations.title
+  };
   const domSafeProps = {
     id,
     className: clsx(
@@ -50,7 +60,7 @@ const GoogleMapReact = forwardRef((props, forwardedRef) => {
         "div",
         {
           className: style.mapContainer,
-          "aria-label": translations.title,
+          ...a11yAttributes,
           "data-map-ready": isMapReady,
           role: "region",
           children: /* @__PURE__ */ jsx(
@@ -1752,7 +1762,7 @@ const GoogleMapReactInner = forwardRef((props, forwardedRef) => {
   );
 });
 const GoogleMapReactInteractiveMap = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(APIProvider, { apiKey: API_KEY, language: props.language, children: /* @__PURE__ */ jsx(GoogleMapReactInner, { ...props, ref: forwardedRef }) });
+  return /* @__PURE__ */ jsx(APIProvider, { apiKey: API_KEY, language: props.lang, children: /* @__PURE__ */ jsx(GoogleMapReactInner, { ...props, ref: forwardedRef }) });
 });
 const GoogleMapReactInteractiveMap$1 = memo(GoogleMapReactInteractiveMap);
 const DEFAULT_TRANSLATIONS = {};
@@ -1813,8 +1823,18 @@ const defaultManifestProps = {
   mapStyleKey: "CLASSIC"
 };
 const defaultPinIcon = '<!--?xml version="1.0" encoding="UTF-8"?--><svg data-bbox="1.6 0 20.7 34" viewBox="0 0 24 34" height="34" width="24" xmlns="http://www.w3.org/2000/svg" data-type="color"><g><path d="M11.9 33.4c-.2 0-.5 0-.6-.2l-.2-.2c-.5-.4-.6-.9-.9-2.2-1-4.2-2.1-6.7-3.1-9-.7-1.4-1.4-2.6-2.1-3.7-1.7-2.8-2.8-4.7-2.8-8 0-2.3.9-4.7 2.5-6.5 1.9-1.8 4.6-3 7.2-3h.2c2.7 0 5.4 1.3 7.3 3.3 1.6 1.7 2.6 4.2 2.5 6.5 0 3.3-1.1 5.1-2.8 7.9-.6 1.1-1.3 2.3-2.1 3.8-.9 2.2-2 4.7-3 8.9-.3 1.3-.4 2-1.3 2.3h-.3c-.1.1-.2.2-.3.2Z" fill="#ff4646" data-color="1"></path><path d="M11.9 1.1h.2c2.5 0 5.1 1.2 6.9 3.2 1.5 1.6 2.4 3.9 2.4 6.1 0 3.1-1.1 4.9-2.7 7.7-.6 1.1-1.4 2.3-2.2 3.8-1 2.2-2 4.8-3.1 9-.3 1.2-.4 1.7-1 1.9h-.3c0 .1-.1.1-.2.1s-.2 0-.3-.1l-.2-.2c-.4-.3-.4-.6-.7-1.9-1-4.2-2.1-6.8-3.1-9.1-.8-1.5-1.5-2.7-2.1-3.7-1.6-2.8-2.7-4.6-2.7-7.7 0-2.2.9-4.5 2.4-6.1C7 2.2 9.5 1 12 1m-.1-1C9.1 0 6.3 1.4 4.3 3.5c-1.7 1.8-2.7 4.4-2.7 6.8 0 3.4 1.2 5.4 2.9 8.2.6 1 1.3 2.2 2.1 3.7 1 2.2 2 4.7 3 8.9.3 1.3.4 1.9 1.1 2.4l.2.2q.45.3.9.3h.8c1.1-.5 1.4-1.4 1.7-2.7 1-4.1 2.1-6.6 3-8.8.8-1.5 1.5-2.7 2.1-3.8 1.6-2.8 2.8-4.8 2.9-8.2 0-2.4-1-5-2.7-6.8C17.7 1.5 14.8.1 12 0h-.2Z" fill="#ffffff" data-color="2"></path><path fill="#590000" d="M15.2 10.4a3.2 3.2 0 1 1-6.4 0 3.2 3.2 0 0 1 6.4 0" data-color="3"></path></g></svg>';
-const directionTitle = "Directions";
+const noopTranslate = () => () => "";
+const translateKey = (translate, key, namespace) => getTranslation(
+  translate(namespace),
+  key,
+  TranslationKeys,
+  DefaultTranslations
+);
 const useGoogleMapProps = (props) => {
+  const translationService = useService(TranslationsDefinition);
+  const translate = (translationService == null ? void 0 : translationService.translate) ?? noopTranslate;
+  const environment = useService(EnvironmentDefinition);
+  const siteLanguage = (environment == null ? void 0 : environment.language) ?? "en";
   const consentPolicyProps = useConsentPolicyProps();
   const cookieConsent = useCookieConsent({
     config: {
@@ -1838,7 +1858,11 @@ const useGoogleMapProps = (props) => {
       return {
         ...location,
         pinIcon: ((_a = props.pinIcon) == null ? void 0 : _a.svgContent) || defaultPinIcon,
-        directionTitle
+        directionTitle: translateKey(
+          translate,
+          "directionsLink",
+          TRANSLATIONS_NAMESPACES.googleMaps
+        )
       };
     });
     return {
@@ -1862,7 +1886,8 @@ const useGoogleMapProps = (props) => {
     props.zoom,
     props.pinIcon,
     props.mapStyleKey,
-    props.defaultLocation
+    props.defaultLocation,
+    translate
   ]);
   const componentProps = useMemo(() => {
     return {
@@ -1870,13 +1895,21 @@ const useGoogleMapProps = (props) => {
       id: props.id,
       className: `${props.className || ""} google-map`,
       customClassNames: [],
+      a11y: props.a11y,
       translations: {
-        title: "Google Map",
-        allyTargetBlankDescription: "Opens in a new tab",
+        title: translateKey(
+          translate,
+          "mapAriaLabel",
+          TRANSLATIONS_NAMESPACES.componentLabel
+        ),
+        allyTargetBlankDescription: translateKey(
+          translate,
+          "linkOpensNewTab",
+          TRANSLATIONS_NAMESPACES.googleMaps
+        ),
         ...cookieConsent.translations
       },
-      language: "en",
-      lang: "en",
+      lang: siteLanguage,
       onMouseEnter: props.onMouseIn,
       onMouseLeave: props.onMouseOut,
       isConsentPolicyActive: cookieConsent.isConsentPolicyActive,
@@ -1889,8 +1922,11 @@ const useGoogleMapProps = (props) => {
   }, [
     props.id,
     props.className,
+    props.a11y,
     props.onMouseIn,
     props.onMouseOut,
+    translate,
+    siteLanguage,
     cookieConsent.hasRequiredConsent,
     cookieConsent.isConsentPolicyActive,
     cookieConsent.consentPolicy,

package/dist/site/components/GoogleMap/components/GoogleMapReact.d.ts

@@ -17,9 +17,9 @@ declare const GoogleMapReact: React.ForwardRefExoticComponent<{
     className?: string;
     skin?: import('../GoogleMap.types').GoogleMapSkin;
     customClassNames?: Array<string>;
+    a11y?: import('@wix/editor-react-types').A11y;
     translations: import('../GoogleMap.types').GoogleMapTranslations;
     lang?: string;
-    language?: string;
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     mapData: import('../GoogleMap.types').GoogleMapMapData;

package/dist/site/components/GoogleMap/components/GoogleMapReactInteractiveMap.d.ts

@@ -17,9 +17,9 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     className?: string;
     skin?: import('../GoogleMap.types').GoogleMapSkin;
     customClassNames?: Array<string>;
+    a11y?: import('@wix/editor-react-types').A11y;
     translations: import('../GoogleMap.types').GoogleMapTranslations;
     lang?: string;
-    language?: string;
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     mapData: import('../GoogleMap.types').GoogleMapMapData;

package/dist/site/components/GoogleMap/consts.d.ts

@@ -57,6 +57,21 @@ export declare const DEFAULT_LOCATION: {
     longitude: number;
     title: string;
 };
+export declare const TRANSLATIONS_NAMESPACES: {
+    readonly componentLabel: "component_label";
+    readonly googleMaps: "GoogleMaps";
+};
+export declare const TranslationKeys: {
+    readonly mapAriaLabel: "COMPONENT_LABEL_googleMapsTitle";
+    readonly linkOpensNewTab: "googleMaps_ariaLabel_linkOpensNewTab";
+    readonly directionsLink: "GoogleMaps_Directions_Link";
+};
+export declare const DefaultTranslations: {
+    readonly mapAriaLabel: "Google Maps";
+    readonly linkOpensNewTab: "Opens in a new tab";
+    readonly directionsLink: "Directions";
+};
+export type TranslationKey = keyof typeof TranslationKeys;
 export declare const COMPONENT_NAME_KEY = "CookieConsent_Dataset_Component_GoogleMap";
 export declare const COMPONENT_NAME_DEFAULT = "Google Maps";
 export declare const COMPANY_NAME_KEY = "CookieConsent_Dataset_Company_Google";

package/dist/site/components/GoogleMap/hooks/useGoogleMapProps.d.ts

@@ -1,3 +1,4 @@
+import { A11y } from '@wix/editor-react-types';
 import { GoogleMapSettingsProps, GoogleMapMapData, GoogleMapWithConsentProps } from '../GoogleMap.types';
 type GoogleMapPropsWithConsent = GoogleMapWithConsentProps & {
     hasRequiredConsent?: boolean;
@@ -6,6 +7,7 @@ type GoogleMapPropsWithConsent = GoogleMapWithConsentProps & {
 declare const useGoogleMapProps: (props: GoogleMapSettingsProps & {
     id: string;
     className?: string;
+    a11y?: A11y;
 }) => {
     componentProps: Omit<GoogleMapPropsWithConsent, "mapData">;
     mapData: GoogleMapMapData;

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

@@ -1,5 +1,5 @@
 import { b as DISPLAY_GROUPS, D as DATA, M as MEDIA, a as ACTIONS, I as INTERACTIONS, A as Archetype, L as LAYOUT } from "../chunks/chunk-V7QOLP3D.js";
-import { h as DisplayNames, i as MAP_STYLE_KEYS, j as defaultValues, a as MAX_ZOOM, M as MIN_ZOOM } from "../chunks/consts.js";
+import { k as DisplayNames, l as MAP_STYLE_KEYS, m as defaultValues, a as MAX_ZOOM, M as MIN_ZOOM } from "../chunks/consts.js";
 import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: "bf8a38af-5784-47d5-92d3-3627a6a60bc6",

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

@@ -46,6 +46,20 @@ const DEFAULT_LOCATION = {
   longitude: -122.387301,
   title: "Wix Office"
 };
+const TRANSLATIONS_NAMESPACES = {
+  componentLabel: "component_label",
+  googleMaps: "GoogleMaps"
+};
+const TranslationKeys = {
+  mapAriaLabel: "COMPONENT_LABEL_googleMapsTitle",
+  linkOpensNewTab: "googleMaps_ariaLabel_linkOpensNewTab",
+  directionsLink: "GoogleMaps_Directions_Link"
+};
+const DefaultTranslations = {
+  mapAriaLabel: "Google Maps",
+  linkOpensNewTab: "Opens in a new tab",
+  directionsLink: "Directions"
+};
 const COMPONENT_NAME_KEY = "CookieConsent_Dataset_Component_GoogleMap";
 const COMPONENT_NAME_DEFAULT = "Google Maps";
 const COMPANY_NAME_KEY = "CookieConsent_Dataset_Company_Google";
@@ -89,10 +103,13 @@ export {
   MAP_IDS as b,
   MAP_TYPES as c,
   DEFAULT_LOCATION as d,
-  COMPANY_NAME_KEY as e,
-  COMPONENT_NAME_DEFAULT as f,
-  COMPONENT_NAME_KEY as g,
-  DisplayNames as h,
-  MAP_STYLE_KEYS as i,
-  defaultValues as j
+  DefaultTranslations as e,
+  TranslationKeys as f,
+  TRANSLATIONS_NAMESPACES as g,
+  COMPANY_NAME_KEY as h,
+  COMPONENT_NAME_DEFAULT as i,
+  COMPONENT_NAME_KEY as j,
+  DisplayNames as k,
+  MAP_STYLE_KEYS as l,
+  defaultValues as m
 };