@wix/editor-react-components 1.2873.0 → 1.2875.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, a as ACTIONS, E as ELEMENTS, N as NativeStateType, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
2
2
  import { b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT, D as DesignStates } from "../chunks/constants44.js";
3
- import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
3
+ import { a as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
4
4
  const options = [
5
5
  {
6
6
  value: "Start",
@@ -1,6 +1,6 @@
1
1
  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";
2
2
  import { D as DesignStates, b as DisplayNames, c as DEFAULT_ICON_POSITION, C as COMPONENT_TYPE } from "../chunks/constants21.js";
3
- import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
3
+ import { a as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
4
4
  import { B as BACKDROP_FILTER_SPEC } from "../chunks/specs.js";
5
5
  const displayConfig = {
6
6
  displayValues: ["none", "block"]
@@ -1,6 +1,6 @@
1
1
  import { D as DATA, b as DISPLAY_GROUPS, E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
2
2
  import { d as defaultValues, a as DisplayNames, F as FunctionalStateKeys, D as DesignStates, s as selectors } from "../chunks/constants40.js";
3
- import { b as manifestFocusable, m as manifestKeyboard } from "../chunks/manifestSdkMixins.js";
3
+ import { a as manifestFocusable, m as manifestKeyboard } from "../chunks/manifestSdkMixins.js";
4
4
  import { T as TEXT_PROP_STATIC_VALUE_MAX_LENGTH, g as getSelector } from "../chunks/manifest.js";
5
5
  const basePresetName = "baseCheckbox";
6
6
  const manifest = {
@@ -1,7 +1,7 @@
1
1
  import { E as ELEMENTS, C as CSS_PROPERTIES, N as NativeStateType, b as DISPLAY_GROUPS, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
2
2
  import { D as DisplayNames, c as DesignStates, d as defaultValues, s as selectors } from "../chunks/constants39.js";
3
3
  import { g as getSelector } from "../chunks/manifest.js";
4
- import { b as manifestFocusable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
4
+ import { a as manifestFocusable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
5
5
  import { m as manifestValidation } from "../chunks/manifest2.js";
6
6
  const manifest = {
7
7
  id: "aa224b85-e2af-462b-9a15-5de3a753bea8",
@@ -2,7 +2,7 @@ import { D as DomEventType } from "../chunks/types.impl.js";
2
2
  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";
3
3
  import { F as FunctionalStateKeys, D as DesignStates, d as defaultValues, b as DisplayNames, c as Descriptions, C as COMPONENT_TYPE, s as selectors } from "../chunks/constants37.js";
4
4
  import { T as TEXT_PROP_STATIC_VALUE_MAX_LENGTH, g as getSelector } from "../chunks/manifest.js";
5
- import { b as manifestFocusable } from "../chunks/manifestSdkMixins.js";
5
+ import { a as manifestFocusable } from "../chunks/manifestSdkMixins.js";
6
6
  const basePresetName = "baseDatePicker";
7
7
  const presetFont = (size) => ({
8
8
  defaultValue: `normal normal 400 ${size}/1.3em 'Wix Madefor Text', sans-serif`
@@ -2,7 +2,7 @@ import { b as DISPLAY_GROUPS, E as ELEMENTS, D as DATA, L as LAYOUT, A as Archet
2
2
  import { g as getTranslationResources } from "../chunks/translationResources.js";
3
3
  import { g as getSelector } from "../chunks/manifest.js";
4
4
  import { c as speedConstraints, d as playButtonDefaults, e as DisplayNames, r as rootDataDefaults, b as showButtonOnHoverDefaults, f as borderDefaultValue, i as initialSize, C as COMPONENT_TYPE, s as semanticSelectors } from "../chunks/constants29.js";
5
- import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
5
+ import { a as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
6
6
  const manifest = {
7
7
  id: "13165477-8205-4050-b078-424a1479159e",
8
8
  type: COMPONENT_TYPE,
@@ -1,6 +1,6 @@
1
1
  import { b as DISPLAY_GROUPS, a as ACTIONS, D as DATA, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
2
2
  import { D as DESCRIPTIONS, a as DISPLAY_NAMES, s as selectors } from "../chunks/constants26.js";
3
- import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
3
+ import { a as manifestFocusable, d as manifestMouseHover, e as manifestClickable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
4
4
  import { g as getSelector } from "../chunks/manifest.js";
5
5
  const manifest = {
6
6
  id: "32d6f6fe-72ef-4490-82aa-d3b13cce6ef1",
@@ -1,7 +1,7 @@
1
1
  import { E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
2
2
  import { D as DisplayNames, c as DesignStates, d as defaultValues, s as selectors } from "../chunks/constants24.js";
3
3
  import { g as getSelector } from "../chunks/manifest.js";
4
- import { b as manifestFocusable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
4
+ import { a as manifestFocusable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
5
5
  import { m as manifestValidation } from "../chunks/manifest2.js";
6
6
  const manifest = {
7
7
  id: "01a3965d-95d7-49e2-903a-3a496de97054",
@@ -1,6 +1,6 @@
1
1
  import { E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, a as ACTIONS, I as INTERACTIONS, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
2
2
  import { D as DesignStates, c as classes, R as ROOT_MENU_ITEM_CSS_PROPERTIES, a as ROOT_MENU_ITEM_CUSTOM_PROPERTIES } from "../chunks/constants20.js";
3
- import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
3
+ import { a as manifestFocusable, d as manifestMouseHover, e as manifestClickable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
4
4
  const menuItemConfig = {
5
5
  elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
6
6
  [ELEMENTS.ELEMENT_TYPE.inlineElement]: {
@@ -1,5 +1,5 @@
1
1
  import { L as LAYOUT, N as NativeStateType, E as ELEMENTS, D as DATA, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
2
- import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
2
+ import { a as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
3
3
  const DesignStates = {
4
4
  testCompCard: {
5
5
  hover: { displayName: "Hover", className: "test-comp-card--hover" },
@@ -1,7 +1,7 @@
1
1
  import { E as ELEMENTS, N as NativeStateType, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
2
2
  import { D as DisplayNames, b as DesignStates, d as defaultValues, s as selectors } from "../chunks/constants18.js";
3
3
  import { g as getSelector } from "../chunks/manifest.js";
4
- import { b as manifestFocusable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
4
+ import { a as manifestFocusable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
5
5
  import { m as manifestValidation } from "../chunks/manifest2.js";
6
6
  const manifest = {
7
7
  id: "002d94d7-bec7-4082-8d00-fe4ede12024d",
@@ -1,6 +1,6 @@
1
1
  import { I as INTERACTIONS, D as DATA, b as DISPLAY_GROUPS, E as ELEMENTS, C as CSS_PROPERTIES, N as NativeStateType, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
2
2
  import { D as DesignStates, a as DisplayNames, F as FunctionalStateKeys, c as componentClassNames } from "../chunks/constants3.js";
3
- import { m as manifestKeyboard, a as manifestInputable, b as manifestFocusable } from "../chunks/manifestSdkMixins.js";
3
+ import { m as manifestKeyboard, b as manifestInputable, a as manifestFocusable } from "../chunks/manifestSdkMixins.js";
4
4
  import { T as TEXT_PROP_STATIC_VALUE_MAX_LENGTH } from "../chunks/manifest.js";
5
5
  const designState = (s, pseudoClass) => ({
6
6
  displayName: s.displayName,
@@ -1,4 +1,5 @@
1
1
  import { A11y, Direction } from '@wix/editor-react-types';
2
+ import { SdkFunctionFocusableProps, SdkFunctionKeyboardProps } from '../../../utils/functions/sdkFunctionCallbackProps';
2
3
  export type TimePickerElementProps = {
3
4
  label?: {
4
5
  className?: string;
@@ -16,7 +17,7 @@ export type TimePickerElementProps = {
16
17
  className?: string;
17
18
  };
18
19
  };
19
- export type TimePickerProps = {
20
+ export type TimePickerProps = SdkFunctionFocusableProps & SdkFunctionKeyboardProps<HTMLElement> & {
20
21
  /** Fires with the selected local-time value, or `undefined` when cleared. */
21
22
  onValueChange?: (value: string | undefined) => void;
22
23
  /** DOM `id` on the root `.timePicker` wrapper. */
@@ -61,7 +61,9 @@ const useTimePickerValue = (params) => {
61
61
  };
62
62
  };
63
63
  const TimePickerField = ({
64
- elementProps
64
+ elementProps,
65
+ onKeyDown,
66
+ onKeyUp
65
67
  }) => {
66
68
  var _a;
67
69
  const segmentClassName = clsx(
@@ -69,6 +71,13 @@ const TimePickerField = ({
69
71
  selectors.segment,
70
72
  (_a = elementProps == null ? void 0 : elementProps.segment) == null ? void 0 : _a.className
71
73
  );
74
+ const handleKeyDownCapture = onKeyDown && ((event) => {
75
+ const wasPrevented = event.defaultPrevented;
76
+ onKeyDown(event);
77
+ if (!wasPrevented && event.defaultPrevented) {
78
+ event.stopPropagation();
79
+ }
80
+ });
72
81
  const renderSegments = (seg) => /* @__PURE__ */ jsx(
73
82
  $40825cdb76e74f70$export$336ab7fa954c4b5f,
74
83
  {
@@ -95,6 +104,8 @@ const TimePickerField = ({
95
104
  }
96
105
  );
97
106
  },
107
+ onKeyDownCapture: handleKeyDownCapture,
108
+ onKeyUp,
98
109
  "data-testid": TestIds.group,
99
110
  children: /* @__PURE__ */ jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: styles.field, "data-testid": TestIds.field, children: renderSegments })
100
111
  }
@@ -115,6 +126,10 @@ function TimePicker(props) {
115
126
  direction,
116
127
  a11y,
117
128
  onValueChange = noop,
129
+ onKeyDown,
130
+ onKeyUp,
131
+ onFocus,
132
+ onBlur,
118
133
  wix,
119
134
  elementProps
120
135
  } = props;
@@ -165,6 +180,8 @@ function TimePicker(props) {
165
180
  isReadOnly: readOnly,
166
181
  isInvalid: inErrorState,
167
182
  "aria-label": ariaLabel,
183
+ onFocus,
184
+ onBlur,
168
185
  children: [
169
186
  label2 ? /* @__PURE__ */ jsx(
170
187
  $01b77f81d0f07f68$export$b04be29aa201d4f5,
@@ -177,7 +194,14 @@ function TimePicker(props) {
177
194
  children: label2
178
195
  }
179
196
  ) : null,
180
- /* @__PURE__ */ jsx(TimePickerField, { elementProps }),
197
+ /* @__PURE__ */ jsx(
198
+ TimePickerField,
199
+ {
200
+ elementProps,
201
+ onKeyDown,
202
+ onKeyUp
203
+ }
204
+ ),
181
205
  helperText ? /* @__PURE__ */ jsx(
182
206
  $514c0188e459b4c0$export$5f1af8db9871e1d6,
183
207
  {
@@ -1,5 +1,8 @@
1
1
  import { default as React } from 'react';
2
2
  import { TimePickerElementProps } from '../TimePicker.types';
3
- export declare const TimePickerField: ({ elementProps, }: {
3
+ import { SdkFunctionKeyboardProps } from '../../../../utils/functions/sdkFunctionCallbackProps';
4
+ type TimePickerFieldProps = SdkFunctionKeyboardProps<HTMLElement> & {
4
5
  elementProps?: TimePickerElementProps;
5
- }) => React.JSX.Element;
6
+ };
7
+ export declare const TimePickerField: ({ elementProps, onKeyDown, onKeyUp, }: TimePickerFieldProps) => React.JSX.Element;
8
+ export {};
@@ -39,6 +39,7 @@ export declare const Descriptions: {
39
39
  value: string;
40
40
  helperText: string;
41
41
  errorMessage: string;
42
+ onKeyDown: string;
42
43
  };
43
44
  };
44
45
  };
@@ -1,7 +1,9 @@
1
1
  import { b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
2
2
  import { b as DisplayNames, c as Descriptions, F as FunctionalStateKeys, D as DesignStates, C as COMPONENT_TYPE, s as selectors } from "../chunks/constants2.js";
3
3
  import { T as TEXT_PROP_STATIC_VALUE_MAX_LENGTH, g as getSelector } from "../chunks/manifest.js";
4
+ import { m as manifestKeyboard, a as manifestFocusable } from "../chunks/manifestSdkMixins.js";
4
5
  const basePresetName = "baseTimePicker";
6
+ const keyboardEvents = manifestKeyboard();
5
7
  const manifest = {
6
8
  id: "41156bbe-2741-4a01-a715-7eba6e294f0b",
7
9
  type: COMPONENT_TYPE,
@@ -305,6 +307,12 @@ const manifest = {
305
307
  direction: {
306
308
  dataType: DATA.DATA_TYPE.direction
307
309
  },
310
+ ...manifestFocusable(),
311
+ ...keyboardEvents,
312
+ onKeyDown: {
313
+ ...keyboardEvents.onKeyDown,
314
+ description: Descriptions.root.data.onKeyDown
315
+ },
308
316
  onValueChange: {
309
317
  dataType: DATA.DATA_TYPE.function,
310
318
  displayName: DisplayNames.root.data.onValueChange,
@@ -343,6 +351,12 @@ const manifest = {
343
351
  "disabled"
344
352
  ]
345
353
  }
354
+ },
355
+ orderedEventsGroup: {
356
+ groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
357
+ data: {
358
+ items: ["onValueChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur"]
359
+ }
346
360
  }
347
361
  }
348
362
  },
@@ -38,7 +38,8 @@ const Descriptions = {
38
38
  data: {
39
39
  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.",
40
40
  helperText: "A hint shown under this field, like a format example. It’s always visible, so keep it short.",
41
- 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."
41
+ 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.",
42
+ onKeyDown: "Fires before the time picker handles a key. Calling preventDefault() cancels that handling. Avoid cancelling Tab, which can trap keyboard focus, or arrow keys, the only keyboard way to step a time segment."
42
43
  }
43
44
  }
44
45
  };
@@ -132,8 +132,8 @@ function manifestMediaProgress(names = {}) {
132
132
  };
133
133
  }
134
134
  export {
135
- manifestInputable as a,
136
- manifestFocusable as b,
135
+ manifestFocusable as a,
136
+ manifestInputable as b,
137
137
  manifestChangeable as c,
138
138
  manifestMouseHover as d,
139
139
  manifestClickable as e,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/editor-react-components",
3
- "version": "1.2873.0",
3
+ "version": "1.2875.0",
4
4
  "description": "React components for the Wix Editor",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -228,5 +228,5 @@
228
228
  "registry": "https://registry.npmjs.org/",
229
229
  "access": "public"
230
230
  },
231
- "falconPackageHash": "53dd13a5074549d23cb30c138da260d25783061348df45c864e18cfb"
231
+ "falconPackageHash": "3ba9b953b6ddb342b9b7785cccee90151187f3ee5468736df0f50ae8"
232
232
  }