@wix/editor-react-components 1.2856.0 → 1.2858.0

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

@@ -1,6 +1,7 @@
 import { a as ACTIONS, E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, I as INTERACTIONS, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { D as DesignStates, b as DisplayNames, c as DEFAULT_ICON_POSITION, C as COMPONENT_TYPE } from "../chunks/constants21.js";
 import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
+import { B as BACKDROP_FILTER_SPEC } from "../chunks/specs.js";
 const displayConfig = {
   displayValues: ["none", "block"]
 };
@@ -81,6 +82,23 @@ const manifest = {
       disablePositioning: false
     },
     cssProperties: {
+      backdropFilter: {
+        spec: BACKDROP_FILTER_SPEC,
+        backdropFilter: {
+          filterFunctions: [
+            CSS_PROPERTIES.FILTER_FUNCTION.blur,
+            CSS_PROPERTIES.FILTER_FUNCTION.brightness,
+            CSS_PROPERTIES.FILTER_FUNCTION.contrast,
+            CSS_PROPERTIES.FILTER_FUNCTION.dropShadow,
+            CSS_PROPERTIES.FILTER_FUNCTION.grayscale,
+            CSS_PROPERTIES.FILTER_FUNCTION.hueRotate,
+            CSS_PROPERTIES.FILTER_FUNCTION.invert,
+            CSS_PROPERTIES.FILTER_FUNCTION.opacity,
+            CSS_PROPERTIES.FILTER_FUNCTION.sepia,
+            CSS_PROPERTIES.FILTER_FUNCTION.saturate
+          ]
+        }
+      },
       background: {},
       boxShadow: {},
       borderInlineStart: {},

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

@@ -1,4 +1,5 @@
 import { A11y, Direction } from '@wix/editor-react-types';
+import { SdkFunctionFocusableProps, SdkFunctionKeyboardProps } from '../../../utils/functions/sdkFunctionCallbackProps';
 /** A `localDate` data value: an ISO `YYYY-MM-DD` calendar date with no time or zone. */
 export type LocalDate = string;
 export type DatePickerElementProps = {
@@ -30,7 +31,7 @@ export type DatePickerElementProps = {
         className?: string;
     };
 };
-export type DatePickerProps = {
+export type DatePickerProps = SdkFunctionFocusableProps & SdkFunctionKeyboardProps<HTMLElement> & {
     /** DOM `id` on the root `.datePicker` wrapper. */
     id: string;
     /** Appended to the root `.datePicker`. Use this for CSS-variable and per-element overrides. */
@@ -39,6 +40,8 @@ export type DatePickerProps = {
     value?: LocalDate;
     /** Fires with the date the visitor picked, or `undefined` when they cleared it. */
     onValueChange?: (value: LocalDate | undefined) => void;
+    /** Fires when the calendar popover opens or closes. */
+    onOpenChange?: (open: boolean) => void;
     /** Optional text label rendered above the field. */
     label?: string;
     /** Site-facing helper text rendered under the field. */

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

@@ -4158,6 +4158,7 @@ const DatePickerField = ({
 const keepOpen = () => false;
 const DatePickerCalendar = ({
   portalContainer,
+  popoverRef,
   isPreviewOpen,
   elementProps
 }) => {
@@ -4247,6 +4248,7 @@ const DatePickerCalendar = ({
     /* @__PURE__ */ jsx(
       $07b14b47974efb58$export$5b6b19405a83ff9d,
       {
+        ref: popoverRef,
         className: styles.positioner,
         containerPadding: 0,
         UNSTABLE_portalContainer: portalContainer ?? void 0,
@@ -4257,6 +4259,78 @@ const DatePickerCalendar = ({
     )
   );
 };
+const useFocusUnitEvents = ({
+  root: root2,
+  onFocus,
+  onBlur,
+  onOpenChange
+}) => {
+  const popover2 = useRef(null);
+  const popoverRef = (element) => {
+    if (element) {
+      popover2.current = element;
+    }
+  };
+  const isFocused = useRef(false);
+  const isCalendarOpen = useRef(false);
+  const pendingBlur = useRef(null);
+  const reportBlur = (event) => {
+    isFocused.current = false;
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const pendingCheck = useRef({});
+  const cancelPendingCheck = () => {
+    cancelAnimationFrame(pendingCheck.current.frame ?? 0);
+    clearTimeout(pendingCheck.current.timeout);
+  };
+  const checkPendingBlur = () => {
+    cancelPendingCheck();
+    pendingCheck.current.frame = requestAnimationFrame(() => {
+      pendingCheck.current.timeout = window.setTimeout(() => {
+        const pending = pendingBlur.current;
+        pendingBlur.current = null;
+        if (pending && isFocused.current && !(root2 == null ? void 0 : root2.contains(root2.ownerDocument.activeElement))) {
+          reportBlur(pending);
+        }
+      });
+    });
+  };
+  useEffect(() => cancelPendingCheck, []);
+  const handleFocus = (event) => {
+    pendingBlur.current = null;
+    if (isFocused.current) {
+      return;
+    }
+    isFocused.current = true;
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleBlur = (event) => {
+    var _a;
+    if (!isFocused.current || event.currentTarget.contains(event.relatedTarget)) {
+      return;
+    }
+    if (event.relatedTarget === null && ((_a = popover2.current) == null ? void 0 : _a.contains(event.target))) {
+      pendingBlur.current = event;
+      if (!isCalendarOpen.current) {
+        checkPendingBlur();
+      }
+      return;
+    }
+    reportBlur(event);
+  };
+  const handleOpenChange = (open) => {
+    isCalendarOpen.current = open;
+    if (!open && pendingBlur.current) {
+      checkPendingBlur();
+    }
+    onOpenChange == null ? void 0 : onOpenChange(open);
+  };
+  return {
+    focusProps: { onFocus: handleFocus, onBlur: handleBlur },
+    onOpenChange: handleOpenChange,
+    popoverRef
+  };
+};
 const noop = () => {
 };
 function DatePicker2(props) {
@@ -4278,6 +4352,11 @@ function DatePicker2(props) {
     a11y,
     previewCalendarOpen,
     onValueChange = noop,
+    onOpenChange,
+    onKeyDown,
+    onKeyUp,
+    onFocus,
+    onBlur,
     wix,
     elementProps
   } = props;
@@ -4289,6 +4368,19 @@ function DatePicker2(props) {
   const handleChange = (date) => {
     onValueChange(toLocalDate(date));
   };
+  const handleKeyDown = onKeyDown && ((event) => {
+    const wasPrevented = event.defaultPrevented;
+    onKeyDown(event);
+    if (!wasPrevented && event.defaultPrevented) {
+      event.stopPropagation();
+    }
+  });
+  const focusUnit = useFocusUnitEvents({
+    root: portalContainer,
+    onFocus,
+    onBlur,
+    onOpenChange
+  });
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4309,6 +4401,9 @@ function DatePicker2(props) {
           dir: direction || void 0,
           lang: language,
           "data-testid": TestIds.root,
+          onKeyDownCapture: handleKeyDown,
+          onKeyUpCapture: onKeyUp,
+          ...focusUnit.focusProps,
           children: /* @__PURE__ */ jsx($2eb8e6d23f3d0cb0$export$a54013f0d02a8f82, { locale, children: /* @__PURE__ */ jsxs(
             $06d5b8ec9ee5d538$export$5109c6dd95d8fb00,
             {
@@ -4320,6 +4415,7 @@ function DatePicker2(props) {
               isInvalid: !!errorMessage2,
               "aria-label": ariaLabel,
               isOpen: previewCalendarOpen || void 0,
+              onOpenChange: focusUnit.onOpenChange,
               children: [
                 label2 ? /* @__PURE__ */ jsx(
                   $01b77f81d0f07f68$export$b04be29aa201d4f5,
@@ -4368,6 +4464,7 @@ function DatePicker2(props) {
                   DatePickerCalendar,
                   {
                     portalContainer,
+                    popoverRef: focusUnit.popoverRef,
                     isPreviewOpen: previewCalendarOpen,
                     elementProps
                   }

package/dist/site/components/DatePicker/components/DatePickerCalendar.d.ts

@@ -1,7 +1,8 @@
 import { default as React } from 'react';
 import { DatePickerElementProps } from '../DatePicker.types';
-export declare const DatePickerCalendar: ({ portalContainer, isPreviewOpen, elementProps, }: {
+export declare const DatePickerCalendar: ({ portalContainer, popoverRef, isPreviewOpen, elementProps, }: {
     portalContainer: HTMLElement | null;
+    popoverRef?: React.Ref<HTMLElement>;
     isPreviewOpen?: boolean;
     elementProps?: DatePickerElementProps;
 }) => React.JSX.Element;

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

@@ -5,6 +5,9 @@ export declare const DisplayNames: {
         data: {
             value: string;
             onValueChange: string;
+            onOpenChange: string;
+            onKeyDown: string;
+            onKeyUp: string;
             label: string;
             helperText: string;
             errorMessage: string;
@@ -41,6 +44,8 @@ export declare const Descriptions: {
             value: string;
             helperText: string;
             errorMessage: string;
+            onKeyDown: string;
+            onKeyUp: string;
         };
     };
 };

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

@@ -1,6 +1,8 @@
+import { D as DomEventType } from "../chunks/types.impl.js";
 import { C as CSS_PROPERTIES, N as NativeStateType, b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { P as PREVIEW_CALENDAR_OPEN, D as DesignStates, d as defaultValues, b as DisplayNames, c as Descriptions, e as PREVIEW_ERROR_MESSAGE, C as COMPONENT_TYPE, s as selectors } from "../chunks/constants37.js";
 import { T as TEXT_PROP_STATIC_VALUE_MAX_LENGTH, g as getSelector } from "../chunks/manifest.js";
+import { b as manifestFocusable } from "../chunks/manifestSdkMixins.js";
 const basePresetName = "baseDatePicker";
 const presetFont = (size) => ({
   defaultValue: `normal normal 400 ${size}/1.3em 'Wix Madefor Text', sans-serif`
@@ -319,6 +321,30 @@ const manifest = {
           parameters: [{ dataType: DATA.DATA_TYPE.localDate }]
         }
       },
+      onOpenChange: {
+        dataType: DATA.DATA_TYPE.function,
+        displayName: DisplayNames.root.data.onOpenChange,
+        [DATA.DATA_TYPE.function]: {
+          parameters: [{ dataType: DATA.DATA_TYPE.booleanValue }]
+        }
+      },
+      onKeyDown: {
+        dataType: DATA.DATA_TYPE.function,
+        displayName: DisplayNames.root.data.onKeyDown,
+        description: Descriptions.root.data.onKeyDown,
+        [DATA.DATA_TYPE.function]: {
+          parameters: [{ domEvent: DomEventType.KEYBOARD }]
+        }
+      },
+      onKeyUp: {
+        dataType: DATA.DATA_TYPE.function,
+        displayName: DisplayNames.root.data.onKeyUp,
+        description: Descriptions.root.data.onKeyUp,
+        [DATA.DATA_TYPE.function]: {
+          parameters: [{ domEvent: DomEventType.KEYBOARD }]
+        }
+      },
+      ...manifestFocusable(),
       label: {
         dataType: DATA.DATA_TYPE.text,
         displayName: DisplayNames.root.data.label,
@@ -394,6 +420,19 @@ const manifest = {
             "disabled"
           ]
         }
+      },
+      orderedEventsGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: [
+            "onValueChange",
+            "onOpenChange",
+            "onKeyDown",
+            "onKeyUp",
+            "onFocus",
+            "onBlur"
+          ]
+        }
       }
     },
     // Only Disabled at the root: hover and focus are per part (Date input,

package/dist/site/components/DatePicker/useFocusUnitEvents.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+type FocusHandler = (event: React.FocusEvent<HTMLElement>) => void;
+export declare const useFocusUnitEvents: ({ root, onFocus, onBlur, onOpenChange, }: {
+    root: HTMLElement | null;
+    onFocus?: FocusHandler;
+    onBlur?: FocusHandler;
+    onOpenChange?: (open: boolean) => void;
+}) => {
+    focusProps: {
+        onFocus: (event: React.FocusEvent<HTMLElement>) => void;
+        onBlur: (event: React.FocusEvent<HTMLElement>) => void;
+    };
+    onOpenChange: (open: boolean) => void;
+    popoverRef: (element: HTMLElement | null) => void;
+};
+export {};

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

@@ -11,6 +11,7 @@ import { C as ConfigurationDefinition } from "../chunks/index15.js";
 import { d as defineService } from "../chunks/index11.js";
 import { T as TranslationsDefinition } from "../chunks/index4.js";
 import { A as ALLOWED_PROTOCOLS, C as COMPONENT_TYPE, H as HTML_COMPONENT_TITLE_KEY, a as ARIA_LABEL_NAMESPACE, L as LEGACY_HTML_COMPONENT_TITLE_KEY, b as HTML_COMPONENT_TITLE_DEFAULT, D as DEFAULT_CONSENT_POLICY, S as SANDBOX, c as ConsentTranslations } from "../chunks/constants35.js";
+import { C as CLASS_NAME_ON_COMPONENT_ROOT_EXPERIMENT, M as MOVE_PREVIEW_IDENTITY_CLASSES_TO_ROOT_EXPERIMENT } from "../chunks/specs.js";
 const isBrowser = () => typeof window !== "undefined";
 function useIFrame({
   reducer = () => ({}),
@@ -173,8 +174,6 @@ const setProtocol = (url, staticHTMLComponentUrl) => {
   const link = url.split("//")[1];
   return alreadySet ? url : `${protocol}//${link}`;
 };
-const CLASS_NAME_ON_COMPONENT_ROOT_EXPERIMENT = "classNameOnComponentRoot";
-const MOVE_PREVIEW_IDENTITY_CLASSES_TO_ROOT_EXPERIMENT = "movePreviewIdentityClassesToRoot";
 const useHTMLComponentProps = ({
   props,
   isPreview,

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

@@ -1,6 +1,7 @@
 import { E as ELEMENTS, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, N as NativeStateType, a as ACTIONS, D as DATA, L as LAYOUT, I as INTERACTIONS, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { g as getTranslationResources } from "../chunks/translationResources.js";
 import { c as DesignStates, f as DisplayNames, s as selectors, g as DropdownAnchorPositions, h as DropdownAppliedStyleProperties, i as elementKeys, j as customActionKeys, k as MENU_ANIMATED_ICON_SPEC, m as states, p as presets, n as menuBuiltInActions, C as COMPONENT_TYPE } from "../chunks/constants27.js";
+import { B as BACKDROP_FILTER_SPEC } from "../chunks/specs.js";
 import { d as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const dropdownItemConfig = {
   elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
@@ -689,6 +690,23 @@ const navbarConfig = {
       selectable: false
     },
     cssProperties: {
+      backdropFilter: {
+        spec: BACKDROP_FILTER_SPEC,
+        backdropFilter: {
+          filterFunctions: [
+            CSS_PROPERTIES.FILTER_FUNCTION.blur,
+            CSS_PROPERTIES.FILTER_FUNCTION.brightness,
+            CSS_PROPERTIES.FILTER_FUNCTION.contrast,
+            CSS_PROPERTIES.FILTER_FUNCTION.dropShadow,
+            CSS_PROPERTIES.FILTER_FUNCTION.grayscale,
+            CSS_PROPERTIES.FILTER_FUNCTION.hueRotate,
+            CSS_PROPERTIES.FILTER_FUNCTION.invert,
+            CSS_PROPERTIES.FILTER_FUNCTION.opacity,
+            CSS_PROPERTIES.FILTER_FUNCTION.sepia,
+            CSS_PROPERTIES.FILTER_FUNCTION.saturate
+          ]
+        }
+      },
       background: {},
       boxShadow: {},
       borderTop: {},

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

@@ -5,6 +5,9 @@ const DisplayNames = {
     data: {
       value: "Selected date",
       onValueChange: "On Value Change",
+      onOpenChange: "On Open Change",
+      onKeyDown: "On Key Down",
+      onKeyUp: "On Key Up",
       label: "Label",
       helperText: "Helper text",
       errorMessage: "Error message",
@@ -40,7 +43,9 @@ const Descriptions = {
     data: {
       value: "This field's current value. Connect it to your context to save the data your visitors provide. A value typed in this panel stays fixed.",
       helperText: "A hint shown under this field, like a format example. It's always visible, so keep it short.",
-      errorMessage: "The message shown when this field is invalid. Connect it to your context so it appears only when something's wrong. A message typed in this panel always shows."
+      errorMessage: "The message shown when this field is invalid. Connect it to your context so it appears only when something's wrong. A message typed in this panel always shows.",
+      onKeyDown: "Fires before the date picker handles the key, also while the calendar is open. preventDefault() cancels that handling. Cancelling Escape or Tab can trap keyboard focus. Cancelling arrows, Page Up/Down, Home, End, Backspace, Delete or digits stops visitors editing the date by keyboard.",
+      onKeyUp: "Fires when a key is released, including while the calendar is open. It only reports the key: calling preventDefault() doesn't change how the date picker responds."
     }
   }
 };

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

@@ -0,0 +1,8 @@
+const CLASS_NAME_ON_COMPONENT_ROOT_EXPERIMENT = "classNameOnComponentRoot";
+const MOVE_PREVIEW_IDENTITY_CLASSES_TO_ROOT_EXPERIMENT = "movePreviewIdentityClassesToRoot";
+const BACKDROP_FILTER_SPEC = "sp.erc.ManifestBackdropFilter";
+export {
+  BACKDROP_FILTER_SPEC as B,
+  CLASS_NAME_ON_COMPONENT_ROOT_EXPERIMENT as C,
+  MOVE_PREVIEW_IDENTITY_CLASSES_TO_ROOT_EXPERIMENT as M
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2856.0",
+  "version": "1.2858.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -228,5 +228,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "286a3052bd87963bf707d00f61bf83f33271aee5670f458c6fc20e85"
+  "falconPackageHash": "dabb3565265fe981f03e390bfe38f554cb30b110144b6651420bba77"
 }