@wix/editor-react-components 1.2289.0 → 1.2291.0

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

@@ -1,6 +1,8 @@
-import { I as INTERACTIONS, D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { D as DisplayNames, s as selectors } from "../chunks/constants2.js";
-import { g as getSelector } from "../chunks/manifest.js";
+import { I as INTERACTIONS, D as DATA, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, N as NativeStateType, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { D as DisplayNames, a as DesignStates, s as selectors } from "../chunks/constants3.js";
+import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
+import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
+import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: "b8f7e3d2-4a5c-4e8f-9b2d-1c3e5f7a9b4d",
   type: "wixEditorElements.TextInput",
@@ -24,6 +26,9 @@ const manifest = {
     },
     sdk: {
       url: "./site/components/TextInput/sdk.ts"
+    },
+    editor: {
+      componentUrl: "./site/components/TextInput/component.preview.tsx"
     }
   },
   editorElement: {
@@ -36,7 +41,59 @@ const manifest = {
       disableStretching: false,
       disablePositioning: false
     },
+    states: {
+      hover: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.hover.displayName,
+        className: DesignStates.root.hover.className,
+        pseudoClass: NativeStateType.hover
+      }),
+      focus: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.focus.displayName,
+        className: DesignStates.root.focus.className,
+        pseudoClass: NativeStateType.focus
+      }),
+      error: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.error.displayName,
+        className: DesignStates.root.error.className
+      }),
+      disabled: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.disabled.displayName,
+        className: DesignStates.root.disabled.className,
+        pseudoClass: NativeStateType.disabled,
+        props: { isDisabled: true }
+      })
+    },
     displayGroups: {
+      orderedDataGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: [
+            "required",
+            "readOnly",
+            "isDisabled",
+            "autoComplete",
+            "numberSpinnerHidden",
+            "inputType",
+            "label",
+            "placeholder",
+            "tooltip",
+            "prefix",
+            "autocompleteToken",
+            "pattern",
+            "minLength",
+            "maxLength",
+            "min",
+            "max",
+            "step",
+            "phoneFormat",
+            "errorMessageType"
+          ]
+        }
+      },
       textPaddingGroup: {
         groupType: DISPLAY_GROUPS.GROUP_TYPE.padding,
         padding: {
@@ -310,6 +367,19 @@ const manifest = {
       }
     },
     data: {
+      value: {
+        displayName: DisplayNames.data.value,
+        dataType: DATA.DATA_TYPE.text
+      },
+      isDisabled: {
+        displayName: DisplayNames.data.isDisabled,
+        dataType: DATA.DATA_TYPE.booleanValue,
+        defaultValue: false
+      },
+      name: {
+        displayName: DisplayNames.data.name,
+        dataType: DATA.DATA_TYPE.text
+      },
       // Direction properties
       direction: {
         dataType: DATA.DATA_TYPE.direction
@@ -338,6 +408,13 @@ const manifest = {
         }
       },
       // Validation properties
+      minLength: {
+        displayName: DisplayNames.data.minLength,
+        dataType: DATA.DATA_TYPE.number,
+        [DATA.DATA_TYPE.number]: {
+          min: "0"
+        }
+      },
       maxLength: {
         displayName: DisplayNames.data.maxLength,
         dataType: DATA.DATA_TYPE.number
@@ -388,6 +465,13 @@ const manifest = {
           maxLength: 4e3
         }
       },
+      tooltip: {
+        displayName: DisplayNames.data.tooltip,
+        dataType: DATA.DATA_TYPE.text,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 400
+        }
+      },
       // Accessibility
       a11y: {
         dataType: DATA.DATA_TYPE.a11y,
@@ -434,7 +518,22 @@ const manifest = {
       step: {
         displayName: DisplayNames.data.step,
         dataType: DATA.DATA_TYPE.number
-      }
+      },
+      autocompleteToken: {
+        displayName: DisplayNames.data.autocompleteToken,
+        dataType: DATA.DATA_TYPE.text,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 50
+        }
+      },
+      numberSpinnerHidden: {
+        displayName: DisplayNames.data.numberSpinnerHidden,
+        dataType: DATA.DATA_TYPE.booleanValue,
+        defaultValue: false
+      },
+      ...manifestChangeable(),
+      ...manifestInputable(),
+      ...manifestFocusable()
     },
     interactions: {
       triggers: [

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

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

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

@@ -0,0 +1,29 @@
+import { A11y, Direction } from '@wix/editor-react-types';
+import { SdkFunctionChangeableProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+import { TranslationKeys } from './constants';
+/** A viewer-facing translatable string key. */
+export type TranslationKey = keyof typeof TranslationKeys;
+/** Smallest editable time unit (React Aria `granularity`). */
+export type TimePickerGranularity = 'hour' | 'minute' | 'second';
+export type TimePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & {
+    /** Fires with the selected ISO time string (`HH:MM[:SS]`), or `''` when cleared. */
+    onChange?: (value: string) => void;
+    /** DOM `id` on the root `.timePicker` wrapper. */
+    id: string;
+    /** Appended to the root `.timePicker`. Use this for CSS-variable and per-element overrides. */
+    className: string;
+    /**
+     * The selected time as an ISO 24h `HH:MM[:SS]` string. The empty string
+     * means no time is selected.
+     */
+    value: string;
+    /** Writing direction applied to the root. */
+    direction?: Direction;
+    /** Accessibility attributes. `ariaLabel` labels the time picker for assistive tech. */
+    a11y?: A11y;
+    /** Platform-provided props. */
+    wix?: {
+        /** Spread on the preset wrapper. */
+        presetsWrapperProps?: Record<string, unknown>;
+    };
+};

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

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

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

@@ -0,0 +1,146 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as clsx } from "../chunks/clsx.js";
+import { $ as $58246871e4652552$export$c9698ec7f05a07e1, a as $40825cdb76e74f70$export$7edc06cf1783b30f, b as $40825cdb76e74f70$export$336ab7fa954c4b5f, c as $40825cdb76e74f70$export$5eaee2322dd727eb } from "../chunks/DateField.js";
+import { $ as $2eb8e6d23f3d0cb0$export$a54013f0d02a8f82 } from "../chunks/I18nProvider.js";
+import { useService } from "@wix/services-manager-react";
+import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { T as TranslationsDefinition } from "../chunks/index5.js";
+import { a as getDataAttributes } from "../chunks/dataUtils.js";
+import { d as directionStyles } from "../chunks/direction.module.js";
+import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { E as EMPTY_VALUE, T as TestIds, s as selectors, a as TRANSLATIONS_NAMESPACE, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
+import { useState } from "react";
+import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../chunks/Group.js";
+const getTranslation = (translate, key, translationKeys, defaultTranslations) => {
+  const translationKey = translationKeys[key];
+  const translated = translate(translationKey);
+  return translated && translated !== translationKey ? translated : defaultTranslations[key];
+};
+const timePicker = "timePicker__j78My";
+const root = "root__dzkbY";
+const group = "group__6HZy7";
+const field = "field__mnQwh";
+const segment = "segment__OtazP";
+const styles = {
+  timePicker,
+  root,
+  group,
+  field,
+  segment
+};
+const readString = (prop) => typeof prop === "string" ? prop : EMPTY_VALUE;
+const toTimeValue = (iso) => {
+  if (!iso) {
+    return null;
+  }
+  try {
+    return $58246871e4652552$export$c9698ec7f05a07e1(iso);
+  } catch {
+    return null;
+  }
+};
+const pad = (n) => String(n).padStart(2, "0");
+const toIso = (time, granularity) => {
+  if (!time) {
+    return EMPTY_VALUE;
+  }
+  const hoursAndMinutes = `${pad(time.hour)}:${pad(time.minute)}`;
+  return granularity === "second" ? `${hoursAndMinutes}:${pad(time.second)}` : hoursAndMinutes;
+};
+const useTimePickerValue = (params) => {
+  const { value, onChange } = params;
+  const valueStr = readString(value);
+  const [timeValue, setTimeValue] = useState(
+    () => toTimeValue(valueStr)
+  );
+  const [prevValueStr, setPrevValueStr] = useState(valueStr);
+  if (prevValueStr !== valueStr) {
+    setPrevValueStr(valueStr);
+    setTimeValue(toTimeValue(valueStr));
+  }
+  const handleChange = (next) => {
+    setTimeValue(next);
+    onChange(toIso(next, "minute"));
+  };
+  return {
+    timeValue,
+    handleChange,
+    hasValue: Boolean(valueStr)
+  };
+};
+const renderSegments = (segment2) => /* @__PURE__ */ jsx($40825cdb76e74f70$export$336ab7fa954c4b5f, { segment: segment2, className: styles.segment });
+const TimePickerField = ({
+  clearButton
+}) => /* @__PURE__ */ jsxs(
+  $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
+  {
+    className: clsx(styles.group, selectors.group),
+    "data-testid": TestIds.group,
+    children: [
+      /* @__PURE__ */ jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: styles.field, "data-testid": TestIds.field, children: renderSegments }),
+      clearButton
+    ]
+  }
+);
+const noop = () => {
+};
+function TimePicker(props) {
+  const environmentService = useService(EnvironmentDefinition);
+  const { translate } = useService(TranslationsDefinition);
+  const translateByKey = translate(TRANSLATIONS_NAMESPACE);
+  const t = (key) => getTranslation(translateByKey, key, TranslationKeys, DefaultTranslations);
+  const {
+    id,
+    className = "",
+    direction,
+    a11y,
+    onChange = noop,
+    onFocus = noop,
+    onBlur = noop,
+    wix
+  } = props;
+  const { timeValue, handleChange } = useTimePickerValue({
+    value: props.value,
+    onChange
+  });
+  const locale = environmentService.language || "en-US";
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || t("ariaLabel");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: presetWrapperStyles.presetWrapper,
+      ...(wix == null ? void 0 : wix.presetsWrapperProps) || {},
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          id,
+          ...getDataAttributes(props),
+          className: clsx(
+            className,
+            styles.root,
+            selectors.root,
+            !direction && directionStyles.fallbackDirection
+          ),
+          dir: direction || void 0,
+          lang: environmentService.language,
+          "data-testid": TestIds.root,
+          children: /* @__PURE__ */ jsx($2eb8e6d23f3d0cb0$export$a54013f0d02a8f82, { locale, children: /* @__PURE__ */ jsx(
+            $40825cdb76e74f70$export$5eaee2322dd727eb,
+            {
+              className: styles.timePicker,
+              value: timeValue,
+              onChange: handleChange,
+              "aria-label": ariaLabel,
+              onFocus,
+              onBlur,
+              children: /* @__PURE__ */ jsx(TimePickerField, { clearButton: null })
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+export {
+  TimePicker as default
+};

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

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

package/dist/site/components/TimePicker/components/TimePickerField.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+export declare const TimePickerField: ({ clearButton, }: {
+    clearButton: React.ReactNode;
+}) => React.JSX.Element;

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

@@ -0,0 +1,32 @@
+export declare const DisplayNames: {
+    root: {
+        elementDisplayName: string;
+        data: {
+            value: string;
+        };
+        elements: {
+            timeInput: string;
+        };
+        cssCustomProperties: {};
+    };
+};
+/** The value that represents "no time selected". */
+export declare const EMPTY_VALUE = "";
+export declare const TRANSLATIONS_NAMESPACE = "timePicker";
+/** Viewer-facing string keys (translated via the Translations service). */
+export declare const TranslationKeys: {
+    readonly ariaLabel: "timePicker_aria_label";
+};
+/** English fallbacks used when a translation is missing. */
+export declare const DefaultTranslations: {
+    readonly ariaLabel: "Time picker";
+};
+export declare const TestIds: {
+    readonly root: "timepicker-root";
+    readonly group: "timepicker-group";
+    readonly field: "timepicker-field";
+};
+export declare const selectors: {
+    readonly root: "timePicker";
+    readonly group: "timePicker__group";
+};

package/dist/site/components/TimePicker/css.css

@@ -0,0 +1,64 @@
+.timePicker__j78My {
+  --field-background-color: var(--wst-primary-background-color, #ffffff);
+  --borderColor: var(--wst-system-line-1-color, #dfe5eb);
+  --borderWidth: 1px;
+  --borderStartStartRadius: 6px;
+  --borderStartEndRadius: 6px;
+  --borderEndStartRadius: 6px;
+  --borderEndEndRadius: 6px;
+}
+.root__dzkbY {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 120px;
+  max-width: 100%;
+  font: var(--font, normal normal normal 16px/1.5em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif);
+  color: var(--color, #2b2b2b);
+  text-align: start;
+}
+.timePicker__j78My {
+  display: flex;
+  flex-direction: column;
+}
+.group__6HZy7 {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  font: inherit;
+  color: inherit;
+  background: var(--field-background-color);
+  border-style: solid;
+  border-width: var(--borderWidth);
+  border-color: var(--borderColor);
+  border-start-start-radius: var(--borderStartStartRadius);
+  border-start-end-radius: var(--borderStartEndRadius);
+  border-end-start-radius: var(--borderEndStartRadius);
+  border-end-end-radius: var(--borderEndEndRadius);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.field__mnQwh {
+  display: inline-flex;
+  flex: 1;
+  min-width: 0;
+  gap: 1px;
+  font: inherit;
+  color: inherit;
+  white-space: nowrap;
+}
+.segment__OtazP {
+  padding: 0 2px;
+  border-radius: 3px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  outline: none;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}
+.presetWrapper__J1yzj {
+  display: contents;
+}

package/dist/site/components/TimePicker/hooks/useTimePickerValue.d.ts

@@ -0,0 +1,10 @@
+import { TimeValue } from 'react-aria-components';
+import { TimePickerProps } from '../TimePicker.types';
+export declare const useTimePickerValue: (params: {
+    value: TimePickerProps["value"];
+    onChange: NonNullable<TimePickerProps["onChange"]>;
+}) => {
+    timeValue: TimeValue | null;
+    handleChange: (next: TimeValue | null) => void;
+    hasValue: boolean;
+};

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

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

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

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

package/dist/site/components/TimePicker/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/TimePicker/manifest.js

@@ -0,0 +1,113 @@
+import { D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { c as DisplayNames, s as selectors } from "../chunks/constants2.js";
+import { g as getSelector } from "../chunks/manifest.js";
+import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+const cssProperties = {
+  font: {},
+  color: {},
+  textAlign: {}
+};
+const cssCustomProperties = {};
+const boxBorder = {
+  borderTop: {},
+  borderBottom: {},
+  borderInlineStart: {},
+  borderInlineEnd: {},
+  borderStartStartRadius: {},
+  borderStartEndRadius: {},
+  borderEndStartRadius: {},
+  borderEndEndRadius: {}
+};
+const boxPadding = {
+  paddingTop: {},
+  paddingBottom: {},
+  paddingInlineStart: {},
+  paddingInlineEnd: {}
+};
+const manifest = {
+  id: "eb293641-a409-4f13-b122-57534b6abdab",
+  type: "wixEditorElements.TimePicker__DEV__v2",
+  description: "A time picker input. Visitors type a time into hour/minute segments or step them with arrow keys. The selected time is exposed as an ISO string and can be connected to a data field.",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.content
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.content
+      }
+    }
+  },
+  editorElement: {
+    selector: getSelector(selectors.root),
+    displayName: DisplayNames.root.elementDisplayName,
+    archetype: Archetype.TextInput,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
+      disableStretching: true,
+      disablePositioning: false
+    },
+    elements: {
+      timeInput: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.timeInput,
+          selector: getSelector(selectors.group),
+          behaviors: { selectable: false },
+          cssProperties: {
+            background: {},
+            columnGap: {},
+            ...boxBorder,
+            ...boxPadding
+          }
+        }
+      }
+    },
+    data: {
+      value: {
+        dataType: DATA.DATA_TYPE.localTime,
+        displayName: DisplayNames.root.data.value
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
+      },
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      ...manifestChangeable(),
+      ...manifestFocusable()
+    },
+    displayFilters: {
+      data: {
+        hide: ["onChange", "onFocus", "onBlur"]
+      }
+    },
+    cssCustomProperties,
+    cssProperties
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/TimePicker/component.tsx",
+      dependencies: {
+        serviceDependencies: [
+          "@wix/viewer-service-environment",
+          "@wix/viewer-service-translations"
+        ]
+      }
+    },
+    editor: {
+      componentUrl: "./site/components/TimePicker/component.preview.tsx"
+    }
+  },
+  moduleConfiguration: {
+    package: { name: "@wix/editor-react-components", version: "^1.0.0" },
+    component: { path: "site/components/TimePicker" }
+  }
+};
+export {
+  manifest as default
+};

package/dist/site/components/TimePicker/timePickerUtils.d.ts

@@ -0,0 +1,15 @@
+import { TimeValue } from 'react-aria-components';
+import { TimePickerGranularity } from './TimePicker.types';
+/** Reads a string prop, defaulting an unset/non-string value to empty. */
+export declare const readString: (prop: string | undefined) => string;
+/**
+ * Parses an ISO `HH:MM[:SS]` into a React Aria `TimeValue` (or `null`).
+ * `parseTime` returns the top-level `@internationalized/date` type while RAC's
+ * `TimeValue` comes from its bundled copy — same shape, so bridge with a cast.
+ */
+export declare const toTimeValue: (iso: string) => TimeValue | null;
+/**
+ * `TimeValue` → ISO at the active granularity's precision. `Time.toString()`
+ * always appends seconds, which would drift minute-level values to `HH:MM:00`.
+ */
+export declare const toIso: (time: TimeValue | null, granularity: TimePickerGranularity) => string;

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle, useCallback, useMemo } from "react";
 import { p as parseSvg } from "./parseSvg.js";
-import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants20.js";
+import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants21.js";
 import { c as cn } from "./index8.js";
 const AnimatedSvg = forwardRef(
   ({ svgContent, reducedMotion = false, duration }, ref) => {

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

@@ -7,7 +7,7 @@ import { a as getDataAttributes, g as getQaDataAttributes } from "./dataUtils.js
 import { f as formatClassNames } from "./classNames.js";
 import { I as IconAnimationTriggers } from "./Button.types.js";
 import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
-import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants19.js";
+import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants20.js";
 import { d as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
 import { i as isValidLink } from "./Link.js";
 const root = "root__IB9QF";